/* ProteinPrice v2 — clean, mobile-first design system.
   Single stylesheet. No !important. No layer fights.
   Base = mobile (390px). Media queries scale up. */

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
body { margin: 0; overflow-x: hidden; }
h1, h2, h3, h4, p { overflow-wrap: anywhere; word-wrap: break-word; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--g-300); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; scroll-behavior: auto; } }

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* Greens (brand) */
  --g-50:  #F0FDF4;
  --g-100: #DCFCE7;
  --g-200: #BBF7D0;
  --g-300: #86EFAC;
  --g-500: #22C55E;
  --g-600: #16A34A;
  --g-700: #15803D;
  --g-900: #14532D;

  /* Neutrals */
  --n-0:   #FFFFFF;
  --n-50:  #FAFAF9;
  --n-100: #F5F5F4;
  --n-200: #E7E5E4;
  --n-300: #D6D3D1;
  --n-400: #A8A29E;
  --n-500: #78716C;
  --n-700: #44403C;
  --n-900: #1C1917;

  /* Gold (for #1 / winner) */
  --gold:        #B45309;
  --gold-bg:     #FFFBEB;
  --gold-border: #FDE68A;

  /* Type */
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;

  /* Space (8-pt scale) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-full: 9999px;

  /* Shadows (used sparingly) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.06), 0 24px 48px rgba(0,0,0,0.10);

  /* Layout */
  --wrap: 1180px;
  --pad-x: 20px;
}
@media (min-width: 640px) { :root { --pad-x: 28px; } }
@media (min-width: 1024px) { :root { --pad-x: 40px; } }

/* ── Typography base ───────────────────────────────────────────────────── */
html { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--n-900); background: var(--n-0); }
body { font-size: var(--fs-md); line-height: 1.55; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; margin: 0; color: var(--n-900); }
h1 { font-size: var(--fs-3xl); letter-spacing: -0.025em; }
@media (min-width: 768px) { h1 { font-size: var(--fs-4xl); } }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p  { margin: 0; }

/* ── Layout primitives ─────────────────────────────────────────────────── */
.container { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.section { padding-top: var(--s-7); padding-bottom: var(--s-7); }
@media (min-width: 768px) { .section { padding-top: var(--s-8); padding-bottom: var(--s-8); } }
.section-tight { padding-top: var(--s-5); padding-bottom: var(--s-5); }
.section-alt { background: var(--n-50); }

.skip-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; padding: 0; margin: -1px; border: 0; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link:focus, .skip-link:focus-visible { position: fixed; left: var(--s-4); top: var(--s-4); width: auto; height: auto; padding: var(--s-2) var(--s-4); margin: 0; clip: auto; overflow: visible; background: var(--g-700); color: var(--n-0); border-radius: var(--r-sm); z-index: 9999; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

/* ── Header / nav ──────────────────────────────────────────────────────── */
.pp-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--n-200); }
.pp-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-3); padding-bottom: var(--s-3); }
.pp-logo { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 800; font-size: var(--fs-lg); letter-spacing: -0.02em; }
.pp-logo-mark { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--g-600); display: inline-grid; place-items: center; color: var(--n-0); font-size: 14px; }
.pp-logo-text { color: var(--n-900); }
.pp-logo-text em { font-style: normal; color: var(--g-600); }
.pp-nav-links { display: none; gap: var(--s-5); }
@media (min-width: 900px) { .pp-nav-links { display: flex; } }
.pp-nav-links a { color: var(--n-700); font-weight: 600; font-size: var(--fs-sm); padding: var(--s-2) 0; border-bottom: 2px solid transparent; transition: border-color 0.15s, color 0.15s; }
.pp-nav-links a:hover { color: var(--g-700); border-bottom-color: var(--g-600); }
.pp-nav-search { position: relative; flex: 1; max-width: 280px; }
.pp-nav-search input { width: 100%; padding: 10px 14px 10px 38px; border: 1px solid var(--n-200); border-radius: var(--r-full); background: var(--n-50); font-size: var(--fs-sm); transition: border-color 0.15s, background 0.15s; }
.pp-nav-search input:focus { background: var(--n-0); border-color: var(--g-300); outline: none; }
.pp-nav-search::before { content: ''; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2378716C'%3E%3Cpath d='M7 1a6 6 0 014.66 9.76l3.79 3.79-1.42 1.41-3.78-3.78A6 6 0 117 1zm0 2a4 4 0 100 8 4 4 0 000-8z'/%3E%3C/svg%3E") no-repeat center / contain; pointer-events: none; }

/* ── Ticker (live updated chip) ─────────────────────────────────────────── */
.pp-ticker { background: var(--g-50); border-bottom: 1px solid var(--g-100); }
.pp-ticker-inner { display: flex; align-items: center; gap: var(--s-3); padding: 8px var(--pad-x); font-size: var(--fs-xs); color: var(--g-900); font-weight: 600; max-width: var(--wrap); margin: 0 auto; }
.pp-ticker .pulse { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--g-600); box-shadow: 0 0 0 0 var(--g-300); animation: pp-pulse 2s infinite; flex: 0 0 auto; }
@keyframes pp-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 14px 24px; font-weight: 700; font-size: var(--fs-md); border-radius: var(--r-full); min-height: 48px; transition: background 0.15s, transform 0.05s, box-shadow 0.15s; }
.pp-btn:active { transform: translateY(1px); }
.pp-btn-primary { background: var(--g-600); color: var(--n-0); box-shadow: 0 1px 2px rgba(22,163,74,0.20), 0 4px 12px rgba(22,163,74,0.18); }
.pp-btn-primary:hover { background: var(--g-700); }
.pp-btn-ghost { background: var(--n-0); color: var(--n-900); border: 1.5px solid var(--n-200); }
.pp-btn-ghost:hover { background: var(--n-50); border-color: var(--n-300); }
.pp-btn-block { width: 100%; }
.pp-btn-sm { padding: 8px 14px; font-size: var(--fs-sm); min-height: 44px; }

