/* =========================================================
   THE PASTRY JUNKIE
   SHOP PAGE
========================================================= */

/* =========================================================
   DESKTOP SHOP SCALE

   Keep the dessert/menu area pulled back,
   but DO NOT shrink the website header.
========================================================= */

@media (min-width: 1200px) {
    body.shop-page {
        zoom: 1;
    }

    body.shop-page main {
        width: auto;
        max-width: none;
        zoom: 0.5;
    }
}
/* =========================================================
   SHOP CONTENT
========================================================= */

.shop-content {
    width: 100%;
    overflow: hidden;
}


/* =========================================================
   GENERAL DESSERT SECTION
========================================================= */

.dessert-section {
    position: relative;

    width: 100%;

    overflow: hidden;
}


.dessert-section-inner {
    position: relative;
    z-index: 2;

    width: min(1440px, calc(100% - 80px));

    margin: 0 auto;

    padding: 120px 0 130px;
}


/* =========================================================
   LOADED CUPCAKES
========================================================= */

.cupcake-section {
    position: relative;

    min-height: 1000px;

    background:
        radial-gradient(
            circle at 92% 5%,
            rgba(116, 67, 51, 0.18) 0%,
            rgba(116, 67, 51, 0.09) 21%,
            transparent 43%
        ),

        radial-gradient(
            circle at 3% 48%,
            rgba(233, 150, 177, 0.16) 0%,
            rgba(233, 150, 177, 0.07) 23%,
            transparent 45%
        ),

        linear-gradient(
            180deg,
            #fffaf6 0%,
            #fff5f1 52%,
            #fffaf7 100%
        );
}


/* Soft oversized background shapes */



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

.dessert-section-intro {
    position: relative;
    z-index: 5;

    max-width: 580px;

    min-height: 500px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.dessert-section-kicker {
    margin: 0 0 15px;

    color: #8a4b3e;

    font-size: 0.9rem;
    font-weight: 800;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}


.dessert-section-title {
    margin: 0;

    color: #4b2924;

    font-size: clamp(4rem, 7vw, 7.7rem);

    font-weight: 900;

    line-height: 0.82;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.dessert-section-title span {
    display: block;

    color: #de5e95;
}


.dessert-section-description {
    max-width: 520px;

    margin: 32px 0 0;

    color: #6d4b43;

    font-size: clamp(1rem, 1.35vw, 1.22rem);

    line-height: 1.7;
}


/* =========================================================
   HUGE DECORATIVE CUPCAKES
========================================================= */

.cupcake-showcase {
    position: absolute;

    z-index: 1;

    top: 5px;
    right: max(-50px, calc((100vw - 1550px) / 2));

    width: 760px;
    height: 650px;

    pointer-events: none;
}


.cupcake-feature {
    position: absolute;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 24px 30px
            rgba(70, 35, 27, 0.18)
        );
}


/* Giant hero cupcake */

.cupcake-feature-main {
    width: 500px;

    right: -15px;
    top: 45px;

    z-index: 3;

    transform:
        rotate(2deg);
}


/* Floating strawberry cupcake */

.cupcake-feature-left {
    width: 280px;

    left: 35px;
    top: 20px;

    z-index: 2;

    transform:
        rotate(-11deg);
}


/* Floating banana pudding cupcake */

.cupcake-feature-bottom {
    width: 260px;

    right: 370px;
    bottom: 0;

    z-index: 4;

    transform:
        rotate(9deg);
}


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

.dessert-product-grid {
    position: relative;
    z-index: 5;

    display: grid;

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

    gap: 85px 55px;

    margin-top: 45px;
}

/* Center the final cupcake on its own row */
.cupcake-section .dessert-product:nth-child(10) {
    grid-column: 2;
}
/* Product is intentionally NOT a card */

.dessert-product {
    position: relative;

    min-width: 0;

    text-align: center;
}


.dessert-product-image-wrap {
    position: relative;

    width: 100%;

    height: 580px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    overflow: visible;
}


/* Soft grounding shadow */

.dessert-product-image-wrap::after {
    content: "";

    position: absolute;

    z-index: -1;

    width: 63%;
    height: 18px;

    left: 50%;
    bottom: 4px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        rgba(80, 42, 33, 0.13);

    filter: blur(12px);
}


.dessert-product-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 470px;
    max-height: 580px;

    object-fit: contain;

    transform:
        translateY(0)
        scale(1);

    transition:
        transform 0.35s ease,
        filter 0.35s ease;

    filter:
        drop-shadow(
            0 16px 16px
            rgba(77, 41, 32, 0.08)
        );
}


.dessert-product:hover
.dessert-product-image {
    transform:
        translateY(-10px)
        scale(1.035);

    filter:
        drop-shadow(
            0 22px 20px
            rgba(77, 41, 32, 0.14)
        );
}

.dessert-product h3 {
    position: relative;

    min-height: 54px;

    margin: 20px 0 0;
    padding-bottom: 18px;

    color: #4e2b25;

    font-size: clamp(
        1rem,
        1.25vw,
        1.22rem
    );

    font-weight: 800;

    line-height: 1.2;

    text-align: center;
}


/* Little pink underline instead of card decoration */

.dessert-product h3::after {
    content: "";

    position: absolute;

    width: 28px;
    height: 3px;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    margin: 0;

    border-radius: 50px;

    background: #e2679b;
}

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

@media (min-width: 1500px) {

    .dessert-product-image-wrap {
        height: 620px;
    }

    .dessert-product-image {
        max-width: 510px;
        max-height: 620px;
    }

}


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

@media (max-width: 1100px) {

    .dessert-section-inner {
        width: min(
            100% - 48px,
            1050px
        );

        padding:
            90px 0
            110px;
    }


    .dessert-section-intro {
        max-width: 500px;

        min-height: 440px;
    }


    .cupcake-showcase {
        width: 560px;
        height: 520px;

        right: -100px;
    }


    .cupcake-feature-main {
        width: 385px;

        right: 0;
        top: 75px;
    }


    .cupcake-feature-left {
        width: 210px;

        left: 10px;
        top: 35px;
    }


    .cupcake-feature-bottom {
        width: 190px;

        right: 290px;
        bottom: 25px;
    }


    .dessert-product-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap:
            55px 28px;
    }


