/**
 * Kluzo — 2026-07-30 approved final dev spec presentation layer.
 *
 * Loaded after kluzko.css so it owns the final design system while the older
 * layers keep the mechanisms the closeout work depends on.
 *
 * Spec §1 colour scheme, §2 responsive typography, §3 header, §4 side panel,
 * §5 footer, §6 home, §7 catalog, §8 PDP, §9 badges, §10 collections,
 * §11 brand, §12 account.
 *
 * Typography rule (spec §2): every text size on every surface is fluid. Fixed
 * pixels survive only where scaling is inappropriate — hairline borders, icon
 * geometry and minimum touch-target sizes.
 */

/* ==================================================================== *
 * §1/§2 — design tokens
 * ==================================================================== */
:root {
	/* Palette. White canvas everywhere; only chrome is dark. */
	--kf-canvas: #FFFFFF;
	--kf-ink: #1A1A1A;
	--kf-chrome: #1A1A1A;
	--kf-surface: #F8F7F4;
	--kf-hero: #EDECE7;
	--kf-muted: #B4B2A9;
	--kf-line: rgba(26, 26, 26, 0.14);
	--kf-line-invert: rgba(255, 255, 255, 0.18);
	--kf-scrim: rgba(0, 0, 0, 0.45);
	--kf-card-scrim: rgba(0, 0, 0, 0.15);

	/* Families. */
	--kf-display: 'Prata', Georgia, 'Times New Roman', serif;
	--kf-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Fluid type scale. Every step is clamp(min, fluid, max) so text tracks the
	   viewport between the mobile and desktop bounds instead of stepping at a
	   breakpoint. */
	--kf-fs-3xs: clamp(0.625rem, 0.58rem + 0.22vw, 0.72rem);
	--kf-fs-2xs: clamp(0.6875rem, 0.64rem + 0.24vw, 0.8125rem);
	--kf-fs-xs: clamp(0.75rem, 0.7rem + 0.26vw, 0.875rem);
	--kf-fs-sm: clamp(0.8125rem, 0.76rem + 0.3vw, 0.9375rem);
	--kf-fs-base: clamp(0.875rem, 0.82rem + 0.32vw, 1.0625rem);
	--kf-fs-md: clamp(1rem, 0.93rem + 0.4vw, 1.25rem);
	--kf-fs-lg: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
	--kf-fs-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
	--kf-fs-2xl: clamp(1.875rem, 1.35rem + 2.6vw, 3.75rem);

	/* Client TZ §0.1 — the ONE typographic scale. Every heading on every page
	   resolves its size from these five tokens and from nothing else. The site
	   shipped four different H1 sizes because each page layer wrote its own
	   font-size; those declarations now all point here. The H1 clamp is
	   deliberately monotonic between 28px and 36px, which is what fixes the
	   tablet regression where the heading GREW as the viewport shrank. */
	--font-h1: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
	--font-h2: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
	--font-h3: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
	--font-body: 0.875rem;
	--font-small: 0.75rem;

	/* Fluid rhythm. */
	--kf-space-2xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
	--kf-space-xs: clamp(0.5rem, 0.42rem + 0.35vw, 0.75rem);
	--kf-space-sm: clamp(0.75rem, 0.62rem + 0.55vw, 1.125rem);
	--kf-space-md: clamp(1.25rem, 1rem + 1.1vw, 2rem);
	--kf-space-lg: clamp(2rem, 1.5rem + 2.2vw, 3.75rem);
	--kf-space-xl: clamp(3rem, 2.2rem + 3.4vw, 6rem);

	/* Warm paper, kept as a named token for the surfaces that are DELIBERATELY
	   warm (see --kf-hero and --kf-surface above), and deliberately separate
	   from --kf-canvas: --kf-canvas is also the text colour on the dark chrome,
	   the counter pill fill and the filled-button label, so recolouring it
	   would tint the header, the panel and the CTAs.

	   It is no longer the page ground. Approved final dev spec §1 puts the
	   background of EVERY internal page on #FFFFFF and leaves only header and
	   footer coloured; the approved reference
	   `final-dark-references/2026-08-20-client-ready/screenshots/desktop-home.png`
	   shows exactly that — a white page carrying one warm hero band. Production
	   shipped the warm ground edge to edge instead, flattening the hero into
	   the page and losing the contrast the card and badge system is built on. */
	--kf-paper: #EFEBE4;

	--kf-maxw: 84rem;
	--kf-sidebar: 11.25rem; /* Spec §7: ~180px filter sidebar. */
	--kf-panel: 17.5rem;    /* Spec §4: ~280px side panel. */
	--kf-hairline: 1px;     /* Border — intentionally not fluid. */
	--kf-tap: 44px;         /* Minimum hit target — intentionally not fluid. */
}

/* §1: white ground on every public page — «Основний фон всех внутренних
   страниц (главная, каталог, товар, колекції, бренд, кабінет, контакти) —
   белый (#FFFFFF)». The cart and checkout surfaces already declare the same
   white further down; that block is now agreeing with this one rather than
   correcting it, and nothing about Woo's state machines is touched here.

   Warm grey is not removed, only re-scoped to the elements the spec reserves
   it for: the hero band (--kf-hero) and the accent card/badge surface
   (--kf-surface). */
body,
.kluzko-page,
.kluzko-home,
.kluzko-catalog,
.kluzko-pdp,
.kluzko-collections,
.kluzko-brand,
.kluzko-account {
	background-color: var(--kf-canvas);
	color: var(--kf-ink);
}

body {
	font-family: var(--kf-body);
	font-size: var(--kf-fs-base);
	font-weight: 400;
	line-height: 1.6;
}

.kluzko-page h1,
.kluzko-page h2,
.kluzko-page h3,
.kluzko-hero__title,
.kluzko-section__title,
.kluzko-catalog__title,
.kluzko-pdp__title,
.kluzko-capsule__title,
.kluzko-brand__title {
	font-family: var(--kf-display);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: 0.01em;
}

.kluzko-scroll-locked {
	overflow: hidden;
	touch-action: none;
}

/* Shared buttons. */
.kluzko-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--kf-tap);
	padding: var(--kf-space-xs) var(--kf-space-md);
	font-family: var(--kf-body);
	font-size: var(--kf-fs-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border: var(--kf-hairline) solid var(--kf-ink);
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.kluzko-btn--fill {
	background: var(--kf-ink);
	color: var(--kf-canvas);
}

.kluzko-btn--outline {
	background: transparent;
	color: var(--kf-ink);
}

.kluzko-btn--fill:hover,
.kluzko-btn--fill:focus-visible {
	background: #000;
}

.kluzko-btn--outline:hover,
.kluzko-btn--outline:focus-visible {
	background: var(--kf-surface);
}

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--kf-ink);
	outline-offset: 2px;
}

/* Fallback copy used when an owner field is unset. Deliberately styled as
   ordinary body prose: the text is true and safe to leave live, so flagging it
   as provisional — the old draft-placeholder treatment — would make a finished
   page look broken. It reads exactly like the owner copy it stands in for. */
.kluzko-fallback-copy > p {
	margin: 0 0 var(--kf-space-xs);
}

.kluzko-fallback-copy > p:last-child {
	margin-bottom: 0;
}

/* ==================================================================== *
 * §3 — header
 * ==================================================================== */
.kluzko-header {
	background: var(--kf-chrome);
	color: var(--kf-canvas);
	width: 100%;
}

.kluzko-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--kf-space-sm);
	max-width: var(--kf-maxw);
	margin-inline: auto;
	padding: var(--kf-space-xs) var(--kf-space-md);
}

.kluzko-header__left {
	display: flex;
	justify-content: flex-start;
}

.kluzko-header__menu {
	display: inline-flex;
	align-items: center;
	gap: var(--kf-space-2xs);
	min-height: var(--kf-tap);
	padding: 0 var(--kf-space-2xs);
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	/* Spec §3: menu label is smaller than before and proportional to the UI. */
	font-size: var(--kf-fs-2xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Spec §3 caps the label at 12px. The shared --kf-fs-2xs token clamps up to
   13px on wide viewports and is used elsewhere, so the size lands on the label
   only — the button keeps its tap height and icon sizing. */
.kluzko-header__menu-label {
	font-size: 12px;
}

.kluzko-header__wordmark {
	display: grid;
	justify-items: center;
	gap: 0.1em;
	color: inherit;
	text-decoration: none;
	line-height: 1;
}

.kluzko-header__wordmark-main {
	font-family: var(--kf-display);
	font-size: var(--kf-fs-md);
	letter-spacing: 0.22em;
	text-indent: 0.22em;
}

.kluzko-header__wordmark-sub {
	font-family: var(--kf-body);
	font-size: var(--kf-fs-3xs);
	font-weight: 400;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	color: var(--kf-muted);
}

.kluzko-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--kf-space-xs);
}

.kluzko-header__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--kf-tap);
	min-height: var(--kf-tap);
	color: inherit;
	text-decoration: none;
}

