/* ==========================================================================
   Cleandosis — theme.css
   Tokens, base type, the shared components (buttons, tags, inputs, cards),
   the header and its menus, the three overlays, and the footer.
   Design: "Clean Dosis Homepage v2" on the Broadsheet system, brand teal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens

   These are the design defaults. Appearance → Customize → Cleandosis can
   redefine any of them: inc/customizer-css.php regenerates the accent, mint and
   neutral scales from one colour each, and prints only the tokens that differ
   from what is written here, so an untouched site renders from this block alone.
   -------------------------------------------------------------------------- */
:root {
	--color-bg: #f3f2f2;
	--color-surface: #eae9e9;
	--color-text: #0d1f18;
	--color-divider: color-mix(in srgb, #0d1f18 16%, transparent);

	--color-accent: #117a67;
	--color-accent-100: #e4f5f0;
	--color-accent-200: #c3e9df;
	--color-accent-300: #92d8c6;
	--color-accent-400: #57bea6;
	--color-accent-500: #279e87;
	--color-accent-600: #0e6b5a;
	--color-accent-700: #0c5a4d;
	--color-accent-800: #08463c;
	--color-accent-900: #062f29;

	--color-accent-2: #5cc98c;
	--color-accent-2-100: #eaf8ef;
	--color-accent-2-200: #d0f0dc;
	--color-accent-2-300: #a8e3bf;
	--color-accent-2-400: #7bd49f;
	--color-accent-2-500: #5cc98c;
	--color-accent-2-600: #3aa56c;
	--color-accent-2-700: #287f52;
	--color-accent-2-800: #1c5a3b;
	--color-accent-2-900: #123c28;

	--color-neutral-100: #f8f4f4;
	--color-neutral-200: #eae7e7;
	--color-neutral-300: #d7d3d3;
	--color-neutral-400: #bab6b6;
	--color-neutral-500: #9b9797;
	--color-neutral-600: #7d7979;
	--color-neutral-700: #605d5d;
	--color-neutral-800: #444141;
	--color-neutral-900: #2d2b2b;

	/* The third process ink — only the .cmyk-num plate numerals use it. */
	--color-process-yellow: #edbb00;

	--font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
	--font-heading-weight: 600;
	--font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

	--space-1: 5px;
	--space-2: 10px;
	--space-3: 15px;
	--space-4: 20px;
	--space-6: 30px;
	--space-8: 40px;

	--radius-sm: 1px;
	--radius-md: 2px;
	--radius-lg: 4px;

	--shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
	--shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
	--shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

	--cd-pad: clamp(20px, 5vw, 72px);
	--cd-max: 1250px;
	--cd-header-h: 72px;

	/* Catalogue grid. inc/customizer.php overrides all three on :root from the
	   "Cleandosis — catalogue" settings; these are the design defaults and the
	   values used if the inline style never lands (customiser reset, cache). */
	--cd-cols: 5;   /* desktop, > 1024px */
	--cd-cols-t: 3; /* tablet, 761–1024px — derived: min(desktop, 3) */
	--cd-cols-m: 2; /* mobile, <= 760px */
}

/* --------------------------------------------------------------------------
   2. Reset and base type
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	font-weight: 400;
	overflow-x: hidden;
	text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 0 var(--space-2);
}

h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }

a {
	color: var(--color-accent-700);
	text-decoration: none;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--color-accent-800);
	text-decoration: underline;
}

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

img {
	height: auto;
}

figure { margin: 0; }

hr {
	border: 0;
	height: 1px;
	background: var(--color-divider);
	margin: var(--space-4) 0;
}

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

button {
	cursor: pointer;
}

section[id] {
	scroll-margin-top: calc(var(--cd-header-h) + 16px);
}

::selection {
	background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* The overlays, the mega panels and the filtered product cards are toggled with
   the `hidden` attribute, but each of them also sets its own `display` below —
   and an author rule beats the user-agent [hidden] rule whatever its
   specificity. Scoped to this theme's own components so no third-party script
   that shows a [hidden] element by setting an inline display is affected. */
.cd-mega[hidden],
.cd-explore[hidden],
.cd-search[hidden],
.cd-drawer[hidden],
.cd-card[hidden],
.cd-grid > li[hidden],
ul.products > li[hidden] {
	display: none !important;
}

:focus { outline: none; }

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important; /* core class: must beat any plugin layout rule */
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.cd-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 10px 18px;
	background: var(--color-accent);
	color: var(--color-bg);
	border-radius: 0 0 var(--radius-lg) 0;
}

.cd-skip:focus {
	left: 0;
	color: var(--color-bg);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. Layout scaffolding
   -------------------------------------------------------------------------- */
.cd-main {
	display: block;
	min-height: 40vh;
}

.cd-wrap {
	max-width: var(--cd-max);
	margin: 0 auto;
	padding: 0 var(--cd-pad);
	position: relative;
}

.cd-sec {
	padding: 56px 0;
}

.cd-sec__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.cd-sec__title {
	font-size: 32px;
	line-height: 42px;
	letter-spacing: -0.015em;
	margin: 0;
}

.cd-kicker {
	display: block;
	font-size: 13px;
	line-height: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	margin: 0 0 14px;
}

/* --------------------------------------------------------------------------
   4. Buttons, tags, inputs, pills, quantity
   -------------------------------------------------------------------------- */
.cd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	text-decoration: none;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	color: var(--color-text);
	background: transparent;
	border: 1px solid transparent;
	padding: 10px 18px;
	border-radius: 999px;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.cd-btn:hover { text-decoration: none; }
.cd-btn:disabled,
.cd-btn.is-disabled { opacity: .45; cursor: not-allowed; }

.cd-btn--primary {
	background: var(--color-accent);
	color: var(--color-bg);
}

.cd-btn--primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.cd-btn--primary:active { background: var(--color-accent-700); }

.cd-btn--secondary {
	border-color: var(--color-divider);
	color: var(--color-text);
}

.cd-btn--secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.cd-btn--secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

.cd-btn--ghost {
	color: var(--color-accent-700);
	padding-inline: var(--space-2);
}

.cd-btn--ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-800); }

