/*
Theme Name: МКТ
Description: Каталог металлопроката ООО «МКТ», Краснодар. Тема-каталог: цен нет, продажа через запрос.
Author: —
Version: 1.0
Requires PHP: 8.0
Text Domain: mkt
*/

/* ==========================================================================
   Шрифты. Три файла вместо пяти: Bold и Medium не нужны, SemiBold закрывает
   и акценты, и заголовки. На 14 тыс. страниц каждый лишний файл — это трафик.
   ========================================================================== */

@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/Inter-Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/Inter-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('assets/fonts/Raleway-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}

/*
 * Цифры в заголовках берём из Inter, буквы оставляем Raleway.
 *
 * У Raleway цифры узкие и разной ширины: «20 633» рядом с «Краснодар»
 * читается так, будто числа набраны другим кеглем и проваливаются вниз.
 * lining-nums этого не лечит — это и есть его основные цифры.
 *
 * Работает через unicode-range: семейство объявлено только на цифрах
 * и знаках при них, поэтому в стеке шрифтов оно перехватывает эти символы,
 * а всё остальное достаётся Raleway. Отдельного файла не нужно —
 * подключается тот же Inter, который уже загружен.
 */
@font-face {
	font-family: 'InterNum';
	src: url('assets/fonts/Inter-SemiBold.woff2') format('woff2');
	font-weight: 600 700;
	font-display: swap;
	unicode-range: U+0030-0039, U+002C, U+002E, U+00D7, U+2212, U+2013, U+2014, U+002F;
}

/* ==========================================================================
   Токены
   ========================================================================== */

:root {
	/* Палитра перенесена с текущего сайта — узнаваемость сохраняется. */
	--ink:        #1a2035;
	--slate:      #34394b;
	--slate-mid:  #434c69;
	/* Затемнён с #787f97: тот давал 3.63:1 на сером фоне и 3.98:1 на белом,
	   ниже нормы 4.5 — на телефоне такой текст на солнце не читался. */
	--muted:      #666d82;
	--line:       #dde3e6;
	--paper:      #f2f5f6;
	--white:      #ffffff;

	/* Оранжевый — только на том, что ведёт к цене. Нигде больше. */
	--accent:      #fc9230;
	--accent-dark: #e07a1c;

	--ok:   #2f9e4f;
	--err:  #d33a3a;

	--font-body:    'Inter', system-ui, -apple-system, sans-serif;
	/* InterNum первым: он объявлен только на цифрах и перехватывает их. */
	--font-display: 'InterNum', 'Raleway', 'Inter', system-ui, sans-serif;

	/* Шкала: 1.25 от 16px, округлено до целых. */
	--t-xs:   0.75rem;   /* 12 — счётчики, подписи фасетов */
	--t-sm:   0.875rem;  /* 14 — таблицы, мелкий UI */
	--t-base: 1rem;      /* 16 */
	--t-md:   1.25rem;   /* 20 */
	--t-lg:   1.5rem;    /* 24 */
	--t-xl:   1.953rem;  /* 31 — h1 категории */
	--t-2xl:  2.441rem;  /* 39 — главная */

	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-6: 1.5rem;
	--sp-8: 2rem;
	--sp-12: 3rem;
	--sp-16: 4rem;

	--radius: 4px;
	--shell: 1280px;
	--rail: 280px;

	--shadow-sm: 0 1px 2px rgba(26, 32, 53, 0.08);
	--shadow-md: 0 4px 16px rgba(26, 32, 53, 0.12);
}

/* ==========================================================================
   База
   ========================================================================== */

/* display у класса перебивает браузерный hidden — без этого спрятанные
   формы и счётчики оставались видимыми. */
[hidden] {
	display: none !important;
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--t-base);
	line-height: 1.55;
	color: var(--slate);
	background: var(--white);
	/* Цифры в одну ширину — колонка типоразмеров выравнивается сама. */
	font-variant-numeric: tabular-nums;
}

/* Браузерный fieldset тащит свою рамку, отступы и особое поведение legend —
   из-за них блок фасета ломался: легенда налезала на рамку, поля вылезали
   за рельс. Сбрасываем полностью, вид задаём своими классами. */
fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

legend {
	display: block;
	width: 100%;
	padding: 0;
	float: left;   /* иначе legend не подчиняется width в части браузеров */
}

legend + * {
	clear: both;
}

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

a {
	color: var(--slate-mid);
	text-decoration: none;
}

a:hover {
	color: var(--ink);
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin: 0 0 var(--sp-4);
}

h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }

p { margin: 0 0 var(--sp-4); }

.shell {
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--sp-4);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Фокус виден всегда — по каталогу ходят с клавиатуры. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Шапка. Светлая, в две строки — как на текущем сайте: логотип узнаваем,
   а два телефона и мессенджеры это то, чем B2B-покупатель реально пользуется.
   ========================================================================== */

.hdr {
	background: var(--white);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 50;
}

.hdr__top {
	display: flex;
	align-items: center;
	gap: var(--sp-6);
	/* padding-block, а не сокращённый padding: иначе обнуляются боковые
	   отступы .shell и логотип уезжает левее остального содержимого. */
	padding-block: var(--sp-3);
}

/* Логотип: чёрный блок МКТ плюс расшифровка — как на вывеске компании. */
.logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	color: var(--ink);
}

.logo__mark {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	background: var(--ink);
	color: var(--white);
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	border: 3px solid var(--ink);
}

.logo__name {
	font-size: 0.6875rem;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
}

.hdr__search {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
}

/* Подсказки поиска — реальные запросы Wordstat поверх названий разделов. */
.search-suggest {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
	margin: var(--sp-1) 0 0;
	padding: var(--sp-2) 0;
	list-style: none;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	max-height: 360px;
	overflow-y: auto;
}

.search-suggest__item {
	padding: var(--sp-2) var(--sp-4);
	font-size: var(--t-sm);
	color: var(--ink);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.search-suggest__item:hover,
.search-suggest__item[aria-selected="true"] {
	background: var(--paper);
	color: var(--accent-dark);
}

.hdr__search input {
	flex: 1 1 0;
	min-width: 0;
	font: inherit;
	font-size: var(--t-sm);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--line);
	border-right: 0;
	border-radius: var(--radius) 0 0 var(--radius);
	background: var(--white);
	color: var(--ink);
}

