/* ==========================================================================
   Luev Galleries — gallery (belt + grid), viewer, print configurator, cart
   ========================================================================== */

:root {
  --bg: #0a0a0b;
  --bg-2: #18181a;
  --ink: #f1eee8;
  --muted: rgba(241, 238, 232, 0.6);
  --faint: rgba(241, 238, 232, 0.5);
  --line: rgba(241, 238, 232, 0.12);
  --line-strong: rgba(241, 238, 232, 0.24);
  --warm: #e7b98a;

  --serif: "Newsreader", "Iowan Old Style", "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(16px, 3.2vw, 48px);
  --nav-h: 72px;
  --step-h: 56px;
  --card-w: 200px;
  /* top of the content area below the fixed chrome (header, plus the step bar when shown) */
  --chrome-top: var(--nav-h);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

body.has-stepbar { --chrome-top: calc(var(--nav-h) + var(--step-h)); }

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

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  overflow: hidden;
  overscroll-behavior: none;
}

img { display: block; max-width: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.noscript { padding: 2rem; color: #fff; }

/* SplitText line masks: room for descenders so nothing gets clipped */
.split-mask {
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.is-loading .nav,
.is-loading .intro,
.is-loading .hint,
.is-loading .belt,
.is-loading .grid { visibility: hidden; }

/* ---------- backdrop ---------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--bg);
}

.backdrop__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 18%, rgba(255, 255, 255, 0.075), transparent 70%),
    radial-gradient(120% 80% at 50% 120%, rgba(0, 0, 0, 0.9), transparent 60%);
}

.backdrop__ambient {
  position: absolute;
  inset: -12%;
  opacity: 0;
  will-change: opacity, transform;
}

.backdrop__ambient img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(80px) saturate(1.25);
  transform: translateZ(0);
}

.backdrop__veil {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 11, 0.94) 0%, rgba(10, 10, 11, 0.82) 38%, rgba(10, 10, 11, 0.45) 70%, rgba(10, 10, 11, 0.6) 100%),
    radial-gradient(60% 70% at 72% 50%, transparent, rgba(10, 10, 11, 0.6));
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ---------- header: the logo, centered (owner, 2026-11-03), nothing else ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  pointer-events: none;
}

/* scrim behind the header, only while content is scrolled under it */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -28px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0.94), rgba(10, 10, 11, 0.8) 60%, rgba(10, 10, 11, 0));
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}

body.is-scrolled .nav::before { opacity: 1; }

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  font-size: 15px;
  pointer-events: auto;
}

.brand__name { display: inline-flex; align-items: center; }

.brand__logo {
  display: block;
  /* centered (owner, 2026-11-03): 26px on phones up to 44px on wide screens */
  height: clamp(26px, 3.12vw, 44px);
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

/* ---------- step bar (purchase steps, under the header) ---------- */

.stepbar {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--nav-h);
  z-index: 49;
  height: var(--step-h);
  padding: 0 var(--gutter);
  visibility: hidden;
  pointer-events: none;
}

.stepbar__inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.stepbar__inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
}

.stepbar__back { justify-self: start; height: 44px; }

.stepbar__title {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}

.stepbar__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: -8px;
}

.stepbar__extra { display: inline-flex; gap: 4px; }

.stepbar__link {
  height: 44px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.3s;
}

.stepbar__link:hover { color: var(--ink); }

/* ---------- gallery ---------- */

