/* Pratapgarh Pure: tokens, reset */

/* Cinzel, Inter: variable, self-hosted */
@font-face {
	font-family: Cinzel;
	src: url(../fonts/cinzel-latin.woff2) format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: InterVariable;
	src: url(../fonts/inter-latin.woff2) format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

/* --- Tokens --- */
:root {
	/* Green 6.90:1; marigold fill-only */
	--paper:#FFFFFF;
	--ink:#0F0C07;
	--green:#336601;
	--marigold:#FDB100;
	--magenta:#FF0171;
	--line:rgba(15, 12, 7, .12);
	/* --field-line: 3.11:1, WCAG 1.4.11 */
	--field-line:rgba(15, 12, 7, .45);
	/* --shade: ink over itself */
	--shade:rgba(15, 12, 7, .14);
	--band:#336601;
	--band-ink:#FFFFFF;
	/* --band-card: raised card surface */
	--band-card:rgba(255, 255, 255, .12);
	--muted:rgba(15, 12, 7, .62);

	--display:Cinzel, Georgia, serif;
	--body:InterVariable, system-ui, sans-serif;

	--step--1:.875rem;
	--step-0:1rem;
	--step-1:1.25rem;
	--step-2:clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	--step-3:clamp(1.9rem, 1.4rem + 2.4vw, 2.9rem);
	--step-4:clamp(2.4rem, 1.6rem + 3.6vw, 3.75rem);

	--sp-1:.25rem;
	--sp-2:.5rem;
	--sp-3:.75rem;
	--sp-4:1rem;
	--sp-6:1.5rem;
	--sp-8:2rem;
	--sp-12:3rem;
	/* Section rhythm. Every .pp-section pays this top AND bottom, so two
	   neighbours show 2x --section of apparent gap. 8vw made that ~230px at
	   1440 and emptied ~30% of the page height. 4.5vw lands a doubled
	   boundary near 130px. */
	--section:clamp(3rem, 4.5vw, 4.5rem);

	/* --radius, --radius-card both 16px */
	--radius:16px;
	--radius-card:16px;
	--measure:65ch;
	--page:1240px;

	--shadow:0 1px 2px rgba(15, 12, 7, .06), 0 8px 24px rgba(15, 12, 7, .06);
	--ease:cubic-bezier(.16, 1, .3, 1);
	--dur-1:.15s;
	--dur-2:.25s;
	--dur-3:.7s;
	--stagger:70ms;
}

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 var(--step-0)/1.55 var(--body);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: .01em;
	margin: 0;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

/* 65ch: theme copy only */
p {
	margin: 0 0 var(--sp-4);
}
.pp-section p,
.pp-entry p {
	max-width: var(--measure);
}

/* Controls: inherit theme font */
button,
input,
select,
textarea {
	font: inherit;
}

a {
	color: var(--green);
	text-underline-offset: .2em;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Focus ring: green 6.90:1 */
:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}
.pp-section--band :focus-visible {
	outline-color: var(--marigold);
}
/* Closure ring: marigold 1.00:1 */
.pp-closing :focus-visible {
	outline-color: var(--marigold);
}

.pp-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--paper);
	color: var(--ink);
	padding: var(--sp-3) var(--sp-4);
}
.pp-skip:focus {
	left: 0;
}

/* --- Layout --- */
.pp-container {
	width: min(100% - 2rem, var(--page));
	margin-inline: auto;
}
/* Under 375px: gutter .5rem */
@media (max-width: 374px) {
	.pp-container {
		width: min(100% - 1rem, var(--page));
	}
}

.pp-section {
	padding-block: var(--section);
}
/* A boundary between two sections is ONE gap, not two. Each section owns the
   space below it; without this every neighbour showed 2x --section of pure
   whitespace, 162px under the Ghee product grid. */
.pp-section + .pp-section {
	padding-block-start: 0;
}
/* Sections that paint their own background keep a top padding, or the colour
   edge ends up flush against their own content — but not the full --section,
   because the colour edge already separates them. Full --section here left a
   155px break above the farm band while the white boundaries sat at 97px. */
.pp-section.pp-section--band,
.pp-section.pp-closing {
	padding-block-start: var(--sp-8);
}

.pp-section--band {
	background: var(--band);
	color: var(--band-ink);
}
.pp-section--band a {
	color: var(--band-ink);
}

/* Wall bands: photographs, repeat */
.pp-wallband {
	height: 64px;
	background-repeat: repeat-x;
	background-size: auto 100%;
}
/* Clay tiles: the ghee process */
.pp-wallband--clay {
	background-image: url(../img/clay-band.webp);
}
/* Teal teardrops */
.pp-wallband--teal {
	background-image: url(../img/teal-band.webp);
}
/* The frieze is the decorated top edge of the band it opens, not a stripe
   floating in the middle of the gap (which cost an extra 64px of nothing). */
.pp-wallband + .pp-section--band {
	padding-block-start: var(--sp-6);
}

/* 2px rule 6.90:1 green */
.pp-rule {
	width: 64px;
	height: 2px;
	border: 0;
	background: var(--green);
	margin: var(--sp-4) 0;
}
.pp-section--band .pp-rule {
	background: var(--marigold);
}

.pp-grid {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (min-width: 1024px) {
	.pp-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.pp-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --- Shell --- */
/* Sticky header, 64px tall */
.pp-header {
	position: sticky;
	top: 0;
	z-index: 50;
	/* Header marigold: ink 10.66:1 */
	background: var(--marigold);
	border-bottom: 2px solid var(--green);
}
.pp-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3) var(--sp-4);
	min-height: 64px;
}

.pp-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	flex: none;
	color: var(--ink);
	text-decoration: none;
}
/* Mark: 44px box, 3x */
.pp-brand__mark {
	width: 44px;
	height: 44px;
}
/* Name 3.77:1, floor 18.66px */
.pp-brand__name {
	font: 700 var(--step-1)/1 var(--display);
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--green);
	white-space: nowrap;
	/* Cinzel metrics: top .05em */
	position: relative;
	top: .05em;
}
/* Name floor 18.72px (1.17rem) */
@media (max-width: 767px) {
	.pp-brand {
		gap: var(--sp-1);
	}
	.pp-brand__mark {
		width: 36px;
		height: 36px;
	}
	.pp-brand__name {
		font-size: 1.17rem;
		letter-spacing: 0;
	}
	.pp-header__inner {
		column-gap: var(--sp-1);
	}
	/* Cart tap target 44px */
	.pp-cart {
		gap: var(--sp-1);
		padding-inline: var(--sp-1);
	}
}

/* Mark 36->32 under 375px */
@media (max-width: 374px) {
	.pp-brand {
		gap: 2px;
	}
	.pp-brand__mark {
		width: 32px;
		height: 32px;
	}
	.pp-header__inner {
		column-gap: 2px;
	}
	.pp-header__actions {
		gap: 2px;
	}
	.pp-cart {
		padding-inline: 0;
	}
}

.pp-nav {
	flex: 1 1 auto;
	min-width: 0;
}
.pp-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.pp-nav__list > li {
	list-style: none;
}
.pp-nav__list > li > a {
	display: block;
	padding-block: var(--sp-2);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.pp-nav__list > li > a:hover,
.pp-nav__list > li.current-menu-item > a {
	border-bottom-color: var(--green);
}

/* Toggle hidden; 768px enables */
.pp-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	cursor: pointer;
}
/* Icon swap, no JS */
.pp-nav-toggle__close {
	display: none;
}
.pp-nav-toggle[aria-expanded="true"] .pp-nav-toggle__open {
	display: none;
}
.pp-nav-toggle[aria-expanded="true"] .pp-nav-toggle__close {
	display: inline;
}

