/* ============================================================================
   Стили СТЫКОВКИ дизайн-системы с темой Woodmart.
   Файлы комплекта (styles.css, menu.css, страничные) не трогаем — всё, что нужно
   именно для встраивания в живой сайт, живёт здесь.
   Подключается ПОСЛЕДНИМ.
   ============================================================================ */

/* --- Кнопка «Скачать действующий прайс-лист» в шапке -------------------------
   Встала на место выпадающего списка городов (его убрали: 179 опций, 16 КБ,
   перелинковки не давал). Контейнер .city_list остался от прежней вёрстки. */

.city_list .bt-price-head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 6px 0;
}

.bt-price-head .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 0;
	border-radius: 10px;
	font: 600 14px/1.2 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: filter .15s ease;
}

/* Красная кнопка: белый текст перебиваем точечно — тема Woodmart красит ссылки
   своим цветом, и без этого правила текст остался бы тёмным на красном. */
.bt-price-head a.btn-red,
.bt-price-head a.btn-red:link,
.bt-price-head a.btn-red:visited,
.bt-price-head a.btn-red:hover,
.bt-price-head a.btn-red:focus {
	background: #CF000D;
	color: #fff;
}

.bt-price-head a.btn-red:hover {
	filter: brightness(1.08);
}

/* Пустая обёртка от списка городов — чтобы не занимала место */
.city_dropdown:empty {
	display: none;
}

/* Контейнер кнопки не должен растягивать страницу по горизонтали */
.city_list {
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.city_list .bt-price-head {
		justify-content: center;
		padding: 8px 12px;
	}

	.bt-price-head .btn {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		justify-content: center;
		/* на узких экранах длинный текст должен переноситься, иначе кнопка
		   растягивает страницу и появляется горизонтальный скролл */
		white-space: normal;
		text-align: center;
		padding: 12px 14px;
		font-size: 13px;
		line-height: 1.25;
	}
}

@media (max-width: 420px) {
	.bt-price-head .btn {
		font-size: 12.5px;
		padding: 11px 10px;
	}
}

/* --- Кнопка прайса на телефоне ---------------------------------------------
   Тема прячет контейнер .city_list на узких экранах (он не входит в мобильные
   колонки Header Builder). Показываем его принудительно — кнопка прайса нужна
   именно на смартфонах: они дают 64% трафика сайта. */

@media (max-width: 1024px) {
	.whb-main-header > .city_list,
	.city_list {
		display: block !important;
		visibility: visible !important;
		height: auto !important;
		overflow: visible !important;
	}

	.city_list .city_dropdown,
	.city_list .city_dropdown > div {
		display: block !important;
	}

	.city_list .bt-price-head {
		display: flex !important;
	}
}

/* --- Подвал: три колонки ссылок (О компании / Категории / Объём) ------------
   Заменили одну длинную строку ссылок из темы. Счётчики, cookie-баннер и
   скрипты слайдеров в footer.php не тронуты — там всё осталось как было. */

.bt-foot-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 32px;
	padding: 26px 0 18px;
	border-top: 1px solid rgba(0, 0, 0, .08);
	margin-top: 14px;
}

.bt-foot-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bt-foot-col li {
	margin: 0 0 7px;
	padding: 0;
}

.bt-foot-h {
	font: 700 13px/1.2 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #16181D;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid #CF000D;
	display: inline-block;
}

.bt-foot-col a {
	font: 400 14px/1.35 'Golos', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	color: #4B5563;
	text-decoration: none;
	transition: color .15s ease;
}

.bt-foot-col a:hover,
.bt-foot-col a:focus {
	color: #CF000D;
}

/* «Объём» — короткие пункты, ставим в две колонки внутри своей колонки */
.bt-foot-col:last-child ul {
	columns: 2;
	column-gap: 18px;
}

@media (max-width: 900px) {
	.bt-foot-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
	}
}

@media (max-width: 560px) {
	.bt-foot-cols {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 20px 0 14px;
	}

	.bt-foot-col:last-child ul {
		columns: 3;
	}
}

/* --- Кнопка «Купить» в режиме каталога -------------------------------------
   Корзины на сайте нет, но кнопка остаётся: без неё товар хуже ранжируется.
   Ведёт на «Контакты» — так же, как на других наших сетках. */

.b2b-kupit-karta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 18px 0 22px;
}

