/* ==========================================================================
   PharmaCode Shop
   --------------------------------------------------------------------------
   One file, in the order a page is built: tokens, reset, primitives, then the
   blocks from the top of the document to the bottom. Shop-specific rules are
   in shop.css so a site without WooCommerce never downloads them.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */

:root {
	/* The greens come off the brand's own print work: a near-black green for
	   ink and ground, a mint for anything interactive, a muted gold for accents
	   that must not read as a second call to action. */
	--pc-ink: #0e1f1a;
	--pc-ink-soft: #17302a;
	--pc-ink-70: rgba(14, 31, 26, 0.7);
	--pc-ink-45: rgba(14, 31, 26, 0.45);
	--pc-mint: #7fc9a9;
	--pc-mint-deep: #2f7f66;
	--pc-mint-wash: #e8f4ee;
	--pc-gold: #d9b863;
	--pc-gold-wash: #f6efdd;

	--pc-paper: #ffffff;
	--pc-cream: #f7f4ee;
	--pc-sand: #efe9de;
	--pc-line: rgba(14, 31, 26, 0.12);
	--pc-line-soft: rgba(14, 31, 26, 0.07);
	--pc-muted: #5e6f69;

	--pc-danger: #a4432f;

	/* Type. Montserrat is the closest widely-licensed face to the geometric
	   sans the reference uses; it is self-hosted in assets/fonts. */
	--pc-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--pc-step--2: 0.6875rem;
	--pc-step--1: 0.8125rem;
	--pc-step-0: 0.9375rem;
	--pc-step-1: 1.0625rem;
	--pc-step-2: 1.375rem;
	--pc-step-3: 1.75rem;
	--pc-step-4: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
	--pc-step-5: clamp(2.6rem, 1.6rem + 4.2vw, 4.4rem);

	--pc-tight: -0.02em;
	--pc-wide: 0.14em;

	/* Spacing. A single scale keeps the vertical rhythm of unrelated bands in
	   step without anybody measuring. */
	--pc-1: 4px;
	--pc-2: 8px;
	--pc-3: 12px;
	--pc-4: 16px;
	--pc-5: 24px;
	--pc-6: 32px;
	--pc-7: 48px;
	--pc-8: 64px;
	--pc-9: 88px;
	--pc-10: 120px;

	--pc-band: clamp(56px, 7vw, 104px);

	--pc-radius: 4px;
	--pc-radius-lg: 10px;
	--pc-radius-pill: 999px;

	--pc-shadow: 0 1px 2px rgba(14, 31, 26, 0.05), 0 12px 32px -18px rgba(14, 31, 26, 0.3);
	--pc-shadow-lift: 0 2px 6px rgba(14, 31, 26, 0.07), 0 26px 48px -24px rgba(14, 31, 26, 0.35);

	--pc-wrap: 1320px;
	--pc-gutter: clamp(18px, 4vw, 44px);

	--pc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--pc-fast: 140ms;
	--pc-med: 260ms;

	/* Tall enough to carry the bigger logo, and to read as a band floating on a
	   hero video rather than a strip pressed against its top edge. */
	--pc-header-h: 86px;
}

/* ---------------------------------------------------------------- 2. reset */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--pc-header-h) + 16px);
}

body.pcs {
	margin: 0;
	background: var(--pc-paper);
	color: var(--pc-ink);
	font-family: var(--pc-font);
	font-size: var(--pc-step-0);
	font-weight: 400;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

body.pcs.is-locked {
	overflow: hidden;
}

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

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--pc-4);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: var(--pc-tight);
	text-wrap: balance;
}

p {
	margin: 0 0 var(--pc-4);
}

ul, ol {
	margin: 0 0 var(--pc-4);
	padding-left: 1.25em;
}

hr {
	border: 0;
	border-top: 1px solid var(--pc-line);
	margin: var(--pc-7) 0;
}

:focus-visible {
	outline: 2px solid var(--pc-mint-deep);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--pc-mint);
	color: var(--pc-ink);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* ----------------------------------------------------------- 3. primitives */

.pcs-wrap {
	width: 100%;
	max-width: var(--pc-wrap);
	margin-inline: auto;
	padding-inline: var(--pc-gutter);
}

.pcs-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pcs-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--pc-ink);
	color: #fff;
	padding: var(--pc-3) var(--pc-5);
	border-radius: 0 0 var(--pc-radius) 0;
}

.pcs-skip:focus {
	left: 0;
}

.pcs-band {
	padding-block: var(--pc-band);
}

.pcs-kicker {
	margin: 0 0 var(--pc-3);
	font-size: var(--pc-step--2);
	font-weight: 600;
	letter-spacing: var(--pc-wide);
	text-transform: uppercase;
	color: var(--pc-mint-deep);
}

.pcs-kicker--light {
	color: var(--pc-mint);
}

.pcs-bandhead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--pc-5);
	margin-bottom: var(--pc-7);
	flex-wrap: wrap;
}

.pcs-bandhead__title {
	margin: 0;
	font-size: var(--pc-step-4);
	font-weight: 600;
	max-width: 20ch;
}

.pcs-icon {
	flex: none;
}

/* buttons ------------------------------------------------------------------ */

.pcs-btn {
	--btn-bg: var(--pc-ink);
	--btn-fg: #fff;
	--btn-bd: var(--pc-ink);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pc-2);
	padding: 14px var(--pc-6);
	min-height: 48px;
	border: 1px solid var(--btn-bd);
	border-radius: var(--pc-radius-pill);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-size: var(--pc-step--1);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--pc-fast) var(--pc-ease),
		color var(--pc-fast) var(--pc-ease),
		border-color var(--pc-fast) var(--pc-ease),
		transform var(--pc-fast) var(--pc-ease);
}

.pcs-btn:hover {
	transform: translateY(-1px);
}

.pcs-btn:active {
	transform: translateY(0);
}

.pcs-btn--dark:hover {
	--btn-bg: var(--pc-mint-deep);
	--btn-bd: var(--pc-mint-deep);
}

.pcs-btn--mint {
	--btn-bg: var(--pc-mint);
	--btn-fg: var(--pc-ink);
	--btn-bd: var(--pc-mint);
}

.pcs-btn--mint:hover {
	--btn-bg: #6fbc9a;
	--btn-bd: #6fbc9a;
}

.pcs-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: currentColor;
	--btn-bd: currentColor;
}

.pcs-btn--ghost:hover {
	--btn-bg: rgba(255, 255, 255, 0.1);
}

.pcs-btn[disabled],
.pcs-btn.is-busy {
	opacity: 0.55;
	pointer-events: none;
}

.pcs-textlink {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-2);
	font-size: var(--pc-step--1);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	white-space: nowrap;
}

.pcs-textlink .pcs-icon {
	transition: transform var(--pc-fast) var(--pc-ease);
}

.pcs-textlink:hover .pcs-icon {
	transform: translateX(3px);
}

.pcs-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	position: relative;
	transition: background var(--pc-fast) var(--pc-ease);
}

.pcs-iconbtn:hover {
	background: var(--pc-line-soft);
}

/* fields ------------------------------------------------------------------- */

.pcs-field {
	display: flex;
	align-items: center;
	gap: var(--pc-3);
	background: var(--pc-paper);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-pill);
	padding: 5px 5px 5px var(--pc-5);
	transition: border-color var(--pc-fast) var(--pc-ease);
}

.pcs-field:focus-within {
	border-color: var(--pc-mint-deep);
}

.pcs-field > .pcs-icon {
	color: var(--pc-muted);
}

.pcs-field__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 10px 0;
	font-size: var(--pc-step-0);
}

.pcs-field__input:focus {
	outline: none;
}

.pcs-field .pcs-btn {
	flex: none;
	min-height: 42px;
	padding-inline: var(--pc-5);
}

/* badges ------------------------------------------------------------------- */

.pcs-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: var(--pc-radius-pill);
	font-size: var(--pc-step--2);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	background: var(--pc-ink);
	color: #fff;
}

.pcs-badge--sale {
	background: var(--pc-gold);
	color: var(--pc-ink);
}

.pcs-badge--save {
	background: var(--pc-gold-wash);
	color: #8a6d1f;
}

.pcs-badge--out {
	background: var(--pc-sand);
	color: var(--pc-muted);
}

/* chips -------------------------------------------------------------------- */

.pcs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-2);
	margin: var(--pc-6) 0 0;
	padding: 0;
	list-style: none;
}

