/* Layout: one admin column (max 1200px) — actions up top, upload beside the open orders, summary tiles, then the table that matters for the current step.
   Colours, type and radii come from the Snack Passport tokens (tokens.css); the brand is light-only, so the page commits to its light palette. */
:root {
  color-scheme: light;
  --inv-ground: var(--background-alt);
  --inv-card: var(--surface);
  --inv-line: var(--border);
  --inv-ink: var(--text);
  --inv-quiet: var(--muted-text);
  --inv-gutter: 32px;
}
h1, h2, h3 { text-wrap: balance; }
.inv { min-height: 100%; }
.inv-wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--inv-gutter); box-sizing: border-box; }
.inv-muted { color: var(--inv-quiet); }

/* top bar */
.inv-bar { background: var(--inv-card); border-bottom: 1px solid var(--inv-line); }
.inv-bar-in { min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-block: 8px; }
.inv-brand { display: flex; align-items: center; gap: 14px; }
.inv-sep { width: 1px; height: 24px; background: var(--border-strong); }

.inv-main { display: flex; flex-direction: column; gap: 24px; padding-block: 32px 56px; }
.inv-main > * { min-width: 0; }
.inv-main h1, .inv-main h2, .inv-main p { margin: 0; }

/* title row */
.inv-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.inv-title-t { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.inv-crumb { color: var(--inv-quiet); letter-spacing: .01em; }
.inv-lede { max-width: 44em; }
.inv-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* notices */
.inv-notice-slot:empty { display: none; }
.inv-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 12px 8px; border-radius: var(--radius-md); background: var(--background); box-shadow: inset 0 0 0 1px var(--inv-line); }
.inv-notice > svg { flex: none; margin-top: 3px; }
.inv-notice > span { flex: 1; min-width: 0; }
.inv-notice.is-success { background: var(--success-tint); color: var(--success); box-shadow: none; font-weight: 600; }
.inv-notice.is-danger { background: var(--danger-tint); color: var(--danger); box-shadow: none; font-weight: 600; }
.inv-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-block: -4px; border: 0; border-radius: var(--radius-full); background: transparent; color: inherit; cursor: pointer; }
.inv-x:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.inv-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* success */
.inv-done { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--success-tint); color: var(--success); }
.inv-done h2 { display: flex; align-items: center; gap: 8px; }
.inv-done p { color: var(--inv-ink); max-width: 62em; }

/* steps — a real sequence */
.inv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.inv-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--radius-lg); background: var(--inv-card); box-shadow: inset 0 0 0 1px var(--inv-line); }
.inv-steps li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.inv-step-n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--inv-ink); color: var(--text-inverse); font-weight: 800; }

/* upload */
.inv-upload { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.inv-drop, .inv-file { flex: 1 1 440px; min-width: 0; box-sizing: border-box; border-radius: var(--radius-lg); background: var(--inv-card); }
.inv-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 20px; border: 2px dashed var(--border-strong); text-align: center; transition: background-color .15s ease, border-color .15s ease; }
.inv-drop.is-drag { border-color: var(--primary-ink); background: var(--primary-tint); }
.inv-drop.is-busy { opacity: .7; cursor: progress; }
.inv-drop-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--primary-tint); color: var(--primary-ink); }
.inv-drop-a { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.inv-file-btn { cursor: pointer; }
.inv-upload:focus-within .inv-file-btn { box-shadow: var(--focus-ring); }
.inv-hidden-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.inv-file { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 20px; box-shadow: inset 0 0 0 2px var(--success); }
.inv-file-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--success-tint); color: var(--success); }
.inv-file-t { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.inv-file-n { overflow-wrap: anywhere; text-align: right; }
.inv-file-a { margin-inline-start: auto; }
.inv-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--radius-lg); background: var(--inv-card); box-shadow: inset 0 0 0 1px var(--inv-line); }
.inv-orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.inv-orders li { display: flex; align-items: center; gap: 12px; padding-block: 8px; border-bottom: 1px solid var(--inv-line); }
.inv-o-name { flex: 1; min-width: 0; }
.inv-side-note { display: flex; align-items: flex-start; gap: 8px; }
.inv-side-note svg { flex: none; margin-top: 3px; }

/* summary tiles */
.inv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.inv-stat { padding: 16px 18px; border-radius: var(--radius-lg); background: var(--inv-card); box-shadow: inset 0 0 0 1px var(--inv-line); }
.inv-stat-v { font-size: 32px; line-height: 40px; font-weight: 800; }
.inv-stat-l { display: flex; align-items: center; gap: 6px; color: var(--inv-quiet); }
.inv-stat.is-danger { background: var(--danger-tint); box-shadow: none; }
.inv-stat.is-danger .inv-stat-v, .inv-stat.is-danger .inv-stat-l { color: var(--danger); }
.inv-stat.is-warning { background: var(--warning-tint); box-shadow: none; }
.inv-stat.is-warning .inv-stat-v, .inv-stat.is-warning .inv-stat-l { color: var(--warning); }
.inv-stat.is-success { background: var(--success-tint); box-shadow: none; }
.inv-stat.is-success .inv-stat-v, .inv-stat.is-success .inv-stat-l { color: var(--success); }
.inv-stat.is-danger .inv-stat-l, .inv-stat.is-warning .inv-stat-l, .inv-stat.is-success .inv-stat-l { font-weight: 600; }
.inv-stat.is-issue { box-shadow: inset 0 0 0 2px var(--warning); }
.inv-stat.is-issue .inv-stat-l { color: var(--inv-ink); font-weight: 600; }

/* issues */
.inv-issues { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--radius-lg); background: var(--warning-tint); }
.inv-issues h2 { display: flex; align-items: center; gap: 8px; color: var(--warning); }
.inv-issues ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.inv-issues li { display: flex; align-items: baseline; gap: 10px; }
.inv-rowtag { flex: none; min-width: 64px; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--inv-card); color: var(--warning); font-size: 12px; font-weight: 700; text-align: center; }