.dessert-product-image-wrap {
    height: 320px;
}

.dessert-product-image {
    max-width: 275px;
    max-height: 310px;
}

}


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

@media (max-width: 700px) {

    .dessert-section-inner {
        width:
            calc(100% - 32px);

        padding:
            65px 0
            90px;
    }


    .dessert-section-intro {
        min-height: auto;

        max-width: 100%;

        text-align: center;
    }


    .dessert-section-kicker {
        font-size: 0.72rem;
    }


    .dessert-section-title {
        font-size:
            clamp(
                3.3rem,
                17vw,
                5.3rem
            );

        line-height: 0.87;
    }


    .dessert-section-description {
        max-width: 450px;

        margin:
            24px auto 0;

        font-size: 0.98rem;
    }


    /* Decorative dessert cluster
       moves underneath title */

    .cupcake-showcase {
        position: relative;

        top: auto;
        right: auto;

        width: 100%;
        height: 390px;

        margin:
            20px auto 0;
    }


    .cupcake-feature-main {
        width: 320px;

        max-width: 82vw;

        left: 50%;
        right: auto;
        top: 40px;

        transform:
            translateX(-50%)
            rotate(1deg);
    }


    .cupcake-feature-left {
        width: 165px;

        left: -32px;
        top: 15px;

        opacity: 0.92;

        transform:
            rotate(-12deg);
    }


    .cupcake-feature-bottom {
        width: 155px;

        right: -30px;
        bottom: 8px;

        opacity: 0.94;

        transform:
            rotate(10deg);
    }


    .dessert-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            45px 16px;

        margin-top: 15px;
    }


    .dessert-product-image-wrap {
        height: 235px;
    }


    .dessert-product-image {
        max-width: 210px;

        max-height: 235px;
    }


    .dessert-product h3 {
        margin-top: 13px;

        font-size: 0.94rem;
    }

}


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

@media (max-width: 420px) {

    .cupcake-showcase {
        height: 330px;
    }


    .cupcake-feature-main {
        width: 270px;
    }


    .cupcake-feature-left {
        width: 135px;
    }


    .cupcake-feature-bottom {
        width: 130px;
    }


    .dessert-product-image-wrap {
        height: 205px;
    }


    .dessert-product-image {
        max-height: 205px;
    }

}
/* =========================================================
   LOADED CHEESECAKE JARS
========================================================= */

.jar-section {
    position: relative;

    min-height: 1000px;

    border-top:
        1px solid
        rgba(105, 59, 48, 0.08);

    background:
        radial-gradient(
            circle at 2% 12%,
            rgba(231, 103, 151, 0.16) 0%,
            rgba(231, 103, 151, 0.07) 22%,
            transparent 43%
        ),

        radial-gradient(
            circle at 98% 14%,
            rgba(88, 45, 34, 0.18) 0%,
            rgba(88, 45, 34, 0.08) 24%,
            transparent 44%
        ),

        linear-gradient(
            180deg,
            #fffaf7 0%,
            #fdf3ef 48%,
            #fff8f5 100%
        );
}


/* =========================================================
   SOFT BACKGROUND BLOBS
========================================================= */




/* =========================================================
   JAR SECTION INNER
========================================================= */

.jar-section-inner {
    padding-top: 105px;
}


/* =========================================================
   CENTERED JAR HEADING
========================================================= */

.jar-section-intro {
    position: relative;

    z-index: 5;

    max-width: 900px;
    min-height: 390px;

    margin: 0 auto;

    justify-content: center;

    text-align: center;
}


.jar-section-kicker {
    color: #8a4b3e;
}


.jar-section-title {
    font-size:
        clamp(
            4rem,
            6vw,
            6.7rem
        );

    line-height: 0.9;
}


.jar-section-title span {
    margin-bottom: 8px;
}


.jar-section-description {
    margin:
        26px auto 0;

    max-width: 560px;
}


/* =========================================================
   HUGE EDGE JARS
========================================================= */

.jar-showcase {
    position: absolute;

    z-index: 3;

    top: 15px;
    left: 0;

    width: 100%;
    height: 570px;

    overflow: hidden;

    pointer-events: none;
}


.jar-feature {
    position: absolute;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 28px 30px
            rgba(69, 37, 29, 0.18)
        );
}


/* Strawberry jar exploding in from left */

.jar-feature-left {
    width: 430px;

    left: -125px;
    top: 20px;

    transform:
        rotate(-8deg);
}


/* Cookies & Cream jar exploding in from right */

.jar-feature-right {
    width: 445px;

    right: -130px;
    top: 15px;

    transform:
        rotate(8deg);
}


/* =========================================================
   SIDE JARS WITH SPLASHES INCLUDED
========================================================= */

@media (min-width: 701px) {
    .jar-showcase {
        overflow: visible;
        clip-path: none;
    }

    .jar-showcase .jar-feature-left,
    .jar-showcase .jar-feature-right {
        max-width: none;
        height: auto;
        top: 20px;
        transform-origin: center top;
        z-index: 2;
    }

    /* Strawberry: larger jar body, leaning inward RIGHT */
    .jar-showcase .jar-feature-left {
        width: 740px;
        left: -90px;
        transform: rotate(12deg);
    }

    /* Oreo: larger jar body, leaning inward LEFT */
    .jar-showcase .jar-feature-right {
        width: 760px;
        right: -90px;
        transform: rotate(-12deg);
    }

    .jar-showcase::before,
    .jar-showcase::after {
        content: none;
    }
}

