/* ==========================================================================
   PrimatePet — base layer
   Shared by every template. P3 (shop), P4 (product), P5 (woo), P7 (account)
   and P8 (pages) build on this; do not fork it.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--pp-page);
	color: var(--pp-body);
	font-family: var(--pp-font);
	font-size: var(--pp-fs-body);
	line-height: var(--pp-lh-body);
	font-weight: 400;
	overflow-x: hidden;
}

img,
video { max-width: 100%; height: auto; }
img { border: 0; }

a {
	color: var(--pp-body);
	text-decoration: none;
	transition: color var(--pp-ease);
}
a:hover,
a:focus { color: var(--pp-brand); }

:focus-visible { outline: 2px solid var(--pp-brand); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 20px;
	color: var(--pp-primary);
	font-family: var(--pp-font-display);
	font-weight: 600;
}
h1 { font-size: var(--pp-fs-h1); line-height: var(--pp-lh-h1); }
h2 { font-size: var(--pp-fs-h2); line-height: var(--pp-lh-h2); }
h3 { font-size: var(--pp-fs-h3); line-height: var(--pp-lh-h3); font-weight: 500; }
h4 { font-size: var(--pp-fs-h4); }
/* h5 / h6 are Anybody on the source, not DynaPuff */
h5,
h6 { font-family: var(--pp-font); font-weight: 700; }
h5 { font-size: var(--pp-fs-h5); }
h6 { font-size: var(--pp-fs-h6); }

p {
	margin: 0 0 15px;
	font-size: var(--pp-fs-p);
	line-height: var(--pp-lh-p);
	color: var(--pp-body);
}

ul, ol { margin: 0 0 15px; padding-left: 20px; }

.pp-screen-reader-text,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pp-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: #fff;
	color: var(--pp-primary);
	padding: 12px 20px;
	font-weight: 700;
}
.pp-skip-link:focus { left: 10px; top: 10px; }

/* ---------- 12-column grid (Bootstrap-compatible names, theme-local) ------
   ⚠️ SPECIFICITY — READ THIS BEFORE EDITING THIS BLOCK.
   A media query contributes NOTHING to specificity. So the blanket rule below
   must NOT declare `width`: as `.pp-row > [class*='pp-col']` it is (0,2,0)
   (one class + one ATTRIBUTE selector) and would outrank every (0,1,0)
   `.pp-col-*` breakpoint rule, pinning every column to 100% at every viewport.
   That is exactly what shipped in the first pass and stacked the footer on
   every page of the site.
   Therefore: the blanket rule carries the GUTTERS ONLY, and the mobile-first
   `width: 100%` default lives on the column classes themselves. Default and
   breakpoint overrides then sit at equal specificity (0,1,0) and plain source
   order decides — the Bootstrap idiom.
   Rules for anyone extending this: keep the @media blocks in ASCENDING
   breakpoint order, keep them AFTER the default list, and add any new
   `.pp-col-*` name to BOTH the default list and its breakpoint block.
   -------------------------------------------------------------------------- */
.pp-row {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--pp-gutter) * -1);
	margin-right: calc(var(--pp-gutter) * -1);
}
.pp-row > [class*='pp-col'] {
	padding-left: var(--pp-gutter);
	padding-right: var(--pp-gutter);
	min-width: 0; /* a flex item's automatic minimum size would otherwise let a
	                 long unbreakable string push a column past its width */
}
/* mobile-first default: full width until a breakpoint below says otherwise */
.pp-col-12,
.pp-col-sm-6,
.pp-col-md-6,
.pp-col-lg-4,
.pp-col-lg-6,
.pp-col-xl-3,
.pp-col-xl-6 { width: 100%; }
@media (min-width: 576px) {
	.pp-col-sm-6 { width: 50%; }
}
@media (min-width: 768px) {
	.pp-col-md-6 { width: 50%; }
}
@media (min-width: 992px) {
	.pp-col-lg-4 { width: 33.333333%; }
	.pp-col-lg-6 { width: 50%; }
}
@media (min-width: 1200px) {
	.pp-col-xl-3 { width: 25%; }
	.pp-col-xl-6 { width: 50%; }
}

