/**
 * AltTune Performance - public search UI.
 *
 * Ported from the vehicle-search prototype (form-style-search/style.css).
 * LIGHT THEME ONLY. The prototype's dark `:root` defaults, the `body.theme-light`
 * override layer, the dev viewport-control widget, and the theme-toggle have all
 * been removed. The light values are promoted to be the base tokens, and every
 * selector is scoped under `.atp-app` so styling never leaks into the WP theme.
 *
 * Container width is fixed (no viewport dev modes). `.atp-app` is the single root.
 */

.atp-app {
  /* --- Light theme tokens (promoted from body.theme-light) --- */
  --bg: #f5f5f5;
  --panel: #ffffff;
  --panel-2: #fafafa;
  --panel-3: #e9edf2;
  --panel-4: #dde4eb;

  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.18);

  --text: #111827;
  --text-soft: rgba(17, 24, 39, 0.76);
  --text-dim: rgba(17, 24, 39, 0.52);

  --accent: #f26921;
  --accent-soft: rgba(242, 105, 33, 0.06);
  --accent-strong: rgba(242, 105, 33, 0.16);
  --accent-bright: #f48a4d;
  --positive: #39c7db;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  --motion-fast: 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-base: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-enter: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);

  --topbar-bg: rgba(255, 255, 255, 0.92);
  --topbar-shadow: 0 1px 0 rgba(15, 23, 42, 0.07);

  --topbar-height: 72px;
  --app-frame-max: 1440px;

  /* --- Cluster / gauge surface tokens (light) --- */
  --cluster-card-line: rgba(15, 23, 42, 0.08);
  --cluster-lane: rgba(15, 23, 42, 0.06);
  --cluster-lane-line: rgba(15, 23, 42, 0.06);

  /* Scope baseline */
  color: var(--text);
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}

.atp-app *,
.atp-app *::before,
.atp-app *::after {
  box-sizing: border-box;
}

.atp-app a,
.atp-app button,
.atp-app input,
.atp-app select {
  font: inherit;
}

.atp-app button,
.atp-app select,
.atp-app input {
  outline: none;
}

/* `.atp-app[hidden]` (the root itself, e.g. the JS-hidden crawlable catalogue)
   needs the !important too: the base `.atp-app { display: flex }` author rule
   otherwise beats the UA `[hidden] { display: none }` and the element stays
   visible despite the hidden attribute. */
.atp-app[hidden],
.atp-app [hidden] {
  display: none !important;
}

/* --- Frame --- */
.atp-app .app-frame {
  width: 100%;
  max-width: var(--app-frame-max);
  /* Horizontal centering only. `margin: auto` (with the flex column + 100vh
     root) was vertically centering the frame, so on short pages the app floated
     in the middle of the viewport instead of sitting under the nav. */
  margin: 0 auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/*
 * The plugin's own .topbar was removed from both the search and detail views
 * (the WP theme provides the site nav). When a .topbar IS present it uses a
 * negative margin to pull under the reserved space, so only reserve that space
 * when a topbar actually exists.
 */
.atp-app .app-frame:has(> .topbar) {
  padding-top: var(--topbar-height);
}

.atp-app .app {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* --- Topbar --- */
.atp-app .topbar {
  position: sticky;
  top: 0;
  z-index: 1100;
  width: 100%;
  height: var(--topbar-height);
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--topbar-shadow);
  margin-top: calc(-1 * var(--topbar-height));
}

.atp-app .topbar-left,
.atp-app .topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.atp-app .topbar-right a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--motion-fast);
}

.atp-app .topbar-right a i {
  font-size: 1rem;
  color: var(--accent);
  line-height: 1;
}

.atp-app .topbar-right a:hover {
  color: var(--text);
}

.atp-app .icon-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
  display: grid;
  place-content: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color var(--motion-fast), background-color var(--motion-fast);
}

.atp-app .icon-btn span {
  display: block;
  width: 14px;
  height: 1.5px;
  background: var(--text);
}

.atp-app .icon-btn:hover {
  border-color: var(--line-strong);
  background: var(--panel-2);
}

.atp-app .brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.atp-app .brand-mark {
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 1.1rem;
}

.atp-app .brand-name {
  color: var(--text-soft);
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  font-weight: 700;
}

/* --- Layout --- */
.atp-app .layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
}

/*
 * The mobile sidebar backdrop is a full-screen overlay (fixed) shown only on
 * small screens. Without this base rule it defaults to display:block /
 * position:static and becomes a third grid child of .layout — stealing the 2nd
 * column and pushing .content onto a new row (the "broken, not on same row"
 * bug). Keep it out of the grid flow by default; the mobile media query
 * re-enables it on toggle.
 */
.atp-app .sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
}

.atp-app .sidebar {
  position: sticky;
  top: 120px; /* sit clear below the fixed theme nav pill */
  align-self: start;
  padding: var(--space-4);
  margin: var(--space-3);
  border: 1px solid #D9D8D8; /* solid border instead of a drop shadow */
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff, var(--panel-2));
  max-height: calc(100vh - 120px - var(--space-3));
  max-height: calc(100dvh - 120px - var(--space-3));
  overflow: auto;
}

/* A progress dropdown ("Select generation", make, model…) is absolutely
   positioned inside the sidebar, so the sidebar's own overflow:auto clips the
   floating menu. While a dropdown is open, stop clipping so the menu can extend
   past the sidebar edge (desktop only — the ≤981px sidebar is a scrollable modal
   that must keep its own overflow). */
@media (min-width: 982px) {
  .atp-app .sidebar:has(.progress-step.is-dropdown-open) {
    overflow: visible;
  }
}

.atp-app .sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.atp-app .sidebar-head h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.2;
}
.atp-app .sidebar-head__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Filter modal trigger + close button — shown only on small screens (the
   ≤981px media query flips them to inline-flex). */
.atp-app .atp-filterToggle {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-4);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--motion-fast),
    background-color var(--motion-fast);
}
.atp-app .atp-filterToggle:hover { border-color: var(--line-strong); }
.atp-app .atp-filterToggle i { font-size: 1.05rem; }
.atp-app .sidebar-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text-dim);
  font-size: 1.15rem;
  cursor: pointer;
  transition:
    color var(--motion-fast),
    border-color var(--motion-fast);
}
.atp-app .sidebar-close:hover { color: var(--text); border-color: var(--line-strong); }

/* Lock background scroll while the filter modal is open. */
body.atp-filter-open { overflow: hidden; }

/* Search lives in the main content column, above the "Current step" toolbar,
   so it reads as the primary entry point rather than a sidebar filter. */
.atp-app .content-search {
  margin-bottom: var(--space-5);
}

.atp-app .content-search .search-input {
  width: 100%;
  height: 54px;
  font-size: 0.9rem;
}

/* =========================================================================
   Page hero — heading + search + counter on the left, car art bleeding off
   the right. Two nested widths: the photo band may grow to 1860px (matching
   the theme's shop hero), the content stays in a 1440px column. Hidden on the
   result view via `.atp-app.is-result` (toggled from atp-search.js).
   ========================================================================= */
.atp-app .atp-hero {
  position: relative;
  width: 100%;
  background: transparent;
  /* No overflow:hidden and no z-index here — both would clip/trap the search
     autocomplete dropdown, which atp-suggest.js renders position:fixed so it
     escapes ancestor clipping and stacks at root level. The car bleed is
     clipped by .atp-hero__band instead. */
}
.atp-app.is-result .atp-hero { display: none; }

/* Photo band: centered, capped at 1860px, sitting behind the content. Clips the
   car art (and its mask) to the hero box without trapping the dropdown. */
.atp-app .atp-hero__band {
  position: absolute;
  inset: 0;
  max-width: 1860px;
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.atp-app .atp-hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 64%;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  /* The art is on a white field, so it dissolves into the hero background;
     a left fade guarantees a seamless hand-off to the text column. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
          mask-image: linear-gradient(to right, transparent 0, #000 22%);
}

/* Content column: capped at 1440px, padded to match the app frame. */
.atp-app .atp-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) 32px;
}
.atp-app .atp-hero__content {
  max-width: 640px;
}
/* Hero breadcrumb: matches the site-wide .woocommerce-breadcrumb (mono,
   uppercase, caption size) via the theme tokens, which are available here
   since the archive renders inside the theme shell. */
.atp-app .atp-hero__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption, 12px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.atp-app .atp-hero__crumb .ettBreadcrumb__item {
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--dur-base, 0.2s) ease;
}
.atp-app .atp-hero__crumb a.ettBreadcrumb__item:hover {
  color: var(--fg-1);
}
.atp-app .atp-hero__crumb .ettBreadcrumb__separator {
  color: var(--fg-3);
}
.atp-app .atp-hero__crumb .ettBreadcrumb__current {
  color: var(--fg-1);
}
.atp-app .atp-hero__title {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}
.atp-app .atp-hero__subtitle {
  margin: 10px 0 0;
  font-size: clamp(14px, 1.4vw, 15px);
  line-height: 1.5;
  color: var(--text-dim);
}
/* --- Hero intro "See more" toggle (mobile-only clamp; see @media 720px). ---
   Baseline/desktop: checkbox stays out of the layout but keyboard-reachable,
   the toggle label is hidden, and the paragraph shows in full. */
.atp-app .atp-hero__introwrap { display: contents; }
.atp-app .atp-hero__intro-toggle-cb {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
}
.atp-app .atp-hero__intro-toggle { display: none; }
.atp-app .atp-hero__intro-toggle-less { display: none; }
.atp-app .atp-hero__intro-ellipsis { display: none; }

/* Search field: icon left, orange submit right. */
.atp-app .atp-hero__search {
  position: relative;
  display: block;
  margin: clamp(8px, 1.2vw, 12px) 0 0;
  max-width: 560px;
}
.atp-app .atp-hero__search .search-input {
  width: 100%;
  height: 60px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0 132px 0 52px;
  font-size: 0.95rem;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}
.atp-app .atp-hero__search .search-input:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08), 0 0 0 3px var(--accent-soft);
}
.atp-app .atp-hero__search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 19px;
  color: var(--text-dim);
  pointer-events: none;
}
/* Submit pill — dark by default, orange wipe-in on hover. Mirrors the
   .news-hero-search__submit treatment so the Performance search reads as
   the same component family as the News / vehicles hero searches. */
.atp-app .atp-hero__search-submit {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  padding: 0 26px;
  border: 1px solid var(--rubber-black, #111827);
  border-radius: 999px;
  background: var(--rubber-black, #111827);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    color 220ms ease,
    border-color 280ms cubic-bezier(.32, .72, 0, 1),
    background-color 220ms;
}
.atp-app .atp-hero__search-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translate3d(-101%, 0, 0) skewX(-8deg);
  transform-origin: left center;
  transition: transform 540ms cubic-bezier(.32, .72, 0, 1);
  z-index: -1;
}
.atp-app .atp-hero__search-submit > * {
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: transform 540ms cubic-bezier(.32, .72, 0, 1);
}
.atp-app .atp-hero__search-submit:hover,
.atp-app .atp-hero__search-submit:focus-visible {
  color: #fff;
  background: transparent;
  border-color: var(--accent);
  outline: none;
}
.atp-app .atp-hero__search-submit:hover::before,
.atp-app .atp-hero__search-submit:focus-visible::before {
  transform: translate3d(0, 0, 0) skewX(0deg);
}
.atp-app .atp-hero__search-submit:hover > *,
.atp-app .atp-hero__search-submit:focus-visible > * {
  transform: translate3d(3px, 0, 0);
}

/* Reassurance counter under the field. */
.atp-app .atp-hero__count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--text-dim);
}
.atp-app .atp-hero__count strong { color: var(--accent); font-weight: 700; }
.atp-app .atp-hero__count-icon { font-size: 15px; color: var(--accent); }

