/* ==========================================================================
   BRAND PAGE SHELL — BP.1 Phase 1 (template-brand-page.php +
   page-brands.php). Commerce-first architecture: campaign hero (its own
   stylesheet) → jump nav → F2 facts row → product discovery (the SHARED
   card grammar, product-card.css — no second card system) → knowledge
   modules → FAQ. All PouchPick-owned; design-system tokens only.
   ========================================================================== */

.pp-bp { background: var(--pp-page-bg); }

.pp-bp-unavailable { padding: 60px 0; }

.pp-bp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Typography */
.pp-bp-h1 { margin: 0 0 6px; font-family: var(--pp-font-display); font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.15; color: var(--pp-ink); }
.pp-bp-h2 { margin: 0; font-family: var(--pp-font-display); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.2; color: var(--pp-ink); }

/* --------------------------------------------------------------------------
   Jump nav — compact, sticky under the header. UI.1 (Human Lock §11, the
   one Human-authorised change to this read-only page): it follows the ONE
   sticky-offset authority (header.css --pp-sticky-top), so it sits flush
   under the fixed desktop header, under the S1 tablet header (and T2 above
   it while the cart progresses) and under the persistent mobile header —
   no 72–102px tablet gap, no 15px mobile slit. Was --pp-header-compact-h
   (desktop-only, 102px everywhere else).
   -------------------------------------------------------------------------- */
.pp-bp-jumpnav {
	position: sticky;
	top: calc(var(--pp-sticky-top, 0px) + var(--pp-admin-bar-h, 0px));
	z-index: 20;
	background: var(--pp-page-bg);
	border-bottom: 1px solid var(--pp-border);
}

.pp-bp-jumpnav-in { display: flex; gap: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pp-bp-jumpnav-in::-webkit-scrollbar { display: none; }

.pp-bp-jumpnav-in a {
	flex: none;
	padding: 13px 0 11px;
	border-bottom: 2px solid transparent;
	font-family: var(--pp-font-display);
	font-weight: 600;
	font-size: 13.5px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--pp-secondary-text);
}

.pp-bp-jumpnav-in a:hover { color: var(--pp-navy); border-bottom-color: var(--pp-navy); }
.pp-bp-jumpnav-in a:focus-visible { outline: 2px solid var(--pp-navy); outline-offset: -2px; }

/* Anchored sections clear the sticky jump nav on top of the global
   scroll-padding-top (html, header.css) — margins combine additively. */
.pp-bp-products,
.pp-bp-module { scroll-margin-top: 52px; }

/* --------------------------------------------------------------------------
   F2 facts row (lab F2 stat row) — presentation only; every value is
   catalogue-computed or an explicitly approved verified fact.
   -------------------------------------------------------------------------- */
.pp-bp-facts { padding: 24px 0 0; }

.pp-bp-stat-row { display: flex; flex-wrap: wrap; border: 1px solid var(--pp-border); border-radius: 12px; background: var(--pp-card-bg); }

.pp-bp-stat { display: flex; align-items: center; gap: 11px; padding: 14px 20px; flex: 1 1 auto; border-left: 1px solid var(--pp-border); min-width: 0; }
.pp-bp-stat:first-child { border-left: none; }

.pp-bp-stat .pp-bp-stat-icon { width: 22px; height: 22px; flex: none; color: var(--pp-navy); }

.pp-bp-stat b { display: block; font-family: var(--pp-font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.15; color: var(--pp-ink); white-space: nowrap; }
.pp-bp-stat span { display: block; font-size: 11.5px; color: var(--pp-secondary-text); margin-top: 1px; }

@media (max-width: 767px) {
	.pp-bp-stat-row { display: grid; grid-template-columns: 1fr 1fr; }
	.pp-bp-stat { border-left: none; border-top: 1px solid var(--pp-border); }
	.pp-bp-stat:nth-child(-n+2) { border-top: none; }
	.pp-bp-stat:nth-child(even) { border-left: 1px solid var(--pp-border); }
	.pp-bp-stat b { white-space: normal; } /* long approved values wrap, never overflow */
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.pp-bp-products,
.pp-bp-module { padding: 40px 0 8px; }

.pp-bp-module.pp-bp-faq { padding-bottom: 48px; }

.pp-bp-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }

.pp-bp-seeall { display: inline-flex; align-items: center; gap: 6px; flex: none; font-weight: 600; font-size: 14px; color: var(--pp-navy); }
.pp-bp-seeall:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Product discovery — the shared card partial in a responsive grid */
.pp-bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }

@media (max-width: 480px) {
	.pp-bp-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

@media (max-width: 360px) {
	.pp-bp-grid { grid-template-columns: 1fr; }
}

/* Knowledge prose */
.pp-bp-prose { max-width: 720px; margin-top: 14px; }
.pp-bp-prose p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.65; color: var(--pp-ink); }

/* FAQ — native disclosure, no script */
.pp-bp-faq-list { max-width: 760px; margin-top: 10px; border-top: 1px solid var(--pp-border); }

.pp-bp-faq-item { border-bottom: 1px solid var(--pp-border); }

.pp-bp-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 0;
	font-weight: 600;
	font-size: 15.5px;
	color: var(--pp-ink);
	cursor: pointer;
	list-style: none;
}

.pp-bp-faq-item summary::-webkit-details-marker { display: none; }
.pp-bp-faq-item summary .pp-i { flex: none; color: var(--pp-secondary-text); transition: transform 160ms ease; }
.pp-bp-faq-item[open] summary .pp-i { transform: rotate(180deg); }
.pp-bp-faq-item summary:focus-visible { outline: 2px solid var(--pp-navy); outline-offset: 2px; border-radius: 4px; }

.pp-bp-faq-item > p { margin: 0; padding: 0 0 16px; max-width: 680px; font-size: 15px; line-height: 1.6; color: var(--pp-secondary-text); }

@media (prefers-reduced-motion: reduce) {
	.pp-bp-faq-item summary .pp-i { transition: none; }
}

/* ==========================================================================
   RICH RESTORATION (BP.1 correction 2026-09-20) — the B4 module family.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Development-preview chrome (LOCAL ONLY — inc/brand-preview.php renders
   none of this in normal mode). Review annotation, not customer UI.
   -------------------------------------------------------------------------- */
.pp-bp-preview-banner { background: var(--pp-navy-chrome); color: #fff; }

.pp-bp-preview-banner-in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 9px 0; font-size: 12.5px; line-height: 1.45; }
.pp-bp-preview-banner-in b { flex: none; font-family: var(--pp-font-display); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--pp-amber-bg); color: var(--pp-amber-text); border-radius: 5px; padding: 3px 8px; }
.pp-bp-preview-banner-in span { opacity: 0.85; }
.pp-bp-preview-banner-in a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-inline-start: auto; }

/* ONE shared preview-token language (polish §20): LEVEL 2 = the bordered
   module token; LEVEL 3 = the borderless record token. Both quiet — the
   LEVEL-1 banner stays the strong notice. The amber dot ties every level
   to the banner's DEVELOPMENT PREVIEW tag. */
.pp-bp-ptok {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	font-family: var(--pp-font-display);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pp-secondary-text);
	border: 1px solid var(--pp-border);
	border-radius: 999px;
	padding: 3px 9px;
	vertical-align: middle;
	white-space: nowrap;
}

.pp-bp-ptok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pp-amber-text); flex: none; }

.pp-bp-ptok--record { border: 0; padding: 0; border-radius: 0; font-size: 10px; gap: 5px; }

