/* ==========================================================================
   Фирменная палитра «Ледяной» — выбрана владельцем из нескольких вариантов
   (см. https://claude.ai/code/artifact/3ad321e4-2b1a-46e2-b1a2-ed42e32c7aee).
   По умолчанию тема (Twenty Twenty-Five) красит все кнопки и ссылки в
   чёрный ("Contrast") — из-за этого сайт выглядел монохромным. Здесь кнопки
   и интерактивные состояния перекрашены в фирменный синий, без изменения
   структуры/вёрстки темы.
   ========================================================================== */
:root {
	--ledok-accent: #1e6fa8;
	--ledok-accent-dark: #0f4c73;
	--ledok-accent-tint: #e4f0f7;
	--ledok-ink: #12232e;
	--ledok-line: #dce7ed;
	/* "Под заказ" (§ товары без остатка на складе) — тёплый янтарный,
	   намеренно контрастный к фирменному синему, чтобы кнопка "Купить"
	   и кнопка "Под заказ" не путались друг с другом на карточке. */
	--ledok-warn: #b8631a;
	--ledok-warn-dark: #8f4c12;
	--ledok-warn-tint: #fbeadb;
}

/* Переопределение @font-face для Manrope (font-display: optional) —
   см. вывод через wp_add_inline_style() ниже в class-ledok-products.php,
   там же объяснение, зачем это нужно (устраняет заметную подмену шрифта
   при загрузке страницы). Здесь, в статическом файле, адрес шрифта не
   зашит жёстко — путь зависит от того, куда установлен WordPress. */

/* "Отображение N товаров" / "Отображение единственного товара" — служебная
   строка WooCommerce (блок product-results-count) над каталогом/категорией/
   поиском товаров, ничего не даёт покупателю (уточнение владельца, убрать
   везде). Один CSS-класс перекрывает сразу все архивные страницы (магазин,
   каждая категория и подкатегория, поиск) — их несколько разных шаблонов
   (theme + WooCommerce, классический и "blockified" варианты), а сам блок
   везде рендерит один и тот же класс, так что проще и надёжнее спрятать
   один раз здесь, чем редактировать каждый шаблон по отдельности. */
.woocommerce-result-count {
	display: none;
}

/* Заголовки — отдельный шрифт (Unbounded, подключается в enqueue_styles()),
   чтобы у них было больше характера, а не просто крупный основной текст.
   Названия товаров в карточках каталога — это h2 внутри блока каталога,
   поэтому попадают сюда же автоматически. */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title {
	font-family: "Unbounded", "Manrope", sans-serif;
	font-weight: 600;
	letter-spacing: -0.01em;
}
h1, .wp-block-query-title {
	font-weight: 700;
}

/* Кнопки: "В корзину" (каталог и карточка товара), "Перейти к оформлению",
   "Подтвердить заказ", кнопки калькулятора "Добавить в корзину" — все они
   в блочной теме получают класс .wp-element-button. */