/* Proof chips — small, discreet capability tags (cable, tool, remap types). */
.atp-app .atp-hero__features {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 560px;
}
.atp-app .atp-hero__feature {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Tablet / mobile: drop the car (it would sit under the text) and go fluid. */
@media (max-width: 860px) {
  .atp-app .atp-hero:not(.atp-hero--shaped) .atp-hero__photo { display: block; right: -290px; bottom: 0; width: 74%;}
  .atp-app .atp-hero:not(.atp-hero--shaped) .atp-hero__content,
  .atp-app .atp-hero:not(.atp-hero--shaped) .atp-hero__search { max-width: none; }
}

/* =========================================================================
   SHAPED HERO (atp-hero--shaped) — the site-wide av-hero-shape: a dark, clipped
   panel (rounded corners + bottom-right badge notch, same as /vehicles/ ·
   /cart/ · /checkout/) holding the black hero photo, with left-aligned content
   overlaid and a glassy search. A Make / REGO toggle sits above the search.
   Scoped so the rest of the (light) app is untouched.
   ===================================================================== */
.atp-app .atp-hero--shaped { padding: clamp(10px, 1.4vw, 16px) 16px 0; }
.atp-app .atp-hero--shaped .atp-hero__shape {
  position: relative;
  max-width: 1860px;
  margin: 0 auto;
  /* NO background here — it would paint a solid rounded rect over the clip-path
     cut-aways (rounded corners + badge notch) and hide the shape. The clipped
     .av-hero-photo is the only visible surface; cut-away areas show the page. */
  background: transparent;
  min-height: clamp(400px, 33vw, 520px);
  /* Self-revealing via a pure-CSS entrance animation (config-proof: NO JS needed,
     so WP Rocket delay-JS can never leave the hero blank). animation-fill-mode:both
     holds the final visible state (opacity:1) even before/without any script. The
     .is-revealed rule below is now redundant but kept so atp-hero-clip.js adding the
     class stays harmless; the clip-path shaping in that JS is unaffected. */
  animation: atpHeroReveal 620ms cubic-bezier(.32, .72, 0, 1) both;
  transform-origin: center;
}
.atp-app .atp-hero--shaped .atp-hero__shape.is-revealed { opacity: 1; transform: none; }
@media (scripting: none) { .atp-app .atp-hero--shaped .atp-hero__shape { opacity: 1; transform: none; } }
@keyframes atpHeroReveal { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .atp-app .atp-hero--shaped .atp-hero__shape { animation: none; opacity: 1; transform: none; } }

/* Photo: full-bleed behind the content, clipped by the adaptive SVG path; a CSS
   rounded-rect is the no-JS / pre-build fallback. The darkening gradient is set
   inline so the white text stays legible over the orange light streaks. The old
   light-hero __photo rules are overridden here (this element carries both
   av-hero-photo and atp-hero__photo). */
.atp-app .atp-hero--shaped .av-hero-photo {
  position: absolute;
  inset: 0;
  width: auto;
  background-color: #000;
  /* Full-bleed hero background: the marketing theme's platform-vehicles photo
     under a 62% black overlay (layer 1, on top) so the white hero text stays
     legible. Root-relative URL so it resolves on any domain; the image lives in
     the alttune-marketing theme, not this plugin. */
  background-image:
    linear-gradient(rgba(5, 5, 5, .62), rgba(5, 5, 5, .62)),
    url(/wp-content/themes/alttune-marketing/assets/img/photos/platform-vehicles.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-mask-image: none;
          mask-image: none;
  border-radius: 24px;
  clip-path: url(#atp-hero-clip);
  -webkit-clip-path: url(#atp-hero-clip);
}
.atp-app .atp-hero--shaped .av-hero-svg { position: absolute; width: 0; height: 0; pointer-events: none; }

/* Bottom-right badge that seats in the notch. */
.atp-app .atp-hero--shaped .atp-hero__badge {
  position: absolute;
  right: 0.11%;
  bottom: 0;
  width: 5.16%;
  min-width: 58px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0c;
  color: #fff;
  border-radius: 20px;
}
/* Badge entrance: pure-CSS time-based animation with `both` fill — always ends
   visible without atp-hero-clip.js / .is-revealed. Visible by default; the
   hidden state only exists inside the animation, motion-guarded. */
@media screen and (prefers-reduced-motion: no-preference) {
  .atp-app .atp-hero--shaped .atp-hero__badge {
    animation: atpBadgeIn 480ms cubic-bezier(.32, .72, 0, 1) 0.55s both;
  }
}
@keyframes atpBadgeIn {
  from { opacity: 0; transform: translate(8px, 8px) scale(0.7); }
  to   { opacity: 1; transform: none; }
}
.atp-app .atp-hero--shaped .atp-hero__badge i { font-size: clamp(22px, 2.3vw, 34px); line-height: 1; }

/* Content overlaid on the photo (kept LEFT-aligned per the existing composition). */
.atp-app .atp-hero--shaped .atp-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  /* Extra TOP padding so the breadcrumb clears the fixed nav that now overlaps
     the hero (~94px); generous bottom + sides. */
  padding: clamp(104px, 10vw, 148px) clamp(28px, 4vw, 64px) clamp(40px, 5vw, 64px);
}
.atp-app .atp-hero--shaped .atp-hero__content { max-width: 680px; }
.atp-app .atp-hero--shaped .atp-hero__title { color: #fff; }
.atp-app .atp-hero--shaped .atp-hero__subtitle { color: rgba(255, 255, 255, 0.66); }
.atp-app .atp-hero--shaped .atp-hero__crumb { color: rgba(255, 255, 255, 0.5); }
.atp-app .atp-hero--shaped .atp-hero__crumb .ettBreadcrumb__item { color: rgba(255, 255, 255, 0.82); }
.atp-app .atp-hero--shaped .atp-hero__crumb a.ettBreadcrumb__item:hover { color: #fff; }
.atp-app .atp-hero--shaped .atp-hero__crumb .ettBreadcrumb__separator { color: rgba(255, 255, 255, 0.4); }
.atp-app .atp-hero--shaped .atp-hero__crumb .ettBreadcrumb__current { color: #fff; }
.atp-app .atp-hero--shaped .atp-hero__count { color: rgba(255, 255, 255, 0.62); }
.atp-app .atp-hero--shaped .atp-hero__feature { color: rgba(255, 255, 255, 0.62); border-color: rgba(255, 255, 255, 0.16); }

/* Mode toggle (Search by vehicle / Search by REGO). */
.atp-app .atp-hero--shaped .atp-hero__modes {
  position: relative;
  display: inline-flex;
  gap: 4px;
  margin: clamp(16px, 2vw, 22px) 0 12px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}
/* Sliding active indicator: a white pill that glides + resizes from one tab to
   the next (positioned by atp-rego.js via getBoundingClientRect). */
.atp-app .atp-hero--shaped .atp-hero__modeGlide {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  background: #fff;
  border-radius: 999px;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), width 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}
.atp-app .atp-hero--shaped .atp-hero__mode {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--motion-fast, 0.18s);
}
.atp-app .atp-hero--shaped .atp-hero__mode i { font-size: 15px; }
.atp-app .atp-hero--shaped .atp-hero__mode:hover { color: #fff; }
.atp-app .atp-hero--shaped .atp-hero__mode.is-active { color: #111; }

/* Glassy search field on the dark panel. */
.atp-app .atp-hero--shaped .atp-hero__search .search-input,
.atp-app .atp-hero--shaped .atp-hero__rego-input {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: none;
}
.atp-app .atp-hero--shaped .atp-hero__search .search-input::placeholder,
.atp-app .atp-hero--shaped .atp-hero__rego-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.atp-app .atp-hero--shaped .atp-hero__search .search-input:focus {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
  outline: none;
}
.atp-app .atp-hero--shaped .atp-hero__search-icon { color: rgba(255, 255, 255, 0.55); }
.atp-app .atp-hero--shaped .atp-hero__search-submit {
  background: #fff;
  border-color: #fff;
  color: #111;
}
/* Orange wipe revealed on hover (the old white .18 sweep was invisible on the
   orange button). Kept inside the button by its own overflow:hidden + the
   positioning fix on .atp-hero__rego-submit below. */
.atp-app .atp-hero--shaped .atp-hero__search-submit::before { background: var(--accent, #ff6a1f); }
.atp-app .atp-hero--shaped .atp-hero__search-submit:hover,
.atp-app .atp-hero--shaped .atp-hero__search-submit:focus-visible {
  background: transparent;
  border-color: var(--accent, #ff6a1f);
  color: #fff;
}

/* REGO pane. */
.atp-app .atp-hero--shaped .atp-hero__rego { max-width: 720px; margin: clamp(8px, 1.2vw, 12px) 0 0; }
.atp-app .atp-hero--shaped .atp-hero__rego-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.atp-app .atp-hero--shaped .atp-hero__regofield { position: relative; flex: 1 1 220px; display: flex; align-items: center; }
/* Desktop: keep plate + country (+ state) + Look up on ONE row. The plate field
   shrinks (min-width:0) so the submit never wraps to its own line. */
@media (min-width: 768px) {
  .atp-app .atp-hero--shaped .atp-hero__rego-row { flex-wrap: nowrap; }
  .atp-app .atp-hero--shaped .atp-hero__regofield { flex: 0 1 230px; min-width: 0; }
  .atp-app .atp-hero--shaped .atp-hero__rego-submit { flex: 0 0 auto; white-space: nowrap; }
}
.atp-app .atp-hero--shaped .atp-hero__regofield .atp-hero__search-icon { left: 18px; color: rgba(255, 255, 255, 0.55); }
/* Plate field — glassy translucent pill, white text (mirrors the alttune-vehicles
   av-search-hero --in-hero pill). Finer than before (52 vs 60), white focus ring
   instead of the heavy orange glow. */
.atp-app .atp-hero--shaped .atp-hero__rego-input {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  padding: 0 16px 0 38px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
/* Small vertical "REGO" tab on the left, like the side strip of a number plate. */
.atp-app .atp-hero--shaped .atp-hero__rego-tag {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px 0 0 8px;
  background: rgba(255, 255, 255, 0.10);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
}
.atp-app .atp-hero--shaped .atp-hero__rego-tag span {
  transform: rotate(-90deg);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.atp-app .atp-hero--shaped .atp-hero__rego-input::placeholder { letter-spacing: 0; text-transform: none; font-size: 0.8rem; font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.atp-app .atp-hero--shaped .atp-hero__rego-input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  outline: none;
}
/* Country / state — same glass pill, finer. */
.atp-app .atp-hero--shaped .atp-hero__rego-select {
  height: 52px;
  flex: 0 0 auto;
  min-width: 124px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 0 38px 0 18px;
  font-family: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.55) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.55) 50%, transparent 50%);
  background-position: calc(100% - 20px) 23px, calc(100% - 14px) 23px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
.atp-app .atp-hero--shaped .atp-hero__rego-select:focus {
  border-color: rgba(255, 255, 255, 0.45);
  outline: none;
}
.atp-app .atp-hero--shaped .atp-hero__rego-select option { color: #111; }
/* Look up — solid white pill (av-search-hero --in-hero submit): white -> grey on
   hover, NO orange wipe. Override the shared shaped-submit accent treatment. */
.atp-app .atp-hero--shaped .atp-hero__rego-submit {
  /* `relative` (was `static`) so the layout stays in the flex row; no ::before
     to contain here since the orange wipe is disabled below. */
  position: relative;
  transform: none;
  right: auto;
  top: auto;
  height: 52px;
  flex: 0 0 auto;
  background: #fff;
  border-color: #fff;
  color: #111827;
}
.atp-app .atp-hero--shaped .atp-hero__rego-submit::before { content: none; }
.atp-app .atp-hero--shaped .atp-hero__rego-submit:hover,
.atp-app .atp-hero--shaped .atp-hero__rego-submit:focus-visible {
  background: #d9d8d8;
  border-color: #d9d8d8;
  color: #111827;
}
.atp-app .atp-hero--shaped .atp-hero__rego-msg { margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.62); }
.atp-app .atp-hero--shaped .atp-hero__rego-msg.is-error { color: #ff9b80; }

/* Country / state custom dropdowns — glass pill trigger (matches the rego
   inputs) + the site's progress-step-dropdown white menu. The native <select>
   stays as the hidden value source (atp-rego.js reads it + its change event). */
.atp-app .atp-hero--shaped .atp-rego-dd { position: relative; flex: 0 0 auto; min-width: 124px; }
.atp-app .atp-hero--shaped .atp-rego-dd__native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  opacity: 0; pointer-events: none;
}
.atp-app .atp-hero--shaped .atp-rego-dd__trigger {
  width: 100%; height: 52px; display: flex; align-items: center; gap: 8px;
  padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-family: inherit; font-size: 0.92rem; font-weight: 600;
  cursor: pointer; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  transition: border-color 0.15s, background 0.15s;
}
.atp-app .atp-hero--shaped .atp-rego-dd__trigger:hover { border-color: rgba(255, 255, 255, 0.3); }
.atp-app .atp-hero--shaped .atp-rego-dd__trigger:focus-visible {
  outline: none; border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.atp-app .atp-hero--shaped .atp-rego-dd.is-open .atp-rego-dd__trigger {
  border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.12);
}
.atp-app .atp-hero--shaped .atp-rego-dd__text {
  flex: 1 1 auto; min-width: 0; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atp-app .atp-hero--shaped .atp-rego-dd__text.is-placeholder { color: rgba(255, 255, 255, 0.55); }
.atp-app .atp-hero--shaped .atp-rego-dd__icon {
  flex: 0 0 auto; width: 8px; height: 8px; margin-left: 2px;
  border-right: 2px solid rgba(255, 255, 255, 0.7);
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
  transform: rotate(45deg) translateY(-2px); transition: transform 0.15s;
}
.atp-app .atp-hero--shaped .atp-rego-dd.is-open .atp-rego-dd__icon {
  transform: rotate(-135deg) translateY(2px);
}
/* The menu reuses .progress-step-dropdown-menu (white card). Left-anchor +
   readable min width (the trigger can be narrow). */
.atp-app .atp-hero--shaped .atp-rego-dd__menu { right: auto; min-width: 200px; }
.atp-app .atp-hero--shaped .atp-rego-dd__menu .progress-step-dropdown-option { font-size: 0.86rem; }
.atp-app .atp-hero--shaped .atp-rego-dd__menu .progress-step-dropdown-option.is-selected {
  background: var(--accent-soft); color: var(--text);
}

/* Mobile: rounded-rect fallback (no notch), hide badge, fluid content. */
@media (max-width: 720px) {
  .atp-app .atp-hero--shaped .atp-hero__shape { min-height: 0; }
  .atp-app .atp-hero--shaped .av-hero-photo {
    clip-path: inset(0 round 20px) !important;
    -webkit-clip-path: inset(0 round 20px) !important;
  }
  .atp-app .atp-hero--shaped .atp-hero__badge { display: none; }
  .atp-app .atp-hero--shaped .atp-hero__inner { padding: 80px 20px 30px 20px; }
  .atp-app .atp-hero--shaped .atp-hero__content { max-width: none; }
  .atp-app .atp-hero--shaped .atp-hero__rego-row { flex-direction: column; align-items: stretch; }
  /* Mobile: the row is a COLUMN here, so the base `flex: 1 1 220px` on the
     plate wrapper becomes a 220px MAIN-AXIS (height) basis + grow -> a huge
     empty field. Reset to content height, full width. */
  .atp-app .atp-hero--shaped .atp-hero__regofield { flex: 0 0 auto; width: 100%; }
  .atp-app .atp-hero--shaped .atp-hero__rego-select,
  .atp-app .atp-hero--shaped .atp-rego-dd,
  .atp-app .atp-hero--shaped .atp-rego-dd__menu,
  .atp-app .atp-hero--shaped .atp-hero__rego-submit { width: 100%; }

  /* ---- Mobile hero text fixes (target ~384px, e.g. Samsung S21 Ultra) ---- */

  /* Fix 3: "Power Increase Search" heading — shrink so it stays on ONE line. */
  .atp-app .atp-hero--shaped .atp-hero__title {
    font-size: 22px;
    white-space: nowrap;
  }

  /* Fix 1: mode toggle labels — smaller type + tighter spacing so each of
     "Search by vehicle" / "Search by REGO" fits on ONE line, and the two
     pills share the row. */
  .atp-app .atp-hero--shaped .atp-hero__modes {
    display: flex;
    width: 100%;
    gap: 3px;
  }
  .atp-app .atp-hero--shaped .atp-hero__mode {
    flex: 1 1 0;
    justify-content: center;
    gap: 5px;
    padding: 8px 8px;
    font-size: 11.5px;
    white-space: nowrap;
  }
  .atp-app .atp-hero--shaped .atp-hero__mode i { font-size: 13px; }

  /* Fix 2 (v2): intro cropped to a head + inline "... See more". Collapsed shows
     head + ellipsis + toggle inline; the no-JS checkbox reveals the rest inline
     and swaps the label to "See less". */
  .atp-app .atp-hero--shaped .atp-hero__intro-rest { display: none; }
  .atp-app .atp-hero--shaped .atp-hero__intro-ellipsis { display: inline; }
  .atp-app .atp-hero--shaped .atp-hero__intro-toggle {
    display: inline;
    margin: 0 0 0 0.4em;
    padding: 0;
    background: transparent;
    border: 0;
    color: #fff;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: nowrap;
  }
  /* The checkbox is now a LEADING SIBLING of .atp-hero__introwrap (it was moved
     out of introwrap so one `:checked ~ …` also reaches features/count below).
     The subtitle lives INSIDE introwrap, so these reach it via the sibling
     introwrap wrapper (`:checked ~ .atp-hero__introwrap .atp-hero__subtitle …`). */
  .atp-app .atp-hero--shaped .atp-hero__intro-toggle-cb:checked ~ .atp-hero__introwrap .atp-hero__subtitle .atp-hero__intro-rest { display: inline; animation: atpIntroReveal 360ms cubic-bezier(.32,.72,0,1) both; }
  .atp-app .atp-hero--shaped .atp-hero__intro-toggle-cb:checked ~ .atp-hero__introwrap .atp-hero__subtitle .atp-hero__intro-ellipsis { display: none; }
  .atp-app .atp-hero--shaped .atp-hero__intro-toggle-cb:focus-visible ~ .atp-hero__introwrap .atp-hero__subtitle .atp-hero__intro-toggle {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 4px;
  }
  .atp-app .atp-hero--shaped .atp-hero__intro-toggle-cb:checked ~ .atp-hero__introwrap .atp-hero__subtitle .atp-hero__intro-toggle .atp-hero__intro-toggle-more { display: none; }
  .atp-app .atp-hero--shaped .atp-hero__intro-toggle-cb:checked ~ .atp-hero__introwrap .atp-hero__subtitle .atp-hero__intro-toggle .atp-hero__intro-toggle-less { display: inline; }

  /* ---- CHANGE 1: mobile diagonal black overlay over the animated background --
     Sits ABOVE the photo + trails canvas (both inside .av-hero-photo's stacking
     context: photo bg is the ::after target's own element, the trails <canvas>
     is a child at z-index:0) but BELOW the hero content (.atp-hero__inner is
     position:relative; z-index:2). We paint it as .av-hero-photo::after with
     z-index:1 so it layers above the trails yet stays within the photo's
     clip-path (rounded-rect on mobile) and never covers the text/search
     (pointer-events:none, and the whole photo subtree is under inner's z:2).
     Black 50% bottom-right -> fully transparent top-left. */
  .atp-app .atp-hero--shaped .av-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }

  /* ---- CHANGE 2: fold .atp-hero__features + .atp-hero__count into the intro
     "See more" collapse (mobile only). Collapsed by default; the SAME
     .atp-hero__intro-toggle-cb checkbox reveals them (it is a leading sibling of
     both). Desktop is untouched (this is inside @media max-width:720px). A small
     fade + upward slide entrance, with the count staggered after the pills. */
  .atp-app .atp-hero--shaped .atp-hero__features { display: none; }
  .atp-app .atp-hero--shaped .atp-hero__count { display: none; }
  .atp-app .atp-hero--shaped .atp-hero__intro-toggle-cb:checked ~ .atp-hero__features {
    display: flex;
    animation: atpHeroMoreReveal 420ms cubic-bezier(.32, .72, 0, 1) both;
  }
  .atp-app .atp-hero--shaped .atp-hero__intro-toggle-cb:checked ~ .atp-hero__count {
    display: inline-flex;
    animation: atpHeroMoreReveal 420ms cubic-bezier(.32, .72, 0, 1) both;
    animation-delay: 90ms;
  }
}

.atp-app .sidebar .check-list,
.atp-app .sidebar .progress-list {
  gap: 2px;
}

.atp-app .sidebar .check-row {
  min-height: 34px;
  gap: var(--space-2);
}

.atp-app .sidebar .progress-step {
  padding: 8px 0;
}

.atp-app .sidebar .progress-step-dropdown {
  margin-top: 6px;
}

.atp-app .sidebar .filter-group-head h3 {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
}

.atp-app .text-btn {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  cursor: pointer;
  padding: 0;
  transition: color var(--motion-fast);
}

.atp-app .text-btn:hover {
  color: var(--text);
}

.atp-app .filter-group + .filter-group {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.atp-app .filter-group-head {
  margin-bottom: var(--space-1);
}

.atp-app .filter-group-head h3 {
  margin: 0;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
}

.atp-app .field-stack,
.atp-app .check-list,
.atp-app .progress-list {
  display: grid;
  gap: var(--space-1);
  position: relative;
  isolation: auto;
  overflow: visible;
}

/* --- Progress steps + dropdown --- */
.atp-app .progress-step {
  position: relative;
  padding: 12px 0;
  display: grid;
  gap: 0;
  opacity: 0.62;
  z-index: 1;
  border-radius: 0;
  background: transparent !important;
  border-color: transparent;
  transform: translateZ(0);
  backface-visibility: hidden;
  border: 1px solid transparent;
  color: var(--text-soft);
  text-align: left;
  transition:
    border-color var(--motion-fast),
    background-color var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-fast);
}

.atp-app .progress-step-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 700;
}

.atp-app .progress-step.is-current {
  opacity: 1;
  z-index: 140;
}

.atp-app .progress-step.is-dropdown-open {
  z-index: 160;
  isolation: isolate;
}

.atp-app .progress-step.is-dropdown-open:not(.is-current) {
  opacity: 1;
}

.atp-app .progress-step.is-leaving-current {
  transform-origin: top center;
  will-change: transform, opacity;
  animation: atp-progress-step-collapse 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.atp-app .progress-step.is-entering-current {
  transform-origin: top center;
  will-change: transform, opacity;
  animation: atp-progress-step-grow 360ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.atp-app .progress-step.is-entering-current .progress-step-dropdown {
  will-change: transform, opacity;
  animation: atp-progress-dropdown-settle 360ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.atp-app .progress-step-dropdown {
  position: relative;
  width: 100%;
  margin-top: 8px;
  z-index: 30;
}

.atp-app .progress-step-dropdown-trigger-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius-sm);
  isolation: isolate;
  overflow: hidden;
}

@property --atp-spark-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes atp-spark-ring-orbit {
  to {
    --atp-spark-angle: 360deg;
  }
}

.atp-app .progress-step-dropdown-trigger {
  --trigger-base-border: rgba(15, 23, 42, 0.08);
  --trigger-hover-border: rgba(15, 23, 42, 0.14);
  width: 100%;
  min-height: 46px;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 11px 42px 11px 14px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--motion-fast),
    background-color var(--motion-fast);
}

.atp-app .progress-step-dropdown-trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #ffffff;
  border: 1px solid var(--trigger-base-border);
  z-index: 0;
  transition:
    border-color var(--motion-fast),
    background-color var(--motion-fast),
    box-shadow var(--motion-fast);
}

.atp-app .progress-step.is-current .progress-step-dropdown-trigger::after {
  content: none;
}

.atp-app .trigger-spark {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    conic-gradient(
      from var(--atp-spark-angle),
      transparent 0deg 320deg,
      rgba(242, 105, 33, 0.04) 328deg,
      rgba(242, 105, 33, 0.22) 338deg,
      rgba(244, 138, 77, 0.96) 348deg,
      rgba(242, 105, 33, 1) 353deg,
      rgba(242, 105, 33, 0.2) 357deg,
      transparent 360deg
    );
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
  z-index: 2;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 4px rgba(242, 105, 33, 0.18));
  transition:
    opacity 220ms ease,
    filter 220ms ease;
}

.atp-app .progress-step.is-current .progress-step-dropdown-trigger::before {
  border-color: rgba(242, 105, 33, 0.18);
}

.atp-app .progress-step.is-current .trigger-spark {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(242, 105, 33, 0.18));
  animation: atp-spark-ring-orbit 3.6s linear infinite;
}

.atp-app .progress-step-dropdown-text,
.atp-app .progress-step-dropdown-icon {
  position: relative;
  z-index: 2;
}

.atp-app .progress-step-dropdown-trigger:hover::before {
  border-color: var(--trigger-hover-border);
  background-color: #f8fafc;
}

.atp-app .progress-step-dropdown-trigger:focus {
  outline: none;
}

.atp-app .progress-step-dropdown-trigger:active::before {
  background-color: var(--panel-2);
  box-shadow: none;
}

.atp-app .progress-step-dropdown-trigger:focus-visible::before {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.atp-app .progress-step.is-current .progress-step-dropdown-trigger-wrap:hover .trigger-spark,
.atp-app .progress-step.is-current .progress-step-dropdown-trigger-wrap:focus-within .trigger-spark,
.atp-app .progress-step.is-current .progress-step-dropdown.is-open .trigger-spark {
  opacity: 0;
  filter: drop-shadow(0 0 0 rgba(242, 105, 33, 0));
}

.atp-app .progress-step-dropdown-text {
  display: block;
  width: 100%;
  font-size: 0.78rem;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  word-break: break-word;
  padding-right: 6px;
}

.atp-app .progress-step-dropdown-text.is-placeholder {
  color: var(--text-dim);
}

.atp-app .progress-step-dropdown-icon {
  position: absolute;
  top: 19px;
  right: 16px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-dim);
  border-bottom: 2px solid var(--text-dim);
  transform: rotate(45deg);
  pointer-events: none;
  transition: transform var(--motion-fast), border-color var(--motion-fast);
}

.atp-app .progress-step-dropdown.is-open .progress-step-dropdown-icon {
  transform: rotate(-135deg);
  top: 23px;
}

.atp-app .progress-step-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.14);
  z-index: 200;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transform-origin: top center;
  will-change: transform, opacity;
  animation: atp-dropdown-bloom 320ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

/* Type-search inside each progress dropdown (Kit-Builder style). The menu
   scrolls (e.g. 161 makes) with the search field pinned at the top. */
.atp-app .progress-step-dropdown-menu {
  max-height: 320px;
  overflow-y: auto;
}
.atp-app .progress-step-dropdown-search {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: -8px -8px 2px;
  padding: 8px 8px 6px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}
.atp-app .progress-step-dropdown-search-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.78rem;
  color: var(--text);
  background: var(--panel-2);
}
.atp-app .progress-step-dropdown-search-input:focus {
  outline: none;
  border-color: var(--accent);
  background: #ffffff;
}
.atp-app .progress-step-dropdown-empty {
  padding: 10px 12px;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.atp-app .progress-step-dropdown-option {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-soft);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 10px;
  transition:
    border-color var(--motion-fast),
    background-color var(--motion-fast),
    color var(--motion-fast);
  opacity: 0;
  animation: atp-dropdown-item-in 240ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.atp-app .progress-step-dropdown-option-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: currentColor;
  display: inline-grid;
  place-items: center;
}

.atp-app .progress-step-dropdown-option-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.atp-app .progress-step-dropdown-option-label {
  min-width: 0;
}

.atp-app .progress-step-dropdown-option:nth-child(1) { animation-delay: 30ms; }
.atp-app .progress-step-dropdown-option:nth-child(2) { animation-delay: 55ms; }
.atp-app .progress-step-dropdown-option:nth-child(3) { animation-delay: 80ms; }
.atp-app .progress-step-dropdown-option:nth-child(4) { animation-delay: 105ms; }
.atp-app .progress-step-dropdown-option:nth-child(5) { animation-delay: 130ms; }
.atp-app .progress-step-dropdown-option:nth-child(6) { animation-delay: 155ms; }
.atp-app .progress-step-dropdown-option:nth-child(7) { animation-delay: 180ms; }
.atp-app .progress-step-dropdown-option:nth-child(8) { animation-delay: 205ms; }

.atp-app .progress-step-dropdown-option:hover {
  background: #f8fafc;
  color: var(--text);
}

.atp-app .progress-step-dropdown-option.is-selected {
  border-color: var(--accent-strong);
  background: rgba(242, 105, 33, 0.1);
  color: var(--text);
}

.atp-app .progress-step.is-complete {
  background: rgba(15, 23, 42, 0.02) !important;
  opacity: 0.86;
  border: none;
}

.atp-app .progress-step.is-complete.is-dropdown-open {
  opacity: 1;
}

/* --- Fields / search input --- */
.atp-app .search-input {
  height: 44px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  font-size: 0.78rem;
  width: 100%;
  transition:
    border-color var(--motion-fast),
    background-color var(--motion-fast),
    box-shadow var(--motion-fast),
    opacity var(--motion-fast);
}

.atp-app .search-input:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- Check rows --- */
.atp-app .check-row {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-soft);
  cursor: pointer;
}

.atp-app .check-row input {
  accent-color: var(--accent);
}

.atp-app .check-row span {
  transition: color var(--motion-fast);
}

.atp-app .check-row.is-disabled {
  cursor: default;
}

.atp-app .check-row.is-disabled input {
  pointer-events: none;
}

.atp-app .check-row.is-disabled span {
  color: var(--text);
}

.atp-app .check-row input:checked + span {
  color: var(--text);
}

/* --- Content --- */
.atp-app .content {
  padding: var(--space-6);
}

.atp-app .content-toolbar {
  margin-bottom: var(--space-4);
}

/* Condensed cascade header (the #content-toolbar that also carries .result-hero):
   no card chrome (border/background/padding), just tight, flat header text. */
.atp-app .content-toolbar.result-hero {
  gap: var(--space-4);
  align-items: center;
}
.atp-app .content-toolbar.result-hero > div:first-child { gap: 4px; }
.atp-app .content-toolbar h2 { font-size: 1.25rem; }
.atp-app .content-toolbar .selection-kicker { font-size: 0.62rem; letter-spacing: 0.1em; }
.atp-app .content-toolbar p { font-size: 0.85rem; line-height: 1.45; }
.atp-app .content-toolbar .selection-steps { margin-top: var(--space-2); }

.atp-app .content-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-shrink: 0;
}

.atp-app .selection-stage,
.atp-app .result-view {
  display: grid;
  gap: var(--space-5);
}

.atp-app .result-hero > div:first-child {
  display: grid;
  gap: 10px;
  flex: 1;
}

.atp-app .result-hero > div:first-child > * {
  animation: atp-soft-pop var(--motion-enter) both;
}

.atp-app .result-hero > div:first-child > *:nth-child(2) {
  animation-delay: 20ms;
}

.atp-app .result-hero > div:first-child > *:nth-child(3) {
  animation-delay: 40ms;
}

.atp-app .selection-kicker {
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 700;
}

.atp-app .content-toolbar h2,
.atp-app .result-hero h2 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: -0.04em;
}

