/* ProteinPrice v3 — Apple/Stripe/Robinhood + price tracker.
   Clean, fast, white, premium, minimal. Mobile-first. Single sheet.
   Loaded alongside v2.css during the transition; pages opt in by
   linking v3.css and using .pp3-* classes only. */

/* ── Reset (defensive, same primitives as v2) ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.pp3 { margin: 0; background: var(--pp3-bg); color: var(--pp3-ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html { overflow-x: hidden; }
body.pp3, body.pp3 * { box-sizing: border-box; }
body.pp3 h1, body.pp3 h2, body.pp3 h3, body.pp3 h4, body.pp3 p { margin: 0; }
body.pp3 a { color: inherit; text-decoration: none; }
body.pp3 button { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
body.pp3 img, body.pp3 svg, body.pp3 video { display: block; max-width: 100%; height: auto; }

body.pp3 input, body.pp3 select { font: inherit; }
body.pp3 :focus-visible { outline: 2px solid var(--pp3-green); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { body.pp3 *, body.pp3 *::before, body.pp3 *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces — pure white background per owner spec, no off-white border around hero. */
  --pp3-bg: #FFFFFF;
  --pp3-surface: #FFFFFF;
  --pp3-surface-2: #F5F5F4;

  /* Ink */
  --pp3-ink: #111111;
  --pp3-ink-soft: #44403C;
  --pp3-ink-mute: #78716C;
  --pp3-ink-faint: #A8A29E;

  /* Green (the accent) */
  --pp3-green-50:  #F0FDF4;
  --pp3-green-100: #DCFCE7;
  --pp3-green-200: #BBF7D0;
  --pp3-green-500: #22C55E;
  --pp3-green: #16A34A;
  --pp3-green-700: #15803D;
  --pp3-green-900: #14532D;

  /* Red (discount badge only) */
  --pp3-red: #DC2626;
  --pp3-red-bg: #FEE2E2;

  /* Category tints (very light) */
  --pp3-tint-powder: #F0FDF4;
  --pp3-tint-bars:   #FFF7ED;
  --pp3-tint-rtds:   #EFF6FF;

  /* Borders */
  --pp3-border: #E7E5E4;
  --pp3-border-soft: #F5F5F4;

  /* Shadows (very light only) */
  --pp3-shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
  --pp3-shadow:    0 1px 3px rgba(15,23,42,0.06), 0 4px 12px rgba(15,23,42,0.04);
  --pp3-shadow-lg: 0 4px 12px rgba(15,23,42,0.06), 0 12px 32px rgba(15,23,42,0.06);

  /* Radii */
  --pp3-r-sm:  8px;
  --pp3-r-md:  12px;
  --pp3-r-lg:  16px;
  --pp3-r-xl:  20px;
  --pp3-r-pill: 9999px;

  /* Aliases for older rule sites that used --pp3-line / --pp3-bg-soft /
   * --pp3-radius-* names. Without these, V2-override blocks (.pp-prose,
   * .pp-spark-wrap, etc.) lose their borders + tinted backgrounds on
   * reshelled pages. Keep both names so existing rule sites don't need to
   * be touched. */
  --pp3-line:        var(--pp3-border);
  --pp3-bg-soft:     var(--pp3-surface-2);
  --pp3-radius:      var(--pp3-r-md);
  --pp3-radius-sm:   var(--pp3-r-sm);
  --pp3-radius-md:   var(--pp3-r-md);
  --pp3-radius-lg:   var(--pp3-r-lg);

  /* Type scale */
  --pp3-fs-xs:  12px;
  --pp3-fs-sm:  13px;
  --pp3-fs-md:  15px;
  --pp3-fs-lg:  17px;
  --pp3-fs-xl:  20px;
  --pp3-fs-2xl: 24px;
  --pp3-fs-3xl: 32px;
  --pp3-fs-4xl: 40px;
  --pp3-fs-5xl: 56px;

  /* Space */
  --pp3-s-1: 4px;
  --pp3-s-2: 8px;
  --pp3-s-3: 12px;
  --pp3-s-4: 16px;
  --pp3-s-5: 20px;
  --pp3-s-6: 24px;
  --pp3-s-7: 32px;
  --pp3-s-8: 48px;
  --pp3-s-9: 64px;
  --pp3-s-10: 96px;

  /* Layout */
  --pp3-wrap: 1280px;
  --pp3-pad-x: 20px;

  /* Mobile tabbar height (used for safe-area padding on body) */
  --pp3-tabbar-h: 72px;
}
@media (min-width: 640px)  { :root { --pp3-pad-x: 28px; } }
@media (min-width: 1024px) { :root { --pp3-pad-x: 40px; --pp3-tabbar-h: 0px; } }

/* ── Typography ────────────────────────────────────────────────────────── */
.pp3-h1 { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--pp3-ink); }
.pp3-h2 { font-size: var(--pp3-fs-xl); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; color: var(--pp3-ink); }
.pp3-h3 { font-size: var(--pp3-fs-lg); font-weight: 700; line-height: 1.2; color: var(--pp3-ink); }
.pp3-lede { font-size: var(--pp3-fs-md); color: var(--pp3-ink-soft); line-height: 1.55; }
.pp3-meta { font-size: var(--pp3-fs-sm); color: var(--pp3-ink-mute); }
@media (min-width: 768px) {
  .pp3-h1 { font-size: var(--pp3-fs-3xl); }
  .pp3-h2 { font-size: var(--pp3-fs-2xl); }
  .pp3-lede { font-size: var(--pp3-fs-lg); }
}
@media (min-width: 1024px) {
  .pp3-h1 { font-size: var(--pp3-fs-4xl); }
}
@media (min-width: 1280px) {
  .pp3-h1 { font-size: var(--pp3-fs-5xl); }
}
.pp3-h1 em { font-style: normal; color: var(--pp3-green); }

/* ── Layout primitives ─────────────────────────────────────────────────── */
.pp3-container { max-width: var(--pp3-wrap); margin: 0 auto; padding-left: var(--pp3-pad-x); padding-right: var(--pp3-pad-x); }
.pp3-section { padding-top: var(--pp3-s-7); padding-bottom: var(--pp3-s-7); }
@media (min-width: 768px) { .pp3-section { padding-top: var(--pp3-s-8); padding-bottom: var(--pp3-s-8); } }
.pp3-section-tight { padding-top: var(--pp3-s-5); padding-bottom: var(--pp3-s-5); }

/* Body padding when mobile tabbar is showing */
body.pp3-has-tabbar { padding-bottom: var(--pp3-tabbar-h); }
@media (min-width: 1024px) { body.pp3-has-tabbar { padding-bottom: 0; } }

.pp3-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; }

