/*
 * Karuvia — main stylesheet (compiled).
 * Source of truth for tokens is theme.json; this file mirrors them as CSS custom
 * properties and implements every component the PHP templates output, faithful to
 * the prototype (colours, radii, sticky translucent header, editorial rhythm).
 *
 * Authored in /assets/css/src/main.scss; this compiled build is committed so the
 * theme zip works with no build step. Rebuild with `npm run build`.
 */

/* ------------------------------------------------------------------ tokens */
:root {
	/* --- Karuvia Visual Identity v2 (client palette, July 2026) -----------------
	 * Supersedes the PRD 6.1 tokens. Contrast measured on Warm Ivory #F8F5F0:
	 *   Forest #153F35 10.76:1 PASS · Deep Forest #0D3028 13.13:1 PASS
	 *   Warm Charcoal #625F58 5.86:1 PASS (body text)
	 *   Muted Champagne #A88B5C 2.97:1 FAIL for small text -> accents/large display only
	 *   Muted Sage #A8AD98 2.12:1 -> background only, cannot carry white text (2.25:1)
	 */
	--forest: #153F35;
	--forest-soft: #1B4C40;
	--forest-deep: #0D3028;
	--gold: #A88B5C;
	--sage: #A8AD98;
	--sage-light: #D9DCCF;
	--beige: #D9CBB8;
	--cream: #F1ECE4;
	/* Muted Champagne fails WCAG AA on light surfaces (2.97:1 on Warm Ivory). The brand restricts
	   it to hover accents, large display, icons, rules and badges. `--gold-ink` is the same
	   hue darkened to >=4.5:1 on Warm Ivory, for gold-toned SMALL text. */
	--gold-ink: #7C6435;
	/* Champagne readable on the dark forest surfaces (footer, top bar): the brand hue lifted
	   20% toward Warm White. 4.75:1 on Forest, 5.79:1 on Deep Forest. `--gold-ink` is its
	   mirror image for light grounds and must never be used on a dark one — it lands at
	   2.08:1 there, which is how the footer hover state failed. */
	--gold-on-dark: #B9A27B;
	--ivory: #F8F5F0;
	--sand: #F1ECE4;
	--stone: #D9CBB8;
	--charcoal: #625F58;
	--charcoal-strong: #153F35;
	/* Secondary text. The brand's Muted Taupe (#8C8578) is only 3.36:1 on Warm Ivory,
	   below WCAG AA for the small print it carries, so it is darkened here to 4.92:1. */
	--taupe: #716A5D;
	--white: #FDFCF9;
	--terracotta: #C46A4E;

	--r-card: 16px;
	--r-panel: 20px;
	--r-pill: 999px;
	--shadow-soft: 0 20px 50px -20px rgba(21, 63, 53, .35);
	--shadow-lift: 0 24px 60px -30px rgba(21, 63, 53, .5);

	--max: 1400px;
	--gutter: clamp(16px, 3vw, 40px);

	--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: "SF Mono", ui-monospace, "Cascadia Mono", monospace;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--charcoal);
	background: var(--ivory);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; color: var(--forest); margin: 0 0 .4em; text-wrap: balance; }
a { color: var(--forest); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gold-ink); }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--stone); color: var(--forest); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; z-index: 999; }
.skip-link:focus { left: 12px; top: 12px; background: var(--forest); color: var(--white); padding: 10px 16px; border-radius: var(--r-pill); }

/* ------------------------------------------------------------------ layout */
.wrap {
	max-width: var(--max);
	margin-inline: auto;
	padding: clamp(24px, 4vw, 44px) var(--gutter) clamp(48px, 7vw, 96px);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 4vw, 48px);
}
.wrap:has(.sidebar) { grid-template-columns: minmax(0, 1fr) 300px; }
.wrap--single, .wrap--commerce { display: block; }
.site-main--center { min-height: 52vh; display: grid; place-items: center; }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin: 0 0 clamp(18px, 3vw, 28px); }
.section-head__title { font-size: clamp(24px, 3vw, 34px); margin: 0; }
.section-head__note, .section-head__link { font-size: 13px; color: var(--taupe); }
.section-head__link { margin-left: auto; }

