/* ==========================================================================
   DIVEIN Price Grid - standalone plugin stylesheet
   --------------------------------------------------------------------------
   Ported verbatim from the Claude Design handoff (pricegrid.css), rewired
   onto the DIVEIN foundation-token system (lib/colors_and_type.css).
   STAGING-ONLY - price-comparison POC, never shipped to production.

   Structure of this file:
     1. :root fallback - the FULL DIVEIN token set, copied verbatim from
        colors_and_type.css so the grid renders correctly even if the theme
        (or the separately-loaded colors_and_type.css) hasn't defined them.
        The plugin loads colors_and_type.css FIRST; these are belt-and-braces.
     2. The complete ported Price Grid CSS, scoped under .pg-root.
     3. A mobile breakpoint (<=600px) added for the real responsive site -
        the source had none for the row layout.

   Token-fidelity note: the source referenced var(--radius-md) twice
   (.pg-ed, .pg-icard) but colors_and_type.css never defines --radius-md.
   To honour the "only real tokens" rule, both were mapped to the closest
   existing scale step, var(--radius-inner-4) (11px) - the same radius the
   design already uses on the neighbouring card surfaces. No tokens invented.

   Every var(--*) used below resolves to a token declared in :root here
   (copied from colors_and_type.css) or to a --pg-* tweak prop set on .pg-root.
   ========================================================================== */

/* ==========================================================================
   1. DIVEIN FOUNDATION TOKENS - fallback (verbatim from colors_and_type.css)
   ========================================================================== */
:root {
  /* ---------------------------------------------------------
     PRIMARY BRAND COLORS - the 7 core hues
     --------------------------------------------------------- */
  --navy:       #07275A;  /* primary brand anchor */
  --light-blue: #6BB3D9;  /* secondary / ocean */
  --yellow:     #E8C547;  /* sunlight accent */
  --green:      #5A9B8A;  /* sea-glass accent */
  --red:        #D46B6B;  /* coral accent */
  --orange:     #E89B5C;  /* sand accent */
  --beige:      #FAF6F0;  /* warm paper surface */

  /* ---------------------------------------------------------
     COLOR SCALES - 5 (ultra-light) → 900 (darkest)
     --------------------------------------------------------- */
  /* Navy / Blue - anchor #07275A (900) */
  --blue-5:#F9FAFB; --blue-50:#E8EEF4; --blue-100:#C7D4E3; --blue-200:#A3B8D0;
  --blue-300:#7E9CBC; --blue-400:#6186AC; --blue-500:#456F9B; --blue-600:#365887;
  --blue-700:#264270; --blue-800:#172D58; --blue-900:#07275A;

  /* Light Blue - anchor #6BB3D9 (500) */
  --lightblue-5:#FAFCFD; --lightblue-50:#EBF5FA; --lightblue-100:#D0E8F3; --lightblue-200:#B2D9EC;
  --lightblue-300:#93C9E4; --lightblue-400:#7CBFDF; --lightblue-500:#6BB3D9; --lightblue-600:#549CC4;
  --lightblue-700:#3E82A9; --lightblue-800:#2A678A; --lightblue-900:#184D6B;

  /* Yellow - anchor #E8C547 (500) */
  --yellow-5:#FEFDF9; --yellow-50:#FDF9E8; --yellow-100:#FAF0C5; --yellow-200:#F6E69F;
  --yellow-300:#F1DB78; --yellow-400:#EDD05A; --yellow-500:#E8C547; --yellow-600:#D4AF2E;
  --yellow-700:#B8941F; --yellow-800:#917316; --yellow-900:#6A530F;

  /* Green - anchor #5A9B8A (500) */
  --green-5:#FAFCFB; --green-50:#ECF4F2; --green-100:#D2E5E0; --green-200:#B5D4CC;
  --green-300:#97C3B7; --green-400:#7FB5A6; --green-500:#5A9B8A; --green-600:#4A8575;
  --green-700:#3A6E60; --green-800:#2B574B; --green-900:#1D4037;

  /* Red - anchor #D46B6B (500) */
  --red-5:#FEFBFB; --red-50:#FBEFEF; --red-100:#F5D7D7; --red-200:#EDBCBC;
  --red-300:#E4A0A0; --red-400:#DC8787; --red-500:#D46B6B; --red-600:#C45454;
  --red-700:#A94242; --red-800:#873434; --red-900:#642626;

  /* Orange - anchor #E89B5C (500) */
  --orange-5:#FEFCFA; --orange-50:#FDF4EC; --orange-100:#FAE4D1; --orange-200:#F5D1B3;
  --orange-300:#F0BD94; --orange-400:#ECAC78; --orange-500:#E89B5C; --orange-600:#D4854A;
  --orange-700:#B86D38; --orange-800:#96552A; --orange-900:#6E3E1E;

  /* Beige - anchor #FAF6F0 (50) */
  --beige-5:#FEFDFC; --beige-50:#FAF6F0; --beige-100:#F5EFE6; --beige-200:#EDE5D8;
  --beige-300:#E2D7C6; --beige-400:#D4C5AE; --beige-500:#C4B193; --beige-600:#A99574;
  --beige-700:#8A7759; --beige-800:#685940; --beige-900:#473C2B;

  /* Gray - warm neutral */
  --gray-5:#FDFDFD; --gray-50:#F8F8F7; --gray-100:#EEEEEC; --gray-200:#DFDEDA;
  --gray-300:#CCCBC6; --gray-400:#ADABA4; --gray-500:#8E8C84; --gray-600:#6E6C65;
  --gray-700:#52504A; --gray-800:#373632; --gray-900:#1E1D1B;

  /* ---------------------------------------------------------
     SEMANTIC COLOR TOKENS - prefer these in components
     --------------------------------------------------------- */
  --color-primary: var(--blue-900);
  --color-primary-hover: var(--blue-800);
  --color-primary-light: var(--blue-600);
  --color-primary-muted: var(--blue-100);

  --color-secondary: var(--lightblue-500);
  --color-secondary-hover: var(--lightblue-600);
  --color-secondary-light: var(--lightblue-200);
  --color-secondary-muted: var(--lightblue-50);

  --color-accent-yellow: var(--yellow-500);
  --color-accent-green: var(--green-500);
  --color-accent-red: var(--red-500);
  --color-accent-orange: var(--orange-500);

  --color-background: #FFFFFF;
  --color-background-alt: var(--gray-50);
  --color-surface: #FFFFFF;
  --color-surface-muted: var(--beige-100);
  --color-surface-hover: var(--gray-100);

  --color-border: var(--gray-200);
  --color-border-muted: var(--beige-200);
  --color-border-strong: var(--gray-400);
  --color-border-focus: var(--lightblue-500);

  --color-text: var(--gray-900);
  --color-text-strong: var(--blue-900);
  --color-text-muted: var(--gray-600);
  --color-text-placeholder: var(--gray-500);
  --color-text-inverse: #FFFFFF;

  --color-link: var(--blue-900);
  --color-link-hover: var(--blue-600);
  --color-focus: var(--lightblue-500);

  --color-success: var(--green-500);   --color-success-bg: var(--green-5);   --color-success-border: var(--green-200);
  --color-warning: var(--orange-500);  --color-warning-bg: var(--orange-5);  --color-warning-border: var(--orange-200);
  --color-error:   var(--red-500);     --color-error-bg: var(--red-5);       --color-error-border: var(--red-200);
  --color-info:    var(--lightblue-500); --color-info-bg: var(--lightblue-5); --color-info-border: var(--lightblue-200);

  --color-white: #FFFFFF;
  --color-black: #000000;

  /* ---------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------- */
  --font-display: 'Montserrat', system-ui, sans-serif;  /* headings */
  --font-body:    'Open Sans', system-ui, sans-serif;   /* body */
  --font-mono:    'JetBrains Mono', monospace;           /* code */

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px - H4 */
  --text-2xl: 1.5rem;    /* 24px - H3 */
  --text-3xl: 1.75rem;   /* 28px - H2 */
  --text-4xl: 2.25rem;   /* 36px - H1 */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --leading-tight: 1.2;   --leading-snug: 1.25;  --leading-normal: 1.35;
  --leading-relaxed: 1.4; --leading-loose: 1.5;

  --tracking-tighter: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0;
  --tracking-wide: 0.01em; --tracking-wider: 0.05em; --tracking-widest: 0.1em;

  /* ---------------------------------------------------------
     SPACING / RADII / SHADOWS
     --------------------------------------------------------- */
  --space-2xs: 0.125rem; --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem;
  --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem;

  --radius: 15px;
  --radius-inner-2: 13px; --radius-inner-4: 11px; --radius-inner-8: 7px;
  --radius-sm: 8px; --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(30,29,27,0.05);
  --shadow-md: 0 4px 12px rgba(30,29,27,0.08);
  --shadow-lg: 0 8px 24px rgba(30,29,27,0.12);
  --shadow-primary: 0 4px 16px rgba(7,39,90,0.2);
  --shadow-glow: 0 0 20px rgba(107,179,217,0.3);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  --max-w-prose: 65ch; --max-w-container: 1200px; --max-w-content: 800px; --max-w-narrow: 480px;
  --content-max-width: 45rem;

  --icon-xs: 14px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px;

  --opacity-muted: 0.6; --opacity-subtle: 0.7; --opacity-light: 0.8; --opacity-overlay: 0.5;

  --z-base: 0; --z-dropdown: 10; --z-sticky: 100;
  --z-modal-backdrop: 900; --z-modal: 1000; --z-tooltip: 1100; --z-toast: 1200;
}

/* ==========================================================================
   2. DIVEIN PRICE GRID - module + siblings (ported, scoped under .pg-root)
   --------------------------------------------------------------------------
   .pg-root carries tweak-driven props:
     --pg-accent, --pg-radius, --pg-rowpad, --pg-price-size
   data attrs: data-badge, data-logos, data-density, data-marker
   ========================================================================== */
.pg-root {
  /* Tweak-driven props. Defaults below reflect the shipped "comfy" density:
     accent = the design's final sea-glass #4A8575 (--green-600),
     rowpad 22px, price 25px. (Source baseline was the navy variant; these are
     the production-comfy defaults the design ships with out of the box.) */
  --pg-accent: var(--green-600);
  --pg-radius: 14px;
  --pg-rowpad: 22px;
  --pg-price-size: 25px;
  --pg-accent-soft: color-mix(in srgb, var(--pg-accent) 8%, #fff);
  --pg-accent-line: color-mix(in srgb, var(--pg-accent) 30%, #fff);

  /* ----------------------------------------------------------------------
     Phase 1 native rebuild (T3): theme Content Egg's NATIVE block CSS to
     DIVEIN by REDEFINING its --cegg-* custom properties on this wrapper
     (CE's cegg-products CSS consumes them; default --cegg-primary is the
     Bootstrap blue #0d6efd). We map them onto DIVEIN tokens so any native CE
     chrome rendered inside our override template (the disclaimer block, the
     "see all prices" popup, the price-history Chart.js block) matches the
     grid. We do NOT fork CE's CSS - redefining the vars is the documented
     native-first theming path (ADR-006 / constitution rule 13).
     ---------------------------------------------------------------------- */
  --cegg-primary:       var(--green-600);   /* DIVEIN sea-glass: primary CTA / buy button */
  --cegg-secondary:     var(--navy);        /* navy brand anchor */
  --cegg-secondary-rgb: 7, 39, 90;          /* RGB of --navy #07275A for CE's rgba() uses */
  --cegg-success:       var(--green-700);   /* in-stock / positive */
  --cegg-danger:        var(--red-600);     /* out-of-stock / savings badge */
  --cegg-warning:       var(--orange-600);  /* caution / check-availability */
  --cegg-info:          var(--lightblue-600); /* informational */
  --cegg-light:         var(--gray-50);     /* light surface */
  --cegg-dark:          var(--navy);        /* dark surface / text-emphasis */

  font-family: var(--font-body);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  /* The design canvas rendered each surface in a ~700px artboard. On a real
     full-width WP content column the 2-col rows stretch and the price/CTA float
     far from the shop name. Constrain to a contained card to match the mockup. */
  --pg-max-width: 680px;
  max-width: var(--pg-max-width);
  margin-inline: auto;
}
.pg-root *, .pg-root *::before, .pg-root *::after { box-sizing: border-box; }

/* ============================================================
   THEME-ISOLATION ARMOR
   ------------------------------------------------------------
   The module is injected into the Foxiz theme's `.entry-content.rbct`,
   whose global resets bleed into our elements (it forces 40px padding on
   every <button>, underlines every <a>, restyles lists/inputs, etc.).
   The design was authored in a clean canvas with none of that. We neutralise
   the theme's element-level resets for everything inside `.pg-root` so each
   component starts from the design's baseline, then the component rules below
   style up from there. This is the systemic fix for "fonts/sizes/spacing
   don't match" - not per-element patches.
   ============================================================ */
.pg-root button,
.pg-root a,
.pg-root input,
.pg-root select,
.pg-root textarea,
.pg-root ol,
.pg-root ul,
.pg-root li,
.pg-root p,
.pg-root h1, .pg-root h2, .pg-root h3, .pg-root h4, .pg-root h5, .pg-root h6 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: inherit;
  text-transform: none;
  list-style: none;
}
.pg-root a { text-decoration: none; }
.pg-root button { cursor: pointer; -webkit-appearance: none; appearance: none; }
.pg-root img, .pg-root svg { max-width: none; } /* theme often forces img{max-width:100%} */
/* The wrapper itself must not inherit the theme paragraph bottom-margin. */
.pg-root { margin-block: 0; }

/* Headings must use the DIVEIN display font (Montserrat). The design relied on a
   global `h1–h6 { font-family: var(--font-display) }` from the foundation token
   file, which isn't guaranteed to be loaded on a theme page - so the theme's body
   font bled into every product title. Pin it explicitly here; per-element rules
   below set size/weight on top. */
.pg-root h1, .pg-root h2, .pg-root h3, .pg-root h4, .pg-root h5, .pg-root h6 {
  font-family: var(--font-display);
  font-weight: 700;
}

/* Hide-hook used by the server render + JS for collapsed offer rows, inactive
   shop-page tab panes, and the pre-submit price-watch success node. Defining it
   is load-bearing: without it "Show all", tab switching, and the watch success
   state all break (everything shows at once). */
.pg-root .dpg-hidden { display: none !important; }
.pg-root [hidden] { display: none !important; }

/* ---- shared price atoms ---- */
.pg-root .pg-price  { font-family: var(--font-display); font-weight: 800; color: var(--color-text-strong); letter-spacing: -.02em; }
.pg-root .pg-strike { color: var(--gray-500); text-decoration: line-through; font-weight: 600; }
.pg-root .pg-save   { color: var(--gray-600); font-weight: 600; }
.pg-root .pg-rrp    { color: var(--gray-500); font-weight: 600; }

/* ---- 3-state stock ---- */
.pg-root .pg-stk { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; }
.pg-root .pg-stk.in  { color: var(--green-700); }
.pg-root .pg-stk.out { color: var(--gray-500); }
.pg-root .pg-stk.unk { color: var(--orange-700); }

/* ---- the one unique DIVEIN verified badge (grid + footer) ---- */
.pg-root .pg-dvbadge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pg-root .pg-dvbadge svg { display: block; }
.pg-root .pg-trust-static { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--gray-600); white-space: nowrap; }
.pg-root .pg-trust-static svg { color: var(--green-700); }

