/* Tihon MT — общие стили (DESIGN.md v2). Подключается на каждой странице, рядом — один файл страницы.
   Mobile-first: база — телефон, дальше min-width 641 / 901 / 1101 (точки DESIGN.md 640 / 900 / 1100).
   Ховеры — только в @media (hover: hover), переходы — только в prefers-reduced-motion: no-preference (в конце файла). */

/* ================================================================
   Токены
   ================================================================ */
:root {
	/* цвет — роли, значения из DESIGN.md */
	--bg-0: #0a0a0a;
	--bg: #111111;
	--s1: #1a1a1a;
	--s2: #232323;
	--line: #2b2b2b;
	--line-2: #3a3a3a;
	--line-input: #6b6b66;
	--fg: #f2f2ee;
	--fg-2: #c9c9c4;
	--muted: #a3a39d;
	--dim: #8a8a85;
	--a: #ff6b00;
	--a-text: #111111;
	--link: #ff8a3d;
	--ok: #7fd18b;
	--warn: #e8b84a;
	--plate: #ecebe7;
	--plate-fg: #3d3d3a;

	/* шрифт и шкала */
	--font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--t-xs: 13px;
	--t-sm: 15px;
	--t-md: 17px;
	--t-lg: 20px;
	--t-xl: 26px;
	--t-2xl: clamp(28px, 3vw, 40px);
	--t-3xl: clamp(32px, 4.2vw, 56px);
	--lh-xs: 1.4;
	--lh-sm: 1.45;
	--lh-md: 1.5;
	--lh-lg: 1.35;
	--lh-xl: 1.2;
	--lh-2xl: 1.1;
	--lh-3xl: 1.05;
	--narrow: 85%; /* font-stretch заголовков: длинные кириллические названия не рвутся на 4 строки */

	/* отступы 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 96px;

	--r: 2px;
	--cut: 10px; /* фирменный срез угла — только .btn и .badge-sale */
	--shadow: 0 12px 32px rgba(0, 0, 0, .5); /* только оверлеи */
	--dur: 160ms;

	--wrap: 1320px;
	--gutter: 16px;
	--tabbar-h: 60px; /* нижняя навигация телефона (≤900px): страницы поднимают над ней свои липкие блоки */
}
@media (min-width: 641px) {
	:root { --gutter: 32px; }
}

/* ================================================================
   База
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* color-scheme: dark только у полей (тёмные выпадающие списки). На всей странице нельзя:
   Chrome тогда рисует белый фон под светлыми iframe виджетов (чат KeepinCRM). */
input, select, textarea { color-scheme: dark; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 400 16px/var(--lh-md) var(--font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--fg);
	font-weight: 600;
	font-stretch: var(--narrow);
	letter-spacing: -.01em;
	line-height: var(--lh-xl);
	text-wrap: balance;
}
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; text-underline-offset: .2em; text-decoration-thickness: 1px; }
img, video { max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
::placeholder { color: var(--dim); opacity: 1; }
/* штатная рамка «groove» у fieldset (фильтры, формы WooCommerce) — не из палитры */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
/* контент начинается не вплотную к полосе категорий; главная со своим первым блоком может переопределить */
.site-main { padding-top: var(--sp-4); }
@media (min-width: 901px) {
	.site-main { padding-top: var(--sp-5); }
}

/* ================================================================
   Утилиты
   ================================================================ */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr, .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
	position: absolute; left: var(--sp-2); top: -64px; z-index: 300;
	padding: var(--sp-3) var(--sp-4); background: var(--fg); color: var(--bg); font-weight: 600;
}
.skip:focus { top: var(--sp-2); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
@media (max-width: 640px) {
	.hide-sm { display: none !important; }
}

/* ================================================================
   Типографика
   ================================================================ */
.h1 { font-size: var(--t-3xl); line-height: var(--lh-3xl); }
.h2 { font-size: var(--t-2xl); line-height: var(--lh-2xl); }
.h3 { font-size: var(--t-xl); line-height: var(--lh-xl); }
.h4 { font-size: var(--t-lg); line-height: var(--lh-lg); }
.lead { max-width: 60ch; color: var(--fg-2); font-size: var(--t-md); line-height: 1.55; }
/* метка капсом: до трёх слов, редко */
/* :not(th) — у WooCommerce th.label в форме вариантов, капс ему не нужен */
.label:not(th) { color: var(--muted); font-size: var(--t-xs); font-weight: 600; line-height: var(--lh-xs); letter-spacing: .06em; text-transform: uppercase; font-stretch: 100%; }
.small { font-size: var(--t-sm); line-height: var(--lh-sm); }
/* текстовое действие («Усі товари», «Скинути») — тихая линия всегда, как у «Обрати варіант», «Показати ще»:
   без неё «Розрахувати вартість» читались подзаголовками, а не ссылками */
.link { color: var(--fg); text-decoration-line: underline; text-decoration-color: var(--line-input); font-weight: 500; }
.link--muted { color: var(--muted); font-weight: 400; }

/* ================================================================
   Кнопки
   ================================================================ */
.btn, .button, .wp-element-button, .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
	min-height: 48px; padding: var(--sp-2) var(--sp-5);
	border: 1px solid transparent; border-radius: var(--r);
	background: var(--a); color: var(--a-text);
	font: 600 var(--t-sm)/1.2 var(--font); text-align: center; text-decoration: none;
	cursor: pointer; -webkit-tap-highlight-color: transparent;
	/* фирменный мотив: срез 10px справа сверху */
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
/* clip-path срезал бы кольцо фокуса — снимаем срез, кольцо видно всегда */
.btn:focus-visible, .button:focus-visible, .wp-element-button:focus-visible, .wp-block-button__link:focus-visible { clip-path: none; }
.btn--sm { min-height: 44px; padding: var(--sp-1) var(--sp-4); }
.btn--block { width: 100%; }
.btn--ghost, .button.btn--ghost {
	background: transparent; color: var(--fg); border-color: var(--line-2);
	clip-path: none; /* срез — только у главной кнопки */
}
/* у вариативного WooCommerce ставит .disabled до выбора варианта, но кнопка рабочая: нажатие подсказывает, что выбрать */
.btn:disabled, .btn.is-disabled, .button:disabled, .button.disabled:not(.wc-variation-selection-needed) { opacity: .45; cursor: not-allowed; }
/* WooCommerce: идёт запрос «У кошик» */
.button.loading { opacity: .6; cursor: progress; }

/* кнопка-иконка: меню, соцсети, закрыть */
.icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 0;
	background: transparent; border: 0; border-radius: var(--r); color: var(--fg); cursor: pointer;
}

