/* ============================================================================
   STUDIO THEME — a quieter, more editorial skin for the VOXEL storefront.

   The direction (2026-08-17): EMBER — a workshop at dusk. Warm paper, espresso
   ink and LAMPLIGHT as the accent, square corners everywhere except a 4px
   whisper on the product cards, serif headlines in sentence case, small
   letter-spaced labels, deep vertical rhythm, and photography that runs edge to
   edge. It is a THEME LAYER: it loads after styles.css and only re-states tokens
   and the handful of components whose shape carried the old ivory-and-orange
   look, so the markup and every behaviour of the site are untouched.
   ========================================================================== */

:root{
  /* ---- palette: EMBER — a workshop at dusk -------------------------------
     Warm paper, espresso ink, and lamplight as the accent. The shop sells the
     light in a room after dark, so the page is lit the way the pieces are:
     brass and amber against a near-black, on paper that is warm rather than
     cool. It keeps the house orange's family — deepened to a burnt amber that
     can carry a price, a link and a button without shouting.                 */
  --bg:#FBF8F3;              /* the page — warm paper                          */
  --bg-2:#F3ECE1;            /* alternating band                               */
  --surface:#FFFFFF;
  --surface-2:#F7F1E7;
  --line:#E6DBC9;            /* hairline, warm                                 */
  --text:#221C16;            /* espresso ink, never pure black                 */
  --muted:#7C6E5E;           /* label brown-grey                               */
  --brand:#B4661C;           /* burnt amber — prices, links, focus             */
  --brand-soft:#8E4E13;
  --brand-tint:#F7EADA;      /* the wash behind chips and quiet panels         */
  --good:#5A7A46;            /* in stock — olive, not a traffic-light green    */

  /* ---- shape: square page, a whisper of a fillet on the CARDS ----------- */
  --radius:0px;
  --radius-lg:0px;
  --fillet:4px;              /* product cards only — the live site used 22px  */

  /* ---- type: sans for the interface, serif for the voice ---------------- */
  --font:"Helvetica Neue",Helvetica,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --serif:"Crimson Text","Libre Baskerville",Georgia,"Palatino Linotype",serif;

  /* ---- shadow: almost none on panels — but the CARDS KEEP THEIR SHADE ---- */
  --shadow-sm:0 1px 0 rgba(34,28,22,.06);
  --shadow-md:0 18px 40px -34px rgba(34,28,22,.45);
  --shadow-lg:0 30px 70px -40px rgba(34,28,22,.5);
  --card-shade:0 10px 26px -18px rgba(34,28,22,.30);
  --card-shade-hover:0 20px 44px -22px rgba(34,28,22,.40);

  --maxw:1280px;

  /* theme-only tokens */
  --ink-dark:#1A1512;        /* the dark band, buttons, footer — night        */
  --ink-dark-2:#2B231C;
  --cream-on-dark:#F6EFE4;
  --cream-on-dark-muted:#E7DBC9;
  --gold:#E3A24B;            /* LAMPLIGHT — the glow, the one bright accent    */
  --gold-hover:#EFB669;
}

/* SQUARE by default — the owner's rule: no filleted panels, no pill buttons.
   One universal reset beats a list of forty selectors that always misses one. */
*, *::before, *::after{ border-radius:0 !important; }

/* …with ONE exception: a product card is an OBJECT on the page, not a panel of
   it, so it keeps a hint of a fillet — far less than the 22px the live site
   uses, just enough that it reads as a card. Buttons, inputs, sections and the
   product sheet stay dead square. */
.card, .card-media, .card-add, .badge, .stock-pill{ border-radius:var(--fillet) !important; }

/* Round only where round MEANS something: a colour is a dot, a status pip is a pip,
   and Quri's launcher is a BUBBLE — a speech bubble is not a square panel. */
.swatch, .card-swatch, .chip-dot, .chat-live, .pal-btn i, .dot, .stock i,
.chat-fab, .chat-fab-dot, .chat-halo, .chat-invite-x{ border-radius:50% !important; }