/* ── Tags / chips ──────────────────────────────────────────────────────── */
.pp-tag { display: inline-flex; align-items: center; gap: var(--s-2); padding: 4px 10px; font-size: var(--fs-xs); font-weight: 700; border-radius: var(--r-full); background: var(--n-100); color: var(--n-700); line-height: 1.4; }
.pp-tag-green { background: var(--g-50); color: var(--g-900); }
.pp-tag-gold  { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-border); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.pp-hero { padding-top: var(--s-7); padding-bottom: var(--s-6); }
@media (min-width: 768px) { .pp-hero { padding-top: var(--s-8); padding-bottom: var(--s-8); } }
.pp-hero-grid { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .pp-hero-grid { grid-template-columns: 1.05fr 1fr; align-items: center; gap: var(--s-8); } }
.pp-hero-eyebrow { font-size: var(--fs-xs); font-weight: 700; color: var(--g-700); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-2); }
.pp-hero h1 { font-size: clamp(32px, 6vw, 56px); line-height: 1.05; }
.pp-hero h1 em { font-style: normal; color: var(--g-700); }
.pp-hero p.lede { font-size: var(--fs-lg); color: var(--n-700); max-width: 50ch; margin-top: var(--s-4); }
.pp-hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.pp-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--n-200); }
.pp-hero-stat { }
.pp-hero-stat-num { display: block; font-size: var(--fs-2xl); font-weight: 800; color: var(--n-900); letter-spacing: -0.02em; line-height: 1; }
.pp-hero-stat-lbl { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--n-500); font-weight: 600; letter-spacing: 0.02em; }

