/**
 * Aalam Parts Finder — frontend page styles (Phase 3).
 *
 * Brand-neutral by default. Parts-index page (v1.0.1+) has dedicated brand
 * polish; other page types remain owner-overridable. Owner can override
 * via theme custom CSS or by dropping `aalam-parts-finder/frontend.css`
 * into the active theme (the plugin enqueues this file but a theme can
 * dequeue + replace).
 *
 * Mobile-first. Breakpoints at 600px (small tablet) and 960px (desktop).
 * Inverse mobile breakpoint for parts-index polish: `(max-width: 599px)`.
 */

/* --------------------------------------------------------------------------
 * Layout primitives
 * ----------------------------------------------------------------------- */

.apf-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 80px;
  font-size: 16px;
  line-height: 1.55;
  color: #1d2327;
}

body.apf-has-article .apf-main {
  max-width: none;
  width: 100%;
  padding: 0;
}

.apf-page-header,
.apf-vehicle-banner,
.apf-article-header {
  margin-bottom: 24px;
}

.apf-page-title {
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 8px;
  font-weight: 700;
}

.apf-page-subtitle,
.apf-vehicle-banner__sub {
  margin: 0;
  color: #50575e;
  font-size: 15px;
}

.apf-section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 12px;
}

@media (min-width: 600px) {
  .apf-main { padding: 32px 24px 80px; }
  .apf-page-title { font-size: 32px; }
  .apf-section-title { font-size: 20px; }
}

@media (min-width: 960px) {
  .apf-page-title { font-size: 36px; }
}

/* --------------------------------------------------------------------------
 * Breadcrumbs
 * ----------------------------------------------------------------------- */

