/* ============================================================
   Aeroflow Dynamics — Polish pass (loads last, overrides all)
   Resolves 25-item audit findings in one place.
   ============================================================ */

/* ---------- (1)(4) Hero typography + padding ---------- */
.hero {
  padding-top:    clamp(96px, 12vw, 180px);
  padding-bottom: clamp(64px, 8vw, 120px);
  min-height: auto;
}
.hero__title {
  font-size: clamp(44px, 9.4vw, 112px);
  letter-spacing: -0.04em;
  line-height: 0.96;
}
.hero__sub {
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 56ch;
  margin-top: 22px;
  line-height: 1.5;
}
.hero__stats { margin-top: 56px; padding-top: 28px; gap: 20px; }
.hero__stats strong { font-size: clamp(22px, 2.2vw, 32px); }
.hero__stats span { font-size: 11px; }

/* ---------- (2) Section padding ---------- */
section {
  padding-top:    clamp(56px, 7vw, 110px);
  padding-bottom: clamp(56px, 7vw, 110px);
}
.collections, .bestsellers, .story, .diy, .reviews, .related, .bundles, .fbt,
.cpage__layout, .reviewstat, .reviewlist, .blog, .diy-index, .lookbook,
.about__manifest, .about__stats, .about__process, .about__values, .about__cta,
.wheel-showcase, .install, .specs, .feature {
  padding-top:    clamp(56px, 7vw, 110px);
  padding-bottom: clamp(56px, 7vw, 110px);
}
.section__head { margin-bottom: clamp(36px, 4vw, 56px); }

/* ---------- (3) Tap targets — every button ≥44px ---------- */
.btn { min-height: 44px; }
.btn--mini { min-height: 38px; padding: 9px 14px; }
.iconbtn { min-width: 40px; min-height: 40px; }
button { min-height: 36px; }
.popup__close, .recovery__close, .deal-banner__close { min-width: 36px; min-height: 36px; }

/* ---------- (5) Lazy-load product images via background-image proxy ---------- */
/* Most product imagery is set via inline style background-image, which can't
   use loading="lazy". Use content-visibility instead — Chrome lazy-paints
   off-screen sections, freeing the main thread on load. */
.card, .review, .reviewcard, .post, .diy-card, .diy__card,
.collection, .bs__row, .lookbook__item, .bundle, .wheel-row {
  content-visibility: auto;
  contain-intrinsic-size: 480px;
}

/* ---------- (8) Font display strategy ---------- */
/* (set in HTML <head>; no CSS needed) */

/* ---------- (11) Sticky CTA stacking ---------- */
.sticky-buy { top: 0; z-index: 51; }   /* sit above nav */
.nav { z-index: 50; }

/* ---------- (12) Footer mobile 2-col ---------- */
@media (max-width: 540px) {
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer__cols h4 { font-size: 11px; }
  .footer__cols a { font-size: 14px; line-height: 1.85; }
}

/* ---------- (13) Buy box mobile gap ---------- */
@media (max-width: 540px) {
  .buy { gap: 22px; }
  .buy__title { font-size: clamp(28px, 7vw, 40px); }
}

/* ---------- (14) Cart drawer mobile width ---------- */
@media (max-width: 540px) {
  .drawer {
    left: auto;
    right: 0;
    width: 100%;
    top: auto;
    bottom: 0;
    border-left: 0;
    border-top: 1px solid var(--edge);
  }
}

/* ---------- (15) Visible focus rings (WCAG 2.1.1) ---------- */
:where(button, .btn, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 3px;
  border-radius: 1px;
}
.popup__form-row:focus-within,
.subscribe-band__row:focus-within,
.subscribe-card__form:focus-within { outline: 2px solid var(--volt); outline-offset: 2px; }

/* ---------- (16) Collection card mobile inset ---------- */
@media (max-width: 540px) {
  .collection__meta { left: 20px; right: 20px; bottom: 20px; }
  .collection__meta h3 { font-size: 24px; }
  .collection__meta p { font-size: 14px; max-width: 100%; }
  .collection__cta { font-size: 10px; padding-bottom: 4px; }
  .collections__grid { grid-template-rows: repeat(5, 260px) !important; }
}

