/* =====================================================================
   YPonton — редизайн карточки товара (single product).
   Загружается ТОЛЬКО на is_product() (см. functions.php ypi_enqueue_product_card_assets).
   Дизайн-токены и вёрстка — по ТЗ design_handoff_product_card/README.md.
   Стратегия: CSS-first поверх существующей разметки content-single-product.php.
   Этап 1 — только дизайн-токены (визуально страницу не меняет). Вёрстка добавляется
   поэтапно (раскладка → блок покупки → галерея → табы → адаптив).
   ===================================================================== */

:root {
	--ypc-navy:          #0d1b33; /* тёмно-синий, основной текст/заголовки */
	--ypc-orange:        #f78e1f; /* акцент */
	--ypc-orange-hover:  #e07e12; /* hover акцентных кнопок */
	--ypc-orange-dark:   #c9761a; /* тёмный оранжевый текст на светлом */
	--ypc-tint-1:        #fdeede; /* оранжевый тинт (галочки списка) */
	--ypc-tint-2:        #fff2e2; /* оранжевый тинт («мало на складе») */

	--ypc-text:          #3f4a5c; /* основной текст */
	--ypc-text-muted:    #6b7688; /* приглушённый */
	--ypc-text-faint:    #8a93a2; /* бледный (подписи, крошки) */

	--ypc-border:        #e6eaf0;
	--ypc-border-2:      #eef1f5;
	--ypc-border-3:      #d7dde5;

	--ypc-bg-soft:       #fbfcfe;
	--ypc-bg-soft-2:     #f4f6f9;

	--ypc-success:       #1b8a4b; /* «В наличии» текст */
	--ypc-success-bg:    #e7f6ec; /* «В наличии» фон */
	--ypc-star-empty:    #d7dde5;

	/* сетка */
	--ypc-content-max:   1240px;
	--ypc-sheet-max:     1600px;

	/* тени */
	--ypc-shadow-sheet:  0 34px 90px rgba(13,27,51,.14);
	--ypc-shadow-photo:  0 20px 50px rgba(13,27,51,.14);
	--ypc-shadow-hover:  0 16px 40px rgba(13,27,51,.10);

	/* шрифты */
	--ypc-font-head: 'Montserrat', 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ypc-font-body: 'Manrope', 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* =====================================================================
   Этап 2 — раскладка.
   Тема-«лист» = #content.site-content.fixed (max-width ~1590px, центр) — оставляем как есть.
   Контент товара заполняет ширину .site-content-inner (~1500px) — тем самым левый/правый
   край карточки совпадают с шапкой (по фидбеку клиента 2026-07-02: НЕ сужаем до 1240,
   иначе карточка получала лишний левый отступ ~130px относительно навигации шапки).
   Колонка «галерея|покупка» — grid 1fr/1fr gap 60px.
   ===================================================================== */

/* Контент товара — на всю ширину «листа» (выравнивание по шапке, без доп. центровки). */
.single-product .site-content-inner > div.product {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Сетка «галерея | покупка». */
.single-product .product-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px 50px;
	align-items: start;
	margin-bottom: 40px;
}

/* Сброс старых flex-размеров колонок (были flex:0 0 42% + margin-right:70px и flex-grow:1). */
.single-product .product-container > .product-images,
.single-product .product-container > .product-info {
	-webkit-box-flex: 0;
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	width: auto;
	max-width: none;
	min-width: 0; /* не даёт длинному контенту распирать grid-ячейку */
	margin: 0;
}

/* Крошки — на всю ширину над сеткой (первый ребёнок .product-container, span всех колонок). */
.single-product .product-container > .woocommerce-breadcrumb {
	grid-column: 1 / -1;
	font-size: 14px;
	color: var(--ypc-text-faint);
	margin: 0 0 16px;
}

/* Базовый mobile-guard (полноценный адаптив — Этап 6): на узких колонка в один столбец. */
@media (max-width: 900px) {
	.single-product .product-container {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* =====================================================================
   Этап 3 — блок покупки (правая колонка .product-info).
   Всё строго под .product-info, чтобы НЕ задеть карточки related на этой же
   странице (у них тоже .price/.button).
   ===================================================================== */

.single-product .product-info { position: relative; }

/* H1 названия. */
.single-product .product-info > h1 {
	font-family: var(--ypc-font-head);
	font-weight: 800;
	font-size: 34px;
	line-height: 1.15;
	color: var(--ypc-navy);
	margin: 0 0 16px;
}

/* Цена + суффикс «/ шт. с учётом НДС 22%». */
.single-product .product-info .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 0;
}
.single-product .product-info .price .wpp-pr-wrap {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
}
.single-product .product-info .price .woocommerce-Price-amount {
	font-family: var(--ypc-font-head);
	font-weight: 800;
	font-size: 34px;
	line-height: 1.1;
	color: var(--ypc-navy);
}
.single-product .product-info .price .wpp_pr_desc {
	font-family: var(--ypc-font-body);
	font-weight: 500;
	font-size: 16px;
	color: var(--ypc-text-muted);
}

/* Бейдж артикула (плашку наличия убрали по фидбеку клиента 2026-07-02). */
.single-product .product-info .yp-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}
.single-product .product-info .yp-badge {
	font-family: var(--ypc-font-body);
	font-size: 14px;
	line-height: 1;
	padding: 7px 13px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.single-product .product-info .yp-badge--sku   { background: var(--ypc-border-2);    color: var(--ypc-text-muted); }
.single-product .product-info .yp-badge--sku .yp-badge__val { color: var(--ypc-navy); font-weight: 700; }

/* Короткое описание. */
.single-product .product-info .woocommerce-product-details__short-description {
	font-family: var(--ypc-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ypc-text);
	margin: 22px 0 26px;
}
.single-product .product-info .woocommerce-product-details__short-description p { margin: 0 0 10px; }
.single-product .product-info .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* -------- Строка «количество + в корзину» + вторичная строка -------- */
.single-product .product-info form.cart {
	display: grid;
	grid-template-columns: 176px 1fr auto; /* col1 = ширина счётчика → зазор до «В корзину» ровно gap 14px */
	gap: 14px;
	align-items: stretch;
	margin: 0;
}
.single-product .product-info form.cart .quantity            { grid-column: 1;     grid-row: 1; }
.single-product .product-info form.cart .single_add_to_cart_button { grid-column: 2 / 4; grid-row: 1; }
.single-product .product-info form.cart .aword-jump-to-questions   { grid-column: 1 / 3; grid-row: 2; margin-left: 0; }
.single-product .product-info form.cart .product-favorite-btn      { grid-column: 3;     grid-row: 2; }
.single-product .product-info form.cart .added_to_cart             { grid-column: 1 / -1; grid-row: 3; margin: 0; }

/* Счётчик количества: [−] [значение] [+]. */
.single-product .product-info form.cart .quantity {
	display: inline-flex;
	align-items: stretch;
	width: 176px;      /* 52 (−) + 72 (поле) + 52 (+) — перебиваем узкую ширину темы */
	flex: 0 0 auto;
	border: 1.5px solid var(--ypc-border);
	border-radius: 12px;
	height: 60px;
	overflow: hidden;
	background: #fff;
}
.single-product .product-info form.cart .quantity .qty {
	order: 2;
	flex: 0 0 72px;
	width: 72px;
	min-width: 0;
	height: 100%;
	border: 0;
	text-align: center;
	font-family: var(--ypc-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	color: var(--ypc-navy);
	background: transparent;
	-moz-appearance: textfield;
	padding: 0;
	cursor: text;
	pointer-events: auto;
}
.single-product .product-info form.cart .quantity .qty::-webkit-outer-spin-button,
.single-product .product-info form.cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single-product .product-info form.cart .quantity .quantity-minus,
.single-product .product-info form.cart .quantity .quantity-plus {
	position: static; /* тема ставит их absolute (наложение на поле) → возвращаем в поток */
	width: 52px;
	flex: 0 0 52px;
	border: 0;
	background: transparent;
	color: var(--ypc-navy);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transform: none;
}
.single-product .product-info form.cart .quantity .quantity-minus { order: 1; }
.single-product .product-info form.cart .quantity .quantity-plus  { order: 3; }
.single-product .product-info form.cart .quantity .quantity-minus:hover,
.single-product .product-info form.cart .quantity .quantity-plus:hover { color: var(--ypc-orange); }

/* Главная кнопка «В корзину · сумма». */
.single-product .product-info form.cart .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 240px;
	min-height: 60px;
	padding: 0 24px;
	background: var(--ypc-orange);
	color: #fff;
	border: none;
	border-radius: 12px;
	font-family: var(--ypc-font-body);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.1;
	cursor: pointer;
	transition: background .15s ease;
	text-align: center;
	box-shadow: none;
	margin: 0; /* тема вешает margin-top на .button → строка грида раздувалась до 70px, счётчик уезжал вверх */
}
/* Тема на .button:hover красит нутро белым inset-shadow'ом и текст в синий — гасим. */
.single-product .product-info form.cart .single_add_to_cart_button:hover {
	background: var(--ypc-orange-hover);
	color: #fff;
	box-shadow: none;
}
.single-product .product-info form.cart .single_add_to_cart_button::before {
	content: "";
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	background-color: #fff;
	-webkit-mask: var(--ypc-icon-cart) center / contain no-repeat;
	        mask: var(--ypc-icon-cart) center / contain no-repeat;
}

/* Вторичная кнопка «Задать вопрос по товару». */
.single-product .product-info form.cart .aword-jump-to-questions {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 58px;
	padding: 0 18px;
	background: #fff;
	color: var(--ypc-navy);
	border: 1.5px solid var(--ypc-border-3);
	border-radius: 12px;
	font-family: var(--ypc-font-body);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
	box-shadow: none;
}
.single-product .product-info form.cart .aword-jump-to-questions:hover {
	border-color: var(--ypc-orange);
	color: var(--ypc-orange-dark);
	box-shadow: none;
}

/* Кнопка «в избранное» — квадрат с сердцем. */
.single-product .product-info form.cart .product-favorite-btn {
	width: 58px;
	height: 58px;
	flex: 0 0 auto;
	background: #fff;
	border: 1.5px solid var(--ypc-border-3);
	border-radius: 12px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ypc-text-muted);
	font-size: 22px;
	transition: border-color .15s ease, color .15s ease;
}
/* Наведение: рамка + сам глиф ♥ заливаются оранжевым (гасим тему-hover #f43c33 и inset-shadow). */
.single-product .product-info form.cart .product-favorite-btn:hover {
	border-color: var(--ypc-orange);
	color: var(--ypc-orange);
	box-shadow: none;
}

/* Мета: показываем только «Категория» (артикул уже в бейдже сверху). */
.single-product .product-info .product_meta { margin-top: 22px; font-size: 14px; color: var(--ypc-text-faint); }
.single-product .product-info .product_meta .sku_wrapper { display: none; }
.single-product .product-info .product_meta .posted_in { display: block; }
.single-product .product-info .product_meta .posted_in a { color: var(--ypc-navy); text-decoration: none; }
.single-product .product-info .product_meta .posted_in a:hover { color: var(--ypc-orange); }

/* -------- Этап 6: узкий счётчик (<1200px).
   На <1200 колонка покупки тесная → делаем счётчик компактным: только [− NN +] (место под
   2-значное число), БЕЗ ручного ввода (pointer-events:none на поле). Грид col1 → auto (по ширине
   счётчика), «В корзину» (1fr) забирает освободившееся место → шире. Идёт ДО блока ≤560px, чтобы
   мобильная перестановка (grid-template-columns:1fr auto) его перебивала. -------- */
@media (max-width: 1199px) {
	.single-product .product-info form.cart { grid-template-columns: 118px 1fr auto; } /* col1 = ширина счётчика впритык */
	.single-product .product-info form.cart .quantity { width: 118px; }
	.single-product .product-info form.cart .quantity .qty {
		flex: 0 0 44px; width: 44px;
		pointer-events: none;      /* убираем ручной ввод — только +/- */
		cursor: default;
	}
	.single-product .product-info form.cart .quantity .quantity-minus,
	.single-product .product-info form.cart .quantity .quantity-plus { width: 37px; flex: 0 0 37px; }
}

/* 900–1000px: колонка покупки самая тесная → прячем сумму в кнопке, оставляем «В корзину». */
@media (min-width: 900px) and (max-width: 1000px) {
	.single-product .product-info form.cart .single_add_to_cart_button .yp-cart-sum { display: none; }
}

/* 768–1199px: тема капает контейнер `#content.site-content.fixed` до бутстрап-ширины (720/960px) +
   margin ~107px + padding 45px → на 950 контент был всего 630px, колонки по 290, блок консультации
   сжимался (текст/телефон в столбик). Снимаем кап и даём адекватные боковые отступы 24px.
   Нижняя граница 768: на мобиле (≤767) тема-паддинг уже адекватный, а flexslider там фиксирует
   ширину галереи по вьюпорту — сужать колонку нельзя (фото обрежется). */
@media (min-width: 768px) and (max-width: 1199px) {
	.single-product #content.site-content.fixed {
		max-width: none;
		margin-left: auto;
		margin-right: auto;
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* -------- Этап 6: мобильный блок покупки (≤560px).
   Десктоп-грид `176px 1fr auto` не влезает на телефон (кнопка min-width:240 вылезала за край).
   Раскладка: [счётчик | ♥] в ряд, «В корзину» на всю ширину ниже, «Задать вопрос» ещё ниже. -------- */
@media (max-width: 560px) {
	.single-product .product-info form.cart {
		grid-template-columns: 1fr auto; /* «Задать вопрос» | ♥ (для ряда 3) */
		gap: 12px;
	}
	/* Ряд1 — счётчик; ряд2 — «В корзину» на всю ширину; ряд3 — «Задать вопрос» + ♥. */
	.single-product .product-info form.cart .quantity            { grid-column: 1 / -1; grid-row: 1; }
	.single-product .product-info form.cart .single_add_to_cart_button {
		grid-column: 1 / -1; grid-row: 2;
		min-width: 0; width: 100%;
	}
	.single-product .product-info form.cart .aword-jump-to-questions { grid-column: 1;     grid-row: 3; margin-left: 0; }
	.single-product .product-info form.cart .product-favorite-btn    { grid-column: 2;     grid-row: 3; }
	.single-product .product-info form.cart .added_to_cart          { grid-column: 1 / -1; grid-row: 4; }

	/* H1 34px давал ~5 строк на узком — уменьшаем. */
	.single-product .product-info > h1 { font-size: 26px; }
}

/* Иконка корзины (маска). */
:root {
	--ypc-icon-cart: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>");
}

/* =====================================================================
   Этап 4 — Галерея (левая колонка .product-images).
   Перестилизуем ШТАТНУЮ галерею WooCommerce (flexslider + photoswipe),
   НЕ трогая её механику: ширины слайдов/обёртки и transform ставит сам
   flexslider инлайном — мы их не переопределяем. Меняем только рамку кадра
   (главное фото → 4/3, радиус, тень), миниатюры и строку подписи+счётчика.
   Всё строго под .single-product .product-images.
   ===================================================================== */

/* Тема кладёт галерею как flex-РЯД: миниатюры — узкая колонка 50px слева
   (order:1), большое фото справа (order:2). Нам нужен «стек»: фото сверху,
   ряд миниатюр снизу → отключаем flex у обёртки (display:block, дети встают
   в DOM-порядке: viewport → thumbs). */
.single-product .product-images .woocommerce-product-gallery { display: block; }

/* Рамка главного фото: viewport flexslider'а → окно 4/3 с радиусом и тенью.
   height:auto снимает инлайновую высоту flexslider'а, aspect-ratio держит 4/3. */
.single-product .product-images .flex-viewport {
	height: auto !important;
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: none; /* тень убрана по фидбеку клиента — падала на ряд миниатюр снизу */
	background: #fff;
}
/* Обёртка/слайды тянутся на высоту окна; изображение заполняет рамку (cover). */
.single-product .product-images .woocommerce-product-gallery__wrapper { height: 100% !important; }
.single-product .product-images .woocommerce-product-gallery__image {
	height: 100% !important;
	display: block;
}
.single-product .product-images .woocommerce-product-gallery__image > a {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}
/* Фото заполняет рамку «край-в-край» без полей: своя aspect-ratio 4/3 + object-fit:cover
   (не полагаемся на height:100% — flexslider плавает слайды, %-высота не каскадится). */
.single-product .product-images .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: none !important;
	aspect-ratio: 4 / 3;
	object-fit: cover !important;
	object-position: center;
	display: block;
}

/* Миниатюры (flex-control-thumbs): горизонтальный ряд 94×76, радиус 12,
   активная — оранж 3px. Перебиваем тему-грабли: контейнер был flex:0 0 50px /
   max-width:50px (узкая колонка), li — max-width:50px (инлайн-CSS темы), а
   глобальный img{max-width:100%} зажимал картинку по 50px-родителю. Поэтому
   явно снимаем flex/width/max-width на всех трёх уровнях. */
.single-product .product-images ol.flex-control-nav.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	flex: none;             /* было flex:0 0 50px */
	max-width: none;        /* было max-width:50px */
	width: auto;
	order: 0;               /* было order:1 (слева от фото) */
}
.single-product .product-images .flex-control-thumbs li {
	margin: 0 !important;   /* тема даёт margin-bottom:15px */
	width: 94px !important;
	max-width: 94px !important;
	height: 76px !important;
	flex: 0 0 94px;
	float: none;
}
.single-product .product-images .flex-control-thumbs img {
	width: 94px !important;
	max-width: 94px !important;   /* перебиваем глобальный img{max-width:100%} */
	height: 76px !important;
	object-fit: cover;            /* фото заполняет плитку край-в-край, без полей */
	background: #fff;
	border: 2px solid var(--ypc-border);
	border-radius: 12px;
	padding: 0;                   /* без внутреннего отступа (фидбек клиента 2026-07-02) */
	cursor: pointer;
	opacity: 1;
	transition: border-color .15s ease;
}
.single-product .product-images .flex-control-thumbs img:hover { border-color: var(--ypc-border-3); }
.single-product .product-images .flex-control-thumbs img.flex-active {
	border: 3px solid var(--ypc-orange);
	padding: 0;
}

