/* ============================================================
   subtlebody · wholesale tool — app styles
   ============================================================ */

@import url("./colors_and_type.css");

* { box-sizing: border-box; }
html, body, #root {
  margin: 0; padding: 0;
  min-height: 100vh;
  background: var(--bg-1);
  color: var(--fg-1);
}
/* Always reserve the scrollbar gutter so switching category/concept (which changes
   page height) never adds/removes the scrollbar and shifts the layout sideways.
   The gutter sits at the far right, hard against the order panel, so paint it the
   panel colour (--bg-2) rather than the body's bone, so the strip blends in.
   No effect on mobile overlay scrollbars, which have zero width. */
html { scrollbar-gutter: stable; background: var(--bg-2); }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* ─────────── Buttons ─────────── */
.btn {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  font-weight: 500;
  padding: 14px 22px;
  border-radius: var(--r-0);
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-1);
  transition: opacity var(--dur-fast) var(--ease-arch),
              background var(--dur-fast) var(--ease-arch),
              border-color var(--dur-fast) var(--ease-arch);
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.btn-primary {
  background: var(--sb-ink);
  color: var(--fg-inverse);
  border-color: var(--sb-ink);
}
.btn-primary:hover { opacity: 0.86; }
.btn-primary:active {
  background: #000;
  transform: translateY(1px);
}
.btn-outline { border-color: var(--sb-ink); }
.btn-outline:hover { border-width: 1.5px; padding: 13.5px 21.5px; }
.btn-ghost { color: var(--fg-1); padding: 10px 0; }
.btn-ghost:hover { opacity: 0.7; }

/* ─────────── Field ─────────── */
.field {
  display: flex; flex-direction: column;
  gap: 8px;
}
.field-label {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
}
.field-input {
  font-family: var(--font-ui);
  font-size: 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 12px 0;
  color: var(--fg-1);
  outline: none;
  width: 100%;
  border-radius: 0;
}
.field-input::placeholder { color: var(--fg-mute); }
.field-input:focus { border-color: var(--sb-ink); border-width: 1.5px; padding-bottom: 11.5px; }

/* ─────────── Layout primitives ─────────── */
.app {
  display: grid;
  grid-template-columns: 1fr 440px;
  --panel-w: 440px;
  min-height: 100vh;
  transition: grid-template-columns 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}
.app.is-collapsed { grid-template-columns: 1fr 56px; --panel-w: 56px; }

.main {
  position: relative;
  min-width: 0;
  border-right: var(--border-1);
}
/* Page transition — the incoming view fades in (opacity only, so fixed children
   like the lookbook pill aren't reparented by a transform mid-animation). */
.view-anim { animation: view-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes view-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .view-anim { animation: none; } }
.main-header {
  position: sticky; top: 0; z-index: 40;
  background: none; border: 0;
  display: flex; align-items: center;
  padding: 16px 44px 16px 32px;   /* extra right clearance from the order section */
  gap: 32px;
  transition: padding 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
/* When the order panel is open it already shows the retailer · season, so drop
   the duplicate from the header to avoid the two colliding at the right edge. */
.app:not(.is-collapsed) .main-header .meta-right .meta-pill:first-child { display: none; }
/* No bar — a GRADUAL blur instead: strong at the top, fading to nothing lower down
   (like the scrim around the indicator pill). It lives on ::before so the logo/nav
   stay sharp while only the backdrop blurs and fades. */
.main-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 44px);
  z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  background: linear-gradient(to bottom, rgba(236, 232, 224, 0.86) 0%, rgba(236, 232, 224, 0.4) 46%, rgba(236, 232, 224, 0) 100%);
  -webkit-mask: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
  mask: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
  transition: height 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Collapsed → smaller, and the wordmark becomes the logo icon. */
.main-header.is-collapsed { padding-top: 7px; padding-bottom: 7px; }
.main-header.is-collapsed::before { height: calc(100% + 30px); }
.main-header .meta-right .meta-pill, .main-header .nav-tab { transition: opacity 0.28s ease, max-width 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
.main-header.is-collapsed .nav-tab.is-active::after { opacity: 0; }
.main-header.is-collapsed .meta-right .meta-pill:first-child { opacity: 0; max-width: 0; overflow: hidden; }
/* wordmark text ⇄ logo icon */
.main-header .wm { display: inline-flex; align-items: center; }
.wm-icon { display: none; height: 24px; width: auto; }
.main-header.is-collapsed .wm-text { display: none; }
.main-header.is-collapsed .wm-icon { display: block; height: 20px; }

/* Collapse = subtle: the whole menu (nav + meta) gently fades and lifts away,
   leaving only the logo icon floating on the gradual blur. Scroll up to bring it
   back. (The text→icon swap above handles the wordmark.) */
.main-header .nav-tabs, .main-header .meta-right {
  transition: opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1), transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.main-header.is-collapsed .nav-tabs, .main-header.is-collapsed .meta-right {
  opacity: 0; transform: translateY(-5px); pointer-events: none;
}

/* Hero header (lookbook, retailer only): a true FIXED overlay over the first image.
   Out of flow, so the lookbook starts flush at the top (no gap / solid band), and
   the header collapsing never shifts the page (no scroll-feedback oscillation).
   `right` tracks the order rail/panel; it starts fully transparent over the image
   and the gradual blur fades in once you leave the top. */
.app.is-hero .main-header {
  position: fixed; top: 0; left: 0; right: var(--panel-w, 56px); z-index: 40;
  transition: right 0.44s cubic-bezier(0.22, 1, 0.36, 1), padding 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.app.is-hero .main-header::before { transition: opacity 0.45s ease, height 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
/* Over the hero image the frost softens but never vanishes, and the menu gets a
   bone halo — ink text stays readable on dark or busy photography. */
.app.is-hero.is-attop .main-header::before { opacity: 0.55; }
.app.is-hero.is-attop .main-header .nav-tab,
.app.is-hero.is-attop .main-header .wm-text,
.app.is-hero.is-attop .main-header .meta-pill,
.app.is-hero.is-attop .main-header .btn-ghost {
  text-shadow: 0 0 10px rgba(236, 232, 224, 0.9), 0 0 26px rgba(236, 232, 224, 0.6);
}
.main-header .wm {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  transition: opacity var(--dur-fast) var(--ease-arch);
}
.main-header .wm:hover { opacity: 0.6; }
.main-header .wm.is-active { opacity: 1; }
.main-header .nav-tabs {
  display: flex; align-items: center; gap: 28px;
  flex: 1;
}
.main-header .nav-tab {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-2);
  padding: 6px 0;
  background: transparent; border: 0;
  position: relative;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-arch);
}
.main-header .nav-tab.is-active { color: var(--fg-1); }
.main-header .nav-tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -17px;
  height: 1px; background: var(--sb-ink);
}
.main-header .nav-tab:hover:not(.is-active) { color: var(--fg-2); }

.main-header .meta-right {
  display: flex; align-items: center; gap: 24px;
  margin-left: auto;
}
.meta-pill {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ─────────── Page wrappers ─────────── */
.page { padding: 64px 64px 192px; }
.page-narrow { max-width: 1120px; margin: 0 auto; }
.page-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 64px;
  border-bottom: var(--border-1);
  padding-bottom: 32px;
}
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 400;
}
.page-head .lead {
  margin-top: 12px;
  font-size: 14px;
  color: var(--fg-3);
  max-width: 480px;
}
.page-head .meta { color: var(--fg-3); font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.08em; text-transform: uppercase; }

/* ─────────── Cards / hairline structures ─────────── */
.hairline { border-top: var(--border-1); }
.hairline-b { border-bottom: var(--border-1); }
.divide > * + * { border-top: var(--border-1); }

/* ─────────── Photo placeholder ─────────── */
.photo {
  position: relative;
  background: var(--sb-bone-deep);
  overflow: hidden;
}
.photo .photo-tag {
  position: absolute; top: 16px; left: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-1);
  background: rgba(236, 232, 224, 0.7);
  backdrop-filter: blur(6px);
  padding: 6px 10px;
  text-transform: uppercase;
  z-index: 2;
  max-width: calc(100% - 32px);
}
.photo .photo-index {
  position: absolute; bottom: 16px; right: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(22,20,15,0.8);
  text-transform: uppercase;
  z-index: 2;
  max-width: calc(100% - 32px);
  text-align: right;
}

/* ─────────── Order panel (right sidebar) ─────────── */
.panel {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  background: var(--bg-2);
  overflow: hidden;
}
.panel-head {
  padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: var(--border-1);
  flex-shrink: 0;
}
.panel-head .h {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  font-weight: 500;
}
.panel-head .sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin-top: 2px;
}
.panel-collapse {
  background: transparent; border: 0;
  font-size: 18px; color: var(--fg-2);
  padding: 4px 8px;
}
.panel-body {
  flex: 1; overflow-y: auto;
  padding: 0;
}
.panel-empty {
  padding: 64px 24px;
  text-align: center;
  color: var(--fg-3);
}
.panel-empty .glyph {
  width: 56px; height: 56px;
  margin: 0 auto 24px;
  opacity: 0.55;
}
.panel-empty .lede {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--fg-2);
  margin: 0 0 8px;
}
.panel-empty .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.panel-foot {
  border-top: var(--border-1);
  padding: 20px 24px;
  background: var(--bg-2);
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.totals-row { display: flex; justify-content: space-between; align-items: baseline; }
.totals-row .lbl { font-family: var(--font-ui); font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--fg-3); }
.totals-row .val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; }
.totals-row.is-grand .val { font-family: var(--font-display); font-size: 21px; letter-spacing: -0.01em; color: var(--fg-1); }
.totals-row.is-grand .lbl { color: var(--fg-1); }
/* per-size − qty + steppers inside an order-panel line */
.order-item-size { display: inline-flex; align-items: center; gap: 5px; }
.order-item-size .oi-step {
  background: transparent; border: 0; padding: 0;
  font-family: var(--font-mono); font-size: 11px; line-height: 1;
  color: var(--fg-3); cursor: pointer;
}
.order-item-size .oi-step:hover { color: var(--fg-1); }