/* Collapse 768px; no CLS */
@media (max-width: 767px) {
	.pp-nav-toggle {
		display: inline-flex;
	}
	.pp-nav {
		display: none;
		position: absolute;
		/* +2px keeps temple hairline */
		top: calc(100% + 2px);
		left: 0;
		right: 0;
		background: var(--paper);
		border-bottom: 2px solid var(--green);
		box-shadow: var(--shadow);
		padding: var(--sp-2) var(--sp-4) var(--sp-4);
	}
	.pp-nav.is-open {
		display: block;
	}
	.pp-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.pp-nav__list > li > a {
		padding-block: var(--sp-4);
		border-bottom: 1px solid var(--line);
		font-size: var(--step-1);
	}
	.pp-nav__list > li:last-child > a {
		border-bottom: 0;
	}
	/* Sheet state: colour 6.90:1 */
	.pp-nav__list > li > a:hover,
	.pp-nav__list > li.current-menu-item > a {
		border-bottom-color: var(--line);
		color: var(--green);
	}
	.pp-nav__list > li:last-child > a:hover,
	.pp-nav__list > li.current-menu-item:last-child > a {
		border-bottom-color: transparent;
	}
}

/* No scripting: links inline */
@media (max-width: 767px) and (scripting: none) {
	.pp-nav-toggle {
		display: none;
	}
	.pp-nav {
		display: block;
		position: static;
		background: none;
		border: 0;
		box-shadow: none;
		padding: 0;
	}
	.pp-nav__list {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--sp-4);
	}
	.pp-nav__list > li > a {
		padding-block: var(--sp-2);
		border-bottom: 2px solid transparent;
		font-size: var(--step-0);
	}
}

/* Cart, burger travel together */
.pp-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-left: auto;
}

/* 44px target, 22px icon */
.pp-cart {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding-inline: var(--sp-2);
	color: var(--ink);
	text-decoration: none;
}
.pp-cart__icon {
	display: block;
}
/* Count: ink text 10.66:1 */
.pp-cart__count {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.pp-footer {
	padding-block: var(--sp-6);
	/* Footer rule: green 6.90:1 */
	border-top: 2px solid var(--green);
	color: var(--muted);
	font-size: var(--step--1);
}
/* One row: copy left, links right */
.pp-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-6);
}
.pp-footer__links,
.pp-footer__copy {
	margin: 0;
}
.pp-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-6);
	margin-left: auto;
	padding: 0;
	list-style: none;
}
/* Footer links green 6.90:1 */
.pp-footer__links a {
	color: var(--green);
}
.pp-footer__bar p {
	margin: 0;
	max-width: none;
}

/* Google profile link line */
.pp-footer__gbp {
	margin: var(--sp-4) 0 0;
}
.pp-footer__gbp a {
	color: var(--green);
}

.pp-main {
	display: block;
}

/* --- Type --- */
.pp-eyebrow {
	font: 600 var(--step--1)/1 var(--body);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--green);
}
/* Band eyebrow white 6.90:1 */
.pp-section--band .pp-eyebrow {
	color: var(--band-ink);
}

.pp-lede {
	font-size: var(--step-1);
	color: var(--muted);
	max-width: var(--measure);
}
.pp-section--band .pp-lede {
	color: var(--band-ink);
}

.pp-measure {
	max-width: var(--measure);
}

/* --- Buttons --- */
.pp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .85rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font: 600 var(--step-0)/1 var(--body);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

/* Primary fill green, 6.90:1 */
.pp-btn--primary {
	background: var(--green);
	color: var(--paper);
}
.pp-btn--primary:hover {
	background-image: linear-gradient(var(--shade), var(--shade));
}

/* Gold fill; ink label. 10.66:1. Pairing follows .pp-badge--popular. */
.pp-btn--marigold {
	background: var(--marigold);
	color: var(--ink);
}
.pp-btn--marigold:hover {
	background-image: linear-gradient(var(--shade), var(--shade));
}

.pp-btn--ghost {
	background: transparent;
	color: var(--green);
	border-color: var(--line);
}
.pp-btn--ghost:hover {
	border-color: var(--green);
}
/* Ghost 60% white, 3.6:1 */
.pp-section--band .pp-btn--ghost {
	color: var(--band-ink);
	border-color: rgba(255, 255, 255, .6);
}
.pp-section--band .pp-btn--ghost:hover {
	border-color: var(--marigold);
}

.pp-btn:active {
	transform: translateY(1px) scale(.98);
}
.pp-btn[disabled],
.pp-btn[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
}

/* --- Surfaces --- */
/* Card: white, hairline border */
.pp-card {
	position: relative;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	overflow: hidden;
	transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.pp-card:hover {
	box-shadow: var(--shadow);
}
/* Touch has no hover, so the card's only shadow — the one above — never fires on
   a phone, and a white card on a white page behind a 12% hairline reads flat. The
   resting shadow is the same token desktop shows on hover. :not() keeps the Most
   Popular ring, which sets its own box-shadow at the same specificity. */
@media (max-width: 767px) {
	.pp-card--product:not(.pp-card--bestseller) {
		box-shadow: var(--shadow);
	}
}
/* Band card: white 5.24:1 */
.pp-section--band .pp-card {
	background: var(--band-card);
	border-color: rgba(255, 255, 255, .28);
}

/* --- Commerce --- */
/* Tabular numerals: prices stable */
.pp-price {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* .pp-badge deleted; magenta notices */

/* --- Motion --- */
/* Reveal: gated html.pp-js */
html.pp-js [data-pp-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
	transition-delay: calc(var(--pp-i, 0) * var(--stagger));
}
html.pp-js [data-pp-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* Stagger by sibling order */
html.pp-js [data-pp-reveal]:nth-child(2) {
	--pp-i:1;
}
html.pp-js [data-pp-reveal]:nth-child(3) {
	--pp-i:2;
}
html.pp-js [data-pp-reveal]:nth-child(4) {
	--pp-i:3;
}
html.pp-js [data-pp-reveal]:nth-child(5) {
	--pp-i:4;
}
html.pp-js [data-pp-reveal]:nth-child(6) {
	--pp-i:5;
}
/* Cap the ladder at 6 */
html.pp-js [data-pp-reveal]:nth-child(n+7) {
	--pp-i:6;
}

/* Micro: transform only, no hover on touch */
@media (hover: hover) {
	.pp-card:hover,
	.pp-card:focus-within {
		transform: translateY(-3px);
	}
	.pp-card:hover .pp-card__img,
	.pp-card:focus-within .pp-card__img {
		transform: scale(1.03);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
	/* Keep revealed content visible */
	html.pp-js [data-pp-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* --- Hero --- */
/* Hero img: LCP, fetchpriority=high */
.pp-hero {
	padding-block: clamp(2rem, 5vw, 4rem) var(--section);
}
.pp-hero__inner {
	display: grid;
	gap: var(--sp-8);
	align-items: center;
}
@media (min-width: 900px) {
	.pp-hero__inner {
		grid-template-columns: 1fr 52%;
		gap: var(--sp-12);
	}
}
.pp-hero__title {
	font-size: var(--step-4);
	max-width: 18ch;
}
.pp-hero__lede {
	font-size: var(--step-0);
	color: var(--muted);
	max-width: 58ch;
}
.pp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin: var(--sp-6) 0 0;
}
.pp-hero__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-card);
	background: var(--paper);
}
.pp-hero__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Trust strip --- */
/* Only backed facts rendered */
.pp-trust-strip {
	border-block: 1px solid var(--line);
	background: var(--paper);
}
.pp-trust-strip__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3) var(--sp-8);
	margin: 0;
	padding: var(--sp-4) 0;
	list-style: none;
}
.pp-trust-strip__list li {
	font: 500 var(--step--1)/1.4 var(--body);
	color: var(--green);
	letter-spacing: .02em;
}

/* --- Range --- */
.pp-range__lede {
	color: var(--muted);
}
.pp-grid--products {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	/* Double the base --sp-6. Product cards are the one grid whose cells carry a
	   photo, a rule and a price, so they read as separate objects and want the
	   extra air; the journal and related-post grids keep the base gap. */
	gap: var(--sp-12);
}

/* --- Help-me-choose quiz --- */
/* The Ghee archive's products section opens with the quiz trigger, not the grid,
   and the trust strip above it carries no bottom padding of its own. The full
   --section top padding therefore stood alone as 65px of white above a 43px
   button, while the same button keeps 24px to the cards below it. --sp-6 evens
   the two. Same principle as .pp-section + .pp-section at the top of this sheet:
   a boundary is one gap. Measured 65 -> 24 at 1440 and 48 -> 24 at 390. */
.pp-section.pp-archive-products {
	padding-block-start: var(--sp-6);
}
/* Hidden until main.js sets html.pp-js: a modal cannot open without JS, and a
   trigger that opens nothing is worse than no trigger. */
.pp-quiz {
	display: none;
}
.pp-js .pp-quiz {
	display: block;
	margin-bottom: var(--sp-6);
}
/* Four lines of copy earn the quiz its click: the eyebrow states the doubt, the
   lede states the interaction and the payoff, the button is the action and the
   meta line prices it in time. Measured 147px tall at 1440 and 174px at 390,
   which pushes the first card from 147 to 264 on a 745 fold — the card still
   fits whole. Left aligned and column-stacked so the lede can wrap to two lines
   at 390 without the button moving off the left edge.
   The button carries no rule of its own: it is a stock .pp-btn--ghost, quieter
   than the cards' Buy Now because the three jars are the page's real action. Its
   step-0 label is deliberate — that is what keeps the control 45px tall and over
   the 44px touch floor; a step--1 label measured 41px. Sentence case, unlike the
   old uppercase pill, which wrapped to two centred lines at 390. */
.pp-quiz__invite {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-3);
}
.pp-quiz__invite-eyebrow {
	margin: 0;
	font: 600 var(--step--1)/1.3 var(--body);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--green);
}
/* Cinzel, 34ch: the measure holds the sentence on one line at 1440 and breaks it
   to two at 390, which is what keeps 390's block under 180px. */
