/* ============================================================================
   Wellrest PH — cinematic skin, V5.
   The visual system is wellrest-cinematic-v2.html; the markup underneath is the
   live storefront, so every rule here targets a class the PHP already emits.

   Scoped to body.cine throughout: /admin shares style.css but never carries the
   class, so nothing in this file can reach it.

   Most motion is CSS-only (animation-timeline: view()). The mattress cutaway is
   the single exception: a section-local requestAnimationFrame loop runs only
   while that scene intersects the viewport. The GSAP/ScrollTrigger/Lenis stack
   the V2 prototype used remains absent — it is what made the live site
   unscrollable, and the brief's own §19/§21 rule it out.
   ============================================================================ */

body.cine {
    --ink: #0A1626;
    --ink-2: #122236;
    --ink-3: #060F1B;
    --bone: #F4F0E9;
    --bone-2: #E9E2D7;
    --sand: #C9BCA8;
    --brass: #C4A159;
    /* Brass is an accent, unreadable as text on light: 2.15:1. This is the same
       hue at 4.62:1 on bone, for labels and small print that must be legible. */
    --brass-ink: #84682E;
    /* 3.66:1 on bone — for display-size accents where 4.62 reads muddy. */
    --brass-dp: #96783A;
    --brass-lt: #E3CB94;
    --ember: #B4703A;
    --text: #16202C;
    /* 4.82:1 on bone-2, 5.46:1 on bone. Was #6C7784 = 4.01:1, under AA, and
       it carries most of the secondary copy on the site. */
    --muted: #58626E;
    --line: rgba(22, 32, 44, .14);
    --serif: 'Instrument Serif', Georgia, serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --pad: clamp(20px, 5vw, 72px);

    background: var(--bone);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.cine img { display: block; max-width: 100%; }
body.cine a { color: inherit; text-decoration: none; }
body.cine :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }
body.cine [hidden] { display: none !important; }
body.cine .hidden { display: none !important; }

/* ── type ────────────────────────────────────────────────────────────────── */
body.cine h1, body.cine h2, body.cine h3, body.cine h4,
body.cine .cine-d {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.015em;
    color: var(--text);
}
body.cine h1, body.cine h2, body.cine .cine-d { line-height: .95; }
body.cine h3, body.cine h4 { line-height: 1.15; }

body.cine .cine-eyebrow,
body.cine .eyebrow,
body.cine .kicker {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    margin: 0;
}

body.cine .cine-ln { display: block; overflow: hidden; padding-bottom: .06em; }
body.cine .cine-ln > i { display: block; font-style: normal; }
body.cine .cine-ln > i.tint { color: var(--brass-lt); }
body.cine .cine-ln em { font-style: italic; color: var(--brass); }

body.cine .container { width: min(1320px, 100%); margin-inline: auto; padding-inline: var(--pad); }
body.cine .section { padding: clamp(80px, 13vh, 140px) 0; }
body.cine .section-alt { background: var(--bone); }
body.cine .section-head { margin-bottom: var(--wr-home-head-gap, 34px); margin-top: var(--wr-home-heading-top, -20px); display: grid; gap: 6px; }
body.cine .section-head.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
body.cine .section-head h2 { margin: 6px 0 0; font-size: clamp(32px, 5vw, 60px); }

/* ── buttons ─────────────────────────────────────────────────────────────── */
body.cine .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 50px; padding: 0 28px; border: 0; border-radius: 4px;
    font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: .02em;
    background: var(--brass); color: var(--ink); cursor: pointer;
    transition: transform .35s var(--ease), background .35s, box-shadow .35s, color .35s;
}
body.cine .btn:hover {
    background: var(--brass-lt); color: var(--ink);
    transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(196, 161, 89, .9);
}
body.cine .btn:active { transform: translateY(0); }
body.cine .btn-gold { background: var(--brass); color: var(--ink); }
body.cine .btn-gold:hover { background: var(--brass-lt); }

/* Secondary buttons on LIGHT sections.
   A transparent pill with a 1px hairline reads as a divider, not a control —
   standing beside a filled gold pill it simply disappears until the cursor
   lands on it. Giving it a surface of its own, and a firmer edge, keeps it
   clearly secondary and unmistakably a button. */
body.cine .btn-outline,
body.cine .btn-ghost {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(10, 22, 38, .58);
    color: var(--ink); box-shadow: none;
}
body.cine .btn-outline:hover,
body.cine .btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--bone); box-shadow: none; }

/* ...and the same buttons on DARK sections, where they invert.
   .cine-feat was missing from this list while its background is var(--ink), so
   the "View" button on every featured row rendered ink-on-ink — invisible until
   hover, which is exactly the complaint. Any dark band must be listed here. */
body.cine .cine-dark .btn-outline, body.cine .cine-dark .btn-ghost,
body.cine .cine-hero .btn-outline, body.cine .cine-hero .btn-ghost,
body.cine .cine-feat .btn-outline, body.cine .cine-feat .btn-ghost,
body.cine .cine-cta .btn-outline,  body.cine .cine-cta .btn-ghost {
    background: rgba(244, 240, 233, .10);
    border: 1px solid rgba(244, 240, 233, .62);
    color: var(--bone); box-shadow: none;
}
body.cine .cine-dark .btn-outline:hover, body.cine .cine-dark .btn-ghost:hover,
body.cine .cine-hero .btn-outline:hover, body.cine .cine-hero .btn-ghost:hover,
body.cine .cine-feat .btn-outline:hover, body.cine .cine-feat .btn-ghost:hover,
body.cine .cine-cta .btn-outline:hover,  body.cine .cine-cta .btn-ghost:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }

body.cine .btn-sm { height: 42px; padding: 0 20px; font-size: 12.5px; }
body.cine .btn-lg { height: 56px; padding: 0 34px; font-size: 14.5px; }
body.cine .btn-block { width: 100%; }
body.cine .btn.disabled, body.cine .btn[disabled] { opacity: .45; pointer-events: none; }
body.cine .btn-oauth {
    background: #fff; border: 1px solid var(--line); color: var(--text); height: 48px; border-radius: 4px;
}
body.cine .vcar-nav, body.cine .chat-close, body.cine .chat-room-back { border-radius: 4px; }
body.cine .btn-oauth:hover { background: var(--bone-2); border-color: var(--sand); color: var(--text); box-shadow: none; }

/* ── header ──────────────────────────────────────────────────────────────── */
body.cine .site-header {
    position: fixed; inset: 0 0 auto; z-index: 400;
    background: transparent; border: 0;
    color: var(--bone);
    padding: 18px 0;
    box-shadow: none;
    transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
body.cine .site-header::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--bone); opacity: 0; transition: opacity .5s var(--ease);
}
body.cine .site-header.solid { color: var(--text); box-shadow: 0 1px 0 var(--line); }
body.cine .site-header.solid::after { opacity: 1; }
/* Only the homepage opens on artwork; everywhere else starts on bone, so the
   bar has to be readable from the first pixel. */
body.cine:not(.cine-home) .site-header {
    color: var(--text); box-shadow: 0 1px 0 var(--line);
}
body.cine:not(.cine-home) .site-header::after { opacity: 1; }

body.cine .header-row { display: flex; align-items: center; gap: 24px; height: auto; }

body.cine .brand { display: inline-flex; align-items: center; }
body.cine .brand-logo-frame {
    display: block; width: clamp(132px, 12vw, 164px); aspect-ratio: 1639 / 239;
    overflow: hidden; flex: none;
}
body.cine .brand-logo {
    width: 124.95%; max-width: none; height: auto;
    transform: translate(-9.96%, -37.33%);
}
body.cine .brand-word {
    font-family: var(--serif); font-size: 23px; letter-spacing: .01em; white-space: nowrap; font-weight: 400;
}
body.cine .brand-word b {
    color: var(--brass); font-weight: 400; font-size: .45em;
    vertical-align: .85em; letter-spacing: .16em; margin-left: .3em;
}
body.cine .brand-tick { display: none; }

body.cine .main-nav {
    display: flex; gap: 26px; margin-inline: auto;
    font-size: 13.5px; letter-spacing: .02em;
}
body.cine .main-nav a { position: relative; padding: 6px 0; font-weight: 400; color: inherit; }
body.cine .main-nav a::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: right;
    transition: transform .45s var(--ease);
}
body.cine .main-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
body.cine .main-nav a.active::after { transform: scaleX(1); transform-origin: left; background: var(--brass); }
body.cine .main-nav .mobile-nav-link { display: none; }

body.cine .header-actions { display: flex; align-items: center; gap: 6px; }

body.cine .hdr-ic,
body.cine .cart-link {
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 0; background: none; border-radius: 4px; color: inherit; cursor: pointer;
    padding: 0; position: relative; transition: background .3s;
}
body.cine .hdr-ic:hover, body.cine .cart-link:hover { background: rgba(196, 161, 89, .18); }
body.cine .hdr-ic svg, body.cine .cart-link svg {
    width: 19px; height: 19px; fill: none; stroke: currentColor;
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

body.cine .cart-count,
body.cine .hdr-count {
    position: absolute; top: 4px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 9px; background: var(--brass); color: var(--ink);
    font-size: 10px; font-weight: 600; font-style: normal;
    display: grid; place-items: center; line-height: 1;
    transition: transform .3s var(--ease);
}
body.cine .cart-count.pop, body.cine .hdr-count.pop { transform: scale(1.35); }

body.cine .account-btn {
    display: flex; align-items: center; gap: 8px; background: none; border: 0;
    color: inherit; cursor: pointer; font-family: var(--sans); font-size: 13px; padding: 4px 6px;
}
body.cine .account-btn .avatar {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--brass); color: var(--ink); font-family: var(--serif); font-size: 15px;
}
body.cine .account-drop {
    background: var(--bone); border: 1px solid var(--line); border-radius: 4px;
    box-shadow: 0 26px 50px -30px rgba(10, 22, 38, .55); padding: 6px; min-width: 176px;
}
body.cine .account-drop a { border-radius: 3px; font-size: 13.5px; color: var(--text); padding: 9px 12px; }
body.cine .account-drop a:hover { background: var(--bone-2); color: var(--ink); }

body.cine .nav-toggle span { background: currentColor; }
body.cine .skip-link { background: var(--ink); color: var(--bone); }

/* The bar is fixed, so every page that does not open on artwork owns its top gap. */
body.cine:not(.cine-home) main { padding-top: clamp(88px, 11vh, 128px); }
body.cine .page-head { padding-top: clamp(24px, 4vh, 44px); padding-bottom: clamp(28px, 5vh, 52px); }
body.cine .pdp-head { padding-bottom: clamp(14px, 2vh, 22px); }
body.cine .pdp-body { padding-top: 0; }
body.cine .page-head .container { display: grid; gap: 14px; }
body.cine .page-head h1 { margin: 0; font-size: clamp(38px, 6.4vw, 76px); }
body.cine .page-head .page-sub { margin: 0; color: var(--muted); font-size: 15.5px; max-width: 52ch; }
body.cine .page-head .cine-rule { margin-top: clamp(20px, 3vh, 34px); }

body.cine .cine-rule { height: 1px; background: var(--line); transform-origin: left; }


/* ── header search ───────────────────────────────────────────────────────── */
body.cine .site-search { border-top: 1px solid var(--line); background: var(--bone); margin-top: 18px; }
body.cine .site-search .container { display: flex; gap: 10px; align-items: center; padding-block: 14px; }
body.cine .site-search input { flex: 1; border-radius: 999px; }
body.cine .site-search .btn { flex: none; }

/* ── breadcrumbs ─────────────────────────────────────────────────────────── */
body.cine .crumbs {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
body.cine .crumbs a { color: var(--muted); }
body.cine .crumbs a:hover { color: var(--text); }

/* ── hero ────────────────────────────────────────────────────────────────── */
body.cine .cine-hero {
    position: relative; height: 100vh; height: 100svh; min-height: 560px;
    overflow: hidden; background: var(--ink); color: var(--bone);
}
/* One headline: lower-left on desktop, centered inside the banner on phones. */
body.cine .cine-hero-wrap { position: relative; }
body.cine .cine-hero .cine-hero-tagline {
    position: absolute; z-index: 2; left: var(--pad); bottom: clamp(84px, 9vh, 104px);
    max-width: calc(100% - var(--pad) * 2); margin: 0;
    font-family: var(--serif); font-size: clamp(32px, 3.6vw, 56px); font-weight: 400;
    line-height: 1.2; letter-spacing: -.015em; text-transform: none;
    color: var(--bone); text-align: left;
}
body.cine .cine-hero .cine-hero-tagline > span { display: inline; }
body.cine .cine-hero .cine-hero-tagline .tint { color: var(--brass-lt); }
@media (max-width: 820px) {
    body.cine .cine-hero .cine-hero-tagline {
        left: var(--pad); right: var(--pad); bottom: 44px; max-width: none; padding: 0;
        font-size: clamp(24px, 6vw, 32px); line-height: 1.3;
        color: var(--bone); background: transparent; text-align: center;
    }
    body.cine .cine-hero .cine-hero-tagline .tint { color: var(--brass-lt); }
}
/* Keep the outgoing frame still during the dissolve. Small photo motion avoids
   magnifying an already full-screen image; video retains its saved framing. */
body.cine .cine-hero .hero-slide { transition: opacity .9s ease; }
body.cine .cine-hero img.hero-slide { animation: none; transform: none; }
@media (prefers-reduced-motion: no-preference) {
    body.cine .cine-hero img.hero-slide:is(.current, .hero-leaving) {
        animation: wrHeroPhoto 10s linear both;
    }
}
@keyframes wrHeroPhoto { from { transform: scale(1); } to { transform: scale(1.035); } }
/* 2 Oct 2026 — a banner's phone photo sits in a <picture>; the wrapper must not
   change the slide's layout. */
body.cine .hero-slides > picture.hero-slide-pic { display: contents; }
/* Phones: a landscape banner is already enlarged ~2.5× to fill a tall screen;
   the slow zoom on top of that re-samples it every frame and softens it more.
   Keep the photo still and sharp on phones. */
@media (max-width: 820px) {
    /* Beats both zoom systems (this file's and site-pages.css's wrHeroIn/Out). */
    body.cine .cine-hero .hero-slides .hero-slide:is(img),
    body.cine .cine-hero .hero-slides .hero-slide:is(img):nth-child(even) {
        animation: none !important; transform: none !important; backface-visibility: visible;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.cine .cine-hero .hero-slide { transition: none; }
}
/* Video framing is independent of photo Ken Burns transforms. */
body.cine .hero-slide:is(video) {
    object-position: var(--banner-desktop-x, 50%) var(--banner-desktop-y, 50%);
    transform-origin: var(--banner-desktop-x, 50%) var(--banner-desktop-y, 50%);
    transform: scale(var(--banner-desktop-zoom, 1));
    animation: none;
}
@media (max-width: 820px) {
    body.cine .hero-slide:is(video) {
        object-position: var(--banner-mobile-x, 50%) var(--banner-mobile-y, 50%);
        transform-origin: var(--banner-mobile-x, 50%) var(--banner-mobile-y, 50%);
        transform: scale(var(--banner-mobile-zoom, 1));
    }
}
body.cine .cine-hero-media { position: absolute; inset: -6% -2%; }
body.cine .cine-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 46%; }
body.cine .cine-hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6,15,27,.62) 0%, rgba(6,15,27,.18) 34%, rgba(6,15,27,.52) 78%, rgba(6,15,27,.86) 100%);
}
/* Zero uploaded banners is a normal state on this install; the stage keeps the
   hero looking authored rather than blank. */
body.cine .cine-hero-stage {
    position: absolute; inset: 0; background:
        radial-gradient(120% 90% at 72% 28%, rgba(196,161,89,.20), transparent 62%),
        linear-gradient(160deg, var(--ink-2), var(--ink-3));
}
body.cine .cine-hero-in {
    position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 var(--pad) clamp(52px, 9vh, 104px); gap: 26px;
}
body.cine .cine-hero h1 { margin: 0; font-size: clamp(52px, 10.6vw, 164px); color: var(--bone); }
body.cine .cine-hero-sub {
    max-width: 34ch; font-size: clamp(14px, 1.5vw, 16.5px);
    color: rgba(244, 240, 233, .82); margin: 0;
}
body.cine .cine-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
body.cine .cine-hero-top {
    position: absolute; left: var(--pad); top: clamp(96px, 13vh, 140px);
    color: rgba(244, 240, 233, .72); z-index: 2;
}
body.cine .cine-cue {
    position: absolute; right: var(--pad); bottom: clamp(52px, 9vh, 104px); z-index: 2;
    display: flex; align-items: center; gap: 12px;
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 240, 233, .66);
}
body.cine .cine-cue s { display: block; width: 64px; height: 1px; background: rgba(244,240,233,.4); position: relative; overflow: hidden; }
body.cine .cine-cue s::after {
    content: ''; position: absolute; inset: 0; background: var(--brass);
    transform: translateX(-101%); animation: cineCue 2.4s var(--ease) infinite;
}
@keyframes cineCue { 50% { transform: translateX(0); } 100% { transform: translateX(101%); } }

/* ── statement ───────────────────────────────────────────────────────────── */
/* WR-HOME-REFINED-20260921. Values are inherited only by this homepage body.
   Existing declarations below keep their original fallbacks on other pages. */
body.cine[data-page="home"] .wr-home-refined {
    --wr-home-space: clamp(40px, 5vw, 72px);
    --wr-home-head-gap: clamp(22px, 3vw, 32px);
    --wr-home-heading-top: 0px;
    --wr-home-marquee-height: clamp(76px, 8vw, 104px);
    --wr-home-close-space: clamp(48px, 6vw, 88px);
    --wr-home-close-title: clamp(36px, 5.2vw, 72px);
}
body.cine[data-page="home"] .wr-home-intro {
    background-color: var(--bone);
    color: var(--ink);
}
body.cine[data-page="home"] .wr-home-intro-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px 40px;
    padding-block: clamp(24px, 3vw, 40px);
    border-bottom: 1px solid var(--line);
}
body.cine[data-page="home"] .wr-home-intro-copy { min-width: 0; }
body.cine[data-page="home"] .wr-home-intro-eyebrow {
    margin: 0 0 10px;
    color: var(--brass-ink);
    font: 500 11px/1.5 var(--sans);
    letter-spacing: .17em;
    text-transform: uppercase;
}
body.cine[data-page="home"] .wr-home-intro h2 {
    margin: 0;
    font: 400 clamp(30px, 3.2vw, 46px)/1.15 var(--sans);
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
body.cine[data-page="home"] .wr-home-intro-link {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 18px;
    min-height: 44px;
    padding-block: 8px;
    color: var(--ink);
    font: 500 13px/1.5 var(--sans);
    text-decoration: none;
}
body.cine[data-page="home"] .wr-home-intro-link svg {
    flex: 0 0 24px;
    color: var(--brass-ink);
    transition: transform .25s var(--ease);
}
body.cine[data-page="home"] .wr-home-intro-link:hover span {
    text-decoration: underline;
    text-underline-offset: 5px;
}
body.cine[data-page="home"] .wr-home-intro-link:hover svg { transform: translateX(3px); }
body.cine[data-page="home"] .wr-home-intro-link:focus-visible {
    outline: 2px solid var(--brass-ink);
    outline-offset: 5px;
}
@media (max-width: 820px) {
    body.cine[data-page="home"] .wr-home-intro-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding-block: 26px;
    }
    body.cine[data-page="home"] .wr-home-intro-link { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
    body.cine[data-page="home"] .wr-home-intro-link svg { transition: none; }
    body.cine[data-page="home"] .wr-home-intro-link:hover svg { transform: none; }
}

body.cine .cine-s2 { background: var(--bone); padding: clamp(96px, 17vh, 190px) 0 clamp(80px, 13vh, 150px); }
body.cine .cine-s2 .container { display: grid; gap: clamp(32px, 5vw, 72px); }
body.cine .cine-s2 h2 { margin: 0; font-size: clamp(40px, 8.2vw, 124px); }
body.cine .cine-s2-side { max-width: 46ch; justify-self: end; display: grid; gap: 18px; }
body.cine .cine-s2-side p { margin: 0; color: var(--muted); font-size: 15.5px; }

body.cine .cine-stats-row {
    display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 60px);
    padding-top: clamp(28px, 4vh, 44px);
}
body.cine .cine-stats-row div { display: grid; gap: 4px; }
body.cine .cine-stats-row b { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 44px); font-weight: 400; color: var(--ink); }
body.cine .cine-stats-row span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* ── mattress cutaway ──────────────────────────────────────────────────────
   The default is the complete, readable composition. JavaScript adds the
   long sticky scroll treatment only when motion and IntersectionObserver are
   available, so reduced-motion visitors and failed scripts never get a blank
   stage or hidden product information. */
body.cine .cine-cutaway {
    position: relative; overflow: clip; background: var(--bone); isolation: isolate;
}
body.cine .cine-cutaway-stage {
    position: relative; min-height: 100svh;
    display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, 560px);
    align-items: center; gap: clamp(24px, 3.5vw, 68px);
    padding: clamp(88px, 10svh, 126px) var(--pad) clamp(74px, 9svh, 108px);
}
body.cine .cine-cutaway-word {
    position: absolute; inset: 0; z-index: -1; display: grid; place-items: center;
    font-family: var(--serif); font-size: clamp(100px, 19vw, 300px); line-height: 1;
    letter-spacing: .04em; color: rgba(10, 22, 38, .055); user-select: none;
}
body.cine .cine-cutaway-visual {
    position: relative; z-index: 2; min-width: 0; display: grid; place-items: center;
    pointer-events: none;
}
body.cine .cine-cutaway-product {
    position: relative; width: min(100%, 1080px, calc(72svh * 1.368));
    aspect-ratio: 1467 / 1072; transform-origin: 50% 52%;
}
body.cine .cine-cutaway-product::before {
    content: ''; position: absolute; z-index: 1; left: 16%; right: 16%; bottom: 5%; height: 15%;
    background: radial-gradient(ellipse at center, rgba(10,22,38,.18), rgba(10,22,38,0) 70%);
    transform: translateY(20%); pointer-events: none;
}
body.cine .cine-cutaway-product img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
    max-width: none; margin: 0; user-select: none;
}
body.cine .cine-cutaway-intact { display: none; z-index: 12; }
body.cine .cine-cutaway-layer { opacity: 1; transform: translateY(var(--layer-y)); }
body.cine .cine-cutaway-layer-1 { --layer-y: -39%; z-index: 11; }
body.cine .cine-cutaway-layer-2 { --layer-y: -31%; z-index: 10; }
body.cine .cine-cutaway-layer-3 { --layer-y: -23%; z-index: 9; }
body.cine .cine-cutaway-layer-4 { --layer-y: -15%; z-index: 8; }
body.cine .cine-cutaway-layer-5 { --layer-y: -7%; z-index: 7; }
body.cine .cine-cutaway-layer-6 { --layer-y: 2%; z-index: 6; }
body.cine .cine-cutaway-layer-7 { --layer-y: 13%; z-index: 5; }
body.cine .cine-cutaway-layer-8 { --layer-y: 25%; z-index: 4; }
body.cine .cine-cutaway-layer-9 { --layer-y: 39%; z-index: 3; }
body.cine .cine-cutaway-line {
    display: none; position: absolute; z-index: 13; left: 5%; right: 5%; top: 25%;
    height: 2px; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(196,161,89,.2) 7%, #fff 24%, var(--brass) 50%, #fff 76%, rgba(196,161,89,.2) 93%, transparent 100%);
    box-shadow: 0 0 8px rgba(255,255,255,.85), 0 0 20px rgba(196,161,89,.62);
    transform: rotate(-1.2deg); transform-origin: center;
}
body.cine .cine-cutaway-tag {
    position: absolute; z-index: 14; top: var(--tag-top);
    display: flex; align-items: center; gap: 8px; min-height: 42px;
    padding: 8px 15px 8px 8px; border: 1px solid rgba(10,22,38,.18);
    border-radius: 999px; background: rgba(250,248,244,.92);
    box-shadow: 0 8px 24px rgba(10,22,38,.10);
    color: var(--ink); font-size: clamp(11px, .9vw, 15px); font-weight: 700;
    letter-spacing: .075em; line-height: 1.2; text-transform: uppercase;
    white-space: nowrap; pointer-events: none;
}
body.cine .cine-cutaway-tag b {
    display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto;
    border-radius: 50%; background: var(--ink); color: var(--bone);
    font: 700 9px/1 var(--sans); letter-spacing: .03em;
}
body.cine .cine-cutaway-tag::after {
    content: ''; position: absolute; top: 50%; width: clamp(26px, 4vw, 64px);
    border-top: 1px solid rgba(10,22,38,.3);
}
body.cine .cine-cutaway-tag[data-side="left"] { left: -5%; }
body.cine .cine-cutaway-tag[data-side="left"]::after { left: 100%; }
body.cine .cine-cutaway-tag[data-side="right"] { right: 0; }
body.cine .cine-cutaway-tag[data-side="right"]::after { right: 100%; }
body.cine .cine-cutaway-tag-1 { --tag-top: 11%; }
body.cine .cine-cutaway-tag-2 { --tag-top: 19%; }
body.cine .cine-cutaway-tag-3 { --tag-top: 27%; }
body.cine .cine-cutaway-tag-4 { --tag-top: 35%; }
body.cine .cine-cutaway-tag-5 { --tag-top: 43%; }
body.cine .cine-cutaway-tag-6 { --tag-top: 52%; }
body.cine .cine-cutaway-tag-7 { --tag-top: 63%; }
body.cine .cine-cutaway-tag-8 { --tag-top: 75%; }
body.cine .cine-cutaway-tag-9 { --tag-top: 89%; }
body.cine .cine-cutaway-mobile-label { display: none; }

body.cine .cine-cutaway-card {
    position: relative; z-index: 20; width: 100%; min-height: min(71svh, 730px);
    padding: clamp(34px, 3vw, 50px); display: grid; align-content: center;
    gap: 18px; justify-items: start; text-align: left;
    border: 1px solid rgba(10,22,38,.13); border-radius: 4px;
    background: rgba(250,248,244,.97); box-shadow: 0 34px 78px -30px rgba(10,22,38,.32);
}
body.cine .cine-cutaway-card h2 {
    margin: 0; font-size: clamp(42px, 3.8vw, 60px); line-height: .98;
}
body.cine .cine-cutaway-lead {
    margin: 0; max-width: 42ch; color: var(--muted); font-size: 16px; line-height: 1.55;
}
body.cine .cine-cutaway-specs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; width: 100%;
    color: var(--muted); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
}
body.cine .cine-cutaway-specs div {
    display: grid; gap: 5px; justify-items: start; padding: 14px 0 12px;
    border-top: 1px solid var(--line);
}
body.cine .cine-cutaway-specs b {
    font-family: var(--serif); font-size: 17px; font-weight: 400;
    letter-spacing: 0; line-height: 1.25; text-transform: none; color: var(--ink);
}
body.cine .cine-cutaway-price { display: flex; align-items: baseline; gap: 12px; margin-top: 2px; }
body.cine .cine-cutaway-price b { font: 400 clamp(38px, 3vw, 50px)/1 var(--serif); color: var(--ink); }
body.cine .cine-cutaway-price s { color: var(--muted); font-size: 15px; }
body.cine .cine-cutaway-actions { display: flex; flex-wrap: wrap; gap: 12px; }
body.cine .cine-cutaway-visit {
    margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .11em;
    line-height: 1.4; text-transform: uppercase;
}
body.cine .cine-cutaway-hint { display: none; }

/* Motion-enabled state. Inline transforms and opacity are written by the
   section-local requestAnimationFrame loop in cinematic.js. */