.hdr__search input::placeholder { color: var(--muted); }

.hdr__search button {
	font: inherit;
	font-size: var(--t-sm);
	font-weight: 600;
	padding: var(--sp-3) var(--sp-6);
	border: 1px solid var(--ink);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--ink);
	color: var(--white);
	cursor: pointer;
}

.hdr__search button:hover { background: var(--slate); }

.hdr__contacts {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--sp-6);
}

.hdr__im {
	display: flex;
	gap: var(--sp-2);
}

.hdr__im a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--white);
	font-size: var(--t-xs);
	font-weight: 600;
}

.hdr__im a:hover { background: var(--accent-dark); color: var(--white); }

.hdr__im svg { display: block; }

.tel {
	line-height: 1.2;
	white-space: nowrap;
}

.tel a {
	display: block;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.tel span {
	font-size: 0.6875rem;
	color: var(--muted);
}

.hdr__bottom {
	display: flex;
	align-items: center;
	gap: var(--sp-6);
	border-top: 1px solid var(--line);
	padding-block: var(--sp-3);
}

.hdr__nav {
	display: flex;
	gap: var(--sp-6);
	font-size: var(--t-sm);
	font-weight: 600;
}

.hdr__nav a { color: var(--slate); }
.hdr__nav a:hover { color: var(--accent-dark); }

/* Текущий раздел: цвет плюс подчёркивание — одним цветом такое различие
   не читается, а на телефоне тем более. */
.hdr__nav a[aria-current='page'] {
	color: var(--ink);
	border-bottom: 2px solid var(--accent);
	padding-bottom: 2px;
}

.hdr__aside {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

/* Копирование почты — по аналитике аккаунта основной канал заявок,
   поэтому кнопка стоит в шапке, а не в подвале. */
.copy {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font: inherit;
	font-size: var(--t-sm);
	padding: var(--sp-2) var(--sp-3);
	background: transparent;
	color: var(--slate);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
}

.copy:hover { border-color: var(--muted); }

.copy[data-copied='1'] {
	border-color: var(--ok);
	color: var(--ok);
}

/* ==========================================================================
   Герой. Открываем тем, что компания возит, а не абстракцией:
   фото проката во всю ширину и форма заявки рядом.
   ========================================================================== */

.hero {
	position: relative;
	background: var(--ink);
	color: var(--white);
	overflow: hidden;
}

.hero__bg {
	position: absolute;
	inset: 0;
	background-image: url('assets/hero.webp');
	background-size: cover;
	background-position: center;
}

/* Затемнение слева под текст, чтобы заголовок читался на любом фото. */
.hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(26, 32, 53, 0.92) 0%,
		rgba(26, 32, 53, 0.78) 45%,
		rgba(26, 32, 53, 0.45) 100%
	);
}

.hero__inner {
	position: relative;
	display: grid;
	/* Колонки уже, чем общая сетка сайта: экран героя не должен съедать
	   первый экран целиком — «Продукция» обязана попадать в глаза сразу. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: var(--sp-8);
	align-items: center;
	/* Ширина как у остальной страницы: левый край заголовка обязан
	   совпадать с «Продукцией» и плитками под ним. */
	padding-block: var(--sp-6);
	min-height: 0;
}

.hero__title {
	/* Крупнее прежнего: колонка шириной 940px с заголовком в 42px читалась
	   как половина пустого экрана рядом с формой в 595px. Вес левой части
	   должен спорить с формой, а не теряться под ней. */
	font-size: clamp(1.9rem, 4.4vw, 3.6rem);
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--white);
	margin: 0 0 var(--sp-6);
	max-width: 14ch;
}

.hero__lead {
	font-size: clamp(var(--t-base), 1.35vw, var(--t-md));
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
	max-width: 44ch;
	margin-bottom: var(--sp-8);
}

.hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-6);
	padding-top: var(--sp-4);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.hero__fact b {
	display: block;
	font-family: var(--font-display);
	/* Растёт вместе с заголовком: при 3.6rem в h1 счётчик в 20px терялся. */
	font-size: clamp(var(--t-lg), 2.1vw, var(--t-2xl));
	line-height: 1.1;
	color: var(--white);
	font-variant-numeric: tabular-nums;
}

.hero__fact span {
	font-size: var(--t-xs);
	color: rgba(255, 255, 255, 0.7);
}

.hero__form {
	background: rgba(52, 57, 75, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	padding: var(--sp-6);
	backdrop-filter: blur(2px);
}

.hero__form h2 {
	color: var(--white);
	font-size: var(--t-lg);
	margin-bottom: var(--sp-2);
}

.hero__form p {
	font-size: var(--t-sm);
	color: rgba(255, 255, 255, 0.72);
}

.hero__form .field > span { color: rgba(255, 255, 255, 0.72); }

.hero__form .field input,
.hero__form .field textarea {
	background: rgba(26, 32, 53, 0.6);
	border-color: rgba(255, 255, 255, 0.18);
	color: var(--white);
}

.hero__form .field input::placeholder,
.hero__form .field textarea::placeholder { color: rgba(255, 255, 255, 0.42); }

.hero__form .form {
	max-width: none;
	gap: var(--sp-3);
}

/* Поля во всю ширину формы: в две колонки они выходили узкими,
   номер телефона в них не помещался целиком и читался хуже. */
.hero__form .form > * { min-width: 0; }

.hero__form .field input,
.hero__form .field textarea {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.hero__form .field input,
.hero__form .field textarea { padding: var(--sp-2) var(--sp-3); }
.hero__form h2 { font-size: var(--t-md); margin-bottom: var(--sp-1); }
.hero__form > p { margin-bottom: var(--sp-4); font-size: var(--t-xs); }
.hero__form .field > span { font-size: 0.625rem; }
.hero__form .form__note { font-size: 0.625rem; margin: 0; }
/* Ссылка на согласие наследовала цвет светлой темы и на тёмной форме
   давала 1.35:1 — прочитать согласие было нечем. */
.hero__form .form__note { color: rgba(255, 255, 255, 0.75); }
.hero__form .form__note a { color: var(--white); }

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

.crumbs {
	font-size: var(--t-xs);
	color: var(--muted);
	padding: var(--sp-3) 0;
}

.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--slate); }
.crumbs span + span::before { content: ' / '; color: var(--line); }