.cd-btn--block {
	width: 100%;
	margin-top: var(--space-1);
}

.cd-iconbtn {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	transition: background-color .18s ease;
}

.cd-iconbtn:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.cd-iconbtn.cd-btn--primary { background: var(--color-accent); color: var(--color-bg); }
.cd-iconbtn.cd-btn--primary:hover { background: var(--color-accent-600); }

.cd-tag {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	letter-spacing: 0.02em;
	line-height: 1.5;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--color-neutral-100);
	color: var(--color-neutral-800);
}

.cd-tag--accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.cd-tag--mint { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.cd-tag--neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }

.cd-input {
	width: 100%;
	min-height: 36px;
	padding: 6px 10px;
	font-size: 14px;
	color: var(--color-text);
	caret-color: var(--color-accent);
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-md);
}

.cd-input::placeholder {
	color: color-mix(in srgb, var(--color-text) 65%, transparent);
	opacity: 1;
}

.cd-input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.cd-input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

select.cd-input {
	appearance: none;
	padding-right: 28px;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 13px center, right 8px center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.cd-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 var(--space-4);
}

.cd-pill {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--color-surface);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}

.cd-pill:hover { background: var(--color-accent-100); color: var(--color-accent-800); text-decoration: none; }
.cd-pill.is-active { background: var(--color-text); color: var(--color-bg); }
.cd-pill--sub { font-weight: 400; font-size: 13px; padding: 5px 13px; }

/* Quantity. Also wraps WooCommerce's own .quantity, which carries the
   – / + buttons injected by inc/woocommerce.php. */
.cd-qty,
.woocommerce .quantity,
.quantity {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--color-divider);
	border-radius: 999px;
	background: var(--color-bg);
}

.cd-qty__btn {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--color-text);
}

.cd-qty__btn:hover { background: var(--color-accent-100); color: var(--color-accent-800); }

.cd-qty__input,
.quantity input[type="number"],
.quantity .qty {
	width: 44px;
	min-height: 28px;
	padding: 2px;
	text-align: center;
	border: 0;
	background: transparent;
	font-size: 14px;
	-moz-appearance: textfield;
}

.cd-qty__input::-webkit-outer-spin-button,
.cd-qty__input::-webkit-inner-spin-button,
.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --------------------------------------------------------------------------
   5. Print treatments and placeholders
   -------------------------------------------------------------------------- */
.halftone {
	position: relative;
	filter: grayscale(0.35) contrast(1.15);
	overflow: hidden;
}

.halftone::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(circle, rgba(0, 0, 0, 0.22) 30%, transparent 32%);
	background-size: 3px 3px;
	mix-blend-mode: multiply;
}

/* The plate numeral: a paper span holding the real text plus three
   misregistered C/M/Y plates whose multiply overlap prints the dark core. */
.cmyk-num {
	--cmyk-num-ground: var(--color-bg);
	position: relative;
	width: fit-content;
	line-height: 0.9;
	font-family: var(--font-heading);
	font-weight: 600;
	font-feature-settings: "pnum" 1;
	background: var(--cmyk-num-ground);
	padding: 0.12em;
	margin: -0.12em;
}

.cmyk-num .paper {
	color: var(--color-bg);
	text-shadow: 0.036em 0.025em 0 var(--color-bg), -0.031em -0.023em 0 var(--color-bg);
}

.cmyk-num .plate {
	position: absolute;
	inset: 0.12em;
	mix-blend-mode: multiply;
	pointer-events: none;
	user-select: none;
}

.cmyk-num .plate-c { color: var(--color-accent); }

.cmyk-num .plate-m {
	color: var(--color-accent-2);
	translate: 0.036em 0.025em;
}

.cmyk-num .plate-y {
	color: var(--color-process-yellow);
	translate: -0.031em -0.023em;
}

/* Image tiles (menu, categories, accreditations). */
.cd-tile {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-neutral-300);
}

.cd-tile--circle { border-radius: 50%; }
.cd-tile--rounded { border-radius: 14px; }

.cd-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cd-tile__mono {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 26px;
	color: var(--color-accent-800);
}

/* Photo placeholders. */
.cd-ph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 120px;
	padding: var(--space-4);
	text-align: center;
	background:
		repeating-linear-gradient(-45deg, color-mix(in srgb, var(--color-neutral-400) 22%, transparent) 0 6px, transparent 6px 12px),
		var(--color-neutral-200);
	color: var(--color-neutral-700);
	font-size: 13px;
	line-height: 19px;
}

.cd-ph span {
	max-width: 24ch;
}

/* --------------------------------------------------------------------------
   6. Header, desktop nav and mega menu
   -------------------------------------------------------------------------- */
/* The pill header. Three things are set from the Customizer (inc/customizer.php
   writes them as custom properties on this element): the background opacity and
   the backdrop blur once the page is scrolled, and the drop shadow. The sticky
   mode is the data attribute below.

   theme.js keeps --cd-header-h on :root equal to the rendered height, and drops
   it to 0 while the header is hidden, so a sticky element under it (the product
   tab bar) rises to the top instead of leaving a gap. */
.cd-header {
	--cd-header-alpha: 92;
	--cd-header-blur: 10px;
	--cd-header-shadow: var(--shadow-md);
	position: sticky;
	top: 0;
	z-index: 60;
	padding: 10px 12px 0;
	background: linear-gradient(var(--color-bg) 70%, transparent);
	will-change: transform;
	transition: transform .25s ease;
}

.cd-header[data-sticky="off"] {
	position: static;
	transition: none;
}

/* Scroll-up mode: out of the way going down, back on the way up. */
.cd-header.is-hidden {
	transform: translateY(-100%);
}