.atp-app .content-toolbar p,
.atp-app .result-hero p {
  margin: 0;
  color: var(--text-dim);
  max-width: 760px;
  line-height: 1.6;
}

/* --- Cards --- */
.atp-app .card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.atp-app .selection-grid {
  align-items: stretch;
}

/*
 * Make / model / generation cards are compact, so they pack denser (4-5+ cols)
 * than the big vehicle-type tiles. auto-fill with a ~180px min track yields ~5
 * columns on a desktop content area (~1145px) and reflows down on narrow ones.
 */
.atp-app .selection-grid:has(.selection-card-make),
.atp-app .selection-grid:has(.selection-card-model) {
  /* auto-fit (not -fill): when there are only a few results the cards stretch to
     use the available width instead of staying narrow with empty columns. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

/* Vehicle-type tiles stay at a roomy 3-per-row. */
.atp-app .selection-grid:has(.selection-card-type) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.atp-app .selection-card {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 240px;
  padding: var(--space-5);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  cursor: pointer;
  animation: atp-soft-pop var(--motion-enter) both;
  animation-delay: var(--stagger, 0ms);
  transform-origin: center bottom;
  transition:
    transform var(--motion-fast),
    border-color var(--motion-fast),
    background-color var(--motion-fast),
    box-shadow var(--motion-fast);
}

.atp-app .selection-card:hover {
  transform: translateY(-1px);
  background: var(--panel-2);
  color: var(--text);
}

.atp-app .selection-card-make,
.atp-app .selection-card-type {
  min-height: 188px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.atp-app .selection-card-model {
  min-height: 104px;
  grid-template-rows: 1fr;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

/* Model card with a vehicle illustration: full-bleed photo banner on top, the
   name + meta below. The card lifts and the photo zooms on hover (matches the
   "most popular" swiper for a consistent, delightful feel). */
.atp-app .selection-card-model--hasImage {
  grid-template-rows: auto 1fr;
  align-items: stretch;
  align-content: start;
  gap: 0;
  padding: 0;
}
.atp-app .selection-card-modelThumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--line);
}
.atp-app .selection-card-modelThumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.18, 1);
}
.atp-app .selection-card-model--hasImage .selection-card-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.atp-app .selection-card-model--hasImage:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px -10px rgba(17, 24, 39, 0.28);
  border-color: var(--accent);
}
.atp-app .selection-card-model--hasImage:hover .selection-card-modelThumb img {
  transform: scale(1.07);
}
@media (prefers-reduced-motion: reduce) {
  .atp-app .selection-card-modelThumb img { transition: none; }
  .atp-app .selection-card-model--hasImage:hover { transform: none; }
}

/* Hide the model illustration thumbnails in the NORMAL cascade listing
   (#selection-grid) only. The "Most popular" swiper uses its own
   .atp-brand-content__modelThumb (a different class, outside #selection-grid),
   so it keeps its images. With the banner gone, revert the model card to the
   plain (no-image) layout so it doesn't leave an empty top row. */
.atp-app #selection-grid .selection-card-modelThumb { display: none; }
.atp-app #selection-grid .selection-card-model--hasImage {
  grid-template-rows: 1fr;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}
.atp-app #selection-grid .selection-card-model--hasImage .selection-card-body {
  padding: 0;
}

/* Search-result cards size to their content — the base 240px min-height made
   them absurdly tall with big empty gaps. (Overrides atp-suggest.css, which the
   base rule was beating on cascade order.) */
.atp-app .selection-card-result { min-height: 0; }

/* Generation-less engine card (shown at the generation step): icon + engine. */
.atp-app .selection-card-engine {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
}
.atp-app .selection-card-engineIcon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: #f7f8f8;
  color: #414141;
  position: absolute;
  border: 3px solid #f5f5f5;
  top: -3px;
  right: -3px;
}
.atp-app .selection-card-engineIcon svg { width: 20px; height: 20px; }
.atp-app .selection-card-engine .selection-card-body { gap: 3px; min-width: 0; }
/* Power-only engine card hierarchy: HP headline (prominent) + a discreet
   "90 kW · 300 Nm" sub-line, instead of one crammed "122hp (90kw) 300nm" blob. */
.atp-app .selection-card-engine .selection-card-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.atp-app .selection-card-engineSpec {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Discreet meta line under the model name: variant count + best gain. */
.atp-app .selection-card-modelMeta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.atp-app .selection-card-modelMeta .selection-card-gain {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.atp-app .make-logo-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
}

.atp-app .make-logo {
  max-width: 120px;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.atp-app .vehicle-type-image {
  width: 100%;
  max-width: 132px;
  height: 72px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
}

.atp-app .make-logo-fallback {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-soft);
}

.atp-app .vehicle-type-logo {
  width: 84px;
  height: 72px;
  display: grid;
  place-items: center;
  color: var(--text);
}

.atp-app .vehicle-type-logo svg {
  width: 38px;
  height: 38px;
  /* The canonical AltTune type icons are fill-based (fill="currentColor"); the
     generic fallback glyph carries its own inline stroke. Let each SVG's own
     paint attributes decide so neither gets a spurious outline. */
}

/* "All vehicles" tile: the five type icons clustered together, in black. */
.atp-app .vehicle-type-logo--all {
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text);
}
.atp-app .vehicle-type-logo--all svg { width: 26px; height: 26px; }

.atp-app .vehicle-type-logo-label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

.atp-app .selection-card.is-active {
  border-color: var(--accent-strong);
  box-shadow:
    inset 0 0 0 1px rgba(242, 105, 33, 0.08),
    0 0 0 1px rgba(242, 105, 33, 0.03);
  color: var(--text);
}

.atp-app .selection-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 1.25rem;
}

.atp-app .selection-card-body {
  display: grid;
  gap: 12px;
  align-content: start;
}

.atp-app .selection-card-body h3 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.atp-app .selection-card-body p {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.55;
}

.atp-app .selection-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Engine-code chip (BWA, CZEA…) — a small mono pill that tells two same-model,
   same-generation variant cards apart at a glance. Neutral, no accent. */
.atp-app .selection-meta-code {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel-3);
  color: var(--text);
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Fuel type: a thin icon + label, not a pill. Neutral colours (no accent). */
.atp-app .selection-card-fuel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
}
.atp-app .selection-card-fuelIcon {
  display: inline-flex;
  color: var(--text-dim);
}
.atp-app .selection-card-fuelIcon svg { width: 15px; height: 15px; }

/* Control-unit tag (ECU / TCU) — same convention as the search suggestions:
   a dark "ECU" / accent "TCU" key chip followed by the unit name. */
.atp-app .selection-card-unit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.atp-app .selection-card-unitKind {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--panel);
}
.atp-app .selection-card-unitKind--ecu { background: var(--text); }
.atp-app .selection-card-unitKind--tcu { background: var(--accent); }
.atp-app .selection-card-unitName {
  min-width: 0;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-soft);
  /* Wrap long ECU names instead of clipping them at the card edge. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.atp-app .badge {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  background: rgba(15, 23, 42, 0.03);
  color: var(--text-soft);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.atp-app .badge-neutral {
  border-color: var(--line);
  background: rgba(15, 23, 42, 0.03);
  color: var(--text-soft);
}

.atp-app .selection-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-soft);
}

.atp-app .selection-card-footer span {
  font-size: 0.86rem;
  color: var(--text-dim);
}

.atp-app .selection-card-footer strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.atp-app .empty-state {
  padding: var(--space-7);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.02);
  text-align: center;
  color: var(--text-dim);
}

.atp-app .is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* --- Selection-grid skeleton (loading state) --- */
.atp-app .selection-grid.is-loading { opacity: 1; }
.atp-app .selection-card--skeleton {
  position: relative;
  overflow: hidden;
  cursor: default;
  pointer-events: none;
  animation: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.atp-app .selection-card--skeleton:hover {
  transform: none;
  background: var(--panel);
}
.atp-app .selection-card--skeleton { background: var(--panel-2); }
.atp-app .selection-card--skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.65) 45%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.65) 55%,
    transparent 80%
  );
  transform: translateX(-100%);
  animation: atp-skeleton-shimmer 1.3s ease-in-out infinite;
}
.atp-app .atp-skel { background: rgba(17, 24, 39, 0.11); border-radius: 8px; }
.atp-app .atp-skel-logo { width: 56px; height: 56px; border-radius: 12px; }
.atp-app .atp-skel-line { height: 12px; border-radius: 6px; }
.atp-app .atp-skel-line--lg { width: 70%; }
.atp-app .atp-skel-line--sm { width: 45%; }
@keyframes atp-skeleton-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .atp-app .selection-card--skeleton::after { animation: none; }
}

/* --- Buttons --- */
.atp-app .card-btn {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color var(--motion-fast),
    background-color var(--motion-fast),
    transform var(--motion-fast);
}

.atp-app .card-btn:hover {
  transform: translateY(-1px);
}

.atp-app .card-btn i {
  font-size: 0.95rem;
  color: var(--accent);
  line-height: 1;
}

.atp-app .ghost-btn {
  background: var(--panel);
}

.atp-app .primary-btn {
  border-color: rgba(242, 105, 33, 0.18);
  background: rgba(242, 105, 33, 0.08);
}

.atp-app .primary-btn i {
  color: var(--text);
}

.atp-app .card-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* --- Result hero --- */
.atp-app .result-hero {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: flex-end;
  animation: atp-soft-pop var(--motion-enter) both;
}

.atp-app .result-cta-group {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* --- Performance suite / gauges --- */
.atp-app .performance-suite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}
/* Gauges on the left, the figures table on the right, same row. They wrap to
   stacked rows only when the column is too narrow. */
.atp-app .performance-suite > .performance-row { flex: 1 1 380px; min-width: 0; }
.atp-app .performance-suite > .atp-perfTable { flex: 1 1 260px; width: auto; align-self: center; }

/* "Performance Tuning" label row above the gauges (its own row). Holds the
   illustration icon + the applied tuning-type label; the eco/performance radio
   will live here when a vehicle offers more than one tuning package. */
.atp-app .performance-tuneRow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.atp-app .performance-tuneRow__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--accent);
}
.atp-app .performance-tuneRow__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* Semantic Stock/Tuned/Gain table under the gauges (crawlable complement to
   the canvas dials). Same panel language as .performance-panel, kept compact. */
.atp-app .atp-perfTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  overflow: hidden;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.atp-app .atp-perfTable th,
.atp-app .atp-perfTable td {
  padding: 9px 16px;
  text-align: right;
}
.atp-app .atp-perfTable th[scope='row'],
.atp-app .atp-perfTable thead th:first-child {
  text-align: left;
}
.atp-app .atp-perfTable thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.atp-app .atp-perfTable tbody th[scope='row'] {
  font-weight: 600;
  color: var(--text);
}
.atp-app .atp-perfTable tbody tr + tr th,
.atp-app .atp-perfTable tbody tr + tr td {
  border-top: 1px solid var(--line);
}
.atp-app .atp-perfTable__gain {
  font-weight: 700;
  color: var(--positive);
}
/* Stock/Tuned cells drive the gauge needle on hover/focus (see atp-search.js). */
.atp-app .atp-perfTable td[data-gauge] {
  cursor: pointer;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.atp-app .atp-perfTable td[data-gauge]:hover,
.atp-app .atp-perfTable td[data-gauge]:focus-visible {
  background: var(--accent-soft);
  color: var(--text);
  outline: none;
}
.atp-app .atp-perfTable__gain small {
  font-weight: 500;
  color: var(--text-soft);
}

.atp-app .performance-row {
  display: grid;
  gap: 0;
}

.atp-app .performance-row-primary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.atp-app .performance-panel,
.atp-app .metric-chip {
  animation: atp-soft-pop var(--motion-enter) both;
  animation-delay: var(--stagger, 0ms);
}

.atp-app .performance-panel {
  padding: var(--space-1);
  display: grid;
  gap: var(--space-5);
  overflow: hidden;
  position: relative;
}

/* Condensed one-row cluster: [ stock value ] [ gauge dial ] [ tuned value ].
   The scale values sit LEFT and RIGHT of the dial instead of stacking below. */
.atp-app .gauge-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  /* Horizontal breathing room so the dial's edge tick labels never clip. */
  padding: 0 var(--space-2);
}

.atp-app .gauge-dial {
  position: relative;
  width: min(100%, 270px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: visible;
}

.atp-app .gauge-dial canvas {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}


.atp-app #hp-inline-metrics .metric-chip:nth-child(2) strong,
.atp-app #hp-inline-metrics .metric-chip:nth-child(2) small {
  color: var(--positive);
}

.atp-app .gauge-inline-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.atp-app .gauge-inline-metrics .metric-chip {
  border-radius: 14px;
  padding: 14px 16px;
}

.atp-app .metric-chip {
  padding: 18px 20px;
  display: grid;
  gap: 10px;
  background: var(--panel);
}

.atp-app .metric-chip span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}

.atp-app .metric-chip strong {
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.05em;
}

.atp-app .metric-chip small {
  color: var(--accent-bright);
  font-size: 14px;
  font-weight: 600;
}

/* --- Result panels / dyno chart --- */
.atp-app .result-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  width: 100%;
}

.atp-app .result-panel {
  border: none;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  animation: atp-soft-pop var(--motion-enter) both;
  animation-delay: var(--stagger, 0ms);
}

.atp-app .result-panel-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
}

.atp-app .result-panel-head h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.atp-app .result-panel-head span {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.atp-app .dyno-chart {
  display: grid;
  /* minmax(0, 1fr) so the chart column can't size to the SVG's intrinsic width
     and overflow narrow screens (the area + svg are width:100% of this). */
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.atp-app .dyno-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  /* Legend now sits BELOW the chart. */
  padding: 14px 0 2px;
}

.atp-app .dyno-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text-soft);
  font-weight: 500;
}

.atp-app .dyno-legend-line {
  width: 28px;
  height: 0;
  display: inline-block;
}

.atp-app .dyno-legend-line--stock {
  border-top: 2px dashed var(--positive);
}

.atp-app .dyno-legend-line--tuned {
  border-top: 2.5px solid var(--positive);
}

.atp-app .dyno-legend-line--stock-nm {
  border-top: 2px dashed #f26921;
  opacity: 0.55;
}

.atp-app .dyno-legend-line--tuned-nm {
  border-top: 2.5px solid #f26921;
}

/* Legend toggles — click to show/hide the HP or Torque series in the chart. */
.atp-app .dyno-legend-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.atp-app .dyno-legend-toggle:hover { border-color: var(--text-dim); background: var(--panel-3); }
.atp-app .dyno-legend-toggle:focus-visible { outline: 2px solid var(--text-dim); outline-offset: 2px; }
.atp-app .dyno-legend-toggle .dyno-legend-line { width: 22px; }
/* OFF state: dimmed + struck through; the swatch fades. */
.atp-app .dyno-legend-toggle:not(.is-on) {
  opacity: 0.55;
  color: var(--text-dim);
  text-decoration: line-through;
}
.atp-app .dyno-legend-toggle:not(.is-on) .dyno-legend-line { opacity: 0.3; }

/* Series visibility driven by the toggles (class toggled on #dyno-chart). */
.atp-app .dyno-chart.is-hp-off .dyno-series--hp,
.atp-app .dyno-chart.is-nm-off .dyno-series--nm { display: none; }
.atp-app .dyno-chart.is-hp-off .dyno-dot--stock,
.atp-app .dyno-chart.is-hp-off .dyno-dot--tuned { display: none; }

.atp-app .dyno-chart-area {
  position: relative;
  width: 100%;
  height: min(420px, 52vh);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: crosshair;
}

.atp-app #dyno-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.atp-app .dyno-tooltip {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  min-width: 160px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  font-size: 0.82rem;
  color: #f3f4f6;
  display: grid;
  gap: 8px;
  transition: opacity 120ms ease;
}

.atp-app .dyno-tooltip-rpm {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.atp-app .dyno-tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}

.atp-app .dyno-tooltip-row span:nth-child(2) {
  flex: 1;
  color: rgba(255, 255, 255, 0.65);
}

.atp-app .dyno-tooltip-row strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.atp-app .dyno-tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.atp-app .dyno-tooltip-dot--stock {
  background: var(--positive);
  opacity: 0.65;
}

.atp-app .dyno-tooltip-dot--tuned {
  background: var(--positive);
}

.atp-app .dyno-tooltip-dot--stock-nm {
  background: #f26921;
  opacity: 0.6;
}

.atp-app .dyno-tooltip-dot--tuned-nm {
  background: #f26921;
}

.atp-app .dyno-crosshair {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.atp-app .dyno-crosshair-v {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--text-dim);
}

.atp-app .dyno-crosshair-h {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  border-top: 1px dashed var(--text-dim);
}

.atp-app .dyno-crosshair-label {
  position: absolute;
  left: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--panel);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  white-space: nowrap;
  transform: translateY(-50%);
}

.atp-app .dyno-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--panel);
  z-index: 15;
  pointer-events: none;
  /* No position transition: the rAF-throttled handler already updates once per
     frame, so easing here just lags the dot behind the cursor (felt janky). */
}

.atp-app .dyno-dot--stock {
  background: #39c7db;
  opacity: 0.55;
}

.atp-app .dyno-dot--tuned {
  background: #39c7db;
  box-shadow: 0 0 8px rgba(57, 199, 219, 0.45);
}

.atp-app .dyno-dot--stock-nm {
  background: #f26921;
  opacity: 0.55;
}

.atp-app .dyno-dot--tuned-nm {
  background: #f26921;
  box-shadow: 0 0 8px rgba(242, 105, 33, 0.45);
}