.apf-breadcrumbs {
  font-size: 13px;
  color: #50575e;
  margin-bottom: 16px;
}
.apf-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.apf-breadcrumbs li + li::before {
  content: '›';
  margin-right: 8px;
  color: #999;
}
.apf-breadcrumbs a {
  color: #2271b1;
  text-decoration: none;
}
.apf-breadcrumbs a:hover { text-decoration: underline; }
.apf-breadcrumbs [aria-current="page"] {
  color: #1d2327;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Card grid (used for makes, models, years, categories)
 * ----------------------------------------------------------------------- */

.apf-card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.apf-card-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.apf-card-grid--3col    { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 600px) {
  .apf-card-grid          { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .apf-card-grid--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .apf-card-grid--3col    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .apf-card-grid          { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .apf-card-grid--compact { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .apf-card-grid--3col    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.apf-card {
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.apf-card:hover {
  border-color: #2271b1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.apf-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  text-align: center;
  color: #1d2327;
  text-decoration: none;
  min-height: 90px;
}
.apf-card-logo {
  max-width: 64px;
  max-height: 40px;
  object-fit: contain;
}
.apf-card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.apf-card-meta {
  font-size: 12px;
  color: #50575e;
}

/* --------------------------------------------------------------------------
 * Vehicle banner + spec strip
 * ----------------------------------------------------------------------- */

.apf-vehicle-banner {
  background: #f6f7f7;
  border: 1px solid #dcdcde;
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.apf-vehicle-banner--compact { padding: 14px 18px; }

@media (min-width: 600px) {
  .apf-vehicle-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
}

.apf-vehicle-spec-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.apf-vehicle-spec-strip > div { min-width: 0; }
.apf-vehicle-spec-strip dt {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #50575e;
  margin: 0;
}
.apf-vehicle-spec-strip dd {
  margin: 2px 0 0;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Article list (category page)
 * ----------------------------------------------------------------------- */

.apf-article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.apf-article-row {
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 6px;
}
.apf-article-row:hover { border-color: #2271b1; }
.apf-article-row__link {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  text-decoration: none;
  color: #1d2327;
}
.apf-article-row__thumb {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f7f7;
  border-radius: 4px;
  overflow: hidden;
}
.apf-article-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.apf-thumb-placeholder {
  font-size: 22px;
  color: #c3c4c7;
}
/* Phase 4-search.4: SVG icon variant for the no-media placeholder.
 * Many Tecdoc supplier records (e.g. Bosch on most aftermarket parts) ship
 * with `s3image: null` — the supplier just doesn't publish media. The SVG
 * cog signals "automotive part, no preview" cleanly instead of a bare "—". */
.apf-thumb-placeholder--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #b9bcbf;
}
.apf-thumb-placeholder--icon svg {
  width: 50%;
  height: 50%;
  max-width: 40px;
  max-height: 40px;
}
.apf-article-row__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.apf-article-row__title {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}
.apf-article-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
  color: #50575e;
}

.apf-supplier-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #edfaef;
  color: #14532d;
  border: 1px solid #b1dec0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.apf-supplier-badge--lg {
  padding: 4px 12px;
  font-size: 13px;
}
.apf-article-no {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  color: #50575e;
}
.apf-article-no--lg {
  font-size: 14px;
}

/* --------------------------------------------------------------------------
 * Article page
 * ----------------------------------------------------------------------- */

.apf-article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 960px) {
  .apf-article-grid {
    grid-template-columns: 1fr 320px;
    grid-template-areas:
      "gallery actions"
      "details actions";
    gap: 32px;
  }
  .apf-article-gallery { grid-area: gallery; }
  .apf-article-actions { grid-area: actions; }
  .apf-article-details { grid-area: details; }
}

.apf-gallery-main {
  background: #f6f7f7;
  border: 1px solid #dcdcde;
  border-radius: 6px;
  padding: 16px;
  text-align: center;
}
.apf-gallery-main img {
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
}
.apf-gallery-thumbs {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.apf-gallery-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  padding: 4px;
}
.apf-gallery-empty {
  background: #f6f7f7;
  border: 1px dashed #c3c4c7;
  border-radius: 6px;
  padding: 60px 20px;
  text-align: center;
  color: #50575e;
}

.apf-article-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 8px 0 0;
}

.apf-article-actions {
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.apf-fitment-confirm {
  margin: 0;
  padding: 10px 12px;
  background: #edfaef;
  color: #14532d;
  border: 1px solid #b1dec0;
  border-radius: 4px;
  font-size: 14px;
}

.apf-article-actions__note {
  margin: 0;
  font-size: 12px;
  color: #50575e;
}

.apf-specs-list {
  margin: 0 0 24px;
  padding: 0;
}
.apf-specs-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 2fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f1;
  font-size: 14px;
}
.apf-specs-row dt { color: #50575e; }
.apf-specs-row dd { margin: 0; font-weight: 500; }

.apf-oem-list,
.apf-compat-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  font-size: 13px;
}
@media (min-width: 600px) {
  .apf-oem-list,
  .apf-compat-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.apf-oem-row {
  padding: 4px 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}
.apf-oem-no { font-weight: 600; }
.apf-oem-brand { color: #50575e; margin-left: 8px; }

.apf-compat-more {
  margin: 0;
  font-size: 13px;
  color: #50575e;
  font-style: italic;
}

/* --------------------------------------------------------------------------
 * Engine-variant list (model page, since phase3.2)
 * ----------------------------------------------------------------------- */

.apf-engine-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apf-engine-row {
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.apf-engine-row:hover {
  border-color: #2271b1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.apf-engine-row__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  text-decoration: none;
  color: #1d2327;
}
.apf-engine-row__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.apf-engine-row__title {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}
.apf-engine-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 12px;
}
.apf-year-band {
  display: inline-block;
  padding: 2px 8px;
  background: #f0f6fc;
  color: #135e96;
  border: 1px solid #c3d4e6;
  border-radius: 4px;
  font-weight: 600;
}
.apf-spec-pill {
  display: inline-block;
  padding: 2px 8px;
  background: #f6f7f7;
  color: #50575e;
  border: 1px solid #dcdcde;
  border-radius: 4px;
}
.apf-engine-row__cta {
  font-size: 22px;
  color: #2271b1;
  font-weight: 700;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
 * Buttons
 * ----------------------------------------------------------------------- */

.apf-btn {
  display: inline-block;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.apf-btn--whatsapp {
  background: #25d366;
  color: #fff;
  border-color: #1faa53;
}
.apf-btn--whatsapp:hover {
  background: #1faa53;
  color: #fff;
}

/* v1.0.8 scoped override: inside any polished page wrapper, the WhatsApp
 * button defaults to the DESATURATED green and saturates UP to the brand
 * green on hover (inverted from the unscoped rule above). The unscoped
 * rule stays at brand saturation for vehicle / article / category-landing
 * / VIN-no-match templates that aren't part of the polish system. */
.apf-polish-v1 .apf-btn--whatsapp {
  background: var(--apf-whatsapp-green);
  color: #fff;
  border-color: var(--apf-whatsapp-green);
}
.apf-polish-v1 .apf-btn--whatsapp:hover,
.apf-polish-v1 .apf-btn--whatsapp:focus {
  background: var(--apf-whatsapp-green-hover);
  border-color: var(--apf-whatsapp-green-hover);
  color: #fff;
}

.apf-btn--primary { padding: 14px 22px; font-size: 16px; }

@media (max-width: 599px) {
  .apf-btn--sticky {
    position: sticky;
    bottom: 12px;
    z-index: 10;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  }
}

/* --------------------------------------------------------------------------
 * Aside blocks
 * ----------------------------------------------------------------------- */

.apf-vin-cta {
  margin-top: 32px;
  padding: 20px 22px;
  background: #f0f6fc;
  border: 1px solid #c3d4e6;
  border-radius: 8px;
}
.apf-vin-cta--secondary { margin-top: 24px; }
.apf-vin-cta p { margin: 8px 0 12px; }

.apf-trust-strip {
  margin-top: 28px;
  padding: 14px 18px;
  background: #fff;
  border: 1px dashed #dcdcde;
  border-radius: 6px;
}
.apf-trust-strip ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: #50575e;
}
@media (min-width: 600px) {
  .apf-trust-strip ul { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

.apf-empty {
  background: #fffbe6;
  border: 1px solid #f0d76c;
  border-radius: 6px;
  padding: 16px 18px;
  font-size: 14px;
  color: #674b00;
}

/* VIN no-match */

.apf-vin-confirm {
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.apf-vin-code {
  display: inline-block;
  padding: 4px 10px;
  background: #f6f7f7;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 13px;
}
.apf-vin-actions {
  margin-bottom: 28px;
}
.apf-vin-actions__note {
  margin-top: 12px;
  color: #50575e;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
 * VIN no-match decoded summary + disambiguation cards (Phase 4)
 * ----------------------------------------------------------------------- */

.apf-vin-decoded-summary {
  background: #edfaef;
  border: 1px solid #b1dec0;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.apf-vin-decoded-line {
  font-weight: 600;
  margin-left: 6px;
}
.apf-vin-decoded-extras {
  margin: 4px 0 0;
  color: #50575e;
  font-size: 13px;
}

.apf-vin-confirm-line {
  margin: 0 0 18px;
  color: #50575e;
}

.apf-vin-candidates {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.apf-vin-candidate {
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.apf-vin-candidate:hover {
  border-color: #2271b1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.apf-vin-candidate__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  text-decoration: none;
  color: #1d2327;
}
.apf-vin-candidate__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.apf-vin-candidate__heading {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: #50575e;
}
.apf-vin-candidate__mfr,
.apf-vin-candidate__model {
  font-weight: 600;
  color: #1d2327;
}
.apf-vin-candidate__engine {
  font-size: 16px;
  font-weight: 600;
}
.apf-vin-candidate__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: #2271b1;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}
.apf-vin-candidate:hover .apf-vin-candidate__cta {
  background: #135e96;
}
.apf-vin-candidate__score {
  margin: 0 20px 12px;
  padding: 0;
  font-size: 11px;
  color: #50575e;
  border-top: 1px dashed #dcdcde;
  padding-top: 8px;
}

.apf-vin-actions--disambiguate {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.apf-btn--secondary {
  background: #f6f7f7;
  color: #1d2327;
  border: 1px solid #dcdcde;
}
.apf-btn--secondary:hover {
  background: #ebebeb;
}

/* Template missing fallback (defensive) */
.apf-template-missing {
  padding: 40px 20px;
  text-align: center;
  color: #8a1f11;
  background: #fcf0f1;
  border: 1px solid #f4b1a8;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------------
 * Find-part results page (Phase 4-search.1)
 * URL: /find-part/?article_no=…
 * Re-uses .apf-article-list / .apf-article-row markup from category-page.
 * ---------------------------------------------------------------------------
 */

.apf-find-part-results {
  max-width: 900px;
  margin: 24px auto;
  padding: 0 16px;
}

.apf-find-part-header {
  margin-bottom: 24px;
}

.apf-find-part-title {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.3;
}

.apf-find-part-query {
  display: inline-block;
  padding: 2px 8px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9em;
  color: #1d2327;
  background-color: #f0f0f1;
  border-radius: 3px;
}

.apf-find-part-sub {
  margin: 0;
  font-size: 14px;
  color: #50575e;
  line-height: 1.5;
}

.apf-empty--find-part {
  margin-top: 18px;
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * Find-part info banner (Phase 4-search.1)
 * Surfaces OEM-placeholder and name-search-mode hints above the result list.
 * ---------------------------------------------------------------------------
 */
.apf-info-banner {
  margin: 16px auto 18px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
}
.apf-info-banner strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
}
.apf-info-banner span {
  display: block;
  color: inherit;
  opacity: 0.9;
}
.apf-info-banner--oem {
  background-color: #fff8e5;
  border: 1px solid #f0c33c;
  color: #6c4a00;
}
/* Phase 4-oem.1: green success variant for confirmed OEM matches. */
.apf-info-banner--oem-success {
  background-color: #f0f9f0;
  border: 1px solid #b8d8b8;
  color: #1a5f1a;
}
.apf-info-banner--name {
  background-color: #f0f6fc;
  border: 1px solid #c1d8eb;
  color: #1d4f7c;
}

/* ---------------------------------------------------------------------------
 * Alternatives panel (Phase 4-alt.1)
 * Grid of cross-referenced aftermarket parts on the article page.
 * 4 cols desktop / 2 cols tablet / 1 col mobile.
 * ---------------------------------------------------------------------------
 */
.apf-alternatives-panel {
  margin: 32px 0 24px;
}
.apf-alternatives-panel .apf-section-title {
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 1.3;
}
.apf-alternatives-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  .apf-alternatives-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .apf-alternatives-grid { grid-template-columns: 1fr; }
}
/* Collapsed state: hide cards beyond the first 12. JS toggles the class. */
.apf-alternatives-grid--collapsed .apf-alt-card--overflow {
  display: none;
}

.apf-alt-card {
  margin: 0;
}
.apf-alt-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.apf-alt-card__link:hover {
  border-color: #2271b1;
  box-shadow: 0 2px 8px rgba(34, 113, 177, 0.12);
}
.apf-alt-card__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f7f7;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.apf-alt-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.apf-alt-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}
.apf-alt-card__title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: #1d2327;
  /* Clamp to 2 lines so cards stay even-height in the grid. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.apf-alt-card__no {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  color: #50575e;
}

.apf-alternatives-expand {
  display: block;
  margin: 18px auto 0;
  padding: 10px 24px;
  font-size: 14px;
  color: #2271b1;
  background: transparent;
  border: 1px solid #2271b1;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.apf-alternatives-expand:hover {
  background-color: #2271b1;
  color: #fff;
}
.apf-alternatives-expand[aria-expanded="true"] {
  display: none; /* once expanded the button hides */
}

.apf-empty--alternatives {
  padding: 24px 16px;
  text-align: center;
  background: #f6f7f7;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------------
 * Phase 5-cat.1 — Featured Category Landing Page.
 * URL: /parts/category/{slug}/
 * Template: templates/category-landing-page.php
 * --------------------------------------------------------------------------- */

.apf-category-landing__hero {
  text-align: center;
  margin-bottom: 32px;
}
.apf-category-landing__icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
}
.apf-category-landing__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.apf-category-landing__finder {
  margin: 24px 0 32px;
  padding: 24px;
  background: #f6f7f7;
  border-radius: 8px;
}
.apf-category-landing__finder .apf-section-title {
  margin-top: 0;
  margin-bottom: 16px;
}

.apf-category-landing__popular {
  margin: 32px 0;
}

.apf-category-landing__copy {
  margin: 32px 0;
  max-width: 760px;
  line-height: 1.65;
  font-size: 15px;
  color: #2c3338;
}
.apf-category-landing__copy p {
  margin: 0 0 14px;
}
.apf-category-landing__copy h2,
.apf-category-landing__copy h3 {
  margin-top: 24px;
  margin-bottom: 12px;
}
.apf-category-landing__copy ul,
.apf-category-landing__copy ol {
  margin: 0 0 14px 24px;
}
/* ===========================================================================
 * /parts/ index page polish (v1.0.1)
 *
 * Scoping discipline: EVERY rule in this section is cascade-anchored under
 * `.apf-parts-index` so it cannot leak into vehicle-page, article-page,
 * category-landing-page, or VIN no-match templates. The `.apf-parts-index`
 * wrapper only exists on the polished /parts/ index branch (the
 * manufacturer/model reuse branches drop it).
 *
 * Color tokens live as CSS custom properties on `.apf-parts-index` itself,
 * NOT on `:root`, so the tokens don't leak globally either.
 *
 * Brand-neutral typography — uses the active theme's default font stack.
 * No @font-face, no Google Fonts, no external requests; rules set size /
 * weight / color / line-height / letter-spacing only, never font-family.
 *
 * Inverse mobile breakpoint: `(max-width: 599px)` (matches the existing
 * 600px / 960px breakpoint scheme — no new 640px breakpoint introduced).
 * ======================================================================= */

/* ---------------------------------------------------------------------
 * v1.0.8 token promotion: shared color/surface tokens are declared ONCE
 * on `.apf-polish-v1` (block immediately below). Page-specific tokens
 * that don't generalize remain on the page wrapper. The `.apf-polish-v1`
 * class is added alongside the page-specific class on the outer wrapper
 * (e.g. `<section class="apf-polish-v1 apf-parts-index">`).
 * ------------------------------------------------------------------ */

.apf-polish-v1 {
  /* Brand */
  --apf-navy:              #0A1F3D;
  --apf-blue:              #1D5FD8;
  --apf-blue-text:         #135e96;

  /* WhatsApp — DESATURATED default, brand-saturated on hover (v1.0.8). */
  --apf-whatsapp-green:       #1FAA53;
  --apf-whatsapp-green-hover: #25D366;

  /* Surfaces (v1.0.8 — replaces the 0.5px border-only card treatment) */
  --apf-card-fill:         #FAFBFC;
  --apf-card-fill-hover:   #FFFFFF;
  --apf-card-shadow:       0 1px 2px rgba(10, 31, 61, 0.04);
  --apf-card-shadow-hover: 0 4px 12px rgba(29, 95, 216, 0.10);
  --apf-page-bg:           #FFFFFF;
  --apf-trust-strip-bg:    #F7F8FB;

  /* Body-code pill — bumped contrast against the new card fill (v1.0.8). */
  --apf-bodycode-bg:       #EEEAE0;
  --apf-bodycode-text:     #2C2C2A;

  /* VIN-CTA banner */
  --apf-vin-cta-bg:        #F0F6FC;
  --apf-vin-cta-border:    #C3D4E6;
  --apf-vin-cta-text:      #1D4F7C;

  /* Status / feedback */
  --apf-success-green:     #16A34A;

  /* Muted text */
  --apf-muted-strong:      rgba(10, 31, 61, 0.55);
  --apf-muted-weak:        rgba(10, 31, 61, 0.4);

  /* DEPRECATED — kept for one slice to avoid regression in any unmigrated
   * rule. Remove in v1.0.9 after auditing. The card surfaces are now fill
   * + shadow, not border, so these tokens have no consumer in the polish
   * section as of v1.0.8. */
  --apf-card-border:       rgba(10, 31, 61, 0.08);
  --apf-card-border-hover: #1D5FD8;
}

/* ----- Header (eyebrow / title / subhead) ------------------------------- */

.apf-parts-index .apf-parts-index__header {
  margin: 0 0 20px;
  text-align: center;
}

.apf-parts-index .apf-parts-index__eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--apf-blue);
  text-transform: none; /* the string is already uppercase in the template */
}

.apf-parts-index .apf-parts-index__title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--apf-navy);
}

.apf-parts-index .apf-parts-index__subhead {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #50575e;
}

@media (max-width: 599px) {
  .apf-parts-index .apf-parts-index__title   { font-size: 19px; }
  .apf-parts-index .apf-parts-index__subhead { font-size: 12px; }
}

/* ----- Search block ----------------------------------------------------- */

.apf-parts-index .apf-search-block {
  margin: 20px 0 28px;
  padding: 18px;
  background: var(--apf-navy);
  border-radius: 12px;
}

.apf-parts-index .apf-search-block__form {
  display: block;
  margin: 0;
}

.apf-parts-index .apf-search-block__label {
  display: block;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.65);
}

/* Field + button rendered as a single continuous two-tone pill on
 * desktop: white-rounded-left (field) joined to blue-rounded-right
 * (button) with NO gap. On mobile (≤599px) the two split apart and
 * stack vertically, each gaining a full radius and the button
 * becoming full-width.
 *
 * Specificity bump (`.apf-parts-index .apf-search-block .apf-search-block__*`)
 * + `!important` on the visually-critical properties (border-radius,
 * background, padding, border, font-size, font-weight). Active themes
 * frequently inject opinionated `button[type="submit"]` styles at
 * specificity (0,0,3); without these defenses the merged-pill look
 * breaks because the theme's button radius / padding / colors win.
 */
.apf-parts-index .apf-search-block .apf-search-block__row {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  flex-direction: row !important;
}

.apf-parts-index .apf-search-block .apf-search-block__field {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0;
  background: #fff !important;
  border: 0 !important;
  border-radius: 10px 0 0 10px !important;
  padding: 11px 16px !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.apf-parts-index .apf-search-block .apf-search-block__field:focus-within {
  outline: 2px solid var(--apf-blue);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

.apf-parts-index .apf-search-block .apf-search-block__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(10, 31, 61, 0.5) !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.apf-parts-index .apf-search-block .apf-search-block__input {
  flex: 1 1 auto !important;
  min-width: 0;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  color: var(--apf-navy) !important;
  height: auto !important;
  line-height: 1.5 !important;
}
.apf-parts-index .apf-search-block .apf-search-block__input::placeholder {
  color: rgba(10, 31, 61, 0.45) !important;
}

/* Button defenses are the most aggressive because themes (especially
 * Elementor / WooCommerce-aware themes) inject heavy submit-button
 * styles. We override every property that would visually fight the
 * merged-pill design. */
.apf-parts-index .apf-search-block .apf-search-block__button {
  flex: 0 0 auto !important;
  padding: 11px 32px !important;
  border: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  background: var(--apf-blue) !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  cursor: pointer !important;
  transition: background 150ms ease-out !important;
}
.apf-parts-index .apf-search-block .apf-search-block__button:hover,
.apf-parts-index .apf-search-block .apf-search-block__button:focus {
  background: #174dac !important;
  color: #fff !important;
}

.apf-parts-index .apf-search-block .apf-search-block__helper {
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 599px) {
  .apf-parts-index .apf-search-block         { padding: 14px 12px 12px; margin-bottom: 20px; }
  .apf-parts-index .apf-search-block .apf-search-block__row    { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .apf-parts-index .apf-search-block .apf-search-block__field  { padding: 11px 14px !important; border-radius: 10px !important; }
  .apf-parts-index .apf-search-block .apf-search-block__button { padding: 12px 0 !important; width: 100% !important; border-radius: 10px !important; font-size: 14px !important; }
  .apf-parts-index .apf-search-block .apf-search-block__helper { margin-top: 10px; font-size: 11px; }
}

/* ----- Brand grid header (H4 + count) ----------------------------------- */

.apf-parts-index .apf-parts-index__brand-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 14px;
}

.apf-parts-index .apf-parts-index__brand-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--apf-navy);
}

.apf-parts-index .apf-parts-index__brand-count {
  font-size: 12px;
  color: rgba(10, 31, 61, 0.55);
  white-space: nowrap; /* keep "8 active brands" on one line beside the H4 */
}
@media (max-width: 599px) {
  .apf-parts-index .apf-parts-index__brand-header { margin-bottom: 10px; }
  .apf-parts-index .apf-parts-index__brand-count  { font-size: 11px; }
}

/* ----- Brand grid -------------------------------------------------------
 *
 * v1.0.16 page-agnostic refactor:
 *   The `__link`, `__wordmark`, `--mercedes-benz` modifier, and
 *   `.apf-brand-grid` rules were anchored under `.apf-parts-index` from
 *   v1.0.1 through v1.0.15. The brand-card visual is identical on
 *   parts-index and the new VIN no-match page (and any future polished
 *   page that surfaces a brand chooser), so the anchor moves from the
 *   page-specific class to `.apf-polish-v1` directly.
 *
 *   Specificity stays at (0,0,2) — both `.apf-polish-v1 .X` and the
 *   prior `.apf-parts-index .X` are two-class chains. Source order
 *   doesn't matter; equal specificity, no override conflicts. The
 *   `.apf-polish-v1 .apf-brand-card` root rule (already at (0,0,2))
 *   was already at this scope from v1.0.8.
 * ----------------------------------------------------------------------- */

.apf-polish-v1 .apf-brand-grid {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 599px) {
  .apf-polish-v1 .apf-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
}

/* v1.0.8: brand cards migrate from 0.5px border → surface fill + shadow.
 * The hover affordance (was border-color shift) is now carried by the
 * fill→white transition + translateY(-2px) + brand-color blue shadow. */
.apf-polish-v1 .apf-brand-card {
  margin: 0;
  background: var(--apf-card-fill);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--apf-card-shadow);
  transition: background 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
}
.apf-polish-v1 .apf-brand-card:hover,
.apf-polish-v1 .apf-brand-card:focus-within {
  background: var(--apf-card-fill-hover);
  transform: translateY(-2px);
  box-shadow: var(--apf-card-shadow-hover);
}
.apf-polish-v1 .apf-brand-card:active {
  transform: translateY(0);
  box-shadow: var(--apf-card-shadow);
}

.apf-polish-v1 .apf-brand-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 8px;
  text-decoration: none;
  color: var(--apf-navy);
}

.apf-polish-v1 .apf-brand-card__wordmark {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  /* NOT all-caps via CSS — wordmark text content dictates appearance. */
}

.apf-polish-v1 .apf-brand-card--mercedes-benz .apf-brand-card__wordmark {
  font-size: 13px;
}

/* v1.0.37: detected-brand highlight on the VIN no-match page brand grid.
 * Fires when Apf_Page_Renderer::render_vin_no_match() identified the
 * manufacturer from the decoded payload (or v1.0.36 WMI fallback) and
 * the template matched it against this card's slug. Adds a blue border,
 * subtle blue tint, and a corner "Detected" badge so the customer can
 * spot their brand instantly in the 8-card grid without scanning all
 * eight options. */
.apf-polish-v1 .apf-brand-card--detected {
  border: 1.5px solid var(--apf-blue);
  background: rgba(29, 95, 216, 0.04);
  position: relative;
}
.apf-polish-v1 .apf-brand-card--detected:hover,
.apf-polish-v1 .apf-brand-card--detected:focus-within {
  /* Slightly stronger tint on hover than the un-detected hover state. */
  background: rgba(29, 95, 216, 0.08);
  border-color: var(--apf-blue);
}
.apf-polish-v1 .apf-brand-card__detected-badge {
  position: absolute;
  top: -8px;
  right: 8px;
  background: var(--apf-blue);
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  line-height: 1.3;
  /* Sit above the card content cleanly, no shadow needed at this size. */
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 599px) {
  .apf-polish-v1 .apf-brand-card__link     { padding: 16px 6px; }
  .apf-polish-v1 .apf-brand-card__wordmark { font-size: 13px; }
  .apf-polish-v1 .apf-brand-card--mercedes-benz .apf-brand-card__wordmark { font-size: 11px; }
  /* v1.0.37: badge stays readable on small screens — same dimensions. */
  .apf-polish-v1 .apf-brand-card__detected-badge {
    top: -7px;
    right: 6px;
    font-size: 8px;
    padding: 2px 6px;
  }
}

/* Reserved for v1.0.2 logo swap — currently unused. The PHP template
 * emits `<span class="apf-brand-card__wordmark">{name}</span>`; v1.0.2
 * will swap the inner text for an `<img>`, and these rules keep the
 * card spacing/padding identical without rewriting hover/active state.
 * .apf-polish-v1 .apf-brand-card__wordmark img {
 *   max-height: 80px;
 *   width: auto;
 *   max-width: 100%;
 * }
 */

/* ----- Trust strip ------------------------------------------------------
 *
 * Scoped under `.apf-parts-index` AND `.apf-manufacturer-index` AND
 * `.apf-model-index` (multiselect) so the new BEM look doesn't leak into
 * the legacy `.apf-trust-strip` block on vehicle-page.php (which still
 * uses a non-BEM `<ul><li>` structure styled by the older rules above).
 * Bumped specificity to (0,0,2) so the BEM list selector wins over the
 * legacy `.apf-trust-strip ul` selector regardless of source order.
 *
 * Multiselect comma-form history:
 *   v1.0.4-manufacturer-polish — added `.apf-manufacturer-index` to share
 *     trust-strip styling between /parts/ and /parts/{make}/.
 *   v1.0.5-model-polish — added `.apf-model-index` for /parts/{make}/{model}/.
 * Future polished page types add themselves to the same comma list.
 * ------------------------------------------------------------------- */

.apf-parts-index .apf-trust-strip,
.apf-manufacturer-index .apf-trust-strip,
.apf-model-index .apf-trust-strip {
  margin: 20px 0 8px;
  padding: 14px 12px;
  background: var(--apf-trust-strip-bg);
  border: 0;
  border-radius: 8px;
}

.apf-parts-index .apf-trust-strip__list,
.apf-manufacturer-index .apf-trust-strip__list,
.apf-model-index .apf-trust-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  font-size: inherit;
  color: inherit;
}

@media (max-width: 599px) {
  .apf-parts-index .apf-trust-strip,
  .apf-manufacturer-index .apf-trust-strip,
  .apf-model-index .apf-trust-strip       { padding: 12px 10px; }
  .apf-parts-index .apf-trust-strip__list,
  .apf-manufacturer-index .apf-trust-strip__list,
  .apf-model-index .apf-trust-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* v1.0.8 trust-strip card promotion: cards become white tiles raised
 * against the strip's tinted gray background. Was `background: transparent;
 * padding: 0;` (floating icon+text clusters); now `background: white;
 * padding: 12px 14px; box-shadow: ...`. The grid layout, gap, and the icon
 * + text-stack flex props remain. Tile padding moved INTO the card (was on
 * the inner __text/__icon spans implicitly via gap). */
.apf-polish-v1 .apf-trust-strip__card {
  display: flex;
  flex-direction: row;
  align-items: center;       /* vertically center icon to title/subtitle stack */
  justify-content: flex-start; /* tiles hold content left-aligned now (was center for naked clusters) */
  gap: 8px;
  padding: 12px 14px;
  margin: 0;
  background: var(--apf-card-fill-hover); /* pure white against tinted strip bg */
  border-radius: 8px;
  box-shadow: var(--apf-card-shadow);
  line-height: 1.4;
  color: var(--apf-navy);
}

@media (max-width: 599px) {
  .apf-polish-v1 .apf-trust-strip__card { gap: 7px; padding: 10px 12px; }
}

.apf-parts-index .apf-trust-strip__icon,
.apf-manufacturer-index .apf-trust-strip__icon,
.apf-model-index .apf-trust-strip__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  /* the inline SVGs use width/height=18 — the font-size is here as a
   * positional anchor for any future text/icon-font fallback. */
}
.apf-parts-index .apf-trust-strip__icon--green,
.apf-manufacturer-index .apf-trust-strip__icon--green,
.apf-model-index .apf-trust-strip__icon--green    { color: var(--apf-success-green); }
.apf-parts-index .apf-trust-strip__icon--blue,
.apf-manufacturer-index .apf-trust-strip__icon--blue,
.apf-model-index .apf-trust-strip__icon--blue     { color: var(--apf-blue); }
.apf-parts-index .apf-trust-strip__icon--whatsapp,
.apf-manufacturer-index .apf-trust-strip__icon--whatsapp,
.apf-model-index .apf-trust-strip__icon--whatsapp { color: var(--apf-whatsapp-green); }

@media (max-width: 599px) {
  .apf-parts-index .apf-trust-strip__icon,
  .apf-manufacturer-index .apf-trust-strip__icon,
  .apf-model-index .apf-trust-strip__icon       { font-size: 16px; }
  .apf-parts-index .apf-trust-strip__icon svg,
  .apf-manufacturer-index .apf-trust-strip__icon svg,
  .apf-model-index .apf-trust-strip__icon svg   { width: 16px; height: 16px; }
}

.apf-parts-index .apf-trust-strip__text,
.apf-manufacturer-index .apf-trust-strip__text,
.apf-model-index .apf-trust-strip__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.apf-parts-index .apf-trust-strip__title,
.apf-manufacturer-index .apf-trust-strip__title,
.apf-model-index .apf-trust-strip__title {
  font-size: 12px;
  font-weight: 500;
  color: var(--apf-navy);
}

.apf-parts-index .apf-trust-strip__subtitle,
.apf-manufacturer-index .apf-trust-strip__subtitle,
.apf-model-index .apf-trust-strip__subtitle {
  font-size: 10px;
  color: rgba(10, 31, 61, 0.55);
}

@media (max-width: 599px) {
  .apf-parts-index .apf-trust-strip__title,
  .apf-manufacturer-index .apf-trust-strip__title,
  .apf-model-index .apf-trust-strip__title    { font-size: 11px; }
  .apf-parts-index .apf-trust-strip__subtitle,
  .apf-manufacturer-index .apf-trust-strip__subtitle,
  .apf-model-index .apf-trust-strip__subtitle { font-size: 9px; }
}

/* ===========================================================================
 * Manufacturer page polish (v1.0.4-manufacturer-polish)
 *
 * Polishes /parts/{make}/ (manufacturer index) to match the v1.0.1 design
 * language. Same scoping discipline: every rule cascade-anchored under
 * `.apf-manufacturer-index`, color tokens declared on the wrapper itself
 * (not :root). The trust-strip block above already handles this page via
 * the multiselect refactor — only header / model-grid / model-card rules
 * are net-new here.
 * ======================================================================= */

/* v1.0.8 token promotion: shared color/surface tokens are declared on
 * `.apf-polish-v1` (top of polish section). The page-specific
 * `.apf-manufacturer-index` wrapper no longer redeclares them. */

/* ----- Header (eyebrow / title / subhead) ------------------------------- */

.apf-manufacturer-index .apf-manufacturer-index__header {
  margin: 0 0 20px;
}

.apf-manufacturer-index .apf-manufacturer-index__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--apf-blue);
}

.apf-manufacturer-index .apf-manufacturer-index__title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--apf-navy);
}

.apf-manufacturer-index .apf-manufacturer-index__subhead {
  margin: 0 0 28px;
  font-size: 13px;
  line-height: 1.5;
  color: #50575e;
}

@media (max-width: 599px) {
  .apf-manufacturer-index .apf-manufacturer-index__title   { font-size: 19px; }
  .apf-manufacturer-index .apf-manufacturer-index__subhead { font-size: 12px; margin-bottom: 22px; }
}

/* ----- Section header (H4 + count) -------------------------------------- */

.apf-manufacturer-index .apf-manufacturer-index__section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}

.apf-manufacturer-index .apf-manufacturer-index__section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--apf-navy);
}

.apf-manufacturer-index .apf-manufacturer-index__section-count {
  font-size: 12px;
  color: rgba(10, 31, 61, 0.55);
  white-space: nowrap;
}

@media (max-width: 599px) {
  .apf-manufacturer-index .apf-manufacturer-index__section-header { margin-bottom: 10px; }
  .apf-manufacturer-index .apf-manufacturer-index__section-title  { font-size: 14px; }
  .apf-manufacturer-index .apf-manufacturer-index__section-count  { font-size: 11px; }
}

/* ----- Model grid + card ------------------------------------------------ */

.apf-manufacturer-index .apf-model-grid {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 599px) {
  .apf-manufacturer-index .apf-model-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 22px;
  }
}

/* v1.0.8: model cards migrate from 0.5px border → surface fill + shadow. */
.apf-polish-v1 .apf-model-card {
  margin: 0;
  background: var(--apf-card-fill);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--apf-card-shadow);
  transition: background 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
}
.apf-polish-v1 .apf-model-card:hover,
.apf-polish-v1 .apf-model-card:focus-within {
  background: var(--apf-card-fill-hover);
  transform: translateY(-2px);
  box-shadow: var(--apf-card-shadow-hover);
}
.apf-polish-v1 .apf-model-card:active {
  transform: translateY(0);
  box-shadow: var(--apf-card-shadow);
}

.apf-manufacturer-index .apf-model-card__link {
  display: block;
  padding: 14px;
  text-decoration: none;
  color: inherit;
}

.apf-manufacturer-index .apf-model-card__name {
  display: block;
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--apf-navy);
  /* NOT all-caps via CSS — wordmark text dictates appearance.
   * Toyota/BMW/etc. emit names like "AGYA (B1_)" or "1000 (KP3_)"
   * with their own casing; we render them verbatim. */
}

.apf-manufacturer-index .apf-model-card__years {
  display: block;
  font-size: 11px;
  color: rgba(10, 31, 61, 0.55);
  line-height: 1.3;
}

@media (max-width: 599px) {
  .apf-manufacturer-index .apf-model-card__link  { padding: 12px; }
  .apf-manufacturer-index .apf-model-card__name  { font-size: 13px; }
  .apf-manufacturer-index .apf-model-card__years { font-size: 10px; }
}

/* ===========================================================================
 * Model page polish (v1.0.5-model-polish)
 *
 * Polishes /parts/{make}/{model}/ (engine variant list) to match the
 * v1.0.1 / v1.0.4 design language. Same scoping discipline: every rule
 * cascade-anchored under `.apf-model-index`, color tokens declared on
 * the wrapper itself (not :root). The trust-strip block above already
 * handles this page via the multiselect comma-form refactor (now
 * extended across all three polished pages).
 *
 * Existing unscoped engine-list / engine-row / spec-pill / year-band
 * rules earlier in this file are LEFT UNTOUCHED so the legacy fallback
 * path (parts-index template's manufacturer-branch + vin-disambiguation
 * which uses .apf-year-band) still renders. The new `.apf-model-index .X`
 * rules override via cascade specificity (0,0,2 > 0,0,1) only on the
 * polished model page.
 * ======================================================================= */

/* v1.0.8 token promotion: shared color/surface tokens are declared on
 * `.apf-polish-v1` (top of polish section). The page-specific
 * `.apf-model-index` wrapper no longer redeclares them. The `--apf-bodycode-bg`
 * value is bumped from #F1EFE8 → #EEEAE0 for higher contrast against the
 * new card fill (#FAFBFC). */

/* ----- Header (eyebrow / title / subhead) ------------------------------- */

.apf-model-index .apf-model-index__header {
  margin: 0 0 20px;
}

.apf-model-index .apf-model-index__eyebrow {
  margin: 0 0 6px;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--apf-blue);
  /* The middle-dot character (·) appears verbatim from PHP — no
   * text-transform, so the model-name half retains its raw Tecdoc
   * casing ("1000 (KP3_)") while the manufacturer half was already
   * uppercased in PHP via mb_strtoupper(). */
}

.apf-model-index .apf-model-index__title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--apf-navy);
}

.apf-model-index .apf-model-index__subhead {
  margin: 0 0 28px;
  font-size: 13px;
  line-height: 1.5;
  color: #50575e;
}

@media (max-width: 599px) {
  .apf-model-index .apf-model-index__title   { font-size: 19px; }
  .apf-model-index .apf-model-index__subhead { font-size: 12px; margin-bottom: 22px; }
}

/* ----- Engine variant list / row (frame only — internals redesigned in v1.0.6) -- *
 *
 * Re-scoped under `.apf-model-index`. The card-level treatment (border,
 * hover lift, padding) is preserved from v1.0.5; the INTERNAL row layout
 * (title-row / meta-row / CTA) is redesigned in the v1.0.6 section below.
 *
 * v1.0.5-deleted (markup no longer renders these classes inside
 * `.apf-model-index`):
 *   - .apf-model-index__section-header / __section-title / __section-count
 *     (the section row was removed; fuel-group headers now provide
 *     wayfinding)
 *   - .apf-model-index .apf-engine-row__title (single-line title was
 *     replaced by the title-row + name + HP layout)
 *   - .apf-model-index .apf-year-band / .apf-spec-pill (pills replaced by
 *     plain inline year text)
 *   - .apf-model-index .apf-model-index__vin-cta (bottom-of-page VIN-CTA
 *     was replaced by the top-of-list horizontal banner)
 * The unscoped legacy `.apf-year-band` and `.apf-spec-pill` rules earlier
 * in this file are LEFT UNTOUCHED — vin-disambiguation-page.php still
 * uses them.
 * ------------------------------------------------------------------- */

.apf-model-index .apf-engine-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* v1.0.8: engine rows migrate from 0.5px border → surface fill + shadow. */
.apf-polish-v1 .apf-engine-row {
  background: var(--apf-card-fill);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--apf-card-shadow);
  transition: background 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
}
.apf-polish-v1 .apf-engine-row:hover,
.apf-polish-v1 .apf-engine-row:focus-within {
  background: var(--apf-card-fill-hover);
  transform: translateY(-2px);
  box-shadow: var(--apf-card-shadow-hover);
}
.apf-polish-v1 .apf-engine-row:active {
  transform: translateY(0);
  box-shadow: var(--apf-card-shadow);
}

.apf-model-index .apf-engine-row__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
}

.apf-model-index .apf-engine-row__main {
  flex: 1 1 auto;
  min-width: 0;
  /* No internal flex direction here — children (.apf-engine-row__title-row
   * and .apf-engine-row__meta) are block-level by default, stacked
   * naturally with margin between them set on __meta. */
}

/* ===========================================================================
 * Model page redesign (v1.0.6-model-redesign)
 *
 * Redesigns the engine list around variant identification:
 *   - VIN-CTA banner promoted from bottom → top of variant list
 *   - Variants grouped by fuel_type (Petrol → Diesel → others A→Z)
 *   - New row internals: title-row (name + HP) + meta-row (years)
 *   - Trust strip removed from this page (unchanged on /parts/ and
 *     /parts/{make}/)
 *
 * Body-code rendering is OMITTED in v1.0.6 because the aalam_vehicles
 * schema has no `body_code` column (only `body_type` which is bodyStyle:
 * Sedan/Coupe). Adding body codes properly is a sync-layer slice. The
 * `__bodycode` and `__sep` selectors mentioned in the v1.0.6 brief are
 * intentionally absent from this file.
 *
 * Every rule cascade-anchored under `.apf-model-index` (same scoping
 * discipline as v1.0.1+).
 * ======================================================================= */

/* ----- VIN-CTA banner (top-of-list horizontal layout) -------------------
 *
 * v1.0.10 re-scope: rules promoted from `.apf-model-index .apf-vin-cta-banner*`
 * to `.apf-polish-v1 .apf-vin-cta-banner*` so they apply on every polished
 * page that emits the banner markup. v1.0.9-vehicle-polish added the same
 * markup to the vehicle page but the rules were anchored under
 * `.apf-model-index` only — vehicle-page banner rendered as plain
 * unstyled text. Promoting the anchor to `.apf-polish-v1` (which is on
 * BOTH wrappers) fixes the vehicle page without affecting the model
 * page (specificity stays 0,0,2; `.apf-polish-v1` is on the same element
 * as `.apf-model-index` on the model page).
 * ----------------------------------------------------------------------- */

.apf-polish-v1 .apf-vin-cta-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 24px;
  background: var(--apf-vin-cta-bg);
  border: 1px solid var(--apf-vin-cta-border);
  border-radius: 8px;
}

.apf-polish-v1 .apf-vin-cta-banner__text {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--apf-vin-cta-text);
}

.apf-polish-v1 .apf-vin-cta-banner__prompt {
  font-weight: 500; /* matches the v1.0.1+ weight discipline; not 600/700 */
  margin-right: 4px;
}

.apf-polish-v1 .apf-vin-cta-banner__sentence {
  font-weight: 400;
}

.apf-polish-v1 .apf-vin-cta-banner__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--apf-whatsapp-green);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease-out;
  white-space: nowrap;
}
.apf-polish-v1 .apf-vin-cta-banner__button:hover,
.apf-polish-v1 .apf-vin-cta-banner__button:focus {
  background: var(--apf-whatsapp-green-hover);
  color: #fff;
}

.apf-polish-v1 .apf-vin-cta-banner__icon {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}
.apf-polish-v1 .apf-vin-cta-banner__icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.apf-polish-v1 .apf-vin-cta-banner__label {
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 599px) {
  .apf-polish-v1 .apf-vin-cta-banner          { flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px; }
  .apf-polish-v1 .apf-vin-cta-banner__text    { font-size: 12px; text-align: center; line-height: 1.45; }
  /* v1.0.18 revision (refines v1.0.17): same centered-stack shape — text
   * centered above, button centered at natural width below — but tightened
   * to remove vertical dead space. Padding 12px → 10px 12px (vertical -2px
   * since the gap below already separates text from button), gap 8px → 6px,
   * text line-height set to 1.45 (was inherited 1.5 from base rule), button
   * font 13px → 12px and padding 8px 16px → 7px 14px. Combined with the
   * shorter mobile copy (see template changes), the banner now reads as a
   * single compact CTA unit instead of an oversized box with a small button
   * floating in dead space. v1.0.7 right-aligned natural-width and v1.0.17
   * full-padding centered approaches both rejected after live review.
   * Tablet/desktop unchanged. */
  .apf-polish-v1 .apf-vin-cta-banner__button  { align-self: center; padding: 7px 14px; font-size: 12px; }
}

/* ----- Fuel group ------------------------------------------------------- */

.apf-model-index .apf-fuel-group {
  display: block;
  margin: 0 0 20px;
}
.apf-model-index .apf-fuel-group:last-child {
  margin-bottom: 24px;
}

.apf-model-index .apf-fuel-group__header {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--apf-muted-strong);
  /* Visually subordinate to the H1 above and to the engine-row content
   * below — this is a wayfinder, not a section title. */
}

@media (max-width: 599px) {
  .apf-model-index .apf-fuel-group__header { font-size: 12px; }
}

/* ----- Engine row internals (v1.0.6 redesign) --------------------------- */

.apf-model-index .apf-engine-row__title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 4px;
}

.apf-model-index .apf-engine-row__name {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--apf-navy);
}

.apf-model-index .apf-engine-row__hp {
  font-size: 12px;
  font-weight: 400;
  color: var(--apf-muted-strong);
  white-space: nowrap;
}

.apf-model-index .apf-engine-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 4px;
}

.apf-model-index .apf-engine-row__years {
  color: var(--apf-blue-text);
  font-weight: 500;
  /* Plain inline text — no pill background. */
}

/* ----- Body-code pill (v1.0.7 — render-time string parser fallback) ----- *
 *
 * `engine_name` doesn't have a separate `body_code` column. The template
 * extracts the chassis identifier from a trailing parenthetical
 * ("2.4 4WD (RN50, RN55, RN60)" → name + "RN50 · RN55 · RN60"). This pill
 * styles the extracted code; the `--empty` modifier strips the pill chrome
 * for variants without parentheticals (renders "No body code" muted text).
 * Long-term fix is to denormalize body_code into the vehicles table during
 * sync — flagged in CLAUDE.md as a deferred sync-layer slice.
 * ----------------------------------------------------------------------- */

.apf-model-index .apf-engine-row__bodycode {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--apf-bodycode-bg);
  color: var(--apf-bodycode-text);
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
}

.apf-model-index .apf-engine-row__bodycode--empty {
  background: transparent;
  color: #50575e;
  padding: 0;
  font-weight: 400;
  font-family: inherit;
  font-size: 11px;
}

.apf-model-index .apf-engine-row__sep {
  color: var(--apf-muted-weak);
  /* Decorative separator dot between body code and year range. The
   * meta-row's flex `gap: 8px` already provides spacing, so the dot
   * sits naturally between the gap-separated children. */
}

/* ----- Engine row CTA (replaces the v1.0.5 bare arrow) ------------------ */

.apf-model-index .apf-engine-row__cta {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--apf-blue);
  white-space: nowrap;
  /* No color shift on row hover — the row's border + lift carries the
   * hover state. Stable arrow color avoids visual noise on a dense list. */
}

.apf-model-index .apf-engine-row__cta-label {
  /* No special treatment — inherits parent color/font-size/weight. */
}

.apf-model-index .apf-engine-row__cta-arrow {
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 599px) {
  .apf-model-index .apf-engine-row__link    { padding: 12px 14px; gap: 12px; }
  .apf-model-index .apf-engine-row__name    { font-size: 15px; }
  .apf-model-index .apf-engine-row__meta    { font-size: 10px; }
  .apf-model-index .apf-engine-row__cta     { font-size: 11px; }
}

/* ===========================================================================
 * Vehicle page polish (v1.0.9-vehicle-polish)
 *
 * Brings /parts/{make}/{model}/{year-engine}/ into the polish-v1 design
 * system. Inherits all shared color/surface tokens from `.apf-polish-v1`
 * (declared at the top of the polish section). Adds vehicle-specific
 * tokens for the leaf-card border treatment.
 *
 * Categories restructure: collapsible <details> per Tecdoc root group.
 * Native browser interaction (click summary to toggle, keyboard a11y
 * via space/enter), no JavaScript required.
 *
 * Legacy `.apf-vehicle-banner` and `.apf-vehicle-spec-strip` rules
 * earlier in this file are LEFT UNTOUCHED — they're still consumed by
 * `templates/category-page.php` (which uses the legacy non-BEM
 * `<dt>/<dd>` spec strip). The new BEM rules below scope to
 * `.apf-vehicle-index .apf-vehicle-banner__*` (specificity 0,0,2)
 * and override only on the vehicle page.
 * ======================================================================= */

.apf-vehicle-index {
  --apf-leaf-card-border:        rgba(10, 31, 61, 0.06);
  --apf-leaf-card-border-hover:  var(--apf-blue);
  /* v1.0.11: leaf cards get a tinted fill so they read as tiles within
   * the group's section frame. Visual hierarchy: page (white) → group
   * (`#FAFBFC` from polish-v1's --apf-card-fill) → leaf (`#F2F4F7`).
   * Hover lifts the leaf back to white for a clear interactive cue. */
  --apf-leaf-card-fill:          #F2F4F7;
  --apf-leaf-card-fill-hover:    #FFFFFF;
}

/* ----- Vehicle banner --------------------------------------------------- */

.apf-vehicle-index .apf-vehicle-banner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 28px;
  padding: 20px 24px;
  background: var(--apf-card-fill);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--apf-card-shadow);
}

.apf-vehicle-index .apf-vehicle-banner__main {
  flex: 1 1 auto;
  min-width: 0;
}

.apf-vehicle-index .apf-vehicle-banner__eyebrow {
  margin: 0 0 8px;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--apf-blue);
}

.apf-vehicle-index .apf-vehicle-banner__title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--apf-navy);
}

