/* ==========================================================================
   COFFEEZILLA — scroll-scrubbed hero prototype
   Mobile-first. Tokens, type and geometry come from the Figma storyboard
   (1440x1024 desktop artboards, 375x812 mobile artboards): Cybero display,
   Arian LT Demi body
   throughout, white at 90/80/16% over black, 24 px gutters, 80 px panel
   offsets, 400 px panel height on desktop.
   ========================================================================== */

/* Brand type. Body: Arian LT Demi (Ed, Sep 18). Display: Cybero, as on coffeezilla.store. */
@font-face {
  font-family: 'Arian LT Demi';
  src: url('/fonts/ArianLT-Demi.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cybero';
  src: url('/fonts/cybero_font.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: rgba(255, 255, 255, 0.9);        /* color/white-90%: text, buttons, borders */
  --ink-80: rgba(255, 255, 255, 0.8);     /* color/wh-80%: description, wordmark, lit dots */
  --line: rgba(255, 255, 255, 0.16);      /* color/wh-16%: swatch and chip borders, unlit dots */
  --line-strong: rgba(255, 255, 255, 0.8);
  --bar: rgba(0, 0, 0, 0.8);              /* top and bottom bars over the film */
  --panel: #000;
  --fill: rgba(255, 255, 255, 0.9);       /* filled button */

  --header-h: 48px;
  --bottom-h: 40px;
  --gutter: 16px;

  /* Cover-fit anchor, mirrored from CONFIG.focus by scroll-hero.js so the
     LQIP backdrop and the reduced-motion still crop like the canvas. */
  --focus-x: 50%;
  --focus-y: 50%;

  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --font-body: 'Arian LT Demi', 'Noir Pro', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Cybero', 'Arian LT Demi', ui-sans-serif, system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --panel-ease: 0.38s var(--ease);
}

@media (min-width: 768px) {
  :root { --header-h: 36px; --bottom-h: 32px; --gutter: 24px; }
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: #000;
}

/* One gesture = one stop. The snap points are the .hero__snap spans that
   scroll-hero.js positions; the class arrives only after they exist, so the
   first layout cannot snap a fresh load anywhere odd. */
html.is-snapping { scroll-snap-type: y mandatory; }

body {
  margin: 0;
  background: #000;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: #fff;
  color: #000;
  font: 700 12px/1 var(--font-mono);
  text-transform: uppercase;
  transform: translateY(-120%);
}

.skip-link:focus { transform: translateY(0); }

/* Icons are the Figma exports (16 px boxes, 24 px for the menu). Filled
   glyphs use fill, the chevron is a stroke; both take the current colour. */
.icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
}

.icon--stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.333;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--menu { width: 24px; height: 24px; }

/* The chevron export points left; rotate per use. */
.icon--down { transform: rotate(-90deg); }
.icon--right { transform: rotate(180deg); }

/* ── Top bar ─────────────────────────────────────────────────────────── */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  height: var(--header-h);
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--bar);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-transform: uppercase;
}

.topbar__lead {
  display: flex;
  align-items: center;
  gap: 40px;
  min-width: 0;
}

.topbar__brand {
  display: block;
  flex: none;
  color: var(--ink-80);
}

.topbar__brand svg {
  width: 148.335px;
  height: 13px;
}

.topbar__nav {
  display: none;
  gap: 24px;
  padding-top: 2px;
}

@media (min-width: 768px) {
  .topbar__nav { display: flex; }
}

.topbar__link {
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}

.topbar__link:hover { border-bottom-color: var(--line); }
.topbar__link.is-active { border-bottom-color: var(--line-strong); }

.topbar__tools {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}

@media (min-width: 768px) {
  .topbar__tools { gap: 24px; }
}

.topbar__tool {
  position: relative;
  display: flex;
  align-items: center;
  transition: opacity 0.2s var(--ease);
}

.topbar__tool:hover { opacity: 0.75; }