@media (min-width: 701px) and (max-width: 1100px) {
    .jar-showcase .jar-feature-left {
        width: 520px;
        left: -100px;
        top: 70px;
    }

    .jar-showcase .jar-feature-right {
        width: 535px;
        right: -100px;
        top: 70px;
    }
}
/* Preserve the existing phone decoration for now */
@media (max-width: 700px) {
    .jar-showcase::before {
        content: "";
        position: absolute;
        width: 330px;
        height: 330px;
        left: -90px;
        top: 120px;
        border-radius: 44% 56% 52% 48% / 54% 44% 56% 46%;
        background: radial-gradient(
            circle at 60% 45%,
            rgba(241, 98, 145, 0.24),
            rgba(241, 98, 145, 0.08) 55%,
            transparent 72%
        );
        transform: rotate(-17deg);
    }

    .jar-showcase::after {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        right: -110px;
        top: 100px;
        border-radius: 53% 47% 42% 58% / 46% 55% 45% 54%;
        background: radial-gradient(
            circle at 40% 50%,
            rgba(91, 45, 33, 0.23),
            rgba(91, 45, 33, 0.08) 56%,
            transparent 72%
        );
        transform: rotate(13deg);
    }
}


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

   First row = 5
   Second row = 6
========================================================= */

.jar-product-grid {
    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap:
        85px 55px;

    margin-top: 10px;
}

/* Three jars across */

.jar-product:nth-child(n) {
    grid-column: span 2;
}

/* Center the final two jars */

.jar-product:nth-child(10) {
    grid-column: 2 / span 2;
}

.jar-product:nth-child(11) {
    grid-column: 4 / span 2;
}


/* =========================================================
   JAR PRODUCT IMAGES
========================================================= */

.jar-product-image-wrap {
    height: 580px;
}

.jar-product-image {
    width: auto;
    height: auto;

    max-width: 470px;
    max-height: 580px;
}


/* slightly smaller name size because some jar names are long */

.jar-product h3 {
    max-width: 220px;

    margin-left: auto;
    margin-right: auto;
}


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

@media (min-width: 1500px) {

.jar-product-image-wrap {
    height: 620px;
}

.jar-product-image {
    max-width: 510px;
    max-height: 620px;
}


    .jar-feature-left {
        width: 475px;

        left: -115px;
    }


    .jar-feature-right {
        width: 490px;

        right: -115px;
    }

}


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

@media (max-width: 1100px) {

    .jar-section-inner {
        padding-top: 85px;
    }


    .jar-section-intro {
        max-width: 650px;

        min-height: 380px;
    }


    .jar-section-title {
        font-size:
            clamp(
                3.8rem,
                7vw,
                5.5rem
            );
    }


    .jar-feature-left {
        width: 330px;

        left: -125px;
        top: 70px;
    }


    .jar-feature-right {
        width: 345px;

        right: -130px;
        top: 70px;
    }


    .jar-product-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap:
            55px 28px;
    }


    .jar-product:nth-child(n) {
        grid-column: auto;
    }


    .jar-product-image-wrap {
        height: 310px;
    }


    .jar-product-image {
        max-width: 275px;
        max-height: 310px;
    }

}


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

@media (max-width: 700px) {

    .jar-section-inner {
        padding-top: 55px;
    }


    .jar-section-intro {
        max-width: 100%;

        min-height: auto;

        padding:
            0 4px;
    }


    .jar-section-title {
        font-size:
            clamp(
                3rem,
                15vw,
                4.8rem
            );

        line-height: 0.9;
    }


    .jar-section-description {
        margin-top: 22px;
    }


    /* Large jars become a visual cluster
       underneath the heading on phones */

    .jar-showcase {
        position: relative;

        top: auto;

        width: 100%;
        height: 370px;

        margin-top: 15px;
    }


    .jar-feature-left {
        width: 255px;

        left: -65px;
        top: 25px;

        transform:
            rotate(-8deg);
    }


    .jar-feature-right {
        width: 265px;

        right: -70px;
        top: 40px;

        transform:
            rotate(8deg);
    }


    .jar-showcase::before {
        width: 235px;
        height: 235px;

        left: -65px;
        top: 80px;
    }


    .jar-showcase::after {
        width: 250px;
        height: 250px;

        right: -75px;
        top: 95px;
    }


    .jar-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            45px 16px;

        margin-top: 10px;
    }


    .jar-product:nth-child(n) {
        grid-column: auto;
    }


    .jar-product-image-wrap {
        height: 235px;
    }


    .jar-product-image {
        max-width: 210px;
        max-height: 235px;
    }


    .jar-product h3 {
        max-width: 165px;
    }

}


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

@media (max-width: 420px) {

    .jar-showcase {
        height: 315px;
    }


    .jar-feature-left {
        width: 215px;

        left: -65px;
    }


    .jar-feature-right {
        width: 220px;

        right: -65px;
    }


    .jar-product-image-wrap {
        height: 205px;
    }


    .jar-product-image {
        max-height: 205px;
    }

}
/* =========================================================
   LOADED CHEESECAKE APPLES
========================================================= */

.apple-section {
    position: relative;

    min-height: 1000px;

    border-top:
        1px solid
        rgba(118, 61, 74, 0.08);

    background:

        radial-gradient(
            circle at 2% 10%,
            rgba(255, 183, 199, 0.25) 0%,
            rgba(255, 183, 199, 0.10) 27%,
            transparent 47%
        ),

        linear-gradient(
            180deg,
            #fff8f6 0%,
            #fdebed 48%,
            #fff6f3 100%
        );
}


/* =========================================================
   SOFT BACKGROUND SHAPES
========================================================= */




/* =========================================================
   APPLE SECTION INNER
========================================================= */

.apple-section-inner {
    padding-top: 105px;
}


/* =========================================================
   APPLE SECTION HEADING
========================================================= */

.apple-section-intro {
    position: relative;

    z-index: 5;

    max-width: 850px;
    min-height: 390px;

    margin: 0 auto;

    justify-content: center;

    text-align: center;
}


.apple-section-kicker {
    color: #88483f;
}


.apple-section-title {
    font-size:
        clamp(
            4rem,
            6vw,
            6.8rem
        );

    line-height: 0.89;
}


.apple-section-title span {
    margin-bottom: 8px;

    color: #db4f88;
}


.apple-section-description {
    margin:
        26px auto 0;

    max-width: 550px;
}


/* =========================================================
   HUGE DECORATIVE APPLES
========================================================= */

