/*
Theme Name: Швабе-Урал 2026
Theme URI: https://shvabe-ural.ru/
Author: Швабе-Урал
Description: Тема по утверждённому макету главной страницы. Каталог с запросом коммерческого предложения, без корзины и цен.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: shvabe-2026
Tags: business, catalog, medical
*/

/* ==========================================================================
   1. Токены — значения взяты из макета
   ========================================================================== */

:root {
	/* Фирменные цвета взяты с текущего сайта и логотипа:
	   #1c2944 и #6f9eb0 — из логотипа, #7B98AC — кнопка каталога,
	   #F78F20 — оранжевый кнопки «Запросить КП». */
	--brand-navy: #1c2944;
	--brand-steel: #7B98AC;
	--brand-steel-dark: #67879b;
	--brand-light: #6f9eb0;

	--primary: #2a698e;
	--primary-dark: #1e4f6d;
	--accent-blue: #2563eb;
	--accent-orange: #F78F20;
	--accent-orange-dark: #dd7a12;

	--text-primary: #1e293b;
	--text-secondary: #64748b;
	--text-muted: #94a3b8;
	--ink: #0f172a;

	--bg-page: #f8fafc;
	--bg-card: #ffffff;
	--bg-soft: #f1f5f9;
	--bg-light-blue: #e0f2fe;
	--bg-partner: #edf6fc;
	--partner-dark: #2a5a78;
	--banner-dark: #1c2944;
	--footer-dark: #202945; /* официальный цвет компании */

	/* Приглушённые тона для тёмного подвала — как на shvabe.com,
	   где текст не белый, а разбелённый серо-голубой. */
	--footer-text: #b3cad5;
	--footer-dim: #8ea2b1;

	--line: #e2e8f0;
	--line-soft: #f1f5f9;
	--line-input: #cbd5e1;

	--radius-main: 16px;
	--radius-lg: 24px;
	--radius-sm: 8px;
	--radius-btn: 10px;
	--radius-pill: 50px;

	--container: 1200px;
	--gutter: 20px;

	--font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	/* Шрифт выпадающих меню — как на сайте головной компании shvabe.com.
	   InterFace там подключён по лицензии Monotype; файлов у нас пока нет,
	   поэтому до их появления подставляется Inter. Достаточно положить
	   гарнитуру в assets/fonts и описать @font-face — правила менять не нужно. */
	--font-menu: "InterFace W10 Regular", "InterFace", var(--font-main);

	--shadow-xs: 0 1px 3px rgba(0, 0, 0, .02);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, .05);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, .03);
	--shadow-lg: 0 4px 20px rgba(0, 0, 0, .03);
}

/* ==========================================================================
   2. База
   ========================================================================== */

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

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

body {
	margin: 0;
	background-color: var(--bg-page);
	color: var(--text-primary);
	font-family: var(--font-main);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--primary); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; color: var(--text-primary); }
p { margin: 0; }
ul { margin: 0; padding: 0; }

:focus-visible { outline: 3px solid var(--accent-orange); outline-offset: 2px; border-radius: 4px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--primary); color: #fff; padding: 10px 18px; }
.skip-link:focus { left: 0; }

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

.stack { display: flex; flex-direction: column; gap: 20px; padding-top: 16px; }

.card { background: var(--bg-card); border-radius: var(--radius-main); }

/* ==========================================================================
   3. Кнопки
   ========================================================================== */

.btn-orange {
	display: inline-flex; align-items: center; gap: 8px;
	background-color: var(--accent-orange); color: #fff; border: 0;
	border-radius: var(--radius-pill); padding: 12px 28px;
	font: inherit; font-weight: 600; cursor: pointer;
	box-shadow: 0 2px 8px rgba(247, 143, 32, .28);
	transition: background-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.btn-orange:hover {
	background-color: var(--accent-orange-dark); color: #fff;
	transform: translateY(-2px); box-shadow: 0 10px 22px rgba(247, 143, 32, .45);
}
.btn-orange:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(247, 143, 32, .35); }
.btn-orange svg { transition: transform .2s ease; }
.btn-orange:hover svg { transform: translateX(4px); }
.btn-orange--lg { font-size: 15px; padding: 14px 30px; box-shadow: 0 4px 14px rgba(247, 143, 32, .35); }

.link-arrow {
	display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600;
	color: var(--accent-blue); transition: color .2s ease, gap .2s ease;
}
.link-arrow svg { transition: transform .25s ease; }
.link-arrow:hover { color: var(--primary); }
.link-arrow:hover svg { transform: translateX(4px) rotate(360deg); }

.link-blue {
	display: inline-flex; align-items: center; gap: 6px; color: var(--primary);
	font-size: 14px; font-weight: 600; transition: gap .2s ease, color .2s ease;
}
.link-blue svg { transition: transform .2s ease; }
.link-blue:hover svg { transform: translateX(4px); }

/* Светло-голубая заливка на светлом полотне читалась хуже обычного состояния,
   поэтому под курсором кнопка заливается фирменным цветом. */
.pill-link {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 20px; background-color: #eaf1f7; border: 1px solid #d5e4ef;
	color: var(--primary); border-radius: var(--radius-pill); font-size: 14px; font-weight: 500;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease,
		box-shadow .2s ease, transform .2s ease;
}
.pill-link:hover {
	background-color: var(--brand-steel); border-color: var(--brand-steel); color: #fff;
	transform: translateY(-1px); box-shadow: 0 6px 16px rgba(123, 152, 172, .4);
}
.pill-link svg { transition: transform .2s ease; }
.pill-link:hover svg { transform: translateX(3px); }

/* ==========================================================================
   4. Шапка — карточка внутри контейнера, как в макете
   ========================================================================== */

.site-header { padding: 16px 0 0; }

.header-card {
	background: var(--bg-card); border-radius: var(--radius-main);
	padding: 12px 24px; display: flex; flex-direction: column; gap: 12px;
	box-shadow: var(--shadow-sm);
}

.header-top {
	display: flex; justify-content: space-between; align-items: center;
	border-bottom: 1px solid var(--line-soft); padding-bottom: 8px;
	font-size: 13px; flex-wrap: wrap; gap: 10px;
}
.header-claim {
	background: var(--bg-light-blue); color: var(--primary);
	padding: 4px 14px; border-radius: var(--radius-pill); font-weight: 400;
}
.header-contacts { display: flex; gap: 12px; color: var(--text-secondary); font-weight: 500; flex-wrap: wrap; }
/* Контакты — кликабельные плашки: при наведении подсвечивается вся
   область со значком, а не только цвет надписи. */
