/* ==========================================================================
   הגיל השלישי — design system

   Direction: calm retail for people aged 65+. Warm, roomy and quiet.
   The page should feel like a well-lit shop, not a dashboard.

   Deliberate constraints:
   · Nothing on the page is smaller than 17px.
   · Every interactive thing is at least 48px, buy actions are 56px.
   · Links are always underlined. Affordance is never carried by colour alone.
   · Nothing appears on hover that is not already there.
   · Two font weights only. Hierarchy comes from size and space, not weight soup.
   · Three products per row maximum on desktop. Fewer, larger, calmer.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
	font-family: 'Ploni';
	src: url('../fonts/ploni-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Ploni';
	src: url('../fonts/ploni-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
	/* Brand teal, sampled from the live site */
	--brand: #004952;
	--brand-deep: #00323a;
	--brand-mid: #00606d;
	--brand-soft: #b0dbe0;
	--brand-wash: #e7f3f4;

	/* One action colour, reserved for the thing to press. Green rather than the
	   teal itself, so a buy button never disappears into a brand-coloured band;
	   green also happens to be the only "go" colour that separates cleanly from
	   this particular teal by hue rather than by lightness alone. */
	--action: #0b7a43;        /* green: the one thing to press */
	--action-deep: #066034;
	--action-wash: #e6f4ec;
	--action-bright: #2ea86a;  /* the action colour, for dark bands */
	--focus: #0d7fb8;         /* azure: must read against teal and green */

	/* Cool neutrals, tuned to the teal. The ground is paper rather than white,
	   but the tint follows the brand instead of fighting it. */
	--ink: #1b2321;
	--ink-2: #495451;
	--ink-3: #5c6866;   /* 5.2:1 on the paper ground; was 4.1:1 */
	--line: #dde5e5;
	--line-strong: #7d8c8a;   /* 3.5:1 on white; was 2.2:1 */
	--surface: #ffffff;
	--ground: #f5f8f8;
	--ground-2: #eaf1f1;

	/* Semantic, kept away from the brand hue */
	--ok: #2c6e49;
	--ok-wash: #e8f2ec;
	--warn: #8a5a06;
	--warn-wash: #fbf2df;
	--danger: #a02c1a;        /* errors and removals stay unmistakably not-go */
	--danger-deep: #7d2114;
	--danger-wash: #faeae7;

	/* Type. Base 19px. The floor is 17px and appears nowhere but fine print. */
	--fs-fine: 1.0625rem;  /* 17 */
	--fs-base: 1.1875rem;  /* 19 */
	--fs-lg: 1.375rem;     /* 22 */
	--fs-xl: 1.625rem;     /* 26 */
	--fs-2xl: 2rem;        /* 32 */
	--fs-3xl: 2.5rem;      /* 40 */
	--fs-hero: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);

	--lh-tight: 1.22;
	--lh-body: 1.75;

	/* Space — a wide rhythm; the page breathes */
	--sp-1: .25rem;
	--sp-2: .5rem;
	--sp-3: .875rem;
	--sp-4: 1.25rem;
	--sp-5: 1.75rem;
	--sp-6: 2.5rem;
	--sp-7: 3.5rem;
	--sp-8: 5rem;
	--sp-9: 7rem;

	--tap: 48px;
	--tap-lg: 56px;

	/* Softer geometry than a typical shop. Friendly, not technical. */
	--radius: 14px;
	--radius-lg: 22px;
	--radius-pill: 999px;

	--shadow-1: 0 1px 2px rgba(27, 35, 33, .05), 0 4px 14px rgba(27, 35, 33, .05);
	--shadow-2: 0 3px 8px rgba(27, 35, 33, .07), 0 16px 36px -16px rgba(27, 35, 33, .18);
	--shadow-3: 0 28px 70px -28px rgba(27, 35, 33, .34);

	--wrap: 1200px;
	--wrap-narrow: 720px;
	--header-h: 96px;

	--ease: cubic-bezier(.2, .7, .3, 1);
}

@media (max-width: 900px) {
	:root {
		--header-h: 72px;
		--sp-8: 3.5rem;
		--sp-9: 4.5rem;
	}
}

/* Toolbar-driven modes (inc/accessibility.php) */
:root[data-contrast='high'] {
	--ink: #000;
	--ink-2: #151515;
	--ink-3: #2a2a2a;
	--ground: #fff;
	--ground-2: #fff;
	--line: #000;
	--line-strong: #000;
	--brand: #00323a;
	--action: #054d29;
	--danger: #8c1d18;
}

:root[data-fontscale='1'] { font-size: 112.5%; }
:root[data-fontscale='2'] { font-size: 125%; }

/* --- Reset ---------------------------------------------------------------- */

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

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

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

body {
	margin: 0;
	direction: rtl;
	text-align: right;
	background: var(--ground);
	color: var(--ink);
	font-family: 'Ploni', 'Segoe UI', 'Arial Hebrew', system-ui, sans-serif;
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

.ta-icon { inline-size: 1.25em; block-size: 1.25em; flex: none; }

[hidden] { display: none !important; }

h1, h2, h3, h4 {
	margin: 0 0 var(--sp-4);
	line-height: var(--lh-tight);
	font-weight: 700;
	text-wrap: balance;
	letter-spacing: -.015em;
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p, ul, ol { margin: 0 0 var(--sp-4); }
p { max-width: 66ch; }

/* Links are always underlined in running text. Colour alone is not an
   affordance for a reader whose contrast sensitivity has dropped. */
a { color: var(--brand-mid); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--brand-deep); text-decoration-thickness: 2.5px; }
a.btn, a.card-link, nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 6px;
}

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

/* --- Layout --------------------------------------------------------------- */

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-6); }
.section--surface { background: var(--surface); }
.section--wash { background: var(--ground-2); }

.stack > * + * { margin-block-start: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* Three across on desktop, two on tablet, one on phone. Never a dense wall. */
.grid-products {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: repeat(3, 1fr);
}

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

/* Section heads: one line of purpose, then the goods. */
.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-block-end: var(--sp-6);
	flex-wrap: wrap;
}

.section-head h2 { margin: 0; }

/* --- Skip link ------------------------------------------------------------ */

.skip-link {
	position: absolute;
	inset-inline-start: var(--sp-4);
	inset-block-start: -100px;
	z-index: 999;
	background: var(--brand);
	color: #fff;
	padding: var(--sp-3) var(--sp-5);
	border-radius: 0 0 var(--radius) var(--radius);
	font-weight: 700;
	text-decoration: none;
	transition: inset-block-start .18s var(--ease);
}

.skip-link:focus { inset-block-start: 0; color: #fff; }

/* --- Buttons -------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: var(--tap);
	padding: var(--sp-3) var(--sp-5);
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	background: var(--brand);
	color: #fff;
	font-weight: 700;
	font-size: var(--fs-base);
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .18s var(--ease);
}

.btn:hover { background: var(--brand-deep); color: #fff; }

/* The only loud thing on any page. */
.btn--buy {
	background: var(--action);
	min-height: var(--tap-lg);
	padding-inline: var(--sp-6);
	font-size: var(--fs-lg);
	box-shadow: var(--shadow-1);
}

.btn--buy:hover { background: var(--action-deep); }

.btn--ghost { background: transparent; color: var(--brand); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--brand-wash); color: var(--brand-deep); border-color: var(--brand); }

.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Icon controls always ship with a visible label beside them. */
.icon-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-inline-size: var(--tap);
	min-block-size: var(--tap);
	padding: var(--sp-1) var(--sp-2);
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	text-decoration: none;
}

.icon-btn:hover { background: var(--brand-wash); color: var(--brand-deep); }
.icon-btn svg { inline-size: 28px; block-size: 28px; }
.icon-btn span { font-size: var(--fs-fine); font-weight: 700; line-height: 1; }

/* --- Forms ---------------------------------------------------------------- */

label { display: block; font-weight: 700; margin-block-end: var(--sp-2); }

input[type='text'], input[type='email'], input[type='tel'], input[type='search'],
input[type='number'], input[type='password'], select, textarea {
	inline-size: 100%;
	min-height: var(--tap);
	padding: var(--sp-3) var(--sp-4);
	border: 2px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
}

input:focus, select:focus, textarea:focus {
	border-color: var(--brand);
	outline: 3px solid var(--brand-soft);
	outline-offset: 0;
}

/* Errors say what is wrong in words. Colour is the second signal, never the first. */
.field-error { color: var(--danger); font-weight: 700; margin-block-start: var(--sp-2); font-size: var(--fs-fine); }
.field-error::before { content: '⚠ '; }

/* --- Text utilities ------------------------------------------------------- */

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

.eyebrow {
	display: block;
	font-size: var(--fs-fine);
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--brand-mid);
	margin-block-end: var(--sp-2);
}

.lede { font-size: var(--fs-lg); color: var(--ink-2); max-width: 60ch; }
.fine { font-size: var(--fs-fine); color: var(--ink-2); }

.price { font-weight: 700; font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.price del { color: var(--ink-3); font-weight: 400; font-size: var(--fs-base); margin-inline-end: var(--sp-2); }
.price ins { text-decoration: none; color: var(--action-deep); }

/* Availability and delivery are always spelled out, not just coloured. */
.stock { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-fine); }
.stock--in { color: var(--ok); }
.stock--out { color: var(--ink-3); }

.badge {
	display: inline-block;
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--radius-pill);
	font-size: var(--fs-fine);
	font-weight: 700;
	background: var(--brand-wash);
	color: var(--brand-deep);
}