/* ---------- (17) Hero stats responsive ---------- */
@media (max-width: 1100px) {
  .hero__stats { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  .hero__stats { gap: 18px; padding-top: 22px; margin-top: 36px; }
  .hero__stats strong { font-size: 22px; }
  .hero__stats span { font-size: 10px; }
}

/* ---------- (19) Chat panel avoids footer ---------- */
@media (min-width: 901px) {
  .chat-panel { max-height: calc(100vh - 200px); }
  .chat-bubble { box-shadow: 0 12px 32px -8px rgba(217,255,59,.4); }
}

/* ---------- (22) Hero CTAs inline at tablet ---------- */
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.hero__actions .btn { flex: 0 1 auto; }
@media (max-width: 540px) {
  .hero__actions .btn { flex: 1 1 100%; min-height: 52px; }
}

/* ---------- (23) Card title line-clamp ---------- */
.card__title, .bs__title, .post h3, .bundle__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

/* ---------- (24) Bundles heading mobile wrap ---------- */
@media (max-width: 540px) {
  .bundles__head h2 { font-size: clamp(28px, 7vw, 36px); max-width: 14ch; }
  .bundle { padding: 24px; }
  .bundle__name { font-size: 22px; }
}

/* ---------- (25) Suppress redundant subscribe-band on PDPs ---------- */
/* PDPs already have engage popup + chat + fitment prompt. The auto-injected
   subscribe-band below PDP video adds little incremental value but adds
   ~140px of scroll. Hide on PDPs only. */
body:has(section.pdp) .subscribe-band { display: none; }

/* Fallback for browsers without :has() — page-level check via JS in polish.js */

/* ---------- (7) Suppress duplicate subscribe-band on category pages too if fitment-hero already has subscribe-card ---------- */
body:has(.fitment-hero .subscribe-card) .subscribe-band { display: none; }

/* ---------- Misc CRO refinements ---------- */
/* Better card body breathing room */
.card__body { padding: 20px 22px; gap: 10px; }
.card__title { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.25; }
.card__fit { font-size: 10px; letter-spacing: 0.16em; }
.card__price { font-size: clamp(15px, 1.2vw, 17px); }

/* Trim spacing in PDP rating/price row */
.buy__price { padding: 16px 0; }
.buy__price strong { font-size: clamp(32px, 4vw, 48px); }
.buy__rating { gap: 10px; flex-wrap: wrap; }
.buy__rating .stars { font-size: 14px; }
.buy__rating span { font-size: 12px; }

/* Optional: Tighter PDP gallery thumb size */
@media (min-width: 1100px) {
  .pdp { grid-template-columns: 1.3fr 1fr; gap: 48px; }
}
@media (max-width: 540px) {
  .pdp { gap: 28px; padding-top: 28px; padding-bottom: 60px; }
  .gallery__thumbs { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .specs__inner { gap: 32px; }
  .specs__title { font-size: clamp(28px, 7vw, 40px); }
}

/* Eyebrows tighter on mobile */
@media (max-width: 540px) {
  .eyebrow { font-size: 10px; padding-bottom: 10px; }
  h2 { font-size: clamp(28px, 7vw, 40px) !important; }
}

/* Smoother nav-shrink */
.nav { transition: padding .25s var(--ease), background .2s var(--ease); }
.nav.is-scrolled { padding-top: 10px; padding-bottom: 10px; }

/* Press strip mobile */
@media (max-width: 540px) {
  .press__inner { gap: 16px; }
  .press__logo { font-size: 12px; }
  .press__label { font-size: 9px; }
}

/* Subscribe band tighter on mobile */
@media (max-width: 540px) {
  .subscribe-band { padding-top: 48px; padding-bottom: 48px; }
  .subscribe-band h2 { font-size: clamp(24px, 7vw, 32px); }
  .subscribe-band__perks { gap: 8px 14px; padding-top: 14px; margin-top: 4px; }
  .subscribe-band__perk { font-size: 9px; }
}

/* Popup mobile readability */
@media (max-width: 540px) {
  .popup__title { font-size: clamp(22px, 6vw, 32px); }
  .popup__body { font-size: 13px; }
  .popup__benefit { font-size: 13px; }
}

/* Buy chips tap targets */
.buy__chip { min-height: 44px; padding: 12px 16px; font-size: 13px; }

/* Bullets row breathing */
.buy__bullets { gap: 12px 18px; padding-top: 18px; margin-top: 4px; }
.buy__bullet { font-size: 13px; }

/* Better visual hierarchy in bundles "THIS PAGE" tag */
.bundle__item-name em { padding: 2px 6px; background: rgba(217,255,59,.12); }

/* Cleaner deal banner countdown alignment */
.deal-banner { padding: 12px 16px; gap: 18px; font-size: 13px; }
@media (max-width: 540px) {
  .deal-banner { padding: 10px 14px; gap: 10px; font-size: 11px; }
  .deal-banner__tag { font-size: 9px; padding: 3px 8px; }
  .deal-banner__timer { font-size: 11px; padding: 4px 8px; }
}

/* Fitment-hero spacing on mobile */
@media (max-width: 540px) {
  .fitment-hero { padding-top: 56px; padding-bottom: 28px; }
  .fitment-hero__copy h1 { font-size: clamp(36px, 10vw, 56px); }
  .fitment-hero__copy p { font-size: 14px; }
  .fitment-card { padding: 22px; }
  .fitment-card__row { grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; }
  .fitment-card__row select { padding: 12px 14px; font-size: 14px; }
  .fitment-card__hint { gap: 6px; }
  .fitment-card__chip { font-size: 9px; padding: 6px 8px; }
}

/* Nav brand a little smaller mobile so cart count doesn't crowd */
@media (max-width: 540px) {
  .nav { padding: 14px 14px; gap: 8px; }
  .nav__brand { font-size: 11px; }
  .nav__brand svg { width: 22px; height: 22px; }
  .nav__cta { gap: 2px; }
  .iconbtn { width: 36px; height: 36px; }
}

/* Marquee speed friendlier */
.marquee__track { animation-duration: 48s; }

/* Smoothing scroll on anchor jumps that the OS supports */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* No-JS friendly visibility for the hero (in case engage.js is blocked) */
.hero__content, .hero__actions, .hero__stats, .hero__title, .hero__sub {
  opacity: 1;
}
.hero__content { animation-play-state: running; }

/* Anti-flicker before chrome.js mounts */
body { background: var(--ink); }
[data-chrome] { min-height: 64px; display: block; }

/* Print fallback */
@media print {
  .nav, .footer, .marquee, .deal-banner, .chat-bubble, .chat-panel, .sticky-buy,
  .recovery, .popup, .popup-scrim, .subscribe-band, .lowstock { display: none !important; }
  body { background: white; color: black; }
  * { color: black !important; background: transparent !important; }
}