/* Vaulk Shop — 1code.uk monochrome theme system.
   LIGHT (white) is the default: black text, black primary buttons.
   html[data-theme="dark"] flips to the 1code.uk deep-ink look.
   Storefront per-store accent stays available via --brand. */

:root {
  --bg-body: #ffffff;
  --bg-flat: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f6f8;
  --text: #1b1e27;
  --heading: #000000;
  --muted: #626b7a;
  --line: #e4e7ec;
  --line-strong: #c9ced8;
  --accent: #6c7079;              /* 1code.uk grey accent */
  --btn-bg: #000000;              /* primary button: black on light */
  --btn-text: #ffffff;
  --btn-ghost-text: #000000;
  --header-bg: rgba(255, 255, 255, 0.88);
  --header-text: #000000;
  --header-muted: #4a4f5a;
  --side-bg: #f5f6f8;
  --focus: rgba(0, 0, 0, 0.55);
  --danger: #b4443a;
  --danger-soft: #f7e9e7;
  --ok-soft: #e7f2ee;
  --ok-text: #0c6b58;
  /* banknote green — the brightest, most saturated green that still passes
     WCAG AA on paper white at small text (4.63:1). */
  --money: #00873f;
  --warn-soft: #f5eddd;
  --warn-text: #9a6b18;
  --info-soft: #e8edf7;
  --info-text: #33508f;
  --neutral-soft: #edeff3;
  --shadow: 0 1px 2px rgba(20, 23, 31, 0.04), 0 4px 16px rgba(20, 23, 31, 0.05);
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius: 12px;
  --brand: #14171f;               /* per-store accent, overridden per storefront */

  /* Aliases the gallery, the section editor and the form builder already
     referenced but which were never declared — so they fell back to hard-coded
     light hexes in BOTH themes. Declared here (and re-declared for dark) so a
     card follows the theme instead of staying white under white text. */
  --card: var(--surface);
  --border: var(--line);
  --panel: var(--surface-2);
}

html[data-theme="dark"] {
  --bg-body: radial-gradient(ellipse at top, #14171f 0%, #0b0d12 50%, #050608 100%);
  --bg-flat: #0b0d12;
  --surface: #12151c;
  --surface-2: #171b23;
  --text: #e8eaed;
  --heading: #ffffff;
  --muted: #8a8e95;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --accent: #6c7079;
  --btn-bg: #ffffff;              /* primary button: white on dark */
  --btn-text: #000000;
  --btn-ghost-text: #ffffff;
  --header-bg: rgba(8, 10, 14, 0.85);
  --header-text: #ffffff;
  --header-muted: #c7cdda;
  --side-bg: #0b0d12;
  --focus: rgba(255, 255, 255, 0.6);
  --danger: #e4796c;
  --danger-soft: rgba(228, 121, 108, 0.14);
  --ok-soft: rgba(30, 169, 139, 0.16);
  --ok-text: #4fd1b0;
  --money: #3ddc84;   /* same hue lifted for night — 10.9:1 on the dark ground */
  --warn-soft: rgba(211, 162, 78, 0.16);
  --warn-text: #d3a24e;
  --info-soft: rgba(120, 150, 220, 0.16);
  --info-text: #9ab2e8;
  --neutral-soft: rgba(255, 255, 255, 0.08);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --card: var(--surface);
  --border: var(--line);
  --panel: var(--surface-2);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg-body);
  background-attachment: fixed;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; }
h1, h2, h3 { color: var(--heading); letter-spacing: -0.02em; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 480px; margin: 0 auto; padding: 0 20px; }

/* ---------- theme toggle ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex: none;
}
.theme-toggle:hover { opacity: 0.65; }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
/* light default shows the moon (go dark); dark shows the sun (go light) */
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- buttons + forms ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--sans);
}
.btn:hover { opacity: 0.85; }
.btn.secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--btn-ghost-text);
}
.btn.accent { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); }
.btn.go-live { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn.block { display: block; width: 100%; text-align: center; }
.btn.small-btn { padding: 9px 16px; font-size: 13px; }

label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 4px; color: var(--heading); }
input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="search"], textarea, select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--sans);
  background: var(--surface-2);
  color: var(--text);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--focus); border-color: transparent; }
input:disabled { opacity: 0.6; }
textarea { min-height: 96px; resize: vertical; }
input[type="color"] { width: 48px; height: 32px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-2); }

/* selects: custom chevron instead of the OS control */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23888f9b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}

