/* ============================================================
   ProteinPrice.com: Mobile Polish & Accessibility Layer
   ------------------------------------------------------------
   Loaded AFTER style.css so all rules cascade and override.
   Targets:
     - Sub-480px refinement (very small phones)
     - 480-768px (large phones / phablets)
     - 768-1024px (tablets / iPad)
     - prefers-reduced-motion
     - prefers-color-scheme: dark
     - High-contrast focus rings
     - Min tap-target sizes
     - Print styles
     - Performance (content-visibility, font-display)
   ============================================================ */


/* ── 0. PERFORMANCE & FONT LOADING ───────────────────────── */

/* Reinforce font-display:swap for any @font-face that gets injected
   late (the page already requests Inter with display=swap via Google
   Fonts, but if other faces are added later this catches them).      */
@font-face {
  font-family: 'Inter';
  font-display: swap;
}

/* Below-the-fold sections can skip layout/paint when off-screen.
   contain-intrinsic-size keeps scroll position stable while the
   browser skips rendering. We apply this only to clearly below-fold
   bands so the hero/nav are never deferred.                          */
.how-band,
.explainer-band,
.faq-band,
.trust-band,
.related-grid,
.related-wrap,
.site-footer,
.section + .section + .section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

/* Native lazy-loading attribute is set on <img> tags; this CSS hint
   keeps the painted box from collapsing before the image loads.      */
img[loading="lazy"] {
  background: var(--n100);
}


/* ── 1. ACCESSIBILITY: SKIP LINK ────────────────────────── */

/* Visually hidden until focused: keyboard users can jump past nav. */
.skip-to-main,
a.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 10px 16px;
  background: var(--g600);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-to-main:focus,
a.skip-link:focus {
  left: 0;
  outline: 3px solid #fff;
  outline-offset: -3px;
}


/* ── 2. ACCESSIBILITY: FOCUS-VISIBLE OUTLINES ───────────── */

/* Stronger focus ring than base style.css default. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--g600);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Fchip and pcard need the rounded outline to follow their shape. */
.fchip:focus-visible { outline-offset: 2px; border-radius: 20px; }
.pcard:focus-visible { outline-offset: 4px; border-radius: var(--radius-lg); }
.hcard:focus-visible { outline-offset: 3px; border-radius: var(--radius-lg); }


/* ── 3. MIN TAP TARGETS (44x44: WCAG 2.5.5) ─────────────── */

@media (max-width: 1024px) {
  .site-nav a,
  .footer-links a,
  .footer-nav a,
  .breadcrumb a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .pcard-btn,
  .btn-go,
  .btn-plain,
  .hero-search button,
  .fchip {
    min-height: 44px;
  }
  /* Filter chips on best-value still scroll horizontally but each
     chip is now an easier target for thumbs.                         */
  .fchip { padding-top: 10px; padding-bottom: 10px; }
}


/* ── 4. SECONDARY TEXT CONTRAST ──────────────────────────── */

/* On smaller screens promote --n400 readers to --n500 for
   AA contrast on white backgrounds.                                 */
@media (max-width: 768px) {
  .hcard-at,
  .pcard-price .at,
  .ptable-variant,
  .hstat-lbl,
  .ctile-sub,
  .footer-tagline,
  .breadcrumb,
  .upd-time {
    color: var(--n500);
  }
  .sd-lbl,
  .sduo-lbl,
  .vs-lbl {
    color: var(--n500);
  }
}


/* ── 5. TABLET / iPAD (768-1024px) ───────────────────────── */

@media (min-width: 768px) and (max-width: 1024px) {
  /* 2-column product grid is the comfortable thumb-zone width. */
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 18px; }

  /* Category tiles in a tidy 2-up grid. */
  .cgrid { grid-template-columns: repeat(2, 1fr); }

  /* Brands grid (page-local class): 3 columns is the iPad sweet spot. */
  .brands-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Best-value table density: tighter row padding, smaller img. */
  .rank-table td { padding: 11px 12px; }
  .rank-table thead th { padding: 10px 12px; }
  .rank-tub { width: 40px; height: 48px; }
  .rank-info .pname { font-size: 13.5px; }

  /* Hero stats spread more evenly on iPad portrait. */
  .hero-stats { gap: 36px; }

  /* Bigger CTA hit area on tablet. */
  .pcard-btn { padding: 13px; font-size: 14px; }
  .btn-go    { padding: 10px 18px; font-size: 14px; }
}


/* ── 6. 480-768px (LARGE PHONE / PHABLET) ────────────────── */

