/* ============================================================================
 * Страница товара MedSky.
 *
 * Собрана по итогам разбора витрин Ozon, Wildberries, Amazon и AliExpress и
 * данных Baymard по PDP: один экран — цена, наличие, доставка и покупка; ниже —
 * документы и характеристики; в конце — товарные полки. Липкая полоса покупки
 * на прокрутке и честные сроки доставки закрывают два самых частых отказа
 * («не понимаю, когда придёт» и «цена ушла из виду»).
 *
 * Слой подключается только на странице товара (inc/ms-product.php) и лежит
 * поверх ms-components / ms-woo / ms-home. Значения — из токенов --ms-*.
 * ==========================================================================*/

.ms-pdp {
	--pdp-r: 20px;
	--pdp-r-sm: 14px;
	--pdp-gap: 20px;

	/* Отступ липких элементов (полоса покупки, галерея) считает product.js:
	   он равен нижней границе шапки и меняется при прокрутке, когда тема
	   сжимает шапку. См. переменную --ms-pdp-top. */

	/* Полки товаров прокручиваются внутри себя, но в Chrome «хвост» трека
	   раздувает ширину документа — и страница начинает ездить вбок на
	   телефоне. clip это отсекает и, в отличие от hidden, не создаёт новый
	   контейнер прокрутки, поэтому липкая галерея продолжает работать.
	   Так же сделано на главной (.ms-home в home.css). */
	overflow-x: clip;

	padding-bottom: 10px;
}

/* Служебная шкала: одна высота у всех крупных кнопок страницы. */
.ms-btn--dark {
	background: var(--ms-accent-ink);
	color: #fff;
}

