/* ============================================================
   Preschem — components
   ============================================================ */

/* Containers */
.ps-container {
	width: 100%;
	max-width: var(--ps-container);
	margin: 0 auto;
	padding-left: var(--ps-gutter);
	padding-right: var(--ps-gutter);
}

.ps-section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.ps-section--tight { padding: clamp(2rem, 4vw, 3rem) 0; }

/* Sections on Forest */
.ps-section--forest { background: var(--ps-forest); color: var(--ps-white); }
.ps-section--forest h1, .ps-section--forest h2, .ps-section--forest h3, .ps-section--forest h4 { color: var(--ps-white); }

.ps-section--deep { background: var(--ps-forest-deep); color: var(--ps-white); }

/* ----- Secondary nav bar ----- */
.ps-topbar {
	background: var(--ps-forest);
	color: var(--ps-white);
	font-size: .8125rem;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.ps-topbar__inner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: clamp(.75rem, 2vw, 1.75rem);
	min-height: 36px;
}
.ps-topbar a {
	color: var(--ps-white);
	text-decoration: none;
	opacity: .85;
}
.ps-topbar a:hover { opacity: 1; color: var(--ps-orange); }
.ps-topbar__phone { font-weight: 700; letter-spacing: .02em; }
.ps-topbar__sep { opacity: .35; }
@media (max-width: 640px) {
	.ps-topbar__hide-mobile { display: none; }
	.ps-topbar__inner { justify-content: center; }
}

/* ----- Primary header ----- */
.ps-header {
	background: var(--ps-white);
	border-bottom: 1px solid var(--ps-line);
}
.ps-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: 84px;
}
.ps-logo { display: inline-flex; align-items: center; }
/* Desktop: full wordmark+mark logo, enlarged to balance with the 84px header. */
.ps-logo__full { display: block; height: 56px; width: auto; }
.ps-logo__mark { display: none; }
/* The supplied wordmark SVG has ~31% empty padding inside its viewBox before
   the visible mark begins. Shift the rendered logo left so its visible left
   edge sits on the same column as the page content (.ps-container's inner
   edge), matching the visual alignment users perceive. translateX keeps flex
   layout intact — header__inner still treats the logo as its original-width
   item. Only applies when the wordmark variant is showing — the mark-only
   icon is a clean square with no internal padding, so it doesn't need the
   shift on mobile. */
.ps-logo { transform: translateX(-31%); }
/* Mobile: swap the full logo for the standalone "P" brandmark, sized to
   match the 44px header-button height so logo / Where-to-Buy / hamburger
   all sit at the same height and read as a balanced trio. */
@media (max-width: 820px) {
	.ps-logo { transform: none; }
	.ps-logo__full { display: none; }
	.ps-logo__mark { display: block; height: 44px; width: 44px; }
}
.ps-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.ps-nav__links { display: flex; align-items: center; gap: clamp(2rem, 2.5vw, 2.5rem); }
.ps-nav a {
	text-decoration: none;
	font-weight: 600;
	font-size: .9375rem;
	letter-spacing: .01em;
	color: var(--ps-black);
}
.ps-nav a:hover { color: var(--ps-burnt-orange); }
@media (max-width: 820px) {
	.ps-nav__links { display: none; }
}

/* ----- Buttons ----- */
.ps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .9rem 1.4rem;
	font-family: var(--ps-font-sans);
	font-weight: 700;
	font-size: .9375rem;
	letter-spacing: .01em;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--ps-radius);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.ps-btn:active { transform: translateY(1px); }

.ps-btn--orange { background: var(--ps-orange); color: var(--ps-black); border-color: var(--ps-orange); }
.ps-btn--orange:hover { background: var(--ps-burnt-orange); border-color: var(--ps-burnt-orange); color: var(--ps-white); }

.ps-btn--ghost { background: transparent; color: var(--ps-white); border-color: rgba(255,255,255,.5); }
.ps-btn--ghost:hover { background: var(--ps-white); color: var(--ps-forest); border-color: var(--ps-white); }

.ps-btn--dark { background: var(--ps-black); color: var(--ps-white); border-color: var(--ps-black); }
.ps-btn--dark:hover { background: var(--ps-forest); border-color: var(--ps-forest); }

.ps-btn--sm { padding: .55rem .9rem; font-size: .8125rem; }
.ps-btn--lg { padding: 1.1rem 1.75rem; font-size: 1rem; }

/* ----- Hero ----- */
.ps-hero {
	position: relative;
	background: var(--ps-forest);
	color: var(--ps-white);
	overflow: hidden;
	padding: clamp(4rem, 10vw, 8rem) 0;
}
.ps-hero__inner { position: relative; z-index: 2; max-width: 880px; }
.ps-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.18);
	color: var(--ps-white);
	padding: .4rem .8rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 1.5rem;
}
.ps-hero__badge::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--ps-orange);
	display: inline-block;
}
.ps-hero h1 {
	color: var(--ps-white);
	max-width: 14ch;
	margin-bottom: 1.25rem;
}
.ps-hero__sub {
	font-size: clamp(1.05rem, 1.6vw, 1.375rem);
	color: rgba(255,255,255,.82);
	max-width: 50ch;
	margin-bottom: 2rem;
	line-height: 1.5;
}
.ps-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Paint stripe decorations (SVG injected, see paint-stripe.css) */
.ps-hero__stripe {
	position: absolute;
	right: -8%;
	top: 50%;
	transform: translateY(-50%);
	width: 70%;
	max-width: 900px;
	opacity: .12;
	pointer-events: none;
	z-index: 1;
}

/* Hero product cluster — layered "family portrait" of tins over the paint
   stripe. Sits above the stripe (z-index 1, later in DOM) but below the hero
   text (.ps-hero__inner z-index 2), so text always stays readable on top.
   Decorative: pointer-events none, empty alt + aria-hidden container. */
.ps-hero__cluster {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(360px, 46vw, 600px);
	height: clamp(360px, 42vw, 560px);
	z-index: 1;
	pointer-events: none;
}
.ps-hero__tin {
	position: absolute;
	display: block;
	height: auto;
	filter: drop-shadow(0 16px 26px rgba(8, 18, 12, .45));
}
/* Foreground — largest, full opacity, deepest forest-tinted shadow */
.ps-hero__tin--1 { left: 30%; top: 30%; width: 47%; z-index: 6; transform: rotate(2deg);  filter: drop-shadow(0 24px 36px rgba(6, 16, 10, .55)); }
.ps-hero__tin--7 { left: 5%;  top: 42%; width: 43%; z-index: 5; transform: rotate(-4deg); filter: drop-shadow(0 22px 34px rgba(6, 16, 10, .52)); }
/* Mid layer */
.ps-hero__tin--3 { left: 60%; top: 40%; width: 37%; z-index: 4; transform: rotate(4deg);  opacity: .97; }
.ps-hero__tin--5 { left: 22%; top: 60%; width: 37%; z-index: 4; transform: rotate(-3deg); opacity: .97; }
.ps-hero__tin--6 { left: 52%; top: 15%; width: 34%; z-index: 3; transform: rotate(3deg);  opacity: .95; }
/* Back layer — smaller, softer, faded (the green Radial drum recedes into the
   forest background as a natural depth anchor) */
.ps-hero__tin--2 { left: 9%;  top: 35%; width: 31%; z-index: 2; transform: rotate(-5deg); opacity: .88; filter: drop-shadow(0 12px 20px rgba(6, 16, 10, .38)); }
.ps-hero__tin--8 { left: 71%; top: 61%; width: 30%; z-index: 2; transform: rotate(5deg);  opacity: .87; filter: drop-shadow(0 12px 20px rgba(6, 16, 10, .38)); }
.ps-hero__tin--4 { left: 41%; top: 3%;  width: 31%; z-index: 1; transform: rotate(-2deg); opacity: .85; filter: drop-shadow(0 10px 18px rgba(6, 16, 10, .35)); }

/* Mobile: drop to a curated 3-tin trio flowing below the hero text so the
   H1 + CTAs stay above the fold (keeps the mobile-pass fix intact). */
@media (max-width: 760px) {
	.ps-hero__cluster {
		position: relative;
		right: auto;
		top: auto;
		transform: none;
		width: 100%;
		max-width: 320px;
		height: 190px;
		margin: 2.75rem auto 0;
	}
	.ps-hero__tin { display: none; }
	.ps-hero__tin--1,
	.ps-hero__tin--7,
	.ps-hero__tin--3 { display: block; }
	.ps-hero__tin--1 { left: 30%; top: 0;   width: 46%; transform: rotate(2deg);  }
	.ps-hero__tin--7 { left: 2%;  top: 14%; width: 42%; transform: rotate(-4deg); }
	.ps-hero__tin--3 { left: 59%; top: 16%; width: 40%; transform: rotate(4deg);  }
}

/* ----- Trust bar ----- */
.ps-trustbar { background: var(--ps-forest-deep); color: var(--ps-white); }
.ps-trustbar__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	padding: 1.25rem 0;
}
/* WordPress injects `margin-block: 24px 0` on every non-first child of
   .is-layout-flow groups (the default layout). Inside our flex/grid
   containers that margin pushes siblings off-row — strip it. */
.ps-trustbar__inner > *,
.ps-finder__grid > *,
.ps-hero__ctas > * {
	margin-block: 0 !important;
}
.ps-trustbar__item {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
	min-width: 0;
}
.ps-trustbar__item > * { min-width: 0; }
/* Trustbar item label was inline text in a div before block conversion; now it's
   a <p> child. Zero default paragraph margins so the flex layout sits identically. */
.ps-trustbar__item p { margin: 0; }
.ps-trustbar__icon {
	flex: 0 0 28px;
	width: 28px; height: 28px;
	color: var(--ps-orange);
}
@media (max-width: 900px) { .ps-trustbar__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ps-trustbar__inner { grid-template-columns: 1fr; } }

/* ----- Product finder ----- */
.ps-finder { background: var(--ps-white); }
.ps-finder__head { text-align: left; margin-bottom: 2.5rem; max-width: 720px; }
.ps-finder__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}
@media (max-width: 760px) { .ps-finder__grid { grid-template-columns: 1fr; } }