/* ---- footer trust signal: the DIVEIN verified promise - quiet, recedes below the watch CTA ---- */
.pg-root .pg-trustsig { display: flex; align-items: flex-start; gap: 9px; padding: 9px 18px; background: #fff; border-top: 1px solid var(--color-border); }
.pg-root .pg-ts-badge { flex-shrink: 0; margin-top: 1px; opacity: .85; }
.pg-root .pg-ts-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pg-root .pg-ts-main { font-family: var(--font-display); font-weight: 600; font-size: 11.5px; color: var(--gray-700); letter-spacing: 0; }
.pg-root .pg-ts-sub { font-size: 10.5px; line-height: 1.4; color: var(--gray-500); text-wrap: pretty; }

/* ---- reputation vs review stars (kept visually distinct) ---- */
.pg-root .pg-rep { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--green-800); }
.pg-root .pg-rep b { font-weight: 700; }
.pg-root .pg-review-stars { display: inline-flex; align-items: center; gap: 6px; }
.pg-root .pg-review-stars em { font-style: normal; font-weight: 600; font-size: 13px; color: var(--color-text-muted); }

.pg-root .pg-recency { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--gray-500); }
.pg-root .pg-recency svg { opacity: .8; }
.pg-root .pg-ship { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--gray-600); }
.pg-root .pg-ship svg { color: var(--green-600); }
.pg-root .pg-spons { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); }
.pg-root .pg-low90 { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--green-700); background: var(--green-50); border-radius: var(--radius-sm); padding: 2px 7px; }