.kluzko-icon {
	width: 1.125rem;
	height: 1.125rem;
}

/* Hidden-zero counters (spec §3). */
.kluzko-count {
	position: absolute;
	top: 0.35rem;
	right: 0.3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.05rem;
	height: 1.05rem;
	padding: 0 0.25em;
	border-radius: 999px;
	background: var(--kf-canvas);
	color: var(--kf-ink);
	font-size: var(--kf-fs-3xs);
	font-weight: 600;
	line-height: 1;
}

.kluzko-count[hidden] {
	display: none;
}

/* Native product search, always present in the header (details/summary works
   with JS disabled). */
.kluzko-header__search-details {
	position: relative;
}

.kluzko-header__search-details > summary {
	list-style: none;
	cursor: pointer;
}

.kluzko-header__search-details > summary::-webkit-details-marker {
	display: none;
}

/* Native <details> applies an open-state foreground in the base/browser layer;
   keep the active magnifier visible on the dark header. */
.kluzko-header__search-details[open] > .kluzko-header__search {
	color: var(--kf-canvas);
	opacity: 1;
}

.kluzko-header__search-panel {
	position: absolute;
	top: calc(100% + var(--kf-space-2xs));
	right: 0;
	z-index: 40;
	min-width: min(22rem, 80vw);
	padding: var(--kf-space-sm);
	background: var(--kf-canvas);
	color: var(--kf-ink);
	border: var(--kf-hairline) solid var(--kf-line);
}

.kluzko-search-form__label {
	display: block;
	font-size: var(--kf-fs-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: var(--kf-space-2xs);
}

.kluzko-search-form__input {
	width: 100%;
	min-height: var(--kf-tap);
	padding: var(--kf-space-2xs) var(--kf-space-xs);
	font-size: var(--kf-fs-sm);
	border: var(--kf-hairline) solid var(--kf-line);
	background: var(--kf-canvas);
	color: inherit;
}

.kluzko-search-form__submit {
	margin-top: var(--kf-space-xs);
	width: 100%;
	min-height: var(--kf-tap);
	background: var(--kf-ink);
	color: var(--kf-canvas);
	border: 0;
	font-size: var(--kf-fs-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ==================================================================== *
 * §4 — side panel
 * ==================================================================== */
.kluzko-panel {
	position: fixed;
	inset: 0;
	z-index: 90;
}

.kluzko-panel[hidden] {
	display: none;
}

.kluzko-panel__scrim {
	position: absolute;
	inset: 0;
	background: var(--kf-scrim);
}

.kluzko-panel__sheet {
	position: relative;
	width: min(var(--kf-panel), 88vw);
	height: 100%;
	overflow-y: auto;
	background: var(--kf-chrome);
	color: var(--kf-canvas);
	padding: var(--kf-space-md);
	display: flex;
	flex-direction: column;
}

.kluzko-panel__view {
	display: none;
	flex-direction: column;
	gap: var(--kf-space-md);
	flex: 1;
}

.kluzko-panel__view.is-active {
	display: flex;
}

.kluzko-panel__view[hidden] {
	display: none;
}

.kluzko-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kf-space-xs);
}

.kluzko-panel__title,
.kluzko-panel__subtitle {
	font-size: var(--kf-fs-2xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kf-muted);
	margin: 0;
}

.kluzko-panel__close,
.kluzko-panel__back {
	min-height: var(--kf-tap);
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font-family: var(--kf-body);
	font-size: var(--kf-fs-xs);
	letter-spacing: 0.06em;
	padding: 0;
}

.kluzko-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.kluzko-panel__list--secondary {
	border-top: var(--kf-hairline) solid var(--kf-line-invert);
	padding-top: var(--kf-space-xs);
	margin-top: auto;
}

.kluzko-panel__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kf-space-xs);
	width: 100%;
	min-height: var(--kf-tap);
	padding: var(--kf-space-2xs) 0;
	background: none;
	border: 0;
	color: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	font-family: var(--kf-body);
	font-size: var(--kf-fs-sm);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.kluzko-panel__chevron {
	color: var(--kf-muted);
}

.kluzko-panel__socials {
	display: flex;
	gap: var(--kf-space-xs);
	padding-top: var(--kf-space-sm);
}

.kluzko-panel__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--kf-tap);
	min-height: var(--kf-tap);
	color: inherit;
}

/* ==================================================================== *
 * §5 — footer
 * ==================================================================== */
.kluzko-footer {
	background: var(--kf-chrome);
	color: var(--kf-canvas);
	padding: var(--kf-space-lg) var(--kf-space-md) var(--kf-space-md);
}

.kluzko-footer__top {
	max-width: var(--kf-maxw);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: var(--kf-space-md);
}

.kluzko-footer__logo {
	display: grid;
	gap: 0.12em;
	color: inherit;
	text-decoration: none;
	line-height: 1;
}

/* Spec §5: the footer wordmark is larger than the header one. */
.kluzko-footer__wordmark-main {
	font-family: var(--kf-display);
	font-size: var(--kf-fs-lg);
	letter-spacing: 0.2em;
	text-indent: 0.2em;
}

.kluzko-footer__wordmark-sub {
	font-family: var(--kf-body);
	font-size: var(--kf-fs-2xs);
	letter-spacing: 0.36em;
	text-indent: 0.36em;
	color: var(--kf-muted);
}

/* Spec §5: circular social icons, proportional to the logo. */
.kluzko-footer__socials {
	display: flex;
	gap: var(--kf-space-xs);
	margin-top: var(--kf-space-sm);
}

.kluzko-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(2.25rem, 2rem + 1vw, 2.75rem);
	height: clamp(2.25rem, 2rem + 1vw, 2.75rem);
	border: var(--kf-hairline) solid var(--kf-line-invert);
	border-radius: 50%;
	color: inherit;
}

.kluzko-footer__heading {
	font-family: var(--kf-body);
	font-size: var(--kf-fs-2xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kf-muted);
	margin: 0 0 var(--kf-space-xs);
}

.kluzko-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--kf-space-2xs);
}

.kluzko-footer__list a {
	color: inherit;
	text-decoration: none;
	font-size: var(--kf-fs-sm);
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
}

.kluzko-footer__list a:hover {
	text-decoration: underline;
}

.kluzko-footer__meta {
	max-width: var(--kf-maxw);
	margin: var(--kf-space-md) auto 0;
	padding-top: var(--kf-space-sm);
	border-top: var(--kf-hairline) solid var(--kf-line-invert);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kf-space-xs);
}

.kluzko-footer__copyright {
	margin: 0;
	font-size: var(--kf-fs-2xs);
	letter-spacing: 0.08em;
	color: var(--kf-muted);
}

.kluzko-footer__payments {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kf-space-2xs);
}

/* Card-network logomarks, not a checkout claim. The brand name stays on the
   chip as an accessible name only — the mark itself is the visible content. */
.kluzko-footer__payment {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0.4rem;
	border: var(--kf-hairline) solid var(--kf-line-invert);
	border-radius: 0.25rem;
	color: var(--kf-muted);
}

.kluzko-payment-icon {
	display: block;
	width: 2.25rem;
	height: 1.35rem;
}

/* Subscription (footer + popup + capsule). */
.kluzko-subscribe__title {
	font-family: var(--kf-body);
	font-size: var(--kf-fs-2xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kf-muted);
	margin: 0 0 var(--kf-space-xs);
}

.kluzko-subscribe__label {
	display: block;
	font-size: var(--kf-fs-3xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: var(--kf-space-2xs);
}

.kluzko-subscribe__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kf-space-2xs);
}

.kluzko-subscribe__input {
	flex: 1 1 10rem;
	min-height: var(--kf-tap);
	padding: 0 var(--kf-space-xs);
	font-size: var(--kf-fs-sm);
	background: transparent;
	color: inherit;
	border: var(--kf-hairline) solid var(--kf-line-invert);
}

.kluzko-footer .kluzko-subscribe__submit {
	border-color: var(--kf-canvas);
	background: var(--kf-canvas);
	color: var(--kf-ink);
}

.kluzko-subscribe__status {
	margin: var(--kf-space-2xs) 0 0;
	font-size: var(--kf-fs-2xs);
	min-height: 1.2em;
}

.kluzko-subscribe__status.is-error {
	color: #E6B8B8;
}

.kluzko-subscribe__status.is-ok {
	color: #BBD8BE;
}

/* Truthful "channel not connected yet" note. */
.kluzko-subscribe__note {
	margin: var(--kf-space-2xs) 0 0;
	font-size: var(--kf-fs-3xs);
	color: var(--kf-muted);
}

/* ==================================================================== *
 * §6 — home
 * ==================================================================== */
.kluzko-page {
	max-width: var(--kf-maxw);
	margin-inline: auto;
	padding-inline: var(--kf-space-md);
}

.kluzko-section {
	padding-block: var(--kf-space-xl);
}

.kluzko-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--kf-space-xs);
	margin-bottom: var(--kf-space-md);
}

