/* commerce-premium template. First used on the WineOnline.ca rebuild (2026-11-06).
   Direction: "The object, large" (design-taste skill). Brand colours and fonts come from config.json:
   build.py writes them to css/tokens.css (and fonts/fonts.css), which load first. Do not hard-code brand colours here. */
@import url("../fonts/fonts.css?v=1794607335");
@import url("tokens.css?v=1794607335");

:root {
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --step-head: clamp(2rem, 1.25rem + 3vw, 4rem);
  --step-display: clamp(4.5rem, 1rem + 15vw, 15rem);

  --m: clamp(16px, 2.6vw, 40px);
  --gap: clamp(96px, 12vw, 200px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--text); font-size: var(--step-body); line-height: 1.55;
  font-feature-settings: "tnum" 0; text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.on-dark :focus-visible, .night :focus-visible { outline-color: var(--accent); }
::selection { background: var(--accent); color: var(--ink); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 16px; }
.skip:focus { top: 12px; }

h1, h2, h3 { margin: 0; font-weight: 600; }
.display { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 0.9; text-transform: uppercase; }
.head { font-family: var(--display); font-weight: 700; font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.015em; text-transform: uppercase; }
.sub { font-family: var(--text); font-weight: 600; font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.01em; }
.lead { font-size: var(--step-lead); line-height: 1.35; }
.small { font-size: var(--step-small); }
.muted { color: var(--muted); }
p { margin: 0 0 1em; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 1.0625rem;
  text-decoration: none; transition: transform .18s var(--ease), background-color .18s;
}
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn.dark { background: var(--ink); color: var(--paper); }
.btn.dark:hover { background: var(--ink-hover); }
.btn.ghost { background: transparent; border: 2px solid currentColor; }
.btn.ghost:hover { background: var(--ink-06); }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.link-btn { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; text-underline-offset: 3px; }

/* ---------- header ---------- */
.bar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 28px;
  padding: 0 var(--m); height: 68px; background: var(--ink); color: var(--paper);
}
.wordmark { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; }
.wordmark b { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 0.01em; }
.wordmark i { font-style: normal; font-size: 13px; letter-spacing: 0.16em; margin-top: 5px; }
.bar nav { display: flex; gap: 26px; margin-left: 12px; }
.bar nav a { text-decoration: none; font-weight: 500; font-size: 1rem; padding: 22px 0; }
.bar nav a:hover, .bar nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.bar .right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.bar .phone { text-decoration: none; font-weight: 500; white-space: nowrap; }
.cart-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; background: var(--accent); color: var(--ink); border: 0; font-weight: 600; cursor: pointer; text-decoration: none; }
.cart-btn .count { font-variant-numeric: tabular-nums; }
.menu-btn { display: none; background: none; border: 0; color: var(--paper); min-height: 44px; min-width: 44px; font-weight: 600; cursor: pointer; }
@media (max-width: 1180px) { .bar .phone { display: none; } }
@media (max-width: 860px) {
  .bar { gap: 12px; height: 60px; }
  .bar nav { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; background: var(--ink); padding: 8px var(--m) 20px; }
  .bar nav.open { display: flex; }
  .bar nav a { padding: 14px 0; font-size: 1.25rem; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .wordmark b { font-size: 18px; }
}

/* ---------- home: hero (object cropped by three edges) ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--accent); color: var(--ink);
  min-height: calc(100svh - 68px); display: grid; grid-template-columns: repeat(12, 1fr); padding: 0 var(--m);
}
.hero-object {
  position: absolute; z-index: 1; left: 6vw; top: -12%; height: 128%; width: auto; max-width: none;
  transform: rotate(-14deg); transform-origin: 50% 50%; pointer-events: none;
}
.hero-text { grid-column: 6 / 13; z-index: 3; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; padding: 48px 0 120px; }
.hero h1 { font-size: min(clamp(5rem, 2rem + 14vw, 15.5rem), var(--hero-fit, 100vw));  /* --hero-fit: set by build.py from the longest headline line */
  line-height: .86; letter-spacing: -0.035em; }