.ms-btn--dark:hover {
	background: #0a2c2d;
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * 0. Приоритет над стилями WooCommerce
 * ---------------------------------------------------------------------------
 * Плагин рисует свою двухколоночную карточку на float-ах и перекрашивает
 * кнопки и плашки. Его правила выигрывают по специфичности:
 *
 *   .woocommerce div.product div.images    { float:left; width:48% }  → (0,3,2)
 *   .woocommerce span.onsale               { min-height:3.236em; … }  → (0,2,1)
 *   .woocommerce button.button.alt         { background:#7f54b3 }      → (0,2,1)
 *   .woocommerce div.product form.cart div.quantity { float:left }    → (0,4,3)
 *
 * Обычного `.ms-pdp__класс` (0,2,0) не хватает — и тогда фото занимает
 * половину колонки, «В корзину» становится фиолетовой, а бейдж скидки
 * превращается в круг 46 px. Поэтому здесь селекторы набраны так, чтобы
 * заведомо быть выше: `.ms-pdp.product` даёт два класса на одном элементе,
 * плюс два класса-потомка. Все такие переопределения собраны в одном месте,
 * чтобы их не искали по файлу.
 *
 * Проверять после правок: ширина .woocommerce-product-gallery = 100% ширины
 * колонки, фон кнопки — акцентный, высота плашки скидки — 28 px.
 * ------------------------------------------------------------------------ */

/* Галерея: width/float от WooCommerce ломают нашу сетку. */
.ms-pdp.product .ms-pdp__gallery .woocommerce-product-gallery {
	float: none;
	width: 100%;
	margin: 0;
}

/* Фото занимает всю колонку: снимок 1:1 шириной 480 px (в сетке от 1280 px
   колонка галереи фиксирована — 480 px). Ограничивать кадр по высоте нельзя:
   тогда картинка окажется меньше рамки галереи и по бокам появятся поля.
   Липкость колонки включается только от 1280 px (раздел 15) и рассчитана на
   то, что фото вместе с миниатюрами помещается в экран целиком. */
.ms-pdp.product .ms-pdp__gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Товар без снимка: в галерее вместо <img> стоит наш квадрат .ms-ph (разметку
   подменяет inc/ms-media.php). Ядро оборачивает заглушку в
   div.woocommerce-product-gallery__image--placeholder с рамкой 1px #f2f2f2 —
   внутри квадрата есть своё тонкое кольцо (box-shadow, задан в media.css),
   поэтому рамку обёртки снимаем, иначе по периметру видно второй контур.

   Специфичность здесь решает всё. Ядро красит обёртку правилом
     .woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder
     → border: 1px solid #f2f2f2                                           (0,4,2)
   Это четыре класса и два тега (div.product, div.images). Селектор из четырёх
   классов без тегов — (0,4,0) — классов столько же, но по element-count ядро
   выигрывает, и рамка остаётся, хотя product.css подключён позже. Поэтому ниже
   добавлен класс-предок .woocommerce-product-gallery: пять классов против
   четырёх классов и двух тегов → (0,5,0) против (0,4,2), наше правило выигрывает
   независимо от порядка загрузки.
   Соседнее правило для контейнера галереи (.woocommerce-product-gallery) этой
   добавки не требует: там у нас четыре класса против трёх классов и двух тегов
   ядра — (0,4,0) против (0,3,2).

   Второй источник такой же рамки — класс .woocommerce-placeholder, который ядро
   печатает по умолчанию (wc_placeholder_img() → wp_parse_args() с
   'class' => 'woocommerce-placeholder wp-post-image') и обводит в чужих циклах
   товаров правилом
     .woocommerce ul.products li.product .woocommerce-placeholder
     → border: 1px solid #f2f2f2
   До нашей заглушки класс ядра не доходит: wc_placeholder_img() передаёт в фильтр
   woocommerce_placeholder_img() третьим аргументом не атрибуты, а $dimensions
   (WC 10.7.0, includes/wc-product-functions.php:488), поэтому в inc/ms-media.php
   $attr['class'] всегда пуст — проверено wp-cli: для товара без снимка вывод
   get_image() содержит только 'ms-ph ms-ph--card'. Класс шаблона доходит до
   заглушки лишь по прямому пути ms_product_media() → ms_placeholder() (карточка
   каталога: template-parts/card-product.php → 'ms-ph ms-ph--card ms-pcard__img');
   там же, где тема зовёт get_image() (липкая полоса покупки, избранное, кабинет,
   сравнение), класс теряется — размер и вид заглушки задают контекстные селекторы
   вроде .ms-pdp__sticky-media .ms-ph.

   Проверять после правок: computed border обёртки = 0px, квадрат .ms-ph--pdp
   занимает всю обёртку (480×480 при колонке 480), вокруг квадрата ровно одно
   кольцо — box-shadow. */
.ms-pdp.product .ms-pdp__gallery .woocommerce-product-gallery .woocommerce-product-gallery__image--placeholder {
	float: none;
	width: 100%;
	margin: 0;
	border: 0;
}

/* Миниатюры: у WooCommerce это float-сетка 25% на 4 колонки, спрятанная
   абсолютным позиционированием под фото. */
.ms-pdp.product .ms-pdp__gallery .flex-control-thumbs {
	position: static;
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
}

.ms-pdp.product .ms-pdp__gallery .flex-control-thumbs li {
	width: 72px;
	flex: 0 0 72px;
	margin: 0;
	float: none;
	clear: none;
	list-style: none;
	aspect-ratio: 3 / 4;
}

.ms-pdp.product .ms-pdp__gallery .flex-control-thumbs img {
	width: 72px;
	height: 100%;
	object-fit: contain;
	border: 1px solid var(--ms-line);
	border-radius: 10px;
	background: #fff;
	opacity: .72;
	transition: opacity .18s ease, border-color .18s ease;
}

.ms-pdp.product .ms-pdp__gallery .flex-control-thumbs img:hover,
.ms-pdp.product .ms-pdp__gallery .flex-control-thumbs img.flex-active {
	border-color: var(--ms-accent);
	opacity: 1;
}

/* Плашка распродажи: WooCommerce делает из неё круг 3.236em с line-height. */
.ms-pdp.product .ms-pdp__badges .onsale {
	position: static;
	top: auto;
	right: auto;
	left: auto;
	z-index: auto;
	float: none;
	min-width: 0;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--ms-sale);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 28px;
	text-align: center;
}

/* Кнопка «В корзину»: классы button alt плагин красит в свой фиолетовый. */
.ms-pdp.product .ms-pdp__cart .single_add_to_cart_button {
	float: none;
	vertical-align: middle;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: var(--ms-accent);
	color: var(--ms-accent-ink);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
}

.ms-pdp.product .ms-pdp__cart .single_add_to_cart_button:hover:not(.disabled) {
	background: var(--ms-accent-d);
	color: #fff;
}

/* Количество: WooCommerce поджимает его float-ом и внешним отступом. */
.ms-pdp.product .ms-pdp__cart .cart .quantity {
	float: none;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 1. Первый экран: галерея + бокс покупки
 * ---------------------------------------------------------------------------
 * База — одна колонка (телефон и планшет). Три колонки, как на маркетплейсах,
 * включаются от 1024 px, а пропорции Ozon (фото 480, панель покупки 380) —
 * от 1280 px: см. раздел 15. */
.ms-pdp__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	padding-top: 22px;
}

/* min-width: 0 обязателен: без него grid-колонка не сжимается и широкий кадр
   раздвигает сетку. Липкость колонки включается от 1280 px — см. раздел 15. */
.ms-pdp__gallery { min-width: 0; }

/* Бейджи: одна строка над фото, без «плавающих» плашек поверх картинки. */
.ms-pdp__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.ms-pdp__badge {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.ms-pdp__badge--sale { background: var(--ms-sale); color: #fff; }
.ms-pdp__badge--promo { background: var(--ms-accent-text); color: #fff; }
.ms-pdp__badge--warn { background: rgba(216, 154, 23, .16); color: #8a5f05; }
.ms-pdp__badge--out { background: var(--ms-bg-3); color: var(--ms-ink-2); }
.ms-pdp__badge--hit { background: var(--ms-accent); color: var(--ms-accent-ink); }
.ms-pdp__badge--new { background: var(--ms-accent-soft); color: var(--ms-accent-text); }

.ms-pdp__badge--ru {
	border: 1px solid var(--ms-accent);
	background: #fff;
	color: var(--ms-accent-text);
	letter-spacing: .04em;
}

.ms-pdp__gallery-hint,
.ms-pdp__gallery-count {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--ms-ink-2);
}

/* Галерея WooCommerce: фото на всю колонку, миниатюры — лентой под ним.
   Правила, перебивающие плагин (width/float), — в разделе 0. */
.ms-pdp__gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

.ms-pdp__gallery .flex-viewport {
	border: 1px solid var(--ms-line);
	border-radius: var(--pdp-r);
	background: #fff;
	overflow: hidden;
}

/* Кадр витрины 3:4 — как на Ozon, Wildberries и Яндекс Маркете. Пропорция одна
   на всю площадку: та же, что в кабинете продавца (inc/ms-vendor-gallery.php,
   ms_vg_ratio) и в плитке каталога (assets/css/catalog.css), поэтому продавец в
   предпросмотре видит ровно этот кадр.

   Кадр задаём обёртке слайда, а не окну слайдера: FlexSlider сам меряет высоту
   слайда и выставляет её окну. Снимок лежит абсолютом внутри обёртки и
   показывается целиком (object-fit: contain) — инструмент не обрезается по
   краям. Фото 3:4 заполняет кадр полностью, 4:3 оставляет белые поля сверху и
   снизу, и это видно продавцу ещё в редакторе. */
.ms-pdp.product .ms-pdp__gallery .woocommerce-product-gallery__wrapper > div {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.ms-pdp.product .ms-pdp__gallery .woocommerce-product-gallery__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
}

/* Заглушка занимает тот же кадр, что и снимок: переключение «фото появилось»
   не меняет высоту первого экрана. */
.ms-pdp.product .ms-pdp__gallery .woocommerce-product-gallery__image--placeholder .ms-ph {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

/* Миниатюры: горизонтальная лента под фото. Переопределения приоритета
   над WooCommerce (миниатюры, плашка скидки, кнопки) — в разделе 0. */

/* ---------------------------------------------------------------------------
 * 2. Бокс покупки
 * ------------------------------------------------------------------------ */
/* Телефон и планшет: одна колонка. Обёртки колонок «растворяются» через
   display: contents, поэтому порядок задаём прямо по блокам — цена и кнопки
   должны идти сразу после названия, а не после продавца и гарантий. */
.ms-pdp__buybox {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--ms-line);
	border-radius: var(--pdp-r);
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 40, 44, .04);
}

.ms-pdp__about,
.ms-pdp__buy { display: contents; }

.ms-pdp__ident { order: 1; }
.ms-pdp__price-block { order: 2; }
.ms-pdp__stock { order: 3; }
.ms-pdp__cart { order: 4; }
.ms-pdp__deliv { order: 5; }
.ms-pdp__fast { order: 6; }
.ms-pdp__highlights { order: 7; }
.ms-pdp__seller { order: 8; }
.ms-pdp__guarantees { order: 9; }

.ms-pdp__brandline {
	display: inline-block;
	margin-bottom: 6px;
	color: var(--ms-accent-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ms-pdp__title {
	margin: 0 0 10px;
	font-size: 27px;
	line-height: 1.2;
}

.ms-pdp__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font-size: 13.5px;
}

.ms-pdp__meta > * + * {
	padding-left: 14px;
	border-left: 1px solid var(--ms-line);
}

.ms-pdp__rating {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ms-ink);
}

.ms-pdp__stars { color: #e0a800; letter-spacing: 1px; }
.ms-pdp__rating-num { font-weight: 700; }
.ms-pdp__rating--empty { color: var(--ms-accent-text); }

.ms-pdp__sold { color: var(--ms-ink-3); }

/* Цена: главный элемент бокса, поэтому крупнее всего остального текста. */
.ms-pdp__price-block {
	padding: 16px 0 4px;
	border-top: 1px solid var(--ms-line);
}

.ms-pdp__price {
	margin: 0;
	font-family: var(--ms-font-head);
	font-size: 38px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--ms-ink);
}

.ms-pdp__price del {
	margin-right: 10px;
	font-size: 20px;
	font-weight: 400;
	color: var(--ms-ink-2);
}

.ms-pdp__price ins {
	color: var(--ms-sale);
	text-decoration: none;
}

.ms-pdp__price .woocommerce-Price-currencySymbol { font-size: .8em; }

.ms-pdp__save {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 0;
	font-size: 14px;
}

.ms-pdp__save-badge {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ms-sale);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
}

.ms-pdp__save-text { color: var(--ms-ink-3); }

.ms-pdp__legal-price {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--ms-ink-2);
}

/* Хайлайты: список, а не абзац — по нему бегут глазами. */
.ms-pdp__highlights {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
}

.ms-pdp__highlights li {
	position: relative;
	padding-left: 22px;
	line-height: 1.45;
}

.ms-pdp__highlights li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ms-accent);
}

