/**
 * plv-shell.css — оболочка мобильной витрины: двухэтажная шапка и таб-бар.
 *
 * W2 по hand-off 29.08.2026 (`examples/design-handoff-20260829/README.md`,
 * экран «Главная» → sticky header, и «Компоненты» → таб-бар).
 *
 * Файл отдельный по той же причине, что `plv-dock.css` и `plv-weighted.css`:
 * `style.css` — файл подрядчика и сейчас в незакоммиченной работе. Здесь
 * только новые классы `plvh-*`, `plvtb-*` и точечные переопределения для
 * `.plv-nav` / `.plv-search` / `.plv-cart-bar`, каждое с причиной.
 *
 * Значения — токенами из assets/css/tokens.css (W1). Своих hex нет.
 */

/* ═══ Шапка ═══════════════════════════════════════════════════════════════ */

.plvh {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: color-mix(in srgb, var(--plv-paper) 94%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--plv-line);
	padding-top: var(--plv-safe-top);
}

/* Панель раньше липла сама; теперь липнет шапка целиком, иначе ряд поиска
   уезжал бы вверх отдельно от верхнего ряда. */
.plvh .plv-nav {
	position: static;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom: 0;
	box-shadow: none;
	gap: 8px;
}

/* Город — главный элемент верхнего ряда (в макете он крупный и слева). */
.plvh .plv-nav-delivery-btn {
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-17);
	font-weight: 800;
	letter-spacing: var(--plv-tr-15);
	color: var(--plv-ink);
	gap: 4px;
}

.plvh .plv-nav-delivery-pin {
	width: 14px;
	height: 14px;
	color: var(--plv-brand-ink);
}

.plv-nav-delivery-caret {
	font-size: var(--plv-fs-12);
	line-height: 1;
	color: var(--plv-text-3);
}

/* --- Пилюля ближайшей доставки ------------------------------------------- */

.plvh-slot {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 11px;
	border: 0;
	border-radius: var(--plv-r-pill);
	background: var(--plv-teal-tint);
	color: var(--plv-teal-text);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-125);
	font-weight: 700;
	line-height: 1.15;
	white-space: nowrap;
	cursor: pointer;
	margin-left: auto;
}

.plvh-slot-dot {
	width: 6px;
	height: 6px;
	border-radius: var(--plv-r-pill);
	background: var(--plv-teal);
	flex: 0 0 auto;
}

.plvh-slot:active {
	transform: scale(0.98);
}

/* --- Ряд поиска ----------------------------------------------------------- */

.plvh-search {
	padding: 0 var(--plv-gutter) 10px;
}

.plvh-search[hidden] {
	display: none;
}

/* Поле переезжает сюда со страницы вместе со своими обработчиками, поэтому
   правим только внешний вид, не разметку. */
.plvh-search .plv-search {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: none;
	height: 48px;
	margin: 0;
	padding: 0 12px;
	background: var(--plv-surface);
	border: 1px solid color-mix(in srgb, var(--plv-ink) 12%, transparent);
	border-radius: var(--plv-r-14);
	box-shadow: var(--plv-sh-search);
}

.plvh-search .plv-search-icon {
	display: flex;
	width: 18px;
	height: 18px;
	color: var(--plv-text-3);
	flex: 0 0 auto;
	font-size: var(--plv-fs-14);
}

.plvh-search .plv-search-icon svg {
	width: 18px;
	height: 18px;
}

.plvh-search .plv-search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: 0;
	background: none;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-155);
	font-weight: 400;
	color: var(--plv-ink);
	outline: none;
	/* iOS зумит страницу на фокусе, если шрифт меньше 16px — здесь 15.5,
	   поэтому размер поднимаем при самом фокусе. */
}

.plvh-search .plv-search-input:focus {
	font-size: 16px;
}

.plvh-search .plv-search-input::placeholder {
	color: var(--plv-text-4);
}

.plvh-search .plv-search-clear {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: var(--plv-r-pill);
	background: none;
	color: var(--plv-text-3);
	cursor: pointer;
}

/* ═══ Таб-бар ═════════════════════════════════════════════════════════════
 * Только на телефоне. Правая вкладка открывает меню разделов — корзины в
 * таб-баре нет: её плашка и так появляется после первого добавления
 * (решение заказчика 29.08.2026).
 */

.plvtb {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 300;
	display: none;
	background: color-mix(in srgb, var(--plv-paper) 96%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--plv-line);
	padding: 8px 6px calc(6px + var(--plv-safe-bottom));
}

.plvtb-item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: var(--plv-hit);
	padding: 4px 2px;
	border: 0;
	background: none;
	color: var(--plv-text-4);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-11);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.plvtb-item svg {
	width: 19px;
	height: 19px;
}

.plvtb-item.is-active {
	color: var(--plv-brand-ink);
}

.plvtb-burger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 19px;
	height: 19px;
}

.plvtb-burger i {
	display: block;
	width: 17px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

@media (max-width: 767px) {
	.plvtb {
		display: flex;
	}

	/* Логотип уходит: в макете верхний ряд отдан городу и дате доставки,
	   а логотип и так стоит в шапке страницы. */
	.plvh .plv-nav-logo {
		display: none;
	}

	/* Кабинет и корзина переехали в меню разделов (правая вкладка).
	   Язык вернули наверх 31.08.2026: в панели разделов его искали слишком
	   долго, а переключение языка — первое, что делает не-русский покупатель. */
	.plvh .plv-nav-account,
	.plvh .plv-nav-cart {
		display: none;
	}

	/* Язык прижат к правому краю панели. */
	.plvh .plv-lang {
		margin-left: auto;
	}

	.plvh .plv-nav {
		padding: 10px var(--plv-gutter) 8px;
		min-height: 0;
	}

	/* Плашка корзины садится НАД таб-баром, иначе они наезжают друг на друга. */
	body.plv-has-tabbar .plv-cart-bar {
		bottom: calc(var(--plv-tabbar-h) + var(--plv-safe-bottom));
		padding-bottom: 10px;
	}

	/* Прежняя плавающая кнопка меню больше не нужна — её роль у вкладки. */
	body.plv-has-tabbar .plvbn-btn {
		display: none;
	}

	/* Место под таб-бар, чтобы последний блок страницы не уезжал под него. */
	body.plv-has-tabbar {
		padding-bottom: calc(var(--plv-tabbar-h) + var(--plv-safe-bottom));
	}
}

/* Совсем узкий экран: пилюля уходит под город. Замер на 375 px показал,
   что в строку она влезает (62 + 170 + отступы), поэтому порог низкий —
   иначе плашка растягивалась во всю ширину и читалась как баннер. */
@media (max-width: 339px) {
	.plvh .plv-nav {
		flex-wrap: wrap;
		row-gap: 6px;
	}

	.plvh-slot {
		margin-left: 0;
		width: 100%;
		justify-content: center;
	}
}

/* Шапка страницы: отступ слева держал место под плавающую кнопку меню,
   а её на телефоне больше нет — вкладка «Меню» заняла её роль. Логотип
   уменьшен: в макете первый экран отдан товарам. */
@media (max-width: 767px) {
	.plvch-hero--slim {
		padding-left: var(--plv-gutter);
		padding-right: var(--plv-gutter);
	}

	/* Логотип страницы убран: он переехал в шапку (30.08.2026), и два
	   одинаковых знака подряд читались как ошибка вёрстки. */
	.plvch-hero-logo {
		display: none;
	}
}

/* Язык и кабинет внутри меню разделов (вкладка «Меню»). */
.plvbn-utils {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0 4px;
	padding-top: 12px;
	border-top: 1px solid color-mix(in srgb, var(--plv-paper) 22%, transparent);
}

.plvbn-utils .plv-lang,
.plvbn-utils .plv-nav-account {
	display: inline-flex;
}

/* ═══ Правки после первой проверки в браузере (29.08.2026) ════════════════
 * `.plv-nav button { background: none; font-family: inherit }` в style.css
 * специфичнее одиночного класса — пилюля выходила без фона и чужим шрифтом.
 * Поднимаем вес селектора вместо !important.
 */

/* Дата доставки бывает длинной («Привезём в пятницу, 4 сен») и выталкивала
   переключатель языка на отдельную строку. Пусть ужимается сама. */
.plvh .plvh-slot {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	background: var(--plv-teal-tint);
	color: var(--plv-teal-text);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-125);
	font-weight: 700;
}

.plvh .plvh-slot-dot {
	background: var(--plv-teal);
}

/* ═══ Ряд поиска ══════════════════════════════════════════════════════════ */

.plvh-search {
	display: flex;
	align-items: center;
	gap: 8px;
}

.plvh-search .plv-search {
	flex: 1 1 auto;
}

/* ═══ Ряд фильтров: метки и категории ═════════════════════════════════════
 * Одна строка, но два разных действия: метка фильтрует выдачу и залипает,
 * категория ведёт к своему месту в каталоге. Поэтому метки цветные, а
 * категории — обычные пилюли.
 */

.plvh-pills {
	display: flex;
	gap: 7px;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 0 var(--plv-gutter) 10px;
	/* Без этого ряд распирает шапку и уезжает за правый край (урок §69). */
	min-width: 0;
}

.plvh-pills::-webkit-scrollbar {
	display: none;
}

.plvh .plvh-pill {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	border: 1px solid var(--plv-line-strong);
	border-radius: var(--plv-r-pill);
	background: var(--plv-surface);
	color: var(--plv-ink);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-14);
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

.plvh-pill-ic {
	font-size: var(--plv-fs-14);
	line-height: 1;
}

/* Метка носит свой цвет и в покое: по нему её и узнают на карточках. */
.plvh .plvh-pill--label {
	border-color: color-mix(in srgb, var(--lbl, var(--plv-brand)) 45%, transparent);
	background: color-mix(in srgb, var(--lbl, var(--plv-brand)) 10%, var(--plv-surface));
}