.gallery {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

.intro {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: calc(var(--nav-h) + clamp(4px, 3.6vh, 48px));
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}

.headline {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  /* scales down when the headline has more lines, so it never reaches the belt */
  font-size: clamp(26px, min(3.9vw, calc(15vh / var(--lines, 2))), 60px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
  font-variation-settings: "opsz" 72;
}

.headline__line { display: block; }

.intro__text {
  margin: 14px 0 0;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: balance;
}

.intro__text:empty { display: none; }

.intro__meta {
  margin: 12px 0 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.intro__meta:empty { display: none; }

/* paid galleries: "Get every photo · $49.99" under the meta line (opens the Full Pack) */
.intro__all {
  position: relative;
  margin: 10px 0 0;
  padding: 6px 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 5px;
  font-variant-numeric: tabular-nums;
  pointer-events: auto;
  transition: text-decoration-color 0.3s;
}

.intro__all::before { content: ""; position: absolute; inset: -10px -6px; } /* a 44 px touch target */
.intro__all:hover { text-decoration-color: currentColor; }

.filters {
  margin-top: 18px;
  max-width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: auto;
}

.filters__bar {
  position: relative;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* grid view, scrolled: the bar stays pinned under the header on a frosted pill */
.filters__bar::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: 999px;
  background: rgba(20, 20, 22, 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -18px rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}

.filters__bar.is-stuck::before { opacity: 1; }

.filters[hidden] { display: none; }

.seg.seg--albums {
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  /* room for the focus ring inside the scroller */
  padding: 4px;
  margin: -4px;
}

.seg--albums::-webkit-scrollbar { display: none; }
.seg--albums .chip { flex: none; }
.seg--albums.fade-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.seg--albums.fade-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.seg--albums.fade-start.fade-end {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}

.seg--views {
  flex: none;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.seg--views .chip { width: 44px; padding: 0; display: grid; place-items: center; }
.seg--views.seg--solo { padding-left: 0; border-left: 0; }

/* not found / locked / error: the intro alone, a little lower */
.intro--message { top: max(calc(var(--nav-h) + 24px), 28vh); }
.intro--message .headline { max-width: 18ch; }

.intro__cta {
  margin-top: 26px;
  display: flex;
  gap: 12px;
  justify-content: center;
  pointer-events: auto;
}

.intro__cta[hidden] { display: none; }

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
}

.pill-link--ghost { background: none; color: var(--ink); border: 1px solid var(--line-strong); }

.stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}

body[data-state="gallery"] .stage { pointer-events: auto; }
body[data-view="grid"] .stage { visibility: hidden; }
body[data-state="gallery"][data-view="grid"] .stage { pointer-events: none; }
.stage.is-dragging { cursor: grabbing; }
.has-cursor .stage { cursor: none; }
.has-cursor .stage .check { cursor: pointer; }

.belt {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.card {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--card-w);
  height: calc(var(--card-w) * 4 / 3);
  border-radius: 10px;
  overflow: hidden;
  background: #121214;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.04);
  will-change: transform;
  -webkit-user-drag: none;
  backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  contain: layout paint;
}

.card__open {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* the card clips its content, so the focus ring is drawn inside it */
.card__open:focus-visible { outline: 2px solid var(--ink); outline-offset: -5px; border-radius: inherit; }

.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

.card__img.is-loaded { opacity: 1; }

.card__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: calc(var(--card-w) * 0.34) calc(var(--card-w) * 0.075) calc(var(--card-w) * 0.075);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.42) 40%, rgba(0, 0, 0, 0.72));
  pointer-events: none;
}

.card__title {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--card-w) * 0.082);
  line-height: 1.12;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 24;
  /* long titles never cover the photo */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.card__meta {
  display: block;
  margin-top: calc(var(--card-w) * 0.035);
  font-size: calc(var(--card-w) * 0.045);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* selection ring + check: one layer whose opacity follows the caption during flights */
.card__ui {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.card__shade {
  position: absolute;
  inset: 0;
  background: #070708;
  opacity: 0;
  pointer-events: none;
  will-change: opacity; /* its own layer: dimming never re-rasterises the photo */
}

.hint {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: calc(clamp(20px, 4vh, 40px) + env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--faint);
  pointer-events: none;
  transition: bottom 0.7s var(--ease-out);
}

body.has-actionbar .hint { bottom: calc(96px + env(safe-area-inset-bottom)); }
body[data-view="grid"] .hint { visibility: hidden; }

/* ---------- selection: check toggle + ring (belt cards and grid tiles) ---------- */

.check {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  pointer-events: auto;
  border-radius: 50%;
}

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

.check__badge {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: transparent;
  background: rgba(10, 10, 11, 0.3);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), opacity 0.3s var(--ease-out);
}

.check__badge svg { width: 12px; height: 12px; }
.check:hover .check__badge { background: rgba(10, 10, 11, 0.5); color: rgba(255, 255, 255, 0.55); }

.is-selected .check__badge {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 0 0 1.5px var(--ink), 0 3px 12px rgba(0, 0, 0, 0.45);
}

.is-selected .check:hover .check__badge { background: #fff; color: var(--bg); }

.sel-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 5px rgba(10, 10, 11, 0.55);
  transition: opacity 0.35s var(--ease-out);
}

.is-selected .sel-ring { opacity: 1; }

/* fine pointers: the check appears on hover / focus, and always once selected */
@media (hover: hover) and (pointer: fine) {
  .card:not(.is-selected) .check__badge,
  .tile:not(.is-selected) .check__badge { opacity: 0; }
  .card:hover .check__badge,
  .card:focus-within .check__badge,
  .tile:hover .check__badge,
  .tile:focus-within .check__badge { opacity: 1; }
}

/* ---------- grid view ---------- */

.grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  visibility: hidden;
  pointer-events: none;
}

.grid::-webkit-scrollbar { display: none; }
body[data-state="gallery"][data-view="grid"] .grid { pointer-events: auto; }

.grid__inner {
  position: relative;
  margin: 0 var(--gutter);
}