.wp-element-button,
.wc-block-components-button,
.button.alt,
.ledok-add-to-cart {
	background-color: var(--ledok-accent) !important;
	border-color: var(--ledok-accent) !important;
	color: #fff !important;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.wp-element-button:hover,
.wp-element-button:focus,
.wc-block-components-button:hover,
.button.alt:hover,
.ledok-add-to-cart:hover {
	background-color: var(--ledok-accent-dark) !important;
	border-color: var(--ledok-accent-dark) !important;
}

/* "Под заказ" (§ Ledok_Products::maybe_mark_on_order) — визуально явно
   отличается от "Купить" (тёплый янтарный вместо синего), некликабельна
   как покупка: в каталоге ведёт на страницу товара (не добавляет в
   корзину), на карточке товара — не кнопка, а просто текстовая пометка. */
/* Без ".button" в селекторе — блочный шаблон каталога (WooCommerce
   Product Collection) навешивает свои классы (.wc-block-components-product-button__button
   и т.п.), а не классический ".button". */
a.ledok-on-order,
a.ledok-on-order:visited {
	background-color: var(--ledok-warn) !important;
	border-color: var(--ledok-warn) !important;
	color: #fff !important;
	cursor: default;
}
a.ledok-on-order:hover,
a.ledok-on-order:focus {
	background-color: var(--ledok-warn-dark) !important;
	border-color: var(--ledok-warn-dark) !important;
}
.ledok-required-accessory {
	margin-top: 14px;
}

.ledok-on-order-badge {
	display: inline-block;
	padding: 0.9em 1.6em;
	border-radius: 4px;
	background-color: var(--ledok-warn-tint);
	color: var(--ledok-warn-dark);
	font-weight: 700;
	font-size: 0.95rem;
}

/* Ссылки: при наведении/фокусе — акцентный синий вместо чёрного. Обычное
   (не наведённое) состояние не трогаем — чёрный текст ссылок в меню/тексте
   остаётся, чтобы не переусердствовать с цветом. */
a:hover,
a:focus,
.wp-block-navigation-item__content:hover,
.woocommerce-breadcrumb a:hover {
	color: var(--ledok-accent-dark) !important;
}

/* Выбранная опция в калькуляторе (диаметр, режим управления и т.д.) и
   плитки подразделов каталога — акцентная рамка вместо серой/чёрной. */
.ledok-calculator__option.is-selected {
	border-color: var(--ledok-accent) !important;
	box-shadow: 0 0 0 1px var(--ledok-accent) !important;
}
.ledok-calculator__option:hover {
	border-color: var(--ledok-accent);
}
/* Поля форм (чекаут, "Мой аккаунт", поиск) — при фокусе рамка и лёгкое
   свечение акцентным синим вместо невидимого/чёрного фокуса по умолчанию. */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
	border-color: var(--ledok-accent) !important;
	box-shadow: 0 0 0 2px var(--ledok-accent-tint) !important;
	outline: none;
}

/* Универсальный фокус-индикатор для клавиатурной навигации (доступность) —
   там, где нет своего стиля фокуса выше. */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--ledok-accent);
	outline-offset: 2px;
}

/* Степпер количества в корзине (+/-) и кнопка мини-корзины в шапке. */
.wc-block-components-quantity-selector__button:hover,
.quantity .plus:hover,
.quantity .minus:hover {
	color: var(--ledok-accent-dark) !important;
	border-color: var(--ledok-accent-dark) !important;
}
.wc-block-mini-cart__button:hover .wc-block-mini-cart__icon svg,
.wc-block-mini-cart__button:hover .wc-block-mini-cart__amount {
	color: var(--ledok-accent-dark);
}

/* Текущий пункт меню — акцентное подчёркивание, чтобы было видно, в каком
   разделе каталога находится покупатель. */
.current-menu-item > .wp-block-navigation-item__content,
.current-product_cat-ancestor > .wp-block-navigation-item__content {
	color: var(--ledok-accent-dark) !important;
	box-shadow: inset 0 -2px 0 var(--ledok-accent);
}

/* Плитки подразделов (например «ЛёдОк Эконом» / «Эконом Плюс» / «Стандарт» /
   «Макс» на странице категории) — блок woocommerce/product-categories по
   умолчанию рисует обычный маркированный список в столбик. Раскладываем в
   ряд отдельными карточками, как в макете (см. артефакт «Палитры ЛёдОк»). */