.kluzko-section__title {
	font-size: var(--kf-fs-xl);
	margin: 0;
}

.kluzko-section__link {
	margin: 0;
	font-size: var(--kf-fs-xs);
	letter-spacing: 0.1em;
	text-transform: lowercase;
}

.kluzko-section__link a {
	color: inherit;
}

/* Hero: light-gray block inside the white page (spec §6). */
.kluzko-hero {
	background: var(--kf-hero);
	margin-top: var(--kf-space-md);
}

.kluzko-hero__inner {
	display: grid;
	gap: var(--kf-space-sm);
	max-width: 44rem;
	padding: var(--kf-space-xl) var(--kf-space-lg);
}

.kluzko-hero__badge {
	margin: 0;
	font-size: var(--kf-fs-2xs);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #6C6A63;
}

/* The home H1. A class selector outranks the bare `h1` token rule below, so the
   token has to be named here or the home page keeps a fifth H1 size (§0.1). */
.kluzko-hero__title {
	margin: 0;
	font-size: var(--font-h1);
}

.kluzko-hero__story {
	margin: 0;
	font-size: var(--kf-fs-md);
	max-width: 38ch;
}

.kluzko-hero__materials {
	margin: 0;
	font-size: var(--kf-fs-xs);
	letter-spacing: 0.06em;
	color: #55534D;
}

.kluzko-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kf-space-xs);
	margin-top: var(--kf-space-xs);
}

/* Shared reusable card (home §6, catalog §7, wishlist §12, PDP rail §8). */
.kluzko-grid {
	display: grid;
	gap: var(--kf-space-md);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) {
	.kluzko-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kluzko-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.kluzko-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.kluzko-card {
	display: flex;
	flex-direction: column;
	gap: var(--kf-space-xs);
}

.kluzko-card__image-wrap {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--kf-surface);
}

.kluzko-card__image-link,
.kluzko-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Spec §6: translucent top gradient so badge/heart stay legible on any photo. */
.kluzko-card__scrim,
.kluzko-pdp__scrim {
	position: absolute;
	inset: 0 0 auto 0;
	height: 40%;
	background: linear-gradient(to bottom, var(--kf-card-scrim), transparent);
	pointer-events: none;
}

.kluzko-card__badge-slot {
	position: absolute;
	top: var(--kf-space-xs);
	left: var(--kf-space-xs);
	z-index: 2;
}

.kluzko-card__wishlist-slot {
	position: absolute;
	top: var(--kf-space-2xs);
	right: var(--kf-space-2xs);
	z-index: 2;
}

.kluzko-wishlist {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--kf-tap);
	min-height: var(--kf-tap);
	background: none;
	border: 0;
	cursor: pointer;
	color: #FFFFFF;
}

.kluzko-wishlist--pdp {
	color: var(--kf-ink);
}

.kluzko-wishlist.is-active .kluzko-wishlist__icon path {
	fill: currentColor;
}

.kluzko-card__info {
	display: grid;
	gap: var(--kf-space-2xs);
	align-items: baseline;
}

.kluzko-card__title {
	margin: 0;
	font-family: var(--kf-body);
	font-size: var(--kf-fs-sm);
	font-weight: 500;
	line-height: 1.35;
}

.kluzko-card__title a {
	color: inherit;
	text-decoration: none;
}

.kluzko-card__price {
	font-size: var(--kf-fs-sm);
	color: #3B3936;
}

/* Instagram (spec §6).
   The section owns its own vertical rhythm because the homepage template wraps
   it in nothing: the shortcode returns '' while social surfaces are gated off,
   and an outer padded wrapper would leave a blank band behind. */
.kluzko-instagram {
	display: block;
	padding-block: var(--kf-space-xl);
}

.kluzko-instagram__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--kf-space-xs);
	margin-bottom: var(--kf-space-md);
}

.kluzko-instagram__title {
	font-family: var(--kf-display);
	font-size: var(--kf-fs-xl);
	margin: 0;
}

.kluzko-instagram__handle {
	font-size: var(--kf-fs-xs);
	letter-spacing: 0.06em;
	color: inherit;
}

.kluzko-instagram__grid {
	display: grid;
	gap: var(--kf-space-xs);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 48rem) {
	/* Spec §6: six columns on desktop. */
	.kluzko-instagram__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.kluzko-instagram__tile {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--kf-surface);
}

.kluzko-instagram__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Truthful unconfigured / stale state — never fabricated tiles. */
.kluzko-instagram__notice {
	font-size: var(--kf-fs-sm);
	color: #55534D;
	margin: 0 0 var(--kf-space-sm);
}

/* Subscription popup (spec §6). */
.kluzko-popup {
	position: fixed;
	inset: 0;
	z-index: 95;
	display: grid;
	place-items: center;
	padding: var(--kf-space-md);
}

.kluzko-popup[hidden] {
	display: none;
}

.kluzko-popup__scrim {
	position: absolute;
	inset: 0;
	background: var(--kf-scrim);
}

.kluzko-popup__panel {
	position: relative;
	width: min(30rem, 100%);
	padding: var(--kf-space-lg);
	background: var(--kf-canvas);
	color: var(--kf-ink);
}

.kluzko-popup__close {
	position: absolute;
	top: var(--kf-space-2xs);
	right: var(--kf-space-2xs);
	min-width: var(--kf-tap);
	min-height: var(--kf-tap);
	background: none;
	border: 0;
	cursor: pointer;
	font-size: var(--kf-fs-sm);
}

.kluzko-popup__eyebrow {
	margin: 0;
	font-size: var(--kf-fs-3xs);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #6C6A63;
}

.kluzko-popup__title {
	font-family: var(--kf-display);
	font-size: var(--kf-fs-lg);
	margin: var(--kf-space-2xs) 0 var(--kf-space-sm);
}

.kluzko-popup .kluzko-subscribe__input {
	border-color: var(--kf-line);
}

/* ==================================================================== *
 * §7 — catalog
 * ==================================================================== */
.kluzko-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kf-space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--kf-fs-2xs);
	letter-spacing: 0.06em;
	color: #6C6A63;
}

.kluzko-breadcrumbs__item + .kluzko-breadcrumbs__item::before {
	content: '/';
	margin-right: var(--kf-space-2xs);
	color: var(--kf-muted);
}

.kluzko-breadcrumbs__item a {
	color: inherit;
}

.kluzko-catalog__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--kf-space-xs);
	padding-block: var(--kf-space-md);
}

.kluzko-catalog__title {
	margin: 0;
	font-size: var(--font-h1);
}

.kluzko-filter-count {
	margin: 0;
	font-size: var(--kf-fs-xs);
	color: #6C6A63;
}

.kluzko-catalog__body {
	display: grid;
	gap: var(--kf-space-md);
	align-items: start;
}

@media (min-width: 62rem) {
	/* Spec §7: ~180px sidebar + three-column grid. */
	.kluzko-catalog__body {
		grid-template-columns: var(--kf-sidebar) minmax(0, 1fr);
		gap: var(--kf-space-lg);
	}
}

.kluzko-filters__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--kf-space-2xs);
	min-height: var(--kf-tap);
	padding: 0 var(--kf-space-sm);
	background: var(--kf-canvas);
	border: var(--kf-hairline) solid var(--kf-ink);
	font-family: var(--kf-body);
	font-size: var(--kf-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.kluzko-filters__trigger-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	border-radius: 999px;
	background: var(--kf-ink);
	color: var(--kf-canvas);
	font-size: var(--kf-fs-3xs);
}

.kluzko-filters__trigger-count[hidden],
.kluzko-filters__active[hidden],
.kluzko-filters__reset[hidden] {
	display: none;
}

.kluzko-filters__head {
	display: none;
}

.kluzko-filters__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kf-space-2xs);
	padding-bottom: var(--kf-space-xs);
	border-bottom: var(--kf-hairline) solid var(--kf-line);
	font-size: var(--kf-fs-2xs);
}

.kluzko-filters__reset {
	color: inherit;
}

.kluzko-filter {
	border: 0;
	margin: 0;
	padding: var(--kf-space-sm) 0;
	border-bottom: var(--kf-hairline) solid var(--kf-line);
}

