/* ==========================================================
VALIRINA ATELIER — SHOP BY CATEGORY
Fișier: shop-by-category.css

STRUCTURE

.valirina-shop-categories
│
├── .category-slider
│   └── .category-track
│       ├── .category-card
│       ├── .category-card
│       └── ...
│
└── .category-navigation
    ├── .category-progress
    │   └── .category-progress-bar
    │
    └── .category-controls
        ├── .category-prev
        └── .category-next

TEXT FIT SYSTEM

Card title font-size automatically reacts to the REAL
runtime card width.

JS controls:
--runtime-card-width
--runtime-image-height

CSS automatically adapts typography using container units.

SECTION SPACING SYSTEM

Desktop:      35px bottom
Tablet:       30px bottom
Mobile:       24px bottom
Small mobile: 20px bottom

Top spacing is 0 because the previous component owns
the distance leading into this section.
========================================================== */


/* ==========================================================
01 — DESKTOP / GLOBAL VARIABLES
========================================================== */

.valirina-shop-categories {

    /* ======================================================
       DESIGN SYSTEM
    ====================================================== */

    --valirina-editorial-font:
        "Cormorant Garamond",
        Georgia,
        serif;

    --valirina-text-primary:
        #1d1c1a;

    --valirina-text-secondary:
        #625d57;

    --valirina-accent:
        #ad772d;


    /* ======================================================
       SECTION
    ====================================================== */

    --section-max-width:
        1600px;

    --section-padding-top:
        0px;

    --section-padding-right:
        20px;

    --section-padding-bottom:
        35px;

    --section-padding-left:
        20px;

    --section-gap:
        0px;


    /* ======================================================
       DESKTOP — CARD TARGETS
    ====================================================== */

    --desktop-card-width:
        150px;

    --desktop-image-height:
        150px;

    --desktop-last-card-visible:
        35;


    /* ======================================================
       ACTIVE DEVICE VALUES
    ====================================================== */

    --target-card-width:
        var(--desktop-card-width);

    --target-image-height:
        var(--desktop-image-height);

    --target-last-card-visible:
        var(--desktop-last-card-visible);


    /* ======================================================
       RUNTIME VALUES
       JS MAY OVERRIDE THESE
    ====================================================== */

    --runtime-card-width:
        var(--target-card-width);

    --runtime-image-height:
        var(--target-image-height);


    /* ======================================================
       CARD DIMENSIONS
    ====================================================== */

    --card-width:
        var(--runtime-card-width);

    --image-height:
        var(--runtime-image-height);


    /*
     * FIXED compact title area.
     *
     * We do NOT increase this when the title is longer.
     */

    --text-zone-height:
        45px;

    --text-zone-padding-x:
        5px;

    --text-zone-padding-y:
        4px;


    --card-gap:
        16px;

    --card-radius:
        12px;

    --card-border-width:
        1px;


    /* ======================================================
       CARD TITLE — AUTO FIT
    ====================================================== */

    --card-font-size-min:
        12px;

    --card-font-size-max:
        16px;

    --card-font-fluid-size:
        10.5cqw;

    --card-font-weight:
        650;

    --card-line-height:
        1;

    --card-letter-spacing:
        -0.03em;

    --card-title-color:
        var(--valirina-text-primary);


    /* ======================================================
       IMAGE
    ====================================================== */

    --image-fit:
        contain;

    --image-hover-scale:
        1.05;

    --image-animation-speed:
        300ms;


    /* ======================================================
       CARD HOVER
    ====================================================== */

    --card-hover-up:
        -3px;

    --card-animation-speed:
        220ms;


    /* ======================================================
       CARD COLORS
    ====================================================== */

    --card-background:
        #ffffff;

    --card-border-color:
        rgba(29, 28, 26, 0.09);

    --card-shadow:
        none;

    --card-shadow-hover:
        none;


    /* ======================================================
       NAVIGATION
    ====================================================== */

    --category-navigation-top-gap:
        20px;

    --category-navigation-gap:
        26px;


    /* ======================================================
       PROGRESS
    ====================================================== */

    --category-progress-height:
        3px;

    --category-progress-background:
        #ebe9e5;

    --category-progress-active:
        #1f1d1a;

    --category-progress-radius:
        999px;


    /* ======================================================
       CONTROLS
    ====================================================== */

    --category-control-size:
        42px;

    --category-control-icon-size:
        16px;

    --category-control-gap:
        8px;

    --category-control-border:
        #dedcd8;

    --category-control-background:
        #ffffff;

    --category-control-color:
        #1f1d1a;

    --category-control-disabled-opacity:
        0.32;

    --category-control-hover-background:
        #1f1d1a;

    --category-control-hover-color:
        #ffffff;

    --category-control-transition-duration:
        220ms;
}