.plvh .plvh-pill--label[aria-pressed="true"] {
	background: var(--lbl, var(--plv-brand));
	border-color: var(--lbl, var(--plv-brand));
	color: var(--plv-surface);
}

.plvh .plvh-pill--cat.is-loading {
	opacity: 0.6;
}

/* ═══ W3: карточка товара в списке ════════════════════════════════════════
 * Степпер, бейдж скидки, ровные подписи. Правила живут здесь, а не в
 * style.css, по той же причине, что и остальное в этом файле.
 */

/* --- Бейдж скидки --------------------------------------------------------
 * Считается из regular/sale в sk_print и вытесняет обычную метку: экономию
 * надо назвать цифрой, иначе её видно только по зачёркнутой цене.
 */
.plvl--sale {
	background: var(--plv-terracotta);
	color: var(--plv-surface);
	font-variant-numeric: tabular-nums;
}

/* 08.10.2026 (F320): меток на карточке теперь несколько, столбиком. В угол фото
 * упирается только первая — у следующих скругляется лишь правый край. */
.plvl-row .plvl + .plvl {
	border-radius: 0 12px 12px 0;
}

/* --- QtyControl ----------------------------------------------------------
 * Пусто — светлая брендовая кнопка «+»; есть количество — заливка брендом.
 * Текст на заливке ТЁМНЫЙ: белый на #00c2e8 даёт контраст 2,1:1.
 */
.plvch-grid .plvp-qty,
.plvp-grid .plvp-qty {
	height: var(--plv-hit);
	border-radius: var(--plv-r-12);
	background: var(--plv-brand-tint);
	border: 1px solid color-mix(in srgb, var(--plv-brand) 34%, transparent);
	color: var(--plv-brand-ink);
	box-shadow: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.plvch-grid .plvp-qty-btn,
.plvp-grid .plvp-qty-btn {
	width: var(--plv-hit);
	height: var(--plv-hit);
	font-family: var(--plv-font-ui);
	font-size: 24px;
	font-weight: 600;
}

.plvch-grid .plvp-qty.is-on,
.plvp-grid .plvp-qty.is-on {
	background: var(--plv-brand);
	border-color: var(--plv-brand);
	color: var(--plv-on-brand);
}

.plvch-grid .plvp-qty.is-on .plvp-qty-btn,
.plvp-grid .plvp-qty.is-on .plvp-qty-btn {
	width: 34px;
	height: 36px;
	font-size: 20px;
	font-weight: 700;
}

.plvch-grid .plvp-qty.is-on .plvp-qty-n,
.plvp-grid .plvp-qty.is-on .plvp-qty-n {
	min-width: 16px;
	font-size: var(--plv-fs-145);
	font-weight: 800;
}

.plvch-grid .plvp-qty.is-on .plvp-qty-btn:hover,
.plvp-grid .plvp-qty.is-on .plvp-qty-btn:hover {
	background: color-mix(in srgb, var(--plv-ink) 8%, transparent);
}

/* Пока запрос в пути, степпер уже показывает новое число (оптимистично) —
   гасим его, чтобы отличать от подтверждённого состояния. */
.plvp-qty[data-plv-busy] {
	opacity: 0.72;
}

/* --- Подписи -------------------------------------------------------------
 * Название занимает две строки всегда: иначе соседи по ряду встают на
 * разной высоте и сетка «пляшет».
 */
.plvch-grid .plvp-name,
.plvp-grid .plvp-name {
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-135);
	font-weight: 600;
	min-height: calc(var(--plv-fs-135) * 1.32 * 2);
}

.plvch-grid .plvp-price,
.plvp-grid .plvp-price {
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-17);
	font-weight: 800;
}

.plvch-grid .plvp-price-orig,
.plvp-grid .plvp-price-orig {
	color: var(--plv-strike);
}

/* ═══ Тост ════════════════════════════════════════════════════════════════
 * Подтверждение добавления. Садится над таб-баром и плашкой корзины —
 * иначе перекрывает их обе.
 */

.plvt {
	position: fixed;
	left: var(--plv-gutter);
	right: var(--plv-gutter);
	bottom: calc(var(--plv-tabbar-h) + var(--plv-safe-bottom) + 84px);
	z-index: 1150;
	padding: 13px 16px;
	border-radius: var(--plv-r-14);
	background: var(--plv-ink);
	color: var(--plv-paper);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-14);
	font-weight: 600;
	box-shadow: var(--plv-sh-toast);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
}

.plvt.is-on {
	opacity: 1;
	transform: none;
}

@media (min-width: 768px) {
	.plvt {
		left: auto;
		right: 24px;
		bottom: 24px;
		max-width: 380px;
	}
}

/* --- Заглушка фото по главе ----------------------------------------------
 * Пока картинка грузится (и у товаров без фото) вместо серого прямоугольника
 * — тёплый фон в тон главе, как в макете. Ключи глав приходят из настроек
 * витрины, поэтому список короткий и совпадает с текущими семью.
 */
.plvch--farm .plvp-photo-wrap,
.plvch--garden .plvp-photo-wrap {
	background: var(--plv-img-green);
}

.plvch--sea .plvp-photo-wrap {
	background: var(--plv-img-sea);
}

.plvch--pantry .plvp-photo-wrap,
.plvch--drugoe .plvp-photo-wrap {
	background: var(--plv-img-warm);
}

.plvch--best .plvp-photo-wrap,
.plvch--eve .plvp-photo-wrap {
	background: var(--plv-img-set);
}

/* ═══ W5: страница весового товара ═══════════════════════════════════════
 * Якорь — цена за килограмм, под ней расчёт от среднего веса и одна строка
 * про допуск. Прежняя строка цены у весового товара прячется: она называла
 * сумму за средний вес, и рядом с ценой за килограмм читалась как вторая
 * цена того же товара.
 */

.plv-product--weighted .plv-product-price-row {
	display: none;
}

.plvwp {
	margin: 14px 0 4px;
	padding: 16px;
	border-radius: var(--plv-r-20);
	background: var(--plv-paper);
}

.plvwp-main {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.plvwp-price {
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-34);
	font-weight: 800;
	letter-spacing: var(--plv-tr-34);
	color: var(--plv-ink);
	line-height: 1.05;
}

/* 04.10.2026: акция весового — зачёркнутая цена за кг перед ценой по акции */
.plvwp-orig {
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-15);
	font-weight: 600;
	color: var(--plv-strike);
}

.plvwp-per {
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-15);
	font-weight: 600;
	color: var(--plv-text-3);
}

.plvwp-avg {
	margin-top: 6px;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-15);
	font-weight: 700;
	color: var(--plv-text-2);
}

/* Порционная подсказка — необязательное поле товара; пусто, и блока нет. */
.plvwp-hint {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 10px;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-135);
	font-weight: 700;
	color: var(--plv-green);
}

.plvwp-hint svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.plvwp-note {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--plv-line);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-125);
	font-weight: 400;
	line-height: 1.45;
	color: var(--plv-text-3);
}

/* ═══ Липкая панель покупки ══════════════════════════════════════════════ */

.plvpb {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(var(--plv-tabbar-h) + var(--plv-safe-bottom));
	z-index: 260;
	padding: 10px var(--plv-gutter) 12px;
	background: color-mix(in srgb, var(--plv-surface) 96%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--plv-line);
}

.plvpb[hidden] {
	display: none;
}

.plvpb-line {
	margin-bottom: 8px;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-13);
	font-weight: 500;
	color: var(--plv-text-2);
}

.plvpb-line:empty {
	display: none;
}

.plvpb-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 54px;
	border: 0;
	border-radius: var(--plv-r-15);
	background: var(--plv-brand);
	color: var(--plv-on-brand);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-165);
	font-weight: 700;
	cursor: pointer;
}

.plvpb-cta:active {
	background: var(--plv-brand-strong);
}

.plvpb-total {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* На десктопе кнопка покупки видна и так — панель только на телефоне. */
@media (min-width: 768px) {
	.plvpb {
		display: none;
	}
}

/* Кнопка покупки на странице товара — в брендовом цвете, как и панель под
   экраном: две одинаковые по смыслу кнопки не должны быть разного цвета. */
.plv-product .plv-product-add {
	background: var(--plv-brand);
	background-image: none;
	color: var(--plv-on-brand);
	border-color: var(--plv-brand);
}

.plv-product .plv-product-add .plv-product-add-label {
	color: var(--plv-on-brand);
}

.plv-product .plv-product-add.is-disabled {
	background: var(--plv-line-strong);
	color: var(--plv-text-3);
}

/* ═══ W6: производитель и «часто берут вместе» ════════════════════════════ */

.plvpr {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 16px 0 4px;
	padding: 14px;
	border: 1px solid var(--plv-line);
	border-radius: var(--plv-r-18);
	background: var(--plv-surface);
}

.plvpr-photo {
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	border-radius: var(--plv-r-12);
	object-fit: cover;
}

.plvpr-name {
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-145);
	font-weight: 700;
	color: var(--plv-ink);
}

.plvpr-meta {
	margin-top: 2px;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-125);
	color: var(--plv-text-3);
}

.plvpr-story {
	margin-top: 6px;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-125);
	line-height: 1.45;
	color: var(--plv-text-3);
}

/* --- Часто берут вместе --------------------------------------------------- */

.plvcs {
	margin: 18px 0 6px;
}

.plvcs-title {
	margin: 0 0 10px;
	font-family: var(--plv-font-display);
	font-size: var(--plv-fs-19);
	font-weight: 700;
	color: var(--plv-ink);
}

.plvcs-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--plv-hit);
	margin-bottom: 8px;
	padding: 10px 12px;
	border: 1.5px solid var(--plv-line);
	border-radius: var(--plv-r-15);
	background: var(--plv-surface);
	cursor: pointer;
}

.plvcs-row.is-on {
	border-color: var(--plv-brand);
	background: var(--plv-brand-tint-2);
}