/* ------------------------------------------------------------------ buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--font-body); font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
	padding: 13px 26px; border-radius: var(--r-pill); border: 1px solid transparent;
	cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn--primary { background: var(--forest); color: var(--white); }
.btn--primary:hover { background: var(--forest-soft); color: var(--white); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--forest); border-color: var(--stone); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-ink); }

/* ------------------------------------------------------------------ top bar */
.topbar { background: var(--forest); color: var(--sand); }
.topbar__inner {
	max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
	height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.topbar__ticker { display: flex; align-items: center; gap: 18px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; white-space: nowrap; overflow: hidden; }
.topbar__sep { opacity: .4; }
.topbar__aside { display: flex; align-items: center; gap: 4px; }
.topbar__vendor { color: var(--sand); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 8px 10px; }
.topbar__vendor:hover { color: var(--gold-on-dark); }

/* language switcher */
.lang-switch { position: relative; }
.lang-switch__toggle {
	display: flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--sand);
	font-family: inherit; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; padding: 8px 10px;
}
.lang-switch__toggle:hover { color: var(--gold-on-dark); }
.lang-switch__toggle svg { width: 13px; height: 13px; }
.lang-switch__menu {
	position: absolute; right: 0; top: 100%; z-index: 90; width: 232px; padding: 10px;
	background: var(--white); border: 1px solid var(--stone); border-radius: var(--r-card); box-shadow: var(--shadow-soft);
}
.lang-switch__menu[hidden] { display: none; }
.lang-switch__heading { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); padding: 6px 10px 8px; }
.lang-switch__item { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: 10px; font-size: 13px; color: var(--charcoal); }
.lang-switch__item:hover { background: var(--sand); color: var(--charcoal); }
.lang-switch__item.is-active { background: var(--sand); }
.lang-switch__code { font-size: 10px; letter-spacing: .12em; color: var(--taupe); }

/* currency switcher (renders only when a second currency is configured) */
.currency-switch { display: flex; align-items: center; gap: 4px; padding-left: 6px; margin-left: 2px; border-left: 1px solid rgba(217, 203, 184, .32); }
.currency-switch__item {
	color: var(--sand);
	font-size: 10.5px;
	letter-spacing: .1em;
	padding: 6px 9px;
	border-radius: var(--r-pill);
	border: 1px solid transparent;
}
.currency-switch__item:hover { color: var(--gold-on-dark); border-color: rgba(217, 203, 184, .32); }
.currency-switch__item.is-active { background: var(--ivory); color: var(--forest); }

/* ------------------------------------------------------------------ header */
.site-header {
	position: sticky; top: 0; z-index: 80;
	background: rgba(248, 245, 240, .93);
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid var(--stone);
}
.site-header__inner {
	max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
	height: clamp(64px, 8vw, 82px); display: flex; align-items: center; gap: clamp(12px, 2.4vw, 34px);
}
.site-header__burger { display: none; background: none; border: 0; padding: 8px; margin-left: -8px; cursor: pointer; color: var(--forest); }
.site-header__spacer { flex: 1; }

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* The wrapper must not compress either. It defaulted to flex-shrink:1, so it squeezed to
   162px while its content needs ~193px; .brand then overflowed its own box by 38px and the
   wordmark printed on top of the first nav link. The header's 34px gap was being measured
   from the compressed box, which is why the spacing looked correct in CSS but not on screen. */
.site-header__brand { flex-shrink: 0; min-width: max-content; }
.brand__mark { height: clamp(34px, 4.4vw, 44px); width: auto; }
.brand__word { line-height: 1; }
.brand__name { display: block; font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 24px); letter-spacing: .2em; color: var(--forest); font-weight: 500; }
.brand__care { display: block; font-size: 8.5px; letter-spacing: .34em; color: var(--gold-ink); margin-top: 3px; padding-left: .2em; }
.custom-logo-link { display: inline-flex; }
.custom-logo { height: clamp(40px, 5vw, 56px); width: auto; }

