@charset "UTF-8";
/* ==========================================================================
   Ar-Rayyaan Naturals — main stylesheet
   Shared verbatim by the WordPress theme and the static preview.

   Structure and token names deliberately mirror bragg.com (the client's
   reference): the --t-h, --t-b and --t-l type slots, the --s spacing ramp,
   the --e Penner easing set, the pill header and the dotted hairline are all
   lifted from its system, then re-skinned to the Ar-Rayyaan palette.

   Careful with asterisks in these comments: an accidental "* /" sequence
   (written without the space) closes the comment early. One here silently ate
   the Fraunces @font-face for most of this build — headings fell back to a
   system serif and nothing looked broken enough to notice.

   Two deliberate departures from the reference, both on accessibility grounds:
   body copy runs 1.55 leading rather than Bragg's 1.25 (WCAG 1.4.12), and every
   box uses CSS logical properties so the Arabic on the labels can be mirrored
   without a second stylesheet.
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */

@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Libre Franklin";
	src: url("../fonts/libre-franklin-variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* 2. Tokens --------------------------------------------------------------- */

:root {
	/* Brand — sampled from the client's label artwork and logo.
	   green-700 is the label ground, green-500 the logo wordmark,
	   leaf the bright half of the logo mark, gold the "NATURAL PRODUCTS" rule. */
	--cr-green-900: #06301a;
	--cr-green-800: #0a4423;
	--cr-green-700: #0c5a2a;
	--cr-green-600: #14742f;
	--cr-green-500: #22a02c;
	--cr-leaf: #4cc94c;
	--cr-green-50: #eaf4ea;

	--cr-gold: #c9a227;
	--cr-gold-600: #a8851a;
	--cr-gold-400: #f2c511;
	--cr-gold-50: #fbf3d8;

	--cr-brown-900: #2a1a0e;
	--cr-brown-700: #3a2414;
	--cr-brown-400: #8a6a48;
	--cr-honey: #c87a1e;

	--cr-white: #ffffff;
	--cr-cream: #fbf8f0;
	--cr-ink: #16210f;

	--cr-black-50: rgba(22, 33, 15, 0.5);
	--cr-black-25: rgba(22, 33, 15, 0.25);
	--cr-black-10: rgba(22, 33, 15, 0.1);
	--cr-white-50: rgba(255, 255, 255, 0.5);
	--cr-white-25: rgba(255, 255, 255, 0.25);
	--cr-white-10: rgba(255, 255, 255, 0.1);

	/* Per-section theming. Sections carry data-theme="…" and re-point these. */
	--theme-bg: var(--cr-white);
	--theme-fg: var(--cr-ink);
	--theme-muted: var(--cr-black-50);
	--theme-accent: var(--cr-green-700);
	--theme-hairline: var(--cr-black-25);

	/* Easing — the Penner set, same names Bragg uses */
	--e-inOut-sin: cubic-bezier(0.37, 0, 0.63, 1);
	--e-inOut-quad: cubic-bezier(0.45, 0, 0.55, 1);
	--e-inOut-cubic: cubic-bezier(0.65, 0, 0.35, 1);
	--e-inOut-quart: cubic-bezier(0.76, 0, 0.24, 1);
	--e-inOut-quint: cubic-bezier(0.83, 0, 0.17, 1);
	--e-inOut-expo: cubic-bezier(0.87, 0, 0.13, 1);
	--e-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

	/* Type slots */
	--f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--f-ui: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

	--t-h-1: 580 clamp(2.75rem, 1.4rem + 5.4vw, 5rem) / 1.06 var(--f-display);
	--t-h-2: 580 clamp(2rem, 1.35rem + 2.6vw, 3rem) / 1.1 var(--f-display);
	--t-h-3: 580 clamp(1.35rem, 1.15rem + 0.8vw, 1.5rem) / 1.15 var(--f-display);
	--t-h-4: 580 1rem/1.2 var(--f-display);
	--t-b-1: 450 1.0625rem/1.55 var(--f-ui);
	--t-b-2: 450 0.9375rem/1.55 var(--f-ui);
	--t-l-1: 750 0.9375rem/1.25 var(--f-ui);
	--t-l-2: 750 0.75rem/1.25 var(--f-ui);

	/* Fraunces variation defaults — SOFT/WONK are what pull it away from a
	   stiff Georgia and toward Season Mix's warmth. */
	--vf-display: "SOFT" 28, "WONK" 1;

	/* Spacing ramp */
	--s-4: 4px;
	--s-6: 6px;
	--s-8: 8px;
	--s-10: 10px;
	--s-12: 12px;
	--s-16: 16px;
	--s-24: 24px;
	--s-32: 32px;
	--s-48: 48px;
	--s-64: 64px;
	--s-96: 96px;

	/* Page gutter. The reference site uses min(2.5vw, 20px), which gives only
	   20px of breathing room on a 1280-1440 laptop — the header and hero read
	   as having no margin at all. Above 1600px the 1500px content cap creates
	   margin on its own, so the problem is specific to laptop widths. A clamp
	   fixes both ends: 20px minimum on a phone, scaling to 60px on a laptop. */
	--s-contain: clamp(20px, 4vw, 60px);
	--s-sm: 900px;
	--s-md: 1200px;
	--s-lg: 1500px;
	--s-gap: 24px;
	--s-section: clamp(56px, 7vw, 96px);
	--s-edge: 16px;

	--width-sm: min(100vw - calc(var(--s-contain) * 2), var(--s-sm));
	--width-md: min(100vw - calc(var(--s-contain) * 2), var(--s-md));
	--width-lg: min(100vw - calc(var(--s-contain) * 2), var(--s-lg));

	/* Radii */
	--br: 4px;
	--br-md: 8px;
	--br-lg: 16px;
	--br-xl: 28px;
	--br-rounded: 100vw;

	/* The reference's signature hairlines */
	--border-dotted: 1px dotted var(--theme-hairline);
	--border-dashed: 1px dashed var(--theme-hairline);
	--border-hair: 1px solid var(--theme-hairline);

	--z-header: 120;
	--z-overlay: 100;
	--z-drawer: 130;
	--z-dialog: 140;

	--header-h: 76px;
}

/* Section themes. Every band on the page opts into one of these, the way
   Bragg's data-theme-color drives its yellow-light / red-light / white bands. */
[data-theme="cream"] {
	--theme-bg: var(--cr-cream);
	--theme-fg: var(--cr-ink);
	--theme-muted: var(--cr-black-50);
	--theme-accent: var(--cr-green-700);
	--theme-hairline: var(--cr-black-25);
}

[data-theme="green"] {
	--theme-bg: var(--cr-green-900);
	--theme-fg: var(--cr-white);
	--theme-muted: rgba(255, 255, 255, 0.72);
	--theme-accent: var(--cr-gold-400);
	--theme-hairline: var(--cr-white-25);
}

[data-theme="green-mid"] {
	--theme-bg: var(--cr-green-700);
	--theme-fg: var(--cr-white);
	--theme-muted: rgba(255, 255, 255, 0.72);
	--theme-accent: var(--cr-gold-400);
	--theme-hairline: var(--cr-white-25);
}

[data-theme="gold"] {
	--theme-bg: var(--cr-gold-50);
	--theme-fg: var(--cr-brown-900);
	--theme-muted: rgba(42, 26, 14, 0.62);
	--theme-accent: var(--cr-green-700);
	--theme-hairline: rgba(42, 26, 14, 0.25);
}

[data-theme="brown"] {
	--theme-bg: var(--cr-brown-900);
	--theme-fg: var(--cr-cream);
	--theme-muted: rgba(251, 248, 240, 0.72);
	--theme-accent: var(--cr-gold-400);
	--theme-hairline: var(--cr-white-25);
}

[data-theme] {
	background: var(--theme-bg);
	color: var(--theme-fg);
}

/* 3. Reset ---------------------------------------------------------------- */

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

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

body {
	margin: 0;
	font: var(--t-b-1);
	color: var(--cr-ink);
	background: var(--cr-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.is-locked {
	overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

a {
	color: inherit;
	text-decoration: none;
}

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

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

:focus-visible {
	outline: 3px solid var(--cr-gold-400);
	outline-offset: 3px;
	border-radius: var(--br);
}

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

.skip-link {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: var(--s-16);
	z-index: 999;
	background: var(--cr-green-900);
	color: var(--cr-white);
	padding: var(--s-12) var(--s-16);
	border-radius: var(--br-md);
	font: var(--t-l-1);
	transition: inset-block-start 0.2s var(--e-out-expo);
}

.skip-link:focus {
	inset-block-start: var(--s-16);
}

/* 4. Typography ----------------------------------------------------------- */

.t-h-1,
.t-h-2,
.t-h-3,
.t-h-4 {
	font-variation-settings: var(--vf-display);
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.t-h-1 {
	font: var(--t-h-1);
}

.t-h-2 {
	font: var(--t-h-2);
}

.t-h-3 {
	font: var(--t-h-3);
}

.t-h-4 {
	font: var(--t-h-4);
}

.t-b-1 {
	font: var(--t-b-1);
}

.t-b-2 {
	font: var(--t-b-2);
}

.t-l-1 {
	font: var(--t-l-1);
	letter-spacing: 0.01em;
}

.t-l-2 {
	font: var(--t-l-2);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.t-measure {
	max-inline-size: 62ch;
}

.t-muted {
	color: var(--theme-muted);
}

.t-accent {
	color: var(--theme-accent);
}

.t-center {
	text-align: center;
}

/* The one type flourish: the closing words of a headline set in the gold,
   italic-ish soft cut. Applied by wrapping them in <em>. */
.t-h-1 em,
.t-h-2 em,
.t-h-3 em {
	font-style: normal;
	color: var(--theme-accent);
	font-variation-settings: "SOFT" 100, "WONK" 1;
}

/* 5. Layout --------------------------------------------------------------- */

.wrap {
	inline-size: var(--width-lg);
	margin-inline: auto;
}

.wrap-md {
	inline-size: var(--width-md);
	margin-inline: auto;
}

.wrap-sm {
	inline-size: var(--width-sm);
	margin-inline: auto;
}

.section {
	padding-block: var(--s-section);
}

.section-sm {
	padding-block: clamp(32px, 4vw, 56px);
}

.f-h {
	display: flex;
	flex-direction: row;
}

.f-v {
	display: flex;
	flex-direction: column;
}

.f-a-c {
	align-items: center;
}

.f-a-s {
	align-items: flex-start;
}

.f-a-e {
	align-items: flex-end;
}

.f-j-c {
	justify-content: center;
}

.f-j-b {
	justify-content: space-between;
}

.f-wrap {
	flex-wrap: wrap;
}

.gap-4 { gap: var(--s-4); }
.gap-8 { gap: var(--s-8); }
.gap-12 { gap: var(--s-12); }
.gap-16 { gap: var(--s-16); }
.gap-24 { gap: var(--s-24); }
.gap-32 { gap: var(--s-32); }
.gap-48 { gap: var(--s-48); }

.g {
	display: grid;
	gap: var(--s-gap);
}

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

.g-auto {
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

@media (max-width: 900px) {
	.g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.g-4,
	.g-3,
	.g-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Section heading block */
.s-head {
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	margin-block-end: var(--s-48);
}

.s-head.is-split {
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-32);
	flex-wrap: wrap;
}

.eyebrow {
	font: var(--t-l-2);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--theme-accent);
	display: inline-flex;
	align-items: center;
	gap: var(--s-8);
}

.eyebrow::before {
	content: "";
	inline-size: 22px;
	block-size: 1px;
	background: currentColor;
	flex: none;
}

/* 6. Motion --------------------------------------------------------------- */

/* Scroll reveal — matches the reference's js-animate-fade-in / js-animate-text
   pair. JS adds .is-in when the element enters the viewport. */
[data-animate] {
	--animate-delay: 0ms;
	--animate-duration: 800ms;
}

[data-animate="fade"] {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition:
		opacity var(--animate-duration) var(--e-out-expo) var(--animate-delay),
		transform var(--animate-duration) var(--e-out-expo) var(--animate-delay);
}

[data-animate="fade"].is-in {
	opacity: 1;
	transform: none;
}

/* Split-text: JS wraps each word in <span class="word"><i>word</i></span> and
   the inner <i> slides up out of the clipping mask. */
.split-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-block-end: 0.12em;
	margin-block-end: -0.12em;
}

.split-word > i {
	display: inline-block;
	font-style: inherit;
	transform: translate3d(0, 110%, 0);
	transition: transform 900ms var(--e-out-expo) var(--word-delay, 0ms);
}

[data-animate="text"].is-in .split-word > i {
	transform: none;
}

/* SVG draw-on, for the leaf mark and the underline squiggles */
[data-animate="draw"] path {
	stroke-dasharray: var(--len, 400);
	stroke-dashoffset: var(--len, 400);
	transition: stroke-dashoffset 1.4s var(--e-inOut-quart) var(--animate-delay);
}

[data-animate="draw"].is-in path {
	stroke-dashoffset: 0;
}

/* Image reveal — the mask wipes upward and the image settles from a slight
   zoom, which is what gives the reference its "expensive" feel. */
.media-reveal {
	overflow: hidden;
	border-radius: var(--br-lg);
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.1s var(--e-inOut-quart) var(--animate-delay);
}

.media-reveal.is-in {
	clip-path: inset(0 0 0 0);
}

.media-reveal img {
	inline-size: 100%;
	transform: scale(1.12);
	transition: transform 1.4s var(--e-out-expo) var(--animate-delay);
}

.media-reveal.is-in img {
	transform: scale(1);
}

/* Page transition. A green curtain wipes across on navigate, then lifts on
   arrival — this is the "flow between pages" the brief asks for. */
.page-curtain {
	position: fixed;
	inset: 0;
	z-index: var(--z-dialog);
	background: var(--cr-green-900);
	pointer-events: none;
	transform: translate3d(0, 100%, 0);
	display: grid;
	place-items: center;
}

.page-curtain__mark {
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.3s var(--e-inOut-sin), transform 0.5s var(--e-out-expo);
}

/* leaving: curtain rises from the bottom to cover */
body.is-leaving .page-curtain {
	transform: translate3d(0, 0, 0);
	transition: transform 0.62s var(--e-inOut-quart);
}

body.is-leaving .page-curtain__mark {
	opacity: 1;
	transform: scale(1);
	transition-delay: 0.24s;
}

/* arriving: curtain starts covering and lifts off the top */
body.is-arriving .page-curtain {
	transform: translate3d(0, 0, 0);
}

body.is-arriving.is-revealed .page-curtain {
	transform: translate3d(0, -100%, 0);
	transition: transform 0.72s var(--e-inOut-quart);
}

.page-main {
	opacity: 1;
	transition: opacity 0.4s var(--e-inOut-sin);
}

body.is-leaving .page-main {
	opacity: 0.35;
}

/* Marquee — the reference's auto-scrolling embla strip, done in pure CSS */
.marquee {
	overflow: hidden;
	display: flex;
	user-select: none;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--s-48);
	padding-inline-end: var(--s-48);
	animation: marquee 34s linear infinite;
}

.marquee:hover .marquee__track {
	animation-play-state: paused;
}

@keyframes marquee {
	to {
		transform: translate3d(-100%, 0, 0);
	}
}

.marquee__item {
	font: var(--t-h-3);
	font-variation-settings: var(--vf-display);
	color: var(--theme-fg);
	display: inline-flex;
	align-items: center;
	gap: var(--s-16);
	white-space: nowrap;
}

.marquee__item::after {
	content: "";
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: var(--theme-accent);
	flex: none;
}

@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;
	}

	[data-animate],
	.media-reveal {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}

	.split-word > i {
		transform: none !important;
	}

	.page-curtain {
		display: none;
	}
}

/* 7. Header ---------------------------------------------------------------
   One solid white bar: logo left, navigation running on from it, and the two
   actions pinned right. It replaces an earlier floating-pill header lifted
   from the reference site — with the client's real logo in it, the pills read
   as three disconnected islands rather than one masthead.
   ---------------------------------------------------------------------- */

.g-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--z-header);
	background: var(--cr-white);
	border-block-end: 1px solid var(--cr-black-10);
	transition: transform 0.5s var(--e-inOut-quart), box-shadow 0.3s ease;
}

