/*
 * The shop guide — SHOP.SEO V4.2 (Human selection 2026-10-23: the V4.2
 * recommended composition, navigation A, formats A). template-parts/plp/
 * shop-guide.php; enqueued only where the guide renders (the clean first
 * page of /shop/). Ported from the approved lab stylesheet (SHOPSEO lab
 * v42/proto/v42.css §0–§3, §6) with the production class names; the Show more
 * transition and the quantity sheet's finish live in plp.css /
 * product-card.css.
 *
 * Type scale: 13 meta · 14 small · 15.5 body · 17 lede · 19 index · 20 H3 ·
 * clamp(26–34) H2 · clamp(34–52) display. Text #3D4650 (≈10:1), meta #5A6572
 * (≈5.9:1). Navy + Lime only where they carry meaning: strength, the
 * illustration ground, the focus of a hover.
 *
 * Motion: Production's tokens only. Only opacity and transform animate;
 * colour and underline changes are instant (a colour transition repaints its
 * text every frame — measured in the lab: about 45 paints per hover with
 * colour transitions, about 9 without). Every moving part carries a neutral
 * transform at rest (going from `none` to a transform re-lays the element
 * out). Hover lives inside @media (hover: hover) (UI.1), focus-visible
 * mirrors it, presses use :active + Production's .is-pressed. Under
 * prefers-reduced-motion the design system zeroes durations, rises and
 * travel; the few component transforms that would still move are cancelled
 * in §3.9. No hover or focus state changes layout.
 */

/* =====================================================================================================
   0. SHARED ATOMS
   ===================================================================================================== */