/* Наличие: точка-индикатор + подпись + пояснение одной строкой. */
.ms-pdp__stock {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: center;
	gap: 8px;
	padding: 11px 15px;
	border-radius: var(--pdp-r-sm);
	background: rgba(46, 158, 91, .1);
	font-size: 14px;
}

.ms-pdp__stock[data-tone="warn"] { background: rgba(216, 154, 23, .13); }
.ms-pdp__stock[data-tone="bad"] { background: var(--ms-bg-3); }

.ms-pdp__stock-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ms-ok);
	box-shadow: 0 0 0 4px rgba(46, 158, 91, .18);
}

.ms-pdp__stock[data-tone="warn"] .ms-pdp__stock-dot {
	background: var(--ms-warn);
	box-shadow: 0 0 0 4px rgba(216, 154, 23, .2);
}

.ms-pdp__stock[data-tone="bad"] .ms-pdp__stock-dot {
	background: var(--ms-ink-2);
	box-shadow: none;
}

.ms-pdp__stock-label { font-weight: 600; }
.ms-pdp__stock-note { font-size: 13px; color: var(--ms-ink-2); }

/* Точное количество: видно только на странице товара, цифры не «прыгают»
   при смене числа — tabular-nums держит ширину. */
.ms-pdp__stock-qty {
	color: var(--ms-accent-text);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Форма покупки: количество → «В корзину» → «Купить сейчас» → сердечко →
   сравнить. Порядок задаём CSS-ом, потому что кнопки избранного и сравнения
   выводятся плагинами на общем хуке и раньше нас в разметке. */
.ms-pdp__cart .cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
	margin: 0;
}

.ms-pdp__cart .quantity {
	order: 1;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ms-line-2);
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
}

.ms-pdp__cart .quantity input.qty {
	width: 42px;
	min-height: 46px;
	padding: 0 2px;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-weight: 600;
	-moz-appearance: textfield;
}

.ms-pdp__cart .quantity input.qty::-webkit-outer-spin-button,
.ms-pdp__cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Шаг количества: кнопки добавляет product.js — в разметке WooCommerce их нет.
   Ширина 30 px: строка покупки должна уместиться в один ряд, а не в четыре. */
.ms-pdp-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 46px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ms-ink-3);
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.ms-pdp-qty-btn:hover { background: var(--ms-bg-2); color: var(--ms-accent-text); }
.ms-pdp-qty-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Цвет, размер и радиус кнопки — в разделе 0: там селектор сильнее
   правил WooCommerce `.button.alt`. Здесь только раскладка строки. */