.apf-vehicle-index .apf-vehicle-banner__specs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0 0 4px;
  padding: 0;
  font-size: 13px;
  color: var(--apf-muted-strong);
  line-height: 1.5;
}

.apf-vehicle-index .apf-vehicle-banner__spec {
  display: inline-block;
  padding: 0;
  margin: 0;
  font-weight: 400;
}

.apf-vehicle-index .apf-vehicle-banner__sep {
  display: inline-block;
  margin: 0 8px;
  color: var(--apf-muted-weak);
}

/* v1.0.11: action row simplified — was a flex column with gap to space the
 * link and now-removed WhatsApp button. With only the "Wrong car?" link
 * remaining, the column-with-gap is overkill. Inline display + center
 * align is all that's needed. The `.apf-vehicle-banner__wa` modifier rule
 * was deleted along with the WhatsApp button it styled. */
.apf-vehicle-index .apf-vehicle-banner__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.apf-vehicle-index .apf-vehicle-banner__back {
  /* Slight presence bump in v1.0.11 (was 13px / weight 400). With no
   * adjacent button to anchor against, the link needs a touch more weight
   * so it doesn't look lost in the action-row whitespace. */
  font-size: 14px;
  font-weight: 500;
  color: var(--apf-blue);
  text-decoration: none;
}
.apf-vehicle-index .apf-vehicle-banner__back:hover,
.apf-vehicle-index .apf-vehicle-banner__back:focus {
  text-decoration: underline;
}