/* the invite: a bubble with its tail pointing at the button beside it */
.chat-invite{ border-radius:16px 16px 4px 16px !important; }
.chat-invite::after{
  content:""; position:absolute; right:-7px; bottom:12px; width:12px; height:12px;
  background:var(--surface); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transform:rotate(-45deg); border-radius:0 0 3px 0 !important;
}
.chat-fab{ box-shadow:0 14px 30px -12px rgba(34,28,22,.55); }
.chat-fab:hover{ box-shadow:0 18px 36px -12px rgba(34,28,22,.6); }

body{ font-size:15.5px; letter-spacing:.01em; }

/* ───────── headlines: serif, sentence case, roomy ───────── */
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-.02em; color:var(--text); }
h1{ font-size:clamp(34px,5.2vw,62px); line-height:1.06; }
h2{ font-size:clamp(26px,3.4vw,40px); line-height:1.12; }
h3{ font-size:clamp(19px,2vw,25px); }
/* the old theme shouts in capitals; the studio look whispers in small labels */
.section-eyebrow, .pd-colors-label, .card-shots, .ver, .toolbar label{
  text-transform:uppercase; letter-spacing:.18em; font-size:11px; color:var(--muted);
}

/* ───────── header: flat, hairline, no blur card ───────── */
/* (the header's full behaviour — transparent over the hero — is set with the hero below) */

.brand-name{ font-family:var(--serif); font-weight:400; letter-spacing:.26em; font-size:16px; }
.brand-mark{ color:var(--brand); }
.nav a{ font-size:13px; letter-spacing:.08em; color:var(--muted); }
.nav a:hover{ color:var(--text); }
.nav a::after{ background:var(--brand); height:1px; }

/* buttons: square, quiet, one green fill */
.btn, .btn-sm{ background:var(--ink-dark); color:var(--cream-on-dark); border:1px solid var(--ink-dark);
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; padding:14px 26px; }
.btn:hover, .btn-sm:hover{ background:var(--brand); border-color:var(--brand); transform:none; }
.mini, .hdr-fav, .hdr-call{ background:transparent; border:1px solid var(--line); color:var(--text);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; box-shadow:none; }
.mini:hover, .hdr-fav:hover{ border-color:var(--ink-dark); transform:none; }
/* Quri keeps its presence but joins the palette (gold on olive, no pulsing glow) */
.hdr-chat{ background:var(--ink-dark); color:var(--cream-on-dark); box-shadow:none; animation:none;
  border:1px solid var(--ink-dark); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:11px 16px; }
.hdr-chat:hover{ background:var(--brand); transform:none; box-shadow:none; }
.hdr-chat .hq-rays{ animation:none; opacity:1; }

/* ───────── the top of the page: A ROOM AT DUSK ─────────
   The old hero ghosted the photograph back to a third of itself and floated
   grey words over it — the owner's word was "ugly" (2026-08-17). This one is
   lit instead: the room comes up to full strength, night settles into the
   bottom third so the words have something to sit in, and a pool of lamplight
   falls from the upper right and breathes, the way a lamp does. The header
   stops being a white bar across the picture and joins it until you scroll.  */
.hero{ min-height:clamp(560px,88vh,880px); padding:0; align-items:end;
  background:var(--ink-dark); overflow:hidden; }
/* the room, actually visible */
.hero-photo img{ filter:saturate(1.04) contrast(1.06) brightness(.94); }
.hero-photo img.on{ opacity:.78; }
/* night at the foot, warmth at the top — no flat grey scrim anywhere */
.hero-wash{ background:
  linear-gradient(180deg, rgba(16,12,10,.58) 0%, rgba(16,12,10,.12) 30%,
                          rgba(16,12,10,.72) 78%, rgba(16,12,10,.92) 100%),
  radial-gradient(120% 78% at 74% 12%, rgba(255,190,108,.20), transparent 60%) !important; }

/* THE LAMPLIGHT — the two decorative orbs the studio theme had switched off are
   put back to work as light rather than decoration: a warm pool up in the right
   and a fainter one low left, blended as light on top of the photograph. */
.hero-blob{ display:block !important; position:absolute; z-index:1; pointer-events:none;
  filter:blur(64px); mix-blend-mode:screen; opacity:.9; }