/* Настоящий чекбокс убран с глаз, но остаётся доступным с клавиатуры. */
.plvcs-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.plvcs-photo {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	border-radius: var(--plv-r-10);
	object-fit: cover;
	background: var(--plv-img-warm);
}

.plvcs-photo--ph {
	display: block;
}

.plvcs-body {
	flex: 1 1 auto;
	min-width: 0;
}

.plvcs-name {
	display: block;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-14);
	font-weight: 700;
	color: var(--plv-ink);
}

.plvcs-meta {
	display: block;
	margin-top: 2px;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-125);
	color: var(--plv-text-3);
}

.plvcs-box {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1.5px solid var(--plv-line-strong);
	border-radius: var(--plv-r-8);
	background: var(--plv-surface);
	color: transparent;
}

.plvcs-box svg {
	width: 14px;
	height: 14px;
}

.plvcs-row.is-on .plvcs-box {
	border-color: var(--plv-brand);
	background: var(--plv-brand);
	color: var(--plv-on-brand);
}

.plvcs-input:focus-visible + .plvcs-photo,
.plvcs-input:focus-visible ~ .plvcs-body {
	outline: 2px solid var(--plv-brand-ink);
	outline-offset: 2px;
}

/* Панель покупки и плашка корзины обе живут внизу и наложились друг на друга.
   На странице товара главная кнопка — «В корзину» этого товара, поэтому
   плашку прячем: перейти в корзину можно из шапки и из таб-бара. */
body:has(.plvpb:not([hidden])) .plv-cart-bar {
	display: none;
}

/* ═══ W7: наборы «Собрали за вас» ═════════════════════════════════════════ */

.plvst {
	margin: 18px 0 6px;
}

.plvst-head {
	padding: 0 var(--plv-gutter);
}

.plvst-title {
	margin: 0;
	font-family: var(--plv-font-display);
	font-size: var(--plv-fs-23);
	font-weight: 700;
	color: var(--plv-ink);
}

.plvst-sub {
	margin: 2px 0 12px;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-135);
	color: var(--plv-text-3);
}

.plvst-rail {
	display: flex;
	gap: var(--plv-gap-card);
	padding: 0 var(--plv-gutter) 4px;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}

.plvst-rail::-webkit-scrollbar {
	display: none;
}

.plvst-card {
	flex: 0 0 258px;
	scroll-snap-align: start;
	border-radius: var(--plv-r-20);
	background: var(--plv-surface);
	box-shadow: var(--plv-sh-card);
	overflow: hidden;
}

.plvst-photo {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 118px;
	padding: 12px;
	background-color: var(--plv-img-set);
	background-size: cover;
	background-position: center;
}

/* Затемнение снизу: без него белое название теряется на светлом фото. */
.plvst-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(12, 20, 16, 0.78), rgba(12, 20, 16, 0));
}

.plvst-name {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--plv-font-display);
	font-size: var(--plv-fs-17);
	font-weight: 700;
	line-height: 1.2;
	color: var(--plv-paper);
}

.plvst-body {
	padding: 12px;
}

.plvst-meta {
	margin: 0 0 10px;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-13);
	color: var(--plv-text-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(var(--plv-fs-13) * 1.4 * 2);
}

.plvst-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 46px;
	border: 0;
	border-radius: var(--plv-r-13);
	background: var(--plv-brand);
	color: var(--plv-on-brand);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-15);
	font-weight: 700;
	cursor: pointer;
}

.plvst-cta:disabled {
	opacity: 0.6;
}

.plvst-price {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* ═══ W8: корзина ═════════════════════════════════════════════════════════ */

/* Честная строка веса под позицией: сумма выше точная только на вид. */
.plv-checkout-item-wnote {
	margin-top: 3px;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-125);
	color: var(--plv-teal-text);
}

/* Скидка набора в итогах — единственная строка со знаком минус, поэтому
   выделяем её цветом, а не только минусом. */
.plv-checkout-total-row--discount {
	color: var(--plv-green);
	font-weight: 700;
}

/* --- Достройка набора ------------------------------------------------------
 * Пунктирная рамка отделяет предложение от того, что уже в корзине: это не
 * позиция заказа, а подсказка.
 */
.plvup-set {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0;
	padding: 12px 14px;
	border: 1px dashed color-mix(in srgb, var(--plv-terracotta) 40%, transparent);
	border-radius: var(--plv-r-18);
	background: var(--plv-surface);
}

.plvup-set-ic {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--plv-r-12);
	background: color-mix(in srgb, var(--plv-terracotta) 12%, var(--plv-surface));
	color: var(--plv-terracotta);
}

.plvup-set-ic svg {
	width: 22px;
	height: 22px;
}

.plvup-set-body {
	flex: 1 1 auto;
	min-width: 0;
}

.plvup-set-title {
	margin: 0;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-14);
	font-weight: 700;
	color: var(--plv-ink);
}

.plvup-set-meta {
	margin: 2px 0 0;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-125);
	color: var(--plv-text-3);
}

.plvup-set-btn {
	flex: 0 0 auto;
	height: 38px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--plv-r-11);
	background: var(--plv-terracotta);
	color: var(--plv-surface);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-135);
	font-weight: 700;
	cursor: pointer;
}

/* --- «Не забыли?» ---------------------------------------------------------- */

.plvup {
	margin: 16px 0 8px;
}

.plvup-title {
	margin: 0 0 10px;
	font-family: var(--plv-font-display);
	font-size: var(--plv-fs-19);
	font-weight: 700;
	color: var(--plv-ink);
}

.plvup-rail {
	display: flex;
	gap: var(--plv-gap-card);
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.plvup-rail::-webkit-scrollbar {
	display: none;
}

.plvup-card {
	flex: 0 0 140px;
	padding: 8px;
	border: 1px solid var(--plv-line);
	border-radius: var(--plv-r-15);
	background: var(--plv-surface);
}

.plvup-photo {
	height: 96px;
	margin-bottom: 8px;
	border-radius: var(--plv-r-11);
	background-color: var(--plv-img-warm);
	background-size: cover;
	background-position: center;
}

.plvup-name {
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-13);
	font-weight: 600;
	line-height: 1.3;
	color: var(--plv-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(var(--plv-fs-13) * 1.3 * 2);
}

.plvup-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin-top: 6px;
}

.plvup-price {
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-135);
	font-weight: 800;
	color: var(--plv-ink);
}

.plvup-add {
	width: 38px;
	height: 38px;
	border: 1px solid color-mix(in srgb, var(--plv-brand) 34%, transparent);
	border-radius: var(--plv-r-11);
	background: var(--plv-brand-tint);
	color: var(--plv-brand-ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

/* --- Если товара не окажется ----------------------------------------------
 * Вопрос задаётся не всегда: только когда в корзине есть товар, который
 * реально часто отменяют (список считает бэкенд заказов).
 */
.plv-subst-q {
	margin: 0 0 10px;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-135);
	font-weight: 600;
	color: var(--plv-text-2);
}

.plv-subst-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--plv-hit);
	margin-bottom: 8px;
	padding: 10px 12px;
	border: 1.5px solid var(--plv-line);
	border-radius: var(--plv-r-15);
	background: var(--plv-surface);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-14);
	font-weight: 600;
	color: var(--plv-ink);
	cursor: pointer;
}

.plv-subst-row:has(input:checked) {
	border-color: var(--plv-brand);
	background: var(--plv-brand-tint-2);
}

.plv-subst-row input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.plv-subst-dot {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 2px solid var(--plv-line-strong);
	border-radius: var(--plv-r-pill);
	background: var(--plv-surface);
}

.plv-subst-row:has(input:checked) .plv-subst-dot {
	border: 6px solid var(--plv-brand);
}

/* --- Слоты доставки карточками --------------------------------------------
 * Значение по-прежнему хранит select — карточки только переключают его.
 * На телефоне список прячем, чтобы не спрашивать дату дважды.
 */
.plvsl-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 4px 0 8px;
}

.plvsl {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: var(--plv-hit);
	padding: 13px 14px;
	border: 1.5px solid var(--plv-line);
	border-radius: var(--plv-r-16);
	background: var(--plv-surface);
	text-align: left;
	cursor: pointer;
}

.plvsl-day {
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-145);
	font-weight: 800;
	color: var(--plv-ink);
}

.plvsl-date,
.plvsl-win {
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-13);
	font-weight: 600;
	color: var(--plv-text-3);
}

.plvsl.is-on {
	border-color: var(--plv-brand);
	background: var(--plv-brand);
}

.plvsl.is-on .plvsl-day,
.plvsl.is-on .plvsl-date,
.plvsl.is-on .plvsl-win {
	color: var(--plv-on-brand);
}

/* Закрытый слот виден и перечёркнут: исчезнувшая дата читается как ошибка,
   а «приём закрыт» — как правило работы. */
.plvsl.is-closed {
	background: color-mix(in srgb, var(--plv-ink) 4%, transparent);
	border-color: transparent;
	cursor: default;
}

.plvsl.is-closed .plvsl-day,
.plvsl.is-closed .plvsl-date {
	color: var(--plv-strike);
	text-decoration: line-through;
}

.plvsl-closed {
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-115);
	font-weight: 600;
	color: var(--plv-strike);
}

.plvsl-note {
	margin-top: 0;
}

@media (max-width: 767px) {
	.plvsl-grid ~ .plv-checkout-select,
	.plvsl-grid ~ label[for="plv-co-date"] {
		display: none;
	}
}

/* ═══ W9: «Уже заказывали» ════════════════════════════════════════════════
 * Тот же вид, что у карточек каталога: это те же товары, и вести они себя
 * должны одинаково. Отличие одно — горизонтальный рельс вместо сетки:
 * список личный и короткий, ему незачем занимать экран.
 */

.plv-reorder[hidden] {
	display: none;
}

