/* ==========================================================================
   BabyKidWorld — "Moonlit nursery" design system
   1. Tokens          5. Header & nav       9.  Article
   2. Reset & base    6. Cards & chips      10. Shop & product
   3. Typography      7. Homepage           11. Pages, 404, footer
   4. Layout & UI     8. Listings           12. Motion & utilities
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
	--paper: #fbf7f1;
	--paper-2: #f4ece0;
	--surface: #ffffff;
	--ink: #1e2440;
	--ink-soft: #4a5068;
	--muted: #6f7488;
	--line: #e8dfd2;
	--line-soft: #f0e8dc;
	--clay: #d9734e;
	--clay-ink: #ad4b28;
	--butter: #f3d27e;

	--sky: #dbe6f5;   --sky-mid: #a9c1e6;   --sky-ink: #34508a;
	--blush: #f8ddd3; --blush-mid: #efb59f; --blush-ink: #a2462a;
	--sage: #dbe8d5;  --sage-mid: #a7c59c;  --sage-ink: #365f43;
	--buttr: #f8e8bc; --buttr-mid: #eccb73; --buttr-ink: #765407;

	--brand-mark-bg: var(--ink);
	--brand-mark-fg: #fbf7f1;
	--brand-mark-star: var(--butter);

	--serif: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
	--sans: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
	--step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--step-1: clamp(1.15rem, 1.08rem + 0.3vw, 1.3rem);
	--step-2: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);
	--step-3: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
	--step-4: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
	--step-5: clamp(2.6rem, 1.7rem + 4vw, 5.25rem);

	--r-xs: 8px;
	--r-sm: 12px;
	--r: 20px;
	--r-lg: 28px;
	--r-xl: 44px;
	--r-pill: 999px;

	--shadow-sm: 0 1px 2px rgb(30 36 64 / 6%), 0 2px 10px rgb(30 36 64 / 5%);
	--shadow: 0 2px 6px rgb(30 36 64 / 5%), 0 14px 34px -14px rgb(30 36 64 / 22%);
	--shadow-lg: 0 4px 10px rgb(30 36 64 / 6%), 0 34px 70px -24px rgb(30 36 64 / 32%);

	--container: 1240px;
	--gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
	--section: clamp(4rem, 2.8rem + 5vw, 7.5rem);
	--header-h: 76px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);

	color-scheme: light;
}

/* Night-feed mode: warm, low-glare palette for late-night reading. */
.is-night {
	--paper: #131a2d;
	--paper-2: #19213a;
	--surface: #1d2541;
	--ink: #f1ece2;
	--ink-soft: #c9c5bd;
	--muted: #a2a4b2;
	--line: #2d3657;
	--line-soft: #252e4c;
	--clay: #ee9474;
	--clay-ink: #f4a98c;
	--butter: #f0d38b;

	--sky: #223152;   --sky-mid: #3d5688;   --sky-ink: #bcd0f3;
	--blush: #3a2930; --blush-mid: #7a4a3e; --blush-ink: #f4bba7;
	--sage: #20352c;  --sage-mid: #3f6650;  --sage-ink: #b7d6ab;
	--buttr: #383021; --buttr-mid: #6d5a2b; --buttr-ink: #f2d892;

	--brand-mark-bg: #f1ece2;
	--brand-mark-fg: #131a2d;

	--shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
	--shadow: 0 16px 34px -16px rgb(0 0 0 / 55%);
	--shadow-lg: 0 34px 70px -24px rgb(0 0 0 / 65%);
	color-scheme: dark;
}

.tone-sky    { --tone: var(--sky);   --tone-mid: var(--sky-mid);   --tone-ink: var(--sky-ink); }
.tone-blush  { --tone: var(--blush); --tone-mid: var(--blush-mid); --tone-ink: var(--blush-ink); }
.tone-sage   { --tone: var(--sage);  --tone-mid: var(--sage-mid);  --tone-ink: var(--sage-ink); }
.tone-butter { --tone: var(--buttr); --tone-mid: var(--buttr-mid); --tone-ink: var(--buttr-ink); }