/* Подпись под миниатюрами (тема .product-remark). Счётчик N/N убран по фидбеку клиента 2026-07-02. */
.single-product .product-images .product-remark {
	margin-top: 12px;
	font-family: var(--ypc-font-body);
	font-size: 13px;
	line-height: 1.3;
	color: var(--ypc-text-faint);
}

/* Адаптив-guard: на узких экранах миниатюры переносятся (полный адаптив — Этап 6). */
@media (max-width: 900px) {
	.single-product .product-images .flex-control-thumbs { gap: 8px; }
}

/* =====================================================================
   Этап 5 — Табы (Описание / Детали / Вопросы / Отзывы).
   CSS-first поверх штатной разметки: ul.tabs.wc-tabs + .woocommerce-Tabs-panel.
   Детали = таблица атрибутов WC (table.shop_attributes). Вопросы+Отзывы = система
   «aword» (.aword-feedback-layout: __list + __form) — форма/список остаются штатными,
   переключение табов и submit — тема/WC, мы только стилизуем. Кнопки форм = .button →
   гасим тему-hover (box-shadow:none). Всё под .single-product .woocommerce-tabs / .aword-*.
   ===================================================================== */

/* Контейнер табов — на всю ширину карточки (тема капала max-width:1200 центр). */
.single-product .woocommerce-tabs {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	background: #fff;
	border: 1px solid var(--ypc-border-2);
	border-radius: 16px;
	margin-top: 40px;
	overflow: hidden;
}