/* F2 group-level note (polish §17) — one token for the whole fact row */
.pp-bp-facts-note { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* Fixture cards are inert presentation stand-ins */
.pp-bp-card--fixture .pp-card-title { color: var(--pp-ink); }
.pp-bp-badge-preview { background: var(--pp-amber-bg); color: var(--pp-amber-text); border: 1px solid var(--pp-amber-border); }

/* --------------------------------------------------------------------------
   Section head add-ons + shared module scaffolding
   -------------------------------------------------------------------------- */
.pp-bp-sec-head-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.pp-bp-count { font-size: 14px; font-weight: 600; color: var(--pp-secondary-text); }

.pp-bp-h3 { margin: 22px 0 10px; font-family: var(--pp-font-display); font-weight: 600; font-size: 1rem; color: var(--pp-ink); }

.pp-bp-note { margin: 0 0 16px; max-width: 720px; font-size: 13.5px; line-height: 1.55; color: var(--pp-secondary-text); }

.pp-bp-module-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.pp-bp-module-copy p { margin: 0 0 13px; font-size: 15.5px; line-height: 1.65; color: var(--pp-ink); max-width: 640px; }
.pp-bp-module-copy--wide { max-width: 760px; margin-bottom: 18px; }

@media (max-width: 1024px) {
	.pp-bp-module-cols { grid-template-columns: 1fr; gap: 22px; }
}

/* --------------------------------------------------------------------------
   Featured strip
   -------------------------------------------------------------------------- */
.pp-bp-featured { padding: 40px 0 8px; }
.pp-bp-featured-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

@media (max-width: 1024px) { .pp-bp-featured-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pp-bp-featured-row { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (max-width: 360px) { .pp-bp-featured-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Catalogue toolbar — facets, sort, active chips
   -------------------------------------------------------------------------- */
.pp-bp-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0 16px; border-top: 1px solid var(--pp-border); }

.pp-bp-facet { position: relative; }

.pp-bp-facet-trigger {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border: 1.5px solid var(--pp-border);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--pp-ink);
	cursor: pointer;
}

.pp-bp-facet-trigger:hover { border-color: var(--pp-border-hover); }
.pp-bp-facet-trigger.has-selection { border-color: var(--pp-navy); color: var(--pp-navy); }
.pp-bp-facet-trigger .n { background: var(--pp-navy); color: #fff; border-radius: 6px; font-size: 11.5px; padding: 1px 6px; }
.pp-bp-facet-trigger:focus-visible { outline: 2px solid var(--pp-navy); outline-offset: 2px; }

.pp-bp-facet-popover {
	position: absolute;
	top: calc(100% + 6px);
	inset-inline-start: 0;
	z-index: 30;
	min-width: 210px;
	background: #fff;
	border: 1px solid var(--pp-border);
	border-radius: 12px;
	box-shadow: var(--pp-shadow-popover);
	padding: 8px;
}

.pp-bp-facet-option { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--pp-ink); cursor: pointer; }
.pp-bp-facet-option:hover { background: var(--pp-soft-surface); }
.pp-bp-facet-option .n { margin-inline-start: auto; font-size: 12px; color: var(--pp-secondary-text); }
.pp-bp-facet-option input { accent-color: var(--pp-navy); width: 16px; height: 16px; }

.pp-bp-sort { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--pp-secondary-text); }
.pp-bp-sort select { font: inherit; font-weight: 600; color: var(--pp-ink); padding: 8px 10px; border: 1.5px solid var(--pp-border); border-radius: 10px; background: #fff; }

.pp-bp-active { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 0 14px; }
.pp-bp-active-label { font-size: 13px; font-weight: 600; color: var(--pp-secondary-text); }
.pp-bp-active-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--pp-navy); border-radius: 999px; background: var(--pp-navy-tint); color: var(--pp-navy); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pp-bp-clear { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--pp-secondary-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pp-bp-clear:hover { color: var(--pp-navy); }

@media (max-width: 767px) {
	.pp-bp-toolbar { gap: 8px; }
	.pp-bp-sort { margin-inline-start: 0; width: 100%; }
}

/* Load more + progress */
.pp-bp-loadmore { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 0 4px; }
.pp-bp-progress-label { margin: 0; font-size: 13.5px; color: var(--pp-secondary-text); }
.pp-bp-progress { width: 220px; height: 4px; border-radius: 2px; background: var(--pp-secondary-surface); overflow: hidden; }
.pp-bp-progress i { display: block; height: 100%; background: var(--pp-navy); border-radius: 2px; }

/* --------------------------------------------------------------------------
   Flavour education — family map
   -------------------------------------------------------------------------- */
.pp-bp-flav-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }

.pp-bp-flav-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0; /* grid items default to min-width:auto — the nowrap representative-product line must never widen the track (LOOP's long names blew the 2-col mobile map by 44px) */
	padding: 16px 16px 14px;
	border: 1px solid var(--pp-border);
	border-radius: 12px;
	background: #fff;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.pp-bp-flav-card:hover { border-color: var(--pp-navy); }
.pp-bp-flav-card:focus-visible { outline: 2px solid var(--pp-navy); outline-offset: 2px; }
.pp-bp-flav-card .pp-flavour-i { width: 26px; height: 26px; margin-bottom: 6px; } /* the family's shared glyph and colour (inc/icons.php, header-commerce.css) in the 26px slot the colour tile held, so the card keeps its geometry */
.pp-bp-flav-card b { font-family: var(--pp-font-display); font-size: 15.5px; color: var(--pp-ink); }
.pp-bp-flav-n { font-size: 12.5px; color: var(--pp-secondary-text); }
.pp-bp-flav-rep { font-size: 12px; color: var(--pp-secondary-text); opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* --------------------------------------------------------------------------
   Strength — spectrum + distribution
   -------------------------------------------------------------------------- */
.pp-bp-spectrum { padding: 26px 8px 0; }
.pp-bp-spec-track { position: relative; height: 6px; border-radius: 3px; background: var(--pp-secondary-surface); }
.pp-bp-spec-band { position: absolute; top: 0; height: 100%; border-radius: 3px; background: var(--pp-navy); opacity: 0.25; }
.pp-bp-spec-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.pp-bp-spec-mark i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--pp-navy); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--pp-border); }
.pp-bp-spec-mark b { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--pp-ink); }
.pp-bp-spec-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--pp-secondary-text); }

