:root {
  --bg: #ffffff;
  --panel: #f7f7f7;
  --text: #111111;
  --muted: #767676;
  --accent: #ed1c24;
  --border: #e4e4e4;
  --ink: #1b1512;
}
* { box-sizing: border-box; }
body {
  /* viewport-fit=cover lets the page run under the notch in landscape. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* Running text in Inter (readable at paragraph length); labels, buttons
     and navigation set their own Barlow Condensed, headings Cormorant. */
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  /* Sticky footer without a <main> wrapper: in a flex column body, giving
     the footer margin-top:auto makes it consume all the leftover space on
     a short page and sit flush at the bottom, instead of floating up with
     empty space left below it. Fixed-position elements (tab bar, cart
     drawer) are pulled out of flow entirely, so they're unaffected. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; }
.eyebrow, nav a, .btn, .card h3, .section-title {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.topbar { background: var(--ink); }
.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  padding: 7px 24px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.topbar-inner a { color: #cfcfcf; }
.topbar-inner a:hover { color: #fff; }
@media (max-width: 700px) {
  .topbar-inner { justify-content: center; flex-wrap: wrap; gap: 12px; }
}

header.site {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 95;
  gap: 28px;
}
header.site .logo { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
header.site .logo-word { height: 15px; width: auto; display: block; }
header.site nav { flex-shrink: 0; display: flex; align-items: center; gap: 18px; }
.currency-switcher .select-custom { font-size: 12px; padding: 7px 30px 7px 12px; }
header.site nav a { color: var(--text); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
header.site nav a:hover { color: var(--accent); }
.cart-link { position: relative; display: flex; align-items: center; }
.cart-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
/* An element's own `display` declaration always beats the browser's
   default [hidden]{display:none} rule (author styles win over the UA
   stylesheet even at equal specificity) - so setting the hidden attribute
   on a badge that also has display:flex did nothing, and an empty cart
   kept showing a literal "0". This override has higher specificity than
   .cart-badge alone, so it actually wins. */
.cart-badge[hidden] { display: none; }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 12px);
  background: var(--ink);
  color: #fff;
  padding: 12px 22px;
  border-radius: 6px;
  font-size: 13px;
  letter-spacing: 0.3px;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Cart drawer: a slide-over panel instead of a dedicated /cart page, so
   adding/adjusting/removing items never leaves the page you're on. */
body.cart-drawer-active { overflow: hidden; }
.cart-drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10,10,11,0.5);
  z-index: 240;
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: #fff;
  z-index: 250;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s;
  box-shadow: -12px 0 40px rgba(0,0,0,0.2);
}
/* visibility/pointer-events are belt-and-suspenders on top of the
   transform: whatever happens with the slide animation, the closed drawer
   can never be visible or clickable - it can't get "stuck open". */
.cart-drawer.open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-drawer-header h2 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; margin: 0; }
.cart-drawer-close {
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
}
.cart-drawer-close:hover { color: var(--ink); }
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 8px 20px; }
.cart-drawer-empty { text-align: center; color: var(--muted); padding: 60px 12px; font-size: 14px; line-height: 1.7; }
.cart-drawer-empty a { color: var(--ink); text-decoration: underline; }
.cart-drawer-item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.cart-drawer-thumb { width: 64px; height: 64px; object-fit: cover; background: var(--panel); border-radius: 4px; flex-shrink: 0; }
.cart-drawer-item-info { flex: 1; min-width: 0; }
.cart-drawer-item-name { font-size: 13px; font-weight: 600; line-height: 1.35; display: block; margin-bottom: 4px; }
.cart-drawer-item-variant { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.cart-drawer-item-price { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.cart-drawer-qty { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 999px; padding: 2px 4px; }
.cart-drawer-qty span { font-size: 13px; font-weight: 600; min-width: 16px; text-align: center; }
.qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--panel);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-btn:hover { background: var(--border); }
.cart-drawer-item-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; flex-shrink: 0; }
.cart-drawer-line-total { font-size: 13px; font-weight: 700; }
.cart-drawer-remove { border: none; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.cart-drawer-remove:hover { color: var(--accent); }
.cart-drawer-footer { padding: 16px 20px 20px; border-top: 1px solid var(--border); flex-shrink: 0; }
.cart-drawer-subtotal { font-size: 15px; margin-bottom: 6px; }
.cart-drawer-note { font-size: 12px; color: var(--muted); margin: 0; }
.cart-drawer-note a { color: var(--ink); text-decoration: underline; }
@media (max-width: 700px) {
  /* Below 700px the drawer becomes a bottom sheet anchored above the fixed
     mobile tab bar (not covering it) instead of a full-height side panel -
     it slides up, not in from the side, and the tab bar stays reachable.
     --tabbar-h is the tab bar's *actual measured* height (set by
     cart-drawer.js) so the sheet's edge lines up with it exactly instead
     of a guessed pixel value leaving a gap. */
  .cart-drawer-backdrop { bottom: var(--tabbar-h, 58px); }
  .cart-drawer {
    left: 0;
    right: 0;
    top: auto;
    bottom: var(--tabbar-h, 58px);
    width: 100%;
    max-width: 100%;
    max-height: 75vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -16px 40px rgba(0,0,0,0.25);
  }
  .cart-drawer.open { transform: translateY(0); }

  /* A quantity stepper gets tapped repeatedly (build up to N, or back down
     to remove) - 22-26px was under both the 24px WCAG AA floor and any
     comfortable touch target. Bumped for every .qty-btn on the page (the
     cart drawer's and the product page's own stepper both use this same
     class), not just the drawer's. */
  .qty-btn { width: 40px; height: 40px; font-size: 18px; }
  .cart-drawer-qty { gap: 14px; padding: 4px 6px; }
}

.search-form {
  flex: 1 1 auto;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  position: relative;
  color: var(--muted);
}
.search-form:focus-within { border-color: var(--ink); color: var(--ink); }
.search-form.active {
  position: relative;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.search-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,10,11,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 90;
}
.search-backdrop.show { opacity: 1; visibility: visible; }

.search-suggest {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.16);
  z-index: 101;
  max-height: 400px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}
.search-suggest.open { opacity: 1; visibility: visible; transform: translateY(0); }
.search-suggest-label {
  padding: 10px 14px 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  font-weight: 700;
}
.search-suggest a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}
.search-suggest > a:last-child { border-bottom: none; }
.search-suggest a:hover, .search-suggest a.is-active { background: var(--panel); }
.search-suggest-status { padding: 14px 14px 10px; font-size: 13px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.search-suggest a.search-suggest-all {
  position: sticky;
  bottom: 0;
  justify-content: center;
  padding: 11px 14px;
  background: #fff;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink);
}
.search-suggest a.search-suggest-all:hover, .search-suggest a.search-suggest-all.is-active { background: var(--panel); color: var(--accent); }
.search-suggest img, .search-suggest .ph {
  width: 36px; height: 36px; object-fit: cover; background: var(--panel); flex-shrink: 0;
}
.search-suggest span { display: flex; flex-direction: column; font-size: 12px; text-transform: none; letter-spacing: 0; }
.search-suggest b { font-weight: 500; }
.search-suggest em { font-style: normal; color: var(--accent); font-weight: 600; margin-top: 2px; }
.search-popular-list { padding: 2px 6px 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.search-popular-item {
  display: inline-flex !important;
  padding: 6px 14px !important;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}
.search-popular-item:hover { border-color: var(--accent); color: var(--accent); background: none !important; }
.search-form svg { flex-shrink: 0; }
.search-form input {
  background: transparent;
  border: none;
  color: var(--text);
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  flex: 1;
  min-width: 0;
}
.search-form input:focus { outline: none; }
.search-form input::placeholder { color: var(--muted); }
.search-form button {
  background: none;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0 0 0 14px;
  flex-shrink: 0;
}
.search-form button:hover { color: var(--accent); }

/* width:100% is load-bearing, not decorative: body is a column flex
   container (for the sticky-footer trick above), so a flex item with no
   explicit width sizes to its own max-content instead of filling the row.
   That's invisible for most sections, but a CSS-grid child using
   repeat(auto-fill, ...) needs a *definite* container width to compute its
   column count - without it the grid collapses to a single minmax-width
   column, which is what broke .brand-shelf. */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 32px 24px; }
.breadcrumb { font-size: 12px; color: var(--muted); padding: 14px 24px; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.5px; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span[aria-hidden] { margin: 0 6px; }
.breadcrumb [aria-current] { color: var(--text); }

.hero {
  padding: 70px 24px 50px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.hero h1 { font-size: 40px; margin-bottom: 10px; letter-spacing: 1px; }
.hero p { color: var(--muted); font-size: 15px; }

/* The hero's subject is the material, not a car and not a product shot.
   What this shop actually sells you is a choice of weave - T380, Stealth,
   Forged - so the visual is those real swatches, shown as a wall of cloth
   with their codes. The ground is near-black because autoclave carbon is;
   the ink-on-ink twill behind it is the same weave rendered in CSS. No
   logo up here: the header already carries the wordmark 60px above. */
/* ---------- Home hero: a three-chapter presentation ----------
   Cars, carbon parts, finished builds. Each scene wipes in over the last
   (clip-path) with a red light edge riding the seam, while its photo
   settles from a slight zoom into a slow drift - the pattern high-end
   automotive sites use for their showroom heroes. The headline rises word
   by word, the stat counts up (hero.js), and a carbon-twill panel behind
   the copy catches a sheen of light. The chapter bars at the bottom are
   the autoplay clock (see hero.js).
   Base styles are always the *finished* state; the hidden "from" states
   live only inside keyframes, so reduced motion (animations off) and
   no-JS both show a complete, readable first scene. */
.hero-show {
  --hero-ease: cubic-bezier(.77, 0, .18, 1);
  --hero-out: cubic-bezier(.16, 1, .3, 1);
  --hero-dur: 7s;
  --hero-wipe: 1.25s;
  --hero-gutter: max(24px, calc((100% - 1280px) / 2 + 24px));
  position: relative;
  height: clamp(580px, calc(100svh - 70px), 860px);
  overflow: hidden;
  isolation: isolate;
  background: #0a0a0b;
  color: #fff;
}
.hero-stage { position: absolute; inset: 0; }
.hero-scene { position: absolute; inset: 0; visibility: hidden; }
.hero-scene.is-active { visibility: visible; z-index: 2; }
.hero-scene.is-leaving { visibility: visible; z-index: 1; }

/* scene wipe - only after the first move, so the page opens instantly */
.hero-show.has-moved .hero-scene.is-active { animation: heroWipeFwd var(--hero-wipe) var(--hero-ease) both; }
.hero-show.has-moved.is-backward .hero-scene.is-active { animation-name: heroWipeBack; }
@keyframes heroWipeFwd { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes heroWipeBack { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* light edge on the seam */
.hero-show.has-moved .hero-scene.is-active::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 22px 5px rgba(237, 28, 36, .55), 0 0 70px 14px rgba(237, 28, 36, .22);
  pointer-events: none;
  animation: heroEdgeFwd var(--hero-wipe) var(--hero-ease) both;
}
.hero-show.has-moved.is-backward .hero-scene.is-active::after { animation-name: heroEdgeBack; }
@keyframes heroEdgeFwd { 0% { left: 100%; opacity: 1; } 80% { opacity: 1; } 100% { left: 0; opacity: 0; } }
@keyframes heroEdgeBack { 0% { left: 0; opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 2px); opacity: 0; } }

/* photo: settle (media box) x slow drift (img) */
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-scene.is-active .hero-media { animation: heroSettle 2.2s var(--hero-out) both; }
.hero-scene.is-active .hero-media img,
.hero-scene.is-leaving .hero-media img { animation: heroDrift 14s linear both; }
.hero-scene.is-leaving .hero-media { animation: heroLeaveFwd var(--hero-wipe) var(--hero-ease) both; }
.hero-show.is-backward .hero-scene.is-leaving .hero-media { animation-name: heroLeaveBack; }
@keyframes heroSettle { from { transform: scale(1.18); filter: brightness(.55); } to { transform: none; filter: none; } }
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.07) translateX(-1.2%); } }
@keyframes heroLeaveFwd { to { transform: translateX(-9%); filter: brightness(.35); } }
@keyframes heroLeaveBack { to { transform: translateX(9%); filter: brightness(.35); } }

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, .8) 30%, rgba(8, 8, 9, .35) 55%, rgba(8, 8, 9, 0) 76%),
    linear-gradient(0deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, .35) 22%, rgba(8, 8, 9, 0) 42%),
    radial-gradient(120% 90% at 70% 40%, transparent 55%, rgba(0, 0, 0, .45) 100%);
}