/* Homepage "Find your product" finder cards — photo header strip + description.
   #F0EBE1 is the card colour (deliberately not --ps-cream #F5F1EA) so the
   image-band gradient fades seam-free. Own component (.ps-finder-card) so
   changes here never leak into the product/learn/partner cards. */
.ps-finder-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
	background: #F0EBE1;
	border-radius: var(--ps-radius-lg);
	overflow: hidden;
	color: var(--ps-black);
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
	min-height: 280px;
}
/* Photo header strip — background image set per-card inline in the markup */
.ps-finder-card__band {
	flex: 0 0 220px;
	background-size: cover;
	background-position: center;
	position: relative;
}
.ps-finder-card__band::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;   /* overlap the band/body seam by 1px */
	height: 62px;                       /* 60px fade + 1px overlap + 1px solid */
	/* reach solid #F0EBE1 before the very bottom so the image's dark edge is
	   fully covered — otherwise a hairline of the image shows through the last
	   ~1px of the fade, made visible by the hover translate's sub-pixel shift */
	background: linear-gradient(transparent, #F0EBE1 88%);
}
.ps-finder-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1.5rem 1.5rem;
}
.ps-finder-card__icon {
	width: 28px; height: 28px;
	margin-bottom: 6px;
	color: #2D3A2E;
	transition: color .25s ease;
}
.ps-finder-card__title { font-size: 22px; font-weight: 700; color: #1A1A18; margin: 0 0 8px; }
.ps-finder-card__desc { font-size: 15px; font-weight: 400; color: #6B6960; line-height: 1.5; margin: 0 0 16px; }
.ps-finder-card__cta {
	margin-top: auto;
	font-weight: 600;
	font-size: 14px;
	color: #2D3A2E;
	display: inline-flex; align-items: center; gap: .35rem;
	transition: color .25s ease;
}
.ps-finder-card__cta::after { content: "→"; transition: transform .25s ease; }

/* Hover gated to real pointers so mobile taps don't get stuck states.
   Lift + shadow (translateY(-2px), 0 6px 24px rgba(0,0,0,.1)); the
   icon/cta→orange + arrow-slide micro-interactions from the unified pass. */
@media (hover: hover) {
	.ps-finder-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 24px rgba(0,0,0,.1);
	}
	.ps-finder-card:hover .ps-finder-card__icon { color: var(--ps-orange); }
	.ps-finder-card:hover .ps-finder-card__cta { color: var(--ps-orange); }
	.ps-finder-card:hover .ps-finder-card__cta::after { transform: translateX(4px); }
}

/* Trim the band on mobile so the 220px photo doesn't dominate the ~343px card */
@media (max-width: 760px) {
	.ps-finder-card__band { flex-basis: 180px; }
}

/* Where to Buy "Major retail partners" cards — simple icon + title + text info
   card (post 2254). Own component so it doesn't ride on the finder card. Visual
   parity with its previous .ps-card rendering: cream bg, 10px radius, icon in
   deep green; padding + min-height come inline from the block markup. */
.ps-partner-card {
	display: flex;
	flex-direction: column;
	background: #F0EBE1;
	border-radius: var(--ps-radius-lg);
	overflow: hidden;
	color: var(--ps-black);
	transition: transform .25s ease, box-shadow .25s ease;
}
.ps-partner-card__icon {
	width: 28px; height: 28px;
	margin-bottom: 6px;
	color: #2D3A2E;
}
.ps-partner-card__title { font-size: 22px; font-weight: 700; color: #1A1A18; margin: 0 0 8px; }
@media (hover: hover) {
	.ps-partner-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 24px rgba(0,0,0,.1);
	}
}

/* ----- Stockist banner (forest green with orange button accent) ----- */
.ps-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	background: var(--ps-forest);
	color: var(--ps-white);
	padding: 1.75rem 2rem;
	border-radius: var(--ps-radius-lg);
	margin-top: 2.5rem;
}
.ps-banner__title { font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 800; letter-spacing: -.01em; color: var(--ps-white); margin: 0; }
.ps-banner__sub { font-size: .9375rem; color: rgba(255,255,255,0.7); margin: 0; }

/* Banner stockist button — orange bg / black text, hover deepens bg only */
.ps-banner .ps-btn--dark {
	white-space: nowrap;
	background: var(--ps-orange);
	color: var(--ps-black);
	border-color: var(--ps-orange);
	transition: background-color .2s ease, border-color .2s ease;
}
@media (hover: hover) {
	.ps-banner .ps-btn--dark:hover {
		background: var(--ps-burnt-orange);
		border-color: var(--ps-burnt-orange);
		color: var(--ps-white);
	}
}
.ps-banner .ps-btn--dark:focus-visible {
	background: var(--ps-burnt-orange);
	border-color: var(--ps-burnt-orange);
	color: var(--ps-white);
}

/* Header nav "Where to Buy" — orange bg / black text, hover deepens bg only.
   Overrides the generic .ps-nav a:hover colour rule that otherwise turns
   the text burnt-orange (same as the hover bg = invisible). */
.ps-nav > .ps-btn--orange,
.ps-nav > .ps-btn--orange:visited {
	color: var(--ps-black);
	transition: background-color .2s ease, border-color .2s ease;
}
@media (hover: hover) {
	.ps-nav > .ps-btn--orange:hover {
		background: var(--ps-burnt-orange);
		border-color: var(--ps-burnt-orange);
		color: var(--ps-white);
	}
}
.ps-nav > .ps-btn--orange:focus-visible {
	background: var(--ps-burnt-orange);
	border-color: var(--ps-burnt-orange);
	color: var(--ps-white);
}

/* ----- Learn teaser ----- */
.ps-learn { background: var(--ps-cream); }
.ps-learn__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem;
}
@media (max-width: 760px) { .ps-learn__grid { grid-template-columns: 1fr; } }

.ps-article {
	position: relative; /* anchors the stretched title link below */
	display: flex;
	flex-direction: column;
	background: var(--ps-white);
	border-radius: var(--ps-radius-lg);
	overflow: hidden;
	border: 1px solid var(--ps-line);
	color: var(--ps-black);
	transition: transform .18s ease, box-shadow .18s ease;
}
.ps-article:hover { transform: translateY(-3px); box-shadow: var(--ps-shadow-card); }
.ps-article__media {
	aspect-ratio: 16/9;
	background: linear-gradient(135deg, var(--ps-forest), var(--ps-forest-deep));
	position: relative;
}
.ps-article__media::after {
	content: "";
	position: absolute; inset: 0;
	background-image: radial-gradient(circle at 70% 30%, rgba(255,118,26,.25), transparent 55%);
}
.ps-article__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.ps-badge {
	display: inline-block;
	background: var(--ps-forest);
	color: var(--ps-white);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .3rem .55rem;
	border-radius: 3px;
	align-self: flex-start;
}
.ps-badge--orange { background: var(--ps-orange); color: var(--ps-black); }
/* When the badge is a link (filterable category badge on the Learn archive),
   sit above the stretched title link so it stays independently clickable,
   and shift background to burnt-orange on direct interaction — same as
   homepage category links (.ps-learn .category-links a:hover). The text
   stays white in every state, including :hover/:focus/:active, overriding
   typography.css's generic `a:hover { color: burnt-orange }`. */
a.ps-badge,
a.ps-badge:hover,
a.ps-badge:focus,
a.ps-badge:active {
	color: var(--ps-white);
	text-decoration: none;
}
a.ps-badge {
	position: relative;
	z-index: 2;
	transition: background .15s ease;
}
a.ps-badge:hover,
a.ps-badge:focus {
	background: var(--ps-burnt-orange);
}
.ps-article__title { font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; transition: color .18s ease; }
.ps-article__title a { color: inherit; text-decoration: none; }
/* Stretched-link pattern: the title's anchor covers the entire card via
   ::after, so clicking anywhere on the card (media, excerpt, "Read more")
   navigates to the article. The badge sits above this layer (z-index:2)
   so it stays independently clickable. */
.ps-article__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.ps-article:hover .ps-article__title { color: var(--ps-burnt-orange); }
.ps-article__excerpt { font-size: .9375rem; color: rgba(0,0,0,.7); line-height: 1.55; }
.ps-article__more {
	margin-top: .25rem;
	font-weight: 700;
	font-size: .875rem;
	color: var(--ps-burnt-orange);
}
.ps-article__more::after { content: " →"; }

/* ----- Footer ----- */
.ps-footer { background: var(--ps-forest); color: var(--ps-white); padding-top: 4rem; padding-bottom: 1.5rem; }
.ps-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.ps-footer a:hover { color: var(--ps-orange); }
.ps-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 900px) { .ps-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .ps-footer__grid { grid-template-columns: 1fr; } }
.ps-footer__logo { display: inline-block; transform: translateX(-31%); }
.ps-footer__logo img { height: 48px; width: auto; }
.ps-footer__tagline { margin-top: 1.25rem; color: rgba(255,255,255,.65); max-width: 32ch; font-size: .9375rem; }

/* Australian Made certified logo — preserve official green/gold, never recolour.
   Transparent background (no chip); the SVG's intrinsic white triangle provides
   contrast against the Forest green footer. Default size suits the About-page
   callout; footer + product overrides scope it down for tighter contexts.
   Selectors cover both markup patterns: <img class> directly, or wrapper > img. */
img.ps-aussie-made,
.ps-aussie-made img { display: block; width: 128px; height: 128px; max-width: 100%; }
.ps-aussie-made { display: inline-block; line-height: 0; }
@media (max-width: 540px) {
	img.ps-aussie-made,
	.ps-aussie-made img { width: 96px; height: 96px; }
}

/* Footer: standalone credential above the copyright strip, left-aligned with
   container content. Sits in its own row between the grid and bottom strip. */
img.ps-footer__credential { width: 72px; height: 72px; margin: 2rem 0 0; }

/* Product page: AM credential in the Application column, left-aligned with
   the step text, spaced clearly below the last step. */
img.ps-product__app-credential { width: 100px; height: 100px; margin-top: 2.5rem; }