.pcs-chip {
	display: inline-flex;
	padding: 9px 18px;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-pill);
	font-size: var(--pc-step--1);
	text-decoration: none;
	transition: background var(--pc-fast) var(--pc-ease),
		border-color var(--pc-fast) var(--pc-ease),
		color var(--pc-fast) var(--pc-ease);
}

.pcs-chip:hover {
	border-color: var(--pc-ink);
}

.pcs-chip.is-current {
	background: var(--pc-ink);
	border-color: var(--pc-ink);
	color: #fff;
}

/* --------------------------------------------------------- 4. announcement */

.pcs-announce {
	background: var(--pc-ink);
	color: #fff;
}

.pcs-announce__inner {
	display: flex;
	justify-content: center;
	min-height: 38px;
	align-items: center;
}

.pcs-announce__text {
	margin: 0;
	font-size: var(--pc-step--2);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
}

/* -------------------------------------------------------------- 5. header */

.pcs-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--pc-paper);
	border-bottom: 1px solid var(--pc-line-soft);
	transition: background var(--pc-med) var(--pc-ease),
		border-color var(--pc-med) var(--pc-ease),
		box-shadow var(--pc-med) var(--pc-ease);
}

.pcs-header.is-stuck {
	box-shadow: 0 1px 24px -12px rgba(14, 31, 26, 0.45);
}

/* ---------------------------------------------------------------------------
   Transparent over the hero.

   Added by JS only while the hero is still under the header, and taken off the
   moment it is not - a white wordmark and white links over a white page would
   be an invisible header, so this state can never be the default or survive a
   scroll. It is also never applied when there is no hero to sit on.

   The hero is pulled up by the header's own height and given it back as
   padding, so the header floats on the picture rather than above it. That is
   what makes room for a video behind it.
   --------------------------------------------------------------------------- */
.pcs-header--over {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
	color: #fff;
}

.pcs-header--over .pcs-nav__link,
.pcs-header--over .pcs-iconbtn {
	color: #fff;
}

.pcs-header--over .pcs-nav__link:hover {
	color: var(--pc-mint);
}

/* The mark is flat black on transparency, so it can be turned white outright
   rather than shipping a second file into the header for one state. */
.pcs-header--over .pcs-logo__img {
	filter: brightness(0) invert(1);
}

.pcs-hero--under {
	margin-top: calc(-1 * var(--pc-header-h));
	padding-top: var(--pc-header-h);
}

.pcs-header__inner {
	display: flex;
	align-items: center;
	gap: var(--pc-5);
	min-height: var(--pc-header-h);
}

.pcs-header__burger {
	display: none;
	margin-left: -10px;
}

.pcs-header__brand {
	flex: none;
	margin-right: var(--pc-2);
}

.pcs-header__brand img {
	max-height: 56px;
	width: auto;
}

/* Sized by height, because that is the dimension a logo shares with the type
   beside it; the width follows the artwork's own proportion. */
.pcs-logo {
	display: block;
	line-height: 0;
	text-decoration: none;
}

.pcs-logo__img {
	width: auto;
	height: 46px;
}

.pcs-footer .pcs-logo__img {
	height: 52px;
}

@media (max-width: 1024px) {
	.pcs-logo__img {
		height: 34px;
	}
}

.pcs-wordmark__link {
	display: block;
	text-decoration: none;
	line-height: 1.05;
}

.pcs-wordmark__name {
	display: block;
	font-size: var(--pc-step-1);
	font-weight: 700;
	letter-spacing: -0.03em;
}

.pcs-wordmark__tag {
	display: block;
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pc-muted);
}

.pcs-header__tools {
	display: flex;
	align-items: center;
	gap: var(--pc-1);
	margin-left: auto;
}

/* the cart pip */
.pcs-cartlink {
	text-decoration: none;
}

.pcs-cartlink__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--pc-radius-pill);
	background: var(--pc-mint-deep);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.pcs-cartlink__count.is-empty {
	display: none;
}

/* nav ---------------------------------------------------------------------- */

.pcs-nav__list {
	display: flex;
	align-items: center;
	gap: var(--pc-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcs-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 10px var(--pc-3);
	border-radius: var(--pc-radius);
	font-size: var(--pc-step--1);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--pc-fast) var(--pc-ease);
}

.pcs-nav__link:hover {
	color: var(--pc-mint-deep);
}

.pcs-nav__link--accent {
	color: var(--pc-danger);
	font-weight: 600;
}

.pcs-nav__caret {
	transition: transform var(--pc-fast) var(--pc-ease);
}

.pcs-nav__item--mega.is-open > .pcs-nav__link .pcs-nav__caret {
	transform: rotate(180deg);
}

/* mega panel --------------------------------------------------------------- */

.pcs-nav__item--mega {
	position: static;
}

.pcs-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--pc-paper);
	border-top: 1px solid var(--pc-line-soft);
	box-shadow: 0 24px 40px -28px rgba(14, 31, 26, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--pc-med) var(--pc-ease),
		transform var(--pc-med) var(--pc-ease),
		visibility var(--pc-med);
}

.pcs-nav__item--mega.is-open > .pcs-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.pcs-mega__inner {
	padding-block: var(--pc-7);
}

.pcs-mega__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr);
	gap: var(--pc-7);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcs-mega__heading {
	display: block;
	margin-bottom: var(--pc-4);
	padding-bottom: var(--pc-3);
	border-bottom: 1px solid var(--pc-line);
	font-size: var(--pc-step--2);
	font-weight: 600;
	letter-spacing: var(--pc-wide);
	text-transform: uppercase;
	color: var(--pc-muted);
}

.pcs-mega__sub {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcs-mega__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pc-3);
	padding: 8px 0;
	font-size: var(--pc-step-0);
	text-decoration: none;
	transition: color var(--pc-fast) var(--pc-ease);
}

.pcs-mega__link:hover {
	color: var(--pc-mint-deep);
}

.pcs-mega__count {
	font-size: var(--pc-step--2);
	color: var(--pc-ink-45);
}

.pcs-mega__feature {
	list-style: none;
}

.pcs-mega__promo {
	display: grid;
	gap: var(--pc-2);
	padding: var(--pc-4);
	background: var(--pc-cream);
	border-radius: var(--pc-radius-lg);
	text-decoration: none;
}

.pcs-mega__promo-media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.pcs-mega__promo-kicker {
	font-size: var(--pc-step--2);
	font-weight: 600;
	letter-spacing: var(--pc-wide);
	text-transform: uppercase;
	color: var(--pc-mint-deep);
}

.pcs-mega__promo-name {
	font-weight: 600;
	line-height: 1.2;
}

.pcs-mega__promo-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-2);
	font-size: var(--pc-step--1);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* search ------------------------------------------------------------------- */

.pcs-search {
	border-top: 1px solid var(--pc-line-soft);
	background: var(--pc-cream);
}

.pcs-search__inner {
	display: flex;
	align-items: center;
	gap: var(--pc-4);
	padding-block: var(--pc-5);
}

.pcs-search .pcs-searchform {
	flex: 1;
}

.pcs-searchform {
	margin: 0;
}

/* drawer ------------------------------------------------------------------- */

.pcs-drawer {
	position: fixed;
	inset: 0;
	z-index: 120;
}

.pcs-drawer__scrim {
	position: absolute;
	inset: 0;
	border: 0;
	padding: 0;
	background: rgba(14, 31, 26, 0.45);
	cursor: pointer;
	animation: pcs-fade var(--pc-med) var(--pc-ease);
}

.pcs-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: min(92vw, 400px);
	background: var(--pc-paper);
	display: flex;
	flex-direction: column;
	animation: pcs-slide var(--pc-med) var(--pc-ease);
	z-index: 1;
	overflow-y: auto;
}

@keyframes pcs-fade {
	from { opacity: 0; }
}

@keyframes pcs-slide {
	from { transform: translateX(-100%); }
}

.pcs-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--pc-4) var(--pc-5);
	border-bottom: 1px solid var(--pc-line-soft);
}

.pcs-drawer__title {
	font-size: var(--pc-step--2);
	font-weight: 600;
	letter-spacing: var(--pc-wide);
	text-transform: uppercase;
}

.pcs-drawer__nav {
	padding: var(--pc-5);
}

/* Inside the drawer the mega panel is not a panel: it is the list, always open. */
.pcs-drawer__nav .pcs-nav__list {
	display: block;
}

.pcs-drawer__nav .pcs-nav__link {
	padding: var(--pc-3) 0;
	font-size: var(--pc-step-1);
	font-weight: 500;
	border-bottom: 1px solid var(--pc-line-soft);
	display: flex;
	justify-content: space-between;
}

.pcs-drawer__nav .pcs-mega {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: 0;
	background: transparent;
	display: none;
}

