/* ============================================================
   VARKA SWEETS & BAKERS
   CATEGORY PAGE — ULTRA PREMIUM
   Matches category.php exactly
   ============================================================ */


/* ============================================================
   CATEGORY PAGE ROOT
   ============================================================ */

.category-page {

    --category-bg: #fbf8f4;
    --category-white: #ffffff;
    --category-cream: #f8f0e8;

    --category-text: #241b18;
    --category-text-soft: #554943;
    --category-muted: #857873;

    --category-burgundy: #7e1828;
    --category-burgundy-dark: #5c101d;
    --category-burgundy-light: #a52f43;

    --category-gold: #bd8a45;
    --category-gold-light: #ead7b6;

    --category-border: rgba(93, 47, 31, 0.12);
    --category-border-strong: rgba(126, 24, 40, 0.20);

    --category-shadow:
        0 25px 80px rgba(54, 28, 20, 0.09);

    --category-shadow-soft:
        0 12px 40px rgba(54, 28, 20, 0.07);

    --category-radius-xl: 32px;
    --category-radius-lg: 24px;
    --category-radius-md: 18px;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(189, 138, 69, 0.055),
            transparent 28%
        ),
        radial-gradient(
            circle at 95% 55%,
            rgba(126, 24, 40, 0.035),
            transparent 30%
        ),
        var(--category-bg);

    color: var(--category-text);

}


/* ============================================================
   BREADCRUMB
   ============================================================ */

.category-breadcrumb-section {

    padding:
        24px 0 14px;

    background:
        transparent;

}

.category-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    font-size: 12px;

    line-height: 1.5;

    color:
        var(--category-muted);

    letter-spacing:
        .01em;

}

.category-breadcrumb a {

    color:
        var(--category-muted);

    transition:
        color .25s ease;

}

.category-breadcrumb a:hover {

    color:
        var(--category-burgundy);

}

.category-breadcrumb span {

    opacity:
        .45;

}

.category-breadcrumb strong {

    color:
        var(--category-text);

    font-weight:
        600;

}


/* ============================================================
   CATEGORY HERO
   ============================================================ */

.category-hero {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    min-height:
        430px;

    margin:
        12px auto 0;

    width:
        min(
            1380px,
            calc(100% - 48px)
        );

    border-radius:
        var(--category-radius-xl);

    background:
        #2d1816;

    box-shadow:
        var(--category-shadow);

}


/* ============================================================
   HERO BACKGROUND
   ============================================================ */

.category-hero-background {

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    background-size:
        cover;

    background-position:
        center;

    transform:
        scale(1.01);

    transition:
        transform 1.2s
        cubic-bezier(.2,.8,.2,1);

}

.category-hero:hover
.category-hero-background {

    transform:
        scale(1.035);

}


/*
|--------------------------------------------------------------------------
| Additional premium overlay
|--------------------------------------------------------------------------
*/

.category-hero::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:

        linear-gradient(
            90deg,
            rgba(28, 13, 11, .90) 0%,
            rgba(36, 17, 14, .76) 34%,
            rgba(36, 17, 14, .40) 64%,
            rgba(36, 17, 14, .16) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.08),
            rgba(0,0,0,.32)
        );

}


/* ============================================================
   HERO DEFAULT
   ============================================================ */

.category-hero-default {

    background:

        radial-gradient(
            circle at 80% 30%,
            rgba(189,138,69,.30),
            transparent 28%
        ),

        radial-gradient(
            circle at 70% 80%,
            rgba(126,24,40,.45),
            transparent 38%
        ),

        linear-gradient(
            135deg,
            #351b18,
            #6d2830 55%,
            #3b191a
        );

}


/* ============================================================
   HERO INNER
   ============================================================ */

.category-hero-inner {

    min-height:
        430px;

    display:
        flex;

    align-items:
        center;

    padding:
        70px 72px;

}


/* ============================================================
   HERO CONTENT
   ============================================================ */

.category-hero-content {

    width:
        min(
            650px,
            100%
        );

    color:
        #fff;

}


/* ============================================================
   EYEBROW
   ============================================================ */

.category-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        20px;

    color:
        #ead7b6;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .30em;

    text-transform:
        uppercase;

}


/*
|--------------------------------------------------------------------------
| Gold line
|--------------------------------------------------------------------------
*/