/* ── Skip link (a11y) — kept off-screen ─────────────────────────────────── */
.pp3-skip { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pp3-skip:focus, .pp3-skip:focus-visible { position: fixed; left: var(--pp3-s-4); top: var(--pp3-s-4); width: auto; height: auto; padding: var(--pp3-s-3) var(--pp3-s-5); background: var(--pp3-green-700); color: var(--pp3-surface); border-radius: var(--pp3-r-md); z-index: 9999; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.pp3-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--pp3-s-2); padding: 12px 20px; font-weight: 700; font-size: var(--pp3-fs-md); border-radius: var(--pp3-r-pill); min-height: 44px; transition: background 0.15s ease, box-shadow 0.18s ease, transform 0.05s ease; white-space: nowrap; }
.pp3-btn:active { transform: translateY(1px); }
.pp3-btn-primary { background: var(--pp3-green); color: #FFFFFF; }
.pp3-btn-primary:hover { background: var(--pp3-green-700); }
.pp3-btn-ghost { background: var(--pp3-surface); color: var(--pp3-ink); border: 1px solid var(--pp3-border); }
.pp3-btn-ghost:hover { background: var(--pp3-surface-2); border-color: var(--pp3-ink-faint); }
.pp3-btn-block { width: 100%; }
.pp3-btn-lg { padding: 14px 24px; font-size: var(--pp3-fs-lg); min-height: 52px; }
.pp3-btn-sm { padding: 8px 14px; font-size: var(--pp3-fs-sm); min-height: 44px; }

/* ── Pills / chips ─────────────────────────────────────────────────────── */
.pp3-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--pp3-surface-2); color: var(--pp3-ink); font-size: var(--pp3-fs-sm); font-weight: 600; border-radius: var(--pp3-r-pill); border: 1px solid transparent; white-space: nowrap; transition: background 0.15s, border-color 0.15s; }
.pp3-pill:hover { background: var(--pp3-surface); border-color: var(--pp3-border); }
.pp3-pill-green { background: var(--pp3-green-50); color: var(--pp3-green-900); border-color: var(--pp3-green-100); }
.pp3-pill-green:hover { background: var(--pp3-green-100); border-color: var(--pp3-green-200); }
.pp3-savings-pill { display: inline-flex; align-items: center; padding: 4px 10px; background: var(--pp3-green-50); color: var(--pp3-green-700); font-size: var(--pp3-fs-sm); font-weight: 700; border-radius: var(--pp3-r-pill); }
.pp3-cheapest-chip { display: inline-flex; align-items: center; padding: 3px 8px; background: var(--pp3-green); color: #FFFFFF; font-size: 10px; font-weight: 800; border-radius: var(--pp3-r-pill); letter-spacing: 0.04em; text-transform: uppercase; }
.pp3-pct-off-badge { display: inline-flex; align-items: center; padding: 4px 9px; background: var(--pp3-red); color: #FFFFFF; font-size: var(--pp3-fs-xs); font-weight: 800; border-radius: 6px; letter-spacing: 0.01em; }
.pp3-cat-chip { display: inline-flex; align-items: center; padding: 6px 12px; background: var(--pp3-surface-2); color: var(--pp3-ink-soft); font-size: var(--pp3-fs-sm); font-weight: 600; border-radius: 6px; }

/* ── Freshness chips (5 states) ────────────────────────────────────────── */
.pp3-freshness { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pp3-fs-sm); font-weight: 600; }
.pp3-freshness::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--pp3-ink-faint); flex: 0 0 auto; }
.pp3-freshness-fresh { color: var(--pp3-green-700); }
.pp3-freshness-fresh::before { background: var(--pp3-green); box-shadow: 0 0 0 0 var(--pp3-green-200); animation: pp3-pulse 2.4s ease-out infinite; }
.pp3-freshness-today { color: var(--pp3-ink-soft); }
.pp3-freshness-today::before { background: var(--pp3-ink-soft); }
.pp3-freshness-stale { color: #B45309; }
.pp3-freshness-stale::before { background: #F59E0B; }
.pp3-freshness-old { color: #B91C1C; font-style: normal; font-weight: 600; }
.pp3-freshness-old::before { background: #DC2626; }
/* Trust gate: dash placeholder when price is hidden (>=72h or unverified) */
.pp3-retailer-price-hidden { color: var(--pp3-ink-faint); font-weight: 400; font-size: var(--pp3-fs-md); }
/* Image placeholder for products with empty img: field */
.pp3-img-placeholder { width: 100%; height: 100%; min-height: 110px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; background: linear-gradient(135deg, #FAFAF9 0%, #F5F5F4 100%); color: var(--pp3-ink-soft); padding: 12px; text-align: center; border-radius: var(--pp3-radius); }
.pp3-img-placeholder-name { font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--pp3-ink); }
.pp3-img-placeholder-caption { font-size: 10px; color: var(--pp3-ink-mute); letter-spacing: 0.04em; text-transform: uppercase; }
/* Load More button on category pages */
.pp3-load-more-wrap { display: flex; justify-content: center; padding: 32px 0 16px; }
.pp3-load-more { display: inline-flex; align-items: center; gap: 8px; }

/* "Where to buy" — 12 retailer chips on the homepage. Horizontal scroll on
   mobile so users can swipe through retailers; wraps to grid on desktop. */
.pp3-retailer-strip {
  display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto;
  padding-bottom: 8px;
  margin: 0 calc(var(--pp3-pad-x) * -1);
  padding-left: var(--pp3-pad-x); padding-right: var(--pp3-pad-x);
  scrollbar-width: none;
}
.pp3-retailer-strip::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .pp3-retailer-strip { flex-wrap: wrap; overflow: visible; padding: 0; margin: 0; }
}
.pp3-retailer-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--pp3-border);
  border-radius: var(--pp3-r-pill);
  background: var(--pp3-surface);
  color: var(--pp3-ink);
  font-size: var(--pp3-fs-sm); font-weight: 600;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
  text-decoration: none;
}
.pp3-retailer-chip:hover { border-color: var(--pp3-green-300); background: var(--pp3-surface-2); transform: translateY(-1px); }
.pp3-retailer-chip-mark {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--pp3-r-pill);
  background: var(--pp3-surface-2);
  font-size: 10px; font-weight: 800;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}

/* ──────────────────────────────────────────────────────────────────────
   V2-content overrides — reshelled legacy pages (blog/guides/answers/etc)
   keep loading v2.css for their inner-content layout (.pp-card, .pp-prose,
   .pp-grid, etc.) but the V3 chrome wraps them. These overrides defeat the
   most jarring V2-isms so the page reads coherently with V3 chrome.
   ────────────────────────────────────────────────────────────────────── */
/* Kill the AI-ish green-underline links inside .pp-prose */
.pp3 .pp-prose a {
  color: var(--pp3-ink) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--pp3-ink-faint);
  transition: border-color .15s, color .15s;
}
.pp3 .pp-prose a:hover {
  color: var(--pp3-green) !important;
  border-bottom-color: var(--pp3-green);
}
/* Kill the V2 ticker chip if any leaked through reshell */
.pp3 .pp-ticker { display: none !important; }
/* Match content container width to V3 chrome (1280px wrap) */
.pp3 .container,
.pp3 .pp-container {
  max-width: var(--pp3-wrap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
@media (min-width: 768px) {
  .pp3 .container, .pp3 .pp-container { padding-left: 32px !important; padding-right: 32px !important; }
}
/* Tone V2 card grids — keep their layout but use V3 surfaces/borders.
   Critical: equalize card heights so multi-card grids align perfectly.
   The body flexes to fill remaining height; brand/name reserve line counts;
   price/CTA pin to the bottom via margin-top:auto. */
.pp3 .pp-card {
  background: #fff !important;
  border: 1px solid var(--pp3-line) !important;
  border-radius: var(--pp3-radius-md) !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.pp3 .pp-card:hover {
  border-color: var(--pp3-green-300) !important;
  transform: translateY(-1px);
}
.pp3 .pp-card-img {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  height: 180px;
  background: var(--pp3-bg-soft) !important;
  padding: 16px !important;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
@media (min-width: 480px) { .pp3 .pp-card-img { height: 200px; } }
@media (min-width: 768px) { .pp3 .pp-card-img { height: 220px; } }
.pp3 .pp-card-img > img,
.pp3 .pp-card-img > svg {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}
.pp3 .pp-card-body {
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 1 auto;
  min-height: 0;
}
.pp3 .pp-card-brand {
  min-height: 1.4em !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pp3 .pp-card-name {
  min-height: 2.6em !important;
  line-height: 1.3 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pp3 .pp-card-meta { min-height: 1.3em !important; color: var(--pp3-ink-mute) !important; font-size: var(--pp3-fs-xs) !important; }
.pp3 .pp-card-row,
.pp3 .pp-card-price,
.pp3 .pp-card-price-unverified {
  margin-top: auto !important;
  padding-top: 6px !important;
  min-height: 1.6em !important;
  display: flex !important;
  align-items: center !important;
}
.pp3 .pp-card-cta {
  display: block !important;
  margin-top: 6px !important;
  padding: 10px 12px !important;
  text-align: center !important;
  font-size: var(--pp3-fs-sm) !important;
  font-weight: 700 !important;
  color: var(--pp3-green) !important;
  border-top: 1px solid var(--pp3-line) !important;
}
/* Force grid wrapper to align children to top so equal-height stretch works */
.pp3 .pp-grid {
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
}
@media (min-width: 480px)  { .pp3 .pp-grid { grid-template-columns: 1fr 1fr !important; } }
@media (min-width: 768px)  { .pp3 .pp-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1024px) { .pp3 .pp-grid { grid-template-columns: repeat(4, 1fr) !important; } }
/* V2 cat-grid (used on /guides/, /blog/) — switch to a clean V3-styled grid */
.pp3 .pp-cat-grid {
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
}
@media (min-width: 640px)  { .pp3 .pp-cat-grid { grid-template-columns: 1fr 1fr !important; } }
@media (min-width: 1024px) { .pp3 .pp-cat-grid { grid-template-columns: 1fr 1fr 1fr !important; } }
.pp3 .pp-cat-tile {
  background: #fff !important;
  border: 1px solid var(--pp3-line) !important;
  border-radius: var(--pp3-radius-md) !important;
  padding: 20px !important;
  text-decoration: none !important;
  color: var(--pp3-ink) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: border-color .15s, transform .15s;
}
.pp3 .pp-cat-tile:hover { border-color: var(--pp3-green-300) !important; transform: translateY(-1px); }
.pp3 .pp-cat-tile-name { font-weight: 700; font-size: var(--pp3-fs-md); }
.pp3 .pp-cat-tile-count { display: block; font-size: var(--pp3-fs-sm); color: var(--pp3-ink-mute); margin-top: 4px; }
.pp3 .pp-cat-tile-arrow { color: var(--pp3-ink-faint); }
/* Hero band — collapse V2 dark slabs into V3 clean white sections */
.pp3 .pp-hero {
  background: #fff !important;
  color: var(--pp3-ink) !important;
  border-bottom: 1px solid var(--pp3-line) !important;
  padding: 32px 0 24px !important;
}
.pp3 .pp-hero h1, .pp3 .pp-hero .pp-hero-title {
  color: var(--pp3-ink) !important;
  font-size: var(--pp3-fs-3xl) !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.pp3 .pp-hero-eyebrow {
  color: var(--pp3-green) !important;
  font-size: var(--pp3-fs-sm) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.pp3 .pp-section-head { padding: 0 0 16px !important; }
.pp3 .pp-section-head h2 { font-size: var(--pp3-fs-xl) !important; letter-spacing: -0.01em; }
/* Breadcrumb V2 → V3 */
.pp3 .pp-crumb {
  color: var(--pp3-ink-mute) !important;
  font-size: var(--pp3-fs-sm) !important;
  background: transparent !important;
  padding: 12px 0 !important;
}
.pp3 .pp-crumb a { color: var(--pp3-ink-mute) !important; border-bottom: none !important; }
.pp3 .pp-crumb a:hover { color: var(--pp3-green) !important; }
.pp3 .pp-crumb-sep { color: var(--pp3-ink-faint) !important; padding: 0 6px; }
/* Prose typography — readable on white */
.pp3 .pp-prose {
  color: var(--pp3-ink) !important;
  font-size: var(--pp3-fs-md) !important;
  line-height: 1.7 !important;
}
.pp3 .pp-prose h1, .pp3 .pp-prose h2, .pp3 .pp-prose h3 {
  color: var(--pp3-ink) !important;
  letter-spacing: -0.01em !important;
}
.pp3 .pp-prose h2 { font-size: var(--pp3-fs-xl) !important; margin-top: 32px !important; }
.pp3 .pp-prose h3 { font-size: var(--pp3-fs-lg) !important; margin-top: 24px !important; }
.pp3 .pp-prose p, .pp3 .pp-prose ul, .pp3 .pp-prose ol { margin: 12px 0 !important; }
.pp3 .pp-prose strong { font-weight: 700; }
.pp3 .pp-prose table { border: 1px solid var(--pp3-line) !important; border-radius: var(--pp3-radius-md); }
.pp3 .pp-prose th, .pp3 .pp-prose td { padding: 10px 12px !important; border-bottom: 1px solid var(--pp3-line) !important; }
/* Card detail elements — neutralize any V2 green-highlight backgrounds */
.pp3 .pp-card-brand { color: var(--pp3-ink-soft) !important; font-size: var(--pp3-fs-xs) !important; text-transform: uppercase; letter-spacing: 0.04em; }
.pp3 .pp-card-name { color: var(--pp3-ink) !important; font-weight: 700 !important; font-size: var(--pp3-fs-md) !important; }
.pp3 .pp-card-price { color: var(--pp3-green) !important; font-weight: 800 !important; }
.pp3 .pp-card-price-unverified { color: var(--pp3-ink-soft) !important; font-style: italic; }
.pp3 .pp-card-cta { color: var(--pp3-green) !important; border: none !important; }
.pp3 .pp-card-vs, .pp3 .pp-card-ppd, .pp3 .pp-card-meta { color: var(--pp3-ink-mute) !important; font-size: var(--pp3-fs-sm) !important; }
.pp3 .pp-card-badge { background: var(--pp3-green-50) !important; color: var(--pp3-green) !important; }
.pp3 .pp-spark-wrap { background: var(--pp3-bg-soft) !important; }
.pp3-freshness-none { color: var(--pp3-ink-mute); }
.pp3-freshness-none::before { background: var(--pp3-ink-faint); }
@keyframes pp3-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.45); } 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
@media (prefers-reduced-motion: reduce) { .pp3-freshness-fresh::before { animation: none; } }

/* ── Header ────────────────────────────────────────────────────────────── */
.pp3-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.96); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--pp3-border); }
.pp3-header-inner { display: flex; align-items: center; gap: var(--pp3-s-2); padding: 10px 0; }
@media (min-width: 1024px) { .pp3-header-inner { gap: var(--pp3-s-3); padding: 14px 0; } }
.pp3-hamburger { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--pp3-r-sm); transition: background 0.15s; flex: 0 0 auto; }
.pp3-hamburger:hover { background: var(--pp3-surface-2); }
.pp3-hamburger svg { width: 22px; height: 22px; }
@media (min-width: 1024px) { .pp3-hamburger { display: none; } }
/* Mobile logo: smaller so the row feels less cramped */
.pp3-logo { display: inline-block; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--pp3-ink); flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 768px) { .pp3-logo { font-size: var(--pp3-fs-xl); } }
.pp3-logo em { font-style: normal; color: var(--pp3-green); }
.pp3-header-search { flex: 1; min-width: 0; display: none; }
@media (min-width: 1024px) { .pp3-header-search { display: block; max-width: 540px; margin: 0 auto; } }
.pp3-header-nav { display: none; align-items: center; gap: var(--pp3-s-6); }
@media (min-width: 1024px) { .pp3-header-nav { display: inline-flex; } }
.pp3-header-nav a { font-size: var(--pp3-fs-md); font-weight: 600; color: var(--pp3-ink-soft); transition: color 0.15s; padding: 6px 0; border-bottom: 2px solid transparent; }
.pp3-header-nav a:hover { color: var(--pp3-ink); }
.pp3-header-nav a.is-active { color: var(--pp3-green-700); border-bottom-color: var(--pp3-green); }
.pp3-header-icons { display: inline-flex; align-items: center; gap: var(--pp3-s-2); margin-left: auto; flex: 0 0 auto; }
.pp3-icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--pp3-r-pill); background: transparent; transition: background 0.15s; }
.pp3-icon-btn:hover { background: var(--pp3-surface-2); }
.pp3-icon-btn svg { width: 20px; height: 20px; color: var(--pp3-ink); }