.pp-sg { --pp-sg-text: #3D4650; --pp-sg-muted: #5A6572; --pp-sg-line: #E2E5E7; --pp-sg-gap: clamp(56px, 6.6vw, 96px); --pp-sg-mark-k: 0.95; color: var(--pp-sg-text); }
.pp-sg :where(h2, h3, p, ul, ol, dl, figure) { margin-top: 0; }
.pp-sg-display { margin: 0; font: 600 clamp(34px, 4.2vw, 52px)/1.04 var(--pp-font-display); letter-spacing: -.02em; color: var(--pp-ink); }
.pp-sg-h2 { margin: 0 0 12px; font: 600 clamp(26px, 2.5vw, 34px)/1.1 var(--pp-font-display); letter-spacing: -.015em; color: var(--pp-ink); }
.pp-sg-h3 { margin: 0 0 8px; font: 600 20px/1.2 var(--pp-font-display); letter-spacing: -.005em; color: var(--pp-ink); }
.pp-sg-lede { margin: 0 0 20px; max-width: 58ch; font: 400 17px/1.6 var(--pp-font-body); color: var(--pp-sg-text); }
.pp-sg-lede--xl { max-width: 34ch; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; color: var(--pp-ink); letter-spacing: -.005em; }
.pp-sg-body { margin: 0 0 14px; max-width: 62ch; font: 400 15.5px/1.65 var(--pp-font-body); color: var(--pp-sg-text); }
.pp-sg-note { margin: 28px 0 0; font: 500 13px/1.5 var(--pp-font-body); color: var(--pp-sg-muted); }
.pp-sg-caption { margin: 14px 0 0; font: 400 13px/1.5 var(--pp-font-body); color: var(--pp-sg-muted); }
.pp-sg-count { font: 500 13px/1.2 var(--pp-font-body); color: var(--pp-sg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-sg-links { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 14px 0 0; }
.pp-sg-link { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1.4 var(--pp-font-body); color: var(--pp-navy); text-decoration: none; }
/* the underline is always drawn and only its colour changes, so hover never re-lays text */
.pp-sg-link-t { display: inline; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: transparent; }
.pp-sg-nw { white-space: nowrap; }
.pp-sg-arr { display: inline-flex; flex: none; vertical-align: -3px; margin-inline-start: 6px; }
.pp-sg-band-n .pp-sg-arr, .pp-sg-fmt-n .pp-sg-arr { margin-inline-start: 0; }
/* every part that moves on hover already carries a neutral transform at rest — going from `none` to a transform
   makes Chromium lay the element out again (it becomes a containing block); changing one transform value does not */
.pp-sg-arr .pp-i { width: 16px; height: 16px; transform: translateX(0); transition: transform var(--pp-motion-micro) var(--pp-ease-out); }
.pp-sg a:focus-visible { outline: 2px solid var(--pp-ink); outline-offset: 3px; border-radius: 4px; }
.pp-sg-mark { display: block; width: auto; max-width: 100%; height: calc(30px * var(--pp-bdx-ls, 1) * 1.03 * var(--pp-sg-mark-k)); object-fit: contain; object-position: left center; }
.pp-sg-mark-name { font: 700 18px/1.05 var(--pp-font-display); color: var(--pp-ink); }
/* brand marks must out-rank WooCommerce's `.woocommerce img { height: auto }` (0,1,1) — Production's height model
   (30px × logo_scale × 1.03 × surface density, BR.3B ruling C5) is the only sizing rule */
.pp-sg img.pp-sg-mark { width: auto; max-width: 100%; height: calc(30px * var(--pp-bdx-ls, 1) * 1.03 * var(--pp-sg-mark-k)); }
/* Knowledge card: Production's NP.4 card (editorial-cards.css) with its own hover (1px rise, title to Navy) — spacing,
   and one contrast correction: the type label (.pp-ed-kicker-type, #7E8894) is 3.6:1 at 11px, below WCAG AA, so the
   guide uses the family's darker muted ink (#5A6572, 5.9:1). Reported as a Production finding for editorial-cards.css. */
.pp-sg .pp-ed-kicker-type { color: var(--pp-ed-muted, #5A6572); }
.pp-sg-feature .pp-ed-art { margin-bottom: 14px; }
.pp-sg-feature .pp-ed-card-t { margin: 8px 0 6px; }
.pp-sg-feature .pp-ed-card-dek { margin: 0 0 8px; }
.pp-sg-cov { display: inline-flex; gap: 2px; }
.pp-sg-cov i { width: 10px; height: 4px; border-radius: 1px; background: rgba(20, 47, 81, .13); }
.pp-sg-cov i.on { background: var(--pp-navy); }
.pp-sg-fam-n { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; font: 600 16px/1.25 var(--pp-font-body); color: var(--pp-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: transparent; }

/* =====================================================================================================
   1. THE STRENGTH SPECTRUM — one axis in mg per pouch, the range drawn above it
   ===================================================================================================== */
.pp-sg-spec { --bin: var(--pp-navy); --track: rgba(20, 47, 81, .07); --s1: rgba(20, 47, 81, .16); --s2: rgba(20, 47, 81, .38); --s3: rgba(20, 47, 81, .66); --s4: var(--pp-navy); --tick: var(--pp-sg-muted); --gapc: #fff; --hi: var(--pp-navy); }
.pp-sg-spec.is-dark { --bin: #fff; --track: rgba(255, 255, 255, .06); --s1: rgba(255, 255, 255, .14); --s2: rgba(255, 255, 255, .22); --s3: rgba(255, 255, 255, .32); --s4: rgba(255, 255, 255, .44); --tick: rgba(255, 255, 255, .62); --gapc: var(--pp-navy); --hi: var(--pp-lime); }
.pp-sg-spec-plot { position: relative; }
.pp-sg-bins { position: relative; height: 104px; margin: 0 3px; }
.pp-sg-bin { position: absolute; bottom: 0; left: var(--x); width: 6px; height: calc(var(--h) * 100%); transform: translateX(-50%); border-radius: 3px 3px 1px 1px; background: var(--bin); transition: opacity var(--pp-motion-component) var(--pp-ease-out); }
.pp-sg-track { position: relative; height: 12px; margin-top: 6px; border-radius: 6px; overflow: hidden; background: var(--track); }
.pp-sg-seg { position: absolute; top: 0; bottom: 0; left: var(--x0); width: calc(var(--x1) - var(--x0)); border-inline-start: 2px solid var(--gapc); }
.pp-sg-seg--1 { background: var(--s1); border-inline-start: 0; } .pp-sg-seg--2 { background: var(--s2); } .pp-sg-seg--3 { background: var(--s3); } .pp-sg-seg--4 { background: var(--s4); }
/* each segment's highlight layer, raised by its group's link (§3.4) */
.pp-sg-seg::after { content: ""; position: absolute; inset: 0; background: var(--hi); opacity: 0; transition: opacity var(--pp-motion-component) var(--pp-ease-out); }
.pp-sg-ticks { position: relative; height: 18px; margin-top: 7px; font: 500 12px/1 var(--pp-font-body); color: var(--tick); font-variant-numeric: tabular-nums; }
.pp-sg-tick { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.pp-sg-tick:first-child { transform: none; } .pp-sg-tick--end { transform: translateX(-100%); }
.pp-sg-bands { list-style: none; display: flex; margin: 20px 0 0; padding: 0; }
.pp-sg-band { flex: 0 0 calc(var(--x1) - var(--x0)); min-width: 0; padding-inline-end: 12px; }
.pp-sg-band a { display: grid; gap: 3px; padding: 4px 0 6px; color: var(--pp-ink); text-decoration: none; transform: scale(1); transition: transform var(--pp-motion-press-out) var(--pp-ease-out); }
.pp-sg-band-key { display: block; margin-bottom: 10px; line-height: 0; }
.pp-sg-spec.is-dark .pp-sg-band-key .pp-strength-meter { padding: 0; background: transparent; }
.pp-sg-band-w { font: 600 20px/1.15 var(--pp-font-display); }
.pp-sg-band-r { font: 400 13px/1.35 var(--pp-font-body); color: var(--pp-sg-muted); }
.pp-sg-band-n { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font: 600 14px/1.3 var(--pp-font-body); color: var(--pp-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; }
.pp-sg-spec.is-dark .pp-sg-band a { color: #fff; } .pp-sg-spec.is-dark .pp-sg-band-r { color: rgba(255, 255, 255, .7); } .pp-sg-spec.is-dark .pp-sg-band-n { color: var(--pp-lime); }
.pp-sg-split { margin-top: 4px; font: 400 12.5px/1.4 var(--pp-font-body); color: rgba(255, 255, 255, .6); }
@media (max-width: 699px) {
	.pp-sg-bins { height: 72px; }
	.pp-sg-bin { width: 4px; }
	.pp-sg-bands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
	.pp-sg-band { padding: 0; }
	.pp-sg-band a { min-height: 44px; padding: 10px 0; border-top: 1px solid var(--pp-sg-line); }
	.pp-sg-spec.is-dark .pp-sg-band a { border-top-color: rgba(255, 255, 255, .14); }
	.pp-sg-band-key { margin-bottom: 6px; }
}

/* =====================================================================================================
   2. THE COMPOSITION
   ===================================================================================================== */
/* the guide follows the product-listing block (woocommerce/archive-product.php), so the sticky bars release where the products end */
.pp-sg-wrap { padding-bottom: clamp(24px, 4vw, 48px); }
/* the listing's true-mobile gutter (plp.css, lock §17) — the guide lines up with the grid above it */
@media (max-width: 767px) { .pp-sg-wrap { padding-inline: var(--pp-gutter-mobile); } }
.pp-sg { padding-top: clamp(40px, 4.4vw, 64px); }
.pp-sg-sec { padding-top: var(--pp-sg-gap); }
.pp-sg-cue { position: relative; }
.pp-sg-head { max-width: 660px; margin-bottom: 30px; }
.pp-sg-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 48px; max-width: none; }
.pp-sg-head--row > div { max-width: 660px; }
.pp-sg-head--row > .pp-sg-links { margin: 0; }

/* ---------- 2.1 the opener (no kicker, no section numbers) ---------- */
.pp-sg-open { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 64px; align-items: end; padding-top: 36px; border-top: 2px solid var(--pp-ink); }
.pp-sg-open > .pp-sg-lede { margin: 0; }
.pp-sg-open > nav { grid-column: 1 / -1; }
/* the index: four entries, each a name and one line of real catalogue data */
.pp-sg-index ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin: 16px 0 0; padding: 0; }
.pp-sg-index a { position: relative; display: grid; align-content: start; gap: 5px; height: 100%; padding: 16px 0 6px; border-top: 1px solid var(--pp-sg-line); color: var(--pp-ink); text-decoration: none; }
.pp-sg-index a::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--pp-navy); transform: scaleX(0); transform-origin: left center; transition: transform var(--pp-motion-component) var(--pp-ease-out); }
.pp-sg-index-t { display: block; font: 600 19px/1.25 var(--pp-font-display); letter-spacing: -.005em; }
.pp-sg-index-d { font: 400 14px/1.45 var(--pp-font-body); color: var(--pp-sg-muted); }
.pp-sg-down { display: inline-flex; vertical-align: -2px; margin-inline-start: 8px; color: var(--pp-sg-muted); }
.pp-sg-down .pp-i { width: 15px; height: 15px; transform: rotate(90deg); transition: transform var(--pp-motion-micro) var(--pp-ease-out); }

/* ---------- 2.2 strength, on Navy — the homepage's strength identity; full bleed by shadow + clip (no overflow) ---------- */
.pp-sg-str { margin-top: var(--pp-sg-gap); padding: clamp(48px, 5.6vw, 80px) 0; background: var(--pp-navy); box-shadow: 0 0 0 100vmax var(--pp-navy); clip-path: inset(0 -100vmax); color: #fff; }
.pp-sg-str .pp-sg-h2 { color: #fff; }
.pp-sg-str .pp-sg-body { color: rgba(255, 255, 255, .82); }
.pp-sg-str .pp-sg-link { color: var(--pp-lime); }
.pp-sg-str .pp-sg-caption { color: rgba(255, 255, 255, .62); }
.pp-sg-str a:focus-visible { outline-color: #fff; }
.pp-sg-str-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px 80px; align-items: end; }

/* ---------- 2.3 brands: the key beside its sentence; 11 marks + "All brands" = a full grid ---------- */
.pp-sg-br .pp-sg-body { margin-bottom: 10px; }
.pp-sg-key { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 13px/1.3 var(--pp-font-body); color: var(--pp-sg-muted); }
.pp-sg-marks { --pp-sg-mark-k: 1; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; }
.pp-sg-marks a { position: relative; isolation: isolate; display: grid; align-content: start; gap: 14px; height: 100%; padding: 24px 0 20px; border-top: 1px solid var(--pp-sg-line); color: var(--pp-ink); text-decoration: none; }
.pp-sg-marks a::before { content: ""; position: absolute; z-index: -1; inset: 0 -14px; border-radius: 0 0 14px 14px; background: var(--pp-soft-surface); opacity: 0; transition: opacity var(--pp-motion-micro) var(--pp-ease-out); }
.pp-sg-markbox { display: flex; align-items: center; height: 48px; transform: translateY(0); transition: transform var(--pp-motion-component) var(--pp-ease-out); }
.pp-sg-mark-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pp-sg-marks .pp-sg-count { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; }
.pp-sg-marks-all a { align-content: center; gap: 4px; }
.pp-sg-all-t { display: inline-flex; align-items: center; font: 600 17px/1.3 var(--pp-font-display); color: var(--pp-navy); }
.pp-sg-all-d { font: 400 13px/1.4 var(--pp-font-body); color: var(--pp-sg-muted); }
.pp-sg-az { margin-top: 8px; border-top: 1px solid var(--pp-sg-line); }
.pp-sg-az summary { display: flex; align-items: center; min-height: 52px; cursor: pointer; font: 600 15px/1.3 var(--pp-font-body); color: var(--pp-navy); }
.pp-sg-az ul { columns: 4 200px; column-gap: 32px; list-style: none; margin: 4px 0 0; padding: 0; }
.pp-sg-az a { display: flex; justify-content: space-between; gap: 12px; min-height: 40px; align-items: center; color: var(--pp-ink); text-decoration: none; break-inside: avoid; }

/* ---------- 2.4 flavours and formats ---------- */
.pp-sg-ff > .pp-sg-h2 { margin-bottom: 30px; }
.pp-sg-sub { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 80px; padding-top: 32px; border-top: 1px solid var(--pp-sg-line); }
.pp-sg-sub + .pp-sg-sub { margin-top: 56px; }
.pp-sg-sub-head .pp-sg-body { max-width: 34ch; }
/* flavour families: the R4 artwork with Production's transform, aura and border, at thumbnail size */
.pp-sg-fams { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 28px; margin: 0; padding: 0; }
.pp-sg-fams a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 6px 0; color: var(--pp-ink); text-decoration: none; }
.pp-sg-fam-art { position: relative; isolation: isolate; flex: none; width: 52px; height: 52px; overflow: hidden; border-radius: 12px; background: var(--pp-navy-hover, #0E2440); transform: scale(1); transition: transform var(--pp-motion-press-out) var(--pp-ease-out); }
.pp-sg .pp-sg-fam-art img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; transform: translate(var(--pp-fl-x, 0%), var(--pp-fl-y, 0%)) scale(var(--pp-fl-s, 1.25)); transform-origin: 50% 50%; transition: transform var(--pp-motion-component) var(--pp-ease-out); }
.pp-sg-fam-glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pp-sg-fam-glow::before { content: ""; position: absolute; inset: -10%; background: radial-gradient(46% 38% at var(--pp-fl-aura-x, 50%) var(--pp-fl-aura-y, 40%), var(--pp-fl-aura, #fff) 0%, rgba(0, 0, 0, 0) 70%); opacity: calc(var(--pp-fl-core, 0.19) * 0.82); transition: opacity var(--pp-motion-component) var(--pp-ease-out); }
.pp-sg-fam-glow::after { content: ""; position: absolute; inset: -10%; background: radial-gradient(70% 62% at var(--pp-fl-aura-x, 50%) var(--pp-fl-aura-y, 40%), var(--pp-fl-aura, #fff) 0%, rgba(0, 0, 0, 0) 72%); opacity: var(--pp-fl-wash, 0.095); transition: opacity var(--pp-motion-component) var(--pp-ease-out); }
@supports (mix-blend-mode: screen) { .pp-sg-fam-glow::before { mix-blend-mode: screen; opacity: var(--pp-fl-core, 0.19); } }
/* the border: Production's .18 → .42 white edge, as two layers so only opacity moves */
.pp-sg-fam-art::before, .pp-sg-fam-art::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; }
.pp-sg-fam-art::before { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.pp-sg-fam-art::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42); opacity: 0; transition: opacity var(--pp-motion-micro) var(--pp-ease-out); }
/* the formats illustration: one strip of the approved image — each link holds its third; on phones, windows of one width
   centred on each pouch. --dx/--dw/--mx/--mw/--y0/--ch/--iw are the image geometry (inc/shop-guide.php pp_shop_guide_figure_registry()) */
.pp-sg-fig { margin: 0; }
.pp-sg-fmts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; }
.pp-sg-fmt a { display: grid; align-content: start; gap: 6px; height: 100%; color: var(--pp-ink); text-decoration: none; }
.pp-sg-crop { --x0: var(--dx); --cw: var(--dw); position: relative; display: block; overflow: hidden; aspect-ratio: var(--cw) / var(--ch); margin-bottom: 12px; background: #0D2441; transform: scale(1); transition: transform var(--pp-motion-press-out) var(--pp-ease-out); }
.pp-sg .pp-sg-crop img { position: absolute; top: calc(-100% * var(--y0) / var(--ch)); left: calc(-100% * var(--x0) / var(--cw)); width: calc(100% * var(--iw) / var(--cw)); max-width: none; height: auto; }
.pp-sg-crop::after { content: ""; position: absolute; inset: 0; background: #0D2441; opacity: 0; transition: opacity var(--pp-motion-component) var(--pp-ease-out); }
.pp-sg-fmt:first-child .pp-sg-crop { border-radius: 14px 0 0 14px; }
.pp-sg-fmt:last-child .pp-sg-crop { border-radius: 0 14px 14px 0; }
.pp-sg-fmt-t, .pp-sg-fmt-d, .pp-sg-fmt-n { padding-inline-end: 24px; }
.pp-sg-fmt-t { justify-self: start; font: 600 20px/1.2 var(--pp-font-display); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: transparent; }
.pp-sg-fmt-d { font: 400 15px/1.5 var(--pp-font-body); color: var(--pp-sg-text); }
.pp-sg-fmt-n { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font: 600 14px/1.3 var(--pp-font-body); color: var(--pp-navy); }
.pp-sg-fig .pp-sg-caption { margin-top: 18px; max-width: 70ch; }
/* the text-led comparison (when the illustration cannot be shown) */
.pp-sg-cmp-wrap { overflow-x: auto; }
.pp-sg-cmp { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pp-sg-cmp :is(th, td) { padding: 14px 20px 14px 0; border-top: 1px solid var(--pp-sg-line); text-align: start; vertical-align: top; font: 400 15px/1.5 var(--pp-font-body); color: var(--pp-sg-text); }
.pp-sg-cmp thead :is(th, td) { padding-top: 0; border-top: 0; }
.pp-sg-cmp thead th { font: 600 22px/1.2 var(--pp-font-display); letter-spacing: -.005em; color: var(--pp-ink); }
.pp-sg-cmp thead td, .pp-sg-cmp tbody th { width: 20%; }
.pp-sg-cmp tbody th { font: 600 13px/1.5 var(--pp-font-body); color: var(--pp-sg-muted); }
.pp-sg-cmp-n a { display: inline-block; min-height: 36px; padding-top: 8px; font: 600 14px/1.3 var(--pp-font-body); color: var(--pp-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; }
.pp-sg-cmp-n a .pp-sg-arr { margin-inline-start: 4px; }
.pp-sg-cmp-n :is(th, td) { padding-top: 6px; }

/* ---------- 2.5 about: the essay beside one featured guide; three further reads beneath ---------- */
.pp-sg-about-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 88px; align-items: start; }
.pp-sg-dist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--pp-sg-line); }
.pp-sg-dist .pp-sg-body { margin-bottom: 0; font-size: 15px; }
.pp-sg-feature { padding-top: 6px; }
.pp-sg-further { margin-top: 64px; }
.pp-sg-further-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; margin-bottom: 6px; }
.pp-sg-further-head .pp-sg-h3 { margin: 0; }
.pp-sg-reads { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; }
.pp-sg-reads a { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 6px 12px; height: 100%; padding: 18px 0 16px; border-top: 1px solid var(--pp-sg-line); color: var(--pp-ink); text-decoration: none; }
.pp-sg-reads a::before { content: ""; position: absolute; z-index: -1; inset: 0 -14px; border-radius: 0 0 14px 14px; background: var(--pp-soft-surface); opacity: 0; transition: opacity var(--pp-motion-micro) var(--pp-ease-out); }
.pp-sg-reads b { font: 600 17px/1.3 var(--pp-font-display); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: transparent; }
.pp-sg-reads .pp-sg-arr { grid-column: 2; grid-row: 1; margin-top: 2px; color: var(--pp-navy); }
.pp-sg-reads span:not(.pp-sg-arr) { grid-column: 1 / -1; font: 400 14px/1.5 var(--pp-font-body); color: var(--pp-sg-muted); }

/* ---------- 2.6 arrival cue: a jump to a section draws a short rule above its heading, then lets it go ---------- */
.pp-sg { --pp-sg-cue: var(--pp-navy); }
.pp-sg-str { --pp-sg-cue: var(--pp-lime); }
:is(.pp-sg-sec:target, .pp-sg:target .pp-sg-open) .pp-sg-cue::before { content: ""; position: absolute; left: 0; top: -16px; width: 44px; height: 3px; border-radius: 2px; background: var(--pp-sg-cue); transform-origin: left center; pointer-events: none; animation: pp-sg-cue 2.4s var(--pp-ease-out) both; }
.pp-sg:target .pp-sg-open .pp-sg-cue::before { top: -22px; }
@keyframes pp-sg-cue { 0% { transform: scaleX(0); opacity: 1; } 20% { transform: scaleX(1); } 72% { opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes pp-sg-cue-fade { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }
/* landing: a jump puts the heading just below the compact header (html scroll-padding-top, header.css: header + 8px) —
   white sections 24px below that line, the Navy band with 32px of its Navy above the heading, the guide with its rule
   in view; phones have no scroll padding, so the header line (--pp-sticky-top) is added */
.pp-sg-sec { scroll-margin-top: calc(24px - var(--pp-sg-gap)); }
.pp-sg-str { scroll-margin-top: calc(32px - clamp(48px, 5.6vw, 80px)); }
.pp-sg { scroll-margin-top: calc(16px - clamp(40px, 4.4vw, 64px)); }
@media (max-width: 767px) {
	.pp-sg-sec { scroll-margin-top: calc(var(--pp-sticky-top, 85px) + 24px - var(--pp-sg-gap)); }
	.pp-sg-str { scroll-margin-top: calc(var(--pp-sticky-top, 85px) + 40px - clamp(48px, 5.6vw, 80px)); }
	.pp-sg { scroll-margin-top: calc(var(--pp-sticky-top, 85px) + 24px - clamp(40px, 4.4vw, 64px)); }
}

/* =====================================================================================================
   3. INTERACTION GRAMMAR — hover (hover-capable input), focus-visible (same cue), press (:active + .is-pressed)
   ===================================================================================================== */
/* 3.1 text links and arrows: the underline appears (always drawn, so nothing re-lays), the arrow travels in its own direction */
@media (hover: hover) {
	.pp-sg-link:hover .pp-sg-link-t { text-decoration-color: currentColor; }
	.pp-sg a:hover .pp-sg-arr .pp-i { transform: translateX(var(--pp-dir-travel)); }
}
.pp-sg-link:focus-visible .pp-sg-link-t { text-decoration-color: currentColor; }
.pp-sg-link:is(:active, .is-pressed) .pp-sg-link-t { text-decoration-color: currentColor; }

/* 3.2 navigation: a Navy rule draws over the entry's hairline from the left, the down-arrow travels down */
@media (hover: hover) {
	.pp-sg-index a:hover::before { transform: scaleX(1); }
	.pp-sg-index a:hover .pp-sg-index-t, .pp-sg-index a:hover .pp-sg-down { color: var(--pp-navy); }
	.pp-sg-index a:hover .pp-sg-down .pp-i { transform: rotate(90deg) translateX(var(--pp-dir-travel)); }
}
.pp-sg-index a:focus-visible::before { transform: scaleX(1); }
.pp-sg-index a:focus-visible .pp-sg-index-t { color: var(--pp-navy); }
.pp-sg-index a:is(:active, .is-pressed)::before { transform: scaleX(1); transition-duration: var(--pp-motion-press-in); }
.pp-sg-index a:is(:active, .is-pressed) .pp-sg-index-t { color: var(--pp-navy); }

/* 3.3 strength groups: the group's segment lights up and the other groups' bars step back — the plot answers the link
   (one rule per group; Core's four groups, written up to six) */
@media (hover: hover) {
	.pp-sg-spec:has(.pp-sg-band--1 > a:hover) .pp-sg-bin:not(.pp-sg-bin--1),
	.pp-sg-spec:has(.pp-sg-band--2 > a:hover) .pp-sg-bin:not(.pp-sg-bin--2),
	.pp-sg-spec:has(.pp-sg-band--3 > a:hover) .pp-sg-bin:not(.pp-sg-bin--3),
	.pp-sg-spec:has(.pp-sg-band--4 > a:hover) .pp-sg-bin:not(.pp-sg-bin--4),
	.pp-sg-spec:has(.pp-sg-band--5 > a:hover) .pp-sg-bin:not(.pp-sg-bin--5),
	.pp-sg-spec:has(.pp-sg-band--6 > a:hover) .pp-sg-bin:not(.pp-sg-bin--6) { opacity: .22; }
	.pp-sg-spec:has(.pp-sg-band--1 > a:hover) .pp-sg-seg--1::after,
	.pp-sg-spec:has(.pp-sg-band--2 > a:hover) .pp-sg-seg--2::after,
	.pp-sg-spec:has(.pp-sg-band--3 > a:hover) .pp-sg-seg--3::after,
	.pp-sg-spec:has(.pp-sg-band--4 > a:hover) .pp-sg-seg--4::after,
	.pp-sg-spec:has(.pp-sg-band--5 > a:hover) .pp-sg-seg--5::after,
	.pp-sg-spec:has(.pp-sg-band--6 > a:hover) .pp-sg-seg--6::after { opacity: 1; }
	.pp-sg-band a:hover .pp-sg-band-n { text-decoration-color: currentColor; }
}
.pp-sg-spec:has(.pp-sg-band--1 > a:focus-visible) .pp-sg-bin:not(.pp-sg-bin--1),
.pp-sg-spec:has(.pp-sg-band--2 > a:focus-visible) .pp-sg-bin:not(.pp-sg-bin--2),
.pp-sg-spec:has(.pp-sg-band--3 > a:focus-visible) .pp-sg-bin:not(.pp-sg-bin--3),
.pp-sg-spec:has(.pp-sg-band--4 > a:focus-visible) .pp-sg-bin:not(.pp-sg-bin--4),
.pp-sg-spec:has(.pp-sg-band--5 > a:focus-visible) .pp-sg-bin:not(.pp-sg-bin--5),
.pp-sg-spec:has(.pp-sg-band--6 > a:focus-visible) .pp-sg-bin:not(.pp-sg-bin--6) { opacity: .22; }
.pp-sg-spec:has(.pp-sg-band--1 > a:focus-visible) .pp-sg-seg--1::after,
.pp-sg-spec:has(.pp-sg-band--2 > a:focus-visible) .pp-sg-seg--2::after,
.pp-sg-spec:has(.pp-sg-band--3 > a:focus-visible) .pp-sg-seg--3::after,
.pp-sg-spec:has(.pp-sg-band--4 > a:focus-visible) .pp-sg-seg--4::after,
.pp-sg-spec:has(.pp-sg-band--5 > a:focus-visible) .pp-sg-seg--5::after,
.pp-sg-spec:has(.pp-sg-band--6 > a:focus-visible) .pp-sg-seg--6::after { opacity: 1; }
.pp-sg-band a:focus-visible .pp-sg-band-n { text-decoration-color: currentColor; }
.pp-sg-band a:is(:active, .is-pressed) { transform: scale(var(--pp-press-scale)); transition-duration: var(--pp-motion-press-in); }
/* touch: while a finger is down on a group, the plot answers exactly as it does to a pointer */
.pp-sg-spec:has(.pp-sg-band--1 > a:is(:active, .is-pressed)) .pp-sg-bin:not(.pp-sg-bin--1),
.pp-sg-spec:has(.pp-sg-band--2 > a:is(:active, .is-pressed)) .pp-sg-bin:not(.pp-sg-bin--2),
.pp-sg-spec:has(.pp-sg-band--3 > a:is(:active, .is-pressed)) .pp-sg-bin:not(.pp-sg-bin--3),
.pp-sg-spec:has(.pp-sg-band--4 > a:is(:active, .is-pressed)) .pp-sg-bin:not(.pp-sg-bin--4),
.pp-sg-spec:has(.pp-sg-band--5 > a:is(:active, .is-pressed)) .pp-sg-bin:not(.pp-sg-bin--5),
.pp-sg-spec:has(.pp-sg-band--6 > a:is(:active, .is-pressed)) .pp-sg-bin:not(.pp-sg-bin--6) { opacity: .22; }
.pp-sg-spec:has(.pp-sg-band--1 > a:is(:active, .is-pressed)) .pp-sg-seg--1::after,
.pp-sg-spec:has(.pp-sg-band--2 > a:is(:active, .is-pressed)) .pp-sg-seg--2::after,
.pp-sg-spec:has(.pp-sg-band--3 > a:is(:active, .is-pressed)) .pp-sg-seg--3::after,
.pp-sg-spec:has(.pp-sg-band--4 > a:is(:active, .is-pressed)) .pp-sg-seg--4::after,
.pp-sg-spec:has(.pp-sg-band--5 > a:is(:active, .is-pressed)) .pp-sg-seg--5::after,
.pp-sg-spec:has(.pp-sg-band--6 > a:is(:active, .is-pressed)) .pp-sg-seg--6::after { opacity: 1; }

/* 3.4 brand index: a soft surface arrives behind the tile, the mark lifts (--pp-hover-rise), the count turns Navy */
@media (hover: hover) {
	.pp-sg-marks a:hover::before { opacity: 1; }
	.pp-sg-marks a:hover .pp-sg-markbox { transform: translateY(calc(var(--pp-hover-rise) * -1)); }
	.pp-sg-marks a:hover .pp-sg-count { color: var(--pp-navy); text-decoration-color: currentColor; }
}
.pp-sg-marks a:focus-visible::before { opacity: 1; }
.pp-sg-marks a:focus-visible .pp-sg-count { color: var(--pp-navy); text-decoration-color: currentColor; }
.pp-sg-marks a:is(:active, .is-pressed)::before { opacity: 1; background: var(--pp-navy-tint); transition-duration: var(--pp-motion-press-in); }
.pp-sg-marks a:is(:active, .is-pressed) .pp-sg-markbox { transform: scale(var(--pp-press-scale)); transition-duration: var(--pp-motion-press-in); }

/* 3.5 flavour families: Production's tile grammar (LOCKED-SPEC §11) at thumbnail size — artwork lift, aura raise,
   border strengthen, name underline */
@media (hover: hover) {
	.pp-sg-fams a:hover .pp-sg-fam-art img { transform: translate(var(--pp-fl-x, 0%), var(--pp-fl-y, 0%)) translateY(-2px) scale(var(--pp-fl-s, 1.25)); }
	.pp-sg-fams a:hover .pp-sg-fam-glow::before { opacity: calc(var(--pp-fl-core-h, 0.29) * 0.82); }
	.pp-sg-fams a:hover .pp-sg-fam-glow::after { opacity: var(--pp-fl-wash-h, 0.135); }
	.pp-sg-fams a:hover .pp-sg-fam-art::after { opacity: 1; }
	.pp-sg-fams a:hover .pp-sg-fam-n { color: var(--pp-navy); text-decoration-color: currentColor; }
}
.pp-sg-fams a:focus-visible .pp-sg-fam-art img { transform: translate(var(--pp-fl-x, 0%), var(--pp-fl-y, 0%)) translateY(-2px) scale(var(--pp-fl-s, 1.25)); }
.pp-sg-fams a:focus-visible .pp-sg-fam-glow::before { opacity: calc(var(--pp-fl-core-h, 0.29) * 0.82); }
@supports (mix-blend-mode: screen) {
	.pp-sg-fams a:focus-visible .pp-sg-fam-glow::before { opacity: var(--pp-fl-core-h, 0.29); }
	@media (hover: hover) { .pp-sg-fams a:hover .pp-sg-fam-glow::before { opacity: var(--pp-fl-core-h, 0.29); } }
}
.pp-sg-fams a:focus-visible .pp-sg-fam-glow::after { opacity: var(--pp-fl-wash-h, 0.135); }
.pp-sg-fams a:focus-visible .pp-sg-fam-art::after { opacity: 1; }
.pp-sg-fams a:focus-visible .pp-sg-fam-n { color: var(--pp-navy); text-decoration-color: currentColor; }
.pp-sg-fams a:is(:active, .is-pressed) .pp-sg-fam-art { transform: scale(var(--pp-press-scale-compact)); transition-duration: var(--pp-motion-press-in); }
.pp-sg-fams a:is(:active, .is-pressed) .pp-sg-fam-art::after { opacity: 1; }
.pp-sg-fams a:is(:active, .is-pressed) .pp-sg-fam-n { color: var(--pp-navy); }

/* 3.6 formats: with the illustration, the chosen share keeps its light while the others step back; the comparison: the count's underline */
@media (hover: hover) {
	.pp-sg-fmts:has(a:hover) a:not(:hover) .pp-sg-crop::after { opacity: .55; }
	.pp-sg-fmt a:hover .pp-sg-fmt-t { color: var(--pp-navy); text-decoration-color: currentColor; }
	.pp-sg-cmp-n a:hover { text-decoration-color: currentColor; }
}
.pp-sg-fmts:has(a:focus-visible) a:not(:focus-visible) .pp-sg-crop::after { opacity: .55; }
.pp-sg-fmt a:focus-visible .pp-sg-fmt-t { color: var(--pp-navy); text-decoration-color: currentColor; }
.pp-sg-cmp-n a:focus-visible { text-decoration-color: currentColor; }
.pp-sg-fmt a:is(:active, .is-pressed) .pp-sg-crop::after { opacity: .22; transition-duration: var(--pp-motion-press-in); }
.pp-sg-fmt a:is(:active, .is-pressed) .pp-sg-fmt-t { color: var(--pp-navy); }

/* 3.7 Knowledge: the featured card keeps Production's NP.4 hover; the further reads take the brand tiles' surface */
@media (hover: hover) {
	.pp-sg-reads a:hover::before { opacity: 1; }
	.pp-sg-reads a:hover b { color: var(--pp-navy); text-decoration-color: currentColor; }
}
.pp-sg-reads a:focus-visible::before { opacity: 1; }
.pp-sg-reads a:focus-visible b { color: var(--pp-navy); text-decoration-color: currentColor; }
.pp-sg-reads a:is(:active, .is-pressed)::before { opacity: 1; background: var(--pp-navy-tint); transition-duration: var(--pp-motion-press-in); }

/* 3.9 reduced motion: the design system already zeroes the durations, rises, travel and press scale; these rules cancel
   the component transforms that would still move (a 0ms transition still moves) and keep colour and opacity cues */
@media (prefers-reduced-motion: reduce) {
	.pp-sg-index a::before { transition: none; }
	.pp-sg .pp-sg-index a:hover .pp-sg-down .pp-i, .pp-sg .pp-sg-index a:focus-visible .pp-sg-down .pp-i { transform: rotate(90deg); }
	.pp-sg .pp-sg-fams a:is(:hover, :focus-visible) .pp-sg-fam-art img { transform: translate(var(--pp-fl-x, 0%), var(--pp-fl-y, 0%)) scale(var(--pp-fl-s, 1.25)); }
	:is(.pp-sg-sec:target, .pp-sg:target .pp-sg-open) .pp-sg-cue::before { animation-name: pp-sg-cue-fade; transform: none; }
}
@media (forced-colors: active) {
	.pp-sg-fam-glow, .pp-sg-crop::after, .pp-sg-marks a::before, .pp-sg-reads a::before { display: none; }
}

/* =====================================================================================================
   6. RESPONSIVE
   ===================================================================================================== */
@media (max-width: 1099px) {
	.pp-sg-marks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pp-sg-str-grid, .pp-sg-about-grid, .pp-sg-sub { grid-template-columns: minmax(0, 1fr); }
	.pp-sg-index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
	.pp-sg-index li:nth-child(n + 3) a { margin-top: 4px; }
	.pp-sg-about-grid { gap: 40px; }
	.pp-sg-feature { max-width: 560px; }
}
@media (max-width: 799px) {
	.pp-sg-open { grid-template-columns: minmax(0, 1fr); }
	.pp-sg-fams { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
	.pp-sg-dist { grid-template-columns: minmax(0, 1fr); }
	.pp-sg-reads { grid-template-columns: minmax(0, 1fr); }
	.pp-sg-reads a { padding-bottom: 14px; }
	.pp-sg-further { margin-top: 48px; }
}
@media (max-width: 599px) {
	.pp-sg { --pp-sg-gap: 56px; }
	.pp-sg-open { padding-top: 28px; }
	.pp-sg-index ul { gap: 0 16px; }
	.pp-sg-index a { padding: 14px 0 10px; }
	.pp-sg-index-t { font-size: 17px; }
	.pp-sg-index-d { font-size: 13.5px; }
	.pp-sg-str { padding: 48px 0 40px; }
	.pp-sg-marks { --pp-sg-mark-k: .8; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
	.pp-sg-marks a { gap: 8px; padding: 14px 0 12px; }
	.pp-sg-marks a::before { inset: 0 -10px; }
	.pp-sg-markbox { height: 38px; }
	.pp-sg-all-t { font-size: 16px; }
	.pp-sg-fams a { gap: 10px; min-height: 56px; }
	.pp-sg-fam-art { width: 44px; height: 44px; border-radius: 10px; }
	.pp-sg-fam-n { font-size: 15px; }
	.pp-sg-sub + .pp-sg-sub { margin-top: 40px; }
	/* the illustration on phones: one row per format, a window of the same width centred on each pouch — one scale for all three */
	.pp-sg-fmts { grid-template-columns: minmax(0, 1fr); }
	.pp-sg-fmt a { grid-template-columns: 120px minmax(0, 1fr); align-items: start; column-gap: 14px; row-gap: 2px; padding: 12px 0; border-top: 1px solid var(--pp-sg-line); }
	.pp-sg-fmt:last-child a { border-bottom: 1px solid var(--pp-sg-line); }
	.pp-sg-crop { --x0: var(--mx); --cw: var(--mw); grid-row: 1 / span 3; margin: 2px 0 0; }
	.pp-sg-fmt .pp-sg-crop { border-radius: 10px; }
	.pp-sg-fmt-t, .pp-sg-fmt-d, .pp-sg-fmt-n { padding-inline-end: 0; }
	.pp-sg-fmt-t { font-size: 18px; }
	.pp-sg-fmt-d { font-size: 14px; }
	.pp-sg-fmt-n { min-height: 32px; }
	.pp-sg-fmt a:is(:active, .is-pressed) .pp-sg-crop { transform: scale(var(--pp-press-scale-compact)); transition-duration: var(--pp-motion-press-in); }
	.pp-sg-cmp :is(th, td) { padding: 12px 10px 12px 0; font-size: 14px; }
	.pp-sg-cmp thead th { font-size: 18px; }
	.pp-sg-cmp thead td, .pp-sg-cmp tbody th { width: 24%; }
	.pp-sg-cmp tbody th { font-size: 12.5px; }
	.pp-sg-further-head { flex-direction: column; align-items: flex-start; }
}