/* GHM Parts dealer portal — application styles.
   Brand: GHM red #d8262f + slate greys (matches ghmparts.es / logo).
   Single small bundle, system font stack, no external requests. */

:root {
  --red: #d8262f;
  --red-dark: #b21e26;
  --ink: #1e293b;         /* headings / body */
  --muted: #64748b;
  --muted-strong: #5b6779;  /* --muted is 4.4:1 on --bg; this clears 4.5:1 */
  --line: #e2e8f0;
  --bg: #f4f6f9;
  --card: #ffffff;
  --dark: #232a35;        /* topbar / footer */
  --ok: #15803d;  --ok-bg: #dcfce7;
  --warn: #a16207; --warn-bg: #fef9c3;
  --bad: #b91c1c;  --bad-bg: #fee2e2;
  --info: #1d4ed8; --info-bg: #dbeafe;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08);
  /* Drawn check, for the places CSS has to supply the mark itself. */
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.5 5.5L20 6.5'/%3E%3C/svg%3E");
}

/* The surfaces the browser draws for us still belong to the design. Without
   these, a keyboard user gets Chrome's blue ring on a red-and-slate page and
   selected text comes back in the OS accent colour. Both rules are weak on
   purpose (one class of specificity), so the component-level focus styles
   further down still win where they exist. */
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

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

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* The hidden attribute must always win, also on elements with an explicit
   display (grid/flex) — the model-choice popup, batch bar, combo lists. */
