/* ============================================================================
   КАРТОЧКА ТОВАРА (single product) — переодеваем ЖИВУЮ вёрстку Woodmart
   в вид макета karta-tovara.html. Разметка не меняется, только стили.

   ПРОВЕРЕННЫЕ ФАКТЫ (сняты 05.09.2026 по tov_live.html и по файлам сайта):
   1) Порядок загрузки (из <link> живой страницы):
      #1  woodmart-new/css/style-new.css      ← СВОЙ КАСТОМ САЙТА, 53 правила
                                                вида `body.single-product ...`
      #12-15 woodmart-child/bt/assets/css/{styles,menu,vnedrenie,tovar}.css
      #17-70 woodmart-new/css/parts/*.min.css ← тема грузится ПОСЛЕ нас
      Значит: тему перевешиваем ТОЛЬКО специфичностью, а style-new.css —
      специфичностью же (он грузится раньше, но у него селекторы длинные).
      Проверено: curl style-new.css → 200, 37910 байт, файл идентичен
      локальной копии дизайн/theme.css.
   2) Класс .single-product-page встречается в html РОВНО ОДИН РАЗ — на
      обёртке #product-22634. Шапка, подвал и другие страницы не затронуты.
      Всё, что нужно карточке (вкладки, отзывы, FAQ, «Похожие товары»),
      лежит ВНУТРИ этой обёртки — проверено разбором вложенности.
   3) На странице работают три СВОИ jQuery-механики (инлайн-скрипты):
      — FAQ: ответы скрываются slideUp() и открываются по клику;
      — отзывы: клик по .comment-text вешает .com_active и раскрывает текст;
      — категории: клик по .meta-sep:nth-child(5) вешает .active_postin.
      Поэтому НИ ОДНО правило ниже не трогает display у этих узлов.
   4) !important не используется нигде — он не нужен.

   Цвета: красный #CF000D, графит #16181D, фон #FAFAF9, линия #E4E4E7.
   ============================================================================ */

/* Шрифт дизайн-системы на всей карточке. Цвет текста НЕ задаём на обёртке
   намеренно: внутри неё лежит карусель «Похожие товары», её текст красит
   блок витрины — не перекрашиваем чужой блок наследованием. */
.single-product-page {
	font-family: 'Golos', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* --- ХЛЕБНЫЕ КРОШКИ ---------------------------------------------------------
   Мелкая приглушённая строка, текущая страница — графитом.
   Перевешиваем `body .woocommerce-breadcrumb a{color:#262626}` из style-new.css. */
.single-product-page .wd-breadcrumbs .woocommerce-breadcrumb {
	font-size: 13px;
	line-height: 1.4;
	color: #6B7480;
}

.single-product-page .wd-breadcrumbs .woocommerce-breadcrumb a.breadcrumb-link {
	color: #6B7480;
	transition: color .15s ease;
}

.single-product-page .wd-breadcrumbs .woocommerce-breadcrumb a.breadcrumb-link:hover {
	color: #CF000D;
}

.single-product-page .wd-breadcrumbs .woocommerce-breadcrumb .breadcrumb-last {
	color: #16181D;
	font-weight: 600;
}

/* --- ЗАГОЛОВОК ТОВАРА -------------------------------------------------------
   В макете (.tv-info h1) — Onest 800, 26px/1.16, letter-spacing -.01em.
   ⚠️ Селектор с .product-image-summary-inner нужен, чтобы перебить
   `body.single-product .product_title{font-size:24px;margin-bottom:30px}`
   из style-new.css (@media min-width:1024px) — без него правило не сработает
   на десктопе. */
.single-product-page .product-image-summary-inner .product_title {
	margin: 0 0 4px;
	font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	font-weight: 800;
	font-size: 26px;
	line-height: 1.16;
	letter-spacing: -.01em;
	color: #16181D;
}

/* --- ГАЛЕРЕЯ: белая карточка с рамкой ---------------------------------------
   Длинный селектор не для красоты: в style-new.css лежит
   `body.single-product .product-image-summary-inner .col-lg-6.product-images
    .product-images-inner{padding:30px}` — оно весомее короткого варианта,
   и padding из макета иначе не применится.
   Размеры самой картинки НЕ трогаем: на ней зум темы (image-action-zoom),
   плюс сайт сам ограничивает её `max-height:230px`. */
.single-product-page .container .product-image-summary-inner .col-lg-6.product-images .product-images-inner {
	padding: 22px;
	background: #fff;
	border: 1px solid #E4E4E7;
	border-radius: 16px;
}

.single-product-page .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	border-radius: 10px;
}