.tile {
  position: absolute;
  overflow: hidden;
  border-radius: 6px;
  background: #121214;
  contain: layout paint;
  -webkit-tap-highlight-color: transparent;
}

.tile__open {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  -webkit-touch-callout: none;
}

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

.tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  -webkit-user-drag: none;
}

.tile__img.is-loaded { opacity: 1; }

.fly-card {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 45;
  overflow: hidden;
  pointer-events: none;
  background: #121214;
  transform-origin: 0 0;
  will-change: transform;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.85);
}

.fly-card img { width: 100%; height: 100%; object-fit: cover; }

/* journey screens (G2) take over the stage in this layer: above the product page, below the gallery's flying cards */
.journey {
  position: fixed;
  inset: 0;
  z-index: 24;
  pointer-events: none;
}

.journey > * { pointer-events: auto; }

/* ---------- cursor ---------- */

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  pointer-events: none;
  display: none;
}

.has-cursor .cursor { display: block; }

.cursor__ring {
  position: absolute;
  left: -36px;
  top: -36px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.02);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.cursor__label {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- product (viewer + configurator) ---------- */

.product {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) 1.18fr;
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  padding: var(--chrome-top) var(--gutter) 0;
  visibility: hidden;
  pointer-events: none;
}

body[data-state="product"] .product,
body[data-state="switching"] .product { pointer-events: auto; }

/* the viewer only previews: no options, no price, no dimension rules */
.product[data-mode="view"] [data-opt],
.product[data-mode="view"] .price,
.product[data-mode="view"] .dim { display: none; }
.product:not([data-mode="view"]) .product__bar { display: none; }

.product__info {
  min-height: 0;
  /* room for focus rings inside the scroll container, without shifting the layout */
  padding-inline: 6px;
  margin-inline: -6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 8px 6px 40px;
  display: flex;
  flex-direction: column;
}

.product__info::-webkit-scrollbar { display: none; }

.product__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.3s;
}

.link-btn svg { transition: transform 0.5s var(--ease-out); }
.link-btn:hover { color: var(--ink); }
.link-btn:hover svg { transform: translateX(-3px); }

.pager {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pager[hidden] { display: none; }

.pager__btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: border-color 0.3s, color 0.3s;
}

/* 44px hit area around the 36px ring */
.pager__btn::before { content: ""; position: absolute; inset: -4px; }

.pager__btn:hover { border-color: var(--line-strong); color: var(--ink); }
.pager__count { min-width: 64px; text-align: center; }

.product__body {
  margin: auto 0;
  padding-top: clamp(12px, 3vh, 40px);
  max-width: 520px;
}

.mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.mask > * { display: inline-block; }

.eyebrow .mask,
.eyebrow .mask > * { max-width: 100%; overflow-wrap: anywhere; }

.eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.product__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 3.7vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.product__desc {
  overflow-wrap: anywhere;
  margin: 20px 0 0;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  margin: 28px 0 0;
}

.specs:empty { display: none; }

.specs__row {
  position: relative;
  padding: 11px 0;
}

.rule {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
}

.specs dt {
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.04em;
}

.specs dd {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--ink);
}

.option { margin-top: 24px; }
.option[hidden] { display: none; }

.option__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 12px;
}

.option__label {
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.option__value { color: var(--muted); text-align: right; }

.option__note {
  margin: 10px 0 0;
  max-width: 46ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--faint);
}

.option__note:empty { display: none; }
.option__note--warm { color: var(--warm); }

.seg {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* The thumb inverts whatever it covers, so labels stay legible at every point of its glide. */
.seg__thumb {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  border-radius: 999px;
  background: var(--ink);
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
}

.chip {
  position: relative;
  z-index: 1;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.45s var(--ease-out), border-color 0.3s, opacity 0.3s;
}

.chip small { font-size: 11px; color: inherit; opacity: 0.6; margin-left: 2px; }
.chip:hover { border-color: var(--line-strong); }
.chip[aria-checked="true"] { border-color: transparent; }
.chip[aria-disabled="true"] { opacity: 0.32; cursor: not-allowed; }
.chip[aria-disabled="true"]:hover { border-color: var(--line); }

.chip .chip__tag {
  margin-left: 0;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.62;
}

.chip__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--warm);
}

/* the key under the sizes: what the dot on a size means */
.option__key {
  display: flex;
  align-items: center;
  gap: 7px;
}
.option__key .chip__dot { flex: none; }

