:root {
  --red: #B81F25; --red-dark: #9F1A1F; --red-soft: #E7B3B6;
  --ink: #1A1A1A; --ink-2: #2B2B2B; --graphite: #4A4A4A; --muted: #6E6E6E; --mute-2: #9A9A9A;
  --bg: #F7F7F7; --surface: #FFFFFF; --stage: #C9CACA;
  --line: #E4E4E4; --line-strong: #CFCFCF;
  --shadow-cta: 0 6px 18px rgba(184,31,37,.28); --shadow-2: 0 4px 12px rgba(20,20,20,.06);
  --r-md: 8px; --r-lg: 14px; --r-pill: 999px;
  --panel-w: 400px;
}
* { box-sizing: border-box; }
html { height: 100%; margin: 0; }
body { margin: 0; height: 100vh; height: 100dvh; }
body { font-family: "Open Sans", "Segoe UI", system-ui, sans-serif; font-weight: 400; color: var(--ink); background: var(--bg); display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
h2, h3 { font-weight: 700; }
button { font: inherit; color: inherit; } /* iOS Safari otherwise paints button text blue */

/* keyboard focus */
.opt:focus-visible, .swatch:focus-visible, .step-head:focus-visible, .cta:focus-visible, .ghost:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }

/* header */
.top { display: flex; align-items: center; gap: 20px; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.logo { height: 42px; width: auto; display: block; }
.top h1 { font-size: 22px; margin: 0; flex: 1; font-weight: 800; letter-spacing: -0.01em; }
.ghost { background: transparent; border: 0; border-radius: var(--r-pill); padding: 8px 18px; cursor: pointer; color: var(--ink); font-weight: 600; font-size: 14px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.ghost:hover { background: var(--ink); color: #fff; }

/* layout */
.layout { flex: 1; display: grid; grid-template-columns: 1fr var(--panel-w); min-height: 0; }
.stage { position: relative; background: var(--stage); min-height: 420px; }
#viewport { position: absolute; inset: 0; }
#viewport canvas { width: 100% !important; height: 100% !important; display: block; }
.hint-drag { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; margin: 0; font-size: 12px; color: var(--graphite); pointer-events: none; }
.loading { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--stage); color: #F7F7F7; font-size: 14px; font-weight: 600; letter-spacing: .3px; opacity: 1; transition: opacity 300ms ease; }
.loading.done { opacity: 0; pointer-events: none; }
.loading[hidden] { display: none; }
.loading.failed { padding: 24px; text-align: center; color: var(--ink); }
.noscript { margin: 0; padding: 12px 20px; background: #fff3cd; color: var(--ink); text-align: center; }

/* options panel */
.panel { background: var(--surface); border-left: 1px solid var(--line); overflow-y: auto; }
.step { border-bottom: 1px solid var(--line); }
.step-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: none; border: 0; cursor: pointer; text-align: left; }
.step-head .num { width: 26px; height: 26px; border-radius: 50%; background: var(--line); color: var(--muted); font-size: 12px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.step.open .step-head .num { background: var(--red); color: #fff; }
.step-head .titles { flex: 1; display: flex; flex-direction: column; }
.step-head .t { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.step-head:hover { background: #FAFAFA; }
.step-head .v { font-size: 13px; color: var(--muted); }
.step-head .chev { width: 8px; height: 8px; border-right: 2px solid var(--mute-2); border-bottom: 2px solid var(--mute-2); transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
.step.open .step-head .chev { transform: rotate(-135deg); }
.step-body { display: none; padding: 0 16px 16px; }
.step.open .step-body { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { font-size: 14px; padding: 10px 14px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-md); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 90px; }
.opt small { color: var(--muted); font-size: 12px; }
.opt:hover { border-color: var(--mute-2); }
.opt.active { border-color: var(--red); background: var(--red-soft); box-shadow: inset 0 0 0 1px var(--red); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong); background: var(--sw); cursor: pointer; padding: 0; }
.swatch.active { box-shadow: 0 0 0 2px var(--red); }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); width: 100%; }
.field input { font: inherit; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--ink); }
.row { display: flex; gap: 8px; width: 100%; }
.hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; width: 100%; }
.link { background: none; border: 0; color: var(--red); cursor: pointer; padding: 0; text-decoration: underline; }

/* CTA bar */
.cta-bar { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--ink); color: #F7F7F7; }
#summary-line { flex: 1; font-size: 14px; opacity: .85; }
.cta { font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--red); color: #fff; border: 0; border-radius: var(--r-pill); padding: 13px 26px; cursor: pointer; box-shadow: var(--shadow-cta); }
.cta:hover { background: var(--red-dark); }
.cta:disabled { opacity: .6; cursor: wait; }

/* quote modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal-backdrop[hidden] { display: none; }
.modal { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 24px; width: min(520px, 100%); max-height: 90vh; max-height: 90dvh; overflow-y: auto; position: relative; }
.modal h2 { margin: 0 0 12px; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.modal .close { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 26px; cursor: pointer; color: var(--muted); }
.modal .summary { background: var(--bg); border-radius: var(--r-md); padding: 12px; font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; margin: 0 0 14px; }
.modal form { display: grid; gap: 10px; }
.modal form[hidden] { display: none; }
.modal label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.modal input, .modal textarea { font: inherit; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--ink); }
.error { color: var(--red); font-size: 13px; margin: 0; }
.hint.warning { color:#8a5a00; } /* amber: the upload works, but the result will not look right */
.privacy { font-size: 11px; line-height: 1.4; color: var(--muted); margin: 0; }
.privacy a { color: inherit; }
.thanks h3 { font-size: 24px; margin: 8px 0; }

/* A quiet, architectural workspace: warm studio light, red selection accents, precise type. */
:root { --bg:#f6f4f0; --stage:#ddd8cf; --ink:#252522; --muted:#716e68; --red-soft:#fcf2ef; --line:#e9e6df; --panel-w:440px; }
.top { padding:18px 28px; gap:30px; }
.logo { height:46px; }
.header-copy { flex:1; min-width:0; }
.top .logo, .top .ghost { flex-shrink:0; }
.eyebrow { display:block; font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--muted); line-height:1.6; }
.top h1 { font-size:20px; font-weight:600; letter-spacing:-.035em; margin-top:2px; }
.ghost { box-shadow:inset 0 0 0 1px var(--line-strong); font-size:12px; min-height:44px; }
/* Frosted card: the caption stays legible over the mid-tone 3D backdrop. */
.product-caption { position:absolute; z-index:1; top:24px; left:24px; right:auto; max-width:min(560px, calc(100% - 48px)); padding:12px 18px; border-radius:12px; background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 1px 2px #0000000f; pointer-events:none; }
.product-caption h2 { font-size:clamp(18px,2vw,28px); font-weight:600; letter-spacing:-.045em; line-height:1.15; max-width:650px; margin:0 0 6px; }.product-caption p { max-width:650px; font-size:12px; margin:0 0 8px; color:var(--muted); }
.product-caption small { font-size:11px; font-weight:600; color:var(--red); }
.hint-drag { left:auto; right:24px; bottom:28px; text-align:right; font-size:11px; line-height:1.8; }
.hint-drag .scroll { font-size:10px; }
.step-head { padding:17px 24px; gap:14px; min-height:78px; }
.step-head .num { background:transparent; border:1px solid var(--line-strong); color:var(--muted); font-size:10px; font-weight:600; width:25px; height:25px; }
.step.open .num { background:var(--red); color:white; border-color:var(--red); }
.step-head .t { font-size:13px; font-weight:600; }
.step-head .v { font-size:11px; line-height:1.5; }
.step-body { padding:0 24px 24px; }
.opt { padding:12px; font-size:12px; min-height:46px; flex:1 1 auto; transition:background-color .15s, border-color .15s; }
.opt strong { font-weight:600; }
.opt small { font-size:10px; line-height:1.6; }
[data-step="model"] .opt, [data-step="product"] .opt, [data-step="fabric"] .opt { flex-basis:100%; }
.opt.active { box-shadow:inset 3px 0 0 var(--red); background:var(--red-soft); border-color:#d8a7a2; }
.opt:active, .cta:active, .ghost:active, .lang-switch button:active, .upload-btn:active { transform:scale(.98); }
.swatches { gap:12px; padding:5px; }
.swatch { width:38px; height:38px; position:relative; }
.swatch::after { content:''; position:absolute; inset:-5px; }
.hint { line-height:1.7; font-size:11px; }
.included { font-size:12px; line-height:1.7; color:#3d6049; margin:0; }
.cta-bar { min-height:78px; background:#fff; color:var(--ink); padding:14px 28px; border-top:1px solid var(--line); gap:18px; }
#summary-line { font-size:12px; font-weight:600; opacity:1; }
.cta { box-shadow:none; border-radius:7px; text-transform:none; letter-spacing:0; font-size:13px; padding:15px 24px; }
.footer-action { min-height:44px; border:0; background:transparent; font-size:11px; color:var(--muted); cursor:pointer; padding:8px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.modal { border-radius:18px; padding:28px; }
.modal .summary { font-family:inherit; font-size:12px; line-height:1.8; background:#f6f4f0; }
.quote-status { padding:14px; background:#f6f4f0; font-size:12px; line-height:1.8; border-left:3px solid var(--red); }
.quote-status a { color:var(--red); }
.quote-print { margin-bottom:16px; }
.quote-copy { margin:0 8px 16px 0; }
.cta:disabled { cursor:not-allowed; }
@media (max-width:1100px) and (min-width:901px) { :root{--panel-w:380px} .hint-drag{display:none} .top{padding:16px 20px} }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } .opt:active,.cta:active,.ghost:active,.lang-switch button:active,.upload-btn:active { transform:none; } }
@media (prefers-reduced-transparency:reduce) {  }
@media (prefers-contrast:more) {  .hint,.step-head .v,.eyebrow { color:var(--ink); } .opt { border-color:var(--ink); } }

/* Related selections share a step; explicit continuation keeps swatch/toggle edits local. */
.selection-block { width:100%; min-width:0; margin:8px 0; }
.selection-block h3 { font-size:12px; font-weight:600; margin:0 0 12px; }
.option-row { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.selected-product { font-size:12px; line-height:1.7; margin:6px 0; width:100%; overflow-wrap:anywhere; }
.fabric-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.fabric-groups .opt { align-items:center; justify-content:center; min-width:0; }
.opt:disabled { opacity:.4; cursor:not-allowed; background:var(--bg); }
.toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; background:none; border:0; cursor:pointer; font-size:13px; font-weight:600; min-height:48px; }
.switch-track { width:44px; height:26px; border-radius:20px; background:#d5d2cc; padding:3px; flex-shrink:0; }
.switch-track span { display:block; width:20px; height:20px; border-radius:50%; background:white; box-shadow:0 1px 3px #0002; transition:transform .18s; }
.toggle[aria-checked="true"] .switch-track { background:var(--red); }
.toggle[aria-checked="true"] .switch-track span { transform:translateX(18px); }
.step-next { width:100%; min-height:44px; padding:12px 16px; display:flex; justify-content:space-between; border:1px solid var(--line-strong); border-radius:8px; background:var(--bg); color:var(--ink); cursor:pointer; font-size:12px; font-weight:600; margin-top:12px; }
.step-next:active { background:var(--red-soft); }
/* Fabric colours: the website swatch photo, its average colour while loading. */
.swatch.photo { background:var(--sw) var(--img) center / cover no-repeat; }

/* Base choices: product photo beside each name. */
.base-cards { display:grid; gap:8px; width:100%; margin-top:12px; }
.base-card { display:flex; align-items:center; gap:12px; width:100%; min-height:72px; padding:6px 12px 6px 6px; text-align:left; font:inherit; font-size:12px; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; cursor:pointer; transition:background-color .15s, border-color .15s; }
.base-photo, .base-photo-empty { width:60px; height:60px; flex-shrink:0; border-radius:6px; background:var(--bg); overflow:hidden; }
/* Darkening the photo a touch turns its white background into the tile grey (no blend mode: blending
   inside the transformed sheet can render blank, e.g. on iOS Safari). */
.base-photo img { display:block; width:100%; height:100%; object-fit:contain; filter:brightness(.965); }
.base-photo-empty { display:grid; place-items:center; background:var(--bg); color:var(--muted); font-size:20px; font-weight:600; }
.base-card strong { display:block; font-weight:600; }
.base-card small { display:block; color:var(--muted); font-size:11px; line-height:1.5; }
.base-card:hover { border-color:var(--mute-2); }
.base-card.active { border-color:#d8a7a2; background:var(--red-soft); box-shadow:inset 3px 0 0 var(--red); }
.base-card:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.base-card:active { transform:scale(.99); }
@media (prefers-reduced-motion:reduce) { .base-card:active { transform:none; } }

/* The preview notice remains visible at every width; camera control is direct manipulation. */
#viewport { bottom:72px; }
.preview-note { position:absolute; left:24px; right:24px; bottom:18px; margin:0; color:var(--graphite); font-size:12px; line-height:1.5; text-align:center; pointer-events:none; }
.hint-drag { display:block; left:24px; right:24px; bottom:44px; max-width:none; text-align:center; font-size:11px; }

/* Options column on wide screens; a bottom sheet on phones (see below and src/sheet.js). */
.sheet { display:flex; flex-direction:column; min-height:0; background:var(--surface); border-left:1px solid var(--line); }
.sheet .panel { flex:1; min-height:0; border-left:0; }
.sheet-grabber, .header-product { display:none; }
.icon-btn svg { display:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn[hidden] { display:none !important; }
.quote-print { margin-right:8px; }
.quote-share { margin:0 0 16px; }

/* Phones and small tablets: header and CTA shrink to one row each and type is sized for touch.
   Held upright (or on a tall screen) the 3D view fills the stage and the options live in a draggable
   sheet (next block); a phone on its side keeps the options in a column beside the 3D view. */
@media (max-width:900px) {
  body { height:100dvh; min-height:0; overflow:hidden; }
  .top { min-height:56px; padding:6px 8px 6px 16px; padding-top:max(6px, env(safe-area-inset-top)); gap:12px; }
  .logo { height:26px; }
  .header-copy { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .header-product { display:flex; flex-direction:column; flex:1; min-width:0; }
  .header-product strong { font-size:15px; font-weight:600; letter-spacing:-.01em; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .header-product small { font-size:12px; font-weight:600; color:var(--red); line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .icon-btn { width:44px; height:44px; min-height:44px; padding:0; display:grid; place-items:center; border-radius:50%; flex-shrink:0; box-shadow:none; }
  .icon-btn svg { display:block; }
  .icon-btn .label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .icon-btn:hover { background:transparent; color:var(--ink); }
  .icon-btn:active { background:var(--bg); }

  .stage { min-height:0; }
  #viewport { top:0; bottom:0; }
  .product-caption { display:none; }
  .hint-drag { left:50%; right:auto; transform:translateX(-50%); bottom:40px; width:max-content; max-width:calc(100% - 32px); padding:6px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,.85); color:var(--ink); font-size:12px; line-height:1.4; transition:opacity .4s ease; }
  .hint-drag.seen { opacity:0; }
  .hint-drag .scroll { display:none; }
  .preview-note { left:16px; right:16px; bottom:10px; font-size:12px; line-height:1.4; }
  .sheet .panel { overscroll-behavior:contain; }

  .step-head { min-height:56px; padding:10px 16px; gap:12px; }
  .step-head .num { width:24px; height:24px; font-size:12px; }
  .step-head .t { font-size:14px; }
  .step-head .v { font-size:13px; line-height:1.4; }
  .step-body { padding:0 16px 20px; }
  .opt { font-size:14px; min-height:48px; }
  .opt small { font-size:12px; line-height:1.4; }
  [data-step="model"] .opt { flex-basis:calc(50% - 4px); min-width:0; text-align:left; }
  .selection-block h3, .field { font-size:13px; }
  .hint, .selected-product, .included { font-size:13px; line-height:1.55; }
  .toggle, .step-next, .base-card { font-size:14px; }
  .step-next { min-height:48px; }
  .base-card small { font-size:12px; }
  /* 16px stops iOS Safari zooming the page when a field gets focus. */
  .field input, .modal input, .modal textarea { font-size:16px; }

  .cta-bar { position:relative; z-index:4; min-height:0; flex-wrap:nowrap; gap:12px; padding:10px 16px; padding-bottom:max(10px, env(safe-area-inset-bottom)); border-top:0; box-shadow:0 -1px 0 var(--line); }
  #summary-line { flex:1; min-width:0; font-size:13px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .footer-action { display:none; }
  .cta { flex:0 0 auto; white-space:nowrap; min-height:48px; padding:14px 20px; font-size:15px; }

  .modal { padding:22px 18px; }
  .modal h2 { font-size:22px; }
}
/* Keep in sync with SHEET_QUERY in src/sheet.js. */
@media (max-width:900px) and (orientation:portrait), (max-width:900px) and (min-height:501px) {
  .layout { display:block; position:relative; overflow:clip; min-height:0; }
  .stage { position:absolute; inset:0; min-height:0; }
  .loading { padding-bottom:var(--sheet-s, 42%); }
  .hint-drag { bottom:calc(var(--sheet-s, 42%) + 40px); }
  .preview-note { bottom:calc(var(--sheet-s, 42%) + 10px); }

  .sheet { position:absolute; z-index:3; left:0; right:0; top:0; height:100%; border-left:0; border-radius:16px 16px 0 0; box-shadow:0 -1px 0 var(--line), 0 -8px 24px rgba(20,20,20,.10); transform:translate3d(0,58%,0); will-change:transform; }
  .sheet-grabber { display:flex; justify-content:center; flex-shrink:0; height:28px; padding:8px 0 0; border:0; background:none; cursor:grab; touch-action:none; position:relative; }
  .sheet-grabber::before { content:''; position:absolute; inset:-14px 0 0; }
  .sheet-grabber span { width:40px; height:5px; border-radius:3px; background:var(--line-strong); }
  .sheet-grabber:active { cursor:grabbing; }
  .sheet-grabber:focus-visible { outline:2px solid var(--red); outline-offset:-4px; }
  .sheet .panel::after { content:''; display:block; height:var(--sheet-hidden, 58%); }
}
/* A phone on its side: options in a narrower column beside the 3D view. */
@media (max-width:900px) and (orientation:landscape) and (max-height:500px) {
  :root { --panel-w:min(360px, 44vw); }
}
@media (max-width:900px) and (prefers-reduced-transparency:reduce) { .hint-drag { background:var(--surface); } }

/* EL | EN switch: two small buttons in the header; the active language is filled. */
.lang-switch { display:flex; flex-shrink:0; gap:2px; padding:2px; border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px var(--line-strong); }
.lang-switch button { min-width:36px; min-height:36px; padding:0 8px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.04em; cursor:pointer; }
.lang-switch button[aria-pressed="true"] { background:var(--ink); color:#fff; }
.lang-switch button:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
/* Phones: one 44px button showing the other language, so the product name in the header keeps its
   room; inside the WordPress iframe on narrow phones the page around it already shows the logo. */
@media (max-width:900px) {
  .top { gap:8px; }
  .lang-switch { padding:0; box-shadow:none; }
  .lang-switch button { min-width:44px; min-height:44px; border-radius:50%; color:var(--ink); font-weight:700; box-shadow:inset 0 0 0 1px var(--line-strong); }
  .lang-switch button[aria-pressed="true"] { display:none; }
}
@media (max-width:480px) { .embedded .top .logo { display:none; } }
@media (max-width:360px) { .header-product strong { font-size:14px; } }

/* Apple-design polish. Toggle rows: label left, switch right; consecutive rows share a hairline. */
.toggle { text-align:left; min-height:48px; }
.toggle + .toggle { border-top:1px solid var(--line); }
.toggle-text { display:flex; flex-direction:column; gap:2px; }
.toggle-text small { font-size:11px; font-weight:400; line-height:1.4; color:var(--muted); }
.toggle:active .switch-track { filter:brightness(.95); }

/* Logo upload: our own button in the screen's language; the preview's checkerboard shows transparency. */
.upload-btn { position:relative; align-self:flex-start; display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); color:var(--ink); font-size:13px; font-weight:600; cursor:pointer; }
.upload-btn:focus-within { outline:2px solid var(--red); outline-offset:3px; }
.upload-btn input { position:absolute; width:1px; height:1px; padding:0; border:0; opacity:0; overflow:hidden; clip:rect(0 0 0 0); }
.logo-preview { width:100%; display:flex; align-items:center; gap:12px; font-size:12px; }
.logo-preview img { width:56px; height:56px; flex-shrink:0; object-fit:contain; border-radius:8px; border:1px solid var(--line); background:repeating-conic-gradient(#e9e6df 0% 25%, #fff 0% 50%) 50% / 12px 12px; }

/* Second line inside a swatch (the white frame's "no extra charge"). */
.swatch-note { display:block; margin-top:2px; font-size:10px; font-weight:400; line-height:1.3; color:var(--muted); }

/* Base type: one segmented control (it filters the product cards below it). */
.option-row.segmented { flex-wrap:nowrap; gap:2px; padding:3px; border-radius:10px; background:var(--bg); }
.option-row.segmented .opt { flex:1 1 0; min-width:0; min-height:40px; align-items:center; justify-content:center; border:0; border-radius:8px; background:transparent; box-shadow:none; color:var(--muted); font-weight:600; }
.option-row.segmented .opt.active { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(20,20,20,.12); }
@media (max-width:900px) {
  .toggle-text small { font-size:12px; }
  .upload-btn { font-size:14px; }
  .option-row.segmented .opt { min-height:44px; }
}

/* Guided studio: immediate selection feedback, deliberate navigation and quiet visual hierarchy. */
.top { padding-block:14px; }
.top h1 { font-size:18px; letter-spacing:-.025em; }
.product-caption { pointer-events:auto; background:rgba(255,255,255,.82); max-width:calc(100% - 48px); }
.product-caption h2 { font-size:clamp(18px,1.8vw,25px); letter-spacing:-.03em; }
.product-caption #product-size { margin-bottom:0; font-size:14px; color:var(--ink); }
.technical-details { margin-top:8px; font-size:12px; color:var(--muted); }
.technical-details summary { cursor:pointer; min-height:24px; }
.technical-details p { margin:8px 0 4px; }
.technical-details small { font-weight:400; }
.step-progress { position:sticky; top:0; z-index:2; display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; padding:18px 24px 14px; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); font-size:12px; color:var(--muted); }
.step-progress > span:first-child { font-weight:600; color:var(--ink); }
.progress-track { flex-basis:100%; height:3px; overflow:hidden; border-radius:3px; background:var(--line); }
.progress-track > span { display:block; height:100%; background:var(--red); transition:width 220ms ease-out; }
.step-head .t { text-transform:none; letter-spacing:0; font-size:14px; }
.step-head .v { font-size:12px; }
.step-body[hidden] { display:none; }
.step-body { min-width:0; }
.step-navigation { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; margin-top:18px; }
.step-navigation button { min-height:48px; font-size:13px; font-weight:600; border-radius:9px; padding:12px 16px; cursor:pointer; }
.step-navigation .step-next { width:auto; margin:0; background:var(--red); color:white; border-color:var(--red); }
.step-next:hover { background:var(--red-dark); }
.step-back { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line-strong); }
.step-back:disabled { opacity:.4; cursor:default; }
.step-navigation button:active:not(:disabled), .swatch:active { transform:scale(.98); }
.swatches { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:10px; padding:2px; }
.swatches .swatch { position:relative; width:auto; height:auto; min-height:96px; display:flex; flex-direction:column; align-items:stretch; gap:8px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); padding:6px; box-shadow:none; text-align:left; transition:border-color 150ms, background-color 150ms; }
.swatch .swatch-sample { display:block; height:52px; flex-shrink:0; background:var(--sw); border-radius:6px; }
.swatch.photo .swatch-sample { background:var(--sw) var(--img) center / cover no-repeat; }
.swatch .swatch-name { display:block; min-width:0; font-size:12px; font-weight:500; line-height:1.4; padding:0 2px 3px; overflow-wrap:anywhere; }
.swatch.active { border-color:var(--red); background:var(--red-soft); box-shadow:inset 0 0 0 1px var(--red); }
.swatch::after { display:none; }
.frame-swatches { grid-template-columns:repeat(2,minmax(0,1fr)); }
.frame-swatches .swatch { flex-direction:row; align-items:center; min-height:64px; }
.frame-swatches .swatch-sample { width:38px; height:38px; }
.frame-swatches .swatch-name { font-size:11px; }
.configuration-review { margin:0; width:100%; }
.configuration-review > div { padding:12px 0; border-bottom:1px solid var(--line); }
.configuration-review dt { font-size:12px; color:var(--muted); margin:0 0 5px; }
.configuration-review dd { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0; font-size:13px; line-height:1.5; }
.configuration-review dd > span { min-width:0; overflow-wrap:anywhere; }
.review-edit { padding:6px 0 6px 8px; flex-shrink:0; border:0; background:none; color:var(--red); font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.modal { width:min(600px,100%); }
.modal .configuration-review { margin-bottom:20px; }
.modal #q-summary[hidden] { display:none; }
.modal form { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:16px; }
.modal form label:has(textarea), .modal form > p, .modal form > button { grid-column:1/-1; }
.modal .close { min-width:44px; min-height:44px; }
.modal-backdrop:not([hidden]) .modal { animation:quote-arrive 220ms cubic-bezier(.2,.7,.2,1); }
@keyframes quote-arrive { from { opacity:.5; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-transparency:reduce) { .product-caption,.step-progress { background:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none; } }
@media (prefers-contrast:more) { .product-caption,.step-progress { background:var(--surface); }.step-head .v,.configuration-review dt { color:var(--ink); } }
@media (prefers-reduced-motion:reduce) { .step-navigation button:active:not(:disabled),.swatch:active { transform:none; } }
@media (max-width:900px) {
  .step-progress { padding:12px 16px; font-size:12px; }
  .step-navigation button { font-size:14px; }
  .swatch .swatch-name { font-size:13px; }
  .frame-swatches .swatch-name { font-size:12px; }
  .swatch-note { font-size:11px; }
  .configuration-review dt { font-size:13px; }
  .review-edit { min-height:44px; display:inline-flex; align-items:center; font-size:13px; }
}
@media (max-width:360px) {
  .frame-swatches { grid-template-columns:1fr; }
  .modal form { grid-template-columns:1fr; }
  .step-navigation { gap:8px; }
  .step-navigation button { padding-inline:12px; }
}

/* Phones inside the WordPress iframe (html.flow, set by src/flow.js): no bottom sheet. The 3D view
   sits on top, the steps follow in normal flow and the iframe grows to fit, so the page scrolls once.
   Vertical swipes on the 3D view scroll the page; sideways drags still rotate the umbrella. */
html.flow, html.flow body { height:auto; min-height:0; overflow:visible; }
html.flow body { display:block; }
html.flow .layout { display:block; position:static; overflow:visible; min-height:0; }
html.flow .stage { position:relative; inset:auto; height:min(108vw, 460px); min-height:0; }
html.flow #viewport { position:absolute; inset:0; touch-action:pan-y; }
html.flow #viewport canvas { touch-action:pan-y !important; }
html.flow .loading { padding-bottom:0; }
html.flow .hint-drag { bottom:40px; }
html.flow .preview-note { bottom:10px; }
html.flow .sheet { position:static; height:auto; transform:none !important; will-change:auto; border-radius:0; box-shadow:0 -1px 0 var(--line); }
html.flow .sheet-grabber { display:none; }
html.flow .sheet .panel { flex:none; height:auto; overflow:visible; }
html.flow .sheet .panel::after { display:none; }