/* ==========================================================================
   Каркас категории: рельс фильтров + ведомость
   ========================================================================== */

.cat {
	display: grid;
	grid-template-columns: var(--rail) minmax(0, 1fr);
	gap: var(--sp-8);
	align-items: start;
	padding-bottom: var(--sp-16);
}

.cat--nofilters {
	grid-template-columns: minmax(0, 1fr);
}

.cat__head {
	grid-column: 1 / -1;
	display: flex;
	gap: var(--sp-6);
	align-items: flex-start;
	padding: var(--sp-6) 0;
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--sp-2);
}

/* Фото у категории, а не у каждой строки: внутри одной категории оно
   одинаковое, и повторять его 50 раз — шум, а не информация. */
.cat__photo {
	flex: 0 0 160px;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--paper);
}

.cat__meta {
	font-size: var(--t-sm);
	color: var(--muted);
}

.cat__count {
	font-weight: 600;
	color: var(--slate);
}

/* ==========================================================================
   Ведомость — подпись каталога.
   Таблица, а не список: внутри категории у товаров общее название и разные
   характеристики, и глаз должен идти вниз по колонке, которая различает.
   ========================================================================== */

/* overflow-x, а не hidden: при четырёх колонках характеристик таблица шире
   рельса с фильтром, и hidden молча срезал правый край вместе с кнопками
   «В список запроса» и «Цена» — на 29 разделах их просто не было видно.
   Прокрутка показывает то, что не поместилось, вместо того чтобы прятать. */
.ledger {
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow-x: auto;
	background: var(--white);
}

.ledger__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-sm);
	font-variant-numeric: tabular-nums;
}

.ledger__table thead th {
	text-align: left;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	background: var(--paper);
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--line);
	/* Без nowrap: подпись переносится на вторую строку, а не растягивает
	   колонку. Значения в ячейках по-прежнему в одну строку — переносить
	   «108×4» нельзя, типоразмер должен читаться целиком. */
	hyphens: none;
}

.ledger__table td {
	padding: var(--sp-2) var(--sp-4);
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}

.ledger__table tbody tr:last-child td { border-bottom: 0; }
.ledger__table tbody tr:hover { background: var(--paper); }

.ledger__name {
	color: var(--slate);
	font-weight: 400;
	min-width: 14rem;
	width: 40%;
}

.ledger__name a { color: inherit; }
.ledger__name a:hover { color: var(--ink); text-decoration: underline; }

/* Различающее значение — самое заметное в строке. Название повторяется
   у всей категории, поэтому оно уходит на второй план, а не наоборот. */
.ledger__num b {
	font-size: var(--t-base);
	font-weight: 600;
	color: var(--ink);
}

/* Значение крупнее подписи единицы: сравнивают числа, а не «мм».
   nowrap снят с ячейки и оставлен на самом значении: типоразмер «108×4»
   не разрывается, но между двумя значениями ячейка может перенестись,
   а не растягивать колонку на всю их суммарную длину. */
.ledger__num {
	width: 1%;
}

.ledger__val {
	white-space: nowrap;
	display: inline-block;
}

.ledger__num b {
	font-weight: 600;
	color: var(--ink);
}

.ledger__num i {
	font-style: normal;
	font-size: var(--t-xs);
	color: var(--muted);
	margin-left: 2px;
}

.ledger__dash { color: var(--line); }

/* Кнопки в столбик, а не в строку: в строку они требовали 235 px и на
   восьми разделах выдавливали правый край таблицы за границу. Столбиком
   ширину задаёт самая длинная кнопка, и колонка получается одинаковой
   во всех разделах — это и есть единый вид таблицы. */
.ledger__actions {
	width: 1%;
	white-space: nowrap;
}

.ledger__actions .btn {
	display: flex;
	justify-content: center;
	white-space: nowrap;
}

.ledger__actions .btn + .btn { margin-top: var(--sp-2); }

/* На узком экране таблица разворачивается в карточки: заголовки колонок
   там не видны, поэтому подпись подставляется из data-label рядом со
   значением. Сетка в две колонки, иначе подписи наезжают на цифры. */
@media (max-width: 720px) {
	.ledger__table,
	.ledger__table tbody,
	.ledger__table tr,
	.ledger__table td {
		display: block;
		width: auto;
	}

	.ledger__table thead {
		display: none;
	}

	.ledger__table tr {
		border-bottom: 1px solid var(--line);
		padding: var(--sp-4);
	}

	.ledger__table tbody tr:last-child {
		border-bottom: 0;
	}

	.ledger__table td {
		border: 0;
		padding: 0;
	}

	.ledger__name {
		width: auto;
		font-weight: 600;
		color: var(--ink);
		margin-bottom: var(--sp-3);
	}

	/* Селектор с тегом td, а не !important: правило выше
	   (.ledger__table td { display: block }) специфичнее одного класса,
	   и раньше это обходили восклицательным знаком. С ним же не работало
	   ничего, что пытается скрыть ячейку. */
	.ledger__table td.ledger__num {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: var(--sp-3);
		align-items: baseline;
		padding: var(--sp-1) 0;
		border-bottom: 1px dashed var(--line);
	}

	.ledger__num::before {
		content: attr(data-label);
		font-size: var(--t-xs);
		color: var(--muted);
	}

	.ledger__num b {
		font-size: var(--t-sm);
	}

	.ledger__actions {
		width: auto;
		text-align: left;
		margin-top: var(--sp-3);
		display: flex;
		gap: var(--sp-2);
	}

	.ledger__actions .btn {
		flex: 1 1 0;
		margin-left: 0 !important;
	}
}

/* ==========================================================================
   Кнопки. Оранжевая — только запрос цены.
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	font: inherit;
	font-size: var(--t-sm);
	font-weight: 600;
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.btn--price {
	background: var(--accent);
	color: var(--ink);
}

.btn--price:hover {
	background: var(--accent-dark);
	color: var(--ink);
}

.btn--ghost {
	background: transparent;
	color: var(--slate-mid);
	border-color: var(--line);
}

.btn--ghost:hover {
	border-color: var(--muted);
	color: var(--ink);
}

.btn--sm {
	font-size: var(--t-xs);
	padding: var(--sp-1) var(--sp-3);
}

/* Спокойная кнопка для ведомости: 48 оранжевых на экран — это не акцент,
   а шум. Оранжевый остаётся за главным действием на карточке товара. */