/* ---- CTA buttons: accent is reserved for the PRIMARY (.solid) CTA ---- */
.pg-root .pg-cta { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .01em; border-radius: var(--radius-sm); padding: 10px 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; transition: all var(--transition-fast); border: 1.5px solid var(--gray-300); background: #fff; color: var(--color-text-strong); }
.pg-root .pg-cta:hover { background: var(--gray-50); border-color: var(--gray-400); }
.pg-root .pg-cta.solid { background: var(--pg-accent); color: #fff; border-color: var(--pg-accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--pg-accent) 22%, transparent); }
.pg-root .pg-cta.solid:hover { filter: brightness(1.08); transform: translateY(-1px); background: var(--pg-accent); border-color: var(--pg-accent); }
.pg-root .pg-cta:disabled { background: var(--gray-50); color: var(--gray-400); border-color: var(--gray-200); cursor: not-allowed; box-shadow: none; }
/* Per-offer custom CTA colors (ADR-020): a SEPARATE axis from .solid, which stays reserved
   for the honest cheapest winner (its accent fill + glow + the green Lowest-price marker are
   never applied here). These recolor a non-winner's button per the offer's badge_color. No
   box-shadow, so the winner's solid button stays visually distinct. */
/* Each variant maps 1:1 to the DIVEIN brand CTA tokens declared on .pg-root
   (--cegg-*), NOT invented hex. So the CE badge_color dropdown (success / danger /
   warning / info / primary / secondary / light / dark) always resolves to a real
   brand colour and moves with the design system. */
.pg-root .pg-cta.pg-cta-success   { background: var(--cegg-success);   color: #fff; border-color: var(--cegg-success); }
.pg-root .pg-cta.pg-cta-danger    { background: var(--cegg-danger);    color: #fff; border-color: var(--cegg-danger); }
.pg-root .pg-cta.pg-cta-warning   { background: var(--cegg-warning);   color: #fff; border-color: var(--cegg-warning); }
.pg-root .pg-cta.pg-cta-info      { background: var(--cegg-info);      color: #fff; border-color: var(--cegg-info); }
.pg-root .pg-cta.pg-cta-primary   { background: var(--cegg-primary);   color: #fff; border-color: var(--cegg-primary); }
.pg-root .pg-cta.pg-cta-secondary { background: var(--cegg-secondary); color: #fff; border-color: var(--cegg-secondary); }
.pg-root .pg-cta.pg-cta-dark      { background: var(--cegg-dark);      color: #fff; border-color: var(--cegg-dark); }
.pg-root .pg-cta.pg-cta-light     { background: var(--cegg-light);     color: var(--color-text-strong); border-color: var(--gray-300); }
.pg-root .pg-cta[class*=" pg-cta-"]:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* Custom-offer editorial line shown in the stock-line slot (e.g. a store-finder
   "Find local retailers ..."), replacing the stock label a real priced offer carries. */
.pg-root .pg-stk-note { font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--gray-700); }

/* ============================================================
   THE MODULE - self-contained single-product price block
   ============================================================ */
.pg-root .pg-module { position: relative; background: #fff; border: none; border-radius: var(--pg-radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.pg-root .pg-mod-head { padding: 15px 18px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pg-root .pg-mod-head h3 { margin: 0 0 2px; font-size: var(--text-lg); font-weight: 700; line-height: 1.2; color: var(--color-text-strong); }
.pg-root .pg-mod-head .sub { margin: 0; font-size: 12px; color: var(--color-text-muted); }
.pg-root .pg-mod-head .right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; line-height: 1.15; }
/* "Lowest price right now" - a refined marker accent in DIVEIN ocean light-blue
   (the brand secondary; deliberately NOT yellow, which reads discount-y, and not
   the grid's green which means "lowest"). A SLIM stroke riding low under the
   text, soft tapered ends, a whisper of tilt. mix-blend-mode:multiply keeps the
   navy text crisp on top. Present, but elegant. */
.pg-root .pg-mod-head .right .lbl {
  position: relative;
  display: inline-block;
  align-self: flex-end;
  z-index: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gray-900);
  padding: 1px 2px 3px;
}
.pg-root .pg-mod-head .right .lbl::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -1px; right: -1px;
  bottom: 0px;
  height: 4px;                       /* slim band riding the baseline */
  background: linear-gradient(90deg,
    rgba(124,191,223,0) 0,
    var(--orange-600) 10%,
    var(--orange-400) 90%,
    rgba(124,191,223,0) 100%);       /* DIVEIN sand/orange, soft tapered ends */
  border-radius: 3px;
  transform: rotate(-0.4deg);        /* barely there */
  mix-blend-mode: multiply;
}
.pg-root .pg-mod-head .right .big { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--color-text-strong); }
.pg-root .pg-mod-head .right .sub2 { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* rows - calm 2-column: shop (logo + one meta line) | price + action */
.pg-root .pg-offers { display: flex; flex-direction: column; }
.pg-root .pg-offer { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px; padding: 10px 20px; border-top: 1px solid var(--color-border); transition: background var(--transition-fast); }
.pg-root .pg-offer:hover { background: var(--gray-5); }
.pg-root .pg-offer.lowest { background: color-mix(in srgb, var(--pg-accent) 7%, #fff); box-shadow: inset 3px 0 0 var(--pg-accent); }
.pg-root .pg-offer.lowest:hover { background: color-mix(in srgb, var(--pg-accent) 11%, #fff); }
.pg-root .pg-offer.out { opacity: .5; }

.pg-root .pg-shop { display: flex; align-items: center; gap: 16px; min-width: 0; }

/* shop identity card - one unified surface, logo + trust as a quiet footnote */
.pg-root .pg-shop-id { flex-shrink: 0; width: 128px; display: flex; flex-direction: column; align-items: center; gap: 0; border: 1px solid var(--gray-100); border-radius: var(--radius-sm); background: #fff; padding: 0 0 6px; overflow: hidden; }
.pg-root .pg-logo-chip { width: 100%; height: 38px; padding: 0 10px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* Real retailer logo: fit inside the chip, preserve aspect ratio. */
/* All retailer logos render at a uniform 90px width, height auto (capped to fit
   the chip). Consistent sizing across every shop regardless of source artwork. */
.pg-root .pg-logo-img { width: 90px; height: auto; max-height: 34px; object-fit: contain; display: block; }
.pg-root .pg-shop-name { display: none; font-family: var(--font-display); font-weight: 700; color: var(--color-text-strong); font-size: 13px; padding: 8px 10px 0; }
.pg-root [data-logos="off"] .pg-logo-chip { display: none; }
.pg-root [data-logos="off"] .pg-shop-name { display: block; }

/* trust score - quiet inline, no tinted strip, no border */
.pg-root .pg-score { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 0 8px; font-family: var(--font-body); background: none; border: none; border-top: none; cursor: pointer; transition: opacity var(--transition-fast); }
.pg-root .pg-score:hover { opacity: .7; }
.pg-root .pg-score-num { display: inline-flex; align-items: center; gap: 2px; }
.pg-root .pg-score-num b { font-weight: 700; font-size: 11.5px; color: var(--blue-900); letter-spacing: -.01em; line-height: 1; }
.pg-root .pg-score-star { color: #C8941F; fill: #C8941F; flex-shrink: 0; }
.pg-root .pg-score-cap { font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-400); white-space: nowrap; }

.pg-root .pg-shop-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pg-root .pg-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 12px; color: var(--gray-500); }
.pg-root .pg-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-300); flex-shrink: 0; }
.pg-root .pg-stk { font-weight: 600; white-space: nowrap; }
.pg-root .pg-stk.in  { color: var(--green-700); }
.pg-root .pg-stk.out { color: var(--gray-500); }
.pg-root .pg-stk.unk { color: var(--orange-700); }
.pg-root .pg-deliv { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 10px; font-weight: 500; line-height: 1.35; color: var(--gray-500); }
.pg-root .pg-deliv svg { color: var(--gray-400); margin-top: 1px; flex-shrink: 0; }
.pg-root .pg-deliv.fast { color: var(--gray-500); font-weight: 500; }
.pg-root .pg-deliv.fast svg { color: var(--green-600); }
.pg-root .pg-spons-mark { font-size: 12px; color: #8A8275; font-style: italic; white-space: nowrap; }
/* discreet ad disclosure - a small vertical tab on the row's left edge,
   vertically centered (translateY -50% keeps it centered at any row height). */
.pg-root .pg-spons-chip { position: absolute; top: 50%; left: 0; z-index: 2; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--font-display); font-size: 7px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--gray-500); background: var(--gray-50); border-radius: 0 5px 5px 0; padding: 6px 3px; line-height: 1; pointer-events: none; }

/* Lowest / Best marker - a quiet text cue tied to the price, not a heavy badge */
.pg-root .pg-lowtag { display: inline-flex; align-items: center; gap: 4px; width: fit-content; font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--pg-accent); }
.pg-root .pg-lowtag svg { color: var(--pg-accent); }
.pg-root .pg-mk { display: inline-flex; align-items: center; gap: 4px; }
.pg-root .pg-mk-best { display: none; }
.pg-root [data-marker="best"] .pg-mk-lowest { display: none; }
.pg-root [data-marker="best"] .pg-mk-best { display: inline-flex; }
.pg-root .pg-mod-foot { display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding: 8px 18px; font-size: 11px; color: var(--gray-400); background: #fff; border-top: 1px solid var(--color-border); white-space: nowrap; }
.pg-root .pg-mod-foot svg { opacity: .8; }

/* price + action cluster */
.pg-root .pg-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.pg-root .pg-pricecell { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0; min-width: 104px; }
.pg-root .pg-pricecell .pg-price { font-size: 17px; line-height: 1.05; }
.pg-root .pg-lowtag { white-space: nowrap; }
.pg-root .pg-anchor { display: inline-flex; align-items: baseline; gap: 6px; font-size: 10.5px; white-space: nowrap; margin-bottom: 3px; }

/* Stock label + "Lowest price" marker share one line, with clear space between. */
.pg-root .pg-stockline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pg-root .pg-right .pg-cta { min-width: 112px; }

/* show all */
.pg-root .pg-showall { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px; background: #fff; border: none; border-top: 1px solid var(--color-border); cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--blue-900); transition: background var(--transition-fast); white-space: nowrap; }
.pg-root .pg-showall:hover { background: var(--gray-5); }
.pg-root .pg-showall svg { transition: transform var(--transition-base); }
.pg-root .pg-showall[data-open="1"] svg { transform: rotate(180deg); }

/* price-drop watch - the primary conversion moment: a navy feature card.
   Stacked layout (lead → fields → fine print), rounded 15px, inset slightly
   from the module edges so the rounded corners read as a distinct card. */
.pg-root .pg-sub { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; margin: 14px; background: var(--blue-900); border-radius: 15px; }
/* Standalone watch band (in the buy box, between the grid and the Quick Facts card): drop
   the 14px inset so it aligns flush to the price grid + Quick Facts width above/below; the
   vertical gap moves to the wrapper. The 14px margin above is for the legacy in-module use. */
.pg-root .pg-sub-wrap { margin: var(--space-lg) 0 0; }
.pg-root .pg-sub-wrap .pg-sub { margin: 0; width: 100%; }
.pg-root .pg-sub .lead { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.pg-root .pg-sub .lead .ic { width: 36px; height: 36px; border-radius: var(--radius-full); background: rgba(255,255,255,.16); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pg-root .pg-sub .lead .t { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.78); align-self: center; }
.pg-root .pg-sub .lead .t b { color: #fff; display: block; font-size: 16px; letter-spacing: -.01em; margin-bottom: 1px; }
/* Highlighted keywords inside the navy watch band. Same refined language as the
   header, in DIVEIN ocean light-blue. White keyword text (legible on navy) over
   a SLIM bright-ocean marker stroke - a precise accent, on-brand, not a slab. */
.pg-root .pg-sub .lead .t .pg-hl {
  position: relative;
  z-index: 0;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.pg-root .pg-sub .lead .t .pg-hl::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -1px; right: -1px;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(124,191,223,0) 0,
    var(--orange-600) 10%,
    var(--orange-400) 90%,
    rgba(124,191,223,0) 100%);
  border-radius: 3px;
  transform: rotate(-0.4deg);
}

/* Grid: name | email | button on row 1; the fine-print sits on row 2 under the
   email column. */
.pg-root .pg-sub-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.pg-root .pg-input { font-family: var(--font-body); font-size: 14px; color: var(--color-text); background: #fff; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); padding: 11px 13px; min-width: 0; transition: all var(--transition-fast); }
.pg-root .pg-input:focus { outline: none; border-color: var(--lightblue-500); box-shadow: 0 0 0 3px var(--lightblue-100); }

/* ---- Floating-label field ---- */
.pg-root .pg-field { position: relative; display: block; min-width: 0; }
/* The input: solid white so it stands out on the navy band; reserve top room
   for the floated label. */
.pg-root .pg-sub .pg-input { width: 100%; background: #fff; border: 1.5px solid #fff; color: var(--color-text-strong); box-shadow: 0 1px 2px rgba(7,39,90,.25); padding: 17px 13px 7px; }
.pg-root .pg-sub .pg-input::placeholder { color: transparent; }   /* label is the cue */
.pg-root .pg-sub .pg-input:focus { border-color: var(--lightblue-500); box-shadow: 0 0 0 3px var(--lightblue-100); }
/* The label sits centred over the empty field, then floats to the top-left. */
.pg-root .pg-field > label {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-size: 14px; color: var(--gray-500);
  pointer-events: none; transition: top .16s ease, transform .16s ease, font-size .16s ease, color .16s ease;
}
/* Float up when the field has focus OR is filled (:not(:placeholder-shown)). */
.pg-root .pg-field > .pg-input:focus + label,
.pg-root .pg-field > .pg-input:not(:placeholder-shown) + label {
  top: 9px; transform: translateY(0); font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--gray-600);
}
/* Email validity: a small check / cross at the right edge, toggled by JS. */
.pg-root .pg-field-mark { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.pg-root .pg-field-mark::before { content: ""; position: absolute; inset: 0; background-repeat: no-repeat; background-position: center; background-size: contain; }
.pg-root .pg-field.is-valid .pg-field-mark { opacity: 1; }
.pg-root .pg-field.is-valid .pg-field-mark::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A6E60' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.pg-root .pg-field.is-invalid .pg-input { border-color: var(--red-400); }
.pg-root .pg-field.is-invalid .pg-field-mark { opacity: 1; }
.pg-root .pg-field.is-invalid .pg-field-mark::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C45454' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
/* keep room for the validity mark so it never overlaps typed text */
.pg-root .pg-field[data-pg-email-field] .pg-input { padding-right: 34px; }
/* Notify button: brand yellow so the CTA pops against the navy + white fields.
   align-self:stretch makes it fill the row height so it matches the input
   fields; flex-centring keeps the label centred at that taller height. */
.pg-root .pg-sub-btn { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; letter-spacing: .01em; color: var(--blue-900); background: var(--yellow-500); border: none; border-radius: var(--radius-sm); padding: 0 20px; cursor: pointer; white-space: nowrap; flex-shrink: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); }
.pg-root .pg-sub-btn:hover { background: var(--yellow-400); transform: translateY(-1px); }
.pg-root .pg-sub-btn:disabled { background: rgba(255,255,255,.4); color: rgba(7,39,90,.55); cursor: not-allowed; transform: none; }
/* fine print under the fields */
/* Sits on row 2, under the email column (grid col 2). */
.pg-root .pg-sub-fine { grid-column: 2; grid-row: 2; margin: -4px auto -6px; font-size: 11px; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 5px; }
/* required consent checkbox row (Task H1) - spans the full form width */
.pg-root .pg-sub-consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 11px; line-height: 1.45; color: rgba(255,255,255,.6); cursor: pointer; }
.pg-root .pg-sub-consent input[type="checkbox"] { margin: 2px 0 0; flex-shrink: 0; accent-color: var(--yellow-500); cursor: pointer; }
.pg-root .pg-sub-consent a { color: rgba(255,255,255,.7); text-decoration: underline; }
.pg-root .pg-sub-consent a:hover { color: #fff; }
.pg-root .pg-sub-ok { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #fff; }
/* Watch-price (price-alert) result nodes, spanning the full form width below the fields. */
.pg-root .pg-sub-form .pg-sub-ok,
.pg-root .pg-sub-form .pg-sub-err,
.pg-root .pg-sub-form .pg-sub-loading { grid-column: 1 / -1; }
.pg-root .pg-sub-err { font-size: 13px; font-weight: 600; color: var(--yellow-200); }
.pg-root .pg-sub-loading { font-size: 13px; color: rgba(255,255,255,.8); }

/* ============================================================
   ABOUT-THIS-SHOP slide-in (within the module frame)
   ============================================================ */
.pg-root .pg-scrim { position: absolute; inset: 0; background: rgba(7,39,90,.38); opacity: 0; pointer-events: none; transition: opacity var(--transition-base); z-index: 20; }
.pg-root .pg-scrim.show { opacity: 1; pointer-events: auto; }
/* At rest the panel is parked off-screen (translateX 100%). It is pre-rendered
   (for crawlable SEO), so its drop-shadow must NOT exist until it's open - an
   always-on navy shadow on an off-screen panel bleeds back into the module's
   right edge. Shadow + visibility apply only on .show. */
.pg-root .pg-slidein { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 86%); background: #fff; transform: translateX(100%); transition: transform var(--transition-base); z-index: 21; display: flex; flex-direction: column; visibility: hidden; }
.pg-root .pg-slidein.show { transform: translateX(0); visibility: visible; box-shadow: -8px 0 28px rgba(7,39,90,.18); }

/* ---- Portalled state: drawer anchored to the VIEWPORT (full browser height,
   right edge), not the module box. The JS moves the scrim + panel into a
   body-level `.pg-root.pg-portal` host on open. ---- */
.pg-portal { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; max-width: none; margin: 0; }
.pg-portal .pg-scrim { position: fixed; inset: 0; z-index: 1; }
.pg-portal .pg-slidein { position: fixed; top: 0; right: 0; bottom: 0; height: 100vh; height: 100dvh; width: min(380px, 92vw); z-index: 2; }
/* Lock background scroll while the drawer is open. */
.pg-scroll-lock, .pg-scroll-lock body { overflow: hidden !important; }
.pg-root .pg-si-head { padding: 16px 18px; border-bottom: 1px solid var(--color-border); display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pg-root .pg-si-close { border: none; background: var(--gray-50); width: 28px; height: 28px; border-radius: var(--radius-full); cursor: pointer; color: var(--gray-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pg-root .pg-si-close:hover { background: var(--gray-100); color: var(--gray-900); }
.pg-root .pg-si-body { padding: 16px 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.pg-root .pg-si-sec h5 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-500); }
.pg-root .pg-si-sec p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--gray-700); }
.pg-root .pg-si-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-800); }
/* editorial "DIVEIN's take" - a distinct place for staff commentary.
   NOTE: source used var(--radius-md) (undefined in tokens) → mapped to
   var(--radius-inner-4) (11px), the closest existing scale step. */
.pg-root .pg-ed { background: color-mix(in srgb, var(--blue-900) 4%, #fff); border: 1px solid color-mix(in srgb, var(--blue-900) 12%, transparent); border-radius: var(--radius-inner-4); padding: 13px 15px; }
.pg-root .pg-ed h5 { color: var(--blue-900) !important; }
.pg-root .pg-ed-note { font-size: 13.5px !important; line-height: 1.55 !important; color: #2C2A26 !important; text-wrap: pretty; }
.pg-root .pg-ed-by { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--gray-500); }
.pg-root .pg-ed-by svg { color: var(--blue-900); opacity: .7; }
.pg-root .pg-ed-by a { color: inherit; text-decoration: underline; }
.pg-root .pg-si-line svg { color: var(--green-600); }
.pg-root .pg-si-rating-row { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--gray-800); }
.pg-root .pg-si-rating-row svg { color: var(--yellow-600); }
.pg-root .pg-si-rating-score { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--color-text-strong); line-height: 1; }
.pg-root .pg-si-rating-max { font-size: 12px; color: var(--gray-500); }
.pg-root .pg-si-rating-count { font-size: 12px; color: var(--gray-500); }
.pg-root .pg-rep-big { display: flex; align-items: center; gap: 10px; }
.pg-root .pg-rep-score { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--color-text-strong); line-height: 1; }
.pg-root .pg-rep-of { font-size: 12px; color: var(--gray-500); }
.pg-root .pg-rep-stars2 { color: var(--yellow-600); font-size: 14px; letter-spacing: 1px; }
.pg-root .pg-srcrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--gray-200); font-size: 12.5px; }
.pg-root .pg-srcrow:last-child { border-bottom: none; }
.pg-root .pg-srcrow .nm { color: var(--gray-700); white-space: nowrap; }
.pg-root .pg-srcrow .sc { font-weight: 700; color: var(--color-text-strong); display: inline-flex; align-items: center; gap: 4px; }
.pg-root .pg-srcrow .sc .bar { width: 64px; height: 5px; border-radius: 3px; background: var(--gray-100); overflow: hidden; }
.pg-root .pg-srcrow .sc .bar i { display: block; height: 100%; background: var(--green-500); border-radius: 3px; }
.pg-root .pg-si-visit { margin-top: 2px; }

/* ============================================================
   SEE ALL PRICES modal (within the module frame)
   ============================================================ */
.pg-root .pg-modal-scrim { position: absolute; inset: 0; background: rgba(7,39,90,.4); opacity: 0; pointer-events: none; transition: opacity var(--transition-base); z-index: 30; display: flex; align-items: stretch; }
.pg-root .pg-modal-scrim.show { opacity: 1; pointer-events: auto; }
.pg-root .pg-modal { background: #fff; width: 100%; display: flex; flex-direction: column; }
.pg-root .pg-modal-head { padding: 14px 18px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.pg-root .pg-modal-head h4 { margin: 0; font-size: var(--text-base); font-weight: 700; }
.pg-root .pg-modal-list { overflow-y: auto; }

/* ============================================================
   STICKY "Check prices" demo (article context)
   ============================================================ */
.pg-root .pg-art { position: relative; background: #fff; border-radius: var(--pg-radius); border: 1px solid var(--color-border); overflow: hidden; }
.pg-root .pg-art-body { padding: 22px 24px 70px; }
.pg-root .pg-art-body h2 { font-size: var(--text-xl); margin: 0 0 10px; }
.pg-root .pg-art-body p { font-size: 13.5px; line-height: 1.65; color: var(--gray-700); margin: 0 0 12px; }
.pg-root .pg-art-body .ph { height: 9px; border-radius: 4px; background: var(--gray-100); margin: 7px 0; }
.pg-root .pg-sticky { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-top: 1px solid var(--color-border); padding: 11px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pg-root .pg-sticky .info { display: flex; flex-direction: column; }
.pg-root .pg-sticky .info .nm { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--color-text-strong); }
.pg-root .pg-sticky .info .pr { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.pg-root .pg-sticky .info .pr b { color: var(--green-700); }
.pg-root .pg-sticky .pg-cta { padding: 11px 20px; }

/* ============================================================
   "BEST X" ROUNDUP (multi-product guide layout)
   ============================================================ */
.pg-root .pg-round { display: flex; flex-direction: column; gap: 12px; }
.pg-root .pg-round-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--pg-radius); padding: 14px 18px; transition: box-shadow var(--transition-fast), transform var(--transition-fast); }
.pg-root .pg-round-row:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pg-root .pg-round-rank { width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--blue-900); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 14px; flex-shrink: 0; }
.pg-root .pg-round-info { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pg-root .pg-round-info h4 { margin: 0; font-size: var(--text-base); color: var(--color-text-strong); }
.pg-root .pg-round-info .sub { font-size: 12px; color: var(--color-text-muted); }
.pg-root .pg-rbadge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-sm); white-space: nowrap; }
.pg-root .pg-rbadge.overall { background: var(--yellow-500); color: var(--gray-900); }
.pg-root .pg-rbadge.value   { background: var(--green-600); color: #fff; }
.pg-root .pg-rbadge.premium { background: var(--blue-900); color: #fff; }
.pg-root [data-badge="outline"] .pg-rbadge { background: #fff; box-shadow: inset 0 0 0 1.5px currentColor; }
.pg-root [data-badge="outline"] .pg-rbadge.overall { color: var(--yellow-700); }
.pg-root [data-badge="outline"] .pg-rbadge.value { color: var(--green-700); }
.pg-root [data-badge="outline"] .pg-rbadge.premium { color: var(--blue-900); }
.pg-root .pg-round-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.pg-root .pg-round-right .pg-price { font-size: 18px; }

/* ============================================================
   SHOP PRODUCT PAGE - PriceSpy-style (tabs + insights + history)
   ============================================================ */
.pg-root .pg-shoppage { background: #fff; border: 1px solid var(--color-border); border-radius: var(--pg-radius); overflow: hidden; }
.pg-root .pg-sp-head { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 18px 20px; align-items: center; border-bottom: 1px solid var(--color-border); }
.pg-root .pg-sp-img { width: 88px; height: 88px; border-radius: var(--radius-inner-4); background: radial-gradient(120% 120% at 30% 22%, #fff, var(--gray-50) 60%, var(--gray-100)); border: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: center; color: var(--lightblue-700); }
.pg-root .pg-sp-head h3 { margin: 0 0 4px; font-size: var(--text-lg); font-weight: 700; }
.pg-root .pg-sp-head .sub { margin: 0 0 7px; font-size: 12.5px; color: var(--color-text-muted); }
.pg-root .pg-sp-headline { display: flex; align-items: baseline; gap: 8px; }
.pg-root .pg-sp-headline .pg-price { font-size: 24px; }
.pg-root .pg-sp-headline .lab { font-size: 11.5px; color: var(--gray-500); }
.pg-root .pg-tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--color-border); background: var(--gray-5); }
.pg-root .pg-tab { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--color-text-muted); background: none; border: none; border-bottom: 2px solid transparent; padding: 12px 14px; cursor: pointer; transition: all var(--transition-fast); }
.pg-root .pg-tab:hover { color: var(--blue-900); }
.pg-root .pg-tab.on { color: var(--blue-900); border-bottom-color: var(--blue-900); }
.pg-root .pg-tabpane { padding: 18px 20px 20px; }
.pg-root .pg-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* NOTE: source used var(--radius-md) (undefined in tokens) → mapped to
   var(--radius-inner-4) (11px), the closest existing scale step. */
.pg-root .pg-icard { background: var(--gray-5); border: 1px solid var(--color-border); border-radius: var(--radius-inner-4); padding: 14px; }
.pg-root .pg-icard .lab { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500); margin: 0 0 6px; }
.pg-root .pg-icard .val { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--color-text-strong); line-height: 1; }
.pg-root .pg-icard .val.down { color: var(--green-700); }
.pg-root .pg-icard .val.up { color: var(--red-600); }
.pg-root .pg-icard .note { font-size: 11.5px; color: var(--color-text-muted); margin-top: 5px; }
.pg-root .pg-ranges { display: inline-flex; gap: 4px; background: var(--gray-50); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 4px; margin-bottom: 14px; }
.pg-root .pg-ranges button { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--color-text-muted); background: none; border: none; border-radius: var(--radius-full); padding: 5px 12px; cursor: pointer; transition: all var(--transition-fast); }
.pg-root .pg-ranges button.on { background: #fff; color: var(--color-text-strong); box-shadow: var(--shadow-sm); }
.pg-root .pg-amazon-note { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gray-600); background: var(--gray-5); border: 1px dashed var(--gray-200); border-radius: var(--radius-sm); padding: 9px 12px; margin-top: 12px; }
.pg-root .pg-amazon-note svg { color: var(--gray-500); }

/* ==========================================================================
   3. MOBILE - graceful collapse under ~600px
   --------------------------------------------------------------------------
   The source layout assumed desktop widths. On narrow screens the 2-column
   offer row stacks: shop identity on top, the price + CTA cluster below it
   spanning full width. The roundup, shop-page header and insights grids
   also relax to a single column. Tweak props stay token-driven so the
   "comfy" defaults still apply - only the structural layout adapts.
   ========================================================================== */
@media (max-width: 600px) {
  /* Offer row: stack the two columns, full-width price/CTA below the shop */
  .pg-root .pg-offer { grid-template-columns: 1fr; gap: 12px; padding: 12px 14px; }

  /* Shop block: keep logo card + meta side by side, allow wrapping */
  .pg-root .pg-shop { gap: 12px; flex-wrap: wrap; }

  /* Price + action: group the price next to the CTA on the right so the amount
     doesn't float alone at the far left (annotation, mobile). */
  .pg-root .pg-right { width: 100%; justify-content: flex-end; gap: 14px; }
  .pg-root .pg-pricecell { align-items: flex-end; text-align: right; min-width: 0; }
  .pg-root .pg-right .pg-cta { min-width: 0; flex: 0 0 auto; padding: 11px 18px; }

  /* Module header: let the "from" cluster wrap under the title */
  .pg-root .pg-mod-head { flex-wrap: wrap; gap: 10px; }
  .pg-root .pg-mod-head .right { align-items: flex-start; text-align: left; }
  /* Product page only: the hero already shows the price ("From $X at N shops"), so
     the module header's "Lowest price right now / $X" cluster repeats it on mobile.
     Hide just that cluster (scoped to the buybox; standalone modules keep their price). */
  .pg-root .pg-ppage-info .pg-mod-head .right { display: none; }

  /* Secondary section sublines add little on a narrow screen (annotation). */
  .pg-root .pg-ppage-section-sub { display: none; }
  /* (About lede + stat-band overrides live after their base rules below so the
     cascade wins — see the @media block near the About section.) */

  /* Price-watch band: single column - name, email, fine-print, then button. */
  .pg-root .pg-sub-form { grid-template-columns: 1fr; }
  .pg-root .pg-sub .pg-input { width: 100%; }
  /* Inherit the desktop margin (-4px auto -6px): the old mobile-specific
     margin pushed it too low. */
  .pg-root .pg-sub-fine { grid-column: 1; grid-row: auto; }
  .pg-root .pg-sub-btn { width: 100%; padding: 12px 18px; }

  /* Slide-in / modal: widen to near-full so content stays legible */
  .pg-root .pg-slidein { width: min(360px, 92%); }

  /* Roundup row: rank + info on a row, price/CTA wraps to full width below */
  .pg-root .pg-round-row { grid-template-columns: auto 1fr; gap: 12px; }
  .pg-root .pg-round-right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }

  /* Shop product page: single-column header + insights */
  .pg-root .pg-sp-head { grid-template-columns: 1fr; gap: 12px; }
  .pg-root .pg-insights { grid-template-columns: 1fr; }
  .pg-root .pg-tabs { padding: 0 8px; }
  .pg-root .pg-tab { padding: 12px 10px; }
}

/* ==========================================================================
   4. SINGLE-PRODUCT PAGE (.pg-ppage)
   --------------------------------------------------------------------------
   Full WooCommerce product page layout: wide container (up to ~1080px) with
   the price grid centred at its own --pg-max-width (680px) inside.
   All rules scoped to .pg-root.pg-ppage so they never affect other surfaces.
   ========================================================================== */

/* Page container: wider than the module's 680px so editorial content breathes. */
.pg-ppage-outer { max-width: 1120px; margin: 0 auto; }

/* Page root overrides: let pg-ppage fill the container fully. The header +
   editorial sections run wider than the module's 680px artboard, so the page
   root drops the base .pg-root max-width; the grid wrap below re-constrains
   the module itself to the design's 680px. */
.pg-root.pg-ppage {
  padding: 24px 0 40px;
  max-width: none;
  /* page-level tweak props (pg convention) */
  --pg-ppage-col-media: 360px;   /* annotation #1: media block ~10% smaller (was 400px) */
  --pg-ppage-media-max: 378px;
  --pg-ppage-thumb: 50px;        /* annotation #1: thumbnails down to 50px (was 64px) */
  --pg-ppage-thumb-sm: 50px;
  --pg-ppage-control-h: 48px;
  --pg-ppage-img-inset: 87%; /* annotation #1: tighter gap between photo and border (was 78%). Single-image products show one view, so the legacy dial/detail crop calibration no longer applies. */
  --pg-track-caps: 0.07em; /* uppercase letter-spacing for stat card labels */
}

/* Breadcrumb */
.pg-root .pg-ppage-breadcrumb { font-size: 13px; color: var(--gray-500); margin-bottom: 20px; line-height: 1.4; }
.pg-root .pg-ppage-breadcrumb a { color: var(--color-primary-light); }
.pg-root .pg-ppage-breadcrumb a:hover { color: var(--blue-900); text-decoration: underline; }
.pg-root .pg-ppage-bc-sep { color: var(--gray-400); }
.pg-root .pg-ppage-bc-current { color: var(--gray-700); font-weight: 600; }

/* ----------------------------------------------------------------------
   Product header (.pg-ppage-head) - ported from the approved prototype
   (design-reference/2026-06-redesign/prototypes/garmin-descent-g2.html v1.2)
   ---------------------------------------------------------------------- */
.pg-root .pg-ppage-head { display: grid; grid-template-columns: var(--pg-ppage-col-media) 1fr; gap: var(--space-2xl); align-items: start; padding: var(--space-sm) 0 var(--space-xl); }

/* Gallery column: thumbs rail LEFT of the main image on desktop. The gallery is
   sticky beside the buy column (the price grid lives in the info column now), so it
   pins as you scroll and releases at the bottom of the head grid (= bottom of the
   "Never miss a deal" band, the last thing in the info column). align-self:start so
   the sticky item is not stretched to the (taller) info column's height. */
.pg-root .pg-ppage-media { display: grid; grid-template-columns: var(--pg-ppage-thumb) 1fr; gap: var(--space-sm); align-items: start; position: sticky; top: 90px; align-self: start; }
.pg-root .pg-ppage-img-box { position: relative; grid-column: 2; grid-row: 1; border: 1px solid var(--color-border); border-radius: var(--pg-radius); background: var(--color-surface); overflow: hidden; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
/* display:none here is paired with the :has() reveal rules below; the @supports no-:has() fallback keeps the first view visible. */
.pg-root .pg-ppage-img-box img { width: var(--pg-ppage-img-inset); height: var(--pg-ppage-img-inset); object-fit: contain; transition: transform var(--transition-base); display: none; }
.pg-root .pg-ppage-media-placeholder { grid-column: 1 / -1; color: var(--lightblue-700); }

/* Buy box: the price grid now sits INSIDE the info/right column. Make it fill the
   column width (the info column is a flex column with align-items:flex-start, and the
   standalone module is otherwise capped at 680px and centred). */
.pg-root .pg-ppage-info .pg-ppage-grid-wrap { align-self: stretch; width: 100%; max-width: none; margin: var(--space-lg) 0 0; }

/* ============================================================
   Quick Facts card (.pg-ppage-shortdesc) - a styled component below the price grid, built
   entirely from the SITE design tokens (design-tokens.css), never hardcoded values. The
   bullets are intentionally smaller than article prose with circle markers (design QA).
   The page resets .pg-root ul/li to list-style:none (~line 254), so the markers are
   restored here. This is a component card (like the grid), so it carries its own styling -
   it is NOT regular article prose (.pg-prose).
   ============================================================ */
.pg-root .pg-ppage-info .pg-ppage-shortdesc { align-self: stretch; width: 100%; margin: var(--space-lg) 0 0; background: var(--lightblue-5); padding: var(--space-xl); border-radius: var(--radius-inner-2); }
.pg-root .pg-ppage-shortdesc-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.25; color: var(--color-text-strong); margin: 0 0 var(--space-md); }
.pg-root .pg-ppage-shortdesc ul { list-style: circle; margin: 0; padding-left: 20px; }
.pg-root .pg-ppage-shortdesc li { list-style: circle; margin: 0 0 var(--space-xs); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); }
.pg-root .pg-ppage-shortdesc li:last-child { margin-bottom: 0; }
.pg-root .pg-ppage-shortdesc li::marker { color: var(--color-text-muted); }
.pg-root .pg-ppage-shortdesc strong, .pg-root .pg-ppage-shortdesc b { font-weight: 700; }

/* ============================================================
   .pg-prose - REGULAR ARTICLE TEXT (the main Overview description). Uses the SITE design
   tokens (font family, the --text-* size scale, --color-text) so it reads like the rest of
   the website and stays centrally changeable from the primary design tokens. NOT hardcoded
   px/colours, NOT a parallel type scale. The .pg-root reset (~line 254) strips native
   typography, so the design-token values are applied here.
   ============================================================ */
.pg-root .pg-prose { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--color-text); }
.pg-root .pg-prose > :first-child { margin-top: 0; }
.pg-root .pg-prose > :last-child { margin-bottom: 0; }
.pg-root .pg-prose p { margin: 0 0 var(--space-lg); font-size: var(--text-base); line-height: 1.6; color: var(--color-text); }
.pg-root .pg-prose h2 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.25; font-weight: 600; color: var(--color-text); margin: var(--space-xl) 0 var(--space-sm); }
.pg-root .pg-prose h3 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.3; font-weight: 600; color: var(--color-text); margin: var(--space-lg) 0 var(--space-xs); }
.pg-root .pg-prose h4 { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; font-weight: 600; color: var(--color-text); margin: var(--space-lg) 0 var(--space-xs); }
.pg-root .pg-prose ul, .pg-root .pg-prose ol { margin: 0 0 var(--space-lg); padding-left: 22px; }
.pg-root .pg-prose ul { list-style: disc; }
.pg-root .pg-prose ol { list-style: decimal; }
.pg-root .pg-prose li { margin: 0 0 var(--space-xs); font-size: var(--text-base); line-height: 1.6; color: var(--color-text); list-style: inherit; }
.pg-root .pg-prose li:last-child { margin-bottom: 0; }
.pg-root .pg-prose strong, .pg-root .pg-prose b { font-weight: 700; }
.pg-root .pg-prose a { color: var(--color-link); text-decoration: underline; }
.pg-root .pg-prose a:hover { color: var(--color-link-hover); }

/* CSS-only view switching: the checked thumb radio (position N in the rail)
   reveals main image N - pairing is positional so Phase F's real image lists
   need no CSS changes (enumerated up to 6 views). No JS involved. */
.pg-root .pg-ppage-media:has(.pg-ppage-thumb:nth-of-type(1) input:checked) .pg-ppage-img-box img:nth-of-type(1),
.pg-root .pg-ppage-media:has(.pg-ppage-thumb:nth-of-type(2) input:checked) .pg-ppage-img-box img:nth-of-type(2),
.pg-root .pg-ppage-media:has(.pg-ppage-thumb:nth-of-type(3) input:checked) .pg-ppage-img-box img:nth-of-type(3),
.pg-root .pg-ppage-media:has(.pg-ppage-thumb:nth-of-type(4) input:checked) .pg-ppage-img-box img:nth-of-type(4),
.pg-root .pg-ppage-media:has(.pg-ppage-thumb:nth-of-type(5) input:checked) .pg-ppage-img-box img:nth-of-type(5),
.pg-root .pg-ppage-media:has(.pg-ppage-thumb:nth-of-type(6) input:checked) .pg-ppage-img-box img:nth-of-type(6),
.pg-root .pg-ppage-img-box img:only-of-type { display: block; }
/* Fallback for browsers without :has(): always show the first view. */
@supports not (selector(:has(*))) {
  .pg-root .pg-ppage-img-box img:first-of-type { display: block; }
}

/* Synthetic crop views (single-image products): the dial/detail views reuse the
   one featured image with object-position/scale crops, as the prototype does. */
.pg-root .pg-ppage-img-box img[data-pg-view="dial"] { transform: scale(1.9) translateY(6%); }
.pg-root .pg-ppage-img-box img[data-pg-view="detail"] { transform: scale(1.6) translate(-14%, -12%); }
.pg-root .pg-ppage-thumb[data-pg-view="dial"] img { object-fit: cover; transform: scale(2.1) translateY(8%); }
.pg-root .pg-ppage-thumb[data-pg-view="detail"] img { object-fit: cover; transform: scale(1.8) translate(-12%, -10%); }

/* Thumbnail rail */
.pg-root .pg-ppage-thumbs { display: flex; flex-direction: column; gap: var(--space-sm); grid-column: 1; grid-row: 1; }
.pg-root .pg-ppage-thumb { position: relative; display: block; width: var(--pg-ppage-thumb); height: var(--pg-ppage-thumb); border: 1px solid var(--color-border); border-radius: var(--radius-inner-8); background: var(--color-surface); cursor: pointer; overflow: hidden; transition: border-color var(--transition-fast); }
.pg-root .pg-ppage-thumb:hover { border-color: var(--color-border-strong); }
.pg-root .pg-ppage-thumb img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-xs); }
.pg-root .pg-ppage-thumb input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pg-root .pg-ppage-thumb:has(input:checked) { border: 2px solid var(--color-primary); }
.pg-root .pg-ppage-thumb:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Info column */
.pg-root .pg-ppage-info { display: flex; flex-direction: column; align-items: flex-start; }
.pg-root .pg-ppage-title { font-family: var(--font-display); font-weight: var(--font-weight-extrabold); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); color: var(--blue-900); margin: 0 0 var(--space-xs); }
.pg-root .pg-ppage-meta { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-md); }
.pg-root .pg-ppage-meta a { color: var(--color-text-muted); text-decoration: underline; }
.pg-root .pg-ppage-meta a:hover { color: var(--color-link-hover); }