/* Collapsed rail */
.panel-rail {
  position: sticky; top: 0; height: 100vh;
  border-left: var(--border-1);
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 0;
  background: var(--bg-2);
  cursor: pointer;
}
.panel-rail .rail-vert {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-ui); font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-2);
  margin-top: 24px;
}
.panel-rail .rail-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
  border: 1px solid var(--sb-ink);
  padding: 4px 6px;
  margin-top: auto;
  margin-bottom: 24px;
}

/* ─────────── Order item rows in panel ─────────── */
.order-item {
  padding: 18px 24px;
  border-bottom: var(--border-1);
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: start;
}
.order-item-thumb {
  width: 56px; height: 72px;
  background: var(--sb-bone-deep);
}
.order-item-name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1);
  margin: 0 0 2px;
  line-height: 1.3;
}
.order-item-idx {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.order-item-sizes {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.order-item-size {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  text-transform: uppercase;
  padding: 3px 7px;
  border: 0.5px solid var(--line);
  background: var(--bg-1);
}
.order-item-remove {
  background: transparent; border: 0;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--fg-3);
  padding: 0;
}
.order-item-remove:hover { color: var(--fg-1); }
.order-item-price {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
  margin-top: 4px;
}

/* ─────────── Gate (passcode screen) — lookbook voice ───────────
   One full-bleed cover image, the display headline low-left over it, and a
   minimal underlined login line at the bottom. Without an image it falls back
   to the ink room (is-bare). */
.gate2 {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--sb-bone, #ECE8E0);
  background: var(--sb-shadow, #16140f);
  overflow: hidden;
}
.gate2-media {
  position: absolute; inset: 0;
  overflow: hidden;
}
.gate2-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.gate2-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,9,8,0.34) 0%, rgba(10,9,8,0.05) 34%, rgba(10,9,8,0.62) 100%);
}
.gate2.is-bare .gate2-scrim { display: none; }
.gate2-top {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 28px 44px 0;
}
.gate2-wm {
  font-family: var(--font-display);
  font-size: 26px; letter-spacing: -0.02em;
}
.gate2-meta {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(236, 232, 224, 0.72);
}
.gate2-meta .dim2 { color: rgba(236, 232, 224, 0.45); }
.gate2-low {
  position: relative; z-index: 2;
  padding: 0 44px 40px;
  display: flex; flex-direction: column; gap: 36px;
}
.gate2-hero {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.4vw, 104px);
  line-height: 1.02; letter-spacing: -0.02em;
  font-weight: 400; margin: 0; max-width: 15em;
}
.gate2-hero em { font-style: normal; opacity: 0.55; }
.gate2-login { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.gate2-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(236, 232, 224, 0.72);
}
.gate2-intro {
  margin: 0; font-size: 13.5px; line-height: 1.6;
  color: rgba(236, 232, 224, 0.78); max-width: 460px;
}
.gate2-fields { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.gate2-input {
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(236, 232, 224, 0.45);
  padding: 8px 0; width: 180px;
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sb-bone, #ECE8E0);
}
.gate2-input::placeholder { color: rgba(236, 232, 224, 0.4); text-transform: uppercase; }
.gate2-input:focus { outline: none; border-bottom-color: var(--sb-bone, #ECE8E0); }
.gate2-code { letter-spacing: 0.2em; }
.gate2-enter {
  background: transparent; border: 0; padding: 8px 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sb-bone, #ECE8E0);
  border-bottom: 1px solid transparent;
}
.gate2-enter:hover { border-bottom-color: var(--sb-bone, #ECE8E0); }
.gate2-enter:disabled { opacity: 0.5; cursor: default; }
.gate2-error {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; color: #E0A196;
}
@media (max-width: 600px) {
  .gate2-top { padding: 22px 20px 0; }
  .gate2-low { padding: 0 20px 30px; gap: 26px; }
  .gate2-fields { gap: 16px; }
  .gate2-input { width: 136px; }
}

/* ─────────── COVER ─────────── */
.cover {
  padding: 0;
  position: relative;
  min-height: calc(100vh - 60px);
  display: grid;
  grid-template-rows: 1fr auto;
}
.cover-stage {
  position: relative;
  padding: 48px 64px;
  display: grid;
  grid-template-columns: 1fr;   /* single column: background fills, title overlays */
  gap: 64px;
  align-items: end;
  min-height: 70vh;
}
.cover-mark-area {
  display: flex; flex-direction: column; gap: 32px;
}
.cover-season {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.cover-title {
  font-family: var(--font-display);
  font-size: clamp(80px, 12vw, 200px);
  line-height: 0.85;
  letter-spacing: -0.025em;
  margin: 0;
  font-weight: 400;
  color: var(--title-fg, var(--fg-1));
  text-shadow: var(--title-shadow, none);
}
.cover-title em { font-style: normal; color: var(--title-em, var(--fg-3)); }
/* When the title sits on a dark image, lift the season line + outline button. */
.cover-mark-area.cover-on-dark .cover-season { color: rgba(236, 232, 224, 0.78); }
.cover-mark-area.cover-on-dark .btn-outline { border-color: var(--sb-bone); color: var(--sb-bone); }
.cover-photo {
  height: 70vh;
  position: relative;
  background: linear-gradient(170deg, #c8c2b6 0%, #a39c8e 50%, #6b655b 100%);
}
.cover-rail {
  padding: 24px 64px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: var(--border-1);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.cover-rail .right { display: flex; gap: 32px; }

.cover-deetz {
  padding: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  border-top: var(--border-1);
}
.cover-deetz .col-h {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 16px;
}
.cover-deetz .col-v {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.cover-deetz .col-v em {
  font-style: normal; color: var(--fg-3); display: block;
  font-size: 14px; font-family: var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-top: 6px;
}
.cover-letter {
  padding: 64px;
  border-top: var(--border-1);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 96px;
}
.cover-letter .ltr-h { font-family: var(--font-ui); font-size: var(--t-meta); letter-spacing: var(--track-meta-lg); text-transform: uppercase; color: var(--fg-3); }
.cover-letter .ltr-body { font-size: 17px; line-height: 1.6; max-width: 640px; color: var(--fg-2); }
.cover-letter .ltr-body p + p { margin-top: 1em; }
.cover-letter .ltr-sig { margin-top: 32px; font-family: var(--font-display); font-size: 22px; }

/* ─────────── LOOKBOOK ─────────── */
.lb {
  padding: 0;
}
.lb-head {
  padding: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  border-bottom: var(--border-1);
}
.lb-head h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0; font-weight: 400;
}
.lb-head h1 em { font-style: normal; color: var(--fg-3); }
.lb-head .meta { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); line-height: 1.7; }

.lb-look {
  padding: 0;
  border-bottom: var(--border-1);
  position: relative;
}
.lb-look-num {
  position: absolute;
  top: 32px; left: 32px;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  /* negative of whatever sits behind it — the photo or the page background */
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}
.lb-look-grid {
  display: grid;
  /* columns + gap set inline (admin-controlled). Each photo is shown whole
     and scalable; the taller photo defines the card height and the shorter
     one is centered within it. */
  align-items: center;
}
/* Photos are shown in full (never cropped). No bone letterbox here (unlike
   grid cards) — a scaled-down photo sits directly on the page background. */
.lb-look-grid { display: flex; }
.lb-look-grid .photo { display: flex; justify-content: center; background: none; }
.lb-photo-wrap { position: relative; }
.lb-look-grid .photo-img { display: block; width: 100%; height: auto; max-width: 100%; }
.lb-look-grid .photo-fill { width: 100%; aspect-ratio: 3 / 4; }
/* Per-photo model metadata (size worn · height). */
.lb-photo-meta {
  position: absolute; left: 14px; bottom: 14px; z-index: 4;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #fff;
  background: rgba(16, 20, 15, 0.5);
  backdrop-filter: blur(3px);
  padding: 5px 9px;
  pointer-events: none;
}
/* Pair: two equal halves with a centered divider (the gap). Each photo is sized
   independently (inline width = its own scale %) and centered within its own
   half, so each photo's surrounding space is symmetric on its own. Heights are
   each photo's own (taller defines the card, shorter is vertically centered). */
.lb-look-grid.lb-is-pair { align-items: center; }
.lb-look-grid.lb-is-pair .photo { flex: 1 1 0; min-width: 0; }
/* Single: one photo centered; its scale % is the inline image width. */
.lb-look-grid.lb-is-single .photo { flex: 1; }
.lb-look-cap {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
}
.lb-look-cap-name {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: -0.015em;
  font-weight: 400;
  line-height: 0.95;
}
.lb-look-cap-body {
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.65;
  max-width: 460px;
}
.lb-look-cap-skus {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.lb-look-cap-skus a {
  color: var(--fg-1);
  border-bottom: 1px solid var(--fg-1);
  padding-bottom: 1px;
  margin-right: 14px;
}
.lb-look-cap-skus a:hover { opacity: 0.6; }

/* Lookbook hover drawer (product composition) */
.lb-drawer-wrap { position: absolute; bottom: 32px; right: 32px; z-index: 6; }
.lb-drawer-btn {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  background: var(--sb-ink); color: var(--fg-inverse);
  border: 0; padding: 13px 20px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: opacity var(--dur-fast) var(--ease-arch);
}
.lb-drawer-btn:hover { opacity: 0.88; }
.lb-drawer {
  position: absolute; bottom: 100%; right: 0;
  width: 340px; max-height: 56vh; overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  padding: 8px;
  margin-bottom: 10px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-arch),
              transform var(--dur-fast) var(--ease-arch),
              visibility var(--dur-fast) var(--ease-arch);
  box-shadow: 0 12px 40px rgba(10, 9, 8, 0.16);
}
.lb-drawer-wrap:hover .lb-drawer { opacity: 1; visibility: visible; transform: translateY(0); }
/* invisible bridge so the cursor can cross the gap to the drawer */
.lb-drawer-wrap::before {
  content: ""; position: absolute; bottom: 100%; right: 0;
  width: 340px; height: 14px;
}
.lb-drawer-h {
  font-family: var(--font-ui); font-size: var(--t-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--fg-3); padding: 8px 8px 12px;
}
.lb-drawer-item { display: flex; gap: 12px; align-items: center; padding: 8px; cursor: pointer; transition: background var(--dur-fast) var(--ease-arch); }
.lb-drawer-item:hover { background: var(--bg-2); }
.lb-drawer-thumb {
  width: 42px; height: 54px; flex: none;
  border: 0.5px solid var(--line);
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.lb-drawer-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lb-drawer-name { font-family: var(--font-ui); font-size: 13px; color: var(--fg-1); }
.lb-drawer-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }

/* ─────────── GRID (browse) ─────────── */
.grid-page { padding: 18px 64px 160px; max-width: 1440px; margin-inline: auto; }
/* Compact collection header — give the products the real estate, not the title. */
.grid-page .page-head { align-items: center; }
.grid-page .page-head h1 { font-size: clamp(26px, 3vw, 42px); line-height: 0.98; }
.grid-page .page-head .lead { margin-top: 4px; }

/* Floating filter bar — styled like the lookbook identifier pill and anchored at
   the bottom-centre so the products own the page. Arriving from the lookbook it
   morphs out of the identifier pill (.is-morph-in); other entries just fade up. */
.grid-toolbar {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 60; /* above products, below the PDP/drafts overlays */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 30px);
  display: flex; gap: 12px; align-items: center;
  max-width: 92vw; box-sizing: border-box;
  padding: 9px 10px 9px 16px; border-radius: 999px;
  background: rgba(236, 232, 224, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 6px 24px rgba(22, 20, 15, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: left 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}
/* soft frosted scrim so a product edge behind the pill never cuts a hard line */
.grid-toolbar::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(100% + 120px); height: calc(100% + 70px);
  -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px);
  -webkit-mask: radial-gradient(closest-side, #000 42%, transparent 82%);
  mask: radial-gradient(closest-side, #000 42%, transparent 82%);
}
.grid-toolbar.is-enter { animation: gt-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes gt-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* morph out of the identifier pill: it appears at the pill's size, GROWS TO THE
   SIDES (pure horizontal expand), then the filter content fades in — so it reads
   as the identifier stretching open into the bar. */
.grid-toolbar.is-morph-in { animation: gt-morph 0.6s cubic-bezier(0.4, 0, 0.16, 1) both; transform-origin: center; }
@keyframes gt-morph {
  0%   { opacity: 0; transform: translateX(-50%) scaleX(0.28); }
  16%  { opacity: 1; }
  100% { transform: translateX(-50%) scaleX(1); }
}
/* content stays hidden until the pill has widened, then fades/rises in */
.grid-toolbar.is-morph-in > * { animation: gt-content 0.32s 0.32s both; }
@keyframes gt-content { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .grid-toolbar.is-enter, .grid-toolbar.is-morph-in, .grid-toolbar.is-morph-in > * { animation: none; }
}
/* the [ CATEGORY ] label is redundant inside the pill — drop it for space */
.grid-toolbar > .filter-label { display: none; }
.grid-toolbar .group {
  display: flex; gap: 6px; align-items: center;
  flex: 0 1 auto; min-width: 0; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
}
.grid-toolbar .group::-webkit-scrollbar { display: none; }
.grid-toolbar-right { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.grid-toolbar-right::before { content: ""; align-self: stretch; width: 1px; background: rgba(22, 20, 15, 0.16); margin: 3px 0; }
.grid-toolbar-right .grid-size-range { width: 84px; }

/* Concept (series) filter — a second layer, shown as logo icons only. Combines
   with the category filter (both apply). */
.concept-filter { display: flex; align-items: center; gap: 5px; flex: none; padding-left: 9px; margin-left: 2px; border-left: 1px solid rgba(22, 20, 15, 0.14); }
.concept-pill {
  position: relative;
  min-width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; padding: 0 2px;
  opacity: 0.45; -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s var(--ease-arch), transform 0.2s var(--ease-arch);
}
/* every logo the SAME exact height — width falls where the artwork's aspect puts it */
.concept-pill img { height: 20px; width: auto; max-width: 34px; object-fit: contain; }
.concept-pill:hover { opacity: 0.8; }
/* Selected = no ring; just full opacity + a barely-there light bloom and a hair
   of lift. Kept very subtle. */
.concept-pill.is-active {
  opacity: 1; transform: scale(1.03);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.14) 50%, transparent 70%);
}
.concept-pill.is-active img { filter: drop-shadow(0 0 2px rgba(255,255,255,0.6)); }
.concept-abbr { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--fg-2); }
.concept-all-txt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--fg-3); }
.concept-pill.concept-all:hover .concept-all-txt { color: var(--fg-1); }
.concept-pill.concept-all.is-active .concept-all-txt { color: var(--sb-ink); }
.concept-pill.is-dragging { opacity: 0.3; }

/* Mobile category list — tapping the filter wheel opens this glossy sheet to pick
   a category directly (same frosted pill language as the identifier). */
/* transparent click-catcher; the sheet itself is anchored just ABOVE the filter
   pill, toward the left (over the category wheel), and kept compact. */
.cat-sheet-scrim { position: fixed; inset: 0; z-index: 70; animation: cs-fade 0.15s ease both; }
@keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } }
.cat-sheet {
  position: fixed; left: 4vw; z-index: 71;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
  display: flex; flex-direction: column; gap: 3px; min-width: 148px; max-width: 60vw; box-sizing: border-box;
  padding: 6px; border-radius: 20px;
  background: rgba(236, 232, 224, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 14px 40px rgba(22, 20, 15, 0.24);
  transform-origin: bottom left;
  animation: cs-rise 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cs-rise { from { opacity: 0; transform: translateY(10px) scale(0.94); } to { opacity: 1; transform: none; } }
.cat-sheet-item {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-2); background: rgba(255, 255, 255, 0.4); border: 1px solid transparent; border-radius: 999px;
  padding: 8px 14px; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s var(--ease-arch), color 0.15s var(--ease-arch);
}
.cat-sheet-item:hover { background: rgba(255, 255, 255, 0.8); color: var(--fg-1); }
.cat-sheet-item.is-active { background: #fff; color: var(--fg-1); font-weight: 700; }

/* Concept picker — same glossy sheet, but ICONS ONLY, as a compact vertical column
   centred directly above the concept icon that was pressed (left/bottom set inline
   from the pill's rect; `translate:-50% 0` keeps it centred without fighting the
   rise animation's transform). */
.concept-sheet {
  right: auto; min-width: 0; width: auto; padding: 6px; gap: 4px;
  transform-origin: bottom center;
}
.concept-sheet-item {
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.concept-sheet-item img { height: 24px; width: auto; max-width: 30px; object-fit: contain; }
.concept-sheet-item .concept-all-txt { font-size: 11px; color: var(--fg-2); width: 100%; text-align: center; }
.concept-sheet-item.is-active .concept-all-txt { color: var(--fg-1); }
.concept-sheet-item .concept-abbr { width: 100%; text-align: center; }
/* Push the last product rows clear of the floating pill. */
@media (min-width: 768px) {
  .grid-toolbar { left: calc(50% - 28px); }                 /* centre in the visible area (order rail 56px) */
  .app:not(.is-collapsed) .grid-toolbar { left: calc(50% - 220px); }  /* order panel 440px */
}
.filter-pill {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;   /* no dark flash when tapped on mobile */
  transition: all var(--dur-fast) var(--ease-arch);
}
.filter-pill:hover { color: var(--fg-1); border-color: var(--fg-2); }
.filter-pill.is-active {
  background: var(--sb-ink);
  color: var(--fg-inverse);
  border-color: var(--sb-ink);
}
.filter-label {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-right: 4px;
  white-space: nowrap; flex: 0 0 auto;
}
/* the size control's label is redundant next to the slider — keep the bar tight */
.grid-toolbar .grid-size .filter-label { display: none; }
.filter-spacer { width: 1px; height: 20px; background: var(--line); }
.range {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
}
.range input[type="range"] {
  width: 120px;
  accent-color: var(--sb-ink);
}

/* Dual-handle (min + max) range */
.range-dual { gap: 12px; }
.range-val { min-width: 40px; text-align: center; color: var(--fg-1); }
.range-track {
  position: relative;
  width: 170px; height: 28px;
  display: flex; align-items: center;
}
.range-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 2px; background: var(--line-strong);
}
.range-fill {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 2px; background: var(--sb-ink);
}
.range-thumb {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%; margin: 0;
  background: transparent;
  -webkit-appearance: none; appearance: none;
  pointer-events: none;
}
.range-thumb::-webkit-slider-runnable-track { background: transparent; border: 0; }
.range-thumb::-moz-range-track { background: transparent; border: 0; }
.range-thumb::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  pointer-events: auto;
  width: 14px; height: 14px;
  background: var(--sb-ink);
  border: 2px solid var(--sb-bone);
  border-radius: 0;
  cursor: pointer;
}
.range-thumb::-moz-range-thumb {
  pointer-events: auto;
  width: 14px; height: 14px;
  background: var(--sb-ink);
  border: 2px solid var(--sb-bone);
  border-radius: 0;
  cursor: pointer;
}
.range-max { z-index: 4; }

/* Grid / Line view toggle (collection) */
.view-toggle { display: inline-flex; align-items: center; gap: 8px; }
.view-toggle-btn {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  background: transparent; border: 0;
  color: var(--fg-3);
  padding: 6px 0; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-arch);
}
.view-toggle-btn:hover { color: var(--fg-2); }
.view-toggle-btn.is-active { color: var(--fg-1); text-decoration: underline; text-underline-offset: 5px; }
.view-toggle-sep { color: var(--fg-mute); font-family: var(--font-ui); font-size: var(--t-meta); }

/* Collection grid — flexbox so each card's width (flex-basis) interpolates
   smoothly when the size control changes density. `--card-basis` is set inline. */
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* a partial/lone row (e.g. when zoomed in) centres instead of hugging the left */
  column-gap: 32px;
  row-gap: 48px;
  /* slower, gentler easing so resizing the thumbnails glides rather than snaps */
  transition: column-gap 0.72s cubic-bezier(0.33, 1, 0.68, 1), row-gap 0.72s cubic-bezier(0.33, 1, 0.68, 1);
  /* subtle fade-up when the filtered set changes (grid is keyed by category) */
  animation: grid-cat-in 0.42s var(--ease-arch) both;
}
@keyframes grid-cat-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.grid .gcard {
  flex: 0 0 var(--card-basis, calc((100% - 64px) / 3));
  min-width: 0;
  transition: flex-basis 0.72s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Thumbnail-size control */
.grid-size { display: flex; align-items: center; gap: 12px; }
.grid-size-range {
  width: 120px; height: 2px; cursor: pointer;
  accent-color: var(--fg-1);
}
/* Dense (small thumbnails) — drop the caption underneath. */
.grid.is-dense .gcard-meta { display: none; }
.gcard-meta { transition: opacity 0.3s var(--ease-arch); }

/* Dense-mode hover peek — name + data over the small thumbnail. */
.gcard-peek {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  border-radius: inherit;                    /* round its bottom corners with the photo (in-order) so it doesn't poke square corners past the rounded card */
  display: flex; flex-direction: column; gap: 2px;
  padding: 24px 10px 8px;
  background: linear-gradient(to top, rgba(236,232,224,0.92), rgba(236,232,224,0));
  opacity: 0; transition: opacity 0.22s var(--ease-arch);
  pointer-events: none;
}
.gcard:hover .gcard-peek { opacity: 1; }
.gcard-peek-name {
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  color: var(--fg-1); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gcard-peek-sub {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Quick add-to-order — revealed on hover. No dark scrim: the controls sit on a
   small frosted bone pill so hover stays clean (just the image swap + this bar). */
/* One glossy pill, centred under the card, all sizes on a single line. It's
   allowed to spill past the card edges (the photo isn't clipped) so the shadow
   is never cut. Click a size → that pill becomes an inline number field. */
.gcard-quickadd {
  position: absolute; left: 50%; bottom: 10px; z-index: 3;
  opacity: 0; transform: translateX(-50%) translateY(8px);
  transition: opacity 0.2s var(--ease-arch), transform 0.2s var(--ease-arch);
  pointer-events: none;
}
.gcard:hover .gcard-quickadd { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.qa-row {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 5px;
  width: max-content; max-width: none;
  background: rgba(236,232,224,0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.6); border-radius: 999px;
  box-shadow: 0 8px 26px rgba(22,20,15,0.2);
  padding: 6px 8px;
}
/* Size pill and its edit field stack in one fixed-size slot and cross-fade, so
   tapping a size smoothly blooms into the number field instead of hard-swapping. */
.qa-slot { position: relative; width: 42px; height: 25px; flex: none; }
.qa-pill {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--fg-1); background: rgba(255,255,255,0.55);
  border: 1px solid var(--line); border-radius: 999px; padding: 0 2px; cursor: pointer;
  box-sizing: border-box; text-align: center; overflow: hidden;
  transition: background 0.15s var(--ease-arch), opacity 0.2s var(--ease-arch), transform 0.2s var(--ease-arch);
}
.qa-pill:hover { background: #fff; }
.qa-pill.has { background: var(--sb-ink); color: var(--sb-bone); border-color: transparent; }
.qa-num {
  position: absolute; inset: 0;
  width: 100%; height: 100%; box-sizing: border-box; text-align: center;
  font-family: var(--font-mono); font-size: 12px; color: #16140f;
  background: #fff; border: 1px solid var(--sb-ink); border-radius: 999px; -moz-appearance: textfield;
  opacity: 0; transform: scale(0.8); pointer-events: none;
  transition: opacity 0.2s var(--ease-arch), transform 0.2s var(--ease-arch);
}
.qa-num::-webkit-outer-spin-button, .qa-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qa-num:focus { outline: none; }
/* editing: the field eases in, the pill recedes underneath it */
.qa-slot.is-editing .qa-pill { opacity: 0; transform: scale(0.8); pointer-events: none; }
.qa-slot.is-editing .qa-num { opacity: 1; transform: scale(1); pointer-events: auto; }

.gcard {
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-arch);
}
.gcard .photo { aspect-ratio: 3/4; overflow: visible; }  /* don't clip the quick-add pill / its shadow */
.gcard-meta { padding-top: 9px; display: flex; flex-direction: column; gap: 3px; }
/* Name gets its own full-width line — fits on one line for typical names (no
   ellipsis); a genuinely long name simply wraps to a second line. */
.gcard-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-1);
  line-height: 1.25;
}
.gcard-series-logo { height: 14px; width: auto; max-width: 40px; object-fit: contain; vertical-align: middle; margin-right: 4px; }
/* colourway on the left, WHS/RRP pricing on the right (fabric composition removed) */
.gcard-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
}
.gcard-cw { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard-price { flex: 0 0 auto; white-space: nowrap; color: var(--fg-1); }
.gcard-price .lbl { color: var(--fg-3); }
.gcard-price .dim { color: var(--fg-3); }
/* hover just cross-fades to the second image (.photo-hover) — no tint/darkening */
/* "in order" is marked by a glossy moss sheen rather than floating text. At rest it
   sits in the rounded top-left corner; on hover it follows the pointer (--gx/--gy,
   set from JS) and eases back on leave. Registering the vars as @property lets the
   gradient position interpolate, so the sheen glides instead of snapping. */
/* --gx/--gy = the glow's centre (set from JS on mousemove; rests at 50%/0% —
   top centre). Registered so moves interpolate — the glow glides, never jumps.
   They live on the .gcard so the behind-glow (card ::before) and the top rim
   (photo ::after) both inherit them. */
@property --gx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --gy { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
/* Lift the added card above its siblings: later cards in the grid would otherwise
   paint their opaque photo backgrounds OVER this card's glow, clipping it with
   straight edges. */
.gcard.is-in-order {
  position: relative; z-index: 3;
  --gx: 50%; --gy: 0%;
  transition: --gx 0.5s var(--ease-arch), --gy 0.5s var(--ease-arch);
}
/* The SHADOW lives BEHIND the card (negative z, under the photo): always visible
   as a soft dark halo past the edges, deepest around the top, dissolving well
   before the bottom — nothing under the card itself, so it reads as unfolding
   off the page. Magnetised: it follows the cursor (y clamped to the card's
   middle from the JS) and drifts home to top-centre on leave. */
.gcard.is-in-order::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -18px; right: -18px; top: -12px; height: 72%;
  background: radial-gradient(54% 46% at var(--gx) var(--gy),
    rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.06) 45%, rgba(0,0,0,0) 74%);
  filter: blur(10px);
}
.gcard.is-in-order .photo {
  border-radius: 20px;                       /* whole card rounded when added */
  transition: border-radius 0.3s var(--ease-arch), transform 0.4s var(--ease-arch);
}
.gcard.is-in-order:hover .photo { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .gcard.is-in-order:hover .photo { transform: none; } }
/* Whisper of a glass rim, top edge only, brightest under the light. */
.gcard.is-in-order .photo::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: 20px;
  padding: 1.5px;                            /* = edge thickness */
  background: radial-gradient(220px 60px at var(--gx) 0%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.2) 55%, rgba(255,255,255,0) 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}

/* ─────────── PRODUCT PAGE (full page, not a drawer) ─────────── */
/* Big packshots + the DETAILS gallery own the left column; the spec rail
   (name, prices, size run, facts, brothers) sits sticky on the right. */
.pp { padding: 20px 44px 96px 32px; }
.pp-back {
  background: none; border: 0; padding: 0; margin: 0 0 18px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-3);
}
.pp-back:hover { color: var(--fg-1); }
.pp-grid {
  display: grid; gap: 20px 56px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.95fr);
  grid-template-areas: "media info";
}
.pp-media { grid-area: media; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pp-shots { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pp-frame { aspect-ratio: 3/4; width: 100%; max-height: 78vh; }
.pp-frame-add { aspect-ratio: auto; height: 120px; }
.pp-info { grid-area: info; min-width: 0; position: sticky; top: 76px; align-self: start; }
.pp-info .pdp-spec { padding: 0; }
.pp-worn { padding-top: 6px; }
.pp-worn .pdp-details-h { margin-bottom: 12px; }
.pp-worn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pp-worn-grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.pp-details { min-width: 0; padding-top: 26px; }
.pp-details .pdp-details-h { margin-bottom: 14px; }
.pp-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Grid card hover image swap (image #2) */
.photo-hover {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;                    /* follow the photo's corners (rounded when in order) so hover doesn't square it off */
  background-size: contain; background-position: center;
  background-repeat: no-repeat; background-color: #ECE8E0;
  opacity: 0;
  transition: opacity var(--dur, 0.4s) var(--ease-arch);
  pointer-events: none;
}
.gcard:hover .photo-hover { opacity: 1; }
.pdp-spec { padding: 56px 48px; display: flex; flex-direction: column; gap: 24px; }
.pdp-spec h2 {
  font-family: var(--font-display);
  font-size: 48px;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0;
  line-height: 1;
}
.pdp-spec .idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--fg-3); text-transform: uppercase; }
.pdp-series-logo {
  height: 0.72em; width: auto; max-width: 1.8em;
  object-fit: contain;
  /* middle = baseline + x-height/2 — measured EXACT against the lowercase
     Bulky title, so no manual nudge (the old -0.04em pushed it off-centre) */
  vertical-align: middle;
  margin-right: 0.34em;
}
.pdp-spec .blurb { font-size: 15px; color: var(--fg-2); line-height: 1.65; max-width: 440px; }
.pdp-prices {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: var(--border-1); border-bottom: var(--border-1);
  padding: 18px 0;
}
.pdp-prices .price-cell { display: flex; flex-direction: column; gap: 4px; }
.pdp-prices .price-cell + .price-cell { border-left: var(--border-1); padding-left: 24px; }
.pdp-prices .lbl { font-family: var(--font-ui); font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--fg-3); }
.pdp-prices .val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 18px; color: var(--fg-1); }