@media (min-width: 480px) and (max-width: 768px) {
  /* Hero cards become a horizontal scroll snap strip: frees vertical
     space and gives a discoverable scroll affordance.                */
  .hero-visual { display: block !important; }
  .hero-cards {
    grid-template-columns: none;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 12px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero-cards::-webkit-scrollbar { display: none; }
  .hero-cards .hcard {
    flex: 0 0 60%;
    min-width: 220px;
    scroll-snap-align: start;
  }

  /* Category tiles in two columns. */
  .cgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ctile { padding: 16px 14px; gap: 12px; }
  .ctile-icon { width: 40px; height: 40px; font-size: 18px; }

  /* Retailer strip becomes scrollable. */
  .retailer-strip-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .retailer-strip-inner::-webkit-scrollbar { display: none; }
  .strip-logos {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  .r-chip { flex-shrink: 0; }

  /* Footer stacks vertically with clear separation. */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    text-align: left;
  }
  .footer-links,
  .footer-nav { flex-wrap: wrap; gap: 14px 18px; }
}


/* ── 7. SUB-480px (SMALL PHONES) ─────────────────────────── */

@media (max-width: 480px) {
  /* Hero: tighter section padding, better-scaling text. */
  .hero {
    padding: 28px 16px 0;
    gap: 24px;
  }
  .hero h1 {
    font-size: clamp(26px, 9vw, 34px);
    letter-spacing: -1px;
    line-height: 1.14;
  }
  .hero-sub {
    font-size: 15px;
    margin-bottom: 22px;
  }
  .hero-search {
    margin-bottom: 22px;
    border-radius: 11px;
  }
  .hero-search input {
    padding: 13px 16px;
    font-size: 15px;
  }
  .hero-search button {
    padding: 0 18px;
    font-size: 13px;
  }
  .hero-label {
    font-size: 12px;
    padding: 4px 10px;
    margin-bottom: 16px;
  }

  /* Hero stats: 2x2 grid instead of 4-across squeeze. */
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
  }
  .hstat-val { font-size: 19px; }
  .hstat-lbl { font-size: 11px; }

  /* Section padding tighter. */
  .section { padding: 28px 16px; }
  .sec-head { margin-bottom: 16px; flex-wrap: wrap; gap: 6px; }
  .sec-head h2 { font-size: 19px; letter-spacing: -.4px; }
  .sec-head a  { font-size: 13px; }

  /* Product cards: full width, comfortable padding. */
  .pgrid { grid-template-columns: 1fr; gap: 14px; }
  .pcard-body { padding: 14px 16px 18px; }
  .pcard-img  { height: 170px; }
  .pcard-name { font-size: 15px; min-height: 0; margin-bottom: 12px; }
  .pcard-price .amount { font-size: 24px; }

  /* Category tiles: full row with bigger icon for touch. */
  .cgrid { grid-template-columns: 1fr; gap: 8px; }
  .ctile { padding: 16px; }

  /* Nav search: icon-only collapse. The input becomes very narrow
     and acts as an icon trigger; placeholder text drops out.         */
  .nav-search {
    padding: 8px 10px;
    min-width: 0;
    max-width: 44px;
    overflow: hidden;
    background: var(--n50);
    justify-content: center;
  }
  .nav-search input {
    width: 0;
    padding: 0;
  }
  .nav-search input::placeholder { color: transparent; }
  .nav-search:focus-within {
    max-width: none;
    width: 100%;
  }
  .nav-search:focus-within input {
    width: 100%;
    padding: 0 4px;
  }
  .nav-search:focus-within input::placeholder { color: var(--n400); }

  /* Re-stack nav-inner so logo and nav sit on one row, search becomes
     a small icon button on the right.                                */
  .nav-inner {
    flex-wrap: nowrap;
    height: 56px;
    padding: 0 12px;
    gap: 8px;
  }
  .site-nav {
    order: 0;
    flex: 1;
    min-width: 0;
  }
  .nav-search { order: 1; width: auto; flex-shrink: 0; }

  /* Logo: trim the gap and shrink the wordmark a hair. */
  .logo { margin-right: 4px; gap: 8px; }
  .logo-icon { width: 30px; height: 30px; border-radius: 8px; }
  .logo-text { font-size: 16px; }

  /* Ticker tighter: wrap allowed. */
  .ticker {
    padding: 7px 12px;
    font-size: 12px;
    line-height: 1.45;
  }
  .ticker .sep { margin: 0 5px; }

  /* Page hero: tighter padding. */
  .page-hero { padding: 28px 16px 22px; }
  .page-hero h1 { font-size: clamp(24px, 7vw, 32px); }
  .page-hero p  { font-size: 14px; }

  /* Footer stacks tight. */
  .site-footer { padding: 0 16px; }
  .footer-inner { padding: 28px 0 24px; gap: 14px; }
  .footer-links,
  .footer-nav { gap: 10px 16px; }
  .footer-copy { font-size: 11px; }

  /* Trophy banner on /best-value/: readable on small screens. */
  .trophy-band { padding: 28px 16px !important; }
  .trophy-band h1 { font-size: 24px !important; }
  .trophy-band p  { font-size: 14px !important; }
  .trophy-stats   { gap: 14px !important; padding: 12px 16px !important; }
  .trophy-stat .val { font-size: 18px !important; }
  .trophy-stat .lbl { font-size: 10px !important; }

  /* Explainer band tighter. */
  .explainer-band { padding: 28px 16px !important; margin-top: 24px !important; }
  .explainer-grid { gap: 12px !important; }
  .explainer-card { padding: 16px !important; }

  /* How-it-works steps tighter. */
  .how-band { padding: 32px 16px; }
  .how-inner h2 { font-size: 20px; margin-bottom: 22px; }
  .how-step { padding: 22px 18px; }

  /* Price-table head section becomes a vertical stack with the score
     donut centred: overrides the 600px rule from style.css for
     better balance at the smallest sizes.                            */
  .ptable-head-section {
    padding: 20px 18px;
    gap: 18px;
    text-align: center;
    align-items: center;
  }
  .ptable-meta { text-align: center; }
  .chips { justify-content: center; }
  .ptable-col-head,
  .ptable-row {
    padding-left: 16px;
    padding-right: 16px;
    grid-template-columns: 1.6fr 1fr 90px;
    font-size: 13px;
  }

  /* Brand cards full-width. */
  .brands-grid { grid-template-columns: 1fr !important; }
}