.pp-quiz__invite-lede {
	margin: 0;
	max-width: 34ch;
	font-family: var(--display);
	font-size: var(--step-1);
	line-height: 1.35;
}
/* Muted 14px, 5.53:1 on paper. Last line, so the block reads top down as
   question, answer, action, cost. */
.pp-quiz__invite-meta {
	margin: 0;
	font: 400 var(--step--1)/1.5 var(--body);
	color: var(--muted);
}
/* Native <dialog>. The platform supplies the focus trap, Esc, the backdrop and
   focus return; only the look is ours. Padding is zero and the scrolling lives
   on the inner block, so the close button stays put while the content moves and
   a click that lands on the dialog is unambiguously a click on the backdrop. */
.pp-quiz__modal {
	width: min(100% - 2rem, 620px);
	margin: auto;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--paper);
	color: var(--ink);
	overflow: hidden;
}
.pp-quiz__modal::backdrop {
	background: rgba(15, 12, 7, .55);
}
/* max-height keeps a long screen scrollable inside the dialog and
   overscroll-behavior stops that scroll chaining to the page. With one question
   per screen the content usually fits, so the script's scroll lock on <html> is
   what actually holds the page still. */
.pp-quiz__scroll {
	max-height: min(88vh, 880px);
	padding: var(--sp-6);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.pp-quiz__close {
	position: absolute;
	top: var(--sp-2);
	right: var(--sp-2);
	z-index: 1;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--muted);
	font-size: var(--step-2);
	line-height: 1;
	cursor: pointer;
}
.pp-quiz__close:hover {
	color: var(--ink);
}
.pp-quiz__title {
	font-size: var(--step-2);
}
/* Position, not achievement: screen 2 of 4 reads a quarter in before the
   customer has answered anything, which is what the text says too. The bar is
   decorative — "Question 2 of 4" is what a screen reader gets. */
.pp-quiz__step {
	margin-top: var(--sp-6);
	font: 600 var(--step--1)/1.3 var(--body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
}
.pp-quiz__progress {
	height: 3px;
	margin-top: var(--sp-2);
	background: var(--line);
}
.pp-quiz__bar {
	display: block;
	width: 0;
	height: 100%;
	background: var(--green);
	transition: width var(--dur-2) var(--ease);
}
/* min-height holds the dialog at one size: without it the modal resizes on
   every screen and jumps as the customer advances. */
.pp-quiz__q {
	margin: var(--sp-6) 0 0;
	padding: 0;
	border: 0;
	min-height: 19rem;
}
.pp-quiz__nav {
	margin-top: var(--sp-2);
}
/* A quiet text control, not a bordered button: a box here would read as a fifth
   answer card sitting directly under four of them. 44px of hit area around a
   small label clears the touch target floor without drawing that box. */
.pp-quiz__back {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--muted);
	font: 600 var(--step--1)/1.3 var(--body);
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}
.pp-quiz__back:hover {
	color: var(--ink);
}
/* [hidden] must beat display:inline-flex — the trap .pp-rail__nav, .pp-buybar and
   .pp-sensory__nav each restate for the same reason. */
.pp-quiz__back[hidden] {
	display: none;
}
/* Focus target for the script when it reveals a screen, not a visible ring. */
.pp-quiz__legend:focus {
	outline: none;
}
.pp-quiz__legend {
	padding: 0;
	font: 600 var(--step-1)/1.25 var(--display);
	color: var(--ink);
}
/* Answer cards. The radio keeps the grouping and the keyboard; the card is its
   sibling, so :checked and :focus-visible reach it with no :has() — the same
   reason the checked state was a sibling selector before this was a card. */
.pp-quiz__opt {
	position: relative;
	display: block;
	margin-top: var(--sp-3);
	cursor: pointer;
}
.pp-quiz__opt input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.pp-quiz__card {
	display: block;
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--muted);
	transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.pp-quiz__opt:hover .pp-quiz__card {
	border-color: var(--green);
}
/* Inset shadow, not a thicker border: box-sizing is border-box, so a 2px border
   would shift this card's text and make the row jump on selection. */
.pp-quiz__opt input:checked + .pp-quiz__card {
	border-color: var(--green);
	box-shadow: inset 0 0 0 1px var(--green);
	color: var(--ink);
	font-weight: 600;
}
.pp-quiz__opt input:focus-visible + .pp-quiz__card {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}
/* Result. The three panels are one grid: the winner takes the full width and the
   script orders places 2 and 3 into the two columns beneath it. No display on a
   panel itself, or [hidden] would have to be restated to beat it — the trap
   .pp-rail__nav and .pp-buybar already document. */
.pp-quiz__results {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-6) var(--sp-4);
	margin-top: var(--sp-6);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--line);
}
.pp-quiz__results[hidden] {
	display: none;
}
.pp-quiz__match.is-best {
	grid-column: 1 / -1;
}
/* Title case, so no text-transform here: the label is authored the way it reads.
   The two runner-up slots share this class and hold "#2"/"#3", which title case
   cannot touch. Cinzel is a variable font declared 400-700, so 700 is a real
   weight and not a synthesised one. */
.pp-quiz__match-eyebrow {
	font: 700 var(--step--1)/1.3 var(--display);
	letter-spacing: .04em;
	color: var(--green);
}
/* Photo and title, the two halves of one destination. 88px keeps four lines of
   title legible beside it at 390 rather than squeezing the words. */
.pp-quiz__match-head {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
	margin-top: var(--sp-4);
}
.pp-quiz__match-media {
	/* block, not the default inline: the runner-up head below sets display:block
	   on the parent, and width/max-width do not apply to a non-replaced inline
	   element — the thumbnail then took the whole column instead of its cap. */
	display: block;
	flex: none;
	width: 88px;
}
.pp-quiz__match-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}
.pp-quiz__match-title {
	font-size: var(--step-1);
}
.pp-quiz__match-why {
	margin-top: var(--sp-4);
	font-weight: 600;
	color: var(--ink);
}
.pp-quiz__bullets {
	margin-top: var(--sp-2);
	padding-left: var(--sp-4);
	color: var(--muted);
}
.pp-quiz__bullets li + li {
	margin-top: var(--sp-2);
}
.pp-quiz__price {
	margin-top: var(--sp-1);
}
/* Places 2 and 3. Photo above the title, not beside it: in a half-width column an
   88px thumbnail leaves the title about 60px, which breaks it to a word a line.
   They carry no "why it matches you" — the winner's reasons are the answer, and
   the other two are there to be seen next to it. */