/* cards + tables */
.inv-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--radius-lg); background: var(--inv-card); box-shadow: inset 0 0 0 1px var(--inv-line); }
.inv-card-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.inv-card-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.inv-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-table { container-type: inline-size; }
.inv-row { display: grid; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--inv-line); }
.inv-head { padding-block: 10px; border-radius: var(--radius-sm); border-bottom: 0; background: var(--inv-ground); color: var(--inv-quiet); font-weight: 600; }
.is-now .inv-row { grid-template-columns: minmax(0, 2.6fr) minmax(64px, .7fr) minmax(90px, 1fr) minmax(90px, 1fr) minmax(140px, 1.2fr); }
.is-review .inv-row { grid-template-columns: minmax(0, 2.4fr) 52px repeat(3, minmax(64px, .8fr)) minmax(96px, 1fr) minmax(56px, .6fr) minmax(140px, 1.3fr); }
.inv-row.is-changed { background: color-mix(in srgb, var(--secondary-tint) 45%, transparent); }
.inv-prod { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inv-thumb { flex: none; width: 44px; }
.inv-prod-t { display: flex; flex-direction: column; min-width: 0; }
.inv-name { font-weight: 600; }
.inv-sku { color: var(--inv-quiet); text-align: right; }
.inv-k { display: none; color: var(--inv-quiet); }
.inv-delta.is-up { color: var(--success); }
.inv-delta.is-down { color: var(--inv-ink); }
.inv-delta:not(.is-up):not(.is-down) { color: var(--inv-quiet); }
.inv-empty { padding: 20px 12px; color: var(--inv-quiet); }

@container (max-width: 720px) {
  .inv-head { display: none; }
  .is-now .inv-row, .is-review .inv-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; padding: 14px 4px; }
  .inv-prod { grid-column: 1 / -1; }
  .inv-st { grid-column: 1 / -1; }
  .inv-sec { display: none; }
  .is-now .inv-c:not(.inv-sec) { grid-column: span 2; }
  .is-review .inv-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .inv-c { display: flex; flex-direction: column; }
  .inv-k { display: block; }
}

/* approve bar */
.inv-approve { position: sticky; bottom: env(safe-area-inset-bottom, 0px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--inv-card); box-shadow: var(--shadow-lg); }
.inv-approve > p { flex: 1 1 300px; min-width: 0; }

/* log */
.inv-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.inv-log li { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-block: 10px; border-bottom: 1px solid var(--inv-line); }
.inv-log-n { font-weight: 600; overflow-wrap: anywhere; text-align: right; }

:focus-visible { outline-offset: 2px; }
@media (max-width: 640px) {
  :root { --inv-gutter: 16px; }
  .inv-main { padding-block: 20px 40px; gap: 18px; }
  .inv-actions { width: 100%; }
  .inv-actions > * { flex: 1 1 200px; }
  .inv-stat-v { font-size: 26px; line-height: 34px; }
  .inv-card, .inv-side, .inv-issues { padding: 16px; }
  .inv-approve > .sp-btn-lg { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
/* Storefront layout: full-bleed sections on a 1312px column; the brand's coral hero, country tints and the dark box band carry the identity.
   All colours come from the Snack Passport tokens (light-only brand). */
:root { color-scheme: light; --st-gutter: clamp(16px, 2vw + 8px, 32px); --st-gap: clamp(40px, 2vw + 32px, 72px); }
html, body { background: var(--background); color: var(--text); }
.st-root { min-height: 100%; overflow-x: clip; }
.st-wrap { width: 100%; max-width: 1312px; margin-inline: auto; padding-inline: var(--st-gutter); box-sizing: border-box; }
.st-wrap.st-narrow, .st-narrow { max-width: 820px; }
.st-main { display: flex; flex-direction: column; gap: var(--st-gap); padding-block: clamp(16px, 2vw + 8px, 40px) var(--st-gap); }
.st-main.is-page { padding-block-start: 8px; }
.st-main > * { min-width: 0; }
.st-main h1, .st-main h2, .st-main p { margin: 0; }
.st-stack { display: flex; flex-direction: column; gap: 20px; }
.st-stack.is-tight { gap: 14px; }
.st-row { display: flex; flex-wrap: wrap; gap: 12px; }
.st-row.is-center { justify-content: center; }
.st-center { display: flex; justify-content: center; }
.st-muted { color: var(--muted-text); }
.st-strong { font-weight: 700; }
.st-h1 { font-size: clamp(32px, 1.6vw + 24px, 48px); line-height: 1.3; }
.st-h2 { font-size: clamp(26px, 1.2vw + 20px, 40px); line-height: 1.35; text-wrap: balance; }
.st-lead { max-width: 40em; }

/* demo strip */
.st-demo { background: var(--text); color: var(--text-inverse); }
.st-demo-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; min-height: 36px; padding-block: 4px; }
.st-demo-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding-inline: 12px; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font-weight: 700; text-decoration: none; }
.st-demo-link:focus-visible { outline: 2px solid var(--text-inverse); outline-offset: 2px; }

/* headings */
.st-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.st-sec-head-t { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-ink); }
.st-eyebrow.is-secondary { color: var(--secondary-ink); }
.st-more { display: inline-flex; align-items: center; gap: 2px; min-height: 48px; color: var(--primary-ink); text-decoration: none; }
.st-more.is-secondary { color: var(--secondary-ink); }
.st-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chips.is-scroll { flex-wrap: nowrap; overflow-x: auto; padding-block: 2px 6px; }
.st-chips > * { flex: none; }
.st-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-full); }
.st-pill.is-light { background: var(--background); color: var(--primary-ink); }
.st-pill.is-surface { background: var(--surface); color: var(--sp-ink, var(--text)); }
.st-pill.is-primary { background: var(--primary); color: var(--on-primary); }

/* breadcrumbs + page heads */
.st-page-head { display: flex; flex-direction: column; gap: 8px; }
.st-page-head.is-tight { gap: 4px; }
.st-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.st-crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.st-crumbs [aria-current] { color: var(--muted-text); }
.st-crumb-sep { display: flex; color: var(--muted-text); }

/* hero */
.st-hero-wrap { padding-inline: clamp(12px, 2vw + 4px, 32px); }
.st-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-xl); background: var(--primary); color: var(--text); padding: clamp(24px, 3vw + 8px, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: 24px clamp(24px, 3vw, 48px); }
.st-hero-text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.st-hero-title { margin: 0; font-size: clamp(40px, 2.4vw + 30px, 68px); line-height: 1.2; font-weight: 700; text-wrap: balance; }
.st-hero-mark { padding-inline: 6px; box-shadow: inset 0 -0.4em 0 var(--background); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.st-hero-lead { margin: 0; max-width: 30em; }
.st-perks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.st-perks li { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.st-perk-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--background); }
.st-hero-art { flex: 1.25 1 380px; min-width: 0; position: relative; align-self: stretch; min-height: clamp(300px, 24vw + 180px, 540px); }
.st-hero-disc { position: absolute; left: 50%; bottom: 2%; width: min(94%, 540px); aspect-ratio: 1 / 1; transform: translateX(-50%); border-radius: var(--radius-full); background: var(--background); }
.st-hero-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-hero-route path { stroke: var(--text); stroke-width: 2.5; stroke-dasharray: 1 10; stroke-linecap: round; }
.st-hero-img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; }
.st-stamp { position: absolute; }
.st-hero-badge { width: 92px; height: 92px; border-radius: var(--radius-full); background: var(--text); color: var(--text-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 0 0 4px var(--background), var(--shadow-md); }
.st-hero-badge-a { font-size: 22px; line-height: 26px; font-weight: 700; }
.st-hero-badge-b { font-size: 12px; line-height: 16px; font-weight: 600; }

.st-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.st-countries { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; }
.st-spot { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-xl); background: var(--sp-tint); padding: clamp(20px, 2vw + 12px, 40px) clamp(16px, 2vw + 8px, 40px) 8px; }
.st-spot-stamp { position: absolute; z-index: -1; inset-block-start: -36px; inset-inline-end: -36px; opacity: .9; }
.st-spot-cta { display: flex; margin-bottom: 8px; }
.st-tinted { border-radius: var(--radius-xl); padding: clamp(20px, 2vw + 12px, 36px) clamp(16px, 2vw + 8px, 36px) 8px; }
.st-tinted.is-secondary { background: var(--secondary-tint); }
.st-tinted.is-primary { background: var(--primary-tint); }

