/* ============================================
   Homepage v2 — overrides for /pages/home-v2.html
   Loads AFTER styles.css so these rules win at equal
   specificity. Scoped to .page-home-v2 so the live
   /index.html is untouched.
   ============================================ */

/* ─── Stockist locator — homepage embed constraints ──────
   The locator's mobile CSS in stockists.css uncaps .st-results
   so the full list scrolls naturally on /pages/where-to-buy.html.
   On the homepage that's catastrophic — 312 cards stack to ~46,000px
   tall. Force a fixed-height scrollable list inside the embed. */
.page-home-v2 #stockistResults {
    max-height: 320px !important;
    overflow-y: auto !important;
    padding-right: 4px;
}
@media (max-width: 600px) {
    .page-home-v2 #stockistResults {
        max-height: 260px !important;
    }
}
/* The site-wide mobile rule `.page-home main { text-align: center }`
   (styles.css ~L2329) tidily centres collapsed single-column content
   on mobile, but it cascades into the stockist result list too —
   centring addresses, the SHOWROOM pill, etc. The list is its own
   self-contained UI; force start-aligned. */
.page-home-v2 #stockistResults,
.page-home-v2 .st-locator {
    text-align: start;
}

/* ─── Anchor jumps respect the fixed nav ──────────────
   The nav is position:fixed and ~80px tall on desktop, ~64px on
   mobile. Without scroll-margin-top, jumping to #dealers etc. lands
   the section header underneath the nav. */
.page-home-v2 #collections,
.page-home-v2 #comparison,
.page-home-v2 #dealers,
.page-home-v2 #support,
.page-home-v2 #faq,
.page-home-v2 #about,
.page-home-v2 #trade,
.page-home-v2 #inspiration {
    scroll-margin-top: 92px;
}
@media (max-width: 768px) {
    .page-home-v2 #collections,
    .page-home-v2 #comparison,
    .page-home-v2 #dealers,
    .page-home-v2 #support,
    .page-home-v2 #faq,
    .page-home-v2 #about,
    .page-home-v2 #trade,
    .page-home-v2 #inspiration {
        scroll-margin-top: 76px;
    }
}

/* ─── Hero ──────────────────────────────────────────────
   Beef up the hero overlay so the italic "All in One Tap"
   in the headline keeps contrast over the bright lifestyle
   image, and add a more functional secondary line under
   the brand-voice headline so first-time visitors get the
   product in two seconds. */
.page-home-v2 .hero-video-overlay {
    background:
        linear-gradient(180deg,
            rgba(8, 18, 38, 0.55) 0%,
            rgba(8, 18, 38, 0.32) 38%,
            rgba(8, 18, 38, 0.55) 78%,
            rgba(8, 18, 38, 0.72) 100%);
}
.page-home-v2 .hero-functional-line {
    display: block;
    color: rgba(255, 255, 255, 0.95);
    font-family: var(--font-sans);
    font-size: clamp(1.05rem, 2vw, 1.4rem);
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.4;
    /* Bottom gap deliberately larger than the title→subcopy step
       above — gives the CTAs a beat of air rather than arriving
       immediately after the paragraph. */
    margin: 0 auto 36px;
    max-width: 580px;
}

/* Mobile hero polish — the desktop H1 size was clamping to 2.5rem at
   narrow widths, which is too large on a 375px viewport (the headline
   "Convenience, Sustainability & Aesthetics" wrapped awkwardly across
   3-4 lines around the desktop <br>). Drop the size and hide the
   desktop-positioned BR so the title wraps naturally for the viewport. */
@media (max-width: 600px) {
    .page-home-v2 .hero-title {
        font-size: clamp(1.85rem, 8.5vw, 2.4rem);
        line-height: 1.12;
        letter-spacing: -0.015em;
    }
    .page-home-v2 .hero-title br { display: none; }

    /* Zoom the hero photo in ~12% on mobile. The hero uses background-size:
       cover via an inline style on .hero-video-placeholder; we override with
       auto 112% so the image's height becomes 112% of the container instead
       of the 100% that cover defaults to. Scales the whole image up by 12%
       and crops a bit more off the sides. !important is needed to beat the
       inline-style shorthand on the markup. */
    .page-home-v2 .hero-video-placeholder {
        background-size: auto 112% !important;
    }
}

/* ─── Products section (merged with audience cards) ─────
   The new layout puts the audience cards as section
   headers introducing the Signature and Flagship
   collections, with the relevant product cards directly
   underneath each. Removes the duplicate "decision moment"
   the old standalone audience section created. */
