/* StyleCart demo. System fonts only; no external requests. */
:root {
  color-scheme: light;
  --bg: #fbf8f4;
  --surface: #ffffff;
  --sunk: #f4efe8;
  --ink: #1d1a17;
  --ink-2: #4f4943;
  --muted: #6b645c;
  --line: #e8e1d7;
  --line-2: #d6ccbf;
  --ok: #1a7343;
  --ok-bg: #e7f4ec;
  --warn: #8f5203;
  --warn-bg: #fdf1dc;
  --bad: #b42318;
  --bad-bg: #fdecea;
  --info: #1f4f8a;
  --info-bg: #e8f0fb;
  --accent: #8a3324;
  --on-accent: #ffffff;
  --accent-ink: #8a3324;
  --accent-soft: #f6ebe9;
  --accent-tint: #ead2cd;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Charter, 'Bitstream Charter', Georgia, serif;
  --r: 14px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(40, 28, 16, .06), 0 10px 28px -16px rgba(40, 28, 16, .28);
  --shadow-lg: 0 24px 60px -20px rgba(30, 20, 10, .35);
  --bar-h: 46px;
  --gut: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body { margin: 0; font: 15px/1.5 var(--font); color: var(--ink); background: var(--bg); overflow-x: hidden; }
body.locked { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0 0 .6em; }
code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .92em; background: var(--sunk); padding: 1px 6px; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; border-radius: 6px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; line-height: 1.45; }
.block { display: block; }
.center { text-align: center; }
.strong { font-weight: 650; }
.nowrap { white-space: nowrap; }
.save { color: var(--ok); font-weight: 600; }
.bad { color: var(--bad); }
.only-m { display: none !important; }
@media (max-width: 860px) { .only-d { display: none !important; } .only-m { display: inline-flex !important; } }