@media (max-width: 599px) {
  .apf-vehicle-index .apf-vehicle-banner          { flex-direction: column; gap: 14px; padding: 16px 18px; margin-bottom: 24px; }
  .apf-vehicle-index .apf-vehicle-banner__title   { font-size: 19px; }
  .apf-vehicle-index .apf-vehicle-banner__specs   { font-size: 12px; }
  .apf-vehicle-index .apf-vehicle-banner__sep     { margin: 0 6px; }
  /* v1.0.11: with only the "Wrong car?" link in the action row, mobile no
   * longer needs full-width or space-between treatment — the link sits
   * inline at the start of its row, below the spec strip. */
  .apf-vehicle-index .apf-vehicle-banner__actions { align-items: center; justify-content: flex-start; }
}

/* ----- VIN-CTA banner separation -------------------------------------- *
 * Existing .apf-vin-cta-banner rules from v1.0.6 already style the banner
 * (via `.apf-polish-v1 .apf-vin-cta-banner`). Vehicle-page tweaks margin
 * to provide breathing room between banner and the categories section. */

.apf-vehicle-index .apf-vin-cta-banner {
  margin: 0 0 32px;
}

/* ----- Categories — collapsible <details> per Tecdoc root --------------- */

.apf-vehicle-index .apf-vehicle-index__categories {
  display: block;
  margin: 0 0 32px;
}

.apf-vehicle-index .apf-cat-group {
  margin: 0 0 8px;
  background: var(--apf-card-fill);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--apf-card-shadow);
  overflow: hidden;       /* keeps the rounded corners clean across the open/close transition */
  transition: background 150ms ease-out;
}
.apf-vehicle-index .apf-cat-group:last-child {
  margin-bottom: 32px;
}

.apf-vehicle-index .apf-cat-group__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;       /* hide the default <summary> disclosure marker */
  user-select: none;
}
/* WebKit-specific marker hide */
.apf-vehicle-index .apf-cat-group__header::-webkit-details-marker {
  display: none;
}

.apf-vehicle-index .apf-cat-group:hover {
  background: var(--apf-card-fill-hover);
}

.apf-vehicle-index .apf-cat-group__title {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 500;
  color: var(--apf-navy);
  line-height: 1.3;
}

.apf-vehicle-index .apf-cat-group__count {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--apf-muted-strong);
  white-space: nowrap;
}

.apf-vehicle-index .apf-cat-group__chevron {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--apf-muted-strong);
  transition: transform 200ms ease-out;
  transform: rotate(0deg);
  line-height: 1;
}
.apf-vehicle-index .apf-cat-group[open] .apf-cat-group__chevron {
  transform: rotate(180deg);
}

.apf-vehicle-index .apf-cat-group__list {
  list-style: none;
  margin: 0;
  padding: 4px 14px 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 599px) {
  .apf-vehicle-index .apf-cat-group__header { padding: 12px 14px; }
  .apf-vehicle-index .apf-cat-group__title  { font-size: 14px; }
  .apf-vehicle-index .apf-cat-group__count  { font-size: 12px; }
  .apf-vehicle-index .apf-cat-group__list   {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 4px 12px 12px;
  }
}

/* ----- Leaf cards (inside a group) ------------------------------------- */

.apf-vehicle-index .apf-cat-card {
  margin: 0;
  padding: 0;
  /* v1.0.11: tinted fill replaces the previous transparent. Reads as a
   * tile against the group's lighter card-fill. */
  background: var(--apf-leaf-card-fill);
  border: 0.5px solid var(--apf-leaf-card-border);
  border-radius: 6px;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}
.apf-vehicle-index .apf-cat-card:hover,
.apf-vehicle-index .apf-cat-card:focus-within {
  background: var(--apf-leaf-card-fill-hover);
  border-color: var(--apf-leaf-card-border-hover);
}

.apf-vehicle-index .apf-cat-card__link {
  display: block;
  padding: 12px 14px;
  font-size: 14px;
  /* v1.0.11: weight bumped 400 → 500 to give the leaf labels more
   * presence against the new tinted background. */
  font-weight: 500;
  color: var(--apf-navy);
  line-height: 1.3;
  text-decoration: none;
}

@media (max-width: 599px) {
  .apf-vehicle-index .apf-cat-card__link { padding: 10px 12px; font-size: 13px; }
}

/* ----- Empty-state diagnostic surface (admin) -------------------------- *
 * Was inline `style="..."` attributes in the legacy template; lifted out
 * to scoped rules so the template is inline-style-free per polish-v1
 * convention. */

.apf-vehicle-index .apf-diagnostic {
  margin-top: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px dashed #c3d4e6;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  color: #1d2327;
}
.apf-vehicle-index .apf-diagnostic__heading {
  display: block;
  margin-bottom: 6px;
  color: #135e96;
}
.apf-vehicle-index .apf-diagnostic__hint {
  margin-top: 8px;
  font-size: 12px;
  color: #50575e;
}