[hidden] { display: none !important; }
body {
  margin: 0;
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Open Sans", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
img { max-width: 100%; height: auto; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.65rem; margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
p { margin: 0 0 .8rem; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; }
.center { text-align: center; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.container--wide { max-width: 1500px; }
.page-narrow { max-width: 760px; }
main { padding: 1.5rem 0 3rem; min-height: 55vh; }
.page-intro { color: var(--muted); max-width: 60ch; }
.page-img { border-radius: var(--radius); margin-bottom: 1rem; }

/* ---------- header ---------- */
.staging-ribbon {
  background: repeating-linear-gradient(45deg, #b45309, #b45309 12px, #92400e 12px, #92400e 24px);
  color: #fff; text-align: center; font-weight: 700; font-size: .8rem; padding: .25rem;
}
.site-banner { background: var(--dark); color: #fff; text-align: center; padding: .4rem; font-size: .9rem; }

.topbar { background: var(--dark); color: #cbd5e1; font-size: .82rem; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; min-height: 2rem; gap: 1rem; }
.topbar__nav { display: flex; align-items: center; gap: 1.25rem; }
.topbar a { color: #cbd5e1; }
.topbar__note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lang-switch { position: relative; }
.lang-switch__btn {
  background: none; border: 0; color: #cbd5e1; cursor: pointer; font: inherit;
  display: flex; align-items: center; gap: .35rem; padding: .3rem 0;
}
.lang-switch__menu {
  position: absolute; right: 0; top: 100%; z-index: 50; min-width: 8rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(15,23,42,.14); padding: .35rem;
}
.lang-switch__menu a {
  display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem;
  color: var(--ink); border-radius: 5px;
}
.lang-switch__menu a:hover { background: var(--bg); text-decoration: none; }
.lang-switch__menu a.is-active { font-weight: 700; }

.mainbar { background: #fff; border-bottom: 1px solid var(--line); }
.mainbar__inner { display: flex; align-items: center; gap: 1.5rem; padding: .8rem 1rem; flex-wrap: wrap; }
.logo img { display: block; width: 180px; height: auto; }

.header-search { position: relative; flex: 1 1 280px; display: flex; max-width: 560px; }
.header-search input {
  flex: 1; padding: .55rem .8rem; border: 2px solid var(--line); border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius); font: inherit; min-width: 0;
}
.header-search input:focus { outline: none; border-color: var(--red); }
.header-search button {
  background: var(--red); color: #fff; border: 0; padding: 0 1rem; cursor: pointer;
  border-radius: 0 var(--radius) var(--radius) 0; display: flex; align-items: center;
}
.header-search button:hover { background: var(--red-dark); }
.header-search__suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(15,23,42,.14); overflow: hidden;
}
.header-search__suggest a {
  display: block; padding: .5rem .8rem; color: var(--ink); border-bottom: 1px solid var(--line);
}
.header-search__suggest a:last-child { border-bottom: 0; }
.header-search__suggest a:hover, .header-search__suggest a.is-focus { background: var(--bg); text-decoration: none; }

.header-actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.header-action { display: flex; align-items: center; gap: .4rem; color: var(--ink); position: relative; }
.header-action:hover { text-decoration: none; color: var(--red); }
.header-action--plain { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; color: var(--muted); }
.header-action__icon { font-size: 1.2rem; }
.header-action__label { max-width: 11rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.header-logout { display: flex; }
.cart-badge {
  position: absolute; top: -8px; left: 12px;
  background: var(--red); color: #fff; font-size: .68rem; font-weight: 700;
  border-radius: 999px; min-width: 1.1rem; height: 1.1rem; line-height: 1.1rem; text-align: center; padding: 0 .2rem;
}

.portalnav { background: var(--dark); }
.portalnav__inner { display: flex; gap: .25rem; overflow-x: auto; }
.portalnav a {
  color: #e2e8f0; padding: .6rem .9rem; white-space: nowrap; font-size: .92rem; font-weight: 600;
  border-bottom: 3px solid transparent;
}
.portalnav a:hover { color: #fff; border-bottom-color: var(--red); text-decoration: none; }

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: #cbd5e1; margin-top: 3rem; font-size: .92rem; }
.site-footer__inner { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 2.2rem 1rem; }
.site-footer__col h4 { color: #fff; margin: 0 0 .6rem; }
.site-footer__col a { display: block; color: #cbd5e1; padding: .15rem 0; }
.site-footer__bottom { border-top: 1px solid #374151; padding: .8rem 0; font-size: .82rem; }

/* ---------- buttons, badges, flash ---------- */
.btn {
  display: inline-block; padding: .55rem 1.1rem; border-radius: var(--radius);
  font: inherit; font-weight: 600; cursor: pointer; border: 2px solid transparent;
  text-align: center; line-height: 1.3;
}
.btn:hover { text-decoration: none; }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-dark); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--line); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--muted); }
.btn--small { padding: .25rem .6rem; font-size: .85rem; border-radius: 6px; }
.btn--lg { padding: .75rem 1.6rem; font-size: 1.05rem; }
.btn--block { display: block; width: 100%; }

.badge {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; background: var(--line); color: var(--ink); white-space: nowrap;
}
.badge--lg { font-size: .95rem; padding: .25rem .8rem; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--bad { background: var(--bad-bg); color: var(--bad); }
.badge--info { background: var(--info-bg); color: var(--info); }
.badge--neutral { background: var(--line); color: var(--ink); }

.flash { max-width: 1200px; margin: .8rem auto 0; padding: .6rem 1rem; border-radius: var(--radius); font-weight: 600; }
.flash--error { background: var(--bad-bg); color: var(--bad); }
.flash--success { background: var(--ok-bg); color: var(--ok); }
/* The shop's own notice at checkout — "orders before 16:00 ship today" and
   the like. It used to borrow the error style, so a helpful line arrived in
   alarm red. */
.flash--info { background: var(--info-bg); color: var(--info); }

/* ---------- cards / layout blocks ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
}
.card--center { text-align: center; padding: 2.5rem 1.5rem; }
.bigcheck {
  width: 3.4rem; height: 3.4rem; line-height: 3.4rem; margin: 0 auto 1rem;
  background: var(--ok-bg); color: var(--ok); font-size: 1.7rem; border-radius: 50%;
}
.page-head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: .75rem; }
.page-head h1 { margin: 0; }
/* wrap: the job page carries four buttons here and they overflowed the
   viewport on a phone rather than dropping to a second row. */
.page-head__nav { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.breadcrumbs { font-size: .85rem; color: var(--muted); margin-bottom: .8rem; }
.breadcrumbs a { color: var(--muted); }

/* ---------- tables (the portal workhorse) ---------- */
.table-scroll { overflow-x: auto; margin-bottom: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.table-scroll--capped { max-height: 26rem; overflow-y: auto; }
.card .table-scroll { border: 0; box-shadow: none; margin: 0; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--card); }
.table th, .table td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table thead th {
  background: #f8fafc; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); position: sticky; top: 0; z-index: 1;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot td { border-top: 2px solid var(--line); border-bottom: 0; }
.table .num { text-align: right; white-space: nowrap; }
.table--hover tbody tr:hover { background: #f8fafc; cursor: pointer; }
.table--compact th, .table--compact td { padding: .4rem .6rem; }
.table tr.is-highlight > td { background: #fff7ed; }

.qty-input { width: 4.2rem; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; text-align: right; }
.add-form { display: flex; gap: .3rem; justify-content: flex-end; }
.add-form input[type="number"] { width: 3.6rem; padding: .25rem .35rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; text-align: right; }

.pagination { display: flex; gap: .35rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.pagination a, .pagination strong {
  min-width: 2rem; padding: .3rem .55rem; text-align: center; border-radius: 6px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.pagination strong { background: var(--red); border-color: var(--red); color: #fff; }
.pagination a:hover { border-color: var(--muted); text-decoration: none; }

.filterbar { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.filterbar input[type="search"], .filterbar select {
  padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; background: #fff;
}
.filterbar input[type="search"] { flex: 1 1 220px; min-width: 0; }
.filterbar select { max-width: 20rem; }

/* Counts per state above the parts-on-order table. */
.state-summary { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 .9rem; }

/* ---------- forms ---------- */
.form label { display: block; margin-bottom: .9rem; }
.form label > span { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .25rem; }
/* Everything that takes typing, listed by exception rather than by type:
   number, date, time and tel kept falling through the old allow-list and
   rendered unstyled next to the text fields beside them. */
.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.form select, .form textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; background: #fff;
}
.form textarea { resize: vertical; min-height: 4.5rem; }
/* Date and time pickers size their own text and sit a pixel high otherwise. */
.form input[type="date"], .form input[type="time"] { line-height: 1.2; min-height: 2.6rem; }

/* File inputs cannot be restyled directly, so style the button they expose. */
.form input[type="file"] {
  width: 100%; padding: .5rem .6rem; border: 1px dashed var(--line);
  border-radius: var(--radius); background: var(--bg); font: inherit; font-size: .9rem;
}
.form input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; margin-right: .7rem;
  padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--ink);
}
.form input[type="file"]::file-selector-button:hover { border-color: var(--red); color: var(--red); }

.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--red); outline-offset: -1px; }
.form__row { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
.form__note { font-size: .9rem; margin-top: .8rem; }
.form__note--muted { color: var(--muted); }
.form__check { display: flex; gap: .5rem; align-items: flex-start; }
.form__check input { margin-top: .2rem; }
.form__check span { font-weight: 400 !important; }
.form h2 { margin-top: 1.2rem; }
.form h2:first-of-type { margin-top: 0; }
.field-error { color: var(--bad); font-size: .85rem; margin: .25rem 0 0; }

/* ---------- home ---------- */
/* One rhythm for the whole page. Every band used to carry its own hand-picked
   padding (2.5 / 1.5 / 2 / 2.8rem), which read as drift rather than as a
   decision; --band gives them a single measure that opens up with the
   viewport. main pads every other page, but the home page is a stack of
   full-bleed bands, so it cancels that padding: the hero meets the header and
   the closing band meets the footer, with no strip of page background
   showing between them. */
.home { --band: clamp(2.75rem, 6vw, 5rem); margin: -1.5rem 0 -3rem; }

.hero { position: relative; background: var(--dark); color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The photograph carries a large GHM watermark of its own, right where the
   headline sits. Dimming the whole image to .45 flattened the photo and still
   left the type leaning on a text-shadow to be readable. A scrim that is
   near-opaque under the copy and clears toward the right keeps the picture a
   picture and gives the words a surface dark enough to sit on. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(18, 23, 31, .94) 0%, rgba(18, 23, 31, .88) 40%,
    rgba(18, 23, 31, .62) 72%, rgba(18, 23, 31, .34) 100%);
}
/* The image is full-bleed (absolute on .hero), but the copy has to line up
   with every other container on the page — so .hero__inner keeps .container's
   max-width and auto margins, and the reading width is capped on the children
   instead. Overriding max-width/margin here pinned the text to the viewport
   edge on desktop. */
.hero__inner { position: relative; z-index: 1; padding: clamp(3.5rem, 9vw, 7rem) 1rem; }
.hero__inner > * { max-width: 46rem; }
.hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.08;
  letter-spacing: -.022em; margin-bottom: .9rem; text-wrap: balance;
}
.hero__sub {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.5;
  color: #e2e8f0; margin-bottom: 1.8rem; max-width: 36rem;
}
.hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; }

.usps { padding: var(--band) 0 0; }
/* Four abreast, then two, then one — never three, which would leave the
   fourth card stranded on a row by itself. */
.usps__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .usps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .usps__grid { grid-template-columns: minmax(0, 1fr); } }
.usp {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.35rem; box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.usp:hover { transform: translateY(-2px); border-color: #cbd5e1; box-shadow: 0 6px 18px rgba(15, 23, 42, .09); }
/* A tinted tile rather than a loose glyph: it gives the four icons a shared
   footprint, so a wide drawing and a narrow one still line up. */
.usp__icon {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin-bottom: .95rem;
  border-radius: 8px; background: #fdecec; color: var(--red);
}
.usp__icon svg { width: 1.35rem; height: 1.35rem; }
.usp h3 { font-size: 1.02rem; letter-spacing: -.01em; margin-bottom: .4rem; }
.usp p { color: var(--muted); margin: 0; font-size: .95rem; line-height: 1.55; }

.stats { padding: var(--band) 0 0; }
.stats__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat { background: var(--dark); color: #fff; border-radius: var(--radius); text-align: center; padding: 1.4rem 1rem; }
.stat strong { display: block; font-size: 1.9rem; color: #fff; }
.stat span { color: #cbd5e1; font-size: .9rem; }
/* Three figures, so three columns or one — auto-fit left a single orphan tile
   on its own row at tablet widths, which read as a wrapping accident. */
.home .stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home .stat { padding: 1.7rem 1rem; }
.home .stat strong { font-size: clamp(1.75rem, 3vw, 2.35rem); letter-spacing: -.02em; line-height: 1.1; }
@media (max-width: 760px) { .home .stats__grid { grid-template-columns: minmax(0, 1fr); } }

.split { padding: var(--band) 0 0; }
.split__inner { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: 1fr 1fr; align-items: center; }
.split--reverse .split__text { order: 2; }
.split--reverse .split__img { order: 1; }
.split__img img { border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); width: 100%; }
/* h2 is 1.15rem across the app, which is right next to a form label and wrong
   for the only heading in a half-width band. */
.split h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.2; letter-spacing: -.02em; margin-bottom: .9rem; text-wrap: balance; }
.split__text > p { color: var(--muted-strong); font-size: 1.02rem; line-height: 1.6; margin-bottom: 1.4rem; max-width: 46ch; }
.checklist { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.checklist li { padding: .3rem 0 .3rem 1.7rem; position: relative; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
/* Drawn rather than typed: the same check that partials/usps.blade.php uses,
   masked in so it keeps the stroke weight of the icons above it. */
.home .checklist { margin-bottom: 1.5rem; }
.home .checklist li { padding: .42rem 0 .42rem 1.9rem; }
.home .checklist li::before {
  content: ""; top: .68rem; width: 1rem; height: 1rem; background: var(--ok);
  -webkit-mask: var(--check) center / contain no-repeat;
          mask: var(--check) center / contain no-repeat;
}

.cta-band { background: var(--red); color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0; margin-top: var(--band); }
.cta-band__inner { text-align: center; }
.cta-band h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); letter-spacing: -.02em; margin-bottom: .5rem; text-wrap: balance; }
.cta-band p { opacity: .95; margin-bottom: 1.5rem; font-size: 1.05rem; }

/* ---------- dashboard ---------- */
.dash-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 1.5rem; }
.dash-tile {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.1rem; color: var(--ink); display: flex; flex-direction: column; gap: .15rem;
}
.dash-tile:hover { text-decoration: none; border-color: var(--red); }
.dash-tile strong { font-size: 1.05rem; }
.dash-tile > span:last-child { color: var(--muted); font-size: .88rem; }
.dash-tile__icon { font-size: 1.5rem; }
.dash-tile--alert { border-color: var(--red); background: #fff5f5; }
.dash-cols { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }

.brand-links { display: flex; flex-wrap: wrap; gap: .45rem; }
.brand-link {
  border: 1px solid var(--line); border-radius: 999px; padding: .25rem .8rem;
  color: var(--ink); font-size: .9rem; background: #fff;
}
.brand-link:hover { border-color: var(--red); color: var(--red); text-decoration: none; }
.brand-link small { color: var(--muted); }

.brand-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.brand-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.1rem; color: var(--ink); text-align: center;
}
.brand-card:hover { border-color: var(--red); text-decoration: none; }
.brand-card strong { display: block; font-size: 1.05rem; }
.brand-card span { color: var(--muted); font-size: .85rem; }

/* ---------- model & drawing pages (layouts ported from v3) ---------- */
.model-intro { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; margin: 8px 0 28px; }
.model-intro__text { max-width: 62ch; }
.model-intro__text h1 { margin-top: 0; }
.model-intro__image { object-fit: contain; max-height: 200px; flex-shrink: 0; }
.model-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 12px 0; }

/* Grid, not flex: the Version select gets a capped column of its own. */
.version-switcher {
  display: grid; grid-template-columns: auto auto minmax(0, 340px);
  justify-content: start; align-items: center; gap: 8px 12px; margin-top: 14px;
}
.version-switcher__label { font-weight: 700; font-size: .9rem; }
.version-switcher select {
  padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 6px;
  font: inherit; font-size: .9rem; background: #fff; min-width: 0; width: 100%;
}

.drawings-band { background: #eceff3; padding: 32px 0 44px; margin: 24px 0; }
.drawings-band__head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-bottom: 20px;
}
.drawings-band__head h2 { margin: 0; }
.drawing-filterbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.drawing-filterbar input[type="search"] {
  margin-bottom: 0; flex: 1; padding: 8px 12px; font: inherit; font-size: .9rem;
  border: 1.5px solid var(--line); border-radius: 6px;
}
.drawing-filterbar__select {
  padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 6px;
  font: inherit; font-size: .9rem; background: #fff;
}

.drawing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.25rem; }
.drawing-card {
  display: flex; flex-direction: column; gap: 4px; padding: 1.25rem 1rem;
  text-decoration: none; font-size: .9rem; color: var(--ink);
  border-radius: var(--radius); background: #fff;
  transition: box-shadow .25s, transform .25s;
}
.drawing-card:hover { box-shadow: 0 8px 24px rgba(15,23,42,.14); transform: translateY(-4px); text-decoration: none; }
.drawing-card img { aspect-ratio: 4/3; object-fit: contain; margin: 0 auto 6px; width: 100%; max-width: 300px; }
.drawing-card__title {
  font-weight: 600; text-transform: uppercase; font-size: .88rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.3em * 2);
}
.drawing-card__category { color: var(--muted); margin-bottom: 8px; }
.model-item__footer {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-top: auto; font-weight: 600; font-size: .85rem; color: var(--red); width: 100%;
}
.btn-circle {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  background: var(--red); color: #fff; border-radius: 50%; font-size: .9rem;
}
.empty-state { padding: 40px 0; text-align: center; color: var(--muted); }

/* A drawing whose image the EPC has not published yet (the proxy answers
   404). Said in words, instead of a broken image and a zoom bar with nothing
   to zoom; the parts list works as usual. Toggled by the img's onerror. */
.drawing-card__no-image,
.exploded-view__no-image { display: none; }
.drawing-card--no-image img { display: none; }
.drawing-card--no-image .drawing-card__no-image {
  display: grid; place-items: center; aspect-ratio: 4/3; width: 100%; max-width: 300px;
  margin: 0 auto 6px; padding: 12px; border-radius: 6px;
  background: #f1f5f9; color: var(--muted-strong); font-size: .8rem; text-align: center;
}
.exploded-view__stage--no-image .exploded-view__canvas,
.exploded-view__stage--no-image .exploded-view__zoombar { display: none; }
.exploded-view__stage--no-image .exploded-view__no-image {
  display: grid; place-items: center; min-height: 240px; margin: 0; padding: 24px;
  background: #f8fafc; color: var(--muted-strong); text-align: center;
}

.drawing-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.drawing-head > div:first-child { min-width: 0; flex: 1 1 240px; }
.drawing-head h1 { overflow-wrap: anywhere; }
.drawing-head h1 { margin-bottom: 2px; }
.drawing-head__back { font-size: .9rem; }
.drawing-head__model { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); flex-shrink: 0; }
.drawing-head__model img { object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.drawing-head__model small { font-size: .72rem; max-width: 150px; }

/* ---------- exploded view (v3) ---------- */
.exploded-view { display: grid; grid-template-columns: minmax(380px, 1.4fr) 1fr; gap: 28px; margin: 20px 0; }
.exploded-view__stage {
  position: relative; align-self: start; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  touch-action: pan-y;
}
@media (min-width: 901px) {
  /* The drawing follows while scrolling the (long) parts list. */
  .exploded-view__stage { position: sticky; top: 16px; max-height: calc(100vh - 32px); }
  .exploded-view__stage .exploded-view__canvas img { max-height: calc(100vh - 34px); object-fit: contain; }
}
.exploded-view__stage.is-zoomed { cursor: grab; touch-action: none; }
.exploded-view__stage.is-zoomed:active { cursor: grabbing; }
.exploded-view__canvas { position: relative; transform-origin: 0 0; }
.exploded-view__canvas img { display: block; width: 100%; user-select: none; }
.exploded-view__zoombar {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: flex; flex-direction: column; gap: 6px;
}
.exploded-view__zoombar .btn { width: 36px; padding: 6px 0; font-size: 1.05rem; }
.hotspot {
  position: absolute; border: 2px solid transparent; border-radius: 4px;
  background: rgba(216, 38, 47, .1); cursor: pointer; padding: 0;
}
.hotspot:hover, .hotspot.is-active { border-color: var(--red); background: rgba(216, 38, 47, .25); }

/* Parts panel: numbered position rows, price right */
.exploded-view__parts { background: #eceff3; border-radius: var(--radius); padding: 18px; align-self: start; }
.exploded-view__parts > h2 { margin: 0 0 14px; text-transform: uppercase; font-size: 1.15rem; }
.pos-group { border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; background: #fff; }
.pos-group summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; }
.pos-group summary::-webkit-details-marker { display: none; }
.pos-group.is-active, .pos-group.is-highlighted { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.pos-group__pos {
  min-width: 30px; text-align: center; padding: 3px 6px; flex-shrink: 0;
  background: var(--red); color: #fff; border-radius: 6px; font-size: .8rem; font-weight: 700;
}
.pos-group__summary { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pos-group__name { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-group__availability { font-size: .75rem; font-weight: 600; }
.pos-group__meta { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; }
.pos-group__meta small { color: var(--muted); font-size: .72rem; font-style: italic; }
.pos-group__parts { margin: 0; padding: 0 14px 12px; list-style: none; }
.part-line { padding: 8px 0; border-top: 1px solid var(--line); }
.part-line__epc { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .82rem; color: var(--muted); margin-bottom: 6px; }
.part-line__na { font-size: .82rem; color: var(--bad); font-weight: 700; }
/* Positions with nothing for sale: unmistakably dead. */
.pos-group--na { background: #eceff3; }
.pos-group--na summary { color: #6b7280; }
.pos-group--na .pos-group__pos { background: #d6d6d3; color: #6b7280; }
.pos-group--na .pos-group__name { color: #6b7280; text-decoration: line-through; }
.part-line--na .part-line__epc { color: #6b7280; text-decoration: line-through; }
.availability { font-size: .82rem; font-weight: 600; margin: 0; }
.availability--ok { color: var(--ok); }
.availability--warn { color: var(--warn); }
.availability--bad { color: var(--bad); }
/* Offer rows: product name, price + qty + cart */
.offer-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px; margin-bottom: 6px; background: #f4f6f9; border-radius: 6px;
  min-width: 0;
}
.offer-row > * { min-width: 0; }
.offer-row--thumb { grid-template-columns: 56px 1fr auto; }
.offer-row__media { display: grid; place-items: center; width: 56px; height: 56px; background: #fff; border-radius: 6px; }
.offer-row__media img { max-width: 52px; max-height: 52px; object-fit: contain; }
.offer-row__info { display: flex; flex-direction: column; min-width: 0; }
.offer-row__title {
  font-weight: 700; font-size: .9rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.offer-row__info small { font-size: .75rem; color: var(--muted); }
.offer-row__buy { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.offer-row__buy strong { font-size: .95rem; }
.offer-row__qty { display: flex; align-items: stretch; gap: 6px; }
.offer-row__qty input {
  width: 48px; padding: 4px; text-align: center;
  border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: .88rem;
}

.section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 28px 0 14px; }
.section-head h2 { margin: 0; }

/* ---------- B2B tables (v3 dealer portal) ---------- */
.b2b-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.b2b-head h1 { margin-bottom: 2px; }
.model-specs { margin: 0; font-size: .92rem; }
.b2b-head__links { display: flex; gap: 8px; }
.b2b-count { font-size: .6em; color: var(--muted); font-weight: 400; }
.b2b-table__bar { display: flex; gap: 12px; margin: 14px 0; }
.b2b-table__search {
  flex: 1; max-width: 420px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 6px; font: inherit;
}
.b2b-table__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.b2b-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.b2b-table thead th { background: #f8fafc; text-align: left; padding: 9px 10px; white-space: nowrap; }
.b2b-table tbody td { padding: 6px 10px; border-top: 1px solid var(--line); vertical-align: middle; }
.b2b-table tbody tr:nth-child(even) { background: #f8fafc; }
/* Big tables (all 25k models) stay fast: offscreen rows skip rendering. */
.b2b-table tbody tr { content-visibility: auto; contain-intrinsic-size: auto 44px; }
.b2b-table__actions { white-space: nowrap; }
.b2b-table__actions .btn + .btn { margin-left: 6px; }
/* Model index: version subline + dimmed rows without a vehicle match, actions right */
.b2b-models thead th:last-child,
.b2b-models .b2b-table__actions { text-align: right; }
.dm-version { color: var(--muted); font-weight: 400; font-size: .78rem; }
.b2b-models tr.is-unmatched td { color: var(--muted); }
.b2b-models tr.is-unmatched .dm-version { opacity: .8; }
.b2b-thumb img {
  display: block; width: 40px; height: 40px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
}
.b2b-desc { min-width: 240px; }
.b2b-num { text-align: right; white-space: nowrap; }
.b2b-qty { width: 56px; padding: 5px; text-align: center; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.b2b-batchbar {
  position: sticky; bottom: 12px; z-index: 50;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 16px;
  background: var(--dark); color: #fff;
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15,23,42,.3);
}
.b2b-batchbar input { flex: 1; min-width: 200px; padding: 9px 12px; border: 0; border-radius: 6px; font: inherit; }
.b2b-table__brand { padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #fff; }
/* B2B all-models: cascaded searchable dropdowns + load more */
.dm-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.combo { position: relative; flex: 1 1 160px; max-width: 240px; }
.combo__input {
  width: 100%; padding: 10px 30px 10px 14px;
  border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #fff;
}
.combo__clear {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1;
  color: var(--muted); padding: 2px 6px;
}
.combo__clear:hover { color: var(--ink); }
.combo__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  margin: 0; padding: 4px; list-style: none; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(15,23,42,.18);
}
.combo__list li { margin: 0; }
.combo__list button {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  border: 0; background: none; cursor: pointer; font: inherit; border-radius: 6px;
}
.combo__list button:hover { background: var(--bg); }
.combo__none, .combo__more { padding: 8px 10px; color: var(--muted); font-size: .85rem; }
.dm-more { text-align: center; margin-top: 16px; }
/* inline searchable-select (enhances a native <select> in filter/attr bars) */
.combo--inline { flex: 0 1 auto; min-width: 12rem; max-width: 20rem; }
.attr-select .combo--inline { width: 100%; }

/* ---------- pills (backoffice filters) ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.pill {
  border: 1px solid var(--line); border-radius: 999px; padding: .25rem .8rem;
  color: var(--ink); background: #fff; font-size: .9rem;
}
.pill:hover { border-color: var(--red); text-decoration: none; }
.pill--active { background: var(--red); border-color: var(--red); color: #fff; }
.prose { max-width: 70ch; }

/* ---------- cart / checkout / orders ---------- */
.cart-actions { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.checkout-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.checkout-side { position: sticky; top: 1rem; }
.totals { margin: 0 0 1rem; }
.totals div { display: flex; justify-content: space-between; padding: .3rem 0; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; font-weight: 600; }
.totals__grand { border-top: 2px solid var(--line); margin-top: .4rem; padding-top: .5rem !important; font-size: 1.15rem; }
.totals__grand dt { color: var(--ink); font-weight: 700; }

.timeline { list-style: none; margin: .5rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--line); font-size: .85rem; }
.timeline li { padding: .15rem 0; position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -1.32rem; top: .55rem;
  width: .55rem; height: .55rem; background: var(--red); border-radius: 50%;
}
.timeline__label { font-weight: 600; }
.timeline__at { color: var(--muted); margin-left: .4rem; }

/* ---------- back office ---------- */
.bo-header { background: var(--dark); color: #fff; }
.bo-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; flex-wrap: wrap; }
.bo-nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.bo-nav a { color: #cbd5e1; font-weight: 600; font-size: .92rem; }
.bo-nav a.is-active, .bo-nav a:hover { color: #fff; }
.bo-main { padding: 1.5rem 0 3rem; }
.backoffice .table th { white-space: nowrap; }

/* ---------- USP checkmark row (v3) ---------- */
.usp-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  padding: 18px 0; border-top: 1px solid var(--line); margin-top: 28px;
}
.usp-row__item { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; }
.usp-row__item svg { color: var(--red); flex-shrink: 0; }
.product__usps { margin: 10px 0 0; padding: 0; list-style: none; font-size: .88rem; color: var(--muted); }
.product__usps li { padding: 2px 0; }

/* ---------- chips / category cascade (v3) ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; align-items: center; }
.chip {
  display: inline-block; padding: 6px 14px; font-size: .85rem; font-weight: 600; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer;
}
.chip:hover { border-color: var(--red); color: var(--red); text-decoration: none; }
.chip.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.chip small { font-weight: 400; opacity: .7; }
.chip-row__label { font-size: .82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin: 16px 0; }

.listing-header { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.listing-header__count { color: var(--muted); }

/* attribute filters + availability toggle */
.attr-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 12px 0; }
.attr-select { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.attr-select select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit;
  font-weight: 400; color: var(--ink); background: #fff; min-width: 12rem; max-width: 20rem;
}
.attr-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; margin-left: auto; }
.variant-badge {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--info-bg); color: var(--info); font-size: .72rem; font-weight: 700; white-space: nowrap;
}

/* ---------- product detail (v3) ---------- */
.product {
  display: grid; gap: 0 36px; margin: 20px 0;
  grid-template-columns: minmax(280px, 480px) 1fr;
  grid-template-areas: "gallery head" "gallery info";
  grid-template-rows: auto 1fr;
}
.product__head { grid-area: head; }
.product__head .product__title { margin-top: 0; }
.product__gallery { grid-area: gallery; }
.product__info { grid-area: info; }
.product__image {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.product__image--placeholder { display: grid; place-items: center; font-size: 72px; opacity: .3; }
.product__thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.product__thumb { padding: 4px; border: 1.5px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.product__thumb.is-active { border-color: var(--red); }
.product__title { margin: 0 0 6px; }
.product__meta { color: var(--muted); margin: 0 0 18px; }
.product__price { display: flex; align-items: baseline; gap: 10px; font-size: 1.7rem; margin-bottom: 4px; flex-wrap: wrap; }
.product__price s { font-size: 1.1rem; color: var(--muted); }
.product__price small { font-size: .8rem; color: var(--muted); }
.product__price strong { color: var(--red); }
.badge--discount { background: var(--red); color: #fff; }
.delivery-estimate { margin: 6px 0; }
.product__buy { display: flex; gap: 10px; margin: 18px 0; }
.product__buy input { width: 74px; padding: 10px; border: 1.5px solid var(--line); border-radius: 6px; font: inherit; }
.product__desc { max-width: 72ch; }
.product__desc :is(p, ul, ol) { margin: 0 0 .8rem; }
.product__desc :is(ul, ol) { padding-left: 1.3rem; }
.variant-picker { margin: 12px 0; }
.variant-picker__label { font-weight: 700; font-size: .9rem; display: block; margin-bottom: 6px; }
.variant-picker__options { display: flex; flex-wrap: wrap; gap: 6px; }
.variant-pill {
  padding: 5px 12px; border: 1.5px solid var(--line); border-radius: 999px;
  background: #fff; font-size: .85rem; font-weight: 600; color: var(--ink); text-decoration: none;
}
.variant-pill:hover { border-color: var(--red); text-decoration: none; }
.variant-pill.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.variant-pill.is-unavailable { opacity: .55; }
.attr-list { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.attr-list li { font-size: .9rem; }
.attr-list span { color: var(--muted); }

/* Sticky buy bar (v3): price/availability/cart always in view. */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
  transform: translateY(110%); transition: transform .2s ease;
}
.buybar.is-visible { transform: translateY(0); }
.buybar__info { display: flex; flex-direction: column; line-height: 1.25; }
.buybar__info strong { font-size: 1.1rem; }
@media (min-width: 801px) {
  .buybar { left: auto; right: 24px; bottom: 24px; max-width: 460px; gap: 24px;
    border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; }
}

/* ---------- fits-list grid + model choice popup (v3) ---------- */
/* One column so the full model info is readable; two on wide screens. */
.fits-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
@media (min-width: 1000px) { .fits-grid { grid-template-columns: 1fr 1fr; } }
.fits-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center;
  width: 100%; padding: 9px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 6px;
  background: #fff; font: inherit; font-size: .88rem; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.fits-item:hover { border-color: var(--red); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.fits-item__brand { font-weight: 700; color: var(--red); font-size: .78rem; text-transform: uppercase; }
.fits-item__version { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fits-item__years { color: var(--muted); font-size: .82rem; }
.model-picker__filter {
  width: min(420px, 100%); padding: 8px 12px; margin: 8px 0;
  border: 1.5px solid var(--line); border-radius: 6px; font: inherit; font-size: .9rem;
}
.model-choice {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 18, 19, .55);
  display: grid; place-items: center; padding: 16px;
}
.model-choice__box {
  display: flex; flex-direction: column; gap: 10px;
  width: min(400px, 100%); padding: 24px;
  background: #fff; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15,23,42,.3);
}
.model-choice__name { margin: 0 0 4px; font-weight: 700; text-align: center; }
.fits-item__mine { grid-column: 1 / -1; font-size: .75rem; font-weight: 700; color: var(--ok); }
.fits-item.is-mine { border-color: var(--ok); background: #f2faf5; }

/* ---------- "my motorcycle" (v3) ---------- */
.bike-menu { position: relative; }
.bike-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 260px;
  padding: 2px 12px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--red); color: #fff; font: inherit; font-size: .82rem; font-weight: 700;
}
.bike-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bike-chip:hover { background: var(--red-dark); }
.bike-menu__panel {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 70; min-width: 220px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(15,23,42,.18); padding: 6px; text-align: left;
}
.bike-menu__panel a, .bike-menu__unselect {
  display: block; width: 100%; padding: 8px 10px; border: 0; background: none;
  font: inherit; font-size: .88rem; color: var(--ink); text-align: left;
  border-radius: 6px; cursor: pointer;
}
.bike-menu__panel a:hover, .bike-menu__unselect:hover { background: var(--bg); text-decoration: none; }
.bike-menu__unselect { color: var(--bad); }
.bike-current { font-weight: 700; color: var(--ok); font-size: .88rem; }
.link-button { border: 0; background: none; font: inherit; font-size: .85rem; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0; }
.bike-fit { font-weight: 700; font-size: .9rem; padding: 8px 12px; border-radius: 6px; display: inline-block; margin: 0 0 10px; }
.bike-fit--yes { background: var(--ok-bg); color: var(--ok); }
.bike-fit--no { background: var(--bad-bg); color: var(--bad); }
@media (max-width: 720px) { .bike-chip { max-width: 34vw; } }

/* ---------- supersession notes ---------- */
.replacement-note {
  background: #fff8e6; border: 1px solid #f0d9a0; border-radius: var(--radius);
  padding: 12px 14px; margin: 0 0 14px;
}
.replacement-note > p { margin: 0 0 8px; }
.replacement-note .offer-row { background: #fff; margin-bottom: 0; }
.replacement-hint { margin: 6px 0 4px; font-size: .85rem; font-weight: 600; color: var(--warn); }
.offer-row--replacement { border: 1px solid #f0d9a0; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  /* v3 mobile: drawing pinned at the top while the parts list scrolls under it. */
  .exploded-view { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .exploded-view__stage { position: sticky; top: 0; z-index: 30; max-height: 38vh; }
  .exploded-view__stage .exploded-view__canvas img { max-height: 38vh; object-fit: contain; }
  .exploded-view__zoombar { flex-direction: row; top: 6px; right: 6px; }
  .drawing-head { align-items: center; gap: 12px; }
  .drawing-head h1 { font-size: 1.1rem; }
  .drawing-head__model img { width: 84px; height: 60px; }
  .drawing-head__model small { font-size: .68rem; }
}
@media (max-width: 800px) {
  /* v3 mobile: compact model intro — first drawing near the fold. */
  h1 { font-size: 1.3rem; }
  .breadcrumbs { margin: 12px 0 16px; }
  .model-intro { align-items: center; gap: 12px; margin: 4px 0 12px; }
  .model-intro__text h1 { font-size: 1.15rem; margin-bottom: 4px; }
  .model-intro__text > p { display: none; }
  .model-intro__image { max-height: 72px; max-width: 110px; }
  .model-actions { gap: 6px; margin: 6px 0; }
  .model-actions .btn { padding: 5px 10px; font-size: .78rem; }
  .drawings-band { padding: 14px 0 22px; margin: 8px 0; }
  .drawings-band__head { margin-bottom: 10px; gap: 8px; }
  .drawings-band__head h2 { font-size: 1.05rem; }
  .drawing-filterbar { flex-wrap: nowrap; gap: 8px; width: 100%; }
  .drawing-filterbar input[type="search"] { padding: 6px 8px; font-size: .82rem; min-width: 0; }
  .drawing-filterbar__select { padding: 6px 8px; font-size: .82rem; max-width: 46%; }
  .version-switcher { grid-template-columns: 1fr 2fr; gap: 6px 8px; margin-top: 6px; }
  .version-switcher__label { grid-column: 1 / -1; font-size: .82rem; }
  .version-switcher select { width: 100%; padding: 6px 8px; font-size: .82rem; }
}
@media (max-width: 800px) {
  /* v3 mobile: title first, then image, then buy info. */
  .product { grid-template-columns: 1fr; grid-template-areas: "head" "gallery" "info"; grid-template-rows: none; }
  .product__head .product__title { font-size: 1.25rem; }
}
@media (max-width: 960px) {
  .checkout-layout, .dash-cols, .split__inner { grid-template-columns: minmax(0, 1fr); }
  .checkout-side { position: static; }
  .split--reverse .split__text { order: 1; }
  .split--reverse .split__img { order: 2; }
}
@media (max-width: 960px) {
  /* Narrow enough that the copy spans the full width, so the scrim has to
     cover it evenly instead of clearing to the right. */
  .hero::after { background: linear-gradient(180deg, rgba(18, 23, 31, .78), rgba(18, 23, 31, .90)); }
  .split__text > p { max-width: none; }
}
@media (max-width: 640px) {
  html, body { overflow-x: clip; }
  .pos-group__meta { display: none; }
  .offer-row__qty { flex-wrap: wrap; justify-content: flex-end; }
  .offer-row__qty .btn { padding: .25rem .5rem; }
  .part-line__epc { margin-bottom: 4px; }
  .form__row { grid-template-columns: 1fr; }
  .mainbar__inner { gap: .8rem; }
  .logo img { width: 140px; }
  .header-search { order: 3; flex-basis: 100%; max-width: none; }
  .header-action__label { display: none; }
  .topbar__note { display: none; }
  /* Parts panel: stack the buy block under the part info. */
  .exploded-view__parts { padding: 10px; }
  .pos-group summary { padding: 8px 10px; gap: 8px; }
  .pos-group__parts { padding: 0 10px 10px; }
  .offer-row { grid-template-columns: minmax(0, 1fr); }
  .offer-row__buy { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; min-width: 0; }
  .drawing-head__model { display: none; }
}

/* ============================================================
   Workshop — units, customers, jobs and the planner.
   Built on the same tokens as the rest of the portal; nothing
   here restyles an existing component.
   ============================================================ */

/* Frame number input (cart + checkout) */
.frame-input {
  width: 9.5rem;
  min-width: 7rem;
  font-size: .85rem;
  padding: .35rem .5rem;
}

/* Workshop sub-navigation */
.ws-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--line);
}
.ws-nav__item {
  padding: .6rem 1rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  font-size: .95rem;
}
.ws-nav__item:hover { color: var(--ink); }
.ws-nav__item.is-active {
  color: var(--red);
  border-bottom-color: var(--red);
}

.ws-setup { border-left: 4px solid var(--red); }

.inline-form { display: inline-block; }

/* ---- Units list ---- */
.unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}
.unit-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: .5rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, transform .15s;
}
.unit-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}
.unit-card.is-archived { opacity: .55; }
.unit-card__media {
  aspect-ratio: 4 / 3;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.unit-card__media img { width: 100%; height: 100%; object-fit: cover; }
.unit-card__placeholder { font-size: 2.5rem; opacity: .3; }
.unit-card__body { padding: .75rem .9rem 1rem; display: grid; gap: .35rem; }
.unit-card__meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .85rem; }
.unit-card__owner { font-size: .9rem; color: var(--muted); }
.unit-card__foot { font-size: .8rem; }

/* ---- Unit detail ---- */
.unit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1.5rem;
  align-items: start;
}
.unit-layout__side { display: grid; gap: 1rem; }
@media (max-width: 60rem) {
  .unit-layout { grid-template-columns: minmax(0, 1fr); }
}

.spec-list { display: grid; gap: .6rem; margin: 0; }
.spec-list > div { display: grid; grid-template-columns: 9rem 1fr; gap: .5rem; }
.spec-list dt { color: var(--muted); font-size: .85rem; }
.spec-list dd { margin: 0; font-weight: 600; }

.unit-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .6rem;
}
.unit-photo { position: relative; margin: 0; }
.unit-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: .4rem;
  background: var(--bg);
}
.unit-photo__remove {
  position: absolute;
  top: .35rem;
  right: .35rem;
  border: 0;
  border-radius: 50%;
  width: 1.6rem;
  height: 1.6rem;
  background: rgba(0, 0, 0, .6);
  color: var(--card);
  cursor: pointer;
  line-height: 1;
}
.unit-photo__remove:hover { background: var(--red); }

/* ---- Model / part picker ---- */
.unit-picker {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.unit-picker__results,
.job-add__results {
  display: grid;
  gap: .2rem;
  max-height: 18rem;
  overflow-y: auto;
  margin-top: .5rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: var(--card);
  padding: .3rem;
}
.unit-picker__hit {
  display: grid;
  gap: .1rem;
  text-align: left;
  width: 100%;
  padding: .5rem .6rem;
  border: 0;
  border-radius: .3rem;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.unit-picker__hit:hover { background: var(--bg); }
.unit-picker__hit strong { font-size: .92rem; }
.unit-picker__hit span { font-size: .82rem; color: var(--muted); }

.unit-picker__chosen,
.job-add__chosen {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .75rem;
  padding: .6rem .75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: .4rem;
  font-size: .9rem;
}
.unit-picker__chosen.is-empty { background: transparent; border-style: dashed; }

.unit-owner { margin-top: .75rem; }

/* ---- Job editor ---- */
.job-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1.5rem;
  align-items: start;
}
.job-layout__side { display: grid; gap: 1rem; }
@media (max-width: 68rem) {
  .job-layout { grid-template-columns: minmax(0, 1fr); }
}

.job-lines input[type="text"],
.job-lines input[type="number"] {
  padding: .3rem .45rem;
  font-size: .88rem;
}
.job-lines__note { margin-top: .25rem; font-size: .8rem; }
.job-lines .money-input { width: 6rem; text-align: right; }
.job-lines .qty-input { width: 5rem; }

/* A thin or negative margin is the one number that must not slip past. */
.is-thin { color: var(--warn); }
.is-loss { color: var(--bad); font-weight: 700; }
.totals__grand.is-loss dd,
.totals__grand.is-thin dd { color: inherit; }

.pill--part   { background: var(--info-bg); color: var(--info); border-color: transparent; }
.pill--labour { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.pill--cost   { background: var(--warn-bg); color: var(--warn); border-color: transparent; }

.job-add { display: grid; gap: 1rem; }

/* ---- Printable offer ---- */
.offer-sheet { background: var(--card); }
.offer-sheet__actions { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.offer-sheet__head {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 1.5rem;
}
.offer-sheet__from { text-align: right; font-size: .9rem; line-height: 1.5; }
.offer-sheet__parties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.offer-sheet__parties h2 { font-size: .85rem; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.offer-sheet__intro { margin-bottom: 1.25rem; }
.offer-sheet__foot { margin-top: 1.5rem; font-size: .85rem; }

@media print {
  .no-print,
  .site-header, .site-footer, .site-banner, .flash, .ws-nav { display: none !important; }
  .offer-sheet { max-width: none; padding: 0; }
}

/* ---- Planner ---- */
.planner { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; }
.planner__mechanic {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: 1rem;
}
.planner__name { font-size: 1.05rem; margin: 0 0 .75rem; }
.planner__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .5rem;
}
@media (max-width: 72rem) {
  .planner__week { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
}
.planner__day {
  border: 1px solid var(--line);
  border-radius: .4rem;
  padding: .5rem;
  min-height: 7rem;
  background: var(--card);
  font-size: .82rem;
}
.planner__day.is-closed { background: var(--bg); color: var(--muted); }
.planner__day.is-today { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; }
.planner__dayhead { display: grid; gap: .1rem; margin-bottom: .4rem; }
.planner__dayhead strong { font-size: .85rem; }
.planner__free { margin: 0; font-size: .8rem; }
.planner__jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.planner__job {
  display: grid;
  gap: .1rem;
  padding: .4rem .45rem;
  border-radius: .3rem;
  background: var(--info-bg);
  border-left: 3px solid var(--info);
}
.planner__job--done { background: var(--ok-bg); border-left-color: var(--ok); }
.planner__job--cancelled { background: var(--bg); border-left-color: var(--muted); opacity: .6; }
.planner__time { font-weight: 700; font-size: .8rem; }
.planner__what { font-size: .8rem; }
.planner__bike { font-size: .75rem; }
.planner__actions { display: flex; gap: .5rem; margin-top: .2rem; }
.planner__actions .link-button { font-size: .72rem; }
.planner__load { margin: .4rem 0 0; font-size: .75rem; }

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: .5rem;
}
.slot { width: 100%; }

.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.plan-list li {
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--bg);
}
.plan-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.hours-table input[type="time"] { padding: .3rem .4rem; font-size: .88rem; }
.mechanic-row { align-items: end; }

tr.is-archived { opacity: .55; }

/* ---- Mechanic overview ---- */

/* Money doesn't fit at the marketing-page size the stat tile was built for. */
.stats__grid--report { margin-bottom: 1.5rem; }
.stats__grid--report .stat { padding: 1rem .9rem; }
.stats__grid--report .stat strong { font-size: 1.35rem; }
.stats__grid--report .stat span { font-size: .82rem; }

/* Utilisation bar. Scaled against the busiest mechanic rather than 100%, so
   the comparison stays readable in a quiet month — the label carries the
   real percentage. */
.mech-bar {
  height: .5rem;
  min-width: 5rem;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .2rem;
}
.mech-bar span {
  display: block;
  height: 100%;
  background: var(--red);
  border-radius: 999px;
}

.mech-table td { vertical-align: top; }
.mech-table tfoot td { border-top: 2px solid var(--line); font-weight: 600; }

/* Unlimited mechanic rows on the settings page. */
.mechanic-new { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* ---- "cart or job?" destination picker ---- */
.job-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--red); color: #fff; border-radius: 999px;
  padding: .15rem .35rem .15rem .7rem; font-size: .78rem; font-weight: 600;
  max-width: 22rem;
}
.job-chip a { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-chip__stop {
  border: 0; background: rgba(255, 255, 255, .25); color: #fff; cursor: pointer;
  border-radius: 50%; width: 1.15rem; height: 1.15rem; line-height: 1; font-size: .7rem; padding: 0;
}
.job-chip__stop:hover { background: rgba(255, 255, 255, .45); }

.dest {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgba(15, 23, 42, .45);
}
.dest__panel {
  background: var(--card); border-radius: var(--radius); width: min(30rem, 100%);
  max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(15, 23, 42, .3); padding: 1rem;
}
.dest__head { font-weight: 700; font-size: 1.05rem; margin-bottom: .75rem; }
.dest__label { font-size: .8rem; color: var(--muted); margin: .9rem 0 .35rem; text-transform: uppercase; }
.dest__list { display: grid; gap: .3rem; }
.dest__option {
  display: grid; gap: .1rem; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.dest__option:hover { border-color: var(--red); background: var(--bg); }
.dest__option strong { font-size: .95rem; }
.dest__option span { font-size: .82rem; color: var(--muted); }
.dest__foot { display: flex; gap: 1rem; margin-top: 1rem; font-size: .88rem; }

/* The job chip's label is a button now (it opens the menu), so it has to
   shed the button chrome and keep looking like the link it replaced. */
.job-chip__open {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600;
  color: #fff; cursor: pointer; max-width: 17rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.job-chip__open:hover { text-decoration: underline; }
/* The menu reuses the destination-picker panel; its options are links here. */
a.dest__option { text-decoration: none; color: inherit; }
a.dest__option:hover { text-decoration: none; }

/* Customer row actions sit side by side, not stacked. */
.customer-actions { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }

/* ---- long line tables (cart, checkout, order, job) ----
   Capped so a 40-line order does not push the totals and the buttons off the
   screen — on a phone that meant scrolling past the whole order to reach
   "place order". The header sticks, because a column you cannot name is worse
   than one you have to scroll to. */
.table-scroll--capped { max-height: 26rem; overflow-y: auto; }
.table-scroll--capped thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  box-shadow: inset 0 -1px 0 var(--line);
}
/* The totals row is the point of the table — keep it in view as well. */
.table-scroll--capped tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--card);
  box-shadow: inset 0 1px 0 var(--line);
}
@media (max-width: 48rem) {
  /* Phones: a fixed rem cap is either wasteful or cramped, so use the
     viewport and leave room for the header and the action buttons. */
  .table-scroll--capped { max-height: 60vh; }
}

/* ============================================================
   Workshop on small screens.
   The job page is the crowded one: four header buttons, an
   eight-column line table full of inputs, and a money sidebar.
   ============================================================ */
@media (max-width: 48rem) {
  /* Header actions become a full-width row of equal buttons instead of
     trailing off the right edge. */
  .page-head__nav { margin-left: 0; width: 100%; }
  .page-head__nav .btn,
  .page-head__nav .inline-form,
  .page-head__nav .inline-form .btn { flex: 1 1 10rem; }

  /* The active-job chip shares the topbar with the language switcher; without
     a cap a long "W-00012 · Aprilia RS 660 (2021)" pushes the bar wide. */
  .job-chip { max-width: 62vw; }
  .job-chip__open { max-width: 44vw; }

  /* The sub-nav has seven items: scroll it like the main portal nav rather
     than stacking three rows of tabs above every workshop page. */
  .ws-nav { flex-wrap: nowrap; overflow-x: auto; }
  .ws-nav__item { white-space: nowrap; padding: .6rem .75rem; }

  /* Line table: the row scrolls sideways, so give the inputs back some room
     by tightening what does not need to be wide. */
  .job-lines .money-input { width: 5rem; }
  .job-lines .qty-input { width: 4rem; }
  .job-lines input[type="text"],
  .job-lines input[type="number"] { font-size: .85rem; padding: .25rem .35rem; }
  .job-lines__note { min-width: 8rem; }

  /* Spec list: a 9rem label column leaves almost nothing for the value. */
  .spec-list > div { grid-template-columns: 1fr; gap: 0; }
  .spec-list dt { font-size: .8rem; }

  /* Offer sheet: right-aligned sender text reads as a mistake once it wraps
     underneath the heading. */
  .offer-sheet__from { text-align: left; }

  /* Planner: one day per row at this width, so let each breathe. */
  .planner__mechanic { padding: .75rem; }
  .planner__day { min-height: 0; }

  /* Stat tiles two-up rather than one enormous column. */
  .stats__grid--report { grid-template-columns: 1fr 1fr; }
  .stats__grid--report .stat strong { font-size: 1.1rem; }
}

/* Very narrow phones: the stat row is better stacked than squeezed. */
@media (max-width: 26rem) {
  .stats__grid--report { grid-template-columns: 1fr; }
  .job-chip { max-width: 52vw; }
}

/* ============================================================
   Nothing may push the page wider than the screen.
   The page itself is clipped on phones, so anything wider than
   the viewport has to carry its own horizontal scroll or it
   simply cannot be reached.
   ============================================================ */
@media (max-width: 48rem) {
  /* Safety net for a table that was never wrapped in .table-scroll: make the
     table its own scroll container. Wrapped tables opt back out, since their
     wrapper already scrolls (and nesting the two breaks the sticky header). */
  .table { display: block; overflow-x: auto; width: 100%; }
  .table-scroll > .table { display: table; overflow-x: visible; }

  /* Long unbroken values — a VIN, an article number, an email — are the other
     way a card gets wider than the phone. Let them wrap rather than push. */
  .spec-list dd,
  .unit-card__meta,
  .job-chip,
  .offer-sheet__parties p { overflow-wrap: anywhere; }

  /* Cards and their contents stay inside the viewport. */
  .card { max-width: 100%; }
  .card pre { overflow-x: auto; }
}

/* The job currently collecting parts, marked in the lists it appears in. */
.link-button.is-active-job { color: var(--red); font-weight: 700; text-decoration: none; }

/* The chip with no job in it: same shape, quieter, so it reads as an
   invitation rather than as state. */
.job-chip--empty {
  border: 1px dashed rgba(255, 255, 255, .5);
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  padding: .15rem .7rem;
}
.job-chip--empty:hover { color: #fff; border-color: #fff; }

/* A motorcycle in the header rather than a job: same chip, cooler colour, so
   the two are told apart at a glance. */
.job-chip--unit { background: var(--dark); }
.job-chip--unit .job-chip__stop { background: rgba(255, 255, 255, .2); }

/* ---- job lines: let the table be as wide as it needs ----
   .table is width:100%, so this one shrank to its container instead of
   overflowing it: eight columns of inputs squeezed into a phone, and the
   horizontal scroll never triggered because the table never got wider than
   the box. A floor width makes it overflow honestly and scroll. */
.job-lines { min-width: 54rem; }
.job-lines th { white-space: nowrap; }
/* Only the description column should absorb slack; the rest stay put. */
.job-lines td:first-child,
.job-lines td:nth-child(n+3) { white-space: nowrap; }
.job-lines td:nth-child(2) { min-width: 16rem; }

@media (max-width: 48rem) {
  /* The inputs are already narrower here, so the floor can come down with
     them — still wide enough to read, still scrolling rather than crushing. */
  .job-lines { min-width: 46rem; }
  .job-lines td:nth-child(2) { min-width: 12rem; }
}

/* ---- parts-table thumbnails ----
   The global `img { max-width: 100% }` beats the fixed width here: once the
   table is squeezed the cell approaches zero, and the thumbnail collapses to
   a sliver. Opt this one image out and hold the column open. */
.b2b-thumb { width: 52px; min-width: 52px; }
.b2b-thumb img { max-width: none; min-width: 40px; flex: none; }

/* Cart line actions stack: remove, and send this one to a job. */
.cart-line__actions { display: grid; gap: .2rem; justify-items: start; white-space: nowrap; }
.cart-to-job { margin-top: 1rem; }

/* ---- review pass (Fable over the session's work) ----
   The top bar was the last place that could still outgrow a phone: it never
   wraps, so a job chip + Contact + the language switch overflow a 360px
   viewport — and because the body is clipped, whatever fell off the right
   edge was not scrolled to but simply gone. Let it wrap. */
@media (max-width: 640px) {
  .topbar__inner { flex-wrap: wrap; padding: .2rem 1rem; }
  .topbar__nav { flex-wrap: wrap; gap: .4rem .9rem; min-width: 0; }
}
/* The clip guarded ≤640px while the width rules run to 48rem — between the
   two, an overflow could still drag the page sideways. Same guard, same
   boundary. */
@media (max-width: 48rem) {
  html, body { overflow-x: clip; }
}

/* Catalog-link suggestions on an unlinked unit. */
.suggest-list { display: grid; gap: .3rem; }
.suggest-list form { margin: 0; }
.suggest-list .unit-picker__hit { border: 1px solid var(--line); }
.suggest-list .unit-picker__hit:hover { border-color: var(--red); }

/* Import blocks on the data page. */
.import-block { border-top: 1px solid var(--line); padding: .7rem 0; }
.import-block:first-of-type { border-top: 0; }
.import-block summary { cursor: pointer; padding: .2rem 0; }
.import-block__columns {
  font-size: .78rem; background: var(--bg); border-radius: 6px;
  padding: .5rem .7rem; overflow-wrap: anywhere;
}

/* ============================================================
   Counter view — the portal with the dealer's numbers hidden.
   The body carries .is-counter; anything marked dealer-only
   disappears, and the price columns switch server-side.
   ============================================================ */
.counter-toggle {
  border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #cbd5e1;
  border-radius: 999px; padding: .15rem .7rem; font: inherit; font-size: .78rem;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.counter-toggle:hover { color: #fff; border-color: #fff; }
/* ON must be unmissable — the dealer has to notice the mode before trusting
   the screen to a customer, and notice it is still on afterwards. */
.counter-toggle--on { background: #fff; color: var(--red); border-color: #fff; }

.is-counter .dealer-earn,
.is-counter .dealer-cost,
.is-counter .dealer-earn-card { display: none !important; }
/* Job editor: the Cost (4) and Margin (7) columns are the dealer's own. */
.is-counter .job-lines td:nth-child(4), .is-counter .job-lines th:nth-child(4),
.is-counter .job-lines td:nth-child(7), .is-counter .job-lines th:nth-child(7) { display: none; }

/* ---- product page price block (point 3) ---- */
.price-block { margin: 0 0 1rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.price-block > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .45rem .8rem; border-bottom: 1px solid var(--line);
}
.price-block > div:last-child { border-bottom: 0; }
.price-block dt { color: var(--muted); font-size: .88rem; }
.price-block dd { margin: 0; font-weight: 600; white-space: nowrap; }
.price-block__buy { background: var(--bg); }
.price-block__buy dd strong { font-size: 1.25rem; }
.price-block__margin dd { color: var(--ok); }

/* ---- per-line confirmation at cart/checkout (point 1) ---- */
.accept { display: inline-flex; flex-direction: column; align-items: center; gap: .1rem; cursor: pointer; }
.accept small { color: var(--warn); font-weight: 600; white-space: nowrap; }

/* Offer style settings. */
.offer-logo-preview {
  display: block; max-height: 56px; max-width: 220px; margin-bottom: .5rem;
  border: 1px solid var(--line); border-radius: 6px; padding: 4px; background: #fff;
}
.offer-color-input { width: 5rem; height: 2.6rem; padding: .2rem; cursor: pointer; }

/* ---- Dealer handbook (info/handbook) ---- */
.handbook h2 {
  margin: 2rem 0 .5rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  font-size: 1.15rem;
}
.handbook h2:first-of-type { border-top: 0; padding-top: 0; }
.handbook__toc { padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.handbook__toc strong {
  display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .5rem;
}
.handbook__toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.handbook__toc li { margin-bottom: .2rem; break-inside: avoid; }
@media (max-width: 640px) { .handbook__toc ol { columns: 1; } }
.handbook ul { margin-bottom: 1rem; }
.handbook li { margin-bottom: .4rem; }

/* Trading identity line in the footer bottom bar. */
.site-footer__legal {
  display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; justify-content: space-between;
}

/* ============================================================
   Sideways-scroll affordance on wide data tables.

   Every B2B table is wider than a phone and scrolls inside its own
   container, but nothing said so: the columns that fall off the right edge
   are consistently the ones that matter — your price, the quantity, the
   add-to-cart button, the confirmation tick — and a dealer who does not
   realise the table moves cannot reach them.

   A fade pinned to the right edge, switched off once the table is scrolled
   to its end (JS toggles .is-scroll-end). background-attachment: local is
   what makes the gradient sit against the scrolling content rather than the
   viewport, so it tracks without a scroll listener where the browser
   supports it.
   ============================================================ */
.table-scroll {
  background-image: linear-gradient(to right, transparent, transparent),
                    linear-gradient(to right, rgba(15, 23, 42, .10), rgba(15, 23, 42, 0));
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 0 100%, 1.5rem 100%;
  background-attachment: local, scroll;
}
.table-scroll.is-scroll-end { background-size: 0 100%, 0 100%; }


/* ============================================================
   "Please confirm" block on the checkout.

   Backorder and probably-unavailable lines must be accepted before the order
   can be placed. That tick used to be a 13px box in the last column of a
   table 1010px wide — off-screen on a phone, clipped even at 1440px — so the
   dealer met a Place order button that silently refused. The controls now sit
   in their own block, in the flow, at a size a thumb can hit.
   ============================================================ */
.confirm-block { border-color: var(--warn); }
.confirm-row {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .65rem 0; border-top: 1px solid var(--line); cursor: pointer;
}
.confirm-row:first-of-type { border-top: 0; }
.confirm-row input[type=checkbox] { width: 1.35rem; height: 1.35rem; flex: none; margin-top: .1rem; }
.confirm-row__what { display: flex; flex-direction: column; gap: .15rem; font-size: .92rem; }
.confirm-row__what .mono { color: var(--muted); font-size: .82rem; }
.confirm-row__what .badge { align-self: flex-start; }