/* RYD — global styles. Shared by every page.
   Direction: performance / motorsport. Palette: red #ee2b2a, black, white.
   Display type: Saira Condensed (stands in for the Xeriko logo font). */

:root {
  --red:#ee2b2a; --red-dark:#c81f1e;
  --ink:#111318; --ink-2:#585c65;
  --paper:#ffffff; --panel:#f5f6f7; --line:#e6e8ea;
  --black:#0c0d10; --black-2:#17191d;
  --on-dark:#f4f5f6; --on-dark-2:#a2a7b0; --line-dark:rgba(255,255,255,.14);
  --font-display:"Saira Condensed",system-ui,sans-serif;
  --font-body:"Saira","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --wrap:1160px; --radius:8px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font-family:var(--font-body);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
main { min-height:60vh; }
img { display:block; max-width:100%; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }

h1,h2,h3 { font-family:var(--font-display); font-weight:800; letter-spacing:-.01em; line-height:1.02; }
.eyebrow { font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.eyebrow .dot { color:var(--red); }

/* Brand ribbon + nav */
.nav { position:sticky; top:0; z-index:50; display:flex; align-items:stretch; min-height:64px;
  border-top:3px solid var(--red); border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand { display:inline-flex; align-items:center; gap:10px; }
.brand__slash { width:5px; height:24px; background:var(--red); transform:skewX(-16deg); border-radius:1px; }
.brand__logo { height:26px; width:auto; }
.nav__brand { display:flex; align-items:center; background:var(--red);
  padding:0 48px 0 24px; clip-path:polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%); }
.nav__brand .brand__logo { height:28px; }
.nav__links { display:flex; gap:28px; align-items:center; margin-left:auto; padding-right:28px; font-size:14px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; }
.nav__links a { color:var(--ink-2); transition:color .15s; }
.nav__links a:hover, .nav__links a[aria-current="page"]:not(.btn) { color:var(--ink); }
.nav__links a[aria-current="page"]:not(.btn) { text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:6px; text-decoration-thickness:2px; }
.nav__toggle { display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:40px; padding:0 10px; background:transparent; border:1px solid var(--line);
  border-radius:6px; cursor:pointer; }
.nav__toggle span { display:block; height:2px; width:100%; background:var(--ink); border-radius:2px;
  transition:transform .2s, opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Buttons (skewed edge = speed cue) */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body);
  font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.04em;
  padding:12px 22px; border-radius:6px; border:1px solid transparent; cursor:pointer;
  transition:transform .1s, background .15s, border-color .15s, color .15s; }
.btn:active { transform:translateY(1px); }
.btn--volt { background:var(--red); color:#fff; }        /* primary = brand red */
.btn--volt:hover { background:var(--red-dark); }
.btn--dark { background:var(--ink); color:var(--paper); }
.btn--dark:hover { background:#000; }
.btn--ghost { background:transparent; border-color:var(--line); color:var(--ink); }
.btn--ghost:hover { border-color:var(--ink); }
.btn--ghost-light { background:transparent; border-color:rgba(255,255,255,.28); color:var(--on-dark); }
.btn--ghost-light:hover { border-color:#fff; }

/* Hero (dark, motorsport) */
.hero { position:relative; overflow:hidden; background:var(--black); color:var(--on-dark);
  border-bottom:1px solid #000; }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(-24deg, transparent 0 38px, rgba(255,255,255,.028) 38px 39px); }
.hero::after { content:""; position:absolute; top:-20%; right:-8%; width:42%; height:150%;
  background:var(--red); transform:skewX(-14deg); opacity:.10; pointer-events:none; }
.hero__inner { position:relative; padding:92px 24px 84px; }
.hero__logo { height:40px; width:auto; margin-bottom:26px; opacity:.96; }
.hero h1 { font-size:clamp(46px,8.5vw,104px); font-weight:800; font-style:italic;
  text-transform:uppercase; letter-spacing:-.015em; line-height:.94; max-width:15ch; margin:14px 0 0; }
.hero h1 span { display:block; white-space:nowrap; }
.hero__accent { color:var(--red); }
.hero__lede { margin-top:28px; max-width:620px; font-size:18px; color:var(--on-dark-2); }
.hero__actions { margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; }
.readout { position:relative; margin-top:56px; display:grid;
  grid-template-columns:repeat(3,1fr); background:rgba(255,255,255,.03);
  border:1px solid var(--line-dark); border-radius:var(--radius); overflow:hidden; }
.readout__cell { padding:18px 20px; border-right:1px solid var(--line-dark); }
.readout__cell:last-child { border-right:none; }
.readout__k { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-2); }
.readout__v { font-family:var(--font-display); font-weight:800; font-size:30px; margin-top:4px; color:#fff; }
.readout__v .unit { font-size:13px; color:var(--on-dark-2); font-weight:600; }

/* Sections + page heads */
.section { padding:80px 0; }
.section__head { display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:36px; flex-wrap:wrap; }
.section__head h2 { font-size:clamp(30px,4.5vw,46px); text-transform:uppercase; margin-top:10px; }
.lede { max-width:62ch; font-size:18px; color:var(--ink-2); }
.page-head { padding:64px 0 8px; }
.page-head h1 { font-size:clamp(40px,7vw,72px); font-style:italic; text-transform:uppercase; margin-top:12px; }
.page-head p { margin-top:16px; max-width:56ch; color:var(--ink-2); font-size:18px; }
.crumb { font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--ink-2); }
.crumb a:hover { color:var(--red); }
.group-label { font-family:var(--font-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); margin:44px 0 18px; padding-bottom:10px;
  border-bottom:1px solid var(--line); scroll-margin-top:88px; position:relative; }
.group-label::before { content:""; position:absolute; left:0; bottom:-1px; width:44px; height:2px; background:var(--red); }

/* Vehicle class tiles */
.classes { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.class-tile { position:relative; overflow:hidden; padding:26px; min-height:220px; background:var(--surface,#fff);
  border:1px solid var(--line); border-radius:var(--radius); transition:border-color .15s, transform .15s;
  display:flex; flex-direction:column; justify-content:space-between; }
.class-tile:hover { border-color:var(--red); transform:translateY(-3px); }
.class-tile__num { font-family:var(--font-display); font-weight:800; font-style:italic;
  font-size:70px; line-height:1; letter-spacing:-.04em; }
.class-tile__num span { color:var(--red); }
.class-tile__label { display:block; margin-top:12px; font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.class-tile__go { font-family:var(--font-body); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.05em; }

/* Category cards */
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cat-card { position:relative; overflow:hidden; display:block; padding:24px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); transition:border-color .15s, transform .15s; }
.cat-card:hover { border-color:var(--red); transform:translateY(-3px); }
.cat-card__idx { font-family:var(--font-mono); font-size:12px; color:var(--red); font-weight:500; }
.cat-card h3 { font-size:23px; text-transform:uppercase; margin:10px 0 6px; }
.cat-card p { color:var(--ink-2); font-size:14px; }

/* Product cards */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.product { position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .15s; }
.product::after { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--red);
  transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.product:hover { border-color:var(--ink); }
.product:hover::after { transform:scaleX(1); }
.product__media { aspect-ratio:4/3; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(-45deg,var(--panel),var(--panel) 12px,#eceef0 12px,#eceef0 24px); }
.product__media span { font-family:var(--font-mono); font-size:12px; color:var(--ink-2); letter-spacing:.06em; }
.product__body { padding:18px; display:flex; flex-direction:column; gap:12px; flex:1; }
.product__sku { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--ink-2); }
.product h3 { font-size:22px; }
.product__summary { font-size:14px; color:var(--ink-2); flex:1; line-height:1.5; }
.specs { display:flex; flex-wrap:wrap; gap:6px; }
.spec { font-family:var(--font-mono); font-size:11px; padding:3px 8px; border-radius:4px; background:var(--panel); color:var(--ink-2); }
.product__foot { display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--line); }
.price { font-family:var(--font-display); font-weight:800; font-size:22px; }

/* CTA band (dark) */
.band { position:relative; overflow:hidden; background:var(--black); color:var(--on-dark);
  border-radius:12px; padding:56px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.band::after { content:""; position:absolute; top:-30%; right:-4%; width:34%; height:160%;
  background:var(--red); transform:skewX(-14deg); opacity:.14; pointer-events:none; }
.band > * { position:relative; }
.band h2 { font-size:clamp(30px,4.5vw,46px); font-style:italic; text-transform:uppercase; max-width:18ch; margin-top:10px; }
.band p { color:var(--on-dark-2); margin-top:12px; max-width:44ch; }

/* Forms */
.form { display:grid; gap:18px; max-width:640px; }
.field { display:grid; gap:7px; min-width:0; }
.field label { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.field .req { color:var(--red); }
.field input, .field textarea { font-family:var(--font-body); font-size:15px; padding:12px 14px;
  width:100%; min-width:0; box-sizing:border-box;
  border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); transition:border-color .15s; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--red); }
.field textarea { resize:vertical; min-height:120px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form__note { font-size:13px; color:var(--ink-2); }
.notice { padding:14px 16px; border-radius:6px; font-size:14px; border:1px solid; margin-bottom:4px; }
.notice--ok { background:#fdeceb; border-color:#f5b8b6; color:var(--red-dark); }

/* Empty state */
.empty { padding:48px; text-align:center; border:1px dashed var(--line); border-radius:var(--radius); color:var(--ink-2); font-size:15px; }

/* Footer (dark) */
.footer { background:var(--black); color:var(--on-dark); border-top:3px solid var(--red); margin-top:64px; padding:52px 0; }
.footer__inner { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center; }
.footer__logo { height:24px; width:auto; }
.footer__links { display:flex; gap:24px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--on-dark-2); flex-wrap:wrap; }
.footer__links a:hover { color:#fff; }
.footer__meta { font-family:var(--font-mono); font-size:12px; color:var(--on-dark-2); }

.stack-lg > * + * { margin-top:56px; }
:focus-visible { outline:2px solid var(--red); outline-offset:2px; }

/* Responsive */
@media (max-width:860px) {
  .classes, .cat-grid { grid-template-columns:1fr; }
  .field-row { grid-template-columns:1fr; }
  .band { padding:32px 24px; }

  .nav__toggle { display:inline-flex; margin-left:auto; margin-right:20px; align-self:center; }
  .nav__links { display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; background:#fff;
    border-bottom:1px solid var(--line); box-shadow:0 14px 26px rgba(0,0,0,.07); padding:8px 0; }
  .nav__links.is-open { display:flex; }
  .nav__links a { padding:14px 24px; color:var(--ink); }
  .nav__links a:not(.btn):hover { background:var(--panel); }
  .nav__links a[aria-current="page"]:not(.btn) { text-decoration:none; color:var(--red); }
  .nav__links a.btn { margin:8px 24px 6px; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto; transition:none !important; } }

/* ── Savings calculator ─────────────────────────────────── */
.field select { font-family:var(--font-body); font-size:15px; padding:12px 14px;
  width:100%; min-width:0; box-sizing:border-box;
  border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); transition:border-color .15s; }
.field select:focus { outline:none; border-color:var(--red); }

.calc { display:grid; gap:24px; max-width:920px; }
.calc__panels { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.calc-panel { border:1px solid var(--line); border-top:3px solid var(--ink); border-radius:var(--radius);
  padding:20px; background:#fff; display:grid; gap:14px; align-content:start; }
.calc-panel--ev { border-top-color:var(--red); }
.calc-panel__tag { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.calc-panel--ev .calc-panel__tag { color:var(--red); }
.calc-readonly { font-family:var(--font-display); font-weight:800; font-size:22px; padding:6px 0; }
.calc-shared { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:16px; }

.result { position:relative; overflow:hidden; background:var(--black); color:var(--on-dark);
  border-radius:12px; padding:34px; margin-top:4px; }
.result::after { content:""; position:absolute; top:-30%; right:-4%; width:32%; height:160%;
  background:var(--red); transform:skewX(-14deg); opacity:.14; pointer-events:none; }
.result > * { position:relative; }
.result__label { display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-2); }
.result__figure { display:block; font-family:var(--font-display); font-weight:800; font-style:italic;
  font-size:clamp(48px,9vw,86px); line-height:1; color:var(--red); margin-top:6px; }
.result__per { font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-2); }
.result__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark);
  border:1px solid var(--line-dark); border-radius:8px; overflow:hidden; margin-top:26px; }
.result__grid > div { background:var(--black); padding:16px 18px; }
.result__k { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-2); margin-bottom:4px; }
.result__v { font-family:var(--font-display); font-weight:800; font-size:26px; color:#fff; }
.result__break { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
.result__break > div { font-family:var(--font-mono); font-size:15px; color:#fff; }
.result__break small { display:block; color:var(--on-dark-2); font-size:12px; margin-top:2px; }
.result__eco { margin-top:22px; font-size:15px; line-height:1.55; color:var(--on-dark-2); border-top:1px solid var(--line-dark); padding-top:20px; }
.result__eco strong { color:#fff; font-weight:600; }
.result__note { margin-top:14px; font-size:12px; color:var(--on-dark-2); }

@media (max-width:640px) {
  .calc__panels { grid-template-columns:1fr; }
  .result__grid { grid-template-columns:1fr; }
  .result__break { grid-template-columns:1fr; }
}

/* Grouped boxes for readability */
.calc-givens { border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:20px; display:grid; gap:16px; }
.result__title { font-family:var(--font-display); font-weight:800; font-style:italic; text-transform:uppercase;
  font-size:24px; color:#fff; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.result__title::before { content:""; width:6px; height:22px; background:var(--red); transform:skewX(-16deg); border-radius:1px; }

/* Safety: never let long codes/specs push the layout past the screen edge */
.product__sku, .spec, .result__break > div, .crumb { overflow-wrap:anywhere; }

/* Home page prose, button rows, and category descriptions */
.prose { max-width:64ch; }
.prose p { font-size:18px; color:var(--ink-2); line-height:1.6; }
.prose p + p { margin-top:16px; }
.prose__emphasis { color:var(--ink); font-weight:600; }
.actions { margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; }
.class-tile__blurb { margin-top:10px; font-size:14px; color:var(--ink-2); line-height:1.5; }

/* Hero stat bar: text column + mobile stacking */
.readout__text { margin-top:8px; font-family:var(--font-body); font-size:15px; color:var(--on-dark); line-height:1.4; }
.readout__text span { color:var(--red); margin:0 5px; }
@media (max-width:640px) {
  .readout { grid-template-columns:1fr; }
  .readout__cell { border-right:none; border-bottom:1px solid var(--line-dark); }
  .readout__cell:last-child { border-bottom:none; }
}

/* ── Product image (when a photo is attached) ───────────── */
.product__media--img { padding:0; background:#fff; }
.product__media--img img { width:100%; height:100%; object-fit:cover; }

/* ────────────────────────────────────────────────────────
   Staff portal  (portal.html)
   Same motorsport system: red/black, Saira Condensed, mono labels.
   ──────────────────────────────────────────────────────── */
.portal-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start; }
@media (max-width:960px){ .portal-grid { grid-template-columns:1fr; } }

.panel { border:1px solid var(--line); border-top:3px solid var(--red); border-radius:var(--radius);
  background:#fff; padding:24px; }
.panel + .panel { margin-top:24px; }
.panel__tag { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2); display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.panel__tag::before { content:""; width:5px; height:16px; background:var(--red); transform:skewX(-16deg); border-radius:1px; }
.panel h2 { font-size:26px; text-transform:uppercase; font-style:italic; margin:6px 0 4px; }
.panel__sub { color:var(--ink-2); font-size:14px; margin-bottom:20px; }

/* Draft status bar */
.draftbar { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; padding:16px 20px;
  border:1px solid var(--line); border-left:3px solid var(--red); border-radius:var(--radius);
  background:var(--panel); margin-bottom:28px; }
.draftbar__stat { font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--ink-2); }
.draftbar__stat b { font-family:var(--font-display); font-size:20px; color:var(--ink); font-style:italic; margin-right:4px; }
.draftbar__spacer { margin-left:auto; }

/* Segmented control (vehicle / part) */
.seg { display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.seg button { font-family:var(--font-body); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.04em;
  padding:10px 18px; background:#fff; color:var(--ink-2); border:none; cursor:pointer; transition:background .12s,color .12s; }
.seg button + button { border-left:1px solid var(--line); }
.seg button[aria-pressed="true"] { background:var(--red); color:#fff; }

/* Attribute repeater rows */
.attr-row { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:end; }
.attr-row .btn-x { height:44px; }
.btn-x { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink-2); cursor:pointer; font-size:18px; line-height:1; }
.btn-x:hover { border-color:var(--red); color:var(--red); }
.btn--add { background:transparent; border:1px dashed var(--line); color:var(--ink-2); }
.btn--add:hover { border-color:var(--red); color:var(--red); }

/* Publish toggle chip */
.chip-toggle { display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.chip-toggle input { position:absolute; opacity:0; width:0; height:0; }
.chip-toggle .track { width:44px; height:24px; border-radius:999px; background:var(--line); position:relative; transition:background .15s; flex:none; }
.chip-toggle .track::after { content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s; }
.chip-toggle input:checked + .track { background:var(--red); }
.chip-toggle input:checked + .track::after { transform:translateX(20px); }
.chip-toggle .lbl { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }

/* Image tray */
.imgtray { display:flex; flex-wrap:wrap; gap:12px; }
.imgcard { width:112px; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--panel); }
.imgcard__thumb { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:
  repeating-linear-gradient(-45deg,var(--panel),var(--panel) 10px,#eceef0 10px,#eceef0 20px); overflow:hidden; }
.imgcard__thumb img { width:100%; height:100%; object-fit:cover; }
.imgcard__thumb .ph { font-family:var(--font-mono); font-size:10px; color:var(--ink-2); text-align:center; padding:6px; }
.imgcard__foot { padding:6px 8px; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.imgcard__name { font-family:var(--font-mono); font-size:10px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.imgcard__act { display:flex; gap:4px; }
.imgcard__act button { border:none; background:transparent; cursor:pointer; font-size:12px; color:var(--ink-2); padding:2px; }
.imgcard__act button:hover { color:var(--red); }
.imgcard--primary { border-color:var(--red); }
.imgcard__badge { font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); padding:0 8px 6px; }
.imgpick { border:1px dashed var(--line); border-radius:6px; padding:18px; text-align:center; color:var(--ink-2);
  font-size:14px; cursor:pointer; transition:border-color .15s,color .15s; }
.imgpick:hover { border-color:var(--red); color:var(--red); }
.imgpick input { display:none; }

/* Inventory list / table */
.inv-list { display:grid; gap:10px; }
.inv-item { display:grid; grid-template-columns:56px 1fr auto; gap:14px; align-items:center;
  border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; background:#fff; }
.inv-item__thumb { width:56px; height:56px; border-radius:6px; overflow:hidden; background:
  repeating-linear-gradient(-45deg,var(--panel),var(--panel) 8px,#eceef0 8px,#eceef0 16px);
  display:flex; align-items:center; justify-content:center; }
.inv-item__thumb img { width:100%; height:100%; object-fit:cover; }
.inv-item__thumb span { font-family:var(--font-mono); font-size:9px; color:var(--ink-2); }
.inv-item__name { font-family:var(--font-display); font-weight:800; font-size:18px; line-height:1.1; }
.inv-item__meta { font-family:var(--font-mono); font-size:11px; color:var(--ink-2); margin-top:3px; display:flex; flex-wrap:wrap; gap:4px 10px; }
.inv-item__meta .draft { color:var(--red); }
.inv-item__right { display:flex; align-items:center; gap:14px; }
.inv-item__price { font-family:var(--font-display); font-weight:800; font-size:18px; }

/* Stock stepper */
.stepper { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.stepper button { border:none; background:#fff; width:32px; height:34px; cursor:pointer; font-size:17px; line-height:1; color:var(--ink); }
.stepper button:hover { background:var(--panel); }
.stepper button.minus:hover { color:var(--red); }
.stepper .count { min-width:44px; text-align:center; font-family:var(--font-display); font-weight:800; font-size:17px; border-left:1px solid var(--line); border-right:1px solid var(--line); padding:0 6px; }
.stock-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); display:block; margin-bottom:4px; }

.rowacts { display:flex; gap:8px; }
.btn--sm { padding:8px 14px; font-size:12px; }
.btn--danger-ghost { background:transparent; border:1px solid var(--line); color:var(--ink-2); }
.btn--danger-ghost:hover { border-color:var(--red); color:var(--red); }

/* Export panel */
.export-box { width:100%; min-height:200px; font-family:var(--font-mono); font-size:12px; line-height:1.5;
  border:1px solid var(--line); border-radius:6px; padding:14px; background:var(--black); color:#e8eaed; resize:vertical; }
.export-actions { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.steps { counter-reset:step; display:grid; gap:12px; margin-top:6px; }
.steps li { list-style:none; position:relative; padding-left:38px; font-size:14px; color:var(--ink-2); line-height:1.5; }
.steps li::before { counter-increment:step; content:counter(step); position:absolute; left:0; top:-1px;
  width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff; font-family:var(--font-display);
  font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; }
.steps li b, .steps li code { color:var(--ink); }
.steps code { font-family:var(--font-mono); font-size:12px; background:var(--panel); padding:2px 6px; border-radius:4px; }

.hint { font-size:13px; color:var(--ink-2); background:var(--panel); border-left:3px solid var(--red);
  padding:12px 14px; border-radius:0 6px 6px 0; margin-top:4px; line-height:1.55; }
.hint b { color:var(--ink); }

.portal-toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; font-size:14px; padding:12px 20px; border-radius:8px; box-shadow:0 12px 30px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:100; border-left:3px solid var(--red); }
.portal-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.empty--portal { grid-column:1/-1; }