/* Review-guide interlink line (stars are visual only - no schema markup) */
.pg-root .pg-ppage-review-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); background: var(--beige-50); border: 1px solid var(--color-border-muted); border-radius: var(--radius-inner-4); padding: var(--space-sm) var(--space-md); margin: 0 0 var(--space-lg); font-size: var(--text-sm); }
.pg-root .pg-ppage-review-line .pg-review-stars em { font-family: var(--font-display); font-weight: var(--font-weight-bold); font-style: normal; color: var(--color-text-strong); }
.pg-root .pg-ppage-review-line a { font-weight: var(--font-weight-semibold); color: var(--color-link); text-decoration: underline; }
.pg-root .pg-ppage-review-line a:hover { color: var(--color-link-hover); }

/* Price-spread line: ONE font size; emphasis = Montserrat 600 + navy token */
.pg-root .pg-ppage-spread { font-size: var(--text-xl); line-height: var(--leading-normal); color: var(--color-text); margin: 0 0 var(--space-2xs); }
.pg-root .pg-ppage-spread b { font-family: var(--font-display); font-weight: var(--font-weight-semibold); font-size: inherit; color: var(--navy); }

/* Freshness line */
.pg-root .pg-ppage-freshness { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 0 var(--space-lg); }
.pg-root .pg-ppage-dot-live { width: var(--space-sm); height: var(--space-sm); border-radius: var(--radius-full); background: var(--color-success); flex-shrink: 0; }