/* Lifts slightly once the page moves, so the bar separates from the content
   passing under it. */
.g-header.is-stuck {
	box-shadow: 0 2px 18px rgba(6, 48, 26, 0.1);
}

/* Hides on scroll-down, returns on scroll-up. */
.g-header.is-hidden {
	transform: translate3d(0, -100%, 0);
}

.g-header__inner {
	inline-size: var(--width-lg);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: var(--s-16);
	min-block-size: var(--header-h);
}

/* Logo: sized by height so any aspect ratio fits, never squashed. */
.g-header__logo {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding-block: var(--s-8);
	margin-inline-end: var(--s-8);
}

.g-header__nav {
	min-inline-size: 0;
}

.g-header__list {
	display: flex;
	align-items: center;
	gap: var(--s-2, 2px);
	flex-wrap: nowrap;
}

/* Pushed right, and stays there however long the menu gets. */
.g-header__actions {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: var(--s-8);
	flex: none;
}

.g-header__item {
	display: inline-flex;
	align-items: center;
	gap: var(--s-8);
	min-block-size: 42px;
	padding-inline: var(--s-14, 14px);
	border-radius: var(--br-rounded);
	font: var(--t-l-1);
	color: var(--cr-green-900);
	position: relative;
	transition: background 0.25s var(--e-inOut-sin), color 0.25s var(--e-inOut-sin);
	white-space: nowrap;
}

.g-header__item:hover,
.g-header__item[aria-expanded="true"] {
	background: var(--cr-green-50);
	color: var(--cr-green-700);
}

.g-header__item.is-current::after {
	content: "";
	position: absolute;
	inset-inline: var(--s-14, 14px);
	inset-block-end: 6px;
	block-size: 2px;
	background: var(--cr-gold);
	border-radius: 2px;
}

.g-header__item__icon {
	inline-size: 18px;
	block-size: 18px;
	flex: none;
}

/* The two highlighted actions. Green then gold rather than two identical
   fills: they are a pair, but "find a store" is the primary journey and the
   phone number is the shortcut, and a matched pair of golds flattens that. */
.g-header__find,
.g-header__phone {
	min-block-size: 44px;
	padding-inline: var(--s-16);
	font: var(--t-l-1);
}