.pcs-drawer__nav .pcs-nav__item--mega.is-open > .pcs-mega {
	display: block;
}

.pcs-drawer__nav .pcs-mega__inner {
	padding: var(--pc-4) 0 var(--pc-5);
	max-width: none;
}

.pcs-drawer__nav .pcs-mega__list {
	display: block;
}

.pcs-drawer__nav .pcs-mega__feature {
	display: none;
}

.pcs-drawer__nav .pcs-mega__heading {
	margin-top: var(--pc-4);
}

/* ---------------------------------------------------------------- 6. hero */

.pcs-hero {
	position: relative;
	background: linear-gradient(180deg, var(--pc-ink) 0%, #12271f 100%);
	color: #fff;
	overflow: hidden;
}

/* --- hero video ----------------------------------------------------------- */

.pcs-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.pcs-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The headline is white and the video is whatever was filmed, so a scrim goes
   between them. Weighted to the left, where the copy is, so the picture keeps
   as much of itself as the type allows. `--pcs-scrim` is the dial to turn if a
   particular video still swallows the words. */
.pcs-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg,
			rgba(14, 31, 26, var(--pcs-scrim, 0.78)) 0%,
			rgba(14, 31, 26, calc(var(--pcs-scrim, 0.78) * 0.72)) 45%,
			rgba(14, 31, 26, calc(var(--pcs-scrim, 0.78) * 0.28)) 100%),
		linear-gradient(180deg, rgba(14, 31, 26, 0.45) 0%, rgba(14, 31, 26, 0) 40%);
}

/* The copy has to sit on top of the video, not behind it. */
.pcs-hero__inner {
	position: relative;
	z-index: 1;
}

/* With a video behind it the band needs real height, or the film is a letterbox
   strip. Without one, the packshot decides the height as before. */
/* One column, because the second one held the packshot and there is no packshot
   over a film. The copy keeps to the left half so the video is not hidden
   behind a full-width block of text. */
.pcs-hero--video .pcs-hero__inner {
	grid-template-columns: minmax(0, 1fr);
	min-height: min(78vh, 720px);
	align-content: center;
}

.pcs-hero--video .pcs-hero__copy {
	max-width: 640px;
}

@media (prefers-reduced-motion: reduce) {
	/* Someone who has asked the system for less movement gets the poster. The
	   frame is still there; it simply does not move. */
	.pcs-hero__video {
		display: none;
	}

	.pcs-hero__bg {
		background: var(--pc-ink) center / cover no-repeat;
		background-image: var(--pcs-hero-poster, none);
	}
}

.pcs-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	align-items: center;
	gap: var(--pc-8);
	padding-block: clamp(48px, 6vw, 96px);
}

/* The five blocks of hero copy, in the order the owner gave them: promise,
   mark, signature, creed, and what the creed means. Each one is a step down in
   weight or brightness from the one before, so the block reads as one statement
   rather than as five paragraphs of equal voice.

   `.pcs-kicker` is deliberately not used for any of them. Its treatment is
   uppercase, and every line here arrived in sentence case with its own
   punctuation - "Quality. Care. Trust." - which uppercasing would quietly
   restyle. The words are the owner's; the case is part of them. */
.pcs-hero__promise {
	max-width: 42ch;
	margin: 0 0 var(--pc-6);
	font-size: var(--pc-step-2);
	font-weight: 300;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.92);
}

.pcs-hero__title {
	margin: 0 0 var(--pc-4);
	font-size: var(--pc-step-5);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.02;
}

/* The ® at full size in a 4.4rem headline is a character; at this size it is a
   mark. `letter-spacing: normal` because the headline's -0.03em tracking pulls
   it into the "e" it follows. */
.pcs-hero__reg {
	font-size: 0.34em;
	letter-spacing: normal;
	vertical-align: super;
	line-height: 1;
}

.pcs-hero__signature {
	margin: 0 0 var(--pc-5);
	font-size: var(--pc-step-3);
	font-weight: 300;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.95);
}

/* The one line that is allowed to be mint. It is the shortest of the five and
   carries the whole claim, so it gets the colour rather than a size. */
.pcs-hero__creed {
	margin: 0 0 var(--pc-5);
	font-size: var(--pc-step-1);
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--pc-mint);
}

.pcs-hero__lede {
	max-width: 46ch;
	margin: 0 0 var(--pc-6);
	font-size: var(--pc-step-1);
	font-weight: 300;
	color: rgba(255, 255, 255, 0.78);
}

/* Nothing follows it any more - the buttons and the ticks are gone - so its
   bottom margin would be a band of empty scrim under the last sentence. */
.pcs-hero__lede--last {
	margin-bottom: 0;
}

.pcs-hero__media {
	position: relative;
}

/* The packshots are photographed on white, so on a dark ground they arrive as
   white rectangles. Multiplying them onto a light disc drops the white away and
   leaves the pack - but only where the disc is OPAQUE: over a gradient's
   transparent edge the same blend darkens the photo into a smudge. So the disc
   is a solid circle, sized to hold the whole shot. */
.pcs-hero__shot {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	width: 100%;
	max-width: 520px;
	margin-inline: auto;
	padding: clamp(28px, 4vw, 56px);
	border-radius: 50%;
	background: var(--pc-cream);
	text-decoration: none;
	/* An auto row is floored at the image's own height, which is what let the
	   packshot push the box past the square `aspect-ratio` asks for. A row that
	   cannot contribute a minimum leaves the aspect ratio in charge. */
	grid-template-rows: minmax(0, 1fr);
}

/* The packshots are portrait, so `width: 100%` made the image about 9% taller
   than the square it sits in and the disc stretched into an ellipse at every
   width - and a near-square photograph pushed its own white corners out past
   the disc, where the multiply blend has nothing to blend onto. Letterboxing
   the shot inside the square instead keeps `aspect-ratio: 1` true. */
/* The photograph is a rectangle and the disc is a circle, so the corners of the
   shot sit on cream with nothing behind them and print a faint rectangle across
   it - a flat #f8f8f8 ground multiplied onto #f7f4ee is only about 3% darker,
   but the edge is dead straight and the eye finds it immediately.

   There is no filter that fixes this for the catalogue, because the catalogue is
   not one thing: some shots are pure white and blend invisibly, this one is a
   flat 248, several carry a studio sweep running from 64 to 250, and a couple of
   the PNGs have real alpha. Correcting the flat ones to white would leave the
   graduated ones exactly as they are.

   Dissolving the edge works on all four cases, because it stops depending on
   what the ground behind the product is. The stops are in the image's own box,
   which `object-fit: contain` has already fitted to the shot, so the fade lands
   on the photograph's edge rather than at a fixed distance from the middle. */
.pcs-hero__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	/* Set per product from the picture's own border - see pcs_image_white_lift().
	   This is what stops the shot's off-white ground printing a soft disc of
	   shadow around the pack; the mask below only ever hid its edge. */
	filter: brightness(var(--pcs-lift, 1));
	/* The product reaches about 74% of the way out; the photograph's own edge is
	   at 91% across and 100% down. So the fade has to start past the pack and
	   finish inside the disc - opaque to 80%, gone by 100%. A wider fade than
	   that washes out the corners of the pack itself, which is worse than the
	   seam it was removing. */
	-webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 80%, transparent 100%);
}

.pcs-hero__tag {
	position: absolute;
	left: 50%;
	bottom: -22px;
	transform: translateX(-50%);
	white-space: nowrap;
	text-align: center;
	justify-items: center;
	display: grid;
	gap: 2px;
	padding: var(--pc-3) var(--pc-5);
	background: rgba(255, 255, 255, 0.94);
	color: var(--pc-ink);
	border-radius: var(--pc-radius-pill);
	box-shadow: var(--pc-shadow);
}

.pcs-hero__tag-name {
	font-size: var(--pc-step--1);
	font-weight: 600;
}

.pcs-hero__tag-price {
	font-size: var(--pc-step--1);
	color: var(--pc-muted);
}

.pcs-hero__tag-price del {
	opacity: 0.55;
	margin-right: 4px;
}

/* --------------------------------------------------------------- 7. tiles */

.pcs-band--concerns {
	background: var(--pc-paper);
}