/* primary nav */
.site-header__nav .nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); list-style: none; margin: 0; padding: 0; }
.nav-link { font-size: 13.5px; letter-spacing: .03em; color: var(--charcoal); padding: 6px 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.nav-link:hover { color: var(--gold-ink); border-bottom-color: var(--gold); }
.nav-item.is-current > .nav-link { color: var(--forest); border-bottom-color: var(--gold); }
.nav-item { position: relative; }
.nav-submenu { position: absolute; left: 0; top: 100%; min-width: 220px; list-style: none; margin: 0; padding: 10px; background: var(--white); border: 1px solid var(--stone); border-radius: var(--r-card); box-shadow: var(--shadow-soft); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s ease; }
.nav-item--has-children:hover .nav-submenu { opacity: 1; visibility: visible; transform: none; }
.nav-sublink { display: block; padding: 8px 12px; border-radius: 10px; font-size: 13px; color: var(--charcoal); }
.nav-sublink:hover { background: var(--sand); }

/* inline search */
.site-header .search-form {
	display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--stone);
	border-radius: var(--r-pill); padding: 0 14px; height: 42px; width: clamp(180px, 22vw, 300px);
}
.site-header .search-form svg { width: 15px; height: 15px; color: var(--taupe); flex-shrink: 0; }
.search-form__field { border: 0; outline: none; background: none; font-family: inherit; font-size: 13px; color: var(--charcoal); width: 100%; }

/* header actions */
.site-header__actions { display: flex; align-items: center; gap: 2px; }
.header-action { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px; color: var(--forest); background: none; border: 0; cursor: pointer; font-family: inherit; }
.header-action:hover { color: var(--gold-ink); }
.header-action svg { width: 19px; height: 19px; }
.header-action--search-icon { display: none; }
.header-action__count { position: absolute; top: 3px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: var(--r-pill); background: var(--forest); color: var(--white); font-size: 9.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.header-action__count--gold { background: var(--gold); }
.header-action__count.is-empty { display: none; }
.header-account__name { font-size: 13px; letter-spacing: .02em; }

.header-account { position: relative; }
.header-account__menu { position: absolute; right: 0; top: 100%; z-index: 90; width: 258px; padding: 8px; background: var(--white); border: 1px solid var(--stone); border-radius: var(--r-card); box-shadow: var(--shadow-soft); }
.header-account__menu[hidden] { display: none; }
.header-account__head { padding: 10px 12px 12px; }
.header-account__title { font-family: var(--font-display); font-size: 19px; color: var(--forest); }
.header-account__sub { font-size: 12px; line-height: 1.45; color: var(--taupe); margin-top: 2px; }
.header-account__item { display: block; padding: 9px 12px; border-radius: 10px; font-size: 13px; color: var(--charcoal); }
.header-account__item:hover { background: var(--sand); }
.header-account__logout { color: var(--taupe); border-top: 1px solid var(--stone); margin-top: 4px; }

/* ------------------------------------------------------------------ drawer */
.drawer { position: fixed; inset: 0; z-index: 200; }
.drawer[hidden] { display: none; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(21, 63, 53, .34); }
.drawer__panel { position: absolute; inset: 0 auto 0 0; width: min(340px, 86vw); background: var(--ivory); box-shadow: 24px 0 60px -30px rgba(21, 63, 53, .5); padding: 22px; overflow-y: auto; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.drawer__close { background: none; border: 0; padding: 6px; cursor: pointer; color: var(--forest); }
/* `.nav` is included because the menu fallback (no menu assigned yet) prints ul.nav,
   which would otherwise render as an unstyled bulleted list inside the drawer. */
.drawer__nav, .drawer .nav { list-style: none; margin: 0; padding: 0; display: block; }
.drawer__nav li, .drawer .nav li { display: block; }
.drawer__nav a, .drawer .nav a,
.drawer__nav .nav-link, .drawer .nav .nav-link {
	display: block;
	font-family: var(--font-display);
	font-size: 26px;
	line-height: 1.25;
	color: var(--forest);
	padding: 11px 0;
	border-bottom: 1px solid var(--stone);
	white-space: normal;
}

/* ------------------------------------------------------------------ hero */
.hero { max-width: var(--max); margin-inline: auto; padding: clamp(24px, 4vw, 56px) var(--gutter); }
.hero__inner { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(24px, 5vw, 64px); }
.hero__eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 14px; }
.hero__title { font-size: clamp(34px, 6vw, 60px); margin: 0 0 18px; }
.hero__text { font-size: 16px; line-height: 1.75; color: var(--charcoal); max-width: 46ch; margin: 0 0 26px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__media { margin: 0; border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 5 / 4; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ category grid */
.cat-grid { max-width: var(--max); margin-inline: auto; padding: clamp(24px, 4vw, 48px) var(--gutter); }
.cat-grid__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.cat-tile { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--stone); border-radius: var(--r-card); overflow: hidden; transition: border-color .2s ease, transform .2s ease; }
.cat-tile:hover { border-color: var(--gold); transform: translateY(-2px); }
.cat-tile__media { aspect-ratio: 4 / 3; background: var(--sand) center/cover no-repeat; }
.cat-tile__label { padding: 14px 16px; }
.cat-tile__name { display: block; font-family: var(--font-display); font-size: 19px; color: var(--forest); }
.cat-tile__count { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--taupe); margin-top: 3px; }

/* ------------------------------------------------------------------ products / selected */
.selected, .services-strip, .journal-teaser { max-width: var(--max); margin-inline: auto; padding: clamp(24px, 4vw, 48px) var(--gutter); }
ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
ul.products.columns-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.selected__more, .services-strip__more { text-align: center; margin-top: 28px; }

/* product card (loop content-product.php) */
li.product { position: relative; }
.product-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--stone); border-radius: var(--r-card); overflow: hidden; transition: border-color .2s ease, transform .2s ease; height: 100%; }
.product-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.product-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card__vendor { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--taupe); }
.product-card__title { font-family: var(--font-display); font-size: 19px; color: var(--forest); margin: 0; }
.product-card__price { font-size: 15px; color: var(--charcoal); margin-top: auto; }
.product-card__price del { color: var(--taupe); margin-right: 6px; }
.product-card__oos { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(248,246,242,.72); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--forest); }