/* Torque toggle off → hide the torque dots too (mirrors the HP rule). */
.atp-app .dyno-chart.is-nm-off .dyno-dot--stock-nm,
.atp-app .dyno-chart.is-nm-off .dyno-dot--tuned-nm { display: none; }

.atp-app .dyno-chart-disclaimer {
  margin: 0;
  padding: 14px 0 0;
  font-size: 0.74rem;
  font-style: italic;
  color: var(--text-dim);
  text-align: center;
}

/* --- Tuning options placeholder (detail page) --- */
/* --- Result two-column layout (ETT-like main + sticky aside) --- */
.atp-app .atp-result-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.atp-app .atp-result-main {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.atp-app .atp-result-aside {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.atp-app .atp-result-cta-block {
  display: grid;
}

.atp-app .atp-result-cta-block .card-btn {
  width: 100%;
  justify-content: center;
}

@media (min-width: 1024px) {
  .atp-app .atp-result-layout {
    flex-direction: row;
    align-items: flex-start;
  }
  .atp-app .atp-result-main {
    flex: 1 1 0;
    min-width: 0;
  }
  .atp-app .atp-result-aside {
    flex: 0 0 380px;
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-4));
    max-height: calc(100dvh - var(--topbar-height) - (var(--space-4) * 2));
    overflow-y: auto;
  }
}

.atp-app .tuning-options {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-3);
}

.atp-app .tuning-options h3 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
}

.atp-app .tuning-options .tuning-options-empty {
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* --- Keyframes (namespaced) --- */
@keyframes atp-soft-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes atp-progress-step-grow {
  from { opacity: 0.08; transform: translateY(10px); }
  60% { opacity: 1; transform: translateY(-1px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes atp-progress-dropdown-settle {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  65% { opacity: 1; transform: translateY(0) scale(1.005); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes atp-progress-step-collapse {
  from {
    opacity: 1;
    background: rgba(15, 23, 42, 0.04);
    border-color: var(--accent-strong);
    transform: translateY(0) scaleY(1) scaleX(1);
  }
  to {
    opacity: 0.86;
    background: rgba(15, 23, 42, 0.03);
    border-color: var(--line);
    transform: translateY(0) scaleY(1) scaleX(1);
  }
}

@keyframes atp-dropdown-bloom {
  from { opacity: 0; transform: translateY(-8px) scaleY(0.72) scaleX(0.96); }
  65% { opacity: 1; transform: translateY(0) scaleY(1.03) scaleX(1); }
  to { opacity: 1; transform: translateY(0) scaleY(1) scaleX(1); }
}

@keyframes atp-dropdown-item-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .atp-app *,
  .atp-app *::before,
  .atp-app *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .atp-app .trigger-spark {
    transition: none !important;
    opacity: 0.55;
    transform: none;
  }
}

@media (max-width: 1200px) {
  .atp-app .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* make/model/generation keep their auto-fill reflow (no override needed).
     minmax(0, 1fr) — not plain 1fr — so the single column can't grow to the
     content's max-content and overflow narrow screens. */
  /* Keep the HP + torque gauges side-by-side (2 cols) even on mobile — only the
     dyno/result panels collapse to one column. */
  .atp-app .result-panels {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 981px) {
  /* minmax(0, 1fr) — not plain 1fr — so the single content column can't size to
     its max-content (the selection grid / brand swiper) and overflow the screen. */
  .atp-app .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Detail page: stop nowrap content (breadcrumb, back-links) from forcing the
     column wider than the viewport. Flex/grid items default to min-width:auto,
     which lets their intrinsic width push past the screen — pin them to 0 and
     let the wrappable rows wrap. */
  .atp-detail .ettVehicle,
  .atp-detail .ettVehicle__layout,
  .atp-detail .ettVehicle__main,
  .atp-detail .ettVehicle__sidebar { min-width: 0; max-width: 100%; }
  .atp-detail .ettVehicle__utilityBar,
  .atp-detail .ettBreadcrumb,
  .atp-detail .ettVehicle__archiveLinks {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }
  /* Flex rows inside the main card (gauges + table, dyno) must be allowed to
     shrink below their content's intrinsic width too. */
  .atp-detail .performance-suite,
  .atp-detail .performance-suite > *,
  .atp-detail .performance-row,
  .atp-detail .performance-panel,
  .atp-detail .result-panels,
  .atp-detail .result-panels > *,
  .atp-detail .atp-perfTable { min-width: 0; max-width: 100%; }

  /* The filter sidebar becomes a centered modal dialog. Hidden until
     #sidebar-toggle adds .sidebar-visible on the root; closed via the × button,
     the backdrop, or Escape (all wired in atp-search.js). */
  .atp-app .sidebar {
    position: fixed;
    z-index: 1200;
    top: 50%;
    left: 50%;
    width: min(440px, calc(100vw - 32px));
    max-height: min(86vh, 86dvh);
    margin: 0;
    padding: var(--space-4) var(--space-4) var(--space-5);
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 70px rgba(8, 10, 14, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.96);
    transition:
      opacity 0.2s ease,
      transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
      visibility 0.2s ease;
  }
  .atp-app.sidebar-visible .sidebar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }
  .atp-app .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1199;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .atp-app.sidebar-visible .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
  }
  /* Reveal the filter trigger + the modal close button (hidden on desktop). */
  .atp-app .atp-filterToggle { display: inline-flex; }
  .atp-app .sidebar-close { display: inline-flex; }
}

@media (max-width: 760px) {
  .atp-app .topbar,
  .atp-app .content {
    padding-left: 16px;
    padding-right: 16px;
  }
  .atp-app .topbar-right {
    display: none;
  }
  /* The filter modal (defined in the ≤981px block) already covers small phones;
     no separate off-canvas drawer here. */
  .atp-app .content-toolbar,
  .atp-app .result-hero {
    flex-direction: column;
    align-items: flex-start!important;
  }
  .atp-app .content-actions,
  .atp-app .result-cta-group {
    width: 100%;
    flex-direction: column;
  }
  .atp-app .search-input,
  .atp-app .card-btn {
    width: 100%;
  }
  .atp-app .card-grid {
    grid-template-columns: 1fr;
  }
  .atp-app .selection-grid:has(.selection-card-make),
  .atp-app .selection-grid:has(.selection-card-model) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .atp-app .selection-grid:has(.selection-card-type) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .atp-app .gauge-dial {
    width: min(100%, 260px);
  }
}

/* --- Full-width canvas page template (page-search-canvas.php) --- */
.atp-canvas-page{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  background:var(--bg, #f4f5f7);
}
.atp-canvas-page .atp-app{
  max-width:none;
  margin:0 auto;
}

/* ============================================================================
   ETT-ported vehicle-detail layout — LIGHT THEME
   ----------------------------------------------------------------------------
   Faithful port of eco-tractor-tune's .ettVehicle__* / .ettOption__* /
   .ettSeoSection / .ettFaqList / .ettToolSection result-page styling, scoped
   under `.atp-app .atp-detail` and translated from ETT's dark palette to our
   light tokens:
     --ett-green       -> --positive (cyan) for gains/highlights, --accent
                          (orange) for the recommended/tuned emphasis.
     --ett-bg-card     -> --panel  (white cards)
     --ett-bg-alt/bg   -> --panel-2 (subtle surface)
     --ett-text        -> --text
     --ett-text-muted  -> --text-soft / --text-dim
     --ett-border      -> --line
   ETT used flat 0-radius rectangles + left accent rails; we keep that structure
   but soften with our radii for the premium light look.
   ========================================================================== */

.atp-detail .ettVehicle {
  width: 100%;
  margin: 0 auto;
}

/* ---- Utility bar / breadcrumb ---- */
/*
 * The marketing theme's nav (.at-nav) is position:fixed, ~94px tall, z-index 50,
 * and overlays the top of our detail page — it was covering the breadcrumb (the
 * "missing breadcrumb" report). Offset the detail content below the fixed nav so
 * the breadcrumb is the first visible thing. Uses a slightly larger fallback for
 * safety; the theme nav height is ~94px on desktop.
 */
.atp-app.atp-detail {
  padding-top: 104px;
}
/* The search cascade root (.atp-app WITHOUT .atp-detail) runs to the very top so
   the theme's fixed nav OVERLAPS the dark shaped hero (the hero reserves its own
   nav clearance via .atp-hero__inner padding-top). */
.atp-app:not(.atp-detail) {
  padding-top: 0;
  padding-bottom: 100px;
}
/* Mobile: the trailing bottom whitespace is excessive on phones — trim it. */
@media (max-width: 760px) {
  .atp-app:not(.atp-detail) {
    padding-bottom: 40px;
  }
}
.atp-detail .ettVehicle__utilityBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.atp-detail .ettVehicle__utilityBar .ettBreadcrumb { flex: 1 1 auto; min-width: 0; }
.atp-detail .ettVehicle__utilityBar .ettVehicle__archiveLinks { flex: 0 0 auto; margin: 0; }
.atp-detail .ettBreadcrumb {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.atp-detail .ettBreadcrumb__item {
  color: var(--text-dim);
  text-decoration: none;
}
.atp-detail a.ettBreadcrumb__item:hover {
  color: var(--accent);
}
.atp-detail .ettBreadcrumb__separator {
  color: var(--line-strong);
}
.atp-detail .ettBreadcrumb__current {
  color: var(--text);
  font-weight: 600;
}

/* ---- Two-column layout ---- */
.atp-detail .ettVehicle__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  .atp-detail .ettVehicle__layout {
    flex-direction: row;
    gap: var(--space-4);
    align-items: flex-start;
  }
  .atp-detail .ettVehicle__main {
    flex: 1 1 0;
    min-width: 0;
  }
  .atp-detail .ettVehicle__sidebar {
    flex: 0 0 444px;
    align-self: flex-start;
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-4));
  }
}
.atp-detail .ettVehicle__main {
  display: grid;
  /* Single column pinned to minmax(0, 1fr): without the 0 minimum the implicit
     `auto` track sizes to the widest item's max-content (table/gauges), which
     overflows the card on narrow screens. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  /* Card chrome applies on ALL viewports (it used to live only in the desktop
     media query, so the card vanished on mobile). Padding scales with width so
     no media-query override is needed (which would lose to this later rule). */
  background: #fff;
  border: 1px solid var(--steel-silver);
  border-radius: 20px;
  padding: 16px clamp(18px, 3vw, 28px);
}
/* No B2B sidebar for this vehicle (no tool / cable / ETT promo): the main column
   runs the full width of the layout. */
.atp-detail .ettVehicle__layout--full .ettVehicle__main { width: 100%; flex-basis: 100%; }

/* ----- Mobile result tabs (Performance / Tuning options / Tools & cables).
   The look is the shared .at-pill-tabs component (styles.css + main.js for the
   sliding pill); here we only handle mobile visibility + spacing. Hidden on
   desktop; below 1024px they split the result into one section per tab. The
   long-form SEO + FAQ (untagged) stay always visible below. ----------------- */
.atp-detail .ettVehicle__rtabs { display: none; }
/* The app's `.atp-app button { font: inherit }` reset wins over the shared
   .at-pill-tabs__btn font (leaving only letter-spacing/uppercase), so the tabs
   render at 16px. Restore the compact mono look at a higher specificity, a
   touch smaller than the default component size. */
.atp-detail .ettVehicle__rtab.at-pill-tabs__btn {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", monospace);
  font-size: 9.5px;
  font-weight: 700;
}
@media (max-width: 1023px) {
  /* inline-flex matches the pill container so the sliding-pill geometry stays
     correct; it scrolls horizontally if the tabs are wider than the column. */
  .atp-detail .ettVehicle__rtabs {
    display: inline-flex;
    /* Pin to the bottom of the viewport as a floating pill bar (the component's
       own rounded pill background gives it the toolbar look). */
    position: fixed;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 40;
    margin: 0;
    max-width: calc(100% - 24px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #fff;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
  }
  .atp-detail .ettVehicle__rtabs::-webkit-scrollbar { width: 0; height: 0; }
  /* Show only the active tab's group. Non-active groups are display:none; the
     active one keeps its natural display (so flex/grid layouts survive). */
  .atp-detail .ettVehicle__layout:not(.is-rtab-performance) [data-rtab-panel="performance"] { display: none; }
  .atp-detail .ettVehicle__layout:not(.is-rtab-options) [data-rtab-panel="options"] { display: none; }
  /* The sidebar IS the "tools" group — EXCEPT the File-service CTA, which stays
     visible on every tab where it currently sits. So on non-tools tabs we hide
     the sidebar's other children (tool card, cables, protocols) but keep the
     CTA; on the tools tab everything shows. */
  .atp-detail .ettVehicle__layout:not(.is-rtab-tools) .ettVehicle__sidebar > :not(.atp-fileCta) { display: none; }

  /* The tools/cables content lives in the .ettVehicle__sidebar — a SIBLING of
     the main column. On mobile that left it rendering as a detached block far
     below the tabs (after the always-visible long-form sections), so the "Tools
     & cables" tab content looked like it was OUTSIDE the result card. Two fixes
     bring it INSIDE the tab content:
       1. On the tools tab, hide the always-visible sections of the main column
          so nothing sits between the tabs and the tools content. */
  .atp-detail .ettVehicle__layout.is-rtab-tools .ettVehicle__main > :not(.ettVehicle__header):not(.ettVehicle__rtabs) { display: none; }
  /*   2. Move the card chrome from the main column onto the whole layout, so the
          main column AND the tools sidebar render inside ONE card (instead of
          the sidebar being a separate block below the main card). Desktop keeps
          its own two-card row (this is scoped to the mobile media query). */
  .atp-detail .ettVehicle__main {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
  }
  .atp-detail .ettVehicle__layout {
    background: #fff;
    border: 1px solid var(--steel-silver);
    border-radius: 20px;
    padding: 16px clamp(18px, 3vw, 28px);
    /* Clear the fixed bottom rtab bar so the last content isn't hidden under it. */
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* ----- File-service CTA: dark rounded card pinned to the top of the sidebar on
   every vehicle. Left = an INSET rounded-square panel reserved for a future
   animation (black for now); right = copy + CTA. The card itself is padded, so
   the art panel floats inside it with its own corner radius (matching the
   reference). Whole card links to files.alttune.com/login. ------------------- */
.atp-detail .atp-fileCta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 var(--space-4);
  padding: 14px;
  border-radius: 20px;
  text-decoration: none;
  background: var(--rubber-black);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition:
    transform var(--motion-fast),
    box-shadow var(--motion-fast),
    border-color var(--motion-fast);
}
.atp-detail .atp-fileCta__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.atp-detail .atp-fileCta__kicker {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.atp-detail .atp-fileCta__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
/* The action reuses the global .at-btn typography/shape, but is a custom
   variant: transparent with a light-grey border + white text/arrow, and on
   hover it runs the same wipe-in animation as .at-btn-primary — only the fill is
   WHITE (not orange) and the text/arrow flip to black. The label + icon slide
   right inside the fixed frame (the "text extends" motion). */
.atp-detail .atp-fileCta__action {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  align-self: flex-start;
  margin-top: 8px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.38);
}
.atp-detail .atp-fileCta__action::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translate3d(-101%, 0, 0) skewX(-8deg);
  transform-origin: left center;
  transition: transform 540ms cubic-bezier(.32, .72, 0, 1);
  z-index: -1;
}
.atp-detail .atp-fileCta__action > * {
  position: relative;
  z-index: 1;
  transition:
    transform 540ms cubic-bezier(.32, .72, 0, 1),
    color 340ms cubic-bezier(.32, .72, 0, 1);
}
.atp-detail .atp-fileCta__action svg { width: 15px; height: 15px; }
/* Hover (anywhere on the card, since the whole card is the link): white fills
   in, text + arrow go black, content slides right. */
.atp-detail .atp-fileCta:hover .atp-fileCta__action {
  color: #111827;
  border-color: #fff;
}
.atp-detail .atp-fileCta:hover .atp-fileCta__action::before {
  transform: translate3d(0, 0, 0) skewX(0deg);
}
.atp-detail .atp-fileCta:hover .atp-fileCta__action > * {
  transform: translate3d(4px, 0, 0);
}
.atp-detail .atp-fileCta:hover .atp-fileCta__action svg { transform: translateX(3px); }
/* Left panel — an inset rounded square (its own corners), reserved for a future
   animation; flat black for now. align-self:stretch makes it match the copy
   height, min-height keeps it square-ish when the copy is short. */
.atp-detail .atp-fileCta__art {
  position: relative;
  flex: 0 0 96px;
  align-self: stretch;
  min-height: 96px;
  border-radius: 14px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
/* Premium 3D calibration-membrane animation (atp-map-anim.js) fills the panel. */
.atp-detail .atp-fileCta__art.atp-mapAnim .atp-mapAnim__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ---- Header ---- */
.atp-detail .ettVehicle__header {
  display: grid;
  gap: var(--space-3);
}
/* Result header with a vehicle photo: text block left, image right. Scoped with
   :has() so headers without an image keep their single-column flow. */
.atp-detail .ettVehicle__header:has(.ettVehicle__headerMedia) {
  grid-template-columns: minmax(0, 1fr) clamp(170px, 32%, 300px);
  align-items: start;
  gap: var(--space-5);
}
.atp-detail .ettVehicle__headerMedia {
  margin: 0;
  grid-column: 2;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--line);
}
.atp-detail .ettVehicle__headerMedia img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (max-width: 720px) {
  .atp-detail .ettVehicle__header:has(.ettVehicle__headerMedia) {
    grid-template-columns: 1fr;
  }
  .atp-detail .ettVehicle__headerMedia {
    grid-column: 1;
    aspect-ratio: 16 / 9;
  }
}
.atp-detail .ettVehicle__headerTop {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.atp-detail .ettVehicle__headerRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
/* Vehicle-type glyph (same AV_Icons icon as the Kit Builder attnvl-cell--type). */
.atp-detail .ettVehicle__typeIcon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #050505;
}
.atp-detail .ettVehicle__typeIcon svg,
.atp-detail .ettVehicle__typeIcon .attnvl-type-icon { width: 40px; height: 40px; display: block; }
.atp-detail .ettVehicle__typeIcon .attnvl-type-icon svg { width: 100%; height: 100%; }
.atp-detail .ettVehicle__titleBlock { flex: 1 1 240px; min-width: 0; }
/* Connection methods relocated into the header row (right side). */
.atp-detail .ettVehicle__headerMethods { margin-top: 0; flex: 0 0 auto; }
.atp-detail .ettVehicle__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
}
.atp-detail .ettVehicle__title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.15;
  color: var(--text);
}
/* Make stays bold (inherits 800), model drops to a normal weight. */
.atp-detail .ettVehicle__titleMake { font-weight: 800; }
.atp-detail .ettVehicle__titleModel { font-weight: 400; }

/* Brand logo badge next to the vehicle title. */
.atp-detail .ettVehicle__brandLogo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
}
.atp-detail .ettVehicle__brandLogo img { width: 100%; height: 100%; object-fit: contain; }
.atp-detail .ettVehicle__brandLogo--mono {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  background: var(--panel-2);
}
.atp-detail .ettVehicle__variant {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0;
  margin-top: 6px;
}
.atp-detail .ettVehicle__summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
}
.atp-detail .ettVehicle__archiveLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.atp-detail .ettVehicle__resetBtn,
.atp-detail .ettVehicle__archiveLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text-soft);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--motion-fast), color var(--motion-fast);
}
.atp-detail .ettVehicle__resetBtn:hover,
.atp-detail .ettVehicle__archiveLink:hover {
  color: var(--text);
  border-color: var(--accent-strong);
}
.atp-detail .ettVehicle__resetBtn svg { opacity: 0.7; }

/* ---- Spec grid ---- */
/* Grouped with the header (no separate card) — flows as one block with the
   title + ecuRow above. Divided from the ecuRow by a thin top rule. */