/* carbon twill behind the copy, fading out toward the car */
.hero-weave {
  position: absolute;
  inset: 0;
  opacity: .5;
  background:
    linear-gradient(27deg, #151515 3px, transparent 3px) 0 3px,
    linear-gradient(207deg, #151515 3px, transparent 3px) 6px 0,
    linear-gradient(27deg, #222 3px, transparent 3px) 0 6px,
    linear-gradient(207deg, #222 3px, transparent 3px) 6px 3px,
    linear-gradient(90deg, #1b1b1b 6px, transparent 6px),
    linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
  background-color: #131313;
  background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .75) 22%, transparent 46%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .75) 22%, transparent 46%);
  pointer-events: none;
}
.hero-weave::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 120% 0;
  opacity: 0;
}
.hero-scene.is-active .hero-weave::after { animation: heroSheen 2.6s .5s ease-in-out both; }
@keyframes heroSheen {
  0% { background-position: 120% 0; opacity: 1; }
  100% { background-position: -20% 0; opacity: 1; }
}

/* ---- copy ---- */
.hero-copy {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 118px;
  left: var(--hero-gutter);
  right: var(--hero-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
}
.hero-copy > * { pointer-events: auto; }
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12.5px;
  color: #e9e4df;
  align-self: flex-start;
}
.hero-kicker-index { color: var(--accent); letter-spacing: 1px; }
.hero-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 5.8vw, 92px);
  line-height: 1;
  letter-spacing: -.5px;
  margin: 0 0 22px;
  max-width: 11.5em;
  color: #fff;
  text-wrap: balance;
}
.hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hw > span { display: inline-block; }
.hero-eyebrow-line {
  margin: 0 0 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-size: 12px;
  color: #9d9791;
}
.hero-lede { margin: 0 0 34px; max-width: 44ch; font-size: 16px; line-height: 1.65; color: #bdb7b1; }
.hero-cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; align-self: flex-start; }
.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 26px 17px 28px;
  background: #fff;
  color: #0a0a0b;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-size: 13.5px;
  transition: background-color .35s var(--hero-out), color .35s var(--hero-out);
}
.hero-btn svg { transition: transform .35s var(--hero-out); }
.hero-btn:hover { background: var(--accent); color: #fff; }
.hero-btn:hover svg { transform: translateX(5px); }
.hero-textlink {
  position: relative;
  padding: 6px 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-size: 13px;
  color: #d9d3cd;
}
.hero-textlink::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  opacity: .45;
  transform-origin: right;
  transition: transform .45s var(--hero-out), opacity .3s;
}
.hero-textlink:hover { color: #fff; }
.hero-textlink:hover::after { opacity: 1; animation: heroUnderline .6s var(--hero-out); }
@keyframes heroUnderline { 0% { transform: scaleX(1); transform-origin: right; } 45% { transform: scaleX(0); transform-origin: right; } 46% { transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

/* entrance choreography */
.hero-scene.is-active .hero-kicker { animation: heroRise .9s .15s var(--hero-out) both; }
.hero-scene.is-active .hw > span { animation: heroWord 1.15s var(--hero-out) both; animation-delay: calc(.3s + var(--w) * .075s); }
.hero-scene.is-active .hero-eyebrow-line { animation: heroRise .9s .7s var(--hero-out) both; }
.hero-scene.is-active .hero-lede { animation: heroRise .9s .8s var(--hero-out) both; }
.hero-scene.is-active .hero-cta { animation: heroRise .9s .92s var(--hero-out) both; }
.hero-scene.is-active .hero-stat { animation: heroRise 1s 1s var(--hero-out) both; }
.hero-scene.is-leaving .hero-copy,
.hero-scene.is-leaving .hero-stat { animation: heroFadeOut .45s ease both; }
@keyframes heroRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes heroWord { from { transform: translateY(108%) rotate(4deg); } to { transform: none; } }
@keyframes heroRule { from { transform: scaleX(0); } to { transform: none; } }
@keyframes heroFadeOut { to { opacity: 0; transform: translateX(-18px); } }

/* stat */
.hero-stat {
  position: absolute;
  z-index: 3;
  right: var(--hero-gutter);
  bottom: 150px;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.hero-stat b {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(54px, 5vw, 80px);
  line-height: .9;
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}
.hero-stat span {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.6px;
  font-size: 12px;
  color: #d0cac4;
}

/* ---- rail: chapters (autoplay clock) + controls ---- */
.hero-rail {
  position: absolute;
  z-index: 5;
  left: var(--hero-gutter);
  right: var(--hero-gutter);
  bottom: 34px;
  display: flex;
  align-items: flex-end;
  gap: 40px;
}
.hero-chapters { flex: 1; display: grid; grid-template-columns: repeat(var(--hero-count, 3), 1fr); gap: 22px; max-width: 760px; }
.hero-chapter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 10px 0 4px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .5);
  text-align: left;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  transition: color .3s;
}
.hero-chapter:hover, .hero-chapter.is-active { color: #fff; }
.hero-chapter-bar { position: relative; flex: 0 0 100%; height: 2px; margin-bottom: 12px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.hero-chapter-bar i { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero-chapter.is-done .hero-chapter-bar i { transform: scaleX(1); opacity: .45; }
.hero-chapter.is-active .hero-chapter-bar i { animation: heroClock var(--hero-dur) linear forwards; }
.hero-show.is-paused .hero-chapter.is-active .hero-chapter-bar i { animation-play-state: paused; }
.hero-show.is-stopped .hero-chapter.is-active .hero-chapter-bar i { animation: none; transform: scaleX(1); background: var(--accent); }
@keyframes heroClock { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-chapter-num { font-size: 12px; letter-spacing: 1px; color: var(--accent); }
.hero-chapter-name { font-size: 13.5px; letter-spacing: 2px; }
.hero-controls { display: flex; gap: 8px; margin-left: auto; }
.hero-ctl {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(10, 10, 11, .28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .3s, background-color .3s;
}
.hero-ctl:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.hero-ctl [hidden] { display: none; }
.hero-show :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 900px) {
  .hero-stat { display: none; }
}
@media (max-width: 700px) {
  .hero-show {
    --hero-gutter: 20px;
    /* the phone header (logo row + search) is ~145px tall */
    height: clamp(540px, calc(100svh - 148px - var(--tabbar-h, 58px)), 740px);
  }
  .hero-shade {
    background:
      linear-gradient(180deg, rgba(8, 8, 9, .35) 0%, rgba(8, 8, 9, 0) 22%, rgba(8, 8, 9, .25) 42%, rgba(8, 8, 9, .9) 70%, rgba(8, 8, 9, .97) 100%);
  }
  .hero-weave {
    -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .6) 30%, transparent 55%);
    mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .6) 30%, transparent 55%);
  }
  .hero-copy { justify-content: flex-end; bottom: 92px; }
  .hero-kicker { margin-bottom: 16px; font-size: 11.5px; letter-spacing: 2.4px; }
  .hero-headline { font-size: clamp(36px, 10.4vw, 52px); margin-bottom: 14px; }
  .hero-eyebrow-line { display: none; }
  .hero-lede { font-size: 14.5px; line-height: 1.6; margin-bottom: 24px; }
  .hero-btn { padding: 15px 20px 15px 22px; font-size: 13px; }
  .hero-cta { gap: 20px; }
  .hero-rail { bottom: 22px; gap: 0; }
  .hero-chapters { gap: 12px; }
  .hero-chapter { gap: 2px 6px; }
  .hero-chapter-bar { margin-bottom: 8px; }
  .hero-chapter-name { font-size: 11px; letter-spacing: 1.2px; }
  .hero-chapter-num { font-size: 11px; }
  .hero-controls { display: none; }
}
/* Light editorial variant (car stories): studio photos shot on white sit in
   a panel on the right, the copy on a warm off-white column on the left.
   Same choreography, dark ink instead of white. */
.hero-show.is-light { background: #f4f3f1; color: #0d0d0e; }
.hero-show.is-split { height: clamp(600px, calc(100svh - 70px), 820px); }
.hero-show.is-split .hero-media { left: 40%; right: 0; top: 0; bottom: 104px; background: #fff; }
.hero-show.is-split .hero-shade { display: none; }
.hero-show.is-light .hero-weave { display: none; }
.hero-show.is-split .hero-copy { right: calc(60% + 40px); bottom: 104px; }
.hero-show.is-split .hero-headline { font-size: clamp(40px, 4.3vw, 72px); max-width: none; }
.hero-show.is-light .hero-headline { color: #0d0d0e; }
.hero-show.is-light .hero-kicker { color: #2a2a2d; }
.hero-show.is-light .hero-lede { color: #5b5752; }
.hero-show.is-light .hero-btn { background: #0d0d0e; color: #fff; }
.hero-show.is-light .hero-btn:hover { background: var(--accent); }
.hero-show.is-light .hero-textlink { color: #2a2a2d; }
.hero-show.is-split .hero-stat { position: static; align-items: flex-start; text-align: left; margin-top: 40px; gap: 6px; }
.hero-show.is-light .hero-stat b { font-size: clamp(46px, 4vw, 64px); text-shadow: none; color: #0d0d0e; }
.hero-show.is-light .hero-stat span { color: #6d6964; }
.hero-show.is-light .hero-chapter { color: rgba(13, 13, 14, .45); }
.hero-show.is-light .hero-chapter:hover,
.hero-show.is-light .hero-chapter.is-active { color: #0d0d0e; }
.hero-show.is-light .hero-chapter-bar { background: rgba(13, 13, 14, .14); }
.hero-show.is-light .hero-chapter-bar i { background: #0d0d0e; }
.hero-show.is-light .hero-ctl { color: #0d0d0e; border-color: rgba(13, 13, 14, .2); background: rgba(255, 255, 255, .6); }
.hero-show.is-light .hero-ctl:hover { border-color: #0d0d0e; background: #fff; }
/* the seam light reads better as a hairline on white */
.hero-show.is-light.has-moved .hero-scene.is-active::after { box-shadow: 0 0 16px 3px rgba(237, 28, 36, .35); }
.hero-show.is-light .hero-scene.is-leaving .hero-media { filter: none; }
/* stays inside its panel: a slide sideways would poke into the copy column */
@keyframes heroLeaveLight { to { transform: scale(.97); opacity: .55; } }
.hero-show.is-light .hero-scene.is-leaving .hero-media,
.hero-show.is-light.is-backward .hero-scene.is-leaving .hero-media { animation-name: heroLeaveLight; }
.hero-show.is-light .hero-scene.is-active .hero-media { animation-name: heroSettleLight; }
@keyframes heroSettleLight { from { transform: scale(1.14); } to { transform: none; } }
/* the wipe only needs to cover the photo panel, and the copy column shows
   one scene at a time, so the seam runs over the panel only */
.hero-show.is-split.has-moved .hero-scene.is-active::after { top: 0; bottom: 104px; }
@keyframes heroEdgeSplitFwd { 0% { left: 100%; opacity: 1; } 80% { opacity: 1; } 100% { left: 40%; opacity: 0; } }
@keyframes heroEdgeSplitBack { 0% { left: 40%; opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 2px); opacity: 0; } }
.hero-show.is-split.has-moved .hero-scene.is-active::after { animation-name: heroEdgeSplitFwd; }
.hero-show.is-split.has-moved.is-backward .hero-scene.is-active::after { animation-name: heroEdgeSplitBack; }
.hero-show.is-split.has-moved .hero-scene.is-active .hero-media { clip-path: none; }
.hero-show.is-split.has-moved .hero-scene.is-active,
.hero-show.is-split.has-moved.is-backward .hero-scene.is-active { animation: none; }
.hero-show.is-split.has-moved .hero-scene.is-active .hero-media { animation: heroPanelFwd var(--hero-wipe) var(--hero-ease) both, heroSettleLight 2.2s var(--hero-out) both; }
.hero-show.is-split.has-moved.is-backward .hero-scene.is-active .hero-media { animation-name: heroPanelBack, heroSettleLight; }
@keyframes heroPanelFwd { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes heroPanelBack { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero-show.is-split .hero-media img { transform-origin: 50% 50%; }
@media (max-width: 900px) {
  .hero-show.is-split .hero-stat { display: flex; }
}
@media (max-width: 700px) {
  .hero-show.is-split { height: auto; min-height: 0; }
  .hero-show.is-split .hero-stage { position: relative; height: calc(62vw + 340px); }
  .hero-show.is-split .hero-media { left: 0; right: 0; bottom: auto; height: 62vw; }
  .hero-show.is-split .hero-copy { left: 20px; right: 20px; top: calc(62vw + 22px); bottom: auto; justify-content: flex-start; }
  .hero-show.is-split .hero-headline { font-size: clamp(32px, 9vw, 44px); }
  .hero-show.is-split .hero-stat { margin-top: 24px; flex-direction: row; align-items: baseline; gap: 10px; }
  .hero-show.is-split .hero-stat b { font-size: 40px; }
  .hero-show.is-split .hero-rail { position: relative; left: 0; right: 0; bottom: 0; padding: 0 20px 24px; }
  .hero-show.is-split .hero-chapter-num { display: none; }
  .hero-show.is-split .hero-chapter-name { white-space: nowrap; }
  .hero-show.is-split.has-moved .hero-scene.is-active::after { bottom: auto; height: 62vw; }
  @keyframes heroEdgeSplitFwd { 0% { left: 100%; opacity: 1; } 80% { opacity: 1; } 100% { left: 0; opacity: 0; } }
  @keyframes heroEdgeSplitBack { 0% { left: 0; opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 2px); opacity: 0; } }
}

@media (prefers-reduced-motion: reduce) {
  .hero-show *, .hero-show *::before, .hero-show *::after { animation: none !important; transition: none !important; }
}

/* ---------- Home hero: 3D studio (see server/client/car-hero.js) ----------
   A tall section with a pinned stage; scroll drives the camera and swaps the
   chapter copy. The copy reuses the .hero-* typography above. */
.studio {
  --studio-top: 70px;
  --hero-ease: cubic-bezier(.77, 0, .18, 1);
  --hero-out: cubic-bezier(.16, 1, .3, 1);
  --hero-gutter: max(24px, calc((100% - 1280px) / 2 + 24px));
  position: relative;
  height: 320svh;
  background: #09090a;
  color: #fff;
}
.studio-pin {
  position: sticky;
  top: var(--studio-top);
  height: calc(100svh - var(--studio-top));
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
}
/* what shows until (or instead of) the 3D: the same dark studio, lit */
.studio-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 62% 58%, rgba(255, 255, 255, .07), transparent 70%),
    radial-gradient(40% 12% at 62% 78%, rgba(0, 0, 0, .8), transparent 70%),
    linear-gradient(180deg, #0b0b0c 0%, #09090a 60%, #0d0d0e 100%);
}
.studio.is-fallback .studio-backdrop {
  background:
    linear-gradient(90deg, rgba(9, 9, 10, .92) 0%, rgba(9, 9, 10, .6) 40%, rgba(9, 9, 10, .1) 75%),
    url('/static/images/hero/slide-1.jpg') 62% 60% / cover no-repeat;
}
.studio-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.studio.is-loaded .studio-canvas { opacity: 1; }
.studio-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 9, 10, .78) 0%, rgba(9, 9, 10, .35) 32%, rgba(9, 9, 10, 0) 55%),
    linear-gradient(0deg, rgba(9, 9, 10, .6) 0%, rgba(9, 9, 10, 0) 25%);
}

.studio-loader {
  position: absolute;
  z-index: 4;
  right: var(--hero-gutter);
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 200px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
  transition: opacity .6s ease;
}
.studio-loader i { display: block; height: 1px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.studio-loader b { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.studio.is-loaded .studio-loader,
.studio.is-fallback .studio-loader { opacity: 0; pointer-events: none; }

/* chapters */
.studio-chapters { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.studio-copy { position: absolute; inset: 0; visibility: hidden; }
.studio-copy.is-active { visibility: visible; }
.studio-copy .hero-copy { bottom: 90px; pointer-events: none; }
.studio-copy .hero-headline { font-size: clamp(44px, 5.4vw, 86px); }
.studio-copy.is-active .hero-copy > * { pointer-events: auto; }
.studio-copy .hero-stat { bottom: 70px; }
.studio-copy.is-active .hero-kicker { animation: heroRise .9s .1s var(--hero-out) both; }
.studio-copy.is-active .hw > span { animation: heroWord 1.1s var(--hero-out) both; animation-delay: calc(.2s + var(--w) * .07s); }
.studio-copy.is-active .hero-eyebrow-line { animation: heroRise .9s .55s var(--hero-out) both; }
.studio-copy.is-active .hero-lede { animation: heroRise .9s .65s var(--hero-out) both; }
.studio-copy.is-active .hero-cta { animation: heroRise .9s .75s var(--hero-out) both; }
.studio-copy.is-active .hero-stat { animation: heroRise 1s .85s var(--hero-out) both; }
/* first chapter waits for the studio lights on the first visit */
.studio.is-intro .studio-copy[data-studio-chapter="0"].is-active .hero-kicker { animation-delay: .9s; }
.studio.is-intro .studio-copy[data-studio-chapter="0"].is-active .hw > span { animation-delay: calc(1s + var(--w) * .08s); }
.studio.is-intro .studio-copy[data-studio-chapter="0"].is-active .hero-eyebrow-line { animation-delay: 1.45s; }
.studio.is-intro .studio-copy[data-studio-chapter="0"].is-active .hero-lede { animation-delay: 1.55s; }
.studio.is-intro .studio-copy[data-studio-chapter="0"].is-active .hero-cta { animation-delay: 1.65s; }
.studio.is-intro .studio-copy[data-studio-chapter="0"].is-active .hero-stat { animation-delay: 1.9s; }
.studio.is-scrolled .studio-copy .hero-kicker,
.studio.is-scrolled .studio-copy .hw > span,
.studio.is-scrolled .studio-copy .hero-eyebrow-line,
.studio.is-scrolled .studio-copy .hero-lede,
.studio.is-scrolled .studio-copy .hero-cta,
.studio.is-scrolled .studio-copy .hero-stat { animation-delay: 0s; }
.studio.is-scrolled .studio-copy.is-active .hw > span { animation-delay: calc(var(--w) * .06s); }

/* chapter rail along the bottom, filled by scroll progress */
.studio-index {
  position: absolute;
  z-index: 4;
  left: var(--hero-gutter);
  bottom: 30px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 34px;
  padding-top: 16px;
}
.studio-index-track { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, .18); }
.studio-index-track i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.studio-index-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .42);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  transition: color .3s;
}
.studio-index-item b { font-weight: 600; letter-spacing: 1px; }
.studio-index-item:hover, .studio-index-item.is-active { color: #fff; }
.studio-index-item.is-active b { color: var(--accent); }

.studio-scroll {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.6px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, .55);
  transition: opacity .5s ease;
}
.studio-scroll i { position: relative; width: 1px; height: 38px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.studio-scroll i::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: #fff; animation: studioScroll 1.8s var(--hero-ease) infinite; }
@keyframes studioScroll { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }
.studio.is-scrolled .studio-scroll { opacity: 0; }

.studio :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 900px) {
  .studio-copy .hero-stat { display: none; }
}
@media (max-width: 700px) {
  .studio { height: 280svh; --hero-gutter: 20px; }
  .studio-pin { height: calc(100svh - var(--studio-top) - var(--tabbar-h, 58px)); min-height: 520px; }
  .studio-vignette { background: linear-gradient(0deg, rgba(9, 9, 10, .95) 0%, rgba(9, 9, 10, .75) 34%, rgba(9, 9, 10, 0) 58%); }
  .studio-copy .hero-copy { justify-content: flex-end; bottom: 34px; }
  .studio-copy .hero-headline { font-size: clamp(34px, 10vw, 48px); margin-bottom: 12px; }
  .studio-copy .hero-kicker { margin-bottom: 14px; font-size: 11.5px; letter-spacing: 2.4px; }
  .studio-copy .hero-eyebrow-line { display: none; }
  .studio-copy .hero-lede { font-size: 14.5px; line-height: 1.55; margin-bottom: 20px; }
  .studio-copy .hero-btn { padding: 15px 20px 15px 22px; font-size: 13px; }
  .studio-index { top: 18px; bottom: auto; gap: 18px; padding-top: 10px; }
  .studio-index-item { font-size: 11px; letter-spacing: 1.4px; gap: 6px; }
  .studio-loader { top: 30%; left: var(--hero-gutter); right: auto; }
  .studio-scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .studio *, .studio *::before, .studio *::after { animation: none !important; transition: none !important; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Homepage 3D car showcase ----------
   A CSS-3D coverflow, not literal 3D car models - the catalogue only ever
   had photographs to work with (no GLB/GLTF assets exist for any of these
   cars, and licensing real ones for Ferrari/Lamborghini/etc. is its own
   undertaking, not something this pass can do). perspective + rotateY/
   translateZ on the existing photos gets the "browsing cars in a slick 3D
   rail" feeling without pretending to be a real turntable render. */
.car3d-section { background: #0a0a0b; padding: 44px 0 56px; overflow: hidden; }
.car3d-section .section-title { font-family: 'Barlow Condensed', sans-serif; }
.car3d-section .container-inner { max-width: 1280px; margin: 0 auto 28px; padding: 0 24px; }
.car3d-stage {
  position: relative;
  height: 420px;
  perspective: 1600px;
  /* Lets a drag start anywhere in the stage register as horizontal input
     even on a touchscreen, instead of the browser treating it as a page
     scroll gesture before JS gets a chance to see it. */
  touch-action: pan-y;
}
.car3d-track {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  cursor: grab;
}
.car3d-track.dragging { cursor: grabbing; }
.car3d-track, .car3d-card, .car3d-card img { touch-action: pan-y; }
.car3d-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 300px;
  margin: -150px 0 0 -190px;
  border-radius: 14px;
  overflow: hidden;
  background: #131417;
  box-shadow: 0 30px 60px rgba(0,0,0,0.55);
  will-change: transform, opacity, filter;
  -webkit-user-drag: none;
}
/* The transition is toggled off during an active drag (see car3d.js) so the
   card tracks the pointer 1:1 instead of laggily chasing it, then back on
   for the snap-to-position settle - the same reasoning as the gallery drag
   fix elsewhere in this file. */
.car3d-card.animated { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, filter 0.5s ease; }
.car3d-card-photo { width: 100%; height: 76%; pointer-events: none; }
.car3d-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.car3d-card-info {
  height: 24%;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  background: #17181d;
  pointer-events: none;
}
.car3d-card-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.car3d-card-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #9a9ea3;
}
.car3d-nav {
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(10,10,11,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.car3d-nav:hover { background: rgba(237,28,36,0.85); border-color: var(--accent); }
.car3d-nav-prev { left: 6%; }
.car3d-nav-next { right: 6%; }
.car3d-dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; }
.car3d-dot { width: 7px; height: 7px; border-radius: 50%; border: none; background: #3a3b40; padding: 0; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.car3d-dot:hover { background: #6b6d73; }
.car3d-dot.active { background: var(--accent); transform: scale(1.3); }

@media (max-width: 720px) {
  .car3d-section { padding: 28px 0 32px; }
  .car3d-section .container-inner { margin-bottom: 8px; }
  .car3d-stage { height: 270px; perspective: 900px; }
  .car3d-dots { margin-top: 12px; }
  .car3d-card { width: 280px; height: 230px; margin: -115px 0 0 -140px; }
  .car3d-nav { width: 38px; height: 38px; margin-top: -19px; }
  .car3d-nav-prev { left: 8px; }
  .car3d-nav-next { right: 8px; }
}

/* One line of context under a section heading - used where the heading
   alone doesn't say what the section is for. */
.section-sub { color: var(--muted); font-size: 14px; margin: -12px 0 22px; max-width: 62ch; }
/* The pull-up above tightens this against a plain .section-title, which
   leaves 20px under itself. A .toolbar leaves only 4px, so the same pull-up
   would drag the line up onto the heading. */
.toolbar + .section-sub { margin-top: 6px; }


/* "Shop by brand": one rectangular chip per brand - a small logo tile on
   the left, the name on the right - laid out as a wrapping grid at every
   width (narrower columns on phones) so the full list is reachable with an
   ordinary vertical scroll instead of trapping the user in a sideways-only
   scroller. Brands without a real logo (admin-editable at /admin/brands)
   fall back to a plain letter monogram so the row never breaks.
   width:100% is load-bearing here, not decorative - see the .container
   comment above for why a definite width matters for auto-fill. */
/* Plain full grid - every brand visible at once, wrapping to as many rows
   as it takes. This is the standalone /catalog brand listing's layout. */
.brand-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  width: 100%;
}

/* Homepage-only ("Shop by brand"): the shelf defaults to exactly two rows -
   it's a grid-auto-flow:column carousel (2 fixed rows, as many columns as
   brands need), so anything past the visible width scrolls sideways via the
   arrow buttons rather than pushing the page taller. "Show all brands"
   swaps it to the plain wrapping grid above. Scoped under .brand-section so
   the standalone /catalog grid (full grid, no row cap) is unaffected. */
.brand-section { display: flex; align-items: flex-start; }
.brand-shelf-col { flex: 1 1 0; min-width: 0; }
.brand-shelf-wrap { position: relative; }
.brand-section .brand-shelf {
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: 210px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.brand-section .brand-shelf::-webkit-scrollbar { display: none; }
.brand-section .brand-shelf.expanded {
  grid-auto-flow: row;
  grid-template-rows: none;
  grid-auto-columns: unset;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  overflow-x: visible;
}
.brand-section .brand-chip { scroll-snap-align: start; }
.brand-shelf-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
  opacity: 0.85;
}
.brand-shelf-arrow:hover { opacity: 1; }
.brand-shelf-arrow[hidden] { display: none; }
.brand-shelf-prev { left: -14px; background: linear-gradient(to right, var(--bg) 60%, transparent); justify-content: flex-start; }
.brand-shelf-next { right: -14px; background: linear-gradient(to left, var(--bg) 60%, transparent); justify-content: flex-end; }
.brand-shelf-wrap.expanded .brand-shelf-arrow { display: none; }
.brand-shelf-expand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.brand-shelf-expand:hover { color: var(--ink); }
.brand-shelf-expand svg { transition: transform 0.2s ease; }
.brand-shelf-expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.brand-chip[hidden] { display: none; }
.brand-empty { color: var(--muted); font-size: 13px; padding: 8px 2px; }
.brand-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.brand-chip:hover { border-color: var(--ink); box-shadow: 0 6px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }
.brand-chip-logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  padding: 6px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-chip-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-chip-letter { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1; }
.brand-chip-name {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  /* Grid for products, categories, cars, projects */
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px 12px;
  }
  .card .thumb { aspect-ratio: 4 / 3; }
  .card h3 { font-size: 12px; }
  .card .price { font-size: 13px; }

  /* Below 700px the 2-row carousel is a desktop-only refinement - back to
     the plain stacked, fully-wrapping grid phones already had (no
     horizontal paging, no expand toggle).
     Selector matches .brand-section .brand-shelf's specificity (two
     classes) on purpose - a plain .brand-shelf here loses the cascade to
     that desktop rule at any width, since media queries don't add
     specificity. Without this, mobile silently kept the column-flow/
     overflow-x carousel with its arrows hidden - only the ~6 brands that
     fit two rows within one screen-width were ever visible, with no way to
     reach the rest.
     .brand-section is only ever flex to lay its single child out along the
     main (horizontal) axis, where flex:1 1 0 on that child fills the
     container width regardless of align-items. Switching to column here
     would flip which axis is "main" without changing align-items:
     flex-start, so the child's width collapses to its own content instead
     of the container's - block sidesteps the whole flex axis question for
     a single child. */
  .brand-section { display: block; }
  .brand-shelf-arrow, .brand-shelf-expand { display: none; }
  .brand-section .brand-shelf {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-auto-columns: unset;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    overflow-x: visible;
  }
  .brand-chip { padding: 8px 12px 8px 8px; }
  .brand-chip-logo { width: 34px; height: 34px; border-radius: 7px; padding: 5px; }
  .brand-chip-letter { font-size: 16px; }
  .brand-chip-name { font-size: 11px; letter-spacing: 0.2px; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 28px 22px;
}
/* Phones: two cards per row for parts, projects and sections. This has to
   come after the base rule above - an earlier @media block with the same
   selector lost to it on source order, so phones got one ~450px card per
   row and a 24-item page ran to ~10,000px. */
@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
}
/* Subcategory tiles ("Sections" above a category's product grid): auto-fill
   reserves a track for every column that *could* fit even when nothing
   fills it, so a category with only one or two child sections left small
   tiles stranded on the left with a big dead gap next to them. auto-fit
   collapses those empty tracks so a short row's tile(s) grow to fill it
   instead (1fr) - now safe to do since public.js prefers a section's own
   scraped hero photo (typically 1500px+) over a random product close-up,
   so the common case stretches a genuinely large source image rather than
   visibly blowing up a small one. A row with enough sections to fill it
   outright looks exactly as before either way. */
.section-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (max-width: 700px) {
  .section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.card {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}
.card .thumb {
  background: var(--panel);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 12px;
}
.card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.card:hover .thumb img { transform: scale(1.05); }
.card .body { padding: 0; flex: 1; display: flex; flex-direction: column; }
.card h3 { font-size: 13px; font-weight: 600; margin: 0 0 6px; line-height: 1.3; letter-spacing: 0.3px; }
.card .price { font-size: 14px; font-weight: 600; margin-top: auto; padding-top: 6px; }
/* A card with its own actionable button (car cards' "Buy") can't be one
   big <a> anymore - nested links aren't valid HTML. card-link carries the
   click-through to the detail page but generates no box of its own, so
   its thumb/title/price children still lay out as if they were direct
   children of .card, with the button sitting after them as a sibling. */
.card-link { display: contents; }
/* Car cards. A car sells on its photograph, so the card IS the photograph:
   wide 3:2 frame (the crop a car actually fits in - the square .card .thumb
   used for parts cut the nose and tail off every shot), with the name and
   price laid over a gradient instead of in a body block underneath. That
   also keeps the card down to the two facts a browsing buyer needs; tuning
   parts and the buy button live on the car's own page. */
.car-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
/* The inventory is studio photography on a white sweep, so the card is
   built as a white gallery plate rather than a photo with a dark scrim
   over it: a scrim on a white background reads as a black bar, not as a
   shadow under the car. The photo is contained, never cropped - these
   shots are composed with their own margin, and cover was cutting noses
   and tails off. */
.car-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.car-card:hover {
  border-color: #cfcac5;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.car-card img {
  display: block;
  width: 100%;
  /* The width/height attributes (there to reserve space) would otherwise
     pin the height and override aspect-ratio. */
  height: auto;
  /* Matches the inventory's actual shape: the studio renders are almost
     all portrait single-car shots (~4:5), not landscape - a 3:2 frame sat
     each one in a thin strip with wide gray margins left and right. */
  aspect-ratio: 4 / 5;
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.car-card:hover img { transform: scale(1.03); }
/* No photo yet: drop the placeholder mark back so a row of them doesn't
   shout over the real cars. */
.car-card-nophoto img { padding: 15%; opacity: 0.4; }
.car-card-nophoto:hover img { transform: none; }
.car-card-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border);
}
.car-card-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.25;
}
.car-card-price {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 23px;
  line-height: 1;
  color: var(--ink);
}
/* A car sold on request: a quiet label rather than the four words in the
   display serif reserved for a real number. */
.car-card-price.is-request {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
}
/* Phones: two compact cards per row. The photos are portrait studio shots
   with the car across the middle, so a 4:3 frame only trims the empty white
   above and below it - a full-width 4:5 card was ~700px tall, making the
   fleet a seven-screen scroll. */
@media (max-width: 720px) {
  .car-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .car-card img { aspect-ratio: 4 / 3; object-fit: cover; }
  .car-card-meta { padding: 10px 12px 12px; gap: 3px; }
  .car-card-name { font-size: 13px; letter-spacing: 0.3px; }
  .car-card-price { font-size: 18px; }
  .car-card-price.is-request { font-size: 11px; }
}

/* Listing cards open the product page - carbon type, finish and
   installation are chosen there, so there's no add-to-cart on the card
   (a card-level add could only guess the configuration). */
.card-cta {
  margin-top: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  transition: color 0.15s ease;
}
.card:hover .card-cta { color: var(--accent); }
.section-title { font-size: 13px; font-weight: 700; letter-spacing: 1px; margin: 44px 0 20px; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.carousel-head { border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 20px; }
.section-more { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: #9a9ea3; white-space: nowrap; }
.section-more:hover, .hero p a:hover { color: var(--accent); }
.hero p a { color: var(--text); border-bottom: 1px solid var(--border); }

/* "More cars" / "You might also like" carousel: always a single row (never
   wraps to a grid, on phone or desktop) that scrolls sideways - by drag,
   swipe, or the arrows - and loops forever in both directions. */
.carousel { position: relative; }
.carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Native horizontal swiping on touch screens (momentum + snap); JS only
     drags with a mouse. pan-y alone switched native sideways panning off. */
  touch-action: pan-x pan-y;
  cursor: grab;
  user-select: none;
  padding: 2px 2px 6px;
}
.carousel-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-card { flex: 0 0 200px; scroll-snap-align: start; }
/* Car cards are landscape, so they need a wider slot than a part's
   square thumb to keep the 3:2 frame at a readable height. */
.carousel-card-wide { flex-basis: 320px; }
.carousel-prev, .carousel-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.carousel-prev:hover, .carousel-next:hover { background: var(--accent); color: #fff; }
.carousel-prev { left: -14px; }
.carousel-next { right: -14px; }
@media (max-width: 700px) {
  .carousel-card { flex-basis: 160px; }
  .carousel-card-wide { flex-basis: 260px; }
  .carousel-prev, .carousel-next { width: 30px; height: 30px; }
  .carousel-prev { left: -6px; }
  .carousel-next { right: -6px; }
}

/* Cars get their own dark "showroom" theme so the site visibly separates
   cars-for-sale from the tuning-parts catalog instead of the two blending
   into one identical grid. Neutral black/gray only - matching the rest of
   the site's black/gray/white palette, not the brownish --ink brand color
   (which reads fine on small buttons but looked muddy as a large flat
   block). */
.cars-section { padding: 52px 0 60px; }
.cars-section .container-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.cars-hero { padding: 30px 0 8px; text-align: center; }
.cars-hero h1 { font-size: 34px; margin: 0 0 6px; }
.cars-hero p { color: var(--muted); font-size: 14px; margin: 0; }

/* Car detail page: a richer two-column layout (bigger gallery + a proper
   info card instead of a few sparse lines) so the page doesn't read as
   mostly empty space next to the photos. Plain white/light - the same
   palette as every other page, not a separate dark theme. */
.cars-section .product-detail { align-items: flex-start; gap: 40px; }
/* The car itself is the thing being sold here, so the photo stage gets the
   lion's share of the row - grows to fill whatever the (deliberately
   capped-width) info column doesn't need, up to a generous max. */
.cars-section .product-detail .gallery { flex: 1 1 0; min-width: 0; max-width: none; }
.cars-section .product-detail .info { flex: 0 0 420px; max-width: 420px; padding-top: 0; }

/* The inventory is studio photography on white, and it arrives in mixed
   orientations - wide three-quarter body shots next to tall interior and
   detail frames. The frame below therefore never crops (object-fit stays
   contain, see .gallery-slide img): it gives the photo a clean white stage
   with real margin around it, so a portrait frame reads as deliberate
   negative space rather than a landscape crop that failed. */
.car-gallery .gallery-main {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.10);
  /* No inner padding and a wide-ish frame on purpose: these studio renders
     already carry generous white margin of their own, so padding plus a
     tall frame left the car floating as a small island in the middle. */
  aspect-ratio: 3 / 2;
}
.car-gallery .gallery-thumbs { gap: 10px; margin-top: 14px; }
.car-gallery .gallery-thumb {
  width: 74px;
  height: 74px;
  background: #fff;
  border: 1px solid var(--border);
  opacity: 1;
  padding: 4px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.car-gallery .gallery-thumb img { object-fit: contain; }
.car-gallery .gallery-thumb:hover { border-color: #b9b2ab; transform: translateY(-1px); }
.car-gallery .gallery-thumb.active {
  border-color: var(--ink);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.car-info-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.08);
  padding: 30px 26px 28px;
  /* Long galleries scroll past the card otherwise, taking the only buy
     button on the page with them. */
  position: sticky;
  top: 24px;
}
.car-info-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
}
.car-info-card .product-title { font-size: 28px; line-height: 1.16; margin-bottom: 0; letter-spacing: -0.2px; }
.car-info-card .price-big {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.car-info-card .price-big.is-request {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--panel);
  padding: 7px 12px;
  border: 1px solid var(--border);
}
.car-info-card .price-big.is-request::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.car-info-desc { margin: 18px 0 0; color: #4a4a4a; font-size: 15px; line-height: 1.6; }
/* Spec sheet: label over value, two columns, hairline rules between rows. */
.car-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 22px 0 0;
  border-top: 1px solid var(--border);
}
.car-spec { padding: 12px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.car-spec:nth-child(odd) { padding-right: 14px; }
.car-spec:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--border); }
.car-spec:last-child:nth-child(odd) { grid-column: 1 / -1; padding-right: 0; }
.car-spec dt { margin: 0 0 3px; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); }
.car-spec dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.car-info-parts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink);
  transition: border-color 0.15s ease;
}
.car-info-parts em { font-style: normal; color: var(--muted); margin-left: 6px; }
.car-info-parts:hover { border-color: var(--ink); }
.car-info-parts:hover svg { color: var(--accent); }
.car-info-card .buy-menu { margin-top: 24px; }
.car-info-card .buy-btn { padding: 16px 20px; font-size: 13px; letter-spacing: 1px; }
@media (max-width: 900px) {
  /* Sticky needs a scrollable column beside it; stacked, it just pins the
     card over the carousels further down the page. */
  .car-info-card { position: static; }
  /* Stacked on narrow screens: both columns take the full row width. */
  .cars-section .product-detail .gallery,
  .cars-section .product-detail .info { flex-basis: 100%; max-width: 100%; }
}
.car-related { margin-top: 64px; }

/* "Buy this car" opens a small list of messengers instead of jumping
   straight to one. */
.buy-menu { position: relative; display: inline-block; margin-top: 18px; }
.car-info-card .buy-menu { display: block; width: 100%; }
.car-info-card .buy-btn { width: 100%; text-align: center; }
.car-info-card .buy-menu-list { width: 100%; }
.buy-menu-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
  overflow: hidden;
  z-index: 20;
}
.buy-menu-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.buy-menu-list a:hover { background: var(--panel); color: var(--accent); }
.buy-menu-list a + a { border-top: 1px solid var(--border); }
.section-title:first-child { margin-top: 0; }

.product-detail { display: flex; gap: 56px; flex-wrap: wrap; padding-top: 10px; }
.product-detail .gallery { flex: 1 1 480px; max-width: 560px; }
.gallery-main {
  position: relative;
  background: var(--panel);
  /* Scraped photos are lifestyle/install shots, not square studio product
     shots - almost all come in around 1.4-1.8:1 (checked a sample across the
     catalog). A forced 1:1 frame left every one of them letterboxed with
     large gray bands top and bottom; 3:2 fits the common case closely while
     still framing the handful of square and very wide outliers reasonably. */
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
/* A real photo earns the full square frame; a "no photos" product doesn't -
   forcing the same 1:1 aspect-ratio on empty text left a wall of blank
   grey before you reached the title, worst on short mobile viewports. */
.gallery-main-empty { aspect-ratio: auto; height: 160px; display: flex; }
.gallery-main-empty p { margin: auto; color: var(--muted); font-size: 13px; }
.gallery-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Native horizontal swiping on touch screens (momentum + snap); JS only
     drags with a mouse. pan-y alone switched native sideways panning off. */
  touch-action: pan-x pan-y;
  cursor: grab;
  user-select: none;
}
.gallery-track.dragging { scroll-snap-type: none; cursor: grabbing; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
}
.gallery-slide img { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; pointer-events: none; }

.gallery-prev, .gallery-next {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(0,0,0,.35);
  background: linear-gradient(to right, rgba(255,255,255,.55), rgba(255,255,255,0));
  opacity: 0.7;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
  z-index: 2;
}
.gallery-prev { left: 0; }
.gallery-next { right: 0; background: linear-gradient(to left, rgba(255,255,255,.55), rgba(255,255,255,0)); }
.gallery-prev:hover, .gallery-next:hover,
.gallery-prev:focus-visible, .gallery-next:focus-visible { opacity: 1; color: var(--ink); }
@media (hover: hover) {
  .gallery-prev, .gallery-next { opacity: 0; }
  .gallery-main:hover .gallery-prev, .gallery-main:hover .gallery-next { opacity: 0.85; }
}

.gallery-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  z-index: 2;
}
.gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.gallery-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  opacity: 0.6;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb.active { border-color: var(--ink); opacity: 1; }
.gallery-thumb:hover { opacity: 1; }

/* Fullscreen photo preview - opened by tapping/clicking the main gallery
   image (a drag/swipe pages through instead of opening it). Built once by
   gallery.js and reused for every gallery on the page. */
body.lightbox-open { overflow: hidden; }
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10,10,11,0.96);
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-track {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Native horizontal swiping on touch screens (momentum + snap); JS only
     drags with a mouse. pan-y alone switched native sideways panning off. */
  touch-action: pan-x pan-y;
  cursor: grab;
  user-select: none;
}
.lightbox-track.dragging { scroll-snap-type: none; cursor: grabbing; }
.lightbox-track::-webkit-scrollbar { display: none; }
.lightbox-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-slide img {
  max-width: 90%;
  max-height: 86vh;
  object-fit: contain;
  -webkit-user-drag: none;
  pointer-events: none;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.2); }
.lightbox-close {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  font-size: 24px;
  line-height: 1;
}
.lightbox-prev, .lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 68px;
  border-radius: 8px;
  font-size: 30px;
}
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }
.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 12px;
  padding: 4px 14px;
  border-radius: 999px;
  z-index: 2;
}
@media (max-width: 700px) {
  .lightbox-prev, .lightbox-next { width: 38px; height: 56px; font-size: 24px; }
  .lightbox-close { width: 36px; height: 36px; font-size: 20px; }
}

.add-to-cart-form { display: flex; gap: 12px; align-items: center; margin-top: 18px; }
.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  flex-shrink: 0;
}
.qty-stepper input[type="number"] {
  width: 30px;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  background: none;
  -moz-appearance: textfield;
}
.qty-stepper input[type="number"]::-webkit-outer-spin-button,
.qty-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.add-to-cart-form .btn { flex: 1; }