.hero h1 span { display: block; }
.hero .intro { max-width: 30ch; margin-top: 36px; font-size: var(--step-lead); line-height: 1.3; font-weight: 500; position: relative; z-index: 3; }
.hero-offer {
  position: absolute; z-index: 4; right: var(--m); bottom: 28px; display: flex; align-items: stretch; gap: 0;
  background: var(--ink); color: var(--paper); max-width: min(560px, calc(100vw - 2 * var(--m)));
}
.hero-offer .meta { padding: 12px 18px; font-size: var(--step-small); line-height: 1.35; }
.hero-offer .meta strong { display: block; font-size: 1rem; }
.hero-offer .btn { min-height: auto; background: var(--paper); }
.hero-offer .btn:hover { background: var(--paper); }
@media (max-width: 860px) {
  .hero { min-height: auto; display: block; padding-top: 52svh; }
  .hero-object { left: 50%; top: -18svh; height: 76svh; transform: translateX(-62%) rotate(-14deg); }
  .hero-text { align-items: flex-end; padding: 0 0 132px; }
  .hero h1 { font-size: min(26vw, var(--hero-fit-m, 100vw)); }
  .hero .intro { margin-top: 20px; font-size: 1.125rem; }
  .hero-offer { left: var(--m); right: var(--m); bottom: 16px; }
}

/* ---------- section scaffolding ---------- */
.sect { padding: var(--gap) var(--m); position: relative; }
.sect.tight { padding-top: calc(var(--gap) * .6); padding-bottom: calc(var(--gap) * .6); }
.night { background: var(--night); color: var(--paper); }
.night .muted { color: var(--on-dark-muted); }
.deepfield { background: var(--deep); color: var(--paper); }
.deepfield .muted { color: var(--on-deep-muted); }
.tone { background: var(--surface); }
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 2vw, 32px); }

/* ---------- showcase: object on a disc (quick picks, the live thing) ---------- */
.quick { min-height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; overflow: hidden; }
.quick-list { grid-column: 1 / 6; align-self: end; padding-bottom: 8px; z-index: 2; }
.quick-list h2 { font-family: var(--text); font-weight: 600; font-size: clamp(28px, 2.9vw, 44px); line-height: 1.15; color: var(--muted); margin-bottom: 10px; }
.quick-list ul { list-style: none; margin: 0; padding: 0; }
.quick-list ul button {
  display: block; background: none; border: 0; padding: 2px 0; cursor: pointer; text-align: left;
  font-size: clamp(28px, 2.9vw, 44px); line-height: 1.15; font-weight: 600; color: var(--muted); letter-spacing: -0.01em;
  transition: color .2s, transform .25s var(--ease);
}
.quick-list ul button:hover { color: var(--ink); transform: translateX(6px); }
.quick-list ul button[aria-pressed="true"] { color: var(--ink); }
.quick-list ul button[aria-pressed="true"]::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .35em; background: var(--accent); vertical-align: .12em; }
.ask { margin-top: 28px; max-width: 520px; }
.ask label { display: block; font-weight: 600; margin-bottom: 8px; }
.ask .row { display: flex; gap: 0; }
.ask input { flex: 1; min-width: 0; min-height: 56px; padding: 0 16px; border: 2px solid var(--ink); background: var(--paper); font-size: 1.0625rem; border-radius: 0; }
.ask .btn { min-height: 56px; }
.ask .hint { margin-top: 8px; color: var(--muted); font-size: var(--step-small); }
.disc-wrap { grid-column: 6 / 13; position: relative; height: 100svh; display: grid; place-items: center; }
.disc { width: min(64vh, 46vw); aspect-ratio: 1; border-radius: 50%; background: var(--deep); transition: background-color .45s var(--ease); }
.disc-object { position: absolute; left: 50%; bottom: calc(50% - min(32vh, 23vw)); height: min(78vh, 60vw); width: auto; transform: translateX(-50%); transition: opacity .3s; }
.disc-object.swap { opacity: 0; }
.disc-fact { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: min(260px, 30%); font-size: 1.0625rem; line-height: 1.4; }
.disc-fact strong { display: block; font-size: 1.1875rem; line-height: 1.25; margin-bottom: 4px; }
.disc-fact .price { display: block; font-weight: 600; margin: 10px 0 14px; font-size: 1.25rem; }
.answer { margin-top: 24px; max-width: 560px; background: var(--surface); padding: 22px 24px; display: none; }
.answer.show { display: block; }
.answer, .answer p, .answer li, .answer a, .answer button { font-size: 1.0625rem; line-height: 1.5; }
.answer p { margin: 0 0 12px; }
.answer ol { margin: 0; padding-left: 1.2em; }
.answer li { margin: 0 0 12px; }
.answer li strong { font-weight: 600; }
.answer .link-btn { display: inline; font-weight: 600; color: var(--ink); margin-left: 4px; }
.answer .who { font-size: .9375rem; color: var(--muted); margin: 12px 0 0; }
@media (max-width: 860px) {
  .quick { display: block; min-height: 0; padding-top: 72px; }
  .disc-wrap { height: auto; padding: 40px 0 24px; }
  .disc { width: 86vw; }
  .disc-object { height: 104vw; bottom: 40px; }
  .disc-fact { position: static; transform: none; width: auto; margin-top: 18px; }
  .quick-list ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
  .quick-list ul button { font-size: 22px; }
  .quick-list h2 { font-size: 26px; }
}