.b2b-kupit-karta a.btn-red,
.b2b-kupit-karta a.btn-red:link,
.b2b-kupit-karta a.btn-red:visited,
.b2b-kupit-karta a.btn-red:hover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 190px;
	padding: 14px 28px;
	border-radius: 10px;
	background: #CF000D;
	color: #fff;
	font: 700 15px/1.2 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	text-decoration: none;
}

.b2b-kupit-karta a.btn-red:hover {
	filter: brightness(1.08);
}

.b2b-kupit-podpis {
	font: 400 13px/1.35 'Golos', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	color: #6B7280;
}

@media (max-width: 560px) {
	.b2b-kupit-karta a.btn-red {
		width: 100%;
	}
}

/* --- Страницы на вёрстке макета: вписываем в контейнер темы -----------------
   Макет свёрстан под свою ширину, а тема даёт свой контейнер. Без этих правил
   на телефоне контент выходит за правый край (проверено на «Ценах», 05.09.2026).
   64% трафика сайта — смартфоны, поэтому правила жёсткие. */

.bt-page {
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: clip;
}

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

.bt-page img,
.bt-page svg,
.bt-page video {
	max-width: 100%;
	height: auto;
}

/* сетки макета: на узких экранах — в одну колонку */
@media (max-width: 900px) {
	.bt-page .wrapb,
	.bt-page .pgh,
	.bt-page .pgh--hero,
	.bt-page .dgrid,
	.bt-page .dgrid--2,
	.bt-page .getway,
	.bt-page .factors,
	.bt-page .bsec > .row {
		display: block !important;
	}

	.bt-page .hfig,
	.bt-page .ph {
		margin-top: 18px;
	}
}

@media (max-width: 768px) {
	.bt-page {
		padding-left: 0;
		padding-right: 0;
	}

	/* кнопки макета на телефоне — во всю ширину и с переносом текста */
	.bt-page .btn,
	.bt-page .pgh__cta .btn,
	.bt-page .pricebox__act .btn {
		display: flex;
		width: 100%;
		max-width: 100%;
		justify-content: center;
		text-align: center;
		white-space: normal;
		margin: 0 0 10px;
	}

	.bt-page .pgh__cta,
	.bt-page .pricebox__act {
		display: block;
	}

	/* таблицы и широкие блоки — прокручиваются внутри себя, а не тянут страницу */
	.bt-page table,
	.bt-page .tbl {
		display: block;
		width: 100%;
		overflow-x: auto;
	}

	.bt-page h1,
	.bt-page .h1 {
		font-size: 28px;
		line-height: 1.15;
		word-break: break-word;
	}
}

@media (max-width: 480px) {
	.bt-page h1,
	.bt-page .h1 {
		font-size: 24px;
	}
}

/* --- Мобильная шапка: убираем горизонтальный вылет --------------------------
   Дефект был на сайте ДО наших правок: в верхней строке шапки телефон, почта
   и часы работы стоят в одну строку и на 390px не помещаются — страница
   уезжает вправо, текст обрезается. Разрешаем перенос и сжимаем шрифт. */

@media (max-width: 768px) {
	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
	}

	.whb-top-bar,
	.whb-top-bar-inner {
		max-width: 100%;
	}

	.whb-top-bar .whb-column,
	.whb-top-bar .wd-header-text {
		flex-wrap: wrap;
		max-width: 100%;
		min-width: 0;
	}

	.whb-top-bar .wd-header-text,
	.whb-top-bar .head_telefon,
	.whb-top-bar .head_telefon a {
		font-size: 13px;
		line-height: 1.3;
		white-space: normal;
		word-break: break-word;
	}

	/* правая колонка верхней строки — под левой, а не рядом */
	.whb-top-bar .whb-col-right {
		justify-content: flex-start;
		margin-top: 4px;
	}
}

/* ⭐ Причина горизонтального вылета на телефоне — найдена 05.09.2026.
   В шапке темы стоит картинка с жёстко прописанной шириной:
   <div class="head_img"><img style="width: 810px" …>
   На экране 390 px она растягивала всю страницу, из-за чего обрезались почта,
   часы работы и текст на всех страницах. Дефект был до наших правок. */

.head_img img {
	max-width: 100% !important;
	height: auto !important;
}