/* About page callout: horizontal pairing of logo + text block */
.ps-am-callout img.ps-aussie-made { width: 140px; height: 140px; flex-shrink: 0; }
@media (max-width: 540px) {
	.ps-am-callout img.ps-aussie-made { width: 104px; height: 104px; }
}
.ps-footer__title { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ps-orange); margin-bottom: 1rem; }
.ps-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .9375rem; }
.ps-footer__bottom {
	display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	padding-top: 1.5rem;
	font-size: .8125rem;
	color: rgba(255,255,255,.5);
}
.ps-footer__sep { color: rgba(255,255,255,.3); margin: 0 .35rem; }
.ps-footer__socials { display: flex; gap: .75rem; }
.ps-footer__socials a {
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 50%;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ps-footer__socials a:hover { background: var(--ps-orange); border-color: var(--ps-orange); color: var(--ps-black); }
.ps-footer__socials svg { width: 16px; height: 16px; }

/* ----- Generic section heads ----- */
.ps-sectionhead { margin-bottom: 2rem; max-width: 720px; }

/* Narrow prose column for body sections. Left-aligned within .ps-container,
   so the eyebrow + heading + paragraphs share the same left edge — same
   convention as .ps-sectionhead. Used as a wrapper inside default-layout
   .ps-container groups; do NOT use inside .is-layout-constrained, since
   that re-applies max-width and margin:auto to direct children. */
.ps-prose { max-width: 760px; }
.ps-sectionhead .ps-eyebrow { color: var(--ps-burnt-orange); margin-bottom: .75rem; }
.ps-section--forest .ps-sectionhead .ps-eyebrow,
.ps-section--deep .ps-sectionhead .ps-eyebrow { color: var(--ps-orange); }

/* ----- Product page ----- */
.ps-product { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
/* minmax(0, …) NOT bare fr — a bare `1fr` is `minmax(auto, 1fr)`, whose auto
   minimum is the column's min-content. At hero type sizes the longest
   unbreakable word in the H1 sets that, so the product shot panel was a
   different width on every product: "PRESERVATIVE" forced the text column wide
   and squeezed the panel to 331px, while the hyphen in "IN-GROUND" let it break
   and gave that panel 586px. Same defect as .ps-twocol had. */
.ps-product__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
	min-width: 0;
}
.ps-product__grid > * { min-width: 0; }
@media (max-width: 860px) { .ps-product__grid { grid-template-columns: 1fr; } }
.ps-product__media {
	background: var(--ps-cream);
	border-radius: var(--ps-radius-lg);
	aspect-ratio: 1/1;
	display: flex; align-items: center; justify-content: center;
	position: relative;
	overflow: hidden;
}
.ps-product__media::after {
	content: "";
	position: absolute; inset: -20% -10% auto auto; width: 70%; height: 70%;
	background: var(--ps-orange);
	opacity: .12;
	border-radius: 50%;
	filter: blur(40px);
}
/* Product H1s cap below the global hero size. At 110px the longest single word
   in the range — "PRESERVATIVE" — measures 787px, but the text column is 533px
   once the grid columns are equalised, so it overflowed the page. 4.5rem (72px)
   is the largest size at which that word fits; break-word is a safety net for
   any future name longer still. */
.ps-product h1 {
	letter-spacing: -.02em;
	font-size: clamp(2.25rem, 4.6vw, 4.5rem);
	overflow-wrap: break-word;
}
.ps-product__lede { font-size: 1.125rem; color: rgba(0,0,0,.7); margin-bottom: 1.5rem; max-width: 50ch; }
.ps-product__ctas { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.5rem 0 2.5rem; }

.ps-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
	margin-top: 2.5rem;
}
.ps-benefit {
	background: var(--ps-white);
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius-lg);
	padding: 1.25rem;
}
.ps-benefit__icon { width: 32px; height: 32px; color: var(--ps-orange); margin-bottom: .75rem; }
.ps-benefit__title { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.ps-benefit__text { font-size: .875rem; color: rgba(0,0,0,.7); line-height: 1.5; }

/* Accordion */
.ps-accordion { border-top: 1px solid var(--ps-line); }
.ps-accordion details {
	border-bottom: 1px solid var(--ps-line);
	padding: 1.25rem 0;
}
.ps-accordion summary {
	font-weight: 700;
	font-size: 1.0625rem;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.ps-accordion summary::-webkit-details-marker { display: none; }
.ps-accordion summary::after {
	content: "+";
	font-weight: 400;
	color: var(--ps-orange);
	font-size: 1.5rem;
	line-height: 1;
}
.ps-accordion details[open] summary::after { content: "−"; }
.ps-accordion__body { padding-top: 1rem; color: rgba(0,0,0,.75); }
/* core/details output: body paragraphs sit directly inside <details> rather
   than wrapped in .ps-accordion__body. Apply the same body styling here. */
.ps-accordion details > :not(summary) {
	padding-top: 1rem;
	color: rgba(0,0,0,.75);
	margin-block: 0;
}

/* ----- Learn archive ----- */
.ps-learn-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
	margin-top: 2.5rem;
}
/* Filtered-out cards collapse from the grid so remaining cards reflow. */
.ps-article.is-hidden { display: none; }

/* Category filter tabs (Learn hub). Outline base + dark active state — same
   visual as the previous PHP-driven version, just driven by JS via .is-active. */
.ps-learn-filter {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 2rem;
}
.ps-learn-filter__tab {
	background: transparent;
	color: var(--ps-black);
	border-color: var(--ps-line);
}
.ps-learn-filter__tab:hover {
	border-color: var(--ps-forest);
	color: var(--ps-black);
}
.ps-learn-filter__tab.is-active {
	background: var(--ps-black);
	color: var(--ps-white);
	border-color: var(--ps-black);
}
.ps-learn-filter__tab.is-active:hover {
	background: var(--ps-forest);
	border-color: var(--ps-forest);
	color: var(--ps-white);
}

/* ============================================================
   Kadence Posts Block — Learn Hub Cards
   ------------------------------------------------------------
   Restyles the kadence/posts block (used on the homepage Learn
   teasers) so its cards match the .ps-article visual design
   used elsewhere.

   Kadence DOM:
     ul.wp-block-kadence-posts
       li.kb-post-list-item
         article.loop-entry[.kb-post-no-image].learn_cat-<slug>
           .entry-content-wrap
             header.entry-header
               .entry-taxonomies > .category-links > a.category-link-<slug>
               h2.entry-title > a
             .entry-summary > p
             footer.entry-footer .entry-actions .more-link-wrap
               a.post-more-link (with kadence-svg-icon)
   ============================================================ */

/* Container: 2-column gap & top spacing */
.ps-learn .wp-block-kadence-posts.kb-posts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
}
@media (max-width: 760px) {
	.ps-learn .wp-block-kadence-posts.kb-posts { grid-template-columns: 1fr; }
}
.ps-learn .kb-post-list-item { list-style: none; margin: 0; padding: 0; }

/* Card */
.ps-learn .loop-entry {
	display: flex;
	flex-direction: column;
	background: var(--ps-white);
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius-lg);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
	height: 100%;
}
.ps-learn .loop-entry:hover {
	transform: translateY(-3px);
	box-shadow: var(--ps-shadow-card);
}

/* Featured image slot — when no thumbnail, draw the gradient placeholder
   that .ps-article__media used. (kb-post-no-image is set automatically.)  */
.ps-learn .loop-entry.kb-post-no-image::before {
	content: "";
	display: block;
	aspect-ratio: 16/9;
	background:
		radial-gradient(circle at 70% 30%, rgba(255,118,26,.25), transparent 55%),
		linear-gradient(135deg, var(--ps-forest), var(--ps-forest-deep));
}

/* Content wrap = card body */
.ps-learn .loop-entry .entry-content-wrap {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	flex: 1;
}

/* Header (taxonomies + title) — stack with the same .75rem gap that
   .ps-article__body uses on the Learn page, so badge and title aren't
   visually glued together. */
.ps-learn .loop-entry .entry-header {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

/* Category badge — Forest green for every category, matching .ps-badge
   used on the Learn page. No per-category colour variation. */
.ps-learn .loop-entry .entry-taxonomies { margin: 0; }
.ps-learn .loop-entry .category-links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .35rem;
}
.ps-learn .loop-entry .category-links a {
	display: inline-block;
	background: var(--ps-forest);
	color: var(--ps-white);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .3rem .55rem;
	border-radius: 3px;
	text-decoration: none;
	line-height: 1.2;
	transition: background .15s ease;
}
.ps-learn .loop-entry .category-links a:hover {
	background: var(--ps-burnt-orange);
	color: var(--ps-white);
}

/* Title */
.ps-learn .loop-entry .entry-title {
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.15;
	margin: 0;
}
.ps-learn .loop-entry .entry-title a {
	color: var(--ps-black);
	text-decoration: none;
}
.ps-learn .loop-entry:hover .entry-title a { color: var(--ps-burnt-orange); }

/* Excerpt */
.ps-learn .loop-entry .entry-summary p {
	font-size: .9375rem;
	color: rgba(0,0,0,.7);
	line-height: 1.55;
	margin: 0;
}

/* Read more — keep on its own row, no box, no border */
.ps-learn .loop-entry .entry-footer {
	margin-top: auto;
	padding: 0;
	background: transparent;
	border: 0;
}
.ps-learn .loop-entry .entry-actions { margin: 0; }
.ps-learn .loop-entry .more-link-wrap { margin: 0; }
.ps-learn .loop-entry .post-more-link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-weight: 700;
	font-size: .875rem;
	color: var(--ps-burnt-orange);
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
}
.ps-learn .loop-entry .post-more-link:hover { color: var(--ps-redgum); }
.ps-learn .loop-entry .post-more-link .kadence-svg-iconset,
.ps-learn .loop-entry .post-more-link .kadence-svg-icon {
	width: 14px;
	height: 14px;
	color: currentColor;
}