/* 2. Reset & base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--step-0);
	line-height: 1.65;
	font-weight: 450;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
	transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
img { border-radius: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--clay); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--butter); color: #1e2440; }
.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: 1rem; top: -100px; z-index: 1000;
	background: var(--ink); color: var(--paper); padding: 0.75rem 1.1rem; border-radius: var(--r-sm);
	font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.site-main:focus { outline: none; }

/* 3. Typography ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--ink);
	text-wrap: balance;
}
h1 em, h2 em, h3 em, .accent em { font-style: italic; color: var(--clay); }
p { margin: 0 0 1em; text-wrap: pretty; }
.kicker {
	margin: 0 0 0.6rem;
	font-family: var(--sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.section-title { font-size: var(--step-4); margin: 0; }

/* 4. Layout & UI primitives ----------------------------------------------- */
.container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}
.container--mid { width: min(100% - 2 * var(--gutter), 860px); }
.container--wide { width: min(100% - 2 * var(--gutter), 1320px); }
.section { padding-block: var(--section); position: relative; }
.section--flush { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section--tint { background: var(--tone, var(--paper-2)); }
.section-head {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
	margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.section-head .kicker { margin-bottom: 0.75rem; }

.btn {
	--btn-bg: var(--surface);
	--btn-fg: var(--ink);
	display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
	min-height: 52px; padding: 0.85rem 1.5rem;
	border: 1.5px solid transparent; border-radius: var(--r-pill);
	background: var(--btn-bg); color: var(--btn-fg);
	font-family: var(--sans); font-weight: 700; font-size: 0.98rem; line-height: 1.1;
	text-decoration: none; white-space: nowrap;
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.25s, color 0.25s, border-color 0.25s;
}
.btn .icon { width: 1.15em; height: 1.15em; transition: transform 0.35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:hover .icon-arrow, .btn:hover .icon-external { transform: translateX(3px); }
.btn:active { transform: translateY(0); }
.btn--primary { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn--primary:hover { --btn-bg: var(--clay-ink); --btn-fg: #fff; }
.is-night .btn--primary:hover { --btn-fg: #131a2d; }
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn--ghost { --btn-bg: transparent; border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); --btn-bg: var(--surface); }
.btn--buy {
	--btn-bg: var(--clay-ink); --btn-fg: #fff;
	box-shadow: 0 10px 24px -12px rgb(173 75 40 / 60%);
}
.btn--buy:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.is-night .btn--buy { --btn-bg: var(--clay); --btn-fg: #141a2d; }
.btn--small { min-height: 42px; padding: 0.6rem 1.05rem; font-size: 0.88rem; }
.btn--large { min-height: 62px; font-size: 1.05rem; padding-inline: 2rem; }
.btn--block { width: 100%; }

.icon-btn {
	display: inline-grid; place-items: center;
	width: 44px; height: 44px; padding: 0;
	border: 1.5px solid transparent; border-radius: 50%;
	background: transparent; color: var(--ink);
	transition: background-color 0.25s, border-color 0.25s, transform 0.3s var(--ease);
}
.icon-btn:hover { background: var(--surface); border-color: var(--line); }
.icon-btn .icon { width: 22px; height: 22px; }

.pill {
	display: inline-flex; align-items: center; gap: 0.5rem;
	margin: 0 0 1.5rem; padding: 0.45rem 0.95rem 0.45rem 0.7rem;
	border: 1px solid var(--line); border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--surface) 70%, transparent);
	font-size: 0.85rem; font-weight: 650; color: var(--ink-soft);
	backdrop-filter: blur(6px);
}
.pill .icon { color: var(--clay); width: 1.1em; height: 1.1em; }

.link-arrow {
	display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
	font-weight: 700; font-size: 0.95rem; text-decoration: none;
	padding-bottom: 2px; border-bottom: 1.5px solid currentColor;
}
.link-arrow .icon { width: 1.1em; transition: transform 0.35s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

.glass {
	background: color-mix(in srgb, var(--surface) 78%, transparent);
	border: 1px solid color-mix(in srgb, var(--surface) 60%, transparent);
	box-shadow: var(--shadow);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.blob {
	position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.75; pointer-events: none;
}

/* Breadcrumbs */
.breadcrumbs {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
	margin-bottom: 1.5rem; font-size: 0.86rem; font-weight: 600; color: var(--muted);
}
.breadcrumbs a { text-decoration: none; color: var(--ink-soft); }
.breadcrumbs a:hover { color: var(--clay-ink); text-decoration: underline; }
.breadcrumbs .breadcrumb_last { color: var(--muted); font-weight: 500; }
.breadcrumbs > span > span { display: inline; }

/* Forms */
input[type="email"], input[type="search"], input[type="text"], input[type="url"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], textarea, select {
	width: 100%; min-height: 52px; padding: 0.8rem 1.1rem;
	border: 1.5px solid var(--line); border-radius: var(--r-sm);
	background: var(--surface); color: var(--ink);
	transition: border-color 0.2s, box-shadow 0.2s;
}
textarea { min-height: 160px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--clay) 22%, transparent); }
::placeholder { color: var(--muted); opacity: 1; }

.search-form {
	display: flex; align-items: center; gap: 0.5rem;
	padding: 0.4rem 0.4rem 0.4rem 1.1rem;
	border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
}
.search-form .icon { color: var(--muted); }
.search-form input { border: 0; min-height: 44px; padding: 0.5rem; background: transparent; box-shadow: none; }
.search-form:focus-within { border-color: var(--ink); }

/* 5. Header & navigation -------------------------------------------------- */
.topbar {
	background: var(--ink); color: var(--paper);
	font-size: 0.82rem; font-weight: 600;
}
.topbar__inner p {
	display: flex; align-items: center; justify-content: center; gap: 0.55rem;
	margin: 0; padding: 0.55rem 0; text-align: center;
}
.topbar .icon { color: var(--butter); width: 1.05em; }
.topbar__short { display: none; }
.topbar a { color: var(--butter); margin-left: 0.25rem; white-space: nowrap; }
.is-night .topbar { background: #0d1222; color: var(--ink); }

.site-header {
	position: sticky; top: 0; z-index: 100;
	background: color-mix(in srgb, var(--paper) 82%, transparent);
	backdrop-filter: blur(16px) saturate(1.3);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 30px -22px rgb(30 36 64 / 40%); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }
.site-header__inner {
	display: flex; align-items: center; gap: 1.5rem;
	min-height: var(--header-h);
}

.brand { margin: 0; font-size: 1.5rem; line-height: 1; }
.brand a { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--ink); }
.brand__mark svg { width: 38px; height: 38px; transition: transform 0.8s var(--ease); }
.brand a:hover .brand__mark svg { transform: rotate(-24deg); }
.brand__word { font-family: var(--serif); letter-spacing: -0.02em; }
.brand__word em { font-style: italic; color: var(--clay); }
.brand--image img { max-height: 48px; width: auto; }

.primary-nav { margin-left: auto; }
.primary-nav .menu { display: flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.primary-nav .menu > li { position: relative; display: flex; align-items: center; }
.primary-nav .menu > li > a {
	position: relative; display: block; padding: 0.6rem 0.85rem;
	font-size: 0.96rem; font-weight: 650; text-decoration: none; color: var(--ink-soft);
	border-radius: var(--r-pill);
	transition: color 0.2s, background-color 0.2s;
}
.primary-nav .menu > li > a:hover,
.primary-nav .menu > li.current-menu-item > a,
.primary-nav .menu > li.current-menu-ancestor > a,
.primary-nav .menu > li.current_page_parent > a { color: var(--ink); background: var(--surface); }
.primary-nav .menu-item-has-children > a { padding-right: 0.3rem; }
.submenu-toggle {
	display: grid; place-items: center; width: 26px; height: 26px; margin-right: 0.2rem;
	padding: 0; border: 0; background: none; color: var(--muted); border-radius: 50%;
}
.submenu-toggle .icon { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.primary-nav .sub-menu {
	position: absolute; top: calc(100% + 10px); left: 50%; z-index: 20;
	display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 0.35rem;
	min-width: 520px; margin: 0; padding: 0.75rem; list-style: none;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
	box-shadow: var(--shadow-lg);
	opacity: 0; visibility: hidden; transform: translate(-50%, 8px) scale(0.98); transform-origin: top center;
	transition: opacity 0.25s var(--ease), transform 0.35s var(--ease), visibility 0.25s;
}
.primary-nav .sub-menu::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu,
.primary-nav li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.primary-nav li:hover > .submenu-toggle .icon,
.primary-nav li.is-open > .submenu-toggle .icon { transform: rotate(180deg); }
.primary-nav .sub-menu a {
	display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.75rem 0.85rem;
	border-radius: var(--r-sm); text-decoration: none; transition: background-color 0.2s;
}
.primary-nav .sub-menu a:hover { background: var(--paper); }
.nav-icon {
	display: grid; place-items: center; flex: none; width: 40px; height: 40px;
	border-radius: 12px; background: var(--paper-2); color: var(--ink);
}
.nav-icon .icon { width: 20px; height: 20px; }
.sub-menu .icon-sleep { color: var(--sky-ink); } .sub-menu li:has(.icon-sleep) .nav-icon { background: var(--sky); }
.sub-menu li:has(.icon-feeding) .nav-icon { background: var(--blush); color: var(--blush-ink); }
.sub-menu li:has(.icon-care) .nav-icon, .sub-menu li:has(.icon-toys) .nav-icon { background: var(--sage); color: var(--sage-ink); }
.sub-menu li:has(.icon-gear) .nav-icon { background: var(--buttr); color: var(--buttr-ink); }
.nav-text { display: grid; gap: 0.1rem; }
.nav-label { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.nav-desc { font-size: 0.82rem; line-height: 1.4; color: var(--muted); font-weight: 500; }

.header-actions { display: flex; align-items: center; gap: 0.25rem; }
.night-toggle__sun { display: none; }
.is-night .night-toggle__sun { display: block; }
.is-night .night-toggle__moon { display: none; }
.header-cta { margin-left: 0.5rem; }
.menu-toggle { display: none; }

.reading-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.reading-progress span {
	display: block; height: 100%; width: 100%;
	background: linear-gradient(90deg, var(--clay), var(--butter));
	transform-origin: 0 50%; transform: scaleX(0);
}
body:not(.is-article) .reading-progress { display: none; }

@media (max-width: 1080px) {
	.primary-nav { display: none; }
	.menu-toggle { display: inline-grid; }
	.header-actions { margin-left: auto; }
}
@media (max-width: 560px) {
	.header-cta { display: none; }
	.brand { font-size: 1.3rem; }
	.brand__mark svg { width: 34px; height: 34px; }
	:root { --header-h: 64px; }
	.topbar__long { display: none; }
	.topbar__short { display: inline; }
	.topbar__inner p { gap: 0.4rem; }
}

/* Mobile sheet */
.sheet { position: fixed; inset: 0; z-index: 300; }
.sheet[hidden] { display: none; }
.sheet__backdrop { position: absolute; inset: 0; background: rgb(19 26 45 / 45%); opacity: 0; transition: opacity 0.35s; }
.sheet__panel {
	position: absolute; inset: 0 0 0 auto; width: min(440px, 100%);
	display: flex; flex-direction: column; gap: 1.25rem;
	padding: 1rem var(--gutter) 1.5rem; overflow-y: auto; overscroll-behavior: contain;
	background: var(--paper);
	transform: translateX(100%); transition: transform 0.45s var(--ease);
}
.sheet.is-open .sheet__backdrop { opacity: 1; }
.sheet.is-open .sheet__panel { transform: none; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; }
.sheet__search {
	display: flex; align-items: center; gap: 0.6rem; padding: 0 1rem;
	border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
}
.sheet__search .icon { color: var(--muted); }
.sheet__search input { border: 0; background: transparent; box-shadow: none; padding-inline: 0; }
.sheet-menu { margin: 0; padding: 0; list-style: none; }
.sheet-menu > li { border-bottom: 1px solid var(--line); position: relative; }
.sheet-menu > li > a {
	display: block; padding: 0.95rem 0; font-family: var(--serif); font-size: 1.75rem; line-height: 1.15;
	text-decoration: none;
}
.sheet-menu .submenu-toggle { position: absolute; right: 0; top: 0.9rem; width: 40px; height: 40px; background: var(--surface); }
.sheet-menu .sub-menu { display: none; margin: 0 0 1rem; padding: 0; list-style: none; }
.sheet-menu li.is-open > .sub-menu { display: grid; gap: 0.25rem; }
.sheet-menu li.is-open > .submenu-toggle .icon { transform: rotate(180deg); }
.sheet-menu .sub-menu a { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0; text-decoration: none; font-weight: 650; }
.sheet-menu .nav-desc { display: none; }
.sheet-menu .nav-icon { width: 34px; height: 34px; border-radius: 10px; }
.sheet__foot { margin-top: auto; }

/* Search overlay */
.search-panel { position: fixed; inset: 0; z-index: 300; display: grid; justify-items: center; align-items: start; padding: 10vh var(--gutter) 2rem; }
.search-panel[hidden] { display: none; }
.search-panel__backdrop { position: absolute; inset: 0; background: rgb(19 26 45 / 50%); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s; }
.search-panel__box {
	position: relative; width: min(760px, 100%); max-height: 80vh; overflow: auto;
	padding: 1rem; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-lg);
	opacity: 0; transform: translateY(-14px) scale(0.98); transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
}
.search-panel.is-open .search-panel__backdrop { opacity: 1; }
.search-panel.is-open .search-panel__box { opacity: 1; transform: none; }
.search-panel__form { display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 0.35rem 0.35rem 1.1rem; border-radius: var(--r); background: var(--surface); border: 1.5px solid var(--line); }
.search-panel__form > .icon { color: var(--clay); width: 26px; height: 26px; }
.search-panel__form input { border: 0; min-height: 60px; font-size: 1.3rem; font-family: var(--serif); background: transparent; box-shadow: none; padding-inline: 0; }
.search-panel__results:empty { display: none; }
.search-panel__results { padding: 0.75rem 0.25rem 0.25rem; }
.search-panel__suggest { padding: 1.25rem 0.5rem 0.5rem; }
.search-hit {
	display: flex; align-items: center; gap: 1rem; padding: 0.8rem 0.9rem; border-radius: var(--r-sm);
	text-decoration: none; transition: background-color 0.2s;
}
.search-hit:hover, .search-hit:focus-visible { background: var(--surface); }
.search-hit__type {
	flex: none; padding: 0.25rem 0.6rem; border-radius: var(--r-pill);
	font-size: 0.72rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase;
	background: var(--sage); color: var(--sage-ink);
}
.search-hit__type--product { background: var(--buttr); color: var(--buttr-ink); }
.search-hit__type--page { background: var(--sky); color: var(--sky-ink); }
.search-hit__title { font-weight: 650; }
.search-hit--all { justify-content: center; font-weight: 700; color: var(--clay-ink); }
.search-empty { padding: 1rem; color: var(--muted); }
.search-again { max-width: 640px; margin-bottom: 2.5rem; }

/* 6. Cards & chips -------------------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
	position: relative; z-index: 2;
	display: inline-flex; align-items: center; gap: 0.4rem;
	padding: 0.38rem 0.8rem 0.38rem 0.6rem; border-radius: var(--r-pill);
	background: var(--tone, var(--paper-2)); color: var(--tone-ink, var(--ink));
	font-size: 0.8rem; font-weight: 750; letter-spacing: 0.01em; text-decoration: none; line-height: 1.2;
	transition: transform 0.3s var(--ease), box-shadow 0.3s, background-color 0.2s;
}
.chip .icon { width: 1.05rem; height: 1.05rem; }
.chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.chip.is-active { background: var(--ink); color: var(--paper); }
.chip--plain { padding-left: 0.85rem; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }

.card-grid {
	display: grid; gap: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.card-grid--index .card-grid__feature { grid-column: 1 / -1; }

.card {
	position: relative; display: flex; flex-direction: column;
	background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card__media {
	position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tone, var(--paper-2));
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1.35rem 1.5rem 1.5rem; flex: 1; }
.card__title { margin: 0; font-size: var(--step-2); line-height: 1.18; }
.card__link { text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__link:hover { color: var(--clay-ink); }
.card__excerpt { margin: 0; color: var(--ink-soft); font-size: 0.97rem; line-height: 1.6; }
.card__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; margin: auto 0 0;
	font-size: 0.82rem; font-weight: 650; color: var(--muted);
}
.card__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.card__meta .icon { width: 1rem; height: 1rem; }

.card--feature { display: grid; grid-template-columns: 1.25fr 1fr; }
.card--feature .card__media { aspect-ratio: auto; min-height: 360px; }
.card--feature .card__body { padding: clamp(1.5rem, 1rem + 2vw, 3rem); justify-content: center; gap: 1rem; }
.card--feature .card__title { font-size: var(--step-3); }
.card--feature .card__excerpt { font-size: 1.05rem; }
.card--feature .card__meta { margin-top: 0.5rem; }

.card--row { display: grid; grid-template-columns: 148px 1fr; border-radius: var(--r); }
.card--row .card__media { aspect-ratio: auto; height: 100%; min-height: 128px; }
.card--row .card__body { padding: 1rem 1.25rem; gap: 0.45rem; }
.card--row .card__title { font-size: 1.2rem; }
.card--row .card__excerpt { display: none; }
.card--row .chip { font-size: 0.72rem; padding-block: 0.28rem; }

.card--mini { flex-direction: row; align-items: center; gap: 0.9rem; padding: 0.6rem; border-radius: var(--r); box-shadow: none; background: transparent; }
.card--mini .card__media { width: 72px; height: 72px; aspect-ratio: 1; border-radius: 16px; flex: none; }
.card--mini .card__body { padding: 0; gap: 0.25rem; }
.card--mini .card__title { font-size: 1.05rem; }
.card--page { padding: 0.5rem; }

.img-fallback { display: grid; place-items: center; width: 100%; height: 100%; min-height: 160px; color: var(--tone-ink, var(--muted)); background: var(--tone, var(--paper-2)); }
.img-fallback .icon { width: 48px; height: 48px; opacity: 0.6; }

/* Product cards */
.product-grid {
	display: grid; gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	margin: 0; padding: 0; list-style: none;
}
.product-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pcard {
	position: relative; display: flex; flex-direction: column; height: 100%;
	background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pcard__media {
	position: relative; margin: 0.6rem 0.6rem 0; aspect-ratio: 1; border-radius: calc(var(--r-lg) - 8px) calc(var(--r-lg) - 8px) var(--r) var(--r);
	background: radial-gradient(120% 90% at 50% 15%, #fff 0%, var(--tone, var(--paper-2)) 100%);
	overflow: hidden; display: grid; place-items: center;
}
.pcard__media img {
	width: 78%; height: 78%; object-fit: contain; mix-blend-mode: multiply;
	transition: transform 0.8s var(--ease);
}
.is-night .pcard__media { background: radial-gradient(120% 90% at 50% 15%, #fff 0%, #ece6dc 100%); }
.pcard:hover .pcard__media img { transform: scale(1.06) rotate(-1deg); }
.pcard__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.2rem 1.25rem; flex: 1; }
.pcard__cat { margin: 0; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tone-ink, var(--muted)); }
.pcard__title { margin: 0; font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: 1.38; letter-spacing: 0; }
.pcard__link { text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard__actions { margin-top: auto; padding-top: 0.6rem; position: relative; z-index: 2; }
.pcard .btn--buy { width: 100%; box-shadow: none; }

/* 7. Homepage ------------------------------------------------------------- */
.hero { position: relative; padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) 0 clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; isolation: isolate; }
.hero__sky { position: absolute; inset: 0; z-index: -1; }
.hero__sky .blob--a { width: 520px; height: 520px; background: var(--sky); top: -160px; right: -80px; }
.hero__sky .blob--b { width: 420px; height: 420px; background: var(--blush); bottom: -180px; left: 25%; opacity: 0.6; }
.hero__sky .blob--c { width: 300px; height: 300px; background: var(--buttr); top: 30%; left: -120px; opacity: 0.55; }
.hero__stars { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--clay); opacity: 0.45; }
.hero__grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.hero__title { font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 1.5rem; }
.hero__title em { display: inline-block; position: relative; }
.hero__title em::after {
	content: ""; position: absolute; left: 0.05em; right: 0.1em; bottom: 0.06em; height: 0.12em; z-index: -1;
	background: var(--butter); border-radius: 99px; opacity: 0.7;
	transform-origin: left; animation: underline 1.2s 0.4s var(--ease) both;
}
.hero__lead { max-width: 34rem; font-size: var(--step-1); line-height: 1.6; color: var(--ink-soft); margin-bottom: 1.75rem; }

.ask {
	display: flex; align-items: center; gap: 0.75rem; width: min(100%, 520px);
	margin-bottom: 1.75rem; padding: 0.55rem 0.55rem 0.55rem 1.25rem;
	border: 1.5px solid var(--line); border-radius: var(--r-pill);
	background: var(--surface); box-shadow: var(--shadow); text-align: left;
	transition: border-color 0.25s, box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.ask:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ask > .icon { color: var(--muted); }
.ask__label { color: var(--muted); font-weight: 600; white-space: nowrap; }
.ask__word {
	flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
	font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--clay-ink);
}
.ask__word.is-out { animation: wordOut 0.35s var(--ease) both; }
.ask__word.is-in { animation: wordIn 0.45s var(--ease) both; }
.ask__go { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--paper); flex: none; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__proof { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin: 2.25rem 0 0; padding: 1.5rem 0 0; list-style: none; border-top: 1px solid var(--line); }
.hero__proof li { display: grid; line-height: 1.25; }
.hero__proof strong { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; }
.hero__proof span { font-size: 0.85rem; font-weight: 600; color: var(--muted); }

.hero__art { position: relative; aspect-ratio: 0.86; max-width: 540px; width: 100%; justify-self: end; }
.hero__arch {
	position: absolute; inset: 0 10% 6% 6%;
	border-radius: 999px 999px var(--r-xl) var(--r-xl); overflow: hidden;
	background: var(--sky); box-shadow: var(--shadow-lg);
	animation: rise 1.1s 0.1s var(--ease) both;
}
.hero__arch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%); }
.hero__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 60%; }
.hero__circle {
	position: absolute; right: 0; bottom: 14%; width: 38%; aspect-ratio: 1;
	display: grid; place-items: center; border-radius: 50%;
	background: radial-gradient(circle at 40% 30%, #fff, var(--buttr)); border: 6px solid var(--paper);
	box-shadow: var(--shadow-lg); overflow: hidden;
	animation: rise 1.1s 0.35s var(--ease) both, float 7s 1.5s ease-in-out infinite;
}
.hero__circle img { width: 72%; height: 72%; object-fit: contain; mix-blend-mode: multiply; }
.hero__note {
	position: absolute; left: -6%; bottom: 3%; max-width: 300px;
	display: flex; gap: 0.8rem; align-items: flex-start; padding: 1rem 1.1rem;
	border-radius: var(--r); font-size: 0.9rem; line-height: 1.45;
	animation: rise 1s 0.6s var(--ease) both;
}
.hero__note strong { display: block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay-ink); margin-bottom: 0.2rem; }
.hero__note [data-tip] { display: block; transition: opacity 0.4s; }
.hero__note-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--ink); color: var(--butter); }
.hero__note-icon .icon { width: 20px; height: 20px; }
.hero__badge {
	position: absolute; top: 9%; left: -2%;
	display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1rem 0.65rem 0.75rem;
	border-radius: var(--r-pill); font-size: 0.86rem; font-weight: 700;
	animation: rise 1s 0.8s var(--ease) both, float 8s 2s ease-in-out infinite reverse;
}
.hero__badge .icon { color: var(--sage-ink); }

.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); padding: 1.1rem 0; }
.marquee__track { display: flex; align-items: center; gap: 2rem; width: max-content; animation: marquee 50s linear infinite; }
.marquee__track span { font-family: var(--serif); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); white-space: nowrap; }
.marquee__track span:nth-of-type(3n+2) { font-style: italic; color: var(--clay-ink); }
.marquee__track .icon { color: var(--butter); width: 22px; height: 22px; }
.marquee:hover .marquee__track { animation-play-state: paused; }