/* Scrolled: the pill lifts off the page. */
.cd-header.is-scrolled .cd-nav {
	background: color-mix(in srgb, var(--color-surface) calc(var(--cd-header-alpha) * 1%), transparent);
	-webkit-backdrop-filter: blur(var(--cd-header-blur));
	backdrop-filter: blur(var(--cd-header-blur));
	box-shadow: var(--cd-header-shadow);
}

/* Deliberately wider than --cd-max (1250px): the floating pill header was asked
   to keep small side margins, so it runs past the content column on both sides. */
.cd-header__inner {
	max-width: 1320px;
	margin: 0 auto;
}

@media (min-width: 761px) {
	.cd-header { padding: 12px 24px 0; }
}

.cd-nav {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: nowrap;
	padding: 8px 10px 8px 20px;
	border-radius: 999px;
	background: var(--color-surface);
	border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
	box-shadow: var(--cd-header-shadow), 0 1px 0 color-mix(in srgb, var(--color-text) 6%, transparent);
	transition: background .2s ease, box-shadow .2s ease;
}

.cd-logo {
	display: flex;
	align-items: center;
	flex: none;
	text-decoration: none;
}

.cd-logo:hover { text-decoration: none; }

.cd-logo__img {
	width: auto;
	display: block;
}

.cd-nav__items {
	display: flex;
	gap: 2px;
	margin-left: 8px;
	min-width: 0;
}

.cd-nav__item { position: static; }


.cd-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	border-radius: 999px;
	font-size: 14px;
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
}

.cd-nav__link:hover,
.cd-nav__item.is-current > .cd-nav__link {
	background: var(--color-bg);
	color: var(--color-accent-800);
	text-decoration: none;
}

.cd-nav__chev { transition: transform .2s ease; }
.cd-nav__link[aria-expanded="true"] .cd-nav__chev { transform: rotate(180deg); }

.cd-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 10px);
	z-index: 30;
	padding: 28px 32px 32px;
	border-radius: var(--radius-lg);
	background: var(--color-bg);
	box-shadow: var(--shadow-lg);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 28px 42px;
}

/* A plain dropdown (one column, no promo) anchors to its own link. */
.cd-nav__item.has-mega--compact { position: relative; }

.cd-mega--compact {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	width: max-content;
	min-width: 240px;
	max-width: 340px;
	padding: 14px 14px 12px;
	display: block;
}

.cd-mega--compact .cd-mega__head { margin-bottom: 4px; padding-inline: 6px; }
.cd-mega--compact .cd-mega__link { margin: 0; }

.cd-mega__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.cd-mega__head {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	margin-bottom: 6px;
}

.cd-mega__col a {
	font-size: 15px;
	line-height: 22px;
	color: inherit;
	padding: 2px 0;
}

.cd-mega__col a:hover { color: var(--color-accent-800); }

/* A mega-menu row is a tile and its label. The picture comes from the item's own
   "Tile image" field first, then from whatever the item links to, then from the
   letter placeholder — inc/nav.php, cd_menu_item_image(). Ticking "Hide image"
   stops at that placeholder instead of inheriting. */
.cd-mega__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 6px;
	margin: 0 -6px;
	border-radius: var(--radius-lg);
	color: inherit;
	text-decoration: none;
}

.cd-mega__link:hover {
	background: var(--color-neutral-200);
	color: var(--color-accent-800);
	text-decoration: none;
}

.cd-mega__link .cd-tile {
	width: 36px;
	flex: none;
	border-radius: 10px;
}

.cd-mega__link .cd-tile__mono { font-size: 16px; }

.cd-mega__link-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cd-mega__link-label {
	font-size: 15px;
	line-height: 20px;
}

.cd-mega__link-tag {
	font-size: 12px;
	line-height: 16px;
	color: var(--color-neutral-700);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


.cd-mega__promo {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	border-radius: var(--radius-lg);
	background: var(--color-accent-100);
	color: var(--color-accent-900);
}

.cd-mega__promo-kicker {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-800);
}

.cd-mega__promo-title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 26px;
}

.cd-mega__promo .cd-btn { align-self: flex-start; }

.cd-nav__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	flex: none;
}

.cd-nav__search { background: var(--color-bg); }

.cd-nav__cart {
	gap: 6px;
	padding: 9px 16px;
}

.cd-nav__cart-icon { display: none; }
.cd-nav__account-icon { display: none; }

.cd-cart-count {
	font-variant-numeric: tabular-nums;
}

.cd-nav__burger { display: none; }

/* Desktop: the pill is a three-track grid, logo | menu | actions, and the two
   outer tracks are both 1fr — equal, whatever the logo and the buttons measure —
   so the menu sits on the true centre line of the pill rather than in whatever
   space the logo leaves over. .cd-nav keeps position:relative and
   .cd-nav__item stays position:static, so the mega panel still spans the pill.

   Between 761 and 1079 the three blocks together are wider than the pill, so the
   links tighten and the two right-hand buttons drop to icons: the alternative is
   the menu sliding off centre or, worse, the page scrolling sideways. */
@media (min-width: 761px) {
	.cd-nav {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		/* Symmetric: the two 1fr tracks divide the *content* box, so an uneven
		   left/right padding would push the centre line off the pill by half the
		   difference. Measured: 20px/10px put the menu 5px right of centre. */
		padding: 8px 16px;
	}

	.cd-nav__logo {
		grid-column: 1;
		justify-self: start;
	}

	.cd-nav__items {
		grid-column: 2;
		justify-content: center;
		margin-left: 0;
	}

	.cd-nav__actions {
		grid-column: 3;
		justify-self: end;
		margin-left: 0;
	}

	.cd-nav__actions .cd-btn { white-space: nowrap; }
}

@media (min-width: 761px) and (max-width: 1079px) {
	.cd-nav { padding: 8px 10px; }

	.cd-nav__link {
		padding: 8px 6px;
		font-size: 13px;
	}

	/* Words the icons already say: the cart keeps its count, the account button
	   keeps its aria-label. */
	.cd-nav__cart {
		padding: 9px 12px;
		gap: 5px;
	}

	.cd-nav__cart .cd-nav__cart-icon { display: block; }
	.cd-nav__cart .cd-nav__cart-label { display: none; }

	.cd-nav__account {
		width: 36px;
		height: 36px;
		padding: 0;
		border-radius: 50%;
	}

	.cd-nav__account .cd-nav__account-icon { display: block; }
	.cd-nav__account .cd-nav__account-label { display: none; }
}