/* ----- Mobile menu (simple) ----- */
.ps-menu-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius);
	padding: .55rem .8rem;
	font-weight: 700;
	font-size: .875rem;
	cursor: pointer;
	color: var(--ps-forest);
}
.ps-menu-toggle__icon {
	display: inline-block;
	flex-shrink: 0;
	color: var(--ps-forest);
}
/* Default: hamburger visible, close hidden. Toggle on aria-expanded. */
.ps-menu-toggle__icon--close { display: none; }
.ps-menu-toggle[aria-expanded="true"] .ps-menu-toggle__icon--open { display: none; }
.ps-menu-toggle[aria-expanded="true"] .ps-menu-toggle__icon--close { display: inline-block; }
.ps-menu-toggle:hover,
.ps-menu-toggle:focus-visible {
	border-color: var(--ps-forest);
	color: var(--ps-forest);
	background: transparent;
}
.ps-menu-toggle:focus-visible {
	outline: 2px solid var(--ps-forest);
	outline-offset: 2px;
}
@media (max-width: 820px) {
	.ps-menu-toggle { display: inline-flex; align-items: center; gap: .4rem; }
	.ps-nav__links--open {
		display: flex !important;
		position: absolute;
		left: 0; right: 0; top: 100%;
		background: var(--ps-white);
		border-top: 1px solid var(--ps-line);
		border-bottom: 1px solid var(--ps-line);
		flex-direction: column;
		padding: 1rem var(--ps-gutter);
		gap: 1rem;
		z-index: 50;
	}
	.ps-header { position: relative; }
}

/* ----- Nav dropdown (Products → categories) ----- */
.ps-nav__item--has-dropdown {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
}
.ps-nav__label {
	font-weight: 600;
	font-size: .9375rem;
	letter-spacing: .01em;
	color: var(--ps-black);
	cursor: default;
}
.ps-nav__dropdown-toggle {
	background: transparent;
	border: 0;
	padding: 2px 4px;
	cursor: pointer;
	color: var(--ps-black);
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.ps-nav__dropdown-toggle svg { width: 12px; height: 12px; transition: transform .2s ease; }
.ps-nav__item--has-dropdown.is-open .ps-nav__dropdown-toggle svg,
.ps-nav__item--has-dropdown:hover .ps-nav__dropdown-toggle svg { transform: rotate(180deg); }

.ps-nav__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--ps-white);
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius);
	padding: .5rem;
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
	display: none;
	z-index: 100;
}
.ps-nav__dropdown a {
	display: block;
	padding: .5rem .75rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: .9375rem;
	color: var(--ps-black);
	transition: background-color .15s ease, color .15s ease;
}
.ps-nav__dropdown a:hover {
	background: var(--ps-cream);
	color: var(--ps-burnt-orange);
}
@media (hover: hover) {
	.ps-nav__item--has-dropdown:hover .ps-nav__dropdown,
	.ps-nav__item--has-dropdown:focus-within .ps-nav__dropdown { display: block; }
}
/* Mobile: dropdown lives inside the hamburger sheet, toggled by the chevron */
@media (max-width: 820px) {
	.ps-nav__links--open .ps-nav__item--has-dropdown {
		width: 100%;
		justify-content: space-between;
	}
	.ps-nav__links--open .ps-nav__dropdown {
		position: static;
		display: none;
		box-shadow: none;
		border: 0;
		padding: .5rem 0 .25rem 1rem;
		min-width: 0;
		width: 100%;
		order: 3;
	}
	.ps-nav__links--open .ps-nav__item--has-dropdown.is-open .ps-nav__dropdown { display: block; }
	.ps-nav__links--open .ps-nav__item--has-dropdown { flex-wrap: wrap; }
}

/* ----- Product category landing: product cards ----- */
.ps-product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem;
}
/* Breakpoints match the merged-triage mockup: 3-up / 2-up / 1-up. */
@media (max-width: 900px) { .ps-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ps-product-grid { grid-template-columns: 1fr; } }
.ps-product-card {
	display: flex;
	flex-direction: column;
	background: var(--ps-white);
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius-lg);
	text-decoration: none;
	color: var(--ps-black);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.ps-product-card__media {
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}
/* Product shot ~25% larger (was 70%). Unlike the hero panel there was headroom
   inside the existing padding, so only the cap moved. max-height guards
   non-square shots in the 1/1 media box. Applies to the category archive, the
   Products landing and the --sm related strip alike. */
.ps-product-card__media img { max-width: 87.5%; max-height: 100%; height: auto; object-fit: contain; }
.ps-product-card__placeholder {
	color: var(--ps-white);
	font-weight: 800;
	font-size: 1.125rem;
	letter-spacing: -.01em;
	text-align: center;
	line-height: 1.2;
}
.ps-product-card__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; flex: 1; }
.ps-product-card__eyebrow {
	display: block;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ps-burnt-orange);
	line-height: 1.3;
	margin-bottom: .1rem;
}
.ps-product-card__title { font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; margin: 0; }
/* flex:1 makes the description absorb the spare height, which pins the CTA
   to the bottom and keeps cards in a row visually equal. */
.ps-product-card__lede { font-size: .875rem; color: rgba(0,0,0,.65); line-height: 1.55; margin: 0; flex: 1 1 auto; }
.ps-product-card__lede strong { color: var(--ps-forest); }
.ps-product-card__cta {
	margin-top: auto;
	padding-top: .5rem;
	font-weight: 700;
	font-size: .875rem;
	letter-spacing: .02em;
	color: var(--ps-black);
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	transition: color .25s ease;
}
.ps-product-card__cta::after { content: "→"; transition: transform .25s ease; }
@media (hover: hover) {
	.ps-product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
	.ps-product-card:hover .ps-product-card__cta { color: var(--ps-orange); }
	.ps-product-card:hover .ps-product-card__cta::after { transform: translateX(4px); }
}
/* Smaller variant (~75–80%) for the single-product "You might also need"
   related strip — supporting, not competing with the main product on the page.
   Shorter media, tighter padding, slightly smaller title; lede/CTA unchanged. */
.ps-product-card--sm .ps-product-card__media { aspect-ratio: 4 / 3; padding: 1rem; }
.ps-product-card--sm .ps-product-card__placeholder { font-size: .95rem; }
.ps-product-card--sm .ps-product-card__body { padding: .9rem 1rem; gap: .35rem; }
.ps-product-card--sm .ps-product-card__title { font-size: 1rem; }