/* CTAs: Compare prices (solid) + Watch price (outline) */
.pg-root .pg-ppage-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin: 0 0 var(--space-md); }
.pg-root .pg-ppage-btn { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-weight: var(--font-weight-bold); font-size: var(--text-sm); border-radius: var(--radius-sm); padding: 0 var(--space-lg); height: var(--pg-ppage-control-h); cursor: pointer; text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); border: 2px solid transparent; }
.pg-root .pg-ppage-btn.solid { background: var(--color-primary); color: var(--color-text-inverse); }
.pg-root .pg-ppage-btn.solid:hover { background: var(--color-primary-hover); color: var(--color-text-inverse); }
.pg-root .pg-ppage-btn.outline { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }
.pg-root .pg-ppage-btn.outline:hover { background: var(--blue-50); color: var(--color-primary); }

/* annotation #14 + F (batch 3): the "Watch this price" bell rings more energetically
   every ~3.5s (bigger swing + a little scale pop) to draw the eye toward the
   price-watch sign-up. Reduced-motion users get none. */
@keyframes pg-bell-wiggle {
  0%, 70%, 100% { transform: rotate(0) scale(1); }
  73% { transform: rotate(17deg) scale(1.14); }
  77% { transform: rotate(-15deg) scale(1.12); }
  81% { transform: rotate(12deg) scale(1.08); }
  85% { transform: rotate(-9deg) scale(1.05); }
  89% { transform: rotate(6deg) scale(1.03); }
  93% { transform: rotate(-3deg) scale(1.01); }
  96% { transform: rotate(1deg) scale(1); }
}
.pg-root .pg-ppage-hstat-watch .pg-ppage-btn svg { transform-origin: 50% 3px; animation: pg-bell-wiggle 3.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .pg-root .pg-ppage-hstat-watch .pg-ppage-btn svg { animation: none; }
}

/* Disclosure line */
.pg-root .pg-ppage-disclose { font-size: var(--text-xs); color: var(--color-text-muted); max-width: 48ch; margin: 0; }

/* Savings pill (Task B1): green flag rendered above the H1 when a saving >= 3% is computable.
   Ported from the prototype .save-flag; scoped under .pg-root so it never leaks. */
.pg-root .pg-ppage-savings-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--green-700);
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
  white-space: nowrap;
  line-height: 1;
}
.pg-root .pg-ppage-pill-ic {
  flex-shrink: 0;
}

/* Price grid wrap: the module renders inside its own .pg-module container.
   Re-constrain to the design's 680px artboard width (the page root above
   dropped the base .pg-root max-width to let the header run wide). */
.pg-root .pg-ppage-grid-wrap { max-width: var(--pg-max-width); margin-inline: auto; margin-bottom: 28px; }

/* The writeup body wraps itself in a nested 680px .pg-root; align the byline
   header with it. */
.pg-root.pg-ppage .pg-ppage-writeup-header { max-width: var(--pg-max-width); margin-inline: auto; }

/* Writeup: content-writer's .pg-writeup is already inside a .pg-root, but our outer
   .pg-ppage is itself .pg-root, so the inner one is a nested pg-root. Keep spacing.
   The body text now carries .pg-prose (the main Overview is regular article text), so its
   typography lives in the .pg-prose block above and matches the rest of the site - the old
   bespoke .pg-writeup-body h2/h3/p/ul sizes were removed for that reason. */
.pg-root .pg-writeup { margin-bottom: 28px; }

/* Trust band */
.pg-root .pg-ppage-trust-band { background: var(--beige-50); border: 1px solid var(--beige-200); border-radius: var(--pg-radius); padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-2xl); margin-bottom: 28px; }
.pg-root .pg-ppage-disclosure { font-size: 13px; color: var(--gray-600); margin: 0; }
.pg-root .pg-ppage-recency { font-size: 13px; color: var(--gray-600); margin: 0; }
.pg-root .pg-ppage-testing { font-size: 13px; color: var(--gray-600); margin: 0; }