@media (max-width: 760px) {
	.cd-nav {
		padding: 8px 8px 8px 14px;
	}

	.cd-nav__items,
	.cd-nav__account {
		display: none;
	}

	/* Search stays in the pill on phones — the menu is not the only way in. */
	.cd-nav__search {
		display: inline-grid;
		background: var(--color-neutral-200);
	}

	.cd-nav__burger { display: inline-grid; }

	.cd-nav__cart {
		width: 36px;
		height: 36px;
		padding: 0;
		border-radius: 50%;
		position: relative;
		background: var(--color-bg);
		color: var(--color-text);
	}

	.cd-nav__cart:hover { background: var(--color-neutral-300); }
	.cd-nav__cart-icon { display: block; }
	.cd-nav__cart-label { display: none; }

	.cd-nav__cart .cd-cart-count {
		position: absolute;
		top: -3px;
		right: -3px;
		min-width: 18px;
		height: 18px;
		display: grid;
		place-items: center;
		padding: 0 4px;
		border-radius: 999px;
		background: var(--color-accent);
		color: var(--color-bg);
		font-size: 11px;
		line-height: 1;
	}
}

/* --------------------------------------------------------------------------
   7. Overlays: shared chrome
   -------------------------------------------------------------------------- */
.cd-backdrop {
	position: fixed;
	inset: 0;
	background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent);
	opacity: 0;
	transition: opacity .25s ease;
}

.is-open > .cd-backdrop,
.is-open .cd-backdrop { opacity: 1; }

body.cd-lock {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. Mobile explore menu
   -------------------------------------------------------------------------- */
.cd-explore {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--color-bg);
	display: grid;
	grid-template-rows: auto 1fr auto;
	overflow: hidden;
}

.cd-explore .cd-backdrop { display: none; }

/* The bar is three tracks so the logo sits dead centre whatever is beside it,
   and the close control keeps the top-right corner to itself. */
.cd-explore__bar {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--color-surface);
}

.cd-explore__bar-side {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.cd-explore__bar-side--end { justify-content: flex-end; }

.cd-explore__bar-mid {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.cd-explore__bar .cd-iconbtn {
	background: var(--color-bg);
	width: 44px;
	height: 44px;
}

.cd-explore__body {
	min-height: 0;
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	overflow: hidden;
}

/* The rail: every section down the left, the selected one lit. */
.cd-explore__rail {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--color-surface);
	border-right: 1px solid var(--color-divider);
	padding-bottom: env(safe-area-inset-bottom);
}

.cd-explore__parent {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 84px;
	padding: 10px 6px;
	border: 0;
	border-bottom: 1px solid var(--color-divider);
	background: transparent;
	color: var(--color-neutral-800);
	font-family: var(--font-heading);
	font-size: 12.5px;
	line-height: 16px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.cd-explore__parent .cd-tile {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
}

.cd-explore__parent .cd-tile__mono { font-size: 16px; }

.cd-explore__parent-label {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.cd-explore__parent:hover { text-decoration: none; color: var(--color-accent-800); }

.cd-explore__parent.is-active {
	background: var(--color-bg);
	color: var(--color-accent-800);
}

.cd-explore__parent.is-active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 3px;
	border-radius: 0 2px 2px 0;
	background: var(--color-accent);
}

/* A section with no sub-items is a plain link: a small arrow says so. */
.cd-explore__parent--link::after {
	content: "\2192";
	font-size: 12px;
	color: var(--color-neutral-500);
}

/* The panes: one visible at a time, scrolling on its own. */
.cd-explore__panes {
	min-width: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 18px 16px calc(24px + env(safe-area-inset-bottom));
}

.cd-explore__pane:not([hidden]) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
}

.cd-explore__pane-title {
	font-family: var(--font-heading);
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
	color: var(--color-text);
}

.cd-explore__section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cd-explore__head {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-800);
}

.cd-explore__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px 10px;
}

.cd-explore__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
	text-align: center;
	font-size: 13px;
	line-height: 17px;
}

.cd-explore__tile .cd-tile {
	width: 64px;
	height: 64px;
	border-radius: 14px;
}

.cd-explore__tile:hover { text-decoration: none; color: var(--color-accent-800); }

.cd-explore__all {
	align-self: flex-start;
	min-height: 44px;
	justify-content: center;
	border-radius: var(--radius-lg);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 12px;
	background: var(--color-surface);
}

/* Real photos in menu tiles stay clean — the halftone screen is for placeholders only. */
.cd-explore .cd-tile.halftone,
.cd-mega__link .cd-tile.halftone { filter: none; }
.cd-explore .cd-tile.halftone::after,
.cd-mega__link .cd-tile.halftone::after { display: none; }

@media (min-width: 480px) {
	.cd-explore__body { grid-template-columns: 132px minmax(0, 1fr); }
	.cd-explore__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cd-explore__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: var(--color-surface);
}

.cd-explore__foot a,
.cd-explore__foot button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--color-bg);
	color: var(--color-text);
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
}

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

@media (min-width: 761px) {
	.cd-explore { display: none; }
}

/* --------------------------------------------------------------------------
   9. Search overlay — a top sheet
   -------------------------------------------------------------------------- */
.cd-search {
	position: fixed;
	inset: 0;
	z-index: 95;
	display: flex;
	flex-direction: column;
}

/* The sheet is a column: a fixed field row on top, the results scrolling under
   it. It never grows past the viewport, so the input is always reachable. */
.cd-search__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
	/* Stop short of the bottom so the page still shows underneath — this is a
	   sheet the header pulled down, not a second page. */
	max-height: min(100%, 86vh);
	background: var(--color-bg);
	box-shadow: var(--shadow-lg);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	transform: translateY(-12px);
	opacity: 0;
	transition: transform .25s ease, opacity .25s ease;
}

