/* WestOS factory page (public copy of the HYE prototype; one stylesheet for every factory).
   Paper, ink, blue, type and radii are the homepage's (css/option-story.css, css/opening.css).
   Printed things keep their own shapes and label type: hang tags, the ticket, the spec sheet,
   the contact sheet. Blue is WestOS: it marks what WestOS saw, and the actions that start work. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../assets/fonts/inter-var-latin.woff2') format('woff2');
}

:root {
  --paper: #f7f4ec;
  --paper-deep: #eee9dd;
  --card: #fffdf8;
  --white: #ffffff;
  --ink: #14222c;
  --ink-2: #596369;
  --ink-3: #8b9296;
  --line: #dedbd1;
  --rule: rgba(20, 34, 44, 0.1);
  --rule-strong: rgba(20, 34, 44, 0.22);
  --blue: #0866ef;
  --blue-deep: #0553c4;
  --blue-wash: rgba(8, 102, 239, 0.07);
  --blue-film: #5b9dff;
  --film: #0f1720;
  --film-2: #162231;
  --amber: #cf8a2e;
  --red: #c42b22;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --label: 'Archivo', 'Inter', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: clamp(44px, 7vw, 120px);
  --gut: clamp(18px, 3.4vw, 48px);
  --max: 1440px;
  --bar-h: 68px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .08  0 0 0 0 .13  0 0 0 0 .17  .26 0 0 0 -.1'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  font: 400 16px/1.55 var(--sans);
  letter-spacing: -0.006em;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
/* The page never scrolls sideways: `main` clips what slides in from its edge. */
main { overflow-x: clip; }
/* iPhone and iPad (every browser there is WebKit) clip at the root instead. There, a clip
   on `main` or on any section stops the strips a finger scrolls (the photo strip, the two
   tags, the rack) dead the moment the finger lifts, and with the rack's sway running cuts
   the drag short as well. Measured in the iOS simulator, 2026-10-06, same flick each
   time: the rack moved 175 px with a clip on `main`, 388 px with one on the other
   sections only, and 850 px or more with it on the root.
   Only there: with the clip on the root and none on `main`, Chrome on Android lays fixed
   things out (the sheets, the guide, the dock) as wide as the widest thing on the page,
   488 px on a 412 px screen, and they run off its right edge. */