.hero-blob.b1{ width:min(74vw,860px); height:min(56vh,540px); left:auto; right:-8%; top:-12%;
  background:radial-gradient(closest-side, rgba(255,186,96,.62), rgba(255,186,96,0) 72%);
  animation:emberBreath 13s ease-in-out infinite alternate; }
.hero-blob.b2{ width:min(56vw,620px); height:min(40vh,400px); right:auto; left:-12%; bottom:-6%; top:auto;
  background:radial-gradient(closest-side, rgba(226,162,75,.34), rgba(226,162,75,0) 72%);
  animation:emberBreath 19s ease-in-out infinite alternate-reverse; }
@keyframes emberBreath{
  from{ opacity:.62; transform:translate3d(0,0,0) scale(1); }
  to  { opacity:1;   transform:translate3d(0,-14px,0) scale(1.06); }
}
@media (prefers-reduced-motion:reduce){ .hero-blob{ animation:none; opacity:.8; } }

.hero-inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:0 clamp(16px,4vw,44px) clamp(52px,7vw,104px); text-align:left; align-self:end; }
.hero-inner > *{ margin-left:0; margin-right:auto; }

/* the kicker sits on a short brass rule instead of floating on its own */
.hero .eyebrow{ position:relative; color:var(--gold); letter-spacing:.34em; font-size:11px;
  font-weight:600; padding-top:16px; margin-bottom:14px; }
.hero .eyebrow::before{ content:""; position:absolute; top:0; left:0; width:46px; height:2px;
  background:var(--gold); }

.hero h1{ color:#fff; font-size:clamp(38px,5.8vw,76px); max-width:15ch; line-height:1.02;
  letter-spacing:-.015em; text-shadow:0 2px 40px rgba(0,0,0,.45); }
.hero p, .hero-sub, .hero-inner p{ color:rgba(250,244,235,.86); font-size:16px; max-width:44ch; }