.pp-hero-card { background: var(--n-50); border-radius: var(--r-xl); padding: var(--s-6); position: relative; overflow: hidden; }
.pp-hero-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0%, rgba(34,197,94,0.10), transparent 50%); pointer-events: none; }
.pp-hero-tub { display: block; margin: 0 auto; width: clamp(200px, 60%, 320px); aspect-ratio: 1 / 1.05; position: relative; }
.pp-hero-tub > svg { width: 100% !important; height: 100% !important; filter: drop-shadow(0 14px 28px rgba(0,0,0,0.18)); }
.pp-hero-card-caption { text-align: center; margin-top: var(--s-5); position: relative; }
.pp-hero-card-caption .brand { font-size: var(--fs-xs); font-weight: 700; color: var(--n-500); letter-spacing: 0.08em; text-transform: uppercase; }
.pp-hero-card-caption .name  { font-size: var(--fs-lg); font-weight: 800; margin-top: 4px; }
.pp-hero-card-caption .price { font-size: var(--fs-2xl); color: var(--g-700); font-weight: 800; margin-top: var(--s-3); }
.pp-hero-card-caption .price-unverified { font-size: var(--fs-md); color: var(--n-500); font-weight: 600; margin-top: var(--s-3); }

/* ── Product card grid ─────────────────────────────────────────────────── */
.pp-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 540px) { .pp-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
@media (min-width: 900px) { .pp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .pp-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Product card ──────────────────────────────────────────────────────── */
.pp-card { display: flex; flex-direction: column; background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg); overflow: hidden; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; position: relative; }
.pp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--n-300); }
.pp-card-img { position: relative; aspect-ratio: 1 / 1; background: var(--n-50); display: grid; place-items: center; padding: var(--s-4); }
.pp-card-img > svg { width: 80% !important; height: 80% !important; max-width: 240px; }
.pp-card-img-photo { width: 88%; height: 88%; object-fit: contain; padding: 0; background: transparent; }
/* Subtle "Brand artwork" overlay shown only when the image area renders an SVG
   fallback (no real photo). The generator emits this caption alongside the
   placeholder; CSS hides it once a real <img> displaces the placeholder. */
.pp-card-img-caption { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--n-400); font-weight: 700; pointer-events: none; }
.pp-card-img:has(img.pp-card-img-photo) .pp-card-img-caption { display: none; }
.pp-card-badge { position: absolute; top: 12px; left: 12px; background: var(--gold-bg); border: 1px solid var(--gold-border); color: var(--gold); font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--r-full); letter-spacing: 0.02em; text-transform: uppercase; }
/* Value Score badge — server-side tier color so it pops on initial paint
   (anim-v2.js's animated donut also runs and replaces this; meanwhile the
   user sees a colored chip with the right tier from the first frame). */
.pp-card-vs { position: absolute; top: 10px; right: 10px; background: var(--n-0); color: var(--n-900); min-width: 58px; padding: 6px 10px 7px; border-radius: var(--r-full); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06); line-height: 1; border: 2px solid var(--g-200); }
.pp-card-vs small { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: var(--g-700); text-transform: uppercase; margin-bottom: 3px; }
.pp-card-vs[data-tier="gold"] { border-color: var(--gold-border); background: var(--gold-bg); color: var(--gold); }
.pp-card-vs[data-tier="gold"] small { color: var(--gold); }
.pp-card-vs[data-tier="green"] { border-color: var(--g-300); }
.pp-card-vs[data-tier="gray"]  { border-color: var(--n-200); color: var(--n-500); }
.pp-card-vs[data-tier="gray"] small { color: var(--n-400); }
.pp-card-body { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; flex: 1; gap: var(--s-2); }
.pp-card-brand { font-size: var(--fs-xs); font-weight: 700; color: var(--n-500); letter-spacing: 0.06em; text-transform: uppercase; }
.pp-card-name { font-size: var(--fs-md); font-weight: 700; color: var(--n-900); line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-card-meta { font-size: var(--fs-xs); color: var(--n-500); margin-top: 2px; }
.pp-card-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--n-100); flex-wrap: nowrap; }
.pp-card-price { font-size: var(--fs-xl); font-weight: 800; color: var(--n-900); letter-spacing: -0.02em; }
.pp-card-price small { display: block; font-size: 11px; font-weight: 600; color: var(--n-500); letter-spacing: 0.02em; margin-top: 2px; }
.pp-card-price-unverified { font-size: var(--fs-sm); color: var(--n-500); font-weight: 600; }
.pp-card-ppd { font-size: var(--fs-xs); color: var(--g-700); font-weight: 700; background: var(--g-50); padding: 4px 8px; border-radius: var(--r-sm); white-space: nowrap; flex-shrink: 0; }
.pp-card-cta { margin: 0 var(--s-5) var(--s-5); display: flex; align-items: center; justify-content: center; padding: 12px; border-radius: var(--r-full); background: var(--n-100); color: var(--n-900); font-size: var(--fs-sm); font-weight: 700; transition: background 0.15s, color 0.15s; min-height: 44px; }
.pp-card:hover .pp-card-cta { background: var(--g-600); color: var(--n-0); }