.topbar__currency { padding-top: 2px; }

.topbar__count {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: #fff;
  color: #000;
  font: 700 9px/14px var(--font-mono);
  letter-spacing: 0;
  text-align: center;
}

.topbar__menu { display: flex; }

@media (min-width: 768px) {
  .topbar__menu { display: none; }
}

/* Phone product menu (not in the Figma; same links as the desktop nav). */
.menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  padding: 4px var(--gutter) 12px;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.menu[hidden] { display: none; }

.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  text-transform: uppercase;
}

.menu__link:last-child { border-bottom: 0; }
.menu__link.is-active::after { content: '●'; font-size: 8px; }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  /* height is set inline by scroll-hero.js from CONFIG.heroHeightVh */
  height: 800vh;
}

/* Invisible snap points: the start, one per chapter (its midpoint), and the
   end. scroll-hero.js lays them out; scroll-snap-stop: always makes one
   gesture travel exactly one stop. */
.hero__snap {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  pointer-events: none;
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: #000;
  /* The blurred LQIP from the manifest, set by scroll-hero.js. Same crop as
     the canvas, so the first paint already shows the right composition. */
  background-size: cover;
  background-position: var(--focus-x) var(--focus-y);
  background-repeat: no-repeat;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--focus-x) var(--focus-y);
}

.hero__still[hidden] { display: none; }

.hero__loader {
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 6;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  transition: opacity 0.45s var(--ease);
}

.hero__loader.is-done { opacity: 0; }

.hero__loader-bar {
  display: block;
  height: 100%;
  background: var(--ink-80);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.hero__badge {
  position: absolute;
  top: calc(var(--header-h) + 12px);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 6;
  max-width: 30rem;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.6);
  color: var(--ink-80);
  font-size: 10px;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .hero__badge { right: auto; }
}

/* Centre cues: "[ Scroll down ]" at the start (not in the Figma — the hero
   has no other sign that it scrolls) and "Reload page" at the end (storyboard
   row 15). One voice for both: 16/24 semibold, white 90%, dead centre. */
.hint,
.restart {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  margin: 0;
  transform: translate(-50%, -50%);
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  white-space: nowrap;
  transition: opacity 0.38s var(--ease), visibility 0s linear 0.38s;
}

.hint {
  font-family: var(--font-display);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.38s var(--ease), visibility 0s;
}

.hint.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.38s var(--ease), visibility 0s linear 0.38s;
}

.restart {
  text-decoration: underline;
  text-decoration-thickness: 1.3px;
  text-underline-offset: 3px;
  opacity: 0;
  visibility: hidden;
}

.restart.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.38s var(--ease), visibility 0s;
}

.restart:hover { color: #fff; }


/* ── Product panels ──────────────────────────────────────────────────── */

.hero__panels {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* A solid black card. "Fade in down": it arrives from 16 px above and, when
   its chapter is over, keeps moving down as it fades — the same direction as
   the scroll. Time-based, not scroll-linked: the film paces itself through a
   chapter fast enough that a scroll-linked fade would be a flash. On phones
   it is a sheet under the top bar; on desktop it is vertically centred, 80 px
   from the left (tees) or the right (posters). */
.panel {
  --shift: 0px;
  position: absolute;
  top: calc(var(--header-h) + 12px);
  left: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--panel);
  color: var(--ink);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, calc(var(--shift) - 16px), 0);
  transition: opacity var(--panel-ease), transform var(--panel-ease), visibility 0s linear 0.38s;
  will-change: opacity, transform;
}

.panel.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, var(--shift), 0);
  transition: opacity var(--panel-ease), transform var(--panel-ease), visibility 0s;
}

.panel.is-after { transform: translate3d(0, calc(var(--shift) + 16px), 0); }