/* Search bar (header + hero) */
.pp3-search { display: flex; align-items: center; background: var(--pp3-surface); border: 1px solid var(--pp3-border); border-radius: var(--pp3-r-pill); transition: border-color 0.15s, box-shadow 0.15s; overflow: hidden; }
.pp3-search:focus-within { border-color: var(--pp3-green); box-shadow: 0 0 0 4px rgba(22,163,74,0.10); }
.pp3-search-icon { display: inline-grid; place-items: center; padding-left: 18px; color: var(--pp3-ink-mute); flex: 0 0 auto; }
.pp3-search-icon svg { width: 18px; height: 18px; }
.pp3-search input { flex: 1; min-width: 0; padding: 14px 16px; border: 0; background: transparent; font-size: var(--pp3-fs-md); color: var(--pp3-ink); }
.pp3-search input::placeholder { color: var(--pp3-ink-mute); }
.pp3-search input:focus { outline: none; }
.pp3-search-go { padding: 10px 22px; margin: 5px; background: var(--pp3-green); color: #FFFFFF; font-weight: 700; font-size: var(--pp3-fs-md); border-radius: var(--pp3-r-pill); transition: background 0.15s; flex: 0 0 auto; }
.pp3-search-go:hover { background: var(--pp3-green-700); }
.pp3-search-sm input { padding: 10px 14px; }
.pp3-search-sm .pp3-search-icon { padding-left: 14px; }
.pp3-search-sm .pp3-search-go { padding: 8px 16px; font-size: var(--pp3-fs-sm); }

/* ── Mobile bottom tab bar ─────────────────────────────────────────────── */
.pp3-tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: var(--pp3-tabbar-h); background: rgba(255,255,255,0.98); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-top: 1px solid var(--pp3-border); display: grid; grid-template-columns: repeat(5, 1fr); z-index: 45; padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 1024px) { .pp3-tabbar { display: none; } }
.pp3-tabbar-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--pp3-ink-mute); transition: color 0.15s; padding: 8px 4px; }
.pp3-tabbar-tab svg { width: 22px; height: 22px; }
.pp3-tabbar-tab span { font-size: 11px; font-weight: 600; letter-spacing: -0.01em; }
.pp3-tabbar-tab.is-active { color: var(--pp3-green); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.pp3-hero { padding-top: var(--pp3-s-4); padding-bottom: var(--pp3-s-5); }
@media (min-width: 768px) { .pp3-hero { padding-top: var(--pp3-s-8); padding-bottom: var(--pp3-s-7); } }

/* Hero grid: title + lede + image STACKED vertically on mobile (per owner).
   Side-by-side (text left, image right) only on desktop ≥1024px.
   minmax(0, …) is critical — without it, the grid column can grow
   beyond the available width if a child has content wider than its
   intrinsic min-content (e.g. a large H1). */
.pp3-hero-grid {
  display: grid;
  gap: var(--pp3-s-4);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "top" "stage" "bottom";
  align-items: center;
  width: 100%;
  min-width: 0;
}
@media (min-width: 1024px) {
  .pp3-hero-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
    grid-template-areas: "top stage" "bottom stage";
    gap: var(--pp3-s-7) var(--pp3-s-6);
    align-items: center;
  }
}
.pp3-hero-top, .pp3-hero-bottom, .pp3-hero-stage { min-width: 0; }
.pp3-h1 { overflow-wrap: break-word; word-wrap: break-word; }
.pp3-hero-top    { grid-area: top; display: flex; flex-direction: column; gap: var(--pp3-s-3); min-width: 0; }
.pp3-hero-bottom { grid-area: bottom; display: flex; flex-direction: column; gap: var(--pp3-s-3); }
.pp3-hero-stage  { grid-area: stage; min-width: 0; }
@media (min-width: 1024px) {
  .pp3-hero-top    { align-self: end; gap: var(--pp3-s-4); }
  .pp3-hero-bottom { align-self: start; gap: var(--pp3-s-4); }
}

.pp3-hero-lede { max-width: 44ch; font-size: 14px; }
@media (min-width: 768px) { .pp3-hero-lede { font-size: var(--pp3-fs-md); } }
@media (min-width: 1024px) { .pp3-hero-lede { font-size: var(--pp3-fs-lg); } }
.pp3-hero-search-wrap { max-width: 560px; }
.pp3-trending { display: flex; flex-direction: column; gap: var(--pp3-s-3); margin-top: var(--pp3-s-2); }
.pp3-trending-label { font-size: var(--pp3-fs-sm); font-weight: 700; color: var(--pp3-ink-soft); }
/* One line on all widths — overflow scrolls horizontally instead of wrapping. */
.pp3-trending-pills { display: flex; flex-wrap: nowrap; gap: var(--pp3-s-2); overflow-x: auto; padding-bottom: 4px; margin: 0 calc(var(--pp3-pad-x) * -1); padding-left: var(--pp3-pad-x); padding-right: var(--pp3-pad-x); scrollbar-width: none; }
.pp3-trending-pills::-webkit-scrollbar { display: none; }
.pp3-trending-pills > .pp3-pill { flex: 0 0 auto; }

/* Hero stage — owner-supplied composite image. Width 100% of column,
   never bleeds past (was causing horizontal page overflow). Drop-shadow
   removed per owner: clean white-on-white look. Mobile cap so the image
   doesn't dominate the fold; desktop stays full column width. */
.pp3-hero-stage { position: relative; display: grid; place-items: center; min-width: 0; }
.pp3-hero-composite { display: block; width: 100%; max-width: 320px; max-height: 240px; height: auto; object-fit: contain; margin: 0 auto; }
@media (min-width: 768px) { .pp3-hero-composite { max-width: 480px; max-height: 320px; } }
@media (min-width: 1024px) { .pp3-hero-composite { max-width: 100%; max-height: 480px; margin: 0; } }

/* "Save more every day" card removed per owner direction — gives the
   hero composite full width of its column. */
.pp3-save-more { display: none !important; }