.badge--sale { background: var(--action-wash); color: var(--action-deep); }

.overflow-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Top line ------------------------------------------------------------- */

.topline { background: var(--brand); color: #fff; font-size: var(--fs-fine); }
.topline__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 46px; flex-wrap: wrap; }
.topline p { margin: 0; max-width: none; }
.topline__note { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; }
.topline__note svg { inline-size: 22px; block-size: 22px; flex: none; }
.topline a { color: #fff; font-weight: 700; }
.topline a:hover { color: var(--brand-soft); }

@media (max-width: 640px) { .topline__phone { display: none; } .topline__inner { justify-content: center; } }

/* --- Header --------------------------------------------------------------- */

.site-header { position: sticky; top: 0; z-index: 90; background: var(--surface); box-shadow: 0 1px 0 var(--line); }

/* Row 1 ------------------------------------------------------------------- */

.header-main { border-block-end: 1px solid var(--line); }

.header-main__inner {
	display: grid;
	grid-template-columns: auto minmax(240px, 1fr) auto;
	align-items: center;
	gap: var(--sp-5);
	padding-block: var(--sp-4);
}

.header-brand img { max-block-size: 74px; inline-size: auto; }
.header-brand__title { font-size: var(--fs-xl); font-weight: 700; color: var(--brand); text-decoration: none; }
.header-burger { display: none; }

/* Search: the widest thing in the header, because it is the main tool. */
.header-search { position: relative; display: flex; }

.header-search input[type='search'] {
	min-block-size: var(--tap-lg);
	/* inline-end clears the submit button, which is absolutely placed there */
	padding-inline: var(--sp-5) 9.5rem;
	border-radius: var(--radius-pill);
	border-color: var(--line-strong);
	background: var(--ground);
	font-size: var(--fs-base);
	text-overflow: ellipsis;
}

.header-search input[type='search']:focus { background: var(--surface); }

.header-search__go {
	position: absolute;
	/* inline-end = left in RTL, so the button never sits where the text starts */
	inset-inline-end: 5px;
	inset-block: 5px;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-block-size: 46px;
	padding-inline: var(--sp-4);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--brand);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.header-search__go:hover { background: var(--brand-deep); }
.header-search__go svg { inline-size: 22px; block-size: 22px; }
.header-search__results { position: absolute; inset-block-start: calc(100% + 8px); inset-inline: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-3); padding: var(--sp-3); max-block-size: 70vh; overflow-y: auto; z-index: 100; }
.header-search__results:empty { display: none; }

/* Actions sit in their own bordered group so they never read as menu items. */
.header-actions {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	padding-inline-start: var(--sp-4);
	border-inline-start: 1px solid var(--line);
}

.header-actions__search { display: none; }

.icon-btn--cart .icon-btn__icon { position: relative; display: block; }

.cart-count {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-start: -8px;
	min-inline-size: 24px;
	padding: 0 6px;
	border-radius: var(--radius-pill);
	background: var(--action);
	color: #fff;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
}

/* Row 2 ------------------------------------------------------------------- */

/* The panel spans the full bar, so it is positioned against the nav rather
   than against the item that opened it. */
.site-nav { background: var(--brand-wash); position: relative; }

.site-nav__list {
	display: flex;
	align-items: stretch;
	gap: var(--sp-1);
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.site-nav__list::-webkit-scrollbar { display: none; }

.site-nav__item { display: flex; align-items: stretch; }

.site-nav__link {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;          /* one line, always */
	min-block-size: 54px;
	padding-inline: var(--sp-4);
	font-weight: 700;
	font-size: var(--fs-fine);
	color: var(--brand-deep);
	text-decoration: none;
	border-block-end: 3px solid transparent;
}

.site-nav__link:hover { background: rgba(255,255,255,.6); text-decoration: underline; }
.site-nav__list .current-menu-item > .site-nav__link { border-block-end-color: var(--action); }

/* A separate control from the link: the name goes to the category, the chevron
   opens the panel. Hover alone would strand touch and keyboard users. */
.site-nav__item.has-mega .site-nav__link { padding-inline-end: var(--sp-1); }

.site-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	padding: 0;
	border: 0;
	border-block-end: 3px solid transparent;
	background: transparent;
	color: var(--brand-deep);
	cursor: pointer;
}

.site-nav__toggle svg { inline-size: 18px; block-size: 18px; transition: transform .18s var(--ease); }
.site-nav__toggle:hover { background: rgba(255,255,255,.6); }
.site-nav__item.is-open .site-nav__toggle svg { transform: rotate(180deg); }

.site-nav__item.is-open .site-nav__link,
.site-nav__item.is-open .site-nav__toggle {
	background: var(--surface);
	border-block-end-color: var(--action);
}

/* --- Mega menu ------------------------------------------------------------ */

.mega {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	z-index: 70;
	background: var(--surface);
	border-block-end: 1px solid var(--line);
	box-shadow: var(--shadow-2);
}

.mega__inner {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--sp-6);
	align-items: start;
	padding-block: var(--sp-5);
}

.mega__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1) var(--sp-4); }

.mega__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	min-block-size: 46px;
	padding-inline: var(--sp-3);
	border-radius: var(--radius);
	color: var(--ink);
	text-decoration: none;
	font-size: var(--fs-fine);
	font-weight: 600;
}

.mega__link:hover { background: var(--brand-wash); color: var(--brand-deep); text-decoration: underline; }
.mega__count { flex: none; font-weight: 700; font-size: .875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.mega__feature {
	display: grid;
	grid-template-columns: 84px 1fr auto;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3);
	border: 2px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--ground);
	color: var(--ink);
	text-decoration: none;
}

.mega__feature:hover { border-color: var(--brand); background: var(--brand-wash); color: var(--ink); }
.mega__feature-img { display: block; border-radius: var(--radius); overflow: hidden; }
.mega__feature-img img { display: block; inline-size: 100%; block-size: 84px; object-fit: cover; }
.mega__feature-text { display: grid; gap: 2px; min-inline-size: 0; }
.mega__feature-text strong { font-size: var(--fs-fine); }
.mega__feature > svg { inline-size: 20px; block-size: 20px; flex: none; color: var(--brand); }

@media (max-width: 1180px) {
	.mega__inner { grid-template-columns: 1fr 260px; gap: var(--sp-4); }
	.mega__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1080px) {
	.header-main__inner { grid-template-columns: auto 1fr auto; gap: var(--sp-3); }
	.header-search { display: none; }
	.header-actions__search { display: inline-flex; }
	.header-brand { justify-self: center; }
}

@media (max-width: 780px) {
	.header-burger { display: inline-flex; }
	.header-brand img { max-block-size: 54px; }
	.header-actions { padding-inline-start: var(--sp-2); }
	.site-nav { position: fixed; inset: auto 0 0 0; top: 0; padding-block-start: 90px; background: var(--surface); z-index: 80; display: none; overflow-y: auto; }
	.site-nav.is-open { display: block; }
	.site-nav__list { flex-direction: column; overflow: visible; }
	.site-nav__item { flex-wrap: wrap; border-block-end: 1px solid var(--line); }
	.site-nav__link { flex: 1; min-block-size: var(--tap-lg); font-size: var(--fs-base); }
	.site-nav__item.has-mega .site-nav__link { padding-inline-end: var(--sp-3); }
	.site-nav__toggle { inline-size: var(--tap-lg); border-inline-start: 1px solid var(--line); }

	.mega { position: static; inline-size: 100%; box-shadow: none; border: 0; background: var(--brand-wash); }
	.mega__inner { grid-template-columns: 1fr; gap: var(--sp-3); padding-block: var(--sp-3); }
	.mega__cols { grid-template-columns: 1fr; gap: var(--sp-2); }
	.mega__link { min-block-size: var(--tap); background: var(--surface); border: 1px solid var(--line); }
	.mega__feature { grid-template-columns: 64px 1fr auto; }
	.mega__feature-img img { block-size: 64px; }
}

/* --- Search panel --------------------------------------------------------- */

.search-panel {
	display: none;
	border-block-start: 1px solid var(--line);
	background: var(--surface);
	padding-block: var(--sp-4);
}
.search-panel.is-open { display: block; }
.search-panel__form { display: flex; gap: var(--sp-3); }
.search-panel__form input[type='search'] { min-height: var(--tap-lg); font-size: var(--fs-lg); }
.search-panel__results { margin-block-start: var(--sp-4); }

/* --- Trust band ----------------------------------------------------------- */

.trust { background: var(--brand-wash); padding-block: var(--sp-6); }
.trust__grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(3, 1fr); text-align: center; }
.trust__item svg { inline-size: 40px; block-size: 40px; margin-inline: auto; color: var(--brand); }
.trust__item h3 { font-size: var(--fs-lg); margin-block: var(--sp-2) var(--sp-1); }
.trust__item p { margin: 0; max-width: none; }

@media (max-width: 760px) { .trust__grid { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* --- Footer --------------------------------------------------------------- */

.site-footer { background: var(--surface); border-block-start: 1px solid var(--line); }
.site-footer__grid {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	padding-block: var(--sp-7);
}
.site-footer h3 { font-size: var(--fs-lg); margin-block-end: var(--sp-3); }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.site-footer__list a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; min-block-size: 40px; }
.site-footer__list a:hover { color: var(--brand-deep); text-decoration: underline; }
.site-footer__contact li { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-2); }
.site-footer__contact svg { inline-size: 22px; block-size: 22px; color: var(--brand); flex: none; }
.site-footer__about img { max-block-size: 56px; inline-size: auto; margin-block-end: var(--sp-3); }
.site-footer__title { font-size: var(--fs-xl); font-weight: 700; color: var(--brand); margin-block-end: var(--sp-3); }
.site-footer__base { border-block-start: 1px solid var(--line); background: var(--ground); }
.site-footer__base-inner { padding-block: var(--sp-4); }
.site-footer__base p { margin: 0; max-width: none; }