.pdp-fabric {
  display: grid; grid-template-columns: 80px 1fr; gap: 16px; row-gap: 12px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  color: var(--fg-2);
}
.pdp-fabric dt { font-family: var(--font-ui); font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--fg-3); margin: 0; }
.pdp-fabric dd { margin: 0; }
/* COLOUR row: a small round colour chip (digital swatch of the colourway) + name.
   Deliberately round — one of the few rounded shapes in the bone/ink system. */
.pdp-colour { display: inline-flex; align-items: center; gap: 8px; }
.pdp-swatch {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  border: 1px solid rgba(22, 20, 15, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* Labeled detail gallery (close-up construction shots), below the spec. */
.pdp-details { margin-top: 4px; }
.pdp-details-h { font-family: var(--font-ui); font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
.pdp-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pdp-detail { margin: 0; }
.pdp-detail-img {
  display: block; width: 100%; aspect-ratio: 1 / 1; position: relative;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  background-color: #ECE8E0; border: 1px solid var(--line);
}
/* cropped detail (editor-set cover pan/zoom): clipped like a lookbook frame */
.pdp-detail-clip { position: absolute; inset: 0; overflow: hidden; }
.pdp-detail-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-detail figcaption {
  margin-top: 6px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3);
}

/* size matrix */
.size-matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.size-matrix-head { display: flex; justify-content: space-between; align-items: baseline; }
.size-matrix-head .h { font-family: var(--font-ui); font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--fg-1); }
.size-matrix-head .h-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.size-matrix-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.size-cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: var(--border-1);
  padding: 12px 8px;
  background: var(--bg-3);
  transition: border-color var(--dur-fast) var(--ease-arch);
}
.size-cell.is-active { border-color: var(--sb-ink); border-width: 1.5px; padding: 11.5px 7.5px; }
.size-cell .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--fg-3); text-transform: uppercase; }
.size-cell input {
  width: 100%; text-align: center;
  font-family: var(--font-mono);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: 0; outline: none;
  color: var(--fg-1);
  -moz-appearance: textfield;
}
.size-cell input::-webkit-outer-spin-button,
.size-cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.size-cell .stepper {
  display: flex; gap: 0; width: 100%;
}
.size-cell .stepper button {
  flex: 1; padding: 4px;
  background: transparent; border: 0;
  font-family: var(--font-mono); font-size: 14px;
  color: var(--fg-2);
}
.size-cell .stepper button:hover { color: var(--fg-1); }