/* --- ПРАВАЯ КОЛОНКА = БЛОК ПОКУПКИ ------------------------------------------
   Значения один в один из макета (.tv-buy): белый фон, рамка, радиус 16,
   padding 20, тень --sh-1.
   ⚠️ .entry-summary в селекторе обязателен: у темы есть
   `.single-product-page .summary-inner{margin-bottom:-20px}` ровно той же
   специфичности, а тема грузится ПОСЛЕ нас — коротким селектором минусовый
   отступ не убрать, и карточка налезала бы на следующий блок. */
.single-product-page .entry-summary .summary-inner {
	margin-bottom: 0;
	padding: 20px;
	background: #fff;
	border: 1px solid #E4E4E7;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(20, 26, 35, .04), 0 10px 26px rgba(20, 26, 35, .06);
}

/* --- ЦЕНА -------------------------------------------------------------------
   На снятой странице цены нет (товар «Распродано»). Но узел подтверждён не
   догадкой: в style-new.css сайта есть собственное правило
   `body.single-product .summary-inner > .price{font-size:135%...}` —
   значит на товарах в наличии цена лежит именно тут. Его же и перевешиваем.
   В макете (.tv-buy__price b) цена ГРАФИТОВАЯ, не красная — 34px Onest 800. */
.single-product-page .entry-summary .summary-inner > .price {
	display: block;
	margin: 0 0 6px;
	font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	font-weight: 800;
	font-size: 34px;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: #16181D;
	font-variant-numeric: tabular-nums;
}

.single-product-page .entry-summary .summary-inner > .price del {
	margin-right: 10px;
	font-size: 18px;
	font-weight: 600;
	color: #6B7480;
}

.single-product-page .entry-summary .summary-inner > .price ins {
	text-decoration: none;
	color: #CF000D;
}

/* --- КНОПКА «КУПИТЬ» И ПОДПИСЬ ----------------------------------------------
   Корзины нет, кнопка остаётся и ведёт на /контакты/ — href правилами CSS
   не меняется, кнопка нигде не скрывается.
   ⚠️ Вид кнопки НЕ переопределяем: её уже красят комплект (.bt-root .btn /
   .btn-red) и наш vnedrenie.css (в т.ч. ховер `filter:brightness(1.08)`).
   Дублировать цвет, радиус и шрифт здесь — значит завести второй источник
   правды и отвязаться от переменных комплекта. Меняем только раскладку:
   кнопка на всю ширину блока покупки, подпись — строкой под ней. */
.single-product-page .entry-summary .summary-inner .b2b-kupit-karta {
	display: block;
	margin: 0 0 16px;
}

.single-product-page .entry-summary .summary-inner .b2b-kupit-karta a.btn-red {
	display: flex;
	width: 100%;
	min-width: 0;
}

.single-product-page .entry-summary .summary-inner .b2b-kupit-podpis {
	display: block;
	margin-top: 9px;
}

/* --- АРТИКУЛ И КАТЕГОРИИ ----------------------------------------------------
   Строка мета-данных: подпись приглушённая, значение графитом.
   Селектор с .entry-summary — чтобы перебить
   `body.single-product .summary-inner .product_meta{padding-top:15px;...}`
   из style-new.css. */
.single-product-page .entry-summary .summary-inner .product_meta {
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid #E4E4E7;
	font-size: 13px;
	color: #6B7480;
}

.single-product-page .entry-summary .summary-inner .product_meta > span {
	display: block;
	margin-bottom: 10px;
}

.single-product-page .entry-summary .summary-inner .product_meta > span:last-child {
	margin-bottom: 0;
}

.single-product-page .entry-summary .summary-inner .product_meta .meta-label {
	margin-right: 6px;
	color: #6B7480;
	font-weight: 400;
}

.single-product-page .entry-summary .summary-inner .product_meta .sku {
	color: #16181D;
	font-weight: 700;
}

/* Категории. ⚠️ display у ссылок и разделителей НЕ трогаем: на сайте работает
   своя раскрывашка — style-new.css прячет все ссылки, кроме 2-й и 4-й, а по
   клику на «шеврон» (.meta-sep:nth-child(5)) вешается .active_postin и
   показывает остальные. Любой display здесь ломает этот механизм и вываливает
   весь список категорий. Поэтому только типографика и цвет. */