/* box band */
.st-box { position: relative; overflow: hidden; isolation: isolate; background: var(--text); color: var(--text-inverse); padding-block: clamp(40px, 3vw + 28px, 80px); }
.st-box-sun { position: absolute; z-index: -1; inset-block-start: -140px; inset-inline-start: -120px; width: 360px; height: 360px; border-radius: var(--radius-full); background: var(--primary); opacity: .9; }
.st-box-stamp { position: absolute; z-index: -1; inset-block-end: 6%; inset-inline-start: 4%; transform: rotate(-14deg); }
.st-box-in { display: flex; flex-wrap: wrap; align-items: center; gap: 32px clamp(32px, 4vw, 64px); }
.st-box-text { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.st-box-title { margin: 0; font-size: clamp(30px, 1.6vw + 24px, 48px); line-height: 1.25; font-weight: 700; color: var(--text-inverse); text-wrap: balance; }
.st-box-lead { margin: 0; max-width: 28em; color: var(--muted-inverse); }
.st-box-img { width: min(100%, 380px); height: auto; margin-top: 8px; }
.st-box-builder { flex: 1.4 1 360px; min-width: 0; color: var(--text); }
.st-main.is-flush { gap: 0; }
.st-main.is-flush > .st-wrap:last-child { margin-top: var(--st-gap); }
.st-main.is-flush > .st-page-head { padding-bottom: 16px; }

/* local products */
.st-grocery { background: var(--background-alt); padding-block: var(--st-gap); margin-block: calc(var(--st-gap) * -1) 0; }
.st-cats { list-style: none; margin: 0; padding: 4px 2px 12px; display: grid; grid-template-columns: repeat(7, minmax(116px, 1fr)); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
.st-cats > li { min-width: 0; scroll-snap-align: start; border-radius: var(--radius-lg); }
.st-cats > li.is-current { box-shadow: 0 0 0 3px var(--secondary-ink); }

/* country page */
.st-cty { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-xl); background: var(--sp-tint); padding: clamp(24px, 3vw + 8px, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: 24px clamp(24px, 4vw, 64px); }
.st-cty-text { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.st-code { font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.st-flavors { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.st-flavors li { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--radius-full); background: var(--surface); }
.st-cty-note { display: flex; align-items: center; gap: 8px; color: var(--sp-ink); font-weight: 600; }
.st-cty-art { flex: 1 1 300px; min-width: 0; position: relative; align-self: stretch; min-height: clamp(300px, 20vw + 180px, 460px); }
.st-cty-ring { position: absolute; left: 50%; top: 50%; width: min(86%, 420px); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: var(--radius-full); background: var(--surface); box-shadow: inset 0 0 0 clamp(10px, 1.2vw, 16px) var(--sp-accent); }
.st-cty-dash { position: absolute; left: 50%; top: 50%; width: min(66%, 324px); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: var(--radius-full); border: 2px dashed var(--sp-ink); opacity: .55; }
.st-cty-img { position: absolute; left: 50%; top: 50%; width: min(76%, 380px); height: auto; transform: translate(-50%, -50%); }
.st-cty-stamp { position: absolute; left: 2%; top: 2%; }

/* empty state, search */
.st-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); text-align: center; }
.st-empty p { margin: 0; }
.st-search { max-width: 640px; margin-top: 6px; }

/* info */
.st-info-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.st-info-list li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.st-info-list li > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.st-info-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--primary-tint); color: var(--primary-ink); }

/* checkout */
.st-checkout-page { display: flex; flex-direction: column; gap: 16px; padding-block: 24px 64px; }
.st-checkout-page h1 { margin: 0; }
.st-demo-note { margin: 0; display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--secondary-tint); color: var(--secondary-ink); font-weight: 600; }
.st-demo-note svg { flex: none; margin-top: 3px; }
.st-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--danger-tint); color: var(--danger); }
.st-alert > div { flex: 1 1 260px; min-width: 0; }
.st-alert p { margin: 0; }
.st-alert .body-sm { color: var(--text); }