body.cine.cine-anim .cine-cutaway { height: 560vh; height: 560svh; }
body.cine.cine-anim .cine-cutaway-stage {
    position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0;
    display: block; padding: 0; overflow: hidden;
}
body.cine.cine-anim .cine-cutaway-word {
    z-index: 0; transform: translateY(-9svh); will-change: transform, opacity;
}
body.cine.cine-anim .cine-cutaway-visual {
    position: absolute; inset: clamp(62px, 7svh, 84px) 0 0; display: grid; place-items: center;
}
body.cine.cine-anim .cine-cutaway-product {
    width: min(86vw, 1080px, calc(72svh * 1.368)); will-change: transform;
}
body.cine.cine-anim .cine-cutaway-intact {
    display: block; opacity: 1; clip-path: inset(0 0 0 0);
}
body.cine.cine-anim .cine-cutaway-layer {
    opacity: 0; transform: translateY(0);
}
body.cine.cine-anim .cine-cutaway-tag { opacity: 0; }
body.cine.cine-anim .cine-cutaway-line { display: block; }
body.cine.cine-anim .cine-cutaway-card {
    position: absolute; right: clamp(24px, 3vw, 64px); top: 50%;
    width: clamp(340px, 30vw, 560px); transform: translate(54px, -50%);
    opacity: 0; visibility: hidden; will-change: transform, opacity;
}
body.cine.cine-anim .cine-cutaway-hint {
    position: absolute; z-index: 22; left: 50%; bottom: 22px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px; margin: 0;
    color: var(--muted); font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
    pointer-events: none;
}
body.cine .cine-cutaway-hint span { width: 48px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
body.cine .cine-cutaway-hint span::after { content: ''; position: absolute; inset: 0; background: var(--brass); transform: translateX(-100%); }
body.cine.cine-anim .cine-cutaway-hint span::after { animation: cineCutawayHint 2s var(--ease) infinite; }
@keyframes cineCutawayHint { 50% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* Compact screens get their own composition. The mattress remains the hero
   during the cut; one unscaled caption names the active layer, then clears
   before a dedicated bottom sheet rises with the product information. */
@media (max-width: 1180px) {
    body.cine .cine-cutaway-stage {
        min-height: 0; grid-template-columns: 1fr; gap: 22px;
        padding: 72px 0 90px;
    }
    body.cine .cine-cutaway-word {
        align-items: start; padding-top: 36px; font-size: clamp(76px, 24vw, 150px);
    }
    body.cine .cine-cutaway-visual { min-height: min(69svh, 620px); }
    body.cine .cine-cutaway-product { width: min(108vw, 720px, calc(69svh * 1.368)); }
    body.cine .cine-cutaway-tag {
        max-width: 47vw; min-height: 32px; padding: 6px 10px 6px 6px;
        gap: 6px; font-size: 9.5px; letter-spacing: .05em; box-shadow: 0 5px 16px rgba(10,22,38,.08);
    }
    body.cine .cine-cutaway-tag b { width: 20px; height: 20px; font-size: 7.5px; }
    body.cine .cine-cutaway-tag[data-side="left"] { left: 8%; }
    body.cine .cine-cutaway-tag[data-side="right"] { right: 8%; }
    body.cine .cine-cutaway-tag::after { width: 18px; }
    body.cine .cine-cutaway-card {
        width: auto; min-height: 0; margin-inline: var(--pad); padding: 22px;
        gap: 9px; border-radius: 22px; box-shadow: 0 22px 46px -26px rgba(10,22,38,.32);
    }
    body.cine .cine-cutaway-card h2 { font-size: clamp(25px, 7vw, 34px); }
    body.cine .cine-cutaway-lead { max-width: none; font-size: 11.5px; line-height: 1.35; }
    body.cine .cine-cutaway-specs { gap: 0 12px; font-size: 7px; letter-spacing: .09em; }
    body.cine .cine-cutaway-specs div { gap: 2px; padding: 6px 0 5px; }
    body.cine .cine-cutaway-specs b { font-size: 11px; }
    body.cine .cine-cutaway-price { gap: 8px; }
    body.cine .cine-cutaway-price b { font-size: 22px; }
    body.cine .cine-cutaway-price s { font-size: 12px; }
    body.cine .cine-cutaway-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
    body.cine .cine-cutaway-actions .btn { width: 100%; height: 40px; padding-inline: 12px; font-size: 11px; }
    body.cine .cine-cutaway-visit { font-size: 7.5px; }

    body.cine.cine-anim .cine-cutaway { height: 540vh; height: 540svh; }
    body.cine.cine-anim .cine-cutaway-stage { display: block; padding: 0; min-height: 0; }
    body.cine.cine-anim .cine-cutaway-word { padding-top: 0; transform: translateY(-12svh); }
    body.cine.cine-anim .cine-cutaway-visual { min-height: 0; inset: 62px 0 0; }
    body.cine.cine-anim .cine-cutaway-product { width: min(108vw, 720px, calc(69svh * 1.368)); }
    body.cine.cine-anim .cine-cutaway-tag { display: none; }
    body.cine.cine-anim .cine-cutaway-mobile-label {
        position: absolute; z-index: 24; left: 50%; top: clamp(76px, 12svh, 116px);
        display: flex; align-items: center; gap: 9px; min-height: 40px; max-width: calc(100vw - 32px);
        margin: 0; padding: 7px 15px 7px 7px; border: 1px solid rgba(10,22,38,.15);
        border-radius: 999px; background: rgba(250,248,244,.97);
        box-shadow: 0 10px 26px rgba(10,22,38,.11); color: var(--ink);
        font-size: 12px; font-weight: 700; letter-spacing: .065em; line-height: 1.2;
        text-transform: uppercase; white-space: nowrap; opacity: 0;
        transform: translate(-50%, -8px); pointer-events: none;
    }
    body.cine.cine-anim .cine-cutaway-mobile-label b {
        display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto;
        border-radius: 50%; background: var(--ink); color: var(--bone);
        font: 700 9px/1 var(--sans); letter-spacing: .02em;
    }
    body.cine.cine-anim .cine-cutaway-card {
        left: clamp(12px, 3vw, 26px); right: clamp(12px, 3vw, 26px); top: auto; bottom: 18px;
        width: auto; min-height: 0; margin: 0;
        padding: 22px clamp(18px, 4vw, 30px) 20px; transform: translate(0, 28px);
        border-radius: 24px;
    }
    body.cine.cine-anim .cine-cutaway-card::before {
        content: ''; width: 38px; height: 3px; border-radius: 999px;
        background: rgba(10,22,38,.18); justify-self: center; margin: -9px 0 2px;
    }
    body.cine.cine-anim .cine-cutaway-hint {
        bottom: 32px;
    }
}

@media (max-width: 820px) {
    body.cine.cine-anim .cine-cutaway-card { bottom: calc(70px + env(safe-area-inset-bottom)); }
    body.cine.cine-anim .cine-cutaway-hint { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

@media (max-width: 520px) {
    body.cine .cine-cutaway-card { padding: 18px; gap: 7px; }
    body.cine .cine-cutaway-card h2 { font-size: clamp(25px, 8.3vw, 32px); }
    body.cine .cine-cutaway-lead { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    body.cine .cine-cutaway-specs { font-size: 8px; }
    body.cine .cine-cutaway-specs b { font-size: 11.5px; }
    body.cine .cine-cutaway-actions .btn { min-height: 44px; }
    body.cine.cine-anim .cine-cutaway-card { padding: 19px 16px 16px; }
}

@media (max-width: 1180px) and (max-height: 650px) {
    body.cine.cine-anim .cine-cutaway-card {
        grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr);
        column-gap: 20px; align-items: center; padding-block: 16px;
    }
    body.cine.cine-anim .cine-cutaway-card .cine-eyebrow,
    body.cine.cine-anim .cine-cutaway-card h2,
    body.cine.cine-anim .cine-cutaway-card .cine-cutaway-lead { grid-column: 1; }
    body.cine.cine-anim .cine-cutaway-card .cine-cutaway-specs,
    body.cine.cine-anim .cine-cutaway-card .cine-cutaway-price,
    body.cine.cine-anim .cine-cutaway-card .cine-cutaway-actions { grid-column: 2; }
    body.cine.cine-anim .cine-cutaway-card .cine-cutaway-specs { grid-row: 1 / span 3; align-self: start; }
    body.cine.cine-anim .cine-cutaway-card .cine-cutaway-price { grid-row: 4; }
    body.cine.cine-anim .cine-cutaway-card .cine-cutaway-actions { grid-row: 5; }
    body.cine .cine-cutaway-visit { display: none; }
}

/* ── spotlight ───────────────────────────────────────────────────────────── */
body.cine .cine-spot { background: var(--bone); padding: 0 0 var(--wr-home-space, clamp(70px, 12vh, 130px)); position: relative; overflow: hidden; }
body.cine .cine-spot-grid {
    display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
    gap: clamp(28px, 5vw, 80px); padding-inline: var(--pad);
}
body.cine .cine-spot-frame {
    position: relative; width: min(93%, 760px); height: auto;
    justify-self: center; overflow: hidden; border-radius: 2px; background: transparent;
}
body.cine .cine-spot-frame img {
    display: block; width: 100%; height: auto; object-fit: contain; object-position: center;
}
body.cine .cine-spot-copy { display: grid; gap: 16px; align-content: center; }
body.cine .cine-spot-copy h2 { margin: 0; font-size: clamp(30px, 4.4vw, 58px); }
body.cine .cine-spot-meta {
    display: flex; flex-wrap: wrap; gap: clamp(16px, 3.4vw, 46px);
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
body.cine .cine-spot-meta div { display: grid; gap: 4px; }
body.cine .cine-spot-meta b {
    font-family: var(--serif); font-size: 17px; letter-spacing: 0;
    text-transform: none; color: var(--ink); font-weight: 400;
}
body.cine .cine-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
body.cine .cine-price b { font-family: var(--serif); font-size: clamp(26px, 3.6vw, 42px); font-weight: 400; color: var(--ink); }
body.cine .cine-price s { color: var(--muted); font-size: 15px; }
body.cine .cine-spot-acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── compact collections: one lead + four supporting categories ──────────── */
body.cine .cine-cols { background: var(--bone); padding: var(--wr-home-space, clamp(64px, 9vh, 104px)) 0; }
body.cine .cine-cols-head {
    margin-bottom: clamp(24px, 3.2vw, 38px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
body.cine .cine-cols-head h2 { margin: 0; }
body.cine .cine-cols-head p { margin: 10px 0 0; color: var(--muted); font-size: 15px; }
body.cine .cine-view-all {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid rgba(202,155,63,.7);
    color: var(--brass-ink);
    font-size: 13px;
    white-space: nowrap;
}
body.cine .cine-view-all svg { stroke: currentColor; stroke-width: 1.4; transition: transform .3s var(--ease); }
body.cine .cine-view-all:hover svg { transform: translateX(5px); }
body.cine .cine-cols-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, minmax(0,1fr));
    gap: 10px;
}
body.cine .cine-col-row {
    position: relative;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 4 / 3;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(10,22,38,.08);
    border-radius: 8px;
    background: transparent;
}
body.cine .cine-col-row.is-lead { grid-row: 1 / span 2; min-height: 0; aspect-ratio: auto; }
body.cine .cine-col-row.is-lead:only-child { aspect-ratio: 4 / 3; }
body.cine .cine-col-row img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
    object-position: center;
    transition: transform .7s var(--ease), opacity .4s;
}
body.cine .cine-col-row:hover img { transform: scale(1.035); }
body.cine .cine-col-row::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 43%;
    background: linear-gradient(180deg, transparent, rgba(6,15,27,.82));
    pointer-events: none;
}
body.cine .cine-col-name {
    position: absolute;
    z-index: 2;
    right: clamp(15px,2vw,24px);
    bottom: clamp(14px,2vw,22px);
    left: clamp(15px,2vw,24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--bone);
    font-family: var(--serif);
    font-size: clamp(18px,2vw,28px);
    line-height: 1.08;
    transition: transform .35s var(--ease);
}
body.cine .cine-col-row:hover .cine-col-name { transform: translateY(-3px); }
body.cine .cine-col-name svg { width: 26px; height: 12px; flex: none; fill: none; stroke: var(--brass-lt); stroke-width: 1.4; transition: transform .35s var(--ease); }
body.cine .cine-col-row:hover .cine-col-name svg { transform: translateX(5px); }
body.cine .cine-col-meta { display: none; }

/* ── compact featured carousel ───────────────────────────────────────────── */
body.cine .cine-feat { overflow: hidden; background: var(--ink); color: var(--bone); padding: var(--wr-home-space, clamp(64px, 9vh, 104px)) 0; }
body.cine .cine-feat h2 { color: var(--bone); }
body.cine .cine-feat-track {
    display: flex;
    gap: 16px;
    padding: 2px 1px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}
body.cine .cine-feat-track::-webkit-scrollbar { display: none; }
body.cine .cine-feat-track:focus-visible { outline: 2px solid var(--brass); outline-offset: 5px; }
body.cine .cine-feat-card {
    flex: 0 0 calc((100% - 32px) / 3);
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(244,240,233,.15);
    border-radius: 8px;
    background: #091a2e;
    scroll-snap-align: start;
}
body.cine .cine-feat-card[hidden] { display: none; }
body.cine .cine-feat-media {
    position: relative;
    aspect-ratio: 4 / 3;
    display: block;
    overflow: hidden;
    background: #f1f1ef;
}
body.cine .cine-feat-media img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
    transition: transform .6s var(--ease);
}
body.cine .cine-feat-card:hover .cine-feat-media img { transform: scale(1.035); }
body.cine .cine-feat-card-body { min-height: 150px; padding: 18px 20px 20px; display: grid; align-content: start; }
body.cine .cine-feat-category { color: rgba(244,240,233,.58); font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
body.cine .cine-feat-card h3 { margin: 7px 0 18px; color: var(--bone); font-size: clamp(22px,2.3vw,31px); line-height: 1.04; }
body.cine .cine-feat-card h3 a { color: inherit; }
body.cine .cine-feat-card-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
body.cine .cine-feat-card .cine-price { min-width: 0; display: grid; gap: 2px; }
body.cine .cine-feat-card .cine-price b { color: var(--brass-lt); font-size: clamp(24px,2.35vw,31px); line-height: 1; }
body.cine .cine-feat-card .cine-price s { color: rgba(244,240,233,.48); font-size: 12px; }
body.cine .cine-feat-card .btn { min-height: 44px; flex: none; padding-inline: 19px; }
body.cine .cine-feat-controls { margin-top: 22px; display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
body.cine .cine-feat-carousel.is-static .cine-feat-controls { display: none; }
body.cine .cine-feat-progress { width: min(260px,42vw); height: 2px; overflow: hidden; background: rgba(244,240,233,.18); }
body.cine .cine-feat-progress i { display: block; width: 0; height: 100%; background: var(--brass); transition: width .3s var(--ease); }
body.cine .cine-feat-arrows { display: flex; gap: 10px; }
body.cine .cine-feat-arrows button {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(244,240,233,.3);
    border-radius: 4px;
    background: transparent;
    color: var(--bone);
    font-size: 17px;
    cursor: pointer;
}
body.cine .cine-feat-arrows button:hover,
body.cine .cine-feat-arrows button:focus-visible { border-color: var(--brass); color: var(--brass); }
body.cine .cine-feat-arrows button:disabled { opacity: .3; cursor: default; }

/* ── marquee band ────────────────────────────────────────────────────────── */
body.cine .cine-marq {
    position: relative; height: var(--wr-home-marquee-height, clamp(140px, 22vh, 220px)); overflow: hidden;
    background: var(--ink); display: flex; align-items: center;
}
body.cine .cine-marq-track { display: flex; gap: 52px; padding-right: 52px; white-space: nowrap; }
body.cine .cine-marq-track span {
    font-family: var(--serif); font-size: clamp(30px, 5vw, 64px); color: var(--bone); opacity: .9;
}
body.cine .cine-marq-track b { color: var(--brass); font-weight: 400; }

/* ── reviews ─────────────────────────────────────────────────────────────── */
body.cine .cine-revs { background: var(--bone); padding: var(--wr-home-space, clamp(80px, 13vh, 140px)) 0; }
body.cine .cine-rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 24px); }
body.cine .cine-rev {
    background: #fff; padding: 26px; display: grid; gap: 14px;
    align-content: start; border-radius: 3px;
}
body.cine .cine-rev p { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.4; }
body.cine .cine-rev-stars { color: var(--brass-ink); font-size: 13px; letter-spacing: .1em; }
body.cine .cine-rev-who { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
body.cine .cine-rev-who s {
    width: 34px; height: 34px; border-radius: 50%; background: var(--bone-2);
    display: grid; place-items: center; font-family: var(--serif); font-size: 15px;
    color: var(--ink); text-decoration: none; flex: none;
}
body.cine .cine-rev-item { font-size: 12px; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line); }

/* ── closing call to action ──────────────────────────────────────────────── */
body.cine .cine-cta {
    position: relative; background: var(--ink); color: var(--bone); overflow: hidden;
    padding: var(--wr-home-close-space, clamp(100px, 18vh, 210px)) 0;
}
body.cine .cine-cta > img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; opacity: .4; }
body.cine .cine-cta::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(6, 15, 27, .95) 22%, rgba(6, 15, 27, .35));
}
body.cine .cine-cta-stage {
    position: absolute; inset: 0;
    background: radial-gradient(90% 80% at 78% 40%, rgba(196, 161, 89, .22), transparent 60%);
}
body.cine .cine-cta .container { position: relative; z-index: 2; }
body.cine .cine-cta h2 { margin: 0 0 22px; font-size: var(--wr-home-close-title, clamp(42px, 7.4vw, 110px)); line-height: .98; color: var(--bone); }
body.cine .cine-cta p { margin: 0 0 30px; max-width: 40ch; color: rgba(244, 240, 233, .75); }

/* ── product card ────────────────────────────────────────────────────────── */
body.cine .grid-4, body.cine .grid.grid-4, body.cine .product-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 24px);
}

body.cine .pcard {
    background: #fff; border: 0; border-radius: 3px; overflow: hidden;
    display: flex; flex-direction: column; box-shadow: none;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
body.cine .pcard:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(10, 22, 38, .55); }

body.cine .pcard-media {
    position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bone-2); display: block;
}
body.cine .pcard-media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: opacity .6s var(--ease), transform .8s var(--ease);
}
body.cine .pcard-media img.pcard-alt { opacity: 0; }
body.cine .pcard:hover .pcard-media img.pcard-main { opacity: 0; transform: scale(1.04); }
body.cine .pcard:hover .pcard-media img.pcard-alt { opacity: 1; transform: scale(1.04); }
/* Three of four products have no second photograph; the single image still has
   to move on hover or that card reads as broken beside one that does. */
body.cine .pcard:hover .pcard-media img.pcard-main:only-of-type { opacity: 1; transform: scale(1.04); }

body.cine .pcard-off {
    position: absolute; top: 0; left: 0; z-index: 2;
    background: #A4622E; color: #fff; font-size: 11px; font-weight: 600;
    padding: 5px 10px; letter-spacing: .04em; border-radius: 0;
}
body.cine .pcard-oos-veil {
    position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
    background: rgba(6, 15, 27, .58); color: var(--bone);
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}

/* Containing block for the wish heart and the quick-view pill: their offsets
   now measure from the photo, not from the whole card. */
body.cine .pcard-top { position: relative; }

body.cine .wish-btn {
    position: absolute; top: 10px; right: 10px; z-index: 4;
    /* 40px, up from 34: at 34 the heart read as an afterthought, and it was
       under the 44px a finger needs on a phone. */
    width: 40px; height: 40px; border: 0; border-radius: 4px;
    background: rgba(255, 255, 255, .9); display: grid; place-items: center; cursor: pointer;
    transition: background .3s, transform .3s;
}
body.cine .wish-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.6; }
body.cine .wish-btn:hover { transform: scale(1.08); }
body.cine .wish-btn[aria-pressed="true"] svg { fill: var(--ember); stroke: var(--ember); }

/* .pcard-quick removed: the quick-view pill is gone from the card. */

body.cine .pcard-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

body.cine .pcard-name {
    margin: 0; font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    /* Reserved so every card in a row hands off to the price on one baseline. */
    min-height: 2.8em;
}
body.cine .pcard-name a { color: var(--text); }

body.cine .pcard-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
body.cine .pcard-star { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 600; }  /* gold on white was 2.44:1; the glyph keeps the gold below */
body.cine .pcard-star.new { color: var(--muted); font-weight: 500; }

body.cine .pcard-price {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    /* Reserve the compare-price line. Only discounted products carry one, and at
       card width it wraps onto its own row — so without this the block is a line
       shorter on undiscounted cards and the Add button lands higher than its
       neighbours. .pcard-name reserves its two title lines for the same reason. */
    min-height: 44px; align-content: flex-start;
}
body.cine .pcard-price strong { font-family: var(--sans); font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
body.cine .pcard-price s { font-size: 12.5px; color: var(--muted); }

/* margin-top:auto, not 2px: .pcard-body is a flex column, so this pins the
   action to the card floor. Without it the button stops wherever the content
   above ends, and a card whose struck-through price wraps to a second line
   pushes its button below its neighbours' — the row is only aligned by luck. */
body.cine .pcard .btn { width: 100%; margin-top: auto; }
body.cine .pcard .oos {
    display: grid; place-items: center; height: 42px; border: 1px solid var(--line);
    border-radius: 999px; font-size: 12.5px; color: var(--muted);
}

/* Mobile card prices share a bottom baseline, including From and sale labels. */
@media (max-width: 820px) {
    body.cine .pcard, body.cine .pcard-body { min-width: 0; }
    body.cine .pcard .pcard-body .pcard-price {
        margin-top: auto; order: 2; display: grid;
        grid-template-columns: minmax(0, 1fr); grid-template-rows: 14px auto;
        gap: 4px; min-height: 42px; align-content: end; align-items: end;
        padding-top: 4px;
    }
    body.cine .pcard .pcard-body .pcard-price strong {
        grid-row: 2; font-size: clamp(14px, 3.6vw, 17px); line-height: 1.2;
        font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    body.cine .pcard .pcard-body .pcard-price :is(.pcard-from, s) {
        grid-row: 1; font-family: var(--sans); font-size: 11px; line-height: 14px;
        font-weight: 400; color: var(--muted);
    }
    body.cine .pcard .oos { order: 1; }
}

/* ── quick view ──────────────────────────────────────────────────────────── */
body.cine dialog.qv-dialog { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; }
body.cine dialog.qv-dialog[open] { position: fixed; inset: 0; }
body.cine dialog.qv-dialog::backdrop { background: rgba(6, 15, 27, .72); }
body.cine .qv {
    position: absolute; inset: auto 0 0; background: var(--bone);
    width: min(920px, 100%); margin-inline: auto;
    display: grid; grid-template-columns: 1fr 1fr;
    border-radius: 4px 4px 0 0; overflow: hidden; max-height: 92svh;
}
body.cine .qv > img { width: 100%; height: 100%; object-fit: cover; min-height: 220px; background: var(--bone-2); }
body.cine .qv-b { padding: clamp(22px, 3vw, 36px); display: grid; gap: 16px; align-content: start; overflow: auto; }
body.cine .qv-b h3 { margin: 0; font-size: 30px; line-height: 1.1; }
body.cine .qv-desc { margin: 0; color: var(--muted); font-size: 14.5px; }
body.cine .qv-close {
    position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0;
    border-radius: 4px; background: rgba(244, 240, 233, .92); display: grid; place-items: center; cursor: pointer; z-index: 5;
}
body.cine .qv-close svg { width: 18px; height: 18px; stroke: var(--ink); stroke-width: 1.6; fill: none; stroke-linecap: round; }
body.cine .qv-stock { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
body.cine .qv-stock s { width: 7px; height: 7px; border-radius: 50%; background: #5FBE8A; display: block; text-decoration: none; }
body.cine .qv-stock.out s { background: var(--ember); }
body.cine .qv-full { font-size: 13px; color: var(--muted); text-decoration: underline; }

/* ── quantity stepper ────────────────────────────────────────────────────── */
body.cine .qty-stepper {
    display: flex; align-items: center; gap: 0; border: 1px solid var(--line);
    border-radius: 4px; width: max-content; overflow: hidden; background: #fff;
}
body.cine .qty-stepper button {
    width: 40px; height: 40px; border: 0; background: none; cursor: pointer;
    font-size: 16px; color: var(--text); font-family: var(--sans);
}
body.cine .qty-stepper button:hover { background: var(--bone-2); }
body.cine .qty-stepper input,
body.cine .qty-stepper span {
    width: 44px; text-align: center; font-size: 15px; border: 0; background: none;
    color: var(--text); padding: 0;
}

/* ── product detail ──────────────────────────────────────────────────────── */
body.cine[data-page="product"] .pdp-body {
    padding: 0 0 clamp(56px, 8vh, 92px);
}
body.cine[data-page="product"] .product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
    gap: clamp(30px, 4vw, 62px);
    align-items: start;
}

/* Product gallery — natural image height, 2026-09-30.
   Follow each photo's proportions to avoid letterboxing; thumbnails stay below. */
body.cine[data-page="product"] .product-media {
    position: relative;
    min-width: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}
body.cine[data-page="product"] .product-media.has-gallery {
    display: block;
}
body.cine[data-page="product"] .pdp-gallery-stage {
    position: relative;
    min-width: 0;
    aspect-ratio: auto;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #fff;
}
body.cine[data-page="product"] .pdp-gallery-stage > #mainImage {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 0;
    background: transparent;
    border-radius: 0;
    transition: opacity .24s var(--ease);
}
body.cine[data-page="product"] .pdp-gallery-stage > #mainImage.is-switching { opacity: .18; }
body.cine[data-page="product"] #mainImage[role="button"] { cursor: zoom-in; }
body.cine[data-page="product"] #mainImage[role="button"]:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: -3px;
}
body.cine[data-page="product"] .wr-pp-viewer-gallery button { border-radius: 0; }
body.cine[data-page="product"] .thumb-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin: 10px 0 0;
    padding: 2px 2px 5px;
    overflow-x: auto;
    overscroll-behavior: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
body.cine[data-page="product"] .thumb {
    flex: 0 0 calc((100% - 40px) / 5);
    min-width: 44px;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 0;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    opacity: .66;
    box-shadow: none;
    scroll-snap-align: start;
    transition: opacity .2s var(--ease), border-color .2s, box-shadow .2s;
}
body.cine[data-page="product"] .thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
}
body.cine[data-page="product"] .thumb:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 1px;
}
body.cine[data-page="product"] .thumb:hover { opacity: .9; }
body.cine[data-page="product"] .thumb.current {
    opacity: 1;
    border-color: var(--brass);
    box-shadow: 0 0 0 1px var(--brass);
}
body.cine[data-page="product"] .pdp-gallery-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.9);
    color: var(--ink);
    box-shadow: 0 8px 28px rgba(10,22,38,.08);
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: transform .2s var(--ease), background .2s;
}
body.cine[data-page="product"] .pdp-gallery-arrow:hover { transform: scale(1.06); background: #fff; }
body.cine[data-page="product"] .pdp-gallery-arrow.prev { left: 18px; }
body.cine[data-page="product"] .pdp-gallery-arrow.next { right: 18px; }
body.cine[data-page="product"] .pdp-gallery-arrow svg {
    width: 22px; height: 22px; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
body.cine[data-page="product"] .pdp-gallery-count {
    position: absolute;
    right: 18px;
    bottom: 14px;
    margin: 0;
    padding: 3px 7px;
    color: var(--muted);
    background: rgba(255,255,255,.72);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .08em;
}
body.cine[data-page="product"] .pdp-gallery-dots { display: none; }

/* Purchase hierarchy. */
body.cine[data-page="product"] .product-buy {
    min-width: 0;
    display: grid;
    gap: clamp(18px, 2.3vh, 26px);
    align-content: start;
}
body.cine[data-page="product"] .pdp-title-block { display: grid; gap: 12px; }
body.cine[data-page="product"] .pdp-kicker {
    margin: 0;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--muted);
}
body.cine[data-page="product"] .pdp-title-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
body.cine[data-page="product"] .product-buy h1 {
    flex: 1;
    margin: 0;
    font-size: clamp(38px, 4vw, 58px);
    line-height: .98;
}
body.cine[data-page="product"] .pdp-title-row .wish-btn.inline {
    position: static;
    inset: auto;
    z-index: 1;
    width: 46px;
    height: 46px;
    min-width: 46px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: rgba(255,255,255,.82);
    color: var(--ink);
}
body.cine[data-page="product"] .pdp-title-row .wish-btn.inline:hover {
    background: #fff;
    border-color: var(--brass);
}
body.cine[data-page="product"] .pdp-title-row .wish-btn.inline[aria-pressed="true"] {
    color: var(--ember);
    border-color: rgba(180,112,58,.45);
}
body.cine[data-page="product"] .product-rating {
    width: max-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 13px;
}
body.cine[data-page="product"] .product-rating:hover .rating-count { color: var(--text); text-decoration: underline; }
body.cine[data-page="product"] .pdp-price-block { display: grid; gap: 10px; }
body.cine[data-page="product"] .product-price {
    display: flex;
    align-items: baseline;
    gap: 11px;
    flex-wrap: wrap;
    margin: 0;
}
body.cine[data-page="product"] .product-price strong {
    font-family: var(--serif);
    font-size: clamp(36px, 3.6vw, 50px);
    line-height: 1;
    font-weight: 400;
    color: var(--ink);
}
body.cine[data-page="product"] .pdp-from {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}
body.cine[data-page="product"] .product-price s { color: var(--muted); font-size: 14px; }
body.cine[data-page="product"] .save-tag {
    padding: 4px 9px;
    border-radius: 3px;
    background: rgba(196,161,89,.18);
    color: var(--brass-ink);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .02em;
}
body.cine[data-page="product"] .stock-line {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}
body.cine[data-page="product"] .stock-dot {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: #4c9a67;
    box-shadow: 0 0 0 3px rgba(76,154,103,.1);
}
body.cine[data-page="product"] .stock-line.is-out .stock-dot { background: var(--ember); box-shadow: none; }

/* Variants were previously unstyled. Each option is now a clear 44px target,
   with separate selected and unavailable states. */
body.cine[data-page="product"] .pv-pick {
    display: grid;
    gap: 15px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
body.cine[data-page="product"] .pv-axis {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
body.cine[data-page="product"] .pv-axis-name {
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
}
body.cine[data-page="product"] .pv-opts { display: flex; flex-wrap: wrap; gap: 8px; }
body.cine[data-page="product"] .pv-opt {
    min-width: 54px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255,255,255,.6);
    color: var(--text);
    font: 500 13px var(--sans);
    cursor: pointer;
    transition: color .2s, background .2s, border-color .2s, transform .2s;
}
body.cine[data-page="product"] .pv-opt:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-1px); }
body.cine[data-page="product"] .pv-opt.on {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--bone);
}
body.cine[data-page="product"] .pv-opt.pv-dead,
body.cine[data-page="product"] .pv-opt:disabled {
    opacity: .42;
    cursor: not-allowed;
    text-decoration: line-through;
}
body.cine[data-page="product"] .pv-sw {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sw, var(--sand));
    border: 1px solid rgba(10,22,38,.2);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.42);
}
body.cine[data-page="product"] .pv-state {
    min-height: 20px;
    margin: -2px 0 0;
    color: var(--muted);
    font-size: 12.5px;
}
body.cine[data-page="product"] .pv-state.is-error { color: var(--ember); }

/* Exactly one purchase group exists. JavaScript moves this same node into a
   phone dock only after its original slot has left the viewport. */