/* ===========================================================================
 * Category page polish + lazy load (v1.0.12-category-lazy-load;
 *   selector-anchor fix in v1.0.14)
 *
 * Polishes /parts/{make}/{model}/{year-engine}/{cat-slug}-{cat-id}/ into the
 * polish-v1 design system AND adds the infinite-scroll lazy-load surface
 * (skeleton placeholders, load-more button, end-marker, error card, spin
 * keyframes).
 *
 * v1.0.14 selector correction:
 *   v1.0.12 wrote selectors as `.apf-polish-v1 .apf-category-page .X`
 *   — a THREE-class descendant chain. The first two classes are BOTH on
 *   the SAME outer <section> element. Per CSS descendant combinator
 *   semantics this requires `.apf-category-page` to have a strict
 *   ancestor matching `.apf-polish-v1`, but they sit on the same
 *   element (neither is the other's ancestor). The rules silently did
 *   NOT match — every article-row, skeleton, spinner, and load-more
 *   rule fell back to legacy unscoped rules earlier in this file. The
 *   user reported a "View options" CTA wrap-bug that was actually the
 *   legacy `.apf-article-row__link { display: grid; grid-template-
 *   columns: 80px 1fr; }` rule winning the cascade by default — the
 *   "View options" text fell into a 80px grid cell with default
 *   `white-space: normal` and wrapped at the space.
 *
 *   Fix (v1.0.14): every three-class chain is now
 *   `.apf-polish-v1.apf-category-page .X` (compound on the section +
 *   descendant for .X). Compound matches elements with both classes on
 *   the SAME element — the section matches. Specificity rises to
 *   (0,0,3) which beats the legacy (0,0,1) cleanly. BEM-child rules
 *   (`.apf-polish-v1 .apf-category-page__header` etc.) were already
 *   valid two-class chains and are preserved untouched.
 * ======================================================================= */

/* ----- Header card ------------------------------------------------------ */

.apf-polish-v1 .apf-category-page__header {
  margin: 0 0 24px;
  padding: 16px 18px;
  background: var(--apf-card-fill);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--apf-card-shadow);
}

.apf-polish-v1 .apf-category-page__eyebrow {
  margin: 0 0 6px;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--apf-blue);
}

.apf-polish-v1 .apf-category-page__title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--apf-navy);
}

.apf-polish-v1 .apf-category-page__subhead {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--apf-muted-strong);
}

@media (max-width: 599px) {
  .apf-polish-v1 .apf-category-page__header   { padding: 14px 16px; margin-bottom: 20px; }
  .apf-polish-v1 .apf-category-page__title    { font-size: 19px; }
  .apf-polish-v1 .apf-category-page__subhead  { font-size: 12px; }
}

/* ----- Article row card chrome (polish-v1 fill + hover lift) ----------- */

.apf-polish-v1.apf-category-page .apf-article-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.apf-polish-v1.apf-category-page .apf-article-row {
  background: var(--apf-card-fill);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--apf-card-shadow);
  transition: background 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
}
.apf-polish-v1.apf-category-page .apf-article-row:hover,
.apf-polish-v1.apf-category-page .apf-article-row:focus-within {
  background: var(--apf-card-fill-hover);
  transform: translateY(-2px);
  box-shadow: var(--apf-card-shadow-hover);
}
.apf-polish-v1.apf-category-page .apf-article-row:active {
  transform: translateY(0);
  box-shadow: var(--apf-card-shadow);
}

.apf-polish-v1.apf-category-page .apf-article-row__link {
  display: flex;
  align-items: center;
  gap: 12px;
  /* v1.0.13: padding bumped 10px 14px → 12px 16px desktop / 8px 12px → 10px 14px
   * mobile to give the row a touch more breathing room now that the right
   * edge has a real CTA label rather than a bare arrow that visually
   * disappeared. */
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
}

.apf-polish-v1.apf-category-page .apf-article-row__thumb {
  flex-shrink: 0;
  /* v1.0.15: bumped 44 → 64 for better visual identification of parts
   * (auto-parts customers identify by visual signature: cartridge shape,
   * caliper style, filter cross-section). The width/height attrs on
   * <img> in the template + JS row-builder MUST match this container
   * size or lazy-loading reserves the wrong space and causes shift. */
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(10, 31, 61, 0.04);
  overflow: hidden;
}
.apf-polish-v1.apf-category-page .apf-article-row__thumb img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}
.apf-polish-v1.apf-category-page .apf-thumb-placeholder--icon {
  color: rgba(10, 31, 61, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.apf-polish-v1.apf-category-page .apf-article-row__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.apf-polish-v1.apf-category-page .apf-article-row__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--apf-navy);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.apf-polish-v1.apf-category-page .apf-article-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  line-height: 1.4;
}

.apf-polish-v1.apf-category-page .apf-supplier-badge {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(29, 95, 216, 0.08);
  color: var(--apf-blue-text);
  border-radius: 3px;
  font-weight: 500;
}

.apf-polish-v1.apf-category-page .apf-article-no {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--apf-muted-strong);
}

/* v1.0.13: replaces the v1.0.12 bare-arrow `.apf-article-row__chevron`
 * rule. The chevron used to render as a 14px standalone `→` glyph at the
 * end of the row; with the row's flex-direction defaulting to row (it
 * always was) the arrow SHOULD have been right-aligned, but in practice
 * the deployed page showed it on its own line below the body — likely
 * because the legacy unscoped `.apf-article-row__link` from earlier
 * phases set `display: block` somewhere that the new scoped rule didn't
 * fully override. The labeled CTA + explicit flex layout removes the
 * ambiguity. */
.apf-polish-v1.apf-category-page .apf-article-row__cta {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--apf-blue);
  white-space: nowrap;
  line-height: 1.4;
  /* The arrow span inherits color + font-size; no separate styling. */
}

@media (max-width: 599px) {
  .apf-polish-v1.apf-category-page .apf-article-row__link  { gap: 10px; padding: 10px 14px; }
  /* v1.0.15: mobile thumbs proportionally smaller. Was 40 in v1.0.12;
   * now 56 (64 * 0.875) to preserve the "smaller on mobile but still
   * recognizably bigger than the v1.0.14 desktop size" feel. */
  .apf-polish-v1.apf-category-page .apf-article-row__thumb { width: 56px; height: 56px; }
  .apf-polish-v1.apf-category-page .apf-article-row__thumb img { width: 56px; height: 56px; }
  .apf-polish-v1.apf-category-page .apf-article-row__title { font-size: 12px; }
  .apf-polish-v1.apf-category-page .apf-article-row__meta  { font-size: 10px; gap: 6px; }
  .apf-polish-v1.apf-category-page .apf-article-row__cta   { font-size: 11px; }
}

/* ----- Sentinel + load-more button ------------------------------------- */

.apf-polish-v1 .apf-category-page__sentinel {
  display: flex;
  justify-content: center;
  padding: 16px 0 24px;
}

.apf-polish-v1 .apf-btn--load-more {
  display: inline-block;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--apf-blue);
  background: transparent;
  border: 1px solid var(--apf-blue);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
  font-family: inherit;
  line-height: 1.4;
}
.apf-polish-v1 .apf-btn--load-more:hover,
.apf-polish-v1 .apf-btn--load-more:focus {
  background: var(--apf-blue);
  color: #fff;
}
.apf-polish-v1 .apf-btn--load-more:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ----- End-marker ------------------------------------------------------ */

.apf-polish-v1 .apf-category-page__end-marker {
  margin: 12px 0 0;
  padding: 14px 0;
  border-top: 1px dashed rgba(10, 31, 61, 0.1);
  text-align: center;
  font-size: 11px;
  color: var(--apf-muted-strong);
}

/* ----- Skeleton placeholders (rendered by JS while a batch loads) ----- */

.apf-polish-v1.apf-category-page .apf-article-row--skeleton {
  background: rgba(10, 31, 61, 0.02);
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  pointer-events: none;
}
.apf-polish-v1.apf-category-page .apf-article-row--skeleton:hover,
.apf-polish-v1.apf-category-page .apf-article-row--skeleton:focus-within {
  background: rgba(10, 31, 61, 0.02);
  transform: none;
  box-shadow: none;
}

.apf-polish-v1.apf-category-page .apf-skeleton-block {
  /* v1.0.15: matches the bumped real-thumb size so layout doesn't shift
   * when real article rows replace skeleton placeholders. */
  width: 64px;
  height: 64px;
  background: rgba(10, 31, 61, 0.05);
  border-radius: 3px;
  flex-shrink: 0;
}

.apf-polish-v1.apf-category-page .apf-skeleton-line {
  height: 12px;
  background: rgba(10, 31, 61, 0.05);
  border-radius: 3px;
  margin: 0;
}
.apf-polish-v1.apf-category-page .apf-skeleton-line--title { width: 65%; }
.apf-polish-v1.apf-category-page .apf-skeleton-line--meta  { width: 55%; height: 10px; margin-top: 6px; }
/* v1.0.13: skeleton placeholder for the labeled CTA on the right edge —
 * approximates the rendered "View options →" width so the layout
 * doesn't shift when real content replaces the skeleton. */
.apf-polish-v1.apf-category-page .apf-skeleton-line--cta   { width: 90px; height: 12px; flex-shrink: 0; }

/* ----- Loading spinner + status line ----------------------------------- */

.apf-polish-v1.apf-category-page .apf-loading-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
  font-size: 12px;
  color: var(--apf-muted-strong);
}

.apf-polish-v1.apf-category-page .apf-loading-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(29, 95, 216, 0.25);
  border-top-color: var(--apf-blue);
  border-radius: 50%;
  animation: apf-spin 700ms linear infinite;
}

/* ----- Error card ------------------------------------------------------ */

.apf-polish-v1.apf-category-page .apf-load-error {
  margin: 0 0 16px;
  padding: 16px;
  background: #FCEBEB;
  border: 1px solid #F09595;
  border-radius: 8px;
  font-size: 12px;
  color: #791F1F;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.apf-polish-v1.apf-category-page .apf-load-error__msg {
  flex: 1 1 auto;
}
.apf-polish-v1.apf-category-page .apf-load-error__retry {
  font-weight: 500;
  color: #791F1F;
  text-decoration: underline;
}

/* ----- Spin keyframe (single declaration, polish-v1 root level) -------- */

@keyframes apf-spin {
  to { transform: rotate(360deg); }
}

/* ===========================================================================
 * Search & VIN-no-match polish (v1.0.16-search-vin-polish)
 *
 * Brings three pages into the polish-v1 design system:
 *   - /find-part/?q={query}                  (apf-find-part-index)
 *   - /find-part/oem/?q={oem}                (apf-find-part-oem-index)
 *   - /find-vin/no-match/?vin={vin}          (apf-vin-no-match-index)
 *
 * Find-part article-search and OEM cross-reference results share the
 * same `templates/find-part-results.php` template — the wrapper class
 * flips between `apf-find-part-index` and `apf-find-part-oem-index`
 * based on `$is_oem_page`. CSS rules for the find-part header card
 * apply via either compound `.apf-polish-v1.apf-find-part-index .X` or
 * `.apf-polish-v1.apf-find-part-oem-index .X` (per the v1.0.14 lesson:
 * three-class descendant chains with two same-element classes silently
 * don't match — compound + descendant is required).
 *
 * Brand-card refactor (above) made `.apf-polish-v1 .apf-brand-card*`
 * page-agnostic so the VIN-no-match brand grid uses the same chrome
 * the parts-index page does — no duplication, no per-page rules.
 *
 * Article rows on find-part / OEM inherit the polish-v1 row chrome
 * (card-fill + soft shadow + hover lift + "View options →" CTA) via
 * the same compound+descendant pattern category-page used in v1.0.14.
 * Image lazy-loading is browser-native via `loading="lazy"` on the
 * `<img>` — no JS, search-result lists are typically 1–50 rows and
 * server-render in full.
 *
 * Trust strip is intentionally NOT rendered on any of these pages
 * (matches the model / vehicle / category nested-page convention).
 * ======================================================================= */

/* ----- Find-part header card (article-search + OEM) -------------------- */

.apf-polish-v1.apf-find-part-index .apf-find-part-index__header,
.apf-polish-v1.apf-find-part-oem-index .apf-find-part-index__header {
  margin: 0 0 24px;
  padding: 16px 18px;
  background: var(--apf-card-fill);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--apf-card-shadow);
}

.apf-polish-v1.apf-find-part-index .apf-find-part-index__eyebrow,
.apf-polish-v1.apf-find-part-oem-index .apf-find-part-index__eyebrow {
  margin: 0 0 6px;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--apf-blue);
}

.apf-polish-v1.apf-find-part-index .apf-find-part-index__title,
.apf-polish-v1.apf-find-part-oem-index .apf-find-part-index__title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--apf-navy);
}

.apf-polish-v1.apf-find-part-index .apf-find-part-index__subhead,
.apf-polish-v1.apf-find-part-oem-index .apf-find-part-index__subhead {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--apf-muted-strong);
}

@media (max-width: 599px) {
  .apf-polish-v1.apf-find-part-index .apf-find-part-index__header,
  .apf-polish-v1.apf-find-part-oem-index .apf-find-part-index__header { padding: 14px 16px; margin-bottom: 20px; }
  .apf-polish-v1.apf-find-part-index .apf-find-part-index__title,
  .apf-polish-v1.apf-find-part-oem-index .apf-find-part-index__title { font-size: 19px; }
  .apf-polish-v1.apf-find-part-index .apf-find-part-index__subhead,
  .apf-polish-v1.apf-find-part-oem-index .apf-find-part-index__subhead { font-size: 12px; }
}

/* ----- Find-part article rows (polish-v1 chrome — same as category page) -- */

.apf-polish-v1.apf-find-part-index .apf-article-list,
.apf-polish-v1.apf-find-part-oem-index .apf-article-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.apf-polish-v1.apf-find-part-index .apf-article-row,
.apf-polish-v1.apf-find-part-oem-index .apf-article-row {
  background: var(--apf-card-fill);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--apf-card-shadow);
  transition: background 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
}
.apf-polish-v1.apf-find-part-index .apf-article-row:hover,
.apf-polish-v1.apf-find-part-index .apf-article-row:focus-within,
.apf-polish-v1.apf-find-part-oem-index .apf-article-row:hover,
.apf-polish-v1.apf-find-part-oem-index .apf-article-row:focus-within {
  background: var(--apf-card-fill-hover);
  transform: translateY(-2px);
  box-shadow: var(--apf-card-shadow-hover);
}
.apf-polish-v1.apf-find-part-index .apf-article-row:active,
.apf-polish-v1.apf-find-part-oem-index .apf-article-row:active {
  transform: translateY(0);
  box-shadow: var(--apf-card-shadow);
}

.apf-polish-v1.apf-find-part-index .apf-article-row__link,
.apf-polish-v1.apf-find-part-oem-index .apf-article-row__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
}