.pp-bp-dist { display: flex; flex-direction: column; gap: 8px; }
.pp-bp-dist-row { display: grid; grid-template-columns: 74px 1fr 28px; align-items: center; gap: 10px; }
.pp-bp-dist-mg { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--pp-navy); text-align: start; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; }
.pp-bp-dist-mg:hover { text-decoration-color: currentColor; }
.pp-bp-dist-bar { height: 10px; border-radius: 5px; background: var(--pp-secondary-surface); overflow: hidden; }
.pp-bp-dist-bar i { display: block; height: 100%; border-radius: 5px; background: var(--pp-navy); min-width: 4px; }
.pp-bp-dist-n { font-size: 12.5px; color: var(--pp-secondary-text); text-align: end; }

/* --------------------------------------------------------------------------
   Format education
   -------------------------------------------------------------------------- */
.pp-bp-format-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; align-self: start; }

.pp-bp-format-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	padding: 16px;
	border: 1px solid var(--pp-border);
	border-radius: 12px;
	background: #fff;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.pp-bp-format-card:hover { border-color: var(--pp-navy); }
.pp-bp-format-card:focus-visible { outline: 2px solid var(--pp-navy); outline-offset: 2px; }
.pp-bp-format-card .pp-bp-format-glyph { width: 26px; height: 26px; color: var(--pp-navy); margin-bottom: 6px; }
.pp-bp-format-card b { font-family: var(--pp-font-display); font-size: 15.5px; color: var(--pp-ink); }
.pp-bp-format-card span { font-size: 12.5px; color: var(--pp-secondary-text); }

/* --------------------------------------------------------------------------
   Availability matrix
   -------------------------------------------------------------------------- */
/* position:relative makes this wrapper the CONTAINING BLOCK for the
   absolutely-positioned .pp-bp-visually-hidden spans inside matrix cells
   — a table cell is not a containing block, so without it those spans
   resolve outside the scroll context and widen the DOCUMENT at mobile
   widths (found by the rich-preview overflow probe: 417px @320). */