/* badges */
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid var(--stone); background: var(--white); color: var(--forest); }
.badge--gold { background: var(--gold); border-color: var(--gold); color: var(--white); }
.badge--green { background: var(--forest); border-color: var(--forest); color: var(--white); }
.badge--stone { background: var(--sand); }

/* rating stars */
.rating { display: inline-flex; align-items: center; gap: 3px; color: var(--gold); }
.rating svg { width: 14px; height: 14px; }
.rating__count { font-size: 12px; color: var(--taupe); margin-left: 4px; }

/* vat note */
.vat-note { font-size: 12px; color: var(--taupe); margin: 6px 0 0; }

/* ------------------------------------------------------------------ services strip */
.services-strip__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.service-card { background: var(--white); border: 1px solid var(--stone); border-radius: var(--r-card); overflow: hidden; }
.service-card__media { aspect-ratio: 3 / 2; background: var(--sand) center/cover no-repeat; }
.service-card__body { padding: 18px 20px 22px; }
.service-card__title { font-size: 22px; margin: 0 0 8px; }
.service-card__text { font-size: 13.5px; line-height: 1.7; color: var(--charcoal); margin: 0; }

/* ------------------------------------------------------------------ story teaser */
.story-teaser { background: var(--sand); }
.story-teaser__inner { max-width: var(--max); margin-inline: auto; padding: clamp(32px, 5vw, 72px) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 5vw, 64px); }
.story-teaser__media { margin: 0; border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--shadow-soft); }
.story-teaser__title { font-size: clamp(26px, 3.4vw, 40px); }
.story-teaser__text { font-size: 15.5px; line-height: 1.8; color: var(--charcoal); max-width: 44ch; margin: 0 0 22px; }