.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9rem, 0.5rem + 1vw, 1.5rem); }
.topic-tile {
	position: relative; display: flex; flex-direction: column; gap: 0.6rem; min-height: 300px;
	padding: 1.6rem; border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
	background: var(--tone); color: var(--ink); text-decoration: none;
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.topic-tile::before {
	content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -70px; z-index: -1;
	border-radius: 50%; background: var(--tone-mid); opacity: 0.55;
	transition: transform 0.8s var(--ease);
}
.topic-tile:hover { transform: translateY(-6px) rotate(-0.4deg); box-shadow: var(--shadow-lg); }
.topic-tile:hover::before { transform: scale(1.35); }
.topic-tile__icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: auto; border-radius: 18px; background: var(--surface); color: var(--tone-ink); box-shadow: var(--shadow-sm); }
.topic-tile__icon .icon { width: 28px; height: 28px; }
.topic-tile__name { font-family: var(--serif); font-size: var(--step-3); line-height: 1.05; margin-top: 1.5rem; }
.topic-tile__desc { font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }
.topic-tile__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.4rem; padding-top: 0.9rem; border-top: 1px solid color-mix(in srgb, var(--tone-ink) 22%, transparent); font-size: 0.85rem; font-weight: 750; color: var(--tone-ink); }
.topic-tile__foot .icon { transition: transform 0.35s var(--ease); }
.topic-tile:hover .topic-tile__foot .icon { transform: translateX(5px); }