/* ================================================================
   Чипы
   ================================================================ */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	min-height: 40px; padding: 0 var(--sp-3);
	background: var(--s1); border: 1px solid var(--line-2); border-radius: var(--r);
	color: var(--fg-2); font-size: var(--t-sm); line-height: 1.2; white-space: nowrap; cursor: pointer;
}
.chip.is-active, .chip[aria-current], .chip[aria-pressed="true"], .chip--x { background: var(--s2); border-color: var(--fg); color: var(--fg); }
.chip__count { color: var(--dim); font-size: var(--t-xs); }
.chip__x { margin-right: calc(-1 * var(--sp-1)); color: var(--muted); font-size: var(--t-lg); line-height: 1; }
@media (pointer: coarse) {
	.chip { min-height: 44px; }
}
/* ряд чипов на телефоне и любом тач-экране листается вбок одной строкой, как полоса категорий;
   с мышью на широком экране прокрутку не найти — переносится */
@media (max-width: 640px), (pointer: coarse) {
	.chips--scroll {
		flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
		margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
	}
	.chips--scroll::-webkit-scrollbar { display: none; }
	.chips--scroll > * { flex-shrink: 0; }
}

/* ================================================================
   Поля ввода
   ================================================================ */
.input,
input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="number"], input[type="date"], select, textarea {
	min-height: 48px; padding: var(--sp-2) var(--sp-3);
	background: var(--s1); border: 1px solid var(--line-input); border-radius: var(--r);
	color: var(--fg); font: 400 16px/1.4 var(--font); /* 16px — iOS не увеличивает страницу при фокусе */
}
textarea { min-height: 112px; resize: vertical; }
select {
	padding-right: var(--sp-7); appearance: none; -webkit-appearance: none; cursor: pointer;
	/* стрелка — два треугольника градиентом, без картинки */
	background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
	background-size: 5px 5px; background-repeat: no-repeat;
}
.input:focus, input:focus, select:focus, textarea:focus { border-color: var(--fg); outline: 2px solid var(--a); outline-offset: 1px; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 0; vertical-align: middle; cursor: pointer; }
/* без этого ползунок цены и галочки — синие системные */
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--fg); }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.input { width: 100%; }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field input, .field select, .field textarea { width: 100%; }
.field__label { color: var(--muted); font-size: var(--t-sm); line-height: var(--lh-sm); }
.field__error { color: var(--warn); font-size: var(--t-sm); }
.required { color: var(--warn); text-decoration: none; border: 0; }

/* ================================================================
   Хлебные крошки
   ================================================================ */
.crumbs, .woocommerce-breadcrumb { margin-bottom: var(--sp-5); color: var(--muted); font-size: var(--t-xs); line-height: var(--lh-xs); }
.crumbs a, .woocommerce-breadcrumb a { color: var(--muted); }
.crumbs [aria-hidden], .woocommerce-breadcrumb [aria-hidden] { color: var(--dim); }
@media (max-width: 640px) {
	/* одна строка, листается вбок */
	.crumbs, .woocommerce-breadcrumb {
		overflow-x: auto; white-space: nowrap; scrollbar-width: none;
		margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
	}
	.crumbs::-webkit-scrollbar, .woocommerce-breadcrumb::-webkit-scrollbar { display: none; }
}
@media (pointer: coarse) {
	/* палец: ссылка 44px в высоту; строка крошек выросла на ~26px — отступы вокруг ужаты на столько же, текст стоит на месте */
	.crumbs, .woocommerce-breadcrumb { margin-top: calc(-1 * var(--sp-3)); margin-bottom: var(--sp-3); }
	.crumbs a, .woocommerce-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--sp-2); margin-inline: calc(-1 * var(--sp-2)); } /* «Блог» был 29px в ширину */
}

/* ================================================================
   Уведомления WooCommerce
   ================================================================ */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .notice {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
	margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); list-style: none;
	background: var(--s1); border-left: 2px solid var(--ok); color: var(--fg);
	font-size: var(--t-sm); line-height: var(--lh-sm);
}
.woocommerce-info, .notice--info { border-left-color: var(--muted); }
.woocommerce-error, .notice--warn { border-left-color: var(--warn); }
.woocommerce-error { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.woocommerce-error li { margin: 0; }
/* WooCommerce ставит фокус на уведомление программно (чтобы его прочитал скринридер) — оранжевая рамка тут не нужна,
   у ссылок/кнопок внутри кольцо остаётся */
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus, .notice:focus,
.woocommerce-notices-wrapper [tabindex="-1"]:focus { outline: none; }
.woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a:not(.button) { text-decoration-line: underline; }
/* «Переглянути кошик» внутри уведомления — вторичная: главная кнопка на экране одна */
.woocommerce-message .button, .woocommerce-info .button {
	order: 2; min-height: 44px; padding: 0 var(--sp-4);
	background: transparent; color: var(--fg); border-color: var(--line-2); clip-path: none;
}

/* ================================================================
   Пагинация (WooCommerce и записи)
   ================================================================ */
.woocommerce-pagination, .navigation.pagination { margin-block: var(--sp-7); }
.woocommerce-pagination ul, .nav-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
a.page-numbers, span.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 0 var(--sp-3);
	border: 1px solid var(--line-2); border-radius: var(--r); color: var(--fg-2); font-size: var(--t-sm);
}
span.page-numbers.current { background: var(--s2); border-color: var(--fg); color: var(--fg); font-weight: 600; }
span.page-numbers.dots { border-color: transparent; }