.apple-showcase {
    position: absolute;

    z-index: 3;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: auto;

    overflow: hidden;

    pointer-events: none;
}


.apple-feature {
    position: absolute;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 28px 30px
            rgba(79, 35, 39, 0.18)
        );
}


/* Smaller Strawberry Crunch apple
   peeking in from the left */

.apple-feature-left {
    width: 310px;

    left: -115px;
    top: 115px;

    z-index: 2;

    transform:
        rotate(-10deg);
}


/* Huge Red Velvet apple
   crashing into the right corner */

.apple-feature-main {
    width: 410px;

    right: -120px;

    top: auto;
    bottom: -35px;

    z-index: 3;

    transform:
        rotate(-17deg);

    transform-origin:
        bottom right;
}

/* =========================================================
   COLOR HAZE BEHIND GIANT APPLES
========================================================= */

.apple-showcase::before {
    content: "";

    position: absolute;

    width: 290px;
    height: 290px;

    left: -70px;
    top: 160px;

    border-radius:
        52% 48% 61% 39% /
        45% 57% 43% 55%;

    background:
        radial-gradient(
            circle,
            rgba(242, 113, 148, 0.19),
            rgba(242, 113, 148, 0.05) 60%,
            transparent 74%
        );

    transform:
        rotate(-12deg);
}


.apple-showcase::after {
    display: none;
}


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

   Row 1 = 4
   Row 2 = 3 centered
========================================================= */
.apple-product-grid {
    position: relative;
    z-index: 6;

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

    gap:
        85px 55px;

    margin-top: 10px;
}

/* Three apples across */

.apple-product:nth-child(n) {
    grid-column: span 2;
}

/* Center the final apple */

.apple-product:nth-child(7) {
    grid-column: 3 / span 2;
}


/* =========================================================
   APPLE PRODUCT IMAGES
========================================================= */

.apple-product-image-wrap {
    height: 580px;
}

.apple-product-image {
    width: auto;
    height: auto;

    max-width: 470px;
    max-height: 580px;
}


.apple-product h3 {
    max-width: 215px;

    margin-left: auto;
    margin-right: auto;
}


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

@media (min-width: 1500px) {

.apple-product-image-wrap {
    height: 620px;
}

.apple-product-image {
    max-width: 510px;
    max-height: 620px;
}


.apple-feature-main {
    width: 450px;

    right: -145px;

    top: auto;
    bottom: 0;

    transform:
        rotate(-17deg);

    transform-origin:
        bottom right;
}


    .apple-feature-left {
        width: 345px;
    }

}


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

@media (max-width: 1100px) {

    .apple-section-inner {
        padding-top: 85px;
    }


    .apple-section-intro {
        max-width: 650px;

        min-height: 380px;
    }


    .apple-section-title {
        font-size:
            clamp(
                3.8rem,
                7vw,
                5.6rem
            );
    }


    .apple-feature-left {
        width: 250px;

        left: -110px;
        top: 130px;
    }


.apple-feature-main {
    width: 315px;

    right: -105px;

    top: auto;
    bottom: 10px;

    transform:
        rotate(-16deg);

    transform-origin:
        bottom right;
}


    .apple-product-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap:
            55px 28px;
    }


    .apple-product:nth-child(n) {
        grid-column: auto;
    }


    .apple-product-image-wrap {
        height: 315px;
    }


    .apple-product-image {
        max-width: 275px;
        max-height: 315px;
    }

}


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

@media (max-width: 700px) {

    .apple-section-inner {
        padding-top: 55px;
    }


    .apple-section-intro {
        min-height: auto;

        max-width: 100%;

        padding:
            0 4px;
    }


    .apple-section-title {
        font-size:
            clamp(
                3rem,
                14.5vw,
                4.7rem
            );

        line-height: 0.9;
    }


    .apple-section-description {
        margin-top: 22px;
    }


    /* Decorative apples move underneath
       the title on mobile */

.apple-showcase {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: auto;

    margin: 0;
}

.apple-feature-left {
    width: 165px;

    left: -60px;
    top: 135px;

    transform:
        rotate(-10deg);
}



.apple-feature-main {
    width: 235px;

    right: -65px;

    top: auto;
    bottom: 45px;

    transform:
        rotate(5deg);
}

    .apple-showcase::before {
        width: 200px;
        height: 200px;

        left: -45px;
        top: 120px;
    }


    .apple-showcase::after {
        width: 300px;
        height: 300px;

        right: -80px;
        top: 60px;
    }


    .apple-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            45px 16px;

        margin-top: 10px;
    }


    .apple-product:nth-child(n) {
        grid-column: auto;
    }


    .apple-product-image-wrap {
        height: 235px;
    }


    .apple-product-image {
        max-width: 210px;
        max-height: 235px;
    }


    .apple-product h3 {
        max-width: 165px;
    }

}


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

@media (max-width: 420px) {

    .apple-showcase {
        height: 325px;
    }


    .apple-feature-left {
        width: 165px;

        left: -55px;
    }


    .apple-feature-main {
        width: 285px;

        right: -85px;
    }


    .apple-product-image-wrap {
        height: 205px;
    }


    .apple-product-image {
        max-height: 205px;
    }

}
/* =========================================================
   SIGNATURE CAKES
========================================================= */

.signature-cake-section {
    position: relative;
    overflow: hidden;

    border-top:
        1px solid
        rgba(84, 42, 34, 0.08);

    background:
        radial-gradient(
            circle at 6% 22%,
            rgba(223, 94, 149, 0.14) 0%,
            rgba(223, 94, 149, 0.05) 25%,
            transparent 46%
        ),

        radial-gradient(
            circle at 94% 75%,
            rgba(86, 43, 34, 0.12) 0%,
            rgba(86, 43, 34, 0.04) 27%,
            transparent 47%
        ),

        linear-gradient(
            180deg,
            #fff8f5 0%,
            #fffdf9 48%,
            #fff5f3 100%
        );
}


.signature-cake-section-inner {
    padding-top: 110px;
}

/* Corner artwork stays hidden on mobile for now. */
.cake-corner-art {
    display: none;
}