/* Панель табов. Тема добавляет ::before/::after и li::before (синие разделители) — гасим. */
.single-product .woocommerce-tabs ul.tabs.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin: 0;
	padding: 0 32px;
	border-bottom: 1px solid var(--ypc-border-2);
	list-style: none;
}
.single-product .woocommerce-tabs ul.tabs.wc-tabs::before,
.single-product .woocommerce-tabs ul.tabs.wc-tabs::after { display: none !important; content: none !important; }
.single-product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: none; border: 0; display: block; }
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none !important; content: none !important; }
.single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 17px 2px;
	font-family: var(--ypc-font-head);
	font-size: 16px;
	font-weight: 600;
	color: var(--ypc-text-muted);
	border-bottom: 3px solid transparent;
	text-decoration: none;
	background: none;
	text-shadow: none;
	box-shadow: none !important; /* тема вешает синий inset 0 -2px ( eeeeee/3960ff) — гасим */
}
.single-product .woocommerce-tabs ul.tabs li a:hover { color: var(--ypc-navy); }
/* Активный таб: navy + Montserrat 800 + ТОЛЬКО оранжевое подчёркивание 3px
   (тема давала синий inset box-shadow 0 -2px #3960ff → двоилось; гасим box-shadow). */
.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--ypc-navy); font-weight: 800; border-bottom-color: var(--ypc-orange); box-shadow: none !important; }

