/* Santiago Montoya Art — design system (studio, home and legal pages).
   Calm and minimal: white, soft gray and near-black, generous whitespace,
   sentence case. The artwork is the only colourful, loud thing on a page —
   the only thing with a real shadow. The accent orange is for text links and
   the logo dot only, never a fill. System font, no web font download. */

:root {
  /* Color */
  --bg: #ffffff;
  --bg-alt: #f5f5f7;          /* alternating sections, art stage */
  --fill: #e8e8ed;            /* segmented control track */
  --text: #1d1d1f;
  --text-secondary: #6e6e73;  /* ≥4.5:1 on white — never lighter */
  --text-tertiary: #424245;   /* footer links */
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: #d2d2d7;   /* unselected option outline */
  --accent: #c2410c;          /* text links + logo dot only */
  --nav-bg: rgba(255, 255, 255, 0.82);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Radius */
  --r-pill: 980px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;

  /* The artwork's shadow: a print on a wall. Only the art gets one. */
  --shadow-art: 0 30px 60px -20px rgba(0, 0, 0, 0.25), 0 12px 24px -12px rgba(0, 0, 0, 0.12);

  /* Older names still used by markup built in app.js and by the legal
     pages — mapped onto the tokens above. */
  --color-bg: var(--bg);
  --color-surface: #ffffff;
  --color-text: var(--text);
  --color-divider: var(--border-strong);
  --color-accent: var(--accent);
  --color-accent-300: var(--accent);
  --color-neutral-700: var(--border-strong);
  --font-heading: var(--font);
  --font-body: var(--font);
  --font-heading-weight: 600;
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-pill: var(--r-pill);
  --tint-lilac-1: var(--bg-alt);

  --nav-h: 48px;
  --steps-h: 52px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { opacity: 0.72; }

[hidden] { display: none !important; }

::selection { background: rgba(0, 0, 0, 0.12); }

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

h1, h2, h3, h4 { font-family: var(--font); font-weight: 600; margin: 0; letter-spacing: -0.015em; }

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font: 400 15px/1.2 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.btn:hover { opacity: 1; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* One per screen. */
.btn-primary { background: var(--text); color: #fff; font-size: 17px; font-weight: 500; padding: 14px 28px; }
.btn-primary:hover:not(:disabled) { background: #000; }
a.btn-primary:hover { opacity: 1; }
.btn-secondary { background: var(--bg-alt); color: var(--text); }
.btn-secondary:hover:not(:disabled) { background: var(--fill); }
.btn-ghost { background: transparent; color: var(--accent); padding-left: 0; padding-right: 0; }
.btn-ghost:hover:not(:disabled) { opacity: 0.72; }
.btn-block { width: 100%; }

/* Text link CTA: accent text ending in " ›". */
.link-cta { color: var(--accent); font-size: 17px; font-weight: 400; white-space: nowrap; }
.link-cta::after { content: " \203A"; }

/* ---- Small pieces ---- */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--bg-alt);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

/* Cards are grouping only — no border, no fill. */
.card { display: flex; flex-direction: column; gap: 10px; }
.card-kicker { font-size: 14px; font-weight: 600; color: var(--text); }
.card-body { margin: 0; font-size: 15px; color: var(--text-secondary); }

.muted { color: var(--text-secondary); }
.muted-faint { color: var(--text-secondary); }

hr.rule { height: 1px; border: 0; margin: 0; background: var(--border); }

/* ---- Form fields ---- */

.field > label, .ff-lbl, .group-title, .field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.ff-lbl b { font-weight: 400; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font: 400 17px var(--font);
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
}
.input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #6e6e73 50%), linear-gradient(135deg, #6e6e73 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

input[type="range"] {
  width: 100%;
  height: 28px;
  margin: 0;
  accent-color: var(--text);
  cursor: pointer;
  background: transparent;
}

/* Option pills (sizes, orientation, formats, choices, patterns). */
.size-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.size-pill {
  min-height: 40px;
  padding: 8px 16px;
  margin: 1px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text);
  font: 400 15px var(--font);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.size-pill:hover { border-color: var(--text-secondary); }
.size-pill[aria-pressed="true"] { border: 2px solid var(--text); margin: 0; font-weight: 600; }

/* Segmented control (generator picker). */
.segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--fill);
}
.segmented-option {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: 400 13px/1.2 var(--font);
  cursor: pointer;
}
.segmented-option[aria-checked="true"] { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

/* Generator picker: one tile per generator — its artwork, then its name.
   Three across, or all five in a row where the controls column is wide
   enough for their names (a container query on the picker's own box). */
.generator-picker-wrap { container-type: inline-size; }
.generator-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@container (min-width: 540px) { .generator-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.generator-option {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  min-width: 0; padding: 4px 4px 8px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: #fff; color: var(--text-secondary);
  font: 400 13px/1.25 var(--font); text-align: center; cursor: pointer;
}
.generator-option img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 8px; background: var(--fill);
}
.generator-option span { padding: 0 4px; }
.generator-option:hover { border-color: var(--text-secondary); color: var(--text); }
.generator-option[aria-checked="true"] { border: 2px solid var(--text); padding: 3px 3px 7px; color: var(--text); font-weight: 600; }
.generator-option:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Palette options: four dots and the name. */
.palette-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.palette-swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  margin: 1px;
  width: calc(100% - 2px);
  text-align: left;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text);
  cursor: pointer;
}
.palette-swatch:hover { border-color: var(--text-secondary); }
.palette-swatch[aria-pressed="true"] { border: 2px solid var(--text); margin: 0; width: 100%; padding: 0 15px; }
.palette-swatch-strip { display: flex; gap: 4px; flex: 0 0 auto; }
.palette-swatch-strip span { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.palette-swatch-strip span:nth-child(n+5) { display: none; }
.palette-swatch-name { font-size: 13px; line-height: 1.25; min-width: 0; padding: 6px 0; }
/* A narrow controls column: one palette per row, so names never squeeze. */
.palette-grid { container-type: inline-size; }
@container (max-width: 300px) { .palette-swatch-strip span { width: 12px; height: 12px; } }
@media (max-width: 380px) { .palette-grid { grid-template-columns: minmax(0, 1fr); } }

.custom-palette { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.custom-palette-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.custom-palette-title { flex: 0 0 100%; font-size: 13px; color: var(--text-secondary); }
.custom-colour-cell { position: relative; display: inline-flex; }
.custom-colour { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); cursor: pointer; }
.custom-colour input { width: 150%; height: 150%; margin: -25%; padding: 0; border: 0; cursor: pointer; background: none; }
.custom-colour-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--fill); color: var(--text); font-size: 12px; line-height: 1; padding: 0; cursor: pointer; }
.custom-colour-add { width: 36px; height: 36px; border-radius: 50%; border: 1px dashed var(--border-strong); background: #fff; color: var(--text-secondary); font-size: 18px; cursor: pointer; }

.qty-stepper { display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--bg-alt); overflow: hidden; }
.qty-stepper button { width: 44px; height: 44px; cursor: pointer; background: transparent; border: none; color: var(--text); font-size: 18px; }
.qty-stepper button:hover { background: var(--fill); }
.qty-stepper span { min-width: 36px; text-align: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Navigation ---- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--nav-h);
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.site-nav-inner {
  max-width: 1100px;
  height: 100%;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.is-studio .site-nav-inner { max-width: 1200px; }
.site-brand { display: flex; align-items: center; gap: 8px; margin-right: auto; color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.site-brand:hover { opacity: 1; }
/* the Orbit mark (as in the favicon): a ring in the text colour, the moon in the accent */
.nav-brand-mark { display: block; flex: 0 0 auto; width: 17px; height: 17px; }
.site-links { display: flex; align-items: center; gap: 24px; }
.site-links a { color: var(--text); font-size: 12px; }
.site-tools { display: flex; align-items: center; gap: 4px; margin-right: -12px; }
.lang-toggle {
  min-width: 44px; height: 44px; padding: 0 6px;
  border: 0; background: none; cursor: pointer;
  color: var(--text-secondary); font: 400 12px var(--font);
}
.lang-toggle:hover { color: var(--text); }
.nav-cart {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; background: none; cursor: pointer; color: var(--text); padding: 0;
}
.nav-cart svg { display: block; }
.nav-cart-count {
  position: absolute; top: 7px; right: 5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--text); color: #fff;
  font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Studio steps bar, under the nav. */
.steps-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 25;
  height: var(--steps-h);
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.steps-bar ol {
  list-style: none;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 32px;
  overflow-x: auto;
  scrollbar-width: none;
}
.steps-bar ol::-webkit-scrollbar { display: none; }
.nav-step {
  padding: 12px 0;
  border: 0;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text-secondary);
  font: 400 13px var(--font);
}
.nav-step:hover { color: var(--text); }
.nav-step[aria-current="step"] { color: var(--text); font-weight: 600; }

/* ---- Studio layout ---- */

main.studio-main { max-width: 1200px; margin: 0 auto; padding: 40px 22px 120px; }
.step-label { font-size: 13px; color: var(--text-secondary); margin: 0 0 4px; }
.step-title { font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; }

/* Create: preview column and controls column, side by side, stacking when
   there isn't room. */
.create-layout { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
/* The artwork stays put while the controls scroll: it sticks exactly where
   it starts (under the bars, at main's top padding), and the layout reaches
   to the page bottom (main's bottom padding becomes the controls column's,
   since a sticky box can't enter its parent's own padding) so it is never
   pushed up at the end either. */
.create-layout { margin-bottom: -120px; }
.create-controls { padding-bottom: 120px; }
.create-preview { flex: 999 1 560px; min-width: 0; position: sticky; top: calc(var(--nav-h) + var(--steps-h) + 40px); }
.create-controls { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.control-group { display: flex; flex-direction: column; }
.create-intro p { margin: 6px 0 0; font-size: 15px; color: var(--text-secondary); }
.button-row { display: flex; gap: 10px; }
.button-row .btn { flex: 1 1 0; }
.next-caption { margin: -20px 0 0; text-align: center; font-size: 13px; color: var(--text-secondary); }
.share-row { margin-top: -20px; text-align: center; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; }
.share-status { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere; }
.share-status:empty { display: none; }
.share-status a { color: var(--accent); }
.fineprint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }

/* The art stage: soft gray, the artwork centred like a print on a wall. */
.canvas-stage, .preview-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  background: var(--bg-alt);
  padding: 64px;
}
/* svh, not dvh: the small viewport height doesn't change as a phone or
   tablet browser shows and hides its bars while scrolling, so the stage
   (and the artwork in it) keeps its size. */
.canvas-stage { height: min(calc(100svh - var(--nav-h) - var(--steps-h) - 120px), 760px); min-height: 420px; }
.canvas-stage canvas {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 460px);
  max-height: 100%;
  box-shadow: var(--shadow-art);
}
.canvas-stage canvas.wide { max-width: 100%; }
/* a module generator computing its piece off the page (see setComputing) */
.compute-note {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2; margin: 0;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font-size: 13px; white-space: nowrap; pointer-events: none; animation: compute-pulse 1.4s ease-in-out infinite;
}
.compute-note[hidden] { display: none; }
@keyframes compute-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .compute-note { animation: none; } }
.stage-caption { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--text-secondary); }
.stage-caption b { font-weight: 400; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.stage-caption .sep::before { content: " · "; }

/* Format picker and module controls. */
.format-ratio { margin-top: 8px; }
.field-row { display: flex; flex-direction: column; gap: 24px; }
#moduleControls > .field-row + .advanced-controls { margin-top: 0; }
#moduleControls { display: flex; flex-direction: column; gap: 24px; }
.silhouette-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }

.advanced-controls { border-top: 1px solid var(--border); padding-top: 20px; }
.advanced-controls > summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.advanced-controls > summary::-webkit-details-marker { display: none; }
.advanced-controls > summary::after { content: "+"; font-weight: 400; font-size: 20px; color: var(--text-secondary); }
.advanced-controls[open] > summary::after { content: "\2212"; }
.advanced-controls > .field-row { margin-top: 16px; }

/* Murmur: Play / Pause and Orbit / Rotate over the artwork, bottom left. */
.flock-tools { position: absolute; left: 20px; bottom: 20px; z-index: 3; display: flex; align-items: center; gap: 8px; }
.flock-tools[hidden] { display: none; }
.stage-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.9); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.stage-btn svg[hidden] { display: none; }
.stage-seg { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: rgba(232, 232, 237, 0.92); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.stage-seg button {
  min-height: 38px; padding: 6px 14px; border: 0; border-radius: var(--r-pill); background: transparent; cursor: pointer;
  color: var(--text); font: 400 13px var(--font);
}
.stage-seg button[aria-checked="true"] { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
#createDisplay:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }

/* Murmur: the silhouette weights grid. */
.bird-weights { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; margin-top: 4px; }
.bird-weight {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 8px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: #fff; cursor: pointer;
}
.bird-weight canvas { width: 48px; height: 34px; display: block; }
.bird-weight[data-w="0"] canvas { opacity: 0.18; }
.bird-dots { display: flex; gap: 3px; height: 5px; }
.bird-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); }
.bird-dots i.on { background: var(--text); }
.bird-presets { margin-top: 10px; }