/* ── Section heading ───────────────────────────────────────────────────── */
.pp-section-head { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: baseline; justify-content: space-between; margin-bottom: var(--s-5); }
.pp-section-head h2 { margin: 0; }
.pp-section-head .sub { color: var(--n-500); font-size: var(--fs-sm); margin-top: 4px; }
.pp-section-head a.more { font-weight: 700; font-size: var(--fs-sm); color: var(--g-700); padding: 6px 14px; border-radius: var(--r-full); border: 1px solid var(--g-200); transition: background 0.15s; }
.pp-section-head a.more:hover { background: var(--g-50); }

/* ── Category tiles ────────────────────────────────────────────────────── */
.pp-cat-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .pp-cat-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
@media (min-width: 1100px) { .pp-cat-grid { grid-template-columns: repeat(5, 1fr); } }
.pp-cat-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: var(--s-5); background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg); min-height: 170px; transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; gap: var(--s-3); position: relative; overflow: hidden; }
.pp-cat-tile::after { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 80px; background: var(--cat-accent, var(--g-50)); border-radius: 0 0 0 100%; opacity: 0.4; transition: opacity 0.18s; }
.pp-cat-tile:hover { transform: translateY(-3px); border-color: var(--g-300); box-shadow: var(--shadow-md); }
.pp-cat-tile:hover::after { opacity: 0.7; }
.pp-cat-tile-icon { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--cat-accent, var(--g-100)); display: grid; place-items: center; font-size: 22px; position: relative; z-index: 1; }
.pp-cat-tile-name { font-weight: 800; font-size: var(--fs-md); color: var(--n-900); position: relative; z-index: 1; letter-spacing: -0.01em; }
.pp-cat-tile-count { font-size: var(--fs-xs); color: var(--n-500); margin-top: 4px; font-weight: 600; position: relative; z-index: 1; }
.pp-cat-tile-arrow { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--n-100); display: grid; place-items: center; font-weight: 800; color: var(--n-700); transition: background 0.15s, color 0.15s, transform 0.15s; position: relative; z-index: 1; }
.pp-cat-tile:hover .pp-cat-tile-arrow { background: var(--g-600); color: var(--n-0); transform: translateX(2px); }

/* ── Retailer strip ────────────────────────────────────────────────────── */
.pp-retailer-strip { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; justify-content: center; padding: var(--s-5) 0; border-top: 1px solid var(--n-200); border-bottom: 1px solid var(--n-200); }
.pp-retailer-strip-label { width: 100%; text-align: center; font-size: var(--fs-xs); color: var(--n-500); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--s-2); }
.pp-retailer-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 12px; background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; color: var(--n-700); transition: border-color 0.15s, transform 0.15s; }
.pp-retailer-chip:hover { transform: translateY(-1px); border-color: var(--g-300); }
.pp-retailer-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rt-color, var(--n-400)); flex-shrink: 0; box-shadow: 0 0 0 2px rgba(0,0,0,0.04); }