.wc-block-product-categories-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 0 0 2.5em;
}
.wc-block-product-categories-list-item {
	margin: 0;
}
.wc-block-product-categories-list-item a {
	display: block;
	background: #fff;
	border: 1px solid var(--ledok-line);
	border-radius: 10px;
	padding: 16px 18px;
	font-weight: 700;
	font-size: 0.94rem;
	color: var(--ledok-ink);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.wc-block-product-categories-list-item a:hover,
.wc-block-product-categories-list-item a:focus {
	border-color: var(--ledok-accent) !important;
	color: var(--ledok-ink) !important;
	transform: translateY(-1px);
}

/* Тот же компактный вид "иконка + подпись", что понравился в макете
   (см. артефакт «Палитры ЛёдОк»): чуть меньше и плотнее прежнего, значок
   и текст выровнены по центру строки через inline-flex, а не как раньше
   inline-block, где эмодзи и текст "гуляли" по вертикали. */
.ledok-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Карточка товара в каталоге/категории: у товаров разное число бейджей
   (1–4), из-за чего "Add to cart" оказывается на разной высоте. Прижимаем
   кнопку к низу карточки, чтобы все кнопки в ряду были на одном уровне. */
.wc-block-product {
	display: flex;
	flex-direction: column;
}
.wc-block-product .wp-block-woocommerce-product-button {
	margin-top: auto;
}
/* Область бейджей — раньше была растянута фиксированной высотой 180px
   (с запасом на 4 бейджа в столбик), чтобы заголовок и цена были на одном
   уровне у всех карточек в ряду независимо от числа бейджей — это и
   создавало большую пустую область под 1-2 бейджами. Бейджи теперь в
   одну строку с переносом (flex + gap) вместо margin-left на каждом,
   поэтому реальная высота компактнее, и запас можно уменьшить. */
.ledok-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.wc-block-product .ledok-badges {
	/* Замерено на самых длинных подписях (§ «Саморегулирующийся кабель»,
	   где у товара может быть 4 бейджа: 💧☀️🏠 применимость + 📏 «на отрез» +
	   🔆 УФ-стойкая + 🛡️ экран) — фактическая высота там 114–115px. Раньше
	   тут было 64px, из-за чего у карточек с 1–2 бейджами название/цена
	   оказывались выше, чем у соседей с 4 бейджами в том же ряду. */
	min-height: 116px;
}
/* Единый фирменный стиль бейджей (тон акцентного синего) вместо разрозненных
   цветов, оставшихся от ранних правок, — разные оттенки не были частью
   осознанной палитры и визуально спорили друг с другом и с новым синим
   акцентом кнопок/ссылок. */
.ledok-badge--insulation_only,
.ledok-badge--street_pipes,
.ledok-badge--custom,
.ledok-badge--type-cable,
.ledok-badge--type-section,
.ledok-badge--uv,
.ledok-badge--shield {
	background: var(--ledok-accent-tint);
	color: var(--ledok-accent-dark);
}

/* Таблица "Additional information": на десктопе места хватает — подписи
   атрибутов (Мощность (Вт/м), Максимальная рекомендуемая длина секции и т.д.)
   растягиваем в одну строку вместо переноса. */
@media (min-width: 768px) {
	.woocommerce-product-attributes-item__label {
		white-space: nowrap;
		width: 1%;
	}
}

.ledok-length-field {
	margin: 1em 0;
	padding: 1em;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
}
.ledok-length-field__presets {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0;
}
.ledok-length-preset {
	padding: 4px 10px;
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 6px;
	cursor: pointer;
}
.ledok-length-preset.is-active {
	background: #333;
	color: #fff;
	border-color: #333;
}
.ledok-length-field__price {
	margin-top: 10px;
	font-size: 0.95em;
}

.ledok-calculator {
	max-width: 720px;
}
.ledok-calculator__step {
	margin-bottom: 1.5em;
	padding: 1em;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
}
.ledok-calculator__options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.ledok-calculator__option {
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
}
.ledok-calculator__option.is-selected {
	border-color: #333;
	box-shadow: 0 0 0 1px #333;
}
.ledok-kit {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 1em;
	margin-bottom: 1em;
}
.ledok-kit-group {
	margin-bottom: 1.5em;
}
.ledok-kit-group .ledok-toggle-budget {
	margin-top: -0.5em;
	margin-bottom: 1em;
}
.ledok-kit__badge {
	font-size: 0.8em;
	text-transform: uppercase;
	color: #888;
}

.ledok-b2b-fields {
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 1em;
	margin: 1em 0;
}

/* Тепловой расчёт (§ heatloss, перенесено из calc.html) */
.ledok-calculator__options--stack {
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
}
.ledok-calculator__options--stack label {
	cursor: pointer;
}
.sgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	margin-bottom: 14px;
}
.stat {
	background: #f6f3ec;
	border: 1px solid #d9d2c2;
	border-radius: 6px;
	padding: 10px 12px;
}
.stat .sl {
	font-size: 0.75rem;
	color: #8a8275;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.stat .sv {
	font-size: 1.3rem;
	font-weight: 700;
	color: #46707a;
	margin-top: 2px;
}
.al {
	padding: 9px 13px;
	border-radius: 6px;
	font-size: 0.87rem;
	margin-top: 9px;
	border: 1px solid;
}
.al.warn {
	background: #fdf2ed;
	border-color: #e8c8b8;
	color: #c0392b;
}
.al.ok {
	background: #eef6ee;
	border-color: #c8e0c8;
	color: #3f7d52;
}
.vcard {
	border: 1px solid #d9d2c2;
	border-radius: 6px;
	padding: 11px 14px;
	background: #fdfcf9;
	margin-top: 9px;
}
.vcard.rec {
	border-color: #b4582f;
	background: #fff8f3;
}
.vtitle {
	font-weight: 600;
	font-size: 0.91rem;
	color: #46707a;
}
.vcard.rec .vtitle {
	color: #8a3f1f;
}
.vbody {
	font-size: 0.84rem;
	color: #5b6a6c;
	margin-top: 4px;
	line-height: 1.55;
}
.vbody li {
	margin-top: 2px;
}
.badge {
	display: inline-block;
	background: #b4582f;
	color: #fff;
	font-size: 0.68rem;
	padding: 1px 7px;
	border-radius: 9px;
	margin-left: 7px;
	vertical-align: middle;
}
.badge.alt {
	background: #46707a;
}
.sec-h {
	font-size: 0.9rem;
	font-weight: 600;
	color: #46707a;
	margin: 18px 0 8px;
	border-top: 1px solid #d9d2c2;
	padding-top: 14px;
}

