/* ==========================================================================
   NOS Watches v2 theme: the shop (woocommerce/archive-product.php).
   Light, legible, tokens only (tokens.css). The one dark-ish moment is the
   aisle view, and it is a lit warehouse at closing time, not a dark room.
   Filters are applied on the server; this sheet never hides watches itself.
   Upright type only, never green UI, never black CTAs, never em dashes.
   ========================================================================== */

.sh, .ctr, .res, .pr { --wrap: 1440px; }
.sh-in, .ctr-in, .res-bar, .vg, .pr-in, .sa-in { max-width: var(--wrap); margin: 0 auto; padding-left: var(--g); padding-right: var(--g); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nos-shop button { font: inherit; color: inherit; }

/* ---------- title band ---------- */
.sh { padding-top: calc(var(--nos-hdr) + clamp(28px, 6vw, 72px)); }
.sh-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding-bottom: clamp(22px, 3vw, 34px); border-bottom: 1px solid var(--line); background-clip: content-box; }
.sh-in { border-bottom: 0; position: relative; }
.sh-in::after { content: ""; position: absolute; left: var(--g); right: var(--g); bottom: 0; height: 1px; background: var(--line); }
.sh-h { margin: 0; font: 400 clamp(56px, 8.2vw, 124px)/.92 var(--f-display); letter-spacing: -.025em; font-optical-sizing: auto; }
.sh-line { margin: clamp(14px, 1.6vw, 22px) 0 0; font: 400 clamp(18px, 1.5vw, 21px)/1.45 var(--f-ui); color: var(--ink-2); max-width: 62ch; text-wrap: balance; }
.nw { white-space: nowrap; }
.sh-n { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

/* condition switch: two separate lists, factory-new (default) and pre-owned */
.cond { display: flex; gap: clamp(20px, 3vw, 34px); margin-top: clamp(14px, 1.8vw, 24px); }
.cond-t { position: relative; display: inline-flex; align-items: baseline; gap: 9px; min-height: 48px; padding: 12px 0 0; border: 0; background: none; font: 500 19px/1 var(--f-ui); letter-spacing: .005em; color: var(--ink-2); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .2s, box-shadow .3s var(--ease); }
.cond-t:hover { color: var(--ink); }
.cond-n { font: 500 13px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.cond-t { text-decoration: none; }
.cond-t[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--amber); }
.cond-t:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

/* view toggle */
.vt { display: none; flex: none; padding: 4px; gap: 4px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.js .vt { display: inline-flex; }
.vt-b { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: transparent; font: 500 16px/1 var(--f-ui); letter-spacing: .01em; cursor: pointer; transition: background-color .25s, color .25s; }
.vt-b svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vt-b:hover { background: var(--paper-2); }
.vt-b[aria-pressed="true"] { background: var(--amber); }

/* ---------- filters (the counter) ---------- */
.ctr { position: relative; z-index: 2; }
.ctr-in { display: grid; gap: 14px 28px; padding-top: clamp(20px, 2.4vw, 28px); padding-bottom: 6px; grid-template-columns: minmax(0, 1fr); }
.fg { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; align-items: center; gap: 14px; }
.fg-l { float: left; flex: none; width: 3.6em; padding: 0; font: 500 15px/1 var(--f-ui); color: var(--ink-2); }
.chips { display: flex; gap: 8px; min-width: 0; flex-wrap: wrap; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: 500 16px/1 var(--f-ui); white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s; }
.chip:hover { border-color: var(--ink-2); }
.chip-n { font: 500 13px/1 var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"], .chip:has(input:checked) { background: var(--amber); border-color: var(--amber); }
.chip[aria-pressed="true"] .chip-n, .chip:has(input:checked) .chip-n { color: var(--ink); }
.chip.is-zero:not([aria-pressed="true"]) { color: var(--ink-2); }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip:has(input:focus-visible) { outline: 3px solid var(--amber); outline-offset: 3px; }
.chip .nos-dot { margin-left: -2px; }
.fg-more { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.sort { position: relative; display: inline-flex; align-items: center; gap: 0; }
.sort-l { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font: 500 15px/1 var(--f-ui); color: var(--ink-2); pointer-events: none; }
.sort select { appearance: none; -webkit-appearance: none; min-height: 48px; padding: 0 46px 0 64px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%2316140f' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 18px center/14px; color: var(--ink); font: 500 16px/1 var(--f-ui); cursor: pointer; }
.sort select:hover { border-color: var(--ink-2); }
.js .ctr-apply { display: none; }
@media (min-width: 1100px) {
  .ctr-in { grid-template-columns: auto auto; justify-content: space-between; align-items: center; }
  .fg-brand { grid-column: 1; grid-row: 1; }
  .fg-price { grid-column: 1; grid-row: 2; }
  .fg-more { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; align-self: stretch; align-content: space-between; flex-direction: column; align-items: flex-end; }
}
@media (max-width: 759px) {
  .ctr-in { padding-left: 0; padding-right: 0; gap: 10px; }
  .fg { display: block; }
  .fg-l { float: none; display: block; width: auto; padding: 0 var(--g) 8px; font-size: 14px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; padding: 2px var(--g) 6px; scroll-padding: 0 var(--g); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips::-webkit-scrollbar { display: none; }
  .fg-more { display: flex; padding: 4px var(--g) 0; }
  .fg-more .chips { padding: 0; overflow: visible; }
  .sort { flex: 1 1 auto; }
  .sort select { width: 100%; }
}

/* ---------- pre-owned: its own list; this is its empty state ---------- */
.po { padding: clamp(28px, 4vw, 56px) 0 clamp(64px, 9vw, 120px); }
.po-in { max-width: var(--wrap, 1440px); margin: 0 auto; padding: 0 var(--g); display: grid; gap: 30px; align-items: center; justify-items: start; }
@media (min-width: 900px) { .po-in { grid-template-columns: minmax(260px, 400px) minmax(0, 580px); gap: 60px; } }
.po-art { position: relative; width: min(100%, 400px); aspect-ratio: 4 / 3; border-radius: var(--r); background: linear-gradient(180deg, var(--card), var(--paper-2)); overflow: hidden; }
.po-peg { position: absolute; left: 50%; top: 16%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink-2); box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.po-tag { position: absolute; left: 50%; top: 22%; transform: translateX(-50%) rotate(-5deg); transform-origin: 50% -14px; display: grid; gap: 6px; padding: 14px 16px 12px; background: var(--card); border-radius: 4px; box-shadow: 0 10px 18px -12px rgba(52, 36, 14, .6), inset 0 0 0 1px var(--line); font: 500 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--ink); white-space: nowrap; }
.po-tag::before { content: ""; position: absolute; left: 50%; top: -15px; width: 1.5px; height: 16px; background: var(--ink-2); }
.po-tag span + span { color: var(--ink-2); font-size: 11px; }
.po-beam { position: absolute; left: 0; right: 0; bottom: 18%; height: 8%; background: var(--amber); box-shadow: 0 6px 12px -6px rgba(52, 36, 14, .5); }
.po-h { margin: 0 0 12px; font: 400 clamp(30px, 3.4vw, 46px)/1.08 var(--f-display); letter-spacing: -.015em; text-wrap: balance; }
@media (max-width: 759px) { .po-art { aspect-ratio: 16 / 9; } .po { padding-top: 22px; } }
.po-t p { margin: 0 0 22px; color: var(--ink-2); max-width: 44ch; }
.po-act { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- results bar ---------- */
.res { padding-top: clamp(18px, 2.4vw, 30px); }
.res-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-bottom: clamp(18px, 2vw, 26px); }
.res-h { margin: 0; font: 500 clamp(24px, 2.2vw, 30px)/1.15 var(--f-display); letter-spacing: -.01em; }
.res-sum { margin: 0; font: 400 17px/1.4 var(--f-ui); color: var(--ink-2); }
.res-sum:empty { display: none; }
.res-clear { display: inline-flex; align-items: center; min-height: 48px; padding: 0 2px; border: 0; background: none; font: 500 16px/1 var(--f-ui); color: var(--amber-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer; margin-left: auto; }
.res-clear[hidden] { display: none; }

/* ---------- grid ---------- */
.vg { padding-bottom: clamp(56px, 8vw, 110px); }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 20px; } }
@media (min-width: 1180px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 52px 24px; } }
.g-item { min-width: 0; }
.vg { transition: opacity .2s; }
.vg.is-busy { opacity: .55; }
.card { display: block; color: var(--ink); text-decoration: none; border-radius: var(--r); outline-offset: 6px; }
.c-media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; isolation: isolate; background: var(--paper-2); transform: translateZ(0); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.c-layer { position: absolute; inset: 0; display: block; isolation: isolate; transition: opacity .5s var(--ease); }
.c-layer img { display: block; transition: transform .7s var(--ease); }
/* black studio photos: a dark frame; lighten lets the photo's pure black become the frame colour */
.c-layer.is-black { background: var(--vault); }
.c-layer.is-black img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: lighten; }
/* cutouts: a soft paper sweep with a contact shadow */
.c-layer.is-cut { background:
  radial-gradient(58% 9% at 50% 91%, rgba(74, 58, 34, .22), rgba(74, 58, 34, 0) 100%),
  linear-gradient(180deg, var(--card) 0%, var(--card) 38%, var(--paper) 70%, var(--paper-2) 100%); }
.c-layer.is-cut img { position: absolute; left: 10%; top: 5%; width: 80%; height: 86%; object-fit: contain;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%); }
/* white studio photos: the white becomes the paper (multiply), the watch keeps its own colours */
.c-layer.is-white { background: linear-gradient(180deg, var(--card) 0%, var(--card) 40%, var(--paper) 78%, var(--paper-2) 100%); }
.c-layer.is-white img { position: absolute; inset: 4% 4% 6%; width: 92%; height: 90%; object-fit: contain; mix-blend-mode: multiply; }
/* a square cutout or white shot carries its own margin: shown larger, still inside the frame */
.c-layer.is-sq img { scale: 1.18; }
/* a scene (lifestyle or hand shot): the photo fills the frame */
.c-layer.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.c-b { clip-path: inset(100% 0 0 0); transition: clip-path .65s var(--ease); }
@media (hover: hover) {
  .card:hover .c-media { transform: translateY(-5px); box-shadow: 0 22px 34px -22px rgba(52, 36, 14, .5); }
  .card:hover .has-b .c-b { clip-path: inset(0 0 0 0); }
  .card:hover .c-media:not(.has-b) .c-a img { transform: scale(1.04); }
}
.card:focus-visible .c-media { transform: translateY(-5px); box-shadow: 0 22px 34px -22px rgba(52, 36, 14, .5); }
.card:focus-visible .has-b .c-b { clip-path: inset(0 0 0 0); }

/* boxed: no photo on file, so the box itself with its stock label (no stand-in photography) */
.c-layer.is-box { background: linear-gradient(180deg, var(--card) 0%, var(--paper) 64%, var(--paper-2) 100%); }
.pbox { position: absolute; left: 15%; right: 15%; top: 33%; height: 37%; }
.pbox::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -13%; height: 16%; background: radial-gradient(50% 50% at 50% 50%, rgba(74, 58, 34, .28), rgba(74, 58, 34, 0)); z-index: -1; }
.pbox-lid { position: absolute; left: -1.5%; right: -1.5%; top: 0; height: 40%; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--vault-2), var(--vault)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 2px 0 rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; }
.pbox-foil { font: 500 clamp(9px, .8vw, 12px)/1 var(--f-mono); letter-spacing: .32em; color: var(--amber-hi); opacity: .9; padding-left: .32em; border: 1px solid color-mix(in srgb, var(--amber-hi) 55%, transparent); padding: 6px 8px 6px 11px; }
.pbox-base { position: absolute; left: 0; right: 0; top: 38%; bottom: 0; border-radius: 2px 2px 6px 6px; background: linear-gradient(180deg, var(--vault), var(--vault-2)); display: flex; align-items: center; justify-content: flex-end; padding-right: 7%; }
.pbox-label { background: var(--card); color: var(--ink); font: 500 clamp(9px, .85vw, 12px)/1.35 var(--f-mono); letter-spacing: .04em; padding: 5px 8px; box-shadow: inset 0 0 0 1px var(--line); }