.latest__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1rem, 0.6rem + 1.5vw, 2rem); }
.latest__feature .card { height: 100%; }
.latest__feature .card--feature { grid-template-columns: 1fr; }
.latest__feature .card--feature .card__media { min-height: 0; aspect-ratio: 16 / 10; }
.latest__list { display: grid; gap: 1rem; align-content: start; }

.stages__card {
	position: relative; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem);
	padding: clamp(1.75rem, 1rem + 3.5vw, 4.5rem); border-radius: var(--r-xl); overflow: hidden; isolation: isolate;
	background: var(--ink); color: var(--paper);
}
.is-night .stages__card { background: #0e1426; color: var(--ink); }
.stages__card::before, .stages__card::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); }
.stages__card::before { width: 420px; height: 420px; background: #3d5688; right: -120px; top: -140px; opacity: 0.55; }
.stages__card::after { width: 320px; height: 320px; background: #a2462a; left: 30%; bottom: -220px; opacity: 0.35; }
.stages__card .kicker { color: color-mix(in srgb, currentColor 60%, transparent); }
.stages__card .section-title { color: inherit; }
.stages__card .section-title em { color: var(--butter); }
.stages__tabs { display: grid; gap: 0.5rem; margin-top: 2rem; }
.stages__tabs button {
	display: flex; align-items: center; gap: 0.85rem; width: 100%;
	padding: 1rem 1.25rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: var(--r);
	background: transparent; color: inherit; font-weight: 700; font-size: 1.05rem; text-align: left;
	transition: background-color 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.stages__tabs button:hover { background: rgb(255 255 255 / 6%); }
.stages__tabs button[aria-selected="true"] { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 30%); transform: translateX(6px); }
.stages__dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; opacity: 0.6; transition: all 0.3s; }
[aria-selected="true"] .stages__dot { background: var(--butter); border-color: var(--butter); opacity: 1; box-shadow: 0 0 0 5px rgb(243 210 126 / 20%); }
.stages__panel { display: grid; gap: 1.75rem; align-content: start; animation: fadeUp 0.6s var(--ease) both; }
.stages__panel[hidden] { display: none; }
.stages__title { font-size: var(--step-3); color: inherit; margin-bottom: 0.6rem; }
.stages__lead p:last-child { color: color-mix(in srgb, currentColor 72%, transparent); margin: 0; max-width: 36rem; }
.stages__reads { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.stages__reads a {
	display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: var(--r);
	background: rgb(255 255 255 / 7%); text-decoration: none;
	transition: background-color 0.3s, transform 0.4s var(--ease);
}
.stages__reads a:hover { background: rgb(255 255 255 / 13%); transform: translateX(6px); }
.stages__num { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--butter); }
.stages__read-title { flex: 1; font-weight: 650; }
.stages__picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.mini-product { display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem; border-radius: var(--r); background: rgb(255 255 255 / 92%); color: #1e2440; text-decoration: none; transition: transform 0.4s var(--ease); }
.mini-product:hover { transform: translateY(-3px); }
.mini-product__img { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 14px; background: #f4ece0; overflow: hidden; }
.mini-product__img img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.mini-product__name { font-size: 0.86rem; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.shopcat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9rem, 0.5rem + 1vw, 1.5rem); }
.shopcat {
	position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.1rem 1.4rem;
	border-radius: var(--r-lg); background: var(--tone); text-decoration: none; overflow: hidden;
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.shopcat:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.shopcat__imgs { position: relative; height: 190px; margin-bottom: 0.9rem; }
.shopcat__imgs > span {
	position: absolute; width: 58%; aspect-ratio: 1; display: grid; place-items: center;
	border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff, #faf6ef); box-shadow: var(--shadow); overflow: hidden;
	transition: transform 0.7s var(--ease);
}
.shopcat__imgs > span img { width: 74%; height: 74%; object-fit: contain; mix-blend-mode: multiply; }
.shopcat__imgs > span:nth-child(1) { left: 0; top: 8%; z-index: 2; }
.shopcat__imgs > span:nth-child(2) { right: 0; top: 0; width: 46%; }
.shopcat__imgs > span:nth-child(3) { right: 12%; bottom: -4%; width: 40%; z-index: 3; }
.shopcat:hover .shopcat__imgs > span:nth-child(1) { transform: translate(-4px, -6px) rotate(-4deg); }
.shopcat:hover .shopcat__imgs > span:nth-child(2) { transform: translate(6px, -4px) rotate(5deg); }
.shopcat:hover .shopcat__imgs > span:nth-child(3) { transform: translate(4px, 6px); }
.shopcat__name { font-family: var(--serif); font-size: 1.45rem; line-height: 1.15; color: var(--ink); }
.shopcat__count { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 750; color: var(--tone-ink); }

.carousel { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.carousel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.carousel__title { font-size: var(--step-2); margin: 0; }
.carousel__nav { display: flex; gap: 0.4rem; }
.carousel__nav .icon-btn { border-color: var(--line); background: var(--surface); }
.carousel__nav .icon-btn:disabled { opacity: 0.35; cursor: default; }
.carousel__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, calc((100% - 4.5rem) / 4)); gap: 1.5rem;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0; padding: 0.5rem 0.25rem 1.5rem; margin: -0.5rem -0.25rem 0;
	scrollbar-width: none; overscroll-behavior-x: contain;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__item { scroll-snap-align: start; }

.promise__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 0.6rem + 1.5vw, 2rem); }
.promise__item { padding: 2rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-soft); }
.promise__item h3 { font-size: var(--step-2); margin: 1.25rem 0 0.6rem; }
.promise__item p { color: var(--ink-soft); margin: 0; font-size: 0.97rem; }
.promise__item a { font-weight: 700; color: var(--clay-ink); }
.promise__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--tone); color: var(--tone-ink); }
.promise__icon .icon { width: 26px; height: 26px; }