.btn--quiet {
	background: var(--ink);
	color: var(--white);
}

.btn--quiet:hover { background: var(--slate); color: var(--white); }

.btn--lg {
	font-size: var(--t-base);
	padding: var(--sp-3) var(--sp-6);
}

.btn--block {
	width: 100%;
}

/* ==========================================================================
   Фильтры
   ========================================================================== */

.filters {
	position: sticky;
	top: 84px;
	font-size: var(--t-sm);
	min-width: 0;   /* иначе поля «от/до» распирают колонку грида */
}

.filters__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-2);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--sp-4);
}

.filters__title {
	font-family: var(--font-display);
	font-size: var(--t-base);
	color: var(--ink);
	margin: 0;
}

.filters__reset {
	font-size: var(--t-xs);
	color: var(--muted);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
}

.facet {
	border-bottom: 1px solid var(--line);
	padding: var(--sp-3) 0;
}

.facet__legend {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 0;
	margin-bottom: var(--sp-3);
}

.facet__range {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.facet__range input {
	flex: 1 1 0;
	min-width: 0;   /* без этого input не сжимается и вылезает за рельс */
	width: 100%;
	font: inherit;
	font-size: var(--t-sm);
	font-variant-numeric: tabular-nums;
	padding: var(--sp-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-align: center;
}

.facet__range span {
	color: var(--muted);
	font-size: var(--t-xs);
}

.facet__hint {
	font-size: var(--t-xs);
	color: var(--muted);
	margin: var(--sp-2) 0 0;
}

.facet__opts {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	max-height: 15rem;
	overflow-y: auto;
}

/* Цвет даёт 70 значений RAL — без поиска по фасету это стена чекбоксов. */
.facet__search {
	width: 100%;
	font: inherit;
	font-size: var(--t-sm);
	padding: var(--sp-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: var(--sp-2);
}

.opt {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	cursor: pointer;
	line-height: 1.3;
}

.opt input {
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--slate-mid);
}

.opt__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.opt__n {
	flex: 0 0 auto;
	font-size: var(--t-xs);
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* Мобильный: фильтры уезжают в лист снизу, в потоке остаётся полоса вызова. */
.filters__toggle {
	display: none;
}

/* ==========================================================================
   Страница товара: характеристики — главное, они выше сгиба
   ========================================================================== */

.prod {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--sp-8);
	align-items: start;
	padding: var(--sp-6) 0 var(--sp-16);
}

.prod__title {
	margin-bottom: var(--sp-2);
}

.prod__lead {
	font-size: var(--t-sm);
	color: var(--muted);
	margin-bottom: var(--sp-6);
}

.props {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-sm);
	font-variant-numeric: tabular-nums;
}

.props th,
.props td {
	text-align: left;
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.props th {
	width: 40%;
	font-weight: 400;
	color: var(--muted);
	background: var(--paper);
}

.props td {
	font-weight: 600;
	color: var(--ink);
}

.prod__aside {
	position: sticky;
	top: 84px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--sp-6);
	background: var(--white);
	box-shadow: var(--shadow-sm);
}

.prod__aside p {
	font-size: var(--t-sm);
	color: var(--muted);
}

.prod__actions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}

.prod__photo img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
}

.prod__photo {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--paper);
	margin-bottom: var(--sp-6);
}

.prod__photo figcaption {
	font-size: var(--t-xs);
	color: var(--muted);
	padding: var(--sp-2) var(--sp-3);
	border-top: 1px solid var(--line);
}

/* ==========================================================================
   Спецификация: счётчик в шапке + страница списка
   ========================================================================== */

.req-count {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--ink);
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.req-count:hover { border-color: var(--muted); color: var(--ink); }

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

.req-count__n {
	min-width: 1.5rem;
	text-align: center;
	background: var(--accent);
	color: var(--ink);
	border-radius: 999px;
	font-size: var(--t-xs);
	padding: 0 var(--sp-2);
}

.reqlist {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-sm);
}

.reqlist th,
.reqlist td {
	text-align: left;
	padding: var(--sp-3);
	border-bottom: 1px solid var(--line);
}

.reqlist th {
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	font-weight: 600;
}

.reqlist input[type='number'] {
	width: 5rem;
	font: inherit;
	font-variant-numeric: tabular-nums;
	padding: var(--sp-1) var(--sp-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-align: right;
}

/* ==========================================================================
   Формы
   ========================================================================== */

.form {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	max-width: 32rem;
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.field > span {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
}

.field input,
.field textarea {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	font: inherit;
	font-size: var(--t-base);
	padding: var(--sp-3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	background: var(--white);
}

.field input:focus,
.field textarea:focus {
	border-color: var(--slate-mid);
}

.field--invalid input {
	border-color: var(--err);
}

.field__err {
	font-size: var(--t-xs);
	color: var(--err);
}

.form__note {
	font-size: var(--t-xs);
	color: var(--muted);
}

.form__msg {
	font-size: var(--t-sm);
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius);
	border: 1px solid;
}

.form__msg--ok {
	color: var(--ok);
	border-color: var(--ok);
	background: rgba(47, 158, 79, 0.06);
}

.form__msg--err {
	color: var(--err);
	border-color: var(--err);
	background: rgba(211, 58, 58, 0.06);
}

/* Ловушка для ботов: людям не видна, капча не нужна. */
.hp {
	position: absolute;
	left: -9999px;
}

/* ==========================================================================
   Пагинация
   ========================================================================== */

.pager {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	justify-content: center;
	padding: var(--sp-8) 0;
	font-size: var(--t-sm);
	font-variant-numeric: tabular-nums;
}

.pager a,
.pager span {
	min-width: 2.5rem;
	text-align: center;
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.pager .current {
	background: var(--slate);
	border-color: var(--slate);
	color: var(--white);
	font-weight: 600;
}

/* ==========================================================================
   Плитка разделов: фото во всю карточку, название поверх затемнения.
   Мелкая картинка с подписью снизу читалась как служебный список.
   ========================================================================== */

.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--sp-4);
	padding: var(--sp-6) 0;
	list-style: none;
	margin: 0;
}

.tile {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	background: var(--slate);
	min-height: 190px;
	display: flex;
}

.tile > a {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--sp-4);
	width: 100%;
	padding: var(--sp-4);
	color: var(--white);
}