.qty-summary {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 0;
  border-top: var(--border-1);
}
.qty-summary .lbl { font-family: var(--font-ui); font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--fg-3); }
.qty-summary .val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 16px; color: var(--fg-1); }

/* ─────────── LINE SHEET ─────────── */
.lsheet { padding: 32px 64px 192px; }
.lsheet-scroll {
  overflow-x: auto;
  margin: 0 -64px;
  padding: 0 64px;
}
.lsheet-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 0;
  border-bottom: var(--border-1);
  margin-bottom: 24px;
}
.lsheet-table {
  display: grid;
  grid-template-columns: 110px 200px 180px repeat(5, 56px) 70px 100px 100px;
  font-family: var(--font-ui);
  min-width: 1180px;
}
.lsheet-h, .lsheet-row {
  display: contents;
}
.lsheet-h > * {
  padding: 14px 12px;
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--line-strong);
  position: sticky; top: 0;
  background: var(--bg-1);
  z-index: 5;
}
.lsheet-h .h-num { text-align: center; }
.lsheet-row { transition: background var(--dur-fast) var(--ease-arch); }
.lsheet-row > * {
  padding: 18px 12px;
  border-bottom: var(--border-1);
  display: flex; align-items: center;
  font-size: 13px;
  color: var(--fg-1);
}
.lsheet-row:hover > * { background: var(--bg-2); }
.lsheet-row .c-thumb { padding: 16px 12px; }
.lsheet-row .c-thumb .photo { width: 96px; height: 128px; }
.lsheet-row .c-name { flex-direction: column; align-items: flex-start; gap: 4px; }
.lsheet-row .c-name .nm { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; color: var(--fg-1); line-height: 1; }
.lsheet-row .c-name .idx { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--fg-3); text-transform: uppercase; }
.lsheet-row .c-name .ctg { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--fg-2); text-transform: uppercase; }
.lsheet-row .c-fabric { flex-direction: column; align-items: flex-start; gap: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-2); line-height: 1.5; }
.lsheet-row .c-fabric .top { color: var(--fg-1); }
.lsheet-row .c-size { padding: 8px 4px; justify-content: center; }
.lsheet-row .c-size input {
  width: 100%; min-width: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  outline: none;
  padding: 8px 0;
  color: var(--fg-1);
  -moz-appearance: textfield;
}
.lsheet-row .c-size input:focus { border-color: var(--sb-ink); border-width: 1.5px; padding-bottom: 7.5px; }
.lsheet-row .c-size input::-webkit-outer-spin-button,
.lsheet-row .c-size input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lsheet-row .c-size input::placeholder { color: var(--fg-mute); }
.lsheet-row .c-size.has-qty input { color: var(--sb-ink); font-weight: 500; border-color: var(--sb-ink); }
.lsheet-row .c-total { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; justify-content: flex-end; padding-right: 12px; }
.lsheet-row .c-price { flex-direction: column; align-items: flex-end; gap: 2px; padding-right: 12px; }
.lsheet-row .c-price .ws { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--fg-1); }
.lsheet-row .c-price .msrp { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.06em; text-transform: uppercase; }
.lsheet-row .c-line { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--fg-1); justify-content: flex-end; padding-right: 12px; }
.lsheet-row.has-qty .c-line { font-weight: 500; }
.lsheet-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 32px 0;
  align-items: center;
  border-top: 1px solid var(--line-strong);
  margin-top: 24px;
}
.lsheet-foot .totals { display: flex; gap: 48px; }
.lsheet-foot .totals .stat .lbl { font-family: var(--font-ui); font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--fg-3); }
.lsheet-foot .totals .stat .val { font-family: var(--font-display); font-size: 32px; letter-spacing: -0.01em; }