.plv-reorder-rail {
	display: flex;
	gap: var(--plv-gap-card);
	overflow-x: auto;
	scrollbar-width: none;
	padding: 0 var(--plv-gutter) 4px;
}

.plv-reorder-rail::-webkit-scrollbar {
	display: none;
}

.plv-reorder-rail .plvp-card {
	flex: 0 0 152px;
}

/* ═══ W10: карточка производителя на главной ══════════════════════════════
 * Тёмная плашка: история человека, который это вырастил, оправдывает цену
 * лучше скидки. Фото приглушено, чтобы текст читался поверх него.
 */

.plvpf {
	margin: 26px var(--plv-gutter) 0;
	border-radius: var(--plv-r-22);
	background: var(--plv-ink);
	overflow: hidden;
}

.plvpf-photo {
	height: 150px;
	background-color: var(--plv-img-set);
	background-size: cover;
	background-position: center;
	opacity: 0.92;
}

.plvpf-body {
	padding: 16px;
}

.plvpf-eyebrow {
	margin: 0 0 6px;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-115);
	font-weight: 800;
	letter-spacing: var(--plv-tr-eyebrow);
	text-transform: uppercase;
	color: var(--plv-copper);
}

.plvpf-name {
	margin: 0;
	font-family: var(--plv-font-display);
	font-size: var(--plv-fs-21);
	font-weight: 700;
	color: var(--plv-paper);
}

.plvpf-meta {
	margin: 4px 0 0;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-125);
	color: var(--plv-on-dark-sub);
}

.plvpf-story {
	margin: 10px 0 0;
	padding-top: 12px;
	border-top: 1px solid color-mix(in srgb, var(--plv-paper) 16%, transparent);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-135);
	line-height: 1.5;
	color: var(--plv-on-dark-sub);
}

/* ═══ Логотип и сжатие шапки при прокрутке (31.08.2026) ═══════════════════
 * Логотип стоит СЛЕВА и в покое, и в движении — меняется только его размер.
 * До этой правки он стоял по центру, а при первом же касании прокрутки
 * прыгал в левый угол: скачок по горизонтали читался как сбой вёрстки.
 * Теперь шапка всегда одна flex-строка (логотип + панель), ряд поиска и ряд
 * меток идут следующими строками, а прокрутка только ужимает логотип.
 */

.plvh {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.plvh-logo {
	order: 0;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 46px;
	padding: 7px 0 7px var(--plv-gutter);
	overflow: hidden;
	transition: height 0.18s ease, padding 0.18s ease, opacity 0.18s ease;
}

.plvh-logo img {
	height: 100%;
	width: auto;
	display: block;
}

/* Панель занимает остаток строки. Внутри она переносится сама: рядом с
   крупным логотипом город, дата и язык в одну строку не встают, а в
   движении логотип мелкий — и всё сходится обратно. */
.plvh .plv-nav {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: wrap;
	row-gap: 4px;
}

.plvh-search,
.plvh-pills {
	order: 2;
	flex: 0 0 100%;
}

.plvh.is-scrolled .plvh-logo {
	height: 26px;
	padding-top: 4px;
	padding-bottom: 4px;
}

/* Поле поиска в движении убрано: до него дотягиваются вкладкой «Поиск»,
   а место на экране дороже. */
.plvh.is-scrolled .plvh-search {
	display: none;
}

/* Развёрнутый поиск важнее сжатия: если человек нажал «Поиск», строка
   возвращается даже посреди каталога. */
.plvh.is-search .plvh-search {
	display: flex;
}

.plvh.is-search.is-scrolled .plvh-logo {
	height: 0;
	padding: 0;
	opacity: 0;
}

@media (min-width: 768px) {
	/* На десктопе логотип в шапке не нужен: он есть в самой странице. */
	.plvh-logo {
		display: none;
	}
}

/* ═══ Режим поиска (30.08.2026) ═══════════════════════════════════════════
 * Найденное собирается в одну ленту и сортируется по продажам. Всё, что не
 * относится к поиску товара, на это время убирается: человек ищет конкретное,
 * и наборы с рельсами ему сейчас мешают.
 */

.plvsr[hidden] {
	display: none;
}

.plvsr {
	padding: 12px var(--plv-gutter) 4px;
}

.plvsr-title {
	margin: 0 0 10px;
	font-family: var(--plv-font-display);
	font-size: var(--plv-fs-20);
	font-weight: 700;
	color: var(--plv-ink);
}

body.plv-searching .plvst,
body.plv-searching .plv-reorder,
body.plv-searching .plvpf,
body.plv-searching .plvch-wave,
body.plv-searching .plvch-more {
	display: none !important;
}

/* Заголовки глав в режиме поиска не нужны: лента одна и уже озаглавлена. */
body.plv-searching [data-plv-section] {
	display: none !important;
}

/* ═══ Что убрано из шапки страницы (30.08.2026) ═══════════════════════════
 * Полоса меток-квадратов и логотип переехали наверх: метки теперь стоят в
 * общем ряду с категориями, логотип — первой строкой шапки. Узел полосы
 * остаётся в DOM скрытым — на нём висит рабочий фильтр из plv-dock.js,
 * по его кнопкам и кликает ряд.
 */
/* Полосу меток прячем на ВСЕХ ширинах, а не только на телефоне: ряд в шапке
   есть и на десктопе, и два одинаковых набора меток подряд читались как сбой
   вёрстки — 112 px первого экрана впустую. */
.plvch-labels,
.plvch-labels-hold {
	display: none !important;
}

@media (max-width: 767px) {
	.plvch-hero-logo {
		display: none !important;
	}

	/* Шапка страницы без логотипа и меток осталась пустой полосой. */
	.plvch-hero--slim {
		min-height: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* ═══ Правки по замечаниям заказчика (30.08.2026) ═════════════════════════ */

/* Счётчик на вкладке корзины: она теперь единственный постоянный вход в
   корзину, и число рядом с ней — то, ради чего её туда и поставили. */
.plvtb-item--cart {
	position: relative;
}

.plvtb-badge {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: 4px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: var(--plv-r-pill);
	background: var(--plv-brand);
	color: var(--plv-on-brand);
	font-family: var(--plv-font-ui);
	font-size: 10.5px;
	font-weight: 800;
	line-height: 17px;
	text-align: center;
}

.plvtb-badge[hidden] {
	display: none;
}
/* 06.10.2026: в значке — сумма корзины («78.47 €»): строка шире числа, без переноса */
.plvtb-badge { white-space: nowrap; }

/* --- Логотип в движении встаёт В ОДИН РЯД с городом и датой доставки ------
 * Отдельной строкой он висел выше пилюль и выглядел «съехавшим». В покое
 * логотип остаётся крупным по центру, в движении — уходит влево, в строку.
 */
/* В движении город и дата ужимаются: рядом с логотипом им тесно. */
.plvh.is-scrolled .plv-nav-delivery-btn {
	font-size: var(--plv-fs-145);
}

.plvh.is-scrolled .plvh-slot {
	padding: 5px 9px;
	font-size: var(--plv-fs-12);
}

/* Плашка корзины на телефоне больше не нужна: корзина стоит в таб-баре со
   счётчиком и видна всегда, а плашка занимала ещё 76 px над ним и говорила
   то же самое. На десктопе таб-бара нет — там плашка остаётся. */
@media (max-width: 767px) {
	body.plv-has-tabbar .plv-cart-bar {
		display: none !important;
	}

	/* Место под таб-бар считается без плашки. */
	.plvpb {
		bottom: calc(var(--plv-tabbar-h) + var(--plv-safe-bottom));
	}
}

/* ═══ Баннеры товаров: карусель тёмных карточек (30.08.2026) ═══════════════
   Переключение — родной горизонтальный скролл со snap, а не JS-слайдер:
   на телефоне свайп должен вести себя как везде в системе, с инерцией и
   резиновым краем. JS остаётся только на точках и автопрокрутке.          */

.plvbr {
	position: relative;
	margin: 22px 0 0;
}

.plvbr-track {
	display: flex;
	gap: var(--plv-gap-card);
	padding: 0 var(--plv-gutter) 2px;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.plvbr-track::-webkit-scrollbar {
	display: none;
}

/* Уголок следующей карточки виден нарочно: это единственная подсказка,
   что баннер листается, и она честнее любой стрелки. */
.plvbr-card {
	flex: 0 0 calc(100% - var(--plv-gutter) - 26px);
	scroll-snap-align: center;
	border-radius: var(--plv-r-22);
	background: var(--plv-ink);
	overflow: hidden;
}

.plvbr-track > .plvbr-card:only-child {
	flex-basis: calc(100% - var(--plv-gutter));
}

.plvbr-photo {
	height: 150px;
	background-color: var(--plv-img-set);
	background-size: cover;
	background-position: center;
	opacity: 0.92;
}

.plvbr-body {
	padding: 14px 16px 16px;
}

.plvbr-eyebrow {
	margin: 0 0 6px;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-115);
	font-weight: 800;
	letter-spacing: var(--plv-tr-eyebrow);
	text-transform: uppercase;
	color: var(--plv-copper);
}

.plvbr-title {
	margin: 0;
	font-family: var(--plv-font-display);
	font-size: var(--plv-fs-21);
	font-weight: 700;
	line-height: 1.2;
	color: var(--plv-paper);
}

.plvbr-text {
	margin: 8px 0 0;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-135);
	line-height: 1.5;
	color: var(--plv-on-dark-sub);
}

.plvbr-buy {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid color-mix(in srgb, var(--plv-paper) 16%, transparent);
}

.plvbr-prod {
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
}

.plvbr-prod-name {
	display: block;
	overflow: hidden;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-145);
	font-weight: 700;
	color: var(--plv-paper);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.plvbr-prod-meta {
	display: block;
	margin-top: 2px;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-13);
	font-variant-numeric: tabular-nums;
	color: var(--plv-on-dark-sub);
}

.plvbr-cta {
	flex: 0 0 auto;
	height: 42px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--plv-r-13);
	background: var(--plv-brand);
	color: var(--plv-on-brand);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-15);
	font-weight: 800;
	cursor: pointer;
}