.single-product-page .entry-summary .summary-inner .product_meta .posted_in a {
	color: #3C424B;
	font-weight: 600;
	transition: color .15s ease;
}

.single-product-page .entry-summary .summary-inner .product_meta .posted_in a:hover {
	color: #CF000D;
}

/* --- ПОЛОСА ВКЛАДОК «Описание / Характеристики / Отзывы …» ------------------
   Один в один с полосой якорей макета (.tv-anchors): Onest 600 14px,
   padding 15px 14px, нижняя черта 2px, активный и наведённый — красные,
   строка прокручивается по горизонтали без видимой полосы прокрутки. */
.single-product-page .product-tabs-wrapper {
	background: #FAFAF9;
	border-top: 1px solid #E4E4E7;
	border-bottom: 1px solid #E4E4E7;
}

.single-product-page .woocommerce-tabs .wd-nav-tabs-wrapper {
	overflow-x: auto;
	background: #fff;
	border-bottom: 1px solid #E4E4E7;
	text-align: left;
	scrollbar-width: none;
}

.single-product-page .woocommerce-tabs .wd-nav-tabs-wrapper::-webkit-scrollbar {
	display: none;
}

/* margin обнуляем намеренно: у .wd-nav темы поля -10px по --nav-gap, из-за них
   строка вкладок вылезала бы за белую полосу и давала бы лишнюю прокрутку. */
.single-product-page .woocommerce-tabs .wd-nav-tabs {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	margin: 0;
	white-space: nowrap;
}

.single-product-page .woocommerce-tabs .wd-nav-tabs > li:not(:last-child) {
	margin-right: 6px;
}

.single-product-page .woocommerce-tabs .wd-nav-tabs > li > a {
	padding: 15px 14px;
	border-bottom: 2px solid transparent;
	color: #3C424B;
	font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	text-transform: none;
	transition: color .15s ease;
}

.single-product-page .woocommerce-tabs .wd-nav-tabs > li > a:hover,
.single-product-page .woocommerce-tabs .wd-nav-tabs > li.active > a {
	color: #CF000D;
}

.single-product-page .woocommerce-tabs .wd-nav-tabs > li.active > a {
	border-bottom-color: #CF000D;
}

/* Бегущее подчёркивание стиля underline-reverse ГАСИМ, а не перекрашиваем.
   Тема ставит его на `top:-30px` под свой padding-top:30px; мы задали
   padding 15px, и полоска ушла бы выше ссылки — в чужое место. Активное
   состояние теперь рисует border-bottom выше. */
.single-product-page .woocommerce-tabs .wd-nav-tabs .nav-link-text:after {
	content: none;
}

/* --- СОДЕРЖИМОЕ ВКЛАДОК = КАРТОЧКИ МАКЕТА (.tv-card) ------------------------
   ⚠️ display панелей (.wc-tab / .woocommerce-Tabs-panel--*) не трогаем: их
   переключает скрипт темы, а на телефоне тот же скрипт превращает вкладки в
   гармошку. Любое вмешательство раскроет все вкладки разом. */
.single-product-page .woocommerce-tabs .wc-tab-inner {
	padding: 26px 28px;
	background: #fff;
	border: 1px solid #E4E4E7;
	border-radius: 16px;
}

/* Заголовки внутри вкладок (в т.ч. «Отзывы о…» и заголовки каруселей):
   23px Onest 800, как .tv-sec>h2 в макете. Специфичности хватает, чтобы
   перебить `body.single-product h3.slider-title{font-size:20px}` и
   `body.single-product .woocommerce-Reviews .woocommerce-Reviews-title
    .slider-title{margin-top:35px}` из style-new.css. */
.single-product-page .woocommerce-tabs .wc-tab-inner > h2,
.single-product-page .woocommerce-tabs .wc-tab-inner > h3,
.single-product-page .woocommerce-tabs .wc-tab-inner .title.slider-title {
	margin: 0 0 18px;
	font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	font-weight: 800;
	font-size: 23px;
	line-height: 1.2;
	letter-spacing: -.02em;
	text-transform: none;
	color: #16181D;
}

/* --- ВКЛАДКА «ОПИСАНИЕ» -----------------------------------------------------
   Из макета: текст 15px/1.68, список — 14px/1.45 с зелёной галочкой
   (var(--green) комплекта = #3F7D5B) вместо маркера. */