.atp-detail .ettVehicle__specGrid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.atp-detail .ettVehicle__specItem {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.atp-detail .ettVehicle__specLabel {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.atp-detail .ettVehicle__specValue {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

/* Control unit (+ ECU/TCU badge) | Protocols (connection icons) | Fuel — the
   row directly under the title. */
.atp-detail .ettVehicle__ecuRow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2) var(--space-5);
}
.atp-detail .ettVehicle__ecuItem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.atp-detail .ettVehicle__ecuValue {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.atp-detail .ettVehicle__ecuItem--proto .atp-connMethods__list { margin-top: 1px; }
/* ECU / TCU chip at the end of the control-unit value. */
.atp-detail .attnvl-ecu-type {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 1px 6px;
  background: #050505;
  color: #fff;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ---- Gain badges + bars (ETT core visual) ---- */
.atp-detail .ettVehicle__perfSuite {
  padding: var(--space-5);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-4);
}
.atp-detail .ettVehicle__gainRow {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .atp-detail .ettVehicle__gainRow { flex-direction: row; gap: var(--space-5); }
}
.atp-detail .ettVehicle__gainBadge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-align: center;
}
.atp-detail .ettVehicle__gainBadge--hp {
  background: var(--accent-soft);
  color: var(--accent);
}
.atp-detail .ettVehicle__gainBadge--nm {
  background: rgba(57, 199, 219, 0.1);
  color: var(--positive);
}
.atp-detail .ettVehicle__gainPercent {
  display: block;
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
@media (min-width: 768px) {
  .atp-detail .ettVehicle__gainPercent { font-size: 34px; }
}
.atp-detail .ettVehicle__gainSub {
  display: block;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.85;
  margin-top: 2px;
}
.atp-detail .ettVehicle__gainUnit { text-transform: uppercase; }

.atp-detail .ettVehicle__gainBars { display: grid; gap: 10px; }
.atp-detail .ettVehicle__gainBarRow {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: var(--space-3);
}
.atp-detail .ettVehicle__gainBarLabel {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.atp-detail .ettVehicle__gainBar {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  min-width: 44px;
}
.atp-detail .ettVehicle__gainBar--original {
  background: var(--panel-3);
  color: var(--text-soft);
}
.atp-detail .ettVehicle__gainBar--tuned {
  background: var(--accent);
  color: #fff;
}

/* ---- SEO sections ---- */
.atp-detail .ettSeoSection {
  padding:15px 0;
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
/* Plain variant — sits on the page background instead of a white card.
   Used by the FAQ and related-variants blocks on the result page. */
.atp-detail .ettSeoSection--plain,
.atp-detail .ettSeoSection.atp-siblings {
  background: transparent;
  border-top: 0;
  border-bottom: 0;
}
.atp-detail .ettSeoSection__title {
  margin: 0 0 var(--space-3);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.atp-detail .ettSeoSection__body,
.atp-detail .ettSeoSection__body p {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 10px;
}
.atp-detail .ettSeoSection__body p:last-child { margin-bottom: 0; }

/* Option category groups inside "Available tuning options". */
.atp-detail .ettOptionCat + .ettOptionCat { margin-top: var(--space-4); }
.atp-detail .ettOptionCat__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}
.atp-detail .ettOptionCat__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.atp-detail .ettSeoCards {
  display: grid;
  gap: var(--space-2);
  /* 2 per row on mobile, 3 per row on desktop. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .atp-detail .ettSeoCards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.atp-detail .ettSeoCards__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.atp-detail a.ettSeoCards__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
.atp-detail a.ettSeoCards__item:hover {
  background:var(--rubber-black);
  color: white;
}
.atp-detail a.ettSeoCards__item .atp-optAddon__nameText {  
  transition: all 0.2s ease-in-out;
}
.atp-detail a.ettSeoCards__item:hover .atp-optAddon__nameText {
  color: white;
}
/* Condensed: name + source + variants flow on a single row, pipe-spaced. */
.atp-detail .ettSeoCards__text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}

/* ---- Clickable add-on option cards (epure: white card, hairline border,
   neutral states — NO orange "Add", NO cyan active). Mirrors the av-builder
   list aesthetic at /vehicles/. ---- */
.atp-detail .atp-optAddon {
  cursor: pointer;
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-variant-numeric: tabular-nums;
}
.atp-detail .atp-optAddon:hover { border-color: var(--line-strong); }
.atp-detail .atp-optAddon:focus-visible {
  outline: none;
  border-color: var(--text-dim);
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06);
}
/* Option icon (DPF / EGR / AdBlue / DTC) — black glyph on white. */
.atp-detail .atp-optAddon__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 0;
  object-fit: contain;
}
/* Option name row: name + info "(i)" icon that reveals the notice on hover. */
.atp-detail .atp-optAddon__name {
  display: flex;
  align-items: center;
  gap: 6px;
}
.atp-detail .atp-optAddon__nameText { min-width: 0; }

/* Provenance ("source of truth") badge under each tuning-option name.
   --job  = proven on the vehicle's protocol by AltTune job history (with count).
   --catalog = from the standard AltTune tuning catalogue. */
.atp-detail .atp-optSource {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-top: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  cursor: help;
}
.atp-detail .atp-optSource--job {
  color: var(--positive, #0891b2);
  background: rgba(57, 199, 219, 0.12);
}
.atp-detail .atp-optSource--catalog {
  color: var(--text-dim);
  background: var(--panel-3);
}
/* ETT exact = brand accent; Derived = muted/dashed (computed); KESS3 = cyan. */
.atp-detail .atp-optSource--ett {
  color: var(--accent);
  background: var(--accent-soft);
}
.atp-detail .atp-optSource--derived {
  color: var(--text-dim);
  background: transparent;
  border: 1px dashed var(--border, #d8dee6);
}
.atp-detail .atp-optSource--kess3 {
  color: var(--positive, #0891b2);
  background: rgba(57, 199, 219, 0.12);
}
/* Merged "Available tuning options" header: title + a separator + the smaller
   source badges (Catalog / ETT) inline beside it. */
.atp-detail .ettSeoSection__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 var(--space-3);
}
.atp-detail .ettSeoSection__head .ettSeoSection__title { margin: 0; }
.atp-detail .ettSeoSection__headSep {
  flex: 0 0 auto;
  width: 1px;
  height: 16px;
  background: var(--line-strong);
}
.atp-detail .atp-optSource--sm {
  margin-top: 0;
  font-size: 9px;
  padding: 2px 6px;
}

/* ===== Phase 2: ETT offer (packages + add-ons) + tooling resolution ===== */
.atp-detail .atp-offerCard {
  display: flex;
  align-items: center;
  gap: 12px;
}
.atp-detail .atp-offerCard .ettSeoCards__text {
  flex: 1 1 auto;
  min-width: 0;
}
.atp-detail .atp-offerCard--default {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.atp-detail .atp-offerCard__default {
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}
.atp-detail .atp-offerCard__gain {
  margin: 4px 0 0;
  font-weight: 700;
  color: var(--positive, #0891b2);
}
.atp-detail .atp-offerCard__price {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}
.atp-detail .atp-offerCard__priceNow {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
}
.atp-detail .atp-offerCard__priceNow small {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
}
.atp-detail .atp-offerCard__priceWas {
  display: block;
  font-size: 12px;
  text-decoration: line-through;
  color: var(--text-dim);
}

.atp-detail .atp-toolingList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.atp-detail .atp-toolingItem {
  padding: 10px 12px;
  border: 1px solid var(--border, #d8dee6);
  border-radius: 12px;
  background: var(--panel-2, #fff);
}
.atp-detail .atp-toolingItem--primary {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
}
.atp-detail .atp-toolingItem__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.atp-detail .atp-toolingItem__name {
  font-weight: 700;
}
.atp-detail .atp-toolingItem__primaryTag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}
.atp-detail .atp-toolingItem__price {
  margin-left: auto;
  font-weight: 800;
  color: var(--accent);
}
.atp-detail .atp-toolingItem__desc {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-dim);
}

.atp-detail .atp-optAddon__info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: var(--text-dim);
  cursor: help;
  outline: none;
  transition: color 0.15s ease;
}
.atp-detail .atp-optAddon__info:hover,
.atp-detail .atp-optAddon__info:focus-visible {
  color: var(--text);
}
.atp-detail .atp-optAddon__info:focus-visible {
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12);
}
/* Light-theme tooltip bubble — hidden until the info icon is hovered/focused. */
.atp-detail .atp-optAddon__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 30;
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  background: #ffffff;
  color: #1f2937;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.atp-detail .atp-optAddon__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-1px) rotate(45deg);
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.atp-detail .atp-optAddon__info:hover .atp-optAddon__tip,
.atp-detail .atp-optAddon__info:focus-within .atp-optAddon__tip,
.atp-detail .atp-optAddon__info:focus-visible .atp-optAddon__tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.atp-detail .atp-optAddon__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.atp-detail .atp-optAddon__check::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  margin-top: -2px;
  transition: transform 0.15s ease;
}
/* "Add" label: restrained outlined pill in neutral grey — never orange. */
.atp-detail .atp-optAddon__action {
  flex-shrink: 0;
  align-self: center;
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  background: #ffffff;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.atp-detail .atp-optAddon:hover .atp-optAddon__action { border-color: var(--text-dim); }
/* Selected: calm neutral-dark filled state with a tick. No orange wash, no cyan.
   `border`/`background`/`box-shadow` carry !important to win over a global theme
   reset that forces those on bare <article> cards (WooCommerce/theme), which
   would otherwise flatten the selected look. */
#atp-app-detail.atp-detail .atp-optAddon.is-selected {
  border-color: #1f2937 !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px #1f2937 !important;
}
#atp-app-detail.atp-detail .atp-optAddon.is-selected .atp-optAddon__check {
  background: #1f2937 !important;
  border-color: #1f2937 !important;
}
#atp-app-detail.atp-detail .atp-optAddon.is-selected .atp-optAddon__check::after { transform: rotate(-45deg) scale(1); }
#atp-app-detail.atp-detail .atp-optAddon.is-selected .atp-optAddon__action {
  color: #ffffff !important;
  background: #1f2937 !important;
  border-color: #1f2937 !important;
}
#atp-app-detail.atp-detail .atp-optAddon.is-selected .atp-optAddon__action::before { content: "\2713\00a0"; }

/* ---- Sidebar: "Your file request" summary (epure) ---- */
.atp-detail .atp-request {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
/* First line: the chosen tuning type. */
.atp-detail .atp-request__tune {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 8px 10px;
  margin-bottom: 10px;
  background: #f8f9fb;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.atp-detail .atp-request__tuneLabel {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.atp-detail .atp-request__tuneValue {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
}
.atp-detail .atp-request__empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
}
/* Dashed "suggestion" button shown when no option is selected. Clicking it
   smooth-scrolls to the "Available tuning options" section. */
.atp-detail .atp-request__suggest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 14px;
  background: transparent;
  border: 1.5px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--text-soft);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.atp-detail .atp-request__suggest:hover,
.atp-detail .atp-request__suggest:focus-visible {
  border-color: var(--text-dim);
  color: var(--text);
  background: #f8f9fb;
  outline: none;
}
.atp-detail .atp-request__suggest[hidden] { display: none; }
.atp-detail .atp-request__suggestPlus {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.atp-detail .atp-request__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.atp-detail .atp-request__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
}
.atp-detail .atp-request__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.atp-detail .atp-request__remove {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #9ca3af;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}
.atp-detail .atp-request__remove:hover { color: #ffffff; background: #ef4444; }
.atp-detail .atp-request__count {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
}
.atp-detail .ettSeoCards__item h3 {
  margin: 0;
  font-size: 14px;
    font-weight: 500;
  color: var(--text);
}
.atp-detail .ettSeoCards__item p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.6;
}
/* Inline, pipe-separated variant list (e.g. "Towing | Power") — no bullets. */
.atp-detail .ettSeoCards__variants {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
}

/* ---- FAQ accordion ---- */
.atp-detail .ettFaqList { display: grid; gap: var(--space-3); }
.atp-detail .ettFaqList__item {
  padding: var(--space-4);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-fast);
}
.atp-detail .ettFaqList__item[open] { border-color: var(--line-strong); }
.atp-detail .ettFaqList__item summary {
  list-style: none;
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  position: relative;
  padding-right: 24px;
}
.atp-detail .ettFaqList__item summary::-webkit-details-marker { display: none; }
.atp-detail .ettFaqList__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
}
.atp-detail .ettFaqList__item[open] summary::after { content: "\2013"; }
.atp-detail .ettFaqList__answer { margin-top: 10px; }
.atp-detail .ettFaqList__answer p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.7;
}

/* ---- Sidebar: option cards ---- */
.atp-detail .ettOption__baseGroup {
  padding: var(--space-5);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.atp-detail .ettOption__heading {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  color: var(--text);
}
.atp-detail .ettOption__card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  cursor: pointer;
  position: relative;
  min-height: 44px;
  transition: transform var(--motion-base), border-color var(--motion-fast);
}
.atp-detail .ettOption__card:last-child { margin-bottom: 0; }
.atp-detail .ettOption__card:hover { transform: scale(1.015); }
.atp-detail .ettOption__card:active { transform: scale(0.985); }
.atp-detail .ettOption__card--selected {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
}
.atp-detail .ettOption__card--performance::before {
  content: "RECOMMENDED";
  position: absolute;
  top: 0;
  right: 0;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-bottom-left-radius: var(--radius-sm);
}
.atp-detail .ettOption__check {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.atp-detail .ettOption__card--selected .ettOption__check {
  border-color: var(--accent);
  background: var(--accent);
}
.atp-detail .ettOption__card--selected .ettOption__check::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}
.atp-detail .ettOption__content { flex: 1 1 0; min-width: 0; }
.atp-detail .ettOption__name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.atp-detail .ettOption__desc {
  display: block;
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 2px;
}
.atp-detail .ettOption__gainInfo {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin-top: 4px;
}
.atp-detail .ettOption__price { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.atp-detail .ettOption__price--old {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: line-through;
}
.atp-detail .ettOption__price--current {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.atp-detail .ettOption__price--current small {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-dim);
}
.atp-detail .ettOption__price--na {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  max-width: 110px;
  white-space: normal;
  line-height: 1.3;
  text-align: right;
}

/* Economy unavailable for this model: greyed, non-interactive. */
.atp-detail .ettOption__card--disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: #f8f9fb;
  border-style: dashed;
}
.atp-detail .ettOption__card--disabled:hover { transform: none; }
.atp-detail .ettOption__card--disabled .ettOption__icon { filter: grayscale(1); opacity: 0.7; }
.atp-detail .ettOption__card--disabled .ettOption__name { color: var(--text-soft); }

/* "None — options only" base-tune toggle. */
.atp-detail .ettOption__noneToggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-3);
  padding: 10px var(--space-4);
  background: #ffffff;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text-soft);
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.atp-detail .ettOption__noneToggle:hover { border-color: var(--text-dim); }
.atp-detail .ettOption__noneToggle:focus-visible {
  outline: none;
  border-color: var(--text-dim);
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06);
}
.atp-detail .ettOption__noneToggle__check {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.atp-detail .ettOption__noneToggle__text { font-size: 13px; font-weight: 600; }
.atp-detail .ettOption__noneToggle.is-selected {
  border-style: solid;
  border-color: #1f2937;
  color: #1f2937;
}
.atp-detail .ettOption__noneToggle.is-selected .ettOption__noneToggle__check {
  background: #1f2937;
  border-color: #1f2937;
}

/* ============================================================================
 * B2B detail sidebar: read-only connection + per-vehicle cables reference.
 * Light-theme card matching the .atp-detail aesthetic (white panel, hairline
 * border). NO selection / cart / file-request — see parts/sidebar-b2b.php.
 * ========================================================================== */
.atp-detail .atp-connCard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 18px 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  margin-bottom: 15px;
}
.atp-detail .atp-connCard__head {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0;
  width: calc(100% - 50px);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  color: var(--rubber-black);
  margin: 0 auto;
  padding: 15px 20px;
  background: #fafafa;
  color: #050505;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
}
.atp-detail .atp-connCard__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}
.atp-detail .atp-connCard__headupline {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
  text-transform:uppercase;
  color: var(--rubber-black);
  display: block;
}
.atp-detail .atp-connCard__headline {
  margin: 3px 0 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--rubber-black);
}
/* ---- Locked connection card (anonymous visitor) ---- */
.atp-detail .atp-connCard__badge--lock {
  background: var(--panel-2);
  color: var(--text-soft);
}
.atp-detail .atp-connCard__lockText {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-soft);
}
.atp-detail .atp-loginBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 16px 0 0;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.atp-detail .atp-loginBtn:hover,
.atp-detail .atp-loginBtn:focus-visible {
  background: var(--accent-strong, #d9551a);
  transform: translateY(-1px);
}
.atp-detail .atp-connCard__lockHint {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-soft);
  opacity: 0.85;
}
.atp-detail .atp-connCard__methods {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.atp-detail .atp-connPill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}
.atp-detail .atp-connPill--flash {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
  color: var(--accent);
}
.atp-detail .atp-connCard__cables { margin-top: 18px; }
.atp-detail .atp-connCard__cablesHead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.atp-detail .atp-connCard__cablesTitle {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
/* "Most jobs (99%)" pill — mirrors the Kit Builder OBD-tier badge. */
.atp-detail .atp-connCard__mostJobs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  background: #ecfdf5;
  color: #065f46;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  white-space: nowrap;
}
.atp-detail .atp-connCard__mostJobsIcon { display: inline-flex; }
.atp-detail .atp-connCard__mostJobsPct { opacity: 0.75; font-weight: 600; }
.atp-detail .atp-connCard__empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
}
/* Cable list — table-row aesthetic mirroring the Kit Builder av-cable-table:
   a small thumbnail box, the accessory name, then a meta line with the
   monospace item number + price; rows divided by thin dotted hairlines. */
.atp-detail .atp-cableList {
  list-style: none;
  margin: 0;
  padding: 0;
}
.atp-detail .atp-cableList__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
.atp-detail .atp-cableList__item + .atp-cableList__item {
  border-top: 1px dotted rgba(17, 24, 39, 0.12);
}
/* Thumbnail box — grey rounded placeholder w/ a cable glyph (no per-cable
   images on the ATP side; the box matches the Kit Builder empty-thumb look). */
.atp-detail .atp-cableList__thumb {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text-dim);
}
.atp-detail .atp-cableList__thumb--generic {
  background: repeating-linear-gradient(45deg, var(--panel-2) 0 6px, var(--panel-3) 6px 12px);
}
/* Real WooCommerce product photo replacing the generic cable glyph. */
.atp-detail .atp-cableList__thumb--img {
  background: #fff;
  overflow: hidden;
}
.atp-detail .atp-cableList__thumbImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Protocol-activation row rendered inside a cable tier (above its cable list). */
.atp-detail .atp-protoList--tier {
  margin: 0 0 8px;
}
/* Generic accessories (no KESS3 part number) are de-emphasised. */
.atp-detail .atp-cableList__item--generic .atp-cableList__name { color: var(--text-soft); }
.atp-detail .atp-cableList__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
/* Title + price share the top row of the cable's text column. */
.atp-detail .atp-cableList__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.atp-detail .atp-cableList__name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;
}
/* Cable name links to its real WooCommerce product page. Reads as plain text
   until hover/focus, where it reveals the link affordance (accent + underline). */