.kluzko-filter__legend {
	padding: 0;
	font-size: var(--kf-fs-3xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #6C6A63;
}

/* The facet list is a dense rail, not a stack of buttons. The client review
   screenshots showed the rows floating apart because a list gap was stacked on
   top of a 2rem row box — a ~38px pitch inside the ~180px / 12px sidebar the
   spec §7 asks for. The row box now carries the whole rhythm: 28px of hit area
   plus a 2px hairline gap reads as one list at a 30px pitch, and the gap is
   deliberately smaller than the row so the box, not the void, is what grows if
   the UI scale is ever retuned. */
.kluzko-filter__list {
	list-style: none;
	margin: var(--kf-space-xs) 0 0;
	padding: 0;
	display: grid;
	gap: 0.125rem;
}

.kluzko-filter__option {
	display: flex;
	align-items: center;
	column-gap: 10px;
	/* Floor, not a fixed height: the whole label row stays the hit area, and a
	   label that wraps grows instead of clipping. */
	min-height: 1.75rem;
	font-size: var(--kf-fs-xs);
	cursor: pointer;
}

/* Browser checkbox margins used to add another 3px on top of the layout gap,
   so the label position depended on the user agent. Keep the approved spacing
   explicit and identical in the desktop rail and mobile filter sheet. */
.kluzko-filter__option > input[type="checkbox"] {
	margin: 0;
}

.kluzko-filter__option-count {
	margin-left: auto;
	color: var(--kf-muted);
	font-size: var(--kf-fs-3xs);
}

/* Category rows share the checkbox rows' rhythm — the two facet kinds sit in
   one rail and must not read as two different lists. */
.kluzko-filter__link {
	display: flex;
	align-items: center;
	min-height: 1.75rem;
	font-size: var(--kf-fs-xs);
	color: inherit;
	text-decoration: none;
}

.kluzko-filter__link.is-active {
	font-weight: 600;
	text-decoration: underline;
}

/* A category term that does not exist yet is inert, not a dead link. */
.kluzko-filter__link.is-unavailable {
	color: var(--kf-muted);
	cursor: not-allowed;
}

.kluzko-price-slider {
	position: relative;
	display: grid;
	margin-top: var(--kf-space-xs);
}

.kluzko-price-slider__range {
	width: 100%;
	accent-color: var(--kf-ink);
}

.kluzko-price-fields {
	display: flex;
	gap: var(--kf-space-2xs);
	margin-top: var(--kf-space-2xs);
}

.kluzko-price-field {
	display: flex;
	align-items: center;
	gap: 0.25em;
	/* Client TZ §1.5: the two fields share the row evenly and may shrink no
	   further than their content, so "9200" can never be clipped to "920(". */
	flex: 1 1 0;
	min-width: 0;
	font-size: var(--kf-fs-3xs);
}

/* The attribute selector is load-bearing, not decoration. The earlier
   kluzko.css layer sets `.woocommerce input[type="number"] { padding:14px 16px;
   font-size:14px }` at specificity 0,2,1; a bare `.kluzko-price-field input`
   is only 0,1,1 and loses outright, which is exactly why the previous attempt
   measured no change on staging. Matching 0,2,1 ties that rule and wins on
   source order, since functions.php enqueues kluzko-final.css after kluzko.css.
   It is also the narrower scope: every input in this row is a number input. */
.kluzko-price-field input[type="number"] {
	width: 100%;
	/* Four digits + the input's own horizontal padding. Expressed in ch so it
	   tracks the field's font size instead of assuming one. */
	min-width: 6ch;
	min-height: 2rem;
	/* Keep the native number editor's preferred width inside the narrow 180px
	   desktop filter rail. Chromium counts hidden spinner/caret reservation in
	   scrollWidth; 0.2em keeps four digits visible while reclaiming >5px versus
	   the previous 0.4em padding, without changing the field border box. */
	padding: 0 0.2em;
	font-size: var(--kf-fs-2xs);
	border: var(--kf-hairline) solid var(--kf-line);
	/* The native number spinner otherwise overlays the last digit. */
	appearance: textfield;
	-moz-appearance: textfield;
}

.kluzko-price-field input::-webkit-outer-spin-button,
.kluzko-price-field input::-webkit-inner-spin-button {
	display: none;
	margin: 0;
	-webkit-appearance: none;
}

.kluzko-price-bounds {
	margin: var(--kf-space-2xs) 0 0;
	font-size: var(--kf-fs-3xs);
	color: var(--kf-muted);
}

.kluzko-filters__actions {
	padding-top: var(--kf-space-sm);
}

.kluzko-filters__apply {
	width: 100%;
}

.kluzko-catalog__empty {
	display: grid;
	gap: var(--kf-space-sm);
	justify-items: start;
	padding-block: var(--kf-space-lg);
}

.kluzko-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kf-space-xs);
	list-style: none;
	margin: var(--kf-space-lg) 0 0;
	padding: 0;
	justify-content: center;
	font-size: var(--kf-fs-xs);
}

.kluzko-pagination__list a,
.kluzko-pagination__list span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 2.25rem;
	color: inherit;
	text-decoration: none;
	border: var(--kf-hairline) solid var(--kf-line);
}

/* Desktop: the sidebar is always visible and the sheet chrome is inert. */
@media (min-width: 62rem) {
	.kluzko-filters__trigger,
	.kluzko-filters__scrim {
		display: none;
	}

	.kluzko-filters__panel {
		position: static;
		width: auto;
		max-height: none;
		transform: none;
		background: transparent;
		padding: 0;
	}

	.kluzko-filters__apply {
		display: none;
	}
}

/* Mobile: the same single form becomes the bottom sheet (spec §7). */
@media (max-width: 61.9375rem) {
	.kluzko-filters__scrim {
		position: fixed;
		inset: 0;
		z-index: 80;
		background: var(--kf-scrim);
	}

	.kluzko-filters__scrim[hidden] {
		display: none;
	}

	.kluzko-filters__panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 85;
		max-height: 82vh;
		overflow-y: auto;
		padding: var(--kf-space-md);
		background: var(--kf-canvas);
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
		transform: translateY(100%);
		transition: transform 0.22s ease;
		visibility: hidden;
	}

	.kluzko-filters.is-open .kluzko-filters__panel {
		transform: translateY(0);
		visibility: visible;
	}

	.kluzko-filters__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--kf-space-xs);
		padding-bottom: var(--kf-space-xs);
	}

	.kluzko-filters__title {
		font-size: var(--kf-fs-2xs);
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: #6C6A63;
	}

	.kluzko-filters__close {
		min-width: var(--kf-tap);
		min-height: var(--kf-tap);
		background: none;
		border: 0;
		cursor: pointer;
	}
}

/* ==================================================================== *
 * §8 — PDP
 * ==================================================================== */
.kluzko-pdp__layout {
	display: grid;
	gap: var(--kf-space-lg);
	align-items: start;
	padding-block: var(--kf-space-md) var(--kf-space-xl);
}

@media (min-width: 62rem) {
	.kluzko-pdp__layout {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	}
}

.kluzko-pdp__gallery-col {
	position: relative;
}

.kluzko-pdp__media-overlay {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 3;
	pointer-events: none;
	padding: var(--kf-space-xs);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--kf-space-xs);
}

.kluzko-pdp__badge-slot,
.kluzko-pdp__media-actions {
	pointer-events: auto;
}

.kluzko-pdp__media-actions {
	display: flex;
	gap: var(--kf-space-2xs);
	margin-left: auto;
}

.kluzko-share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--kf-tap);
	min-height: var(--kf-tap);
	color: var(--kf-ink);
}

.kluzko-share.is-copied::after {
	content: 'Скопійовано';
	position: absolute;
	transform: translateY(2rem);
	font-size: var(--kf-fs-3xs);
	background: var(--kf-ink);
	color: var(--kf-canvas);
	padding: 0.2em 0.5em;
}

.kluzko-pdp__affordances {
	position: absolute;
	left: var(--kf-space-xs);
	bottom: var(--kf-space-xs);
	display: flex;
	gap: var(--kf-space-2xs);
	pointer-events: auto;
}

.kluzko-pdp__affordance {
	font-size: var(--kf-fs-3xs);
	letter-spacing: 0.08em;
	background: rgba(255, 255, 255, 0.9);
	color: var(--kf-ink);
	padding: 0.3em 0.6em;
	text-decoration: none;
}

/* Spec §8: main image plus at most four thumbnails. Overflow thumbs are
   hidden rather than replaced by empty tiles. */
.kluzko-pdp .flex-control-thumbs li:nth-child(n + 5),
.kluzko-pdp__thumb--overflow {
	display: none;
}

.kluzko-pdp__title {
	margin: 0;
	font-size: var(--font-h1);
}

.kluzko-pdp__price {
	font-size: var(--kf-fs-md);
	margin-block: var(--kf-space-2xs) var(--kf-space-sm);
}

.kluzko-pdp__urgency {
	margin: var(--kf-space-2xs) 0 var(--kf-space-xs);
	font-size: var(--kf-fs-xs);
	font-weight: 500;
	color: #7A1F2B;
}

.kluzko-pdp__size-guide {
	font-size: var(--kf-fs-2xs);
	letter-spacing: 0.06em;
	color: inherit;
}

/* Round size choices over the native variation select (spec §8). */
.kluzko-pdp .kluzko-size,
.kluzko-pdp .kluzko-size--static {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--kf-tap);
	min-height: var(--kf-tap);
	border: var(--kf-hairline) solid var(--kf-line);
	border-radius: 50%;
	font-size: var(--kf-fs-2xs);
	letter-spacing: 0.06em;
}

/* The one-size chip carries no axis label, so pin it to a true circle: equal
   width and height with no inline padding, or the shared chip renders oval. */