.plvbr-cta:disabled {
	opacity: 0.6;
}

.plvbr-cta.is-done {
	background: var(--plv-green);
	color: var(--plv-paper);
}

.plvbr-dots {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-top: 10px;
}

.plvbr-dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--plv-line-strong);
	cursor: pointer;
	transition: width 0.18s ease, background 0.18s ease;
}

.plvbr-dot.is-on {
	width: 20px;
	border-radius: 4px;
	background: var(--plv-ink);
}

/* Во время поиска баннер — тот же шум, что наборы и производитель. */
body.plv-searching .plvbr {
	display: none !important;
}

@media (min-width: 768px) {
	.plvbr-card {
		flex-basis: 420px;
	}

	.plvbr-track > .plvbr-card:only-child {
		flex-basis: 560px;
	}
}

/* Русский показываем буквами, а не флагом (31.08.2026, решение заказчика).
   Остальные локали остаются флагами. */
.plv-lang-flag.plv-lang-abbr {
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-13);
	font-weight: 800;
	letter-spacing: var(--plv-tr-15);
	line-height: 1;
}

/* ═══ Лайки на карточке (31.08.2026) ══════════════════════════════════════
 * Пилюля лайка стояла в левом верхнем углу фото — там же, где ярлык метки
 * («Бестселлер», «Акция»). Пока лайков не было ни у кого, они не пересекались;
 * с первыми же числами ярлык накрыл счётчик. Уводим лайк в правый верхний
 * угол: он там один, а «+» и значок весового товара стоят снизу.
 */

.plvp-card .plvp-like,
.plvch-grid .plvp-like,
.plvp-grid .plvp-like {
	left: auto;
	right: 10px;
	top: 10px;
	width: auto;
	min-width: 30px;
	padding: 0 8px;
	gap: 3px;
}

/* Трёхзначное число в круг не влезало — пилюля растягивается по содержимому. */
.plvp-like-n {
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-13);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* Лайки на странице товара: строка под заголовком, рядом с артикулом. */
.plv-product-like {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 6px 0 2px;
	padding: 4px 10px 4px 8px;
	border-radius: 999px;
	background: var(--plv-green-tint);
	color: var(--plv-green);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-13);
	font-weight: 700;
}

.plv-product-like svg {
	width: 15px;
	height: 15px;
}

.plv-product-like-tx {
	font-weight: 600;
	opacity: 0.85;
}

/* ═══ Вероятность доставки у позиции корзины (01.09.2026) ═════════════════
 * Пришла на смену вопросу «что делать, если не привезут». Цифра должна
 * читаться как справка, а не как предупреждение: у высоких процентов тон
 * спокойный, тревожный — только там, где действительно шатко.
 */

/* Пояснение вешаем на ВСЮ строку товара, а не на плашку и не на колонку с
   названием: колонка зажата между фото и кнопками количества — на телефоне
   ей достаётся 137 px, и подсказка складывалась в узкий столбик высотой в
   пол-экрана. По строке выходит 310 px и пять строк текста. */
.plv-checkout-item {
	position: relative;
}

.plvdr {
	margin-top: 6px;
}

.plvdr-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px 3px 7px;
	border: 0;
	border-radius: 999px;
	background: var(--plv-line-soft);
	color: var(--plv-text-3);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-12, 12px);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	cursor: pointer;
	text-align: left;
}

.plvdr-dot {
	width: 6px;
	height: 6px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: currentColor;
}

/* Что здесь есть пояснение, показываем пунктиром под текстом — как принято
   для сносок. Кружок «?» стоил 18 px, и «100% доезжает» переставало влезать
   в колонку строки: плашка ломалась на две строки. */
.plvdr-txt {
	border-bottom: 1px dotted currentColor;
}

.plvdr--ok .plvdr-chip {
	background: var(--plv-green-tint);
	color: var(--plv-green);
}

.plvdr--mid .plvdr-chip {
	background: #fdf3e3;
	color: var(--plv-gold);
}

.plvdr--low .plvdr-chip {
	background: #fbeae4;
	color: var(--plv-terracotta);
}

.plvdr-note {
	position: absolute;
	/* Выше таб-бара и плашки корзины — иначе подсказку срезает снизу. */
	z-index: 120;
	/* Отсчёт идёт от строки товара, поэтому подсказка встаёт под ней целиком. */
	top: calc(100% - 4px);
	/* Ширину задаём краями колонки, а не числом: плашка стоит с отступом от
	   левого края, и фиксированные 280 px вылезали за правый край экрана. */
	left: 0;
	right: 0;
	max-width: 320px;
	margin: 0;
	padding: 10px 12px;
	border-radius: var(--plv-r-13);
	background: var(--plv-ink);
	color: var(--plv-paper);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-12, 12px);
	line-height: 1.45;
	box-shadow: 0 10px 30px rgba(22, 33, 28, 0.22);
}

.plvdr-note[hidden] {
	display: none;
}

/* На мыши достаточно наведения — тапу нужен клик, он в plv-shell.js. */
@media (hover: hover) {
	.plvdr:hover .plvdr-note[hidden] {
		display: block;
	}
}

/* ═══ Страница не должна ездить вбок (01.09.2026) ════════════════════════
 * Заказчик: «при скроле часто нечаянно вместо скрола вниз скролишь вбок».
 *
 * Причина была одна и конкретная: ряды шапки считались в `content-box`, и
 * `flex-basis: 100%` + боковые отступы 16 px давали 407 px на экране 375 —
 * документ становился шире окна, и палец таскал его вбок.
 */

.plvh,
.plvh-logo,
.plvh-search,
.plvh-pills,
.plvtb {
	box-sizing: border-box;
}

/* Подстраховка: `clip`, а не `hidden`. `hidden` делает body контейнером
   прокрутки и ломает `position: sticky` у шапки; `clip` просто отрезает
   лишнее по горизонтали и вертикальную прокрутку не трогает. */
@media (max-width: 767px) {
	body {
		overflow-x: clip;
	}
}

/* Карусели листаются как листались, но их прокрутка больше не «протекает»
   на страницу и не будит жест «назад» у браузера. */
.plvh-pills,
.plvbr-track,
.plvst-rail,
.plvup-rail,
.plv-reorder-rail,
.plvsl-grid,
.plvcs-rail {
	overscroll-behavior-x: contain;
}

/* ═══ Тоньше закреплённые полосы (01.09.2026) ════════════════════════════
 * Заказчик: «верхние и нижние зафиксированные элементы много занимают места».
 * Ужимаем отступы и высоты, не убирая ни одного элемента: в движении шапка
 * 96 → 74 px, таб-бар 67 → 54 px. Это +35 px под карточки на каждом экране.
 */