.pcs-tiles {
	display: grid;
	/* Six hard-coded columns left a hole on the right the moment the row held
	   five categories. auto-fit collapses the tracks nobody filled, so the row
	   stays even however many concerns the shop ends up with. */
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--pc-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcs-tile__link {
	display: grid;
	gap: var(--pc-2);
	padding: var(--pc-4);
	background: var(--pc-cream);
	border-radius: var(--pc-radius-lg);
	text-align: center;
	text-decoration: none;
	transition: background var(--pc-med) var(--pc-ease),
		transform var(--pc-med) var(--pc-ease);
}

.pcs-tile__link:hover {
	background: var(--pc-mint-wash);
	transform: translateY(-3px);
}

.pcs-tile__media {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	overflow: hidden;
}

/* The category icons are the company's own marks, inlined so they can take a
   colour. `currentColor` is set here and nowhere in the files, which is what
   lets one icon be deep green on this cream tile and mint on a dark band. */
.pcs-caticon {
	width: 46%;
	height: 46%;
	color: var(--pc-mint-deep);
	transition: color var(--pc-med) var(--pc-ease),
		transform var(--pc-med) var(--pc-ease);
}

.pcs-tile__link:hover .pcs-caticon {
	color: var(--pc-ink);
	transform: translateY(-2px);
}

.pcs-band--science .pcs-caticon,
.pcs-footer .pcs-caticon {
	color: var(--pc-mint);
}

/* Same correction as the hero, for the same reason: a shot letterboxed into a
   square leaves the tile's ground showing around it, and the shot's own ground
   multiplied onto that prints a rectangle. The fade is per edge rather than
   radial - these are square tiles and a radial mask would round the corners of
   a photograph that fills them. */
.pcs-tile__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	filter: brightness(var(--pcs-lift, 1));
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.pcs-tile__name {
	font-size: var(--pc-step-0);
	font-weight: 600;
	line-height: 1.2;
}

.pcs-tile__count {
	font-size: var(--pc-step--2);
	color: var(--pc-muted);
}

/* ---------------------------------------------------------------- 8. rail */

.pcs-band--rail {
	background: var(--pc-cream);
}

.pcs-rail {
	position: relative;
}

.pcs-rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 1fr);
	gap: var(--pc-5);
	margin: 0;
	padding: 4px var(--pc-gutter) var(--pc-4);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	max-width: var(--pc-wrap);
	margin-inline: auto;
}

.pcs-rail__track::-webkit-scrollbar {
	display: none;
}

.pcs-rail__track > .pcs-card {
	scroll-snap-align: start;
}

.pcs-rail__nav {
	display: flex;
	gap: var(--pc-2);
}

.pcs-rail__btn {
	border: 1px solid var(--pc-line);
	background: var(--pc-paper);
}

.pcs-rail__btn[disabled] {
	opacity: 0.35;
	pointer-events: none;
}

/* --------------------------------------------------------------- 9. grids */

.pcs-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pc-5) var(--pc-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcs-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* -------------------------------------------------------------- 10. cards */

.pcs-card {
	display: flex;
	flex-direction: column;
	list-style: none;
	position: relative;
}

/* The same lit ground the product page gives the gallery, so a picture does not
   change its background between the grid and the page it leads to. The shots
   are not cut-outs - each carries its own grey studio sweep and the product's
   drop shadow baked into the pixels - and the image multiplies onto this, so
   that sweep becomes the ground rather than a panel laid over it.

   One square box for every card, because the catalogue is not square and the
   grid has to be. The pictures run from 1.000 down to 0.770, which on a 294px
   column is a height anywhere between 296px and 385px - and since the title
   sits directly under the picture, every card in a row started its text at a
   different height. The box is fixed and the picture covers it (see below). */
.pcs-card__media {
	position: relative;
	background: radial-gradient(
		116% 86% at 50% 6%,
		#fff 0%,
		var(--pc-cream) 58%,
		var(--pc-sand) 100%
	);
	border: 1px solid var(--pc-line-soft);
	border-radius: var(--pc-radius-lg);
	overflow: hidden;
	aspect-ratio: 1;
}

.pcs-band--rail .pcs-card__media {
	border-color: transparent;
}

.pcs-card__imglink {
	display: block;
	height: 100%;
}

/* Cover, not contain, and no inset.
 *
 * Contain was what printed the grey block inside some cards and not others:
 * these shots are not cut-outs - each carries its own grey studio sweep and the
 * product's drop shadow baked into the pixels - so letterboxing a 0.770 picture
 * in a square box left that sweep sitting in the middle of the card with a hard
 * edge round it. Covering fills the box, so no ground is left showing to seam
 * against and the multiply lands the whole frame on the warm ground.
 *
 * The cost is a trim off the top and bottom - 4% at 0.925, 12% at 0.770 - and
 * it comes off the studio background rather than the product on all twelve of
 * the first page. Regenerating the pcs-card thumbnails would crop by the same
 * amount, just on the server; re-exporting the photographs to one ratio is the
 * only way to have the tidy grid and no trim at all.
 */
.pcs-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
	transition: transform 600ms var(--pc-ease);
}

/* One picture per card. A `.pcs-card__img--hover` used to be laid over this one
   and faded in on hover, and it is gone as of 2026-09-17 - see the note in
   woocommerce/content-product.php for why, and for what it would take to bring
   back.
 *
 * The part worth keeping here is the reason it was broken, because it is a
 * property of this design rather than a slip: `mix-blend-mode: multiply` is
 * what lands these photographs on the card's warm ground, and a multiplied
 * layer can never cover what is underneath it - multiply only ever darkens. So
 * stacking two of them and fading the top one in shows both at once, however
 * opaque the top one is. Anything laid over this image has to hide it, not
 * cover it.
 *
 * `transition: opacity` was declared on this rule for a fade that was never
 * written; it has gone with it, so the file no longer implies a state the
 * stylesheet does not have. */
.pcs-card:hover .pcs-card__img {
	transform: scale(1.03);
}

.pcs-card__badges {
	position: absolute;
	top: var(--pc-3);
	left: var(--pc-3);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pc-2);
	z-index: 2;
	pointer-events: none;
}

.pcs-card__badges:empty {
	display: none;
}

/* The quick-add slides up on hover on a pointer device, and is simply always
   visible on touch - where there is no hover to reveal it. */
.pcs-card__quick {
	position: absolute;
	inset-inline: var(--pc-3);
	bottom: var(--pc-3);
	z-index: 2;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--pc-med) var(--pc-ease),
		transform var(--pc-med) var(--pc-ease);
}

.pcs-card:hover .pcs-card__quick,
.pcs-card:focus-within .pcs-card__quick {
	opacity: 1;
	transform: translateY(0);
}

.pcs-btn--quick {
	width: 100%;
	min-height: 44px;
	padding-inline: var(--pc-4);
	backdrop-filter: blur(6px);
}

@media (hover: none) {
	.pcs-card__quick {
		position: static;
		opacity: 1;
		transform: none;
		margin-top: var(--pc-3);
	}
}

/* Grows to fill the card, so that the foot's margin-top:auto can pin the price
   to the bottom of it. Cards in a grid row are the same height even when their
   pictures are not, so the prices still line up across the row. */
.pcs-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--pc-2);
	padding-top: var(--pc-4);
}

.pcs-card__kicker {
	margin: 0;
	font-size: var(--pc-step--2);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pc-mint-deep);
}

.pcs-card__name {
	margin: 0;
	font-size: var(--pc-step-1);
	font-weight: 600;
	line-height: 1.24;
}

.pcs-card__name a {
	text-decoration: none;
}

.pcs-card__name a::after {
	/* One big hit area for the whole card, without nesting the link. */
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.pcs-card__note {
	margin: 0;
	font-size: var(--pc-step--1);
	color: var(--pc-muted);
	line-height: 1.5;
}

.pcs-card__foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--pc-3);
	margin-top: auto;
	padding-top: var(--pc-2);
}

.pcs-card__price {
	font-size: var(--pc-step-1);
	font-weight: 600;
}

.pcs-card__price del {
	margin-right: 6px;
	font-weight: 400;
	color: var(--pc-ink-45);
}

.pcs-card__price ins {
	text-decoration: none;
}

/* rating ------------------------------------------------------------------- */

.pcs-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-2);
	font-size: var(--pc-step--2);
	color: var(--pc-muted);
}

/* Two identical rows of stars, the gold one clipped to the score. Clipping a
   copy is what keeps a half star a half star at any font size, without needing
   half-star artwork or a mask image. */