.page-home-v2 .collection-block {
    margin-top: clamp(40px, 5vw, 64px);
}
.page-home-v2 .collection-block:first-child {
    margin-top: 0;
}
.page-home-v2 .collection-block-header {
    margin-bottom: 24px;
}
/* Slim lifestyle banner above each collection's header — restores some
   of the visual punch the old standalone audience cards had. Desktop
   only; on mobile we lean on the featured product card instead. */
.page-home-v2 .collection-block-banner {
    display: none;
    height: 220px;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 24px;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 8px 24px rgba(15, 25, 45, 0.10);
}
.page-home-v2 .collection-block-banner--signature {
    background-image:
        linear-gradient(90deg, rgba(8, 18, 38, 0.55) 0%, rgba(8, 18, 38, 0.05) 55%, transparent 100%),
        url('../img/mockup/peppy-mock-7.jpg');
    /* Y slightly above centre (40%) — small nudge so the top of the
       tap arc clears the crop without losing too much counter/sink
       below. */
    background-position: center 40%;
}
.page-home-v2 .collection-block-banner--flagship {
    background-image:
        linear-gradient(270deg, rgba(8, 18, 38, 0.55) 0%, rgba(8, 18, 38, 0.05) 55%, transparent 100%),
        url('../img/mockup/peppy-mock-3.png');
    background-position: center;
}
.page-home-v2 .collection-block-banner-title {
    color: #fff;
    font-family: var(--font-display);
    /* Bumped May 2026 — was clamp(1.6rem, 2.6vw, 2.2rem). Larger banner
       title gives the collection name more presence on desktop, matching
       the visual weight of the lifestyle imagery behind it. Then trimmed
       ~5% to clamp(1.9rem, 3.4vw, 2.85rem) so it sits a touch quieter. */
    font-size: clamp(1.9rem, 3.4vw, 2.85rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
    padding: clamp(20px, 3vw, 40px);
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    max-width: 50%;
}
.page-home-v2 .collection-block-banner--flagship .collection-block-banner-title {
    margin-left: auto;
    text-align: right;
    justify-content: flex-end;
}
@media (min-width: 901px) {
    .page-home-v2 .collection-block-banner {
        display: block;
    }
    /* On desktop the BIG banner already displays the collection name,
       so we down-tune the in-header title to act as an elegant subtitle
       (the genuinely useful "Streamlined 4-in-1 designs" / "Touch-control
       taps with integrated digital panels" copy). Smaller, lighter weight,
       so it complements the banner instead of duplicating its scale. */
    .page-home-v2 .collection-block-header .collection-block-title {
        font-size: clamp(1.25rem, 1.8vw, 1.55rem);
        font-weight: 400;
        color: var(--color-text);
        margin: 0 0 10px;
    }
}
.page-home-v2 .collection-block-eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 10px;
}
.page-home-v2 .collection-block-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 10px;
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.page-home-v2 .collection-block-text {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
    max-width: 560px;
}

/* ─── Featured + grid hybrid for mobile ─────────────────
   On mobile every card stays at the same size in a uniform
   2-up grid. We previously promoted the FIRST card of each
   collection to a full-width "featured" row, but that made
   the rest of the cards look secondary — owner asked for
   equal visual weight across the whole grid. Desktop layout
   is unchanged. */
@media (max-width: 600px) {
    .page-home-v2 .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .page-home-v2 .products-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
    /* When a collection has an odd number of products (e.g. Signature
       with 3 items), the last card lands alone on its own row in a
       2-column grid and would naturally hug the left edge. Span it
       across both columns and centre it at one-column width so the
       leftover card sits visually balanced under the row above.
       The :nth-child(odd):last-child selector only matches when the
       LAST card is in an odd position — i.e. only when there's an
       orphan to deal with. Even-count collections (e.g. Flagship
       with 2) silently skip this rule. */
    .page-home-v2 .products-grid .product-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 12px) / 2);
    }
}

/* ─── Comparison ────────────────────────────────────────
   We previously rendered the comparison as stacked chip
   cards on mobile (.comparison-cards / .comparison-card*)
   and the original side-by-side .comparison-wrapper > table
   on desktop. After live testing both treatments the cards
   were rolled back in favour of the table on every viewport.
   The wrapper has overflow-x:auto in styles.css so the
   table scrolls horizontally on narrow viewports. All the
   .comparison-card* CSS (chip cards, thumbs, head-text,
   bestfor tagline, full-width CTA) is gone — markup was
   removed too. If you ever bring stacked cards back, lift
   the rules from git history (commit 8cc1054 onward). */