/* ── How it works ──────────────────────────────────────────────────────── */
.pp-how { display: grid; gap: var(--s-5); }
@media (min-width: 768px) { .pp-how { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.pp-how-step { display: flex; flex-direction: column; gap: var(--s-3); }
.pp-how-num { width: 40px; height: 40px; border-radius: var(--r-full); background: var(--g-100); color: var(--g-700); display: grid; place-items: center; font-weight: 800; font-size: var(--fs-md); }
.pp-how-step h3 { font-size: var(--fs-lg); }
.pp-how-step p { color: var(--n-500); font-size: var(--fs-sm); }

/* ── Trust price table (per-retailer) ──────────────────────────────────── */
.pp-trust { border: 1px solid var(--n-200); border-radius: var(--r-lg); overflow: hidden; background: var(--n-0); }
.pp-trust-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--n-100); transition: background 0.15s; }
.pp-trust-row:last-child { border-bottom: 0; }
.pp-trust-row:hover { background: var(--n-50); }
.pp-trust-row.best { background: var(--g-50); border-left: 4px solid var(--g-600); }
.pp-trust-retailer { font-weight: 700; font-size: var(--fs-md); color: var(--n-900); display: flex; flex-direction: column; gap: 2px; }
.pp-trust-retailer small { font-size: var(--fs-xs); color: var(--n-500); font-weight: 500; }
.pp-trust-price { font-weight: 800; font-size: var(--fs-lg); color: var(--n-900); letter-spacing: -0.01em; text-align: right; }
.pp-trust-price.unverified { font-size: var(--fs-sm); color: var(--n-500); font-weight: 600; }
.pp-trust-cta { font-weight: 700; font-size: var(--fs-sm); padding: 8px 16px; background: var(--g-600); color: var(--n-0); border-radius: var(--r-full); min-height: 36px; display: inline-flex; align-items: center; }
.pp-trust-cta:hover { background: var(--g-700); }
.pp-trust-cta-ghost { background: var(--n-100); color: var(--n-700); }
.pp-trust-cta-ghost:hover { background: var(--n-200); }

/* ── Filter bar ────────────────────────────────────────────────────────── */
.pp-filter { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-4); background: var(--n-50); border-radius: var(--r-lg); margin-bottom: var(--s-5); align-items: center; }
.pp-filter select, .pp-filter input { padding: 10px 14px; border: 1px solid var(--n-200); border-radius: var(--r-full); background: var(--n-0); font-size: var(--fs-sm); font-weight: 600; color: var(--n-900); min-height: 44px; min-width: 140px; }
.pp-filter select:focus, .pp-filter input:focus { border-color: var(--g-500); outline: none; }
.pp-filter-count { margin-left: auto; font-size: var(--fs-sm); color: var(--n-500); font-weight: 600; }

/* ── Sparkline ─────────────────────────────────────────────────────────── */
.pp-spark { display: block; width: 100%; height: 60px; background: var(--n-50); border-radius: var(--r-sm); }
.pp-spark-card { padding: var(--s-4); background: var(--n-50); border-radius: var(--r-md); display: flex; flex-direction: column; gap: var(--s-2); }
.pp-spark-card-head { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--fs-xs); color: var(--n-500); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.pp-spark-card-num { font-size: var(--fs-2xl); font-weight: 800; color: var(--n-900); letter-spacing: -0.02em; }
.pp-spark-card-meta { font-size: var(--fs-xs); color: var(--n-500); font-weight: 600; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.pp-footer { background: var(--n-900); color: var(--n-300); padding: var(--s-7) 0 var(--s-5); margin-top: var(--s-8); }
.pp-footer-grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .pp-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-7); } }
.pp-footer h3 { color: var(--n-0); font-size: var(--fs-sm); margin-bottom: var(--s-3); letter-spacing: 0.04em; text-transform: uppercase; }
.pp-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.pp-footer li a { color: var(--n-300); font-size: var(--fs-sm); }
.pp-footer li a:hover { color: var(--n-0); }
.pp-footer-about p { color: var(--n-400); font-size: var(--fs-sm); margin-bottom: var(--s-3); }
.pp-footer-logo { color: var(--n-0); font-weight: 800; font-size: var(--fs-lg); margin-bottom: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-2); }
.pp-footer-logo em { font-style: normal; color: var(--g-500); }
.pp-footer-copy { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--n-700); font-size: var(--fs-xs); color: var(--n-500); text-align: center; }