/* Writeup header: byline + date (fix #21) */
.pg-root .pg-ppage-writeup-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 0 2px; }
.pg-root .pg-ppage-writeup-byline { font-size: 12.5px; color: var(--gray-500); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.pg-root .pg-ppage-writeup-byline svg { color: var(--blue-900); opacity: .6; }
.pg-root .pg-ppage-writeup-date { font-size: 12.5px; color: var(--gray-400); }

/* Bottom CTA strip: "Ready to buy?" anchor to price grid (fix #16) */
.pg-root .pg-ppage-bottom-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--pg-radius); padding: 16px 20px; margin-top: 4px; flex-wrap: wrap; }
.pg-root .pg-ppage-bottom-cta-label { font-size: 15px; font-weight: 700; color: var(--blue-900); }

/* Price grid anchor: offset for sticky nav (fix #13) */
#pg-prices { scroll-margin-top: 80px; }

/* Portal: restore pointer-events on slide-in content when visible (fix #2) */
.pg-portal .pg-slidein.show { pointer-events: auto; }

/* Notify-me button: disabled state looks like a real muted button (fix #18).
   The .pg-sub bands have a dark blue background, so the default disabled rgba
   wash is hard to read. Override to a flat gray with a readable muted color. */
.pg-root .pg-sub .pg-sub-btn:disabled { background: var(--blue-700); color: rgba(255,255,255,.4); cursor: not-allowed; transform: none; }

/* Responsive: stack the header at 980px (gallery above info, per prototype) */
@media (max-width: 980px) {
  .pg-root .pg-ppage-head { grid-template-columns: 1fr; gap: var(--space-lg); }
  /* Stacked: gallery sits above the info+grid, so sticky would pin the image over
     the scrolling content. Turn it off and let the gallery scroll normally. */
  .pg-root .pg-ppage-media { max-width: var(--pg-ppage-media-max); position: static; top: auto; }
  .pg-root .pg-ppage-title { font-size: var(--text-3xl); }
  .pg-root .pg-ppage-info .pg-ppage-grid-wrap { margin-top: var(--space-md); }
}
@media (max-width: 600px) {
  .pg-root.pg-ppage { padding: 16px 0 32px; }
  .pg-root .pg-ppage-head { padding-top: var(--space-md); gap: var(--space-md); }
  .pg-root .pg-ppage-title { font-size: var(--text-2xl); }
  .pg-root .pg-ppage-review-line { padding: var(--space-sm); }
  /* Mobile gallery (annotation): thumbs are a vertical rail to the RIGHT of the
     main image (desktop keeps them on the left). */
  .pg-root .pg-ppage-media { grid-template-columns: 1fr var(--pg-ppage-thumb-sm); max-width: none; }
  .pg-root .pg-ppage-img-box { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
  .pg-root .pg-ppage-img-box img { width: auto; height: 88%; }
  .pg-root .pg-ppage-thumbs { flex-direction: column; grid-column: 2; grid-row: 1; }
  .pg-root .pg-ppage-thumb { width: var(--pg-ppage-thumb-sm); height: var(--pg-ppage-thumb-sm); }
  .pg-root .pg-ppage-trust-band { padding: 16px; }
}

/* ==========================================================================
   5. REVIEW-PAGE EMBED (.pg-rembed)
   --------------------------------------------------------------------------
   A compact "Where to buy" surface auto-appended to review CPT pages when a
   mapped WooCommerce product has offers. Scoped under .pg-root.pg-rembed so
   it inherits all module token rules without leaking to the article column.

   Max-width matches a typical review article column (700-800px) so the embed
   sits naturally in the flow without widening the page. The module inside
   (.pg-module) already constrains itself; the wrapper just adds vertical
   rhythm + the heading row.

   No Product/AggregateOffer JSON-LD is emitted here (schema discipline: the
   review page owns Review/AggregateRating; schema is product-page only).
   ========================================================================== */

/* Outer wrapper: vertically separate from article body + constrain width */
.pg-root.pg-rembed {
  margin-top: 40px;
  border-top: 2px solid var(--color-border);
  padding: 0;
  background: transparent;
}

/* Heading row above the module */
.pg-root.pg-rembed .pg-rembed-head {
  margin-bottom: 16px;
  padding-top: 28px;
}
.pg-root.pg-rembed .pg-rembed-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--blue-900);
  margin: 0;
  line-height: 1.2;
}

/* Footer: "Compare all N prices" link + disclosure line */
.pg-root.pg-rembed .pg-rembed-footer {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-bottom: 4px;
}
.pg-root.pg-rembed .pg-rembed-compare {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-primary-light);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.pg-root.pg-rembed .pg-rembed-compare:hover {
  color: var(--blue-900);
  text-decoration: underline;
}
.pg-root.pg-rembed .pg-rembed-compare svg {
  flex-shrink: 0;
}
.pg-root.pg-rembed .pg-rembed-disclosure {
  font-size: 12px;
  color: var(--gray-500);
  margin: 0;
  line-height: 1.5;
}

/* Anchor offset so sticky nav doesn't cover the heading when scrolling to #pg-review-prices */
#pg-review-prices { scroll-margin-top: 80px; }

/* Inside the embed the pg-module needs no extra top padding - the heading row provides it */
.pg-root.pg-rembed .pg-module { margin-top: 0; }

/* Responsive: tighten vertical rhythm on small screens */
@media (max-width: 600px) {
  .pg-root.pg-rembed .pg-rembed-head { padding-top: 20px; margin-bottom: 12px; }
  .pg-root.pg-rembed .pg-rembed-head h2 { font-size: 19px; }
}

/* ==========================================================================
   6. FIXED STICKY BAR (.is-fixed variant -- review-page embed only)
   --------------------------------------------------------------------------
   When divein_pg_render_sticky() is called with is_fixed=true the wrapper
   carries .is-fixed instead of inline position:relative. The bar becomes a
   true viewport-fixed element at the bottom of the screen -- it no longer
   sits inside the article flow and cannot cover content underneath it.

   JS hides the bar (via .pg-hidden-bar) while #pg-review-prices is in the
   viewport (IntersectionObserver) so the bar disappears when the embed is
   already visible, and re-appears when the user has scrolled away from it.
   Also hidden before the page has scrolled past one viewport height (handled
   by the same JS observer by checking the entry rootMargin).
   ========================================================================== */

/* Fixed-variant wrapper: remove from flow, anchor to bottom of viewport */
.divein-pg-sticky-wrap.is-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* No height/width constraints needed -- .pg-sticky inside fills 100% */
}

/* Inside the fixed wrapper the sticky bar stretches full-width */
.divein-pg-sticky-wrap.is-fixed .pg-sticky {
  /* Override the design's position:absolute (used in the demo art context).
     Inside the fixed wrapper it should be static so it sizes the wrapper. */
  position: static;
  /* Full-width bar: remove left/right from the absolute version */
  left: auto;
  right: auto;
  bottom: auto;
}

/* Hidden state: translate the bar below the fold (smooth, no layout shift).
   JS adds/removes this class via IntersectionObserver. */
.divein-pg-sticky-wrap.is-fixed.pg-hidden-bar {
  transform: translateY(110%);
  pointer-events: none;
  transition: transform 0.25s ease;
}

/* Show state: slide in from below */
.divein-pg-sticky-wrap.is-fixed {
  transform: translateY(0);
  transition: transform 0.25s ease;
}

/* Mobile: tighten padding so the bar fits on small screens */
@media (max-width: 600px) {
  .divein-pg-sticky-wrap.is-fixed .pg-sticky { padding: 9px 14px; }
  .divein-pg-sticky-wrap.is-fixed .pg-sticky .info .nm { font-size: 12px; }
  .divein-pg-sticky-wrap.is-fixed .pg-sticky .pg-cta { padding: 10px 16px; font-size: 13px; }
}

/* ==========================================================================
   7. STICKY SECTION NAV (.pg-ppage-snav) - Task A2
   --------------------------------------------------------------------------
   A horizontally-scrollable row of pill links for the sections that will
   actually render on the product page. Sticky below the Foxiz theme header.

   Offset strategy: --pg-ppage-snav-top-offset is the height of the Foxiz
   sticky header. Default 0 covers setups where the header is not sticky or
   the plugin is used without the Foxiz theme. The product-page PHP can write
   an inline style on .pg-ppage-outer to override this variable when the
   theme header height is known.

   Section targets gain scroll-margin-top so plain anchor jumps (no-JS) land
   below the snav as well as the JS smooth-scroll handler.

   All rules scoped under .pg-root so they never affect other surfaces.
   ========================================================================== */

/* Height of the sticky snav bar. Used both to size the bar and to set the
   scroll-margin-top on anchor targets so jumps land below it. */
.pg-root.pg-ppage {
  --pg-ppage-snav-h: 52px;
  --pg-ppage-snav-top-offset: 0px; /* override to match Foxiz sticky header */
}

/* The snav sits directly in the pg-ppage flow, stretching to the outer
   container width by breaking out of the narrower pg-root box. Position it
   so it sticks just below the Foxiz sticky header. */
.pg-root .pg-ppage-snav {
  position: sticky;
  top: var(--pg-ppage-snav-top-offset);
  z-index: 90;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-left: calc(-1 * var(--space-md));
  margin-right: calc(-1 * var(--space-md));
  transition: box-shadow var(--transition-fast);
}

/* Stuck shadow: added by JS when the nav pins to the top of the viewport. */
.pg-root .pg-ppage-snav.pg-ppage-snav-stuck {
  box-shadow: var(--shadow-md);
  border-top-color: transparent;
}

/* Inner row: horizontally scrollable, no scrollbar chrome, flex layout. */
.pg-root .pg-ppage-snav-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 var(--space-md);
}
.pg-root .pg-ppage-snav-wrap::-webkit-scrollbar { display: none; }

/* Pill links: Montserrat 600, quiet-by-default, active = navy fill. */
.pg-root .pg-ppage-snav-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-xs) var(--space-md);
  margin: var(--space-xs) 0;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.pg-root .pg-ppage-snav-pill:hover {
  color: var(--color-text-strong);
  background: var(--color-background-alt);
}
.pg-root .pg-ppage-snav-pill.on {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Offer-count chip inside the Prices pill. */
.pg-root .pg-ppage-snav-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green-600);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  padding: 0 var(--space-xs);
  line-height: var(--leading-loose);
  min-width: 1.4em;
}
/* When the pill is active the chip inverts to stay readable on the navy bg. */
.pg-root .pg-ppage-snav-pill.on .pg-ppage-snav-chip {
  background: var(--color-text-inverse);
  color: var(--color-primary);
}

/* Watch price: pinned to the right edge, a subtle outlined button. Uses
   position:sticky on the anchor itself (inside the overflow-x:auto flex row)
   so it stays visible as the other pills scroll left. */
.pg-root .pg-ppage-snav-watch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  border: 1px solid var(--color-primary-muted);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-md);
  margin: var(--space-xs) 0 var(--space-xs) auto;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  position: sticky;
  right: 0;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.pg-root .pg-ppage-snav-watch:hover { background: var(--blue-50); }

/* No-JS guarantee: section targets land below the snav on plain anchor jump.
   Also consumed by the JS smooth-scroll offset.
   Scoped to .pg-ppage so the pre-existing bare #pg-prices rule (scroll-margin-top: 80px)
   continues to govern non-product-page contexts.
   When adding new section ids in future phases, add them to this list too. */
.pg-root.pg-ppage #pg-prices,
.pg-root.pg-ppage #pg-about,
.pg-root.pg-ppage #pg-specs, /* Task D2: specifications section */
.pg-root.pg-ppage #pg-related,
.pg-root.pg-ppage #pg-history { /* Task C1: price-history section */
  scroll-margin-top: calc(
    var(--pg-ppage-snav-top-offset) + var(--pg-ppage-snav-h) + var(--space-sm)
  );
}

/* Mobile: tighten pill padding so everything fits on narrow screens. */
@media (max-width: 600px) {
  .pg-root .pg-ppage-snav-pill,
  .pg-root .pg-ppage-snav-watch {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
  }
}

/* ==========================================================================
   Related products row - .pg-ppage-related-wrap
   Scoped under .pg-root so all tokens resolve.
   4-up grid on desktop (3 product cards + 1 category card), responsive.
   ========================================================================== */

.pg-root .pg-ppage-related-wrap {
  margin-top: var(--space-2xl);
}

/* Section heading row (title + subline) */
.pg-root .pg-ppage-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.pg-root .pg-ppage-section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-strong);
  margin: 0;
  letter-spacing: var(--pg-track-tight);
}