.ms-pdp__cart .single_add_to_cart_button {
	order: 2;
	flex: 1 1 126px;
	min-height: 46px;
	padding: 0 14px;
	font-size: 15px;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}

.ms-pdp__cart .single_add_to_cart_button:hover:not(.disabled) {
	transform: translateY(-1px);
}

.ms-pdp__cart .single_add_to_cart_button.disabled,
.ms-pdp__cart .single_add_to_cart_button[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

/* «Купить сейчас» — своя строка во всю ширину: это второй по важности путь
   после корзины, он не должен конкурировать за место в первой строке. */
.ms-pdp__buynow {
	order: 5;
	flex: 1 1 100%;
	min-height: 46px;
	padding: 0 18px;
	border-radius: 999px;
	font-size: 15px;
}

/* Избранное и сравнение — квадратные кнопки-иконки в строке покупки.
   Порядок 6 и 7: они встают рядом с «Купить сейчас» во втором ряду, а не
   отжимают место у «В корзину». Подпись «Сравнить» остаётся в aria-label. */
.ms-pdp__cart .ms-product-fav { order: 6; flex: 0 0 46px; align-self: stretch; display: flex; }
.ms-pdp__cart .ms-product-cmp { order: 7; flex: 0 0 46px; align-self: stretch; display: flex; margin: 0; }

.ms-pdp__cart .ms-product-fav .favorite-heart,
.ms-pdp__cart .ms-product-cmp .ms-cmp-btn--single {
	width: 46px;
	height: 100%;
	min-height: 46px;
	padding: 0;
	border: 1px solid var(--ms-line-2);
	border-radius: var(--ms-r-sm);
	background: #fff;
}

.ms-pdp__cart .ms-product-cmp .ms-cmp-btn--single .ms-cmp-btn__text { display: none; }

.ms-pdp__cart .ms-product-fav .favorite-heart:hover,
.ms-pdp__cart .ms-product-cmp .ms-cmp-btn--single:hover {
	background: var(--ms-accent-soft);
	border-color: var(--ms-accent);
}

/* Переменный товар: таблица вариантов должна занять всю ширину бокса. */
.ms-pdp__cart .variations_form,
.ms-pdp__cart .woocommerce-variation-add-to-cart {
	width: 100%;
}

.ms-pdp__cart .variations {
	margin-bottom: 12px;
}

.ms-pdp__cart .variations th,
.ms-pdp__cart .variations td {
	padding: 6px 0;
	border: 0;
	vertical-align: middle;
}

.ms-pdp__cart .variations label { margin: 0; font-size: 14px; }
.ms-pdp__cart .woocommerce-variation-price { margin-bottom: 10px; }

/* ---------------------------------------------------------------------------
 * 3. Доставка
 * ------------------------------------------------------------------------ */
.ms-pdp__deliv {
	padding: 14px 15px;
	border: 1px solid var(--ms-line);
	border-radius: var(--pdp-r-sm);
	background: var(--ms-bg-2);
}

.ms-pdp__deliv-head {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.ms-pdp__deliv-icon { flex: 0 0 auto; margin-top: 2px; color: var(--ms-accent-text); }

.ms-pdp__deliv-title {
	display: block;
	font-weight: 600;
	font-size: 15px;
}

.ms-pdp__deliv-sub {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
}

.ms-pdp__deliv-form {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.ms-pdp__deliv-form input {
	min-height: 44px;
	background: #fff;
}

.ms-pdp__deliv-form .ms-btn { flex: 0 0 auto; }

.ms-pdp__deliv-out:empty { display: none; }

.ms-pdp-deliv__result {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--ms-line-2);
	font-size: 14px;
}

.ms-pdp-deliv__result p { margin: 0 0 4px; }
.ms-pdp-deliv__zone { font-size: 12.5px; color: var(--ms-ink-2); }
.ms-pdp-deliv__date { font-size: 15px; }
.ms-pdp-deliv__date span { margin-left: 6px; font-size: 13px; }
.ms-pdp-deliv__carriers { font-size: 12.5px; }

/* ---------------------------------------------------------------------------
 * 4. Быстрые действия
 * ------------------------------------------------------------------------ */
.ms-pdp__fast {
	display: grid;
	gap: 10px;
}

.ms-pdp__fast-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.ms-pdp__fast .ms-btn { min-height: 46px; }

/* ---------------------------------------------------------------------------
 * 5. Продавец и гарантии
 * ------------------------------------------------------------------------ */
.ms-pdp__seller {
	padding-top: 16px;
	border-top: 1px solid var(--ms-line);
}

.ms-pdp__seller-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ms-pdp__seller-logo,
.ms-pdp__seller-mark {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	object-fit: cover;
}

.ms-pdp__seller-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ms-accent-soft);
	color: var(--ms-accent-text);
	font-family: var(--ms-font-head);
	font-size: 20px;
	font-weight: 700;
}

.ms-pdp__seller-text {
	display: grid;
	min-width: 0;
	gap: 2px;
}

.ms-pdp__seller-name { font-weight: 600; }
.ms-pdp__seller-meta { font-size: 12.5px; }

.ms-pdp__seller-link {
	margin-left: auto;
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
}

.ms-pdp__guarantees {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--ms-ink-3);
}

.ms-pdp__guarantees li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	line-height: 1.4;
}

.ms-pdp__guarantees svg { flex: 0 0 auto; color: var(--ms-ok); }

/* ---------------------------------------------------------------------------
 * 6. Полоса доверия
 * ------------------------------------------------------------------------ */
.ms-pdp__trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 40px 0 0;
	border: 1px solid var(--ms-line);
	border-radius: var(--pdp-r);
	background: var(--ms-line);
	overflow: hidden;
}