@media (max-width: 767px) {
	/* `min-height: 0` здесь обязателен. Логотип — flex-элемент, а у таких
	   автоматический минимум считается по содержимому: картинка внутри не
	   давала строке стать ниже 46 px, и заданная высота молча игнорировалась
	   — даже с !important. Из-за этого шапка в движении не ужималась вовсе,
	   хотя правило про 26 px стояло с 31.08. */
	/* Высота ровно как у пилюли города (30 px): круг логотипа и пилюля рядом
	   читаются одной строкой, а не разнокалиберными кружком и капсулой. */
	.plvh.is-scrolled .plvh-logo {
		min-height: 0;
		height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.plvh.is-scrolled .plvh-logo img {
		min-height: 0;
	}

	.plvh.is-scrolled .plv-nav {
		padding-top: 5px;
		padding-bottom: 4px;
	}

	/* Кнопка города — самый высокий элемент полосы (45 px): ужимаем её
	   вместе с пилюлей даты. `min-height: 0` по той же причине, что у
	   логотипа: это flex-элементы, и автоминимум по содержимому не давал
	   им сжаться. */
	.plvh.is-scrolled .plvh-slot,
	.plvh.is-scrolled .plv-nav-delivery,
	.plvh.is-scrolled .plv-nav-delivery-btn {
		min-height: 0;
		height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	/* ЛОГОТИП ДОЛЖЕН СТОЯТЬ В ОДНОЙ СТРОКЕ С ГОРОДОМ И ДАТОЙ.
	   Он уезжал на отдельную строку: панель `.plv-nav` не умела ужиматься
	   ниже своей min-content ширины (город + дата + язык), и flex переносил
	   её целиком. Разрешаем сжиматься самой панели и пилюле даты внутри —
	   длинная подпись обрезается многоточием, а строка остаётся одна. */
	.plvh.is-scrolled .plv-nav {
		flex-wrap: nowrap;
		min-width: 0;
		/* `flex-basis: 0`, а не `auto` — в этом вся суть. Перенос строки flex
		   решает по ГИПОТЕТИЧЕСКОМУ размеру элемента, то есть по ширине его
		   содержимого (390 px), и делает это ДО сжатия: панель уезжала на
		   свою строку, хотя ужаться могла. С нулевой основой она всегда
		   остаётся рядом с логотипом и растягивается на остаток. */
		flex: 1 1 0;
	}

	/* 24.09.2026: пилюля — по ширине текста («Привезём завтра» — короткая), но ужимается, когда
	   подпись длинная («Привезём во вторник, 29 сен · 21:00»). Раньше flex-grow тянул её на весь ряд. */
	.plvh.is-scrolled .plvh-slot {
		flex: 0 1 auto;
		min-width: 0;
	}

	/* Обрезать надо сам текст, а не кнопку: у кнопки многоточие не появлялось,
	   и длинная подпись просто уходила под переключатель языка обрубком. */
	.plvh.is-scrolled .plvh-slot-tx {
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.plvh.is-scrolled .plv-nav-delivery,
	.plvh.is-scrolled .plv-lang {
		flex: 0 0 auto;
	}

	.plvh.is-scrolled .plvh-pills {
		padding-bottom: 6px;
	}

	.plvh.is-scrolled .plvh-pill {
		height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	/* Таб-бар. Цель по нажатию остаётся 44 px — это нижняя граница, ниже
	   которой в неё начинают промахиваться, и трогать её нельзя. Зато
	   вертикальный воздух вокруг убираем весь: полоса теперь ровно в высоту
	   самой кнопки плюс безопасная зона снизу. 67 → 44 px. */
	.plvtb {
		padding: 0 6px;
	}

	.plvtb-item {
		height: 44px;
		padding: 0;
		gap: 0;
	}

	.plvtb-item svg {
		width: 20px;
		height: 20px;
	}

	.plvtb-item span:last-child {
		font-size: 10.5px;
		line-height: 1.1;
	}

	/* Значок на вкладке корзины прижимался к верхнему краю полосы — теперь
	   его край совпадал бы с краем экрана. */
	.plvtb-badge {
		top: 2px;
	}
}

/* ═══ Чекаут: город и день в один ряд, поиск по карте кнопкой (01.09.2026) ═══ */

.plv-co-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	align-items: start;
}

.plv-co-row > .plv-checkout-input {
	margin: 0;
	min-width: 0;
}

/* Поиск по карте живёт НАД картой и появляется по кнопке. */
.plv-inline-map {
	position: relative;
}

.plv-map-searchbtn {
	position: absolute;
	/* Выше слоёв Leaflet: его панели начинаются с 400, элементы управления —
	   1000. С z-index 6 кнопка молча пряталась под картой. */
	z-index: 1001;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--plv-surface);
	color: var(--plv-ink);
	box-shadow: 0 2px 10px rgba(22, 33, 28, 0.18);
	cursor: pointer;
}

.plv-map-searchbtn svg {
	width: 18px;
	height: 18px;
}

.plv-map-searchbtn[aria-expanded="true"] {
	background: var(--plv-ink);
	color: var(--plv-paper);
}

.plv-inline-map .plv-inline-map-search {
	position: absolute;
	z-index: 1001;
	top: 8px;
	left: 8px;
	right: 52px;
	margin: 0;
}

.plv-inline-map .plv-inline-map-search[hidden] {
	display: none;
}

.plv-inline-map .plv-inline-map-input {
	width: 100%;
	height: 36px;
	box-sizing: border-box;
	border-radius: 18px;
	box-shadow: 0 2px 10px rgba(22, 33, 28, 0.18);
}

/* ═══ Пожелание к позиции корзины (01.09.2026) ══════════════════════════════
 * «Зелёные бананы», «покрупнее» — раньше это писали в общий комментарий
 * заказа, и сборщик гадал, к какому товару относится. Кнопка неприметная:
 * это не обязательное поле, а возможность.
 */

.plvnote {
	margin-top: 6px;
}

.plvnote-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	padding: 3px 9px 3px 7px;
	border: 1px dashed var(--plv-line-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--plv-text-3);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-12, 12px);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.plvnote-btn svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
}

.plvnote-btn span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Заполненное пожелание — уже не приглашение, а содержимое строки. */
.plvnote-btn.is-set {
	border-style: solid;
	border-color: transparent;
	background: var(--plv-teal-tint);
	color: var(--plv-teal-text);
}

.plvnote-edit {
	display: flex;
	gap: 6px;
	margin-top: 6px;
}

.plvnote-edit[hidden] {
	display: none;
}

.plvnote-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 34px;
	box-sizing: border-box;
	padding: 0 10px;
	border: 1px solid var(--plv-line-strong);
	border-radius: var(--plv-r-13);
	background: var(--plv-surface);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-135);
	color: var(--plv-ink);
}

.plvnote-save {
	flex: 0 0 auto;
	height: 34px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--plv-r-13);
	background: var(--plv-brand);
	color: var(--plv-on-brand);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-13);
	font-weight: 800;
	cursor: pointer;
}

/* ═══ «Акции» на телефоне — карусель (23.09.2026) ══════════════════════════
 * Заказчик: «чтобы не захламлять фид товарами, которые и так встретятся дальше».
 * 08.10.2026 (F326): «Акции» и «Лучшее» — лента на всех ширинах. На компьютере видно
 * чуть больше четырёх карточек (край следующей подсказывает, что лента листается),
 * листают стрелками ‹ › по краям и тачпадом; на телефоне — свайпом.
 */
.plv-railwrap {
	position: relative;
}

.plvch-grid.plvch-grid--rail {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
}

.plvch-grid.plvch-grid--rail::-webkit-scrollbar {
	display: none;
}

.plvch-grid.plvch-grid--rail > .plvp-card {
	scroll-snap-align: start;
}

@media (max-width: 767px) {
	.plvch-grid.plvch-grid--rail {
		gap: var(--plv-gap-card, 10px);
		margin: 0 calc(-1 * var(--plv-gutter, 16px));
		padding: 0 var(--plv-gutter, 16px) 4px;
	}

	.plvch-grid.plvch-grid--rail > .plvp-card {
		flex: 0 0 152px;
	}
}

@media (min-width: 768px) {
	/* Поля сверху и снизу — под подъём карточки при наведении и её тень: лента с прокруткой их обрезала бы. */
	.plvch-grid.plvch-grid--rail {
		gap: 14px;
		margin: -10px -6px -24px;
		padding: 10px 6px 24px;
		scroll-snap-type: none; /* на компьютере листают стрелками и тачпадом — привязка к карточкам срывала плавную прокрутку */
	}

	.plvch-grid.plvch-grid--rail > .plvp-card {
		flex: 0 0 calc((100% - 3 * 14px) / 4.3);
	}
}

@media (min-width: 768px) and (max-width: 899px) {
	.plvch-grid.plvch-grid--rail > .plvp-card {
		flex-basis: calc((100% - 2 * 14px) / 3.3);
	}
}

.plv-rail-btn {
	display: none;
}

/* Стрелки — только там, где есть мышь; на сенсорных экранах листают пальцем. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
	.plv-rail-btn:not([hidden]) {
		position: absolute;
		top: 50%;
		z-index: 4;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		margin-top: -23px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--plv-surface, #fff);
		color: var(--plv-ink, #12303c);
		box-shadow: 0 6px 20px rgba(18, 48, 60, .22);
		cursor: pointer;
		transition: transform .15s ease, background-color .15s ease;
	}

	.plv-rail-btn--prev:not([hidden]) {
		left: -14px;
	}

	.plv-rail-btn--next:not([hidden]) {
		right: -14px;
	}

	.plv-rail-btn:not([hidden]):hover {
		background: var(--plv-brand, #00c2e8);
		transform: scale(1.06);
	}

	.plv-rail-btn:focus-visible {
		outline: 3px solid var(--plv-brand, #00c2e8);
		outline-offset: 2px;
	}
}

/* ═══ Оформление: пропущенное поле (23.09.2026) ════════════════════════════
 * Поле с пропуском — красной рамкой, под ним — что не так. Снимается, как только поле поправили.
 */
.plv-checkout-form .is-invalid {
	border-color: #d93025 !important;
	box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.14) !important;
}

.plv-checkout-form [data-plv-inline-map].is-invalid {
	border-radius: 14px;
	outline: 2px solid #d93025;
	outline-offset: 2px;
}

.plv-field-err {
	margin: 5px 2px 8px;
	font-family: var(--plv-font-ui, 'Manrope', sans-serif);
	font-size: 13px;
	line-height: 1.35;
	color: #c5221f;
}

/* ═══ Пилюли разделов, которые следят за прокруткой (24.09.2026) ═══════════
 * Наверху страницы полоса — часть шапки (под поиском). В движении она уходит
 * из потока и висит под шапкой поверх каталога: видна, только когда человек
 * прокрутил немного вверх (.is-pills-up ставит plv-shell.js). Иначе её
 * появление сдвигало бы страницу на свою высоту.
 */