/* ── Breadcrumb ────────────────────────────────────────────────────────── */
.pp-crumb { font-size: var(--fs-xs); color: var(--n-500); font-weight: 600; padding-top: var(--s-5); display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.pp-crumb a { color: var(--n-500); }
.pp-crumb a:hover { color: var(--g-700); }
.pp-crumb-sep { color: var(--n-300); }

/* ── Generic content prose (blog/answers/guides/etc.) ─────────────────── */
.pp-prose { max-width: 720px; margin-left: auto; margin-right: auto; font-size: 17px; line-height: 1.75; color: var(--n-700); }
@media (min-width: 768px) { .pp-prose { font-size: 18px; line-height: 1.7; } }
.pp-prose > h1, .pp-prose h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; margin-bottom: var(--s-3); color: var(--n-900); letter-spacing: -0.025em; }
.pp-prose h2 { font-size: clamp(22px, 3.5vw, 28px); margin-top: var(--s-7); margin-bottom: var(--s-3); color: var(--n-900); letter-spacing: -0.02em; padding-top: var(--s-3); }
.pp-prose h3 { font-size: var(--fs-xl); margin-top: var(--s-5); margin-bottom: var(--s-2); color: var(--n-900); }
.pp-prose p { margin-bottom: var(--s-4); }
.pp-prose p + p { margin-top: 0; }
.pp-prose strong { color: var(--n-900); font-weight: 700; }
.pp-prose ul, .pp-prose ol { margin: 0 0 var(--s-5) var(--s-5); padding: 0; }
.pp-prose li { margin-bottom: var(--s-2); padding-left: 4px; }
.pp-prose li::marker { color: var(--g-600); }
.pp-prose a { color: var(--g-700); text-decoration: underline; text-decoration-color: var(--g-300); text-underline-offset: 4px; text-decoration-thickness: 2px; transition: text-decoration-color 0.15s; }
.pp-prose a:hover { text-decoration-color: var(--g-700); }
.pp-prose blockquote { margin: var(--s-6) 0; padding: var(--s-4) var(--s-5); background: var(--g-50); border-left: 4px solid var(--g-600); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--g-900); font-style: italic; }
.pp-prose blockquote p:last-child { margin-bottom: 0; }
.pp-prose table { width: 100%; border-collapse: collapse; margin: var(--s-5) 0; font-size: var(--fs-sm); background: var(--n-0); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.pp-prose th, .pp-prose td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--n-100); }
.pp-prose th { background: var(--n-50); font-weight: 700; color: var(--n-900); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.pp-prose tr:last-child td { border-bottom: 0; }
.pp-prose img { border-radius: var(--r-md); margin: var(--s-5) 0; }
.pp-prose hr { border: 0; border-top: 1px solid var(--n-200); margin: var(--s-6) 0; }
.pp-prose code { background: var(--n-100); color: var(--n-900); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.92em; }
/* Heading anchor on hover (subtle) */
.pp-prose h2:first-of-type { margin-top: var(--s-4); }
/* Lede paragraph (first p after h1) */
.pp-prose > h1 + p, .pp-prose h1 + p { font-size: 1.1em; color: var(--n-500); line-height: 1.6; margin-bottom: var(--s-5); }

/* ── PDP-specific ──────────────────────────────────────────────────────── */
.pp-pdp-hero { display: grid; gap: var(--s-6); padding: var(--s-5) 0 var(--s-6); }
@media (min-width: 900px) { .pp-pdp-hero { grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: start; } }
.pp-pdp-img { background: var(--n-50); border-radius: var(--r-xl); padding: var(--s-6); aspect-ratio: 1 / 1; display: grid; place-items: center; position: relative; overflow: hidden; }
.pp-pdp-img::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.6), transparent 60%); pointer-events: none; }
.pp-pdp-img > svg { width: 80% !important; height: 80% !important; max-width: 360px; filter: drop-shadow(0 16px 32px rgba(0,0,0,0.20)); position: relative; }
.pp-pdp-img img { max-width: 90%; max-height: 90%; object-fit: contain; position: relative; }
.pp-pdp-title { font-size: clamp(28px, 5vw, 44px); line-height: 1.1; margin-bottom: var(--s-3); }
.pp-pdp-brand { font-size: var(--fs-sm); font-weight: 700; color: var(--g-700); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--s-2); }
.pp-pdp-flavor { color: var(--n-500); font-size: var(--fs-md); margin-bottom: var(--s-5); }
.pp-pdp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); padding: var(--s-4); background: var(--n-50); border-radius: var(--r-lg); margin-bottom: var(--s-5); }
.pp-pdp-stat { text-align: center; }
.pp-pdp-stat-num { font-size: var(--fs-2xl); font-weight: 800; color: var(--n-900); letter-spacing: -0.02em; line-height: 1; }
.pp-pdp-stat-lbl { font-size: var(--fs-xs); color: var(--n-500); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 6px; display: block; }