@media (min-width: 701px) {
    .cake-corner-art {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }

    .cake-corner {
        position: absolute;
        display: block;
        height: auto;
        max-width: none;
    }

    .cake-corner-chocolate {
        width: 28%;
        max-width: 780px;
        top: 0;
        left: 0;
    }

    .cake-corner-vanilla {
        width: 27%;
        max-width: 750px;
        right: 0;
        bottom: 0;
    }
}


.signature-cake-intro {
    max-width: 950px;
    min-height: auto;

    margin:
        0 auto
        80px;

    text-align: center;
}


.signature-cake-kicker {
    color: #8a4b3e;
}


.signature-cake-title {
    font-size:
        clamp(
            4.2rem,
            6.5vw,
            7.3rem
        );

    line-height: 0.88;
}


.signature-cake-tagline {
    margin:
        28px 0 0;

    color: #df5c96;

    font-size:
        clamp(
            1.7rem,
            2.7vw,
            2.8rem
        );

    font-weight: 800;

    font-style: italic;
}


.signature-cake-description {
    margin:
        20px auto 0;

    max-width: 620px;
}


.signature-cake-size {
    display: inline-block;

    margin:
        24px auto 0;

    padding:
        11px 24px;

    border:
        1px solid
        rgba(84, 42, 34, 0.14);

    border-radius: 999px;

    color: #6d4138;

    background:
        rgba(255, 255, 255, 0.55);

    font-size: 0.83rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}



/* =========================================================
   SIGNATURE CAKE GRID
========================================================= */

.signature-cake-grid {
    position: relative;
    z-index: 4;

    display: grid;

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

    gap:
        90px 55px;

    align-items: end;
}


.signature-cake-product {
    min-width: 0;

    text-align: center;
}


.signature-cake-image-wrap {
    position: relative;

    width: 100%;
    height: 580px;

    display: flex;

    justify-content: center;
    align-items: flex-end;

    overflow: visible;
}


.signature-cake-image-wrap::after {
    content: "";

    position: absolute;

    z-index: -1;

    left: 50%;
    bottom: 12px;

    width: 67%;
    height: 24px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        rgba(77, 39, 31, 0.13);

    filter:
        blur(15px);
}


.signature-cake-image {
    display: block;

    width: 100%;

    max-width: 470px;
    max-height: 580px;

    object-fit: contain;

    transform:
        translateY(0)
        scale(1);

    filter:
        drop-shadow(
            0 20px 22px
            rgba(70, 36, 29, 0.10)
        );

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}


.signature-cake-product:hover
.signature-cake-image {
    transform:
        translateY(-12px)
        scale(1.025);

    filter:
        drop-shadow(
            0 28px 30px
            rgba(70, 36, 29, 0.16)
        );
}


.signature-cake-product h3 {
    margin:
        24px auto 0;

    max-width: 360px;

    color: #4b2924;

    font-size:
        clamp(
            1.15rem,
            1.6vw,
            1.45rem
        );

    font-weight: 850;

    line-height: 1.2;
}


.signature-cake-product h3::after {
    content: "";

    display: block;

    width: 34px;
    height: 3px;

    margin:
        13px auto 0;

    border-radius: 50px;

    background:
        #de5e95;
}



/* =========================================================
   CHOCOLATE TREATS
========================================================= */

.chocolate-treat-section {
    position: relative;

    min-height: 920px;

    overflow: hidden;

    border-top:
        1px solid
        rgba(84, 42, 34, 0.08);

    background:
        radial-gradient(
            circle at 4% 74%,
            rgba(226, 80, 133, 0.17) 0%,
            rgba(226, 80, 133, 0.05) 28%,
            transparent 48%
        ),

        radial-gradient(
            circle at 94% 18%,
            rgba(87, 43, 34, 0.13) 0%,
            rgba(87, 43, 34, 0.04) 26%,
            transparent 46%
        ),

        linear-gradient(
            180deg,
            #fff9f6 0%,
            #fff1f2 52%,
            #fff8f5 100%
        );
}


.chocolate-treat-section-inner {
    position: relative;

    z-index: 2;

    width:
        min(
            1440px,
            calc(100% - 80px)
        );

    min-height: 920px;

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        0.82fr
        1.18fr;

    align-items: center;

    gap: 40px;
}


.chocolate-treat-copy {
    position: relative;

    z-index: 5;

    padding-left: 30px;
}


.chocolate-treat-kicker {
    margin:
        0 0 18px;

    color: #8a4b3e;

    font-size: 0.9rem;

    font-weight: 800;

    letter-spacing: 0.21em;

    text-transform: uppercase;
}


.chocolate-treat-title {
    margin: 0;

    color: #4b2924;

    font-size:
        clamp(
            4.1rem,
            6.6vw,
            7.2rem
        );

    font-weight: 900;

    line-height: 0.84;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.chocolate-treat-title span {
    display: block;

    color: #de5e95;
}


.chocolate-treat-description {
    max-width: 480px;

    margin:
        30px 0 0;

    color: #6d4b43;

    font-size:
        clamp(
            1.1rem,
            1.5vw,
            1.38rem
        );

    font-weight: 600;

    line-height: 1.6;
}



/* =========================================================
   STRAWBERRY FEATURE
========================================================= */

.chocolate-treat-feature {
    position: relative;

    min-height: 720px;

    display: flex;

    justify-content: center;
    align-items: center;
}


.chocolate-treat-feature::before {
    content: "";

    position: absolute;

    width: 640px;
    height: 520px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-8deg);

    border-radius:
        46% 54% 52% 48% /
        57% 44% 56% 43%;

    background:
        radial-gradient(
            circle,
            rgba(225, 82, 135, 0.18),
            rgba(225, 82, 135, 0.05) 58%,
            transparent 74%
        );
}


.chocolate-treat-image {
    position: relative;

    z-index: 3;

    display: block;

    width: 118%;

    max-width: 900px;
    max-height: 720px;

    object-fit: contain;

    transform:
        translateX(45px)
        rotate(-3deg);

    filter:
        drop-shadow(
            0 30px 32px
            rgba(75, 37, 31, 0.17)
        );
}