/* ----- Contact page: tab-selector form system ----- */
.ps-contact-tabs { display: block; }
.ps-contact-tabs__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-bottom: 2rem;
}
@media (max-width: 760px) {
	.ps-contact-tabs__list { grid-template-columns: 1fr; gap: .75rem; }
}
.ps-contact-tab {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	text-align: left;
	padding: 1.25rem 1.25rem 1.1rem;
	background: var(--ps-white);
	border: 2px solid var(--ps-line);
	border-radius: var(--ps-radius-lg);
	color: var(--ps-black);
	font-family: inherit;
	cursor: pointer;
	min-height: 44px;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.ps-contact-tab__icon { color: var(--ps-forest); line-height: 0; transition: color .25s ease; }
.ps-contact-tab__text { display: flex; flex-direction: column; gap: .25rem; }
.ps-contact-tab__label { font-weight: 800; font-size: 1.0625rem; letter-spacing: -.01em; }
.ps-contact-tab__sub { font-size: .8125rem; color: rgba(0,0,0,.65); line-height: 1.45; }
/* No :hover rule for .ps-contact-tab — hovering an inactive tab is intentionally
   inert (no colour, lift, or shadow change). Only the .is-active state has its
   own visual treatment. :focus-visible is kept for keyboard accessibility. */
.ps-contact-tab:focus-visible {
	outline: 2px solid var(--ps-orange);
	outline-offset: 2px;
}
.ps-contact-tab.is-active {
	border-color: var(--ps-orange);
	background: var(--ps-cream);
	box-shadow: 0 4px 14px rgba(255,118,26,.12);
}
.ps-contact-tab.is-active .ps-contact-tab__icon { color: var(--ps-orange); }
.ps-contact-tab.is-active .ps-contact-tab__label { color: var(--ps-black); }

/* Form panels */
.ps-contact-panel {
	background: var(--ps-white);
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius-lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	animation: psFormFade .25s ease;
}
.ps-contact-panel[hidden] { display: none; }
@keyframes psFormFade {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ----- Fluent Forms restyling — match the site (Albert Sans, brand colours) ----- */
.fluentform { font-family: var(--ps-font-sans); }
.fluentform .ff-el-input--label label,
.fluentform .ff-el-form-control label {
	font-weight: 600;
	font-size: .875rem;
	letter-spacing: .005em;
	color: var(--ps-black);
	margin-bottom: .35rem;
}
.fluentform .ff-el-form-control { margin-bottom: 1rem; }
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="url"],
.fluentform textarea,
.fluentform select,
.fluentform .ff-el-form-control input,
.fluentform .ff-el-form-control textarea,
.fluentform .ff-el-form-control select {
	width: 100%;
	padding: .85rem 1rem;
	font-family: inherit;
	/* 16px+ prevents iOS auto-zoom on focus */
	font-size: 1rem;
	line-height: 1.4;
	color: var(--ps-black);
	background: var(--ps-white);
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
	box-shadow: none;
}
.fluentform textarea,
.fluentform .ff-el-form-control textarea { min-height: 120px; resize: vertical; }
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus,
.fluentform .ff-el-form-control input:focus,
.fluentform .ff-el-form-control textarea:focus,
.fluentform .ff-el-form-control select:focus {
	outline: none;
	border-color: var(--ps-forest);
	box-shadow: 0 0 0 3px rgba(26,51,37,.12);
}
.fluentform .ff-el-input--label .ff_required { color: var(--ps-burnt-orange); margin-left: 2px; }
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea,
.fluentform .ff-el-is-error select { border-color: var(--ps-redgum); }
.fluentform .error,
.fluentform .text-danger,
.fluentform .ff-el-is-error .text-danger { color: var(--ps-redgum); font-size: .8125rem; margin-top: .25rem; }

/* Submit button — Heritage Orange, matches .ps-btn--orange / .ps-btn--lg */
.fluentform .ff-btn,
.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 48px;
	padding: 1.1rem 1.75rem;
	font-family: var(--ps-font-sans);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: .01em;
	color: var(--ps-black);
	background: var(--ps-orange);
	border: 2px solid var(--ps-orange);
	border-radius: var(--ps-radius);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
@media (hover: hover) {
	.fluentform .ff-btn:hover,
	.fluentform .ff-btn-submit:hover,
	.fluentform button[type="submit"]:hover {
		/* Background stays orange on hover — changing it to burnt-orange was
		   making the embedded send-icon lose contrast. Border + text colour
		   still shift for visible hover feedback. */
		border-color: var(--ps-burnt-orange);
		color: var(--ps-white);
	}
}
.fluentform .ff-btn:focus-visible,
.fluentform button[type="submit"]:focus-visible {
	border-color: var(--ps-burnt-orange);
	color: var(--ps-white);
	outline: none;
}

/* Checkbox / radio rows */
.fluentform .ff-el-form-check { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; font-size: .9375rem; }
.fluentform .ff-el-form-check input[type="checkbox"],
.fluentform .ff-el-form-check input[type="radio"] { width: auto; margin: 0; accent-color: var(--ps-orange); }

/* Success message */
.fluentform .ff-message-success,
.ff_msg_success {
	background: rgba(101,140,120,.12);
	border: 1px solid var(--ps-eucalypt);
	color: var(--ps-forest);
	padding: 1rem 1.25rem;
	border-radius: var(--ps-radius);
	font-size: .9375rem;
}

/* Utility */
.ps-mt-0 { margin-top: 0 !important; }
.ps-mb-0 { margin-bottom: 0 !important; }
.ps-text-center { text-align: center; }

/* ===== MapSVG store locator — brand overrides =====
   Renders inside the Where to Buy "Store locator" section (page 2254,
   anchor #search) via the [mapsvg id="..."] shortcode. MapSVG class
   names vary by version — confirm selectors against the rendered
   output at launch and adjust if needed. Keep this block intact and
   clearly commented so future regenerations don't drop it. */

.mapsvg-search-view input[type="text"],
.mapsvg-filters-container input {
	border: 1px solid #d8d8d8;
	border-radius: 6px;
	padding: 0.75rem 1rem;
	font-family: inherit;
	font-size: 1rem;
}

.mapsvg-search-button,
.mapsvg-btn-search {
	background: var(--ps-orange);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-weight: 600;
}
.mapsvg-search-button:hover,
.mapsvg-btn-search:hover { background: var(--ps-burnt-orange); }

.mapsvg-directory-item { border-bottom: 1px solid #eee; padding: 1rem; }
.mapsvg-directory-item:hover { background: #f3f6ee; }
.mapsvg-directory-item .title { font-weight: 700; color: var(--ps-forest); }
/* ===== end MapSVG overrides ===== */

/* ===== Mobile-first audit fixes (2026-05-27) =====
   All rules in this block are mobile-only and must not affect desktop.
   Each sub-block is tagged with the audit FIX number it resolves. */

/* FIX 1 — Horizontal scroll on /products/<cat>/ + /products/<slug>/.
   Templates previously hard-coded inline `grid-template-columns: repeat(3,1fr)`
   which won the cascade over .ps-finder__grid's existing 760px media query
   and caused 70–154px horizontal overflow at mobile. Templates now use the
   modifier class `.ps-finder__grid--3`; the mobile media query collapses it
   cleanly to a single column. Desktop layout (3 cards in a row) is preserved. */
.ps-finder__grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
	.ps-finder__grid--3 { grid-template-columns: 1fr; }
}

/* FIX 2 — Mobile nav touch targets.
   Top-level mobile menu links (Learn / About / Contact) were 24px tall; the
   Products dropdown chevron was 20×16. Both fail WCAG 44×44 by a wide margin.
   These rules only apply inside the open mobile sheet — desktop nav unchanged. */
@media (max-width: 820px) {
	.ps-menu-toggle { min-height: 44px; }
	/* Match the header "Where to Buy" pill to the hamburger height so both
	   sit at 44px and align cleanly. .ps-nav's existing flex align-items:center
	   handles the vertical centering once both heights match. */
	.ps-nav a.ps-btn--orange {
		min-height: 44px;
		padding-top: 0;
		padding-bottom: 0;
		display: inline-flex;
		align-items: center;
	}
	.ps-nav__links--open > li,
	.ps-nav__links--open .ps-nav__item--has-dropdown {
		width: 100%;
	}
	.ps-nav__links--open a,
	.ps-nav__links--open .ps-nav__label {
		display: flex;
		align-items: center;
		min-height: 44px;
		width: 100%;
	}
	.ps-nav__links--open .ps-nav__dropdown-toggle {
		min-width: 44px;
		min-height: 44px;
		padding: 0;
		justify-content: center;
	}
	.ps-nav__links--open .ps-nav__dropdown-toggle svg {
		width: 16px;
		height: 16px;
	}
	.ps-nav__links--open .ps-nav__dropdown a {
		min-height: 44px;
		padding-top: .5rem;
		padding-bottom: .5rem;
	}
}

/* FIX 3 — Product page hero: get H1 + Where to Buy CTA above the fold for
   the QR-scan-in-hardware-store flow. On mobile, flip grid order so the
   text/info column renders first and the media block falls below it.
   Desktop (media-left / text-right) layout unchanged above 860px. */
@media (max-width: 860px) {
	.ps-product__grid .ps-product__info { order: 1; }
	.ps-product__grid .ps-product__media { order: 2; }
}

/* FIX 4 — Raise sub-14px text to 14px floor on mobile only.
   Desktop sizes preserved — Heritage Orange eyebrows + tiny badges look
   intentional at desktop scale, but fall below readability threshold on
   small screens. */
@media (max-width: 760px) {
	.ps-eyebrow { font-size: .875rem; }
	.ps-badge { font-size: .875rem; padding: .4rem .65rem; }
	a.ps-badge { min-height: 44px; display: inline-flex; align-items: center; }
	.ps-topbar { font-size: .875rem; }
	.ps-footer__bottom { font-size: .875rem; }
	.ps-btn--sm { font-size: .875rem; }
	.ps-contact-tab__sub { font-size: .875rem; }
}

/* FIX 5 — Footer touch targets on mobile.
   Column links were 18px tall (gap-only spacing); social icons 36×36. */
@media (max-width: 760px) {
	.ps-footer__list { gap: 0; }
	.ps-footer__list a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
	.ps-footer__bottom a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	.ps-footer__socials a {
		width: 44px;
		height: 44px;
	}
}

/* FIX 6 — Accordion summaries, Learn filter tabs, in-body anchor links.
   Single-line <summary> elements were 27px tall; filter tabs 34px;
   back-links 15–18px. All bumped to 44px on mobile only. */
@media (max-width: 760px) {
	.ps-accordion summary {
		min-height: 44px;
	}
	details > summary {
		min-height: 44px;
	}
	.ps-learn-filter__tab {
		min-height: 44px;
		padding-top: .65rem;
		padding-bottom: .65rem;
		font-size: .875rem;
	}
	/* Kadence-generated category badges on the homepage Learn-teaser cards.
	   Different markup from .ps-badge (which is the Learn-hub card variant);
	   same intent, so match the 14px floor and a usable touch height. */
	.ps-learn .loop-entry .category-links a {
		font-size: .8125rem;
		padding: .5rem .65rem;
	}
	/* Back-links inside .ps-section--tight wrappers ("← All products",
	   "← Home", "← Learn Hub"). Inline-styled in their templates;
	   target by structure instead of class. */
	.ps-section--tight > .ps-container > a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		font-size: .9375rem;
	}
	/* Read-more / generic loop-entry post link */
	.ps-learn .loop-entry .post-more-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}
/* ===== end mobile-first audit fixes ===== */

/* ===== Protect product page (2026-07-28) =====
   Chassis for products with an inc/product-data.php entry. Rendered by
   single-product.php. Colours come from the brand tokens in variables.css,
   NOT the raw hex in the mockups — the mockups carry the staging orange
   (#F26722) and PRESCHEM_PROJECT_CONTEXT pt3 flags that as unconfirmed
   against Heritage Orange (#FF761A), which is the locked brand accent. */

/* ----- Fail-loud: unresolved copy must never ship as a silent blank ----- */
.ps-pending {
	display: inline-block;
	background: var(--ps-redgum);
	color: var(--ps-white);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .02em;
	padding: .15rem .5rem;
	border-radius: var(--ps-radius);
	white-space: nowrap;
}
.ps-btn.is-pending {
	opacity: .75;
	cursor: not-allowed;
	pointer-events: none;
}
/* Editor-only summary of every unresolved field on the product. */
.ps-pending-audit {
	border: 2px solid var(--ps-redgum);
	border-radius: var(--ps-radius-lg);
	background: #FFF6F3;
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0 0;
	font-size: .9375rem;
}
.ps-pending-audit strong { color: var(--ps-redgum); display: block; margin-bottom: .35rem; }
.ps-pending-audit p { margin: 0 0 .6rem; color: rgba(0,0,0,.7); }
.ps-pending-audit ul { margin: 0; padding-left: 1.1rem; }
.ps-pending-audit code { font-size: .875rem; }

/* ----- Hero product shot panel ----- */
.ps-product__media--shot {
	aspect-ratio: 4 / 5;
	background-image: linear-gradient(160deg, rgba(255,255,255,.08), rgba(0,0,0,.2));
	/* Reduced from clamp(1.5rem, 3vw, 2.5rem). The panel's content box was the
	   binding constraint on the product shot, so the padding had to come down
	   for the image to grow — raising the image's max-width alone would have
	   done nothing. See the img rule below. */
	padding: clamp(1rem, 2vw, 1.5rem);
}
/* The default .ps-product__media carries a blurred orange bloom for the cream
   panel. On a saturated product-colour panel it reads as a smudge. */
.ps-product__media--shot::after { content: none; }
/* Product shot ~25% larger than the original 82%-of-a-40px-padded-panel sizing.
   max-height keeps the square tin shots inside the short 3/2 panel on mobile —
   without it a width-constrained square image can overflow a wide, shallow box.
   Chassis-level: applies to every product shot as the others are imported. */
.ps-product__media--shot img {
	max-width: 91%;
	max-height: 100%;
	height: auto;
	object-fit: contain;
}
.ps-product__shot-placeholder {
	color: var(--ps-white);
	font-weight: 700;
	font-size: 1rem;
	text-align: center;
	line-height: 1.4;
}
.ps-product__shot-placeholder small {
	display: block;
	margin-top: .35rem;
	font-weight: 500;
	opacity: .75;
	font-size: .8125rem;
}

/* ----- Before you buy: the two safety Stops ----- */
.ps-triage__intro {
	max-width: 62ch;
	font-size: 1.0625rem;
	margin: 0 0 2rem;
}
.ps-gate {
	background: var(--ps-white);
	border: 2px solid var(--ps-redgum);
	border-radius: var(--ps-radius-lg);
	padding: 1.5rem 1.6rem;
	margin-bottom: .875rem;
	max-width: 880px;
}
.ps-gate__label {
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--ps-redgum);
	margin-bottom: .5rem;
}
.ps-gate__question {
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--ps-forest);
	line-height: 1.32;
	margin-bottom: .55rem;
}
.ps-gate__body { font-size: 1rem; line-height: 1.6; }
.ps-gate__body p { margin: 0 0 .625rem; }
.ps-gate__body p:last-child { margin-bottom: 0; }
.ps-gate__body strong { color: var(--ps-forest); }