/* ================================================================
   Верхняя строка
   ================================================================ */
.topbar { display: none; background: var(--bg-0); border-bottom: 1px solid var(--line); }
.topbar__in { display: flex; align-items: center; gap: var(--sp-5); min-height: 36px; color: var(--muted); font-size: var(--t-xs); line-height: var(--lh-xs); }
.topbar__note { margin-right: auto; }
.topbar__item { white-space: nowrap; }
.topbar__phone { color: var(--fg); font-weight: 600; }
.lang { display: inline-flex; gap: var(--sp-1); }
.lang a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--sp-1); color: var(--muted); font-size: var(--t-xs); }
.lang a[aria-current] { color: var(--fg); font-weight: 600; }
@media (min-width: 641px) {
	.topbar { display: block; }
}

/* ================================================================
   Шапка
   ================================================================ */
.header { position: relative; z-index: 60; background: var(--bg-0); }
/* телефон: логотип и действия, поиск — второй строкой во всю ширину */
.header__in {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "logo . actions" "search search search";
	align-items: center; column-gap: var(--sp-4); padding-block: var(--sp-2) var(--sp-3);
}
.header__logo { grid-area: logo; display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); }
.logo { display: block; width: auto; }
.nav { display: none; grid-area: nav; }
.hsearch { grid-area: search; }
.header__actions { grid-area: actions; display: flex; align-items: center; gap: var(--sp-1); }

/* меню */
.nav__list { display: flex; gap: var(--sp-5); margin: 0; padding: 0; list-style: none; }
.nav__list a {
	display: flex; align-items: center; min-height: 44px;
	border-bottom: 1px solid transparent; color: var(--fg-2);
	font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
}
.nav__list .current-menu-item > a, .nav__list a[aria-current] { color: var(--fg); border-bottom-color: var(--fg); }

/* поиск: заметное поле, лупа — кнопка отправки */
.hsearch { position: relative; display: flex; }
.hsearch__input[type="search"] {
	width: 100%; min-height: 44px; padding-right: var(--sp-7);
	background: var(--s1); /* рамка — общая --line-input полей: заметный поиск не должен быть самым бледным полем */
}
.hsearch__input[type="search"]:focus { border-color: var(--fg); outline-offset: 0; }
.hsearch__btn {
	position: absolute; right: 0; top: 0; bottom: 0; width: 44px;
	display: grid; place-items: center; padding: 0;
	background: transparent; border: 0; color: var(--muted); cursor: pointer;
}

/* кабинет и корзина: иконка + подпись */
.hact, .hcart {
	position: relative; display: inline-flex; align-items: center; gap: var(--sp-2);
	min-width: 44px; min-height: 44px; padding: 0 var(--sp-2); justify-content: center;
	border-radius: var(--r); color: var(--fg); font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
}
.hact__text { display: none; }
.hcart__text { display: none; }
/* число товаров — бейдж на иконке; нейтральный: оранжевый занят главным действием */
.hcart__count, .tabbar__badge {
	/* 16px в углу иконки: 24px закрывал почти полкорзины, с «12» она читалась сломанной */
	min-width: var(--sp-4); height: var(--sp-4); padding: 0 var(--sp-1); border-radius: var(--r);
	background: var(--fg); color: var(--bg-0);
	font-size: var(--t-xs); font-style: normal; font-weight: 600; line-height: var(--sp-4); text-align: center;
}
.hcart__count { position: absolute; top: var(--sp-1); left: calc(50% + var(--sp-1)); }
.header__account { display: none; } /* на телефоне кабинет — в нижней навигации */

/* мобильное меню: <details>, работает без JS */
.mnav { position: static; }
.mnav__toggle { list-style: none; }
.mnav__toggle::-webkit-details-marker { display: none; }
.mnav__close, .mnav[open] .mnav__open { display: none; }
.mnav[open] .mnav__close { display: inline-flex; }
.mnav__panel {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 70;
	/* до низа экрана (дальше — нижняя навигация): иначе под меню видна страница и шторка не читается оверлеем; 120px ≈ высота шапки */
	height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain;
	padding: var(--sp-2) var(--gutter) var(--sp-5);
	background: var(--bg-0); border-top: 1px solid var(--line); box-shadow: var(--shadow);
}
.mnav__list { margin: 0; padding: 0; list-style: none; }
.mnav__list a {
	display: flex; align-items: center; min-height: 52px;
	border-bottom: 1px solid var(--line); color: var(--fg); font-size: var(--t-md); font-weight: 500;
}
.mnav__contacts { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-5) 0 var(--sp-4); }
.mnav__phone { color: var(--fg); font-size: var(--t-lg); font-weight: 600; }
.mnav__hours { color: var(--muted); font-size: var(--t-sm); }
.mnav .lang a { justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--sp-2); font-size: var(--t-sm); }
.mnav .lang { margin-left: calc(-1 * var(--sp-2)); }

@media (min-width: 641px) {
	.header__in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo search actions"; column-gap: var(--sp-5); padding-block: var(--sp-3); }
	.header__call { display: none; } /* телефон виден в верхней строке */
	.header__account { display: inline-flex; }
	.hsearch { max-width: 560px; }
	.hcart__text { display: inline; }
	.hcart__count { position: static; } /* рядом с суммой — в строку, иначе закрывает первую цифру */
	.hcart { padding-right: var(--sp-3); }
}
@media (min-width: 1101px) {
	.header__in { grid-template-columns: auto auto minmax(220px, 1fr) auto; grid-template-areas: "logo nav search actions"; column-gap: var(--sp-6); min-height: 72px; }
	.nav { display: block; }
	.mnav { display: none; }
	.hsearch { max-width: none; }
}
/* подпись «Кабінет» — только где хватает места: с суммой в корзине шапка была шире окна на 1101–1120 (своя точка шапки) */
@media (min-width: 1241px) {
	.hact__text { display: inline; }
}

/* ================================================================
   Полоса категорий
   ================================================================ */