/* card text */
.c-body { display: block; padding: 15px 2px 0; }
.c-label { display: flex; justify-content: space-between; gap: 10px; font: 500 12px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.c-name { margin: 9px 0 5px; font: 500 21px/1.2 var(--f-display); letter-spacing: -.005em; text-wrap: balance; }
.c-ref { display: block; font: 500 13px/1.3 var(--f-mono); letter-spacing: .02em; color: var(--ink-2); }
.c-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 11px; font: 500 20px/1.1 var(--f-ui); font-variant-numeric: tabular-nums; }
.c-was { font: 400 16px/1.1 var(--f-ui); color: var(--ink-2); text-decoration-thickness: 1.5px; }
.c-live { display: none; }
.is-live .c-shop { display: none; }
.is-live .c-live { display: grid; gap: 4px; }
.c-live-p { font: 500 20px/1.1 var(--f-ui); font-variant-numeric: tabular-nums; }
.c-live-k { font: 400 15px/1.35 var(--f-ui); color: var(--ink-2); }
.is-ended .c-badge { letter-spacing: .08em; padding-left: 12px; }
/* 1.1.5: the card's pill ("Sale −50%" or "Below RRP") sits where the drop badge sits (one per card) */
.c-pill { position: absolute; z-index: 3; left: 12px; top: 12px; padding: 8px 12px; font-size: 14px; box-shadow: 0 6px 16px -8px rgba(40, 28, 12, .45), inset 0 0 0 1px var(--pill-line); }
.is-live .c-pill { display: none; }
.c-badge { position: absolute; z-index: 3; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border-radius: 999px; background: var(--card); color: var(--ink); font: 500 14px/1 var(--f-ui); box-shadow: 0 6px 16px -8px rgba(40, 28, 12, .5), inset 0 0 0 1px var(--line); }
@media (max-width: 759px) {
  .c-body { padding-top: 12px; }
  .c-label { font-size: 11px; letter-spacing: .06em; flex-direction: column; gap: 3px; }
  .c-name { font-size: 18px; margin-top: 7px; }
  .c-ref { font-size: 12px; overflow-wrap: anywhere; }
  .c-price, .c-live-p { font-size: 18px; }
  .c-live-k { font-size: 14px; }
  .c-badge { left: 8px; top: 8px; font-size: 13px; padding: 7px 10px 7px 9px; }
  .c-pill { left: 8px; top: 8px; font-size: 13px; padding: 7px 10px; }
}