/* The one frame (black, owner decision 3) takes its colour from the catalog (--fc). */
.artwork__finish {
  --fc: #141414;
  background: linear-gradient(145deg, color-mix(in srgb, var(--fc) 80%, #fff), var(--fc) 55%, color-mix(in srgb, var(--fc) 88%, #000));
}

.stepper {
  display: inline-flex;
  align-items: center;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.stepper__btn {
  width: 44px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  transition: color 0.3s, opacity 0.3s;
}

.stepper__btn:hover { color: var(--ink); }
.stepper__btn:disabled { opacity: 0.3; }

.stepper__value {
  min-width: 30px;
  text-align: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.buy {
  margin-top: 30px;
  padding-top: 22px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.price { display: flex; flex-direction: column; gap: 4px; }

.price__value {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  font-variation-settings: "opsz" 48;
  display: inline-flex;
  white-space: nowrap;
}

.odo {
  display: inline-block;
  height: 1.1em;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.1;
}

.odo__strip { display: flex; flex-direction: column; }
.odo__strip > span { display: block; height: 1.1em; text-align: center; }
.odo__char { display: inline-block; line-height: 1.1; height: 1.1em; white-space: pre; }

.price__note {
  min-height: 1.2em;
  font-size: 12px;
  color: var(--faint);
}

/* an event discount: the list price struck, the percent in the warm accent */
.price__was,
.drawer__was { color: var(--faint); text-decoration-thickness: 1px; }
.price__off { color: var(--warm); }

/* The print in miniature on the pinned buy row (stacked layout). app.js sizes the piece in
   the print's proportions and reveals the button (width, opacity, scale) once the big preview
   has scrolled away. */
.buy__mini {
  position: relative;
  flex: none;
  width: 0;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 10px;
}

.buy__mini[aria-hidden="true"] { pointer-events: none; }
.buy__mini:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.buy__mini-piece {
  --fw: 0px;
  --mw: 0px;
  --bx: 0px;
  --by: 0px;
  position: relative;
  display: block;
  width: 36px;
  height: 46px;
  background: var(--mfc, #141414);
  box-shadow: 0 10px 18px -8px rgba(0, 0, 0, 0.9), inset 1px 1px 0 rgba(255, 255, 255, 0.14);
}

.buy__mini-mat { position: absolute; inset: var(--fw); background: #f3f1ec; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }
.buy__mini-paper { position: absolute; inset: calc(var(--fw) + var(--mw)); background: #fbfaf7; }

.buy__mini-clip {
  position: absolute;
  inset: calc(var(--fw) + var(--mw) + var(--by)) calc(var(--fw) + var(--mw) + var(--bx));
  overflow: hidden;
  background: #121214;
}

.buy__mini-img { display: block; width: 100%; height: 100%; object-fit: cover; }

.add-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 56px;
  padding: 0 22px 0 28px;
  min-width: 260px;
  flex: 1 1 260px;
  max-width: 320px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.add-btn__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #ffffff;
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform 0.6s var(--ease-out);
}

.add-btn:hover .add-btn__fill { transform: translateY(0); }
/* the reveal clips the button, so its focus ring is drawn inside the pill */
.add-btn:focus-visible { outline: 2px solid var(--bg); outline-offset: -6px; }
.add-btn { transition: transform 0.35s var(--ease-out); }
.add-btn:active { transform: scale(0.98); }
.pager__btn:active { transform: scale(0.94); }
.chip:active { border-color: var(--line-strong); }
.add-btn:disabled { cursor: default; opacity: 0.5; }

.add-btn__labels {
  position: relative;
  display: grid;
  overflow: hidden;
  height: 20px;
}

.add-btn__label {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 20px;
  white-space: nowrap;
}

.add-btn__arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(10, 10, 11, 0.16);
}

.add-btn__arrow svg { transition: transform 0.6s var(--ease-out); }
.add-btn:hover .add-btn__arrow svg { transform: translateX(2px); }

/* the viewer's select toggle: selected, the pill turns outlined (its icon is swapped by app.js) */
.add-btn[aria-pressed="true"] {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: transform 0.35s var(--ease-out), background-color 0.45s var(--ease-out), color 0.45s var(--ease-out);
}
.add-btn[aria-pressed="true"] .add-btn__fill { background: rgba(255, 255, 255, 0.07); }
.add-btn[aria-pressed="true"] .add-btn__arrow { border-color: var(--line-strong); }
.add-btn[aria-pressed="true"]:focus-visible { outline-color: var(--ink); }

.notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 22px;
  font-size: 12px;
  color: var(--faint);
}

.notes li { display: inline-flex; align-items: center; gap: 8px; }
.notes li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* media column */

.product__media {
  position: relative;
  min-height: 0;
  margin-bottom: clamp(24px, 6vh, 72px);
  margin-top: 12px;
}

body.has-actionbar .product[data-mode="view"] .product__media { margin-bottom: max(clamp(24px, 6vh, 72px), 100px); }

.artwork {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  visibility: hidden;
  --fw: 0px;
  --mw: 0px;
  --bx: 0px;
  --by: 0px;
}

.artwork__shadow,
.artwork__piece {
  position: absolute;
  inset: 0;
}

.artwork__shadow {
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9), 0 18px 36px -18px rgba(0, 0, 0, 0.7);
}

.artwork__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.artwork__finish {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease-in-out);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.12),
    inset -1px -1px 0 rgba(0, 0, 0, 0.35);
}

.artwork__finish.is-active { opacity: 1; }

.artwork__mat {
  position: absolute;
  inset: var(--fw);
  background: #f3f1ec;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* the print itself: white paper, visible as a border when the photo is fitted */
.artwork__paper {
  position: absolute;
  inset: calc(var(--fw) + var(--mw));
  background: #fbfaf7;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.artwork__clip {
  position: absolute;
  inset: calc(var(--fw) + var(--mw) + var(--by)) calc(var(--fw) + var(--mw) + var(--bx));
  overflow: hidden;
  background: #121214;
  border-radius: 2px;
}

.artwork__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* fill: the photo is cropped to the paper — drag it (or use the arrow keys) to choose the crop */
.artwork.is-croppable .artwork__clip { cursor: grab; touch-action: none; }
.artwork.is-croppable.is-cropping .artwork__clip { cursor: grabbing; }
.has-cursor .artwork.is-croppable .artwork__clip { cursor: none; }
.artwork__clip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.dim {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.dim__line {
  position: absolute;
  background: var(--line-strong);
}

.dim__line::before,
.dim__line::after {
  content: "";
  position: absolute;
  background: var(--line-strong);
}

.dim--w .dim__line { left: 0; right: 0; top: 0; height: 1px; transform-origin: center; }
.dim--w .dim__line::before,
.dim--w .dim__line::after { top: -4px; width: 1px; height: 9px; }
.dim--w .dim__line::before { left: 0; }
.dim--w .dim__line::after { right: 0; }
.dim--w .dim__label { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); white-space: nowrap; }

.dim--h .dim__line { top: 0; bottom: 0; left: 0; width: 1px; transform-origin: center; }
.dim--h .dim__line::before,
.dim--h .dim__line::after { left: -4px; height: 1px; width: 9px; }
.dim--h .dim__line::before { top: 0; }
.dim--h .dim__line::after { bottom: 0; }
.dim--h .dim__label {
  position: absolute;
  left: 10px;
  top: 50%;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
  white-space: nowrap;
}

/* ---------- action bar: fixed bar on phones, floating pill on desktop ---------- */

.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  padding: 22px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  display: flex;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
}

.actionbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0), rgba(10, 10, 11, 0.86) 34%, rgba(10, 10, 11, 0.96));
  opacity: var(--ab-bg, 1);
}