.pp-quiz__match:not(.is-best) .pp-quiz__match-head {
	display: block;
}
.pp-quiz__match:not(.is-best) .pp-quiz__match-media {
	width: 100%;
	max-width: 132px;
}
.pp-quiz__match:not(.is-best) .pp-quiz__match-title {
	margin-top: var(--sp-2);
	font-size: var(--step-0);
}
.pp-quiz__match:not(.is-best) .pp-quiz__price {
	font-size: var(--step--1);
}
/* Places 2 and 3 keep their label — the script numbers them #2 and #3 in the
   same slot the winner uses for "Buyers Like You Pick:". They carry no "why it
   matches you": the winner's reasons are the answer, and the other two are
   there to be seen next to it. */
.pp-quiz__match:not(.is-best) .pp-quiz__match-why,
.pp-quiz__match:not(.is-best) .pp-quiz__bullets {
	display: none;
}
/* Narrow: block padding is the whole difference between a 326px and a 358px
   reading column inside a 390px viewport, and screen 2 is the tallest screen —
   four two-line cards plus the Back control want more than the 656px scroller
   that 390x745 gives them. Tighter cards buy the difference back so the Back
   control stays on screen instead of below the fold inside the scroller.
   After the base rules, not before: a media query carries no extra specificity,
   so the later rule wins on a tie. */
/* Narrow: block padding is the whole difference between a 326px and a 358px
   reading column inside a 390px viewport. Screen 2 is the tallest screen and it
   now sits well inside the scroller even with the roomier cards, but the tighter
   ones stay: they are the headroom that keeps a longer option label from pushing
   the last card or the Back control out of the modal.
   After the base rules, not before: a media query carries no extra specificity,
   so the later rule wins on a tie. */
@media (max-width: 767px) {
	/* The result is the tallest view: the winner, its reasons, then places 2 and 3
	   under it. At 390x745 that is 712px of content against a 656px scroller, so
	   the sheet is allowed most of the viewport and the wrapper's spacing comes
	   down a step — 696px into 700px. A shorter phone still scrolls, which is what
	   the scroller is for. */
	.pp-quiz__scroll {
		padding: var(--sp-4);
		/* 96vh, not 94: with the real Cinzel metrics the result measured 701px in a
		   700px scroller — level with the ceiling, so any copy change would start
		   scrolling it. Measured in fallback fonts it looked like 674 and fitting. */
		max-height: 96vh;
	}
	.pp-quiz__results {
		margin-top: var(--sp-4);
		padding-top: var(--sp-4);
	}
	.pp-quiz__opt {
		margin-top: var(--sp-2);
	}
	.pp-quiz__card {
		padding: var(--sp-2) var(--sp-3);
	}
	/* Places 2 and 3 halve the width with the winner, so their thumbnail and title
	   come down with it: a 132px cap in a 152px column leaves the title about
	   four words a line. */
	.pp-quiz__match:not(.is-best) .pp-quiz__match-media {
		max-width: 96px;
	}
	.pp-quiz__match:not(.is-best) .pp-quiz__match-title {
		font-size: var(--step--1);
	}
}

/* --- Product card --- */
/* 1:1; heroes are square */
.pp-card--product {
	display: flex;
	flex-direction: column;
}
/* Bestseller ring. Shadow, not border: box-sizing is border-box, so a border
   would narrow this card's image 2px against its siblings and break the row's
   edge alignment. :hover is claimed explicitly because .pp-card:hover sets
   box-shadow at the same specificity — without it the glow would vanish on
   hover and the card would jump flat. */
.pp-card--bestseller,
.pp-card--bestseller:hover {
	box-shadow:
		0 0 0 2px var(--marigold),
		0 0 8px 1px rgba(253, 177, 0, .9),
		0 0 18px 2px rgba(253, 177, 0, .5),
		var(--shadow);
}
/* Bestseller label as a bar across the foot of the card: part of the card, not a
   sticker over the photo, and not hung outside the ring — stacked on mobile
   that painted the pill over the card above. At the foot it also fills the
   slack a stretched grid row leaves, which a top bar would not. Being inside
   means the card's own overflow clip rounds the bar's corners with everything
   else, so there is no per-breakpoint radius to keep in sync. */
.pp-card__bestseller {
	display: block;
	/* Inline padding matches .pp-card__body's, or a left-aligned label sits 4px
	   left of the title it is supposed to line up with. */
	padding: var(--sp-1) var(--sp-4);
	/* --band with --band-ink is the sheet's documented 6.90:1 pair, and the
	   marigold hairline keeps one gold note without a saturated field fighting
	   the marigold ring around the card. */
	background: var(--band);
	border-top: 2px solid var(--marigold);
	color: var(--band-ink);
	/* Times New Roman set the way it reads expensive: caps, wide tracking, and
	   smaller than body copy. Weight 600 resolves to the real Bold face — Times
	   ships only 400 and 700, and CSS matches up, so nothing is synthesised. */
	font: 600 var(--step--1)/1.3 "Times New Roman", Times, serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: left;
}
.pp-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--paper);
}
.pp-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-3) var(--ease);
}
.pp-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-4);
}
.pp-card__title {
	font-size: var(--step-1);
}
/* Product name: Cinzel a step down from the h3 default and tracked. At 700/step-1
   it shouted next to the photography, and the underline under a two-line name
   fought the caps. Cinzel is self-hosted as a variable font declared 400-700, so
   600 is a real instance rather than a synthesised weight. step-0 rather than
   step-1 because Cinzel is wide: step-1 wrapped the name to three lines in a
   246px column. The marigold rule under it is the card's one gold note, matching
   the badge's top edge — marigold on paper is 1.83:1, so it is decoration only
   and never carries meaning. */
.pp-card--product .pp-card__title {
	position: relative;
	padding-bottom: var(--sp-3);
	font-size: var(--step-0);
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.4;
}
.pp-card--product .pp-card__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	/* 28px, the original span: a short gold dash under the name, not a rule across
	   the whole text column. Owner's call after seeing it span. */
	width: 28px;
	height: 2px;
	background: var(--marigold);
}
.pp-card__title a {
	color: var(--ink);
	text-decoration: none;
}
/* No underline on the product name: Buy Now is the card's standing cue that it
   leads somewhere, and the CTA's ::after already makes the whole tile the tap
   target, so the underline was a third signal for the same thing. */
.pp-card__cta {
	margin-top: var(--sp-2);
	color: var(--green);
	font: 600 .72rem/1.2 var(--body);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
}
.pp-card__cta::after {
	content: "";
	position: absolute;
	inset: 0;
}
.pp-price--card {
	margin: 0;
	font-size: var(--step-1);
}
/* Card price only — the quiz result keeps --step-1 in the body face. The price is
   the card's anchor, so it is set in the display face: 1.4rem because the token
   scale jumps from 1.25rem to a clamp that overshoots at card width. Cinzel is
   the face the ₹ sits in too; it carries U+20B9, so the sign does not fall back
   to Georgia mid-number. */
.pp-card .pp-price--card {
	margin-top: var(--sp-3);
	font-family: var(--display);
	font-size: 1.4rem;
}
.pp-price__unit {
	font-size: var(--step--1);
	font-weight: 400;
	color: var(--muted);
}
.pp-card__short {
	margin: 0;
	color: var(--muted);
	font-size: var(--step--1);
}
/* The tagline sat at body size in full ink, as loud as the price it was meant to
   sit under. Muted and a step down, so the name and the price are what the eye
   lands on. */
.pp-card__short--line {
	color: var(--muted);
	font-size: var(--step--1);
	line-height: 1.5;
}
/* Mobile: the three ghees are a comparison, so all three have to land in one
   screen. Stacked 1:1 photos made the block 1520px — 1.8 screens of scrolling
   before a buyer could compare anything. Same DOM, each card becomes a row:
   jar thumbnail left, the choice right. */
