/* Ответ формы: своя строка под кнопкой, цветом темы сайта. */
.baihu-form__note {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: #2f7d32;
}

.baihu-form__note--error {
	color: #c8102e;
}

/* Ловушка от роботов. Не display:none — часть ботов такие поля пропускает; поле
   реально существует на странице, просто вынесено за пределы видимой области. */
.baihu-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

/* ── Быстрый заказ на карточке товара (арт-дирекшн #8191108e) ──────────────────
   Норма и наведение у кнопки уже описаны темой: .btn-primary-grey отдаёт
   --primary-grey, а :hover — --grey-scale-200. Здесь только то, чего на бою нет. */

/* Фокус с клавиатуры. В теме нет ни одного правила :focus-visible на кнопках:
   пройти карточку табом и понять, где стоишь, сейчас невозможно. */
.product-detail__price-btn:focus-visible,
.baihu-cta__btn:focus-visible {
	outline: 2px solid var(--primary-red, #dd0d0d);
	outline-offset: 2px;
}

/* Нажатие — тот же фон, что и наведение. Кнопка не «утопает» и не растёт:
   в блоке цены один акцент, и он у корзины. */
.product-detail__price-btn.btn-primary-grey:active {
	background: var(--grey-scale-200, #d1d2d3);
}

/* Товар без цены. Класть в корзину нечего, поэтому корзину со страницы снимает
   сборщик, а быстрый заказ остаётся единственным действием и берёт вес
   первичного — красный, во всю ширину блока. */
.product-detail__price-block .product-detail__price-btn--only {
	flex: 1 1 100%;
	width: 100%;
}

/* Карточка с формой «Узнать цену и наличие» (#9a44880ffc83). Один призыв на экран.

   До 1024px форма уходит на 2-3 экрана ниже галереи, и первой в экране остаётся
   кнопка блока цены — она основная (красная тема), подпись и действие ей меняет
   baihu-forms.js: «Узнать цену», тап ведёт к форме, а не в окно быстрого заказа.

   От 1024px форма стоит в правой колонке рядом с фото, и кнопка рядом с ней — второй
   такой же призыв. У товара без цены в блоке цены больше ничего нет, поэтому блок
   снимаем целиком. Если цена есть, блок остаётся (цена — это информация), а кнопка
   отступает до серой. Без :has() (старые браузеры) всё остаётся как в теме. */
@media (min-width: 1024px) {
	.product-detail__content:has(.baihu-ask):has(.product-detail__price-amount[data-price-hidden]) .product-detail__price-block {
		display: none;
	}

	.product-detail__content:has(.baihu-ask) .product-detail__price-block .product-detail__price-btn--only {
		background: var(--primary-grey, #e9e9e9);
		color: var(--primary-black, #1d2125);
		border-color: transparent;
	}

	.product-detail__content:has(.baihu-ask) .product-detail__price-block .product-detail__price-btn--only:hover {
		background: var(--grey-scale-200, #d1d2d3);
	}
}

/* Шире 1400px тема раскладывает карточку в три колонки, и третья (блок цены) у товара
   без цены пустела бы. Туда встаёт сама форма: обёртку характеристик растворяем
   (display: contents), её разделы и форма становятся ячейками грида карточки. Форма
   прилипает к верху окна, пока читаются характеристики. Разделов у карточек один или
   два — по сплошному замеру сборки других детей у обёртки нет. */
@media (min-width: 1401px) {
	.product-detail__content:has(.baihu-ask):has(.product-detail__price-amount[data-price-hidden]) {
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"gallery s1 ask"
			"gallery links ask";
		row-gap: 24px;
		align-items: start;
	}

	.product-detail__content:has(.baihu-ask):has(.product-detail__specs-section + .product-detail__specs-section):has(.product-detail__price-amount[data-price-hidden]) {
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"gallery s1 ask"
			"gallery s2 ask"
			"gallery links ask";
	}

	.product-detail__content:has(.product-detail__price-amount[data-price-hidden]) .product-detail__specs:has(.baihu-ask) {
		display: contents;
	}

	.product-detail__content:has(.product-detail__price-amount[data-price-hidden]) .product-detail__specs-section:first-child {
		grid-area: s1;
	}

	.product-detail__content:has(.product-detail__price-amount[data-price-hidden]) .product-detail__specs-section + .product-detail__specs-section {
		grid-area: s2;
	}

	.product-detail__content:has(.product-detail__price-amount[data-price-hidden]) .product-detail__specs > .baihu-ask {
		grid-area: ask;
		position: sticky;
		top: 24px;
		margin: 0;
		padding: 24px;
	}
}

/* Окно фото карточки всегда квадратное. У части разделов есть только широкий баннер
   483x208 (квадрат у них 80x80 и в окне мылится, #9a44880ffc83), и без этого окно
   у одной группы карточек квадрат, у другой — полоса. contain ничего не обрезает.
   Фон окна белый: фото разделов сняты на белом, и на сером #f9f9f9 темы вокруг
   снимка читался белый прямоугольник — «карточка в карточке». Селектор двойной: файл
   темы подключён после нашего, и при равной силе её #f9f9f9 выигрывал (замер рендером). */
.product-detail__gallery .product-detail__gallery-main {
	background-color: #fff;
}

.product-detail__gallery-main .product-detail__gallery-img {
	aspect-ratio: 1 / 1;
	height: auto;
}

/* Мобильный. Кнопки в колонку, палец ≥44 — берём 48. Порядок обратный
   (column-reverse): в столбце первым читается верхнее, туда идёт первичное
   «В корзину», быстрый заказ под ним. Правило «первичное справа» в столбце
   превращается в «первичное сверху».

   Селекторы двойные не для красоты: тема задаёт и gap:12px у контейнера, и
   height:44px с width:fit-content у самой кнопки одним классом, а её файл
   подключён ПОСЛЕ нашего — при равной силе селектора выигрывала бы она.
   Проверено замером: с одиночным классом на 375px оставались gap 12 и высота 43. */
@media (max-width: 480px) {
	.product-detail__price-block .product-detail__price-buttons {
		flex-direction: column-reverse;
		gap: 8px;
	}

	/* flex:none обязателен: у темы на кнопке flex:1, и в колонке это уже не ширина,
	   а высота — заданные 48px съедал бы расчёт флексбокса (замер давал 43). */
	.product-detail__price-buttons .product-detail__price-btn {
		flex: none;
		width: 100%;
		height: 48px;
	}
}

/* ── Врезка быстрого заказа на энциклопедических страницах ─────────────────────
   У марки цены нет и обещать её нельзя, поэтому блок цены сюда не годится.
   Геометрия та же (радиус 8, 32 внутри), но класс свой: сам
   .product-detail__price-block сидит в гриде карточки (grid-area: price) и
   в тексте статьи раскладывается неверно.

   Фон серый, а не белый, как в макете: у статьи фон тоже белый (body{background:#fff}
   в main.3e2163d5.css), и белая врезка на нём не читается блоком вовсе — проверено
   рендером. Рамку и тень не заводим, врезку отделяет заливка стоковым --primary-grey. */
.baihu-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	margin: 40px 0;
	padding: 32px;
	background: var(--primary-grey, #e9e9e9);
	border-radius: 8px;
}

.baihu-cta .baihu-cta__title {
	margin: 0 0 4px;
}

/* Подпись темнее стокового #6b7076: на белом фоне макета он давал 4.99:1 и проходил
   AA, но врезку мы посадили на серый --primary-grey (#e9e9e9), и на нём тот же цвет
   падает до 4.11:1 — ниже нормы 4.5:1. #5a5f65 на этом фоне даёт 5.31:1. */
.baihu-cta .baihu-cta__note {
	margin: 0;
	color: #5a5f65;
}

.baihu-cta__btn {
	flex: none;
	min-width: 200px;
}

@media (max-width: 480px) {
	.baihu-cta {
		margin: 24px 0;
		padding: 16px;
		gap: 16px;
	}

	.baihu-cta .baihu-cta__btn {
		width: 100%;
		min-width: 0;
		height: 48px;
	}
}

/* ── Блок «Узнать цену и наличие» на карточке товара (тикет a7ee0b438f8a) ──────
   Стоит внутри области характеристик, последним её ребёнком. Отдельный класс, а не
   .baihu-cta: у врезки в статье кнопка стоит справа от текста, здесь под
   характеристиками идёт форма из трёх полей, и общая геометрия им не годится.

   Рисуем компактно намеренно. Девять из десяти визитов на карточку — телефон,
   и блок обязан помещаться на экране сразу за характеристиками: каждые лишние
   8px отступа отодвигают кнопку за сгиб.

   Ширину слушаем У СВОЕГО КОНТЕЙНЕРА, а не у окна. На широком экране тема кладёт
   характеристики в колонку 303px (порог 1440px), и форма, разложенная по ширине
   ОКНА, встала бы там в две колонки по 140px. Браузер без поддержки @container
   получает одну колонку — читаемый вид, а не сломанный. */
.baihu-ask {
	container-type: inline-size;
	margin: 16px 0 0;
	padding: 16px;
	background: #fff;
	border: 1px solid #dcdddf;
	border-radius: 8px;
}

.baihu-ask .baihu-ask__title {
	margin: 0;
}

.baihu-ask .baihu-ask__lead {
	margin: 6px 0 0;
	color: #52565b;
}

.baihu-ask__form {
	display: grid;
	gap: 10px;
	margin-top: 14px;
}

.baihu-ask__field {
	display: block;
	min-width: 0;
}

.baihu-ask .baihu-ask__label {
	display: block;
	margin-bottom: 4px;
	color: #52565b;
}

.baihu-ask__input {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1px solid #d1d2d3;
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: #212529;
	-webkit-appearance: none;
	appearance: none;
}

/* Название позиции — многострочное: длинное название не должно уходить за край поля.
   Высота по тексту там, где браузер умеет field-sizing, иначе две строки из rows. */
.baihu-ask .baihu-ask__input--area {
	display: block;
	height: auto;
	min-height: 44px;
	padding: 10px 12px;
	line-height: 1.4;
	resize: vertical;
	field-sizing: content;
}

.baihu-ask__input:focus-visible {
	outline: 2px solid var(--primary-red, #dd0d0d);
	outline-offset: 1px;
	border-color: transparent;
}

.baihu-ask .baihu-ask__btn {
	width: 100%;
	height: 48px;
}

.baihu-ask .baihu-ask__policy {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: #6c7075;
}

.baihu-ask .baihu-ask__policy a {
	color: inherit;
	text-decoration: underline;
}

/* Ответ приёмника рисует общий .baihu-form__note — прижимаем его к кнопке. */
.baihu-ask__form .baihu-form__note {
	margin: 0;
}

/* Звонок и WhatsApp — не запасной выход, а второй равноправный способ: половина
   покупателей металла звонит, а не пишет. Строки кликабельны целиком и с высотой
   пальца, а не мелкой сноской под кнопкой. */
.baihu-ask__contacts {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #d8d9da;
}

.baihu-ask .baihu-ask__contact {
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
}

.baihu-ask .baihu-ask__contact + .baihu-ask__contact {
	margin-top: 4px;
}

.baihu-ask__contact-link {
	display: inline-block;
	padding: 6px 0;
	color: #212529;
	font-weight: 600;
	text-decoration: none;
}

.baihu-ask__contact-link:hover,
.baihu-ask__contact-link:focus-visible {
	color: var(--primary-red, #dd0d0d);
	text-decoration: underline;
}

/* Пояснение — своей строкой под ссылкой. В подбор оно рвётся посередине фразы
   («…300-90-92 — если / нужен ответ прямо сейчас») и растаскивает строку звонка
   на две неравные половины: на 375px это первое, что бросается в глаза. */
.baihu-ask .baihu-ask__contact-tail {
	display: block;
	color: #6c7075;
	font-size: 13px;
	line-height: 1.35;
}

/* Контейнер шире 420px — объём и связь встают в строку, блок становится ниже на
   одно поле. Кнопка при этом не тянется во всю ширину: рядом остаётся место, и
   растянутая кнопка выглядит заглушкой. */
@container (min-width: 420px) {
	.baihu-ask__form {
		grid-template-columns: 1fr 1fr;
		gap: 12px 16px;
	}

	.baihu-ask__field--wide,
	.baihu-ask .baihu-ask__policy,
	.baihu-ask__form .baihu-form__note {
		grid-column: 1 / -1;
	}

	.baihu-ask .baihu-ask__btn {
		grid-column: 1 / -1;
		width: auto;
		min-width: 220px;
		justify-self: start;
	}
}

/* --- Раздел каталога: тот же блок, но первым экраном (тикет adfb5c7e2dae) --------
   На карточке товара блок идёт в поток чтения и может быть узким. На разделе он
   стоит сразу под заголовком, ПЕРЕД фильтром ocfilter, и у него другая работа:
   человек с рекламы должен увидеть цену и кнопку, не прокручивая. Поэтому блок
   тут шире, ниже ростом и раскладывается в строку, как только контейнер это
   позволяет. Отдельный модификатор, а не правка базового класса: карточка товара
   со своей колонкой 303px от этих правил сломалась бы. */
.baihu-ask--lead {
	margin: 0 0 20px;
	padding: 16px 18px;
	background: #fbfbfc;
	border-color: #d1d2d3;
}

/* Внешняя врезка следует внутренним границам .container. Вложенные формы
   уже ограничены родительским контейнером или товарной колонкой. */
main > .baihu-ask.baihu-ask--lead {
	width: calc(100% - 80px);
	max-width: 1488px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 1024px) {
	main > .baihu-ask.baihu-ask--lead {
		width: calc(100% - 64px);
	}
}

@media (max-width: 480px) {
	main > .baihu-ask.baihu-ask--lead {
		width: calc(100% - 24px);
	}
}

.baihu-ask--lead .baihu-ask__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
}

.baihu-ask--lead .baihu-ask__lead {
	margin: 6px 0 0;
	font-size: 14px;
}

.baihu-ask__price {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: #212529;
	white-space: nowrap;
}

/* Цена — красным, как в карточках товара на этой же странице: иначе первый экран
   говорит о цене одним цветом, а список товаров под ним другим. */
.baihu-ask__price .cbr-price,
.baihu-ask__price-from {
	color: var(--primary-red, #dd0d0d);
}

.baihu-ask__price .cbr-price__unit {
	font-weight: 400;
}

.baihu-ask .baihu-ask__price-tail {
	margin-left: 8px;
	color: #6c7075;
	font-size: 13px;
	font-weight: 400;
	white-space: normal;
}

/* Контакты у широкого блока прижимаются к форме строкой, а не отдельной плашкой:
   лишняя горизонтальная линия на первом экране читается как конец блока. */
.baihu-ask--lead .baihu-ask__contacts {
	margin-top: 10px;
	padding-top: 10px;
}

.baihu-ask--lead .baihu-ask__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
}

.baihu-ask--lead .baihu-ask__contact-tail {
	display: inline;
}

/* Контейнер шире 760px — поля и кнопка встают одной строкой, блок занимает три
   строки вместо семи. Ниже этого порога работает раскладка базового класса. */
@container (min-width: 760px) {
	.baihu-ask--lead .baihu-ask__form {
		grid-template-columns: minmax(220px, 2fr) minmax(120px, 1fr) minmax(160px, 1fr) auto;
		align-items: end;
		gap: 10px 12px;
	}

	.baihu-ask--lead .baihu-ask__field--wide,
	.baihu-ask--lead .baihu-ask__btn {
		grid-column: auto;
	}

	.baihu-ask--lead .baihu-ask__btn {
		width: auto;
		min-width: 190px;
		height: 44px;
	}

	.baihu-ask--lead .baihu-ask__policy,
	.baihu-ask--lead .baihu-ask__form .baihu-form__note {
		grid-column: 1 / -1;
	}
}

/* Галочки согласий (ПДн и рассылка), которые собирает baihu-forms.js. Ревью
   арт-директора 29.09.26: обе галочки — один компонент (бокс 18px, текст 14px),
   блок над кнопкой, 12px между галочками и 16px до кнопки. Снятая галочка — рамка,
   а не красная заливка: залитый квадрат читается как «уже отмечено».
   Селекторы с form впереди: файл темы подключён после нашего и при равной силе
   перебил бы размеры (у темы на ≤768px текст 12px). */
.baihu-consents {
	display: grid;
	gap: 12px;
	margin: 0 0 16px;
	text-align: left;
}

form .baihu-consents .policy-checkbox,
form .baihu-consents .baihu-consent {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	cursor: pointer;
}

/* Тема прячет поле display:none — с клавиатуры галочку не отметить. Прячем
   визуально, поле остаётся в порядке табуляции. */
form .baihu-consents .policy-checkbox input {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	opacity: 0;
}

form .baihu-consents .policy-checkbox .fake-input,
form .baihu-consents .baihu-consent input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	background: transparent;
	border: 1px solid #8a8f95;
	border-radius: 4px;
}

/* Тёмно-красная подложка главной: там рамка светлая, по ревью — #c9cdd2. */
.prepare-estimate__form .baihu-consents .fake-input {
	border-color: #c9cdd2;
}

form .baihu-consents .policy-checkbox input:checked + .fake-input {
	background: var(--primary-red, #dd0d0d);
	border-color: var(--primary-red, #dd0d0d);
}

form .baihu-consents .policy-checkbox input:focus-visible + .fake-input,
form .baihu-consents .baihu-consent input:focus-visible {
	outline: 2px solid var(--primary-red, #dd0d0d);
	outline-offset: 2px;
}

form .baihu-consents .baihu-consent input {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

form .baihu-consents .baihu-consent input:checked {
	background: var(--primary-red, #dd0d0d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2l2.6 2.6L11 4.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
	border-color: var(--primary-red, #dd0d0d);
}

form .baihu-consents .policy-checkbox p,
form .baihu-consents .baihu-consent span {
	min-width: 0;
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

form .baihu-consents a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

form .baihu-consents a:hover,
form .baihu-consents a:focus-visible {
	color: var(--primary-red, #dd0d0d);
}

/* На тёмно-красной подложке главной акцентный красный у ссылки при наведении
   пропадает — там ссылку выделяет только подчёркивание, цвет остаётся белым. */
.prepare-estimate__form .baihu-consents a:hover,
.prepare-estimate__form .baihu-consents a:focus-visible {
	color: #fff;
}

/* 765-1024px: тема ставит «Прикрепить файл» и кнопку в строку. Блок согласий
   уходит над ними на всю ширину, иначе он встаёт третьей колонкой. */
@media (min-width: 765px) and (max-width: 1024px) {
	.prepare-estimate__form .form-btns {
		flex-wrap: wrap;
	}

	.prepare-estimate__form .form-btns .baihu-consents {
		order: -1;
		flex-basis: 100%;
		margin: 0;
	}
}


.baihu-ask-bottom {
  margin: 40px 0;
}