.cd-search.is-open .cd-search__panel {
	transform: translateY(0);
	opacity: 1;
}

/* Both rows line their content up with the rest of the site. */
.cd-search__wrap {
	width: 100%;
	max-width: var(--cd-max);
	margin: 0 auto;
	padding-left: var(--cd-pad);
	padding-right: var(--cd-pad);
}

.cd-search__head {
	flex: none;
	padding-top: 18px;
	border-bottom: 1px solid var(--color-divider);
	background: var(--color-bg);
}

.cd-search__form {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 14px;
}

.cd-search__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.cd-search__icon { flex: none; color: var(--color-neutral-700); }

.cd-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(20px, 3.2vw, 32px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	padding: 6px 0;
	appearance: none;
}

.cd-search__input::placeholder {
	color: var(--color-neutral-500);
	font-weight: 400;
}

.cd-search__input:focus-visible { outline: none; }

/* The browser's own clear cross is unstyleable and duplicates ours. */
.cd-search__input::-webkit-search-decoration,
.cd-search__input::-webkit-search-cancel-button,
.cd-search__input::-webkit-search-results-button,
.cd-search__input::-webkit-search-results-decoration {
	appearance: none;
	display: none;
}

.cd-search__clear {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 999px;
	background: var(--color-surface);
	color: var(--color-neutral-800);
	cursor: pointer;
}

.cd-search__clear:hover { background: var(--color-neutral-300); }
.cd-search__clear[hidden] { display: none; }

.cd-search__submit { flex: none; }
.cd-search__close { flex: none; }

.cd-search__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-top: 18px;
	padding-bottom: 28px;
	-webkit-overflow-scrolling: touch;
}

/* --- Empty state: browse the catalogue by category ---------------------- */
.cd-search__suggest {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cd-search__suggest[hidden] { display: none; }

.cd-search__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cd-search__chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--color-divider);
	border-radius: 999px;
	background: #fff;
	color: var(--color-text);
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.cd-search__chip:hover {
	border-color: var(--color-accent-400);
	color: var(--color-accent-800);
	text-decoration: none;
}

/* --- Results ----------------------------------------------------------- */
.cd-search__results:empty { display: none; }

.cd-search__count {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--color-neutral-700);
}

.cd-search__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.cd-scard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
}

.cd-scard__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-neutral-100);
}

.cd-scard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cd-scard__noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--color-neutral-200);
}

.cd-scard__rx {
	position: absolute;
	top: 8px;
	left: 8px;
}

.cd-scard__kicker {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-800);
}

.cd-scard__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 16px;
	line-height: 21px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 42px;
}

.cd-scard__title a { color: inherit; text-decoration: none; }
.cd-scard__title a:hover { color: var(--color-accent-800); text-decoration: none; }

.cd-scard__price {
	font-size: 15px;
	color: var(--color-neutral-800);
}

.cd-scard__action { margin-top: auto; }
.cd-scard__action.cd-btn { min-height: 44px; }
.cd-scard__action .cd-btn { min-height: 44px; }

.cd-search__all {
	display: inline-flex;
	margin-top: 22px;
	min-height: 44px;
}

/* --- Searching / empty / error ----------------------------------------- */
.cd-search__state {
	padding: 10px 0 20px;
}

.cd-search__state-title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 19px;
	line-height: 26px;
}

.cd-search__state-hint {
	margin: 6px 0 0;
	color: var(--color-neutral-700);
	font-size: 14px;
}

.cd-skel {
	display: block;
	background: var(--color-neutral-200);
	border-radius: var(--radius-md);
	animation: cd-skel-pulse 1.4s ease-in-out infinite;
}

.cd-skel--line { height: 13px; }
.cd-skel--short { width: 55%; }
.cd-skel--btn { height: 44px; margin-top: 6px; border-radius: 999px; }

.cd-scard--skeleton .cd-scard__media { background: var(--color-neutral-200); }

@keyframes cd-skel-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
	.cd-skel { animation: none; }
}

@media (max-width: 1024px) {
	.cd-search__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	/* Full-height sheet: the field row stays put, the grid scrolls under it. */
	.cd-search__panel {
		height: 100%;
		max-height: 100%;
		border-radius: 0;
	}

	.cd-search__head { padding-top: 12px; }
	.cd-search__form { gap: 8px; }
	/* Smaller than the desktop display size so the placeholder fits a phone. */
	.cd-search__input { font-size: 18px; }
	.cd-search__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.cd-search__body { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
	.cd-scard__title { font-size: 15px; line-height: 20px; min-height: 40px; }
	.cd-search__all { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
	.cd-search__submit { display: none; }
}

/* --------------------------------------------------------------------------
   10. Cart drawer
   -------------------------------------------------------------------------- */
.cd-drawer {
	position: fixed;
	inset: 0;
	z-index: 95;
}

.cd-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100%);
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	box-shadow: var(--shadow-lg);
	transform: translateX(100%);
	transition: transform .28s ease;
}

.cd-drawer.is-open .cd-drawer__panel { transform: translateX(0); }

.cd-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--color-divider);
	flex: none;
}

.cd-drawer__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
}

.cd-drawer .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1 1 auto;
	overflow-y: auto;
}

.cd-drawer__ship {
	padding: 14px 18px;
	background: var(--color-accent-100);
	color: var(--color-accent-900);
	flex: none;
}

.cd-drawer__ship-text {
	display: block;
	font-size: 13px;
	line-height: 18px;
	margin-bottom: 8px;
}

.cd-drawer__bar {
	display: block;
	height: 5px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-accent) 22%, transparent);
	overflow: hidden;
}

.cd-drawer__bar-fill {
	display: block;
	height: 100%;
	background: var(--color-accent);
	border-radius: 999px;
	transition: width .3s ease;
}

.cd-drawer__items {
	list-style: none;
	margin: 0;
	padding: 6px 18px;
}