/* ---------- pages of the list (WooCommerce's pagination) ---------- */
.woocommerce-pagination { margin-top: clamp(40px, 5vw, 64px); }
.woocommerce-pagination ul.page-numbers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
.woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; }
.woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span.page-numbers { display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: 500 16px/1 var(--f-ui); font-variant-numeric: tabular-nums; text-decoration: none; }
.woocommerce-pagination .page-numbers a:hover { border-color: var(--ink-2); }
.woocommerce-pagination .page-numbers span.current { background: var(--amber); border-color: var(--amber); }
.woocommerce-pagination .page-numbers .dots { border-color: transparent; background: none; }

/* ---------- empty state ---------- */
.empty { display: grid; gap: 28px; align-items: center; justify-items: start; padding: clamp(10px, 3vw, 40px) 0 clamp(20px, 4vw, 60px); }
.empty[hidden] { display: none; }
@media (min-width: 900px) { .empty { grid-template-columns: minmax(260px, 420px) minmax(0, 560px); gap: 56px; } }
.empty-shelf { position: relative; width: min(100%, 420px); aspect-ratio: 16 / 9; border-radius: var(--r); background: linear-gradient(180deg, var(--card), var(--paper-2)); overflow: hidden; }
.es-ghost { position: absolute; left: 28%; right: 28%; bottom: 25%; height: 26%; border: 1.5px dashed color-mix(in srgb, var(--ink-2) 55%, transparent); border-radius: 5px 5px 2px 2px; }
.es-ghost::after { content: "STOCK ?"; position: absolute; right: 8%; top: 50%; transform: translateY(-50%); font: 500 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--ink-2); }
.es-beam { position: absolute; left: 0; right: 0; bottom: 17%; height: 8%; background: var(--amber); box-shadow: 0 6px 12px -6px rgba(52, 36, 14, .5); }
.empty-t h3 { margin: 0 0 12px; font: 400 clamp(30px, 3.4vw, 46px)/1.08 var(--f-display); letter-spacing: -.015em; text-wrap: balance; }
.empty-t p { margin: 0 0 22px; color: var(--ink-2); max-width: 44ch; }
.empty-act { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- aisle view ---------- */
.va { display: block; }
.va[hidden] { display: none; }
html.view-aisle .vg { display: none; }
html.view-aisle .va[hidden] { display: block; }
.walk { position: relative; height: var(--walk-h, 600vh); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: linear-gradient(180deg, var(--paper-2) 0%, color-mix(in srgb, var(--amber) 38%, var(--paper-2)) 100%); color: var(--ink); }
.stage-c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s var(--ease); }
.is-gl .stage-c { opacity: 1; }
.stage-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 500 13px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); transition: opacity .5s; }
.stage-wait span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 12px; border-radius: 50%; background: var(--amber); vertical-align: 1px; animation: waitPulse 1.2s ease-in-out infinite alternate; }
@keyframes waitPulse { from { opacity: .3; } to { opacity: 1; } }
.is-gl .stage-wait { opacity: 0; pointer-events: none; }