.pcs-rating__stars {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.pcs-rating__base,
.pcs-rating__fill {
	display: inline-flex;
	white-space: nowrap;
}

.pcs-rating__base {
	color: var(--pc-line);
}

.pcs-rating__fill {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: var(--pcs-fill, 0%);
	overflow: hidden;
	color: var(--pc-gold);
}

.pcs-rating .pcs-icon {
	fill: currentColor;
	stroke: none;
}

/* ------------------------------------------------------------- 11. science */

.pcs-band--science {
	background: var(--pc-ink);
	color: rgba(255, 255, 255, 0.82);
}

/* Centred, because what follows is centred: the heading sitting hard left over a
   product in the middle of the band left a hole to the right of it. */
/* In px, not ch: `ch` resolves against *this* element's font size, not the much
   larger heading inside it, so 30ch measured about 270px and broke the title
   across five lines. */
.pcs-science__head {
	max-width: 660px;
	margin-inline: auto;
	margin-bottom: var(--pc-6);
	text-align: center;
}

.pcs-science__title {
	margin: 0;
	font-size: var(--pc-step-4);
	font-weight: 300;
	color: #fff;
	letter-spacing: -0.025em;
}

/* The claims sit around the product rather than beside it, so the eye lands on
   the pack and collects the reasons on the way past. Below 900px there is no
   room to float anything without it covering the shot, so the pills become an
   ordinary list underneath - the same content, laid out honestly for the space. */
.pcs-proof {
	position: relative;
	display: grid;
	place-items: center;
	padding-block: var(--pc-5);
}

.pcs-proof__shot {
	position: relative;
	display: grid;
	place-items: center;
	grid-template-rows: minmax(0, 1fr);
	aspect-ratio: 1;
	width: min(480px, 56%);
	padding: clamp(24px, 3vw, 44px);
	border-radius: 50%;
	background: var(--pc-cream);
}

.pcs-proof__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	filter: brightness(var(--pcs-lift, 1));
	-webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 80%, transparent 100%);
}

.pcs-proof__pills {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcs-proof__pill {
	position: absolute;
	display: flex;
	align-items: center;
	gap: var(--pc-3);
	max-width: 270px;
	padding: var(--pc-3) var(--pc-5);
	background: rgba(255, 255, 255, 0.96);
	color: var(--pc-ink);
	border-radius: var(--pc-radius-pill);
	box-shadow: var(--pc-shadow-lift);
}

/* Set apart rather than evenly spaced: a ring of four at the compass points
   reads as a diagram, and this should read as a photograph with notes on it. */
.pcs-proof__pill--1 { top: 6%;   left: 6%; }
.pcs-proof__pill--2 { top: 30%;  right: 4%; }
.pcs-proof__pill--3 { bottom: 26%; left: 2%; }
.pcs-proof__pill--4 { bottom: 4%; right: 10%; }

.pcs-proof__icon {
	display: inline-flex;
	flex: none;
	color: var(--pc-mint-deep);
}

.pcs-proof__text {
	display: grid;
	gap: 1px;
	line-height: 1.35;
}

.pcs-proof__text strong {
	font-size: var(--pc-step-0);
	font-weight: 600;
}

.pcs-proof__text span {
	font-size: var(--pc-step--1);
	color: var(--pc-muted);
}

@media (max-width: 900px) {
	.pcs-proof {
		min-height: 0;
		gap: var(--pc-6);
	}

	.pcs-proof__shot {
		width: min(320px, 80%);
	}

	.pcs-proof__pills {
		display: grid;
		gap: var(--pc-3);
		width: 100%;
	}

	.pcs-proof__pill {
		position: static;
		max-width: none;
	}
}

/* -------------------------------------------------------------- 12. offers */

.pcs-band--offers {
	background: var(--pc-paper);
}

/* --------------------------------------------------------------- 13. story */

.pcs-band--story {
	background: var(--pc-sand);
}

.pcs-story {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 6vw, 88px);
}

.pcs-story__media {
	border-radius: var(--pc-radius-lg);
	overflow: hidden;
	background: var(--pc-paper);
}

/* The card is white and this shot's ground is 252, so the picture printed a
   rectangle three points darker than the card across the middle of it - faint,
   and with four straight edges, which is what makes it read as a mistake. */
.pcs-story__img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	padding: var(--pc-7);
	mix-blend-mode: multiply;
	filter: brightness(var(--pcs-lift, 1));
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.pcs-story__title {
	font-size: var(--pc-step-4);
	font-weight: 300;
	margin-bottom: var(--pc-5);
}

.pcs-story__copy p {
	max-width: 54ch;
	color: var(--pc-ink-70);
}

.pcs-story__copy .pcs-btn {
	margin-top: var(--pc-4);
}

/* --------------------------------------------------------------- 15. signup */

.pcs-signup {
	background: var(--pc-mint-wash);
	padding-block: var(--pc-9);
}

.pcs-signup__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	align-items: center;
	gap: var(--pc-8);
}

.pcs-signup__title {
	margin: 0 0 var(--pc-3);
	font-size: var(--pc-step-4);
	font-weight: 300;
	max-width: 16ch;
}

.pcs-signup__lede {
	margin: 0;
	max-width: 52ch;
	color: var(--pc-ink-70);
}

.pcs-signup__form {
	margin: 0;
}

.pcs-signup__hp {
	position: absolute;
	left: -9999px;
}

.pcs-signup__small {
	margin: var(--pc-3) 0 0;
	font-size: var(--pc-step--2);
	color: var(--pc-muted);
}

.pcs-signup__done {
	margin: 0;
	padding: var(--pc-5);
	background: var(--pc-paper);
	border-radius: var(--pc-radius-lg);
	font-weight: 500;
}

/* A label, not a decoration - see footer.php. Clicking the drawn "SIGN UP"
   focuses the real email field, so paint that looks like a button behaves like
   one. The cursor is the only thing that has to say so. */
.pcs-signup__picture {
	display: block;
	width: 100%;
	cursor: pointer;
	overflow: hidden;
}

.pcs-signup__img {
	display: block;
	width: 100%;
	height: auto;
}

/* The words the artwork draws, kept in the DOM and taken off the screen while
   the artwork is the one saying them. Deliberately not `pcs-sr`: below 1200px
   the drawn panel is cropped away and this becomes the visible copy, and a
   utility class that means "hidden" at one width and "shown" at another is a
   utility nobody can trust. The condition lives here instead. */