.g-header__find {
	background: var(--cr-green-700);
	color: var(--cr-white);
}

.g-header__find:hover {
	background: var(--cr-green-900);
	color: var(--cr-white);
}

.g-header__phone {
	background: var(--cr-gold-400);
	color: var(--cr-green-900);
}

.g-header__phone:hover {
	background: var(--cr-gold);
	color: var(--cr-green-900);
}

/* Mega dropdown — opacity+visibility, same as the reference */
.g-header__list__item {
	position: static;
}

.g-header__dropdown {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	background: var(--cr-white);
	border-block-start: 1px solid var(--cr-black-10);
	box-shadow: 0 18px 48px rgba(6, 48, 26, 0.18);
	padding: var(--s-32) 0;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, -8px, 0);
	transition:
		opacity 0.3s var(--e-inOut-sin),
		visibility 0.3s var(--e-inOut-sin),
		transform 0.3s var(--e-inOut-sin);
}

.g-header__list__item.is-open .g-header__dropdown {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.g-header__dropdown__grid {
	inline-size: var(--width-lg);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-16);
}

.g-header__dropdown__promo {
	background: var(--cr-green-50);
	border-radius: var(--br-md);
	padding: var(--s-24);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--s-16);
}

.c-item-link {
	display: flex;
	flex-direction: column;
	gap: var(--s-8);
	padding: var(--s-12);
	border-radius: var(--br-md);
	transition: background 0.25s var(--e-inOut-sin);
}

.c-item-link:hover {
	background: var(--cr-green-50);
}

/* NOTE — every image box below uses `position:absolute; inset:0` rather than
   `block-size:100%`. A percentage height does not resolve against a parent
   whose height comes from `aspect-ratio`: Chrome treats that height as
   indefinite, the percentage falls back to auto, and the image renders at its
   intrinsic ratio, overflowing the frame by ~46%. Insetting an absolutely
   positioned child sidesteps the percentage entirely. */
.c-item-link__media {
	aspect-ratio: 1;
	border-radius: var(--br);
	background: var(--cr-cream);
	overflow: hidden;
	position: relative;
}

.c-item-link__media img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	transition: transform 0.4s var(--e-out-expo);
}

.c-item-link:hover .c-item-link__media img {
	transform: scale(1.06);
}

/* Mobile */
.g-header__burger {
	display: none;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--br-rounded);
	place-items: center;
	flex: none;
}

.g-header__burger span {
	display: block;
	inline-size: 18px;
	block-size: 2px;
	background: var(--cr-green-900);
	border-radius: 2px;
	transition: transform 0.4s var(--e-out-expo), opacity 0.2s;
}

.g-header__burger span + span {
	margin-block-start: 5px;
}

body.is-menu-open .g-header__burger span:nth-child(1) {
	transform: translateY(3.5px) rotate(45deg);
}

body.is-menu-open .g-header__burger span:nth-child(2) {
	transform: translateY(-3.5px) rotate(-45deg);
}

.g-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	background: var(--cr-green-900);
	color: var(--cr-white);
	padding: calc(var(--header-h) + var(--s-32)) var(--s-24) var(--s-32);
	overflow-y: auto;
	clip-path: circle(0% at calc(100% - 44px) 44px);
	transition: clip-path 0.7s var(--e-inOut-quart);
	visibility: hidden;
}

body.is-menu-open .g-drawer {
	clip-path: circle(150% at calc(100% - 44px) 44px);
	visibility: visible;
}

/* wp_nav_menu wraps the drawer links in a <ul>, so the list needs resetting
   back to the plain stack the static markup uses. */
.g-drawer__menu {
	display: flex;
	flex-direction: column;
}

.g-drawer__link {
	display: block;
	font: var(--t-h-2);
	font-variation-settings: var(--vf-display);
	padding-block: var(--s-12);
	border-block-end: var(--border-dotted);
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition: opacity 0.5s var(--e-out-expo), transform 0.5s var(--e-out-expo);
}

body.is-menu-open .g-drawer__link {
	opacity: 1;
	transform: none;
}

/* The nav collapses to the drawer before the links would start colliding with
   the actions on the right. */
@media (max-width: 1120px) {
	.g-header__nav {
		display: none;
	}

	.g-header__burger {
		display: grid;
	}

	.g-header__actions {
		gap: var(--s-6);
	}
}

@media (max-width: 720px) {
	.g-header__find .g-header__label,
	.g-header__phone .g-header__label {
		display: none;
	}

	.g-header__find,
	.g-header__phone {
		padding-inline: var(--s-12);
	}
}

/* Brand lockup — leaf mark + wordmark. Kept as live text rather than a flat
   logo file so it stays crisp, selectable and translatable, and so the mark can
   be recoloured per theme through --mark-dark / --mark-bright. */
.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--s-10);
}

.brand__mark {
	inline-size: 26px;
	block-size: 26px;
	flex: none;
	--mark-dark: var(--cr-green-500);
	--mark-bright: var(--cr-leaf);
}

.brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.brand__name {
	font: 750 1.0625rem/1 var(--f-ui);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--cr-green-700);
	white-space: nowrap;
}

.brand__sub {
	font: 600 0.5rem/1 var(--f-ui);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cr-gold-600);
	margin-block-start: 4px;
	white-space: nowrap;
}

.brand--light .brand__name {
	color: var(--cr-white);
}

.brand--light .brand__sub {
	color: var(--cr-gold-400);
}

.brand--light .brand__mark {
	--mark-dark: var(--cr-white);
	--mark-bright: var(--cr-gold-400);
}

/* Real logo file, used instead of the redrawn lockup once the client's own
   artwork is in assets/img/real/. Sized by height so any aspect ratio fits the
   header pill without distorting. */
.brand-img {
	display: inline-flex;
	align-items: center;
}

/* The supplied logo is a STACKED lockup (leaf above the wordmark, roughly
   2:1). Sized to a typical 42px header height it comes out ~87px wide, which
   leaves "NATURAL PRODUCTS" about 6px tall and unreadable. It needs width, so
   the badge is deliberately tall — the reference site's logo badge is
   prominent in the same way. */
.brand-img img {
	block-size: 58px;
	inline-size: auto;
	max-inline-size: 130px;
	object-fit: contain;
}

/* The supplied logo is drawn for light backgrounds: its green wordmark lands
   at about 4.2:1 on the footer's dark green, which reads as muddy even though
   logotypes are exempt from WCAG contrast. Rather than recolouring the client's
   mark, it sits on a white chip — which is how it appears on their own flyers. */
.brand-img--light {
	background: var(--cr-white);
	padding: var(--s-12) var(--s-16);
	border-radius: var(--br-lg);
	display: inline-flex;
}

.brand-img--light img {
	block-size: 64px;
	max-inline-size: 150px;
}

@media (max-width: 620px) {
	.brand-img img {
		block-size: 46px;
		max-inline-size: 104px;
	}
}

.brand--lg .brand__mark {
	inline-size: 44px;
	block-size: 44px;
}

.brand--lg .brand__name {
	font-size: 1.5rem;
}

.brand--lg .brand__sub {
	font-size: 0.6875rem;
}

/* The curtain mark is a bare SVG, not a .brand lockup */
.page-curtain__mark svg {
	inline-size: 76px;
	block-size: 76px;
	--mark-dark: var(--cr-white);
	--mark-bright: var(--cr-gold-400);
}

@media (max-width: 620px) {
	.tablet-up-only {
		display: none;
	}
}

/* 8. Buttons -------------------------------------------------------------- */

.c-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-8);
	min-block-size: 48px;
	padding-inline: var(--s-24);
	border-radius: var(--br-rounded);
	font: var(--t-l-1);
	text-align: center;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.35s var(--e-inOut-sin), border-color 0.35s var(--e-inOut-sin);
	border: 1px solid transparent;
}

/* Fill wipes up from the bottom on hover */
.c-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--btn-hover-bg, var(--cr-gold-400));
	transform: translate3d(0, 101%, 0);
	transition: transform 0.45s var(--e-inOut-quart);
}

.c-button:hover::before {
	transform: none;
}

.c-button--primary {
	background: var(--cr-green-700);
	color: var(--cr-white);
	--btn-hover-bg: var(--cr-gold-400);
}

.c-button--primary:hover {
	color: var(--cr-green-900);
}

.c-button--gold {
	background: var(--cr-gold-400);
	color: var(--cr-green-900);
	--btn-hover-bg: var(--cr-green-700);
}

.c-button--gold:hover {
	color: var(--cr-white);
}

.c-button--ghost {
	border-color: var(--theme-hairline);
	color: var(--theme-fg);
	--btn-hover-bg: var(--theme-fg);
}

.c-button--ghost:hover {
	color: var(--theme-bg);
	border-color: var(--theme-fg);
}

.c-button--sm {
	min-block-size: 40px;
	padding-inline: var(--s-16);
	font: var(--t-l-2);
	letter-spacing: 0.04em;
	text-transform: none;
}

.c-button__icon {
	inline-size: 16px;
	block-size: 16px;
	flex: none;
}

/* Text link with a rule that grows in from the left */
.c-link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-8);
	font: var(--t-l-1);
	color: var(--theme-accent);
	position: relative;
	padding-block-end: 2px;
	white-space: nowrap;
}

.c-link svg {
	inline-size: 16px;
	block-size: 16px;
	flex: none;
}