/* ⚠️ Селектор .whb-header img[style*="width"] здесь БЫЛ и его пришлось убрать:
   он ловил и логотип (у него в атрибуте style стоит max-width:280px) —
   логотип пропадал из шапки. Правим только конкретную картинку head_img. */

@media (max-width: 768px) {
	.head_img {
		max-width: 100%;
		overflow: hidden;
	}
}

/* Верхняя строка шапки на телефоне: почта и часы работы переносятся, а не
   выталкивают страницу вправо. Ограничиваем ширину колонок и разрешаем перенос. */

@media (max-width: 768px) {
	.whb-top-bar .whb-flex-row,
	.whb-top-bar-inner {
		flex-wrap: wrap;
		row-gap: 2px;
	}

	.whb-top-bar .whb-column {
		flex: 1 1 100%;
		max-width: 100%;
		min-width: 0;
		justify-content: flex-start;
	}

	.whb-top-bar .wd-header-text {
		max-width: 100%;
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.whb-top-bar a {
		overflow-wrap: anywhere;
	}
}

/* Контейнер темы на телефоне: не даём ему быть шире экрана.
   Именно он оставлял «хвост» справа после починки картинки 810px. */

@media (max-width: 1024px) {
	.container,
	.whb-header .container,
	.main-page-wrapper .container,
	.site-content {
		max-width: 100% !important;
		width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}

	.row {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	.row > [class*="col-"] {
		max-width: 100%;
		min-width: 0;
	}
}

/* Последний рубеж против горизонтального сдвига на телефоне.
   Ставится на обёртку сайта, а не на body: body с overflow:hidden ломает
   «липкую» шапку Woodmart. */

@media (max-width: 1024px) {
	.website-wrapper {
		max-width: 100%;
		overflow-x: clip;
	}
}

/* --- Цена в карточке товара ------------------------------------------------
   Режим каталога прячет цену штатно (товар «не продаваемый»), поэтому выводим
   её своим блоком. Цена — ключевой коммерческий сигнал и для покупателя, и для поиска. */

.b2b-cena-karta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 14px 0 4px;
}

.b2b-cena,
.b2b-cena .woocommerce-Price-amount,
.b2b-cena bdi {
	font: 800 30px/1.1 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	color: #CF000D;
	font-variant-numeric: tabular-nums;
}

.b2b-cena-podpis {
	font: 400 13px/1.3 'Golos', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	color: #6B7280;
}

/* ⚠️ ЗДЕСЬ БЫЛИ flex-правила для верхней строки шапки — УБРАНЫ 05.09.2026.
   Попытка разложить логотип / телефон / почту / кнопку через flex сломала
   раскладку: тема позиционирует эти элементы своими средствами, и телефон
   с почтой и часами работы наложились друг на друга.
   Вывод: раскладку шапки Woodmart нельзя перебивать flex-ом снаружи —
   она собирается конструктором Header Builder. Кнопка прайса возвращена
   на отдельную строку над шапкой, где она встаёт корректно. */


/* ========================================================================== *
   Правки 05.09.2026 по замечаниям владельца
   ========================================================================== */

/* Хлебные крошки на карточке товара и в категориях прижимались вплотную к меню —
   «от меню не видно его». Даём воздух под шапкой (на главной не нужно: там
   первым идёт свой блок с собственным отступом). */
body:not(.home) .bt-header + .main-page-wrapper,
body:not(.home) .bt-header + .main-page-wrapper > .container-fluid { padding-top: 14px; }
.wd-breadcrumbs, .woocommerce-breadcrumb { margin-top: 6px; }

/* Мега-меню «Каталог» разъезжалось на пол-экрана из-за длинных SEO-названий
   категорий. Ограничиваем ширину панели и колонок, длинные строки переносим. */
.bt-nd--mega .bt-mm__col { min-width: 0; }
.bt-nd .bt-mm__list a { overflow-wrap: anywhere; }

/* Страница «Контакты» лежит в теме на трёхколоночном шаблоне: наш блок попадал
   в колонку в треть ширины и сжимался в левый край. Растягиваем её на всю
   ширину (соседние колонки со старыми фото убираются в mu-plugin). */
.col-lg-4:has(> article .bt-page),
.col-lg-4:has(.bt-page) { flex: 0 0 100%; max-width: 100%; }

/* Поиск в шапке — это <form>, а тема вешает на формы свою рамку и отступы. */
form.hsearch { margin: 0; padding: 0; border: 1.5px solid var(--line); box-shadow: none; }
form.hsearch input[type="search"] { margin: 0; box-shadow: none; border-radius: 0; height: 34px; }
form.hsearch button { border-radius: 0; margin: 0; }


/* Телеграм — иконкой, ссылка на самой иконке (владелец 05.09.2026).
   Стоит в основной строке шапки: верхнюю полосу макет прячет уже на 1100px,
   и на телефоне иконки не было видно вовсе. */
.bt-root .hmain .bt-tg {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--red-050); color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; flex: none;
}
.bt-root .hmain .bt-tg:hover { background: var(--red); color: #fff; }
.bt-root .hmain .bt-tg svg { width: 20px; height: 20px; display: block; }
@media (max-width: 1100px) {
  .bt-root .hmain .bt-tg { width: 40px; height: 40px; border-radius: 9px; }
  .bt-root .hmain .bt-tg svg { width: 19px; height: 19px; }
}

/* Телеграм в подвале — иконка + подпись, ссылка на всём блоке
   (владелец 05.09.2026: «в подвале ссылка на телеграм сделана просто урлом»). */
.bt-root .foot__contacts a svg { fill: currentColor; }
.bt-root .foot__contacts a[href*="t.me"] svg { color: var(--red); }


/* Мега-меню «Каталог» разъезжалось во всю ширину экрана: панель у него
   position:absolute с left:0;right:0, а мега-пункт объявлен position:static —
   значит панель считает координаты от первого позиционированного предка.
   В нашей шапке такого предка не было, и им становился весь экран.
   Якорим панель к контейнеру сайта (владелец 05.09.2026: «должна выглядеть
   по ширине сайта, компактно, без лишнего воздуха»). */
.bt-root .hnav .wrapb { position: relative; }
/* панель тянется ровно по контейнеру сайта, ничем больше не обрезается */
.bt-root .bt-nd--mega > .bt-nd__panel { left: 0; right: 0; width: auto; max-width: none; }
.bt-root .bt-nd--mega > .bt-nd__panel { gap: 20px; padding: 20px 22px; }
.bt-root .bt-nd--mega .bt-mm__list { gap: 6px; }
.bt-root .bt-nd--mega .bt-mm__list a { padding: 5px 8px; font-size: 13.5px; }
.bt-root .bt-nd--mega .bt-mm__h { margin-bottom: 8px; padding-bottom: 6px; }
.bt-root .bt-nd--mega .bt-mm__promo { padding: 16px; }
.bt-root .bt-nd--mega .bt-mm__promo p { font-size: 12.5px; line-height: 1.45; }


/* Баннер на страницах категорий: текст — картинкой (решение владельца 05.09.2026,
   чтобы одинаковый текст на всех категориях не съедал релевантность). */
.bt-banner-kat .bt-banner-kat__tekst { width: 100%; max-width: 620px; height: auto; display: block; }
.bt-banner-kat .hcta { margin-top: 18px; }
@media (max-width: 1080px) { .bt-banner-kat .bt-banner-kat__tekst { max-width: 100%; } }


/* СВЯЗЬ НА ТЕЛЕФОНЕ (владелец 05.09.2026: «чтобы посетители могли позвонить,
   написать на почту либо в телеграм — и это работало на мобильных»).
   На узком экране макет прячет верхнюю полосу и развёрнутые контакты, поэтому
   в основной строке шапки держим три кнопки-действия одинакового вида. */
.bt-root .hmain .mmail {
  display: none; width: 42px; height: 40px; border-radius: 9px;
  background: var(--red-050); color: var(--red);
  align-items: center; justify-content: center; flex: none;
}
.bt-root .hmain .mmail svg { width: 20px; height: 20px; }
@media (max-width: 1100px) {
  .bt-root .hmain .mmail { display: flex; }
  .bt-root .hmain .mphone,
  .bt-root .hmain .mmail,
  .bt-root .hmain .bt-tg { width: 40px; height: 40px; border-radius: 9px; }
  .bt-root .hmain .wrapb { gap: 8px; }
  .bt-root .hmain .blogo { margin-right: auto; }
}
@media (max-width: 400px) {
  /* на самых узких экранах ужимаем кнопки, но оставляем все три */
  .bt-root .hmain .mphone,
  .bt-root .hmain .mmail,
  .bt-root .hmain .bt-tg { width: 36px; height: 36px; }
  .bt-root .hmain .mphone svg,
  .bt-root .hmain .mmail svg,
  .bt-root .hmain .bt-tg svg { width: 17px; height: 17px; }
}


/* Иконки-кнопки в шапке: svg внутри flex-кнопки сжимался по ширине —
   замер на живом сайте 05.09.2026 показал у бургера 4x24 вместо 24x24,
   из-за чего вместо трёх полосок была видна точка. Фиксируем размер. */
.bt-root .bt-burger svg,
.bt-root .hmain .bt-tg svg,
.bt-root .hmain .mmail svg,
.bt-root .hmain .mphone svg,
.bt-root .bt-mob__x svg {
  flex: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
}
.bt-root .bt-burger svg { width: 24px; height: 24px; min-width: 24px; }
@media (max-width: 400px) {
  .bt-root .hmain .bt-tg svg,
  .bt-root .hmain .mmail svg,
  .bt-root .hmain .mphone svg { width: 19px; height: 19px; min-width: 19px; }
}


/* Текст под витриной шёл во всю ширину страницы — вместе с колонкой фильтра.
   Замер на живом сайте 05.09.2026: текст left=124 w=1192, а сетка товаров
   left=420 w=907. Владелец: «должен быть на ширину витрины, так логичнее».
   Блок фильтра и текст — соседи внутри .entry-content, поэтому привязываем
   текст к правой колонке той же сеткой (3 из 12 под фильтр, 9 под витрину). */
@media (min-width: 1025px) {
  .entry-content .main_filtr_prod ~ .stext_s,
  .entry-content .main_filtr_prod ~ .stext_n {
    /* ряд «фильтр + витрина» шире .entry-content на 30px (у .row margin: 0 -15px),
       поэтому к 25% добавляем половину этого выноса */
    margin-left: calc(25% + 7.5px);
  }
}


/* Кнопка прайса рядом с телефоном — требование владельца: она закрывает находку
   «нулевое число скачиваний прайса». Подпись короткая — «Прайс-лист», чтобы кнопка
   не была громоздкой. Макет прячет её на узких экранах, но именно там теряется
   больше всего скачиваний, поэтому на телефоне она тоже остаётся. */
.bt-root .hmain .hpricebtn { padding: 11px 16px; }
@media (max-width: 1100px) {
  .bt-root .hmain .hpricebtn { display: inline-flex; padding: 10px 14px; font-size: 13px; }
}
@media (max-width: 760px) {
  .bt-root .hmain .hpricebtn { display: inline-flex; padding: 9px 12px; font-size: 12.5px; }
}
@media (max-width: 520px) {
  /* Совсем узкий экран. Владелец: на телефоне должны быть видны и работать
     телефон, почта и телеграм, плюс кнопка прайса. Чтобы поместилось всё,
     место освобождаем не за счёт связи, а за счёт подписи у логотипа —
     остаётся фирменный куб. */
  .bt-root .hmain .blogo .t { display: none; }
  .bt-root .hmain .wrapb { gap: 6px; }
  .bt-root .hmain .hpricebtn { padding: 9px 10px; font-size: 12px; }
  .bt-root .hmain .mphone,
  .bt-root .hmain .mmail,
  .bt-root .hmain .bt-tg { width: 34px; height: 34px; }
  .bt-root .hmain .mphone svg,
  .bt-root .hmain .mmail svg,
  .bt-root .hmain .bt-tg svg { width: 17px; height: 17px; min-width: 17px; }
  .bt-root .hmain .bt-burger { width: 38px; height: 34px; }
}


/* Кнопка прайса в промо-блоке мега-меню: «прайс-лист» рвался по дефису
   («СКАЧАТЬ ПРАЙС-» / «ЛИСТ»). Держим слово целиком — оно уходит на вторую
   строку одним куском (владелец 05.09.2026). */
.bt-root .bt-nowrap { white-space: nowrap; }
.bt-root .bt-mm__promo .btn { text-align: center; line-height: 1.35; gap: 8px; }
/* svg внутри flex-кнопки сжимался по ширине до нуля — фиксируем размер
   (та же беда, что была у бургера, см. правку выше) */
.bt-root .bt-mm__promo .btn svg,
.bt-root .hmain .hpricebtn svg,
.bt-root .hcta .btn svg {
  flex: none; width: 18px; height: 18px; min-width: 18px;
}