/* Строка доверия — утверждения, а не ссылки: кликать нечего, поэтому и
   состояния наведения здесь нет. Так же сделано у Ozon и Wildberries. */
.ms-pdp__trust-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 20px;
	background: #fff;
	color: inherit;
}

.ms-pdp__trust-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--ms-accent-soft);
	color: var(--ms-accent-text);
}

.ms-pdp__trust-text { display: grid; gap: 3px; }
.ms-pdp__trust-title { font-weight: 600; font-size: 14.5px; }
.ms-pdp__trust-sub { font-size: 12.5px; color: var(--ms-ink-2); line-height: 1.4; }

/* ---------------------------------------------------------------------------
 * 7. Документы и маркировка
 * ------------------------------------------------------------------------ */
.ms-pdp__docs { margin: 40px 0 0; }

.ms-pdp__docs-note { font-size: 12.5px; }

.ms-pdp__docs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
}

.ms-pdp__doc {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px;
	border: 1px solid var(--ms-line);
	border-radius: var(--pdp-r);
	background: #fff;
}

/* Первая карточка — регистрационное удостоверение: главный документ
   медизделия, поэтому крупнее и с акцентной рамкой. */
.ms-pdp__doc--registracionnoe-udost {
	grid-column: span 2;
	border-color: var(--ms-accent);
	background: linear-gradient(180deg, var(--ms-accent-soft) 0%, #fff 70%);
}

.ms-pdp__doc-icon { color: var(--ms-accent-text); }

.ms-pdp__doc-label {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--ms-ink-2);
	letter-spacing: .01em;
}

.ms-pdp__doc-value {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ms-ink);
	overflow-wrap: anywhere;
}

.ms-pdp__doc--registracionnoe-udost .ms-pdp__doc-value { font-size: 22px; }

.ms-pdp__doc-hint { margin: 2px 0 0; font-size: 12.5px; }

.ms-pdp__doc-copy {
	align-self: flex-start;
	margin-top: 10px;
	padding: 5px 12px;
	border: 1px solid var(--ms-line-2);
	border-radius: 999px;
	background: #fff;
	color: var(--ms-ink-3);
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}

.ms-pdp__doc-copy:hover { border-color: var(--ms-accent); color: var(--ms-accent-text); }
.ms-pdp__doc-copy.is-done { border-color: var(--ms-ok); color: var(--ms-ok); }

/* ---------------------------------------------------------------------------
 * 8. Вкладки
 * ------------------------------------------------------------------------ */
.ms-pdp__tabs { margin: 44px 0 0; }

.ms-pdp__tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 6px;
	border: 1px solid var(--ms-line);
	border-radius: 999px;
	background: var(--ms-bg-2);
	width: fit-content;
	max-width: 100%;
}

.ms-pdp__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ms-ink-3);
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.ms-pdp__tab:hover { color: var(--ms-ink); }

.ms-pdp__tab.is-active {
	background: #fff;
	color: var(--ms-ink);
	box-shadow: 0 1px 3px rgba(16, 40, 44, .12);
}

.ms-pdp__tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--ms-bg-3);
	color: var(--ms-ink-2);
	font-size: 12px;
	font-weight: 600;
}

.ms-pdp__tab.is-active .ms-pdp__tab-count {
	background: var(--ms-accent);
	color: var(--ms-accent-ink);
}

.ms-pdp__panel { padding-top: 22px; }

.ms-pdp__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 22px 34px;
}

.ms-pdp__spec-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 10px;
	font-size: 16px;
}

.ms-pdp__spec-title svg { color: var(--ms-accent-text); }

.ms-pdp__spec-list {
	margin: 0;
	border-top: 1px solid var(--ms-line);
}

.ms-pdp__spec-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ms-line);
	font-size: 14px;
}

.ms-pdp__spec-row dt { color: var(--ms-ink-2); }
.ms-pdp__spec-row dd { margin: 0; font-weight: 500; }

.ms-pdp__desc {
	max-width: 900px;
	font-size: 15px;
}

.ms-pdp__desc img { border-radius: var(--pdp-r-sm); }

/* ---------------------------------------------------------------------------
 * 9. Отзывы и вопросы
 * ------------------------------------------------------------------------ */
/* -------------------------------------------------------------------------
 * Отзывы о товаре (inc/ms-reviews.php): свои, без WooCommerce
 *
 * Сводка со средней оценкой и распределением, список отзывов и форма с
 * оценкой звёздами. Классы .ms-rv* отдельные, чтобы не пересекаться с
 * разметкой WooCommerce (.woocommerce-Reviews), если плагин включат обратно.
 * ---------------------------------------------------------------------- */
.ms-rv { display: grid; gap: 20px; }

.ms-rv__notice {
	margin: 0;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 14px;
}