/* Тело таба. */
.single-product .woocommerce-tabs .woocommerce-Tabs-panel { max-width: none; margin: 0; padding: 34px 36px; font-family: var(--ypc-font-body); }
.single-product .woocommerce-tabs .woocommerce-Tabs-panel > h2 { position: absolute; left: -9999px; } /* штатный заголовок таба прячем */
.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description { font-size: 16px; line-height: 1.7; color: var(--ypc-text); }
.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description p { margin: 0 0 14px; max-width: 920px; }
/* Строка перед списком («Кроме того…») — жирная navy. */
.single-product .woocommerce-Tabs-panel--description p:has(+ ul) { font-weight: 700; color: var(--ypc-navy); }
/* Список преимуществ → чек-кружки: 22px кружок #fdeede + оранжевая галочка (тема даёт свой li::before 10px — перебиваем !important). */
.single-product .woocommerce-Tabs-panel--description ul { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.single-product .woocommerce-Tabs-panel--description ul li { position: relative; margin: 0; padding: 0 0 0 34px; font-size: 16px; line-height: 1.5; color: var(--ypc-text); list-style: none; }
.single-product .woocommerce-Tabs-panel--description ul li::marker { content: none; }
.single-product .woocommerce-Tabs-panel--description ul li::before {
	content: ""; position: absolute; left: 0 !important; top: 0 !important;
	width: 22px !important; height: 22px !important; border-radius: 50% !important; border: 0 !important;
	background-color: var(--ypc-tint-1) !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f78e1f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
	background-repeat: no-repeat !important; background-position: center !important; background-size: 13px 13px !important;
}

/* -------- Таб «Детали»: таблица атрибутов WC → 2-колоночная сетка «ключ · значение». -------- */
.single-product #tab-additional_information table.shop_attributes { width: 100% !important; margin: 0 !important; border: 0; }
.single-product #tab-additional_information table.shop_attributes tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.single-product #tab-additional_information table.shop_attributes tr {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	padding: 15px 0; border-bottom: 1px solid var(--ypc-border-2);
}
.single-product #tab-additional_information table.shop_attributes th,
.single-product #tab-additional_information table.shop_attributes td { display: block; border: 0; padding: 0; margin: 0; background: none; }
.single-product #tab-additional_information table.shop_attributes th { color: var(--ypc-text-muted); font-size: 15px; font-weight: 500; font-style: normal; text-align: left; }
.single-product #tab-additional_information table.shop_attributes td { color: var(--ypc-navy); font-weight: 600; font-size: 15px; text-align: right; }
.single-product #tab-additional_information table.shop_attributes td p { margin: 0; }