.single-product-page .woocommerce-Tabs-panel--description p {
	margin: 0 0 13px;
	font-size: 15px;
	line-height: 1.68;
	color: #3C424B;
}

.single-product-page .woocommerce-Tabs-panel--description p:last-child {
	margin-bottom: 0;
}

.single-product-page .woocommerce-Tabs-panel--description ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-product-page .woocommerce-Tabs-panel--description ul li {
	position: relative;
	margin: 0 0 11px;
	padding-left: 28px;
	font-size: 14px;
	line-height: 1.45;
	color: #3C424B;
}

.single-product-page .woocommerce-Tabs-panel--description ul li:last-child {
	margin-bottom: 0;
}

.single-product-page .woocommerce-Tabs-panel--description ul li:before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: #3F7D5B;
	font-weight: 700;
}

/* --- ВКЛАДКА «ХАРАКТЕРИСТИКИ» ----------------------------------------------
   Тема сама верстает атрибуты флексом через свои переменные (проверено в
   woo-mod-shop-attributes: tbody — grid по --wd-attr-col, tr — flex,
   нижняя черта по --wd-attr-brd-*). Пользуемся ими, а не ломаем таблицу.
   Значения из макета (.tv-chars): 2 колонки, зазор 40px, пунктир,
   подпись 46% приглушённая, значение — Golos 600 графитом.
   --wd-attr-v-gap:22px даёт padding-bottom 11px, как в макете. */
.single-product-page .woocommerce-tabs .shop_attributes {
	--wd-attr-col: 2;
	--wd-attr-v-gap: 22px;
	--wd-attr-h-gap: 40px;
	--wd-attr-brd-width: 1px;
	--wd-attr-brd-style: dashed;
	--wd-attr-brd-color: #E4E4E7;
	max-width: none;
	width: 100%;
}

.single-product-page .woocommerce-tabs .shop_attributes th.woocommerce-product-attributes-item__label {
	flex: 0 0 46%;
	margin-right: 12px;
	font-family: 'Golos', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #6B7480;
	text-align: left;
}

.single-product-page .woocommerce-tabs .shop_attributes td.woocommerce-product-attributes-item__value {
	flex: 1 1 auto;
	font-family: 'Golos', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #16181D;
	text-align: left;
}

.single-product-page .woocommerce-tabs .shop_attributes td.woocommerce-product-attributes-item__value p {
	margin: 0;
	line-height: 1.4;
}

/* --- ВКЛАДКА «ОТЗЫВЫ» ------------------------------------------------------
   Форма добавления отзыва на сайте уже закрыта (152-ФЗ, у .b2b-otzyv-zakryt
   стоит инлайновый display:none). Прячем и её пустую обёртку, чтобы не
   оставалась дыра. Ничего нового не показываем и никаких полей не заводим. */
.single-product-page .woocommerce-Tabs-panel--reviews #review_form_wrapper {
	display: none;
}

/* Снимаем двухколоночный флекс темы вместе с его полями -30px по бокам —
   именно они на телефоне дают горизонтальный сдвиг. */
.single-product-page .woocommerce-Reviews {
	display: block;
	margin: 0;
}

.single-product-page .woocommerce-Reviews > div {
	margin: 0;
	padding: 0;
}

/* Каждый отзыв — карточка с тонкой рамкой. Одна колонка: на сайте отзывы
   свёрнуты (виден только автор и дата) и разворачиваются по клику —
   в две колонки сетка прыгала бы при каждом раскрытии.
   ⚠️ display у .rev-title-com и .description НЕ задаём: ими управляет
   класс .com_active, который вешает свой скрипт сайта. */
.single-product-page .woocommerce-Reviews .commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-product-page .woocommerce-Reviews .commentlist > li,
.single-product-page .woocommerce-Reviews .commentlist > li:not(:last-child) {
	margin: 0 0 10px;
	padding: 14px 18px;
	border: 1px solid #E4E4E7;
	border-radius: 12px;
	background: #fff;
}

.single-product-page .woocommerce-Reviews .commentlist > li:last-child {
	margin-bottom: 0;
}

.single-product-page .woocommerce-Reviews .commentlist .comment_container {
	display: block;
	padding: 0;
}

.single-product-page .woocommerce-Reviews .commentlist .comment-text {
	display: block;
}