/* ── Section heading ───────────────────────────────────────────────────── */
.pp3-section-head { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: space-between; gap: var(--pp3-s-2); margin-bottom: var(--pp3-s-4); }
@media (min-width: 768px) { .pp3-section-head { margin-bottom: var(--pp3-s-5); } }
.pp3-section-head-left { display: flex; align-items: baseline; gap: var(--pp3-s-2); flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
@media (min-width: 640px) { .pp3-section-head-left { gap: var(--pp3-s-3); flex-wrap: nowrap; } }
.pp3-section-head-right { font-size: var(--pp3-fs-sm); font-weight: 700; color: var(--pp3-green-700); display: inline-flex; align-items: center; gap: 4px; transition: color 0.15s; flex: 0 0 auto; white-space: nowrap; }
.pp3-section-head-right:hover { color: var(--pp3-green-900); }

/* ── Deal cards (used on home/deals/category/PDP-alternatives) ─────────── */
/* Horizontal scroll on mobile (~3 visible + peek of 4th), 6-across on wide desktop.
   This matches the mockup: cards flow left→right and scroll, never wrap vertically. */
.pp3-deal-row { display: flex; gap: var(--pp3-s-3); overflow-x: auto; padding-bottom: var(--pp3-s-3); margin: 0 calc(var(--pp3-pad-x) * -1); padding-left: var(--pp3-pad-x); padding-right: var(--pp3-pad-x); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pp3-deal-row::-webkit-scrollbar { display: none; }
.pp3-deal-row > .pp3-deal-card { flex: 0 0 calc(32% - var(--pp3-s-3)); min-width: 152px; scroll-snap-align: start; }
@media (min-width: 640px)  { .pp3-deal-row > .pp3-deal-card { flex-basis: calc(28% - var(--pp3-s-3)); } }
@media (min-width: 900px)  { .pp3-deal-row > .pp3-deal-card { flex-basis: calc(22% - var(--pp3-s-3)); } }
@media (min-width: 1100px) { .pp3-deal-row > .pp3-deal-card { flex-basis: calc(16.66% - var(--pp3-s-3)); } }

.pp3-deal-grid { display: grid; gap: var(--pp3-s-4); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .pp3-deal-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px)  { .pp3-deal-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1100px) { .pp3-deal-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.pp3-deal-card { display: flex; flex-direction: column; background: var(--pp3-surface); border: 1px solid var(--pp3-border); border-radius: var(--pp3-r-lg); overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; position: relative; min-width: 0; }
.pp3-deal-card:hover { transform: translateY(-2px); box-shadow: var(--pp3-shadow); border-color: var(--pp3-ink-faint); }
.pp3-deal-card-img { position: relative; height: 110px; background: linear-gradient(180deg, var(--pp3-surface-2) 0%, var(--pp3-surface) 100%); display: grid; place-items: center; padding: var(--pp3-s-2); overflow: hidden; }
@media (min-width: 640px)  { .pp3-deal-card-img { height: 140px; padding: var(--pp3-s-3); } }
@media (min-width: 1100px) { .pp3-deal-card-img { height: 160px; padding: var(--pp3-s-4); } }
.pp3-deal-card-img img, .pp3-deal-card-img svg { max-width: 85%; max-height: 92%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(15,23,42,0.10)); }
.pp3-deal-card-pct-off { position: absolute; top: 6px; left: 6px; font-size: 10px; padding: 3px 7px; }
@media (min-width: 768px) { .pp3-deal-card-pct-off { top: var(--pp3-s-3); left: var(--pp3-s-3); font-size: var(--pp3-fs-xs); padding: 4px 9px; } }
/* Deal-card body uses flex column with grow=1 so multiple cards in a row
   share the same height. Brand/name reserve a fixed number of lines;
   price + foot pinned to bottom via margin-top:auto so the footer aligns
   across every card regardless of name length. */
.pp3-deal-card-body { padding: var(--pp3-s-3); display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; }
@media (min-width: 768px) { .pp3-deal-card-body { padding: var(--pp3-s-4); gap: 4px; } }
.pp3-deal-card-brand { font-size: var(--pp3-fs-xs); color: var(--pp3-ink-soft); font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; min-height: 1.3em; }
@media (min-width: 768px) { .pp3-deal-card-brand { font-size: var(--pp3-fs-sm); min-height: 1.4em; } }
.pp3-deal-card-name { font-size: 14px; font-weight: 700; color: var(--pp3-ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; letter-spacing: -0.005em; }
@media (min-width: 768px) { .pp3-deal-card-name { font-size: var(--pp3-fs-md); line-height: 1.35; min-height: 2.7em; } }
.pp3-deal-card-price { font-size: var(--pp3-fs-lg); font-weight: 800; color: var(--pp3-green); letter-spacing: -0.015em; margin-top: auto; padding-top: 6px; line-height: 1; min-height: 1.2em; }
@media (min-width: 768px) { .pp3-deal-card-price { font-size: var(--pp3-fs-xl); } }
.pp3-deal-card-retailer { font-size: var(--pp3-fs-xs); color: var(--pp3-ink-mute); font-weight: 500; margin-top: 2px; min-height: 1.3em; }
@media (min-width: 768px) { .pp3-deal-card-retailer { font-size: var(--pp3-fs-sm); } }
.pp3-deal-card-foot { margin-top: var(--pp3-s-2); min-height: 22px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp3-deal-card-foot .pp3-savings-pill { font-size: 10px; padding: 3px 7px; }
@media (min-width: 768px) { .pp3-deal-card-foot { margin-top: var(--pp3-s-3); } .pp3-deal-card-foot .pp3-savings-pill { font-size: var(--pp3-fs-sm); padding: 4px 10px; } }

/* ── Category tiles ────────────────────────────────────────────────────── */
/* Always 3 columns — even on mobile — to match the mockup's horizontal layout. */
.pp3-cat-grid { display: grid; gap: var(--pp3-s-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 768px)  { .pp3-cat-grid { gap: var(--pp3-s-5); } }

/* Tile layout: on mobile (narrow 3-col), image is positioned absolutely at
   bottom-right, partially fading out — text stays legible in the foreground.
   On desktop (wider), use the side-by-side photo-right layout. */
.pp3-cat-tile { display: flex; flex-direction: column; gap: var(--pp3-s-2); align-items: stretch; padding: var(--pp3-s-3); background: var(--pp3-tint-powder); border-radius: var(--pp3-r-md); transition: transform 0.18s ease, box-shadow 0.18s ease; position: relative; overflow: hidden; min-height: 100px; }
@media (min-width: 768px) { .pp3-cat-tile { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--pp3-s-3); padding: var(--pp3-s-5); border-radius: var(--pp3-r-lg); min-height: 150px; } }
.pp3-cat-tile:hover { transform: translateY(-2px); box-shadow: var(--pp3-shadow); }
.pp3-cat-tile-bars { background: var(--pp3-tint-bars); }
.pp3-cat-tile-rtds { background: var(--pp3-tint-rtds); }
.pp3-cat-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; z-index: 1; position: relative; }
@media (min-width: 768px) { .pp3-cat-tile-text { gap: 4px; } }
.pp3-cat-tile-name { font-size: var(--pp3-fs-sm); font-weight: 800; color: var(--pp3-ink); letter-spacing: -0.01em; line-height: 1.25; }
@media (min-width: 768px) { .pp3-cat-tile-name { font-size: var(--pp3-fs-lg); } }
.pp3-cat-tile-sub  { display: none; }
@media (min-width: 768px) { .pp3-cat-tile-sub { display: block; font-size: var(--pp3-fs-sm); color: var(--pp3-ink-soft); } }
.pp3-cat-tile-cta  { display: inline-flex; align-items: center; gap: 4px; font-size: var(--pp3-fs-xs); font-weight: 700; color: var(--pp3-green-700); margin-top: var(--pp3-s-1); transition: gap 0.15s; }
@media (min-width: 768px) { .pp3-cat-tile-cta { font-size: var(--pp3-fs-sm); margin-top: var(--pp3-s-2); } }
.pp3-cat-tile:hover .pp3-cat-tile-cta { gap: 8px; }
/* Mobile: position image absolutely at bottom-right so it peeks out behind text */
.pp3-cat-tile-img { position: absolute; bottom: -8px; right: -4px; width: 80px; height: 90px; display: grid; place-items: center; flex: 0 0 auto; opacity: .55; pointer-events: none; }
@media (min-width: 480px) { .pp3-cat-tile-img { width: 100px; height: 110px; opacity: .65; } }
@media (min-width: 768px) { .pp3-cat-tile-img { position: static; width: 140px; height: 140px; opacity: 1; pointer-events: auto; } }
.pp3-cat-tile-img img, .pp3-cat-tile-img svg { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(15,23,42,0.12)); }

/* ── Trust strip (4 items + optional Guides) ───────────────────────────── */
/* Always 4 columns — even on mobile — matches the mockup. Item content flows
   icon-on-top / text-below for narrow widths so 4 fit; switches to icon-left
   text-right at desktop. */
.pp3-trust { display: grid; gap: var(--pp3-s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--pp3-s-4); background: var(--pp3-surface); border: 1px solid var(--pp3-border); border-radius: var(--pp3-r-lg); }
@media (min-width: 480px) { .pp3-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pp3-trust { gap: var(--pp3-s-5); padding: var(--pp3-s-6); } }
.pp3-trust-with-guides { display: grid; gap: var(--pp3-s-5); }
@media (min-width: 1024px) { .pp3-trust-with-guides { grid-template-columns: 4fr 1.4fr; align-items: stretch; } }
.pp3-trust-item { display: flex; flex-direction: column; gap: var(--pp3-s-2); align-items: flex-start; }
@media (min-width: 1024px) { .pp3-trust-item { flex-direction: row; align-items: flex-start; gap: var(--pp3-s-3); } }
.pp3-trust-icon { width: 32px; height: 32px; border-radius: var(--pp3-r-pill); background: var(--pp3-green-50); display: grid; place-items: center; flex: 0 0 auto; }
@media (min-width: 1024px) { .pp3-trust-icon { width: 36px; height: 36px; } }
.pp3-trust-icon svg { width: 16px; height: 16px; color: var(--pp3-green-700); }
@media (min-width: 1024px) { .pp3-trust-icon svg { width: 18px; height: 18px; } }
.pp3-trust-text { min-width: 0; }
.pp3-trust-text h3 { font-size: var(--pp3-fs-sm); font-weight: 800; color: var(--pp3-ink); margin-bottom: 2px; line-height: 1.25; }
@media (min-width: 1024px) { .pp3-trust-text h3 { font-size: var(--pp3-fs-sm); margin-bottom: 3px; } }
.pp3-trust-text p  { font-size: var(--pp3-fs-xs); color: var(--pp3-ink-mute); line-height: 1.35; }
@media (min-width: 1024px) { .pp3-trust-text p { font-size: var(--pp3-fs-sm); line-height: 1.45; } }

/* ── Guides & More teaser card ─────────────────────────────────────────── */
.pp3-guides-teaser { display: flex; align-items: flex-start; gap: var(--pp3-s-4); padding: var(--pp3-s-5); background: var(--pp3-surface); border: 1px solid var(--pp3-border); border-radius: var(--pp3-r-lg); }
.pp3-guides-teaser-icon { width: 44px; height: 44px; border-radius: var(--pp3-r-md); background: var(--pp3-surface-2); display: grid; place-items: center; flex: 0 0 auto; }
.pp3-guides-teaser-icon svg { width: 22px; height: 22px; color: var(--pp3-ink-soft); }
.pp3-guides-teaser-text { min-width: 0; }
.pp3-guides-teaser-text h3 { font-size: var(--pp3-fs-lg); font-weight: 800; margin-bottom: 4px; }
.pp3-guides-teaser-text p  { font-size: var(--pp3-fs-sm); color: var(--pp3-ink-mute); line-height: 1.5; margin-bottom: var(--pp3-s-2); }
.pp3-guides-teaser-cta { font-size: var(--pp3-fs-sm); font-weight: 700; color: var(--pp3-green-700); display: inline-flex; align-items: center; gap: 4px; }

/* ── PDP layout ────────────────────────────────────────────────────────── */
.pp3-pdp-hero { display: grid; gap: var(--pp3-s-5); padding-top: var(--pp3-s-3); padding-bottom: var(--pp3-s-6); }
@media (min-width: 900px) { .pp3-pdp-hero { grid-template-columns: 1fr 1fr; gap: var(--pp3-s-7); align-items: start; } }
.pp3-pdp-image { background: var(--pp3-surface); border: 1px solid var(--pp3-border-soft); border-radius: var(--pp3-r-lg); padding: var(--pp3-s-4); display: grid; place-items: center; height: 280px; }
@media (min-width: 640px) { .pp3-pdp-image { height: 360px; padding: var(--pp3-s-5); } }
@media (min-width: 900px)  { .pp3-pdp-image { aspect-ratio: 1 / 1; height: auto; } }
.pp3-pdp-image img, .pp3-pdp-image svg { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(15,23,42,0.10)); }
.pp3-pdp-info { display: flex; flex-direction: column; gap: var(--pp3-s-3); }
.pp3-pdp-brand { font-size: var(--pp3-fs-sm); color: var(--pp3-ink-mute); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pp3-pdp-title { font-size: var(--pp3-fs-3xl); font-weight: 800; color: var(--pp3-ink); letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
@media (min-width: 768px) { .pp3-pdp-title { font-size: var(--pp3-fs-4xl); } }
.pp3-pdp-variant { font-size: var(--pp3-fs-md); color: var(--pp3-ink-mute); font-weight: 500; }
.pp3-pdp-chips { display: flex; flex-wrap: wrap; gap: var(--pp3-s-2); margin-top: var(--pp3-s-1); margin-bottom: var(--pp3-s-3); }

.pp3-pdp-two-col { display: grid; gap: var(--pp3-s-5); margin-top: var(--pp3-s-6); }
@media (min-width: 900px) { .pp3-pdp-two-col { grid-template-columns: 1.2fr 1fr; gap: var(--pp3-s-5); align-items: start; } }

/* Sticky lifts above mobile tabbar */
body.pp3-has-sticky { padding-bottom: 140px; }
@media (min-width: 1024px) { body.pp3-has-sticky { padding-bottom: 0; } }

/* ── PDP — Cheapest Today card ─────────────────────────────────────────── */
.pp3-cheapest { background: var(--pp3-surface); border: 1px solid var(--pp3-border); border-radius: var(--pp3-r-lg); padding: var(--pp3-s-5); display: flex; flex-direction: column; gap: var(--pp3-s-3); }
.pp3-cheapest-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pp3-s-3); flex-wrap: wrap; }
.pp3-cheapest-head h3, .pp3-cheapest-head h2 { font-size: var(--pp3-fs-md); font-weight: 800; color: var(--pp3-ink); margin: 0; }
.pp3-cheapest-price { font-size: 44px; font-weight: 800; color: var(--pp3-green); letter-spacing: -0.02em; line-height: 1; }
.pp3-cheapest-price--placeholder { font-size: var(--pp3-fs-xl); color: var(--pp3-ink-mute); font-weight: 700; letter-spacing: 0; }
.pp3-cheapest-save  { font-size: var(--pp3-fs-md); color: var(--pp3-green-700); font-weight: 700; }
.pp3-cheapest-ret   { display: flex; align-items: center; gap: var(--pp3-s-2); padding: var(--pp3-s-3) 0; border-top: 1px solid var(--pp3-border-soft); border-bottom: 1px solid var(--pp3-border-soft); }
.pp3-cheapest-ret-logo { width: 24px; height: 24px; border-radius: 4px; background: var(--pp3-surface-2); flex: 0 0 auto; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.pp3-cheapest-ret-name { font-size: var(--pp3-fs-md); font-weight: 700; color: var(--pp3-ink); }
.pp3-cheapest-ret-meta { font-size: var(--pp3-fs-sm); color: var(--pp3-ink-mute); margin-left: auto; }
.pp3-cheapest-cta-row { display: flex; gap: var(--pp3-s-3); }
.pp3-cheapest-cta-row .pp3-btn { flex: 1; }

/* ── PDP — Compare prices retailer list ───────────────────────────────── */
.pp3-compare { background: var(--pp3-surface); border: 1px solid var(--pp3-border); border-radius: var(--pp3-r-lg); overflow: hidden; }
.pp3-compare-head { padding: var(--pp3-s-4) var(--pp3-s-5); border-bottom: 1px solid var(--pp3-border-soft); font-size: var(--pp3-fs-lg); font-weight: 800; }
/* Mobile: single column stack inside row. Desktop: 4-column inline.
   No grid-template-areas — easier to reason about, no overlap risk. */
.pp3-retailer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pp3-s-3); padding: var(--pp3-s-3) var(--pp3-s-4); border-bottom: 1px solid var(--pp3-border-soft); transition: background 0.15s; }
@media (min-width: 640px) { .pp3-retailer { flex-wrap: nowrap; padding: var(--pp3-s-4) var(--pp3-s-5); } }
.pp3-retailer:last-child { border-bottom: 0; }
.pp3-retailer:hover { background: var(--pp3-surface-2); }
.pp3-retailer-logo { width: 32px; height: 32px; border-radius: 6px; background: var(--pp3-surface-2); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--pp3-ink-soft); flex: 0 0 auto; }
.pp3-retailer-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp3-retailer-name { font-size: var(--pp3-fs-md); font-weight: 700; color: var(--pp3-ink); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; line-height: 1.25; }
.pp3-retailer-ship { font-size: var(--pp3-fs-xs); color: var(--pp3-ink-mute); }
.pp3-retailer-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; flex: 0 0 auto; margin-left: auto; }
.pp3-retailer-price-num { font-size: var(--pp3-fs-md); font-weight: 800; color: var(--pp3-green); letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
@media (min-width: 640px) { .pp3-retailer-price-num { font-size: var(--pp3-fs-lg); } }
.pp3-retailer-price-num.is-stale { color: var(--pp3-ink-mute); font-weight: 600; }
.pp3-retailer-cta { padding: 8px 14px; font-size: var(--pp3-fs-xs); font-weight: 700; border-radius: var(--pp3-r-pill); background: var(--pp3-surface); color: var(--pp3-ink); border: 1px solid var(--pp3-border); transition: background 0.15s, border-color 0.15s; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: 0 0 auto; }
/* Mobile: CTA wraps to its own row, full-width-ish */
@media (max-width: 639px) { .pp3-retailer-cta { width: 100%; justify-content: center; padding: 10px 14px; } }
@media (min-width: 640px) { .pp3-retailer-cta { padding: 8px 14px; font-size: var(--pp3-fs-sm); } }
.pp3-retailer-cta:hover { background: var(--pp3-surface-2); border-color: var(--pp3-ink-faint); }
.pp3-compare-expand { width: 100%; padding: var(--pp3-s-4); font-size: var(--pp3-fs-sm); font-weight: 700; color: var(--pp3-ink-soft); border-top: 1px solid var(--pp3-border-soft); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.15s; }
.pp3-compare-expand:hover { background: var(--pp3-surface-2); }

/* ── PDP — Price history card ──────────────────────────────────────────── */
.pp3-history { background: var(--pp3-surface); border: 1px solid var(--pp3-border); border-radius: var(--pp3-r-lg); padding: var(--pp3-s-5); display: flex; flex-direction: column; gap: var(--pp3-s-3); }
.pp3-history-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pp3-s-3); flex-wrap: wrap; }
.pp3-history-head h3 { font-size: var(--pp3-fs-lg); font-weight: 800; }
.pp3-history-chart { width: 100%; height: 140px; background: var(--pp3-bg); border-radius: var(--pp3-r-md); position: relative; padding: var(--pp3-s-3); }
.pp3-history-chart svg { width: 100%; height: 100%; }
.pp3-history-insight { font-size: var(--pp3-fs-md); color: var(--pp3-ink-soft); line-height: 1.5; }
.pp3-history-insight strong { color: var(--pp3-green-700); font-weight: 800; }