.tile__img {
	position: absolute;
	inset: 0;
	background: var(--slate);
}

.tile__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.tile:hover .tile__img img { transform: scale(1.04); }

/* Затемнение сверху: заголовок стоит вверху карточки, как на текущем сайте. */
.tile__img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(26, 32, 53, 0.85) 0%,
		rgba(26, 32, 53, 0.45) 40%,
		rgba(26, 32, 53, 0.55) 100%
	);
}

/* Кнопка внизу карточки — единственный оранжевый на плитке. */
.tile__more {
	position: relative;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--t-xs);
	font-weight: 600;
	padding: var(--sp-2) var(--sp-4);
	border-radius: 999px;
	background: var(--accent);
	color: var(--ink);
}

.tile:hover .tile__more { background: var(--accent-dark); }

.tile__body {
	position: relative;
	display: block;
}

.tile__name {
	display: block;   /* span инлайновый: без этого счётчик слипается с названием */
	font-family: var(--font-display);
	font-size: var(--t-md);
	font-weight: 600;
	color: var(--white);
	margin: 0 0 var(--sp-1);
	text-wrap: balance;
}

.tile__n {
	display: block;
	font-size: var(--t-xs);
	color: rgba(255, 255, 255, 0.72);
	font-variant-numeric: tabular-nums;
}

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

.ftr {
	background: var(--ink);
	/* Свой цвет, не --muted: тот рассчитан на светлый фон и на тёмном
	   давал 4.06:1. */
	color: #b3bbd2;
	font-size: var(--t-sm);
	padding: var(--sp-12) 0 var(--sp-8);
	margin-top: var(--sp-16);
}

.ftr__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--sp-8);
}

.ftr h2,
.ftr h3 {
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--white);
	margin-bottom: var(--sp-3);
}

.ftr a { color: #b3bbd2; }                 /* 4.06:1 на тёмном фоне — ниже нормы */
.ftr a:hover { color: var(--white); }

/* Копирование почты — по аналитике основной канал заявок, а в подвале
   кнопка наследовала светлую тему: тёмный текст на тёмном фоне, 1.41:1.
   Читать её было нечем. */
.ftr .copy {
	color: var(--white);
	border-color: rgba( 255, 255, 255, 0.28 );
}

.ftr .copy:hover { border-color: rgba( 255, 255, 255, 0.6 ); }

.ftr ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.ftr__bottom {
	border-top: 1px solid var(--slate);
	margin-top: var(--sp-8);
	padding-top: var(--sp-4);
	font-size: var(--t-xs);
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (max-width: 1024px) {
	.prod {
		grid-template-columns: minmax(0, 1fr);
	}

	.prod__aside {
		position: static;
	}
}

@media (max-width: 860px) {
	:root {
		--t-xl: 1.5rem;
		--t-2xl: 1.953rem;
	}

	.cat {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Фильтры уезжают в раскрывающийся блок — рельса на телефоне нет. */
	.filters__toggle {
		display: block;
		width: 100%;
		text-align: left;
	}

	.filters__body {
		display: none;
		padding-top: var(--sp-4);
	}

	.filters[data-open='1'] .filters__body {
		display: block;
	}

	.filters {
		position: static;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: var(--sp-3);
	}

	.hdr__row {
		flex-wrap: wrap;
		gap: var(--sp-3);
		padding: var(--sp-3) 0;
	}

	.hdr__search {
		order: 10;
		flex-basis: 100%;
		max-width: none;
	}

	.hdr__contacts {
		width: 100%;
		margin-left: 0;
		justify-content: space-between;
	}

	.cat__head {
		flex-direction: column;
	}

	.cat__photo {
		flex-basis: auto;
		width: 100%;
		max-width: 220px;
	}

	.ledger__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-3);
	}

	.ledger__row .btn {
		justify-self: stretch;
	}
}

/* ==========================================================================
   Блоки главной
   ========================================================================== */

.ledger__actions {
	display: flex;
	gap: var(--sp-2);
	align-items: center;
}

.cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-6);
	align-items: center;
	justify-content: space-between;
	background: var(--paper);
	border-radius: 8px;
	padding: var(--sp-8);
	margin: var(--sp-8) 0 var(--sp-16);
}

.cta h2 { margin-bottom: var(--sp-2); }
.cta p { margin: 0; color: var(--muted); max-width: 52ch; }

.cta__actions {
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
	align-items: center;
}

@media (max-width: 900px) {
	.hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-8);
		padding-block: var(--sp-12);
		min-height: 0;
	}

	.hdr__top {
		flex-wrap: wrap;
		gap: var(--sp-3);
	}

	.hdr__search { order: 10; flex-basis: 100%; }
	.hdr__contacts { margin-left: auto; gap: var(--sp-4); }
	.hdr__bottom { flex-wrap: wrap; gap: var(--sp-3); }
	.hdr__aside { margin-left: 0; width: 100%; }
}

/* Браузерная кнопка выбора файла выглядит чужой на любой вёрстке —
   приводим к виду остальных полей. */
.field--file input[type='file'] {
	padding: var(--sp-2);
	font-size: var(--t-sm);
	cursor: pointer;
}

.field--file input[type='file']::file-selector-button {
	font: inherit;
	font-size: var(--t-sm);
	font-weight: 600;
	margin-right: var(--sp-3);
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--slate);
	cursor: pointer;
}

.field--file input[type='file']::file-selector-button:hover {
	border-color: var(--muted);
}

.hero__form .field--file input[type='file'] { color: rgba(255, 255, 255, 0.72); }

/* ==========================================================================
   Телефон: шапка перестраивается, а не обрезается
   ========================================================================== */