/* ------------------------------------------------------------------ journal / posts */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.post-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.entry-card { background: var(--white); border: 1px solid var(--stone); border-radius: var(--r-card); overflow: hidden; transition: border-color .2s ease, transform .2s ease; }
.entry-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.entry-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.entry-card__media { margin: 0; aspect-ratio: 10 / 7; overflow: hidden; background: var(--sand); }
.entry-card__media img { width: 100%; height: 100%; object-fit: cover; }
.entry-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.entry-card__cat { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.entry-card__title { font-size: 22px; margin: 0; }
.entry-card__excerpt { font-size: 13.5px; line-height: 1.7; color: var(--charcoal); margin: 0; }
.entry-card__meta { font-size: 12px; color: var(--taupe); }

/* ------------------------------------------------------------------ single / page */
.page-head { margin-bottom: clamp(20px, 3vw, 34px); }
.page-head__title { font-size: clamp(30px, 4.4vw, 52px); }
.page-head__desc { color: var(--charcoal); }
.entry--single, .page-article { max-width: 760px; margin-inline: auto; }
/* Full-width template opts out of the editorial measure. */
.page-article--wide { max-width: var(--max); }
.entry__cats a, .entry-card__cat { color: var(--gold-ink); }
.entry__title { font-size: clamp(30px, 4.4vw, 52px); margin: 8px 0; }
.entry__meta { font-size: 13px; color: var(--taupe); display: flex; gap: 8px; }
.entry__media, .page-article__media { margin: 24px 0; border-radius: var(--r-panel); overflow: hidden; }
.entry-content { font-size: 16px; line-height: 1.85; }
.entry-content > * + * { margin-top: 1.2em; }
.entry-content h2 { font-size: 30px; margin-top: 1.6em; }
.entry-content h3 { font-size: 23px; margin-top: 1.4em; }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.entry-content blockquote { border-left: 2px solid var(--gold); margin: 1.6em 0; padding-left: 22px; font-family: var(--font-display); font-size: 22px; color: var(--forest); }

/* ------------------------------------------------------------------ our story (editorial) */
.site-main--story { padding-bottom: clamp(40px, 6vw, 80px); }
.story__head { background: var(--sand); padding: clamp(36px, 6vw, 84px) var(--gutter) clamp(30px, 5vw, 64px); }
.story__head-inner { max-width: 720px; margin-inline: auto; text-align: center; }
.story__eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 18px; }
.story__title { font-size: clamp(34px, 6vw, 62px); line-height: 1.04; margin: 0; }
.story__standfirst { font-size: 17px; line-height: 1.8; color: var(--charcoal); margin: 20px 0 0; }
.story__hero { margin: 0 auto; max-width: var(--max); padding: 0 var(--gutter); }
.story__hero img { width: 100%; border-radius: var(--r-panel); margin-top: clamp(-28px, -3vw, -20px); box-shadow: var(--shadow-soft); }
.story__hero-caption { font-size: 12px; color: var(--taupe); text-align: center; margin-top: 10px; }
.story__body { max-width: 680px; margin: clamp(32px, 5vw, 60px) auto 0; padding: 0 var(--gutter); font-size: 17px; line-height: 1.9; }
.story__body > * + * { margin-top: 1.25em; }
.story__body h2 { font-size: clamp(24px, 3.2vw, 34px); margin-top: 1.8em; }
.story__lede { font-size: 20px; line-height: 1.75; color: var(--charcoal); }
.story__lede::first-letter { font-family: var(--font-display); font-size: 3.4em; line-height: .82; float: left; padding: .06em .12em 0 0; color: var(--forest); }
.story__pull { font-family: var(--font-display); font-size: 22px; color: var(--taupe); text-align: center; }
.story__quote { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); line-height: 1.3; color: var(--forest); text-align: center; margin-block: 1.6em; }
.story__foot { max-width: 680px; margin: clamp(36px, 5vw, 64px) auto 0; padding: 0 var(--gutter); text-align: center; }
.story__rule { display: block; width: 120px; height: 1px; background: var(--gold); margin: 0 auto 22px; }
.story__welcome { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); color: var(--terracotta); margin: 0 0 28px; }
.story__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.is-style-karuvia-gold { border: 0; border-top: 1px solid var(--gold); max-width: 120px; margin-inline: auto; opacity: 1; }

/* ------------------------------------------------------------------ breadcrumbs / pagination */
.breadcrumbs { font-size: 12px; color: var(--taupe); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumbs a { color: var(--taupe); }
.breadcrumbs a:hover { color: var(--gold-ink); }
.breadcrumbs__sep { color: var(--stone); }
.pagination { margin-top: clamp(28px, 4vw, 48px); }
.pagination__list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--stone); font-size: 13px; }
.pagination .current { background: var(--forest); color: var(--white); border-color: var(--forest); }
.pagination a:hover { border-color: var(--gold); color: var(--gold); }

/* ------------------------------------------------------------------ sidebar / widgets */
.sidebar .widget { background: var(--white); border: 1px solid var(--stone); border-radius: var(--r-card); padding: 20px; margin-bottom: 18px; }
.widget__title { font-size: 20px; margin: 0 0 12px; }

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--forest); color: var(--sand); margin-top: clamp(40px, 6vw, 80px); }
.site-footer a { color: var(--sand); }
.site-footer a:hover { color: var(--gold-on-dark); }
/* Three explicit areas: brand, link columns, newsletter. The newsletter used to be a fifth
   child of .site-footer__cols, so on a four-column grid it wrapped onto its own row and left
   a tall empty void beside the brand. It is now a sibling with its own column. */