/* file inputs: skin the native "Choose file" button like our buttons */
input[type="file"] { font-size: 13px; color: var(--muted); }
input[type="file"]::file-selector-button {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 0;
  border-radius: 8px;
  padding: 7px 14px;
  margin-right: 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { opacity: 0.85; }
input[type="file"]::-webkit-file-upload-button {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 0;
  border-radius: 8px;
  padding: 7px 14px;
  margin-right: 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
}

.field-hint { font-size: 12px; color: var(--muted); margin-top: 3px; }
.form-error { background: var(--danger-soft); color: var(--danger); border-radius: 8px; padding: 10px 14px; font-size: 14px; margin: 12px 0; }
.form-ok { background: var(--ok-soft); color: var(--ok-text); border-radius: 8px; padding: 10px 14px; font-size: 14px; margin: 12px 0; }
/* ★ A WARNING, NOT AN ERROR. Owner, 2026-09-10: "red is too harsh, like something
   is wrong. Try a different color, maybe yellow with black text." Nothing IS
   wrong when a customer has not finished paying — they simply have a step left,
   and painting it as a failure makes a routine prompt feel like a fault. Amber
   with near-black text: high contrast, reads as attention rather than alarm.
   Our OWN internal alerts stay red, because those really are things going wrong. */
.form-warn { background: #fde68a; color: #1b1e27; border-radius: 8px; padding: 10px 14px; font-size: 14px; margin: 12px 0; }
.form-warn a { color: #1b1e27; text-decoration: underline; font-weight: 700; }
/* One connector row on the calendar page: what it is on the left, what you can
   do about it on the right, wrapping to two lines on a phone rather than
   squeezing the button off the edge. */
.cal-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--line-strong); }
.cal-row:first-of-type { border-top: 0; }
/* ── Where a domain's DNS lives (team → Domains) ───────────────────────────
   Facts first, then the control that changes them. The two nameserver fields
   sit side by side because they are one instruction in two halves, and a
   registrar rejects a pair, not a line of text. */
.dns-cell { display: flex; flex-direction: column; gap: 8px; min-width: 340px; }
.dns-row { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.dns-label { flex: 0 0 84px; color: var(--muted); font-size: 12px; }
.dns-vals { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.dns-ns { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--surface-2); border-radius: 4px; padding: 1px 6px; }
.dns-state { font-size: 11px; border-radius: 999px; padding: 1px 8px; }
.dns-state.good { background: #dcfce7; color: #14532d; }
.dns-state.waiting { background: #fde68a; color: #1b1e27; }
.dns-form { margin: 4px 0 0; }
.dns-pair { display: flex; gap: 8px; flex-wrap: wrap; }
.dns-pair label { display: flex; flex-direction: column; gap: 3px; flex: 1 1 160px; }
.dns-pair label span { font-size: 11px; color: var(--muted); }
.dns-pair input { margin: 0; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dns-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }

/* ── The booking page ──────────────────────────────────────────────────────
   A day first, then a time. The day strip scrolls sideways on a phone rather
   than wrapping into a block of dates nobody can scan, and every control is a
   real link or button so the page works with no JavaScript at all. */
.bk-wrap { max-width: 640px; margin: 32px auto; padding: 0 16px; }
.bk-card { padding: 24px; }
.bk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.bk-title { margin: 0; font-size: 24px; line-height: 1.25; }
.bk-with { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.bk-facts { text-align: right; }
.bk-price { display: block; font-size: 20px; font-weight: 700; }
.bk-desc { margin: 16px 0 0; font-size: 15px; }

/* ── The month calendar ────────────────────────────────────────────────────
   A full month, because "when suits me" is the question somebody booking a
   consultation is actually asking — a strip of the next few days only answers
   "when is soon". Days you can book are circled; the rest stay visible but
   plainly inert, so the shape of a week is never a mystery. */
.bk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 20px; align-items: start; }
.bk-cal { min-width: 0; }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.bk-cal-head strong { font-size: 15px; }
.bk-nav { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-strong); text-decoration: none; color: inherit; font-size: 18px; line-height: 1; }
.bk-nav:hover { border-color: var(--brand); }
.bk-nav.off { opacity: .3; }

.bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-head { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); padding-bottom: 6px; }
.bk-cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 50%; font-size: 14px; font-variant-numeric: tabular-nums; }
.bk-cell.empty { visibility: hidden; }
.bk-cell.shut { color: var(--muted); opacity: .45; }
.bk-cell.open { border: 1px solid var(--line-strong); text-decoration: none; color: inherit; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.bk-cell.open:hover { border-color: var(--brand); background: var(--brand); color: #fff; }
.bk-cell.on { border-color: var(--brand); background: var(--brand); color: #fff; }
.bk-key { margin: 12px 0 0; font-size: 12px; color: var(--muted); }

.bk-slots { min-width: 0; }
.bk-chosen { margin: 6px 0 10px; font-weight: 600; }
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; }
.bk-times form { margin: 0; }
.bk-time { width: 100%; padding: 11px 6px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.bk-time:hover { border-color: var(--brand); background: var(--brand); color: #fff; }
.bk-foot { margin: 20px 0 0; font-size: 13px; color: var(--muted); }

@media (max-width: 640px) {
  /* Calendar above, times below. Side by side on a phone gives each half about
     150px, which is too narrow for either. */
  .bk-split { grid-template-columns: 1fr; gap: 20px; }
  .bk-times { max-height: none; }
}
@media (max-width: 520px) {
  .bk-card { padding: 18px; }
  .bk-title { font-size: 20px; }
  .bk-facts { text-align: left; }
  .bk-times { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}
.dev-note { background: var(--warn-soft); color: var(--warn-text); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin: 12px 0; font-family: var(--mono); }

/* ---------- cards / tables ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  margin: 16px 0;
}
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
table.data td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.pill.pending { background: var(--warn-soft); color: var(--warn-text); }
.pill.paid, .pill.active, .pill.completed { background: var(--ok-soft); color: var(--ok-text); }
.pill.fulfilled { background: var(--info-soft); color: var(--info-text); }
.pill.failed, .pill.refunded, .pill.cancelled, .pill.archived { background: var(--danger-soft); color: var(--danger); }
.pill.draft { background: var(--neutral-soft); color: var(--muted); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 18px 0; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; text-align: center; }
.stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.stat .v { font-size: 24px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--heading); }

/* ---------- platform (vaulk.shop) ---------- */
.plat-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  color: var(--header-text);
  padding: 12px 0;
}
.plat-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* logo | shop — same lockup as 1code.uk/books (10px gap, thin divider,
   sub-word in FULL text colour pulled 5px toward the divider) */
.wordmark {
  text-decoration: none;
  color: var(--header-text);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.wordmark .wm-logo { height: 18px; width: auto; display: block; }
.wordmark .wm-dark { display: none; }
html[data-theme="dark"] .wordmark .wm-light { display: none; }
html[data-theme="dark"] .wordmark .wm-dark { display: block; }
.plat-nav { display: flex; align-items: center; gap: 20px; }
.plat-nav a { color: var(--header-muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.plat-nav a:hover { color: var(--header-text); }
.plat-nav a.cta {
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: 7px 16px;
  border-radius: 999px;
  font-weight: 700;
}

/* mobile: menu collapses into the hamburger */
.plat-burger { display: none; background: none; border: 0; padding: 8px 4px; cursor: pointer; }
.plat-burger span { display: block; width: 22px; height: 2px; background: var(--header-text); border-radius: 2px; transition: transform .18s, opacity .18s; }
.plat-burger span + span { margin-top: 5px; }
.plat-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.plat-burger.open span:nth-child(2) { opacity: 0; }
.plat-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 720px) {
  .plat-burger { display: block; }
  .plat-nav { display: none; }
  .plat-nav.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-flat);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
    padding: 8px 20px 16px;
  }
  .plat-nav.open a { display: block; width: 100%; padding: 11px 0; font-size: 15px; }
  .plat-nav.open a.cta { text-align: center; padding: 11px 16px; margin-top: 6px; }
}

.hero-plat { padding: 88px 0 72px; text-align: center; }
.hero-plat h1 {
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 auto 20px;
  max-width: 720px;
  color: var(--heading);
}
.hero-plat p.lead { font-size: 16px; color: var(--muted); max-width: 600px; margin: 0 auto 34px; }
.hero-plat .price-line { color: var(--muted); font-family: var(--mono); font-size: 13px; margin-top: 26px; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 30px 0 60px; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.feature h3 { margin: 0 0 6px; font-size: 16px; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; }

.plat-footer { border-top: 1px solid var(--line); padding: 26px 0; margin-top: 40px; color: var(--muted); font-size: 13px; text-align: center; }

/* ---------- admin ---------- */
.admin-shell { display: grid; grid-template-columns: auto 1fr; height: 100vh; }
.admin-side { background: var(--side-bg); border-right: 1px solid var(--line); padding: 18px 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; width: 210px; transition: width 0.28s ease; }
.admin-side > nav { flex: 1; }

/* sidebar bottom cluster (centered): theme → line → settings → line → user */
.side-bottom { flex: none; padding-bottom: 8px; }
.side-divider { height: 1px; background: var(--line); margin: 8px 20px; }
.side-theme { padding: 2px 0 0; text-align: center; }
.side-bottom > a { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 9px 20px; color: var(--muted); text-decoration: none; font-size: 14px; white-space: nowrap; overflow: hidden; }
.side-bottom > a:hover { color: var(--heading); }
.side-bottom > a.on { color: var(--heading); background: var(--neutral-soft); }
.side-bottom > a.side-user { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 14px; text-decoration: none; }
.side-user:hover .side-user-mail { color: var(--heading); }
.side-user.on { background: var(--neutral-soft); }
.side-sms { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 20px 2px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.side-sms-v { font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.side-avatar { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-text); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.side-user-mail { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- drag & drop upload zone ---------- */
.dz-input { display: none; }
.dropzone { border: 2px dashed var(--line-strong); border-radius: 12px; padding: 30px 20px; text-align: center; cursor: pointer; transition: border-color .12s, background .12s; }
.dropzone:hover { border-color: var(--heading); }
.dropzone.dragging { border-color: var(--heading); background: var(--neutral-soft); }
.dropzone.has-files { border-style: solid; border-color: var(--ok-text); background: var(--ok-soft); }
.dz-icon { font-size: 22px; line-height: 1; color: var(--muted); margin-bottom: 8px; }
.dz-title { font-weight: 700; font-size: 14.5px; color: var(--heading); }
.dz-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.dz-picked { font-size: 12.5px; color: var(--ok-text); font-weight: 600; margin-top: 8px; word-break: break-word; }

/* ---------- signup slug field with fixed .vaulk.shop suffix ---------- */
.slug-wrap { position: relative; }
.slug-wrap input { padding-right: 112px; }
.slug-suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; font-family: var(--mono); pointer-events: none; }

/* ---------- compliance: one centred, document-forward card ----------
   Nothing sits beside the documents any more (the "what's outstanding /
   Continue" panel was removed), so the old two-column grid just left an empty
   left column and pinned the card to the right — visibly off-balance. The card
   now centres in the content area and takes the middle; each row lays its
   label + hint on the left and the upload button on the right, using the room
   the centring frees up. */
.cmp-grid { display: block; max-width: 760px; margin: 0 auto; }

/* ---------- compliance review ("Check your details"): two fields per row ----
   At the full page width, one field per row makes each input absurdly long. This
   grid flows the confirm fields two-up; section headings and the registered
   address (a stacked textarea box) span the full row. Stacks to one column on a
   narrow screen. */
.cmp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: start; }
.cmp-fields .field { margin: 0; }
.cmp-fields .field .k { display: block; margin: 0 0 5px; }
.cmp-fields .field .muted.small { display: block; margin-top: 4px; }
.cmp-fields-head { grid-column: 1 / -1; font-weight: 600; font-size: 13px; color: var(--muted); margin: 12px 0 -4px; }
.cmp-fields-head:first-child { margin-top: 0; }
.cmp-field-full { grid-column: 1 / -1; }
.cmp-fields textarea { min-height: 96px; line-height: 1.55; }
@media (max-width: 640px) { .cmp-fields { grid-template-columns: 1fr; } }

/* ---------- product form: two balanced columns ---------- */
.prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.prod-actions { margin-top: 18px; display: flex; gap: 10px; }
@media (max-width: 900px) { .prod-grid { grid-template-columns: 1fr; } }

.payout-due { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--heading); font-variant-numeric: tabular-nums; margin-top: 2px; }

.sf-cats { border-bottom: 1px solid var(--line); background: var(--surface); }
.sf-cats .container { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 10px 0; overflow-x: auto; }
.sf-cats a { color: var(--muted); text-decoration: none; font-size: 14px; white-space: nowrap; }
.sf-cats a:hover { color: var(--heading); }
.sf-cat-title { font-size: 26px; margin: 0 0 18px; }
.cat-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.cat-filter a { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.cat-filter a:hover { border-color: var(--heading); color: var(--heading); }
.cat-filter a.on { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); }

/* overview tiles that navigate */
a.stat-link { text-decoration: none; display: block; transition: border-color .1s; }
a.stat-link:hover { border-color: var(--heading); }

/* ---------- team console ---------- */
/* centered live-search above the merchants table: icon-in-pill */
.merch-search { position: relative; max-width: 460px; margin: 0 auto 16px; }
.merch-search .merch-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.merch-search input { width: 100%; padding: 11px 16px 11px 42px; border-radius: 999px; font-size: 14px; }
.merch-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* two independent column stacks (detail + staff pages): heights uncoupled */
.split-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
@media (max-width: 900px) { .split-cols { grid-template-columns: 1fr; } }
/* store URL beside Log out on the merchant detail page */
.top-url { font-size: 12.5px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.top-url:hover { color: var(--heading); }
/* pill sits inside the page h1 */
.admin-top h1 .pill { vertical-align: middle; margin-left: 4px; }
/* the search pill rides the top bar on every team page, centered */
.admin-top .merch-search { flex: 1 1 240px; max-width: 460px; margin: 0 auto; }
/* counts sit left under their left-aligned headers (owner balance doctrine) */
.team-shell .data th.num, .team-shell .data td.num { text-align: left; }
.team-shell .data td .mono { white-space: nowrap; }
/* the team rail never collapses — undo the merchant rail's hide rules */
@media (min-width: 761px) {
  html[data-side='min'] .team-side .side-label { opacity: 1; display: inline; }
  html[data-side='min'] .team-side .side-user-mail { opacity: 1; }
  html[data-side='min'] .team-side .side-theme { display: block; }
  html[data-side='min'] .team-side .side-bottom > a { padding: 9px 20px; }
}

/* "← Team console" return link (shown when a team session is also active) */
.side-return { display: block; text-align: center; padding: 8px 20px 2px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.side-return:hover { color: var(--heading); }
@media (min-width: 761px) { html[data-side='min'] .side-return { display: none; } }

/* ---------- settlements (Books) ---------- */
.settle-rows { margin-bottom: 14px; }
.settle-head { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.settle-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.settle-row:last-of-type { border-bottom: 0; }
.settle-date { font-weight: 600; font-size: 14px; min-width: 120px; }
.settle-amt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.admin-side .wordmark { font-size: 15px; color: var(--heading); transition: opacity 0.18s ease; }
/* Collapsed rail: icons only. Hover re-opens (wired in SIDE_WIRE); desktop only —
   the mobile top-bar layout keeps its own behaviour. */
@media (min-width: 761px) {
  html[data-side='min'] .admin-side { width: 62px; }
  html[data-side='min'] .side-label,
  html[data-side='min'] .admin-side .wordmark,
  html[data-side='min'] .side-user-mail { opacity: 0; }
  html[data-side='min'] .side-theme,
  html[data-side='min'] .side-subs { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-side, .side-label, .admin-side .wordmark { transition: none; }
}
.admin-side .wordmark img { height: 16px; }
/* ★ THE BUTTON THAT LOOKS LIKE A NAV LINK. One item in the team rail is a form
   button rather than an anchor — "Vaulk billing" mints a session for the billing
   store's owner, and an action that creates a session must be a POST, not a link a
   prefetcher can fire. Rather than hand-copy this box onto an inline style that
   drifts the next time the rail is restyled, the button joins the selector. */
.admin-side nav a,
.admin-side nav .side-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 20px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  border-left: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
}
.admin-side nav .side-btn {
  width: 100%; background: none; border: 0; border-left: 3px solid transparent;
  font-family: inherit; text-align: left; cursor: pointer;
  /* A <button> defaults to line-height:normal, which made this row 3.7px SHORTER
     than the anchors beside it. Inheriting fixes that.
     ⚠️ AND NO `font-size: inherit` HERE. This rule comes AFTER the shared
     `.admin-side nav a, .admin-side nav .side-btn` block that sets 14px, so
     `inherit` overrode it and pulled the button up to the parent's 15px —
     making the row 1.6px TALLER instead. The shared rule already sizes it; this
     one only resets what being a <button> brings. */
  line-height: inherit;
}
.admin-side nav form { margin: 0; }
.side-ico { flex: none; color: #000; }
html[data-theme="dark"] .side-ico { color: #ffffff; }
.side-label { transition: opacity 0.18s ease; }

/* collapsed rail: swap the full wordmark for the Vaulk "k" icon */
.side-mini { display: none; }
.side-mini img { height: 22px; display: block; }
html[data-theme="dark"] .side-mini .mini-light { display: none; }
html:not([data-theme="dark"]) .side-mini .mini-dark { display: none; }
@media (min-width: 761px) {
  html[data-side='min'] .admin-side .side-brand { display: flex; justify-content: center; padding: 6px 0 16px !important; }
  html[data-side='min'] .admin-side .side-brand .wordmark { display: none; }
  html[data-side='min'] .side-mini { display: block; }
  /* bottom cluster in the rail: icon only, centered (a hidden label must not
     keep its width and shove the icon off-edge) */
  html[data-side='min'] .side-bottom > a { padding: 9px 0; }
  html[data-side='min'] .side-bottom .side-label { display: none; }
  /* the TEAM console has no icon nav or reopen wire — it never collapses */
  html[data-side='min'] .admin-side.team-side { width: 210px; }
  html[data-side='min'] .team-side .wordmark { opacity: 1; display: inline-flex; }
}
.admin-side nav a:hover,
.admin-side nav .side-btn:hover { color: var(--heading); }
.admin-side nav a.on { color: var(--heading); border-left-color: var(--heading); background: var(--neutral-soft); }
.admin-main { display: flex; flex-direction: column; height: 100%; min-width: 0; overflow: hidden; }
.admin-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ★ ONBOARDING — no sidebar, so stop being an app shell and be a page.
   The dashboard is a fixed-height two-column grid whose CONTENT scrolls
   inside its own box. That is right when a sidebar has to stay put while
   the content moves. With the sidebar hidden it is just wrong: you get an
   inner scrollbar floating in the middle of the window, the layout is
   pinned to 100vh for no reason, and the whole thing reads as off-centre
   because it is a panel rather than a document.
   Here the window scrolls, as it does on every other normal page, and
   .admin-content's `margin: 0 auto` finally centres against the full
   viewport instead of against a grid column. */
.admin-shell-nonav { display: block; height: auto; }
.admin-shell-nonav .admin-main { height: auto; overflow: visible; display: block; }
.admin-shell-nonav .admin-scroll { overflow: visible; min-height: 0; }
/* a touch more room to breathe without a sidebar beside it */
.admin-shell-nonav .admin-content { padding-top: 32px; }
.admin-content { width: min(1040px, 100%); margin: 0 auto; padding: 26px 34px 28px; }
/* The two signed-in template galleries opt out of the 1040px column. They are
   grids of design thumbnails, and a merchant picking a template should see them
   laid out exactly as the public gallery lays them out — a narrow column shows
   three where the logged-out page shows six, so the signed-in view looked like a
   worse product than the shop window (owner, 2026-09-04). Opt-in via AdminPage's
   `wide` prop, NOT via the nav key: /admin/design/websites and the website page
   editor share active="design:websites", and the editor must stay narrow. */
.admin-content.is-wide { width: 100%; max-width: none; }
/* balance rule: a tile that can't fill the page (any width-capped card,
   banner or note) centers itself, matching the centered footer. Full-width
   tables/grids are unaffected. !important so it also wins over inline
   margins like style="max-width:960px;margin:0 0 16px". */
.admin-content [style*="max-width"] { margin-left: auto !important; margin-right: auto !important; }
/* …but inside a two-column grid, auto margins would shrink items to their
   content width — grid children fill their column instead */
.admin-content .cmp-grid > [style*="max-width"],
.admin-content .prod-grid > [style*="max-width"] { margin-left: 0 !important; margin-right: 0 !important; }
.admin-foot { flex: none; padding: 11px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; text-align: center; background: var(--bg-flat); }
.admin-foot a { color: var(--muted); }

/* dashboard notification bell */
.bell-wrap { position: relative; display: inline-flex; }
.bell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--heading); cursor: pointer; }
.bell-btn:hover { opacity: .7; }
.bell-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bell-badge[hidden] { display: none; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.bell-btn.ring svg { animation: bell-ring .7s ease; transform-origin: top center; }
@media (prefers-reduced-motion: reduce) { .bell-btn.ring svg { animation: none; } }
.bell-panel { position: absolute; top: 42px; right: 0; width: 320px; max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .18); z-index: 60; }
.bell-panel[hidden] { display: none; }
.bell-empty { padding: 20px 16px; font-size: 13px; color: var(--muted); text-align: center; }
.bell-item { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.bell-item:last-child { border-bottom: 0; }
.bell-item.unread { background: color-mix(in srgb, var(--danger) 5%, transparent); }
.bell-item-t { font-size: 13.5px; font-weight: 600; color: var(--heading); }
.bell-item-b { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.admin-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.admin-top h1 { font-size: 22px; margin: 0; }
.admin-top .actions { display: flex; gap: 10px; align-items: center; }
.thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); display: block; }

@media (max-width: 760px) {
  .admin-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .admin-side { display: flex; flex-direction: row; overflow-x: auto; align-items: center; padding: 8px 10px; border-right: none; border-bottom: 1px solid var(--line); width: auto; transition: none; }
  .admin-side .wordmark { padding: 8px 12px 8px; }
  .admin-side nav { display: flex; flex: none; }
  .admin-side nav a, .admin-side nav .side-btn { border-left: none; white-space: nowrap; }
  .side-bottom { display: flex; align-items: center; margin-left: auto; padding-bottom: 0; }
  .side-divider { display: none; }
  .side-theme { padding: 0 6px 0 12px; }
  .side-bottom > a { white-space: nowrap; }
  .side-user { width: auto; padding: 6px 10px; }
  .side-user-mail { display: none; }
}

/* ---------- storefront ---------- */
.sf-announce { background: var(--brand); color: #fff; text-align: center; font-size: 13px; padding: 7px 12px; }
.sf-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.sf-header .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.sf-header-right { display: flex; align-items: center; gap: 14px; }
.sf-name { font-size: 19px; font-weight: 800; text-decoration: none; letter-spacing: -0.01em; color: var(--heading); }
.sf-cart { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--text); }
.sf-cart .badge { display: inline-block; background: var(--brand); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 8px; margin-left: 6px; box-shadow: inset 0 0 0 1px var(--line-strong); }

.sf-hero { padding: 64px 0; text-align: center; }
.sf-hero h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.03em; margin: 0 0 10px; }
.sf-hero p { color: var(--muted); font-size: 16px; margin: 0; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; padding: 10px 0 50px; }
.product-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.product-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.product-card .ph { aspect-ratio: 1; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--muted); overflow: hidden; }
.product-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.product-card .meta { padding: 12px 14px 14px; }
.product-card .t { font-weight: 600; font-size: 14px; color: var(--heading); }
.product-card .p { color: var(--muted); font-size: 14px; margin-top: 2px; font-variant-numeric: tabular-nums; }

.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 40px 0 60px; }
.pdp .ph { aspect-ratio: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--muted); overflow: hidden; }
.pdp .ph img { width: 100%; height: 100%; object-fit: cover; }
.pdp h1 { font-size: 26px; margin: 0 0 8px; }
.pdp .price { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 16px; color: var(--heading); }
.pdp .desc { color: var(--muted); white-space: pre-wrap; }
.qty-row { display: flex; gap: 10px; align-items: center; margin: 22px 0; }
.qty-row input { width: 76px; }
@media (max-width: 700px) { .pdp { grid-template-columns: 1fr; } }

.sf-footer { border-top: 1px solid var(--line); margin-top: 30px; padding: 22px 0 34px; color: var(--muted); font-size: 13px; }
.sf-footer a { color: var(--muted); }
.sf-footer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
.sf-foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.sf-foot-links a { text-decoration: none; }
.sf-foot-links a:hover { text-decoration: underline; }
.policy-page { max-width: 720px; padding-top: 34px; padding-bottom: 56px; }
.policy-page h1 { font-size: 26px; margin: 0 0 18px; }
.policy-body { white-space: pre-wrap; line-height: 1.65; font-size: 14.5px; }
.legal { max-width: 720px; margin: 0 auto; padding: 40px 24px 70px; }
.legal h1 { font-size: 30px; margin: 0 0 10px; }
.legal-meta { color: var(--muted); font-size: 14px; margin: 0 0 18px; line-height: 1.5; }
.legal-note { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: var(--muted); margin-bottom: 26px; }
.legal-s { margin-bottom: 22px; }
.legal-s h2 { font-size: 16px; margin: 0 0 6px; }
.legal-s p { margin: 0; color: var(--text); font-size: 14.5px; line-height: 1.65; }
.legal a { color: var(--heading); }
.plat-foot-links { margin-top: 0; }
.plat-foot-links a { color: var(--muted); }
/* footer pinned to the viewport bottom on short pages (login, verify, …) */
.plat-body { display: flex; flex-direction: column; min-height: 100vh; }
.plat-body .plat-footer { margin-top: auto; }
.sf-body { display: flex; flex-direction: column; min-height: 100vh; }
.sf-body .sf-footer { margin-top: auto; padding-top: 22px; }
/* .sf-body is a COLUMN FLEX container, so its children are flex items. `.container`
   carries `margin: 0 auto`, and an auto margin on the cross axis CANCELS the
   default stretch — every page-level container therefore shrink-wrapped to its
   content instead of filling the page (max-width only ever caps a width, it
   never sets one). Mostly invisible on text pages; fatal on the watch page,
   where the player's `width:100%` resolved against a shrink-wrapped parent and
   collapsed the video to ~78px. Give page containers a real width. */
/* ★ A DIRECT CHILD OF THE FLEX BODY MUST BE TOLD TO FILL IT.
   `.sf-body` is a flex column, so a block child sizes to its CONTENT and its
   max-width becomes the width it actually takes — 640px of card on a 375px
   phone, with the page scrolling sideways. `.container` was already fixed here;
   `.narrow` and the booking wrapper had the same latent bug, which is why this
   rule now names all three rather than one. */
.sf-body > .container,
.sf-body > .narrow,
.sf-body > .bk-wrap { width: 100%; min-width: 0; }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); margin-top: 16px; }
.danger-zone h3 { color: var(--danger); }
.danger-list { margin: 8px 0 14px; padding-left: 20px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.danger-list li { margin-bottom: 4px; }
.policy-editor { width: 100%; min-height: 300px; font-family: inherit; font-size: 13px; line-height: 1.55; resize: vertical; }
.pol-tag { font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 2px 9px; border-radius: 999px; background: var(--line); color: var(--muted); text-transform: uppercase; }
.pol-tag.req { background: var(--ok-soft); color: var(--ok-text); }

/* ---------- register-a-domain search + pricing ---------- */
.dom-search { display: flex; gap: 8px; margin: 14px 0 4px; }
.dom-search input { flex: 1; }
.dom-results { margin: 10px 0 4px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dom-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.dom-row:last-child { border-bottom: 0; }
.dom-row.is-taken { opacity: .55; }
.dom-name { font-weight: 600; font-size: 14px; }
.dom-row-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.dom-price { font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.dom-per, .dom-pl-per { font-weight: 500; font-size: 11.5px; color: var(--muted); margin-left: 2px; }
.dom-na { font-size: 12.5px; color: var(--muted); }
.dom-msg { padding: 14px; font-size: 13px; color: var(--muted); }
.dom-pricelist { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.dom-pl-head { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.dom-pl-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; }
.dom-pl-tld { font-weight: 600; font-size: 13.5px; }
.dom-pl-price { font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* ---------- settings: full-width cards, fields at a readable measure ----------
   ★ TWO SEPARATE WIDTHS, WHICH IS THE WHOLE POINT (owner, 2026-09-07: "widen
   this page to fit the rest of the centre page, but you don't necessarily have
   to stretch the fields").

   The settings cards used to be capped at 640px inside a 1040px column, so the
   page read as a narrow strip floating in space — and the caps had drifted
   apart anyway (640 here, 820 on Policies, 960 on Billing), so moving between
   the tabs made the card jump width. The cap now comes off the CARD entirely
   and moves onto the CONTROLS.

   600px is not a round number picked by eye: the old card was 640px with 22px
   of padding a side, so a field inside it measured 596px. Keeping ~that width
   means the inputs look exactly as they always have — only the card around them
   grew. A 970px-wide single-line text input is harder to use, not easier: the
   eye loses the line, and the label sits a long way from where the text ends. */
.set-card { max-width: none; }
.set-card input[type="text"],
.set-card input[type="email"],
.set-card input[type="number"],
.set-card input[type="tel"],
.set-card input[type="search"],
.set-card select,
.set-card textarea { max-width: 600px; }
/* …except the long-form policy editor, which is prose and wants the room. */
.set-card textarea.policy-editor { max-width: none; }
/* The banners are messages, not forms — they read better short of full width. */
.set-card.form-ok, .set-card.form-error { max-width: 820px; }

/* ---------- the "which of these sounds like you?" fork ----------
   ★ THESE RULES WERE MISSING ENTIRELY (owner, 2026-09-07). The markup in
   `admin.tsx` has shipped `.dom-choose` / `.dom-choice` since the chooser was
   written, and no stylesheet ever defined them — so two cards rendered as two
   bare underlined links running into one another, with the descriptions welded
   onto the headings. Nothing "broke": it was never styled. The lesson is that a
   new class name is only half a change; grep the stylesheet before shipping the
   markup. */
.dom-choose { display: grid; gap: 10px; margin-top: 4px; }
.dom-choice {
  display: block; padding: 15px 17px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); text-decoration: none; color: var(--text);
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
/* The whole panel is the link, so nothing inside it may draw its own underline. */
.dom-choice:hover { border-color: var(--brand); background: var(--surface); transform: translateY(-1px); }
.dom-choice:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dom-choice strong { display: block; font-size: 15px; font-weight: 650; margin-bottom: 4px; letter-spacing: -.01em; }
.dom-choice span { display: block; line-height: 1.55; }
.dom-choice, .dom-choice:hover, .dom-choice strong, .dom-choice span { text-decoration: none; }

/* ---------- the registration progress ladder ----------
   Same omission as above: `.dom-steps` had markup and no rules, so the ladder
   the owner watched during a live registration was an unstyled <ol>. */
.dom-steps { list-style: none; margin: 14px 0 0; padding: 0; }
.dom-steps li {
  position: relative; padding: 0 0 14px 26px; font-size: 14px; color: var(--muted); line-height: 1.45;
}
/* The rail between the dots. Not on the last step — a line running off the
   bottom of the ladder reads as "and then something else", which is wrong: the
   last step IS the end. */
.dom-steps li::after {
  content: ''; position: absolute; left: 7px; top: 16px; bottom: 0; width: 2px; background: var(--line);
}
.dom-steps li:last-child { padding-bottom: 0; }
.dom-steps li:last-child::after { display: none; }
.dom-steps li::before {
  content: ''; position: absolute; left: 2px; top: 5px; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid var(--line); background: var(--surface); box-sizing: border-box;
}
.dom-steps li.done { color: var(--text); }
.dom-steps li.done::before { border-color: var(--ok-text); background: var(--ok-text); }
.dom-steps li.done::after { background: var(--ok-text); }
/* The step actually happening: filled ring plus a halo, so it reads as "now"
   at a glance rather than needing the reader to compare it with its neighbours. */
.dom-steps li.now { color: var(--text); font-weight: 600; }
.dom-steps li.now::before { border-color: var(--ok-text); background: var(--surface); box-shadow: 0 0 0 3px var(--ok-soft); }

/* ---------- compliance / KYC ---------- */
.cmp-banner { padding: 12px 14px; border-radius: 10px; background: var(--ok-soft); color: var(--ok-text); font-size: 13.5px; margin-bottom: 14px; }
.cmp-type { display: grid; gap: 10px; margin-top: 4px; }
.cmp-type-opt { display: block; width: 100%; text-align: left; padding: 15px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.cmp-type-opt:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, transparent); }
.cmp-type-opt strong { display: block; font-size: 14.5px; color: var(--heading); }
.cmp-type-opt span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
/* Each row: label + hint (and, once uploaded, the filename) on the LEFT; the
   upload button on the RIGHT, vertically centred. */
.cmp-doc { display: flex; align-items: center; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.cmp-doc:last-child { border-bottom: 0; padding-bottom: 0; }
.cmp-doc-main { flex: 1 1 auto; min-width: 0; }
.cmp-doc-action { flex: 0 0 auto; }
.cmp-doc-label { display: inline-flex; align-items: baseline; flex-wrap: wrap; font-weight: 600; font-size: 14px; }
.cmp-doc-hint { margin: 3px 0 0; }
.cmp-doc-link { display: inline-block; margin-top: 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* ★ [hidden] LOSES to any explicit display, and these two are toggled by the
   uploader. Stating it here means a later `display:` rule on either cannot
   silently un-hide them. */
.cmp-doc-ok[hidden], .cmp-doc-link[hidden] { display: none !important; }
.cmp-upload-state.err { color: var(--danger); }
.cmp-doc-ok { margin-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--ok-text); }
.cmp-doc-form { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
/* On a narrow screen the row stacks and the button spans the full width. */
@media (max-width: 560px) {
  .cmp-doc { flex-direction: column; align-items: stretch; gap: 10px; }
  .cmp-doc-action .cmp-doc-form { justify-content: stretch; }
  .cmp-doc-action .btn { flex: 1; text-align: center; }
}

/* merchant detail (ops console) */
.mrow { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mrow:last-child { border-bottom: 0; }
.mrow-k { color: var(--muted); }
.mrow-v { text-align: right; color: var(--text); word-break: break-word; }

/* ---------- barcodes (printable label sheet) ---------- */
.bc-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.bc-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.bc-label { background: #fff; border: 1px solid #dcdcdc; border-radius: 6px; padding: 9px 10px 7px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.bc-name { font-size: 12px; font-weight: 600; color: #000; margin-bottom: 5px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-svg { width: 100%; height: 46px; display: block; }
.bc-sku { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 1px; color: #000; margin-top: 4px; }
@media print {
  .admin-side, .admin-top, .admin-foot, .bc-actions { display: none !important; }
  .admin-shell { display: block !important; height: auto !important; }
  .admin-main { height: auto !important; overflow: visible !important; display: block !important; }
  .admin-scroll { overflow: visible !important; }
  .admin-content { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  body, .admin-shell { background: #fff !important; }
  .bc-sheet { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .bc-label { border: 1px solid #ccc; break-inside: avoid; page-break-inside: avoid; }
}

/* ---------- point of sale (full-screen, tablet-first) ---------- */
.pos-body { margin: 0; height: 100vh; overflow: hidden; background: var(--bg-flat); color: var(--text); }
.pos { display: flex; flex-direction: column; height: 100vh; }
.pos-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--surface); flex: none; }
.pos-brand { display: flex; align-items: center; gap: 12px; }
.pos-logo { height: 26px; width: auto; }
.pos-name { font-weight: 700; font-size: 16px; color: var(--heading); }
.pos-tag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.pos-top-right { display: flex; align-items: center; gap: 14px; }
.pos-exit { font-size: 13px; font-weight: 600; color: var(--btn-text); background: var(--btn-bg); text-decoration: none; padding: 7px 15px; border: 0; border-radius: 8px; }
.pos-exit:hover { opacity: .88; }
.pos-main { flex: 1; display: flex; min-height: 0; }
.pos-catalog { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 16px 20px; }
.pos-search input { width: 100%; font-size: 16px; padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--text); }
.pos-grid { flex: 1; overflow-y: auto; margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; align-content: start; }
.pos-tile { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 0; cursor: pointer; overflow: hidden; transition: border-color .1s, transform .06s; }
.pos-tile:hover { border-color: var(--brand); }
.pos-tile:active { transform: scale(.98); }
.pos-tile img, .pos-noimg { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--surface-2); display: block; }
.pos-tile-name { padding: 8px 10px 2px; font-size: 13px; font-weight: 600; color: var(--heading); line-height: 1.25; }
.pos-tile-price { padding: 0 10px 10px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pos-empty, .pos-cart-empty { color: var(--muted); font-size: 13px; padding: 20px 4px; }
.pos-cart { width: 360px; flex: none; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--surface); }
.pos-cart-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--heading); }
.pos-count { font-size: 12px; color: var(--muted); font-weight: 600; }
.pos-lines { flex: 1; overflow-y: auto; padding: 4px 18px; }
.pos-line { padding: 11px 0; border-bottom: 1px solid var(--line); }
.pos-line:last-child { border-bottom: 0; }
.pos-line-main { display: flex; justify-content: space-between; gap: 10px; }
.pos-line-name { font-size: 14px; font-weight: 600; color: var(--heading); }
.pos-line-price { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); }
.pos-qty { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.pos-qty button { width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-flat); color: var(--text); cursor: pointer; font-size: 16px; line-height: 1; }
.pos-qty span { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.pos-qty .pos-rm { width: auto; padding: 0 10px; margin-left: auto; font-size: 12px; color: var(--muted); border-color: transparent; }
.pos-foot { border-top: 1px solid var(--line); padding: 16px 18px; flex: none; }
.pos-total-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; color: var(--muted); }
.pos-grand { font-size: 20px; font-weight: 800; color: var(--heading); margin-bottom: 14px; }
.pos-grand span { color: var(--heading); }
.pos-charge { width: 100%; padding: 15px; border: 0; border-radius: 12px; background: var(--btn-bg); color: var(--btn-text); font-size: 16px; font-weight: 700; cursor: pointer; }
.pos-charge:disabled { opacity: .6; cursor: default; }
@media (max-width: 720px) { .pos-cart { width: 290px; } .pos-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } }
.pos-pay { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; z-index: 80; padding: 20px; }
.pos-pay[hidden] { display: none; }
.pos-pay-card { background: var(--surface); border-radius: 18px; padding: 26px 30px 24px; text-align: center; width: 100%; max-width: 360px; box-shadow: 0 24px 70px rgba(0, 0, 0, .45); }
.pos-pay-h { font-size: 19px; font-weight: 800; color: var(--heading); margin-bottom: 16px; }
.pos-pay-qr { display: flex; justify-content: center; margin-bottom: 14px; }
.pos-pay-qr svg { width: 240px; height: 240px; border-radius: 10px; }
.pos-pay-hint { font-size: 13px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.pos-pay-link { display: inline-block; font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.pos-pay-cancel { display: block; width: 100%; padding: 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; font-size: 14px; }
.pos-pay-ok { font-size: 46px; line-height: 1; color: #1f9d62; margin-bottom: 8px; }
.pos-pay-new { width: 100%; margin-top: 4px; }

/* ---------- mock gateway page ---------- */
.pay-topbar { display: flex; justify-content: flex-end; max-width: 430px; margin: 18px auto 0; padding: 0 20px; }
.pay-wrap { max-width: 430px; margin: 26px auto 48px; padding: 0 20px; }
.pay-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.pay-head { background: #0b0d12; color: #fff; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.pay-head .mono { color: #8a8e95; }
.pay-body { padding: 22px; }
.pay-amount { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 6px 0 2px; color: var(--heading); }
.pay-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.sandbox-strip { background: var(--warn-soft); color: var(--warn-text); font-family: var(--mono); font-size: 11px; text-align: center; padding: 6px; }

/* ---------- design gallery (admin) ---------- */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 14px 0 22px; }
.tpl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.tpl-card.current { outline: 2px solid var(--heading); }
.tpl-card svg { display: block; width: 100%; height: auto; }
.tpl-card .tpl-meta { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tpl-card .tpl-name { font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tpl-card .tpl-tag { font-size: 12.5px; color: var(--muted); flex: 1; }
.tpl-card form { margin-top: 4px; }

/* ---------- settings sub-navigation ---------- */
.subnav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; border-bottom: 1px solid var(--line); margin: 6px 0 4px; }
.subnav a {
  padding: 9px 14px;
  text-decoration: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.subnav a:hover { color: var(--heading); }
.subnav a.on { color: var(--heading); border-bottom-color: var(--heading); }
.domain-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; }
.dns-steps table.data { max-width: 460px; }
.dns-steps td { padding: 8px 10px; }

/* ================================================================
   FLESHED-TEMPLATE SECTIONS (storefront) — ride the colour theme
   ================================================================ */
.sf-logo { height: 34px; width: auto; display: block; }

/* flex-centred so the copy sits dead centre of the image however tall the hero
   is — a themed 100vh opener otherwise left the heading stranded near the top */
.sc-hero {
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 96px 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-hero-inner { max-width: 720px; margin: 0 auto; }
.sc-hero h1 { color: #fff; font-size: clamp(30px, 5vw, 52px); letter-spacing: -0.02em; margin: 0 0 14px; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.sc-hero p { color: rgba(255,255,255,.92); font-size: 17px; margin: 0 0 26px; text-shadow: 0 1px 12px rgba(0,0,0,.3); }
/* no-image hero falls back to brand tint */
.sc-hero:not([style]) { background: var(--brand); }

/* Hero cross-fade. Slide one is painted by the section's own background, so a
   hero with no JavaScript (or with reduced motion asked for) still shows a
   picture; the stacked slides simply fade over the top of it. */
.sc-hero { position: relative; overflow: hidden; }
.sc-hero-slides { position: absolute; inset: 0; }
.sc-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.sc-hero-slide.on { opacity: 1; }
.sc-hero-inner { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .sc-hero-slide { transition: none; }
}

.sc-h2 { font-size: clamp(20px, 3vw, 28px); letter-spacing: -0.02em; margin: 0 0 18px; text-align: center; }
.sc-products { padding: 50px 20px; }
.sc-sample-note { text-align: center; margin: 8px 0 0; }
.product-card.sample { position: relative; }
.product-card.sample .p { opacity: .5; }
.sample-tag {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,.65); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px;
}

.sc-strip { padding: 24px 20px 8px; }
.sc-strip-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.sc-strip-card { text-decoration: none; color: inherit; text-align: center; }
.sc-strip-img { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.sc-strip-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.sc-strip-card:hover .sc-strip-img img { transform: scale(1.05); }
.sc-strip-label { display: block; margin-top: 8px; font-weight: 600; font-size: 14px; }

/* full-bleed: the banner photo runs edge to edge rather than sitting as an inset
   card, which leaves dead margins either side. Height is unchanged. */
.sc-banner {
  background-size: cover; background-position: center;
  border-radius: 0; overflow: hidden;
  margin: 34px calc(50% - 50vw); width: 100vw; max-width: 100vw;
  padding: 64px 28px; text-align: center; color: #fff;
}
.sc-banner:not([style]) { background: var(--brand); }
.sc-banner-inner { max-width: 560px; margin: 0 auto; }
.sc-banner h2 { color: #fff; font-size: clamp(22px, 3.5vw, 34px); margin: 0 0 10px; text-shadow: 0 2px 16px rgba(0,0,0,.3); }
.sc-banner p { color: rgba(255,255,255,.92); margin: 0 0 20px; text-shadow: 0 1px 10px rgba(0,0,0,.3); }

/* ---- showcase catalogue: one product per full-bleed half-width panel ----
   The alternative to .product-grid, chosen per template via the products
   section's `layout`. Panels alternate ground in a checkerboard (A B / B A),
   so a template using this looks nothing like the card-grid ones. */
.sc-showcase { padding: 0 0 10px; }
.sc-showcase > .container { padding-top: 58px; padding-bottom: 26px; }
.sc-show-grid { display: grid; grid-template-columns: 1fr 1fr; }
.sc-show-item { background: var(--surface); }
.sc-show-item:nth-child(4n + 2), .sc-show-item:nth-child(4n + 3) { background: var(--surface-2); }
.sc-show-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 40px 54px; min-height: 520px; }
.sc-show-cat { text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; color: var(--brand); min-height: 15px; }
.sc-show-t { margin: 12px 0 0; font-size: clamp(15px, 1.6vw, 20px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.sc-show-t a { text-decoration: none; color: inherit; }
.sc-show-rule { display: block; width: 30px; height: 2px; background: currentColor; opacity: 0.3; margin: 16px 0 6px; }
/* The shot floats, capped in both directions, so the price and buy control stay
   above the fold on a phone instead of being pushed off by a full-width image. */
.sc-show-media { display: flex; align-items: center; justify-content: center; width: 100%; flex: 1; padding: 14px 0 4px; }
.sc-show-media img { width: auto; max-width: 72%; max-height: 250px; object-fit: contain; }
.sc-show-price { font-size: clamp(22px, 2.4vw, 32px); margin: 12px 0 22px; }
.sc-show-buy { margin: 0; }
@media (max-width: 760px) {
  .sc-show-grid { grid-template-columns: 1fr; }
  .sc-show-inner { min-height: 0; padding: 40px 22px 46px; }
  .sc-show-media img { max-height: 190px; max-width: 66%; }
}

/* ---- lookbook: full-bleed alternating rows, image one side, details the other ---- */
.sc-lookbook { padding: 46px 0 20px; }
.sc-look-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.sc-look-row:nth-child(even) .sc-look-media { order: 2; }
.sc-look-media { display: block; overflow: hidden; background: var(--surface-2); }
.sc-look-media img { width: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.5s ease; }
.sc-look-row:hover .sc-look-media img { transform: scale(1.03); }
.sc-look-copy { padding: 48px clamp(24px, 5vw, 78px); }
.sc-look-cat { display: block; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.sc-look-t { margin: 12px 0 0; font-size: clamp(19px, 2.2vw, 27px); font-weight: 700; letter-spacing: -0.01em; }
.sc-look-t a { text-decoration: none; color: inherit; }
.sc-look-desc { color: var(--muted); line-height: 1.7; font-size: 15px; margin: 14px 0 0; max-width: 46ch; }
.sc-look-p { display: block; margin: 18px 0 22px; font-size: 19px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .sc-look-row { grid-template-columns: 1fr; }
  .sc-look-row:nth-child(even) .sc-look-media { order: 0; }
  .sc-look-copy { padding: 30px 22px 44px; }
}

/* ---- buy grid: a card grid where every tile carries its own add-to-cart ---- */
.sc-buygrid { padding: 46px 20px 54px; }
.sc-buy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 34px 24px; }
.sc-buy-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sc-buy-media { display: block; width: 100%; overflow: hidden; background: var(--surface-2); }
.sc-buy-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform 0.4s ease; }
.sc-buy-card:hover .sc-buy-media img { transform: scale(1.04); }
.sc-buy-cat { margin-top: 14px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.sc-buy-t { margin-top: 6px; font-weight: 600; font-size: 15px; color: var(--heading); text-decoration: none; }
.sc-buy-p { margin-top: 4px; font-size: 14.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-buy-form { margin: 14px 0 0; }
.sc-buy-btn { margin-top: 14px; }
.sc-buy-form .sc-buy-btn { margin-top: 0; }

/* ---- masonry catalogue: a staggered wall of tiles, caption under each ---- */
.sc-masonry { padding: 44px 0 30px; }
.sc-mas-grid { display: block; column-count: 3; column-gap: 22px; }
.sc-mas-item { break-inside: avoid; display: block; margin: 0 0 30px; text-decoration: none; color: inherit; }
.sc-mas-media { overflow: hidden; background: var(--surface-2); }
.sc-mas-media img { width: 100%; display: block; object-fit: cover; transition: transform 0.4s ease; }
.sc-mas-item:nth-child(3n + 1) .sc-mas-media img { aspect-ratio: 3 / 4; }
.sc-mas-item:nth-child(3n + 2) .sc-mas-media img { aspect-ratio: 1; }
.sc-mas-item:nth-child(3n + 3) .sc-mas-media img { aspect-ratio: 4 / 5; }
.sc-mas-item:hover .sc-mas-media img { transform: scale(1.04); }
.sc-mas-cat { display: block; margin-top: 14px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.sc-mas-t { display: block; margin-top: 5px; font-weight: 700; font-size: 14px; color: var(--heading); }
.sc-mas-p { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .sc-mas-grid { column-count: 2; } }
@media (max-width: 560px) { .sc-mas-grid { column-count: 1; } }

/* the way back out of a product page, sitting beside Add to cart */
.pdp-keep { white-space: nowrap; }
@media (max-width: 480px) { .qty-row { flex-wrap: wrap; } .pdp-keep { width: 100%; text-align: center; } }

/* ---- hero variants: copy off dead centre, and an optional outline CTA ---- */
.sc-hero-left { justify-content: flex-start; text-align: left; }
.sc-hero-left .sc-hero-inner { margin: 0; max-width: 620px; }
.sc-hero-right { justify-content: flex-end; text-align: right; }
.sc-hero-right .sc-hero-inner { margin: 0; max-width: 620px; }
.sc-hero-right .sc-hero-inner p { margin-left: auto; }
/* the transparent CTA — deliberately unlike the solid slab the others use */
.sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 2px solid rgba(255, 255, 255, 0.9); color: #fff; box-shadow: none; }
.sc-hero .btn.brand.sc-hero-ghost:hover { background: rgba(255, 255, 255, 0.94); color: #111; }

/* ---- header search collapsed to a magnifier + our own panel ---- */
.sf-searchbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.sf-searchbtn:hover { opacity: 0.65; }
.sf-searchpanel { position: sticky; top: 0; z-index: 45; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.sf-searchpanel-inner { display: flex; gap: 10px; align-items: center; padding-top: 18px; padding-bottom: 18px; }
.sf-searchpanel-inner input { flex: 1; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font: inherit; font-size: 16px; background: var(--bg-flat); color: inherit; }
.sf-searchpanel-inner input:focus { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ---- menu behind a hamburger at every width, not just mobile ---- */
.sf-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 34px; height: 34px;
  padding: 0 6px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.sf-burger span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.sf-burger.on span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sf-burger.on span:nth-child(2) { opacity: 0; }
.sf-burger.on span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* the MENU links hide behind the burger (the cart stays — it is a utility, not a
   menu item). Opened, they stack into ONE panel: each link is absolutely placed
   by its index rather than a hand-tuned offset, so adding a third link can't
   strand one of them outside the panel the way a fixed offset did. */
.sf-header-burger { position: relative; }
.sf-header-burger .sf-navlink { display: none; }
.sf-header-burger.open::before {
  content: ''; position: absolute; top: calc(100% + 10px); right: 0; width: 200px;
  height: calc(var(--sf-menu-rows, 3) * 44px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); z-index: 59;
}
.sf-header-burger.open .sf-navlink {
  display: flex; align-items: center; position: absolute; right: 0; width: 200px;
  height: 44px; padding: 0 18px; z-index: 60; background: transparent;
}
.sf-header-burger.open .sf-navlink:nth-of-type(1) { top: calc(100% + 10px); }
.sf-header-burger.open .sf-navlink:nth-of-type(2) { top: calc(100% + 54px); }
.sf-header-burger.open .sf-navlink:nth-of-type(3) { top: calc(100% + 98px); }
.sf-header-burger.open .sf-navlink:nth-of-type(4) { top: calc(100% + 142px); }
.sf-header-burger.open .sf-navlink:hover { background: var(--surface-2); }

/* in-page anchor targets have to clear the sticky storefront header */
.sc-hero, .sc-products, .sc-showcase, .sc-masonry, .sc-buygrid, .sc-richtext, .sc-contact,
.sc-about-split, .sc-about-overlay, .sc-contact-split, .sc-contact-band { scroll-margin-top: 76px; }

/* ---- about, three ways — so no two templates introduce themselves alike ---- */
/* 'split': the picture sits beside the copy */
.sc-about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; padding: 64px 20px; }
.sc-about-media img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.sc-about-copy .sc-h2 { text-align: left; }
.sc-about-copy p { color: var(--muted); line-height: 1.75; font-size: 16px; margin: 0; white-space: pre-line; }
/* 'overlay': full-bleed picture, copy over a dimmed scrim */
.sc-about-overlay { background-size: cover; background-position: center; padding: 108px 20px; color: #fff; }
.sc-about-overlay-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.sc-about-overlay .sc-h2 { color: #fff; }
.sc-about-overlay p { color: rgba(255, 255, 255, 0.92); line-height: 1.8; font-size: 16.5px; margin: 0; white-space: pre-line; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }

/* ---- contact, three ways ---- */
/* 'split': the invitation on one side, the form on the other */
.sc-contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; padding: 58px 20px 68px; }
.sc-contact-lead .sc-h2 { text-align: left; }
.sc-contact-lead p { line-height: 1.7; font-size: 16px; margin: 0; }
.sc-contact-split .sc-contact-form { max-width: none; }
/* 'band': a full-bleed panel the form sits inside */
.sc-contact-band { background: var(--surface-2); padding: 64px 0 72px; }
.sc-contact-band-inner { max-width: 620px; text-align: center; }
.sc-contact-band .sc-contact-sub { margin: 0 0 26px; color: var(--muted); font-size: 15px; }

@media (max-width: 760px) {
  .sc-about-split, .sc-contact-split { grid-template-columns: 1fr; gap: 26px; }
  .sc-about-overlay { padding: 72px 20px; }
}

/* ---- contact: the shop's own form, so a template is complete on its own ---- */
.sc-contact { padding: 52px 20px 64px; max-width: 620px; text-align: center; }
.sc-contact-sub { margin: 0 0 26px; font-size: 15px; }
.sc-contact-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.sc-field { display: flex; flex-direction: column; gap: 6px; }
.sc-field label { font-weight: 600; font-size: 13px; }
.sc-field input, .sc-field textarea { padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; background: var(--surface); color: inherit; }
.sc-contact-form .btn { align-self: flex-start; margin-top: 4px; }

.sc-richtext { padding: 44px 20px; text-align: center; max-width: 680px; }
/* pre-line so a blank line in the body renders as a paragraph break. The shop's
   RichText emits the body as ONE <p> (unlike the website renderer, which splits
   on blank lines), so without this a merchant's paragraphs silently run together.
   No visual change to existing templates — none of them use blank lines yet. */
.sc-richtext p { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0; white-space: pre-line; }

/* store-template gallery (admin Design) */
/* Four across at most, never six. auto-fill kept adding columns as the window
   grew, and past four the preview thumbnail is too small to judge a design by —
   which is the only reason this page exists. Banded like the public gallery
   (owner, 2026-09-07). */
.stpl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 0 30px; }
@media (min-width: 900px)  { .stpl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .stpl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .stpl-grid { grid-template-columns: minmax(0, 1fr); } }

/* A centred page head over a full-width grid, the way the public gallery does
   it. Ranged left against four wide columns the title looked stranded in the
   corner. When this is on, the top bar keeps only the account actions. */
.admin-top.is-actions-only { justify-content: flex-end; }
.admin-head { text-align: center; margin: 30px 0 34px; }
.admin-head h1 { font-size: clamp(24px, 2.6vw, 31px); margin: 0 0 9px; line-height: 1.15; }
.admin-head-sub { margin: 0 auto; max-width: 60ch; font-size: 14px; opacity: .7; line-height: 1.55; }
.stpl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stpl-card.current { outline: 2px solid var(--heading); }
.stpl-thumb { aspect-ratio: 16/10; background: var(--surface-2); overflow: hidden; }
.stpl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.stpl-meta { padding: 13px 15px 15px; }
.stpl-name { font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stpl-tag { font-size: 12.5px; color: var(--muted); margin: 4px 0 10px; }

/* template card: LIVE mini-render thumb (real storefront, scaled) + action row */
.stpl-thumb { display: block; cursor: pointer; position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--surface-2); }
/* The snapshot is a real 1100px-wide render scaled down, and the card stretches
   to fill its column, so the scale has to track the card. A FIXED factor was fine
   while the grid was auto-fill at ~250px; once the grid went to four wide columns
   the same 0.235 under-filled and left a dark gap under every thumbnail.

   Same rule as .gal-snap on the public gallery: each band is scaled to the WIDEST
   card that band can produce and .stpl-thumb clips the rest, because a snapshot
   cropped on its right edge is invisible while a gap beside it is not. The bands
   below were MEASURED, not guessed — real card widths at 22 viewports, including
   the jump where the admin sidebar appears. Re-measure if the grid or the sidebar
   changes — scripts/stpl-scale-audit.sh rebuilds the harness that produced them. */
.stpl-thumb iframe { position: absolute; top: 0; left: 0; width: 1100px; height: 688px; border: 0;
  transform: scale(var(--stpl-s, 0.255)); transform-origin: top left; pointer-events: none; }
.stpl-grid { --stpl-s: 0.447; }  /* 1-up */
@media (min-width: 580px) { .stpl-grid { --stpl-s: 0.259; } }  /* 2-up */
@media (min-width: 700px) { .stpl-grid { --stpl-s: 0.308; } }  /* 2-up */
@media (min-width: 780px) { .stpl-grid { --stpl-s: 0.238; } }  /* 2-up */
@media (min-width: 880px) { .stpl-grid { --stpl-s: 0.264; } }  /* 2-up */
@media (min-width: 900px) { .stpl-grid { --stpl-s: 0.200; } }  /* 3-up */
@media (min-width: 1020px) { .stpl-grid { --stpl-s: 0.243; } }  /* 3-up */
@media (min-width: 1180px) { .stpl-grid { --stpl-s: 0.281; } }  /* 3-up */
@media (min-width: 1280px) { .stpl-grid { --stpl-s: 0.255; } }  /* 4-up */
@media (min-width: 1520px) { .stpl-grid { --stpl-s: 0.316; } }  /* 4-up */
@media (min-width: 1800px) { .stpl-grid { --stpl-s: 0.372; } }  /* 4-up */
@media (min-width: 2100px) { .stpl-grid { --stpl-s: 0.456; } }  /* 4-up */
@media (min-width: 2560px) { .stpl-grid { --stpl-s: 0.603; } }  /* 4-up */
.stpl-thumb::after { content: ""; position: absolute; inset: 0; } /* click shield → the <a> */
.stpl-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }

/* pinned "your current store design" card — the active pick + prominent Edit */
.stpl-current { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; padding: 14px; }
.stpl-current > .stpl-thumb { border-radius: calc(var(--radius) - 4px); border: 1px solid var(--line); }
.stpl-current-name { font-weight: 750; font-size: 18px; }
.stpl-current-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stpl-noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-weight: 600; }
@media (max-width: 640px) { .stpl-current { grid-template-columns: 1fr; } }
/* "in use" badge on the active template in a gallery */
.stpl-card.is-current { outline: 2px solid var(--heading); }
.stpl-badge { font-size: 11.5px; font-weight: 700; color: var(--heading); background: var(--neutral-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }

/* My design — the one active design, shown large (fills the page width) */
.md-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 16px 0 10px; flex-wrap: wrap; }
.md-current { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.md-thumb { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--surface-2); border-bottom: 1px solid var(--line); cursor: pointer; }
.md-thumb iframe { position: absolute; top: 0; left: 0; width: 150%; height: 150%; border: 0;
  transform: scale(0.6667); transform-origin: top left; pointer-events: none; }
.md-thumb::after { content: ""; position: absolute; inset: 0; } /* click shield → the <a> */
.md-current-body { padding: 16px 18px 20px; }
.md-empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 26px 24px; }

/* sidebar expandable Design + sub-items */
.admin-side nav a.side-group.on { color: var(--heading); border-left-color: var(--heading); background: var(--neutral-soft); }
.admin-side nav .side-subs { display: flex; flex-direction: column; }
.admin-side nav a.side-sub { padding-left: 34px; font-size: 13px; color: var(--muted); border-left: 3px solid transparent; }
.admin-side nav a.side-sub:hover { color: var(--heading); }
.admin-side nav a.side-sub.on { color: var(--heading); border-left-color: var(--accent-bright, var(--heading)); background: var(--neutral-soft); }
@media (max-width: 760px) { .admin-side nav .side-subs { flex-direction: row; } .admin-side nav a.side-sub { padding-left: 12px; } }

/* media library grid */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; }
.media-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); position: relative; }
.media-item .mph { aspect-ratio: 1; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.media-item .mph img { width: 100%; height: 100%; object-fit: cover; }
.media-item .mmeta { padding: 7px 9px; font-size: 11px; color: var(--muted); word-break: break-all; }
.media-item form { position: absolute; top: 6px; right: 6px; }
.media-item .del { background: rgba(0,0,0,.6); color: #fff; border: 0; border-radius: 6px; font-size: 11px; padding: 3px 7px; cursor: pointer; }

/* storefront centered search */
.sf-search { flex: 1; display: flex; justify-content: center; padding: 0 16px; }
.sf-search input {
  width: 100%; max-width: 420px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  font-size: 14px;
}
.sf-search input:focus { outline: 2px solid var(--focus); border-color: transparent; }
@media (max-width: 640px) {
  .sf-header .container { flex-wrap: wrap; }
  .sf-search { order: 3; flex-basis: 100%; padding: 0 0 12px; }
}

/* product detail — gallery + sizes */
.pdp-gallery { display: flex; flex-direction: column; gap: 10px; }
.pdp-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pdp-thumb { width: 62px; height: 62px; padding: 0; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-2); cursor: pointer; }
.pdp-thumb.on { border-color: var(--brand); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-sizes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pdp-size { position: relative; }
.pdp-size input { position: absolute; opacity: 0; pointer-events: none; }
.pdp-size span { display: inline-block; min-width: 42px; text-align: center; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.pdp-size input:checked + span { background: var(--brand); color: #fff; border-color: var(--brand); }

/* search autocomplete dropdown */
.sf-search-wrap { position: relative; width: 100%; max-width: 420px; }
.sf-search-wrap input { width: 100%; }
.sf-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.sf-sg-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-decoration: none; color: var(--text); }
.sf-sg-item:hover, .sf-sg-item.on { background: var(--surface-2); }
.sf-sg-img { width: 40px; height: 40px; flex: none; border-radius: 7px; overflow: hidden; background: var(--surface-2); }
.sf-sg-img img { width: 100%; height: 100%; object-fit: cover; }
.sf-sg-t { flex: 1; font-size: 14px; font-weight: 600; display: flex; flex-direction: column; }
.sf-sg-sku { font-size: 11px; color: var(--muted); font-weight: 400; font-family: var(--mono); }
.sf-sg-p { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- pricing page ---------- */
.pricing-hero { text-align: center; padding: 46px 0 6px; }
.pricing-hero h1 { font-size: clamp(28px, 5vw, 40px); margin: 0; letter-spacing: -0.02em; color: var(--heading); }
.pricing-hero .lead { max-width: 600px; margin: 14px auto 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.pricing-hero .lead strong { color: var(--heading); }
.billing-toggle { display: inline-flex; gap: 4px; margin-top: 26px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.bt-opt { border: 0; background: transparent; padding: 9px 20px; border-radius: 999px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 14px; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
.bt-opt.on { background: var(--surface); color: var(--heading); box-shadow: var(--shadow); }
.bt-save { color: var(--ok-text); font-size: 11.5px; font-weight: 700; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; align-items: stretch; }
.price-tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; background: var(--surface); position: relative; display: flex; flex-direction: column; }
.price-tile.popular { border-color: var(--heading); box-shadow: var(--shadow); }
.price-badge { position: absolute; top: -11px; left: 24px; background: var(--heading); color: var(--surface); font-size: 10.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }
.price-head h3 { font-size: 19px; margin: 0; color: var(--heading); }
.price-tagline { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.price-amount { margin: 18px 0 4px; min-height: 46px; }
.pa-num { font-size: 30px; font-weight: 800; color: var(--heading); letter-spacing: -0.02em; }
.pa-per { color: var(--muted); font-size: 14px; margin-left: 2px; }
.pa-note { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.pa-yearly { display: none; }
.pricing-grid[data-billing="yearly"] .pa-monthly { display: none; }
.pricing-grid[data-billing="yearly"] .pa-yearly { display: inline-block; }
.price-cta { width: 100%; text-align: center; justify-content: center; margin-top: 8px; }
.price-feats { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 11px; }
.price-feats li { font-size: 14px; color: var(--text); padding-left: 25px; position: relative; line-height: 1.4; }
.price-feats li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--ok-text); font-weight: 800; }
.price-feats li.feat-inherit { padding-left: 0; color: var(--muted); font-weight: 600; }
.price-feats li.feat-inherit::before { content: ''; }
.price-fee { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; font-family: var(--mono); }
.pricing-foot { text-align: center; max-width: 640px; margin: 30px auto 64px; color: var(--muted); font-size: 13px; line-height: 1.55; }
@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}
/* ★ PUBLIC PRICING FITS ALL FOUR PLANS ON ONE ROW (owner, 2026-08-20). Scoped to
   #pricing-grid (the public /pricing page) via its id, so the merchant billing
   grid — same .pricing-grid class but heavier go-live cards — keeps its own
   layout. The cards go slim; a touch wider than the text container gives the
   four of them room. Steps down 4 → 2 → 1 as the viewport narrows; the id beats
   the .pricing-grid rules on specificity, so these own every breakpoint. */
#pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1180px; }
@media (max-width: 1040px) { #pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; } }
@media (max-width: 560px) { #pricing-grid { grid-template-columns: 1fr; max-width: 400px; } }
.price-freeze { margin-top: 12px; padding: 9px 12px; border-radius: 8px; background: var(--ok-soft); color: var(--ok-text); font-size: 12.5px; line-height: 1.4; text-align: center; }
.price-freeze strong { font-weight: 800; }

/* ── AI assistant widgets (admin "vkai" + storefront "vsai") ─────────────── */
.vkai { position: fixed; right: 20px; bottom: 20px; z-index: 90; font-family: inherit; }
.vkai-fab { background: var(--btn-bg); color: var(--btn-text); border: none; border-radius: 999px; padding: 12px 20px; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 22px rgba(0,0,0,.18); }
.vkai-fab:hover { transform: translateY(-1px); }
.vkai-panel { display: none; }
.vkai.open .vkai-fab { display: none; }
.vkai.open .vkai-panel { display: flex; flex-direction: column; width: 360px; max-width: calc(100vw - 40px); height: 520px; max-height: calc(100vh - 40px); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 48px rgba(0,0,0,.22); overflow: hidden; }
.vkai-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.vkai-head b { font-size: 14px; color: var(--heading); display: block; }
.vkai-sub { font-size: 12px; color: var(--muted); }
.vkai-x { background: none; border: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.vkai-x:hover { color: var(--heading); }
.vkai-body { flex: 1; overflow-y: auto; padding: 13px; display: flex; flex-direction: column; gap: 9px; }
.vkai-msg { display: flex; }
.vkai-msg.user { justify-content: flex-end; }
.vkai-b { max-width: 86%; padding: 9px 12px; border-radius: 13px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.vkai-b.agent { background: var(--surface-2); color: var(--text); }
.vkai-b.user { background: var(--btn-bg); color: var(--btn-text); }
.vkai-form { display: flex; gap: 7px; padding: 10px 12px; border-top: 1px solid var(--line); }
.vkai-in { flex: 1; padding: 9px 12px; font-size: 13.5px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); }
.vkai-form button[type='submit'] { background: var(--btn-bg); color: var(--btn-text); border: none; border-radius: 9px; padding: 9px 15px; font-size: 13px; font-weight: 600; cursor: pointer; }
.vkai-mic { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; font-size: 15px; cursor: pointer; touch-action: none; }
.vkai-mic.rec { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); }
.vkai-teach { background: none; border: none; color: var(--muted); font-size: 11.5px; padding: 5px 12px 10px; cursor: pointer; }
.vkai-teach:hover { color: var(--heading); }
.vkai-notes { display: none; padding: 10px 12px; border-top: 1px solid var(--line); }
.vkai-notes.open { display: block; }
.vkai-notes label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.vkai-notes textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); resize: vertical; font-family: inherit; }
.vkai-notes button { margin-top: 6px; background: var(--btn-bg); color: var(--btn-text); border: none; border-radius: 8px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
@media (max-width: 760px) { .vkai.open .vkai-panel { height: 70vh; } }

/* ── AI widget: call screen + views (home / chat / call) ─────────────────── */
.vkai-head-btns { display: flex; align-items: center; gap: 4px; }
.vkai-clear { background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 4px 6px; }
.vkai-clear:hover { color: var(--heading); }
/* home = the Frontdesk-style call screen */
.vkai-home { flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; }
.vkai[data-view='home'] .vkai-home { display: flex; }
.vkai[data-view='home'] .vkai-body,
.vkai[data-view='home'] .vkai-form,
.vkai[data-view='home'] .vkai-teach,
.vkai[data-view='home'] .vkai-notes,
.vkai[data-view='home'] .vkai-callbar { display: none; }
.vkai-orb { width: 76px; height: 76px; border-radius: 50%; border: none; background: var(--btn-bg); color: var(--btn-text); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 26px rgba(0,0,0,.2); transition: transform .12s ease; }
.vkai-orb:hover { transform: scale(1.04); }
.vkai-orb-label { font-size: 14px; font-weight: 600; color: var(--heading); margin-bottom: 30px; }
.vkai-mode { display: inline-flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.vkai-mode button { border: none; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; padding: 7px 22px; border-radius: 999px; cursor: pointer; }
.vkai-mode button.on { background: var(--btn-bg); color: var(--btn-text); }
/* call view = transcript + status bar */
.vkai-callbar { display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.vkai[data-view='call'] .vkai-callbar { display: flex; }
.vkai[data-view='call'] .vkai-home,
.vkai[data-view='call'] .vkai-form,
.vkai[data-view='call'] .vkai-teach,
.vkai[data-view='call'] .vkai-notes { display: none; }
.vkai-call-status { font-size: 12.5px; color: var(--muted); }
.vkai-end { background: var(--btn-bg); color: var(--btn-text); border: none; border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
/* chat view keeps body+form (default rules already show them) */
.vkai[data-view='chat'] .vkai-home { display: none; }

/* ---- Media drive: aoii structure, Vaulk skin (tabs + wide dropzone + asset rows) ---- */
/* three-zone grid: empty left / centered tabs / actions right — the tabs stay
   centered but can never overlap the button cluster (unlike absolute centering).
   The bar lives OUTSIDE the 1040px content column (a direct child of
   .admin-scroll): the divider runs edge to edge and the cluster sits in the
   true top-right corner of the screen, clearly apart from the media tabs. */
.admin-top.has-center { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); padding: 10px 18px 11px; margin: 0; }
.admin-top.has-center .top-center { grid-column: 2; justify-self: center; max-width: 100%; overflow-x: auto; }
.admin-top.has-center .actions { grid-column: 3; justify-self: end; }
.drive-tabs { display: flex; align-items: center; gap: 2px; }
.drive-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.drive-tab:hover { color: var(--heading); background: var(--neutral-soft); }
.drive-tab.on { background: var(--btn-bg); color: var(--btn-text); }
.drive-tab svg { flex: 0 0 auto; }
.drive-tab-sep { width: 1px; height: 18px; background: var(--line); margin: 0 7px; }
.drive-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 14px; }
.drive-head h1 { font-size: 22px; margin: 0; }
.drive-head .crumb { color: var(--muted); font-weight: 600; }
.drive-dz { margin: 0 0 16px; }
.drive-dz .dropzone { padding: 38px 20px; }
.asset-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.asset-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.asset-row .asset-name { font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-row .asset-size { color: var(--muted); font-size: 12.5px; flex: 0 0 auto; }
.asset-row audio { margin-left: auto; height: 34px; max-width: 320px; flex: 0 1 320px; }
.asset-row .asset-actions { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.asset-row:not(.has-player) .asset-actions { margin-left: auto; }
.doc-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 4px 7px; border-radius: 8px; background: var(--neutral-soft); color: var(--heading); font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.top-search { display: flex; align-items: center; gap: 6px; }
.top-search input { width: 190px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font: inherit; font-size: 13px; background: var(--surface); color: var(--text); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; border-radius: 8px; color: var(--heading); cursor: pointer; }
.icon-btn:hover { background: var(--neutral-soft); }
@media (max-width: 900px) {
  .admin-top.has-center { grid-template-columns: 1fr; }
  .admin-top.has-center .top-center { grid-column: 1; width: 100%; }
  .admin-top.has-center .actions { grid-column: 1; justify-self: center; }
}
/* Switch to voice from the chat view — small phone button beside the input. */
.vkai-callbtn { flex: none; width: 38px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; color: var(--heading); cursor: pointer; padding: 0; }
.vkai-callbtn:hover { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); }
.vkai-callbtn svg { width: 16px; height: 16px; }
/* Header "Call" — bare icon + word, no background; hidden mid-call. */
.vkai-call { display: flex; align-items: center; gap: 5px; background: none; border: none; color: var(--heading); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; }
.vkai-call svg { width: 15px; height: 15px; }
.vkai-call:hover { opacity: .7; }
.vkai[data-view='call'] .vkai-call { display: none; }
/* Empty chat: a single centred invitation, gone the moment a message lands. */
.vkai-body:empty { align-items: center; justify-content: center; }
.vkai-body:empty::before { content: 'How can I help you?'; color: var(--muted); font-size: 14.5px; }
/* Footer link */
.vkai-powered { display: block; text-align: center; font-size: 11.5px; color: var(--muted); text-decoration: none; padding: 6px 12px 10px; }
.vkai-powered:hover { color: var(--heading); }
/* Frontdesk wordmark in the assistant header — the assistant's product brand. */
.vkai-fdmark { display: inline-flex; align-items: baseline; white-space: nowrap; font-size: 16px; color: var(--heading); letter-spacing: -0.01em; }
.vkai-fdmark b { font-weight: 700; font-size: inherit; display: inline; }
/* Three-zone header: title | Call (dead centre) | Clear × */
.vkai-head-left { flex: 1; min-width: 0; }
.vkai-head-btns { flex: 1; justify-content: flex-end; }
.vkai-call { flex: none; }

/* ---- Media drive: folders rail + folder modal (slice B) ---- */
/* one horizontal dotted line under the title row — runs from the title's edge
   to the Add button's edge, separating the page header from the content */
.drive-head { border-bottom: 1px dashed var(--line-strong); padding-bottom: 14px; margin-bottom: 16px; }

.tab-split { display: flex; gap: 24px; align-items: flex-start; }
.folders-rail { flex: 0 0 200px; border-right: 1px solid var(--line); padding-right: 14px; min-height: 180px; }
.tab-main { flex: 1 1 auto; min-width: 0; }
.rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rail-title { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rail-add { border: none; background: none; color: var(--heading); font-size: 15px; font-weight: 700; cursor: pointer; padding: 2px 7px; border-radius: 7px; }
.rail-add:hover { background: var(--neutral-soft); }
.rail-row { display: flex; align-items: center; gap: 6px; padding: 7px 8px 7px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; cursor: pointer; }
.rail-row:hover { background: var(--neutral-soft); }
.rail-row.on { background: var(--neutral-soft); color: var(--heading); }
.rail-row.is-drop { outline: 2px dashed var(--heading); outline-offset: -2px; }
.rail-name { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.rail-menu { border: none; background: none; color: var(--muted); cursor: pointer; padding: 0 4px; border-radius: 6px; font-size: 14px; line-height: 1; visibility: hidden; }
.rail-row:hover .rail-menu { visibility: visible; }
.rail-menu:hover { background: var(--line); color: var(--heading); }
.rail-hint { font-size: 12px; color: var(--muted); margin: 10px 2px 0; line-height: 1.5; }
.rail-ctx { position: absolute; z-index: 60; min-width: 170px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow); padding: 5px; display: flex; flex-direction: column; }
.rail-ctx button { border: none; background: none; text-align: left; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.rail-ctx button:hover { background: var(--neutral-soft); }
[data-media-id] { cursor: grab; }
[data-media-id].is-dragging { opacity: 0.45; }
@media (max-width: 760px) { .tab-split { flex-direction: column; } .folders-rail { flex: none; width: 100%; border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 10px; min-height: 0; } }

/* drive folder modal — the aoii dialog in Vaulk's skin (create/rename/delete) */
.drive-modal-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(15, 17, 22, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 0; }
/* the explicit display:flex would defeat the [hidden] attribute without this */
.drive-modal-backdrop[hidden] { display: none; }
.drive-modal { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow), 0 18px 50px rgba(15, 17, 22, 0.25); padding: 20px 20px 16px; }
.drive-modal h3 { margin: 0 0 14px; font-size: 16.5px; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmodal-input { width: 100%; padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: 10px; font: inherit; font-size: 14px; background: var(--surface); color: var(--text); }
.fmodal-input:focus { outline: none; border-color: var(--heading); box-shadow: 0 0 0 3px var(--neutral-soft); }
.fmodal-note { font-size: 12.5px; color: var(--muted); margin: 10px 2px 0; line-height: 1.5; }
.fmodal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---- Media drive: video cards + encode pipeline UI + waveform player ---- */
.up-progress { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); font-size: 13.5px; font-weight: 600; color: var(--heading); }
.mph-video { position: relative; display: block; aspect-ratio: 16 / 9; background: #14171f; border-radius: 10px 10px 0 0; overflow: hidden; }
.mph-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mph-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.8); }
.badge-dur { position: absolute; right: 6px; bottom: 6px; background: rgba(0, 0, 0, 0.78); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.proc-badge { position: absolute; left: 6px; top: 6px; display: inline-flex; gap: 5px; align-items: center; background: rgba(0, 0, 0, 0.78); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.proc-badge.err { background: var(--danger); }
.asset-row .proc-badge { position: static; background: var(--neutral-soft); color: var(--heading); margin-left: auto; }
.asset-row .proc-badge.err { background: var(--danger-soft); color: var(--danger); }
/* waveform player (ported .apl block, Vaulk tokens) */
.apl-mount { margin-left: auto; flex: 0 1 380px; min-width: 220px; }
.apl { display: flex; align-items: center; gap: 10px; }
.apl-play { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--btn-bg); color: var(--btn-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.apl-play svg { width: 15px; height: 15px; }
.apl .apl-ico-pause { display: none; }
.apl.is-playing .apl-ico-pause { display: block; }
.apl.is-playing .apl-ico-play { display: none; }
.apl-wave-wrap { flex: 1 1 auto; height: 40px; cursor: pointer; min-width: 120px; }
.apl-wave { width: 100%; height: 100%; display: block; }
.apl-time { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
/* watch page */
.watch-wrap { max-width: 960px; }
.watch-player { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; display: block; }

/* ---- webinars (simulive) ---- */
.wlive-pill { display: inline-block; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 999px; }
.wlive-player { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; display: block; }

/* ---- interactive video: runtime overlays + builder ---- */
.ivb-player-wrap { position: relative; }
.ivr-layer, #ivb-layer, #ivp-layer { position: absolute; inset: 0; pointer-events: none; }
.ivr-layer > *, #ivb-layer > *, #ivp-layer > * { pointer-events: auto; }
.ivr-btn { position: absolute; transform: translate(-50%, -50%); border: none; border-radius: 999px; padding: 9px 18px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.ivr-text { position: absolute; transform: translate(-50%, -50%); padding: 6px 12px; border-radius: 8px; font-size: 15px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.ivr-question, .ivr-message { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); }
.ivr-q-box { background: #fff; color: #111; border-radius: 14px; padding: 20px 22px; max-width: min(420px, 88%); display: flex; flex-direction: column; gap: 8px; }
.ivr-q-box p { margin: 0 0 6px; font-weight: 700; font-size: 15.5px; }
.ivr-q-box button { border: 1px solid #c9ced8; background: #fff; color: #111; border-radius: 9px; padding: 9px 13px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.ivr-q-box button:hover { background: #f0f1f4; }
.ivr-q-box button.wrong { border-color: #b4443a; color: #b4443a; }
.ivr-menu-btn { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border: none; border-radius: 10px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 17px; cursor: pointer; }
.ivr-menu { position: absolute; top: 54px; right: 10px; min-width: 230px; max-height: 70%; overflow-y: auto; background: rgba(10, 12, 16, 0.92); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; }
.ivr-menu-item { display: flex; justify-content: space-between; gap: 14px; border: none; background: none; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 11px; border-radius: 8px; cursor: pointer; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ivr-menu-item:last-child { border-bottom: none; }
.ivr-menu-item:hover { background: rgba(255, 255, 255, 0.1); }
.ivr-menu-item em { font-style: normal; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
.ivb-split { display: flex; gap: 20px; align-items: flex-start; }
.ivb-stage { flex: 1 1 auto; min-width: 0; }
.ivb-side { flex: 0 0 360px; }
.ivb-side-head { display: flex; align-items: center; gap: 8px; }
.ivb-side-head h3 { margin: 0; flex: 1; }
.ivb-card { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-top: 8px; cursor: pointer; background: var(--surface); }
.ivb-card.on { border-color: var(--heading); }
.ivb-card-head { display: flex; align-items: center; gap: 8px; }
.ivb-card-head strong { font-size: 11px; letter-spacing: 0.05em; }
.ivb-card-head em { font-style: normal; color: var(--muted); font-size: 12px; flex: 1; }
.ivb-fields { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; }
.ivb-row { display: flex; gap: 7px; align-items: flex-end; flex-wrap: wrap; }
.ivb-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); flex: 1 1 auto; min-width: 70px; }
.ivb-f input, .ivb-f select { padding: 7px 10px; font-size: 13px; }
.ivb-f input[type='color'] { padding: 2px; height: 32px; }
.ivb-f input[type='checkbox'] { width: auto; align-self: flex-start; }
@media (max-width: 1000px) { .ivb-split { flex-direction: column; } .ivb-side { flex: none; width: 100%; } }

/* public watch page chapters */
.vw-chapters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vw-chap { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.vw-chap:hover { border-color: var(--heading); }
.vw-chap em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 4px; }

/* ============================================================
   WEBSITES mode — general (non-shop) site builder sections.
   Themed via the shared --brand var + t-<theme> body class.
   ============================================================ */
.ws-body { margin: 0; color: var(--fg, #14171f); background: var(--bg, #fff); }
.ws-container { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.ws-narrow { max-width: 760px; }
.ws-section { padding: 72px 0; }
/* the zebra tint must never land on the two sections that paint themselves a
   solid brand colour and set their copy to white — it outranks `.ws-cta` on
   specificity, which left those bands white-on-white wherever they happened to
   fall on an even index */
.ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: color-mix(in srgb, var(--brand) 4%, transparent); }
.ws-h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; text-align: center; }
.ws-sub { text-align: center; color: #6c7079; max-width: 640px; margin: 0 auto 34px; font-size: 16px; line-height: 1.6; }

/* nav */
.ws-nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg,#fff) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid rgba(0,0,0,.07); }
.ws-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.ws-brand { font-weight: 700; font-size: 19px; letter-spacing: -.02em; text-decoration: none; color: inherit; }
.ws-brand img { height: 30px; width: auto; display: block; }
.ws-nav-links { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* ABOVE THE MOBILE BREAKPOINT THE MENU MAY NOT WRAP. If it does, it grows to
   two or three lines and the wordmark stops sharing a line with its own menu —
   which is the "brand stacked above the links" fault the owner ruled out. Three
   templates hit this with a long wordmark beside seven links. Below 760px the
   links collapse behind the hamburger and wrapping is irrelevant. */
@media (min-width: 761px) {
  .ws-nav-links { flex-wrap: nowrap; min-width: 0; }
  .ws-nav-links a { white-space: nowrap; }
  /* and if it still does not fit, the pieces SHRINK — they never sit on top of
     one another. A flex item defaults to min-width:auto, which refuses to go
     below its content and is what let a long wordmark collide with the menu. */
  /* and a guaranteed gap, so the wordmark and the first link can never end up
     abutting with no space between them once the links group has shrunk */
  .ws-nav-inner { overflow: hidden; gap: clamp(20px, 3vw, 52px); }
  .ws-nav-inner > .ws-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
.ws-nav-links a { text-decoration: none; color: inherit; font-size: 14.5px; font-weight: 500; opacity: .82; }
.ws-nav-links a:hover, .ws-nav-links a.on { opacity: 1; color: var(--brand); }
/* active menu item: coloured text + a line underneath (scroll-spy) */
.ws-nav-links a.on { border-bottom: 2px solid currentColor; padding-bottom: 3px; }
.ws-brand, .ws-logo-ph { white-space: nowrap; }
/* hamburger — hidden on desktop, shown on mobile */
.ws-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 40px;
  padding: 0 9px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.ws-burger span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.ws-burger.on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ws-burger.on span:nth-child(2) { opacity: 0; }
.ws-burger.on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* anchor targets clear the sticky nav (one-pager smooth-scroll menus) */
.ws-body section[id], .ws-body [id].ws-anchor { scroll-margin-top: 74px; }
.ws-body #top { scroll-margin-top: 0; }
.ws-sidebar section[id] { scroll-margin-top: 24px; } /* desktop sidebar: no top bar */
@media (max-width: 900px) { .ws-sidebar section[id] { scroll-margin-top: 64px; } .ws-sidebar #top { scroll-margin-top: 0; } }

/* hero */
.ws-hero { min-height: 78vh; display: flex; align-items: center; background-size: cover; background-position: center; color: #fff; }
.ws-hero-inner { max-width: 1120px; margin: 0 auto; padding: 60px 22px; width: 100%; }
.ws-hero-center .ws-hero-inner { text-align: center; }
.ws-hero-center .ws-hero-inner p { margin-left: auto; margin-right: auto; }
.ws-hero-right .ws-hero-inner { text-align: right; }
.ws-hero-right .ws-hero-inner h1, .ws-hero-right .ws-hero-inner p { margin-left: auto; }
.ws-hero h1 { font-size: clamp(34px, 6vw, 62px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 16px; max-width: 15ch; }
/* the dark scrim exists for white text — force hero copy white over any theme's
   heading colour, and lift it off busy photos with a soft shadow */
.ws-body .ws-hero h1, .ws-body .ws-hero p { color: #fff; }
.ws-body .ws-hero h1 { text-shadow: 0 2px 20px rgba(0,0,0,.30); }
/* hero button: solid, high-contrast on a photo (not a faint outline) */
.ws-body .ws-hero-cta.btn.brand { background: #fff; color: #111; border: 0; box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.ws-body .ws-hero-cta.btn.brand:hover { background: #f2f2f2; }
.ws-hero-center h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.ws-hero p { font-size: clamp(16px, 2vw, 20px); line-height: 1.5; max-width: 44ch; opacity: .94; margin: 0 0 26px; }
.ws-hero-cta { font-size: 16px; padding: 13px 28px; }
/* hero slideshow — extra slides cross-fade behind the copy */
.ws-hero { position: relative; overflow: hidden; }
.ws-hero-slides { position: absolute; inset: 0; z-index: 0; }
.ws-hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s ease; }
.ws-hero-slide.on { opacity: 1; }
.ws-hero-inner { position: relative; z-index: 1; }

/* story */
.ws-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.ws-story-right .ws-story-media { order: 2; }
.ws-story-media img { width: 100%; border-radius: 16px; display: block; aspect-ratio: 4/3; object-fit: cover; }
.ws-story-copy h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.ws-story-copy p { color: #4a4e57; line-height: 1.7; font-size: 16.5px; white-space: pre-line; }

/* video */
.ws-video-frame { position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.ws-video-frame iframe, .ws-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ws-video-caption { text-align: center; margin-top: 14px; }

/* features */
.ws-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; }
.ws-feature { text-align: center; padding: 8px; }
.ws-feature-icon { font-size: 34px; line-height: 1; margin-bottom: 14px; color: inherit; }
.ws-feature-icon .ws-ico { width: 38px; height: 38px; display: inline-block; vertical-align: middle; }
.ws-feature h3 { font-size: 18px; font-weight: 650; margin: 0 0 6px; }
.ws-feature p { color: #6c7079; line-height: 1.6; font-size: 15px; margin: 0; }

/* gallery + logos */
.ws-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ws-gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.ws-logos-heading { text-align: center; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; margin: 0 0 22px; }
.ws-logos-row { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: center; opacity: .7; }
.ws-logos-row img { height: 34px; width: auto; filter: grayscale(1); }

/* testimonials */
.ws-testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.ws-quote { margin: 0; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 26px; box-shadow: 0 4px 18px rgba(0,0,0,.04); }
.ws-quote blockquote { margin: 0 0 16px; font-size: 16.5px; line-height: 1.6; color: #2a2e37; }
.ws-quote blockquote::before { content: '"'; color: var(--brand); font-size: 40px; line-height: 0; vertical-align: -18px; margin-right: 4px; }
.ws-quote figcaption { font-size: 14px; }

/* pricing */
.ws-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; max-width: 940px; margin: 0 auto; }
.ws-plan { border: 1px solid rgba(0,0,0,.1); border-radius: 18px; padding: 30px 26px; text-align: center; background: #fff; }
.ws-plan h3 { margin: 0 0 10px; font-size: 18px; font-weight: 650; }
.ws-plan-price { margin-bottom: 18px; }
.ws-plan-amt { font-size: 40px; font-weight: 750; letter-spacing: -.03em; }
.ws-plan ul { list-style: none; padding: 0; margin: 0 0 22px; text-align: left; display: inline-block; }
.ws-plan li { padding: 7px 0 7px 26px; position: relative; color: #4a4e57; font-size: 14.5px; }
.ws-plan li::before { content: '✓'; position: absolute; left: 0; color: var(--brand); font-weight: 700; }

/* faq */
.ws-faq-list { border-top: 1px solid rgba(0,0,0,.09); }
.ws-faq-item { border-bottom: 1px solid rgba(0,0,0,.09); padding: 4px 0; }
.ws-faq-item summary { cursor: pointer; padding: 18px 4px; font-weight: 600; font-size: 16.5px; list-style: none; }
.ws-faq-item summary::-webkit-details-marker { display: none; }
.ws-faq-item summary::after { content: '+'; float: right; color: var(--brand); font-size: 22px; line-height: 1; }
.ws-faq-item[open] summary::after { content: '−'; }
.ws-faq-item p { color: #4a4e57; line-height: 1.7; margin: 0 4px 18px; }

/* team */
.ws-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 26px; }
.ws-member { text-align: center; }
.ws-member-photo img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; display: block; }
.ws-member strong { display: block; font-size: 16px; }
.ws-member p { color: #6c7079; font-size: 14px; line-height: 1.5; margin: 8px 0 0; }

/* cta + shoplink */
.ws-cta, .ws-shoplink { background: var(--brand); color: #fff; }
.ws-cta-inner { text-align: center; max-width: 680px; margin: 0 auto; }
.ws-cta-inner h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; color: #fff; }
.ws-cta-inner p { font-size: 17px; line-height: 1.6; opacity: .94; margin: 0 0 24px; }
/* `body.` prefixed for the same reason as the rule below: a storefront theme's
   `body.t-<theme> .btn.brand` outranks a bare `.ws-cta .btn.brand`, and on the
   brand-coloured band that painted the button the SAME colour as the band it
   sits on (neon) or made it transparent (atelier) — an invisible call to action. */
body.ws-body .ws-cta .btn.brand, body.ws-body .ws-shoplink .btn.brand { background: #fff; color: var(--brand); border: 0; box-shadow: none; }
/* website buttons: flat, no border/inset "lining" (hero button keeps its shadow).
   `body.` prefixed so it outranks the storefront theme blocks' own
   `body.t-<theme> .btn.brand` rules, which otherwise put borders and drop
   shadows back on website buttons. */
body.ws-body .btn.brand { border: 0; box-shadow: none; }

/* richtext */
.ws-richtext p { color: #3a3e47; line-height: 1.8; font-size: 17px; margin: 0 0 18px; }

/* contact form */
.ws-form { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.ws-form-empty { max-width: 520px; margin: 0 auto; padding: 26px; text-align: center; border: 1px dashed var(--border, #d8dbe0); border-radius: 12px; }
.ws-form-sent { max-width: 520px; margin: 0 auto; padding: 22px 26px; text-align: center; border-radius: 12px;
  background: rgba(34, 160, 90, .10); border: 1px solid rgba(34, 160, 90, .35); color: inherit; font-size: 1.05rem; }
.ws-field { display: flex; flex-direction: column; gap: 6px; }
.ws-field label { font-weight: 600; font-size: 14px; }
.ws-field input, .ws-field textarea, .ws-field select { padding: 11px 13px; border: 1px solid rgba(0,0,0,.18); border-radius: 10px; font: inherit; background: #fff; }
.ws-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }

/* columns — side-by-side content; user picks 1–4, stacks on mobile */
.ws-columns .ws-cols { display: grid; gap: 32px; align-items: start; }
.ws-cols-1 { grid-template-columns: 1fr; }
.ws-cols-2 { grid-template-columns: var(--col-fr, 1fr 1fr); }
.ws-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ws-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ws-col-h { font-size: 20px; font-weight: 750; letter-spacing: -.01em; margin: 0 0 8px; }
.ws-col p { line-height: 1.7; margin: 0 0 12px; }
@media (max-width: 720px) { .ws-cols-2, .ws-cols-3, .ws-cols-4 { grid-template-columns: 1fr; } }

/* photo grid — tight image grid, no captions (like a contact sheet / masonry) */
.ws-photogrid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ws-photogrid-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
@media (max-width: 720px) { .ws-photogrid-grid { grid-template-columns: repeat(2, 1fr); } }

/* title / list / quote blocks */
.ws-titleblock { text-align: center; }
.ws-title-h { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; }
.ws-title-sub { font-size: 18px; color: #555; margin: 0; }
.ws-list { margin: 0; padding-left: 22px; }
.ws-list li { line-height: 1.8; font-size: 17px; margin: 0 0 6px; }
.ws-quoteblock { text-align: center; }
.ws-quote-t { font-size: clamp(22px, 3vw, 30px); font-weight: 600; line-height: 1.4; font-style: italic; margin: 0 0 14px; }
.ws-quote-a { color: #666; font-style: normal; font-weight: 600; }
/* embed — sandboxed iframe (YouTube, Maps, forms…) */
.ws-embed-frame { width: 100%; border: 0; display: block; border-radius: 10px; }
.ws-embed-empty { text-align: center; color: #8a8f98; padding: 44px 20px; border: 1px dashed #cbd0d6; border-radius: 10px; }

/* spacer + footer */
.ws-spacer-s { height: 28px; } .ws-spacer-m { height: 56px; } .ws-spacer-l { height: 96px; }
.ws-footer { border-top: 1px solid rgba(0,0,0,.08); padding: 28px 0; }
.ws-footer .ws-container { display: flex; justify-content: space-between; align-items: center; }
.ws-footer .ws-footer-solo { justify-content: center; }
.ws-poweredby { color: inherit; text-decoration: none; }
.ws-poweredby:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .ws-story-grid { grid-template-columns: 1fr; gap: 24px; }
  .ws-story-right .ws-story-media { order: 0; }
  .ws-section { padding: 52px 0; }
  /* real mobile menu: the links collapse behind the hamburger */
  .ws-burger { display: flex; }
  .ws-nav-inner { position: relative; }
  .ws-nav-links { display: none; position: absolute; top: calc(100% + 10px); right: 0; left: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px;
    background: var(--bg, #fff); border: 1px solid rgba(0,0,0,.09); border-radius: 14px; padding: 8px;
    box-shadow: 0 16px 40px rgba(0,0,0,.16); z-index: 60; }
  .ws-nav-links.open { display: flex; }
  .ws-nav-links a { padding: 12px 12px; border-radius: 9px; font-size: 15.5px; opacity: 1; }
  .ws-nav-links a:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
  .ws-makeyours { text-align: center; margin-top: 6px; }
}

/* ---- Sidebar layout (editorial / portfolio, Bridge-style) ---- */
.ws-sidebar .ws-side { position: fixed; top: 0; left: 0; bottom: 0; width: 264px; z-index: 50;
  display: flex; flex-direction: column; padding: 44px 36px;
  background: var(--bg, #fff); border-right: 1px solid rgba(0,0,0,.09); }
.ws-sidebar .ws-side-top { display: flex; align-items: center; justify-content: space-between; }
.ws-sidebar .ws-side-brand { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.ws-sidebar .ws-burger { display: none; }
.ws-sidebar .ws-side-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-top: 60px; }
.ws-sidebar .ws-side-nav a { text-decoration: none; color: inherit; text-transform: uppercase;
  letter-spacing: .16em; font-size: 12px; font-weight: 500; opacity: .6; transition: opacity .15s, color .15s; }
.ws-sidebar .ws-side-nav a.on, .ws-sidebar .ws-side-nav a:hover { opacity: 1; color: var(--brand); }
.ws-sidebar .ws-side-nav a.on { border-bottom: 2px solid currentColor; padding-bottom: 5px; }
.ws-sidebar .ws-side-nav .ws-makeyours { margin-top: 8px; opacity: 1; letter-spacing: .08em; }
.ws-sidebar .ws-side-foot { margin-top: auto; opacity: .5; }
.ws-sidebar .ws-side-main { margin-left: 264px; }
.ws-sidebar .ws-hero { min-height: 100vh; }
@media (max-width: 900px) {
  .ws-sidebar .ws-side { position: sticky; top: 0; bottom: auto; width: auto; flex-direction: row;
    align-items: center; justify-content: space-between; padding: 12px 20px; border-right: 0;
    border-bottom: 1px solid rgba(0,0,0,.09);
    background: color-mix(in srgb, var(--bg, #fff) 90%, transparent); backdrop-filter: saturate(1.4) blur(10px); }
  .ws-sidebar .ws-side-top { flex: 1; }
  .ws-sidebar .ws-burger { display: flex; }
  .ws-sidebar .ws-side-nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; gap: 2px; display: none;
    background: var(--bg, #fff); border-bottom: 1px solid rgba(0,0,0,.09); padding: 8px 20px 16px; }
  .ws-sidebar .ws-side-nav.open { display: flex; }
  .ws-sidebar .ws-side-nav a { padding: 11px 0; font-size: 13px; }
  .ws-sidebar .ws-side-foot { display: none; }
  .ws-sidebar .ws-side-main { margin-left: 0; }
  .ws-sidebar .ws-hero { min-height: 76vh; }
}

/* caption block used by the website gallery when a template supplies captions */
.ws-gallery-cap { padding: 10px 2px 0; display: flex; flex-direction: column; gap: 2px; }
.ws-gallery-cap strong { font-size: 13px; }
.ws-gallery-cap span { font-size: 12.5px; color: #8b8b8b; }

/* Website mode-switch card (admin Design → Website) */
.ws-mode-card { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; border: 1px solid var(--border, #e2e4e8); border-radius: 12px;
  padding: 14px 16px; margin: 14px 0 4px; background: var(--card, #fff); }
.ws-mode-title { font-weight: 600; font-size: 14px; }
.ws-mode-actions { display: flex; gap: 8px; }
.ws-mode-actions button[disabled] { opacity: .55; cursor: default; }

/* Website editor (admin Design → Website → Edit) */
.wse-pages { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.wse-page-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border: 1px solid var(--border, #e2e4e8);
  border-radius: 10px; padding: 10px 12px; background: var(--card, #fff); }
.wse-page-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.wse-page-title { font-weight: 600; font-size: 14px; }
.wse-page-flags { display: flex; gap: 5px; }
.wse-page-ops { display: flex; align-items: center; gap: 6px; }
.wse-addpage { display: flex; gap: 8px; margin: 4px 0 8px; }
.wse-addpage input { flex: 1; max-width: 360px; }
/* Forms empty state — create control centred on the page, no placeholder card. */
.forms-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 50vh; padding: 24px 16px; }
.forms-empty-h { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.forms-empty-sub { max-width: 440px; margin: 0 0 22px; }
.forms-empty-add { width: min(480px, 100%); margin: 0; justify-content: center; }
.forms-empty-add input { max-width: none; }
.wse-icon { width: 30px; height: 30px; border: 1px solid var(--border, #e2e4e8); background: var(--card, #fff);
  border-radius: 8px; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; }
.wse-icon[disabled] { opacity: .35; cursor: default; }
.wse-icon.danger:hover { border-color: #d33; color: #d33; }
.wse-page-settings { flex-basis: 100%; }
.wse-page-settings > summary { cursor: pointer; font-size: 12px; color: var(--muted, #6b7078); list-style: none; padding: 2px 0; }
.wse-page-settings > summary::-webkit-details-marker { display: none; }
.wse-page-settings[open] > summary { font-weight: 600; color: inherit; }
.wse-settings-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 8px;
  padding-top: 10px; border-top: 1px solid var(--border, #e2e4e8); }
.wse-set-field { display: flex; flex-direction: column; gap: 4px; }
.wse-set-field input, .wse-page-kind { padding: 8px 10px; border: 1px solid var(--border, #e2e4e8);
  border-radius: 8px; background: var(--bg, #fff); color: inherit; font: inherit; }
/* Forms builder v2 — palette + blank canvas */
.fb2-top { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.fb2-stage { display: grid; grid-template-columns: 210px 1fr; gap: 16px; align-items: start; }
@media (max-width: 680px) { .fb2-stage { grid-template-columns: 1fr; } }
.fb2-palette { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-2, #f5f6f8); border: 1px solid var(--line, #e4e7ec); border-radius: 12px; padding: 12px; }
.fb2-palette-title { font-size: 11px; font-weight: 700; color: var(--muted, #6b7078); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.fb2-tile { all: unset; cursor: pointer; display: block; border: 1px solid var(--line, #e4e7ec); border-radius: 8px; padding: 8px 10px; background: var(--surface, #fff); }
.fb2-tile:hover { border-color: var(--text, #111); }
.fb2-tile b { display: block; font-size: 13px; }
.fb2-tile-hint { display: block; font-size: 11px; color: var(--muted, #9aa0a6); }
.fb2-canvas { min-height: 220px; display: flex; flex-direction: column; gap: 10px;
  border: 1px dashed var(--line-strong, #c9ced8); border-radius: 12px; padding: 14px; background: var(--surface, #fff); }
.fb2-empty { margin: auto; color: var(--muted, #9aa0a6); font-size: 14px; text-align: center; padding: 40px 12px; }
/* Field card = grey surface so each field reads as its own block; the inputs
   inside stay white (below) so "type here" is unmistakable. */
.fb2-card { border: 1px solid var(--line, #e4e7ec); border-radius: 10px; padding: 12px 14px;
  background: var(--surface-2, #f5f6f8); display: flex; flex-direction: column; gap: 8px; }
.fb2-card.fb2-dragging { opacity: .5; }
.fb2-card-head { display: flex; align-items: center; gap: 8px; }
.fb2-grip { cursor: grab; color: var(--muted, #9aa0a6); }
.fb2-card-type { flex: 1; font-size: 12px; font-weight: 700; color: var(--muted, #6b7078); }
.fb2-del { all: unset; cursor: pointer; color: #9aa0a6; padding: 2px 7px; border-radius: 6px; }
.fb2-del:hover { color: var(--danger, #b91c1c); background: color-mix(in srgb, var(--danger, #dc2626) 14%, transparent); }
.fb2-card input[type="text"], .fb2-card textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong, #c9ced8);
  border-radius: 8px; font: inherit; background: var(--surface, #fff); color: inherit; }
.fb2-label { font-weight: 600; }
.fb2-sub { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted, #6b7078); }
.fb2-req { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
/* rendered-form field extras (labels, groups, consent, help) */
.ws-req { color: #d33; }
.ws-field-help { margin: 2px 0 0; font-size: .85em; color: var(--muted, #6b7078); opacity: .9; }
.ws-fieldset { border: 0; padding: 0; margin: 0; min-inline-size: auto; }
.ws-fieldset legend { font-weight: 600; padding: 0; margin-bottom: 6px; }
.ws-fieldset .ws-choice { margin-top: 4px; }
.ws-choice { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.ws-choice input { flex: 0 0 auto; width: auto; }
.ws-consent .ws-choice { align-items: flex-start; }
.ws-form-heading { margin: 10px 0 2px; }
.ws-form-heading h3 { margin: 0; }
.ws-form-heading p { margin: 2px 0 0; opacity: .8; }
/* Forms builder (old v1 — kept for any lingering markup) */
.fb-builder { max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.fb-field { display: flex; flex-direction: column; gap: 4px; }
.fb-builder input[type="text"], .fb-builder select { padding: 8px 10px; border: 1px solid var(--border, #e2e4e8);
  border-radius: 8px; background: var(--bg, #fff); color: inherit; font: inherit; }
.fb-fields-head { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.fb-rows { display: flex; flex-direction: column; gap: 8px; }
.fb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--border, #e2e4e8);
  border-radius: 10px; padding: 8px 10px; background: var(--card, #fff); }
.fb-grip { color: var(--muted, #9aa0a6); }
.fb-label { flex: 2; min-width: 150px; }
.fb-options { flex: 1; min-width: 150px; }
.fb-req { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; }
.fb-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .fb-2col { grid-template-columns: 1fr; } }
.wse-pagemeta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  border: 1px solid var(--border, #e2e4e8); border-radius: 12px; padding: 14px; background: var(--card, #fff); }
.wse-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.wse-sections { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 14px; }
.wse-card { border: 1px solid var(--border, #e2e4e8); border-radius: 12px; background: var(--card, #fff); overflow: hidden; }
.wse-card-head { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: var(--panel, #f7f8fa); border-bottom: 1px solid var(--border, #e2e4e8); }
.wse-card-type { font-weight: 600; font-size: 13px; }
.wse-card-ops { display: flex; gap: 6px; }
.wse-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
.wse-field { display: flex; flex-direction: column; gap: 4px; }
.wse-field.wse-imgfield, .wse-form > .wse-save { grid-column: 1 / -1; }
.wse-label { font-size: 12px; font-weight: 600; color: var(--muted, #6b7078); }
.wse-form input[type="text"], .wse-form textarea, .wse-form select,
.wse-pagemeta input, .wse-addpage input { width: 100%; padding: 8px 10px; border: 1px solid var(--border, #e2e4e8);
  border-radius: 8px; background: var(--bg, #fff); color: inherit; font: inherit; }
.wse-form textarea { resize: vertical; }
.wse-imgrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wse-thumb { width: 84px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border, #e2e4e8); }
.wse-noimg { width: 84px; height: 60px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border, #c9ccd2); border-radius: 8px; text-align: center; }
.wse-save { display: flex; justify-content: flex-end; }
.wse-addsection { display: flex; gap: 8px; align-items: center; margin: 4px 0 10px; }
.wse-addsection select { padding: 8px 10px; border: 1px solid var(--border, #e2e4e8); border-radius: 8px; background: var(--bg, #fff); color: inherit; }
@media (max-width: 640px) { .wse-form { grid-template-columns: 1fr; } }

/* ---- Public template gallery (marketing funnel) ---- */
/* plat-body is a column flex; a .container's `margin:0 auto` makes flex items
   shrink-to-fit, collapsing auto-fill grids. width:100% restores full width
   (capped by the container's own max-width, then centred). */
.plat-body > .container { width: 100%; }
.gal-hero { text-align: center; padding: 64px 0 40px; }
.gal-hero h1 { font-size: clamp(30px, 5vw, 46px); margin: 0 0 12px; letter-spacing: -0.02em; }
.gal-hero .lead { max-width: 640px; margin: 0 auto 22px; font-size: 17px; line-height: 1.55; opacity: .82; }
.gal-section { padding: 8px 0 30px; }
.gal-section > h2 { font-size: 22px; margin: 18px 0 2px; }
.gal-sub { margin: 0 0 18px; opacity: .7; font-size: 14px; }
/* FULL WIDTH, NO SIDE GUTTERS. The cards were a fixed 300px centred inside a
   1080px container, which left ~420px of empty page either side on a wide
   screen. The grid now breaks out of the container and the columns stretch
   (1fr), so a row always meets both edges whatever the window width.
   The snapshot is scaled to fill the WIDEST card the grid can produce and the
   thumb clips the overflow — a scaled-down screenshot losing a sliver off its
   right edge is invisible, whereas a gutter beside it is not. */
.gal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
/* COLUMN COUNTS ARE 2, 3, 4 AND 6 — never 5. A page is 12 cards, and 12 fills a
   row at every one of those. auto-fill chose 5 at 1920px and left a last row of
   two, which is the same orphan the templates themselves are not allowed. */
@media (min-width: 1020px) { .gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .gal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1980px) { .gal-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 619px)  { .gal-grid { grid-template-columns: minmax(0, 1fr); } }
.gal-wide { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: clamp(16px, 2.2vw, 40px); padding-right: clamp(16px, 2.2vw, 40px); }

/* ---- the two doors, the switcher and the pager -----------------------------
   Splitting stores from websites and paging 12 at a time is what keeps this
   page fast: every card is a live iframe of a real template, so the cost of
   the page is the number of tiles on it, not the number of templates we own. */
/* the chooser heading sits centred over its two tiles, with real air beneath it
   — it was ranged left and sitting almost on top of them */
.gal-chooser > h2 { text-align: center; font-size: clamp(22px, 2.6vw, 30px); margin: 34px 0 34px; }
.gal-choose { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; max-width: 1000px; margin: 0 auto; }
.gal-choice { display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--card, #fff); border: 1px solid var(--border, #e4e4e7); border-radius: 14px; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease; }
.gal-choice:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
/* the live sample reuses .gal-snap, which is scaled for a 300px card — so the
   shot is pinned to 300px and centred rather than stretched, which would leave
   white gutters either side of the frame */
.gal-choice-shot { position: relative; display: block; width: 300px; max-width: 100%; aspect-ratio: 16 / 10;
  margin: 0 auto; overflow: hidden; background: var(--panel, #f2f3f5); border-bottom: 1px solid var(--border, #e4e4e7); }
.gal-choice-meta { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.gal-choice-t { font-weight: 700; font-size: 21px; }
/* the count is the fact people scan for, so it carries weight and the one bit
   of colour on the card. --ok-text is the design system's legible green in both
   themes; the brand mint is unreadable as text on paper white. */
.gal-choice-n { font-size: 15px; font-weight: 700; color: var(--money); opacity: 1; }
.gal-choice-p { font-size: 14px; opacity: .78; line-height: 1.5; margin-top: 4px; }
.gal-choice-go { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--brand, #111); }

/* the list head is centred over its grid — title, sub, the free line and the
   two-way switcher — instead of ranged left against a full-width grid */
.gal-list > .gal-crumb, .gal-list > h1, .gal-list > .gal-sub, .gal-list > .gal-free { text-align: center; }
.gal-list > h1 { font-size: clamp(26px, 3.2vw, 34px); margin: 10px 0 6px; }
.gal-list > .gal-sub { max-width: 62ch; margin-left: auto; margin-right: auto; }
.gal-switch { display: flex; justify-content: center; gap: 8px; margin: 0 0 26px; }

/* free, said plainly wherever templates are offered */
.gal-free { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap;
  margin: 0 0 20px; font-size: 14px; opacity: .82; }
.gal-free-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .02em; color: var(--money); background: var(--ok-soft); }
.gal-chooser > .gal-free { margin: -18px 0 30px; }
.gal-sw { text-decoration: none; color: inherit; font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border, #e4e4e7); opacity: .72; }
.gal-sw:hover { opacity: 1; }
.gal-sw.is-on { background: var(--fg, #111); color: var(--bg, #fff); border-color: var(--fg, #111); opacity: 1; }

.gal-count { text-align: center; margin: 26px 0 0; }
.gal-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.gal-pg-nums { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gal-pg { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px;
  text-decoration: none; color: inherit; font-size: 14px; font-weight: 600; border-radius: 9px;
  border: 1px solid var(--border, #e4e4e7); }
.gal-pg:hover { background: var(--panel, #f2f3f5); }
.gal-pg.is-on { background: var(--fg, #111); color: var(--bg, #fff); border-color: var(--fg, #111); }
.gal-pg.is-off { opacity: .34; }
.gal-pg-gap { padding: 0 2px; opacity: .5; }
@media (max-width: 560px) {
  .gal-pg-step { min-width: 0; padding: 0 10px; font-size: 13px; }
  .gal-choice-meta { padding: 16px 18px 20px; }
}
@media (max-width: 343px) { .gal-grid { grid-template-columns: 1fr; } }
.gal-card { display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--border, #e2e4e8); border-radius: 14px; overflow: hidden; background: var(--card, #fff);
  transition: transform .12s ease, box-shadow .12s ease; }
.gal-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
/* card = a real scaled-down snapshot of the site (header + hero + a bit below) */
.gal-thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel, #f2f3f5); }
/* The card stretches to fill its column, so its width varies with the window.
   The snapshot is scaled per column-count band to the WIDEST card that band can
   produce, and .gal-thumb clips the rest — it must always overfill, because a
   snapshot cropped on its right edge is invisible while a gap beside it is not. */
.gal-snap { position: absolute; top: 0; left: 0; width: 1100px; height: 688px; border: 0;
  transform: scale(var(--gal-snap-s, 0.55)); transform-origin: top left; pointer-events: none; }
@media (min-width: 320px) { .gal-grid { --gal-snap-s: 0.402; } }  /* 1-up, crops <=35% */
@media (min-width: 470px) { .gal-grid { --gal-snap-s: 0.539; } }  /* 1-up, crops <=26% */
@media (min-width: 620px) { .gal-grid { --gal-snap-s: 0.328; } }  /* 2-up, crops <=22% */
@media (min-width: 770px) { .gal-grid { --gal-snap-s: 0.394; } }  /* 2-up, crops <=18% */
@media (min-width: 920px) { .gal-grid { --gal-snap-s: 0.437; } }  /* 2-up, crops <=11% */
@media (min-width: 1020px) { .gal-grid { --gal-snap-s: 0.341; } }  /* 3-up, crops <=17% */
@media (min-width: 1210px) { .gal-grid { --gal-snap-s: 0.396; } }  /* 3-up, crops <=15% */
@media (min-width: 1400px) { .gal-grid { --gal-snap-s: 0.408; } }  /* 3-up, crops <=4% */
@media (min-width: 1440px) { .gal-grid { --gal-snap-s: 0.343; } }  /* 4-up, crops <=13% */
@media (min-width: 1630px) { .gal-grid { --gal-snap-s: 0.384; } }  /* 4-up, crops <=12% */
@media (min-width: 1820px) { .gal-grid { --gal-snap-s: 0.421; } }  /* 4-up, crops <=10% */
@media (min-width: 1980px) { .gal-grid { --gal-snap-s: 0.303; } }  /* 6-up, crops <=10% */
@media (min-width: 2170px) { .gal-grid { --gal-snap-s: 0.332; } }  /* 6-up, crops <=10% */
@media (min-width: 2360px) { .gal-grid { --gal-snap-s: 0.361; } }  /* 6-up, crops <=9% */
@media (min-width: 2550px) { .gal-grid { --gal-snap-s: 0.390; } }  /* 6-up, crops <=8% */
@media (min-width: 2740px) { .gal-grid { --gal-snap-s: 0.399; } }  /* 6-up, crops <=3% */
/* the landing page's two sample shots are still pinned to 300px, so they keep
   the original factor rather than the fill-the-card one */
.gal-choice-shot .gal-snap { transform: scale(0.2727); }
.gal-kind { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; z-index: 2; }
.gal-meta { padding: 13px 15px 16px; display: flex; flex-direction: column; gap: 3px; }
.gal-name { font-weight: 700; font-size: 16px; }
/* detail */
.gal-crumb { font-size: 13px; opacity: .7; margin: 24px 0 10px; }
.gal-crumb a { color: inherit; }
.gal-detail-head { padding-bottom: 8px; }
.gal-detail-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.gal-detail-top h1 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 6px; letter-spacing: -0.02em; }
.gal-detail-aud { margin: 6px 0 0; }
.gal-detail-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.gal-detail-blurb { max-width: 760px; font-size: 15.5px; line-height: 1.6; opacity: .85; margin: 18px 0 8px; }
/* large live snapshot on the detail page → clicking opens the full-tab preview */
.gal-snapwrap { position: relative; display: block; border: 1px solid var(--border, #e2e4e8); border-radius: 14px;
  overflow: hidden; background: var(--card, #fff); height: 620px; text-decoration: none; }
.gal-snap-lg { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; background: #fff; }
.gal-snap-open { position: absolute; bottom: 14px; right: 14px; font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(18,18,20,.82); padding: 8px 14px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.28);
  opacity: 0; transition: opacity .14s ease; }
.gal-snapwrap:hover .gal-snap-open { opacity: 1; }
.gal-detail-foot { text-align: center; padding: 44px 0 60px; }
.gal-detail-foot h2 { font-size: 26px; margin: 0 0 8px; }
@media (max-width: 560px) { .gal-detail-top { flex-direction: column; } .gal-snapwrap { height: 460px; } }

/* preview chrome injected into a template's own header when shown standalone */
.ws-logo-ph, .sf-logo-ph { font-style: italic; opacity: .6; font-weight: 600; }
.ws-makeyours { background: var(--brand); color: #fff !important; padding: 8px 16px; border-radius: 9px;
  font-weight: 600 !important; opacity: 1 !important; white-space: nowrap; }
.ws-makeyours:hover { filter: brightness(1.06); }
.sf-makeyours { white-space: nowrap; }

/* ---- Cart & Checkout — roomy two-column desktop layout ---- */
.co-page { max-width: 1060px; padding-top: 38px; padding-bottom: 68px; }
.co-h1 { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.02em; margin: 0 0 24px; }
.co-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 30px; align-items: start; }
.co-items, .co-form { padding: 26px 30px; }
.co-summary { padding: 24px 26px; position: sticky; top: 88px; }
.co-summary h3 { margin: 0 0 16px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }
.co-table th, .co-table td { padding: 15px 10px; font-size: 15px; }
.co-form label { display: block; margin: 18px 0 6px; font-weight: 600; font-size: 13.5px; }
.co-form form > label:first-child { margin-top: 0; }
.co-form input { width: 100%; padding: 12px 13px; font-size: 15px; }
.co-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.co-line { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; font-size: 14.5px; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); }
.co-line-q { opacity: .55; margin-left: 7px; white-space: nowrap; }
.co-line-p { white-space: nowrap; font-variant-numeric: tabular-nums; }
.co-sum-row { display: flex; justify-content: space-between; padding: 12px 0; }
.co-sum-row.total { font-weight: 700; font-size: 18px; border-top: 2px solid var(--line, rgba(0,0,0,.12)); margin-top: 6px; padding-top: 16px; }
.co-pay { margin-top: 18px; font-size: 15px; padding: 14px; }
.co-continue { display: block; text-align: center; margin-top: 14px; font-size: 14px; color: inherit; opacity: .72; text-decoration: none; }
.co-continue:hover { opacity: 1; }
@media (max-width: 820px) {
  .co-layout { grid-template-columns: 1fr; gap: 20px; }
  .co-summary { position: static; }
  .co-items, .co-form { padding: 20px 18px; }
}

/* Website Draft/Live status bar (Design → Website → Edit) */
.ws-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--border, #e2e4e8); border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; background: var(--card, #fff); }
.ws-status-l { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ws-dash { color: var(--muted, #6b7280); }
.ws-status-r { display: flex; gap: 8px; }
.ws-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ws-dot.is-live { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.ws-dot.is-draft { background: #d99a2b; box-shadow: 0 0 0 3px rgba(217,154,43,.18); }

/* ---- orphan rows in the new templates -------------------------------------
   Same complaint as the five-card grids: an incomplete last row sits hard left
   and reads as broken. Scoped to the bridges 22–30 themes so nothing already
   shipped moves. Quire's five departments are named in its copy AND in the
   contact select, so the row is widened to five rather than a department cut. */
body.t-quire .ws-features-grid,
body.t-dispatch .ws-features-grid,
body.t-lichen .ws-features-grid,
body.t-kerb .ws-features-grid,
body.t-dustroute .ws-features-grid { justify-content: center; }

/* ---- media studio: edit workbench (menu left, player right, live preview) ---- */
.vk-bench { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 26px; align-items: start; }
.vk-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vk-right { min-width: 0; }
.vk-pick { width: 100%; font-weight: 600; }
.vk-panel { border-top: 1px solid var(--line); padding-top: 14px; }
.vk-panel[hidden] { display: none; }
.vk-form { display: flex; flex-direction: column; gap: 12px; }
.vk-f { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.vk-f em { font-style: normal; color: var(--heading); }
.vk-colorrow { display: flex; gap: 8px; align-items: center; }
.vk-colorrow input[type="color"] { width: 42px; height: 34px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); cursor: pointer; }
.vk-hex { width: 110px; font-family: var(--mono); font-size: 12.5px; }
.vk-sub { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.vk-checks { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--text); font-weight: 500; }
.vk-checks label { display: flex; gap: 8px; align-items: center; }
.vk-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.vk-meta { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.vk-titlein { font-size: 20px; font-weight: 700; color: var(--heading); background: none; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; font-family: inherit; }
.vk-titlein:hover, .vk-titlein:focus { border-color: var(--line-strong); outline: none; background: var(--surface); }
.vk-descin { font: inherit; font-size: 13.5px; line-height: 1.55; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; resize: vertical; }
.vk-descin:focus { outline: none; border-color: var(--heading); }
/* live-preview appearance hooks */
.vk-player, .vk-audio-stage { border-radius: var(--vk-radius, 14px); overflow: hidden; }
.vk-audio-stage { background: var(--surface-2); padding: 16px; border: 1px solid var(--line); }
/* Centre play button — ported from aoii/web/player.css verbatim in behaviour.
   MUST be absolutely centred: media-chrome's centered-chrome slot is shared with
   the loading indicator, so without this the button stacks BELOW true centre
   (exactly the bug aoii's own comment warns about). Size scales with the player
   width via container query units, so it's right on a card and on a full page. */
.watch-player, .vk-player { container-type: inline-size; }
.vk-bigplay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;
  background: var(--vk-play-bg, transparent);
  opacity: var(--vk-play-op, 0.87);
  border-radius: 0;                                  /* square = hard corners (aoii default) */
  padding: clamp(7px, 2.2cqw, 18px) clamp(12px, 3.6cqw, 30px);
  --media-button-icon-width: clamp(18px, 5cqw, 44px);
  --media-primary-color: var(--vk-play-icon, #fff);
  --media-control-background: transparent;
  --media-control-hover-background: transparent;
}
/* Round = a TRUE circle: square box + aspect-ratio 1 so 50% radius can't egg. */
.vk-play-round .vk-bigplay {
  border-radius: 50%; aspect-ratio: 1; padding: clamp(11px, 3.6cqw, 30px);
  display: grid; place-items: center; box-sizing: border-box;
}
/* Shows ONLY while paused — it vanishes on play (YouTube-style), like aoii. */
media-controller:not([mediapaused]) .vk-bigplay { display: none !important; }
.vk-no-bar media-control-bar { display: none; }
.vk-no-centerplay .vk-bigplay { display: none; }
.vk-no-time media-time-display { display: none; }
.vk-no-volume media-volume-range, .vk-no-volume media-mute-button { display: none; }
.vk-no-fs media-fullscreen-button { display: none; }
/* public watch page */
.vw-title { font-size: 22px; margin: 16px 0 6px; }
.vw-desc { color: var(--muted); font-size: 14px; line-height: 1.6; white-space: pre-wrap; max-width: 76ch; margin: 0; }
/* analytics (inside the workbench) */
.an-wrap { display: flex; flex-direction: column; gap: 4px; }
.an-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.an-tile { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
.an-tile strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.an-tile span { font-size: 11px; color: var(--muted); font-weight: 600; }
.an-h { font-size: 12.5px; margin: 14px 0 6px; }
.an-graph { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.an-graph canvas { width: 100%; height: 100%; display: block; }
.an-cols { display: grid; grid-template-columns: minmax(150px, 200px) 1fr; gap: 18px; margin-top: 4px; }
.an-crow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.an-crow .an-bar { flex: 1; height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; }
.an-crow .an-bar div { height: 100%; background: var(--heading); border-radius: 999px; }
.an-crow em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.an-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.an-table th { text-align: left; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 6px 5px 0; border-bottom: 1px solid var(--line); }
.an-table td { padding: 5px 6px 5px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.an-table a { color: var(--heading); word-break: break-all; }
.an-heat { display: flex; flex-direction: column; gap: 4px; }
.an-hrow { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.an-hmeta { flex: 0 0 92px; color: var(--muted); white-space: nowrap; }
.an-hstrip { flex: 1; display: flex; gap: 1px; height: 11px; }
.an-hstrip i { flex: 1; background: var(--line); border-radius: 1px; }
.an-hstrip i.on { background: var(--heading); opacity: 0.45; }
.an-hstrip i.hot { background: var(--heading); }
.an-hrow em { font-style: normal; color: var(--muted); min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .vk-bench { grid-template-columns: 1fr; } .an-cols { grid-template-columns: 1fr; } }

/* card Edit affordance (matches aoii's card pencil button) */
.mmeta-row { display: flex; gap: 8px; align-items: center; }
.mmeta-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-edit { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--heading); text-decoration: none; padding: 3px 7px; border-radius: 7px; }
.card-edit:hover { background: var(--neutral-soft); }

/* ---- the persistent audio dock (aoii's bottom bar) ---- */
html.vk-dock-open body { padding-bottom: 76px; }
.vk-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(20, 23, 31, 0.08); }
.vk-dock-play { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--btn-bg); color: var(--btn-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vk-dock .ico-pause { display: none; }
.vk-dock.is-playing .ico-pause { display: block; }
.vk-dock.is-playing .ico-play { display: none; }
.vk-dock-skip { border: none; background: none; color: var(--muted); font-size: 14px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.vk-dock-skip:hover { background: var(--neutral-soft); color: var(--heading); }
.vk-dock-title { flex: 0 1 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; color: var(--heading); }
.vk-dock-time, .vk-dock-dur { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.vk-dock-seek { flex: 1 1 auto; accent-color: var(--heading); }
.vk-dock-vol { flex: 0 0 80px; accent-color: var(--heading); }
.vk-dock-edit { flex: 0 0 auto; color: var(--muted); text-decoration: none; padding: 4px 7px; border-radius: 6px; font-size: 14px; }
.vk-dock-edit:hover { background: var(--neutral-soft); color: var(--heading); }
.vk-dock-close { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 4px 7px; border-radius: 6px; }
.vk-dock-close:hover { background: var(--neutral-soft); color: var(--heading); }
.asset-row.is-playing { border-color: var(--heading); }
@media (max-width: 760px) { .vk-dock-vol, .vk-dock-dur { display: none; } .vk-dock-title { flex-basis: 120px; } }

/* .fmodal-input sets `background:` (shorthand), which wipes the house chevron
   image on selects — restore it so every dropdown looks like a dropdown. */
select.fmodal-input, select.vk-pick {
  background-color: var(--surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23888f9b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}


/* This platform is black & white — never let the browser paint its default blue
   on range/checkbox controls. */
.admin-shell input[type="range"], .vk-form input[type="range"], .vk-dock input[type="range"] { accent-color: var(--heading); }
.admin-shell input[type="checkbox"], .vk-checks input[type="checkbox"] { accent-color: var(--heading); }

/* ---- appearance: aoii's ap-* semantics, applied to media-chrome ---- */
.vk-player { --media-control-bar-background: var(--vk-bar-bg, rgba(0,0,0,0.87)); }
.vk-player media-control-bar { background: var(--vk-bar-bg, rgba(0, 0, 0, 0.87)); }
.vk-player media-control-bar > * { --media-control-background: transparent; --media-control-hover-background: rgba(255,255,255,0.14); }
.ap-corners-square { border-radius: 0 !important; }
.ap-vertical { aspect-ratio: 9 / 16; max-width: 420px; margin-left: auto; margin-right: auto; }
.ap-no-bigplay .vk-bigplay { display: none !important; }
.ap-no-bar media-control-bar { display: none !important; }
.ap-no-progress media-time-range { display: none !important; }
.ap-no-time media-time-display { display: none !important; }
.ap-no-volume media-mute-button, .ap-no-volume media-volume-range { display: none !important; }
.ap-no-settings .vk-q-wrap, .ap-no-settings media-playback-rate-button { display: none !important; }
.ap-no-fullscreen media-fullscreen-button { display: none !important; }
.ap-play-sharp .vk-bigplay { border-radius: 0; }
/* quality button + HD/4K badge (aoii's q-badge) */
.vk-q-wrap { position: relative; display: inline-flex; align-items: center; }
.q-badge { position: absolute; top: 2px; right: -2px; font-size: 8.5px; font-weight: 800; letter-spacing: 0.03em;
  background: var(--media-primary-color, #fff); color: #000; border-radius: 3px; padding: 0 3px; pointer-events: none; }
/* logo overlay */
.ap-logo-wrap { position: absolute; z-index: 3; display: block; }
.ap-logo-wrap img { display: block; width: 100%; height: auto; }
.ap-logo-top-left { top: 12px; left: 12px; } .ap-logo-top-right { top: 12px; right: 12px; }
.ap-logo-bottom-left { bottom: 58px; left: 12px; } .ap-logo-bottom-right { bottom: 58px; right: 12px; }
.ap-logo-sz-small { width: 64px; } .ap-logo-sz-medium { width: 104px; } .ap-logo-sz-large { width: 156px; }

/* ---- appearance panel chrome (matches aoii's grid/groups) ---- */
.ap-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ap-group { border-top: 1px solid var(--line); padding-top: 12px; }
.ap-group:first-child { border-top: none; padding-top: 0; }
.ap-group-title { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ap-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 13px; color: var(--text); }
.ap-row > span:first-child { flex: 0 0 116px; color: var(--muted); font-weight: 600; font-size: 12.5px; }
.ap-row select { flex: 1 1 auto; }
.ap-row-slider input[type="range"] { flex: 1 1 auto; accent-color: var(--heading); }
.ap-val { font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.ap-color-ctl { display: inline-flex; gap: 7px; align-items: center; flex: 1 1 auto; }
.ap-color-ctl input[type="color"] { width: 40px; height: 30px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); cursor: pointer; }
.ap-hex { width: 92px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; font-family: var(--mono); font-size: 12px; background: var(--surface); color: var(--text); }
.ap-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.ap-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text); }
.ap-check em { font-style: normal; color: var(--muted); }
.ap-check input[type="checkbox"] { accent-color: var(--heading); margin-top: 2px; }
.ap-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 8px; }
.ap-logo-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ap-logo-preview { width: 96px; height: 48px; border: 1px dashed var(--line-strong); border-radius: 8px; display: grid; place-items: center; overflow: hidden; }
.ap-logo-preview img { max-width: 100%; max-height: 100%; }
.ap-logo-empty { font-size: 11px; color: var(--muted); }
.ap-logo-sel { flex: 0 0 auto; width: auto; padding: 7px 30px 7px 10px; font-size: 12.5px; }
.ap-pb-end { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.vk-soon { border: 1px dashed var(--line-strong); border-radius: 12px; padding: 18px; }
.vk-soon-badge { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: var(--neutral-soft); padding: 3px 8px; border-radius: 999px; }
.vk-soon h3 { margin: 10px 0 5px; font-size: 15.5px; }
.vk-soon p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* ---- on-brand dropdown (replaces the OS select menu) ---- */
.vk-sel { position: relative; }
.vk-sel-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface);
  color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.vk-sel-btn:hover { border-color: var(--heading); }
.vk-sel-btn svg { color: var(--muted); flex: 0 0 auto; }
/* explicit `display` beats the [hidden] attribute — without this companion rule
   the menu opens on load and can never close (same gotcha as .drive-modal-backdrop) */
.vk-sel-menu[hidden] { display: none !important; }
.vk-sel-menu { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow), 0 14px 34px rgba(15,17,22,0.16);
  display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.vk-sel-item { text-align: left; border: none; background: none; color: var(--text); font: inherit; font-size: 13.5px;
  font-weight: 600; padding: 9px 11px; border-radius: 8px; cursor: pointer; }
.vk-sel-item:hover { background: var(--neutral-soft); }
.vk-sel-item.on { background: var(--btn-bg); color: var(--btn-text); }

/* ---- quality menu: readable over any video ---- */
media-rendition-menu, media-playback-rate-menu, media-captions-menu {
  --media-menu-background: rgba(12, 14, 18, 0.94);
  --media-menu-item-checked-indicator-fill: #fff;
  --media-text-color: #fff;
  --media-font-size: 13px;
  background: rgba(12, 14, 18, 0.94);
  border-radius: 12px; padding: 4px; backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
media-rendition-menu::part(menu-item), media-playback-rate-menu::part(menu-item) { border-radius: 8px; }

/* ---- video card: aoii proportions — thumb + title + date + Edit + ⋮ ---- */
.media-item .mph-video { display: block; }
.vcard-body { padding: 9px 11px 10px; display: flex; flex-direction: column; gap: 3px; }
.vcard-title { font-size: 13.5px; font-weight: 700; color: var(--heading); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard-title:hover { text-decoration: underline; }
.vcard-foot { display: flex; align-items: center; gap: 8px; }
.vcard-date { flex: 1; font-size: 11.5px; color: var(--muted); }
.vcard-more { border: none; background: none; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
  padding: 2px 6px; border-radius: 6px; }
.vcard-more:hover { background: var(--neutral-soft); color: var(--heading); }
.rail-ctx button.is-danger { color: var(--danger); }

/* ---- image cards: hover actions (move / rename / delete) like aoii ---- */
.media-item .asset-foot { display: flex; align-items: center; gap: 6px; padding: 8px 10px 9px; }
.asset-nm { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-acts { display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.media-item:hover .asset-acts, .media-item:focus-within .asset-acts { opacity: 1; }
.ico-act { display: inline-grid; place-items: center; width: 26px; height: 26px; border: none; background: none;
  color: var(--muted); border-radius: 7px; cursor: pointer; }
.ico-act:hover { background: var(--neutral-soft); color: var(--heading); }
.ico-act.ico-danger:hover { background: var(--danger-soft); color: var(--danger); }
/* move-to-folder list inside the dialog */
.vk-movelist { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto; margin: 4px 0 2px; }
.vk-moveitem { text-align: left; border: none; background: none; color: var(--text); font: inherit; font-size: 13.5px;
  font-weight: 600; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.vk-moveitem:hover { background: var(--neutral-soft); }

/* Video cards — aoii's exact measurements (web/library.css .lib-grid/.vcard):
   grid minmax(208px,1fr)/gap 16px · card radius 14px + 8px padding · thumb
   16:9 with radius 10px · body padding 9px 6px 3px · title 14px/600.
   NOTE the specificity trap: `.media-item .mph { aspect-ratio: 1 }` (the image
   rule) outranks a bare `.mph-video`, which squashed video thumbs into squares —
   hence `.media-item .mph.mph-video`. */
#asset-list.media-grid:has(.mph-video) { grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 16px; }
.media-item:has(.mph-video) { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 8px; overflow: visible; }
.media-item .mph.mph-video { aspect-ratio: 16 / 9; border-radius: 10px; background: #000; overflow: hidden; }
.media-item .mph.mph-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard-body { padding: 9px 6px 3px; }
.vcard-title { font-size: 14px; font-weight: 600; }
.vcard-date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vk-flash { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 8px); z-index: 90;
  background: var(--btn-bg); color: var(--btn-text); font-size: 13px; font-weight: 600; padding: 9px 16px;
  border-radius: 999px; box-shadow: var(--shadow); opacity: 0; transition: opacity .16s, transform .16s; }
.vk-flash.go { opacity: 1; transform: translate(-50%, 0); }

/* ── six-box code entry ────────────────────────────────────────────────────
   One field plus a Verify button asks for two actions to express one
   intention. These boxes submit on the sixth digit, so the last keystroke IS
   the submit — and there is no button to miss. */
.code-boxes { display: flex; gap: 8px; justify-content: center; margin: 18px 0 0; }
.code-box {
  width: 46px; height: 56px; text-align: center;
  font: 600 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface, #fff);
  color: var(--heading); padding: 0;
}
.code-box:focus { outline: none; border-color: var(--brand, #14171f); box-shadow: 0 0 0 3px rgba(20,23,31,.12); }
.code-box:disabled { opacity: .55; }
@media (max-width: 420px) { .code-box { width: 40px; height: 50px; font-size: 19px; } .code-boxes { gap: 6px; } }

/* ── compliance review: documents as a menu, fields above the page ─────────
   Reviewing means comparing a claimed value against the document proving it.
   Split so the reviewer's eyes travel centimetres, not between browser tabs. */
.cmp-review { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.cmp-review-nav {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface, #fff); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px; position: sticky; top: 16px;
}
.cmp-review-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 8px; text-decoration: none;
  color: var(--text); font-size: 13.5px;
}
.cmp-review-item:hover { background: var(--page); }
.cmp-review-item.on { background: var(--brand, #14171f); color: var(--brand-fg, #fff); }
.cmp-review-item.on .cmp-ai-tick { color: #9be7c4; }
.cmp-ai-tick { font-size: 11px; font-weight: 700; color: var(--ok, #14795a); white-space: nowrap; }
@media (max-width: 860px) {
  .cmp-review { grid-template-columns: 1fr; }
  .cmp-review-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* ═══════════ Vaulk AI — KYC training (team console) ═══════════
   Documents down the left, the one being edited in the middle. Same shape as
   arming an agent, because it is the same idea: teach it, then watch it try. */
.kyc-train{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start}
.kyc-list{display:flex;flex-direction:column;gap:4px;position:sticky;top:12px}
.kyc-list-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:9px;text-decoration:none;color:inherit}
.kyc-list-item:hover{background:var(--surface-2,#f5f5f5)}
.kyc-list-item.on{background:var(--surface-2,#f5f5f5);font-weight:600}
.kyc-list-item small{font-size:11.5px;opacity:.6;font-weight:400}
.kyc-list-add{margin-top:8px;padding:10px 12px;border:1px dashed var(--line,#ddd);border-radius:9px;font-size:13px;opacity:.75;text-decoration:none;color:inherit}
.kyc-editor{display:flex;flex-direction:column;gap:16px;min-width:0}
.kyc-editor .lbl{display:block;font-size:12.5px;opacity:.7;margin:12px 0 4px}
.kyc-editor input[type=text],.kyc-editor input:not([type]),.kyc-editor textarea{width:100%;font-family:inherit;font-size:14px}
.kyc-editor textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.5}
.kyc-result{margin-top:10px;padding:12px;border-radius:10px;border:1px solid var(--line,#e4e4e4);font-size:12px;line-height:1.5;overflow-x:auto;white-space:pre;min-height:0}
@media (max-width:900px){.kyc-train{grid-template-columns:1fr}.kyc-list{position:static}}

/* ── Vaulk AI working overlay ──────────────────────────────────────────────
   Shown while the extraction service reads a merchant's uploaded documents —
   roughly four seconds of otherwise blank waiting after the last upload.

   ★ WHITE, NOT --brand. --brand is the per-STORE accent and is overridden by
   every storefront theme, so keying the ring to it would render this
   invisible for any merchant whose accent happens to be dark. A fixed white
   on the dark scrim is legible for everyone and introduces no new colour.

   The ring is one conic-gradient arc with a radial mask punching out the
   middle — no SVG, no image, no library. prefers-reduced-motion swaps the
   spin for a gentle pulse rather than removing the feedback entirely: a
   merchant still needs to know something is happening. */
.vai-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(9,11,15,.78);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .3s ease}
.vai-overlay.on{opacity:1}
.vai-stack{text-align:center;color:#fff;padding:20px}
.vai-ring{position:relative;width:120px;height:120px;margin:0 auto 26px}
.vai-ring::before,.vai-ring::after{content:'';position:absolute;inset:0;border-radius:50%}
.vai-ring::before{
  background:conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.25) 140deg,#fff 340deg,rgba(255,255,255,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  animation:vai-spin 1.15s linear infinite}
/* a slower counter-rotating inner ring — reads as "working", not "loading" */
.vai-ring::after{inset:22px;
  background:conic-gradient(from 180deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.55) 120deg,rgba(255,255,255,0) 260deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  animation:vai-spin 2.4s linear infinite reverse}
.vai-title{font-size:20px;font-weight:600;letter-spacing:.01em;margin-bottom:6px}
.vai-sub{font-size:14px;opacity:.72}
@keyframes vai-spin{to{transform:rotate(360deg)}}
@keyframes vai-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .vai-ring::before,.vai-ring::after{animation:vai-pulse 1.8s ease-in-out infinite}
}

/* THE PRODUCT PAGE ADDRESS FIELD — the fixed origin sits beside the editable
   part, so a merchant can see the whole URL they are changing rather than a bare
   word with no context (owner, 2026-09-08). */
.slug-row{display:flex;align-items:center;gap:0;max-width:100%}
.slug-row .slug-pre{flex:none;padding:9px 2px 9px 10px;font-size:12.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}
.slug-row input{flex:1;min-width:0}
@media (max-width:560px){.slug-row{flex-direction:column;align-items:stretch;gap:2px}
  .slug-row .slug-pre{max-width:100%;padding:0 0 2px}}

/* ============================================================================
   PLATFORM STYLESHEET — authored by hand. NOT generated. Do not delete.

   This holds the rules for Vaulk's OWN pages — the marketing home page and its
   hero mockup, /start, signup, the affiliate programme, the help guide, and the
   dark-mode corrections for admin form controls. None of it belongs in
   styles.css, which is the TEMPLATE stylesheet a design agent authors.

   scripts/split-css.py builds the served sheet as:

       public/base.css  =  (shared rules extracted from styles.css)  +  THIS FILE

   THIS FILE GOES LAST ON PURPOSE. Twelve of its rules restate a form-control
   rule that also exists in styles.css, because styles.css still carries the old
   light-only values — `background: var(--bg, #fff); color: inherit`, which falls
   back to WHITE in dark mode. The versions here use `var(--surface-2)` and
   `var(--text)`. If this file is moved earlier, the website editor and the form
   builder lose their dark mode and go white-on-white.

   HOW THIS FILE CAME TO EXIST. base.css used to be a committed artifact that
   held both the generated rules and these authored ones. Re-running the splitter
   regenerated it from styles.css alone and silently dropped 147 authored
   selectors — the home page hero mockup rendered as giant unstyled SVGs in
   production for a day. Splitting the authored half out into its own file is
   what makes that failure impossible: the generator no longer owns any file a
   human writes into. scripts/batchcheck.sh check 9 fails the build if these
   rules ever go missing from base.css again.
   ========================================================================== */

/* Wide, vertically-centred signup card (owner, 2026-08-30) */
.signup-center { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 120px); padding: 32px 20px; }
.signup-wide { max-width: 760px; width: 100%; margin: 0; }
.signup-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.signup-col { min-width: 0; }
/* the name field spanned the whole card while everything under it sat in two
   columns. One column wide lines it up with "Website name" directly below
   (owner, 2026-09-03). */
.signup-name { max-width: calc(50% - 16px); }
.signup-submit { margin-top: 20px; }
.signup-submit .btn { max-width: 340px; margin: 0 auto; }
@media (max-width: 640px) {
  .signup-cols { grid-template-columns: 1fr; }
  .signup-name { max-width: 100%; }
  .signup-center { min-height: 0; padding: 24px 16px; align-items: flex-start; }
}
/* background-COLOR, not the background shorthand, on purpose. This file is
   concatenated after the styles.css rules, and styles.css draws the custom
   select chevron with background-image / -repeat / -position. A `background:`
   shorthand here resets all three, and because `appearance: none` survives, every
   plain <select> on the site loses its arrow and reads as a text box. */
input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="search"], input[type="url"], input[type="password"], input[type="date"], textarea, select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--sans);
  background-color: var(--surface-2);
  color: var(--text);
}
/* …and the padding shorthand above resets the gutter the chevron sits in. */
select { padding-right: 34px; }

/* Two-column hero with a flat product/checkout mockup on the right (owner, 2026-08-30).
   Filled bits use --btn-bg/--btn-text so they invert with the theme; --brand does not. */
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; text-align: left; }
.hero-copy h1 { margin: 0 0 20px; max-width: none; }
.hero-copy p.lead { margin: 0 0 30px; max-width: 560px; }
.hero-copy .price-line { text-align: left; margin-top: 22px; }
.hero-art { width: 100%; max-width: 384px; margin-left: auto; display: flex; flex-direction: column; }
.ha-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 40px rgba(0, 0, 0, .07); }
.ha-browser { overflow: hidden; }
.ha-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ha-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.ha-url { margin-left: 8px; flex: 1; display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; }
.ha-url svg { width: 11px; height: 11px; flex: none; }
.ha-shop { padding: 16px; }
.ha-shop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ha-avatar { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2); color: var(--heading); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.ha-shop-name { font-size: 13px; font-weight: 600; color: var(--heading); flex: 1; }
.ha-cart { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.ha-item { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px; }
.ha-thumb { width: 42px; height: 42px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); flex: none; }
.ha-item-main { flex: 1; min-width: 0; }
.ha-item-title { font-size: 13px; font-weight: 600; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-item-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ha-price { font-size: 13px; font-weight: 700; color: var(--heading); flex: none; }
/* Pure black + white, always — in dark mode this recedes below the card so it
   never out-shines the hero's "Get started" beacon (owner, 2026-08-30). */
.ha-paybtn { background: #000; color: #fff; text-align: center; font-size: 14px; font-weight: 600; padding: 11px; border-radius: 10px; }
.ha-paynote { text-align: center; font-size: 11px; color: var(--muted); margin-top: 9px; }
.ha-link { display: grid; place-items: center; height: 34px; color: var(--muted); }
.ha-link svg { width: 20px; height: 20px; }
.ha-paid { padding: 16px; }
.ha-paid-top { display: flex; align-items: center; gap: 12px; }
.ha-check { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--heading); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; flex: none; }
.ha-check svg { width: 17px; height: 17px; }
.ha-eyebrow { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ha-amount { font-size: 22px; font-weight: 700; color: var(--heading); letter-spacing: -0.01em; margin-top: 3px; }
.ha-hr { height: 1px; background: var(--line); margin: 14px 0; }
.ha-paid-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); }
.ha-settled { color: var(--heading); font-weight: 600; white-space: nowrap; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-copy h1, .hero-copy p.lead { margin-left: auto; margin-right: auto; }
  .hero-copy p.lead { max-width: 600px; }
  .hero-copy .price-line { text-align: center; }
  .hero-art { margin: 0 auto; }
}

/* "Get started" explainer page: two clean cards, store vs website (owner, 2026-08-30) */
.start-page { max-width: 920px; margin: 0 auto; padding: 64px 20px 48px; text-align: center; }
.start-page h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 10px; color: var(--heading); }
.start-page .start-sub { color: var(--muted); font-size: 16px; margin: 0 0 40px; }
.start-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; }
.start-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 30px; display: flex; flex-direction: column; }
.start-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--heading); margin-bottom: 18px; }
.start-ico svg { width: 23px; height: 23px; }
.start-card h2 { font-size: 21px; margin: 0 0 8px; color: var(--heading); }
.start-card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 24px; flex: 1; }
.start-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.start-actions .btn { align-self: stretch; text-align: center; font-size: 15px; padding: 12px 22px; }
.start-see { font-size: 13.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.start-see:hover { color: var(--heading); }
.start-custom { margin: 36px auto 0; color: var(--muted); font-size: 14px; text-align: center; max-width: 540px; line-height: 1.55; }
@media (max-width: 720px) { .start-choose { grid-template-columns: 1fr; } }
/* Pure-black top bar in the dark theme (owner, 2026-08-30). The feature cards
   were reverted to the default --surface — the owner preferred them as they were. */
html[data-theme="dark"] .plat-header { background: #000; }
/* Collapsed rail: icons only. Hover re-opens (wired in SIDE_WIRE); desktop only —
   the mobile top-bar layout keeps its own behaviour. */
@media (min-width: 761px) {
  html[data-side='min'] .admin-side { width: 62px; }
  html[data-side='min'] .side-label,
  html[data-side='min'] .admin-side .wordmark,
  html[data-side='min'] .side-user-mail { opacity: 0; }
  html[data-side='min'] .side-theme { display: none; }
  /* Hide the design submenu entirely when the rail is collapsed — truncated
     "My t… / Web…" text reads as broken (owner, 2026-08-30). More specific than
     `.admin-side nav .side-subs { display:flex }` so it actually wins. */
  html[data-side='min'] .admin-side nav .side-subs { display: none; }
}
a.bell-item-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
a.bell-item-link:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.wse-set-field input, .wse-page-kind { padding: 8px 10px; border: 1px solid var(--border, #e2e4e8);
  border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; }
.fb-builder input[type="text"], .fb-builder select { padding: 8px 10px; border: 1px solid var(--border, #e2e4e8);
  border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; }
.wse-form input[type="text"], .wse-form textarea, .wse-form select,
.wse-pagemeta input, .wse-addpage input { width: 100%; padding: 8px 10px; border: 1px solid var(--border, #e2e4e8);
  border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; }
.wse-addsection select { padding: 8px 10px; border: 1px solid var(--border, #e2e4e8); border-radius: 8px; background: var(--surface-2); color: var(--text); }
/* the document (big, left) beside its editable fields (right) — one glance, one edit */
.cmp-work { display: grid; grid-template-columns: 1fr 340px; gap: 14px; align-items: start; }
.cmp-work .cmp-doc { min-width: 0; }
.cmp-work .cmp-fields-card { position: sticky; top: 16px; }
@media (max-width: 1000px) { .cmp-work { grid-template-columns: 1fr; } .cmp-work .cmp-fields-card { position: static; } }

/* ── merchant help centre ──────────────────────────────────────────────
   Left menu with expanding categories (owner, 2026-09-02) — chosen over a
   grid of cards because scanning a list and opening one title is faster
   than reading four tiles. <details> gives the accordion natively, so it
   works with no JS and stays keyboard-accessible. */
.help-wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:38px;max-width:1080px;margin:0 auto;padding:28px 20px 72px;align-items:start}
.help-nav{position:sticky;top:18px;border-right:1px solid var(--line);padding-right:18px}
.help-home{display:block;font-weight:600;text-decoration:none;color:var(--text);margin:0 0 14px}
.help-cat{border-bottom:1px solid var(--line)}
.help-cat>summary{cursor:pointer;list-style:none;padding:10px 0;font-size:13.5px;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:8px}
.help-cat>summary::-webkit-details-marker{display:none}
.help-cat>summary::after{content:'+';color:var(--muted);font-size:15px;line-height:1}
.help-cat[open]>summary::after{content:'\2212'}
.help-cat>summary:hover{color:var(--brand)}
.help-count{display:none}
.help-cat ul{list-style:none;margin:0 0 10px;padding:0}
.help-cat ul li{margin:0}
.help-cat ul a{display:block;padding:6px 0 6px 10px;font-size:13px;color:var(--muted);text-decoration:none;border-left:2px solid transparent}
.help-cat ul a:hover{color:var(--text)}
.help-cat ul a.on{color:var(--text);border-left-color:var(--brand);font-weight:500}
.help-contact{margin-top:20px}
.help-body{min-width:0}
.help-crumb{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.help-crumb a{color:var(--muted)}
.help-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:22px}
.help-card{border:1px solid var(--line);border-radius:10px;padding:16px}
.help-card-list{list-style:none;margin:0;padding:0}
.help-card-list li{margin:0 0 5px}
.help-card-list a{font-size:13px;text-decoration:none}
.help-card-list a:hover{text-decoration:underline}
.help-list{list-style:none;margin:18px 0 0;padding:0}
.help-list li{border-top:1px solid var(--line)}
.help-list a{display:flex;flex-direction:column;gap:3px;padding:13px 0;text-decoration:none;color:var(--text)}
.help-list a:hover strong{color:var(--brand)}
.help-article{max-width:64ch;line-height:1.65}
.help-article h3{margin:26px 0 8px;font-size:15px}
.help-article p{margin:0 0 14px}
.help-article ul{margin:0 0 16px;padding-left:20px}
.help-article li{margin:0 0 7px}
.help-article code{background:var(--surface-2);padding:1px 5px;border-radius:4px;font-size:.92em}
.help-note{background:var(--surface-2);border-left:3px solid var(--brand);padding:11px 14px;margin:0 0 16px;font-size:13.5px;border-radius:0 6px 6px 0}
.help-next{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
@media (max-width:820px){
  .help-wrap{grid-template-columns:1fr;gap:20px}
  .help-nav{position:static;border-right:0;border-bottom:1px solid var(--line);padding:0 0 14px}
}

/* ── affiliate area (owner, 2026-09-02) ────────────────────────────────
   Deliberately small: an affiliate needs five numbers, a link and a list.
   No merchant chrome, because none of it applies to them. */
.aff-wrap{max-width:900px;margin:0 auto;padding:32px 20px 72px}
.aff-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.aff-head h1{margin:0;font-size:22px}
.aff-code-pill{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--surface-2);padding:5px 10px;border-radius:20px;color:var(--muted)}
.aff-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}
.aff-stat{border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:3px}
.aff-stat-k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.aff-stat-v{font-size:22px;font-weight:600}
.aff-link input{font-family:ui-monospace,Menlo,monospace;font-size:13px}
.aff-table{width:100%;border-collapse:collapse;margin-top:10px}
.aff-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line)}
.aff-table td{padding:11px 10px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.aff-pitch{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:26px 0 30px}
.aff-pitch>div{border:1px solid var(--line);border-radius:10px;padding:16px}
.aff-pitch-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;margin-bottom:8px}
.aff-pitch p{margin:6px 0 0}
.aff-tier{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:10px;padding:14px 16px;margin-bottom:14px}
.aff-tier-rate{font-size:26px;font-weight:600;line-height:1.1}
.aff-tier p{flex:1;min-width:220px}

/* ── affiliate programme page ──────────────────────────────────────────
   Full .container width (1080px), matching the header's own edges — the
   first version used .narrow (480px) and crushed three tiles into a
   column (owner, 2026-09-03). This page recruits affiliates in person,
   so the numbers get real tables, not prose. */
.aff-page{padding:46px 20px 80px}
.aff-page section{margin:0 0 52px}
.aff-page h2{font-size:20px;margin:0 0 8px}
.aff-hero h1{font-size:36px;line-height:1.12;letter-spacing:-.02em;margin:0 0 14px}
.aff-hero .lead{font-size:16.5px;line-height:1.6;color:var(--muted);margin:0 0 22px}
.aff-hero-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.aff-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.aff-steps>div{border:1px solid var(--line);border-radius:12px;padding:18px}
.aff-steps p{margin:6px 0 0}
.aff-table-wrap{overflow-x:auto;margin:16px 0 14px}
.aff-earn{width:100%;border-collapse:collapse;min-width:560px}
.aff-earn th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.aff-earn th,.aff-earn td{text-align:left}
.aff-th-sub{display:block;font-size:15px;letter-spacing:0;text-transform:none;color:var(--text);font-weight:700;margin-top:3px}
.aff-earn td{padding:13px 14px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
.aff-earn tbody tr:hover{background:var(--surface-2)}
.aff-amount{font-variant-numeric:tabular-nums;font-weight:600}
.muted-col{color:var(--muted);font-variant-numeric:tabular-nums}
.block{display:block}
.aff-zero-row td{opacity:.62}
.aff-tiers td{vertical-align:middle}
.aff-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:14px}
.aff-rules>div{border-left:2px solid var(--line);padding:2px 0 2px 14px}
.aff-rules p{margin:4px 0 0}
.aff-final{border:1px solid var(--line);border-radius:14px;padding:28px;text-align:center}
@media (max-width:760px){
  .aff-steps{grid-template-columns:1fr}
  .aff-hero h1{font-size:28px}
}
.aff-th-range{font-size:11px;letter-spacing:.02em;text-transform:none;color:var(--muted);font-weight:500;white-space:nowrap}