.pp-bp-table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pp-bp-table { border-collapse: collapse; min-width: 100%; background: #fff; border: 1px solid var(--pp-border); border-radius: 12px; font-size: 14px; }
.pp-bp-table th, .pp-bp-table td { padding: 11px 14px; border-bottom: 1px solid var(--pp-border); text-align: center; white-space: nowrap; }
.pp-bp-table thead th { font-family: var(--pp-font-display); font-size: 12.5px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--pp-secondary-text); }
.pp-bp-table tbody th { text-align: start; font-weight: 600; color: var(--pp-ink); }
.pp-bp-table tbody tr:last-child th, .pp-bp-table tbody tr:last-child td { border-bottom: 0; }
.pp-bp-table td.is-yes { color: var(--pp-success-text); font-weight: 700; }
.pp-bp-table td.is-no { color: var(--pp-border-hover); }

/* --------------------------------------------------------------------------
   Rich About — deep story, quote, mini facts
   -------------------------------------------------------------------------- */
.pp-bp-about-cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.pp-bp-story-deep { margin-top: 6px; }

.pp-bp-quote { margin: 0 0 18px; padding: 16px 18px; border-inline-start: 3px solid var(--pp-navy); background: var(--pp-soft-surface); border-radius: 0 12px 12px 0; }
.pp-bp-quote p { margin: 0 0 6px; font-family: var(--pp-font-display); font-weight: 600; font-size: 16.5px; line-height: 1.4; color: var(--pp-ink); }
.pp-bp-quote cite { font-style: normal; font-size: 12px; color: var(--pp-secondary-text); }

.pp-bp-minifacts { margin: 0; border: 1px solid var(--pp-border); border-radius: 12px; background: #fff; overflow: hidden; }
/* CAT.6B: a long value (a maker's full company name) wraps under its label instead of being clipped in the narrow
   mobile column; values that fit keep the one-row layout unchanged. */
.pp-bp-minifacts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; padding: 11px 16px; border-bottom: 1px solid var(--pp-border); }
.pp-bp-minifacts > div:last-child { border-bottom: 0; }
.pp-bp-minifacts > div.is-preview dt::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pp-amber-text); margin-inline-end: 6px; vertical-align: 1px; }
.pp-bp-minifacts dt { font-size: 13px; color: var(--pp-secondary-text); }
.pp-bp-minifacts dd { margin: 0 0 0 auto; min-width: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; color: var(--pp-ink); text-align: end; }
/* CAT.6B: on a phone the mini-facts panel stacks under the story — side by side it was only ~100–130 px wide, too
   narrow for a maker's company name. */
@media (max-width: 480px) {
	.pp-bp-about-cols { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */
.pp-bp-tl { list-style: none; margin: 6px 0 0; padding: 0; max-width: 760px; }
.pp-bp-tl-item { display: grid; grid-template-columns: 92px 1fr; gap: 18px; position: relative; padding: 0 0 22px 0; }
.pp-bp-tl-item::before { content: ""; position: absolute; left: 100px; top: 8px; bottom: -2px; width: 2px; background: var(--pp-border); }
.pp-bp-tl-item:last-child::before { display: none; }
.pp-bp-tl-item::after { content: ""; position: absolute; left: 96px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--pp-navy); }
.pp-bp-tl-year { font-family: var(--pp-font-display); font-weight: 700; font-size: 15px; color: var(--pp-navy); text-align: end; padding-right: 22px; }
.pp-bp-tl-body { padding-left: 22px; }
.pp-bp-tl-body b { display: block; font-size: 15px; color: var(--pp-ink); margin-bottom: 2px; }
.pp-bp-tl-body p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--pp-secondary-text); }

@media (max-width: 480px) {
	.pp-bp-tl-item { grid-template-columns: 64px 1fr; }
	.pp-bp-tl-item::before { left: 72px; }
	.pp-bp-tl-item::after { left: 68px; }
	.pp-bp-tl-year { padding-right: 16px; }
	.pp-bp-tl-body { padding-left: 16px; }
}

