/*
  SCOS design system — "Soft & friendly", light only (owner preference).
  Manrope, self-hosted. Instagram-style gradient is the signature accent:
  brand mark, primary action, active navigation. Everything else stays calm and pastel.
  Phones get an app shell (top app bar + bottom tab bar); laptops get a sidebar.
*/

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Canvas and surfaces: a whisper of lilac-blush, never grey */
  --canvas: #fbf8fc;
  --canvas-wash: #f7f1fb;
  --surface: #ffffff;
  --surface-soft: #f7f3fa;
  --surface-sunk: #f1ecf6;
  --line: #ece5f2;
  --line-strong: #d9cfe3;

  /* Ink: deep plum instead of black */
  --ink: #221b30;
  --ink-2: #5b5270;
  --ink-3: #6d6582;

  /* Signature gradient (Instagram family, tuned so white text passes AA) */
  --grad: linear-gradient(120deg, #c2410c 0%, #c81e6a 36%, #8b2bb3 70%, #5146d0 100%);
  --grad-soft: linear-gradient(120deg, #fff0e8 0%, #fde8f1 40%, #f3e8fb 75%, #ecebfd 100%);
  --accent: #b8246a;          /* text-safe magenta for links and focus */
  --accent-strong: #97195a;
  --accent-tint: #fbeaf3;
  --accent-tint-2: #f6dcea;
  --violet: #7a3fb0;
  --focus: #8a3ccf;
  --glow: rgb(150 47 191 / 0.35);
  --wash-1: #fde6ef;
  --wash-2: #ece6fd;

  /* Pastel states */
  --ok: #11703f;       --ok-bg: #e6f6ed;     --ok-line: #bfe6cf;
  --warn: #93460a;     --warn-bg: #fff2e6;   --warn-line: #f6d4b4;
  --bad: #b3213c;      --bad-bg: #fdecef;    --bad-line: #f5c3cd;
  --note: #3a44a8;     --note-bg: #eef0ff;   --note-line: #cdd2fb;

  --r-xs: 8px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgb(58 26 84 / 0.05), 0 2px 8px -2px rgb(58 26 84 / 0.06);
  --shadow-2: 0 2px 4px rgb(58 26 84 / 0.04), 0 12px 32px -10px rgb(58 26 84 / 0.16);
  --shadow-pop: 0 8px 20px -6px var(--glow);

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabbar-h: 64px;

  color-scheme: light;
  accent-color: var(--accent);
}

/* ---------------------------------------------------------------- Colour themes (Settings → Appearance)
   Each theme swaps only the signature: gradient, accent, tints, focus, glow, background washes.
   All gradient stops keep white text at ≥ 4.5:1. */
:root[data-theme="ocean"] {
  --grad: linear-gradient(120deg, #0369a1 0%, #1d4ed8 40%, #4338ca 75%, #5b21b6 100%);
  --grad-soft: linear-gradient(120deg, #e6f4fb 0%, #e8eefd 45%, #eeebfd 100%);
  --accent: #1d4ed8; --accent-strong: #1e3a8a; --accent-tint: #e8effd; --accent-tint-2: #d3e0fb;
  --focus: #2563eb; --glow: rgb(37 99 235 / 0.35); --wash-1: #e3f1fb; --wash-2: #e9e8fd;
  --canvas: #f8fafd; --canvas-wash: #f0f5fc; --surface-soft: #f4f7fb; --surface-sunk: #ebf0f7; --line: #e3e9f2; --line-strong: #cdd7e5;
  --ink: #16213a; --ink-2: #4d5a73; --ink-3: #5f6b82;
}
:root[data-theme="emerald"] {
  --grad: linear-gradient(120deg, #047857 0%, #0f766e 40%, #0e7490 75%, #1d4ed8 100%);
  --grad-soft: linear-gradient(120deg, #e4f6ee 0%, #e2f4f2 45%, #e4f1f7 100%);
  --accent: #0f766e; --accent-strong: #115e59; --accent-tint: #e2f4f1; --accent-tint-2: #c9eae5;
  --focus: #0d9488; --glow: rgb(13 148 136 / 0.33); --wash-1: #dcf3ea; --wash-2: #e0eff6;
  --canvas: #f7fbfa; --canvas-wash: #eef7f4; --surface-soft: #f2f8f6; --surface-sunk: #e8f1ee; --line: #e0ebe7; --line-strong: #c8d9d3;
  --ink: #15261f; --ink-2: #4a5d56; --ink-3: #5b6d66;
}
:root[data-theme="sunset"] {
  --grad: linear-gradient(120deg, #c2410c 0%, #be123c 45%, #9f1239 75%, #86198f 100%);
  --grad-soft: linear-gradient(120deg, #fff1e8 0%, #fde9ec 50%, #f9e8f5 100%);
  --accent: #be123c; --accent-strong: #9f1239; --accent-tint: #fdeaee; --accent-tint-2: #f9d3dc;
  --focus: #e11d48; --glow: rgb(225 29 72 / 0.30); --wash-1: #ffe9dc; --wash-2: #fbe3ec;
  --canvas: #fdf9f8; --canvas-wash: #fcf1ee; --surface-soft: #faf5f3; --surface-sunk: #f4ecea; --line: #f0e5e2; --line-strong: #e1d1cd;
  --ink: #2b1a1a; --ink-2: #66514f; --ink-3: #745f5c;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-strong) transparent; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font: 500 14px/1.55 var(--font);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--accent);
}
::selection { background: var(--accent-tint-2); color: var(--ink); }

h1, h2, h3 { margin: 0 0 .5rem; color: var(--ink); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: 1.5rem; font-weight: 800; }
h2 { font-size: 1.0625rem; font-weight: 750; }
h3 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 .75rem; }
a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }
strong, b { font-weight: 750; }
code, .mono { font-family: var(--mono); font-size: .85em; }
code {
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: 6px;
  padding: .12em .45em; word-break: break-all; color: var(--ink);
}
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.muted { color: var(--ink-2); }
.small { font-size: .8125rem; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.icon { width: 20px; height: 20px; flex: none; }
.icon .i-fill { display: none; } /* two-tone bodies: shown only where a surface opts in (seller panel) */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--surface); color: var(--ink); padding: .6rem 1rem;
  border-radius: var(--r-pill); box-shadow: var(--shadow-2); font-weight: 700;
}
.skip-link:focus { top: 1rem; }

/* ---------------------------------------------------------------- Brand */
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.0625rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 11px; background: var(--grad); color: #fff;
  display: grid; place-items: center; font-size: .8125rem; font-weight: 800; letter-spacing: -0.02em;
  box-shadow: var(--shadow-pop); flex: none;
}

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .6rem 1.2rem;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: 700 .9375rem/1.2 var(--font); letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn .icon { width: 18px; height: 18px; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-primary { background: var(--grad); background-size: 140% 100%; color: #fff; box-shadow: var(--shadow-pop); }
.btn-primary:hover:not(:disabled) { color: #fff; background-position: 100% 0; box-shadow: 0 10px 26px -6px var(--glow); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-soft); color: var(--ink); border-color: var(--ink-3); }
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #971a31; color: #fff; }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-sunk); color: var(--ink); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: .35rem .85rem; font-size: .8125rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.btn-row.end { justify-content: flex-end; }
.btn-row.between { justify-content: space-between; }
.btn[data-busy="true"]::after {
  content: ""; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Forms */
.field { margin-bottom: 1.1rem; }
.field label, .label { display: block; font-weight: 700; font-size: .875rem; margin-bottom: .4rem; color: var(--ink); }
.hint { color: var(--ink-2); font-size: .8125rem; }
.field .hint { color: var(--ink-2); font-size: .8125rem; margin: .4rem 0 0; }
.field .error, .check .error { color: var(--bad); font-size: .8125rem; margin: .4rem 0 0; font-weight: 650; display: flex; gap: .35rem; align-items: center; }
.input, .select {
  width: 100%; min-height: 48px; padding: .7rem 1rem;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  font: 600 .9375rem/1.3 var(--font);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
.input::placeholder { color: var(--ink-3); font-weight: 500; opacity: 1; }
.input:hover, .select:hover { border-color: #c4b7d3; }
.input:focus, .select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 16%, transparent); }
.input[aria-invalid="true"] { border-color: var(--bad); background: #fffafb; }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgb(179 33 60 / 0.12); }
.select {
  appearance: none; padding-right: 2.6rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5270' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 18px;
}
input[type="file"].input { padding: .55rem; font-weight: 600; }
input[type="file"].input::file-selector-button {
  font: 700 .8125rem var(--font); border: 0; border-radius: var(--r-pill); padding: .5rem 1rem; margin-right: .8rem;
  background: var(--accent-tint); color: var(--accent-strong); cursor: pointer;
}
.input-narrow { width: 110px; }
.input.otp { font: 800 1.625rem/1 var(--mono); letter-spacing: .55em; text-align: center; padding-left: 1.4rem; min-height: 60px; }
.input-group { position: relative; display: flex; }
.input-group .input { padding-right: 5rem; }
.input-group .reveal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: .3rem .8rem; font-size: .8125rem; }
.input-group .reveal:active:not(:disabled) { transform: translateY(-50%) scale(.97); }
.check { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem; }
.check input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; flex: none; cursor: pointer; }
.check label { font-weight: 700; font-size: .9375rem; margin: 0; cursor: pointer; }
.check .hint { color: var(--ink-2); font-size: .8125rem; margin: .25rem 0 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }
fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
legend { font-weight: 750; margin-bottom: .75rem; padding: 0; }
.radio-cards { display: grid; gap: .6rem; }
.radio-card {
  display: flex; gap: .85rem; align-items: flex-start; padding: .9rem 1rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; background: var(--surface);
  transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.radio-card:hover { border-color: #c4b7d3; }
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.radio-card:has(input:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.radio-card input { margin: 3px 0 0; width: 18px; height: 18px; flex: none; }
.radio-card strong { display: block; font-size: .9375rem; }
.radio-card span span { color: var(--ink-2); font-size: .8125rem; font-weight: 500; }

/* ---------------------------------------------------------------- Surfaces */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 1.5rem;
}
.card + .card, .grid-cards + .card, .card + .grid-cards { margin-top: 1.25rem; }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; }
.card-header h2 { margin: 0; }
.card-header p { margin: .25rem 0 0; }
.stack > * + * { margin-top: 1rem; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.25rem; align-items: start; }
.grid-cards > .card + .card { margin-top: 0; }

/* ---------------------------------------------------------------- Alerts */
.alert {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .85rem 1rem; border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: .9rem; margin-bottom: 1.1rem;
}
.alert .icon { width: 20px; height: 20px; margin-top: 1px; }
.alert p { margin: 0; }
.alert-body { color: var(--ink); font-weight: 600; }
.alert-success { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.alert-error   { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); }
.alert-warning { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.alert-info    { background: var(--note-bg); color: var(--note); border-color: var(--note-line); }

/* ---------------------------------------------------------------- Badges */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .65rem; border-radius: var(--r-pill);
  font-size: .75rem; font-weight: 750; white-space: nowrap; letter-spacing: .005em;
  background: var(--surface-sunk); color: var(--ink-2);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.badge-success { background: var(--ok-bg); color: var(--ok); }
.badge-danger  { background: var(--bad-bg); color: var(--bad); }
.badge-warning { background: var(--warn-bg); color: var(--warn); }
.badge-info    { background: var(--note-bg); color: var(--note); }
.badge-plain::before { display: none; }

/* ---------------------------------------------------------------- Tables */
.table-wrap { position: relative; overflow-x: auto; margin: 0 -1.5rem; padding: 0 1.5rem; }
table.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th, .table td { text-align: left; padding: .8rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .75rem; color: var(--ink-3); font-weight: 750; letter-spacing: .02em; background: var(--surface-soft); border-bottom: 0; }
.table th:first-child { border-radius: var(--r-xs) 0 0 var(--r-xs); }
.table th:last-child { border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color .15s var(--ease); }
.table tbody tr:hover { background: #fcfaff; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty {
  text-align: center; padding: 2.25rem 1rem; color: var(--ink-2); font-weight: 600;
  background: var(--surface-soft); border: 1.5px dashed var(--line-strong); border-radius: var(--r);
}

/* ---------------------------------------------------------------- Lists */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.5rem; margin: 0; font-size: .9rem; }
.kv dt { color: var(--ink-2); font-weight: 600; }
.kv dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: .85rem; align-items: flex-start; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.checklist li > div > div:first-child { font-weight: 700; }
.checklist .detail { color: var(--ink-2); font-size: .8125rem; font-weight: 500; }
.status { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.status .icon { width: 16px; height: 16px; stroke-width: 2.4; }
.status.ok { background: var(--ok-bg); color: var(--ok); }
.status.fail { background: var(--bad-bg); color: var(--bad); }
.status.warn { background: var(--warn-bg); color: var(--warn); }

/* ---------------------------------------------------------------- Centered pages (auth, errors) */
.auth-shell {
  min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem;
  background:
    radial-gradient(60rem 28rem at 15% -10%, var(--wash-1) 0%, transparent 60%),
    radial-gradient(50rem 26rem at 95% 0%, var(--wash-2) 0%, transparent 60%),
    var(--canvas);
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card .card { padding: 2rem; border-radius: 28px; box-shadow: var(--shadow-2); }
.auth-card .brand { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.auth-card h1 { font-size: 1.5rem; text-align: center; }
.auth-card .lead { text-align: center; color: var(--ink-2); margin-bottom: 1.5rem; font-weight: 600; }
.auth-foot { text-align: center; margin-top: 1.25rem; font-size: .8125rem; color: var(--ink-3); font-weight: 600; }
.auth-card form + form { margin-top: 1rem; }
.error-shell {
  min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; text-align: center;
  background: radial-gradient(50rem 26rem at 50% -5%, var(--wash-1) 0%, transparent 65%), var(--canvas);
}
.error-shell .brand { margin-bottom: 1.5rem; }
.error-code {
  font: 800 4.5rem/1 var(--font); letter-spacing: -0.04em; margin-bottom: .75rem;
  color: var(--accent-tint-2);
}
.error-shell p { color: var(--ink-2); max-width: 440px; margin-inline: auto; font-weight: 600; }

/* ---------------------------------------------------------------- Installer */
.install-shell { max-width: 780px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.install-bg { background: radial-gradient(70rem 30rem at 50% -12%, var(--wash-1) 0%, var(--wash-2) 35%, transparent 70%), var(--canvas); }
.install-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.75rem; gap: 1rem; }
.stepper { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; padding: 0; margin: 0 0 1.5rem; counter-reset: step; }
.stepper li { counter-increment: step; font-size: .75rem; font-weight: 700; color: var(--ink-3); padding-top: .7rem; position: relative; }
.stepper li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: var(--r-pill); background: var(--line); }
.stepper li::before { content: counter(step) ". "; }
.stepper li.done { color: var(--ink-2); }
.stepper li.done::after { background: var(--accent-tint-2); }
.stepper li.current { color: var(--accent); }
.stepper li.current::after { background: var(--grad); }
@media (max-width: 640px) {
  .stepper li:not(.current) { font-size: 0; }
  .stepper li:not(.current)::before { font-size: .75rem; }
  .stepper li.current { grid-column: span 1; white-space: nowrap; }
}

/* ---------------------------------------------------------------- Admin shell: laptop */
.app { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 1.25rem .9rem; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.sidebar .brand { padding: .2rem .55rem 1.5rem; }
.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-label { font-size: .75rem; font-weight: 750; color: var(--ink-3); padding: 1.1rem .75rem .4rem; margin: 0; }
.nav a {
  display: flex; align-items: center; gap: .75rem; padding: .62rem .75rem; border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none; font-weight: 650; font-size: .9375rem;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav a:hover { background: var(--surface-soft); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--grad-soft); color: var(--accent-strong); font-weight: 750; }
.nav a[aria-current="page"] .icon { color: var(--accent); }
.sidebar-foot { margin-top: auto; padding: 1rem .75rem 0; font-size: .75rem; color: var(--ink-3); font-weight: 650; }
.main { min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 2rem; background: rgb(251 248 252 / 0.9); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.topbar-title { font-weight: 800; font-size: 1.0625rem; margin: 0; display: none; }
.topbar .user { display: flex; align-items: center; gap: .75rem; font-size: .875rem; margin-left: auto; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--grad-soft); color: var(--accent-strong); font-weight: 800; font-size: .8125rem;
  border: 1.5px solid var(--accent-tint-2);
}
.user-name { font-weight: 700; color: var(--ink); }
.content { padding: 2rem; max-width: 1180px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-head h1 { margin: 0; }
.page-head p { margin: .35rem 0 0; color: var(--ink-2); font-weight: 600; }
.banner-maint {
  display: flex; align-items: center; gap: .6rem;
  background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid var(--warn-line);
  padding: .6rem 2rem; font-size: .8125rem; font-weight: 750;
}
.banner-maint .icon { width: 18px; height: 18px; }

/* Summary strip: one soft card, facts side by side */
.summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); margin-bottom: 1.25rem; overflow: hidden;
}
.summary > div { padding: 1.1rem 1.35rem; display: flex; gap: .85rem; align-items: center; min-width: 0; }
.summary > div + div { border-left: 1px solid var(--line); }
.summary .chip-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--grad-soft); color: var(--accent); flex: none; }
.summary dt { font-size: .75rem; color: var(--ink-2); font-weight: 700; }
.summary dd { margin: .1rem 0 0; font-weight: 800; font-size: .9375rem; overflow-wrap: anywhere; }
.summary dl { margin: 0; min-width: 0; }

/* Bottom tab bar (phones only) */
.tabbar { display: none; }

/* ---------------------------------------------------------------- Admin shell: phone = app */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .topbar { padding: .65rem 1rem; padding-top: max(.65rem, env(safe-area-inset-top)); }
  .topbar-title { display: flex; align-items: center; gap: .55rem; }
  .topbar-title .brand-mark { width: 30px; height: 30px; border-radius: 10px; font-size: .75rem; box-shadow: none; }
  .user-name { display: none; }
  .content { padding: 1.25rem 1rem calc(var(--tabbar-h) + 1.5rem + env(safe-area-inset-bottom)); }
  .banner-maint { padding: .55rem 1rem; }
  .page-head { margin-bottom: 1.1rem; }
  h1 { font-size: 1.3rem; }
  .card { padding: 1.15rem; border-radius: 20px; }
  .table-wrap { margin: 0 -1.15rem; padding: 0 1.15rem; }
  .summary > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; inset: auto 0 0 0; z-index: 30;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: rgb(255 255 255 / 0.96); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px -12px rgb(58 26 84 / 0.18);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    text-decoration: none; color: var(--ink-3); font-size: .6875rem; font-weight: 750;
    -webkit-tap-highlight-color: transparent; position: relative;
  }
  .tabbar a .icon { width: 24px; height: 24px; transition: transform .2s var(--ease); }
  .tabbar a:active .icon { transform: scale(.88); }
  .tabbar a[aria-current="page"] { color: var(--accent-strong); }
  .tabbar a[aria-current="page"]::before {
    content: ""; position: absolute; top: 7px; width: 52px; height: 30px; border-radius: var(--r-pill);
    background: var(--grad-soft); z-index: -1;
  }
  .tabbar a[aria-current="page"] .icon { color: var(--accent); }
}

/* ---------------------------------------------------------------- Dialog */
dialog.confirm {
  border: 1px solid var(--line); border-radius: 26px; padding: 1.6rem;
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px -18px rgb(58 26 84 / 0.35);
  max-width: 440px; width: calc(100% - 2rem);
}
dialog.confirm[open] { animation: pop .22s var(--ease); }
dialog.confirm::backdrop { background: rgb(49 28 66 / 0.32); }
dialog.confirm h2 { font-size: 1.1875rem; }
dialog.confirm p { color: var(--ink-2); font-weight: 600; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  dialog.confirm { margin: auto auto 0; width: 100%; max-width: none; border-radius: 26px 26px 0 0; padding-bottom: calc(1.6rem + env(safe-area-inset-bottom)); }
  dialog.confirm[open] { animation: sheet .28s var(--ease); }
  dialog.confirm .btn-row { flex-direction: column-reverse; align-items: stretch; }
  @keyframes sheet { from { transform: translateY(100%); } to { transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- Phone tables become stacked rows */
@media (max-width: 640px) {
  .table.stack-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table.stack-sm, .table.stack-sm tbody, .table.stack-sm tfoot, .table.stack-sm tr, .table.stack-sm td { display: block; width: 100%; }
  .table.stack-sm tr { padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .table.stack-sm tr:last-child { border-bottom: 0; }
  .table.stack-sm td { border: 0; padding: .2rem 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: .75rem; justify-items: end; text-align: right; }
  .table.stack-sm td > * { grid-column: 2; }
  .table.stack-sm td::before { content: attr(data-label); grid-column: 1; grid-row: 1 / span 3; justify-self: start; color: var(--ink-3); font-weight: 700; font-size: .75rem; text-align: left; padding-top: .15rem; }
  .table.stack-sm td[data-label=""]::before { content: none; }
  .table.stack-sm td:first-child { font-weight: 800; color: var(--ink); }
  .table.stack-sm tbody tr:hover { background: none; }
}
.nowrap { white-space: nowrap; }
@media (max-width: 480px) {
  .topbar .btn .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---------------------------------------------------------------- Theme swatches */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .75rem; }
.theme-option { position: relative; display: block; cursor: pointer; }
.theme-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.theme-option .swatch-card {
  display: block; border: 1.5px solid var(--line-strong); border-radius: var(--r); padding: .6rem; background: var(--surface);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.theme-option:hover .swatch-card { transform: translateY(-1px); }
.theme-option input:checked + .swatch-card { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.theme-option input:focus-visible + .swatch-card { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.swatch-card .swatch { display: block; height: 56px; border-radius: 12px; }
.swatch-card .swatch-name { display: flex; justify-content: space-between; align-items: center; margin-top: .55rem; padding: 0 .2rem; font-weight: 750; font-size: .875rem; }
.swatch-card .swatch-name .icon { width: 18px; height: 18px; color: var(--accent); opacity: 0; }
.theme-option input:checked + .swatch-card .swatch-name .icon { opacity: 1; }
.swatch.instagram { background: linear-gradient(120deg, #c2410c 0%, #c81e6a 36%, #8b2bb3 70%, #5146d0 100%); }
.swatch.ocean { background: linear-gradient(120deg, #0369a1 0%, #1d4ed8 40%, #4338ca 75%, #5b21b6 100%); }
.swatch.emerald { background: linear-gradient(120deg, #047857 0%, #0f766e 40%, #0e7490 75%, #1d4ed8 100%); }
.swatch.sunset { background: linear-gradient(120deg, #c2410c 0%, #be123c 45%, #9f1239 75%, #86198f 100%); }

/* ================================================================ M1 components */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 800px) { .grid-3 { grid-template-columns: 1fr; } }
.span-2 { grid-column: span 2; }
@media (max-width: 640px) { .span-2 { grid-column: auto; } }
.grow { flex: 1 1 auto; min-width: 0; }
.stack-sm > * + * { margin-top: .75rem; }
.crumb { margin: 0 0 .35rem !important; font-size: .8125rem; font-weight: 700; }
.crumb a { color: var(--ink-2); text-decoration: none; }
.crumb a { display: inline-flex; align-items: center; gap: .15rem; }
.crumb .icon { width: 15px; height: 15px; }
.crumb a:hover { color: var(--accent); }
.input-tiny { width: 84px; min-height: 40px; padding: .45rem .6rem; }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; }
.check-inline { margin: .5rem 0 0; align-items: center; }
.check-inline label { font-weight: 650; font-size: .875rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.inline-form .field, .inline-form .check { margin-bottom: 0; }
.danger-zone { border-color: var(--bad-line); }
.danger-zone h2 { color: var(--bad); }
.row-link { font-weight: 750; color: var(--ink); text-decoration: none; }
.row-link:hover { color: var(--accent); text-decoration: underline; }

/* Switch-style checkbox (role="switch") */
input[type="checkbox"][role="switch"] {
  appearance: none; width: 42px; height: 24px; border-radius: 999px; background: var(--line-strong);
  position: relative; cursor: pointer; flex: none; margin-top: 0; transition: background-color .18s var(--ease);
}
input[type="checkbox"][role="switch"]::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .2); transition: transform .18s var(--ease);
}
input[type="checkbox"][role="switch"]:checked { background: var(--accent); }
input[type="checkbox"][role="switch"]:checked::after { transform: translateX(18px); }
.toggle-list { display: grid; gap: .25rem; }
.toggle-list .check { padding: .6rem 0; margin: 0; border-bottom: 1px solid var(--line); }
.toggle-list .check:last-child { border-bottom: 0; }

/* Segmented radio (Monthly / Yearly) */
.seg-radio { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface-sunk); border-radius: var(--r-pill); }
.seg-radio label { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.1rem; border-radius: var(--r-pill); font-weight: 700; font-size: .875rem; cursor: pointer; color: var(--ink-2); }
.seg-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-radio label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg-radio label:has(input:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 1px; }

/* Status filter tabs (sellers list) */
.seg-tabs { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; margin-bottom: 1rem; scrollbar-width: none; }
.seg-tabs::-webkit-scrollbar { display: none; }
.seg-tabs a {
  flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 1rem; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-weight: 700; font-size: .875rem; text-decoration: none;
}
.seg-tabs a:hover { color: var(--ink); border-color: var(--line-strong); }
.seg-tabs a[aria-current="true"], .seg-tabs a[aria-current="page"] { background: var(--grad-soft); border-color: var(--accent-tint-2); color: var(--accent-strong); }
.seg-tabs .count { font-size: .75rem; background: var(--surface-sunk); border-radius: var(--r-pill); padding: .05rem .5rem; color: var(--ink-2); }
.seg-tabs a[aria-current="true"] .count { background: #fff; color: var(--accent-strong); }

/* Search bar */
.filter-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.filter-bar .field { margin: 0; }
.filter-bar .select { min-width: 170px; }
.input-icon { position: relative; }
.input-icon .icon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); width: 18px; height: 18px; pointer-events: none; }
.input-icon .input { padding-left: 2.6rem; }
.input-prefix { display: flex; align-items: stretch; }
.input-prefix span { display: inline-flex; align-items: center; padding: 0 .8rem; border: 1.5px solid var(--line-strong); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); background: var(--surface-soft); color: var(--ink-2); font-weight: 700; }
.input-prefix .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; }

/* Plans */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; }
.plan-card { display: flex; flex-direction: column; gap: .75rem; }
.plan-card + .plan-card { margin-top: 0; }
.plan-card.is-off { opacity: .72; }
.plan-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.plan-card-head h2 { margin: 0; font-size: 1.25rem; }
.plan-card p { margin: 0; }
.plan-price { font-size: 1.0625rem; font-weight: 800; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.plan-facts { font-size: .8125rem; gap: .35rem 1rem; padding: .85rem; border-radius: var(--r-sm); background: var(--surface-soft); grid-template-columns: minmax(0, 1fr) auto; }
.plan-facts dd { text-align: right; white-space: nowrap; margin-bottom: 0 !important; }
@media (max-width: 640px) { .kv.plan-facts { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; } }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .875rem; font-weight: 650; }
.feature-list li { display: flex; gap: .5rem; align-items: center; }
.feature-list .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.feature-list .on .icon { color: var(--ok); }
.feature-list .off, .feature-list .off .icon { color: var(--ink-3); }
.plan-card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: .75rem; border-top: 1px solid var(--line); }

/* Disclosure panels (seller actions) */
details.disclosure { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .25rem; }
details.disclosure + details.disclosure { margin-top: 0; }
details.disclosure > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; min-height: 44px;
  font-weight: 750; font-size: .9375rem; color: var(--ink);
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::after {
  content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translateY(-3px); transition: transform .18s var(--ease);
}
details.disclosure[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
details.disclosure > summary .icon { width: 18px; height: 18px; color: var(--accent); }
details.disclosure > *:not(summary) { margin-bottom: 1rem; }

/* Timelines + simple row lists */
.timeline { list-style: none; margin: 1rem 0 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 1rem 1.35rem; }
.timeline li::before { content: ""; position: absolute; left: 3px; top: .45rem; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-tint-2); box-shadow: 0 0 0 3px var(--surface); }
.timeline li::after { content: ""; position: absolute; left: 7px; top: 1.1rem; bottom: 0; width: 1px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline p { margin: 0; }
.timeline-title { font-weight: 750; }
.timeline-text { overflow-wrap: anywhere; }
.row-list { list-style: none; margin: 0; padding: 0; }
.row-list > li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.row-list > li:last-child { border-bottom: 0; }
.row-list > li > div { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kv-wide { grid-template-columns: minmax(140px, max-content) 1fr; }
@media (max-width: 640px) { .kv, .kv-wide { grid-template-columns: 1fr; gap: .1rem; } .kv dd { margin-bottom: .6rem; } }

/* Permissions */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.perm-group { border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1rem .25rem; margin: 0; background: var(--surface-soft); }
.perm-group legend { padding: 0 .4rem; font-size: .875rem; }
.perm-group .check label { font-weight: 600; font-size: .875rem; }

/* "More" (phone) */
.list-nav { padding: .5rem; }
.list-nav ul { list-style: none; margin: 0; padding: 0; }
.list-nav a { display: flex; align-items: center; gap: .85rem; padding: .7rem .75rem; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-weight: 700; min-height: 56px; }
.list-nav a:hover { background: var(--surface-soft); }
.list-nav .chip-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--grad-soft); color: var(--accent); flex: none; }
.list-nav-label { flex: 1; }
.list-nav .chev { color: var(--ink-3); }

[hidden] { display: none !important; }

/* ================================================================ M2: public site + seller panel */
.center { text-align: center; }
.center-row { justify-content: center; }
.btn-lg { min-height: 52px; padding: .75rem 1.5rem; font-size: 1rem; }

/* Public site shell */
body.site { display: flex; flex-direction: column; min-height: 100vh; background:
  radial-gradient(70rem 26rem at 50% -8%, var(--wash-1) 0%, var(--wash-2) 38%, transparent 70%), var(--canvas); }
.site-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
.site-wrap.narrow { max-width: 760px; }
.site-wrap.narrow-sm { max-width: 460px; }
.site-bar { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / .85); border-bottom: 1px solid var(--line); }
.site-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.site-nav { display: flex; align-items: center; gap: 1.25rem; }
.site-main { flex: 1; padding: 2rem 0 3.5rem; }
.site-foot { border-top: 1px solid var(--line); background: var(--surface); }
.site-foot-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.25rem; color: var(--ink-3); font-size: .8125rem; font-weight: 600; }
.site-foot nav { display: flex; gap: 1rem; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--accent); }

.hero { padding: 3.5rem 1.25rem 2rem; max-width: 820px; }
.hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.08; letter-spacing: -0.035em; margin-bottom: 1rem; }
.hero-lead { font-size: 1.0625rem; color: var(--ink-2); max-width: 60ch; margin-bottom: 1.5rem; }
.hero .btn-row { margin-bottom: 1.25rem; }
.section-head { margin-bottom: 1.5rem; }
.section-head h1 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); letter-spacing: -0.03em; }
.prose p { max-width: 70ch; line-height: 1.7; }

/* Pricing */
.price-options { display: grid; gap: .5rem; }
.price-option {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: .4rem; padding: .85rem 1rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); text-decoration: none; color: var(--ink);
  transition: border-color .15s var(--ease), background-color .15s var(--ease), transform .15s var(--ease);
}
.price-option:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--ink); }
.price-option:active { transform: scale(.99); }
.price-amount { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-per { color: var(--ink-2); font-weight: 600; font-size: .8125rem; }
.price-cta { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent-strong); font-weight: 750; font-size: .8125rem; }
.price-cta .icon { width: 16px; height: 16px; }

/* Sign-up */
.chosen-plan { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding: 1rem 1.25rem; background: var(--grad-soft); border-color: var(--accent-tint-2); }
.chosen-plan > div:first-child { flex: 1; }
.chosen-plan p { margin: 0; }
.chosen-plan-name { font-weight: 800; }
.chosen-plan-price { display: flex; flex-direction: column; align-items: flex-end; }
.auth-panel { padding: 2rem; border-radius: 28px; box-shadow: var(--shadow-2); }
.auth-panel h1 { font-size: 1.4rem; }
.step-icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--grad-soft); color: var(--accent); margin-bottom: 1rem; }
.step-icon .icon { width: 24px; height: 24px; }