/* ── Content-page legacy classes (mapped to v2 for re-shelled blog/answers/etc.) ── */
.article-meta { color: var(--n-500); font-size: var(--fs-sm); margin: var(--s-2) 0 var(--s-5); font-weight: 600; }
.article-highlight { background: var(--g-50); border-left: 4px solid var(--g-600); padding: var(--s-4) var(--s-5); border-radius: var(--r-sm); margin: var(--s-5) 0; }
.article-highlight p { margin: 0; color: var(--g-900); }
.related-box { background: var(--n-50); border-radius: var(--r-lg); padding: var(--s-5); margin-top: var(--s-7); }
.related-box h3 { margin-top: 0; margin-bottom: var(--s-3); }
.related-box ul { margin: 0; padding-left: var(--s-5); }
.price-table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0; font-size: var(--fs-sm); }
.price-table th, .price-table td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--n-200); }
.price-table th { background: var(--n-50); font-weight: 700; color: var(--n-900); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.price-table tr:last-child td { border-bottom: 0; }
.breadcrumb { font-size: var(--fs-xs); color: var(--n-500); margin: var(--s-4) 0; }
.breadcrumb a { color: var(--n-500); }
.breadcrumb a:hover { color: var(--g-700); }
.breadcrumb span { margin: 0 var(--s-2); color: var(--n-300); }
.article-body { /* inherits .pp-prose typography */ }
.callout { background: var(--n-50); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin: var(--s-5) 0; border-left: 3px solid var(--g-600); }
.product-mention { display: inline-block; padding: 2px 8px; background: var(--g-50); color: var(--g-900); border-radius: var(--r-sm); font-weight: 600; font-size: 0.95em; }

/* ── Sticky mobile CTA (PDPs) ──────────────────────────────────────────── */
.pp-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; background: var(--n-0); border-top: 1px solid var(--n-200); padding: 10px var(--pad-x) calc(10px + env(safe-area-inset-bottom)); display: flex; gap: var(--s-3); align-items: center; box-shadow: 0 -8px 24px rgba(0,0,0,0.08); z-index: 40; transform: translateY(110%); transition: transform 0.2s ease-out; }
.pp-sticky-cta.show { transform: translateY(0); }
.pp-sticky-cta-info { flex: 1; min-width: 0; }
.pp-sticky-cta-price { font-size: var(--fs-lg); font-weight: 800; color: var(--n-900); letter-spacing: -0.01em; line-height: 1.1; }
.pp-sticky-cta-meta { font-size: var(--fs-xs); color: var(--n-500); font-weight: 600; margin-top: 2px; }
.pp-sticky-cta a { background: var(--g-600); color: var(--n-0); padding: 12px 18px; border-radius: var(--r-full); font-weight: 700; font-size: var(--fs-sm); min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.pp-sticky-cta a:hover { background: var(--g-700); }
@media (min-width: 900px) { .pp-sticky-cta { display: none; } }
/* leave room at bottom of page so content doesn't hide under sticky bar */
body.pp-has-sticky-cta { padding-bottom: 80px; }
@media (min-width: 900px) { body.pp-has-sticky-cta { padding-bottom: 0; } }

/* ── All-time-low badge ───────────────────────────────────────────────── */
.pp-atl-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-border); padding: 4px 10px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; margin-left: 8px; vertical-align: middle; }
.pp-atl-badge::before { content: '↓'; font-weight: 900; }

/* ── Retailer-count chip ──────────────────────────────────────────────── */
.pp-retailer-count { display: inline-flex; align-items: center; gap: 6px; background: var(--g-50); color: var(--g-900); padding: 4px 10px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; }