.apf-polish-v1.apf-find-part-index .apf-article-row__thumb,
.apf-polish-v1.apf-find-part-oem-index .apf-article-row__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(10, 31, 61, 0.04);
  overflow: hidden;
}
.apf-polish-v1.apf-find-part-index .apf-article-row__thumb img,
.apf-polish-v1.apf-find-part-oem-index .apf-article-row__thumb img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}
.apf-polish-v1.apf-find-part-index .apf-thumb-placeholder--icon,
.apf-polish-v1.apf-find-part-oem-index .apf-thumb-placeholder--icon {
  color: rgba(10, 31, 61, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.apf-polish-v1.apf-find-part-index .apf-article-row__body,
.apf-polish-v1.apf-find-part-oem-index .apf-article-row__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.apf-polish-v1.apf-find-part-index .apf-article-row__title,
.apf-polish-v1.apf-find-part-oem-index .apf-article-row__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--apf-navy);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.apf-polish-v1.apf-find-part-index .apf-article-row__meta,
.apf-polish-v1.apf-find-part-oem-index .apf-article-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  line-height: 1.4;
}

.apf-polish-v1.apf-find-part-index .apf-supplier-badge,
.apf-polish-v1.apf-find-part-oem-index .apf-supplier-badge {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(29, 95, 216, 0.08);
  color: var(--apf-blue-text);
  border-radius: 3px;
  font-weight: 500;
}

.apf-polish-v1.apf-find-part-index .apf-article-no,
.apf-polish-v1.apf-find-part-oem-index .apf-article-no {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--apf-muted-strong);
}

.apf-polish-v1.apf-find-part-index .apf-article-row__cta,
.apf-polish-v1.apf-find-part-oem-index .apf-article-row__cta {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--apf-blue);
  white-space: nowrap;
  line-height: 1.4;
}

@media (max-width: 599px) {
  .apf-polish-v1.apf-find-part-index .apf-article-row__link,
  .apf-polish-v1.apf-find-part-oem-index .apf-article-row__link  { gap: 10px; padding: 10px 14px; }
  .apf-polish-v1.apf-find-part-index .apf-article-row__thumb,
  .apf-polish-v1.apf-find-part-oem-index .apf-article-row__thumb { width: 56px; height: 56px; }
  .apf-polish-v1.apf-find-part-index .apf-article-row__thumb img,
  .apf-polish-v1.apf-find-part-oem-index .apf-article-row__thumb img { width: 56px; height: 56px; }
  .apf-polish-v1.apf-find-part-index .apf-article-row__title,
  .apf-polish-v1.apf-find-part-oem-index .apf-article-row__title { font-size: 12px; }
  .apf-polish-v1.apf-find-part-index .apf-article-row__meta,
  .apf-polish-v1.apf-find-part-oem-index .apf-article-row__meta  { font-size: 10px; gap: 6px; }
  .apf-polish-v1.apf-find-part-index .apf-article-row__cta,
  .apf-polish-v1.apf-find-part-oem-index .apf-article-row__cta   { font-size: 11px; }
}

/* ----- VIN-no-match header card --------------------------------------- */

.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__header {
  margin: 0 0 24px;
  padding: 20px 22px;
  background: var(--apf-card-fill);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--apf-card-shadow);
}

.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__eyebrow {
  margin: 0 0 6px;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--apf-blue);
}

.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--apf-navy);
}

.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__subhead {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--apf-muted-strong);
}

.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__detected {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--apf-navy);
}
.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__detected strong {
  font-weight: 500;
  color: var(--apf-blue);
  margin-right: 6px;
}
.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__detected-extras {
  color: var(--apf-muted-strong);
}

.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__vin-line {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--apf-muted-strong);
}
.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__vin-label {
  margin-right: 6px;
}
.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__vin-pill {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--apf-bodycode-bg);
  color: var(--apf-bodycode-text);
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__wa-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 6px;
  background: var(--apf-whatsapp-green);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease-out;
}
.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__wa-button:hover,
.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__wa-button:focus {
  background: var(--apf-whatsapp-green-hover);
  color: #fff;
}
.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__wa-icon {
  display: inline-flex;
  align-items: center;
}
.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__wa-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__browse-hint {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--apf-muted-strong);
}

/* ----- VIN-no-match brand-section header ------------------------------ */

.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__brand-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}

.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__brand-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--apf-navy);
}

.apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__brand-count {
  font-size: 12px;
  color: rgba(10, 31, 61, 0.55);
  white-space: nowrap;
}

@media (max-width: 599px) {
  .apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__header        { padding: 16px 18px; margin-bottom: 20px; }
  .apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__title         { font-size: 19px; }
  .apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__subhead,
  .apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__browse-hint   { font-size: 12px; }
  .apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__brand-header  { margin-bottom: 10px; }
  .apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__brand-title   { font-size: 14px; }
  .apf-polish-v1.apf-vin-no-match-index .apf-vin-no-match-index__brand-count   { font-size: 11px; }
}

/* ---------------------------------------------------------------------------
 * Article page polish (v1.0.19) — refined in (v1.0.20) — restructured to
 * section cards in (v1.0.21) — staging fixes in (v1.0.22) — white-theme
 * layout reset in (v1.0.23)
 * ---------------------------------------------------------------------------
 *
 * Brings the article page into the polish-v1 design system. The legacy
 * `.apf-article-page` rules earlier in this file are preserved verbatim
 * for the `'php_legacy'` render mode (existing v1.0.18 installs are
 * pinned there until they explicitly opt in via Settings → Display).
 *
 * Selector pattern: compound `.apf-polish-v1.apf-article-index .X` per
 * the polish-v1 design system reference section's "Selector pattern (THE
 * rule)" — both classes sit on the same outer <section>; neither is the
 * other's ancestor; the broken three-class chain
 * `.apf-polish-v1 .apf-article-index .X` does not match. Specificity
 * (0,0,3) cleanly beats any legacy unscoped article rule (0,0,1).
 *
 * Tokens reused from .apf-polish-v1 root: --apf-card-fill,
 * --apf-card-fill-hover, --apf-card-shadow, --apf-card-shadow-hover,
 * --apf-blue, --apf-navy, --apf-muted-strong, --apf-muted-weak,
 * --apf-bodycode-bg, --apf-bodycode-text, --apf-whatsapp-green,
 * --apf-whatsapp-green-hover, --apf-vin-cta-bg, --apf-vin-cta-border.
 *
 * NEW page-specific tokens declared on .apf-article-index for surfaces
 * that don't generalise: fitment-card green, trust-strip-v2 icon tints,
 * shipping badge color variants, sticky CTA chrome.
 *
 * v1.0.20 refinements applied IN PLACE to the v1.0.19 rules below
 * (no separate v1.0.20 section — keeps related rules co-located so a
 * future maintainer doesn't have to chase two sections to reason about
 * the article page). The refinements:
 *   - Hero content max-width bumped 1140px → 1240px; gallery share
 *     1.1fr → 1.22fr.
 *   - Vertical thumb rail on desktop (was horizontal-below); mobile keeps
 *     horizontal strip below the main image.
 *   - Active-thumb visual indicator (1.5px blue border) + `.is-active`
 *     class managed by article-page-gallery.js.
 *   - Template-rendered nav arrows over the main image (desktop only).
 *   - Fitment box quietened: border-left accent + tint, no full border
 *     or box-shadow.
 *   - Trust strip refactored to inline horizontal stripe (border-top +
 *     border-bottom, no card chrome) — same `__trust-strip-v2` BEM block,
 *     refactored in place per v1.0.20 brief Decision 4.
 *   - Sticky CTA refactored: white bg, thin top border, dark navy text,
 *     small green pill on the right. The 3 v1.0.19 tokens are
 *     repurposed in place (`--apf-sticky-cta-bg` is now the bar bg
 *     not the slab bg; `--apf-sticky-cta-text` is now the title color
 *     not the white-on-green color).
 *   - Specs and OEM toggles hidden on desktop via toggle-modifier
 *     classes (`__toggle--specs`, `__toggle--oem`, etc.) — desktop
 *     surfaces this content via the new `__below-hero` block. Toggle
 *     pattern kept on mobile (vertical-space scarcity).
 *   - New BEM blocks: `__hero-spec-strip`, `__hero-micro-trust`,
 *     `__below-hero`, `__below-hero-row--two-col`, `__inline-shipping`,
 *     `__inline-payment`, `__inline-specs`, `__inline-oem`,
 *     `__inline-vehicles`, `__gallery-thumb-btn`, `__gallery-nav`.
 *
 * Two JS files now: article-sticky-cta.js (v1.0.19, untouched), and
 * article-page-gallery.js (v1.0.20 — gallery click/swipe/keyboard +
 * "show all vehicles" expansion). Both conditionally enqueued via
 * Apf_Page_Renderer::is_article_page() so non-article pages don't pay
 * the script cost.
 * ----------------------------------------------------------------------- */

.apf-polish-v1.apf-article-index {
  /* Page-specific token block (kept minimal; everything else inherits). */

  /* v1.0.20: fitment moves from a full-bordered card to a left-edge
   * accented callout. Tokens repurposed: -bg becomes the soft tint,
   * -border keeps name but lightens, -text and -icon-bg unchanged. */
  --apf-fitment-bg:        #E1F5EE; /* tinted callout bg */
  --apf-fitment-border:    #5DCAA5; /* left-edge accent */
  --apf-fitment-text:      #065F46;
  --apf-fitment-icon-bg:   #10B981;

  --apf-pill-stock-bg:     #DCFCE7;
  --apf-pill-stock-text:   #14532D;
  --apf-pill-quality-bg:   #DBEAFE;
  --apf-pill-quality-text: #1E40AF;

  --apf-shipping-green-bg:    #DCFCE7;
  --apf-shipping-green-text:  #14532D;
  --apf-shipping-blue-bg:     #DBEAFE;
  --apf-shipping-blue-text:   #1E40AF;
  --apf-shipping-purple-bg:   #EDE9FE;
  --apf-shipping-purple-text: #5B21B6;
  /* v1.0.29: yellow eyebrow added for Worldwide shipping row. */
  --apf-shipping-yellow-bg:   #FEF3C7;
  --apf-shipping-yellow-text: #92400E;

  --apf-trust-green-tint:    #ECFDF5;
  --apf-trust-green-fg:      #10B981;
  --apf-trust-blue-tint:     #EFF6FF;
  --apf-trust-blue-fg:       #2563EB;
  --apf-trust-amber-tint:    #FEF3C7;
  --apf-trust-amber-fg:      #B45309;
  --apf-trust-whatsapp-tint: #DCFCE7;
  --apf-trust-whatsapp-fg:   #16A34A;

  /* v1.0.20: sticky CTA flipped from full-bleed green slab to white bar
   * with green pill CTA on the right. Tokens repurposed in place:
   *   -bg     was the slab bg (#25D366) → now the bar bg (white)
   *   -text   was the white-on-green title color → now the navy title color
   *   -shadow value tweaked to a softer drop-shadow value */
  --apf-sticky-cta-bg:      #FFFFFF;
  --apf-sticky-cta-text:    #0A1F3D; /* matches --apf-navy from polish-v1 root */
  --apf-sticky-cta-shadow:  0 -2px 8px rgba(0,0,0,0.04);
  --apf-sticky-cta-border:  rgba(10,31,61,0.08);
  --apf-sticky-cta-pill-bg: #25D366; /* the small green CTA pill on the right */

  /* v1.0.23: page-specific surfaces for the white storefront canvas. */
  --apf-article-content-max: 1440px;
  --apf-article-page-bg: #FFFFFF;
  --apf-article-card-bg: #F7F9FC;
  --apf-article-panel-bg: #FFFFFF;
  --apf-article-border: rgba(10,31,61,0.08);

  display: block;
  background: var(--apf-article-page-bg);
}

.apf-polish-v1.apf-article-index,
.apf-polish-v1.apf-article-index *,
.apf-polish-v1.apf-article-index *::before,
.apf-polish-v1.apf-article-index *::after {
  box-sizing: border-box;
}

/* ----- Hero grid ------------------------------------------------------- */

.apf-polish-v1.apf-article-index .apf-article-index__hero {
  display: grid;
  /* v1.0.20: gallery share bumped 1.1fr → 1.22fr so the main image gets
   * meaningfully more width on desktop. Mobile collapses to 1-col below. */
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin: 0 0 24px;
}

/* ----- Gallery --------------------------------------------------------- */

.apf-polish-v1.apf-article-index .apf-article-index__gallery {
  background: var(--apf-article-panel-bg);
  border: 1px solid var(--apf-article-border);
  box-shadow: none;
  border-radius: 8px;
  padding: 14px;
}

.apf-polish-v1.apf-article-index .apf-article-index__gallery-main {
  position: relative; /* anchor for nav arrows */
  background: #FFFFFF;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.apf-polish-v1.apf-article-index .apf-article-index__gallery-main img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* v1.0.20: gallery nav arrows — template-rendered, JS-wired. Visible
 * on desktop only (mobile uses touch swipe instead). Hidden on
 * single-image articles via the `.is-single-image` modifier on the
 * gallery wrapper. */
.apf-polish-v1.apf-article-index .apf-article-index__gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none; /* shown only at ≥768px below */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(10,31,61,0.08);
  color: var(--apf-navy);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: background 150ms ease-out, transform 150ms ease-out;
  padding: 0;
}
.apf-polish-v1.apf-article-index .apf-article-index__gallery-nav:hover,
.apf-polish-v1.apf-article-index .apf-article-index__gallery-nav:focus {
  background: #FFFFFF;
}
.apf-polish-v1.apf-article-index .apf-article-index__gallery-nav--prev { left: 8px; }
.apf-polish-v1.apf-article-index .apf-article-index__gallery-nav--next { right: 8px; }
.apf-polish-v1.apf-article-index .apf-article-index__gallery.is-single-image .apf-article-index__gallery-nav { display: none !important; }
.apf-polish-v1.apf-article-index .apf-article-index__gallery.is-single-image .apf-article-index__gallery-thumbs { display: none !important; }

.apf-polish-v1.apf-article-index .apf-article-index__gallery-thumbs {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  /* Mobile default: horizontal grid below the main image. Desktop
   * @media block below switches to a vertical rail on the left. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
}
.apf-polish-v1.apf-article-index .apf-article-index__gallery-thumbs li {
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid rgba(10,31,61,0.06);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* v1.0.20: active-thumb visual indicator. The .is-active class lands
   * on the <li> from the JS gallery driver. */
  transition: border-color 150ms ease-out;
}
.apf-polish-v1.apf-article-index .apf-article-index__gallery-thumbs li.is-active {
  border: 1.5px solid var(--apf-blue);
}

/* v1.0.20: <button> wrapper around each thumb img. Provides keyboard
 * + click semantics for free. The data-full-src attr feeds the gallery
 * JS for image swap. */
.apf-polish-v1.apf-article-index .apf-article-index__gallery-thumb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.apf-polish-v1.apf-article-index .apf-article-index__gallery-thumb-btn:focus {
  outline: 2px solid var(--apf-blue);
  outline-offset: -2px;
}