.pcs-signup__copy--quiet {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * With a picture, the band *is* the picture: full-bleed, edge to edge, with the
 * real email field laid over the SIGN UP button drawn into the artwork
 * (owner's request, 2026-09-17).
 *
 * The artwork is 1600x893 - 1.7917:1, within a hair of 16:9 - so a full-width
 * picture stands exactly as tall as the viewport on any 16:9 screen with
 * nothing cropped off it. That is not only a question of size. The field is
 * positioned as a fraction of the picture, so any crop slides the paint out
 * from under it: `aspect-ratio` on the stage keeps the box at the file's own
 * shape and there is no crop to go wrong.
 *
 * The width is capped so the height cannot pass one screen. On a 21:9 monitor a
 * full-bleed 1.79:1 picture is taller than the display and the band becomes
 * something you scroll through rather than see. Capping the width keeps the
 * ratio - and so keeps the field on the button - where capping the height would
 * not.
 */
.pcs-signup--image {
	padding-block: 0;
	overflow: hidden;

	/*
	 * Where the drawn button is, measured off the pixels rather than read off
	 * the picture: scanning the right-hand panel for long horizontal runs of
	 * ink finds its two border lines and puts the frame at x 1141-1280,
	 * y 566-606 of the 1600x893 file.
	 *
	 * The box is deliberately wider and taller than the paint - out to 95.25%
	 * and 68.87% against the paint's 80% and 67.86% - because it has to
	 * *cover* the drawn button, not sit inside its frame. A drawn button
	 * showing around the edges of a real one is worse than either alone. The
	 * width also has to carry an address: 24% is 346px at 1440, which fits
	 * "you@example.com" and the Join button with room to spare.
	 *
	 * It is also what sets the 1200px breakpoint below, rather than a round
	 * number. 24% cannot be widened to compensate on a narrower screen - the
	 * box is anchored at 71.25% and anything wider runs off the right edge of
	 * the picture - so the pill simply gets smaller with the window, and
	 * measured at 1024px it leaves the input 113px, which will not hold an
	 * email address. Below 1200 the band stacks instead.
	 *
	 * These four numbers are the only thing in the theme that knows where the
	 * button is. Replace the artwork with `php tools/set-banner.php --signup
	 * <file>` and this is the one place to re-measure; tools/checks/signup.js
	 * asserts the cover, so a wrong number fails a check rather than going out
	 * looking slightly off.
	 */
	--pcs-hit-x: 71.25%;
	--pcs-hit-y: 63.27%;
	--pcs-hit-w: 24%;
	--pcs-hit-h: 5.6%;
}

.pcs-signup--image .pcs-signup__stage {
	position: relative;
	width: min(100%, calc(1.7917 * 100vh));
	width: min(100%, calc(1.7917 * 100svh));
	margin-inline: auto;
	aspect-ratio: 1600 / 893;
}

.pcs-signup--image .pcs-signup__picture {
	height: 100%;
	border-radius: 0;
}

.pcs-signup--image .pcs-signup__img {
	height: 100%;

	/* There is nothing to crop - the box carries the file's own ratio - so this
	   only decides what happens to a differently shaped file dropped in later.
	   `cover` fills the band and crops; `contain` would letterbox and leave the
	   band's mint showing down both sides. */
	object-fit: cover;
}

.pcs-signup--image .pcs-signup__form {
	position: absolute;
	left: var(--pcs-hit-x);
	top: var(--pcs-hit-y);
	width: var(--pcs-hit-w);
	height: var(--pcs-hit-h);
	max-width: none;
	margin: 0;
}

/* The pill fills the box, so the paint underneath is covered at every screen
   size rather than only at the one this was measured on. The floor is for small
   laptops, where 5.6% of a 560px-tall picture is a 31px control: it grows
   downwards into empty panel, which is the one direction with room. */
.pcs-signup--image .pcs-signup__form .pcs-field {
	height: 100%;
	min-height: 44px;
	padding-inline: clamp(12px, 1.1vw, 20px) 5px;
	gap: clamp(6px, 0.6vw, 12px);
}

/* `.pcs-btn`'s own 48px floor is taller than the pill on a small laptop, and
   left alone it pushes the button out through the bottom of the field. Inside
   the pill the field decides the height. */
.pcs-signup--image .pcs-signup__form .pcs-btn {
	height: 100%;
	min-height: 0;
	padding-block: 0;
	padding-inline: clamp(12px, 1.1vw, 22px);
	font-size: var(--pc-step--1);
	white-space: nowrap;
}

.pcs-signup--image .pcs-signup__form .pcs-field__input {
	padding-block: 0;
}

/* Under the pill, on the artwork's own empty panel rather than on the band's
   mint, so it needs the darker of the two muted inks to hold its contrast. */
.pcs-signup--image .pcs-signup__small {
	margin-top: 10px;
	color: var(--pc-ink-70);
}

/*
 * Below 1200px the overlay comes off and the band stacks - and the picture is
 * cropped to its left-hand two thirds, the packshot, with the drawn panel taken
 * off the side on purpose.
 *
 * The panel cannot survive this width. On a 414px screen the whole file renders
 * 231px tall and its lede lands at about seven pixels; a picture of words that
 * small says nothing to anybody, and said nothing to a screen reader at any
 * size. So the panel goes and `.pcs-signup__copy` is un-hidden underneath to
 * carry the same offer as real text, at a size a phone can read.
 *
 * The crop is exact rather than approximate. The photograph ends and the panel
 * begins at x 1066 of 1600 - found by walking the top row of the file for the
 * seam, not by eye - so a box at 1066:893 filled with `cover` from the left
 * shows precisely the photograph and precisely none of the panel, at every
 * width. The width is capped so a tablet does not turn one packshot into three
 * quarters of a screen; that leaves the band's mint down both sides, which is
 * the background it already had.
 */
@media (max-width: 1199px) {
	.pcs-signup--image .pcs-signup__stage {
		width: 100%;
		aspect-ratio: auto;
		min-height: 100vh;
		min-height: 100svh;
		display: flex;
		flex-direction: column;
		padding-bottom: var(--pc-8);
	}

	.pcs-signup--image .pcs-signup__picture {
		width: min(100%, calc(1.1937 * 55vh));
		width: min(100%, calc(1.1937 * 55svh));
		height: auto;
		flex: none;
		margin-inline: auto;
		aspect-ratio: 1066 / 893;
	}

	.pcs-signup--image .pcs-signup__img {
		object-position: left center;
	}

	/* Un-hidden: the artwork is no longer saying this. See the band above. */
	.pcs-signup__copy--quiet {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
	}

	.pcs-signup--image .pcs-signup__copy,
	.pcs-signup--image .pcs-signup__form {
		position: static;
		width: 100%;
		height: auto;
		max-width: var(--pc-wrap);
		margin-inline: auto;
		padding-inline: var(--pc-gutter);
	}

	.pcs-signup--image .pcs-signup__copy {
		margin-top: var(--pc-7);
	}

	.pcs-signup--image .pcs-signup__form {
		margin-top: var(--pc-5);
		max-width: 620px;
	}

	/* Back to a control that stands on its own, rather than one sized to cover
	   a rectangle of paint that is no longer on screen. */
	.pcs-signup--image .pcs-signup__form .pcs-field {
		height: auto;
		padding: 5px 5px 5px var(--pc-5);
		gap: var(--pc-3);
	}

	.pcs-signup--image .pcs-signup__form .pcs-btn {
		height: auto;
		min-height: 42px;
		padding-block: 12px;
		padding-inline: var(--pc-5);
		font-size: var(--pc-step-0);
	}

	.pcs-signup--image .pcs-signup__form .pcs-field__input {
		padding-block: 10px;
	}

	.pcs-signup--image .pcs-signup__small {
		color: var(--pc-muted);
	}
}

/* --------------------------------------------------------------- 16. footer */

.pcs-footer {
	background: var(--pc-ink);
	color: rgba(255, 255, 255, 0.72);
	padding-top: var(--pc-9);
}

.pcs-footer a {
	text-decoration: none;
}

.pcs-footer a:hover {
	color: var(--pc-mint);
}

.pcs-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: var(--pc-7);
	padding-bottom: var(--pc-8);
}

.pcs-footer .pcs-wordmark__name {
	color: #fff;
}

.pcs-footer .pcs-wordmark__tag {
	color: var(--pc-mint);
}

.pcs-footer__blurb {
	margin: var(--pc-4) 0 var(--pc-5);
	max-width: 38ch;
	font-size: var(--pc-step--1);
	font-weight: 300;
	line-height: 1.7;
}

/*
 * Contact details, between the blurb and the social row. The gap above the icons
 * is carried on this list rather than on the blurb, so hiding the details in the
 * customiser closes the space instead of leaving a hole where they were.
 */
.pcs-footer__contact {
	display: grid;
	gap: var(--pc-2);
	margin: 0 0 var(--pc-5);
	padding: 0;
	list-style: none;
	font-size: var(--pc-step--1);
	font-weight: 300;
}

.pcs-footer__contact a {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-2);
	/* An address and a long number both run past a phone's width if they are
	   allowed to. Breaking them is better than a page that scrolls sideways. */
	overflow-wrap: anywhere;
}

.pcs-footer__contact .pcs-icon {
	flex: none;
	color: var(--pc-mint);
}

.pcs-social {
	display: flex;
	gap: var(--pc-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcs-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	transition: border-color var(--pc-fast) var(--pc-ease),
		background var(--pc-fast) var(--pc-ease);
}

.pcs-social__link:hover {
	border-color: var(--pc-mint);
	background: rgba(127, 201, 169, 0.12);
}

.pcs-footer__heading {
	margin: 0 0 var(--pc-4);
	font-size: var(--pc-step--2);
	font-weight: 600;
	letter-spacing: var(--pc-wide);
	text-transform: uppercase;
	color: #fff;
}

.pcs-footer__list {
	display: grid;
	gap: var(--pc-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--pc-step--1);
	font-weight: 300;
}

.pcs-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--pc-4);
	padding-block: var(--pc-5);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--pc-step--2);
}

.pcs-footer__copy {
	margin: 0;
}

.pcs-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------- 17. pages, prose, posts */

.pcs-pagehead {
	padding-block: clamp(40px, 5vw, 72px) var(--pc-6);
	border-bottom: 1px solid var(--pc-line-soft);
}

.pcs-pagehead__title {
	margin: 0;
	font-size: var(--pc-step-5);
	font-weight: 300;
	max-width: 18ch;
}

.pcs-pagehead__lede {
	margin: var(--pc-4) 0 0;
	max-width: 60ch;
	font-size: var(--pc-step-1);
	color: var(--pc-ink-70);
}

.pcs-prose {
	max-width: 760px;
}

.pcs-prose h2 {
	margin-top: var(--pc-8);
	font-size: var(--pc-step-3);
	font-weight: 500;
}

.pcs-prose h3 {
	margin-top: var(--pc-7);
	font-size: var(--pc-step-2);
	font-weight: 600;
}

.pcs-prose p,
.pcs-prose li {
	font-size: var(--pc-step-1);
	line-height: 1.75;
	color: var(--pc-ink-70);
}