.kluzko-pdp__one-size .kluzko-size--static {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--kf-tap);
	min-width: var(--kf-tap);
	height: var(--kf-tap);
	min-height: var(--kf-tap);
	padding-inline: 0;
}

/* "Купити зараз" — colour only; the button stays Woo's own submit, and its box
   (48px / 13px / 1.2px / 0 28px / 6px) belongs to the §0.2 component further
   down this file. The full-width, zero-radius, 0.1em version that used to live
   here contradicted that contract on every property it shared. */
.kluzko-pdp__atc button[type='submit'],
.kluzko-pdp .single_add_to_cart_button {
	background: var(--kf-ink);
	color: var(--kf-canvas);
	text-transform: uppercase;
}

.kluzko-pdp__accordions {
	margin-top: var(--kf-space-md);
	border-top: var(--kf-hairline) solid var(--kf-line);
}

.kluzko-acc {
	border-bottom: var(--kf-hairline) solid var(--kf-line);
}

.kluzko-acc__summary {
	display: flex;
	align-items: center;
	min-height: var(--kf-tap);
	cursor: pointer;
	font-size: var(--kf-fs-xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	list-style: none;
}

.kluzko-acc__summary::-webkit-details-marker {
	display: none;
}

.kluzko-acc__summary::after {
	content: '+';
	margin-left: auto;
	font-size: var(--kf-fs-md);
	line-height: 1;
}

.kluzko-acc[open] > .kluzko-acc__summary::after {
	content: '−';
}

.kluzko-acc__body {
	padding-bottom: var(--kf-space-sm);
	font-size: var(--kf-fs-sm);
}

.kluzko-pdp__related {
	padding-block: var(--kf-space-xl);
	border-top: var(--kf-hairline) solid var(--kf-line);
}

.kluzko-pdp__related-heading {
	font-family: var(--kf-display);
	font-size: var(--kf-fs-lg);
	margin: 0 0 var(--kf-space-md);
}

/* ==================================================================== *
 * §9 — badge pills (monochrome, no accent colours)
 * ==================================================================== */
.kluzko-badge {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 0.35em 0.85em;
	font-family: var(--kf-body);
	font-size: var(--kf-fs-3xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1;
	white-space: nowrap;
}

.kluzko-badge--bestseller,
.kluzko-badge--sale {
	background: var(--kf-ink);
	color: #FFFFFF;
	border: var(--kf-hairline) solid var(--kf-ink);
}

.kluzko-badge--new-capsule,
.kluzko-badge--last-sizes {
	background: var(--kf-surface);
	color: var(--kf-ink);
	border: var(--kf-hairline) solid var(--kf-ink);
}

.kluzko-badge--handmade {
	background: transparent;
	color: currentColor;
	border: var(--kf-hairline) solid currentColor;
}

/* Over a photo the transparent variant inherits white from the card scrim. */
.kluzko-card__badge-slot .kluzko-badge--handmade,
.kluzko-pdp__badge-slot .kluzko-badge--handmade {
	color: #FFFFFF;
}

/* ==================================================================== *
 * §10 — collections
 * ==================================================================== */
.kluzko-capsule {
	padding-block: var(--kf-space-lg);
}

.kluzko-capsule--current {
	background: var(--kf-hero);
	padding: var(--kf-space-lg);
	display: grid;
	gap: var(--kf-space-sm);
	justify-items: start;
}

.kluzko-capsule__badge {
	margin: 0;
	font-size: var(--kf-fs-2xs);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #6C6A63;
}

.kluzko-capsule__title {
	margin: 0;
	font-family: var(--kf-display);
	font-size: var(--kf-fs-xl);
}

.kluzko-capsule__story {
	font-size: var(--kf-fs-base);
	max-width: 60ch;
}

/* Soft date wording — deliberately not styled as a hard deadline. */
.kluzko-capsule__date {
	margin: 0;
	font-size: var(--kf-fs-xs);
	color: #55534D;
	font-style: italic;
}

/* Spec §10: dashed frame on the "Скоро" block. */
.kluzko-capsule--upcoming {
	border: 1px dashed var(--kf-ink);
	padding: var(--kf-space-lg);
	display: grid;
	gap: var(--kf-space-xs);
	justify-items: start;
}

.kluzko-capsule--upcoming .kluzko-subscribe__input {
	border-color: var(--kf-line);
}

.kluzko-capsule--upcoming .kluzko-subscribe__status.is-error {
	color: #7A1F2B;
}

.kluzko-capsule--upcoming .kluzko-subscribe__status.is-ok {
	color: #2F5D34;
}

.kluzko-capsule-archive {
	padding-block-end: var(--kf-space-lg);
}

.kluzko-capsule-archive__title {
	font-family: var(--kf-display);
	font-size: var(--kf-fs-lg);
	margin: var(--kf-space-lg) 0 var(--kf-space-md);
}

.kluzko-capsule-card {
	display: grid;
	gap: var(--kf-space-2xs);
	padding: var(--kf-space-md);
	background: var(--kf-surface);
}

.kluzko-capsule-card__title {
	margin: 0;
	font-family: var(--kf-display);
	font-size: var(--kf-fs-md);
}

.kluzko-capsule-card__title a {
	color: inherit;
	text-decoration: none;
}

.kluzko-capsule-card__status {
	margin: 0;
	font-size: var(--kf-fs-3xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.kluzko-capsule-card__status--soldout {
	color: #6C6A63;
}

/* ==================================================================== *
 * §11 — brand
 * ==================================================================== */
.kluzko-brand__section {
	padding-block: var(--kf-space-lg);
	border-bottom: var(--kf-hairline) solid var(--kf-line);
	display: grid;
	gap: var(--kf-space-sm);
	max-width: 60rem;
}

.kluzko-brand__title {
	margin: 0;
	font-size: var(--font-h1);
}

.kluzko-brand__heading {
	margin: 0;
	font-family: var(--kf-display);
	font-size: var(--kf-fs-lg);
}

/* ==================================================================== *
 * §12 — account
 * ==================================================================== */
.kluzko-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--kf-space-2xs);
}

.kluzko-account .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-height: var(--kf-tap);
	padding: 0 var(--kf-space-xs);
	color: inherit;
	text-decoration: none;
	font-size: var(--kf-fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-left: 2px solid transparent;
}

.kluzko-account .woocommerce-MyAccount-navigation .is-active a,
.kluzko-account .woocommerce-MyAccount-navigation-link.is-active a {
	border-left-color: var(--kf-ink);
	font-weight: 600;
	background: var(--kf-surface);
}

.kluzko-orders {
	display: grid;
	gap: var(--kf-space-md);
}

.kluzko-order {
	display: grid;
	grid-template-columns: clamp(4.5rem, 4rem + 5vw, 7.5rem) minmax(0, 1fr);
	gap: var(--kf-space-sm);
	padding: var(--kf-space-sm);
	background: var(--kf-surface);
}

.kluzko-order__img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.kluzko-order__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kf-space-2xs);
}

.kluzko-order__number {
	margin: 0;
	font-family: var(--kf-body);
	font-size: var(--kf-fs-sm);
	font-weight: 600;
}

.kluzko-order__status {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 0.3em 0.8em;
	border: var(--kf-hairline) solid var(--kf-ink);
	font-size: var(--kf-fs-3xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.kluzko-order__status--completed,
.kluzko-order__status--kluzko-shipped {
	background: var(--kf-ink);
	color: var(--kf-canvas);
}

.kluzko-order__status--cancelled,
.kluzko-order__status--refunded {
	color: #6C6A63;
	border-color: var(--kf-muted);
}

.kluzko-order__contents,
.kluzko-order__total {
	margin: var(--kf-space-2xs) 0 0;
	font-size: var(--kf-fs-xs);
}

.kluzko-order__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kf-space-2xs);
	margin-top: var(--kf-space-xs);
}

.kluzko-orders-empty,
.kluzko-wishlist-empty {
	display: grid;
	gap: var(--kf-space-xs);
	justify-items: center;
	text-align: center;
	padding: var(--kf-space-xl) var(--kf-space-md);
	background: var(--kf-surface);
}

.kluzko-wishlist-empty__icon {
	color: var(--kf-muted);
}

.kluzko-orders-empty__title,
.kluzko-wishlist-empty__title {
	margin: 0;
	font-family: var(--kf-display);
	font-size: var(--kf-fs-lg);
}

.kluzko-orders-empty__body,
.kluzko-wishlist-empty__body {
	margin: 0;
	font-size: var(--kf-fs-sm);
	max-width: 40ch;
	color: #55534D;
}

/* ==================================================================== *
 * §1 — inner-page canvas for cart and checkout
 *
 * The base layer paints both pages with `--kluzko-bg` (#EFEBE4), the warm
 * page ground used by the home/landing surfaces. Spec §1 reserves that
 * ground for the marketing pages and puts the transactional inner pages on
 * white, which is also what makes the deliberate warm-grey accents inside
 * them (the `--kluzko-surface` #F8F7F4 order-summary sidebar and cart card)
 * read as raised surfaces rather than as the page itself.
 *
 * Scope is exactly the outer canvas. The accent surfaces above and every
 * native WooCommerce state machine — buttons, inputs, notices, validation —
 * are deliberately left to the base layer and to Woo.
 * ==================================================================== */
