/* ============================================================
   Mobile + tablet responsive sweep — loaded LAST so it wins
   the cascade. Targets two ranges:
     ≤480px    (phone)
     481-1024px (tablet portrait + iPad landscape + small laptops)
   ============================================================ */

/* ----- HARD STACK: collapse the PDP gallery + buy box into a single
   column on anything narrower than 1024px (covers iPad portrait at 768,
   iPad landscape at 1024). The default product-page.css breakpoint of
   880px misses iPad landscape and leaves the buy box squished in a
   narrow side column. Forcing 1fr with !important guarantees it wins
   over any author CSS that tries to set 2-col below 1024px. */
@media (max-width: 1024px) {
    /* Force the PDP shell into a flex column so the buy box ALWAYS lays
       out beneath the gallery at full width. The grid version was leaving
       the second column narrow on some tablets — flex column with full-
       width children eliminates that entirely. */
    .pdp-shell {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: clamp(1.5rem, 4vw, 2.5rem) !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .pdp-gallery,
    .pdp-main-image,
    .pdp-info {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;
    }
    /* Center the gallery image (which has its own natural aspect ratio)
       but let the buy box use the full viewport-width column. */
    .pdp-main-image { margin: 0 auto !important; }
    /* Disable the container-query font sizing — it was scaling the H1
       against a narrow ancestor on some devices and shrinking the title
       down to nothing. Switch to viewport-relative sizing instead. */
    .pdp-info { container-type: normal !important; position: static !important; }
    .pdp-name {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
        font-size: clamp(1.85rem, 7vw, 2.75rem) !important;
        line-height: 1.05 !important;
    }
    .pdp-eyebrow,
    .pdp-tagline,
    .pdp-short-desc,
    .pdp-lede,
    .pdp-price-block,
    .pdp-price-meta {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }
}

/* ---------- Global safety net: prevent horizontal scroll on every page.
   Some sections use 100vw which can overflow when the viewport has a
   scrollbar; this contains them.
   Use `overflow-x: clip` instead of `hidden` — `hidden` creates a new
   scrolling context which breaks `position: sticky` descendants (the
   catalog filter sidebar stops scrolling along with the page). `clip`
   visually clips overflow but does NOT create a scroll context, so
   sticky still works. Fallback to hidden for older browsers. */
html, body {
    max-width: 100%;
    overflow-x: hidden;     /* fallback for browsers without `clip` */
    overflow-x: clip;       /* preserves position:sticky descendants */
    /* Site is intentionally dark-themed already, so tell the browser not
       to auto-darken / invert it on devices in dark mode (this is what
       was painting the gold marquee black on some Android phones). */
    color-scheme: dark;
}
img, video, svg { max-width: 100%; height: auto; }

/* ============================================================
   PHONE  ≤480px
   ============================================================ */
@media (max-width: 480px) {

    /* ----- Page padding: every "wrap" container gets consistent gutters. */
    .pdp-wrap,
    .cart-inner,
    .section-inner,
    .container,
    .ft-top,
    .ft-bottom { padding-left: 16px !important; padding-right: 16px !important; }

    /* ----- PDP: make sure the buy box has breathing room and the title
       scales down properly (the cqi-based font-size collapses too small in
       narrow containers if the parent doesn't have container-type set). */
    .pdp-shell { gap: 1.25rem !important; }
    .pdp-name {
        white-space: normal !important;
        font-size: clamp(1.85rem, 8.5vw, 2.4rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.02em !important;
    }
    .pdp-tagline { font-size: 1rem !important; line-height: 1.4 !important; }
    .pdp-eyebrow { font-size: 0.7rem !important; margin-bottom: 0.6rem !important; }
    .pdp-price-current { font-size: 1.7rem !important; }
    .pdp-price-block {
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0.85rem !important;
    }
    .pdp-short-desc { font-size: 0.95rem !important; line-height: 1.55 !important; }
    .pdp-lede { padding: 0.7rem 0.85rem !important; font-size: 0.92rem !important; }

    /* PDP bundle picker on mobile: stack the cards vertically (one per row)
       so each has full width to breathe. Strip to essentials — hide the
       ribbon, the "Tap to choose sizes" hint, the truck icon, and the
       strikethrough retail price. Keep pack name, per-unit price,
       "X for $Y", and the save amount. */
    .pdp-bundle-grid {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }
    .pdp-bundle-btn {
        padding: 1rem 1.1rem !important;
        font-size: 0.9rem !important;
        gap: 6px !important;
    }
    .pdp-bundle-ribbon,
    .pdp-bundle-hint,
    .pdp-bundle-strike,
    .pdp-bundle-save i { display: none !important; }
    .pdp-bundle-pack {
        font-size: 0.7rem !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        opacity: 0.7;
    }
    .pdp-bundle-perunit strong { font-size: 1.65rem !important; line-height: 1; }
    .pdp-bundle-perunit .pdp-bundle-currency { font-size: 0.85rem; vertical-align: top; }
    .pdp-bundle-each { font-size: 0.7rem !important; opacity: 0.65; margin-left: 2px; }
    .pdp-bundle-totals { font-size: 0.78rem !important; opacity: 0.78; }
    .pdp-bundle-save {
        font-size: 0.72rem !important;
        font-weight: 700;
        color: #6dd86d !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
    }

    /* Cart-layout: stack lines + summary; tighten margins. */
    .cart-layout {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .cart-summary {
        position: static !important;
        padding: 18px !important;
    }
    .summary-title { font-size: 1.15rem !important; }
    .cart-title { font-size: 1.75rem !important; }
    .cart-head { flex-wrap: wrap; gap: 0.5rem; }
    .keep-shopping { margin-left: 0 !important; }

    /* Cart line: stack thumb + body + subtotal vertically so the content
       reads naturally instead of getting cramped 3-up. */
    .cart-line {
        grid-template-columns: 84px 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
    }
    .cart-line-thumb { width: 84px !important; height: 84px !important; }
    .cart-line-subtotal {
        grid-column: 1 / -1 !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        padding-top: 8px !important;
        border-top: 1px dashed rgba(244, 238, 220, 0.1);
        margin-top: 4px;
    }
    .cart-line-name { font-size: 1rem !important; }
    .cart-line-meta { gap: 6px !important; }

    /* Cart upsell aside: stack on one column on mobile. */
    .cart-upsell {
        grid-template-columns: 1fr !important;
        text-align: center;
        padding: 14px !important;
    }
    .cart-upsell-art { margin: 0 auto; }
    .cart-upsell-cta { width: 100%; justify-content: center; }
    .cart-upsell-headline { font-size: 1.1rem !important; }
    .cart-upsell-sub { font-size: 0.85rem !important; }

    /* Order-summary nudge: keep on one row but tighter */
    .sum-nudge {
        grid-template-columns: auto 1fr auto !important;
        padding: 10px 12px !important;
        gap: 10px !important;
    }
    .sum-nudge-headline { font-size: 0.82rem !important; white-space: normal !important; }
    .sum-nudge-sub { font-size: 0.7rem !important; }

    /* Homepage hero: tighten and stack cleanly. */
    .hero { padding: 1.75rem 16px !important; }
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        text-align: center;
    }
    .hero-h1 {
        font-size: clamp(2.1rem, 9vw, 2.9rem) !important;
        line-height: 1 !important;
    }
    .hero-h1 em { font-size: 1.25em !important; line-height: 0.95 !important; }
    .hero-deck { font-size: 0.95rem !important; line-height: 1.5 !important; }
    .hero-actions { justify-content: center; flex-direction: column; gap: 0.6rem !important; }
    .hero-btn-primary, .hero-btn-ghost { width: 100%; justify-content: center; padding: 0.85rem 1.25rem !important; }
    .hero-proof { justify-content: center; font-size: 0.8rem !important; }
    .hero-art-frame { aspect-ratio: 1 / 1 !important; }
    .hero-cats {
        gap: 0.35rem 0.85rem !important;
        font-size: 0.8rem !important;
        padding-top: 1rem !important;
        margin-top: 1.5rem !important;
    }

    /* Homepage stat-strip: 2 columns, smaller text. */
    .stat-strip-inner {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem 0.5rem !important;
    }
    .stat-strip-inner strong { font-size: 1.15rem !important; }
    .stat-strip-inner span { font-size: 0.72rem !important; }

    /* Bundle cards: full width stack. */
    .bundle-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .bundle-card { padding: 1.25rem !important; }
    .bundle-card h3 { font-size: 1.4rem !important; }
    .bundle-price strong { font-size: 1.75rem !important; }

    /* Catalog grid: 2-col on phone (not 3-4) for readable card sizes. */
    .design-grid,
    .featured-grid .design-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
    }
    .design-grid .card-price,
    .design-grid .card-name { font-size: 0.85rem !important; }

    /* Catalog top bar: stack search + tabs. */
    .catalog-bar { flex-direction: column !important; gap: 0.75rem !important; }
    .cat-tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .filter-controls { width: 100%; }
    .search-input { width: 100%; }
    .search-input input { width: 100%; }

    /* Reviews grid → single column on phone. */
    .reviews-grid,
    .three-up { grid-template-columns: 1fr !important; }

    /* FAQ: tighten accordion items. */
    .faq-item { padding: 1rem !important; }
    .faq-item h3 { font-size: 1rem !important; }
    .faq-item p { font-size: 0.92rem !important; line-height: 1.55 !important; }

    /* Footer: stack columns. */
    .ft-top {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 2rem 16px !important;
    }
    .ft-brand { text-align: left; }
    .ft-col h5 { margin-bottom: 0.5rem !important; }

    /* Nav: ensure brand + cart icon stay on one row. */
    .mm-nav { padding: 0.65rem 16px !important; }
    .mm-nav-inner { gap: 0.5rem !important; }
    .mm-nav-links { display: none !important; }  /* hide desktop links on phone */
    .mm-bag { padding: 6px 10px !important; }

    /* Marquee: smaller text, force the gold background so Android Chrome's
       "auto dark" / Lite mode and stale caches can't paint it dark. */
    .marquee,
    .top-marquee {
        background: #E9C46A !important;
        color: #05010F !important;
        color-scheme: light;
        border-bottom: 2px solid #05010F !important;
    }
    .marquee-track,
    .top-marquee-track {
        color: #05010F !important;
        font-size: 0.65rem !important;
        gap: 1.5rem !important;
    }
    .marquee-track span,
    .top-marquee-track span { color: #05010F !important; }

    /* Section heads: scale h2 properly */
    .section-head h2,
    h2.section-h2,
    .section-h2 { font-size: clamp(1.6rem, 6vw, 2rem) !important; line-height: 1.1 !important; }
}

/* ============================================================
   TABLET PORTRAIT  481-880px
   ============================================================ */
@media (min-width: 481px) and (max-width: 880px) {

    /* PDP: container is now full-width 1-column, so let the buy box breathe. */
    .pdp-wrap { padding-left: 24px; padding-right: 24px; }
    .pdp-shell { gap: 2rem !important; }
    .pdp-name { font-size: clamp(2rem, 5.5vw, 2.8rem) !important; }
    .pdp-tagline { font-size: 1.1rem !important; }
    .pdp-main-image { max-width: 560px; margin: 0 auto; width: 100%; }
    .pdp-bundle-grid { grid-template-columns: 1fr 1fr !important; }
    .pdp-info { max-width: 720px; margin: 0 auto; }

    /* Cart: stack lines + summary; summary as a full-width block. */
    .cart-layout { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    .cart-summary { position: static !important; }
    .cart-line { padding: 16px !important; }

    /* Homepage hero: still 2-col but tighter. */
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        text-align: center;
    }
    .hero-text { align-items: center; }
    .hero-actions { justify-content: center; }
    .hero-h1 { font-size: clamp(2.8rem, 7vw, 4rem) !important; }
    .hero-art-frame { max-width: 480px; margin: 0 auto; }
    .hero-deck { max-width: 560px; margin-left: auto; margin-right: auto; }
    .hero-cats { justify-content: center; }

    /* Stat strip: 4 → 2 columns on tablet portrait */
    .stat-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 1.5rem !important; }

    /* Bundle cards stay side-by-side on tablet (phone-only stack is handled
       in the ≤480px block above). Slightly tighter padding for the narrower
       viewport. */
    .bundle-grid { gap: 1rem !important; }
    .bundle-card { padding: 1.25rem !important; }

    /* Catalog grid: 3 cols at tablet portrait */
    .design-grid,
    .featured-grid .design-grid { grid-template-columns: repeat(3, 1fr) !important; }

    /* Reviews: 2 columns */
    .reviews-grid,
    .three-up { grid-template-columns: repeat(2, 1fr); }

    /* Footer: 2-col stack */
    .ft-top { grid-template-columns: 1fr 1fr !important; gap: 2rem; }
}

/* ============================================================
   SIZE PICKERS → native dropdown on mobile
   ============================================================ */
@media (max-width: 640px) {
    /* Hide the 9-pill size grid and surface the hidden <select>. The
       select carries .visually-hidden by default; reset all those props
       so it renders as a real native dropdown — then strip the OS skin
       and paint our own (gold chevron, cream type, dark glass surface)
       so it matches the rest of the PDP buy box. */
    .pdp-size-grid { display: none !important; }
    #pdp-size.visually-hidden,
    select#pdp-size {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        padding: 13px 44px 13px 16px !important;
        margin: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: normal !important;
        border: 1px solid rgba(244, 238, 220, 0.22) !important;
        background: linear-gradient(180deg, rgba(244, 238, 220, 0.05), rgba(244, 238, 220, 0.02)),
                    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path d='M1 1l6 6 6-6' fill='none' stroke='%23E9C46A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat !important;
        background-position: right 16px center !important;
        background-size: auto, 14px 8px !important;
        background-color: transparent !important;
        color: #F4EEDC !important;
        font-family: 'DM Sans', sans-serif !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        border-radius: 10px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        cursor: pointer !important;
        transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
    }
    select#pdp-size:focus,
    select#pdp-size:hover {
        border-color: #E9C46A !important;
        outline: 0 !important;
        box-shadow: 0 0 0 3px rgba(233, 196, 106, 0.18) !important;
    }
    select#pdp-size option { background: #0a0a1a; color: #F4EEDC; font-weight: 600; }
    /* The "Size · M" sub-label above the pills becomes redundant once the
       select shows the value directly. Hide it. */
    .pdp-variant-head { margin-bottom: 0.5rem !important; }
    .pdp-variant-value { display: none !important; }

    /* Bundle slot pills → matching dropdowns. The select is generated
       alongside the pill row in product-page.js. */
    .pdp-bundle-slot-pills { display: none !important; }
    .pdp-bundle-slot-select {
        display: block !important;
        width: 100% !important;
        padding: 11px 40px 11px 14px;
        background: linear-gradient(180deg, rgba(244, 238, 220, 0.06), rgba(244, 238, 220, 0.02)),
                    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 14 8'><path d='M1 1l6 6 6-6' fill='none' stroke='%23E9C46A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat;
        background-position: right 14px center;
        background-size: auto, 12px 7px;
        background-color: transparent;
        color: #F4EEDC;
        border: 1px solid rgba(244, 238, 220, 0.2);
        border-radius: 8px;
        font-family: 'DM Sans', sans-serif;
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .pdp-bundle-slot-select:focus,
    .pdp-bundle-slot-select:hover {
        border-color: #E9C46A;
        outline: 0;
        box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.18);
    }
    .pdp-bundle-slot-select option { background: #0a0a1a; color: #F4EEDC; font-weight: 600; }
    .pdp-bundle-slot { display: flex; flex-direction: column; gap: 6px; }
}
/* Bundle slot selects now render at every viewport - see
   product-page.css for the desktop styling. Mobile media query above
   still applies its own dimensions on top. */

/* ============================================================
   TOUCH-FRIENDLY TARGETS — apply at all sizes ≤880px
   ============================================================ */
@media (max-width: 880px) {
    /* Make every button/CTA at least 44px tall (Apple HIG / WCAG target). */
    .btn-primary,
    .btn-secondary,
    .btn-lg,
    .qty-btn,
    .qty-inc,
    .qty-dec,
    .pdp-size-pill,
    .pdp-bundle-pill,
    .pdp-add-cta,
    .checkout-cta,
    .pd-fold-cta,
    .pd-submit,
    .cart-upsell-cta {
        min-height: 44px;
    }
    /* Tap-comfort: spacing between interactive elements */
    .pdp-bundle-pill-row,
    .pdp-size-grid { gap: 0.5rem !important; }
}