/*
Theme Name: Pantesk
Theme URI: https://dcyphr.us
Author: Pantesk
Description: Bone & Cobalt — a quiet, hairline-driven storefront for an apparel house brand. Hand-written classic theme with a full WooCommerce surface, tuned for smooth 60fps motion and Google Merchant Center readiness.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pantesk
Tags: e-commerce, custom-menu, custom-logo, featured-images, translation-ready
*/

/* =========================================================================
   1. Tokens
   ========================================================================= */

:root {
	/* Colour */
	--bg:            #FFFFFF;
	--surface:       #FAFAF9;
	--surface-2:     #F1F1EF;
	--ink:           #0A0A08;
	--ink-deep:      #0A0A08;
	--muted:         #474742;
	/* #67625A clears 4.5:1 on both --bg (5.50:1) and --surface-2 (5.03:1);
	   the lighter #706B62 failed on --surface-2 at 4.40:1. */
	--meta:          #6A6A63;
	/* --border is decorative only (dividers, rules): 1.31:1 vs --bg.
	   Anything that is the sole visual boundary of a CONTROL uses --border-ctl,
	   which clears the 3:1 WCAG 1.4.11 non-text minimum at 3.35:1. */
	--border:        #E4E4E0;
	--border-ctl:    #8A8A83;
	--border-strong: #B6B6AF;
	--accent:        #0A0A08;
	--accent-hover:  #2E2E29;
	--accent-ink:    #FFFFFF;
	--accent-soft:   #F1F1EF;
	--accent-lift:   #6A6A63;
	--sale:          #DA3217;
	--success:       #1F6D4B;
	--overlay:       rgba(10, 10, 8, .55);
	--overlay-soft:  rgba(10, 10, 8, .28);

	/* Type */
	--font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--font-body:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	--fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);
	--fs-h1:      clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	--fs-h2:      clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
	--fs-h3:      1.25rem;
	--fs-h4:      1rem;
	--fs-body-lg: 1.0625rem;
	--fs-body:    0.9375rem;
	--fs-sm:      0.8125rem;
	--fs-xs:      0.75rem;
	--fs-micro:   0.6875rem;

	/* Space */
	--s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
	--s5: 20px;  --s6: 24px;  --s7: 32px;  --s8: 40px;
	--s9: 56px;  --s10: 72px; --s11: 96px; --s12: 128px;

	--pad: 20px;
	--wrap: 1440px;
	--wrap-narrow: 760px;
	--wrap-wide: 1760px;
	--section-y: clamp(56px, 7vw, 112px);

	/* Radii */
	--r-xs: 2px;
	--r-sm: 4px;
	--r-md: 6px;
	--r-pill: 999px;

	/* Elevation — only two, both static. Structure comes from hairlines. */
	--shadow-card:   0 1px 2px rgba(20, 19, 15, .05);
	--shadow-drawer: -24px 0 60px rgba(20, 19, 15, .16);
	--shadow-pop:    0 12px 40px rgba(20, 19, 15, .12);

	/* Motion */
	--ease-out:    cubic-bezier(.22, .61, .36, 1);
	--ease-smooth: cubic-bezier(.16, 1, .3, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--ease-pop:    cubic-bezier(.34, 1.3, .64, 1);

	--t-fast:   120ms;
	--t-base:   220ms;
	--t-mid:    380ms;
	--t-slow:   520ms;
	--t-reveal: 700ms;

	/* Layers */
	--z-bar:    700;
	--z-head:   900;
	--z-drawer: 1000;
	--z-toast:  1100;

	--head-h: 60px;
}

@media (min-width: 768px)  { :root { --pad: 32px; } }
@media (min-width: 1024px) { :root { --head-h: 76px; } }
@media (min-width: 1200px) { :root { --pad: 48px; } }
@media (min-width: 1600px) { :root { --pad: 64px; } }

/* =========================================================================
   2. Reset & base
   ========================================================================= */

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

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.6;
	letter-spacing: -.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.is-locked {
	overflow: hidden;
	padding-right: var(--sbw, 0px);
}

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

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

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--r-xs);
}
/* Cobalt is 2.2:1 on ink-deep, so dark bands and cobalt fills get a bone ring
   instead — the focus indicator must never be the thing that disappears. */
.sec--dark :focus-visible,
.foot :focus-visible,
.topbar :focus-visible,
.hero :focus-visible,
.tile:focus-visible,
.btn--primary:focus-visible,
.woocommerce .button.alt:focus-visible {
	outline-color: var(--bg);
	box-shadow: 0 0 0 4px rgba(20, 19, 15, .55);
}

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

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

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

.skip {
	position: absolute;
	left: var(--s4); top: -80px;
	z-index: 2000;
	background: var(--ink);
	color: var(--bg);
	padding: 12px 20px;
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
	transition: top var(--t-base) var(--ease-out);
}
.skip:focus { top: var(--s4); }

/* =========================================================================
   3. Typography
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 600;
	margin: 0 0 .5em;
	text-wrap: balance;
	color: var(--ink);
}

h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.03em; }
h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.025em; }
h3 { font-size: var(--fs-h3); line-height: 1.2;  letter-spacing: -.015em; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; }

.eyebrow {
	font-family: var(--font-display);
	font-size: var(--fs-micro);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--meta);
	margin: 0 0 var(--s3);
}

.lead { font-size: var(--fs-body-lg); line-height: 1.65; color: var(--muted); }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink);
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size 300ms var(--ease-smooth), color var(--t-fast) var(--ease-out);
	padding-bottom: 2px;
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow svg { transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

.ico { flex: none; }
.ico.is-flipped { transform: scaleX(-1); }

/* =========================================================================
   4. Layout
   ========================================================================= */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--pad);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide   { max-width: var(--wrap-wide); }

.sec { padding-block: var(--section-y); }
.sec--tight { padding-block: clamp(36px, 4.5vw, 64px); }
.sec--flush-top { padding-top: 0; }
.sec--surface { background: var(--surface-2); }
.sec--dark { background: var(--ink-deep); color: var(--bg); }
.sec--dark h1, .sec--dark h2, .sec--dark h3 { color: var(--bg); }

.site-main { min-height: 40vh; }