/* ─────────── ORDER SUMMARY ─────────── */
.summary { padding: 64px; }
.summary h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  font-weight: 400;
}
.summary .sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 64px; }
.summary-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 32px 0;
  border-top: var(--border-1); border-bottom: var(--border-1);
  margin-bottom: 48px;
}
.summary-meta-grid .stat .lbl { font-family: var(--font-ui); font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--fg-3); display: block; margin-bottom: 8px; }
.summary-meta-grid .stat .val { font-family: var(--font-display); font-size: 48px; letter-spacing: -0.015em; line-height: 1; }
.summary-meta-grid .stat .val em { font-style: normal; font-size: 18px; color: var(--fg-3); }

.summary-rows { display: grid; grid-template-columns: 1fr; }
.summary-row {
  display: grid;
  grid-template-columns: 80px 80px 1fr 1fr 0.8fr 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: var(--border-1);
  align-items: center;
}
.summary-row .photo { width: 64px; height: 80px; }
.summary-row .idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.summary-row .nm { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; }
.summary-row .sizes { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-2); display: flex; flex-wrap: wrap; gap: 8px; }
.summary-row .sizes span { padding: 3px 7px; border: 1px solid var(--line); }
.summary-row .qty { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 16px; }
.summary-row .ttl { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 16px; text-align: right; }