.kluzko-cart-page,
.kluzko-checkout-page {
	background: #fff;
}

/* An empty cart is the same inner page and renders its own block-level
   panel, so it has to inherit the same canvas instead of falling back to
   the warm ground behind it. */
.kluzko-cart-page .wc-block-cart__empty-cart,
.kluzko-checkout-page .wc-block-cart__empty-cart {
	background: #fff;
}

/* ==================================================================== *
 * §3.1 — mobile header ownership
 *
 * `wpautop` wraps the wishlist/account/cart anchors inside
 * `.kluzko-header__actions` in a `<p>`, so the actions row becomes
 * DETAILS + P: the three anchors stack under the search control and the
 * header children spill below the 60px bar. `display: contents` restores
 * the anchors as direct flex children without depending on the wrapper
 * being present or absent.
 * ==================================================================== */
/* Mobile only — desktop (>= 782px) geometry is untouched. */
@media (max-width: 48.8125rem) {
	.kluzko-header__actions > p {
		display: contents;
		margin: 0;
		padding: 0;
	}

	.kluzko-header__inner {
		height: 60px;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		gap: 4px;
		padding-block: 0;
		padding-inline: 8px;
	}

	/* Hamburger keeps a full 44px tap target, and spec §3 wants the word
	   «Меню» beside it at every viewport — the label is a legibility
	   affordance, not a desktop-only decoration, so it stays. 44px is the
	   floor of the button, not its budget: the label sits next to the icon
	   inside a wider box. */
	.kluzko-header__menu {
		justify-content: flex-start;
		min-width: var(--kf-tap);
		padding: 0;
	}

	/* One step down from the 12px desktop cap so «Меню» plus the icon still
	   fit the narrow side track below; nowrap because a wrapped label would
	   grow the header row rather than the button. */
	.kluzko-header__menu-label {
		display: inline;
		font-size: 11px;
		white-space: nowrap;
	}

	/* The earlier layer sizes the wordmark as a fixed 86x32 logo box; the
	   final markup is a two-line text lockup, so reclaim intrinsic size. */
	.kluzko-header__wordmark {
		width: auto;
		height: auto;
		min-height: var(--kf-tap);
		align-content: center;
		line-height: 1;
		gap: 0.15em;
	}

	.kluzko-header__wordmark-main {
		font-size: 13px;
		letter-spacing: 0.16em;
		text-indent: 0.16em;
	}

	.kluzko-header__wordmark-sub {
		font-size: 7px;
		letter-spacing: 0.26em;
		text-indent: 0.26em;
	}

	.kluzko-header__actions {
		gap: 0;
		flex-wrap: nowrap;
	}

	.kluzko-header__search-details {
		flex: 0 0 auto;
	}

	/* The four-action mobile header places search in a centred second row.
	   Anchor the disclosure to the viewport instead of that 44px summary box;
	   otherwise a 22rem panel starts off-screen to the left at 320–390px. */
	.kluzko-header__search-panel {
		position: fixed;
		top: var(--kluzko-header-height, 64px);
		left: var(--kf-space-md);
		right: var(--kf-space-md);
		width: auto;
		min-width: 0;
	}

	/* Tap targets are a floor, never a budget: no breakpoint below is allowed
	   to trade width away from 44px. Where the row runs out of space we change
	   the geometry (see the two-row band below), not the target size. */
	.kluzko-header__icon {
		flex: 0 0 auto;
		min-width: var(--kf-tap);
		min-height: var(--kf-tap);
	}

	.kluzko-icon {
		width: 1rem;
		height: 1rem;
	}
}

/* ==================================================================== *
 * §3.2 — desktop header ownership of the same wpautop wrappers
 *
 * The 2026-08-25 independent live audit measured the desktop bar at exactly
 * 64px while the menu/cart 44px hit boxes ended at 72.75px and the wordmark at
 * 67.75px. Cause: `wpautop` wraps the wordmark anchor directly inside
 * `.kluzko-header__inner` and the cart anchor inside `.kluzko-header__actions`,
 * and WordPress' global paragraph styles give both wrappers ~17px block
 * margins. In the actions flex row those margins make the wrapper 78px tall,
 * which grows the header grid row to 78px and pushes every centred control
 * below the 64px band.
 *
 * §3.1 already neutralises the actions wrapper below 782px; this is the same
 * normalisation for the widths §3.1 deliberately leaves alone, plus the
 * wordmark wrapper. `display: contents` promotes the anchors back to being
 * direct grid/flex children, so nothing here trades away a 44px target,
 * changes the 64px contract height, hides a control or clips overflow — the
 * wrapper simply stops contributing box geometry it was never meant to have.
 * ==================================================================== */
@media (min-width: 48.875rem) {
	.kluzko-header__inner > p,
	.kluzko-header__actions > p {
		display: contents;
		margin: 0;
		padding: 0;
	}
}

/* ==================================================================== *
 * Narrow phones (<= 440px) — two-row header.
 *
 * One row cannot hold menu (44) + centred wordmark + four 44px actions
 * inside 320-440px, so the bar splits: row 1 carries the hamburger and a
 * truly centred wordmark; row 2 carries all four actions, centred, at full
 * size. Nothing is hidden and nothing shrinks.
 * ==================================================================== */
@media (max-width: 27.5rem) {
	.kluzko-header {
		height: 104px;
	}

	.kluzko-header__inner {
		--kf-header-side: 68px;
		height: 104px;
		grid-template-columns: var(--kf-header-side) minmax(0, 1fr) var(--kf-header-side);
		grid-template-rows: 52px 52px;
		gap: 0;
		padding-inline: 8px;
	}

	.kluzko-header__left {
		grid-row: 1;
		grid-column: 1;
	}

	.kluzko-header__wordmark {
		grid-row: 1;
		grid-column: 2;
		align-content: center;
		min-height: var(--kf-tap);
	}

	.kluzko-header__actions {
		grid-row: 2;
		grid-column: 1 / -1;
		justify-content: center;
		gap: 8px;
	}

	.kluzko-header__wordmark-main {
		font-size: 14px;
	}

	.kluzko-header__wordmark-sub {
		font-size: 8px;
	}

	body,
	body.home {
		--kluzko-header-height: 104px;
		padding-top: var(--kluzko-header-height);
	}
}


/* ==================================================================== *
 * Motion safety
 * ==================================================================== */
@media (prefers-reduced-motion: reduce) {
	.kluzko-filters__panel,
	.kluzko-btn {
		transition: none;
	}
}

/* ==================================================================== *
 * Client TZ Фаза 0 — reusable components
 *
 * This block is deliberately last: it is the single authority for the button,
 * the page header and the page H1, so no earlier page-specific layer can
 * reintroduce the drift the client audit found (three buttons, four H1 sizes).
 * ==================================================================== */

/* ── §0.1 typography scale ── */
h1,
.h1 {
	font-family: var(--kf-display);
	font-size: var(--font-h1);
	font-weight: 400;
}

h2,
.h2 {
	font-family: var(--kf-display);
	font-size: var(--font-h2);
	font-weight: 400;
}

h3,
.h3 {
	font-family: var(--kf-body);
	font-size: var(--font-h3);
	font-weight: 500;
}

/* Every page H1, including the ones whose own layer used to size them. The
   selectors are listed explicitly rather than hidden behind a bare `h1` so a
   future page cannot silently opt out. */
.kluzko-catalog__title,
.kluzko-pdp__title,
.kluzko-brand__title,
.kluzko-collections__title,
.kluzko-account__title {
	font-size: var(--font-h1);
}

/* ── §0.2 button component ──
   One contract, applied to the named CTA surfaces. Woo's cart and checkout
   buttons are deliberately NOT in this list: they stay native, so their own
   block styles and states keep working. */