/* Soft gate — a stated limitation rather than a hard stop. Used where the
   label names a pest but the chemistry doesn't support a kill-claim, so the
   box must not read with the same weight as the structural red gate. */
.ps-gate--soft { border-color: var(--ps-orange); background: #FFF9F4; }
.ps-gate--soft .ps-gate__label { color: var(--ps-burnt-orange); }

.ps-triage__compare { max-width: 880px; margin: 1rem 0 0; }
.ps-triage__compare a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ps-burnt-orange);
	text-decoration: none;
	border: 2px solid var(--ps-orange);
	border-radius: var(--ps-radius);
	padding: .75rem 1.5rem;
}
.ps-triage__compare a:hover { background: var(--ps-orange); color: var(--ps-white); }

/* ----- Triage advice line (kept; the card component it sat under was
   retired when the triage merged into the product grid) ----- */
.ps-triage__advice {
	max-width: 880px;
	margin: 1.5rem 0 0;
	font-size: 1rem;
	color: rgba(0,0,0,.7);
}
.ps-triage__advice a {
	font-weight: 700;
	color: var(--ps-burnt-orange);
	white-space: nowrap;
}

@media (max-width: 760px) {
	.ps-triage__advice a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ----- Tone selector (Finishes) -----
   The Finishes counterpart to the Protect Stops: routes by timber tone rather
   than by problem. Reusable — Aussie Clear Light, Walnut Timber Finish,
   Charcoal Black Stain and Rustic Grey Stain all need it.

   Swatch colours are TIMBER SAMPLES supplied per-product as content and set
   inline. They are deliberately NOT tokens in variables.css — that layer is
   the brand palette, and a merbau sample is not a brand colour. */
.ps-tone {
	max-width: 880px;
	margin-top: 1.5rem;
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius-lg);
	overflow: hidden;
	background: var(--ps-white);
}
.ps-tone__row {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 0.9fr) minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--ps-line);
	text-decoration: none;
	color: inherit;
}
.ps-tone__row:last-child { border-bottom: 0; }
a.ps-tone__row:hover { background: #FAF9F6; }
a.ps-tone__row:focus-visible { outline: 2px solid var(--ps-forest); outline-offset: -2px; }
.ps-tone__row.is-current { background: #FFF9F4; }
.ps-tone__swatch {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.12);
}
.ps-tone__tone { font-weight: 800; color: var(--ps-forest); font-size: 1rem; }
.ps-tone__species { font-size: .875rem; line-height: 1.45; color: rgba(0,0,0,.7); }
.ps-tone__product { font-weight: 700; font-size: .9375rem; color: var(--ps-burnt-orange); }
.ps-tone__row.is-current .ps-tone__product { color: var(--ps-forest); }
.ps-tone__here { font-weight: 500; color: rgba(0,0,0,.5); }

@media (max-width: 760px) {
	.ps-tone__row {
		grid-template-columns: 2rem minmax(0, 1fr);
		gap: .5rem .875rem;
		padding: 1rem 1.1rem;
		min-height: 44px;
	}
	.ps-tone__species,
	.ps-tone__product { grid-column: 2 / -1; }
}

/* ----- Spec list (Finishes) -----
   Plain label/value pairs. The Finishes analogue of the Protect technical-data
   accordion — no poison schedule, no APVMA row, nothing to collapse. */
.ps-spec { margin: 0; border-top: 1px solid var(--ps-line); }
.ps-spec__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 1rem;
	padding: .75rem 0;
	border-bottom: 1px solid var(--ps-line);
}
.ps-spec__label { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(0,0,0,.55); margin: 0; }
.ps-spec__value { margin: 0; min-width: 0; font-size: .9375rem; color: var(--ps-forest); font-weight: 600; }

/* Two columns don't fit a phone once a value is a nowrap .ps-pending badge —
   the badge is wider than the value column and pushes the page sideways. */
@media (max-width: 760px) {
	.ps-spec__row { grid-template-columns: 1fr; gap: .2rem; }
}

/* ----- "Before you start" Learn links ----- */
.ps-learnlink {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	background: var(--ps-white);
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius-lg);
	padding: 1.25rem 1.35rem;
	text-decoration: none;
	color: inherit;
	transition: transform .15s ease, box-shadow .15s ease;
}
.ps-learnlink:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,27,20,.10); }
.ps-learnlink__kind {
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ps-burnt-orange);
}
.ps-learnlink__title { font-weight: 800; font-size: 1.0625rem; line-height: 1.25; color: var(--ps-forest); }
.ps-learnlink__cta { margin-top: auto; padding-top: .5rem; font-weight: 700; font-size: .875rem; color: var(--ps-forest); }
.ps-learnlink:hover .ps-learnlink__cta { color: var(--ps-burnt-orange); }

/* ----- Why it works: feature cards. No icons by design. ----- */
.ps-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
.ps-feature-card {
	background: var(--ps-white);
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius-lg);
	padding: 1.6rem 1.5rem;
	box-shadow: 0 1px 3px rgba(20,27,20,.03);
}
.ps-feature-card__title {
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 .45rem;
}
.ps-feature-card__text { font-size: .9375rem; line-height: 1.55; margin: 0; color: rgba(0,0,0,.75); }

/* ----- Where it goes: situation grid ----- */
.ps-spot__lead { max-width: 62ch; font-size: 1.1875rem; margin: 0 0 1.5rem; }
.ps-spot-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .875rem;
}
.ps-spot {
	background: var(--ps-white);
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius);
	padding: 1rem 1.125rem;
}
.ps-spot__title {
	display: block;
	font-weight: 700;
	font-size: .975rem;
	color: var(--ps-forest);
	margin-bottom: .15rem;
}
.ps-spot__text { display: block; font-size: .9rem; line-height: 1.5; color: rgba(0,0,0,.72); }

/* ----- Two-column band: preparing ‖ directions, maker ‖ technical data ----- */
/* minmax(0, 1fr), NOT 1fr. A bare `1fr` track is `minmax(auto, 1fr)`, and that
   `auto` minimum refuses to shrink below the track's min-content — so a wide
   table inside one column inflates both tracks and drags the whole grid outside
   .ps-container, breaking the shared page gutter. minmax(0, …) removes the
   automatic minimum so the tracks always honour the container width and
   overflow is handed to .ps-table-scroll instead. */
.ps-twocol {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: start;
	min-width: 0;
	max-width: 100%;
}
/* Grid items default to min-width:auto and refuse to shrink below their
   content. The application table sets white-space:nowrap on its cells, so
   without this the column blows past the viewport and reintroduces the
   horizontal scroll the mobile audit fixed. min-width:0 lets the column
   shrink and hands overflow to .ps-table-scroll, where it belongs. */
.ps-twocol__col { min-width: 0; }
.ps-twocol__heading { margin: .5rem 0 1.5rem; }
.ps-twocol__intro { margin: 0 0 1.4rem; }

/* ----- Numbered steps. Icons/chips earn their place here and nowhere else. --- */
.ps-steps { list-style: none; margin: 0; padding: 0; }
.ps-steps__item {
	position: relative;
	padding: 0 0 1.25rem 3.5rem;
	min-height: 2.625rem;
}
.ps-steps__chip {
	position: absolute;
	left: 0;
	top: 0;
	width: 2.625rem;
	height: 2.625rem;
	border-radius: var(--ps-radius);
	background: var(--ps-white);
	border: 2px solid var(--ps-orange);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .5rem;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--ps-burnt-orange);
	text-align: center;
	line-height: 1.05;
}
.ps-steps__title {
	display: block;
	font-weight: 800;
	font-size: 1rem;
	color: var(--ps-forest);
	margin-bottom: .15rem;
}
.ps-steps__text { display: block; font-size: .975rem; line-height: 1.55; color: rgba(0,0,0,.75); }

/* ----- Callout / restraints ----- */
.ps-warn {
	background: #FFF7F0;
	border-left: 4px solid var(--ps-orange);
	border-radius: 0 var(--ps-radius) var(--ps-radius) 0;
	padding: 1rem 1.25rem;
	margin: 1.4rem 0;
	font-size: 1rem;
	line-height: 1.55;
}
.ps-warn--stop,
.ps-warn--hard { background: #FFF6F3; border-left-color: var(--ps-redgum); }
.ps-warn__label {
	display: block;
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ps-burnt-orange);
	margin-bottom: .35rem;
}
.ps-warn--stop .ps-warn__label,
.ps-warn--hard .ps-warn__label { color: var(--ps-redgum); }
.ps-warn__list { margin: 0; padding-left: 1.1rem; }
.ps-warn__list li { margin-bottom: .25rem; }
.ps-warn__list li:last-child { margin-bottom: 0; }

/* ----- Collapsible warnings -----
   Native <details>. The label and the summary line are inside <summary>, so
   they are ALWAYS visible — the compliance contract is that every hazard and
   restriction is readable without tapping (see
   preschem_render_product_warning()). Only elaboration sits in .ps-warn__body.
   Default state is collapsed; no `open` attribute is written. */