/* order lines + cards */
.st-card { padding: 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.st-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.st-lines li { display: flex; align-items: center; gap: 12px; padding-block: 8px; border-bottom: 1px solid var(--border); }
.st-line-img { flex: none; width: 44px; }
.st-line-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-line-name { font-weight: 600; }
.st-kv { margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.st-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.st-kv dt, .st-kv dd { margin: 0; }
.st-kv dd { text-align: left; }
.st-kv .is-total { padding-top: 10px; border-top: 1px solid var(--border); }

/* done */
.st-done { width: 100%; max-width: 640px; margin-inline: auto; padding: 48px 16px 72px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.st-done h1, .st-done p { margin: 0; }
.st-done-stamp { display: grid; place-items: center; width: 132px; height: 132px; border-radius: var(--radius-full); background: var(--surface); box-shadow: inset 0 0 0 8px var(--primary), var(--shadow-md); transform: rotate(-10deg); }
.st-done-stamp > div { display: grid; place-items: center; width: 92px; height: 92px; border-radius: var(--radius-full); border: 2px dashed var(--text); }
.st-done-card { width: 100%; box-sizing: border-box; text-align: start; }
.st-try { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; border-radius: var(--radius-lg); border: 2px dashed var(--border-strong); }
.st-try > .label { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-ink); }

/* my orders */
.st-order { display: flex; flex-direction: column; gap: 12px; }
.st-order-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.st-order-head h2 { margin: 0; }
.st-order-head .body-sm { margin-inline-end: auto; }
.st-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.st-track li { display: flex; flex-direction: column; gap: 6px; color: var(--muted-text); }
.st-track-dot { height: 6px; border-radius: var(--radius-full); background: var(--border); }
.st-track li.is-done { color: var(--text); font-weight: 600; }
.st-track li.is-done .st-track-dot { background: var(--secondary-ink); }
.st-order-total { margin: 0; display: flex; justify-content: space-between; align-items: baseline; }

/* menu sheet */
.st-menu-layer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.st-menu { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(86vw, 360px); box-sizing: border-box; overflow-y: auto; background: var(--surface); padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-lg); }
.st-menu-head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.st-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.st-menu-list a.label { display: flex; align-items: center; gap: 12px; min-height: 52px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.st-menu-sub { display: flex; flex-direction: column; gap: 8px; padding-block: 14px; border-bottom: 1px solid var(--border); }
.st-menu-sub p { margin: 0; }
.st-menu-sub .sp-chip { text-decoration: none; }
a.st-menu-admin { color: var(--primary-ink) !important; }

/* toast */
.st-toast-slot { position: fixed; z-index: var(--z-overlay); inset-inline: 16px; bottom: calc(16px + var(--sp-fab-offset, 0px) + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; pointer-events: none; }
.st-toast { pointer-events: auto; margin: 0; max-width: 560px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--text); color: var(--text-inverse); box-shadow: var(--shadow-lg); animation: st-toast .25s ease both; }
.st-toast-a { flex: none; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); cursor: pointer; }
.st-toast-a:focus-visible { outline: 2px solid var(--text-inverse); outline-offset: 2px; }
@keyframes st-toast { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* admin */
.adm { min-height: 100vh; background: var(--inv-ground); }
.adm .inv-bar-in { gap: 8px 16px; }
.adm-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-inline-end: auto; }
.adm-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-full); color: var(--text); text-decoration: none; }
.adm-tab:hover { background: var(--background-alt); }
.adm-tab.is-active { background: var(--primary-tint); color: var(--primary-ink); }
.adm-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 800; }
.adm-main { display: flex; flex-direction: column; gap: 24px; padding-block: 32px 56px; }
.adm-main .inv-main { padding-block: 0; }
.adm-orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.adm-order { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--inv-line); }
.adm-order.is-new { box-shadow: inset 0 0 0 2px var(--primary); }
.adm-order.is-cancelled { opacity: .72; }
.adm-order-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.adm-time { margin-inline-start: auto; }
.adm-order-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, .9fr); gap: 12px 24px; align-items: start; }
.adm-cust, .adm-sum { display: flex; flex-direction: column; gap: 2px; }
.adm-sum { align-items: flex-start; }
.adm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--inv-line); }
.adm-ask { margin: 0; flex: 1 1 240px; font-weight: 600; }
.adm-reset { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 20px; border-radius: var(--radius-lg); border: 2px dashed var(--border-strong); }
.adm-reset > p { margin: 0; flex: 1 1 260px; }
.adm-reset-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inv-link { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--primary-ink); cursor: pointer; }
.inv-link:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .adm-order-body { grid-template-columns: minmax(0, 1fr); }
  .adm-sum { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
}
@media (max-width: 640px) {
  .adm-main { padding-block: 20px 40px; gap: 18px; }
  .st-done { padding-top: 32px; }
}
@media (prefers-reduced-motion: reduce) { .st-toast { animation: none; } }

/* preview bar */
.st-preview-bar { background: var(--warning-tint); color: var(--warning); font-weight: 600; }
.st-demo-link.is-light { border: 0; cursor: pointer; background: var(--warning); color: var(--text-inverse); }