.pg-root .pg-ppage-section-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Card grid: 4 columns on desktop, 2-up wrapping on tablet/mobile */
.pg-root .pg-ppage-rel-row {
  --pg-rel-card-w: 200px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

/* Individual product card */
.pg-root .pg-ppage-rel-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-md);
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.pg-root .pg-ppage-rel-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(calc(var(--space-2xs) * -1));
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

/* Image slot */
.pg-root .pg-ppage-rel-img {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-50);
  border-radius: var(--radius-inner-4);
  margin-bottom: var(--space-md);
  overflow: hidden;
}

.pg-root .pg-ppage-rel-img img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  /* annotation #9: knock out the photo's white box so it blends onto the gray-50 tile */
  mix-blend-mode: multiply;
}

/* Product name */
.pg-root .pg-ppage-rel-name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  color: var(--color-text-strong);
  margin-bottom: var(--space-xs);
  min-height: 2.5em;
}

/* "From $X at N shops" price line */
.pg-root .pg-ppage-rel-from {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.pg-root .pg-ppage-rel-from b {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-strong);
}

/* Watcher count line */
.pg-root .pg-ppage-rel-watchers {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--green-700);
  font-weight: var(--font-weight-semibold);
}

/* "See all {category}" card: navy background, inverse text */
.pg-root .pg-ppage-rel-card.pg-ppage-rel-all {
  background: var(--color-primary);
  border-color: var(--color-primary);
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-sm);
}

.pg-root .pg-ppage-rel-card.pg-ppage-rel-all:hover {
  background: var(--color-primary-hover, #0a3477);
  color: var(--color-text-inverse);
}

.pg-root .pg-ppage-rel-all-t {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--text-xl);
  color: var(--color-text-inverse);
  line-height: var(--leading-tight);
}

.pg-root .pg-ppage-rel-card.pg-ppage-rel-all p {
  font-size: var(--text-sm);
  color: var(--blue-100);
  margin: 0;
}

.pg-root .pg-ppage-rel-go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  /* annotation #8 (batch 4): light blue, kept on one line. Underlined (batch 5). */
  color: var(--lightblue-400);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  margin-top: var(--space-sm);
}

/* Tablet: 2-up wrap */
@media (max-width: 900px) {
  .pg-root .pg-ppage-rel-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: horizontal scroll (keeps card widths comfortable on narrow screens) */
@media (max-width: 540px) {
  .pg-root .pg-ppage-rel-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
  }

  .pg-root .pg-ppage-rel-row::-webkit-scrollbar {
    display: none;
  }

  .pg-root .pg-ppage-rel-card {
    flex: 0 0 var(--pg-rel-card-w);
    min-width: 0; /* flex items default to min-width:auto; without this, a card
                     with a large intrinsic image or long text expands beyond
                     the 200px flex-basis. min-width:0 lets the basis win. */
  }

  .pg-root .pg-ppage-rel-img {
    overflow: hidden; /* belt-and-braces: prevents the image's intrinsic size
                         from propagating out of the aspect-ratio box. The
                         desktop rule already sets this; repeat here so the
                         mobile override is self-contained. */
  }

  .pg-root .pg-ppage-rel-img img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* matches the desktop treatment; ensures the image
                            fills the box without distorting or overflowing. */
  }
}

/* ==========================================================================
   8. PRICE-HISTORY SECTION (.pg-ppage-history-*) - Task C1
   Flattened (no-tabs) history + stats for the product page.
   All rules scoped under .pg-root to match the rest of the pg-ppage system.
   ========================================================================== */

/* Section wrapper: shares the spacing/heading pattern with related-wrap. */
.pg-root .pg-ppage-history-wrap {
  margin-top: var(--space-2xl);
}

/* History card: white surface, border, rounded, inner padding. */
.pg-root .pg-ppage-history-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inner-4);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
}

/* Range chips: pill-style buttons matching the shop-page pattern.
   .pg-ranges is the existing class the JS watches for [data-range] buttons.
   We add .pg-ppage-history-ranges for page-specific spacing only. */
.pg-root .pg-ppage-history-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.pg-root .pg-ppage-history-ranges button {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.pg-root .pg-ppage-history-ranges button.on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.pg-root .pg-ppage-history-ranges button:hover:not(.on) {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

/* Chart mount: the JS fills this with an SVG on load.
   No-JS: the empty mount renders as a 0-height block (no gap).
   We use :has(svg) to give it height only when the SVG is present, so
   the surrounding stats + note still read complete if JS is disabled. */
/* Chart mount. Fixed height + position:relative so the Chart.js canvas
   (maintainAspectRatio:false) fills it; the SVG fallback scales to fit too. */
.pg-root .pg-ppage-history-chart {
  position: relative;
  height: 300px;
  margin-bottom: var(--space-sm);
  overflow: hidden;
}
.pg-root .pg-ppage-history-chart canvas { display: block; }
.pg-root .pg-ppage-history-chart svg { width: 100%; height: 100%; }
@media (max-width: 600px) {
  .pg-root .pg-ppage-history-chart { height: 240px; }
}

/* Amazon/disclosure note: reuses the existing .pg-amazon-note styles but
   with an extra class for history-specific spacing. */
.pg-root .pg-ppage-history-note {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* Stat cards grid: three equal columns on desktop (last one is the watch CTA). */
.pg-root .pg-ppage-history-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.pg-root .pg-ppage-hstat-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inner-4);
  padding: var(--space-md) var(--space-lg);
  /* annotations #2/#3 (batch 4): vertically centre the content within each card box. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* annotation #1 (batch 4): the "Lowest price right now" card links to the lowest
   retailer's shop. Style the anchor like the card and add a hover affordance. */
.pg-root a.pg-ppage-hstat-link { text-decoration: none; color: inherit; cursor: pointer; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.pg-root a.pg-ppage-hstat-link:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }

.pg-root .pg-ppage-hstat-lbl {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--pg-track-caps, 0.07em);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-xs);
}

.pg-root .pg-ppage-hstat-val {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-strong);
  line-height: var(--leading-tight);
}

/* Trend direction colours: down = green (good news), up = red (price rose). */
.pg-root .pg-ppage-hstat-val.down { color: var(--green-700); }
.pg-root .pg-ppage-hstat-val.up   { color: var(--red-700); }
/* Steady fallback (annotation #12): no drop/rise to report, so the value reads as a
   calm ocean-blue word rather than an alarming number. */
.pg-root .pg-ppage-hstat-val.steady { color: var(--color-primary); font-size: var(--text-xl); }

.pg-root .pg-ppage-hstat-ctx {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

/* annotations G + H (batch 3): centre the "Lowest price right now" and "Price trend"
   stat cards (label, value and context). The watch CTA card keeps its left layout. */
.pg-root .pg-ppage-hstat-card:not(.pg-ppage-hstat-watch) { text-align: center; }
.pg-root .pg-ppage-hstat-card:not(.pg-ppage-hstat-watch) .pg-ppage-hstat-ctx { justify-content: center; }

/* Watch CTA card: green-tinted surface, column layout.
   annotation #3 (batch 4): centre the content horizontally + vertically. */
.pg-root .pg-ppage-hstat-watch {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  justify-content: center;
}

/* "Watch this price" button: solid green with a light icon + text (batch 6). Uses
   the DIVEIN green token; the bell svg inherits currentColor so it goes white too. */
.pg-root .pg-ppage-hstat-watch .pg-ppage-btn.outline { background: var(--green-600); color: #fff; border-color: var(--green-600); }
.pg-root .pg-ppage-hstat-watch .pg-ppage-btn.outline:hover { background: var(--green-700); color: #fff; border-color: var(--green-700); }

.pg-root .pg-ppage-hstat-watch > p {
  font-size: var(--text-sm);
  color: var(--green-800);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal);
  margin: 0;
}

/* Mobile: collapse stat cards to a single column. */
@media (max-width: 600px) {
  .pg-root .pg-ppage-history-card {
    padding: var(--space-lg) var(--space-md);
  }

  .pg-root .pg-ppage-history-stats {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   9. SPECIFICATIONS SECTION (.pg-ppage-specs-*) - Task D2
   Grouped label/value tables from the AI-extracted + editor-verified payload.
   All rules scoped under .pg-root to keep token resolution consistent.
   ========================================================================== */

/* Section wrapper: same top margin as related and history wrappers. */
.pg-root .pg-ppage-specs-wrap {
  margin-top: var(--space-2xl);
}

/* 2-column grid of spec-group cards on desktop, collapses to 1 on mobile. */
.pg-root .pg-ppage-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

/* Spec-group card (Concept 1 "icon cards"): soft card with an ocean-tint icon
   badge, group title, and label/value rows. */
.pg-root .pg-ppage-spec-group {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  padding: var(--space-md) var(--space-lg);
  transition: border-color var(--transition-fast);
}
.pg-root .pg-ppage-spec-group:hover { border-color: var(--color-secondary); }

/* Card head: icon badge + title. */
.pg-root .pg-ppage-spec-group-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.pg-root .pg-ppage-spec-group-ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--lightblue-50);
  color: var(--lightblue-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pg-root .pg-ppage-spec-group-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-base);
  color: var(--blue-900);
  margin: 0;
}

/* Label/value rows: flex per row so long values wrap and right-align cleanly. */
.pg-root .pg-ppage-spec-dl { margin: 0; padding: 0; }
.pg-root .pg-ppage-spec-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-xs) 0;
  border-top: 1px solid var(--color-border-muted);
}
.pg-root .pg-ppage-spec-row:first-child { border-top: 0; }
.pg-root .pg-ppage-spec-dl dt { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.pg-root .pg-ppage-spec-dl dd {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-align: right;
  margin: 0;
}

/* WooCommerce-attribute spec list: a single untitled card spanning the full width, rendered
   as the "two-tone" design (Option 3). Each row is a TINTED label cell next to a plain value
   cell, so label and value are unmistakably different (the old layout had them looking the
   same). Rows flow in two columns for overview, one column on mobile. Design-token values
   only. */
.pg-root .pg-ppage-spec-group:only-child {
  grid-column: 1 / -1;
  padding: var(--space-md) var(--space-lg);
}
.pg-root .pg-ppage-spec-group:only-child .pg-ppage-spec-dl {
  column-count: 2;
  column-gap: var(--space-xl);
}
.pg-root .pg-ppage-spec-group:only-child .pg-ppage-spec-row {
  break-inside: avoid;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 0;
  border-bottom: 1px solid var(--color-border-muted);
}
.pg-root .pg-ppage-spec-group:only-child .pg-ppage-spec-row dt {
  background: var(--lightblue-50);
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  padding: 10px 13px;
  margin: 0;
}
.pg-root .pg-ppage-spec-group:only-child .pg-ppage-spec-row dd {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  padding: 10px 13px;
  margin: 0;
}

/* Provenance + error-report line: small, muted, below the grid. */
.pg-root .pg-ppage-spec-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  margin-bottom: 0;
}

.pg-root .pg-ppage-spec-error-link {
  /* now a <button> (annotation #18): reset native button chrome to read as an inline link */
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pg-root .pg-ppage-spec-error-link svg { color: var(--color-text-muted); }

.pg-root .pg-ppage-spec-error-link:hover {
  color: var(--color-text);
}

/* annotation #17: page-level "Spotted an error?" line, after the bottom CTA. */
.pg-root .pg-ppage-feedback-line {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-muted);
  text-align: center;
  font-size: var(--text-sm);
}

/* ----------------------------------------------------------------------
   Feedback ("Spotted an error?") modal (annotation #18). Reuses .pg-modal-scrim
   / .pg-modal, but pins to the viewport (the see-all modal is absolute within
   the short price module; this one lives deep in the tall page, so fixed +
   centered keeps it on screen).
   ---------------------------------------------------------------------- */
.pg-root .pg-feedback-scrim { position: fixed; inset: 0; align-items: center; justify-content: center; padding: var(--space-lg); z-index: 9999; }
.pg-root .pg-feedback-modal { width: 100%; max-width: 460px; max-height: 90vh; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-lg); }
.pg-root .pg-feedback-modal .pg-modal-head { align-items: flex-start; gap: var(--space-md); }
.pg-root .pg-feedback-head-txt h4 { margin: 0 0 2px; font-size: var(--text-base); font-weight: var(--font-weight-bold); color: var(--blue-900); }
.pg-root .pg-feedback-sub { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-snug); }
.pg-root .pg-feedback-body { padding: var(--space-lg); overflow-y: auto; }

/* Theme the embedded Fluent Form to the grid's look without touching FF globally. */
.pg-root .pg-feedback-body .ff-el-input--label label { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-strong); }
.pg-root .pg-feedback-body .ff-el-form-control { font-family: var(--font-body); font-size: var(--text-sm); border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); }
.pg-root .pg-feedback-body .ff-el-form-control:focus { border-color: var(--color-primary); outline: none; }
.pg-root .pg-feedback-body .ff-btn-submit { font-family: var(--font-display); font-weight: var(--font-weight-bold); background: var(--color-primary); border: 0; border-radius: var(--radius-sm); }
.pg-root .pg-feedback-body .ff-btn-submit:hover { background: var(--color-primary-hover); }