details.ps-warn { display: block; }
details.ps-warn > summary {
	display: block;
	cursor: pointer;
	list-style: none;
	min-height: 44px;          /* tap target */
	padding-right: 1.75rem;    /* room for the chevron */
	position: relative;
}
details.ps-warn > summary::-webkit-details-marker { display: none; }
details.ps-warn > summary::after {
	content: "›";
	position: absolute;
	top: 0;
	right: 0;
	font-size: 1.375rem;
	line-height: 1;
	color: var(--ps-burnt-orange);
	transform: rotate(90deg);
	transform-origin: center;
	transition: transform .15s ease;
}
details.ps-warn--hard > summary::after,
details.ps-warn--stop > summary::after { color: var(--ps-redgum); }
details.ps-warn[open] > summary::after { transform: rotate(270deg); }
details.ps-warn > summary:focus-visible {
	outline: 2px solid var(--ps-forest);
	outline-offset: 3px;
}
.ps-warn__summary { display: block; }
.ps-warn__summary strong { color: var(--ps-forest); }
.ps-warn__more {
	display: inline-block;
	margin-top: .4rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--ps-burnt-orange);
}
details.ps-warn--hard .ps-warn__more,
details.ps-warn--stop .ps-warn__more { color: var(--ps-redgum); }
details.ps-warn[open] .ps-warn__more { display: none; }
.ps-warn__body {
	margin-top: .625rem;
	padding-top: .625rem;
	border-top: 1px solid rgba(0,0,0,.1);
}
@media (prefers-reduced-motion: reduce) {
	details.ps-warn > summary::after { transition: none; }
}

/* ----- Label attribution. The visible regulated/advisory boundary. ----- */
.ps-label-note { font-size: .875rem; color: rgba(0,0,0,.55); margin: -1rem 0 1.25rem; }
.ps-label-source {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(0,0,0,.55);
	margin: 1.25rem 0 0;
	padding-top: .875rem;
	border-top: 1px solid var(--ps-line);
}

/* ----- Application table ----- */
.ps-subh { font-size: 1.1875rem; font-weight: 800; margin: 1.9rem 0 .25rem; }
.ps-table-caption { font-size: .9375rem; color: rgba(0,0,0,.55); margin: 0 0 .4rem; }
.ps-table-scroll { overflow-x: auto; }
.ps-dtable { border-collapse: collapse; width: 100%; margin: .875rem 0; font-size: 1rem; }
.ps-dtable th[scope="col"] {
	text-align: left;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(0,0,0,.55);
	padding: .55rem .875rem;
	border-bottom: 2px solid var(--ps-line);
	white-space: nowrap;
}
.ps-dtable th[scope="row"] {
	text-align: left;
	font-weight: 600;
	color: var(--ps-forest);
	padding: .75rem .875rem;
	border-bottom: 1px solid var(--ps-line);
}
/* Body cells wrap. Only the column headings stay on one line — keeping nowrap
   here is what inflated the grid track and pushed the section past the gutter. */
.ps-dtable td {
	padding: .75rem .875rem;
	border-bottom: 1px solid var(--ps-line);
	font-weight: 700;
	color: var(--ps-forest);
	text-align: right;
}
.ps-table-note { font-size: .875rem; color: rgba(0,0,0,.55); margin: 0; }

/* ----- .ps-dtable mobile reflow -----
   Below 600px a 3–4 column data table cannot fit the page gutter without
   either shrinking text or scrolling sideways. Instead each row becomes a
   stacked block: the row header is the bold label, and every remaining cell
   becomes a "column heading → value" line with the value as a small chip.
   The heading comes from data-label (written in single-product.php from the
   table's own `columns` array), so this is generic — the Gel application
   table and any future rate table inherit it with no extra CSS. */
@media (max-width: 600px) {
	.ps-table-scroll { overflow-x: visible; }
	.ps-dtable { display: block; margin: .875rem 0 1rem; }
	.ps-dtable thead { display: none; }
	.ps-dtable tbody { display: block; }
	.ps-dtable tr {
		display: block;
		background: var(--ps-white);
		border: 1px solid var(--ps-line);
		border-radius: var(--ps-radius);
		padding: .875rem 1rem;
		margin-bottom: .625rem;
	}
	.ps-dtable tr:last-child { margin-bottom: 0; }
	.ps-dtable th[scope="row"] {
		display: block;
		padding: 0 0 .5rem;
		border-bottom: 1px solid var(--ps-line);
		margin-bottom: .5rem;
		font-weight: 700;
		font-size: 1rem;
		color: var(--ps-forest);
	}
	/* Default: long values (prose) stack under their column heading and wrap. */
	.ps-dtable td {
		display: block;
		padding: .35rem 0;
		border-bottom: 0;
		text-align: left;
		font-weight: 400;
	}
	.ps-dtable td::before {
		content: attr(data-label);
		display: block;
		font-size: .8125rem;
		font-weight: 600;
		color: rgba(0,0,0,.55);
		margin-bottom: .1rem;
	}
	/* A column with no heading — drop the empty label line. */
	.ps-dtable td[data-label=""]::before { display: none; }
	.ps-dtable__v {
		display: block;
		min-width: 0;
		overflow-wrap: anywhere;
		font-size: .9375rem;
		color: var(--ps-forest);
	}
	/* Short values sit beside their label as a chip. */
	.ps-dtable td.is-short {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: .75rem;
	}
	.ps-dtable td.is-short::before { display: inline; margin-bottom: 0; }
	.ps-dtable td.is-short .ps-dtable__v {
		flex: 0 0 auto;
		background: var(--ps-cream);
		border-radius: var(--ps-radius);
		padding: .15rem .5rem;
		font-weight: 700;
		text-align: right;
	}
}

/* ----- Independent study panel (No-Rot Rods) -----
   Forest panel with the 17.6° brand bevel worked into the corner highlight,
   using the same --ps-bevel-tan token as paint-stripe.css. */
.ps-study {
	background: var(--ps-forest);
	color: var(--ps-white);
	border-radius: var(--ps-radius-lg);
	padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.75rem);
	max-width: 920px;
	position: relative;
	overflow: hidden;
}
.ps-study::before {
	content: "";
	position: absolute;
	top: 0; right: 0;
	width: 180px; height: 100%;
	background: linear-gradient(120deg, transparent, rgba(101,140,120,.28));
	clip-path: polygon(calc(var(--ps-bevel-tan) * 100%) 0, 100% 0, 100% 100%, 0 100%);
}
.ps-study > * { position: relative; }
.ps-study__label {
	display: block;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ps-orange);
	margin-bottom: .875rem;
}
.ps-study__finding {
	font-size: clamp(1.375rem, 3.4vw, 2rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--ps-white);
	margin: 0 0 1rem;
}
.ps-study__text {
	font-size: 1rem;
	line-height: 1.6;
	color: #D8DDD4;
	margin: 0 0 .75rem;
	max-width: 60ch;
}
.ps-study__cite { font-size: .85rem; color: #9FB0A2; margin: 0; }
.ps-study__cite a { color: var(--ps-orange); text-decoration: underline; }
/* The report link is the only interactive element in the panel. Inline in a
   citation it renders ~16px tall, so on mobile it breaks onto its own line
   and takes a 44px target rather than staying inline at half that. */
@media (max-width: 760px) {
	.ps-study__cite a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin-top: .25rem;
	}
}

/* ----- Maker ----- */
.ps-maker__text { margin: 0 0 .875rem; }
.ps-maker__text a { color: var(--ps-burnt-orange); }

/* ----- Safety directions & first aid (label-verbatim accordion row) ----- */
.ps-label-note--inline { margin: 0 0 .75rem; }
.ps-sfa__heading {
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ps-burnt-orange);
	margin: 0 0 .2rem;
}
.ps-accordion__body .ps-sfa__heading + p { margin: 0 0 .875rem; }

/* Handling guidance now lives in its OWN accordion row (canonical row 9), so
   the in-row separator that used to divide it from the label-verbatim block is
   gone — the row boundary does that job. Only the attribution line remains. */
.ps-sfa__attrib {
	font-size: .8125rem;
	color: rgba(0,0,0,.55);
	margin: 0 0 .875rem;
	font-style: italic;
}
/* Guidance sub-headings use the same burnt orange as the label-verbatim ones
   (.ps-sfa__heading covers both). An earlier version set these forest green to
   de-emphasise them, but the regulated/advisory boundary is already carried by
   the separate accordion row and its own attribution line — a third, colour-
   based signal wasn't needed and made the accordion look inconsistent. */
.ps-sfa__note {
	font-size: .875rem;
	color: rgba(0,0,0,.55);
	margin: 0;
	padding-top: .625rem;
	border-top: 1px solid var(--ps-line);
}

