/**
 * 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: calc(var(--topbar-height) + var(--space-3));
  align-self: start;
  padding: var(--space-4);
  margin: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 130% 90% at 50% -35%, rgba(242, 105, 33, 0.11), transparent 52%),
    linear-gradient(180deg, #ffffff, var(--panel-2));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 10px 26px rgba(15, 23, 42, 0.07);
  max-height: calc(100vh - var(--topbar-height) - (var(--space-3) * 2));
  max-height: calc(100dvh - var(--topbar-height) - (var(--space-3) * 2));
  overflow: auto;
}

.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);
}

/* Search field: icon left, orange submit right. */
.atp-app .atp-hero__search {
  position: relative;
  display: block;
  margin: clamp(18px, 2.4vw, 26px) 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__photo { display: block; right: -290px; bottom: 0; width: 74%;}
  .atp-app .atp-hero__content,
  .atp-app .atp-hero__search { max-width: none; }
}

.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; }

/* 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; }
.atp-app .result-card-variants { margin-top: 12px; }

/* 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-trans { flex: 0 0 auto; font-weight: 700; font-size: 11px; letter-spacing: .02em; 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-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); }

/* 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);
}

/* 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;
}

.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;
}

/* 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;
  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-5);
  padding: 6px 0 14px;
}

.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;
}

.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);
  transition: top 80ms linear;
}

.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%);
  transition: top 80ms linear;
}

.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;
  transition: top 60ms linear, left 60ms linear;
}

.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-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. */
  .atp-app .performance-row-primary,
  .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) sits at the top of
   the /tuning/ index directly under the theme's fixed nav (~94px). Reserve the
   same clearance so its "Choose make" header isn't covered by the nav. */
.atp-app:not(.atp-detail) {
  padding-top: 104px;
  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;
    margin: 0 0 var(--space-4);
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .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);
  }
}

/* ----- 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);
}
.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; }

/* Padlock-opening confirmation animation (added on successful sign-in). */
.atp-dealerModal__icon svg { overflow: visible; }
.atp-dealerLock__shackle {
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-box: fill-box;
  transform-origin: 88% 100%;
}
.atp-dealerLock__check {
  opacity: 0;
  transition: opacity 0.25s ease 0.25s;
}
.atp-dealerModal.is-unlocked .atp-dealerModal__icon {
  color: #16a34a;
  animation: atp-lockPop 0.55s ease;
}
.atp-dealerModal.is-unlocked .atp-dealerLock__shackle { transform: rotate(-32deg) translateX(1px); }
.atp-dealerModal.is-unlocked .atp-dealerLock__check { opacity: 1; }
@keyframes atp-lockPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .atp-dealerLock__shackle,
  .atp-dealerLock__check,
  .atp-dealerModal.is-unlocked .atp-dealerModal__icon { transition: none; animation: 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; }
.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;
  margin: 0;
  padding: 0 0 6px;
  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; }
}