/* ---------- Demo bar ---------- */
.demobar { position: sticky; top: 0; z-index: 120; height: var(--bar-h); display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #15130f; color: #f3efe8; font-size: 13px; }
.demo-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: #fbd36b; color: #2b1d00; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.demo-dot { width: 7px; height: 7px; border-radius: 50%; background: #2b1d00; }
.demo-name { color: #f3efe8; text-decoration: none; font-weight: 650; white-space: nowrap; }
.demo-name span { color: #b8b0a3; font-weight: 500; }
.demo-name:hover { text-decoration: underline; }
.demo-switch { display: inline-flex; margin-left: auto; padding: 3px; border-radius: 999px; background: #2b2721; }
.demo-switch a { padding: 5px 14px; border-radius: 999px; color: #d7d0c4; text-decoration: none; font-weight: 600; }
.demo-switch a[aria-current="true"] { background: #f3efe8; color: #15130f; }
.demo-tools { display: inline-flex; gap: 4px; }
.db-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid #3a352d; background: transparent; color: #f3efe8; border-radius: 9px; font-size: 13px; font-weight: 600; }
.db-btn:hover { background: #2b2721; }
.db-btn .ic { width: 17px; height: 17px; }
.db-btn.icon { padding: 0 7px; }
@media (max-width: 860px) {
  .demobar { gap: 5px; padding: 0 6px; }
  .demo-name { display: none; }
  .demo-switch { margin-left: auto; }
  .demo-switch a { padding: 5px 9px; }
  .demo-tools { gap: 2px; }
  .db-btn span { display: none; }
  .db-btn { padding: 0 6px; height: 32px; }
  .demo-pill { padding: 5px 8px; font-size: 11.5px; gap: 6px; }
}
@media (max-width: 360px) { .demo-pill { font-size: 11px; } #db-brand { display: none; } }

/* ---------- Buttons & inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 650; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .05s; }
.btn:hover { border-color: var(--ink-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent-ink); }
.btn.ghost:hover { background: var(--accent-soft); }
.btn.danger { color: var(--bad); border-color: #f0c4bf; background: #fff; }
.btn.lg { min-height: 50px; padding: 0 22px; font-size: 16px; border-radius: 13px; }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.btn.block { display: flex; width: 100%; }
.btn.grow { flex: 1; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; background: transparent; border-radius: 11px; color: var(--ink); text-decoration: none; }
.icon-btn:hover { background: var(--sunk); }
.count { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.count-inline { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; line-height: 20px; }
.linkish { border: 0; background: none; padding: 0; color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 5px; text-align: left; }
.linkish:disabled { opacity: .5; }
.linkish .ic { width: 16px; height: 16px; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 450; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--accent-tint); border-color: var(--accent-ink); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex: none; }
input[type=color] { width: 42px; height: 42px; padding: 2px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; }
fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.frow { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 12px; }
.frow.end { align-items: end; }
form > label, .panel > label, .dlg-body > label, .pe label { margin-bottom: 12px; }
.chk { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; }
.chk .dot { width: 14px; height: 14px; }
.row-gap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row-gap.wrap { flex-wrap: wrap; }
.field-err { color: var(--bad); font-size: 13px; font-weight: 600; margin: 6px 0 0; }
.sim-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--info-bg); color: var(--info); font-size: 13px; margin: 12px 0 0; }
.sim-note .ic { width: 18px; height: 18px; margin-top: 1px; }
.tabs + .sim-note { margin: 0 0 16px; }
.sim-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--info-bg); color: var(--info); font-size: 11px; font-weight: 700; }
.pill-opt { display: inline-flex; cursor: pointer; }
.pill-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pill-opt span { padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; }
.pill-opt input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill-opt input:focus-visible + span { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.seg-row { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--sunk); margin-bottom: 14px; }
.seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; font-weight: 600; color: var(--ink-2); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.switch { display: flex; width: fit-content; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; margin: 4px 0 10px; grid-auto-flow: column; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span { position: relative; width: 40px; height: 24px; border-radius: 999px; background: #c9c0b4; transition: background .15s; flex: none; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.table-wrap { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.panel, .co-card, .summary, .dlg-body, .filters { position: relative; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl thead th { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: #faf8f5; white-space: nowrap; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr.dim td { opacity: .6; }
.tbl a { font-weight: 600; text-decoration: none; }
.tbl a:hover { text-decoration: underline; }

/* status pills */
.status, .pay, .seg-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--sunk); color: var(--ink-2); }
.st-placed { background: var(--warn-bg); color: var(--warn); }
.st-packed { background: #efe9fb; color: #5b3aa5; }
.st-shipped, .st-out { background: var(--info-bg); color: var(--info); }
.st-delivered { background: var(--ok-bg); color: var(--ok); }
.st-cancelled { background: var(--bad-bg); color: var(--bad); }
.st-return_requested, .st-returned { background: #fbeef6; color: #9b2c6c; }
.pay-paid, .pay-collected { background: var(--ok-bg); color: var(--ok); }
.pay-pending { background: var(--warn-bg); color: var(--warn); }
.pay-refunded, .pay-void { background: var(--sunk); color: var(--ink-2); }
.seg-repeat { background: var(--ok-bg); color: var(--ok); }
.seg-lapsed { background: var(--warn-bg); color: var(--warn); }
.seg-new { background: var(--info-bg); color: var(--info); }
.tag-new { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: 11px; font-weight: 700; }
.code-tag { display: inline-block; padding: 3px 9px; border: 1.5px dashed var(--accent-ink); border-radius: 8px; color: var(--accent-ink); font: 700 13px/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .03em; background: var(--accent-soft); }

/* ---------- Toast & dialogs ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 400; transform: translate(-50%, 140%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(calc(100vw - 32px), 520px); padding: 12px 16px; border-radius: 13px; background: #1d1a17; color: #fff; font-size: 14px; font-weight: 550; box-shadow: var(--shadow-lg); transition: transform .25s ease, opacity .2s; pointer-events: none; opacity: 0; visibility: hidden; }
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
/* Taps go through the toast to whatever is under it; only its link (View bag) takes them. */
.toast.show a { pointer-events: auto; }
/* While a dialog or sheet is open, show the toast near the top so it never sits over the sheet's buttons. */
body.locked .toast { bottom: auto; top: 58px; transform: translate(-50%, -180%); }
body.locked .toast.show { transform: translate(-50%, 0); }
.toast a { color: #ffd88a; }
.toast .ic { color: #8ee0a8; }
.toast.sim .ic { color: #9cc4ff; }
#dialog-host { position: fixed; inset: 0; z-index: 300; }
.scrim { position: absolute; inset: 0; background: rgba(20, 14, 8, .48); animation: fade .15s ease; }
.dlg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow: auto; background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg); animation: pop .18s ease; outline: none; }
.dlg.wide { width: min(860px, calc(100vw - 24px)); }
.dlg.sheet { width: min(480px, calc(100vw - 24px)); }
.dlg.drawer { left: 0; top: 0; bottom: 0; transform: none; width: min(340px, 86vw); max-height: none; border-radius: 0 18px 18px 0; animation: slide .2s ease; }
.dlg-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.dlg-title { font-size: 19px; font-family: var(--font-display); }
.dlg-sub { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.dlg-body { padding: 16px 18px; }
.dlg-foot { position: sticky; bottom: 0; display: flex; gap: 10px; justify-content: flex-end; padding: 12px 18px; background: #fff; border-top: 1px solid var(--line); }
.dlg-body .dlg-foot { margin: 16px -18px -16px; }
.menu-list a { display: flex; align-items: center; gap: 10px; padding: 12px 4px; color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--line); }
.about ul { padding-left: 18px; }
.about li { margin-bottom: 8px; }
@media (max-width: 640px) {
  .dlg.sheet, .dlg.modal, .dlg.gateway { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0; animation: up .22s ease; }
}
@media (max-width: 860px) { .toast { bottom: 76px; } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -46%); } }
@keyframes slide { from { transform: translateX(-100%); } }
@keyframes up { from { transform: translateY(40%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Brand bits ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.logo-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--accent); color: var(--on-accent); font: 700 17px/1 var(--font-display); letter-spacing: -.02em; flex: none; }
.logo-mark.sm { width: 28px; height: 28px; font-size: 14px; border-radius: 8px; }
.brand-name { font: 700 21px/1 var(--font-display); letter-spacing: -.01em; }
.display, .h1, .h2 { font-family: var(--font-display); letter-spacing: -.015em; }
.h1 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; }
.h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; }
.h3 { font-size: 18px; font-weight: 700; }
.h4 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 8px; }
.font-serif { font-family: 'Iowan Old Style', 'Palatino Linotype', Charter, 'Bitstream Charter', Georgia, serif; }
.font-sans { font-family: var(--font); }
.font-rounded { font-family: ui-rounded, 'Arial Rounded MT Bold', var(--font); }

/* ---------- Store ---------- */
.store { min-height: calc(100vh - var(--bar-h)); display: flex; flex-direction: column; }
.store-main { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gut) 40px; outline: none; }
.announce { background: var(--accent); color: var(--on-accent); text-align: center; font-size: 13px; font-weight: 600; padding: 8px 12px; }
.shead { position: sticky; top: var(--bar-h); z-index: 50; background: rgba(251, 248, 244, .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.shead-in { max-width: 1280px; margin: 0 auto; height: 66px; display: flex; align-items: center; gap: 22px; padding: 0 var(--gut); }
.snav { display: flex; gap: 22px; }
.snav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; padding: 6px 0; border-bottom: 2px solid transparent; }
.snav a:hover, .snav a[aria-current="page"] { border-color: var(--accent); }
.search { position: relative; display: flex; align-items: center; flex: 1; max-width: 360px; margin-left: auto; }
.search .ic { position: absolute; left: 12px; color: var(--muted); pointer-events: none; width: 18px; height: 18px; }
.search input { padding-left: 38px !important; border-radius: 999px !important; background: #fff; }
.search.sm { max-width: 300px; }
.shead-icons { display: flex; align-items: center; gap: 2px; }
.search + .shead-icons { margin-left: 0; }
@media (max-width: 860px) {
  .shead-in { height: 58px; gap: 4px; padding: 0 8px; }
  .shead .brand { margin-right: auto; }
  .brand-name { font-size: 19px; }
  .logo-mark { width: 32px; height: 32px; font-size: 15px; }
}
.crumbs { padding: 16px 0 6px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding: 40px 0 28px; }
.hero .display { font-size: clamp(34px, 5vw, 60px); line-height: 1.04; font-weight: 700; margin-bottom: 14px; }
.lede { font-size: 18px; color: var(--ink-2); max-width: 30em; margin-bottom: 22px; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-art { position: relative; height: 470px; display: block; }
.hero-card { position: absolute; width: 62%; aspect-ratio: 4/5; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-card .gimg { width: 100%; height: 100%; }
.hero-card.front { right: 4%; top: 4%; }
.hero-card.back { left: 2%; bottom: 0; width: 50%; transform: rotate(-5deg); opacity: .96; }
.hero-tag { position: absolute; right: 8%; bottom: 10px; background: #fff; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--ink); box-shadow: var(--shadow); }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 18px; padding: 22px 0 10px; }
  .hero-art { height: 330px; order: -1; }
  .hero-card.front { width: 58%; right: 6%; }
  .hero-card.back { width: 46%; left: 4%; }
  .lede { font-size: 16px; }
}
.offer-strip { margin: 12px 0 8px; padding: 14px 18px; border-radius: var(--r); background: var(--accent-soft); border: 1px solid var(--accent-tint); }
.offer-strip > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; justify-content: center; text-align: center; font-size: 15px; }
.code-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1.5px dashed var(--accent-ink); border-radius: 9px; background: #fff; color: var(--accent-ink); font: 700 14px/1 ui-monospace, Menlo, Consolas, monospace; }
.code-chip .ic { width: 15px; height: 15px; }
.code-chip.sm { padding: 3px 7px; font-size: 13px; }
.band { padding: 26px 0 8px; }
.band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.more { display: inline-flex; align-items: center; gap: 2px; font-weight: 650; text-decoration: none; font-size: 14px; }
.more .ic { width: 16px; height: 16px; }
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.tile { display: grid; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 650; font-size: 14px; text-align: center; }
.tile-img { border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; transition: transform .2s; }
.tile:hover .tile-img { transform: translateY(-3px); }
.tile-img .gimg { width: 100%; height: 100%; }
@media (max-width: 860px) { .tiles { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px; }
.plp .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid, .grid.four { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid, .grid.four, .plp .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; } }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
@media (max-width: 860px) { .rail { grid-auto-columns: 46%; gap: 10px; } }
.pcard { position: relative; min-width: 0; }
.pcard-link { display: block; color: var(--ink); text-decoration: none; }
.pimg { border-radius: var(--r); overflow: hidden; aspect-ratio: 4/5; background: var(--sunk); transition: box-shadow .2s; }
.pimg .gimg { width: 100%; height: 100%; transition: transform .35s ease; }
.pcard-link:hover .pimg .gimg { transform: scale(1.035); }
.pcard-link:hover .pname { text-decoration: underline; }
.pinfo { padding: 10px 2px 0; }
.pname { font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; }
.price .now { font-weight: 750; }
.price .mrp { color: var(--muted); font-size: 13px; }
.price .off { color: var(--ok); font-weight: 700; font-size: 13px; }
.price.big { font-size: 24px; gap: 4px 12px; }
.price.big .mrp, .price.big .off { font-size: 16px; }
.swatch-row { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.dot { width: 13px; height: 13px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); display: inline-block; flex: none; }
.few { margin-left: 4px; font-size: 12px; font-weight: 650; color: var(--warn); }
.badge { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.badge.light { background: #fff; color: var(--ink); }
.badge.dark { background: #1d1a17; color: #fff; }
.wish { position: absolute; top: 8px; right: 8px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.wish .ic { width: 19px; height: 19px; }
.wish.on { color: #c2283f; }
.wish.big { top: 14px; right: 14px; width: 44px; height: 44px; }
.pcard.gone .pimg { opacity: .55; }
.promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 26px 0 6px; }
.promise-item { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.promise-item .ic { width: 26px; height: 26px; color: var(--accent-ink); }
.promise-item strong { display: block; font-size: 14px; }
.promise-item span { display: block; font-size: 13px; color: var(--muted); }
@media (max-width: 860px) { .promise { grid-template-columns: 1fr 1fr; gap: 8px; } .promise-item { padding: 12px; gap: 9px; } }
.story { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: center; margin: 34px 0 10px; padding: 26px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.story-art { border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; max-width: 300px; }
.story-art .gimg { width: 100%; height: 100%; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; padding: 18px; gap: 16px; } .story-art { max-width: 220px; } }

/* footer */
.sfoot { background: #1d1a17; color: #e8e2d8; margin-top: 30px; }
.sfoot-in { max-width: 1280px; margin: 0 auto; padding: 36px var(--gut) 20px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 26px; }
.sfoot .brand, .sfoot a.brand { display: inline-flex; color: #fff; padding: 0; margin-bottom: 10px; }
.sfoot p { color: #c9c1b4; font-size: 14px; }
.sfoot .muted { color: #a9a196; }
.fh { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: 10px; font-family: var(--font); }
.sfoot a, .sfoot .linkish { display: block; color: #e8e2d8; text-decoration: none; padding: 4px 0; font-weight: 500; font-size: 14px; }
.sfoot a:hover, .sfoot .linkish:hover { text-decoration: underline; }
.sfoot-base { max-width: 1280px; margin: 0 auto; padding: 14px var(--gut) 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid #3a342c; font-size: 13px; color: #a9a196; }
@media (max-width: 860px) { .sfoot-in { grid-template-columns: 1fr 1fr; } .sfoot-brand { grid-column: 1 / -1; } }

/* PLP */
.plp-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 12px; }
.sort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sort select { width: auto; min-height: 38px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.chip .ic { width: 14px; height: 14px; }
.plp-body { display: grid; grid-template-columns: 236px 1fr; gap: 28px; }
@media (max-width: 860px) { .plp-body { grid-template-columns: 1fr; } }
.filters fieldset { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.filters legend { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--ink-2); }
.size-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.size-opt { display: inline-flex; cursor: pointer; }
.size-opt input { position: absolute; opacity: 0; pointer-events: none; }
.size-opt span { min-width: 44px; padding: 7px 8px; text-align: center; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; font-size: 13px; font-weight: 650; color: var(--ink); }
.size-opt input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.size-opt input:focus-visible + span { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.plp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid !important; grid-template-columns: 1fr 1fr; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px -10px rgba(0,0,0,.2); }
@media (min-width: 861px) { .plp-bar { display: none !important; } }
.plp-bar button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; border: 0; background: #fff; font-weight: 700; font-size: 15px; color: var(--ink); }
.plp-bar button + button { border-left: 1px solid var(--line); }
@media (max-width: 860px) { .plp { padding-bottom: 50px; } }
.empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 50px 16px; color: var(--ink-2); }
.empty > .ic { width: 42px; height: 42px; color: var(--muted); }
.empty.page { padding: 80px 16px; }
.empty.small { padding: 24px; }
.radio-list .chk { border-bottom: 1px solid var(--line); padding: 12px 0; }

/* PDP */
.preview-bar { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--warn-bg); color: var(--warn); font-weight: 600; font-size: 14px; }
.pdp-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; padding-top: 6px; }
@media (max-width: 860px) { .pdp-grid { grid-template-columns: 1fr; gap: 18px; } .pdp { padding-bottom: 70px; } }
.gallery { position: sticky; top: calc(var(--bar-h) + 80px); align-self: start; }
@media (max-width: 860px) { .gallery { position: static; } }
.gal-main { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4/5; background: var(--sunk); }
.gal-main .gimg { width: 100%; height: 100%; }
.gal-thumbs { display: flex; gap: 10px; margin: 12px 0 8px; }
.thumb { width: 84px; padding: 0; border: 2px solid transparent; border-radius: 12px; background: none; overflow: hidden; display: grid; gap: 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.thumb .gimg { aspect-ratio: 4/5; width: 100%; height: auto; border-radius: 10px; }
.thumb span { padding: 4px 0 2px; }
.thumb.on { border-color: var(--ink); }
.pdp-title { margin-bottom: 10px; font-size: clamp(24px, 3vw, 32px); }
.best { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 0 6px; padding: 12px 14px; border-radius: 12px; background: var(--ok-bg); color: #145a35; font-size: 14px; }
.best-k strong { font-size: 18px; }
.offers { list-style: none; padding: 0; margin: 8px 0 4px; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.offers li { display: flex; gap: 8px; align-items: center; }
.offers .ic { width: 16px; height: 16px; color: var(--accent-ink); }
.opt-group { margin: 20px 0 6px; }
.opt-group legend { font-size: 14px; font-weight: 600; color: var(--ink-2); width: 100%; }
.size-legend { display: flex !important; justify-content: space-between; align-items: center; }
.colour-row { display: flex; flex-wrap: wrap; gap: 10px; }
.colour-opt { display: grid; gap: 4px; width: 70px; text-decoration: none; color: var(--ink-2); font-size: 12px; font-weight: 600; text-align: center; }
.sw-img { display: block; border-radius: 12px; overflow: hidden; border: 2px solid transparent; aspect-ratio: 4/5; }
.sw-img .gimg { width: 100%; height: 100%; }
.colour-opt.on .sw-img { border-color: var(--ink); }
.colour-opt.on { color: var(--ink); }
.size-row { display: flex; flex-wrap: wrap; gap: 8px; }
.size-btn { position: relative; display: inline-flex; cursor: pointer; font-weight: 650; }
.size-btn input { position: absolute; opacity: 0; pointer-events: none; }
.size-btn span { min-width: 54px; height: 48px; display: grid; place-items: center; padding: 0 10px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; font-size: 15px; color: var(--ink); }
.size-btn input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.size-btn input:focus-visible + span { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.size-btn.out span { color: #7d756b; background: repeating-linear-gradient(135deg, #fff 0 6px, #f4efe8 6px 7px); text-decoration: line-through; cursor: not-allowed; }
.size-btn em { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 0 5px; border-radius: 6px; background: var(--warn-bg); color: var(--warn); font-size: 10px; font-style: normal; font-weight: 750; white-space: nowrap; }
.low { color: var(--warn); font-weight: 650; font-size: 13px; margin-top: 14px; }
.buy-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 18px; }
.delivery { padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-bottom: 16px; }
.pin-form { display: flex; gap: 8px; margin-bottom: 8px; max-width: 360px; }
.pin-res { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; font-size: 14px; }
.pin-res li { display: flex; gap: 8px; align-items: center; }
.pin-res .ic { width: 17px; height: 17px; }
.acc details { border-top: 1px solid var(--line); }
.acc details:last-child { border-bottom: 1px solid var(--line); }
.acc summary { padding: 14px 2px; font-weight: 650; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font-size: 20px; line-height: 1; color: var(--muted); }
.acc details[open] summary::after { content: '−'; }
.acc details p, .acc details ul { color: var(--ink-2); font-size: 14px; margin: 0 0 14px; }
.sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(0,0,0,.25); }
@media (min-width: 861px) { .sticky-buy { display: none !important; } }
.sticky-buy .btn { flex: 1; max-width: 220px; }
.table-wrap .tbl th[scope=row] { font-weight: 700; }
.measure { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; margin: 14px 0; font-size: 14px; }
.measure ul { padding-left: 18px; margin: 0; color: var(--ink-2); }

/* Bag & checkout */
.bag, .checkout, .order-view, .track-page, .account { padding-top: 18px; }
.bag-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; margin-top: 14px; align-items: start; }
@media (max-width: 960px) { .bag-grid { grid-template-columns: 1fr; } }
.bag-side { display: grid; gap: 14px; position: sticky; top: calc(var(--bar-h) + 80px); }
@media (max-width: 960px) { .bag-side { position: static; } }
.ship-bar { padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); margin-bottom: 14px; font-size: 14px; }
.ship-bar p { display: flex; gap: 6px; align-items: center; }
.ship-bar .ic { width: 18px; height: 18px; color: var(--ok); }
.meter { height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 99px; background: var(--ok); transition: width .3s; }
.lines { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.line { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.line.issue { border-color: #f0c4bf; }
.lines.compact .line { grid-template-columns: 64px 1fr auto; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.line-img { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4/5; }
.line-img .gimg { width: 100%; height: 100%; }
.line-name { color: var(--ink); font-weight: 650; text-decoration: none; }
.line-name:hover { text-decoration: underline; }
.line-info p { margin: 2px 0 8px; }
.line-opts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.line-opts label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.line-opts select { width: auto; min-height: 34px; padding: 4px 8px; }
.line-actions { display: flex; gap: 16px; margin-top: 10px; }
.line-price { text-align: right; display: grid; align-content: start; gap: 2px; }
.line-price s { color: var(--muted); font-size: 13px; }
@media (max-width: 520px) { .line { grid-template-columns: 82px 1fr; } .line-price { grid-column: 2; text-align: left; display: flex; gap: 8px; } }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; }
.stepper button { width: 34px; height: 34px; border: 0; background: none; display: grid; place-items: center; color: var(--ink); }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper button .ic { width: 16px; height: 16px; }
.stepper span { min-width: 30px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper .restock { width: auto; padding: 0 9px; border-left: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--accent-ink); }
.summary { padding: 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.summary dl, .mini-sum, .inv-totals dl { margin: 0 0 10px; display: grid; gap: 8px; }
.summary dl > div, .mini-sum > div, .inv-totals dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.summary dt, .mini-sum dt { color: var(--ink-2); }
.summary dd, .mini-sum dd, .inv-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.summary .total, .mini-sum .total, .inv-totals .total { padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: 17px; font-weight: 750; }
.summary .total dt { color: var(--ink); }
.summary p .ic, .co-card p .ic { display: inline-block; vertical-align: -4px; width: 17px; height: 17px; margin-right: 3px; }
.saved { color: var(--ok); font-weight: 650; font-size: 14px; }
.summary .btn.block { margin-top: 12px; }
.coupon-box { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px dashed var(--accent-ink); text-align: left; color: var(--ink); }
.coupon-box > div { flex: 1; display: grid; }
.coupon-box span { font-size: 13px; color: var(--ink-2); }
.coupon-box.ok { border-style: solid; border-color: #9fd3b3; background: var(--ok-bg); }
.coupon-box.bad { border-style: solid; border-color: #f0c4bf; background: var(--bad-bg); }
.coupon-box .ic { color: var(--accent-ink); }
.coupon-form { display: flex; gap: 8px; margin-bottom: 8px; }
.coupon-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.coupon-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.coupon-list li p { margin: 6px 0 0; font-size: 13px; }
.coupon-list li.dim { background: #faf8f5; }
.coupon-list .why { color: var(--muted); }
.trust { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 13px; color: var(--ink-2); }
.trust li { display: flex; gap: 8px; align-items: center; }
.trust .ic { width: 17px; height: 17px; color: var(--ok); }
.co-steps { display: grid; gap: 14px; }
.co-card { padding: 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.co-card.locked-step { opacity: .55; }
.co-card p .ic { width: 17px; height: 17px; display: inline; vertical-align: -3px; }
.stepn { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; }
.radio-cards { display: grid; gap: 10px; margin-bottom: 10px; }
.radio-cards.payopts { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .radio-cards.payopts { grid-template-columns: 1fr; } }
.rcard { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1.5px solid var(--line-2); border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 450; color: var(--ink-2); line-height: 1.45; }
.rcard strong { color: var(--ink); }
.rcard input { margin-top: 2px; }
.rcard > .ic { margin-left: auto; color: var(--muted); }
.rcard:has(input:checked) { border-color: var(--ink); background: #fffdfa; box-shadow: 0 0 0 1px var(--ink); }
.rcard.disabled { opacity: .55; cursor: not-allowed; }
.addr-form { margin-top: 10px; padding: 14px; border-radius: 12px; background: var(--sunk); }
.co-items ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.co-items li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.co-items { padding: 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.mini-img { position: relative; display: block; width: 52px; aspect-ratio: 4/5; border-radius: 8px; overflow: hidden; flex: none; }
.mini-img .gimg { width: 100%; height: 100%; }
.mini-img em { position: absolute; top: -1px; right: -1px; min-width: 18px; height: 18px; border-radius: 0 0 0 8px; background: var(--ink); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; display: grid; place-items: center; }
.tbl .mini-img { width: 40px; }

/* Gateway (test payment) */
.dlg.gateway { width: min(420px, calc(100vw - 24px)); }
.gw-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; background: #f7f7fb; border-bottom: 1px solid #e4e4ee; }
.gw-head > div { flex: 1; display: grid; font-size: 13px; color: var(--ink-2); }
.gw-head strong { color: var(--ink); font-size: 15px; }
.gw-test { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 0 0 8px 8px; background: #fbd36b; color: #2b1d00; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.gw-body { padding: 18px 16px 20px; }
.gw-banner { display: flex; gap: 8px; padding: 12px; border-radius: 10px; background: var(--warn-bg); color: #6b3d00; font-size: 13px; }
.gw-banner .ic { width: 18px; height: 18px; flex: none; }
.gw-method { margin: 14px 0 8px; }
.gw-fake { display: grid; gap: 4px; padding: 14px; border-radius: 12px; border: 1px dashed var(--line-2); margin-bottom: 16px; font-size: 13px; color: var(--muted); }
.gw-fake code { font-size: 16px; color: var(--ink); background: none; padding: 0; }
.gw-body .row-gap { flex-wrap: wrap; }
.gw-result { display: flex; gap: 12px; padding: 14px; border-radius: 12px; margin-bottom: 14px; }
.gw-result.bad { background: var(--bad-bg); color: var(--bad); }
.gw-result p { color: var(--ink-2); margin: 4px 0 0; }
.spinner { width: 40px; height: 40px; margin: 24px auto 12px; border-radius: 50%; border: 4px solid var(--sunk); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Order / tracking */
.success { display: flex; gap: 14px; align-items: center; padding: 20px; border-radius: 18px; background: var(--ok-bg); color: #145a35; margin-bottom: 4px; }
.success > .ic { width: 44px; height: 44px; }
.success p { margin: 4px 0 0; color: var(--ink-2); }
.track { list-style: none; padding: 0; margin: 4px 0 12px; }
.track li { position: relative; display: flex; gap: 14px; padding: 0 0 18px; }
.track li::before { content: ''; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; background: var(--line-2); }
.track li:last-child::before { display: none; }
.track li.done::before { background: var(--ok); }
.track li.current::before { background: var(--line-2); }
.tdot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; display: grid; place-items: center; flex: none; }
.tdot .ic { width: 15px; height: 15px; color: #fff; stroke-width: 2.6; }
.track li.done .tdot { background: var(--ok); border-color: var(--ok); }
.track li.current .tdot { box-shadow: 0 0 0 5px var(--ok-bg); }
.track li > div { display: grid; gap: 1px; }
.track.cancelled p { display: flex; gap: 8px; color: var(--bad); font-weight: 600; }
.track-form { max-width: 520px; margin: 14px 0; }
.track-form .row-gap input { max-width: 260px; }
.track-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.order-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 10px; }
.order-list a { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; }
.order-list a:hover { border-color: var(--line-2); }
.wa-preview { padding: 16px; border-radius: 14px; background: #e9e1d6 radial-gradient(circle at 20% 20%, rgba(255,255,255,.35) 0 2px, transparent 3px) 0 0 / 22px 22px; }
.wa-bubble { position: relative; max-width: 92%; margin-left: auto; padding: 10px 12px 18px; border-radius: 12px 2px 12px 12px; background: #dcf3d0; color: #1b2a17; font-size: 14px; box-shadow: 0 1px 1px rgba(0,0,0,.12); }
.wa-bubble p { margin: 0; white-space: pre-wrap; }
.wa-bubble span { position: absolute; right: 10px; bottom: 4px; font-size: 11px; color: #5c6b57; }

/* Account */
.auth-wrap { display: grid; place-items: center; padding: 40px 0; }
.auth-card { width: min(440px, 100%); padding: 26px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 12px; }
.auth-card form { display: grid; gap: 10px; }
.auth-card .brand { margin-bottom: 6px; }
.demo-creds { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #fff8e1; border: 1px solid #f3dc9a; color: #4a3500; font-size: 13.5px; }
.demo-creds > div { display: grid; gap: 2px; }
.demo-creds .ic { color: #8f6400; }
.phone-in { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; overflow: hidden; }
.phone-in span { padding: 0 10px; color: var(--muted); font-weight: 600; border-right: 1px solid var(--line); }
.phone-in input { border: 0 !important; }
.admin-auth { min-height: calc(100vh - var(--bar-h)); background: linear-gradient(160deg, #f4efe8, #ebe3d8); padding: 24px var(--gut); }
.acct-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.acct-head .btn { margin-left: auto; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font: 700 22px/1 var(--font-display); flex: none; }
.avatar.sm { width: 34px; height: 34px; font-size: 15px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs.scroll { overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 10px 14px; color: var(--ink-2); text-decoration: none; font-weight: 650; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a.on { color: var(--ink); border-color: var(--accent); }
.addr-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.addr-list li { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.addr-list p { margin: 4px 0 0; color: var(--ink-2); }

/* Invoice */
.inv-main { padding-top: 18px; }
.invoice-wrap { max-width: 900px; margin: 0 auto; }
.inv-actions { display: flex; justify-content: space-between; margin-bottom: 12px; }
.invoice { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); font-size: 13.5px; }
.inv-sample { margin: -8px 0 18px; padding: 8px 12px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-weight: 650; font-size: 12.5px; }
.inv-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.inv-title { text-align: right; }
.inv-title h1 { font-size: 22px; text-transform: uppercase; letter-spacing: .06em; }
.inv-title p { margin: 4px 0 0; color: var(--ink-2); font-family: ui-monospace, Menlo, Consolas, monospace; }
.inv-parties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 16px 0; }
.inv-parties h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; font-family: var(--font); }
.inv-parties p { margin: 0; line-height: 1.55; }
@media (max-width: 640px) { .inv-parties { grid-template-columns: 1fr; } .invoice { padding: 16px; } }
.inv-tbl { font-size: 12.5px; }
.inv-tbl th, .inv-tbl td { padding: 8px; }
.inv-totals { display: grid; justify-items: end; margin-top: 14px; }
.inv-totals dl { width: min(320px, 100%); }
.words { font-weight: 650; margin-top: 6px; text-align: right; }
.inv-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

/* ---------- Admin ---------- */
.admin { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - var(--bar-h)); background: linear-gradient(to right, #fff 239px, var(--line) 239px 240px, #f5f4f1 240px); }
.aside { position: sticky; top: var(--bar-h); height: calc(100vh - var(--bar-h)); display: flex; flex-direction: column; gap: 6px; padding: 18px 12px; background: #fff; border-right: 1px solid var(--line); overflow-y: auto; }
.aside .brand { padding: 4px 8px 16px; }
.aside .brand > span:last-child { display: grid; gap: 3px; }
.aside .brand-name { font-size: 18px; }
.aside-sub { font-size: 12px; color: var(--muted); font-weight: 600; }
.anav { display: grid; gap: 2px; }
.anav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14px; }
.anav a:hover { background: var(--sunk); color: var(--ink); }
.anav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); }
.anav .ic { width: 19px; height: 19px; }
.nbadge { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 750; line-height: 20px; text-align: center; }
.aside-store { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14px; border: 1px solid var(--line); }
.amain { min-width: 0; }
.atop { position: sticky; top: var(--bar-h); z-index: 30; display: flex; align-items: center; gap: 12px; padding: 14px 24px; background: rgba(245, 244, 241, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.atitle { font-size: 22px; }
.atop-r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.anav-m { display: none; }
.acontent { padding: 20px 24px 60px; max-width: 1320px; }
@media (max-width: 860px) {
  .admin { grid-template-columns: 1fr; background: #f5f4f1; }
  .aside { display: none; }
  .atop { padding: 10px var(--gut); }
  .atitle { font-size: 19px; }
  .anav-m { display: flex; gap: 6px; overflow-x: auto; padding: 10px var(--gut); background: #fff; border-bottom: 1px solid var(--line); scrollbar-width: none; position: sticky; top: calc(var(--bar-h) + 55px); z-index: 29; }
  .anav-m::-webkit-scrollbar { display: none; }
  .anav-m a { flex: none; padding: 7px 12px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 650; white-space: nowrap; }
  .anav-m a[aria-current="page"] { background: var(--ink); color: #fff; }
  .acontent { padding: 14px var(--gut) 50px; }
}
.range { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; }
.range a { padding: 7px 14px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 650; font-size: 13px; border: 1px solid var(--line-2); background: #fff; }
.range a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.range .tiny { margin-left: 8px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi { display: grid; gap: 4px; padding: 16px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); min-width: 0; }
.kpi-l { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.kpi-v { font-size: 26px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-d { font-size: 12px; }
@media (max-width: 520px) { .kpi { padding: 12px; } .kpi-v { font-size: 21px; } }
.delta { font-weight: 700; color: var(--ink-2); }
.delta.up { color: var(--ok); }
.delta.down { color: var(--bad); }
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.span2 { grid-column: span 2; }
.span3 { grid-column: 1 / -1; }
@media (max-width: 960px) { .dash-grid { grid-template-columns: 1fr; } .span2, .span3 { grid-column: auto; } }
.panel { padding: 18px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); min-width: 0; margin-bottom: 0; }
.acontent > .panel, .acontent > .toolbar + .panel { margin-bottom: 14px; }
.panel.flush { padding: 0; overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.panel-head.pad { padding: 16px 18px 6px; }
.panel .h4 { margin-top: 2px; }
.panel h3.h4 + p { margin-bottom: 14px; }
.chart { position: relative; }
.chart-svg { width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: #ece8e1; stroke-width: 1; }
.chart .axis { stroke: #cfc6b9; stroke-width: 1; }
.chart .tick { font-size: 12px; fill: var(--muted); font-family: var(--font); }
.chart .mark { fill: var(--accent); }
.chart .hit { fill: transparent; }
.chart .bar { outline: none; cursor: default; }
.chart .bar.on .mark, .chart .bar:focus-visible .mark { fill: var(--accent-ink); filter: brightness(.85); }
.chart .bar:focus-visible .hit { fill: var(--accent-soft); }
.chart-tip { position: absolute; transform: translate(-50%, -100%); padding: 6px 10px; border-radius: 8px; background: #1d1a17; color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.todo { list-style: none; padding: 0; margin: 0; }
.todo a { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 550; }
.todo a:hover { color: var(--accent-ink); }
.todo li:last-child a { border-bottom: 0; }
.todo a span { flex: 1; }
.todo .ic { color: var(--ink-2); }
.todo .ic:last-child { width: 16px; height: 16px; color: var(--muted); }
.split { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; margin: 8px 0 12px; background: #fff; }
.seg1 { background: #2a78d6; }
.seg2 { background: #eb6834; }
.legend { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; font-size: 14px; }
.legend li { display: flex; align-items: center; gap: 8px; }
.key { width: 12px; height: 12px; border-radius: 3px; }
.hbar { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--sunk); margin-right: 10px; vertical-align: middle; overflow: hidden; }
.hbar span { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.cell-prod { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: 180px; }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.toolbar .tabs { margin-bottom: 0; flex: 1 1 auto; min-width: 0; border: 0; }
.toolbar .search { margin-left: 0; flex: 0 1 300px; }
@media (max-width: 860px) { .toolbar .search { flex: 1 1 100%; max-width: none; } }
.orders-tbl td { white-space: nowrap; }
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--ink); color: #fff; }
.bulk .btn { background: #fff; }
.bulk .linkish { color: #fff; }
.status-sel { width: auto !important; min-height: 32px !important; padding: 3px 28px 3px 10px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 700 !important; }
.status-sel.st-active { background-color: var(--ok-bg); color: var(--ok); border-color: #b6dfc5; }
.status-sel.st-draft { background-color: var(--warn-bg); color: var(--warn); border-color: #efd29c; }
.status-sel.st-hidden { background-color: var(--sunk); color: var(--ink-2); }
.back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; font-weight: 650; text-decoration: none; font-size: 14px; }
.back .ic { width: 16px; height: 16px; }
.od-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.od-head .h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.od-grid, .pe-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.od-grid > div, .pe-grid > div { display: grid; gap: 14px; min-width: 0; }
@media (max-width: 960px) { .od-grid, .pe-grid { grid-template-columns: 1fr; } }
.ship-form { display: grid; gap: 10px; width: 100%; }
.activity { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; }
.activity li { display: grid; gap: 1px; padding-left: 14px; border-left: 2px solid var(--line-2); }
.pe-img { border-radius: 14px; overflow: hidden; aspect-ratio: 4/5; max-width: 260px; margin: 0 auto 12px; }
.pe-img .gimg { width: 100%; height: 100%; }
.pe-actions { display: grid; gap: 8px; }
.colour-edit { display: grid; gap: 8px; margin-bottom: 14px; }
.ce-row { display: flex; gap: 8px; align-items: center; }
.ce-row input:not([type=color]) { max-width: 220px; }
.stock-grid th, .stock-grid td { padding: 6px; }
.stock-in { width: 66px !important; min-height: 36px !important; padding: 4px 6px !important; text-align: right; }
.thumbs { display: flex; gap: 4px; }
.thumbs .mini-img { width: 34px; }
.live-row { background: #fffaf0; }
/* Admin tables become cards on phones, so prices, statuses and actions stay on screen instead of
   behind a sideways scroll. Cells: c-main (first line), c-end (first line, right), c-wide (own line),
   c-act (pushed right on the last line), c-sel (checkbox before c-main); data-label names a bare value. */
@media (max-width: 600px) {
  .tbl.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tbl.stack, .tbl.stack tbody { display: block; }
  .tbl.stack tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .panel.flush .tbl.stack tr { padding: 12px 14px; }
  .tbl.stack tr::after { content: ''; order: 3; flex: 0 0 100%; height: 0; }
  .tbl.stack td { display: block; order: 5; padding: 0; border: 0; text-align: left; white-space: normal; }
  .tbl.stack td.c-sel { order: 0; }
  .tbl.stack td.c-main { order: 1; flex: 1 1 0; min-width: 0; }
  .tbl.stack td.c-end { order: 2; margin-left: auto; text-align: right; font-weight: 700; }
  .tbl.stack td.c-wide { order: 4; flex: 1 1 100%; }
  .tbl.stack td.c-act { order: 9; margin-left: auto; }
  .tbl.stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .tbl.stack td.c-end[data-label]::before { text-align: right; }
  .tbl.stack .cell-prod { min-width: 0; }
  .tbl.stack td.num { text-align: left; }
  .tbl.stack td.num.c-end { text-align: right; }
}
.phone-mini { border: 8px solid #1d1a17; border-radius: 26px; overflow: hidden; background: #fff; max-width: 300px; margin: 0 auto 10px; }
.pm-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #f1ece4; font-weight: 700; font-size: 14px; }
.phone-mini .wa-preview { border-radius: 0; min-height: 200px; }
.team { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.team li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.team li span:nth-child(2) { flex: 1; }
.mini-hero { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.mini-hero > div:last-child { display: grid; gap: 6px; justify-items: start; }
.mini-hero strong { font: 700 20px/1.15 var(--font-display); }
.mh-img { width: 120px; border-radius: 12px; overflow: hidden; aspect-ratio: 4/5; }
.mh-img .gimg { width: 100%; height: 100%; }
.accent-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acc-opt { display: inline-flex; cursor: pointer; }
.acc-opt input { position: absolute; opacity: 0; pointer-events: none; }
.acc-opt span { width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.acc-opt input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.acc-opt input:focus-visible + span { outline: 3px solid var(--accent-ink); outline-offset: 4px; }
.acc-custom { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.brand-preview { display: grid; gap: 12px; padding: 0 0 16px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); justify-items: start; }
.brand-preview > * { margin: 0 16px; }
.bp-bar { margin: 0 !important; width: 100%; padding: 6px 12px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 600; text-align: center; }
.bp-head { display: flex; align-items: center; gap: 8px; }
.bp-title { font-size: 20px; font-weight: 700; line-height: 1.15; }

/* Print: only the invoice */
@media print {
  body { background: #fff; }
  .demobar, .skip, .no-print, #toast, #dialog-host { display: none !important; }
  .invoice { border: 0; box-shadow: none; padding: 0; }
  .store-main { padding: 0; }
}