/* ----- Downloads row inside the technical-data accordion ----- */
.ps-docrow { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ----- Buy ----- */
.ps-buy {
	border: 2px solid var(--ps-forest);
	border-radius: var(--ps-radius-lg);
	padding: 2.25rem;
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}
.ps-buy__title { font-size: 1.5rem; margin: 0 0 .35rem; }
.ps-buy__text { font-size: .9375rem; color: rgba(0,0,0,.55); margin: 0 0 1.25rem; }

/* ----- FAQ accordion ----- */
.ps-faq { max-width: 880px; }

/* ----- Mobile ----- */
@media (max-width: 900px) {
	.ps-twocol { grid-template-columns: 1fr; gap: 2.75rem; }
	.ps-feature-grid { grid-template-columns: 1fr; }
	.ps-spot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
	/* Keep the hero shot short so H1 + Where to Buy stay above the 844px
	   fold for the QR-scan-in-store flow (mobile audit FIX 3 flips the grid
	   order; this stops the panel pushing the CTA down on the way back up). */
	.ps-product__media--shot { aspect-ratio: 3 / 2; }
}
@media (max-width: 760px) {
	.ps-triage__intro,
	.ps-spot__lead { font-size: 1rem; }
	.ps-gate { padding: 1.25rem 1.15rem; }
	.ps-gate__question { font-size: 1.0625rem; }
	.ps-buy { padding: 1.5rem 1.25rem; }
	.ps-label-note { font-size: .875rem; }
	/* Download buttons are .ps-btn--sm, which renders ~35px — under the 44px
	   floor. This only became visible once a product had a real SDS URL (the
	   others render a non-interactive pending span), so it would have shipped
	   unnoticed as each SDS is added. */
	.ps-docrow .ps-btn {
		width: 100%;
		justify-content: center;
		min-height: 44px;
	}
}
/* ===== end Protect product page ===== */

/* =====================================================================
   Product page — restructured chassis (v1.4.0)
   Hero action box + at-a-glance badges, six collapsible sections with
   heavy headings, credential strip. Source: _mockups/product-no-rot-gel-
   restructured.html. Everything below is presentation; the regulated
   components (.ps-warn, .ps-steps, .ps-dtable, .ps-label-*) are reused.
   ===================================================================== */

/* ----- Hero grid: shot left, text + action box right -----
   Explicit areas so the mobile order is declared here, not inferred from
   `order` — placed items ignore `order`, so the older .ps-product__info /
   __media order rules for the legacy layout don't bite.
   MOBILE ORDER IS text → box → shot, not the mockup's shot-first: with the
   shot first, "Find a stockist" lands at ~1010px, below the 844px fold the
   QR-scan-in-store flow depends on. Text-first puts H1 and the CTA inside
   the first screen; the shot follows the box. */
.ps-product__grid--action {
	grid-template-areas:
		"media info"
		"media action";
}
.ps-product__grid--action .ps-product__media  { grid-area: media; }
.ps-product__grid--action .ps-product__info   { grid-area: info; }
.ps-product__grid--action .ps-product__action { grid-area: action; min-width: 0; }
.ps-product__grid--action .ps-product__lede   { margin-bottom: 1rem; }
/* Desktop: the shot panel matches the right column (text + action box)
   instead of its own 4/5 aspect, so the two bottoms align. The image
   inside is max-height:100%, so a taller panel never overflows. Mobile
   keeps the short 3/2 panel from the fold rule below. */
@media (min-width: 861px) {
	/* row-gap 0: the column gap is clamp(2rem, 4vw, 4rem) and was opening a
	   ~50px hole between the badges and the box; the badges' own bottom
	   margin is the intended spacing. */
	.ps-product__grid--action { grid-template-rows: auto auto; align-items: stretch; row-gap: 0; }
	.ps-product__grid--action .ps-product__media { aspect-ratio: auto; min-height: 0; }
	.ps-product__grid--action .ps-product__info,
	.ps-product__grid--action .ps-product__action { align-self: start; }
}
@media (max-width: 860px) {
	.ps-product__grid--action {
		grid-template-areas:
			"info"
			"action"
			"media";
		grid-template-rows: auto;
		/* No row gap between the badges and the box (the badges' margin is the
		   spacing); the 32px gap put No-Rot Rods' CTA at 847px, past the fold. */
		row-gap: 0;
	}
	.ps-product__grid--action .ps-product__action { margin-bottom: 1.5rem; }
	/* The shot sits BELOW the action box on mobile, so the 3/2 fold rule
	   (written for a shot-first hero) no longer applies here. Square gives a
	   portrait pack shot — the Inject cartridge especially — room to read. */
	.ps-product__grid--action .ps-product__media--shot { aspect-ratio: 1 / 1; }
}

/* ----- At-a-glance badges -----
   Not .ps-badge — that is the Learn-hub card badge. Teal is the product
   colour family for a "use"; the muted red variant states a restraint. */
.ps-glance {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: 0 0 1.25rem;
	padding: 0;
}
.ps-glance__item {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.2;
	padding: .4rem .75rem;
	border-radius: 100px;
	background: #EAF3F2;
	color: #1F5B58;
	border: 1px solid #CFE4E2;
}
.ps-glance__item--no { background: #FDF0EE; color: #8C2F26; border-color: #F3D6D2; }

/* ----- Action box ----- */
.ps-buybox {
	background: var(--ps-white);
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius-lg);
	padding: 1.5rem;
	box-shadow: 0 1px 3px rgba(20,27,20,.05);
}
.ps-buybox__title {
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.2;
	margin: 0 0 .875rem;
}
.ps-btn--block { display: flex; width: 100%; }
.ps-buybox .ps-btn { min-height: 48px; }
.ps-buybox .ps-btn + .ps-btn { margin-top: .625rem; }
.ps-btn--outline { background: var(--ps-white); color: var(--ps-black); border-color: var(--ps-line); }
.ps-btn--outline:hover { border-color: var(--ps-forest); color: var(--ps-forest); }
.ps-buybox__meta {
	margin: 1rem 0 0;
	padding-top: .5rem;
	border-top: 1px solid var(--ps-line);
}
.ps-buybox__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .75rem;
	padding: .4rem 0;
	font-size: .9rem;
}
.ps-buybox__row dt { color: rgba(0,0,0,.55); font-weight: 600; flex: 0 0 auto; }
.ps-buybox__row dd { margin: 0; color: var(--ps-forest); font-weight: 700; text-align: right; }
.ps-buybox__ausmade {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ps-line);
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.35;
	color: rgba(0,0,0,.75);
}
.ps-buybox__mark { display: block; width: 44px; height: 44px; flex: 0 0 auto; }
.ps-buybox__advice {
	margin: .875rem 0 0;
	padding-top: .875rem;
	border-top: 1px solid var(--ps-line);
	font-size: .875rem;
	line-height: 1.6;
	color: rgba(0,0,0,.55);
}
.ps-buybox__advice a { color: var(--ps-burnt-orange); font-weight: 700; text-decoration: none; }
.ps-buybox__advice a:hover { text-decoration: underline; }

/* ----- Collapsible sections -----
   Native <details>. The h2 sits inside <summary> so the heading outline is
   intact for crawlers whether or not the section is open. */
.ps-secs { padding: .5rem 0 3.5rem; }
details.ps-sec { border-top: 1px solid var(--ps-line); }
details.ps-sec:last-of-type { border-bottom: 1px solid var(--ps-line); }
.ps-sec__summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.5rem 0;
}
.ps-sec__summary::-webkit-details-marker { display: none; }
.ps-sec__summary:focus-visible { outline: 2px solid var(--ps-forest); outline-offset: 3px; }
.ps-sec__head { min-width: 0; }
.ps-sec__title {
	font-size: clamp(1.4375rem, 2.6vw, 1.875rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.15;
	margin: 0;
}
.ps-sec__sub {
	display: block;
	font-size: .875rem;
	font-weight: 600;
	color: rgba(0,0,0,.55);
	margin-top: .25rem;
}
.ps-sec__chev {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1.5px solid var(--ps-line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ps-black);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ps-sec__chev::before { content: "+"; }
details.ps-sec[open] > .ps-sec__summary .ps-sec__chev { background: var(--ps-black); color: var(--ps-white); border-color: var(--ps-black); }
details.ps-sec[open] > .ps-sec__summary .ps-sec__chev::before { content: "−"; }
.ps-sec__body { padding: 0 0 2.25rem; }
.ps-sec__body > :first-child { margin-top: 0; }

/* Sub-panels inside a section (rate table, first aid, handling). */
details.ps-sub {
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius-lg);
	background: var(--ps-white);
	margin: 1.25rem 0 0;
}
.ps-sub__summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: .9rem 1.125rem;
	min-height: 44px;
	font-weight: 800;
	font-size: .975rem;
	color: var(--ps-forest);
}
.ps-sub__summary::-webkit-details-marker { display: none; }
.ps-sub__summary::after { content: "+"; font-weight: 400; color: var(--ps-orange); font-size: 1.375rem; line-height: 1; }
details.ps-sub[open] > .ps-sub__summary::after { content: "−"; }
.ps-sub__summary:focus-visible { outline: 2px solid var(--ps-forest); outline-offset: 2px; }
.ps-sub__body { padding: 0 1.125rem 1.125rem; font-size: .95rem; }
.ps-sub__body .ps-dtable { margin-top: .5rem; }
.ps-sub__body > p:last-child { margin-bottom: 0; }

/* One heading per Directions column. Left is advisory (muted), right is the
   label-verbatim column (orange). The regulated/advisory boundary is still
   carried by the label note and attribution line — the colour just repeats it. */
.ps-colhead {
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: 1.15;
	color: var(--ps-burnt-orange);
	margin: 0 0 1rem;
}
.ps-colhead--adv { color: rgba(0,0,0,.5); }
.ps-colhead + .ps-label-note { margin: -.5rem 0 1rem; }

/* Warn boxes stacked directly inside a section body sit tighter than the
   in-column ones. */
.ps-warn--tight { margin: 0 0 .75rem; }
.ps-warn--tight p { margin: 0 0 .5rem; }
.ps-warn--tight p:last-child { margin-bottom: 0; }
.ps-sec__body > .ps-warn--collapsible,
.ps-sec__body > .ps-warn { margin-top: 1.25rem; }

/* Stop 1, as one line at the foot of "Where it goes". */
.ps-stopline {
	background: #FFF7F6;
	border-left: 4px solid var(--ps-redgum);
	border-radius: 0 var(--ps-radius) var(--ps-radius) 0;
	padding: .875rem 1.125rem;
	margin: 1.125rem 0 0;
	font-size: .95rem;
	line-height: 1.55;
}
.ps-stopline strong { color: var(--ps-redgum); }
.ps-stopline--lead { margin: 0 0 1.5rem; }

/* Credential strip — replaces the maker band. */
.ps-credline { background: var(--ps-cream); padding: 1.375rem 0; }
.ps-credline__text { margin: 0; font-size: .95rem; line-height: 1.5; }
.ps-credline__text a { color: var(--ps-burnt-orange); font-weight: 700; text-decoration: none; white-space: nowrap; }
.ps-credline__text a:hover { text-decoration: underline; }

@media (max-width: 760px) {
	.ps-buybox { padding: 1.25rem; }
	.ps-glance__item { font-size: .875rem; }
	.ps-sec__summary { padding: 1.25rem 0; }
	.ps-sec__body { padding-bottom: 1.75rem; }
	.ps-colhead { font-size: 1.25rem; }
	/* Inline text links at 17px tall — 44px floor on mobile, same pattern as
	   .ps-triage__advice a. */
	.ps-buybox__advice a,
	.ps-credline__text a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	.ps-sec__chev { transition: none; }
}