/* ==========================================================
02 — TABLET
========================================================== */

@media (max-width: 1024px) and (min-width: 768px) {

    .valirina-shop-categories {

        /* ==================================================
           TABLET — CARD TARGETS
        ================================================== */

        --tablet-card-width:
            140px;

        --tablet-image-height:
            140px;

        --tablet-last-card-visible:
            35;


        --target-card-width:
            var(--tablet-card-width);

        --target-image-height:
            var(--tablet-image-height);

        --target-last-card-visible:
            var(--tablet-last-card-visible);


        --runtime-card-width:
            var(--target-card-width);

        --runtime-image-height:
            var(--target-image-height);


        /* ==================================================
           SECTION
        ================================================== */

        --section-padding-top:
            0px;

        --section-padding-right:
            18px;

        --section-padding-bottom:
            30px;

        --section-padding-left:
            18px;


        /* ==================================================
           CARD
        ================================================== */

        --text-zone-height:
            40px;

        --text-zone-padding-x:
            4px;

        --text-zone-padding-y:
            3px;

        --card-gap:
            14px;


        /* ==================================================
           TYPOGRAPHY
        ================================================== */

        --card-font-size-min:
            11px;

        --card-font-size-max:
            15px;

        --card-font-fluid-size:
            10.3cqw;


        --image-hover-scale:
            1.025;


        /* ==================================================
           NAVIGATION
        ================================================== */

        --category-navigation-top-gap:
            20px;

        --category-control-size:
            40px;

        --category-control-icon-size:
            15px;
    }
}


/* ==========================================================
03 — MOBILE
========================================================== */

@media (max-width: 767px) {

    .valirina-shop-categories {

        /* ==================================================
           MOBILE — CARD TARGETS
        ================================================== */

        --mobile-card-width:
            125px;

        --mobile-image-height:
            125px;

        --mobile-last-card-visible:
            35;


        --target-card-width:
            var(--mobile-card-width);

        --target-image-height:
            var(--mobile-image-height);

        --target-last-card-visible:
            var(--mobile-last-card-visible);


        --runtime-card-width:
            var(--target-card-width);

        --runtime-image-height:
            var(--target-image-height);


        /* ==================================================
           SECTION
        ================================================== */

        --section-padding-top:
            0px;

        --section-padding-right:
            14px;

        --section-padding-bottom:
            24px;

        --section-padding-left:
            14px;


        /* ==================================================
           CARD
        ================================================== */

        --text-zone-height:
            36px;

        --text-zone-padding-x:
            3px;

        --text-zone-padding-y:
            3px;

        --card-gap:
            12px;


        /* ==================================================
           TYPOGRAPHY
        ================================================== */

        --card-font-size-min:
            10px;

        --card-font-size-max:
            14px;

        --card-font-fluid-size:
            10.2cqw;


        --image-hover-scale:
            1.02;


        /* ==================================================
           NAVIGATION
        ================================================== */

        --category-navigation-top-gap:
            14px;

        --category-navigation-gap:
            14px;

        --category-control-size:
            38px;

        --category-control-icon-size:
            14px;
    }
}


/* ==========================================================
04 — SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

    .valirina-shop-categories {

        /* ==================================================
           SMALL MOBILE
        ================================================== */

        --mobile-card-width:
            100px;

        --mobile-image-height:
            100px;

        --mobile-last-card-visible:
            35;


        --target-card-width:
            var(--mobile-card-width);

        --target-image-height:
            var(--mobile-image-height);

        --target-last-card-visible:
            var(--mobile-last-card-visible);


        --runtime-card-width:
            var(--target-card-width);

        --runtime-image-height:
            var(--target-image-height);


        /* ==================================================
           SECTION
        ================================================== */

        --section-padding-top:
            0px;

        --section-padding-right:
            12px;

        --section-padding-bottom:
            20px;

        --section-padding-left:
            12px;


        /* ==================================================
           TITLE AREA
        ================================================== */

        --text-zone-height:
            32px;

        --text-zone-padding-x:
            2px;

        --text-zone-padding-y:
            2px;


        /* ==================================================
           AUTO-FIT FONT
        ================================================== */

        --card-font-size-min:
            9px;

        --card-font-size-max:
            12px;

        --card-font-fluid-size:
            10cqw;
    }
}