@media (min-width: 768px) {
  .panel {
    --shift: -50%;
    top: calc(50% + 2px);
    left: clamp(40px, 5.5vw, 80px);
    right: auto;
    width: min(468px, 46vw);
    min-height: min(400px, 60vh);
    padding: 40px;
  }

  .panel--right {
    left: auto;
    right: clamp(40px, 5.5vw, 80px);
  }
}

.panel__price {
  margin: 0;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.15px;
}

.panel__title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.2px;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .panel__price { font-weight: 600; font-size: 14px; letter-spacing: 0.1px; }
  .panel__title { margin-top: 8px; font-family: var(--font-display); font-size: 28px; line-height: 1.1; letter-spacing: -0.25px; }
}

.panel__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.panel__body[hidden] { display: none; }

.panel__text {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.2;
  color: var(--ink-80);
  opacity: 0.8;
}

/* The storyboard writes a one-line description for the phone sheet. */
.panel__text--long { display: none; }
.panel__text--short { display: block; }
.panel__text--only { display: block; }

@media (min-width: 768px) {
  .panel__text { margin-top: 20px; font-size: 14px; letter-spacing: 0; }
  .panel__text--long { display: block; }
  .panel__text--short { display: none; }
}

.panel__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding-top: 32px;
}

.panel__body--options .panel__actions { padding-top: 24px; }

@media (min-width: 768px) {
  .panel__actions { padding-top: 24px; }
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 24px;
  border: 1px solid var(--fill);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

@media (min-width: 768px) {
  .btn { height: 40px; }
}

.btn--fill {
  background: var(--fill);
  color: #000;
}

.btn--fill:hover { background: #fff; border-color: #fff; }

.btn--line {
  background: transparent;
  color: var(--ink);
}

.btn--line:hover { background: rgba(255, 255, 255, 0.1); }

.btn.is-done { background: #fff; border-color: #fff; color: #000; }
.btn.is-soon,
.btn.is-soon:hover { background: transparent; border-color: currentColor; color: inherit; opacity: 0.5; cursor: not-allowed; }
.btn:disabled:not(.is-soon):not(.is-done) { cursor: progress; }

/* Details state: close cross in the corner, colour + size pickers. */
.panel__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--ink);
}

@media (min-width: 768px) {
  .panel__close { top: 16px; right: 16px; }
}

.panel__close[hidden] { display: none; }

.opt {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.panel__body--options {
  gap: 16px;
  padding-top: 24px;
}

@media (min-width: 768px) {
  .panel__body--options { gap: 24px; }
}

.opt__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0;
  color: var(--ink);
}

.opt__name {
  text-transform: uppercase;
  opacity: 0.6;
}

/* Sits inside .panel__actions so it stays next to the button on every screen,
   rather than drifting up the panel when the button is pushed to the bottom. */
.panel__preorder {
  margin: 0;
  text-transform: uppercase;
  opacity: 0.6;
  letter-spacing: 0.2px;
}

@media (max-width: 767px) {
  .panel__actions { gap: 8px; }
}

.opt__link {
  text-decoration: underline;
  text-underline-position: from-font;
  /* It's a button (it opens the size guide); keep it looking like the link. */
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

/* Size guide dialog */
html.is-guide-open,
html.is-guide-open body { overflow: hidden; }
.sizeguide {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-body);
}
.sizeguide::backdrop { background: rgba(0, 0, 0, 0.6); }
.sizeguide__card { padding: 20px; }
.sizeguide__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sizeguide__title { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 24px; text-transform: uppercase; }
.sizeguide__close { width: 32px; height: 32px; margin: -6px -8px -6px 0; background: none; border: 0; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.sizeguide__sub { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2px; opacity: 0.7; }
.sizeguide__units { display: flex; gap: 5px; margin-top: 16px; }
.sizeguide__units button { min-width: 44px; height: 28px; background: none; border: 1px solid var(--line); color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.sizeguide__units button[aria-pressed="true"] { border-color: var(--line-strong); }
.sizeguide__table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.sizeguide__table th,
.sizeguide__table td { padding: 8px 0; text-align: left; border-bottom: 1px solid var(--line); }
.sizeguide__table th { font-size: 12px; font-weight: inherit; text-transform: uppercase; opacity: 0.7; }
.sizeguide__table th:not(:first-child),
.sizeguide__table td:not(:first-child) { text-align: right; }
.sizeguide__note { margin: 12px 0 0; font-size: 12px; line-height: 1.45; opacity: 0.7; }

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5.333px;
  margin-top: 16px;
}

.swatch {
  position: relative;
  width: 32px;
  height: 32px;
}

.swatch input,
.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* 32 px ring, 5.333 px gap, the colour inside. Selected ring is solid white. */
.swatch__dot {
  display: block;
  width: 100%;
  height: 100%;
  padding: 5.333px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color 0.2s var(--ease);
}

.swatch__dot::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--c, #2d2d2d);
}

.swatch input:checked + .swatch__dot { border-color: #fff; }

.swatch input:focus-visible + .swatch__dot {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.chip { position: relative; }

.chip__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

/* The selected chip has a 2 px border in the Figma; a 1 px inset shadow on
   top of the 1 px border keeps the box 36 px. */
.chip input:checked + .chip__label {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.chip input:focus-visible + .chip__label {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ── Progress dots ───────────────────────────────────────────────────── */

/* Figma "progress": 6 px dots on a 30 px pitch, 16 px hairlines between
   them; every stop up to the current one is lit (white 80%), the rest 16%.
   Column centre 43 px from the right edge on desktop, 19 px on phones. */
.dots {
  position: absolute;
  z-index: 5;
  right: 9px;
  top: 74%;
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  .dots { right: 33px; top: 50%; }
}

.dots__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dots__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 30px;
}

.dots__item + .dots__item::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -8px;
  width: 1px;
  height: 16px;
  margin-left: -0.5px;
  background: var(--line);
  transition: background-color 0.3s var(--ease);
}

.dots__item.is-lit + .dots__item.is-lit::before { background: var(--ink-80); }

.dots__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.dots__dot::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: background-color 0.3s var(--ease);
}

.dots__dot:hover::after { background: rgba(255, 255, 255, 0.5); }

.dots__item.is-lit .dots__dot::after { background: var(--ink-80); }

/* ── Bottom bar ──────────────────────────────────────────────────────── */

/* Desktop: one 32 px bar with the legal links and the credits. Phone: a
   40 px bar with "Show menu" that unfolds the same links above it. */
.bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  color: var(--ink);
  text-transform: uppercase;
}

.bottombar__toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--bottom-h);
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  box-sizing: content-box;
  height: auto;
  background: var(--bar);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.bottombar__toggle .icon--right { transition: transform 0.25s var(--ease); }