.catbar { background: var(--bg); border-bottom: 1px solid var(--line); }
/* 16px: на телефоне следующий пункт выглядывает из-за края — видно, что полоса листается */
.catbar__in { display: flex; gap: var(--sp-4); overflow-x: auto; scrollbar-width: none; }
.catbar__in::-webkit-scrollbar { display: none; }
.catbar__link {
	flex-shrink: 0; display: inline-flex; align-items: center; min-height: 48px;
	border-bottom: 2px solid transparent; margin-bottom: -1px; /* активная линия ложится на разделитель */
	color: var(--fg); font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
}
.catbar__link[aria-current] { border-bottom-color: var(--fg); }
.catbar__link.is-hot { color: var(--warn); }
/* с мышью прокрутку вбок не найти (полоса скрыта) — переносим на вторую строку, но ничего не прячем.
   Короткие подписи (header.php) держат одну строку примерно с 1150px */
@media (hover: hover) and (min-width: 641px) {
	.catbar__in { flex-wrap: wrap; overflow: visible; row-gap: 0; }
}

/* ================================================================
   Подвал
   ================================================================ */
.footer { margin-top: var(--sp-8); background: var(--bg-0); border-top: 1px solid var(--line); }
.footer__grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5);
	padding-block: var(--sp-7) var(--sp-6);
}
.footer__about { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
/* 44px под палец (DESIGN «Заборонено» 12): логотип 40px и телефон 31px были ниже */
.footer__logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); margin-bottom: var(--sp-2); }
.footer__text { max-width: 36ch; color: var(--fg-2); font-size: var(--t-sm); line-height: var(--lh-sm); }
.footer__phone { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); font-size: var(--t-xl); font-weight: 600; font-stretch: var(--narrow); line-height: var(--lh-xl); white-space: nowrap; }
.footer__meta { color: var(--muted); font-size: var(--t-sm); line-height: 1.6; }
.footer__meta .link { color: var(--fg-2); font-weight: 400; }
.footer__social { display: flex; gap: var(--sp-1); margin-left: calc(-1 * var(--sp-3)); color: var(--muted); }
.footer__social .icon-btn { color: var(--muted); }
.footer__title { margin-bottom: var(--sp-3); }
.footer__list { margin: 0; padding: 0; list-style: none; }
.footer__list a { display: flex; align-items: center; min-height: 40px; color: var(--fg-2); font-size: var(--t-sm); line-height: 1.3; }
.footer__bottom { border-top: 1px solid var(--line); }
.footer__bottom-in {
	display: grid; gap: var(--sp-4);
	padding-block: var(--sp-5);
	color: var(--dim); font-size: var(--t-xs); line-height: var(--lh-xs);
}
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-3) var(--sp-5); }
/* Знаки оплаты — официальные цветные версии для тёмного фона, не перекрашиваем */
.pay { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin: 0; padding: 0; list-style: none; }
.pay img { display: block; width: auto; height: var(--sp-5); }
.footer__author a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
@media (pointer: coarse) {
	.footer__author a { display: inline-flex; align-items: center; min-height: 44px; } /* 44px под палец (отступами выходило 42) */
	/* почта — отдельной строкой, не в предложении: зона 44px отступами, строку не раздувает */
	.footer__meta .link { display: inline-block; padding-block: var(--sp-3); margin-block: calc(-1 * var(--sp-3)); }
}
@media (hover: hover) {
	.footer__author a:hover { color: var(--fg); text-decoration-color: currentColor; }
}
@media (pointer: coarse) {
	/* 44px за счёт отступов, а не min-height: двухстрочные пункты иначе слипаются с соседями */
	.footer__list a { min-height: 0; padding-block: var(--sp-3); line-height: var(--lh-xs); }
}
@media (min-width: 901px) {
	.footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-6); padding-block: var(--sp-8) var(--sp-7); }
	.footer__about { grid-column: auto; }
	.footer__list a { min-height: 36px; }
}

/* ================================================================
   Нижняя навигация телефона (≤900px)
   ================================================================ */
.tabbar { display: none; }
@media (max-width: 900px) {
	body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
	/* конец подвала не прячется под чат (отступ 24 + кнопка 48 + 16) и липкую полосу страницы (48 + 2 × 12 + 1; чат тогда в её ряду).
	   :not([hidden]), а не .is-visible — высота страницы не прыгает, когда полоса появляется (CLS) */
	.footer__bottom-in { padding-bottom: calc(var(--sp-5) + var(--sp-7) + var(--sp-4)); }
	body:has(.buybar:not([hidden]), .cart_totals > .wc-proceed-to-checkout) .footer__bottom-in { padding-bottom: calc(var(--sp-5) + var(--sp-7) + 2 * var(--sp-3) + 1px); }
	.tabbar {
		display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
		height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
		background: var(--bg-0); border-top: 1px solid var(--line);
	}
	.tabbar__item {
		position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
		height: var(--tabbar-h); color: var(--muted); font-size: var(--t-xs); line-height: 1.2;
		cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
	}
	.tabbar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	/* активный — цвет текста и линия сверху */
	.tabbar__item.is-active { color: var(--fg); }
	.tabbar__item.is-active::before {
		content: ""; position: absolute; top: -1px; left: 25%; right: 25%; height: 2px; background: var(--fg);
	}
	.tabbar__badge { position: absolute; top: var(--sp-1); left: calc(50% + var(--sp-2)); }
	/* чат KeepinCRM над панелью — в разделе «Чат KeepinCRM» ниже */
}

/* ================================================================
   Раздел страницы и заголовок раздела
   ================================================================ */