/* ---------- Buttons -------------------------------------------------------
   .pp-btn  == source `.btn`        : pill, 56px, Anybody 600 16px, 0 50px
   .pp-wbtn == source `a.button`    : square, 56px (52 + 2+2 border), Anybody 800
   -------------------------------------------------------------------------- */
.pp-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pp-font);
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	padding: var(--pp-btn-pad);
	line-height: var(--pp-btn-h);
	cursor: pointer;
	border: none;
	background-color: var(--pp-brand);
	border-radius: var(--pp-radius-pill);
	transition: all var(--pp-ease);
	text-align: center;
}
.pp-btn:hover,
.pp-btn:focus { background-color: var(--pp-primary); color: #fff; }

.pp-btn--ghost {
	background-color: transparent;
	color: var(--pp-brand);
	border: 2px solid var(--pp-brand);
	line-height: 52px;
}
.pp-btn--ghost:hover { background-color: var(--pp-brand); color: #fff; }

@media (max-width: 575.98px) {
	.pp-btn { padding: 0 40px; }
}

/* Woo-shaped button: square, heavy, brand-filled. */
.pp-wbtn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-block;
	position: relative;
	font-family: var(--pp-font);
	font-size: 16px;
	font-weight: 800;
	color: #fff;
	text-align: center;
	line-height: 52px;
	padding: 0 40px;
	border: 2px solid transparent;
	border-radius: var(--pp-radius-0);
	background-color: var(--pp-brand);
	cursor: pointer;
	overflow: hidden;
	box-shadow: none;
	transition: all var(--pp-ease);
}
.pp-wbtn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	color: var(--pp-primary);
	background-color: var(--pp-accent);
	border-color: var(--pp-accent);
}

/* ⛔ `.button.alt` — WooCommerce's PRIMARY button, and it outranks the rule above.
   Measured live on the PDP: the add-to-cart rendered WooCommerce purple
   `#7F54B3`, because
     .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt
   is (0,3,1) against our (0,2,1).
   ⚠️ `:where()` contributes ZERO specificity (P6's finding) — that selector LOOKS
   heavy and is only (0,3,1); my first analyser over-counted it as (0,5,1) because
   its regex could not cross the nested parens in `:where(body:not(...))`.
   ⚠️ And it is NOT dormant here: Woo gates it on
   `body:not(.woocommerce-block-theme-has-button-styles)`, and that class does not
   exist under a CLASSIC theme, which primatepet-v1 is. So it always applies.
   ⛔ DO NOT prefix these with `body ` to buy specificity. I tried exactly that and
   it silently matched NOTHING: WooCommerce puts the `woocommerce` class ON
   `<body>`, and `body .woocommerce` is a DESCENDANT combinator, so it asks for a
   `.woocommerce` element inside body — which body itself is not. The button
   stayed `#7F54B3` and the rule looked fine on review.
   What actually works:
     .woocommerce .pp-wbtn.button.alt  = (0,4,0), strictly beats Woo's (0,3,1),
                                         and `.woocommerce` matches body OR a
                                         wrapper div, either way the button is a
                                         descendant;
     the fallbacks for Woo-core buttons that lack `.pp-wbtn` use an `html `
     prefix = (0,3,2), one step ABOVE Woo's (0,3,1).
   ⚠️ `html ` works where `body ` did NOT: `.woocommerce` sits on <body>, and body
   is a descendant of <html> but not of itself.
   ⚠️ These were briefly left as exact (0,3,1) TIES relying on our sheet loading
   after woocommerce.css. That is true today — measured, the non-alt declarations
   tie at (0,2,1) and ours compute — but it is load-ORDER dependent, so a plugin
   or enqueue reorder would silently resurrect Woo purple. Raised on P7's advice;
   do not lower them back to a tie. */