/* Seller home: the Live / Pause switch card */
.shop-switch { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.shop-switch p { margin: 0; }
.shop-switch .hint { margin-top: .4rem; }
.shop-state { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; margin: .2rem 0 .3rem !important; }
.shop-state .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 4px var(--surface-sunk); }
.shop-switch.is-live { background: linear-gradient(135deg, var(--ok-bg), var(--surface) 70%); border-color: var(--ok-line); }
.shop-switch.is-live .dot { background: #1aa260; box-shadow: 0 0 0 4px rgb(26 162 96 / .18); }
@media (max-width: 640px) { .shop-switch form, .shop-switch form .btn { width: 100%; } }

/* Admin "viewing as seller" bar */
.impersonation-bar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .55rem 1.25rem; background: var(--note-bg); color: var(--note); border-bottom: 1px solid var(--note-line); font-size: .8125rem; font-weight: 700;
}
.impersonation-bar span { display: inline-flex; align-items: center; gap: .5rem; }
.impersonation-bar .icon { width: 18px; height: 18px; }

/* Plan / payments */
.pay-row { margin-top: 1rem; }
.pay-card { max-width: 520px; }
.pay-card .btn-block { margin-top: 1.25rem; }
.pay-amount { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.plan-grid.compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: .85rem; }
.plan-option { border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; background: var(--surface-soft); }
.plan-option h3 { margin: 0 0 .2rem; }
.plan-option p { margin: 0 0 .75rem; }