.submit-bar {
  margin-top: 48px;
  padding: 32px 0;
  border-top: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.submit-grand {
  display: flex; gap: 48px; align-items: baseline;
}
.submit-grand .lbl { font-family: var(--font-ui); font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--fg-3); }
.submit-grand .below { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); margin-top: 8px; }

/* ─────────── DRAFTS PANEL ─────────── */
.drafts-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 9, 8, 0.5);
  z-index: 90;
  display: flex; align-items: stretch; justify-content: flex-start;
}
.drafts-sheet {
  background: var(--bg-1);
  width: min(440px, 100%);
  padding: 32px;
  height: 100vh; overflow-y: auto;
  animation: slide-in-l 460ms var(--ease-arch);
}
@keyframes slide-in-l { from { transform: translateX(-8%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drafts-sheet h2 { font-family: var(--font-display); font-size: 32px; margin: 0 0 8px; font-weight: 400; letter-spacing: -0.015em; }
.drafts-sheet .sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 32px; }
.drafts-list { display: flex; flex-direction: column; }
.draft-item { padding: 18px 0; border-bottom: var(--border-1); cursor: pointer; transition: opacity var(--dur-fast) var(--ease-arch); }
.draft-item:hover { opacity: 0.65; }
.draft-item .nm { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.005em; line-height: 1.1; margin-bottom: 4px; }
.draft-item .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); display: flex; gap: 16px; }
.draft-item .meta .qty { color: var(--fg-1); }

.drafts-empty {
  text-align: center; padding: 64px 16px;
}
.drafts-empty .glyph { width: 56px; height: 56px; margin: 0 auto 16px; opacity: 0.5; }
.drafts-empty .lede { font-family: var(--font-display); font-size: 22px; color: var(--fg-2); margin-bottom: 8px; }
.drafts-empty .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }

.drafts-cta { margin-top: 32px; }

/* ─────────── Toasts ─────────── */
.toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%);
  background: var(--sb-ink);
  color: var(--fg-inverse);
  padding: 14px 24px;
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  z-index: 200;
  animation: toast-in 320ms var(--ease-arch);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ─────────── Misc ─────────── */
.glyph-img { display: block; }
.dim { color: var(--fg-3); }
.cap { text-transform: uppercase; }
.mono { font-family: var(--font-mono); }
.upper { text-transform: uppercase; letter-spacing: 0.18em; }

/* responsive ─────────── */
/* ─────────── CONCEPTS ─────────── */
.concepts-index { padding: 32px 64px 192px; }
.concepts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.concept-card { cursor: pointer; display: block; }
.concept-card-media {
  aspect-ratio: 4 / 3; background: var(--sb-bone-deep);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.concept-card-cover { width: 100%; height: 100%; object-fit: cover; }
.concept-card-logo { max-width: 42%; max-height: 42%; object-fit: contain; opacity: 0.65; }
.concept-card-none { font-size: 40px; color: var(--fg-3); }
.concept-card-foot { display: flex; align-items: center; gap: 10px; padding-top: 14px; }
.concept-card-foot-logo { height: 18px; width: auto; max-width: 40px; object-fit: contain; }
.concept-card-name { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; color: var(--fg-1); flex: 1; }
.concept-card-arrow { color: var(--fg-3); font-size: 14px; transition: color var(--dur-fast) var(--ease-arch); }
.concept-card:hover .concept-card-arrow { color: var(--fg-1); }
.concept-card:hover .concept-card-media { filter: brightness(0.97); }

.concept-page { padding: 32px 64px 192px; max-width: 1100px; }
.concept-back {
  font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-3);
  background: transparent; border: 0; cursor: pointer; padding: 0; margin-bottom: 48px;
}
.concept-back:hover { color: var(--fg-1); }
/* product-page back arrow (same voice as the concept one, tighter spacing) */
.pp .concept-back { margin-bottom: 24px; }

/* ── concept product thumbnails — on the concept page and the PDP concept
      section. Same voice as the collection grid: the packshot floats on its
      own bone panel (no border boxes), name + colourway centred underneath. ── */
