/* ==========================================================================
   АМПИР — единый файл стилей
   --------------------------------------------------------------------------
   Порядок секций:
     1. Переменные
     2. Шрифты
     3. Reset
     4. Типографика
     5. Утилиты
     6. Блоки
     7. Адаптив
   ========================================================================== */


/* ==========================================================================
   1. ПЕРЕМЕННЫЕ
   --------------------------------------------------------------------------
   Палитра перенесена из ampir-main-v2.html без изменений.
   В прототипе карточки товара те же два оттенка назывались --surface
   и --surface-2; значения совпадают, поэтому оставлены имена --warm-1
   и --warm-2, а обращения из карточки переписаны на них.
   ========================================================================== */

:root {
	--paper: #FFFFFF;
	--warm-1: #F3F0EA;
	--warm-2: #E8E4DB;
	--ph: #DDD8CC;
	--line: #E2DED5;
	--line-2: #C4BEB1;

	--font-head: 'Manrope', system-ui, sans-serif;
	--font-body: 'Nunito', system-ui, sans-serif;
	--font-logo: 'Unbounded', 'Manrope', system-ui, sans-serif;

	--ink: #1C1714;
	--ink-2: #473F39;
	--muted: #80786F;

	--gr-900: #23282B;
	--gr-800: #2E3437;
	--gr-700: #3F4649;
	--gr-600: #555D61;
	--gr-400: #878F93;
	--gr-300: #AEB5B8;

	--wood: #2C221C;
	--wood-2: #1D1612;
	--wood-3: #13100D;

	--sand: #A68F69;
	--sand-2: #C2AC86;
	--bronze: #86693E;
	--stone: #80786F;
	--ok: #43703F;

	--sh-1: 0 1px 2px rgba(28, 23, 20, .06);
	--sh-2: 0 10px 28px -16px rgba(28, 23, 20, .32);
	--sh-3: 0 24px 60px -30px rgba(28, 23, 20, .48);

	--max: 1320px;
	--gap: 20px;
	--r: 6px;

	/* Высота прилипшей шапки: под ней встаёт навигация по разделам */
	--hh: 78px;
}


/* ==========================================================================
   2. ШРИФТЫ
   --------------------------------------------------------------------------
   Файлы .woff2 кладутся в assets/fonts/ — см. README.md в той папке.
   Кириллица и латиница разнесены по unicode-range: браузер качает только
   тот диапазон, который реально встретился на странице.
   У Unbounded диапазона нет: это подрезанный до пяти букв файл логотипа.
   ========================================================================== */

@font-face {
	font-family: 'Manrope';
	src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
	font-weight: 500 800;
	font-display: swap;
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Manrope';
	src: url('../fonts/manrope-latin.woff2') format('woff2');
	font-weight: 500 800;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2190-21BB, U+2212;
}

@font-face {
	font-family: 'Nunito';
	src: url('../fonts/nunito-cyrillic.woff2') format('woff2');
	font-weight: 400 800;
	font-display: swap;
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Nunito';
	src: url('../fonts/nunito-latin.woff2') format('woff2');
	font-weight: 400 800;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2190-21BB, U+2212;
}

/* Только буквы А, М, П, И, Р — около 2 КБ */
@font-face {
	font-family: 'Unbounded';
	src: url('../fonts/unbounded-logo.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}


/* ==========================================================================
   3. RESET
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;

	/* В макете на body стоял overflow-x: hidden — он гасит случайную
	   горизонтальную прокрутку от декоративных слоёв первого экрана.
	   Берём clip, а не hidden: hidden делает body контейнером прокрутки
	   и ломает position: sticky у шапки, clip — нет. */
	overflow-x: clip;
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
}

ul,
ol {
	list-style: none;
}

input,
select,
textarea {
	font: inherit;
}


/* ==========================================================================
   4. ТИПОГРАФИКА
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-head);
	letter-spacing: -.025em;
}

.text--head {
	font-family: var(--font-head);
	letter-spacing: -.025em;
}


/* ==========================================================================
   5. УТИЛИТЫ
   ========================================================================== */

.container {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 24px;
}

.icon {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   6. БЛОКИ
   ========================================================================== */

/* --- Кнопки ---------------------------------------------------------------
   В прототипе было два почти одинаковых тёмных варианта: .btn-dark с
   подъёмом на hover и .btn-wood без него. Сведены в один --primary по
   версии .btn-dark — она стояла на главных призывах к действию.
   -------------------------------------------------------------------------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 54px;
	padding: 0 28px;
	border-radius: var(--r);
	font-weight: 700;
	white-space: nowrap;
	transition: background .16s, border-color .16s, transform .16s, color .16s;
}

.button .icon {
	width: 18px;
	height: 18px;
}

.button--primary {
	background: var(--wood);
	box-shadow: 0 10px 26px -14px rgba(28, 23, 20, .9);
	color: #fff;
}

.button--primary:hover {
	background: var(--wood-2);
	transform: translateY(-1px);
}

.button--sand {
	background: var(--sand);
	box-shadow: 0 10px 26px -14px rgba(166, 143, 105, .8);
	color: var(--wood-3);
}

.button--sand:hover {
	background: var(--sand-2);
	transform: translateY(-1px);
}

.button--ghost {
	border: 1.5px solid var(--line-2);
	background: rgba(255, 255, 255, .55);
	color: var(--ink);
}

.button--ghost:hover {
	border-color: var(--wood);
	background: #fff;
}

.button--ghost-light {
	border: 1.5px solid rgba(255, 255, 247, .34);
	color: #fff;
}

.button--ghost-light:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .07);
}

.button--light {
	background: #fff;
	color: var(--ink);
}

.button--light:hover {
	background: var(--warm-1);
}

.button--outline {
	border: 1.5px solid var(--gr-600);
	color: #fff;
}

.button--outline:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .06);
}

/* --- Цена -----------------------------------------------------------------
   .price — строка целиком, .price__value — само число. В прототипе это
   назывались .price-row и .price; имена разведены, чтобы блок и элемент
   не носили одно имя.
   -------------------------------------------------------------------------- */

.price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: auto;
	margin-bottom: 12px;
}

.price__value {
	font-family: var(--font-head);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.03em;
}

.price__unit {
	color: var(--muted);
	font-size: 13px;
}

.price__old {
	margin-left: 4px;
	color: var(--muted);
	font-size: 13px;
	text-decoration: line-through;
}

/* --- Верхняя строка ------------------------------------------------------ */

.topbar {
	background: var(--gr-900);
	color: var(--gr-300);
	font-size: 13px;
}

.topbar__inner {
	display: flex;
	align-items: center;
	gap: 22px;
	height: 38px;
}

.topbar__city {
	display: flex;
	align-items: center;
	gap: 6px;
}

.topbar__city-icon {
	width: 14px;
	height: 14px;
	stroke-width: 1.8;
}

.topbar__spacer {
	margin-left: auto;
}

.topbar__link:hover {
	color: #fff;
}

/* Прячется на узких экранах — см. медиазапрос 620 в конце файла */
.topbar__item--desktop {
	display: inline;
}

.topbar__menu {
	display: flex;
	gap: 22px;
}

.topbar__menu-item {
	display: none;
}

@media (min-width: 621px) {
	.topbar__menu-item {
		display: block;
	}
}

/* --- Переключатель языка ------------------------------------------------- */

.lang {
	display: flex;
	overflow: hidden;
	border: 1px solid var(--gr-700);
	border-radius: 3px;
}

.lang__item {
	padding: 2px 8px;
	font-size: 12px;
	cursor: pointer;
}

.lang__item--active {
	background: #fff;
	color: var(--gr-900);
	font-weight: 700;
}

/* --- Шапка --------------------------------------------------------------- */

.header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.header--stuck {
	box-shadow: var(--sh-2);
}

.header__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 78px;
}

/* --- Логотип --------------------------------------------------------------
   Подпись выключена по ширине имени: буквы разложены во flex-строку
   с justify-content: space-between, поэтому строки совпадают по ширине
   при любом кегле и любом шрифте. Разрядку руками подгонять не нужно.
   -------------------------------------------------------------------------- */

.logo {
	display: inline-flex;
	flex: none;
	flex-direction: column;
	align-items: stretch;
	line-height: 1;
}

.logo__name {
	color: var(--ink);
	font-family: var(--font-logo);
	font-size: 29px;
	font-weight: 600;
	letter-spacing: .005em;
	white-space: nowrap;
}

.logo__sub {
	display: flex;
	justify-content: space-between;
	margin-top: 7px;
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 8.5px;
	font-weight: 700;
	text-transform: uppercase;
}

.logo__letter {
	font-style: normal;
}

.logo__letter--space {
	flex: 0 0 .5em;
}

/* --- Кнопка каталога ----------------------------------------------------- */

.catalog-button {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 20px;
	border-radius: var(--r);
	background: var(--wood);
	box-shadow: var(--sh-1);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	transition: background .15s;
}

.catalog-button:hover {
	background: var(--wood-2);
}

.catalog-button__burger {
	display: flex;
	flex-direction: column;
	gap: 3.5px;
	width: 16px;
}

.catalog-button__line {
	display: block;
	height: 2px;
	border-radius: 1px;
	background: #fff;
	transition: transform .2s, opacity .2s;
}

.catalog-button--open .catalog-button__line:nth-child(1) {
	transform: translateY(5.5px) rotate(45deg);
}

.catalog-button--open .catalog-button__line:nth-child(2) {
	opacity: 0;
}

.catalog-button--open .catalog-button__line:nth-child(3) {
	transform: translateY(-5.5px) rotate(-45deg);
}

/* --- Поиск ---------------------------------------------------------------
   Блок называется site-search, а не search: класс search WordPress вешает
   на <body> страницы результатов поиска (body_class), и правила формы
   прилетали всей странице — она становилась флексом высотой 48 px.
   -------------------------------------------------------------------------- */

.site-search {
	display: flex;
	flex: 1;
	min-width: 160px;
	height: 48px;
	overflow: hidden;
	border: 1.5px solid var(--ink);
	border-radius: var(--r);
	background: #fff;
	transition: box-shadow .15s;
}

.site-search:focus-within {
	box-shadow: 0 0 0 3px rgba(206, 177, 135, .45);
}