/* HUD: aisles rail (also the brand filter) and the way back */
.hud { position: absolute; z-index: 5; left: var(--g); right: var(--g); top: calc(var(--nos-hdr) + 14px); display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; transition: top .45s var(--ease); pointer-events: none; }
html.hdr-up .hud { top: 16px; }
.hud > * { pointer-events: auto; }
.hud-rail { position: relative; display: inline-block; max-width: 100%; padding: 5px; border-radius: 30px; background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: 0 10px 30px -16px rgba(52, 36, 14, .55), inset 0 0 0 1px var(--line); }
.hud-chips { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.hud-chips::-webkit-scrollbar { display: none; }
.hc { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 500 15px/1 var(--f-ui); white-space: nowrap; cursor: pointer; transition: background-color .25s; }
.hc:hover { background: var(--paper-2); }
.hc-k { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--paper-2); font: 500 13px/1 var(--f-mono); }
.hc-n { font: 500 12px/1 var(--f-mono); color: var(--ink-2); }
.hc[aria-pressed="true"] { background: var(--amber); }
.hc[aria-pressed="true"] .hc-k { background: var(--card); }
.hc[aria-pressed="true"] .hc-n { color: var(--ink); }
.hc.is-here:not([aria-pressed="true"]) .hc-k { background: var(--ink); color: var(--card); }
.hc.is-empty { color: var(--ink-2); }
.hc-all { padding: 0 16px; }
.hc-bar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; overflow: hidden; background: transparent; }
.hc.has-stops .hc-bar { background: color-mix(in srgb, var(--ink-2) 22%, transparent); }
.hc-bar-f { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.hc[aria-pressed="true"] .hc-bar { background: color-mix(in srgb, var(--ink) 18%, transparent); }
.hud-back { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--card); color: var(--ink); font: 500 16px/1 var(--f-ui); cursor: pointer; box-shadow: 0 10px 30px -16px rgba(52, 36, 14, .55), inset 0 0 0 1.5px var(--ink); }
.hud-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.hud-back:hover { background: var(--paper-2); }