/* ---------- sticky photograph, active list (this week's picks) ---------- */
.picks { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); }
.picks-stage { grid-column: 1 / 6; position: sticky; top: 12vh; height: 76vh; background: var(--surface); overflow: hidden; }
.picks-stage img { position: absolute; left: 50%; top: 6%; height: 88%; width: auto; max-width: none; transform: translateX(-50%); transition: opacity .3s, transform .5s var(--ease); }
.picks-stage img.swap { opacity: 0; transform: translateX(-50%) translateY(14px); }
.picks-body { grid-column: 7 / 13; }
.picks-body h2 { margin-bottom: 40px; }
.pick { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 18px 20px; margin: 0 -20px; text-decoration: none; transition: background-color .2s; }
.pick:nth-child(odd) { background: var(--ink-03); }
.pick:hover, .pick:focus-visible, .pick.active { background: var(--accent); }
.pick .n { font-size: clamp(22px, 1.9vw, 28px); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.pick .w { font-size: 1rem; color: var(--muted); grid-column: 1; }
.pick .p { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; text-align: right; }
.pick .p small { display: block; font-weight: 400; font-size: .875rem; color: var(--muted); }
.pick:hover .w, .pick.active .w, .pick:hover small, .pick.active small { color: var(--ink); }
.picks-more { margin-top: 40px; }
@media (max-width: 860px) {
  .picks { display: block; }
  .picks-stage { display: none; }
  .pick { margin: 0; padding: 16px 12px; grid-template-columns: 64px 1fr auto; }
  .pick .thumb { display: block !important; grid-row: 1 / span 2; height: 88px; width: auto; justify-self: center; }
  .pick .n { font-size: 20px; grid-column: 2; }
  .pick .w { grid-column: 2; }
  .pick .p { grid-column: 3; }
}
.pick .thumb { display: none; }

/* ---------- one step at a time ---------- */
.steps { position: relative; }
.step { position: relative; height: 100svh; overflow: hidden; color: var(--paper); }
.step img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.step .shade { position: absolute; inset: 0; background: var(--shade); }
.step .word-wrap { position: absolute; inset: 0; }
.step h3 { position: sticky; top: 50%; transform: translateY(-50%); text-align: center; font-family: var(--display); font-weight: 700; font-size: clamp(3.5rem, 1rem + 10.5vw, 12.5rem); line-height: .9; letter-spacing: -0.03em; text-transform: uppercase; color: var(--paper); margin: 0; padding-top: 40svh; }
.step .line { position: absolute; left: var(--m); bottom: var(--m); max-width: 40ch; font-size: 1.1875rem; line-height: 1.45; padding: 18px 22px; background: var(--shade-strong); }
.step .credit { position: absolute; right: var(--m); bottom: 12px; font-size: 13px; opacity: .85; }
.steps-head { padding: var(--gap) var(--m) 56px; }
@media (max-width: 860px) {
  .step h3 { font-size: 15vw; }
  .step .line { left: 0; right: 0; bottom: 0; max-width: none; font-size: 1rem; padding: 16px var(--m) 40px; }
  .step .credit { left: var(--m); right: var(--m); bottom: 10px; font-size: 13px; }
}

/* ---------- about: inset panel, shaped picture ---------- */
.panel { margin: 0 20px; background: var(--deep); color: var(--paper); min-height: 110svh; position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: 56px; }
.panel h2 { grid-column: 1 / 8; font-size: clamp(2rem, 1rem + 2.6vw, 3.5rem); }
.panel .shape { position: absolute; left: 56px; bottom: -8vw; width: 40vw; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.panel .shape img { width: 100%; height: 100%; object-fit: cover; }
.panel .blocks { grid-column: 8 / 13; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 56px; padding-top: 8px; }
.panel .blocks h3 { font-size: 1.375rem; font-weight: 600; margin-bottom: 10px; }
.panel .blocks p { font-size: 1.0625rem; color: var(--on-deep); }
.panel .credit { position: absolute; right: 56px; bottom: 20px; font-size: 13px; color: var(--on-deep-muted); }
@media (max-width: 860px) {
  .panel { margin: 0 10px; display: block; padding: 40px 22px 0; min-height: 0; }
  .panel h2 { font-size: 10vw; }
  .panel .blocks { margin-top: 36px; gap: 32px; }
  .panel .shape { position: relative; left: auto; bottom: auto; width: 86vw; margin: 40px auto -22vw; }
  .panel .credit { position: static; padding: 30vw 0 16px; }
}

/* ---------- testimonial ---------- */
.quote { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.quote figure { margin: 0; grid-column: 2 / 6; }
.quote figure img { width: 100%; height: 70svh; object-fit: cover; }
.quote figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.quote blockquote { grid-column: 7 / 13; margin: 120px 0 0; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.25; font-weight: 500; max-width: 40ch; letter-spacing: -0.01em; }
.quote blockquote footer { margin-top: 28px; font-size: 1rem; font-weight: 400; letter-spacing: 0; }
.quote .score { grid-column: 1 / 13; margin: 0 0 96px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.quote .score div { display: flex; flex-direction: column; }
.quote .score dd { margin: 0; font-size: 1.0625rem; color: var(--muted); }
.quote .score dt { font-family: var(--display); font-weight: 700; font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); line-height: 1; margin-bottom: 8px; }
@media (max-width: 860px) {
  .quote { display: block; }
  .quote figure img { width: 72%; height: auto; aspect-ratio: 3/4; }
  .quote blockquote { margin-top: 32px; font-size: 22px; }
  .quote .score { grid-template-columns: 1fr; gap: 24px; margin: 0 0 48px; }
}

/* ---------- FAQ ---------- */
.faq h2 { font-size: clamp(2.5rem, 1rem + 5.5vw, 6rem); max-width: 14ch; }
.faq-list { margin-top: 56px; max-width: 980px; }
.faq details { padding: 0 24px; margin: 0 -24px 12px; }
.faq details[open] { background: var(--surface); padding-bottom: 20px; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font-size: clamp(20px, 1.6vw, 24px); font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { max-width: 52ch; font-size: 1.0625rem; margin: 0 0 10px; }
@media (max-width: 860px) {
  .faq-list { margin-left: 0; margin-top: 48px; }
  .faq h2 { font-size: 10vw; }
  .faq details { margin: 0 calc(-1 * var(--m)) 8px; padding: 0 var(--m); }
  .faq summary { font-size: 19px; }
}

/* ---------- CTA: the object returns ---------- */
.cta { position: relative; overflow: hidden; min-height: 90svh; background: var(--accent); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: 0 var(--m); }
.cta img { position: absolute; left: -4vw; bottom: -46%; height: 150%; width: auto; max-width: none; transform: rotate(78deg); transform-origin: 50% 60%; }
.cta .text { grid-column: 9 / 13; align-self: center; z-index: 1; padding: 64px 0; }
.cta h2 { font-size: clamp(2rem, 1.2rem + 2vw, 2.75rem); line-height: 1; }
.cta .fact { font-size: 1.375rem; font-weight: 600; margin: 18px 0 24px; }
@media (max-width: 860px) {
  .cta { display: block; min-height: 0; padding-bottom: 60svh; }
  .cta .text { padding: 56px 0 24px; }
  .cta img { left: auto; right: -20vw; bottom: -40svh; height: 110svh; }
}

/* ---------- footer: name across the last photograph ---------- */
.foot { position: relative; min-height: 100svh; color: var(--paper); display: flex; flex-direction: column; overflow: hidden; }
.foot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.42); }
.foot .top { position: relative; display: flex; justify-content: space-between; gap: 40px; padding: 32px var(--m); flex-wrap: wrap; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .contact { text-align: right; }
.foot .big { position: relative; margin-top: auto; padding: 0 var(--m); font-family: var(--display); font-weight: 700; font-size: 11.6vw; line-height: .82; letter-spacing: -0.03em; white-space: nowrap; }
.foot .legal { position: relative; padding: 18px var(--m) 28px; font-size: 15px; line-height: 1.5; color: var(--on-dark-muted); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30em), 1fr)); gap: 0 48px; }
.foot .legal p { max-width: 80ch; }
.foot .legal p { margin: 0 0 6px; }
@media (max-width: 860px) {
  .foot { min-height: 88svh; }
  .foot .contact { text-align: left; }
  .foot .big { font-size: 12.4vw; }
}