.category-eyebrow::before {

    content:
        "";

    width:
        34px;

    height:
        1px;

    background:
        #d6b375;

}


/* ============================================================
   HERO TITLE
   ============================================================ */

.category-hero-content h1 {

    margin:
        0;

    max-width:
        700px;

    color:
        #fff;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            48px,
            5.2vw,
            78px
        );

    font-weight:
        700;

    line-height:
        .98;

    letter-spacing:
        -.035em;

    text-wrap:
        balance;

}


/* ============================================================
   HERO DESCRIPTION
   ============================================================ */

.category-hero-content p {

    max-width:
        570px;

    margin:
        25px 0 0;

    color:
        rgba(255,255,255,.82);

    font-size:
        16px;

    line-height:
        1.75;

}


/* ============================================================
   HERO META
   ============================================================ */

.category-meta {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        30px;

    color:
        rgba(255,255,255,.86);

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        .03em;

}

.category-meta-divider {

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        #d7b575;

}


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

.category-products-section {

    padding:
        85px 0 100px;

}


/* ============================================================
   PRODUCTS HEADING
   ============================================================ */

.category-products-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        35px;

    margin-bottom:
        42px;

}

.category-products-heading > div:first-child {

    min-width:
        0;

}


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

.category-page .section-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        12px;

    color:
        var(--category-burgundy);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .25em;

    line-height:
        1;

}

.category-page .section-eyebrow::before {

    content:
        "";

    width:
        25px;

    height:
        1px;

    background:
        var(--category-gold);

}


/* ============================================================
   PRODUCTS TITLE
   ============================================================ */

.category-products-heading h2 {

    margin:
        0;

    color:
        var(--category-text);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    line-height:
        1.05;

    letter-spacing:
        -.025em;

}

.category-products-heading p {

    margin:
        12px 0 0;

    color:
        var(--category-muted);

    font-size:
        15px;

    line-height:
        1.7;

}


/* ============================================================
   PRODUCT COUNT
   ============================================================ */

.category-product-count {

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        baseline;

    gap:
        7px;

    padding:
        13px 17px;

    border:
        1px solid
        var(--category-border);

    border-radius:
        100px;

    background:
        rgba(255,255,255,.75);

    color:
        var(--category-text);

    font-size:
        15px;

    font-weight:
        700;

    box-shadow:
        0 8px 25px
        rgba(50,30,20,.04);

}

.category-product-count span {

    color:
        var(--category-muted);

    font-size:
        11px;

    font-weight:
        500;

}


/* ============================================================
   PRODUCT GRID
   ============================================================ */

.category-product-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        24px;

}


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

.category-product-card {

    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--category-white);

    border:
        1px solid
        var(--category-border);

    border-radius:
        var(--category-radius-lg);

    box-shadow:
        0 10px 35px
        rgba(55,30,20,.045);

    transition:
        transform .35s
        cubic-bezier(.2,.8,.2,1),
        box-shadow .35s
        cubic-bezier(.2,.8,.2,1),
        border-color .35s ease;

}

.category-product-card:hover {

    transform:
        translateY(-7px);

    border-color:
        var(--category-border-strong);

    box-shadow:
        0 25px 65px
        rgba(55,30,20,.12);

}


/* ============================================================
   PRODUCT IMAGE WRAPPER
   ============================================================ */

.category-product-image-wrap {

    position:
        relative;

    overflow:
        hidden;

    aspect-ratio:
        1 / .88;

    background:
        #f5eee7;

}


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

.category-product-image-link {

    display:
        block;

    width:
        100%;

    height:
        100%;

}


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

.category-product-image {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform .65s
        cubic-bezier(.2,.8,.2,1),
        filter .4s ease;

}

.category-product-card:hover
.category-product-image {

    transform:
        scale(1.055);

}


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

.category-product-image-wrap::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 55%,
            rgba(22,12,9,.10) 100%
        );

}


/* ============================================================
   PLACEHOLDER
   ============================================================ */

.category-product-placeholder {

    width:
        100%;

    height:
        100%;

    display:
        grid;

    place-items:
        center;

    background:
        linear-gradient(
            135deg,
            #f5ebe1,
            #fbf6f1
        );

}

