/* Переменные объявляем на :root: блоки вроде сайдбара каталога и подвала
   живут вне .pb-page, а цвета им нужны те же. */
:root {
	--pb-accent: var(--wd-primary-color, #007cd6);
	--pb-dark: var(--wd-title-color, #141c1a);
	--pb-text: #222;
	--pb-muted: #222;
	--pb-line: #e4e9e8;
	--pb-surface: #f0f2f5;
}

/* Основной текст по всему сайту — чёрный, а не серый. */
body {
	color: var(--pb-text, #222);
}
/**
 * Общие стили страниц, перенесённых с prom-baki.ru.
 * Цвета и типографику берём из переменных Woodmart, чтобы блоки
 * не расходились с остальным сайтом. Всё вложено в .pb-page.
 */

.pb-page {
	--pb-accent: var(--wd-primary-color, #007cd6);
	--pb-dark: var(--wd-title-color, #141c1a);
	--pb-muted: #222;
	--pb-line: #e4e9e8;
	--pb-surface: #f0f2f5;

	margin-block: 50px;
	line-height: 1.6;
}

/* --------------------------------------------------------------- *
 * Текстовые блоки
 * --------------------------------------------------------------- */

.pb-lead {
	margin: 0 0 24px;
	font-size: 18px;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--pb-muted);
}

.pb-prose > :first-child {
	margin-block-start: 0;
}

.pb-prose > :last-child {
	margin-block-end: 0;
}

.pb-prose p {
	margin: 0 0 16px;
}

.pb-prose h2 {
	margin: 40px 0 16px;
	font-size: 26px;
	line-height: 1.3;
	color: var(--pb-dark);
}

.pb-prose h3 {
	margin: 32px 0 12px;
	font-size: 20px;
	line-height: 1.35;
	color: var(--pb-dark);
}

.pb-prose ul,
.pb-prose ol {
	margin: 0 0 16px;
	padding-inline-start: 22px;
}

/* Woodmart сбрасывает маркеры списков — возвращаем их в текстовых блоках. */
.pb-prose ul {
	list-style: disc outside;
}

.pb-prose ol {
	list-style: decimal outside;
}

.pb-prose li {
	margin-block-end: 10px;
}

.pb-prose li:last-child {
	margin-block-end: 0;
}

.pb-prose strong {
	color: var(--pb-dark);
}

.pb-prose .pb-list li {
	margin-block-end: 14px;
}

.pb-figure {
	margin: 0 0 20px;
}

.pb-figure--portrait {
	max-inline-size: 320px;
}

.pb-figure--wide {
	margin-block-start: 32px;
}

.pb-figure__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.pb-figure figcaption {
	margin-block-start: 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--pb-muted);
}

/* --------------------------------------------------------------- *
 * Секции
 * --------------------------------------------------------------- */

.pb-section {
	margin-block-start: 60px;
}

.pb-section__title {
	position: relative;
	margin: 0 0 40px;
	padding-block-end: 20px;
	font-size: 32px;
	line-height: 1.3;
	text-transform: uppercase;
	text-align: center;
	color: var(--pb-dark);
}

.pb-section__title::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: 0;
	inline-size: 64px;
	block-size: 3px;
	margin-inline-start: -32px;
	background: var(--pb-accent);
}

.pb-section__action {
	margin: 30px 0 0;
	text-align: center;
}

/* --------------------------------------------------------------- *
 * Сквозной блок «Возникли вопросы?»
 * --------------------------------------------------------------- */

.pb-cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 24px 40px;
	margin-block-start: 60px;
	padding: 40px 60px;
	background: var(--pb-surface);
}

.pb-cta__text {
	flex: 1 1 320px;
}

.pb-cta__title {
	margin: 0;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--pb-accent);
}

.pb-cta__subtitle {
	margin: 4px 0 0;
	font-size: 24px;
	line-height: 1.4;
	color: var(--pb-dark);
}

.pb-cta__action {
	flex: 0 0 auto;
}

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

@media (max-width: 1024px) {
	.pb-cta {
		padding: 30px;
	}

	.pb-cta__title,
	.pb-cta__subtitle {
		font-size: 20px;
	}

	.pb-section__title {
		font-size: 26px;
	}
}

@media (max-width: 575px) {
	.pb-page {
		margin-block: 30px;
	}

	.pb-prose h2 {
		font-size: 22px;
	}

	.pb-prose h3 {
		font-size: 18px;
	}

	.pb-section__title {
		font-size: 22px;
	}

	.pb-cta {
		padding: 24px 20px;
	}

	.pb-cta__action .btn {
		inline-size: 100%;
	}
}