/* -------- Характеристики в правой колонке (под кратким описанием, решение клиента 2026-07-02).
   Тот же `table.shop_attributes`, что и во вкладке «Детали», но узкая колонка → 1-колоночный
   список «ключ · значение». Скоуп строго под .product-info .yp-specs. -------- */
.single-product .product-info .yp-specs { margin: 16px 0 20px; }
.single-product .product-info .yp-specs__title {
	font-family: var(--ypc-font-head);
	font-weight: 800;
	font-size: 17px;
	color: var(--ypc-navy);
	margin: 0 0 6px;
}
.single-product .product-info .yp-specs table.shop_attributes { width: 100% !important; margin: 0 !important; border: 0; }
.single-product .product-info .yp-specs table.shop_attributes tbody { display: block; }
.single-product .product-info .yp-specs table.shop_attributes tr {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	padding: 11px 0; border-bottom: 1px solid var(--ypc-border-2);
}
.single-product .product-info .yp-specs table.shop_attributes th,
.single-product .product-info .yp-specs table.shop_attributes td { display: block; border: 0; padding: 0; margin: 0; background: none; }
.single-product .product-info .yp-specs table.shop_attributes th { color: var(--ypc-text-muted); font-size: 14px; font-weight: 500; font-style: normal; text-align: left; }
.single-product .product-info .yp-specs table.shop_attributes td { color: var(--ypc-navy); font-weight: 600; font-size: 14px; text-align: right; }
.single-product .product-info .yp-specs table.shop_attributes td p { margin: 0; }