/* admin · products */
.cat-muted { color: var(--muted-text); }
.cat-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.cat-preview > div { flex: 1 1 320px; min-width: 0; }
.cat-preview p { margin: 0; }
.cat-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.cat-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cat-switch-ui { width: 48px; height: 28px; border-radius: var(--radius-full); background: var(--border-strong); position: relative; transition: background-color .15s ease; }
.cat-switch-ui::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: inset-inline-start .15s ease; }
.cat-switch input:checked + .cat-switch-ui { background: var(--secondary-ink); }
.cat-switch input:checked + .cat-switch-ui::after { inset-inline-start: 23px; }
.cat-switch input:focus-visible + .cat-switch-ui { box-shadow: var(--focus-ring); }
.cat-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.cat-search { flex: 1 1 260px; min-width: 0; }
.cat-select { display: flex; flex-direction: column; gap: 2px; }
.cat-select select { min-height: 44px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-family: inherit; max-width: 200px; }
.cat-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--primary-tint); }
.cat-table { container-type: inline-size; }
.cat-row-g { display: grid; grid-template-columns: 32px minmax(220px, 2.4fr) minmax(110px, 1.1fr) minmax(110px, 1.1fr) 92px 100px 84px minmax(120px, 1fr) minmax(150px, auto); gap: 10px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--border); }
.cat-row-g.is-sel { background: color-mix(in srgb, var(--primary-tint) 60%, transparent); }
.cat-head { border-bottom: 0; border-radius: var(--radius-sm); background: var(--background-alt); color: var(--muted-text); font-weight: 600; }
.cat-row-g input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--text); }
.cat-prod { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cat-thumb { flex: none; width: 48px; }
.cat-prod-t, .cat-c { display: flex; flex-direction: column; min-width: 0; }
.cat-name { font-weight: 600; }
.cat-k { display: none; color: var(--muted-text); }
.cat-st { align-items: flex-start; gap: 4px; }
.cat-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.cat-num input { width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-family: var(--font-latin); }
.cat-num input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@container (max-width: 900px) {
  .cat-head { display: none; }
  .cat-row-g { grid-template-columns: 32px repeat(4, minmax(0, 1fr)); gap: 8px 10px; padding: 14px 4px; }
  .cat-chk { grid-row: span 1; }
  .cat-prod { grid-column: 2 / -1; }
  .cat-row-g > .cat-c { grid-column: span 2; }
  .cat-row-g > .cat-c:nth-of-type(1) { grid-column: 2 / span 2; }
  .cat-k { display: block; }
  .cat-st { grid-column: 2 / -1 !important; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cat-act { grid-column: 2 / -1; justify-content: flex-start; }
}
.cat-import .inv-approve { position: static; box-shadow: none; padding: 0; }
.cat-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.cat-mini { margin: 0; padding-inline-start: 18px; max-height: 260px; overflow: auto; }

/* editor */
.cat-layer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.cat-editor { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(100vw, 760px); box-sizing: border-box; display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--shadow-lg); }
.cat-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.cat-editor-head h2 { margin: 0; }
.cat-editor-body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 18px; }
.cat-editor-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.cat-spacer { flex: 1; }
.cat-ask { margin: 0; flex: 1 1 200px; font-weight: 600; }
.cat-img { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.cat-img-box { flex: none; width: 132px; }
.cat-img-t { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cat-img-t p { margin: 0; }
.cat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cat-filebtn { cursor: pointer; }
.cat-img:focus-within .cat-filebtn { box-shadow: var(--focus-ring); }
.cat-group { margin: 0; padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cat-group legend { padding: 0 6px; display: inline-flex; align-items: center; gap: 6px; }
.cat-group.is-internal { background: var(--background-alt); }
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.cat-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cat-field p { margin: 0; }
.cat-field.is-wide, .cat-check.is-wide { grid-column: 1 / -1; }
.cat-input { width: 100%; min-height: 44px; box-sizing: border-box; padding: 8px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-family: inherit; }
textarea.cat-input { resize: vertical; }
.cat-input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cat-field.is-invalid .cat-input { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.cat-err { color: var(--danger); display: flex; align-items: center; gap: 4px; }
.cat-ok { color: var(--success); }
.cat-check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.cat-check input { width: 20px; height: 20px; accent-color: var(--text); }
.cat-link { display: inline-flex; align-items: center; gap: 4px; color: var(--primary-ink); }
@media (max-width: 640px) { .cat-grid { grid-template-columns: minmax(0, 1fr); } .cat-editor-body { padding: 14px 16px 20px; } }

/* --- clean redesign overrides --- */
.st-hero { background: var(--background-alt); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.st-hero-mark { box-shadow: none; color: var(--primary-ink); padding-inline: 0; }
.st-hero-art { display: grid; place-items: center; align-self: center; min-height: 0; width: 100%; aspect-ratio: 1; isolation: isolate; }
.st-hero-img { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: transparent; border: 0; border-radius: 0; filter: drop-shadow(0 14px 16px var(--hero-product-shadow)) drop-shadow(0 0 28px var(--hero-product-glow)); animation: st-product-appear 700ms ease-out both; }
@keyframes st-product-appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .st-hero-img { animation: none; } }
@media (max-width: 760px) { .st-hero { grid-template-columns: minmax(0, 1fr); } .st-hero-art { max-width: 420px; justify-self: center; } }
.st-grocery { background: transparent; }
.st-cat-rail-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
@media (max-width: 640px) {
  .st-hero-art { display: grid; }
  .st-hero { padding: 24px 20px; }
  .st-hero-title { font-size: 34px; }
  .st-countries { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 4px; }
  .st-countries > * { flex: 0 0 62%; scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .sp-logo { min-width: 0; }
  .sp-logo-ar { font-size: 16px !important; line-height: 22px !important; white-space: normal; }
  .sp-logo-en { display: none; }
}

/* accounts, favorites, reviews */
.st-auth { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.st-auth-or { text-align: center; }
.st-auth-bad { color: #C0392B; }
.st-auth-me { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.st-extras { display: flex; flex-direction: column; gap: 14px; padding-block: 24px; }
.st-extras-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.st-extras-head .sp-btn { margin-inline-start: auto; }
.st-extras-avg { display: inline-flex; align-items: center; gap: 8px; }
.st-stars { display: inline-flex; gap: 2px; }
.st-star { border: 0; background: none; padding: 0; line-height: 1; color: #D4D4D4; cursor: pointer; }
.st-star:disabled { cursor: default; }
.st-star.is-on { color: #F5A623; }
.st-review-form { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.st-review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.st-review { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; }

/* ---- POS (Point of Sale) ---- */
.pos-page { display: flex; flex-direction: column; gap: 24px; }
.pos-header { display: flex; flex-direction: column; gap: 6px; }
.pos-muted { color: var(--inv-quiet, var(--muted-text)); }
.pos-worker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pos-input { padding: 10px 14px; border: 1px solid var(--inv-line, var(--border)); border-radius: var(--radius-md, 12px); background: var(--inv-card, var(--surface)); font-size: 1rem; width: 100%; box-sizing: border-box; }
.pos-input:focus { outline: none; box-shadow: var(--focus-ring); }
.pos-input-row { display: flex; gap: 8px; }
.pos-input-wrap { position: relative; flex: 1; min-width: 0; }
.pos-input-wrap .pos-input { padding-inline-start: 44px; }
.pos-input-icon { position: absolute; top: 50%; inset-inline-start: 14px; transform: translateY(-50%); color: var(--inv-quiet, var(--muted-text)); pointer-events: none; }
.pos-stats { margin-block: -8px 0; }
.pos-hint { margin-top: -8px; }

/* search results */
.pos-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--inv-line, var(--border)); border-radius: var(--radius-md, 12px); background: var(--inv-card, var(--surface)); max-height: 380px; overflow-y: auto; }
.pos-result { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.pos-result:hover { background: var(--background-alt, #F2F2F2); }
.pos-result-img { width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm, 8px); overflow: hidden; }
.pos-result-img img { width: 100%; height: 100%; object-fit: cover; }
.pos-result-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pos-stock-label { flex: none; }
.pos-stock-label.is-zero { color: var(--danger, #C0392B); font-weight: 600; }
.pos-stock-label.is-untracked { color: var(--inv-quiet, var(--muted-text)); font-style: italic; }

/* link barcode */
.pos-link-box { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--inv-line, var(--border)); border-radius: var(--radius-md, 12px); background: var(--inv-card, var(--surface)); }
.pos-link-alert { display: flex; flex-direction: column; gap: 4px; color: var(--danger, #C0392B); }
.pos-link-done { border-color: var(--success, #00A86B); }
.pos-link-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* camera */
.pos-cam-buttons { display: flex; gap: 8px; }
.pos-camera-box { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--inv-line, var(--border)); border-radius: var(--radius-md, 12px); background: var(--inv-card, var(--surface)); }
.pos-camera-video { width: 100%; max-width: 480px; border-radius: var(--radius-md, 12px); }
.pos-cam-status { text-align: center; }
.pos-cam-err { color: var(--danger, #C0392B); display: flex; align-items: flex-start; gap: 6px; }
.pos-filebtn { cursor: pointer; }

/* message */
.pos-msg { padding: 12px 16px; border-radius: var(--radius-md, 12px); }
.pos-msg.is-success { background: var(--success-tint, #E6F9EE); color: var(--success, #00A86B); font-weight: 600; }
.pos-msg.is-warning { background: #FFF3E0; color: #E65100; font-weight: 600; }
.pos-msg.is-error { background: var(--danger-tint, #FDEDEC); color: var(--danger, #C0392B); font-weight: 600; }

/* invoice */
.pos-invoice { display: flex; flex-direction: column; gap: 12px; }
.pos-empty { color: var(--inv-quiet, var(--muted-text)); padding: 24px 0; text-align: center; }
.pos-invoice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--inv-line, var(--border)); border-radius: var(--radius-md, 12px); overflow: hidden; }
.pos-inv-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--inv-card, var(--surface)); }
.pos-inv-row.is-oversell { background: #FFF3E0; }
.pos-inv-img { width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm, 8px); overflow: hidden; }
.pos-inv-img img { width: 100%; height: 100%; object-fit: cover; }
.pos-inv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pos-oversell-warn { color: #E65100; display: flex; align-items: center; gap: 4px; }
.pos-inv-qty { display: flex; align-items: center; gap: 6px; flex: none; }
.pos-invoice-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }
.pos-invoice-actions { display: flex; gap: 8px; }

/* sales log */
.pos-log { display: flex; flex-direction: column; gap: 12px; }
.pos-log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pos-log-item { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border: 1px solid var(--inv-line, var(--border)); border-radius: var(--radius-md, 12px); background: var(--inv-card, var(--surface)); }
.pos-log-item.is-reversed { opacity: 0.5; }
.pos-log-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pos-log-items { word-break: break-word; }
.pos-reverse-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* responsive */
@media (max-width: 640px) {
  .pos-input-row { flex-direction: column; }
  .pos-inv-row { flex-wrap: wrap; }
}
.st-staff-form{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.st-staff-input{flex:1 1 200px;min-height:44px;padding:0 12px;border:1px solid var(--sp-border,#ddd);border-radius:12px;background:var(--sp-surface,#fff);font:inherit}
.st-staff-msg.is-danger{color:var(--sp-danger,#c0392b)}.st-staff-msg.is-success{color:var(--sp-accent,#00A86B)}
.st-staff-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.st-staff-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 12px;background:var(--sp-surface-2,#F2F2F2);border-radius:12px}
.st-staff-list li>span:first-child{flex:1;font-weight:600}
.inv-reorder-alert{border:1.5px solid var(--sp-danger,#c0392b);background:color-mix(in srgb,var(--sp-danger,#c0392b) 7%,transparent);border-radius:16px;padding:14px 16px;margin:0 0 16px}
.inv-reorder-alert h2{display:flex;align-items:center;gap:8px;color:var(--sp-danger,#c0392b);margin:0 0 8px}
.inv-reorder-alert ul{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:4px}
.inv-reorder-alert li{display:flex;justify-content:space-between;gap:12px}
.inv-reorder{width:72px;min-height:36px;padding:0 8px;border:1px solid var(--sp-border,#ddd);border-radius:10px;font:inherit;text-align:center;background:var(--sp-surface,#fff)}
.inv-table.is-now .inv-row{grid-template-columns:minmax(0,2.2fr) repeat(5,minmax(0,1fr))}
.inv-st{display:flex;flex-wrap:wrap;gap:4px}
.ins-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.ins-rank{margin:8px 0 0;padding-inline-start:20px;display:grid;gap:6px}
.ins-rank li{display:flex;justify-content:space-between;gap:8px}
.ins-chips{display:flex;flex-wrap:wrap;gap:6px}
.ins-chip{border:1px solid var(--sp-border,#ddd);background:var(--sp-surface,#fff);border-radius:999px;padding:6px 12px;cursor:pointer;font:inherit}
.ins-answer{white-space:pre-wrap;margin-top:12px;padding:14px;border-radius:12px;background:var(--sp-surface-2,#F2F2F2);line-height:1.8}
.ins-table{display:grid;gap:2px;margin-top:8px}
.ins-row{display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr));gap:8px;padding:8px 6px;border-bottom:1px solid var(--sp-border,#eee)}
.ins-row.is-warn{background:color-mix(in srgb,var(--sp-danger,#c0392b) 8%,transparent)}
.inv-main>.inv-card,.inv-main>.ins-grid{margin-bottom:16px}

/* ================= owner area: sidebar shell, home, reports ================= */
.ow { display: flex; min-height: 100vh; width: 100%; background: var(--background-alt); }
.ow-side { position: sticky; top: 0; height: 100vh; width: 240px; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px; box-sizing: border-box; background: var(--surface); border-inline-start: 0; border-inline-end: 1px solid var(--border); overflow-y: auto; transition: width .15s; z-index: 40; }
.ow-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 12px; border-bottom: 1px solid var(--border); }
.ow-close-btn, .ow-burger { display: none; }
.ow-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ow-nav-link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; box-sizing: border-box; border: 0; background: none; border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: 14px; text-align: start; text-decoration: none; cursor: pointer; border-inline-start: 3px solid transparent; }
.ow-nav-link:hover { background: var(--background-alt); }
.ow-nav-link.is-top { font-weight: 700; }
.ow-nav-link.is-active { background: var(--primary-tint); color: var(--primary-ink); border-inline-start-color: var(--primary); font-weight: 700; }
.ow-nav-link.has-active { color: var(--primary-ink); }
.ow-nav-text { flex: 1; }
.ow-sub { display: flex; flex-direction: column; padding-inline-start: 22px; }
.ow-sub .ow-nav-link { min-height: 36px; font-size: 13.5px; }
.ow-caret { transition: transform .15s; font-size: 18px; line-height: 1; }
.ow-caret.is-open { transform: rotate(-90deg); }
.ow-side-foot { border-top: 1px solid var(--border); padding-top: 8px; }
.ow.is-mini .ow-side { width: 68px; }
.ow.is-mini .ow-nav-text, .ow.is-mini .ow-sub, .ow.is-mini .ow-caret, .ow.is-mini .ow-side-head .sp-logo, .ow.is-mini .ow-side-head a { display: none; }
.ow.is-mini .ow-group-count { position: absolute; transform: translate(-14px, -12px) scale(.8); }
.ow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ow-top { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.ow-main { flex: 1; min-width: 0; padding: 20px 16px 40px; box-sizing: border-box; max-width: 1280px; width: 100%; margin: 0 auto; }
.ow-main .adm-main { padding: 0; }
.ow-scrim { display: none; }
@media (max-width: 900px) {
  .ow-side { position: fixed; inset-block: 0; inset-inline-start: 0; width: 272px; transform: translateX(100%); box-shadow: var(--shadow-lg); }
  .ow.is-drawer .ow-side { transform: none; }
  .ow.is-drawer .ow-scrim { display: block; position: fixed; inset: 0; background: var(--overlay); z-index: 30; }
  .ow-mini-btn { display: none; }
  .ow-close-btn, .ow-burger { display: inline-grid; }
  .ow.is-mini .ow-side { width: 272px; }
  .ow.is-mini .ow-nav-text, .ow.is-mini .ow-sub, .ow.is-mini .ow-caret { display: initial; }
}
.ow-page { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ow-rhead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ow-rhead h1 { display: flex; align-items: center; gap: 8px; }
.ow-crumbs a { color: inherit; }
.ow-export { display: flex; gap: 8px; flex-wrap: wrap; }
.ow-warn { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--danger-tint); color: var(--text); }
.ow-empty { padding: 32px 0; text-align: center; }
.ow-dim { opacity: .55; transition: opacity .15s; }
.ow-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
.ow-kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--text); text-decoration: none; min-width: 0; }
.ow-kpi .is-good { color: #15803d; } .ow-kpi .is-bad { color: #b42318; }
.ow-kpi.is-link:hover { box-shadow: inset 0 0 0 2px var(--primary); }
.ow-spark { width: 100%; height: 28px; color: var(--primary); }
.ow-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; margin-bottom: 12px; }
.ow-chart { margin: 0; padding: 14px; border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); min-width: 0; }
.ow-chart-box { width: 100%; height: 320px; }
@media (max-width: 600px) { .ow-chart-box { height: 260px; } }
.ow-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ow-alerts a { color: var(--text); display: flex; gap: 8px; align-items: center; }
.ow-skel { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ow-skel div { height: 84px; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--border) 0%, var(--background-alt) 50%, var(--border) 100%); background-size: 200% 100%; animation: owsk 1.2s infinite linear; }
.ow-skel .is-tall { grid-column: 1 / -1; height: 260px; }
@keyframes owsk { to { background-position: -200% 0; } }
/* reports index */
.ow-rtabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.ow-rtab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-width: 140px; justify-content: center; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--text); text-decoration: none; }
.ow-rtab.is-active { background: var(--primary-tint); box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary-ink); }
.ow-search { max-width: 520px; }
.ow-rgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .ow-rgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .ow-rgrid { grid-template-columns: repeat(3, 1fr); } }
.ow-rcard { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--text); text-decoration: none; }
.ow-rcard:hover { box-shadow: inset 0 0 0 1.5px var(--primary); }
.ow-rcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ow-rcard-top h3 { margin: 0; font-weight: 800; }
.ow-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; flex: 1; }
.ow-rcard-foot { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; }
.ow-star { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-full); background: none; color: var(--muted-text); cursor: pointer; flex: none; }
.ow-star.is-on { color: var(--primary); }
.ow-star:hover { background: var(--background-alt); }
/* filters */
.ow-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px; border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.ow-filters.is-inline { padding: 0; box-shadow: none; background: none; }
.ow-filters select, .ow-filters input[type=date], .ow-table-tools select { min-height: 40px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); font: inherit; color: var(--text); }
.ow-field { display: flex; flex-direction: column; gap: 4px; }
.ow-field.is-block { width: 100%; max-width: 420px; }
.ow-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; }
.ow-sheet-head, .ow-filter-btn { display: none; }
@media (max-width: 700px) {
  .ow-filter-btn { display: inline-flex; align-self: flex-start; }
  .ow-filters:not(.is-inline) { display: none; }
  .ow-filters.is-open { display: flex; flex-direction: column; align-items: stretch; position: fixed; inset-inline: 0; bottom: 0; z-index: 60; max-height: 80vh; overflow-y: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg); padding: 16px; }
  .ow-filters.is-open .ow-sheet-head { display: flex; justify-content: space-between; align-items: center; }
}
/* table */
.ow-table-card { padding: 12px; }
.ow-table-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.ow-table-tools input { flex: 1; min-width: 160px; }
.ow-table-wrap { overflow-x: auto; max-width: 100%; }
.ow-table { width: 100%; border-collapse: collapse; }
.ow-table th, .ow-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: start; white-space: nowrap; }
.ow-table th button { border: 0; background: none; font: inherit; font-weight: 700; color: var(--muted-text); cursor: pointer; padding: 0; }
.ow-table tfoot td { font-weight: 800; background: var(--background-alt); position: sticky; bottom: 0; }
.ow-table tr.is-late td, .ow-rowcard.is-late { background: #fff4e5; }
.ow-cost { width: 110px; }
.ow-cards { display: none; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 8px; }
.ow-rowcard { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--border); }
.ow-rowcard > div { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ow-rowcard.is-total { background: var(--background-alt); font-weight: 700; }
@media (max-width: 700px) { .ow-report .ow-table-wrap { display: none; } .ow-report .ow-cards { display: flex; } }
.ow-pager { display: flex; justify-content: center; align-items: center; gap: 12px; }
/* start here */
.ow-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ow-steps li { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.ow-steps a { color: var(--text); flex: 1; }
.ow-step-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 2px var(--border-strong); color: var(--on-primary); font-weight: 800; }
.ow-steps li.is-done .ow-step-mark { background: var(--primary); box-shadow: none; }
.ow-steps li.is-done a { color: var(--muted-text); text-decoration: line-through; }
.ow-form { max-width: 640px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* print / PDF */
.ow-print-head, .ow-print-only { display: none; }
@page { size: A4 portrait; margin: 12mm; }
html.ow-landscape { }
@media print {
  .ow-side, .ow-top, .ow-noprint, .ow-scrim, .ow-filter-btn, .ow-star, .ow-crumbs, .ow-cards, .adm-reset { display: none !important; }
  .ow, .ow-main { display: block; padding: 0; background: #fff; }
  .ow-print-head { display: flex; justify-content: space-between; border-bottom: 1px solid #ccc; padding-bottom: 6px; margin-bottom: 8px; }
  .ow-print-only { display: block; }
  .ow-report .ow-table-wrap { display: block !important; overflow: visible; }
  .ow-table thead { display: table-header-group; } .ow-table tfoot { display: table-row-group; }
  .ow-table tr, .ow-kpi, .ow-chart { break-inside: avoid; }
  .ow-table th, .ow-table td { white-space: normal; padding: 4px; font-size: 10px; }
  .ow-chart, .ow-kpi, .inv-card { box-shadow: 0 0 0 1px #ddd; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* purchasing */
.pu-form { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.pu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.pu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pu-totals { margin-inline-start: auto; font-weight: 700; }
.pu-select { min-height: 40px; width: 100%; }
.pu-lines select { min-width: 160px; }
.pu-row-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.pu-form .st-staff-input { height: auto; min-height: 44px; flex: none; align-self: stretch; }
.ow-form .st-staff-input { flex: none; height: 44px; box-sizing: border-box; width: 100%; }
.ow-form { display: flex; flex-direction: column; gap: 12px; }
.ow-page .ow-field { min-width: 0; }
.rc-layer { position: fixed; inset: 0; z-index: 200; overflow: auto; background: var(--background-alt); padding: 24px 12px; color: var(--text); }
.rc-controls { display:flex; gap:12px; justify-content:center; margin-bottom:20px; }
.rc-paper { box-sizing:border-box; width: min(100%, 360px); margin:auto; background:var(--surface); padding:20px 12px; font-size:12px; line-height:1.7; text-align:center; }
.rc-paper h2 { font-size:14px; font-weight:600; margin:12px 0 4px; }
.rc-paper table { border-collapse:collapse; width:100%; margin:16px 0; table-layout:fixed; }
.rc-paper th,.rc-paper td { padding:5px 2px; border-block:1px solid var(--border-strong); overflow-wrap:anywhere; }
.rc-items th:first-child { width:42%; }
.rc-paper dl div { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed var(--border-strong); text-align:start; }
.rc-paper dd { margin:0; white-space:nowrap; }
.rc-total { font-size:16px; font-weight:700; }
.rc-notice { color:var(--warning); }
.rc-paper img { display:block; margin:20px auto 0; max-width:100%; height:auto; }
@media print { body:has(.rc-layer) #root > * { visibility:hidden; } .rc-layer,.rc-layer * { visibility:visible !important; } .rc-layer { position:absolute; inset:0; background:var(--surface); padding:0; overflow:visible; } .rc-controls { display:none; } .rc-paper { margin:0 auto; } }

/* ===== 2026 storefront update: flags, weights, legal pages ===== */
.sp-tone-spain { --tone: #C60B1E; --tone-soft: #FBEAEA; }
.sp-flag { display: inline-block; border-radius: 50%; overflow: hidden; flex: none; vertical-align: middle; box-shadow: 0 0 0 2px var(--tone, #e3e3e3); }
.sp-ccard-stamp.sp-flag, .sp-pdp-stamp.sp-flag { box-shadow: 0 0 0 3px var(--tone, #e3e3e3); }
.st-country-row { margin-block-end: 8px; }
.st-country-row .sp-chip { display: inline-flex; align-items: center; gap: 6px; }
.st-country-row .sp-flag { box-shadow: none; }

/* weight chips on cards and product page */
.sp-pcard-weights { display: flex; flex-direction: column; gap: 6px; margin-block-start: 8px; }
.sp-wrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface, #F2F2F2); border-radius: 10px; padding: 4px 8px; }
.sp-wrow-label { white-space: nowrap; }
.sp-pdp-weights { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 12px; }
.sp-wchip { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px; }
.sp-wchip.is-selected { outline: 2px solid var(--primary, #00A86B); }

/* legal / help pages */
.st-legal { max-width: 720px; }
.st-legal-h { margin: 28px 0 8px; }
.st-legal-p { margin: 10px 0; line-height: 1.9; }
.st-legal-list { margin: 8px 0; padding-inline-start: 22px; display: grid; gap: 6px; }
.st-legal a, .st-faq a, .st-done a { color: var(--primary, #00A86B); text-decoration: underline; }
.st-faq { display: grid; gap: 8px; }
.st-faq-item { background: var(--surface, #F2F2F2); border-radius: 12px; padding: 4px 16px; }
.st-faq-item summary { cursor: pointer; padding: 12px 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; list-style: none; }
.st-faq-item summary::-webkit-details-marker { display: none; }
.st-faq-item[open] summary { border-bottom: 1px solid rgba(0,0,0,.08); }
.st-faq-item p { padding: 12px 0; }
.sp-co-agree { margin: 12px 0 0; text-align: center; }
.sp-co-agree a { color: var(--primary, #00A86B); text-decoration: underline; }
.sp-co-delivery-note { margin-block-start: 16px; }
.st-form-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-block: 12px; }
.st-check { display: flex; align-items: center; gap: 8px; margin-block: 12px; }
.cat-weights { display: grid; gap: 10px; }
.cat-wgrid { display: grid; gap: 8px; }
.cat-wrow { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 8px; align-items: center; }

/* 5 country cards in one row on desktop */
@media (min-width: 900px) {
  .st-countries { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .st-countries .sp-ccard { min-width: 0; }
}

/* box promo at very top of home */
.st-top-promo{padding-top:16px}

/* country cards: flag-first, uniform light surface, no product art */
.sp-ccard { min-height: 0; align-items: center; gap: 10px; padding: 18px 14px 16px; background: var(--background-alt); text-align: center; }
.sp-ccard:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sp-ccard-stamp { transform: none; }
.sp-ccard-stamp.sp-flag { box-shadow: 0 0 0 4px var(--surface), 0 6px 16px #1111110f; }
.sp-ccard-text { align-items: center; margin-block-start: 0; }
.sp-ccard-name { font-size: 19px; line-height: 26px; }
.sp-ccard-foot { flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin-block-start: 4px; }
.sp-ccard-count { color: var(--muted-text); font-weight: 500; }
.sp-ccard-cta { color: var(--primary); }
.sp-ccard.is-selected { box-shadow: inset 0 0 0 2px var(--primary); transform: none; background: var(--primary-tint); }
button.sp-ccard .sp-ccard-foot { padding-inline-end: 0; }
@media (max-width: 640px) {
  .st-countries .sp-ccard { padding: 16px 12px 14px; }
  .st-countries .sp-ccard-stamp { width: 64px !important; height: 64px !important; }
}

/* product cards: price block above a full-width button, adaptive columns, uncropped images */
.sp-pcard-body { gap: 4px; }
.sp-pcard-pricebox { margin-block-start: auto; padding-block-start: var(--space-2); display: flex; flex-direction: column; gap: 2px; }
.sp-pcard-unit { margin: 0; color: var(--muted-text); }
.sp-pcard-weights { margin-block-start: var(--space-2); }
.sp-wrow { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; align-items: stretch; gap: 6px; padding: 8px; }
.sp-wrow-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; white-space: normal; }
.sp-wrow-price { color: var(--text); font-weight: 600; }
.sp-pcard-atc { margin-block-start: var(--space-2); }
.sp-pimg img { object-fit: contain; padding: 6%; box-sizing: border-box; }
.sp-pgrid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@container (min-width: 720px) { .sp-pgrid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
.sp-rail-track { grid-auto-columns: clamp(170px, 40vw, 220px); }
@container (min-width: 720px) { .sp-rail-track { grid-auto-columns: clamp(200px, 20vw, 260px); } }



/* purchase invoice lines: searchable name + barcode */
.pu-pick { position: relative; min-width: 200px; }
.pu-pick-input { width: 100%; }
.pu-pick-list { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30; max-height: 260px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); min-width: 240px; }
.pu-pick-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px; border: 0; background: none; text-align: start; border-radius: 8px; cursor: pointer; font: inherit; color: var(--text); }
.pu-pick-list button:hover, .pu-pick-list [aria-selected="true"] button { background: var(--background-alt); }
.pu-pick-list .caption { color: var(--muted-text); }
.pu-pick-empty { padding: 8px 10px; color: var(--muted-text); }
.pu-bc { min-width: 140px; }
.pu-bc-input { width: 100%; }
.pu-bc-input[aria-invalid="true"] { border-color: var(--danger, #c62828); }
.pu-bc-miss { margin: 4px 0 0; color: var(--danger, #c62828); }
.pu-lines .ow-table-wrap, .ow-table-wrap:has(.pu-lines) { overflow: visible; }
@media (max-width: 720px) {
  .pu-lines thead { display: none; }
  .pu-lines, .pu-lines tbody, .pu-lines tr, .pu-lines td { display: block; width: 100%; }
  .pu-lines tr { border: 1px solid var(--border); border-radius: 12px; padding: 10px; margin-block-end: 10px; }
  .pu-lines td { border: 0; padding: 4px 0; }
  .pu-lines td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted-text); margin-block-end: 2px; }
}

/* staff permissions */
.st-staff-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.st-staff-row.is-disabled .st-staff-who { opacity: .6; }
.st-staff-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.st-staff-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st-staff-confirm { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--background-alt); }
.st-perm-panel { flex-basis: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); }
.st-perm-head h3 { margin: 0 0 4px; }
.st-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.st-perm-sec { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px 10px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.st-perm-sec legend { padding: 0 4px; }
.st-perm-all { display: flex; justify-content: flex-end; }
.st-perm-link { border: 0; background: none; color: var(--primary); cursor: pointer; padding: 0; font: inherit; }
.st-perm-opt { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.st-perm-opt input { width: 18px; height: 18px; accent-color: var(--primary); }
.st-perm-actions { display: flex; gap: 8px; flex-wrap: wrap; }