.site-footer__inner {
	max-width: var(--max); margin-inline: auto;
	padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(28px, 4vw, 44px);
	display: grid;
	grid-template-columns: minmax(220px, 1fr) minmax(0, 1.5fr) minmax(240px, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}
.site-footer__brand .brand__name { color: var(--ivory); }
.site-footer__tagline {
	font-family: var(--font-display); font-size: 22px; color: var(--ivory); margin: 18px 0;
	max-width: 24ch;
	/* 22ch dropped "best." onto a line of its own. `balance` evens the lines instead of
	   filling the first one, so the tagline never leaves a single-word orphan. */
	text-wrap: balance;
}
.site-footer__social { display: flex; gap: 12px; }
.site-footer__social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(217, 203, 184, .34); border-radius: var(--r-pill); }
.site-footer__social a:hover { border-color: var(--gold); }
.site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(24px, 3vw, 40px); }
.site-footer__newsletter { min-width: 0; }
.footer-col__title { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-on-dark); margin: 0 0 16px; }
.footer-col__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col__list a { font-size: 13.5px; }
.footer-newsletter__copy { font-size: 13.5px; line-height: 1.7; color: rgba(241, 236, 228, .78); margin: 0 0 14px; }
.footer-newsletter__row { display: flex; gap: 8px; }
.footer-newsletter__row input { flex: 1; min-width: 0; height: 44px; border-radius: var(--r-pill); border: 1px solid rgba(217, 203, 184, .34); background: rgba(248, 246, 242, .08); color: var(--ivory); padding: 0 16px; font-family: inherit; font-size: 13px; }
.footer-newsletter__row input::placeholder { color: rgba(241, 236, 228, .55); }
.footer-newsletter__consent { font-size: 11px; color: rgba(241, 236, 228, .55); margin: 10px 0 0; }
.site-footer__base { border-top: 1px solid rgba(217, 203, 184, .24); }
.site-footer__base-inner { max-width: var(--max); margin-inline: auto; padding: 20px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; }
.site-footer__copy { font-size: 12px; color: rgba(241, 236, 228, .65); margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; font-size: 12px; }
.site-footer__pay { display: flex; gap: 6px; }
.pay-badge { height: 24px; width: auto; }

/* ------------------------------------------------------------------ back to top / misc */
.back-to-top { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 46px; height: 46px; border-radius: var(--r-pill); border: 1px solid var(--stone); background: var(--white); color: var(--forest); cursor: pointer; box-shadow: var(--shadow-soft); display: grid; place-items: center; opacity: 0; transform: translateY(8px); transition: .2s ease; }
.back-to-top.is-visible { opacity: 1; transform: none; }
.back-to-top[hidden] { display: none; }

.no-results { text-align: center; padding: clamp(40px, 8vw, 96px) 20px; }
.no-results__title { font-size: 30px; }
.no-results__text { color: var(--charcoal); }
.error-404 { text-align: center; max-width: 560px; }
.error-404__eyebrow { font-family: var(--font-display); font-size: 64px; color: var(--gold); margin: 0; }
.error-404__title { font-size: clamp(28px, 4vw, 42px); }
.error-404__text { color: var(--charcoal); }
.error-404__actions { display: flex; gap: 12px; justify-content: center; margin-top: 22px; }
.error-404__search, .no-results__search { max-width: 380px; margin: 20px auto 0; }

/* ------------------------------------------------------------------ WordPress core content
 * Required by the Theme Handbook: core markup an editor can produce must be styled.
 */
.alignleft { float: left; margin: .3em 1.6em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.6em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { max-width: min(1200px, 92vw); margin-inline: auto; }
.alignfull { max-width: none; width: 100%; }
.entry-content .alignfull { margin-inline: calc(50% - 50vw); width: 100vw; max-width: 100vw; }

.wp-caption { max-width: 100%; margin-bottom: 1.6em; }
.wp-caption img { border-radius: var(--r-card); }
.wp-caption-text, .wp-block-image figcaption, figcaption {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--taupe);
	text-align: center;
	margin-top: 8px;
}
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 1.6em; }
.gallery-item { margin: 0; }
.gallery-item img { border-radius: 12px; width: 100%; }
.gallery-caption { font-size: 12px; color: var(--taupe); }