/* --------------------------------------------------------------- *
 * Вторичная кнопка
 * Один стиль на весь сайт: спокойная обводка, при наведении
 * рамка и текст становятся фирменного синего.
 * --------------------------------------------------------------- */

.pb-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	inline-size: auto;
	min-block-size: 42px;
	margin: 0;
	padding: 0 22px;
	border: 1px solid var(--pb-line);
	border-radius: var(--wd-form-brd-radius, 0px);
	background: transparent;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--pb-dark);
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}

.pb-btn-ghost:hover,
.pb-btn-ghost:focus-visible {
	border-color: var(--pb-accent);
	background: transparent;
	color: var(--pb-accent);
}

.pb-btn-ghost:disabled {
	opacity: .45;
	cursor: default;
}

/* На тёмном фоне та же кнопка светлая. */
.pb-btn-ghost--light {
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
}

.pb-btn-ghost--light:hover,
.pb-btn-ghost--light:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

/* Ссылка-кнопка внутри текста: без обводки, но с тем же поведением. */
/* Второстепенная кнопка: «Читать отзыв целиком», «Читать полностью» и т. п.
   Рамка и синий текст на наведении — как у остальных кнопок сайта. */
.pb-btn-text,
.pb-review__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 42px;
	margin: 0;
	padding: 0 22px;
	border: 1px solid var(--pb-line);
	border-radius: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--pb-dark);
	cursor: pointer;
	transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.pb-btn-text:hover,
.pb-btn-text:focus-visible,
.pb-review__more:hover,
.pb-review__more:focus-visible {
	border-color: var(--pb-accent);
	background: transparent;
	color: var(--pb-accent);
	text-decoration: none;
}

/* Вступительный текст страницы и следующий за ним блок не должны слипаться. */
.pb-page__intro,
.pb-page > .pb-prose + section,
.pb-page > .pb-prose + .pb-section {
	margin-block-start: 50px;
}


/* --------------------------------------------------------------- *
 * Благодарственные письма: единый вид на всех страницах
 * --------------------------------------------------------------- */