.chocolate-treat-product-name {
    position: absolute;

    z-index: 5;

    right: 20px;
    bottom: 90px;

    padding:
        22px 30px;

    border-radius: 24px;

    background:
        rgba(255, 247, 244, 0.88);

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 18px 35px
        rgba(74, 38, 30, 0.10);
}


.chocolate-treat-product-name p {
    margin: 0;

    color: #7f453b;

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.chocolate-treat-product-name h3 {
    margin:
        7px 0 0;

    color: #df4f8a;

    font-size:
        clamp(
            2rem,
            3vw,
            3.4rem
        );

    font-weight: 900;

    line-height: 0.95;

    text-transform: uppercase;
}



/* =========================================================
   SEASONAL DROPS
========================================================= */

.seasonal-section {
    position: relative;

    overflow: hidden;

    border-top:
        1px solid
        rgba(84, 42, 34, 0.08);

    background:
        linear-gradient(
            180deg,
            #fff8f5 0%,
            #fcebed 52%,
            #fff8f5 100%
        );
}


.seasonal-section-inner {
    width:
        min(
            1440px,
            calc(100% - 80px)
        );

    margin:
        0 auto;

    padding:
        120px 0 140px;

    text-align: center;
}


.seasonal-kicker {
    margin:
        0 0 18px;

    color: #8a4b3e;

    font-size: 0.9rem;

    font-weight: 800;

    letter-spacing: 0.21em;

    text-transform: uppercase;
}


.seasonal-title {
    margin: 0;

    color: #4b2924;

    font-size:
        clamp(
            4rem,
            6.5vw,
            7rem
        );

    font-weight: 900;

    line-height: 0.87;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.seasonal-title span {
    display: block;

    color: #de5e95;
}


.seasonal-description {
    max-width: 560px;

    margin:
        26px auto 0;

    color: #6d4b43;

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.2rem
        );

    line-height: 1.7;
}



/* Hide seasonal menu until an actual drop is active */

.seasonal-section-hidden {
    display: none;
}



/* =========================================================
   SIGNATURE + TREATS
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

    .signature-cake-image-wrap {
        height: 620px;
    }


    .signature-cake-image {
        max-width: 510px;
        max-height: 620px;
    }


    .chocolate-treat-image {
        max-width: 960px;
        max-height: 760px;
    }

}



/* =========================================================
   SIGNATURE + TREATS
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .signature-cake-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            70px 35px;
    }


    .signature-cake-image-wrap {
        height: 500px;
    }


    .signature-cake-image {
        max-width: 410px;
        max-height: 500px;
    }


    .chocolate-treat-section-inner {
        width:
            min(
                100% - 48px,
                1050px
            );

        grid-template-columns:
            0.9fr
            1.1fr;

        min-height: 760px;
    }


    .chocolate-treat-feature {
        min-height: 620px;
    }


    .chocolate-treat-image {
        width: 125%;

        max-width: 690px;
        max-height: 610px;
    }

}



/* =========================================================
   SIGNATURE + TREATS
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .signature-cake-section-inner {
        padding-top: 70px;
    }


    .signature-cake-intro {
        margin-bottom: 50px;

        text-align: center;
    }


    .signature-cake-title {
        font-size:
            clamp(
                3rem,
                15vw,
                4.8rem
            );
    }


    .signature-cake-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            48px 15px;
    }


    .signature-cake-image-wrap {
        height: 285px;
    }


    .signature-cake-image {
        max-width: 235px;
        max-height: 285px;
    }


    .signature-cake-product h3 {
        margin-top: 13px;

        font-size: 0.95rem;
    }


    .chocolate-treat-section {
        min-height: auto;
    }


    .chocolate-treat-section-inner {
        width:
            calc(100% - 32px);

        min-height: auto;

        display: flex;

        flex-direction: column;

        padding:
            75px 0
            90px;
    }


    .chocolate-treat-copy {
        width: 100%;

        padding: 0;

        text-align: center;
    }


    .chocolate-treat-title {
        font-size:
            clamp(
                3rem,
                15vw,
                4.8rem
            );
    }


    .chocolate-treat-description {
        margin:
            24px auto 0;
    }


    .chocolate-treat-feature {
        width: 100%;

        min-height: 430px;

        margin-top: 25px;
    }


    .chocolate-treat-image {
        width: 118%;

        max-width: 520px;
        max-height: 430px;

        transform:
            translateX(0)
            rotate(-2deg);
    }


    .chocolate-treat-product-name {
        right: 50%;

        bottom: 12px;

        transform:
            translateX(50%);

        width:
            min(
                92%,
                390px
            );

        text-align: center;
    }


    .seasonal-section-inner {
        width:
            calc(100% - 32px);

        padding:
            75px 0
            90px;
    }

}



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

@media (max-width: 420px) {

    .signature-cake-image-wrap {
        height: 245px;
    }


    .signature-cake-image {
        max-height: 245px;
    }


    .chocolate-treat-feature {
        min-height: 365px;
    }


    .chocolate-treat-image {
        max-height: 365px;
    }

}
/* =========================================================
   CHOCOLATE TREAT COLLECTION
========================================================= */

.chocolate-collection {
    position: relative;
    overflow: hidden;

    border-top:
        1px solid
        rgba(84, 42, 34, 0.08);

    background:
        radial-gradient(
            circle at 3% 18%,
            rgba(222, 94, 149, 0.17) 0%,
            rgba(222, 94, 149, 0.05) 25%,
            transparent 46%
        ),

        radial-gradient(
            circle at 97% 78%,
            rgba(87, 43, 34, 0.12) 0%,
            rgba(87, 43, 34, 0.04) 27%,
            transparent 48%
        ),

        linear-gradient(
            180deg,
            #fff8f5 0%,
            #fff0f2 50%,
            #fff8f5 100%
        );
}


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

.chocolate-collection-inner {
    position: relative;
    z-index: 2;
    width: min(1800px, calc(100% - 80px));
    margin: 0 auto;
    padding: 125px 0 155px;
}

/* Decorative splashes — mobile stays hidden for now. */
.treat-splash-art {
    display: none;
}

@media (min-width: 701px) {
    .treat-splash-art {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }

    .treat-splash {
        position: absolute;
        display: block;
        height: auto;
        max-width: none;
    }

    /* Chocolate: upper-left corner */
    .treat-splash-chocolate {
        width: 28%;
        max-width: 800px;
        top: 0;
        left: 0;
    }

    /* Vanilla: right edge, vertically centered */
    .treat-splash-vanilla {
        width: 25%;
        max-width: 700px;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    /* Pink: lower-left corner */
    .treat-splash-pink {
        width: 24%;
        max-width: 680px;
        bottom: 0;
        left: 0;
    }
}


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

.chocolate-collection-intro {
    position: relative;
    z-index: 5;

    max-width: 1000px;

    margin:
        0 auto
        85px;

    text-align: center;
}


.chocolate-collection-kicker {
    margin:
        0 0
        17px;

    color: #8a4b3e;

    font-size: 0.9rem;
    font-weight: 800;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}


.chocolate-collection-title {
    margin: 0;

    color: #4b2924;

    font-size:
        clamp(
            4.2rem,
            6.8vw,
            7.4rem
        );

    font-weight: 900;

    line-height: 0.84;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.chocolate-collection-title span {
    display: block;

    color: #de5e95;
}


.chocolate-collection-description {
    max-width: 650px;

    margin:
        30px auto 0;

    color: #6d4b43;

    font-size:
        clamp(
            1.05rem,
            1.45vw,
            1.32rem
        );

    font-weight: 600;

    line-height: 1.65;
}


.chocolate-collection-flavors {
    max-width: 1050px;

    margin:
        25px auto 0;

    color: #85564c;

    font-size: 0.84rem;

    font-weight: 800;

    line-height: 1.9;

    letter-spacing: 0.085em;

    text-transform: uppercase;
}


.chocolate-collection-flavors span {
    margin:
        0 9px;

    color: #dc6798;
}


/* =========================================================
   FOUR PRODUCTS STRAIGHT ACROSS
========================================================= */

.chocolate-collection-grid {
    position: relative;
    z-index: 4;

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

    gap: 65px 70px;

    align-items: start;
}


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

.chocolate-collection-product {
    position: relative;

    min-width: 0;

    text-align: center;
}


/* Every product gets the EXACT SAME visual space */

.chocolate-collection-image-wrap {
    position: relative;

    width: 100%;
    height: 580px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    overflow: visible;
}


/* Soft grounding haze */

.chocolate-collection-image-wrap::after {
    content: "";

    position: absolute;

    z-index: -1;

    left: 50%;
    bottom: 22px;

    width: 66%;
    height: 26px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        rgba(76, 38, 31, 0.12);

    filter:
        blur(18px);
}


/* =========================================================
   ALL FOUR ASSETS SAME SIZE
========================================================= */

.chocolate-collection-image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 520px;
    max-height: 570px;

    object-fit: contain;

    margin: 0 auto;

    transform: scale(1);

    filter:
        drop-shadow(
            0 24px 26px
            rgba(72, 36, 30, 0.11)
        );

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}


/* IMPORTANT:
   No strawberry-specific sizing.
   No Oreo-specific sizing.
   No pretzel-specific sizing.
   No Rice Krispy-specific sizing.

   All four use the SAME measurements above.
*/


.chocolate-collection-product:hover
.chocolate-collection-image {
    transform:
        translateY(-10px)
        scale(1.035);

    filter:
        drop-shadow(
            0 30px 32px
            rgba(72, 36, 30, 0.17)
        );
}


/* =========================================================
   PRODUCT NAMES
========================================================= */

.chocolate-collection-product-copy {
    position: relative;
    z-index: 4;

    margin-top: 6px;

    text-align: center;
}


.chocolate-collection-product-copy p {
    display: none;
}


.chocolate-collection-product-copy h3 {
    margin: 0;

    color: #4b2924;

    font-size: clamp(1.55rem, 2vw, 2.2rem);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}


.chocolate-collection-product-copy h3::after {
    content: "";

    display: block;

    width: 34px;
    height: 3px;

    margin:
        14px auto 0;

    border-radius: 999px;

    background: #de5e95;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */



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

@media (min-width: 1500px) {

.chocolate-collection-image-wrap {
    height: 620px;
}

.chocolate-collection-image {
    width: 122%;

    max-width: 600px;
    max-height: 620px;
}

}


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

@media (max-width: 1100px) {

    .chocolate-collection-inner {
        width:
            min(
                100% - 48px,
                1050px
            );

        padding:
            90px 0
            115px;
    }


    .chocolate-collection-intro {
        margin-bottom: 65px;
    }


    .chocolate-collection-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            65px 30px;
    }


.chocolate-collection-image-wrap {
    height: 360px;
}


    .chocolate-collection-image {
        max-width: 430px;
        max-height: 450px;
    }

}


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

@media (max-width: 700px) {

    .chocolate-collection-inner {
        width:
            calc(100% - 32px);

        padding:
            70px 0
            90px;
    }


    .chocolate-collection-intro {
        margin-bottom: 50px;
    }


    .chocolate-collection-title {
        font-size:
            clamp(
                3rem,
                15vw,
                4.8rem
            );
    }


    .chocolate-collection-description {
        margin-top: 24px;
    }


    .chocolate-collection-flavors {
        margin-top: 21px;

        font-size: 0.7rem;

        line-height: 1.8;
    }


    .chocolate-collection-flavors span {
        margin:
            0 5px;
    }


    .chocolate-collection-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            50px 16px;
    }


.chocolate-collection-image-wrap {
    height: 240px;
}


.chocolate-collection-image {
    display: block;

    width: 122%;
    height: auto;

    max-width: 560px;
    max-height: 580px;

    object-fit: contain;

    margin: 0 auto;

    transform: scale(1);

    filter:
        drop-shadow(
            0 24px 26px
            rgba(72, 36, 30, 0.11)
        );

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}


.chocolate-collection-product-copy {
    margin-top: 6px;
}


    .chocolate-collection-product-copy p {
        font-size: 0.58rem;

        letter-spacing: 0.11em;
    }


.chocolate-collection-product-copy h3 {
    font-size: clamp(1.05rem, 5.4vw, 1.5rem);
    white-space: normal;
}

}


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

@media (max-width: 420px) {

    .chocolate-collection-image-wrap {
        height: 235px;
    }


    .chocolate-collection-image {
        max-width: 215px;
        max-height: 225px;
    }

}
/* SHOP HEADER — desktop */
@media (min-width: 1101px) {
body.shop-page .site-header {
    height: auto;
    background:  #2b140e;
}

  body.shop-page .header-inner {
    width: 100%;
    max-width: 1560px;
    height: auto;
    min-height: 150px;
    margin-inline: auto;
    padding: 14px 32px 18px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    gap: 14px 24px;
    align-items: center;
  }

  body.shop-page .header-logo-link {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    width: min(480px, 100%);
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  body.shop-page .header-logo {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 70px;
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  body.shop-page .main-navigation {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
  }

  body.shop-page .main-navigation a {
    font-size: 16px;
  }

  body.shop-page .header-actions {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    display: flex;
    gap: 8px;
  }

  body.shop-page .mobile-menu-button {
    display: none;
  }
}

/* Search, account and cart icons */
body.shop-page .header-icon-button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

body.shop-page .header-icon-button svg {
  width: 26px;
  height: 26px;
}

body.shop-page .cart-count {
  top: 0;
  right: 0;
}

/* Center the cupcake title and description */
body.shop-page .cupcake-section .dessert-section-intro {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

body.shop-page .cupcake-section .dessert-section-description {
  margin-inline: auto;
  text-align: center;
}

/* Center Peach Cobbler on desktop */
@media (min-width: 701px) {
  body.shop-page .cupcake-section
  .dessert-product-grid > .dessert-product:last-child {
    grid-column: 2 / 3;
  }
}

/* Keep the two-column arrangement on phones */
@media (max-width: 700px) {
  body.shop-page .cupcake-section
  .dessert-product-grid > .dessert-product:last-child {
    grid-column: auto;
  }
}
/* Give chocolate collections room without overflowing */
body.shop-page .chocolate-collection-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px 70px;
}

body.shop-page .chocolate-collection-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

body.shop-page .chocolate-collection-product-copy h3 {
  white-space: normal;
  line-height: 1.2;
}

/* One collection per row on phones */
@media (max-width: 700px) {
  body.shop-page .chocolate-collection-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  body.shop-page .chocolate-collection-image-wrap {
    height: auto;
    aspect-ratio: 1;
  }
}
/* HERO — Finished Autumn banner */

body.shop-page .tpj-banner {
  position: relative;
  display: block;
  width: auto;
  max-width: none;
  min-height: 0;
  aspect-ratio: 2048 / 590;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: #f5e9e6;
  container-type: inline-size;
}

body.shop-page .tpj-banner-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  pointer-events: none;

}

body.shop-page .tpj-banner-copy {
  position: absolute;
  top: 12%;
  left: 22%;
  z-index: 2;
  width: 35%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #421a12;
}

body.shop-page .tpj-banner-eyebrow {
  margin: 0 0 1.2cqw;
  font-size: clamp(9px, 0.85cqw, 15px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.shop-page .tpj-banner-title {
  margin: 0;
  padding: 0;
  font-family: "Lilita One", sans-serif;
  font-size: clamp(28px, 3.65cqw, 76px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #421a12;
  text-shadow: none;
}

body.shop-page .tpj-banner-title span {
  display: block;
  margin-top: 0.3cqw;
  color: #ed0870;
}

body.shop-page .tpj-banner-description {
  width: 90%;
  max-width: 460px;
  margin: 1.25cqw auto 0;
  font-size: clamp(11px, 1.05cqw, 19px);
  line-height: 1.6;
  color: #542e26;
}

body.shop-page .tpj-banner-handwriting {
  margin: 0.8cqw 0 0;
  font-family: "Caveat", cursive;
  font-size: clamp(22px, 2.3cqw, 44px);
  font-weight: 700;
  line-height: 1.15;
  color: #d71969;
}

/* Matches the existing desktop main zoom */
@media (min-width: 1200px) {
  body.shop-page .tpj-banner {
    zoom: 2;
  }
}

/* Phones: centered text above the complete banner */
@media (max-width: 700px) {
body.shop-page .tpj-banner {
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
}

body.shop-page .tpj-banner-image {
  position: relative;
  margin-bottom: -36.914%;
}

  body.shop-page .tpj-banner-copy {
    position: static;
    order: -1;
    width: 100%;
    padding: 32px 20px 24px;
  }

  body.shop-page .tpj-banner-eyebrow {
    margin-bottom: 14px;
    font-size: 10px;
  }

  body.shop-page .tpj-banner-title {
    font-size: clamp(30px, 7.5vw, 48px);
  }

  body.shop-page .tpj-banner-title span {
    margin-top: 4px;
  }

  body.shop-page .tpj-banner-description {
    width: 100%;
    max-width: 370px;
    margin-top: 16px;
    font-size: 14px;
  }

  body.shop-page .tpj-banner-handwriting {
    margin-top: 12px;
    font-size: 30px;
  }
}
/* Connected hero and cupcake chocolate artwork */

body.shop-page main {
  isolation: isolate;
  background: #fff5f1;
}

body.shop-page .shop-content {
  position: relative;
  z-index: 3;
  background: transparent;
}

body.shop-page .cupcake-section {
  isolation: isolate;
  background: transparent;
  container-type: inline-size;
}

body.shop-page .cupcake-section::before,
body.shop-page .cupcake-section::after {
  content: none;
}

/* Continue the left pour to the bottom of the cupcake section */

body.shop-page .cupcake-showcase {
  isolation: isolate;
  z-index: 1;
}

body.shop-page .cupcake-section > .dessert-section-inner {
  position: relative;
  z-index: 2;
}