/* ==========================================================
05 — RESET
========================================================== */

.valirina-shop-categories,
.valirina-shop-categories *,
.valirina-shop-categories *::before,
.valirina-shop-categories *::after {

    box-sizing:
        border-box;
}


/* ==========================================================
06 — SECTION
========================================================== */

.valirina-shop-categories {

    position:
        relative !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    width:
        100% !important;

    max-width:
        var(--section-max-width) !important;

    margin:
        0 auto !important;

    padding:
        var(--section-padding-top)
        var(--section-padding-right)
        var(--section-padding-bottom)
        var(--section-padding-left) !important;

    gap:
        var(--section-gap) !important;

    overflow:
        visible !important;
}


/* ==========================================================
07 — SECTION INNER
========================================================== */

.valirina-shop-categories
> .e-con-inner {

    display:
        flex !important;

    flex-direction:
        column !important;

    flex-wrap:
        nowrap !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        0 !important;
}


/* ==========================================================
08 — SLIDER
========================================================== */

.valirina-shop-categories
.category-slider {

    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;
}


.valirina-shop-categories
.category-slider
> .e-con-inner {

    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;
}


/* ==========================================================
09 — TRACK
========================================================== */

.valirina-shop-categories
.category-track {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    gap:
        var(--card-gap) !important;

    margin:
        0 !important;

    padding:
        3px !important;

    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;

    scroll-behavior:
        smooth;

    scroll-snap-type:
        x proximity;

    overscroll-behavior-inline:
        contain;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;
}


.valirina-shop-categories
.category-track::-webkit-scrollbar {

    display:
        none;
}


/* ==========================================================
10 — TRACK INNER
========================================================== */