.bottombar.is-open .bottombar__toggle .icon--right { transform: rotate(-90deg); }

.bottombar__body {
  display: none;
  width: 100%;
  padding: 16px 12px;
  background: var(--bar);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.bottombar.is-open .bottombar__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bottombar__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.bottombar__links a,
.bottombar__currency {
  display: flex;
  align-items: center;
  transition: opacity 0.2s var(--ease);
}

.bottombar__links a:hover,
.bottombar__currency:hover { opacity: 0.75; }

.bottombar__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 0;
}

/* Free shipping note (FREESHIPPING promotion, $85 and up). Phones: the right
   end of the "Show menu" row. Wide screens: centred in the bar. Between the
   two it would crowd the links, and the cart drawer carries it there. */
.bottombar__promo {
  position: absolute;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  text-transform: none; /* matches "Show menu" beside it */
  white-space: nowrap;
  pointer-events: none;
}

@media (min-width: 768px) and (max-width: 1099px) {
  .bottombar__promo { display: none; }
}

@media (min-width: 1100px) {
  .bottombar__promo {
    top: 0;
    right: auto;
    bottom: 0;
    left: 50%;
    display: flex;
    align-items: center;
    padding-top: 2px;
    text-transform: uppercase;
    transform: translateX(-50%);
  }
}