@media (max-width: 480px) { .summary { grid-template-columns: 1fr; } .summary dd { overflow-wrap: anywhere; } }

/* ================================================================ M2b: website blocks, blog, editor */
.site-nav-link[aria-current="page"] { color: var(--accent); }
.site-foot-text { margin: .25rem 0 0; }
.danger-text { color: var(--bad) !important; }
.input-sm { min-height: 38px; padding: .45rem .7rem; font-size: .8125rem; }
.input-lg { font-size: 1.125rem; font-weight: 700; }
.btn-icon { min-height: 36px; width: 36px; padding: 0; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Public blocks */
.cms-page { display: grid; gap: 0; }
.block { padding: 2.75rem 0; }
.block + .block { border-top: 1px solid transparent; }
.block-title { font-size: clamp(1.35rem, 3vw, 1.85rem); letter-spacing: -0.03em; margin-bottom: .6rem; }
.block-intro { color: var(--ink-2); max-width: 62ch; font-size: 1rem; margin-bottom: 1.5rem; }
.block-hero { padding-top: 3.5rem; }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
.block-hero.has-image .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
@media (max-width: 800px) { .block-hero.has-image .hero-grid { grid-template-columns: 1fr; } }
.hero-title { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.06; letter-spacing: -0.04em; margin-bottom: 1rem; max-width: 18ch; }
.hero-img { width: 100%; height: auto; border-radius: 28px; box-shadow: var(--shadow-2); }
.feature-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.feature-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.35rem; }
.feature-item h3 { margin: .75rem 0 .35rem; }
.feature-item p { margin: 0; color: var(--ink-2); }
.feature-num { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--grad-soft); color: var(--accent-strong); font-weight: 800; font-size: .875rem; }
.steps-list { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 1rem; }
.steps-list li { counter-increment: s; position: relative; padding: 1.25rem 1.25rem 1.25rem 1.25rem; border-radius: var(--r-lg); background: var(--surface-soft); }
.steps-list li::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; font-size: .8125rem; margin-bottom: .75rem; }
.steps-list h3 { margin: 0 0 .3rem; }
.steps-list p { margin: 0; color: var(--ink-2); }
.quote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.quote-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.35rem; display: flex; flex-direction: column; gap: 1rem; }
.quote-card blockquote { margin: 0; font-size: 1rem; }
.quote-card blockquote p { margin: 0; }
.quote-card figcaption { display: flex; flex-direction: column; font-size: .8125rem; color: var(--ink-2); }
.quote-card figcaption strong { color: var(--ink); }
.faq-list { display: grid; gap: .6rem; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.faq-item summary { cursor: pointer; list-style: none; padding: 1rem 1.15rem; font-weight: 750; display: flex; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--accent); transition: transform .2s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer { padding: 0 1.15rem 1rem; color: var(--ink-2); }
.faq-answer p { margin: 0; }
.cta-panel { background: var(--grad); color: #fff; border-radius: 28px; padding: clamp(1.75rem, 5vw, 3rem); text-align: center; box-shadow: var(--shadow-pop); }
.cta-panel h2 { color: #fff; font-size: clamp(1.4rem, 3.5vw, 2rem); letter-spacing: -0.03em; }
.cta-panel p { color: rgb(255 255 255 / .9); max-width: 50ch; margin: 0 auto 1.25rem; }
.cta-btn { background: #fff; color: var(--accent-strong); }
.cta-btn:hover { background: #fff; color: var(--ink); transform: translateY(-1px); }
.block-image figure { margin: 0 auto; }
.block-img { width: 100%; height: auto; border-radius: var(--r-lg); }
.block-image figcaption { color: var(--ink-3); font-size: .8125rem; margin-top: .5rem; text-align: center; }
.prose h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: -0.03em; }
.prose h2 { font-size: 1.3rem; margin-top: 1.75rem; }
.prose h3 { font-size: 1.1rem; margin-top: 1.4rem; }
.prose ul, .prose ol { padding-left: 1.3rem; max-width: 70ch; }
.prose li { margin: .3rem 0; }
.prose blockquote { margin: 1.25rem 0; padding: .75rem 1.1rem; border-radius: var(--r-sm); background: var(--surface-soft); color: var(--ink-2); }
.prose blockquote p { margin: 0; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r); }
.prose figure { margin: 1.5rem 0; }
.prose figcaption { color: var(--ink-3); font-size: .8125rem; margin-top: .4rem; }
.prose hr { margin: 2rem 0; }

/* ---- Blog */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; }
.post-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.post-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.post-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.post-cover-empty { background: var(--grad-soft); }
.post-card-body { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1.2rem 1.3rem; }
.post-card-body .badge { align-self: flex-start; }
.post-title { font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.015em; color: var(--ink); line-height: 1.3; }
.post-excerpt { color: var(--ink-2); font-size: .875rem; }
.post-meta { color: var(--ink-3); font-size: .8125rem; font-weight: 600; margin: 0; }
.post-head { margin: 1rem 0 1.5rem; }
.post-head h1 { font-size: clamp(1.75rem, 4.5vw, 2.6rem); letter-spacing: -0.035em; line-height: 1.12; margin: .75rem 0 .5rem; }
.post-hero { width: 100%; height: auto; border-radius: var(--r-lg); margin-bottom: 1.5rem; }
.post-body { font-size: 1rem; line-height: 1.75; }
.post-foot { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* ---- Admin editor */
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .editor-layout { grid-template-columns: 1fr; } }
.editor-main, .editor-side { display: grid; gap: 1.25rem; min-width: 0; }
.editor-side .card + .card { margin-top: 0; }
.editor-side { position: sticky; top: 76px; }
@media (max-width: 1100px) { .editor-side { position: static; } }
.editor-actions { display: grid; gap: .5rem; margin-top: 1rem; }
.block-list { display: grid; gap: 1rem; }
.block-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.block-card.is-dragging { opacity: .5; outline: 2px dashed var(--accent); }
.block-card-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem .7rem .6rem; border-bottom: 1px solid var(--line); background: var(--surface-soft); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.block-card-head .chip-icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--grad-soft); color: var(--accent); }
.block-card-head .chip-icon .icon { width: 18px; height: 18px; }
.block-card-title { margin: 0; font-size: .9375rem; flex: 1; }
.block-card-tools, .item-card-tools { display: flex; gap: .15rem; }
.drag-handle { cursor: grab; color: var(--ink-3); display: grid; place-items: center; width: 24px; }
.drag-handle .icon { width: 18px; height: 18px; }
@media (hover: none) { .drag-handle { display: none; } }
.block-card-body { padding: 1rem 1.1rem .25rem; }
.block-items { border-top: 1px dashed var(--line-strong); padding: .9rem 0 1rem; }
.item-list { display: grid; gap: .6rem; margin-bottom: .75rem; }
.item-card { display: flex; gap: .5rem; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r); padding: .75rem .75rem 0; background: var(--surface-soft); }
.item-card-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 .75rem; }
.item-card-fields .field { margin-bottom: .75rem; }
.add-block .inline-form { margin-top: .4rem; }
.media-field { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.media-thumb { width: 96px; height: 64px; object-fit: cover; border-radius: var(--r-xs); border: 1px solid var(--line); }
.md-bar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .35rem; border: 1.5px solid var(--line-strong); border-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--surface-soft); }
.md-btn { min-height: 32px; padding: 0 .6rem; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--ink-2); font: 700 .8125rem var(--font); cursor: pointer; }
.md-btn:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
.md-btn:disabled { opacity: .4; cursor: default; }
.md-preview-toggle { margin-left: auto; color: var(--accent-strong); }
.md-bar + .md-input, .md-bar + .md-input + .md-preview { border-top-left-radius: 0; border-top-right-radius: 0; }
.md-input { font-family: var(--mono); font-size: .8125rem; line-height: 1.6; }
.md-preview { border: 1.5px solid var(--line-strong); border-radius: 0 0 var(--r-sm) var(--r-sm); padding: 1rem; min-height: 200px; background: var(--surface); }
.media-dialog { max-width: 760px; }
.media-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.media-dialog-head h2 { margin: 0; }
.media-upload { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1rem 0; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; max-height: 55vh; overflow-y: auto; }
.media-tile { padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-soft); cursor: pointer; aspect-ratio: 1; }
.media-tile:hover, .media-tile:focus-visible { border-color: var(--accent); }
.media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-library { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
.media-item { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.media-item > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--surface-soft); }
.media-item-body { padding: .75rem; display: grid; gap: .5rem; }
.media-item-body p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-row { display: flex; flex-wrap: wrap; gap: 0 .75rem; }
.link-row .field:first-child { flex: 0 1 220px; }
.message-list li.is-new .timeline-title { color: var(--accent-strong); }

/* ================================================================ M3 · Products (seller panel) */
.card.narrow { max-width: 760px; }
.text-danger { color: var(--bad); font-weight: 700; }
.select-sm { min-height: 38px; padding: .4rem 2.2rem .4rem .7rem; font-size: .8125rem; background-position: right .6rem center; }
.input-date { max-width: 220px; }
.chip-lg { width: 56px; height: 56px; border-radius: 18px; display: inline-grid; place-items: center; background: var(--grad-soft); color: var(--accent); margin-bottom: .5rem; }
.chip-lg .icon { width: 26px; height: 26px; }
.input-suffix { display: flex; }
.input-suffix .input { border-radius: var(--r-sm) 0 0 var(--r-sm); min-width: 0; }
.input-suffix .select { width: auto; flex: none; border-left: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; background-color: var(--surface-soft); }
.step-num { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: .55rem; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-weight: 800; font-size: .8125rem; flex: none; }
fieldset.sub-panel { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-soft); padding: .9rem 1rem .25rem; margin: 0 0 1.1rem; min-width: 0; }
fieldset.sub-panel legend { font-weight: 800; font-size: .875rem; padding: 0 .4rem; }

/* Type picker (new product) */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1rem; }
.type-card { display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
.type-card:hover { transform: translateY(-2px); border-color: var(--accent-tint-2); box-shadow: var(--shadow-2); color: var(--ink); }
.type-card .chip-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--grad-soft); color: var(--accent); margin-bottom: .35rem; }
.type-card strong { font-size: 1rem; }
.type-card > span:last-child { color: var(--ink-2); font-size: .8125rem; font-weight: 600; }

/* Editor layout: laptop = sections + sticky side panel; tablet = one column + sticky bar; phone = wizard */
.pe { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1.25rem; align-items: start; }
.pe-main { display: grid; gap: 1.25rem; min-width: 0; }
.pe-main > .card + .card { margin-top: 0; }
.pe-step h2 { display: flex; align-items: center; scroll-margin-top: 90px; }
.pe-step h2:focus { outline: none; }
.pe-step[hidden] { display: none; }
.pe-side { position: sticky; top: 76px; display: grid; gap: 1rem; }
.pe-summary { padding: 1rem; }
.pe-sum-media { aspect-ratio: 1; border-radius: var(--r); background: var(--surface-soft) center / cover no-repeat; margin-bottom: .75rem; }
.pe-sum-media.is-empty { background-image: var(--grad-soft); }
.pe-sum-name { font-weight: 800; margin: 0; overflow-wrap: anywhere; }
.pe-sum-price { margin: .15rem 0 .5rem; font-weight: 700; color: var(--ink-2); }
.pe-sum-steps { list-style: none; margin: 0; padding: .5rem 0 0; border-top: 1px solid var(--line); counter-reset: s; }
.pe-sum-steps li { counter-increment: s; }
.pe-sum-steps a { display: flex; gap: .6rem; align-items: center; padding: .35rem 0; font-weight: 700; font-size: .875rem; color: var(--ink-2); text-decoration: none; }
.pe-sum-steps a::before { content: counter(s); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunk); font-size: .75rem; }
.pe-sum-steps a:hover { color: var(--accent-strong); }
.pe-bar { display: grid; gap: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .75rem; box-shadow: var(--shadow-2); }
.pe-actions { display: grid; gap: .5rem; }
.pe-wizard-nav { display: none; }
.danger-zone { margin-top: 1.25rem; }

@media (max-width: 1100px) {
  .pe { grid-template-columns: minmax(0, 1fr); }
  .pe-side { display: contents; }
  .pe-summary { display: none; }
  .pe-bar { position: sticky; bottom: .75rem; z-index: 5; }
  .pe-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .pe-bar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + .5rem); }
}
@media (max-width: 640px) {
  .pe-bar { padding: .6rem; border-radius: 20px; }
  .pe.is-wizard .pe-wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
  .pe-wizard-nav [data-wizard-label] { text-align: center; font-weight: 700; }
  .pe-wizard-nav .btn { min-width: 84px; }
  .pe-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .pe-actions .btn { padding-inline: .6rem; }
  /* New product: save buttons appear on the last step; existing products can save from any step. */
  .pe.is-wizard.is-new:not(.at-last) .pe-actions { display: none; }
  .pe.is-wizard.at-last [data-wizard-next] { visibility: hidden; }
}