/* Newsletter */
.newsletter { padding-block: 0 var(--section); }
.home .newsletter { padding-top: 0; }
.newsletter__card {
	position: relative; display: grid; grid-template-columns: auto 1fr minmax(300px, 0.9fr); align-items: center; gap: clamp(1.25rem, 1rem + 2vw, 3rem);
	padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem); border-radius: var(--r-xl);
	background: var(--blush); overflow: hidden; isolation: isolate;
}
.newsletter__art { position: relative; width: 120px; height: 120px; }
.newsletter__art .blob--a { width: 140px; height: 140px; background: var(--butter); filter: blur(30px); inset: -10px; }
.newsletter__art .blob--b { width: 260px; height: 260px; background: var(--blush-mid); filter: blur(60px); right: -400px; top: -100px; opacity: 0.5; }
.newsletter__moon { position: relative; display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: var(--ink); color: var(--butter); animation: float 6s ease-in-out infinite; }
.newsletter__moon .icon { width: 54px; height: 54px; }
.newsletter__title { font-size: var(--step-3); margin-bottom: 0.4rem; }
.newsletter__copy p:last-child { margin: 0; color: var(--ink-soft); }
.newsletter-form__row { display: flex; gap: 0.5rem; padding: 0.4rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow); }
.newsletter-form__row input { border: 0; min-height: 48px; background: transparent; box-shadow: none; padding-left: 1.1rem; border-radius: var(--r-pill); }
.newsletter-form__note { margin: 0.75rem 0 0 1rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 8. Listings ------------------------------------------------------------- */
.archive-hero { position: relative; padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 clamp(2rem, 1.5rem + 2vw, 3rem); overflow: hidden; isolation: isolate; background: color-mix(in srgb, var(--tone) 55%, var(--paper)); }
.archive-hero__bg { position: absolute; inset: 0; z-index: -1; }
.archive-hero__bg .blob--a { width: 420px; height: 420px; background: var(--tone-mid); right: -120px; top: -180px; opacity: 0.5; }
.archive-hero__bg .blob--b { width: 300px; height: 300px; background: var(--buttr); left: 40%; bottom: -220px; opacity: 0.45; }
.archive-hero__row { display: flex; align-items: center; gap: 1.25rem; }
.archive-hero__icon { display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 24px; background: var(--surface); color: var(--tone-ink); box-shadow: var(--shadow); }
.archive-hero__icon .icon { width: 36px; height: 36px; }
.archive-hero__title { font-size: var(--step-5); margin: 0; line-height: 1; }
.archive-hero .kicker { color: var(--tone-ink); }
.archive-hero__desc { max-width: 46rem; margin-top: 1.25rem; font-size: var(--step-1); color: var(--ink-soft); }
.archive-hero__desc p:last-child { margin: 0; }
.archive-hero__chips { margin-top: 1.75rem; }
.archive-hero__chips .chip { background: var(--surface); color: var(--ink); }
.archive-hero__chips .chip .icon { color: var(--tone-ink); }
.archive-hero__chips .chip.is-active { background: var(--ink); color: var(--paper); }
.archive-hero__chips .chip.is-active .icon { color: inherit; }

.pagination { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); display: flex; justify-content: center; }
.pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 0; padding: 0; list-style: none; border: 0; background: none; min-width: 0; height: auto; }
.pagination li > .page-numbers {
	display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 0.9rem;
	border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--surface);
	font-weight: 700; text-decoration: none; transition: all 0.25s;
}
.pagination a.page-numbers:hover { border-color: var(--ink); }
.pagination li > .current { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pagination li > .dots { border: 0; background: none; }

.empty { text-align: center; padding: 2rem 0; }
.empty__icon { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--ink); color: var(--butter); margin-bottom: 1.25rem; }
.empty__icon .icon { width: 38px; height: 38px; }
.empty__title { font-size: var(--step-3); }
.empty > p { color: var(--ink-soft); margin-bottom: 2.5rem; }
.empty .card-grid { text-align: left; }

/* 9. Article -------------------------------------------------------------- */
.article-hero { position: relative; padding-top: clamp(1.75rem, 1rem + 2.5vw, 3.5rem); isolation: isolate; }
.article-hero__bg { position: absolute; inset: 0 0 30% 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 60%, var(--paper)), var(--paper)); }
.article-hero__bg .blob--a { width: 460px; height: 460px; background: var(--tone-mid); right: -140px; top: -200px; opacity: 0.45; }
.article-hero__bg .blob--b { width: 320px; height: 320px; background: var(--buttr); left: -140px; top: 20%; opacity: 0.4; }
.article-hero .chip { margin-bottom: 1.25rem; }
.article-hero__title { font-size: var(--step-5); line-height: 1.03; letter-spacing: -0.03em; margin-bottom: 1.25rem; }
.article-hero__dek { font-size: var(--step-1); line-height: 1.6; color: var(--ink-soft); max-width: 44rem; }
.article-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 1.75rem; font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.article-hero__meta > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.article-hero__meta .icon { width: 1.1rem; }
.byline { color: var(--ink-soft); }
.byline strong { color: var(--ink); }
.byline__avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: var(--shadow-sm); }
.article-hero__media { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); margin-bottom: 0; }
.article-hero__credit { margin-top: 0.5rem; font-size: 0.75rem; color: var(--muted); text-align: right; }
.article-hero__media img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }

.article-layout { display: grid; grid-template-columns: 260px minmax(0, 720px); justify-content: center; gap: clamp(2rem, 1rem + 4vw, 5rem); padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--section); }
.article-aside { position: relative; }
.article-aside > * { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.article-aside .share { position: static; margin-top: 1.25rem; }
.toc { padding: 1.25rem 1.25rem 1rem; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line-soft); }
.toc summary { display: flex; align-items: center; gap: 0.6rem; list-style: none; cursor: pointer; font-weight: 750; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.toc summary::-webkit-details-marker { display: none; }
.toc__chev { margin-left: auto; transition: transform 0.3s; }
.toc[open] .toc__chev { transform: rotate(180deg); }
.toc ol { margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 0.15rem; max-height: calc(100vh - 260px); overflow: auto; }
.toc li { counter-increment: toc; }
.toc a {
	display: grid; grid-template-columns: 1.6rem 1fr; padding: 0.45rem 0.5rem; border-radius: 10px;
	font-size: 0.9rem; font-weight: 600; line-height: 1.4; color: var(--ink-soft); text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--serif); font-style: italic; color: var(--muted); }
.toc a:hover { background: var(--paper); color: var(--ink); }
.toc a.is-active { background: var(--tone); color: var(--tone-ink); }
.toc a.is-active::before { color: inherit; }