.pb-gallery--letters .pb-gallery__item {
	list-style: none;
	position: relative;
	aspect-ratio: var(--pb-ratio, 3 / 4);
	padding: 10px;
	border: 1px solid var(--pb-line, #e4e9e8);
	border-radius: 0;
	background: #fff;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* Рамка живёт на плитке, а зум обрезается по внутреннему полю ссылки —
   поэтому при увеличении картинки рамка и белые поля остаются на месте. */
.pb-gallery--letters .pb-gallery__link {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: auto;
	padding: 0;
	border: 0;
	background: none;
	overflow: hidden;
}

.pb-gallery--letters .pb-gallery__img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain;
	display: block;
}

.pb-gallery--letters .pb-gallery__item:hover,
.pb-gallery--letters .pb-gallery__item:focus-within {
	border-color: var(--pb-accent, #007cd6);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .09);
	transform: translateY(-3px);
}

.pb-page .pb-letters,
.pb-page .pb-cat-scans,
.pb-letters,
.pb-cat-scans {
	margin-block-start: 66px;
}

.pb-letters .pb-section__title,
.pb-cat-scans .pb-section__title {
	margin-block-end: 26px;
}

@media (max-width: 767px) {

	.pb-page .pb-letters,
	.pb-page .pb-cat-scans,
	.pb-letters,
	.pb-cat-scans {
		margin-block-start: 44px;
	}
}

/* --------------------------------------------------------------- *
 * Мессенджеры рядом с телефонами в шапке
 * --------------------------------------------------------------- */

/* Мессенджеры — последний пункт главного меню, прижаты к правому краю
   строки. Так они идут в строку и ничего не добавляют к высоте шапки. */
.pb-head-soc-item {
	display: flex;
	align-items: center;
	margin-inline-start: auto;
	padding-inline-start: 24px;
}

.pb-head-soc {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pb-head-soc__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	opacity: .85;
	transition: transform .2s ease, opacity .2s ease;
}

.pb-head-soc__item:hover,
.pb-head-soc__item:focus-visible {
	opacity: 1;
	transform: translateY(-2px);
}

.pb-head-soc__item .pb-soc__img {
	display: block;
	inline-size: 22px;
	block-size: 22px;
	object-fit: contain;
}

/* Пункт-обёртка не должен вести себя как обычный пункт меню. */
.wd-nav-main > .pb-head-soc-item > a,
.pb-head-soc-item::after {
	display: none;
}

@media (max-width: 1024px) {

	.pb-head-soc-item {
		padding-inline-start: 12px;
	}

	.pb-head-soc__item .pb-soc__img {
		inline-size: 20px;
		block-size: 20px;
	}
}

/* Демо-иконки темы в шапке вели на «#» — убираем. */
.whb-header .wd-social-icons {
	display: none;
}

/* --------------------------------------------------------------- *
 * Карточка товара: ховер как у плиток на главной, а не вудмартовский
 * --------------------------------------------------------------- */

/* Вудмартовская подложка с тенью и пустой hover-слой не нужны.
   Обёртка «в корзину» пустая (кнопка своя), но как flex-элемент
   добирала gap и удлиняла карточку — тоже убираем. */
.wd-product .wd-product-card-bg,
.wd-product .wd-product-card-hover,
.wd-product .wd-add-btn-wrapp {
	display: none !important;
}

.wd-product .wp-block-wd-li-product-card {
	block-size: 100%;
	border: 1px solid var(--pb-line, #e4e9e8);
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.wd-product:hover .wp-block-wd-li-product-card,
.wd-product:focus-within .wp-block-wd-li-product-card {
	border-color: var(--pb-accent, #007cd6);
	box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
}

/* Картинка во всю ширину карточки, текст — с полями, как у плиток. */
.wd-product .wd-product-card-static {
	padding-block-end: 20px;
}

.wd-product .wd-product-card-static > *:not(.wd-loop-prod-thumb) {
	padding-inline: 20px;
}

.wd-product .wd-loop-prod-thumb {
	position: relative;
	overflow: hidden;
	background: var(--pb-surface, #f0f2f5);
}

.wd-product .wd-loop-prod-thumb img {
	inline-size: 100%;
	block-size: auto;
	transition: transform .45s ease;
}

.wd-product:hover .wd-loop-prod-thumb img,
.wd-product:focus-within .wd-loop-prod-thumb img {
	transform: scale(1.06);
}

.wd-product .wd-loop-prod-title a {
	transition: color .2s ease;
}

.wd-product:hover .wd-loop-prod-title a,
.wd-product:focus-within .wd-loop-prod-title a {
	color: var(--pb-accent, #007cd6);
}

@media (prefers-reduced-motion: reduce) {

	.wd-product .wd-loop-prod-thumb img {
		transition: none;
	}

	.wd-product:hover .wd-loop-prod-thumb img {
		transform: none;
	}
}

/* --------------------------------------------------------------- *
 * Контакты в шапке: кликабельный телефон и кнопка копирования
 * --------------------------------------------------------------- */

.whb-header .pb-tel {
	color: inherit;
}

.whb-header .pb-tel:hover,
.whb-header .pb-tel:focus-visible {
	color: var(--pb-accent, #007cd6);
}

.pb-copy {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 20px;
	block-size: 20px;
	min-block-size: 0;
	margin-inline-start: 6px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: none;
	color: #8a949e;
	vertical-align: middle;
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease;
}

.pb-copy:hover,
.pb-copy:focus-visible {
	color: var(--pb-accent, #007cd6);
	background: rgba(0, 124, 214, .09);
}

.pb-copy.is-done {
	color: #2e9e5b;
}

.pb-copy__done {
	position: absolute;
	inset-block-end: calc(100% + 6px);
	inset-inline-start: 50%;
	translate: -50% 0;
	padding: 3px 8px;
	border-radius: 3px;
	background: #242424;
	color: #fff;
	font-size: 11px;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.pb-copy.is-done .pb-copy__done {
	opacity: 1;
}

/* Логотип на главной никуда не ведёт — ссылка на саму себя не нужна. */
.home .site-logo a,
.home .wd-logo {
	pointer-events: none;
}

/* Пункт меню без адреса ведёт себя как обычный пункт. */
.wd-nav-main > li > a[role="button"] {
	cursor: default;
}

/* --------------------------------------------------------------- *
 * Длинные перечни типоразмеров — в несколько колонок
 * --------------------------------------------------------------- */

.pb-prose .pb-cols {
	columns: 5 150px;
	column-gap: 24px;
	margin-block: 14px 26px;
	padding-inline-start: 20px;
}

.pb-prose .pb-cols li {
	break-inside: avoid;
	margin-block-end: 4px;
}

/* --------------------------------------------------------------- *
 * Выпадающий каталог: плотнее и темнее, одним списком
 * --------------------------------------------------------------- */

.wd-nav-main .wd-dropdown-menu {
	background: var(--pb-surface, #f0f2f5);
	padding: 0;
}

.wd-nav-main .wd-dropdown-menu .container {
	padding-block: 0;
	padding-inline: 0;
}

.wd-nav-main .wd-sub-menu {
	background: var(--pb-surface, #f0f2f5);
	border: 0;
}

.wd-nav-main .wd-sub-menu > li > a {
	padding-block: 11px;
	padding-inline: 18px;
	color: var(--pb-dark, #242424);
	font-weight: 500;
	border-block-end: 1px solid rgba(0, 0, 0, .06);
	transition: background-color .18s ease, color .18s ease;
}

.wd-nav-main .wd-sub-menu > li:last-child > a {
	border-block-end: 0;
}

.wd-nav-main .wd-sub-menu > li > a:hover,
.wd-nav-main .wd-sub-menu > li > a:focus-visible {
	background: #fff;
	color: var(--pb-accent, #007cd6);
}


/* Второй и третий уровень каталога выглядят так же, как первый:
   тема отдаёт их белыми панелями с рамкой-отступом. */
.wd-nav-main .wd-dropdown-menu .sub-sub-menu {
	padding: 0;
	border: 0;
	background: var(--pb-surface, #f0f2f5);
	/* Отступ в 20px тема держала под свои внутренние поля панели.
	   Полей больше нет — колонки должны стоять вплотную. */
	margin-inline-start: 0;
}

.wd-nav-main .sub-sub-menu > li > a {
	padding-block: 11px;
	padding-inline: 18px;
	color: var(--pb-dark, #242424);
	font-weight: 500;
	border-block-end: 1px solid rgba(0, 0, 0, .06);
	transition: background-color .18s ease, color .18s ease;
}

.wd-nav-main .sub-sub-menu > li:last-child > a {
	border-block-end: 0;
}

.wd-nav-main .sub-sub-menu > li > a:hover,
.wd-nav-main .sub-sub-menu > li > a:focus-visible {
	background: #fff;
	color: var(--pb-accent, #007cd6);
}

/* --------------------------------------------------------------- *
 * Шапка служебных страниц: вместо тёмной картинки — светлая полоса
 * --------------------------------------------------------------- */

.wd-page-title .wd-page-title-bg {
	display: none;
}

.wd-page-title {
	background: var(--pb-surface, #f0f2f5) !important;
}

.wd-page-title.color-scheme-light,
.wd-page-title.color-scheme-light .entry-title,
.wd-page-title.color-scheme-light .wd-breadcrumbs,
.wd-page-title.color-scheme-light .yoast-breadcrumb,
.wd-page-title.color-scheme-light .yoast-breadcrumb a,
.wd-page-title.color-scheme-light .breadcrumb_last {
	color: var(--pb-dark, #242424) !important;
}

.wd-page-title.color-scheme-light .yoast-breadcrumb a:hover {
	color: var(--pb-accent, #007cd6);
}

/* Крошки тоже тёмные, как и остальной текст. */
.yoast-breadcrumb,
.yoast-breadcrumb a,
.wd-breadcrumbs,
.wd-breadcrumbs a {
	color: var(--pb-text, #222);
}

.yoast-breadcrumb a:hover,
.wd-breadcrumbs a:hover {
	color: var(--pb-accent, #007cd6);
}

/* --------------------------------------------------------------- *
 * Вкладки с таблицами (страница «Закупка металла»)
 * --------------------------------------------------------------- */

.pb-tabs {
	margin-block: 18px 36px;
}

.pb-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: 20px;
}

.pb-tabs__tab {
	-webkit-appearance: none;
	appearance: none;
	min-block-size: 44px;
	margin: 0;
	padding: 10px 18px;
	border: 1px solid #d7dee7;
	border-radius: 0;
	background: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pb-dark, #242424);
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.pb-tabs__tab:hover {
	border-color: var(--pb-accent, #007cd6);
	color: var(--pb-accent, #007cd6);
}

.pb-tabs__tab:focus-visible {
	outline: 2px solid var(--pb-accent, #007cd6);
	outline-offset: 2px;
}

.pb-tabs__tab[aria-selected="true"] {
	border-color: var(--pb-accent, #007cd6);
	background: var(--pb-accent, #007cd6);
	color: #fff;
}

.pb-tabs__panel:focus-visible {
	outline: 2px solid var(--pb-accent, #007cd6);
	outline-offset: 4px;
}

/* Пока скрипт не отработал, страница остаётся обычным текстом:
   заголовки разделов видны, все таблицы на месте. */
.pb-tabs.is-ready .pb-tabs__panel-title {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* На узком экране полоса вкладок прокручивается, а не ломается. */
@media (max-width: 575px) {
	.pb-tabs__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding-block-end: 6px;
	}

	.pb-tabs__tab {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

/* --------------------------------------------------------------- *
 * Мобильное меню
 * --------------------------------------------------------------- */

/* Тема дописывает в бургер блок «Мой аккаунт» с личным кабинетом
   WooCommerce. Магазина и регистрации на сайте нет — убираем. */
.wd-nav-mobile > .menu-item-account {
	display: none;
}