html .woocommerce a.button.alt,
html .woocommerce button.button.alt,
html .woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .pp-wbtn.button.alt {
	background-color: var(--pp-brand);
	color: #fff;
}
html .woocommerce a.button.alt:hover,
html .woocommerce button.button.alt:hover,
html .woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce .pp-wbtn.button.alt:hover {
	background-color: var(--pp-accent);
	color: var(--pp-primary);
	border-color: var(--pp-accent);
}

/* ---------- Form controls ------------------------------------------------- */
input[type='text'],
input[type='email'],
input[type='url'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='tel'],
input[type='date'],
select,
textarea {
	width: 100%;
	background: #fff;
	color: var(--pp-input-text);
	font-family: var(--pp-font);
	font-size: 16px;
	line-height: 1.5;
	border: 0.667px solid var(--pp-border);
	border-radius: 0;
	padding: 17px 29px;
	transition: border-color var(--pp-ease);
}
input::placeholder,
textarea::placeholder { color: var(--pp-input-text); opacity: 1; }
input:focus,
select:focus,
textarea:focus { outline: none; border-color: var(--pp-brand); }

/* ---------- Section heading (eyebrow + title) ----------------------------- */
.pp-heading { }
.pp-heading__eyebrow {
	display: block;
	margin: 0 0 12px;
	font-family: var(--pp-font);
	font-size: 18px;
	line-height: 1.42857;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--pp-brand);
}
.pp-heading__title,
.pp-section-title {
	margin: 0;
	font-family: var(--pp-font-display);
	font-size: var(--pp-fs-section);
	line-height: var(--pp-lh-section);
	font-weight: 600;
	color: var(--pp-primary);
}
.pp-heading--center { text-align: center; }

@media (max-width: 991.98px) {
	.pp-heading__title,
	.pp-section-title { font-size: 34px; line-height: 1.3; }
}
@media (max-width: 575.98px) {
	.pp-heading__eyebrow { font-size: 15px; }
	.pp-heading__title,
	.pp-section-title { font-size: 22px; line-height: 1.35; }
}

/* ==========================================================================
   SHARED PRODUCT CARD  — parts/card-product.php
   One component, two variants:
     .pp-card--grid     homepage / carousels   (source `.pxl-product-grid.layout-1`)
     .pp-card--archive  shop + category + search (source `ul.products li.product`)
   P3 / P4 / P5 reuse this; style changes belong here, not in a fork.
   ========================================================================== */
/* ⚠️ STRUCTURE — `.pp-card__actions` is a DIRECT CHILD OF `.pp-card`, NOT of
   `.pp-card__media`. It has to be: inside the media box it was trapped in that
   box's centred flex row, and on a touch device the rail collapsed to 50x160
   beside a squeezed 242px image (measured). `.pp-card` is therefore a column
   flex container and `order` decides where the rail sits. DOM order stays
   media -> body -> actions, so the title and price are read before the
   controls and a CSS failure degrades to content-first. */