.pcs-prose__hero {
	width: 100%;
	border-radius: var(--pc-radius-lg);
	margin-bottom: var(--pc-7);
}

.pcs-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pc-7) var(--pc-5);
}

.pcs-post {
	display: flex;
	flex-direction: column;
	gap: var(--pc-3);
}

.pcs-post__media {
	border-radius: var(--pc-radius-lg);
	overflow: hidden;
	background: var(--pc-cream);
}

.pcs-post__img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.pcs-post__date {
	margin: 0;
	font-size: var(--pc-step--2);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pc-muted);
}

.pcs-post__title {
	margin: 0;
	font-size: var(--pc-step-2);
	font-weight: 500;
}

.pcs-post__title a {
	text-decoration: none;
}

.pcs-post__excerpt {
	margin: 0;
	color: var(--pc-ink-70);
	font-size: var(--pc-step-0);
}

.pcs-empty {
	display: grid;
	justify-items: start;
	gap: var(--pc-5);
	max-width: 560px;
	margin-bottom: var(--pc-8);
}

.pcs-pagination {
	margin-top: var(--pc-8);
}

.pcs-pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--pc-2);
	flex-wrap: wrap;
}

.pcs-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-2);
	min-width: 42px;
	height: 42px;
	padding-inline: var(--pc-3);
	justify-content: center;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-pill);
	text-decoration: none;
	font-size: var(--pc-step--1);
}

.pcs-pagination .page-numbers.current {
	background: var(--pc-ink);
	border-color: var(--pc-ink);
	color: #fff;
}

.pcs-postnav {
	display: flex;
	justify-content: space-between;
	gap: var(--pc-5);
	padding-block: var(--pc-8);
	border-top: 1px solid var(--pc-line-soft);
}

.pcs-postnav a {
	display: grid;
	gap: 4px;
	text-decoration: none;
	max-width: 40ch;
}

.pcs-postnav__label {
	font-size: var(--pc-step--2);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pc-muted);
}

.pcs-postnav__title {
	font-weight: 500;
}

/* ------------------------------------------------------------ 18. responsive */

@media (max-width: 1180px) {
	.pcs-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	:root {
		--pc-header-h: 60px;
	}

	.pcs-header__burger {
		display: inline-flex;
	}

	.pcs-header > .pcs-wrap > .pcs-nav {
		display: none;
	}

	.pcs-header__brand {
		margin-inline: auto 0;
	}

	.pcs-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--pc-6);
	}

	/* The packshot used to be pulled above the copy here, which put ~430px of
	   product photograph in front of the headline, the lede and both buttons on
	   the one screen small enough that it cost a whole viewport to scroll past.
	   The reading order is the same as the desktop one now. */
	.pcs-hero__media {
		max-width: 460px;
		margin-inline: auto;
	}

	.pcs-grid,
	.pcs-grid--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pcs-story {
		grid-template-columns: 1fr;
	}

	.pcs-story__media {
		max-width: 380px;
	}

	.pcs-signup__inner {
		grid-template-columns: 1fr;
		gap: var(--pc-5);
	}

	.pcs-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pcs-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.pcs-band {
		padding-block: var(--pc-8);
	}

	.pcs-bandhead {
		margin-bottom: var(--pc-6);
	}

	.pcs-bandhead__title {
		font-size: var(--pc-step-3);
	}

	.pcs-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pcs-grid,
	.pcs-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pc-5) var(--pc-3);
	}

	.pcs-card__img {
		padding: var(--pc-3);
	}

	.pcs-card__name {
		font-size: var(--pc-step-0);
	}

	.pcs-card__note {
		display: none;
	}

	/* Pinning both edges makes the pill as wide as the shot, so the centring
	   `translateX(-50%)` the base rule applies has to go with it - left alone it
	   dragged the pill half its own width off the side of the screen and took
	   the price with it. A pill the width of the shot can also wrap, which a
	   long product name needs. */
	.pcs-hero__tag {
		left: var(--pc-4);
		right: var(--pc-4);
		transform: none;
		white-space: normal;
	}

	/* The hero's five blocks lose their hierarchy on a phone if left alone, and
	   not because anything is wrong with them: the title is `--pc-step-5`, which
	   clamps down to 2.6rem (43px) on a narrow screen, while the promise
	   (step-2, 22px) and the signature (step-3, 28px) are fixed sizes that do
	   not move. Measured at 414 that left the promise nearly as large as the
	   signature and the title only half again bigger than either - five blocks
	   of almost one voice. Stepping the two fixed ones down puts the mark back
	   in charge. */
	.pcs-hero__promise {
		font-size: var(--pc-step-1);
		margin-bottom: var(--pc-5);
	}

	.pcs-hero__signature {
		font-size: var(--pc-step-2);
	}

	.pcs-posts {
		grid-template-columns: 1fr;
	}

	.pcs-footer__top {
		grid-template-columns: 1fr;
		gap: var(--pc-6);
	}

	.pcs-field {
		flex-wrap: wrap;
		border-radius: var(--pc-radius-lg);
		padding: var(--pc-3) var(--pc-4);
	}

	.pcs-field .pcs-btn {
		width: 100%;
	}

	.pcs-postnav {
		flex-direction: column;
	}
}

/* ----------------------------------------------------------------- 19. rtl */

/* `.pcs-hero__actions .pcs-icon` was the second selector here until 2026-09-17,
   when the hero's buttons were removed. There is no arrow in the hero to flip
   any more. */
[dir='rtl'] .pcs-textlink .pcs-icon {
	transform: scaleX(-1);
}

[dir='rtl'] .pcs-drawer__panel {
	animation-name: pcs-slide-rtl;
}

@keyframes pcs-slide-rtl {
	from { transform: translateX(100%); }
}

/* ---------------------------------------------------------------- 20. print */

@media print {
	.pcs-announce,
	.pcs-header,
	.pcs-drawer,
	.pcs-signup,
	.pcs-footer,
	.pcs-card__quick {
		display: none !important;
	}
}

/* ---------------------------------------------------------------- banner */

/*
 * A full-bleed image band, directly under the first product rail.
 *
 * `.pcs-band` gives every other band vertical padding and a centred `.pcs-wrap`
 * inside it. This one wants neither: the picture runs edge to edge and carries
 * its own margins, so the padding is taken back off rather than the band being
 * built from scratch - a banner is still a band and should keep the rhythm of
 * the section spacing around it.
 */
.pcs-band--banner {
	padding-block: 0;
	overflow: hidden;
	background: var(--pc-cream);
}

.pcs-banner__link {
	display: block;
}

.pcs-banner__img {
	display: block;
	width: 100%;
	height: auto;
	/* Without this a wide banner on a phone becomes a thin illegible strip, and a
	   tall one becomes a wall. The crop keeps a readable height and centres on
	   the product rather than on the geometric middle, which on these banners is
	   empty background. */
	object-fit: cover;
	object-position: center;

	/* A ceiling, because the band takes whatever file it is handed. A portrait
	   image dropped in during testing rendered 1623px tall - a screen and a half
	   of one picture, with the rest of the page pushed below it. Capped, the same
	   file crops instead of taking the page over.

	   820, not 620: the banner supplied is 2243x701 (3.2:1), which needs 800px of
	   height on a 2560px monitor. At 620 that monitor lost 22% of the picture off
	   the top and bottom - and the claim bubbles sit near those edges. The cap is
	   only here to stop a tall image, so it is set just clear of what a real
	   banner needs rather than at a number that quietly crops the intended one. */
	max-height: min(70vh, 820px);
}

/* `<picture>` is an inline box by default; without this it sits on the text
   baseline and leaves a few pixels of background under the image. */
.pcs-band--banner picture {
	display: block;
}

@media (max-width: 720px) {
	/* With only the wide file to work with, a phone renders it 129px tall - a
	   strip whose lettering is about seven pixels high. The floor forces a
	   readable height and lets `cover` take the sides instead. */
	.pcs-banner__img {
		min-height: 300px;
		max-height: 60vh;
	}

	/* With a narrow file for phones there is nothing to force: it is already
	   close to square, so the floor comes off and the whole picture shows. The
	   ceiling stays, so a tall file still cannot take the page over. */
	.pcs-banner--has-mobile .pcs-banner__img {
		min-height: 0;
	}
}

/* -------------------------------------------------------------------- faq */

/*
 * Eighty-seven questions in nineteen groups. The whole design problem here is
 * that the page is long: everything below is about making it scannable closed
 * rather than pretty open.
 */

.pcs-faq {
	max-width: 860px;
}

/* The section index. Chips rather than a list, because nineteen list items is
   a screen of its own before the questions have even started. */