@media (max-width: 600px) {
	/* Doubled from --sp-2 at the owner's request: three stacked cards 8px apart read
	   as one slab rather than three choices. Costs the budget 16px across the two
	   gaps, which the shorter row cards now have to spare. */
	.pp-grid--products {
		gap: var(--sp-4);
	}
	/* Grid, not a flex row: the bestseller bar has to span both columns, and a
	   flex row cannot do that without a wrapper element. */
	.pp-card--product {
		display: grid;
		/* Thumbnail takes 40% of the card; the choice gets the rest. */
		grid-template-columns: 40% 1fr;
	}
	.pp-card__bestseller {
		grid-column: 1 / -1;
		/* The body's inline padding drops to --sp-3 here; the label follows it. */
		padding-inline: var(--sp-3);
	}
	.pp-card__media {
		grid-column: 1;
		/* Fill the row the body sets. The base aspect-ratio 1/1 was winning over the
		   grid's stretch — a definite width plus a ratio resolves the height — so
		   the thumbnail stayed square while the text column grew: 61px of white
		   under it at 390, and 143px at 600 where the two-column grid leaves the
		   body only ~165px to wrap in.
		   Flex, not height:100% on the image: a percentage height against a
		   stretched grid item computes to auto here, so the image kept its own
		   square. Stretch needs the cross size to be auto, which is what the rule
		   below restores. */
		display: flex;
		aspect-ratio: auto;
		align-self: stretch;
	}
	.pp-card__media .pp-card__img {
		height: auto;
	}
	.pp-card__body {
		grid-column: 2;
		justify-content: center;
		padding: var(--sp-2) var(--sp-3);
	}
	/* Cinzel is wide, and the base rule already sets the name at step-0, so the
	   old override here is gone with it. */
	.pp-card .pp-price--card {
		font-size: var(--step-1);
	}
}
/* Mobile ghee landing: the three jars are what the buyer came for, and the
   trust strip's 117px was pushing the third one below the fold. Reorder here
   rather than in the template so desktop keeps the credibility-before-price
   order the archive deliberately sets. Scoped to body.term-ghee because
   .pp-trust-strip is also on the front page, where this would drop the hero
   under the strip. */
@media (max-width: 600px) {
	body.term-ghee .pp-main {
		display: flex;
		flex-direction: column;
	}
	/* Everything else ties at 5 and keeps its own DOM order: steps, farm, closing. */
	body.term-ghee .pp-main > * {
		order: 5;
	}
	/* Notices wrapper only. Left at 5 it would surface mid-page, under the strip. */
	body.term-ghee .pp-main > .pp-container {
		order: 0;
	}
	body.term-ghee .pp-main > .pp-archive-hero {
		order: 0;
	}
	body.term-ghee .pp-main > .pp-archive-products {
		order: 1;
		/* The hero sits directly above this section once the order changes, and it
		   already owns the gap beneath itself with its own --sp-6 bottom padding.
		   Adding this section's top padding made that boundary two gaps: 48px of
		   white above a 43px button, against the 24px below it. Above 600px the
		   trust strip sits between them and the top padding is the only gap. */
		padding-block-start: 0;
	}
	body.term-ghee .pp-main > .pp-trust-strip {
		order: 2;
	}
}

/* --- Rail ---
   Shared image rail: native scroll-snap, arrows drive native scroll.
   Used by the farm and achievements sections. .pp-sensory__* predates it;
   ponytail: migrate sensory here when that block is next touched. */
.pp-rail__nav {
	display: flex;
	justify-content: flex-end;
	gap: var(--sp-2);
	margin-top: var(--sp-8);
}
/* [hidden] must beat display:flex */
.pp-rail__nav[hidden] {
	display: none;
}
.pp-rail__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-block: var(--sp-4);
}
.pp-rail__viewport::-webkit-scrollbar {
	display: none;
}
.pp-rail__viewport:focus-visible {
	outline: 2px solid var(--marigold);
	outline-offset: 2px;
}
.pp-rail__track {
	display: flex;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Card width matches the 920px assets at 2x. */
.pp-rail__card {
	flex: 0 0 clamp(280px, 78vw, 460px);
	scroll-snap-align: start;
}
.pp-rail__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-card);
}
.pp-rail__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Farm --- */
.pp-farm__story {
	max-width: 62ch;
}
.pp-farm__title {
	margin-bottom: var(--sp-4);
}

.pp-farm__caption {
	margin: var(--sp-3) 0 0;
	font-size: var(--step--1);
}

/* --- Achievements --- */
/* h2 carries no margin; the rule above supplies the top space. */
.pp-achievements__title {
	margin-bottom: var(--sp-4);
}

/* --- FAQ --- */
/* Native <details>: no JS */
.pp-faq__item {
	border-bottom: 1px solid var(--line);
	padding: var(--sp-4) 0;
}
.pp-faq__item summary {
	cursor: pointer;
	font: 600 var(--step-1)/1.3 var(--display);
	list-style: none;
}
.pp-faq__item summary::-webkit-details-marker {
	display: none;
}
.pp-faq__item summary::after {
	content: "+";
	float: right;
	color: var(--green);
}
.pp-faq__item[open] summary::after {
	content: "–";
}
.pp-faq__a {
	margin: var(--sp-3) 0 0;
	max-width: var(--measure);
	color: var(--muted);
}

/* --- Closing --- */
/* Closing: inverted paper button */
.pp-closing {
	background: var(--band);
	color: var(--band-ink);
}
.pp-closing__inner {
	max-width: 52ch;
	margin-inline: auto;
	text-align: center;
}
.pp-closing__lede {
	color: var(--band-ink);
}
.pp-closing__action {
	margin: var(--sp-6) 0 0;
}
.pp-btn--paper {
	background: var(--paper);
	color: var(--green);
}
.pp-btn--paper:hover {
	background-image: linear-gradient(var(--shade), var(--shade));
}

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

/* --- Product page --- */
.pp-product {
	display: grid;
	gap: var(--sp-8);
	padding-block: var(--sp-8) var(--sp-12);
}
@media (min-width: 900px) {
	.pp-product {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-12);
		align-items: start;
	}
}

/* Gallery 4:5, no carousel */
.pp-gallery {
	margin: 0;
}
/* 1:1 frame, no CLS */
.pp-gallery__main {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--paper);
}
.pp-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Buy box */
.pp-buybox__title {
	font-size: var(--step-3);
}
.pp-buybox__short {
	color: var(--muted);
}
.pp-price--hero {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-2);
	margin: var(--sp-4) 0 var(--sp-6);
	font-size: var(--step-2);
}

.pp-size {
	margin: 0 0 var(--sp-4);
	padding: 0;
	border: 0;
}
.pp-size__legend {
	padding: 0;
	margin-bottom: var(--sp-2);
	font: 600 var(--step--1)/1 var(--body);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--green);
}
/* Priced rows; rates compare. */
.pp-size__options {
	display: grid;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.pp-size__btn {
	display: block;
	width: 100%;
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--field-line);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.pp-size__btn:active {
	transform: scale(.98);
}
.pp-size__btn.is-selected {
	border-color: var(--green);
	box-shadow: inset 0 0 0 1px var(--green);
}
.pp-size__btn[disabled] {
	opacity: .45;
	cursor: not-allowed;
	text-decoration: line-through;
}
.pp-size__row {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: var(--sp-3);
	align-items: baseline;
}
/* Wide: single-line rows */
@media (min-width: 900px) {
	.pp-size__row {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--sp-2) var(--sp-4);
	}
	.pp-size__rate {
		order: 2;
	}
	/* auto: price hugs right */
	.pp-size__amount {
		order: 3;
		margin-left: auto;
	}
	.pp-size__was {
		order: 4;
	}
}
.pp-size__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	font-weight: 600;
}
.pp-size__amount {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.pp-size__rate,
.pp-size__was {
	font-size: var(--step--1);
	font-variant-numeric: tabular-nums;
}
.pp-size__rate {
	color: var(--muted);
}
/* Regular price, struck. */
.pp-size__was {
	color: var(--muted);
	text-decoration: line-through;
}
/* Magenta badge; ink only. */
.pp-badge {
	display: inline-block;
	padding: .15rem .45rem;
	border: 1.5px solid transparent;
	border-radius: var(--radius);
	font: 600 var(--step--1)/1.3 var(--body);
	white-space: nowrap;
}
/* Shaded magenta; white label. */
.pp-badge--sale {
	background-color: var(--magenta);
	background-image: linear-gradient(var(--shade), var(--shade));
	color: var(--paper);
}
/* Gold fill; ink label. */
.pp-badge--popular {
	background: var(--marigold);
	color: var(--ink);
}

/* Quantity as a stepper: one hairline cell row, two 44px halves. The number
   input stays — typing, arrow keys, min/step and screen readers all keep
   working — but its native up/down arrows are hidden: they are about 12px tall
   and no use on a touch screen. --field-line is 3.11:1, which is what the
   control's own boundary needs (WCAG 1.4.11). */
.pp-qty {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-4);
}
/* The label is a caption for the control, not a heading: it must not compete
   with the price above it or the button below. */