.category-product-placeholder span {

    width:
        70px;

    height:
        70px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #fff;

    box-shadow:
        0 15px 35px
        rgba(50,25,15,.10);

    font-size:
        27px;

}


/* ============================================================
   FEATURED BADGE
   ============================================================ */

.category-featured-badge {

    position:
        absolute;

    top:
        17px;

    left:
        17px;

    z-index:
        3;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(255,255,255,.45);

    border-radius:
        100px;

    background:
        rgba(255,255,255,.90);

    backdrop-filter:
        blur(12px);

    color:
        var(--category-burgundy);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    box-shadow:
        0 7px 20px
        rgba(30,15,10,.10);

}


/* ============================================================
   UNAVAILABLE BADGE
   ============================================================ */

.category-unavailable-badge {

    position:
        absolute;

    left:
        17px;

    bottom:
        17px;

    z-index:
        3;

    padding:
        8px 12px;

    border-radius:
        100px;

    background:
        rgba(36,25,22,.88);

    backdrop-filter:
        blur(10px);

    color:
        #fff;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .04em;

}


/* ============================================================
   PRODUCT CONTENT
   ============================================================ */

.category-product-content {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        22px 22px 21px;

}


/* ============================================================
   PRODUCT LABEL
   ============================================================ */

.category-product-label {

    display:
        inline-block;

    max-width:
        100%;

    overflow:
        hidden;

    color:
        var(--category-gold);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


/* ============================================================
   PRODUCT NAME
   ============================================================ */

.category-product-name {

    display:
        block;

    margin-top:
        9px;

    color:
        var(--category-text);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        25px;

    font-weight:
        700;

    line-height:
        1.12;

    letter-spacing:
        -.018em;

    transition:
        color .25s ease;

}

.category-product-name:hover {

    color:
        var(--category-burgundy);

}


/* ============================================================
   PRODUCT DESCRIPTION
   ============================================================ */

.category-product-description {

    display:
        -webkit-box;

    overflow:
        hidden;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    margin:
        10px 0 0;

    color:
        var(--category-muted);

    font-size:
        12.5px;

    line-height:
        1.65;

}


/* ============================================================
   PRODUCT FOOTER
   ============================================================ */

.category-product-footer {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        15px;

    margin-top:
        auto;

    padding-top:
        22px;

}


/* ============================================================
   PRICE
   ============================================================ */

.category-product-price {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}

.category-product-price .price-from {

    color:
        var(--category-muted);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        .04em;

}

.category-product-price strong {

    color:
        var(--category-text);

    font-size:
        22px;

    font-weight:
        800;

    letter-spacing:
        -.02em;

}

.category-product-price .price-view {

    color:
        var(--category-muted);

    font-size:
        12px;

    font-weight:
        600;

}


/* ============================================================
   PRODUCT BUTTON
   ============================================================ */

.category-product-button {

    min-height:
        43px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        0 15px;

    flex:
        0 0 auto;

    border:
        1px solid
        var(--category-burgundy);

    border-radius:
        12px;

    background:
        var(--category-burgundy);

    color:
        #fff;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .01em;

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}

.category-product-button:hover {

    background:
        var(--category-burgundy-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 22px
        rgba(126,24,40,.20);

}

.category-product-arrow {

    font-size:
        15px;

    line-height:
        1;

    transition:
        transform .25s ease;

}

.category-product-button:hover
.category-product-arrow {

    transform:
        translateX(3px);

}


/* ============================================================
   DISABLED
   ============================================================ */

.category-product-button.disabled {

    border-color:
        #ded8d4;

    background:
        #f0ece9;

    color:
        #8d8580;

    cursor:
        not-allowed;

    box-shadow:
        none;

}

.category-product-button.disabled:hover {

    transform:
        none;

}


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

.category-product-card.is-unavailable
.category-product-image {

    filter:
        grayscale(.15);

}

.category-product-card.is-unavailable
.category-product-content {

    opacity:
        .82;

}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.category-empty-state {

    max-width:
        700px;

    margin:
        20px auto 0;

    padding:
        75px 40px;

    text-align:
        center;

    background:
        #fff;

    border:
        1px solid
        var(--category-border);

    border-radius:
        var(--category-radius-xl);

    box-shadow:
        var(--category-shadow-soft);

}

.category-empty-icon {

    width:
        78px;

    height:
        78px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 25px;

    border-radius:
        50%;

    background:
        var(--category-cream);

    font-size:
        30px;

}

.category-empty-state h2 {

    margin:
        5px 0 12px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        36px;

    line-height:
        1.1;

}

.category-empty-state p {

    max-width:
        480px;

    margin:
        0 auto 28px;

    color:
        var(--category-muted);

    font-size:
        14px;

    line-height:
        1.7;

}

.category-empty-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    min-height:
        48px;

    padding:
        0 20px;

    border-radius:
        13px;

    background:
        var(--category-burgundy);

    color:
        #fff;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        transform .25s ease,
        background .25s ease;

}

.category-empty-button:hover {

    background:
        var(--category-burgundy-dark);

    transform:
        translateY(-2px);

}


/* ============================================================
   BACK TO CATEGORIES
   ============================================================ */

.category-back-section {

    padding:
        0 0 100px;

}

.category-back-card {

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        42px 48px;

    border:
        1px solid
        rgba(126,24,40,.13);

    border-radius:
        var(--category-radius-xl);

    background:

        radial-gradient(
            circle at 95% 15%,
            rgba(189,138,69,.14),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #fff,
            #fbf3ec
        );

    box-shadow:
        var(--category-shadow-soft);

}

.category-back-card::before {

    content:
        "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    right:
        -100px;

    bottom:
        -130px;

    border:
        1px solid
        rgba(126,24,40,.08);

    border-radius:
        50%;

}

.category-back-card h2 {

    margin:
        0;

    color:
        var(--category-text);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        32px;

    line-height:
        1.1;

}

.category-back-card p {

    margin:
        10px 0 0;

    color:
        var(--category-muted);

    font-size:
        13px;

    line-height:
        1.6;

}

.category-back-button {

    position:
        relative;

    z-index:
        2;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        50px;

    padding:
        0 20px;

    flex:
        0 0 auto;

    border:
        1px solid
        var(--category-burgundy);

    border-radius:
        13px;

    background:
        var(--category-burgundy);

    color:
        #fff;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}

.category-back-button:hover {

    background:
        var(--category-burgundy-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(126,24,40,.18);

}

.category-back-button span {

    font-size:
        16px;

    transition:
        transform .25s ease;

}

.category-back-button:hover span {

    transform:
        translateX(3px);

}


/* ============================================================
   FOOTER COMPATIBILITY
   ============================================================ */

.category-page .footer {

    margin-top:
        0;

}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media (min-width: 1450px) {

    .category-hero {

        min-height:
            470px;

    }

    .category-hero-inner {

        min-height:
            470px;

        padding-left:
            85px;

        padding-right:
            85px;

    }

    .category-product-grid {

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

    }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

    .category-hero {

        min-height:
            400px;

    }

    .category-hero-inner {

        min-height:
            400px;

        padding:
            60px 55px;

    }

    .category-hero-content h1 {

        font-size:
            clamp(
                45px,
                6vw,
                65px
            );

    }

    .category-product-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            20px;

    }

}


/* ============================================================
   TABLET / SMALL LAPTOP
   ============================================================ */

@media (max-width: 850px) {

    .category-hero {

        width:
            calc(100% - 32px);

        border-radius:
            26px;

    }

    .category-hero-inner {

        min-height:
            390px;

        padding:
            55px 40px;

    }

    .category-products-section {

        padding:
            70px 0 80px;

    }

    .category-products-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;

        margin-bottom:
            32px;

    }

    .category-product-count {

        align-self:
            flex-start;

    }

    .category-back-card {

        padding:
            36px;

    }

}


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

@media (max-width: 650px) {

    .category-breadcrumb-section {

        padding:
            18px 0 10px;

    }

    .category-breadcrumb {

        font-size:
            10px;

        gap:
            7px;

    }


    /* HERO */

    .category-hero {

        width:
            calc(100% - 20px);

        min-height:
            390px;

        margin-top:
            8px;

        border-radius:
            22px;

    }

    .category-hero::after {

        background:

            linear-gradient(
                180deg,
                rgba(25,12,10,.18),
                rgba(25,12,10,.84)
            );

    }

    .category-hero-inner {

        min-height:
            390px;

        align-items:
            flex-end;

        padding:
            35px 25px;

    }

    .category-hero-content {

        width:
            100%;

    }

    .category-eyebrow {

        margin-bottom:
            14px;

        font-size:
            8px;

        letter-spacing:
            .22em;

    }

    .category-eyebrow::before {

        width:
            23px;

    }

    .category-hero-content h1 {

        font-size:
            clamp(
                39px,
                12vw,
                56px
            );

        line-height:
            1;

    }

    .category-hero-content p {

        margin-top:
            16px;

        font-size:
            13px;

        line-height:
            1.65;

    }

    .category-meta {

        margin-top:
            20px;

        font-size:
            10px;

    }


    /* PRODUCTS */

    .category-products-section {

        padding:
            58px 0 70px;

    }

    .category-products-heading {

        margin-bottom:
            27px;

    }

    .category-products-heading h2 {

        font-size:
            34px;

    }

    .category-products-heading p {

        margin-top:
            8px;

        font-size:
            13px;

    }

    .category-product-count {

        padding:
            10px 14px;

        font-size:
            13px;

    }


    /* GRID */

    .category-product-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            12px;

    }


    /* CARD */

    .category-product-card {

        border-radius:
            17px;

    }

    .category-product-image-wrap {

        aspect-ratio:
            1 / .92;

    }

    .category-featured-badge {

        top:
            10px;

        left:
            10px;

        padding:
            6px 8px;

        font-size:
            7px;

    }

    .category-unavailable-badge {

        left:
            10px;

        bottom:
            10px;

        padding:
            6px 8px;

        font-size:
            7px;

    }

    .category-product-content {

        padding:
            15px 13px 14px;

    }

    .category-product-label {

        font-size:
            7px;

        letter-spacing:
            .13em;

    }

    .category-product-name {

        margin-top:
            7px;

        font-size:
            18px;

        line-height:
            1.12;

    }

    .category-product-description {

        margin-top:
            7px;

        font-size:
            10px;

        line-height:
            1.55;

        -webkit-line-clamp:
            2;

    }

    .category-product-footer {

        align-items:
            flex-end;

        flex-direction:
            column;

        gap:
            12px;

        padding-top:
            16px;

    }

    .category-product-price {

        width:
            100%;

    }

    .category-product-price strong {

        font-size:
            18px;

    }

    .category-product-button {

        width:
            100%;

        min-height:
            39px;

        padding:
            0 10px;

        font-size:
            10px;

        border-radius:
            10px;

    }


    /* BACK CARD */

    .category-back-section {

        padding:
            0 0 70px;

    }

    .category-back-card {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            30px 23px;

        border-radius:
            22px;

    }

    .category-back-card h2 {

        font-size:
            27px;

    }

    .category-back-card p {

        font-size:
            12px;

    }

    .category-back-button {

        width:
            100%;

        min-height:
            47px;

    }

}


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