/* Section heading */
.sechead {
	display: grid;
	gap: var(--s2);
	margin-bottom: var(--s8);
	max-width: 620px;
}
.sechead--center { margin-inline: auto; text-align: center; }
.sechead--row {
	max-width: none;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: var(--s4) var(--s6);
}
.sechead__eyebrow {
	font-family: var(--font-display);
	font-size: var(--fs-micro);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--meta);
	margin: 0;
}
.sechead__title { margin: 0; }
.sechead__sub { color: var(--muted); margin: 0; max-width: 52ch; }
.sechead--row .sechead__link { grid-row: 1 / span 2; align-self: center; justify-self: end; }

/* =========================================================================
   5. Buttons
   ========================================================================= */

.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 48px;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .06em;
	white-space: nowrap;
	cursor: pointer;
	background: var(--accent);
	color: var(--accent-ink);
	transition:
		background-color 160ms var(--ease-out),
		border-color 160ms var(--ease-out),
		color 160ms var(--ease-out),
		transform 180ms var(--ease-out);
}

.btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--accent-hover);
	color: var(--accent-ink);
	transform: translateY(-1px);
}

.btn:active { transform: translateY(0) scale(.985); transition-duration: 90ms; }

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

.btn--secondary,
.woocommerce a.button:not(.alt):not(.add_to_cart_button),
.woocommerce button.button:not(.alt) {
	background: transparent;
	border-color: var(--ink);
	color: var(--ink);
}
.btn--secondary:hover,
.woocommerce a.button:not(.alt):not(.add_to_cart_button):hover,
.woocommerce button.button:not(.alt):hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

.btn--ghost {
	background: transparent;
	border-color: var(--border-ctl);
	color: var(--ink);
}
.btn--ghost:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

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

.btn--sm { height: 40px; padding: 0 20px; font-size: var(--fs-xs); }
.btn--lg { height: 56px; padding: 0 36px; }
.btn--block { width: 100%; }

.btn[disabled], .btn.is-disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--surface-2);
	border-color: var(--surface-2);
	color: var(--meta);
	cursor: not-allowed;
	transform: none;
	opacity: 1;
}

/* =========================================================================
   6. Forms
   ========================================================================= */

input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=password], input[type=search], input[type=number], input[type=date],
select, textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	background: var(--surface);
	border: 1px solid var(--border-ctl);
	border-radius: var(--r-sm);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--ink);
	transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
	appearance: none;
}

textarea, .woocommerce form .form-row textarea { height: auto; min-height: 140px; padding: 14px 16px; line-height: 1.6; }

input:focus, select:focus, textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(30, 54, 200, .12);
	outline: none;
}

input::placeholder, textarea::placeholder { color: var(--meta); }

select, .woocommerce form .form-row select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23706B62' stroke-width='1.8' 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 16px center;
	padding-right: 42px;
	cursor: pointer;
}

label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }

/* Search form */
.sform__field { position: relative; display: flex; align-items: center; gap: var(--s3); }
.sform__field > .ico { position: absolute; left: 16px; color: var(--meta); pointer-events: none; }
.sform__input { padding-left: 46px; }
.sform__field .btn { flex: none; }

/* =========================================================================
   7. Announcement bar
   ========================================================================= */

.topbar {
	background: var(--ink-deep);
	color: var(--bg);
	font-family: var(--font-display);
	font-size: var(--fs-micro);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
}
.topbar__inner { display: flex; justify-content: center; }
.topbar__list {
	position: relative;
	list-style: none;
	margin: 0; padding: 0;
	height: 36px;
	display: grid;
	place-items: center;
	width: 100%;
}
.topbar__item {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 240ms var(--ease-smooth), transform 240ms var(--ease-smooth);
	text-align: center;
	pointer-events: none;
}
.topbar__item.is-active { opacity: 1; transform: none; pointer-events: auto; }

@media (max-width: 767px) { .topbar__list { height: 32px; } .topbar { font-size: 10px; letter-spacing: .1em; } }

/* =========================================================================
   8. Header
   ========================================================================= */

/* The header is deliberately NOT transformed and NOT height-animated:
   - a transform or backdrop-filter on .head would make it the containing block
     for the position:fixed mobile nav drawer nested inside it, and
   - transitioning height on an in-flow sticky element reflows the whole
     document for the duration, on exactly the frames the user is scrolling.
   The blur therefore lives on a pseudo-element and the height stays constant;
   only colour, the hairline and the wordmark scale animate. */
.head {
	position: sticky;
	top: 0;
	z-index: var(--z-head);
	background: var(--bg);
	border-bottom: 1px solid transparent;
	transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.head::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-backdrop-filter: blur(14px) saturate(1.15);
	backdrop-filter: blur(14px) saturate(1.15);
	opacity: 0;
	transition: opacity 300ms var(--ease-out);
	pointer-events: none;
}
.head.is-stuck {
	background: rgba(246, 244, 239, .86);
	border-bottom-color: var(--border);
}
.head.is-stuck::before { opacity: 1; }

.head__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--s4);
	height: var(--head-h);
}

.head__burger { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; }
.burger { display: grid; gap: 5px; width: 20px; }
.burger span {
	display: block; height: 1.5px; background: var(--ink); border-radius: 2px;
	transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
body.nav-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.head__brand { grid-column: 2; display: flex; justify-content: center; }

.brand { display: inline-flex; align-items: center; }
.brand__img { max-height: 40px; width: auto; transition: transform 300ms var(--ease-out); }
.brand__word {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .22em;
	line-height: 1;
	display: inline-block;
	transition: transform 300ms var(--ease-out);
	padding-left: .22em; /* optically re-centre the tracked wordmark */
}
.head.is-stuck .brand__word,
.head.is-stuck .brand__img { transform: scale(.9); }

/* Utility bar */
.utilbar { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.utilbar__btn, .utilbar__cart {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	color: var(--ink);
	transition: color var(--t-fast) var(--ease-out);
}
.utilbar__btn:hover, .utilbar__cart:hover { color: var(--accent); }
.utilbar__label { display: none; }
.utilbar__count {
	position: absolute;
	top: 5px; right: 4px;
	min-width: 17px; height: 17px;
	padding: 0 4px;
	display: grid; place-items: center;
	background: var(--accent);
	color: var(--accent-ink);
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	opacity: 0;
	transform: scale(.6);
	transition: opacity var(--t-fast) var(--ease-out), transform 320ms var(--ease-pop);
}
.utilbar__count.is-filled { opacity: 1; transform: scale(1); }

/* =========================================================================
   9. Navigation
   ========================================================================= */

.nav__head, .nav__foot { display: none; }

.nav__list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	align-items: center;
	gap: var(--s5);
}
.nav__list > li { position: relative; }
.nav__list > li > a {
	display: block;
	padding: 8px 0;
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--ink);
	white-space: nowrap;
}
.nav__label {
	background-image: linear-gradient(var(--accent), var(--accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size 260ms var(--ease-smooth);
	padding-bottom: 3px;
}
.nav__list > li:hover > a .nav__label,
.nav__list > li.current-menu-item > a .nav__label,
.nav__list > li:focus-within > a .nav__label { background-size: 100% 1px; }

.nav__toggle { display: none; }

/* Desktop dropdown */
.nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: var(--s5) 0;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -8px);
	min-width: 220px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	box-shadow: var(--shadow-pop);
	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms var(--ease-smooth), transform 300ms var(--ease-smooth), visibility 300ms;
	z-index: 10;
}
.nav__list > li:hover > .sub-menu,
.nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
.nav__list .sub-menu a {
	display: block;
	padding: 8px var(--s6);
	font-size: var(--fs-sm);
	color: var(--muted);
	transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.nav__list .sub-menu a:hover { color: var(--ink); background: var(--bg); }

@media (max-width: 1023px) {
	.nav {
		position: fixed;
		inset: 0 auto 0 0;
		width: min(360px, 88vw);
		background: var(--surface);
		z-index: var(--z-drawer);
		display: flex;
		flex-direction: column;
		transform: translateX(-100%);
		transition: transform 460ms var(--ease-smooth);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.nav.is-open { transform: translateX(0); }

	.nav__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--s5) var(--s5) var(--s4);
		border-bottom: 1px solid var(--border);
	}
	.nav__title {
		font-family: var(--font-display);
		font-size: var(--fs-micro);
		text-transform: uppercase;
		letter-spacing: .16em;
		color: var(--meta);
	}
	.nav__close { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; }

	.nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--s3) 0; }
	.nav__list > li { border-bottom: 1px solid var(--border); }
	.nav__list > li > a { padding: 16px var(--s5); font-size: 15px; letter-spacing: .08em; }
	.nav__list .nav__label { background-image: none; }

	.nav__list li.menu-item-has-children { display: grid; grid-template-columns: 1fr auto; }
	.nav__toggle {
		display: grid; place-items: center;
		width: 56px;
		color: var(--meta);
		transition: transform var(--t-base) var(--ease-out);
	}
	.nav__list li.is-open > .nav__toggle { transform: rotate(180deg); }

	.nav__list .sub-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		grid-column: 1 / -1;
		border: 0;
		box-shadow: none;
		background: var(--bg);
		padding: 0;
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 240ms var(--ease-smooth);
		min-width: 0;
	}
	.nav__list li.is-open > .sub-menu { grid-template-rows: 1fr; }
	.nav__list .sub-menu > li { overflow: hidden; }
	.nav__list .sub-menu li:first-child { padding-top: var(--s2); }
	.nav__list .sub-menu li:last-child { padding-bottom: var(--s2); }
	.nav__list .sub-menu a { padding: 11px var(--s5) 11px var(--s7); }

	.nav__foot {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s3) var(--s5);
		margin-top: auto;
		padding: var(--s6) var(--s5) var(--s8);
		border-top: 1px solid var(--border);
		font-size: var(--fs-sm);
		color: var(--muted);
	}
	.nav__foot a:hover { color: var(--ink); }
}

@media (min-width: 1024px) {
	.head__burger { display: none; }
	.head__inner { grid-template-columns: 1fr auto 1fr; }
	.nav { grid-column: 1; grid-row: 1; justify-self: start; }
	.utilbar__label {
		display: none;
	}
}

/* Search pane */
.searchpane {
	position: absolute;
	inset: 100% 0 auto 0;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 300ms var(--ease-smooth), transform 300ms var(--ease-smooth);
	z-index: 5;
}
.searchpane.is-open { opacity: 1; transform: none; }
.searchpane__inner { padding-block: var(--s6) var(--s5); }
.searchpane__form { position: relative; display: flex; align-items: center; gap: var(--s3); }
.searchpane__form > .ico { position: absolute; left: 18px; color: var(--meta); pointer-events: none; }
.searchpane__input {
	height: 56px;
	padding-left: 52px;
	border-color: var(--border);
	background: var(--bg);
	font-size: var(--fs-body-lg);
}
.searchpane__close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; color: var(--meta); }
.searchpane__close:hover { color: var(--ink); }
.searchpane__quick {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
	margin-top: var(--s4);
	font-size: var(--fs-xs);
	color: var(--meta);
}
.searchpane__quick a {
	padding: 5px 12px;
	border: 1px solid var(--border-ctl);
	border-radius: var(--r-pill);
	color: var(--muted);
	transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.searchpane__quick a:hover { border-color: var(--ink); color: var(--ink); }

@media (max-width: 767px) {
	.searchpane__form .btn { display: none; }
	.searchpane__input { height: 48px; font-size: var(--fs-body); }
}

/* =========================================================================
   10. Scrim & drawers
   ========================================================================= */

.scrim {
	position: fixed;
	inset: 0;
	background: var(--overlay);
	opacity: 0;
	transition: opacity var(--t-mid) var(--ease-out);
	z-index: calc(var(--z-drawer) - 1);
}
.scrim.is-on { opacity: 1; }

.drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(440px, calc(100% - 40px));
	background: var(--surface);
	box-shadow: var(--shadow-drawer);
	z-index: var(--z-drawer);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--t-slow) var(--ease-smooth);
}
.drawer.is-open { transform: translateX(0); }
.drawer--left { inset: 0 auto 0 0; transform: translateX(-100%); box-shadow: 24px 0 60px rgba(20,19,15,.16); }
.drawer--left.is-open { transform: translateX(0); }

.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	height: 64px;
	padding-inline: var(--s5);
	border-bottom: 1px solid var(--border);
	flex: none;
}
.drawer__title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.drawer__close { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; color: var(--meta); }
.drawer__close:hover { color: var(--ink); }
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

/* =========================================================================
   11. Breadcrumbs & page heads
   ========================================================================= */

.crumbs { padding-block: var(--s5) 0; }
.crumbs__list {
	list-style: none;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-xs);
	color: var(--meta);
}
.crumbs__item { display: inline-flex; align-items: center; gap: 8px; }
.crumbs__item a { transition: color var(--t-fast) var(--ease-out); }
.crumbs__item a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs__sep { display: inline-flex; opacity: .4; }

.pagehead { padding-block: var(--s8) var(--s7); max-width: 720px; }
.pagehead--doc { padding-block: var(--s9) var(--s7); max-width: 68ch; }
.pagehead__title { margin: 0 0 var(--s3); }
.pagehead__sub { color: var(--muted); font-size: var(--fs-body-lg); margin: 0; }
.pagehead__stamp {
	font-size: var(--fs-xs);
	color: var(--meta);
	margin: var(--s3) 0 0;
	letter-spacing: .02em;
}
.pagehead--doc .pagehead__stamp { margin-top: var(--s4); }

/* =========================================================================
   12. Document / prose pages
   ========================================================================= */

.doc { display: grid; gap: var(--s9); padding-bottom: var(--section-y); max-width: 1080px; }
@media (min-width: 1024px) {
	/* The first track is the prose measure, not the leftover space, so the
	   help card sits beside the text instead of at the far page edge. */
	.doc { grid-template-columns: minmax(0, 68ch) minmax(0, 300px); gap: var(--s9); align-items: start; }
	.doc--wide { grid-template-columns: minmax(0, 1fr); max-width: var(--wrap); }
	.doc--wide .doc__help { max-width: 420px; }
}

.doc__body { max-width: 68ch; font-size: var(--fs-body-lg); line-height: 1.75; color: var(--muted); }
.doc--wide .doc__body { max-width: none; }
.doc__body h2 {
	font-size: 1.375rem;
	color: var(--ink);
	margin-top: var(--s9);
	padding-top: var(--s6);
	border-top: 1px solid var(--border);
}
.doc__body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc__body h3 { font-size: 1.0625rem; color: var(--ink); margin-top: var(--s7); }
.doc__body p { margin-bottom: 1.1em; }
.doc__body ul, .doc__body ol { padding-left: 1.25em; margin: 0 0 1.2em; }
.doc__body li { margin-bottom: .5em; }
.doc__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.doc__body a:hover { color: var(--accent-hover); }
.doc__body strong { color: var(--ink); }

.doc__body table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--s6) 0 var(--s8);
	font-size: var(--fs-body);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	overflow: hidden;
}
.doc__body th, .doc__body td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.doc__body th {
	background: var(--surface-2);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	white-space: nowrap;
}
.doc__body tr:last-child td { border-bottom: 0; }
.doc__body td { font-variant-numeric: tabular-nums; }

/* Tables must scroll inside their own box, never the page. */
.doc__body .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.doc__help {
	position: sticky;
	top: calc(var(--head-h) + 24px);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	padding: var(--s6);
}
.doc__help h2 { margin: 0 0 var(--s2); font-size: var(--fs-h3); }
.doc__help p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s5); }

/* =========================================================================
   13. Hero
   ========================================================================= */

.hero {
	position: relative;
	min-height: min(88vh, 900px);
	display: grid;
	align-items: end;
	overflow: hidden;
	background: var(--surface-2);
	isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	animation: heroZoom 1200ms var(--ease-smooth) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }

/* Apparel heroes are frequently light garments on light ground, so the scrim
   has to carry the text on its own: .72 at the base composites to ~6.9:1 for
   bone text even over a pure-white frame. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(20,19,15,.72) 0%, rgba(20,19,15,.42) 38%, rgba(20,19,15,0) 74%);
}

.hero__inner { padding-block: var(--s10) clamp(48px, 7vw, 88px); position: relative; }
.hero__body { max-width: 680px; color: var(--bg); }
.hero__eyebrow {
	font-family: var(--font-display);
	font-size: var(--fs-micro);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: rgba(246,244,239,.82);
	margin: 0 0 var(--s4);
}
.hero__title {
	font-size: var(--fs-display);
	line-height: .92;
	letter-spacing: -.04em;
	color: var(--bg);
	margin: 0 0 var(--s5);
}
.hero__word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero__word > span {
	display: inline-block;
	transform: translateY(110%);
	animation: heroRise 800ms var(--ease-smooth) forwards;
	animation-delay: calc(var(--w, 0) * 90ms);
}
@keyframes heroRise { to { transform: translateY(0); } }

.hero__sub {
	font-size: var(--fs-body-lg);
	line-height: 1.6;
	color: rgba(246,244,239,.92);
	max-width: 46ch;
	margin: 0 0 var(--s7);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero__cta .btn--ghost { border-color: rgba(246,244,239,.5); color: var(--bg); }
.hero__cta .btn--ghost:hover { background: var(--bg); border-color: var(--bg); color: var(--ink); }

.hero--plain { min-height: auto; background: var(--surface-2); }
.hero--plain::after { display: none; }
.hero--plain .hero__body { color: var(--ink); }
.hero--plain .hero__title { color: var(--ink); }
.hero--plain .hero__eyebrow { color: var(--meta); }
.hero--plain .hero__sub { color: var(--muted); }
.hero--plain .hero__inner { padding-block: clamp(64px, 9vw, 128px); }
.hero--plain .btn--ghost { border-color: var(--border-strong); color: var(--ink); }

@media (max-width: 767px) {
	.hero { min-height: 78vh; }
	.hero__inner { padding-block: var(--s9) var(--s8); }
}

/* =========================================================================
   14. Trust strip
   ========================================================================= */

.trust { border-block: 1px solid var(--border); }
.trust__list {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(74%, 1fr);
	gap: var(--s4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block: var(--s6);
	scrollbar-width: none;
}
.trust__list::-webkit-scrollbar { display: none; }
.trust__item {
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: var(--s3);
	padding-right: var(--s4);
}
.trust__item .ico { color: var(--ink); margin-top: 1px; }
.trust__title {
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink);
	margin: 0;
	line-height: 1.35;
}
.trust__sub { font-size: var(--fs-xs); color: var(--meta); margin: 2px 0 0; line-height: 1.4; }

@media (min-width: 768px) {
	.trust__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-columns: auto;
		overflow: visible;
		gap: 0;
		padding-block: 28px;
	}
	.trust__item { padding-inline: var(--s6); border-left: 1px solid var(--border); }
	.trust__item:first-child { border-left: 0; padding-left: 0; }
	.trust__item:last-child { padding-right: 0; }
}

/* =========================================================================
   15. Category tiles
   ========================================================================= */

.tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
@media (min-width: 768px)  { .tiles { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: var(--r-xs);
	overflow: hidden;
	background: var(--surface-2);
	isolation: isolate;
}
.tile__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--ease-smooth);
}
.tile:hover .tile__img { transform: scale(1.04); }
.tile::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(20,19,15,.55), rgba(20,19,15,0) 55%);
}
.tile__label {
	position: absolute;
	left: var(--s4); right: var(--s4); bottom: var(--s4);
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--bg);
}
.tile__label svg { transition: transform var(--t-base) var(--ease-out); }
.tile:hover .tile__label svg { transform: translateX(6px); }
.tile__count { font-size: var(--fs-xs); letter-spacing: 0; text-transform: none; opacity: .78; margin-left: auto; }

/* =========================================================================
   16. Editorial split
   ========================================================================= */

.split { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 1024px) {
	.split { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); }
	.split--flip .split__media { order: 2; }
}
.split__media {
	aspect-ratio: 4 / 5;
	border-radius: var(--r-xs);
	overflow: hidden;
	background: var(--surface-2);
}
.split__img { width: 100%; height: 100%; object-fit: cover; }
.split__body { max-width: 460px; }
.split__body h2 { margin-bottom: var(--s4); }
.split__body p { color: var(--muted); font-size: var(--fs-body-lg); line-height: 1.7; }
.split__body .link-arrow { margin-top: var(--s4); }

.facts { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s4); }
.facts li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--s3);
	align-items: start;
	font-size: var(--fs-body);
	color: var(--muted);
}
.facts .ico { color: var(--accent); margin-top: 3px; }

/* =========================================================================
   17. Product rail (horizontal snap)
   ========================================================================= */

.rail { position: relative; }
.rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 74%;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: var(--s2);
	margin-inline: calc(var(--pad) * -1);
	padding-inline: var(--pad);
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }

@media (min-width: 640px)  { .rail__track { grid-auto-columns: 44%; gap: 16px; } }
@media (min-width: 1024px) { .rail__track { grid-auto-columns: calc((100% - 60px) / 4); gap: 20px; margin-inline: 0; padding-inline: 0; } }

.rail__nav { display: none; gap: 8px; }
@media (min-width: 1024px) { .rail__nav { display: flex; } }
.rail__btn {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border: 1px solid var(--border-ctl);
	border-radius: var(--r-pill);
	color: var(--ink);
	transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.rail__btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.rail__btn[disabled] { opacity: .35; cursor: not-allowed; }
.rail__btn[disabled]:hover { background: none; border-color: var(--border); color: var(--ink); }

/* =========================================================================
   18. Reviews
   ========================================================================= */

.quotes { display: grid; gap: var(--s5); }
@media (min-width: 768px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-xs);
	padding: var(--s7);
	display: grid;
	gap: var(--s4);
	align-content: start;
}
.quote__stars { display: flex; gap: 3px; color: var(--ink); }
.quote__stars svg { fill: currentColor; stroke: none; }
.quote__text { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--ink); margin: 0; }
.quote__who { font-size: var(--fs-xs); color: var(--meta); margin: 0; display: flex; align-items: center; gap: 6px; }
.quote__who .ico { color: var(--success); }

.ratingline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s3);
	margin-bottom: var(--s7);
	font-size: var(--fs-sm);
	color: var(--muted);
}
.ratingline__stars { display: flex; gap: 2px; color: var(--ink); }
.ratingline__stars svg { fill: currentColor; stroke: none; }

/* =========================================================================
   19. Newsletter
   ========================================================================= */

.signup { background: var(--surface-2); padding-block: clamp(56px, 7vw, 96px); }
.signup__inner { display: grid; gap: var(--s6); max-width: 620px; margin-inline: auto; text-align: center; }
.signup__title { margin: 0 0 var(--s2); font-size: var(--fs-h2); }
.signup__note { font-size: var(--fs-sm); color: var(--meta); margin: 0; }
.signup__form { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; }
.signup__input {
	flex: 1 1 260px;
	max-width: 360px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--border-strong);
	border-radius: 0;
	padding-inline: 0;
	text-align: center;
}
.signup__input:focus { box-shadow: none; border-bottom-color: var(--accent); }

/* =========================================================================
   20. Footer
   ========================================================================= */

.foot { background: var(--ink-deep); color: var(--bg); padding-top: var(--s10); }
.foot a { color: inherit; }

.foot__grid { display: grid; gap: var(--s8); padding-bottom: var(--s9); }
@media (min-width: 768px)  { .foot__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .foot__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s7); } }

.foot__brand { max-width: 400px; }
.brand--foot .brand__word { font-size: 20px; color: var(--bg); }
.brand--foot .brand__img { filter: brightness(0) invert(1); }
.foot__blurb { margin: var(--s5) 0 var(--s6); font-size: var(--fs-body); line-height: 1.7; color: rgba(246,244,239,.72); }

.foot__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.foot__contact li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--s3);
	align-items: start;
	font-size: var(--fs-sm);
	color: rgba(246,244,239,.78);
	line-height: 1.5;
}
.foot__contact .ico { margin-top: 2px; opacity: .6; }
.foot__contact a { transition: color var(--t-fast) var(--ease-out); }
.foot__contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Registered offices — head office plus the US selling entity. */
.foot__offices {
	list-style: none;
	margin: var(--s5) 0 0;
	padding: var(--s5) 0 0;
	border-top: 1px solid rgba(246, 244, 239, .14);
	display: grid;
	gap: var(--s4);
}
@media (min-width: 480px) { .foot__offices { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
@media (min-width: 1024px) { .foot__offices { grid-template-columns: 1fr; } }
@media (min-width: 1280px) { .foot__offices { grid-template-columns: repeat(2, 1fr); } }

.foot__office {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--s3);
	align-items: start;
}
.foot__office .ico { margin-top: 2px; opacity: .6; }
.foot__office-label {
	font-family: var(--font-display);
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: rgba(246, 244, 239, .55);
	margin: 0 0 4px;
}
.foot__office-name {
	font-size: var(--fs-sm);
	font-weight: 500;
	color: rgba(246, 244, 239, .92);
	margin: 0 0 2px;
	line-height: 1.4;
}
.foot__office-addr {
	font-size: var(--fs-xs);
	color: rgba(246, 244, 239, .68);
	margin: 0;
	line-height: 1.55;
}

.foot__ctitle {
	font-family: var(--font-display);
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: rgba(246,244,239,.6);
	margin: 0 0 var(--s5);
}
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.foot__list a {
	font-size: var(--fs-sm);
	color: rgba(246,244,239,.78);
	transition: color var(--t-fast) var(--ease-out);
}
.foot__list a:hover { color: #fff; }

.foot__bar { border-top: 1px solid rgba(246,244,239,.14); }
.foot__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4) var(--s6);
	padding-block: var(--s6) var(--s7);
}
.foot__copy { font-size: var(--fs-xs); color: rgba(246,244,239,.6); margin: 0; }
.foot__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s4); }
.foot__legal a { font-size: var(--fs-xs); color: rgba(246,244,239,.72); }
.foot__legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.paymarks { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; }
.paymarks__item {
	display: flex;
	opacity: .82;
	transition: opacity var(--t-fast) var(--ease-out);
	border-radius: 4px;
	overflow: hidden;
}
.paymarks__item:hover { opacity: 1; }

/* =========================================================================
   21. Empty states, pager, misc
   ========================================================================= */

.emptystate {
	text-align: center;
	max-width: 520px;
	margin-inline: auto;
	padding-block: var(--s10);
}
.emptystate h1, .emptystate h2 { margin-bottom: var(--s3); }
.emptystate p { color: var(--muted); margin-bottom: var(--s6); }
.emptystate__code {
	font-family: var(--font-display);
	font-size: clamp(4rem, 12vw, 8rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--border-strong);
	margin: 0 0 var(--s4);
}
.emptystate__actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; margin-bottom: var(--s7); }
.emptystate .sform { max-width: 420px; margin-inline: auto; }

.pager, .woocommerce-pagination { margin-block: var(--s9); }
.pager .nav-links,
.woocommerce-pagination ul {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	border: 0 !important;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce-pagination ul li { border: 0 !important; margin: 0; overflow: visible; }
.pager .page-numbers,
.woocommerce-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px; height: 40px;
	padding: 0 12px;
	border: 1px solid var(--border-ctl);
	border-radius: var(--r-pill);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	background: transparent;
	transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.pager .page-numbers:hover,
.woocommerce-pagination .page-numbers:hover { border-color: var(--ink); }
.pager .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}
.pager .page-numbers.dots,
.woocommerce-pagination .page-numbers.dots { border-color: transparent; }

/* Blog grid */
.postgrid { display: grid; gap: var(--s7); }
@media (min-width: 768px)  { .postgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .postgrid { grid-template-columns: repeat(3, 1fr); } }
.pcard__media { display: block; aspect-ratio: 4/3; border-radius: var(--r-xs); overflow: hidden; background: var(--surface-2); margin-bottom: var(--s4); }
.pcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-smooth); }
.pcard:hover .pcard__img { transform: scale(1.03); }
.pcard__date { font-size: var(--fs-xs); color: var(--meta); margin: 0 0 var(--s2); }
.pcard__title { font-size: var(--fs-h3); margin: 0 0 var(--s2); }
.pcard__ex { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--s3); }

/* Accordion */
.acc { border-top: 1px solid var(--border); }
.acc__item { border-bottom: 1px solid var(--border); }
.acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	width: 100%;
	padding: var(--s5) 0;
	text-align: left;
	font-family: var(--font-display);
	font-size: var(--fs-body-lg);
	font-weight: 500;
	color: var(--ink);
}
.acc__head::after {
	content: "";
	flex: none;
	width: 14px; height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform var(--t-base) var(--ease-out);
}
.acc__item.is-open .acc__head::after { transform: rotate(180deg); }
.acc__body {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--t-mid) var(--ease-smooth);
	color: var(--muted);
}
.acc__item.is-open .acc__body { max-height: var(--h, 800px); }
.acc__body > *:first-child { padding-top: 2px; }
.acc__body > *:last-child { padding-bottom: var(--s5); }

/* Toast */
.toast {
	position: fixed;
	left: var(--s6); bottom: var(--s6);
	z-index: var(--z-toast);
	background: var(--ink-deep);
	color: var(--bg);
	padding: 14px 18px;
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	max-width: min(360px, calc(100vw - 32px));
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 280ms var(--ease-smooth), transform 280ms var(--ease-smooth);
}
.toast.is-on { opacity: 1; transform: none; }
@media (max-width: 640px) { .toast { left: var(--s4); right: var(--s4); bottom: auto; top: var(--s3); max-width: none; transform: translateY(-12px); } }

/* Back to top */
.totop {
	position: fixed;
	right: var(--s5); bottom: var(--s5);
	z-index: calc(var(--z-toast) - 20);
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	background: var(--ink);
	color: var(--bg);
	border-radius: var(--r-pill);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.totop svg { transform: rotate(180deg); }
.totop.is-on { opacity: 1; transform: none; }
.totop:hover { background: var(--accent); }
@media (max-width: 767px) { .totop { bottom: calc(var(--s5) + env(safe-area-inset-bottom)); } }
body.is-pdp .totop { display: none; }

/* =========================================================================
   22. Motion — reveal
   ========================================================================= */

.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--t-reveal) var(--ease-smooth),
		transform var(--t-reveal) var(--ease-smooth);
	transition-delay: calc(min(var(--i, 0), 6) * 70ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Skeleton shimmer used by image placeholders. */
.skel { position: relative; background: var(--surface-2); overflow: hidden; }
.skel::after {
	content: "";
	position: absolute; inset: 0;
	width: 60%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
	transform: translateX(-100%);
	animation: shimmer 1400ms linear infinite;
}
@keyframes shimmer { to { transform: translateX(220%); } }

/* =========================================================================
   23. Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	html { scroll-behavior: auto; }
	.reveal { opacity: 1 !important; transform: none !important; }
	.hero__img { transform: none; animation: none; }
	.hero__word > span { transform: none; animation: none; }
	.skel::after { display: none; }
	.tile:hover .tile__img,
	.pcard:hover .pcard__img { transform: none; }
}

.foot__terms {
	font-size: var(--fs-xs);
	color: rgba(246,244,239,.6);
	margin: 0 0 var(--s3);
	max-width: 68ch;
}

/* =========================================================================
   22. Corrections
   Appended so each rule wins on source order rather than by editing the
   sections above; media queries are repeated where a base rule must not
   leak into a breakpoint it does not belong in.
   ========================================================================= */

/* --- Nav drawer and search pane rendered UNDER their own scrim ------------
   .head is a stacking context (position:sticky + z-index), so #site-nav and
   .searchpane are trapped inside it at 900 and can never beat the body-level
   scrim at 999. Every click on a nav link hit the scrim's close handler.
   The header is lifted only while one of those two overlays is open, so the
   cart drawer still dims the header as designed. */
body.nav-open .head,
body.search-open .head { z-index: calc(var(--z-drawer) + 1); }

/* A closed drawer must not keep its links in the tab order. */
@media (max-width: 1023px) {
	.nav {
		visibility: hidden;
		transition: transform 460ms var(--ease-smooth), visibility 0s linear 460ms;
	}
	.nav.is-open {
		visibility: visible;
		transition: transform 460ms var(--ease-smooth), visibility 0s;
	}
}

/* --- Header at very narrow widths ----------------------------------------
   Below ~400px the utility bar pushed the bag icon past the viewport edge,
   so the cart became unreachable on the smallest phones. */
@media (max-width: 400px) {
	:root { --pad: 12px; }
	.head__inner { gap: var(--s2); }
	.brand__word { font-size: 17px; letter-spacing: .12em; }
	.utilbar__btn, .utilbar__cart { width: 38px; }
}

/* The wordmark is centred in the viewport rather than in its own track,
   which otherwise sat it ~42px left of centre on every phone. */
@media (max-width: 767px) {
	.head__inner { position: relative; }
	.head__brand {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		pointer-events: none;
	}
	.head__brand a { pointer-events: auto; }
}

/* --- Document pages -------------------------------------------------------
   An implicit auto track let long words and wide tables push .doc__body past
   the viewport; 477px of text inside a 390px screen clipped every line. */
.doc { grid-template-columns: minmax(0, 1fr); }
.doc__body { min-width: 0; }
@media (min-width: 1024px) {
	.doc { grid-template-columns: minmax(0, 68ch) minmax(0, 300px); }
	.doc--wide { grid-template-columns: minmax(0, 1fr); }
}

/* The prose heading rule was decorating WooCommerce's own headings with a
   stray hairline and a 56px gap. Restrict it to direct children. */
.doc__body h2 { border-top: 0; padding-top: 0; }
.doc__body > h2 {
	border-top: 1px solid var(--border);
	padding-top: var(--s7);
}
.doc__body > h2:first-child { border-top: 0; padding-top: 0; }

/* Core block buttons inherited WP's #32373C default against our cobalt link
   colour — about 1.25:1, effectively unreadable. */
.doc__body .wp-block-button__link {
	background: var(--accent);
	color: var(--bg);
	text-decoration: none;
	border-radius: var(--r-pill, 999px);
	font-family: var(--font-display);
	padding: 14px 28px;
}
.doc__body .wp-block-button__link:hover { background: var(--accent-hover); color: var(--bg); }
.doc__body .wc-block-grid__product-title a,
.doc__body .woocommerce-loop-product__title a { color: var(--ink); text-decoration: none; }

/* --- Product controls ----------------------------------------------------- */

/* Attribute labels were centred while their controls were left-aligned. */
.variations td, .variations th { text-align: left; }

/* Before a variation is chosen WooCommerce paints its own purple at 50%
   opacity; keep the theme's accent and let the cursor signal the state. */
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.wc-variation-selection-needed {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--bg);
	opacity: 1;
	cursor: not-allowed;
}

/* The add-to-cart row never became a flex container, so flex:1 on the button
   did nothing and the CTA stayed at its intrinsic width. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	align-items: stretch;
}

/* --- Pagination -----------------------------------------------------------
   The theme's .pager rules never matched WooCommerce's markup, so archives
   fell back to Woo's grey-lavender pills. */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--border-ctl);
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--ink);
	font-size: var(--fs-sm);
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover {
	background: var(--surface);
	border-color: var(--ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a.current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

/* --- My account ----------------------------------------------------------
   Logged out there is no nav column, so the 240px track stranded the login
   heading beside 240px of nothing. */
.woocommerce-account:not(.logged-in) .woocommerce { grid-template-columns: minmax(0, 1fr); }

/* --- Homepage ------------------------------------------------------------- */

/* The image-less hero was still forced to 78vh on phones, leaving roughly
   344px of empty background under the buttons. */
@media (max-width: 767px) {
	.hero--plain { min-height: 0; }
}

/* Category tile labels overflowed their box on narrow screens. */
@media (max-width: 767px) {
	.tile__label {
		left: 12px;
		right: 12px;
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 6px;
		row-gap: 2px;
		align-items: end;
	}
	.tile__label svg { display: none; }
	.tile__count { margin-left: 0; }
}

/* Sections with no media were reserving an empty second column. */
.split--solo { grid-template-columns: minmax(0, 1fr); }
.split--solo .split__body { max-width: 70ch; }

/* The trust strip went 4-up at 768px and wrapped into ragged two-line text
   until roughly 1100px. */
@media (min-width: 768px) and (max-width: 1099px) {
	.trust__list { grid-template-columns: repeat(2, 1fr); row-gap: var(--s5); }
	.trust__item:nth-child(3) { border-left: 0; }
}

/* --- Footer ---------------------------------------------------------------
   The offices were crushed into ~110px columns; let them size themselves. */
.foot__offices { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

@media (min-width: 768px) {
	/* With no menu columns rendered the brand block was pinned to a narrow
	   track beside three empty ones. */
	.foot__grid:not(:has(.foot__col)) { grid-template-columns: minmax(0, 1fr); }
	.foot__grid:not(:has(.foot__col)) .foot__brand { max-width: none; }
}

/* --- Overlays ------------------------------------------------------------- */

/* Back-to-top floated above the open cart drawer. is-locked is set for every
   overlay, so one rule covers nav, search, cart and filters. */
body.is-locked .totop { opacity: 0; pointer-events: none; }

/* --- Reveal animation resilience -----------------------------------------
   .reveal starts at opacity 0 and is un-hidden by script. If app.js fails to
   parse or 404s, every revealed section stays permanently invisible. Gating
   on .js means the content is simply visible when scripting is unavailable. */
html:not(.js) .reveal,
html:not(.js) [data-stagger] > * {
	opacity: 1 !important;
	transform: none !important;
}

/* =========================================================================
   21. Contact form
   Inputs inherit the shared control styling in section 6; this only adds
   layout, labelling and the error/success states.
   ========================================================================= */

.cform { margin: var(--s7) 0 0; }

.cform__grid { display: grid; gap: var(--s5); }
@media (min-width: 640px) {
	.cform__grid { grid-template-columns: 1fr 1fr; }
}

.cform__field { margin: 0 0 var(--s5); display: flex; flex-direction: column; gap: 7px; }
.cform__grid .cform__field { margin: 0; }

.cform__field label {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--ink);
	letter-spacing: .01em;
}
.cform__opt { font-weight: 400; color: var(--meta); }

.cform__field input,
.cform__field select,
.cform__field textarea { width: 100%; }

/* The invalid state has to read without colour alone, hence the weight change. */
.cform__field [aria-invalid="true"] { border-color: var(--danger, #B3261E); }
.cform__err { font-size: var(--fs-xs); color: var(--danger, #B3261E); font-weight: 600; }

.cform__alert {
	margin: 0 0 var(--s5);
	padding: 14px 16px;
	border: 1px solid var(--danger, #B3261E);
	border-radius: var(--r-sm);
	background: rgba(179, 38, 30, .06);
	color: var(--ink);
	font-size: var(--fs-sm);
}

.cform__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s5);
	margin-top: var(--s6);
}
.cform__note { margin: 0; font-size: var(--fs-xs); color: var(--meta); max-width: 38ch; }

/* Honeypot: moved off-screen rather than hidden, so bots that skip
   display:none still fill it in. */
.cform__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cform__done {
	display: flex;
	gap: var(--s4);
	align-items: flex-start;
	margin: var(--s7) 0 0;
	padding: var(--s6);
	border: 1px solid var(--border-ctl);
	border-radius: var(--r-sm);
	background: var(--surface);
}
.cform__done svg { flex: none; color: var(--accent); margin-top: 2px; }
.cform__done p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.cform__done-title {
	font-weight: 600;
	color: var(--ink) !important;
	font-size: var(--fs-body) !important;
	margin-bottom: 4px !important;
}


/* --- Product rail ---------------------------------------------------------
   The [products] shortcode emits <div class="woocommerce"><ul class="products">,
   and that extra .woocommerce wrapper was the rail grid's only child, so all
   eight products collapsed into a single column. Flatten both levels so the
   <li> elements become the grid items. */
.rail__track > .woocommerce,
.rail__track ul.products { display: contents; }

/* Section headers in row form placed only the link explicitly, so the title
   was auto-placed into the second column and the link landed left of it. */
.sechead--row .sechead__eyebrow,
.sechead--row .sechead__title,
.sechead--row .sechead__sub { grid-column: 1; }
.sechead--row .sechead__link { grid-column: 2; }

/* When no aside was rendered the second track stayed reserved, leaving the
   prose beside 300px of nothing. :has() lets the grid react to its own
   children rather than duplicating the exclusion list from page.php. */
@media (min-width: 1024px) {
	.doc:not(:has(.doc__help)) { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   23. DCYPHR brand tokens
   Matching dcyphr.in: white ground, near-black ink, #DA3217 reserved for the
   marquee and sale marking, Manrope with the wide tracking their wordmark and
   navigation use.
   ========================================================================= */

:root {
	--brand-red: #DA3217;
}

/* The reference letter-spaces its nav and small labels noticeably. */
.nav__label,
.foot__col-title,
.sechead__eyebrow,
.eyebrow { letter-spacing: .14em; }

/* Logo lockup: the horizontal mark needs room to breathe and a fixed height
   so the header does not jump between the text and image variants. */
.brand__img { height: 26px; width: auto; display: block; }
@media (min-width: 768px) { .brand__img { height: 30px; } }
.brand--foot .brand__img { height: 30px; }

/* Announcement marquee, as on the reference. */
.topbar {
	background: var(--brand-red);
	color: #fff;
}
.topbar__item { color: #fff; }

/* Sale badges use the brand red rather than the old maroon. */
.badge--sale,
.badge.badge--sale { background: var(--brand-red); color: #fff; }

/* Prose links: black with an underline. The brand red fails contrast as body
   text on white (about 3.5:1), so it is not used for running copy. */
.doc__body :is(p, li, td, dd) a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.doc__body :is(p, li, td, dd) a:hover { color: var(--brand-red); }

/* --- Social row ---------------------------------------------------------- */
.foot__social {
	display: flex;
	gap: 10px;
	margin: var(--s5) 0 0;
	padding: 0;
	list-style: none;
}
.foot__social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(246, 244, 239, .25);
	border-radius: 999px;
	color: rgba(246, 244, 239, .85);
	transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.foot__social a:hover {
	background: #fff;
	border-color: #fff;
	color: var(--ink-deep);
}
.foot__social svg { width: 18px; height: 18px; }

/* =========================================================================
   24. Contact directory + address links
   ========================================================================= */

.cdir { list-style: none; margin: var(--s6) 0 0; padding: 0; }
.cdir__row { border-top: 1px solid var(--border); }
.cdir__row:last-child { border-bottom: 1px solid var(--border); }

.cdir__link {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "label arrow" "value arrow";
	align-items: center;
	gap: 2px var(--s4);
	padding: var(--s5) 2px;
	text-decoration: none;
	color: var(--ink);
}
.cdir__label {
	grid-area: label;
	font-size: var(--fs-micro);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--meta);
}
.cdir__value {
	grid-area: value;
	font-size: var(--fs-body-lg);
	color: var(--ink);
	word-break: break-word;
}
.cdir__arrow {
	grid-area: arrow;
	color: var(--meta);
	transition: transform 180ms var(--ease-out), color 180ms var(--ease-out);
}
.cdir__link:hover .cdir__value { text-decoration: underline; text-underline-offset: 3px; }
.cdir__link:hover .cdir__arrow { transform: translate(3px, -3px); color: var(--ink); }

/* Addresses are links to Google Maps; keep them reading as text until hovered
   so the footer does not turn into a wall of underlines. */
.addrlink { color: inherit; text-decoration: none; }
.addrlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.addrlink--foot:hover { color: #fff; }