.pp-qty__label {
	font-size: var(--step--1);
	color: var(--muted);
}
.pp-qty__step {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--field-line);
	border-radius: var(--radius);
	overflow: hidden;
}
.pp-qty__btn {
	appearance: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font: 400 1.25rem/1 var(--body);
	cursor: pointer;
}
/* Hover wash is --line, the same 12% ink the hairline uses: a stepper must not
   introduce a colour, and green is spent on Add to cart, the only committing
   action here. */
.pp-qty__btn:hover:not(:disabled) {
	background: var(--line);
}
.pp-qty__btn:disabled {
	color: var(--line);
	cursor: default;
}
.pp-qty__input {
	width: 2.75rem;
	border: 0;
	border-inline: 1px solid var(--field-line);
	background: transparent;
	color: var(--ink);
	font: 400 var(--step-0)/1 var(--body);
	font-variant-numeric: tabular-nums;
	text-align: center;
	/* Firefox and WebKit spinners. */
	appearance: textfield;
}
.pp-qty__input::-webkit-outer-spin-button,
.pp-qty__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}
/* The step row clips its overflow, so the 2px outward ring above would be cut
   off on both buttons. Pull it inside the cell instead. */
.pp-qty__btn:focus-visible,
.pp-qty__input:focus-visible {
	outline-offset: -2px;
}
.pp-btn--block {
	display: flex;
	width: 100%;
	padding-block: 1rem;
}

.pp-buybox__assure {
	margin: var(--sp-6) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--step--1);
	color: var(--muted);
}
.pp-buybox__assure li {
	padding: var(--sp-2) 0;
	border-top: 1px solid var(--line);
}
/* Stars are decoration */
/* Numeral carries the value */
/* Marigold 1.84:1, so aria-hidden */
.pp-stars {
	display: inline-block;
	vertical-align: -2px;
	width: 85px;
	height: 16px;
	margin-right: .35rem;
}
.pp-stars__on {
	stop-color: var(--marigold);
}
.pp-stars__off {
	stop-color: var(--line);
}

/* [hidden] beats display:flex, restated */
.pp-buybar[hidden] {
	display: none;
}
.pp-buybar {
	position: fixed;
	inset: auto 0 0;
	z-index: 20;
	display: flex;
	/* Buybar paper with hairline */
	background: var(--paper);
	color: var(--ink);
	border-top: 1px solid var(--line);
	box-shadow: 0 -6px 24px rgba(15, 12, 7, .10);
}
.pp-buybar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	width: min(100% - 2rem, 1240px);
	padding-block: var(--sp-3);
}
.pp-buybar__name {
	font-size: var(--step--1);
	color: var(--muted);
}
.pp-buybar__price {
	color: var(--ink);
}

/* Below fold: product page */
.pp-product__below {
	padding-block: 0 var(--section);
}
.pp-mini__steps {
	margin: var(--sp-4) 0 0;
	padding-left: 1.2rem;
}
.pp-mini__step {
	margin-bottom: var(--sp-2);
}
.pp-mini__step span {
	display: block;
	color: var(--muted);
	font-size: var(--step--1);
}
.pp-accordion {
	margin-top: var(--sp-8);
	border-top: 1px solid var(--line);
}
.pp-accordion__item {
	border-bottom: 1px solid var(--line);
	padding: var(--sp-4) 0;
}
.pp-accordion__item summary {
	cursor: pointer;
	font: 600 var(--step-1)/1.3 var(--display);
}
.pp-accordion__body {
	margin-top: var(--sp-3);
	color: var(--muted);
}
.pp-specs {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--step--1);
}
.pp-specs th,
.pp-specs td {
	padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
	text-align: left;
	border-bottom: 1px solid var(--line);
}
.pp-specs th {
	color: var(--ink);
	font-weight: 600;
	white-space: nowrap;
}

/* --- Entries --- */
/* One 65ch column. --measure is ch, so it has to resolve here on the
   container (16px). Put on .pp-entry__title it resolves at 60px, where
   65ch is wider than the page, the cap does nothing, and the title starts
   flush left while the 16px body centers on a different edge. */
.pp-entry > .pp-container {
	max-width: var(--measure);
}
/* Opening paragraph reads as a lede. */
.pp-entry__body p:first-of-type {
	font-size: var(--step-1);
}
/* ponytail: content images carry a stale inline width (400px) from the
   Gutenberg import; !important until the posts are re-saved without it. */
.pp-entry__body img {
	width: 100% !important;
}
.pp-entry__body .wp-element-caption {
	text-align: center;
}
.pp-entry__body h2 {
	margin-top: var(--sp-8);
}
.pp-entry__body ul,
.pp-entry__body ol {
	padding-left: 1.2rem;
}
.pp-entry__body li {
	margin-bottom: var(--sp-2);
}
/* Journal / Category */
.pp-crumb {
	margin-bottom: var(--sp-6);
	font-size: var(--step--1);
}
.pp-crumb a {
	color: var(--muted);
	text-decoration: none;
}
.pp-crumb a:hover {
	color: var(--green);
	text-decoration: underline;
}
/* Eyebrow category link inherits the eyebrow's green; hover only underlines.
   Muting it here would make the linked category recede behind the plain date. */
.pp-eyebrow a {
	text-decoration: none;
}
.pp-eyebrow a:hover {
	text-decoration: underline;
}
.pp-crumb__sep {
	margin-inline: var(--sp-2);
	color: var(--muted);
}
/* Featured image fills the column. */
.pp-entry__hero {
	margin: var(--sp-8) 0 0;
}
.pp-entry__hero-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}
/* Editor blocks: headings */
.pp-entry__body h3,
.pp-entry__body h4 {
	margin-top: var(--sp-8);
	font-family: var(--display);
	font-weight: 600;
}
.pp-entry__body h4 {
	font-size: var(--step-1);
}
/* Editor blocks: separator */
.pp-entry__body hr {
	margin: var(--sp-8) 0;
	border: 0;
	border-top: 1px solid var(--line);
}
/* Editor blocks: table; scrolls sideways */
.pp-entry__body .wp-block-table {
	margin: var(--sp-8) 0;
	overflow-x: auto;
}
.pp-entry__body .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--step--1);
}
.pp-entry__body .wp-block-table th,
.pp-entry__body .wp-block-table td {
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}
.pp-entry__body .wp-block-table th {
	background: var(--shade);
	font-weight: 600;
}
/* Editor blocks: image and caption */
.pp-entry__body .wp-block-image {
	margin: var(--sp-8) 0;
}
.pp-entry__body .wp-block-image img {
	height: auto;
	border-radius: var(--radius-card);
}
.pp-entry__body .wp-element-caption {
	margin-top: var(--sp-2);
	font-size: var(--step--1);
	color: var(--muted);
}
/* Floats squeeze the measure; stack them */
.pp-entry__body .alignleft,
.pp-entry__body .alignright {
	float: none;
	margin-inline: 0;
}
/* Tags: present on one post only, so they get their own row. */
.pp-entry__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-8);
	font-size: var(--step--1);
}
.pp-entry__tags-label {
	margin-right: var(--sp-1);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
}
.pp-tag {
	padding: var(--sp-1) var(--sp-3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--ink);
}
.pp-tag:hover {
	border-color: var(--green);
	color: var(--green);
}