/* Описание категории «Саморегулирующийся кабель» (term description) —
   тот же фирменный синий, что и на карточках товаров (кнопки, .ledok-badge),
   а не тёплая палитра калькулятора (.vcard/.stat выше) — просьба владельца
   оформить в стиле ledok-badges/карточек, а не завести третью палитру. */
.ledok-cat-intro {
	border-left: 3px solid var(--ledok-accent);
	background: var(--ledok-accent-tint);
	border-radius: 0 8px 8px 0;
	padding: 16px 20px;
	margin: 0 0 24px;
}
.ledok-cat-intro p {
	margin: 0 0 10px;
}
.ledok-cat-intro__hint {
	font-weight: 600;
	color: var(--ledok-ink);
}
.ledok-cta-button {
	display: inline-block;
	background-color: var(--ledok-accent);
	color: #fff !important;
	font-weight: 700;
	padding: 0.75em 1.4em;
	border-radius: 4px;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}
.ledok-cta-button:hover,
.ledok-cta-button:focus {
	background-color: var(--ledok-accent-dark);
	color: #fff !important;
}

/* График мощность/температура (вкладка «Детали») — инлайновый SVG,
   у самого <svg> нет width/height (только viewBox), поэтому без этих правил
   браузер отрисует его в дефолтном 300×150. */
.ledok-power-chart {
	margin: 24px 0 0;
}
.ledok-power-chart svg {
	display: block;
	width: 100%;
	max-width: 640px;
	height: auto;
	margin: 0 auto;
}

.ledok-cat-figure {
	max-width: 750px;
	margin: 0 auto 28px;
}
.ledok-cat-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.ledok-table-wrap {
	overflow-x: auto;
	margin: 16px 0 20px;
}
.ledok-content-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	margin: 0;
}
.ledok-content-table th,
.ledok-content-table td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--ledok-line);
}
.ledok-content-table thead th {
	background: var(--ledok-accent-tint);
	color: var(--ledok-accent-dark);
	font-weight: 700;
	white-space: nowrap;
}
.ledok-content-table tbody td:first-child {
	color: var(--ledok-ink);
	font-weight: 600;
	white-space: nowrap;
}
.ledok-content-table tbody tr:last-child td {
	border-bottom: none;
}
/* Строка-подсказка "когда выбирать" — акцентный фон, чтобы читатель видел
   итоговую рекомендацию, не сравнивая всю таблицу строка за строкой. */
.ledok-content-table__highlight td {
	background: var(--ledok-accent-tint);
}
.ledok-content-table__highlight td:first-child {
	color: var(--ledok-accent-dark);
}
/* Тот же приём, но когда рекомендация — отдельная КОЛОНКА, а не итоговая
   строка (см. таблицу тарифов ЛёдОк, столбец "Когда выбирать") — подсвечиваем
   конкретную ячейку, а не всю строку. */