@media (max-width: 620px) {
	.hdr__top {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			'logo contacts'
			'search search';
		gap: var(--sp-3);
		align-items: center;
	}

	.logo { grid-area: logo; }

	.logo__mark {
		width: 46px;
		height: 46px;
		font-size: 1.1rem;
	}

	.logo__name { font-size: 0.625rem; }

	.hdr__search { grid-area: search; }

	.hdr__contacts {
		grid-area: contacts;
		justify-self: end;
		min-width: 0;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: var(--sp-2) var(--sp-3);
	}

	/* На мобильном шапка разрастается до 300px — треть экрана. Липкой она
	   съедала бы её постоянно, поэтому прилипание только на широких. */
	.hdr { position: static; }

	.hdr__contacts .tel { min-width: 0; }

	/* Подписи городов убираем — места нет. Оба номера оставляем:
	   реклама идёт не по одному региону, и звонящему из другого города
	   нужен именно бесплатный 8-800, а не краснодарский межгород.
	   Второй номер переносится на строку ниже (flex-wrap выше). */
	.tel span { display: none; }

	.tel a {
		font-size: 0.875rem;
		white-space: nowrap;
	}

	.hdr__im a { width: 30px; height: 30px; }

	.hdr__bottom {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-3);
	}

	.hdr__nav {
		flex-wrap: wrap;
		gap: var(--sp-3) var(--sp-4);
		justify-content: flex-start;
	}

	.hdr__aside {
		margin-left: 0;
		justify-content: space-between;
	}

	.hdr__aside .copy { flex: 1 1 auto; justify-content: center; }

	.hero__title { font-size: 1.75rem; }
	.hero__form { padding: var(--sp-4); }
	.hero__facts { gap: var(--sp-4); }

	.cta { padding: var(--sp-4); }
	.cta__actions { width: 100%; }
	.cta__actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Контакты
   ========================================================================== */

.contacts {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	gap: var(--sp-8);
	align-items: start;
	padding-top: var(--sp-4);
}

.contacts__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--sp-6);
}

.contacts__item {
	border-top: 3px solid var(--accent);
	padding-top: var(--sp-4);
}

.contacts__item h2 {
	font-size: var(--t-base);
	margin-bottom: var(--sp-3);
}

.contacts__big {
	margin-bottom: var(--sp-1);
}

.contacts__big a {
	font-size: var(--t-md);
	font-weight: 600;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.contacts__note {
	font-size: var(--t-xs);
	color: var(--muted);
	margin-bottom: var(--sp-4);
}

.contacts__form {
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: var(--sp-6);
	background: var(--paper);
}

.contacts__form p { font-size: var(--t-sm); color: var(--muted); }

@media (max-width: 900px) {
	.contacts { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Блоки доверия: услуги, преимущества, доставка.
   Тёмная полоса разбивает длинную главную и отделяет «что мы умеем»
   от «что мы возим».
   ========================================================================== */

.services {
	background: var(--slate);
	color: var(--white);
	padding: var(--sp-12) 0;
	margin-top: var(--sp-8);
}

.services__title {
	color: var(--white);
	margin-bottom: var(--sp-2);
}

.services__lead {
	color: rgba(255, 255, 255, 0.72);
	max-width: 60ch;
	margin-bottom: 0;
}

.services__lead a {
	color: var(--accent);
	white-space: nowrap;
}

.services .tiles { padding-bottom: 0; }
.services .tile { min-height: 170px; }

/* Страница «Каталог услуг»: шаги расчёта и форма под ними. */
.steps {
	margin-top: var(--sp-12);
	padding: var(--sp-8);
	border-radius: 8px;
	background: var(--paper);
}

.steps__list {
	counter-reset: step;
	list-style: none;
	margin: var(--sp-6) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sp-6);
}

.steps__list li {
	counter-increment: step;
	padding-top: var(--sp-8);
	position: relative;
	color: var(--muted);
}

/* Нумерация здесь несёт смысл: это порядок действий, а не украшение. */
.steps__list li::before {
	content: counter(step);
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--font-display);
	font-size: var(--t-lg);
	font-weight: 600;
	color: var(--accent);
	line-height: 1;
}

.steps__list b { color: var(--ink); font-weight: 600; }

.adv {
	padding: var(--sp-12) 0;
}

.adv__title {
	margin-bottom: var(--sp-8);
}

.adv__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--sp-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.adv__item {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding-right: var(--sp-4);
	border-left: 1px solid var(--line);
	padding-left: var(--sp-6);
}

.adv__item:first-child {
	border-left: 0;
	padding-left: 0;
}

.adv__item p {
	margin: 0;
	font-size: var(--t-sm);
	color: var(--slate);
}

/* Кружок — единственное место, где оранжевый работает не как кнопка:
   он маркирует пункт, а не зовёт нажать. */
.adv__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--ink);
	flex: 0 0 auto;
}


@media (max-width: 860px) {
	.adv__item {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid var(--line);
		padding-top: var(--sp-4);
	}

	.adv__item:first-child { border-top: 0; padding-top: 0; }

}

/* ==========================================================================
   Контакты с картой
   ========================================================================== */

.contactmap {
	background: var(--paper);
	padding: var(--sp-12) 0;
}

.contactmap__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: var(--sp-8);
	align-items: stretch;
}

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

.contactmap__addr {
	font-size: var(--t-md);
	color: var(--ink);
	font-weight: 600;
	margin-bottom: var(--sp-6);
}

.contactmap__row {
	margin-bottom: var(--sp-3);
	line-height: 1.3;
}

.contactmap__tel {
	display: block;
	font-size: var(--t-md);
	font-weight: 600;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.contactmap__row span {
	font-size: var(--t-xs);
	color: var(--muted);
}

.contactmap__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: center;
	margin: var(--sp-6) 0;
}

.contactmap__note {
	font-size: var(--t-sm);
	color: var(--muted);
	max-width: 46ch;
}

/* Карта тянется на всю высоту блока, но не ниже разумного минимума. */
.contactmap__map {
	position: relative;
	min-height: 320px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--white);
}

.contactmap__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 860px) {
	.contactmap__inner { grid-template-columns: minmax(0, 1fr); }
	.contactmap__map { min-height: 260px; }
}

/* ==========================================================================
   География: склады и пункты выдачи.
   Заменила чёрную плашку с обещанием доставки — покупателю важнее увидеть,
   что склад есть рядом с ним, чем прочитать «отгружаем по всей России».
   ========================================================================== */

.geo {
	padding: var(--sp-12) 0;
	border-top: 1px solid var(--line);
}

.geo__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8);
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: var(--sp-8);
}

.geo__head h2 { margin-bottom: var(--sp-2); max-width: 20ch; }