/* -------- Табы «Вопросы» и «Отзывы»: двухколоночный aword-layout (список | форма). -------- */
/* width:100% — в табе «Отзывы» родитель `.woocommerce-Reviews` = display:flex, из-за чего
   grid-раскладка сжималась по контенту (~944px) и форма уезжала к центру; тянем на всю ширину. */
.single-product .aword-feedback-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; width: 100%; }
.single-product .aword-feedback-layout__list { min-width: 0; }
.single-product .aword-feedback-layout__list .woocommerce-Reviews-title,
.single-product .aword-feedback-layout__list > h2 { font-family: var(--ypc-font-head); font-weight: 800; font-size: 18px; color: var(--ypc-navy); margin: 0 0 16px; position: static; left: auto; }
.single-product .aword-feedback-layout__list .woocommerce-noreviews { color: var(--ypc-text-muted); font-size: 15px; margin: 0; }

/* Карточка формы (вопрос/отзыв). */
.single-product .aword-feedback-layout__form { background: var(--ypc-bg-soft); border: 1px solid var(--ypc-border); border-radius: 14px; padding: 24px; min-width: 0; }
.single-product .aword-feedback-layout__form #review_form,
.single-product .aword-feedback-layout__form .comment-respond,
.single-product .aword-feedback-layout__form #respond { background: transparent; border: 0; padding: 0; margin: 0; }
.single-product .aword-feedback-layout__form .comment-reply-title { display: block; font-family: var(--ypc-font-head); font-weight: 700; font-size: 17px; color: var(--ypc-navy); margin: 0 0 14px; }
.single-product .aword-feedback-layout__form .comment-form-comment,
.single-product .aword-feedback-layout__form .comment-form-author,
.single-product .aword-feedback-layout__form .comment-form-rating { margin: 0 0 14px; }

/* Поля формы. */
.single-product .aword-feedback-layout__form input[type=text],
.single-product .aword-feedback-layout__form input[type=email],
.single-product .aword-feedback-layout__form textarea {
	width: 100% !important; box-sizing: border-box;
	border: 1.5px solid var(--ypc-border); border-radius: 10px;
	padding: 12px 15px; font-size: 15px; font-family: var(--ypc-font-body); color: var(--ypc-navy); background: #fff;
}
.single-product .aword-feedback-layout__form textarea { min-height: 112px; resize: vertical; }
.single-product .aword-feedback-layout__form input:focus,
.single-product .aword-feedback-layout__form textarea:focus { border-color: var(--ypc-orange); outline: none; }
.single-product .aword-feedback-layout__form .comment-form-author { display: block; width: 100%; float: none; }
.single-product .aword-feedback-layout__form .comment-form-author label,
.single-product .aword-feedback-layout__form .comment-form-rating label { display: block; float: none; font-size: 14px; color: var(--ypc-text-muted); font-weight: 500; margin: 0 0 8px; }