.ledok-content-table td.ledok-content-table__highlight-cell {
	background: var(--ledok-accent-tint);
	color: var(--ledok-accent-dark);
	font-weight: 600;
	white-space: normal;
}

.ledok-cat-note {
	background: #fff;
	border: 1px solid var(--ledok-line);
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 0.92rem;
	color: var(--ledok-ink);
}

/* Класс взрывозащиты (T4/T3/T2) в таблице промышленной линейки — тот же
   пилюльный бейдж, что и .ledok-badge на карточках товаров. */
.ledok-badge--class {
	background: var(--ledok-accent-tint);
	color: var(--ledok-accent-dark);
}

/* FAQ-аккордеон в описании категории (term description, <details>/<summary>)
   — нативный HTML, без JS; здесь только оформление под фирменный стиль. */
.wp-block-term-description details {
	border: 1px solid var(--ledok-line);
	border-radius: 8px;
	margin: 10px 0;
	padding: 12px 16px;
}
.wp-block-term-description details[open] {
	border-color: var(--ledok-accent);
}
.wp-block-term-description details summary {
	font-weight: 600;
	color: var(--ledok-ink);
	cursor: pointer;
	list-style: none;
}
.wp-block-term-description details summary::-webkit-details-marker {
	display: none;
}
.wp-block-term-description details summary::before {
	content: "+";
	display: inline-block;
	width: 1.1em;
	color: var(--ledok-accent);
	font-weight: 700;
}
.wp-block-term-description details[open] summary::before {
	content: "−";
}
.wp-block-term-description details summary + p {
	margin: 10px 0 0;
	color: #4a5a63;
}

/* Ссылки на смежные разделы в описании категории (§ «Смежные разделы» на
   флагманской категории «vodostoki-krovlya») — карточки-чипы в один ряд,
   тот же язык, что и .wc-block-product-categories-list-item (плитки
   подкатегорий), только компактнее и с подписью-уточнением под названием. */
.ledok-related-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 8px;
	padding: 0;
	list-style: none;
}
.ledok-related-links li {
	display: flex;
	flex: 1 1 220px;
}
.ledok-related-link {
	display: block;
	width: 100%;
	background: #fff;
	border: 1px solid var(--ledok-line);
	border-radius: 10px;
	padding: 14px 18px;
	font-weight: 700;
	font-size: 0.94rem;
	color: var(--ledok-ink);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.ledok-related-link:hover,
.ledok-related-link:focus {
	border-color: var(--ledok-accent) !important;
	color: var(--ledok-ink) !important;
	transform: translateY(-1px);
}
.ledok-related-link span {
	display: block;
	margin-top: 4px;
	font-weight: 400;
	font-size: 0.82rem;
	color: #5b6a6c;
}

/* Вопрос FAQ — настоящий H3 внутри <summary> (нужен для структуры заголовков
   страницы). По умолчанию заголовок блочный и со своим кеглем, из-за чего
   уезжает под плюсик и выбивается по размеру: возвращаем его в строку и к
   размеру самого summary. То же правило для блока «Подробности» на главной
   живёт в глобальных стилях сайта (.wp-block-details summary h3). */
.wp-block-term-description details summary h3 {
	display: inline;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: 0;
}

/* Нижняя часть описания категории — то, что печатается под сеткой товаров
   (см. Ledok_Products::append_below_grid()). Отступ сверху отделяет её от
   последнего ряда карточек. */
.ledok-cat-below {
	margin-top: 40px;
}

/* Коммерческий блок под сеткой (доставка, сроки, гарантия, безнал) —
   список тезисов, а не сплошной абзац: читается по диагонали. */
.ledok-commerce-list {
	margin: 16px 0 20px;
	padding-left: 1.2em;
}
.ledok-commerce-list li {
	margin-bottom: 10px;
}

/* Строка про нестандартные размеры под ступенями желоба в калькуляторе —
   мелкая приписка, а не ещё один вариант выбора. */
.ledok-calculator__note {
	margin: 10px 0 0;
	font-size: 0.875rem;
	color: #5b6a6c;
}