.apf-polish-v1.apf-article-index .apf-article-index__gallery-thumbs img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* v1.0.20 desktop: vertical thumb rail on the left, main image fills
 * the remaining gallery column width. Mobile keeps the v1.0.19 layout
 * (main image on top, horizontal thumbs below). */
@media (min-width: 768px) {
  .apf-polish-v1.apf-article-index .apf-article-index__gallery {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }
  .apf-polish-v1.apf-article-index .apf-article-index__gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    /* Articles with many thumbs scroll inside the rail without
     * affecting the page layout. */
    max-height: 480px;
    overflow-y: auto;
    /* Source order would put thumbs after the main image on desktop;
     * grid-area placement re-orders them to the left column without
     * touching the markup. */
    grid-column: 1;
    grid-row: 1;
  }
  .apf-polish-v1.apf-article-index .apf-article-index__gallery-main {
    grid-column: 2;
    grid-row: 1;
  }
  .apf-polish-v1.apf-article-index .apf-article-index__gallery-thumbs li {
    width: 56px;
    aspect-ratio: 1;
  }
  .apf-polish-v1.apf-article-index .apf-article-index__gallery-nav {
    display: flex;
  }
}

.apf-polish-v1.apf-article-index .apf-article-index__gallery-empty {
  background: #FFFFFF;
  border-radius: 6px;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--apf-muted-weak);
}
.apf-polish-v1.apf-article-index .apf-article-index__gallery-empty-text {
  font-size: 13px;
}

/* ----- Info column ----------------------------------------------------- */

.apf-polish-v1.apf-article-index .apf-article-index__info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--apf-article-panel-bg);
  border: 1px solid var(--apf-article-border);
  box-shadow: none;
  border-radius: 8px;
  padding: 18px 20px;
}

/* Fitment confirmation card */

/* v1.0.20: fitment box quietened — was a full-bordered card with shadow,
 * now a left-edge-accented callout. The box still anchors the eye but
 * doesn't compete with the H1 below. Token --apf-fitment-bg now means
 * the soft callout tint; --apf-fitment-border is the left-edge accent. */
.apf-polish-v1.apf-article-index .apf-article-index__fitment {
  background: var(--apf-fitment-bg);
  border-left: 3px solid var(--apf-fitment-border);
  border-radius: 4px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.apf-polish-v1.apf-article-index .apf-article-index__fitment-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--apf-fitment-text);
}
.apf-polish-v1.apf-article-index .apf-article-index__fitment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--apf-fitment-icon-bg);
  color: #FFFFFF;
  border-radius: 50%;
  flex-shrink: 0;
}
.apf-polish-v1.apf-article-index .apf-article-index__fitment-icon svg {
  width: 8px;
  height: 8px;
  display: block;
}
.apf-polish-v1.apf-article-index .apf-article-index__fitment-line {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--apf-navy);
  line-height: 1.4;
}
.apf-polish-v1.apf-article-index .apf-article-index__fitment-sub {
  margin: 0;
  font-size: 12px;
  color: var(--apf-muted-strong);
  line-height: 1.4;
}

/* Supplier row */

.apf-polish-v1.apf-article-index .apf-article-index__supplier-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.apf-polish-v1.apf-article-index .apf-article-index__supplier-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #FFFFFF;
  border: 1px solid rgba(10,31,61,0.08);
  border-radius: 4px;
  color: var(--apf-muted-strong);
  flex-shrink: 0;
}
.apf-polish-v1.apf-article-index .apf-article-index__supplier-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--apf-navy);
  letter-spacing: 0.02em;
}
.apf-polish-v1.apf-article-index .apf-article-index__supplier-pill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}
.apf-polish-v1.apf-article-index .apf-article-index__supplier-pill--stock {
  background: var(--apf-pill-stock-bg);
  color: var(--apf-pill-stock-text);
}
.apf-polish-v1.apf-article-index .apf-article-index__supplier-pill--quality {
  background: var(--apf-pill-quality-bg);
  color: var(--apf-pill-quality-text);
}

/* H1 + article number */

.apf-polish-v1.apf-article-index .apf-article-index__title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--apf-navy);
}
.apf-polish-v1.apf-article-index .apf-article-index__article-no {
  margin: 0;
  font-size: 12px;
  color: var(--apf-muted-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.apf-polish-v1.apf-article-index .apf-article-index__article-no span {
  color: var(--apf-navy);
  font-weight: 500;
  margin-left: 2px;
}

/* Primary CTA */

.apf-polish-v1.apf-article-index .apf-article-index__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 6px;
  text-decoration: none;
  background: var(--apf-whatsapp-green);
  color: #FFFFFF;
  transition: background 150ms ease-out;
  align-self: stretch;
}
.apf-polish-v1.apf-article-index .apf-article-index__cta:hover,
.apf-polish-v1.apf-article-index .apf-article-index__cta:focus {
  background: var(--apf-whatsapp-green-hover);
  color: #FFFFFF;
}
.apf-polish-v1.apf-article-index .apf-article-index__cta-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.apf-polish-v1.apf-article-index .apf-article-index__cta-sub {
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--apf-muted-strong);
  text-align: center;
  line-height: 1.4;
}

/* ----- Toggle stack ---------------------------------------------------- */

.apf-polish-v1.apf-article-index .apf-article-index__toggles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.apf-polish-v1.apf-article-index .apf-article-index__toggle {
  background: #FFFFFF;
  border: 1px solid rgba(10,31,61,0.08);
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
}
.apf-polish-v1.apf-article-index .apf-article-index__toggle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--apf-navy);
  list-style: none;
}
.apf-polish-v1.apf-article-index .apf-article-index__toggle-header::-webkit-details-marker {
  display: none;
}
.apf-polish-v1.apf-article-index .apf-article-index__toggle-chevron {
  font-size: 14px;
  color: var(--apf-muted-strong);
  transition: transform 200ms ease-out;
}
.apf-polish-v1.apf-article-index .apf-article-index__toggle[open] .apf-article-index__toggle-chevron {
  transform: rotate(180deg);
}

/* Shipping list */

.apf-polish-v1.apf-article-index .apf-article-index__shipping-list {
  list-style: none;
  margin: 0;
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apf-polish-v1.apf-article-index .apf-article-index__shipping-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
}
.apf-polish-v1.apf-article-index .apf-article-index__shipping-eyebrow {
  flex-shrink: 0;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.apf-polish-v1.apf-article-index .apf-article-index__shipping-eyebrow--green {
  background: var(--apf-shipping-green-bg);
  color: var(--apf-shipping-green-text);
}
.apf-polish-v1.apf-article-index .apf-article-index__shipping-eyebrow--blue {
  background: var(--apf-shipping-blue-bg);
  color: var(--apf-shipping-blue-text);
}
.apf-polish-v1.apf-article-index .apf-article-index__shipping-eyebrow--purple {
  background: var(--apf-shipping-purple-bg);
  color: var(--apf-shipping-purple-text);
}
.apf-polish-v1.apf-article-index .apf-article-index__shipping-text {
  color: var(--apf-navy);
}

/* Payment methods grid */

.apf-polish-v1.apf-article-index .apf-article-index__payment-grid {
  list-style: none;
  margin: 0;
  padding: 0 14px 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.apf-polish-v1.apf-article-index .apf-article-index__payment-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background: #FAFBFC;
  border: 1px solid rgba(10,31,61,0.06);
  border-radius: 4px;
  text-align: center;
}
.apf-polish-v1.apf-article-index .apf-article-index__payment-icon {
  color: var(--apf-muted-strong);
}
.apf-polish-v1.apf-article-index .apf-article-index__payment-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--apf-navy);
  line-height: 1.2;
}

/* Specs list */

.apf-polish-v1.apf-article-index .apf-article-index__specs-list {
  margin: 0;
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apf-polish-v1.apf-article-index .apf-article-index__specs-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 12px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(10,31,61,0.04);
}
.apf-polish-v1.apf-article-index .apf-article-index__specs-row:last-child {
  border-bottom: 0;
}
.apf-polish-v1.apf-article-index .apf-article-index__specs-row dt {
  margin: 0;
  color: var(--apf-muted-strong);
  font-weight: 500;
}
.apf-polish-v1.apf-article-index .apf-article-index__specs-row dd {
  margin: 0;
  color: var(--apf-navy);
}

/* OEM list */

.apf-polish-v1.apf-article-index .apf-article-index__oem-list {
  list-style: none;
  margin: 0;
  padding: 0 14px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.apf-polish-v1.apf-article-index .apf-article-index__oem-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--apf-bodycode-bg);
  color: var(--apf-bodycode-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 4px;
}
.apf-polish-v1.apf-article-index .apf-article-index__oem-brand {
  color: var(--apf-muted-strong);
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  padding-left: 6px;
  border-left: 1px solid rgba(10,31,61,0.12);
}

/* Compat list */

.apf-polish-v1.apf-article-index .apf-article-index__compat-list {
  list-style: disc;
  margin: 0;
  padding: 0 14px 6px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.apf-polish-v1.apf-article-index .apf-article-index__compat-row {
  font-size: 13px;
  color: var(--apf-navy);
  line-height: 1.45;
}
.apf-polish-v1.apf-article-index .apf-article-index__compat-more {
  margin: 4px 14px 12px;
  font-size: 12px;
  color: var(--apf-muted-strong);
  font-style: italic;
}

/* ----- Trust strip v2 ------------------------------------------------- */
/* v1.0.20: refactored from boxed gray container with white cards into
 * a quiet inline horizontal stripe — border-top + border-bottom frame,
 * no card chrome, no gray container. The same `__trust-strip-v2` BEM
 * block is preserved (refactored in place; not a new block) per the
 * v1.0.20 brief Decision 4. */
.apf-polish-v1.apf-article-index .apf-trust-strip-v2 {
  list-style: none;
  margin: 0 0 24px;
  padding: 14px 0;
  background: transparent;
  border-top: 0.5px solid rgba(10,31,61,0.08);
  border-bottom: 0.5px solid rgba(10,31,61,0.08);
  border-radius: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.apf-polish-v1.apf-article-index .apf-trust-strip-v2__card {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.apf-polish-v1.apf-article-index .apf-trust-strip-v2__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}
.apf-polish-v1.apf-article-index .apf-trust-strip-v2__icon--green {
  background: var(--apf-trust-green-tint);
  color: var(--apf-trust-green-fg);
}
.apf-polish-v1.apf-article-index .apf-trust-strip-v2__icon--blue {
  background: var(--apf-trust-blue-tint);
  color: var(--apf-trust-blue-fg);
}
.apf-polish-v1.apf-article-index .apf-trust-strip-v2__icon--amber {
  background: var(--apf-trust-amber-tint);
  color: var(--apf-trust-amber-fg);
}
.apf-polish-v1.apf-article-index .apf-trust-strip-v2__icon--whatsapp {
  background: var(--apf-trust-whatsapp-tint);
  color: var(--apf-trust-whatsapp-fg);
}
.apf-polish-v1.apf-article-index .apf-trust-strip-v2__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.apf-polish-v1.apf-article-index .apf-trust-strip-v2__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--apf-navy);
  line-height: 1.2;
}
.apf-polish-v1.apf-article-index .apf-trust-strip-v2__sub {
  font-size: 11px;
  color: var(--apf-muted-strong);
  line-height: 1.3;
}

/* ----- Sticky bottom CTA (mobile only) ------------------------------- */
/* v1.0.20: refactored from a full-bleed saturated-green slab to a quiet
 * white bar with a small green pill CTA on the right. Token meanings
 * shifted (see token block at top of section). The 3 v1.0.19 tokens
 * are repurposed in place: `--apf-sticky-cta-bg` is now the bar bg
 * (white), `--apf-sticky-cta-text` is the title color (navy), and
 * `--apf-sticky-cta-shadow` value is softened. New token
 * `--apf-sticky-cta-pill-bg` (added v1.0.20) drives the pill CTA bg.
 * Markup unchanged — same BEM block, same JS file. */
.apf-polish-v1.apf-article-index .apf-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: none; /* shown only at <768px via media query below */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--apf-sticky-cta-bg);
  color: var(--apf-sticky-cta-text);
  text-decoration: none;
  border-top: 0.5px solid var(--apf-sticky-cta-border);
  box-shadow: var(--apf-sticky-cta-shadow);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 250ms ease-out, opacity 200ms ease-out;
}
.apf-polish-v1.apf-article-index .apf-sticky-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.apf-polish-v1.apf-article-index .apf-sticky-cta__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.apf-polish-v1.apf-article-index .apf-sticky-cta__eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--apf-whatsapp-green-hover); /* tiny green caps */
}
.apf-polish-v1.apf-article-index .apf-sticky-cta__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--apf-sticky-cta-text);
  line-height: 1.25;
  /* Single-line truncation so longer locale strings degrade
   * gracefully without breaking the bar's height. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apf-polish-v1.apf-article-index .apf-sticky-cta__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--apf-sticky-cta-pill-bg);
  color: #FFFFFF;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
  transition: background 150ms ease-out;
}
.apf-polish-v1.apf-article-index .apf-sticky-cta:hover .apf-sticky-cta__action,
.apf-polish-v1.apf-article-index .apf-sticky-cta:focus .apf-sticky-cta__action {
  background: var(--apf-whatsapp-green-hover);
}
.apf-polish-v1.apf-article-index .apf-sticky-cta__icon {
  display: inline-flex;
  align-items: center;
  color: #FFFFFF;
}

/* Honour reduced-motion preference: skip the slide animation, fade only. */
@media (prefers-reduced-motion: reduce) {
  .apf-polish-v1.apf-article-index .apf-sticky-cta {
    transition: opacity 200ms ease-out;
    transform: none;
  }
  .apf-polish-v1.apf-article-index .apf-sticky-cta.is-visible {
    transform: none;
  }
}

/* Mobile breakpoint — show sticky bar, stack hero, collapse trust strip,
 * drop payment grid to 2-col. */