/* ---------- inner pages ---------- */
.page-head { padding: clamp(56px, 8vw, 120px) var(--m) 40px; }
.page-head h1 { font-size: clamp(2.5rem, 1rem + 6vw, 7rem); line-height: .92; max-width: 16ch; }
.page-head .lead { max-width: 46ch; margin-top: 24px; }
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--step-lead); font-weight: 600; margin: 48px 0 12px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 8px; }
.two { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: 0 var(--m) var(--gap); }
.two > .prose { grid-column: 1 / 8; }
.two > aside { grid-column: 9 / 13; }
@media (max-width: 860px) { .two { display: block; } .two > aside { margin-top: 40px; } }
.note-box { background: var(--surface); padding: 22px 24px; }
.note-box h2, .note-box h3 { font-size: 1.1875rem; font-weight: 600; margin: 0 0 8px; }
.proposed { display: block; background: var(--night); color: var(--paper); padding: 14px var(--m); font-size: 1rem; }
.proposed strong { color: var(--accent); }

/* tables (allowed lines inside real tables) */
table.plain { border-collapse: collapse; width: 100%; font-size: 1.0625rem; }
table.plain th, table.plain td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--surface-2); vertical-align: top; }
table.plain th { font-weight: 600; }

/* ---------- shop ---------- */
.shop-top { padding: 48px var(--m) 24px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
.shop-top h1 { grid-column: 1 / 6; font-size: clamp(2.5rem, 1rem + 5vw, 5.5rem); line-height: .92; }
.search { grid-column: 6 / 13; }
.search label { display: block; font-weight: 600; margin-bottom: 8px; }
.search .row { display: flex; }
.search input { flex: 1; min-width: 0; min-height: 60px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); font-size: 1.125rem; }
.search .btn { min-height: 60px; }
.search .tries { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: var(--step-small); color: var(--muted); }
.search .tries button { background: none; border: 0; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--ink); font-size: var(--step-small); }
.understood { padding: 0 var(--m); min-height: 28px; font-size: 1rem; }
.understood b { background: var(--accent); padding: 1px 6px; font-weight: 600; }
.shop { display: grid; grid-template-columns: 280px 1fr; gap: 40px; padding: 16px var(--m) var(--gap); }
.filters { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 100px); overflow: auto; padding-right: 8px; }
.filters fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.filters legend { font-weight: 600; font-size: 1.0625rem; margin-bottom: 6px; }
.filters label { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; font-size: 1rem; }
.filters label .c { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .9375rem; }
.filters input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--ink); }
.filters .price-row { display: flex; gap: 8px; align-items: center; }