.share { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.share__label { font-size: 0.78rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: 0.35rem; }
.share__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; transition: all 0.25s var(--ease); }
.share__btn:hover { border-color: var(--ink); transform: translateY(-2px); }
.share__btn .icon { width: 18px; height: 18px; }
.share__btn.is-copied { background: var(--sage); border-color: var(--sage-mid); }
.article-foot { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* Prose */
.prose { font-size: clamp(1.05rem, 1rem + 0.2vw, 1.15rem); line-height: 1.78; color: var(--ink-soft); }
.prose > * + * { margin-top: 1.25em; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0; }
.prose > p:first-of-type { font-size: 1.12em; color: var(--ink); }
.prose h2 { font-size: var(--step-3); margin: 2.4em 0 0.6em; color: var(--ink); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.prose h3 { font-size: var(--step-2); margin: 1.9em 0 0.5em; color: var(--ink); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.prose h4 { font-family: var(--sans); font-size: 1.05rem; font-weight: 750; letter-spacing: 0; margin: 1.6em 0 0.4em; color: var(--ink); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0; }
.prose a { color: var(--clay-ink); font-weight: 650; text-decoration-color: color-mix(in srgb, var(--clay-ink) 40%, transparent); text-decoration-thickness: 1.5px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { color: var(--ink); font-weight: 750; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.5em; }
.prose ul li::marker { color: var(--clay); }
.prose ol li::marker { font-family: var(--serif); font-style: italic; color: var(--clay-ink); }
.prose blockquote { margin-inline: 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--clay); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; font-family: var(--serif); font-size: 1.3em; line-height: 1.5; color: var(--ink); }
.prose img { border-radius: var(--r); }
.prose figure { margin-inline: 0; }
.prose figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.6rem; }
.prose hr { border: 0; height: 1px; background: var(--line); margin-block: 3em; }
.table-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.5; }
.prose th, .prose td { padding: 0.85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.prose thead th { background: var(--tone, var(--paper-2)); color: var(--tone-ink, var(--ink)); font-size: 0.82rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody td:first-child { font-weight: 700; color: var(--ink); }

/* Editorial boxes used inside guides */
.takeaways, .callout, .prose .note, .prose .warning {
	position: relative; padding: 1.5rem 1.6rem; border-radius: var(--r-lg);
}
.takeaways { background: var(--tone, var(--sage)); color: var(--ink); }
.takeaways__title, .callout__title { margin: 0 0 0.75rem !important; font-family: var(--sans); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tone-ink, var(--ink)); }
.takeaways ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.takeaways li { position: relative; padding-left: 2rem; margin: 0 !important; color: var(--ink); font-size: 1rem; line-height: 1.55; }
.takeaways li::before {
	content: ""; position: absolute; left: 0; top: 0.2em; width: 1.25rem; height: 1.25rem; border-radius: 50%;
	background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9734e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}
.prose .note { background: var(--sky); color: var(--ink); font-size: 0.98em; border-left: 0; }
.prose .warning { background: var(--blush); color: var(--ink); font-size: 0.98em; }
.prose .note strong:first-child, .prose .warning strong:first-child { display: block; margin-bottom: 0.25rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky-ink); }
.prose .warning strong:first-child { color: var(--blush-ink); }
.prose .sources { font-size: 0.88em; color: var(--muted); }
.prose .sources li { margin-top: 0.35em; }
.prose .faq h3 { font-family: var(--sans); font-size: 1.08rem; font-weight: 750; letter-spacing: 0; }
.callout { display: flex; gap: 1rem; margin-top: 3rem; background: var(--surface); border: 1px solid var(--line); font-size: 0.95rem; color: var(--ink-soft); }
.callout p { margin: 0; }
.callout__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--sky); color: var(--sky-ink); }

/* 10. Shop & product ------------------------------------------------------ */
.disclosure-note { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0 2rem; padding: 0.9rem 1.1rem; border-radius: var(--r); background: var(--surface); border: 1px dashed var(--line); font-size: 0.88rem; color: var(--ink-soft); }
.disclosure-note .icon { color: var(--clay); margin-top: 0.15em; }