@media (max-width: 767px) {
  .apf-polish-v1.apf-article-index .apf-sticky-cta { display: flex; }

  .apf-polish-v1.apf-article-index .apf-article-index__hero {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .apf-polish-v1.apf-article-index .apf-article-index__gallery,
  .apf-polish-v1.apf-article-index .apf-article-index__info {
    padding: 14px 16px;
  }

  .apf-polish-v1.apf-article-index .apf-article-index__title {
    font-size: 20px;
  }

  .apf-polish-v1.apf-article-index .apf-article-index__cta {
    padding: 11px 16px;
    font-size: 14px;
  }

  /* v1.0.20: trust strip is now an inline stripe with border-top + border-bottom
   * (no boxed gray container). Mobile keeps the inline-stripe character:
   * borderless left/right, 2x2 grid for icon clusters. */
  .apf-polish-v1.apf-article-index .apf-trust-strip-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 0;
    gap: 8px;
  }
	.apf-polish-v1.apf-article-index .apf-trust-strip-v2__card {
	  padding: 6px 8px;
	  flex-direction: row;
	  justify-content: center;
	  text-align: left;
	}
	.apf-polish-v1.apf-article-index .apf-trust-strip-v2__text {
	  align-items: flex-start;
	}
  .apf-polish-v1.apf-article-index .apf-trust-strip-v2__title { font-size: 12px; }
  .apf-polish-v1.apf-article-index .apf-trust-strip-v2__sub { font-size: 10px; }

  .apf-polish-v1.apf-article-index .apf-article-index__payment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
 * v1.0.20 NEW BEM rules — hero spec strip, micro-trust, below-hero blocks
 * ---------------------------------------------------------------------------
 *
 * The dual-render pattern: specs/oem/shipping/payment/vehicles are rendered
 * TWICE in the markup — once inside the toggle stack (visible on mobile),
 * once as below-hero inline blocks (visible on desktop). CSS @media
 * picks which copy to display via toggle-modifier classes
 * (`__toggle--specs` etc.) and the `__below-hero` parent.
 *
 * SEO note: server-rendered visible content (top 5 vehicles) is in the
 * markup at first render. Remainder vehicles are rendered with HTML5
 * `hidden` attribute so they're parsed by crawlers but absent from the
 * a11y tree. JS expander removes the `hidden` attribute on click.
 * ----------------------------------------------------------------------- */

/* ----- Hero mini-spec strip ------------------------------------------ */

.apf-polish-v1.apf-article-index .apf-article-index__hero-spec-strip {
  list-style: none;
  margin: 4px 0;
  padding: 10px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  border-top: 0.5px solid rgba(10,31,61,0.08);
  border-bottom: 0.5px solid rgba(10,31,61,0.08);
}
.apf-polish-v1.apf-article-index .apf-article-index__hero-spec-strip-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.apf-polish-v1.apf-article-index .apf-article-index__hero-spec-strip-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--apf-muted-strong);
  line-height: 1.2;
}
.apf-polish-v1.apf-article-index .apf-article-index__hero-spec-strip-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--apf-navy);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----- Hero micro-trust row ------------------------------------------ */

.apf-polish-v1.apf-article-index .apf-article-index__hero-micro-trust {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  border-top: 0.5px solid rgba(10,31,61,0.08);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
}
.apf-polish-v1.apf-article-index .apf-article-index__hero-micro-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--apf-muted-strong);
}
.apf-polish-v1.apf-article-index .apf-article-index__hero-micro-trust-icon {
  display: inline-flex;
  align-items: center;
  color: var(--apf-trust-green-fg);
}

/* ----- Below-hero inline content blocks (desktop only by default) ---- */

.apf-polish-v1.apf-article-index .apf-article-index__below-hero {
  display: block;
  margin: 0 0 24px;
}
.apf-polish-v1.apf-article-index .apf-article-index__below-hero > section {
  margin: 0 0 22px;
}
.apf-polish-v1.apf-article-index .apf-article-index__below-hero-row--two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  margin: 0 0 22px;
}
.apf-polish-v1.apf-article-index .apf-article-index__below-hero-row--two-col > section {
  margin: 0;
}

.apf-polish-v1.apf-article-index .apf-article-index__inline-heading {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--apf-navy);
  letter-spacing: 0.02em;
}

/* Inline shipping (desktop) */
.apf-polish-v1.apf-article-index .apf-article-index__inline-shipping-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-shipping-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-shipping-eyebrow {
  flex-shrink: 0;
  display: inline-block;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-shipping-eyebrow--green {
  background: var(--apf-shipping-green-bg);
  color: var(--apf-shipping-green-text);
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-shipping-eyebrow--blue {
  background: var(--apf-shipping-blue-bg);
  color: var(--apf-shipping-blue-text);
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-shipping-eyebrow--purple {
  background: var(--apf-shipping-purple-bg);
  color: var(--apf-shipping-purple-text);
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-shipping-eyebrow--yellow {
  background: var(--apf-shipping-yellow-bg);
  color: var(--apf-shipping-yellow-text);
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-shipping-text {
  color: var(--apf-navy);
}

/* v1.0.29: "How it works" intro inside the Shipping & payment card. Sits
 * above the two-col Delivery / Payment grid as a single short paragraph. */
.apf-polish-v1.apf-article-index .apf-article-index__inline-howitworks {
  margin: 0 0 20px;
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-howitworks-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--apf-navy);
}

/* Inline payment pills (desktop) — v1.0.28: logo slot reduced from 92×28 to
 * 48×20 to match e-commerce convention (Stripe / Shopify / Amazon checkout
 * payment badges sit at ~20-24px tall). Pill chrome lightened so the row
 * reads as quiet trust signals rather than chunky cards. */
.apf-polish-v1.apf-article-index .apf-article-index__inline-payment-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 6px;
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-payment-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 0.5px solid rgba(10,31,61,0.08);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--apf-muted-strong);
  line-height: 1.2;
  text-align: center;
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-payment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 20px;
  color: var(--apf-muted-strong);
  flex-shrink: 0;
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-payment-icon svg {
  width: 16px;
  height: 16px;
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-payment-logo {
  display: block;
  width: auto;
  max-width: 48px;
  max-height: 20px;
  object-fit: contain;
}

/* Inline specs table (desktop) */
.apf-polish-v1.apf-article-index .apf-article-index__inline-specs-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 32px;
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-specs-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 12px;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 0.5px solid rgba(10,31,61,0.06);
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-specs-row dt {
  margin: 0;
  color: var(--apf-muted-strong);
  font-weight: 500;
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-specs-row dd {
  margin: 0;
  color: var(--apf-navy);
}

/* Inline OEM chip grid (desktop) */
.apf-polish-v1.apf-article-index .apf-article-index__inline-oem-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-oem-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--apf-bodycode-bg);
  color: var(--apf-bodycode-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 4px;
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-oem-no {
  font-family: inherit;
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-oem-brand {
  color: var(--apf-muted-strong);
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  padding-left: 6px;
  border-left: 1px solid rgba(10,31,61,0.12);
}

/* Inline vehicles list + show-all expansion (desktop) */
.apf-polish-v1.apf-article-index .apf-article-index__inline-vehicles-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-vehicles-row {
  font-size: 13px;
  color: var(--apf-navy);
  line-height: 1.45;
  padding: 4px 0;
  border-bottom: 0.5px solid rgba(10,31,61,0.04);
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-vehicles-show-all {
  margin: 10px 0 0;
  background: transparent;
  border: 0.5px solid var(--apf-blue);
  color: var(--apf-blue);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.apf-polish-v1.apf-article-index .apf-article-index__inline-vehicles-show-all:hover,
.apf-polish-v1.apf-article-index .apf-article-index__inline-vehicles-show-all:focus {
  background: var(--apf-blue);
  color: #FFFFFF;
}
/* Once expanded by JS, the button is removed from the DOM (or hidden);
 * the rule below is belt-and-braces for any future variant where the
 * button stays visible. */
.apf-polish-v1.apf-article-index .apf-article-index__inline-vehicles-show-all[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
 * v1.0.21 section-card structure
 * ---------------------------------------------------------------------------
 *
 * Replaces v1.0.20's dual-render pattern (below-hero inline blocks +
 * 5-toggle mobile stack with @media-driven visibility) with a unified
 * section-card stack:
 *
 *   - Hero card (`__hero-card`) wraps the v1.0.20 hero internals; gives
 *     the hero a white surface flush with the section cards beneath.
 *   - Three section cards as siblings of the hero card:
 *       1. Product details (`__details-card`)   — specs + OEM in 2-col
 *                                                  always-visible content
 *       2. Compatible vehicles (`__vehicles-card`) — <details> with
 *                                                    native disclosure
 *                                                    behavior on mobile
 *                                                    and desktop
 *       3. Shipping & payment (`__commerce-card`) — outer <section>;
 *                                                    inner content has
 *                                                    two <details> for
 *                                                    delivery + payment
 *                                                    using the same
 *                                                    force-open pattern
 *
 * Compatible vehicles uses one disclosure pattern on every viewport:
 * server-rendered closed, chevron visible, summary clickable/tappable,
 * and content revealed by native <details> semantics.
 * ----------------------------------------------------------------------- */

/* ----- Inner content container (v1.0.22, reset in v1.0.23) --------------- */
/* The article main is uncapped via body.apf-has-article .apf-main. This
 * container gives the product page a storefront-width canvas without the
 * boxed gray frame from v1.0.22. */
.apf-polish-v1.apf-article-index .apf-article-index__container {
  width: 100%;
  max-width: var(--apf-article-content-max);
  margin-left: auto;
  margin-right: auto;
  padding: 24px clamp(16px, 4vw, 56px) 16px;
}

.apf-polish-v1.apf-article-index .apf-vin-cta-banner {
  margin-bottom: 6px;
}

/* ----- Hero card --------------------------------------------------------- */

.apf-polish-v1.apf-article-index .apf-article-index__hero-card {
  background: var(--apf-article-card-bg);
  border: 1px solid var(--apf-article-border);
  border-radius: 8px;
  padding: 20px;
  /* v1.0.22: card gap bumped 16px → 20px between cards (owner staging
   * review — "tighter is right" walked back; cards needed more breathing
   * room). */
  margin: 0 0 20px;
}

/* ----- Section cards (shared anatomy) ----------------------------------- */

.apf-polish-v1.apf-article-index .apf-article-index__details-card,
.apf-polish-v1.apf-article-index .apf-article-index__vehicles-card,
.apf-polish-v1.apf-article-index .apf-article-index__commerce-card {
  background: var(--apf-article-card-bg);
  border: 1px solid var(--apf-article-border);
  border-radius: 8px;
  margin: 0 0 20px;
  box-shadow: none;
}

/* ----- Heading bar (shared) -------------------------------------------- */

.apf-polish-v1.apf-article-index .apf-article-index__card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  /* v1.0.22: heading bar padding bumped 14px 18px → 18px 24px desktop
   * (owner staging review — cards needed more breathing room). Mobile
   * @media block below restores the v1.0.21 mobile values (12px 14px). */
  padding: 18px 24px;
  border-bottom: 0.5px solid rgba(10,31,61,0.08);
  /* The vehicles-card uses <summary> which is a list-item by default;
   * neutralize that so the flex container behaves predictably. */
  list-style: none;
  cursor: default;
}
.apf-polish-v1.apf-article-index .apf-article-index__card-heading::-webkit-details-marker {
  display: none;
}
.apf-polish-v1.apf-article-index .apf-article-index__card-heading-title {
  margin: 0;
  font-size: 15px;
  /* v1.0.30: bumped 500 → 600 so the three section card titles (Product details
   * / Compatible vehicles / Shipping & payment) anchor each section without
   * shouting against the rest of the polish-v1 weight palette. */
  font-weight: 600;
  color: var(--apf-navy);
  line-height: 1.3;
  /* Heading title takes whatever flex space remains after subtitle + chevron. */
  flex: 1 1 auto;
  min-width: 0;
}
.apf-polish-v1.apf-article-index .apf-article-index__card-heading-sub {
  font-size: 11px;
  color: var(--apf-muted-strong);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.apf-polish-v1.apf-article-index .apf-article-index__card-heading-chevron {
  font-size: 14px;
  color: var(--apf-muted-strong);
  flex-shrink: 0;
  transition: transform 200ms ease-out;
  margin-left: 8px;
}
.apf-polish-v1.apf-article-index .apf-article-index__vehicles-card > .apf-article-index__card-heading {
  cursor: pointer;
}
.apf-polish-v1.apf-article-index .apf-article-index__vehicles-card[open] .apf-article-index__card-heading-chevron {
  transform: rotate(180deg);
}

/* ----- Card content area (shared) -------------------------------------- */

.apf-polish-v1.apf-article-index .apf-article-index__card-content {
  /* v1.0.22: content padding bumped 18px → 24px desktop (owner staging
   * review — see heading-bar comment above). Mobile @media block below
   * restores v1.0.21 mobile values (12px 14px). */
  padding: 24px;
}
.apf-polish-v1.apf-article-index .apf-article-index__card-content--two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}

/* ----- Commerce-card sections (Delivery + Payment) --------------------- */
/* v1.0.23: these are always-visible content sections, not nested toggles. */

.apf-polish-v1.apf-article-index .apf-article-index__commerce-toggle-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 0 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--apf-navy);
  letter-spacing: 0.02em;
  list-style: none;
  cursor: default;
}
.apf-polish-v1.apf-article-index .apf-article-index__commerce-toggle-header::-webkit-details-marker {
  display: none;
}
.apf-polish-v1.apf-article-index .apf-article-index__commerce-toggle-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.3;
}

/* ----- Mobile: section card structural adjustments --------------------- */
@media (max-width: 767px) {
  /* Tighter padding on mobile (12/12 per the v1.0.21 signoff; v1.0.22
   * desktop padding bumps to 18/24 + 24 + 20 do NOT carry to mobile —
   * mobile keeps the original tighter values). */
  .apf-polish-v1.apf-article-index .apf-article-index__hero-card {
    padding: 12px;
    margin: 0 0 12px;
  }
  .apf-polish-v1.apf-article-index .apf-article-index__details-card,
  .apf-polish-v1.apf-article-index .apf-article-index__vehicles-card,
  .apf-polish-v1.apf-article-index .apf-article-index__commerce-card {
    margin: 0 0 12px;
  }
  .apf-polish-v1.apf-article-index .apf-article-index__card-heading {
    padding: 12px 14px;
  }
  .apf-polish-v1.apf-article-index .apf-article-index__card-content {
    padding: 12px 14px;
  }
  /* Mobile: stack the Product details 2-col grid into a single column. */
  .apf-polish-v1.apf-article-index .apf-article-index__card-content--two-col {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .apf-polish-v1.apf-article-index .apf-article-index__below-hero-row--two-col {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .apf-polish-v1.apf-article-index .apf-article-index__inline-shipping-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .apf-polish-v1.apf-article-index .apf-article-index__inline-payment-pills {
    /* v1.0.28: auto-fit at 56px lets ~3 small logos sit per row on a 375px
     * viewport — quieter than the previous fixed 2-col layout that left
     * large empty space inside each cell. */
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  }
  /* v1.0.23: page padding lives on the __container; extra bottom space keeps
   * the final content clear of the mobile sticky CTA. */
  .apf-polish-v1.apf-article-index .apf-article-index__container {
    padding: 12px 10px 52px;
  }
}