/* Loupe and zoom hints. */
.loupe {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  width: 240px; height: 240px; border-radius: 50%;
  background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.08);
}
#createDisplay, #previewCanvas { cursor: zoom-in; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.zoom-hint {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.85);
  font-size: 12px; color: var(--text-secondary); pointer-events: none;
  max-width: calc(100% - 32px); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Touch screens: a magnifier toggle (bottom-right of the stage) switches
   one finger between placing the piece and magnifying it; the hint sits
   above the artwork. (.touch-ui on <html>, set by app.js.) */
.touch-hint, .canvas-tools { display: none; }
.touch-ui .zoom-hint { display: none; }
/* On touch screens the hint sits above the artwork, in the flow, so it
   never covers it (two lines tall, so switching hints doesn't shift it). */
.touch-ui .canvas-stage, .touch-ui .preview-stage { flex-direction: column; gap: 14px; padding-top: 24px; }
.touch-ui .touch-hint {
  display: block; margin: 0; width: 100%; min-height: 2.7em;
  font-size: 13px; line-height: 1.35; text-align: center; color: var(--text-secondary);
}
.touch-ui .canvas-stage canvas { max-height: calc(100% - 3.6em); }
/* …and the progress pill moves left of the magnifier. */
.touch-ui .canvas-tools { display: block; position: absolute; right: 20px; bottom: 20px; z-index: 3; }
.magnify-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; padding: 0; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.9); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.magnify-toggle[aria-pressed="true"] { background: var(--text); color: #fff; }
.magnify-toggle[aria-pressed="true"] .mag-plus-v { display: none; }

/* ---- Product step ---- */

.step-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
.step-head p { margin: 0; font-size: 17px; color: var(--text-secondary); max-width: 620px; }
.category-chips { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--fill); width: fit-content; max-width: 100%; overflow-x: auto; margin-bottom: 40px; }
.category-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 6px 16px;
  border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  color: var(--text); font: 400 13px var(--font); white-space: nowrap;
}
.category-chip[aria-pressed="true"] { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.category-chip-count { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-weight: 400; }

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 40px; }
.product-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 0; border: 0; background: none; cursor: pointer;
  text-align: left; color: inherit; font: inherit;
}
.product-card-photo {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 16 / 10; border-radius: var(--r-md); background: var(--bg-alt); padding: 28px;
}
.product-card-photo .mockup-plate { width: 50%; }
.product-card-body { display: flex; flex-direction: column; gap: 4px; }
.product-card-name { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.product-card-meta { font-size: 15px; color: var(--text-secondary); }
.product-card-footer { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; }
.product-card-price { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.product-card-arrow { padding: 0; border: 0; background: none; cursor: pointer; color: var(--accent); font: 400 15px var(--font); }
.product-card-arrow::after { content: " \203A"; }
.product-card:hover .product-card-name { opacity: 0.72; }

/* Mockups: the print on its product, quietly staged. */
.mockup-ground { background: var(--bg-alt); }
.mockup-plate { background: #fff; padding: 12px; line-height: 0; box-shadow: var(--shadow-art); }
.mockup-plate[data-family="canvas"] { background: #f8f6ef; padding: 6px; }
.mockup-plate[data-family="metal"] { background: #d4d6db; padding: 4px; }
.mockup-plate canvas { display: block; width: 100%; height: auto; }

/* ---- Preview step ---- */

.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; font-size: 13px; color: var(--text-secondary); }
.crumbs .btn-ghost { min-height: 32px; font-size: 13px; }
.preview-layout { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.preview-layout > :first-child { flex: 999 1 560px; min-width: 0; position: sticky; top: calc(var(--nav-h) + var(--steps-h) + 24px); }
.preview-side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.preview-stage { min-height: 520px; }
.preview-stage .mockup-plate { padding: 22px; }
.preview-stage canvas { max-width: 100%; max-height: 56vh; width: auto; height: auto; }
/* Room mockups: the print framed on a wall (public/studio-mockups.js). */
.room-shot { display: block; width: 100%; height: auto; }
.preview-stage .room-shot { width: 100%; height: auto; max-width: none; max-height: none; border-radius: inherit; }
.preview-stage.is-room { padding: 0; min-height: 0; overflow: hidden; display: block; }
.preview-stage.is-room .mockup-plate, .preview-stage.is-room .zoom-hint, .preview-stage.is-room .canvas-tools, .preview-stage.is-room .touch-hint { display: none; }
.preview-stage .room-shot { transition: opacity 0.25s ease; }
.preview-stage.is-hanging .room-shot { opacity: 0.55; }
.room-shot-status {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); margin: 0;
  padding: 6px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.92);
  font-size: 13px; color: var(--text-secondary); white-space: nowrap;
}
.view-picker { display: flex; gap: 10px; margin-top: 16px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.view-chip {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--text-secondary); font-size: 12px;
}
.view-chip-pic {
  display: grid; place-items: center; width: 64px; height: 80px; overflow: hidden;
  border-radius: var(--r-sm, 8px); background: var(--bg-alt); outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color 0.15s ease;
}
.view-chip-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.view-chip-pic canvas { max-width: 70%; max-height: 70%; display: block; box-shadow: var(--shadow-art); }
.view-chip[aria-pressed="true"] { color: var(--text); }
.view-chip[aria-pressed="true"] .view-chip-pic { outline-color: var(--text); }
.view-chip:hover .view-chip-pic { outline-color: var(--border, rgba(0,0,0,0.2)); }
.view-chip[aria-pressed="true"]:hover .view-chip-pic { outline-color: var(--text); }
.product-card-photo .room-shot { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.35s ease; }
.product-card-photo.has-room .room-shot { opacity: 1; }

.preview-name { font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; margin: 4px 0 8px; }
.preview-price { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Secure-payment note and payment icons. */
/* "Use this address for billing", under the shipping address (addresses outside Colombia) */
.check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check-row[hidden] { display: none; }
.check-row input { width: 16px; height: 16px; margin: 0; accent-color: var(--text); }
/* PayPal's buttons (public/studio-app/8-checkout.js), dimmed until the shipping quote is in */
.paypal-buttons { position: relative; z-index: 0; }
.paypal-buttons.is-waiting { opacity: 0.5; }
.secure-pay { display: flex; flex-direction: column; gap: 8px; }
.secure-pay-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.secure-pay-body { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.pay-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 28px; padding: 4px 6px; background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.pay-icon img { display: block; max-width: 100%; max-height: 100%; }
.pay-icon-text { width: auto; padding: 4px 9px; font-size: 11px; font-weight: 600; color: var(--text); }

/* ---- Cart and checkout ---- */

.cart-line { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; }
.cart-line-thumb { display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 64px; border-radius: var(--r-sm); overflow: hidden; }
.cart-line-thumb canvas { max-width: 74%; max-height: 48px; }
.checkout-layout { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.checkout-form { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.checkout-summary { flex: 1 1 340px; min-width: 0; position: sticky; top: calc(var(--nav-h) + var(--steps-h) + 24px); }
.summary-panel { background: var(--bg-alt); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.form-section { display: flex; flex-direction: column; gap: 16px; }
.form-section-title { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.field-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field-grid-phone { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
.field > label { margin-bottom: 6px; }
.meta-row { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.meta-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.meta-row.total { font-size: 17px; }
.legal-note { margin: 0; font-size: 12px; line-height: 1.5; text-align: center; color: var(--text-secondary); }
.cart-notice { margin: 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--bg-alt); font-size: 13px; line-height: 1.45; }
.summary-panel .cart-notice { background: #fff; }

/* Cart drawer. */
.dialog-backdrop { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: flex-end; background: rgba(0, 0, 0, 0.32); }
.dialog {
  width: min(400px, 100%); height: 100%; overflow-y: auto;
  background: #fff; padding: 24px 24px 28px;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.12);
}
.dialog-head { display: flex; align-items: center; gap: 12px; }
.dialog-head h4 { margin: 0 auto 0 0; font-size: 21px; }
.dialog-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bg-alt); cursor: pointer; color: var(--text); font-size: 15px; }
.dialog-close:hover { background: var(--fill); }
.drawer-total { display: flex; justify-content: space-between; align-items: baseline; }
.drawer-total b { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Confirmation and tracking ---- */

#confirmContent h3, #trackContent .step-title { font-size: 40px; letter-spacing: -0.025em; line-height: 1.1; }
#confirmContent .card, #trackContent .card { background: var(--bg-alt); border-radius: var(--r-lg); padding: 24px; }
.track-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.track-step { display: flex; flex-direction: column; gap: 12px; padding-right: 16px; }
.track-step-row { display: flex; align-items: center; }
.track-dot { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; }
.track-bar { flex: 1; height: 2px; }

.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--text-secondary); padding: 10px 8px; border-bottom: 1px solid var(--border); }
.table td { padding: 10px 8px; border-bottom: 1px solid var(--border); }

/* Create step, side by side (tablet and desktop): the layout fills the
   screen under the bars and the page itself doesn't scroll — only the
   controls column does, so the artwork never moves (and the browser never
   repaints it mid-scroll). Phones and narrow windows stack the controls
   under the artwork and scroll the page as usual. */
@media (min-width: 901px) {
  html[data-step="create"], html[data-step="create"] body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  html[data-step="create"] main.studio-main { height: calc(100svh - var(--nav-h) - var(--steps-h)); padding-bottom: 0; }
  html[data-step="create"] .step-panel[data-step="create"] { height: 100%; }
  html[data-step="create"] .create-layout { height: 100%; flex-wrap: nowrap; margin-bottom: 0; }
  html[data-step="create"] .create-preview { position: static; }
  html[data-step="create"] .create-controls {
    height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 0 10px 40px 3px;
  }
  /* (its sections keep their size and overflow, rather than squeezing) */
  html[data-step="create"] .create-controls > * { flex-shrink: 0; }
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
  .product-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .create-preview, .preview-layout > :first-child, .checkout-summary { position: static; }
}

@media (max-width: 640px) {
  .site-links { display: none; }
  .steps-bar ol { gap: 16px; }
  main.studio-main { padding: 24px 16px 96px; }
  .create-layout { margin-bottom: -96px; }
  .create-controls { padding-bottom: 96px; }
  .step-title, .preview-name, #confirmContent h3, #trackContent .step-title { font-size: 32px; }
  .create-layout, .preview-layout, .checkout-layout { gap: 32px; }
  .canvas-stage, .preview-stage { padding: 40px 24px; }
  .canvas-stage { height: auto; min-height: 0; }
  .canvas-stage canvas { max-height: 56svh; }
  .preview-stage { min-height: 360px; }
  .field-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .track-timeline { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .summary-panel { padding: 22px; }
}

/* Owner-only "Save as piece" (pieces shared on Pinterest) */
.piece-admin { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.piece-admin-status { margin: 8px 0 0; font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere; }
.piece-admin-status a { color: var(--accent); }

/* "Frame not included" under the price (mockups and pins may show frames) */
.frame-note { margin: -4px 0 0; font-size: 13px; color: var(--text-secondary); }

/* Stipplebloom: the fonts its Text dots and Book letters are drawn with on
   the canvas (static instances; the print server registers the same files'
   .ttf — see lib/stipplebloomServer.js). Loaded only when a design uses them. */
@font-face { font-family: "SB Lit 200"; src: url("/fonts/stipplebloom/sb-lit-200-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Lit 250"; src: url("/fonts/stipplebloom/sb-lit-250-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Lit 300"; src: url("/fonts/stipplebloom/sb-lit-300-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Lit 350"; src: url("/fonts/stipplebloom/sb-lit-350-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Lit 400"; src: url("/fonts/stipplebloom/sb-lit-400-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Lit 450"; src: url("/fonts/stipplebloom/sb-lit-450-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Lit 500"; src: url("/fonts/stipplebloom/sb-lit-500-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Lit 550"; src: url("/fonts/stipplebloom/sb-lit-550-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Lit 600"; src: url("/fonts/stipplebloom/sb-lit-600-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Lit 650"; src: url("/fonts/stipplebloom/sb-lit-650-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Lit 700"; src: url("/fonts/stipplebloom/sb-lit-700-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Lit 750"; src: url("/fonts/stipplebloom/sb-lit-750-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Lit 800"; src: url("/fonts/stipplebloom/sb-lit-800-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Lit 850"; src: url("/fonts/stipplebloom/sb-lit-850-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Lit 900"; src: url("/fonts/stipplebloom/sb-lit-900-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Grotesk"; src: url("/fonts/stipplebloom/sb-grotesk-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Serif"; src: url("/fonts/stipplebloom/sb-serif-v2.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "SB Round"; src: url("/fonts/stipplebloom/sb-round-v2.woff2") format("woff2"); font-display: block; }

/* Stipplebloom: text controls (a letter, the characters to stipple with,
   your own book text) and the book search. */
.module-text { width: 100%; }
.module-text.letter { width: 4.5em; font-size: 22px; text-align: center; }
.module-textarea { width: 100%; min-height: 120px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.4; }
.book-field { display: flex; flex-direction: column; gap: 8px; }
.book-current { font-size: 15px; font-weight: 600; line-height: 1.35; }
.book-status { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--text-secondary); }
.book-status.is-error { color: var(--accent); }
.book-search { width: 100%; }
.book-results { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; border: 1px solid var(--border-strong); border-radius: var(--r-sm); }
.book-results li + li { border-top: 1px solid var(--border); }
.book-heading, .book-empty { padding: 10px 12px; font-size: 12px; color: var(--text-secondary); }
.book-heading { text-transform: uppercase; letter-spacing: 0.06em; }
.book-not-yet { padding: 10px 12px; font-size: 13px; line-height: 1.4; color: var(--text-secondary); background: var(--bg-alt); }
.book-option { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; border: 0; background: none; font: inherit; font-size: 14px; text-align: left; color: var(--text); cursor: pointer; }
.book-option:hover, .book-option:focus-visible { background: var(--bg-alt); }
.book-option[aria-pressed="true"] { background: var(--fill); }
.book-title { font-weight: 500; line-height: 1.3; }
.book-author { font-size: 13px; color: var(--text-secondary); }
.book-note { margin: 0; font-size: 12px; color: var(--text-secondary); }
.module-file { margin-top: 8px; align-self: flex-start; }

/* Sets: diptychs and triptychs (public/studio-app/6b-sets.js) */
.set-controls { display: flex; flex-direction: column; gap: 16px; }
.set-controls .fineprint:empty, #createSetPicker .set-note:empty { display: none; }
.preview-stage .mockup-plate.is-set { background: none; box-shadow: none; padding: 0; }
.preview-stage .mockup-plate.is-set canvas { max-height: 46vh; }
.price-was { margin-left: 8px; font-size: 15px; font-weight: 400; color: var(--text-secondary); }
.price-note { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--accent); }
.cart-line-thumb canvas { max-width: 86%; }

/* The Create step's set picker: the set, its layout, which print is being
   edited, each print's Fill — rows spaced like the format picker above */
#createSetPicker { margin-top: 28px; }
#createSetPicker .set-layout { margin-top: 8px; }
#createSetPicker .set-editing { margin-top: 20px; }
#createSetPicker .set-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }