/* ============================================================
   ABH — Foundation v2
   Premium light design system. One sans-serif (DM Sans).
   Strict token usage. Fixed type scale (7 sizes). One spacing
   rhythm. No component CSS lives here — only tokens, reset,
   typography, container, sections, buttons, header, footer,
   forms, helpers. Phase 2 layers components on top.
   ============================================================ */


/* ───────────────────────────── 1 · Tokens ───────────────────────────── */
:root {

	/* Color */
	--bg:          #FFFFFF;
	--surface:     #F8F6F1;
	--ink:         #111111;
	--ink-2:       #4A4A4A;
	--mute:        #9A958C;
	--line:        #ECE7DC;
	--accent:      #B58840;
	--accent-2:    #C29A52;
	--accent-ink:  #FFFFFF;
	--success:     #2F7B4F;
	--danger:      #B23A2A;

	/* Typography — one font, four weights */
	--font:        'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--w-light:     300;
	--w-reg:       400;
	--w-med:       500;
	--w-bold:      600;

	/* Type scale — 7 sizes only. Body never below 16. */
	--t-meta:      14px;   /* eyebrow / badge / caption */
	--t-body:      16px;   /* body min */
	--t-lead:      18px;   /* lede / blockquote */
	--t-h4:        22px;   /* small heading / product title */
	--t-h3:        32px;   /* tertiary heading */
	--t-h2:        48px;   /* section heading */
	--t-h1:        72px;   /* hero / page title */

	/* Line height + tracking */
	--lh-tight:    1.1;
	--lh-snug:     1.25;
	--lh-body:     1.6;
	--tr-tight:    -0.01em;
	--tr-wide:     0.18em;

	/* Spacing — one rhythm */
	--s-1:  4px;
	--s-2:  8px;
	--s-3:  16px;
	--s-4:  24px;
	--s-5:  40px;
	--s-6:  64px;
	--s-7:  96px;   /* every section's top + bottom padding */
	--s-8:  128px;  /* hero only */

	/* Container */
	--container:   1280px;
	--gutter:      24px;

	/* Radius — sharp by default, pill only for badges/cart count */
	--radius:      0px;
	--radius-pill: 999px;

	/* Motion */
	--ease:        cubic-bezier(.2,.7,.2,1);
	--d-fast:      200ms;
	--d-slow:      500ms;

	/* Layout */
	--ann-h:       36px;
	--header-h:    88px;
}


/* ───────────────────────────── 2 · Reset ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
li { list-style: none; }
img { max-width: 100%; height: auto; }
img[src=""], img:not([src]) { visibility: hidden; }
img, picture, svg, video { max-width: 100%; display: block; height: auto; }
button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }


/* ───────────────────────────── 3 · Body ───────────────────────────── */
html, body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--t-body);
	font-weight: var(--w-reg);
	line-height: var(--lh-body);
	letter-spacing: var(--tr-tight);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* ───────────────────────────── 4 · Typography ───────────────────────────── */
h1, .h1 {
	font-size: var(--t-h1);
	font-weight: var(--w-light);
	line-height: var(--lh-tight);
	letter-spacing: -0.02em;
	color: var(--ink);
}
h2, .h2 {
	font-size: var(--t-h2);
	font-weight: var(--w-light);
	line-height: var(--lh-tight);
	letter-spacing: -0.015em;
	color: var(--ink);
}
h3, .h3 {
	font-size: var(--t-h3);
	font-weight: var(--w-reg);
	line-height: var(--lh-snug);
	letter-spacing: -0.005em;
	color: var(--ink);
}
h4, .h4 {
	font-size: var(--t-h4);
	font-weight: var(--w-med);
	line-height: var(--lh-snug);
	color: var(--ink);
}
p, li {
	font-size: var(--t-body);
	line-height: var(--lh-body);
	color: var(--ink-2);
}
.lead {
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--ink-2);
}
.eyebrow {
	display: inline-block;
	font-size: var(--t-meta);
	font-weight: var(--w-med);
	text-transform: uppercase;
	letter-spacing: var(--tr-wide);
	color: var(--mute);
}
small, .small { font-size: var(--t-meta); color: var(--mute); }
strong, b { font-weight: var(--w-bold); color: var(--ink); }
em, i { font-style: italic; }

a { transition: color var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease); }
a:hover { color: var(--accent); }

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


/* ───────────────────────────── 5 · Container + sections ───────────────────────────── */
.wrap {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 880px; }
.wrap--wide   { max-width: 1440px; }

section { padding-block: var(--s-7); }
section.is-flush-t { padding-top: 0; }
section.is-flush-b { padding-bottom: 0; }
section.surface    { background: var(--surface); }
section.dark       { background: var(--ink); color: var(--bg); }
section.dark h1, section.dark h2, section.dark h3, section.dark h4 { color: var(--bg); }
section.dark p, section.dark li { color: rgba(255,255,255,.72); }


/* ───────────────────────────── 6 · Buttons ───────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	height: 52px;
	padding: 0 var(--s-5);
	font-family: var(--font);
	font-size: var(--t-body);
	font-weight: var(--w-med);
	letter-spacing: 0.01em;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--bg);
	border-radius: var(--radius);
	transition: background var(--d-fast) var(--ease),
		color var(--d-fast) var(--ease),
		border-color var(--d-fast) var(--ease);
	cursor: pointer;
	white-space: nowrap;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); opacity: 1; }

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

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

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

.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn i { font-size: 14px; }


/* ───────────────────────────── 7 · Forms ───────────────────────────── */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], input[type="url"],
input[type="password"], input[type="date"], textarea, select {
	display: block;
	width: 100%;
	height: 52px;
	padding: 0 var(--s-4);
	font-family: var(--font);
	font-size: var(--t-body);
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color var(--d-fast) var(--ease);
}
textarea {
	height: auto;
	min-height: 140px;
	padding-block: var(--s-3);
	resize: vertical;
	line-height: var(--lh-body);
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--mute); }

label {
	display: block;
	font-size: var(--t-meta);
	font-weight: var(--w-med);
	color: var(--ink);
	margin-bottom: var(--s-2);
	letter-spacing: 0.02em;
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'><path fill='none' stroke='%23111' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>");
	background-repeat: no-repeat;
	background-position: right var(--s-3) center;
	background-size: 12px 7px;
	padding-right: var(--s-6);
}


/* ───────────────────────────── 8 · Skip link ───────────────────────────── */
.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus {
	left: var(--s-3); top: var(--s-3);
	padding: var(--s-2) var(--s-4);
	background: var(--ink); color: var(--bg);
	z-index: 999;
}


/* ───────────────────────────── 9 · Announcement bar ───────────────────────────── */
.ann {
	position: relative;
	height: var(--ann-h);
	background: var(--ink);
	color: var(--bg);
	font-size: var(--t-meta);
	letter-spacing: 0.04em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: var(--s-6);
	overflow: hidden;
}
.ann__rotator {
	position: relative;
	height: var(--ann-h);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-width: 0;
}
.ann__msg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	opacity: 0;
	transition: opacity 400ms var(--ease);
	color: rgba(255,255,255,.92);
	pointer-events: none;
}
.ann__msg.is-active { opacity: 1; }
.ann__msg strong { color: var(--bg); font-weight: var(--w-bold); margin-right: 4px; }
.ann__close {
	position: absolute;
	right: var(--s-3);
	top: 50%;
	transform: translateY(-50%);
	width: 24px; height: 24px;
	color: var(--bg);
	opacity: .55;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--d-fast) var(--ease);
}
.ann__close:hover { opacity: 1; }
.ann__close i { font-size: 14px; }


/* ───────────────────────────── 10 · Header ───────────────────────────── */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	height: var(--header-h);
	display: flex;
	align-items: center;
	transition: box-shadow var(--d-fast) var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(17,17,17,.04); }

.site-header__inner {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--s-5);
}

.brand {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	flex-shrink: 0;
}
.brand:hover { opacity: .85; }

/* Lock brand logo dimensions everywhere. The !important is intentional —
   it neutralises (a) the inline width/height attributes WP injects via
   wp_get_attachment_image(), and (b) any plugin/Woo CSS that resets
   img { height: auto }. The brand logo height is one of two design
   anchors (the other is section padding) and must never drift. */
.brand .brand__logo,
.brand > img {
	display: block !important;
	height: 44px !important;
	width: auto !important;
	max-width: 220px !important;
	max-height: 44px !important;
	object-fit: contain;
	margin: 0;
}

/* Footer variant — logo sits on dark; assume same artwork. If you ship a
   white version, upload it to Site Options → Footer logo. */
.brand--footer .brand__logo,
.brand--footer > img {
	height: 52px !important;
	max-height: 52px !important;
	max-width: 240px !important;
	filter: brightness(0) invert(1);
}

.nav { justify-self: center; }
.nav-list {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-list li { list-style: none; }
.nav-list a, .nav .menu-item a {
	display: inline-block;
	font-size: var(--t-meta);
	font-weight: var(--w-med);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	padding-block: var(--s-2);
	position: relative;
}
.nav-list a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 4px;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--d-fast) var(--ease);
}
.nav-list a:hover::after,
.nav-list .current-menu-item > a::after { transform: scaleX(1); }
.nav-list a:hover, .nav-list .current-menu-item > a { color: var(--accent); opacity: 1; }

.site-header .actions {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	justify-self: end;
}
.icon-btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
	position: relative;
	transition: color var(--d-fast) var(--ease);
}
.icon-btn i { font-size: 18px; }
.icon-btn:hover { color: var(--accent); opacity: 1; }
.icon-btn .badge {
	position: absolute;
	top: 6px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 11px;
	font-weight: var(--w-med);
	line-height: 18px;
	text-align: center;
	border-radius: var(--radius-pill);
}
.hamburger { display: none; }


/* ───────────────────────────── 11 · Mobile drawer ───────────────────────────── */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 80;
	visibility: hidden;
	pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(17,17,17,.4);
	opacity: 0;
	transition: opacity var(--d-fast) var(--ease);
}
.drawer.is-open .drawer__overlay { opacity: 1; }
.drawer__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(380px, 90vw);
	background: var(--bg);
	padding: var(--s-5) var(--s-4);
	transform: translateX(100%);
	transition: transform var(--d-slow) var(--ease);
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__close {
	align-self: flex-end;
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--ink);
}
.drawer__close i { font-size: 20px; }
.drawer__nav { display: flex; flex-direction: column; }
.drawer-nav-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.drawer-nav-list li { list-style: none; }
.drawer__nav a, .drawer-nav-list a, .drawer__nav .menu-item a {
	font-size: var(--t-h4);
	font-weight: var(--w-med);
	color: var(--ink);
	padding-block: var(--s-3);
	border-bottom: 1px solid var(--line);
	display: block;
	letter-spacing: 0.02em;
}
.drawer__nav a:hover, .drawer-nav-list a:hover { color: var(--accent); opacity: 1; }
.drawer__cta { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-2); }


/* ───────────────────────────── 12 · Newsletter band ───────────────────────────── */
.newsletter-band {
	background: var(--surface);
	padding-block: var(--s-6);
	border-top: 1px solid var(--line);
}
.newsletter-band__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--s-6);
	align-items: center;
}
.newsletter-band__copy h3 {
	font-size: var(--t-h3);
	font-weight: var(--w-light);
	color: var(--ink);
	margin-top: var(--s-2);
	max-width: 600px;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.eyebrow--light { color: var(--mute); }
.newsletter-band__form {
	display: flex;
	gap: var(--s-2);
	align-items: stretch;
}
.newsletter-band__form input[type="email"] {
	flex: 1;
	height: 56px;
	background: var(--bg);
	border-color: var(--line);
}
.newsletter-band__form input[type="email"]:focus { border-color: var(--ink); }
.newsletter-band__form .btn { height: 56px; flex-shrink: 0; }


/* ───────────────────────────── 13 · Footer ───────────────────────────── */
.site-footer {
	background: var(--ink);
	color: var(--bg);
	padding-block: var(--s-7) var(--s-5);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	gap: var(--s-6);
}
.foot-brand p {
	color: rgba(255,255,255,.65);
	margin-top: var(--s-4);
	max-width: 360px;
	font-size: var(--t-body);
	line-height: 1.65;
}
.foot-col__title {
	font-size: var(--t-meta);
	font-weight: var(--w-med);
	text-transform: uppercase;
	letter-spacing: var(--tr-wide);
	color: var(--bg);
	margin-bottom: var(--s-4);
}
.foot-list { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.foot-list li { list-style: none; }
.foot-list a {
	font-size: var(--t-body);
	color: rgba(255,255,255,.7);
	display: inline-block;
	transition: color var(--d-fast) var(--ease);
}
.foot-list a:hover { color: var(--accent); opacity: 1; }

/* Reach column — icon-led contact */
.foot-reach { display: flex; flex-direction: column; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.foot-reach__item {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
	list-style: none;
}
.foot-reach__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.1);
	color: var(--accent);
}
.foot-reach__icon i { font-size: 16px; }
.foot-reach__item > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.foot-reach__lbl {
	font-size: 11px;
	font-weight: var(--w-med);
	text-transform: uppercase;
	letter-spacing: var(--tr-wide);
	color: rgba(255,255,255,.45);
}
.foot-reach__val {
	font-size: var(--t-body);
	color: rgba(255,255,255,.85);
	line-height: 1.5;
	word-break: break-word;
}
a.foot-reach__val:hover { color: var(--accent); opacity: 1; }

/* Socials row */
.foot-socials {
	display: flex;
	gap: var(--s-2);
	margin-top: var(--s-5);
}
.foot-social {
	width: 42px; height: 42px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,.18);
	color: var(--bg);
	transition: background var(--d-fast) var(--ease),
		border-color var(--d-fast) var(--ease),
		color var(--d-fast) var(--ease),
		transform var(--d-fast) var(--ease);
}
.foot-social i { font-size: 16px; }
.foot-social:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
	opacity: 1;
	transform: translateY(-2px);
}

/* Payments + trust strip */
.site-footer__strip {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-5);
	flex-wrap: wrap;
	margin-top: var(--s-7);
	padding-top: var(--s-5);
	padding-bottom: var(--s-4);
	border-top: 1px solid rgba(255,255,255,.1);
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.payments {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	flex-wrap: wrap;
	color: rgba(255,255,255,.85);
}
.payments__lbl {
	font-size: var(--t-meta);
	color: rgba(255,255,255,.45);
	text-transform: uppercase;
	letter-spacing: var(--tr-wide);
	margin-right: var(--s-2);
}
.payments i { font-size: 24px; opacity: .85; }
.payments i:hover { color: var(--accent); opacity: 1; }
.pay-card {
	display: inline-flex;
	width: 42px; height: 28px;
	border-radius: 3px;
	overflow: hidden;
	opacity: .9;
	transition: opacity 0.2s ease;
}
.pay-card:hover { opacity: 1; }
.pay-card svg { width: 100%; height: 100%; display: block; }
.trust-marks {
	display: flex;
	gap: var(--s-4);
	flex-wrap: wrap;
	font-size: var(--t-meta);
	color: rgba(255,255,255,.7);
}
.trust-marks span { display: inline-flex; align-items: center; gap: var(--s-2); }
.trust-marks i { color: var(--accent); font-size: 12px; }

/* Bottom legal bar */
.site-footer__bottom {
	padding-top: var(--s-4);
	margin-top: var(--s-4);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-4);
	color: rgba(255,255,255,.5);
	font-size: var(--t-meta);
	flex-wrap: wrap;
}
.site-footer__legal ul { display: flex; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.site-footer__legal li { list-style: none; }
.site-footer__legal a { color: rgba(255,255,255,.5); }
.site-footer__legal a:hover { color: var(--bg); opacity: 1; }


/* ───────────────────────────── 13 · Float WhatsApp ───────────────────────────── */
.float-wa {
	position: fixed;
	right: var(--s-4);
	bottom: var(--s-4);
	width: 56px; height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #25D366;
	color: #fff;
	border-radius: var(--radius-pill);
	box-shadow: 0 12px 28px rgba(37,211,102,.32);
	z-index: 40;
	transition: transform var(--d-fast) var(--ease);
}
.float-wa:hover { transform: translateY(-2px); color: #fff; opacity: 1; }
.float-wa i { font-size: 28px; }


/* ─── Mobile bottom tab bar ───
   Hidden on desktop. The actual fixed-bottom layout + sizing is in
   responsive.css under the mobile breakpoint, so the bar truly only
   exists on phones. */
.tabbar { display: none; }
.tabbar__icon-wrap { position: relative; display: inline-flex; }
.tabbar__badge {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 10px;
	font-weight: var(--w-med);
	line-height: 16px;
	text-align: center;
	border-radius: var(--radius-pill);
}


/* ───────────────────────────── 14 · Utilities ───────────────────────────── */
.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--mute); }
.text-ink     { color: var(--ink); }
.text-accent  { color: var(--accent); }
.is-hidden    { display: none !important; }
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.gap-3        { gap: var(--s-3); }
.gap-4        { gap: var(--s-4); }
.mt-3         { margin-top: var(--s-3); }
.mt-4         { margin-top: var(--s-4); }
.mt-5         { margin-top: var(--s-5); }


/* ───────────────────────────── 15 · Section head (used by all sections) ───────────────────────────── */
.section-head {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin-bottom: var(--s-6);
	max-width: 720px;
}
.section-head--center {
	margin-inline: auto;
	text-align: center;
	align-items: center;
}
.section-head .eyebrow { margin-bottom: 0; }


/* ───────────────────────────── 16 · Page hero (inner pages — premium agency feel) ───────────────────────────── */
.page-hero {
	min-height: 50vh;                /* half viewport height */
	display: flex;
	align-items: center;
	background: var(--bg);
	padding-block: var(--s-7);
	border-bottom: 1px solid var(--line);
}
.page-hero .wrap {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.page-hero .bcrumb { margin-bottom: var(--s-3); }
.page-hero__eyebrow {
	color: var(--mute);
}
.page-hero__title {
	font-size: clamp(2.5rem, 6vw, 4.5rem);   /* 40px → 72px responsive */
	font-weight: var(--w-light);
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--ink);
	margin: 0;
	max-width: 18ch;
}
.page-hero__title em { font-style: italic; color: var(--accent); }
.page-hero__sub {
	font-size: var(--t-lead);
	color: var(--ink-2);
	line-height: 1.5;
	max-width: 640px;
	margin: var(--s-3) 0 0;
}

/* Breadcrumb — pill / tag style. Each step is a small bordered chip
   with uppercase tracked label. The current page chip uses ink fill
   for emphasis, ancestors stay outlined. */
.bcrumb {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
}
.bcrumb a,
.bcrumb__current,
.bcrumb > span:last-child {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 var(--s-3);
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--ink);
	font-size: 11px;
	font-weight: var(--w-med);
	letter-spacing: var(--tr-wide);
	text-transform: uppercase;
	transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.bcrumb a:hover {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
	opacity: 1;
}
.bcrumb__current,
.bcrumb > span:last-child {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}
.bcrumb__sep {
	display: inline-flex;
	align-items: center;
	color: var(--mute);
	font-size: 10px;
	height: 30px;
	padding: 0;
	background: transparent;
	border: 0;
	letter-spacing: 0;
	text-transform: none;
}
.bcrumb__sep i { font-size: 10px; }


/* ─────────────────────────────────────────────────────────────
   COMPONENTS — homepage
   Each component composes only foundation tokens. No new colors,
   font sizes, or spacing values introduced below this line.
   ───────────────────────────────────────────────────────────── */


/* ─── Section row (head with right-aligned link) ─── */
.section-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--s-5);
	margin-bottom: var(--s-6);
	flex-wrap: wrap;
}
.section-row__copy { max-width: 640px; display: flex; flex-direction: column; gap: var(--s-3); }
.section-row__title { font-size: var(--t-h2); font-weight: var(--w-light); line-height: var(--lh-tight); letter-spacing: -0.015em; }
.section-row__intro { color: var(--ink-2); }
.section-row__cta { flex-shrink: 0; }


/* ─── Hero (55/45 lifestyle split) ─── */
.hero {
	padding: 0;
	background: var(--surface);
}
.hero__inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	min-height: 640px;
	align-items: stretch;
}
.hero__media {
	position: relative;
	background: var(--line);
	overflow: hidden;
}
.hero__media .hero__img,
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hero__chip {
	position: absolute;
	left: var(--s-5);
	bottom: var(--s-5);
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-4);
	background: var(--bg);
	color: var(--ink);
	font-size: var(--t-meta);
	font-weight: var(--w-med);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.hero__chip::before {
	content: "";
	width: 6px; height: 6px;
	background: var(--accent);
	border-radius: var(--radius-pill);
}
.hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--s-4);
	padding: var(--s-7) var(--s-7);
	max-width: 620px;
}
.hero__eyebrow { color: var(--accent); }
.hero__title {
	font-size: var(--t-h1);
	font-weight: var(--w-light);
	line-height: var(--lh-tight);
	letter-spacing: -0.025em;
	color: var(--ink);
	margin: 0;
}
.hero__title strong { font-weight: var(--w-med); }
.hero__title em { font-style: normal; color: var(--accent); }
.hero__sub { max-width: 480px; }
.hero__ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }


/* ─── Trust strip — fluid container, square icons, single-line labels
   No .wrap — the section spans the full viewport with edge gutters
   only. Icons are square (matches the boxed category cards). Labels
   stay on a single line at desktop. */
.strip {
	padding: var(--s-7) var(--gutter);
	border-block: 1px solid var(--line);
}
.strip__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: nowrap;
	width: 100%;
}
.strip__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	gap: var(--s-3);
	list-style: none;
	flex: 1 1 0;
	min-width: 0;
	padding-inline: var(--s-4);
}
.strip__item + .strip__item { border-left: 1px solid var(--line); }
.strip__icon {
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 0;          /* square */
	color: var(--accent);
	background: var(--bg);
	flex-shrink: 0;
}
.strip__icon i { font-size: 22px; }
.strip__label {
	font-size: var(--t-meta);
	color: var(--ink);
	font-weight: var(--w-med);
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;       /* keep on one line where it fits */
}


/* ─── Section auto-alternation
   Sections that opt into the visual rhythm get the .flex-section
   class. The first .flex-section in <main> renders cream, the next
   white, then cream, and so on — independent of any neighbouring
   "special" sections (hero / banner / ws-band / news-band) which
   carry their own backgrounds and don't participate. */
main > section.flex-section { background: var(--surface); }
main > section.flex-section:nth-child(even of .flex-section) { background: var(--bg); }

/* ─── Featured products — "View all" button ─── */
.fp-section__more {
	text-align: center;
	margin-top: var(--s-5);
}

/* ─── Categories — boxed asymmetric masonry
   Card count drives the layout via a modifier class (.cats-grid--N).
   Each card is a rectangular tile, image fills the area, copy overlaid
   bottom-left with a soft scrim for legibility. */
.cats-grid {
	display: grid;
	gap: var(--s-3);
}

/* Default: 3-col grid for any count not handled below */
.cats-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 360px; }

/* 3 cards → big left, two stacked right */
.cats-grid--3 {
	grid-template-columns: 1.35fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-auto-rows: auto;
}
.cats-grid--3 .cat--feature { grid-row: 1 / 3; }

/* 4 cards → 2x2 grid with each tile tall */
.cats-grid--4 {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr 1fr;
	grid-auto-rows: auto;
}

/* 5 cards → big left spanning two rows, 2x2 right */
.cats-grid--5 {
	grid-template-columns: 1.2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-auto-rows: auto;
}
.cats-grid--5 .cat--feature { grid-row: 1 / 3; }

/* 6 cards → 3x2 grid (default columns work) */
.cats-grid--6 {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr 1fr;
	grid-auto-rows: auto;
}

/* The card itself */
.cat {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--ink);
	color: var(--bg);
	min-height: 320px;
	height: 100%;
}
.cat:hover { color: var(--bg); opacity: 1; }
.cat__media {
	position: absolute;
	inset: 0;
	background: var(--surface, #f0ebe0);
}
.cat__img,
.cat__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 800ms var(--ease);
}
.cat:hover .cat__img,
.cat:hover .cat__media img { transform: scale(1.05); }
.cat::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17,17,17,0) 50%, rgba(17,17,17,.7) 100%);
	pointer-events: none;
	z-index: 1;
}
.cat__copy {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 2;
	padding: var(--s-5);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.cat__name {
	font-size: var(--t-h3);
	font-weight: var(--w-med);
	color: var(--bg);
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.15;
}
.cat--feature .cat__name { font-size: var(--t-h2); font-weight: var(--w-light); }
.cat__count {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--t-meta);
	color: rgba(255,255,255,.85);
	font-weight: var(--w-med);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: color var(--d-fast) var(--ease);
}
.cat__count i { font-size: 11px; transition: transform var(--d-fast) var(--ease); }
.cat:hover .cat__count { color: var(--bg); }
.cat:hover .cat__count i { transform: translateX(4px); }


/* ─── Journal grid (3-up white boxed cards inside .wrap) ─── */
.journal-section { padding-block: var(--s-7); }
.journal {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-4);
}
.journal .article {
	background: var(--bg);
	border: 1px solid var(--line);
	gap: 0;
	overflow: hidden;
	transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.journal .article:hover {
	transform: translateY(-4px);
	border-color: var(--ink);
	box-shadow: 0 16px 32px -16px rgba(17,17,17,.12);
}
.journal .article__media { aspect-ratio: 4 / 3; }
.journal .article__body { padding: var(--s-5); }
.article {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	color: var(--ink);
	background: var(--bg);
}
.article:hover { color: var(--ink); opacity: 1; }
.article__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--line);
}
.article__img,
.article__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--ease);
}
.article:hover .article__img { transform: scale(1.03); }
.article__body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3) 0; }
.article__meta {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--t-meta);
	color: var(--mute);
	flex-wrap: wrap;
}
.article__cat {
	color: var(--accent);
	font-weight: var(--w-med);
	text-transform: uppercase;
	letter-spacing: var(--tr-wide);
}
.article__sep { color: var(--line); }
.article__title {
	font-size: var(--t-h3);
	font-weight: var(--w-reg);
	color: var(--ink);
	line-height: var(--lh-snug);
	margin: 0;
	letter-spacing: -0.005em;
}
.article__excerpt {
	color: var(--ink-2);
	font-size: var(--t-body);
	line-height: var(--lh-body);
}
.article__more {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	color: var(--ink);
	font-weight: var(--w-med);
	font-size: var(--t-meta);
	text-transform: uppercase;
	letter-spacing: var(--tr-wide);
	margin-top: var(--s-2);
}
.article__more i { font-size: 12px; transition: transform var(--d-fast) var(--ease); }
.article:hover .article__more { color: var(--accent); }
.article:hover .article__more i { transform: translateX(4px); }


/* ─── Story (editorial 2-col) ─── */
.story-section { padding-block: var(--s-7); }
.story {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-7);
	align-items: center;
}
.story__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--line);
}
.story__img,
.story__media img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.story__stat {
	position: absolute;
	right: -20px;
	bottom: var(--s-5);
	background: var(--bg);
	padding: var(--s-4) var(--s-5);
	border-left: 2px solid var(--accent);
	min-width: 200px;
}
.story__stat-num {
	font-size: var(--t-h2);
	font-weight: var(--w-light);
	color: var(--ink);
	line-height: 1;
	letter-spacing: -0.02em;
}
.story__stat-lbl {
	font-size: var(--t-meta);
	color: var(--mute);
	margin-top: var(--s-2);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.story__copy {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	max-width: 540px;
}
.story__title {
	font-size: var(--t-h2);
	font-weight: var(--w-light);
	line-height: var(--lh-tight);
	letter-spacing: -0.02em;
	color: var(--ink);
}
.story__body { color: var(--ink-2); line-height: var(--lh-body); }
.story__body p { margin-bottom: var(--s-3); }
.story__cta { margin-top: var(--s-3); }
.story__sig {
	margin-top: var(--s-5);
	padding-top: var(--s-4);
	border-top: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.story__sig-name { font-weight: var(--w-med); color: var(--ink); }
.story__sig-role { font-size: var(--t-meta); color: var(--mute); }


/* ─── Banner (full-bleed promo, edge-to-edge) ───
   No own padding or margin — adjacent sections already provide their own
   padding-block, so the banner butts against them at exactly one --s-7
   rhythm step. Setting margin here would double-up and create a 192px gap. */
.banner-section {
	padding: 0;
	margin: 0;
}
.banner {
	position: relative;
	aspect-ratio: 21 / 9;
	overflow: hidden;
	min-height: 460px;
	width: 100%;
}
.banner__media { position: absolute; inset: 0; background: var(--surface, #f0ebe0); }
.banner__img,
.banner__media img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(17,17,17,.55) 0%, rgba(17,17,17,.2) 55%, transparent 95%);
}
.banner__copy-wrap {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	max-width: var(--container);
	margin-inline: auto;
	padding: 0 var(--gutter) var(--s-6);
	width: 100%;
}
.banner__copy {
	max-width: 560px;
	color: var(--bg);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.banner__eyebrow { color: rgba(255,255,255,.75); }
.banner__title {
	font-size: var(--t-h2);          /* 48px — overlay copy reads better at section-head scale */
	font-weight: var(--w-light);
	line-height: var(--lh-tight);
	letter-spacing: -0.02em;
	color: var(--bg);
	max-width: 14ch;                 /* keep titles to 1–2 lines */
}
.banner__body { color: rgba(255,255,255,.85); max-width: 480px; }
.banner__copy .btn { align-self: flex-start; margin-top: var(--s-3); }
.banner__copy .btn--light { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.banner__copy .btn--light:hover { background: transparent; color: var(--bg); }


/* ─── Testimonials — horizontal slider with scroll-snap
   White section background, cards on cream surface so they pop. Cards
   live in a horizontal scroller; viewer drags or swipes through them
   with crisp snap-to-start alignment. */
.tst-section { padding-block: var(--s-7); background: var(--bg); }
.tst-grid {
	display: flex;
	gap: var(--s-4);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	padding-bottom: var(--s-3);
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
}
.tst-grid::-webkit-scrollbar { height: 4px; }
.tst-grid::-webkit-scrollbar-track { background: transparent; }
.tst-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--radius-pill); }
.tst {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	padding: var(--s-5);
	background: var(--surface);
	margin: 0;
	flex: 0 0 calc((100% - var(--s-4) * 2) / 3);   /* 3 visible at desktop */
	scroll-snap-align: start;
	min-width: 0;
}
.tst__stars { display: flex; gap: 4px; color: var(--accent); }
.tst__stars i { font-size: 14px; }
.tst__quote {
	font-size: var(--t-lead);
	line-height: 1.55;
	color: var(--ink);
	margin: 0;
	font-weight: var(--w-reg);
}
.tst__quote p { margin-bottom: var(--s-2); }
.tst__quote p:last-child { margin-bottom: 0; }
.tst__author {
	display: flex;
	gap: var(--s-3);
	align-items: center;
	margin-top: auto;
	padding-top: var(--s-3);
	border-top: 1px solid var(--line);
}
.tst__avatar {
	width: 44px; height: 44px;
	border-radius: var(--radius-pill);
	overflow: hidden;
	object-fit: cover;
	flex-shrink: 0;
}
.tst__author > div { display: flex; flex-direction: column; gap: 2px; }
.tst__name { font-weight: var(--w-med); color: var(--ink); }
.tst__role { font-size: var(--t-meta); color: var(--mute); }


/* ─── In-page newsletter band (dark) ─── */
.news-band {
	background: var(--ink);
	padding-block: var(--s-7);
}
.news {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--s-6);
	align-items: center;
}
.news__copy { display: flex; flex-direction: column; gap: var(--s-3); }
.news__eyebrow { color: rgba(255,255,255,.55); }
.news__title {
	font-size: var(--t-h2);
	font-weight: var(--w-light);
	color: var(--bg);
	line-height: var(--lh-tight);
	letter-spacing: -0.02em;
}
.news__body { color: rgba(255,255,255,.7); max-width: 520px; }
.news__form {
	display: flex;
	gap: var(--s-2);
	align-items: stretch;
}
.news__form input[type="email"] {
	flex: 1;
	height: 56px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.18);
	color: var(--bg);
}
.news__form input[type="email"]::placeholder { color: rgba(255,255,255,.45); }
.news__form input[type="email"]:focus { border-color: var(--accent); }
.news__form .btn { height: 56px; flex-shrink: 0; }


/* ─── Fabric swatches (circle row) ─── */
.swatches-section { padding-block: var(--s-7); }
.swatches {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--s-5) var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.swatches__item { list-style: none; }
.swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
	color: var(--ink);
	text-align: center;
}
.swatch:hover { color: var(--ink); opacity: 1; }
.swatch__circle {
	display: block;
	width: 96px; height: 96px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--line);
	transition: transform var(--d-fast) var(--ease);
}
.swatch:hover .swatch__circle { transform: translateY(-3px); }
.swatch__name { font-size: var(--t-body); font-weight: var(--w-med); color: var(--ink); }
.swatch__sub { font-size: var(--t-meta); color: var(--mute); }


/* ─── Wholesale band (dark) ─── */
.ws-band-section { padding-block: var(--s-7); }
.ws-band {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--s-7);
	align-items: center;
}
.ws-band__copy { display: flex; flex-direction: column; gap: var(--s-3); max-width: 560px; }
.ws-band__eyebrow { color: rgba(255,255,255,.55); }
.ws-band__title {
	font-size: var(--t-h2);
	font-weight: var(--w-light);
	color: var(--bg);
	line-height: var(--lh-tight);
	letter-spacing: -0.02em;
}
.ws-band__title em { font-style: italic; color: var(--accent); }
.ws-band__body { color: rgba(255,255,255,.75); }
.ws-band__ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }
.ws-band__btn-ghost {
	background: transparent;
	color: var(--bg);
	border-color: rgba(255,255,255,.45);
}
.ws-band__btn-ghost:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); }

.ws-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-5) var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ws-stat {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-4);
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.08);
	list-style: none;
}
.ws-stat__num {
	font-size: var(--t-h2);
	font-weight: var(--w-light);
	color: var(--bg);
	line-height: 1;
	letter-spacing: -0.02em;
}
.ws-stat__lbl {
	font-size: var(--t-meta);
	color: rgba(255,255,255,.6);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}


/* ─── Section head consistency
   Every section that uses abh_section_head() gets the same eyebrow,
   spacing, and headline scale. The two layouts (centered vs. row) are
   chosen by the partial; we lock typography here so they always match. */
.section-head {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin-bottom: var(--s-6);
	max-width: 720px;
}
.section-head--center {
	margin-inline: auto;
	text-align: center;
	align-items: center;
}
.section-head .eyebrow,
.section-row .eyebrow { color: var(--mute); }
.section-head h1, .section-head .h1,
.section-head h2, .section-head .h2,
.section-row__title {
	font-size: var(--t-h2);
	font-weight: var(--w-light);
	line-height: var(--lh-tight);
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0;
}
.section-head p { color: var(--ink-2); max-width: 640px; line-height: var(--lh-body); }


/* ─── Values grid (numbered list, used on About) ─── */
.values {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--s-5) var(--s-4);
}
.value {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding: var(--s-5);
	background: var(--bg);
	border: 1px solid var(--line);
}
.value__num {
	font-size: var(--t-h3);
	font-weight: var(--w-light);
	color: var(--accent);
	letter-spacing: -0.01em;
	line-height: 1;
}
.value__title {
	font-size: var(--t-h4);
	font-weight: var(--w-med);
	color: var(--ink);
}
.value__desc {
	font-size: var(--t-body);
	color: var(--ink-2);
	line-height: var(--lh-body);
}


/* ─── Team grid ─── */
.team {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--s-5) var(--s-4);
}
.team-mem {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.team-mem__avatar {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--surface);
	margin-bottom: var(--s-3);
}
.team-mem__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.team-mem__name {
	font-size: var(--t-h4);
	font-weight: var(--w-med);
	color: var(--ink);
}
.team-mem__role {
	font-size: var(--t-meta);
	color: var(--mute);
}


/* ─── FAQ accordion ─── */
.faq {
	max-width: 880px;
	margin-inline: auto;
	border-top: 1px solid var(--line);
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-3);
	width: 100%;
	padding: var(--s-4) 0;
	background: transparent;
	border: 0;
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--t-h4);
	font-weight: var(--w-med);
	letter-spacing: -0.005em;
	text-align: left;
	cursor: pointer;
}
.faq__head:hover { color: var(--accent); }
.faq__icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	font-size: 16px;
	color: var(--ink);
	font-weight: var(--w-light);
	transition: transform var(--d-fast) var(--ease);
}
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__body {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--d-slow) var(--ease);
}
.faq__item.is-open .faq__body { max-height: 1000px; }
.faq__body p {
	color: var(--ink-2);
	line-height: var(--lh-body);
	padding: 0 0 var(--s-4);
	margin: 0;
}


/* ─── Contact info + form (2-col page band) ─── */
.contact {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: var(--s-7);
	align-items: start;
}
.contact-info {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.contact-info__list {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.contact-info__item {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
}
.contact-info__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	color: var(--accent);
	background: var(--bg);
}
.contact-info__icon i { font-size: 16px; }
.contact-info__lbl {
	font-size: 11px;
	font-weight: var(--w-med);
	text-transform: uppercase;
	letter-spacing: var(--tr-wide);
	color: var(--mute);
	margin-bottom: 4px;
}
.contact-info__val {
	font-size: var(--t-body);
	color: var(--ink);
	line-height: 1.5;
}

.contact-form { display: flex; flex-direction: column; gap: var(--s-4); }
.contact-form__title {
	font-size: var(--t-h3);
	font-weight: var(--w-light);
	color: var(--ink);
	margin: 0 0 var(--s-3);
	letter-spacing: -0.01em;
}

/* WhatsApp pill button used in contact info */
.btn--whatsapp {
	background: #25D366;
	border-color: #25D366;
	color: #fff;
}
.btn--whatsapp:hover { background: #1ea854; border-color: #1ea854; color: #fff; }


/* ─── Contact Form 7 — adopt our form look ─── */
.wpcf7-form,
.contact-form > form { display: flex; flex-direction: column; gap: var(--s-3); }
.wpcf7-form p { margin: 0; color: var(--ink-2); }
.wpcf7-form label {
	display: block;
	font-size: var(--t-meta);
	font-weight: var(--w-med);
	color: var(--ink);
	letter-spacing: 0.02em;
	margin-bottom: var(--s-2);
}
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
	display: block;
	width: 100%;
	height: 52px;
	padding: 0 var(--s-4);
	font-family: var(--font);
	font-size: var(--t-body);
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.wpcf7-form textarea.wpcf7-form-control {
	height: auto;
	min-height: 140px;
	padding-block: var(--s-3);
	resize: vertical;
}
.wpcf7-form .wpcf7-form-control:focus { outline: none; border-color: var(--ink); }
.wpcf7-form .wpcf7-submit {
	height: 52px;
	padding: 0 var(--s-5);
	background: var(--ink);
	color: var(--bg);
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	font-family: var(--font);
	font-weight: var(--w-med);
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
	align-self: flex-start;
}
.wpcf7-form .wpcf7-submit:hover { background: var(--accent); border-color: var(--accent); }
.wpcf7-form .wpcf7-not-valid-tip { color: var(--danger); font-size: var(--t-meta); margin-top: 4px; }
.wpcf7-form .wpcf7-not-valid { border-color: var(--danger) !important; }
.wpcf7-response-output {
	margin: var(--s-3) 0 0;
	padding: var(--s-3) var(--s-4);
	border: 1px solid var(--line);
	border-left-width: 3px;
	font-size: var(--t-body);
	color: var(--ink);
	background: var(--bg);
}
.wpcf7-form.sent .wpcf7-response-output { border-left-color: var(--accent); }
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output { border-left-color: var(--danger); }


/* ─── Fabric library (Fabric CPT cards) ─── */
.fabric-library {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s-5) var(--s-4);
}
.fabric-card {
	display: flex;
	flex-direction: column;
	background: var(--bg);
	border: 1px solid var(--line);
	overflow: hidden;
	transition: border-color var(--d-fast) var(--ease);
}
.fabric-card:hover { border-color: var(--ink); }
.fabric-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--surface);
}
.fabric-card__media img { width: 100%; height: 100%; object-fit: cover; }
.fabric-card__body {
	padding: var(--s-4);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.fabric__name {
	font-size: var(--t-h4);
	font-weight: var(--w-med);
	color: var(--ink);
}
.fabric__desc {
	font-size: var(--t-body);
	color: var(--ink-2);
	line-height: var(--lh-body);
}
.fabric__desc p { margin: 0; }
.fabric__meta {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding-top: var(--s-3);
	border-top: 1px solid var(--line);
}
.fabric__meta-row {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}
.fabric__meta-lbl {
	flex-shrink: 0;
	width: 100px;
	font-size: var(--t-meta);
	color: var(--mute);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.fabric__bar {
	flex: 1;
	height: 4px;
	background: var(--line);
	position: relative;
	overflow: hidden;
}
.fabric__bar-fill {
	display: block;
	height: 100%;
	width: var(--w, 0%);
	background: var(--accent);
}


/* ─── Single blog post — Journal article layout ─── */
.post-feature {
	margin: 0 0 var(--s-6);
	overflow: hidden;
	background: var(--surface);
}
.post-feature img { width: 100%; height: auto; display: block; }

.post-content {
	font-size: var(--t-lead);
	line-height: 1.7;
	color: var(--ink);
}
.post-content > * + * { margin-top: var(--s-4); }
.post-content p { margin: 0 0 var(--s-4); color: var(--ink-2); }
.post-content p:last-child { margin-bottom: 0; }
.post-content h2 {
	font-size: var(--t-h3);
	font-weight: var(--w-light);
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: var(--s-6) 0 var(--s-3);
}
.post-content h3 {
	font-size: var(--t-h4);
	font-weight: var(--w-med);
	color: var(--ink);
	margin: var(--s-5) 0 var(--s-3);
}
.post-content h4 {
	font-size: var(--t-lead);
	font-weight: var(--w-med);
	color: var(--ink);
	margin: var(--s-4) 0 var(--s-2);
}
.post-content ul,
.post-content ol {
	padding-left: var(--s-4);
	margin: 0 0 var(--s-4);
	color: var(--ink-2);
}
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content ul li,
.post-content ol li {
	list-style: inherit;
	margin-bottom: var(--s-2);
	padding-left: var(--s-2);
}
.post-content blockquote {
	margin: var(--s-5) 0;
	padding: var(--s-4) var(--s-5);
	border-left: 3px solid var(--accent);
	background: var(--surface);
	font-size: var(--t-h4);
	font-weight: var(--w-light);
	color: var(--ink);
	font-style: italic;
	line-height: 1.4;
}
.post-content blockquote p { color: var(--ink); margin: 0; }
.post-content blockquote cite {
	display: block;
	margin-top: var(--s-3);
	font-size: var(--t-meta);
	color: var(--mute);
	font-style: normal;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.post-content img,
.post-content figure {
	max-width: 100%;
	height: auto;
	margin: var(--s-5) 0;
	display: block;
}
.post-content figure { margin: var(--s-5) 0; }
.post-content figcaption {
	margin-top: var(--s-2);
	font-size: var(--t-meta);
	color: var(--mute);
	text-align: center;
	font-style: italic;
}
.post-content a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.post-content a:hover { color: var(--ink); }
.post-content code {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 0.9em;
	background: var(--surface);
	padding: 2px 6px;
	border: 1px solid var(--line);
}
.post-content pre {
	background: var(--ink);
	color: var(--bg);
	padding: var(--s-4);
	overflow-x: auto;
	margin: var(--s-4) 0;
	font-size: var(--t-meta);
}
.post-content pre code { background: transparent; border: 0; padding: 0; color: inherit; }
.post-content hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: var(--s-6) 0;
}

/* Tags row beneath the article */
.post-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
	margin-top: var(--s-6);
	padding-top: var(--s-4);
	border-top: 1px solid var(--line);
}
.post-tags__lbl {
	font-size: var(--t-meta);
	color: var(--mute);
	text-transform: uppercase;
	letter-spacing: var(--tr-wide);
	font-weight: var(--w-med);
	margin-right: var(--s-2);
}
.post-tags__tag {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 var(--s-3);
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--ink);
	font-size: var(--t-meta);
	letter-spacing: 0.02em;
	transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.post-tags__tag:hover { border-color: var(--ink); color: var(--accent); }

/* Author card beneath the article */
.post-author {
	display: flex;
	gap: var(--s-4);
	align-items: center;
	margin-top: var(--s-5);
	padding: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--line);
}
.post-author__avatar {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-pill);
	object-fit: cover;
	flex-shrink: 0;
}
.post-author__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.post-author__lbl {
	font-size: 11px;
	font-weight: var(--w-med);
	text-transform: uppercase;
	letter-spacing: var(--tr-wide);
	color: var(--mute);
}
.post-author__name {
	font-size: var(--t-h4);
	font-weight: var(--w-med);
	color: var(--ink);
	letter-spacing: -0.005em;
}
.post-author__role {
	font-size: var(--t-meta);
	color: var(--ink-2);
	line-height: 1.5;
}


/* ─── Reveal-on-scroll (used by JS) ─── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }


/* ═══════════════════════════════════════════════════════════════
   Search Overlay
   ═══════════════════════════════════════════════════════════════ */