/* Veg / non-veg marks (Indian food labelling) */
.food-marks { display: flex; flex-wrap: wrap; gap: .5rem; }
.food-mark { position: relative; display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 1rem 0 .8rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); font-weight: 700; font-size: .875rem; cursor: pointer; }
.food-mark input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.food-mark:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 3px var(--surface-sunk); }
.food-mark:has(input:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.fm-dot { width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 3px; display: grid; place-items: center; }
.fm-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.food-veg .fm-dot { color: #15803d; }
.food-nonveg .fm-dot { color: #7c2d12; }
.food-nonveg .fm-dot::after { border-radius: 0; width: 0; height: 0; background: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid currentColor; }
.food-egg .fm-dot { color: #b45309; }

/* Photos */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .75rem; margin: .75rem 0; }
.gallery:empty { display: none; }
.g-tile { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--surface-sunk); border: 2px solid transparent; touch-action: pan-y; user-select: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.g-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.g-tile.is-ig { border-color: var(--accent); }
.g-tile.is-dragging { z-index: 3; opacity: .9; box-shadow: var(--shadow-2); transition: none; cursor: grabbing; }
.g-tile.drop-target { border-color: var(--focus); border-style: dashed; }
.g-tile.is-uploading img { opacity: .45; filter: blur(1px); }
.g-cover { position: absolute; left: .45rem; bottom: .45rem; padding: .1rem .5rem; border-radius: var(--r-pill); background: rgb(255 255 255 / .92); color: var(--ink); font-size: .6875rem; font-weight: 800; }
.g-ig { position: absolute; top: .4rem; right: .4rem; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; background: rgb(34 27 48 / .35); color: #fff; font: 800 .8125rem var(--font); cursor: pointer; box-shadow: 0 1px 4px rgb(0 0 0 / .25); }
.g-ig[aria-pressed="true"] { background: var(--grad); }
.g-ig:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.g-tools { position: absolute; left: 0; right: 2.6rem; top: 0; display: flex; gap: 2px; padding: .35rem; opacity: 0; pointer-events: none; transition: opacity .15s var(--ease); }
.g-tools > * { pointer-events: auto; }
.g-tile:hover .g-tools, .g-tile:focus-within .g-tools { opacity: 1; }
@media (hover: none) {
  .g-tools { opacity: 1; top: auto; bottom: 0; right: 0; justify-content: flex-end; padding: .35rem; background: linear-gradient(transparent, rgb(34 27 48 / .45)); }
  .g-cover { bottom: auto; top: .45rem; }
}
.g-btn { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 9px; background: rgb(255 255 255 / .94); color: var(--ink); cursor: pointer; padding: 0; }
.g-btn .icon { width: 16px; height: 16px; }
.g-btn:disabled { opacity: .35; cursor: default; }
.g-btn.flip .icon { transform: rotate(180deg); }
.g-remove { color: var(--bad); }
.g-drag { cursor: grab; touch-action: none; margin-right: auto; }
@media (hover: hover) { .g-drag { display: none; } }
.g-progress { position: absolute; left: .6rem; right: .6rem; bottom: .6rem; height: 6px; border-radius: 3px; background: rgb(255 255 255 / .8); overflow: hidden; }
.g-progress span, .progress span { display: block; height: 100%; width: var(--p, 0%); background: var(--grad); transition: width .2s linear; }
.dropzone { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; border: 2px dashed var(--line-strong); border-radius: var(--r); background: var(--surface-soft); cursor: pointer; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.dropzone > span { display: grid; gap: .1rem; }
.dropzone .icon { width: 28px; height: 28px; color: var(--accent); flex: none; }
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-tint); }
.dropzone:has(input:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.dropzone[hidden] { display: none; }
[data-upload-status].error, [data-video-status].error { color: var(--bad); font-weight: 700; }

/* Video */
.video-box { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1rem; }
.video-box h3 { font-size: .9375rem; margin: 0 0 .75rem; }
.video-current { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: .75rem; }
.video-current[hidden] { display: none; }
.video-current video { width: 100%; max-height: 320px; border-radius: var(--r); background: #000; }
.video-notes { margin: .25rem 0 .5rem; padding-left: 1.1rem; color: var(--warn); }
.video-notes:empty { display: none; }
.progress { height: 8px; border-radius: 4px; background: var(--surface-sunk); overflow: hidden; margin: .75rem 0 .25rem; }
.progress[hidden] { display: none; }
@media (max-width: 480px) { .video-current { grid-template-columns: 1fr; } .video-current video { max-height: 260px; } }

/* Price, stock, variants */
.stock-row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: flex-start; }
.stock-row > .check { margin-top: 1.8rem; }
.stock-row > .check:first-child { margin-top: .4rem; flex-basis: 100%; }
.stock-row [hidden] { display: none; }
.variants-panel { border-top: 1px solid var(--line); margin-top: .5rem; padding-top: 1rem; }
.variants-panel h3 { font-size: .9375rem; margin: 0 0 .25rem; }
.opt-row { display: flex; gap: .75rem; align-items: flex-end; }
.opt-row .field:first-child { flex: 0 0 170px; }
.opt-row .field.grow { flex: 1; min-width: 0; }
.opt-row .opt-remove { margin-bottom: 1.1rem; min-height: 48px; }
.variant-table-wrap { margin-top: 1rem; overflow-x: auto; }
.variant-table-wrap[hidden] { display: none; }
.variant-table { min-width: 640px; }
.variant-table caption { text-align: left; padding-bottom: .5rem; caption-side: top; }
.variant-table th[scope="row"] { font-weight: 800; white-space: nowrap; }
.variant-table td, .variant-table th { padding: .45rem .4rem; vertical-align: middle; }
.variant-table .input-sm { min-width: 80px; }
.variant-table input[type="checkbox"] { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .opt-row { flex-wrap: wrap; gap: 0 .5rem; padding-bottom: .5rem; border-bottom: 1px dashed var(--line); margin-bottom: .75rem; }
  .opt-row .field:first-child { flex: 1 1 100%; }
  .variant-table { min-width: 0; }
  .variant-table caption { display: block; }
  .table.stack-sm.variant-table th[scope="row"] { display: block; padding: .3rem 0; }
  .table.stack-sm.variant-table td { align-items: center; }
  .table.stack-sm.variant-table td::before { grid-row: 1; padding-top: 0; align-self: center; }
  .table.stack-sm.variant-table .input-sm, .table.stack-sm.variant-table .select-sm { width: 100%; }
}

/* Customer questions */
.q-row { display: flex; flex-wrap: wrap; gap: 0 .75rem; align-items: flex-end; padding: .75rem .75rem 0; margin-bottom: .75rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-soft); }
.q-row .field { margin-bottom: .75rem; }
.q-row .field.grow { flex: 1 1 220px; }
.q-row .q-max, .q-row .q-extra { flex: 0 0 120px; }
.q-row .q-max[hidden] { display: none; }
.q-row .q-req { margin: 0 0 1.4rem; }
.q-row [data-q-remove] { margin-bottom: .75rem; }

/* Instagram */
.ig-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; }
@media (max-width: 800px) { .ig-layout { grid-template-columns: 1fr; } .ig-preview { max-width: 340px; width: 100%; margin-inline: auto; } }
.ig-preview { margin: 0; border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; box-shadow: var(--shadow-1); }
.igp-head { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; font-size: .8125rem; }
.igp-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--grad); box-shadow: inset 0 0 0 2px #fff; }
.igp-media { position: relative; aspect-ratio: 4 / 5; background: var(--surface-sunk); display: grid; place-items: center; }
.igp-slide { position: absolute; inset: 0; background-repeat: no-repeat; }
.igp-empty { color: var(--ink-3); font-size: .8125rem; font-weight: 700; padding: 1rem; text-align: center; }
.igp-count { position: absolute; top: .5rem; right: .5rem; padding: .1rem .5rem; border-radius: var(--r-pill); background: rgb(0 0 0 / .6); color: #fff; font-size: .75rem; font-weight: 700; }
.igp-dots { display: flex; justify-content: center; align-items: center; gap: 2px; min-height: 26px; flex-wrap: wrap; }
.igp-dot { width: 24px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.igp-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; }
.igp-dot[aria-current="true"]::before { background: #0095f6; }
.igp-reel { margin-left: .4rem; }
.igp-caption { padding: 0 .75rem .8rem; font-size: .8125rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.igp-tags { color: #00376b; }

/* Crop dialog */
.crop-dialog { max-width: 560px; }
.crop-dialog .seg-radio { margin-bottom: 1rem; }
.crop-stage { position: relative; width: fit-content; max-width: 100%; margin: 0 auto 1rem; touch-action: none; user-select: none; overflow: hidden; border-radius: var(--r-xs); }
.crop-stage img { display: block; max-width: 100%; max-height: 55vh; }
.crop-box { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgb(20 12 30 / .55); cursor: move; }
.crop-box::before, .crop-box::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: solid rgb(255 255 255 / .35); }
.crop-box::before { border-width: 0 1px; left: 33.33%; right: 33.33%; }
.crop-box::after { border-width: 1px 0; top: 33.33%; bottom: 33.33%; }
.crop-box:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
input[type="range"] { width: 100%; accent-color: var(--accent); }

/* Product list */
.plist { list-style: none; margin: 0; padding: 0; }
.plist-head, .plist-row { display: grid; grid-template-columns: 28px 56px minmax(0, 1fr) 150px 170px 120px; gap: .9rem; align-items: center; }
.plist-head { padding: .25rem .5rem .6rem; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.plist-head input { width: 18px; height: 18px; }
.plist-row { padding: .7rem .5rem; border-bottom: 1px solid var(--line); border-radius: var(--r-sm); transition: background-color .15s var(--ease); }
.plist-row:last-child { border-bottom: 0; }
.plist-row:hover, .plist-row.is-selected { background: var(--surface-soft); }
.plist-check input { width: 18px; height: 18px; cursor: pointer; }
.plist-thumb { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background: var(--surface-sunk); display: grid; place-items: center; color: var(--ink-3); }
.plist-thumb img { width: 100%; height: 100%; object-fit: cover; }
.plist-main { display: grid; gap: .1rem; min-width: 0; }
.plist-main .row-link { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist-price { font-weight: 700; }
.plist-stock { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.plist-status { display: flex; flex-wrap: wrap; gap: .3rem; }
.input-stock { width: 84px; min-height: 38px; padding: .35rem .6rem; text-align: right; }
.input-stock.is-saving { opacity: .6; }
.input-stock.is-saved { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.plist-row.is-out .plist-thumb img { opacity: .55; }
.bulk-bar { position: sticky; top: 70px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .55rem .75rem; margin-bottom: .5rem; border-radius: var(--r); background: var(--accent-tint); border: 1px solid var(--accent-tint-2); }
.bulk-bar[hidden] { display: none; }
.bulk-bar .select { width: auto; }
.stock-status:empty { display: none; }
.fab { display: none; }
@media (max-width: 900px) {
  .plist-head { display: none; }
  .plist-row { grid-template-columns: 22px 56px minmax(0, 1fr) auto; grid-template-areas: "c t m p" "c t s st"; gap: .15rem .75rem; padding: .75rem .25rem; }
  .plist-row .plist-check { grid-area: c; align-self: center; }
  .plist-row .plist-thumb { grid-area: t; align-self: center; }
  .plist-row .plist-main { grid-area: m; }
  .plist-row .plist-price { grid-area: p; text-align: right; font-size: .875rem; }
  .plist-row .plist-stock { grid-area: s; }
  .plist-row .plist-status { grid-area: st; justify-content: flex-end; }
  .bulk-bar { top: 64px; }
  .fab { position: fixed; right: 1rem; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 1rem); z-index: 20; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--grad); color: #fff; box-shadow: var(--shadow-pop); }
  .fab .icon { width: 26px; height: 26px; }
}

/* Categories */
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li { display: flex; align-items: center; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.cat-list li:last-child { border-bottom: 0; }
.cat-list .inline-form { flex: 1; align-items: center; flex-wrap: nowrap; }
.cat-list .input { min-width: 0; }
.inline-form > .input { flex: 1 1 220px; width: auto; }
@media (max-width: 480px) { .cat-list .inline-form { flex-wrap: wrap; } .cat-list .muted { display: none; } }

/* Shop settings */
.day-pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.pill-check { position: relative; }
.pill-check input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill-check span { display: inline-grid; place-items: center; min-width: 56px; min-height: 44px; padding: 0 .9rem; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--surface); font-weight: 700; font-size: .875rem; color: var(--ink-2); }
.pill-check input:checked + span { background: var(--grad); border-color: transparent; color: #fff; }
.pill-check input:focus-visible + span { outline: 2.5px solid var(--focus); outline-offset: 2px; }
fieldset.field { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.narrow-grid { max-width: 460px; }
.slot-list { display: grid; gap: .5rem; margin-bottom: .75rem; }
/* grid, not flex: Safari draws time inputs wide and ignores flex shrinking, which pushed the row off small screens */
.slot-row { display: grid; grid-template-columns: minmax(0, 150px) auto minmax(0, 150px) auto; align-items: center; gap: .6rem; }
.slot-row .input { width: 100%; min-width: 0; }
@media (max-width: 480px) { .slot-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; } .slot-row .input { padding-inline: .6rem; } }
.slot-row > span { color: var(--ink-3); font-weight: 700; font-size: .875rem; }
.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 0; padding: 0; }
.chip-list:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .25rem .2rem .75rem; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent-strong); font-weight: 700; font-size: .8125rem; }
.chip-x { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.chip-x:hover { background: #fff; }
.sticky-actions { position: sticky; bottom: 1rem; display: flex; justify-content: flex-end; padding: .75rem; border-radius: var(--r-lg); background: rgb(255 255 255 / .92); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
@media (max-width: 900px) { .sticky-actions { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + .5rem); } .sticky-actions .btn { width: 100%; } }

/* Team */
.role-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: .75rem; }
.role-legend li { display: grid; gap: .15rem; }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .6rem; }
.choice-card { position: relative; display: block; padding: .85rem 1rem; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface); cursor: pointer; }
.choice-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice-card > span { display: grid; gap: .2rem; }
.choice-card:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 3px var(--accent-tint-2); }
.choice-card:has(input:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 2px; }

/* Admin: seller products */
.admin-prod { display: flex; align-items: center; gap: .75rem; }
.admin-prod .plist-thumb { width: 44px; height: 44px; border-radius: 12px; flex: none; }
details.row-menu { position: relative; }
details.row-menu > summary { list-style: none; }
details.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu-panel { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 10; width: 260px; display: grid; gap: .5rem; padding: .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2); }
.row-menu-panel label { font-weight: 700; font-size: .8125rem; }
@media (max-width: 640px) { .row-menu-panel { position: static; width: 100%; margin-top: .5rem; } }
.variant-table .select-sm { min-width: 118px; }
@media (min-width: 1101px) { .pe + .danger-zone { margin-right: calc(290px + 1.25rem); } }
@media (max-width: 900px) { .page-head .btn-row a.btn-primary[href$="/seller/products/new"] { display: none; } .plist { padding-bottom: 4.5rem; } }
@media (max-width: 640px) { .pe-wizard-nav [data-wizard-label] { font-size: .75rem; line-height: 1.3; } .pe-wizard-nav .btn { min-width: 0; padding-inline: .9rem; } }

/* ================================================================ M4 · Storefront (customer shop pages) */
.store { background: var(--canvas); display: flex; flex-direction: column; min-height: 100dvh; }
.store ::selection { background: var(--accent-tint-2); color: var(--ink); }
.store input, .store textarea { caret-color: var(--accent); }
.store-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 700px) { .store-wrap { padding-inline: 24px; } }
.store-main { flex: 1 0 auto; padding-bottom: 3rem; }
.store-main:focus { outline: none; }
.store-flashes { padding-top: 1rem; }
.store-flashes .alert { margin-bottom: .5rem; }

.store-announce { margin: 0; padding: .5rem 1rem; background: var(--accent-tint); color: var(--accent-strong); font-size: .8125rem; font-weight: 750; text-align: center; letter-spacing: .005em; }
.store-bar { position: sticky; top: 0; z-index: 30; background: rgb(255 255 255 / .96); border-bottom: 1px solid var(--line); }
.store-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 60px; }
.store-brand { display: flex; align-items: center; gap: .6rem; min-width: 0; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: -0.015em; }
.store-brand:hover { color: var(--ink); }
.store-brand-logo { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: .75rem; font-weight: 800; }
.store-brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.store-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-bar-actions { display: flex; gap: .25rem; }
.store-icon-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background-color .15s var(--ease); }
.store-icon-btn:hover { background: var(--surface-sunk); color: var(--ink); }
.store-icon-btn .icon { width: 22px; height: 22px; }
.store-cart-count { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--accent-strong); color: #fff; font-size: .6875rem; font-weight: 800; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.store-cart-btn.bump .store-cart-count { animation: bump .45s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
.store-closed { background: var(--warn-bg); border-bottom: 1px solid var(--warn-line); color: var(--warn); }
.store-closed .store-wrap { display: flex; gap: .6rem; align-items: flex-start; padding-block: .7rem; }
.store-closed p { margin: 0; font-size: .875rem; font-weight: 600; }
.store-closed .icon { flex: none; margin-top: 2px; }
.store-back { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; color: var(--ink-2); font-weight: 700; font-size: .875rem; text-decoration: none; }
.store-back:hover { color: var(--accent-strong); }
.store-back .icon { width: 18px; height: 18px; }