.plvh { position: sticky; }
.plvh-secs { padding-top: 2px; }
.plvh .plvh-pill--cat.is-active {
	background: var(--plv-ink, #12303c);
	border-color: var(--plv-ink, #12303c);
	color: var(--plv-surface, #fff);
}
.plvh.is-scrolled .plvh-secs {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	padding-top: 6px;
	background: var(--plv-paper);
	border-bottom: 1px solid var(--plv-line);
	box-shadow: 0 6px 14px rgba(18, 48, 60, .08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.plvh.is-scrolled.is-pills-up .plvh-secs {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
/* Открытый поиск в движении и выдача поиска — полоса разделов не нужна. */
.plvh.is-scrolled.is-search .plvh-secs,
body.plv-searching .plvh-secs {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.plvh.is-scrolled .plvh-secs { transition: none; }
}

/* ═══ Верх экрана на iPhone с «островком» (24.09.2026) ═══════════════════════
 * Safari на новых iPhone заливает зону статус-бара цветом закреплённой шапки —
 * но только сплошным. Полупрозрачная шапка с размытием (94 % + blur) под это
 * не подходила: между краем экрана и шапкой просвечивали карточки. Шапка теперь
 * сплошная, того же цвета; зона выреза (standalone, встроенные браузеры) —
 * её отступом сверху (--plv-safe-top).
 */
.plvh {
	background: var(--plv-paper);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
html {
	background-color: var(--plv-paper);
}

/* Верхний ряд шапки и наверху страницы — одной строкой (24.09.2026): длинная подпись дня
 * («Привезём во вторник, 29 сен · 21:00») переносила город с датой под логотип и съедала
 * ряд экрана. Как в движении: панель ужимается, подпись обрезается многоточием. */
@media (max-width: 767px) {
	.plvh:not(.is-scrolled) .plv-nav {
		flex: 1 1 0;
		flex-wrap: nowrap;
		min-width: 0;
	}
	.plvh:not(.is-scrolled) .plvh-slot {
		flex: 0 1 auto;
		min-width: 0;
	}
	.plvh:not(.is-scrolled) .plvh-slot-tx {
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.plvh:not(.is-scrolled) .plv-nav-delivery,
	.plvh:not(.is-scrolled) .plv-lang {
		flex: 0 0 auto;
	}
}

/* ═══ Полоса разделов во время прокрутки вниз (задача 13, 24.09.2026) ═══════
 * Новая категория под пальцем — полоса выезжает и подсвечивает её, через 1,5 с уходит; при быстрой
 * непрерывной прокрутке остаётся на виду (класс is-pills-flash ставит plv-shell.js).
 */
.plvh.is-scrolled.is-pills-flash .plvh-secs {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

/* ═══ Плавная прокрутка (задача 12, 24.09.2026) ═════════════════════════════
 * 1) `background-attachment: fixed` у главной, каталога и оформления (style.css) переводит прокрутку
 *    Chrome в основной поток: каждый кадр ждёт скрипты и перерисовку. Градиент main на главной всё
 *    равно закрыт каталогом со сплошным фоном — отличий на глаз нет.
 * 2) Размытие фона (backdrop-filter) пересчитывается на каждом кадре над всем, что под элементом
 *    проезжает. Снимаем там, где фон элемента и так почти непрозрачный или под ним ровный градиент:
 *    таб-бар (96 %), плашка корзины (92 → 97 %), поле поиска (белое), номера глав, пилюли шапки.
 *    Размытие у открытых окон и шторок (затемнение под ними) — осталось: там прокрутки нет.
 */
.site-main--front,
.site-main--catalog,
.site-main--checkout {
	background-attachment: scroll;
}
.plvtb,
.plv-search,
.plvch-root .plvch .plvch-num, /* plv-dock.css подключается позже — селектор сильнее */
.plvh .plv-nav-delivery,
.plvh .plv-nav-cart {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.plv-cart-bar {
	background: rgba(240, 249, 255, 0.97);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* ═══ Страница товара — как каталог (задача 15, 24.09.2026) ══════════════════
 * Заказчик: «странное оформление — как будто попал на другой сайт, вычурно». Страница жила в старой
 * небесной теме подрядчика (style.css, «SINGLE PRODUCT»): голубой градиент с шарами и лепестками,
 * заголовок и цена курсивом Cormorant, голубые пилюли и текст. Теперь — те же бумага, карточки,
 * шрифты и кнопки, что в каталоге (токены assets/css/tokens.css). Разметка прежняя; добавлены только
 * факты «доставка · срок хранения» и степпер в панели покупки на телефоне (plv-shell.js).
 */
.site-main--product {
	background: var(--plv-paper);
	font-family: var(--plv-font-ui);
	color: var(--plv-ink);
}
.site-main--product .plv-bg-canvas { display: none; }

.site-main--product .plv-product-inner { max-width: 1080px; padding: 0 var(--plv-gutter) 36px; }
.site-main--product .plv-product-hdr { padding: 14px 0 10px; }
.site-main--product .plv-product-back {
	gap: 6px;
	padding: 7px 13px 7px 11px;
	border: 1px solid var(--plv-line);
	border-radius: var(--plv-r-pill);
	background: var(--plv-surface);
	box-shadow: var(--plv-sh-card);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-135);
	font-weight: 700;
	color: var(--plv-ink);
	opacity: 1;
}
.site-main--product .plv-product-back:hover { color: var(--plv-ink); transform: none; background: var(--plv-brand-tint-2); }
.site-main--product .plv-product-layout { gap: 14px; margin-top: 0; }

/* фото — как карточка каталога */
.site-main--product .plv-product-photo-wrap {
	border-radius: var(--plv-r-22);
	background: var(--plv-img-warm);
	box-shadow: var(--plv-sh-card);
}
.site-main--product .plv-product-photo-wrap--empty { font-family: var(--plv-font-display); color: var(--plv-text-3); }
.site-main--product .plv-product-thumb { border-radius: var(--plv-r-12); background: var(--plv-surface); }
.site-main--product .plv-product-thumb:hover { border-color: var(--plv-line-strong); transform: none; }
.site-main--product .plv-product-thumb.is-active { border-color: var(--plv-ink); box-shadow: none; }

/* всё о товаре — одной белой карточкой */
.site-main--product .plv-product-info {
	padding: 18px 16px 20px;
	border-radius: var(--plv-r-22);
	background: var(--plv-surface);
	box-shadow: var(--plv-sh-card);
}
.site-main--product .plv-product-cat {
	margin-bottom: 8px;
	font-size: var(--plv-fs-12);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--plv-brand-ink);
	opacity: 1;
}
.site-main--product .plv-product-cat:hover { color: var(--plv-ink); }
.site-main--product .plv-product-title {
	margin: 0 0 8px;
	font-family: var(--plv-font-display);
	font-size: var(--plv-fs-27);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--plv-tr-27);
	color: var(--plv-ink);
}
.site-main--product .plv-product-title em { font-style: normal; font-weight: inherit; }
.site-main--product .plv-product-sku { margin-bottom: 10px; font-size: var(--plv-fs-12); color: var(--plv-text-4); }

.site-main--product .plv-product-price-row { margin: 4px 0 14px; gap: 4px 8px; }
.site-main--product .plv-product-price {
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-30);
	font-weight: 800;
	letter-spacing: var(--plv-tr-22);
	color: var(--plv-ink);
	font-variant-numeric: tabular-nums;
}
.site-main--product .plv-product-price-orig { font-size: var(--plv-fs-15); color: var(--plv-strike); }
.site-main--product .plv-product-portion { font-size: var(--plv-fs-14); color: var(--plv-text-3); }

/* доставка и срок хранения — список фактов */
.plv-product-facts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 14px 0 16px;
	padding: 14px 0 0;
	border-top: 1px solid var(--plv-line-soft);
	list-style: none;
}
.plv-product-facts:not(:has(.plv-fact:not([hidden]))) { display: none; }
.plv-fact { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--plv-text-2); }
.plv-fact[hidden] { display: none; }
.plv-fact svg { flex: 0 0 18px; margin-top: 1px; color: var(--plv-teal); }
.plv-fact-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.plv-fact-tx { font-size: var(--plv-fs-145); font-weight: 700; line-height: 1.35; color: var(--plv-ink); }
.plv-fact-sub { font-size: var(--plv-fs-13); line-height: 1.35; color: var(--plv-text-3); }
.plv-fact--delivery .plv-fact-tx { color: var(--plv-teal-text); }

/* варианты — пилюли как в шапке каталога */
.site-main--product .plv-product-options { gap: 14px; margin-bottom: 16px; }
.site-main--product .plv-product-option-label {
	margin-bottom: 8px;
	font-size: var(--plv-fs-12);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--plv-text-3);
}
.site-main--product .plv-product-pill {
	padding: 9px 15px;
	border: 1px solid var(--plv-line-strong);
	background: var(--plv-surface);
	color: var(--plv-ink);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-14);
	font-weight: 700;
	box-shadow: none;
}
.site-main--product .plv-product-pill:hover { border-color: var(--plv-ink); transform: none; }
.site-main--product .plv-product-pill.is-active {
	background: var(--plv-ink);
	border-color: var(--plv-ink);
	color: var(--plv-surface);
	box-shadow: none;
}

/* покупка — как панель под экраном */
.site-main--product .plv-product-buy { gap: 10px; margin-bottom: 18px; }
.site-main--product .plv-product-qty,
.plvpb .plv-product-qty {
	height: 54px;
	border: 1px solid var(--plv-line-strong);
	border-radius: var(--plv-r-15);
	background: var(--plv-surface);
}
.site-main--product .plv-product-qty-btn { width: 42px; color: var(--plv-ink); font-family: var(--plv-font-ui); }
.site-main--product .plv-product-qty-btn:hover { background: var(--plv-brand-tint-2); color: var(--plv-ink); }
.site-main--product .plv-product-qty-input { width: 36px; font-family: var(--plv-font-ui); font-weight: 800; color: var(--plv-ink); }
.site-main--product .plv-product-add {
	min-height: 54px;
	border-radius: var(--plv-r-15);
	box-shadow: none;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-165);
	font-weight: 700;
	letter-spacing: 0;
}
.site-main--product .plv-product-add:hover { transform: none; box-shadow: none; background: var(--plv-brand-strong); color: var(--plv-on-brand) !important; }

/* панель покупки на телефоне: степпер + кнопка в один ряд, кнопки в странице нет */
.plvpb-row { display: flex; gap: 10px; align-items: stretch; }
.plvpb-row .plvpb-cta { flex: 1 1 auto; width: auto; min-width: 0; }
.plvpb .plv-product-qty { flex: 0 0 auto; display: inline-flex; align-items: center; background: var(--plv-paper); border-color: transparent; }
.plvpb .plv-product-qty-btn { width: 38px; }
.plvpb .plv-product-qty-input { width: 30px; }
@media (max-width: 767px) {
	.site-main--product .plv-product.has-bar .plv-product-buy { display: none; }
}

/* производитель, «часто берут вместе», описание — внутри карточки */
.site-main--product .plvpr { background: var(--plv-paper); border-color: transparent; }
.site-main--product .plv-product-desc {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--plv-line-soft);
	max-width: none;
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-15);
	line-height: 1.6;
	color: var(--plv-text-2);
}
.site-main--product .plv-product-desc:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* «Смотрите также» — как заголовки секций главной */
.site-main--product .plv-product-related { margin-top: 28px; padding-top: 0; }
.site-main--product .plv-product-related-title {
	margin: 0 0 12px;
	font-family: var(--plv-font-display);
	font-size: var(--plv-fs-23);
	font-weight: 700;
	color: var(--plv-ink);
}