/* ── PDP — Cheaper alternatives ────────────────────────────────────────── */
.pp3-alt { background: var(--pp3-surface); border: 1px solid var(--pp3-border); border-radius: var(--pp3-r-lg); overflow: hidden; }
.pp3-alt-head { display: flex; align-items: baseline; justify-content: space-between; padding: var(--pp3-s-4) var(--pp3-s-5); border-bottom: 1px solid var(--pp3-border-soft); }
.pp3-alt-head h3 { font-size: var(--pp3-fs-lg); font-weight: 800; }
.pp3-alt-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--pp3-s-3); padding: var(--pp3-s-4) var(--pp3-s-5); border-bottom: 1px solid var(--pp3-border-soft); transition: background 0.15s; }
.pp3-alt-item:last-child { border-bottom: 0; }
.pp3-alt-item:hover { background: var(--pp3-surface-2); }
.pp3-alt-thumb { width: 56px; height: 56px; border-radius: var(--pp3-r-sm); background: var(--pp3-surface-2); display: grid; place-items: center; padding: 4px; flex: 0 0 auto; }
.pp3-alt-thumb img, .pp3-alt-thumb svg { max-width: 100%; max-height: 100%; object-fit: contain; }
.pp3-alt-info { min-width: 0; }
.pp3-alt-info .brand { font-size: var(--pp3-fs-sm); color: var(--pp3-ink-soft); }
.pp3-alt-info .name  { font-size: var(--pp3-fs-md); font-weight: 700; color: var(--pp3-ink); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pp3-alt-info .var   { font-size: var(--pp3-fs-xs); color: var(--pp3-ink-mute); }
.pp3-alt-price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pp3-alt-price-num { font-size: var(--pp3-fs-md); font-weight: 800; color: var(--pp3-green); }
.pp3-alt-price-num.pp3-alt-price-unverified { color: var(--pp3-ink-soft); font-weight: 600; font-size: var(--pp3-fs-sm); font-style: normal; }
/* Also constrain pp3-alt-thumb images the same way */
.pp3-alt-thumb img, .pp3-alt-thumb svg, .pp3-alt-thumb .pp3-img-placeholder { max-width: 100%; max-height: 100%; object-fit: contain; }
.pp3-alt-thumb .pp3-img-placeholder { width: 100%; height: 100%; padding: 4px; border-radius: var(--pp3-r-sm); min-height: 0; }

/* ── PDP — You might also like ─────────────────────────────────────────── */
.pp3-also-row { display: flex; gap: var(--pp3-s-3); overflow-x: auto; padding-bottom: var(--pp3-s-3); margin: 0 calc(var(--pp3-pad-x) * -1); padding-left: var(--pp3-pad-x); padding-right: var(--pp3-pad-x); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; align-items: stretch; }
.pp3-also-row::-webkit-scrollbar { display: none; }
/* Cards in this row align to a uniform height (align-items:stretch on
   the row + flex column inside). Brand/name/price block reserves
   consistent heights so cards line up exactly regardless of whether
   the name wraps to 1 or 2 lines, or whether the price is a number
   vs the "Compare" fallback. */
.pp3-also-item { flex: 0 0 35%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; padding: var(--pp3-s-3); border: 1px solid var(--pp3-border-soft); border-radius: var(--pp3-r-md); background: var(--pp3-surface); transition: border-color 0.15s, transform 0.15s; }
.pp3-also-item:hover { border-color: var(--pp3-green-300); }
@media (min-width: 640px) { .pp3-also-item { flex-basis: 22%; } }
@media (min-width: 1024px) { .pp3-also-item { flex-basis: 16%; } }
/* Rigid square thumb container. aspect-ratio handles sizing; position:
   relative + absolute-positioned image keeps the image strictly inside
   the box regardless of natural dimensions (was overflowing on some
   products when no width/height attributes were on the <img>). */
.pp3-also-thumb { aspect-ratio: 1 / 1; background: var(--pp3-surface-2); border-radius: var(--pp3-r-sm); padding: var(--pp3-s-2); margin-bottom: 4px; flex: 0 0 auto; position: relative; overflow: hidden; width: 100%; }
.pp3-also-thumb > img, .pp3-also-thumb > svg { position: absolute; inset: 8px; max-width: calc(100% - 16px); max-height: calc(100% - 16px); width: auto; height: auto; margin: auto; object-fit: contain; }
/* Brand-only placeholder shown when no img URL exists. Fills the thumb. */
.pp3-also-thumb > .pp3-img-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; padding: 8px; border-radius: var(--pp3-r-sm); min-height: 0; }
.pp3-also-meta { font-size: 11px; color: var(--pp3-ink-mute); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; min-height: 1.3em; }
.pp3-deal-card-variant { font-size: 11px; color: var(--pp3-ink-mute); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; min-height: 1.3em; margin-top: 1px; }
/* Small freshness chip for use inside deal-card / also-item footers */
.pp3-freshness-xs { font-size: 10px; padding: 2px 6px; }