.actionbar__inner {
  flex: 1;
  min-width: 0; /* with .actionbar__primary's: the bar fits between the gutters on 320 px phones */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  pointer-events: auto;
}

.actionbar__primary {
  position: relative;
  flex: 1;
  min-width: 0; /* shrinks on 320 px phones instead of pushing the cart pill off-screen */
  height: 52px;
  padding: 0 10px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
}

.actionbar__primary[hidden] { display: none; }
.actionbar__primary:focus-visible { outline: 2px solid var(--bg); outline-offset: -5px; }
.actionbar__primary:disabled { opacity: 0.5; }

.actionbar__label { display: inline-block; min-width: 0; white-space: pre; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }

/* the figure beside the label sits against the arrow, after a hairline */
.actionbar__meta {
  margin-left: auto;
  margin-right: -4px;
  padding-left: 12px;
  border-left: 1px solid rgba(10, 10, 11, 0.16);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.actionbar__meta[hidden] { display: none; }

.ab-count {
  display: inline-block;
  height: 1.3em;
  line-height: 1.3em;
  overflow: hidden;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}

.ab-count > span,
.ab-count > span > span { display: block; } /* the rolling strip stacks its two numbers */

.actionbar__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(10, 10, 11, 0.16);
}

.cartpill {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(30, 30, 33, 0.92);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
  transition: background-color 0.3s;
}

.cartpill:hover { background: rgba(44, 44, 48, 0.95); }
.cartpill[hidden] { display: none; }

.cartpill--ghost { width: 44px; height: 44px; background: none; box-shadow: none; }
.cartpill--ghost:hover { background: rgba(255, 255, 255, 0.06); }

.cartpill__count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--bg);
  font-size: 10px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cartpill--ghost .cartpill__count { top: 2px; right: 0; }