.c-link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: inline-start;
	transition: transform 0.4s var(--e-inOut-quart);
}

.c-link:hover::after {
	transform: scaleX(1);
}

.c-link svg {
	transition: transform 0.4s var(--e-out-expo);
}

.c-link:hover svg {
	transform: translateX(3px);
}

/* 9. Hero ----------------------------------------------------------------- */

.hero {
	position: relative;
	min-block-size: min(88vh, 760px);
	display: grid;
	align-items: end;
	/* The header is an opaque bar now, so the hero starts below it rather than
	   being pulled up underneath a floating one. */
	padding-block-start: var(--s-48);
	padding-block-end: var(--s-64);
	overflow: hidden;
	isolation: isolate;
	background: var(--cr-green-900);
	color: var(--cr-white);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(6, 48, 26, 0.55) 0%,
		rgba(6, 48, 26, 0.25) 38%,
		rgba(6, 48, 26, 0.88) 100%
	);
}

/* Slow ken-burns drift on the hero image */
.hero__media img {
	animation: heroDrift 22s var(--e-inOut-sin) infinite alternate;
}

@keyframes heroDrift {
	from {
		transform: scale(1.04) translate3d(0, 0, 0);
	}

	to {
		transform: scale(1.13) translate3d(-1.5%, -1.5%, 0);
	}
}

.hero__inner {
	inline-size: var(--width-lg);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--s-24);
	align-items: flex-start;
}

.hero__title {
	font: var(--t-h-1);
	font-variation-settings: var(--vf-display);
	letter-spacing: -0.02em;
	max-inline-size: 16ch;
}

.hero__title em {
	color: var(--cr-gold-400);
}

.hero__lede {
	max-inline-size: 46ch;
	color: rgba(255, 255, 255, 0.86);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-12);
	margin-block-start: var(--s-8);
}

@media (max-width: 620px) {
	/* 88vh of mostly-empty backdrop above bottom-aligned copy reads as a
	   loading failure on a phone. Shorter, and the headline lands sooner. */
	.hero {
		min-block-size: min(72vh, 560px);
		padding-block-end: var(--s-48);
	}
}

/* Scroll cue */
.hero__cue {
	position: absolute;
	inset-block-end: var(--s-24);
	inset-inline-end: var(--s-24);
	display: grid;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	border: 1px solid var(--cr-white-25);
	border-radius: 50%;
	color: var(--cr-white);
	animation: cueBob 2.4s var(--e-inOut-sin) infinite;
}

@keyframes cueBob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

/* 10. Cards + products ---------------------------------------------------- */

.p-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	background: var(--cr-white);
	border: var(--border-hair);
	border-radius: var(--br-lg);
	padding: var(--s-16);
	position: relative;
	overflow: hidden;
	transition:
		transform 0.45s var(--e-out-expo),
		box-shadow 0.45s var(--e-out-expo),
		border-color 0.35s ease;
	block-size: 100%;
}

.p-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(6, 48, 26, 0.14);
	border-color: var(--cr-green-500);
}

.p-card__media {
	aspect-ratio: 4 / 5;
	border-radius: var(--br-md);
	background: linear-gradient(170deg, var(--cr-green-50), var(--cr-cream));
	overflow: hidden;
	position: relative;
}

.p-card__media img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	padding: var(--s-16);
	transition: transform 0.6s var(--e-out-expo);
}

.p-card:hover .p-card__media img {
	transform: scale(1.07) translateY(-4px);
}

.p-card__flag {
	position: absolute;
	inset-block-start: var(--s-12);
	inset-inline-start: var(--s-12);
	background: var(--cr-gold-400);
	color: var(--cr-green-900);
	font: var(--t-l-2);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 5px var(--s-10);
	border-radius: var(--br-rounded);
}

.p-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
	padding-inline: var(--s-4);
	flex: 1;
}

.p-card__name {
	font: var(--t-h-3);
	font-variation-settings: var(--vf-display);
}

.p-card__alt {
	font: var(--t-b-2);
	color: var(--cr-black-50);
}

.p-card__size {
	font: var(--t-l-2);
	letter-spacing: 0.06em;
	color: var(--cr-green-700);
	margin-block-start: auto;
	padding-block-start: var(--s-8);
}

/* whole-card click target without nesting interactive elements */
.p-fill {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Trust badge row */
.badge-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-12);
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--s-8);
	padding: var(--s-8) var(--s-16);
	border: var(--border-dashed);
	border-radius: var(--br-rounded);
	font: var(--t-l-2);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--theme-fg);
}

.badge svg {
	inline-size: 15px;
	block-size: 15px;
	color: var(--theme-accent);
	flex: none;
}

/* Split feature band */
.split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 5vw, 72px);
	align-items: center;
}

.split.is-reverse .split__media {
	order: 2;
}

@media (max-width: 860px) {
	.split {
		grid-template-columns: minmax(0, 1fr);
	}

	.split.is-reverse .split__media {
		order: 0;
	}
}

.split__body {
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
	align-items: flex-start;
}

/* Stat / feature tiles */
.tile {
	border: var(--border-dotted);
	border-radius: var(--br-lg);
	padding: var(--s-24);
	display: flex;
	flex-direction: column;
	gap: var(--s-8);
	block-size: 100%;
}

.tile__num {
	font: var(--t-h-2);
	font-variation-settings: var(--vf-display);
	color: var(--theme-accent);
}

/* 11. Product detail ------------------------------------------------------ */

.pdp {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
}

@media (max-width: 900px) {
	.pdp {
		grid-template-columns: minmax(0, 1fr);
	}
}

.pdp__gallery {
	position: sticky;
	inset-block-start: calc(var(--header-h) + var(--s-24));
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
}

@media (max-width: 900px) {
	.pdp__gallery {
		position: static;
	}
}

.pdp__stage {
	aspect-ratio: 1;
	border-radius: var(--br-lg);
	background: linear-gradient(170deg, var(--cr-green-50), var(--cr-cream));
	overflow: hidden;
	position: relative;
}

.pdp__stage img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	padding: var(--s-32);
	transition: opacity 0.35s var(--e-inOut-sin);
}

.pdp__thumbs {
	display: flex;
	gap: var(--s-8);
	flex-wrap: wrap;
}

.pdp__thumb {
	inline-size: 72px;
	block-size: 72px;
	border-radius: var(--br-md);
	border: 1px solid var(--cr-black-10);
	background: var(--cr-cream);
	padding: var(--s-6);
	transition: border-color 0.25s ease, transform 0.25s var(--e-out-expo);
}

.pdp__thumb[aria-selected="true"] {
	border-color: var(--cr-green-700);
	transform: translateY(-2px);
}

.pdp__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.pdp__body {
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
	align-items: flex-start;
}

.pdp__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-8);
}

.pdp__size {
	padding: var(--s-10) var(--s-16);
	border: 1px solid var(--cr-black-25);
	border-radius: var(--br-rounded);
	font: var(--t-l-2);
	letter-spacing: 0.04em;
	transition: all 0.25s var(--e-inOut-sin);
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
}

.pdp__size[aria-pressed="true"] {
	background: var(--cr-green-700);
	border-color: var(--cr-green-700);
	color: var(--cr-white);
}

/* Accordion */
.acc {
	inline-size: 100%;
	border-block-start: var(--border-dotted);
}

.acc__item {
	border-block-end: var(--border-dotted);
}

.acc__trigger {
	inline-size: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-16);
	padding-block: var(--s-16);
	font: var(--t-l-1);
	text-align: start;
	min-block-size: 56px;
}

.acc__icon {
	position: relative;
	inline-size: 14px;
	block-size: 14px;
	flex: none;
}

.acc__icon::before,
.acc__icon::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 1.5px;
	background: currentColor;
	transition: transform 0.4s var(--e-inOut-quart);
}

.acc__icon::after {
	transform: rotate(90deg);
}

.acc__trigger[aria-expanded="true"] .acc__icon::after {
	transform: rotate(0deg);
}

.acc__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.5s var(--e-inOut-quart);
}

.acc__panel[data-open="true"] {
	grid-template-rows: 1fr;
}

.acc__panel > div {
	overflow: hidden;
}

.acc__panel p {
	padding-block-end: var(--s-16);
	color: var(--cr-black-50);
}

/* Nutrition table */
.nutri {
	inline-size: 100%;
	border-collapse: collapse;
	font: var(--t-b-2);
}

.nutri th,
.nutri td {
	text-align: start;
	padding-block: var(--s-10);
	border-block-end: var(--border-dotted);
}

.nutri td:last-child {
	text-align: end;
	font-variant-numeric: tabular-nums;
}

/* 12. Share --------------------------------------------------------------- */

.share {
	display: flex;
	align-items: center;
	gap: var(--s-8);
	flex-wrap: wrap;
}

.share__label {
	font: var(--t-l-2);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--theme-muted);
	margin-inline-end: var(--s-4);
}

.share__btn {
	inline-size: 44px;
	block-size: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--theme-hairline);
	color: var(--theme-fg);
	transition:
		background 0.3s var(--e-inOut-sin),
		color 0.3s var(--e-inOut-sin),
		transform 0.3s var(--e-out-expo),
		border-color 0.3s ease;
}

.share__btn:hover {
	background: var(--theme-fg);
	color: var(--theme-bg);
	transform: translateY(-3px);
	border-color: var(--theme-fg);
}