.product-page { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.product-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.product-hero > * { min-width: 0; } /* scrolling thumbnails must not widen the column */
.gallery { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.gallery__stage {
	position: relative; aspect-ratio: 1; border-radius: var(--r-xl); overflow: hidden;
	background: radial-gradient(110% 90% at 50% 20%, #fff 0%, var(--tone) 100%);
	display: grid; place-items: center; box-shadow: var(--shadow);
}
.gallery__slide { margin: 0; width: 100%; height: 100%; display: grid; place-items: center; animation: fadeIn 0.5s var(--ease); }
.gallery__slide[hidden] { display: none; }
.gallery__slide img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.is-night .gallery__stage { background: radial-gradient(110% 90% at 50% 20%, #fff 0%, #ebe4d9 100%); }
.gallery__thumbs { display: flex; gap: 0.6rem; margin-top: 1rem; overflow-x: auto; padding: 0.25rem; scrollbar-width: thin; }
.gallery__thumbs button { flex: none; width: 72px; height: 72px; padding: 6px; border-radius: 16px; border: 2px solid var(--line); background: #fff; transition: border-color 0.2s, transform 0.3s var(--ease); }
.gallery__thumbs button img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gallery__thumbs button[aria-selected="true"] { border-color: var(--ink); transform: translateY(-2px); }
.product-summary .chip { margin-bottom: 1rem; }
.product-summary__title { font-size: var(--step-4); line-height: 1.08; margin-bottom: 1rem; }
.product-summary__lead { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.6; }
.highlights { display: grid; gap: 0.75rem; margin: 1.75rem 0; padding: 0; list-style: none; }
.highlights li { display: flex; gap: 0.8rem; font-size: 0.97rem; line-height: 1.5; color: var(--ink-soft); }
.highlights strong { color: var(--ink); }
.highlights__check { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--tone); color: var(--tone-ink); }
.highlights__check .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.safety-note { display: flex; gap: 0.9rem; margin: 0 0 1rem; padding: 1.1rem 1.25rem; border-radius: var(--r-lg); background: var(--sky); color: var(--ink); font-size: 0.92rem; line-height: 1.55; }
.safety-note p { margin: 0; }
.safety-note a { color: var(--sky-ink); font-weight: 700; }
.safety-note__title { margin-bottom: 0.2rem !important; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky-ink); }
.safety-note__icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--surface); color: var(--sky-ink); }
.buybox { padding: 1.4rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.buybox__note { display: flex; gap: 0.6rem; margin: 1rem 0 0; font-size: 0.83rem; line-height: 1.5; color: var(--muted); }
.buybox__note .icon { flex: none; width: 1.05rem; margin-top: 0.15em; }
.assurances { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.assurances li { display: inline-flex; align-items: center; gap: 0.45rem; }
.assurances .icon { color: var(--sage-ink); width: 1.1rem; }
.assurances a { color: inherit; }
.product-details { padding-block: var(--section) calc(var(--section) * 0.6); }
.product-details .section-title { margin-bottom: 2rem; }
.prose--product > p:first-of-type { font-size: 1em; color: var(--ink-soft); }
.verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.verdict__col { padding: 1.4rem 1.5rem; border-radius: var(--r-lg); }
.verdict__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; font-size: 0.97rem; }
.verdict__col li { margin: 0 !important; padding-left: 1.4rem; position: relative; }
.verdict__col li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.verdict__col--pro { background: var(--sage); color: var(--ink); }
.verdict__col--con { background: var(--blush); color: var(--ink); }
.verdict__title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.85rem !important; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.verdict__col--pro .verdict__title { color: var(--sage-ink); }
.verdict__col--con .verdict__title { color: var(--blush-ink); }
.verdict__title .icon { width: 1.15rem; height: 1.15rem; stroke-width: 2.4; }
.mobile-buybar { display: none; }

/* WooCommerce leftovers we still want tidy */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 1rem 0; padding: 1rem 1.25rem; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }

/* 11. Pages, 404, footer -------------------------------------------------- */
.page-hero { position: relative; padding: clamp(2rem, 1.5rem + 3vw, 4.5rem) 0 clamp(1.5rem, 1rem + 2vw, 3rem); isolation: isolate; overflow: hidden; }
.page-hero__bg { position: absolute; inset: 0; z-index: -1; }
.page-hero__bg .blob--a { width: 420px; height: 420px; background: var(--sky); right: -120px; top: -200px; opacity: 0.6; }
.page-hero__bg .blob--b { width: 300px; height: 300px; background: var(--blush); left: -120px; top: 10%; opacity: 0.5; }
.page-hero__title { font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.03em; margin: 0; }
.page-hero__dek { font-size: var(--step-1); color: var(--ink-soft); margin: 1.25rem 0 0; max-width: 42rem; }
.page-hero__meta { display: inline-flex; align-items: center; gap: 0.45rem; margin: 1.25rem 0 0; font-size: 0.88rem; font-weight: 600; color: var(--muted); }
.page-hero__meta .icon { width: 1.05rem; }
.prose--page { padding-bottom: var(--section); }
.prose--page > p:first-of-type { font-size: 1em; color: var(--ink-soft); }

/* Contact Form 7 */
.wpcf7 form { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.wpcf7 label { display: grid; gap: 0.4rem; font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.wpcf7 p { margin: 0; }
.wpcf7-submit { justify-self: start; min-height: 52px; padding: 0.85rem 1.75rem; border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-weight: 700; }
.wpcf7-submit:hover { background: var(--clay-ink); color: #fff; }
.wpcf7-not-valid-tip { font-size: 0.85rem; color: var(--blush-ink); }
.wpcf7-response-output { margin: 0 !important; border-radius: var(--r-sm); }
.wpcf7-spinner { display: none; }

/* Info cards used on About / Contact */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.info-card { padding: 1.4rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-soft); font-size: 0.97rem; }
.info-card h3 { font-size: 1.3rem; margin: 0 0 0.4rem; }
.info-card p { margin: 0; }

.notfound { position: relative; padding: clamp(3rem, 2rem + 5vw, 7rem) 0 var(--section); text-align: center; overflow: hidden; isolation: isolate; }
.notfound__sky { position: absolute; inset: 0; z-index: -1; }
.notfound__sky .blob--a { width: 500px; height: 500px; background: var(--sky); left: 50%; top: -200px; transform: translateX(-50%); }
.notfound__sky .blob--b { width: 300px; height: 300px; background: var(--blush); right: 10%; bottom: 0; opacity: 0.5; }
.notfound__moon { width: 170px; margin: 0 auto 1.5rem; animation: float 6s ease-in-out infinite; }
.notfound__title { font-size: var(--step-5); line-height: 1.02; }
.notfound__text { max-width: 34rem; margin: 0 auto 2rem; color: var(--ink-soft); font-size: var(--step-1); }
.notfound .search-form { max-width: 520px; margin: 0 auto 1.5rem; }
.notfound__actions { justify-content: center; }

.site-footer { position: relative; margin-top: 2rem; padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0 2rem; background: var(--ink); color: color-mix(in srgb, var(--paper) 80%, transparent); }
.is-night .site-footer { background: #0c1120; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.site-footer__wave { position: absolute; left: 0; right: 0; top: -79px; width: 100%; height: 80px; fill: var(--ink); }
.is-night .site-footer__wave { fill: #0c1120; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--butter); }
.site-footer .brand a, .site-footer .brand__word { color: #fbf7f1; }
.is-night .site-footer .brand a, .is-night .site-footer .brand__word { color: var(--ink); }
.site-footer .brand { --brand-mark-bg: #fbf7f1; --brand-mark-fg: #1e2440; }
.site-footer__top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(2rem, 1rem + 3vw, 4rem); padding-bottom: 3rem; border-bottom: 1px solid rgb(255 255 255 / 12%); }
.site-footer__tagline { margin: 1.5rem 0 1rem; font-family: var(--serif); font-size: var(--step-4); line-height: 1.05; color: #fbf7f1; }
.is-night .site-footer__tagline { color: var(--ink); }
.site-footer__tagline em { color: var(--butter); }
.site-footer__about { max-width: 30rem; font-size: 0.95rem; }
.site-footer__social { display: flex; gap: 0.4rem; }
.site-footer__social .icon-btn { color: inherit; border-color: rgb(255 255 255 / 18%); }
.site-footer__heading { margin: 0 0 1rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--butter); }
.footer-menu { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; font-size: 0.97rem; font-weight: 550; }
.site-footer__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; padding: 2rem 0; border-bottom: 1px solid rgb(255 255 255 / 12%); font-size: 0.86rem; line-height: 1.6; }
.site-footer__notes p { display: flex; gap: 0.8rem; margin: 0; }
.site-footer__notes .icon { flex: none; color: var(--butter); margin-top: 0.15em; }
.site-footer__notes strong { color: #fbf7f1; }
.is-night .site-footer__notes strong { color: var(--ink); }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.75rem; font-size: 0.85rem; }
.site-footer__bottom p { margin: 0; }
.legal-menu { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0 auto 0 0; padding: 0 0 0 1.5rem; list-style: none; }
.to-top { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 20%); }
.to-top .icon-up { transform: rotate(-90deg); }

/* 12. Motion & utilities -------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wordOut { to { opacity: 0; transform: translateY(-60%); filter: blur(4px); } }
@keyframes wordIn { from { opacity: 0; transform: translateY(60%); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
	.js .reveal { opacity: 1; transform: none; }
	.marquee__track { animation: none; }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1180px) {
	.topic-grid, .shopcat-grid { grid-template-columns: repeat(2, 1fr); }
	.product-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.newsletter__card { grid-template-columns: 1fr; }
	.newsletter__art { display: none; }
	.article-layout { grid-template-columns: minmax(0, 720px); }
	.article-aside > * { position: static; }
	.toc[open] { margin-bottom: 0.5rem; }
	.article-aside .share { display: none; }
	.carousel__track { grid-auto-columns: minmax(240px, calc((100% - 3rem) / 3)); }
}
@media (max-width: 960px) {
	.hero__grid { grid-template-columns: 1fr; }
	.hero__art { justify-self: center; max-width: 460px; margin-top: 1rem; }
	.latest__grid { grid-template-columns: 1fr; }
	.stages__card { grid-template-columns: 1fr; }
	.stages__tabs { grid-template-columns: repeat(2, 1fr); margin-top: 1.5rem; }
	.stages__tabs button[aria-selected="true"] { transform: none; }
	.promise__grid { grid-template-columns: 1fr; }
	.card--feature { grid-template-columns: 1fr; }
	.card--feature .card__media { min-height: 0; aspect-ratio: 16 / 10; }
	.product-hero { grid-template-columns: minmax(0, 1fr); }
	.gallery { position: static; }
	.site-footer__top { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
	.site-footer__notes { grid-template-columns: 1fr; }
	.mobile-buybar {
		position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 90;
		display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.55rem 0.55rem 1.1rem;
		border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-lg); border: 1px solid var(--line);
		transform: translateY(150%); transition: transform 0.45s var(--ease);
	}
	.mobile-buybar.is-visible { transform: none; }
	.mobile-buybar__name { flex: 1; min-width: 0; font-weight: 700; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.mobile-buybar .btn { flex: none; }
}
@media (max-width: 640px) {
	.section-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
	.topic-grid { grid-template-columns: 1fr; }
	.topic-tile { min-height: 0; }
	.topic-tile__name { margin-top: 1rem; }
	.shopcat-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
	.shopcat { padding: 0.8rem 0.8rem 1rem; }
	.shopcat__imgs { height: 120px; }
	.shopcat__name { font-size: 1.15rem; }
	.product-grid, .product-grid--4 { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
	.pcard__body { padding: 0.8rem 0.85rem 1rem; }
	.pcard__title { font-size: 0.9rem; }
	.pcard .btn--buy { padding-inline: 0.6rem; font-size: 0.8rem; }
	.pcard .btn--buy .icon { display: none; }
	.carousel__track { grid-auto-columns: 72%; gap: 1rem; }
	.card--row { grid-template-columns: 112px 1fr; }
	.hero__note { left: 0; max-width: 78%; }
	.hero__badge { left: 0; }
	.ask__label { display: none; }
	.stages__tabs { grid-template-columns: 1fr 1fr; }
	.stages__tabs button { padding: 0.8rem 0.9rem; font-size: 0.92rem; }
	.stages__picks { grid-template-columns: 1fr; }
	.newsletter-form__row { flex-direction: column; border-radius: var(--r-lg); }
	.newsletter-form__row .btn { width: 100%; }
	.verdict { grid-template-columns: 1fr; }
	.site-footer__top { grid-template-columns: 1fr; }
	.legal-menu { padding: 0; margin: 0; }
	.archive-hero__icon { width: 58px; height: 58px; border-radius: 18px; }
	.archive-hero__icon .icon { width: 28px; height: 28px; }
	.article-hero__media img { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
	.hero__proof { gap: 0.75rem 1.5rem; }
	.hero__proof strong { font-size: 1.5rem; }
}

@media print {
	.topbar, .site-header, .site-footer, .newsletter, .article-aside, .shop-strip, .related, .mobile-buybar { display: none !important; }
	body { background: #fff; }
	.article-layout { display: block; }
}

/* 13. In-article products --------------------------------------------------- */
.inline-product {
	display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 1.4rem; align-items: center;
	margin-block: 2.2em; padding: 1rem; border-radius: var(--r-lg);
	background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
	font-size: 0.97rem; line-height: 1.55;
}
.inline-product__media { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r); background: radial-gradient(110% 90% at 50% 20%, #fff, var(--tone, var(--paper-2))); overflow: hidden; }
.inline-product__media img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.is-night .inline-product__media { background: radial-gradient(110% 90% at 50% 20%, #fff, #ece6dc); }
.inline-product__body { min-width: 0; }
.inline-product__body > * { margin: 0 !important; }
.inline-product__label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tone-ink, var(--clay-ink)); }
.inline-product__label .icon { width: 1rem; height: 1rem; }
.prose .inline-product__title { margin-top: 0.35rem !important; font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; }
.prose .inline-product__title a { color: var(--ink); text-decoration: none; font-weight: 400; }
.prose .inline-product__title a:hover { color: var(--clay-ink); }
.inline-product__note { margin-top: 0.45rem !important; color: var(--ink-soft); }
.inline-product__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; margin-top: 0.9rem !important; }
.prose .inline-product__actions .btn { color: #fff; text-decoration: none; }
.is-night .prose .inline-product__actions .btn { color: #141a2d; }
.prose .inline-product__more { font-size: 0.88rem; }
.inline-products { margin-block: 2.2em; }
.prose .inline-products__title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.inline-products__grid { grid-template-columns: repeat(3, 1fr); }
.prose .inline-products .pcard a { color: var(--ink); font-weight: 700; text-decoration: none; }
.prose .inline-products .pcard .btn { color: #fff; }
@media (max-width: 640px) {
	.inline-product { grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; align-items: start; }
	.inline-products__grid { grid-template-columns: 1fr 1fr; }
	.inline-products__grid > :nth-child(3) { display: none; }
}
@media (max-width: 400px) {
	/* Small phones: smaller image, full-width button that may wrap. */
	.inline-product { grid-template-columns: 72px minmax(0, 1fr); gap: 0.85rem; }
	.inline-product__actions .btn { width: 100%; white-space: normal; text-align: center; }
}

/* 14. Tools ------------------------------------------------------------------ */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(0.9rem, 0.5rem + 1vw, 1.5rem); }
.tool-card {
	position: relative; display: flex; flex-direction: column; gap: 0.55rem; padding: 1.5rem;
	border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-soft);
	text-decoration: none; overflow: hidden; isolation: isolate;
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.tool-card::before { content: ""; position: absolute; width: 160px; height: 160px; right: -60px; top: -60px; z-index: -1; border-radius: 50%; background: var(--tone); transition: transform 0.8s var(--ease); }
.tool-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tool-card:hover::before { transform: scale(1.4); }
.tool-card__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--tone); color: var(--tone-ink); }
.tool-card__icon .icon { width: 26px; height: 26px; }
.tool-card__title { margin: 0.6rem 0 0; font-size: var(--step-2); }
.tool-card__desc { font-size: 0.93rem; line-height: 1.55; color: var(--ink-soft); }
.tool-card__go { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 0.6rem; font-size: 0.88rem; font-weight: 750; color: var(--tone-ink); }
.tool-card__go .icon { width: 1rem; transition: transform 0.35s var(--ease); }
.tool-card:hover .tool-card__go .icon { transform: translateX(4px); }
.tools-band { background: var(--paper-2); }

.bkw-tool {
	margin-block: 2em 2.5em; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--r-xl);
	background: linear-gradient(160deg, var(--tone) 0%, var(--surface) 70%); border: 1px solid var(--line);
	box-shadow: var(--shadow); font-size: 1rem; color: var(--ink);
}
.bkw-tool p { margin: 0; }
.bkw-tool__form { display: grid; gap: 1.1rem; }
.bkw-tool__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.bkw-tool label { display: grid; gap: 0.4rem; font-size: 0.85rem; font-weight: 750; color: var(--ink); }
.bkw-tool label[hidden] { display: none; }
.bkw-tool__combo { display: flex; gap: 0.4rem; }
.bkw-tool__combo select { width: 90px; flex: none; }
.bkw-tool select { appearance: auto; }
.bkw-tool .btn { justify-self: start; }
.bkw-tool__result:empty { display: none; }
.bkw-tool__result { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px dashed var(--line); animation: fadeUp 0.5s var(--ease) both; }
.bkw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
.bkw-stat { display: grid; gap: 0.15rem; padding: 1rem 1.1rem; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line-soft); }
.bkw-stat strong { font-family: var(--serif); font-weight: 400; font-size: 1.55rem; line-height: 1.15; color: var(--ink); }
.bkw-stat span { font-size: 0.8rem; font-weight: 650; color: var(--muted); }
.bkw-timeline { margin: 1.25rem 0 0 !important; padding: 0 !important; list-style: none; display: grid; gap: 0.35rem; }
.bkw-timeline li { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 0.75rem; margin: 0 !important; padding: 0.55rem 0.9rem; border-radius: var(--r-sm); background: var(--surface); font-size: 0.95rem; }
.bkw-timeline time { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.bkw-timeline .is-nap { background: var(--sky); }
.bkw-timeline .is-bed { background: var(--ink); color: var(--paper); }
.bkw-timeline .is-bed time { color: var(--butter); }
.bkw-timeline .is-routine { background: var(--buttr); }
.bkw-list { margin: 1.1rem 0 0 !important; padding-left: 1.2rem !important; display: grid; gap: 0.35rem; font-size: 0.95rem; }
.bkw-tool__note { margin-top: 1.1rem !important; font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); }
.bkw-tool__error { color: var(--blush-ink); font-weight: 700; }
.bkw-tool__disclaimer { display: flex; gap: 0.5rem; margin-top: 1.4rem !important; font-size: 0.8rem; color: var(--muted); }
.bkw-tool__disclaimer .icon { flex: none; width: 1rem; margin-top: 0.15em; }
.callout--tools { display: block; margin-top: 2.5rem; padding: 1.5rem; background: var(--paper-2); border: 0; }
.callout--tools .callout__title { margin-bottom: 1rem; }
.callout--tools .tool-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0.75rem; }
.callout--tools .tool-card { padding: 1.1rem; }
.callout--tools .tool-card__desc { display: none; }
.callout--tools .tool-card__title { font-size: 1.15rem; margin-top: 0.3rem; }

.tools-hub__copy { margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0; padding-bottom: 0; }
@media (min-width: 900px) { .tools-band .tool-grid, .page-template-default .section--flush > .container > .tool-grid { grid-template-columns: repeat(3, 1fr); } }

/* Checklist-style tools (milestones, solids) */
.bkw-tool fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.bkw-tool legend { padding: 0; }
.bkw-checks { margin: 0 !important; padding: 0 !important; list-style: none; display: grid; gap: 0.45rem; }
.bkw-checks li { margin: 0 !important; }
.bkw-check { display: flex !important; align-items: flex-start; gap: 0.7rem !important; padding: 0.7rem 0.9rem; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-soft); font-size: 0.95rem !important; font-weight: 550 !important; line-height: 1.45; cursor: pointer; transition: background 0.25s var(--ease), border-color 0.25s var(--ease); }
.bkw-check input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0.12em 0 0; accent-color: var(--tone-ink); }
.bkw-check:has(input:checked) { background: var(--tone); border-color: var(--tone-mid); }
.bkw-check small { display: block; font-size: 0.75rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.bkw-group + .bkw-group { margin-top: 1.1rem; }
.bkw-group__title { margin: 0 0 0.5rem !important; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tone-ink); }
.bkw-meter { height: 10px; margin-top: 1rem; border-radius: 99px; background: var(--surface); border: 1px solid var(--line-soft); overflow: hidden; }
.bkw-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--tone-ink); transition: width 0.5s var(--ease); }
.bkw-verdict { margin-top: 1.1rem !important; padding: 1rem 1.1rem; border-radius: var(--r); background: var(--surface); border-left: 4px solid var(--tone-ink); font-size: 0.95rem; line-height: 1.6; }
.bkw-verdict strong:first-child { display: block; margin-bottom: 0.2rem; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--ink); }
.bkw-stages { margin: 1.1rem 0 0 !important; padding: 0 !important; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.5rem; }
.bkw-stages li { margin: 0 !important; padding: 0.7rem 0.8rem; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-soft); font-size: 0.82rem; line-height: 1.4; color: var(--muted); }
.bkw-stages li strong { display: block; font-size: 0.92rem; color: var(--ink-soft); }
.bkw-stages li.is-done { opacity: 0.6; }
.bkw-stages li.is-now { background: var(--tone); border-color: var(--tone-ink); color: var(--ink); }
.bkw-stages li.is-now strong { color: var(--ink); }