/* ==========================================================================
   Accessibility contrast fixes — loaded LAST so it overrides everything.
   Raises muted / accent text to WCAG AA (>=4.5:1) on white and grey (#f5f5f7)
   backgrounds. Verified against Lighthouse color-contrast audit.
   ========================================================================== */

/* Product design pages (.v4doc): the shared theme's bright orange (--wine/--red-sale
   #E8651A) and taupe muted text (--ink-muted #A89C92) fail WCAG AA. Darken the tokens
   so every CR/MT product page passes (user-approved). !important beats the body-inline
   <style> that defines these tokens (head loads first, so specificity alone would lose). */
.v4doc { --wine: #b04b0b !important; --red-sale: #b04b0b !important; --ink-muted: #6f655c !important; }

/* Visually-hidden text: appended to generic CTAs ("Learn more") so the crawlable
   anchor text / accessible name is descriptive, while sighted users see the short
   label. Fixes Lighthouse SEO "link-text" without changing the visual design. */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Muted grey text token was #86868b = only 3.3-3.6:1. Darken globally so every
   var(--ink-3) usage (.search-count, .bigstats .l, .lz-certs .cl, .matrix-tab .s,
   captions, labels...) clears 4.5:1 on white AND on #f5f5f7. */
:root { --ink-3: #67676b; }

/* Literal-colour offenders that don't use the token */
.search-article-desc { color: #67676b; }          /* products.css #878787 (3.59:1) */
.video-card .verified { color: #67676b; }          /* #86868b on #fff (3.62:1) */
.darkbar .bt span { color: #5a5a60; }              /* --ink-2 on #edeef2 (4.37:1) */
/* Blue accent links were #0071e3 (4.31:1 on #f5f5f7). Match source specificity
   (.parent .child = 0,2,0) so these win over site.css, loaded later. */
.vcov-n { color: #5f5f65; }                        /* --ink-2 on #f1f1f4 was 4.49:1 */
.gallery-footer .gallery-link,
.dtc-card .dtc-link,
.matrix-footer .compare-link,
.ai-value-link,
.lineup-buy { color: #0067cc; }

/* link-in-text-block: inline text links must not rely on colour alone */
.newsletter-hint a { text-decoration: underline; }
.kb-article-body a { text-decoration: underline; }
.kb-crumb a { text-decoration: underline; }

/* target-size (WCAG 2.5.8): keep the small pagination dots, but space them >=24px
   centre-to-centre so a 24px hit-circle on each never overlaps its neighbour.
   Compact look preserved (dots ~7-8px). */
.dtc-dots, .gallery-dots, #dtcDots, #galleryDots, #lineupGalleryDots { gap: 20px; }

/* heading-order: footer column titles moved h6 -> h2 (avoids level skip). Keep look. */
.footer-col h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
/* heading-order: DTC card titles moved h4 -> h3 (section is h2). Keep look. */
.dtc-card h3 { font-size: 17px; font-weight: 500; line-height: 1.25; margin: 0 20px 6px; color: var(--ink); letter-spacing: -0.2px; }

/* ==========================================================================
   Homepage lineup cards — UNIFORM height across every category tab.
   Cards stretch to the tallest sibling, so a tab whose products have 2-line
   titles/taglines (Automotive) rendered TALLER cards than a tab of 1-line
   "Professional diagnostics." items (Motorcycle) — the whole block jumped
   height when switching tabs and the button rows sat at different heights.
   Reserve a fixed line-count for the title (2 lines) and tagline (2 lines) so
   the text block is a constant height regardless of the actual copy; the
   square image is already fixed and .lineup-actions has margin-top:auto, so
   every card in every category now ends up exactly the same height.
   ========================================================================== */
.lineup-track { align-items: stretch; }
.lineup-name {
  min-height: 2.3em;                 /* 2 lines @ line-height 1.15 */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.lineup-tagline {
  min-height: 2.6em;                 /* 2 lines @ line-height 1.3 */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
/* Fixed one-line dealer/price line so it can never wrap and shift the row. */
.lineup-price { min-height: 1.35em; }

/* Lineup image area is 3:2 LANDSCAPE (was 1:1 square). The diagnostic devices are wide,
   so a square frame left big white bands top/bottom and the unit looked "half" the card.
   The thumbs are re-rendered to a 3:2 canvas with the device filling ~92%, so at 3:2 the
   device now fills the tile like the product detail page. --img-scale reset to 1 (the
   images already fill the frame — the old 1.06 zoom would clip the device edges). */
.lineup-image-wrap { aspect-ratio: 3 / 2; background: transparent; }

/* ==========================================================================
   Perf: cap infinite decorative animations. Two elements animated FOREVER — the
   hero "scroll to explore" bounce (first viewport) and the support FAB's pulsing
   ring (.sl-fab::after). A page that never stops animating never reaches the idle
   state Lighthouse needs, so its trace engine could not finalise a Largest
   Contentful Paint → mobile PSI reported NO_LCP, which in turn errored TBT and the
   whole performance score. Run each a few times on load (UX intact) then STOP so
   the page settles and the metrics compute.
   ========================================================================== */
.hero-scroll-hint { animation-iteration-count: 3; }
.sl-fab::after { animation-iteration-count: 3; }

/* Compare modal sat at z-index:80, BELOW the sticky nav (z-index:9999) — the nav bar
   overlapped the modal's top edge, covering the close (X) button so it couldn't be
   clicked. Lift the whole overlay above the nav so the scrim + X are always on top. */
.cmp-modal { z-index: 10000; }
.lineup-card[data-series="auto"] .lineup-image-wrap img,
.lineup-card[data-series="moto"] .lineup-image-wrap img,
.lineup-card[data-series="jumpstarter"] .lineup-image-wrap img,
.lineup-card[data-series="heavy"] .lineup-image-wrap img { --img-scale: 1; }