/* Product configurator: carbon weave / lacquer finish / install add-on -
   pulled from the original site's own variant data, which the first
   scraper never parsed even though every product page carries it. */
.config-lead-time { font-size: 12px; color: var(--muted); margin: -8px 0 14px; }
.configurator { margin: 18px 0; padding-top: 4px; border-top: 1px solid var(--border); }
.config-group { margin-top: 18px; }
.config-group-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 10px; }
.config-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.config-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
  cursor: pointer;
}
.config-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.config-swatch-img {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--panel);
}
.config-swatch-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.config-swatch-label { font-size: 11px; text-align: center; color: var(--muted); line-height: 1.3; }
.config-swatch:has(input:checked) .config-swatch-img { border-color: var(--ink); }
.config-swatch:has(input:checked) .config-swatch-label { color: var(--ink); font-weight: 600; }
.config-install {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  cursor: pointer;
}
.config-install input { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.config-install b { margin-left: auto; font-weight: 600; color: var(--muted); }
.config-sku { font-size: 11px; color: var(--muted); margin-top: 12px; min-height: 14px; }

.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--border); }
.cart-table td { padding: 12px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cart-thumb { width: 56px; height: 44px; object-fit: cover; background: var(--panel); }
.cart-table input[type="number"] { width: 56px; padding: 6px; border: 1px solid var(--border); text-align: center; font-family: inherit; }
.link-action-light { background: none; border: none; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: 12px; }
.link-action-light:hover { color: #c0392b; }
.cart-summary { margin-top: 24px; text-align: right; }
.cart-subtotal { font-size: 18px; margin-bottom: 8px; }
.cart-checkout-note { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.cart-summary .contact-cta-links { justify-content: flex-end; max-width: 320px; margin-left: auto; }
.product-detail .info { flex: 1 1 340px; padding-top: 6px; }
.product-title { text-align: left; font-size: 30px; margin: 0 0 6px; }
.sku-line { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.price-big { font-size: 24px; font-weight: 600; margin: 18px 0; }
/* An unpriced car: kept in the price slot so the layout doesn't shift,
   but set as a quiet label rather than at display-price weight. */
.price-big.is-request {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
}

.price-on-request-cta { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--border); }
.price-on-request-cta p { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.contact-cta-links { display: flex; gap: 12px; flex-wrap: wrap; }
.contact-cta-links .btn { flex: 1 1 140px; text-align: center; }

table { width: 100%; border-collapse: collapse; }
table th, table td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: 13px; }
table th { text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; color: var(--muted); }

.btn {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  padding: 14px 28px;
  border-radius: 0;
  border: none;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 13px;
}
.btn:hover { background: var(--accent); }
.btn.secondary { background: transparent; border: 1px solid var(--border); color: var(--text); }
.buy-btn { display: inline-block; margin-top: 18px; }

/* Class selector, not "form.admin-form" - the car editor applies this to a
   plain sidebar <div> too (its actual inputs are outside the <form> tag,
   linked back to it via the HTML5 form="" attribute so they still submit
   together), and a class-only selector matches both without changing
   anything for the existing plain <form class="admin-form"> usages. */
.admin-form label { display: block; margin: 12px 0 4px; color: var(--muted); font-size: 13px; }
.admin-form input, .admin-form textarea, .admin-form select {
  width: 100%;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  font-family: inherit;
}

/* ---------- Custom scrollbars (site-wide) ----------
   Nearly invisible: no track, a thin smoky thumb that floats over the page
   (the transparent border insets it) and firms up only on hover. Works over
   the dark hero and the white pages alike. */
html { scrollbar-color: rgba(20, 20, 22, .22) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(20, 20, 22, .2);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: padding-box;
  min-height: 40px;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(20, 20, 22, .42); border-width: 2px; }
::-webkit-scrollbar-thumb:active { background-color: rgba(237, 28, 36, .7); }

/* ---------- Admin: dark console shell — internal tool, not customer-facing ---------- */
.admin-shell {
  display: flex;
  min-height: 100vh;
  background: #0a0a0b;
  color: #f2f2f2;
  scrollbar-color: #3a3b40 #0a0a0b;
}
.admin-shell ::-webkit-scrollbar-track { background: #0a0a0b; }
.admin-shell ::-webkit-scrollbar-thumb { background: #3a3b40; border-color: #0a0a0b; }

.admin-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 50;
  width: 38px;
  height: 38px;
  background: #17181a;
  border: 1px solid #2a2b2e;
  border-radius: 6px;
  color: #f2f2f2;
  align-items: center;
  justify-content: center;
}
#admin-nav-check { display: none; }

.admin-shell aside {
  /* Proportional to the viewport (not a flat pixel number), but clamped:
     a literal percentage here (e.g. 18%) would shrink back below the
     logo's own minimum width on anything narrower than ~1450px - the
     exact overflow this sidebar was just fixed for - and grow pointlessly
     wide on an ultrawide monitor. clamp() scales with vw between those two
     safe bounds instead of doing either. */
  width: clamp(260px, 16vw, 320px);
  flex-shrink: 0;
  background: #14151a;
  border-right: 1px solid #24252b;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
}
.admin-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #24252b;
  /* Belt and suspenders on top of the size fix below: if a future
     wordmark asset is ever wider than expected, it clips at the sidebar's
     edge instead of spilling into the main content column, which reads as
     "crooked" (letters trailing off past the divider) rather than as a
     simple truncation. */
  overflow: hidden;
}
/* The lockup (mark + gap + word, at the sizes below) needs ~194px; the old
   230px sidebar only had ~194px of padded width to give it - zero margin,
   and any font-metrics rounding pushed the wordmark past the sidebar's own
   right edge into the content column. Widening the sidebar to 254px and
   trimming both images down a notch leaves real breathing room instead of
   an exact hairline fit. */
.admin-logo img.mark { height: 22px; filter: brightness(0) invert(1); display: block; flex-shrink: 0; }
/* The mountain mark's own artwork doesn't fill its viewBox symmetrically
   (see favicon.svg), so centering the two images by their bounding boxes -
   what align-items:center alone gives you - still reads as the wordmark
   sitting too high. The storefront header hit the same thing and already
   carries this exact nudge on .logo-word; the admin sidebar just never got
   it when the logo was added here. */
.admin-logo img.word { height: 9px; margin-top: 0; filter: brightness(0) invert(1); display: block; flex-shrink: 0; }
.admin-shell nav.admin-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-shell nav.admin-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  color: #9a9ea3;
  text-transform: uppercase;
  font-size: 12.5px;
  letter-spacing: 0.6px;
  font-weight: 600;
}
.admin-shell nav.admin-nav a:hover { color: #fff; background: #1c1d22; }
.admin-shell nav.admin-nav a.active { color: #fff; background: #1c1d22; border-left: 2px solid var(--accent); padding-left: 8px; }
.admin-shell nav.admin-nav svg { flex-shrink: 0; opacity: 0.85; }
.admin-shell aside .spacer { flex: 1; }
.admin-nav-account {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #24252b;
}
.admin-nav-account a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  color: #9a9ea3;
  text-transform: uppercase;
  font-size: 12.5px;
  letter-spacing: 0.6px;
  font-weight: 600;
}
.admin-nav-account a:hover { color: #fff; background: #1c1d22; }
.admin-nav-account a.active { color: #fff; background: #1c1d22; border-left: 2px solid var(--accent); padding-left: 8px; }
.admin-shell aside .storefront-link {
  display: block; margin-top: 10px; padding: 9px 10px; color: #9a9ea3; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid #24252b; border-radius: 6px; text-align: center;
}
.admin-shell aside .storefront-link:hover { color: #fff; border-color: #3a3b40; }

/* Mobile bottom tab bar for the admin panel - same pattern as the
   storefront's .mobile-tabbar, hidden on desktop where the sidebar covers
   navigation instead. */
.admin-tabbar { display: none; }
.admin-more-backdrop, .admin-more-sheet { display: none; }
html.admin-more-active { overflow: hidden; }

.admin-shell main { flex: 1; padding: 32px 36px; min-width: 0; }
.admin-shell h1 { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; font-size: 24px; letter-spacing: 0.5px; margin: 0 0 22px; color: #fff; }
.admin-page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-page-head h1 { margin-bottom: 18px; }

.admin-panel {
  background: #14151a;
  border: 1px solid #24252b;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
  /* A wide data table (Analytics/Visitors have ~10 columns) can still be
     wider than the content column even above the 860px breakpoint where
     the sidebar switches back on - contain that overflow inside the panel
     with its own scrollbar instead of letting it blow out the whole page,
     at every width, not just the narrower ones below. */
  overflow-x: auto;
}
.admin-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.admin-panel-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #fff; margin-bottom: 12px; }
.admin-panel-hint { color: #9a9ea3; font-size: 13px; margin: -4px 0 16px; }
.admin-panel-divider { height: 1px; background: #24252b; margin: 22px 0; }
.success-msg { color: #4caf50; margin: 8px 0; }
.admin-team-list { display: flex; flex-direction: column; gap: 2px; }
.admin-team-entry { border-bottom: 1px solid #1c1d22; padding: 2px 0; }
.admin-team-entry:last-child { border-bottom: none; }
.admin-team-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
}
.admin-team-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.admin-team-name { font-size: 13px; font-weight: 600; color: #f2f2f2; }
.admin-team-date { font-size: 11px; color: #7d8086; margin-top: 1px; }
.admin-team-row form { margin: 0; }
.admin-team-you { font-size: 11px; color: #7d8086; text-transform: uppercase; letter-spacing: 0.4px; }
.admin-team-zones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 2px 4px 10px;
  margin: 0;
}
.admin-zone-checks { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 4px 0 2px; }
.admin-zone-check {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #9a9ea3;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  cursor: pointer;
}
.admin-zone-check input { accent-color: var(--accent); width: 13px; height: 13px; margin: 0; cursor: pointer; }
.admin-team-zones .btn.tiny.outline { margin-left: auto; }

/* A styled stand-in for the raw <input type="file"> button: the native
   input sits invisible on top of a normal .btn label, so it keeps full
   native picker behavior and keyboard/screen-reader semantics while
   looking like the rest of the admin UI instead of the browser default. */
.file-input-btn { position: relative; display: inline-flex; cursor: pointer; }
/* This is a <label> styled to look like a button (see comment above), but
   "form.admin-form label { color: var(--muted) }" - meant for ordinary
   field labels like "Name" or "Price" - is more specific than .btn's own
   color and was winning, leaving "Choose files" looking like dim disabled
   text instead of the same clickable white-on-dark button as "Save" next
   to it. */
form.admin-form label.file-input-btn { color: #fff; }
.file-input-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
/* Block, not inline: as an inline sibling it shared a line with the Save
   button that follows it in the form, so the two visually collided. */
.file-input-name { display: block; margin: 8px 0 0; font-size: 12px; color: #7d8086; }

/* Small square thumbnail for the brands list table (matches the Photo
   column pattern on Cars/Products) - .brand-admin-logo below is the
   bigger, padded version used on the brand's own edit page. */
.brand-admin-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid #24252b;
  background: #fff;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-admin-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-admin-thumb .brand-admin-letter { font-size: 16px; }
.brand-admin-logo {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  border: 1px solid #24252b;
  background: #fff;
  padding: 7px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-admin-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-admin-letter { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; color: #1b1512; }
.part-picker-list { display: flex; flex-direction: column; gap: 8px; }
.part-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: #17181d;
  border: 1px solid #24252b;
  border-radius: 6px;
}
.part-picker-row img { width: 44px; height: 34px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.part-picker-name { flex: 1; min-width: 0; font-size: 13px; color: #f2f2f2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-picker-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ---------- Product add/edit form ---------- */
.pe-head-links { display: flex; gap: 18px; align-items: baseline; }
.pe-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.pe-main .admin-panel { margin-bottom: 20px; }
.pe-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
.pe-side .admin-panel { margin-bottom: 0; }
.pe-step { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #24252b; color: #fff; font-size: 11px; margin-right: 6px; }
.pe-req { color: var(--accent); font-weight: 700; }
.pe-count { color: #7d8086; font-weight: 400; }
.pe-hint { color: #7d8086; font-size: 12px; margin: 6px 0 0; line-height: 1.5; }
.pe-hint a, .admin-form .field-hint a { color: #d7d8da; text-decoration: underline; }
.pe-counter { font-size: 11.5px; color: #7d8086; margin-top: 4px; text-align: right; }
.pe-counter.is-short { color: #e0a44a; }
.admin-form label.pe-check { display: flex; align-items: flex-start; gap: 8px; color: #e6e6e6; font-size: 13.5px; cursor: pointer; margin: 6px 0; }
.admin-form label.pe-check input { width: auto; margin: 2px 0 0; accent-color: var(--accent); }
.pe-price-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.admin-form .pe-price-row input { max-width: 200px; }
.pe-eur { color: #7d8086; font-size: 12.5px; }
[data-price-fields].is-disabled { opacity: 0.4; pointer-events: none; }
.pe-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 6px; }
.admin-form label.pe-type {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  margin: 0; padding: 9px 12px; background: #17181d; border: 1px solid #24252b; border-radius: 8px; cursor: pointer; color: #d7d8da;
}
.admin-form label.pe-type:has(input:checked) { border-color: var(--accent); background: rgba(237, 28, 36, 0.1); color: #fff; }
.admin-form label.pe-type input { width: auto; margin: 0; grid-row: 1 / span 2; accent-color: var(--accent); }
.pe-type-name { font-size: 13px; font-weight: 600; }
.pe-type-mult { font-size: 11px; color: #7d8086; }
.pe-type-price { grid-column: 2 / span 2; font-size: 12px; color: #9a9ea3; min-height: 1em; }
.pe-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: end; }
.pe-save { width: 100%; margin-top: 14px; }
.pe-errors { background: rgba(255, 107, 107, 0.08); border: 1px solid rgba(255, 107, 107, 0.4); border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; color: #ffb3b3; font-size: 13.5px; }
/* car editor: page link with the domain shown as a fixed prefix */
.admin-shell .slug-field { display: flex; align-items: stretch; border: 1px solid #2a2b30; border-radius: 8px; overflow: hidden; background: #111214; }
.admin-shell .slug-field-prefix { display: flex; align-items: center; padding: 0 4px 0 12px; color: #7d8086; font-size: 13.5px; white-space: nowrap; }
.admin-shell .slug-field input { border: 0 !important; background: transparent !important; padding-left: 0 !important; min-width: 0; flex: 1; box-shadow: none !important; }
.admin-shell .slug-field:focus-within { border-color: var(--accent); }
.admin-shell .slug-field-open { margin: 6px 0 0; }
.admin-shell .slug-field-open a { color: var(--accent); }
.pe-errors-title { font-weight: 700; color: #ff8a8a; margin-bottom: 6px; }
.pe-errors ul { margin: 0; padding-left: 18px; line-height: 1.6; }
.pe-saved { background: rgba(76, 175, 80, 0.1); border: 1px solid rgba(76, 175, 80, 0.4); color: #8fd694; border-radius: 10px; padding: 10px 16px; margin-bottom: 20px; font-size: 13.5px; }
.pe-meta > div:not(.admin-panel-title) { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid #1c1d22; color: #d7d8da; }
.pe-meta > div:last-child { border-bottom: none; }
.pe-meta > div > span:first-child { color: #7d8086; }
.pe-meta a { color: #d7d8da; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.pe-combo-title { flex: 1 1 200px; font-size: 13px; color: #e6e6e6; }
.admin-form input.pe-combo-sku { width: 150px; font-size: 12.5px; }
.pe-attention { background: rgba(224, 164, 74, 0.08); border: 1px solid rgba(224, 164, 74, 0.35); color: #e8c48a; border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: 13.5px; }
.pe-attention a { color: #fff; margin-left: 6px; }
.ct-move { display: flex; gap: 4px; }
.ct-move form { margin: 0; }
.ct-move button[disabled] { opacity: 0.3; cursor: default; }
input.ct-add-name { max-width: 260px; }
input.ct-add-mult { max-width: 180px; }
.sec-add { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0 14px; align-items: end; }
.sec-add label { margin-top: 0; }
.sec-list { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.sec-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; background: #17181d; border: 1px solid #24252b; border-radius: 6px; }
.sec-row form { margin: 0; }
.sec-rename { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; }
.admin-form .sec-rename input { flex: 1; min-width: 0; padding: 6px 10px; font-size: 13px; }
.sec-branch { color: #5d6066; }
.sec-meta { color: #7d8086; font-size: 12px; white-space: nowrap; }
@media (max-width: 700px) {
  .sec-add { grid-template-columns: 1fr; gap: 0; }
  .sec-add .btn { margin-top: 12px; }
}
.price-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 8px 12px; align-items: center; }
.price-pair-field { position: relative; display: flex; align-items: center; }
.price-pair-cur { position: absolute; left: 11px; color: #7d8086; font-size: 13px; pointer-events: none; }
.admin-form .price-pair-field input { padding-left: 26px; padding-right: 34px; }
.price-pair-recalc { position: absolute; right: 4px; width: 26px; height: 26px; border: none; background: none; color: #7d8086; font-size: 15px; cursor: pointer; border-radius: 4px; }
.price-pair-recalc:hover { color: #fff; background: #24252b; }
.price-pair-hint { grid-column: 1 / -1; font-size: 11.5px; color: #7d8086; line-height: 1.45; }
.price-pair-hint.is-stale { color: #e0a44a; }
.admin-form input.is-suggested, input.is-suggested { border-color: rgba(78, 161, 255, 0.6); background-color: rgba(78, 161, 255, 0.06); }
@media (max-width: 700px) {
  .price-pair { grid-template-columns: 1fr 1fr; }
}
.car-price-mode { display: flex; flex-direction: column; gap: 2px; }
.car-price-fields { margin: 6px 0 0 24px; display: flex; flex-direction: column; gap: 6px; }
.car-price-fields.is-disabled { opacity: 0.4; pointer-events: none; }
.car-price-fields .price-pair { grid-template-columns: 1fr 1fr; }
/* ---------- Admin design pass ---------- */
/* The storefront's .btn is near-black ink made for a light page - on the
   admin's dark panels it all but disappeared, so the main action of every
   screen (Save, Add, Search, Log in) read as the least important thing on
   it. Primary buttons get the brand red; outline/secondary ones stay quiet. */
.admin-shell .btn:not(.secondary):not(.outline):not(.file-input-btn),
.login-box .btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}
.admin-shell .btn:not(.secondary):not(.outline):not(.file-input-btn):hover,
.login-box .btn:hover { background: #c8141b; border-color: #c8141b; }
.admin-shell .btn.file-input-btn { background: none; border: 1px solid #2a2b2e; color: #d7d8da; }
.admin-shell .btn.file-input-btn:hover { background: #1c1d22; color: #fff; }

/* Login: same dark fields as the rest of the admin instead of bright white. */
.login-box h1 { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: #9a9ea3; margin: 0 0 22px; }
.login-box .admin-form input { background: #14151a; border: 1px solid #2a2b31; color: #f2f2f2; border-radius: 8px; padding: 11px 12px; }
.login-box .admin-form input:focus { border-color: var(--accent); outline: none; }
.login-box .admin-form label { text-align: left; }
.login-box .btn { padding: 13px; border-radius: 8px; }

/* Carbon types "add" row: the multiplier field had no styling at all. */
.ct-add input[type="number"] {
  padding: 10px 12px; background: #0e0e0f; border: 1px solid #2a2b2e; border-radius: 8px; color: #f2f2f2; font-size: 13px;
}
@media (max-width: 700px) {
  .ct-add { flex-direction: column; align-items: stretch; }
  input.ct-add-name, input.ct-add-mult { max-width: none; width: 100%; }
}

/* A missing photo in the Products / Cars lists: a visible placeholder
   instead of an empty cell that looks like a rendering glitch. */
.admin-thumb-empty {
  display: inline-flex; align-items: center; justify-content: center; border: 1px dashed #3a3b40; border-radius: 4px;
  color: #6b6e74; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.4px; text-align: center; line-height: 1.2;
}

/* Dashboard */
.dash-section-title { margin: 30px 0 12px; }
.dash-alert { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.dash-alert .btn { white-space: nowrap; }
.dash-chart-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 8px; font-size: 11px; color: #7d8086; }
.dash-chart-sum { text-align: center; }
.dash-chart-sum b { color: #f2f2f2; font-weight: 600; }
.trend-chart-hit:hover { fill: rgba(255, 255, 255, 0.05); }
.dash-quick-link.primary { border-color: var(--accent); color: #fff; }
@media (min-width: 1200px) {
  .admin-shell .dash-stat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.pe-missing { display: inline-block; font-size: 11px; color: #e0a44a; line-height: 1.4; }
.pe-complete { color: #4caf50; font-size: 12px; }
.pe-path { display: block; font-size: 11.5px; color: #7d8086; margin-top: 2px; }
@media (max-width: 960px) {
  .pe-grid { grid-template-columns: 1fr; }
  .pe-side { position: static; }
}
@media (max-width: 700px) {
  .pe-two { grid-template-columns: 1fr; }
  .pe-head-links { flex-direction: column; gap: 4px; align-items: flex-end; }
}

/* ---------- Per-product carbon-weave/finish variant pricing ---------- */
.variant-list { display: flex; flex-direction: column; gap: 8px; }
.variant-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #17181d;
  border: 1px solid #24252b;
  border-radius: 6px;
  flex-wrap: wrap;
}
.variant-row-form { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; margin: 0; }
/* input.foo (not just .foo) to match ".admin-form input"'s own specificity
   (element + class) - a bare class selector loses that fight regardless of
   source order, leaving every field here stuck at .admin-form's width:100%. */
input.variant-title-input { flex: 1 1 200px; min-width: 140px; width: auto; font-size: 13px; }
.variant-sku { font-size: 11px; color: #7d8086; white-space: nowrap; }
.variant-price-wrap { display: flex; align-items: center; gap: 4px; color: #9a9ea3; font-size: 12px; white-space: nowrap; }
input.variant-price-input { width: 110px; }
.variant-type-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.variant-type-check {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: #17181d;
  border: 1px solid #24252b;
  border-radius: 999px;
  font-size: 12.5px;
  color: #d7d8da;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.variant-type-check:has(input:checked) { border-color: var(--accent); background: rgba(237, 28, 36, 0.1); color: #fff; }
.variant-type-check input { margin: 0; accent-color: var(--accent); }
.variant-type-mult { color: #7d8086; font-size: 11px; }
.variant-type-check:has(input:checked) .variant-type-mult { color: #d7d8da; }
.brand-admin-form { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 14px; }
.brand-admin-form input[type="text"] { width: 100%; margin-top: 4px; }
.brand-admin-or { font-size: 11px; color: #7d8086; text-transform: uppercase; letter-spacing: 0.4px; margin: 10px 0 2px; }
.admin-shell table { width: 100%; border-collapse: collapse; }
.admin-shell table th, .admin-shell table td { border-color: #24252b; padding: 11px 10px; }
.admin-shell table th { color: #7d8086; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; text-align: left; }
.admin-shell table tbody tr:hover { background: #191a1f; }
.admin-shell table tbody tr.is-hidden { opacity: 0.45; }
.admin-shell .admin-form input, .admin-shell .admin-form textarea, .admin-shell .admin-form select {
  background: #0e0e0f; border-color: #2a2b2e; color: #f2f2f2;
}

/* One consistent search field for every admin tab (Products, Cars, Brands,
   Visitors) - a magnifying-glass icon inlined as a background image rather
   than a separate element, so the same class works whether the field is
   wired for the instant client-side filter or the live AJAX search. */
.admin-search {
  width: 100%;
  padding: 10px 14px 10px 36px;
  background-color: #0e0e0f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='5.3' stroke='%237d8086' stroke-width='1.4'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%237d8086' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  border: 1px solid #2a2b2e;
  border-radius: 8px;
  color: #f2f2f2;
  font-size: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-search::placeholder { color: #7d8086; }
.admin-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.15);
}
/* A live AJAX search's own spinner - shown only while a request for the
   current keystroke is in flight, see admin-search.js. */
.admin-search-wrap { position: relative; flex: 1 1 280px; max-width: 360px; }
.admin-search-wrap .admin-search { max-width: none; }
.admin-search-spinner {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid #2a2b2e;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: admin-search-spin 0.6s linear infinite;
}
@keyframes admin-search-spin { to { transform: rotate(360deg); } }

.admin-shell .btn.tiny { padding: 6px 12px; font-size: 11px; }
.admin-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-row-actions form { margin: 0; }
.admin-shell .btn.tiny.outline { background: none; border: 1px solid #2a2b2e; color: #d7d8da; }
.admin-shell .btn.tiny.outline:hover { background: #1c1d22; border-color: #3a3b40; color: #fff; }
.admin-shell .btn.tiny.outline.danger { color: #ff6b6b; border-color: rgba(255,107,107,.35); }
.admin-shell .btn.tiny.outline.danger:hover { background: #ff6b6b; border-color: #ff6b6b; color: #14151a; }
/* .btn.secondary is the storefront's light-theme outline button (dark text
   for a white background) - reused as-is in the admin sidebar's "Log out"
   and the product editor's "Hide product", both went effectively invisible
   (near-black text on the admin's near-black background). */
.admin-shell .btn.secondary { background: none; border: 1px solid #2a2b2e; color: #d7d8da; }
.admin-shell .btn.secondary:hover { background: #1c1d22; border-color: #3a3b40; color: #fff; }
.admin-shell .link-action { background: none; border: none; color: #9a9ea3; cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.admin-shell .link-action:hover { color: var(--accent); }
.admin-shell .link-action.danger:hover { color: #ff6b6b; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.badge.on { background: rgba(46,160,67,.15); color: #4caf50; }
.badge.off { background: rgba(255,107,107,.15); color: #ff6b6b; }

.stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.stat { background: #14151a; border: 1px solid #24252b; border-radius: 10px; padding: 18px 26px; min-width: 140px; }
.stat .n { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 600; color: var(--accent); line-height: 1; }
.stat .l { color: #9a9ea3; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 6px; }

.dash-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.dash-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #14151a;
  border: 1px solid #24252b;
  border-radius: 10px;
  padding: 18px 20px;
}
.dash-stat svg { flex-shrink: 0; color: var(--accent); opacity: 0.9; }
.dash-stat .n { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 600; color: #fff; line-height: 1; }
.dash-stat .l { color: #7d8086; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

.dash-quick-links { display: flex; flex-wrap: wrap; gap: 10px; }
.dash-quick-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  background: #14151a;
  border: 1px solid #24252b;
  border-radius: 8px;
  color: #f2f2f2;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.dash-quick-link svg { color: #9a9ea3; flex-shrink: 0; }
.dash-quick-link:hover { border-color: var(--accent); color: #fff; }
.dash-quick-link:hover svg { color: var(--accent); }

.login-box { max-width: 340px; margin: 80px auto; color: #f2f2f2; text-align: center; }
.login-box .admin-logo { justify-content: center; border: none; margin-bottom: 26px; padding: 0; }
.login-box form { text-align: left; }
.error { color: #ff6b6b; margin: 8px 0; }
.thumb-list { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.thumb-list img { width: 80px; height: 60px; object-fit: cover; border-radius: 4px; }

.photo-reorder { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 8px 0 18px; }
.photo-reorder-item {
  position: relative;
  border: 1px solid #24252b;
  border-radius: 8px;
  overflow: hidden;
  background: #0e0e0f;
  transition: border-color 0.15s ease;
}
.photo-reorder-item:hover { border-color: #3a3b40; }
.photo-reorder-item img { width: 100%; height: 130px; object-fit: cover; display: block; }
.photo-reorder-cover {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
}
.photo-reorder-controls { display: flex; }
.photo-reorder-controls button {
  flex: 1;
  background: #17181a;
  border: none;
  border-top: 1px solid #24252b;
  color: #9a9ea3;
  cursor: pointer;
  padding: 8px 0;
  font-size: 14px;
}
.photo-reorder-controls button:hover { color: #fff; background: #1c1d22; }
.photo-reorder-controls .pr-remove:hover { color: #ff6b6b; }

/* ---------- Car editor: full-width two-column layout ---------- */
.car-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.car-edit-media { margin-bottom: 0; }
/* Optional spec sheet on the car form (see car-specs.js). */
.car-spec-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 16px; }
.car-edit-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px; }
.car-edit-sidebar .admin-panel { margin-bottom: 0; }
.field-hint { font-weight: 400; color: #7d8086; font-size: 12px; }
.car-edit-save { width: 100%; margin-top: 20px; }
.car-edit-visibility { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.car-edit-visibility .badge { font-size: 11px; padding: 4px 10px; }
.car-edit-danger form { margin: 0; }

.photo-dropzone { display: flex; align-items: center; gap: 12px; }
.photo-dropzone-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  padding: 16px 18px;
  border: 1.5px dashed #2a2b2e;
  border-radius: 8px;
  color: #9a9ea3;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.photo-dropzone-btn:hover { border-color: var(--accent); color: #fff; background: rgba(237, 28, 36, 0.05); }
.photo-dropzone-btn svg { flex-shrink: 0; }
.photo-dropzone-hint { font-size: 12px; color: #7d8086; }

@media (max-width: 860px) {
  .car-edit-grid { grid-template-columns: 1fr; }
  .car-edit-sidebar { position: static; }
}

/* ---------- Brand editor: same "use the full row" idea as the car editor -
   two proportional (fr, not px) columns instead of a fixed max-width that
   left the whole right side of a wide screen empty. ---------- */
.brand-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.brand-edit-grid .admin-panel { margin-bottom: 0; }
@media (max-width: 860px) {
  .brand-edit-grid { grid-template-columns: 1fr; }
}

/* Same fixed-vs-proportional-width fix as the car editor above, and reuses
   its .car-edit-sidebar/-save/-visibility/-danger pieces as-is - a product
   edit page's sidebar (photos, visibility, delete) is the same shape. */
.product-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.product-edit-grid .admin-panel { margin-bottom: 0; }
@media (max-width: 860px) {
  .product-edit-grid { grid-template-columns: 1fr; }
}
.project-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.project-edit-grid .admin-panel { margin-bottom: 0; }
@media (max-width: 860px) {
  .project-edit-grid { grid-template-columns: 1fr; }
}

/* A continuous time series reads as a trend line, not disconnected bars -
   see .bar-chart below for the categorical (non-time) case, still used by
   the Analytics tab's per-bucket breakdowns. Coordinates are computed
   server-side into a fixed virtual viewBox (see the dashboard route); the
   element itself just scales to whatever width its panel gives it. */
.trend-chart { width: 100%; height: 180px; overflow: visible; }
.trend-chart-baseline { stroke: #24252b; stroke-width: 1; }
.trend-chart-area { }
.trend-chart-line {
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.trend-chart-dot { fill: var(--accent); stroke: #14151a; stroke-width: 2; vector-effect: non-scaling-stroke; }
.trend-chart-hit { fill: transparent; cursor: default; }
.trend-chart-point:hover .trend-chart-dot { fill: #fff; }
.trend-chart-value {
  fill: #f2f2f2;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.trend-chart-date {
  fill: #7d8086;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  letter-spacing: 0.3px;
}

.bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 10px 0; }
.bar-chart .bar {
  flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; position: relative;
  height: 2px; transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.bar-chart .bar span {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: #9a9ea3; white-space: nowrap; margin-bottom: 3px;
}
.range-toggle { display: flex; gap: 6px; }
.range-toggle a {
  padding: 5px 12px; border-radius: 6px; font-size: 13px; color: #9a9ea3;
  text-decoration: none; border: 1px solid #2a2b31;
}
.range-toggle a:hover { color: #fff; border-color: #3a3b42; }
.range-toggle a.active { color: #fff; background: var(--accent); border-color: var(--accent); }

/* Per-item page views in the Products / Cars lists */
.views-cell { white-space: nowrap; }
.views-cell b { display: block; color: #fff; font-size: 15px; font-weight: 600; }
.views-cell span { display: block; color: #7d8086; font-size: 11.5px; margin-top: 2px; }
.views-cell em { font-style: normal; color: #4caf50; }
@media (max-width: 700px) {
  .views-val { text-align: right; }
  .admin-panel .toolbar > form { flex: 1 1 100% !important; }
  .views-cell b, .views-cell span { display: inline; }
  .views-cell span { margin: 0 0 0 6px; }
}

/* --- Analytics page --- */
.an-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.an-head h1 { margin-bottom: 0; }
.an-range-note { color: #7d8086; font-size: 12px; margin: 6px 0 18px; }
.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.an-kpi { background: #14151a; border: 1px solid #24252b; border-radius: 10px; padding: 14px 16px; min-width: 0; }
.an-kpi .l { display: flex; align-items: center; gap: 6px; color: #9a9ea3; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.an-kpi .n { font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 600; color: #fff; line-height: 1.1; margin-top: 6px; }
.an-kpi .s { color: #7d8086; font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-kpi.bad .n { color: #ff6b6b; }
.an-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.an-dot.new { background: var(--accent); }
.an-dot.ret { background: #c9ccd1; }
.an-dot.ev { background: #4ea1ff; }

/* SVG elements don't get the UA's [hidden]{display:none}, and a class rule
   on an HTML element would win over it anyway - pin it explicitly. */
.an-chart-panel [hidden] { display: none !important; }
.an-chart-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.an-chart-tabs { display: inline-flex; background: #0e0f12; border: 1px solid #24252b; border-radius: 8px; padding: 3px; }
.an-chart-tabs button {
  border: none; background: none; color: #9a9ea3; font: 600 13px/1 'Barlow Condensed', sans-serif;
  text-transform: uppercase; letter-spacing: 0.4px; padding: 7px 14px; border-radius: 6px; cursor: pointer;
}
.an-chart-tabs button.active { background: #24252b; color: #fff; }
.an-legend { display: flex; gap: 14px; color: #9a9ea3; font-size: 12px; }
.an-legend span { display: inline-flex; align-items: center; gap: 6px; }
.an-readout { margin: 14px 0 10px; min-height: 40px; }
.an-readout-date { color: #7d8086; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.an-readout-vals { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; color: #9a9ea3; font-size: 13px; }
.an-readout-vals span { display: inline-flex; align-items: center; gap: 5px; }
.an-readout-vals b { color: #fff; font-weight: 600; font-size: 15px; }
.an-chart-wrap { position: relative; }
.an-chart-max { position: absolute; top: -2px; right: 0; color: #5d6066; font-size: 10px; pointer-events: none; }
.an-chart { display: block; width: 100%; height: 200px; overflow: visible; }
.an-grid-line { stroke: #1f2026; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.an-base-line { stroke: #2a2b31; stroke-width: 1; vector-effect: non-scaling-stroke; }
.an-bar.new { fill: var(--accent); }
.an-bar.ret { fill: #c9ccd1; }
.an-ev-line { stroke: #4ea1ff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.an-hit { fill: transparent; cursor: pointer; }
.an-hit.active { fill: rgba(255,255,255,.06); }
.an-ticks { position: relative; height: 18px; margin-top: 6px; }
.an-ticks span { position: absolute; transform: translateX(-50%); color: #7d8086; font-size: 11px; white-space: nowrap; }
.an-ticks span:first-child { transform: none; left: 0 !important; }
.an-ticks span:last-child { transform: translateX(-100%); left: 100% !important; }

.an-breakdowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
.an-breakdowns .admin-panel { margin-bottom: 0; }
.an-brow + .an-brow { margin-top: 10px; }
.an-brow-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.an-brow-name { color: #e6e6e6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.an-brow-val { color: #fff; font-weight: 600; white-space: nowrap; }
.an-brow-val em { font-style: normal; color: #7d8086; font-weight: 400; margin-left: 4px; }
.an-brow-bar { height: 4px; background: #1f2026; border-radius: 2px; margin-top: 5px; overflow: hidden; }
.an-brow-bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.an-empty { color: #777; font-size: 13px; margin: 0; }

.an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.an-table td { word-break: break-word; }
.an-details summary { cursor: pointer; margin-bottom: 0; list-style: none; }
.an-details summary::-webkit-details-marker { display: none; }
.an-details summary::before { content: 'в–ё'; display: inline-block; margin-right: 8px; color: #7d8086; transition: transform .15s; }
.an-details[open] summary::before { transform: rotate(90deg); }
.an-details[open] summary { margin-bottom: 12px; }
.an-details summary span { color: #7d8086; font-weight: 400; text-transform: none; letter-spacing: 0; }

@media (min-width: 1200px) {
  .an-breakdowns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .an-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .an-head h1 { font-size: 20px; }
  .an-range-note { margin-bottom: 12px; }
  .an-kpis { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  .an-kpi { padding: 10px 12px; border-radius: 8px; }
  .an-kpi .l { font-size: 10px; }
  .an-kpi .n { font-size: 24px; margin-top: 4px; }
  .an-kpi .s { font-size: 11px; }
  .an-chart { height: 160px; }
  .an-legend { font-size: 11px; gap: 10px; }
  .an-readout-vals { font-size: 12px; gap: 2px 10px; }
  .an-readout-vals b { font-size: 14px; }
  .an-breakdowns { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
  .an-breakdowns .admin-panel { padding: 12px; }
  .an-breakdowns .an-breakdown:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .an-brow-top { font-size: 12px; }
  .an-grid { gap: 0; }
  .admin-panel { margin-bottom: 14px; }

  /* Analytics tables are short label/number lists: keep them as real rows
     on a phone instead of the generic stacked-card treatment below, which
     turned every two-cell row into a tall card with no labels. */
  .admin-shell .admin-panel table.an-table { display: table; width: 100%; font-size: 12.5px; }
  .admin-shell .admin-panel table.an-table thead { display: table-header-group; }
  .admin-shell .admin-panel table.an-table tbody { display: table-row-group; }
  .admin-shell .admin-panel table.an-table tr { display: table-row; border: none; padding: 0; margin: 0; background: none; }
  .admin-shell .admin-panel table.an-table th { font-size: 10px; padding: 6px 6px 6px 0; white-space: nowrap; }
  .admin-shell .admin-panel table.an-table td {
    display: table-cell; padding: 7px 6px 7px 0; text-align: left;
    border-bottom: 1px solid #1c1d22; word-break: break-all;
  }
  .admin-shell .admin-panel table.an-table td::before { content: none; }
  .admin-shell .admin-panel table.an-table td:not(:first-child), .admin-shell .admin-panel table.an-table th:not(:first-child) { text-align: right; word-break: normal; }
  .admin-shell .admin-panel table.an-table td:last-child { border-bottom: 1px solid #1c1d22; }
  .admin-shell .admin-panel table.an-table tr:last-child td { border-bottom: none; }
  /* Element/session don't fit next to time/type/path on a phone */
  .admin-shell .admin-panel table.an-table-events th:nth-child(n+4),
  .admin-shell .admin-panel table.an-table-events td:nth-child(n+4) { display: none; }
  .admin-shell .admin-panel table.an-table-events td:nth-child(3),
  .admin-shell .admin-panel table.an-table-events th:nth-child(3) { text-align: left; word-break: break-all; }
}
@media (max-width: 380px) {
  .an-breakdowns { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .admin-toggle { display: flex; }
  .admin-shell aside {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.4);
  }
  #admin-nav-check:checked ~ .admin-shell aside { transform: translateX(0); }
  .admin-shell main { padding: 70px 18px 32px; }
  .admin-panel { padding: 14px; overflow-x: auto; }
  .admin-shell main div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  .admin-account-grid { grid-template-columns: 1fr; }
}

/* On phones the admin panel drops the sidebar entirely in favor of a
   bottom tab bar + "More" sheet - the pattern every native phone app uses,
   instead of a desktop-style hamburger drawer squeezed onto a small screen. */
@media (max-width: 700px) {
  .admin-toggle { display: none !important; }
  .admin-shell aside { display: none !important; }
  .admin-shell main { padding: 18px 14px calc(24px + var(--admin-tabbar-h, 58px)); }

  .admin-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 260;
    background: #14151a;
    border-top: 1px solid #24252b;
    padding-bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) * 0.5));
  }
  .admin-tabbar .tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 7px 2px;
    border: none;
    background: none;
    color: #7d8086;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
    font-family: 'Barlow Condensed', sans-serif;
  }
  .admin-tabbar .tab.active { color: var(--accent); }

  /* ":not([hidden])", not a bare ".admin-more-backdrop{display:block}" - a
     plain class rule has the same specificity as the browser's own
     "[hidden]{display:none}" UA style, and an author rule always wins that
     tie regardless of source order. That meant `backdrop.hidden = true` in
     admin-nav.js never actually hid anything: the backdrop sat above the
     whole page - main content included - at all times, silently eating
     every tap on it (menu open or not) and reading as "the screen stays
     darkened forever" once the sheet's motion drew attention to it. */
  .admin-more-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 240;
  }
  .admin-more-sheet {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 250;
    background: #17181a;
    border: 1px solid #24252b;
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    padding: 10px 8px calc(16px + var(--admin-tabbar-h, 58px));
  }
  .admin-more-sheet.open { transform: translateY(0); }
  .admin-more-handle { width: 36px; height: 4px; border-radius: 2px; background: #3a3b40; margin: 4px auto 10px; }
  .admin-more-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 12px;
    border-radius: 8px;
    color: #f2f2f2;
    font-size: 13.5px;
    font-weight: 600;
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
  }
  .admin-more-link svg { flex-shrink: 0; opacity: 0.85; color: #9a9ea3; }
  .admin-more-link:active, .admin-more-link.active { background: #1c1d22; }
  .admin-more-link.danger { color: #ff6b6b; }
  .admin-more-link.danger svg { color: #ff6b6b; }
  .admin-more-divider { height: 1px; background: #24252b; margin: 6px 6px; }

  /* Responsive admin tables: stacked cards instead of a sideways-scrolling
     grid. Give a table class="kv-table" (single label+value per row, no
     thead) to opt out of the data-label treatment below. */
  .admin-panel table:not(.kv-table) thead { display: none; }
  .admin-panel table:not(.kv-table), .admin-panel table:not(.kv-table) tbody { display: block; width: 100%; }
  .admin-panel table:not(.kv-table) tr {
    display: block;
    border: 1px solid #24252b;
    border-radius: 8px;
    padding: 4px 12px;
    margin-bottom: 10px;
    background: #17181a;
  }
  .admin-panel table:not(.kv-table) tr:last-child { margin-bottom: 0; }
  .admin-panel table:not(.kv-table) td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #1c1d22;
    text-align: right;
  }
  .admin-panel table:not(.kv-table) td:last-child { border-bottom: none; }
  .admin-panel table:not(.kv-table) td::before {
    content: attr(data-label);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7d8086;
    text-align: left;
    flex-shrink: 0;
  }
  .admin-row-actions { justify-content: flex-end; flex: 1; }

  .admin-panel .kv-table tr { display: flex; flex-direction: column; padding: 9px 0; border-bottom: 1px solid #1c1d22; }
  .admin-panel .kv-table tr:last-child { border-bottom: none; }
  .admin-panel .kv-table th { text-align: left; padding: 0 0 3px; color: #7d8086; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
  .admin-panel .kv-table td { padding: 0; border: none; }
}

/* One slim bar: equal padding above and below its single row. */
footer.site {
  border-top: 1px solid var(--border);
  margin-top: auto;
  background: var(--panel);
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 22px 24px;
}
.footer-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.footer-brand-word { height: 11px; width: auto; display: block; }
.footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin: 0 auto 0 0;
}
.footer-links a:hover { color: var(--accent); }
.footer-copy { color: var(--muted); font-size: 11px; flex-shrink: 0; }
@media (max-width: 600px) {
  /* Brand, links and copyright each become their own row here (nothing
     fits side by side at this width), but they were still using the same
     28px gap meant for horizontal spacing between items on one row - three
     stacked rows at that gap, plus footer.site's own 60px top padding
     (sized for a roomy desktop footer), added up to a footer that was
     taller than most of the pages it sits under. */
  .footer-inner { justify-content: center; text-align: center; gap: 10px 18px; padding: 18px 16px; }
  .footer-links { margin: 0; justify-content: center; gap: 18px; }
}

/* "See more" button closing a home page section (cars, parts). */
.section-more { display: flex; justify-content: center; margin-top: 28px; }
.section-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 32px;
  border: 1px solid var(--ink);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.section-more-btn:hover { background: var(--ink); color: #fff; }
@media (max-width: 560px) {
  .section-more { margin-top: 20px; }
  .section-more-btn { width: 100%; }
}

/* Category header: small left-aligned title + one meta line, instead of a
   centred display heading that took half a phone screen. */
.cat-head { padding: 6px 0 18px; }
.cat-title { font-size: 30px; line-height: 1.15; margin: 0; text-align: left; letter-spacing: 0; }
.cat-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 6px 0 0; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
.cat-meta a { color: var(--ink); border-bottom: 1px solid var(--border); }
.cat-meta a:hover { color: var(--accent); border-color: currentColor; }
@media (max-width: 560px) {
  .cat-head { padding: 0 0 12px; }
  .cat-title { font-size: 23px; }
  .cat-meta { font-size: 12px; margin-top: 4px; }
}

/* Search results header: one compact row (query + count, sort on the right)
   instead of a display-size heading plus a second "Products (N)" line. */
.search-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 8px 0 22px; }
.search-title { font-size: 28px; line-height: 1.2; margin: 0; text-align: left; letter-spacing: 0; }
.search-count { margin: 4px 0 0; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; font-family: 'Barlow Condensed', sans-serif; }
@media (max-width: 560px) { .search-title { font-size: 23px; } .search-sort, .search-sort select { width: 100%; } }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 48px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.pagination-pages { display: flex; align-items: center; gap: 6px; }
.pagination-page,
.pagination-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.pagination-page { min-width: 42px; padding: 0 6px; font-variant-numeric: tabular-nums; }
.pagination-arrow { gap: 8px; padding: 0 16px; white-space: nowrap; }
a.pagination-page:hover,
a.pagination-arrow:hover { border-color: var(--ink); }
a.pagination-arrow:hover svg { color: var(--accent); }
.pagination-page.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination-arrow.is-disabled { color: #b5b5b5; border-color: #eee; background: transparent; cursor: default; }
.pagination-ellipsis { color: var(--muted); min-width: 18px; text-align: center; }
.pagination :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pagination-info { color: var(--muted); text-align: center; font-size: 13px; margin: 14px 0 8px; }
@media (max-width: 560px) {
  /* Phones: arrows shrink to icon squares so the numbers keep one row. */
  .pagination { gap: 8px; }
  .pagination-pages { gap: 4px; }
  .pagination-arrow { padding: 0; width: 42px; }
  .pagination-arrow span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pagination-page { min-width: 38px; height: 38px; }
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}
/* A plain native <select> everywhere it's user-facing on the storefront -
   sort order, currency - custom arrow + rounded box instead of whatever
   the browser defaults to. */
.select-custom {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding: 9px 34px 9px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.select-custom:hover { border-color: #b0b0b0; }
.select-custom:focus { border-color: var(--ink); outline: none; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.empty-state a { color: var(--ink); text-decoration: underline; }

/* 404 / 500: a small line-art illustration in the storefront's own accent
   and ink colors (not a generic stock graphic) plus one clear next step,
   centered in the page rather than left-aligned under a bare "404" - see
   the "empty states need a helpful message and action" guideline. */
.error-page { max-width: 480px; margin: 0 auto; padding: 72px 24px 96px; text-align: center; }
.error-page-art { display: block; margin: 0 auto 8px; }
.error-page-code {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 64px;
  line-height: 1;
  color: var(--border);
}
.error-page-title { font-size: 24px; margin: 4px 0 12px; }
.error-page-body { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 28px; }
.error-page-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
/* Not .hero-link - that one is tuned for light text over the dark hero
   photo and reads as near-invisible pale grey on this page's plain white. */
.error-page-links .text-link {
  flex-basis: 100%;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid transparent;
}
.error-page-links .text-link:hover { color: var(--ink); border-bottom-color: var(--accent); }
.search-popular-suggest { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.search-popular-suggest-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.search-popular-suggest a {
  color: var(--ink);
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
}
.search-popular-suggest a:hover { border-color: var(--ink); }

.policy-body h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Barlow Condensed', sans-serif; margin: 28px 0 8px; }
.policy-body h3:first-child { margin-top: 0; }
.policy-body p { color: #4a4a4a; line-height: 1.7; font-size: 14px; margin: 0 0 4px; }
.policy-body code { background: var(--panel); padding: 1px 6px; border-radius: 3px; font-size: 13px; }
.policy-body ul { color: #4a4a4a; line-height: 1.7; font-size: 14px; margin: 0 0 4px; padding-left: 20px; }
.policy-body li { margin-bottom: 4px; }
.policy-body h2 { font-size: 17px; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; margin: 34px 0 10px; scroll-margin-top: 90px; }
.policy-body p + p { margin-top: 10px; }
.policy-body a { color: var(--text); border-bottom: 1px solid var(--border); }
.policy-body a:hover { color: var(--accent); }
.policy-toc { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin-bottom: 8px; }
.policy-toc-title { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.policy-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; font-size: 13.5px; line-height: 1.9; }
.policy-toc a { border-bottom: none; color: #4a4a4a; }
.policy-table-wrap { overflow-x: auto; margin: 12px 0; }
.policy-table-wrap table { min-width: 560px; }
.policy-table-wrap td { vertical-align: top; color: #4a4a4a; line-height: 1.55; }
@media (max-width: 700px) {
  .policy-toc ol { columns: 1; }
  /* Tables become one card per row on phones instead of scrolling sideways. */
  .policy-table-wrap table { min-width: 0; }
  .policy-table-wrap thead { display: none; }
  .policy-table-wrap tr { display: block; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
  .policy-table-wrap td { display: block; border: none; padding: 4px 0; }
  .policy-table-wrap td:first-child { font-weight: 600; color: var(--text); }
  .policy-table-wrap td:not(:first-child)::before {
    content: attr(data-label); display: block; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--muted); margin-bottom: 1px;
  }
}

/* Tablet gap: too narrow for the full-width logo + search bar + nav to fit
   on one line (nav has flex-shrink:0 and was overflowing past the
   viewport, unnoticed because it's wider than the 700px mobile breakpoint
   but narrower than the ~900px the unwrapped header actually needs), yet
   wide enough that the mobile bottom tab bar (also gated at 700px) isn't
   there to fall back on for cart/currency access - so the header must
   still show them, just wrapped onto two lines instead of overflowing. */
@media (max-width: 860px) {
  header.site { flex-wrap: wrap; gap: 10px 16px; }
  header.site .logo { order: 1; }
  header.site nav { order: 2; margin-left: auto; }
  .search-form { order: 3; flex-basis: 100%; max-width: none; }
}

@media (max-width: 700px) {
  .product-detail { gap: 24px; }
  /* The bottom tab bar covers cart + currency on mobile - showing them a
     second time at the top of the header was the duplicate the site
     shouldn't have. */
  header.site .cart-link,
  header.site .currency-switcher { display: none; }
  /* Cars / Tuning are already tabs in the bottom bar on phones. */
  header.site nav .nav-desktop { display: none; }

  /* Product page gallery */
  .product-detail .gallery { max-width: 100%; }
  .gallery-thumb { width: 56px; height: 56px; }

  /* Product configurator swatches */
  .config-swatch { width: 64px; }
  .config-swatch-img { width: 56px; height: 56px; }
  .config-swatch-label { font-size: 10px; }

  /* Add to cart form - stack vertically on mobile */
  .add-to-cart-form { flex-wrap: wrap; gap: 10px; }
  .add-to-cart-form .qty-stepper { flex: 1 1 100%; justify-content: center; }
  .add-to-cart-form .btn { flex: 1 1 100%; }

  /* Product info typography */
  .product-title { font-size: 24px; }
  .price-big { font-size: 20px; }
  .config-group-label { font-size: 11px; }
}

/* Mobile bottom tab bar: hidden on desktop, fixed to the bottom of the
   viewport on phones so cart/currency/navigation stay one thumb-tap away
   instead of a scroll back up to the header. */
.mobile-tabbar { display: none; }
@media (max-width: 700px) {
  body { padding-bottom: var(--tabbar-h, 58px); }
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Higher than the cart backdrop (240) and sheet (250): while the sheet
       slides down to close, it has to travel through the screen space the
       tab bar occupies - with a higher z-index the tab bar renders on top
       through that whole animation, so it reads as the sheet tucking away
       behind the tab bar rather than sliding over it. */
    z-index: 260;
    /* Its own GPU layer: iPhone Safari otherwise drops or paints over a
       fixed bar during momentum scroll on pages with heavy 3D layers (the
       home studio canvas, the car coverflow) - it vanished at the bottom
       of the home page. */
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    background: var(--bg);
    border-top: 1px solid var(--border);
    /* Clears the iPhone home indicator (needs viewport-fit=cover to be
       non-zero) and always keeps a few px of white under the labels. */
    padding-bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) * 0.5));
  }
  .mobile-tabbar .tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 7px 2px;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
    font-family: 'Barlow Condensed', sans-serif;
    position: relative;
  }
  .mobile-tabbar .tab-icon { transition: transform .2s ease, stroke-width .2s ease; }
  .mobile-tabbar .tab.active { color: var(--accent); }
  .mobile-tabbar .tab.active .tab-icon { stroke-width: 2; transform: translateY(-1px); }
  /* short accent bar over the current tab */
  .mobile-tabbar .tab.active::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: 22px;
    height: 2px;
    margin-left: -11px;
    border-radius: 0 0 2px 2px;
    background: var(--accent);
  }
  .mobile-tabbar .tab:active .tab-icon { transform: scale(.9); }
  .mobile-tabbar .cart-tab { position: relative; }
  .mobile-tabbar .tab-badge { top: 2px; right: 22%; }
  /* Currency: all three options sit right there as direct-tap buttons -
     no cycling through them blindly, no popup, no open/close state that
     could ever get stuck. Picking one just submits that exact currency. */
  .currency-tab { padding-top: 5px; padding-bottom: 5px; }
  /* $ / € as one small segmented switch, same height as the icons */
  .currency-options-inline { display: flex; padding: 2px; margin-bottom: 0; border: 1px solid var(--border); border-radius: 7px; }
  .curr-opt {
    width: 20px;
    height: 16px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: none;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .curr-opt.active { background: var(--accent); color: #fff; border-color: var(--accent); }

  /* keep the "Added to cart" toast clear of the fixed tab bar */
  .toast { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   Admin: custom form controls
   Browser-default checkboxes, radios, selects and number spinners looked
   out of place on the dark panels (and different in every browser). These
   replace them everywhere in the admin with one consistent style.
   "body .admin-shell" outranks ".admin-shell .admin-form input", which
   would otherwise give checkboxes a full-width text-field look.
   ========================================================================== */
html:has(body.admin-body) { scrollbar-color: #3a3b40 #0e0e0f; color-scheme: dark; }
body.admin-body ::-webkit-scrollbar-track { background: #0e0e0f; }
body.admin-body ::-webkit-scrollbar-thumb { background: #3a3b40; border-radius: 6px; border: 2px solid #0e0e0f; }

body .admin-shell input[type="checkbox"],
body .admin-shell input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  margin: 0;
  border: 1.5px solid #4a4c53;
  border-radius: 5px;
  background: #0e0e0f;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.12s ease, border-color 0.12s ease;
}
body .admin-shell input[type="radio"] { border-radius: 50%; }
body .admin-shell input[type="checkbox"]:hover,
body .admin-shell input[type="radio"]:hover { border-color: #7d8086; }
body .admin-shell input[type="checkbox"]:checked,
body .admin-shell input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
body .admin-shell input[type="checkbox"]::before {
  content: '';
  width: 9px;
  height: 5px;
  border: 2px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}
body .admin-shell input[type="checkbox"]:checked::before { opacity: 1; }
body .admin-shell input[type="radio"]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform 0.12s ease; }
body .admin-shell input[type="radio"]:checked::before { transform: scale(1); }
body .admin-shell input[type="checkbox"]:focus-visible,
body .admin-shell input[type="radio"]:focus-visible { outline: 2px solid rgba(237, 28, 36, 0.55); outline-offset: 2px; }
body .admin-shell input[type="checkbox"]:disabled,
body .admin-shell input[type="radio"]:disabled { opacity: 0.35; cursor: default; }

/* Selects: own chevron instead of the platform arrow. */
body .admin-shell select,
body .admin-shell .admin-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%239a9ea3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
body .admin-shell select option, body .admin-shell select optgroup { background: #14151a; color: #f2f2f2; }

/* Text fields: one focus style, no number spinners. */
body .admin-shell .admin-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body .admin-shell .admin-form textarea,
body .admin-shell .admin-form select {
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* The currency symbol and recalc button sit inside the field. */
body .admin-shell .price-pair-field input { padding-left: 28px !important; padding-right: 36px !important; }
body .admin-shell input:focus, body .admin-shell textarea:focus, body .admin-shell select:focus {
  outline: none;
  border-color: rgba(237, 28, 36, 0.7);
  box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.15);
}
body .admin-shell input[type="number"]::-webkit-outer-spin-button,
body .admin-shell input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body .admin-shell input[type="number"] { -moz-appearance: textfield; }
body .admin-shell ::placeholder { color: #5d6066; }

/* ==========================================================================
   Admin accounts page
   ========================================================================== */
.acc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.acc-col { display: flex; flex-direction: column; gap: 20px; }
.acc-col > .admin-panel { margin-bottom: 0; }
.acc-must { background: rgba(224, 164, 74, 0.1); border: 1px solid rgba(224, 164, 74, 0.45); color: #f0cf96; border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; font-size: 13.5px; line-height: 1.5; }
.acc-must b { color: #fff; }
.acc-me { display: flex; align-items: center; gap: 14px; }
.acc-me-name { font-size: 17px; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-meta { font-size: 12px; color: #7d8086; margin-top: 3px; line-height: 1.45; }
.acc-avatar {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2a2b31, #1a1b20); border: 1px solid #34353c;
  color: #e6e6e6; font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
}
.acc-avatar.is-lg { width: 52px; height: 52px; font-size: 16px; }
.acc-role { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; }
.acc-role.owner { background: rgba(237, 28, 36, 0.14); color: #ff7a7f; }
.acc-role.admin { background: #24252b; color: #b9bcc2; }
.acc-you { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #7d8086; font-weight: 600; }
.acc-warn { color: #e0a44a; }
.acc-pw { position: relative; }
.admin-form .acc-pw input { padding-right: 64px !important; }
.acc-pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #9a9ea3; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; padding: 6px 8px; cursor: pointer; border-radius: 6px; }
.acc-pw-eye:hover { color: #fff; background: #1c1d22; }
.acc-strength { display: flex; align-items: center; gap: 10px; margin-top: 6px; min-height: 14px; }
.acc-strength i { flex: 1; height: 4px; border-radius: 2px; background: #24252b; position: relative; overflow: hidden; }
.acc-strength i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; background: #ff6b6b; transition: width 0.2s ease, background 0.2s ease; }
.acc-strength span { font-size: 11px; color: #7d8086; min-width: 70px; text-align: right; }
.acc-strength[data-level="-1"] { display: none; }
.acc-strength[data-level="0"] i::after { width: 12%; background: #ff6b6b; }
.acc-strength[data-level="1"] i::after { width: 30%; background: #ff8f5a; }
.acc-strength[data-level="2"] i::after { width: 55%; background: #e0c14a; }
.acc-strength[data-level="3"] i::after { width: 80%; background: #7ccf6b; }
.acc-strength[data-level="4"] i::after { width: 100%; background: #4caf50; }
.acc-submit { margin-top: 16px; width: 100%; }
.acc-inline { display: flex; gap: 8px; margin-top: 8px; }
.admin-form label.acc-check, label.acc-check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 4px; color: #d7d8da; font-size: 13px; cursor: pointer; line-height: 1.4; }
.acc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.acc-chip { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: #1c1d22; color: #9a9ea3; border: 1px solid #2a2b31; }
.acc-chip.is-on { color: #e6e6e6; }
.acc-chip.is-warn { color: #e0a44a; border-color: rgba(224, 164, 74, 0.4); }
.acc-devices { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.acc-devices form { margin: 0; }

.acc-team { display: flex; flex-direction: column; gap: 8px; }
.acc-member { border: 1px solid #24252b; border-radius: 10px; background: #17181d; overflow: hidden; }
.acc-member[open] { border-color: #34353c; }
.acc-member summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.acc-member summary::-webkit-details-marker { display: none; }
.acc-member summary:hover { background: #1b1c22; }
.acc-member-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acc-member-name { font-size: 14px; font-weight: 600; color: #f2f2f2; display: flex; align-items: center; gap: 6px; }
.acc-chevron { width: 8px; height: 8px; border-right: 1.6px solid #7d8086; border-bottom: 1.6px solid #7d8086; transform: rotate(45deg); margin: 0 4px 4px 4px; transition: transform 0.15s ease; }
.acc-member[open] .acc-chevron { transform: rotate(-135deg); margin-bottom: 0; margin-top: 4px; }
.acc-member-body { border-top: 1px solid #24252b; padding: 4px 14px 14px; }
.acc-block { padding: 14px 0; border-bottom: 1px solid #202127; margin: 0; }
.acc-block:last-child { border-bottom: none; padding-bottom: 0; }
.acc-block-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #fff; margin-bottom: 10px; }
.acc-block .btn.tiny:not(.danger) { margin-top: 12px; }
.acc-danger { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acc-block .acc-pw input { width: 100%; padding: 10px 64px 10px 12px; background: #0e0e0f; border: 1px solid #2a2b2e; border-radius: 8px; color: #f2f2f2; font-size: 13px; }

.acc-segment { display: inline-flex; background: #0e0e0f; border: 1px solid #2a2b31; border-radius: 9px; padding: 3px; gap: 2px; }
.acc-segment label { margin: 0 !important; cursor: pointer; }
body .admin-shell .acc-segment input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; min-width: 0; pointer-events: none; }
.acc-segment span { display: inline-block; padding: 7px 16px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: #9a9ea3; text-transform: uppercase; letter-spacing: 0.4px; font-family: 'Barlow Condensed', sans-serif; }
.acc-segment input:checked + span { background: #2a2b31; color: #fff; }
.acc-segment input:focus-visible + span { outline: 2px solid rgba(237, 28, 36, 0.55); }
.acc-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.acc-zones[hidden] { display: none; }
.admin-form label.acc-zone, label.acc-zone { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid #2a2b31; border-radius: 8px; background: #121317; cursor: pointer; }
label.acc-zone:has(input:checked) { border-color: rgba(237, 28, 36, 0.55); background: rgba(237, 28, 36, 0.07); }
.acc-zone span { display: flex; flex-direction: column; line-height: 1.3; }
.acc-zone b { color: #f2f2f2; font-size: 13px; font-weight: 600; }
.acc-zone small { color: #7d8086; font-size: 11px; }

.admin-denied { max-width: 420px; margin: 80px auto; text-align: center; color: #9a9ea3; }
.admin-denied svg { color: var(--accent); margin-bottom: 10px; }
.admin-denied h1 { margin-bottom: 8px !important; }
.admin-denied p { margin: 0 0 22px; line-height: 1.5; }
.login-note { background: rgba(224, 164, 74, 0.1); border: 1px solid rgba(224, 164, 74, 0.4); color: #f0cf96; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; text-align: left; line-height: 1.45; }
.login-note.is-error { background: rgba(255, 107, 107, 0.08); border-color: rgba(255, 107, 107, 0.4); color: #ffb3b3; }

@media (max-width: 1100px) {
  .acc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .acc-zones { grid-template-columns: 1fr; }
  .acc-member summary { flex-wrap: wrap; }
  .acc-danger { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Visitors list, visitor dossier, analytics drill-downs
   ========================================================================== */
.vis-sub { color: #7d8086; font-size: 12px; }
.vis-ic { vertical-align: -2px; color: #9a9ea3; }
.vis-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; flex-shrink: 0; }
.vis-dot.is-lg { width: 14px; height: 14px; margin-right: 10px; }
.vis-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: #f2f2f2; white-space: nowrap; }
.vis-tag { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 999px; background: #24252b; color: #9a9ea3; vertical-align: 1px; font-family: 'Barlow Condensed', sans-serif; }
.vis-tag.ret { background: rgba(78, 161, 255, 0.14); color: #7fb8ff; }
.vis-src { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: #1c1d22; color: #d7d8da; border: 1px solid #2a2b31; white-space: nowrap; }
.vis-src.utm { border-color: rgba(237, 28, 36, 0.4); color: #ff9a9e; }
.vis-src.ref { border-color: rgba(78, 161, 255, 0.35); color: #9cc8ff; }
.vis-act { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 7px; border-radius: 5px; margin: 1px 4px 1px 0; white-space: nowrap; font-family: 'Barlow Condensed', sans-serif; }
.vis-act.cart { background: rgba(76, 175, 80, 0.14); color: #7ccf6b; }
.vis-act.order { background: rgba(237, 28, 36, 0.16); color: #ff7a7f; }
.vis-act.contact { background: rgba(224, 164, 74, 0.14); color: #f0c27a; }
.vis-act.search { background: rgba(78, 161, 255, 0.14); color: #7fb8ff; }
.vis-act.option { background: #24252b; color: #b9bcc2; }
.vis-act.remove, .vis-act.error { background: rgba(255, 107, 107, 0.1); color: #ff8a8a; }
.vis-filters { display: flex; flex-direction: column; gap: 12px; }
.vis-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; }
.vis-search .admin-search-wrap { flex: 1 1 320px; }
.vis-sort { display: flex; align-items: center; gap: 8px; color: #7d8086; font-size: 12px; margin: 0; }
.vis-sort select { padding: 9px 34px 9px 12px; background-color: #0e0e0f; border: 1px solid #2a2b2e; border-radius: 8px; color: #f2f2f2; font-size: 13px; }
.vis-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vis-chip { font-size: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid #2a2b31; color: #b9bcc2; background: #14151a; }
.vis-chip:hover { border-color: #4a4c53; color: #fff; }
.vis-chip.is-on { border-color: var(--accent); background: rgba(237, 28, 36, 0.12); color: #fff; }
.vis-chip.is-filter { border-color: rgba(78, 161, 255, 0.45); color: #cfe3ff; background: rgba(78, 161, 255, 0.08); }
.vis-chip b { color: #fff; font-weight: 600; }
.vis-clear { font-size: 12px; margin-left: 4px; }
.vis-table tbody tr[data-href] { cursor: pointer; }
.vis-table td { vertical-align: middle; }
.vis-did { white-space: nowrap; }
.vis-empty { color: #7d8086; text-align: center; padding: 28px !important; }
.vis-pager { display: flex; align-items: center; justify-content: center; gap: 18px; color: #9a9ea3; font-size: 13px; }

.dos-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.dos-title .vis-tag { font-size: 11px; }
.dos-id { color: #7d8086; font-size: 12.5px; margin: -10px 0 18px; }
.dos-id code { color: #b9bcc2; background: #14151a; padding: 1px 6px; border-radius: 4px; font-size: 11.5px; }
.dos-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.an-kpi.good .n { color: #7ccf6b; }
.dos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.dos-grid .admin-panel { margin-bottom: 0; }
.dos-dl { display: grid; grid-template-columns: 120px 1fr; gap: 9px 14px; margin: 0; font-size: 13px; }
.dos-dl dt { color: #7d8086; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; padding-top: 2px; }
.dos-dl dd { margin: 0; color: #e6e6e6; min-width: 0; overflow-wrap: anywhere; }
.dos-dl code { font-size: 12px; color: #e6e6e6; }
.dos-first { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: #e6e6e6; }
.dos-first a, .dos-acq a { color: #d7d8da; text-decoration: underline; text-decoration-color: #3a3b40; }
.dos-break { overflow-wrap: anywhere; }
.dos-acq { margin: 0; padding-left: 18px; font-size: 12.5px; color: #b9bcc2; display: flex; flex-direction: column; gap: 5px; }
.dos-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px 28px; }
.dos-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #9a9ea3; margin-bottom: 8px; }
.dos-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; font-size: 13px; color: #e6e6e6; padding: 6px 0; border-bottom: 1px solid #1c1d22; }
.dos-row:last-child { border-bottom: none; }
.dos-row a { color: #fff; }
.dos-when { margin-left: auto; color: #7d8086; font-size: 11.5px; white-space: nowrap; }
.dos-interest { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.dos-items { display: flex; flex-direction: column; gap: 4px; }
.dos-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 8px; color: inherit; }
.dos-item:hover { background: #1b1c22; }
.dos-thumb { width: 52px; height: 40px; border-radius: 5px; background: #0e0e0f; border: 1px solid #24252b; flex-shrink: 0; overflow: hidden; }
.dos-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dos-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dos-item-name { font-size: 13.5px; color: #f2f2f2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dos-bar { height: 3px; background: #1f2026; border-radius: 2px; overflow: hidden; margin-top: 3px; }
.dos-bar i { display: block; height: 100%; background: var(--accent); }
.dos-item-time { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 600; color: #fff; white-space: nowrap; }
.dos-visits { display: flex; flex-direction: column; gap: 8px; }
.dos-visit { border: 1px solid #24252b; border-radius: 10px; background: #17181d; overflow: hidden; }
.dos-visit[open] { border-color: #34353c; }
.dos-visit summary { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.dos-visit summary::-webkit-details-marker { display: none; }
.dos-visit summary:hover { background: #1b1c22; }
.dos-visit[open] .acc-chevron { transform: rotate(-135deg); margin-bottom: 0; margin-top: 4px; }
.dos-visit-no { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 600; color: #5d6066; min-width: 34px; }
.dos-visit-main { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: #f2f2f2; min-width: 170px; }
.dos-visit-meta { flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.dos-timeline { list-style: none; margin: 0; padding: 6px 14px 4px 14px; border-top: 1px solid #24252b; }
.dos-timeline li, .an-feed li { display: grid; grid-template-columns: 64px 128px 1fr; gap: 10px; align-items: baseline; padding: 7px 0 7px 12px; border-left: 2px solid #2a2b31; font-size: 13px; color: #e6e6e6; position: relative; }
.dos-timeline li::before, .an-feed li::before { content: ''; position: absolute; left: -5px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: #3a3b40; }
.dos-timeline li.t-view::before, .an-feed li.t-view::before { background: #7d8086; }
.dos-timeline li.t-cart::before, .an-feed li.t-cart::before { background: #4caf50; }
.dos-timeline li.t-order::before, .an-feed li.t-order::before { background: var(--accent); }
.dos-timeline li.t-contact::before, .an-feed li.t-contact::before { background: #e0a44a; }
.dos-timeline li.t-search::before, .an-feed li.t-search::before { background: #4ea1ff; }
.dos-timeline li.t-error::before, .dos-timeline li.t-remove::before, .an-feed li.t-error::before { background: #ff6b6b; }
.dos-t-at { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: #7d8086; }
.dos-t-kind { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: #9a9ea3; font-weight: 600; }
.t-cart .dos-t-kind { color: #7ccf6b; }
.t-order .dos-t-kind { color: #ff7a7f; }
.t-contact .dos-t-kind { color: #f0c27a; }
.t-error .dos-t-kind, .t-remove .dos-t-kind { color: #ff8a8a; }
.dos-t-what { min-width: 0; overflow-wrap: anywhere; }
.dos-t-what a { color: #f2f2f2; }
.dos-visit-foot { padding: 8px 14px 12px; border-top: 1px solid #1f2026; }

/* Analytics: collapsible sections, UTM drill-down, live feed */
.an-kpi.is-link { color: inherit; transition: border-color 0.15s ease; }
.an-kpi.is-link:hover { border-color: #3a3b40; }
a.an-brow { display: block; color: inherit; border-radius: 6px; margin: 0 -6px; padding: 0 6px; }
a.an-brow:hover { background: #1b1c22; }
.an-brow + .an-brow { margin-top: 6px; padding-top: 4px; }
.an-sec-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 14px; flex-wrap: wrap; }
details.an-sec > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; }
details.an-sec > summary::-webkit-details-marker { display: none; }
details.an-sec > summary::before { content: ''; width: 7px; height: 7px; border-right: 1.6px solid #7d8086; border-bottom: 1.6px solid #7d8086; transform: rotate(-45deg); transition: transform 0.15s ease; margin-right: 2px; }
details.an-sec[open] > summary::before { transform: rotate(45deg); }
details.an-sec[open] > summary { margin-bottom: 14px; }
.an-sec-count { font-weight: 500; color: #7d8086; text-transform: none; letter-spacing: 0; font-size: 12px; }
.an-good { color: #7ccf6b !important; }
.an-bad { color: #ff7a7f !important; }
.an-more { display: inline-block; margin-top: 12px; font-size: 12.5px; }
.an-utm-head, .an-utm-row { display: grid; grid-template-columns: minmax(180px, 2.2fr) repeat(6, minmax(60px, 1fr)) 90px; gap: 10px; align-items: center; padding: 9px 10px; font-size: 13px; }
.an-utm-head { color: #7d8086; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; border-bottom: 1px solid #24252b; }
.an-utm-group { border-bottom: 1px solid #1c1d22; }
.an-utm-group > summary { list-style: none; cursor: pointer; }
.an-utm-group > summary::-webkit-details-marker { display: none; }
.an-utm-row.is-group:hover { background: #1b1c22; }
.an-utm-group[open] > summary { background: #17181d; }
.an-utm-group[open] .acc-chevron { transform: rotate(-135deg); margin-bottom: 0; margin-top: 4px; }
.an-utm-name { display: flex; align-items: center; gap: 8px; color: #f2f2f2; min-width: 0; overflow-wrap: anywhere; }
.an-utm-name.is-sub { padding-left: 26px; color: #b9bcc2; }
.an-utm-link { font-size: 12px; color: #9a9ea3; text-align: right; white-space: nowrap; }
.an-utm-link:hover { color: #fff; }
.an-feed { list-style: none; margin: 0; padding: 0 0 0 4px; }
.an-feed li { grid-template-columns: 90px 128px 1fr auto; }
.an-feed-when { font-size: 11.5px; color: #7d8086; }
.an-feed-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-feed-who { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #d7d8da; white-space: nowrap; }

@media (max-width: 1200px) {
  .dos-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .dos-grid, .dos-interest { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .dos-kpis { grid-template-columns: 1fr 1fr; }
  .dos-dl { grid-template-columns: 1fr; gap: 2px; }
  .dos-dl dd { margin-bottom: 8px; }
  .dos-actions { grid-template-columns: 1fr; }
  .dos-timeline li { grid-template-columns: 52px 1fr; }
  .dos-timeline .dos-t-what { grid-column: 1 / -1; padding-left: 62px; margin-top: -4px; }
  .an-feed li { grid-template-columns: 70px 1fr; }
  .an-feed .an-feed-what, .an-feed .an-feed-who { grid-column: 2; }
  .an-utm-head { display: none; }
  .an-utm-row { grid-template-columns: 1fr 1fr 1fr; gap: 4px 10px; }
  .an-utm-row .an-utm-name { grid-column: 1 / -1; }
  .an-utm-row [data-label]::before { content: attr(data-label); display: block; font-size: 10px; color: #7d8086; text-transform: uppercase; letter-spacing: 0.4px; }
  .an-utm-link { grid-column: 1 / -1; text-align: left; }
  .vis-search .admin-search-wrap { flex-basis: 100%; }
}

.dos-acq { list-style: none; padding-left: 0; }
.dos-acq-no { display: inline-block; min-width: 26px; color: #5d6066; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; }
.an-bots { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.an-bots .btn { white-space: nowrap; }
@media (max-width: 700px) {
  .dos-id { margin-top: 0; }
  .dos-visit summary { gap: 6px 12px; }
  .dos-visit-meta { flex-basis: 100%; padding-left: 46px; }
  .dos-visit summary .acc-chevron { position: absolute; right: 16px; }
  .dos-visit summary { position: relative; padding-right: 36px; }
}

/* Products list: bulk selection */
th.pl-check, td.pl-check { width: 36px; }
.admin-shell table tbody tr.is-selected { background: rgba(237, 28, 36, 0.06); }
.pl-section { max-width: 260px; padding: 9px 34px 9px 12px; background-color: #0e0e0f; border: 1px solid #2a2b2e; border-radius: 8px; color: #f2f2f2; font-size: 13px; }
.pl-bulk {
  position: sticky; top: 12px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #1b1c22; border: 1px solid rgba(237, 28, 36, 0.45); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.pl-bulk[hidden] { display: none; }
.pl-bulk-count { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #d7d8da; flex-wrap: wrap; }
.pl-bulk-count b { color: #fff; }
.pl-bulk-all, .pl-bulk-clear { background: none; border: none; color: #9cc8ff; font-size: 12.5px; cursor: pointer; padding: 0; text-decoration: underline; }
.pl-bulk-clear { color: #9a9ea3; }
.pl-bulk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-bulk-move { display: inline-flex; gap: 6px; align-items: center; }
.pl-bulk-move select { max-width: 240px; padding: 6px 30px 6px 10px; background-color: #0e0e0f; border: 1px solid #2a2b2e; border-radius: 6px; color: #f2f2f2; font-size: 12.5px; }
@media (max-width: 700px) {
  .pl-bulk { top: 6px; }
  .pl-bulk-move { flex: 1 1 100%; }
  .pl-bulk-move select { flex: 1; max-width: none; }
  .pl-section { max-width: none; flex: 1 1 100%; }
}

/* --- Checkout --- */
.co-wrap { max-width: 1040px; padding-top: 28px; padding-bottom: 64px; }
.co-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(30px, 5vw, 44px); margin: 0 0 8px; }
.co-lead { color: var(--muted); max-width: 640px; line-height: 1.6; margin: 0 0 28px; }
.co-errors { border: 1px solid #e3a3a6; background: #fdf1f1; color: #9b1c22; border-radius: 6px; padding: 12px 16px; margin-bottom: 20px; line-height: 1.6; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.co-form { display: flex; flex-direction: column; gap: 16px; }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.co-field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.co-field > span, .co-field legend { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: 6px; }
.co-field em { color: #c21a21; font-style: normal; }
.co-field input, .co-field textarea { font: inherit; font-size: 16px; color: var(--text); background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 11px 12px; width: 100%; box-sizing: border-box; transition: border-color 0.15s; }
.co-field textarea { resize: vertical; min-height: 96px; }
.co-field input:focus, .co-field textarea:focus { outline: none; border-color: var(--text); }
.co-channels { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.co-channels legend { width: 100%; }
.co-chip { cursor: pointer; position: relative; }
/* Visually hidden but still focusable. The size is pinned because the
   text-field rule (.co-field input { width: 100% }) also matches these
   radios - at full width they stuck out past the screen edge on phones. */
.co-chip input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.co-chip span { display: inline-block; border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; font-size: 14px; transition: all 0.15s; }
.co-chip input:checked + span { background: var(--text); border-color: var(--text); color: #fff; }
.co-chip input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.co-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.co-submit { align-self: flex-start; min-width: 220px; padding-top: 14px; padding-bottom: 14px; }
.co-note { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.co-summary { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 20px; position: sticky; top: 90px; }
.co-summary h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 12px; }
.co-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.co-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; background: #fff; }
.co-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co-item-info a { color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.35; }
.co-item-info small { color: var(--muted); font-size: 12px; }
.co-item b { font-size: 14px; white-space: nowrap; }
.co-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; font-size: 18px; }
.co-edit { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--muted); }
.co-done { max-width: 640px; text-align: center; }
.co-done .co-lead { margin-left: auto; margin-right: auto; }
.co-done .co-summary { position: static; text-align: left; margin: 28px 0 20px; }
.co-done-mark { width: 56px; height: 56px; border-radius: 50%; background: #1f8a4c; color: #fff; font-size: 28px; line-height: 56px; margin: 8px auto 16px; }
.co-number { font-size: 18px; margin: 0 0 12px; }
.co-done-links { justify-content: center; max-width: 440px; margin: 0 auto; }
.cart-drawer-footer .contact-cta-links .btn { flex: 1 1 120px; }
@media (max-width: 860px) {
  .co-grid { grid-template-columns: 1fr; gap: 28px; }
  .co-summary { position: static; order: -1; }
}
@media (max-width: 560px) {
  .co-row { grid-template-columns: 1fr; }
  .co-submit { align-self: stretch; }
}

/* --- Admin: orders --- */
.admin-nav-badge { margin-left: auto; background: var(--accent); color: #fff; font-size: 10.5px; line-height: 1; padding: 3px 7px; border-radius: 999px; letter-spacing: 0; }
.admin-tabbar .tab { position: relative; }
.admin-tabbar .tab-badge { position: absolute; top: 3px; left: calc(50% + 6px); background: var(--accent); color: #fff; font-size: 9.5px; line-height: 1; padding: 2px 5px; border-radius: 999px; letter-spacing: 0; font-family: 'Inter', sans-serif; }
.ord-status { display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 9px; border-radius: 999px; background: #24252b; color: #b9bcc2; vertical-align: middle; white-space: nowrap; }
.s-new { background: rgba(237, 28, 36, 0.16) !important; color: #ff7a7f !important; }
.s-contacted { background: rgba(224, 164, 74, 0.14) !important; color: #f0c27a !important; }
.s-confirmed, .s-paid { background: rgba(78, 161, 255, 0.14) !important; color: #7fb8ff !important; }
.s-shipped { background: rgba(170, 120, 255, 0.14) !important; color: #c3a2ff !important; }
.s-completed { background: rgba(76, 175, 80, 0.14) !important; color: #7ccf6b !important; }
.s-cancelled { background: #1c1d22 !important; color: #7d8086 !important; text-decoration: line-through; }
.dos-title .ord-status { font-size: 13px; margin-left: 10px; }
.ord-table tr.ord-new td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.ord-line { font-size: 13px; color: #e6e6e6; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-back { margin: 0 0 6px; }
.ord-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ord-comment { white-space: pre-wrap; }
.ord-dossier { margin-top: 14px; display: inline-block; }
.ord-items { width: 100%; }
.ord-items tfoot td { border-top: 1px solid #2a2b31; padding-top: 12px; font-weight: 600; color: #fff; }
.ord-items tfoot td:first-child { text-align: right; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; color: #9a9ea3; }
.ord-thumb { width: 56px; height: 44px; object-fit: cover; border-radius: 5px; display: block; }
.ord-form { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ord-status-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.ord-pick { cursor: pointer; }
body .admin-shell .ord-pick input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.ord-pick span { display: inline-block; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid transparent; opacity: 0.55; transition: opacity 0.15s; }
.ord-pick:hover span { opacity: 0.85; }
.ord-pick input:checked + span { opacity: 1; border-color: currentColor; }
.ord-pick input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.ord-note-label { display: flex; flex-direction: column; gap: 6px; width: 100%; font-size: 12px; color: #b9bcc2; }
.ord-note-label textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px; line-height: 1.5; }
.ord-delete { margin: 8px 0 30px; text-align: right; }
.dash-orders { align-items: flex-start; }
.dash-order-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dash-order-list a { margin-left: 0; color: #fff; }
.dash-order-list span { color: #9a9ea3; font-size: 12px; margin-left: 6px; }
@media (max-width: 900px) {
  .ord-items thead { display: none; }
  .ord-items tr { display: grid; grid-template-columns: 56px 1fr; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid #1c1d22; }
  .ord-items td { border: none; padding: 0; }
  .ord-items td:first-child { grid-row: span 4; }
  .ord-items td[data-label]:not([data-label=""]):not([data-label="Product"])::before { content: attr(data-label) ': '; color: #7d8086; font-size: 11px; text-transform: uppercase; }
  .ord-items tfoot tr { grid-template-columns: 1fr auto; }
  .ord-items tfoot td:first-child { grid-row: auto; text-align: left; }
}
.ord-cell { min-width: 0; }
@media (max-width: 900px) { .ord-cell { text-align: right; } .ord-line { max-width: 220px; margin-left: auto; } }
@media (max-width: 600px) { .pl-filter { flex-wrap: wrap; } .pl-filter .admin-search-wrap { flex: 1 1 100%; } .pl-filter .pl-section { flex: 1 1 0; min-width: 0; max-width: none; } }