.site-search__input {
	flex: 1;
	padding: 0 16px;
	border: 0;
	outline: 0;
	background: transparent;
}

.site-search__input::placeholder {
	color: var(--muted);
}

.site-search__submit {
	padding: 0 22px;
	border-left: 1px solid var(--line);
	background: var(--warm-1);
	font-weight: 700;
	transition: background .15s;
}

.site-search__submit:hover {
	background: var(--ph);
}

/* --- Иконки пользователя -------------------------------------------------- */

.user-nav {
	display: flex;
	flex: none;
	gap: 6px;
}

.user-nav__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 60px;
	height: 48px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: #fff;
	color: var(--ink-2);
	font-size: 9.5px;
	letter-spacing: -.01em;
	transition: border-color .15s, color .15s;
}

.user-nav__item:hover {
	border-color: var(--wood);
	color: var(--wood);
}

.user-nav__icon {
	width: 17px;
	height: 17px;
}

.user-nav__item--cart {
	flex-direction: row;
	gap: 9px;
	width: auto;
	padding: 0 15px;
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
}

.user-nav__item--cart .user-nav__icon {
	width: 19px;
	height: 19px;
}

.user-nav__badge {
	position: absolute;
	top: -6px;
	right: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--sand);
	box-shadow: var(--sh-1);
	color: var(--ink);
	font-size: 10px;
	font-weight: 800;
}

/* --- Мегаменю ------------------------------------------------------------ */

.mega-menu {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	display: none;
	border-bottom: 1px solid var(--line);
	background: #fff;
	box-shadow: var(--sh-3);
}

.mega-menu--open {
	display: block;
	animation: mega-in .18s ease-out;
}

@keyframes mega-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

.mega-menu__inner {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 300px;
	gap: 36px;
	padding-top: 30px;
	padding-bottom: 34px;
}

.mega-menu__column {
	min-width: 0;
}

.mega-menu__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
	font-size: 15px;
	font-weight: 700;
}

.mega-menu__title-icon {
	width: 22px;
	height: 22px;
	color: var(--wood);
	stroke-width: 1.5;
}

.mega-menu__title-link:hover {
	color: var(--wood);
}

.mega-menu__count {
	color: var(--muted);
	font-size: 12px;
	font-weight: 500;
}

.mega-menu__list {
	margin: 8px 0 22px 32px;
}

.mega-menu__list-item {
	margin-bottom: 5px;
}

.mega-menu__link {
	color: var(--ink-2);
	font-size: 14px;
	transition: color .12s;
}

.mega-menu__link:hover {
	color: var(--wood);
}

.mega-menu__promo {
	display: flex;
	flex-direction: column;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--warm-1);
}

.mega-menu__promo-image {
	height: 132px;
	margin-bottom: 16px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: #fff;
}

.mega-menu__promo-picture {
	width: 100%;
	height: 100%;
	border-radius: 3px;
	object-fit: cover;
}

.mega-menu__promo-title {
	margin-bottom: 6px;
	font-size: 17px;
	font-weight: 700;
}

.mega-menu__promo-text {
	margin-bottom: 14px;
	color: var(--ink-2);
	font-size: 13px;
}

.mega-menu__promo-link {
	align-self: flex-start;
	padding-bottom: 1px;
	border-bottom: 1.5px solid var(--sand);
	color: var(--wood);
	font-size: 14px;
	font-weight: 700;
}

/* --- Подвал -------------------------------------------------------------- */

/* Подвал прижат к низу окна: на короткой странице (корзина с одним
   товаром, пустой поиск) он иначе висит посреди экрана.

   sticky с top:100vh, а не флекс-колонка на body: флекс ломает .container,
   у которого margin: 0 auto — в флексе автоматические поля съедают
   свободное место, и контейнер схлопывается по содержимому вместо того,
   чтобы занять всю ширину. Этот вариант не трогает раскладку страницы
   вообще: если контента много, подвал ведёт себя как обычный блок.

   min-height на body обязателен: без него липкому блоку некуда съезжать —
   он не выходит за нижний край своего контейнера. */
body {
	min-height: 100vh;
}

.footer {
	position: sticky;
	top: 100vh;
	padding: 56px 0 0;
	background: var(--gr-900);
	color: var(--gr-300);
	font-size: 14px;
}

/* Колонок столько, сколько меню назначено. Жёсткое repeat(5, 1fr)
   схлопывало подвал в одну узкую колонку, когда меню ещё не заведены. */
.footer__top {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 32px;
	padding-bottom: 42px;
	border-bottom: 1px solid var(--gr-700);
}

.footer__column {
	min-width: 0;
}

.footer__title {
	margin-bottom: 15px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

.footer__list-item {
	margin-bottom: 8px;
}

.footer__link:hover {
	color: var(--sand);
}

.footer__contacts-phone {
	display: block;
	margin-bottom: 3px;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}

.footer__contacts-row--gap {
	margin-bottom: 10px;
}

.footer__message {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

.footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--gr-700);
	border-radius: var(--r);
	transition: border-color .15s, color .15s;
}

.footer__social-link:hover {
	border-color: var(--sand);
	color: var(--sand);
}

.payment-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.payment-list__item {
	padding: 3px 9px;
	border: 1px solid var(--line);
	border-radius: 3px;
}

/* В подвале фон тёмный — рамка светлой не подходит */
.payment-list--footer .payment-list__item {
	border-color: var(--gr-700);
}

.footer__widget {
	margin-top: 18px;
}

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	justify-content: space-between;
	padding: 24px 0;
	color: var(--gr-400);
	font-size: 13px;
}

/* --- Секция и её заголовок ------------------------------------------------ */

.section {
	padding: 60px 0;
}

.section--tight {
	padding-top: 0;
}

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 26px;
}

.section-head__title {
	font-size: 31px;
	font-weight: 800;
	line-height: 1.12;
}

.section-head__meta {
	margin-right: auto;
	color: var(--muted);
	font-size: 14px;
}

.section-head__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--line-2);
	color: var(--ink-2);
	font-size: 14px;
	transition: color .15s, border-color .15s;
}

.section-head__link:hover {
	border-color: var(--wood);
	color: var(--wood);
}

.section-head__link .icon {
	width: 15px;
	height: 15px;
}

/* --- Первый экран ---------------------------------------------------------
   Фотография лежит подложкой, поверх две декоративные заливки: вуаль
   осветляет левую треть под текст, пятно имитирует свет ламп. Обе
   аккуратно гасятся при prefers-reduced-motion.
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
	background: var(--warm-1);
	color: var(--ink);
}

.hero__inner {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	min-height: 560px;
	padding-top: 60px;
	padding-bottom: 60px;
}

.hero__shot {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.hero__video {
	/* z-index не задаём намеренно. Внутри .hero__shot все слои позиционированы
	   и без z-index, поэтому порядок рисования решает порядок в разметке:
	   фотография → видео → вуаль → свечение. Стоило поставить видео z-index: 1,
	   как оно перекрыло вуаль, и текст на первом экране лёг прямо на кадр. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 50%;
}

/* Видео выключено — под ним остаётся фотография, первый экран не пустеет */
@media (prefers-reduced-motion: reduce) {
	.hero__video {
		display: none;
	}
}

/* Под видео вуаль плотнее и шире. У фотографии кадр один и подобран под
   текст, у ролика он меняется — светлый участок может прийтись ровно на
   заголовок. Правая часть по-прежнему остаётся чистой. */
.hero__shot--video .hero__veil {
	background:
		linear-gradient(100deg,
			rgba(243, 240, 234, .97) 0%,
			rgba(243, 240, 234, .95) 30%,
			rgba(243, 240, 234, .78) 50%,
			rgba(243, 240, 234, .34) 66%,
			rgba(243, 240, 234, 0) 80%),
		linear-gradient(to top, rgba(28, 23, 20, .14) 0%, transparent 28%);
}

.hero__picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 50%;
	transform: scale(1.06);
}

.hero__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg,
			rgba(243, 240, 234, .97) 0%,
			rgba(243, 240, 234, .93) 26%,
			rgba(243, 240, 234, .62) 44%,
			rgba(243, 240, 234, .12) 60%,
			rgba(243, 240, 234, 0) 72%),
		linear-gradient(to top, rgba(28, 23, 20, .14) 0%, transparent 28%);
}

.hero__lights {
	position: absolute;
	top: 14%;
	right: 16%;
	width: 620px;
	height: 620px;
	margin: -310px -310px 0 0;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(255, 214, 160, .30) 0%,
		rgba(255, 214, 160, .10) 38%,
		transparent 68%);
	mix-blend-mode: screen;
	animation: hero-breathe 7s ease-in-out infinite;
}

@keyframes hero-breathe {
	0%, 100% { opacity: .6; transform: scale(1); }
	50%      { opacity: 1;  transform: scale(1.05); }
}

.hero__copy {
	position: relative;
	z-index: 6;
	max-width: 600px;
}

.hero__title {
	margin-bottom: 20px;
	font-size: 54px;
	font-weight: 900;
	letter-spacing: -.035em;
	line-height: 1.05;
	text-wrap: balance;
}

.hero__accent {
	color: var(--bronze);
	font-style: normal;
}

.hero__lead {
	max-width: 47ch;
	margin-bottom: 30px;
	color: var(--ink-2);
	font-size: 17px;
}

.hero__actions {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	max-width: 100%;
}

.hero__cta {
	/* Сетка, а не flex: две равные колонки растягиваются ровно на ширину
	   .hero__actions, а её задаёт самый широкий ребёнок — нижняя плашка
	   .hero__eyebrow. Кнопки и плашка выравниваются по правому краю. */
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

.hero__cta .button {
	width: 100%;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	height: 54px;
	margin-bottom: 30px;
	padding: 0 22px;
	border: 1px solid var(--sand);
	border-radius: var(--r);
	background: var(--sand-2);
	box-shadow: var(--sh-1);
	color: var(--wood-2);
	font-size: 15px;
	font-weight: 700;
	transition: background .16s, color .16s, border-color .16s;
}

.hero__eyebrow:hover {
	border-color: var(--sand);
	background: var(--sand);
	color: #fff;
}

.hero__eyebrow-icon,
.hero__eyebrow-arrow {
	width: 17px;
	height: 17px;
	flex: none;
}

.hero__eyebrow-arrow {
	transition: transform .16s;
}

.hero__eyebrow:hover .hero__eyebrow-arrow {
	transform: translateY(2px);
}

.hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
	padding-top: 22px;
	border-top: 1px solid var(--line-2);
}