.btn,
.kluzko-btn,
.kluzko-pdp .single_add_to_cart_button,
.kluzko-pdp__atc button[type='submit'],
.kluzko-account .woocommerce-form-login button[type='submit'],
.kluzko-account .woocommerce-form-register button[type='submit'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	font-family: 'Montserrat', var(--kf-body);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	height: 48px;
	min-height: 48px;
	padding: 0 28px;
	border-radius: 6px;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Width is always content + padding, never a pinned number — this is what stops
   "Купити зараз" wrapping onto a second line. The PDP CTA carried an explicit
   width/flex-basis from the older layers; both are released here. */
.kluzko-pdp .single_add_to_cart_button,
.kluzko-pdp__atc button[type='submit'],
.kluzko-pdp__atc .single_add_to_cart_button {
	width: auto;
	flex: 0 0 auto;
}

.btn--primary,
.kluzko-btn--fill,
.kluzko-pdp .single_add_to_cart_button,
.kluzko-pdp__atc button[type='submit'],
.kluzko-account .woocommerce-form-login button[type='submit'],
.kluzko-account .woocommerce-form-register button[type='submit'] {
	background: #1A1A1A;
	color: #F8F7F4;
	border: none;
}

.btn--primary:hover,
.kluzko-btn--fill:hover,
.kluzko-pdp .single_add_to_cart_button:hover,
.kluzko-account .woocommerce-form-login button[type='submit']:hover {
	opacity: 0.85;
	background: #1A1A1A;
}

.btn--secondary,
.kluzko-btn--outline {
	background: transparent;
	color: #1A1A1A;
	border: 1px solid #1A1A1A;
}

.btn--secondary:hover,
.kluzko-btn--outline:hover,
.btn--secondary:focus-visible,
.kluzko-btn--outline:focus-visible {
	background: #1A1A1A;
	color: #F8F7F4;
}

/* Disabled and loading semantics are preserved, not restyled away: Woo drives
   both on the add-to-cart submit and reads them back after AJAX. */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled='true'],
.kluzko-btn:disabled,
.kluzko-pdp .single_add_to_cart_button:disabled,
.kluzko-pdp .single_add_to_cart_button.disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.btn.loading,
.kluzko-btn.loading,
.kluzko-pdp .single_add_to_cart_button.loading {
	/* Woo paints its own spinner through ::after and dims the label; leave both
	   alone and only stop a second submit. */
	pointer-events: none;
}

/* Both named CTAs are Woo submits, so WordPress also stamps them with
   `wp-element-button` — and kluzko.css pins
   `.wp-element-button, .wp-block-button__link { border-radius: 0 !important }`.
   An `!important` declaration outranks every normal one regardless of
   specificity or source order, so the component's plain `6px` lost and the
   buttons computed 0px at 375/768/1440. Radius is the ONLY property in that
   generic rule marked important, so it is the only one restated here, and only
   for the surfaces §0.2 already names — Woo's cart and checkout chrome keeps
   its own zero-radius treatment untouched. */
.btn,
.kluzko-btn,
.kluzko-pdp .single_add_to_cart_button,
.kluzko-pdp__atc button[type='submit'],
.kluzko-account .woocommerce-form-login button[type='submit'],
.kluzko-account .woocommerce-form-register button[type='submit'] {
	border-radius: 6px !important;
}

/* ── §0.3 page header ── */
.page-header {
	padding-top: 48px;
	padding-bottom: 24px;
}

.page-header .breadcrumbs {
	font-size: var(--font-small);
	color: #5F5E5A;
	margin-bottom: 12px;
}

.page-header .breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.page-header .breadcrumbs a:hover {
	text-decoration: underline;
}

.page-header .kluzko-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5ch;
	list-style: none;
	margin: 0;
	padding: 0;
}

.page-header .kluzko-breadcrumbs__item + .kluzko-breadcrumbs__item::before {
	content: '/';
	margin-right: 0.5ch;
}

.page-header h1 {
	margin: 0;
}

/* The PDP title is the one page H1 that carries summary-column baggage from
   kluzko.css: a 6px bottom margin pinned with !important and the 520px measure
   that column needed. Neither applies now that §0.3 puts it in the shared
   header, so scope both off here rather than editing the older layer. */
.page-header .kluzko-pdp__title {
	margin: 0 !important;
	max-width: none;
}

/* ── §0.5 the /shop/ grid ──
   The archive template renders [kluzko_catalog_grid] (inc/catalog.php), whose
   output is one <div class="kluzko-grid kluzko-grid--3 kluzko-catalog__grid">
   holding <article class="kluzko-card"> children directly. There is no
   `.wc-block-product-template` on this page, so the block-path flex rules in
   kluzko.css / kluzko-catalog-rebuild.css never reach it and it stayed a CSS
   grid. Those rules are kept as-is: they still own the block path (home
   arrivals, PDP related rail) and any archive that does render the block.

   The reason a grid cannot satisfy the clause: three tracks of
   (100% - 2*gap)/3 plus two gaps consume exactly 100%, leaving zero free
   inline space, so `justify-content: center` is a no-op and a lone last card
   sits in column 1. A wrapping flex line whose short last line is genuinely
   narrower than the container is what actually centres it. */
.kluzko-catalog__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	/* Neutralize the .kluzko-grid tracks this element also carries. */
	grid-template-columns: none;
	gap: var(--kf-space-md);
}

/* The basis is the exact 1fr equivalent, so a complete row still spans the
   container edge to edge — nothing moves for full rows. Two columns is the
   .kluzko-grid base; three arrives at the same 48rem breakpoint --3 uses, so
   the column count at every width is unchanged. */
.kluzko-catalog__grid > .kluzko-card {
	flex: 0 0 calc((100% - 1 * var(--kf-space-md)) / 2);
	max-width: calc((100% - 1 * var(--kf-space-md)) / 2);
	min-width: 0;
	margin: 0;
}

@media (min-width: 48rem) {
	.kluzko-catalog__grid > .kluzko-card {
		flex: 0 0 calc((100% - 2 * var(--kf-space-md)) / 3);
		max-width: calc((100% - 2 * var(--kf-space-md)) / 3);
	}
}

/* ==================================================================== *
 * §13 — 2026-08-25 production visual remediation (V-01, V-03, V-04, V-07)
 *
 * Deliberately the last block in the last stylesheet: every rule here
 * settles a conflict between two earlier layers, so it has to be the one
 * that wins on source order.
 * ==================================================================== */

/* ── V-01 — PDP "Доповни образ" rail ──
   The rail markup carries BOTH `.kluzko-grid --4` (this file) and
   `.kluzko-pdp__related-grid` (kluzko.css). Equal specificity, and this file
   loads second, so `.kluzko-grid { display: grid }` beat kluzko.css's
   `display: flex` — while kluzko.css's per-card
   `max-width: calc((100% - 3 * 24px) / 4)` kept applying. In a flex line that
   `100%` is the whole line; in a grid item it is the TRACK, so each card was
   capped at a quarter of an already-quartered column and collapsed to ~56px
   at 1920px, with the title/price info grid overlapping inside it.

   The rail is restated here as the flex line kluzko.css always intended, and
   the card basis is restated with it so the two can no longer be read from
   different layout models. Same approach as `.kluzko-catalog__grid` above. */
.kluzko-grid.kluzko-pdp__related-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	grid-template-columns: none;
	gap: var(--kf-space-md);
}

/* Two columns is the mobile base — the same count the audit found readable. */
.kluzko-grid.kluzko-pdp__related-grid > .kluzko-card,
.kluzko-grid.kluzko-pdp__related-grid > li {
	flex: 0 0 calc((100% - 1 * var(--kf-space-md)) / 2);
	max-width: calc((100% - 1 * var(--kf-space-md)) / 2);
	min-width: 0;
	margin: 0;
}

@media (min-width: 48rem) {
	.kluzko-grid.kluzko-pdp__related-grid > .kluzko-card,
	.kluzko-grid.kluzko-pdp__related-grid > li {
		flex: 0 0 calc((100% - 3 * var(--kf-space-md)) / 4);
		max-width: calc((100% - 3 * var(--kf-space-md)) / 4);
	}
}

/* The card info row is a two-column grid (title | price). At a genuine card
   width the two never meet; this only stops them sharing a line when a long
   Ukrainian product name wraps. */
.kluzko-pdp__related-grid .kluzko-card__title {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ── V-03 — home hero campaign panel ──
   Text column left, real media right on desktop; stacked on mobile. The
   modifier is added by the shortcode ONLY when an image actually resolved, so
   a store with no usable media keeps the previous single-column hero instead
   of reserving an empty half. */
/* The copy column keeps the rhythm `.kluzko-hero__inner` used to give its
   direct children, now that they sit one level deeper. Applied with and
   without media so the two hero shapes cannot drift. */
.kluzko-hero__copy {
	display: grid;
	gap: var(--kf-space-sm);
	align-content: start;
	min-width: 0;
}

/* Restored 2026-08-25: the owner confirmed the blank right half of the shipped
   hero is the prototype's media slot, so `inc/collections.php` renders the
   resolver's output again and these rules are reachable once more. They apply
   only under `.kluzko-hero--has-media`, which the shortcode emits solely when
   an existing attachment resolved — a store with no usable photography keeps
   the single text column and never reserves an empty half. */
.kluzko-hero--has-media .kluzko-hero__inner {
	gap: var(--kf-space-md);
	align-items: center;
	/* Released from the 44rem measure the text-only hero needs: with a media
	   column the block spans the page width like the rest of the home grid. */
	max-width: var(--kf-maxw);
	margin-inline: auto;
}

@media (min-width: 56.25rem) {
	.kluzko-hero--has-media .kluzko-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--kf-space-lg);
	}
}

.kluzko-hero__media {
	margin: 0;
	overflow: hidden;
	background: var(--kf-surface);
}