.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(17, 17, 17, 0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 10vh;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.search-overlay.is-open { opacity: 1; visibility: visible; }

.search-overlay__inner {
	width: 92%;
	max-width: 580px;
	background: var(--bg);
	padding: var(--s-6) var(--s-5) var(--s-4);
	position: relative;
	transform: translateY(-16px) scale(0.98);
	transition: transform 0.25s ease;
	box-shadow: 0 24px 64px rgba(0,0,0,0.18);
	border: none;
}
.search-overlay.is-open .search-overlay__inner {
	transform: translateY(0) scale(1);
}

/* Close */
.search-overlay__close {
	position: absolute;
	top: var(--s-3);
	right: var(--s-3);
	width: 32px; height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	font-size: 18px;
	color: var(--mute);
	cursor: pointer;
	transition: color 0.2s ease;
	padding: 0;
}
.search-overlay__close:hover {
	color: var(--ink);
}

/* Search field */
.search-overlay__form { margin: 0; }
.search-overlay__field {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	background: transparent;
	padding: 0;
	border: none;
	border-bottom: 1px solid var(--line);
	padding-bottom: var(--s-3);
	transition: border-color 0.2s ease;
}
.search-overlay__field:focus-within {
	border-bottom-color: var(--ink);
}
.search-overlay__icon {
	font-size: 18px;
	color: var(--mute);
	flex-shrink: 0;
}
.search-overlay__input,
.search-overlay__input:focus,
.search-overlay__input:active {
	flex: 1;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	font-family: var(--font);
	font-size: var(--t-lead);
	font-weight: var(--w-reg);
	color: var(--ink);
	padding: 0 !important;
	margin: 0;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
}
.search-overlay__input::placeholder {
	color: var(--mute);
	font-weight: var(--w-reg);
}
/* Clear button (native webkit) */
.search-overlay__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	width: 16px; height: 16px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A958C' stroke-width='2'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") center/contain no-repeat;
	cursor: pointer;
}

/* Eyebrow label */
.search-overlay__label {
	display: block;
	font-size: 11px;
	font-weight: var(--w-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: var(--s-2);
}

/* Results */
.search-overlay__results {
	margin-top: var(--s-3);
	max-height: 52vh;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
}

.search-results {
	list-style: none;
	margin: 0;
	padding: 0;
}
.search-results__item { }
.search-results__link {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3);
	text-decoration: none;
	color: var(--ink);
	border-bottom: 1px solid var(--line);
	transition: background 0.15s ease;
}
.search-results__item:last-child .search-results__link { border-bottom: 0; }
.search-results__link:hover {
	background: var(--surface);
}
.search-results__thumb {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	background: var(--surface);
	overflow: hidden;
}
.search-results__thumb img,
.search-results__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.search-results__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1;
}
.search-results__title {
	font-size: var(--t-body);
	font-weight: var(--w-med);
	color: var(--ink);
	line-height: 1.3;
}
.search-results__price {
	font-size: var(--t-meta);
	color: var(--ink-2);
}
.search-results__price del {
	color: var(--mute);
	margin-right: var(--s-1);
}
.search-results__price ins {
	background: transparent;
	text-decoration: none;
	color: var(--accent);
	font-weight: var(--w-bold);
}

/* View all */
.search-results__all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	margin-top: var(--s-2);
	padding: var(--s-3);
	font-size: var(--t-meta);
	font-weight: var(--w-med);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	border: 1px solid var(--line);
	transition: all 0.2s ease;
}
.search-results__all:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

/* Empty + loading */
.search-results__empty,
.search-results__loading {
	text-align: center;
	padding: var(--s-5) var(--s-3);
	color: var(--mute);
	font-size: var(--t-body);
}
.search-results__loading::before {
	content: "";
	display: block;
	width: 24px; height: 24px;
	border: 2px solid var(--line);
	border-top-color: var(--accent);
	border-radius: 50%;
	margin: 0 auto var(--s-2);
	animation: abh-spin 0.6s linear infinite;
}
@keyframes abh-spin { to { transform: rotate(360deg); } }

/* Mobile */
@media (max-width: 768px) {
	.search-overlay { padding-top: 0; }
	.search-overlay__inner {
		width: 100%;
		max-width: 100%;
		min-height: 100dvh;
		padding: var(--s-6) var(--s-4) var(--s-4);
		box-shadow: none;
	}
	.search-overlay__input { font-size: var(--t-body); }
}


/* ─── Wishlist heart button on product cards ─── */
.abh-wishlist-btn {
	position: absolute;
	top: var(--s-2);
	right: var(--s-2);
	z-index: 3;
	width: 36px; height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bg);
	border: 1px solid var(--line);
	color: var(--mute);
	font-size: 16px;
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
	line-height: 1;
}
.abh-wishlist-btn:hover {
	color: var(--danger);
	border-color: var(--danger);
}
.abh-wishlist-btn.is-active {
	color: var(--danger);
	border-color: var(--danger);
	background: color-mix(in srgb, var(--danger) 8%, var(--bg));
}
/* Single product wishlist button */
.summary .abh-wishlist-btn {
	position: static;
	width: auto;
	height: 44px;
	gap: var(--s-2);
	padding: 0 var(--s-4);
	font-size: var(--t-meta);
	font-family: var(--font);
	font-weight: var(--w-med);
	letter-spacing: 0.02em;
}
.summary .abh-wishlist-btn i { font-size: 15px; }


/* ───────────────────────────── 404 — Not Found ───────────────────────────── */
.notfound {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - var(--header-h) - var(--ann-h, 0px) - 200px);
	padding: var(--s-7) var(--gutter);
	text-align: center;
}
.notfound__inner {
	max-width: 520px;
	margin: 0 auto;
}
.notfound__illustration {
	margin-bottom: var(--s-5);
}
.notfound__svg {
	width: 160px;
	height: 160px;
	margin: 0 auto;
	display: block;
}
.notfound .eyebrow {
	display: block;
	margin-bottom: var(--s-2);
}
.notfound__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: var(--w-semi);
	line-height: 1.25;
	margin-bottom: var(--s-3);
	color: var(--ink);
}
.notfound__sub {
	font-size: var(--t-body);
	color: var(--ink-2);
	line-height: 1.7;
	margin-bottom: var(--s-5);
}
.notfound__ctas {
	display: flex;
	gap: var(--s-3);
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var(--s-6);
}
.notfound__links {
	border-top: 1px solid var(--line);
	padding-top: var(--s-4);
}
.notfound__links-label {
	font-size: var(--t-meta);
	color: var(--mute);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--s-2);
}
.notfound__nav {
	display: flex;
	gap: var(--s-4);
	justify-content: center;
	flex-wrap: wrap;
}
.notfound__nav a {
	font-size: var(--t-body);
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
	padding-bottom: 2px;
	transition: border-color var(--d-fast) ease, color var(--d-fast) ease;
}
.notfound__nav a:hover {
	color: var(--accent);
	border-color: var(--accent);
}