@supports (-webkit-touch-callout: none) {
  main { overflow-x: visible; }
  html { overflow-x: hidden; overflow-x: clip; }
}
button { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; }
p, h1, h2, h3, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.riso-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Proof marks: filled = WestOS saw it, ring = HYE says it ───────────── */
.mk {
  position: relative;
  display: inline-block;
  flex: none;
  width: 0.56em;
  height: 0.56em;
  min-width: 8px;
  min-height: 8px;
  margin-left: 0.45em;
  border-radius: 50%;
  vertical-align: 0.1em;
  cursor: help;
}
.mk-seen { background: var(--blue); }
.mk-said { box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0.5; }
.mk[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 30;
  padding: 7px 10px 6px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font: 500 12px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.18s, transform 0.18s var(--ease);
}
.mk[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
.mk-said:hover { opacity: 1; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  --h: 50px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  height: var(--h);
  padding: 0 1.5em;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 500 15px/1 var(--sans);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover:not(:disabled) { background: var(--blue-deep); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover:not(:disabled) { background: #0a141b; }
.btn-line { border-color: rgba(20, 34, 44, 0.16); background: rgba(255, 255, 255, 0.6); }
.btn-line:hover:not(:disabled) { border-color: rgba(8, 102, 239, 0.35); color: var(--blue); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper:hover { background: #fff; }
.btn-ghost-light { border-color: rgba(255, 255, 255, 0.4); color: #fff; background: transparent; }
.btn-ghost-light:hover { border-color: #fff; }
.btn-sm { --h: 40px; padding: 0 1.15em; font-size: 14px; }
.btn-wide { width: 100%; }
.badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #fff;
  color: var(--blue);
  font: 700 11px/1 var(--sans);
}

/* ── Prototype strip ─────────────────────────────────────────────────────── */
.proto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px var(--gut);
  background: var(--film);
  color: rgba(247, 244, 236, 0.7);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.proto-switch { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.proto-switch button {
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.proto-switch button[aria-pressed='true'] { background: var(--paper); color: var(--ink); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--bar-h);
  padding: 0 var(--gut);
  background: rgba(247, 244, 236, 0.88);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.bar.is-scrolled { border-bottom-color: var(--rule); }
.bar-id { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.bar-logo { width: auto; height: 36px; }
.bar-place { color: var(--ink-2); font: 500 14px/1 var(--sans); }
.bar-proof {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  color: var(--blue);
  font: 500 14px/1 var(--sans);
  text-decoration: none;
}
.bar-proof .mk { margin: 0; cursor: pointer; }
.bar-actions { display: flex; gap: 10px; }
/* The language switch: the same two small links as the network page's. */
.lang-toggle { display: inline-flex; gap: 4px; }
.lang-toggle a { padding: 10px 5px; color: var(--ink-2); font: 800 12px/1 var(--sans); letter-spacing: 0.06em; text-decoration: none; }
.lang-toggle a:hover { color: var(--ink); }
.lang-toggle a[aria-current='true'] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }

/* ── Owner bar ───────────────────────────────────────────────────────────── */
.owner-bar { position: sticky; top: var(--bar-h); z-index: 39; background: var(--blue); color: #fff; }
.owner-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px var(--gut);
}
.owner-title { font: 400 15px/1.35 var(--sans); }
.owner-title b { margin-right: 0.6em; font-weight: 650; }
.owner-actions { display: flex; gap: 10px; flex: none; }
/* Always in reach: write to WestOS, and the guide again. */
.owner-help { display: flex; align-items: center; gap: 18px; flex: none; font: 500 14px/1 var(--sans); }
.owner-help a, .owner-help button { padding: 8px 0; border: 0; background: none; color: #fff; font: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 4px; cursor: pointer; }
.owner-help a:hover, .owner-help button:hover { text-decoration-color: #fff; }
.owner-bar .btn-blue { background: #fff; color: var(--blue); }
.owner-bar .btn-blue:hover:not(:disabled) { background: var(--paper); }
.owner-bar .btn-blue:disabled { opacity: 0.55; }
.owner-bar .badge { background: var(--blue); color: #fff; }

/* ── Layout helpers ──────────────────────────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.sec { padding-top: clamp(96px, 13vh, 168px); }
.sec-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(30px, 4vw, 52px);
  color: var(--ink-2);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sec-rule { flex: 1; height: 1px; background: var(--rule-strong); }
.h2 { font: 600 clamp(42px, 5.4vw, 84px)/1.02 var(--sans); letter-spacing: -0.058em; }
.lead { color: var(--ink-2); font: 400 clamp(17px, 1.45vw, 21px)/1.55 var(--sans); letter-spacing: -0.012em; }
.head-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px var(--gut);
  align-items: end;
}
.head-grid .h2 { grid-column: 1 / span 7; }
.head-grid .lead { grid-column: 8 / span 5; max-width: 36ch; }

/* ── Cover ───────────────────────────────────────────────────────────────── */
.cover {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 var(--gut);
  align-items: end;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(36px, 7vh, 88px) var(--gut) clamp(34px, 5.5vh, 64px);
}
.cover-id { grid-column: 1 / span 7; }
.cover-say { grid-column: 8 / span 5; padding-bottom: 0.4em; }
.kicker { color: var(--blue); font: 500 15px/1.4 var(--sans); letter-spacing: -0.005em; }
/* the factory's name is set like its label: condensed, heavy */
.cover-name {
  margin: 0.2em 0 0 -0.045em;
  font-family: var(--label);
  font-weight: 800;
  font-stretch: 64%;
  font-size: clamp(132px, 21.5vw, 330px);
  line-height: 0.74;
  letter-spacing: -0.012em;
}
.cover-line { font: 550 clamp(30px, 2.8vw, 44px)/1.07 var(--sans); letter-spacing: -0.052em; }
.cover-sub { margin-top: 0.8em; color: var(--ink-2); font: 400 clamp(16px, 1.3vw, 19px)/1.55 var(--sans); letter-spacing: -0.012em; }
.cover-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* the WestOS stamp: rubber-stamped over paper and photograph alike */
.stamp {
  position: absolute;
  right: calc(var(--gut) + 3%);
  bottom: -94px;
  z-index: 6;
  width: clamp(132px, 12.5vw, 184px);
  aspect-ratio: 1;
  color: var(--blue);
  mix-blend-mode: multiply;
  transform: rotate(-12deg);
  text-decoration: none;
  transition: transform 0.4s var(--spring);
}
.stamp:hover { transform: rotate(-8deg) scale(1.04); }
.stamp svg { width: 100%; height: 100%; overflow: visible; }

/* ── Opening photographs: the bottom of the opening panel, as on the homepage ── */
.opening {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  overflow: hidden;
  isolation: isolate;
}
.op {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 84vh;
  overflow: hidden;
  background: var(--paper-deep);
  cursor: zoom-in;
}
.op img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.op:hover img { transform: scale(1.025); }
.op figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  padding: 8px 12px 8px 10px;
  border-radius: 999px;
  background: rgba(247, 244, 236, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font: 500 13px/1 var(--sans);
}
.op:nth-child(1) figcaption { left: clamp(28px, 4vw, 64px); bottom: clamp(26px, 3.4vw, 52px); }
.op figcaption .mk { order: -1; margin: 0 8px 0 0; }

/* ── Ways: a rail and two hang tags ──────────────────────────────────────── */
.rail {
  position: relative;
  height: 4px;
  margin-top: clamp(56px, 7vw, 88px);
  border-radius: 2px;
  background: var(--ink);
}
.rail::before, .rail::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 6px;
  height: 20px;
  border-radius: 3px;
  background: var(--ink);
}
.rail::before { left: 0; }
.rail::after { right: 0; }
.tags {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(28px, 7vw, 120px);
}
.tag-hang {
  --drop: 0px;
  position: relative;
  margin-top: var(--drop);
  padding-top: 70px;
  transform-origin: 50% calc(-1 * var(--drop));
  filter: drop-shadow(0 26px 34px rgba(20, 34, 44, 0.12)) drop-shadow(0 2px 3px rgba(20, 34, 44, 0.07));
  transition: transform 0.9s var(--spring);
  opacity: 0;
}
.tag-hang::before {
  content: '';
  position: absolute;
  top: calc(-2px - var(--drop));
  left: 50%;
  z-index: 2;
  width: 1.5px;
  height: calc(102px + var(--drop));
  background: linear-gradient(var(--ink), var(--ink-2));
  transform: translateX(-50%);
}
.tag-hang:nth-child(2) { --drop: 26px; }
.tag-hang:hover { transform: rotate(-1.6deg); }
.tag-hang.in { opacity: 1; animation: swing 2.2s var(--ease) backwards; animation-delay: calc(var(--i) * 0.14s); }
@keyframes swing {
  0% { transform: rotate(9deg); }
  22% { transform: rotate(-5.5deg); }
  42% { transform: rotate(3deg); }
  60% { transform: rotate(-1.4deg); }
  78% { transform: rotate(0.5deg); }
  100% { transform: rotate(0); }
}
/* die-cut: chamfered shoulders, rounded bottom corners */
.tag {
  position: relative;
  container-type: inline-size;
  width: min(372px, 84vw);
  padding: 66px 34px 30px;
  background: var(--white);
  clip-path: polygon(24% 0, 76% 0, 100% 52px, 100% calc(100% - 14px), calc(100% - 1.9px) calc(100% - 7px), calc(100% - 7px) calc(100% - 1.9px), calc(100% - 14px) 100%, 14px 100%, 7px calc(100% - 1.9px), 1.9px calc(100% - 7px), 0 calc(100% - 14px), 0 52px);
}
.tag-hole {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 17px;
  height: 17px;
  margin-left: -8.5px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(20, 34, 44, 0.045);
}
.tag-eyebrow { text-align: center; color: var(--ink-2); font: 600 11px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; }
.tag-name { margin-top: 14px; text-align: center; font: 600 29px/1 var(--sans); letter-spacing: -0.05em; }
.tag-figure {
  margin-top: 26px;
  text-align: center;
  font-family: var(--label);
  font-weight: 800;
  font-stretch: 62%;
  font-size: min(112px, calc((100cqi - 68px) / (0.32 * var(--chars, 4))));
  line-height: 0.84;
  letter-spacing: -0.012em;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.tag-unit { margin-left: 0.14em; font-stretch: 78%; font-size: 0.3em; font-weight: 700; letter-spacing: 0; }
.tag-note {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  color: var(--ink-2);
  font: 500 12px/1.2 var(--mono);
  letter-spacing: 0.06em;
}
.tag-points { margin-top: 26px; border-top: 1.5px dashed var(--rule-strong); }
.tag-points li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0 11px;
  border-bottom: 1px solid var(--rule);
  font: 400 15px/1.4 var(--sans);
  letter-spacing: -0.012em;
}
.tag-sizes-label { margin-top: 18px; color: var(--ink-3); font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.tag-sizes { display: flex; justify-content: space-between; gap: 4px; margin-top: 10px; color: var(--ink-2); font: 600 10.5px/1 var(--mono); }
.tag-sizes span { flex: 1; padding: 6px 0 5px; border: 1px solid var(--rule-strong); border-radius: 4px; text-align: center; }
.tag-cta { width: 100%; margin-top: 26px; }
.tag-switch { display: none; }

/* ── The rack: garments hang from a rail; drag it, and they swing ────────── */
.rack-controls { display: flex; gap: 8px; justify-content: flex-end; grid-column: 9 / -1; }
.round {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(20, 34, 44, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.round:hover { border-color: rgba(8, 102, 239, 0.35); color: var(--blue); background: #fff; }
.round svg { width: 18px; height: 18px; }
.rack-body { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.rack-body::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ink);
}
.rack-track {
  display: flex;
  gap: clamp(18px, 2.2vw, 32px);
  padding: 0 var(--gut) 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.rack-track::-webkit-scrollbar { display: none; }
@media (pointer: fine) {
  .rack-track { cursor: grab; }
}
.rack-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.rack-track.is-dragging * { pointer-events: none; }
.rack-track img { -webkit-user-drag: none; user-select: none; }
.piece { position: relative; flex: 0 0 clamp(270px, 25vw, 372px); scroll-snap-align: start; }
/* hook and garment swing together about the point where the hook meets the rail */
.hanger { position: relative; padding-top: 40px; transform-origin: 50% 8.5px; }
.hook {
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 42px;
  color: var(--ink);
  transform: translateX(-50%);
}
.hook svg { display: block; width: 100%; height: 100%; overflow: visible; }
.piece-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--paper-deep);
  cursor: zoom-in;
}
@media (pointer: fine) {
  .piece-photo { cursor: inherit; }
}
.piece-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.piece:hover .piece-photo img { transform: scale(1.03); }
.piece.is-on .piece-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px var(--blue);
  pointer-events: none;
}
.piece-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.piece-kind {
  padding: 5px 8px 4px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.piece-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.piece-line { color: var(--ink-2); font: 600 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
/* Stock: what a finished piece costs as it is, and when it leaves */
.piece-stock {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--paper-deep);
  color: var(--ink);
  font: 500 14px/1.4 var(--sans);
  letter-spacing: -0.01em;
  text-align: left;
}
button.piece-stock { cursor: pointer; }
button.piece-stock:hover { background: #eef4ff; }
.piece-stock b { font-weight: 600; }
.piece-stock small { display: block; margin-top: 3px; color: var(--ink-2); font: 500 9.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.piece-stock .mk { flex: none; margin-left: auto; }
.st-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--blue); }
.piece-stock.is-order .st-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--blue); }
.piece-stock.is-out .st-dot { background: var(--rule-strong); }
.piece-stock.is-out { color: var(--ink-2); }
.piece-name { margin-top: 12px; font: 600 23px/1.08 var(--sans); letter-spacing: -0.045em; }
.piece-note { margin-top: 6px; color: var(--ink-2); font: 400 15.5px/1.45 var(--sans); letter-spacing: -0.012em; }
.piece-add {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: 500 14.5px/1 var(--sans);
  cursor: pointer;
}
.piece-add::before {
  content: '';
  width: 22px;
  height: 22px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
}
.piece-add[aria-pressed='true']::before {
  background: var(--blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M6.5 11.3l3 3 6-6.3' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 100% no-repeat;
}
.piece-more .piece-photo { cursor: inherit; }
.piece-more .piece-photo img { filter: brightness(0.5) saturate(0.85); }
.more-over {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  color: #fff;
}
.more-count { font-family: var(--label); font-weight: 800; font-stretch: 62%; font-size: 112px; line-height: 0.82; }
.more-text { display: flex; align-items: center; margin: 12px 0 22px; font: 500 19px/1.3 var(--sans); letter-spacing: -0.02em; }
.more-text .mk { color: #fff; }
.more-over .btn { align-self: flex-start; }

/* ── Who makes what ──────────────────────────────────────────────────────── */
.legend { display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--ink-2); font: 500 13px/1.2 var(--sans); }
.legend span { display: inline-flex; align-items: center; gap: 10px; }
.legend .mk { margin: 0; cursor: default; }
.lg-own, .lg-partner { display: inline-block; width: 28px; height: 0; border-top: 2px solid var(--ink); }
.lg-partner { border-top-style: dashed; }
.path-line {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: clamp(48px, 6vw, 80px);
}
.stop { position: relative; padding: 0 22px 0 0; }
.stop::before {
  content: '';
  position: absolute;
  top: 111px;
  left: 0;
  right: 0;
  border-top: 2px solid var(--ink);
}
.stop-partner::before { border-top-style: dashed; border-top-color: var(--ink-2); }
.stop:last-child::before { right: 22px; }
/* the drawing stands on the production line and prints in with the scroll:
   black plate first, then the blue plate slides into (almost) register */
.stop-art { height: 120px; margin: 0 0 24px 30px; view-timeline-name: --print; }
.art { display: block; width: auto; height: 100%; max-width: 100%; overflow: visible; }
.art .plate-blue { mix-blend-mode: multiply; transform: translate(1.6px, -1.2px); }
.stop-partner .art .plate-ink { opacity: 0.88; }
@supports (animation-timeline: view()) {
  .art .plate-ink { animation: print-ink linear both; animation-timeline: --print; animation-range: entry 0% cover 34%; }
  .art .plate-blue { animation: print-blue linear both; animation-timeline: --print; animation-range: entry 28% cover 56%; }
}
@keyframes print-ink { from { opacity: 0; } to { opacity: 1; } }
@keyframes print-blue {
  from { opacity: 0; transform: translate(13px, -10px); }
  to { opacity: 1; transform: translate(1.6px, -1.2px); }
}
.stop-node {
  position: absolute;
  top: 103px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
}
.stop-partner .stop-node { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink-2); }
.stop-seen .stop-node { background: var(--blue); box-shadow: 0 0 0 5px var(--paper), 0 0 0 6.5px var(--blue); }
.stop-no { color: var(--ink-3); font: 500 11px/1 var(--mono); letter-spacing: 0.14em; }
.stop-step { margin-top: 10px; font: 600 21px/1.08 var(--sans); letter-spacing: -0.045em; }
.stop-who {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 7px 3px;
  border-radius: 5px;
  background: var(--ink);
  color: #fff;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.stop-partner .stop-who { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.stop-text { margin-top: 12px; color: var(--ink-2); font: 400 15px/1.5 var(--sans); letter-spacing: -0.01em; }
.stop-frame {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: 500 13px/1 var(--sans);
  cursor: zoom-in;
}
.stop-frame img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 1.5px var(--blue); }

/* ── The details: a spec sheet, with a swatch clipped to it ──────────────── */
.details {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px var(--gut);
}
.details-side { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--bar-h) + 40px); }
.details-about { margin-top: 26px; font: 400 clamp(18px, 1.5vw, 21px)/1.55 var(--sans); letter-spacing: -0.015em; }
.details-side .legend { flex-direction: column; margin-top: 30px; }
.spec-sheet {
  position: relative;
  grid-column: 6 / span 7;
  align-self: start;
  padding: 28px 32px 30px;
  border-radius: var(--r);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(20, 34, 44, 0.05), 0 26px 50px rgba(20, 34, 44, 0.07);
}
.ss-head { display: inline-grid; grid-template-columns: repeat(3, auto); overflow: hidden; border: 1.5px solid var(--ink); border-radius: var(--r-sm); }
.ss-head div { padding: 10px 16px 11px 12px; border-right: 1.5px solid var(--ink); }
.ss-head div:last-child { border-right: 0; }
.ss-head span { display: block; color: var(--ink-2); font: 500 9.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.ss-head b { display: block; margin-top: 7px; font: 600 14.5px/1.1 var(--sans); letter-spacing: -0.02em; }
.spec-list { margin-top: 38px; }
.spec-list .spec:first-child { border-top: 1.5px solid var(--ink); }
.spec {
  display: grid;
  grid-template-columns: minmax(110px, 170px) 1fr 24px;
  gap: 18px;
  padding: 20px 0 19px;
  border-top: 1px solid var(--rule);
}
.spec-k { padding-top: 5px; color: var(--ink-2); font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.spec-v { font: 400 18px/1.45 var(--sans); letter-spacing: -0.02em; }
.spec-m { padding-top: 4px; text-align: right; }
.spec-m .mk { margin: 0; }
.swatch { position: absolute; top: -26px; right: 30px; width: 116px; margin: 0; transform: rotate(4deg); cursor: zoom-in; }
.swatch-cloth {
  aspect-ratio: 1;
  overflow: hidden;
  background: #9fb2cf var(--swatch-img, none) var(--swatch-pos, 50% 50%) / 500% auto no-repeat;
  filter: drop-shadow(0 10px 14px rgba(20, 34, 44, 0.2));
  clip-path: polygon(0.0% 0.0%,4.5% 3.2%,9.1% 0.0%,13.6% 3.2%,18.2% 0.0%,22.7% 3.2%,27.3% 0.0%,31.8% 3.2%,36.4% 0.0%,40.9% 3.2%,45.5% 0.0%,50.0% 3.2%,54.5% 0.0%,59.1% 3.2%,63.6% 0.0%,68.2% 3.2%,72.7% 0.0%,77.3% 3.2%,81.8% 0.0%,86.4% 3.2%,90.9% 0.0%,95.5% 3.2%,100.0% 0.0%,96.8% 4.5%,100.0% 9.1%,96.8% 13.6%,100.0% 18.2%,96.8% 22.7%,100.0% 27.3%,96.8% 31.8%,100.0% 36.4%,96.8% 40.9%,100.0% 45.5%,96.8% 50.0%,100.0% 54.5%,96.8% 59.1%,100.0% 63.6%,96.8% 68.2%,100.0% 72.7%,96.8% 77.3%,100.0% 81.8%,96.8% 86.4%,100.0% 90.9%,96.8% 95.5%,100.0% 100.0%,95.5% 96.8%,90.9% 100.0%,86.4% 96.8%,81.8% 100.0%,77.3% 96.8%,72.7% 100.0%,68.2% 96.8%,63.6% 100.0%,59.1% 96.8%,54.5% 100.0%,50.0% 96.8%,45.5% 100.0%,40.9% 96.8%,36.4% 100.0%,31.8% 96.8%,27.3% 100.0%,22.7% 96.8%,18.2% 100.0%,13.6% 96.8%,9.1% 100.0%,4.5% 96.8%,0.0% 100.0%,3.2% 95.5%,0.0% 90.9%,3.2% 86.4%,0.0% 81.8%,3.2% 77.3%,0.0% 72.7%,3.2% 68.2%,0.0% 63.6%,3.2% 59.1%,0.0% 54.5%,3.2% 50.0%,0.0% 45.5%,3.2% 40.9%,0.0% 36.4%,3.2% 31.8%,0.0% 27.3%,3.2% 22.7%,0.0% 18.2%,3.2% 13.6%,0.0% 9.1%,3.2% 4.5%);
}
.clip { position: absolute; top: -20px; left: 24px; z-index: 2; width: 16px; height: 44px; color: #6b6e74; transform: rotate(-5deg); }
.swatch figcaption { margin-top: 8px; white-space: nowrap; text-align: center; color: var(--ink-2); font: 500 9.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }

/* ── The visit: a contact sheet ──────────────────────────────────────────── */
.visit {
  margin-top: clamp(96px, 13vh, 168px);
  padding: clamp(80px, 11vh, 140px) 0 clamp(72px, 9vh, 120px);
  border-radius: var(--r-xl);
  background: var(--film);
  color: #eef1f4;
}
.visit .sec-head { color: rgba(238, 241, 244, 0.6); }
.visit .sec-rule { background: rgba(238, 241, 244, 0.22); }
.visit .lead { color: rgba(238, 241, 244, 0.72); }
.visit .h2 { color: #fff; }
.film { max-width: var(--max); margin: clamp(44px, 6vw, 72px) auto 0; padding: 0 var(--gut); }
.film-strip { padding: 16px 18px 18px; border-radius: var(--r); background: var(--film-2); }
.sprockets {
  height: 9px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='9'><rect x='5' y='0' width='12' height='9' rx='2' fill='%232b3a4c'/></svg>");
  background-repeat: repeat-x;
}
.edge {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 2px 12px;
  color: var(--amber);
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.28em;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0.9;
}
.edge-bottom { margin: 12px 2px 10px; }
.frames { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 10px; }
.frame { display: flex; flex-direction: column; min-width: 0; }
.frame.wide { grid-column: span 2; }
.frame-img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #22303f;
  cursor: zoom-in;
}
.frame.wide .frame-img { aspect-ratio: auto; flex: 1; min-height: 0; }
.frame-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: opacity 0.3s; }
.frames:hover .frame-img img { opacity: 0.72; }
.frames .frame-img:hover img { opacity: 1; }
.ring { position: absolute; inset: -7% -6%; width: 112%; height: 114%; color: var(--blue-film); pointer-events: none; overflow: visible; }
.ring path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.visit.in .ring path { animation: draw 1.4s var(--ease) forwards; animation-delay: 0.6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.frame figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 9px; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.frame-no { color: var(--amber); }
.frame-label { color: rgba(238, 241, 244, 0.8); }
.frame-proof { color: var(--blue-film); }
.visit-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
  color: rgba(238, 241, 244, 0.62);
  font: 500 13px/1.4 var(--sans);
}
.visit-foot .mk { margin: 0 10px 0 0; background: var(--blue-film); }

/* ── Start: the request and its ticket ───────────────────────────────────── */
.start-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--gut); align-items: start; }
.start-form { grid-column: 1 / span 7; }
.start-form .lead { margin-top: 20px; max-width: 34ch; }
.req { margin-top: clamp(36px, 4.5vw, 56px); }
.q { padding: 16px 0 34px; border-top: 1px solid var(--rule-strong); }
.q legend { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; font: 600 23px/1.2 var(--sans); letter-spacing: -0.04em; }
.q-no { color: var(--ink-3); font: 500 12px/1 var(--mono); letter-spacing: 0.1em; }
.progs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prog {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.prog:hover { border-color: rgba(8, 102, 239, 0.35); }
.prog[aria-pressed='true'] { border-color: transparent; box-shadow: inset 0 0 0 2px var(--blue); }
.prog-eyebrow { color: var(--ink-2); font: 600 10.5px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; }
.prog-name { font: 600 23px/1.05 var(--sans); letter-spacing: -0.045em; }
.prog-fig { color: var(--ink-2); font: 400 15px/1.3 var(--sans); }
.prog[aria-pressed='true']::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M6.5 11.3l3 3 6-6.3' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 100% no-repeat;
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(20, 34, 44, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font: 500 14.5px/1 var(--sans);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.chip:hover { border-color: rgba(8, 102, 239, 0.35); color: var(--blue); }
.chip[aria-pressed='true'] { border-color: var(--ink); background: var(--ink); color: #fff; }
.refs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.ref {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px 5px 5px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  font: 500 14px/1 var(--sans);
}
.ref img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.ref button { width: 24px; height: 24px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); cursor: pointer; line-height: 1; }
.ref-browse { padding: 0; border: 0; background: none; color: var(--blue); font: 500 14.5px/1 var(--sans); cursor: pointer; }
.field { display: block; }
.field + .field, .fields-2 + .field { margin-top: 18px; }
.fields-2 .field + .field, .qty-row .field + .field { margin-top: 0; }
.field-label { display: block; color: var(--ink-2); font: 500 13px/1 var(--sans); }
.field input, .field textarea, .field select {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  color: var(--ink);
  font: 400 18px/1.35 var(--sans);
  letter-spacing: -0.02em;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.field textarea { resize: vertical; min-height: 110px; font-size: 17px; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: transparent; box-shadow: inset 0 0 0 2px var(--blue); }
.field input::placeholder, .field textarea::placeholder { color: rgba(20, 34, 44, 0.32); }
.field-hint { display: block; margin-top: 10px; color: var(--ink-2); font-size: 14px; }
.field-hint.is-low { color: var(--blue); }
.fields-2, .qty-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.attach { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--blue); font: 500 14.5px/1 var(--sans); cursor: pointer; }
.attach::before {
  content: '';
  width: 22px;
  height: 22px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
}
.files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.files li { padding: 7px 11px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 12.5px/1 var(--mono); }
.form-error { margin-top: 14px; color: var(--red); font-size: 15px; }

.ticket-wrap { grid-column: 9 / span 4; position: sticky; top: calc(var(--bar-h) + 28px); }
.ticket {
  position: relative;
  padding: 30px 28px 26px;
  border-radius: var(--r);
  background: var(--white);
  font-family: var(--mono);
  filter: drop-shadow(0 24px 40px rgba(20, 34, 44, 0.09)) drop-shadow(0 1px 2px rgba(20, 34, 44, 0.07));
  -webkit-mask:
    radial-gradient(circle 6px at 8px 0, transparent 5.5px, #000 6px) top left / 16px 51% repeat-x,
    radial-gradient(circle 6px at 8px 100%, transparent 5.5px, #000 6px) bottom left / 16px 51% repeat-x;
  mask:
    radial-gradient(circle 6px at 8px 0, transparent 5.5px, #000 6px) top left / 16px 51% repeat-x,
    radial-gradient(circle 6px at 8px 100%, transparent 5.5px, #000 6px) bottom left / 16px 51% repeat-x;
}
.t-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.t-state { color: var(--ink-3); }
.t-to { margin-top: 18px; font: 600 25px/1.05 var(--sans); letter-spacing: -0.045em; }
.t-via { margin-top: 8px; color: var(--ink-2); font-size: 12px; letter-spacing: 0.04em; }
.t-rule { height: 0; margin: 20px 0 6px; border-top: 1.5px dashed var(--rule-strong); }
.t-row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 9px 0; font-size: 13px; line-height: 1.45; }
.t-row dt { padding-top: 2px; color: var(--ink-3); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.t-row dd { color: var(--ink); overflow-wrap: anywhere; }
.t-row dd.is-empty { color: rgba(20, 34, 44, 0.28); }
.t-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.t-thumbs img { width: 38px; height: 50px; object-fit: cover; border-radius: 4px; }
.t-send { width: 100%; margin-top: 22px; }
.t-fine { margin-top: 14px; color: var(--ink-3); font-size: 11px; line-height: 1.5; letter-spacing: 0.02em; }
.t-done { margin-top: 18px; font: 500 17px/1.45 var(--sans); letter-spacing: -0.02em; }
.t-stamp { position: absolute; top: 88px; right: 18px; width: 128px; color: var(--blue); mix-blend-mode: multiply; transform: rotate(-14deg); pointer-events: none; }
.t-stamp.slam, .done-stamp.slam { animation: slam 0.55s var(--spring) both; }
@keyframes slam {
  0% { opacity: 0; transform: rotate(-20deg) scale(1.8); filter: blur(3px); }
  70% { opacity: 1; transform: rotate(-13deg) scale(0.96); filter: blur(0); }
  100% { opacity: 1; transform: rotate(-14deg) scale(1); }
}

/* ── Footer: the back cover. HYE's mark and WestOS's stamp sign it off ───── */
.foot {
  margin-top: clamp(96px, 13vh, 160px);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--film);
  color: #eef1f4;
}
.foot-in {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px var(--gut);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 104px) var(--gut) clamp(48px, 6vw, 72px);
}
.foot-id { grid-column: 1 / span 4; }
.foot-logo { width: auto; height: clamp(88px, 9vw, 124px); filter: invert(1) drop-shadow(0 0 18px rgba(238, 241, 244, 0.2)); }
.foot-where { margin-top: 20px; color: rgba(238, 241, 244, 0.6); font: 500 14px/1.3 var(--sans); }
.foot-nav { grid-column: 5 / span 5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--gut); border-top: 1px solid rgba(238, 241, 244, 0.16); }
.foot-nav a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0 14px;
  border-bottom: 1px solid rgba(238, 241, 244, 0.16);
  color: #fff;
  font: 500 18px/1.2 var(--sans);
  letter-spacing: -0.025em;
  text-decoration: none;
  transition: color 0.2s;
}
.foot-nav a span { color: var(--amber); font: 500 11px/1 var(--mono); letter-spacing: 0.12em; }
.foot-nav a:hover { color: var(--blue-film); }
.foot-stamp {
  grid-column: 10 / span 3;
  justify-self: end;
  width: clamp(120px, 11vw, 158px);
  aspect-ratio: 1;
  color: var(--blue-film);
  transform: rotate(-10deg);
  transition: transform 0.4s var(--spring);
}
.foot-stamp:hover { transform: rotate(-6deg) scale(1.04); }
.foot-stamp svg { width: 100%; height: 100%; overflow: visible; }
.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px var(--gut) calc(26px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(238, 241, 244, 0.14);
  color: rgba(238, 241, 244, 0.62);
  font: 500 13px/1.4 var(--sans);
}
.wordmark { color: #fff; font: 800 19px/1 var(--sans); letter-spacing: -0.04em; }
.wordmark span { color: var(--blue-film); }
.foot-page { display: flex; align-items: center; gap: 10px; }
.foot-key { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-key span { display: inline-flex; align-items: center; gap: 9px; }
.foot-key .mk { margin: 0; cursor: default; }
.foot-key .mk-seen { background: var(--blue-film); }
.foot-key .mk-said { color: #eef1f4; opacity: 0.7; }
.foot-links { display: flex; gap: 22px; }
.foot-links a { color: #fff; text-decoration: none; }
.foot-links a:hover { color: var(--blue-film); }

/* ── Mobile dock ─────────────────────────────────────────────────────────── */
.dock { display: none; }

/* ── Sheets, lightbox, popover, toast ────────────────────────────────────── */
.sheet { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; }
/* While a sheet is open the page behind it does not scroll. Without this a phone gives
   the finger's swipe to the page, and the sheet only twitches. */
html:has(.sheet.is-open), html:has(.sheet.is-open) body { overflow: hidden; }
.sheet-scrim { position: absolute; inset: 0; touch-action: none; background: rgba(15, 23, 32, 0.36); opacity: 0; transition: opacity 0.35s; }
.sheet-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(500px, 100%);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 24px 0 0 24px;
  background: var(--paper);
  box-shadow: -30px 0 60px rgba(15, 23, 32, 0.14);
  transform: translateX(104%);
  transition: transform 0.5s var(--ease);
}
.sheet.is-open .sheet-scrim { opacity: 1; }
.sheet.is-open .sheet-panel { transform: none; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 28px 0; }
.sheet-head h2 { font: 600 32px/1 var(--sans); letter-spacing: -0.05em; }
.x { position: relative; width: 44px; height: 44px; flex: none; border: 1px solid rgba(20, 34, 44, 0.16); border-radius: 50%; background: rgba(255, 255, 255, 0.6); cursor: pointer; }
.x::before, .x::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 1.5px; background: var(--ink); }
.x::before { transform: translate(-50%, -50%) rotate(45deg); }
.x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sheet-body { position: relative; padding: 18px 28px 32px; }
.sheet-lead { margin-bottom: 26px; color: var(--ink-2); font: 400 17px/1.55 var(--sans); letter-spacing: -0.012em; }
.sheet-body .btn-wide { margin-top: 26px; }
.fine { margin-top: 12px; color: var(--ink-3); font: 500 12px/1.5 var(--sans); }
.done { padding: 30px 28px; }
.done-stamp { width: 150px; color: var(--blue); mix-blend-mode: multiply; transform: rotate(-12deg); }
.done h3 { margin-top: 28px; font: 600 30px/1.05 var(--sans); letter-spacing: -0.05em; }
.done p { margin-top: 12px; color: var(--ink-2); font: 400 17px/1.55 var(--sans); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  align-items: center;
  background: rgba(15, 23, 32, 0.97);
  color: #eef1f4;
  opacity: 0;
  transition: opacity 0.3s;
}
.lightbox.is-open { opacity: 1; }
.lb-fig { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 18px; max-height: 100vh; padding: 56px 0 28px; }
.lb-fig img { max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; border-radius: 10px; }
.lb-cap { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px; max-width: 70ch; text-align: center; font: 500 11px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.lb-cap .lb-no { color: var(--amber); }
.lb-cap .lb-note { width: 100%; color: rgba(238, 241, 244, 0.78); font: 400 17px/1.45 var(--sans); letter-spacing: -0.01em; text-transform: none; }
.lb-cap .lb-proof { color: var(--blue-film); }
.lb-nav, .lb-close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(238, 241, 244, 0.3);
  border-radius: 50%;
  background: transparent;
  color: #eef1f4;
  cursor: pointer;
  justify-self: center;
}
.lb-nav:hover, .lb-close:hover { border-color: #fff; }
.lb-nav svg { width: 18px; height: 18px; }
.lb-prev { grid-column: 1; grid-row: 1; }
.lb-next { grid-column: 3; grid-row: 1; }
.lb-close { position: absolute; top: 18px; right: 18px; }
.lb-close::before, .lb-close::after { content: ''; position: absolute; width: 16px; height: 1.5px; background: currentColor; }
.lb-close::before { transform: rotate(45deg); }
.lb-close::after { transform: rotate(-45deg); }

.pop {
  position: absolute;
  z-index: 70;
  width: min(340px, calc(100vw - 32px));
  padding: 18px 18px 16px;
  border-radius: var(--r);
  background: var(--white);
  box-shadow: 0 24px 60px rgba(15, 23, 32, 0.2), 0 0 0 1px var(--rule);
}
.pop-title { display: flex; align-items: center; gap: 10px; color: var(--blue); font: 600 13px/1 var(--sans); }
.pop-title .mk { margin: 0; }
.pop-text { margin-top: 10px; color: var(--ink-2); font: 400 15px/1.5 var(--sans); }
.pop textarea { width: 100%; margin-top: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: 400 15px/1.4 var(--sans); resize: vertical; }
.pop textarea:focus { outline: 0; border-color: transparent; box-shadow: inset 0 0 0 2px var(--blue); }
.pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 95;
  max-width: calc(100vw - 32px);
  padding: 13px 18px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 500 14px/1.3 var(--sans);
  text-align: center;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.35s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* The fingerprint for next time (page.js offerFingerprint): one white card above the page. */
.fp-offer {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 94;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: min(420px, calc(100vw - 32px));
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(20, 34, 44, 0.14);
  transform: translateX(-50%);
}
.fp-icon { flex: none; width: 26px; height: 26px; margin-top: 2px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fp-body { min-width: 0; }
.fp-title { margin: 0; font: 600 16px/1.3 var(--sans); }
.fp-text { margin: 6px 0 0; color: var(--ink-2); font: 400 14px/1.45 var(--sans); }
.fp-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
/* Above the phone's tab bar in the console and the home. */
@media (max-width: 999px) { body[data-console] > .fp-offer, body[data-wh] > .fp-offer { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }

/* ── Owner: the same page, editable in place ─────────────────────────────── */
body[data-as='owner'] [data-edit] {
  border-radius: 4px;
  outline: 1.5px dashed rgba(8, 102, 239, 0.45);
  outline-offset: 3px;
  cursor: text;
  transition: outline-color 0.15s, background-color 0.15s;
}
body[data-as='owner'] [data-edit]:hover { outline-color: var(--blue); background: var(--blue-wash); }
body[data-as='owner'] [data-edit][contenteditable='true'],
body[data-as='owner'] [data-edit][contenteditable='plaintext-only'] {
  outline: 2px solid var(--blue);
  background: #fff;
  box-shadow: 0 0 0 6px var(--blue-wash);
}
body[data-as='owner'] .is-pending { background: rgba(8, 102, 239, 0.1); }
body[data-as='owner'] [data-lock] { cursor: pointer; }
body[data-as='owner'] [data-lock]:not(.stamp):not(.foot-stamp):hover { outline: 1.5px solid rgba(8, 102, 239, 0.3); outline-offset: 3px; border-radius: 4px; }
.owner-only { display: none !important; }
body[data-as='owner'] .owner-only { display: revert !important; }
body[data-as='owner'] .buyer-only { display: none !important; }
.edit-tools {
  position: absolute;
  z-index: 70;
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 12px 30px rgba(15, 23, 32, 0.25);
}
.edit-tools button { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: 500 13px/1 var(--sans); cursor: pointer; }
.edit-tools .is-primary { background: var(--blue); }
.own-tools { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 6px; justify-content: space-between; }
.own-tools button { height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(247, 244, 236, 0.94); color: var(--ink); font: 500 12.5px/1 var(--sans); cursor: pointer; }
.own-tools .own-move { width: 34px; padding: 0; font-size: 17px; }
.own-tools .own-grow { flex: 1; }
.piece.is-hidden .piece-photo img { opacity: 0.35; filter: grayscale(1); }
.hidden-flag { position: absolute; top: 12px; left: 12px; padding: 5px 8px 4px; border-radius: 6px; background: var(--ink); color: #fff; font: 600 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.add-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 2px dashed rgba(8, 102, 239, 0.45);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.4);
  color: var(--blue);
  font: 600 21px/1.1 var(--sans);
  letter-spacing: -0.04em;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.add-tile:hover { border-color: var(--blue); background: rgba(255, 255, 255, 0.75); }
.add-tile small { max-width: 18ch; color: var(--ink-2); font: 400 15px/1.4 var(--sans); letter-spacing: -0.01em; text-align: center; }
.plus {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) center / 22px 2.5px no-repeat,
    linear-gradient(#fff, #fff) center / 2.5px 22px no-repeat,
    var(--blue);
}
.change-list { border-top: 1px solid var(--rule); }
.change-list li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.change-list .c-label { color: var(--ink-2); font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.change-list .c-from { margin-top: 6px; color: var(--ink-3); font-size: 15px; text-decoration: line-through; text-decoration-color: rgba(20, 34, 44, 0.35); }
.change-list .c-to { margin-top: 2px; font-size: 16px; }
.linkrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 14px/1 var(--mono); }
.mini-label { margin: 30px 0 12px; color: var(--ink-2); font: 500 13px/1 var(--sans); }
.fee-note { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--paper-deep); color: var(--ink-2); font: 400 14px/1.45 var(--sans); letter-spacing: -0.01em; }
.fee-note b { color: var(--ink); font-weight: 600; }
.chat { padding: 22px 16px; border-radius: var(--r); background: #e9e2d6; }
.bubble { position: relative; margin-left: auto; max-width: 330px; padding: 5px 5px 8px; border-radius: 10px 2px 10px 10px; background: #d9fdd3; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
.wa-card { overflow: hidden; border-radius: 7px; background: rgba(0, 0, 0, 0.05); }
.wa-card img { width: 100%; height: 150px; object-fit: cover; object-position: 50% 24%; }
.wa-card-t { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 9px; font: 400 13px/1.3 var(--sans); }
.wa-card-t b { font-weight: 600; }
.wa-card-t span { color: rgba(0, 0, 0, 0.62); }
.wa-card-t em { color: rgba(0, 0, 0, 0.45); font-style: normal; font-size: 12px; }
.bubble-text { padding: 7px 7px 0; font: 400 14.5px/1.35 var(--sans); }
.bubble-time { display: block; padding-right: 6px; text-align: right; color: rgba(0, 0, 0, 0.45); font-size: 11px; }

/* ── Prices: a tag tied to each garment's neck, resting on its shoulder ────
   The tag and its string turn together about the neck of the hanger (-32px -15px
   in the tag's own box), so the string stays tied whatever the tag does. */
.ptag {
  position: absolute;
  z-index: 3;
  top: 56px;
  left: calc(50% + 32px);
  width: 88px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: center;
  transform: rotate(-2deg);
  transform-origin: -32px -15px;
  filter: drop-shadow(0 10px 14px rgba(20, 34, 44, 0.18)) drop-shadow(0 1px 1.5px rgba(20, 34, 44, 0.14));
}
.ptag::before {
  content: '';
  position: absolute;
  top: 14.5px;
  left: 44px;
  z-index: 1;
  width: 82px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--ink);
  transform: rotate(201.2deg);
  transform-origin: 0 50%;
  pointer-events: none;
}
.ptag-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 6px 10px;
  background: var(--white);
  clip-path: polygon(22% 0, 78% 0, 100% 18px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 18px);
  transition: background-color 0.2s;
}
.ptag-hole {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--paper-deep);
  box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, 0.32);
}
.ptag-cur { color: var(--ink-2); font: 600 8.5px/1 var(--mono); letter-spacing: 0.16em; }
.ptag-fig {
  margin-top: 5px;
  font-family: var(--label);
  font-weight: 800;
  font-stretch: 62%;
  font-size: min(34px, calc(76px / (0.36 * var(--chars, 5))));
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.ptag-unit { margin-top: 7px; color: var(--ink-2); font: 600 7.5px/1.25 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.ptag-prog { margin-top: 1px; }
.ptag-q { margin-top: 1px; color: var(--blue); font-family: var(--label); font-weight: 800; font-stretch: 62%; font-size: 24px; line-height: 1; }
.ptag.is-blank .ptag-unit { color: var(--blue); }
.ptag[data-action] { cursor: pointer; }
.ptag[data-action]:hover .ptag-card { background: #eef4ff; }
.ptag.is-private .ptag-card { background: var(--paper-deep); }
.ptag-lock { margin-top: 6px; padding: 3px 5px 2px; border-radius: 4px; background: var(--ink); color: #fff; font: 600 7px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.ptag.is-fresh { animation: tag-in 1.2s var(--ease) both; }
@keyframes tag-in {
  0% { opacity: 0; transform: rotate(-40deg); }
  28% { opacity: 1; transform: rotate(10deg); }
  50% { transform: rotate(-6deg); }
  70% { transform: rotate(1.5deg); }
  100% { transform: rotate(-2deg); }
}
/* the same tag on its own, beside the style's photo at the top of the ladder */
.ptag.ptag-mini { position: relative; top: auto; left: auto; display: block; transform: rotate(-4deg); transform-origin: 50% 0; }
.ptag.ptag-mini::before { display: none; }

/* Rolling digits: each digit is a column 0–9 that slides to its place */
.roll { display: inline-block; }
.roll-vis { display: inline-flex; user-select: none; -webkit-user-select: none; }
.rd, .rs { display: inline-block; height: 1em; line-height: 1; }
.rs { white-space: pre; }
.rd { overflow: hidden; }
.rd-col {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--d) * -1em));
  transition: transform 0.8s cubic-bezier(0.2, 1.15, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 34ms);
}
.rd-col > span { display: block; height: 1em; }

/* Above the rack: the run the prices are at; the owner's two ways to add */
.rack-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: 36px; }
.qty-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.qs-label { color: var(--ink-2); font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.qs-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.66); box-shadow: inset 0 0 0 1px var(--line); }
.qs-seg button {
  height: 36px;
  min-width: 66px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 600 14.5px/1 var(--sans);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s;
}
.qs-seg button:hover { color: var(--blue); }
.qs-seg button[aria-pressed='true'] { background: var(--ink); color: #fff; }
.qs-note { display: flex; align-items: baseline; flex-basis: 100%; gap: 2px; max-width: 76ch; color: var(--ink-2); font: 400 14px/1.5 var(--sans); }
.qs-note .mk { margin: 0 8px 0 0; }
.rb-own { display: flex; flex-wrap: wrap; gap: 10px; }
.rb-own .badge { background: var(--blue); color: #fff; }
.plus-sm {
  width: 12px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 12px no-repeat;
}
#rack.is-drop-target .rack-body { border-radius: var(--r-lg); background: var(--blue-wash); outline: 2px dashed var(--blue); outline-offset: -2px; }

/* New styles land on the rail one after another */
.piece.is-drop { animation: drop-in 0.95s var(--spring) backwards; animation-delay: calc(var(--k, 0) * 140ms + 200ms); }
@keyframes drop-in {
  0% { opacity: 0; transform: translateY(-90px); }
  55% { opacity: 1; }
  100% { transform: none; }
}
.new-flag { position: absolute; top: 12px; left: 12px; padding: 5px 8px 4px; border-radius: 6px; background: var(--blue); color: #fff; font: 600 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
/* A style's photo while the server takes it: the picture is already there, a small
   ring turns in its corner, and then the ring is gone. One that wasn't kept dims and
   offers one button. */
.keep-state { position: absolute; display: grid; place-items: center; }
/* At the top of the photo, beside "Nuevo": the foot of a tall tile sits under the
   page's own bar on a phone, and a ring nobody sees says nothing. */
.keep-state.is-sending { top: 12px; left: 12px; width: 24px; height: 24px; border-radius: 50%; background: rgba(20, 34, 44, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.piece.is-new .keep-state.is-sending { top: 10px; left: 92px; }
.keep-state.is-sending i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: keep-turn 0.8s linear infinite; }
@keyframes keep-turn { to { transform: rotate(360deg); } }
.piece.is-failed .piece-photo img { opacity: 0.45; filter: saturate(0.6); }
.keep-state.is-failed { inset: 50% 10px auto 10px; transform: translateY(-50%); justify-items: start; gap: 2px; min-height: 52px; padding: 10px 14px; border: 0; border-radius: var(--r); background: rgba(255, 253, 248, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(20, 34, 44, 0.16); color: var(--ink); text-align: left; cursor: pointer; }
.keep-state.is-failed b { font: 500 13.5px/1.3 var(--sans); letter-spacing: -0.01em; }
.keep-state.is-failed span { color: var(--blue); font: 600 14.5px/1.3 var(--sans); letter-spacing: -0.01em; }
.keep-state.is-failed.is-final { cursor: default; }
.keep-state.is-failed:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .keep-state.is-sending i { animation-duration: 2.4s; } }
/* Nothing is dropped onto a phone. */
@media (hover: none) and (pointer: coarse) { #add-drop small { display: none; } }
.kind-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.kind-pick > span { margin-right: 4px; color: var(--blue); font: 600 13.5px/1 var(--sans); }
.chip-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.chip-quiet { background: transparent; color: var(--ink-2); }
body[data-as='owner'] [data-edit]:empty { display: inline-block; min-width: 10ch; }
body[data-as='owner'] [data-edit][data-ph]:empty::before { content: attr(data-ph); color: var(--ink-3); font-weight: 400; }

/* The price ladder */
.pz-who { display: flex; align-items: center; gap: 16px; }
.pz-id { flex: 1; min-width: 0; }
.pz-tag { flex: none; padding: 4px 4px 0 0; }
.pz-who img { flex: none; width: 60px; height: 76px; border-radius: 10px; object-fit: cover; background: var(--paper-deep); }
.pz-count { color: var(--ink-3); font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.pz-name { margin-top: 7px; font: 600 22px/1.1 var(--sans); letter-spacing: -0.04em; }
.pz-kind { margin-top: 4px; color: var(--ink-2); font: 400 14px/1.2 var(--sans); }
.pz-q { margin-top: 26px; font: 600 25px/1.12 var(--sans); letter-spacing: -0.045em; }
.pz-q-2 { margin: 34px 0 12px; }
.pz-way { display: flex; margin-top: 22px; }
/* two long labels share a phone's width: each takes half and may run to two lines */
.pz-way button { flex: 1 1 0; min-width: 0; height: auto; min-height: 40px; padding: 5px 10px; line-height: 1.15; white-space: normal; text-wrap: balance; }
.pz-way + .pz-q { margin-top: 22px; }
.stk-price { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.stk-price input {
  flex: 1;
  min-width: 0;
  height: 60px;
  padding: 0 16px;
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  font-family: var(--label);
  font-weight: 800;
  font-stretch: 62%;
  font-size: 34px;
  font-variant-numeric: tabular-nums lining-nums;
}
.stk-price input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(8, 102, 239, 0.14); }
.stk-price input::placeholder { color: var(--rule-strong); }
.pz-basis { margin-top: 10px; color: var(--ink-2); font: 500 10.5px/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.pz-hint { margin-top: 8px; color: var(--ink-2); font: 400 14.5px/1.5 var(--sans); }
.ladder {
  position: relative;
  max-height: min(34vh, 380px);
  margin-top: 16px;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}
.rung {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 46px;
  padding: 0 12px 0 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.rung::before { content: ''; position: absolute; top: 50%; left: 10px; width: 10px; height: 1.5px; background: var(--rule-strong); }
.rung:hover { background: var(--blue-wash); }
.rung-fig { font-family: var(--label); font-weight: 800; font-stretch: 70%; font-size: 21px; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.rung-who { display: flex; align-items: center; padding-left: 8px; }
.rung-who img { width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--white); }
.rung-who b { margin-left: 6px; color: var(--ink-2); font: 600 12px/1 var(--sans); }
.rung.is-on { background: var(--blue); color: #fff; }
.rung.is-on::before { background: rgba(255, 255, 255, 0.6); }
.rung.is-on.is-hi { border-radius: 10px 10px 0 0; }
.rung.is-on.is-lo { border-radius: 0 0 10px 10px; }
.rung.is-on.is-hi.is-lo { border-radius: 10px; }
.rung.is-on .rung-who img { box-shadow: 0 0 0 2px var(--blue); }
.rung-who img.is-me { width: 36px; height: 36px; box-shadow: 0 0 0 2px #fff; }
.rung.is-on .rung-who b { color: #fff; }
.pz-see { margin-top: 16px; }
.pz-note { color: var(--ink-2); font: 400 14px/1.5 var(--sans); }
.pz-opts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 14px; }
.pz-opts .text-btn { margin-top: 0; }
.toggle { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; font: 500 15px/1.3 var(--sans); text-align: left; cursor: pointer; }
.toggle:disabled { opacity: 0.45; cursor: default; }
.toggle-knob { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--rule-strong); transition: background-color 0.2s; }
.toggle-knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.3s var(--spring); }
.toggle[aria-pressed='true'] .toggle-knob { background: var(--blue); }
.toggle[aria-pressed='true'] .toggle-knob::after { transform: translateX(18px); }
.text-btn { display: inline-block; margin-top: 14px; padding: 0; border: 0; background: none; color: var(--blue); font: 500 14px/1.3 var(--sans); cursor: pointer; }
.text-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.pz-foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 10px;
  margin: 22px -28px -32px;
  padding: 26px 28px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(247, 244, 236, 0), var(--paper) 22px);
}
.pz-foot .btn { flex: 1; }
.vol-row { margin-top: 18px; }
.vol-q { margin-bottom: 10px; font: 600 15px/1.2 var(--sans); letter-spacing: -0.01em; }
.vol-table { width: 100%; border-collapse: collapse; }
.vol-table th, .vol-table td { padding: 11px 4px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
.vol-table thead th { color: var(--ink-3); font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.vol-table thead th:first-child, .vol-table tbody th { text-align: left; }
.vol-table tbody th { max-width: 150px; overflow: hidden; text-overflow: ellipsis; font: 500 14.5px/1.2 var(--sans); }
.vol-table td { font-family: var(--label); font-weight: 800; font-stretch: 70%; font-size: 19px; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }

/* Questions from WestOS */
.owner-in .asks-pill { margin-left: auto; }
.owner-in .asks-pill + .asks-pill { margin-left: 0; }
.asks-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 7px 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: 500 14px/1 var(--sans);
  cursor: pointer;
  transition: background-color 0.2s;
}
.asks-pill:hover { background: rgba(255, 255, 255, 0.2); }
.owner-bar .asks-pill .badge { background: #fff; color: var(--blue); }
.owner-bar .wa-pill { padding-right: 14px; }
.wa-steps { margin: 0 0 24px 1.3em; list-style: decimal; font: 400 16px/1.6 var(--sans); }
.wa-steps li { padding-left: 4px; }
.wa-go { min-width: 220px; }
.wa-note + p { margin-top: 18px; }
.wa-note { margin-top: 18px; color: var(--ink-2); font: 400 14.5px/1.55 var(--sans); }
.wa-note .link { padding: 0; border: 0; background: none; color: var(--blue); font: inherit; text-decoration: underline; cursor: pointer; }
/* Connect a computer: the camera, the frame to aim with, the computer and the list */
.pc-cam { position: relative; overflow: hidden; width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto; border-radius: 18px; background: #0b0f14; }
.pc-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-frame { position: absolute; inset: 16%; border: 3px solid #fff; border-radius: 16px; box-shadow: 0 0 0 999px rgba(11, 15, 20, 0.35); pointer-events: none; }
.pc-note { margin-top: 14px; color: var(--ink-2); font: 400 15px/1.5 var(--sans); text-align: center; }
.pc-note.is-bad { color: var(--ink); text-align: left; }
.pc-ok { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: #eaf2ff; color: var(--ink); font: 500 15px/1.45 var(--sans); }
.pc-what { margin: 6px 0 18px; font: 400 17px/1.45 var(--sans); }
.pc-word-ask { margin: 0 0 10px; font: 400 15px/1.45 var(--sans); }
.pc-words { display: flex; gap: 8px; margin-bottom: 10px; }
.pc-word { flex: 1 1 0; min-width: 0; padding-inline: 4px; font: 700 19px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; }
.pc-scam { margin: 0 0 18px; color: var(--ink-2); font: 400 13.5px/1.45 var(--sans); }
.pc-go { display: flex; flex-wrap: wrap; gap: 10px; }
.pc-h { margin: 26px 0 8px; font: 600 15px/1.3 var(--sans); }
.pc-list { margin: 0; padding: 0; list-style: none; }
.pc-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.pc-list span { display: grid; gap: 2px; }
.pc-list small { color: var(--ink-2); font-size: 13.5px; }
.pc-notice { margin: 0 0 12px; padding: 14px 16px; border: 1px solid #f0c9c5; border-left: 3px solid #c42b22; border-radius: 14px; background: #fff7f6; font: 400 15px/1.5 var(--sans); }
.pc-notice .pc-go { margin-top: 10px; }
/* Three pills, the help links and the send button do not fit beside the title below this. */
@media (max-width: 1180px) {
  .owner-in { flex-wrap: wrap; justify-content: flex-start; gap: 10px 14px; }
  .owner-in .owner-title { flex: 0 0 100%; }
  .owner-in .asks-pill { margin-left: 0; }
  .owner-in .owner-actions { margin-left: auto; }
}
.asks-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: ping 2.4s infinite; }
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
}
.ask { padding: 20px 20px 22px; border-radius: var(--r-lg); background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 16px 30px rgba(20, 34, 44, 0.05); }
.ask + .ask { margin-top: 16px; }
.ask-kicker { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-3); font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.ask-kicker span:first-child { color: var(--blue); }
.ask-text { margin-top: 12px; font: 400 16px/1.5 var(--sans); letter-spacing: -0.01em; }
.ask-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.ask-pair img, .ask-slot { width: 100%; aspect-ratio: 4 / 5; border-radius: 12px; object-fit: cover; }
.ask-slot { display: grid; place-items: center; padding: 12px; border: 1.5px dashed var(--rule-strong); background: var(--paper); color: var(--ink-3); font: 500 12.5px/1.4 var(--sans); text-align: center; }
.ask-pair figcaption { margin-top: 8px; color: var(--ink-2); font: 400 13px/1.4 var(--sans); }
.ask-pair figcaption b { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 600; }
.ask-q { margin-top: 18px; font: 600 18px/1.3 var(--sans); letter-spacing: -0.025em; }
.ask-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ask-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.ask-scale .chip { height: 46px; padding: 0 6px; font-size: 14px; line-height: 1.1; }
.ask-scale + .ask-choices { margin-top: 8px; }
.ask-done { margin-top: 18px; padding-top: 16px; border-top: 1.5px dashed var(--rule-strong); }
.ask-done p { font: 400 15.5px/1.5 var(--sans); }
.ask-done .mini-label { margin: 0 0 6px; }
.ask-est { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 10px; }
.ask-est b { color: var(--blue); font-family: var(--label); font-weight: 800; font-stretch: 62%; font-size: 46px; line-height: 1; }
.ask-est span { color: var(--ink-2); font: 500 13px/1.3 var(--sans); }

/* Add styles */
.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 20px 26px;
  border: 2px dashed rgba(8, 102, 239, 0.45);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.55);
  text-align: center;
  transition: background-color 0.2s, border-color 0.2s, transform 0.25s var(--spring);
}
.drop.is-over { border-color: var(--blue); background: #fff; transform: scale(1.02); }
.drop-hook { width: 26px; height: 42px; color: var(--ink); }
.drop small { color: var(--ink-2); font: 400 14px/1.3 var(--sans); }
.add-status { margin-top: 14px; color: var(--blue); font: 500 14px/1.4 var(--sans); }
.add-ways { margin-top: 24px; border-top: 1px solid var(--rule); }
.add-ways li { display: grid; gap: 3px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.add-ways b { font: 600 15px/1.3 var(--sans); letter-spacing: -0.01em; }
.add-ways span { color: var(--ink-2); font: 400 14.5px/1.45 var(--sans); }

/* A link for one buyer; the estimate on the ticket */
.for-row { display: block; }
.for-row input { width: 100%; height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 400 16px/1 var(--sans); }
.for-row input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }
.t-est { display: grid; gap: 3px; }
.t-est b { font-weight: 650; }
.t-est small { color: var(--ink-3); font-size: 11px; }
.t-fit { color: var(--ink-2); font-size: 12px; }

/* ── Lead times: a small production line above the rack ────────────────────
   Today, the sample, the buyer's approval, the run, ready to ship. Lengths follow
   the weeks; labels sit above and below the line so they never collide. */
.rb-time { flex-basis: 100%; }
.tl { display: flex; align-items: center; gap: 22px; max-width: 820px; }
.tl-line { display: flex; flex: 1; align-items: center; min-width: 0; padding: 26px 0; }
.tl-seg { position: relative; min-width: 34px; height: 2px; background: var(--ink); transition: flex-grow 0.7s var(--ease); }
.tl-l { position: absolute; left: 6px; white-space: nowrap; color: var(--ink-2); font: 500 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.tl-sample .tl-l { bottom: 11px; }
.tl-run .tl-l { top: 11px; }
.tl-node { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.tl-now { background: var(--ink); }
.tl-end { width: 12px; height: 12px; background: var(--blue); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--blue); }
.tl-end-l { display: flex; flex: none; flex-direction: column; gap: 6px; }
.tl-end-l > span { color: var(--ink-2); font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.tl-end-l b { font-family: var(--label); font-weight: 800; font-stretch: 62%; font-size: 38px; line-height: 1; white-space: nowrap; }
.tl-note { max-width: 76ch; margin-top: 2px; color: var(--ink-2); font: 400 14px/1.5 var(--sans); }
.spec-edit { display: inline; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; outline: 1.5px dashed rgba(8, 102, 239, 0.45); outline-offset: 3px; }
.spec-edit:hover { outline-color: var(--blue); background: var(--blue-wash); }

/* Tiempos: weeks on a strip, tap one or two beside each other */
.vol-q-2 { margin-top: 24px; }
.wk-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 14px; padding: 5px; border-radius: var(--r); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.wk { width: 100%; height: 46px; padding: 0; border: 0; border-radius: 0; background: transparent; font-family: var(--label); font-weight: 800; font-stretch: 70%; font-size: 20px; line-height: 1; font-variant-numeric: lining-nums; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.wk:hover { background: var(--blue-wash); }
.wk.is-on { background: var(--blue); color: #fff; }
.wk.is-on.is-lo { border-radius: 10px 0 0 10px; }
.wk.is-on.is-hi { border-radius: 0 10px 10px 0; }
.wk.is-on.is-lo.is-hi { border-radius: 10px; }
.tm-table { margin-top: 2px; }
.tm-table td:nth-child(2) { font-family: var(--sans); font-weight: 500; font-stretch: 100%; font-size: 14px; }

/* ── Order cards: "would you take this order?" ───────────────────────────────
   Printed like the request ticket: perforated edges, mono labels, the three numbers in
   the label type. Drag right for yes, left for no; the stamp lands and the ticket goes. */
/* Nothing moves under a thumb: the line above the ticket is always two lines tall,
   the ticket is always one height, and the answers always have room for the tallest. */
.oc-said { box-sizing: border-box; min-height: 63px; margin-bottom: 16px; padding: 11px 14px; border-radius: 12px; background: var(--blue-wash); font: 500 14px/1.45 var(--sans); letter-spacing: -0.01em; }
/* A narrow phone: the answer said back takes three lines, and so does its place. */
@media (max-width: 380px) { .oc-said { min-height: 84px; } }
.oc-said.is-hint { padding-left: 0; padding-right: 0; background: none; color: var(--ink-2); font-weight: 400; }
.oc-said.is-new { animation: said-in 0.32s ease-out both; }
@keyframes said-in { from { opacity: 0; } }
.oc-said .text-btn { margin: 0 0 0 4px; font-size: inherit; }
.oc-stack { position: relative; padding-bottom: 14px; }
/* The ticket under the one on top: the same size, a little smaller and lower, blank
   until it is its turn. It rises as the top one is pulled away. */
.oc-under { position: absolute; inset: 0 0 14px; border-radius: var(--r); background: var(--white); box-shadow: 0 0 0 1px var(--line); transform: translateY(calc(12px * (1 - var(--pull, 0)))) scale(calc(0.955 + 0.045 * var(--pull, 0))); transform-origin: 50% 100%; }
.oc-stack:not(:has(.is-drag)) .oc-under { transition: transform 0.45s var(--spring); }
.oc-stack::after { content: ''; position: absolute; bottom: 0; left: 26px; right: 26px; height: 40px; border-radius: var(--r); background: var(--white); box-shadow: 0 0 0 1px var(--line); opacity: 0.6; }
.oc {
  position: relative;
  z-index: 1;
  padding: 22px 22px 18px;
  border-radius: var(--r);
  background: var(--white);
  font-family: var(--mono);
  filter: drop-shadow(0 18px 30px rgba(20, 34, 44, 0.09)) drop-shadow(0 1px 2px rgba(20, 34, 44, 0.08));
  -webkit-mask:
    radial-gradient(circle 6px at 8px 0, transparent 5.5px, #000 6px) top left / 16px 51% repeat-x,
    radial-gradient(circle 6px at 8px 100%, transparent 5.5px, #000 6px) bottom left / 16px 51% repeat-x;
  mask:
    radial-gradient(circle 6px at 8px 0, transparent 5.5px, #000 6px) top left / 16px 51% repeat-x,
    radial-gradient(circle 6px at 8px 100%, transparent 5.5px, #000 6px) bottom left / 16px 51% repeat-x;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  transform: translateX(var(--dx, 0px)) rotate(var(--rot, 0deg));
  transition: transform 0.45s var(--spring), opacity 0.3s;
  animation: oc-in 0.5s var(--ease) backwards;
}
@keyframes oc-in { from { opacity: 0; transform: translateY(22px) scale(0.97); } }
.oc.is-drag, .oc.is-held { cursor: grabbing; transition: none; }
/* The next ticket comes up from exactly where the blank one under it was, and is
   printed as it arrives. */
.oc.is-rising { transform-origin: 50% 100%; animation: oc-rise 0.4s var(--spring) backwards; }
.oc.is-rising > * { animation: oc-ink 0.26s 0.06s ease-out backwards; }
@keyframes oc-rise { from { transform: translateY(calc(12px * (1 - var(--from, 0)))) scale(calc(0.955 + 0.045 * var(--from, 0))); } }
@keyframes oc-ink { from { opacity: 0; } }
/* Answered: out of the flow, over the next one, and away the way it was sent. */
.oc.is-leaving { position: absolute; inset: 0 0 14px; z-index: 2; pointer-events: none; animation: none; }
.oc.is-gone { opacity: 0; transition: transform var(--out, 0.3s) cubic-bezier(0.5, 0, 0.9, 0.6), opacity var(--out, 0.3s) ease-in; }
@media (prefers-reduced-motion: reduce) {
  .oc, .oc.is-rising, .oc.is-rising > *, .oc-said.is-new { animation: none; }
  .oc-under { transition: none; }
}
.oc-head { display: flex; justify-content: space-between; gap: 12px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.oc-head span:first-child { color: var(--blue); }
.oc-head span:last-child { color: var(--ink-3); }
.oc-who { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.oc-photo { flex: none; width: 84px; height: 108px; overflow: hidden; border-radius: 10px; background: var(--paper-deep); }
.oc-photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.oc-slot { display: grid; place-items: center; width: 100%; height: 100%; padding: 8px; border: 1.5px dashed var(--rule-strong); border-radius: 10px; background: var(--paper); color: var(--ink-3); font: 500 10.5px/1.35 var(--sans); text-align: center; }
.oc-id { min-width: 0; }
.oc-name { font: 600 25px/1.05 var(--sans); letter-spacing: -0.045em; }
.oc-sub { margin-top: 6px; color: var(--ink-2); font: 400 14px/1.4 var(--sans); letter-spacing: -0.01em; }
.oc-like { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ink-2); font: 500 12.5px/1.2 var(--sans); }
.oc-like img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; pointer-events: none; }
.oc-terms { display: grid; grid-template-columns: 1fr 1.4fr 1fr; margin-top: 18px; border-top: 1.5px dashed var(--rule-strong); border-bottom: 1.5px dashed var(--rule-strong); }
.oc-n { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 15px 4px 12px; text-align: center; }
.oc-n + .oc-n { border-left: 1.5px dashed var(--rule-strong); }
.oc-n b { font-family: var(--label); font-weight: 800; font-stretch: 62%; font-size: 44px; line-height: 0.9; white-space: nowrap; font-variant-numeric: lining-nums; }
.oc-n b i { margin-right: 3px; font-style: normal; font-stretch: 80%; font-size: 0.4em; vertical-align: 0.95em; }
.oc-n small { margin-top: 8px; color: var(--ink-2); font: 600 9.5px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.oc-basis { min-height: 32px; margin-top: 12px; color: var(--ink-2); font: 500 10px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.oc-lean { position: absolute; top: 58px; padding: 6px 12px 5px; border: 2.5px solid currentColor; border-radius: 8px; font: 800 22px/1 var(--label); font-stretch: 70%; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.oc-lean-yes { left: 16px; color: var(--blue); background: rgba(255, 255, 255, 0.86); transform: rotate(-10deg); }
.oc-lean-no { right: 16px; color: var(--ink); background: rgba(255, 255, 255, 0.86); transform: rotate(10deg); }
.oc .oc-lean-yes { opacity: var(--yes, 0); }
.oc .oc-lean-no { opacity: var(--no, 0); }
.oc.is-yes .oc-lean-yes, .oc.is-no .oc-lean-no { opacity: 0; transition: opacity 0.15s; }
.oc-stamp { position: absolute; top: 52px; right: 14px; width: 128px; color: var(--blue); mix-blend-mode: multiply; pointer-events: none; }
.oc.is-no .oc-stamp { color: var(--ink); }
/* Swiped to the right, the ticket's right side is off the screen: the stamp lands on
   the side still in view, where "Sí" was. */
.oc.is-held .oc-stamp { right: auto; left: 10px; }
.oc-stamp .slam { animation: slam 0.55s var(--spring) both; }
.oc-controls { margin-top: 20px; }
.oc-controls.is-busy { pointer-events: none; }
.oc-answers { min-height: 112px; margin-top: 12px; }
.oc-q { font: 600 21px/1.2 var(--sans); letter-spacing: -0.035em; }
.oc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.oc-actions .btn { --h: 52px; padding: 0 12px; font-size: 15px; }
.oc-actions .oc-yes { grid-column: 1 / -1; }
.oc-actions-2 .oc-yes { grid-column: auto; }
.oc-else { margin-top: 10px; }
.oc-depends { display: flex; flex-wrap: wrap; gap: 8px; }
.oc-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-top: 12px; }
.oc-foot .text-btn { margin-top: 0; }
.oc-foot span { color: var(--ink-3); font: 400 12.5px/1.4 var(--sans); }
.oc-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.oc-chip { height: 60px; padding: 0 4px; border: 0; border-radius: var(--r); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--label); font-weight: 800; font-stretch: 66%; font-size: 27px; line-height: 1; font-variant-numeric: lining-nums; white-space: nowrap; cursor: pointer; transition: box-shadow 0.15s, color 0.15s; }
.oc-chip i { font-style: normal; font-stretch: 80%; font-size: 0.5em; }
.oc-chip:hover { box-shadow: inset 0 0 0 2px var(--blue); color: var(--blue); }
.oc-chip-more { font-family: var(--sans); font-weight: 600; font-stretch: 100%; font-size: 15px; }
.oc-promise { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--ink-2); font: 400 13px/1.5 var(--sans); }
.oc-rest .ask-choices .btn { margin-top: 0; }
.ask-q-2 { margin-top: 20px; }
.ask-q small { color: var(--ink-3); font: 400 13px/1.3 var(--sans); letter-spacing: 0; }

/* What WestOS knows: HYE's tag (gray) against what it would take (blue), per style */
.kn { margin-top: 24px; border-top: 1px solid var(--rule-strong); }
.kn + .ask { margin-top: 20px; }
.kn-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 0 14px; border: 0; background: none; text-align: left; cursor: pointer; }
.kn-toggle span { flex: 1; font: 600 17px/1.2 var(--sans); letter-spacing: -0.02em; }
.kn-toggle small { color: var(--ink-3); font: 500 12px/1 var(--sans); }
.kn-toggle::after { content: ''; flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--ease); }
.kn-toggle[aria-expanded='true']::after { transform: translateY(2px) rotate(-135deg); }
.kn-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.kn-legend { display: grid; gap: 7px; color: var(--ink-2); font: 500 12.5px/1.3 var(--sans); }
.kn-legend span, .kn-vals span { display: inline-flex; align-items: center; gap: 7px; }
.kn-key { display: inline-block; flex: none; }
.kn-key-tag { width: 16px; height: 8px; border-radius: 4px; background: rgba(20, 34, 44, 0.18); }
.kn-key-est { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.kn-q button { height: 32px; min-width: 54px; padding: 0 10px; font-size: 13px; }
.kn-sub { margin: 20px 0 6px; color: var(--ink-3); font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.kn-list { display: grid; }
.kn-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.kn-row-time { grid-template-columns: minmax(0, 1fr); }
.kn-row img { width: 40px; height: 50px; border-radius: 8px; object-fit: cover; }
.kn-name { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 600 15px/1.2 var(--sans); letter-spacing: -0.015em; }
.kn-name small { flex: none; color: var(--ink-3); font: 500 11.5px/1 var(--sans); letter-spacing: 0; }
.kn-vals { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; color: var(--ink-2); font: 400 13px/1.35 var(--sans); font-variant-numeric: tabular-nums; }
.kn-vals small { color: var(--ink-3); font-size: 12px; }
.kn-track { position: relative; height: 14px; margin-top: 9px; }
.kn-track::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--rule); }
.kn-band { position: absolute; top: 3px; height: 8px; border-radius: 4px; background: rgba(20, 34, 44, 0.18); }
.kn-range { position: absolute; top: 6px; height: 2px; border-radius: 1px; background: var(--blue); }
.kn-dot { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px var(--paper); }
.is-prior .kn-dot { background: var(--paper); box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 2px var(--paper); }
.is-prior .kn-range { opacity: 0.45; }
.kn-axis { position: relative; height: 20px; margin-left: 52px; color: var(--ink-3); font: 500 10px/1 var(--mono); font-variant-numeric: tabular-nums; }
.kn-row-time .kn-axis { margin: 2px 0 0; }
.kn-axis span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; }
.kn-note { margin-top: 12px; color: var(--ink-2); font: 400 13px/1.5 var(--sans); }
.kn-hint { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--blue-wash); font: 400 13.5px/1.45 var(--sans); }
.kn-hint .text-btn { margin: 0 0 0 4px; }

@media (max-width: 760px) {
  .rack-bar { margin-top: 26px; }
  .qs-seg button { min-width: 58px; padding: 0 11px; }
  .owner-in .asks-pill { align-self: flex-start; margin-left: 0; }
  .qty-switch .qs-label:last-child { display: none; }
  .ladder { max-height: 34vh; }
  .pz-q { font-size: 22px; }
  .tl { flex-wrap: wrap; gap: 0 18px; }
  .tl-line { flex-basis: 100%; }
  .tl-end-l { flex-direction: row; align-items: baseline; gap: 10px; margin-top: -8px; }
  .tl-end-l b { font-size: 30px; }
  .wk-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .oc { padding: 20px 18px 16px; }
  .oc-photo { width: 72px; height: 92px; }
  .oc-name { font-size: 22px; }
  .oc-n b { font-size: 38px; }
  .oc-chip { font-size: 24px; }
  /* In Para ti the answers sit under the ticket, in the page's own flow. */
  .oc-controls { margin-top: 14px; }
  .oc-q { font-size: 19px; }
  .oc-actions .btn { --h: 48px; font-size: 14.5px; }
  .oc-said { padding: 9px 12px; font-size: 13px; }
  .oc-terms .oc-n { padding: 12px 4px 10px; }
  .oc-basis { font-size: 9.5px; }
}

/* ── Reveal ──────────────────────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-load { animation: rise 1s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.stamp.rv-load { animation: stamp-in 0.7s var(--spring) both; animation-delay: var(--d, 0ms); }
@keyframes stamp-in {
  0% { opacity: 0; transform: rotate(-19deg) scale(1.85); filter: blur(3px); }
  70% { opacity: 1; transform: rotate(-11deg) scale(0.95); filter: blur(0); }
  100% { opacity: 1; transform: rotate(-12deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  .rv { opacity: 1; transform: none; }
  .tag-hang { opacity: 1; }
  .ring path { stroke-dashoffset: 0; }
  .art .plate { animation: none !important; opacity: 1 !important; }
}

/* ── Medium screens ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .path-line { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
  .stop:nth-child(3n)::before { right: 22px; }
  .details-side { grid-column: 1 / -1; position: static; }
  .spec-sheet { grid-column: 1 / -1; margin-top: 30px; }
  .start-form { grid-column: 1 / span 7; }
  .ticket-wrap { grid-column: 8 / span 5; }
  .frames { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot-id { grid-column: 1 / span 6; }
  .foot-nav { grid-column: 1 / span 8; grid-row: 2; }
  .foot-stamp { grid-column: 9 / span 4; grid-row: 1 / span 2; align-self: center; }
}

/* ── Phones ──────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  :root { --bar-h: 58px; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .bar { gap: 12px; }
  .bar-logo { height: 30px; }
  .bar-place { display: none; }
  .bar-proof { font-size: 13px; }
  .bar-actions { display: none; }
  .owner-in { flex-wrap: wrap; justify-content: flex-start; gap: 10px; padding-top: 10px; padding-bottom: 12px; }
  .owner-in .owner-title { flex: 0 0 100%; }
  .owner-in .asks-pill { align-self: center; }
  .owner-in .owner-help { margin-left: auto; gap: 16px; }
  .owner-title { font-size: 14px; }
  .owner-actions { display: none; }
  .proto-long { display: none; }
  .head-grid { display: block; }
  .head-grid .lead { margin-top: 18px; }
  .h2 { font-size: clamp(38px, 11vw, 48px); letter-spacing: -0.055em; }

  .cover { display: block; padding-top: 30px; padding-bottom: 30px; }
  .cover-name { font-size: 40vw; margin-top: 0.22em; }
  .cover-say { margin-top: 26px; padding: 0; padding-right: 22%; }
  .cover-line { font-size: 30px; }
  .cover-actions { display: none; }
  .stamp { right: var(--gut); bottom: auto; top: 80px; width: 100px; }

  .opening {
    display: flex;
    gap: 8px;
    padding: 0 var(--gut);
    border-radius: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    scrollbar-width: none;
  }
  .opening::-webkit-scrollbar { display: none; }
  .op { flex: 0 0 78vw; border-radius: var(--r-lg); scroll-snap-align: start; }
  .op:nth-child(1) figcaption { left: 14px; bottom: 14px; }

  /* Ways: both tags hang from one rail; swipe between them */
  .rail { display: block; margin: 44px calc(-1 * var(--gut)) 0; border-radius: 0; }
  .rail::before, .rail::after { display: none; }
  .tags {
    justify-content: flex-start;
    gap: 16px;
    margin: 0 calc(-1 * var(--gut)) -40px;
    padding: 0 var(--gut) 50px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .tags::-webkit-scrollbar { display: none; }
  .tag-hang { flex: 0 0 auto; padding-top: 44px; scroll-snap-align: center; transition: none; }
  .tag-hang, .tag-hang.in { opacity: 1; animation: none; }
  .tag-hang:nth-child(2) { --drop: 0px; }
  .tag-hang::before { height: 70px; }
  .tag-hang:hover { transform: none; }
  .tag { width: 78vw; padding: 56px 22px 22px; }
  .tag-name { font-size: 25px; }
  .tag-points { margin-top: 20px; }
  .tag-points li { padding: 10px 0 9px; font-size: 14.5px; }
  .tag-cta { margin-top: 20px; }
  .tag-sizes { gap: 3px; font-size: 9.5px; }
  .tag-sizes span { white-space: nowrap; }
  .tag-switch {
    display: flex;
    gap: 4px;
    width: fit-content;
    margin: 18px auto 0;
    padding: 4px;
    border-radius: 999px;
    background: rgba(20, 34, 44, 0.06);
  }
  .tag-switch button {
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2);
    font: 500 14px/1 var(--sans);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  }
  .tag-switch button[aria-pressed='true'] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }

  .rack-controls { display: none; }
  .piece { flex-basis: 76vw; }

  /* Who makes what: a compact chain, drawing beside words */
  .path-line { grid-template-columns: 1fr; row-gap: 0; margin-top: 36px; }
  .stop {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    padding: 0 0 30px 34px;
  }
  .stop::before { top: 0; bottom: 0; left: 8px; right: auto; border-top: 0; border-left: 2px solid var(--ink); }
  .stop-partner::before { border-left-style: dashed; border-left-color: var(--ink-2); }
  .stop:last-child::before { display: none; }
  .stop:nth-child(3n)::before { right: auto; }
  .stop-node { top: 26px; }
  .stop-art { grid-column: 1; grid-row: 1 / span 6; width: 92px; height: 69px; margin: 0; }
  .stop-art .art { width: 92px; height: 69px; }
  .stop-no, .stop-step, .stop-who, .stop-text, .stop-frame { grid-column: 2; }
  .stop-step { margin-top: 6px; font-size: 19px; }
  .stop-who { justify-self: start; margin-top: 8px; }
  .stop-text { margin-top: 8px; font-size: 14.5px; }
  .stop-frame { margin-top: 10px; }
  .stop-frame img { width: 40px; height: 40px; }

  .spec { grid-template-columns: 1fr 24px; gap: 6px 14px; }
  .spec-k { grid-column: 1 / -1; }
  .spec-sheet { margin-top: 128px; padding: 22px 18px 24px; }
  .ss-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ss-head div { padding: 9px 8px 10px; }
  .ss-head b { font-size: 13.5px; }
  .swatch { top: -112px; right: 16px; width: 92px; }
  .clip { top: -16px; }

  .visit { border-radius: 36px; }
  .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .film-strip { padding: 12px 10px 14px; }
  .edge span:nth-child(n + 4) { display: none; }

  .start-grid { display: block; }
  .ticket-wrap { position: static; margin-top: 40px; }
  .progs, .fields-2, .qty-row { grid-template-columns: 1fr; }

  .foot { border-radius: 36px 36px 0 0; }
  /* A wide logo or a long link takes the room there is and no more: the footer is never
     wider than the phone. */
  .foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px 16px; }
  .foot-id { grid-column: 1; }
  .foot-logo { max-width: 100%; object-fit: contain; object-position: left center; }
  .foot-stamp { grid-column: 2; grid-row: 1; width: 104px; align-self: start; }
  .foot-nav { grid-column: 1 / -1; grid-row: 2; }
  .foot-nav a { gap: 10px; min-width: 0; font-size: 16px; overflow-wrap: anywhere; }
  .foot-nav a span { flex: none; overflow-wrap: normal; white-space: nowrap; }
  .foot-base { flex-direction: column; align-items: flex-start; }

  .dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
    padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background: rgba(247, 244, 236, 0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--rule);
    transition: transform 0.35s var(--ease);
  }
  .dock.is-away { transform: translateY(110%); }
  .dock .btn { width: 100%; }
  /* three ways in: message, quote, sample. The sample is the one with room. */
  .dock.dock-3 { grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; }
  .dock.dock-1 { grid-template-columns: minmax(0, 1fr); }
  .dock.dock-3 .btn { min-width: 0; padding: 0 1.05em; }
  .sheet { align-items: flex-end; }
  .sheet-panel { width: 100%; height: auto; max-height: 92vh; max-height: 92dvh; border-radius: 22px 22px 0 0; transform: translateY(104%); }
  .sheet-head { padding-top: 22px; }
  /* On a phone a sheet covers the screen. With the page still painted behind it, Safari
     gives the sheet a fifth of the finger's travel (measured in the iPhone simulator: 50 to
     90 px for a 300 px drag; 283 with the page hidden, the same as a bare page). So once
     the sheet is up, the page behind it is not painted. It keeps its place: closing the
     sheet shows it again where it was, at once. */
  main { transition: visibility 0s; }
  html:has(.sheet.is-open) main { visibility: hidden; transition: visibility 0s 0.45s; }
  .lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; }
  .lb-fig { grid-column: 1 / -1; grid-row: 1; padding: 64px 12px 0; }
  .lb-prev, .lb-next { grid-row: 2; margin: 16px 0 calc(24px + env(safe-area-inset-bottom)); }
  .lb-prev { grid-column: 1; }
  .lb-next { grid-column: 2; }
}

/* ── Public page additions ──────────────────────────────────────────────── */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sec[hidden], .visit[hidden], .swatch[hidden], .foot-nav a[hidden] { display: none; }
.t-send[disabled] { opacity: 0.6; cursor: progress; }
.files-note { margin-top: 12px; font-size: 14px; color: var(--ink-2, #4a5563); }
.bar-name { font-family: Archivo, var(--sans, sans-serif); font-weight: 800; font-stretch: 66%; font-size: 22px; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1; }
.foot-name { font-family: Archivo, var(--sans, sans-serif); font-weight: 800; font-stretch: 66%; font-size: 44px; text-transform: uppercase; line-height: 0.95; margin: 0; }
.legend span[hidden] { display: none; }
/* Longer names than HYE's three letters: the size follows the longest word, so it never runs off the page. */
.cover-name { font-size: min(clamp(132px, 21.5vw, 330px), calc(44vw / (var(--len, 3) * 0.5))); overflow-wrap: normal; }
@media (max-width: 760px) {
  .cover-name { font-size: min(40vw, calc(88vw / (var(--len, 3) * 0.5))); }
}
/* The factory's own logo in place of its name (logo.cover): about the height the name would stand. */
/* The blend sits on the heading: its rise animation makes it a group of its own, so a
   blend on the picture inside would only meet the heading's empty ground. */
.cover-name.is-logo { margin: 0.5em 0 0; line-height: 0; mix-blend-mode: multiply; }
.cover-logo { display: block; width: auto; height: clamp(150px, 19vw, 290px); max-width: 100%; object-fit: contain; object-position: left bottom; }
/* A logo sent as a JPEG has a white ground: on the paper it disappears. */
.bar-logo { mix-blend-mode: multiply; }
.cover-name.is-sending { opacity: 0.55; }
.pop-logo { margin-top: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line, rgba(0,0,0,0.1)); }
@media (max-width: 760px) {
  .cover-name.is-logo { margin-top: 18px; }
  /* clear of the stamp, which sits at the right on a phone */
  .cover-logo { height: min(44vw, 220px); max-width: calc(100% - 112px); }
}

/* ── Request a sample ────────────────────────────────────────────────────── */
/* The header's, the cover's and the request section's buttons are the page's own; these are the sheet,
   the small ways in on a program tag and a piece, and the note above the request form. */
.field select {
  padding-right: 44px;
  background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%2314222c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") right 16px center / 12px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.field input[aria-invalid='true'], .field select[aria-invalid='true'] { border-color: transparent; box-shadow: inset 0 0 0 2px var(--red); }
.field-error { margin-top: 8px; color: var(--red); font: 500 14px/1.4 var(--sans); }

.sample-nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  max-width: 560px;
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: var(--r);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}
.sample-nudge p { flex: 1 1 260px; color: var(--ink-2); font: 400 15.5px/1.5 var(--sans); }
.sample-nudge b { display: block; color: var(--ink); font-weight: 600; }
.sample-nudge .btn { flex: none; }

.tag-sample { display: block; width: 100%; margin-top: 14px; padding: 6px 0; border: 0; background: none; color: var(--blue); font: 500 14.5px/1.2 var(--sans); text-align: center; cursor: pointer; }
.tag-sample:hover { text-decoration: underline; text-underline-offset: 3px; }
.piece-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 16px; }
.piece-acts .piece-add { margin-top: 0; }
.piece-sample { --h: 36px; padding: 0 1em; font-size: 13.5px; }

.smp-q { margin: 34px 0 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.smp-q > * + * { margin-top: 18px; }
.smp-q > legend + * { margin-top: 0; }
.smp-q legend { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; font: 600 19px/1.2 var(--sans); letter-spacing: -0.035em; }
.smp-fld .field-label { margin-bottom: 10px; }
.smp-fld .field .field-label { margin-bottom: 0; }
.smp-sub { margin-top: 16px; }
.smp-timing { margin: -8px 0 22px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--blue-wash); color: var(--ink); font: 500 14.5px/1.4 var(--sans); }
.smp-logo { padding: 16px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); background: rgba(255, 255, 255, 0.55); transition: box-shadow 0.2s, background-color 0.2s; }
.smp-logo.is-over { box-shadow: inset 0 0 0 2px var(--blue); background: #fff; }
.smp-logo .field-label { margin-bottom: 0; }
.smp-logo .field-hint { margin-top: 6px; font-size: 13.5px; }
.smp-q .field-hint:empty { display: none; }
.smp-files { display: grid; gap: 8px; }
.smp-files:not(:empty) { margin-top: 14px; }
.smp-files li { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 14px/1.3 var(--sans); }
.smp-fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smp-fs { flex: none; color: var(--ink-2); font: 500 12px/1 var(--mono); }
.smp-fx { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); font-size: 18px; line-height: 1; cursor: pointer; }
.smp-fx:hover { background: var(--paper-deep); }
.smp-pick { margin-top: 14px; }
.smp-st { flex: none; padding-right: 6px; color: var(--ink-2); font: 500 12.5px/1 var(--sans); }
.smp-st.is-done { color: var(--blue); }
.smp-st.is-failed { color: var(--ink); }
.smp-ref { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 14px; }
.smp-ref span { color: var(--ink-3); font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.smp-ref b { font: 600 18px/1.2 var(--mono); letter-spacing: 0.02em; }
.smp-up { margin-top: 24px; }
.smp-up .mini-label { margin: 0; }
.smp-up .smp-files { margin-top: 12px; }
.smp-up .fine { margin-top: 10px; }
.done .btn-wide { margin-top: 12px; }
.done .smp-open { margin-top: 26px; }
.btn[aria-disabled='true'] { opacity: 0.4; pointer-events: none; }
.smp-again { display: block; margin: 16px auto 0; padding: 8px; border: 0; background: none; color: var(--ink-2); font: 500 14.5px/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.smp-again:hover { color: var(--blue); }
@media (max-width: 380px) {
  .dock.dock-3 .btn { padding: 0 0.8em; font-size: 14px; }
}

/* Three ways in on the header: keep its words on one line, and let the place give way first. */
.bar-proof, .bar-place { white-space: nowrap; }
@media (max-width: 1100px) and (min-width: 761px) {
  .bar-place { display: none; }
  .bar-actions { gap: 8px; }
  .bar-actions .btn-sm { padding: 0 1em; }
}

/* ── Owner: the guide ─────────────────────────────────────────────────────────
   A ring that glides over the real page from one stop to the next, the rest dimmed by
   its own shadow, and a card at the bottom of the screen. */
.guide { position: fixed; inset: 0; z-index: 85; }
.guide-ring {
  position: fixed;
  border-radius: 20px;
  box-shadow: 0 0 0 3px var(--blue), 0 0 0 9px rgba(8, 102, 239, 0.22), 0 0 0 200vmax rgba(15, 23, 32, 0.62);
  transition: top 0.55s var(--ease), left 0.55s var(--ease), width 0.55s var(--ease), height 0.55s var(--ease);
  pointer-events: none;
  animation: guide-breathe 2.4s ease-in-out infinite;
}
@keyframes guide-breathe {
  50% { box-shadow: 0 0 0 3px var(--blue), 0 0 0 15px rgba(8, 102, 239, 0.1), 0 0 0 200vmax rgba(15, 23, 32, 0.62); }
}
.guide-card {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  max-width: 460px;
  margin: 0 auto;
  padding: 20px 20px 16px;
  border-radius: 24px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 60px -18px rgba(15, 23, 32, 0.55), 0 2px 0 #fff inset;
  opacity: 0;
  transform: translateY(16px);
}
.guide-card.is-in { opacity: 1; transform: none; transition: opacity 0.35s var(--ease), transform 0.5s var(--spring); }
.guide-card h2 { font: 550 23px/1.15 var(--sans); letter-spacing: -0.035em; text-wrap: balance; }
.guide-card p { margin-top: 8px; color: var(--ink-2); font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.guide-step { display: flex; gap: 5px; margin: 0 0 14px !important; }
.guide-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.guide-top .guide-step { margin: 0 !important; }
.guide-lang a { padding: 6px 5px; }
.guide-step i { width: 18px; height: 3px; border-radius: 2px; background: var(--line); transition: background 0.3s, width 0.4s var(--ease); }
.guide-step i.is-done { background: var(--blue-film); }
.guide-step i.is-on { width: 30px; background: var(--blue); }
.guide-address { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.guide-address b { color: var(--ink); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.guide-link { color: var(--blue); font-weight: 600; text-decoration: none; }
.guide-go { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.guide-go .btn-blue { margin-left: auto; min-width: 8.5em; }
.guide-go .btn-ghost { padding-left: 0; color: var(--ink-2); background: none; border-color: transparent; }
body[data-guide='on'] { overscroll-behavior: contain; }
body[data-guide='on'] .toast { visibility: hidden; }
/* A stop at the bottom of the screen (the phone's dock): the card sits above it. */
.guide-card.is-up { bottom: calc(160px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) {
  .guide-ring { animation: none; transition: none; }
  .guide-card.is-in { transition: none; }
}

/* Phones. A factory with no logo shows its name in type: sized to the phone, so a long
   name stays inside the bar and beside the footer's stamp. These come after the name
   rules above so that they win. */
@media (max-width: 760px) {
  .bar-name { font-size: 17px; }
  .foot-name { font-size: min(44px, 8.6vw); }
}
/* The narrowest phones (320 px): the logo, "Visitada por WestOS" and the language switch
   are a few pixels wider than the bar in Spanish. Closer together and a size smaller. */
@media (max-width: 359px) {
  .bar { gap: 8px; }
  .bar-proof { gap: 6px; font-size: 12px; }
  .bar-name { font-size: 15px; }
}

/* iPhone and iPad (every browser there is WebKit). The photo strip, the two tags and
   the rack scroll freely there, without snapping: with snapping on, a hard flick travels
   one item and stops, and a strip should go as far as it is thrown. (Until 2026-10-06
   these strips did not scroll under a finger at all; the cause was the clip on `main`,
   see the top of this file.) This rule is last in the file so that it wins. */
@supports (-webkit-touch-callout: none) {
  .opening, .tags, .rack-track { scroll-snap-type: none; }
}

/* ── Owner home: Para ti, styles without photos, Publicar ───────────────── */
/* Para ti: what is waiting for the owner, above their page. */
.foryou { max-width: 760px; margin: 0 auto; padding: 22px var(--gut) 6px; }
.foryou-title { margin: 0 0 12px; font: 700 22px/1.1 var(--sans); letter-spacing: -0.035em; }
.foryou-cards { display: flex; flex-direction: column; gap: 12px; }
.foryou-cards:empty { display: none; }
#asks-body:not(:empty) { margin-top: 12px; }
.fy-card { padding: 18px 20px 20px; border-radius: var(--r-lg); background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 16px 30px rgba(20, 34, 44, 0.05); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.fy-card.fy-order { box-shadow: 0 0 0 2px var(--blue), 0 16px 30px rgba(8, 102, 239, 0.08); }
.fy-title { margin: 0; font: 650 18px/1.3 var(--sans); letter-spacing: -0.02em; }
.fy-card .ask-text { margin: 0; color: var(--ink-2); font-size: 15px; }
.ask-q { margin-top: 12px; font: 650 18px/1.35 var(--sans); letter-spacing: -0.02em; }
.ask-price .ask-choices .chip-sm, #sheet-add .chip-sm, #sheet-style .chip-sm { height: 44px; padding: 0 14px; font-size: 14px; }
.ask-foot .text-btn { margin-top: 10px; }
.order-example { margin-top: 16px; color: var(--ink-2); font-size: 14px; }

/* A style without a photo: its kraft tag hangs where the photo would be. */
.piece-photo.is-bare { display: flex; align-items: flex-start; justify-content: center; background: transparent; overflow: visible; cursor: pointer; }
.kraft { position: relative; width: 84%; height: 92%; margin-top: 4%; padding: 30px 14px 14px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; background: #e9dfcc; color: var(--ink); border-radius: 8px 8px 14px 14px; clip-path: polygon(24% 0, 76% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); box-shadow: inset 0 0 0 1px rgba(20, 34, 44, 0.08); text-align: left; }
.kraft-hole { position: absolute; left: 50%; top: 10px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px rgba(20, 34, 44, 0.25); }
.kraft-name { font: 800 clamp(20px, 2.4vw, 26px)/1 var(--label); font-stretch: 66%; text-transform: uppercase; letter-spacing: 0.005em; overflow-wrap: anywhere; }
.kraft-meta { font: 600 10.5px/1.35 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #4a3f2c; }
.kraft-nophoto { color: #7a6a4c; }
.kraft-price { margin-top: auto; padding-top: 10px; border-top: 1px dashed rgba(20, 34, 44, 0.35); font: 800 clamp(24px, 2.8vw, 30px)/1 var(--label); font-stretch: 68%; font-variant-numeric: tabular-nums; }
.kraft-price.is-ask { color: var(--blue); }

/* The add and style sheets. */
.add-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.add-tabs button { min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--white); font: 500 13.5px var(--sans); color: var(--ink); cursor: pointer; }
.add-tabs button[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }
.add-label { display: block; margin: 18px 0 8px; font: 600 15px/1.3 var(--sans); }
.add-label small { color: var(--ink-3); font-weight: 400; }
.add-field { width: 100%; height: 50px; box-sizing: border-box; border-radius: var(--r); border: 1.5px solid var(--line); background: var(--white); padding: 0 14px; font: 500 16px var(--sans); color: var(--ink); }
.add-field:focus { border-color: var(--blue); outline: none; }
.add-area { height: auto; min-height: 150px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.add-hint { display: flex; align-items: center; gap: 6px; margin: -2px 0 8px; color: var(--ink-2); font-size: 13px; }
.add-from { margin-bottom: 4px; }
#add-body .btn-wide, #sheet-add .btn-wide { margin-top: 20px; }
.add-wa { margin-top: 18px; color: var(--ink-2); font-size: 14px; }
.st-top { display: flex; gap: 16px; align-items: flex-start; }
.st-pic { flex: 0 0 120px; height: 160px; border-radius: var(--r); overflow: hidden; background: var(--paper-deep); display: flex; justify-content: center; }
.st-pic img { width: 100%; height: 100%; object-fit: cover; }
.st-pic .kraft { width: 100%; height: 100%; margin: 0; padding: 26px 10px 10px; }
.st-pic .kraft-name { font-size: 18px; }
.st-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.st-id .add-label { margin: 0; }
.st-rows { display: flex; flex-direction: column; gap: 8px; }
.st-row { width: 100%; min-height: 58px; border-radius: var(--r); border: 1px solid var(--line); background: var(--white); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.st-row small { display: block; color: var(--ink-2); font-size: 13px; }
.st-row b { display: block; font-size: 16px; }
.st-foot { margin-top: 14px; }
.st-note { margin-top: 14px; color: var(--ink-3); font-size: 13px; }

/* Publicar shows only when there is something to publish. */
.dock.is-empty { display: none !important; }

/* ── The catalog (page.js, "The catalog"): the factory's price sheet as a grid under the rack ── */
.cat { margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--rule); display: grid; gap: 14px; }
.cat[hidden] { display: none; }
.cat-head { display: grid; gap: 6px; }
.cat-title { margin: 0; font: 650 clamp(24px, 4vw, 32px)/1.1 var(--sans); letter-spacing: -0.03em; }
.cat-n { font: 500 13px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); vertical-align: middle; margin-left: 6px; }
.cat-lead { display: flex; gap: 8px; align-items: baseline; margin: 0; max-width: 60ch; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.cat-own { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; color: var(--ink-2); background: rgba(31, 157, 85, 0.07); border: 1px solid rgba(31, 157, 85, 0.25); }
.cat-own.is-wait { background: var(--blue-wash); border-color: rgba(8, 102, 239, 0.25); }
.cat-own.is-bad { background: rgba(207, 138, 46, 0.1); border-color: rgba(207, 138, 46, 0.35); }
.dot-ok { width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; flex: none; }
.linkish { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--blue); cursor: pointer; }
.cat-connect { display: grid; gap: 12px; justify-items: start; padding: 18px; border-radius: var(--r-lg); border: 1.5px dashed rgba(8, 102, 239, 0.4); background: var(--blue-wash); }
.cat-connect p { margin: 0; max-width: 56ch; font-size: 15px; color: var(--ink-2); }
.cat-connect b { color: var(--ink); }
.cat-find input { width: 100%; height: 46px; box-sizing: border-box; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font: 400 16px var(--sans); color: var(--ink); }
.cat-find input:focus { outline: 2px solid var(--blue); border-color: transparent; }
.cat-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 2px 4px; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chips .chip { flex: none; white-space: nowrap; }
.cat-chips .chip small { margin-left: 4px; font: 500 11px/1 var(--mono); opacity: 0.6; }
.cat-only i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #1f9d55; }
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; } }
@media (min-width: 1100px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cat-card { position: relative; display: grid; align-content: start; gap: 6px; padding: 0; border: 0; background: none; text-align: left; color: inherit; cursor: pointer; animation: cat-pop 0.52s cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay: var(--d); }
.cat-card.still { animation: none; }
@keyframes cat-pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
.cat-ph { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r); background: var(--paper-deep); transition: transform 0.18s var(--ease); }
.cat-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
@media (hover: hover) { .cat-card:hover .cat-ph img { transform: scale(1.04); } }
.cat-card:active .cat-ph { transform: scale(0.97); }
.cat-noph { position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(30px, 8vw, 46px)/1 var(--label); font-stretch: 70%; color: rgba(20, 34, 44, 0.22); letter-spacing: 0.02em; }
.cat-card.is-out .cat-ph { opacity: 0.55; filter: grayscale(0.7); }
.cat-card.is-in .cat-ph { box-shadow: 0 0 0 3px var(--blue); }
.cat-card.is-in .cat-ph::after { content: ""; position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat; }
.cat-txt { display: grid; gap: 2px; min-width: 0; }
.cat-txt b { font: 600 15px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.cat-txt small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--ink-3); }
.cat-price { font: 650 15px/1 var(--sans); font-variant-numeric: tabular-nums; }
.cat-price small, .cat-big small { margin-right: 4px; font: 500 9.5px/1 var(--mono); letter-spacing: 0.12em; color: var(--ink-3); }
.cat-av { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--sans); color: var(--ink-2); }
.cat-av i { width: 7px; height: 7px; border-radius: 50%; background: #1f9d55; }
.cat-av.av-to_order i { background: var(--amber); }
.cat-av.av-sold_out { color: var(--ink-3); }
.cat-av.av-sold_out i { width: 8px; height: 8px; box-sizing: border-box; background: none; border: 1.5px solid var(--ink-3); }
.cat-av-lg { font-size: 14px; }
.cat-more { grid-column: 1 / -1; justify-self: center; }
.cat-none { grid-column: 1 / -1; text-align: center; color: var(--ink-3); font-size: 14px; }
#cat-body { display: grid; gap: 12px; }
.cat-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-lg); }
.cat-photos::-webkit-scrollbar { display: none; }
.cat-photos img { flex: none; width: 100%; aspect-ratio: 4 / 5; max-height: 52vh; object-fit: cover; scroll-snap-align: center; }
.cat-dots { display: flex; justify-content: center; gap: 6px; margin-top: -4px; }
.cat-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--rule-strong, rgba(20, 34, 44, 0.22)); transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s; }
.cat-dots i.on { width: 18px; background: var(--ink); }
.cat-meta { margin: 0; color: var(--ink-2); font-size: 15px; }
.cat-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.cat-big span { font: 700 24px/1 var(--sans); font-variant-numeric: tabular-nums; }
.cat-big em { font-style: normal; font-size: 13px; color: var(--ink-3); }
.cat-sizes { margin: 0; font-size: 14px; color: var(--ink-2); }
.cat-note { display: flex; gap: 8px; align-items: baseline; margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.cat-acts { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 4px; }
.cat-changes { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.cat-changes li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 11px 14px; font-size: 14px; font-variant-numeric: tabular-nums; }
.cat-changes li + li { border-top: 1px solid var(--rule); }
.cat-changes s { color: var(--ink-3); }
.ref-cat { padding-left: 12px; }
/* Connecting a sheet, in "Agregar estilos". */
.sheet-err { margin: 6px 0 0; color: #9a5a12; font-size: 14px; }
.sheet-map { display: grid; margin: 0 0 12px; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); overflow: hidden; }
.sheet-map li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 10px 12px; font-size: 13.5px; }
.sheet-map li + li { border-top: 1px solid var(--rule); }
.sheet-map code { font: 600 11px/1.4 var(--mono); overflow-wrap: anywhere; }
.sheet-map li span::before { content: "✓ "; color: #1f9d55; font-weight: 700; }
.sheet-map li.is-off span { color: var(--ink-3); }
.sheet-map li.is-off span::before { content: "— "; color: var(--ink-3); }
.sheet-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kind-b { display: grid; gap: 4px; padding: 14px; border-radius: var(--r); border: 1.5px solid var(--line); background: var(--white); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.kind-b b { font: 600 15px/1.25 var(--sans); }
.kind-b small { font-size: 13px; color: var(--ink-3); }
.kind-b[aria-pressed='true'] { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); background: var(--blue-wash); }
.sheet-sync { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
.sheet-sync span { flex: 1; display: grid; gap: 2px; }
.sheet-sync b { font: 600 15px/1.25 var(--sans); }
.sheet-sync small { font-size: 13px; color: var(--ink-3); }
.switch { position: relative; flex: none; width: 50px; height: 30px; border: 0; border-radius: 15px; background: #1f9d55; cursor: pointer; transition: background 0.2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 23px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: left 0.2s var(--ease); }
.switch[aria-checked='false'] { background: var(--line); }
.switch[aria-checked='false']::after { left: 3px; }
#add-body .linkish { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .cat-card { animation: none; } }

/* ── Selections (page.js): the link's banner, and the owner picking ── */
.cat-head { position: relative; }
.cat-send { justify-self: start; margin-top: 6px; }
.cat-sel { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--blue-wash); border: 1px solid rgba(8, 102, 239, 0.25); animation: cat-pop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.cat-sel p { flex: 1 1 240px; margin: 0; font-size: 15px; color: var(--ink-2); }
.cat-sel b { color: var(--ink); }
.pick-check { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; border: 2px solid #fff; background: rgba(20, 34, 44, 0.28); box-shadow: 0 2px 8px rgba(20, 34, 44, 0.25); transition: background 0.2s; }
.cat-card.is-picked .pick-check { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat; }
.cat-card.is-picked .cat-ph { box-shadow: 0 0 0 3px var(--blue); }
.pk-pop .pick-check { animation: pk-pop 0.4s cubic-bezier(0.34, 1.8, 0.64, 1); }
@keyframes pk-pop { 40% { transform: scale(1.25); } }
.pick-bar { position: fixed; z-index: 45; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--ink); color: #fff; box-shadow: 0 12px 30px -8px rgba(20, 34, 44, 0.5); white-space: nowrap; animation: pick-in 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.pick-bar > span { margin-right: 4px; font-size: 14px; }
.pick-bar .pick-cancel { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
@keyframes pick-in { from { opacity: 0; transform: translate(-50%, 16px); } }
@media (min-width: 900px) { .pick-bar { bottom: 28px; left: calc(50% + 124px); } }
body.is-picking .dock { display: none !important; }
.pick-thumbs { display: flex; gap: 6px; }
.pick-thumbs img, .pick-thumbs span { width: 52px; height: 64px; flex: none; border-radius: 10px; object-fit: cover; }
.pick-thumbs span { display: grid; place-items: center; background: var(--paper-deep); font: 600 12px/1 var(--sans); color: var(--ink-2); }
.pick-msg { margin-top: 14px; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #dcf8c6; color: #1b2a20; font-size: 14.5px; line-height: 1.4; }
.btn-wa { background: #1fa855; border-color: #1fa855; color: #fff; }
@media (prefers-reduced-motion: reduce) { .cat-sel, .pick-bar, .pk-pop .pick-check { animation: none; } }

/* Visitas (console.js): how much each reference was looked at. */
body.is-heat .cat-ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 calc(var(--h, 0) * 4px) var(--blue); background: rgba(8, 102, 239, calc(var(--h, 0) * 0.2)); }
.cat-heat { position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: 5px 9px; border-radius: 999px; background: rgba(20, 34, 44, 0.8); color: #fff; font: 600 11.5px/1 var(--sans); font-variant-numeric: tabular-nums; }

/* The catalog's sources, for the owner (page.js, catSources). */
.cat-srcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.cat-src { display: grid; justify-items: start; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform 0.15s var(--ease), border-color 0.2s; }
.cat-src:active { transform: scale(0.97); }
.cat-src-i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--paper-deep); }
.cat-src-i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cat-src b { font: 600 14px/1.2 var(--sans); }
.cat-src em { font: 600 12.5px/1.2 var(--sans); font-style: normal; color: var(--blue); }
.cat-src.is-on { border-color: rgba(31, 157, 85, 0.3); background: rgba(31, 157, 85, 0.06); }
.cat-src.is-on .cat-src-i { background: #1f9d55; color: #fff; }
.cat-src.is-on em { color: #1f9d55; }
@media (min-width: 640px) { .cat-srcs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cat-src { grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 2px; } .cat-src-i { grid-row: span 2; } }
#sheet-add.is-sheet-only .add-tabs { display: none; }

/* The example page (factory.json "example"): one plain line above the cover, saying so. */
.example-note {
  max-width: 34em;
  margin: 18px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: 500 14px/1.4 var(--sans);
}

/* A price WestOS estimated (page.js estimateOf): the tag says whose number it is. */
.ptag.is-est .ptag-est { color: var(--blue); }
.ptag.is-est .ptag-card { box-shadow: inset 0 0 0 1px rgba(8, 102, 239, 0.28); }
.ptag.is-est .ptag-est + .ptag-est { margin-top: 0; }