.geo__head p {
	color: var(--muted);
	max-width: 56ch;
	margin: 0;
}

.geo__stat { text-align: right; flex: 0 0 auto; }

.geo__stat b {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	color: var(--accent-dark);
	font-variant-numeric: tabular-nums;
}

.geo__stat span {
	font-size: var(--t-xs);
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.geo__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: var(--sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.geo__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
}

/* Склад и пункт выдачи различаются полосой слева, а не цветом текста:
   покупателю нужно отличить «есть запас» от «можно забрать». */
.geo__item--sklad { border-left: 3px solid var(--accent); }
.geo__item--pvz   { border-left: 3px solid var(--line); }

.geo__type {
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.geo__city {
	font-family: var(--font-display);
	font-size: var(--t-base);
	font-weight: 600;
	color: var(--ink);
}

.geo__addr {
	font-size: var(--t-sm);
	color: var(--muted);
}

/* Кружок мессенджера без иконки — подписью. Тёмная: белым по оранжевому
   подпись давала 2.26:1 и на 10 пикселях расплывалась. */
.hdr__im-txt {
	color: var(--ink);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

@media (max-width: 860px) {
	.geo__head { flex-direction: column; align-items: flex-start; }
	.geo__stat { text-align: left; }
}

/* Указатель на карточке-обрубке старого сайта. */
.stub-note {
	margin-top: var(--sp-6);
	padding: var(--sp-4) var(--sp-6);
	border-left: 3px solid var(--accent);
	background: var(--paper);
	color: var(--slate);
}

/* Раздел без остатка: форма вместо тупика. */
.empty {
	margin-top: var(--sp-8);
	padding: var(--sp-8);
	border-radius: 8px;
	background: var(--paper);
	max-width: 640px;
}

.empty h2 { margin-bottom: var(--sp-2); }
.empty__near { color: var(--muted); font-size: var(--t-sm); }

/* Документ на странице: билет ТПП, сертификаты. */
.doc {
	margin: var(--sp-8) 0;
	max-width: 720px;
}

.doc img {
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: 4px;
}

.doc figcaption {
	margin-top: var(--sp-3);
	font-size: var(--t-sm);
	color: var(--muted);
}

/* Уведомление о cookie */
.cookie {
	position: fixed;
	inset: auto var(--sp-4) var(--sp-4) auto;
	z-index: 60;
	max-width: 27rem;
	display: flex;
	gap: var(--sp-3);
	align-items: center;
	padding: var(--sp-3) var(--sp-4);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	font-size: var(--t-sm);
	line-height: 1.45;
}
.cookie p { margin: 0; }
.cookie [data-cookie-ok] { flex: none; }
@media (max-width: 40rem) {
	.cookie { inset: auto var(--sp-3) var(--sp-3) var(--sp-3); flex-direction: column; align-items: stretch; }
}

/* Пальцем в ссылку высотой 17px не попасть: на телефоне у навигации
   и номера подкладываем вертикальный отступ до 44px — минимум,
   на который рассчитаны мобильные браузеры. */
@media (max-width: 60rem) {
	.hdr__nav a,
	.hdr__contacts a[href^="tel:"] {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* Реквизиты: пары «ярлык — значение» в две колонки, значение моноширинным —
   номера сверяют посимвольно, а пропорциональный шрифт для этого плох. */
.reqs {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-1) var(--sp-3);
	margin: var(--sp-2) 0 0;
	font-size: var(--t-sm);
}
.reqs dt { color: var(--muted); }
.reqs dd { margin: 0; font-variant-numeric: tabular-nums; }
/* Пояснение после списка реквизитов иначе слипается с последней строкой. */
.reqs + .contacts__note { margin-top: var(--sp-3); }

/* Заглушка карты: занимает то же место, что и виджет, чтобы вёрстка
   не прыгала после подстановки. */
.mapstub {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	width: 100%;
	height: 100%;
	min-height: 18rem;
	padding: var(--sp-6);
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--slate);
	font: inherit;
	text-align: center;
	cursor: pointer;
}
.mapstub:hover { border-color: var(--accent); color: var(--ink); }
.mapstub__pin { color: var(--accent); font-size: var(--t-lg); }
.mapstub__text { font-weight: 600; }
.mapstub__addr { font-size: var(--t-sm); color: var(--muted); }

/* Смежные разделы — соседи по родителю, внизу страницы раздела. */
.siblings {
	margin-top: var(--sp-12);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--line);
}
.siblings h2 { font-size: var(--t-md); margin: 0 0 var(--sp-4); }
.siblings ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.siblings a {
	display: inline-flex;
	align-items: baseline;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--slate);
	font-size: var(--t-sm);
	text-decoration: none;
}
.siblings a:hover { border-color: var(--accent); color: var(--ink); }
.siblings a span { color: var(--muted); font-size: var(--t-xs); }

/* ------------------------------------------------------------------ */
/* «О компании»: рассказ слева, документы и факты справа               */
/* ------------------------------------------------------------------ */

.about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 21rem;
	gap: var(--sp-8);
	align-items: start;
	margin-bottom: var(--sp-16);
}
/* Был --t-md: вводные абзацы получались ростом с заголовки секций
   и страница читалась как сплошной крупный текст. */
.about__intro { font-size: var(--t-base); }
.about__intro p:first-child { margin-top: 0; }

/* Секции в две колонки: страница перестаёт быть лентой на 3700px. */
.about__cols {
	columns: 2;
	column-gap: var(--sp-8);
	margin-top: var(--sp-6);
}
.about__block {
	break-inside: avoid;
	margin-bottom: var(--sp-6);
}
.about__block h2 { margin-top: 0; font-size: var(--t-md); }

.about__side {
	position: sticky;
	top: var(--sp-4);
	display: grid;
	gap: var(--sp-4);
}
.card {
	padding: var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
}
.card h2 { margin: 0 0 var(--sp-2); font-size: var(--t-base); }
.card p { margin: 0 0 var(--sp-2); font-size: var(--t-sm); }
.card p:last-child { margin-bottom: 0; }
.card img { max-width: 100%; height: auto; border-radius: var(--radius); }
.card figure { margin: var(--sp-2) 0 0; }