@media (min-width: 800px) {
	.site-main--product .plv-product-hdr { padding: 20px 0 14px; }
	.site-main--product .plv-product-layout { gap: 28px; }
	.site-main--product .plv-product-info { padding: 24px 24px 26px; }
	.site-main--product .plv-product-title { font-size: 32px; }
	.site-main--product .plv-product-gallery { top: calc(var(--plv-nav-h, 88px) + 16px); }
}
@media (max-width: 480px) {
	.site-main--product .plv-product-inner { padding: 0 12px 28px; }
	.site-main--product .plv-product-price { font-size: 28px; }
}

/* ═══ Подвал (задача 14, 24.09.2026) ═════════════════════════════════════════
 * Заказчик: «все разделы очень близко друг к другу и выглядят шаблонно с шаблонным шрифтом».
 * Тёмный лист в цвет текста каталога, шрифты витрины (Manrope, заголовок — Literata), воздух между
 * колонками; «Предложить товар» — отдельной карточкой. Разметка — footer.php (.plvf-*).
 */
.site-footer.plvf {
	margin-top: 32px;
	padding: 0 0 calc(96px + var(--plv-safe-bottom));
	background: var(--plv-ink);
	color: var(--plv-paper);
	font-family: var(--plv-font-ui);
}
.plvf-in { max-width: 1180px; margin: 0 auto; padding: 28px var(--plv-gutter) 0; }

.plvf-suggest {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	flex-wrap: wrap;
	padding: 18px 18px 18px 20px;
	border-radius: var(--plv-r-20);
	background: rgba(247, 242, 232, 0.07);
	border: 1px solid rgba(247, 242, 232, 0.12);
}
.plvf-suggest-tx { flex: 1 1 260px; min-width: 0; }
.plvf-suggest-title {
	margin: 0 0 4px;
	font-family: var(--plv-font-display);
	font-size: var(--plv-fs-20);
	font-weight: 700;
	line-height: 1.25;
	color: var(--plv-paper);
}
.plvf-suggest-sub { margin: 0; font-size: var(--plv-fs-14); line-height: 1.45; color: var(--plv-on-dark-sub); }
.plvf-suggest-btn {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--plv-r-pill);
	background: var(--plv-brand);
	color: var(--plv-on-brand);
	font-family: var(--plv-font-ui);
	font-size: var(--plv-fs-15);
	font-weight: 800;
	cursor: pointer;
}
.plvf-suggest-btn:hover { background: var(--plv-brand-strong); }

.plvf-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-flow: row dense; /* «Связаться» — рядом с «Покупателям», доставка — строкой ниже */
	gap: 30px 24px;
	padding: 32px 0 28px;
}
.plvf-brand { grid-column: 1 / -1; }
.plvf-col--delivery { grid-column: 1 / -1; }

.plvf-logo { display: inline-block; line-height: 0; }
.plvf-logo img { width: 56px; height: 56px; border-radius: 50%; }
.plvf-tagline {
	max-width: 22em;
	margin: 12px 0 16px;
	font-family: var(--plv-font-display);
	font-size: var(--plv-fs-17);
	font-weight: 600;
	line-height: 1.4;
	color: var(--plv-paper);
}
.plvf-social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.plvf-social a {
	display: inline-flex;
	width: 42px;
	height: 42px;
	opacity: 0.92;
	transition: opacity .15s ease, transform .15s ease;
}
.plvf-social a:hover { opacity: 1; transform: translateY(-1px); }
.plvf-social svg { width: 100%; height: 100%; }

.plvf-h {
	margin: 0 0 12px;
	font-size: var(--plv-fs-12);
	font-weight: 800;
	letter-spacing: var(--plv-tr-eyebrow);
	text-transform: uppercase;
	color: var(--plv-copper);
}
.plvf-list { margin: 0; padding: 0; list-style: none; }
.plvf-list li + li { margin-top: 10px; }
.plvf-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--plv-fs-145);
	font-weight: 600;
	line-height: 1.35;
	color: var(--plv-paper);
	text-decoration: none;
	opacity: 0.88;
}
.plvf-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.plvf-ic { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; }
.plvf-ic svg { width: 100%; height: 100%; }

.plvf-dgroups { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.plvf-dg { margin: 0; }
.plvf-dg dt { margin: 0 0 2px; font-size: var(--plv-fs-14); font-weight: 800; color: var(--plv-paper); }
.plvf-dg dd { margin: 0; font-size: var(--plv-fs-14); line-height: 1.5; color: var(--plv-on-dark-sub); }
.plvf-free {
	display: inline-block;
	margin: 14px 0 0;
	padding: 5px 11px;
	border-radius: var(--plv-r-pill);
	background: rgba(0, 194, 232, 0.16);
	font-size: var(--plv-fs-13);
	font-weight: 700;
	color: #7fdcf0;
}

/* 05.10.2026 (заказчик): «Признание» — EIT Jumpstarter и Social Impact Award, у обоих знак ЕС. */
.plvf-awards { padding: 24px 0 26px; border-top: 1px solid rgba(247, 242, 232, 0.12); }
.plvf-aw-list { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.plvf-aw {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	box-sizing: border-box;
	padding: 16px 18px;
	border-radius: var(--plv-r-20);
	background: rgba(247, 242, 232, 0.05);
	border: 1px solid rgba(247, 242, 232, 0.12);
	color: var(--plv-paper);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}
.plvf-aw:hover { background: rgba(247, 242, 232, 0.09); border-color: rgba(247, 242, 232, 0.22); }
.plvf-aw-logo { flex: 0 0 150px; display: flex; align-items: center; justify-content: center; line-height: 0; }
.plvf-aw-logo img { display: block; max-width: 150px; height: 54px; width: auto; object-fit: contain; }
.plvf-aw-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.plvf-aw-title { font-size: var(--plv-fs-15, 15px); font-weight: 800; line-height: 1.3; color: var(--plv-paper); }
.plvf-aw-sub { font-size: var(--plv-fs-13, 13px); line-height: 1.4; color: var(--plv-on-dark-sub); }
.plvf-aw-eu { display: inline-flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--plv-on-dark-sub); }
.plvf-aw-eu-flag { flex: 0 0 30px; width: 30px; height: 21px; display: block; }
@media (max-width: 480px) {
	/* на телефоне логотип — над текстом, иначе мелкие надписи в логотипах не читаются */
	.plvf-aw { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
	.plvf-aw-logo { flex: 0 0 auto; justify-content: flex-start; }
	.plvf-aw-logo img { max-width: 170px; height: 46px; }
}
@media (min-width: 900px) {
	.plvf-aw-list { grid-template-columns: 1fr 1fr; gap: 16px; }
	.plvf-awards { padding: 28px 0 30px; }
}

.plvf-bottom {
	padding: 16px 0 18px;
	border-top: 1px solid rgba(247, 242, 232, 0.12);
	font-size: var(--plv-fs-13);
	color: var(--plv-on-dark-sub);
}

@media (min-width: 900px) {
	.site-footer.plvf { padding-bottom: 0; }
	.plvf-in { padding-top: 40px; }
	.plvf-grid { grid-template-columns: 1.3fr 1fr 1.4fr 1fr; gap: 32px 40px; padding: 44px 0 36px; }
	.plvf-brand, .plvf-col--delivery { grid-column: auto; }
	.plvf-suggest { padding: 22px 24px 22px 28px; }
	.plvf-suggest-title { font-size: 22px; }
}

/* 28.09.2026 (заказчик): нижнее меню (Поиск, Корзина, Каталог) чуть выше и крупнее — 44 → 54 px.
   Высоту полосы берёт plv-shell.js (--plv-tabbar-h), панели над ней сдвигаются сами. */
@media (max-width: 767px) {
	.plvtb-item {
		height: 54px;
		gap: 4px;
	}
	.plvtb-item svg {
		width: 23px;
		height: 23px;
	}
	.plvtb-burger {
		width: 23px;
		height: 23px;
		gap: 4px;
	}
	.plvtb-burger i {
		width: 20px;
	}
	.plvtb-item span:last-child {
		font-size: 11.5px;
	}
	.plvtb-badge {
		top: 5px;
	}
}

/* 28.09.2026 (заказчик): «Пожелание к товару» на оформлении почти не замечали (серое, пунктиром).
   Не крупнее — цветом бренда; заполненное остаётся бирюзовым, как было. */
.plvnote-btn:not(.is-set) {
	border-color: color-mix(in srgb, var(--plv-brand) 60%, transparent);
	background: var(--plv-brand-tint);
	color: var(--plv-brand-ink);
}

/* 05.10.2026 (заказчик): «+» на пределе остатка гаснет — больше остатка в корзину не положить */
.plvp-qty-btn.is-max,
.plv-product-qty-btn.is-max,
.plv-cart-item-btn.is-max,
.plv-checkout-item.is-max .plv-checkout-qty-btn--plus,
.plvo-qbtn.is-max { opacity: .35; }
/* 05.10.2026: в нижней панели телефона подсказке «можно ещё N» места нет — там о пределе говорит всплывашка */
.plvpb-row .plv-product-left { display: none; }
.plv-product-left { margin-top: 6px; font-size: var(--plv-fs-13, 13px); font-weight: 600; color: var(--plv-text-3, #6b7680); }

/* 07.10.2026: карточка, к которой вернулись со страницы товара («← На витрину» / «Назад») —
   на мгновение подсвечивается, чтобы было видно, где остановились (plv-shell.js, restoreTo). */
.plvp-card.plv-ret-flash {
	animation: plv-ret-flash 1.8s ease-out;
}
@keyframes plv-ret-flash {
	0%, 40% { box-shadow: 0 0 0 3px #00c2e8, 0 10px 28px rgba(0, 194, 232, .35); }
	100%    { box-shadow: 0 0 0 0 rgba(0, 194, 232, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.plvp-card.plv-ret-flash { animation: none; box-shadow: 0 0 0 3px #00c2e8; }
}