.cd-drawer__item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 12px;
	align-items: start;
	padding: 14px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.cd-drawer__thumb img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

.cd-drawer__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cd-drawer__kicker {
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-700);
}

.cd-drawer__name {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 20px;
	color: inherit;
}

.cd-drawer__variant,
.cd-drawer__variant p {
	font-size: 12px;
	line-height: 17px;
	color: var(--color-neutral-700);
	margin: 0;
}

.cd-drawer__price {
	font-size: 14px;
	color: var(--color-neutral-800);
}

.cd-drawer__info .cd-qty { margin-top: 6px; }

.cd-drawer__remove {
	border: 0;
	background: transparent;
	color: var(--color-neutral-700);
	padding: 4px;
	border-radius: 50%;
	line-height: 0;
}

.cd-drawer__remove:hover { color: var(--color-accent-800); background: var(--color-surface); }

.cd-drawer__foot {
	flex: none;
	padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--color-divider);
	background: var(--color-bg);
}

.cd-drawer__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	font-size: 16px;
	margin-bottom: 12px;
}

.cd-drawer__total strong {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
}

.cd-drawer__note {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 17px;
	color: var(--color-neutral-700);
}

.cd-drawer__empty {
	padding: 40px 18px;
	text-align: center;
	color: var(--color-neutral-800);
}

@media (max-width: 480px) {
	.cd-drawer__panel { width: 100%; }
}

/* --------------------------------------------------------------------------
   11. Product card and grid
   -------------------------------------------------------------------------- */
/* The column count is a setting, not a measurement: --cd-cols comes from the
   Customizer (Cleandosis — catalogue) so the shop, a category, related products
   and the home page's "Our top medicines" all count the same. */
.cd-grid,
ul.products {
	display: grid;
	grid-template-columns: repeat(var(--cd-cols, 5), minmax(0, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cd-grid > li,
ul.products > li {
	display: flex;
	list-style: none;
	margin: 0;
	min-width: 0;
}

.cd-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	width: 100%;
	padding: var(--space-3);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	transition: box-shadow .2s ease, transform .2s ease;
}

.cd-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.cd-card__media {
	position: relative;
	display: block;
	color: inherit;
}

.cd-card__img {
	aspect-ratio: 1 / 1;
	background: var(--color-neutral-200);
	border-radius: var(--radius-md);
}

.cd-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cd-card__media .cd-tag {
	position: absolute;
	top: 8px;
	left: 8px;
}

.cd-card__media .cd-card__rx {
	left: auto; /* must outrank .cd-card__media .cd-tag, or left+right stretch the pill across the image */
	right: 8px;
}

.cd-card__kicker {
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-700);
}

.cd-card__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.2;
	margin: 0;
}

.cd-card__title a { color: inherit; }
.cd-card__title a:hover { color: var(--color-accent-800); text-decoration: none; }

.cd-card__variant {
	min-height: 36px;
	padding: 4px 24px 4px 8px;
	font-size: 13px;
	background-color: var(--color-bg);
}

.cd-card__pricing {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: auto;
}

.cd-card__price {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
}

.cd-card__price del { opacity: .55; font-size: 14px; font-weight: 400; }
.cd-card__price ins { text-decoration: none; }

.cd-card__was {
	font-size: 13px;
	color: var(--color-neutral-700);
}

.cd-card .cd-add { margin: 0; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.cd-footer {
	position: relative;
	margin-top: 28px;
	background: var(--color-surface);
	overflow: hidden;
}

.cd-footer__shapes {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.cd-capsule {
	position: absolute;
	display: block;
	border-radius: 999px;
	opacity: .9;
}

.cd-capsule--1 {
	left: -40px;
	top: -30px;
	width: 220px;
	height: 84px;
	transform: rotate(-28deg);
	background: linear-gradient(90deg, var(--color-accent-200) 0 50%, var(--color-accent-2-200) 50% 100%);
}

.cd-capsule--2 {
	left: 18%;
	top: 78%;
	width: 150px;
	height: 58px;
	transform: rotate(22deg);
	background: linear-gradient(90deg, var(--color-accent-2-200) 0 50%, var(--color-accent-100) 50% 100%);
}

.cd-capsule--3 {
	left: 62%;
	top: -60px;
	width: 300px;
	height: 110px;
	transform: rotate(18deg);
	opacity: .85;
	background: linear-gradient(90deg, var(--color-accent-100) 0 50%, var(--color-accent-2-200) 50% 100%);
}

.cd-capsule--4 {
	left: 84%;
	top: 62%;
	width: 120px;
	height: 46px;
	transform: rotate(-35deg);
	background: linear-gradient(90deg, var(--color-accent-200) 0 50%, var(--color-accent-2-100) 50% 100%);
}

.cd-capsule--5 {
	left: 46%;
	top: 88%;
	width: 90px;
	height: 34px;
	transform: rotate(-12deg);
	background: linear-gradient(90deg, var(--color-accent-2-200) 0 50%, var(--color-accent-200) 50% 100%);
}

.cd-footer__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, var(--color-neutral-400) 0.8px, transparent 1.1px);
	background-size: 10px 10px;
	opacity: .35;
	mask-image: linear-gradient(to bottom, transparent, #000 40%);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%);
}

.cd-footer__inner {
	position: relative;
	max-width: var(--cd-max);
	margin: 0 auto;
	padding: 56px var(--cd-pad) 28px;
}

.cd-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 42px clamp(28px, 4vw, 64px);
}

@media (max-width: 1000px) and (min-width: 761px) {
	.cd-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cd-footer__brand { grid-column: 1 / -1; }
}

.cd-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}

.cd-footer__blurb {
	margin: 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-neutral-700);
	max-width: 30ch;
}

.cd-footer__tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.cd-footer__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
	line-height: 22px;
	min-width: 0;
}

.cd-footer__head {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	margin-bottom: 4px;
}

.cd-footer__col a { color: inherit; }
.cd-footer__col a:hover { color: var(--color-accent-800); }