/* ── Related reading grid (footer of every long-tail content page) ───── */
.pp3-related-reading { padding: 32px 0 24px; }
.pp3-related-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .pp3-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pp3-related-grid { grid-template-columns: repeat(3, 1fr); } }
.pp3-related-card {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--pp3-surface, #FAFAF9);
  border: 1px solid var(--pp3-border, #E7E5E4);
  border-radius: var(--pp3-r-md, 12px);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
  min-height: 90px;
}
.pp3-related-card:hover {
  border-color: var(--pp3-green-300, #86EFAC);
  background: #fff;
  transform: translateY(-1px);
}
.pp3-related-card-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: #fff;
  border-radius: var(--pp3-r-sm, 8px);
  border: 1px solid var(--pp3-border, #E7E5E4);
}
.pp3-related-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pp3-related-card-kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pp3-ink-mute, #78716C);
}
.pp3-related-card-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pp3-ink, #1C1917);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pp3-related-card-snippet {
  font-size: 12px;
  color: var(--pp3-ink-mute, #78716C);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Table of Contents (on long-form content pages) ───────────────────── */
.pp3-toc {
  margin: 20px 0 28px;
  padding: 16px 20px;
  background: var(--pp3-surface, #FFFFFF);
  border: 1px solid var(--pp3-border, #E7E5E4);
  border-radius: 10px;
}
.pp3-toc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.pp3-toc-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 14px;
  color: var(--pp3-ink, #1C1917) !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  line-height: 1.4;
  transition: color 0.15s;
}
.pp3-toc-link:hover {
  color: var(--pp3-green-700, #15803D) !important;
}
.pp3-toc-bullet {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--pp3-green, #16A34A);
  transition: transform 0.15s;
}
.pp3-toc-link:hover .pp3-toc-bullet { transform: translateX(2px); }

/* "Key takeaway" callout above the TOC */
.pp3-key-takeaway {
  padding: 14px 18px;
  margin: 16px 0;
  border-left: 4px solid var(--pp3-green, #16A34A);
  background: var(--pp3-bg-soft, #FAFAF9);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--pp3-ink, #1C1917);
}

/* Smooth scroll for anchor links from TOC */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 80px; }
.pp3-also-brand { font-size: var(--pp3-fs-xs); color: var(--pp3-ink-mute); min-height: 1.4em; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pp3-also-name  { font-size: var(--pp3-fs-sm); font-weight: 700; color: var(--pp3-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; line-height: 1.25; }
/* Price pinned to the bottom — margin-top:auto pushes it after the
   name block, so every card ends with its price at the same y-offset. */
.pp3-also-price { font-size: var(--pp3-fs-md); font-weight: 800; color: var(--pp3-green); margin-top: auto; padding-top: 4px; line-height: 1.3; min-height: 1.4em; }

/* ── Guides & More tile grid ───────────────────────────────────────────── */
.pp3-guides-grid { display: grid; gap: var(--pp3-s-4); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 640px)  { .pp3-guides-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pp3-guides-grid { grid-template-columns: repeat(3, 1fr); } }
/* Guides-hub tile: all 14 tiles in the grid match the tallest row so
   rows align even when descriptions wrap to different line counts. */
.pp3-guides-tile { display: flex; gap: var(--pp3-s-3); padding: var(--pp3-s-5); background: var(--pp3-surface); border: 1px solid var(--pp3-border); border-radius: var(--pp3-r-lg); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; align-items: flex-start; }
.pp3-guides-tile:hover { transform: translateY(-2px); box-shadow: var(--pp3-shadow); border-color: var(--pp3-ink-faint); }
.pp3-guides-tile-icon { width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--pp3-r-md); background: var(--pp3-surface-2); display: grid; place-items: center; font-size: 22px; }
.pp3-guides-tile-text { min-width: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.pp3-guides-tile-text h3 { font-size: var(--pp3-fs-md); font-weight: 800; margin-bottom: 4px; }
.pp3-guides-tile-text p  { font-size: var(--pp3-fs-sm); color: var(--pp3-ink-mute); line-height: 1.45; min-height: 2.9em; }
.pp3-guides-tile-meta { display: block; margin-top: auto; padding-top: 8px; font-size: var(--pp3-fs-sm); font-weight: 700; color: var(--pp3-green-700); }

/* ── Deals page — tabs + filters + rows ────────────────────────────────── */
.pp3-deal-tabs { display: flex; gap: var(--pp3-s-2); overflow-x: auto; padding-bottom: var(--pp3-s-2); margin: 0 calc(var(--pp3-pad-x) * -1) var(--pp3-s-3); padding-left: var(--pp3-pad-x); padding-right: var(--pp3-pad-x); scrollbar-width: none; }
.pp3-deal-tabs::-webkit-scrollbar { display: none; }
.pp3-deal-tab { flex: 0 0 auto; padding: 10px 18px; font-size: var(--pp3-fs-sm); font-weight: 700; color: var(--pp3-ink-soft); background: var(--pp3-surface); border: 1px solid var(--pp3-border); border-radius: var(--pp3-r-pill); transition: background 0.15s, color 0.15s, border-color 0.15s; }
.pp3-deal-tab:hover { background: var(--pp3-surface-2); }
.pp3-deal-tab.is-active { background: var(--pp3-green); color: #FFF; border-color: var(--pp3-green); }
.pp3-deal-filters { display: flex; gap: var(--pp3-s-2); flex-wrap: wrap; margin-bottom: var(--pp3-s-4); }

.pp3-deal-list { display: flex; flex-direction: column; gap: var(--pp3-s-3); margin-bottom: var(--pp3-s-6); }
.pp3-deal-row-item { display: grid; grid-template-columns: 92px 1fr auto; gap: var(--pp3-s-3); padding: var(--pp3-s-3) var(--pp3-s-4); background: var(--pp3-surface); border: 1px solid var(--pp3-border); border-radius: var(--pp3-r-lg); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; min-width: 0; }
@media (min-width: 768px) { .pp3-deal-row-item { grid-template-columns: 120px 1fr auto; padding: var(--pp3-s-4) var(--pp3-s-5); gap: var(--pp3-s-5); } }
.pp3-deal-row-item:hover { transform: translateY(-1px); box-shadow: var(--pp3-shadow); border-color: var(--pp3-ink-faint); }
.pp3-deal-row-img { width: 92px; height: 92px; display: grid; place-items: center; background: var(--pp3-surface-2); border-radius: var(--pp3-r-md); padding: 6px; position: relative; overflow: hidden; flex: 0 0 auto; }
@media (min-width: 768px) { .pp3-deal-row-img { width: 120px; height: 120px; } }
.pp3-deal-row-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pp3-deal-row-img .pp3-img-placeholder { width: 100%; height: 100%; min-height: 0; padding: 4px; border-radius: var(--pp3-r-sm); }
/* Body grows to fill row height so retailer-label footer sticks to bottom */
.pp3-deal-row-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; justify-content: flex-start; }
.pp3-deal-row-brand { font-size: var(--pp3-fs-sm); color: var(--pp3-ink-soft); font-weight: 500; min-height: 1.4em; }
.pp3-deal-row-name { font-size: var(--pp3-fs-md); font-weight: 800; color: var(--pp3-ink); letter-spacing: -0.005em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.pp3-deal-row-var { font-size: var(--pp3-fs-xs); color: var(--pp3-ink-mute); min-height: 1.3em; }
.pp3-deal-row-foot { margin-top: auto; padding-top: var(--pp3-s-2); border-top: 1px solid var(--pp3-border-soft); }
.pp3-deal-row-retailer { display: flex; align-items: center; gap: var(--pp3-s-2); flex-wrap: wrap; }
.pp3-deal-row-retailer .pp3-retailer-logo { width: 22px; height: 22px; font-size: 10px; }
.pp3-deal-row-retailer-label { font-size: var(--pp3-fs-xs); color: var(--pp3-ink-mute); }
.pp3-deal-row-retailer-label strong { color: var(--pp3-ink-soft); font-weight: 700; }
.pp3-deal-row-price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; min-width: 78px; }
.pp3-deal-row-price-num { font-size: var(--pp3-fs-xl); font-weight: 800; color: var(--pp3-green); letter-spacing: -0.015em; line-height: 1; }
.pp3-deal-row-price-old { font-size: var(--pp3-fs-sm); color: var(--pp3-ink-faint); text-decoration: line-through; font-weight: 600; }

/* ── PDP — Sticky bottom CTA on mobile ─────────────────────────────────── */
.pp3-sticky { position: fixed; bottom: var(--pp3-tabbar-h); left: 0; right: 0; background: rgba(255,255,255,0.98); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-top: 1px solid var(--pp3-border); padding: 12px var(--pp3-pad-x) calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: var(--pp3-s-3); z-index: 40; transform: translateY(110%); transition: transform 0.2s ease-out; }
.pp3-sticky.is-visible { transform: translateY(0); }
@media (min-width: 1024px) { .pp3-sticky { display: none; } }
.pp3-sticky-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp3-sticky-label { font-size: var(--pp3-fs-xs); color: var(--pp3-ink-mute); font-weight: 600; }
.pp3-sticky-price { font-size: var(--pp3-fs-lg); font-weight: 800; color: var(--pp3-ink); letter-spacing: -0.01em; }
.pp3-sticky .pp3-btn { flex: 0 0 auto; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.pp3-footer { background: var(--pp3-surface); border-top: 1px solid var(--pp3-border); padding: var(--pp3-s-7) 0 var(--pp3-s-5); margin-top: var(--pp3-s-8); }
.pp3-footer-grid { display: grid; gap: var(--pp3-s-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .pp3-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--pp3-s-7); } }
.pp3-footer h4 { font-size: var(--pp3-fs-sm); font-weight: 800; color: var(--pp3-ink); margin-bottom: var(--pp3-s-3); letter-spacing: 0.03em; text-transform: uppercase; }
.pp3-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--pp3-s-2); }
.pp3-footer li a { color: var(--pp3-ink-soft); font-size: var(--pp3-fs-sm); transition: color 0.15s; }
.pp3-footer li a:hover { color: var(--pp3-ink); }
.pp3-footer-about p { color: var(--pp3-ink-mute); font-size: var(--pp3-fs-sm); margin-top: var(--pp3-s-3); line-height: 1.5; }
.pp3-footer-copy { margin-top: var(--pp3-s-6); padding-top: var(--pp3-s-5); border-top: 1px solid var(--pp3-border-soft); font-size: var(--pp3-fs-xs); color: var(--pp3-ink-mute); text-align: center; }

/* ── Breadcrumb ────────────────────────────────────────────────────────── */
.pp3-crumb { font-size: var(--pp3-fs-sm); color: var(--pp3-ink-mute); padding: var(--pp3-s-4) 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pp3-crumb a { color: var(--pp3-ink-mute); transition: color 0.15s; }
.pp3-crumb a:hover { color: var(--pp3-ink); }
.pp3-crumb-sep { color: var(--pp3-ink-faint); }
.pp3-crumb [aria-current="page"] { color: var(--pp3-ink); font-weight: 600; }

/* ── Light prose (for any in-text content) ─────────────────────────────── */
.pp3-prose { max-width: 720px; margin: 0 auto; font-size: var(--pp3-fs-lg); line-height: 1.7; color: var(--pp3-ink-soft); }
.pp3-prose h2 { font-size: var(--pp3-fs-2xl); margin: var(--pp3-s-7) 0 var(--pp3-s-3); color: var(--pp3-ink); letter-spacing: -0.015em; }
.pp3-prose h3 { font-size: var(--pp3-fs-xl); margin: var(--pp3-s-5) 0 var(--pp3-s-2); color: var(--pp3-ink); }
.pp3-prose p  { margin: 0 0 var(--pp3-s-4); }
.pp3-prose strong { color: var(--pp3-ink); font-weight: 700; }
.pp3-prose a { color: var(--pp3-green-700); text-decoration: underline; text-decoration-color: var(--pp3-green-200); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: text-decoration-color 0.15s; }
.pp3-prose a:hover { text-decoration-color: var(--pp3-green-700); }

/* ── Utility ───────────────────────────────────────────────────────────── */
.pp3-text-center { text-align: center; }
.pp3-hide-mobile { display: none; }
@media (min-width: 1024px) { .pp3-hide-mobile { display: initial; } .pp3-hide-desktop { display: none; } }

/* Brand page FAQ */
.pp3-faq-item{border:1px solid var(--pp3-border);border-radius:10px;margin-bottom:8px;background:var(--pp3-surface);overflow:hidden}
.pp3-faq-q{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;font-weight:700;font-size:15px;cursor:pointer;list-style:none;color:var(--pp3-ink)}
.pp3-faq-q::-webkit-details-marker{display:none}
.pp3-faq-q::after{content:"+";font-size:18px;font-weight:800;color:var(--pp3-green);flex-shrink:0;transition:transform .2s}
.pp3-faq-item[open] .pp3-faq-q::after{transform:rotate(45deg)}
.pp3-faq-a{padding:0 16px 14px;font-size:14px;line-height:1.6;color:var(--pp3-ink-soft)}

/* ── Brand / Retailer hero ──────────────────────────────────────────────── */
.pp3-brand-hero{padding:20px 0 4px}
.pp3-brand-hero-row{display:flex;align-items:flex-start;gap:16px;margin-top:12px}
.pp3-brand-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pp3-stat-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;background:var(--pp3-surface-2);border:1px solid var(--pp3-border);border-radius:var(--pp3-r-pill);font-size:13px;color:var(--pp3-ink-soft);white-space:nowrap}
.pp3-stat-chip strong{color:var(--pp3-ink);font-weight:700}
.pp3-breadcrumb{font-size:13px;color:var(--pp3-ink-mute);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pp3-breadcrumb a{color:var(--pp3-ink-mute);transition:color .15s}
.pp3-breadcrumb a:hover{color:var(--pp3-green)}
.pp3-breadcrumb span{color:var(--pp3-ink-faint)}
.pp3-page-hero{padding:20px 0 0}

/* ── Pill links (retailer compare strip) ────────────────────────────────── */
.pp3-pill-row{display:flex;flex-wrap:wrap;gap:8px}
.pp3-pill-link{display:inline-flex;padding:6px 14px;font-size:13px;font-weight:600;color:var(--pp3-ink);background:var(--pp3-surface-2);border:1px solid var(--pp3-border);border-radius:var(--pp3-r-pill);text-decoration:none;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.pp3-pill-link:hover{background:var(--pp3-green-50);border-color:var(--pp3-green-200);color:var(--pp3-green-700)}
.pp3-pill-link-outline{color:var(--pp3-green-700);border-color:var(--pp3-green-200);background:transparent}
.pp3-pill-link-outline:hover{background:var(--pp3-green-50)}

/* ── Affiliate disclosure box ───────────────────────────────────────────── */
.pp3-disclosure{display:flex;gap:12px;align-items:flex-start;padding:16px;background:var(--pp3-surface-2);border:1px solid var(--pp3-border);border-radius:var(--pp3-r-md);margin:var(--pp3-s-6) 0;font-size:13px;line-height:1.6;color:var(--pp3-ink-soft)}
.pp3-disclosure-icon{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--pp3-green-50);border:1px solid var(--pp3-green-100);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--pp3-green-700)}
.pp3-disclosure-body strong{color:var(--pp3-ink);font-weight:700;display:block;margin-bottom:4px}
.pp3-disclosure-body a{color:var(--pp3-green-700);text-decoration:underline}
.pp3-disclosure-body p{margin:0}

/* ── Retailer index grid ────────────────────────────────────────────────── */
.pp3-retailer-grid{display:flex;flex-direction:column;gap:8px;padding:20px 0}
@media(min-width:640px){.pp3-retailer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}}
@media(min-width:1024px){.pp3-retailer-grid{grid-template-columns:repeat(3,1fr)}}
.pp3-retailer-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--pp3-surface);border:1px solid var(--pp3-border);border-radius:var(--pp3-r-md);text-decoration:none;color:var(--pp3-ink);transition:box-shadow .15s,border-color .15s}
.pp3-retailer-card:hover{border-color:var(--pp3-green-200);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.pp3-retailer-card-badge{flex:0 0 auto;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;letter-spacing:-.5px}
.pp3-retailer-card-body{flex:1;min-width:0}
.pp3-retailer-card-name{font-size:15px;font-weight:700;color:var(--pp3-ink)}
.pp3-retailer-card-count{font-size:13px;color:var(--pp3-ink-soft);margin-top:2px}

/* ── V2 pp-card → compact row override (for best/for/vs/etc pages that still use V2 cards) ─ */
/* Override the V2 full-width square card layout on mobile to horizontal rows */
.pp3 .pp-grid{display:flex;flex-direction:column;gap:0;border:1px solid var(--pp3-border);border-radius:var(--pp3-r-md);overflow:hidden}
.pp3 .pp-card{display:flex;flex-direction:row;align-items:center;gap:0;border-radius:0;border-bottom:1px solid var(--pp3-border);background:var(--pp3-surface);text-decoration:none;color:var(--pp3-ink);transition:background .15s;min-height:88px}
.pp3 .pp-card:last-child{border-bottom:none}
.pp3 .pp-card:hover{background:var(--pp3-surface-2)}
.pp3 .pp-card-img{flex:0 0 88px;width:88px;height:88px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background:var(--pp3-surface-2)}
.pp3 .pp-card-img img,.pp3 .pp-card-img svg,.pp3 .pp-card-img .pp-tub-svg{width:88px;height:88px;object-fit:contain;max-width:88px;max-height:88px}
.pp3 .pp-card-badge,.pp3 .pp-card-vs{position:absolute;top:4px;left:4px;font-size:9px;padding:2px 5px;border-radius:4px;font-weight:700;z-index:1}
.pp3 .pp-card-vs{top:auto;bottom:4px;left:4px;background:rgba(0,0,0,.55);color:#fff;border-radius:6px;display:flex;flex-direction:column;align-items:center;padding:3px 5px;font-size:9px}
.pp3 .pp-card-body{flex:1;min-width:0;padding:10px 12px}
.pp3 .pp-card-brand{font-size:11px;font-weight:700;color:var(--pp3-ink-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.pp3 .pp-card-name{font-size:14px;font-weight:700;color:var(--pp3-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp3 .pp-card-meta{font-size:12px;color:var(--pp3-ink-mute);margin-top:2px}
.pp3 .pp-card-price{font-size:15px;font-weight:800;color:var(--pp3-green-700)}
.pp3 .pp-card-row{margin-top:4px}
.pp3 .pp-card-cta{display:none}
.pp3 .pp-card-ppd{font-size:11px;color:var(--pp3-ink-mute)}
/* Hide sparklines in compact view */
.pp3 .pp-spark-wrap{display:none!important}
@media(min-width:768px){
  .pp3 .pp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;border:none;border-radius:0;overflow:visible}
  .pp3 .pp-card{flex-direction:column;border:1px solid var(--pp3-border);border-radius:var(--pp3-r-md);min-height:unset}
  .pp3 .pp-card-img{flex:none;width:100%;height:auto;aspect-ratio:1/1;overflow:hidden}
  .pp3 .pp-card-img img,.pp3 .pp-card-img svg,.pp3 .pp-card-img .pp-tub-svg{width:100%;height:100%}
  .pp3 .pp-card-cta{display:block}
  .pp3 .pp-spark-wrap{display:block!important}
}

/* ── app.js pcard/pgrid compact row override (for/vs/for pages) ──────── */
.pp3 .pgrid{display:flex;flex-direction:column;gap:0;border:1px solid var(--pp3-border);border-radius:var(--pp3-r-md);overflow:hidden}
.pp3 .pcard{display:flex;flex-direction:row;align-items:center;gap:0;border-radius:0;border-bottom:1px solid var(--pp3-border);background:var(--pp3-surface);text-decoration:none;color:var(--pp3-ink);transition:background .15s;min-height:88px;overflow:hidden}
.pp3 .pcard:last-child{border-bottom:none}
.pp3 .pcard:hover{background:var(--pp3-surface-2)}
.pp3 .pcard-img{flex:0 0 88px;width:88px;height:88px!important;aspect-ratio:1/1!important;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background:var(--pp3-surface-2);padding:0!important}
.pp3 .pcard-img svg{width:88px!important;height:88px!important;transform:none!important}
.pp3 .pcard-body{flex:1;min-width:0;padding:10px 12px}
.pp3 .pcard-name{font-size:14px;font-weight:700;color:var(--pp3-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0;margin-bottom:4px}
.pp3 .pcard-rule{display:none}
.pp3 .pcard-price .from{font-size:10px;color:var(--pp3-ink-mute)}
.pp3 .pcard-price .amount{font-size:17px;font-weight:800;color:var(--pp3-green-700);letter-spacing:-.3px;line-height:1.1}
.pp3 .pcard-price .at{font-size:11px;color:var(--pp3-ink-mute)}
.pp3 .pcard-btn{display:none}
.pp3 .pcard .ppd-tag{display:none}
.pp3 .pcard .vs-badge{position:absolute;bottom:3px;left:3px;font-size:8px;padding:2px 4px;background:rgba(0,0,0,.5);color:#fff;border-radius:4px}
.pp3 .pcard .top-badge{display:none}
.pp3 .pcard .pp-spark-wrap{display:none!important}
@media(min-width:768px){
  .pp3 .pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;border:none;border-radius:0;overflow:visible}
  .pp3 .pcard{flex-direction:column;border:1px solid var(--pp3-border);border-radius:var(--pp3-r-md);min-height:unset}
  .pp3 .pcard-img{flex:none;width:100%;height:240px!important;aspect-ratio:1/1!important;padding:20px!important}
  .pp3 .pcard-img svg{width:100%!important;height:100%!important;transform:scale(1.4)!important}
  .pp3 .pcard-name{white-space:normal;min-height:40px}
  .pp3 .pcard-rule{display:block}
  .pp3 .pcard-btn{display:block}
  .pp3 .pcard .ppd-tag{display:block}
  .pp3 .pcard .top-badge{display:block}
  .pp3 .pcard .pp-spark-wrap{display:block!important}
}

/* ── Value Score badge (shared across all product card types) ─────────── */
.pp3-score-badge { display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--pp3-green-700);background:var(--pp3-green-50);border:1px solid var(--pp3-green-100);border-radius:4px;padding:2px 7px;white-space:nowrap;line-height:1.4;flex-shrink:0 }
.pp3-score-badge-muted { color:var(--pp3-ink-mute);background:var(--pp3-surface-2);border-color:var(--pp3-border) }

/* ── VS comparison hero (individual vs/ pages) ────────────────────────── */
.pp3-vs-duel { display:grid;grid-template-columns:1fr 28px 1fr;border:1px solid var(--pp3-border);border-radius:var(--pp3-r-lg);overflow:hidden;margin:0 0 28px;background:var(--pp3-surface) }
.pp3-vs-side { display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative;transition:background .15s }
.pp3-vs-side:hover { background:var(--pp3-surface-2) }
.pp3-vs-side-a { border-right:1px solid var(--pp3-border) }
.pp3-vs-winner-flag { position:absolute;top:0;left:0;right:0;background:var(--pp3-green);color:#fff;font-size:10px;font-weight:700;text-align:center;padding:3px 6px;letter-spacing:.04em;text-transform:uppercase }
.pp3-vs-img { width:100%;height:120px;display:grid;place-items:center;background:var(--pp3-surface-2);padding:12px;overflow:hidden }
@media(min-width:640px){ .pp3-vs-img { height:160px } }
.pp3-vs-img img { max-width:85%;max-height:85%;width:auto;height:auto;object-fit:contain }
.pp3-vs-body { padding:12px 14px 16px;flex:1;display:flex;flex-direction:column;gap:4px }
.pp3-vs-brand { font-size:11px;color:var(--pp3-ink-mute);font-weight:600;text-transform:uppercase;letter-spacing:.04em }
.pp3-vs-name { font-size:13px;font-weight:700;color:var(--pp3-ink);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em }
@media(min-width:640px){ .pp3-vs-name { font-size:15px } }
.pp3-vs-price-row { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px }
.pp3-vs-price { font-size:18px;font-weight:800;color:var(--pp3-green);letter-spacing:-.015em;line-height:1 }
@media(min-width:640px){ .pp3-vs-price { font-size:22px } }
.pp3-vs-stat { font-size:11px;color:var(--pp3-ink-mute);margin-top:2px }
.pp3-vs-cta { font-size:12px;font-weight:700;color:var(--pp3-green-700);margin-top:auto;padding-top:10px }
.pp3-vs-divider { display:flex;align-items:center;justify-content:center;background:var(--pp3-surface-2);flex-shrink:0 }
.pp3-vs-vs-word { font-size:10px;font-weight:800;color:var(--pp3-ink-mute);letter-spacing:.08em;writing-mode:vertical-rl }

/* VS comparison table */
.pp3-vs-table { width:100%;border-collapse:collapse;font-size:13px;margin:20px 0 28px;border:1px solid var(--pp3-border);border-radius:var(--pp3-r-md);overflow:hidden }
.pp3-vs-table th { font-size:11px;font-weight:700;color:var(--pp3-ink-mute);text-transform:uppercase;letter-spacing:.04em;padding:10px 14px;background:var(--pp3-surface-2);text-align:left }
.pp3-vs-table th:not(:first-child) { text-align:right;color:var(--pp3-ink) }
.pp3-vs-table td { padding:10px 14px;border-top:1px solid var(--pp3-border);color:var(--pp3-ink-soft) }
.pp3-vs-table td:not(:first-child) { text-align:right;font-weight:600;color:var(--pp3-ink) }
.pp3-vs-table td.pp3-vs-win { color:var(--pp3-green);font-weight:800 }
.pp3-vs-table tr:last-child td { border-bottom:none }

/* VS index page card grid */
.pp3-vs-grid { display:grid;gap:12px;grid-template-columns:1fr;margin:20px 0 32px }
@media(min-width:480px){ .pp3-vs-grid { grid-template-columns:1fr 1fr } }
@media(min-width:900px){ .pp3-vs-grid { grid-template-columns:repeat(3,1fr) } }
.pp3-vs-card { display:flex;flex-direction:column;border:1px solid var(--pp3-border);border-radius:var(--pp3-r-lg);overflow:hidden;background:var(--pp3-surface);text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s }
.pp3-vs-card:hover { transform:translateY(-2px);box-shadow:var(--pp3-shadow);border-color:var(--pp3-ink-faint) }
.pp3-vs-card-imgs { display:grid;grid-template-columns:1fr auto 1fr;height:100px;background:var(--pp3-surface-2) }
@media(min-width:480px){ .pp3-vs-card-imgs { height:120px } }
.pp3-vs-card-img { display:grid;place-items:center;padding:10px;overflow:hidden }
.pp3-vs-card-img img { max-width:90%;max-height:90%;width:auto;height:auto;object-fit:contain }
.pp3-vs-card-img-placeholder { display:grid;place-items:center;padding:10px;background:var(--pp3-surface-2) }
.pp3-vs-card-img-placeholder span { font-size:10px;font-weight:700;color:var(--pp3-ink-mute);text-align:center;line-height:1.2 }
.pp3-vs-card-vs-col { display:flex;align-items:center;justify-content:center;background:var(--pp3-surface);border-left:1px solid var(--pp3-border);border-right:1px solid var(--pp3-border);width:28px }
.pp3-vs-card-vs-col span { font-size:9px;font-weight:800;color:var(--pp3-ink-mute);letter-spacing:.06em;writing-mode:vertical-rl }
.pp3-vs-card-body { padding:12px 14px 14px;flex:1 }
.pp3-vs-card-title { font-size:13px;font-weight:700;color:var(--pp3-ink);line-height:1.25 }
@media(min-width:480px){ .pp3-vs-card-title { font-size:14px } }
.pp3-vs-card-sub { font-size:12px;color:var(--pp3-ink-mute);margin-top:4px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden }
.pp3-vs-card-foot { padding:10px 14px;border-top:1px solid var(--pp3-border);display:flex;justify-content:space-between;align-items:center }
.pp3-vs-card-cta { font-size:12px;font-weight:700;color:var(--pp3-green-700) }

/* Updated deal row item to include value score */
.pp3-deal-row-price { display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto;min-width:80px }

/* For/Flavor/Size/Best product listing page (pp3-cat-product-list) */
.pp3-cat-product-section { margin:28px 0 }
.pp3-cat-product-section h2 { font-size:20px;font-weight:800;color:var(--pp3-ink);letter-spacing:-.01em;margin-bottom:16px }
.pp3-cat-stats-row { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px }
.pp3-cat-section-lede { font-size:15px;color:var(--pp3-ink-soft);margin-bottom:20px;max-width:65ch }

/* Best page static grid */
.pp3-best-grid { display:grid;gap:12px;grid-template-columns:1fr }
@media(min-width:640px){ .pp3-best-grid { grid-template-columns:1fr 1fr } }
@media(min-width:1024px){ .pp3-best-grid { grid-template-columns:repeat(3,1fr) } }

/* VS card wrapper and footer (used by vs/index.html) */
.pp3-vs-card-img-area { overflow:hidden }
.pp3-vs-card-imgs--empty { background:var(--pp3-surface-2);display:flex;align-items:center;justify-content:center }
.pp3-vs-card-footer { padding:8px 14px 12px;border-top:1px solid var(--pp3-border);font-size:12px;font-weight:700;color:var(--pp3-green-700) }

/* ── Legacy V2 section wrappers — used in for/, size/, flavor/ pages (style.css not loaded) ── */
.pp3 .section { padding: var(--pp3-s-7) 0 }
.pp3 .section--no-top { padding-top: 0 }
.pp3 .sec-head { display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--pp3-s-5) }
.pp3 .sec-head h2 { font-size:20px;font-weight:800;color:var(--pp3-ink);letter-spacing:-.01em }
.pp3 .sec-head a { font-size:14px;font-weight:600;color:var(--pp3-green) }

/* ── Category tiles (ctile / cgrid) — used in for/, size/, flavor/ "Related" sections ── */
.pp3 .cgrid { display:grid;grid-template-columns:1fr;gap:10px }
@media(min-width:480px){ .pp3 .cgrid { grid-template-columns:1fr 1fr } }
@media(min-width:900px){ .pp3 .cgrid { grid-template-columns:repeat(3,1fr) } }
.pp3 .ctile { display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--pp3-surface);border:1px solid var(--pp3-border);border-radius:var(--pp3-r-lg);text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s }
.pp3 .ctile:hover { border-color:var(--pp3-green);box-shadow:0 4px 20px rgba(22,163,74,.1);transform:translateY(-1px) }
.pp3 .ctile-name { font-size:14px;font-weight:700;color:var(--pp3-ink);margin-bottom:2px }
.pp3 .ctile-sub { font-size:12px;color:var(--pp3-ink-mute);line-height:1.4 }
.pp3 .ctile-arrow { margin-left:auto;font-size:20px;font-weight:300;color:var(--pp3-green);flex-shrink:0 }

/* ── Live prices coming soon — API integration pending ── */

/* Product pages: hide price box and retailer rows entirely */
.pp3-cheapest { display:none }
.pp3-retailer { display:none }
.pp3-pdp-two-col:not(:has(*)) { display:none }
#pp3-sticky,.pp3-sticky { display:none !important }

/* Category/listing rows: hide price column + retailer tag */
.pp3-deal-row-price,
.pp3-deal-row-foot,
.pp3-deal-row-retailer { display:none }
.pp3-deal-row-item { align-items:center }
.pp3-deal-row-body { flex:1 }

/* Deal cards: hide price, retailer, savings */
.pp3-deal-card-price,
.pp3-deal-card-retailer,
.pp3-deal-card-foot { display:none }

/* Global: hide freshness chips, % badges, savings pills everywhere */
.pp3-savings-pill,
.pp3-pct-off-badge,
.pp3-freshness { display:none !important }

/* "Also like" strip: hide Compare price text */
.pp3-also-price { display:none }

/* Coming-soon teaser block (homepage) */
.pp3-prices-soon {
  display:flex;
  align-items:center;
  gap:20px;
  padding:28px 32px;
  background:var(--pp3-surface);
  border:1.5px solid var(--pp3-border);
  border-radius:var(--pp3-r-lg);
  width:100%;
  box-sizing:border-box;
}
.pp3-prices-soon-icon { color:var(--pp3-green);flex-shrink:0 }
.pp3-prices-soon-body { display:flex;flex-direction:column;gap:6px }
.pp3-prices-soon-body strong { font-size:17px;font-weight:700;color:var(--pp3-ink) }
.pp3-prices-soon-body span { font-size:14px;color:var(--pp3-ink-mute);line-height:1.5 }
@media(max-width:599px){
  .pp3-prices-soon { flex-direction:column;text-align:center;padding:24px 20px;gap:14px }
}

/* Fix: hide decorative background images on mobile category tiles to prevent overlap with text */
@media (max-width: 767px) {
  .pp3-cat-tile-img { display: none !important; }
}

/* Extra safety: hide all individual price/retailer elements regardless of parent */
.pp3-retailer-price,
.pp3-retailer-price-num,
.pp3-retailer-logo,
.pp3-retailer-cta,
.pp3-deal-row-price-num,
.pp3-deal-row-price-old,
.pp3-deal-row-retailer-label { display:none !important }

/* vs pages: hide comparison price rows */
.pp3-vs-price,
.pp3-vs-price-row { display:none !important }

/* best/ pages: hide JS-injected and static price spans */
.pp-card-price,
.pp-card-price-unverified { display:none !important }

/* ── Launch announcement bar ── */
.pp3-announce {
  background:var(--pp3-green);color:#fff;
  text-align:center;padding:10px 16px;
  font-size:13px;font-weight:600;letter-spacing:.01em;line-height:1.4;
}
.pp3-announce a { color:#fff;text-decoration:underline;text-underline-offset:3px;opacity:.9 }
.pp3-announce a:hover { opacity:1 }

/* ── Coming-soon guide page template ── */
.pp3-soon-wrap {
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:80px 20px 100px;gap:24px;max-width:540px;margin:0 auto;
}
.pp3-soon-icon { color:var(--pp3-green) }
.pp3-soon-title {
  font-size:clamp(22px,4vw,32px);font-weight:800;color:var(--pp3-ink);
  letter-spacing:-.02em;line-height:1.2;
}
.pp3-soon-desc { font-size:16px;color:var(--pp3-ink-mute);line-height:1.6 }
.pp3-soon-links { display:flex;flex-wrap:wrap;gap:10px;justify-content:center }
@media(max-width:479px){
  .pp3-soon-wrap { padding:60px 16px 80px }
  .pp3-soon-links .pp3-btn { width:100% }
}

/* ── COMPREHENSIVE PRICE HIDE — v2 (all classes, all pages) ──────────────── */
.pp3-deal-row-price,
.pp3-deal-row-price-num,
.pp3-deal-row-price-old,
.pp3-deal-row-retailer-label,
.pp3-deal-card-price,
.pp3-deal-card-foot,
.pp3-deal-card-retailer,
.pp3-retailer-price,
.pp3-retailer-price-num,
.pp3-retailer-price-hidden,
.pp3-retailer-logo,
.pp3-retailer-cta,
.pp3-cheapest-price,
.pp3-cheapest-price--placeholder,
.pp3-alt-price,
.pp3-alt-price-num,
.pp3-alt-price-unverified,
.pp3-sticky-price,
.pp3-savings,
.pp3-savings-pill,
.pp3-pct-off-badge,
.pp3-freshness,
.pp3-also-price,
.pp3-vs-price,
.pp3-vs-price-row,
.pp-card-price,
.pp-card-price-unverified,
.pp3-announce { display:none !important }

/* ── Extra hides found in full audit ────────────────────────────────────── */
/* Product pages: hide entire "Cheapest today" block */
.pp3-cheapest,
.pp3-cheapest-head { display:none !important }

/* Deal rows: hide price column container + retailer footer */
.pp3-deal-row-price,
.pp3-deal-row-foot,
.pp3-deal-row-retailer { display:none !important }

/* Retailer section on product detail pages */
.pp3-retailers-section,
.pp3-retailer-row { display:none !important }

/* Review card snippets: hide price mentions in editorial card descriptions */
.review-card p { display:none !important }