.hero__fact {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hero__fact-icon {
	width: 26px;
	height: 26px;
	flex: none;
	color: var(--wood);
	stroke-width: 1.4;
}

.hero__fact-value {
	display: block;
	color: var(--ink);
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.15;
}

.hero__fact-label {
	display: block;
	color: var(--muted);
	font-size: 13px;
}

/* --- Сетки ---------------------------------------------------------------- */

.category-grid,
.product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gap);
}

.category-grid > *,
.product-grid > * {
	min-width: 0;
}

/* --- Плитка категории ----------------------------------------------------- */

.category-card {
	display: flex;
	flex-direction: column;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: #fff;
	transition: border-color .16s, box-shadow .16s, transform .16s;
}

.category-card:hover {
	border-color: var(--line-2);
	box-shadow: var(--sh-2);
	transform: translateY(-2px);
}

.category-card__image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 132px;
	margin-bottom: 16px;
	overflow: hidden;
	border-radius: 4px;
	background: var(--warm-1);
}

.category-card__picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s;
}

.category-card:hover .category-card__picture {
	transform: scale(1.05);
}

.category-card__title {
	margin-bottom: 5px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.category-card__count {
	margin-top: auto;
	color: var(--muted);
	font-size: 13px;
}

.category-card--pro {
	border-color: var(--gr-900);
	background: var(--gr-900);
	color: #fff;
}

.category-card--pro:hover {
	border-color: var(--gr-800);
	background: var(--gr-800);
}

.category-card--pro .category-card__image {
	background: var(--gr-800);
}

.category-card--pro .category-card__count {
	color: var(--sand);
}

/* --- Вкладки -------------------------------------------------------------- */

.tabs {
	display: flex;
	gap: 28px;
	margin-bottom: 26px;
	overflow-x: auto;
	border-bottom: 1px solid var(--line);
	scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
	display: none;
}

.tabs__item {
	margin-bottom: -1px;
	padding-bottom: 13px;
	border-bottom: 2.5px solid transparent;
	color: var(--muted);
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
	transition: color .15s;
}

.tabs__item:hover {
	color: var(--ink-2);
}

.tabs__item--active {
	border-color: var(--sand);
	color: var(--ink);
}

/* --- Карточка товара ------------------------------------------------------ */

.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: #fff;
	transition: border-color .16s, box-shadow .16s;
}

.product-card:hover {
	border-color: var(--line-2);
	box-shadow: var(--sh-2);
}

.product-card__tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 4px 9px;
	border-radius: 3px;
	background: var(--sand);
	color: var(--wood-3);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .01em;
}

.product-card__tag--light {
	background: var(--warm-2);
	color: var(--ink-2);
}

.product-card__image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 224px;
	margin-bottom: 14px;
	overflow: hidden;
	border-radius: 4px;
	background: var(--warm-1);
}

.product-card__picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s;
}

.product-card:hover .product-card__picture {
	transform: scale(1.05);
}

.product-card__sku {
	margin-bottom: 5px;
	color: var(--muted);
	font-size: 12px;
	overflow-wrap: anywhere;
}

.product-card__title {
	min-height: 38px;
	margin-bottom: 10px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.product-card__link:hover {
	color: var(--wood);
}

.product-card__buy {
	display: flex;
	gap: 8px;
}

.button--add {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	height: 44px;
	border-radius: var(--r);
	background: var(--wood);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	transition: background .15s, border-color .15s, color .15s;
}

.button--add:hover {
	background: var(--wood-2);
}

.button--add-ghost {
	border: 1.5px solid var(--line-2);
	background: #fff;
	color: var(--ink-2);
	font-size: 13px;
}

.button--add-ghost:hover {
	border-color: var(--wood);
	background: #fff;
	color: var(--wood);
}

.product-card__fav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	color: var(--ink-2);
	transition: border-color .15s, color .15s;
}

.product-card__fav:hover,
.product-card__fav[aria-pressed="true"] {
	border-color: var(--wood);
	color: var(--wood);
}

/* --- Остаток -------------------------------------------------------------- */

.stock {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
	color: var(--ink-2);
	font-size: 12px;
}

.stock__dot {
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background: var(--ok);
	box-shadow: 0 0 0 3px rgba(78, 122, 78, .14);
}

.stock--low .stock__dot {
	background: var(--sand);
	box-shadow: 0 0 0 3px rgba(166, 143, 105, .18);
}

.stock--out {
	color: var(--muted);
}

.stock--out .stock__dot {
	border: 1.5px solid var(--muted);
	background: transparent;
	box-shadow: none;
}

/* --- Вариации ------------------------------------------------------------- */

.variants {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 11px;
}

.variants__item {
	padding: 3px 8px;
	border: 1px solid var(--line);
	border-radius: 3px;
	color: var(--ink-2);
	font-size: 11px;
	transition: border-color .12s, color .12s, background .12s;
}

.variants__item--active {
	border-color: var(--wood);
	background: var(--warm-1);
	color: var(--wood);
	font-weight: 700;
}

/* --- Блок «Монтажникам» --------------------------------------------------- */

.production-promo {
	position: relative;
	overflow: hidden;
	padding: 50px;
	border-radius: var(--r);
	background: var(--gr-900);
	color: #fff;
}

.production-promo::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -80px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(206, 177, 135, .16) 0%, transparent 66%);
}

.production-promo__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 56px;
	align-items: center;
}

.production-promo__inner > * {
	min-width: 0;
}

.production-promo__title {
	margin-bottom: 14px;
	font-size: 31px;
	font-weight: 800;
	line-height: 1.12;
}

.production-promo__text {
	max-width: 46ch;
	margin-bottom: 26px;
	color: var(--gr-300);
	font-size: 16px;
}

.production-promo__list {
	display: grid;
	gap: 12px;
	margin-bottom: 32px;
}

.production-promo__list-item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 15px;
}

.production-promo__check {
	width: 19px;
	height: 19px;
	flex: none;
	margin-top: 1px;
	color: var(--sand);
	stroke-width: 2;
}

.production-promo__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* --- Быстрый заказ -------------------------------------------------------- */

.quick-order {
	padding: 28px;
	border: 1px solid var(--gr-700);
	border-radius: var(--r);
	background: var(--gr-800);
}

.quick-order__title {
	margin-bottom: 5px;
	font-size: 17px;
	font-weight: 700;
}

.quick-order__text {
	margin-bottom: 16px;
	color: var(--gr-400);
	font-size: 13px;
}

.quick-order__row {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.quick-order__input {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 13px;
	border: 1px solid var(--gr-700);
	border-radius: 4px;
	outline: 0;
	background: var(--gr-900);
	color: #fff;
	transition: border-color .15s;
}

.quick-order__input::placeholder {
	color: var(--gr-600);
}

.quick-order__input:focus {
	border-color: var(--sand);
}

.quick-order__input--qty {
	flex: none;
	width: 80px;
	text-align: center;
}

.quick-order__more {
	display: inline-block;
	margin-bottom: 18px;
	padding-bottom: 1px;
	border-bottom: 1px dashed var(--gr-600);
	color: var(--gr-300);
	font-size: 13px;
	transition: color .15s, border-color .15s;
}

.quick-order__more:hover {
	border-color: var(--gr-400);
	color: #fff;
}

.quick-order__submit {
	width: 100%;
	margin-top: 10px;
}

/* --- Собственное производство --------------------------------------------- */

.production {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--paper);
	scroll-margin-top: 96px;
}

.production__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
	padding-top: 60px;
	padding-bottom: 60px;
}

.production__image {
	position: relative;
	height: 340px;
	overflow: hidden;
	border: 1px solid var(--line-2);
	border-radius: var(--r);
	background: var(--ph);
}

.production__picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.production__badge {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 2;
	padding: 6px 12px;
	border-radius: 3px;
	background: var(--wood);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .02em;
}

.production__title {
	margin-bottom: 16px;
	font-size: 31px;
	font-weight: 800;
	line-height: 1.12;
}

.production__text {
	max-width: 48ch;
	margin-bottom: 22px;
	color: var(--ink-2);
	font-size: 16px;
}

.production__facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-bottom: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--line-2);
}

.production__fact-value {
	display: block;
	color: var(--wood);
	font-family: var(--font-head);
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -.03em;
}

.production__fact-label {
	color: var(--muted);
	font-size: 13px;
}

/* --- Бренды --------------------------------------------------------------- */

.brands {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 12px;
}

.brands__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 86px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: #fff;
	transition: border-color .16s, box-shadow .16s;
}

.brands__item:hover {
	border-color: var(--wood);
	box-shadow: var(--sh-2);
}

.brands__logo {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 48px;
	object-fit: contain;
	opacity: .62;
	filter: grayscale(1);
	transition: filter .18s, opacity .18s;
}

.brands__item:hover .brands__logo {
	opacity: 1;
	filter: none;
}

/* --- Доверие -------------------------------------------------------------- */

.trust {
	border-top: 1px solid var(--line);
	background: var(--paper);
}

.trust__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gap);
	padding-top: 60px;
	padding-bottom: 60px;
}

.trust__item {
	display: flex;
	gap: 15px;
}

.trust__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: none;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--warm-1);
	color: var(--wood);
}

.trust__icon .icon {
	width: 22px;
	height: 22px;
}

.trust__title {
	margin-bottom: 4px;
	font-size: 15px;
	font-weight: 700;
}

.trust__text {
	color: var(--ink-2);
	font-size: 13px;
	line-height: 1.45;
}

/* --- SEO-текст ------------------------------------------------------------ */

.seo {
	padding: 44px 0;
	border-top: 1px solid var(--line);
	background: var(--paper);
}

.seo__title {
	margin-bottom: 14px;
	font-size: 23px;
	font-weight: 800;
}