/* one lit button, one outline — square, no pills */
.hero .btn{ background:var(--gold); color:#1A1512; border-color:var(--gold); font-weight:600; }
.hero .btn:hover{ background:var(--gold-hover); border-color:var(--gold-hover); color:#1A1512; }
.hero .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.hero .btn-ghost:hover{ background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }

/* the three promises: a quiet line ON the photograph, brass ticks between them */
.hero-strip{ background:transparent !important; border:0; border-top:1px solid rgba(227,162,75,.34);
  backdrop-filter:none; box-shadow:none; padding:16px clamp(16px,4vw,44px) 0;
  margin:clamp(26px,4vh,44px) auto 0; max-width:var(--maxw); }
.hero-strip li{ font-size:12.5px; }
.hero-strip strong{ color:#fff; font-weight:600; letter-spacing:.02em; }
.hero-strip span{ color:rgba(250,244,235,.66); }
.scroll-cue{ color:rgba(255,255,255,.7); }

/* ───────── the header joins the picture ─────────
   Until you scroll, the bar has no background of its own — the photograph runs
   under it and the marks on it turn to light. `.stuck` (app.js, past 8px) brings
   the paper back. */
.hdr{ background:rgba(251,248,243,.92); border-bottom:1px solid transparent;
  padding:18px clamp(16px,4vw,44px);
  transition:background .35s ease, border-color .35s ease, color .35s ease; }
.hdr.stuck{ background:rgba(251,248,243,.97); border-bottom-color:var(--line); box-shadow:none; }
.hdr:not(.stuck){ background:transparent; border-bottom-color:transparent; }
.hdr:not(.stuck) .brand,
.hdr:not(.stuck) .brand-name,
.hdr:not(.stuck) .nav a{ color:#fff; }
.hdr:not(.stuck) .brand-mark{ color:var(--gold); }
.hdr:not(.stuck) .nav a:hover{ color:var(--gold); }
.hdr:not(.stuck) .menu-btn,
.hdr:not(.stuck) .hdr-fav{ color:#fff; border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.08); }
.hdr:not(.stuck) .hdr-chat{ background:var(--gold); border-color:var(--gold); color:#1A1512; }
.hdr:not(.stuck) .hdr-right .btn-sm{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.hdr:not(.stuck) .hdr-right .btn-sm:hover{ background:var(--gold); border-color:var(--gold); color:#1A1512; }

/* ───────── the phone ─────────
   The hero was a column of solid white blocks over the picture — headline, two
   full-width buttons and a boxed list, each fighting the photograph (owner,
   2026-08-16). On a phone it now reads as ONE thing: smaller type, the two
   actions side by side as glass on the image, and the promises as a single
   quiet line with only their bold halves. */
@media (max-width:640px){
  /* short enough that the first pieces are one flick away, tall enough to be a hero */
  .hero{ min-height:min(64vh,500px); }
  .hero-inner{ padding:0 18px 30px; }
  .eyebrow{ margin-bottom:10px; font-size:10px; letter-spacing:.24em; color:rgba(255,255,255,.82); }
  .hero h1, .hero-title{ font-size:clamp(28px,8.4vw,38px); line-height:1.1; max-width:14ch; }
  /* `.hero p` (0,1,1) out-specifies `.hero-sub`, so the sub-line must be named the same way */
  .hero p, .hero-sub, .hero-inner p{ margin-top:10px; font-size:13.5px; line-height:1.5;
    color:rgba(255,255,255,.86); max-width:34ch; }

  /* two actions, one row — glass over the photo instead of two white slabs */
  /* the kicker fits on ONE line at 390px */
  .hero .eyebrow{ font-size:10px; letter-spacing:.22em; padding-top:13px; margin-bottom:10px; }
  .hero .eyebrow::before{ width:34px; }
  .hero-cta{ margin-top:20px; gap:8px; justify-content:flex-start; flex-wrap:nowrap; }
  .hero-cta .btn{ flex:1 1 0; min-width:0; padding:12px 10px; font-size:10.5px; letter-spacing:.1em;
    background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.55);
    backdrop-filter:blur(6px); }
  /* the lit one is brass on a phone too, not a white slab */
  .hero-cta .btn:first-child{ background:var(--gold); color:#1A1512;
    border-color:var(--gold); }

  /* one line, only the bold halves: "Ready now · Your colour · Delivered".
     The base sheet turns this list into a COLUMN under 560px — undo that. */
  .hero-strip{ margin-top:22px; padding:12px 18px 0; gap:0; flex-wrap:nowrap;
    flex-direction:row !important; align-items:center !important;
    width:100%; max-width:none; justify-content:space-between; }
  .hero-strip li{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; }
  .hero-strip span{ display:none; }
  .hero-strip strong{ font-weight:500; color:rgba(255,255,255,.9); }
  .scroll-cue{ display:none; }

  /* ── the top bar: ONE short row ──
     It was two rows tall (98px) — the shop's name on one, four buttons on the next.
     Now it is menu · name · basket, and everything else waits in the drawer. */
  .hdr{ display:grid !important; grid-template-columns:auto 1fr auto; align-items:center;
    gap:8px; padding:7px 10px !important; flex-wrap:nowrap; }
  .menu-btn{ display:inline-flex; width:36px; height:36px; }
  .brand{ flex-basis:auto !important; justify-content:center; margin:0; gap:7px; }
  .brand-name{ font-size:13.5px; letter-spacing:.18em; }
  .brand-mark{ width:20px; height:20px; }
  .hdr-right{ margin-left:0; gap:6px; }
  /* these moved into the drawer */
  .hdr-chat, .hdr-right .btn-sm, .hdr-call{ display:none !important; }
  .hdr-fav{ height:36px; padding:0 10px; font-size:11px; }

  /* sections breathe less on a small screen, and headings stop shouting */
  .section{ padding:clamp(40px,9vw,56px) 16px !important; }
  #collection{ padding-top:clamp(28px,6vw,40px) !important; }   /* the pieces come first */
  .section-head{ padding-bottom:12px; margin-bottom:14px; }
  .section-head h2{ font-size:clamp(22px,6.6vw,30px); }
  .kicker{ margin-bottom:4px; font-size:10px; letter-spacing:.2em; }
  .section-sub{ margin-top:4px; font-size:12.5px; }

  /* ── the browse controls, in two SHORT rows ──
     Search, then the filters wrapping onto their own lines, then a sort row: four
     tall bands before a single product appeared (owner, 2026-08-16). Now the search
     and the sort share one 38px row, and the filters are one line that scrolls
     sideways — so the collection starts almost immediately. */
  .toolbar{ display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:8px;
    align-items:center; margin-bottom:12px; padding:0 0 10px !important; }
  /* placed explicitly — left to itself the grid put the sort on a THIRD row */
  .search{ grid-column:1; grid-row:1; max-width:none; flex:1 1 auto; }
  .search input{ padding:0 12px 0 34px; height:38px; font-size:13.5px; box-shadow:none; }
  .search svg{ left:11px; width:15px; height:15px; }
  .sort{ grid-column:2; grid-row:1; margin:0 !important; gap:0; }
  .sort span{ display:none; }                 /* the dropdown says what it is */
  .sort select{ height:38px; padding:0 26px 0 10px; font-size:12.5px; box-shadow:none; }
  .chips{ grid-column:1 / -1; grid-row:2; flex-wrap:nowrap; overflow-x:auto; gap:6px; padding-bottom:2px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ padding:7px 11px; font-size:10.5px; letter-spacing:.1em; white-space:nowrap; flex:none;
    box-shadow:none; }
}

/* the section headings the page actually uses */
.section-head h2{ font-family:var(--serif); }
.section-head p{ color:var(--muted); font-size:15px; }

/* ───────── sections: air, hairlines, alternating bands ───────── */
.section{ padding:clamp(64px,9vw,132px) clamp(16px,4vw,44px); }
.section-head{ border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:clamp(28px,4vw,52px); }
.section.band{ background:var(--ink-dark); color:var(--cream-on-dark); }
.section.band h2, .section.band h3{ color:var(--cream-on-dark); }
.section.band p, .section.band li{ color:var(--cream-on-dark-muted); }
.section.band .btn{ background:var(--gold); border-color:var(--gold); color:var(--ink-dark); }

/* ───────── the collection ─────────
   The live site's card was the right idea and the owner prefers it: a white
   card that lifts off the page, WITH ITS SHADE, the piece on a soft ground,
   then name / price / photo count / stock underneath. This theme keeps all of
   that and changes only what carries the old look — the fillet (22px → 4px),
   the palette, and a calmer hover. */
.grid{ gap:clamp(18px,2.4vw,34px) clamp(14px,1.8vw,24px); }
.card{ background:var(--surface); border:1px solid var(--line); box-shadow:var(--card-shade); }
.card:hover{ transform:translateY(-4px); border-color:var(--line);
  box-shadow:var(--card-shade-hover); }
.card-media{ background:var(--surface-2); aspect-ratio:4/5; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.card:hover .card-media img{ transform:scale(1.045); }
.card-body{ padding:16px 18px 20px; }
.card-name{ font-size:15px; font-weight:600; letter-spacing:.01em; }
.card-price{ color:var(--brand); font-weight:650; font-size:14.5px; }
.card-shots{ color:var(--muted); font-size:12px; letter-spacing:0; text-transform:none; }
.badge{ background:var(--ink-dark); color:var(--cream-on-dark); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; padding:6px 10px; }
.card-add{ background:rgba(255,255,255,.94); border:1px solid var(--line); color:var(--brand);
  box-shadow:var(--shadow-sm); }
.card-add:hover{ background:var(--ink-dark); color:var(--cream-on-dark); border-color:var(--ink-dark);
  transform:scale(1.08); }
.card-add.added{ background:var(--ink-dark); border-color:var(--ink-dark); color:var(--cream-on-dark); }
.stock{ font-size:11.5px; }
.stock.ready{ color:var(--brand); }
.stock-pill{ background:transparent; border:1px solid var(--line); color:var(--muted);
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; padding:5px 9px; }

/* toolbar / filters: text, not pills */
.toolbar{ background:transparent; border:0; border-bottom:1px solid var(--line); padding:0 0 18px; }
.chip{ background:transparent; border:1px solid var(--line); color:var(--muted); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; padding:9px 14px; }
.chip.on{ background:var(--ink-dark); border-color:var(--ink-dark); color:var(--cream-on-dark); font-weight:400; }
input, select, textarea{ background:var(--surface); border:1px solid var(--line); font-family:var(--font); }
input:focus, select:focus, textarea:focus{ border-color:var(--brand); outline:none; }

/* ───────── product sheet: gallery left, quiet type right ───────── */
.sheet{ background:var(--bg); border:0; }
.pd-price{ font-family:var(--serif); font-size:24px; color:var(--text); }
.pd-desc, .pd-head{ color:var(--muted); }
.specs dt{ text-transform:uppercase; letter-spacing:.14em; font-size:10.5px; color:var(--muted); }
.specs dd{ font-size:14px; color:var(--text); }
/* the colour circles keep their size — they are the one place colour is loud */
.swatch{ border:1px solid rgba(34,28,22,.18); box-shadow:none; }
.swatch.on{ border-color:var(--bg); box-shadow:0 0 0 2px var(--ink-dark); }

/* ───────── the drawer ─────────
   Desktop keeps its nav bar, so the button and the panel only exist on phones. */
.menu-btn{ display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); color:var(--text); cursor:pointer; padding:0; }
/* the bar keeps its own nav above phone width, so the button only exists below it.
   (A plain `display:none` here would beat the phone rule — this file puts the phone
   block FIRST, and in CSS the later rule of equal weight wins.) */
@media (min-width:641px){ .menu-btn{ display:none; } }
.drawer{ position:fixed; inset:0; z-index:80; }
.drawer-scrim{ position:absolute; inset:0; background:rgba(20,28,33,.42); opacity:0;
  transition:opacity .26s var(--ease); }
.drawer.open .drawer-scrim{ opacity:1; }
.drawer-panel{ position:absolute; top:0; left:0; bottom:0; width:min(80vw,320px);
  background:var(--bg); border-right:1px solid var(--line); box-shadow:24px 0 60px -30px rgba(20,28,33,.55);
  padding:16px 16px calc(16px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:10px;
  transform:translateX(-100%); transition:transform .26s var(--ease); overflow-y:auto; }
.drawer.open .drawer-panel{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .drawer-scrim, .drawer-panel{ transition:none; }
}
.drawer-top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:10px;
  border-bottom:1px solid var(--line); }
.drawer-title{ font-family:var(--serif); letter-spacing:.24em; font-size:14px; }
.drawer-x{ width:36px; height:36px; background:transparent; border:1px solid var(--line);
  color:var(--text); font-size:20px; line-height:1; cursor:pointer; }
.drawer-nav{ display:flex; flex-direction:column; }
.drawer-nav a{ padding:13px 2px; border-bottom:1px solid var(--line); font-size:15px; color:var(--text); }
.drawer-nav a:active{ color:var(--brand); }
.drawer-act{ display:inline-flex; align-items:center; gap:8px; padding:12px 2px; background:transparent;
  border:0; border-bottom:1px solid var(--line); color:var(--text); font:inherit; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer; text-align:left; }
.drawer-act svg{ color:var(--brand); flex:none; }

/* ───────── popups ─────────
   While anything is over the page the document must not scroll behind it — a
   modal <dialog> does not stop it on phones, and the chat is a plain panel. */
body.locked{ overflow:hidden !important; }
/* …but whatever is scrollable INSIDE the popup keeps its own scroll, and does
   not hand the gesture back to the page when it reaches the end. */
.sheet, .co-body, .pd-body, .basket-list, .chat-log{ overscroll-behavior:contain; }

/* the way back out of the checkout: a step back to the basket, not just a close */
.co-back{ display:inline-flex; align-items:center; gap:6px; background:transparent; border:0;
  color:var(--muted); font:inherit; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; padding:6px 0; margin-bottom:2px; }
.co-back:hover{ color:var(--text); }
.co-back svg{ display:block; }

/* the close button is the escape hatch — make it obvious and thumb-sized */
.x{ width:42px; height:42px; font-size:24px; background:var(--surface); border-color:var(--line); }
@media (max-width:640px){ .x{ width:44px; height:44px; top:8px; right:8px; } }

/* ───────── header: every control the SAME height ─────────
   Quri, the phone and Order were three different sizes because each carried its
   own padding — they now share one height and one rhythm. */
.hdr-chat, .hdr-fav, .btn-sm, .hdr-call{
  height:38px; padding-top:0; padding-bottom:0; display:inline-flex; align-items:center;
  justify-content:center; line-height:1; box-sizing:border-box;
}
.hdr-call{ width:38px; padding:0; }
.hdr-call svg{ width:22px; height:22px; }
.hdr-chat{ padding-left:14px; padding-right:14px; }
.hdr-fav{ padding-left:12px; padding-right:12px; gap:6px; }
.btn-sm{ padding-left:18px; padding-right:18px; }

/* ───────── Quri: the line being typed always clears the text box ─────────
   The log and the composer are stacked, so the newest line used to finish flush
   against the input — legible, but it read as if the typing were happening
   underneath it. A little floor keeps the writing visibly ABOVE the box. */
.chat-log{ padding-bottom:20px; scroll-padding-bottom:20px; overscroll-behavior:contain; }

/* ───────── footer: dark band, small caps ───────── */
.ftr{ background:var(--ink-dark); color:var(--cream-on-dark-muted); border-top:0;
  padding:clamp(40px,6vw,72px) clamp(16px,4vw,44px); }
.ftr a{ color:var(--cream-on-dark-muted); }
.ftr a:hover{ color:var(--gold); }

/* offers read as one editorial line, not as loud cards */
.offer{ background:transparent; border:1px solid var(--line); }
.section.band .offer{ border-color:rgba(242,239,232,.22); }

/* motion: slower, further — the studio pages drift rather than pop */
.reveal{ transform:translateY(26px); }
.reveal.in{ transition:opacity .9s var(--ease), transform .9s var(--ease); }

/* ═════════ a shut popup is not on the page at all ═════════
   `.co-dlg{display:flex}` in styles.css beats the browser's own
   `dialog:not([open]){display:none}` — an author rule always does. So the checkout was laid
   out into the page even while SHUT, and once the phone rules below gave it a top of its own
   it surfaced as a ghost checkout sitting over the hero (owner, 2026-08-17). A dialog that is
   not open must not paint, full stop; when it opens, .co-dlg's flex column applies as before. */
dialog:not([open]){ display:none !important; }

/* ═════════ a popup never leaves the screen ═════════
   A phone's `vh` is the height the window COULD have — no address bar, no
   keyboard. Sheets were sized (92vh) and centred inside that imaginary box, so
   with the keyboard up the sheet was taller than what was visible and its top —
   carrying the close button — sat above the screen. Locked page behind, no way
   out (owner, 2026-08-17: "the checkout locks in and I can't get out of it").

   --vvh / --vvt come from app.js and follow the keyboard and the address bar in
   real time. Every sheet is bound to them, and the tall ones start AT the top of
   the visible area, so the close button is always the first thing on screen. */
@media (max-width:640px){
  .sheet{ max-height:calc(var(--vvh, 100dvh) - 12px) !important; }
  #codlg, #pdlg, #bdlg{ top:var(--vvt, 0px); bottom:auto; margin:6px auto; }
  /* the product dialog's inner grid was bound to the same lie */
  .pd{ max-height:calc(var(--vvh, 100dvh) - 12px) !important; }
  /* the pay button clears the phone's home bar */
  .co-ft{ padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
}

/* ═════════ Quri, back in the top bar ═════════
   The drawer keeps the worded button; the bar carries a small round one, so the
   assistant is one tap away without opening anything (owner, 2026-08-17). */
@media (max-width:640px){
  .hdr{ grid-template-columns:auto 1fr auto auto; }
  .hdr-chat:not([hidden]){
    display:inline-flex !important;
    /* round like Quri's other launcher — a bubble, not a panel (the square rule
       above is universal and !important, so this must be too) */
    width:36px; height:36px; padding:0 !important; border-radius:50% !important;
  }
  .hdr-chat .hq-label{ display:none; }
  .hdr-chat svg{ width:18px; height:18px; }
  /* the "live" dot belongs on the rim of the circle */
  .hdr-chat .chat-live{ top:2px; right:2px; }
}