@media (max-width: 430px) {

    .category-product-grid {

        gap:
            9px;

    }

    .category-product-card {

        border-radius:
            15px;

    }

    .category-product-content {

        padding:
            13px 11px 12px;

    }

    .category-product-name {

        font-size:
            16px;

    }

    .category-product-description {

        font-size:
            9px;

    }

    .category-product-price strong {

        font-size:
            16px;

    }

    .category-product-button {

        min-height:
            37px;

        font-size:
            9px;

    }

}


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

@media (max-width: 360px) {

    .category-hero {

        min-height:
            350px;

    }

    .category-hero-inner {

        min-height:
            350px;

        padding:
            28px 20px;

    }

    .category-hero-content h1 {

        font-size:
            36px;

    }

    .category-product-grid {

        grid-template-columns:
            1fr;

    }

    .category-product-image-wrap {

        aspect-ratio:
            1 / .72;

    }

    .category-product-footer {

        flex-direction:
            row;

        align-items:
            center;

    }

    .category-product-price {

        width:
            auto;

    }

    .category-product-button {

        width:
            auto;

        padding:
            0 12px;

    }

}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.category-page a:focus-visible,
.category-page button:focus-visible {

    outline:
        3px solid
        rgba(189,138,69,.45);

    outline-offset:
        3px;

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    .category-page *,
    .category-page *::before,
    .category-page *::after {

        scroll-behavior:
            auto !important;

        animation:
            none !important;

        transition:
            none !important;

    }

}