.header-contacts a {
	color: inherit; display: flex; align-items: center; gap: 8px;
	padding: 6px 12px; border-radius: var(--radius-pill);
	border: 1px solid transparent; white-space: nowrap;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.header-contacts a svg { color: var(--brand-steel); transition: color .18s ease, transform .18s ease; }
/* Телефон — главный контакт: выделяем сильнее остальных. */
.header-contacts a[href^="tel:"] { font-weight: 600; color: var(--text-primary); }

/* Наведение — только там, где есть мышь.
   На сенсорном экране `:hover` залипает: первое касание применяет наведение
   и гасится как таковое, и по ссылке приходится стучать дважды. Поэтому
   всё оформление наведения заперто в `hover: hover`, а для пальца ниже
   отдельная подсветка нажатия. */
@media (hover: hover) {
	.header-contacts a:hover {
		color: var(--primary); background: #eaf3fc; border-color: #cfe4f6;
		box-shadow: 0 4px 14px rgba(28, 41, 68, .08);
	}
	.header-contacts a:hover svg { color: var(--primary); }
	.header-contacts a[href^="tel:"]:hover {
		color: #fff; background: var(--primary); border-color: var(--primary);
		box-shadow: 0 6px 18px rgba(28, 71, 122, .28);
	}
	.header-contacts a[href^="tel:"]:hover svg { color: #fff; transform: rotate(-12deg); }
}
.header-contacts a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Первая колонка равна ширине кнопки «Каталог», а отступ — шагу навигации.
   За счёт этого левый край поиска встаёт ровно под началом меню. */
.header-main {
	display: grid; grid-template-columns: 240px minmax(0, 1fr) auto;
	gap: 28px; align-items: center;
}
.site-logo { display: flex; align-items: center; }
.site-logo img { height: 56px; width: auto; }
.site-logo__text { font-size: 24px; font-weight: 800; color: var(--brand-navy); }
/* В подвале логотип второстепенен — заметно мельче, чем в шапке. */
.footer-brand__logo img { height: 34px; width: auto; }

.header-search { min-width: 0; position: relative; }
.header-search input[type="search"] {
	width: 100%; padding: 10px 40px 10px 16px; font: inherit; font-size: 14px;
	border: 1px solid var(--line-input); border-radius: var(--radius-pill);
	outline: none; background: var(--bg-page); color: var(--text-primary);
}
.header-search input::placeholder { color: var(--text-muted); }
.header-search button {
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 0;
}

.header-origin { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
/* Кнопка в шапке нужна только мобильной версии — см. блок `.has-tapbar`.
   Селектор с двумя классами намеренно: у кнопки есть класс плагина
   `wqoecf_enquiry_button`, а тема ниже по файлу задаёт ему `inline-flex`
   и одноклассовое скрытие перебивала — кнопка вылезала на десктопе
   и ломала сетку шапки. */
.header-main .header-cta { display: none !important; }
/* Плагин запроса цены подставляет своим кнопкам конверт через `::before`.
   В шапке значок уже есть — свой, по макету, — и два подряд выглядят
   ошибкой. На карточках товара конверт остаётся как был. */
.header-cta::before { content: none !important; }

.header-nav { display: flex; align-items: center; gap: 28px; padding-top: 4px; flex-wrap: wrap; }
.nav-catalog-wrap { position: relative; }
.nav-catalog {
	background-color: var(--brand-steel); color: #fff; border: none; border-radius: var(--radius-btn);
	padding: 13px 22px; font: inherit; font-weight: 700; font-size: 13px; letter-spacing: .5px;
	cursor: pointer; display: flex; align-items: center; justify-content: space-between;
	gap: 18px; min-width: 240px; list-style: none; user-select: none;
}
.nav-catalog {
	text-decoration: none;
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease, letter-spacing .2s ease;
}
.nav-catalog:hover {
	background-color: var(--brand-steel-dark);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(123, 152, 172, .45);
	letter-spacing: .8px;
}
.nav-catalog:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(123, 152, 172, .4); }
.nav-catalog__label svg { transition: transform .2s ease; }
.nav-catalog:hover .nav-catalog__label svg { transform: rotate(-90deg); }
.nav-catalog__label { display: flex; align-items: center; gap: 10px; }
.nav-catalog__chevron { display: flex; transition: transform .18s ease; }
.nav-catalog-wrap:hover .nav-catalog__chevron,
.nav-catalog-wrap:focus-within .nav-catalog__chevron { transform: rotate(180deg); }

/* Раскрывается наведением. Верхний отступ — часть самой панели,
   иначе на разрыве между кнопкой и списком курсор «проваливается»
   и меню захлопывается на полпути. */
.nav-catalog-menu {
	position: absolute; left: 0; top: 100%; z-index: 70; padding-top: 8px;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-catalog-wrap:hover .nav-catalog-menu,
.nav-catalog-wrap:focus-within .nav-catalog-menu {
	opacity: 1; visibility: visible; transform: none;
}
.nav-catalog-menu__inner {
	min-width: 320px; background: #fff; border-radius: var(--radius-main);
	box-shadow: 0 12px 32px rgba(15, 23, 42, .14); padding: 10px;
}
.nav-catalog-menu ul { list-style: none; }
.nav-catalog-menu li a {
	display: block; padding: 10px 14px; border-radius: var(--radius-sm);
	font-family: var(--font-menu); font-size: 14px; color: var(--text-primary);
}
.nav-catalog-menu__all { font-family: var(--font-menu); }
.nav-catalog-menu li a:hover { background: var(--bg-soft); color: var(--primary); }
.nav-catalog-menu__all {
	display: flex; align-items: center; gap: 8px; margin-top: 6px;
	padding: 12px 14px; border-top: 1px solid var(--line-soft);
	font-size: 14px; font-weight: 600; color: var(--primary);
}

.menu { display: flex; list-style: none; gap: 0; font-size: 13px; font-weight: 700; letter-spacing: .3px; flex-wrap: wrap; }
.menu > li { padding: 0 18px; }
.menu > li:first-child { padding-left: 0; }
.menu > li:last-child { padding-right: 0; }
/* Тонкие разделители между пунктами меню */
.menu > li + li { border-left: 1px solid var(--line); }
.menu li { position: relative; }
.menu > li > a { color: var(--text-primary); display: flex; align-items: center; gap: 4px; text-transform: uppercase; padding: 6px 0; }
.menu > li > a:hover { color: var(--primary); }
.menu .sub-menu {
	list-style: none; position: absolute; left: 0; top: 100%; min-width: 280px;
	background: #fff; border-radius: var(--radius-main); box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
	padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s, transform .15s, visibility .15s; z-index: 60;
}
.menu li:hover > .sub-menu, .menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.menu .sub-menu a { display: block; padding: 9px 12px; border-radius: var(--radius-sm);
	font-family: var(--font-menu);
	font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-primary); }
.menu .sub-menu a:hover { background: var(--bg-soft); color: var(--primary); }

.nav-toggle { display: none; background: var(--primary); color: #fff; border: 0;
	border-radius: var(--radius-btn); padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; }

/* ==========================================================================
   5. Первый экран
   ========================================================================== */

.hero {
	/* Оттенки взяты глубже, чем в макете: на светлом фоне страницы
	   исходный градиент почти не читался как отдельный блок. */
	background: linear-gradient(110deg, #cbe6fa 0%, #e8f5ff 45%, #cbe6fa 100%);
	border: 1px solid #b6dcf5;
	border-radius: var(--radius-main);
	min-height: 340px; box-shadow: var(--shadow-md);
	display: grid; /* слайды складываются в одну ячейку — высота по самому большому */
	position: relative; overflow: hidden;
}
/* Отступы у слайда, а не у обёртки: тогда широкий баннер
   может занимать всю площадь до краёв. */
.hero__slide { padding: 40px 64px; }

/* Режим с широким баннером: картинка справа во всю высоту,
   текст лежит поверх и от неё не зависит. */
.hero__slide.has-banner {
	grid-template-columns: minmax(0, 54%) 1fr;
	/* Цвет снят с левого края самого баннера. Под слайдом с картинкой
	   лежит именно он, а не общий градиент блока: иначе на границе, где
	   кончается снимок, видна ступенька — слева градиент, справа фон
	   фотографии. */
	background: #b8daf3;
}
/* Картинку масштабируем по высоте и прижимаем вправо: при подгонке
   по ширине прибор обрезался сверху и снизу. Лишняя часть кадра
   уходит влево под текст — там у баннера всё равно пустой фон. */
.hero__banner { position: absolute; inset: 0; z-index: 1; display: flex; justify-content: flex-end; }
.hero__banner img { height: 100%; width: auto; max-width: none; object-fit: contain; object-position: right center; }
/* Плавная засветка слева — текст остаётся читаемым при любой картинке. */
.hero__slide.has-banner::before {
	content: ""; position: absolute; inset: 0; z-index: 2;
	background: linear-gradient(90deg,
		rgba(232, 245, 255, .97) 0%,
		rgba(232, 245, 255, .92) 30%,
		rgba(232, 245, 255, .55) 48%,
		rgba(232, 245, 255, 0) 66%);
}
.hero__slide.has-banner .hero__content { position: relative; z-index: 3; }

/* Стрелки перелистывания */
.hero__nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
	width: 44px; height: 44px; padding: 0; border-radius: 50%;
	border: 1px solid #b6dcf5;
	background: rgba(255, 255, 255, .92); color: var(--primary); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hero__nav:hover { background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .14); }
.hero__nav--prev { left: 10px; }
.hero__nav--next { right: 10px; }
.hero__nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.hero__nav--next:hover { transform: translateY(-50%) translateX(2px); }

/* Полоса прогресса до следующего слайда — подсказка, а не акцент,
   поэтому тон приглушённый и высота меньше. */
.hero__progress {
	position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 4;
	background: rgba(42, 105, 142, .10);
}
.hero__progress span { display: block; height: 100%; width: 0; background: rgba(123, 152, 172, .7); }
.hero.is-playing .hero__progress span { animation: shv-progress var(--interval, 6000ms) linear forwards; }
@keyframes shv-progress { from { width: 0; } to { width: 100%; } }
.hero__slide {
	grid-area: 1 / 1;
	display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
	opacity: 0; visibility: hidden; transform: translateX(24px);
	transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; transform: none; }
/* Уходящий слайд гаснет заметно быстрее, чем появляется следующий.
   При одинаковой длительности оба слайда полсекунды видны разом, и на
   текстовых слайдах — они лежат на одинаковом светлом фоне — надписи
   накладывались друг на друга и читались как каша. */
.hero__slide.is-leaving {
	transform: translateX(-24px); opacity: 0;
	transition-duration: .16s;
}
.hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hero__badge {
	background: #fff; color: var(--primary); font-size: 13px; font-weight: 400;
	padding: 5px 15px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.hero__kicker { color: var(--primary); font-weight: 600; font-size: 18px; margin-bottom: 6px; }
.hero__title { color: var(--ink); font-size: 32px; font-weight: 800; line-height: 1.2; }
.hero__text { color: var(--text-secondary); font-size: 14px; max-width: 440px; line-height: 1.5; }
.hero__actions { display: flex; align-items: center; gap: 24px; margin-top: 12px; flex-wrap: wrap; }
.hero__dots { display: flex; gap: 8px; align-items: center; }
.hero__dots button {
	width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
	background: #93c5fd; cursor: pointer;
	transition: width .2s ease, height .2s ease, background-color .2s ease;
}
.hero__dots button:hover { background: #60a5fa; }
.hero__dots button.is-active { width: 10px; height: 10px; background: var(--primary); }
.hero__media { display: flex; justify-content: center; align-items: center; height: 100%; }
/* Снимки товаров сняты на белом — «умножение» растворяет его в подложке. */
.hero__media img { max-height: 320px; width: auto; object-fit: contain; border-radius: 12px; mix-blend-mode: multiply; }

/* Карточки партнёрств */
.partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.partner {
	border-radius: var(--radius-main); padding: 28px 32px;
	display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.partner__text { display: flex; flex-direction: column; gap: 8px; max-width: 60%; }
.partner__kicker { font-weight: 600; font-size: 14px; }
/* Заголовки партнёрств не спорят с заголовками разделов — вес умереннее. */
.partner__title { font-size: 20px; font-weight: 700; line-height: 1.25; }

/* Карточка целиком нарисована картинкой: графика и знак уже в ней.
   Масштабируем по высоте и прижимаем вправо — при заливке «cover»
   пропорции карточки съедали знак. Цвет подложки взят из самой
   картинки, чтобы слева не было видно стыка. */
.partner--bg {
	background-color: #2e5f83;
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
}
.partner--bg .partner__text { max-width: 58%; }
.partner__note { font-size: 13px; line-height: 1.4; }
/* Доля карточки, а не абсолютная ширина: иначе логотип вылезает
   из своей колонки и наезжает на текст. */
/* Блочная раскладка вместо строчной: у inline-элемента остаётся
   место под базовую линию, и логотип съезжает выше центра. */
.partner__logo { flex: 0 1 auto; max-width: 42%; min-width: 0; display: flex; align-items: center; }
.partner__logo img { max-width: 100%; max-height: 70px; object-fit: contain; display: block; }

.partner__badge {
	display: flex; align-items: center; justify-content: center; max-width: 100%; line-height: 0;
}
.partner__badge img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

/* На светлой карточке логотип лежит прямо на подложке — плашка ему не нужна. */
.partner__badge--light { width: auto; height: auto; padding: 0; }
.partner__badge--light img { max-width: 100%; max-height: 84px; }

/* Светлый знак ложится прямо на тёмную карточку, подложка не нужна.
   Подпись набирается шрифтом — так она чёткая при любом масштабе
   и не добавляет веса картинке. */
.partner__badge--dark {
	flex-direction: column; gap: 6px; width: auto; height: auto; padding: 0; background: none;
}
.partner__badge--dark img { max-width: 120px; max-height: 66px; }
.partner__badge-label {
	font-size: 30px; font-weight: 800; line-height: 1;
	letter-spacing: .06em; color: #fff;
}

/* Фон страницы почти такой же светлый, поэтому карточке нужен
   более насыщенный тон и обводка — иначе она сливается. */
/* Именно background-color, а не сокращённое background: оно сбрасывает
   позицию и масштаб фоновой картинки у карточек с готовой графикой. */
.partner--light { background-color: var(--bg-light-blue); border: 1px solid #bfe3f7; }
.partner--light .partner__kicker { color: var(--primary); }
.partner--light .partner__note { color: var(--text-secondary); }

.partner--dark { background-color: var(--partner-dark); color: #fff; }
.partner--dark .partner__kicker { color: #93c5fd; font-weight: 500; }
.partner--dark .partner__title { color: #fff; }
.partner--dark .partner__note { color: #cbd5e1; }

/* Вкладки под первым экраном */
.tabs {
	display: flex; gap: 32px; border-bottom: 2px solid var(--line);
	padding-bottom: 12px; margin-top: 10px; font-size: 16px; font-weight: 600;
	letter-spacing: -.01em; flex-wrap: wrap;
}
.tabs button {
	background: none; border: 0; padding: 0 0 11px; margin-bottom: -14px;
	font: inherit; color: var(--text-primary); cursor: pointer; border-bottom: 3px solid transparent;
}
.tabs button[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.tabs button:hover { color: var(--primary); }
.tab-panel[hidden] { display: none; }

/* ==========================================================================
   6. Каталог
   ========================================================================== */

.section { padding: 40px 0; }
.section__head { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.section__head h2 { font-size: 32px; font-weight: 700; line-height: 1.2; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; }

/* Тон светлее прежнего голубого, но заметно отличается от полотна
   страницы — иначе карточка перестаёт читаться как карточка. */
.cat-card {
	background: #ecf2f9; border: 1px solid #d8e5f0;
	border-radius: var(--radius-main); padding: 20px 22px 20px 16px;
	display: flex; align-items: center; gap: 16px; min-height: 176px;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.cat-card:hover { background: #fff; border-color: #cfe0ee; box-shadow: var(--shadow-md); }
/* Без белой подложки: снимки приведены к белому фону, и режим
   «умножение» растворяет его в цвете карточки — плитка не выделяется. */
.cat-card__img {
	width: 150px; height: 140px; flex-shrink: 0; background: transparent;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cat-card__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cat-card__img > svg { color: var(--brand-steel); }
.cat-card__body { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.cat-card__title { font-size: 17px; font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
.cat-card__title a { color: var(--text-primary); }
.cat-card__title a:hover { color: var(--primary); }
.cat-card__text { font-size: 13px; color: var(--text-secondary); line-height: 1.45; margin-bottom: 14px; }

/* Плитка товара */
.product-grid, ul.products {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: 24px; list-style: none; margin: 0; padding: 0;
}
li.product {
	background: #fff; border: 1px solid #dde7ef; border-radius: var(--radius-main);
	overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
	transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
	/* WooCommerce раскладывает плитки обтеканием и процентной шириной.
	   Внутри сетки это ломает ряды, поэтому его правила снимаем. */
	width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
}
ul.products::before, ul.products::after { content: none !important; }
li.product:hover {
	box-shadow: 0 14px 32px rgba(15, 23, 42, .12);
	border-color: var(--brand-steel); transform: translateY(-4px);
}

/* Снимки заранее приведены к одному виду скриптом: фон срезан,
   предмет вписан в одинаковый квадрат на белом. Поэтому режим
   «умножение» здесь не нужен — он бы только портил кадры,
   снятые на сером и голубоватом фоне. */
/* Пропорция 4:3 вместо квадрата: снимки выровнены по масштабу,
   и высокая плитка только растягивала карточку. */
.product-card__media {
	display: block; padding: 12px; aspect-ratio: 4 / 3; position: relative; overflow: hidden;
	background: #fff;
}
.product-card__media img {
	width: 100%; height: 100%; object-fit: contain;
	transition: transform .35s ease;
}
li.product:hover .product-card__media img { transform: scale(1.06); }

/* Отметка о включении в реестры — весомый довод при госзакупке. */
.product-card__flag {
	position: absolute; left: 12px; top: 12px;
	background: #dcfce7; color: #047857; font-size: 11px; font-weight: 700;
	letter-spacing: .02em; padding: 4px 10px; border-radius: var(--radius-pill);
}

/* Фото на белом, текстовая часть — на цветной подложке. */
.product-card__body {
	padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1;
	background: linear-gradient(160deg, #f7fafd 0%, #eaf1f7 100%);
	border-top: 1px solid var(--line-soft);
}
.product-card__cat { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.product-card__title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.product-card__title a { color: var(--text-primary); }
.product-card__title a:hover { color: var(--primary); }
.product-card__brand {
	align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--primary);
	background: var(--bg-light-blue); padding: 3px 10px; border-radius: var(--radius-pill);
}

.product-card__foot {
	margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft);
	display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.product-card__price { font-weight: 700; color: var(--primary); font-size: 14px; }
.product-card__cta {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 600; color: var(--accent-orange);
	transition: color .2s ease;
}
.product-card__cta svg { transition: transform .2s ease; }
.product-card__cta:hover { color: var(--accent-orange-dark); }
li.product:hover .product-card__cta svg { transform: translateX(3px); }

li.product a.button, li.product button.button, .wqoecf_enquiry_button,
a.wqoecf_enquiry_button, .single-product a.button {
	display: inline-flex; align-items: center; justify-content: center;
	background-color: var(--accent-orange); color: #fff; border: 0;
	border-radius: var(--radius-pill); padding: 10px 22px;
	font-weight: 600; font-size: 14px; cursor: pointer;
}
li.product a.button:hover, a.wqoecf_enquiry_button:hover { background-color: var(--accent-orange-dark); color: #fff; }
/* В карточке товара это главное действие — во всю ширину блока. */
.summary a.wqoecf_enquiry_button {
	display: flex; width: 100%; padding: 14px 22px; font-size: 15px;
	box-shadow: 0 6px 16px rgba(247, 143, 32, .25);
}

/* ==========================================================================
   7. Тёмный баннер с цифрами
   ========================================================================== */

.banner-dark {
	position: relative; border-radius: var(--radius-main); overflow: hidden;
	background-color: var(--banner-dark); color: #fff; min-height: 480px;
	display: flex; align-items: center;
}
/* Фотография оборудования справа, а не растянутая подложка:
   снимки товаров сняты на белом фоне и в роли фона выглядят грязно. */
.banner-dark__figure {
	position: absolute; right: 0; top: 0; bottom: 0; width: 46%; z-index: 1;
	display: flex; align-items: center; justify-content: center; padding: 40px;
}
/* Снимки товаров сняты на белом фоне: на тёмном полотне они смотрятся
   случайным прямоугольником. Оформляем их намеренной светлой карточкой. */
.banner-dark__figure img {
	max-width: 100%; max-height: 100%; width: auto; object-fit: contain;
	background: #fff; border-radius: 14px; padding: 18px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
.banner-dark__overlay {
	position: absolute; inset: 0; z-index: 2;
	background:
		radial-gradient(120% 90% at 80% 50%, rgba(56, 189, 248, .18) 0%, rgba(13, 56, 97, 0) 60%),
		linear-gradient(90deg, rgba(13, 56, 97, 1) 0%, rgba(13, 56, 97, .96) 45%, rgba(13, 56, 97, .55) 72%, rgba(13, 56, 97, .35) 100%);
}

/* Режим со сплошной врезкой: кадр виден целиком по высоте и прижат вправо.
   Подложка и заливка — фирменный кобальт, он живее прежнего графита. */
.banner-dark--bg { background-color: #11336d; }
.banner-dark__banner { position: absolute; inset: 0; z-index: 1; display: flex; justify-content: flex-end; }
.banner-dark__banner img {
	height: 100%; width: auto; max-width: none; object-fit: contain;
	object-position: right center; display: block;
}
/* Слева заливка плотная — она же перекрывает вшитую в снимок тёмную тень;
   вправо сходит почти на нет, оставляя лёгкую синеву на всём кадре,
   чтобы фотография и подложка читались как одно полотно. */
.banner-dark--bg .banner-dark__overlay {
	background:
		linear-gradient(180deg, rgba(6, 20, 48, 0) 45%, rgba(6, 20, 48, .3) 100%),
		linear-gradient(90deg,
			rgba(17, 51, 109, 1) 0%,
			rgba(17, 51, 109, .97) 34%,
			rgba(17, 51, 109, .58) 52%,
			rgba(17, 51, 109, .1) 74%,
			rgba(17, 51, 109, 0) 100%);
}
.banner-dark__inner { position: relative; z-index: 3; padding: 48px 40px; max-width: 580px; width: 100%; }
.banner-pill {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--radius-pill); padding: 6px 16px; font-size: 13px; font-weight: 400;
	color: #fff; margin-bottom: 24px;
}
.banner-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; }
.banner-dark h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 600; line-height: 1.2;
	color: #fff; margin-bottom: 20px; letter-spacing: -.02em; }
.banner-dark__lead { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .85); max-width: 480px; margin-bottom: 36px; }

.banner-stats { display: flex; flex-wrap: wrap; gap: 20px; border-top: 1px solid rgba(255, 255, 255, .2);
	padding-top: 24px; margin-bottom: 28px; }
.banner-stats__item { flex: 1; min-width: 110px; }
.banner-stats__num { font-size: 30px; font-weight: 700; line-height: 1; color: #fff; margin-bottom: 6px; }
.banner-stats__label { font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, .75); }
.banner-stats__divider { width: 1px; background: rgba(255, 255, 255, .2); align-self: stretch; }
.banner-location { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: #fff; }

/* ==========================================================================
   8. Преимущества
   ========================================================================== */

.advantages-title { font-size: 26px; font-weight: 700; margin: 36px 0 24px; letter-spacing: -.01em; }
.advantages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.advantage {
	background: #fff; border-radius: var(--radius-main); padding: 28px 24px;
	border: 1px solid #dde7ef; display: flex; flex-direction: column;
	align-items: flex-start; box-shadow: var(--shadow-sm);
	opacity: 0; transform: translateY(16px);
	transition: opacity .5s ease, transform .5s ease, box-shadow .2s ease, border-color .2s ease;
}
.advantages.is-visible .advantage { opacity: 1; transform: none; }
.advantages.is-visible .advantage:nth-child(2) { transition-delay: .08s; }
.advantages.is-visible .advantage:nth-child(3) { transition-delay: .16s; }
.advantages.is-visible .advantage:nth-child(4) { transition-delay: .24s; }
.advantage:hover {
	border-color: var(--brand-steel); box-shadow: 0 10px 26px rgba(15, 23, 42, .10);
	transform: translateY(-3px);
}
.advantage__icon {
	width: 52px; height: 52px; border-radius: 50%; background-color: var(--bg-light-blue);
	display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--primary);
	transition: background-color .2s ease, transform .2s ease;
}
.advantage:hover .advantage__icon { background-color: var(--primary); color: #fff; transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
	.advantage { opacity: 1; transform: none; }
}
.advantage h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.advantage p { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }

/* ==========================================================================
   9. О компании и цифры
   ========================================================================== */

.overview {
	/* Оттенки глубже макета: исходные почти сливались с полотном страницы. */
	background: linear-gradient(135deg, #dceefc 0%, #c9e5f9 60%, #dceefc 100%);
	border: 1px solid #b6dcf5;
	border-radius: var(--radius-lg); padding: 48px; display: flex; flex-wrap: wrap;
	gap: 32px; align-items: center; justify-content: space-between;
	position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
}
.overview__content { flex: 1 1 500px; display: flex; flex-direction: column; gap: 20px; z-index: 2; }
.overview__badge {
	display: inline-flex; align-items: center; align-self: flex-start;
	background: rgba(255, 255, 255, .75); border: 1px solid rgba(255, 255, 255, .9);
	border-radius: var(--radius-pill); padding: 8px 18px; font-size: 14px; font-weight: 500; color: var(--accent-blue);
}
.overview__title { font-size: 36px; font-weight: 600; line-height: 1.2; color: var(--ink); letter-spacing: -.02em; }
.overview__text { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.overview__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.overview__media {
	flex: 1 1 400px; height: 380px; min-width: 300px; border-radius: var(--radius-main);
	overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.overview__media img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }

/* Режим со сплошной врезкой: кадр показываем целиком (по высоте) и прижимаем
   вправо. Плашку красим в цвет левого поля снимка — тогда граница картинки
   не читается и блок выглядит цельным. */
.overview--bg { min-height: 520px; background: #d2e5fa; }
.overview__banner { position: absolute; inset: 0; z-index: 0; display: flex; justify-content: flex-end; }
.overview__banner img {
	height: 100%; width: auto; max-width: none; max-height: none;
	object-fit: contain; object-position: right center; display: block;
}
/* Засветка слева — текст читается независимо от того, что на снимке.
   Полоса чистого поля на снимке ýже колонки макета, поэтому колонку
   поджимаем, а переход растягиваем до середины блока. */
.overview--bg::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg,
		rgba(210, 229, 250, .95) 0%,
		rgba(210, 229, 250, .9) 40%,
		rgba(210, 229, 250, .5) 54%,
		rgba(210, 229, 250, 0) 70%);
}
.overview--bg .overview__content { flex: 0 1 520px; max-width: 520px; }

.numbers-title { font-size: 20px; font-weight: 700; margin: 36px 0 16px; }
.numbers {
	display: flex; flex-wrap: wrap; padding: 32px 16px; background: #fff;
	border-radius: var(--radius-main); border: 1px solid #dde7ef; box-shadow: var(--shadow-sm);
}
.numbers__item {
	flex: 1 1 200px; padding: 0 24px; border-right: 1px solid var(--line);
	display: flex; flex-direction: column; gap: 8px;
	opacity: 0; transform: translateY(14px);
	transition: opacity .5s ease, transform .5s ease;
}
.numbers.is-visible .numbers__item { opacity: 1; transform: none; }
.numbers.is-visible .numbers__item:nth-child(2) { transition-delay: .1s; }
.numbers.is-visible .numbers__item:nth-child(3) { transition-delay: .2s; }
.numbers.is-visible .numbers__item:nth-child(4) { transition-delay: .3s; }
.numbers__item:last-child { border-right: 0; }
.numbers__num { font-size: 38px; font-weight: 800; color: var(--primary); line-height: 1;
	font-variant-numeric: tabular-nums; }
.numbers__num span { font-size: 24px; font-weight: 700; }
.numbers__label { font-size: 14px; color: var(--text-secondary); line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
	.numbers__item { opacity: 1; transform: none; }
}

/* ==========================================================================
   10. Новости
   ========================================================================== */

.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; }
/* Белая карточка на почти белом фоне не читалась — нужна заметная обводка. */
.news-card { background: #fff; border-radius: var(--radius-main); border: 1px solid #dde7ef;
	overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
	transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.news-card:hover { box-shadow: 0 10px 26px rgba(15, 23, 42, .10); border-color: var(--brand-steel); transform: translateY(-2px); }
.news-card__media { aspect-ratio: 16 / 10; background: var(--bg-soft); overflow: hidden; display: block; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* В выдаче поиска рядом с новостями идут товары на белом фоне —
   их вписываем целиком и растворяем подложку. */
.search .news-card__media { background: linear-gradient(160deg, #f7fafd 0%, #eef4f9 100%); }
.search .news-card__media img { object-fit: contain; padding: 14px; mix-blend-mode: multiply; }
.news-card__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.news-card__date { font-size: 13px; color: var(--text-muted); }
.news-card__title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.news-card__title a { color: var(--text-primary); }
.news-card__title a:hover { color: var(--primary); }
.news-card__text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* ==========================================================================
   11. Внутренние страницы
   ========================================================================== */

.breadcrumbs { font-size: 13px; color: var(--text-secondary); padding: 16px 0 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumbs li { display: flex; align-items: center; gap: 8px; }
.breadcrumbs li + li::before { content: "/"; color: var(--text-muted); }
.breadcrumbs a { color: var(--text-secondary); }

.page-hero { background: #fff; border-radius: var(--radius-main); padding: 36px 40px; margin-top: 16px; box-shadow: var(--shadow-sm); }
.page-hero h1 { font-size: 32px; font-weight: 800; margin-bottom: 10px; letter-spacing: -.01em; }
/* Ограничение по длине строки оставляем ради читаемости,
   но не такое тесное — короткие подзаголовки должны влезать в строку. */
.page-hero__lead { color: var(--text-secondary); font-size: 15px; max-width: 1000px; }

.entry-content { font-size: 15px; line-height: 1.7; color: var(--text-primary); }
.entry-content > * + * { margin-top: 1em; }
.entry-content h2 { font-size: 24px; margin-top: 1.6em; }
.entry-content h3 { font-size: 19px; margin-top: 1.3em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li + li { margin-top: .4em; }
.entry-content img { border-radius: var(--radius-main); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.entry-content th { background: var(--bg-soft); font-weight: 600; }
.entry-content a { color: var(--accent-blue); text-decoration: underline; }

.content-card { background: #fff; border-radius: var(--radius-main); padding: 36px 40px; box-shadow: var(--shadow-xs); }

.entry-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.entry-meta { display: flex; gap: 16px; color: var(--text-muted); font-size: 13px; margin-bottom: 14px; }

.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.shop-sidebar {
	background: #fff; border: 1px solid #dde7ef; border-radius: var(--radius-main);
	padding: 8px 20px 12px; box-shadow: var(--shadow-sm);
}
.shop-sidebar h2 {
	font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--primary);
	margin: 0 -20px 8px; padding: 16px 20px 14px; border-bottom: 2px solid var(--bg-light-blue);
}
.shop-sidebar ul { list-style: none; }

/* Навигация по каталогу с иконками разделов */
.cat-nav > ul > li { border-bottom: 1px solid var(--line); }
.cat-nav > ul > li:last-child { border-bottom: 0; }

.cat-nav__link {
	display: flex; align-items: center; gap: 12px; padding: 11px 10px 11px 8px;
	margin: 2px -8px; border-radius: var(--radius-sm);
	/* Насыщенный цвет вместо жирного начертания: так текст чёткий,
	   но список не выглядит перегруженным. */
	font-size: 14px; line-height: 1.35; color: var(--ink); font-weight: 400;
	transition: color .16s ease, background-color .16s ease;
}
.cat-nav__link:hover { color: var(--primary); background: var(--bg-soft); }
/* Текущий раздел выделен заливкой и полосой слева, а не только цветом. */
.cat-nav__link.is-current {
	color: var(--primary); font-weight: 500;
	background: var(--bg-light-blue); box-shadow: inset 3px 0 0 var(--primary);
}

.cat-nav__icon {
	width: 36px; height: 36px; flex: none; border-radius: var(--radius-sm);
	background: #e3eff8; border: 1px solid #cfe3f2; color: var(--primary);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	transition: background-color .16s ease, border-color .16s ease;
}
.cat-nav__icon img { width: 24px; height: 24px; object-fit: contain; mix-blend-mode: multiply; }
.cat-nav__link:hover .cat-nav__icon { background: #d3e8f7; }
.cat-nav__link.is-current .cat-nav__icon { background: #fff; border-color: var(--primary); }

.cat-nav__label { flex: 1; min-width: 0; }
.cat-nav__count {
	flex: none; font-size: 11px; font-weight: 700; color: var(--primary);
	background: #e3eff8; border: 1px solid #cfe3f2; border-radius: var(--radius-pill); padding: 2px 8px;
}

/* Подразделы раскрываются только у текущей ветки — иначе список
   получается на два экрана. */
.cat-nav__sub { display: none; padding: 0 0 10px 46px; }
.cat-nav__item.is-open .cat-nav__sub { display: block; }
.cat-nav__sub li + li { margin-top: 2px; }
.cat-nav__sub a {
	display: flex; align-items: center; gap: 8px; padding: 6px 0;
	font-size: 13px; font-weight: 500; color: #475569;
}
.cat-nav__sub a:hover { color: var(--primary); }
.cat-nav__sub a.is-current { color: var(--primary); font-weight: 600; }

/* Карточка товара: WooCommerce раскладывает её обтеканием, а мы это обтекание
   снимаем ради сетки плиток. Поэтому колонки задаём сами. */
/* Верх карточки — один блок: галерея и сводка сидели в двух отдельных
   плашках с зазором, из-за чего верх страницы разваливался надвое.
   Колонки не равные: галерее хватает меньшего, а сводке нужна ширина,
   иначе заголовок рвётся в столбик по одному слову. */
.product-card {
	background: #fff; border: 1px solid #dde7ef; margin-bottom: 28px;
	border-radius: var(--radius-main); box-shadow: var(--shadow-sm); overflow: hidden;
}
.product-hero {
	display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
	align-items: stretch; border-bottom: 1px solid var(--line-soft);
}
.single-product div.product .summary { float: none !important; width: auto !important; margin: 0 !important; }

.product-single { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }

/* Блок «Похожие товары»: четыре плитки в ряд, чтобы последняя
   не оставалась одна на отдельной строке. */
.single-product .related > h2 { font-size: 22px; font-weight: 600; margin-bottom: 18px; }
.single-product .related ul.products,
.single-product .up-sells ul.products { grid-template-columns: repeat(auto-fit, minmax(min(182px, 100%), 1fr)); gap: 20px; }
/* Список похожих от YARPP внутри описания дублирует блок плиток ниже. */
.woocommerce-tabs .panel .yarpp-related { display: none; }

/* Галерея без слайдера: главное фото плюс ряд миниатюр.
   Внутри общей карточки собственная рамка и тень не нужны. */
.woocommerce-product-gallery {
	background: none; border: 0; border-right: 1px solid var(--line-soft);
	border-radius: 0; padding: 26px; box-shadow: none;
	width: auto !important; float: none !important; opacity: 1 !important;
}
.product-hero .summary { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 30px 32px; }

/* Собранная скриптом галерея. */
.shv-gallery { display: flex; flex-direction: column; gap: 14px; }
.shv-gallery__stage {
	display: block; width: 100%; padding: 0; border: 0; background: none;
	cursor: zoom-in; border-radius: var(--radius-sm);
}
.shv-gallery__stage img {
	width: 100%; height: 340px; object-fit: contain;
	mix-blend-mode: multiply; display: block;
}
.shv-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.shv-gallery__thumb {
	width: 74px; height: 74px; padding: 5px; cursor: pointer;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.shv-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }
.shv-gallery__thumb:hover { border-color: var(--brand-steel); }
.shv-gallery__thumb.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

/* Просмотр во весь экран. */
body.has-lightbox { overflow: hidden; }
.shv-lightbox {
	position: fixed; inset: 0; z-index: 9000; display: flex;
	align-items: center; justify-content: center; padding: 48px;
	background: rgba(12, 23, 54, .88); backdrop-filter: blur(2px);
}
.shv-lightbox[hidden] { display: none; }
.shv-lightbox__img {
	max-width: 100%; max-height: 100%; width: auto; height: auto;
	background: #fff; border-radius: var(--radius-main); padding: 20px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.shv-lightbox__close,
.shv-lightbox__nav {
	position: absolute; display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%; cursor: pointer; line-height: 1;
	transition: background-color .18s ease, border-color .18s ease;
}
.shv-lightbox__close:hover,
.shv-lightbox__nav:hover { background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .55); }
.shv-lightbox__close { top: 20px; right: 24px; width: 44px; height: 44px; font-size: 28px; }
.shv-lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 32px; }
.shv-lightbox__nav--prev { left: 24px; }
.shv-lightbox__nav--next { right: 24px; }
.shv-lightbox__counter {
	position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
	color: rgba(255, 255, 255, .85); font-size: 14px; font-weight: 500;
}
.woocommerce-product-gallery__wrapper { display: block; margin: 0; }
.woocommerce-product-gallery__image { display: block; }
.woocommerce-product-gallery__image img {
	width: 100%; height: auto; max-height: 380px; object-fit: contain;
	border-radius: var(--radius-sm); mix-blend-mode: multiply;
}
/* Первый снимок крупный, остальные — миниатюрами под ним. */
.woocommerce-product-gallery__image:first-child { margin-bottom: 14px; }
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) {
	display: inline-block; width: 88px; margin: 0 8px 8px 0; vertical-align: top;
	border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; background: #fff;
}
.woocommerce-product-gallery__trigger { display: none; }
/* Карточку подтягиваем к хлебным крошкам — как раздел каталога,
   где сразу под ними начинается белая плашка. */
.single-product .section { padding-top: 16px; }

.summary {
	position: relative; background: #fff; border: 1px solid #dde7ef;
	border-radius: var(--radius-main); padding: 28px 30px; box-shadow: var(--shadow-sm);
}
/* Заголовок обтекает логотип: отдельный контекст (overflow) загонял его
   в узкую колонку и рвал по одному слову на строку. */
.summary h1 { font-size: 24px; font-weight: 600; line-height: 1.25; margin-bottom: 16px; }

/* Логотип производителя справа сверху — обтеканием, а не абсолютом:
   так заголовок сам обходит его и не наезжает. */
.product-brand-logo {
	float: right; margin: 0 0 12px 16px; padding: 8px 10px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.summary::after { content: ""; display: block; clear: both; }
.product-brand-logo img { max-width: 78px; max-height: 40px; width: auto; height: auto; }

/* Цена, свойства, кнопка и категория — одна вертикальная последовательность
   с общим ритмом, а не разрозненные куски вывода WooCommerce. */
/* «Цена по запросу» — не ценник, а пометка, поэтому спокойный фирменный синий
   и обычное начертание. Вложенность здесь такая же, как у WooCommerce
   (`.woocommerce div.product p.price`): его правило специфичнее нашего,
   и без этого побеждал бы болотно-оливковый цвет из woocommerce.css. */
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary p.price strong,
.woocommerce div.product .summary p.price bdi {
	font-size: 17px; font-weight: 500; color: var(--primary);
}
.summary p.price { margin-bottom: 18px; }
.summary table.product-attrs { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.summary table.product-attrs th,
.summary table.product-attrs td {
	border: 0; border-bottom: 1px solid var(--line-soft); padding: 9px 0;
	font-size: 14px; text-align: left; vertical-align: top;
}
.summary table.product-attrs th { width: 44%; font-weight: 500; color: var(--text-secondary); padding-right: 16px; }
.summary table.product-attrs td { color: var(--text-primary); }
.summary table.product-attrs tr:last-child th,
.summary table.product-attrs tr:last-child td { border-bottom: 0; }
.summary .product_meta {
	margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft);
	font-size: 13px; color: var(--text-secondary);
}
.summary .product_meta a { color: var(--primary); font-weight: 500; }

.price-request { display: flex; align-items: baseline; gap: 10px; margin: 18px 0;
	font-size: 20px; font-weight: 800; color: var(--primary); }
.price-request small { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.product-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.product-badge { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-pill);
	background: var(--bg-light-blue); color: var(--primary); }
/* Вкладки — строка ссылок с подчёркиванием активной. Заливка целыми
   ячейками выглядела набором серых плашек и спорила с карточкой. */
.woocommerce-tabs { background: none; border: 0; border-radius: 0; box-shadow: none; }
/* Вкладки-«папки»: активная выступает белой карточкой и стыкуется
   с панелью, неактивные лежат на общей подложке. */
.woocommerce-tabs ul.tabs {
	list-style: none; display: flex; margin: 0; padding: 10px 22px 0; border: 0;
	flex-wrap: wrap; gap: 6px; background: #f2f7fc;
	border-bottom: 1px solid var(--line-soft);
}
/* Селектор с `div.product` — иначе побеждает стандартный CSS WooCommerce,
   который красит вкладки серым и дорисовывает уголки псевдоэлементами. */
.single-product div.product .woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li {
	margin: 0; padding: 0; border: 0; background: none;
	border-radius: 0; box-shadow: none;
}
.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs::before { display: none; content: none; }
.single-product div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.tabs li a {
	display: block; padding: 13px 22px; background: none;
	color: var(--text-secondary); font-size: 15px; font-weight: 400;
	text-transform: none; letter-spacing: 0;
	border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px;
	border-radius: 10px 10px 0 0;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.woocommerce-tabs ul.tabs li a:hover { color: var(--primary); background: rgba(255, 255, 255, .6); }
.single-product div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.active a {
	color: var(--primary); font-weight: 500; background: #fff;
	border-color: var(--line-soft); box-shadow: inset 0 3px 0 var(--accent-orange);
}

/* Панель: селектор с `div.product` — стандартный CSS WooCommerce задаёт
   ей `padding: 0`, и текст прилипает к краям карточки. */
.single-product div.product .woocommerce-tabs .panel,
.woocommerce-tabs .panel { padding: 30px 34px 34px; margin: 0; max-width: 900px; }
/* Название вкладки уже есть сверху — дублировать его заголовком незачем. */
.woocommerce-Tabs-panel--description > h2:first-child { display: none; }

/* --- Отзывы в карточке товара ------------------------------------------ */

#reviews { display: flex; flex-direction: column; gap: 22px; }
#reviews .woocommerce-Reviews-title { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.woocommerce-noreviews {
	margin: 0; padding: 14px 18px; border-radius: var(--radius-sm);
	background: var(--bg-soft); color: var(--text-secondary); font-size: 15px;
}

/* Форма отзыва — отдельной плашкой, как формы на остальных страницах. */
#review_form_wrapper {
	background: var(--bg-soft); border: 1px solid var(--line);
	border-radius: var(--radius-main); padding: 26px 28px;
}
#review_form_wrapper .comment-reply-title {
	display: block; font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px;
}
#review_form_wrapper .comment-reply-title small { font-weight: 400; font-size: 14px; margin-left: 10px; }
#review_form_wrapper .comment-notes { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; }
#review_form_wrapper .required { color: var(--accent-orange-dark); }

/* Имя и email — в одну строку, как в форме обратной связи. */
.comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.comment-form > p,
.comment-form > .comment-form-rating { grid-column: 1 / -1; margin: 0; }
.comment-form .comment-form-author,
.comment-form .comment-form-email { grid-column: auto; }

/* Звёзды покрупнее и фирменным оранжевым — по ним кликают. */
.comment-form-rating label { margin-bottom: 8px; }
.comment-form-rating .stars { margin: 0; }
.comment-form-rating .stars a { color: var(--accent-orange); }

/* Согласие на сохранение данных: флажок рядом с подписью, а не над ней. */
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; }
.comment-form-cookies-consent input { width: auto; margin: 3px 0 0; flex: none; }
.comment-form-cookies-consent label {
	margin: 0; font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}

/* Кнопка отправки: у WooCommerce она серая через `#respond input#submit`,
   и селектор с идентификатором перебивает общее правило для форм. */
.woocommerce #respond input#submit {
	width: auto; background-color: var(--accent-orange); color: #fff; border: 0;
	border-radius: var(--radius-pill); padding: 13px 32px; font-weight: 600; cursor: pointer;
	transition: background-color .2s ease;
}
.woocommerce #respond input#submit:hover { background-color: var(--accent-orange-dark); color: #fff; }

/* Сами отзывы — когда появятся. */
#reviews .commentlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
#reviews .commentlist .comment_container {
	display: flex; gap: 16px; background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius-main); padding: 20px 22px;
}
#reviews .commentlist .avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; }
#reviews .commentlist .comment-text { flex: 1; min-width: 0; }
#reviews .commentlist .star-rating { color: var(--accent-orange); margin-bottom: 8px; }
#reviews .commentlist .meta { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
#reviews .commentlist .meta strong { color: var(--text-primary); font-size: 15px; }
#reviews .commentlist .description { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

@media (max-width: 600px) {
	.comment-form { grid-template-columns: 1fr; }
	#review_form_wrapper { padding: 20px 18px; }
}
.woocommerce-tabs .panel p { color: #202945; margin-bottom: 14px; }
.woocommerce-tabs .panel h2 { font-size: 19px; font-weight: 500; margin: 24px 0 12px; }
.woocommerce-tabs .panel h3 { font-size: 16px; font-weight: 500; margin: 22px 0 10px; }
.woocommerce-tabs .panel h4, .woocommerce-tabs .panel strong { font-weight: 500; }
.woocommerce-tabs .panel ul, .woocommerce-tabs .panel ol { margin: 0 0 16px 20px; }
.woocommerce-tabs .panel li { margin-bottom: 7px; line-height: 1.55; }
.woocommerce-tabs .panel table { width: 100%; border-collapse: collapse; }
.woocommerce-tabs .panel table td, .woocommerce-tabs .panel table th {
	border: 0; border-bottom: 1px solid var(--line-soft); background: none;
	padding: 11px 0; text-align: left; font-size: 14px;
}
.woocommerce-tabs .panel table th { width: 38%; font-weight: 500; color: var(--text-secondary); padding-right: 20px; }
/* Подписанные снимки в описании товара — например, датчики у сканера.
   В содержимом они помечены `alignleft` и рассчитывали на обтекание,
   но тема floats не использует: блоки вставали узкой колонкой по 150 px,
   подписи ломались на три строки, а справа зияло пустое поле. Ставим их
   в ряд через `inline-block` — соседние снимки идут рядом и переносятся
   сами, а заголовки и абзацы после них начинаются с новой строки,
   без возни с очисткой обтекания. */
.woocommerce-tabs .panel .wp-caption {
	display: inline-block; vertical-align: top; float: none;
	width: auto !important; max-width: 168px; margin: 4px 12px 18px 0;
}
.woocommerce-tabs .panel .wp-caption img {
	display: block; width: 150px; height: auto;
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	background: #fff;
}
.woocommerce-tabs .panel .wp-caption-text {
	margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-secondary);
}

/* Таблица характеристик в описании: строки-заголовки разделов идут во всю
   ширину, поэтому колоночная ширина `th` им не подходит. */
.woocommerce-tabs .panel table th.spec-table__group {
	width: auto; padding-top: 26px; padding-bottom: 10px;
	font-size: 15px; font-weight: 600; color: var(--text-primary);
	border-bottom-color: var(--line);
}
.woocommerce-tabs .panel table tr:first-child th.spec-table__group { padding-top: 4px; }
.woocommerce-tabs .panel table.spec-table td { color: var(--text-primary); }

/* Блок «Похожие товары» от YARPP — отделяем от текста описания. */
.woocommerce-tabs .panel .yarpp-related {
	margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.woocommerce-tabs .panel .yarpp-related h3 { margin-top: 0; }
.woocommerce-tabs .panel .yarpp-related ol { margin-left: 0; list-style: none; }
.woocommerce-tabs .panel .yarpp-related li { margin-bottom: 8px; }
.woocommerce-tabs .panel .yarpp-related a { color: var(--primary); font-weight: 500; }

.shop-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
	font-size: 14px; color: var(--text-secondary); }
.pagination { display: flex; gap: 8px; flex-wrap: wrap; margin: 32px 0; justify-content: center; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--radius-sm);
	background: #fff; color: var(--text-primary); font-weight: 600; font-size: 14px; border: 1px solid var(--line); }
.pagination .page-numbers.current { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Формы */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], textarea, select {
	width: 100%; padding: 11px 15px; font: inherit; font-size: 14px;
	border: 1px solid var(--line-input); border-radius: var(--radius-sm); background: #fff; color: var(--text-primary);
}
textarea { min-height: 130px; resize: vertical; }
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
/* Плагин «Запросить КП» вешает на ЛЮБУЮ форму CF7 сайта ограничение
   `max-height: 65vh` с прокруткой и боковые отступы 40px. Ему это нужно
   только во всплывающем окне: на обычной странице форма получает свою
   полосу прокрутки, а поля съезжают относительно заголовка. Снимаем и
   возвращаем поведение самому окну. */
body .wpcf7 form { max-height: none; overflow: visible; padding: 0; }
body .wqoecf-pop-up-box .wpcf7 form {
	max-height: 65vh; overflow-y: auto; overflow-x: hidden; padding: 0 40px;
}

.wpcf7-form p { margin-bottom: 16px; }
.wpcf7-form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.wpcf7-form .row p { margin-bottom: 0; }
.wpcf7-submit, input[type="submit"] {
	width: auto; background-color: var(--accent-orange); color: #fff; border: 0;
	border-radius: var(--radius-pill); padding: 13px 32px; font: inherit; font-weight: 600; cursor: pointer;
}
.wpcf7-submit:hover { background-color: var(--accent-orange-dark); }

/* --- Всплывающая форма «Запросить КП» ---------------------------------- */

/* Окно рисует плагин запроса цены: белый прямоугольник со скруглением 8 px
   и жёсткой чёрной тенью, без затемнения позади. Приводим к виду остальных
   карточек сайта. Разметку не трогаем — она плагина, и при обновлении
   правки бы затёрлись. */
.wqoecf-pop-up-box {
	max-width: 460px; padding: 26px 24px 24px;
	border-radius: var(--radius-lg); background: var(--bg-card);
	max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
	/* Второй тенью с огромным разбросом делаем затемнение позади окна:
	   своей подложки у плагина нет, а лишний элемент в чужую разметку
	   добавлять не хочется. */
	box-shadow: 0 24px 60px rgba(15, 23, 42, .28), 0 0 0 100vmax rgba(15, 23, 42, .55);
}

.wqoecf-pop-up-box .wqoecf_form_title {
	padding: 0; margin: 0 40px 4px 0;
	font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--ink);
}
/* Подпись под заголовком: объясняет, что будет дальше. */
.wqoecf-pop-up-box .wqoecf_form_title::after {
	content: "Ответим в рабочее время и подготовим предложение.";
	display: block; margin-top: 8px;
	font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--text-secondary);
}

/* Крестик — круглая кнопка с внятной областью нажатия вместо голых 25 px. */
.wqoecf-pop-up-box .wqoecf_close {
	top: 16px; right: 16px; left: auto;
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--bg-soft); transition: background-color .18s ease;
}
.wqoecf-pop-up-box .wqoecf_close:hover { background: #e2e8f0; }

/* Плагин раздаёт свои отступы обёртке, форме и каждому абзацу — вместе они
   съедали 126 px ширины из 302, и поля выходили вдвое уже окна. */
body .wqoecf-pop-up-box div.wpcf7 { margin: 18px 0 0; padding: 0; }
body .wqoecf-pop-up-box div.wpcf7 > form { padding: 0; margin: 0; }
body .wqoecf-pop-up-box div.wpcf7 > form > p { padding: 0; margin: 0 0 14px; }
.wqoecf-pop-up-box .wpcf7-form label {
	font-size: 13px; font-weight: 500; color: var(--text-secondary);
}
/* Дальше повторяем форму селекторов плагина (`div.wpcf7 > form > p …`):
   его собственный стиль специфичнее обычных классов и иначе побеждает.
   Он делает поля подчёркиваниями без рамки, а кнопку — узкой табличкой. */

/* Поля выше обычного: окно открывают с телефона, и 44 px — размер
   уверенного касания. */
body .wqoecf-pop-up-box div.wpcf7 > form > p input[type="text"],
body .wqoecf-pop-up-box div.wpcf7 > form > p input[type="email"],
body .wqoecf-pop-up-box div.wpcf7 > form > p input[type="tel"],
body .wqoecf-pop-up-box div.wpcf7 > form > p textarea {
	width: 100%; min-height: 44px; margin-top: 6px; padding: 11px 14px;
	font: inherit; font-size: 15px; color: var(--text-primary); background: #fff;
	border: 1px solid var(--line-input); border-radius: var(--radius-sm);
	transition: border-color .18s ease, box-shadow .18s ease;
}
body .wqoecf-pop-up-box div.wpcf7 > form > p textarea { min-height: 96px; resize: vertical; }
/* Обёртка поля у Contact Form 7 строчная — поле в ней не растягивается
   на всю ширину, сколько ему ни задавай. */
body .wqoecf-pop-up-box div.wpcf7 > form > p .wpcf7-form-control-wrap,
body .wqoecf-pop-up-box div.wpcf7 > form > p label { display: block; }
body .wqoecf-pop-up-box div.wpcf7 > form > p input:focus,
body .wqoecf-pop-up-box div.wpcf7 > form > p textarea:focus {
	outline: 0; border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(42, 105, 142, .14);
}

/* Отправка — главное действие окна, на всю ширину. */
body .wqoecf-pop-up-box div.wpcf7 > form > p input[type="submit"] {
	display: block; width: 100%; margin: 4px 0 0; padding: 14px 28px;
	font: inherit; font-size: 15px; font-weight: 600;
	/* Свой цвет плагин ставит с `!important`, поэтому фирменный оранжевый
	   приходится закреплять так же — иначе кнопка остаётся голубой. */
	background-color: var(--accent-orange) !important; color: #fff; border: 0;
	border-radius: var(--radius-pill); cursor: pointer;
	box-shadow: 0 6px 16px rgba(247, 143, 32, .25);
	transition: background-color .18s ease;
}
body .wqoecf-pop-up-box div.wpcf7 > form > p input[type="submit"]:hover {
	background-color: var(--accent-orange-dark) !important;
}
.wqoecf-pop-up-box .wpcf7-spinner { display: block; margin: 10px auto 0; }

/* Подсказки проверки: у Contact Form 7 они жёлто-красные и выбиваются. */
.wqoecf-pop-up-box .wpcf7-not-valid-tip {
	margin-top: 6px; font-size: 12px; color: #b32d2e;
}
.wqoecf-pop-up-box .wpcf7-form input.wpcf7-not-valid,
.wqoecf-pop-up-box .wpcf7-form textarea.wpcf7-not-valid { border-color: #e2a0a0; }
.wqoecf-pop-up-box .wpcf7-response-output {
	margin: 14px 0 0; padding: 12px 14px; border: 0; border-radius: var(--radius-sm);
	background: var(--bg-soft); font-size: 14px; line-height: 1.5;
}
.wqoecf-pop-up-box .recaptcha-note { margin-top: 12px; }

@media (max-width: 480px) {
	.wqoecf-pop-up-box { padding: 22px 18px 20px; border-radius: var(--radius-main); }
	.wqoecf-pop-up-box .wqoecf_form_title { font-size: 19px; }
}

/* Значок reCAPTCHA убран: он висел в углу на каждой странице сайта.
   Взамен под формой печатается требуемая Google оговорка (см.
   `shv_recaptcha_notice` в functions.php). Скрываем через `visibility`,
   а не `display`: скрипту нужен размер элемента, иначе проверка ломается. */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-note {
	margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted);
}
.recaptcha-note a { color: var(--text-secondary); text-decoration: underline; }
.recaptcha-note a:hover { color: var(--primary); }

.contact-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px; align-items: start; }
.contact-list { list-style: none; background: #fff; border-radius: var(--radius-main); padding: 8px 24px; box-shadow: var(--shadow-xs); }
.contact-list li { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list .label { font-size: 13px; color: var(--text-secondary); }
.contact-list .value { font-weight: 600; font-size: 15px; color: var(--text-primary); }
.contact-icon { width: 42px; height: 42px; flex: none; border-radius: var(--radius-sm);
	background: var(--bg-light-blue); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.form-card { background: #fff; border-radius: var(--radius-main); padding: 32px; box-shadow: var(--shadow-xs); }
.form-card h2 { font-size: 20px; margin-bottom: 18px; }

/* Содержимое из конструктора: отбивка от шапки страницы такая же,
   как у обычных разделов — там это верхний отступ `.section`. */
.entry-builder { margin-top: 40px; }

/* Карта в блоке из конструктора тянется на всю высоту соседа: у виджета
   «HTML» своей высоты нет, и без этого карта обрывается выше формы. */
.is-map { overflow: hidden; }
.is-map,
.is-map > .elementor-widget-wrap,
.is-map .elementor-widget-html,
.is-map .elementor-widget-container { height: 100%; }
.is-map iframe { height: 100% !important; min-height: 100% !important; }

/* Утилита для страниц, собранных в конструкторе: акцентная полоса сверху.
   В Elementor цвет рамки задаётся сразу всем сторонам, отдельной верхней нет. */
.is-accent-top { border-top: 3px solid var(--primary) !important; }

/* --- Документы и лицензии по макету заказчика -------------------------- */

.docs { display: flex; flex-direction: column; gap: 24px; }
.docs__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }

.doc-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-main);
	padding: 26px 28px; box-shadow: var(--shadow-xs);
}
.doc-card--accent { border-top: 3px solid var(--primary); }
.doc-card h2 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.doc-card__note { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 18px; }

.doc-scans { display: flex; flex-wrap: wrap; gap: 16px; }
.doc-scans a {
	display: block; border: 1px solid var(--line); border-radius: var(--radius-sm);
	padding: 8px; background: var(--bg-soft); transition: border-color .18s ease, box-shadow .18s ease;
}
.doc-scans a:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.doc-scans img { display: block; width: 150px; height: 212px; object-fit: contain; }

.docs__list {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-main);
	padding: 26px 28px 28px; box-shadow: var(--shadow-xs);
}
.docs__list h2 { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.docs__count { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 10px; }

/* Строка файла: имя слева, формат и вес — справа, вся строка кликабельна. */
.doc-file {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
	padding: 13px 16px; color: var(--text-primary);
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.doc-file:hover { background: #eaf3fc; border-color: #cfe4f6; color: var(--primary); }
/* Имена файлов бывают одним длинным словом («Лицензия_МЕД_ШУ») —
   без переноса такое слово выдавливает метку с весом за край. */
.doc-file__name { font-size: 14px; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.doc-file__meta {
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
	font-size: 12px; font-weight: 500; color: var(--primary); flex: none;
}
.doc-file--wide { background: #fff; padding: 16px 18px; }
.doc-file--wide .doc-file__name { font-size: 16px; font-weight: 500; color: var(--primary); }
/* Одиночный файл — лицензия: та же плашка, но во всю ширину карточки. */
.doc-grid--single { grid-template-columns: 1fr; }
.doc-grid--single .doc-file { background: #fff; padding: 16px 18px; }
.doc-grid--single .doc-file__name { font-size: 16px; font-weight: 500; color: var(--primary); }

/* В блоках конструктора абзацы идут вплотную — задаём им отбивку. */
.elementor-widget-text-editor p + p { margin-top: 12px; }

/* Заглавная иллюстрация страницы — обычное «изображение записи». */
.page-cover { margin: 24px 0 0; border-radius: var(--radius-main); overflow: hidden; box-shadow: var(--shadow-sm); }
.page-cover img { display: block; width: 100%; height: auto; }

/* --- Длинная статья с оглавлением («История бренда») -------------------- */

.toc {
	background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--primary);
	border-radius: var(--radius-main); padding: 20px 22px; box-shadow: var(--shadow-xs);
}
.toc__title {
	font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
	color: var(--text-muted); margin-bottom: 12px;
}
.toc__list { display: flex; flex-direction: column; max-height: 68vh; overflow-y: auto; }
.toc__list a {
	font-size: 14px; line-height: 1.4; color: #334155;
	padding: 9px 0; border-bottom: 1px solid var(--line-soft);
	transition: color .16s ease;
}
.toc__list a:last-child { border-bottom: 0; }
.toc__list a:hover, .toc__list a.is-current { color: var(--primary); }
/* Пустое оглавление (скрипт не отработал) не должно занимать место. */
.toc:not(.is-ready) { display: none; }

/* Длинный текст читают внимательно, поэтому он темнее обычного
   вспомогательного: серо-голубой на таком объёме выглядит блёклым. */
.entry-article { max-width: 820px; color: #334155; }
.entry-article h2, .entry-article h4 {
	font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em;
	margin: 38px 0 16px; color: var(--ink); scroll-margin-top: 24px;
}
.entry-article h3 { font-size: 20px; font-weight: 600; margin: 30px 0 12px; color: var(--primary); }
.entry-article p { font-size: 17px; line-height: 1.7; color: #334155; margin-bottom: 18px; }
/* Перед первым заголовком в содержимом попадаются пустые абзацы —
   из-за них сверху оставался лишний воздух. */
.entry-article p:empty, .entry-article br:first-child { display: none; }
.entry-article > *:first-child,
.entry-article > *:first-child > *:first-child { margin-top: 0; }
/* Прилипает сама колонка, а не блок внутри неё: растянутой на всю высоту
   строки колонке двигаться некуда, поэтому ей нужен именно `start`.
   Стили конструктора подключаются после темы — отсюда !important. */
.toc-col {
	position: sticky !important; top: 24px;
	align-self: start !important;
}

/* Перечисления из макета — плашкой с порядковыми номерами вместо маркеров. */
.entry-article ul, .entry-article ol {
	list-style: none; margin: 0 0 22px; padding: 24px 28px; counter-reset: shv-item;
	background: var(--bg-soft); border-radius: var(--radius-sm);
	display: flex; flex-direction: column; gap: 16px;
}
.entry-article li {
	display: flex; gap: 16px; margin: 0;
	font-size: 16px; line-height: 1.65; color: #334155;
}
.entry-article li::before {
	counter-increment: shv-item;
	content: counter( shv-item, decimal-leading-zero );
	flex: none; padding-top: 5px;
	font-size: 12px; font-weight: 600; color: var(--primary);
}
.entry-article img { height: auto; max-width: 100%; border-radius: var(--radius-sm); margin: 10px 0; }
.entry-article a { color: var(--primary); }

/* Цифры холдинга: три в ряд — шесть значений ложатся двумя ровными
   строками, при пяти колонках последняя оставалась одна. */
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.stat-grid__item {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px 24px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stat-grid__item:hover {
	transform: translateY(-3px); border-color: var(--brand-steel); box-shadow: var(--shadow-md);
}
.stat-grid__value {
	font-size: 32px; font-weight: 600; letter-spacing: -.02em; color: var(--primary);
	transition: color .2s ease;
}
.stat-grid__item:hover .stat-grid__value { color: var(--primary-dark); }
.stat-grid__label { font-size: 14px; line-height: 1.45; color: var(--text-secondary); margin-top: 6px; }

/* --- Блоки страниц услуг ----------------------------------------------- */

/* Плитки с иконкой: сколько в ряд — задаёт модификатор. */
.svc-cards { display: grid; gap: 12px; }
.svc-cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.svc-cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.svc-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px 24px;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.svc-card:hover { border-color: var(--brand-steel); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.svc-card__icon { display: block; width: 46px; height: 46px; margin-bottom: 14px; }
.svc-card__title { font-size: 17px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; color: var(--text-primary); }
.svc-card__text { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }

/* Перечень оборудования — компактной сеткой. */
.eq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.eq-grid__item {
	background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
	padding: 12px 15px; font-size: 15px; color: var(--text-secondary);
}

/* --- Блоки страницы «Проектирование медучреждений» --------------------- */

/* Принципы проектирования: пять плиток в ряд, у каждой — порядковый номер. */
.svc-cards--5 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.svc-card__num { font-size: 12px; font-weight: 600; color: var(--primary); margin-bottom: 10px; }

/* Перечень «название — пояснение». Строки разделены линией, как в макете:
   у соседней карточки этапов разбивка такая же, и колонки читаются парой. */
.def-list { display: flex; flex-direction: column; }
.def-list__item { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.def-list__item:first-child { border-top: 0; padding-top: 0; }
.def-list__title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.def-list__text { font-size: 15px; line-height: 1.55; color: var(--text-secondary); margin-top: 4px; }

/* --- Блоки страницы «Комплексное оснащение» ---------------------------- */

/* Надпись-рубрика над заголовком карточки — в макете она набрана моноширинным. */
.svc-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }

/* Врезка «Подробнее об услуге»: слева узкая колонка с подписью, справа текст.
   Подпись держит акцентную линию — в макете она отбивает раздел от плиток. */
.svc-detail { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 48px; align-items: start; }
.svc-detail__label {
	border-top: 3px solid var(--primary); padding-top: 14px;
	font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	color: var(--text-secondary);
}
.svc-detail__lead { font-size: 19px; line-height: 1.6; color: var(--text-primary); margin-bottom: 24px; }
.svc-detail__body { display: flex; flex-direction: column; gap: 20px; font-size: 16px; line-height: 1.7; color: var(--text-secondary); }
.svc-detail__body p { margin: 0; }

/* --- Блоки страницы «О компании» --------------------------------------- */

/* Направления работы: плитки с порядковым номером. */
.dir-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.dir-grid__item {
	display: flex; gap: 12px; align-items: flex-start;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px;
}
.dir-grid__num { font-size: 12px; font-weight: 600; color: var(--primary); padding-top: 3px; }
.dir-grid__text { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }

/* Нумерованный перечень внутри карточки. */
.num-list { display: flex; flex-direction: column; gap: 14px; }
.num-list__item { display: flex; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.num-list__num { font-size: 12px; font-weight: 600; color: var(--primary); padding-top: 4px; flex: none; }

/* Вариант с разделителями — в макете длинные перечни разбиты линиями. */
.num-list--sep { gap: 0; }
.num-list--sep .num-list__item { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.num-list--sep .num-list__item:first-child { border-top: 0; padding-top: 0; }

/* --- Контакты по макету заказчика ------------------------------------- */

.contacts { display: flex; flex-direction: column; gap: 24px; }
.contacts__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.contacts__departments { display: flex; flex-direction: column; gap: 24px; }

.contact-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-main);
	padding: 26px 28px; box-shadow: var(--shadow-xs);
}
/* Полоса сверху выделяет главную карточку — приём из макета. */
.contact-card--main { border-top: 3px solid var(--primary); }
.contact-card h2 { font-size: 22px; font-weight: 600; margin-bottom: 14px; }
.contact-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 16px; }
.contact-card__address { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 18px; }

.contact-facts { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; font-size: 15px; line-height: 1.55; }
.contact-facts dt { color: var(--text-muted); }
.contact-facts dd { margin: 0; color: var(--text-primary); }
.contact-facts a { color: var(--primary); }

.contact-person + .contact-person { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.contact-person__role { font-size: 13px; color: var(--text-muted); }
.contact-person__name { font-size: 15px; margin: 2px 0 6px; }
.contact-person__links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--text-secondary); }
.contact-person__links a { color: var(--primary); }

.contacts__ext-note { font-size: 14px; color: var(--text-secondary); margin: -8px 0 20px; }
/* Плитки, а не сплошная таблица: отделов семь, и в сетке из пяти колонок
   последний ряд оставлял пустые серые ячейки. */
.ext-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; }
.ext-grid__item {
	background: var(--bg-soft); border: 1px solid var(--line);
	border-radius: var(--radius-sm); padding: 14px 16px;
}
.ext-grid__name { font-size: 13px; color: var(--text-secondary); line-height: 1.35; }
.ext-grid__num { font-size: 17px; font-weight: 600; margin-top: 4px; }

.contacts__bottom {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	border-radius: var(--radius-main); overflow: hidden; box-shadow: var(--shadow-sm);
}
.contacts__map { min-height: 460px; background: var(--bg-soft); }
.contacts__map iframe { width: 100%; height: 100%; min-height: 460px; border: 0; display: block; }

.contacts__form { background: var(--primary); color: #fff; padding: 38px 40px; }
.contacts__form h2 { font-size: 24px; font-weight: 600; margin-bottom: 6px; color: #fff; }
.contacts__form-note { font-size: 15px; color: rgba(255, 255, 255, .78); margin-bottom: 24px; }
/* Форма 1572 уже размечена парами: два `div.row` по два поля `col-md-6`.
   Своей сетки поверх не строим — она ломала эти пары на столбцы;
   достаточно, чтобы ряды занимали всю ширину блока. */
.contacts__form .wpcf7-form > .row { margin-bottom: 16px; grid-template-columns: 1fr 1fr; gap: 14px; }
.contacts__form .wpcf7-form > p { margin-bottom: 16px; }
.contacts__form .wpcf7-form > p:last-of-type { margin-bottom: 0; }
.contacts__form label { color: rgba(255, 255, 255, .85); font-size: 13px; }
.contacts__form input[type="text"],
.contacts__form input[type="email"],
.contacts__form input[type="tel"],
.contacts__form textarea {
	background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3);
	color: #fff; border-radius: var(--radius-sm);
}
.contacts__form input::placeholder,
.contacts__form textarea::placeholder { color: rgba(255, 255, 255, .6); }
.contacts__form textarea { min-height: 130px; resize: vertical; }
.contacts__form input[type="checkbox"] { width: auto; accent-color: #fff; margin-right: 8px; }
.contacts__form .wpcf7-list-item { margin: 0; }
.contacts__form .wpcf7-list-item-label { font-size: 13px; color: rgba(255, 255, 255, .85); }
/* Кнопка светлая на синем: оранжевая здесь спорит с фоном. */
.contacts__form input[type="submit"] {
	background-color: #fff; color: var(--primary); font-weight: 600;
}
.contacts__form input[type="submit"]:hover { background-color: #e8f1f9; }
.contacts__form .wpcf7-not-valid-tip { color: #ffd9d9; }
.contacts__form .wpcf7-response-output { border-color: rgba(255, 255, 255, .5); color: #fff; }

/* ==========================================================================
   12. Подвал — тёмная карточка, как в макете
   ========================================================================== */

.site-footer { padding: 24px 0; }
.footer-card { background-color: var(--footer-dark); border-radius: var(--radius-main);
	padding: 48px 40px 32px; color: #fff; }

/* Колонка бренда шире прочих, но ширину задаёт сетка, а не min-width:
   при жёстком минимуме содержимое вылезало на соседнюю колонку. */
.footer-grid {
	display: grid; grid-template-columns: 1.6fr repeat(4, 1fr);
	gap: 32px; margin-bottom: 40px;
}
.footer-grid > * { min-width: 0; }

.footer-brand { min-width: 0; }
.footer-brand__logo { font-size: 20px; font-weight: 800; color: var(--footer-text); margin-bottom: 16px; }
.footer-brand__claim { font-size: 12px; line-height: 1.55; color: var(--footer-dim); font-weight: 400; margin-bottom: 16px; }
.footer-divider { height: 1px; background-color: rgba(179, 202, 213, .18); margin-bottom: 16px; }
.footer-brand__text { font-size: 12px; line-height: 1.6; color: var(--footer-dim); }
.footer-brand__text + .footer-brand__text { margin-top: 12px; }
.footer-brand__text strong { color: var(--footer-text); font-weight: 600; }

.footer-col h3 { color: #38bdf8; font-size: 13px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .5px; margin-bottom: 20px; }
.footer-col ul { list-style: none; font-size: 13px; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: var(--footer-dim); transition: color .18s ease; }
.footer-col a:hover { color: var(--accent-orange); }

.footer-contacts { gap: 14px !important; }
.footer-contacts li { display: flex; align-items: flex-start; gap: 10px; color: var(--footer-dim); }
.footer-contacts svg { flex-shrink: 0; margin-top: 2px; color: var(--brand-steel); }
.footer-contacts a { color: var(--footer-dim); }
.footer-contacts a:hover { color: var(--accent-orange); }

.footer-col h4 { color: var(--accent-orange); font-size: 11px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .5px; margin: 24px 0 12px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a, .footer-social span {
	width: 36px; height: 36px; background-color: rgba(179, 202, 213, .12); border-radius: var(--radius-sm);
	display: flex; align-items: center; justify-content: center; color: var(--footer-text);
	transition: background-color .18s ease, color .18s ease;
}
.footer-social a:hover { background-color: rgba(179, 202, 213, .24); color: #fff; }
.footer-social .is-empty { opacity: .45; }

.footer-bottom {
	border-top: 1px solid rgba(179, 202, 213, .15); padding-top: 24px;
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
	gap: 16px; font-size: 12px; color: var(--footer-dim);
}
.footer-bottom a { color: var(--footer-dim); transition: color .18s ease; }
.footer-bottom a:hover { color: #fff; }

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

@media (max-width: 1024px) {
	/* Кнопки каталога под поиском уже нет — жёсткая колонка теряет смысл. */
	.header-main { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
	.header-search { flex: 1 1 260px; }
	.hero { grid-template-columns: 1fr; padding: 32px 28px; }
	.hero__media { order: -1; }
	.shop-layout, .entry-layout, .product-single, .contact-grid,
	.contacts__top, .contacts__bottom, .product-hero, .docs__top { grid-template-columns: 1fr; }
	/* Подпись раздела уходит над текстом — узкая колонка рядом уже не помещается. */
	.svc-detail { grid-template-columns: 1fr; gap: 20px; }
	.contacts__map, .contacts__map iframe { min-height: 320px; }
	/* В одну колонку тянуть карту по высоте соседа больше не нужно:
	   иначе она перерастает свою ячейку и наезжает на форму. */
	.is-map, .is-map iframe { height: auto !important; min-height: 320px !important; }
	.contacts__form { padding: 30px 24px; }
	/* Узкий экран: карточкам и плашкам нужны меньшие поля, иначе строка
	   с форматом и весом файла жмёт название. */
	.doc-card, .docs__list, .contact-card { padding: 20px 18px; }
	/* Три колонки цифр на узком экране режут и подписи, и сами числа. */
	.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Оглавление в одну колонку уже не «липкое» — иначе оно перекрывает текст. */
	.toc-col { position: static !important; }
	.toc__list { max-height: none; }
	.doc-file { padding: 12px 14px; gap: 12px; }
	.ext-grid__item, .dir-grid__item { padding: 13px 14px; }
	/* На узком экране пара полей в строке ужимается до неудобной ширины. */
	.contacts__form .wpcf7-form > .row { grid-template-columns: 1fr; }
	.woocommerce-product-gallery { border-right: 0; border-bottom: 1px solid var(--line-soft); }
	.overview { padding: 36px 28px; }
	.overview__media { height: 300px; }
	.footer-grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
	.numbers__item { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
	.numbers__item:last-child { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 782px) {
	.nav-toggle { display: inline-flex; }
	.header-nav .menu { display: none; width: 100%; flex-direction: column; gap: 0; }
	.header-nav .menu.is-open { display: flex; }
	.menu > li { padding: 0; }
	.menu > li + li { border-left: 0; }
	/* На касании раскрытие по наведению не работает — оставляем прямую ссылку в каталог. */
	.nav-catalog-menu { display: none; }
	.menu > li > a { padding: 12px 0; border-bottom: 1px solid var(--line-soft); width: 100%; }
	.hero__slide { padding: 28px 20px; }
	.hero__nav { display: none; }
	/* На узком экране слайд всегда в одну колонку. Раньше схлопывался только
	   слайд с баннером, а текстовый оставался двухколоночным: содержимое
	   ужималось до 140 px и вылезало за край экрана. */
	.hero__slide { grid-template-columns: 1fr; }
	/* На узком экране картинка уходит в фон, иначе текст ложится на технику. */
	.hero__slide.has-banner::before {
		background: linear-gradient(180deg, rgba(232, 245, 255, .95) 0%, rgba(232, 245, 255, .82) 100%);
	}
	.menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border-left: 2px solid var(--line); border-radius: 0; min-width: 0; padding: 4px 0 8px 14px; }
	.header-claim, .header-origin { display: none; }

	/* Шапка при живой панели TapBar — по макету «1b Двухуровневый».
	   Поиск, каталог и меню продублированы внизу экрана, и вторая их копия
	   сверху съедала почти весь первый экран. Шапка работает контактным
	   блоком: тёмная строка со связью, под ней логотип и целевое действие.
	   Правила заперты в `.has-tapbar`, так что без плагина шапка остаётся
	   полной и мобильные посетители не теряют навигацию. */
	.has-tapbar .header-search,
	.has-tapbar .header-nav { display: none; }

	/* Карточка отдаёт свои поля внутренним строкам: тёмная полоса должна
	   доходить до краёв, поэтому отступы переезжают внутрь. */
	.has-tapbar .header-card { padding: 0; gap: 0; overflow: hidden; }

	.has-tapbar .header-top {
		background: var(--footer-dark); border-bottom: 0;
		padding: 9px 16px; font-size: 12.5px; flex-wrap: nowrap; gap: 10px;
	}
	.has-tapbar .header-contacts {
		width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 10px;
	}
	/* На тёмной полосе рамки читаются грязно — оставляем только текст
	   со значком. Значки уменьшены до 14 px: строка низкая. */
	.has-tapbar .header-contacts a {
		padding: 0; border: 0; color: var(--footer-text); min-width: 0; gap: 7px;
		overflow: hidden; text-overflow: ellipsis;
	}
	.has-tapbar .header-contacts a svg { width: 14px; height: 14px; color: inherit; }
	/* Телефон — нажимаемая плашка: область касания шире надписи, но за счёт
	   отрицательных полей строка от этого не растёт. */
	.has-tapbar .header-contacts a[href^="tel:"] {
		color: #fff; font-weight: 600;
		padding: 5px 10px; margin: -5px -10px; border-radius: 8px;
	}
	/* Отклик на касание: подсветка и лёгкое поджатие. Без этого непонятно,
	   попал ли палец по ссылке — на тёмной полосе нажатие иначе никак
	   не отзывается. */
	.has-tapbar .header-contacts a {
		transition: background-color .18s ease, transform .12s ease;
		-webkit-tap-highlight-color: transparent;
	}
	.has-tapbar .header-contacts a[href^="mailto:"] {
		padding: 5px 10px; margin: -5px -10px; border-radius: 8px;
	}
	.has-tapbar .header-contacts a:active {
		background: rgba(255, 255, 255, .16); border-color: transparent;
		box-shadow: none; color: #fff; transform: scale(.96);
	}
	.has-tapbar .header-contacts a:active svg { transform: none; }

	/* Логотип и кнопка держатся в одной строке. Переносить нельзя: на узких
	   экранах строка `flex-wrap: wrap` из правил для планшета отправляла
	   кнопку под логотип и шапка вырастала вдвое. */
	.has-tapbar .header-main {
		display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
		gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line);
	}
	/* Логотип уступает место кнопке: на 360 px он иначе не влезает.
	   `object-fit` не даёт ему сплющиться при сжатии. */
	.has-tapbar .site-logo { min-width: 0; flex: 0 1 auto; }
	.has-tapbar .site-logo img { max-width: 100%; object-fit: contain; object-position: left center; }
	.has-tapbar .header-cta { white-space: nowrap; }
	/* В макете логотип 26 px, но рядом с кнопкой в 44 px он терялся.
	   Берём 40 px: высоту строки задаёт кнопка, так что шапка не выросла. */
	.has-tapbar .site-logo img { height: 40px; }
	.has-tapbar .header-main .header-cta {
		display: inline-flex !important; flex: none; min-height: 44px; gap: 8px;
		padding: 11px 16px; border-radius: var(--radius-btn);
		font-size: 14px; box-shadow: none;
	}
	.has-tapbar .header-cta svg { flex: none; }
	.has-tapbar .header-cta:hover { transform: none; }
	.has-tapbar .header-cta:active { transform: scale(.97); }

	.nav-catalog { min-width: 0; width: 100%; }
	.nav-catalog-wrap { width: 100%; }
	.nav-catalog-menu { position: static; min-width: 0; box-shadow: none; padding: 6px 0 0; }
	.hero { padding: 28px 20px; }
	.hero__title { font-size: 26px; }
	.section__head h2 { font-size: 26px; }
	.banner-dark__inner { padding: 32px 24px; }
	.banner-stats__divider { display: none; }
	.overview { padding: 28px 20px; }
	.overview__title { font-size: 28px; }
	.page-hero, .content-card, .summary { padding: 24px 20px; }
	.footer-card { padding: 32px 24px 24px; }
	.footer-grid { grid-template-columns: 1fr; }
	.partner { padding: 24px; flex-direction: column; align-items: flex-start; }
	.partner__text { max-width: 100%; }
	.cat-card { flex-direction: column; align-items: flex-start; }
	.cat-card__img { width: 100%; height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Совсем узкий экран: метку с форматом и весом уводим под название —
   иначе длинные наименования переносятся по два слова в строке. */
@media (max-width: 480px) {
	.doc-file { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Совсем узкий экран: цифры в один столбец — на двух колонках длинные
   числа вроде «19 000» переносились по разряду. */
@media (max-width: 480px) {
	.stat-grid { grid-template-columns: 1fr; }
}