.ms-rv__notice--ok { background: #e8f7f2; color: #12655a; }
.ms-rv__notice--bad { background: #fdecec; color: #a32222; }

.ms-rv__summary {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	align-items: center;
	gap: 20px;
	padding: 16px 18px;
	border: 1px solid var(--ms-line, #e6e8ec);
	border-radius: 16px;
}

.ms-rv__score { display: grid; gap: 4px; }
.ms-rv__score-num { font-size: 38px; font-weight: 700; line-height: 1; }
.ms-rv__score-stars { font-size: 18px; letter-spacing: 2px; color: var(--ms-accent, #28afb1); }
.ms-rv__score-meta { font-size: 14px; color: #5b6572; }

.ms-rv__bars { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.ms-rv__bar {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 28px;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #5b6572;
}

.ms-rv__bar-track { height: 8px; border-radius: 999px; background: #eef1f4; overflow: hidden; }
.ms-rv__bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--ms-accent, #28afb1); }

.ms-rv__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }

.ms-rv__item {
	padding: 14px 16px;
	border: 1px solid var(--ms-line, #e6e8ec);
	border-radius: 14px;
}

.ms-rv__item-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 6px;
	font-size: 14px;
}

.ms-rv__item-author { font-weight: 600; }
.ms-rv__item-stars { letter-spacing: 1px; color: var(--ms-accent, #28afb1); }

.ms-rv__item-verified {
	padding: 2px 8px;
	border-radius: 999px;
	background: #e8f7f2;
	color: #12655a;
	font-size: 12px;
	font-weight: 600;
}

.ms-rv__item-date { margin-left: auto; font-size: 13px; }
.ms-rv__item-text { margin: 0; font-size: 15px; line-height: 1.55; white-space: pre-line; }
.ms-rv__empty { margin: 0; color: #5b6572; }

.ms-rv__form {
	display: grid;
	gap: 12px;
	padding: 18px;
	border: 1px solid var(--ms-line, #e6e8ec);
	border-radius: 16px;
	background: #fbfcfd;
}

.ms-rv__form-title { margin: 0; font-size: 18px; }
.ms-rv__label { font-size: 13px; font-weight: 600; color: #3d4653; }

.ms-rv__rating { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.ms-rv__rating-row { display: flex; align-items: center; gap: 4px; }

.ms-rv__rating-item { position: relative; cursor: pointer; }

.ms-rv__rating-item input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ms-rv__rating-star { font-size: 30px; line-height: 1; color: #cfd6de; transition: color .15s ease; }
.ms-rv__rating-item input:checked ~ .ms-rv__rating-star,
.ms-rv__rating-item:hover .ms-rv__rating-star { color: var(--ms-accent, #28afb1); }

.ms-rv__rating-item input:focus-visible ~ .ms-rv__rating-star {
	border-radius: 4px;
	outline: 2px solid var(--ms-accent, #28afb1);
	outline-offset: 3px;
}

.ms-rv__form textarea,
.ms-rv__form input[type="text"],
.ms-rv__form input[type="email"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ms-line, #dfe3e9);
	border-radius: 12px;
	background: #fff;
	font: inherit;
}

.ms-rv__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ms-rv__field { display: grid; gap: 6px; margin: 0; }

/* Ловушка для роботов: поле есть в разметке, но человек его не видит. */
.ms-rv__site {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ms-rv__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ms-rv__hint { font-size: 13px; }

/* Если WooCommerce включат обратно, его шаблон отзывов живёт в этой вкладке. */
.ms-pdp__reviews .woocommerce-Reviews-title { font-size: 19px; }

@media (max-width: 767px) {
	.ms-rv__summary { grid-template-columns: minmax(0, 1fr); }
	.ms-rv__row { grid-template-columns: minmax(0, 1fr); }
	.ms-rv__item-date { width: 100%; margin-left: 0; }
}


.ms-pdp__reviews .star-rating,
.ms-pdp .star-rating {
	color: #e0a800;
}

.ms-pdp__qa { max-width: 900px; }

.ms-pdp__qa-list {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.ms-pdp__qa-item {
	padding: 16px 0;
	border-bottom: 1px solid var(--ms-line);
}

.ms-pdp__qa-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 6px;
}

.ms-pdp__qa-author { font-weight: 600; }
.ms-pdp__qa-date { font-size: 12.5px; color: var(--ms-ink-2); }
.ms-pdp__qa-text { margin: 0; white-space: pre-line; }

/* ---------------------------------------------------------------------------
 * 10. Клиники и юрлица
 * ------------------------------------------------------------------------ */
.ms-pdp__b2b {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
	gap: 30px;
	margin: 44px 0 0;
	padding: 28px;
	border-radius: var(--pdp-r);
	background: linear-gradient(135deg, var(--ms-accent-soft) 0%, var(--ms-bg-2) 60%);
}

.ms-pdp__b2b-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 24px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.ms-pdp__b2b-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.ms-pdp__b2b-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #fff;
	color: var(--ms-accent-text);
	box-shadow: 0 1px 2px rgba(16, 40, 44, .08);
}

.ms-pdp__b2b-title { display: block; font-weight: 600; font-size: 14.5px; }
.ms-pdp__b2b-text { display: block; font-size: 12.5px; line-height: 1.4; }

.ms-pdp__b2b-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	border-radius: var(--pdp-r-sm);
	background: #fff;
	box-shadow: 0 12px 30px -20px rgba(16, 40, 44, .5);
}

.ms-pdp__b2b-label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--ms-ink-2);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.ms-pdp__b2b-price {
	margin: 0;
	font-family: var(--ms-font-head);
	font-size: 28px;
	font-weight: 700;
}

.ms-pdp__b2b-price .ms-muted { font-size: 14px; font-weight: 400; }

.ms-pdp__b2b-phone { margin: 4px 0 0; font-size: 14px; }
.ms-pdp__b2b-hours { margin: 0; font-size: 12.5px; }

/* ---------------------------------------------------------------------------
 * 11. Полки товаров
 * ------------------------------------------------------------------------ */
.ms-pdp__rail { margin: 44px 0 0; }

.ms-pdp__rail-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 262px);
	gap: 16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding: 4px 4px 14px;
	scrollbar-width: thin;
}

.ms-pdp__rail-track > * { scroll-snap-align: start; }

.ms-pdp__rail-nav {
	display: flex;
	gap: 8px;
	margin-top: 6px;
}

.ms-pdp__rail-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ms-line-2);
	border-radius: 50%;
	background: #fff;
	color: var(--ms-ink-3);
	font-size: 16px;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}

.ms-pdp__rail-btn:hover:not([disabled]) { border-color: var(--ms-accent); color: var(--ms-accent-text); }
.ms-pdp__rail-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
 * 12. Липкая полоса покупки
 * ---------------------------------------------------------------------------
 * Появляется только когда бокс покупки уехал за экран (класс вешает
 * product.js). Позиционируем от фактической высоты шапки: она липкая и на
 * мобильном выше, чем на десктопе. */
.ms-pdp__sticky {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--ms-pdp-top, 84px);
	z-index: 880;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--ms-line);
	box-shadow: 0 12px 30px -24px rgba(16, 40, 44, .5);
	animation: msPdpStickyIn .22s ease;
}

.ms-pdp__sticky[hidden] { display: none; }

@keyframes msPdpStickyIn {
	from { transform: translateY(-100%); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.ms-pdp__sticky-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 68px;
}

.ms-pdp__sticky-media {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	flex: 1 1 auto;
}

.ms-pdp__sticky-img {
	width: 46px;
	height: 46px;
	border: 1px solid var(--ms-line);
	border-radius: 10px;
	object-fit: contain;
	background: #fff;
}

/* Заглушка вместо фото: у товара без снимка get_image() отдаёт не <img>,
   а span.ms-ph из inc/ms-media.php. Класс .ms-pdp__sticky-img на неё не
   попадает (WooCommerce зовёт wc_placeholder_img() без $attr). Сам
   заглушечный квадрат — width:100% + aspect-ratio 1/1, поэтому в полосе
   он растягивался на всю ширину колонки (~980 px) и полоса занимала почти
   весь экран. Держим ту же плитку 46×46, что и у настоящего фото. */
.ms-pdp__sticky-media .ms-ph {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	aspect-ratio: auto;
	border-radius: 10px;
}

.ms-pdp__sticky-media .ms-ph .ms-ph__icon {
	width: 22px;
	height: 22px;
}

.ms-pdp__sticky-name {
	min-width: 0;
	max-width: 46ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}

.ms-pdp__sticky-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex: 0 0 auto;
	font-size: 21px;
	font-weight: 700;
}

.ms-pdp__sticky-price del { font-size: 14px; font-weight: 400; color: var(--ms-ink-2); }
.ms-pdp__sticky-price ins { color: var(--ms-sale); text-decoration: none; }

.ms-pdp__sticky-off {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ms-sale);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.ms-pdp__sticky-actions { flex: 0 0 auto; }
.ms-pdp__sticky-actions .ms-btn { min-height: 46px; }

/* ---------------------------------------------------------------------------
 * 13. Модалки
 * ------------------------------------------------------------------------ */
.ms-pdp-modal {
	position: fixed;
	inset: 0;
	z-index: 99995;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ms-pdp-modal[hidden] { display: none; }

.ms-pdp-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(16, 40, 44, .5);
	animation: msPdpFade .18s ease;
}

@keyframes msPdpFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.ms-pdp-modal__dialog {
	position: relative;
	width: min(100%, 480px);
	max-height: min(88vh, 720px);
	overflow-y: auto;
	padding: 26px;
	border-radius: var(--pdp-r);
	background: #fff;
	box-shadow: var(--ms-sh-2);
	animation: msPdpPop .2s ease;
}

@keyframes msPdpPop {
	from { transform: translateY(10px) scale(.98); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.ms-pdp-modal__close {
	position: absolute;
	right: 14px;
	top: 14px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: var(--ms-bg-2);
	color: var(--ms-ink-2);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.ms-pdp-modal__close:hover { background: var(--ms-bg-3); }

.ms-pdp-modal__title {
	margin: 0 0 8px;
	font-size: 21px;
	padding-right: 40px;
}

.ms-pdp-modal__form { margin-top: 18px; }

.ms-pdp-modal__form label { display: block; }

.ms-pdp-modal__form input,
.ms-pdp-modal__form textarea { margin-bottom: 14px; }

.ms-pdp-modal__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 400;
	color: var(--ms-ink-2);
	line-height: 1.4;
}

.ms-pdp-modal__consent input { margin: 2px 0 0; flex: 0 0 auto; }

.ms-pdp-modal__result { margin-top: 12px; font-size: 14px; }
.ms-pdp-modal__result.is-ok { color: #17743f; font-weight: 500; }
.ms-pdp-modal__result.is-bad { color: var(--ms-sale); font-weight: 500; }

body.ms-pdp-modal-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
 * 14. Прочее поверх разметки WooCommerce
 * ---------------------------------------------------------------------------
 * Плашку распродажи, галерею, кнопку и количество перебиваем в разделе 0 —
 * там для этого нужна повышенная специфичность. Здесь только то, что
 * перебивать не нужно.
 * ------------------------------------------------------------------------ */
.ms-pdp form.cart { margin-bottom: 0; }

.ms-pdp .woocommerce-message,
.ms-pdp .woocommerce-info,
.ms-pdp .woocommerce-error {
	margin: 0 0 18px;
	border-top-color: var(--ms-accent);
}

.ms-pdp .woocommerce-notices-wrapper:empty { display: none; }

/* Полоса крошек над карточкой темы: на странице товара она не нужна
   дважды — крошки уже есть в .ms-product-top. */
.ms-pdp-page .ms-woo-wrap { padding-bottom: 30px; }

/* ---------------------------------------------------------------------------
 * 15. Адаптив
 * ------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------
 * 15. Адаптив
 * ---------------------------------------------------------------------------
 * Первый экран: до 1024 — одна колонка, от 1024 — галерея рядом с боксом,
 * от 1280 — три колонки и пропорции Ozon (фото 480 / описание / покупка 380).
 * ------------------------------------------------------------------------ */

/* 1024–1279: галерея фиксированной ширины, бокс покупки занимает остаток. */
@media (min-width: 1024px) {
	.ms-pdp__hero {
		grid-template-columns: 380px minmax(0, 1fr);
		gap: 30px;
	}
}

/* От 1280: три колонки. Ширина панели покупки подобрана по замеру Ozon
   (388 px при контенте 1384) — у нас 380 при контенте 1380. */
@media (min-width: 1280px) {
	.ms-pdp__hero {
		grid-template-columns: 480px minmax(0, 1fr);
		gap: 30px;
	}

	/* Галерея липкая — как у Ozon: фото 478 px с миниатюрами занимает 684 px
	   и целиком помещается в экран, поэтому покупатель видит товар, пока
	   читает описание и характеристики. Панель покупки длиннее галереи и
	   задаёт высоту строки, поэтому галерее есть где «липнуть». */
	.ms-pdp__gallery {
		position: sticky;
		top: calc(var(--ms-pdp-top) + 14px);
	}

	.ms-pdp__buybox {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 16px 30px;
		align-items: start;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.ms-pdp__about,
	.ms-pdp__buy {
		display: flex;
		flex-direction: column;
		gap: 18px;
		min-width: 0;
	}

	.ms-pdp__about { grid-column: 1; }
	.ms-pdp__buy { grid-column: 2; }

	/* Панель покупки — отдельная карточка: цена, кнопки, доставка, продавец. */
	.ms-pdp__buy {
		padding: 20px;
		border: 1px solid var(--ms-line);
		border-radius: var(--pdp-r);
		background: #fff;
		box-shadow: 0 1px 2px rgba(16, 40, 44, .04);
	}

	/* В узкой панели покупки гарантии идут одной колонкой: в две колонки
	   строки ломаются на 340 px. */
	.ms-pdp__buy .ms-pdp__guarantees { grid-template-columns: minmax(0, 1fr); gap: 10px; }

	/* Строка покупки в панели 340 px: количество и «В корзину» в первом ряду,
	   «Купить сейчас» с иконками избранного и сравнения — во втором.
	   Так панель занимает два ряда вместо четырёх: в первом экране остаётся
	   место для доставки и гарантий. */
	.ms-pdp__cart .quantity { flex: 0 0 auto; }
	.ms-pdp__cart .single_add_to_cart_button { flex: 1 1 auto; }
	.ms-pdp__buynow { flex: 1 1 auto; padding: 0 14px; }

	.ms-pdp__fast-row { grid-template-columns: minmax(0, 1fr); }

	.ms-pdp__deliv-form { flex-wrap: wrap; }
	.ms-pdp__deliv-form input { flex: 1 1 100%; }
	.ms-pdp__deliv-form .ms-btn { flex: 1 1 100%; }
}

@media (min-width: 1440px) {
	.ms-pdp__buybox { grid-template-columns: minmax(0, 1fr) 380px; }
}

@media (max-width: 1279px) {
	.ms-pdp__title { font-size: 24px; }
	.ms-pdp__price { font-size: 33px; }

	.ms-pdp__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ms-pdp__doc--registracionnoe-udost { grid-column: auto; }
	.ms-pdp__b2b { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1023px) {
	.ms-pdp__sticky-inner { gap: 14px; min-height: 60px; }
	.ms-pdp__sticky-name { display: none; }
	.ms-pdp__sticky-price { font-size: 18px; }
}

@media (max-width: 767px) {
	/* На телефоне первый экран дорог: подсказка «наведите курсор» и счётчик
	   фото бессмысленны и съедают 70 px — название и цена должны быть видны
	   сразу после фото. */
	.ms-pdp__gallery-hint,
	.ms-pdp__gallery-count { display: none; }

	.ms-pdp__hero { padding-top: 12px; }

	.ms-pdp__buybox { padding: 18px; }

	.ms-pdp__price { font-size: 28px; }
	.ms-pdp__title { font-size: 21px; }

	.ms-pdp__meta { gap: 4px 10px; }
	.ms-pdp__meta > * + * { padding-left: 10px; }

	.ms-pdp__trust { grid-template-columns: minmax(0, 1fr); }
	.ms-pdp__guarantees { grid-template-columns: minmax(0, 1fr); }
	.ms-pdp__b2b { padding: 20px; }
	.ms-pdp__b2b-list { grid-template-columns: minmax(0, 1fr); }

	.ms-pdp__specs { grid-template-columns: minmax(0, 1fr); gap: 18px; }

	.ms-pdp__cart .single_add_to_cart_button,
	.ms-pdp__buynow { flex: 1 1 100%; }

	.ms-pdp__cart .quantity { order: 1; }
	.ms-pdp__cart .ms-product-fav,
	.ms-pdp__cart .ms-product-cmp { order: 3; }

	.ms-pdp__tablist {
		width: 100%;
		border-radius: var(--pdp-r-sm);
	}

	.ms-pdp__tab {
		flex: 1 1 auto;
		justify-content: center;
		padding: 0 14px;
		font-size: 13.5px;
	}

	.ms-pdp__rail-track { grid-auto-columns: minmax(210px, 68%); }

	.ms-pdp__sticky-img,
	.ms-pdp__sticky-media .ms-ph { display: none; }
}

@media (max-width: 480px) {
	.ms-pdp__sticky-actions .ms-btn { padding: 0 16px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.ms-pdp *,
	.ms-pdp-modal * {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* ----------------------------------------------------------------------------
 * Позиции «цена по запросу».
 *
 * В прайсе поставщика часть позиций идёт без цены (условная ставка 1,01 ₽).
 * Кнопки «В корзину» у них нет по определению, поэтому вместо пустого блока
 * покупки стоит запрос счёта — тот же путь, что у оптового покупателя.
 * --------------------------------------------------------------------------*/
.ms-pdp__cart-note {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.45;
}

.ms-pdp__price .ms-price-ask {
	font-family: var(--ms-font-head);
	font-size: 26px;
	font-weight: 700;
	color: var(--ms-ink);
}