/* --------------------------------------------------------------------------
   Brand heritage — structured deep-history chapters (BP.2 §8/§14):
   scannable cards, never a wall of text.
   -------------------------------------------------------------------------- */
.pp-bp-heritage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; max-width: 1040px; }

.pp-bp-heritage-card { padding: 20px 22px; border: 1px solid var(--pp-border); border-radius: 14px; background: #fff; }
.pp-bp-heritage-t { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-family: var(--pp-font-display); font-weight: 600; font-size: 1rem; color: var(--pp-ink); }
.pp-bp-heritage-card p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--pp-secondary-text); }
.pp-bp-heritage-card p:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
	.pp-bp-heritage-grid { grid-template-columns: 1fr; gap: 10px; }
	.pp-bp-heritage-card { padding: 15px 16px; }
}

/* --------------------------------------------------------------------------
   Packaging evolution — period-labelled generations (BP.2 §8; the
   timeline's grammar with period words instead of dates — §9).
   -------------------------------------------------------------------------- */
.pp-bp-pkg { list-style: none; margin: 6px 0 0; padding: 0; max-width: 760px; }
.pp-bp-pkg-item { display: grid; grid-template-columns: 118px 1fr; gap: 18px; padding: 0 0 18px; }
.pp-bp-pkg-item:last-child { padding-bottom: 0; }
.pp-bp-pkg-period { padding-top: 2px; font-family: var(--pp-font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pp-navy); text-align: end; }
.pp-bp-pkg-body b { display: block; font-size: 15px; color: var(--pp-ink); margin-bottom: 2px; }
.pp-bp-pkg-body p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--pp-secondary-text); }

@media (max-width: 480px) {
	.pp-bp-pkg-item { grid-template-columns: 84px 1fr; gap: 12px; }
}

/* --------------------------------------------------------------------------
   Renames table
   -------------------------------------------------------------------------- */
.pp-bp-table--renames th, .pp-bp-table--renames td { text-align: start; white-space: normal; }
.pp-bp-rn-old { color: var(--pp-secondary-text); text-decoration: line-through; text-decoration-color: var(--pp-border-hover); }
.pp-bp-rn-arrow { color: var(--pp-secondary-text); }
.pp-bp-rn-new b { display: block; color: var(--pp-ink); }
.pp-bp-rn-note { display: block; font-size: 12.5px; color: var(--pp-secondary-text); margin-top: 2px; }
.pp-bp-rn-cta { text-align: end; }

/* --------------------------------------------------------------------------
   Notable products
   -------------------------------------------------------------------------- */
.pp-bp-notable-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }

.pp-bp-notable-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--pp-border); border-radius: 14px; background: #fff; }
.pp-bp-notable-card.is-preview { border-style: dashed; }
.pp-bp-notable-shot { display: block; width: 130px; margin: 0 auto 8px; }
.pp-bp-notable-tag { font-family: var(--pp-font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pp-navy); }
.pp-bp-notable-card b { font-size: 16px; color: var(--pp-ink); }
.pp-bp-notable-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--pp-secondary-text); }
.pp-bp-notable-link { margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--pp-navy); }
.pp-bp-notable-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   First-product guidance
   -------------------------------------------------------------------------- */
.pp-bp-buying .pp-bp-module-copy { border-inline-start: 3px solid var(--pp-navy); padding-inline-start: 20px; margin-top: 14px; }

/* --------------------------------------------------------------------------
   FAQ additions (question span + inline pending chip)
   -------------------------------------------------------------------------- */
.pp-bp-faq-item summary .pp-bp-faq-q { flex: 1 1 auto; min-width: 0; }
.pp-bp-faq-item summary .pp-bp-ptok--record { flex: none; }

/* --------------------------------------------------------------------------
   Guides & help
   -------------------------------------------------------------------------- */
.pp-bp-guides-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }

.pp-bp-guide-card { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--pp-border); border-radius: 14px; background: #fff; transition: transform var(--pp-motion-component) var(--pp-ease-out); }
.pp-bp-guide-card:hover { border-color: var(--pp-navy); }
.pp-bp-guide-card:focus-visible { outline: 2px solid var(--pp-navy); outline-offset: 2px; }
.pp-bp-guide-card .pp-bp-guide-icon { width: 26px; height: 26px; flex: none; color: var(--pp-navy); }
.pp-bp-guide-card > div { min-width: 0; flex: 1 1 auto; }
.pp-bp-guide-card b { display: block; font-size: 15px; color: var(--pp-ink); }
.pp-bp-guide-card span { display: block; font-size: 12.5px; color: var(--pp-secondary-text); margin-top: 2px; }
.pp-bp-guide-card .pp-i--mirror { flex: none; color: var(--pp-navy); }

/* --------------------------------------------------------------------------
   Related brands
   -------------------------------------------------------------------------- */
.pp-bp-related-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

.pp-bp-related-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 18px 20px; border: 1px solid var(--pp-border); border-radius: 14px; background: #fff; text-align: center; transition: transform var(--pp-motion-component) var(--pp-ease-out); }
.pp-bp-related-card:hover { border-color: var(--pp-navy); }
/* UI.1 C2 (Human Lock §9): the guide and related-brand cards are ONE link each,
   so on hover-capable input the whole card lifts ~1px on its existing Navy
   keyline (200ms, no shadow); a guide card's forward arrow travels 2px (§7). */
@media (hover: hover) { :is(.pp-bp-guide-card, .pp-bp-related-card):hover { transform: translateY(calc(var(--pp-card-rise) * -1)); } }
.pp-bp-related-card:focus-visible { outline: 2px solid var(--pp-navy); outline-offset: 2px; }
.pp-bp-related-logo { border: 1px solid var(--pp-border); }
.pp-bp-related-logo img { height: 24px; width: auto; }
.pp-bp-related-card b { font-family: var(--pp-font-display); font-size: 15.5px; color: var(--pp-ink); }
.pp-bp-related-card span { font-size: 12.5px; color: var(--pp-secondary-text); }

/* ==========================================================================
   MOBILE DENSITY POLISH (BP.1 final polish 2026-09-21) — same information,
   more compact mobile discovery. Desktop layouts UNCHANGED (every rule
   below is ≤767px except the mobfold summary reset). Content is rendered
   once; disclosure/rails are presentation only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile progressive disclosure (<details data-pp-bp-mobfold>): open with
   hidden summary on desktop; a compact tappable summary card at ≤767px.
   -------------------------------------------------------------------------- */
.pp-bp-mobfold-summary { display: none; }

@media (max-width: 767px) {
	.pp-bp-mobfold { border: 1px solid var(--pp-border); border-radius: 12px; background: var(--pp-card-bg); }

	.pp-bp-mobfold-summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 13px 16px;
		font-weight: 600;
		font-size: 14.5px;
		color: var(--pp-ink);
		cursor: pointer;
		list-style: none;
	}

	.pp-bp-mobfold-summary::-webkit-details-marker { display: none; }
	.pp-bp-mobfold-summary .pp-i { flex: none; color: var(--pp-secondary-text); transition: transform 160ms ease; }
	.pp-bp-mobfold[open] .pp-bp-mobfold-summary .pp-i { transform: rotate(180deg); }
	.pp-bp-mobfold-summary:focus-visible { outline: 2px solid var(--pp-navy); outline-offset: 2px; border-radius: 8px; }

	.pp-bp-mobfold-body { padding: 2px 16px 14px; }
	.pp-bp-mobfold-body .pp-bp-tl,
	.pp-bp-mobfold-body .pp-bp-pkg { margin-top: 4px; }
	.pp-bp-mobfold-body .pp-bp-note { margin-bottom: 12px; }
	.pp-bp-mobfold-body .pp-bp-heritage-card { border: 0; padding: 10px 0; border-bottom: 1px solid var(--pp-border); border-radius: 0; }
	.pp-bp-mobfold-body .pp-bp-heritage-card:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pp-bp-mobfold-summary .pp-i { transition: none; }
}