.seo__text {
	position: relative;
	max-width: 82ch;
	max-height: 76px;
	overflow: hidden;
	color: var(--ink-2);
	font-size: 14px;
	transition: max-height .3s;
}

.seo__text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 34px;
	background: linear-gradient(transparent, var(--paper));
}

.seo__text--open {
	max-height: 900px;
}

.seo__text--open::after {
	content: none;
}

.seo__text p {
	margin-bottom: 11px;
}

.seo__toggle {
	margin-top: 12px;
	padding-bottom: 1px;
	border-bottom: 1.5px solid var(--sand);
	color: var(--wood);
	font-size: 14px;
	font-weight: 700;
}

/* --- Хлебные крошки ------------------------------------------------------- */

.breadcrumbs {
	padding-bottom: 12px;
	color: var(--muted);
	font-size: 13px;
}

.breadcrumbs__link:hover {
	color: var(--wood);
}

.breadcrumbs__sep {
	margin: 0 7px;
	color: var(--line-2);
}

/* --- Тёмная шапка страницы ------------------------------------------------
   Фотография приходит из шаблона через --head-img. Если её нет, остаётся
   ровная тёмная плашка — градиент поверх рассчитан и на этот случай.
   -------------------------------------------------------------------------- */

.page-head {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 250px;
	overflow: hidden;
	padding: 30px 0 28px;
	border-bottom: 1px solid var(--line);
	background: var(--gr-900) var(--head-img) center right / cover no-repeat;
	color: #fff;
}

.page-head::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(30, 22, 17, .90) 0%,
		rgba(30, 22, 17, .72) 42%,
		rgba(30, 22, 17, .34) 74%,
		rgba(30, 22, 17, .18) 100%);
}

.page-head__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.page-head__title {
	margin-bottom: 9px;
	color: #fff;
	font-size: 38px;
	font-weight: 800;
	letter-spacing: -.03em;
}

.page-head__text {
	max-width: 74ch;
	color: rgba(255, 255, 255, .82);
	font-size: 15.5px;
}

.page-head .breadcrumbs {
	color: rgba(255, 255, 255, .62);
}

.page-head .breadcrumbs__link:hover {
	color: #fff;
}

.page-head .breadcrumbs__sep {
	color: rgba(255, 255, 255, .35);
}

.page-head__totals {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin-top: 16px;
}

.page-head__total {
	color: rgba(255, 255, 255, .7);
	font-size: 13px;
}

.page-head__total-value {
	display: block;
	color: var(--sand-2);
	font-family: var(--font-head);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
}

/* --- Сортировка ----------------------------------------------------------- */

.sortline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 16px;
	color: rgba(255, 255, 255, .62);
	font-size: 13.5px;
}

.sortline__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sortline__chip {
	padding: 5px 13px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 20px;
	background: rgba(255, 255, 255, .10);
	color: rgba(255, 255, 255, .88);
	transition: border-color .15s, background .15s, color .15s;
}

.sortline__chip:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .20);
	color: #fff;
}

.sortline__chip--active {
	border-color: var(--sand);
	background: var(--sand);
	color: var(--wood-3);
	font-weight: 700;
}

/* Вне тёмной шапки — на светлом фоне */
.catalog .sortline {
	margin-bottom: 20px;
	color: var(--muted);
}

.catalog .sortline__chip {
	border-color: var(--line-2);
	background: #fff;
	color: var(--ink-2);
}

.catalog .sortline__chip:hover {
	border-color: var(--wood);
	color: var(--wood);
}

.catalog .sortline__chip--active {
	border-color: var(--wood);
	background: var(--wood);
	color: #fff;
}

/* --- Навигация по разделам ------------------------------------------------ */

.section-nav {
	position: sticky;
	top: var(--hh);
	z-index: 50;
	border-bottom: 1px solid var(--line);
	background: var(--paper);
}

.section-nav--stuck {
	box-shadow: 0 8px 20px -16px rgba(28, 23, 20, .55);
}

.section-nav__inner {
	position: relative;

	/* Отступы отдаём полосе прокрутки, иначе крайние пункты обрезались бы
	   на краю контейнера, а не уезжали под стрелки. */
	padding-right: 0;
	padding-left: 0;
}

.section-nav__scroll {
	display: flex;
	gap: 8px;
	padding: 11px 24px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.section-nav__scroll::-webkit-scrollbar {
	display: none;
}

.section-nav__item {
	display: flex;
	align-items: center;
	height: 38px;
	flex: none;
	padding: 0 17px;
	border: 1px solid var(--line-2);
	border-radius: var(--r);
	background: var(--paper);
	color: var(--ink-2);
	font-family: var(--font-head);
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	transition: background .15s, border-color .15s, color .15s;
}

.section-nav__item:hover {
	border-color: var(--wood);
	background: var(--warm-1);
	color: var(--wood);
}

.section-nav__item--active {
	border-color: var(--wood);
	background: var(--wood);
	color: #fff;
}

.section-nav__item--active:hover {
	background: var(--wood-2);
	color: #fff;
}

.section-nav__arrow {
	position: absolute;
	top: 0;
	z-index: 3;
	display: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 60px;
	color: var(--ink-2);
}

.section-nav__arrow:hover {
	color: var(--wood);
}

.section-nav__arrow--visible {
	display: flex;
}

.section-nav__arrow--left {
	left: 0;
	background: linear-gradient(90deg, var(--paper) 58%, transparent);
}

.section-nav__arrow--right {
	right: 0;
	background: linear-gradient(270deg, var(--paper) 58%, transparent);
}

.section-nav__arrow .icon {
	width: 19px;
	height: 19px;
	stroke-width: 2;
}

/* --- Группа разделов на странице каталога --------------------------------- */

.category-group {
	padding: 44px 0 6px;
	scroll-margin-top: calc(var(--hh) + 56px);
}

.category-group:first-of-type {
	padding-top: 34px;
}

.category-group__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 20px;
}

.category-group__title {
	font-size: 26px;
	font-weight: 800;
}

.category-group__head .section-head__link {
	margin-left: auto;
}

.subcategory-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}

.subcategory-grid > * {
	min-width: 0;
}

.subcategory-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: #fff;
	transition: border-color .16s, box-shadow .16s, transform .16s;
}

.subcategory-card:hover {
	border-color: var(--line-2);
	box-shadow: var(--sh-2);
	transform: translateY(-2px);
}

.subcategory-card__image {
	height: 120px;
	overflow: hidden;
	background: var(--warm-1);
}

.subcategory-card__picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s;
}

.subcategory-card:hover .subcategory-card__picture {
	transform: scale(1.05);
}

.subcategory-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 12px 13px 14px;
}

.subcategory-card__title {
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.28;
}

.subcategory-card__count {
	margin-top: auto;
	color: var(--muted);
	font-size: 12.5px;
}

/* --- Подраздел на странице раздела ---------------------------------------- */

.subsection {
	padding: 40px 0 4px;
	scroll-margin-top: calc(var(--hh) + 56px);
}

.subsection:first-of-type {
	padding-top: 30px;
}

.subsection__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 18px;
}

.subsection__title {
	font-size: 23px;
	font-weight: 800;
}

.showall {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 46px;
	margin-top: 20px;
	padding: 0 22px;
	border: 1.5px solid var(--line-2);
	border-radius: var(--r);
	color: var(--ink);
	font-size: 14.5px;
	font-weight: 700;
	transition: border-color .16s, background .16s, color .16s;
}

.showall:hover {
	border-color: var(--wood);
	background: var(--warm-1);
	color: var(--wood);
}

.showall__count {
	font-weight: 800;
}

.showall .icon {
	width: 17px;
	height: 17px;
}

/* --- Секция карточки товара ----------------------------------------------- */

.section--bordered {
	padding: 48px 0;
	border-top: 1px solid var(--line);
}

.section__title {
	margin-bottom: 8px;
	font-size: 25px;
	font-weight: 800;
}

.section__lead {
	max-width: 70ch;
	margin-bottom: 24px;
	color: var(--ink-2);
	font-size: 14.5px;
}

/* --- Как в интерьере ------------------------------------------------------
   Первая фотография занимает четыре клетки, остальные по одной. Подпись
   лежит поверх снимка на градиенте — так она читается на любом фоне.
   -------------------------------------------------------------------------- */

.interior__lead {
	max-width: 60ch;
	margin: -6px 0 22px;
	color: var(--ink-2);
	font-size: 15px;
}

.interior__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.interior__shot {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--warm-1);
}

.interior__shot--big {
	grid-column: span 2;
	grid-row: span 2;
}

.interior__picture {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .4s;
}

.interior__shot--big .interior__picture {
	aspect-ratio: 4 / 3;
}

.interior__shot:hover .interior__picture {
	transform: scale(1.04);
}

.interior__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 26px 14px 11px;
	background: linear-gradient(transparent, rgba(19, 16, 13, .82));
	color: #fff;
	font-size: 12.5px;
	line-height: 1.3;
}

.interior__shot--big .interior__caption {
	padding: 34px 18px 15px;
	font-size: 14px;
}

/* --- Карточка товара: раскладка ------------------------------------------- */

/* Тоже с тегом: класс product WooCommerce ставит на карточки товара
   в своих списках, и голый селектор добавлял бы им отступ. */
main.product {
	padding-top: 20px;
}

.product__layout {
	display: grid;
	grid-template-columns: 1.1fr 1.1fr 350px;
	gap: 36px;
	padding-bottom: 52px;
}

.product__layout > * {
	min-width: 0;
}

/* --- Галерея -------------------------------------------------------------- */

.gallery__main {
	position: relative;
	height: 520px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--warm-1);
}

.gallery__picture {
	width: 100%;
	height: 100%;
	padding: 22px;
	object-fit: contain;
}

.gallery__thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	padding-bottom: 2px;
	overflow-x: auto;
	scrollbar-width: none;
}

.gallery__thumbs::-webkit-scrollbar {
	display: none;
}

.gallery__thumb {
	width: 92px;
	height: 92px;
	flex: none;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--warm-1);
	transition: border-color .15s;
}

.gallery__thumb:hover {
	border-color: var(--line-2);
}

.gallery__thumb--active {
	border-width: 2px;
	border-color: var(--wood);
}