.atp-detail .atp-cableList__nameLink {
  color: inherit;
  text-decoration: none;
  transition: color 0.14s ease;
}
.atp-detail .atp-cableList__nameLink:hover,
.atp-detail .atp-cableList__nameLink:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.atp-detail .atp-cableList__meta {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
.atp-detail .atp-cableList__part {
  font-size: 11px;
  font-family: ui-monospace, Consolas, Monaco, monospace;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  border-bottom: 1px dotted var(--line-strong);
  word-break: break-all;
}
.atp-detail .atp-cableList__sourcing {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Price mirrored from the Alientech shop (identical). */
.atp-detail .atp-cableList__price {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.atp-detail .atp-cableList__priceWas {
  margin-right: 5px;
  font-weight: 500;
  font-size: 11px;
  color: var(--text-soft);
  text-decoration: line-through;
}
.atp-detail .atp-cableList__price--sale .atp-cableList__priceNow {
  color: var(--accent);
}
/* The price is now rendered as the product's own WooCommerce price HTML so the
   WOOCS currency switcher converts it (custom spans were ignored). Style WC's
   markup to match the prior look: plain amount, struck-through "was", accent "now". */
.atp-detail .atp-cableList__price .woocommerce-Price-amount { color: inherit; white-space: nowrap; }
.atp-detail .atp-cableList__price del {
  margin-right: 5px;
  font-weight: 500;
  font-size: 11px;
  color: var(--text-soft);
  text-decoration: line-through;
}
.atp-detail .atp-cableList__price ins {
  text-decoration: none;
  color: var(--accent);
}
/* The price now sits on the title row; the buy stack (cart + "in cart" note)
   sits on the meta row, right-aligned, so the cart still reads UNDER the price. */
.atp-detail .atp-cableList__buy {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
/* "N in cart" — small confirmation under the cart button once a cable is added. */
.atp-detail .atp-cableList__inCart {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-soft);
  white-space: nowrap;
}
.atp-detail .atp-cableList__inCart[hidden] { display: none; }
.atp-detail .atp-cableList__inCart svg { flex: 0 0 auto; }

/* Per-cable "Add to cart" — discreet cart+plus icon that expands on hover to
   reveal the label. The visible pill is an ABSOLUTE inner anchored right, so the
   expansion never reflows / pushes anything; the <a> keeps a fixed 26px footprint. */
.atp-detail .atp-cableList__cart {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  text-decoration: none;
}
.atp-detail .atp-cableList__cartInner {
  position: absolute;
  top: 0;
  right: 0;
  height: 26px;
  min-width: 26px;
  /* Size to content, NOT to the 26px anchor. Without this, an absolutely
     positioned box with right:0 + width:auto is shrink-to-fit CLAMPED to its
     containing block (.atp-cableList__cart = 26px), so the expanded label
     overflowed and overflow:hidden cropped it to "ADD TO CA". max-content lets
     the pill grow leftward over its content while staying absolute (no reflow). */
  width: max-content;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-3);
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  transition:
    gap 260ms cubic-bezier(0.34, 1.4, 0.5, 1),
    padding 260ms cubic-bezier(0.34, 1.4, 0.5, 1),
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    box-shadow 240ms ease;
}
.atp-detail .atp-cableList__cartIco {
  display: inline-flex;
  flex: 0 0 auto;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.atp-detail .atp-cableList__cartIco svg { display: block; }
.atp-detail .atp-cableList__cartLabel {
  max-width: 0;
  opacity: 0;
  transform: translateX(-4px);
  overflow: hidden;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition:
    max-width 300ms cubic-bezier(0.34, 1.4, 0.5, 1),
    opacity 200ms ease 60ms,
    transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 40ms;
}
.atp-detail .atp-cableList__cart:hover .atp-cableList__cartInner,
.atp-detail .atp-cableList__cart:focus-visible .atp-cableList__cartInner {
  gap: 6px;
  padding: 0 11px 0 9px;
  background: var(--text);
  color: #fff;
  border-color: var(--text);
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.18);
}
.atp-detail .atp-cableList__cart:hover .atp-cableList__cartIco,
.atp-detail .atp-cableList__cart:focus-visible .atp-cableList__cartIco {
  transform: scale(1.08);
}
.atp-detail .atp-cableList__cart:hover .atp-cableList__cartLabel,
.atp-detail .atp-cableList__cart:focus-visible .atp-cableList__cartLabel {
  max-width: 130px; /* must clear "ADD TO CART" (uppercase Inter 10px) — 96px clipped it to "ADD TO CA". */
  opacity: 1;
  transform: translateX(0);
}
.atp-detail .atp-cableList__cart:active .atp-cableList__cartInner { transform: scale(0.96); }
.atp-detail .atp-cableList__cart.added .atp-cableList__cartInner {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.atp-detail .atp-cableList__cart.loading .atp-cableList__cartInner { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  .atp-detail .atp-cableList__cartInner,
  .atp-detail .atp-cableList__cartIco,
  .atp-detail .atp-cableList__cartLabel { transition: none; }
}
/* Owned-kit cables (faded) don't need a buy button. */
.atp-detail .atp-cableList__item.is-owned .atp-cableList__cart { display: none; }
/* ===== B2B sidebar: tool card / cables card separation ===== */
/* The cables card is a transparent container — the channel tiers inside are the
   actual bordered cards (so their overlapping pill badges read correctly). */
.atp-detail .atp-cablesCard {
  margin-top: var(--space-4, 16px);
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
.atp-detail .atp-cablesCard .atp-connCard__cables { margin-top: 0; }

/* "I already own" toolbar — horizontal tool toggles (KESS3 / Powergate). State
   is cached in localStorage; checking one fades + sinks the cables that ship in
   that tool's case. Logged-in only. */
.atp-detail .atp-ownedBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-4, 16px);
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.atp-detail .atp-ownedBar__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.atp-detail .atp-ownedToggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 6px 9px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-soft);
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  user-select: none;
}
.atp-detail .atp-ownedToggle:hover { border-color: var(--text-dim); }
.atp-detail .atp-ownedToggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.atp-detail .atp-ownedToggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}
.atp-detail .atp-ownedToggle__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.atp-detail .atp-ownedToggle__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
.atp-detail .atp-ownedToggle__state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--panel);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.atp-detail .atp-ownedToggle__state::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.15s ease;
}
/* Checked state — accent ring + filled dot. */
.atp-detail .atp-ownedToggle__input:checked ~ .atp-ownedToggle__state {
  border-color: #050505;
  background: #050505;
}
.atp-detail .atp-ownedToggle__input:checked ~ .atp-ownedToggle__state::after { transform: scale(1); }
.atp-detail .atp-ownedToggle:has(.atp-ownedToggle__input:checked) {
  background: #f2f1f1;
  border-color: #050505;
  color: #050505;
  box-shadow: 0 1px 3px rgba(5, 5, 5, 0.12);
}
.atp-detail .atp-ownedToggle:has(.atp-ownedToggle__input:checked) .atp-ownedToggle__label { color: #050505; }
.atp-detail .atp-ownedToggle__input:focus-visible ~ .atp-ownedToggle__icon { outline: 2px solid #050505; outline-offset: 2px; border-radius: 4px; }

/* Owned cable rows — faded, with an "In your kit" chip replacing the price. */
.atp-detail .atp-cableList__owned {
  display: none;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #050505;
  background: #f2f1f1;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: auto;
}
.atp-detail .atp-cableList__item.is-owned { opacity: 0.5; }
.atp-detail .atp-cableList__item.is-owned .atp-cableList__price { display: none; }
.atp-detail .atp-cableList__item.is-owned .atp-cableList__owned { display: inline-flex; }

/* Real product photos (from WooCommerce, by SKU) inside the cable thumb box —
   the image fills the box instead of the cable glyph. */
.atp-detail .atp-cableList__thumb--img {
  background: #fff;
  padding: 2px;
  overflow: hidden;
}
.atp-detail .atp-cableList__thumb--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 5px;
  display: block;
}

/* "Included with KESS3" — cables that ship inside the recommended KESS3 case
   (AV_Tool_Kits, alttune-vehicles). Same de-emphasis as owned: no price, a
   positive "included" pill instead. */
.atp-detail .atp-cableList__bundled {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--positive);
  background: rgba(57, 199, 219, 0.12);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.atp-detail .atp-cableList__item.is-bundled .atp-cableList__price { display: none; }
.atp-detail .atp-cableList__item.is-bundled { opacity: 0.78; }

/* Connection-method pictograms — replaces the text pills with the Kit Builder's
   ECU-method SVG icons (AV_Icons). Title + chips echo the cables-card styling. */
.atp-detail .atp-connMethods { margin-top: 14px; }
.atp-detail .atp-connMethods__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.atp-detail .atp-connMethods__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.atp-detail .atp-connMethod {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 5px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
}
.atp-detail .atp-connMethod__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--text);
}
.atp-detail .atp-connMethod__icon svg { width: 100%; height: 100%; display: block; }
.atp-detail .atp-connMethod__label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text);
}
/* Per-connection PRT (protocol number), shown after the label. */
.atp-detail .atp-connMethod__prt {
  margin-left: 1px;
  padding-left: 5px;
  border-left: 1px solid var(--line);
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* Protocol activations — a KESS3 licence. Rendered branching off the KESS3 tool
   row above via a left rail (aligned under the tool thumbnail) so it reads as
   something attached to the KESS3, not a separate standalone block. */
.atp-detail .atp-protoBlock {
  margin: 12px 0 0 25px;
  padding-left: 16px;
  border-left: 2px solid var(--line);
}
.atp-detail .atp-protoBlock__head { margin-bottom: 6px; }
.atp-detail .atp-protoBlock__title {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.atp-detail .atp-protoList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.atp-detail .atp-protoList__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.atp-detail .atp-protoTag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.atp-detail .atp-protoTag--obd   { background: #ecfdf5; color: #065f46; }
.atp-detail .atp-protoTag--bench { background: #eff6ff; color: #1e40af; }
/* Related protocol-activation product thumbnail (replaces the text tag). */
.atp-detail .atp-protoThumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.atp-detail .atp-protoThumb img { width: 100%; height: 100%; object-fit: contain; }
.atp-detail .atp-protoList__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.atp-detail .atp-protoList__name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
}
.atp-detail .atp-protoList__fam {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
}
/* Per-activation price, pushed to the right of the row (mirrors the cable price). */
.atp-detail .atp-protoList__price {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
/* "With activations" total under the tool price — mirrors the shop single-tool
   `.at-sp-head__addon-price` ("+ $X in add-ons" / "Total $Y"). */
.atp-detail .atp-toolRow__addonPrice {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.3;
}
.atp-detail .atp-toolRow__addonAdd { color: var(--text-soft); font-weight: 600; }
.atp-detail .atp-toolRow__addonTotal { color: var(--text); font-weight: 700; }
.atp-detail .atp-protoBlock__note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
}

/* Activation groups — OBD (99%) vs Bench/Boot (1%), mirroring the cable tiers.
   Each group is a bordered card with an overlapping pill badge (reusing the
   .atp-cableTier__badge styles). The advanced group is a collapsed <details>. */
.atp-detail .atp-protoGroup {
  position: relative;
  margin-top: 18px;
  padding: 16px 12px 12px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}
.atp-detail .atp-protoGroup:first-of-type { margin-top: 10px; }
/* Extra breathing room between groups so the advanced badge (which overhangs
   the card top by ~11px) doesn't sit flush against the OBD group above. */
.atp-detail .atp-protoGroup + .atp-protoGroup { margin-top: 30px; }
.atp-detail .atp-protoGroup__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}
.atp-detail .atp-protoGroup__title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.atp-detail .atp-protoGroup__hint {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
}
/* Advanced group collapsed by default — summary is the clickable header. */
.atp-detail .atp-protoGroup__summary {
  cursor: pointer;
  list-style: none;
}
.atp-detail .atp-protoGroup__summary::-webkit-details-marker { display: none; }
.atp-detail .atp-protoGroup__summary .atp-protoGroup__title { margin-right: auto; }
.atp-detail .atp-protoGroup--advanced[open] > .atp-protoGroup__summary .atp-cableTier__chevron {
  transform: rotate(180deg);
}
.atp-detail .atp-protoGroup--advanced:not([open]) .atp-protoGroup__head { margin-bottom: 0; }

/* Required-tool row (Alientech KESS3 Slave) — sits above the cable tiers; the
   tool that writes the files using the cables below. */
.atp-detail .atp-toolRow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 0;
  padding: 10px 0;
  border-radius: 0;
}
.atp-detail .atp-toolRow__thumb {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}
.atp-detail .atp-toolRow__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.atp-detail .atp-toolRow__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.atp-detail .atp-toolRow__label {
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}
.atp-detail .atp-toolRow__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.atp-detail .atp-toolRow__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1px;
}

/* Channel tiers — Kit-Builder style: each tier is its own bordered card with a
   pill badge overlapping the top border (MOST JOBS / ADVANCED JOBS), an OBD
   method icon in the header, and a neutral count pill. The cables card itself is
   a transparent container so the tier cards read as separate panels. */
.atp-detail .atp-cableTier--card {
  position: relative;
  margin-top: 20px;
  padding: 18px 16px 14px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
}
.atp-detail .atp-cableTier--primary { margin-top: 10px; }

/* Overlapping pill badge — anchored to the tier card's top-left corner. */
.atp-detail .atp-cableTier__badge {
  position: absolute;
  top: -11px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.atp-detail .atp-cableTier__badge--most     { background: #ecfdf5; color: #10664e; }
.atp-detail .atp-cableTier__badge--advanced { background: #1f2024; color: #fff; }
.atp-detail .atp-cableTier__badge--tool {     background: #fafafa; color: #050505; border: 1px solid var(--line-strong);}
.atp-detail .atp-cableTier__badgeIcon { display: inline-flex; }
.atp-detail .atp-cableTier__badgePct  { opacity: 0.75; margin-left: 1px; }

/* Tier header — method icon + title + count pill. */
.atp-detail .atp-cableTier__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
}
.atp-detail .atp-cableTier__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #050505;
}
.atp-detail .atp-cableTier__icon svg { width: 100%; height: 100%; display: block; }

/* ── Pin-count help ────────────────────────────────────────────────────────
 * Shown under the OBD cable list when a vehicle exposes more than one
 * diagnostic connector (umbrella make / multi-socket brand). Amber "note"
 * strip with an info icon that reveals the manual's connector diagram on
 * hover or keyboard focus, so the dealer can count the pins themselves. */
.atp-detail .atp-pinHelp {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 12px; /* sits directly under the tier header, above the cable list. */
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid rgba(220, 38, 38, 0.28);
  border-radius: 10px;
}
.atp-detail .atp-pinHelp__badge {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 1px;
  color: #dc2626;
}
.atp-detail .atp-pinHelp__msg {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #991b1b;
}
/* Inline info trigger — sits in the text flow at the end of the message. */
.atp-detail .atp-pinHelp__info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -3px;
  margin-left: 4px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.12);
  cursor: help;
  outline: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.atp-detail .atp-pinHelp__info:hover,
.atp-detail .atp-pinHelp__info:focus-visible {
  background: #dc2626;
  color: #fff;
}
.atp-detail .atp-pinHelp__infoIco { display: block; }
/* The diagram popover — hidden until the info icon is hovered/focused. */
.atp-detail .atp-pinHelp__pop {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  z-index: 30;
  width: 232px;
  transform: translate(-50%, 4px);
  padding: 7px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.atp-detail .atp-pinHelp__info:hover .atp-pinHelp__pop,
.atp-detail .atp-pinHelp__info:focus-visible .atp-pinHelp__pop,
.atp-detail .atp-pinHelp__info:focus-within .atp-pinHelp__pop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
/* Little arrow pointing down to the info icon. */
.atp-detail .atp-pinHelp__pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 1px 0 var(--line-strong));
}
.atp-detail .atp-pinHelp__popImg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.atp-detail .atp-pinHelp__popCap {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.atp-detail .atp-cableTier__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}

/* Advanced disclosure — same header row, clickable, chevron rotates on open. */
.atp-detail .atp-cableTier__summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.atp-detail .atp-cableTier__summary::-webkit-details-marker { display: none; }
.atp-detail .atp-cableTier__chevron {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--text-dim);
  transition: transform 0.18s ease;
}
.atp-detail .atp-cableTier--advanced[open] > .atp-cableTier__summary .atp-cableTier__chevron {
  transform: rotate(180deg);
}
.atp-detail .atp-cableTier__count {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  background: #f2f1f1;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: #4a4a4a;
  font-variant-numeric: tabular-nums;
}
.atp-detail .atp-cableTier__body {
  margin-top: 6px;
}
/* Locked advanced listing — padlock + note + login/register links, shown to
   non-dealers in place of the Bench/Boot/DTC cable rows. */