/* ---- Profile (Instagram-style shop header) */
.sp-profile { padding-bottom: .5rem; }
.sp-banner { height: 132px; background: var(--grad-soft); overflow: hidden; }
.sp-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-id { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: end; }
.sp-logo { width: 92px; height: 92px; margin-top: -46px; border-radius: 50%; padding: 3px; background: var(--grad); box-shadow: var(--shadow-2); }
.sp-logo img, .sp-logo > span { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; object-fit: cover; display: grid; place-items: center; background: var(--surface); color: var(--accent-strong); font-weight: 800; font-size: 1.5rem; }
.sp-meta { grid-column: 1 / -1; padding-top: .75rem; min-width: 0; }
.sp-meta h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.sp-about { margin: .35rem 0 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; max-width: 60ch; white-space: pre-line; }
.sp-counts { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .6rem 0 0; padding: 0; color: var(--ink-2); font-size: .875rem; font-weight: 600; }
.sp-counts strong { color: var(--ink); font-weight: 800; }
.sp-counts a { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent-strong); font-weight: 700; text-decoration: none; }
.sp-counts .icon { width: 16px; height: 16px; }
.sp-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: .6rem; margin-top: 1rem; }
.sp-actions .btn { min-height: 46px; }
.sp-highlights { margin-top: 1.25rem; }
.sp-highlights ul { list-style: none; display: flex; gap: .9rem; margin: 0 -16px; padding: .25rem 16px .5rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.sp-highlights ul::-webkit-scrollbar { display: none; }
.sp-highlights li { flex: none; scroll-snap-align: start; }
.sp-highlights a { display: grid; justify-items: center; gap: .4rem; width: 76px; color: var(--ink); text-decoration: none; }
.sp-hl-ring { width: 72px; height: 72px; border-radius: 50%; padding: 2.5px; background: var(--accent-tint-2); transition: transform .2s var(--ease); }
.sp-hl-ring img, .sp-hl-ring .icon { width: 100%; height: 100%; border-radius: 50%; border: 2.5px solid var(--canvas); object-fit: cover; background: var(--surface); }
.sp-hl-ring .icon { padding: 18px; color: var(--accent); }
.sp-highlights a:hover .sp-hl-ring { transform: scale(1.05); }
.sp-hl-name { max-width: 100%; font-size: .75rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) {
  .sp-profile { padding-top: 1rem; }
  .sp-banner { max-width: 1132px; margin-inline: auto; height: 280px; border-radius: 28px; }
  .sp-banner.is-empty { height: 160px; }
  .sp-id { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1.5rem; padding-inline: 48px; }
  .sp-logo { width: 136px; height: 136px; margin-top: -68px; padding: 4px; }
  .sp-logo img, .sp-logo > span { border-width: 4px; font-size: 2rem; }
  .sp-meta { grid-column: auto; padding-top: 1rem; }
  .sp-meta h1 { font-size: 1.875rem; }
  .sp-actions { grid-column: auto; display: flex; margin: 0; }
  .sp-highlights { padding-inline: 48px; }
  .sp-highlights ul { margin: 0; padding-inline: 0; gap: 1.25rem; }
  .sp-highlights a { width: 88px; }
  .sp-hl-ring { width: 84px; height: 84px; }
}

/* ---- Spotlight */
.sp-spot { margin-top: 1.25rem; }
.sp-spot-card { display: grid; background: var(--surface); border-radius: 24px; overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: var(--shadow-2); }
.sp-spot-card:hover { color: var(--ink); }
.sp-spot-media { position: relative; aspect-ratio: 4 / 5; max-height: 72vh; background: var(--surface-sunk); overflow: hidden; }
.sp-spot-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.sp-spot-card:hover .sp-spot-media img { transform: scale(1.03); }
.sp-spot-tag { position: absolute; left: 14px; top: 14px; padding: .3rem .75rem; border-radius: var(--r-pill); background: rgb(255 255 255 / .94); color: var(--ink); font-size: .75rem; font-weight: 800; box-shadow: var(--shadow-1); }
.sp-spot-body { display: grid; gap: .45rem; padding: 1.1rem 1.2rem 1.3rem; }
.sp-spot-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.sp-spot-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.sp-spot-price strong { font-size: 1.125rem; }
.sp-spot-price s { color: var(--ink-3); font-weight: 600; }
.sp-spot-cta { display: inline-flex; align-items: center; justify-self: start; gap: .35rem; margin-top: .5rem; min-height: 44px; padding: 0 1.2rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 800; box-shadow: var(--shadow-1); }
.sp-spot-note { color: var(--warn); font-size: .875rem; font-weight: 750; }
.sp-spot-body > * { max-width: 34ch; }
.sp-spot-cta .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.sp-spot-card:hover .sp-spot-cta .icon { transform: translateX(4px); }
@media (min-width: 900px) {
  .sp-spot { margin-top: 2rem; }
  .sp-spot-card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border-radius: 28px; }
  .sp-spot-media { aspect-ratio: 5 / 4; max-height: 520px; }
  .sp-spot-body { align-content: center; padding: 3rem; gap: .8rem; }
  .sp-spot-name { font-size: clamp(1.75rem, 2.6vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.12; }
  .sp-spot-price strong { font-size: 1.375rem; }
}
.pill-off { display: inline-flex; align-items: center; padding: .1rem .55rem; border-radius: var(--r-pill); background: var(--ok-bg); color: var(--ok); font-size: .8125rem; font-weight: 800; }

/* ---- Category rows */
.sp-rail { margin-top: 2rem; }
.sp-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.sp-rail-head h2 { margin: 0; font-size: 1.1875rem; letter-spacing: -0.02em; }
.sp-rail-head a { display: inline-flex; align-items: center; gap: .15rem; font-size: .875rem; font-weight: 750; color: var(--accent-strong); text-decoration: none; }
.sp-rail-head a .icon { width: 16px; height: 16px; }
.sp-rail-scroll { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
.sp-rail-scroll::-webkit-scrollbar { display: none; }
.sp-rail-list { list-style: none; display: flex; gap: 12px; margin: 0; padding: 4px 16px 16px; width: max-content; }
.sp-rail-list > li { width: 42vw; max-width: 220px; scroll-snap-align: start; }
@media (min-width: 700px) {
  .sp-rail-scroll { scroll-padding-inline: max(24px, calc((100vw - 1180px) / 2 + 24px)); }
  .sp-rail-list { gap: 20px; padding-inline: max(24px, calc((100vw - 1180px) / 2 + 24px)); }
  .sp-rail-list > li { width: 220px; }
}

/* ---- Product cards */
.pc-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
@media (min-width: 700px) { .pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1040px) { .pc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.pc { height: 100%; }
.pc-link { display: flex; flex-direction: column; height: 100%; background: var(--surface); border-radius: 18px; overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.pc-link:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.pc-link:active { transform: scale(.985); }
.pc-media { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--surface-sunk); overflow: hidden; }
.pc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-noimg { display: grid; place-items: center; height: 100%; color: var(--ink-3); }
.pc-flag { position: absolute; left: 8px; top: 8px; padding: .15rem .5rem; border-radius: var(--r-pill); background: rgb(255 255 255 / .95); color: var(--ok); font-size: .6875rem; font-weight: 800; box-shadow: var(--shadow-1); }
.pc-flag-out { color: var(--ink-2); }
.pc.is-out .pc-media img { opacity: .55; filter: saturate(.6); }
.pc-food { position: absolute; right: 8px; top: 8px; padding: 3px; border-radius: 6px; background: #fff; box-shadow: var(--shadow-1); display: grid; }
.pc-food .fm-dot { width: 14px; height: 14px; border-width: 1.5px; }
.pc-food .fm-dot::after { width: 6px; height: 6px; }
.pc-food.food-veg { color: #15803d; } .pc-food.food-nonveg { color: #7c2d12; } .pc-food.food-egg { color: #b45309; }
.pc-food.food-nonveg .fm-dot::after { border-radius: 0; width: 0; height: 0; background: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid currentColor; }
.pc-body { display: grid; gap: .2rem; padding: .65rem .75rem .8rem; }
.pc-name { font-size: .875rem; font-weight: 650; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .4rem; }
.pc-price strong { font-size: .9375rem; font-weight: 800; }
.pc-price s { color: var(--ink-3); font-size: .75rem; font-weight: 600; }
.pc-from { color: var(--ink-3); font-size: .75rem; font-weight: 700; }
.pc-note { color: var(--warn); font-size: .75rem; font-weight: 750; }

/* ---- Catalogue + sticky toolbar */
.sp-catalogue { margin-top: 2rem; }
.sp-catalogue.is-browsing { margin-top: 0; }
.sp-toolbar { position: sticky; top: 60px; z-index: 20; background: var(--canvas); border-bottom: 1px solid transparent; padding-block: .6rem; }
.sp-toolbar-inner { display: grid; gap: .6rem; }
.sp-search { position: relative; }
.sp-search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.sp-search input { width: 100%; min-height: 46px; padding: .6rem 1rem .6rem 2.6rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); font: 600 .9375rem var(--font); color: var(--ink); }
.sp-search input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 16%, transparent); }
.sp-search input::placeholder { color: var(--ink-3); font-weight: 500; }
.sp-chips { display: flex; gap: .45rem; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
.sp-chips::-webkit-scrollbar { display: none; }
.sp-chips a { flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 1rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-2); font-size: .875rem; font-weight: 700; text-decoration: none; transition: background-color .15s var(--ease), color .15s var(--ease); }
.sp-chips a:hover { color: var(--ink); border-color: var(--ink-3); }
.sp-chips a[aria-current="true"] { background: var(--grad); border-color: transparent; color: #fff; }
@media (min-width: 900px) {
  .sp-toolbar-inner { grid-template-columns: 320px minmax(0, 1fr); align-items: center; }
  .sp-toolbar-inner:has(.store-back) { grid-template-columns: auto 320px minmax(0, 1fr); }
  .sp-chips { margin: 0; padding: 0; }
}
.sp-cat-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 1rem 0 1rem; }
.sp-cat-head h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.1875rem; letter-spacing: -0.02em; }
.sp-cat-count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 .45rem; border-radius: var(--r-pill); background: var(--surface-sunk); color: var(--ink-2); font-size: .75rem; font-weight: 800; }
.sp-sort .select { width: auto; border-radius: var(--r-pill); }
.sp-empty, .sc-empty, .sc-soon { text-align: center; }
.sp-empty { padding: 3rem 1rem; background: var(--surface); border-radius: 24px; color: var(--ink-2); }
.sp-empty p { margin: 0 auto; max-width: 42ch; }
.sp-empty strong { display: block; color: var(--ink); font-size: 1.0625rem; margin-bottom: .25rem; }
.sp-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }

/* ---- Product page */
.pv { padding-top: .5rem; }
.pv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; min-height: 40px; font-size: .8125rem; font-weight: 650; }
.pv-crumbs a { color: var(--ink-2); text-decoration: none; }
.pv-crumbs a:hover { color: var(--accent-strong); }
.pv-crumbs .icon { width: 14px; height: 14px; color: var(--ink-3); }
.pv-grid { display: grid; gap: 1.25rem; }
.pv-gallery { min-width: 0; margin-inline: -16px; }
.pv-stage { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 5; max-height: 78vh; background: var(--surface-sunk); }
.pv-stage::-webkit-scrollbar { display: none; }
.pv-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.pv-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; display: grid; place-items: center; overflow: hidden; }
.pv-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-video video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.pv-noimg { color: var(--ink-3); }
.pv-thumbs { display: none; }
.pv-dots { display: flex; justify-content: center; gap: 5px; padding: .6rem 0 0; }
.pv-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--line-strong); transition: background-color .2s var(--ease); }
.pv-dots span.on { width: 18px; background: var(--accent); }
.pv-info { min-width: 0; }
.pv-name { margin: 0; font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.2; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.pv-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin: .7rem 0 0; }
.pv-price strong { font-size: 1.625rem; font-weight: 800; letter-spacing: -0.02em; }
.pv-price s { color: var(--ink-3); font-size: 1rem; font-weight: 600; }
.pv-tax { margin: .1rem 0 0; color: var(--ink-3); font-size: .8125rem; font-weight: 600; }
.pv-stock { display: inline-flex; align-items: center; gap: .45rem; margin: .75rem 0 0; font-size: .875rem; font-weight: 750; }
.pv-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pv-stock.is-in { color: var(--ok); } .pv-stock.is-low { color: var(--warn); } .pv-stock.is-out { color: var(--bad); }
.pv-facts { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 0; padding: 0; }
.pv-facts li { display: inline-flex; align-items: center; gap: .45rem; min-height: 34px; padding: .2rem .8rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: .8125rem; font-weight: 700; color: var(--ink); }
.pv-facts .icon { width: 16px; height: 16px; color: var(--accent); }
.pv-facts .pc-food { position: static; padding: 0; box-shadow: none; background: none; }
.pv-buy { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: grid; gap: 1.1rem; }
.pv-opt { border: 0; margin: 0; padding: 0; min-width: 0; }
.pv-opt legend { padding: 0; margin-bottom: .55rem; font-size: .875rem; font-weight: 800; }
.pv-opt legend span { color: var(--ink-2); font-weight: 650; }
.pv-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pv-pill { position: relative; }
.pv-pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pv-pill span { display: inline-grid; place-items: center; min-width: 52px; min-height: 44px; padding: 0 1rem; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); font-size: .9375rem; font-weight: 700; color: var(--ink); transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.pv-pill:hover span { border-color: var(--ink-3); }
.pv-pill input:checked + span { border: 2px solid var(--accent); background: var(--accent-tint); color: var(--accent-strong); }
.pv-pill input:focus-visible + span { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.pv-pill.is-na span { color: var(--ink-3); border-style: dashed; text-decoration: line-through; text-decoration-color: var(--ink-3); }
.pv-question { margin-bottom: 0; }
.pv-extra { margin-left: .4rem; padding: .05rem .45rem; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent-strong); font-size: .75rem; }
.pv-actions { display: flex; gap: .6rem; }
.pv-add { flex: 1; min-height: 52px; font-size: 1rem; }
.pv-buynow { width: 100%; min-height: 50px; }
.pv-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); height: 52px; }
.pv-qty input { width: 40px; border: 0; background: none; text-align: center; font: 800 1rem var(--font); color: var(--ink); -moz-appearance: textfield; }
.pv-qty input::-webkit-outer-spin-button, .pv-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pv-qty input:focus { outline: none; }
.pv-qty:focus-within { border-color: var(--focus); }
.pv-qty-btn { width: 44px; height: 100%; display: grid; place-items: center; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: var(--r-pill); }
.pv-qty-btn:hover:not(:disabled) { background: var(--surface-sunk); }
.pv-qty-btn:disabled { color: var(--ink-3); cursor: default; }
.pv-qty-btn .icon { width: 18px; height: 18px; }
.pv-pin { margin-top: 1.1rem; padding: .9rem 1rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.pv-pin label { display: flex; align-items: center; gap: .4rem; font-weight: 750; font-size: .875rem; margin-bottom: .5rem; }
.pv-pin label .icon { width: 18px; height: 18px; color: var(--accent); }
.pv-pin-row { display: flex; gap: .5rem; }
.pv-pin-row .input { min-height: 44px; }
.pv-pin [data-pin-result] { margin: .5rem 0 0; font-weight: 700; }
.pv-pin .is-ok { color: var(--ok); } .pv-pin .is-bad { color: var(--bad); }
.pv-pin [data-pin-result]:empty { display: none; }
.pv-secondary { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: 1rem; }
.pv-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink-2); font: 700 .875rem var(--font); text-decoration: none; cursor: pointer; }
.pv-link:hover { color: var(--accent-strong); }
.pv-link .icon { width: 18px; height: 18px; }
.pv-about { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.pv-about h2 { font-size: 1.0625rem; margin: 0 0 .6rem; }
.pv-desc { font-size: .9375rem; line-height: 1.7; color: var(--ink); }
.pv-details { display: grid; gap: 0; margin: 1.25rem 0 0; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.pv-details div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-size: .875rem; }
.pv-details div:last-child { border-bottom: 0; }
.pv-details dt { color: var(--ink-3); font-weight: 700; }
.pv-details dd { margin: 0; font-weight: 650; }
.pv-related { margin-top: 2.5rem; }
.pv-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 16px calc(.65rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgb(58 26 84 / .25); animation: rise .25s var(--ease); }
@keyframes rise { from { transform: translateY(100%); } to { transform: none; } }
.pv-bar[hidden] { display: none; }
.pv-bar-price { display: grid; line-height: 1.2; min-width: 0; }
.pv-bar-price strong { font-size: 1.125rem; font-weight: 800; }
.pv-bar-price span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-bar .btn { min-height: 48px; flex: none; }
.pv-zoom { width: min(92vw, 1100px); max-height: 92vh; padding: 0; border: 0; border-radius: 20px; background: #fff; box-shadow: var(--shadow-2); }
.pv-zoom::backdrop { background: rgb(34 27 48 / .55); }
.pv-zoom img { display: block; width: 100%; max-height: 92vh; object-fit: contain; }
.pv-zoom-close { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .95); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-1); }
@media (min-width: 900px) {
  .pv { padding-top: 1rem; }
  .pv-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; align-items: start; }
  .pv-gallery { margin: 0; position: sticky; top: 76px; }
  .pv-stage { border-radius: 24px; max-height: none; cursor: zoom-in; }
  .pv-thumbs { display: flex; gap: .6rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; }
  .pv-thumb { flex: none; width: 72px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: 14px; overflow: hidden; background: var(--surface-sunk); cursor: pointer; display: grid; place-items: center; color: var(--ink-2); }
  .pv-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .pv-thumb[aria-current="true"] { border-color: var(--accent); }
  .pv-thumb:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
  .pv-dots { display: none; }
  .pv-info { padding-top: .5rem; }
  .pv-bar { display: none !important; }
}