@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* --- Product card --------------------------------------------------------- */

.product-card {
	block-size: 100%;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.product-card:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.product-card__media { position: relative; aspect-ratio: 1; background: var(--ground); overflow: hidden; }
/* The anchor is the sizing box; without an explicit height the image's
   intrinsic height wins and aspect-ratio never applies. */
.product-card__media > a { display: block; inline-size: 100%; block-size: 100%; }
.product-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	padding: var(--sp-4);
	mix-blend-mode: multiply;
}
.product-card__badges { position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); display: grid; gap: var(--sp-1); }
.product-card__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); flex: 1; }
.product-card__title { font-size: var(--fs-lg); font-weight: 700; margin: 0; }
.product-card__title a { color: var(--ink); text-decoration: none; }
.product-card__title a:hover { color: var(--brand-deep); text-decoration: underline; }
.product-card__foot { margin-block-start: auto; display: grid; gap: var(--sp-3); padding-block-start: var(--sp-2); }

/* --- Hero ----------------------------------------------------------------- */

/* Search first, centred. With 300 products across 63 categories, people arrive
   looking for one specific thing — the box they type into is the hero. */
.hero {
	position: relative;
	isolation: isolate;
	background: var(--brand);
	color: #fff;
	padding-block: var(--sp-8);
	text-align: center;
}

/* A faint photograph of the thing the shop is actually for. It is texture,
   not subject: the teal scrim above it keeps body text above 7:1. */
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: image-set(
		url('../img/hero-bg-1100.webp') 1x,
		url('../img/hero-bg.webp') 2x
	);
	background-image: -webkit-image-set(
		url('../img/hero-bg-1100.webp') 1x,
		url('../img/hero-bg.webp') 2x
	);
	background-position: center 38%;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: .32;
}

.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(165deg,
		rgba(0, 73, 82, .86) 0%,
		rgba(0, 96, 109, .82) 55%,
		rgba(11, 120, 133, .84) 100%);
}

@media (max-width: 640px) {
	/* On a phone the photo competes with the search box; drop it. */
	.hero::before { opacity: .18; }
}

.hero__inner { max-inline-size: 820px; margin-inline: auto; }
.hero__eyebrow { color: var(--brand-soft); }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 1.3rem + 3vw, 3.25rem); margin-block-end: var(--sp-3); font-weight: 400; }
.hero h1 strong { font-weight: 700; }
.hero__sub { color: rgba(255,255,255,.9); font-size: var(--fs-lg); max-inline-size: 56ch; margin-inline: auto; margin-block-end: var(--sp-6); }

.hero-search { position: relative; display: block; max-inline-size: 720px; margin-inline: auto; }

.hero-search input[type=search] {
	min-block-size: 70px;
	padding-inline: var(--sp-5) 10rem;
	border: 0;
	border-radius: var(--radius-lg);
	background: #fff;
	font-size: var(--fs-lg);
	box-shadow: 0 18px 40px -18px rgba(0,0,0,.5);
}

.hero-search input[type=search]:focus { outline: 4px solid var(--brand-soft); outline-offset: 3px; }

.hero-search__go {
	position: absolute;
	inset-inline-end: 9px;
	inset-block: 9px;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding-inline: var(--sp-5);
	border: 0;
	border-radius: var(--radius);
	background: var(--action);
	color: #fff;
	font-size: var(--fs-base);
	font-weight: 700;
	cursor: pointer;
}

.hero-search__go:hover { background: var(--action-deep); }
.hero-search__go svg { inline-size: 24px; block-size: 24px; }

.hero-search__results {
	position: absolute;
	inset-block-start: calc(100% + 10px);
	inset-inline: 0;
	background: var(--surface);
	color: var(--ink);
	text-align: start;
	border-radius: var(--radius);
	box-shadow: var(--shadow-3);
	padding: var(--sp-3);
	max-block-size: 68vh;
	overflow-y: auto;
	z-index: 30;
}

.hero-search__results:empty { display: none; }

.hero-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; align-items: center; margin-block-start: var(--sp-5); }
.hero-chips__label { color: rgba(255,255,255,.85); font-size: var(--fs-fine); font-weight: 700; }

.hero-chip {
	display: inline-flex;
	align-items: center;
	min-block-size: 46px;
	padding-inline: var(--sp-4);
	border-radius: var(--radius-pill);
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.42);
	color: #fff;
	font-weight: 700;
	font-size: var(--fs-fine);
	text-decoration: none;
}

.hero-chip:hover { background: #fff; color: var(--brand-deep); border-color: #fff; }

.hero__call { display: inline-flex; align-items: center; gap: var(--sp-2); margin-block-start: var(--sp-5); color: rgba(255,255,255,.9); font-size: var(--fs-fine); }
.hero__call svg { inline-size: 24px; block-size: 24px; flex: none; }
.hero__call a { color: #fff; font-weight: 700; }

@media (max-width: 640px) {
	.hero-search input[type=search] { min-block-size: 62px; padding-inline: var(--sp-4); font-size: var(--fs-base); }
	.hero-search__go { position: static; inset: auto; inline-size: 100%; justify-content: center; min-block-size: var(--tap-lg); margin-block-start: var(--sp-3); }
}

/* --- Shop by difficulty --------------------------------------------------- */

/* People arrive with a problem, not a category name. This is the first thing
   after the hero for exactly that reason. */
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-head--center .lede { margin: 0; }

.routes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-4); }

.route a {
	display: grid;
	justify-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-2);
	border-radius: var(--radius-lg);
	color: var(--ink);
	text-decoration: none;
	text-align: center;
	border: 1px solid transparent;
}

.route a:hover { background: var(--brand-wash); border-color: var(--brand-soft); color: var(--brand-deep); }

.route__icon {
	display: grid;
	place-items: center;
	inline-size: 84px;
	block-size: 84px;
	border-radius: 50%;
	background: var(--ground-2);
	color: var(--brand);
	border: 2px solid var(--line);
}

.route a:hover .route__icon { background: #fff; border-color: var(--brand); }
.route__icon svg { inline-size: 40px; block-size: 40px; }
.route__label { font-weight: 700; font-size: var(--fs-fine); line-height: 1.3; }

@media (max-width: 980px) { .routes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .routes { grid-template-columns: repeat(2, 1fr); } }

/* --- Category tiles ------------------------------------------------------- */

/* Photo-led. For this audience a picture of the actual product does more
   than any label: recognition beats reading. */
.cat-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: repeat(3, 1fr);
}

.cat-card a {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	color: var(--ink);
	text-decoration: none;
	transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}

.cat-card a:hover { box-shadow: var(--shadow-2); border-color: var(--brand-soft); }
.cat-card a:hover .cat-card__name { color: var(--brand-deep); text-decoration: underline; }

.cat-card__media { display: block; aspect-ratio: 16 / 10; background: var(--ground-2); overflow: hidden; }
.cat-card__media img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: var(--sp-4); mix-blend-mode: multiply; }

.cat-card__body { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.cat-card__name { font-weight: 700; font-size: var(--fs-xl); line-height: 1.25; }
.cat-card__count { color: var(--ink-3); }

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

/* --- Search results ------------------------------------------------------- */

.search-group + .search-group { margin-block-start: var(--sp-5); }
.search-group h3 { font-size: var(--fs-lg); margin-block-end: var(--sp-2); color: var(--ink-2); }
.search-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }

.search-hit {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-block-size: var(--tap-lg);
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius);
	color: var(--ink);
	text-decoration: none;
}

.search-hit:hover, .search-hit:focus-visible { background: var(--brand-wash); color: var(--brand-deep); }
.search-hit img { inline-size: 56px; block-size: 56px; object-fit: contain; border-radius: 8px; background: var(--ground); flex: none; }
.search-hit__text { display: grid; }
.search-hit__title { font-weight: 700; }
.search-hit__meta { font-size: var(--fs-fine); color: var(--ink-3); }

/* --- Entry content -------------------------------------------------------- */

.entry-content h2 { font-size: var(--fs-2xl); margin-block-start: var(--sp-6); }
.entry-content h3 { margin-block-start: var(--sp-5); }
.entry-content img { border-radius: var(--radius); margin-block: var(--sp-4); }
.entry-content ul, .entry-content ol { padding-inline-start: 1.4em; }
.entry-content li { margin-block-end: var(--sp-2); }
.entry-teaser { padding-block-end: var(--sp-5); border-block-end: 1px solid var(--line); }
.entry-teaser h2 { font-size: var(--fs-xl); }

/* --- Category blurb ------------------------------------------------------- */

.cat-card__blurb { color: var(--ink-2); font-size: var(--fs-fine); line-height: 1.5; }
.cat-card__count { display: inline-flex; align-items: center; gap: var(--sp-1); margin-block-start: var(--sp-2); font-weight: 700; font-size: var(--fs-fine); color: var(--brand-mid); }
.cat-card__count svg { inline-size: 18px; block-size: 18px; }

/* --- Trust strip ---------------------------------------------------------- */

.trust-strip { background: var(--brand-wash); }
.trust-strip .trust__grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .trust-strip .trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust-strip .trust__grid { grid-template-columns: 1fr; } }