.section { padding-top: var(--sp-7); }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-5); margin-bottom: var(--sp-5); }
.sec-head .link { font-size: var(--t-sm); white-space: nowrap; }
@media (pointer: coarse) {
	.sec-head .link { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (min-width: 901px) {
	.section { padding-top: var(--sp-8); }
}

/* ================================================================
   Подложка фото — снимки на белом ставим на светлую нейтральную плоскость
   ================================================================ */
.plate { background: var(--plate); color: var(--plate-fg); border-radius: var(--r); }
.plate img { display: block; mix-blend-mode: multiply; }

/* ================================================================
   Цены, наличие, бейдж скидки
   ================================================================ */
.price { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.price del { margin-right: var(--sp-2); color: var(--dim); font-size: .75em; font-weight: 400; }
.price ins { text-decoration: none; }

.avail, .stock { font-size: var(--t-xs); line-height: var(--lh-xs); }
.avail--in, .stock.in-stock { color: var(--ok); }
.avail--order, .stock.available-on-backorder { color: var(--warn); }
.avail--out, .stock.out-of-stock { color: var(--dim); }

.badge-sale {
	display: inline-block; padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2); border-radius: var(--r);
	background: var(--a); color: var(--a-text);
	font-size: var(--t-xs); font-weight: 600; line-height: var(--lh-xs);
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

/* ================================================================
   Карточка товара и сетка карточек
   ================================================================ */
/* ряды дальше друг от друга, чем части карточки: «У кошик» не липнет к фото карточки снизу */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 641px) {
	.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-5); }
}
@media (min-width: 1101px) {
	.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* рядом с фильтрами — три колонки (.cards--catalog — имя из template-parts/archive.php) */
	.cards--3, .cards--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* лента с прокруткой вбок: .cards--rail всегда, .cards--rail-m только на телефоне */
.cards--rail {
	position: relative; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - var(--sp-3)) / 2.25);
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
	margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--sp-4); scroll-padding-inline: var(--gutter);
	scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
/* по верху: «Переглянути кошик» после AJAX удлиняет одну карточку — соседние не растягиваются, их кнопки не съезжают */
.cards--rail { align-items: start; }
.cards--rail > * { scroll-snap-align: start; }
@media (max-width: 640px) {
	.cards--rail-m {
		position: relative; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - var(--sp-3)) / 2.25);
		overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
		margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--sp-4); scroll-padding-inline: var(--gutter);
		scrollbar-width: none; align-items: start;
	}
	.cards--rail-m > * { scroll-snap-align: start; }
}
@media (min-width: 641px) {
	.cards--rail { grid-auto-columns: calc((100% - 2 * var(--sp-5)) / 3); }
}
@media (min-width: 1101px) {
	/* четыре карточки ровно по краю контента: выход на поля здесь дал бы обрезанный кусок пятой */
	.cards--rail {
		grid-auto-columns: calc((100% - 3 * var(--sp-5)) / 4);
		margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; scrollbar-color: var(--line-input) transparent;
	}
}

/* без рамки, тени и фона: фото на подложке, дальше текст */
/* position: relative — скрытые подписи WooCommerce (.screen-reader-text, absolute) иначе вылезают из ленты и растягивают страницу */
.card { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.card__img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.card__img img { width: 100%; height: 100%; padding: 6%; object-fit: contain; }
.card__sale { position: absolute; top: var(--sp-2); left: var(--sp-2); }
.card__body { display: flex; flex-direction: column; flex-grow: 1; gap: var(--sp-1); min-width: 0; }
.card__attrs {
	color: var(--muted); font-size: var(--t-xs); line-height: var(--lh-xs);
	min-height: calc(2em * var(--lh-xs)); /* место под две строки всегда: названия и цены в ряду на одной высоте */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__name {
	font-size: var(--t-md); font-weight: 600; line-height: 1.3; letter-spacing: 0;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card__price { margin-top: var(--sp-2); font-size: var(--t-lg); line-height: var(--lh-lg); }
.card__buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin-top: auto; padding-top: var(--sp-3); }
/* «У кошик» у простого товара — малая вторичная кнопка */
.card .button {
	min-height: 44px; padding: var(--sp-1) var(--sp-4);
	background: transparent; color: var(--fg); border-color: var(--line-2); clip-path: none;
}
/* вариативный, нет в наличии и т.п. — ведут на страницу товара: обычная ссылка-действие */
.card .button:not(.ajax_add_to_cart) {
	min-height: 44px; padding: 0; border: 0; justify-content: flex-start; font-weight: 500;
	text-decoration-line: underline; text-decoration-color: var(--line-input);
}
/* AJAX «У кошик» — у любой кнопки, не только в карточке (флагман на главной, блоки товаров в статьях) */
.button.added { border-color: var(--ok); }
/* «Переглянути кошик» после AJAX-добавления; место (своей строкой и т.п.) задаёт страница */
.added_to_cart { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-2); font-size: var(--t-sm); text-decoration-line: underline; }
@media (max-width: 640px) {
	.card .ajax_add_to_cart { width: 100%; }
}

/* ================================================================
   Характеристики — пары «название — значение» в одну колонку
   ================================================================ */
.specs { margin: 0; border-top: 1px solid var(--line); }
.specs > div {
	display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-4);
	padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); line-height: var(--lh-sm);
}
.specs dt { color: var(--muted); }
.specs dd { margin: 0; color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
/* ссылка на фильтр — обычным текстом (td/dd поднимают специфичность над .prose a) */
.specs dd a, .woocommerce-product-attributes td a, .shop_attributes td a { color: inherit; text-decoration-line: none; }
/* та же таблица от WooCommerce (вкладка «Характеристики») */
.woocommerce-product-attributes, .shop_attributes { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); font-size: var(--t-sm); line-height: var(--lh-sm); }
.woocommerce-product-attributes th, .shop_attributes th,
.woocommerce-product-attributes td, .shop_attributes td { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.woocommerce-product-attributes th, .shop_attributes th { width: 40%; padding-right: var(--sp-4); color: var(--muted); font-weight: 400; }
.woocommerce-product-attributes td, .shop_attributes td { color: var(--fg); font-weight: 500; }
.woocommerce-product-attributes td p, .shop_attributes td p { margin: 0; }

/* ================================================================
   Раскрывающиеся секции (details)
   ================================================================ */
.acc { border-bottom: 1px solid var(--line); }
.acc__title {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
	min-height: 56px; padding: var(--sp-3) 0;
	font-size: var(--t-lg); font-weight: 600; font-stretch: var(--narrow); line-height: var(--lh-lg);
	cursor: pointer; list-style: none;
}
.acc__title::-webkit-details-marker { display: none; }
.acc__title::after { content: "+"; flex-shrink: 0; width: 24px; color: var(--muted); font-size: var(--t-xl); font-weight: 400; line-height: 1; text-align: center; }
.acc[open] > .acc__title::after { content: "−"; }
.acc__body { padding-bottom: var(--sp-6); }

/* ================================================================
   Пустое состояние
   ================================================================ */
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding-block: var(--sp-7); }
.empty__title { font-size: var(--t-xl); line-height: var(--lh-xl); }
.empty__text { max-width: 52ch; color: var(--fg-2); }
.empty .row { margin-top: var(--sp-2); }