/* ---------- drawer ---------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
}

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 6, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  background: #111113;
  border-left: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}

.drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--nav-h);
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
}

.drawer__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 26px;
  font-variation-settings: "opsz" 48;
}

.drawer__items {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 28px;
}

.drawer__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto; /* long descriptions wrap; the price never clips */
  gap: 16px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.drawer__thumb {
  display: block;
  width: 64px;
  height: 80px;
  object-fit: cover;
  border-radius: 3px;
  background: #1b1b1e;
}

.drawer__media { position: relative; width: 64px; height: 80px; }
/* a print line: the piece as ordered (app.js pieceHTML), centred in the thumbnail's box */
.drawer__media--piece { display: grid; place-items: center; }
.drawer__piece { box-shadow: 0 8px 14px -8px rgba(0, 0, 0, 0.9), inset 1px 1px 0 rgba(255, 255, 255, 0.14); }
.drawer__piece.is-unframed { background: #fbfaf7; box-shadow: 0 8px 14px -8px rgba(0, 0, 0, 0.9); }

.drawer__badge {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(10, 10, 11, 0.78);
  color: var(--ink);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* sticker pack: a small fanned stack of its photos */
.drawer__stack { position: relative; width: 64px; height: 80px; }

.drawer__stack img {
  position: absolute;
  left: 10px;
  top: 18px;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 9px;
  border: 2px solid #f6f4ef;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.8);
  background: #1b1b1e;
}

.drawer__stack img:nth-child(1) { transform: translate(-7px, 4px) rotate(-11deg); }
.drawer__stack img:nth-child(2) { transform: translate(7px, 2px) rotate(9deg); }
.drawer__stack img:nth-child(3) { transform: translate(0, -6px) rotate(-2deg); }

/* digital packs: the files as a small fan of photos (no sticker edge), the badge on top */
.drawer__stack .drawer__badge { z-index: 4; left: 0; bottom: 6px; }
.drawer__stack--digital img { border-color: rgba(255, 255, 255, 0.06); border-radius: 3px; }

.drawer__name {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
  font-variation-settings: "opsz" 24;
  overflow-wrap: anywhere;
}

.drawer__meta { margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.drawer__flag { margin-top: 6px; font-size: 12px; color: var(--warm); }
.drawer__item.is-invalid .drawer__name,
.drawer__item.is-invalid .drawer__media,
.drawer__item.is-invalid .drawer__stack { opacity: 0.5; }

.drawer__qty {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.drawer__qty button {
  position: relative;
  width: 32px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: color 0.3s, opacity 0.3s;
}

.drawer__qty button::before { content: ""; position: absolute; inset: -7px -6px; }
.drawer__qty button:hover { color: var(--ink); }
.drawer__qty button:disabled { opacity: 0.3; }
.drawer__qty output { min-width: 22px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }

.drawer__side { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: flex-end; }
.drawer__actions { margin-top: 10px; display: flex; gap: 2px; }

.drawer__link {
  position: relative;
  min-height: 32px;
  padding: 0 6px;
  font-size: 11px;
  color: var(--faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.drawer__link::before { content: ""; position: absolute; inset: -6px -2px; }
.drawer__link:hover { color: var(--ink); }

/* fingers: Edit / Remove get a full 44 px target */
@media (pointer: coarse) {
  .drawer__actions { gap: 0; margin-right: -10px; }
  .drawer__link { min-height: 44px; min-width: 44px; padding: 0 10px; font-size: 12px; }
  .drawer__link::before { inset: 0; }
}

/* empty: a centered note with a way back, in place of the list and the totals */
.drawer__empty {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 36px 15vh;
  text-align: center;
}

.drawer__empty-icon { color: var(--faint); margin-bottom: 18px; }

.drawer__empty-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.15;
  font-variation-settings: "opsz" 48;
}

.drawer__empty-text {
  margin: 10px 0 26px;
  max-width: 30ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.drawer.is-empty .drawer__items,
.drawer.is-empty .drawer__foot { display: none; }
.drawer.is-empty .drawer__empty { display: flex; }

/* free shipping: a hairline that fills up to the threshold */
.drawer__ship { margin-bottom: 18px; }
.drawer__ship[hidden] { display: none; }

.drawer__ship-text {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.drawer__ship.is-free .drawer__ship-text { color: var(--ink); }
.drawer__ship.is-free .drawer__ship-text::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 5px;
  margin: 0 9px 3px 1px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

.drawer__ship-track {
  position: relative;
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.drawer__ship-bar {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--muted);
  transform-origin: left center;
  transform: scaleX(0);
}

.drawer__ship.is-free .drawer__ship-bar { background: var(--ink); }

/* the rates themselves, quiet under the line ($6 Florida · $8 rest of US · free over $69) */
.drawer__ship-rates {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.drawer__ship-rates:empty { display: none; }
.drawer__ship.is-flat .drawer__ship-track,
.drawer__ship.is-flat .drawer__ship-text:empty { display: none; }
.drawer__ship.is-flat .drawer__ship-rates { margin-top: 0; }

/* "Ships to": Florida or another US state, before checkout (one Stripe option per session).
   GSAP shakes .drawer__dest-opts (x) when checkout is pressed without a choice: no transform
   transition here. */
.drawer__dest { margin-top: 14px; }
.drawer__dest[hidden] { display: none; }

.drawer__dest-label {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.drawer__dest-opts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.drawer__dest-opt {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
  color: var(--muted);
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}

.drawer__dest-opt:hover { border-color: var(--line-strong); color: var(--ink); }
.drawer__dest-opt[aria-checked="true"] { border-color: var(--ink); color: var(--ink); background: rgba(241, 238, 232, 0.05); }
.drawer__dest-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.drawer__dest-name { min-width: 0; }
.drawer__dest-price { flex: none; font-variant-numeric: tabular-nums; opacity: 0.75; }

.drawer__dest-flag {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--warm);
}

.drawer__dest-flag:empty { display: none; }

.drawer__foot {
  padding: 22px 28px calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

.drawer__total {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.drawer__disc {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--warm);
}
.drawer__disc[hidden] { display: none; }
.drawer__was { margin-right: 4px; font-size: 12px; }

.drawer__note {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--faint);
}

.add-btn--solid {
  width: 100%;
  max-width: none;
  justify-content: center;
  padding: 0 28px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  z-index: 70;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
}

body.has-actionbar .toast { bottom: calc(100px + env(safe-area-inset-bottom)); }

/* phones, first scroll of a session: circle = select, photo = view (js/app.js maybeTapHint) */
.taphint {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 70;
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
  display: grid;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(22, 22, 24, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px -12px rgba(0, 0, 0, 0.7);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.3;
  pointer-events: none;
}

.taphint[hidden] { display: none; }

body.has-actionbar .taphint { bottom: calc(100px + env(safe-area-inset-bottom)); }

.taphint__row { display: flex; align-items: center; gap: 12px; }

/* the same circle the photos carry */
.taphint__ring {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}

.taphint__icon { flex: none; color: rgba(255, 255, 255, 0.9); }

.fly-thumb {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 65;
  object-fit: cover;
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
}

/* ---------- responsive ---------- */

@media (min-width: 761px) {
  .actionbar {
    bottom: calc(24px + env(safe-area-inset-bottom));
    padding: 0 var(--gutter);
  }

  .actionbar::before { display: none; }

  .actionbar__inner {
    flex: none;
    padding: 6px;
    border-radius: 999px;
    background: rgba(22, 22, 24, 0.78);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  }

  .actionbar__primary { flex: none; min-width: 250px; height: 48px; }
  .actionbar .cartpill { width: 48px; height: 48px; }
}

@media (min-width: 961px) {
  /* the buy row stays pinned to the bottom of the info column when it has to scroll */
  .buy {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-bottom: 14px;
  }

  /* side by side, the big preview never leaves the screen */
  .buy__mini { display: none; }

  /* Backing for the pinned row: content scrolling underneath fades out over its top edge.
     Its opacity (--buy-bg) is revealed and hidden together with the row's content. */
  .buy::after {
    content: "";
    position: absolute;
    inset: -16px 0 -40px; /* reaches the column's 40px bottom padding: nothing scrolls visibly below the row */
    z-index: -1;
    pointer-events: none;
    opacity: var(--buy-bg, 1);
    background: linear-gradient(180deg, rgba(10, 10, 11, 0), rgba(10, 10, 11, 0.85) 16px, rgba(10, 10, 11, 0.97) 30px, rgb(10, 10, 11));
  }
}

@media (min-width: 961px) and (max-height: 820px) {
  /* short screens: the spec sheet moves below the purchase block, so choices and price stay in view */
  .product__body { display: flex; flex-direction: column; }
  .product__body > .specs { order: 10; margin-top: 22px; }
  .product__body > .notes { order: 9; }
  .product__title { font-size: clamp(30px, 5.6vh, 46px); }
  .product__desc { margin-top: 12px; line-height: 1.5; }
  .specs { margin-top: 16px; }
  .specs__row { padding: 7px 0; }
  .option { margin-top: 16px; }
  .chip { height: 34px; }
  .buy { margin-top: 18px; padding-top: 16px; }
  .notes { margin-top: 14px; }
  .product__body { padding-top: 8px; }
}

@media (max-height: 560px) and (min-width: 561px) {
  .intro { top: 60px; }
  .headline { font-size: clamp(22px, 6.4vh, 34px); }
  .intro__text { display: none; }
  .hint { bottom: 10px; }
}

@media (max-width: 960px) {
  .product {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    scroll-padding-top: var(--chrome-top);
  }

  .product__media {
    order: -1;
    flex: none;
    position: relative;
    height: max(52svh, 340px);
    margin: var(--chrome-top) var(--gutter) 0;
  }

  body.has-actionbar .product[data-mode="view"] .product__media { margin-bottom: 0; }

  .product__info {
    overflow: visible;
    padding: 12px var(--gutter) calc(48px + env(safe-area-inset-bottom));
    margin-inline: 0;
  }

  body.has-actionbar .product__info { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }

  .product__body { max-width: 640px; padding-top: 20px; }

  /* Configuring a print: price and Add to cart stay pinned to the bottom of the screen while
     the options scroll — with the print in miniature once the big preview is out of view. */
  .product:not([data-mode="view"]) .buy {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 26px;
    padding: 14px 0 calc(12px + env(safe-area-inset-bottom));
    flex-wrap: nowrap;
    gap: 14px;
  }

  .product:not([data-mode="view"]) .buy::after {
    content: "";
    position: absolute;
    inset: -18px calc(-1 * var(--gutter)) 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--buy-bg, 1);
    background: linear-gradient(180deg, rgba(10, 10, 11, 0), rgba(10, 10, 11, 0.88) 18px, rgba(10, 10, 11, 0.97) 34px, rgb(10, 10, 11));
  }

  .product:not([data-mode="view"]) .buy .price { flex: none; }
  .product:not([data-mode="view"]) .buy .price__value { font-size: 30px; }
  .product:not([data-mode="view"]) .buy .add-btn { min-width: 0; flex: 1 1 auto; max-width: none; padding: 0 14px 0 22px; }

  .backdrop__veil {
    background: linear-gradient(180deg, rgba(10, 10, 11, 0.5), rgba(10, 10, 11, 0.86) 55%, rgba(10, 10, 11, 0.96));
  }

  .dim--h { display: none; }

  /* the stacked page scrolls under the fixed chrome: header and step bar get a backing */
  .stepbar {
    background: rgba(10, 10, 11, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  body.has-stepbar .nav::before { opacity: 1; background: rgba(10, 10, 11, 0.96); inset: 0; }

  /* purchase steps: the step bar is the whole header (owner request). The logo row slides up out
     of the way, and Back, the step and the cart sit at the very top. (GSAP only fades the header
     in at load: the transform and visibility here are CSS's alone.) */
  .nav { transition: transform 0.6s var(--ease-out); }
  body.has-stepbar { --chrome-top: calc(var(--step-h) + env(safe-area-inset-top)); }
  body.has-stepbar .nav {
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.45s var(--ease-out), visibility 0s linear 0.45s;
  }
  body.has-stepbar .stepbar {
    top: 0;
    height: calc(var(--step-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
}

/* the smallest phones (320–380 px): the configurator's buy row keeps "Add to cart" whole next
   to a framed price, and the action bar keeps its gutter */
@media (max-width: 380px) {
  .product:not([data-mode="view"]) .buy { gap: 10px; }
  .product:not([data-mode="view"]) .buy .price__value { font-size: 26px; }
  .product:not([data-mode="view"]) .buy .add-btn { padding: 0 18px; gap: 10px; justify-content: center; }
  .product:not([data-mode="view"]) .buy .add-btn__arrow { display: none; }
  .actionbar__primary { padding-left: 16px; padding-right: 16px; gap: 10px; }
  .actionbar__meta { padding-left: 10px; margin-right: 0; }
  .actionbar__arrow { display: none; }
  /* the cart: narrower margins, Edit / Remove stacked beside the line total */
  .drawer__head,
  .drawer__items,
  .drawer__foot { padding-left: 20px; padding-right: 20px; }
  .drawer__item { gap: 12px; }
  .drawer__actions { flex-direction: column; align-items: flex-end; gap: 0; }
}

@media (max-width: 760px) {
  .intro { top: calc(var(--nav-h) + 2px); }
  .intro__text { margin-top: 10px; font-size: 14px; line-height: 1.5; }
  .intro__meta { margin-top: 10px; }
  .filters { margin-top: 14px; }
  .filters__bar { gap: 8px; }
  .seg--views { padding-left: 8px; }
  .add-btn { max-width: none; }
  .stepbar__title { letter-spacing: 0.16em; }
  /* the bottom bar takes the hint's place */
  body.has-actionbar .hint { visibility: hidden; }
  .toast { max-width: calc(100vw - 32px); text-align: center; }
}

@media (pointer: coarse) {
  .chip { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .hint { transition: none; }
}