/* ── 8. STICKY FILTER BAR ON FILTER PAGES ────────────────── */

/* The /best-value/ page already declares .filter-bar with sticky
   top: 0: but on mobile the site-header is also sticky, so the
   filter must offset by header height. Header is 64px on desktop,
   56px on small mobile (see overrides above), and auto-height when
   it wraps at 480px. We use a small set of explicit offsets.        */
@media (max-width: 1024px) {
  .filter-bar {
    top: 64px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    backdrop-filter: saturate(180%) blur(6px);
    background: rgba(255,255,255,.94) !important;
  }
}
@media (max-width: 480px) {
  .filter-bar {
    top: 56px;
    padding: 0 12px !important;
  }
  .filter-inner { padding: 10px 0 !important; }
  .fchip {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
}


/* ── 9. HORIZONTAL-SCROLL & OVERFLOW MICRO-FIXES ─────────── */

/* Prevent body overflow on mobile: common cause: an element with
   a fixed width or negative margin escapes the viewport.            */
html, body {
  overflow-x: hidden;
}

/* Long product names should wrap, not push the card wider. */
.pcard-name,
.hcard-name,
.ptable-name,
.rank-info .pname {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Best-value rank table needs horizontal scroll on tiny screens -
   styles.css hides some columns but the remaining 4 can still be
   wider than the viewport.                                          */
@media (max-width: 600px) {
  .rank-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rank-table { min-width: 480px; }
}

/* Ticker can overflow on small screens: let it wrap. */
@media (max-width: 480px) {
  .ticker {
    white-space: normal;
  }
}


/* ── 10. PREFERS-REDUCED-MOTION ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .pulse { animation: none !important; opacity: 1; }
  .pgrid .pcard {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .pcard:hover,
  .hcard:hover,
  .ctile:hover { transform: none !important; }
}


/* ── 11. DARK MODE: DISABLED ──────────────────────────────
   We had a prefers-color-scheme dark override here but it
   made the site look generic/AI-ish. Light design only. */


/* ── 12. PRINT STYLES ────────────────────────────────────── */

@media print {
  /* Reset to black-on-white, no shadows or backgrounds. */
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
  }

  html, body { background: #fff !important; }

  /* Hide chrome that isn't useful on paper. */
  .ticker,
  .site-header,
  .nav-inner,
  .site-nav,
  .nav-search,
  .filter-bar,
  .site-footer,
  .hero-search,
  .pcard-btn,
  .btn-go,
  .btn-plain,
  .pcard:hover,
  .hero-visual,
  .trophy-stats { display: none !important; }

  /* Make sure the main content fills the page. */
  .hero,
  .section,
  .how-band,
  .explainer-band,
  .page-hero {
    max-width: none;
    padding: 12px 0;
    page-break-inside: avoid;
  }

  /* Show link URLs after anchor text so paper readers can find them. */
  a[href^="http"]::after,
  a[href^="/"]::after {
    content: " [" attr(href) "]";
    font-size: 0.85em;
    font-weight: 400;
    color: #555 !important;
  }
  /* Don't print URLs for in-page anchors. */
  a[href^="#"]::after,
  a[href^="javascript:"]::after { content: ""; }

  /* Headings: sensible page-break rules. */
  h1, h2, h3 { page-break-after: avoid; page-break-inside: avoid; }
  table, pre, blockquote { page-break-inside: avoid; }

  /* Avoid orphaned cards. */
  .pcard, .ctile, .how-step, .explainer-card, .brand-card {
    page-break-inside: avoid;
    border: 1px solid #ccc !important;
  }

  /* Tables: keep header on each page. */
  thead { display: table-header-group; }
  tr, td, th { page-break-inside: avoid; }
}


/* ── 13. SMALL FINAL POLISH ─────────────────────────────── */

/* Better tap-feedback on iOS (removes tap-highlight blue). */
a, button, [role="button"] {
  -webkit-tap-highlight-color: rgba(22,163,74,.18);
}

/* Stop iOS auto-zoom on input focus when font-size < 16px. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  textarea,
  select { font-size: 16px; }
}

/* Selection colour on brand. */
::selection {
  background: var(--g100);
  color: var(--g900);
}

/* ── EDITORIAL POLISH PASS ────────────────────────────────
   Goal: dial back the "AI-template" feel: softer pastels,
   firmer accents, tighter type, more confident buttons.
   All rules override style.css only (no base edits).
   No new colors, no dark mode, no new features.            */


/* 1. Confident accent: shift primary actions to the darker g700.
      The base --g600 (#16A34A) reads as "tutorial green"; g700
      (#15803D) is the same family but more grounded. We retarget
      the primary CTAs only: keeping --g600 for chips, text accents,
      hovers, and the score donut so the green system stays coherent. */
.hero-search button,
.btn-go,
.pcard.winner .pcard-btn,
.pcard-btn:hover {
  background: var(--g700);
}
.hero-search button:hover,
.btn-go:hover {
  background: var(--g800);
}

/* 2. Hero gradient: trim the rainbow. The base hero::before stacks
      two green radials; lighten/shrink them so the hero feels like
      paper with a wash rather than a marketing splash. */
.hero::before {
  background:
    radial-gradient(ellipse 55% 45% at 70% 30%, rgba(21,128,61,.04) 0%, transparent 65%);
}

/* 3. Ticker bar: soften the bright top strip. Lighter green, smaller
      type, less aggressive padding: reads as a utility bar, not a
      banner. */
.ticker {
  background: var(--g700);
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1px;
}

/* 4. Category tiles: more "premium directory" weight. Thicker bottom
      accent on hover (instead of the existing left accent only),
      denser hover shadow, and a slightly larger icon. */
.ctile {
  border-bottom-width: 1.5px;
  transition: border-color .18s, box-shadow .18s, transform .18s, border-bottom-color .18s;
}
.ctile:hover {
  border-bottom-color: var(--g700);
  box-shadow: 0 6px 22px rgba(17,24,39,.08), 0 2px 4px rgba(17,24,39,.05);
}
.ctile-icon {
  width: 52px;
  height: 52px;
  font-size: 24px;
}

/* 5. Product card winner: thicker confident green border + corner
      ribbon for the #1 Value badge. Replaces the floating pill look
      with an editorial corner ribbon (still using the existing
      .top-badge element so no HTML changes). */
.pcard.winner {
  border: 2px solid var(--g700);
  box-shadow: 0 0 0 1px rgba(21,128,61,.08), var(--shadow-sm);
}
.pcard.winner .top-badge {
  top: 0;
  left: 0;
  background: var(--g700);
  border-radius: 0 0 8px 0;
  padding: 5px 12px 5px 11px;
  font-size: 10.5px;
  letter-spacing: .3px;
  box-shadow: 0 2px 6px rgba(21,128,61,.25);
}

/* 6. Tub backgrounds: cardBg gradients are too pastel: add a subtle
      inset shadow for depth and a hairline body separator. */
.pcard-img {
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.6);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* 7. Typography: editorial letter-spacing on bold elements. */
.pcard-name {
  letter-spacing: -0.005em;
}
.hero h1 em {
  letter-spacing: -0.025em;
}

/* 8. Section headings: more authoritative: tighter tracking,
      slightly heavier weight. */
.sec-head h2 {
  font-weight: 900;
  letter-spacing: -.6px;
}

/* 9. "How It Works" band: calm down the green-tinted band. Cream
      paper background + hairline borders for an editorial frame. */
.how-band {
  background: #FBFBFB;
  border-top: 1px solid var(--n100);
  border-bottom: 1px solid var(--n100);
}

/* 10. Buttons: more grounded radius + active state for tactility.
       Keeps hover behaviour from rule 1 above. */
.btn-go,
.pcard-btn {
  border-radius: 6px;
}
.btn-go:active,
.pcard-btn:active,
.hero-search button:active {
  transform: translateY(1px);
}
.pcard-btn:hover {
  border-color: var(--g700);
  color: white;
}

/* 11. Whitespace: top-level desktop sections feel cramped. Add a
       breathing strip at the top so each block reads as a discrete
       section. Mobile keeps its own tighter padding from existing
       sub-768/480 rules. */
@media (min-width: 1024px) {
  .section {
    padding-top: 64px;
  }
  .section + .section {
    padding-top: 32px;
  }
}

/* End of EDITORIAL POLISH PASS */


/* ════════════════════════════════════════════════════════════
   MOBILE DARK-SLAB RESCUE PASS
   Owner reported the mobile view felt "black" / heavy.
   The offenders are full-width, tall, dark-gradient blocks
   (homepage blog cards, page heroes, trophy bands).
   These rules ONLY trigger on small screens: desktop is
   unchanged. We do not touch gradients themselves (design
   intent stays); we just shrink the surface area they cover.
   ════════════════════════════════════════════════════════════ */

/* ── BLOG CARD GRADIENTS: TAME ON MOBILE ──── */
@media (max-width: 768px) {
  /* Homepage "From the Blog" cards: 140px solid gradient blocks
     dominated the viewport. Halve them and soften slightly. */
  .section .pgrid > a > div:first-child[style*="gradient"] {
    height: 80px !important;
    opacity: 0.92;
    font-size: 36px !important;
  }
}

/* ── DARK HERO BANDS: REDUCE WEIGHT ON MOBILE ──── */
@media (max-width: 600px) {
  /* best-value: trophy band (dark green) */
  .trophy-band {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .trophy-band h1 {
    font-size: 24px !important;
    margin-bottom: 6px !important;
  }
  .trophy-band p {
    font-size: 14px !important;
    margin-bottom: 16px !important;
  }
  .trophy-stats {
    padding: 12px 16px !important;
    gap: 18px !important;
    font-size: 12px !important;
  }
  .trophy-stat .val {
    font-size: 18px !important;
  }

  /* deals: warm dark red/orange band */
  .deals-band {
    padding: 32px 18px !important;
  }
  .deals-band h1 {
    font-size: 24px !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.5px !important;
  }
  .deals-band p.sub {
    font-size: 14px !important;
    margin-bottom: 18px !important;
  }

  /* trending: orange gradient hero */
  .trend-hero {
    padding: 32px 18px !important;
  }
  .trend-hero h1 {
    font-size: 24px !important;
    margin-bottom: 8px !important;
  }
  .trend-hero p {
    font-size: 14px !important;
    margin-bottom: 16px !important;
  }
  .trend-stats {
    padding: 10px 14px !important;
    gap: 18px !important;
  }
  .trend-stat .val { font-size: 18px !important; }

  /* new-arrivals: dark emerald hero */
  .na-hero {
    padding: 32px 18px !important;
  }
  .na-hero h1 {
    font-size: 24px !important;
    margin-bottom: 8px !important;
  }
  .na-hero p {
    font-size: 14px !important;
    margin-bottom: 16px !important;
  }
  .na-stats {
    padding: 10px 14px !important;
    gap: 18px !important;
  }
  .na-stat .val { font-size: 18px !important; }

  /* sales pages (black-friday, cyber-monday): very dark sale bands */
  .sale-band {
    padding: 32px 18px !important;
  }
  .sale-band h1 {
    font-size: 24px !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.5px !important;
  }
  .sale-band p.sub {
    font-size: 14px !important;
    margin-bottom: 16px !important;
  }

  /* deals page: dark green final-cta-band at the bottom */
  .final-cta-band {
    padding: 32px 18px !important;
  }
  .final-cta-band h2 {
    font-size: 22px !important;
    margin-bottom: 6px !important;
  }
  .final-cta-band p {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }
}

/* ── PRODUCT CARD IMAGE: CONSISTENT ON MOBILE ──── */
@media (max-width: 600px) {
  .pcard-img {
    height: 160px;
    background-blend-mode: normal;
  }
  /* Ensure tub SVG never exceeds card image area on dark-tub brands */
  .pcard-img svg {
    max-width: 70%;
    max-height: 80%;
  }
}

/* ── BLOG INDEX FEAT-CARD HEROES: SHORTER ON MOBILE ──── */
@media (max-width: 600px) {
  /* The 3 big featured blog cards have 180px-tall gradient blocks.
     Two of them (f2 deep-blue, f3 dark-green) read heavy at full width. */
  .blog-art-card .header,
  .blog-card-head,
  .feat-card .feat-img {
    height: 90px !important;
    font-size: 40px !important;
  }
}

/* End of MOBILE DARK-SLAB RESCUE PASS */


/* ── PRICE FRESHNESS INDICATORS ───────────────────────────── */

.upd-time { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--n500); }
.upd-time .freshness-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--n300);
  flex-shrink: 0;
}
.upd-time.freshness-fresh .freshness-dot { background: #16A34A; box-shadow: 0 0 0 2px rgba(22,163,74,.15); }
.upd-time.freshness-ok    .freshness-dot { background: #65A30D; }
.upd-time.freshness-stale .freshness-dot { background: #D97706; }
.upd-time.freshness-very-stale .freshness-dot { background: #DC2626; }
.upd-time.freshness-fresh { color: var(--g700); font-weight: 600; }
.upd-time.freshness-very-stale { color: #DC2626; }

/* Pulse animation on fresh dot only: subtle */
.upd-time.freshness-fresh .freshness-dot {
  animation: freshnessPulse 2.2s ease-in-out infinite;
}
@keyframes freshnessPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(22,163,74,.15); }
  50%      { box-shadow: 0 0 0 4px rgba(22,163,74,.20); }
}
@media (prefers-reduced-motion: reduce) {
  .upd-time.freshness-fresh .freshness-dot { animation: none; }
}

/* ── PRICE CONFIDENCE BADGES (Verified / Estimated / Stale) ── */
/* See scrapers/PRICE_QUALITY_FRAMEWORK.md §5 for the scoring rules. */
.conf-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  cursor: help;
  white-space: nowrap;
}
.conf-badge .conf-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.conf-badge.conf-verified {
  background: #DCFCE7;
  color: #15803D;
}
.conf-badge.conf-verified .conf-dot {
  background: #16A34A;
  box-shadow: 0 0 0 2px rgba(22,163,74,.18);
}
.conf-badge.conf-estimated {
  background: #FEF3C7;
  color: #B45309;
}
.conf-badge.conf-estimated .conf-dot {
  background: #D97706;
}
.conf-badge.conf-stale {
  background: #E5E7EB;
  color: #6B7280;
}
.conf-badge.conf-stale .conf-dot {
  background: #9CA3AF;
}
.ptable-row .price-amt { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }

/* End of mobile-polish.css */

/* ── 3-CATEGORY GRID (Powders / Bars / Drinks) ──────────── */

@media (max-width: 900px) {
  .cat3grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

.cat3card:hover {
  border-color: var(--g600) !important;
  box-shadow: 0 4px 16px rgba(22,163,74,0.08);
  transform: translateY(-1px);
}

/* Remove .ctile-icon space when not used (homepage tiles now icon-less) */
.ctile:not(:has(.ctile-icon)) {
  /* fallback for browsers without :has: still works visually due to grid auto */
}


/* ════════════════════════════════════════════════════════════
   ROUND 3: MOBILE POLISH
   Targeted fixes from a deep mobile audit:
   - Tap-target sizes for filter chip Xs and close buttons
   - Body-text contrast on dark hero bands
   - Overflow guards on the Browse-by-Category cards
   - Form-input safety (16px font, full-width buttons)
   - Footer tap density, ticker chip overlap
   - Hero-stats balance for brand pages (5 stats)
   - Price-table freshness dots: make them visible on 600-900px range
   ════════════════════════════════════════════════════════════ */

/* ── R3-1. TAP TARGETS: filter-chip close X buttons ───────────
   .summary-chip .x (best-value) and .chip-active .x (search)
   are 16x16px: well under the 24px finger-zone minimum.
   We don't make the visible pill bigger, but we expand the
   chip's overall padding & make the .x easier to hit by
   bumping its size and ::after extends the click region. */
@media (max-width: 768px) {
  .summary-chip,
  .chip-active {
    padding: 7px 10px 7px 14px;
    font-size: 13px;
    min-height: 32px;
  }
  .summary-chip .x,
  .chip-active .x {
    width: 22px;
    height: 22px;
    font-size: 14px;
    margin-left: 2px;
  }
}

/* ── R3-2. TAP TARGETS: compare-tool .sel-clear ───────────────
   The little × that removes a selected product on /compare/
   is 18px with 4-6px padding: too tight for thumbs. */
@media (max-width: 768px) {
  .picker-selected .sel-clear {
    width: 36px;
    height: 36px;
    font-size: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
}

/* ── R3-3. TAP TARGETS: drawer-close buttons ─────────────────
   /best-value/ has a 32x32 close × on its filter drawer;
   /search/ has an unsized button. Standardise to 44x44. */
@media (max-width: 768px) {
  .drawer-close,
  .filter-sidebar .drawer-close button,
  #close-drawer {
    min-width: 44px;
    min-height: 44px;
  }
  /* Specifically the round close on best-value drawer */
  .filter-drawer .drawer-close {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
}

/* ── R3-4. TAP TARGETS: FAQ <summary> elements ───────────────
   Details/summary on /best-value/ FAQ and elsewhere: make
   the click area finger-friendly by adding line-height &
   guaranteed min-height. */
@media (max-width: 768px) {
  details > summary {
    min-height: 44px;
    padding: 6px 0;
    line-height: 1.4;
  }
}

/* ── R3-5. TAP TARGETS: blog sidebar category links ──────────
   The .cat-list a items on /blog/ are 10px padded: small. */
@media (max-width: 768px) {
  .cat-list a {
    padding: 12px 12px;
    font-size: 14px;
  }
  .cat-list .count {
    font-size: 12px;
    padding: 3px 8px;
  }
}

/* ── R3-6. TAP TARGETS: footer links: bigger hit zones ──────
   On sub-480 the gaps shrank to 10px/16px and font is 13px.
   We give each link generous vertical padding so adjacent
   links don't collide under a thumb. */
@media (max-width: 600px) {
  .footer-links a,
  .footer-nav a {
    padding: 8px 4px;
    font-size: 14px;
    display: inline-block;
  }
  .footer-links,
  .footer-nav {
    row-gap: 4px;
  }
}

/* ── R3-7. CONTRAST: trophy-stat labels on dark hero ─────────
   On the dark trophy/sale/deal bands the .lbl text is white
   at opacity .7: only ~11px tall on mobile. Lift opacity
   so it stays AA-readable in sunlight. */
@media (max-width: 600px) {
  .trophy-stat .lbl,
  .trend-stat .lbl,
  .na-stat .lbl,
  .deals-stat .lbl {
    opacity: 0.85;
    font-weight: 600;
  }
  /* Footer copy on the dark bg is #4B5563: too dark. */
  .footer-copy {
    color: #9CA3AF;
  }
}

/* ── R3-8. CONTRAST: undefined --n600 fallback ───────────────
   The homepage "Browse by Category" inline styles reference
   var(--n600) which isn't declared anywhere: browsers fall
   back to currentColor (black). Patch the fallback to a real
   mid-grey so text reads correctly on mobile. */
:root {
  --n600: #4B5563;
  --n800: #1F2937;
  --g500: #22C55E;
  --g300: #86EFAC;
}

/* ── R3-9. OVERFLOW: cat3card / Browse-by-Category cards ─────
   On phones the cat3card image is an aspect-ratio 16:9 block.
   At full mobile width that's a sizeable strip; the title
   below could push past the card if a category gets a long
   name later. Lock content to its card via overflow-wrap. */
@media (max-width: 600px) {
  .cat3card {
    border-radius: 12px;
  }
  .cat3card > div:last-child {
    padding: 16px 18px 18px !important;
  }
  .cat3card > div:last-child > div:first-child {
    /* the title */
    font-size: 19px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
  }
  .cat3card > div:last-child > div:nth-child(2) {
    /* the subtitle */
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }
}

/* ── R3-10. OVERFLOW: brand page hero-stats (5 cells) ────────
   The brand page (e.g. /brands/optimum-nutrition/) shows five
   hero-stats. The 2x2 grid from rule 7 above leaves the 5th
   stat alone in a row of two columns. Force a clean 2-up
   layout with the 5th centred for cosmetic balance. */
@media (max-width: 480px) {
  .page-hero .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
  }
  .page-hero .hero-stats > div:nth-child(5):last-child {
    grid-column: 1 / -1;
    text-align: center;
  }
}

/* ── R3-11. TEXT SIZE: ensure body & small labels stay ≥12px ─
   A few labels (sd-lbl, vs-lbl, hcard-brand) drop to 8-10px
   on mobile which is below WCAG minimum legibility. Bump
   them so they're readable without zoom. */
@media (max-width: 480px) {
  .sd-lbl,
  .vs-lbl {
    font-size: 9.5px;
  }
  .hcard-brand,
  .pcard-brand {
    font-size: 11.5px;
    letter-spacing: 0.4px;
  }
  .pcard-price .from,
  .rank-price .from {
    font-size: 11.5px;
  }
}

/* ── R3-12. PRICES: make value numbers prominent on mobile ───
   Best price and value score numbers should stay strong even
   when their containers shrink. */
@media (max-width: 600px) {
  .pcard-price .amount {
    font-size: 26px;
    letter-spacing: -1px;
  }
  .price-amt {
    font-size: 17px;
  }
  .rank-score {
    font-size: 18px;
  }
}

/* ── R3-13. FORMS: prevent iOS zoom on numeric/range inputs ──
   Rule 13 in this file already covers text/search/email but
   not type="number" (calculator weight input). Add it. */
@media (max-width: 768px) {
  input[type="number"],
  input[type="tel"],
  input[type="url"] {
    font-size: 16px;
  }
}

/* ── R3-14. FORMS: calculator weight-row stacks cleanly ──────
   At very small widths the weight number input + unit-toggle
   share a row but the toggle's lb/kg buttons are tiny pills.
   Give them comfortable tap height. */
@media (max-width: 480px) {
  .weight-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  .weight-row input[type="number"] {
    flex: 1 1 100%;
    min-height: 48px;
  }
  .unit-toggle {
    flex: 1 1 100%;
  }
  .unit-toggle button {
    flex: 1;
    padding: 11px 14px;
    min-height: 44px;
  }
}

/* ── R3-15. FORMS: pill-row radio labels ─────────────────────
   .pill-row label.pill is 8px padding which lands a 32px tap
   target; bump to 44px for mobile. Used on calculator. */
@media (max-width: 768px) {
  .pill-row label.pill {
    padding: 11px 16px;
    font-size: 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── R3-16. STICKY HEADER: prevent ticker squish on small ────
   The ticker can collide with the sticky filter bar offset
   on the smallest phones. Ensure ticker text doesn't get
   clipped under the header transition. */
@media (max-width: 380px) {
  .ticker {
    font-size: 11.5px;
    padding: 6px 10px;
  }
  .ticker .sep {
    margin: 0 4px;
  }
}

/* ── R3-17. PRICE-TABLE: keep freshness dots visible 600-900 ─
   style.css hides the third column (Updated) at <=900px which
   takes the freshness dot indicator with it. Re-enable the
   dots at 600-900 by reconfiguring the grid to a 3-col layout
   that fits a slimmer Updated column. */
@media (min-width: 600px) and (max-width: 900px) {
  .ptable-col-head,
  .ptable-row {
    grid-template-columns: 2fr 90px 88px 110px;
  }
  .ptable-col-head > *:nth-child(3),
  .ptable-row > *:nth-child(3) {
    display: flex !important;
  }
  .upd-time {
    font-size: 11.5px;
  }
}

/* ── R3-18. FRESHNESS DOTS: bigger on mobile (visibility) ────
   The freshness dot is 7px: almost invisible at arm's length
   on a phone. Bump to 9px on small screens and slightly
   stronger glow so users can spot fresh prices at a glance. */
@media (max-width: 600px) {
  .upd-time .freshness-dot {
    width: 9px;
    height: 9px;
  }
  .upd-time.freshness-fresh .freshness-dot {
    box-shadow: 0 0 0 3px rgba(22,163,74,.18);
  }
  .upd-time {
    font-size: 12px;
  }
}

/* ── R3-19. TICKER: avoid clipping behind sticky header ──────
   On small phones the ticker can briefly disappear into the
   header during scroll-stutter. Force its z-index above the
   sticky header so it always paints first. */
.ticker {
  position: relative;
  z-index: 101;
}

/* ── R3-20. HORIZONTAL OVERFLOW: long product names ──────────
   pcard-name min-height: 40px was intended for desktop two
   lines but on very small widths a 3-line name can blow out
   the card height irregularly. Drop the min-height on mobile
   and let cards size naturally. */
@media (max-width: 600px) {
  .pcard-name {
    min-height: 0;
    margin-bottom: 10px;
  }
}

/* ── R3-21. BLOG ARTICLE BODY: typography polish ─────────────
   On the blog article (e.g. best-value-whey-protein-powder-2025),
   .article-body padding is 48px 24px: on a 360px wide phone
   that leaves only ~312px content area; tighten and bump base
   text to 16px for comfortable reading. */
@media (max-width: 600px) {
  .article-body {
    padding: 28px 18px 56px;
  }
  .article-body h1 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .article-body h2 {
    font-size: 20px !important;
    margin-top: 28px !important;
  }
  .article-body h3 {
    font-size: 16.5px !important;
  }
  .article-body p,
  .article-body li {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
  /* Article CTA block on dark bg: tighten padding so it
     doesn't dominate the screen. */
  .article-cta {
    padding: 24px 18px !important;
    border-radius: 12px !important;
  }
  .article-cta h3 {
    font-size: 18px !important;
  }
  /* Article price-table sits flush: give it a horizontal
     scroll cushion so wider tables don't escape. */
  .price-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13.5px !important;
  }
}

/* ── R3-22. BLOG INDEX SIDEBAR: stop sticky on mobile ────────
   The .side-block is position:sticky;top:20px: on mobile it
   lives below the article grid (already converted to single
   column by the page's own media query). Make sure it never
   re-activates sticky if a CSS update lands. */
@media (max-width: 900px) {
  .blog-side .side-block {
    position: static !important;
  }
}

/* ── R3-23. PRODUCT PAGE: more-products grid spacing ─────────
   /products/<slug>/ has a "More Optimum Nutrition Products"
   pgrid below the price table. On mobile the H2 wraps tightly
   to the products; add breathing room. */
@media (max-width: 600px) {
  .section > div[style*="margin-top:48px"] {
    margin-top: 32px !important;
  }
  .section > div[style*="margin-top:48px"] > h2 {
    font-size: 18px;
    margin-bottom: 14px;
  }
}

/* ── R3-24. BRAND PAGE: "Where to buy" rcard grid ────────────
   The retailer grid uses auto-fill minmax(180px,1fr): on
   <=360px phones two cards still try to share a row, which
   makes them too narrow. Force single column at small widths. */
@media (max-width: 420px) {
  .brands-grid + div,
  div[style*="auto-fill,minmax(180px,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── R3-25. CMP-TABLE: comparison spec table breathing ───────
   /compare/ converts the spec table into stacked cards under
   600px. Add slight padding & font tweaks so each spec is
   easy to scan. */
@media (max-width: 600px) {
  .cmp-table td.val {
    font-size: 15px;
    padding: 14px 16px !important;
  }
  .cmp-table td.spec-lbl {
    font-size: 11.5px;
    padding: 10px 16px !important;
  }
}

/* ── R3-26. QUIZ OPTIONS: bigger tap zone on small phones ────
   .opt 14px font + 14-18px padding measures about 44px tall,
   which is the floor. Bump padding to 16px for breathing
   room: and ensure long opt-hint text wraps cleanly. */
@media (max-width: 600px) {
  .opt {
    padding: 16px 16px !important;
    gap: 10px;
  }
  .opt .opt-text {
    line-height: 1.35;
  }
  .opt .opt-hint {
    font-size: 12.5px;
  }
}

/* ── R3-27. SEARCH PAGE: input zoom-prevention guarantee ─────
   The search-bar-input on /search/ is already 16px (good),
   but if a future edit shrinks it below 16px the iOS zoom
   trap returns. Lock it explicitly. */
@media (max-width: 768px) {
  .search-bar-input {
    font-size: 16px !important;
  }
}

/* ── R3-28. FILTER SIDEBAR: bigger checkbox tap zone ─────────
   .filter-list label / .drawer-brand-list label have 3-7px
   vertical padding and 15px checkbox: a 24px tap target.
   Bump padding so a fingertip lands cleanly on the row. */
@media (max-width: 768px) {
  .filter-list label,
  .drawer-brand-list label {
    padding: 10px 8px !important;
    font-size: 14px;
    min-height: 40px;
  }
  .filter-list input[type="checkbox"],
  .drawer-brand-list input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ── R3-29. RESULT TOOLBAR: better stack on mobile ───────────
   /search/ .results-toolbar wraps but the sort dropdown can
   become full-width and look unbalanced next to the count.
   Give the count its own line and keep sort right-aligned. */
@media (max-width: 600px) {
  .results-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .sort-wrap {
    justify-content: space-between;
  }
  .sort-wrap select {
    flex: 1;
    min-height: 40px;
  }
}

/* ── R3-30. POP-CARD on /compare/: tappable feel ────────────
   The "Popular Comparisons" cards are visually fine but the
   default cursor: pointer is missing because they're <a>
   tags inheriting block display. Just ensure their internal
   text is comfortably sized on small phones. */
@media (max-width: 600px) {
  .pop-card {
    padding: 16px;
  }
  .pop-card .pop-title {
    font-size: 14.5px;
    line-height: 1.35;
  }
}

/* End of ROUND 3: MOBILE POLISH */

/* Homepage retailer card grid */
@media (max-width: 600px) {
  .retailer-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}