/* Neighbours in the category */
.pp-series {
	display: grid;
	gap: var(--sp-4);
	max-width: var(--measure);
	margin-top: var(--sp-12);
}
.pp-series__link {
	padding: var(--sp-4) var(--sp-6);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	text-decoration: none;
	color: var(--ink);
}
.pp-series__link:hover {
	background: var(--shade);
}
.pp-series__label {
	display: block;
	margin-bottom: var(--sp-2);
	font-size: var(--step--1);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
}
.pp-series__title {
	font-family: var(--display);
	font-weight: 600;
}
.pp-series__link--next {
	text-align: right;
}
.pp-related__title {
	margin-bottom: var(--sp-8);
}
@media (min-width: 640px) {
	.pp-series {
		grid-template-columns: 1fr 1fr;
	}
}
.pp-archive__title {
	margin-bottom: var(--sp-8);
}
/* Category landing hero. Paid traffic: the jars need to sit near the fold,
   so this is tighter than the default --section padding. */
.pp-archive-hero {
	padding-block: var(--sp-8) var(--sp-6);
}
/* Cow band. Full-bleed: the photo is pinned to the hero's left, top and
   bottom edges at the whole 16:9 frame — never cropped, so cow and calf both
   read — with its own right edge faded into the paper.

   The fade lives on the photo, not on the hero. The photo is ~42vw wide, so
   a fade in vw stops finishes past its edge on a wide screen and leaves a
   square cut; on the photo, 60%->100% is the same soft edge at every width.

   1272px and up. That is where .pp-container stops growing, so the copy's
   left edge sits at 50vw and never meets the photo. Under it the same design
   runs the other axis — see the max-width block below. */
.pp-archive-hero__media {
	display: none;
	margin: 0;
}
.pp-archive-hero__media img {
	display: block;
	width: 100%;
	height: auto;
}
/* Under 768px the copy is 358px wide — the whole container — so there is no
   room beside a photo. Same design, turned vertical: the band bleeds both
   edges and fades downward into the paper, copy below on paper.

   390/180 is an aspect, not a fixed height, and it has to be. The photo
   scales with the viewport, so a fixed 180px band crops tighter the wider the
   screen gets — at 768px the photo renders 768x432 and a 180px band cuts the
   calf off entirely. As an aspect the framing is identical at every width:
   the top 82% of the frame, which is the head at y30-77 and the calf at
   y89-154 in the 390px render. 390/180 makes that exactly 180px at 390px.

   Stops at 768px because the height scales: at 1024 the band alone would be
   472px and at 1271px, 586px, which is the whole viewport. 768px is also
   where the nav collapses, so this is the theme's own small-screen line. */
@media (max-width: 767px) {
	.pp-archive-hero {
		padding-top: 0;
	}
	.pp-archive-hero__media {
		display: block;
		position: relative;
		aspect-ratio: 390 / 180;
		margin-bottom: var(--sp-4);
		/* Bleeds by exactly the container's gutter: 1rem, half that under
		   375px. Preferable to 100vw, which overflows by the scrollbar width
		   on a desktop browser narrow enough to hit this block. */
		margin-inline: calc(var(--sp-4) * -1);
	}
	.pp-archive-hero__media img {
		height: 100%;
		object-fit: cover;
		object-position: top;
	}
	.pp-archive-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 80%, var(--paper) 100%);
		pointer-events: none;
	}
}
@media (max-width: 374px) {
	.pp-archive-hero__media {
		margin-inline: calc(var(--sp-2) * -1);
	}
}
@media (min-width: 1272px) {
	.pp-archive-hero {
		position: relative;
		display: flex;
		align-items: center;
		/* Height drives the photo's width (auto 100%), so this also sizes the
		   band. 23.6vw clamps at 1525px. */
		min-height: clamp(260px, 23.6vw, 360px);
	}
	/* No position/z-index on .pp-archive-hero__inner, on purpose: relative
	   would make the container the containing block for the photo below and
	   collapse it to the copy's height. */
	.pp-archive-hero__media {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
	}
	.pp-archive-hero__media img {
		width: auto;
		height: 100%;
	}
	/* Long, soft edge: 60%->100% of the frame. The cow's tail ends at 79%, so
	   the hindquarters fade into the paper rather than stopping at it. */
	.pp-archive-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0) 60%, var(--paper) 100%);
		pointer-events: none;
	}
	/* Copy holds the container's right edge with its 65ch measure intact. */
	.pp-archive-hero__copy {
		width: fit-content;
		margin-left: auto;
	}
	/* 64px only where the photo band is: --step-4 is clamp-capped at 60px on
	   desktop but resolves to ~40px on a phone, so an unscoped size here would
	   inflate the mobile title by 60%. */
	.pp-archive-hero .pp-archive__title {
		font-size: 4rem;
	}
}
.pp-archive-hero .pp-archive__title {
	margin: var(--sp-2) 0 0;
}
.pp-archive-hero .pp-lede {
	margin: var(--sp-3) 0 0;
}
/* Luxe read: the eyebrow drops its green for ink and gains a marigold
   hairline; the title takes the brand green back, at Cinzel 700. No markup
   change; both are the existing elements plus one pseudo-element. */
.pp-archive-hero .pp-eyebrow {
	color: var(--ink);
	letter-spacing: .2em;
}
.pp-archive-hero .pp-eyebrow::after {
	content: "";
	display: block;
	width: 56px;
	height: 1px;
	background: var(--marigold);
	margin-top: 11px;
}
.pp-archive-hero .pp-archive__title {
	/* Brand green on paper: 6.90:1. AAA for large text, which covers the
	   title at both sizes it takes — 64px desktop, 39.64px mobile. */
	color: var(--green);
	font-weight: 700;
	letter-spacing: .02em;
}
/* Half a step up, to carry the wider title. */
.pp-archive-hero .pp-lede {
	font-size: 21px;
}

/* Lead story: front-page .pp-hero geometry inside the archive container. */
.pp-archive__lead {
	margin-bottom: var(--sp-12);
}
.pp-archive__lead .pp-hero__title a {
	color: var(--ink);
	text-decoration: none;
}
.pp-archive__lead .pp-hero__title a:hover {
	color: var(--green);
}
/* Post cards: 16:9 photo, not the product 1:1. */
.pp-card--post .pp-card__media {
	aspect-ratio: 16 / 9;
}

/* Journal headings: Times New Roman. Scoped to the blog listing and single
   posts via their own marker class, so the shop archive (also .pp-archive)
   and static pages (also .pp-entry) keep Cinzel. */
.pp-archive--journal h1,
.pp-archive--journal h2,
.pp-archive--journal h3,
.pp-entry--post h1,
.pp-entry--post h2,
.pp-entry--post h3,
.pp-entry--post h4,
.pp-entry--post .pp-series__title,
.pp-related h2,
.pp-related h3 {
	font-family:"Times New Roman", Times, serif;
}

/* WP nav markup (.nav-links/.page-numbers), unstyled otherwise */
.pp-pagination {
	margin-top: var(--sp-12);
}
.pp-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}
.pp-pagination .page-numbers {
	padding: .5rem .8rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--ink);
}
.pp-pagination .page-numbers.current {
	background: var(--shade);
	font-weight: 600;
}

/* Muted on band ~1.4:1 */
.pp-section--band .pp-card__title a {
	color: var(--band-ink);
}
.pp-section--band .pp-card__short {
	color: var(--band-ink);
	/* 0.92 not 0.88 (4.72:1) */
	opacity: .92;
}
/* Band price white 5.24:1 */
.pp-section--band .pp-card .pp-price {
	color: var(--band-ink);
}

/* --- Empty states --- */
/* 404, empty search, out-of-stock */
.pp-state {
	max-width: 46ch;
	margin-inline: auto;
	padding-block: var(--section);
	text-align: center;
}
.pp-state__title {
	font-size: var(--step-3);
}
.pp-state__body {
	color: var(--muted);
}
.pp-state__action {
	margin-top: var(--sp-6);
}
.pp-stock--out {
	font: 600 var(--step-1)/1.3 var(--display);
	color: var(--green);
}
.pp-stock__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-4);
}

/* --- Landing blocks --- */
/* Landing blocks: shared classes */