/* --- Founder -------------------------------------------------------------- */

.founder__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: center; }
.founder__text h2 { font-size: var(--fs-2xl); }
.founder__stats { display: grid; gap: var(--sp-3); }

.founder__stats .stat {
	display: grid;
	gap: 2px;
	padding: var(--sp-4) var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	border-inline-start: 5px solid var(--brand);
}

.founder__stats b { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.founder__stats span { color: var(--ink-2); font-size: var(--fs-fine); }

@media (max-width: 880px) { .founder__stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .founder__stats { grid-template-columns: 1fr; } }

/* --- Reviews -------------------------------------------------------------- */

.reviews { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }

.review {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-6) var(--sp-5) var(--sp-5);
	background: var(--ground);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.review__quote { position: absolute; inset-block-start: -18px; inset-inline-start: var(--sp-5); display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--brand); color: #fff; }
.review__quote svg { inline-size: 22px; block-size: 22px; }
.review__stars { display: flex; gap: 3px; margin: 0; color: #d9a441; }
.review__stars svg { inline-size: 20px; block-size: 20px; }
.review blockquote { margin: 0; font-size: var(--fs-base); line-height: 1.65; }
.review__meta { display: grid; gap: 2px; margin-block-start: auto; padding-block-start: var(--sp-3); border-block-start: 1px solid var(--line); }
.review__meta a { color: var(--ink-3); text-decoration: none; }
.review__meta a:hover { color: var(--brand-deep); text-decoration: underline; }

@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }

/* --- Guides --------------------------------------------------------------- */

.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }

.guide { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.guide:hover { box-shadow: var(--shadow-2); }
.guide__media { display: block; aspect-ratio: 16 / 9; background: var(--ground-2); }
.guide__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.guide__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.guide__body h3 { font-size: var(--fs-lg); margin-block-end: var(--sp-2); }
.guide__body h3 a { color: var(--ink); text-decoration: none; }
.guide__body h3 a:hover { color: var(--brand-deep); text-decoration: underline; }

@media (max-width: 900px) { .guide-grid { grid-template-columns: 1fr; } }

/* --- Help band ------------------------------------------------------------ */

.help { background: var(--brand-deep); color: #fff; text-align: center; }
.help__inner { max-inline-size: 760px; margin-inline: auto; }
.help h2 { color: #fff; }
.help p { color: rgba(255,255,255,.9); margin-inline: auto; }
.help__actions { justify-content: center; margin-block-start: var(--sp-5); }
.help__hours { color: rgba(255,255,255,.7); margin-block-start: var(--sp-3); }

/* On a brand-coloured band the buy button lifts rather than inverting, so
   "green means press this" still holds wherever it appears. */
.help .btn--buy,
.hero .btn--buy {
	background: var(--action-bright);
	color: var(--brand-deep);
}

.help .btn--buy:hover,
.hero .btn--buy:hover { background: #7fd3a6; color: var(--brand-deep); }

.btn--on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--on-dark:hover { background: #fff; color: var(--brand-deep); border-color: #fff; }
.btn svg { inline-size: 22px; block-size: 22px; }

/* --- Founder photo -------------------------------------------------------- */

/* Stacked on a phone, and the photo leads: a face is the fastest way into
   this story, and a column of two-word lines is no way to read it. */
.founder__photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2); order: -1; }
/* The founder photo is a real portrait-orientation snapshot, so the frame is
   taller than wide and the crop is biased upwards to keep both faces in it. */
.founder__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 22%; aspect-ratio: 4 / 5; }
.founder__stats { grid-template-columns: repeat(3, 1fr); }

@media (min-width: 881px) {
	.founder__grid { grid-template-columns: 1.15fr .85fr; grid-template-areas: 'text photo' 'stats photo'; gap: var(--sp-6) var(--sp-7); }
	.founder__text { grid-area: text; }
	.founder__photo { grid-area: photo; order: 0; grid-row: span 2; }
	.founder__stats { grid-area: stats; }
}

@media (max-width: 560px) { .founder__stats { grid-template-columns: 1fr; } }

/* --- Accessibility preference modes --------------------------------------- */

/* Each mode is a data attribute on <html>, set by the toolbar in main.js. */

:root[data-links='underline'] a {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: .2em;
}

:root[data-links='underline'] a.btn,
:root[data-links='underline'] .site-nav a,
:root[data-links='underline'] .hero-chip {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

:root[data-readable] body,
:root[data-readable] button,
:root[data-readable] input,
:root[data-readable] select,
:root[data-readable] textarea {
	font-family: Arial, 'Segoe UI', system-ui, sans-serif !important;
}

:root[data-spacing='wide'] body {
	line-height: 2 !important;
	letter-spacing: .04em;
	word-spacing: .12em;
}

:root[data-spacing='wide'] p,
:root[data-spacing='wide'] li { margin-block-end: 1.4em; }

:root[data-motion='off'] *,
:root[data-motion='off'] *::before,
:root[data-motion='off'] *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

:root[data-cursor='big'],
:root[data-cursor='big'] * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 1.6L10 20z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 4 4, auto;
}

/* The high-contrast token overrides live with the tokens; these cover the
   places that paint on a dark ground and would otherwise wash out. */
:root[data-contrast='high'] .hero::before { display: none; }
:root[data-contrast='high'] .hero::after { background: #00323a; }
:root[data-contrast='high'] .hero,
:root[data-contrast='high'] .help { background: #00323a; }
:root[data-contrast='high'] .hero-chip { background: #fff; color: #00323a; border-color: #fff; }
:root[data-contrast='high'] .product-card,
:root[data-contrast='high'] .cat-card a,
:root[data-contrast='high'] .review,
:root[data-contrast='high'] .guide { border-width: 2px; }

/* --- Floating actions ----------------------------------------------------- */

/* These float over whatever section happens to be behind them, including the
   dark hero, which the brand-coloured ones would otherwise disappear into, so
   each one carries a light ring that separates it from any background. */
.floaters { --ring: 0 0 0 2px rgba(255, 255, 255, .92); }

/* Bottom-left. WebBot owns the opposite corner — it is the shop's own product
   and the more important of the two, so it keeps the side people reach for. */
.floaters {
	position: fixed;
	inset-inline-end: var(--sp-4);
	inset-block-end: var(--sp-4);
	z-index: 95;
	display: grid;
	gap: var(--sp-2);
	justify-items: end;
}

.floater {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 52px;
	min-inline-size: 52px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	background: var(--brand);
	color: #fff;
	font-weight: 700;
	font-size: var(--fs-fine);
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--ring), var(--shadow-2);
}

.floater svg { inline-size: 26px; block-size: 26px; flex: none; }
.floater--wa { background: #25d366; color: #06331a; }
.floater--wa:hover { background: #1eb455; color: #06331a; }
.floater--tel { background: var(--brand-mid); display: none; }
.floater--tel:hover { background: var(--brand-deep); color: #fff; }
.floater--a11y:hover { background: var(--brand-deep); }

/* The label is always in the DOM for screen readers, and appears on hover or
   focus for everyone else. Nothing is hidden behind hover alone: the icon plus
   the accessible name already carry the meaning. */
.floater__label {
	max-inline-size: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: max-inline-size .2s var(--ease), opacity .2s var(--ease);
}

.floater:hover .floater__label,
.floater:focus-visible .floater__label { max-inline-size: 240px; opacity: 1; margin-inline: var(--sp-2) var(--sp-3); }

@media (max-width: 640px) {
	.floaters { inset-inline-end: var(--sp-3); inset-block-end: var(--sp-3); }
}

/* --- Floating WhatsApp card ----------------------------------------------- */

.wa-card {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	inline-size: min(266px, calc(100vw - 2rem));
	padding: 8px var(--sp-3) 8px 8px;
	border-radius: var(--radius-lg);
	background: var(--brand);
	color: #fff;
	text-decoration: none;
	box-shadow: var(--ring), var(--shadow-2);
	transition: transform .18s var(--ease), background-color .18s var(--ease);
}

.wa-card:hover { background: var(--brand-mid); color: #fff; transform: translateY(-2px); }

.wa-card__face { position: relative; flex: none; inline-size: 52px; block-size: 52px; }

.wa-card__photo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .85);
}

/* The source is a seated full-body snapshot, so the frame zooms to her head
   and shoulders. Physical offsets on purpose: this is a crop of a photograph,
   not something that should flip with reading direction. */
.wa-card__photo img {
	position: absolute;
	width: 170%;
	height: auto;
	max-width: none;
	left: -40%;
	top: 2%;
}

.wa-card__badge {
	position: absolute;
	inset-block-end: -2px;
	inset-inline-start: -2px;
	display: grid;
	place-items: center;
	inline-size: 24px;
	block-size: 24px;
	border-radius: 50%;
	background: #25d366;
	color: #06331a;
	box-shadow: 0 0 0 2px var(--brand);
}

.wa-card__badge svg { inline-size: 15px; block-size: 15px; }

.wa-card__text { display: grid; gap: 2px; line-height: 1.25; }
.wa-card__text strong { font-size: var(--fs-base); font-weight: 700; }
.wa-card__text span { font-size: var(--fs-fine); color: var(--brand-soft); }

@media (max-width: 640px) {
	/* Tighter on a phone, where the stack sits over the content the whole way
	   down the page. Order is the same as on desktop: the accessibility button
	   holds the corner, WhatsApp sits above it. */
	.wa-card {
		inline-size: min(224px, calc(100vw - 1.5rem));
		gap: var(--sp-2);
		padding: 7px var(--sp-3) 7px 7px;
		border-radius: 999px;
	}

	.wa-card__face { inline-size: 38px; block-size: 38px; }
	.wa-card__badge { inline-size: 18px; block-size: 18px; }
	.wa-card__badge svg { inline-size: 11px; block-size: 11px; }
	.wa-card__text strong { font-size: var(--fs-fine); }
	.wa-card__text span { font-size: .875rem; }

	.floater--tel { display: inline-flex; }
	.floater { min-block-size: 44px; min-inline-size: 44px; }
	.floater svg { inline-size: 22px; block-size: 22px; }
	.floaters { gap: 6px; }
}

/* --- Accessibility panel -------------------------------------------------- */

.a11y[hidden] { display: none; }

.a11y {
	position: fixed;
	inset-inline-end: var(--sp-4);
	/* Measured by main.js from the real stack; the fallback covers the moment
	   before that runs. */
	inset-block-end: var(--a11y-lift, 210px);
	z-index: 96;
	inline-size: min(360px, calc(100vw - 2rem));
	background: var(--surface);
	border: 2px solid var(--line-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-3);
	max-block-size: min(700px, calc(100vh - var(--a11y-lift, 210px) - 40px));
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.a11y__head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	border-block-end: 1px solid var(--line);
	background: var(--brand);
	color: #fff;
	border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
}

.a11y__head h2 { margin: 0; font-size: var(--fs-lg); color: #fff; }

.a11y__close {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border: 0;
	border-radius: var(--radius);
	background: rgba(255,255,255,.16);
	color: #fff;
	cursor: pointer;
}

.a11y__close:hover { background: rgba(255,255,255,.3); }
.a11y__close svg { inline-size: 22px; block-size: 22px; }

.a11y__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); overflow-y: auto; flex: 1 1 auto; }
.a11y__group-label { font-weight: 700; font-size: var(--fs-fine); color: var(--ink-2); margin: var(--sp-3) 0 var(--sp-2); }
.a11y__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }

.a11y__btn {
	min-block-size: var(--tap);
	border: 2px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	font-weight: 700;
	font-size: var(--fs-fine);
	cursor: pointer;
}

.a11y__btn:hover { border-color: var(--brand); background: var(--brand-wash); }
.a11y__btn[aria-pressed='true'] { background: var(--brand); border-color: var(--brand); color: #fff; }

.a11y__list { display: grid; gap: var(--sp-2); }

.a11y__toggle {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-block-size: var(--tap);
	padding-inline: var(--sp-3);
	border: 2px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	font-weight: 700;
	font-size: var(--fs-fine);
	text-align: start;
	cursor: pointer;
}

.a11y__toggle svg { inline-size: 24px; block-size: 24px; flex: none; color: var(--brand); }
.a11y__toggle:hover { border-color: var(--brand); background: var(--brand-wash); }
.a11y__toggle[aria-pressed='true'] { background: var(--brand); border-color: var(--brand); color: #fff; }
.a11y__toggle[aria-pressed='true'] svg { color: #fff; }

/* A tick makes the on-state readable without relying on colour. */
.a11y__toggle[aria-pressed='true']::after { content: '✓'; margin-inline-start: auto; font-size: var(--fs-base); }

.a11y__foot {
	flex: none;
	padding: var(--sp-3) var(--sp-4) var(--sp-4);
	border-block-start: 1px solid var(--line);
	background: var(--surface);
	display: grid;
	gap: var(--sp-2);
	justify-items: center;
}
.a11y__statement { font-size: var(--fs-fine); }

@media (max-width: 640px) {
	.a11y { inset-inline: var(--sp-3); inline-size: auto; }
}


/* --- Shop: breadcrumb ------------------------------------------------------ */

.woocommerce-breadcrumb {
	padding-block: var(--sp-4) 0;
	font-size: var(--fs-fine);
	color: var(--ink-2);
}

.woocommerce-breadcrumb a { color: var(--brand-mid); }

/* --- Shop: archive head ---------------------------------------------------- */

.archive-head { padding-block: var(--sp-5) var(--sp-4); }
.archive-head__title { font-size: var(--fs-3xl); margin: 0 0 var(--sp-3); }
.archive-head__lead { max-inline-size: 68ch; margin: 0; }
.archive-head__lead p { margin: 0; }

.archive-kids { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-4); }

.archive-kid {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-block-size: var(--tap);
	padding-inline: var(--sp-4);
	border: 2px solid var(--line-strong);
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--ink);
	font-weight: 700;
	font-size: var(--fs-fine);
	text-decoration: none;
}

.archive-kid:hover { border-color: var(--brand); background: var(--brand-wash); color: var(--brand-deep); }
.archive-kid b { font-size: .875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.archive-kid:hover b { color: var(--brand-mid); }

/* --- Shop: toolbar --------------------------------------------------------- */

.archive-body { padding-block-end: var(--sp-7); }

.archive-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-block-end: var(--sp-5);
	padding-block: var(--sp-3);
	border-block: 1px solid var(--line);
}

.archive-tools__count { margin: 0; font-size: var(--fs-fine); color: var(--ink-2); }
.archive-tools .woocommerce-ordering { margin: 0; }

.archive-tools select {
	min-block-size: var(--tap);
	padding-inline: var(--sp-3);
	border: 2px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	font: inherit;
	font-size: var(--fs-fine);
	font-weight: 600;
}

.archive-empty { padding-block: var(--sp-7); text-align: center; }
.archive-empty h2 { margin-block-end: var(--sp-3); }

/* --- Shop: pagination ------------------------------------------------------ */

.woocommerce-pagination { margin-block-start: var(--sp-6); }
.woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; list-style: none; margin: 0; padding: 0; }

.woocommerce-pagination a,
.woocommerce-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--tap);
	min-block-size: var(--tap);
	padding-inline: var(--sp-3);
	border: 2px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-pagination a:hover { border-color: var(--brand); background: var(--brand-wash); color: var(--brand-deep); }
.woocommerce-pagination .current { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- Shop: the long category text, moved below the grid -------------------- */

.archive-about { padding-block: var(--sp-6); background: var(--surface); border-block-start: 1px solid var(--line); }
.archive-about__title { font-size: var(--fs-xl); margin-block-end: var(--sp-4); }

.prose { max-inline-size: 74ch; }
.prose h2 { font-size: var(--fs-xl); margin-block: var(--sp-5) var(--sp-2); }
.prose h3 { font-size: var(--fs-lg); margin-block: var(--sp-4) var(--sp-2); }
.prose p { margin-block: 0 var(--sp-3); }
.prose ul, .prose ol { margin-block: 0 var(--sp-4); padding-inline-start: var(--sp-5); }
.prose li { margin-block-end: var(--sp-2); }
.prose img { border-radius: var(--radius); }

/* --- Product page ---------------------------------------------------------- */

.product-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-7);
	align-items: start;
	padding-block: var(--sp-4) var(--sp-7);
}

.product-gallery { position: sticky; inset-block-start: 96px; display: grid; gap: var(--sp-3); }

.product-gallery__main {
	margin: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	overflow: hidden;
	aspect-ratio: 1;
}

.product-gallery__main img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.product-gallery__main--empty { display: grid; place-items: center; color: var(--ink-3); }
.product-gallery__main--empty svg { inline-size: 64px; block-size: 64px; }

.product-gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.product-gallery__thumb {
	inline-size: 76px;
	block-size: 76px;
	padding: 0;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	overflow: hidden;
	cursor: pointer;
}

.product-gallery__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.product-gallery__thumb:hover { border-color: var(--brand-mid); }
.product-gallery__thumb.is-current { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }

.product-summary { display: grid; gap: var(--sp-4); align-content: start; }
.product-summary > .badge { justify-self: start; }
.product-summary__title { font-size: var(--fs-3xl); margin: 0; }
.product-summary__price { font-size: var(--fs-2xl); font-weight: 700; }
.product-summary__short { margin: 0; }
.product-summary__ask { margin: 0; font-size: var(--fs-fine); }
.product-summary__sku { margin: 0; color: var(--ink-3); }

/* WooCommerce's add-to-cart form, sized for the audience. */
.product-summary__buy .quantity { display: inline-flex; }

.product-summary__buy .quantity input[type="number"] {
	inline-size: 92px;
	min-block-size: var(--tap-lg);
	padding-inline: var(--sp-3);
	border: 2px solid var(--line-strong);
	border-radius: var(--radius);
	font: inherit;
	font-size: var(--fs-lg);
	font-weight: 700;
	text-align: center;
}

.product-summary__buy form.cart { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin: 0; }

.product-summary__buy .single_add_to_cart_button,
.product-summary__buy .single_add_to_cart_button.button.alt {
	flex: 1 1 220px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--tap-lg);
	padding-inline: var(--sp-5);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--action);
	color: #fff;
	font: inherit;
	font-size: var(--fs-lg);
	font-weight: 700;
	cursor: pointer;
}

.product-summary__buy .single_add_to_cart_button.button.alt:hover { background: var(--action-deep); color: #fff; }
.product-summary__buy .variations { inline-size: 100%; border-collapse: collapse; }
.product-summary__buy .variations th,
.product-summary__buy .variations td { padding-block: var(--sp-2); text-align: start; vertical-align: middle; }

.product-summary__buy .variations select {
	min-block-size: var(--tap);
	inline-size: 100%;
	padding-inline: var(--sp-3);
	border: 2px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	font: inherit;
	font-size: var(--fs-fine);
}

.product-summary__buy .stock { margin-block: var(--sp-2) 0; }
.product-summary__buy .woocommerce-variation-price { margin-block: var(--sp-3); font-size: var(--fs-xl); font-weight: 700; }

.assurances { display: grid; gap: var(--sp-3); list-style: none; margin: 0; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.assurances li { display: flex; gap: var(--sp-3); align-items: start; }
.assurances svg { inline-size: 26px; block-size: 26px; flex: none; color: var(--brand); }
.assurances span { display: grid; gap: 2px; font-size: var(--fs-fine); color: var(--ink-2); }
.assurances strong { color: var(--ink); }

/* --- Product detail and related -------------------------------------------- */

.product-detail { padding-block: var(--sp-6); background: var(--surface); border-block: 1px solid var(--line); }
.product-detail__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-7); align-items: start; }
.product-detail h2 { font-size: var(--fs-xl); margin-block: 0 var(--sp-4); }

.shop_attributes { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-fine); }
.shop_attributes th,
.shop_attributes td { padding: var(--sp-3); border-block-end: 1px solid var(--line); text-align: start; }
.shop_attributes th { inline-size: 40%; font-weight: 700; color: var(--ink-2); }
.shop_attributes p { margin: 0; }

.related.products { padding-block: var(--sp-6) var(--sp-7); }
.related.products > h2 { font-size: var(--fs-2xl); margin-block-end: var(--sp-5); }
/* WooCommerce lays its product lists out with floats at fixed percentage
   widths, and clears them with generated content. Every list in this theme is
   a grid instead, so both have to go — wherever the list appears: related
   products, cross-sells, or a shortcode dropped into a page. */
ul.products,
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }

ul.products::before, ul.products::after,
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; }

ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product { float: none; inline-size: auto; margin: 0; clear: none; display: flex; }

ul.products li.product > .product-card,
.woocommerce ul.products li.product > .product-card { inline-size: 100%; }

ul.products li.product::before, ul.products li.product::after,
.woocommerce ul.products li.product::before, .woocommerce ul.products li.product::after { content: none; }

.product-reviews { padding-block: var(--sp-6); }
.product-reviews h2 { font-size: var(--fs-xl); }

.woocommerce .cross-sells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 560px) {
	.woocommerce .cross-sells ul.products { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
	.product-page { grid-template-columns: 1fr; gap: var(--sp-5); }
	.product-gallery { position: static; }
	.product-detail__inner { grid-template-columns: 1fr; gap: var(--sp-5); }
	ul.products,
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.archive-head__title,
	.product-summary__title { font-size: var(--fs-2xl); }
	ul.products,
	.woocommerce ul.products { grid-template-columns: 1fr; }
	.product-summary__buy form.cart { gap: var(--sp-2); }
	.product-summary__buy .single_add_to_cart_button { flex-basis: 100%; }
}

/* --- Mini cart drawer ------------------------------------------------------ */

.cart-scrim {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: rgba(11, 22, 24, .5);
}

.cart-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 111;
	inline-size: min(440px, 100vw);
	display: flex;
	flex-direction: column;
	background: var(--ground);
	box-shadow: var(--shadow-3);
}

.cart-drawer[hidden] { display: none; }
.cart-drawer.is-busy { opacity: .6; pointer-events: none; }
body.cart-open { overflow: hidden; }

.cart-drawer__head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
	background: var(--brand);
	color: #fff;
}

.cart-drawer__head h2 { margin: 0; font-size: var(--fs-xl); color: #fff; }

.cart-drawer__close {
	display: grid;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	border: 0;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .16);
	color: #fff;
	cursor: pointer;
}

.cart-drawer__close:hover { background: rgba(255, 255, 255, .3); }
.cart-drawer__close svg { inline-size: 22px; block-size: 22px; }

.cart-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-4) var(--sp-5) var(--sp-5); }

/* --- Free shipping bar ----------------------------------------------------- */

.ship-bar {
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius);
	background: var(--brand-wash);
	margin-block-end: var(--sp-4);
}

.ship-bar__text { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); font-size: var(--fs-fine); color: var(--brand-deep); }
.ship-bar__text svg { inline-size: 22px; block-size: 22px; flex: none; }
.ship-bar__track { block-size: 10px; border-radius: 999px; background: rgba(0, 73, 82, .16); overflow: hidden; }
.ship-bar__fill { display: block; block-size: 100%; border-radius: 999px; background: var(--brand); transition: inline-size .3s var(--ease); }
.ship-bar--done .ship-bar__fill { background: var(--ok); }

/* --- Lines ----------------------------------------------------------------- */

.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }

.cart-line {
	display: grid;
	grid-template-columns: 76px 1fr auto;
	gap: var(--sp-3);
	align-items: start;
	padding: var(--sp-3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.cart-line__img { display: block; border-radius: var(--radius); overflow: hidden; background: var(--ground); }
.cart-line__img img { inline-size: 76px; block-size: 76px; object-fit: contain; }
.cart-line__main { display: grid; gap: var(--sp-2); min-inline-size: 0; }
.cart-line__title { font-weight: 700; font-size: var(--fs-fine); color: var(--ink); text-decoration: none; }
.cart-line__title:hover { color: var(--brand-deep); text-decoration: underline; }
.cart-line__price { margin: 0; font-weight: 700; color: var(--ink); }

.cart-line__remove {
	display: grid;
	place-items: center;
	inline-size: var(--tap);
	block-size: var(--tap);
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: var(--ink-3);
	cursor: pointer;
}

.cart-line__remove:hover { background: var(--danger-wash); color: var(--danger); }
.cart-line__remove svg { inline-size: 18px; block-size: 18px; }

/* --- Quantity stepper ------------------------------------------------------ */

.qty { display: inline-flex; align-items: center; border: 2px solid var(--line-strong); border-radius: var(--radius-pill); overflow: hidden; justify-self: start; }

.qty__btn {
	inline-size: 44px;
	block-size: 44px;
	border: 0;
	background: var(--surface);
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1;
	color: var(--brand-deep);
	cursor: pointer;
}

.qty__btn:hover { background: var(--brand-wash); }
.qty__value { min-inline-size: 44px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Cross-sells ----------------------------------------------------------- */

.cart-extras { margin-block-start: var(--sp-5); }
.cart-extras h3 { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
.cart-extras ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

.cart-extra {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	gap: var(--sp-3);
	align-items: center;
	padding: var(--sp-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.cart-extra__img img { inline-size: 52px; block-size: 52px; object-fit: contain; border-radius: 8px; }
.cart-extra__main { display: grid; gap: 2px; min-inline-size: 0; }
.cart-extra__main a { font-size: var(--fs-fine); font-weight: 600; color: var(--ink); text-decoration: none; }
.cart-extra__main a:hover { text-decoration: underline; }
.cart-extra__main .price { font-size: .9375rem; }
.cart-extra__add { min-block-size: var(--tap); padding-inline: var(--sp-3); font-size: var(--fs-fine); white-space: nowrap; }

/* --- Coupon ---------------------------------------------------------------- */

.cart-coupon { margin-block-start: var(--sp-5); }

.cart-coupon__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-block-size: var(--tap);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--brand-mid);
	font: inherit;
	font-size: var(--fs-fine);
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.cart-coupon__toggle svg { inline-size: 18px; block-size: 18px; transition: transform .18s var(--ease); }
.cart-coupon__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.cart-coupon__box { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-2); }

.cart-coupon__box input {
	flex: 1;
	min-inline-size: 0;
	min-block-size: var(--tap);
	padding-inline: var(--sp-3);
	border: 2px solid var(--line-strong);
	border-radius: var(--radius);
	font: inherit;
	font-size: var(--fs-fine);
}

.cart-coupon__box .btn { min-block-size: var(--tap); padding-inline: var(--sp-4); font-size: var(--fs-fine); }

/* --- Totals ---------------------------------------------------------------- */

.cart-foot { margin-block-start: var(--sp-5); padding-block-start: var(--sp-4); border-block-start: 2px solid var(--line); display: grid; gap: var(--sp-3); }
.cart-foot__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0; }
.cart-foot__row--total { font-size: var(--fs-lg); }
.cart-foot__row--total strong { font-size: var(--fs-xl); }
.cart-foot__row--discount { color: var(--ok); font-size: var(--fs-fine); }

.cart-foot__drop {
	margin-inline-start: var(--sp-2);
	border: 0;
	background: transparent;
	color: var(--ink-2);
	font: inherit;
	font-size: .875rem;
	text-decoration: underline;
	cursor: pointer;
}

.cart-foot__note { margin: 0; }

/* --- Empty state ----------------------------------------------------------- */

.cart-empty { display: grid; gap: var(--sp-4); justify-items: center; padding-block: var(--sp-7); text-align: center; }
.cart-empty svg { inline-size: 56px; block-size: 56px; color: var(--ink-3); }
.cart-empty p { margin: 0; font-size: var(--fs-lg); color: var(--ink-2); }

/* --- Toast ----------------------------------------------------------------- */

.cart-toast {
	position: fixed;
	inset-block-end: var(--sp-5);
	inset-inline: auto;
	inset-inline-start: 50%;
	transform: translateX(50%);
	z-index: 120;
	margin: 0;
	max-inline-size: min(420px, calc(100vw - 2rem));
	padding: var(--sp-3) var(--sp-5);
	border-radius: var(--radius-pill);
	background: var(--ink);
	color: #fff;
	font-weight: 700;
	font-size: var(--fs-fine);
	text-align: center;
	box-shadow: var(--shadow-2);
}

.cart-toast[hidden] { display: none; }

@media (max-width: 560px) {
	.cart-drawer { inline-size: 100vw; }
	.cart-line { grid-template-columns: 64px 1fr auto; }
	.cart-line__img img { inline-size: 64px; block-size: 64px; }
	.cart-toast { inset-block-end: calc(var(--sp-3) + 170px); }
}

/* --- Cart, checkout and account -------------------------------------------
 *
 * These three keep WooCommerce's own templates. The payment gateway, the HFD
 * pickup picker and the Priority integration all hook into them, and replacing
 * the markup would mean re-testing every one of those against a live gateway.
 * So the markup stays and the styling is applied over it.
 * ------------------------------------------------------------------------ */

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border: 2px solid var(--brand-soft);
	border-radius: var(--radius);
	background: var(--brand-wash);
	color: var(--ink);
	font-size: var(--fs-fine);
	list-style: none;
}

.woocommerce-error { border-color: var(--danger); background: var(--danger-wash); }
.woocommerce-message { border-color: var(--ok); background: #eef7f0; }
.woocommerce-message .button,
.woocommerce-info .button { margin-inline-start: auto; }

/* --- Shared table shell ---------------------------------------------------- */

.shop_table {
	inline-size: 100%;
	border-collapse: collapse;
	margin-block-end: var(--sp-5);
}

.shop_table th,
.shop_table td {
	padding: var(--sp-3);
	border-block-end: 1px solid var(--line);
	text-align: start;
	vertical-align: middle;
}

.shop_table thead th { font-size: var(--fs-fine); color: var(--ink-2); border-block-end-width: 2px; }
.shop_table .product-thumbnail img { inline-size: 76px; block-size: 76px; object-fit: contain; border-radius: var(--radius); }
.shop_table .product-name a { color: var(--ink); font-weight: 700; text-decoration: none; }
.shop_table .product-name a:hover { text-decoration: underline; }

.woocommerce-cart-form .product-remove a {
	display: grid;
	place-items: center;
	inline-size: var(--tap);
	block-size: var(--tap);
	border-radius: 50%;
	background: var(--ground);
	color: var(--ink-2);
	font-size: var(--fs-lg);
	text-decoration: none;
}

.woocommerce-cart-form .product-remove a:hover { background: var(--danger-wash); color: var(--danger); }

.shop_table .quantity input[type="number"],
.woocommerce .quantity input[type="number"] {
	inline-size: 88px;
	min-block-size: var(--tap);
	padding-inline: var(--sp-2);
	border: 2px solid var(--line-strong);
	border-radius: var(--radius);
	font: inherit;
	font-size: var(--fs-fine);
	font-weight: 700;
	text-align: center;
}

.actions .coupon { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

.actions .coupon input[type="text"] {
	min-inline-size: 200px;
	min-block-size: var(--tap);
	padding-inline: var(--sp-3);
	border: 2px solid var(--line-strong);
	border-radius: var(--radius);
	font: inherit;
	font-size: var(--fs-fine);
}

/* --- WooCommerce buttons, in this theme's language ------------------------- */

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--tap);
	padding-inline: var(--sp-5);
	border: 2px solid var(--brand);
	border-radius: var(--radius-pill);
	background: var(--brand);
	color: #fff;
	font: inherit;
	font-size: var(--fs-fine);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }

.woocommerce .checkout-button,
.woocommerce #place_order {
	min-block-size: var(--tap-lg);
	border-color: var(--action);
	background: var(--action);
	font-size: var(--fs-lg);
	inline-size: 100%;
}

.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover { background: var(--action-deep); border-color: var(--action-deep); }

.woocommerce .button[disabled],
.woocommerce .button:disabled { opacity: .5; cursor: not-allowed; }

/* --- Cart totals ----------------------------------------------------------- */

.cart-collaterals { display: grid; gap: var(--sp-6); align-items: start; }
.cart-collaterals::before,
.cart-collaterals::after { content: none; display: none; }
.woocommerce .cart-collaterals .cross-sells,
.woocommerce .cart-collaterals .cart_totals { float: none; inline-size: auto; }
.cross-sells > h2 { font-size: var(--fs-xl); margin-block: 0 var(--sp-4); }
.cart_totals { padding: var(--sp-5); border: 2px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.cart_totals h2 { font-size: var(--fs-xl); margin-block: 0 var(--sp-4); }
.cart_totals table { inline-size: 100%; border-collapse: collapse; }
.cart_totals th, .cart_totals td { padding-block: var(--sp-3); border-block-end: 1px solid var(--line); text-align: start; }
.cart_totals th { font-weight: 700; color: var(--ink-2); }
.cart_totals .order-total { font-size: var(--fs-lg); }
.cart_totals .order-total td { font-weight: 700; }
.wc-proceed-to-checkout { margin-block-start: var(--sp-4); }

/* --- Checkout -------------------------------------------------------------- */

.woocommerce-checkout .col2-set { display: grid; gap: var(--sp-5); }
.woocommerce-checkout h3 { font-size: var(--fs-xl); margin-block: var(--sp-5) var(--sp-3); }
.woocommerce-checkout h3:first-child { margin-block-start: 0; }

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper { display: grid; gap: var(--sp-3); }

.form-row { display: grid; gap: var(--sp-2); margin: 0; }
.form-row label { font-weight: 700; font-size: var(--fs-fine); }
.form-row .required { color: var(--danger); text-decoration: none; }
.form-row .optional { color: var(--ink-3); font-weight: 400; }

.form-row input[type="text"],
.form-row input[type="tel"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="number"],
.form-row select,
.form-row textarea,
.select2-container .select2-selection--single {
	inline-size: 100%;
	min-block-size: var(--tap-lg);
	padding: var(--sp-2) var(--sp-3);
	border: 2px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	font: inherit;
	font-size: var(--fs-fine);
	color: var(--ink);
}

.form-row textarea { min-block-size: 120px; padding-block: var(--sp-3); }
.form-row input:focus-visible,
.form-row select:focus-visible,
.form-row textarea:focus-visible { outline: 3px solid var(--brand-mid); outline-offset: 1px; }
.form-row.woocommerce-invalid input,
.form-row.woocommerce-invalid select { border-color: var(--danger); }

.select2-container .select2-selection--single { display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: inherit; padding: 0; color: var(--ink); }
.select2-container--default .select2-selection--single .select2-selection__arrow { inset-block-start: 50%; transform: translateY(-50%); }

#order_review_heading { margin-block: var(--sp-6) var(--sp-3); font-size: var(--fs-xl); }

#order_review {
	padding: var(--sp-5);
	border: 2px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
}

.woocommerce-checkout-review-order-table { margin-block-end: var(--sp-4); }
.woocommerce-checkout-review-order-table tfoot th { font-weight: 700; }
.woocommerce-checkout-review-order-table .order-total { font-size: var(--fs-lg); }

.wc_payment_methods { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-2); }

.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-block-size: var(--tap);
	padding-inline: var(--sp-3);
	border: 2px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	font-weight: 700;
	font-size: var(--fs-fine);
	cursor: pointer;
}

.wc_payment_method input:checked + label { border-color: var(--brand); background: var(--brand-wash); }
.wc_payment_method .payment_box { padding: var(--sp-3) var(--sp-4); background: var(--ground); border-radius: var(--radius); font-size: var(--fs-fine); }
.wc_payment_method .payment_box p:last-child { margin-block-end: 0; }
.woocommerce-terms-and-conditions-wrapper { margin-block: var(--sp-4); font-size: var(--fs-fine); }
.woocommerce-privacy-policy-text { font-size: var(--fs-fine); color: var(--ink-2); }

/* --- Account --------------------------------------------------------------- */

.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-6); align-items: start; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }

.woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-block-size: var(--tap);
	padding-inline: var(--sp-3);
	border-radius: var(--radius);
	color: var(--ink);
	font-weight: 700;
	font-size: var(--fs-fine);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover { background: var(--brand-wash); color: var(--brand-deep); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--brand); color: #fff; }
.woocommerce-MyAccount-content { min-inline-size: 0; }

.woocommerce-form-login,
.woocommerce-form-register {
	display: grid;
	gap: var(--sp-3);
	max-inline-size: 460px;
	padding: var(--sp-5);
	border: 2px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
}

/* --- Layout ---------------------------------------------------------------- */

@media (min-width: 861px) {
	.woocommerce-checkout .col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce-cart .cart-collaterals {
		grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
		grid-template-areas: 'cross totals';
	}

	.woocommerce .cart-collaterals .cross-sells { grid-area: cross; }
	.woocommerce .cart-collaterals .cart_totals { grid-area: totals; }
}

@media (max-width: 860px) {
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }

	/* WooCommerce's small-screen sheet turns the cart into stacked rows using
	   the data-title attributes; these keep that readable at this type size. */
	.shop_table_responsive tr td { display: flex; justify-content: space-between; gap: var(--sp-3); text-align: end; }
	.shop_table_responsive tr td::before { content: attr(data-title); font-weight: 700; color: var(--ink-2); }
	.shop_table_responsive thead { display: none; }
	.actions .coupon input[type="text"] { min-inline-size: 0; flex: 1; }
}

/* --- Reach: bigger things to aim at ---------------------------------------
 *
 * Measured on the built pages: 32 controls were under the 44px minimum, most
 * of them 26px-tall text links. For a hand that is not steady, a link that
 * thin is a miss waiting to happen.
 * ------------------------------------------------------------------------ */

/* The whole product card opens the product, not just the line of text. The
   buy button sits above it so it still gets its own clicks. */
.product-card { position: relative; }

.product-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.product-card__foot,
.product-card__badges { position: relative; z-index: 2; }

/* Menus: a link in a list gets a row, not a line. */
.site-footer__list a,
.site-footer__contact a,
.review__meta a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

.site-footer__list li,
.site-footer__contact li { display: flex; align-items: center; gap: var(--sp-2); }

/* Anything focused is unmistakable, not a hairline. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --- Checkout ------------------------------------------------------------- */

.checkout-intro {
	margin-block-end: var(--sp-5);
	padding: var(--sp-4);
	border-inline-start: 4px solid var(--brand);
	border-radius: var(--radius);
	background: var(--brand-wash);
	font-size: var(--fs-fine);
}

/* --- Breadcrumb and review stars ------------------------------------------
 *
 * Both measured short of the mark on the product page: the breadcrumb at
 * 4.28:1 against AA's 4.5, and its links — plus the rating stars — under 44px.
 * ------------------------------------------------------------------------ */

.woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb { color: var(--ink-2); }

.woocommerce-breadcrumb a,
.woocommerce .woocommerce-breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--brand-deep);
	text-decoration: underline;
	text-underline-offset: .2em;
}

.woocommerce-breadcrumb a:hover,
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--brand-deep); }

/* Leaving a review is a real action; the stars need to be aimable. */
.woocommerce p.stars a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	font-size: var(--fs-lg);
}

.woocommerce p.stars { display: flex; gap: 2px; margin-block: var(--sp-2); }

/* --- Two more WooCommerce colours that outrank the theme ------------------
 *
 * Both come from rules like `.woocommerce:where(...) div.product .stock`.
 * The :where() adds no specificity, so those land at 0,2,1 and a bare class
 * cannot reach them. These match selector for selector and win on order.
 *
 * Measured before: the in-stock line at 3.22:1 and the struck-out price at
 * 3.41:1, both under AA.
 * ------------------------------------------------------------------------ */

.stock--in,
.woocommerce div.product .stock--in,
.woocommerce ul.products li.product .stock--in { color: var(--ok); }

.stock--out,
.woocommerce div.product .stock--out,
.woocommerce ul.products li.product .stock--out { color: var(--ink-2); }

.price del,
.woocommerce div.product .price del,
.woocommerce ul.products li.product .price del { color: var(--ink-3); }

.price ins,
.woocommerce div.product .price ins,
.woocommerce ul.products li.product .price ins { color: var(--action-deep); text-decoration: none; }

/* The amount inside a struck-out price sits in its own span, which several
   WooCommerce rules colour directly; making it inherit keeps one source of
   truth for the "old price" colour wherever the markup appears. */
del,
.woocommerce del { color: var(--ink-3); }

del .woocommerce-Price-amount,
del .amount,
.woocommerce del .woocommerce-Price-amount { color: inherit; }

/* Short words in the legal menu ("תקנון") made targets narrower than 44px. */
.site-footer__list a,
.site-footer__contact a,
.review__meta a { min-inline-size: 44px; }

/* --- Cookie notice --------------------------------------------------------- */

.consent {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 130;
	background: var(--brand-deep);
	color: #fff;
	box-shadow: 0 -8px 30px -12px rgba(11, 22, 24, .5);
}

.consent__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	max-inline-size: 1200px;
	margin-inline: auto;
	padding: var(--sp-4) var(--sp-5);
}

.consent__text { margin: 0; flex: 1 1 420px; font-size: var(--fs-fine); line-height: 1.5; }
.consent__text a { color: var(--brand-soft); text-decoration: underline; }
.consent__text a:hover { color: #fff; }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.consent__actions .btn { min-block-size: var(--tap); font-size: var(--fs-fine); }
.consent__actions .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.consent__actions .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* It sits above the floating stack, so lift that while it is showing. */
.consent ~ .floaters { inset-block-end: calc(var(--sp-4) + 120px); }

@media (max-width: 640px) {
	.consent__inner { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
	.consent__actions { inline-size: 100%; }
	.consent__actions .btn { flex: 1; }
}

/* --- Checkout: undo WooCommerce's float grid ------------------------------
 *
 * woocommerce-layout.css lays the checkout out with floats at fixed
 * percentages: .col-1 and .col-2 at 48%, and .form-row-first/-last at 47%.
 * Inside the grid this theme puts around them those percentages compound —
 * 47% of 48% of a column — which collapsed every field to about 130px and made
 * the page unusable. These match WooCommerce's own selectors so they win on
 * order rather than on !important.
 * ------------------------------------------------------------------------ */

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
	float: none;
	inline-size: auto;
	max-inline-size: none;
}

.woocommerce .col2-set::before, .woocommerce .col2-set::after,
.woocommerce-page .col2-set::before, .woocommerce-page .col2-set::after { content: none; display: none; }

.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce form .form-row-wide,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last,
.woocommerce-page form .form-row-wide {
	float: none;
	inline-size: auto;
	max-inline-size: none;
	clear: none;
}

.woocommerce form .form-row,
.woocommerce-page form .form-row { margin: 0; padding: 0; }

/* The field itself must fill whatever row it is given. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select { inline-size: 100%; }

/* Validation text belongs under its field, at a readable width. */
.woocommerce form .form-row .woocommerce-input-wrapper { inline-size: 100%; }
.woocommerce-error li,
.woocommerce form .form-row small.screen-reader-text { line-height: 1.5; }

/* --- Buy button states ----------------------------------------------------
 *
 * The press has to register instantly. Someone who sees nothing happen presses
 * again, and on this shop the second press was the one being dropped.
 * ------------------------------------------------------------------------ */

.btn.is-adding,
.btn.is-added { pointer-events: none; }

.btn.is-adding { opacity: .75; }

.btn--buy.is-added,
.woocommerce .single_add_to_cart_button.is-added {
	background: var(--ok);
	border-color: var(--ok);
}

.btn[disabled] { cursor: default; }

/* --- Cart cross-sells: a suggestion, not a second shop --------------------
 *
 * Full product cards next to the totals made the block compete with the
 * checkout button. These are compact rows instead, and on a phone they sit
 * after the button rather than in front of it.
 * ------------------------------------------------------------------------ */

.cross-sells > h2 { font-size: var(--fs-lg); margin-block: 0 var(--sp-3); }
.woocommerce .cross-sells ul.products { grid-template-columns: 1fr; gap: var(--sp-2); }

.cross-sells li.product .product-card {
	display: grid;
	grid-template-columns: 76px 1fr;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2);
}

.cross-sells .product-card__media { inline-size: 76px; block-size: 76px; aspect-ratio: 1; border-radius: var(--radius); }
.cross-sells .product-card__badges { display: none; }
.cross-sells .product-card__body { padding: 0; gap: var(--sp-1); }
.cross-sells .product-card__title { font-size: var(--fs-fine); }
.cross-sells .product-card .stock { display: none; }
.cross-sells .product-card .price { font-size: var(--fs-fine); }

.cross-sells .product-card__foot {
	margin-block-start: 0;
	padding-block-start: 0;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--sp-3);
}

.cross-sells .product-card__foot .btn {
	min-block-size: var(--tap);
	padding-inline: var(--sp-4);
	font-size: var(--fs-fine);
	white-space: nowrap;
}

@media (max-width: 860px) {
	/* The checkout button comes first; suggestions follow it. */
	.woocommerce .cart-collaterals .cart_totals { order: 1; }
	.woocommerce .cart-collaterals .cross-sells { order: 2; }
}

@media (max-width: 420px) {
	.cross-sells li.product .product-card { grid-template-columns: 60px 1fr; }
	.cross-sells .product-card__media { inline-size: 60px; block-size: 60px; }
	.cross-sells .product-card__foot { grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* --- WhatsApp as a plain icon on a phone ----------------------------------
 *
 * WebBot's launcher is a wide pill in the opposite corner, and on a narrow
 * screen the two met in the middle. The card collapses to a circle the same
 * size as the phone button, which clears the collision and leaves the bot as
 * the prominent one — it is the shop's own product.
 *
 * The card, with her photo, stays on wider screens where there is room.
 * ------------------------------------------------------------------------ */

@media (max-width: 640px) {
	.wa-card {
		inline-size: 44px;
		block-size: 44px;
		min-inline-size: 0;
		padding: 0;
		gap: 0;
		border-radius: 50%;
		background: #25d366;
		display: grid;
		place-items: center;
	}

	.wa-card__text { display: none; }
	.wa-card__photo { display: none; }

	.wa-card__face { position: static; inline-size: auto; block-size: auto; }

	.wa-card__badge {
		position: static;
		display: grid;
		place-items: center;
		inline-size: 44px;
		block-size: 44px;
		background: transparent;
		color: #06331a;
		box-shadow: none;
	}

	.wa-card__badge svg { inline-size: 24px; block-size: 24px; }
}

/* --- Agency signature ------------------------------------------------------ */

.site-footer__base-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
}

.credit {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	min-block-size: 44px;
	color: var(--ink-2);
	font-size: var(--fs-fine);
	text-decoration: none;
	opacity: .8;
	transition: opacity .18s var(--ease);
}

.credit:hover { opacity: 1; color: var(--ink); }
.credit img { block-size: 26px; inline-size: auto; }

@media (max-width: 560px) {
	.site-footer__base-inner { justify-content: center; text-align: center; }
	.credit { justify-content: center; }
}