body.cine[data-page="product"] .pdp-actions-slot { min-width: 0; }
body.cine[data-page="product"] .buy-row {
    display: grid;
    grid-template-columns: auto minmax(130px, 1fr) minmax(130px, 1fr);
    align-items: end;
    gap: 11px;
    margin: 0;
}
body.cine[data-page="product"] .pdp-qty {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
body.cine[data-page="product"] .buy-row > .btn { width: 100%; height: 50px; padding-inline: 16px; white-space: nowrap; }
body.cine[data-page="product"] .qty-stepper { height: 50px; }
body.cine[data-page="product"] .qty-stepper button { width: 42px; height: 48px; }
body.cine[data-page="product"] .qty-stepper input {
    width: 42px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
body.cine[data-page="product"] .oos.big {
    display: grid;
    place-items: center;
    height: 52px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
}

body.cine[data-page="product"] .pdp-assurances {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
body.cine[data-page="product"] .pdp-assurances > * {
    min-width: 0;
    min-height: 72px;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.35;
}
body.cine[data-page="product"] .pdp-assurances > * + * { border-left: 1px solid var(--line); }
body.cine[data-page="product"] .pdp-assurances svg {
    width: 25px;
    height: 25px;
    flex: none;
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body.cine[data-page="product"] .pdp-assurances a:hover { color: var(--text); }

body.cine[data-page="product"] .buyers {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--muted);
    font-size: 12.5px;
}
body.cine[data-page="product"] .buyers summary { width: max-content; cursor: pointer; color: var(--muted); }
body.cine[data-page="product"] .buyers ul {
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 16px;
    list-style: none;
}
body.cine[data-page="product"] .buyers li { display: flex; align-items: center; gap: 7px; min-width: 0; }
body.cine[data-page="product"] .buyers time { color: var(--muted); }
body.cine[data-page="product"] .buyer-dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--brass);
}

/* One information DOM: tab-like on desktop, accordion-like below 1100px. */
body.cine[data-page="product"] .pdp-info {
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(12px, 2vw, 28px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 110px;
}
body.cine[data-page="product"] .pdp-info-item { display: contents; }
body.cine[data-page="product"] .pdp-info-radio {
    position: absolute;
    top: 24px;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
body.cine[data-page="product"] .pdp-info-toggle {
    grid-row: 1;
    min-width: 0;
    min-height: 66px;
    padding: 20px 10px 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-bottom: 1px solid transparent;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 14px;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
body.cine[data-page="product"] .pdp-info-item:nth-of-type(1) .pdp-info-toggle { grid-column: 1; }
body.cine[data-page="product"] .pdp-info-item:nth-of-type(2) .pdp-info-toggle { grid-column: 2; }
body.cine[data-page="product"] .pdp-info-item:nth-of-type(3) .pdp-info-toggle { grid-column: 3; }
body.cine[data-page="product"] .pdp-info-item:nth-of-type(4) .pdp-info-toggle { grid-column: 4; }
body.cine[data-page="product"] .pdp-info-toggle > svg,
body.cine[data-page="product"] .pdp-info-toggle > i { display: none; }
body.cine[data-page="product"] .pdp-info-radio:focus-visible + .pdp-info-toggle {
    outline: 2px solid var(--brass);
    outline-offset: -3px;
}
body.cine[data-page="product"] .pdp-info-radio:checked + .pdp-info-toggle {
    color: var(--ink);
    border-bottom-color: var(--brass);
}
body.cine[data-page="product"] .pdp-info-panel {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    padding: 28px 0 34px;
    color: var(--muted);
}
body.cine[data-page="product"] .pdp-info-radio:checked ~ .pdp-info-panel { display: block; }
body.cine[data-page="product"] .product-desc {
    max-width: 82ch;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}
body.cine[data-page="product"] .product-rich-text {
    width: min(860px, 100%);
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
}
body.cine[data-page="product"] .product-rich-text > :first-child { margin-top: 0; }
body.cine[data-page="product"] .product-rich-text > :last-child { margin-bottom: 0; }
body.cine[data-page="product"] .product-rich-text p,
body.cine[data-page="product"] .product-rich-text div { margin: 0 0 .8em; }
body.cine[data-page="product"] .product-rich-text h2,
body.cine[data-page="product"] .product-rich-text h3 {
    margin: .25em 0 .55em;
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 700;
    line-height: 1.3;
}
body.cine[data-page="product"] .product-rich-text h2 { font-size: clamp(20px, 2vw, 26px); }
body.cine[data-page="product"] .product-rich-text h3 { font-size: clamp(17px, 1.6vw, 21px); }
body.cine[data-page="product"] .product-rich-text strong,
body.cine[data-page="product"] .product-rich-text b { color: inherit; font-weight: 700; }
body.cine[data-page="product"] .product-rich-text em,
body.cine[data-page="product"] .product-rich-text i { font-style: italic; }
body.cine[data-page="product"] .product-rich-text u { text-underline-offset: 3px; }
body.cine[data-page="product"] .product-rich-text ul,
body.cine[data-page="product"] .product-rich-text ol { margin: .55em 0 .9em; padding-left: 1.4rem; }
body.cine[data-page="product"] .product-rich-text li + li { margin-top: .25em; }
body.cine[data-page="product"] .product-rich-text a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--brass);
    text-underline-offset: 3px;
}
body.cine[data-page="product"] .product-specs-rich {
    max-width: 82ch;
    color: var(--ink);
}
body.cine[data-page="product"] .product-specs-rich .product-spec-line {
    margin: 0;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    line-height: 1.55;
}
body.cine[data-page="product"] .product-specs-rich .product-spec-line:first-child { padding-top: 0; }
body.cine[data-page="product"] .product-specs-rich .product-spec-line > :first-child { margin-top: 0; }
body.cine[data-page="product"] .product-specs-rich .product-spec-line > :last-child { margin-bottom: 0; }
body.cine[data-page="product"] .pdp-info-empty,
body.cine[data-page="product"] .pdp-terms-note,
body.cine[data-page="product"] .pdp-review-summary { max-width: 76ch; margin: 0; font-size: 14px; }
body.cine[data-page="product"] .pdp-terms-note { margin-top: 14px; }
body.cine[data-page="product"] .pdp-terms-note a,
body.cine[data-page="product"] .pdp-review-summary a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

body.cine .review-item, body.cine .review-form, body.cine .comment-form, body.cine .comment-list > * {
    background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 20px;
}
body.cine .verified { color: var(--brass); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

@media (max-width: 1100px) {
    body.cine[data-page="product"] .product-layout {
        grid-template-columns: minmax(0, 1.02fr) minmax(340px, .98fr);
        gap: clamp(24px, 3.4vw, 38px);
    }
    body.cine[data-page="product"] .product-buy h1 { font-size: clamp(34px, 4.4vw, 48px); }

    body.cine[data-page="product"] .pdp-info {
        grid-column: 2;
        display: block;
        margin-top: 0;
        border-bottom: 0;
    }
    body.cine[data-page="product"] .pdp-info-item { position: relative; display: grid; grid-template-columns: 1fr; }
    body.cine[data-page="product"] .pdp-info-toggle {
        grid-column: auto !important;
        grid-row: auto;
        min-height: 62px;
        padding: 16px 2px;
        justify-content: flex-start;
        border-bottom: 1px solid var(--line);
        color: var(--text);
        font-family: var(--serif);
        font-size: 23px;
    }
    body.cine[data-page="product"] .pdp-info-toggle > svg {
        display: block;
        width: 22px;
        height: 22px;
        flex: none;
        fill: none;
        stroke: var(--ink);
        stroke-width: 1.45;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    body.cine[data-page="product"] .pdp-info-toggle > i {
        position: relative;
        width: 16px;
        height: 16px;
        margin-left: auto;
        display: block;
    }
    body.cine[data-page="product"] .pdp-info-toggle > i::before,
    body.cine[data-page="product"] .pdp-info-toggle > i::after {
        content: '';
        position: absolute;
        top: 7px;
        left: 2px;
        width: 12px;
        height: 1px;
        background: currentColor;
        transition: transform .2s var(--ease);
    }
    body.cine[data-page="product"] .pdp-info-toggle > i::after { transform: rotate(90deg); }
    body.cine[data-page="product"] .pdp-info-radio:checked + .pdp-info-toggle {
        border-bottom-color: var(--line);
    }
    body.cine[data-page="product"] .pdp-info-radio:checked + .pdp-info-toggle > i::after { transform: rotate(0); }
    body.cine[data-page="product"] .pdp-info-panel {
        grid-column: auto;
        grid-row: auto;
        padding: 18px 2px 24px;
        border-bottom: 1px solid var(--line);
    }
}

/* The first slice of landscape-tablet width has room for two columns overall,
   but not for quantity plus both purchase buttons on one line. */
@media (min-width: 901px) and (max-width: 980px) {
    body.cine[data-page="product"] .buy-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.cine[data-page="product"] .pdp-qty { grid-column: 1 / -1; width: max-content; }
}

/* Portrait tablets and iPads need a real single-column composition; squeezing
   a 340px purchase panel beside the gallery at 768–834px makes both illegible. */
@media (max-width: 900px) {
    body.cine[data-page="product"] .product-layout { grid-template-columns: 1fr; gap: 32px; }
    body.cine[data-page="product"] .pdp-info { grid-column: 1; }
}

@media (max-width: 700px) {
    body.cine[data-page="product"] { --pad: 16px; }
    body.cine[data-page="product"] main { padding-top: calc(88px + env(safe-area-inset-top)); }
    body.cine[data-page="product"] .site-header { padding-top: max(14px, env(safe-area-inset-top)); }
    body.cine[data-page="product"] .header-row {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    body.cine[data-page="product"] .pdp-head .container,
    body.cine[data-page="product"] .pdp-body .container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    body.cine[data-page="product"] .pdp-head { padding-top: 18px; padding-bottom: 16px; }
    body.cine[data-page="product"] .crumb-current-separator,
    body.cine[data-page="product"] .crumbs span[aria-current="page"] { display: none; }
    body.cine[data-page="product"] .product-layout { grid-template-columns: 1fr; gap: 28px; }
    body.cine[data-page="product"] .pdp-info { grid-column: 1; }
    body.cine[data-page="product"] .buy-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.cine[data-page="product"] .pdp-qty { grid-column: 1 / -1; width: max-content; }
    /* Payment and policy facts remain beside stock and inside Delivery & Warranty;
       hiding this repeated icon rail keeps the phone path focused. */
    body.cine[data-page="product"] .pdp-assurances { display: none; }
    /* Keep the bottom thumbnail rail available on phones too. */
    body.cine[data-page="product"] .pdp-gallery-arrow { width: 44px; height: 44px; margin-top: -22px; }
    body.cine[data-page="product"] .pdp-gallery-arrow.prev { left: 10px; }
    body.cine[data-page="product"] .pdp-gallery-arrow.next { right: 10px; }
    body.cine[data-page="product"] .pdp-gallery-count { display: none; }
    body.cine[data-page="product"] .product-buy { gap: 14px; }
    body.cine[data-page="product"] .product-buy h1 { font-size: clamp(28px, 7.2vw, 34px); line-height: 1.08; }
    body.cine[data-page="product"] .product-price strong { font-size: clamp(28px, 7.2vw, 34px); line-height: 1.1; }
    body.cine[data-page="product"] .pdp-title-row .wish-btn.inline { width: 44px; height: 44px; min-width: 44px; }
    body.cine[data-page="product"] .buyers ul { grid-template-columns: 1fr; }
    body.cine[data-page="product"] .pdp-info-toggle { font-size: 21px; }
}

@media (max-width: 620px) {
    body.cine[data-page="product"] .buy-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    body.cine[data-page="product"] .buy-row > .btn { height: 52px; padding-inline: 10px; font-size: 13.5px; }
    body.cine[data-page="product"] .buy-row.is-docked {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(64px + env(safe-area-inset-bottom));
        z-index: 390;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
        background: rgba(244,240,233,.96);
        border-top: 1px solid var(--line);
        box-shadow: 0 -12px 30px rgba(10,22,38,.08);
        backdrop-filter: blur(12px);
    }
    body.cine[data-page="product"] .buy-row.is-docked .pdp-qty { display: none; }
    body.cine[data-page="product"].pdp-actions-docked .toasts {
        bottom: calc(138px + env(safe-area-inset-bottom));
    }
    body.cine[data-page="product"] input,
    body.cine[data-page="product"] select,
    body.cine[data-page="product"] textarea { font-size: 16px; }
}

@media (max-width: 360px) {
    body.cine[data-page="product"] .product-buy h1 { font-size: 28px; }
    body.cine[data-page="product"] .pdp-title-row { gap: 10px; }
    body.cine[data-page="product"] .buy-row > .btn { font-size: 12.5px; }
}
/* ── shop filters ────────────────────────────────────────────────────────── */
body.cine .shop-layout { display: grid; grid-template-columns: 248px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
body.cine .filters { display: grid; gap: 18px; font-size: 14px; }
body.cine .filters h4,
body.cine .filter-more > summary {
    font-family: var(--sans); font-size: 11px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0; cursor: pointer;
}
body.cine .filter-more { border-top: 1px solid var(--line); padding-top: 14px; flex-basis: 100%; }
body.cine .filter-more[open] > summary { color: var(--text); }
body.cine .chips { display: flex; gap: 8px; flex-wrap: wrap; }
body.cine .chip {
    height: 38px; padding: 0 18px; border-radius: 4px; border: 1px solid var(--line);
    background: none; font-family: var(--sans); font-size: 13px; color: var(--text); cursor: pointer;
    display: inline-flex; align-items: center;
    transition: background .3s, color .3s, border-color .3s;
}
body.cine .chip:hover { border-color: var(--ink); }
body.cine .chip.active, body.cine .chip[aria-pressed="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ── forms ───────────────────────────────────────────────────────────────── */
body.cine .field > label,
body.cine .form-label {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 500;
}
body.cine input[type=text], body.cine input[type=email], body.cine input[type=password],
body.cine input[type=tel], body.cine input[type=number], body.cine input[type=search],
body.cine input[type=date], body.cine select, body.cine textarea {
    font-family: var(--sans); font-size: 15px; color: var(--text);
    background: #fff; border: 1px solid var(--line); border-radius: 2px;
    padding: 12px 14px;
    /* These sit INSIDE their label, so the uppercase eyebrow above would
       otherwise leak into whatever the customer types. */
    text-transform: none; letter-spacing: normal;
    transition: border-color .3s, box-shadow .3s;
}
/* Checkout wraps its inputs in the label rather than pairing them as siblings,
   so the eyebrow rule needs the selectors that are really in the markup, and the
   label needs a display of its own or the text and the field sit side by side. */
body.cine .co-fields > label:not(.check-inline),
body.cine .field-row label { display: grid; gap: 6px; }
body.cine .co-fields > label:not(.check-inline),
body.cine .field-row label,
body.cine .loc-body > label {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 500;
}
body.cine input:focus, body.cine select:focus, body.cine textarea:focus {
    outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(196, 161, 89, .18);
}
body.cine .panel, body.cine .card {
    background: #fff; border: 1px solid var(--line); border-radius: 3px; box-shadow: none;
}

/* ── toasts ──────────────────────────────────────────────────────────────── */
/* A plain rectangular notice, deliberately.
   This was a `border-radius: 999px` pill inside a `display: grid` rail with no
   track sizing, so a grid item stretches to the track — and the moment anything
   widened the rail, 999px clamped to 50% of the box and the notice rendered as
   an enormous ink CIRCLE over the page. Every constraint below exists to make
   that shape unreachable: the rail no longer stretches its children, the notice
   sizes to its own text, its width is capped, and the radius is small enough
   that it could never round into a circle even at full width. */
body.cine .toasts {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
    z-index: 500; display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: max-content; max-width: min(420px, calc(100vw - 32px));
}
body.cine .toast {
    background: var(--ink); color: var(--bone); padding: 12px 18px; border: 0;
    border-radius: 4px; font-size: 14px; line-height: 1.4; text-align: center;
    width: fit-content; max-width: 100%; aspect-ratio: auto;
    box-shadow: 0 12px 28px -14px rgba(10, 22, 38, .55);
}
body.cine .toast-error { background: var(--ember); }

/* ── footer ──────────────────────────────────────────────────────────────── */
body.cine .site-footer {
    --footer-line: rgba(244, 240, 233, .12);
    background: #171716; color: #bdbdb7; font-family: var(--sans);
    font-size: 15px; line-height: 1.6; padding: 0; border: 0; border-image: none;
}
body.cine .footer-intro { padding-block: clamp(40px, 6vw, 72px) 36px; text-align: center; }
body.cine .footer-brand { max-width: 520px; margin-inline: auto; }
body.cine .footer-brand .wordmark { display: inline-block; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.2; color: var(--bone); letter-spacing: .01em; }
body.cine .footer-brand .wordmark b { color: var(--brass); font-weight: 400; font-size: .45em; vertical-align: .85em; letter-spacing: .16em; margin-left: .3em; }
body.cine .footer-brand .footer-line {
    font-family: var(--serif); font-size: clamp(25px, 3vw, 32px); line-height: 1.25;
    color: var(--bone); margin: 12px 0 0; padding: 0;
}
body.cine .footer-line em { font-style: italic; color: var(--brass); }
body.cine .footer-brand .footer-description { font-size: inherit; margin: 16px auto 0; max-width: 46ch; }
body.cine .footer-grid {
    --footer-gap: clamp(18px, 2.5vw, 34px);
    display: grid; grid-template-columns: 1fr 1.2fr 1.5fr 1.15fr; gap: 0;
    align-items: stretch; padding: 0 var(--pad) 36px;
}
body.cine .footer-col { min-width: 0; align-self: stretch; padding-inline: var(--footer-gap); }
body.cine .footer-col:first-child { padding-left: 0; }
body.cine .footer-col:last-child { padding-right: 0; }
body.cine .footer-col + .footer-col { border-left: 1px solid var(--footer-line); }
body.cine .footer-col h4 {
    margin: 0 0 10px; font-family: var(--sans); font-size: 11px; line-height: 1.5;
    letter-spacing: .22em; text-transform: uppercase; color: var(--bone); font-weight: 600;
}
body.cine .footer-col h4::after {
    content: ''; display: block; width: 30px; height: 1px;
    background: var(--brass); margin-top: 12px;
}
body.cine .footer-col > a {
    display: flex; align-items: center; min-height: 44px; padding-block: 7px;
    margin: 0; color: inherit; font-size: inherit; font-weight: 400;
    line-height: 1.5; overflow-wrap: anywhere;
}
body.cine .footer-col address,
body.cine .footer-col span,
body.cine .footer-col strong { display: block; margin: 0; color: inherit; font-style: normal; font-weight: 400; }
body.cine .footer-col a:hover,
body.cine .footer-col a:focus-visible { color: var(--brass-lt); text-decoration: underline; text-underline-offset: 4px; }
body.cine .footer-branch { display: grid; gap: 5px; margin: 0; padding-top: 7px; }
body.cine .footer-branch + .footer-branch { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--footer-line); }
body.cine .footer-branch strong { color: var(--bone); font-size: 14px; font-weight: 500; line-height: 1.5; }
body.cine .footer-branch address { font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
body.cine .footer-branch span { margin-top: 3px; font-size: 12px; line-height: 1.6; opacity: 1; }
body.cine .site-footer .socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
body.cine .site-footer .socials a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 0; padding: 0;
    color: #c7c7c2; background: none; border: 0; border-radius: 0;
}
body.cine .site-footer .socials svg { width: 25px; height: 25px; }
body.cine .site-footer .socials a:hover,
body.cine .site-footer .socials a:focus-visible { color: var(--brass-lt); }
body.cine .footer-bar {
    border-top: 1px solid var(--footer-line); background: none; color: #989892;
    padding: 26px 0 calc(28px + env(safe-area-inset-bottom));
    font-size: 12px; line-height: 1.7; text-align: center;
}
body.cine .footer-bar > span { display: block; }
body.cine .footer-bar > span + span { margin-top: 4px; }

/* ── mobile tab bar ──────────────────────────────────────────────────────── */
body.cine .tabbar {
    background: var(--bone); border-top: 1px solid var(--line); box-shadow: none;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
body.cine .tabbar a { color: var(--muted); font-size: 10.5px; gap: 3px; padding: 6px 0; }
body.cine .tabbar a.active { color: var(--ink); }
body.cine .tabbar-bubble { background: none; box-shadow: none; width: auto; height: auto; transform: none; }
body.cine .tabbar-count {
    background: var(--brass); color: var(--ink); font-weight: 600;
    min-width: 16px; height: 16px; border-radius: 9px; font-size: 10px;
}

/* ── empty states ────────────────────────────────────────────────────────── */
body.cine .empty-state {
    display: grid; gap: 16px; justify-items: start;
    padding: clamp(30px, 6vh, 60px) 0; max-width: 44ch;
}
body.cine .empty-state h2 { margin: 0; font-size: clamp(28px, 4vw, 44px); }
body.cine .empty-state p { margin: 0; color: var(--muted); }

/* ── deferred painting: REMOVED, deliberately ────────────────────────────────
   These bands once carried `content-visibility: auto` with an estimated size.
   Their real height varies with inventory and viewport width, so restoring the
   estimate would risk shifting everything below them during a customer scroll.
   Layout stability wins for these compact, interactive sections.

   If this is ever reinstated, contain-intrinsic-size must be measured per band
   in a real browser, not estimated. */

/* ── motion: scroll-driven, transform/opacity only ───────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        body.cine.cine-anim .cine-enter,
        body.cine.cine-anim .reveal {
            animation: cineRise linear both;
            animation-timeline: view();
            animation-range: entry 8% cover 26%;
        }
        body.cine.cine-anim .cine-veil::after {
            content: ''; position: absolute; inset: 0; z-index: 3; background: var(--bone);
            transform-origin: bottom;
            animation: cineWipe linear both;
            animation-timeline: view();
            animation-range: entry 12% cover 34%;
        }
        body.cine.cine-anim .cine-feat .cine-veil::after { background: var(--ink); }
        body.cine.cine-anim .cine-drift img,
        body.cine.cine-anim .cine-drift > .cine-cta-stage {
            animation: cineDrift linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 100%;
        }
        body.cine.cine-anim .cine-hero-in {
            animation: cineHeroExit linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 100%;
        }
        body.cine.cine-anim .cine-rule {
            animation: cineRule linear both;
            animation-timeline: view();
            animation-range: entry 20% cover 30%;
        }
    }
    body.cine .cine-hero-stage { animation: cineAura 34s var(--ease) infinite alternate; }
    body.cine .cine-marq.run .cine-marq-track { animation: cineMarq 34s linear infinite; }
}

@keyframes cineRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes cineWipe { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes cineDrift { from { transform: scale(1.08) translateY(-2%); } to { transform: scale(1.08) translateY(2%); } }
@keyframes cineHeroExit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-14%); } }
@keyframes cineRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cineAura { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes cineMarq { to { transform: translateX(-50%); } }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    body.cine .grid-4, body.cine .grid.grid-4, body.cine .product-grid { grid-template-columns: repeat(3, 1fr); }
    body.cine .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    body.cine .footer-col:nth-child(odd) { padding-left: 0; border-left: 0; }
    body.cine .footer-col:nth-child(even) { padding-right: 0; }
    body.cine .footer-col:nth-child(n + 3) { border-top: 1px solid var(--footer-line); padding-top: 28px; }
    body.cine .cine-rev-grid { grid-template-columns: 1fr 1fr; }
    body.cine .shop-layout { grid-template-columns: 210px 1fr; }
    body.cine .cine-feat-card { flex-basis: calc((100% - 16px) / 2); }
}

@media (max-width: 820px) {
    body.cine .main-nav {
        display: none; position: absolute; inset: 100% 0 auto; margin: 0;
        flex-direction: column; gap: 0; padding: 12px max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left));
        background: var(--bone); color: var(--ink); border-top: 1px solid var(--line);
        box-shadow: 0 16px 24px -20px rgba(10, 22, 38, .4);
        max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); overflow-y: auto;
    }
    body.cine .main-nav.open { display: flex; }
    body.cine .main-nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 0; font-size: 16px; }
    body.cine .main-nav a::after { display: none; }
    body.cine .main-nav a.active { color: var(--brass-ink); font-weight: 600; }
    body.cine .main-nav .mobile-nav-link { display: flex; }
    body.cine .mobile-wish-count { font-size: 12px; color: var(--muted); }
    body.cine .site-header { padding: 14px 0; }
    body.cine:not([data-page="checkout"]) .site-header { color: var(--ink); padding-top: max(14px, env(safe-area-inset-top)); box-shadow: 0 1px 0 var(--line); }
    body.cine:not([data-page="checkout"]) .site-header::after { opacity: 1; }
    body.cine:not([data-page="checkout"]) .header-row {
        display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) 44px 44px;
        gap: 0; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
    }
    body.cine:not([data-page="checkout"]) .header-row > .brand {
        grid-column: 3; grid-row: 1; justify-self: center; justify-content: center;
        width: 100%; max-width: 132px; min-width: 0; min-height: 44px;
    }
    body.cine:not([data-page="checkout"]) .header-row .brand-logo-frame { width: 100%; }
    body.cine .header-row .nav-toggle {
        display: block; grid-column: 1; grid-row: 1; width: 44px; height: 44px; padding: 8px 11px; color: inherit;
    }
    body.cine .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    body.cine .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    body.cine .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    body.cine .header-actions { display: contents; }
    body.cine .header-actions .hdr-ic,
    body.cine .header-actions .cart-link { width: 44px; height: 44px; }
    body.cine .header-actions .hdr-ic svg,
    body.cine .header-actions .cart-link svg { width: 21px; height: 21px; }
    body.cine .header-actions #hdrSearch { grid-column: 2; grid-row: 1; }
    body.cine .header-actions .hdr-wishlist { display: none; }
    body.cine .header-actions .cart-link { display: grid; grid-column: 5; grid-row: 1; }
    body.cine .header-actions .hdr-account,
    body.cine .header-actions .account-menu { grid-column: 4; grid-row: 1; }
    body.cine .header-actions .account-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
    body.cine .header-actions .account-name { display: none; }
    body.cine .site-search { margin-top: 14px; }
    body.cine .site-search input { min-width: 0; font-size: 16px; }
    body.cine .site-search .btn { padding-inline: 18px; }
    body.cine { padding-bottom: 64px; }

    body.cine .cine-hero { height: 84vh; height: 84svh; min-height: 480px; }
    body.cine .cine-hero-in { gap: 18px; }
    body.cine .cine-cue { display: none; }

    body.cine .cine-s2-side { justify-self: start; }

    body.cine .cine-spot-grid { grid-template-columns: 1fr; }
    body.cine .cine-spot-frame {
        width: min(100%, 560px); height: auto; aspect-ratio: auto;
    }

    body.cine .grid-4, body.cine .grid.grid-4, body.cine .product-grid { grid-template-columns: repeat(2, 1fr); }

    body.cine .cine-cols-head { display: grid; align-items: start; }
    body.cine .cine-view-all { justify-self: start; }
    body.cine .cine-cols-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }
    body.cine .cine-col-row {
        grid-column: span 1; min-height: 0; aspect-ratio: 4 / 3;
    }
    body.cine .cine-col-row.is-lead {
        grid-column: 1 / -1; grid-row: auto; min-height: 0; aspect-ratio: 4 / 3;
    }

    body.cine .cine-rev-grid { grid-template-columns: 1fr; }

    body.cine .shop-layout { grid-template-columns: 1fr; }

    body.cine .qv { grid-template-columns: 1fr; }
    body.cine .qv > img { max-height: 34svh; }

    body.cine .toasts { bottom: calc(74px + env(safe-area-inset-bottom)); }
    /* Cart remains reachable in both the compact header and the thumb bar. */
}

@media (max-width: 620px) {
    body.cine .cine-cols,
    body.cine .cine-feat { padding-block: var(--wr-home-space, 56px); }
    body.cine .cine-cols-head { gap: 12px; margin-bottom: 22px; }
    body.cine .cine-cols-head h2,
    body.cine .cine-feat-head h2 { font-size: clamp(35px, 11vw, 48px); }
    body.cine .cine-cols-head p { margin-top: 8px; font-size: 14px; }
    body.cine .cine-col-row { border-radius: 10px; }
    body.cine .cine-col-name { inset: auto 14px 14px; font-size: clamp(20px, 7vw, 29px); }
    body.cine .cine-col-name svg { width: 21px; }

    body.cine .cine-feat-track {
        gap: 12px; margin-right: calc(var(--pad) * -1); padding-right: var(--pad);
    }
    body.cine .cine-feat-card { flex-basis: min(82vw, 340px); }
    body.cine .cine-feat-card-body { padding: 18px; }
    body.cine .cine-feat-card h3 { font-size: clamp(25px, 8vw, 34px); }
    body.cine .cine-feat-card-foot { align-items: flex-end; }
    body.cine .cine-price b { font-size: 20px; }
    body.cine .cine-feat-card .btn { min-height: 42px; padding-inline: 15px; }
    body.cine .cine-feat-controls { justify-content: flex-start; margin-top: 20px; }
    body.cine .cine-feat-progress { width: 100%; max-width: none; }
    body.cine .cine-feat-arrows { display: none; }
}

@media (min-width: 821px) {
    body.cine .qv { inset: 50% auto auto 50%; transform: translate(-50%, -50%); border-radius: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    body.cine *, body.cine *::before, body.cine *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    body.cine .cine-hero { height: auto; min-height: 0; padding: clamp(120px, 18vh, 200px) 0 clamp(60px, 9vh, 100px); }
}

/* ============================================================================
   COMPONENTS — the rest of the storefront in the V2 language.

   style.css supplies the base layout for these and is shared with /admin, so it
   stays. This is the theme layer on top of it, scoped the same way as
   everything above: nothing here can reach an admin screen.
   ============================================================================ */

/* ── shared small pieces ─────────────────────────────────────────────────── */
body.cine .pt-0 { padding-top: 0; }
body.cine .mt { margin-top: clamp(28px, 5vh, 56px); }
body.cine .narrow { max-width: 62ch; }
body.cine .muted, body.cine .muted-line, body.cine .optional { color: var(--muted); }
body.cine .stack { display: grid; gap: 16px; }
body.cine .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.cine .pill {
    display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
    border-radius: 4px; background: var(--bone-2); color: var(--text);
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
body.cine .check, body.cine .check-inline {
    display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px;
    color: var(--text); letter-spacing: 0; text-transform: none; font-weight: 400;
}
body.cine .check input, body.cine .check-inline input { accent-color: var(--brass); width: 16px; height: 16px; }
body.cine .divider {
    display: flex; align-items: center; gap: 14px; color: var(--muted);
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}
body.cine .divider::before, body.cine .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
body.cine .form-error {
    background: rgba(180, 112, 58, .1); border-left: 2px solid var(--ember);
    color: var(--text); padding: 12px 16px; font-size: 14px; border-radius: 0;
}
body.cine .account-menu { position: relative; }
body.cine .account-name { font-size: 13px; }
body.cine .legal { max-width: 68ch; }
body.cine .legal h2 { font-size: clamp(22px, 3vw, 32px); margin: clamp(30px, 5vh, 48px) 0 12px; }
body.cine .legal p, body.cine .legal li { color: var(--muted); font-size: 15px; }

/* ── stars ───────────────────────────────────────────────────────────────── */
body.cine .stars { display: inline-flex; align-items: center; gap: 2px; color: var(--line); }
body.cine .star { width: 14px; height: 14px; fill: currentColor; }
body.cine .star-fill { color: var(--brass); }
body.cine .rating-count { color: var(--muted); font-size: 13px; margin-left: 6px; }

/* ── shop — calm navy + muted gold, taken from the official mark ───────── */
body.cine[data-page="shop"] {
    --shop-navy: #092b57;
    --shop-navy-soft: #21436a;
    --shop-gold: #d5a92f;
    --shop-ivory: #f8f5ee;
    --shop-line: rgba(9, 43, 87, .13);
    background: var(--shop-ivory);
}
body.cine[data-page="shop"] .site-header::after { background: rgba(248, 245, 238, .96); }
body.cine[data-page="shop"] .site-header { box-shadow: 0 1px 0 var(--shop-line); }
body.cine[data-page="shop"] .main-nav a.active::after { background: var(--shop-gold); }
body.cine[data-page="shop"] .page-head {
    padding-top: clamp(28px, 5vh, 54px);
    padding-bottom: clamp(28px, 5vh, 48px);
    background:
        radial-gradient(circle at 86% 22%, rgba(213, 169, 47, .11), transparent 25%),
        linear-gradient(180deg, rgba(255, 255, 255, .45), transparent);
}
body.cine[data-page="shop"] .page-head .container { gap: 10px; }
body.cine[data-page="shop"] .page-head h1 {
    color: var(--shop-navy);
    font-size: clamp(48px, 7vw, 86px);
}
body.cine[data-page="shop"] .page-head .cine-eyebrow { color: var(--brass-ink); }
body.cine[data-page="shop"] .page-head .page-sub { max-width: 58ch; color: var(--shop-navy-soft); }
body.cine[data-page="shop"] .section.pt-0 { padding-bottom: clamp(80px, 12vh, 130px); }

body.cine[data-page="shop"] .shop-toolbar {
    position: relative; display: grid; gap: 18px; margin: 0 0 22px;
}
body.cine[data-page="shop"] .shop-toolbar-primary {
    display: grid; grid-template-columns: minmax(260px, 1fr) 190px 190px auto;
    gap: 10px; align-items: center;
}
body.cine[data-page="shop"] .search-box { position: relative; display: flex; align-items: center; min-width: 0; }
body.cine[data-page="shop"] .search-box svg { position: absolute; left: 16px; color: var(--shop-navy-soft); pointer-events: none; }
body.cine[data-page="shop"] .search-box input { width: 100%; padding-left: 44px; }
body.cine[data-page="shop"] .shop-toolbar input,
body.cine[data-page="shop"] .shop-toolbar select {
    height: 50px; border: 1px solid var(--shop-line); border-radius: 12px;
    background-color: #fff; color: var(--shop-navy);
}
body.cine[data-page="shop"] .shop-toolbar-primary input,
body.cine[data-page="shop"] .shop-toolbar-primary select { width: 100%; min-width: 0; border-radius: 999px; }
body.cine[data-page="shop"] .shop-toolbar .btn {
    background: var(--shop-gold); color: var(--shop-navy); font-weight: 600;
    box-shadow: none;
}
body.cine[data-page="shop"] .shop-toolbar .btn:hover { background: #e0b83f; box-shadow: 0 12px 26px -18px rgba(9, 43, 87, .65); }
body.cine[data-page="shop"] .shop-toolbar-primary .btn::after { content: '\2192'; font-size: 18px; line-height: 1; }

body.cine[data-page="shop"] .shop-categories { display: flex; flex-wrap: wrap; gap: 8px; }
body.cine[data-page="shop"] .shop-category {
    display: inline-flex; align-items: center; min-height: 38px; padding: 7px 15px;
    border: 1px solid var(--shop-line); border-radius: 4px; background: #fff;
    color: var(--shop-navy-soft); font-size: 12.5px; font-weight: 500;
    transition: color .25s, background .25s, border-color .25s, transform .25s;
}
body.cine[data-page="shop"] .shop-category:hover { border-color: rgba(9, 43, 87, .38); transform: translateY(-1px); }
body.cine[data-page="shop"] .shop-category.active {
    background: var(--shop-gold); border-color: var(--shop-gold); color: var(--shop-navy);
}

body.cine[data-page="shop"] .shop-filter-line {
    display: flex; align-items: center; gap: 22px; min-height: 52px;
    padding-top: 14px; border-top: 1px solid var(--shop-line);
}
body.cine[data-page="shop"] .filter-more { position: relative; width: max-content; }
body.cine[data-page="shop"] .filter-more summary {
    list-style: none; display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 7px 0; border: 0; background: transparent; color: var(--shop-navy);
    font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
}
body.cine[data-page="shop"] .filter-more summary::-webkit-details-marker { display: none; }
body.cine[data-page="shop"] .filter-more summary::before {
    content: ''; width: 18px; height: 18px; flex: none;
    background: linear-gradient(var(--shop-navy), var(--shop-navy)) 2px 4px/14px 1.5px no-repeat,
                linear-gradient(var(--shop-navy), var(--shop-navy)) 2px 9px/14px 1.5px no-repeat,
                linear-gradient(var(--shop-navy), var(--shop-navy)) 2px 14px/14px 1.5px no-repeat;
    opacity: .9;
}
body.cine[data-page="shop"] .filter-panel {
    position: absolute; z-index: 20; top: calc(100% + 9px); left: 0;
    width: min(720px, calc(100vw - var(--pad) - var(--pad)));
    padding: 18px; border: 1px solid var(--shop-line); border-radius: 14px;
    background: #fff; box-shadow: 0 24px 54px -28px rgba(9, 43, 87, .45);
}
body.cine[data-page="shop"] .filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
body.cine[data-page="shop"] .filter-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--shop-navy-soft); }
body.cine[data-page="shop"] .filter-dash { color: var(--muted); }
body.cine[data-page="shop"] .filter-row input[type=number] { width: 110px; }
body.cine[data-page="shop"] .filter-row select { width: auto; min-width: 146px; }
body.cine[data-page="shop"] .filter-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 16px; }
body.cine[data-page="shop"] .filter-actions > a { color: var(--shop-navy-soft); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
body.cine[data-page="shop"] .filter-actions .btn { height: 42px; }

body.cine[data-page="shop"] .result-line {
    display: flex; align-items: center; gap: 14px; padding-left: 22px;
    border-left: 1px solid var(--shop-line); color: var(--muted); font-size: 13px; margin: 0;
}
body.cine[data-page="shop"] .result-line p { margin: 0; }
body.cine[data-page="shop"] .result-line strong { color: var(--shop-navy); }
body.cine[data-page="shop"] .result-line > a { color: var(--shop-navy); text-decoration: underline; text-underline-offset: 3px; }

body.cine[data-page="shop"] .shop-grid { gap: clamp(12px, 1.7vw, 24px); }
body.cine[data-page="shop"] .pcard {
    position: relative; border: 1px solid var(--shop-line); border-radius: 10px;
    background: rgba(255, 255, 255, .9); box-shadow: 0 18px 42px -38px rgba(9, 43, 87, .55);
}
body.cine[data-page="shop"] .pcard:hover { transform: translateY(-4px); border-color: rgba(213, 169, 47, .7); box-shadow: 0 24px 48px -32px rgba(9, 43, 87, .35); }
body.cine[data-page="shop"] .pcard-media { background: #fff; }
body.cine[data-page="shop"] .pcard-media img { object-fit: contain; padding: 0; }
body.cine[data-page="shop"] .pcard-body { padding: 16px 16px 18px; gap: 8px; }
body.cine[data-page="shop"] .pcard-name a { color: var(--shop-navy); transition: color .25s; }
body.cine[data-page="shop"] .pcard-name a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
body.cine[data-page="shop"] .pcard:hover .pcard-name a { color: var(--brass-ink); }
body.cine[data-page="shop"] .pcard-star.new { color: var(--brass-ink); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
body.cine[data-page="shop"] .pcard-price { min-height: 34px; }
body.cine[data-page="shop"] .pcard-price strong { color: var(--shop-navy); }
body.cine[data-page="shop"] .wish-btn { z-index: 5; background: rgba(255, 255, 255, .94); box-shadow: 0 5px 18px rgba(9, 43, 87, .08); }
body.cine[data-page="shop"] .wish-btn svg { stroke: var(--shop-navy); }
body.cine[data-page="shop"] .empty-state { border: 1px solid var(--shop-line); border-radius: 16px; background: #fff; }

@media (max-width: 1180px) {
    body.cine[data-page="shop"] .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    body.cine[data-page="shop"] .shop-toolbar-primary { grid-template-columns: 1fr 1fr; }
    body.cine[data-page="shop"] .shop-toolbar-primary .search-box,
    body.cine[data-page="shop"] .shop-toolbar-primary .btn { grid-column: 1 / -1; }
    body.cine[data-page="shop"] .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    body.cine[data-page="shop"] main { padding-top: calc(72px + env(safe-area-inset-top)); }
    body.cine[data-page="shop"] .page-head { padding-top: 24px; padding-bottom: 22px; }
    body.cine[data-page="shop"] .page-head h1 { font-size: clamp(36px, 9.8vw, 46px); line-height: 1.04; max-width: 18ch; }
    body.cine[data-page="shop"] .page-head .page-sub { font-size: 14px; line-height: 1.6; max-width: 40ch; }
    body.cine[data-page="shop"] .shop-toolbar { gap: 12px; margin-bottom: 18px; }
    body.cine[data-page="shop"] .shop-toolbar-primary {
        grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
        grid-template-areas: 'search search search search submit submit' 'category category category sort sort sort';
    }
    body.cine[data-page="shop"] .shop-toolbar-primary .search-box { grid-area: search; }
    body.cine[data-page="shop"] .shop-toolbar-primary select[name="category"] { grid-area: category; }
    body.cine[data-page="shop"] .shop-toolbar-primary select[name="sort"] { grid-area: sort; }
    body.cine[data-page="shop"] .shop-toolbar-primary .btn { grid-area: submit; height: 46px; padding: 0 12px; font-size: 13px; border-radius: 12px; }
    body.cine[data-page="shop"] .shop-toolbar-primary .btn::after { display: none; }
    body.cine[data-page="shop"] .shop-toolbar input,
    body.cine[data-page="shop"] .shop-toolbar select { height: 46px; font-size: 16px; border-radius: 12px; }
    body.cine[data-page="shop"] .shop-toolbar-primary select { padding-left: 12px; padding-right: 28px; }
    body.cine[data-page="shop"] .shop-categories {
        flex-wrap: nowrap; overflow-x: auto; min-width: 0; margin: 0; padding: 0 0 2px;
        scrollbar-width: thin; scroll-padding-inline: 2px;
    }
    body.cine[data-page="shop"] .shop-category { flex: none; white-space: nowrap; min-height: 44px; padding: 8px 13px; }
    body.cine[data-page="shop"] .shop-filter-line { gap: 16px; padding-top: 8px; min-height: 52px; }
    body.cine[data-page="shop"] .filter-more { flex: 0 0 auto; width: auto; border: 0; padding: 0; }
    body.cine[data-page="shop"] .filter-more summary { min-height: 44px; letter-spacing: .12em; }
    body.cine[data-page="shop"] .result-line { flex: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; padding: 0; border: 0; text-align: right; font-size: 12px; overflow-wrap: anywhere; }
    body.cine[data-page="shop"] .result-line > a { min-height: 44px; display: inline-flex; align-items: center; }
    body.cine[data-page="shop"] .filter-panel { padding: 14px; }
    body.cine[data-page="shop"] .filter-row input[type=number] { flex: 1 1 100px; width: auto; }
    body.cine[data-page="shop"] .filter-row select { flex: 1 1 100%; width: 100%; }
    body.cine[data-page="shop"] .filter-label { flex-basis: 100%; }
    body.cine[data-page="shop"] .shop-grid { gap: 10px; }
    body.cine[data-page="shop"] .pcard { border-radius: 9px; }
    body.cine[data-page="shop"] .pcard-body { padding: 12px; }
    body.cine[data-page="shop"] .pcard-name { font-size: 13px; }
    body.cine[data-page="shop"] .pcard-price strong { font-size: 17px; }
    body.cine[data-page="shop"] .wish-btn { top: 4px; right: 4px; width: 44px; height: 44px; }
}

/* ── cart ────────────────────────────────────────────────────────────────── */
body.cine .cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: clamp(24px, 4vw, 48px); align-items: start; }
body.cine .cart-toolbar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
body.cine .cart-toolbar input[type=search] { flex: 1 1 200px; border-radius: 999px; }
body.cine .cart-toolbar select { width: auto; min-width: 168px; border-radius: 999px; }
body.cine .cart-row {
    display: grid; grid-template-columns: auto 96px 1fr auto auto auto;
    gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line);
}
/* Declared AFTER .cart-row so it wins the tie: a bundle is one card beside its
   checkbox, not six columns of solo-line fields. */
body.cine .cart-row.cart-bundle-row {
    grid-template-columns: auto minmax(0, 1fr); align-items: start;
}
/* SQUARE and `contain`, not a 96x72 `cover` crop. A bed photographed wide and a
   side table photographed tall cannot share a 4:3 box without one of them losing
   its edges — cover was cutting the product out of its own picture. contain fits
   the whole thing; the padding stops it touching the border. */
body.cine .cart-thumb img {
    width: 96px; height: 96px; object-fit: contain; padding: 6px;
    border-radius: 4px; background: #fff; border: 1px solid rgba(10, 22, 38, .08);
}
body.cine .cart-info { display: grid; gap: 4px; min-width: 0; }
body.cine .cart-name { font-size: 15px; font-weight: 500; color: var(--text); }
body.cine .cart-cat { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
body.cine .cart-unit { font-size: 12.5px; color: var(--muted); }
body.cine .cart-line { font-family: var(--serif); font-size: 20px; color: var(--ink); white-space: nowrap; }
body.cine .row-remove {
    width: 34px; height: 34px; border: 0; background: none; border-radius: 4px;
    color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: color .3s, background .3s;
}
body.cine .row-remove:hover { color: var(--ember); background: var(--bone-2); }
body.cine .empty-filter { color: var(--muted); padding-top: 22px; }

body.cine .cart-summary {
    background: #fff; border: 1px solid var(--line); border-radius: 3px;
    padding: 24px; display: grid; gap: 14px; position: sticky; top: 108px;
}
body.cine .cart-summary h2 { margin: 0; font-size: 26px; }
body.cine .sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--muted); }
body.cine .sum-row strong { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); }
body.cine .sum-note { margin: 0; font-size: 12.5px; color: var(--muted); }

/* ── checkout (§19: no scroll motion here — clarity beats cinema) ────────── */
body.cine .co-layout { display: grid; grid-template-columns: 1fr 380px; gap: clamp(24px, 4vw, 48px); align-items: start; }
body.cine .co-main { display: grid; gap: 18px; }
body.cine .co-lead { color: var(--muted); font-size: 15px; margin: 0; }
body.cine .co-card { background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 24px; display: grid; gap: 16px; }
body.cine .co-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
body.cine .co-card-head h2, body.cine .co-head { margin: 0; font-size: 24px; }
body.cine .co-steps { counter-reset: costep; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
body.cine .co-steps > li { counter-increment: costep; position: relative; padding-left: 40px; }
body.cine .co-steps > li::before {
    content: counter(costep); position: absolute; left: 0; top: 0;
    width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--bone);
    display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
body.cine .co-fields { display: grid; gap: 14px; }
body.cine .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body.cine .co-items { display: grid; gap: 14px; }
body.cine .co-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; }
body.cine .co-item-img { width: 64px; height: 64px; object-fit: contain; border-radius: 4px; background: #fff; }
body.cine .co-item-text { display: grid; gap: 2px; font-size: 14px; min-width: 0; }
body.cine .co-item-sum { font-family: var(--serif); font-size: 17px; color: var(--ink); white-space: nowrap; }
body.cine .co-totals { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
body.cine .co-totals > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
body.cine .co-grand { padding-top: 12px; border-top: 1px solid var(--line); }
body.cine .co-grand strong, body.cine .place-total { font-family: var(--serif); font-size: clamp(24px, 3vw, 32px); font-weight: 400; color: var(--ink); }
body.cine .co-free { color: #4E9C74; }
body.cine .co-zone, body.cine .co-fineprint, body.cine .co-secure, body.cine .co-note { font-size: 12.5px; color: var(--muted); }
body.cine .co-ship-warn { font-size: 13px; color: var(--ember); }
body.cine .co-saved { display: grid; gap: 4px; padding: 16px; background: var(--bone); border-radius: 2px; font-size: 14px; }
body.cine .co-saved-name { font-weight: 500; }
body.cine .co-saved-tag { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); }
body.cine .co-change { font-size: 13px; color: var(--muted); text-decoration: underline; background: none; border: 0; cursor: pointer; padding: 0; }
body.cine .co-pinned { display: flex; align-items: center; gap: 8px; font-size: 13px; }
body.cine .co-pin-dot { width: 7px; height: 7px; border-radius: 50%; background: #5FBE8A; }
body.cine .co-pinned.muted .co-pin-dot { background: var(--sand); }
body.cine .co-summary { position: sticky; top: 108px; display: grid; gap: 16px; }

body.cine .pay-methods { display: grid; gap: 10px; }
body.cine .pay-option {
    display: grid; grid-template-columns: auto auto 1fr; gap: 14px; align-items: center;
    padding: 16px; border: 1px solid var(--line); border-radius: 3px; cursor: pointer;
    transition: border-color .3s, background .3s;
}
body.cine .pay-option:hover { border-color: var(--sand); }
body.cine .pay-option.selected { border-color: var(--ink); background: var(--bone); }
body.cine .pay-radio { accent-color: var(--brass); width: 17px; height: 17px; }
body.cine .pay-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); }
body.cine .pay-text { display: grid; gap: 3px; font-size: 14px; }
body.cine .pay-tags { display: flex; gap: 6px; flex-wrap: wrap; }
body.cine .pay-tag { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
body.cine .place-btn { width: 100%; }

/* The real markup is a native <dialog class="loc-modal"> whose DIRECT children are
   .loc-head and .loc-body — there is no wrapper card. A `> div` here caught
   .loc-head, painted it bone, and left style.css's color:#fff on the title, which
   is why the heading rendered white on bone. The dialog itself is the card and
   ::backdrop carries the dim; a native dialog never needs a hand-built overlay. */
body.cine .loc-modal {
    background: var(--bone); border: 0; border-radius: 3px; padding: 0;
    width: min(680px, calc(100vw - 40px)); max-height: min(88svh, 900px); overflow: hidden;
    box-shadow: 0 26px 50px -30px rgba(10, 22, 38, .55), 0 40px 90px -40px rgba(10, 22, 38, .45);
}
/* style.css already makes this dialog full-screen under 620px, but that rule is
   a bare `.loc-modal` inside a media query and loses to the `body.cine` selector
   above at every width — so phones got the desktop box, the action bar sat on
   top of the City field, and the form below it could not be reached. Restated
   here, inside the same breakpoint, at a specificity that wins.
   dvh, not svh: svh is the SMALLEST viewport height, so with the browser bars
   retracted the dialog stopped short of the screen and the gap under it was a
   dead strip that swallowed taps. */
@media (max-width: 620px) {
    body.cine .loc-modal {
        width: 100%; max-width: none; height: 100%; max-height: 100dvh;
        border-radius: 0; margin: 0; inset: 0;
    }
    /* The action bar is the one thing that must never scroll away. */
    body.cine .loc-foot {
        position: sticky; bottom: 0; flex-direction: column; align-items: stretch;
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }
    body.cine .loc-buttons { display: flex; gap: 10px; }
    body.cine .loc-buttons .btn { flex: 1; min-height: 48px; }
    /* Touch targets: 44px is the floor a finger can hit reliably. */
    body.cine .loc-body input, body.cine .loc-body select, body.cine .loc-body textarea { min-height: 48px; font-size: 16px; }
    body.cine .loc-x { width: 44px; height: 44px; }
}
/* The dialog is the top layer; nothing on the page may sit over it. The mobile
   tab bar sits at z-index 60 and was rendering above the dimmed backdrop, which
   is why a strip at the bottom of the screen still belonged to the page. The
   tab bar is not a sibling of the dialog, so this hangs off a body class the
   open/close code sets, not off DOM order. */
body.loc-open .tabbar { display: none; }
/* Nothing behind the dialog should scroll while it is open. */
body.loc-open { overflow: hidden; }
body.cine .loc-modal::backdrop { background: rgba(6, 15, 27, .72); }
body.cine .loc-body { background: var(--bone); }
/* Background and colour move together, or the next override splits them again. */
body.cine .loc-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 18px 24px; background: var(--ink); color: var(--bone);
    border-bottom: 1px solid var(--brass);
}
body.cine .loc-head strong { font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: .01em; }
body.cine .loc-x { width: 36px; height: 36px; border: 0; background: none; border-radius: 4px; cursor: pointer; color: rgba(244, 240, 233, .8); }
body.cine .loc-x:hover { background: rgba(244, 240, 233, .16); color: var(--bone); }
body.cine .loc-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; border-top: 1px solid var(--line); }
body.cine .loc-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
body.cine .loc-quote { font-size: 13px; color: var(--muted); }

/* ── map picker (checkout + profile) ─────────────────────────────────────── */
body.cine .map-picker { display: grid; gap: 12px; }
body.cine .map-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body.cine .map-picker-head h3 { margin: 0; font-size: 20px; }
body.cine .map-canvas { height: 280px; border-radius: 2px; overflow: hidden; background: var(--bone-2); }
/* touch-action: pan-y lets a vertical swipe scroll the dialog even when it
   starts on the map, which is the difference between a usable form and a
   trapped one. */
body.cine .map-canvas.map-two-finger { touch-action: pan-y; }
@media (max-width: 620px) { body.cine .map-canvas { height: 220px; } }
body.cine .map-search { display: flex; gap: 8px; }
body.cine .map-search input { flex: 1; border-radius: 999px; }
body.cine .map-picker-btns { display: flex; gap: 8px; flex-wrap: wrap; }
body.cine .map-status, body.cine .map-foot { font-size: 12.5px; color: var(--muted); }
body.cine .map-gaps { display: grid; gap: 12px; }

/* ── orders + tracker ────────────────────────────────────────────────────── */
body.cine .order-card { background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 24px; display: grid; gap: 18px; margin-bottom: 16px; }
body.cine .order-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px; }
body.cine .order-head h2 { margin: 0; font-size: 24px; }
body.cine .status-badge {
    font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 999px; background: var(--bone-2); color: var(--text);
}
body.cine .status-badge.s-delivered { background: #E4F0E9; color: #2F6B4C; }
body.cine .status-badge.s-cancelled { background: rgba(180, 112, 58, .14); color: var(--ember); }
body.cine .tracker { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; overflow-x: auto; }
body.cine .tracker li { flex: 1; min-width: 92px; display: grid; gap: 8px; justify-items: center; text-align: center; position: relative; }
body.cine .tracker li::before {
    content: ''; position: absolute; top: 6px; left: -50%; width: 100%; height: 1px; background: var(--line);
}
body.cine .tracker li:first-child::before { display: none; }
body.cine .tracker .dot { width: 13px; height: 13px; border-radius: 50%; background: var(--bone-2); position: relative; z-index: 1; }
body.cine .tracker li.done .dot { background: var(--brass); }
body.cine .tracker li.now .dot { background: var(--ink); box-shadow: 0 0 0 4px rgba(10, 22, 38, .12); }
body.cine .tracker li.done::before, body.cine .tracker li.now::before { background: var(--brass); }
body.cine .step-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
body.cine .tracker li.now .step-label { color: var(--ink); }
body.cine .order-items { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
body.cine .order-item { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; color: var(--muted); }
body.cine .order-item.total { padding-top: 12px; border-top: 1px solid var(--line); color: var(--text); }
body.cine .order-item.total strong { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); }
body.cine .pay-chip { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--bone-2); color: var(--muted); }
body.cine .pay-chip.paid { background: #E4F0E9; color: #2F6B4C; }
body.cine .pay-chip.failed { background: rgba(180, 112, 58, .14); color: var(--ember); }
body.cine .pay-line, body.cine .cancel-line { font-size: 13px; color: var(--muted); }
body.cine .pay-instructions, body.cine .received-box { background: var(--bone); border-radius: 2px; padding: 16px; font-size: 14px; }
body.cine .placed-banner {
    background: var(--ink); color: var(--bone); border-radius: 3px;
    padding: clamp(24px, 4vw, 40px); display: grid; gap: 10px; margin-bottom: 22px;
}
body.cine .placed-banner h2 { color: var(--bone); margin: 0; font-size: clamp(28px, 4vw, 44px); }
body.cine .placed-banner p { margin: 0; color: rgba(244, 240, 233, .75); }

/* ── profile ─────────────────────────────────────────────────────────────── */
body.cine .profile-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
body.cine .profile-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.cine[data-page="profile"] .profile-head { padding-block: clamp(28px, 5vw, 56px) 26px; }
body.cine[data-page="profile"] .profile-head h1 { margin: 8px 0 12px; font-size: clamp(38px, 5vw, 58px); line-height: 1.1; }
body.cine[data-page="profile"] .profile-intro { margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.6; }
body.cine[data-page="profile"] .account-nav { display: flex; flex-wrap: wrap; gap: 8px; }
body.cine[data-page="profile"] .account-nav a { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 22px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); font-size: 14px; }
body.cine[data-page="profile"] .account-nav a.on { color: var(--bone); background: var(--ink); border-color: var(--ink); }
body.cine[data-page="profile"] .account-nav a:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
body.cine[data-page="profile"] .profile-content { padding-block: 0 64px; }
body.cine[data-page="profile"] .profile-grid > *,
body.cine[data-page="profile"] .profile-card,
body.cine[data-page="profile"] .profile-card :is(label, .field-row, .map-picker, .map-search, .map-picker-head, .map-foot) { min-width: 0; max-width: 100%; }
body.cine[data-page="profile"] .profile-side { display: grid; gap: 24px; }
body.cine[data-page="profile"] .profile-card { padding: clamp(20px, 2.5vw, 30px); gap: 16px; border-radius: 6px; }
body.cine[data-page="profile"] .profile-card h2 { margin: 0; font-size: 28px; line-height: 1.15; }
body.cine[data-page="profile"] .profile-card p { margin: 0; }
body.cine[data-page="profile"] .profile-card .muted-line { font-size: 14px; line-height: 1.6; color: var(--muted); }
body.cine[data-page="profile"] .profile-card .optional { font-size: 12px; line-height: 1.6; }
body.cine[data-page="profile"] .profile-contact-fields,
body.cine[data-page="profile"] .profile-address-fields { display: grid; gap: 16px; min-width: 0; }
body.cine[data-page="profile"] .profile-address-fields { margin: 12px 0 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--line); }
body.cine[data-page="profile"] .profile-address-fields legend { padding: 0 12px 0 0; font: 600 16px var(--sans); color: var(--ink); }
body.cine[data-page="profile"] .profile-card label { display: grid; gap: 7px; font: 500 14px var(--sans); text-transform: none; letter-spacing: normal; color: var(--ink); }
body.cine[data-page="profile"] .profile-card input:not([type="hidden"]) { width: 100%; min-width: 0; min-height: 46px; font-size: 16px; border-radius: 4px; }
body.cine[data-page="profile"] .profile-card .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.cine[data-page="profile"] .profile-card .field-row .narrow { max-width: 180px; }
body.cine[data-page="profile"] .profile-card .btn { min-height: 44px; height: auto; padding: 12px 18px; border-radius: 4px; white-space: normal; text-align: center; }
body.cine[data-page="profile"] .profile-card .map-picker-head { display: grid; gap: 12px; }
body.cine[data-page="profile"] .profile-card .map-picker-head strong { font-size: 14px; }
body.cine[data-page="profile"] .profile-card .map-picker-head .optional { display: block; margin-top: 4px; }
body.cine[data-page="profile"] .profile-card .map-picker-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.cine[data-page="profile"] .profile-card .map-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
body.cine[data-page="profile"] .profile-card .map-foot { flex-wrap: wrap; overflow-wrap: anywhere; }
body.cine[data-page="profile"] .profile-card .ship-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body.cine[data-page="profile"] .profile-card .ship-preview-tag { display: block; margin-bottom: 6px; font: 500 11px var(--sans); letter-spacing: .04em; }
body.cine[data-page="profile"] .profile-card .ship-preview strong { font: 600 17px var(--sans); overflow-wrap: anywhere; }
body.cine[data-page="profile"] .profile-card .mini-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding-block: 14px; align-items: center; }
body.cine[data-page="profile"] .mini-order > div { grid-row: 1 / span 2; min-width: 0; }
body.cine[data-page="profile"] .mini-order > div strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
body.cine[data-page="profile"] .mini-order > strong { grid-column: 2; font: 600 14px var(--sans); text-align: right; }
body.cine[data-page="profile"] .mini-order .status-badge { font-size: 11px; justify-self: end; white-space: normal; text-align: right; }
@media (max-width: 820px) {
    body.cine[data-page="profile"] .profile-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    body.cine[data-page="profile"] .profile-side { gap: 20px; }
    body.cine[data-page="profile"] .account-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    body.cine[data-page="profile"] .account-nav a { padding-inline: 8px; font-size: 13px; }
    body.cine[data-page="profile"] .profile-card .field-row { grid-template-columns: minmax(0, 1fr); }
    body.cine[data-page="profile"] .profile-card .field-row .narrow { max-width: none; }
    body.cine[data-page="profile"] .profile-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    body.cine[data-page="profile"] .profile-card > .btn { width: 100%; }
}
@media (max-width: 380px) {
    body.cine[data-page="profile"] .profile-card .map-picker-btns,
    body.cine[data-page="profile"] .profile-card .ship-preview { grid-template-columns: minmax(0, 1fr); }
}
body.cine .ship-preview { background: var(--bone); border-radius: 2px; padding: 16px; display: grid; gap: 6px; }
body.cine .ship-preview-tag { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); }
body.cine .ship-preview-fee { font-family: var(--serif); font-size: 26px; color: var(--ink); }
body.cine .ship-preview-note { font-size: 12.5px; color: var(--muted); }

/* ── auth ────────────────────────────────────────────────────────────────── */
body.cine .auth-section { padding: 0; }
body.cine .auth-scene { display: grid; grid-template-columns: 1fr 1fr; min-height: 78svh; align-items: stretch; }
/* align-items: end pinned the copy to the floor of the panel, which reads as a
   mistake beside a vertically centred form card. Centre it against its own
   background instead. */
body.cine .auth-side { position: relative; background: var(--ink); color: var(--bone); overflow: hidden; display: grid; align-items: center; }
body.cine .auth-side::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(110% 90% at 70% 30%, rgba(196, 161, 89, .20), transparent 62%);
}
body.cine .auth-side-in { position: relative; padding: clamp(28px, 5vw, 64px); display: grid; gap: 14px; }
body.cine .auth-side-in h2 { color: var(--bone); font-size: clamp(32px, 4.4vw, 62px); margin: 0; }
body.cine .auth-side-in p { color: rgba(244, 240, 233, .72); margin: 0; max-width: 34ch; }
body.cine .auth-side-in .cine-eyebrow { color: rgba(244, 240, 233, .6); }

/* Login-only presentation: keep the shared register and password-recovery
   layouts unchanged while centring the message on the navy background. */
body.cine .auth-scene-login .auth-side {
    background: linear-gradient(145deg, #081525 0%, #0A1626 48%, #11253A 100%);
}
body.cine .auth-scene-login .auth-side::before {
    background:
        radial-gradient(70% 58% at 50% 45%, rgba(196, 161, 89, .18), transparent 72%),
        radial-gradient(46% 42% at 92% 8%, rgba(227, 203, 148, .09), transparent 76%);
}
body.cine .auth-scene-login .auth-side-in {
    width: min(78%, 720px);
    min-height: clamp(330px, 48svh, 470px);
    margin: auto;
    padding: clamp(36px, 5vw, 64px);
    place-content: center;
    justify-items: center;
    text-align: center;
}
body.cine .auth-scene-login .auth-side-in .cine-eyebrow {
    display: grid;
    justify-items: center;
    gap: 12px;
    color: var(--brass-lt);
}
body.cine .auth-scene-login .auth-side-in .cine-eyebrow::after {
    content: '';
    width: 46px;
    height: 1px;
    background: var(--brass);
}
body.cine .auth-scene-login .auth-side-in h2 {
    max-width: 11ch;
    text-wrap: balance;
}
body.cine .auth-scene-login .auth-side-in h2 span { color: var(--brass-lt); }
body.cine .auth-scene-login .auth-side-in > p:last-child {
    max-width: 31ch;
    color: rgba(244, 240, 233, .8);
}
body.cine .auth-scene-login .auth-card h1::after {
    content: '';
    display: block;
    width: 54px;
    height: 2px;
    margin-top: 14px;
    background: linear-gradient(90deg, var(--brass), var(--brass-lt));
}
body.cine .auth-card {
    align-self: center; justify-self: center; width: min(440px, 100%);
    padding: clamp(26px, 4vw, 46px); display: grid; gap: 18px; border: 0; background: none;
}
body.cine .auth-card h1 { margin: 0; font-size: clamp(30px, 4vw, 46px); }
body.cine .auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body.cine .auth-link, body.cine .auth-alt { font-size: 13.5px; color: var(--muted); }
body.cine .auth-link a, body.cine .auth-alt a { color: var(--text); text-decoration: underline; }
body.cine .oauth-row { display: flex; gap: 10px; }
body.cine .oauth-row .btn { flex: 1; }

/* ── about + contact — approved Wellrest brand treatment ───────────────── */
body.cine[data-page="about"],
body.cine[data-page="contact"] {
    --page-navy: #092b57;
    --page-navy-soft: #21436a;
    --page-gold: #d5a92f;
    --page-ivory: #faf7f0;
    --page-line: rgba(9, 43, 87, .14);
    background-color: var(--page-ivory);
    color: var(--page-navy);
}
body.cine[data-page="about"] main,
body.cine[data-page="contact"] main { padding-top: 76px; }
body.cine[data-page="about"] .site-header::after,
body.cine[data-page="contact"] .site-header::after { background: rgba(250, 247, 240, .97); }
body.cine[data-page="about"] .site-header,
body.cine[data-page="contact"] .site-header { box-shadow: 0 1px 0 var(--page-line); }
body.cine[data-page="about"] .main-nav a.active::after,
body.cine[data-page="contact"] .main-nav a.active::after { background: var(--page-gold); }
body.cine[data-page="about"] h1,
body.cine[data-page="about"] h2,
body.cine[data-page="about"] h3,
body.cine[data-page="contact"] h1,
body.cine[data-page="contact"] h2,
body.cine[data-page="contact"] h3 { color: var(--page-navy); }

body.cine .aboutv2-kicker,
body.cine .contactv2-kicker {
    display: flex; align-items: center; gap: 16px; margin: 0;
    color: var(--brass-ink); font: 600 11px/1.2 var(--sans);
    letter-spacing: .25em; text-transform: uppercase;
}
body.cine .aboutv2-kicker::after,
body.cine .contactv2-kicker::after {
    content: ''; width: 58px; height: 1px; flex: none; background-color: var(--page-gold);
}

body.cine .aboutv2-hero {
    overflow: hidden; border-bottom: 1px solid var(--page-line);
    background-color: var(--page-ivory);
    background-image: radial-gradient(circle at 27% 30%, rgba(255, 255, 255, .9), transparent 35%);
}
body.cine .aboutv2-hero-grid {
    width: 100%; max-width: none; min-height: clamp(430px, 48vw, 560px);
    padding-right: 0;
    padding-left: max(var(--pad), calc((100% - 1320px) / 2 + var(--pad)));
    display: grid; grid-template-columns: minmax(390px, .88fr) minmax(520px, 1.4fr);
    align-items: stretch;
}
body.cine .aboutv2-hero-copy {
    align-self: center; display: grid; gap: 18px; padding: 54px clamp(30px, 4vw, 70px) 54px 0;
}
body.cine .aboutv2-hero-copy h1 {
    margin: 0; max-width: 8.5ch; font-size: clamp(64px, 6.4vw, 104px);
    line-height: .88; letter-spacing: -.035em;
}
body.cine .aboutv2-hero-copy > p:last-child {
    max-width: 48ch; margin: 0; color: var(--page-navy-soft);
    font-size: clamp(16px, 1.35vw, 20px); line-height: 1.45;
}
body.cine .aboutv2-hero-media { min-width: 0; margin: 0; overflow: hidden; background-color: #eee9df; }
body.cine .aboutv2-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

body.cine .aboutv2-story-section { padding: clamp(48px, 6vw, 88px) 0 clamp(58px, 7vw, 100px); }
body.cine .aboutv2-story-grid {
    display: grid;
    grid-template-columns: minmax(230px, .72fr) minmax(340px, 1.12fr) minmax(390px, 1.45fr);
    gap: clamp(24px, 3vw, 44px); align-items: center;
}
body.cine .aboutv2-story-media {
    align-self: stretch; min-height: 250px; margin: 0; overflow: hidden;
    border-radius: 7px; background-color: #eee9df;
}
body.cine .aboutv2-story-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
body.cine .aboutv2-story-copy { display: grid; gap: 12px; min-width: 0; }
body.cine .aboutv2-story-copy h2 {
    margin: 2px 0 5px; font-size: clamp(38px, 3.7vw, 58px); line-height: .98;
}
body.cine .aboutv2-story-copy p {
    margin: 0; color: var(--page-navy-soft); font-size: 14.5px; line-height: 1.55;
}
body.cine .aboutv2-story-copy strong { color: var(--page-navy); }
body.cine .aboutv2-proof {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; min-width: 0;
}
body.cine .aboutv2-proof-item {
    min-width: 0; padding: 8px clamp(18px, 2.1vw, 30px);
    border-left: 1px solid rgba(132, 104, 46, .38);
}
body.cine .aboutv2-proof-item > span {
    display: block; min-height: 30px; color: var(--brass-ink); font-size: 11px; font-weight: 600;
}
body.cine .aboutv2-proof-item strong {
    display: block; margin-bottom: 10px; color: var(--page-navy);
    font: 400 clamp(30px, 2.7vw, 43px)/.98 var(--serif); overflow-wrap: anywhere;
}
body.cine .aboutv2-proof-item p { margin: 0; color: var(--page-navy-soft); font-size: 12px; line-height: 1.5; }

body.cine .aboutv2-beliefs {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px; margin-top: clamp(34px, 5vw, 58px);
}
body.cine .aboutv2-belief-card {
    display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 22px;
    min-width: 0; padding: 22px 26px; border: 1px solid var(--page-line); border-radius: 8px;
    background-color: rgba(255, 255, 255, .52);
}
body.cine .aboutv2-belief-icon {
    display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
    background-color: rgba(213, 169, 47, .09); color: var(--brass-ink);
}
body.cine .aboutv2-belief-icon svg {
    width: 40px; height: 40px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
body.cine .aboutv2-belief-card h2 { margin: 0 0 4px; font-size: 31px; line-height: 1; }
body.cine .aboutv2-belief-card p { margin: 0; color: var(--page-navy-soft); font-size: 14px; line-height: 1.5; }
body.cine .aboutv2-center-action { display: grid; place-items: center; margin-top: 26px; }
body.cine .aboutv2-primary-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 18px;
    min-height: 50px; padding: 0 28px; border: 1px solid var(--page-gold); border-radius: 4px;
    background-color: var(--page-gold); color: var(--page-navy); font-size: 13px; font-weight: 600;
    transition: transform .25s var(--ease), background-color .25s;
}
body.cine .aboutv2-primary-link:hover { transform: translateY(-2px); background-color: #e0b83f; }
body.cine .aboutv2-primary-link span { font-size: 19px; line-height: 1; }

body.cine .aboutv2-purpose {
    padding: clamp(64px, 8vw, 108px) 0; border-block: 1px solid var(--page-line);
    background-color: rgba(255, 255, 255, .4);
}
body.cine .aboutv2-purpose-grid {
    display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 86px); align-items: start;
}
body.cine .aboutv2-purpose-head h2,
body.cine .aboutv2-section-head h2,
body.cine .aboutv2-cta h2 {
    margin: 12px 0 0; font-size: clamp(42px, 5vw, 68px); line-height: .98;
}
body.cine .aboutv2-purpose-copy { display: grid; gap: 16px; }
body.cine .aboutv2-purpose-copy p { margin: 0; color: var(--page-navy-soft); font-size: 15px; }
body.cine .aboutv2-values {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--page-line);
}
body.cine .aboutv2-values > div { display: grid; gap: 5px; padding: 22px 24px 0 0; }
body.cine .aboutv2-values strong { font: 400 30px/1 var(--serif); color: var(--page-navy); }
body.cine .aboutv2-values span { color: var(--page-navy-soft); font-size: 12.5px; }

body.cine .aboutv2-locations { padding: clamp(64px, 8vw, 105px) 0; }
body.cine .aboutv2-section-head {
    display: grid; grid-template-columns: 1fr minmax(320px, .8fr);
    gap: clamp(28px, 6vw, 90px); align-items: end; margin-bottom: 32px;
}
body.cine .aboutv2-section-head > p { margin: 0; color: var(--page-navy-soft); font-size: 14px; }
body.cine .aboutv2-branch-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body.cine .aboutv2-branch {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 22px;
    border: 1px solid var(--page-line); border-radius: 8px; background-color: rgba(255, 255, 255, .55);
}
body.cine .aboutv2-pin {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    background-color: rgba(213, 169, 47, .1); color: var(--brass-ink);
}
body.cine .aboutv2-pin svg {
    width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
body.cine .aboutv2-branch h3 { margin: 0 0 5px; font-size: 23px; }
body.cine .aboutv2-branch address,
body.cine .aboutv2-branch p { margin: 0; color: var(--page-navy-soft); font-size: 13px; font-style: normal; }

body.cine .aboutv2-cta { padding: clamp(58px, 8vw, 94px) 0; background-color: rgba(213, 169, 47, .1); }
body.cine .aboutv2-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
body.cine .aboutv2-cta-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.cine .aboutv2-secondary-link {
    display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px;
    border: 1px solid var(--page-navy); border-radius: 4px; color: var(--page-navy); font-size: 13px; font-weight: 600;
}
body.cine .aboutv2-secondary-link:hover { background-color: var(--page-navy); color: var(--page-ivory); }

body.cine .contactv2-main {
    padding: clamp(44px, 5vw, 72px) 0 clamp(42px, 5vw, 68px);
    background-image: radial-gradient(circle at 18% 20%, rgba(255, 255, 255, .82), transparent 33%);
}
body.cine .contactv2-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr);
    gap: clamp(48px, 8vw, 112px); align-items: start;
}
body.cine .contactv2-intro h1 {
    max-width: 12ch; margin: 18px 0 10px; font-size: clamp(62px, 5.7vw, 86px); line-height: .94;
}
body.cine .contactv2-lead {
    max-width: 50ch; margin: 0; color: var(--page-navy-soft);
    font: 400 clamp(17px, 1.45vw, 21px)/1.35 var(--serif);
}
body.cine .contactv2-options { display: grid; margin-top: 24px; }
body.cine .contactv2-option {
    position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 18px; align-items: center; min-width: 0; padding: 16px 0;
    border-bottom: 1px solid var(--page-line); color: var(--page-navy);
}
body.cine a.contactv2-option:hover .contactv2-option-copy strong,
body.cine a.contactv2-option:hover .contactv2-option-copy b { color: var(--brass-ink); }
body.cine .contactv2-option-icon {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
    background-color: rgba(9, 43, 87, .055); color: var(--page-navy);
}
body.cine .contactv2-option-icon svg {
    width: 27px; height: 27px; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
body.cine .contactv2-option-copy { display: grid; min-width: 0; }
body.cine .contactv2-option-copy strong { font: 400 22px/1.1 var(--serif); color: var(--page-navy); }
body.cine .contactv2-option-copy small { color: var(--page-navy-soft); font-size: 13px; line-height: 1.4; }
body.cine .contactv2-option-copy b {
    color: var(--page-navy); font-size: 19px; line-height: 1.3;
    overflow-wrap: anywhere; transition: color .25s;
}
body.cine .contactv2-chevron {
    display: none; color: var(--page-navy); font: 400 30px/1 var(--serif);
}
body.cine .contactv2-socials { display: flex; gap: 10px; margin-top: 7px; }
body.cine .contactv2-socials a {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 4px;
    background-color: var(--page-navy); color: #fff;
}
body.cine .contactv2-socials svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
body.cine .contactv2-option-link {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 4px;
    color: var(--page-navy); font: 400 30px/1 var(--serif);
}

body.cine .contactv2-form {
    display: grid; gap: 14px; padding: clamp(22px, 2.6vw, 32px);
    border: 1px solid var(--page-line); border-radius: 9px;
    background-color: rgba(255, 255, 255, .64); box-shadow: 0 22px 50px -42px rgba(9, 43, 87, .4);
}
body.cine .contactv2-field { display: grid; gap: 6px; }
body.cine .contactv2-field label { color: var(--page-navy); font-size: 12px; font-weight: 600; }
body.cine .contactv2-field label span { color: var(--muted); font-weight: 400; }
body.cine .contactv2-field input,
body.cine .contactv2-field select,
body.cine .contactv2-field textarea {
    width: 100%; min-width: 0; border: 1px solid rgba(9, 43, 87, .2); border-radius: 7px;
    background-color: rgba(255, 255, 255, .7); color: var(--page-navy);
    font: 400 14px/1.4 var(--sans); box-shadow: none;
}
body.cine .contactv2-field input,
body.cine .contactv2-field select { min-height: 46px; padding: 10px 13px; }
body.cine .contactv2-field textarea { min-height: 104px; padding: 12px 13px; resize: vertical; }
body.cine .contactv2-field input:focus,
body.cine .contactv2-field select:focus,
body.cine .contactv2-field textarea:focus {
    outline: 2px solid rgba(213, 169, 47, .28); outline-offset: 1px; border-color: var(--page-gold);
}
body.cine .contactv2-field input::placeholder,
body.cine .contactv2-field textarea::placeholder { color: #7b899b; opacity: 1; }
body.cine .contactv2-submit {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    min-height: 50px; margin-top: 2px; padding: 0 24px; border: 1px solid var(--page-gold);
    border-radius: 4px; background-color: var(--page-gold); color: var(--page-navy);
    font: 600 14px/1 var(--sans); cursor: pointer; transition: transform .25s var(--ease), background-color .25s;
}
body.cine .contactv2-submit:hover { transform: translateY(-2px); background-color: #e0b83f; }
body.cine .contactv2-submit span { font-size: 20px; font-weight: 400; }
body.cine .contactv2-form-note { margin: -3px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.4; text-align: center; }

body.cine .contactv2-locations { padding: 0 0 clamp(66px, 8vw, 104px); }
body.cine .contactv2-locations .container { padding-top: 26px; border-top: 1px solid var(--page-line); }
body.cine .contactv2-locations-head h2 {
    margin: 11px 0 3px; font-size: clamp(42px, 4.4vw, 62px); line-height: .98;
}
body.cine .contactv2-locations-head > p:last-child { margin: 0; color: var(--page-navy-soft); font-size: 14px; }
body.cine .contactv2-location-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px;
}
body.cine .contactv2-location-card {
    display: grid; grid-template-columns: 54px minmax(0, 1fr) minmax(170px, .8fr);
    gap: 16px; align-items: center; min-width: 0; padding: 12px;
    border: 1px solid var(--page-line); border-radius: 8px; background-color: rgba(255, 255, 255, .58);
}
body.cine .contactv2-location-icon {
    align-self: start; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    background-color: rgba(213, 169, 47, .1); color: var(--brass-ink);
}
body.cine .contactv2-location-icon svg {
    width: 24px; height: 24px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
body.cine .contactv2-location-copy { display: grid; gap: 3px; min-width: 0; }
body.cine .contactv2-location-copy h3 { margin: 0; font-size: 20px; }
body.cine .contactv2-location-copy address {
    min-height: 40px; color: var(--page-navy-soft); font-size: 12.5px; font-style: normal; line-height: 1.4;
}
body.cine .contactv2-location-copy a {
    justify-self: start; display: inline-flex; align-items: center; gap: 13px;
    min-height: 38px; margin-top: 5px; padding: 0 18px; border: 1px solid var(--page-gold);
    border-radius: 4px; color: var(--page-navy); font-size: 11.5px; font-weight: 600;
}
body.cine .contactv2-location-copy a:hover { background-color: rgba(213, 169, 47, .12); }
body.cine .contactv2-location-copy a span { font-size: 18px; line-height: 1; }
body.cine .contactv2-map {
    position: relative; align-self: stretch; min-height: 112px; overflow: hidden; border-radius: 7px;
    background-color: #eee9df;
    background-image:
        linear-gradient(32deg, transparent 45%, rgba(255,255,255,.96) 45%, rgba(255,255,255,.96) 49%, transparent 49%),
        linear-gradient(118deg, transparent 46%, rgba(255,255,255,.92) 46%, rgba(255,255,255,.92) 50%, transparent 50%),
        linear-gradient(164deg, transparent 42%, rgba(255,255,255,.8) 42%, rgba(255,255,255,.8) 47%, transparent 47%);
    background-size: 72px 64px, 92px 88px, 110px 76px;
}
body.cine .contactv2-map span {
    position: absolute; left: 55%; top: 48%; width: 19px; height: 25px;
    border-radius: 50% 50% 50% 0; background-color: var(--page-gold);
    transform: translate(-50%, -50%) rotate(-45deg);
}
body.cine .contactv2-map span::after {
    content: ''; position: absolute; left: 6px; top: 6px; width: 7px; height: 7px;
    border-radius: 50%; background-color: var(--page-ivory);
}

@media (max-width: 1080px) {
    body.cine .aboutv2-hero-grid {
        padding-left: var(--pad); grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
    }
    body.cine .aboutv2-story-grid { grid-template-columns: 220px minmax(0, 1fr); }
    body.cine .aboutv2-proof { grid-column: 1 / -1; }
    body.cine .contactv2-layout { grid-template-columns: minmax(0, 1fr) minmax(390px, .92fr); gap: 40px; }
    body.cine .contactv2-location-card { grid-template-columns: 48px minmax(0, 1fr); }
    body.cine .contactv2-map { grid-column: 1 / -1; min-height: 90px; }
}

@media (max-width: 900px) {
    body.cine .contactv2-layout { grid-template-columns: 1fr; }
    body.cine .contactv2-intro h1 { max-width: 14ch; }
    body.cine .contactv2-form { width: 100%; max-width: 720px; }
}

@media (max-width: 820px) {
    body.cine[data-page="about"] main,
    body.cine[data-page="contact"] main { padding-top: calc(72px + env(safe-area-inset-top)); }
    body.cine[data-page="about"],
    body.cine[data-page="contact"] { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    body.cine[data-page="about"] .site-header,
    body.cine[data-page="contact"] .site-header { padding: max(14px, env(safe-area-inset-top)) 0 14px; }
    body.cine[data-page="about"] .brand-logo-frame,
    body.cine[data-page="contact"] .brand-logo-frame { width: 132px; }

    body.cine .aboutv2-hero-grid {
        min-height: 0; padding: 36px var(--pad) 0; display: block;
    }
    body.cine .aboutv2-hero-copy { padding: 0; gap: 15px; }
    body.cine .aboutv2-hero-copy h1 { max-width: 8ch; font-size: clamp(52px, 14vw, 68px); line-height: .91; }
    body.cine .aboutv2-hero-copy > p:last-child { font-size: 18px; line-height: 1.45; }
    body.cine .aboutv2-hero-media { margin: 24px 0 0; border-radius: 7px 7px 0 0; aspect-ratio: 16 / 10; }
    body.cine .aboutv2-hero-media img { height: 100%; object-position: center; }

    body.cine .aboutv2-story-section { padding: 32px 0 58px; }
    body.cine .aboutv2-story-grid { display: block; }
    body.cine .aboutv2-story-media { display: none; }
    body.cine .aboutv2-story-copy { gap: 13px; padding-inline: 14px; }
    body.cine .aboutv2-story-copy h2 { font-size: clamp(43px, 11vw, 56px); }
    body.cine .aboutv2-story-copy p { font-size: 15px; }
    body.cine .aboutv2-proof { margin-top: 28px; }
    body.cine .aboutv2-proof-item { padding: 4px 14px; }
    body.cine .aboutv2-proof-item:first-child { border-left: 0; }
    body.cine .aboutv2-proof-item > span { min-height: 26px; font-size: 10px; }
    body.cine .aboutv2-proof-item strong { font-size: clamp(25px, 7vw, 34px); }
    body.cine .aboutv2-proof-item p { font-size: 11px; }
    body.cine .aboutv2-beliefs { grid-template-columns: 1fr; gap: 8px; margin-top: 28px; }
    body.cine .aboutv2-belief-card { grid-template-columns: 72px minmax(0, 1fr); gap: 15px; padding: 15px 18px; }
    body.cine .aboutv2-belief-icon { width: 64px; height: 64px; }
    body.cine .aboutv2-belief-icon svg { width: 34px; height: 34px; }
    body.cine .aboutv2-belief-card h2 { font-size: 28px; }
    body.cine .aboutv2-belief-card p { font-size: 12.5px; }
    body.cine .aboutv2-center-action { margin-top: 18px; }
    body.cine .aboutv2-primary-link { width: 100%; min-height: 48px; }
    body.cine .aboutv2-purpose { padding: 52px 0; }
    body.cine .aboutv2-purpose-grid { grid-template-columns: 1fr; gap: 24px; }
    body.cine .aboutv2-purpose-head h2,
    body.cine .aboutv2-section-head h2,
    body.cine .aboutv2-cta h2 { font-size: clamp(40px, 11vw, 52px); }
    body.cine .aboutv2-values { grid-template-columns: 1fr; }
    body.cine .aboutv2-values > div { padding: 17px 0; border-bottom: 1px solid var(--page-line); }
    body.cine .aboutv2-locations { padding: 52px 0; }
    body.cine .aboutv2-section-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 24px; }
    body.cine .aboutv2-branch-list { grid-template-columns: 1fr; gap: 9px; }
    body.cine .aboutv2-branch { grid-template-columns: 46px minmax(0, 1fr); gap: 13px; padding: 17px; }
    body.cine .aboutv2-pin { width: 42px; height: 42px; }
    body.cine .aboutv2-cta { padding: 50px 0; }
    body.cine .aboutv2-cta-inner { display: grid; }
    body.cine .aboutv2-cta-actions { display: grid; width: 100%; }
    body.cine .aboutv2-secondary-link { width: 100%; }

    body.cine .contactv2-main { padding: 34px 0 30px; }
    body.cine .contactv2-layout { grid-template-columns: 1fr; gap: 18px; }
    body.cine .contactv2-intro h1 { margin-top: 15px; font-size: clamp(48px, 12vw, 62px); }
    body.cine .contactv2-lead { font-size: 18px; }
    body.cine .contactv2-options { gap: 8px; margin-top: 20px; }
    body.cine .contactv2-option {
        grid-template-columns: 58px minmax(0, 1fr) 24px; gap: 14px; min-height: 104px;
        padding: 13px 15px; border: 1px solid var(--page-line); border-radius: 8px;
        background-color: rgba(255, 255, 255, .58);
    }
    body.cine .contactv2-option-icon { width: 52px; height: 52px; }
    body.cine .contactv2-option-copy strong { font-size: 22px; }
    body.cine .contactv2-option-copy small { font-size: 12.5px; }
    body.cine .contactv2-option-copy b { font-size: 18px; }
    body.cine .contactv2-chevron { display: block; }
    body.cine .contactv2-socials a { width: 36px; height: 36px; }
    body.cine .contactv2-option-link { width: 24px; height: 44px; }
    body.cine .contactv2-hours { min-height: 88px; }
    body.cine .contactv2-form { gap: 13px; margin-top: 0; padding: 20px 16px; border-radius: 8px; }
    body.cine .contactv2-field input,
    body.cine .contactv2-field select,
    body.cine .contactv2-field textarea { font-size: 16px; }
    body.cine .contactv2-field input,
    body.cine .contactv2-field select { min-height: 48px; }
    body.cine .contactv2-submit { min-height: 52px; font-size: 15px; }
    body.cine .contactv2-form-note { font-size: 11px; }
    body.cine .contactv2-locations { padding: 0 0 52px; }
    body.cine .contactv2-locations .container { padding-top: 28px; }
    body.cine .contactv2-locations-head h2 { font-size: clamp(39px, 10.5vw, 50px); }
    body.cine .contactv2-location-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
    body.cine .contactv2-location-card {
        grid-template-columns: 44px minmax(0, 1fr) minmax(112px, .64fr);
        gap: 10px; padding: 9px;
    }
    body.cine .contactv2-location-icon { width: 42px; height: 42px; }
    body.cine .contactv2-location-copy h3 { font-size: 18px; }
    body.cine .contactv2-location-copy address { min-height: 0; font-size: 11.5px; }
    body.cine .contactv2-location-copy a { min-height: 36px; padding-inline: 14px; }
    body.cine .contactv2-map { grid-column: auto; min-height: 102px; }
}

@media (max-width: 430px) {
    body.cine .aboutv2-story-copy { padding-inline: 0; }
    body.cine .aboutv2-proof-item { padding-inline: 9px; }
    body.cine .aboutv2-belief-card { grid-template-columns: 62px minmax(0, 1fr); padding-inline: 13px; }
    body.cine .aboutv2-belief-icon { width: 56px; height: 56px; }
    body.cine .contactv2-option { padding-inline: 12px; }
    body.cine .contactv2-location-card { grid-template-columns: 40px minmax(0, 1fr); }
    body.cine .contactv2-map { grid-column: 1 / -1; min-height: 80px; }
}

@media (max-width: 360px) {
    body.cine .aboutv2-proof { grid-template-columns: 1fr; }
    body.cine .aboutv2-proof-item,
    body.cine .aboutv2-proof-item:first-child {
        padding: 14px 0; border-left: 0; border-top: 1px solid var(--page-line);
    }
    body.cine .aboutv2-proof-item > span { min-height: 0; }
    body.cine .aboutv2-belief-card { grid-template-columns: 1fr; }
    body.cine .contactv2-option {
        grid-template-columns: 50px minmax(0, 1fr) 18px; gap: 9px; padding-inline: 9px;
    }
    body.cine .contactv2-option-icon { width: 46px; height: 46px; }
}

/* ── homepage: celebrities + highlight reel ──────────────────────────────── */
body.cine .celeb-band { background: var(--ink); color: var(--bone); }
body.cine .celeb-band h2 { color: var(--bone); }
body.cine .celeb-band .kicker { color: var(--brass); }
body.cine .section-sub { color: rgba(244, 240, 233, .62); font-size: 15px; max-width: 62ch; margin: 10px 0 0; }
body.cine .celeb-band { overflow: hidden; padding-block: var(--wr-home-space, clamp(58px, 8vw, 108px)); }
body.cine .celeb-head { max-width: 820px; margin-inline: auto; text-align: center; }
body.cine .celeb-head .section-sub { margin-inline: auto; }
body.cine .celeb-instruction { display: inline-block; margin-top: 14px; color: rgba(244,240,233,.72); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
body.cine .celeb-car { position: relative; margin-top: clamp(26px, 4vw, 48px); padding-inline: 48px; }
body.cine .celeb-track {
    display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px);
    padding: 22px max(4px, calc((100% - clamp(210px, 19vw, 282px)) / 2)) 28px;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; overscroll-behavior-inline: contain; touch-action: auto; cursor: grab;
}
body.cine .celeb-track::-webkit-scrollbar { display: none; }
/* While dragging, follow the mouse exactly (no smooth scroll, no snapping);
   after release, glide to the nearest card with snapping still off. */
body.cine .celeb-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
body.cine .celeb-track.is-settling { scroll-snap-type: none; }
body.cine .celeb-track img { -webkit-user-drag: none; user-select: none; }
body.cine .celeb-card {
    position: relative; flex: 0 0 clamp(210px, 19vw, 282px); aspect-ratio: 9/16; margin: 0;
    overflow: hidden; border: 1px solid rgba(244,240,233,.16); border-radius: 10px;
    background: var(--ink-2); scroll-snap-align: center; opacity: .78;
    transform: scale(.96); transition: transform .45s var(--ease), opacity .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
body.cine .celeb-card.is-active { z-index: 2; opacity: 1; transform: scale(1.035); border-color: rgba(202,155,63,.82); box-shadow: 0 24px 58px rgba(0,0,0,.34); }
body.cine .celeb-story { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; text-decoration: none; cursor: pointer; }
body.cine .celeb-story.is-image-only { cursor: default; }
body.cine .celeb-story::after { content: ''; position: absolute; inset: 38% 0 0; background: linear-gradient(180deg,transparent,rgba(6,15,27,.88)); pointer-events: none; }
body.cine .celeb-story img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
body.cine .celeb-story:hover img, body.cine .celeb-story:focus-visible img { transform: scale(1.045); }
body.cine .celeb-story:focus-visible { outline: 3px solid var(--brass); outline-offset: -4px; }
body.cine .celeb-card-copy { position: absolute; z-index: 3; left: 18px; right: 18px; bottom: 17px; display: grid; gap: 6px; color: var(--bone); }
body.cine .celeb-card-copy strong { font-family: var(--serif); font-size: clamp(19px,2vw,25px); font-weight: 400; line-height: 1.04; }
body.cine .celeb-card-copy small { color: var(--brass); font-size: 9px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
body.cine .celeb-arrow { position: absolute; z-index: 5; top: 50%; width: 42px; height: 42px; border: 1px solid rgba(244,240,233,.38); border-radius: 4px; background: rgba(6,15,27,.78); color: var(--bone); font-size: 25px; line-height: 1; cursor: pointer; transform: translateY(-50%); }
body.cine .celeb-arrow:hover { border-color: var(--brass); color: var(--brass); }
body.cine .celeb-arrow.prev { left: 0; }
body.cine .celeb-arrow.next { right: 0; }
body.cine .celeb-progress { width: min(360px,64vw); height: 2px; margin: 8px auto 0; overflow: hidden; background: rgba(244,240,233,.2); }
body.cine .celeb-progress i { display: block; width: 0; height: 100%; background: var(--brass); transition: width .35s var(--ease); }

html.celeb-modal-open { overflow: hidden; }
body.cine .celeb-vlog-modal {
    width: min(1080px, calc(100vw - 40px));
    max-width: none;
    max-height: calc(100dvh - 40px);
    padding: 0;
    border: 0;
    overflow: visible;
    background: transparent;
    color: var(--bone);
}
body.cine .celeb-vlog-modal[open] { animation: celebModalIn .34s var(--ease) both; }
body.cine .celeb-vlog-modal::backdrop {
    background: rgba(2,8,15,.84);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
body.cine .celeb-vlog-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(202,155,63,.78);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0, rgba(202,155,63,.11), transparent 38%),
        #071426;
    box-shadow: 0 30px 100px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.035) inset;
}
body.cine .celeb-vlog-layout { display: grid; min-height: min(72dvh,700px); }
body.cine .celeb-vlog-media {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #02070d;
}
body.cine .celeb-vlog-media::after {
    content: '';
    position: absolute;
    inset: 0;
    border-right: 1px solid rgba(244,240,233,.1);
    pointer-events: none;
}
body.cine .celeb-vlog-media video {
    display: block;
    width: 100%;
    height: 100%;
    max-height: min(78dvh,760px);
    background: #000;
    object-fit: contain;
}
body.cine .celeb-vlog-details {
    min-width: 0;
    padding: clamp(34px,4.4vw,62px) clamp(28px,4.2vw,56px) clamp(28px,3.6vw,48px);
    display: flex;
    flex-direction: column;
}
body.cine .celeb-vlog-logo {
    position: relative;
    width: 220px;
    height: 42px;
    display: block;
    overflow: hidden;
    background: #000;
}
body.cine .celeb-vlog-logo img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 270px;
    max-width: none;
    height: auto;
    transform: translate(-50%,-50%);
}
body.cine .celeb-vlog-copy {
    margin-block: auto;
    padding-block: 42px;
    display: grid;
    justify-items: start;
}
body.cine .celeb-vlog-copy strong {
    max-width: 13ch;
    color: var(--bone);
    font: 400 clamp(36px,4.3vw,62px)/.98 var(--serif);
    text-wrap: balance;
}
body.cine .celeb-vlog-copy span {
    margin-top: 14px;
    color: var(--brass);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1.5;
    text-transform: uppercase;
}
body.cine .celeb-vlog-copy i { width: 36px; height: 2px; margin-top: 28px; background: var(--brass); }
body.cine .celeb-vlog-copy p {
    margin: 18px 0 0;
    color: rgba(244,240,233,.62);
    font-family: var(--serif);
    font-size: 17px;
    font-style: italic;
}
body.cine .celeb-vlog-status {
    position: absolute;
    z-index: 2;
    right: 18px;
    bottom: 18px;
    left: 18px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid rgba(202,155,63,.45);
    border-radius: 8px;
    background: rgba(7,20,38,.9);
    color: var(--bone);
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}
body.cine .celeb-vlog-close {
    position: absolute;
    z-index: 4;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244,240,233,.3);
    border-radius: 4px;
    background: rgba(4,12,23,.72);
    color: var(--bone);
    font: 300 27px/1 var(--sans);
    cursor: pointer;
    transition: border-color .2s, color .2s, transform .2s;
}
body.cine .celeb-vlog-close:hover,
body.cine .celeb-vlog-close:focus-visible { border-color: var(--brass); color: var(--brass); transform: rotate(4deg); }
body.cine .celeb-vlog-nav { display: flex; align-items: center; gap: 16px; }
body.cine .celeb-vlog-nav button {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(244,240,233,.26);
    border-radius: 4px;
    background: rgba(255,255,255,.025);
    color: var(--bone);
    font-size: 18px;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}
body.cine .celeb-vlog-nav button:hover,
body.cine .celeb-vlog-nav button:focus-visible { border-color: var(--brass); background: rgba(202,155,63,.08); color: var(--brass); }
body.cine .celeb-vlog-nav span { min-width: 48px; color: rgba(244,240,233,.6); font-size: 11px; letter-spacing: .12em; text-align: center; }

/* Portrait stories use the approved editorial split layout. */
body.cine .celeb-vlog-modal.is-portrait { width: min(920px, calc(100vw - 40px)); }
body.cine .celeb-vlog-modal.is-portrait .celeb-vlog-layout { grid-template-columns: minmax(300px,48%) minmax(300px,52%); }
body.cine .celeb-vlog-modal.is-portrait .celeb-vlog-media video { aspect-ratio: 9/16; }

/* Landscape stories become a cinema frame with a compact branded footer. */
body.cine .celeb-vlog-modal.is-landscape { width: min(1120px, calc(100vw - 40px)); }
body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-layout { min-height: 0; grid-template-columns: 1fr; }
body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-media { aspect-ratio: 16/9; }
body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-media::after { border-right: 0; border-bottom: 1px solid rgba(244,240,233,.1); }
body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-media video { aspect-ratio: 16/9; max-height: min(65dvh,680px); }
body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-details {
    padding: 20px 28px;
    display: grid;
    grid-template-columns: 180px minmax(0,1fr) auto;
    align-items: center;
    gap: 28px;
}
body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-logo { width: 170px; height: 32px; }
body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-logo img { width: 210px; }
body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-copy { margin: 0; padding: 0; }
body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-copy strong { max-width: none; font-size: clamp(26px,3vw,40px); }
body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-copy span { margin-top: 7px; }
body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-copy i,
body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-copy p { display: none; }

@keyframes celebModalIn {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
    body.cine .celeb-car { margin-inline: -16px; padding-inline: 0; }
    body.cine .celeb-track { gap: 13px; padding-inline: 12vw; scroll-padding-inline: 12vw; }
    body.cine .celeb-card { flex-basis: min(76vw,310px); }
    body.cine .celeb-card.is-active { transform: scale(1.018); }
    body.cine .celeb-arrow { display: none; }
    body.cine .celeb-instruction { font-size: 10px; }
    body.cine .celeb-vlog-modal,
    body.cine .celeb-vlog-modal.is-portrait,
    body.cine .celeb-vlog-modal.is-landscape { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
    body.cine .celeb-vlog-shell { max-height: calc(100dvh - 16px); overflow-y: auto; border-radius: 13px; }
    body.cine .celeb-vlog-layout,
    body.cine .celeb-vlog-modal.is-portrait .celeb-vlog-layout,
    body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-layout { min-height: 0; display: flex; flex-direction: column; }
    body.cine .celeb-vlog-modal.is-portrait .celeb-vlog-media { height: min(57dvh,600px); aspect-ratio: auto; }
    body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-media { height: auto; aspect-ratio: 16/9; }
    body.cine .celeb-vlog-media::after { border-right: 0; border-bottom: 1px solid rgba(244,240,233,.1); }
    body.cine .celeb-vlog-media video,
    body.cine .celeb-vlog-modal.is-portrait .celeb-vlog-media video,
    body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-media video { width: 100%; height: 100%; max-height: 57dvh; object-fit: contain; }
    body.cine .celeb-vlog-details,
    body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-details { padding: 20px; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    body.cine .celeb-vlog-logo,
    body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-logo { width: 160px; height: 31px; }
    body.cine .celeb-vlog-logo img,
    body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-logo img { width: 198px; }
    body.cine .celeb-vlog-copy,
    body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-copy { margin: 0; padding: 24px 0 20px; }
    body.cine .celeb-vlog-copy strong,
    body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-copy strong { max-width: 14ch; font-size: clamp(29px,10vw,42px); }
    body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-copy i { display: block; }
    body.cine .celeb-vlog-copy i { margin-top: 20px; }
    body.cine .celeb-vlog-copy p { margin-top: 13px; font-size: 15px; }
    body.cine .celeb-vlog-modal.is-landscape .celeb-vlog-copy p { display: block; }
    body.cine .celeb-vlog-nav { justify-content: space-between; }
    body.cine .celeb-vlog-close { top: 10px; right: 10px; width: 38px; height: 38px; background: rgba(4,12,23,.86); }
    body.cine .celeb-vlog-status { right: 10px; bottom: 10px; left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    body.cine .celeb-track { scroll-behavior: auto; }
    body.cine .celeb-card, body.cine .celeb-story img { transition: none; }
    body.cine .celeb-vlog-modal[open] { animation: none; }
}
/* The reel deliberately lives on the light storefront surface: each portrait
   clip reads as a small editorial story rather than a second hero banner. */
body.cine[data-page="home"] .vcar-band {
    overflow: hidden;
    background: var(--bone);
    color: var(--ink);
    padding-block: var(--wr-home-space, clamp(58px, 9vw, 112px));
}
body.cine[data-page="home"] .vcar-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(26px, 6vw, 90px);
    margin-bottom: clamp(24px, 4vw, 46px);
}
body.cine[data-page="home"] .vcar-head-copy { max-width: 720px; }
body.cine[data-page="home"] .vcar-head .kicker { color: var(--brass); }
body.cine[data-page="home"] .vcar-head h2 {
    color: var(--ink);
    margin: 6px 0 10px;
    font-size: clamp(38px, 5vw, 68px);
}
body.cine[data-page="home"] .vcar-sub {
    max-width: 62ch;
    margin: 0;
    color: var(--muted);
    font-size: clamp(14px, 1.4vw, 16px);
}
body.cine[data-page="home"] .vcar-trust {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 0 8px;
    border-bottom: 1px solid var(--brass);
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.3;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .25s var(--ease), gap .25s var(--ease);
}
body.cine[data-page="home"] .vcar-trust:hover,
body.cine[data-page="home"] .vcar-trust:focus-visible { color: var(--brass-ink); gap: 13px; }
body.cine[data-page="home"] .vcar { position: relative; }
body.cine[data-page="home"] .vcar-stage {
    position: relative;
    height: clamp(334px, 40vw, 470px);
    touch-action: pan-y;
    user-select: none;
    cursor: grab;
}
body.cine[data-page="home"] .vcar-stage.is-dragging { cursor: grabbing; }
body.cine[data-page="home"] .vcar-item {
    position: absolute;
    z-index: 1;
    top: 8px;
    left: 50%;
    width: clamp(126px, 14.5vw, 198px);
    margin: 0;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    background: transparent;
    transform: translateX(-50%) translateY(36px) scale(.84);
    transform-origin: 50% 50%;
    transition: transform .65s var(--ease), opacity .5s var(--ease), filter .5s var(--ease);
    will-change: transform;
}
body.cine[data-page="home"] .vcar-item video,
body.cine[data-page="home"] .vcar-item.landscape video,
body.cine[data-page="home"] .vcar-item.portrait video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border: 0;
    border-radius: 18px;
    background: var(--ink-2);
    box-shadow: 0 22px 44px -25px rgba(6, 15, 27, .5);
}
body.cine[data-page="home"] .vcar-item.landscape video { object-fit: contain; }
/* Covers remain visible on side cards even after their video has played. */
body.cine[data-page="home"] .vcar-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 18px;
    background: var(--ink-2);
    pointer-events: none;
}
body.cine[data-page="home"] .vcar-item.is-active.is-playing .vcar-poster { visibility: hidden; }

body.cine[data-page="home"] .vcar-item figcaption {
    padding: 10px 4px 0;
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.2;
    text-align: center;
    opacity: 0;
    transition: opacity .3s var(--ease);
}
/* The active story is only five percent larger: enough to show focus without
   making the centre video feel cropped or visually overpowering. */
body.cine[data-page="home"] .vcar-item.is-active {
    z-index: 5;
    opacity: 1;
    pointer-events: auto;
    filter: none;
    transform: translateX(-50%) translateY(0) scale(1.05);
}
body.cine[data-page="home"] .vcar-item.is-active figcaption { opacity: 1; }
/* 2026-10-21: who is in the video, what they bought, and a share button. */
body.cine[data-page="home"] .vcar-pick {
    position: relative; left: 50%; transform: translateX(-50%);
    display: block; width: max-content; max-width: min(300px, 86vw); margin: 8px 0 0; padding: 7px 10px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
    font: 400 12px/1.3 var(--sans, Inter, sans-serif); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.cine[data-page="home"] .vcar-pick span { color: #58626E; }
body.cine[data-page="home"] .vcar-pick:hover { border-color: var(--brass); }
body.cine[data-page="home"] .vcar-share {
    position: absolute; z-index: 2; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(255,255,255,.94); color: #0A1626; box-shadow: 0 4px 14px rgba(6,15,27,.25);
}
body.cine[data-page="home"] .vcar-item:not(.is-active) figcaption { visibility: hidden; }
body.cine[data-page="home"] .vcar-item:not(.is-active) :is(.vcar-share, .vcar-pick) { display: none; }
body.cine[data-page="home"] .vcar-shop {
    display: flex; align-items: center; gap: 16px; width: min(760px, 100%); box-sizing: border-box; margin: 22px auto 0; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
body.cine[data-page="home"] .vcar-shop[hidden] { display: none; }
body.cine[data-page="home"] .vcar-shop img { width: 104px; height: 78px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
body.cine[data-page="home"] .vcar-shop div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.cine[data-page="home"] .vcar-shop small { color: #58626E; font-size: 13px; }
body.cine[data-page="home"] .vcar-shop strong { color: var(--ink); font-size: 18px; }
body.cine[data-page="home"] .vcar-shop .btn { white-space: nowrap; }
@media (max-width: 600px) {
    body.cine[data-page="home"] .vcar-shop { flex-wrap: wrap; margin-top: 16px; }
    body.cine[data-page="home"] .vcar-shop .btn { width: 100%; }
    body.cine[data-page="home"] .vcar-share { width: 34px; height: 34px; top: 6px; right: 6px; }
}
body.cine[data-page="home"] .vcar-item.is-left-1,
body.cine[data-page="home"] .vcar-item.is-right-1,
body.cine[data-page="home"] .vcar-item.is-left-2,
body.cine[data-page="home"] .vcar-item.is-right-2,
body.cine[data-page="home"] .vcar-item.is-left-3,
body.cine[data-page="home"] .vcar-item.is-right-3 { pointer-events: auto; }
body.cine[data-page="home"] .vcar-item.is-left-1 {
    z-index: 4; opacity: .9;
    transform: translateX(calc(-50% - clamp(138px, 16.2vw, 220px))) translateY(18px) rotate(-2deg) scale(.98);
}
body.cine[data-page="home"] .vcar-item.is-right-1 {
    z-index: 4; opacity: .9;
    transform: translateX(calc(-50% + clamp(138px, 16.2vw, 220px))) translateY(18px) rotate(2deg) scale(.98);
}
body.cine[data-page="home"] .vcar-item.is-left-2 {
    z-index: 3; opacity: .7;
    transform: translateX(calc(-50% - clamp(266px, 30.4vw, 414px))) translateY(40px) rotate(-4deg) scale(.93);
}
body.cine[data-page="home"] .vcar-item.is-right-2 {
    z-index: 3; opacity: .7;
    transform: translateX(calc(-50% + clamp(266px, 30.4vw, 414px))) translateY(40px) rotate(4deg) scale(.93);
}
body.cine[data-page="home"] .vcar-item.is-left-3 {
    z-index: 2; opacity: .48;
    transform: translateX(calc(-50% - clamp(386px, 43.5vw, 594px))) translateY(66px) rotate(-6deg) scale(.87);
}
body.cine[data-page="home"] .vcar-item.is-right-3 {
    z-index: 2; opacity: .48;
    transform: translateX(calc(-50% + clamp(386px, 43.5vw, 594px))) translateY(66px) rotate(6deg) scale(.87);
}
body.cine[data-page="home"] .vcar-item.is-off { opacity: 0; pointer-events: none; }
body.cine[data-page="home"] .vcar-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 52px;
    margin-top: 14px;
}
body.cine[data-page="home"] .vcar-controls .vcar-nav {
    position: static;
    inset: auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    transform: none;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
    transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
body.cine[data-page="home"] .vcar-controls .vcar-nav:hover,
body.cine[data-page="home"] .vcar-controls .vcar-nav:focus-visible {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--bone);
}
body.cine[data-page="home"] .vcar-progress {
    width: clamp(72px, 8vw, 108px);
    height: 2px;
    overflow: hidden;
    background: var(--line);
}
body.cine[data-page="home"] .vcar-progress i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--brass);
    transform: scaleX(0);
    transform-origin: left center;
}
body.cine[data-page="home"] .vcar-sound-state {
    display: grid;
    min-width: 230px;
    gap: 2px;
    margin: 0;
    text-align: center;
}
body.cine[data-page="home"] .vcar-sound-state strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
body.cine[data-page="home"] .vcar-sound-state span { color: var(--muted); font-size: 11px; }

@media (max-width: 820px) {
    body.cine[data-page="home"] .vcar-band { padding-block: var(--wr-home-space, 50px) var(--wr-home-space, 64px); }
    body.cine[data-page="home"] .vcar-head { display: block; margin-bottom: 28px; }
    body.cine[data-page="home"] .vcar-head h2 { font-size: clamp(36px, 12vw, 52px); }
    body.cine[data-page="home"] .vcar-trust { margin-top: 18px; max-width: 100%; font-size: 11px; letter-spacing: .08em; line-height: 1.5; }
    body.cine[data-page="home"] .vcar-stage { height: 300px; }
    body.cine[data-page="home"] .vcar-item { width: clamp(108px, 31vw, 130px); }
    body.cine[data-page="home"] .vcar-item.is-left-1 {
        transform: translateX(calc(-50% - 112px)) translateY(20px) rotate(-3deg) scale(.94);
    }
    body.cine[data-page="home"] .vcar-item.is-right-1 {
        transform: translateX(calc(-50% + 112px)) translateY(20px) rotate(3deg) scale(.94);
    }
    body.cine[data-page="home"] .vcar-item.is-left-2 {
        transform: translateX(calc(-50% - 214px)) translateY(46px) rotate(-5deg) scale(.86);
    }
    body.cine[data-page="home"] .vcar-item.is-right-2 {
        transform: translateX(calc(-50% + 214px)) translateY(46px) rotate(5deg) scale(.86);
    }
    body.cine[data-page="home"] .vcar-item.is-left-3,
    body.cine[data-page="home"] .vcar-item.is-right-3 { opacity: 0; pointer-events: none; }
    body.cine[data-page="home"] .vcar-controls {
        display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px;
        grid-template-areas: 'prev progress next' 'sound sound sound';
        gap: 12px 18px; width: min(100%, 380px); margin: 10px auto 0;
    }
    body.cine[data-page="home"] .vcar-controls .prev { grid-area: prev; }
    body.cine[data-page="home"] .vcar-controls .next { grid-area: next; }
    body.cine[data-page="home"] .vcar-progress { grid-area: progress; width: 100%; height: 3px; }
    body.cine[data-page="home"] .vcar-sound-state { grid-area: sound; min-width: 0; width: 100%; gap: 4px; overflow-wrap: anywhere; }
    body.cine[data-page="home"] .vcar-sound-state strong { font-size: 11px; }
    body.cine[data-page="home"] .vcar-sound-state span { font-size: 12px; line-height: 1.5; }
    body.cine[data-page="home"] .vcar[data-count="1"] .vcar-controls { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'progress' 'sound'; }
}

@media (prefers-reduced-motion: reduce) {
    body.cine[data-page="home"] .vcar-item,
    body.cine[data-page="home"] .vcar-item figcaption,
    body.cine[data-page="home"] .vcar-controls .vcar-nav { transition: none; }
}

/* ── product page extras ─────────────────────────────────────────────────── */
body.cine .comment-item { background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 18px; display: grid; gap: 8px; }
body.cine .comment-item strong { font-weight: 500; font-size: 14px; }
body.cine .comment-item p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* ── support chat widget ─────────────────────────────────────────────────── */
body.cine .chat-fab {
    background: var(--brass); color: var(--ink); border: 0; border-radius: 4px;
    box-shadow: 0 18px 36px -18px rgba(10, 22, 38, .6); font-family: var(--sans); font-weight: 500;
}
body.cine .chat-fab:hover { background: var(--brass-lt); }
body.cine .chat-fab-label { font-size: 13px; letter-spacing: .02em; }
body.cine .chat-badge { background: var(--ember); color: #fff; font-weight: 600; }
body.cine .chat-panel {
    background: var(--bone); border: 1px solid var(--line); border-radius: 4px;
    box-shadow: 0 30px 60px -30px rgba(10, 22, 38, .6); overflow: hidden;
}
body.cine .chat-head { background: var(--ink); color: var(--bone); }
body.cine .chat-head-text strong { font-family: var(--serif); font-weight: 400; font-size: 16px; letter-spacing: .01em; }
body.cine .chat-close { color: var(--bone); min-width: 44px; min-height: 44px; border-radius: 4px; }
body.cine .chat-close:hover { color: var(--bone); }
/* background-color, NOT the `background` shorthand: the shorthand resets
   background-image to none, and this file loads after the rule that puts the
   logo there — which is why every brand avatar rendered as a plain gold disc. */
body.cine .chat-avatar { background-color: var(--brass); color: var(--ink); font-family: var(--serif); }
/* No colour behind it — the artwork supplies its own. A bone fill here showed
   as a faint ring wherever the two bones disagreed by a shade. */
body.cine .chat-avatar.brand { background-color: transparent; }
body.cine .chat-dot { background: #5FBE8A; }
body.cine .chat-log, body.cine .chat-scroll { background: var(--bone); }
body.cine .chat-intro-lead { font-family: var(--serif); font-size: 19px; line-height: 1.3; max-width: 24ch; color: var(--text); }
body.cine .chat-intro-note, body.cine .chat-hours-list, body.cine .chat-empty { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
body.cine .chat-empty-title { font-family: var(--serif); font-size: 19px; color: var(--text); }
body.cine .chat-form { border-top: 1px solid var(--line); background: var(--bone); }
body.cine .chat-field { border-radius: 4px; }
body.cine .chat-field textarea { min-width: 0; font-size: 16px; }
body.cine .chat-send { width: 44px; height: 44px; }
body.cine .chat-msg p { overflow-wrap: anywhere; }
body.cine .chat-panel :focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
body.cine.chat-open .chat-fab,
body.cine.chat-open .to-top { visibility: hidden; }
@media (max-width: 820px) {
    body.cine .chat-fab { right: 14px; bottom: calc(78px + env(safe-area-inset-bottom)); min-width: 48px; min-height: 48px; justify-content: center; padding: 10px; }
    body.cine .chat-fab-label { display: none; }
    body.cine .chat-panel {
        top: var(--chat-vtop, 0px); left: var(--chat-vleft, 0px); right: auto; bottom: auto;
        width: var(--chat-vw, 100%); height: 100vh; height: var(--chat-vh, 100dvh);
        max-height: none; min-height: 0; border: 0; border-radius: 0; z-index: 1000;
        animation: none;
    }
    body.cine.chat-open { overflow: hidden; }
    body.cine.chat-open .tabbar { display: none; }
    body.cine .chat-panel .chat-head {
        padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left));
    }
    body.cine .chat-head-text strong { font-family: var(--sans); font-size: 16px; font-weight: 600; }
    body.cine .chat-panel .chat-head-text span { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
    body.cine .chat-close { padding: 10px; }
    body.cine .chat-close span { display: none; }
    body.cine .chat-form { padding: 10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
    body.cine .chat-log { padding: 16px 12px; }
    body.cine .chat-row { max-width: 94%; }
}
@media (prefers-reduced-motion: reduce) {
    body.cine .chat-panel { animation: none; }
    body.cine .chat-scroll { scroll-behavior: auto; }
}
body.cine .chat-send { background: var(--brass); color: var(--ink); border: 0; border-radius: 4px; }
body.cine .chat-send:hover { background: var(--brass-lt); }
body.cine .chat-error { color: var(--ember); font-size: 13px; }
body.cine .chat-jump { background: var(--ink); color: var(--bone); border-radius: 4px; font-size: 12.5px; }

/* ── responsive for the components above ─────────────────────────────────── */
@media (max-width: 1080px) {
    body.cine .cart-layout, body.cine .co-layout { grid-template-columns: 1fr; }
    body.cine .cart-summary, body.cine .co-summary { position: static; }
    body.cine .celeb-grid { grid-template-columns: repeat(3, 1fr); }
    body.cine .about-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
    body.cine .cart-row {
        grid-template-columns: auto 72px 1fr auto;
        grid-template-areas: 'sel img info remove' '. . qty line';
        row-gap: 12px;
    }
    body.cine .cart-row > .check { grid-area: sel; }
    body.cine .cart-thumb { grid-area: img; }
    body.cine .cart-thumb img { width: 88px; height: 88px; }   /* square here too */
    body.cine .cart-info { grid-area: info; }
    body.cine .cart-row > .qty-stepper { grid-area: qty; }
    body.cine .cart-line { grid-area: line; justify-self: end; }
    body.cine .row-remove { grid-area: remove; }

    body.cine .auth-scene { grid-template-columns: 1fr; min-height: 0; }
    body.cine .auth-side { min-height: 34svh; }
    body.cine .auth-scene-login .auth-side-in {
        width: min(calc(100% - 40px), 620px);
        min-height: 0;
        padding: clamp(32px, 8vw, 48px) 24px;
    }
    body.cine .story-split { grid-template-columns: 1fr; }
    body.cine .story-split.flip .story-media { order: 0; }
    body.cine .branch-list { grid-template-columns: 1fr; }
    body.cine .profile-grid, body.cine .field-row { grid-template-columns: 1fr; }
    body.cine .celeb-grid { grid-template-columns: repeat(2, 1fr); }
    body.cine .co-item { grid-template-columns: 56px 1fr auto; }
}

/* ── last four leftovers: style.css rules that fight the new system ──────── */
/* The statement's stats read as one left-aligned row; centring each cell broke
   the shared left edge. */
body.cine .cine-stats-row .stat { text-align: left; }
body.cine .co-saved-line { color: var(--muted); font-size: 13px; margin-top: 2px !important; }
body.cine .sum-count { font: 500 12px var(--sans); color: var(--muted); margin-left: 6px; }
/* Three input radii on one page (2px, 12px, 999px) reads as a rendering fault. */
body.cine .chat-intro input { border-radius: 4px; }   /* a pill reads as a chip, not a field */

@media (max-width: 820px) {
    body.cine .about-body { grid-template-columns: 1fr; }
}

/* ── full-width fields, scoped ───────────────────────────────────────────────
   V5 dropped `width: 100%` from the shared input rule, which is why the checkout
   fields collapsed to their intrinsic size and sat beside their own labels. It
   goes back on the form contexts that need it rather than on every input: a
   blanket rule sits later in the file than `.qty-stepper input`, matches at the
   same specificity, and would win on source order — stretching the quantity box
   across the row. */
body.cine .co-fields input:not([type=checkbox]):not([type=radio]),
body.cine .co-fields select, body.cine .co-fields textarea,
body.cine .field-row input:not([type=checkbox]):not([type=radio]),
body.cine .field-row select, body.cine .field-row textarea,
body.cine .loc-body input:not([type=checkbox]):not([type=radio]),
body.cine .loc-body select, body.cine .loc-body textarea,
body.cine .auth-card input, body.cine .auth-card select, body.cine .auth-card textarea {
    width: 100%;
}

/* ── decorative layers must never own a click ────────────────────────────────
   Every layer here is paint, not control. A positioned element without
   pointer-events:none silently receives the click aimed at whatever sits under
   it — the quick-view pill did exactly that before it was scoped. This makes
   the whole decorative set structurally unable to repeat it. */
body.cine .cine-hero-scrim,
body.cine .cine-hero-stage,
body.cine .hero-slides,
body.cine .cine-marq,
body.cine .cine-hero-drift { pointer-events: none; }

/* The toast rail floats over page content at z-500 for 3 seconds per message.
   The rail passes clicks through; only the pill itself is solid. */
body.cine .toasts { pointer-events: none; }
body.cine .toast { pointer-events: auto; }

/* ── contrast repairs found by the site-wide audit ───────────────────────────
   Each of these set an accent colour as TEXT on a light surface. Same hue,
   darkened until it clears WCAG AA — the look holds, the words are readable. */
body.cine .pcard-star svg { fill: var(--brass); stroke: none; }

/* Large display accents. --brass is 2.15:1 on bone, under the 3:1 that even
   headline-sized text needs; this is the same gold, deep enough to read. */
body.cine .cine-s2 h2 em,
body.cine .cine-stat strong em { color: var(--brass-dp); }

/* Darkening --muted for light backgrounds pushed it the wrong way on the dark
   bands, where it landed at 2.93:1. Secondary copy there takes a bone tint —
   the same split the buttons needed. Any new dark band belongs on this list. */
body.cine .cine-dark .kicker, body.cine .cine-dark .cine-eyebrow,
body.cine .cine-hero .kicker, body.cine .cine-hero .cine-eyebrow,
body.cine .cine-feat .kicker,
body.cine .cine-cta .kicker,  body.cine .cine-cta .cine-eyebrow,
body.cine .site-footer .kicker { color: rgba(244, 240, 233, .68); }

/* .about-cta sits on bone here, but style.css colours its paragraph #B9C6D4 —
   a footer tone meant for navy. On bone that is 1.53:1: effectively invisible. */
body.cine .about-cta p { color: var(--muted); }


/* ── scene 05: the product story ─────────────────────────────────────────────
   Ported from the v2 prototype's own rules. The prototype gives .s4 a height of
   300vh and makes .stage sticky inside it — the pin is CSS, not a library. The
   only change here is that the section's height follows the number of points
   rather than being fixed at three screens, so three points do not leave a
   blank screen at the end. */
body.cine .cine-story { position: relative; background: var(--ink); color: var(--bone); }
body.cine .cine-story-stage {
    position: sticky; top: 0; height: 100vh; height: 100svh;
    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
    gap: clamp(28px, 5vw, 80px); padding: 0 var(--pad); overflow: hidden;
}
body.cine .cine-story-frame {
    position: relative; height: min(74svh, 620px); overflow: hidden;
    border-radius: 2px; background: var(--ink-2);
}
body.cine .cine-story-shot {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity .55s var(--ease);
}
body.cine .cine-story-shot.on { opacity: 1; }
body.cine .cine-story-list { display: grid; gap: clamp(10px, 1.8vh, 22px); max-height: 100svh; align-content: center; }
body.cine .cine-story-feat {
    display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline;
    opacity: .26; transition: opacity .5s var(--ease);
}
body.cine .cine-story-feat.on { opacity: 1; }
body.cine .cine-story-feat u { text-decoration: none; font-size: 11px; letter-spacing: .2em; color: var(--brass); padding-top: 8px; }
body.cine .cine-story-feat h3 { margin: 0; font-family: var(--serif); font-size: clamp(26px, 3.4vw, 48px); font-weight: 400; line-height: 1.05; }
body.cine .cine-story-feat p {
    margin: 8px 0 0; color: rgba(244, 240, 233, .62); font-size: 14.5px; max-width: 38ch;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .55s var(--ease), opacity .4s;
}
body.cine .cine-story-feat.on p { max-height: 120px; opacity: 1; }
/* The scroll distance. Each spacer is one screen, so the stage holds while the
   reader moves through the points. Decorative and never clickable. */
body.cine .cine-story-steps { position: relative; margin-top: -100svh; pointer-events: none; }
body.cine .cine-story-step { height: 100svh; }

/* Narrow screens get the prototype's own fallback: nothing sticks, every point
   is open, and the section is only as tall as its content. */
@media (max-width: 820px) {
    body.cine .cine-story-stage {
        position: static; height: auto; grid-template-columns: 1fr;
        padding: var(--wr-home-space, clamp(60px, 10vh, 100px)) var(--pad);
    }
    body.cine .cine-story-frame { height: 46svh; }
    body.cine .cine-story-list { gap: 22px; margin-top: 32px; }
    body.cine .cine-story-feat { opacity: 1; }
    body.cine .cine-story-feat p { max-height: 120px; opacity: 1; }
    body.cine .cine-story-steps { display: none; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    body.cine .cine-story-feat { opacity: 1; }
    body.cine .cine-story-feat p { max-height: 120px; opacity: 1; }
}

/* ── scene 00: curtain ───────────────────────────────────────────────────────
   Homepage only, once per session (header.php sets the guard inline). The panel
   lifts itself and then takes visibility with it, so it can never sit invisible
   over the page swallowing clicks. */
body.cine .cine-curtain {
    /* Above the fixed header (400) and toasts (500): while it plays it covers
       everything, exactly like the prototype. */
    position: fixed; inset: 0; z-index: 600; background: var(--ink);
    display: grid; place-items: center;
    animation: cineLift .95s .35s cubic-bezier(.76, 0, .24, 1) forwards;
}
body.cine .cine-curtain span {
    font-family: var(--serif); font-size: clamp(28px, 6vw, 54px); color: var(--bone);
    opacity: 0; animation: cineCurtainIn .5s .1s var(--ease) forwards;
}
body.cine .cine-curtain span b {
    color: var(--brass); font-weight: 400; font-size: .42em;
    vertical-align: .9em; letter-spacing: .18em; margin-left: .35em;
}
@keyframes cineCurtainIn { to { opacity: 1; } }
@keyframes cineLift { to { transform: translateY(-101%); visibility: hidden; } }
/* Second visit in the same tab, and anyone who asked for less motion: never painted. */
html.cine-curtain-off body.cine .cine-curtain { display: none; }
@media (prefers-reduced-motion: reduce) { body.cine .cine-curtain { display: none; } }

/* ── scene 01: hero drift + progressive dark ─────────────────────────────────
   Both hang off the hero's own exit range, so they track the scroll that carries
   the hero away without a single scroll listener. */
body.cine .cine-hero-dark {
    position: absolute; inset: 0; background: var(--ink-3); opacity: 0; pointer-events: none;
}

/* ── scene 03: the word behind the product ───────────────────────────────── */
body.cine .cine-bigword {
    position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
    z-index: 0; pointer-events: none; user-select: none; white-space: nowrap;
    font-family: var(--serif); font-weight: 400; line-height: 1;
    font-size: clamp(56px, min(23vw, calc(170vw / var(--cine-word-len, 6))), 330px); letter-spacing: .03em;
    color: rgba(10, 22, 38, .07); text-transform: uppercase;
}
body.cine .cine-spot-grid { position: relative; z-index: 1; }

/* ── scene 03: crossfading frame ─────────────────────────────────────────────
   The active shot sets the natural frame height; inactive shots stay layered
   for the existing opacity transition. PHP always marks the first shot .on. */
body.cine .cine-spot-shot {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    opacity: 0; transition: opacity .6s var(--ease);
}
body.cine .cine-spot-shot.on { position: relative; opacity: 1; }

/* ── scene 03: finish switcher ───────────────────────────────────────────── */
body.cine .cine-swatch-wrap { display: grid; gap: 12px; }
body.cine .cine-swatch { display: flex; gap: 10px; flex-wrap: wrap; }
body.cine .cine-sw {
    width: 42px; height: 42px; padding: 0; border-radius: 4px; cursor: pointer;
    border: 1px solid var(--line); background-color: var(--bone-2);
    background-size: cover; background-position: center;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
body.cine .cine-sw:hover { transform: scale(1.06); }
body.cine .cine-sw[aria-pressed="true"] {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px var(--bone), 0 0 0 3px var(--brass);
}

/* ── scene 04: compact category tabs ─────────────────────────────────────── */
body.cine .cine-feat-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px; }
body.cine .cine-chips {
    display: flex; gap: clamp(18px, 2.2vw, 30px); max-width: 100%;
    overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none;
}
body.cine .cine-chips::-webkit-scrollbar { display: none; }
body.cine .cine-chip {
    position: relative; flex: none; min-height: 44px; padding: 0 1px; cursor: pointer;
    border: 0; background: transparent; font-family: var(--sans); font-size: 12px;
    letter-spacing: .03em; color: rgba(244, 240, 233, .58);
    transition: color .2s var(--ease);
}
body.cine .cine-chip::after {
    content: ""; position: absolute; right: 0; bottom: 4px; left: 0; height: 1px;
    background: var(--brass); transform: scaleX(0); transform-origin: left;
    transition: transform .24s var(--ease);
}
body.cine .cine-chip:hover,
body.cine .cine-chip:focus-visible,
body.cine .cine-chip[aria-pressed="true"] { color: var(--bone); }
body.cine .cine-chip[aria-pressed="true"]::after { transform: scaleX(1); }

/* ── motion for the pieces above ─────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        body.cine.cine-anim .cine-hero-dark,
        body.cine.cine-anim .cine-bigword {
            animation: linear both;
            animation-timeline: view();
        }
        body.cine.cine-anim .cine-hero-dark {
            animation-name: cineHeroDark; animation-range: exit 0% exit 100%;
        }
        body.cine.cine-anim .cine-bigword {
            animation-name: cineWordDrift; animation-range: cover 0% cover 100%;
        }
    }
}
@keyframes cineHeroDark { from { opacity: 0; } to { opacity: .62; } }
/* Widened from -42%/-58%. The word now travels roughly twice the distance the
   product photo does, so the two read as separate planes instead of one image
   with text baked into it. */
@keyframes cineWordDrift { from { transform: translate(-50%, -30%); } to { transform: translate(-50%, -72%); } }

/* ── responsive for the pieces above ─────────────────────────────────────── */
@media (max-width: 820px) {
    body.cine .cine-bigword { font-size: clamp(40px, min(20vw, calc(150vw / var(--cine-word-len, 6))), 120px); top: 30%; }
    body.cine .cine-feat-head { align-items: flex-start; }
    body.cine .cine-sw { width: 38px; height: 38px; }
}

/* ── bundles ─────────────────────────────────────────────────────────────────
   One block, six surfaces. It reads as a single purchasable thing, not a list
   of products that happen to sit together. */
body.cine .bundle-qty { width: 52px; text-align: center; }
body.cine .bundle-remove { background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 6px; }
body.cine .bundle-remove:hover { color: var(--ember); }
body.cine .bundle-dead { color: var(--muted); }
/* On a receipt the tag has no colour to spend, so the border carries it. */
@media print {
    .bundle-line { background: none; border: 1px solid #999; }
    .bundle-tag { background: none; color: #000; border: 1px solid #000; }
}

/* ── compact product-page bundle recommendation ──────────────────────────────
   The summary carries the recommendation; the existing shared bundle block is
   revealed only when a customer asks for the full breakdown. */
body.cine[data-page="product"] .pdp-bundle {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
    background: rgba(255,255,255,.38);
}
body.cine[data-page="product"] .pdp-bundle > summary {
    min-height: 94px;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    list-style: none;
}
body.cine[data-page="product"] .pdp-bundle > summary::-webkit-details-marker { display: none; }
body.cine[data-page="product"] .pdp-bundle > summary:hover { background: rgba(255,255,255,.5); }
body.cine[data-page="product"] .pdp-bundle-images { display: flex; align-items: center; gap: 7px; }
body.cine[data-page="product"] .pdp-bundle-images img {
    width: 58px;
    height: 58px;
    padding: 3px;
    object-fit: contain;
    border-radius: 4px;
    background: rgba(255,255,255,.72);
}
body.cine[data-page="product"] .pdp-bundle-images b { color: var(--ink); font-size: 15px; font-weight: 500; }
body.cine[data-page="product"] .pdp-bundle-copy { min-width: 0; display: grid; gap: 1px; }
body.cine[data-page="product"] .pdp-bundle-copy small {
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}
body.cine[data-page="product"] .pdp-bundle-copy strong {
    overflow: hidden;
    color: var(--text);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.2;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.cine[data-page="product"] .pdp-bundle-copy em {
    color: var(--brass-ink);
    font-size: 12px;
    line-height: 1.35;
    font-style: normal;
    font-weight: 600;
}
body.cine[data-page="product"] .pdp-bundle-link {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--ink);
    font-size: 12px;
    white-space: nowrap;
}
body.cine[data-page="product"] .pdp-bundle-link svg {
    width: 16px; height: 16px; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .2s var(--ease);
}
body.cine[data-page="product"] .pdp-bundle[open] .pdp-bundle-link svg { transform: rotate(90deg); }
body.cine[data-page="product"] .pdp-bundle-body {
    padding: 14px;
    display: grid;
    gap: 14px;
    border-top: 1px solid var(--line);
    background: var(--bone);
}
body.cine[data-page="product"] .pdp-bundle-body .bundle-line { border: 0; padding: 0; background: none; }
body.cine[data-page="product"] .pdp-bundle-body .bundle-line-head { display: none; }
body.cine[data-page="product"] .pdp-bundle-body .bundle-body { grid-template-columns: 1fr; gap: 9px; margin: 0 0 10px; }
body.cine[data-page="product"] .pdp-bundle-body .bundle-good {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 7px;
}
body.cine[data-page="product"] .pdp-bundle-body .bundle-good-img { width: 54px; height: 54px; }
body.cine[data-page="product"] .pdp-bundle-body .bundle-good-name { font-size: 12.5px; }
body.cine[data-page="product"] .pdp-bundle-body .bundle-good-price { font-size: 12px; }
body.cine[data-page="product"] .pdp-bundle-body .bundle-plus { font-size: 13px; }
body.cine[data-page="product"] .pdp-bundle-body .bundle-money {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
    padding: 0;
    background: none;
}
body.cine[data-page="product"] .pdp-bundle-body .bundle-now { font-size: 19px; }
body.cine[data-page="product"] .pdp-bundle-body .btn { width: 100%; }

@media (max-width: 520px) {
    body.cine[data-page="product"] .pdp-bundle > summary {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }
    body.cine[data-page="product"] .pdp-bundle-images img { width: 48px; height: 48px; }
    body.cine[data-page="product"] .pdp-bundle-link {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 360px) {
    body.cine[data-page="product"] .pdp-bundle-images img { width: 42px; height: 42px; }
    body.cine[data-page="product"] .pdp-bundle-body .bundle-good { grid-template-columns: 48px minmax(0, 1fr); }
    body.cine[data-page="product"] .pdp-bundle-body .bundle-good-img { width: 48px; height: 48px; }
    body.cine[data-page="product"] .pdp-bundle-body .bundle-good-price { grid-column: 2; justify-self: start; }
}

/* ── homepage refresh ────────────────────────────────────────────────────────
   Same three colours, used with more discipline. Everything here is CSS
   scroll-timeline or IntersectionObserver: V3 removed GSAP, ScrollTrigger and
   Lenis from this page because 143KB of scroll library made it unscrollable, and
   nothing below reintroduces that cost. */

/* The rule above the hero eyebrow, drawn left to right. */
body.cine .cine-rule-draw {
    display: block; height: 1px; width: 0; background: var(--brass);
    margin-bottom: 18px;
}
@media (prefers-reduced-motion: no-preference) {
    body.cine.cine-anim .cine-rule-draw { animation: cineRuleDraw 1.1s .55s var(--ease) forwards; }
}
@media (prefers-reduced-motion: reduce) { body.cine .cine-rule-draw { width: 56px; } }
@keyframes cineRuleDraw { to { width: 56px; } }

/* Headline lines arrive on their own beat rather than together — the single
   change that most separates "large type" from "considered type". */
@media (prefers-reduced-motion: no-preference) {
    body.cine.cine-anim .cine-hero-in .cine-ln > i { animation-delay: .70s; }
    body.cine.cine-anim .cine-hero-in .cine-ln:nth-child(2) > i { animation-delay: .92s; }
    body.cine.cine-anim .cine-hero-sub { animation: cineHeroRise .9s 1.15s var(--ease) both; }
    body.cine.cine-anim .cine-hero-cta { animation: cineHeroRise .9s 1.32s var(--ease) both; }
}
/* Named apart from cineRise, which already exists at 26px and drives the site's
   reveal system. Redefining that name would have shortened every reveal on the
   page — a change nobody asked for, in a file nobody would think to check. */
@keyframes cineHeroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* The statement's stat row draws its own top edge as it enters. */
body.cine .cine-stats-row { position: relative; }
body.cine .cine-stats-row::before {
    content: ''; position: absolute; left: 0; top: 0; height: 1px; width: 0;
    background: var(--line);
}
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        body.cine.cine-anim .cine-stats-row::before {
            animation: cineRuleWide linear both;
            animation-timeline: view();
            animation-range: entry 10% entry 70%;
        }
    }
}
@keyframes cineRuleWide { to { width: 100%; } }

/* Collections: tiles rise in a stagger, then lift under the cursor. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        body.cine.cine-anim .cine-col-row {
            animation: cineTileIn linear both;
            animation-timeline: view();
            animation-range: entry 5% entry 55%;
        }
    }
}
@keyframes cineTileIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
body.cine .cine-col-row { transition: transform .6s var(--ease); }
body.cine .cine-col-row:hover { transform: translateY(-4px); }

/* The closing band's backdrop drifts against its type, so the two separate as
   you approach it rather than arriving as one flat plate. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        body.cine.cine-anim .cine-cta > img {
            animation: cineCtaDrift linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 100%;
        }
    }
}
@keyframes cineCtaDrift { from { transform: scale(1.10) translateY(-2.5%); } to { transform: scale(1.10) translateY(2.5%); } }


/* The spotlight photo drifts gently AGAINST the ghost word behind it. Small on
   purpose: the word does the travelling, the product stays readable. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        body.cine.cine-anim .cine-spot-frame {
            animation: cineSpotDrift linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 100%;
        }
    }
}
@keyframes cineSpotDrift { from { transform: translateY(3%); } to { transform: translateY(-3%); } }

/* The product itself stays fully inside the frame. The frame still drifts, but
   the generic 1.08 image zoom is disabled here because it re-crops the edges. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        body.cine.cine-anim .cine-spot-frame.cine-drift img {
            animation: none; transform: none;
        }
    }
}


/* ── chat panel: layout repair ───────────────────────────────────────────────
   The two-step intro added wrapper divs inside .chat-intro, and the form's own
   grid then laid out the WRAPPERS instead of the fields — which is why the
   Continue button and its note ended up side by side on one line. Each step
   gets its own stack. */
body.cine .chat-intro { display: block; text-align: left; padding: 24px 18px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--bone); }
body.cine .chat-intro > .chat-avatar { display: none; }
body.cine .chat-intro > div { display: grid; gap: 16px; max-width: 420px; margin-inline: auto; }
body.cine .chat-intro-lead { margin: 0; line-height: 1.3; }
body.cine .chat-intro-note { margin: 0; }   /* line-height lives with the type size above */
body.cine .chat-intro input { width: 100%; max-width: none; height: 48px; font-size: 16px; text-align: left; padding-inline: 12px; }
body.cine .chat-intro .btn { width: 100%; max-width: none; min-height: 48px; height: auto; padding: 12px; border-radius: 4px; }
body.cine .chat-intro-note { max-width: none; font-size: 14px; }
body.cine .chat-branch-pick { margin: 0; gap: 10px; }
body.cine .chat-branch-opt { width: 100%; min-height: 56px; border-radius: 4px; padding: 14px; text-align: left; white-space: normal; }
body.cine .chat-branch-opt strong { font-size: 15px; }
body.cine .chat-branch-opt small { font-size: 13px; line-height: 1.4; }
body.cine .chat-branch-opt.on { border-color: var(--brass); background: var(--bone-2); }
body.cine .chat-back { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; justify-self: start; }
body.cine .chat-empty { font-size: 15px; line-height: 1.5; max-width: 28ch; align-self: center; }
/* The logo needs room to breathe inside the disc; cover crops it to its edges. */
/* cover, not 74%: this artwork already carries its own circular bone field and
   transparent corners, so insetting it drew a disc inside a disc. The element's
   border-radius clips the transparent corners cleanly. */
body.cine .chat-avatar.brand { background-size: cover; background-repeat: no-repeat; background-position: center; }
body.cine .chat-avatar.brand.lg { width: 54px; height: 54px; }

/* Header: the title and its line are the only things that should read loudly. */
body.cine .chat-head { padding: 14px 16px; }
body.cine .chat-head-text span { font-size: 12.5px; color: rgba(244, 240, 233, .68); }

/* Branch hours sit apart from the question above them. */
body.cine .chat-hours { margin-top: 4px; }
body.cine .chat-hours-list li { padding: 7px 0; }

/* Back to top. Sits above the tab bar on phones so it never covers a nav item. */
body.cine .to-top {
    /* The chat launcher owns this corner at right:20 bottom:20. Sitting 4px
       above it at a higher z-index simply covered it, so this stacks clear of
       the launcher's height instead of sharing its space. */
    position: fixed; right: 20px; bottom: 84px; z-index: 110;   /* under .chat-fab (120) */
    width: 44px; height: 44px; border-radius: 4px; cursor: pointer;
    display: grid; place-items: center;
    border: 1px solid rgba(244, 240, 233, .3); background: var(--ink); color: var(--bone);
    box-shadow: 0 10px 24px -12px rgba(10, 22, 38, .6);
    transition: background .3s, transform .3s var(--ease);
}
body.cine .to-top:hover { background: var(--brass); color: var(--ink); transform: translateY(-2px); }
@media (max-width: 820px) {
    /* On phones the launcher already sits above the tab bar at bottom:76px, so
       this clears both: tab bar, then launcher, then button. */
    body.cine .to-top { bottom: calc(140px + env(safe-area-inset-bottom)); right: 14px; }
}
@media print { .to-top { display: none; } }


/* ── chat: less preamble, tighter rhythm ─────────────────────────────────────
   The header avatar was rendering as a bare gold disc: .chat-avatar sets a
   linear-gradient BACKGROUND, and a gradient is a background-image — so it
   painted straight over the logo. background-image must be cleared explicitly
   for the brand avatar; background-color alone cannot win against it. */
body.cine .chat-head .chat-avatar.brand,
body.cine .chat-avatar.brand {
    background-image: url('../img/wellrest-chat.webp');
    background-color: transparent;
}

/* One question on screen at a time. The intro is the whole panel until a name
   is given, so it gets the room instead of sharing it with an empty log. */
/* Nothing to scroll behind a one-question screen. */
body.cine .chat-panel.is-intro .chat-scroll { display: none; }
body.cine .pcard .wish-btn { z-index: 5; }

@media (max-width: 820px) {
    /* 44px minimum touch target on phones, up from the 40px desktop size. */
    body.cine .wish-btn { width: 44px; height: 44px; }
}

/* ── mattress cutaway: desktop only ──────────────────────────────────────────
   Hidden below 821px, by decision. The scroll-driven stack needs a tall pinned
   stage and a viewport height that does not move; a mobile browser gives
   neither — the address bar hides, the page re-measures, and the composition
   breaks. Several attempts to adapt it made the page worse each time.

   display:none rather than visibility or opacity, so the nine layer images are
   never fetched on the connection where they cost the most.

   Appended at the END of the file on purpose: earlier blocks set this section
   to 540svh and 560svh inside their own media queries, and a rule placed above
   them would lose to those on specificity ties. */
@media (max-width: 820px) {
    body.cine .cine-cutaway,
    body.cine.cine-anim .cine-cutaway { display: none; }
}

/* ── cart on a phone: the marketplace row ────────────────────────────────────
   Modelled on how TikTok Shop, Shopee and Lazada lay out a cart line: a square
   thumbnail, the title clipped to one line, the chosen option under it as plain
   text, then price and stepper on the same baseline. The old row put the
   quantity on a second line under the image, which made every line ~140px tall
   and a five-item cart four screens long. */
@media (max-width: 820px) {
    /* :not(.cart-bundle-row) is the fix for the squeezed bundle. A bundle row
       carries .cart-row too, so this grid was applying to it — and with no grid
       area of its own the whole bundle auto-placed into the 88px thumbnail
       column, which is why it appeared crushed into a narrow strip with the rest
       of the row empty. */
    body.cine .cart-row:not(.cart-bundle-row) {
        grid-template-columns: auto 88px 1fr;
        grid-template-areas:
            'sel img info'
            'sel img price';
        column-gap: 12px; row-gap: 6px;
        align-items: start; padding: 14px 0;
    }
    /* The bundle keeps its own two-column shape: checkbox, then the card. */
    body.cine .cart-bundle-row {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: none;
        gap: 10px; align-items: start; padding: 14px 0;
    }
    /* Square, like every marketplace: a 4:3 crop of a bed photo shows bedding,
       a square shows the product. */
    body.cine .cart-thumb { grid-area: img; align-self: start; }
    body.cine .cart-thumb img { width: 88px; height: 88px; object-fit: cover; border-radius: 6px; }

    body.cine .cart-info { grid-area: info; min-width: 0; }
    /* One line, clipped. A three-line product name is what pushes the price out
       of sight on a narrow screen. */
    body.cine .cart-name {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; font-size: 14px; line-height: 1.35;
    }
    body.cine .cart-cat { display: none; }          /* the category repeats the name */
    body.cine .cart-variant {
        display: inline-block; margin-top: 5px; font-size: 12px; color: var(--muted);
        background: rgba(10, 22, 38, .06); padding: 3px 8px; border-radius: 4px;
    }

    /* Price and stepper share the row beneath the title. */
    body.cine .cart-row > .qty-stepper,
    body.cine .cart-row > .row-qty,
    body.cine .cart-line,
    body.cine .cart-unit { grid-area: price; }
    body.cine .cart-row > .qty-stepper { justify-self: end; align-self: center; }
    body.cine .cart-line { font-size: 17px; align-self: center; justify-self: start; }
    body.cine .cart-unit { display: none; }         /* the line total is the number that matters */
    body.cine .row-remove { grid-area: info; justify-self: end; align-self: start; }
}

/* ── checkout summary: the shipping breakdown ────────────────────────────────
   Shipping shown as its own sub-line, the way the screenshots do it, so a
   customer can see the fee separately from what it nets out to. */
@media (max-width: 820px) {
    body.cine .co-summary dl > div { padding: 7px 0; font-size: 14px; }
    body.cine .co-summary dl > div.is-saved { color: #17663F; }
    /* The total is the figure everything else adds up to; it should look it. */
    body.cine .co-summary .co-grand dt,
    body.cine .co-summary .co-grand dd { font-size: 17px; font-weight: 700; }
    /* Checkout item rows get the same square-thumbnail treatment as the cart. */
    body.cine .co-items li { display: grid; grid-template-columns: 68px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; }
    body.cine .co-items img { width: 68px; height: 68px; object-fit: contain; border-radius: 6px; background: #fff; }
    body.cine .co-items strong { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ── bundle card ─────────────────────────────────────────────────────────────
   One connected card. Desktop puts the products in the main column and the
   money in a compact side summary; phones stack them full width. Both come from
   the same markup — no duplicated blocks to drift apart. */
body.cine .bundle-body {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
    gap: clamp(16px, 3vw, 32px); align-items: start; margin: 14px 0 16px;
}
body.cine .bundle-goods { display: grid; gap: 8px; min-width: 0; }

/* Each component is a row: thumbnail, text, price. */
body.cine .bundle-good {
    display: grid; grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 14px; align-items: center;
    background: #fff; border: 1px solid rgba(10, 22, 38, .09);
    border-radius: 8px; padding: 10px 14px 10px 10px;
}
body.cine .bundle-good-img {
    position: relative; display: block; width: 96px; height: 96px;
    border-radius: 6px; overflow: hidden; background: #fff;
}
/* contain, for the same reason as the cart thumbnails above. */
body.cine .bundle-good-img img { width: 100%; height: 100%; object-fit: contain; padding: 5px; display: block; }
body.cine .bundle-good-qty {
    position: absolute; right: 3px; bottom: 3px;
    background: var(--ink); color: var(--bone); font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 3px;
}
body.cine .bundle-good-txt { display: grid; gap: 4px; min-width: 0; }
body.cine .bundle-good-name {
    font-size: 14px; line-height: 1.35; color: var(--text);
    overflow-wrap: anywhere;                     /* a long unbroken name must not widen the row */
}
body.cine .bundle-good-var {
    justify-self: start; font-size: 11.5px; color: var(--muted);
    background: rgba(10, 22, 38, .06); padding: 2px 7px; border-radius: 4px;
}
body.cine .bundle-good-price { font-size: 13.5px; color: var(--muted); white-space: nowrap; }

/* Centred between the two rows, so the pair reads as one offer. */
body.cine .bundle-plus {
    justify-self: center; font-size: 16px; line-height: 1;
    color: var(--muted); padding: 1px 0;
}

/* The money: a summary block, not a form. */
body.cine .bundle-money {
    display: grid; gap: 5px; align-content: start;
    background: rgba(10, 22, 38, .04); border-radius: 8px; padding: 14px;
}
body.cine .bundle-was { font-size: 12.5px; color: var(--muted); }
body.cine .bundle-now { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 26px); color: var(--ink); line-height: 1.1; }
body.cine .bundle-save {
    justify-self: start; font-size: 12px; font-weight: 700; color: #17663F;
    background: rgba(23, 102, 63, .1); padding: 3px 9px; border-radius: 4px;
}

/* ── bundle card on phones ───────────────────────────────────────────────── */
@media (max-width: 820px) {
    /* Full width, stacked. The products keep their horizontal rows — a bundle
       squeezed into a narrow column is what made the names unreadable. */
    body.cine .bundle-body { grid-template-columns: 1fr; gap: 12px; margin: 12px 0 14px; }
    body.cine .bundle-good { grid-template-columns: 80px minmax(0, 1fr) auto; gap: 11px; padding: 9px 11px 9px 9px; }
    body.cine .bundle-good-img { width: 80px; height: 80px; }
    body.cine .bundle-good-name { font-size: 13.5px; }
    body.cine .bundle-good-price { font-size: 13px; }
    body.cine .bundle-money { padding: 12px; }
    /* Both actions full width and 44px tall — a finger, not a cursor. */
    body.cine .bundle-acts { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
    body.cine .bundle-acts .qty-stepper button { min-width: 44px; min-height: 44px; }
    body.cine .bundle-acts [data-bremove] { justify-self: end; min-height: 44px; display: inline-flex; align-items: center; }
}
/* Under 380px the price column has nowhere left to go, so it drops beneath the
   name rather than squeezing the name to two words per line. */
@media (max-width: 380px) {
    body.cine .bundle-good { grid-template-columns: 72px minmax(0, 1fr); }
    body.cine .bundle-good-img { width: 72px; height: 72px; }
    body.cine .bundle-good-price { grid-column: 2; justify-self: start; }
}


/* ── bundle card: the connected container ────────────────────────────────────
   One card, not a loose group. The badge and title share a line, the products
   and money sit inside the same bordered box, and the actions close it. */
body.cine .bundle-line {
    background: var(--bone-2, rgba(10, 22, 38, .035));
    border: 1px solid rgba(10, 22, 38, .12);
    border-radius: 10px; padding: clamp(14px, 2vw, 20px); min-width: 0;
}
body.cine .bundle-line-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0;
}
body.cine .bundle-tag {
    flex: none; background: var(--ink); color: var(--bone);
    font-size: 10px; font-weight: 700; letter-spacing: .14em;
    padding: 5px 10px; border-radius: 4px;
}
/* The title was breaking after two words because the head had no room. It gets
   the rest of the line and wraps only when it must. */
body.cine .bundle-title {
    font-family: var(--serif); font-weight: 400; font-size: clamp(15px, 1.5vw, 19px);
    line-height: 1.25; color: var(--ink); min-width: 0; overflow-wrap: anywhere;
}
/* Actions close the card: stepper left, remove right, on one line. */
body.cine .bundle-acts {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; padding-top: 12px;
    border-top: 1px solid rgba(10, 22, 38, .12);
}

@media (max-width: 820px) {
    body.cine .bundle-line { padding: 12px; border-radius: 8px; }
    body.cine .bundle-line-head { gap: 8px; }
    body.cine .bundle-title { font-size: 14.5px; }
    /* Enough room under the last control that the tab bar and the home
       indicator never sit on it. */
    body.cine .cart-layout { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ── cart: the checkout bar on phones ────────────────────────────────────────
   The summary sat after every product, so a customer with eight items scrolled
   past all of them to reach the button. It becomes a fixed bar directly above
   the tab bar instead — the subtotal and both actions always in reach.

   The whole .cart-summary is repositioned rather than the button moved out of
   it, so every id and JS selector stays exactly where the scripts expect
   (#sumCount, #sumSubtotal, #checkoutBtn). */
@media (max-width: 820px) {
    body.cine .cart-summary {
        position: fixed; left: 0; right: 0; z-index: 90;
        /* Clears the tab bar (52px + its own padding) and the home indicator. */
        bottom: calc(66px + env(safe-area-inset-bottom));
        /* One slim row: subtotal left, the two buttons right. 8px of padding
           and 36px buttons — the bar was reading as a second summary card
           rather than a strip. */
        margin: 0; border-radius: 0; padding: 8px 12px;
        /* Two columns, one row: subtotal, then the single button. The bar was
           stretching down the page because a second button wrapped to a new
           grid row, and the card's own height rules were let through. */
        display: grid; grid-template-columns: 1fr auto; grid-auto-rows: min-content;
        align-items: center; gap: 6px 8px;
        height: auto; min-height: 0; max-height: none; top: auto;
        background: rgba(255, 255, 255, .97);
        border-top: 1px solid var(--line, rgba(10, 22, 38, .12));
        box-shadow: 0 -8px 24px -16px rgba(10, 22, 38, .5);
        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    /* The item count and the shipping note are noise in a bar this size; the
       subtotal is the only figure that has to be there. */
    body.cine .cart-summary h2,
    body.cine .cart-summary .sum-note,
    body.cine .cart-summary .sum-row:not(:last-of-type) { display: none; }
    body.cine .cart-summary .sum-row {
        grid-column: 1; display: flex; align-items: baseline; gap: 6px;
        margin: 0; font-size: 12px; color: var(--muted);
    }
    body.cine .cart-summary .sum-row strong,
    body.cine .cart-summary .sum-row #sumSubtotal {
        font-family: var(--serif); font-size: 16px; color: var(--ink);
    }
    /* Both actions: "Check out selected" is disabled while nothing is ticked, so
       a bar carrying only that would be dead on arrival. */
    /* 36px, not 44: still a comfortable tap, but half a screen shorter across
       the two rows on a narrow phone. The tab bar beneath it is 44. */
    body.cine .cart-summary .btn {
        width: auto; min-height: 36px; height: 36px; padding: 0 12px; font-size: 12.5px;
        white-space: nowrap; border-radius: 4px;
    }
    /* Select-all already covers the whole cart, so one checkout action is enough. */
    body.cine .cart-summary #checkoutBtn { grid-column: 2; grid-row: 1; }
    body.cine .cart-summary .sum-row { grid-row: 1; }

    /* Room under the last product so the bar never covers it. */
    body.cine .cart-layout { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}
/* Under 400px the two buttons cannot share a line with the subtotal, so the
   subtotal takes the first row and the actions the second. */
/* One button fits beside the subtotal even at 320px, so no second layout. */

/* ===========================================================================
   Cart + checkout presentation refresh
   Approved direction: restrained cards, stronger hierarchy, phone-first bars
   ========================================================================== */

/* ── Cart: clear rows and a proper summary card ─────────────────────────── */
body.cine[data-page="cart"] { background: #f8f7f3; }
body.cine[data-page="cart"] .page-head { padding-bottom: 28px; }
body.cine[data-page="cart"] .page-head h1 {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    font-size: clamp(38px, 5vw, 60px);
}
body.cine[data-page="cart"] .cart-page-count {
    font: 400 15px var(--sans); color: var(--muted); white-space: nowrap;
}
body.cine[data-page="cart"] .section.pt-0 { padding-bottom: clamp(72px, 10vh, 110px); }
body.cine[data-page="cart"] .cart-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: clamp(24px, 3vw, 38px);
}
body.cine[data-page="cart"] .cart-main { min-width: 0; }
body.cine[data-page="cart"] .cart-toolbar {
    min-height: 52px; padding: 0 0 14px; margin-bottom: 14px;
    justify-content: space-between; border-bottom: 1px solid var(--line);
}
body.cine[data-page="cart"] .cart-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
body.cine[data-page="cart"] .cart-search { position: relative; display: flex; align-items: center; }
body.cine[data-page="cart"] .cart-search svg { position: absolute; left: 13px; color: var(--muted); pointer-events: none; }
body.cine[data-page="cart"] .cart-search input {
    width: min(260px, 28vw); min-height: 42px; padding: 9px 14px 9px 39px;
    background: #fff; border: 1px solid var(--line); border-radius: 5px;
}
body.cine[data-page="cart"] .cart-sort { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
body.cine[data-page="cart"] .cart-sort select {
    width: auto; min-width: 150px; min-height: 42px; border-radius: 5px; background-color: #fff;
}
body.cine[data-page="cart"] .cart-row {
    position: relative; grid-template-columns: auto 104px minmax(0, 1fr) auto auto auto;
    gap: 18px; padding: 18px; margin-bottom: 12px; background: #fff;
    border: 1px solid rgba(10, 22, 38, .11); border-radius: 8px;
    box-shadow: 0 5px 22px -22px rgba(10, 22, 38, .65);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.cine[data-page="cart"] .cart-row:has(.row-select:checked) {
    border-color: rgba(183, 146, 74, .55); box-shadow: 0 8px 26px -22px rgba(10, 22, 38, .65);
}
body.cine[data-page="cart"] .cart-row.cart-bundle-row {
    grid-template-columns: auto minmax(0, 1fr); padding: 16px 18px; align-items: start;
}
body.cine[data-page="cart"] .cart-thumb img {
    width: 104px; height: 104px; padding: 7px; object-fit: contain;
    border-radius: 6px; background: #fbfaf7;
}
body.cine[data-page="cart"] .cart-info { gap: 5px; align-content: center; }
body.cine[data-page="cart"] .cart-name { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink); }
body.cine[data-page="cart"] .cart-variant {
    justify-self: start; width: max-content; max-width: 100%; padding: 3px 8px;
    border-radius: 4px; background: rgba(10, 22, 38, .055); color: var(--muted); font-size: 12px;
}
body.cine[data-page="cart"] .cart-cat { color: var(--muted); }
body.cine[data-page="cart"] .cart-line { min-width: 104px; text-align: right; font-size: 21px; }
body.cine[data-page="cart"] .cart-row .qty-stepper { height: 42px; border-color: var(--line); }
body.cine[data-page="cart"] .cart-row .qty-stepper button { width: 38px; height: 40px; }
body.cine[data-page="cart"] .cart-row .qty-stepper input { width: 38px; }
body.cine[data-page="cart"] .row-remove { border-radius: 5px; }
body.cine[data-page="cart"] .bundle-line { background: #fbfaf7; border-color: rgba(10, 22, 38, .1); }
body.cine[data-page="cart"] .cart-summary {
    border-radius: 8px; padding: 24px; gap: 13px; top: 104px;
    box-shadow: 0 14px 40px -32px rgba(10, 22, 38, .7);
}
body.cine[data-page="cart"] .cart-summary-head { display: grid; gap: 4px; padding-bottom: 8px; }
body.cine[data-page="cart"] .cart-summary-head .cine-eyebrow { font-size: 10px; }
body.cine[data-page="cart"] .cart-summary h2 { font-size: 29px; }
body.cine[data-page="cart"] .cart-summary .sum-row { padding: 3px 0; }
body.cine[data-page="cart"] .cart-summary .sum-row:last-of-type {
    margin-top: 5px; padding-top: 14px; border-top: 1px solid var(--line);
}
body.cine[data-page="cart"] .cart-summary .sum-row:last-of-type strong { font-size: 28px; }
body.cine[data-page="cart"] .cart-summary .btn { min-height: 50px; border-radius: 5px; margin-top: 3px; }
body.cine[data-page="cart"] .cart-continue {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    padding: 8px; color: var(--text); font-size: 13px; text-decoration: underline; text-underline-offset: 4px;
}
body.cine[data-page="cart"] .cart-summary-trust {
    display: grid; gap: 12px; margin-top: 8px; padding-top: 17px; border-top: 1px solid var(--line);
}
body.cine[data-page="cart"] .cart-summary-trust span { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
body.cine[data-page="cart"] .cart-summary-trust b { color: var(--text); font-weight: 500; }
body.cine[data-page="cart"] .cart-summary-trust svg {
    width: 21px; height: 21px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ── Checkout: focused header, horizontal progress, trusted summary ─────── */
body.cine[data-page="checkout"] { background: #f8f7f3; padding-bottom: 0; }
body.cine[data-page="checkout"] .site-header { color: var(--ink); }
body.cine[data-page="checkout"] .site-header::after { background: var(--bone); opacity: 1; }
body.cine[data-page="checkout"] .brand-word { color: var(--bone); }
body.cine[data-page="checkout"] .brand-word b { color: var(--brass-lt); }
body.cine[data-page="checkout"] .main-nav,
body.cine[data-page="checkout"] .nav-toggle,
body.cine[data-page="checkout"] .header-actions,
body.cine[data-page="checkout"] .site-search,
body.cine[data-page="checkout"] .site-footer,
body.cine[data-page="checkout"] .tabbar,
body.cine[data-page="checkout"] .to-top { display: none !important; }
body.cine[data-page="checkout"] .checkout-secure-head {
    margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
    color: var(--muted); font-size: 12.5px;
}
body.cine[data-page="checkout"] .co-head { padding: 28px 0 24px; font-size: inherit; }
body.cine[data-page="checkout"] .co-head .container { gap: 12px; }
body.cine[data-page="checkout"] .co-head h1 { font-size: clamp(38px, 5vw, 54px); }
body.cine[data-page="checkout"] .co-steps {
    display: flex; align-items: center; justify-content: center; gap: 0;
    width: min(760px, 100%); margin: 2px auto 0; color: var(--muted); font-size: 13px;
}
body.cine[data-page="checkout"] .co-steps > li {
    display: flex; align-items: center; gap: 8px; padding: 0; white-space: nowrap;
}
body.cine[data-page="checkout"] .co-step-label { font-style: normal; }
body.cine[data-page="checkout"] .co-steps > li::before { display: none; }
body.cine[data-page="checkout"] .co-steps > li:not(:last-child)::after {
    content: ''; display: block; width: clamp(40px, 8vw, 110px); height: 1px;
    margin: 0 14px; background: rgba(183, 146, 74, .55);
}
body.cine[data-page="checkout"] .co-steps span {
    width: 28px; height: 28px; background: transparent; border: 1px solid var(--line);
    color: var(--muted); font: 500 12px var(--sans);
}
body.cine[data-page="checkout"] .co-steps .done span { background: transparent; border-color: var(--brass); color: var(--brass-ink); }
body.cine[data-page="checkout"] .co-steps .current { color: var(--ink); }
body.cine[data-page="checkout"] .co-steps .current span { background: var(--brass); border-color: var(--brass); color: #fff; }
body.cine[data-page="checkout"] .section.pt-0 { padding-bottom: 90px; }
body.cine[data-page="checkout"] .co-layout {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 430px); gap: clamp(22px, 3vw, 34px);
}
body.cine[data-page="checkout"] .co-card {
    border-radius: 8px; padding: 24px; gap: 14px;
    border-color: rgba(10, 22, 38, .11); box-shadow: 0 8px 30px -28px rgba(10, 22, 38, .7);
}
body.cine[data-page="checkout"] .co-card-head { align-items: center; margin: 0; }
body.cine[data-page="checkout"] .co-card-head h2 { font-size: 25px; }
body.cine[data-page="checkout"] .co-no {
    width: 36px; height: 36px; border-radius: 50%; background: var(--brass); color: #fff;
    font: 500 16px var(--sans);
}
body.cine[data-page="checkout"] .co-summary-no { display: none; }
body.cine[data-page="checkout"] .co-saved {
    padding: 17px 18px; background: #faf9f6; border: 1px solid rgba(10, 22, 38, .08); border-radius: 6px;
}
body.cine[data-page="checkout"] .co-saved-name { font-size: 15px; }
body.cine[data-page="checkout"] .co-change {
    min-height: 38px; padding: 7px 14px; border: 1px solid rgba(183, 146, 74, .75);
    border-radius: 5px; color: var(--brass-ink); text-decoration: none;
}
body.cine[data-page="checkout"] .pay-methods { gap: 8px; border: 0; overflow: visible; }
body.cine[data-page="checkout"] .pay-option {
    grid-template-columns: auto auto minmax(0, 1fr) auto; min-height: 66px;
    padding: 13px 15px; border-radius: 6px; background: #fff;
}
body.cine[data-page="checkout"] .pay-option.selected,
body.cine[data-page="checkout"] .pay-option:has(input:checked) {
    border-color: var(--brass); background: rgba(183, 146, 74, .055);
}
body.cine[data-page="checkout"] .pay-text strong { font-weight: 600; }
body.cine[data-page="checkout"] .pay-text small { color: var(--muted); }
body.cine[data-page="checkout"] .co-summary { top: 96px; gap: 16px; min-width: 0; }
body.cine[data-page="checkout"] .co-summary .co-card { padding: 22px; }
body.cine[data-page="checkout"] .co-items { margin: 0; min-width: 0; }
body.cine[data-page="checkout"] .co-item { padding: 11px 0; border-bottom: 1px solid rgba(10, 22, 38, .07); }
body.cine[data-page="checkout"] .co-item:last-child { border-bottom: 0; }
body.cine[data-page="checkout"] .co-item-img { border: 1px solid rgba(10, 22, 38, .08); padding: 4px; }
body.cine[data-page="checkout"] .co-item.co-bundle { display: block; min-width: 0; padding-top: 4px; }
body.cine[data-page="checkout"] .co-bundle-card {
    min-width: 0; overflow: hidden; border: 1px solid rgba(10, 22, 38, .11);
    border-radius: 7px; background: #fff;
}
body.cine[data-page="checkout"] .co-bundle-head {
    display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 12px 12px 0;
}
body.cine[data-page="checkout"] .co-bundle-head strong {
    min-width: 0; color: var(--ink); font-size: 14px; line-height: 1.35;
    display: block; font-weight: 600; overflow: visible; overflow-wrap: break-word; word-break: normal;
    -webkit-line-clamp: unset; -webkit-box-orient: initial;
}
body.cine[data-page="checkout"] .co-bundle-offer {
    display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 13px;
    align-items: center; padding: 12px;
}
body.cine[data-page="checkout"] .co-bundle-offer > img {
    width: 108px; height: 108px; object-fit: contain; padding: 7px;
    border-radius: 6px; background: #f5f1e8;
}
body.cine[data-page="checkout"] .co-bundle-price { display: grid; gap: 5px; min-width: 0; }
body.cine[data-page="checkout"] .co-bundle-price > span { color: var(--muted); font-size: 12px; }
body.cine[data-page="checkout"] .co-bundle-price > strong {
    display: block; overflow: visible; color: var(--ink); font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 1.05;
    -webkit-line-clamp: unset; -webkit-box-orient: initial;
}
body.cine[data-page="checkout"] .co-bundle-price > em {
    justify-self: start; padding: 4px 9px; border-radius: 4px;
    background: rgba(23, 102, 63, .1); color: #17663f; font: 700 12px var(--sans); font-style: normal;
}
body.cine[data-page="checkout"] .co-bundle-includes { border-top: 1px solid rgba(10, 22, 38, .08); }
body.cine[data-page="checkout"] .co-bundle-includes > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 44px; padding: 10px 12px; color: var(--ink); cursor: pointer;
    font-size: 13px; font-weight: 600; list-style: none;
}
body.cine[data-page="checkout"] .co-bundle-includes > summary::-webkit-details-marker { display: none; }
body.cine[data-page="checkout"] .co-bundle-includes > summary::after {
    content: ''; width: 7px; height: 7px; flex: none;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform .2s ease;
}
body.cine[data-page="checkout"] .co-bundle-includes:not([open]) > summary::after { transform: rotate(-45deg); }
body.cine[data-page="checkout"] .co-bundle-products { display: grid; gap: 0; padding: 0 12px 9px; }
body.cine[data-page="checkout"] .co-bundle-product {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px;
    align-items: center; min-width: 0; padding: 8px 0; border-top: 1px solid rgba(10, 22, 38, .06);
}
body.cine[data-page="checkout"] .co-bundle-product > img {
    width: 56px; height: 56px; object-fit: contain; padding: 4px; border-radius: 5px; background: #faf9f6;
}
body.cine[data-page="checkout"] .co-bundle-product > span { display: grid; gap: 2px; min-width: 0; }
body.cine[data-page="checkout"] .co-bundle-product strong {
    display: block; overflow: visible; color: var(--ink); font-size: 12.5px; line-height: 1.3;
    overflow-wrap: break-word; word-break: normal; -webkit-line-clamp: unset; -webkit-box-orient: initial;
}
body.cine[data-page="checkout"] .co-bundle-product small { color: var(--muted); font-size: 11px; }
body.cine[data-page="checkout"] .co-bundle-product > b {
    color: var(--text); font-size: 12px; font-weight: 500; white-space: nowrap;
}
body.cine[data-page="checkout"] .co-totals { margin: 0; }
body.cine[data-page="checkout"] .cp-box {
    display: grid; gap: 8px; margin: 2px 0 8px; padding-bottom: 16px;
    border-bottom: 1px solid rgba(10, 22, 38, .1);
}
body.cine[data-page="checkout"] .cp-box > label { color: var(--ink); font-size: 13px; font-weight: 600; }
body.cine[data-page="checkout"] .cp-entry {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; min-width: 0;
}
body.cine[data-page="checkout"] .cp-entry input {
    min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid rgba(10, 22, 38, .16);
    border-radius: 5px; background: #fff; color: var(--ink); font: 14px var(--sans);
    text-transform: uppercase;
}
body.cine[data-page="checkout"] .cp-entry input:focus {
    outline: 2px solid rgba(196, 161, 89, .28); outline-offset: 1px; border-color: var(--brass);
}
body.cine[data-page="checkout"] .cp-entry .btn {
    min-width: 88px; min-height: 44px; margin: 0; border: 1px solid var(--brass);
    border-radius: 5px; background: #fff; color: var(--brass-ink); font-weight: 600;
}
body.cine[data-page="checkout"] .cp-applied {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px;
    align-items: center; min-height: 44px; padding: 9px 10px; border-radius: 5px;
    background: rgba(23, 102, 63, .08); color: #17663f; font-size: 11.5px;
}
body.cine[data-page="checkout"] .cp-applied[hidden] { display: none; }
body.cine[data-page="checkout"] .cp-check {
    display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: #23875a; color: #fff; font-size: 11px;
}
body.cine[data-page="checkout"] .cp-applied strong {
    display: block; min-width: 0; overflow: visible; overflow-wrap: anywhere;
    -webkit-line-clamp: unset; -webkit-box-orient: initial;
}
body.cine[data-page="checkout"] .cp-applied button {
    min-height: 30px; padding: 3px; border: 0; background: none; color: #17663f;
    font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
body.cine[data-page="checkout"] .cp-msg { min-height: 0; margin: 0; font-size: 12px; }
body.cine[data-page="checkout"] .cp-msg.is-bad { color: var(--ember); }
body.cine[data-page="checkout"] .co-grand { margin-top: 4px; padding-top: 14px; }
body.cine[data-page="checkout"] .co-grand dt { color: var(--ink); font-size: 19px; }
body.cine[data-page="checkout"] .co-grand dd { font-family: var(--serif); font-size: 29px; color: var(--ink); }
body.cine[data-page="checkout"] .co-mobile-total { display: none; }
body.cine[data-page="checkout"] .co-placebar { display: grid; gap: 9px; }
body.cine[data-page="checkout"] .place-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px; border: 1px solid var(--ink); border-radius: 5px; margin-top: 2px; padding-inline: 18px;
    background: var(--ink); color: var(--bone); box-shadow: none;
}
body.cine[data-page="checkout"] .place-btn:hover { background: #13263c; border-color: #13263c; }
body.cine[data-page="checkout"] .place-btn:disabled { cursor: not-allowed; opacity: .58; }
body.cine[data-page="checkout"] .place-arrow { font-size: 20px; line-height: 1; }
body.cine[data-page="checkout"] .co-place-secure {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 0; color: var(--muted); font-size: 11.5px;
}
body.cine[data-page="checkout"] .co-trust-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
}
body.cine[data-page="checkout"] .co-trust-row span {
    display: grid; justify-items: center; gap: 6px; text-align: center;
    color: var(--muted); font-size: 10.5px; line-height: 1.3;
}
body.cine[data-page="checkout"] .co-trust-row b { color: var(--text); font-weight: 500; }
body.cine[data-page="checkout"] .co-trust-row svg {
    width: 23px; height: 23px; fill: none; stroke: var(--ink); stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ── Approved phone layouts ─────────────────────────────────────────────── */
@media (max-width: 820px) {
    body.cine[data-page="cart"] .page-head { padding: 22px 0 18px; }
    body.cine[data-page="cart"] .page-head .cine-eyebrow { display: none; }
    body.cine[data-page="cart"] .page-head h1 { gap: 8px; font-size: 34px; }
    body.cine[data-page="cart"] .cart-page-count { font-size: 13px; }
    body.cine[data-page="cart"] .section.pt-0 { padding-bottom: 0; }
    body.cine[data-page="cart"] .cart-layout { display: block; padding-bottom: calc(138px + env(safe-area-inset-bottom)); }
    body.cine[data-page="cart"] .cart-toolbar { min-height: 46px; margin-bottom: 8px; padding-bottom: 8px; }
    body.cine[data-page="cart"] .cart-tools { display: none; }
    body.cine[data-page="cart"] .cart-row:not(.cart-bundle-row) {
        grid-template-columns: 24px 82px minmax(0, 1fr);
        grid-template-areas: 'sel img info' 'sel img price';
        column-gap: 11px; row-gap: 8px; min-height: 116px;
        padding: 13px 12px; margin-bottom: 10px; align-items: start; border-radius: 7px;
    }
    body.cine[data-page="cart"] .cart-thumb img { width: 82px; height: 82px; padding: 5px; object-fit: contain; }
    body.cine[data-page="cart"] .cart-info { padding-right: 28px; gap: 4px; }
    body.cine[data-page="cart"] .cart-name { font-size: 14px; line-height: 1.3; }
    body.cine[data-page="cart"] .cart-variant { margin-top: 1px; font-size: 11.5px; }
    body.cine[data-page="cart"] .cart-line { font-size: 17px; align-self: center; justify-self: start; min-width: 0; }
    body.cine[data-page="cart"] .cart-row > .qty-stepper { justify-self: end; align-self: center; height: 38px; }
    body.cine[data-page="cart"] .cart-row .qty-stepper button { width: 34px; height: 36px; min-width: 34px; min-height: 36px; }
    body.cine[data-page="cart"] .cart-row .qty-stepper input { width: 30px; }
    body.cine[data-page="cart"] .row-remove {
        position: absolute; top: 8px; right: 7px; width: 36px; height: 36px; grid-area: auto;
    }
    body.cine[data-page="cart"] .cart-bundle-row { padding: 12px; margin-bottom: 10px; border-radius: 7px; }
    body.cine[data-page="cart"] .cart-bundle-row .row-select-wrap { padding-top: 4px; }
    body.cine[data-page="cart"] .cart-summary {
        position: fixed; inset: auto 0 auto 0; bottom: calc(64px + env(safe-area-inset-bottom));
        display: grid; grid-template-columns: minmax(88px, 1fr) auto; align-items: center;
        min-height: 68px; padding: 10px max(14px, env(safe-area-inset-left)); gap: 10px;
        border: 0; border-top: 1px solid var(--line); border-radius: 0;
        background: rgba(255, 255, 255, .98); box-shadow: 0 -8px 26px -20px rgba(10, 22, 38, .8);
    }
    body.cine[data-page="cart"] .cart-summary-head,
    body.cine[data-page="cart"] .sum-note,
    body.cine[data-page="cart"] .cart-continue,
    body.cine[data-page="cart"] .cart-summary-trust,
    body.cine[data-page="cart"] .cart-summary .sum-row:first-of-type { display: none; }
    body.cine[data-page="cart"] .cart-summary .sum-row:last-of-type {
        grid-column: 1; grid-row: 1; display: grid; gap: 1px; margin: 0; padding: 0; border: 0;
        font-size: 11px; line-height: 1.2;
    }
    body.cine[data-page="cart"] .cart-summary .sum-row:last-of-type strong { font-size: 20px; line-height: 1.1; }
    body.cine[data-page="cart"] .cart-summary #checkoutBtn {
        grid-column: 2; grid-row: 1; width: auto; min-height: 46px; height: 46px;
        margin: 0; padding: 0 17px; border-radius: 5px; font-size: 13px;
    }

    body.cine[data-page="checkout"] { padding-bottom: 0; }
    body.cine[data-page="checkout"] .site-header { padding: max(12px, env(safe-area-inset-top)) 0 12px; }
    body.cine[data-page="checkout"] .header-row { min-height: 42px; }
    body.cine[data-page="checkout"] .brand-word { font-size: 27px; }
    body.cine[data-page="checkout"] .checkout-secure-head { font-size: 11.5px; }
    body.cine[data-page="checkout"] .co-head { padding: 18px 0 16px; }
    body.cine[data-page="checkout"] .co-head .cine-eyebrow { display: none; }
    body.cine[data-page="checkout"] .co-head h1 { font-size: 34px; }
    body.cine[data-page="checkout"] .co-steps { justify-content: flex-start; font-size: 10.5px; overflow: hidden; }
    body.cine[data-page="checkout"] .co-steps > li { gap: 5px; }
    body.cine[data-page="checkout"] .co-step-label { font-size: 0; }
    body.cine[data-page="checkout"] .co-step-label::after { content: attr(data-short); font-size: 10.5px; }
    body.cine[data-page="checkout"] .co-steps > li:not(:last-child)::after {
        width: clamp(14px, 5vw, 28px); margin: 0 6px;
    }
    body.cine[data-page="checkout"] .co-steps span { width: 23px; height: 23px; font-size: 10px; }
    body.cine[data-page="checkout"] .section.pt-0 { padding-bottom: 0; }
    body.cine[data-page="checkout"] .co-layout {
        display: flex; flex-direction: column; gap: 12px;
        padding-bottom: calc(106px + env(safe-area-inset-bottom));
    }
    body.cine[data-page="checkout"] .co-main { display: contents; }
    body.cine[data-page="checkout"] .co-main > .form-errors { order: 0; }
    body.cine[data-page="checkout"] .co-address { order: 1; }
    body.cine[data-page="checkout"] .co-payment { order: 2; }
    body.cine[data-page="checkout"] .co-summary { order: 3; width: 100%; position: static; }
    body.cine[data-page="checkout"] .co-placebar { order: 4; }
    body.cine[data-page="checkout"] .co-card,
    body.cine[data-page="checkout"] .co-summary .co-card {
        width: 100%; padding: 15px; gap: 12px; border-radius: 7px;
    }
    body.cine[data-page="checkout"] .co-card-head { flex-wrap: nowrap; gap: 9px; }
    body.cine[data-page="checkout"] .co-card-head h2 { font-size: 20px; }
    body.cine[data-page="checkout"] .co-no { width: 30px; height: 30px; font-size: 14px; }
    body.cine[data-page="checkout"] .co-summary-no { display: grid; }
    body.cine[data-page="checkout"] .co-change { width: auto; min-height: 36px; margin-left: auto; padding: 6px 12px; }
    body.cine[data-page="checkout"] .co-lead { font-size: 12.5px; }
    body.cine[data-page="checkout"] .co-saved { padding: 13px; }
    body.cine[data-page="checkout"] .co-saved-tag { display: none; }
    body.cine[data-page="checkout"] .co-saved-line { font-size: 12.5px; line-height: 1.45; }
    body.cine[data-page="checkout"] .co-pinned { font-size: 12px; }
    body.cine[data-page="checkout"] .co-items li:not(.co-bundle) { grid-template-columns: 62px 1fr auto; padding: 8px 0 12px; }
    body.cine[data-page="checkout"] .co-items img { width: 62px; height: 62px; }
    body.cine[data-page="checkout"] .co-item-sum { font-size: 15px; }
    body.cine[data-page="checkout"] .co-bundle-head { padding: 11px 11px 0; }
    body.cine[data-page="checkout"] .co-bundle-offer { grid-template-columns: 82px minmax(0, 1fr); padding: 11px; gap: 11px; }
    body.cine[data-page="checkout"] .co-bundle-offer > img { width: 82px; height: 82px; }
    body.cine[data-page="checkout"] .co-bundle-price > strong { font-size: 22px; }
    body.cine[data-page="checkout"] .co-bundle-product { grid-template-columns: 54px minmax(0, 1fr) auto; }
    body.cine[data-page="checkout"] .co-bundle-product > img { width: 54px; height: 54px; }
    body.cine[data-page="checkout"] .cp-box { margin-top: 2px; }
    body.cine[data-page="checkout"] .cp-entry input { font-size: 16px; }
    body.cine[data-page="checkout"] .co-totals > div { padding: 5px 0; font-size: 13px; }
    body.cine[data-page="checkout"] .co-grand dt,
    body.cine[data-page="checkout"] .co-grand dd { font-size: 20px; }
    body.cine[data-page="checkout"] .pay-option {
        grid-template-columns: auto auto minmax(0, 1fr); min-height: 62px;
        padding: 11px 12px; gap: 10px; border-radius: 6px;
    }
    body.cine[data-page="checkout"] .pay-icon { width: 29px; height: 29px; }
    body.cine[data-page="checkout"] .pay-text strong { font-size: 13.5px; }
    body.cine[data-page="checkout"] .pay-text small { font-size: 11.5px; }
    body.cine[data-page="checkout"] .pay-tags { display: none; }
    body.cine[data-page="checkout"] .co-secure { display: none; }
    body.cine[data-page="checkout"] .co-note { font-size: 11.5px; }
    body.cine[data-page="checkout"] .co-trust-row { display: none; }
    body.cine[data-page="checkout"] .co-fineprint { margin-bottom: 0; }
    body.cine[data-page="checkout"] .co-placebar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
        display: grid; grid-template-columns: minmax(88px, 1fr) minmax(170px, auto);
        align-items: center; gap: 12px; padding: 10px max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
        background: rgba(255, 255, 255, .985); border-top: 1px solid var(--line);
        box-shadow: 0 -10px 28px -22px rgba(10, 22, 38, .8);
    }
    body.cine[data-page="checkout"] .co-mobile-total { display: grid; gap: 1px; line-height: 1.15; }
    body.cine[data-page="checkout"] .co-mobile-total span { color: var(--muted); font-size: 11px; }
    body.cine[data-page="checkout"] .co-mobile-total strong { font-family: var(--serif); font-size: 21px; color: var(--ink); }
    body.cine[data-page="checkout"] .place-btn {
        position: static; width: 100%; min-height: 50px; height: 50px; margin: 0;
        padding: 0 16px; border-radius: 5px; flex-direction: row; justify-content: center;
        box-shadow: none; white-space: nowrap;
    }
    body.cine[data-page="checkout"] .place-btn [data-place-label] { font-size: 0; }
    body.cine[data-page="checkout"] .place-btn [data-place-label]::after {
        content: attr(data-mobile-label); font-size: 13px;
    }
    body.cine[data-page="checkout"] .place-btn .place-total { display: none; }
    body.cine[data-page="checkout"] .place-arrow { display: none; }
    body.cine[data-page="checkout"] .co-place-secure { display: none; }
    body.cine[data-page="checkout"].loc-open .co-placebar { display: none; }
}

@media (max-width: 430px) {
    body.cine[data-page="checkout"] .co-bundle-product {
        grid-template-columns: 52px minmax(0, 1fr); gap: 9px;
    }
    body.cine[data-page="checkout"] .co-bundle-product > b {
        grid-column: 2; justify-self: start;
    }
    body.cine[data-page="checkout"] .cp-applied {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
    body.cine[data-page="checkout"] .cp-applied button {
        grid-column: 2 / -1; justify-self: end; min-height: 24px;
    }
}

@media (max-width: 360px) {
    body.cine[data-page="cart"] .cart-summary #checkoutBtn { padding-inline: 12px; font-size: 12px; }
    body.cine[data-page="checkout"] .checkout-secure-head span { display: none; }
    body.cine[data-page="checkout"] .co-placebar { grid-template-columns: 82px minmax(0, 1fr); gap: 8px; }
    body.cine[data-page="checkout"] .place-btn [data-place-label]::after { font-size: 12px; }
}

/* ── Legal pages (Terms, Privacy): TOC + reading card ─────────────────── */
body.cine.legal-page .page-head { padding-bottom: clamp(20px, 3vh, 32px); border-bottom: 1px solid var(--line); }
body.cine.legal-page .page-head h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.02; }
body.cine.legal-page .legal-updated { margin: 0; color: var(--muted); font-size: 14px; }
body.cine .legal.prose-page[data-enhanced] {
    max-width: none; display: grid; grid-template-columns: 240px minmax(0, 760px); gap: clamp(28px, 4vw, 64px);
    align-items: start; padding-top: clamp(28px, 4vh, 44px);
}
body.cine .legal-toc { position: sticky; top: 104px; display: grid; gap: 18px; }
body.cine .legal-toc summary { list-style: none; cursor: default; margin-bottom: 12px; color: var(--brass-ink); font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
body.cine .legal-toc summary::-webkit-details-marker { display: none; }
body.cine .legal-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); counter-reset: toc; }
body.cine .legal-toc li { counter-increment: toc; }
body.cine .legal-toc ol a {
    display: flex; gap: 10px; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent;
    color: var(--muted); font-size: 13.5px; line-height: 1.35; text-decoration: none; transition: color .15s, border-color .15s;
}
body.cine .legal-toc ol a::before { content: counter(toc, decimal-leading-zero); color: var(--sand); font-variant-numeric: tabular-nums; font-size: 12px; padding-top: 1px; }
body.cine .legal-toc ol a:hover { color: var(--text); }
body.cine .legal-toc ol a.is-current { color: var(--text); border-left-color: var(--brass); font-weight: 600; }
body.cine .legal-toc ol a.is-current::before { color: var(--brass-ink); }
body.cine .legal-toc ol a:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 2px; }
body.cine .legal-help { margin: 0; padding: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .55); color: var(--muted); font-size: 13px; line-height: 1.5; }
body.cine .legal-help a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

body.cine .legal-body {
    background: #FFFDF9; border: 1px solid var(--line); padding: clamp(28px, 4vw, 56px);
    box-shadow: 0 1px 0 rgba(22, 32, 44, .03), 0 18px 40px -30px rgba(22, 32, 44, .25);
}
body.cine .legal-body > :first-child { margin-top: 0; }
body.cine .legal-body > h2:first-child { border-top: 0; padding-top: 0; }
body.cine .legal-body > p:first-child, body.cine .legal-body > #sales-agreement {
    color: var(--text); font-size: 16.5px; line-height: 1.7;
}
body.cine .legal-body h2 {
    scroll-margin-top: 110px; display: flex; align-items: baseline; gap: 14px;
    margin: 44px 0 12px; padding-top: 28px; border-top: 1px solid var(--line);
    font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15;
}
body.cine .legal-body h2::before { content: attr(data-num); color: var(--brass-ink); font: 600 12px/1 var(--sans); letter-spacing: .1em; transform: translateY(-4px); }
body.cine .legal-body p, body.cine .legal-body li { color: #3E4854; font-size: 15.5px; line-height: 1.75; }
body.cine .legal-body p { margin: 0 0 14px; }
body.cine .legal-body ul { margin: 6px 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
body.cine .legal-body ul li { position: relative; padding-left: 22px; }
body.cine .legal-body ul li::before { content: ""; position: absolute; left: 4px; top: .75em; width: 6px; height: 6px; background: var(--brass); transform: rotate(45deg); }
body.cine .legal-body a { color: var(--text); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }

@media (max-width: 1023px) {
    body.cine .legal.prose-page[data-enhanced] { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    body.cine .legal-toc { position: static; }
    body.cine .legal-toc details { border: 1px solid var(--line); background: rgba(255, 255, 255, .55); }
    body.cine .legal-toc summary { cursor: pointer; margin: 0; padding: 16px; display: flex; justify-content: space-between; }
    body.cine .legal-toc summary::after { content: "+"; font-size: 16px; letter-spacing: 0; color: var(--text); }
    body.cine .legal-toc details[open] summary::after { content: "−"; }
    body.cine .legal-toc ol { margin: 0 16px 14px; }
    body.cine .legal-help { display: none; }
    body.cine .legal-body { padding: 24px 20px; box-shadow: none; }
    body.cine .legal-body h2 { margin-top: 32px; padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) { body.cine .legal-toc ol a { transition: none; } }

/* ── Product page: sale indicator ─────────────────────────────────────── */
body.cine .pdp-gallery-stage { position: relative; }
body.cine .pdp-sale-flag {
    position: absolute; top: 16px; left: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px 7px 7px; background: #B3262E; color: #fff; font: 600 13px/1 var(--sans); letter-spacing: .02em;
    box-shadow: 0 6px 16px -8px rgba(179, 38, 46, .6);
}
body.cine .pdp-sale-flag b { padding: 4px 7px; background: #fff; color: #B3262E; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
body.cine .pdp-sale-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; color: #8E1E25; font-size: 14px; font-weight: 500; }
body.cine .pdp-sale-pill { padding: 5px 10px; background: #B3262E; color: #fff; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
body.cine .product-price s[data-pdp-compare]:not([hidden]) { text-decoration-color: #B3262E; }
body.cine .product-price .save-tag:not([hidden]) { background: rgba(179, 38, 46, .1); color: #8E1E25; }
@media (max-width: 640px) {
    body.cine .pdp-sale-flag { top: 10px; left: 10px; font-size: 12px; }
}
/* ── 8 Oct 2026: phone hero like a shop banner, not a full screen ──────────
   The wide banner photo is shown whole (16:9), so it is sharp and nothing is
   cropped away; small eyebrow top left, headline lower left. A banner
   set with a phone photo gets a 4:5 frame instead. */
@media (max-width: 820px) {
    /* Start below the fixed 72px phone header instead of hiding a third of the photo under it. */
    body.cine .cine-hero-wrap { padding-top: 72px; }
    body.cine .cine-hero-wrap .cine-hero {
        height: auto; min-height: 0; padding: 0; aspect-ratio: 16 / 9;
    }
    body.cine .cine-hero-wrap .cine-hero.cine-hero-tall { aspect-ratio: 4 / 5; }
    body.cine .cine-hero-wrap .cine-hero .cine-hero-scrim {
        background: linear-gradient(180deg, rgba(6,15,27,.45) 0%, rgba(6,15,27,0) 30%, rgba(6,15,27,0) 45%, rgba(6,15,27,.72) 100%);
    }
    body.cine .cine-hero-wrap .cine-hero .cine-hero-top {
        top: 14px; left: 6%; right: 6%; margin: 0; font-size: 10px; letter-spacing: .18em;
    }
    body.cine .cine-hero-wrap .cine-hero .cine-hero-tagline {
        left: 6%; right: 6%; bottom: 16px; text-align: left; font-size: clamp(24px, 7vw, 32px); line-height: 1.15;
    }
    body.cine .cine-hero-wrap .cine-hero .cine-cue { display: none; }
}

/* 9 Oct 2026: celebrity story bubbles under the banner. */
body.cine .wr-stars { padding: 44px 0 0; }
body.cine .wr-stars .container {
    display: flex; align-items: center; gap: 28px; padding-block: 22px;
    width: calc(min(1320px, 100%) - 2 * var(--pad)); padding-inline: 0;
    border-top: 1px solid #d8cdbb; border-bottom: 1px solid #d8cdbb;
}
body.cine .wr-stars-copy { flex: none; max-width: 250px; }
body.cine .wr-stars-copy p { margin: 0 0 6px; font: 500 10px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #a8843f; }
body.cine .wr-stars-copy h2 { margin: 0; font: 400 26px/1.05 var(--serif); letter-spacing: 0; color: var(--ink); }
body.cine .wr-stars-copy span { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--muted); }
body.cine .wr-stars-row { flex: 1; display: flex; gap: 14px; padding: 4px 2px; overflow-x: auto; scrollbar-width: none; }
body.cine .wr-stars-row::-webkit-scrollbar { display: none; }
body.cine .wr-star { flex: none; width: 72px; text-align: center; color: var(--ink); text-decoration: none; }
body.cine .wr-star i {
    display: block; width: 68px; height: 68px; margin: 0 auto; padding: 2.5px; border-radius: 50%;
    background: conic-gradient(from 200deg, #e3cb94, #b08d4a, #f4e2b8, #c4a159, #e3cb94);
    transition: transform .3s var(--ease);
}
body.cine .wr-star i span { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; border: 2px solid var(--bone); background: #ebe4d8; }
body.cine .wr-star img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); transform-origin: 50% 22%; }
body.cine .wr-star:hover i, body.cine .wr-star:focus-visible i { transform: scale(1.06); }
body.cine .wr-star:focus-visible { outline: none; }
body.cine .wr-star:focus-visible i { box-shadow: 0 0 0 2px var(--bone), 0 0 0 4px var(--ink); }
body.cine .wr-star b { display: block; margin-top: 8px; font: 500 11px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.cine .wr-star-all i { display: grid; place-items: center; background: none; border: 1px solid var(--brass); }
body.cine .wr-star-all em { font: 400 22px/1 var(--serif); font-style: normal; color: #a8843f; }
body.cine .wr-stars-cta {
    flex: none; padding-bottom: 4px; border-bottom: 1px solid var(--brass); color: var(--ink); text-decoration: none;
    font: 500 10.5px var(--sans); letter-spacing: .24em; text-transform: uppercase;
}
body.cine .wr-stars-cta-sm { display: none; }
body.cine .wr-stars + .wr-lux { padding-top: 56px; }
@media (max-width: 820px) {
    body.cine .wr-stars { padding-top: 30px; }
    body.cine .wr-stars .container { display: block; padding-block: 18px; }
    body.cine .wr-stars-copy { max-width: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    body.cine .wr-stars-copy p { flex-basis: 100%; margin-bottom: 8px; }
    body.cine .wr-stars-copy h2 { font-size: 24px; }
    body.cine .wr-stars-copy span { display: none; }
    body.cine .wr-stars-cta-sm { display: inline; }
    body.cine .wr-stars .container > .wr-stars-cta { display: none; }
    body.cine .wr-stars-row { margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); }
    body.cine .wr-star { width: 66px; }
    body.cine .wr-star i { width: 62px; height: 62px; }
    body.cine .wr-stars + .wr-lux { padding-top: 40px; }
}

/* 9 Oct 2026: homepage featured products, editorial style. 3 x 2 on desktop, swipe row on phones. */
body.cine .wr-lux { padding: clamp(64px, 9vw, 112px) 0 clamp(64px, 9vw, 116px); }
body.cine .wr-lux-head { max-width: 680px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; }
body.cine .wr-lux-eye {
    display: inline-flex; align-items: center; gap: 14px; margin: 0;
    font: 500 10.5px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: #a8843f;
}
body.cine .wr-lux-eye::before, body.cine .wr-lux-eye::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; }
body.cine .wr-lux-head h2 { margin: 20px 0 16px; font: 400 clamp(42px, 5vw, 64px)/1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
body.cine .wr-lux-head h2 em { font-style: italic; color: #a8843f; }
body.cine .wr-lux-lead { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
body.cine .wr-lux-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(44px, 5vw, 64px) clamp(20px, 3vw, 40px); }
body.cine .wr-lux-card { position: relative; min-width: 0; }
body.cine .wr-lux-ph { position: relative; overflow: hidden; background: #ebe4d8; }
body.cine .wr-lux-ph img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s var(--ease); }
body.cine .wr-lux-card:hover .wr-lux-ph img { transform: scale(1.04); }
body.cine .wr-lux-wish {
    position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; place-items: center;
    width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(244, 240, 233, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body.cine .wr-lux-wish svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.5; }
body.cine .wr-lux-wish[aria-pressed="true"] svg { fill: #a8843f; stroke: #a8843f; }
body.cine .wr-lux-no { margin: 20px 0 0; font: 500 10px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #a8843f; }
body.cine .wr-lux-no span { color: var(--muted); }
body.cine .wr-lux-name { margin: 8px 0 16px; font: 400 clamp(26px, 2.3vw, 31px)/1.08 var(--serif); letter-spacing: 0; }
body.cine .wr-lux-name a { color: var(--ink); text-decoration: none; }
body.cine .wr-lux-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card opens the product */
body.cine .wr-lux-name a:focus-visible { outline: none; }
body.cine .wr-lux-card:focus-within { outline: 2px solid var(--brass); outline-offset: 6px; }
body.cine .wr-lux-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid #d8cdbb; }
body.cine .wr-lux-price { font-size: 14px; letter-spacing: .04em; color: var(--ink); }
body.cine .wr-lux-price small { margin-right: 4px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
body.cine .wr-lux-price s { margin-left: 6px; font-size: 12px; color: var(--muted); }
body.cine .wr-lux-disc { padding-bottom: 4px; border-bottom: 1px solid var(--brass); font: 500 10.5px var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
body.cine .wr-lux-bar { display: none; }
body.cine .wr-lux-more { margin-top: clamp(48px, 6vw, 72px); text-align: center; }
body.cine .wr-lux-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 56px; padding: 0 40px;
    background: var(--ink); color: var(--bone); text-decoration: none;
    font: 500 11.5px var(--sans); letter-spacing: .3em; text-transform: uppercase; transition: background .25s var(--ease);
}
body.cine .wr-lux-btn span { font-size: 15px; letter-spacing: 0; color: var(--brass-lt); transition: transform .25s var(--ease); }
body.cine .wr-lux-btn:hover { background: var(--ink-2, #16263C); color: var(--bone); }
body.cine .wr-lux-btn:hover span { transform: translateX(4px); }
body.cine .wr-lux-more p { margin: 18px 0 0; font-size: 12px; letter-spacing: .06em; color: var(--muted); }
@media (max-width: 820px) {
    body.cine .wr-lux-head h2 { font-size: 42px; }
    body.cine .wr-lux-lead { font-size: 14px; }
    body.cine .wr-lux-grid {
        display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain;
        margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); scroll-padding-left: 0; scrollbar-width: none;
    }
    body.cine .wr-lux-grid::-webkit-scrollbar { display: none; }
    body.cine .wr-lux-card { flex: 0 0 78%; scroll-snap-align: start; }
    body.cine .wr-lux-no { margin-top: 16px; }
    body.cine .wr-lux-name { font-size: 27px; margin: 8px 0 14px; }
    body.cine .wr-lux-bar { display: block; position: relative; height: 1px; margin-top: 30px; background: #d8cdbb; overflow: hidden; }
    body.cine .wr-lux-bar i { position: absolute; left: 0; top: 0; height: 100%; width: 20%; background: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
    body.cine .wr-lux-more { margin-top: 30px; }
    body.cine .wr-lux-btn { width: 100%; padding: 0; }
    body.cine .wr-lux-more p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    body.cine .wr-lux-ph img, body.cine .wr-lux-btn span { transition: none; }
}

/* ── 8 Oct 2026: spotlight breathing room + one tidy row of photos ───────── */
body.cine .cine-spot { padding-top: clamp(56px, 9vh, 110px); }
body.cine .cine-spot-copy { gap: 18px; }
body.cine .cine-spot-copy h2 { line-height: 1.05; }
body.cine .cine-swatch-wrap { margin-top: 6px; }
body.cine .cine-swatch { flex-wrap: nowrap; gap: 10px; }
body.cine .cine-sw, body.cine .cine-sw-more { width: 54px; height: 54px; flex: none; }
body.cine .cine-sw-more {
    display: grid; place-items: center; border-radius: 4px; border: 1px solid var(--line);
    background: var(--bone-2); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none;
    transition: border-color .2s var(--ease);
}
body.cine .cine-sw-more:hover { border-color: var(--brass); }
body.cine .cine-price { margin-top: 8px; }
body.cine .cine-spot-acts { margin-top: 4px; }
body.cine .cine-spot-acts .btn { min-height: 50px; padding-inline: 30px; }
body.cine .cine-bigword { color: rgba(10, 22, 38, .045); }
@media (max-width: 820px) {
    body.cine .cine-spot { padding-top: 48px; }
    body.cine .cine-spot-copy { gap: 14px; padding-top: 8px; }
    body.cine .cine-sw, body.cine .cine-sw-more { width: 48px; height: 48px; }
    body.cine .cine-price b { font-size: 28px; }
    body.cine .cine-spot-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    body.cine .cine-spot-acts .btn { width: 100%; padding-inline: 12px; }
    body.cine .cine-spot-acts .btn:only-child { grid-column: 1 / -1; }
}

/* ── 11 Oct 2026: customer chat redesign — flat bubbles, labels, topics, instant answers ── */
body.cine .chat-panel { border-radius: 18px; background: #fbf9f5; }
body.cine .chat-head { background: var(--ink); border-bottom: 0; padding: 14px 14px 14px 16px; }
body.cine .chat-head-text strong { font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: 0; }
body.cine .chat-head .chat-avatar.is-offline .chat-dot { background: #9aa1a9; }
body.cine .chat-close { border-radius: 50%; min-width: 38px; min-height: 38px; padding: 0; justify-content: center; background: rgba(244, 240, 233, .1); border: 0; }
body.cine .chat-close span { display: none; }
body.cine .chat-log, body.cine .chat-scroll { background: #fbf9f5; }
body.cine .chat-day { background: none; color: var(--muted); font-size: 11px; letter-spacing: .04em; }
body.cine .chat-row.me .chat-avatar { display: none; }               /* your own face adds nothing */
body.cine .chat-row.grouped.me { padding-right: 0; }
body.cine .chat-msg { border-radius: 16px; padding: 10px 13px; }
body.cine .chat-msg p { font-size: 14px; line-height: 1.45; }
body.cine .chat-row.me .chat-msg { background: var(--ink); color: var(--bone); box-shadow: none; border-bottom-right-radius: 5px; }
body.cine .chat-row.them .chat-msg { background: #fff; border: 1px solid #e3ddd2; box-shadow: none; border-bottom-left-radius: 5px; color: var(--ink); }
body.cine .chat-row.is-auto .chat-msg, body.cine .chat-row.is-answer .chat-msg { background: #fffaf0; border-color: #ecdcb4; }
body.cine .chat-who { align-self: flex-start; margin: 8px 0 -2px 36px; font-size: 11px; font-weight: 500; color: var(--muted); }
body.cine .chat-note { align-self: center; max-width: 90%; margin: 6px 0; padding: 6px 12px; border-radius: 999px; background: #efe9de; font-size: 12px; color: var(--muted); text-align: center; }
body.cine .chat-card { margin: 8px 0; padding: 10px 11px; border: 1px solid #e3ddd2; border-radius: 12px; background: #fbf9f5; }
body.cine .chat-card strong { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
body.cine .chat-card strong em { font-style: normal; padding: 1px 6px; border-radius: 5px; background: #e6f6ec; color: #1d7a46; font-size: 10px; font-weight: 600; }
body.cine .chat-card p { font-size: 12.5px; color: var(--muted); }
body.cine .chat-cta {
    display: inline-flex; margin: 8px 6px 2px 0; padding: 7px 12px; border-radius: 999px;
    background: var(--ink); color: var(--bone); font-size: 12px; font-weight: 600; text-decoration: none;
}
body.cine .chat-cta:hover { background: var(--ink-2); color: var(--bone); }
body.cine .chat-welcome { margin: 16px 14px 4px; padding: 16px; border: 1px solid #e3ddd2; border-radius: 16px; background: #fff; }
body.cine .chat-welcome h4 { margin: 0 0 4px; font: 400 23px/1.1 var(--serif); color: var(--ink); }
body.cine .chat-welcome p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
body.cine .chat-topics { display: flex; flex-wrap: wrap; gap: 8px; }
body.cine .chat-topic {
    padding: 8px 12px; border: 1px solid var(--brass); border-radius: 999px; background: #fffaf0;
    font: 500 12.5px var(--sans); color: var(--ink); cursor: pointer; white-space: nowrap;
}
body.cine .chat-topic:hover { background: #fff2d6; }
body.cine .chat-topics-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 12px 2px; background: #fff; border-top: 1px solid #e3ddd2; flex: none; }
body.cine .chat-topics-strip::-webkit-scrollbar { display: none; }
body.cine .chat-topics-strip .chat-topic { font-size: 12px; padding: 7px 11px; }
body.cine .chat-topics-strip:not([hidden]) + .chat-form { border-top: 0; }
body.cine .chat-form { background: #fff; }
body.cine .chat-field { border-radius: 999px; background: #fff; border: 1px solid #d8cdbb; padding: 4px 4px 4px 12px; align-items: center; }
body.cine .chat-field textarea { font-size: 15px; }
body.cine .chat-send { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--bone); }
body.cine .chat-send:hover { background: var(--ink-2); }
@media (max-width: 820px) {
    body.cine .chat-panel { border-radius: 0; }
    body.cine .chat-send { width: 44px; height: 44px; }
    body.cine .chat-field textarea { font-size: 16px; }   /* no iOS zoom on focus */
}
/* Buy Now button in WellRest navy — 12 Oct 2026 */
body.cine .pdp-buy-now { background: var(--navy, #1C3B60); border-color: var(--navy, #1C3B60); color: #fff; }
body.cine .pdp-buy-now:hover:not(:disabled) { background: var(--navy-800, #16304F); border-color: var(--navy-800, #16304F); color: #fff; box-shadow: 0 6px 18px -6px rgba(28, 59, 96, .55); }
body.cine .pdp-buy-now:focus-visible { outline: 2px solid var(--brass, #C4A159); outline-offset: 2px; }