/* Promise padding 1.25rem-1.75rem */
.pp-promise {
	padding-block: clamp(1.25rem, 1.8vw, 1.75rem);
}
/* Claim left, lede right */
.pp-promise__inner {
	display: grid;
	gap: var(--sp-4) var(--sp-8);
}
@media (min-width: 900px) {
	.pp-promise__inner {
		grid-template-columns: 1.35fr 1fr;
		align-items: center;
	}
	/* Rule spans the claim */
	.pp-promise .pp-rule {
		grid-column: 1 / -1;
	}
}
.pp-promise__title {
	font-size: var(--step-4);
	margin: 0;
}
.pp-promise__lede {
	margin: 0;
	font-size: var(--step-1);
	opacity: .92;
}
/* Spacing from grid gap */
.pp-promise .pp-rule {
	margin: 0;
}

/* Step cards; fifth wide */
.pp-bilona__title {
	margin: 0 0 var(--sp-4);
}
/* One step per row */
.pp-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	margin: var(--sp-8) 0 0;
	padding: 0;
}
.pp-step {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: var(--sp-3);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	overflow: hidden;
	/* Ink overrides band */
	color: var(--ink);
	/* Contact, mid, ambient */
	box-shadow:
		0 1px 2px rgba(15, 12, 7, .04),
		0 4px 10px rgba(15, 12, 7, .05),
		0 16px 32px -12px rgba(15, 12, 7, .10);
	transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
/* Deeper on hover; pointer only */
@media (hover: hover) {
	.pp-step:hover {
		transform: translateY(-3px);
		box-shadow:
			0 2px 4px rgba(15, 12, 7, .05),
			0 10px 22px rgba(15, 12, 7, .08),
			0 28px 48px -16px rgba(15, 12, 7, .14);
	}
}
/* Thumb fills the card */
.pp-step__media {
	flex: 0 0 120px;
	align-self: stretch;
	margin: 0;
	aspect-ratio: auto;
	overflow: hidden;
	background: var(--paper);
}
/* Specificity beats WooCommerce img */
.pp-step__media .pp-step__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pp-step__text {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--sp-3);
}
/* Green 6.90:1; gold fails */
.pp-step__num {
	margin: 0 0 var(--sp-1);
	color: var(--green);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: .08em;
}
.pp-step__title {
	margin: 0 0 var(--sp-2);
	font-size: var(--step-1);
}
.pp-step__body {
	margin: 0;
	font-size: var(--step--1);
	color: var(--muted);
}
/* Intro card: text only */
.pp-step--intro {
	justify-content: center;
}
.pp-step--intro .pp-step__title {
	font-size: var(--step-2);
	margin-bottom: var(--sp-2);
}

/* Wide cards from 480 */
@media (min-width: 480px) {
	.pp-steps {
		grid-template-columns: repeat(2, 1fr);
	}
	.pp-step {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.pp-step__media {
		flex: 0 1 auto;
		align-self: auto;
		aspect-ratio: 16 / 10;
	}
	.pp-step__text {
		flex: 0 1 auto;
		min-width: auto;
		padding: var(--sp-4) var(--sp-4) var(--sp-6);
	}
	.pp-step__body {
		font-size: var(--step-0);
	}
}
@media (min-width: 640px) {
	.pp-steps {
		gap: var(--sp-6);
	}
}
@media (min-width: 1024px) {
	.pp-steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Native scroll-snap, no carousel */
.pp-sensory__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-6);
}
.pp-sensory__title {
	margin: 0;
}
.pp-sensory__nav {
	display: flex;
	flex: none;
	gap: var(--sp-2);
}
/* [hidden] must beat display:flex */
.pp-sensory__nav[hidden] {
	display: none;
}
.pp-carousel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--field-line);
	border-radius: 50%;
	background: var(--paper);
	color: var(--ink);
	cursor: pointer;
}
.pp-carousel-btn:hover:not([disabled]) {
	border-color: var(--green);
	background: var(--green);
	color: var(--paper);
}
.pp-carousel-btn[disabled] {
	opacity: .4;
	cursor: default;
}
.pp-sensory__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* 16px room for shadows */
	padding-block: var(--sp-4);
}
.pp-sensory__card:hover {
	box-shadow: 0 2px 10px rgba(15, 12, 7, .10);
}
.pp-sensory__viewport::-webkit-scrollbar {
	display: none;
}
.pp-sensory__viewport:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}
.pp-sensory__track {
	display: flex;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Cards clamp(280px, 78vw, 460px) */
.pp-sensory__card {
	flex: 0 0 clamp(280px, 78vw, 460px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}
.pp-sensory__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--paper);
}
.pp-sensory__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pp-sensory__text {
	padding: var(--sp-4) var(--sp-4) var(--sp-6);
}
.pp-sensory__row-title {
	margin: 0 0 var(--sp-2);
	font-size: var(--step-1);
}
.pp-sensory__body {
	margin: 0;
	color: var(--muted);
}

.pp-reasons__title {
	margin: 0 0 var(--sp-8);
}
.pp-reasons__list {
	display: grid;
	gap: var(--sp-6);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 700px) {
	.pp-reasons__list {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px) {
	.pp-reasons__list {
		grid-template-columns: repeat(4, 1fr);
	}
}
.pp-reasons__item {
	border-top: 2px solid var(--green);
	padding-top: var(--sp-4);
}
.pp-reasons__summary {
	display: block;
	list-style: none;
	cursor: pointer;
}
/* Kill both markers. */
.pp-reasons__summary::-webkit-details-marker {
	display: none;
}
.pp-reasons__summary::marker {
	content: "";
}
.pp-reasons__icon {
	color: var(--green);
	margin-bottom: var(--sp-3);
}
.pp-reasons__item-title {
	margin: 0 0 var(--sp-2);
	font-size: var(--step-1);
}
.pp-reasons__item-body {
	margin: 0;
	color: var(--muted);
	font-size: var(--step--1);
}
/* Accordion <700px; boxes above. */
@media (max-width: 699px) {
	.pp-reasons__item {
		padding-top: 0;
	}
	.pp-reasons__summary {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
		padding-block: var(--sp-3);
	}
	.pp-reasons__summary .pp-reasons__icon {
		flex: none;
		margin-bottom: 0;
	}
	.pp-reasons__summary .pp-reasons__item-title {
		margin: 0;
	}
	/* Chevron rotates on open. */
	.pp-reasons__summary::after {
		content: "";
		width: .5rem;
		height: .5rem;
		margin-left: auto;
		border-right: 2px solid var(--ink);
		border-bottom: 2px solid var(--ink);
		transform: rotate(45deg);
		transition: transform var(--dur-2) var(--ease);
	}
	.pp-reasons__details[open] .pp-reasons__summary::after {
		transform: rotate(-135deg);
	}
	.pp-reasons__item-body {
		padding-bottom: var(--sp-4);
	}
}

.pp-reasons__film {
	position: relative;
	margin: 0 0 var(--sp-8);
}
.pp-reasons__video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
	background: var(--ink);
}
/* Crop wide; square phones. */
@media (min-width: 700px) {
	.pp-reasons__video {
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
}
/* Corner pill; script wired. */
.pp-reasons__toggle {
	display: none;
}
html.pp-js .pp-reasons__toggle {
	position: absolute;
	right: var(--sp-3);
	bottom: var(--sp-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 12, 7, .78);
	color: var(--paper);
	cursor: pointer;
}
.pp-reasons__toggle-play,
.pp-reasons__film.is-paused .pp-reasons__toggle-pause {
	display: none;
}
.pp-reasons__film.is-paused .pp-reasons__toggle-play {
	display: block;
}

.pp-proof__inner {
	max-width: 46ch;
	text-align: center;
}
.pp-proof__title {
	margin: 0;
	font-size: var(--step-2);
}
.pp-proof__lede {
	margin: var(--sp-4) 0 0;
	opacity: .92;
}
.pp-proof__action {
	margin: var(--sp-6) 0 0;
}
.pp-proof .pp-rule {
	margin-inline: auto;
}

.pp-pfaq__title {
	margin: 0 0 var(--sp-6);
}
.pp-pfaq__list {
	max-width: var(--measure);
}