.cp-prods {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 32px 20px;
}
.cp-prod {
  background: transparent; border: 0; padding: 0; margin: 0;
  text-align: center; cursor: pointer; min-width: 0;
  transition: opacity var(--dur-fast) var(--ease-arch);
}
.cp-prod-thumb {
  display: block; aspect-ratio: 3 / 4; width: 100%;
}
.cp-prod-name {
  display: block; margin-top: 9px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  color: var(--fg-1); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-prod-cw {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-prod:hover { opacity: 0.82; }
.cp-prod.is-current { cursor: default; }
.cp-prod.is-current:hover { opacity: 1; }
.cp-prod.is-current .cp-prod-name { text-decoration: underline; text-underline-offset: 3px; }
.cp-prod.is-dragging { opacity: 0.35; }
/* bare variant (PDP concept row): thumbnails only, centred; a side-scrolling
   strip on phones */
.cp-prods.is-bare {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
}
.cp-prods.is-bare .cp-prod { flex: 0 0 108px; }
@media (max-width: 600px) {
  .cp-prods.is-bare {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px; padding: 0 16px;
    -webkit-overflow-scrolling: touch;
  }
  .cp-prods.is-bare::-webkit-scrollbar { display: none; }
  .cp-prods.is-bare .cp-prod { flex: 0 0 96px; }
}
.concept-pieces { margin-top: 64px; }
.concept-pieces .pdp-details-h { margin-bottom: 20px; }
/* freeform canvas sections on a concept page (blocks borrow the lookbook canvas) */
.concept-canvases { display: flex; flex-direction: column; gap: 28px; margin: 40px 0 48px; }
.concept-canvas { position: relative; }
@media (max-width: 600px) {
  .cp-prods { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 24px 14px; }
}
.concept-head { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
.concept-head-logo { height: 48px; width: auto; max-width: 96px; object-fit: contain; }
.concept-head h1 {
  font-family: var(--font-display); font-size: clamp(48px, 7vw, 104px);
  line-height: 0.9; letter-spacing: -0.025em; margin: 0; font-weight: 400;
}
.concept-desc { font-size: 18px; line-height: 1.65; color: var(--fg-2); max-width: 680px; margin-bottom: 56px; }
.concept-desc p + p { margin-top: 1em; }
.concept-gallery { display: flex; flex-direction: column; gap: 32px; }
.concept-gallery-item img { width: 100%; height: auto; display: block; }

/* ─────────────────────────── Responsive ─────────────────────────── */
@media (max-width: 980px) {
  /* Collapse the side order panel + rail; the order is reached via the ORDER tab.
     Zero out --panel-w too: the hero lookbook header is `right: var(--panel-w)`, so
     a stale 56/440px here would inset the fixed header (and its frosted blur band)
     from the right edge, leaving a hard-edged frosted box in the top-right corner. */
  .app, .app.is-collapsed { grid-template-columns: 1fr; --panel-w: 0px; }
  .panel, .panel-rail { display: none; }
  .main { border-right: 0; }
  /* keep the line-sheet's horizontal scroll aligned to the page padding (was -64px) */
  .lsheet-scroll { margin: 0 -32px; padding: 0 32px; }

  .gate { grid-template-columns: 1fr; }
  .gate-aside { min-height: 240px; padding: 32px; }
  .gate-form { padding: 32px; }

  .grid-page { padding: 28px 32px 120px; }
  .page-head { margin-bottom: 36px; padding-bottom: 24px; }
  /* Category pills scroll horizontally instead of overflowing the page. */
  .grid-toolbar .group { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .cover-stage { padding: 40px 32px; }
  .cover-deetz { padding: 40px 32px; grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .cover-letter { padding: 40px 32px; grid-template-columns: 1fr; gap: 24px; }
  .lb-head { padding: 40px 32px; }
  .concepts-index, .concept-page { padding: 28px 32px 120px; }
  .concepts-grid { grid-template-columns: repeat(2, 1fr); }

  .main-header { padding-left: 24px; padding-right: 24px; gap: 16px; }
  .main-header .nav-tabs { gap: 18px; }
  .main-header .meta-right { gap: 16px; }
  .main-header .meta-right .meta-pill:first-child { display: none; } /* hide retailer·season */
}

/* Panel-open tight band: the order panel is a fixed 440px, so between ~981px and
   ~1300px the main column is too narrow for the full-width header — nav + meta
   would overflow the column and collide with the open panel's own head. Drop the
   now-redundant units pill (the panel shows units) and let the nav-tabs wrap to
   their own full-width row beneath the wordmark + [ exit ] (the same move as the
   ≤600px mobile header), so every tab stays readable and nothing spills into the
   panel. The tabs keep a horizontal-scroll fallback for the very narrowest case. */
@media (min-width: 981px) and (max-width: 1300px) {
  .app:not(.is-collapsed) .main-header { flex-wrap: wrap; padding-left: 28px; padding-right: 24px; gap: 8px 20px; }
  .app:not(.is-collapsed) .main-header .meta-right { gap: 16px; margin-left: auto; }
  .app:not(.is-collapsed) .main-header .meta-right .meta-pill { display: none; }
  .app:not(.is-collapsed) .main-header .nav-tabs {
    order: 3; flex: 0 0 100%; width: 100%; min-width: 0; gap: 22px;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; white-space: nowrap; padding-bottom: 2px;
  }
  .app:not(.is-collapsed) .main-header .nav-tabs::-webkit-scrollbar { display: none; }
  .app:not(.is-collapsed) .main-header .nav-tab { flex: none; }
  .app:not(.is-collapsed) .main-header .nav-tab.is-active::after { bottom: -2px; }
}

@media (max-width: 600px) {
  /* Header → compact; all four tabs FIT the phone width on one row (smaller,
     tighter type spread edge-to-edge — no horizontal cut/scroll). */
  .main-header { flex-wrap: wrap; padding: 12px 16px; gap: 10px 14px; }
  .main-header .wm { font-size: 18px; }
  .main-header .meta-right { gap: 12px; }
  .main-header .meta-right .meta-pill:first-child { display: none; } /* hide retailer·season */
  .main-header .nav-tabs {
    order: 3; flex: 0 0 100%; width: 100%; gap: 8px;
    justify-content: space-between;
    overflow-x: auto; -webkit-overflow-scrolling: touch;   /* safety net only */
    white-space: nowrap; padding-bottom: 4px;
  }
  .main-header .nav-tab { flex: none; font-size: 10px; letter-spacing: 0.06em; }
  .main-header .nav-tab.is-active::after { bottom: -4px; }

  /* Cover */
  .cover-stage { padding: 24px 18px; min-height: 56vh; gap: 24px; }
  .cover-title { font-size: clamp(44px, 15vw, 78px); }
  .cover-mark-area { gap: 22px; }
  .cover-deetz { padding: 28px 18px; grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
  .cover-deetz .col-v { font-size: 22px; }
  .cover-letter { padding: 28px 18px; }
  .cover-letter .ltr-body { font-size: 15px; }

  /* Collection */
  .grid-page { padding: 20px 16px 96px; }
  .page-head { margin-bottom: 24px; padding-bottom: 18px; flex-wrap: wrap; gap: 8px; }
  /* Phone: floating bottom pill; the thumbnail-size slider is dropped for room.
     The category list scrolls VERTICALLY (up/down) and snaps firmly onto each
     category — the mandatory snap gives a tactile, haptic-like notch as you flick
     through. Top/bottom fade hints there are more categories above/below. */
  .grid-toolbar { left: 50%; gap: 10px; padding: 6px 10px; max-width: 94vw; }
  .grid-toolbar .grid-size { display: none; }
  .grid-toolbar-right { gap: 10px; }
  /* iOS-style category wheel: scroll up/down, the centred category becomes the
     filter (handled in Grid.jsx). No black active pill — selection is shown by
     being centred + bold; the top/bottom fade frames the wheel. Momentum + snap
     (no snap-stop) lets you fling far and ease onto a category. */
  .grid-toolbar .group {
    flex: none; width: 92px; flex-direction: column; align-items: stretch;
    height: 66px; padding: 24px 0; overflow-y: auto; overflow-x: hidden;
    scroll-snap-type: y proximity; overscroll-behavior: contain;
    touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* wider window so the categories above/below the centred one clearly peek —
       a visual cue that the list scrolls */
    -webkit-mask: linear-gradient(to bottom, transparent 2px, #000 30%, #000 70%, transparent calc(100% - 2px));
    mask: linear-gradient(to bottom, transparent 2px, #000 30%, #000 70%, transparent calc(100% - 2px));
  }
  .grid-toolbar .group::-webkit-scrollbar { display: none; }
  .grid-toolbar .group .filter-pill {
    flex: none; text-align: center; scroll-snap-align: center;
    padding: 3px 8px; font-size: 10px; letter-spacing: 0.1em;
    border: 0; background: none; color: var(--fg-3);
    transition: color 0.2s var(--ease-arch);
  }
  .grid-toolbar .group .filter-pill.is-active { background: none; border: 0; color: var(--fg-1); font-weight: 700; }

  /* Concepts on mobile → their own narrow vertical wheel (same scroll-to-select as
     categories), so the icons no longer sit in a row and cut off the categories. */
  .concept-filter {
    flex: none; width: 46px; flex-direction: column; align-items: center; gap: 4px;
    height: 66px; padding: 18px 0; margin-left: 6px; border-left: 1px solid rgba(22, 20, 15, 0.14); padding-left: 8px;
    overflow-y: auto; overflow-x: hidden; scroll-snap-type: y proximity; overscroll-behavior: contain;
    touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask: linear-gradient(to bottom, transparent 2px, #000 30%, #000 70%, transparent calc(100% - 2px));
    mask: linear-gradient(to bottom, transparent 2px, #000 30%, #000 70%, transparent calc(100% - 2px));
  }
  .concept-filter::-webkit-scrollbar { display: none; }
  .concept-pill { scroll-snap-align: center; min-width: 30px; height: 30px; }
  .concept-pill img { height: 20px; width: auto; }
  .concept-pill.concept-all .concept-abbr { font-size: 15px; color: var(--fg-3); }

  /* No hover-only quick-add on touch. */
  .gcard-quickadd { display: none; }

  /* Line sheet on phone → a simple stacked list (no side-scroll, no size-matrix
     quick-add, no hover tint). Tap a row to open the product to order. */
  .grid-page:has(.lsheet-scroll) { padding-bottom: 120px; }
  .lsheet-scroll { margin: 0; padding: 0; overflow-x: visible; }
  .lsheet-table { display: block; min-width: 0; }
  .lsheet-h { display: none; }
  .lsheet-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: var(--border-1); }
  .lsheet-row > * { padding: 0; border: 0; background: none !important; }
  .lsheet-row:hover > * { background: none !important; }   /* no hover mark on mobile */
  .lsheet-row .c-size, .lsheet-row .c-total, .lsheet-row .c-line { display: none; }
  .lsheet-row .c-thumb { flex: none; }
  .lsheet-row .c-thumb .photo { width: 58px; height: 78px; }
  .lsheet-row .c-name { flex: 1 1 auto; min-width: 0; }
  .lsheet-row .c-name .nm { font-size: 17px; }
  .lsheet-row .c-fabric { display: none; }
  .lsheet-row .c-price { flex: none; margin-left: auto; text-align: right; padding-right: 0; }
  .lsheet-foot { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .lsheet-foot .totals { gap: 28px; flex-wrap: wrap; }
  .lsheet-foot .totals .stat .val { font-size: 26px; }

  /* Concepts */
  .concepts-index, .concept-page { padding: 20px 16px 96px; }
  .concepts-grid { grid-template-columns: 1fr; gap: 20px; }
  .concept-head { gap: 14px; margin-bottom: 28px; }
  .concept-desc { font-size: 15px; margin-bottom: 40px; }
  .concept-back { margin-bottom: 28px; }

  /* Lookbook — stack the photo pair, tighten insets. Cap every look's height to
     the viewport so no single photo is taller than the screen. svh (SMALL
     viewport = browser chrome visible) — NOT dvh: dvh animates as iOS hides/
     shows the toolbar, so capped photos resized mid-scroll and the feed's
     height shifted under the finger (scroll "resisted" on direction change). */
  .lb-head { padding: 28px 18px; grid-template-columns: 1fr; gap: 14px; }
  body:not(.sb-zoomout) .lb-look .lb-frame { max-height: 86svh; }
  body:not(.sb-zoomout) .lb-look-grid.lb-is-pair { flex-direction: column; align-items: stretch; height: auto !important; gap: 0 !important; }
  body:not(.sb-zoomout) .lb-look-grid.lb-is-pair > .lb-frame { flex: none !important; width: 100% !important; height: min(var(--look-h, 70vh), 86svh); }
  body:not(.sb-zoomout) .lb-look-num { top: 14px; left: 14px; }
  .lb-drawer-wrap { bottom: 16px; right: 16px; }

  /* Product page → single column: packshots, spec, details */
  .pp { padding: 12px 16px 96px; }
  .pp-grid { grid-template-columns: 1fr; grid-template-areas: "media" "info"; gap: 18px; }
  /* packshots side-scroll as a snap carousel on phones (not stacked) */
  .pp-shots {
    flex-direction: row; gap: 10px;
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 0 16px;
    -webkit-overflow-scrolling: touch;
  }
  .pp-shots::-webkit-scrollbar { display: none; }
  .pp-shots .pp-frame { flex: 0 0 88%; scroll-snap-align: center; }
  .pp-shots .pp-frame-natural { display: flex; align-items: center; }
  .pp-shots .pp-frame-add { flex: 0 0 40%; height: auto; }
  .pp-info { position: static; max-height: none; }
  .pp-details-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Order review → 2-up stats, line items reflow as cards */
  .summary { padding: 28px 18px; }
  .summary .sub { margin-bottom: 36px; }
  .summary-meta-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
  .summary-meta-grid .stat .val { font-size: 30px; }
  .summary-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .summary-row .photo { flex: 0 0 auto; }
  .summary-row .idx { display: none; }
  .summary-row .nm { flex: 1 1 auto; font-size: 18px; }
  .summary-row .sizes { flex: 1 1 100%; }
  .summary-row .qty { margin-left: 0; }
  .summary-row .ttl { margin-left: auto; text-align: right; }
  .submit-bar { flex-direction: column; align-items: stretch; gap: 20px; }
  .submit-grand { gap: 16px; }
}

/* ============================================================
   storefront inline EDIT MODE (?edit=1)
   ============================================================ */
.app.is-edit { padding-top: 38px; }
.app.is-edit .main-header { top: 38px; }

/* floating edit-mode bar */
.sb-edit-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 38px; z-index: 1000;
  display: flex; align-items: center; gap: 14px; padding: 0 18px;
  background: var(--sb-ink); color: var(--sb-bone);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.sb-edit-bar-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #d98b5f; flex: 0 0 auto;
  animation: sbpulse 2s infinite;
}
@keyframes sbpulse {
  0% { box-shadow: 0 0 0 0 rgba(217,139,95,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(217,139,95,0); }
  100% { box-shadow: 0 0 0 0 rgba(217,139,95,0); }
}
.sb-edit-bar-title { font-weight: 600; letter-spacing: 0.22em; }
.sb-edit-bar-hint { color: rgba(236,232,224,0.6); text-transform: none; letter-spacing: 0.03em; }
.sb-edit-bar-status { margin-left: auto; color: #a9d3a0; text-transform: none; letter-spacing: 0.04em; }
.sb-edit-bar-status.is-error { color: #e7a3a3; }
.sb-edit-bar-exit {
  background: none; border: 1px solid rgba(236,232,224,0.4); color: var(--sb-bone);
  padding: 5px 12px; cursor: pointer; font: inherit; letter-spacing: 0.1em; text-transform: uppercase;
}
.sb-edit-bar-exit:hover { background: rgba(236,232,224,0.12); }

/* inline-editable text */
.sb-editable {
  outline: 1px dashed rgba(107,58,36,0.45); outline-offset: 2px;
  cursor: text; min-width: 14px; transition: outline-color 0.12s, background 0.12s;
}
.sb-editable:hover { outline-color: rgba(107,58,36,0.9); background: rgba(107,58,36,0.06); }
.sb-editable:focus { outline: 1.5px solid #6B3A24; background: rgba(107,58,36,0.08); }
.sb-editable-ml { display: block; }
.sb-editable:empty::before { content: attr(data-ph); color: var(--fg-3); opacity: 0.6; }

/* click / drop-to-replace photo overlay (fills its position:relative parent) */
.sb-img-edit {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(22,20,15,0.06); border: 1.5px dashed rgba(22,20,15,0.25);
  transition: background 0.12s, border-color 0.12s;
}
.sb-img-edit:hover, .sb-img-edit.is-over { background: rgba(22,20,15,0.5); border-color: #fff; }
.sb-img-edit-lbl {
  opacity: 0; pointer-events: none; transition: opacity 0.12s;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: rgba(22,20,15,0.82); padding: 8px 12px;
}
.sb-img-edit:hover .sb-img-edit-lbl, .sb-img-edit.is-over .sb-img-edit-lbl { opacity: 1; }

/* add-photo placeholder tiles (pdp + concept gallery) */
.pdp-photo-add { position: relative; min-height: 220px; }
.concept-gallery-add { position: relative; aspect-ratio: 3 / 4; background: var(--sb-bone-deep); }

/* (memory guard for phones now lives in LookCard — images unmount when far
   from the viewport. content-visibility was removed: iOS < 17 lacks
   contain-intrinsic-size and collapsed the whole book.) */

/* concept text-mark when no logo is uploaded yet (next to the PDP title) */
.pdp-series-chip {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-right: 0.34em; position: relative; top: -0.08em;
  min-width: 1.5em; height: 1.05em; padding: 0 0.28em; border: 1.5px solid var(--sb-ink);
  background: none; cursor: pointer; font-family: var(--font-mono);
  font-size: 0.32em; letter-spacing: 0.18em; color: var(--sb-ink); text-transform: uppercase;
}
.pdp-series-chip:hover { background: var(--sb-ink); color: var(--sb-bone); }

/* packshots at natural ratio — no letterbox gaps between shots */
.pp-frame-natural { aspect-ratio: auto; max-height: none; background: #ECE8E0; }
.pp-frame-img { width: 100%; height: auto; display: block; cursor: zoom-in; }

/* the spec rail always fits the viewport (scrolls inside itself if not) */
/* The spec rail scrolls WITH the page (no inner scroll trap — it was hiding
   ALSO IN). When it's taller than the viewport, PDP.jsx sets a negative
   sticky top so page-scrolling reveals its bottom, then it sticks there. */

/* size run — subtle, like size chips elsewhere (was oversized) */
.size-matrix .size-cell { padding: 6px 4px 7px; }
.size-matrix .size-cell .lbl { font-size: 9px; }
.size-matrix .size-cell input { font-size: 14px; padding: 2px 0; }
.size-matrix .stepper button { padding: 2px 0; font-size: 11px; }

/* details + concept live OUTSIDE the grid (sticky rail must end with it) */
.pp-concept { min-width: 0; padding-top: 26px; }
.pp-concept-card {
  display: flex; align-items: center; gap: 26px; width: 100%; text-align: left;
  border: 1px solid var(--line); background: var(--bg-2); cursor: pointer;
  padding: 26px 30px; font-family: var(--font-ui);
}
.pp-concept-card:hover { border-color: var(--sb-ink); }
.pp-concept-mark { flex: none; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }
.pp-concept-mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pp-concept-abbr {
  font-family: var(--font-mono); font-size: 26px; letter-spacing: 0.2em;
  border: 2px solid var(--sb-ink); padding: 14px 12px 14px 16px; text-transform: uppercase;
}
.pp-concept-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pp-concept-name { font-size: 22px; font-weight: 600; letter-spacing: 0.01em; }
.pp-concept-body { font-size: 14px; color: var(--fg-2); line-height: 1.6; max-width: 720px; }
.pp-concept-link { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--fg-3); text-transform: uppercase; }
.pp-concept-card:hover .pp-concept-link { color: var(--fg-1); }

/* tighter still — the size run should whisper */
.size-matrix .size-cell { gap: 3px; padding: 5px 4px 6px; }
.size-matrix .size-cell.is-active { padding: 4.5px 3.5px 5.5px; }
.size-matrix .size-cell input { font-size: 13px; }
.size-matrix .stepper button { font-size: 10px; padding: 1px 0; }

/* text on the images keeps its REAL size while the locked canvas scales —
   labels multiply by the inverse of the canvas scale (--lb-inv) */
.lb-photo-meta {
  font-size: calc(10px * var(--lb-inv, 1));
  padding: calc(5px * var(--lb-inv, 1)) calc(9px * var(--lb-inv, 1));
}
.lb-look-num { font-size: calc(var(--t-meta) * var(--lb-inv, 1)); }

/* PDP context pill — frosted, rounded (indicator language); pinned while
   browsing DETAILS / CONCEPT so the product stays present */
.pp-pill {
  position: fixed; top: 58px; left: 50%; transform: translate(-50%, -12px);
  z-index: 880; display: flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 7px; border: 1px solid rgba(22, 20, 15, 0.14);
  border-radius: 999px; cursor: pointer;
  background: rgba(236, 232, 224, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 32px rgba(22, 20, 15, 0.16);
  opacity: 0; pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.pp-pill.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.pp-pill-thumb {
  width: 30px; height: 38px; border-radius: 999px; flex: none;
  background-size: cover !important; border: 1px solid rgba(22, 20, 15, 0.1);
}
.pp-pill-name { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--sb-ink); white-space: nowrap; }
.pp-pill-idx { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--fg-3); }

/* mobile FEED view — desktop composition zoomed out; quiet = portrait (labels off) */
.lb-lock-canvas.is-feed-quiet .lb-photo-meta { display: none; }
.lb-feed-toggle {
  /* bottom-left, one row ABOVE the indicator pill (bottom 44px + ~52px tall):
     a wide indicator reaches this corner, so sharing its line half-buries the
     icon under the frosted pill */
  position: fixed; left: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 104px);
  z-index: 810; border: 1px solid rgba(22, 20, 15, 0.16); border-radius: 999px;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(236, 232, 224, 0.72);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  color: var(--sb-ink); box-shadow: 0 8px 26px rgba(22, 20, 15, 0.14);
}
.lb-feed-toggle svg { display: block; width: 17px; height: 17px; }

/* ── Canvas block (kind:'canvas') — freeform band of placed elements ──────── */
/* container-type so canvas text (cqw) scales WITH the band, like chapters */
.lb-canvas { position: relative; width: 100%; overflow: hidden; container-type: inline-size; }
.lb-cv-el { user-select: none; }
.lb-cv-el img { display: block; width: 100%; height: auto; }
.lb-cv-svg { display: block; width: 100%; }
.lb-cv-svg svg { display: block; width: 100%; height: auto; }
/* tint: every fill follows the element colour (single-colour logos/wordmarks) */
.lb-cv-svg.is-tinted svg, .lb-cv-svg.is-tinted svg * { fill: currentColor !important; }
.lb-cv-text { white-space: pre-wrap; overflow-wrap: break-word; }
/* svg stroke override (canvas elements): colour + width via custom props */
.lb-cv-svg.is-stroked svg, .lb-cv-svg.is-stroked svg * {
  stroke: var(--cv-stroke) !important;
  stroke-width: var(--cv-stroke-w) !important;
}
/* auto-discount: struck-through original price beside the discounted one */
.price-strike { text-decoration: line-through; color: var(--fg-3); margin-right: 7px; font-weight: 400; }
/* DTC size picker — picking a size IS choosing the item (tap on / off) */
.size-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.size-pick-btn {
  min-width: 54px; padding: 12px 14px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--fg-2);
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.size-pick-btn:hover { border-color: var(--sb-ink); color: var(--fg-1); }
.size-pick-btn.is-on { background: var(--sb-ink); color: var(--sb-bone); border-color: var(--sb-ink); }