.card__list { margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.card__list li { display: flex; flex-direction: column; margin-bottom: var(--sp-2); }
.card__list span { color: var(--muted); font-size: var(--t-xs); }
.card__note { margin-top: var(--sp-3); color: var(--muted); }

.card--doc { background: var(--paper); }
.card--cta { background: var(--paper); }
.card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

@media (max-width: 64rem) {
	.about { grid-template-columns: 1fr; }
	.about__cols { columns: 1; }
	.about__side { position: static; }
}

/* ------------------------------------------------------------------ */
/* Услуги                                                              */
/* ------------------------------------------------------------------ */

/* У услуг длинные названия («Теплоизоляция трубопровода») и подпись под ними.
   На плитке каталога текст лежит поверх фото — здесь он налезал на снимок
   и обрезался. Поэтому фото сверху, текст под ним на белом. */
.tiles--srv .tile {
	min-height: 0;
	background: var(--white);
	border: 1px solid var(--line);
}
.tiles--srv .tile > a {
	display: block;
	padding: 0;
	color: var(--ink);
}
.tiles--srv .tile__img {
	position: static;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.tiles--srv .tile__img::after { content: none; }
.tiles--srv .tile__body { position: static; padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.tiles--srv .tile__name { font-size: var(--t-base); font-weight: 600; }
.tiles--srv .tile__n { display: block; margin-top: var(--sp-1); color: var(--muted); font-size: var(--t-sm); }
.tiles--srv .tile__more {
	position: static;
	display: inline-block;
	margin: 0 var(--sp-4) var(--sp-4);
}

/* Второй блок в левой колонке: без него под «Как рассчитать» оставалось
   полэкрана пустоты, потому что форма справа вдвое выше. */
.steps--mat { margin-top: var(--sp-4); }
.matlist { margin: 0; padding: 0; list-style: none; }
.matlist li {
	padding: var(--sp-2) 0;
	border-bottom: 1px solid var(--line);
	font-size: var(--t-sm);
}
.matlist li:last-child { border-bottom: 0; }
.matlist b { display: block; color: var(--ink); }
.steps__note { margin-top: var(--sp-3); color: var(--muted); font-size: var(--t-sm); }

/* Название услуги на белой карточке: базовый .tile__name задан белым
   под тёмную плитку каталога и здесь пропадал. */
.tiles--srv .tile__name { color: var(--ink); }

/* Оба левых блока — в одной ячейке сетки: иначе второй уходит в колонку
   формы и встаёт над ней. */
.prod__main { display: grid; gap: var(--sp-4); align-content: start; }


/* Подсказка про список запроса — над ведомостью. */
.ledger__hint {
	margin: 0 0 var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border-left: 3px solid var(--accent);
	background: var(--paper);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: var(--t-sm);
	line-height: 1.5;
	color: var(--slate);
}
.ledger__hint b { color: var(--ink); }

/* Сообщение после первого добавления в список запроса. */
.reqtoast {
	position: fixed;
	inset: auto var(--sp-4) var(--sp-4) auto;
	z-index: 70;
	max-width: 25rem;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--white);
	font-size: var(--t-sm);
	line-height: 1.45;
	box-shadow: var(--shadow-md);
	cursor: pointer;
	animation: reqtoast-in .2s ease-out;
}
.reqtoast a { color: var(--accent); white-space: nowrap; }
.reqtoast--out { opacity: 0; transition: opacity .3s; }

@keyframes reqtoast-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.reqtoast { animation: none; }
}
@media (max-width: 40rem) {
	.reqtoast { inset: auto var(--sp-3) var(--sp-3) var(--sp-3); max-width: none; }
}

/* ------------------------------------------------------------------ */
/* Пальцевые размеры на телефоне                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 48rem) {
	/* Кнопки в ведомости — рабочий инструмент покупателя, а на телефоне
	   они были 28px высотой. В 28 пикселей пальцем не попасть: минимум,
	   на который рассчитаны мобильные браузеры, — 44. */
	.ledger__actions .btn--sm {
		min-height: 44px;
		padding-block: var(--sp-2);
		font-size: var(--t-sm);
	}

	/* Ссылки подвала и меню каталога: сами по себе строки текста, но
	   нажимать по ним всё равно приходится. Добавляем вертикальный
	   отступ — площадь растёт, вид почти не меняется. */
	.ftr ul a,
	.ftr__bottom a {
		display: inline-block;
		padding-block: var(--sp-2);
	}

	/* Хлебные крошки — вспомогательная навигация, но «Главная»
	   и «Продукция» жмут часто. */
	.crumbs a { display: inline-block; padding-block: var(--sp-1); }
}

/* Таблица на телефоне разворачивается в карточки. Строка с прочерком
   там ничего не сообщает, а место занимает: в разделах, где диаметр
   и длина не заполнены, это половина карточки.

   Селектор с тегом td — иначе правило .ledger__table td { display: block }
   из блока карточек оказывается специфичнее и прочерки остаются.
   Точка перелома та же (720px), где таблица и становится карточками. */
@media (max-width: 720px) {
	.ledger__table td.ledger__num--empty { display: none; }
}

/* Описание раздела на мобильном сворачиваем: 800px текста между заголовком
   и товарами — два экрана прокрутки для того, кто пришёл за трубой.
   Текст остаётся в разметке целиком, скрыт только визуально: для поиска
   страница не меняется. */
.cat__more { display: none; }

@media (max-width: 720px) {
	.cat__desc[data-clamp] {
		position: relative;
		max-height: 11rem;
		overflow: hidden;
	}

	.cat__desc[data-clamp].is-open {
		max-height: none;
	}

	.cat__more {
		display: block;
		position: absolute;
		inset: auto 0 0;
		padding: var(--sp-12) 0 var(--sp-1);
		border: 0;
		width: 100%;
		text-align: left;
		font: inherit;
		font-weight: 600;
		/* Акцентный оранжевый по белому даёт 2.26:1 — для текста мало.
		   Подчёркиванием отмечаем, что это кнопка. */
		color: var(--ink);
		text-decoration: underline;
		text-underline-offset: 3px;
		cursor: pointer;
		/* Градиент вместо резкого обрыва — видно, что текст продолжается. */
		background: linear-gradient( to bottom, transparent, var(--white) 2rem );
	}

	.cat__desc.is-open .cat__more { display: none; }
}