/* ============================================================
   SUIT BUILDER — styles
   ------------------------------------------------------------
   Warm off-white, ink text, tailor-gold accent. Spacing scale
   4 / 8 / 12 / 16 / 24 / 32 / 48. No external fonts.
   ============================================================ */

:root {
  --bg: #f6f3ee;
  --surface: #fffdf9;
  --surface-2: #f0ebe3;
  --ink: #1d1d1b;
  --muted: #6b665e;
  --line: #e2ddd3;
  --line-strong: #cfc8bb;
  --accent: #8b6b3e;
  --accent-ink: #6f5430;
  --accent-soft: #f1e9dc;
  --accent-soft-2: #e6d9c3;
  --danger: #a3312e;
  --danger-soft: #f7e6e4;
  --whatsapp: #1f7a4d;
  --whatsapp-dark: #176239;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;

  --stepbar-h: 56px;
  --bar-h: 72px;
  --shadow: 0 1px 2px rgba(29, 29, 27, 0.04), 0 10px 28px rgba(29, 29, 27, 0.06);
  --focus: 0 0 0 3px rgba(139, 107, 62, 0.32);
  --ease: 160ms ease;
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
button { font: inherit; color: inherit; }
svg { display: block; }
a { color: var(--accent-ink); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

.sb-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.sb-skip {
  position: absolute; left: var(--s4); top: -60px;
  padding: var(--s2) var(--s4);
  background: var(--ink); color: #fff;
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top var(--ease);
}
.sb-skip:focus { top: var(--s4); }

.sb-muted { color: var(--muted); }
.sb-small { font-size: 13px; }
.sb-eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 var(--s1);
}

/* ---------- buttons ---------- */
.sb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}
.sb-btn:active { transform: translateY(1px); }
.sb-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.sb-btn--primary { background: var(--ink); color: #fff; }
.sb-btn--primary:hover:not(:disabled) { background: #000; }
.sb-btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.sb-btn--ghost:hover:not(:disabled) { background: var(--surface); border-color: var(--ink); }
.sb-btn--accent { background: var(--accent); color: #fff; }
.sb-btn--accent:hover { background: var(--accent-ink); }
.sb-btn--whatsapp { background: var(--whatsapp); color: #fff; }
.sb-btn--whatsapp:hover { background: var(--whatsapp-dark); }
.sb-btn--small { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.sb-btn svg { flex: none; }

.sb-link {
  background: none; border: 0; padding: 0;
  color: var(--accent-ink); font-weight: 600; font-size: 14px;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.sb-link:hover { color: var(--ink); }

.sb-iconbtn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.sb-iconbtn:hover { border-color: var(--ink); }
.sb-iconbtn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- header ---------- */
.sb-header__inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s5);
}
.sb-brand { display: flex; align-items: center; gap: var(--s3); }
.sb-brand__mark { width: 36px; height: 36px; color: var(--accent); flex: none; }
.sb-brand__eyebrow {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink); line-height: 1.2;
}
.sb-brand__title { font-family: var(--serif); font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; }

/* ---------- step bar ---------- */
.sb-steps {
  position: sticky; top: 0; z-index: 15;
  background: rgba(246, 243, 238, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sb-steps__list {
  max-width: 1280px; margin: 0 auto;
  height: var(--stepbar-h);
  display: flex; align-items: center; justify-content: center; gap: var(--s1);
  padding: 0 var(--s4);
  overflow-x: auto;
  scrollbar-width: none;
}
.sb-steps__list::-webkit-scrollbar { display: none; }
.sb-step {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 6px 12px 6px 6px;
  border: 0; border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-size: 14px; white-space: nowrap;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.sb-step:hover { color: var(--ink); background: rgba(29, 29, 27, 0.04); }
.sb-step__num {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: 12px; font-weight: 600;
  background: var(--surface);
  color: var(--muted);
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.sb-step__num svg { width: 13px; height: 13px; }
.sb-step.is-current { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.sb-step.is-current .sb-step__num { background: var(--ink); color: #fff; border-color: var(--ink); }
.sb-step.is-done { color: var(--ink); }
.sb-step.is-done .sb-step__num { background: var(--accent); color: #fff; border-color: var(--accent); }
.sb-step__label--short { display: none; }

/* ---------- layout ---------- */
.sb-main {
  max-width: 1280px; margin: 0 auto;
  padding: var(--s5) var(--s5) calc(var(--bar-h) + var(--s7));
  display: grid;
  grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr);
  gap: var(--s6);
  align-items: start;
}

/* ---------- preview ---------- */
.sb-preview { position: sticky; top: calc(var(--stepbar-h) + var(--s4)); }
.sb-preview__frame {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.sb-preview__stage {
  position: relative;
  height: calc(100vh - var(--stepbar-h) - var(--bar-h) - 150px);
  min-height: 400px;
  max-height: 760px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 85%, rgba(29, 29, 27, 0.06), transparent 60%),
    linear-gradient(180deg, #fffdf9 0%, #f6f3ee 100%);
  padding: var(--s3);
}
.sb-preview__stage > svg { width: 100%; height: 100%; }
.sb-preview__controls {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.sb-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  padding: 3px;
}
.sb-seg__btn {
  border: 0; background: transparent;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.sb-seg__btn[aria-pressed="true"] { background: var(--ink); color: #fff; }

.sb-skins { display: flex; gap: var(--s2); }
.sb-skin {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(29, 29, 27, 0.18);
  background: var(--swatch, #e4b893);
  box-shadow: inset 0 0 0 2px var(--surface);
  cursor: pointer;
  padding: 0;
  transition: transform var(--ease), box-shadow var(--ease);
}
.sb-skin:hover { transform: scale(1.08); }
.sb-skin[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 2px var(--ink); }
.sb-skin:focus-visible { outline-offset: 3px; }

.sb-placeholder {
  width: min(100%, 280px);
  aspect-ratio: 420 / 715;
  max-height: 100%;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2);
  color: var(--muted);
  text-align: center;
  padding: var(--s5);
  background: rgba(255, 253, 249, 0.6);
}
.sb-placeholder__mark { width: 44px; height: 44px; color: var(--line-strong); }
.sb-placeholder__title { font-family: var(--serif); font-size: 18px; color: var(--ink); }

/* ---------- option panel ---------- */
.sb-panel { min-width: 0; }
.sb-panel:focus { outline: none; }
.sb-panel__head { margin-bottom: var(--s5); }
.sb-panel__title { font-family: var(--serif); font-size: 32px; line-height: 1.15; letter-spacing: -0.01em; }
.sb-panel__title:focus { outline: none; }
.sb-panel__sub { color: var(--muted); margin-top: var(--s2); max-width: 56ch; }

.sb-groups { display: grid; gap: var(--s6); }
.sb-group { min-width: 0; }
.sb-group__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin-bottom: var(--s3);
}
.sb-group__title { font-family: var(--serif); font-size: 20px; line-height: 1.25; }
.sb-group__value { font-size: 13px; color: var(--muted); white-space: nowrap; }
.sb-group__help { color: var(--muted); font-size: 14px; margin: calc(-1 * var(--s2)) 0 var(--s3); max-width: 60ch; }

/* choice cards */
.sb-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s2);
}
.sb-choice {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 60px;
  min-width: 0; /* let the card shrink to its grid track instead of growing to its longest word */
  padding: var(--s3) var(--s4);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.sb-choice:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.sb-choice.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #fbf8f2; }
.sb-choice__glyph {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  transition: background var(--ease), color var(--ease);
}
.sb-choice__glyph svg { width: 26px; height: 26px; }
.sb-choice.is-selected .sb-choice__glyph { background: var(--accent-soft); color: var(--accent-ink); }
.sb-choice__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sb-choice__label { font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.sb-choice__desc { font-size: 13px; color: var(--muted); line-height: 1.35; }
.sb-choice__price {
  flex: none;
  font-size: 12px; font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  white-space: nowrap;
}

/* colour swatches */
.sb-colors { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sb-color {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(29, 29, 27, 0.16);
  background: var(--swatch, #ccc);
  box-shadow: inset 0 0 0 2px var(--surface);
  cursor: pointer;
  padding: 0;
  display: grid; place-items: center;
  color: #fff;
  transition: transform var(--ease), box-shadow var(--ease);
}
.sb-color:hover { transform: scale(1.06); }
.sb-color.is-light { color: var(--ink); }
.sb-color.is-selected { box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 2px var(--accent); }
.sb-color:focus-visible { outline-offset: 3px; }
.sb-color__check { opacity: 0; transition: opacity var(--ease); }
.sb-color__check svg { width: 16px; height: 16px; }
.sb-color.is-selected .sb-color__check { opacity: 1; }
.sb-color--paisley {
  background-image:
    radial-gradient(circle at 32% 34%, rgba(255, 255, 255, 0.38) 0 17%, transparent 19%),
    radial-gradient(circle at 68% 66%, rgba(255, 255, 255, 0.28) 0 13%, transparent 15%),
    radial-gradient(circle at 66% 30%, rgba(255, 255, 255, 0.18) 0 8%, transparent 10%);
}

/* inputs */
.sb-field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.sb-field__label { font-size: 14px; font-weight: 600; }
.sb-field__label .sb-optional { font-weight: 400; color: var(--muted); }
.sb-field__hint { font-size: 12.5px; color: var(--muted); }
.sb-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.sb-input::placeholder { color: #9a948a; }
.sb-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.sb-input[aria-invalid="true"] { border-color: var(--danger); }
.sb-input--short { max-width: 200px; }
.sb-textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.sb-unitwrap { position: relative; }
.sb-unitwrap .sb-input { padding-right: 44px; }
.sb-unit {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--muted);
  pointer-events: none;
}
.sb-mfield.is-invalid .sb-field__hint { color: var(--danger); }
.sb-form__error {
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
  padding: var(--s2) var(--s3);
  font-size: 14px;
  margin-top: var(--s3);
}

/* ---------- fabric step ---------- */
.sb-fabric-tools { display: grid; gap: var(--s4); margin-bottom: var(--s5); }
.sb-search { position: relative; }
.sb-search__icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--muted); pointer-events: none;
}
.sb-search__input { padding-left: 42px; border-radius: var(--radius-pill); }
.sb-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sb-filters { display: grid; gap: var(--s2); }
.sb-filter { display: flex; align-items: flex-start; gap: var(--s3); min-width: 0; }
.sb-filter__label {
  flex: none; width: 76px;
  padding-top: 7px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.sb-chips { display: flex; flex-wrap: wrap; gap: var(--s2); min-width: 0; }
.sb-chip {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.sb-chip:hover { border-color: var(--ink); }
.sb-chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.sb-filters__clear { justify-self: start; margin-left: calc(76px + var(--s3)); }

.sb-fabric-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  margin-bottom: var(--s3);
  font-size: 14px; color: var(--muted);
}
.sb-fabric-selected strong { color: var(--ink); font-weight: 600; }
.sb-fabrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s3);
}
.sb-fabric {
  position: relative;
  display: flex; flex-direction: column;
  padding: 0;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.sb-fabric:hover { box-shadow: var(--shadow); border-color: var(--line-strong); transform: translateY(-1px); }
.sb-fabric.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow); }
.sb-fabric__swatch { position: relative; display: block; background: var(--surface-2); }
.sb-fabric__swatch::before { content: ""; display: block; padding-top: 100%; }
.sb-fabric__swatch > svg, .sb-swatch-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.sb-fabric__badges { position: absolute; left: var(--s2); top: var(--s2); display: flex; gap: var(--s1); }
.sb-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--radius-pill);
  background: rgba(255, 253, 249, 0.94); color: var(--ink);
}
.sb-badge--new { background: var(--accent); color: #fff; }
.sb-fabric__check {
  position: absolute; right: var(--s2); top: var(--s2);
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  opacity: 0; transform: scale(0.8);
  transition: opacity var(--ease), transform var(--ease);
}
.sb-fabric__check svg { width: 13px; height: 13px; }
.sb-fabric.is-selected .sb-fabric__check { opacity: 1; transform: scale(1); }
.sb-fabric__body { display: flex; flex-direction: column; gap: 2px; padding: var(--s3); }
.sb-fabric__name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.sb-fabric__meta { font-size: 12.5px; color: var(--muted); }
.sb-fabric__foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-top: var(--s1); }
.sb-fabric__price { font-family: var(--serif); font-size: 16px; }
.sb-fabric__season { font-size: 12px; color: var(--muted); }
.sb-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--s6) var(--s4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  display: grid; gap: var(--s2); justify-items: center;
}

/* ---------- measurements ---------- */
.sb-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s2); }
.sb-radio {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.sb-radio:hover { border-color: var(--line-strong); }
.sb-radio.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #fbf8f2; }
.sb-radio__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sb-radio__mark {
  flex: none;
  width: 18px; height: 18px; margin-top: 3px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.sb-radio__input:checked + .sb-radio__mark { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3.5px var(--surface); }
.sb-radio__input:focus-visible + .sb-radio__mark { outline: 2px solid var(--accent); outline-offset: 2px; }
.sb-radio__text { display: flex; flex-direction: column; gap: 2px; }
.sb-radio__label { font-weight: 600; }
.sb-radio__desc { font-size: 13px; color: var(--muted); line-height: 1.35; }

.sb-pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sb-pill {
  min-width: 56px; min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.sb-pill:hover { border-color: var(--ink); }
.sb-pill[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.sb-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s4) var(--s4); }
.sb-mfield { display: flex; flex-direction: column; gap: var(--s1); }
.sb-howto { margin-top: var(--s1); font-size: 13px; color: var(--muted); }
.sb-howto summary {
  cursor: pointer; color: var(--accent-ink); font-weight: 600;
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-sm);
}
.sb-howto summary::-webkit-details-marker { display: none; }
.sb-howto summary::before {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--ease);
}
.sb-howto[open] summary::before { transform: rotate(45deg); }
.sb-howto p { margin-top: var(--s1); line-height: 1.45; }

.sb-note {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.sb-note__icon { flex: none; width: 28px; height: 28px; color: var(--accent); }
.sb-note__title { font-family: var(--serif); font-size: 18px; margin-bottom: var(--s1); }

/* ---------- summary ---------- */
.sb-recap { display: grid; gap: var(--s4); }
.sb-recap__section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
}
.sb-recap__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
.sb-recap__title { font-family: var(--serif); font-size: 20px; }
.sb-recap__fabric { display: flex; align-items: center; gap: var(--s4); }
.sb-recap__swatch {
  position: relative; flex: none;
  width: 84px; height: 84px;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.sb-recap__swatch > svg, .sb-recap__swatch .sb-swatch-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.sb-recap__fabricbody { flex: 1; min-width: 0; }
.sb-recap__meta { color: var(--muted); font-size: 14px; }
.sb-recap__price { font-family: var(--serif); font-size: 18px; margin-top: var(--s1); }
.sb-rows { display: grid; }
.sb-row {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.sb-row:first-child { border-top: 0; }
.sb-row__k { color: var(--muted); flex: none; max-width: 48%; }
.sb-row__v { text-align: right; font-weight: 500; display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap; }
.sb-row__v .sb-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(29, 29, 27, 0.18); background: var(--swatch, #ccc); display: inline-block; }
.sb-row__plus { font-size: 12px; color: var(--accent-ink); background: var(--accent-soft); border-radius: var(--radius-pill); padding: 1px 7px; }
.sb-row--total { border-top: 1px solid var(--ink); margin-top: var(--s1); padding-top: var(--s3); font-size: 16px; }
.sb-row--total .sb-row__k { color: var(--ink); font-weight: 600; }
.sb-row--total .sb-row__v { font-family: var(--serif); font-size: 22px; }

.sb-send { margin-top: var(--s6); padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sb-send .sb-group__help { margin: var(--s2) 0 var(--s4); }
.sb-formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); }
.sb-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.sb-actions--secondary { margin-top: var(--s3); }
.sb-linkbox { margin-top: var(--s3); }
.sb-linkbox .sb-input { font-size: 13px; }

/* ---------- bottom bar ---------- */
.sb-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: rgba(255, 253, 249, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.sb-bar__inner {
  max-width: 1280px; margin: 0 auto;
  min-height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s2) var(--s5);
}
.sb-bar__price { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; min-width: 0; }
.sb-bar__label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sb-bar__total { font-family: var(--serif); font-size: 26px; line-height: 1; }
.sb-bar__lead { font-size: 13px; color: var(--muted); }
.sb-bar__nav { display: flex; gap: var(--s2); flex: none; }
.sb-bar__nexthint { font-weight: 500; opacity: 0.8; }

/* ---------- toast ---------- */
.sb-toast {
  position: fixed; left: 50%; bottom: calc(var(--bar-h) + var(--s4) + env(safe-area-inset-bottom));
  transform: translate(-50%, 8px);
  background: var(--ink); color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--ease), transform var(--ease);
  z-index: 30;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.sb-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- print region (screen: hidden) ---------- */
.sb-print { display: none; }

/* ---------- mobile ---------- */
@media (max-width: 959px) {
  :root { --stepbar-h: 52px; --bar-h: 68px; }
  body { font-size: 14.5px; }
  .sb-header__inner { padding: var(--s3) var(--s4); }
  .sb-brand__mark { width: 30px; height: 30px; }
  .sb-brand__title { font-size: 20px; }
  .sb-steps__list { justify-content: flex-start; gap: 0; padding: 0 var(--s2); }
  .sb-step { font-size: 13px; padding: 5px 10px 5px 5px; }
  .sb-step__num { width: 22px; height: 22px; font-size: 11px; }
  .sb-step__label--full { display: none; }
  .sb-step__label--short { display: inline; }

  .sb-main { display: block; padding: 0 0 calc(var(--bar-h) + var(--s6)); }
  .sb-preview {
    position: sticky; top: var(--stepbar-h); z-index: 10;
    background: var(--bg);
    padding: var(--s2) var(--s3) 0;
    margin-bottom: var(--s3);
  }
  .sb-preview__frame { box-shadow: 0 6px 20px rgba(29, 29, 27, 0.08); }
  .sb-preview__stage { height: 52vh; min-height: 320px; padding: var(--s2); }
  .sb-preview__hint { font-size: 11.5px; padding-top: 4px; }
  .sb-hotspots { padding: var(--s2) var(--s3) 0; }
  .sb-hotspot { padding: 7px 12px; font-size: 12px; }
  .sb-zoomctl .sb-iconbtn { width: 34px; height: 34px; }
  .sb-zoomctl__level { min-width: 40px; font-size: 12px; }
  .sb-preview__controls { padding: var(--s2) var(--s3); gap: var(--s2); }
  .sb-seg__btn { padding: 5px 12px; font-size: 12.5px; }
  .sb-skin { width: 20px; height: 20px; }
  .sb-skins { gap: 6px; }
  .sb-iconbtn { width: 36px; height: 36px; }

  .sb-panel { padding: var(--s3) var(--s4) 0; }
  .sb-panel__head { margin-bottom: var(--s4); }
  .sb-panel__title { font-size: 26px; }
  .sb-groups { gap: var(--s5); }
  .sb-choices { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .sb-choice { min-height: 56px; padding: var(--s2) var(--s3); gap: var(--s2); }
  .sb-choice__glyph { width: 34px; height: 34px; }
  .sb-choice__label { font-size: 13.5px; }
  .sb-fabrics { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--s2); }
  .sb-filter { flex-direction: column; align-items: stretch; gap: var(--s1); } /* stretch: the chip row must be clamped to the column so it scrolls instead of widening the page */
  .sb-filter__label { width: auto; padding-top: 0; }
  .sb-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; margin: 0 calc(-1 * var(--s4)); padding-left: var(--s4); padding-right: var(--s4); }
  .sb-chips::-webkit-scrollbar { display: none; }
  .sb-filters__clear { margin-left: 0; }
  .sb-recap__section { padding: var(--s3) var(--s4); }
  .sb-send { padding: var(--s4); }
  .sb-bar__inner { padding: var(--s2) var(--s4); }
  .sb-bar__total { font-size: 22px; }
  .sb-bar__lead { display: none; }
  .sb-bar__nexthint { display: none; }
  .sb-btn { padding: 10px 18px; }
}

@media (max-width: 420px) {
  .sb-bar__label { display: none; }
  .sb-choices { grid-template-columns: 1fr 1fr; }
  /* narrow cards: glyph on the left, label on top, price pill tucked under the label */
  .sb-choice {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--s2); row-gap: var(--s1);
    padding: var(--s2) 10px;
    align-items: center;
  }
  .sb-choice__glyph { grid-row: 1 / span 2; align-self: center; }
  .sb-choice__text { grid-column: 2; grid-row: 1; align-self: end; }
  .sb-choice__price { grid-column: 2; grid-row: 2; justify-self: start; }
  .sb-choice__text:last-child { grid-row: 1 / span 2; align-self: center; }
  .sb-fabrics { grid-template-columns: 1fr 1fr; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- print: preview + recap only ---------- */
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff; color: #000; }
  .sb-skip, .sb-header, .sb-steps, .sb-main, .sb-bar, .sb-toast { display: none !important; }
  .sb-print { display: block !important; font-size: 11pt; }
  .sb-print__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid #999; padding-bottom: 8px; margin-bottom: 12px; }
  .sb-print__head h1 { font-family: var(--serif); font-size: 22pt; }
  .sb-print__date { color: #555; }
  .sb-print__figs { display: flex; justify-content: center; gap: 24px; margin-bottom: 14px; }
  .sb-print__fig { margin: 0; text-align: center; color: #555; font-size: 10pt; }
  .sb-print__fig > svg { width: 58mm; height: 113mm; margin: 0 auto 4px; }
  .sb-print__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
  .sb-print__sec { break-inside: avoid; }
  .sb-print__sec h2 { font-family: var(--serif); font-size: 13pt; border-bottom: 1px solid #ccc; margin-bottom: 4px; padding-bottom: 2px; }
  .sb-print .sb-row { padding: 3px 0; font-size: 10pt; border-top: 1px solid #e5e5e5; }
  .sb-print .sb-row__k { color: #555; }
  .sb-print .sb-row__plus { background: none; color: #555; padding: 0; }
  .sb-print .sb-row__v .sb-dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sb-print__total { margin-top: 12px; }
  .sb-print__foot { margin-top: 14px; color: #555; font-size: 10pt; border-top: 1px solid #999; padding-top: 8px; }
  .sb-placeholder { border: 1px dashed #999; padding: 24px; }
}

/* ============================================================
   KIDS' BUILDER ADDITIONS — age-band pills (Step 6)
   ============================================================ */
.sb-pill--age {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 88px;
  padding: 8px 16px;
}
.sb-pill__label { font-weight: 600; }
.sb-pill__hint { font-size: 11px; font-weight: 400; opacity: 0.72; letter-spacing: 0.01em; }
.sb-pill--age[aria-pressed="true"] .sb-pill__hint { opacity: 0.85; }

/* ============================================================
   RIGHT‑TO‑LEFT (Arabic)
   ------------------------------------------------------------
   js/i18n.js sets <html lang="ar" dir="rtl"> before anything
   renders. Flex/grid flow, logical margins and the grid column
   order mirror on their own; everything below is either a
   physical property that does not, or a typographic rule that
   Arabic needs.
   ============================================================ */

/* Arabic joins its letters — tracking and uppercasing break the script,
   and Georgia has no Arabic cut, so headings get a Naskh stack instead. */
[lang="ar"] {
  --serif: "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", serif;
}
[lang="ar"] body {
  font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
}
[lang="ar"] .sb-eyebrow,
[lang="ar"] .sb-brand__eyebrow,
[lang="ar"] .sb-bar__label,
[lang="ar"] .sb-filter__label,
[lang="ar"] .sb-badge,
[lang="ar"] .sb-pill__hint {
  letter-spacing: 0;
  text-transform: none;
}

/* Money runs left‑to‑right inside RTL prose: "+$40", never "40$+". */
[dir="rtl"] .sb-choice__price,
[dir="rtl"] .sb-row__plus,
[dir="rtl"] .sb-bar__total,
[dir="rtl"] .sb-fabric__price {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The illustration is a drawing: SVG geometry is absolute, so it never mirrors.
   Pinning the SVG to ltr only fixes the direction of the text it contains — the
   embroidered monogram — and leaves the Arabic placeholder card (a <div>, not
   an <svg>) free to render right-to-left with its punctuation in the right place. */
[dir="rtl"] .sb-preview__stage > svg {
  direction: ltr;
}

[dir="rtl"] .sb-skip { left: auto; right: var(--s4); }
[dir="rtl"] .sb-step { padding: 6px 6px 6px 12px; }
[dir="rtl"] .sb-choice,
[dir="rtl"] .sb-fabric { text-align: right; }
[dir="rtl"] .sb-row__v { text-align: left; }

/* fabric search: the magnifier and its inset swap sides */
[dir="rtl"] .sb-search__icon { left: auto; right: 14px; }
[dir="rtl"] .sb-search__input { padding-left: 12px; padding-right: 42px; }

/* number fields: the unit suffix sits on the inner edge */
[dir="rtl"] .sb-unitwrap .sb-input { padding-right: 12px; padding-left: 44px; }
[dir="rtl"] .sb-unit { right: auto; left: 12px; }

/* the clear-filters link hangs off the filter label column */
[dir="rtl"] .sb-filters__clear { margin-left: 0; margin-right: calc(76px + var(--s3)); }

/* fabric card overlays */
[dir="rtl"] .sb-fabric__badges { left: auto; right: var(--s2); }
[dir="rtl"] .sb-fabric__check { right: auto; left: var(--s2); }

/* the note's accent rule marks the leading edge */
[dir="rtl"] .sb-note {
  border-left: 1px solid var(--line);
  border-right: 3px solid var(--accent);
}

/* the how-to disclosure chevron points into the reading direction */
[dir="rtl"] .sb-howto summary::before { transform: rotate(135deg); }
[dir="rtl"] .sb-howto[open] summary::before { transform: rotate(45deg); }

@media (max-width: 959px) {
  [dir="rtl"] .sb-step { padding: 5px 5px 5px 10px; }
  [dir="rtl"] .sb-filters__clear { margin-right: 0; }
}


/* ============================================================
   INTERACTIVE PREVIEW VIEWER  (js/zoom.js)
   Pinch / wheel / drag / double-tap, detail chips, expand mode.
   ============================================================ */

.sb-preview__stage {
  cursor: grab;
  overscroll-behavior: contain;
  /* touch-action is managed by js/zoom.js: pan-y at 1x, none when zoomed */
}
.sb-preview__stage:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sb-preview__stage.is-zoomed { cursor: grab; }
.sb-preview__stage.is-grabbing { cursor: grabbing; }
.sb-preview__stage > svg {
  /* Transform is written by the viewer; keep it crisp and GPU-friendly. */
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.sb-preview__hint {
  margin: 0;
  padding: 6px var(--s4) 0;
  font-size: 12px;
  color: var(--muted, #6b6b66);
  text-align: center;
}
.sb-preview__stage.is-zoomed ~ .sb-preview__hint { visibility: hidden; }

/* --- detail chips: the way to inspect accessories on a phone --- */
.sb-hotspots {
  display: flex;
  gap: 6px;
  padding: var(--s3) var(--s4) 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sb-hotspots::-webkit-scrollbar { display: none; }
.sb-hotspot {
  flex: 0 0 auto;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.sb-hotspot:hover { border-color: var(--ink); }
.sb-hotspot[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* --- zoom cluster --- */
.sb-zoomctl { display: flex; align-items: center; gap: 4px; }
.sb-zoomctl .sb-iconbtn { width: 36px; height: 36px; }
.sb-zoomctl .sb-iconbtn:disabled { opacity: .38; cursor: default; }
.sb-zoomctl .sb-iconbtn:disabled:hover { border-color: var(--line); }
.sb-zoomctl__level {
  min-width: 46px;
  text-align: center;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #6b6b66);
}

/* --- expand mode: the preview fills the frame (mobile lifesaver) --- */
body.is-preview-expanded .sb-preview {
  position: fixed;
  inset: 0;
  z-index: 60;
  margin: 0;
  padding: 0;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
body.is-preview-expanded .sb-preview__frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.is-preview-expanded .sb-preview__stage {
  flex: 1;
  height: auto;
  max-height: none;
}
body.is-preview-expanded .sb-header,
body.is-preview-expanded .sb-steps,
body.is-preview-expanded .sb-panel,
body.is-preview-expanded .sb-bar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sb-hotspot, .sb-zoomctl .sb-iconbtn { transition: none; }
}


/* ============================================================
   MOBILE DENSITY  — the builder is embedded in /design, which
   already shows "Design your suit" + the audience tabs, so the
   in-frame header collapses to a single slim row and the saved
   height goes to the preview instead.
   ============================================================ */
@media (max-width: 959px) {
  /* Slim header: drop the eyebrow and the shears mark, keep the
     title small and "Start over" reachable. */
  .sb-header__inner { padding: var(--s2) var(--s3); }
  .sb-brand__mark { display: none; }
  .sb-brand__eyebrow { display: none; }
  .sb-brand__title { font-size: 16px; letter-spacing: 0; }

  /* More cloth, less frame. */
  .sb-preview__stage { padding: 4px; height: 56vh; min-height: 340px; }
  .sb-preview__controls { padding: var(--s2) var(--s3); gap: var(--s2); flex-wrap: wrap; }

  /* The hint is a first-run nicety; the chips say the same thing. */
  .sb-preview__hint { display: none; }
  .sb-hotspots { padding: var(--s2) var(--s3) 2px; }

  /* Keep the zoom cluster on one line with the view toggle. */
  .sb-zoomctl { margin-inline-start: auto; }
}

/* Very small phones: the skin-tone dots wrap below rather than
   squeezing the zoom controls off the row. */
@media (max-width: 420px) {
  .sb-preview__stage { height: 52vh; min-height: 300px; }
  .sb-skins { order: 3; width: 100%; justify-content: center; }
  .sb-zoomctl { margin-inline-start: 0; }
  .sb-preview__controls { justify-content: space-between; }
}


/* Back button — only while the preview is expanded (real fullscreen or the
   hosting page's overlay). Sits opposite the zoom cluster so neither is in
   the other's way, and mirrors with the writing direction. */
.sb-fsback {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 5;
  display: none;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--surface);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(29, 29, 27, 0.28);
}
.sb-fsback:hover { background: #000; }
.sb-fsback svg { flex: none; }
[dir='rtl'] .sb-fsback svg { transform: scaleX(-1); }
body.is-preview-expanded .sb-fsback { display: inline-flex; }
.sb-preview__frame { position: relative; }


/* ============================================================
   MOBILE LAYOUT v3 — "the preview IS the page".
   Diagnosis on a 375x812 phone: chrome ate 390px, the card
   frame ate 34px of width, and the full-figure default left the
   jacket ~120px tall. Now the stage runs edge-to-edge, Front/
   Back + skin tones float OVER the preview like map controls,
   and (with step-aware framing in builder.js) each step opens
   already zoomed to what it edits.
   ============================================================ */
@media (max-width: 640px) {
  /* Chrome on a diet. */
  .sb-header__inner { padding: 6px var(--s3); }
  .sb-brand__title { font-size: 15px; }
  .sb-steps { height: 44px; }
  .sb-step { font-size: 12.5px; }

  /* Edge-to-edge preview: no page gutter, no card. */
  .sb-main { padding-inline: 0; padding-top: 0; }
  .sb-preview { padding-inline: 0; }
  .sb-preview__frame {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .sb-preview__stage {
    height: calc(100vh - 240px);   /* header+steps+chips+zoomrow+bar */
    min-height: 380px;
    padding: 0;
  }

  /* Front/Back floats top-start over the preview… */
  .sb-preview__controls { position: static; }
  .sb-preview__controls .sb-seg {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 4;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(3px);
    box-shadow: 0 2px 10px rgba(29, 29, 27, 0.12);
  }
  /* …and the skin tones stack down the end edge, out of the figure's way. */
  .sb-skins {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 4;
    flex-direction: column;
    gap: 8px;
    order: 0;
    width: auto;
    padding: 8px 6px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(3px);
    box-shadow: 0 2px 10px rgba(29, 29, 27, 0.12);
  }

  /* What remains below the stage is a single centred zoom row. */
  .sb-preview__controls {
    justify-content: center;
    padding: 6px var(--s3);
    border-top: 1px solid var(--line);
  }
  .sb-zoomctl { margin-inline-start: 0; }
  .sb-zoomctl__level { display: none; }          /* the figure shows the zoom */
  #sb-zoom-reset:disabled { display: none; }     /* appears only when zoomed  */

  /* Detail chips ride the bottom of the stage, over the image. */
  .sb-hotspots {
    position: absolute;
    inset-inline: 0;
    bottom: 62px;                                /* above the zoom row */
    z-index: 4;
    padding: 0 var(--s3) 6px;
  }
  .sb-hotspot {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(3px);
    box-shadow: 0 2px 8px rgba(29, 29, 27, 0.12);
  }
  .sb-preview { position: relative; }
  .sb-preview__hint { display: none; }
}