/* ─── Sticky mobile bottom CTA bar ──────────────────────
   Two-button bar that appears at the bottom of the
   viewport on mobile after first scroll. Gives "Find a
   stockist" a permanent home without competing for hero
   real estate, and gives a fast "Compare" shortcut for
   the choosing-a-tap moment. Hidden on desktop where the
   nav is always in reach. */
.page-home-v2 .mobile-sticky-cta {
    display: none;
}
@media (max-width: 768px) {
    /* Floating pill — feels lighter and more premium than a full-width
       dark dock. Cream background, soft shadow, side margins, safe-area
       aware bottom padding. Hides itself when inside the stockist
       locator (set in home.js) so it doesn't conflict with the map. */
    .page-home-v2 .mobile-sticky-cta {
        display: flex;
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 600;  /* Above Leaflet map (default ~400) */
        align-items: center;
        gap: 4px;
        padding: 6px;
        background: var(--color-cream-light, #faf7f0);
        border-radius: 999px;
        box-shadow: 0 12px 32px rgba(8, 18, 38, 0.18),
                    0 2px 8px rgba(8, 18, 38, 0.10);
        opacity: 0;
        transform: translateY(calc(100% + 24px));
        transition: opacity 0.2s, transform 0.3s var(--ease-out);
        pointer-events: none;
        /* Promote to its own GPU layer so the slide-up transform
           composites cleanly without re-painting the surrounding
           page content on each scroll-trigger evaluation. */
        will-change: transform, opacity;
    }
    .page-home-v2 .mobile-sticky-cta.is-shown {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .page-home-v2 .mobile-sticky-cta-btn {
        text-decoration: none;
        font-family: var(--font-sans);
        font-size: 0.86rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        transition: background 0.15s, color 0.15s;
    }
    .page-home-v2 .mobile-sticky-cta-btn--primary {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 18px;
        border-radius: 999px;
        background: var(--color-dark, #1d3a5f);
        color: #fff;
    }
    .page-home-v2 .mobile-sticky-cta-btn--primary:hover,
    .page-home-v2 .mobile-sticky-cta-btn--primary:active {
        background: var(--color-dark-hover, #14283f);
    }
    .page-home-v2 .mobile-sticky-cta-btn--primary svg {
        flex-shrink: 0;
    }
    .page-home-v2 .mobile-sticky-cta-btn--secondary {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 12px 18px;
        background: transparent;
        color: var(--color-dark, #1d3a5f);
        font-weight: 500;
    }
    .page-home-v2 .mobile-sticky-cta-btn--secondary svg {
        flex-shrink: 0;
        opacity: 0.7;
    }
    .page-home-v2 .mobile-sticky-cta-btn--secondary:hover,
    .page-home-v2 .mobile-sticky-cta-btn--secondary:active {
        color: var(--color-dark-hover, #14283f);
    }
    /* Body-level bottom padding so the sticky tray has clearance
       against ALL content when scrolled to a natural breakpoint —
       not just the footer. Previously this lived on .footer only,
       which let mid-page sections (e.g. last product card) sit
       partly under the tray. */
    body.page-home-v2 {
        padding-bottom: 80px;
    }
    /* Programmatic anchor scrolls (Tab, deep-links, "Compare" button)
       also account for the tray. */
    html {
        scroll-padding-bottom: 80px;
    }
}

/* ─── Cookie banner: compact on mobile ─────────────────
   The default banner takes ~30% of the first mobile
   viewport. Compact variant keeps the same legal copy
   but in a slim bottom strip with smaller text and a
   tighter button. Cookie-banner.js adds .cookie-banner
   class — we just override its mobile layout. */
@media (max-width: 768px) {
    .page-home-v2 .cookie-banner,
    .page-home-v2 #cookieBanner {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
        gap: 8px !important;
    }
    .page-home-v2 .cookie-banner .cookie-banner-text,
    .page-home-v2 #cookieBanner .cookie-banner-text {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
    }
    .page-home-v2 .cookie-banner .btn,
    .page-home-v2 #cookieBanner .btn,
    .page-home-v2 .cookie-banner button,
    .page-home-v2 #cookieBanner button {
        padding: 7px 14px !important;
        font-size: 0.78rem !important;
    }
}