/* intro and end panels */
.w-intro, .w-end { position: absolute; z-index: 4; background: var(--card); color: var(--ink); border-radius: var(--r); box-shadow: 0 30px 60px -30px rgba(52, 36, 14, .6), inset 0 0 0 1px var(--line); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.w-intro { left: var(--g); top: 50%; transform: translateY(-38%); width: min(440px, calc(100% - 2 * var(--g))); padding: 28px 30px 24px; }
.w-h { margin: 0 0 12px; font: 400 clamp(40px, 4.2vw, 60px)/1 var(--f-display); letter-spacing: -.02em; }
.w-intro p { margin: 0; color: var(--ink-2); }
.w-hint { display: flex; align-items: center; gap: 12px; margin-top: 18px !important; font: 500 13px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink) !important; }
.w-hint-l { position: relative; width: 1.5px; height: 30px; background: var(--line); overflow: hidden; }
.w-hint-l::after { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: var(--amber-ink); animation: hint 1.8s var(--ease) infinite; }
@keyframes hint { to { top: 100%; } }
.w-intro.is-off, .w-end.is-off { opacity: 0; pointer-events: none; }
.w-intro.is-off { transform: translateY(-34%); }
.w-end { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 2 * var(--g))); padding: 30px 32px 28px; text-align: left; }
.w-end.is-off { transform: translate(-50%, -44%); }
.w-end-k { margin: 0 0 8px; font: 500 13px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-ink); }
.w-end-h { margin: 0 0 22px; font: 400 clamp(30px, 3vw, 42px)/1.08 var(--f-display); letter-spacing: -.015em; }
.w-end-act { display: flex; flex-wrap: wrap; gap: 12px; }