.share__btn svg {
	inline-size: 17px;
	block-size: 17px;
}

/* Floating share rail, desktop only */
.share-rail {
	position: fixed;
	inset-inline-start: var(--s-16);
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: var(--s-8);
	background: var(--cr-white);
	padding: var(--s-8);
	border-radius: var(--br-rounded);
	box-shadow: 0 4px 24px rgba(6, 48, 26, 0.14);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s var(--e-inOut-sin), transform 0.4s var(--e-out-expo);
}

.share-rail.is-in {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 1280px) {
	.share-rail {
		display: none;
	}
}

.toast {
	position: fixed;
	inset-block-end: var(--s-24);
	inset-inline-start: 50%;
	transform: translate(-50%, 120%);
	background: var(--cr-green-900);
	color: var(--cr-white);
	padding: var(--s-12) var(--s-24);
	border-radius: var(--br-rounded);
	font: var(--t-l-2);
	letter-spacing: 0.06em;
	z-index: var(--z-dialog);
	transition: transform 0.5s var(--e-out-expo);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.toast.is-in {
	transform: translate(-50%, 0);
}

/* 13. Store locator ------------------------------------------------------- */

.locator {
	display: grid;
	grid-template-columns: minmax(320px, 400px) 1fr;
	gap: var(--s-24);
	align-items: start;
}

@media (max-width: 900px) {
	.locator {
		grid-template-columns: minmax(0, 1fr);
	}
}

.locator__panel {
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
}

.locator__search {
	display: flex;
	gap: var(--s-8);
	flex-wrap: wrap;
}

.locator__input {
	flex: 1 1 180px;
	min-block-size: 48px;
	padding-inline: var(--s-16);
	border: 1px solid var(--cr-black-25);
	border-radius: var(--br-rounded);
	background: var(--cr-white);
}

.locator__input::placeholder {
	color: var(--cr-black-50);
}

.locator__list {
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	max-block-size: 560px;
	overflow-y: auto;
	padding-inline-end: var(--s-4);
	scrollbar-width: thin;
}

.locator__status {
	font: var(--t-b-2);
	color: var(--cr-black-50);
	min-block-size: 1.55em;
}

.s-card {
	border: var(--border-hair);
	border-radius: var(--br-lg);
	padding: var(--s-16);
	display: flex;
	flex-direction: column;
	gap: var(--s-10);
	background: var(--cr-white);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--e-out-expo);
	cursor: pointer;
}

.s-card:hover,
.s-card.is-active {
	border-color: var(--cr-green-500);
	box-shadow: 0 10px 28px rgba(6, 48, 26, 0.12);
	transform: translateY(-2px);
}

.s-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-12);
}

.s-card__name {
	font: var(--t-h-3);
	font-variation-settings: var(--vf-display);
}

.s-card__dist {
	font: var(--t-l-2);
	letter-spacing: 0.04em;
	background: var(--cr-green-50);
	color: var(--cr-green-700);
	padding: 5px var(--s-10);
	border-radius: var(--br-rounded);
	white-space: nowrap;
	flex: none;
}

.s-card__meta {
	font: var(--t-b-2);
	color: var(--cr-black-50);
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

.s-card__actions {
	display: flex;
	gap: var(--s-8);
	flex-wrap: wrap;
	margin-block-start: var(--s-4);
	position: relative;
	z-index: 2;
}

.s-card__stock {
	display: flex;
	gap: var(--s-6);
	flex-wrap: wrap;
}

.s-card__chip {
	font: var(--t-l-2);
	letter-spacing: 0.04em;
	border: var(--border-dotted);
	border-radius: var(--br-rounded);
	padding: 4px var(--s-10);
	color: var(--cr-brown-700);
}

.locator__map {
	block-size: clamp(420px, 60vh, 640px);
	border-radius: var(--br-lg);
	overflow: hidden;
	border: var(--border-hair);
	background: var(--cr-green-50);
	position: relative;
}

.locator__map .leaflet-container {
	block-size: 100%;
	inline-size: 100%;
	font: var(--t-b-2);
	background: var(--cr-green-50);
}

/* Custom pin */
.pin {
	inline-size: 34px;
	block-size: 34px;
	background: var(--cr-green-700);
	border: 2px solid var(--cr-white);
	border-radius: 50% 50% 50% 4px;
	transform: rotate(-45deg);
	display: grid;
	place-items: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
	transition: transform 0.35s var(--e-out-expo), background 0.3s ease;
}

.pin svg {
	transform: rotate(45deg);
	inline-size: 15px;
	block-size: 15px;
	color: var(--cr-gold-400);
}

.pin.is-active,
.leaflet-marker-icon:hover .pin {
	background: var(--cr-gold-400);
	transform: rotate(-45deg) scale(1.16);
}

.pin.is-active svg {
	color: var(--cr-green-900);
}

.pin--me {
	background: var(--cr-honey);
	border-radius: 50%;
	transform: none;
	animation: pulseMe 2.2s ease-out infinite;
}

.pin--me svg {
	transform: none;
	color: var(--cr-white);
}

@keyframes pulseMe {
	0% { box-shadow: 0 0 0 0 rgba(200, 122, 30, 0.55); }
	70% { box-shadow: 0 0 0 16px rgba(200, 122, 30, 0); }
	100% { box-shadow: 0 0 0 0 rgba(200, 122, 30, 0); }
}

/* Map fallback shown when the map library is unavailable (offline preview) */
.map-fallback {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	text-align: center;
	padding: var(--s-32);
	background:
		repeating-linear-gradient(45deg, var(--cr-green-50) 0 12px, #e2eee2 12px 24px);
	color: var(--cr-green-800);
}

/* 14. Stockist profile ---------------------------------------------------- */

.profile-hero {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

@media (max-width: 900px) {
	.profile-hero {
		grid-template-columns: minmax(0, 1fr);
	}
}

.profile-facts {
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	border: var(--border-dotted);
	border-radius: var(--br-lg);
	padding: var(--s-24);
}

.fact {
	display: flex;
	gap: var(--s-12);
	align-items: flex-start;
	padding-block-end: var(--s-12);
	border-block-end: var(--border-dotted);
}

.fact:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.fact svg {
	inline-size: 18px;
	block-size: 18px;
	flex: none;
	color: var(--theme-accent);
	margin-block-start: 3px;
}

.fact__k {
	font: var(--t-l-2);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--theme-muted);
	display: block;
	margin-block-end: 2px;
}

.status-dot {
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: var(--cr-green-500);
	display: inline-block;
	margin-inline-end: var(--s-6);
}

.status-dot.is-closed {
	background: var(--cr-brown-400);
}

/* 15. Forms --------------------------------------------------------------- */

.field {
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
}

.field label {
	font: var(--t-l-2);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--theme-muted);
}

.field input,
.field select,
.field textarea {
	min-block-size: 50px;
	padding: var(--s-12) var(--s-16);
	border: 1px solid var(--cr-black-25);
	border-radius: var(--br-md);
	background: var(--cr-white);
	color: var(--cr-ink);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.field textarea {
	min-block-size: 140px;
	resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--cr-green-700);
	box-shadow: 0 0 0 3px rgba(34, 160, 44, 0.18);
	outline: none;
}

/* 16. Footer -------------------------------------------------------------- */

.g-footer {
	background: var(--cr-green-900);
	color: var(--cr-white);
	padding-block: var(--s-64) var(--s-32);
}

.g-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
	gap: var(--s-32);
}

@media (max-width: 900px) {
	.g-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.g-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.g-footer h3 {
	font: var(--t-l-2);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cr-gold-400);
	margin-block-end: var(--s-16);
}

.g-footer a {
	color: rgba(255, 255, 255, 0.82);
	transition: color 0.25s ease;
	display: inline-block;
	padding-block: var(--s-6);
}

.g-footer a:hover {
	color: var(--cr-gold-400);
}

.g-footer__bottom {
	margin-block-start: var(--s-48);
	padding-block-start: var(--s-24);
	border-block-start: 1px dotted var(--cr-white-25);
	display: flex;
	justify-content: space-between;
	gap: var(--s-16);
	flex-wrap: wrap;
	font: var(--t-b-2);
	color: rgba(255, 255, 255, 0.6);
}

/* Big outlined wordmark that sits behind the footer, a Bragg-ish flourish */
.g-footer__wordmark {
	font: var(--t-h-1);
	font-variation-settings: var(--vf-display);
	text-align: center;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.18);
	margin-block-start: var(--s-32);
	line-height: 0.9;
	user-select: none;
	white-space: nowrap;
	overflow: hidden;
}

/* 17. Misc ---------------------------------------------------------------- */

.breadcrumb {
	display: flex;
	gap: var(--s-8);
	align-items: center;
	font: var(--t-l-2);
	letter-spacing: 0.06em;
	color: var(--theme-muted);
	flex-wrap: wrap;
}

.breadcrumb a:hover {
	color: var(--theme-accent);
}

.page-head {
	padding-block: var(--s-64) var(--s-48);
}

.page-head__inner {
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
	align-items: flex-start;
}

.filter-bar {
	display: flex;
	gap: var(--s-8);
	flex-wrap: wrap;
	padding-block-end: var(--s-24);
	margin-block-end: var(--s-32);
	border-block-end: var(--border-dotted);
}