.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.results-bar select { min-height: 44px; padding: 0 12px; border: 0; background: var(--surface); font-size: 16px; }
.filter-toggle { display: none; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 20px; }
.card { position: relative; display: flex; flex-direction: column; text-decoration: none; }
.card .ph { position: relative; background: var(--surface); aspect-ratio: 4 / 5; overflow: hidden; transition: background-color .25s; }
.card .ph img { position: absolute; left: 50%; top: 7%; height: 86%; width: auto; max-width: none; transform: translateX(-50%); transition: transform .45s var(--ease); }
.card:hover .ph { background: var(--surface-2); }
.card:hover .ph img { transform: translateX(-50%) translateY(-6px) rotate(-2deg); }
.card .t { font-weight: 600; font-size: 1.0625rem; line-height: 1.25; margin-top: 12px; }
.card .by { font-size: .9375rem; color: var(--muted); margin-top: 2px; }
.card .pr { margin-top: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.card .pr small { font-weight: 400; color: var(--muted); }
.card .tag { position: absolute; top: 10px; left: 10px; background: var(--ink); color: var(--paper); font-size: 13px; padding: 4px 8px; }
.card .stars { font-size: .9375rem; margin-top: 4px; }
.empty { padding: 40px 0; font-size: 1.125rem; }
@media (max-width: 960px) {
  .shop-top { display: block; }
  .search { margin-top: 24px; }
  .shop { display: block; }
  .filters { position: fixed; inset: 0 0 0 auto; width: min(92vw, 380px); max-height: none; background: var(--bg); z-index: 60; padding: 24px; transform: translateX(105%); transition: transform .3s var(--ease); }
  .filters.open { transform: none; }
  .filter-toggle { display: inline-flex; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
}

/* ---------- product page: split stage ---------- */
.product { display: grid; grid-template-columns: 1fr 1fr; }
.stage { position: sticky; top: 68px; height: calc(100svh - 68px); background: var(--surface); overflow: hidden; display: grid; place-items: center; }
.stage .photo { position: absolute; left: 50%; top: 7%; height: calc((100svh - 68px) * 1.22); width: auto; max-width: none; transform: translateX(-50%); transition: opacity .4s; }
.stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .5s; touch-action: pan-y; cursor: grab; }
.stage.three-on canvas { opacity: 1; }
.stage.three-on .photo { opacity: 0; }
.stage .turn { position: absolute; left: 24px; bottom: 24px; z-index: 2; }
.stage .turn-note { position: absolute; left: 24px; bottom: 84px; font-size: 1rem; color: var(--ink); background: var(--surface); padding: 6px 10px; z-index: 2; max-width: 30ch; display: none; }
.stage.three-on .turn-note { display: block; }
@media (max-width: 960px) { .stage .turn-note { top: 12px; bottom: auto; font-size: .875rem; } }
.product-body { padding: 56px var(--m) var(--gap); }
.crumbs { font-size: 1rem; color: var(--muted); margin-top: 64px; }
.crumbs a { color: var(--muted); }
.product-body h1 { font-size: clamp(2rem, 1rem + 2.6vw, 3.4rem); line-height: 1; max-width: 18ch; }
.product-body .who { font-size: var(--step-lead); margin-top: 14px; }
.isit { margin: 22px 0 0; font-size: 1.125rem; font-weight: 600; }
.buy { margin-top: 32px; background: var(--surface); padding: 24px; }
.buy .price { font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 1rem + 5.4vw, 7rem); line-height: .9; letter-spacing: -0.03em; }
.buy .price small { display: block; font-family: var(--text); font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-top: 10px; }