/* ================================================================
   .prose — текст статей, страниц и описаний товаров: все блоки, что встречаются в контенте
   ================================================================ */
.prose { max-width: 68ch; min-width: 0; color: var(--fg-2); font-size: var(--t-md); line-height: 1.6; overflow-wrap: break-word; }
.prose > * { margin-top: 0; margin-bottom: var(--sp-4); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h1, .prose h2 { margin: var(--sp-7) 0 var(--sp-4); font-size: var(--t-xl); line-height: var(--lh-xl); scroll-margin-top: var(--sp-5); }
.prose h3 { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--t-lg); line-height: var(--lh-lg); scroll-margin-top: var(--sp-5); }
/* h4–h6 — размером текста, полужирные: --t-md был мельче текста 18px */
.prose h4, .prose h5, .prose h6 { margin: var(--sp-5) 0 var(--sp-2); font-size: inherit; line-height: inherit; }
.prose strong, .prose b { color: var(--fg); }
.prose a { color: var(--link); text-decoration-line: underline; }
/* список из одних ссылок («Товари з цієї статті») — иначе сплошной оранжевый блок; ссылки внутри фраз остаются --link */
.prose li > a:only-child { color: var(--fg); text-decoration-color: var(--line-input); }
/* на телефоне заголовок страницы 28px — h2 текста (26px) с ним спорил */
@media (max-width: 640px) {
	.prose h1, .prose h2 { font-size: var(--t-lg); line-height: var(--lh-lg); }
	.prose h3 { font-size: var(--t-md); line-height: var(--lh-md); }
}
.prose ul, .prose ol { padding-left: var(--sp-5); }
.prose li { margin-bottom: var(--sp-2); padding-left: var(--sp-1); }
.prose li::marker { color: var(--muted); }
.prose li > ul, .prose li > ol { margin-top: var(--sp-2); }
.prose img, .prose video { height: auto; border-radius: var(--r); }
/* прозрачные PNG (чёрные логотипы, схемы) на тёмном фоне не видны — подкладываем подложку; непрозрачным фото она не мешает */
.prose img { background: var(--plate); }
.prose figure { margin-inline: 0; }
.prose figcaption, .prose .wp-element-caption { margin-top: var(--sp-2); color: var(--muted); font-size: var(--t-xs); line-height: var(--lh-xs); }
/* фото в тексте — в основном товары на белом: на подложке и не во всю колонку по высоте */
.prose .wp-block-image:not(.alignfull):not(.alignwide) { padding: var(--sp-4); background: var(--plate); border-radius: var(--r); text-align: center; }
.prose .wp-block-image img { display: block; width: auto; max-height: 480px; margin: 0 auto; mix-blend-mode: multiply; }
.prose .wp-block-image:not(.alignfull):not(.alignwide) figcaption { color: var(--plate-fg); }
.prose hr, .prose .wp-block-separator { height: 1px; margin-block: var(--sp-7); background: var(--line); border: 0; }
.prose blockquote, .prose .wp-block-quote { padding: var(--sp-1) 0 var(--sp-1) var(--sp-5); border-left: 2px solid var(--line-2); color: var(--fg); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote cite { display: block; margin-top: var(--sp-2); color: var(--muted); font-size: var(--t-sm); font-style: normal; }
.prose code { padding: 1px var(--sp-1); background: var(--s1); border-radius: var(--r); font-size: .9em; }
.prose pre { padding: var(--sp-4); overflow-x: auto; background: var(--s1); border-radius: var(--r); font-size: var(--t-sm); }
.prose pre code { padding: 0; background: none; }
.prose details { padding: var(--sp-3) 0; border-block: 1px solid var(--line); }
.prose summary { display: flex; justify-content: space-between; gap: var(--sp-4); color: var(--fg); font-weight: 600; cursor: pointer; list-style: none; }
.prose summary::-webkit-details-marker { display: none; }
/* «+ / −» как у .acc, а не системный треугольник */
.prose summary::after { content: "+"; color: var(--muted); font-weight: 400; }
.prose details[open] > summary::after { content: "−"; }
/* выравнивание из редактора */
.prose .aligncenter, .prose .has-text-align-center { margin-inline: auto; text-align: center; }
/* заголовки всегда по колонке: центрированные h2 из старого Flatsome (style="text-align:center", .titl-tab) под левым h1 смотрятся сбоем */
.prose :is(h1, h2, h3, h4, h5, h6):is([style*="text-align"], .has-text-align-center, .titl-tab) { margin-inline: 0; text-align: start !important; }
.prose .has-text-align-right { text-align: right; }
@media (min-width: 641px) {
	.prose .alignleft { float: left; max-width: 50%; margin: 0 var(--sp-5) var(--sp-4) 0; }
	.prose .alignright { float: right; max-width: 50%; margin: 0 0 var(--sp-4) var(--sp-5); }
}
/* таблицы: только горизонтальные линии; на телефоне листаются вбок внутри своего блока */
.prose .wp-block-table, .prose .table-scroll { display: block; max-width: 100%; overflow-x: auto; margin-inline: 0; }
.prose thead, .prose tfoot { border: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); line-height: var(--lh-sm); font-variant-numeric: tabular-nums; }
.prose th, .prose td { padding: var(--sp-2) var(--sp-3); border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th:first-child, .prose td:first-child { padding-left: 0; }
.prose thead th, .prose thead td { color: var(--fg); font-weight: 600; border-bottom-color: var(--line-2); }
/* видео и встраивания — 16:9 */
.prose iframe { display: block; max-width: 100%; border: 0; }
.prose .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.prose .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.prose > iframe, .prose p > iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* кнопки Gutenberg: обычная — главная, outline — вторичная */
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.prose .wp-block-buttons + .wp-block-buttons { margin-top: var(--sp-4); } /* соседние группы кнопок в колонке слипались: отступы core/flow сняты вместе с CSS блоков */
.prose .wp-block-button__link { background: var(--a) !important; color: var(--a-text) !important; border-radius: var(--r) !important; text-decoration: none; }
.prose .is-style-outline .wp-block-button__link { background: transparent !important; color: var(--fg) !important; border-color: var(--line-2); clip-path: none; }
/* колонки и медиа+текст */
.prose .wp-block-columns { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.prose .wp-block-column { flex: 1 1 260px; min-width: 0; }
.prose .wp-block-column > :last-child { margin-bottom: 0; }
.prose .wp-block-media-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: center; }
.prose .wp-block-media-text__content { padding: 0; }
@media (min-width: 641px) {
	.prose .wp-block-media-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* галереи и слайдшоу Jetpack */
.prose .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); padding: 0; list-style: none; }
.prose .wp-block-gallery figure { width: 100% !important; margin: 0; padding: 0 !important; }
.prose .wp-block-gallery img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.prose .wp-block-jetpack-slideshow { background: var(--plate); border-radius: var(--r); }
.prose .wp-block-jetpack-slideshow img { object-fit: contain !important; mix-blend-mode: multiply; }
/* блоки товаров WooCommerce в статьях — как наши карточки: без рамки, фото на подложке */
.prose .wc-block-grid__products, .prose ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-5) var(--sp-4); margin-inline: 0; padding: 0; list-style: none; }
.prose .wc-block-grid__product, .prose ul.products li.product { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; text-align: left; list-style: none; }
.prose .wc-block-grid__product::marker, .prose ul.products li::marker { content: none; }
.prose .wc-block-grid__product a, .prose ul.products a { color: var(--fg); text-decoration-line: none; }
.prose .wc-block-grid__product-image img, .prose ul.products img { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 6%; object-fit: contain; background: var(--plate); }
.prose .wc-block-grid__product-title, .prose .woocommerce-loop-product__title { margin: 0; color: var(--fg); font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
.prose .wc-block-grid__product-price, .prose ul.products .price { color: var(--fg); font-weight: 600; }
.prose .wc-block-grid__product .wp-block-button__link, .prose ul.products .button {
	min-height: 44px; padding: 0 var(--sp-4); background: transparent !important; color: var(--fg) !important; border-color: var(--line-2); clip-path: none;
}
.prose .wc-block-grid__product-onsale, .prose .onsale { display: none; } /* «Розпродаж!» поверх фото — не из данных о скидке */
/* старые статьи со сеткой Flatsome (row / col) */
.prose .row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-5); }
.prose .row > .col { flex: 1 1 260px; min-width: 0; }
.prose .col-inner > :last-child { margin-bottom: 0; }
/* очищенные «лендинги»: только типографика темы */
.landing-clean img { display: block; margin-block: var(--sp-5); }
.landing-clean div:empty, .landing-clean span:empty { display: none; }
@media (min-width: 901px) {
	.prose { font-size: calc(var(--t-md) + 1px); } /* 18px — DESIGN «Статьи: текст 18px» */
}