/* Mobile: collapse to single column. */
@media (max-width: 600px) {
  .pg-root .pg-ppage-spec-grid {
    grid-template-columns: 1fr;
  }
  .pg-root .pg-ppage-spec-group:only-child .pg-ppage-spec-dl {
    column-count: 1;
  }
}

/* ==========================================================================
   About section - structured layout (.pg-ppage-about-structured)
   Scoped under .pg-root. Ported from the garmin-descent-g2 prototype's
   about / editorial block; token-only, no magic numbers.
   ========================================================================== */

/* Outer wrapper spacing (shared by both fallback and structured paths). */
.pg-root .pg-ppage-about-wrap {
  margin-top: var(--space-2xl);
  max-width: var(--pg-max-width);
  margin-inline: auto;
}

/* annotation #15: the structured About is widened to the full content width so it
   lines up with the history/related/specs sections above it (the plain-writeup
   fallback keeps the narrow 680px reading column). Inner elements keep their own
   widths: the lede stays 680px (left-aligned for readability), the stat band and
   feature blocks fill the row. The byline left-aligns to match. */
.pg-root .pg-ppage-about-structured { max-width: none; }
/* annotation C (batch 3): centre the intro lede within the full-width About. */
.pg-root .pg-ppage-about-structured .pg-ppage-about-lede { margin-inline: auto; text-align: center; }
/* annotation D (batch 3): centre the FAQ as a column with a centred heading; the
   accordion questions/answers stay left-aligned for readability. */
.pg-root .pg-ppage-about-structured .pg-ppage-about-faq { max-width: var(--pg-max-width); margin-inline: auto; }
.pg-root .pg-ppage-about-structured .pg-ppage-about-faq-title { text-align: center; }

/* Lede paragraph. */
.pg-root .pg-ppage-about-lede {
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--color-text);
  max-width: var(--pg-max-width);
  margin-bottom: var(--space-2xl);
}

/* Navy stat band: navy background, 3-4 columns. */
.pg-root .pg-ppage-about-statband {
  background: var(--color-primary);
  border-radius: var(--pg-radius);
  padding: var(--space-2xl) var(--space-xl);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.pg-root .pg-ppage-about-stat-n {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-inverse);
  line-height: var(--leading-tight);
  letter-spacing: var(--pg-track-tight);
}

.pg-root .pg-ppage-about-stat-bar {
  width: var(--space-xl);
  height: var(--space-2xs);
  background: var(--color-accent-yellow);
  border-radius: var(--radius-full);
  margin: var(--space-sm) 0;
}

.pg-root .pg-ppage-about-stat-q {
  font-size: var(--text-sm);
  color: var(--blue-100);
  line-height: var(--leading-normal);
}

/* Alternating image/text feature blocks. */
.pg-root .pg-ppage-about-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  margin-bottom: var(--space-2xl);
}

/* Flip: image on the right (odd-indexed feature). */
.pg-root .pg-ppage-about-feature.pg-ppage-feature-flip .pg-ppage-about-fmedia {
  order: 2;
}

/* Image column. */
.pg-root .pg-ppage-about-fmedia {
  border-radius: var(--pg-radius);
  overflow: hidden;
  background: var(--gray-5);
  border: 1px solid var(--color-border);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pg-root .pg-ppage-about-fmedia img,
.pg-root .pg-ppage-about-fimg {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

/* Empty image placeholder (no attachment ID). */
.pg-root .pg-ppage-about-fmedia-empty {
  background: linear-gradient(160deg, var(--lightblue-50), var(--blue-50));
  color: var(--blue-300);
}

/* Text column: eyebrow, heading, paragraphs. */
.pg-root .pg-ppage-about-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--pg-track-caps);
  text-transform: uppercase;
  color: var(--green-600);
  margin-bottom: var(--space-sm);
}

.pg-root .pg-ppage-about-fheading {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--space-md);
  letter-spacing: var(--pg-track-tight);
}

.pg-root .pg-ppage-about-ftext p {
  color: var(--color-text);
  margin-bottom: var(--space-md);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.pg-root .pg-ppage-about-ftext p:last-child {
  margin-bottom: 0;
}

/* Video slot: wraps whatever Presto Player renders. */
.pg-root .pg-ppage-about-video-slot {
  margin-bottom: var(--space-2xl);
  border-radius: var(--pg-radius);
  overflow: hidden;
}

/* FAQ accordions: <details>/<summary> baseline. */
.pg-root .pg-ppage-about-faq {
  max-width: var(--pg-max-width);
  margin-top: var(--space-2xl);
}

.pg-root .pg-ppage-about-faq-title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
  color: var(--color-text-strong);
}

.pg-root .pg-ppage-about-faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inner-4);
  margin-bottom: var(--space-sm);
  background: var(--color-surface);
}

.pg-root .pg-ppage-about-faq-q {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  gap: var(--space-md);
}

.pg-root .pg-ppage-about-faq-q::-webkit-details-marker {
  display: none;
}

.pg-root .pg-ppage-about-faq-ic {
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.pg-root details[open] .pg-ppage-about-faq-ic {
  transform: rotate(180deg);
}

.pg-root .pg-ppage-about-faq-a {
  padding: 0 var(--space-lg) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-normal);
}

/* Mobile: stat band wraps to 2-column grid; features stack; flip resets. */
@media (max-width: 980px) {
  .pg-root .pg-ppage-about-statband {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .pg-root .pg-ppage-about-feature {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Reset flip order on mobile so image always comes first. */
  .pg-root .pg-ppage-about-feature.pg-ppage-feature-flip .pg-ppage-about-fmedia {
    order: 0;
  }
}

/* Phone-only About tweaks (annotations). Placed AFTER the About base rules above
   so the cascade wins (media queries add no specificity, source order decides). */
@media (max-width: 600px) {
  /* Smaller intro lede so it is less of a wall of text. */
  .pg-root .pg-ppage-about-lede { font-size: var(--text-base); }
  /* Stat band: the big numbers wrapped into many lines in the cramped 2-up grid;
     shrink them and tighten the grid so each value fits cleanly. */
  .pg-root .pg-ppage-about-statband { gap: var(--space-md); padding: var(--space-xl) var(--space-lg); }
  .pg-root .pg-ppage-about-stat-n { font-size: var(--text-xl); }
}

/* Phone-only: tighten the vertical gaps between the big page sections (annotation
   "Less gap here on mobile"). Each section wrapper carries margin-top:--space-2xl
   (48px) on desktop, which reads as too airy on a narrow screen. Pull every
   inter-section gap down to --space-xl (32px) and shrink each section head's
   bottom margin. Placed at end-of-file so it wins on source order (media queries
   add no specificity). */
@media (max-width: 600px) {
  .pg-root .pg-ppage-related-wrap,
  .pg-root .pg-ppage-history-wrap,
  .pg-root .pg-ppage-specs-wrap,
  .pg-root .pg-ppage-about-wrap,
  .pg-root .pg-ppage-trust-band {
    margin-top: var(--space-xl);
  }
  .pg-root .pg-ppage-section-head {
    margin-bottom: var(--space-md);
  }
}

/* ============================================================
 * "WHERE TO BUY" BOX (C2) - mapped-product offers on reviews + guides.
 * Compact card matching the design prototype
 * (staging-poc/design-reference/2026-06-guide-review-embeds): heading +
 * availability line + compact "price at Shop" offer buttons (winner solid +
 * Lowest/Best tag) + a "Show all N prices" toggle. In-content on a full-width
 * review/guide page, so it is a responsive card, not the prototype's fixed slot.
 * All structural rules scoped under .pg-root (the wrapper) per the shop convention.
 * ============================================================ */
.pg-root .pg-wtb {
  background: var(--beige-50);
  border: 1px solid var(--beige-200);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 28px 0;
  max-width: 520px;
}
.pg-root .pg-wtb-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pg-root .pg-wtb-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  margin: 0;
  line-height: 1.2;
}
.pg-root .pg-wtb-avail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--gray-600);
  white-space: nowrap;
}
.pg-root .pg-wtb-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--green-500);
  box-shadow: 0 0 0 3px var(--green-50);
  flex: 0 0 auto;
}
.pg-root .pg-wtb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pg-root .pg-wtb-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  text-decoration: none;
  border: 1.5px solid var(--gray-300);
  background: #fff;
  color: var(--gray-900);
  border-radius: var(--radius-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.pg-root a.pg-wtb-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--gray-400);
}
.pg-root .pg-wtb-lbl {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
  font-family: var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-root .pg-wtb-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--navy);
  margin-right: 3px;
}
.pg-root .pg-wtb-at {
  font-weight: 600;
  font-size: 13px;
  color: var(--gray-700);
}
.pg-root .pg-wtb-go {
  flex: 0 0 auto;
  color: var(--gray-400);
  display: inline-flex;
}
/* Winner: solid shop-accent background + Lowest/Best tag. */
.pg-root .pg-wtb-btn.best {
  background: var(--pg-accent);
  border-color: var(--pg-accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--pg-accent) 22%, transparent);
}
.pg-root .pg-wtb-btn.best .pg-wtb-price { color: #fff; }
.pg-root .pg-wtb-btn.best .pg-wtb-at { color: rgba(255, 255, 255, .82); }
.pg-root .pg-wtb-btn.best .pg-wtb-go { color: rgba(255, 255, 255, .7); }
.pg-root a.pg-wtb-btn.best:hover { filter: brightness(1.06); }
.pg-root .pg-wtb-tag {
  position: absolute;
  top: -8px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--green-600);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .02em;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}
.pg-root .pg-wtb-tag svg { width: 8px; height: 8px; }
/* Out-of-stock: disabled, muted, non-clickable. */
.pg-root .pg-wtb-btn.out,
.pg-root .pg-wtb-btn.disabled {
  background: var(--gray-50);
  border-color: var(--gray-200);
  color: var(--gray-500);
  cursor: not-allowed;
}
.pg-root .pg-wtb-btn.out .pg-wtb-price,
.pg-root .pg-wtb-btn.disabled .pg-wtb-price { color: var(--gray-500); }
.pg-root .pg-wtb-oos {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
}
/* Sponsored chip (the ranker already demotes sponsored out of the winner slot). */
.pg-root .pg-wtb-btn.sponsored::after {
  content: "Sponsored";
  position: absolute;
  top: -8px;
  left: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray-500);
  background: var(--beige-50);
  padding: 0 4px;
}
.pg-root .pg-wtb-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.pg-root .pg-wtb-showall {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  color: var(--lightblue-700);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 2px;
}
.pg-root .pg-wtb-showall:hover { color: var(--lightblue-800); text-decoration: underline; }
.pg-root .pg-wtb-showall svg { transition: transform var(--transition-fast); }
.pg-root .pg-wtb-showall[data-open="1"] svg { transform: rotate(180deg); }
.pg-root .pg-wtb-note {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--gray-500);
  text-align: center;
}

/* ==========================================================================
   C3. STICKY "BUY FROM $xxx" PILL  (injected into the THEME's #s-title-sticky)
   --------------------------------------------------------------------------
   This pill is appended by price-grid.js into the theme's sticky reading bar
   (#s-title-sticky), which lives OUTSIDE .pg-root - so these rules are NOT
   scoped under .pg-root. They reference the global :root design tokens (which
   this stylesheet defines), so the pill is on-brand wherever the theme puts the
   bar. Mirrors the design prototype's .rb-buy: a 40px navy pill with a bag glyph
   + label. margin-left:auto pushes it to the right of the flex bar.
   ========================================================================== */
.s-title-sticky .pg-sticky-buy,
a.pg-sticky-buy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: var(--color-white);
  border: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.s-title-sticky .pg-sticky-buy:hover,
a.pg-sticky-buy:hover,
.s-title-sticky .pg-sticky-buy:focus-visible,
a.pg-sticky-buy:focus-visible {
  background: var(--blue-800);
  color: var(--color-white);
  text-decoration: none;
}
.s-title-sticky .pg-sticky-buy svg,
a.pg-sticky-buy svg { flex-shrink: 0; }
.s-title-sticky .pg-sticky-buy .pg-sticky-buy-txt,
a.pg-sticky-buy .pg-sticky-buy-txt { color: inherit; }

/* On narrow screens the theme bar is tight: drop the label, keep the bag +
   price compact so the pill still fits without overflowing the bar. */
@media (max-width: 600px) {
  .s-title-sticky .pg-sticky-buy,
  a.pg-sticky-buy { height: 34px; padding: 0 12px; gap: 6px; font-size: 12px; }
}