.gallery__thumb-picture {
	width: 100%;
	height: 100%;
	padding: 8px;
	object-fit: contain;
}

.gallery__hint {
	margin-top: 12px;
	color: var(--muted);
	font-size: 12px;
}

/* Крупное фото — кнопка: клик открывает полный размер.
   Кнопку раздеваем до картинки, рамку и фон убираем. */
.gallery__zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

/* --- Просмотр фото на весь экран ------------------------------------------
   Скрытие — атрибутом hidden, правило [hidden] стоит последним в файле
   и перебивает display: flex отсюда.
   -------------------------------------------------------------------------- */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	background: rgba(28, 23, 20, .93);
}

.lightbox__picture {
	max-width: 100%;
	max-height: 90vh;
	border-radius: var(--r);
	object-fit: contain;
}

.lightbox__close,
.lightbox__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}

.lightbox__close:hover,
.lightbox__nav:hover {
	border-color: rgba(255, 255, 255, .5);
	background: rgba(255, 255, 255, .18);
}

.lightbox__close {
	position: absolute;
	top: 18px;
	right: 20px;
	font-size: 30px;
}

/* Кнопка на время запроса: клики не проходят, видно, что идёт работа */
.button--add.is-loading,
.single_add_to_cart_button.is-loading {
	opacity: .55;
	pointer-events: none;
}

@media (max-width: 620px) {
	.lightbox {
		padding: 12px;
	}

	.lightbox__nav {
		position: absolute;
		bottom: 18px;
	}

	.lightbox__nav--prev {
		left: 20px;
	}

	.lightbox__nav--next {
		right: 20px;
	}
}

/* --- Описание и характеристики -------------------------------------------- */

.product-info__title {
	margin-bottom: 13px;
	font-size: 27px;
	font-weight: 800;
	line-height: 1.18;
}

.product-info__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-bottom: 24px;
	color: var(--muted);
	font-size: 13px;
}

.product-info__meta b {
	color: var(--ink-2);
	font-weight: 700;
}

.product-info__short {
	margin-top: 22px;
	color: var(--ink-2);
	font-size: 14.5px;
}

.product-info__docs {
	margin-top: 20px;
	display: grid;
	gap: 8px;
}

.product-info__doc-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wood);
	font-size: 14px;
	font-weight: 700;
}

.product-info__doc-link .icon {
	width: 17px;
	height: 17px;
}

/* Три колонки: название — точки — значение. Точки тянутся, остальное нет */
.key-specs {
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.key-specs__title {
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 800;
}

.key-specs__list {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0 10px;
	align-items: baseline;
}

.key-specs__list + .key-specs__list {
	margin-top: 9px;
}

.key-specs__row {
	display: contents;
}

.key-specs__name {
	grid-column: 1;
	color: var(--muted);
	font-size: 14px;
}

.key-specs__dots {
	grid-column: 2;
	border-bottom: 1px dotted var(--line-2);
	transform: translateY(-4px);
}

.key-specs__value {
	grid-column: 3;
	font-size: 14px;
	font-weight: 700;
	text-align: right;
}

.key-specs__gap {
	grid-column: 1 / -1;
	height: 9px;
}

.key-specs__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	padding-bottom: 1px;
	border-bottom: 1.5px solid var(--sand);
	color: var(--wood);
	font-size: 14px;
	font-weight: 700;
}

.key-specs__toggle .icon {
	width: 15px;
	height: 15px;
	transition: transform .2s;
}

.key-specs__toggle--open .icon {
	transform: rotate(180deg);
}

/* --- Блок покупки --------------------------------------------------------- */

.buybox {
	position: sticky;
	top: 94px;
	align-self: start;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--warm-1);
	box-shadow: var(--sh-1);
}

.buybox__price {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin-bottom: 4px;
}

.buybox__price .price__value {
	font-size: 33px;
}

.buybox__price .price__unit {
	font-size: 15px;
}

.buybox__note {
	margin-bottom: 14px;
	color: var(--muted);
	font-size: 13px;
}

.buybox__wholesale {
	margin-bottom: 18px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: #fff;
	color: var(--ink-2);
	font-size: 13px;
}

.buybox__wholesale a {
	padding-bottom: 1px;
	border-bottom: 1.5px solid var(--sand);
	color: var(--wood);
	font-weight: 700;
}

/* Форма WooCommerce: кнопка и количество в одну строку */
.buybox__form form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.buybox__form button[type="submit"] {
	flex: 1;
	min-width: 140px;
	height: 54px;
	padding: 0 20px;
	border-radius: var(--r);
	background: var(--wood);
	color: #fff;
	font-weight: 700;
	transition: background .15s;
}

.buybox__form button[type="submit"]:hover {
	background: var(--wood-2);
}

.buybox__contact {
	width: 100%;
	margin-top: 10px;
}

.quantity {
	display: flex;
	flex: none;
	height: 54px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: #fff;
}

.quantity__button {
	width: 40px;
	color: var(--ink-2);
	font-size: 18px;
}

.quantity__button:hover {
	color: var(--wood);
}

.quantity__input {
	width: 56px;
	border: 0;
	outline: 0;
	background: transparent;
	font-weight: 700;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
}

.quantity__unit {
	display: flex;
	align-items: center;
	padding-right: 13px;
	color: var(--muted);
	font-size: 13px;
}

.quantity--fixed {
	display: none;
}

.buybox__step {
	margin-bottom: 16px;
	color: var(--muted);
	font-size: 12px;
}

.buybox__delivery {
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.payment-list--top {
	display: grid;
	gap: 10px;
}

.payment-list__row {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ink-2);
	font-size: 13px;
}

.payment-list__row .icon {
	width: 19px;
	height: 19px;
	flex: none;
	color: var(--wood);
}

/* --- Призыв к комплектующим ----------------------------------------------- */

.kit-cta {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 4px 0 18px;
	padding: 13px 15px;
	border: 1px solid var(--sand);
	border-radius: var(--r);
	background: var(--sand-2);
	text-align: left;
	transition: background .15s, border-color .15s;
}

.kit-cta:hover {
	border-color: var(--wood);
	background: var(--sand);
}

.kit-cta__icon {
	width: 22px;
	height: 22px;
	color: var(--wood-2);
}

.kit-cta__title {
	display: block;
	color: var(--wood-2);
	font-family: var(--font-head);
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.kit-cta__text {
	color: var(--wood);
	font-size: 12.5px;
}

.kit-cta__arrow {
	width: 17px;
	height: 17px;
	margin-left: auto;
	color: var(--wood-2);
}

/* --- Карточка комплектующего ---------------------------------------------- */

.section--kit {
	border-bottom: 1px solid var(--line);
	background: var(--warm-1);
}

.kit-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 22px;
}

.kit-grid > * {
	min-width: 0;
}

.kit-card {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: #fff;
	transition: border-color .16s, box-shadow .16s;
}

.kit-card:hover {
	border-color: var(--line-2);
	box-shadow: var(--sh-2);
}

.kit-card__role {
	align-self: flex-start;
	margin-bottom: 12px;
	padding: 3px 8px;
	border-radius: 3px;
	background: var(--warm-1);
	color: var(--wood);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.kit-card__image {
	display: block;
	height: 140px;
	margin-bottom: 13px;
	overflow: hidden;
	border-radius: 4px;
	background: var(--warm-1);
}

.kit-card__picture {
	width: 100%;
	height: 100%;
	padding: 10px;
	object-fit: contain;
}

.kit-card__sku {
	margin-bottom: 5px;
	color: var(--muted);
	font-size: 12px;
}

.kit-card__title {
	min-height: 38px;
	margin-bottom: 9px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
}

.kit-card__why {
	margin-bottom: 12px;
	color: var(--muted);
	font-size: 12.5px;
	line-height: 1.4;
}

.kit-card .price__value {
	font-size: 19px;
}

/* --- Панель покупки внизу экрана ------------------------------------------ */

.sticky-buy {
	display: none;
}

/* ==========================================================================
   КОРЗИНА, ОФОРМЛЕНИЕ И КАБИНЕТ
   --------------------------------------------------------------------------
   Единственное место в файле с классами не по БЭМ: это разметка самого
   WooCommerce. Шаблоны корзины и оформления намеренно НЕ переопределены —
   в них десятки хуков, которые ломаются при каждом обновлении плагина.
   Дешевле одеть чужую разметку, чем тащить её копию в тему.

   Если какой-то блок придётся переопределить, класс по БЭМ добавляем
   рядом со штатным, а не вместо него.
   ========================================================================== */

/* Корзина, оформление и кабинет — это обычные страницы WordPress с
   шорткодом или блоком, поэтому идут через page.php и получают .page,
   а не обёртку .catalog из inc/woocommerce.php. Привязка к .catalog не
   срабатывала вообще — отсюда и «нет дизайна» у кабинета. */
.woocommerce-cart main.page,
.woocommerce-checkout main.page,
.woocommerce-account main.page {
	padding-top: 36px;
}

/* .page__content сужен до 760px под читаемую колонку текста. Корзине,
   оформлению и кабинету эта ширина мала — там таблицы и две колонки. */
.woocommerce-cart .page__content,
.woocommerce-checkout .page__content,
.woocommerce-account .page__content {
	max-width: none;
	font-size: inherit;
	color: inherit;
}

/* --- Кнопки плагина -------------------------------------------------------- */

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 24px;
	border: 1.5px solid var(--line-2);
	border-radius: var(--r);
	background: #fff;
	color: var(--ink);
	font-weight: 700;
	transition: border-color .15s, background .15s, color .15s;
}

.woocommerce .button:hover {
	border-color: var(--wood);
	color: var(--wood);
}

.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce .checkout-button {
	border-color: var(--wood);
	background: var(--wood);
	color: #fff;
}

.woocommerce .button.alt:hover,
.woocommerce .checkout-button:hover {
	background: var(--wood-2);
	color: #fff;
}

.woocommerce .button:disabled,
.woocommerce .button[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

/* --- Таблица корзины ------------------------------------------------------- */

.woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--r);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	background: var(--warm-1);
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 800;
	text-align: left;
}

.woocommerce table.shop_table td {
	padding: 16px;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}

.woocommerce table.shop_table tr:last-child td {
	border-bottom: 0;
}