.atp-detail .atp-cableLock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 20px 16px;
  text-align: center;
  border: 1px dashed var(--line-strong, rgba(15, 23, 42, 0.18));
  border-radius: 12px;
  background: var(--panel-2, #f4f6f9);
}
.atp-detail .atp-cableLock__icon {
  display: inline-flex;
  color: var(--text-dim, rgba(17, 24, 39, 0.52));
}
.atp-detail .atp-cableLock__msg {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim, rgba(17, 24, 39, 0.6));
}
.atp-detail .atp-cableLock__links {
  margin: 2px 0 0;
  display: flex;
  gap: 16px;
}
.atp-detail .atp-cableLock__link {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
  /* button reset (the "Login" trigger is a <button>) */
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.atp-detail .atp-cableLock__link:hover {
  color: var(--accent, #f26921);
}

/* ---- Dealer login modal -------------------------------------------------- */
.atp-dealerModal[hidden] { display: none; }
.atp-dealerModal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.atp-dealerModal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, 0.55);
  backdrop-filter: blur(2px);
}
.atp-dealerModal__dialog {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 16px;
  padding: 26px 24px 22px;
  box-shadow: 0 30px 80px rgba(8, 10, 14, 0.35);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: #111827;
}
.atp-dealerModal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: rgba(17, 24, 39, 0.5);
  cursor: pointer;
}
.atp-dealerModal__close:hover { color: #111827; }
.atp-dealerModal__head { text-align: center; margin-bottom: 16px; }
.atp-dealerModal__icon { color: rgba(17, 24, 39, 0.7); }
.atp-dealerModal__title { margin: 6px 0 4px; font-size: 18px; font-weight: 700; }
.atp-dealerModal__sub { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(17, 24, 39, 0.6); }
.atp-dealerModal__form { display: flex; flex-direction: column; gap: 12px; }
.atp-dealerField { display: flex; flex-direction: column; gap: 5px; }
.atp-dealerField__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 0.55);
}
.atp-dealerField input {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 14px;
  color: #111827;
  background: #f4f6f9;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 10px;
}
.atp-dealerField input:focus {
  outline: none;
  border-color: var(--accent, #f26921);
  box-shadow: 0 0 0 3px rgba(242, 105, 33, 0.12);
  background: #fff;
}
.atp-dealerModal__error {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #b42318;
}
.atp-dealerModal__error[hidden] { display: none; }
/* Submit reuses the theme button (.at-btn .at-btn-primary — black w/ orange
   wipe-in hover); only layout is set here. */
.atp-dealerModal__submit {
  margin-top: 6px;
  width: 100%;
  justify-content: center;
}
.atp-dealerModal__submit.is-loading,
.atp-dealerModal__submit:disabled { opacity: 0.6; cursor: default; }
.atp-dealerModal__foot { margin: 12px 0 0; text-align: center; font-size: 13px; color: rgba(17, 24, 39, 0.6); }
.atp-dealerModal__foot a { color: var(--accent, #f26921); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
html.atp-dealer-open { overflow: hidden; }

/* Confirmation de connexion : ouverture simple du cadenas.
   Un cache couleur-fond (#fff = fond du dialog) grandit du bas vers le haut par-dessus
   l'anse (shackle) et l'efface progressivement -> illusion que l'anse se retire = ouvert.
   Pas de rotation/rebond : juste le cache + la teinte verte + le check qui apparait. */
.atp-dealerModal__icon svg { overflow: visible; position: relative; z-index: 0; }
.atp-dealerModal__icon { position: relative; display: inline-block; }
.atp-dealerModal__icon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 54%;            /* la ligne haute du corps du cadenas */
  width: 46%;
  height: 48%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center;
  background: #fff;       /* = fond .atp-dealerModal__dialog */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}
.atp-dealerModal.is-unlocked .atp-dealerModal__icon::before {
  transform: translateX(-50%) scaleY(1);
}
.atp-dealerLock__check {
  opacity: 0;
  transition: opacity 0.3s ease 0.32s;
}
.atp-dealerModal.is-unlocked .atp-dealerModal__icon {
  color: #16a34a;
  transition: color 0.3s ease;
}
.atp-dealerModal.is-unlocked .atp-dealerLock__check { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .atp-dealerModal__icon::before,
  .atp-dealerLock__check,
  .atp-dealerModal.is-unlocked .atp-dealerModal__icon { transition: none; }
}
.atp-detail .atp-cableSub {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.atp-detail .atp-cableSub:first-child {
  margin-top: 8px;
  padding-top: 0;
  border-top: none;
}
.atp-detail .atp-cableSub__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}
.atp-detail .atp-cableSub__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  background: #f2f1f1;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #4a4a4a;
  font-variant-numeric: tabular-nums;
}
/* Channel tag chips — same palette as the Kit Builder channel tags. */
.atp-detail .atp-cableSub__tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.atp-detail .atp-cableSub__tag--bench { background: #eff6ff; color: #1e40af; }
.atp-detail .atp-cableSub__tag--boot  { background: #f5f3ff; color: #5b21b6; }
.atp-detail .atp-cableSub__tag--dtc   { background: #fff7ed; color: #9a3412; }

/* Per-row channel chip (OBD / Bench / Boot / DTC) beside the cable name. */
.atp-detail .atp-cableList__chTag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.atp-detail .atp-cableList__chTag--bench { background: #eff6ff; color: #1e40af; }
.atp-detail .atp-cableList__chTag--boot  { background: #f5f3ff; color: #5b21b6; }
.atp-detail .atp-cableList__chTag--dtc   { background: #fff7ed; color: #9a3412; }
/* OBD channel shown as its connector icon (cleaner than the "OBD" text chip). */
.atp-detail .atp-cableList__chIco {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: middle;
  color: var(--text-dim);
}
.atp-detail .atp-cableList__chIco svg { display: block; }

/* Trimmed tool promo under the B2B card. */
.atp-detail .ettToolSection--b2b { margin-top: 16px; }
.atp-detail .ettOption__noneToggle.is-selected .ettOption__noneToggle__check::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

/* ---- Sidebar: price summary ---- */
.atp-detail .ettVehicle__priceSection {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.atp-detail .ettVehicle__priceLine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-soft);
}
.atp-detail .ettVehicle__priceLine--total {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 12px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.atp-detail .ettVehicle__priceValue {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.atp-detail .ettVehicle__priceTotal { font-size: 20px; }

/* ---- Sidebar: tool promo ---- */
.atp-detail .ettToolSection {
  display: flex;
  gap: 16px;
  padding: var(--space-4);
  margin-top: var(--space-4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.atp-detail .ettToolSection__image { flex-shrink: 0; width: 96px; }
.atp-detail .ettToolSection__image img { width: 100%; height: auto; display: block; }
.atp-detail .ettToolSection__body { flex: 1; min-width: 0; }
.atp-detail .ettToolSection__titleRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.atp-detail .ettToolSection__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.atp-detail .ettToolSection__infoBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.atp-detail .ettToolSection__infoBtn:hover { color: var(--accent); border-color: var(--accent); }
.atp-detail .ettToolSection__desc {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
}
.atp-detail .ettToolSection__note {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}

/* ---- Tuning-tool reference inside a connection card + "contact us" ---- */
.atp-detail .atp-toolPromoCard .ettToolSection { margin: 0; }

/* "or use this tool" rule between the two tool rows in the primary tool card. */
.atp-detail .atp-toolPromoCard__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.atp-detail .atp-toolPromoCard__or::before,
.atp-detail .atp-toolPromoCard__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Scanner tool row (enquiry-only, no price): align to top so the note wraps
   cleanly, and give the "we can supply it" line a muted style. */
.atp-detail .atp-toolRow--enquiry { align-items: flex-start; }
.atp-detail .atp-toolRow__enquiry {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-soft);
}
.atp-detail .atp-toolPromoCard__contact {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
}
.atp-detail .atp-toolPromoCard__contactLink {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.atp-detail .atp-toolPromoCard__contactLink:hover,
.atp-detail .atp-toolPromoCard__contactLink:focus-visible { color: var(--text); }

/* ---- Enquiry modal ---- */
html.atp-enquiry-open { overflow: hidden; }
.atp-detail .atp-enquiryModal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.atp-detail .atp-enquiryModal[hidden] { display: none; }
.atp-detail .atp-enquiryModal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(2px);
}
.atp-detail .atp-enquiryModal__dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--panel, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  padding: 22px;
}
.atp-detail .atp-enquiryModal__close {
  position: absolute;
  top: 10px; right: 12px;
  width: 32px; height: 32px;
  border: 0; background: none;
  font-size: 24px; line-height: 1;
  color: var(--text-dim);
  cursor: pointer;
}
.atp-detail .atp-enquiryModal__close:hover { color: var(--text); }
.atp-detail .atp-enquiryModal__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-right: 28px;
}
.atp-detail .atp-enquiryModal__img {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  object-fit: contain;
  border-radius: 12px;
  background: var(--panel-3, #f1f5f9);
  padding: 6px;
}
.atp-detail .atp-enquiryModal__headText { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.atp-detail .atp-enquiryModal__kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim);
}
.atp-detail .atp-enquiryModal__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.atp-detail .atp-enquiryModal__vehicle { font-size: 13px; color: var(--text-soft); }

/* ---- Tool info modal ---- */
.atp-detail .ettToolModal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.atp-detail .ettToolModal[hidden] { display: none; }
.atp-detail .ettToolModal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
.atp-detail .ettToolModal__dialog {
  position: relative;
  width: 90%;
  max-width: 460px;
  padding: 28px 30px;
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}
.atp-detail .ettToolModal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--text-dim);
  cursor: pointer;
}
.atp-detail .ettToolModal__close:hover { color: var(--text); }
.atp-detail .ettToolModal__title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 800;
}
.atp-detail .ettToolModal__list {
  margin: 0 0 14px;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--text-soft);
}
.atp-detail .ettToolModal__note,
.atp-detail .ettToolModal__disclaimer {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}

/* ---- "Get your File" CTA — matches the /vehicles/ filter "Apply" button:
   solid-black resting state, white text, an orange skewed sweep that slides in
   on hover via a ::before pseudo. Resting transform uses -103% (NOT -101%) so
   the skewed tip never peeks out of the left edge when unhovered. ---- */
.atp-detail .ettVehicle__addToCartBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-top: var(--space-4);
  padding: 0 22px;
  background: #050505;
  color: #ffffff;
  border: 1px solid #050505;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    color 620ms cubic-bezier(.32, .72, 0, 1),
    border-color 620ms cubic-bezier(.32, .72, 0, 1),
    letter-spacing 620ms cubic-bezier(.32, .72, 0, 1);
}
.atp-detail .ettVehicle__addToCartBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #F26921;
  transform: translate3d(-103%, 0, 0) skewX(-8deg);
  transform-origin: left center;
  transition: transform 620ms cubic-bezier(.32, .72, 0, 1);
  z-index: -1;
}
.atp-detail .ettVehicle__addToCartBtn:hover,
.atp-detail .ettVehicle__addToCartBtn:focus-visible {
  background: #050505;
  border-color: #F26921;
  letter-spacing: 0.18em;
  color: #ffffff;
  outline: none;
}
.atp-detail .ettVehicle__addToCartBtn:hover::before,
.atp-detail .ettVehicle__addToCartBtn:focus-visible::before {
  transform: translate3d(0, 0, 0) skewX(0deg);
}

/* ---- Mobile sticky bottom bar ---- */
.atp-detail .ettVehicle__stickyBar { display: none; }
@media (max-width: 1023px) {
  .atp-detail .ettVehicle__stickyBar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--panel);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
    padding: 12px 16px;
    z-index: 1040;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .atp-detail .ettVehicle__stickyPrice {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text);
  }
  .atp-detail .ettVehicle__addToCartBtn--sticky {
    width: auto;
    margin-top: 0;
    height: 44px;
    padding: 0 22px;
  }
  .atp-detail .ettVehicle__sidebar .ettVehicle__addToCartBtn { display: none; }
  .atp-detail .ettVehicle { padding-bottom: 80px; }
}

/* ============================================================
   Tuning archive pages (/tuning/, /tuning/{make}/, /tuning/{make}/{model}/)
   ============================================================ */
.atp-detail .atp-archive { max-width: 1100px; margin: 0 auto; }
.atp-detail .atp-archive__header { margin-bottom: var(--space-6); }
.atp-detail .atp-archive__header .ettVehicle__title { margin: 0 0 8px; }
.atp-detail .atp-archive__empty { color: var(--text-soft); }
/* Unified index catalogue: sections + noscript + breadcrumb spacing. */
#atp-app-catalogue { margin-top: var(--space-6); }
.atp-detail .atp-archive__crumb { margin-bottom: var(--space-4); }
.atp-detail .atp-archive__section { margin-top: var(--space-6); }
.atp-detail .atp-archive__sectionTitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--space-3);
}
.atp-detail .atp-archive__noscript {
  margin: 0 0 var(--space-4);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-2);
  color: var(--text-soft);
  font-size: 13px;
}
.atp-detail .atp-archive__card--type .atp-archive__cardName { text-transform: capitalize; }
/* Fiche: sibling-variant internal links. */
.atp-detail .atp-siblings__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.atp-detail .atp-siblings__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.atp-detail .atp-siblings__link:hover { border-color: var(--accent); transform: translateY(-1px); }
.atp-detail .atp-siblings__name { font-weight: 600; font-size: 13.5px; }
.atp-detail .atp-siblings__power { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.atp-detail .atp-siblings__more { margin: var(--space-4, 16px) 0 0; font-size: 13px; }

/* Brand + model grids (cards). */
.atp-detail .atp-archive__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.atp-detail .atp-archive__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--motion-fast), transform var(--motion-fast);
}
.atp-detail .atp-archive__card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.atp-detail .atp-archive__cardName { font-weight: 600; font-size: 14px; }
.atp-detail .atp-archive__cardCount {
  flex-shrink: 0;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Model archive: variant list (each links to a fiche). */
.atp-detail .atp-archive__variants { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.atp-detail .atp-archive__variantLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--motion-fast), transform var(--motion-fast);
}
.atp-detail .atp-archive__variantLink:hover { border-color: var(--accent); transform: translateY(-1px); }
.atp-detail .atp-archive__variantMain { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.atp-detail .atp-archive__variantTitle { font-weight: 600; font-size: 14px; }
.atp-detail .atp-archive__variantPower { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.atp-detail .atp-archive__variantRight { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.atp-detail .atp-archive__variantGain {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.atp-detail .atp-archive__variantArrow { color: var(--text-dim); display: inline-flex; }
.atp-detail .atp-archive__variantLink:hover .atp-archive__variantArrow { color: var(--accent); }

.atp-detail .atp-archive__back { margin-top: var(--space-6); }

/* Make archive hero: brand logo (car-logos-dataset thumb) or monogram. */
.atp-detail .atp-archive__header--brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.atp-detail .atp-archive__brandLogo {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 50%;
  overflow: hidden;
}
.atp-detail .atp-archive__brandLogo img {
  max-width: 52px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.atp-detail .atp-archive__brandLogo--mono {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-soft);
  background: var(--panel-2);
}
.atp-detail .atp-archive__headerText { min-width: 0; }

/* SSR model cards: stacked name + meta (variants / best gain). */
.atp-detail .atp-archive__card--model {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}
.atp-detail .atp-archive__cardMeta {
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.atp-detail .atp-archive__cardGain { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* Per-brand factual content block under the make archive / cascade grid. */
.atp-brand-content .app-frame { padding-top: 0; }
.atp-brand-content__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-7);
  color: var(--text);
}
.atp-brand-content__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}
.atp-brand-content__subtitle {
  font-size: 15px;
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-3);
}
.atp-brand-content__lead,
.atp-brand-content__facts {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-soft);
}
.atp-brand-content__facts { margin-top: var(--space-4); }
/* "Most popular models" as a horizontal swiper: it scrolls (snaps) when there
   are more models than fit, and just sits in a row when there are few. A soft
   linear-gradient mask fades the cards out at whichever edge still has more to
   scroll (toggled from JS via .is-fade-l / .is-fade-r) so an overflowing row
   reads as "there's more →" instead of being hard-clipped by the container. */
.atp-brand-content__models {
  list-style: none;
  /* overflow-x:auto force overflow-y a "auto" (plus visible) : le lift hover
     (translateY -6px + ombre) se faisait cropper en haut/bas. On ajoute du padding
     vertical pour la marge de debordement, neutralise par des marges negatives egales
     -> les cartes au repos ne bougent pas, mais le hover a la place de respirer. */
  margin: -14px 0 -18px;
  padding: 14px 0 24px;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  --fade-l: 0px;
  --fade-r: 0px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),
    transparent 100%
  );
  transition:
    -webkit-mask-image var(--motion-base),
    mask-image var(--motion-base);
}
.atp-brand-content__models.is-fade-l { --fade-l: 32px; }
.atp-brand-content__models.is-fade-r { --fade-r: 64px; }
/* Hide the native scrollbar — the edge fade + snap carry the affordance. */
.atp-brand-content__models { scrollbar-width: none; }
.atp-brand-content__models::-webkit-scrollbar { width: 0; height: 0; }
/* Grab cursor while dragging the swiper with a pointer. */
.atp-brand-content__models.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  -webkit-mask-image: none;
          mask-image: none;
}
.atp-brand-content__models.is-dragging a { pointer-events: none; }
.atp-brand-content__models li {
  flex: 0 0 auto;
  width: 210px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
  will-change: transform;
  transition:
    transform 0.32s cubic-bezier(0.22, 0.61, 0.18, 1),
    box-shadow 0.32s cubic-bezier(0.22, 0.61, 0.18, 1),
    border-color 0.32s ease;
}
/* Delightful hover: the card lifts on a soft spring while its photo gently
   zooms behind the rounded mask. Only image cards get the lift so text-only
   rows stay calm. */
.atp-brand-content__model--hasImage:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px -10px rgba(17, 24, 39, 0.28);
  border-color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .atp-brand-content__models li,
  .atp-brand-content__modelThumb img { transition: none; }
  .atp-brand-content__model--hasImage:hover { transform: none; }
}
.atp-brand-content__models a {
  color: var(--text);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
}
.atp-brand-content__models a:hover { color: var(--accent); }
.atp-brand-content__modelMeta { font-size: 12px; font-weight: 400; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Optional model illustration (seeded from real job-popularity data). The
   anchor now carries name + meta (+ thumb) so it stays a single hit target. */
.atp-brand-content__modelLink {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  text-decoration: none;
}
.atp-brand-content__modelThumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin-bottom: 8px;
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  background: var(--line);
}
.atp-brand-content__modelThumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001); /* promote to its own layer for crisp scaling */
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.18, 1);
}
.atp-brand-content__model--hasImage:hover .atp-brand-content__modelThumb img {
  transform: scale(1.09);
}
.atp-brand-content__modelName { font-weight: 600; font-size: 13.5px; }

/* Brand identity header (logo + name) at the top of the per-brand block. */
.atp-brand-content__brandHead {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.atp-brand-content__brandLogo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: transparent;
  overflow: hidden;
}
.atp-brand-content__brandLogo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.atp-brand-content__brandLogo--mono { font-size: 22px; font-weight: 800; color: var(--accent); }
/* Vehicle-type icon badge (type archive): tint the AV_Icons SVG with the accent. */
.atp-brand-content__brandLogo--icon { color: var(--accent); }
.atp-brand-content__brandLogo--icon svg { width: 34px; height: 34px; display: block; }
.atp-brand-content__brandName {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Inline variant: the block relocated by JS ABOVE the "Current step" toolbar.
   Condensed padding + tighter type so it reads as a compact intro card. */
.atp-brand-content__inner--inline {
  max-width: none;
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.atp-brand-content__inner--inline .atp-brand-content__brandHead { margin-bottom: var(--space-3); }
.atp-brand-content__inner--inline .atp-brand-content__title { font-size: 16px; margin-bottom: var(--space-2); }
.atp-brand-content__inner--inline .atp-brand-content__lead,
.atp-brand-content__inner--inline .atp-brand-content__facts { font-size: 13px; line-height: 1.55; }
.atp-brand-content__inner--inline .atp-brand-content__facts { margin-top: var(--space-4); }

/* Model-level layout: when a vehicle hero image exists, the inline intro card
   splits into two columns — text body on the left, the vehicle photo filling
   the right. Scoped with :has() so make/type cards (no hero) are untouched. */
.atp-brand-content__inner--inline:has(.atp-brand-content__hero) {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
}
/* Content takes two thirds, the vehicle photo one third. */
.atp-brand-content__body {
  min-width: 0;
  flex: 2 1 0;
}
.atp-brand-content__hero {
  flex: 1 1 0;
  align-self: stretch;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--line);
}
.atp-brand-content__hero img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
}
@media (max-width: 820px) {
  .atp-brand-content__inner--inline:has(.atp-brand-content__hero) {
    flex-direction: column;
  }
  .atp-brand-content__hero {
    flex-basis: auto;
    max-width: none;
    aspect-ratio: 16 / 9;
  }
}

/* "Most popular …" lives OUTSIDE the text card — its own full-width block (no
   card chrome), with the models as a horizontal swiper. */
.atp-brand-content__popular {
  margin: 0 0 var(--space-4);
}
.atp-brand-content__popular .atp-brand-content__subtitle {
  margin: 0 0 var(--space-3);
}

/* No-JS fallback: the standalone block is NOT relocated, so stop its .atp-app
   root from being a full-viewport-tall, vertically-centered island. */
.atp-app.atp-brand-content { min-height: 0; }

/* --- Horizontal step breadcrumb (main column, under "Current step") --------- */
.atp-app .selection-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.atp-app .selection-steps:empty { display: none; }
.atp-app .selection-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-dim);
  font-family: inherit;
  text-align: left;
  transition:
    border-color var(--motion-fast),
    color var(--motion-fast),
    background-color var(--motion-fast);
}
.atp-app button.selection-step { cursor: pointer; }
.atp-app button.selection-step:hover { border-color: var(--line-strong); color: var(--text); }
.atp-app .selection-step.is-complete { color: var(--text); }
.atp-app .selection-step.is-current {
  border-color: var(--rubber-black);
  background: rgba(15, 23, 42, 0.03);
  color: var(--rubber-black);
}
.atp-app .selection-step.is-upcoming { opacity: 0.55; }
.atp-app .selection-step__label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.atp-app .selection-step.is-current .selection-step__label { color: var(--rubber-black); }
.atp-app .selection-step__value { font-size: 0.82rem; font-weight: 600; }
.atp-app .selection-step__sep {
  display: inline-flex;
  align-items: center;
  color: var(--line-strong);
  font-size: 1rem;
}

@media (max-width: 600px) {
  .atp-detail .atp-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atp-detail .atp-archive__header--brand { gap: var(--space-3); }
  .atp-detail .atp-archive__brandLogo { width: 56px; height: 56px; }
  .atp-detail .atp-archive__brandLogo img { max-width: 40px; max-height: 40px; }
}

/* Grouped result card = variant CHOOSER. The header does NOT open a result; the
   user must pick the exact variant below (gearbox / ECU / power). */
.atp-app .selection-card-result--group { cursor: pointer; }
/* The result card is display:grid + overflow:hidden; its rows (head/body) are
   grid items that default to min-width:auto, so a long ECU name inside the
   variant chooser pushed the whole body past the card's right edge and got
   clipped. min-width:0 lets the body shrink to the card width so inner content
   (the ECU name) truncates instead of overflowing. */
.atp-app .selection-card-result .result-card-head,
.atp-app .selection-card-result .result-card-body { min-width: 0; }
/* min-width:0 so the chooser shrinks to the card width: the card is a grid with
   overflow:hidden, and grid items default to min-width:auto, so the variant rows'
   min-content (long ECU names + nowrap power) otherwise pushed the panel past the
   card's right edge and got clipped. With min-width:0 the row's ECU truncates
   instead, keeping the power + count badge visible. */
.atp-app .result-card-variants { margin-top: 12px; min-width: 0; }
.atp-app .result-card-variants ul,
.atp-app .result-card-variant-row,
.atp-app .result-card-variants > summary.result-card-variants-cta { min-width: 0; }

/* The summary is a clear call to action ("Choose your variant" + count). */
.atp-app .result-card-variants > summary.result-card-variants-cta {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px;
  background: rgba(127, 127, 127, .06); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--text);
  transition: background .15s ease, border-color .15s ease;
}
.atp-app .result-card-variants > summary.result-card-variants-cta:hover {
  background: rgba(127, 127, 127, .11); border-color: var(--text-dim);
}
.atp-app .result-card-variants > summary::-webkit-details-marker { display: none; }
.atp-app .result-card-variants .rcv-cta-label { flex: 1 1 auto; }
.atp-app .result-card-variants .rcv-cta-count {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(127, 127, 127, .18); color: var(--text);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.atp-app .result-card-variants > summary::after {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px;
  border-right: 1.6px solid var(--text-dim); border-bottom: 1.6px solid var(--text-dim);
  transform: rotate(45deg); transition: transform .2s ease;
}
.atp-app .result-card-variants[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }

/* Nudge: clicking the card header pulses the chooser to draw the eye to it. */
.atp-app .result-card-variants.is-nudge > summary.result-card-variants-cta { animation: rcvNudge .6s ease; }
@keyframes rcvNudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(127, 127, 127, 0); }
  30%      { box-shadow: 0 0 0 3px rgba(127, 127, 127, .2); }
}