.cd-footer__legal {
	margin-top: 56px;
	padding-top: 20px;
	border-top: 1px solid var(--color-divider);
	display: flex;
	justify-content: space-between;
	gap: 14px 28px;
	flex-wrap: wrap;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-neutral-700);
}

.cd-footer__license,
.cd-footer__disclaimer {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 18px;
	color: var(--color-neutral-700);
	max-width: 90ch;
}

.cd-footer__legal-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 14px 0 0;
	padding: 0;
	font-size: 12px;
}

.cd-footer__legal-menu a { color: var(--color-neutral-700); }

@media (max-width: 760px) {
	.cd-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
	}

	.cd-footer__brand { grid-column: 1 / -1; }
	.cd-footer__legal { margin-top: 36px; }
}

/* --------------------------------------------------------------------------
   13. Pages, prose, lists, pagination, 404, comments
   -------------------------------------------------------------------------- */
.cd-page {
	max-width: 760px;
	margin: 0 auto;
	padding: 56px 0 72px;
}

.cd-page__head { margin-bottom: 28px; }

.cd-page__title {
	font-size: clamp(32px, 4.4vw, 42px);
	line-height: 1.1;
	margin: 0 0 var(--space-3);
}

.cd-page__intro {
	font-size: 17px;
	line-height: 27px;
	color: var(--color-neutral-800);
}

.cd-page__media {
	border-radius: var(--radius-lg);
	margin-bottom: 28px;
}

.cd-prose {
	font-size: 16px;
	line-height: 1.65;
}

.cd-prose > *:first-child { margin-top: 0; }

.cd-prose h2 { font-size: 28px; margin: 42px 0 var(--space-3); }
.cd-prose h3 { font-size: 22px; margin: 32px 0 var(--space-2); }
.cd-prose h4 { font-size: 18px; margin: 26px 0 var(--space-2); }
.cd-prose p { margin: 0 0 var(--space-4); }

.cd-prose ul,
.cd-prose ol {
	margin: 0 0 var(--space-4);
	padding-left: 22px;
}

.cd-prose li { margin-bottom: 8px; }

.cd-prose blockquote {
	margin: var(--space-6) 0;
	padding-left: var(--space-4);
	border-left: 3px solid var(--color-accent-300);
	font-style: italic;
	font-size: 19px;
	line-height: 30px;
}

.cd-prose img { border-radius: var(--radius-lg); }

.cd-prose figure { margin: var(--space-6) 0; }

.cd-prose figcaption {
	font-size: 13px;
	color: var(--color-neutral-700);
	margin-top: var(--space-2);
}

.cd-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin: 0 0 var(--space-4);
	display: block;
	overflow-x: auto;
}

.cd-prose th {
	text-align: left;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	padding: var(--space-2);
	border-bottom: 1px solid var(--color-divider);
	white-space: nowrap;
}

.cd-prose td {
	padding: var(--space-2);
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.cd-prose pre {
	overflow-x: auto;
	padding: var(--space-3);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	font-size: 13px;
}

.cd-prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--color-accent);
	color: var(--color-bg);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}

.cd-prose .wp-block-button__link:hover { background: var(--color-accent-600); color: var(--color-bg); }

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

.cd-list__item {
	padding: 20px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

.cd-list__link {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.25;
	color: inherit;
}

.cd-list__link:hover { color: var(--color-accent-800); }

.cd-list__meta {
	display: block;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	margin-top: 6px;
}

.cd-list__excerpt {
	margin: 8px 0 0;
	color: var(--color-neutral-800);
}

.cd-pagination {
	display: flex;
	justify-content: center;
	margin-top: 42px;
}

.cd-pagination .nav-links,
.cd-pagination .woocommerce-pagination ul,
.cd-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.cd-pagination li { border: 0; margin: 0; }

.cd-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 14px;
	text-decoration: none;
}

.cd-pagination .page-numbers:hover { background: var(--color-accent-100); color: var(--color-accent-800); }
.cd-pagination .page-numbers.current { background: var(--color-text); color: var(--color-bg); }
.cd-pagination .page-numbers.dots { background: transparent; }

.cd-postnav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	max-width: 760px;
	margin: 0 auto 72px;
	font-size: 14px;
}

.cd-empty {
	padding: 56px 0;
	text-align: center;
	color: var(--color-neutral-800);
}

.cd-empty .cd-btn { margin-top: var(--space-3); }

/* Search results page and 404 */
.cd-search-page { max-width: var(--cd-max); }

.cd-search-page__sub {
	font-size: 22px;
	margin: 42px 0 var(--space-4);
}

.cd-search-page__form,
.cd-404__form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: var(--space-4);
	max-width: 520px;
}

.cd-search-page__form .cd-input,
.cd-404__form .cd-input {
	flex: 1 1 220px;
	min-height: 42px;
	border-radius: 999px;
	padding-inline: 16px;
}


/* Comments */
.cd-comments {
	max-width: 760px;
	margin: 0 auto 72px;
}

.cd-comments__title {
	font-size: 22px;
	margin-bottom: var(--space-4);
}

.cd-comments__list,
.cd-comments__list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cd-comments__list .children { padding-left: 24px; }

.cd-comments__list li.comment {
	padding: 18px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

.cd-comments .comment-meta {
	font-size: 13px;
	color: var(--color-neutral-700);
	margin-bottom: 8px;
}

.cd-comments .avatar {
	border-radius: 50%;
	float: left;
	margin-right: 12px;
}

.cd-comment-form,
.comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.comment-form label {
	display: block;
	font-size: 12px;
	margin-bottom: 5px;
	color: var(--color-neutral-800);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	min-height: 36px;
	padding: 8px 10px;
	font: inherit;
	font-size: 14px;
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-md);
}

.comment-form textarea { min-height: 120px; resize: vertical; }

.comment-form .submit {
	align-self: flex-start;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--color-accent);
	color: var(--color-bg);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
}

.comment-form .submit:hover { background: var(--color-accent-600); }

/* --------------------------------------------------------------------------
   14. Stars
   -------------------------------------------------------------------------- */