/* --------------------------------------------------------------------------
   Mobile swipe-native rails (notable / guides / related): first card fully
   visible, next peeking; native horizontal touch scroll + snap, no JS
   carousel. Bounded inside .pp-container — never page-level overflow.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.pp-bp-mobrail {
		display: flex;
		overflow-x: auto;
		gap: 12px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 6px;
	}

	.pp-bp-mobrail::-webkit-scrollbar { display: none; }
	.pp-bp-mobrail > * { scroll-snap-align: start; min-width: 0; }

	.pp-bp-notable-row.pp-bp-mobrail > * { flex: 0 0 78%; }
	.pp-bp-guides-row.pp-bp-mobrail > * { flex: 0 0 82%; }
	.pp-bp-related-row.pp-bp-mobrail > * { flex: 0 0 46%; padding: 20px 12px 16px; }
}

/* --------------------------------------------------------------------------
   Renames table → compact stacked rows at ≤767px (every mapping kept)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.pp-bp-table--renames { border: 0; min-width: 0; background: none; }
	.pp-bp-table--renames thead { display: none; }
	.pp-bp-table--renames tbody,
	.pp-bp-table--renames tr,
	.pp-bp-table--renames td { display: block; width: 100%; }
	.pp-bp-table--renames tr { border: 1px solid var(--pp-border); border-radius: 10px; background: var(--pp-card-bg); padding: 12px 14px; margin-bottom: 10px; }
	.pp-bp-table--renames td { border: 0; padding: 0; }
	.pp-bp-table--renames .pp-bp-rn-arrow { display: none; }
	.pp-bp-table--renames .pp-bp-rn-new { margin: 2px 0 10px; }
	.pp-bp-table--renames .pp-bp-rn-cta { text-align: start; }
}

/* --------------------------------------------------------------------------
   Matrix at ≤767px: bounded horizontal scroll kept; row labels stay
   readable via a sticky first column INSIDE the scroll wrapper (the
   wrapper is position:relative — nothing escapes to the document).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.pp-bp-matrix .pp-bp-table th,
	.pp-bp-matrix .pp-bp-table td { padding: 9px 10px; font-size: 13px; }

	.pp-bp-matrix .pp-bp-table thead th:first-child,
	.pp-bp-matrix .pp-bp-table tbody th {
		position: sticky;
		inset-inline-start: 0;
		background: var(--pp-card-bg);
		z-index: 1;
		box-shadow: 1px 0 0 var(--pp-border);
	}
}

/* --------------------------------------------------------------------------
   Mobile vertical-rhythm tightening (§11) — spacing only, desktop rhythm
   and font sizes untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.pp-bp-facts { padding-top: 16px; }
	.pp-bp-featured { padding: 26px 0 4px; }
	.pp-bp-products,
	.pp-bp-module { padding: 26px 0 4px; }
	.pp-bp-module.pp-bp-faq { padding-bottom: 34px; }
	.pp-bp-sec-head { margin-bottom: 14px; }
	.pp-bp-module-cols { gap: 16px; }
	.pp-bp-module-copy p { margin-bottom: 11px; }
	.pp-bp-module-copy--wide { margin-bottom: 12px; }
	.pp-bp-prose { margin-top: 8px; }
	.pp-bp-about-cols { gap: 16px; }
	.pp-bp-story-deep { margin-top: 2px; }
	.pp-bp-quote { margin-bottom: 12px; padding: 13px 15px; }
	.pp-bp-flav-map { grid-template-columns: 1fr 1fr; gap: 10px; }
	.pp-bp-flav-card { padding: 13px 13px 11px; }
	.pp-bp-format-cards { gap: 10px; }
	.pp-bp-format-card { padding: 13px; }
	.pp-bp-spectrum { padding: 24px 6px 0; }
	.pp-bp-dist-row { grid-template-columns: 60px 1fr 24px; gap: 8px; }
	.pp-bp-loadmore { padding: 18px 0 2px; }
}