.buy .case { margin: 8px 0 18px; font-size: 1.0625rem; }
.buy .qty { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.buy .qty button { min-height: 48px; min-width: 64px; padding: 0 14px; background: var(--paper); border: 0; cursor: pointer; font-weight: 600; font-size: 1rem; }
.buy .qty button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.buy .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.buy .actions .btn { flex: 1 1 200px; }
.deliv { margin-top: 18px; font-size: 1rem; }
.deliv form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.deliv input { min-height: 48px; width: 150px; padding: 0 12px; border: 2px solid var(--ink); background: var(--paper); font-size: 16px; text-transform: uppercase; }
.deliv .out { margin-top: 10px; min-height: 1.5em; }
.deliv .out .hold { color: var(--warn); font-weight: 600; }
.deliv .out .go { color: var(--ok); font-weight: 600; }
.facts { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.facts div { font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); line-height: 1.3; }
.facts dt { font-size: var(--step-small); color: var(--muted); margin-bottom: 2px; }
.facts dd { margin: 0; font-weight: 500; }
.note-sec { margin-top: 64px; }
.note-sec h2 { font-size: var(--step-lead); margin-bottom: 14px; }
.note-sec .text { font-size: 1.1875rem; line-height: 1.6; }
.note-sec .sig { margin-top: 10px; color: var(--muted); font-size: 1rem; }
.reviews-box { margin-top: 56px; }
.reviews-box h2 { font-size: var(--step-lead); margin-bottom: 8px; }
.journey { margin-top: 72px; }
.journey h2 { font-size: var(--step-lead); margin-bottom: 8px; }
.journey .map { margin-top: 18px; background: var(--night); position: relative; }
.journey .map svg { width: 100%; height: auto; }
.journey .land { fill: var(--map-land); }
.journey .route { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.journey .dot { fill: var(--accent); }
.journey .lbl { fill: var(--paper); font-family: var(--text); font-weight: 600; }
.journey ol { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.journey li { font-size: .9375rem; line-height: 1.4; }
.journey li strong { display: block; font-size: 1.0625rem; }
.journey .fine { font-size: 13px; color: var(--muted); margin-top: 10px; }
.maker { margin-top: 64px; }
.maker h2 { font-size: var(--step-lead); margin-bottom: 12px; }
.similar { padding: var(--gap) var(--m); }
.similar h2 { margin-bottom: 36px; }
.similar .cards { grid-template-columns: repeat(3, 1fr); }
.sticky-buy { display: none; }
@media (max-width: 960px) {
  .product { display: block; }
  .stage { position: relative; top: 0; height: 52svh; }
  .stage .photo { height: 64svh; top: 4%; }
  .facts { grid-template-columns: 1fr 1fr; }
  .journey ol { grid-template-columns: 1fr 1fr; }
  .similar .cards { grid-template-columns: repeat(2, 1fr); }
  .sticky-buy { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--ink); color: var(--paper); padding: 10px var(--m); align-items: center; gap: 12px; transform: translateY(110%); transition: transform .3s var(--ease); }
  .sticky-buy.show { transform: none; }
  .sticky-buy .p { font-weight: 600; flex: 1; font-size: 1rem; line-height: 1.2; }
  .sticky-buy .btn { min-height: 48px; }
}

/* ---------- case builder ---------- */
.builder { display: grid; grid-template-columns: 1fr 380px; gap: 40px; padding: 8px var(--m) var(--gap); }
.tray { position: sticky; top: 88px; align-self: start; background: var(--night); color: var(--paper); padding: 24px; }
.tray h2 { font-size: 1.375rem; margin-bottom: 14px; }
.slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 18px; }
.slot { aspect-ratio: 1 / 2.4; background: var(--night-2); display: grid; place-items: end center; overflow: hidden; }
.slot img { height: 92%; width: auto; }
.meter { height: 10px; background: var(--night-2); margin: 10px 0 6px; }
.meter i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .4s var(--ease); }
.tray .rows { font-size: 1rem; }
.tray .rows div { display: flex; justify-content: space-between; padding: 4px 0; }
.tray .total { font-size: 1.5rem; font-weight: 600; }
.tray ul { list-style: none; margin: 14px 0; padding: 0; max-height: 220px; overflow: auto; font-size: .9375rem; }
.tray li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; }
.tray li button { background: none; border: 0; color: var(--paper); text-decoration: underline; cursor: pointer; font-size: .875rem; min-height: 32px; }
.add-one { margin-top: 10px; }
@media (max-width: 960px) { .builder { display: block; } .tray { position: sticky; top: 60px; z-index: 20; margin: 0 calc(-1 * var(--m)) 24px; } .tray ul, .tray .rows .hide-m { display: none; } .slots { grid-template-columns: repeat(12, 1fr); } }