.filter-chip {
	padding: var(--s-10) var(--s-16);
	border: 1px solid var(--cr-black-25);
	border-radius: var(--br-rounded);
	font: var(--t-l-2);
	letter-spacing: 0.04em;
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
	transition: all 0.3s var(--e-inOut-sin);
}

.filter-chip:hover {
	border-color: var(--cr-green-700);
}

.filter-chip[aria-pressed="true"] {
	background: var(--cr-green-700);
	border-color: var(--cr-green-700);
	color: var(--cr-white);
}

.quote {
	font: var(--t-h-2);
	font-variation-settings: var(--vf-display);
	text-align: center;
	max-inline-size: 22ch;
	margin-inline: auto;
	text-wrap: balance;
}

.leaf-divider {
	display: grid;
	place-items: center;
	padding-block: var(--s-24);
	color: var(--theme-accent);
}

/* Explicit, not inherited from the icon's fallback attributes — this is a
   decorative rule between sections and its size is a design decision. */
.leaf-divider svg {
	inline-size: 30px;
	block-size: 30px;
}

.notice {
	border: var(--border-dashed);
	border-radius: var(--br-md);
	padding: var(--s-16);
	font: var(--t-b-2);
	color: var(--theme-muted);
	display: flex;
	gap: var(--s-12);
	align-items: flex-start;
}

.notice svg {
	flex: none;
	inline-size: 18px;
	block-size: 18px;
	color: var(--theme-accent);
	margin-block-start: 2px;
}

/* 18. Scribble highlight --------------------------------------------------
   The hand-drawn marker circle the client asked for, in brand green. The SVG
   sits behind the words and its stroke is drawn on with the same
   stroke-dashoffset mechanism as [data-animate="draw"], so it animates when it
   scrolls into view and simply appears if the reader prefers reduced motion.
   ---------------------------------------------------------------------- */

.scribble {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.scribble__ink {
	position: absolute;
	/* The drawn loop only spans ~88% of this box (x 22–287 of a 300 viewBox),
	   so the box has to be meaningfully wider than the text or the stroke
	   lands on the first and last letters instead of around them. */
	inset-block: -42%;
	inset-inline: -15%;
	inline-size: 130%;
	block-size: 184%;
	pointer-events: none;
	overflow: visible;
	color: var(--cr-leaf);
	/* NOT z-index:-1. The .scribble span creates no stacking context, so a
	   negative z-index escapes it and paints behind the section background —
	   the loop simply vanishes. Drawn over the words is also what a real
	   marker does. */
}

.scribble__ink path {
	fill: none;
	stroke: currentColor;
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: var(--len, 1200);
	stroke-dashoffset: var(--len, 1200);
	transition: stroke-dashoffset 1.15s var(--e-inOut-quart) var(--animate-delay, 0ms);
}

/* The underline stroke follows the loop rather than racing it. */
.scribble__ink path + path {
	transition-delay: calc(var(--animate-delay, 0ms) + 620ms);
	transition-duration: 0.6s;
	stroke-width: 4;
}

.scribble.is-in .scribble__ink path {
	stroke-dashoffset: 0;
}

/* On dark grounds the leaf green is the wrong side of legible against the
   headline, so the ink lifts to the gold instead. */
[data-theme="green"] .scribble__ink,
[data-theme="green-mid"] .scribble__ink,
[data-theme="brown"] .scribble__ink,
.hero .scribble__ink {
	color: var(--cr-leaf);
}

@media (prefers-reduced-motion: reduce) {
	.scribble__ink path {
		stroke-dashoffset: 0 !important;
	}
}

/* 19. Floating WhatsApp button --------------------------------------------
   Bottom-right so it never collides with the share rail on the left.
   ---------------------------------------------------------------------- */

.wa-float {
	position: fixed;
	inset-block-end: clamp(16px, 3vw, 28px);
	inset-inline-end: clamp(16px, 3vw, 28px);
	z-index: 95;
	display: inline-flex;
	align-items: center;
	gap: var(--s-10);
	background: #25d366;
	color: #fff;
	min-block-size: 56px;
	padding-inline: var(--s-16);
	border-radius: var(--br-rounded);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.26);
	font: var(--t-l-1);
	transition: transform 0.35s var(--e-out-expo), box-shadow 0.35s var(--e-out-expo);
}

.wa-float:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
}

.wa-float svg {
	inline-size: 26px;
	block-size: 26px;
	flex: none;
}

/* The label collapses on small screens, leaving a round icon button. */
.wa-float__label {
	white-space: nowrap;
}

@media (max-width: 620px) {
	.wa-float {
		padding-inline: 0;
		inline-size: 56px;
		justify-content: center;
	}

	.wa-float__label {
		display: none;
	}
}

/* A single soft ping on arrival, not a permanent pulse — an endlessly
   throbbing button is the internet's most ignorable object. */
.wa-float::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid #25d366;
	animation: waPing 2.4s var(--e-out-expo) 3;
	pointer-events: none;
}

@keyframes waPing {
	0% { transform: scale(1); opacity: 0.65; }
	70%, 100% { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wa-float::before {
		animation: none;
	}
}

/* 20. Contact strip -------------------------------------------------------
   The client asked for the phone number and the email to be "very visible".
   This band sits directly above the footer on every page, and the number also
   rides in the header on desktop.
   ---------------------------------------------------------------------- */

.contact-strip {
	background: var(--cr-gold-400);
	color: var(--cr-green-900);
	padding-block: var(--s-32);
}

.contact-strip__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 4vw, 56px);
	text-align: center;
}

.contact-strip__item {
	display: inline-flex;
	align-items: center;
	gap: var(--s-12);
	font: var(--t-h-3);
	font-variation-settings: var(--vf-display);
	color: var(--cr-green-900);
	transition: transform 0.3s var(--e-out-expo);
	word-break: break-word;
}

.contact-strip__item:hover {
	transform: translateY(-2px);
}

.contact-strip__item svg {
	inline-size: 26px;
	block-size: 26px;
	flex: none;
	padding: 0;
}

.contact-strip__k {
	display: block;
	font: var(--t-l-2);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.7;
	margin-block-end: 2px;
	text-align: start;
}

.contact-strip__v {
	text-align: start;
}

/* Header phone pill, desktop only — the second "very visible" placement. */
.g-header__phone {
	background: var(--cr-gold-400);
	color: var(--cr-green-900) !important;
}

.g-header__phone:hover {
	background: var(--cr-green-700);
	color: var(--cr-white) !important;
}

@media (max-width: 1240px) {
	.g-header__phone .tablet-up-only {
		display: none;
	}
}

/* 21. Careers -------------------------------------------------------------- */

.job-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	border: var(--border-hair);
	border-radius: var(--br-lg);
	padding: var(--s-24);
	background: var(--cr-white);
	position: relative;
	transition: transform 0.4s var(--e-out-expo), box-shadow 0.4s var(--e-out-expo),
		border-color 0.3s ease;
}

.job-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(6, 48, 26, 0.13);
	border-color: var(--cr-green-500);
}

.job-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-8);
}

.job-card__tag {
	font: var(--t-l-2);
	letter-spacing: 0.06em;
	border-radius: var(--br-rounded);
	padding: 5px var(--s-10);
	background: var(--cr-green-50);
	color: var(--cr-green-700);
}

.job-list {
	display: flex;
	flex-direction: column;
	gap: var(--s-10);
	padding-inline-start: var(--s-20);
	list-style: disc;
	color: var(--theme-muted);
}

.job-list li::marker {
	color: var(--theme-accent);
}

/* 22. File input ----------------------------------------------------------
   The native control is unstyleable and reads as a system artefact, so the
   real input is visually hidden behind a styled label and JS writes the chosen
   filename back into it.
   ---------------------------------------------------------------------- */

.file-field input[type="file"] {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	overflow: hidden;
}

