@media (max-width: 1200px) {
    .main-product-3d { width: 100vw; height: 60vh; top: 40%; }
}

@media (max-width: 1200px) {
    .hero-content { grid-template-columns: 1fr; padding-top: 8rem; }
    .hero-center { order: -1; }
    .main-title, .side-title { font-size: 5rem; }
    .hero-right { align-items: center; text-align: center; }
    .side-title { align-self: center; text-align: center; }
}

/* ============================================================================
   MOBILE HOME — dedicated single-column layout for <= 768px.
   Desktop and the >768px tablet rules above are untouched; every selector here
   is scoped to this media query only. The composition reuses the exact same
   DOM/JS (3D models, flavor switch, parallax, repulsion, bubbles) — only
   position/size/order/visibility change.
   ============================================================================ */
@media (max-width: 768px) {
    /* The desktop experience is a fixed 100vh stage; mobile is allowed to grow
       taller than one screen and scroll, per spec. */
    html, body {
        height: auto;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        /* Let the browser handle vertical scrolling natively (compositor
           thread, no waiting on JS) while still leaving horizontal gestures
           free for js/interactions/pointer-tilt.js to claim for the can. */
        touch-action: pan-y;
    }

    /* ---------- Header: logo + contact only, nav hidden ---------- */
    .header {
        padding: 1.1rem 5%;
        padding-top: calc(1.1rem + env(safe-area-inset-top, 0px));
    }

    .nav { display: none; }

    .logo span { font-size: 1.05rem; }

    .contact-btn {
        padding: 0.7rem 1.25rem;
        font-size: 0.75rem;
    }

    /* ---------- Hero shell: no longer a fixed viewport stage ---------- */
    .hero {
        height: auto;
        min-height: 100dvh;
        padding: 0 6%;
        padding-top: calc(5.25rem + env(safe-area-inset-top, 0px));
        padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
        align-items: flex-start;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        min-height: 0;
        gap: 1.5rem;
    }

    /* Flatten the desktop two-column wrappers: their children become direct
       flex items of .hero-content so they can be reordered independently
       (title / can / cards / description / CTA / badge) without moving any
       DOM nodes or touching the JS selectors that reference them. */
    .hero-left,
    .hero-right {
        display: contents;
    }

    /* ---------- Composition order ---------- */
    .main-title { order: 1; }
    .hero-center { order: 2; }
    .product-carousel { order: 3; }
    .side-title { order: 4; }
    .description { order: 5; }
    .cta-group { order: 6; }
    .award-badge { order: 7; }

    /* ---------- 2. Title ---------- */
    .main-title {
        width: 100%;
        font-size: clamp(3rem, 15vw, 4.25rem);
        line-height: 0.88;
        white-space: normal;
        text-align: center;
    }

    /* ---------- 3. Can: becomes an in-flow slot instead of a fixed overlay ---------- */
    .hero-center {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: clamp(280px, 78vw, 340px);
        z-index: 1;
    }

    .main-product-3d {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%) rotate(25deg);
        /* The page-wide touch-action: pan-y (above) is inherited here too,
           which lets the browser's compositor nativize a purely vertical
           touch-start as a scroll before our JS ever sees a pointermove —
           silently defeating the can's drag for straight-up/down gestures.
           Scoping touch-action: none to just the can hands gesture ownership
           back to pointer-tilt.js, which still lets horizontal page-scroll
           attempts elsewhere work exactly as before (unaffected). */
        touch-action: none;
    }

    /* ---------- 5. Flavor cards: primary thumb-reach zone right under the can ---------- */
    .product-carousel {
        order: 3;
        width: 100%;
        align-items: center;
        gap: 0.9rem;
    }

    .carousel-cards {
        justify-content: center;
        width: 100%;
        gap: 0.9rem;
    }

    .card {
        width: 136px;
        padding: 0.9rem;
        padding-top: 4.25rem;
        min-height: 44px;
    }

    .card img {
        width: 100px;
        margin-top: -5.25rem;
    }

    .card-info { font-size: 0.75rem; }

    .carousel-nav { display: none; }

    /* ---------- 8. Secondary title: small supporting line under the cards ---------- */
    .side-title {
        order: 4;
        align-self: center;
        width: 100%;
        text-align: center;
        font-size: clamp(1.6rem, 7.5vw, 2.25rem);
        line-height: 0.95;
        white-space: normal;
        opacity: 0.85;
    }

    /* ---------- 6. Description ---------- */
    .description {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
        text-align: center;
        font-size: 1rem;
        line-height: 1.6;
    }

    /* ---------- 7. CTA ---------- */
    .cta-group {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .primary-btn { min-height: 44px; }
    .plus-icon { width: 44px; height: 44px; }

    /* ---------- 9. Badge: pushed to the end, discreet ---------- */
    .award-badge {
        width: 100%;
        justify-content: center;
        margin-top: 0;
    }

    /* ---------- 4. Fruits & leaves: same system, decluttered + repositioned
       around the can slot so nothing sits over the cards/description/CTA. ---------- */
    .berries-container,
    .berries-container-bg,
    .leaves-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .b2, .b4, .b7, .b8, .b9,
    .l2, .l3 {
        display: none;
    }

    .b1 { top: 6%; left: 2%; width: 92px; height: 92px; }
    .b3 { top: 8%; left: 70%; width: 100px; height: 100px; }
    .b5 { top: 44%; left: 0%; width: 66px; height: 66px; opacity: 0.85; }
    .b6 { top: 38%; left: 76%; width: 76px; height: 76px; opacity: 0.85; }

    .l1 { top: 3%; left: 62%; width: 38px; height: 38px; }
    .l4 { top: 56%; left: 4%; width: 46px; height: 46px; opacity: 0.25; }
}