/* ---------- cart drawer ---------- */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--bg); z-index: 80; transform: translateX(105%); visibility: hidden; transition: transform .32s var(--ease), visibility 0s .32s; display: flex; flex-direction: column; }
.drawer.open { transform: none; visibility: visible; transition: transform .32s var(--ease); }
.drawer header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; background: var(--ink); color: var(--paper); }
.drawer header h2 { font-size: 1.25rem; }
.drawer header button { background: none; border: 0; color: var(--paper); min-height: 44px; min-width: 44px; cursor: pointer; font-weight: 600; }
.drawer .items { flex: 1; overflow: auto; padding: 8px 22px; }
.drawer .item { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; padding: 14px 0; align-items: center; }
.drawer .item img { height: 92px; width: auto; justify-self: center; }
.drawer .item .n { font-weight: 600; line-height: 1.25; font-size: 1rem; }
.drawer .item .q { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.drawer .item .q button { min-width: 36px; min-height: 36px; border: 0; background: var(--surface); cursor: pointer; font-weight: 600; }
.drawer .sum { padding: 18px 22px 22px; background: var(--surface); }
.drawer .sum div { display: flex; justify-content: space-between; padding: 3px 0; }
.drawer .sum .tot { font-weight: 600; font-size: 1.25rem; padding-top: 8px; }
.drawer .sum .btn { margin-top: 14px; }
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 70; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s .3s; }
.scrim.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); visibility: hidden; background: var(--ink); color: var(--paper); padding: 14px 20px; z-index: 90; transition: transform .3s var(--ease); max-width: calc(100vw - 32px); }
.toast.show { transform: translate(-50%, 0); visibility: visible; }