@media (min-width: 768px) {
  .bottombar {
    flex-direction: row;
    align-items: center;
    height: var(--bottom-h);
    padding: 0 var(--gutter);
    background: var(--bar);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .bottombar__toggle { display: none; }

  .bottombar__body,
  .bottombar.is-open .bottombar__body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .bottombar__legal { padding-top: 2px; }
}

/* ── Debug HUD ───────────────────────────────────────────────────────── */

.hud {
  position: absolute;
  z-index: 9;
  top: calc(var(--header-h) + 12px);
  right: var(--gutter);
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.78);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0;
  white-space: pre;
  font-variant-numeric: tabular-nums;
}

.hud[hidden] { display: none; }

/* ── Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}

/* hide scroll-hint + restart (not part of Coffee asset) */
#hero-restart { display: none !important; }


/* (E) The panel body is always open now, so the description sits inside it
   and the flex gap owns its spacing. */
.panel__body--options .panel__text { margin-top: 0; }


/* The scroll cue is a real button now, so it is keyboard-reachable: it is the
   only way into the film without a pointer. Styled to match the old <p>.
   Coffee asked for this on Sep 8, Will raised the accessibility case Sep 17. */
button.hint {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

button.hint:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
  border-radius: 2px;
}


/* ── Phone panel trim ────────────────────────────────────────────────
   Coffee, Sep 18: the panel box itself is too tall on a phone and is
   covering the designs and posters. He asked for the box shrunk rather
   than made transparent, with the price moved up beside the product name
   and the dead gap above Add to cart taken out.
   Scoped to max-width 767px so the desktop layout is untouched. */
.panel__head { display: contents; }

@media (max-width: 767px) {
  .panel__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }

  .panel { padding: 16px; }
  .panel__title { margin-top: 0; font-size: 22px; }
  .panel__price { font-size: 22px; line-height: 24px; }
  .panel__body { padding-top: 12px; }
  /* Coffee, Sep 21: the space above the pre-order line was double the space
     between the size label and the chips. One rhythm now, 8 px throughout. */
  .panel__body--options { gap: 8px; padding-top: 10px; }
  .panel__text { margin-top: 0; font-size: clamp(13px, 3.6vw, 14px); line-height: 1.45; }
  /* Arian is wider than the mono it replaced; without this the 7 size chips
     wrap to a second row and the panel goes back to 275 px. Measured: one row
     and a 231 px panel down to 360 px wide. */
  /* Eight chips now that 4XL is in. Measured: one row and a sub-231 px panel
     down to 360 px wide. The room came from the gap and a hair of tracking,
     not from the type size, which Coffee had just asked us to leave alone. */
  /* The row fills the panel rather than trailing off after 4XL: every chip
     grows into the spare width, so the narrow ones (S, M, L) gain the most.
     max-width caps a chip at a quarter of the row, so if it ever does wrap on
     a very narrow phone the stray one cannot stretch the whole width. */
  .chips { margin-top: 8px; gap: 5px; }
  .chip { flex: 1 1 auto; max-width: 25%; }
  .chip__label { min-width: 26px; padding: 0 4px; letter-spacing: -0.3px; width: 100%; }

  /* the gap Coffee drew on: auto margin pushed the button to the bottom */
  .panel__actions,
  .panel__body--options .panel__actions {
    margin-top: 0;
    padding-top: 0;
  }
}

/* ── Coffee, Sep 19 ──────────────────────────────────────────────────
   "price is too small compared to title. Should be same size." and the
   description needed a size up without the box growing. The room came
   from the gap between the size row and Add to cart, as he suggested.
   Phone description is fluid so the longest copy stays two lines down
   to 360 px; at 14px flat it wrapped to three and the box grew. */
@media (min-width: 768px) {
  .panel__price { font-size: 28px; line-height: 32px; }
}