/* ---- Cart */
.sc { padding-top: .75rem; }
.sc-head h1 { display: flex; align-items: center; gap: .6rem; margin: .25rem 0 1.25rem; font-size: 1.625rem; letter-spacing: -0.025em; }
.sc-grid { display: grid; gap: 1.25rem; }
.sc-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.sc-line { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: .9rem; padding: .9rem; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-1); }
.sc-line.has-problem { box-shadow: 0 0 0 1.5px var(--bad-line); }
.sc-thumb { width: 76px; height: 95px; border-radius: 14px; overflow: hidden; background: var(--surface-sunk); display: grid; place-items: center; color: var(--ink-3); }
.sc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sc-info { min-width: 0; display: grid; gap: .2rem; align-content: start; }
.sc-name { color: var(--ink); font-weight: 750; text-decoration: none; line-height: 1.3; }
.sc-name:hover { color: var(--accent-strong); }
.sc-variant, .sc-answer { margin: 0; color: var(--ink-2); font-size: .8125rem; font-weight: 600; overflow-wrap: anywhere; }
.sc-answer { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.sc-answer img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.sc-problem { display: flex; align-items: center; gap: .35rem; margin: .2rem 0 0; color: var(--bad); font-size: .8125rem; font-weight: 750; }
.sc-problem .icon { width: 16px; height: 16px; flex: none; }
.sc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .5rem; }
.sc-qty { height: 40px; }
.sc-qty .pv-qty-btn { width: 38px; }
.sc-qty input { width: 34px; font-size: .9375rem; }
.sc-remove { display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; padding: 0; border: 0; background: none; color: var(--ink-2); font: 700 .8125rem var(--font); cursor: pointer; }
.sc-remove:hover { color: var(--bad); }
.sc-remove .icon { width: 16px; height: 16px; }
.sc-total { grid-column: 3; grid-row: 1; margin: 0; font-weight: 800; font-size: .9375rem; text-align: right; }
.sc-total span { display: block; color: var(--ink-3); font-size: .75rem; font-weight: 650; }
.sc-summary { align-self: start; padding: 1.25rem; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-2); }
.sc-summary h2 { margin: 0 0 .75rem; font-size: 1.0625rem; }
.sc-summary dl { margin: 0; display: grid; gap: .45rem; }
.sc-summary dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.sc-summary dt { color: var(--ink-2); font-weight: 650; }
.sc-summary dd { margin: 0; font-weight: 700; }
.sc-summary .sc-note dd { color: var(--ink-3); font-weight: 600; }
.sc-sub { display: flex; justify-content: space-between; align-items: baseline; margin: .9rem 0 .15rem; padding-top: .9rem; border-top: 1px solid var(--line); font-weight: 750; }
.sc-sub strong { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
.sc-summary .btn-block { min-height: 52px; margin-top: .9rem; font-size: 1rem; }
.sc-empty, .sc-soon { max-width: 460px; margin: 2rem auto 0; padding: 2.5rem 1.5rem; background: var(--surface); border-radius: 28px; box-shadow: var(--shadow-1); }
.sc-empty h2, .sc-soon h1 { margin: .9rem 0 .4rem; font-size: 1.375rem; letter-spacing: -0.02em; }
.sc-empty p, .sc-soon p { margin: 0 auto 1.25rem; color: var(--ink-2); max-width: 40ch; }
.sc-soon .btn-row { justify-content: center; }
.sc-empty-icon { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--grad-soft); color: var(--accent); }
.sc-empty-icon .icon { width: 30px; height: 30px; }
@media (min-width: 560px) {
  .sc-line { grid-template-columns: 92px minmax(0, 1fr) auto; }
  .sc-thumb { width: 92px; height: 115px; }
  .sc-total { grid-column: 3; text-align: right; }
}
@media (min-width: 900px) {
  .sc-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; align-items: start; }
  .sc-summary { position: sticky; top: 80px; }
}

/* ---- About & policies */
.sa { max-width: 760px; padding-top: .75rem; }
.sa h1 { margin: .25rem 0 .75rem; font-size: 1.75rem; letter-spacing: -0.025em; }
.sa-lead { font-size: 1.0625rem; line-height: 1.6; color: var(--ink); margin: 0 0 1.5rem; }
.sa-section { padding: 1.1rem 1.25rem; margin-bottom: .75rem; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-1); }
.sa-section h2 { margin: 0 0 .4rem; font-size: 1rem; }
.sa-section p { margin: 0; color: var(--ink-2); line-height: 1.65; }
.sa-contact { margin: 1.5rem 0 1rem; }