/* stop cards: a stock label that flips to the watch */
.stops { list-style: none; margin: 0; padding: 0; }
.sc { position: absolute; z-index: 4; top: 50%; width: min(400px, 33vw); perspective: 1100px; opacity: 0; transform: translateY(calc(-50% + 22px)); transition: opacity .4s var(--ease), transform .6s var(--ease); pointer-events: none; }
.sc.on-r { right: calc(var(--g) + 1vw); }
.sc.on-l { left: calc(var(--g) + 1vw); }
.sc.is-on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.sc-in { position: relative; display: grid; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.sc.is-flip .sc-in { transform: rotateX(-180deg); }
.sc-face { grid-area: 1 / 1; background: var(--card); color: var(--ink); border-radius: var(--r); padding: 20px 22px 20px; box-shadow: 0 30px 60px -26px rgba(52, 36, 14, .65), inset 0 0 0 1px var(--line); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sc-front { display: flex; flex-direction: column; justify-content: center; gap: 8px; box-shadow: 0 30px 60px -26px rgba(52, 36, 14, .65), inset 0 0 0 1px var(--line), inset 0 0 0 9px var(--card), inset 0 0 0 10.5px color-mix(in srgb, var(--ink) 55%, transparent); padding-left: 30px; }
.sc-front .k { font: 500 13px/1 var(--f-mono); letter-spacing: .12em; color: var(--ink-2); }
.sc-front .big { font: 500 clamp(30px, 2.8vw, 40px)/1 var(--f-mono); letter-spacing: .01em; }
.sc-front .ref { font: 500 18px/1.2 var(--f-mono); }
.sc-back { transform: rotateX(180deg); }
.sc-row { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 11px; margin-bottom: 13px; border-bottom: 1px solid var(--line); font: 500 12px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.sc-name { margin: 0 0 6px; font: 500 clamp(22px, 1.9vw, 27px)/1.15 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.sc-ref { margin: 0 0 16px; font: 500 14px/1.3 var(--f-mono); color: var(--ink-2); }
.sc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sc-price { font: 500 30px/1 var(--f-ui); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sc-pp { display: grid; gap: 10px; justify-items: start; }
.sc-was, .sbox-was { font-size: .6em; font-weight: 400; color: var(--ink-2); text-decoration-thickness: 1.5px; margin-left: .35em; }
.sbox-was { font-size: 15px; }
.sc-live { display: grid; gap: 6px; }
.sc-live .sc-price { font-size: 28px; }
.sc-live-k { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.2 var(--f-ui); color: var(--ink); }
.sc-live-o { font: 400 14px/1.3 var(--f-ui); color: var(--ink-2); }
.sc-foot .btn { min-height: 48px; padding: 0 22px; }
.sc-foot .btn svg { width: 22px; height: 12px; }
@media (max-width: 759px), (max-aspect-ratio: 1/1) {
  .sc, .sc.on-l, .sc.on-r { left: 12px; right: 12px; width: auto; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateY(22px); }
  html.bar-on .sc { bottom: calc(var(--nos-bar-h) + 16px + env(safe-area-inset-bottom)); }
  .sc.is-on { transform: none; }
  .sc-face { padding: 16px 18px; }
  .sc-front { padding-left: 26px; min-height: 100%; }
  .sc-name { font-size: 21px; }
  .sc-ref { margin-bottom: 12px; }
  .sc-price { font-size: 26px; }
  .w-intro { top: auto; bottom: calc(20px + env(safe-area-inset-bottom)); transform: none; left: 12px; right: 12px; width: auto; padding: 22px 22px 20px; }
  html.bar-on .w-intro { bottom: calc(var(--nos-bar-h) + 16px + env(safe-area-inset-bottom)); }
  .hc { padding: 0 12px 0 8px; gap: 6px; }
  .hc-all { padding: 0 14px; }
  .hc .hc-t { display: none; }
  .hc[aria-pressed="true"] .hc-t { display: inline; }
  .w-intro.is-off { transform: translateY(16px); }
  .w-h { font-size: 40px; }
  .hud { left: 12px; right: 12px; }
}

/* static aisle (no WebGL, reduced motion, or a slow device): the same list on lit shelves */
.sa { padding: clamp(10px, 2vw, 24px) 0 clamp(56px, 8vw, 100px); background: linear-gradient(180deg, var(--paper) 0, var(--paper-2) 220px, var(--paper-2) 100%); }
.sa[hidden] { display: none; }
html.view-aisle.sa-on .walk { display: none; }
.sa-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; padding: 18px 0 8px; }
.sa-head h2 { margin: 0; font: 400 clamp(34px, 3.6vw, 52px)/1 var(--f-display); letter-spacing: -.02em; }
.sa-head p { margin: 6px 0 0; color: var(--ink-2); max-width: 52ch; }
.sa-aisle { margin-top: clamp(30px, 4vw, 52px); }
.sa-sign { display: inline-grid; grid-template-columns: auto auto; column-gap: 16px; align-items: center; padding: 12px 22px 12px 16px; margin-bottom: 22px; background: var(--card); border-radius: 6px; box-shadow: 0 1px 0 var(--line), inset 0 3px 0 var(--amber), 0 14px 26px -18px rgba(52, 36, 14, .5); position: relative; }
.sa-sign::before, .sa-sign::after { content: ""; position: absolute; top: -26px; width: 1.5px; height: 26px; background: color-mix(in srgb, var(--ink-2) 60%, transparent); }
.sa-sign::before { left: 22%; } .sa-sign::after { right: 22%; }
.sa-letter { grid-row: 1 / span 2; font: 400 58px/.9 var(--f-display); }
.sa-k { font: 500 12px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.sa-b { font: 500 21px/1.2 var(--f-ui); }
.sa-shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
@media (min-width: 760px) { .sa-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .sa-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sa-shelf > li { position: relative; padding: 0 clamp(6px, 1vw, 14px); min-width: 0; }
.sbox { display: block; color: var(--ink); text-decoration: none; border-radius: 8px; outline-offset: 4px; }
.sbox-set { position: relative; display: block; aspect-ratio: 1 / 1.02; }
.sbox-set::after { content: ""; position: absolute; left: calc(-1 * clamp(6px, 1vw, 14px)); right: calc(-1 * clamp(6px, 1vw, 14px)); bottom: 0; height: 12px; background: var(--amber); box-shadow: 0 10px 14px -8px rgba(52, 36, 14, .55), inset 0 -3px 0 color-mix(in srgb, var(--amber-ink) 45%, transparent); }
.sbox-lid { position: absolute; left: 10%; right: 10%; top: 4%; height: 58%; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, var(--vault-2), var(--vault)); padding: 4%; }
.sbox-lid::before { content: ""; position: absolute; inset: 5%; border-radius: 4px 4px 1px 1px; background: radial-gradient(90% 70% at 50% 30%, var(--card), var(--paper-2) 80%); box-shadow: inset 0 -10px 18px -10px rgba(52, 36, 14, .35); }
.sbox-w { position: absolute; z-index: 2; left: 18%; right: 18%; bottom: 16%; height: 80%; object-fit: contain; object-position: 50% 100%; -webkit-mask: linear-gradient(180deg, transparent 0, #000 16%, #000 100%); mask: linear-gradient(180deg, transparent 0, #000 16%, #000 100%); filter: drop-shadow(0 10px 10px rgba(30, 20, 8, .35)); }
.sbox-card { position: absolute; z-index: 2; left: 30%; right: 30%; bottom: 20%; height: 44%; background: var(--card); border-radius: 4px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 8%; font: 500 clamp(9px, .9vw, 12px)/1.25 var(--f-mono); letter-spacing: .04em; box-shadow: 0 8px 14px -8px rgba(30, 20, 8, .5); }
.sbox-base { position: absolute; z-index: 3; left: 6%; right: 6%; bottom: 12px; height: 22%; border-radius: 3px 3px 5px 5px; background: linear-gradient(180deg, var(--vault-2), var(--vault)); display: flex; align-items: center; justify-content: flex-end; padding-right: 6%; box-shadow: 0 -1px 0 rgba(255, 255, 255, .06) inset; }
.sbox-label { background: var(--card); color: var(--ink); font: 500 clamp(9px, .85vw, 12px)/1.3 var(--f-mono); letter-spacing: .04em; padding: 4px 8px; white-space: nowrap; }
.sbox-lamp { position: absolute; z-index: 4; left: 50%; top: -6px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 8px; border-radius: 999px; background: var(--card); font: 500 13px/1 var(--f-ui); box-shadow: 0 6px 14px -8px rgba(40, 28, 12, .5), inset 0 0 0 1px var(--line); white-space: nowrap; }
.sbox-t { display: block; padding: 14px 2px 0; }
.sbox-name { display: block; font: 500 19px/1.2 var(--f-display); text-wrap: balance; }
.sbox-price { display: block; margin-top: 6px; font: 500 18px/1.1 var(--f-ui); font-variant-numeric: tabular-nums; }
.sbox-price .k { display: block; margin-top: 3px; font: 400 14px/1.3 var(--f-ui); color: var(--ink-2); }
.sbox-pill { margin-top: 8px; }
@media (hover: hover) { .sbox:hover .sbox-w { transform: translateY(-6px); } }
.sbox-w { transition: transform .5s var(--ease); }
.sbox-w.is-white { mix-blend-mode: multiply; filter: none; }
.sa-empty { margin: 0; font-size: 18px; }
.sa-empty a { color: var(--amber-ink); }
@media (max-width: 759px) { .sbox-name { font-size: 17px; } .sbox-price { font-size: 17px; } }

/* ---------- promises ---------- */
.pr { background: var(--paper-2); padding: clamp(48px, 6vw, 84px) 0; }
.pr-h { margin: 0 0 clamp(22px, 3vw, 36px); font: 400 clamp(28px, 3vw, 42px)/1.1 var(--f-display); letter-spacing: -.015em; }
.pr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pr-list li { display: grid; gap: 6px; padding-top: 16px; border-top: 1.5px solid var(--ink); }
.pr-list strong { font: 500 19px/1.3 var(--f-ui); }
.pr-list span { color: var(--ink-2); font-size: 17px; line-height: 1.5; }
.pr-rec { margin: clamp(26px, 3vw, 40px) 0 0; font: 500 13px/1.6 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); max-width: 80ch; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .c-media, .c-layer, .c-layer img, .sc, .sc-in, .w-intro, .w-end, .hud, .sbox-w, .stage-c { transition: none !important; }
  .card:hover .c-media, .card:focus-visible .c-media { transform: none; }
  .card:hover .c-a img { transform: none !important; }
  .w-hint-l::after, .stage-wait span::before { animation: none; }
}
html.rm .c-media, html.rm .c-layer, html.rm .c-layer img, html.rm .sc, html.rm .sc-in { transition: none !important; }
html.rm .card:hover .c-media { transform: none; }