.woocommerce table.shop_table .product-thumbnail img {
	width: 72px;
	height: 72px;
	border: 1px solid var(--line);
	border-radius: 4px;
	object-fit: cover;
}

.woocommerce table.shop_table .product-name a {
	font-weight: 600;
}

.woocommerce table.shop_table .product-name a:hover {
	color: var(--wood);
}

.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal {
	font-family: var(--font-head);
	font-weight: 800;
	white-space: nowrap;
}

.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--muted);
	font-size: 18px;
	line-height: 1;
	transition: background .15s, color .15s;
}

.woocommerce a.remove:hover {
	background: var(--warm-2);
	color: var(--ink);
}

.woocommerce .actions .coupon {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

/* --- Итоги и оформление ---------------------------------------------------- */

.woocommerce .cart-collaterals {
	display: flex;
	justify-content: flex-end;
	margin-top: 28px;
}

.woocommerce .cart_totals {
	width: 100%;
	max-width: 420px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--warm-1);
}

.woocommerce .cart_totals h2 {
	margin-bottom: 14px;
	font-size: 19px;
	font-weight: 800;
}

.woocommerce .cart_totals table.shop_table {
	border: 0;
	background: transparent;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
	background: transparent;
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
	border-bottom: 0;
	font-size: 17px;
}

.woocommerce .checkout-button {
	width: 100%;
	margin-top: 16px;
	height: 54px;
}

/* Правила ниже — только для классического шаблона оформления.
   Привязка к form.checkout, а не к .woocommerce-checkout: последний
   WordPress вешает на <body>, и на блочном оформлении эти правила
   ломали плавающие подписи — поле страны схлопывалось в 48 px,
   подпись налезала на значение. */
form.checkout .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

form.checkout h3 {
	margin-bottom: 14px;
	font-size: 19px;
	font-weight: 800;
}

.woocommerce-checkout #order_review_heading {
	margin-top: 36px;
}

form.checkout .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
}

form.checkout .form-row label {
	color: var(--ink-2);
	font-size: 13px;
	font-weight: 600;
}

form.checkout .input-text,
form.checkout select,
.woocommerce .select2-selection {
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--line-2);
	border-radius: var(--r);
	outline: 0;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}

form.checkout textarea.input-text {
	height: auto;
	min-height: 96px;
	padding: 12px 14px;
}

form.checkout .input-text:focus,
form.checkout select:focus {
	border-color: var(--wood);
	box-shadow: 0 0 0 3px rgba(206, 177, 135, .35);
}

.woocommerce-checkout #payment {
	margin-top: 18px;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--warm-1);
}

.woocommerce-checkout #payment ul.payment_methods {
	display: grid;
	gap: 10px;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
}

.woocommerce-checkout #payment .payment_box {
	margin-top: 8px;
	padding: 12px 14px;
	border-radius: 4px;
	background: #fff;
	color: var(--ink-2);
	font-size: 13px;
}

.woocommerce-checkout #place_order {
	width: 100%;
	height: 54px;
}

/* --- Уведомления ----------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--sand);
	border-radius: var(--r);
	background: var(--warm-1);
	list-style: none;
}

.woocommerce-error {
	border-left-color: #B4453C;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
	height: 40px;
	padding: 0 16px;
}

/* --- Пагинация -------------------------------------------------------------
   Один набор правил на архивы WordPress и WooCommerce: разметка разная,
   а выглядеть должно одинаково.
   -------------------------------------------------------------------------- */

.woocommerce-pagination ul,
.pagination .nav-links,
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 36px 0 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-pagination li {
	border: 0;
}

.woocommerce-pagination a,
.woocommerce-pagination span,
.pagination .page-numbers,
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--line-2);
	border-radius: var(--r);
	background: #fff;
	color: var(--ink-2);
	font-weight: 700;
	transition: border-color .15s, background .15s, color .15s;
}

.woocommerce-pagination a:hover,
.pagination .page-numbers:hover {
	border-color: var(--wood);
	color: var(--wood);
}

.woocommerce-pagination .current,
.pagination .page-numbers.current,
.navigation.pagination .page-numbers.current {
	border-color: var(--wood);
	background: var(--wood);
	color: #fff;
}

.pagination .page-numbers .icon {
	width: 18px;
	height: 18px;
}

/* --- Текстовая страница --------------------------------------------------
   Служебные страницы и блог. Каталог, карточка и главная получат свои блоки
   на следующих этапах — здесь только то, без чего index.php, page.php и
   404.php выглядели бы голыми.
   -------------------------------------------------------------------------- */

/* Отступы внутренних страниц.

   ⚠ Селектор обязательно с тегом: main.page, а не .page.

   WordPress вешает класс page на <body> КАЖДОЙ страницы, статическая
   главная в том числе. Голый .page прилетал телу документа, и на главной
   появлялись лишние поля сверху и снизу — к блокам главной это отношения
   не имело, потому и не находилось. Тег в селекторе отсекает body: телом
   документа <main> быть не может.

   То же самое было с формой поиска: класс .search занят ядром, блок
   переименован в .site-search. Проверяя новые классы, стоит заглядывать
   в список body_class(). */
main.page {
	padding-top: 40px;
	padding-bottom: 72px;
}

.page__title {
	margin-bottom: 24px;
	font-size: 34px;
	font-weight: 800;
}

.page__content {
	max-width: 760px;
	color: var(--ink-2);
	font-size: 16px;
	line-height: 1.6;
}

.page__content h2,
.page__content h3 {
	margin: 32px 0 12px;
	color: var(--ink);
}

.page__content p,
.page__content ul,
.page__content ol {
	margin-bottom: 16px;
}

.page__content ul,
.page__content ol {
	padding-left: 22px;
	list-style: disc;
}

.page__content ol {
	list-style: decimal;
}

.page__content a {
	border-bottom: 1px solid var(--sand);
	color: var(--wood);
}

.page__empty {
	margin-bottom: 20px;
	color: var(--muted);
}

.page__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: var(--gap);
}

/* Обёртка страниц WooCommerce. Боковые отступы — забота .container,
   который стоит на том же элементе; здесь только вертикальные. */
.catalog {
	padding-top: 28px;
	padding-bottom: 72px;
}

/* --- Анонс записи -------------------------------------------------------- */

.teaser {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--paper);
}

.teaser__image {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--ph);
}

.teaser__picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.teaser__body {
	padding: 18px 20px 22px;
}

.teaser__title {
	margin-bottom: 6px;
	font-size: 18px;
	font-weight: 700;
}

.teaser__link:hover {
	color: var(--wood);
}

.teaser__date {
	margin-bottom: 10px;
	color: var(--muted);
	font-size: 13px;
}

.teaser__excerpt {
	color: var(--ink-2);
}

/* --- 404 ----------------------------------------------------------------- */

.page-404 {
	max-width: 560px;
	margin: 0 auto;
	padding: 40px 0 60px;
	text-align: center;
}

.page-404__code {
	color: var(--line-2);
	font-family: var(--font-head);
	font-size: 118px;
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: 1;
}

.page-404__title {
	margin: 10px 0 12px;
	font-size: 28px;
	font-weight: 800;
}

.page-404__text {
	margin-bottom: 26px;
	color: var(--ink-2);
}

.page-404__button {
	margin-top: 18px;
}

/* --- Нижняя панель на мобильном ------------------------------------------ */

.mobile-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	display: none;
	border-top: 1px solid var(--line);
	background: var(--paper);
}

.mobile-bar__item {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 9px 0 7px;
	color: var(--ink-2);
	font-size: 10px;
}

.mobile-bar__badge {
	position: absolute;
	top: 2px;
	right: 50%;
	margin-right: -22px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--sand);
	color: var(--ink);
	font-size: 10px;
	font-weight: 800;
}


/* --- Блочная корзина и оформление -----------------------------------------
   WooCommerce с некоторых версий ставит корзину и оформление блоками, а не
   шорткодом. Разметка у них своя (wc-block-*), и правила выше, написанные
   под классический шаблон, на неё не ложатся — поэтому кнопка «Перейти к
   оформлению» выходила серой с тёмным текстом.

   Здесь выправлены только заметные вещи: ширина и главные кнопки. Остальное
   рисуют стили плагина, их мы больше не снимаем.

   ⚠ Если нужен ровно тот дизайн корзины, что в прототипе, — переключить
   страницы на классические шорткоды, см. README.
   -------------------------------------------------------------------------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	max-width: none;
}

/* Кнопке задаём только цвет и рамку. Раскладку не трогаем: плагин сам
   расставляет внутри подпись и крутилку загрузки, и чужой display: flex
   сбивал ему позиционирование — текст на кнопке пропадал и проявлялся
   только при наведении. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	border: 1.5px solid var(--wood);
	border-radius: var(--r);
	background: var(--wood);
	color: #fff;
	font-weight: 700;
	transition: background .15s, border-color .15s;
}

/* Подпись лежит в своём span, цвет кнопки на неё не наследуется */
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
	color: #fff;
	opacity: 1;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	border-color: var(--wood-2);
	background: var(--wood-2);
	color: #fff;
}

/* Поля блочной формы: берём на себя только рамку, скругление и подсветку
   фокуса. Высоту и внутренние отступы оставляем плагину — там плавающие
   подписи, и своя высота их ломает. */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-combobox input,
.wc-block-components-country-input select,
.wc-block-components-state-input select,
.wc-block-components-form .wc-blocks-components-select__container {
	border-color: var(--line-2);
	border-radius: var(--r);
	background: var(--paper);
	color: var(--ink);
}

.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-country-input select:focus,
.wc-block-components-state-input select:focus {
	border-color: var(--sand);
	box-shadow: 0 0 0 3px rgba(166, 143, 105, .22);
	outline: 0;
}

/* Воздух между полями. Сетку и внутренние отступы по-прежнему не трогаем:
   подпись в этих полях всплывающая, она позиционируется от верхнего края,
   и своя высота её сбивает. Меняем только расстояние между строками. */
.wc-block-components-address-form .wc-block-components-text-input,
.wc-block-components-address-form .wc-block-components-country-input,
.wc-block-components-address-form .wc-block-components-state-input,
.wc-block-components-address-form .wc-block-components-combobox,
.wc-block-components-address-form .wc-block-components-checkbox {
	margin-top: 16px;
}