/* ---- Footer + toast */
.store-foot { margin-top: 2rem; padding: 2rem 0 calc(2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.store-foot-inner { display: grid; gap: 1.25rem; }
.store-foot-shop strong { font-size: 1rem; }
.store-foot-shop p { margin: .35rem 0 0; color: var(--ink-2); font-size: .875rem; max-width: 48ch; }
.store-foot-links { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; padding: 0; }
.store-foot-links a { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; color: var(--ink-2); font-weight: 700; font-size: .875rem; text-decoration: none; }
.store-foot-links a:hover { color: var(--accent-strong); }
.store-foot-links .icon { width: 18px; height: 18px; }
.store-powered { margin-top: 1.5rem; font-size: .75rem; font-weight: 700; }
.store-powered a { color: var(--ink-3); text-decoration: none; }
.store-powered a:hover { color: var(--accent-strong); }
@media (min-width: 900px) { .store-foot-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.store-toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 60; width: max-content; max-width: calc(100vw - 32px); padding: .8rem 1.1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); font-weight: 700; font-size: .9375rem; color: var(--ink); transform: translate(-50%, 12px); opacity: 0; transition: transform .22s var(--ease), opacity .22s var(--ease); }
.store-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.store-toast.is-error { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.store-toast a { margin-left: .5rem; color: var(--accent-strong); font-weight: 800; }
@media (min-width: 900px) { .store-toast { bottom: 2rem; } }
@media (prefers-reduced-motion: reduce) {
  .store-toast, .pc-link, .sp-spot-media img, .sp-hl-ring, .pv-dots span { transition: none; }
  .store-cart-btn.bump .store-cart-count, .pv-bar { animation: none; }
}

/* ---- Seller panel: Shop page */
.sfp { display: grid; gap: 1.25rem; }
.sfp-main { display: grid; gap: 1.25rem; min-width: 0; }
.sfp-main > .card + .card { margin-top: 0; }
.sfp-images { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.sfp-logo-preview { display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: .6rem; border-radius: 50%; padding: 3px; background: var(--grad); color: #fff; }
.sfp-logo-preview img { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; object-fit: cover; }
.sfp-banner-preview { display: block; aspect-ratio: 8 / 3; margin-bottom: .6rem; border-radius: 16px; overflow: hidden; background: var(--grad-soft); }
.sfp-banner-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sfp-file { cursor: pointer; }
.sfp-file:has(input:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.sfp-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.sfp-theme { position: relative; display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border: 1.5px solid var(--line-strong); border-radius: 16px; background: var(--surface); font-weight: 700; font-size: .875rem; cursor: pointer; }
.sfp-theme input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sfp-theme:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-2); }
.sfp-theme:has(input:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.sfp-swatch { flex: none; width: 28px; height: 28px; border-radius: 50%; }
[data-theme-swatch="instagram"] .sfp-swatch { background: linear-gradient(120deg, #c2410c, #c81e6a 36%, #8b2bb3 70%, #5146d0); }
[data-theme-swatch="ocean"] .sfp-swatch { background: linear-gradient(120deg, #0369a1, #1d4ed8 40%, #4338ca 75%, #5b21b6); }
[data-theme-swatch="emerald"] .sfp-swatch { background: linear-gradient(120deg, #047857, #0f766e 40%, #0e7490 75%, #1d4ed8); }
[data-theme-swatch="sunset"] .sfp-swatch { background: linear-gradient(120deg, #c2410c, #be123c 45%, #9f1239 75%, #86198f); }
.sfp-side { display: grid; gap: 1rem; align-content: start; }
.sfp-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .75rem; }
.sfp-url { display: flex; gap: .5rem; }
.sfp-url .input { min-height: 40px; font-size: .8125rem; }
.sfp-qr { display: grid; place-items: center; margin: 1rem 0 .5rem; padding: .75rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.sfp-qr svg { width: 100%; max-width: 200px; height: auto; }
@media (min-width: 1100px) {
  .sfp { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .sfp-side { position: sticky; top: 76px; }
}
@media (max-width: 560px) { .sfp-images { grid-template-columns: 1fr; } }
.pv-about.no-desc { border-top: 0; padding-top: 0; }
.pv-about > .pv-details:first-child { margin-top: 0; }
.field .sfp-theme { display: flex; margin: 0; }
.field label.btn { display: inline-flex; margin-bottom: 0; }
@media (max-width: 1099px) { .sfp-side { order: -1; } .sfp-qr svg { max-width: 160px; } }

/* ================================================================ M5 · Checkout & orders */
/* ---- Product page additions */
.pv-more-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pv-more-actions .btn { min-height: 50px; }
.pv-more-actions .pv-buynow { width: auto; }
.pv-more-actions > :only-child { grid-column: 1 / -1; }
.pv-wa .icon { color: #128c4b; }
.pv-notify { margin-top: 1rem; padding: 1rem; border-radius: 18px; background: var(--surface); border: 1px dashed var(--line-strong); display: grid; gap: .5rem; }
.pv-notify[hidden] { display: none; }
.pv-notify-title { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 800; }
.pv-notify-title .icon { width: 18px; height: 18px; color: var(--warn); }
.pv-code { margin-left: auto; color: var(--ink-3); font-size: .8125rem; font-weight: 650; align-self: center; }
.pv-code strong { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---- Checkout */
.co { padding-top: .75rem; }
.co-head h1 { margin: .25rem 0 1rem; font-size: 1.625rem; letter-spacing: -0.025em; }
.co-grid { display: grid; gap: 1rem; }
.co-main { display: grid; gap: 1rem; min-width: 0; }
.co-card { padding: 1.15rem; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-1); min-width: 0; }
.co-card[hidden] { display: none; }
.co-card h2 { display: flex; align-items: center; margin: 0 0 .9rem; font-size: 1.0625rem; letter-spacing: -0.015em; }
.co-card .step-num { width: 24px; height: 24px; font-size: .75rem; }
.co-login { display: grid; gap: .1rem; }
.co-login .field { margin-bottom: .85rem; }
.co-login .input-prefix .input { min-width: 0; }
.co-sent { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 1rem; padding: .75rem .9rem; border-radius: 14px; background: var(--note-bg); color: var(--note); font-size: .875rem; font-weight: 600; }
.co-sent .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.co-change { margin-top: .5rem; text-align: center; }
.co-done { display: flex; align-items: center; gap: .75rem; }
.co-done p { margin: 0; flex: 1; min-width: 0; display: grid; }
.co-done p span { color: var(--ink-2); font-size: .8125rem; overflow-wrap: anywhere; }
.co-done-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); }
.co-done-icon .icon { width: 18px; height: 18px; }
.co-options { display: grid; gap: .5rem; }
.co-option { position: relative; display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border: 1.5px solid var(--line-strong); border-radius: 16px; background: var(--surface); cursor: pointer; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.co-option[hidden] { display: none; }
.co-option input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.co-option-body { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.co-option-body strong { display: inline-flex; align-items: center; gap: .35rem; font-size: .9375rem; }
.co-option-body strong .icon { width: 16px; height: 16px; }
.co-option-price { font-weight: 800; font-size: .9375rem; }
.co-option:hover { border-color: var(--ink-3); }
.co-option:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.co-option:has(input:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.co-newaddr { display: none; margin-top: 1rem; }
.co-card:has(input[name="address_id"][value="new"]:checked) .co-newaddr { display: block; }
.co-when { margin-top: 1rem; }
.co-note { margin: 1rem 0 .75rem; }
.co-summary { align-self: start; padding: 1.15rem; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-2); display: grid; gap: .75rem; }
.co-sum-toggle > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; cursor: pointer; }
.co-sum-toggle > summary::-webkit-details-marker { display: none; }
.co-sum-toggle > summary h2 { margin: 0; font-size: 1.0625rem; }
.co-sum-toggle > summary > span { font-weight: 800; }
.co-lines { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .75rem; }
.co-lines li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .75rem; align-items: center; }
.co-line-img { position: relative; width: 56px; height: 64px; border-radius: 12px; background: var(--surface-sunk); }
.co-line-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.co-line-qty { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ink-2); color: #fff; font-size: .6875rem; font-weight: 800; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.co-line-name { display: grid; gap: .1rem; font-weight: 700; font-size: .875rem; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.co-line-total { font-weight: 800; font-size: .875rem; }
.co-special { display: flex; gap: .5rem; align-items: flex-start; margin: .5rem 0 0; padding: .6rem .75rem; border-radius: 12px; background: var(--accent-tint); color: var(--accent-strong); font-size: .8125rem; font-weight: 700; }
.co-special .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.co-special-price { color: var(--ok); font-weight: 750; }
.co-special-price s { color: var(--ink-3); font-weight: 600; margin-left: .25rem; }
.co-coupon { padding-top: .75rem; border-top: 1px solid var(--line); }
.co-coupon label { font-weight: 700; display: block; margin-bottom: .35rem; }
.co-coupon-row { display: flex; gap: .5rem; }
.co-coupon-row .input { min-height: 44px; text-transform: uppercase; }
.co-coupon .error { color: var(--bad); font-size: .8125rem; font-weight: 650; margin: .4rem 0 0; }
.co-coupon-on { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--ok); font-size: .875rem; }
.co-coupon-on .icon { width: 18px; height: 18px; }
.co-coupon-on span { flex: 1; }
.co-totals { margin: 0; display: grid; gap: .4rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.co-totals > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.co-totals > div[hidden] { display: none; }
.co-totals dt { color: var(--ink-2); font-weight: 650; }
.co-totals dd { margin: 0; font-weight: 750; }
.co-minus { color: var(--ok); }
.co-total { margin-top: .3rem; padding-top: .6rem; border-top: 1px dashed var(--line-strong); }
.co-total dt { color: var(--ink); font-weight: 800; }
.co-total dd { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.co-due dt, .co-due dd { color: var(--accent-strong); font-weight: 800; }
.co-summary > p { margin: 0; }
.co-summary .error { color: var(--bad); font-size: .8125rem; font-weight: 700; }
.co-place { min-height: 54px; font-size: 1rem; }
.co-secure { display: flex; align-items: center; justify-content: center; gap: .35rem; }
.co-secure .icon { width: 14px; height: 14px; }
.co-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 16px calc(.65rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgb(58 26 84 / .25); }
.co-bar p { margin: 0; display: grid; line-height: 1.2; }
.co-bar strong { font-size: 1.125rem; }
.co-bar .btn { min-height: 48px; }
.store:has(.co-bar) .store-foot { padding-bottom: 6rem; }
@media (min-width: 900px) {
  .co-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 1.5rem; align-items: start; }
  .co-summary { position: sticky; top: 80px; }
  .co-bar { display: none; }
  .store:has(.co-bar) .store-foot { padding-bottom: 2rem; }
}
@media (max-width: 899px) {
  .co-summary .co-place, .co-summary .co-secure { display: none; }
  .co-grid { grid-template-columns: minmax(0, 1fr); }
  .co-summary { order: -1; }
  .co-sum-toggle:not([open]) > summary { padding-bottom: 0; }
}
.co-pay .btn-lg { min-height: 54px; }

/* ---- Order page (customer) */
.so { padding-top: .75rem; }
.so-hero { text-align: center; padding: 1.5rem 1rem 1rem; }
.so-check { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: var(--shadow-pop); animation: pop .35s var(--ease); }
.so-check .icon { width: 34px; height: 34px; stroke-width: 2.25; }
.so-hero h1 { margin: 1rem 0 .4rem; font-size: 1.75rem; letter-spacing: -0.03em; }
.so-hero p { margin: 0 auto; max-width: 46ch; color: var(--ink-2); }
.so-head h1 { margin: .25rem 0 .1rem; font-size: 1.625rem; }
.so-alert { margin: 1rem 0; }
.so-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.so-main, .so-side { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.so-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.so-steps li { position: relative; display: flex; gap: .85rem; padding-bottom: 1.1rem; }
.so-steps li:last-child { padding-bottom: 0; }
.so-steps li::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
.so-steps li:last-child::before { display: none; }
.so-steps li.is-done::before { background: var(--accent-tint-2); }
.so-steps li > span:last-child { display: grid; font-size: .9375rem; }
.so-steps li:not(.is-done) strong { color: var(--ink-3); font-weight: 650; }
.so-steps li.is-next strong { color: var(--ink); }
.so-dot { flex: none; position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunk); border: 2px solid var(--line-strong); }
.so-steps li.is-done .so-dot { background: var(--grad); border-color: transparent; color: #fff; }
.so-steps li.is-next .so-dot { border-color: var(--accent); }
.so-dot .icon { width: 15px; height: 15px; stroke-width: 2.5; }
.so-when { display: flex; align-items: center; gap: .45rem; margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .9375rem; }
.so-when .icon { width: 18px; height: 18px; color: var(--accent); }
.so-lines { margin-top: 0; }
.so-paystate { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .9rem 0 0; }
.so-addr { margin: 0; font-size: .9375rem; line-height: 1.55; }
@media (min-width: 900px) { .so-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; } }
.so-link { max-width: 520px; }
.so-link-lines { text-align: left; margin: 1.25rem 0; }
.so-link .sc-sub { border-top: 1px solid var(--line); padding-top: .9rem; margin-bottom: 1rem; }
.so-link form { margin-bottom: .5rem; }

/* ---- Account */
.sa-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sa-addresses { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sa-addresses li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .875rem; color: var(--ink-2); }

/* ---- Seller: orders */
.olist { list-style: none; margin: 0; padding: 0; }
.olist li { border-bottom: 1px solid var(--line); }
.olist li:last-child { border-bottom: 0; }
.olist-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: .9rem; align-items: center; padding: .75rem .5rem; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.olist-row:hover { background: var(--surface-soft); color: var(--ink); }
.olist-main { display: grid; gap: .15rem; min-width: 0; }
.olist-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olist-total { font-weight: 800; }
.olist-badges { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
@media (max-width: 700px) {
  .olist-row { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "t m p" "t b b"; gap: .2rem .75rem; }
  .olist-row .plist-thumb { grid-area: t; width: 48px; height: 48px; align-self: start; }
  .olist-main { grid-area: m; }
  .olist-total { grid-area: p; align-self: start; }
  .olist-badges { grid-area: b; justify-content: flex-start; }
}
.order-grid { display: grid; gap: 1.25rem; align-items: start; }
.order-main, .order-side { display: grid; gap: 1.25rem; min-width: 0; }
.order-main > .card + .card, .order-side > .card + .card, .order-side > .card + details { margin-top: 0; }
@media (min-width: 1000px) { .order-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
.oitems { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .9rem; }
.oitems li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .9rem; align-items: start; }
.oitems-main { display: grid; gap: .15rem; min-width: 0; }
.oitems-answer { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .875rem; color: var(--ink-2); }
.oitems-answer img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); }
.order-note { display: flex; gap: .4rem; margin: .9rem 0 0; padding: .7rem .8rem; border-radius: 12px; background: var(--warn-bg); color: var(--warn); font-size: .875rem; font-weight: 650; }
.order-note .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.order-side details.card > summary { list-style: none; }
.order-side details.card > summary::-webkit-details-marker { display: none; }
.order-side details.card[open] > summary { margin-bottom: .75rem; }
.home-orders-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: .6rem; margin: 0; padding: 0; }
.home-orders-list a, .home-orders-list > li > span { display: grid; gap: .1rem; padding: .8rem .9rem; border-radius: 16px; background: var(--surface-soft); color: var(--ink); text-decoration: none; }
.home-orders-list a:hover { background: var(--accent-tint); color: var(--ink); }
.home-orders-list strong { font-size: 1.25rem; font-weight: 800; }
.home-orders-list li > * > span { color: var(--ink-2); font-size: .8125rem; font-weight: 650; }
.home-orders-list a.is-zero strong { color: var(--ink-3); }
.home-orders { margin-bottom: 1.25rem; }
@media (max-width: 480px) { .home-orders-list strong { font-size: 1.0625rem; } }
.link-rows { display: grid; gap: .25rem; }
.link-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 170px; gap: 0 .75rem; align-items: end; }
@media (max-width: 640px) { .link-row { grid-template-columns: 1fr 1fr; padding-bottom: .5rem; border-bottom: 1px dashed var(--line); } .link-row .field.grow { grid-column: 1 / -1; } }
.link-ready { border: 1.5px solid var(--ok-line); }
.link-ready h2 { display: flex; align-items: center; gap: .5rem; color: var(--ok); }
.link-ready .sfp-url { margin-bottom: .75rem; }
.toggle-block { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.toggle-block:last-child { border-bottom: 0; padding-bottom: 0; }
.toggle-block > .check { margin-bottom: .5rem; }
.toggle-fields { margin-left: 2rem; }
.toggle-block:has(> .check input:not(:checked)) .toggle-fields { opacity: .55; }
@media (max-width: 480px) { .toggle-fields { margin-left: 0; } }
.pay-state-line { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0; }
.warn-text { color: var(--warn); font-weight: 650; }
.payout-now { margin-bottom: 1rem; }
#co-form { display: grid; gap: 1rem; }
details.danger-zone:not([open]) { padding: 0; border: 0; background: none; box-shadow: none; }
details.danger-zone > summary { color: var(--bad); }
@media (max-width: 420px) { .pv-more-actions { grid-template-columns: 1fr; } }
.so-steps li.is-next .so-dot { background: var(--accent-tint); }

/* ---------------------------------------------------------------- M6 payments */
/* Customer: UPI to the shop */
.upi-grid { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 860px) { .upi-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.upi-qr { display: grid; justify-items: center; gap: .4rem; margin: 0 0 1rem; padding: 1rem; border-radius: 18px; background: var(--surface-soft); }
.upi-qr svg { width: 200px; height: 200px; padding: 10px; border-radius: 14px; background: #fff; }
.upi-qr p { margin: 0; }
.upi-details > div { align-items: center; }
.upi-details dd { display: inline-flex; align-items: center; gap: .4rem; overflow-wrap: anywhere; }
.upi-details .btn-sm { min-height: 32px; padding: 0 .6rem; }
.upi-app-hint { margin-top: .4rem; }
/* Phones pay in an app on the same device (no QR: it can’t scan itself); laptops scan the QR; tablets get both. */
@media (max-width: 759px) { .upi-qr { display: none; } }
@media (min-width: 760px) and (pointer: fine) { .upi-app, .upi-app-hint { display: none; } }
.upi .alert { margin-top: 1rem; }
/* Laptops: no app button, so sending the UTR is the page's one primary action. */
@media (min-width: 760px) and (pointer: fine) { .upi #utr button[type="submit"] { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--shadow-pop); } }
.pay-state-kv dd { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-weight: 600; }

/* Seller: payments page */
.gw-fields { display: none; }
.gw-form:has(input[name="gateway"][value="razorpay"]:checked) .gw-fields[data-gw="razorpay"],
.gw-form:has(input[name="gateway"][value="cashfree"]:checked) .gw-fields[data-gw="cashfree"],
.gw-form:has(input[name="gateway"][value="phonepe"]:checked) .gw-fields[data-gw="phonepe"],
.gw-form:has(input[name="gateway"][value="payu"]:checked) .gw-fields[data-gw="payu"] { display: block; }
.gw-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .gw-choices { grid-template-columns: 1fr; } }
.gw-mode .hint { margin-top: .5rem; }
.gw-choices .badge { margin-left: .35rem; vertical-align: 1px; }
.pay-fees { margin: .75rem 0 0; }
.hist-filter { margin-bottom: 1rem; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat-row .card { display: grid; align-content: start; gap: .15rem; margin: 0; padding: 1.1rem 1.25rem; }
@media (max-width: 520px) { .stat-row { grid-template-columns: 1fr 1fr; gap: .75rem; } .stat-row strong { font-size: 1.125rem; } }
.stat-label { color: var(--ink-2); font-size: .8125rem; font-weight: 700; }
.stat-row strong { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }

/* Seller: order page */
.upi-check { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; border: 1.5px solid var(--warn-line); }
@media (min-width: 720px) { .upi-check { grid-template-columns: minmax(0, 1fr) 180px; } }
.upi-check h2 { margin-top: 0; }
.upi-check .kv { margin: .5rem 0 .75rem; }
.upi-check .btn-row { align-items: flex-start; }
.upi-reject > summary { list-style: none; }
.upi-reject > summary::-webkit-details-marker { display: none; }
.upi-reject[open] > summary { display: none; }
.upi-reject .inline-form > .input { min-width: 240px; }
.upi-proof { display: grid; gap: .35rem; justify-items: center; color: var(--ink-2); text-decoration: none; }
.upi-proof img { width: 100%; max-height: 260px; object-fit: contain; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-soft); }
.home-orders-list a.is-alert { background: var(--warn-bg); }
.refund-list { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .6rem; }
.refund-list li { display: grid; gap: .15rem; padding: .65rem .75rem; border-radius: 12px; background: var(--surface-soft); }
.refund-box { margin-bottom: .9rem; }
.refund-box > summary { list-style: none; }
.refund-box > summary::-webkit-details-marker { display: none; }
.refund-box[open] > summary { display: none; }

/* Customer: order page refunds */
.so-refunds { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.so-refunds li { display: grid; gap: .1rem; font-size: .875rem; }

/* ---------------------------------------------------------------- M7 order workflow, stock, seller app */
/* Order page */
.order-actions { align-items: center; }
.order-actions form { margin: 0; }
.ship-kv { margin: .75rem 0; grid-template-columns: max-content 1fr !important; column-gap: 1rem !important; }
.ship-kv dd { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.track-link { display: inline-flex; align-items: center; gap: .35rem; }
.track-link .icon { width: 16px; height: 16px; }
/* Phones: customer, delivery (AWB) and payment before the long history. */
@media (max-width: 999px) {
  .order-grid { display: flex; flex-direction: column; align-items: stretch; }
  .order-main, .order-side { display: contents; }
  .order-history { order: 1; }
  .order-grid details.danger-zone { order: 2; }
}
.bulk-bar .btn[disabled] { opacity: .45; }
.check-inline { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; cursor: pointer; min-height: 32px; }
.check-inline input { width: 18px; height: 18px; margin: 0; }
@media (max-width: 640px) { .filter-bar { flex-wrap: nowrap; } .filter-bar .btn { flex: none; } .filter-bar .field { min-width: 0; } }
.ship-form { display: grid; gap: 0; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ship-edit .ship-form { border-top: 0; padding-top: .25rem; margin-top: .5rem; }
.ship-h { margin: 0 0 .75rem; font-size: 1rem; }
.ship-form .btn-block { margin-top: .25rem; }
.courier-other { display: none; }
.ship-form:has(select[name="courier"] option[value="other"]:checked) .courier-other { display: block; }
/* Order list with tick boxes */
.olist.has-select li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; }
.olist.has-select li.is-selected { background: var(--surface-soft); border-radius: var(--r-sm); }
.olist-pick { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.olist-pick input { width: 20px; height: 20px; margin: 0; }
.import-card { margin-top: 1.25rem; }
.import-card > summary { display: flex; align-items: center; gap: .5rem; font-weight: 750; cursor: pointer; list-style: none; min-height: 44px; }
.import-card > summary::-webkit-details-marker { display: none; }
.import-card > summary .icon { width: 18px; height: 18px; color: var(--accent); }
.import-card[open] > summary { margin-bottom: .5rem; }
.csv-sample { margin: .75rem 0; padding: .75rem .9rem; border-radius: 12px; background: var(--surface-soft); font-size: .8125rem; overflow-x: auto; }
.import-errors { margin: 0 0 1rem; padding: .75rem 1rem .75rem 2rem; border-radius: 12px; background: var(--bad-bg); color: var(--bad); font-size: .875rem; font-weight: 600; }
.home-nudge { display: flex; align-items: center; gap: .4rem; margin: .9rem 0 0; font-weight: 650; }
.home-nudge .icon { width: 16px; height: 16px; color: var(--warn); }
/* Customer tracking */
.so-ship { display: grid; gap: .6rem; margin-top: 1rem; padding: .9rem; border-radius: 16px; background: var(--surface-soft); }
.so-ship p { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; font-size: .9375rem; }
.so-ship p > .icon { width: 18px; height: 18px; color: var(--accent); }
.so-ship .hint { margin: 0; }
/* Stock list */
.inv-list { list-style: none; margin: 0; padding: 0; }
.inv-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 96px; gap: .8rem; align-items: center; padding: .6rem .5rem; border-bottom: 1px solid var(--line); }
.inv-row:last-child { border-bottom: 0; }
.inv-row .plist-thumb { width: 48px; height: 48px; }
.inv-main { display: grid; gap: .1rem; min-width: 0; }
.inv-main a { color: var(--ink); text-decoration: none; }
.inv-main a:hover strong { color: var(--accent); }
.inv-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.inv-qty .input { text-align: right; }
.inv-qty .input.is-saved { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.inv-row.is-out .inv-qty .input { border-color: var(--bad); }
@media (max-width: 520px) { .inv-row { grid-template-columns: 44px minmax(0, 1fr) 84px; } }
.inv-main .badge { margin-left: .25rem; vertical-align: 1px; }
.stock-history { margin: 1rem 0; }
.stock-moves { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.stock-moves li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: .6rem; align-items: baseline; font-size: .875rem; }
.stock-moves li > span:nth-child(2) { display: grid; }
.stock-delta { font-weight: 800; }
.stock-delta.is-down { color: var(--bad); }
.stock-delta.is-up { color: var(--ok); }
/* Phone app card */
.app-card { margin-top: 1.25rem; }
.app-steps { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 760px) { .app-steps { grid-template-columns: 1fr 1fr; } }
.app-step { display: grid; gap: .5rem; align-content: start; padding: 1rem; border-radius: 16px; background: var(--surface-soft); }
.app-step p { margin: 0; }
.app-step [data-app-installed] { display: flex; align-items: center; gap: .35rem; color: var(--ok); font-weight: 650; }
.app-step [hidden] { display: none; }
.app-devices-h { margin: 1.25rem 0 .5rem; font-size: .9375rem; }
.app-devices { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.app-devices li { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; }
/* Offline screen */
.offline-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--canvas); }
.offline-box { max-width: 420px; display: grid; justify-items: center; gap: .75rem; text-align: center; }
.offline-box h1 { margin: .25rem 0 0; }
.offline-box p { margin: 0 0 .5rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- M8 customers */
.crm-count { margin: 0 0 .25rem; }
.crm-list { list-style: none; margin: 0; padding: 0; }
.crm-list li { border-bottom: 1px solid var(--line); }
.crm-list li:last-child { border-bottom: 0; }
.crm-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: .85rem; align-items: center; padding: .75rem .5rem; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.crm-row:hover { background: var(--surface-soft); color: var(--ink); }
.crm-avatar { width: 44px; height: 44px; font-size: .875rem; }
.crm-main { display: grid; gap: .15rem; min-width: 0; }
.crm-main strong { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.crm-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; }
.tag-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 .55rem; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent-strong); font-size: .75rem; font-weight: 700; }
.crm-figs { display: grid; justify-items: end; gap: .1rem; text-align: right; }
.crm-figs strong { font-weight: 800; }
.crm-group, .crm-settings { margin-top: 1.25rem; }
.crm-coupon-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 .75rem; }
@media (max-width: 480px) { .crm-coupon-fields { grid-template-columns: 1fr 1fr; } .crm-coupon-fields .field:first-child { grid-column: 1 / -1; } }
.crm-settings > summary { display: flex; align-items: center; gap: .5rem; font-weight: 750; cursor: pointer; list-style: none; min-height: 44px; }
.crm-settings > summary::-webkit-details-marker { display: none; }
.crm-settings > summary .icon { width: 18px; height: 18px; color: var(--accent); }
.crm-settings[open] > summary { margin-bottom: .75rem; }
@media (max-width: 640px) {
  .crm-filter { flex-wrap: wrap !important; }
  .crm-filter .field.grow { flex: 1 1 100%; }
  .crm-filter .field:not(.grow) { flex: 1 1 0; min-width: 0; }
  .crm-filter .field:not(.grow) .select { min-width: 0; width: 100%; }
  .crm-filter .btn { flex: none; }
}
.seg-tabs .count.is-warn { background: var(--warn-bg); color: var(--warn); }
.crm-list.has-action li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem; }
.crm-row-wa { min-height: 44px; }
@media (max-width: 480px) { .crm-row-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.crm-consent { margin: -.25rem 0 .75rem; }
@media (max-width: 999px) { .crm-first { order: -1; } }
.admin-sub-h { margin: 1rem 0 .25rem; font-size: .875rem; color: var(--ink-2); }
/* Profile */
.bought { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bought li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: .7rem; align-items: center; }
.bought .plist-thumb { width: 48px; height: 48px; }
.bought-main { display: grid; gap: .1rem; min-width: 0; }
.bought-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-order { grid-template-columns: minmax(0, 1fr) auto auto; }
.crm-notes { margin-top: 1rem; }
.crm-addr { margin: .35rem 0 0; color: var(--ink-2); }
.date-pair { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: .5rem; border: 0; padding: 0; }
.date-pair legend { grid-column: 1 / -1; }
.date-pair .error { grid-column: 1 / -1; }
.crm-coupons { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.crm-coupons li { display: grid; gap: .5rem; padding: .7rem .8rem; border-radius: 12px; background: var(--surface-soft); }
.crm-coupons li.is-new { background: var(--ok-bg); box-shadow: inset 0 0 0 1.5px var(--ok-line); }
.crm-coupons li > span { display: grid; gap: .1rem; }
.crm-coupons .btn { justify-self: start; }
.crm-give { margin-top: .5rem; }
.crm-send { list-style: none; margin: 0; padding: 0; }
.crm-send li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.crm-send li:last-child { border-bottom: 0; }
.crm-send li > span { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.crm-since { margin: .25rem 0 .75rem; }
.bc-who-line { margin: 0 0 .25rem; }
.confirm-line { margin: .75rem 0 0; }
.confirm-breakdown { margin-bottom: .5rem; }
.crm-since a { font-weight: 700; }
/* Seller home */
.crm-home { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
@media (min-width: 900px) { .crm-home { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; } }
.crm-home .card { margin: 0; }
.crm-mini { list-style: none; margin: 0; padding: 0; }
.crm-mini li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.crm-mini li:last-child { border-bottom: 0; padding-bottom: 0; }
.crm-mini li > a:first-child { display: grid; gap: .05rem; min-width: 0; color: var(--ink); text-decoration: none; }
.crm-mini li > a:first-child:hover strong { color: var(--accent); }
.crm-mini strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Customer order page */
.so-items-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.so-items-head h2 { margin: 0; }
.so-items-head form { margin: 0; }

/* ---------------------------------------------------------------- M9 GST & invoices */
.gst-form:has(input[name="type"][value="none"]:checked) .gst-only { display: none; }
.gst-form:has(input[name="type"][value="none"]:checked) .gst-only-card,
.gst-form:has(input[name="type"][value="composition"]:checked) .gst-only-card { display: none; }
.gst-types { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.month-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.month-nav strong { min-width: 9.5rem; text-align: center; font-size: 1rem; }
.month-nav .btn:last-child:not([aria-label]) { margin-left: auto; }
.month-nav-gap { width: 36px; }
.inv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.inv-list a { display: flex; gap: .55rem; align-items: flex-start; padding: .55rem .6rem; border-radius: 12px; background: var(--surface-soft); color: var(--ink); text-decoration: none; }
.inv-list a:hover { background: var(--accent-tint); }
.inv-list a > span { display: grid; gap: .05rem; }
.inv-list .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); flex: none; }
.so-invoices { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; }
.so-invoices a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .875rem; }
.so-invoices .icon { width: 16px; height: 16px; }
.co-b2b { margin: .5rem 0 1rem; }
.field .radio-card { display: flex; margin-bottom: 0; font-weight: inherit; font-size: inherit; }
.inv-num { display: inline-flex; align-items: center; gap: .3rem; font-weight: 750; color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.inv-num .icon { width: 14px; height: 14px; }
.inv-send { margin-top: .6rem; }
.table tfoot .total-row td { font-weight: 800; border-top: 1.5px solid var(--line-strong); }
@media (max-width: 520px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat-row > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .inv-table thead { display: none; }
  .inv-table tr { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .inv-table td { display: block !important; padding: 0 !important; border: 0 !important; text-align: left !important; }
  .inv-table td[data-label="Date"] { margin-top: .15rem; }
  .inv-table td > * { display: block; text-align: left !important; justify-self: start !important; margin: 0 !important; }
  .inv-table td > a { display: inline-flex; }
  .inv-table td::before { content: none !important; }
  .inv-table td[data-label="Amount"] { grid-column: 2; grid-row: 1; font-weight: 800; text-align: right !important; }
  .inv-table td[data-label="Date"], .inv-table td[data-label="Order"], .inv-table td[data-label="Buyer"] { grid-column: 1 / -1; display: inline !important; font-size: .8125rem; color: var(--ink-2); }
}
.co-b2b > summary { cursor: pointer; font-weight: 700; font-size: .9375rem; color: var(--accent-strong); min-height: 40px; display: flex; align-items: center; }
.co-b2b[open] > summary { margin-bottom: .5rem; }

/* ---------------------------------------------------------------- M10 WhatsApp, COD confirm, reviews */
.link-btn { padding: 0; border: 0; background: none; color: var(--accent-strong); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.so-stop { margin: .75rem 0 0; }
.so-stop p { margin: 0; }
.so-rate .icon { color: var(--warn); }
.confirm-page, .review-page { max-width: 640px; }
.confirm-items { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; }
.confirm-items li { display: flex; justify-content: space-between; gap: 1rem; }
.confirm-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 .5rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.confirm-total strong { font-size: 1.375rem; font-weight: 800; }
.confirm-actions { display: grid; gap: .5rem; margin-top: 1rem; }
.review-form { display: grid; gap: 1rem; margin-top: 1rem; }
.review-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.review-head h2 { margin: 0; font-size: 1rem; }
.stars-field { margin: 0 0 1rem; }
.stars-field legend { font-weight: 700; font-size: .875rem; margin-bottom: .4rem; }
.stars { display: inline-flex; gap: .15rem; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; color: #8e869c; border-radius: 10px; }
.stars label .icon { width: 30px; height: 30px; }
.stars:has(input[value="1"]:checked) label:nth-of-type(-n+1),
.stars:has(input[value="2"]:checked) label:nth-of-type(-n+2),
.stars:has(input[value="3"]:checked) label:nth-of-type(-n+3),
.stars:has(input[value="4"]:checked) label:nth-of-type(-n+4),
.stars:has(input[value="5"]:checked) label:nth-of-type(-n+5) { color: #d18f0a; }
@media (hover: hover) { .stars label:hover { color: #d18f0a; } }
.stars label .icon, .rev-stars .on .icon, .pv-rating .icon { fill: currentColor; }
.stars input:focus-visible + label { outline: 2.5px solid var(--focus); outline-offset: 1px; }
.pv-rating { display: inline-flex; align-items: center; gap: .35rem; margin: .1rem 0 .4rem; color: var(--ink); text-decoration: none; font-size: .9375rem; }
.pv-rating .icon { width: 18px; height: 18px; color: #e8a317; }
.pv-reviews { margin-top: 1.5rem; }
.pv-reviews h2 { font-size: 1.125rem; }
.rev-list, .rev-admin { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.rev-list li { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.rev-list li:last-child { border-bottom: 0; }
.rev-stars { display: flex; gap: .1rem; margin: 0 0 .3rem; color: var(--line-strong); }
.rev-stars .on { color: #e8a317; }
.rev-stars .icon { width: 16px; height: 16px; }
.rev-body { margin: 0 0 .4rem; }
.rev-photo { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); margin: .25rem 0 .4rem; }
.rev-admin li { display: grid; gap: .6rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.rev-admin li:last-child { border-bottom: 0; }
.rev-admin-main p { margin: 0 0 .25rem; }
.wa-status .kv { margin-bottom: .75rem; }
.wa-test { margin: 0; }
.wa-log { list-style: none; margin: 0; padding: 0; }
.wa-log li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.wa-log li:last-child { border-bottom: 0; }
.wa-log li > span:first-child { display: grid; gap: .1rem; min-width: 0; }
.wa-text { max-width: 60ch; }
.bc-count { font-size: 1rem; }
.bc-who { margin-bottom: 1rem; }

/* M11 billing */
.form-narrow { max-width: 640px; }
.actions-cell { text-align: right; white-space: nowrap; }
.bill-lines { display: grid; grid-template-columns: 1fr auto; gap: .55rem 0; margin: 0 0 .75rem; font-size: .95rem; }
.bill-lines dt { color: var(--ink-2); font-weight: 600; }
.bill-lines dd { margin: 0; padding-left: 1.25rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.bill-lines .bill-total { padding-top: .7rem; border-top: 1px solid var(--line); color: var(--ink); font-size: 1.15rem; font-weight: 800; }
.coupon-form { margin: 1.25rem 0 .25rem; }
.credit-balance { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
.refer-hero h2 { font-size: 1.25rem; letter-spacing: -0.01em; }
.refer-hero .field { max-width: 560px; margin-top: 1rem; }
.bar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bar-list li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .25rem .9rem; align-items: center; }
.bar-label { color: var(--ink-2); font-weight: 700; font-size: .8125rem; }
.bar-track { display: block; width: 100%; height: 10px; border-radius: 5px; background: var(--surface-sunk); overflow: hidden; }
.bar-fill { fill: var(--accent); }
.bar-value { grid-column: 2; font-weight: 700; font-size: .875rem; }
@media (min-width: 720px) { .bar-list li { grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 20rem); } .bar-value { grid-column: auto; } }
.stack + .stat-row { margin-top: 1.5rem; }

/* M12 Instagram */
.ig-connect { display: grid; justify-items: start; gap: .5rem; }
.ig-benefits { margin: .25rem 0 .5rem; padding-left: 1.1rem; display: grid; gap: .4rem; max-width: 62ch; }
.compact-stats { margin: 1rem 0 0; }
.compact-stats .card { box-shadow: none; background: var(--surface-sunk); border-color: transparent; }
.ig-posts, .live-items { list-style: none; margin: 0; padding: 0; }
.ig-posts li, .live-items li { display: flex; align-items: center; gap: .85rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.ig-posts li:last-child, .live-items li:last-child { border-bottom: 0; }
.ig-thumb { flex: none; width: 52px; height: 52px; border-radius: 10px; background: var(--surface-sunk); overflow: hidden; }
.ig-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ig-post-text, .live-items li > span:last-child { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.ig-media-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 1rem; }
.ig-media { display: grid; gap: .6rem; align-content: start; margin: 0; }
.ig-media p { margin: 0; overflow-wrap: anywhere; }
.ig-media-img { display: block; aspect-ratio: 4 / 5; border-radius: 12px; background: var(--surface-sunk); overflow: hidden; }
.ig-media-img img { width: 100%; height: 100%; object-fit: cover; }
.ig-publish { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .ig-publish { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } .ig-publish > .card { margin: 0; } }
.ig-strip { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; gap: .6rem; overflow-x: auto; scroll-snap-type: x mandatory; }
.ig-strip li { flex: 0 0 min(78%, 280px); scroll-snap-align: start; }
.ig-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; display: block; }
.live-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; border: 1.5px solid rgb(220 38 38 / .25); }
.live-dot { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.15rem; font-weight: 800; }
.live-dot .dot { width: 10px; height: 10px; border-radius: 50%; background: #dc2626; box-shadow: 0 0 0 4px rgb(220 38 38 / .15); }
@media (prefers-reduced-motion: no-preference) { .live-dot .dot { animation: live-pulse 1.6s ease-in-out infinite; } }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 7px rgb(220 38 38 / .06); } }
.live-code { font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; }
.live-pick { display: grid; gap: .25rem; max-height: 22rem; overflow-y: auto; }
.ig-when-form:has(input[name="when"][value="now"]:checked) .ig-later { display: none; }

/* M13 WhatsApp chats */
.chat-list { list-style: none; margin: 0; padding: 0; }
.chat-list a { display: flex; align-items: center; gap: .85rem; padding: .75rem .25rem; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.chat-list li:last-child a { border-bottom: 0; }
.chat-list a:hover .chat-line strong { color: var(--accent); }
.chat-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-soft); color: var(--accent-strong); font-weight: 800; }
.chat-line { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.chat-line .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-meta { display: grid; justify-items: end; gap: .25rem; flex: none; }
.chat-thread .chat-state { margin: 0 0 .75rem; }
.bubbles { list-style: none; margin: 0; padding: .25rem; display: flex; flex-direction: column; gap: .5rem; max-height: min(62vh, 640px); overflow-y: auto; background: var(--surface-sunk); border-radius: 14px; }
.bubble { width: fit-content; max-width: min(78%, 520px); padding: .55rem .8rem .4rem; border-radius: 14px; background: var(--surface); box-shadow: 0 1px 1px rgb(0 0 0 / .04); align-self: flex-start; overflow-wrap: anywhere; }
.bubble.out { align-self: flex-end; background: #e7f6ec; }
.bubble.out.bot { background: var(--accent-tint); }
.bubble p { margin: 0 0 .2rem; font-size: .925rem; }
.bubble img { display: block; width: 100%; max-width: 280px; border-radius: 10px; margin-bottom: .35rem; }
.bubble-meta { display: block; font-size: .72rem; color: var(--ink-2); text-align: right; }
.chat-compose { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.chat-compose .field { margin: 0; }
.chat-tools { display: grid; gap: .75rem; margin-top: 1rem; }
.chat-tools .inline-form { margin: 0; }

/* M14 insights */
.period-custom { margin: -.25rem 0 1rem; }
.insight-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.delta { display: inline-flex; align-items: center; gap: .2rem; width: fit-content; padding: .05rem .45rem; border-radius: var(--r-pill); font-size: .75rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.delta.up { background: var(--ok-bg); color: var(--ok); }
.delta.down { background: var(--bad-bg); color: var(--bad); }
.delta.flat { background: var(--surface-sunk); color: var(--ink-2); font-weight: 650; }
.small-tabs { margin: 0; }
.small-tabs a { min-height: 32px; padding: 0 .75rem; font-size: .8125rem; }
.bars-figure { margin: 0; }
.bars { display: block; width: 100%; height: 180px; }
.bars .bar { fill: var(--accent); }
.bars .bar:hover { fill: var(--accent-strong); }
.bars-axis { stroke: var(--line-strong); stroke-width: .3; vector-effect: non-scaling-stroke; }
.bars-ticks { display: flex; margin-top: .35rem; }
.bars-ticks span { flex: 1 1 0; min-width: 0; font-size: .6875rem; color: var(--ink-2); text-align: center; white-space: nowrap; overflow: visible; }
.src-detail { margin-top: .35rem; font-weight: 500; }
.src-detail summary { cursor: pointer; font-size: .8125rem; color: var(--accent); }
.src-campaigns { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.src-campaigns li { display: flex; gap: .6rem; align-items: center; }
.src-campaigns li > span { display: grid; gap: .05rem; min-width: 0; }
.src-campaigns img { flex: none; width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.funnel li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 4rem; align-items: center; gap: .75rem; }
.funnel-label { font-size: .875rem; color: var(--ink-2); font-weight: 650; }
.funnel-bar { width: 100%; height: 12px; border-radius: 6px; background: var(--surface-sunk); }
.funnel-bar rect { fill: var(--accent); }
.funnel strong { text-align: right; }
.rank-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.rank-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.rank-list li:last-child { border-bottom: 0; }
.home-week-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; }
.home-week-list li { display: grid; gap: .1rem; padding: .75rem .9rem; border-radius: var(--r-sm); background: var(--surface-sunk); }
.home-week-list strong { font-size: 1.15rem; font-weight: 800; }
.home-week-list span { color: var(--ink-2); font-size: .8125rem; }
@media (max-width: 520px) { .funnel li { grid-template-columns: 6.5rem minmax(0, 1fr) 3.25rem; gap: .5rem; } }
.insight-kpis { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
.bars-figure { position: relative; }
.bars-empty { position: absolute; inset: 0 0 1.5rem; display: grid; place-items: center; margin: 0; font-size: .9rem; }
.src-cell strong { font-weight: 750; }
/* M20: demo shop banner (every page of the demo shop) */
.store-demo { background: #eef3ff; border-bottom: 1px solid #c7d7fe; color: #1e3a8a; }
.store-demo .store-wrap { display: flex; gap: .6rem; align-items: flex-start; padding-block: .7rem; }
.store-demo p { margin: 0; font-size: .875rem; }
.store-demo a { color: #1d4ed8; font-weight: 700; }
.store-demo .icon { flex: none; margin-top: 2px; }