/* ---------- checkout ---------- */
.co { display: grid; grid-template-columns: 1fr 400px; gap: 48px; padding: 0 var(--m) var(--gap); }
.co form { max-width: 640px; }
.co fieldset { border: 0; padding: 0; margin: 0 0 36px; }
.co legend { font-size: var(--step-lead); font-weight: 600; margin-bottom: 14px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 1rem; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 0 14px; border: 2px solid var(--surface-2); border-radius: 0; background: var(--paper); font-size: 16px; }
.field input:focus, .field select:focus { border-color: var(--ink); outline: none; }
.field .help { font-size: .9375rem; color: var(--muted); margin-top: 6px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.days label { display: block; background: var(--surface); padding: 12px; cursor: pointer; font-size: .9375rem; min-height: 44px; }
.days input { position: absolute; opacity: 0; }
.days input:checked + span { font-weight: 600; }
.days label:has(input:checked) { background: var(--ink); color: var(--paper); }
.days label:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.summary { position: sticky; top: 88px; align-self: start; background: var(--surface); padding: 24px; }
@media (max-width: 960px) { .co { display: flex; flex-direction: column; } .summary { position: static; order: -1; margin-bottom: 24px; } .row2 { grid-template-columns: 1fr; } }  /* phone: the total comes before the form */

/* ---------- my orders (reorder) ---------- */
.reorder { padding: 0 var(--m) var(--gap); }
.order { margin-bottom: 48px; }
.order h2 { font-size: 1.25rem; margin-bottom: 12px; }
.ro { display: grid; grid-template-columns: 70px 1fr auto; gap: 18px; align-items: center; padding: 14px 0; }
.ro:nth-child(even) { background: var(--ink-03); }
.ro img { height: 110px; width: auto; justify-self: center; }
.ro .n { font-weight: 600; font-size: 1.125rem; }
.rate { display: flex; gap: 2px; margin-top: 6px; }
.rate button { background: none; border: 0; cursor: pointer; font-size: 22px; min-width: 32px; min-height: 36px; color: var(--surface-2); padding: 0; }
.rate button.on { color: var(--ink); }
.ro textarea { width: 100%; max-width: 420px; min-height: 44px; margin-top: 8px; border: 2px solid var(--surface-2); background: var(--paper); padding: 10px; font-size: 16px; }
.ro .side { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
@media (max-width: 760px) { .ro { grid-template-columns: 56px 1fr; } .ro .side { grid-column: 1 / -1; align-items: stretch; } }

/* ---------- motion helpers ---------- */
.rise { opacity: 0; transform: translateY(24px); }
.rise.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.no-js .rise, .reduced .rise { opacity: 1; transform: none; }
.shutter { clip-path: inset(0 0 100% 0); }
.shutter.open { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; }
  .shutter { clip-path: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* phone type: an extended display face needs headings to step down further */
@media (max-width: 600px) {
  .head { font-size: clamp(1.625rem, 1rem + 2.6vw, 2rem); }
  .page-head h1 { font-size: clamp(1.75rem, 1rem + 3vw, 2.2rem); max-width: none; }
  .panel h2 { font-size: 7.4vw; }
  .faq h2 { font-size: 7.4vw; }
}

/* ---------- phone fixes ---------- */
.cart-btn .lbl-s { display: none; }
@media (max-width: 600px) {
  .wordmark b { font-size: min(17px, var(--wm-fit-m, 17px)); white-space: nowrap; }  /* --wm-fit-m: build.py, from the wordmark length */
  .wordmark i { display: none; }
  .cart-btn { white-space: nowrap; padding: 0 12px; }
  .cart-btn .lbl-l { display: none; }
  .cart-btn .lbl-s { display: inline; }
  .hero-object { top: -22svh; height: 72svh; }
  .disc-wrap { display: grid; grid-template-areas: "disc" "fact"; justify-items: center; padding: 24px 0 8px; }
  .disc { grid-area: disc; align-self: end; }
  .disc-object { grid-area: disc; position: relative; left: auto; bottom: auto; transform: none; align-self: end; height: 104vw; margin-bottom: 6vw; }
  .disc-fact { grid-area: fact; justify-self: stretch; }
}

/* ---------- alignment pass ---------- */
/* every control on a row shares one height and centres its label */
.days label { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 0 10px; }
.deliv form { align-items: stretch; }
.deliv input, .deliv .btn { min-height: 52px; }
.results-bar > div { align-items: stretch !important; }
.results-bar select, .results-bar .btn { min-height: 48px; }
.buy .qty button { display: inline-flex; align-items: center; justify-content: center; }
.tray li { align-items: center; }
.drawer .item .q { align-items: center; }
.drawer .item .q span { min-width: 28px; text-align: center; }
.ro .side .btn { min-width: 150px; }
.hero-offer { align-items: stretch; }
.hero-offer .btn { display: flex; align-items: center; padding: 0 24px; white-space: nowrap; }
.hero-offer .meta { display: flex; flex-direction: column; justify-content: center; }
.card .t, .card .by, .card .pr, .card .stars { display: block; }
.filters label input { flex: none; margin: 0; }
.faq summary { display: flex; align-items: center; min-height: 64px; }
.rate { align-items: center; }
.rate button { display: inline-flex; align-items: center; justify-content: center; }
.cart-btn { justify-content: center; }
.bar .right { align-items: center; }
.picks-more .btn, .similar .btn { min-height: 52px; }
/* cards: prices line up along each row; case price on its own line */
.cards { align-items: stretch; }
.card { height: 100%; }
.card .pr { margin-top: auto; padding-top: 8px; }
.card .pr small:last-child { display: block; }
/* footer wordmark fits the width at every size */
.foot .big { font-size: 9.6vw; letter-spacing: -0.035em; }
@media (max-width: 860px) { .foot .big { font-size: 10.2vw; } }
/* case tray rows: name wraps on the left, the remove control stays on one line, top-aligned with the name */
.tray li { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.tray li button { white-space: nowrap; min-height: 0; padding: 2px 0; line-height: 1.5; text-align: right; }
@media (max-width: 860px) { .foot .big { font-size: 9.4vw; } }
/* header: nothing wraps; the menu collapses before the links run out of room */
.wordmark b, .wordmark i, .bar nav a, .cart-btn, .bar .phone { white-space: nowrap; }
@media (max-width: 1100px) {
  .bar nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; background: var(--ink); padding: 8px var(--m) 20px; }
  .bar nav.open { display: flex; }
  .bar nav a { padding: 14px 0; font-size: 1.25rem; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
}