/* ================================================================
   Карточка статьи (блог, «Читайте також», свежие статьи на главной) — template-parts/post-card.php
   ================================================================ */
.post-card { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.post-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r); background: var(--plate); }
/* обложки — часто снимки товара на белом: на подложку, а не светящимся белым блоком (как карточка товара) */
.post-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
/* без обложки — тихая заглушка с логотипом: светлая подложка сделала бы статью без картинки самой яркой на странице */
.post-card__noimg { display: grid; place-items: center; height: 100%; background: var(--s1); color: var(--dim); }
.post-card__body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.post-card__meta { color: var(--dim); font-size: var(--t-xs); line-height: var(--lh-xs); }
.post-card__title {
	display: block; color: var(--fg); font-size: var(--t-lg); font-weight: 600; font-stretch: var(--narrow); line-height: var(--lh-lg); text-wrap: balance;
	text-decoration-thickness: 1px;
}
.post-card__excerpt {
	color: var(--muted); font-size: var(--t-sm); line-height: var(--lh-sm);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Contact Form 7 (возврат товара, запись на нарезку, заявка у товаров «на замовлення» — поэтому в общем слое): метка над своим полем, поля во всю ширину */
.wpcf7-form p { margin: 0 0 var(--sp-5); }
.wpcf7-form label { display: block; color: var(--muted); font-size: var(--t-sm); line-height: var(--lh-sm); }
.wpcf7-form label br { display: none; }
.wpcf7-form-control-wrap { display: block; margin-top: var(--sp-2); }
.wpcf7 :is(input:not([type=checkbox], [type=radio], [type=submit], [type=hidden]), textarea, select) { width: 100%; }
.wpcf7-list-item { display: block; margin: 0 0 var(--sp-2); }
.wpcf7-not-valid-tip { display: block; margin-top: var(--sp-1); color: var(--warn); font-size: var(--t-sm); }
.wpcf7-response-output { margin: var(--sp-5) 0 0; padding: var(--sp-4); background: var(--s1); border: 0; border-left: 2px solid var(--line-2); color: var(--fg); }
.wpcf7-response-output:empty { display: none; }
/* успех и ошибка различимы, как уведомления */
.wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--ok); }
.wpcf7 form:is(.invalid, .unaccepted, .failed, .spam, .aborted) .wpcf7-response-output { border-left-color: var(--warn); }