/* Кнопка отправки формы (тема .button/.submit → гасим hover-грабль box-shadow). */
.single-product .aword-feedback-layout__form .form-submit { margin: 0; }
.single-product .aword-feedback-layout__form .submit {
	-webkit-appearance: none; appearance: none;
	background: var(--ypc-orange); color: #fff; border: 0; border-radius: 10px;
	font-family: var(--ypc-font-body); font-weight: 700; font-size: 15px; padding: 14px 20px; width: 100%;
	cursor: pointer; box-shadow: none; transition: background .15s ease;
}
.single-product .aword-feedback-layout__form .submit:hover { background: var(--ypc-orange-hover); color: #fff; box-shadow: none; }

/* Звёзды рейтинга в форме отзыва.
   Тема рисует ★ иконочным шрифтом wpshop-core СИНИМ, зажатым в a{width:20px;overflow:hidden;text-indent:-9999px}
   (из-за клипа глиф выглядел «галочкой»). Форсируем настоящий ★ (Arial), прячем текст через font-size:0,
   освобождаем ширину, гасим ::before-спейсер (180px) и margin у span. Заливка: пусто #d7dde5, ≤ выбранной — оранж. */
.single-product .aword-feedback-layout__form .comment-form-rating { display: block !important; }
.single-product .aword-feedback-layout__form p.stars { display: flex !important; gap: 4px; margin: 0 0 14px !important; float: none !important; clear: both !important; }
.single-product .aword-feedback-layout__form p.stars::before,
.single-product .aword-feedback-layout__form p.stars::after { display: none !important; content: none !important; width: 0 !important; }
.single-product .aword-feedback-layout__form p.stars > span { display: flex !important; gap: 4px; margin: 0 !important; }
.single-product .aword-feedback-layout__form p.stars a {
	font-size: 0 !important; width: auto !important; min-width: 0 !important; overflow: visible !important;
	text-indent: 0 !important; line-height: 1 !important; height: auto !important; margin: 0 !important;
	color: var(--ypc-star-empty) !important;
}
.single-product .aword-feedback-layout__form p.stars a::before {
	content: "\2605" !important; font-family: Arial, Helvetica, sans-serif !important; font-weight: 400 !important;
	font-size: 28px !important; line-height: 1 !important; display: inline-block; color: var(--ypc-star-empty) !important;
}
.single-product .aword-feedback-layout__form p.stars:hover a::before { color: var(--ypc-orange) !important; }
.single-product .aword-feedback-layout__form p.stars a:hover ~ a::before { color: var(--ypc-star-empty) !important; }
.single-product .aword-feedback-layout__form p.stars.selected a.active::before { color: var(--ypc-orange) !important; }
.single-product .aword-feedback-layout__form p.stars.selected a.active ~ a::before { color: var(--ypc-star-empty) !important; }
.single-product .aword-feedback-layout__form p.stars.selected a:not(.active)::before { color: var(--ypc-orange) !important; }

/* Адаптив-guard табов (полный адаптив — Этап 6): двухколоночные → 1 колонка. */
@media (max-width: 900px) {
	.single-product .aword-feedback-layout { grid-template-columns: 1fr; gap: 28px; }
	.single-product #tab-additional_information table.shop_attributes tbody { grid-template-columns: 1fr; }
	.single-product .woocommerce-tabs .woocommerce-Tabs-panel { padding: 24px 20px; }
	.single-product .woocommerce-tabs ul.tabs.wc-tabs { gap: 18px; padding: 0 20px; }
}

/* =====================================================================
   Блок консультации (ТЗ 02.07.2026). Правая колонка, под строкой действий,
   над «Категория:». Тихая плашка: иконка → текст+телефон → каналы связи.
   «Не конкурирует» с «В корзину»: без оранж-фона, без тени, мелкая оранж-иконка.
   ===================================================================== */
.single-product .yp-consult {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 16px;
	background: var(--ypc-bg-soft);        /* #fbfcfe */
	border: 1px solid var(--ypc-border);   /* #e6eaf0 */
	border-radius: 12px;
	box-shadow: none;
}
.single-product .yp-consult__ico {
	flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
	color: var(--ypc-orange);              /* stroke наследуется через currentColor */
}
.single-product .yp-consult__ico svg { width: 22px; height: 22px; display: block; }

.single-product .yp-consult__body { flex: 1; min-width: 0; }
.single-product .yp-consult__cap {
	display: block;
	font-family: var(--ypc-font-body);     /* Manrope */
	font-weight: 400; font-size: 14px; line-height: 1.3;
	color: var(--ypc-text-muted);          /* #6b7688 */
}
.single-product a.yp-consult__phone,
.single-product .yp-consult__phone {
	display: inline-block; margin-top: 2px;
	font-family: var(--ypc-font-head);     /* Montserrat */
	font-weight: 800; font-size: 18px; line-height: 1.2;
	color: var(--ypc-navy);                /* #0d1b33 */
	text-decoration: none; box-shadow: none;
}
.single-product a.yp-consult__phone:hover { color: var(--ypc-navy); box-shadow: none; text-decoration: none; }

.single-product .yp-consult__ch { display: flex; gap: 8px; flex-shrink: 0; }
.single-product a.yp-consult__btn,
.single-product .yp-consult__btn {
	width: 40px; height: 40px; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff;
	border: 1px solid var(--ypc-border);   /* #e6eaf0 */
	border-radius: 10px;
	box-shadow: none;
	transition: border-color .15s ease, color .15s ease;
	padding: 0;
}
.single-product .yp-consult__btn svg { width: 19px; height: 19px; display: block; }
.single-product .yp-consult__btn--tg   { color: #2ba1e0; }
.single-product .yp-consult__btn--wa   { color: #25d366; }
.single-product .yp-consult__btn--mail { color: var(--ypc-orange); } /* #f78e1f */
.single-product a.yp-consult__btn--tg:hover   { border-color: #2ba1e0; box-shadow: none; }
.single-product a.yp-consult__btn--wa:hover   { border-color: #25d366; box-shadow: none; }
.single-product a.yp-consult__btn--mail:hover { border-color: var(--ypc-orange); box-shadow: none; }

/* Мобильные (<768px): каналы переносятся под текст, выравнены по левому краю. */
@media (max-width: 767px) {
	.single-product .yp-consult { flex-wrap: wrap; }
	.single-product .yp-consult__body { flex: 1 1 auto; }
	.single-product .yp-consult__ch {
		flex: 1 0 100%;
		margin-top: 4px;
		padding-left: 36px;                /* иконка 22 + gap 14 → выровнять под текст */
		justify-content: flex-start;
	}
}

/* ============================================================
   ВАРИАТИВНЫЕ ТОВАРЫ (variable products) — фикс раскладки формы.
   У variable-товара form.cart = form.variations_form: прямые дети = table.variations
   (выпадашки атрибутов) + .single_variation_wrap, а счётчик/кнопка/«вопрос»/♥ лежат ВНУТРИ
   .woocommerce-variation-add-to-cart. Наш грид «строки покупки» изначально висел на form.cart и
   раскидывал по колонкам НЕ те элементы (выпадашки и блок покупки налезали друг на друга).
   Решение: форму делаем блочной, а тот же грид вешаем на .woocommerce-variation-add-to-cart —
   дочерние правила размещения (form.cart .quantity{grid-column…} и т.д.) переиспользуются как есть. */
.single-product .product-info form.variations_form.cart { display: block; }
.single-product .product-info .single_variation_wrap { display: block; }

.single-product .product-info form.cart .woocommerce-variation-add-to-cart {
	display: grid;
	grid-template-columns: 176px 1fr auto;
	gap: 14px;
	align-items: stretch;
	margin: 16px 0 0;
}
@media (max-width: 1199px) {
	.single-product .product-info form.cart .woocommerce-variation-add-to-cart { grid-template-columns: 118px 1fr auto; }
}
@media (max-width: 560px) {
	.single-product .product-info form.cart .woocommerce-variation-add-to-cart { grid-template-columns: 1fr auto; }
}

/* Таблица выбора атрибутов: label над select, select в брендовом стиле. */
.single-product .product-info table.variations,
.single-product .product-info table.variations tbody,
.single-product .product-info table.variations tr,
.single-product .product-info table.variations th,
.single-product .product-info table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
}
.single-product .product-info table.variations { margin: 0 0 2px; border-collapse: collapse; }
.single-product .product-info table.variations tr { margin: 0 0 14px; }
.single-product .product-info table.variations th.label,
.single-product .product-info table.variations th.label label {
	font-family: var(--ypc-font-head);
	font-weight: 700;
	font-size: 14px;
	color: var(--ypc-navy);
	margin: 0 0 6px;
	padding: 0;
	display: block;
}
.single-product .product-info table.variations td.value { position: relative; }
.single-product .product-info table.variations select {
	width: 100%;
	height: 48px;
	padding: 0 42px 0 14px;
	font-family: var(--ypc-font-body);
	font-size: 15px;
	color: var(--ypc-navy);
	background-color: #fff;
	border: 1.5px solid var(--ypc-border);
	border-radius: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1b33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
}
.single-product .product-info table.variations select:focus {
	outline: none;
	border-color: var(--ypc-orange);
}
/* ссылка «Очистить» (сброс выбранной вариации) */
.single-product .product-info .reset_variations {
	display: inline-block;
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--ypc-text-muted);
}

/* Цена выбранной вариации над строкой покупки. */
.single-product .product-info .woocommerce-variation { margin: 4px 0 0; }
.single-product .product-info .woocommerce-variation .price,
.single-product .product-info .woocommerce-variation-price .price {
	font-family: var(--ypc-font-head);
	font-weight: 800;
	color: var(--ypc-navy);
}