.file-field__drop {
	display: flex;
	align-items: center;
	gap: var(--s-12);
	min-block-size: 64px;
	padding: var(--s-12) var(--s-16);
	border: 1.5px dashed var(--cr-black-25);
	border-radius: var(--br-md);
	background: var(--cr-white);
	cursor: pointer;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.file-field__drop:hover,
.file-field input[type="file"]:focus-visible + .file-field__drop {
	border-color: var(--cr-green-700);
	background: var(--cr-green-50);
}

.file-field__drop svg {
	inline-size: 22px;
	block-size: 22px;
	flex: none;
	color: var(--cr-green-700);
}

.file-field__name {
	font: var(--t-b-2);
	color: var(--cr-black-50);
	overflow: hidden;
	text-overflow: ellipsis;
}

.file-field__name.has-file {
	color: var(--cr-green-700);
	font-weight: 600;
}

/* 23. Editor prose --------------------------------------------------------
   Whatever the client writes in the WordPress editor lands here, so the block
   output needs the same rhythm as the templated sections.
   ---------------------------------------------------------------------- */

.arn-prose > * + * {
	margin-block-start: var(--s-24);
}

.arn-prose h2 {
	font: var(--t-h-2);
	font-variation-settings: var(--vf-display);
	letter-spacing: -0.015em;
	margin-block-start: var(--s-48);
}

.arn-prose h3 {
	font: var(--t-h-3);
	font-variation-settings: var(--vf-display);
	margin-block-start: var(--s-32);
}

.arn-prose p {
	color: var(--theme-muted);
}

.arn-prose a:not(.c-button) {
	color: var(--theme-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.arn-prose ul,
.arn-prose ol {
	padding-inline-start: var(--s-24);
	color: var(--theme-muted);
	display: flex;
	flex-direction: column;
	gap: var(--s-8);
}

.arn-prose ul {
	list-style: disc;
}

.arn-prose ol {
	list-style: decimal;
}

.arn-prose blockquote {
	border-inline-start: 3px solid var(--theme-accent);
	padding-inline-start: var(--s-24);
	font: var(--t-h-3);
	font-variation-settings: var(--vf-display);
}

.arn-prose img,
.arn-prose figure img {
	border-radius: var(--br-lg);
}

.arn-prose figcaption {
	font: var(--t-b-2);
	color: var(--theme-muted);
	margin-block-start: var(--s-8);
}

/* Pagination */
.pagination,
.nav-links {
	display: flex;
	gap: var(--s-8);
	flex-wrap: wrap;
	align-items: center;
}

.pagination .page-numbers,
.nav-links .page-numbers {
	min-inline-size: 44px;
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: var(--s-12);
	border: var(--border-hair);
	border-radius: var(--br-rounded);
	font: var(--t-l-1);
	transition: background 0.25s var(--e-inOut-sin), color 0.25s var(--e-inOut-sin);
}

.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
	background: var(--cr-green-50);
}

.pagination .page-numbers.current,
.nav-links .page-numbers.current {
	background: var(--cr-green-700);
	border-color: var(--cr-green-700);
	color: var(--cr-white);
}

/* WordPress core alignment classes */
.alignwide {
	inline-size: min(100%, var(--s-md));
}

.alignfull {
	inline-size: 100%;
}

.aligncenter {
	margin-inline: auto;
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and a field they can see is a field they will fill in. */
.arn-hp {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ==========================================================================
   ROUND 1 REVISIONS
   ========================================================================== */

/* REV-01 — announcement bar. Green, not black (the client is explicit), with
   a decorative live blinker replacing the reference site's social icons. */

.g-announce {
	background: var(--cr-green-900);
	color: var(--cr-white);
	position: relative;
	/* Below the sticky header: the two overlap for the first ~40px of
	   scrolling, and a higher z-index paints the bar over the nav. */
	z-index: calc(var(--z-header) - 1);
}

.g-announce__inner {
	inline-size: var(--width-lg);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-12);
	min-block-size: 40px;
	padding-block: var(--s-8);
}

.g-announce__dot {
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: var(--cr-live, #3ddc64);
	flex: none;
	position: relative;
}

.g-announce__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	animation: liveBlink 2s ease-out infinite;
}

@keyframes liveBlink {
	0% { transform: scale(1); opacity: 0.8; }
	70%, 100% { transform: scale(2.8); opacity: 0; }
}

.g-announce__viewport {
	position: relative;
	overflow: hidden;
	block-size: 20px;
	flex: 1 1 auto;
	max-inline-size: 60ch;
}

.g-announce__msg {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font: var(--t-l-2);
	letter-spacing: 0.1em;
	text-align: center;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.5s var(--e-inOut-sin), transform 0.5s var(--e-inOut-quart);
}

.g-announce__msg.is-current {
	opacity: 1;
	transform: none;
}

.g-announce__msg.is-out {
	opacity: 0;
	transform: translateY(-100%);
}

/* The long-form messages clip below ~600px, so a short variant swaps in
   rather than letting the text run off the edge. */
.g-announce__long { display: inline; }
.g-announce__short { display: none; }

@media (max-width: 620px) {
	.g-announce__long { display: none; }
	.g-announce__short { display: inline; }
	.g-announce__inner { gap: var(--s-8); }
}

@media (prefers-reduced-motion: reduce) {
	.g-announce__dot::after { animation: none; }
	.g-announce__msg { transition: opacity 0.001ms; transform: none !important; }
}

/* REV-02 — hero copy levels ------------------------------------------------ */

.hero__eyebrow {
	font: var(--t-l-1);
	/* The client asked for this "a bit bigger" — up from 0.75rem to ~1rem,
	   still clearly an eyebrow rather than a second headline. */
	font-size: clamp(0.875rem, 0.7rem + 0.7vw, 1.0625rem);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cr-gold-400);
	display: inline-flex;
	align-items: center;
	gap: var(--s-10);
}

.hero__eyebrow::before {
	content: "";
	inline-size: 28px;
	block-size: 1px;
	background: currentColor;
	flex: none;
}

.hero__title {
	font: var(--t-h-1);
	font-variation-settings: var(--vf-display);
	letter-spacing: -0.02em;
	max-inline-size: 18ch;
	/* Three stacked levels need a smaller top line than a single headline. */
	font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4rem);
}

.hero__subhead {
	font: var(--t-h-3);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-size: clamp(1.15rem, 0.95rem + 1vw, 1.75rem);
	color: var(--cr-gold-400);
	max-inline-size: 26ch;
}

.hero__pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-8) var(--s-16);
	font: var(--t-l-1);
	color: rgba(255, 255, 255, 0.92);
}

.hero__pills li {
	display: inline-flex;
	align-items: center;
	gap: var(--s-16);
}

.hero__pills li + li::before {
	content: "•";
	color: var(--cr-gold-400);
	font-size: 1.2em;
	line-height: 1;
}

/* REV-03 — hero base strip. A true seamless marquee, so nothing is ever
   clipped mid-word at either edge. */

.hero-strip {
	background: var(--cr-green-700);
	color: var(--cr-white);
	padding-block: var(--s-12);
	overflow: hidden;
}

.hero-strip .marquee__item {
	font: var(--t-l-1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: var(--f-ui);
}

/* REV-04 — "WHY AR-RAYYAAN?" credentials ---------------------------------- */

.creds__strip {
	background: var(--cr-cream);
	padding-block: var(--s-24);
	text-align: center;
}

.creds__strip h2 {
	font: var(--t-l-1);
	font-size: clamp(1rem, 0.8rem + 0.9vw, 1.375rem);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cr-green-900);
}

.creds__card {
	background: var(--cr-green-900);
	background-size: cover;
	background-position: center;
	color: var(--cr-white);
	border-radius: var(--br-lg);
	padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* The texture sits behind a scrim so white text clears 4.5:1 wherever the
   generated image happens to be lightest. */
.creds__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(rgba(6, 48, 26, 0.72), rgba(6, 48, 26, 0.82));
}

.creds__list {
	display: flex;
	flex-direction: column;
	max-inline-size: 46ch;
	margin-inline: auto;
	text-align: center;
}

.creds__item {
	padding-block: clamp(20px, 3vw, 34px);
}

.creds__item + .creds__item {
	border-block-start: 1px solid rgba(255, 255, 255, 0.22);
}

.creds__big {
	display: block;
	font: var(--t-h-2);
	font-variation-settings: var(--vf-display);
	color: var(--cr-gold-400);
	line-height: 1.05;
}

.creds__cap {
	display: block;
	/* Spec: the emphasis must be at least twice the caption. */
	font: var(--t-b-2);
	color: rgba(255, 255, 255, 0.86);
	margin-block-start: var(--s-8);
}

/* REV-05 / REV-08 — sliders ------------------------------------------------ */

.strip {
	overflow: hidden;
	position: relative;
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.strip__track {
	display: flex;
	inline-size: max-content;
	align-items: center;
	gap: clamp(28px, 5vw, 72px);
	animation: strip var(--strip-speed, 36s) linear infinite;
}

.strip:hover .strip__track,
.strip:focus-within .strip__track {
	animation-play-state: paused;
}

@keyframes strip {
	to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.strip__track { animation: none; }
	.strip { mask-image: none; overflow-x: auto; }
}

/* Assurance badges */
.assurance {
	background: var(--cr-green-900);
	color: var(--cr-white);
	padding-block: var(--s-48);
}

.badge-seal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-10);
	inline-size: 130px;
	flex: none;
	text-align: center;
}

.badge-seal svg {
	/* Optical sizing: every mark is drawn on the same 24-grid, so a fixed box
	   makes a wide mark and a tall mark read as equal weight. */
	inline-size: 58px;
	block-size: 58px;
	color: var(--cr-white);
}

.badge-seal__label {
	font: var(--t-l-2);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.3;
}

/* A badge whose certification mark has not been supplied yet renders as an
   outlined placeholder rather than a gap, and says so. */
.badge-seal--pending .badge-seal__ph {
	inline-size: 58px;
	block-size: 58px;
	border: 1.8px dashed rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font: var(--t-l-2);
	color: rgba(255, 255, 255, 0.6);
}

/* Retailer logos */
.retailers {
	background: var(--cr-cream);
	padding-block: var(--s-48);
}

/* Every logo gets the SAME box and is contained inside it. Capping height and
   width separately looked reasonable but was not: a 5.5:1 wordmark hits the
   width cap first and lands at 31px tall next to a square mark at 56px, so the
   row reads as randomly sized. A fixed box normalises the slot, which is what
   actually looks balanced in a moving strip. */
.retailer-logo {
	flex: none;
	inline-size: 168px;
	block-size: 56px;
	position: relative;
}

/* Absolutely inset inside the fixed slot — the same pattern the product and
   dropdown frames use. Percentage heights on images are unreliable here (a
   plain 100% fell back to auto and rendered a 600x523 logo at 146px tall
   inside a 56px slot; max-block-size:100% collapsed the strip instead).
   Insetting an absolutely positioned child removes the percentage entirely. */