.atp-app .result-card-variants ul { list-style: none; margin: 6px 0 0; padding: 0; }
.atp-app .result-card-variant-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px; border-radius: 8px; font-size: 12.5px; color: var(--text);
  cursor: pointer; transition: background .15s ease;
}
.atp-app .result-card-variant-row + .result-card-variant-row { box-shadow: inset 0 1px 0 var(--line); }
.atp-app .result-card-variant-row:hover { background: rgba(127, 127, 127, .08); }
.atp-app .result-card-variant-row:focus-visible { outline: 2px solid var(--text-dim); outline-offset: -2px; }
.atp-app .result-card-variant-row .rcv-year { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.atp-app .result-card-variant-row .rcv-trim { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.atp-app .result-card-variant-row .rcv-trans { flex: 0 0 auto; font-weight: 700; font-size: 11px; letter-spacing: .02em; color: var(--text); }
.atp-app .result-card-variant-row .rcv-code {
  flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 4px;
  background: var(--panel-3, rgba(127, 127, 127, .12)); color: var(--text);
}
.atp-app .result-card-variant-row .rcv-ecu {
  flex: 1 1 auto; min-width: 0; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atp-app .result-card-variant-row .rcv-hp {
  flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; color: var(--text);
}
.atp-app .result-card-variant-row .rcv-gain {
  flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 11px;
  white-space: nowrap; padding: 1px 6px; border-radius: 4px;
  background: rgba(45, 178, 96, .14); color: #2db260;
}
.atp-app .result-card-variant-row .rcv-go {
  align-self: center; color: var(--text-dim); font-size: 16px; line-height: 1;
  transition: transform .12s ease, color .12s ease;
}
.atp-app .result-card-variant-row:hover .rcv-go { transform: translateX(2px); color: var(--text); }

/* Brand name under a logo card (light grey) — disambiguates shared/aliased logos. */
.atp-app .make-logo-name {
  margin-top: -6px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.2;
}

/* Year range filter (search sidebar) — two compact From/To selects. */
.year-range {
  display: flex;
  gap: 10px;
}
.year-range__field {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.year-range__label {
  font-size: 12px;
  color: var(--text-dim, #64748b);
}
.year-range__select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* ============================================================================
 * Make-step extras: "Most popular brands" grid + A-Z filter bar.
 * Rendered above #selection-stage on the LIGHT cascade content area; shown by
 * atp-search.js only on the make step.
 * ========================================================================== */
.atp-app .atp-make-extras { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-6); }
.atp-app .atp-make-extras[hidden] { display: none; }

/* --- Most popular brands (6 per row desktop; 12 collapsed, View more -> 20) --- */
.atp-app .atp-popular { display: flex; flex-direction: column; gap: var(--space-3); }
.atp-app .atp-popular[hidden] { display: none; }
.atp-app .atp-popular__title {
  margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim);
}
.atp-app .atp-popular__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
}
.atp-app .atp-popular__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 104px; padding: var(--space-4) var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--panel); color: var(--text-soft); cursor: pointer; text-align: center;
  transition: border-color var(--motion-fast), background var(--motion-fast),
    transform var(--motion-fast), box-shadow var(--motion-fast);
}
.atp-app .atp-popular__tile:hover {
  border-color: var(--line-strong); color: var(--text); background: var(--panel-2);
  transform: translateY(-1px);
}
.atp-app .atp-popular__tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.atp-app .atp-popular__logo {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 40px;
}
.atp-app .atp-popular__logo img { max-width: 48px; max-height: 40px; width: auto; height: auto; object-fit: contain; display: block; }
.atp-app .atp-popular__logo--text { font-size: 1.1rem; font-weight: 700; color: var(--text-soft); }
.atp-app .atp-popular__name { font-size: 0.82rem; font-weight: 600; line-height: 1.2; }

/* View more / View less tile (last cell when collapsed / expanded). */
.atp-app .atp-popular__more { border-style: dashed; color: var(--text-dim); font-weight: 600; }
.atp-app .atp-popular__more:hover { color: var(--text); border-color: var(--line-strong); background: var(--panel-2); }
.atp-app .atp-popular__more-label { font-size: 0.85rem; }

/* --- A-Z filter bar --- */
.atp-app .atp-alpha[hidden] { display: none; }
.atp-app .atp-alpha__track { display: flex; flex-wrap: wrap; gap: 4px; }
.atp-app .atp-alpha__letter {
  min-width: 34px; height: 34px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--text-soft);
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--motion-fast), color var(--motion-fast), background var(--motion-fast);
}
.atp-app .atp-alpha__letter:hover:not(:disabled):not(.is-active) { border-color: var(--line-strong); color: var(--text); }
.atp-app .atp-alpha__letter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.atp-app .atp-alpha__letter.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.atp-app .atp-alpha__letter:disabled { opacity: 0.32; cursor: not-allowed; }

/* Responsive: fewer popular columns on smaller screens. */
@media (max-width: 1100px) { .atp-app .atp-popular__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .atp-app .atp-popular__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .atp-app .atp-popular__tile { min-height: 92px; }
  .atp-app .atp-alpha__letter { min-width: 30px; height: 32px; }
}
@media (max-width: 480px) { .atp-app .atp-popular__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Sticky-sidebar + scroll-offset fixes -------------------------------- */
/* The theme sets `html, body { overflow-x: hidden }` site-wide, which makes them
   scroll containers and breaks position:sticky for the filter sidebar. On pages
   that contain the app, relax it to overflow-x: clip — still no horizontal
   scroll, but sticky works again. */
html:has(.atp-app) { overflow-x: clip; }
body:has(.atp-app) { overflow-x: clip; }

/* Auto-scroll (search results, suggest jump) must clear the sticky theme nav,
   which was overlapping the top of the target (no scroll offset before). */
.atp-app .content-toolbar,
.atp-app .selection-stage,
.atp-app .result-view,
.atp-app #atp-tuning-options { scroll-margin-top: 110px; }

/* ===== Plate "fiche technique" (REGO search result heading) =================
   Replaces the plain search <h2> with a condensed, premium spec sheet of the
   plate-resolved vehicle. Grayscale by design — no orange unless essential. */
.atp-app .atp-plate-fiche[hidden] { display: none; }
.atp-app .atp-fiche { margin: 0 0 2px; }
.atp-app .atp-fiche__plate {
  display: inline-flex; align-items: stretch; height: 23px;
  margin: 0 0 12px;
  border: 1px solid var(--line-strong, #cdcabf); border-radius: 5px; overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.atp-app .atp-fiche__plateCountry {
  display: inline-flex; align-items: center; padding: 0 7px;
  background: var(--text, #15151a); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
}
.atp-app .atp-fiche__plateNo {
  display: inline-flex; align-items: center; padding: 0 11px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--text);
}
.atp-app .atp-fiche__name {
  margin: 0; line-height: 1.08;
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.01em;
  color: var(--text);
}
.atp-app .atp-fiche__year { font-weight: 500; color: var(--text-dim); margin-left: 8px; }
.atp-app .atp-fiche__specs {
  display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 14px 0 0; padding: 0;
}
.atp-app .atp-fiche__spec { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.atp-app .atp-fiche__spec dt {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-soft, #8a8980);
}
.atp-app .atp-fiche__spec dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text); }
.atp-app .atp-fiche__hint {
  margin: 10px 0 0; max-width: 46ch;
  font-size: 13px; line-height: 1.45; color: var(--text-dim);
}

/* ---- Animated hero background (assets/js/atp-hero-trails.js) -------------
 * The component injects a <canvas.atp-hero__trails> as the first child of the
 * shaped hero's photo surface. The canvas is opaque and covers the CSS photo
 * background, which therefore remains the NO-JS fallback. The hero's clip-path
 * clips the canvas to the shaped silhouette. prefers-reduced-motion: the script
 * paints a single static frame (no loop). */
.atp-app .atp-hero--shaped .atp-hero__photo > .atp-hero__trails {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
/* Mobile: once the content goes full-width, the trails' bright "hot zone"
   (anchored lower-right) bleeds behind the text and hurts legibility. Widen the
   canvas to the RIGHT (anchored left, right:auto -> no gap on the left; the
   clip-path trims the overflow) so that hot zone is pushed off-screen and the
   text sits over the calmer, darker left/centre of the wave. */
@media (max-width: 720px) {
  .atp-app .atp-hero--shaped .atp-hero__photo > .atp-hero__trails {
    right: auto;
    width: 130%;
  }
}

/* ====================================================================
   Search result cards (.atp-rcard) — grouped-variant aware. Variant-
   specific values appear globally only when every variant shares them;
   the variant table shows only the columns that actually differ.
   ==================================================================== */
.atp-app .selection-grid:has(.atp-rcard) { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); }
.atp-app .atp-rcard { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: box-shadow 0.16s ease, border-color 0.16s ease; cursor: pointer; animation: atp-soft-pop var(--motion-enter) both; animation-delay: var(--stagger, 0ms); transform-origin: center bottom; }
.atp-app .atp-rcard:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); border-color: var(--line-strong); }
.atp-app .atp-rcard__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.atp-app .atp-rcard__logo { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--panel); }
.atp-app .atp-rcard__logo img { width: 30px; height: 30px; object-fit: contain; }
.atp-app .atp-rcard__titlewrap { min-width: 0; }
.atp-app .atp-rcard__title { margin: 0; font-size: 1.1rem; letter-spacing: -0.01em; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; line-height: 1.2; color: var(--text); }
.atp-app .atp-rcard__model { font-weight: 600; }
.atp-app .atp-rcard__gen { font-weight: 500; color: var(--text-dim); }
.atp-app .atp-rcard__type { color: var(--text-dim); display: inline-flex; flex: 0 0 auto; align-self: center; }
.atp-app .atp-rcard__type svg { width: 17px; height: 17px; }
.atp-app .atp-rcard__subtitle { margin: 2px 0 0; font-size: 0.8rem; color: var(--text-dim); }
.atp-app .atp-rcard__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.atp-app .atp-rcard__chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 500; color: var(--text-soft); background: rgba(15, 23, 42, 0.03); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 5px 10px; }
.atp-app .atp-rcard__chipIcon { display: inline-flex; color: var(--text-dim); }
.atp-app .atp-rcard__chipIcon svg { width: 14px; height: 14px; }
.atp-app .atp-rcard__power { display: flex; gap: 12px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.atp-app .atp-rcard__gauge { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: rgba(15, 23, 42, 0.03); display: flex; align-items: center; justify-content: center; color: var(--text-soft); }
.atp-app .atp-rcard__gauge svg { width: 20px; height: 20px; }
.atp-app .atp-rcard__powerInfo { min-width: 0; flex: 1; }
.atp-app .atp-rcard__powerLine { margin: 0; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--text); }
.atp-app .atp-rcard__pwrArrow { color: var(--text-dim); font-weight: 400; }
.atp-app .atp-rcard__gainRange { margin: 3px 0 0; font-size: 0.82rem; color: #166534; font-weight: 500; }
.atp-app .atp-rcard__badges { display: flex; gap: 8px; margin-top: 7px; }
.atp-app .atp-rcard__gain { font-size: 0.74rem; font-weight: 600; color: #166534; background: #dcfce7; padding: 3px 9px; border-radius: 7px; }
.atp-app .atp-rcard__units { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.atp-app .atp-rcard__variants { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.atp-app .atp-rcard__variantsCta { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; font-size: 0.84rem; font-weight: 500; color: var(--text); background: var(--panel); }
.atp-app .atp-rcard__variantsCta::-webkit-details-marker { display: none; }
.atp-app .atp-rcard__variantsChev { color: var(--text-dim); display: inline-flex; align-items: center; transition: transform 0.18s; }
.atp-app .atp-rcard__variants[open] .atp-rcard__variantsChev { transform: rotate(180deg); }
.atp-app .atp-rcard__variants.is-nudge { animation: rcvNudge 0.6s ease; }
.atp-app .atp-rcard__vtable { border-top: 1px solid var(--line); font-size: 0.78rem; }
.atp-app .atp-rcard__vrow { display: grid; gap: 8px; align-items: center; padding: 9px 13px; text-decoration: none; color: var(--text); border-top: 1px solid var(--line); }
.atp-app .atp-rcard__vrow:first-child { border-top: 0; }
.atp-app a.atp-rcard__vrow:hover { background: rgba(15, 23, 42, 0.03); }
.atp-app .atp-rcard__vrow--head { color: var(--text-dim); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; background: rgba(15, 23, 42, 0.03); border-top: 0; }
.atp-app .atp-rcard__vcell--code { font-weight: 600; }
.atp-app .atp-rcard__vcell--ecu { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atp-app .atp-rcard__vgain { font-size: 0.66rem; font-weight: 600; color: #166534; background: #dcfce7; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.atp-app .atp-rcard__vrow--head .atp-rcard__vcell--gain { background: none; color: var(--text-dim); }
.atp-app .atp-rcard__cta { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 13px; border-radius: var(--radius-md); font-size: 0.84rem; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: var(--panel); color: var(--text); transition: background 0.15s, border-color 0.15s; }
.atp-app .atp-rcard__cta--view:hover { background: rgba(15, 23, 42, 0.03); }
.atp-app .atp-rcard__cta--select { position: relative; overflow: hidden; background: var(--text); color: #fff; border-color: var(--text); }
.atp-app .atp-rcard__cta--select::before { content: ""; position: absolute; inset: 0; background: #fff; transform: translate3d(-101%, 0, 0) skewX(-8deg); transform-origin: left center; transition: transform 540ms cubic-bezier(0.32, 0.72, 0, 1); z-index: 0; }
.atp-app .atp-rcard__cta--select:hover::before { transform: translate3d(0, 0, 0) skewX(0deg); }
.atp-app .atp-rcard__cta--select > span { position: relative; z-index: 1; transition: transform 540ms cubic-bezier(0.32, 0.72, 0, 1), color 340ms cubic-bezier(0.32, 0.72, 0, 1); }
.atp-app .atp-rcard__cta--select:hover > span { color: var(--text); }
.atp-app .atp-rcard__cta--select:hover .atp-rcard__ctaArrow { transform: translate3d(4px, 0, 0); }

/* ----- Mobile: rubber-black result tab bar (rtabs). ---------------------------
   On mobile the shared .at-pill-tabs bar was rendering on a white container
   (see the max-width:1023px block, background:#fff), which looked wrong against
   the dark page chrome. Restore the rubber-black look at the mobile breakpoint
   used by the rest of the site (720px). The visible bar colour comes from the
   .ettVehicle__rtabs container; the per-button background is set on the anchor
   selector as requested. Because the container is now dark:
     - inactive tab text (default var(--rubber-black)) would be dark-on-dark, so
       we lift it to on-dark secondary (steel-silver);
     - the active tab keeps its white text but its sliding rubber-black pill
       would vanish against the rubber-black bar, so we give the pill the brand
       orange fill to keep the active tab distinguishable.
   Font (mono / 9.5px / 700) is unchanged — set earlier at higher specificity. */
@media (max-width: 720px) {
  .atp-detail .ettVehicle__rtabs {
    background: var(--rubber-black, #050505);
    border-color: var(--rubber-black, #050505);
    box-shadow: 0 8px 28px rgba(5, 5, 5, 0.35);
  }
  .atp-detail .ettVehicle__rtab.at-pill-tabs__btn {
    background: var(--rubber-black, #050505);
    color: var(--fg-on-dark-2, #d9d8d8);
  }
  .atp-detail .ettVehicle__rtab.at-pill-tabs__btn.is-active {
    background: transparent;
    color: var(--fg-on-dark-1, #ffffff);
  }
  .atp-detail .ettVehicle__rtabs .at-pill-tabs__pill {
    background: var(--performance-orange, #f26921);
  }
}

/* Intro "See more": delightful fade-in of the revealed clause. */
@keyframes atpIntroReveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .atp-app .atp-hero--shaped .atp-hero__intro-rest { animation: none; } }

/* Mobile "See more" reveal of the features + count block: fade + small
   upward slide (see CHANGE 2 in the @media max-width:720px block). */
@keyframes atpHeroMoreReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .atp-app .atp-hero--shaped .atp-hero__intro-toggle-cb:checked ~ .atp-hero__features,
  .atp-app .atp-hero--shaped .atp-hero__intro-toggle-cb:checked ~ .atp-hero__count { animation: none; }
}

/* ============================================================================
   Mobile-only layout fixes — vehicle-type tiles + Filters/steps row
   (appended 2026-07-05; .bak-vtypesteps). Targets ~384px phones. Uses the
   ≤760px breakpoint already used by the type grid + content-toolbar column, so
   these rules win on both specificity (matching .atp-app scope + later source
   order) and cascade order. Desktop layout is untouched.
   ----------------------------------------------------------------------------
   FIX 1  Vehicle-type step: 2 -> 3 cards per row, with a smaller image/icon and
          title so three tiles fit cleanly at 384px without overflow.
   FIX 2  Filters button sits on the SAME ROW, to the LEFT of #selection-steps
          (both now share the .atp-steps-row wrapper in search.php). The steps
          are shrunk and allowed to scroll horizontally so the row never wraps.
   ========================================================================== */
@media (max-width: 760px) {
  /* ---- FIX 1: vehicle-type tiles → 3 per row ---- */
  .atp-app .selection-grid:has(.selection-card-type) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  /* Tighter tile so three fit: smaller min-height + padding. */
  .atp-app .selection-card-type {
    min-height: 116px;
    padding: 12px 6px;
  }
  .atp-app .selection-card-type .make-logo-wrap {
    gap: 8px;
  }
  /* Shrink the type photo. */
  .atp-app .selection-card-type .vehicle-type-image {
    max-width: 72px;
    height: 44px;
  }
  /* Shrink the icon tile (single-type SVG + the "All vehicles" cluster). */
  .atp-app .selection-card-type .vehicle-type-logo {
    width: 56px;
    height: 44px;
  }
  .atp-app .selection-card-type .vehicle-type-logo svg {
    width: 28px;
    height: 28px;
  }
  .atp-app .selection-card-type .vehicle-type-logo--all {
    width: auto;
    gap: 5px;
  }
  .atp-app .selection-card-type .vehicle-type-logo--all svg {
    width: 18px;
    height: 18px;
  }
  /* Smaller title so it fits the narrower tile. */
  .atp-app .selection-card-type .vehicle-type-logo-label {
    font-size: 0.72rem;
    line-height: 1.15;
    text-align: center;
  }

  /* ---- FIX 2: Filters button on the same row, left of #selection-steps ---- */
  .atp-app .atp-steps-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-2);
    min-width: 0;
  }
  /* Filters button: compact, first in the row, never shrinks away. */
  .atp-app .atp-steps-row .atp-filterToggle {
    margin: 0;
    flex: 0 0 auto;
    padding: 6px 12px;
    font-size: 0.78rem;
  }
  .atp-app .atp-steps-row .atp-filterToggle i {
    font-size: 0.95rem;
  }
  /* Steps take the rest of the row and scroll horizontally rather than wrap,
     so the Filters button + steps always stay on one line. */
  .atp-app .atp-steps-row .selection-steps {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
  }
  .atp-app .atp-steps-row .selection-steps::-webkit-scrollbar { display: none; }
  /* Smaller step chips so more fit before scrolling kicks in. */
  .atp-app .atp-steps-row .selection-step {
    flex: 0 0 auto;
    padding: 5px 10px;
    gap: 4px;
  }
  .atp-app .atp-steps-row .selection-step__label {
    font-size: 0.55rem;
    letter-spacing: 0.06em;
  }
  .atp-app .atp-steps-row .selection-step__value {
    font-size: 0.72rem;
  }
  .atp-app .atp-steps-row .selection-step__sep {
    font-size: 0.85rem;
  }
}