/* ── Utility (sparingly) ───────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   Visual pop layer (animations)
   Donut value-score badge, mini sparklines, scroll-reveal, count-up,
   hover glow. All animations gated by prefers-reduced-motion.
   ───────────────────────────────────────────────────────────────────────── */

/* Value Score donut (replaces static .pp-card-vs text+small) */
.pp-card-vs.pp-card-vs-donut { padding: 0; background: var(--n-0); border-color: transparent; box-shadow: var(--shadow-md); width: 48px; height: 48px; overflow: visible; }
.pp-card-vs-donut svg.pp-vs-donut { display: block; width: 100%; height: 100%; }
.pp-card-vs.pp-vs-tier-gold  { box-shadow: 0 2px 10px rgba(245,158,11,0.30), 0 0 0 1px rgba(245,158,11,0.25); animation: pp-vs-pulse 2.4s ease-in-out infinite; }
.pp-card-vs.pp-vs-tier-green { box-shadow: 0 2px 10px rgba(34,197,94,0.22), 0 0 0 1px rgba(34,197,94,0.20); }
.pp-card-vs.pp-vs-tier-gray  { box-shadow: var(--shadow-sm); opacity: 0.92; }
@keyframes pp-vs-pulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(245,158,11,0.30), 0 0 0 1px rgba(245,158,11,0.25); }
  50%      { box-shadow: 0 3px 16px rgba(245,158,11,0.45), 0 0 0 2px rgba(245,158,11,0.35); }
}

/* Mini sparkline */
.pp-spark-wrap { display: inline-flex; align-items: center; line-height: 0; margin-top: 4px; }
.pp-spark-wrap.pp-spark-empty { height: 20px; width: 60px; }
.pp-spark { display: block; overflow: visible; }

/* Scroll reveal (progressive enhancement: cards are visible by default;
   anim-v2.js adds .pp-anim-pre to mark elements for a fade-in slide, then
   removes it via IntersectionObserver when in view. If JS fails or the
   browser doesn't support IO, nothing gets .pp-anim-pre and content stays
   visible — never an "all white" page). */
@media (prefers-reduced-motion: no-preference) {
  .pp-anim-pre { opacity: 0.001; transform: translateY(16px); transition: opacity 400ms ease-out, transform 400ms ease-out, box-shadow 0.18s, border-color 0.18s; }
  .pp-card.pp-anim-pre.in-view, .pp-cat-tile.pp-anim-pre.in-view, .pp-section-head.pp-anim-pre.in-view, .pp-hero-card.pp-anim-pre.in-view { opacity: 1; transform: none; }
}

/* Card hover pop */
.pp-card { will-change: transform; }
.pp-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -10px rgba(15,23,42,0.18), 0 4px 10px -4px rgba(15,23,42,0.10); border-color: var(--g-300); }
.pp-card-img-photo { transition: transform 0.28s ease-out; }
.pp-card:hover .pp-card-img-photo { transform: scale(1.02); }

/* Primary button glow on hover */
.pp-btn-primary { transition: background 0.15s ease-out, box-shadow 0.2s ease-out, transform 0.15s ease-out; }
.pp-btn-primary:hover { box-shadow: 0 2px 4px rgba(22,163,74,0.25), 0 8px 24px rgba(22,163,74,0.30), 0 0 0 4px rgba(22,163,74,0.10); transform: translateY(-1px); }

/* Smoother hero gradient (additive radial layer; preserves base background) */
.pp-hero-card { background-image: radial-gradient(circle at 80% 0%, rgba(34,197,94,0.10), transparent 55%), radial-gradient(circle at 0% 100%, rgba(34,197,94,0.06), transparent 60%), linear-gradient(180deg, var(--n-50) 0%, var(--n-0) 100%); }
.pp-hero-card::before { background: none; }

/* Ticker activity flash */
.pp-ticker { transition: background 0.6s ease-out; }
.pp-ticker.pp-ticker-active { background: rgba(34,197,94,0.10); }
@media (prefers-reduced-motion: reduce) {
  .pp-ticker .pulse { animation: none; }
}