.retailer-logo img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}
/* Until the client supplies the trademark files, the slot shows the retailer
   name set as type. Nothing is traced or approximated. */
.retailer-logo__name {
	font: var(--t-l-2);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cr-brown-700);
	opacity: 0.72;
	border: 1px dashed var(--cr-black-25);
	border-radius: var(--br-md);
	padding: var(--s-8) var(--s-10);
	text-align: center;
	line-height: 1.25;
	inline-size: 100%;
	block-size: 100%;
	display: grid;
	place-items: center;
}

/* REV-06 — category grid --------------------------------------------------- */

.cat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-16);
}

@media (max-width: 980px) {
	.cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cat-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--cr-black-10);
	border-radius: var(--br-md);
	overflow: hidden;
	background: var(--cr-cream);
	position: relative;
	transition: transform 0.4s var(--e-out-expo), box-shadow 0.4s var(--e-out-expo);
	block-size: 100%;
}

.cat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(6, 48, 26, 0.14);
}

.cat-card__media {
	aspect-ratio: 1;
	position: relative;
	background: var(--cr-cream);
	overflow: hidden;
}

.cat-card__media img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	padding: var(--s-20, 20px);
	transition: transform 0.5s var(--e-out-expo);
}

.cat-card:hover .cat-card__media img {
	transform: scale(1.06);
}

/* A category with no photograph yet — Roll-On Perfume — gets a clearly
   non-photographic mark rather than a generated fake product shot. */
.cat-card__ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--cr-green-500);
	opacity: 0.4;
}

.cat-card__ph svg {
	inline-size: 64px;
	block-size: 64px;
}

.cat-card__label {
	background: var(--cr-green-900);
	color: var(--cr-white);
	text-align: center;
	padding: var(--s-12) var(--s-8);
	font: var(--t-l-1);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-block-start: auto;
}

/* REV-07 — "WHY BUSINESSES TRUST OUR BRAND" -------------------------------- */

.trust {
	position: relative;
	isolation: isolate;
	background: var(--cr-green-900);
	color: var(--cr-white);
	padding-block: var(--s-64);
	background-size: cover;
	background-position: center;
}

/* Scrim so white text and icons clear 4.5:1 over the lightest part of the
   leaf photograph. */
.trust::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(rgba(4, 30, 16, 0.78), rgba(4, 30, 16, 0.86));
}

.trust__cards {
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
	max-inline-size: 760px;
}

.trust-card {
	display: flex;
	align-items: center;
	gap: var(--s-20, 20px);
	background: rgba(12, 90, 42, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--br-lg);
	padding: var(--s-20, 20px) var(--s-24);
	backdrop-filter: blur(6px);
}

.trust-card svg {
	inline-size: 38px;
	block-size: 38px;
	flex: none;
	color: var(--cr-white);
}

.trust-card__t {
	font: var(--t-l-1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	display: block;
}

.trust-card__c {
	font: var(--t-b-2);
	color: rgba(255, 255, 255, 0.82);
	display: block;
	margin-block-start: 2px;
}

/* REV-09 — reviews --------------------------------------------------------- */

.reviews__track {
	display: flex;
	gap: var(--s-16);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block-end: var(--s-12);
	scrollbar-width: thin;
}

.review-card {
	flex: 0 0 clamp(260px, 32%, 380px);
	scroll-snap-align: start;
	background: var(--cr-white);
	border: var(--border-hair);
	border-radius: var(--br-lg);
	padding: var(--s-24);
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
}

.review-card__top {
	display: flex;
	align-items: center;
	gap: var(--s-12);
}

/* Initials, not photographs — the client was explicit about no pictures. */
.review-card__avatar {
	inline-size: 46px;
	block-size: 46px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font: var(--t-l-1);
	color: var(--cr-white);
	background: var(--avatar, var(--cr-green-700));
	flex: none;
}

.review-card__name {
	font: var(--t-l-1);
	color: var(--cr-ink);
}

.review-card__stars {
	display: flex;
	gap: 2px;
	color: var(--cr-gold);
}

.review-card__stars svg {
	inline-size: 15px;
	block-size: 15px;
}

.review-card__text {
	font: var(--t-b-2);
	color: var(--cr-black-50);
	line-height: 1.6;
}

@media (max-width: 900px) {
	.review-card { flex-basis: clamp(260px, 46%, 340px); }
}

@media (max-width: 620px) {
	.review-card { flex-basis: 84%; }
}

/* REV-10 — footer logo: no white square, soft glow ------------------------- */

.brand-img--light {
	/* Was a white chip. The client wants the mark standing on its own, so the
	   chip is gone and a soft halo does the lifting instead. drop-shadow
	   follows the alpha channel of the logo itself; box-shadow would just draw
	   a rectangle again. */
	background: none;
	padding: 0;
	border-radius: 0;
	filter:
		drop-shadow(0 0 18px rgba(242, 197, 17, 0.45))
		drop-shadow(0 0 42px rgba(255, 255, 255, 0.18));
}

/* REV-11 — footer INFORMATION column --------------------------------------- */

.g-footer__grid {
	grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr));
}

@media (max-width: 1080px) {
	.g-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* REV-12 — careers underline + texture ------------------------------------- */

.underlined {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.underlined__ink {
	position: absolute;
	/* Sits BELOW the baseline — the client asked for an underline, not a
	   stroke through the words. */
	inset-block-start: 100%;
	inset-inline: -2%;
	inline-size: 104%;
	block-size: 0.32em;
	margin-block-start: 0.06em;
	overflow: visible;
	color: var(--cr-leaf);
	pointer-events: none;
}

.underlined__ink path {
	fill: none;
	stroke: currentColor;
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: var(--len, 320);
	stroke-dashoffset: var(--len, 320);
	transition: stroke-dashoffset 0.9s var(--e-inOut-quart) var(--animate-delay, 0ms);
}

.underlined.is-in .underlined__ink path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
	.underlined__ink path { stroke-dashoffset: 0 !important; }
}

.page-head--texture {
	background-size: cover;
	background-position: center;
	position: relative;
	isolation: isolate;
}

.page-head--texture::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(rgba(6, 48, 26, 0.74), rgba(6, 48, 26, 0.84));
}

/* Breadcrumb: bigger and comfortably tappable (REV-12). */
.breadcrumb {
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
}

.breadcrumb a {
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
	padding-inline: var(--s-4);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.breadcrumb a:hover { color: var(--theme-accent); }

/* REV-13 — product category filter row ------------------------------------- */

.cat-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-12);
	margin-block-end: var(--s-48);
}

@media (max-width: 780px) {
	.cat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cat-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-10);
	min-block-size: 56px;
	padding-inline: var(--s-16);
	border: 1px solid var(--cr-black-25);
	border-radius: var(--br-md);
	background: var(--cr-white);
	font: var(--t-l-1);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	transition: all 0.28s var(--e-inOut-sin);
}

.cat-pill:hover { border-color: var(--cr-green-700); }

.cat-pill[aria-pressed="true"] {
	background: var(--cr-green-700);
	border-color: var(--cr-green-700);
	color: var(--cr-white);
}

.cat-pill svg { inline-size: 18px; block-size: 18px; }

/* REV-15 — policy pages ---------------------------------------------------- */

.policy {
	max-inline-size: 70ch;
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
}

.policy h2 {
	font: var(--t-h-3);
	font-variation-settings: var(--vf-display);
	color: var(--cr-green-700);
	margin-block-start: var(--s-32);
}

.policy p { color: var(--cr-black-50); }

.policy a {
	color: var(--cr-green-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.policy ul,
.policy ol {
	display: flex;
	flex-direction: column;
	gap: var(--s-10);
	padding-inline-start: var(--s-24);
	color: var(--cr-black-50);
}

.policy ul { list-style: disc; }
.policy ol { list-style: decimal; }
.policy li::marker { color: var(--cr-green-500); }

/* Links inside an accordion answer. Scoped here rather than borrowing the
   .policy class, which is a flex column for a whole page body and turns any
   inline link into its own row. */
.acc__panel a {
	color: var(--cr-green-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.policy__note {
	font: var(--t-h-3);
	font-variation-settings: var(--vf-display);
	color: var(--cr-green-700);
	border-block: 1px dotted var(--cr-black-25);
	padding-block: var(--s-24);
	margin-block-start: var(--s-24);
	text-align: center;
}

/* Supplied certification marks (ISO 9001, GMP).
   These are third-party trademarks and are never recoloured, so they cannot be
   turned white like the drawn badges. Their blue measures 1.85:1 against the
   dark green slider band — unreadable — so each sits on a white plate, which
   takes it to 7.8:1 and is how these marks appear on packaging anyway. */
.badge-seal__plate {
	inline-size: 58px;
	block-size: 58px;
	border-radius: 50%;
	background: var(--cr-white);
	display: grid;
	place-items: center;
	padding: var(--s-8);
	position: relative;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* Absolutely inset, not a percentage height — a percentage height on an image
   does not resolve reliably here and renders the mark far outside its plate. */
.badge-seal__plate img {
	position: absolute;
	inset: var(--s-8);
	inline-size: calc(100% - var(--s-16));
	block-size: calc(100% - var(--s-16));
	object-fit: contain;
}