.cd-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--color-accent-700);
	line-height: 0;
}

.cd-stars .is-off { opacity: .28; }

/* --------------------------------------------------------------------------
   15. Small screens and motion
   -------------------------------------------------------------------------- */
/* Tablet: the desktop count is too many for the width, so the grid steps down to
   --cd-cols-t (PHP derives it as min(desktop, 3), so choosing 2 on desktop never
   produces 3 here). repeat() will not take a calc(), hence the second property. */
@media (max-width: 1024px) and (min-width: 761px) {
	.cd-grid,
	ul.products {
		grid-template-columns: repeat(var(--cd-cols-t, 3), minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.cd-grid,
	ul.products {
		grid-template-columns: repeat(var(--cd-cols-m, 2), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.cd-grid,
	ul.products {
		gap: 12px;
	}

	.cd-card { padding: var(--space-2); }
	.cd-card__title { font-size: 15px; }
	.cd-card__price { font-size: 18px; }
	.cd-sec { padding: 42px 0; }
	.cd-sec__title { font-size: 26px; line-height: 34px; }
	h1 { font-size: 32px; }
	h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important; /* the only reliable way to stop third-party animations */
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.cd-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Floating-label fields — `.cd-float`
   The label sits inside the box and lifts to the top edge on focus or once
   the field has a value. Markup: the control FIRST, then the label, inside a
   `.cd-float` wrapper (WooCommerce prints label-then-input; inc/checkout.php
   and inc/account.php swap them). Inputs need `placeholder=" "` so
   :placeholder-shown can tell empty from filled. Selects and textareas keep
   the label lifted permanently. Use `.cd-float.is-filled` from JS when a
   control cannot report :placeholder-shown (selectWoo, autofilled dates).
   -------------------------------------------------------------------------- */
.cd-float {
	position: relative;
	margin: 0;
}

.cd-float > .cd-input,
.cd-float > .input-text,
.cd-float > input,
.cd-float > select,
.cd-float > textarea,
.cd-float > .select2-container .select2-selection--single {
	width: 100%;
	min-height: 56px;
	padding: 24px 14px 8px;
	border: 1px solid var(--color-neutral-300);
	border-radius: 10px;
	background: #fff;
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 15.5px;
	line-height: 22px;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.cd-float > textarea { min-height: 128px; padding-top: 28px; resize: vertical; }

.cd-float > select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23605d5d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.cd-float > label {
	position: absolute;
	left: 14px;
	top: 28px;
	transform: translateY(-50%);
	margin: 0;
	padding: 0;
	max-width: calc(100% - 28px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 15.5px;
	line-height: 20px;
	color: var(--color-neutral-600);
	pointer-events: none;
	transform-origin: left top;
	transition: top .15s ease, transform .15s ease, font-size .15s ease, color .15s ease;
}

.cd-float > label .required,
.cd-float > label .optional {
	font-size: inherit;
	color: inherit;
	text-decoration: none;
	margin-left: 4px;
}
.cd-float > label .required { color: var(--color-accent-700); }
.cd-float > label .optional { color: var(--color-neutral-500); font-size: .85em; }

.cd-float > input:focus ~ label,
.cd-float > .input-text:focus ~ label,
.cd-float > textarea:focus ~ label,
.cd-float > input:not(:placeholder-shown) ~ label,
.cd-float > .input-text:not(:placeholder-shown) ~ label,
.cd-float > textarea:not(:placeholder-shown) ~ label,
.cd-float > select ~ label,
.cd-float > .select2-container ~ label,
.cd-float.is-filled > label,
.cd-float.is-focus > label {
	top: 9px;
	transform: none;
	font-size: 11.5px;
	line-height: 14px;
	letter-spacing: .02em;
	color: var(--color-neutral-700);
}

.cd-float > input:focus ~ label,
.cd-float > .input-text:focus ~ label,
.cd-float > textarea:focus ~ label,
.cd-float.is-focus > label { color: var(--color-accent-700); }

.cd-float > input:focus,
.cd-float > .input-text:focus,
.cd-float > select:focus,
.cd-float > textarea:focus,
.cd-float.is-focus > .select2-container .select2-selection--single {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-accent-100);
}

/* Validation states — WooCommerce adds these classes to the wrapper. */
.cd-float.woocommerce-invalid > input,
.cd-float.woocommerce-invalid > .input-text,
.cd-float.woocommerce-invalid > select,
.cd-float.is-invalid > input,
.cd-float.is-invalid > .input-text { border-color: #c0392b; box-shadow: 0 0 0 3px #f9e2df; }
.cd-float.woocommerce-invalid > label,
.cd-float.is-invalid > label { color: #a93226; }
.cd-float.woocommerce-validated > input,
.cd-float.woocommerce-validated > .input-text { border-color: var(--color-accent-400); }

/* A trailing control (show/hide password, clear) sits inside the box. */
.cd-float > .cd-float__aside {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--color-neutral-600);
	cursor: pointer;
}
.cd-float > .cd-float__aside:hover { background: var(--color-neutral-100); color: var(--color-text); }
.cd-float.has-aside > input,
.cd-float.has-aside > .input-text { padding-right: 52px; }

/* Helper / error text under a floating field. */
.cd-float__hint {
	display: block;
	margin: 6px 2px 0;
	font-size: 12.5px;
	line-height: 18px;
	color: var(--color-neutral-600);
}

/* selectWoo inside a floating box. */
.cd-float > .select2-container { width: 100% !important; }
.cd-float > .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	height: 56px;
}
.cd-float > .select2-container .select2-selection__rendered { padding: 0; line-height: 22px; color: var(--color-text); }
.cd-float > .select2-container .select2-selection__arrow { top: 50%; right: 12px; transform: translateY(-50%); height: 24px; }

@media (prefers-reduced-motion: reduce) {
	.cd-float > label,
	.cd-float > input,
	.cd-float > .input-text,
	.cd-float > select,
	.cd-float > textarea { transition: none; }
}