/* ================================================================
   Чат KeepinCRM (чужой скрипт): цвет кнопки задан инлайном с !important — перекрашиваем заливкой внутренней тенью
   под рамку вторичной кнопки, скругление и тень снимаем. Приветствие внутри iframe CSS не достаётся — это настройки виджета.
   ================================================================ */
#keepincrmChatButton {
	width: var(--sp-7) !important; height: var(--sp-7) !important; border-radius: var(--r) !important;
	box-shadow: inset 0 0 0 1px var(--line-2), inset 0 0 0 var(--sp-6) var(--s2) !important; transition: none !important;
}
#keepincrmChatButton svg { width: 20px !important; height: 20px !important; fill: none; stroke-width: 1.75; }
/* Приветствие всплывает само через 3–5 с; его iframe (прозрачный вне пузыря) ложился на кнопки и заголовки и забирал нажатия.
   Окно видно только открытым кнопкой чата (тогда у контейнера инлайн height: 100%); кнопка — отдельный fixed-элемент и остаётся. */
#keepincrmContainer:not([style*="height: 100%"]) > #keepincrmChatIframe { display: none !important; }
/* закрытый контейнер — прозрачная полоса 50×150 у правого края: забирала нажатия у кнопок карточек; ловит только сама кнопка */
#keepincrmContainer:not([style*="height: 100%"]) { pointer-events: none; }
#keepincrmChatButton { pointer-events: auto; }
/* открытое меню телефона — оверлей, чат поверх него не нужен (как у шторки фильтров); !important — против инлайна виджета */
body:has(.mnav[open]) #keepincrmContainer, body:has(.mnav[open]) #keepincrmChatButton { display: none !important; }
@media (max-width: 900px) {
	/* кнопка и окно — над нижней навигацией */
	#keepincrmContainer { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)) !important; }
	#keepincrmChatButton { right: var(--gutter) !important; bottom: calc(var(--sp-4) + var(--tabbar-h) + env(safe-area-inset-bottom)) !important; }
	/* при липкой полосе страницы (buybar товара, «Перейти до оформлення») — в её ряду справа, полоса оставляет место:
	   над полосой кнопка висела поверх ключевых характеристик и фактов */
	body:has(.buybar.is-visible, .cart_totals > .wc-proceed-to-checkout) #keepincrmChatButton { bottom: calc(var(--tabbar-h) + var(--sp-3) + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 640px) {
	/* открытое окно у виджета во весь экран (height: 100svh !important) — с поднятым над панелью низом
	   его верх (заголовок, «закрыть») уходил за экран. body — чтобы перебить !important виджета той же специфичности */
	body #keepincrmContainer.chat-opened { top: 0 !important; height: auto !important; }
}

/* ================================================================
   Ховеры — только там, где есть мышь
   ================================================================ */
@media (hover: hover) {
	.btn:hover, .button:hover, .wp-element-button:hover, .wp-block-button__link:hover { background-color: var(--link); }
	.btn--ghost:hover, .button.btn--ghost:hover,
	.woocommerce-message .button:hover, .woocommerce-info .button:hover,
	.card .button:hover, .prose .is-style-outline .wp-block-button__link:hover { background-color: transparent; border-color: var(--fg); }
	.prose .wp-block-button__link:hover { background: var(--link) !important; }
	.prose .is-style-outline .wp-block-button__link:hover,
	.prose .wc-block-grid__product .wp-block-button__link:hover, .prose ul.products .button:hover { background: transparent !important; border-color: var(--fg); }
	.card .button:not(.ajax_add_to_cart):hover { text-decoration-color: var(--fg); }
	.icon-btn:hover, .hact:hover, .hcart:hover { background-color: var(--s2); color: var(--fg); }
	.link:hover { text-decoration-color: var(--fg); }
	.link:hover, .card__name a:hover, .added_to_cart:hover,
	.crumbs a:hover, .woocommerce-breadcrumb a:hover, .specs dd a:hover,
	.woocommerce-product-attributes td a:hover, .shop_attributes td a:hover { color: var(--fg); text-decoration-line: underline; }
	/* фото и название ведут на один товар — ховер фото тоже подчёркивает название */
	.card__img:hover + .card__body .card__name a { text-decoration-line: underline; }
	.chip:hover { border-color: var(--muted); color: var(--fg); }
	.chip.is-active:hover, .chip--x:hover { border-color: var(--fg); }
	.chip--x:hover .chip__x { color: var(--fg); }
	a.page-numbers:hover { border-color: var(--fg); color: var(--fg); }
	.lang a:hover, .topbar__phone:hover { color: var(--fg); text-decoration-line: underline; }
	.nav__list a:hover { color: var(--fg); border-bottom-color: var(--fg); }
	.catbar__link:hover { border-bottom-color: var(--line-input); }
	.catbar__link[aria-current]:hover { border-bottom-color: var(--fg); }
	.hsearch__btn:hover { color: var(--fg); }
	.hsearch__input[type="search"]:hover { border-color: var(--muted); }
	.mnav__list a:hover, .footer__list a:hover, .footer__phone:hover { color: var(--fg); text-decoration-line: underline; }
	.prose a:hover { color: var(--fg); }
	.prose li > a:only-child:hover { text-decoration-color: var(--fg); }
	.post-card__title:hover, .post-card__img:hover + .post-card__body .post-card__title { text-decoration-line: underline; }
	.prose .wc-block-grid__product a:hover .wc-block-grid__product-title, .prose ul.products a:hover h2 { text-decoration-line: underline; }
}

/* ================================================================
   Движение — только по действию и только без «уменьшить движение»
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
	.btn, .button, .wp-element-button, .wp-block-button__link, .icon-btn, .hact, .hcart, .chip, a.page-numbers,
	.nav__list a, .catbar__link, .hsearch__input, .hsearch__btn, .input, input, select, textarea {
		transition-property: color, background-color, border-color, opacity;
		transition-duration: var(--dur);
		transition-timing-function: ease-out;
	}
}