.pcs-faq__jump {
	margin-bottom: var(--pc-8);
	padding: var(--pc-5);
	background: var(--pc-mint-wash);
	border-radius: var(--pc-radius-lg);
}

.pcs-faq__jumplabel {
	margin: 0 0 var(--pc-4);
	font-size: var(--pc-step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pc-ink-70);
}

.pcs-faq__jumplist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcs-faq__jumplink {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	background: var(--pc-paper);
	border: 1px solid var(--pc-line-soft);
	border-radius: var(--pc-radius-pill);
	font-size: var(--pc-step--1);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--pc-fast) var(--pc-ease);
}

.pcs-faq__jumplink:hover,
.pcs-faq__jumplink:focus-visible {
	border-color: currentColor;
}

.pcs-faq__jumpcount {
	font-size: var(--pc-step--2);
	color: var(--pc-muted);
	font-variant-numeric: tabular-nums;
}

.pcs-faq__group {
	margin-bottom: var(--pc-8);
	/* A jumped-to heading lands under the sticky header without this. */
	scroll-margin-top: 110px;
}

.pcs-faq__heading {
	margin: 0 0 var(--pc-4);
	font-size: var(--pc-step-2);
	font-weight: 600;
}

.pcs-faq__item {
	border-bottom: 1px solid var(--pc-line-soft);
}

.pcs-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--pc-4);
	padding: var(--pc-4) 0;
	cursor: pointer;
	font-size: var(--pc-step-1);
	line-height: 1.5;
	/* Safari draws its own triangle and ignores list-style on the summary
	   itself; this is the one selector that removes it there. */
	list-style: none;
}

.pcs-faq__q::-webkit-details-marker {
	display: none;
}

.pcs-faq__q:hover .pcs-faq__qtext {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pcs-faq__qtext {
	flex: 1 1 auto;
}

.pcs-faq__caret {
	flex: 0 0 auto;
	margin-top: 4px;
	color: var(--pc-muted);
	transition: transform var(--pc-fast) var(--pc-ease);
}

.pcs-faq__item[open] .pcs-faq__caret {
	transform: rotate(180deg);
}

.pcs-faq__a {
	padding: 0 0 var(--pc-5);
	/* Clear of the caret, so an open answer lines up with its question rather
	   than running the full width under it. */
	padding-right: 32px;
}

.pcs-faq__a p {
	margin: 0;
	font-size: var(--pc-step-0);
	line-height: 1.75;
	color: var(--pc-ink-70);
}

.pcs-faq__note {
	margin: var(--pc-8) 0 0;
	padding: var(--pc-5);
	background: var(--pc-mint-wash);
	border-radius: var(--pc-radius-lg);
	font-size: var(--pc-step--1);
	line-height: 1.7;
	color: var(--pc-ink-70);
}

.pcs-faq__ask {
	margin: var(--pc-5) 0 0;
	font-size: var(--pc-step-0);
}

.pcs-faq__body {
	margin-top: var(--pc-8);
}

@media (prefers-reduced-motion: reduce) {
	.pcs-faq__caret {
		transition: none;
	}
}

/* ------------------------------------------------- story band slideshow */

/*
 * The owner's pictures in "Who makes this". Nothing here is shared with
 * `.pcs-story__img`: that one is a packshot printed onto the white card with a
 * multiply blend and an edge mask, and these are photographs that have to fill
 * the card instead.
 *
 * Square, because the pictures supplied are - three are exactly 1:1, the other
 * two 0.91 and 0.80. A square box crops those two by 9% and 20% top and bottom.
 * The card's usual 4:5 would have taken 20% off the *sides* of all three square
 * ones, which is nearly twice as much picture lost.
 */
.pcs-story--slides .pcs-story__media {
	background: transparent;
	overflow: visible;
}

.pcs-slides {
	position: relative;
}

.pcs-slides__stage {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--pc-radius-lg);
	overflow: hidden;
	background: var(--pc-paper);
}

.pcs-slides__item {
	position: absolute;
	inset: 0;
	opacity: 0;
	/* The duration comes from story.php, which works it out from how long each
	   picture holds - see the note there. 600ms is the default and the ceiling. */
	transition: opacity var(--pcs-slide-fade, 600ms) var(--pc-ease);
	/* Not display:none - a cross-fade needs both frames painted at once, and a
	   hidden box cannot be faded from. Pointer events follow the opacity so an
	   invisible slide cannot swallow a click meant for the one on top. */
	pointer-events: none;
}

.pcs-slides__item.is-active {
	opacity: 1;
	pointer-events: auto;
}

.pcs-slides__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.pcs-slides__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: var(--pc-4);
}

.pcs-slides__dot {
	position: relative;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pc-line);
	cursor: pointer;
	transition: background var(--pc-fast) var(--pc-ease), transform var(--pc-fast) var(--pc-ease);
}

/* The dot is 8px, well under the 24px anyone should have to hit. It keeps its
   size and grows an invisible target around itself. */
.pcs-slides__dot::before {
	content: "";
	position: absolute;
	inset: -8px;
}

.pcs-slides__dot:hover {
	background: var(--pc-muted);
}

.pcs-slides__dot.is-active {
	background: var(--pc-ink);
	transform: scale(1.35);
}

@media (prefers-reduced-motion: reduce) {
	.pcs-slides__item,
	.pcs-slides__dot {
		transition: none;
	}
}

/* ------------------------------------------------------- benefit slides */

/*
 * The owner's benefit lines on a product page, as slides on the same rail the
 * home page uses. Cards rather than bare sentences: on a scrolling track the
 * edge of a card is what tells the eye there is another one after it.
 */
.pcs-band--benefits {
	padding-block: var(--pc-8);
	background: var(--pc-mint-wash);
}

.pcs-slide {
	flex: 0 0 auto;
	/* Wide enough for two lines of the longest bullet supplied, narrow enough
	   that a phone shows the next slide beginning. */
	width: min(290px, 78vw);
	padding: var(--pc-5);
	background: var(--pc-paper);
	border-radius: var(--pc-radius-lg);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: var(--pc-3);
}

.pcs-slide__n {
	font-size: var(--pc-step--2);
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--pc-muted);
	font-variant-numeric: tabular-nums;
}

.pcs-slide__text {
	margin: 0;
	font-size: var(--pc-step-1);
	line-height: 1.55;
}

/* --------------------------------------------------- shipping calculator */

/* The line that stands in for the delivery charge while the address is
   incomplete. Without it the cart row reads "Shipping" followed by a form and
   no figure, which looks like something failed rather than like a step. */
.pcs-calc__prompt {
	margin: 0 0 var(--pc-3);
	font-size: var(--pc-step--1);
	line-height: 1.6;
	color: var(--pc-ink-70);
}

/* ---------------------------------------------------------------------------
 * 16. Language switcher
 *
 * A <details>, so it opens, closes and takes the keyboard without a line of
 * JavaScript. The marker is removed in three ways because Safari still wants
 * the WebKit pseudo-element and older engines want `display: none` on the
 * summary itself.
 * ------------------------------------------------------------------------- */

.pcs-lang {
	position: relative;
}

.pcs-lang__button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border-radius: var(--pc-radius-sm, 6px);
	cursor: pointer;
	list-style: none;
	font-size: var(--pc-step--1);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--pc-ink);
	user-select: none;
}

.pcs-lang__button::-webkit-details-marker { display: none; }
.pcs-lang__button::marker { content: ''; }

.pcs-lang__button:hover,
.pcs-lang[open] .pcs-lang__button {
	background: var(--pc-mint-pale, rgba(0, 0, 0, 0.04));
}

.pcs-lang__caret {
	transition: transform 0.15s ease;
}

.pcs-lang[open] .pcs-lang__caret {
	transform: rotate(180deg);
}

.pcs-lang__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 60;
	min-width: 104px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--pc-line, rgba(0, 0, 0, 0.1));
	border-radius: var(--pc-radius, 10px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.pcs-lang__menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--pc-radius-sm, 6px);
	text-decoration: none;
	font-size: var(--pc-step--1);
	font-weight: 600;
	color: var(--pc-ink);
}

.pcs-lang__menu a:hover,
.pcs-lang__menu a:focus-visible {
	background: var(--pc-mint-pale, rgba(0, 0, 0, 0.05));
}

/* On a phone the header is tight; the code carries the meaning, the globe is
   decoration, so the globe goes rather than the word. */
@media (max-width: 560px) {
	.pcs-lang__button > svg:first-child { display: none; }
	.pcs-lang__button { padding-inline: 4px; }
}