.pp-card {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.pp-card__media {
	order: 1;
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background-color: #fff;
}

.pp-card__link {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.pp-card__link img {
	margin: 0;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* grid variant: 350px frameless white box, image capped at 200px */
.pp-card--grid .pp-card__media {
	height: var(--pp-card-img-h);
	border: none;
}
.pp-card--grid .pp-card__link img { max-width: 200px; }

/* archive variant: 3px #f1f1f1 frame, 30px padding, image capped at 300px */
.pp-card--archive .pp-card__media {
	border: 3px solid var(--pp-hairline);
	padding: 30px;
}
.pp-card--archive .pp-card__link img { max-width: 300px; }

/* sale badge: 68px green circle with the little pointer tail */
.pp-card__badge {
	position: absolute;
	top: 20px;
	right: 20px;
	left: auto;
	bottom: auto;
	width: var(--pp-badge-size);
	height: var(--pp-badge-size);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0 0.8088em;
	background-color: var(--pp-sale);
	color: #fff;
	font-family: var(--pp-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
	text-transform: uppercase;
	border-radius: 50%;
	overflow: visible;
	z-index: 2;
}
.pp-card__badge::before {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 9px;
	width: 18px;
	height: 18px;
	background-color: var(--pp-sale);
	clip-path: polygon(11% 0, 33% 84%, 100% 21%);
	transform: rotate(15deg);
}

/* ⛔ WOOCOMMERCE OUTRANKS THE BADGE RULE ABOVE ON EVERY WOO SURFACE.
   Measured live, not inferred — on /shop/, /pets-category/* and the PDP's
   related products the badge rendered WooCommerce olive `#958E09` at
   **13.712px** instead of `#2DE332` at 18px, because:
     .woocommerce span.onsale                        (0,2,1)  beats .pp-card__badge (0,1,0)
       -> font-size .857em, line-height 3.236, background #958E09, padding .202em
     .woocommerce ul.products li.product .onsale     (0,4,2)
       -> top 0, right 0, margin -.5em  (badge jumps outside the corner)
   The homepage is clean because it has no `.woocommerce` body class, which is
   exactly why this hid from P1 and was caught by P3.
   Two selectors so BOTH Woo rules are beaten:
     .woocommerce .pp-card .pp-card__badge                     = (0,3,0) > (0,2,1)
     .woocommerce ul.products li.product .pp-card__badge.onsale = (0,5,2) > (0,4,2)
   ⚠️ Do not "simplify" either one — they are sized to specific Woo rules. */
.woocommerce .pp-card .pp-card__badge,
.woocommerce ul.products li.product .pp-card__badge.onsale {
	top: 20px;
	right: 20px;
	left: auto;
	bottom: auto;
	margin: 0;
	width: var(--pp-badge-size);
	height: var(--pp-badge-size);
	min-width: var(--pp-badge-size);
	min-height: var(--pp-badge-size);
	padding: 0 0.8088em;
	background-color: var(--pp-sale);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 30px;
	border-radius: 50%;
	z-index: 2;
}

/* Woo's `.woocommerce ul.products li.product a img` (0,3,4) adds `margin-bottom:1em`
   to our card image on any Woo loop (P4's related products). (0,4,3) beats it. */
.woocommerce ul.products li.product .pp-card__link img { margin-bottom: 0; }

/* hover action rail */
.pp-card__actions {
	order: 2;
	position: relative;
	z-index: 3;
	display: flex;
	justify-content: center;
	padding: 0 22px;
	/* Sit 25px above the BOTTOM EDGE of the media box while staying in flow:
	   pull up by the rail's own height + 25, then give the 25 back so the body
	   does not move. Anchored to the edge, not to a height, so it is correct for
	   both the fixed-height grid variant and the content-height archive variant
	   — no dependency on --pp-card-img-h. Desktop geometry is unchanged from the
	   old absolute `bottom:25px; left:22px; right:22px`. */
	margin-top: calc((var(--pp-wish-size) + 25px) * -1);
	margin-bottom: 25px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(50%);
	transition: all var(--pp-ease-fast);
}
.pp-card:hover .pp-card__actions,
.pp-card:focus-within .pp-card__actions {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.pp-card__atc {
	margin: 0 3px;
	padding: 0;
	width: var(--pp-atc-w);
	max-width: 100%;
	font-size: 16px;
	text-align: center;
}
.pp-card__atc.pp-is-loading { cursor: progress; opacity: 0.75; }

.pp-card__wish {
	position: relative;
	margin: 0 3px;
	width: var(--pp-wish-size);
	height: var(--pp-wish-size);
	min-width: var(--pp-wish-size);
	line-height: var(--pp-wish-size);
	padding: 0;
	border: 2px solid transparent;
	border-radius: 0;
	background: var(--pp-accent);
	color: var(--pp-primary);
	text-align: center;
	overflow: visible;
	cursor: pointer;
	font-size: 0;
	transition: all var(--pp-ease-fast);
}
.pp-card__wish svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--pp-brand);
	stroke-width: 1.8;
	transition: inherit;
}
.pp-card__wish:hover { background-color: var(--pp-brand); }
.pp-card__wish:hover svg { stroke: #fff; }
.pp-card__wish.pp-is-added svg { fill: var(--pp-brand); }
.pp-card__wish.pp-is-added:hover svg { fill: #fff; }

/* content block */
.pp-card__body { order: 3; padding-top: 13px; padding-bottom: 17px; }

.pp-card__cats {
	font-size: var(--pp-fs-card-cat);
	line-height: 24.375px;
	margin-bottom: -6px;
	color: var(--pp-muted);
}
.pp-card__cats a {
	font-family: var(--pp-font);
	font-size: var(--pp-fs-card-cat);
	font-weight: 600;
	color: var(--pp-muted);
}
.pp-card__cats a:hover { color: var(--pp-brand); }

/* Measured on the source: h6 22px/700 `line-height: normal`, and the LINK inside
   it carries 20px/700 with an explicit `line-height: 37.5px` — that 37.5 is what
   sets the line box (3 wrapped lines = 112.5px). Inheriting the old unitless 1.4
   gave 30.8px lines and left the card 20px short. */
.pp-card__title {
	margin: 0 0 3px;
	font-family: var(--pp-font);
	font-size: var(--pp-fs-h6);
	font-weight: 700;
	line-height: normal;
}
.pp-card__title a {
	font-size: var(--pp-fs-card-title);
	font-weight: 700;
	line-height: 37.5px;
	color: var(--pp-primary);
}
.pp-card__title a:hover { color: var(--pp-brand); }

.pp-card__price { line-height: 1.2; }
.pp-card__price .price { display: inline; }
/* ⚠️ WooCommerce 11 renders money as `<span class="woocommerce-Price-amount">`
   with NO `<bdi>` wrapper — older WC had one. A `bdi`-only selector therefore
   matches NOTHING and the whole price style silently no-ops: measured on the
   deployed build, the card price was rendering 16px/400 in body grey instead of
   26px/700 brand. Match BOTH shapes; keep both when editing. */
.pp-card__price bdi,
.pp-card__price .woocommerce-Price-amount,
.pp-card__price ins bdi,
.pp-card__price ins .woocommerce-Price-amount {
	font-family: var(--pp-font);
	font-size: var(--pp-fs-card-price);
	font-weight: 700;
	line-height: 48.75px; /* source-measured; this is what makes the price row 48.8 */
	color: var(--pp-brand);
	text-decoration: none;
}
.pp-card__price ins { text-decoration: none; background: transparent; }
.pp-card__price del { margin-right: 6px; }
/* (0,3,0) — outranks the generic rule above, which is (0,2,0). Keep it that way. */
.pp-card__price del bdi,
.pp-card__price del .woocommerce-Price-amount {
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
	color: var(--pp-strike);
}
.pp-card__price del bdi span,
.pp-card__price del .woocommerce-Price-currencySymbol { margin-right: 3px; }

/* The ONLY price difference between the source's two card surfaces is the line
   box: the painted `bdi` is 26px/700/#FA441D on BOTH, but line-height is 48.75px
   on the homepage grid and 26px on the category archive. (0,3,0) > (0,2,0). */
.pp-card--archive .pp-card__price bdi,
.pp-card--archive .pp-card__price .woocommerce-Price-amount { line-height: 26px; }

/* ⛔ TOUCH ADD-TO-CART — a DELIBERATE IMPROVEMENT ON THE SOURCE, not an
   oversight. ⛔ Do not "restore parity" by deleting this block.

   USER DECISION, 2026-10-10. The measured source behaviour is the opposite, and
   is recorded here so nobody re-derives it and reverts: primatepet.com captured
   at 390 with Emulation.setTouchEmulationEnabled — device-metrics emulation
   ALONE still reports `hover: hover`, which is why this was missed for two
   rounds — leaves its own add-to-cart (188x56) and `.woosw-btn` wishlist
   (56x56) at `visibility: hidden` on touch exactly as on desktop. The source has
   NO mobile add-to-cart; a tap simply opens the PDP. The user chose to improve
   on that rather than mirror it.

   So: devices with no hover get the rail PERMANENTLY, at full card width, BELOW
   the body (order: 4 puts it after .pp-card__body's order: 3). Desktop hover
   behaviour is untouched. This only works because the rail is a child of
   `.pp-card` — see the STRUCTURE note at the top of this section. */
@media (hover: none) {
	.pp-card__actions {
		order: 4;
		margin-top: 12px;
		margin-bottom: 0;
		padding: 0; /* align the rail with the body text, not the image inset */
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	/* Let the ATC take the slack so it is a real tap target, not a 188px island. */
	.pp-card__atc { width: auto; flex: 1 1 auto; }
}

/* ---------- Inline add-to-cart feedback ---------------------------------- */
.pp-toast {
	position: fixed;
	right: 20px;
	bottom: 90px;
	z-index: 100000;
	max-width: 320px;
	padding: 14px 18px;
	background: var(--pp-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	opacity: 0;
	transform: translateY(10px);
	transition: all var(--pp-ease);
	pointer-events: none;
}
.pp-toast.pp-on { opacity: 1; transform: translateY(0); }

/* ---------- Reveal-on-scroll (replaces the source's WOW.js) --------------
   Elements are VISIBLE by default. The hidden state is only applied once JS
   has added .pp-reveal-ready to <html>, and a 2.5s failsafe in pp-home.js
   force-shows everything. This is deliberate: the source's WOW.js left whole
   bands at opacity:0 in screenshots and for no-JS visitors.
   ------------------------------------------------------------------------- */
.pp-reveal-ready .pp-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	will-change: opacity, transform;
}
.pp-reveal-ready .pp-reveal.pp-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.pp-reveal-ready .pp-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ==========================================================================
   SCAFFOLD PAGE CHROME  (index.php / page.php / single.php)
   Deliberately minimal — P3 (shop), P8 (pages) and P9 (blog) ship the real
   layouts on top of this. It exists because the site header is
   `position:absolute` and transparent: without a hero band on a non-front page
   the nav lands on top of the first paragraph.
   ⚠️ Scoped to .pp-pagehero / .pp-page-body / .pp-postlist only. P8 owns
   .pp-page-main and the .pp-prose typography; nothing here redefines them.
   ========================================================================== */
/* ⚠️ `.pp-pagehero`, `.pp-pagehero__title` and `.pp-breadcrumb*` are OWNED BY P8
   (pp-pages.css) — it built them against this exact markup, including the
   200px top padding that clears the absolutely-positioned header. They are
   deliberately NOT duplicated here.
   ⛔ CONSEQUENCE FOR THE ORCHESTRATOR: pp-pages.css must be enqueued SITE-WIDE,
   not only on P8's page templates, because page.php / single.php / index.php /
   archive.php all emit `.pp-pagehero`. Without it the transparent header lands
   on top of the page title. Flagged in P1's return. */
.pp-pagehero__meta {
	margin: 12px 0 0;
	font-family: var(--pp-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--pp-body);
}
.pp-page-body { padding: 60px 0 90px; }

.pp-single__thumb { margin-bottom: 30px; }

.pp-postlist {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px 30px;
}
.pp-postlist__item { min-width: 0; }
.pp-postlist__thumb { display: block; margin-bottom: 16px; }
.pp-postlist__thumb img { display: block; width: 100%; height: auto; }
.pp-postlist__title {
	margin: 0 0 6px;
	font-family: var(--pp-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.45;
}
.pp-postlist__title a { color: var(--pp-primary); }
.pp-postlist__title a:hover { color: var(--pp-brand); }
.pp-postlist__date {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--pp-brand);
}
.pp-postlist__excerpt p { font-size: 16px; line-height: 27px; }

.pp-pagination,
.pp-page-body .navigation.pagination {
	margin-top: 40px;
	font-family: var(--pp-font);
	font-weight: 700;
}
.pp-page-body .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	margin-right: 6px;
	border: 1px solid #e3e3e3;
	color: var(--pp-primary);
}
.pp-page-body .page-numbers.current,
.pp-page-body a.page-numbers:hover {
	background-color: var(--pp-brand);
	border-color: var(--pp-brand);
	color: #fff;
}

@media (max-width: 991.98px) {
	.pp-page-body { padding: 40px 0 70px; }
	.pp-postlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
	.pp-postlist { grid-template-columns: minmax(0, 1fr); }
}