.sticky { position: relative; }
.sticky .entry-card__title::before { content: "★ "; color: var(--gold); }
.bypostauthor > .comment-body { border-left: 2px solid var(--gold); padding-left: 14px; }
.screen-reader-text:focus {
	clip: auto; height: auto; width: auto; position: static !important;
	background: var(--forest); color: #fff; padding: 10px 16px; border-radius: var(--r-pill);
}
.wp-block-quote, blockquote.wp-block-quote { border-left: 2px solid var(--gold); padding-left: 22px; }
.wp-block-button__link { border-radius: var(--r-pill); }
.is-style-karuvia-ghost .wp-block-button__link { background: transparent; color: var(--forest); border: 1px solid var(--stone); }
.is-style-karuvia-card { background: var(--sand); border-radius: var(--r-card); padding: 24px; }
.is-style-karuvia-panel { background: var(--ivory); border: 1px solid var(--stone); border-radius: var(--r-panel); padding: 24px; }
.is-style-karuvia-rounded img { border-radius: var(--r-panel); }
.page-links { margin-top: 1.4em; font-size: 13px; }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table td, .wp-block-table th { border: 1px solid var(--stone); padding: 10px 12px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
	.site-header .search-form { display: none; }
	.header-action--search-icon { display: inline-flex; }
}
@media (max-width: 1000px) {
	.site-header__nav { display: none; }
	.site-header__burger { display: inline-flex; }
	.hero__inner, .story-teaser__inner { grid-template-columns: 1fr; }
	.hero__media { order: -1; }
	.wrap:has(.sidebar) { grid-template-columns: 1fr; }
	.site-footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.topbar__sep, .topbar__returns { display: none; }
	.brand__word { display: none; }
	.header-account__name { display: none; }
	.error-404__actions, .hero__actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}

/* --- grid clearfix guard -------------------------------------------------------------
 * WooCommerce and Dokan both put a clearfix (`content:" "; display:table`) on their list
 * containers. Once those containers are display:grid the pseudo-elements become grid
 * ITEMS: ::before claims the first cell and pushes every card one column to the right,
 * leaving an empty gap down the left of the page. Grid clears its own floats, so these
 * are pure legacy. Neutralised here rather than only in woocommerce.css because that file
 * is conditionally enqueued, and the containers appear on plain pages too.
 * ------------------------------------------------------------------------------------ */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.dokan-seller-wrap::before,
.dokan-seller-wrap::after,
.seller-listing-content .dokan-seller-wrap::before,
.seller-listing-content .dokan-seller-wrap::after,
/* WooCommerce puts the same clearfix on its two-column wrappers. On My Account that made
   ::before claim cell 1, so Login rendered in the RIGHT column and Register wrapped onto a
   second row — the login box appeared squeezed against the right edge with empty space
   beside it. Any container we convert to grid needs its clearfix neutralised. */
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after,
.u-columns::before,
.u-columns::after,
.woocommerce-account .u-columns::before,
.woocommerce-account .u-columns::after {
	content: none;
	display: none;
}

/* ------------------------------------------------------------------ footer sub-menus
 * Services and Support are rendered in the footer with their children (footer.php uses
 * depth 0). Nested lists need indenting and a lighter weight so the hierarchy reads.
 * ---------------------------------------------------------------------------------- */
.footer-col__list .sub-menu {
	list-style: none;
	margin: 8px 0 4px;
	padding: 0 0 0 14px;
	display: grid;
	gap: 8px;
	border-left: 1px solid rgba(217, 203, 184, .28);
}
.footer-col__list .sub-menu a { font-size: 12.5px; opacity: .85; }
.footer-col__list .sub-menu a:hover { opacity: 1; }
.footer-col__list > li > a { font-weight: 500; }

/* footer: stack sensibly before the columns get cramped */
@media (max-width: 1100px) {
	.site-footer__inner { grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr); }
	.site-footer__newsletter { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
	.site-footer__inner { grid-template-columns: 1fr; }
	.site-footer__cols { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}