.wc-block-components-address-form {
	row-gap: 16px;
}

/* Поле страны идёт следом за строкой «Имя / Фамилия» и своего отступа
   не получает — сетка считает его началом новой строки. */
.wc-block-components-address-form__country.wc-block-components-country-input {
	margin-top: 15px;
}

/* Описание товара в строке корзины.

   Текст «Со склада в Караганде. Отгрузка в день заказа.» приходит не из
   темы: блочная корзина показывает краткое описание товара. Убрать его
   насовсем можно, очистив поле «Краткое описание» у товаров; здесь просто
   не выводим — в корзине человек уже выбрал товар, и реклама склада ему
   только мешает считать сумму. */
.wc-block-components-product-metadata__description {
	display: none;
}

/* --- Страница «Заказ принят» ----------------------------------------------
   Текст уведомления — флекс с переносом (см. .woocommerce-notice выше),
   поэтому строку про менеджера растягиваем на всю ширину, и кнопка
   встаёт под ней, а не сбоку.
   -------------------------------------------------------------------------- */

.thankyou__support {
	width: 100%;
	margin-top: 6px;
	color: var(--ink-2);
	font-weight: 400;
}

.thankyou__whatsapp {
	margin-top: 16px;
	gap: 9px;
}

.woocommerce-order .woocommerce-customer-details {
	margin-top: 32px;
}

.woocommerce-order .woocommerce-column__title {
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: 800;
}

.woocommerce-order address {
	font-style: normal;
	line-height: 1.6;
	color: var(--ink-2);
}


/* ==========================================================================
   ИЗБРАННОЕ
   --------------------------------------------------------------------------
   Сетка — та же .product-grid, что в каталоге. Здесь только пустое
   состояние и подсказка про вход.
   ========================================================================== */

.favorites__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 56px 24px 64px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--warm-1);
}

.favorites__empty-icon {
	width: 40px;
	height: 40px;
	margin-bottom: 18px;
	color: var(--line-2);
}

.favorites__empty-title {
	margin: 0 0 8px;
	color: var(--ink);
	font-size: 20px;
	font-weight: 800;
}

.favorites__empty-text {
	max-width: 46ch;
	margin: 0 0 24px;
	color: var(--muted);
	line-height: 1.55;
}

.favorites__hint {
	margin: 28px 0 0;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--warm-1);
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.5;
}

.favorites__hint a {
	border-bottom: 1px solid var(--sand);
	color: var(--wood);
	font-weight: 700;
}

@media (max-width: 620px) {
	.favorites__empty {
		padding: 40px 18px 46px;
	}
}


/* ==========================================================================
   КАБИНЕТ
   --------------------------------------------------------------------------
   Разметка шорткода [woocommerce_my_account]. Слева навигация, справа
   содержимое; у неавторизованного — одна колонка с формой входа.

   Всё привязано к .woocommerce-account, чтобы не задеть оформление заказа:
   у него свои правила form-row выше, и общий селектор перебил бы их.
   ========================================================================== */

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 248px minmax(0, 1fr);
	gap: 24px 40px;
	align-items: start;
}

/* Уведомления плагина («товар добавлен», «адрес сохранён») лежат в том же
   контейнере, что навигация и содержимое. Без явной расстановки они падают
   в узкую левую колонку — поэтому по умолчанию всё на всю ширину, а колонки
   назначены только двум блокам. */
.woocommerce-account .woocommerce > * {
	grid-column: 1 / -1;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	grid-column: 1;
}

.woocommerce-account .woocommerce-MyAccount-content {
	grid-column: 2;
}

/* Вход, регистрация и восстановление пароля — навигации ещё нет */
.woocommerce-account:not(.logged-in) .woocommerce {
	display: block;
	max-width: 460px;
}

/* --- Навигация ------------------------------------------------------------ */

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--warm-1);
	list-style: none;
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 11px 14px;
	border: 0;
	border-radius: var(--r);
	color: var(--ink-2);
	font-weight: 600;
	transition: background .15s, color .15s;
}

.woocommerce-MyAccount-navigation a:hover {
	background: var(--paper);
	color: var(--ink);
}

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--wood);
	color: #fff;
}

/* --- Содержимое ----------------------------------------------------------- */

.woocommerce-MyAccount-content {
	min-width: 0;
	color: var(--ink-2);
	line-height: 1.6;
}

.woocommerce-MyAccount-content > p {
	margin-bottom: 16px;
}

.woocommerce-MyAccount-content a:not(.button) {
	border-bottom: 1px solid var(--sand);
	color: var(--wood);
}

.woocommerce-account h2,
.woocommerce-account h3 {
	margin: 0 0 16px;
	color: var(--ink);
	font-size: 20px;
	font-weight: 800;
}

/* --- Формы ---------------------------------------------------------------- */

.woocommerce-account .form-row,
.woocommerce-account .woocommerce-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce-account .form-row label,
.woocommerce-account .woocommerce-form-row label {
	color: var(--ink-2);
	font-size: 14px;
	font-weight: 600;
}

.woocommerce-account .required {
	border: 0;
	color: var(--sand);
	text-decoration: none;
}

.woocommerce-account .input-text,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account select {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1.5px solid var(--line-2);
	border-radius: var(--r);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
	transition: border-color .15s, box-shadow .15s;
}

.woocommerce-account .input-text:focus,
.woocommerce-account select:focus {
	border-color: var(--sand);
	box-shadow: 0 0 0 3px rgba(166, 143, 105, .22);
	outline: 0;
}

/* Формы кабинета — колонка нормальной ширины, а не во весь экран.
   WooCommerce помечает парные поля классами form-row-first/last; сетка
   ставит их в две колонки, остальные занимают всю строку. */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
	max-width: 620px;
}

.woocommerce-account .woocommerce-EditAccountForm > *,
.woocommerce-account .woocommerce-address-fields__field-wrapper > * {
	grid-column: 1 / -1;
}

.woocommerce-account .form-row-first {
	grid-column: 1;
}

.woocommerce-account .form-row-last {
	grid-column: 2;
}

/* Поле «Запомнить меня»: флажок и подпись в строку */
.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}

.woocommerce-account .woocommerce-form__input-checkbox {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--wood);
}

/* Группа «Смена пароля» */
.woocommerce-account fieldset {
	margin: 26px 0 20px;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--r);
}

.woocommerce-account legend {
	padding: 0 8px;
	color: var(--ink);
	font-weight: 700;
}

.woocommerce-account .woocommerce-form-row em,
.woocommerce-account form span.description {
	display: block;
	color: var(--muted);
	font-size: 13px;
	font-style: normal;
	line-height: 1.45;
}

/* Главное действие формы — тёмная кнопка, остальные остаются светлыми.
   Имя тега обязательно: правило .woocommerce button.button выше весит
   (0,2,1), и селектор из двух классов его не перебьёт. */
.woocommerce-account button.woocommerce-form-login__submit,
.woocommerce-account button.woocommerce-form-register__submit,
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"],
.woocommerce-account .woocommerce-ResetPassword button[type="submit"],
.woocommerce-account .edit-account button[type="submit"] {
	border-color: var(--wood);
	background: var(--wood);
	color: #fff;
}

.woocommerce-account button.woocommerce-form-login__submit:hover,
.woocommerce-account button.woocommerce-form-register__submit:hover,
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-account .woocommerce-ResetPassword button[type="submit"]:hover,
.woocommerce-account .edit-account button[type="submit"]:hover {
	border-color: var(--wood-2);
	background: var(--wood-2);
	color: #fff;
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 14px 0 0;
	font-size: 14px;
}

/* --- Адреса --------------------------------------------------------------- */

.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 8px;
}

.woocommerce-Address {
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--paper);
}

.woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.woocommerce-Address address {
	font-style: normal;
	line-height: 1.6;
}

/* --- Заказы --------------------------------------------------------------- */

.woocommerce-orders-table__cell-order-actions .button {
	height: 38px;
	padding: 0 14px;
	font-size: 14px;
}

.woocommerce-account .woocommerce-Message {
	margin-bottom: 24px;
}

/* ==========================================================================
   7. АДАПТИВ
   --------------------------------------------------------------------------
   Пороги сведены к одному набору: 1180 / 1100 / 900 / 620.
   В прототипе карточки товара были свои 1200 / 900 / 620 / 560 — приведены
   к общим, чтобы страницы не расходились на одной и той же ширине окна.
   ========================================================================== */

@media (max-width: 1180px) {
	.mega-menu__inner {
		grid-template-columns: 1fr 1fr 260px;
	}

	.hero__title {
		font-size: 46px;
	}

	.hero__copy {
		max-width: 540px;
	}

	.subcategory-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.product__layout {
		grid-template-columns: 1.1fr 1fr;
		gap: 32px;
	}

	/* Блок покупки уезжает под галерею и перестаёт липнуть */
	.buybox {
		position: static;
		grid-column: span 2;
	}

	.gallery__main {
		height: 440px;
	}
}