.valirina-shop-categories
.category-track
> .e-con-inner {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    width:
        max-content !important;

    min-width:
        max-content !important;

    max-width:
        none !important;

    gap:
        var(--card-gap) !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
11 — CARD
========================================================== */

.valirina-shop-categories
.category-card,
.valirina-shop-categories
.category-card.elementor-element {

    container-type:
        inline-size;

    container-name:
        category-card;


    position:
        relative !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    flex-wrap:
        nowrap !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    flex:
        0 0
        var(--card-width) !important;

    width:
        var(--card-width) !important;

    min-width:
        var(--card-width) !important;

    max-width:
        var(--card-width) !important;

    height:
        calc(
            var(--image-height)
            +
            var(--text-zone-height)
        ) !important;

    min-height:
        calc(
            var(--image-height)
            +
            var(--text-zone-height)
        ) !important;

    max-height:
        calc(
            var(--image-height)
            +
            var(--text-zone-height)
        ) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        0 !important;

    overflow:
        hidden !important;

    border:
        var(--card-border-width)
        solid
        var(--card-border-color) !important;

    border-radius:
        var(--card-radius) !important;

    background:
        var(--card-background) !important;

    box-shadow:
        var(--card-shadow) !important;

    scroll-snap-align:
        start;

    transition:
        transform
        var(--card-animation-speed)
        ease,
        box-shadow
        var(--card-animation-speed)
        ease;
}


/* ==========================================================
12 — CARD INNER
========================================================== */

.valirina-shop-categories
.category-card
> .e-con-inner {

    display:
        flex !important;

    flex-direction:
        column !important;

    flex-wrap:
        nowrap !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        0 !important;

    overflow:
        hidden !important;

    border-radius:
        inherit;

    background:
        var(--card-background) !important;
}


/* ==========================================================
13 — CARD HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {

    .valirina-shop-categories
    .category-card:hover {

        transform:
            translateY(
                var(--card-hover-up)
            );

        box-shadow:
            var(--card-shadow-hover) !important;
    }
}


/* ==========================================================
14 — CARD IMAGE
========================================================== */

.valirina-shop-categories
.category-card-image,
.valirina-shop-categories
.category-card-image.elementor-element {

    order:
        1 !important;

    position:
        relative !important;

    display:
        block !important;

    flex:
        0 0
        var(--image-height) !important;

    width:
        100% !important;

    height:
        var(--image-height) !important;

    min-height:
        var(--image-height) !important;

    max-height:
        var(--image-height) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    border:
        none !important;

    border-radius:
        calc(var(--card-radius) - 1px)
        calc(var(--card-radius) - 1px)
        0
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* ==========================================================
15 — IMAGE WRAPPERS
========================================================== */

.valirina-shop-categories
.category-card-image
.elementor-widget-container,
.valirina-shop-categories
.category-card-image
a,
.valirina-shop-categories
.category-card-image
picture {

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    border:
        none !important;

    border-radius:
        inherit;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* ==========================================================
16 — IMAGE
========================================================== */

.valirina-shop-categories
.category-card-image
img {

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        none !important;

    border-radius:
        inherit;

    background:
        transparent !important;

    box-shadow:
        none !important;

    object-fit:
        var(--image-fit) !important;

    object-position:
        center !important;

    transition:
        transform
        var(--image-animation-speed)
        ease;
}


/* ==========================================================
17 — IMAGE HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {

    .valirina-shop-categories
    .category-card:hover
    .category-card-image
    img {

        transform:
            scale(
                var(--image-hover-scale)
            );
    }
}


/* ==========================================================
18 — TEXT ZONE

FIXED HEIGHT.
TEXT SHRINKS INSTEAD OF THE ZONE GROWING.
========================================================== */

.valirina-shop-categories
.category-card-title,
.valirina-shop-categories
.category-card-title.elementor-element,
.valirina-shop-categories
.category-card-title.elementor-widget,
.valirina-shop-categories
.category-card-title.elementor-hidden-mobile {

    order:
        2 !important;

    position:
        relative !important;

    inset:
        auto !important;

    z-index:
        3 !important;

    display:
        flex !important;

    flex:
        0 0
        var(--text-zone-height) !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    height:
        var(--text-zone-height) !important;

    min-height:
        var(--text-zone-height) !important;

    max-height:
        var(--text-zone-height) !important;

    margin:
        0 !important;

    padding:
        var(--text-zone-padding-y)
        var(--text-zone-padding-x) !important;

    overflow:
        hidden !important;

    border:
        none !important;

    border-radius:
        0
        0
        calc(var(--card-radius) - 1px)
        calc(var(--card-radius) - 1px) !important;

    background:
        var(--card-background) !important;

    box-shadow:
        none !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        none !important;

    text-align:
        center !important;
}


/* ==========================================================
19 — TEXT INNER
========================================================== */

.valirina-shop-categories
.category-card-title
.elementor-widget-container {

    position:
        relative !important;

    z-index:
        4 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    background:
        transparent !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        none !important;
}


/* ==========================================================
20 — CARD TITLE

AUTO-SHRINK ACCORDING TO REAL CARD WIDTH
========================================================== */

.valirina-shop-categories
.category-card-title
.elementor-heading-title {

    position:
        relative !important;

    z-index:
        5 !important;

    display:
        block !important;

    width:
        max-content !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    height:
        auto !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    color:
        var(--card-title-color) !important;

    font-family:
        var(--valirina-editorial-font) !important;

    font-size:
        clamp(
            var(--card-font-size-min),
            var(--card-font-fluid-size),
            var(--card-font-size-max)
        ) !important;

    font-weight:
        var(--card-font-weight) !important;

    line-height:
        var(--card-line-height) !important;

    letter-spacing:
        var(--card-letter-spacing) !important;

    text-align:
        center !important;

    white-space:
        nowrap !important;

    word-break:
        normal !important;

    overflow-wrap:
        normal !important;

    hyphens:
        none !important;

    overflow:
        visible !important;

    text-overflow:
        clip !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        none !important;
}


/* ==========================================================
21 — CONTAINER QUERY FINE-TUNING
========================================================== */

@container category-card (max-width: 130px) {

    .category-card-title
    .elementor-heading-title {

        letter-spacing:
            -0.035em !important;
    }
}


@container category-card (max-width: 115px) {

    .category-card-title
    .elementor-heading-title {

        letter-spacing:
            -0.045em !important;

        font-weight:
            650 !important;
    }
}


@container category-card (max-width: 100px) {

    .category-card-title
    .elementor-heading-title {

        letter-spacing:
            -0.05em !important;
    }
}


/* ==========================================================
22 — ELEMENTOR VISIBILITY
========================================================== */

.valirina-shop-categories
.elementor-hidden-mobile.category-card-title,
.valirina-shop-categories
.elementor-hidden-tablet.category-card-title,
.valirina-shop-categories
.elementor-hidden-desktop.category-card-title {

    display:
        flex !important;

    opacity:
        1 !important;

    visibility:
        visible !important;
}


/* ==========================================================
23 — CARD LINK OVERLAY
========================================================== */

.valirina-shop-categories
.category-card-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        10;

    display:
        block;

    border-radius:
        inherit;
}


.valirina-shop-categories
.category-card-overlay:focus-visible {

    outline:
        2px
        solid
        var(--valirina-accent);

    outline-offset:
        -2px;
}


.valirina-shop-categories
.category-card
> a {

    text-decoration:
        none;
}


/* ==========================================================
24 — NAVIGATION
========================================================== */

.valirina-shop-categories
.category-navigation {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        var(--category-navigation-gap) !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin-top:
        var(--category-navigation-top-gap) !important;

    margin-right:
        0 !important;

    margin-bottom:
        0 !important;

    margin-left:
        0 !important;

    padding:
        0 !important;
}


.valirina-shop-categories
.category-navigation
> .e-con-inner {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        var(--category-navigation-gap) !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
25 — PROGRESS TRACK
========================================================== */

.valirina-shop-categories
.category-progress {

    position:
        relative !important;

    display:
        block !important;

    flex:
        1 1 auto !important;

    width:
        auto !important;

    min-width:
        0 !important;

    height:
        var(--category-progress-height) !important;

    min-height:
        var(--category-progress-height) !important;

    max-height:
        var(--category-progress-height) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        none !important;

    border-radius:
        var(--category-progress-radius) !important;

    background:
        var(--category-progress-background) !important;

    overflow:
        hidden !important;
}


.valirina-shop-categories
.category-progress
> .e-con-inner {

    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
26 — PROGRESS ACTIVE
========================================================== */

.valirina-shop-categories
.category-progress-bar {

    position:
        absolute !important;

    z-index:
        2;

    top:
        0 !important;

    left:
        0 !important;

    display:
        block !important;

    width:
        0%;

    height:
        100% !important;

    min-height:
        100% !important;

    max-height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        none !important;

    border-radius:
        var(--category-progress-radius) !important;

    background:
        var(--category-progress-active) !important;

    pointer-events:
        none;

    transform-origin:
        left center;
}


.valirina-shop-categories
.category-progress-bar
> .e-con-inner {

    display:
        none !important;
}


/* ==========================================================
27 — CONTROLS
========================================================== */

.valirina-shop-categories
.category-controls,
.valirina-shop-categories
.category-controls
> .e-con-inner {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    flex:
        0 0 auto !important;

    gap:
        var(--category-control-gap) !important;

    width:
        auto !important;

    max-width:
        max-content !important;

    min-width:
        0 !important;

    margin:
        0
        0
        0
        auto !important;

    padding:
        0 !important;
}


/* ==========================================================
28 — PREV / NEXT
========================================================== */

.valirina-shop-categories
.category-prev,
.valirina-shop-categories
.category-next {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex:
        0 0
        var(--category-control-size) !important;

    width:
        var(--category-control-size) !important;

    min-width:
        var(--category-control-size) !important;

    max-width:
        var(--category-control-size) !important;

    height:
        var(--category-control-size) !important;

    min-height:
        var(--category-control-size) !important;

    max-height:
        var(--category-control-size) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        1px
        solid
        var(--category-control-border) !important;

    border-radius:
        50% !important;

    background:
        var(--category-control-background) !important;

    color:
        var(--category-control-color) !important;

    box-shadow:
        none !important;

    cursor:
        pointer;

    overflow:
        hidden !important;

    transition:
        background
        var(--category-control-transition-duration)
        ease,

        color
        var(--category-control-transition-duration)
        ease,

        border-color
        var(--category-control-transition-duration)
        ease,

        opacity
        var(--category-control-transition-duration)
        ease,

        transform
        var(--category-control-transition-duration)
        ease;
}


/* ==========================================================
29 — ICON WRAPPERS
========================================================== */

.valirina-shop-categories
.category-prev
.elementor-widget-container,
.valirina-shop-categories
.category-next
.elementor-widget-container,
.valirina-shop-categories
.category-prev
.elementor-icon-wrapper,
.valirina-shop-categories
.category-next
.elementor-icon-wrapper {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    line-height:
        1 !important;
}


/* ==========================================================
30 — ICON
========================================================== */

.valirina-shop-categories
.category-prev
.elementor-icon,
.valirina-shop-categories
.category-next
.elementor-icon {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        var(--category-control-icon-size) !important;

    height:
        var(--category-control-icon-size) !important;

    min-width:
        var(--category-control-icon-size) !important;

    max-width:
        var(--category-control-icon-size) !important;

    min-height:
        var(--category-control-icon-size) !important;

    max-height:
        var(--category-control-icon-size) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    font-size:
        var(--category-control-icon-size) !important;

    color:
        inherit !important;

    fill:
        currentColor !important;

    line-height:
        1 !important;
}


.valirina-shop-categories
.category-prev
svg,
.valirina-shop-categories
.category-next
svg {

    display:
        block !important;

    width:
        var(--category-control-icon-size) !important;

    height:
        var(--category-control-icon-size) !important;

    min-width:
        var(--category-control-icon-size) !important;

    max-width:
        var(--category-control-icon-size) !important;

    min-height:
        var(--category-control-icon-size) !important;

    max-height:
        var(--category-control-icon-size) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    fill:
        currentColor !important;

    stroke:
        currentColor !important;
}


/* ==========================================================
31 — DISABLED CONTROLS
========================================================== */

.valirina-shop-categories
.category-prev.is-disabled,
.valirina-shop-categories
.category-next.is-disabled {

    opacity:
        var(--category-control-disabled-opacity) !important;

    background:
        var(--category-control-background) !important;

    color:
        var(--category-control-color) !important;

    border-color:
        var(--category-control-border) !important;

    pointer-events:
        none !important;
}


/* ==========================================================
32 — CONTROL HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {

    .valirina-shop-categories
    .category-prev:not(.is-disabled):hover,
    .valirina-shop-categories
    .category-next:not(.is-disabled):hover {

        background:
            var(--category-control-hover-background) !important;

        color:
            var(--category-control-hover-color) !important;

        border-color:
            var(--category-control-hover-background) !important;

        transform:
            translateY(-1px);
    }
}


/* ==========================================================
33 — MOBILE
========================================================== */

@media (max-width: 767px) {

    .valirina-shop-categories
    .category-track {

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        padding:
            3px !important;

        overflow-x:
            auto !important;

        overflow-y:
            hidden !important;

        scroll-snap-type:
            x mandatory;
    }


    .valirina-shop-categories
    .category-navigation {

        display:
            flex !important;

        flex-direction:
            row !important;

        flex-wrap:
            nowrap !important;

        align-items:
            center !important;

        justify-content:
            space-between !important;

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;
    }


    .valirina-shop-categories
    .category-navigation
    > .e-con-inner {

        display:
            flex !important;

        flex-direction:
            row !important;

        flex-wrap:
            nowrap !important;

        align-items:
            center !important;

        justify-content:
            space-between !important;

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    .valirina-shop-categories
    .category-progress {

        flex:
            1 1 auto !important;

        width:
            auto !important;

        min-width:
            0 !important;
    }


    .valirina-shop-categories
    .category-controls,
    .valirina-shop-categories
    .category-controls
    > .e-con-inner {

        flex:
            0 0 auto !important;

        width:
            auto !important;

        max-width:
            max-content !important;

        margin-left:
            auto !important;

        margin-right:
            0 !important;
    }


    .valirina-shop-categories
    .category-prev,
    .valirina-shop-categories
    .category-next {

        display:
            flex !important;
    }
}


/* ==========================================================
34 — FALLBACK
========================================================== */

@supports not (font-size: 10cqw) {

    .valirina-shop-categories
    .category-card-title
    .elementor-heading-title {

        font-size:
            15px !important;
    }


    @media (max-width: 1024px) {

        .valirina-shop-categories
        .category-card-title
        .elementor-heading-title {

            font-size:
                14px !important;
        }
    }


    @media (max-width: 767px) {

        .valirina-shop-categories
        .category-card-title
        .elementor-heading-title {

            font-size:
                12px !important;
        }
    }


    @media (max-width: 390px) {

        .valirina-shop-categories
        .category-card-title
        .elementor-heading-title {

            font-size:
                10px !important;
        }
    }
}


/* ==========================================================
35 — ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .valirina-shop-categories *,
    .valirina-shop-categories *::before,
    .valirina-shop-categories *::after {

        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;
    }
}