.kluzko-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	/* Design packet «Hero»: campaign image ratio 4 / 5. */
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* ── V-04 / KWS-05 — top spacing under the fixed header, at every width ──
   `templates/page.html` renders post-content as the FIRST child of
   `main.kluzko-page`, with no `.page-header` band to carry the 48px it
   provides elsewhere. Under a fixed bar that puts the utility-page H1 flush
   against the header's lower edge.

   This was originally scoped to a mobile media query because the audit that
   found it only measured phones. The 2026-08-25 whole-site audit then measured
   the SAME defect on desktop — `/delivery/`, `/returns/`, `/size-guide/` and
   `/care/` all place the H1 at exactly y=64px, the header's own bottom edge,
   while mobile sat at a comfortable y≈96.6px. The cause was never viewport
   dependent, so neither is the fix: the media query is removed rather than
   duplicated, which is also what stops the two bands drifting apart again.

   Still scoped to the first-child case, so pages that DO open with a
   `.page-header` band are not double-padded. */
.kluzko-page > .wp-block-post-content:first-child,
.kluzko-page > .entry-content:first-child {
	padding-top: var(--kf-space-lg);
}

/* Generic utility pages come from editor content whose block margins may be
   serialized as zero. Keep headings and body copy from sharing a baseline. */
.kluzko-page > .wp-block-post-content:first-child > h1,
.kluzko-page > .entry-content:first-child > h1 {
	margin-bottom: var(--kf-space-xs);
}

.kluzko-page > .wp-block-post-content:first-child > h2,
.kluzko-page > .entry-content:first-child > h2 {
	margin-top: var(--kf-space-sm);
	margin-bottom: var(--kf-space-2xs);
}

/* ── V-07 — side-panel navigation hierarchy ──
   Design packet §Header/navigation: "nav links rendered as large display
   serif items". The panel shipped compact 500-weight grotesk rows. */
.kluzko-panel__list .kluzko-panel__link {
	font-family: var(--kf-display);
	font-weight: 400;
	font-size: var(--kf-fs-lg);
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-transform: none;
}

/* The account / wishlist block under the rule is deliberately one step down:
   it is secondary access, not the primary hierarchy. */
.kluzko-panel__list--secondary .kluzko-panel__link {
	font-size: var(--kf-fs-md);
}

.kluzko-panel__chevron {
	font-family: var(--kf-body);
	font-size: var(--kf-fs-md);
}

/* The wishlist counter moved here with the control it belongs to (V-06). It
   is an inline pill in the panel row, not the absolute badge it is on a
   header icon. */
.kluzko-panel__link .kluzko-count {
	position: static;
	margin-left: var(--kf-space-2xs);
	font-family: var(--kf-body);
	font-size: var(--kf-fs-3xs);
}

/* ── V-02 — provisional page body ──
   Styled as ordinary finished prose, exactly like `.kluzko-fallback-copy`:
   the copy is true and safe to leave live, so a draft-ribbon treatment would
   make a real page look broken. The provisional marker is the data attribute,
   which paints nothing and is what an owner audit queries. */
.kluzko-demo-content {
	max-width: 46rem;
	padding-block: var(--kf-space-lg);
}

.kluzko-demo-content__section + .kluzko-demo-content__section {
	margin-top: var(--kf-space-md);
}

.kluzko-demo-content__title {
	margin: 0 0 var(--kf-space-md);
}

.kluzko-demo-content__heading {
	margin: 0 0 var(--kf-space-xs);
}

.kluzko-demo-content p {
	margin: 0 0 var(--kf-space-xs);
	font-size: var(--kf-fs-base);
	line-height: 1.7;
}

.kluzko-demo-content p:last-child {
	margin-bottom: 0;
}

/* ── V-06 — one 64px bar on every phone and small tablet ──
   kluzko.css shrinks the header to 60px below 900px and zeroes home's
   compensating padding; both were written for a bar that had to hold six
   controls. The contract bar is 64px, so header, inner row and the flow
   padding that pays for the fixed positioning are pinned together here — one
   block, matching kluzko.css's own 900px breakpoint, so the three can never
   again be true at different widths. */
@media (max-width: 56.25rem) {
	.kluzko-header {
		height: var(--kluzko-header-height, 64px);
	}

	.kluzko-header__inner {
		height: var(--kluzko-header-height, 64px);
	}

	body,
	body.home {
		--kluzko-header-height: 64px;
		padding-top: var(--kluzko-header-height);
	}
}

/* Final TZ §3 and the approved mobile reference keep all four action targets.
   Below 440px they occupy a second row; this later rule intentionally wins over
   the small-tablet 64px ownership block above. */
@media (max-width: 27.5rem) {
	.kluzko-header,
	.kluzko-header__inner {
		height: var(--kluzko-header-height);
	}

	body,
	body.home {
		--kluzko-header-height: 104px;
	}
}

/* ==================================================================== *
 * 2026-08-25 whole-site read-only production audit — KWS-04/06/07
 *
 * Three presentation defects that share one property: each is a surface the
 * design system already defines for the rest of the site and that exactly one
 * template or state was never opted into. So each fix below reuses the
 * existing token rather than introducing a parallel value.
 * ==================================================================== */

/* ── KWS-04 — Search and 404 keep the site's horizontal gutter ──
   Both templates render a `constrained` inner (620px / 600px) inside a `main`
   that declares no inline padding. Above those widths the constraint supplies
   the inset; at 390px it resolves to the full viewport, so the eyebrow, the H1,
   the form edges and the submit button all sat at or within a pixel of x=0
   while every other page held a 20px+ inset. There was no document overflow —
   the content was simply cramped against both edges.

   `.kluzko-page` already owns the shared inset for ordinary pages; these two
   mains are the same kind of surface and now read the same token, so the three
   cannot drift apart. --kf-space-md clamps 20px → 32px, which is the mobile
   inset the audit measured elsewhere on the site and the desktop one the
   catalog uses. */
.kluzko-404,
.kluzko-search-page {
	padding-inline: var(--kf-space-md);
}

/* KWS-05, second surface: search leads with an eyebrow rather than
   post-content, so the `.kluzko-page` first-child rule above cannot reach it
   and its eyebrow pinned to the header's bottom edge at y=64px exactly as the
   utility H1s did. Same clearance, expressed on the template that needs it. */
.kluzko-search-page {
	padding-block-start: var(--kf-space-lg);
}

/* ── KWS-07 — a short 404 closes the viewport ──
   kluzko.css already gives desktop a sticky footer by making the FSE root a
   flex column and letting the page main absorb spare height — but it names
   only `main.kluzko-page`. The 404 template's main is `main.kluzko-404`, so on
   the shortest page on the site nothing absorbed the slack: the dark footer
   ended early and left an isolated strip of page ground beneath it.

   This adds the 404 (and the equally short empty-search view) to the same rule
   instead of writing a second sticky-footer mechanism. The breakpoint and the
   `:not(.home)` scope deliberately match kluzko.css's own so the two halves of
   one behaviour stay in step. */
@media (min-width: 782px) {
	body:not(.home) > .wp-site-blocks > main.kluzko-404,
	body:not(.home) > .wp-site-blocks > main.kluzko-search-page {
		flex: 1 0 auto;
	}
}

/* ── KWS-06 — PDP detail-tile captions carry their own contrast ──
   All 13 PDPs render `деталь · …` over photography. The base layer sets the
   filled tile's caption to `--kluzko-muted` (a light warm grey) and explicitly
   clears the text-shadow the placeholder tile relied on, so legibility became
   a property of whichever photo happened to sit underneath — and this catalog
   is shot almost entirely on pale backgrounds.

   The fix is deterministic rather than per-image: a fixed bottom-up scrim on
   the tile gives every caption the same dark ground, and the caption itself
   becomes solid white on top of it. Contrast no longer depends on the
   photograph, so it cannot regress when the owner swaps an image.

   The scrim is a pseudo-element so it stacks above the `position: absolute`
   image without touching the tile's own background (which the placeholder
   variant still uses for its stripes) and without wrapping the markup. */
.kluzko-pdp__detail-tile--filled::after,
.kluzko-pdp__detail-tile--placeholder::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	/* Tall enough to cover the caption's own box plus the tile's 14px padding
	   at every card width; the top half is fully transparent so the photograph
	   is not visibly darkened. */
	height: 45%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
	pointer-events: none;
	z-index: 1;
}

.kluzko-pdp__detail-tile--filled .kluzko-pdp__detail-label,
.kluzko-pdp__detail-tile--placeholder .kluzko-pdp__detail-label {
	position: relative;
	/* Above the scrim, which is itself above the image. */
	z-index: 2;
	color: #FFFFFF;
}

/* ── Spec §1, remaining page ground ──
   The About/Brand page declares the warm ground directly in the base layer, so
   it would have stayed the only warm page once every other canvas went white.
   Spec §1 names «бренд» in the list of pages that are white. */
.kluzko-about {
	background: var(--kf-canvas);
}