@media (max-width: 1100px) {
	.header__inner {
		gap: 12px;
	}

	.user-nav__item {
		width: 52px;
	}

	/* Корзину не ужимаем: внутри сумма, она обрежется */
	.user-nav__item--cart {
		width: auto;
	}

	.mega-menu__inner {
		grid-template-columns: 1fr 1fr;
	}

	.mega-menu__promo {
		display: none;
	}

	.category-grid,
	.product-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.brands {
		grid-template-columns: repeat(4, 1fr);
	}

	.kit-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.footer__top {
		gap: 26px;
	}

	.section {
		padding: 44px 0;
	}

	.section-head__title,
	.production-promo__title,
	.production__title {
		font-size: 25px;
	}

	.hero__inner {
		min-height: 0;
		padding-top: 44px;
		padding-bottom: 48px;
	}

	.hero__copy {
		max-width: none;
	}

	.hero__picture {
		object-position: 70% 42%;
	}

	/* Текст уезжает под фото — вуаль разворачиваем сверху вниз */
	.hero__veil {
		background:
			linear-gradient(180deg,
				rgba(243, 240, 234, .96) 0%,
				rgba(243, 240, 234, .90) 54%,
				rgba(243, 240, 234, .80) 100%),
			linear-gradient(to top, rgba(28, 23, 20, .10) 0%, transparent 30%);
	}

	.hero__lights {
		top: auto;
		right: -80px;
		bottom: -120px;
		width: 420px;
		height: 420px;
		margin: 0;
	}

	.production__inner,
	.production-promo__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.production-promo {
		padding: 34px 26px;
	}

	.production__image {
		height: 260px;
	}

	.trust__inner {
		grid-template-columns: 1fr 1fr;
		padding-top: 44px;
		padding-bottom: 44px;
	}

	.page-head {
		min-height: 210px;
	}

	.page-head__title {
		font-size: 28px;
	}

	.category-group__title,
	.subsection__title {
		font-size: 21px;
	}

	.subcategory-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Пролистывание пальцем — стрелки лишние */
	.section-nav__arrow--visible {
		display: none;
	}

	.interior__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.interior__shot--big {
		grid-row: auto;
	}

	.product__layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.buybox {
		grid-column: auto;
	}

	.gallery__main {
		height: 400px;
	}

	.kit-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Кабинет: навигация уезжает наверх и становится строкой со скроллом */
	.woocommerce-account .woocommerce {
		display: block;
	}

	.woocommerce-MyAccount-navigation {
		margin-bottom: 24px;
		overflow-x: auto;
	}

	.woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: 6px;
		width: max-content;
		min-width: 100%;
	}

	.woocommerce-MyAccount-navigation a {
		white-space: nowrap;
	}
}

@media (max-width: 620px) {
	.topbar__inner {
		gap: 14px;
		font-size: 12px;
	}

	.topbar__item--desktop {
		display: none;
	}

	.header__inner {
		height: auto;
		padding-top: 12px;
		flex-wrap: wrap;
		gap: 10px;
	}

	.logo__name {
		font-size: 19px;
	}

	.logo__sub {
		margin-top: 4px;
		font-size: 5.6px;
	}

	.site-search {
		order: 3;
		flex-basis: 100%;
		height: 46px;
		margin-bottom: 12px;
	}

	.user-nav__item {
		display: none;
	}

	.user-nav__item--cart {
		display: flex;
		height: 46px;
		margin-left: auto;
		padding: 0 12px;
		gap: 0;
		font-size: 0;
	}

	.catalog-button {
		height: 46px;
		padding: 0 15px;
	}

	.catalog-button__label {
		display: none;
	}

	.mega-menu__inner {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.mobile-bar {
		display: flex;
	}

	body {
		padding-bottom: 60px;
	}

	.hero__title {
		font-size: 31px;
	}

	.hero__lead {
		margin-bottom: 24px;
		font-size: 15.5px;
	}

	.hero__inner {
		padding-top: 32px;
		padding-bottom: 40px;
	}

	.hero__actions {
		display: flex;
		width: 100%;
	}

	.hero__cta {
		grid-template-columns: 1fr;
		gap: 10px;
		margin-bottom: 10px;
	}

	.hero__cta .button {
		white-space: normal;
	}

	.hero__eyebrow {
		height: auto;
		min-height: 50px;
		margin-bottom: 24px;
		padding: 9px 18px;
		gap: 9px;
		font-size: 14.5px;
		line-height: 1.25;
		text-align: center;
		white-space: normal;
	}

	.hero__facts {
		display: grid;
		grid-template-columns: 1fr;
		gap: 14px;
		padding-top: 18px;
	}

	.hero__fact {
		gap: 11px;
	}

	.hero__fact-icon {
		width: 22px;
		height: 22px;
	}

	.hero__fact-value {
		font-size: 16px;
	}

	.hero__fact-label {
		font-size: 12.5px;
		line-height: 1.3;
	}

	.button {
		height: 50px;
		padding: 0 20px;
		font-size: 14.5px;
	}

	.category-grid,
	.product-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.category-card {
		padding: 12px;
	}

	.category-card__image {
		height: 88px;
	}

	.category-card__title {
		font-size: 14px;
	}

	.product-card {
		padding: 12px;
	}

	.product-card__image {
		height: 158px;
	}

	.brands {
		grid-template-columns: repeat(3, 1fr);
	}

	.trust__inner {
		grid-template-columns: 1fr;
	}

	.production__image {
		height: 210px;
	}

	.page-head {
		min-height: 180px;
		padding: 20px 0;
		background-position: center center;
	}

	/* Шапка на узком экране переносится и растёт — навигация липнет к верху */
	.section-nav {
		top: 0;
	}

	.section-nav__scroll {
		padding: 0 16px;
	}

	.section-nav__item {
		height: 48px;
		padding: 0 12px;
		font-size: 13px;
	}

	.category-group {
		padding: 30px 0 4px;
	}

	.category-group__head .section-head__link {
		flex-basis: 100%;
		margin-left: 0;
	}

	.subsection {
		padding: 28px 0 4px;
	}

	.subcategory-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.subcategory-card__image {
		height: 96px;
	}

	.section--bordered {
		padding: 34px 0;
	}

	.section__title {
		font-size: 21px;
	}

	.interior__grid {
		gap: 10px;
	}

	.interior__caption {
		padding: 20px 10px 9px;
		font-size: 11.5px;
	}

	.gallery__main {
		height: 320px;
	}

	.gallery__picture {
		padding: 14px;
	}

	.gallery__thumb {
		width: 74px;
		height: 74px;
	}

	.product-info__title {
		font-size: 21px;
	}

	.buybox__price .price__value {
		font-size: 29px;
	}

	.kit-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.kit-card {
		padding: 12px;
	}

	.kit-card__image {
		height: 118px;
	}

	/* На карточке товара вместо навигации снизу — кнопка покупки */
	.sticky-buy {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 80;
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 12px 16px;
		border-top: 1px solid var(--line);
		background: var(--paper);
		box-shadow: 0 -6px 20px -12px rgba(42, 33, 28, .35);
	}

	.sticky-buy__price {
		display: flex;
		align-items: baseline;
		gap: 5px;
	}

	.sticky-buy__value {
		flex: none;
		font-family: var(--font-head);
		font-size: 20px;
		font-weight: 800;
		letter-spacing: -.02em;
	}

	.sticky-buy__unit {
		color: var(--muted);
		font-size: 12px;
	}

	.sticky-buy .button {
		flex: 1;
		width: auto;
		height: 46px;
	}

	form.checkout .col2-set {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.woocommerce .cart-collaterals {
		margin-top: 20px;
	}

	.woocommerce .cart_totals {
		max-width: none;
		padding: 18px;
	}

	.woocommerce .actions .coupon {
		flex-wrap: wrap;
	}

	/* Таблица корзины на узком экране — карточки вместо строк.
	   Заголовки колонок прячем, подписи подставляем из data-title,
	   который WooCommerce проставляет сам. */
	.woocommerce-cart table.shop_table thead {
		display: none;
	}

	.woocommerce-cart table.shop_table,
	.woocommerce-cart table.shop_table tbody,
	.woocommerce-cart table.shop_table tr {
		display: block;
		width: 100%;
	}

	.woocommerce-cart table.shop_table tr.cart_item {
		position: relative;
		margin-bottom: 12px;
		padding: 14px;
		border: 1px solid var(--line);
		border-radius: var(--r);
	}

	.woocommerce-cart table.shop_table tr.cart_item td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 6px 0;
		border-bottom: 0;
	}

	.woocommerce-cart table.shop_table tr.cart_item td::before {
		content: attr(data-title);
		color: var(--muted);
		font-size: 12px;
	}

	.woocommerce-cart table.shop_table tr.cart_item td.product-remove,
	.woocommerce-cart table.shop_table tr.cart_item td.product-thumbnail {
		justify-content: flex-start;
	}

	.woocommerce-cart table.shop_table tr.cart_item td.product-remove::before,
	.woocommerce-cart table.shop_table tr.cart_item td.product-thumbnail::before,
	.woocommerce-cart table.shop_table tr.cart_item td.product-name::before {
		content: none;
	}

	.woocommerce-cart table.shop_table tr.cart_item td.product-remove {
		position: absolute;
		top: 8px;
		right: 8px;
		padding: 0;
	}

	.woocommerce-cart table.shop_table tr.cart_item td.product-name {
		padding-right: 32px;
		font-weight: 600;
	}

	/* Формы кабинета — в одну колонку */
	.woocommerce-account .woocommerce-EditAccountForm,
	.woocommerce-account .woocommerce-address-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-account .form-row-first,
	.woocommerce-account .form-row-last {
		grid-column: 1 / -1;
	}
}



@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.catalog-button__line,
	.mega-menu--open,
	.hero__lights,
	.hero__picture,
	.seo__text {
		transition: none;
		animation: none;
	}

	.hero__picture {
		transform: none;
	}
}


/* --------------------------------------------------------------------------
   Атрибут hidden
   --------------------------------------------------------------------------
   Браузер прячет [hidden] правилом display:none, но любое авторское
   display:grid/flex его перебивает — приоритет авторских стилей выше
   пользовательских, специфичность тут ни при чём. Из-за этого панели
   вкладок показывались все разом.

   Правило стоит последним в файле, поэтому его уже ничто не перебьёт,
   и !important не нужен.
   -------------------------------------------------------------------------- */



/* --------------------------------------------------------------------------
   Панель администратора WordPress
   --------------------------------------------------------------------------
   Она фиксирована сверху с огромным z-index, а шапка у нас прилипающая с
   top: 0 — в итоге у залогиненного администратора верх шапки уезжает под
   панель. Сдвигаем на её высоту: 32px на широком экране, 46px на узком.
   Ниже 600px панель прокручивается вместе со страницей, сдвиг не нужен.
   -------------------------------------------------------------------------- */

.admin-bar .header {
	top: 32px;
}

.admin-bar .section-nav {
	top: calc(var(--hh) + 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .header {
		top: 46px;
	}

	.admin-bar .section-nav {
		top: calc(var(--hh) + 46px);
	}
}

@media screen and (max-width: 620px) {
	.admin-bar .section-nav {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .header,
	.admin-bar .section-nav {
		top: 0;
	}
}


[hidden] {
	display: none;
}