.single-product-page .woocommerce-Reviews .commentlist .meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0;
	font-size: 13px;
	color: #6B7480;
}

.single-product-page .woocommerce-Reviews .commentlist .meta strong.woocommerce-review__author {
	font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	color: #16181D;
}

/* padding-left:0 — гасим отступ из style-new.css, иначе к нашему gap 10px
   прибавляются ещё 10px. */
.single-product-page .woocommerce-Reviews .commentlist .meta time.woocommerce-review__published-date {
	padding-left: 0;
	font-style: normal;
	font-size: 12.5px;
	color: #6B7480;
	font-variant-numeric: tabular-nums;
}

/* Подпись «Комментарий:» — мелкой капслок-меткой, как eyebrow в макете */
.single-product-page .woocommerce-Reviews .commentlist .rev-title-com {
	margin: 10px 0 6px;
	padding-bottom: 0;
	font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6B7480;
}

.single-product-page .woocommerce-Reviews .commentlist .description p {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.6;
	color: #3C424B;
}

.single-product-page .woocommerce-Reviews .commentlist .description p:last-child {
	margin-bottom: 0;
}

/* --- ВКЛАДКА «ВОПРОСЫ-ОТВЕТЫ» ----------------------------------------------
   В живой вёрстке это микроданные FAQPage без классов — цепляемся за itemprop.
   ⚠️ Ответы скрывает и раскрывает jQuery (slideUp/slideToggle), поэтому
   display у [itemprop=acceptedAnswer] не трогаем ни при каких условиях.
   Стрелку ▾ (::after у strong) тоже оставляем — это единственная подсказка,
   что вопрос кликабельный. Свою серую плашку и рамки сайта гасим, иначе
   внутри карточки макета получаются коробки в коробках. */
.single-product-page .prod_faq {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 0;
}

.single-product-page .prod_faq > div[itemprop="mainEntity"] {
	margin-bottom: 0;
	padding: 16px 18px;
	border: 1px solid #E4E4E7;
	border-radius: 12px;
	background: #fff;
}

.single-product-page .prod_faq [itemprop="name"] {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	color: #16181D;
}

.single-product-page .prod_faq [itemprop="acceptedAnswer"] {
	padding: 0;
	border: 0;
	background: transparent;
}

.single-product-page .prod_faq [itemprop="text"] {
	padding-top: 10px;
	font-size: 14px;
	line-height: 1.6;
	color: #3C424B;
}

/* --- ЗАГОЛОВОК БЛОКА «Похожие товары» --------------------------------------
   Сами плитки товаров не трогаем: их оформление задаёт блок витрины. */
.single-product-page .related-and-upsells .title.slider-title {
	font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	font-weight: 800;
	font-size: 23px;
	line-height: 1.2;
	letter-spacing: -.02em;
	text-transform: none;
	color: #16181D;
}

/* ================= АДАПТИВ =================
   Ниже 1025px тема сама ставит галерею и блок покупки друг под друга, а
   вкладки её же скрипт превращает в гармошку — ломать это не нужно. */

/* Планшет: характеристики в одну колонку, карточки поджимаем (как .tv-card
   и .tv-chars в макете на узких экранах). */
@media (max-width: 1024px) {
	.single-product-page .woocommerce-tabs .shop_attributes {
		--wd-attr-col: 1;
		--wd-attr-v-gap: 16px;
	}

	.single-product-page .woocommerce-tabs .wc-tab-inner {
		padding: 20px;
	}
}

/* Телефон (64% трафика сайта): меньше отступов, заголовок короче,
   ничего не должно вылезать за правый край. */
@media (max-width: 768.98px) {
	.single-product-page .product-image-summary-inner .product_title {
		font-size: 21px;
	}

	.single-product-page .container .product-image-summary-inner .col-lg-6.product-images .product-images-inner {
		padding: 14px;
	}

	.single-product-page .entry-summary .summary-inner {
		padding: 16px;
	}

	.single-product-page .entry-summary .summary-inner > .price {
		font-size: 30px;
	}

	.single-product-page .woocommerce-tabs .wc-tab-inner {
		padding: 16px;
	}

	.single-product-page .prod_faq > div[itemprop="mainEntity"] {
		padding: 14px 15px;
	}

	.single-product-page .woocommerce-Reviews .commentlist > li,
	.single-product-page .woocommerce-Reviews .commentlist > li:not(:last-child) {
		padding: 13px 15px;
	}
}