/**
 * Витрина: шапка, бургер-меню разделов, возврат градиентов глав (17.08.2026).
 *
 * Файл отдельный, а не style.css: тот в работе подрядчика. Имя оставлено
 * прежним (plv-dock.css), чтобы не трогать enqueue в functions.php — боковой
 * док из него убран по решению заказчика, вместо него бургер.
 */

/* ══════════════════════════════════════════════════════════════════════
   1. ГРАДИЕНТЫ ГЛАВ — возврат
   Полная палитра уже написана в style.css (строка ~3513: жёлтая ферма,
   синее море, зелёный сад, охристая кладовая, ночной вечер), но ниже, на
   строке ~3742, её перекрыл блок «приглушённые главы: тон вместо
   градиента» — почти белыми заливками. Позднее правило побеждает, поэтому
   страница и выглядела плоско-кремовой.
   Здесь возвращаем исходные градиенты и контрастную типографику глав.
   ══════════════════════════════════════════════════════════════════════ */
.plvch--farm   { background: linear-gradient(180deg, #fef3c7 0%, #fde68a 30%, #e7f0a0 65%, #c4e09a 100%) !important; }
.plvch--sea    { background: linear-gradient(180deg, #bae6fd 0%, #38bdf8 22%, #0284c7 52%, #0c4a6e 100%) !important; }
.plvch--garden { background: linear-gradient(180deg, #d1fae5 0%, #6ee7b7 28%, #10b981 62%, #064e3b 100%) !important; }
.plvch--pantry { background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 28%, #fde68a 58%, #fb923c 100%) !important; }
.plvch--eve    { background: linear-gradient(180deg, #e0e7ff 0%, #818cf8 28%, #4338ca 60%, #1e1b4b 100%) !important; }
.plvch--drugoe { background: linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 40%, #64748b 100%) !important; }

/* Заголовок главы стоит на ВЕРХЕ градиента, а он у всех глав светлый
   (#bae6fd у моря, #e0e7ff у вечера, #d1fae5 у сада). Белый текст, как в
   макете, там не читается — макет ставил заголовок на другой участок.
   Поэтому цвет берём под верхнюю остановку, а не под нижнюю. */
.plvch-title  { text-shadow: none !important; }
.plvch--farm   .plvch-title { color: #6b3410 !important; }
.plvch--farm   .plvch-sub   { color: #8a4a12 !important; }
.plvch--sea    .plvch-title { color: #0b3a56 !important; }
.plvch--sea    .plvch-sub   { color: #14536f !important; }
.plvch--garden .plvch-title { color: #04372a !important; }
.plvch--garden .plvch-sub   { color: #0a5c46 !important; }
.plvch--pantry .plvch-title { color: #6f2a10 !important; }
.plvch--pantry .plvch-sub   { color: #8a4413 !important; }
.plvch--eve    .plvch-title { color: #24215e !important; }
.plvch--eve    .plvch-sub   { color: #3a3577 !important; }
.plvch--drugoe .plvch-title { color: #1e293b !important; }
.plvch--drugoe .plvch-sub   { color: #475569 !important; }

/* Плашка «ФЕРМА / МОРЕ» — на светлом верху нужен тёмный текст и мягкая
   подложка, иначе она сливается. */
.plvch .plvch-num {
	background: rgba(255, 255, 255, .55) !important;
	color: inherit !important;
	padding: 3px 10px !important;
	border-radius: 100px !important;
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.plvch--farm   .plvch-num { color: #6b3410 !important; }
.plvch--sea    .plvch-num { color: #0b3a56 !important; }
.plvch--garden .plvch-num { color: #04372a !important; }
.plvch--pantry .plvch-num { color: #6f2a10 !important; }
.plvch--eve    .plvch-num { color: #24215e !important; }
.plvch--drugoe .plvch-num { color: #1e293b !important; }

/* ══════════════════════════════════════════════════════════════════════
   1b. КАРТОЧКА ТОВАРА — светлая подложка
   style.css (строка ~3238) снимает у карточки фон, рамку и тень: под
   плоский кремовый фон это верно, но на цветном градиенте фото и подписи
   повисают прямо на цвете, а «1шт» тёплого оттенка на синем не читается.
   Возвращаем карточке поверхность — тогда текст всегда на светлом и не
   зависит от того, на какой участок градиента он попал.
   ══════════════════════════════════════════════════════════════════════ */
.plvp-card {
	background: rgba(255, 255, 255, .90) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	/* Рамки нет совсем: на синем фоне главы «Море» белая линия в 1px
	   читалась как контур вокруг фото. Форму держит скругление и тень. */
	border: 0 !important;
	border-radius: 18px !important;
	box-shadow: 0 6px 22px rgba(8, 47, 73, .12) !important;
	/* Рамки вокруг фото нет: фото упирается в края карточки, а подложка
	   выступает только СНИЗУ — под ценой и названием. */
	padding: 0 0 12px !important;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease !important;
}
.plvp-card:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 30px rgba(8, 47, 73, .18) !important;
}
/* Фото внутри подложки: свои скругления и отступ до текста. */
.plvp-card .plvp-photo-wrap {
	/* Верхние углы повторяют скругление карточки, нижние прямые: фото
	   переходит в текстовую подложку без шва. */
	border-radius: 17px 17px 0 0 !important;
	background: #f1f3f5 !important;
}
.plvp-card .plvp-box {
	margin-bottom: 8px;
	border-radius: 17px 17px 0 0 !important;
}
/* Боковые поля вернулись тексту — но не фото. */
.plvp-card .plvp-cap { padding: 0 10px !important; }

/* Текст на белой подложке — тёмный, независимо от главы. */
.plvp-card .plvp-price   { color: #12303c !important; }
.plvp-card .plvp-name    { color: #12303c !important; }
/* ── Фасовка сразу после цены: «4,50 € / 500г» ──────────────────────
   Отдельной строкой под названием она читалась как часть имени товара и
   спорила со значком весового в углу фото. Рядом с ценой сразу понятно,
   за какой объём цена.

   Слэш рисует ::before, а не разметка: словарь локалей переписывает
   textContent узла ЦЕЛИКОМ, и символ из HTML стёрся бы при смене языка.

   Серый приглушённый, но не бледный: #6b7785 на белом даёт контраст 5.1
   при норме 4.5 для мелкого текста. */
.plvp-card .plvp-portion {
	color: #6b7785 !important;
	font-size: .8em;
	font-weight: 600;
	white-space: nowrap;
}
/* style.css держит на строке цены max-width: calc(100% - 60px) — это запас
   под круглую кнопку в раскладке, где строка была ПОЗИЦИОНИРОВАНА абсолютно
   поверх фото. В сетке глав строка статична и лежит под фото, кнопке она не
   мешает, а ограничение сжимало её до 26px на телефоне: цена и фасовка
   разъезжались на две строки. */
.plvp-card .plvp-price-row {
	max-width: none !important;
	position: static !important;
	gap: 6px;
	row-gap: 0;
}

/* Слэш принадлежит ЦЕНЕ, а не фасовке. На самых узких карточках строка всё
   равно иногда переносится, и слэш на ::before фасовки повисал бы сиротой в
   начале второй строки. Прицепленный к цене, он остаётся в первой:
   «15,00 € /» и ниже «1шт» — читается как продолжение, а не как обрубок. */
.plvp-card .plvp-price-row:has(.plvp-portion) .plvp-price::after {
	content: " /";
	color: #b9c0c8;
	font-weight: 400;
}

/* ══════════════════════════════════════════════════════════════════════
   2. СЕТКА ТОВАРОВ — ДВЕ карточки в ряд на телефоне
   Здесь было три (просьба заказчика 25.08.2026), 30.08.2026 он вернул две:
   на 375 px третья колонка оставляла карточке ~110 px, из-за чего название
   ужимали до 12 px, а «+» приходилось масштабировать. Теперь карточка шире,
   и уменьшать в ней ничего не нужно — правила размеров сняты вместе с
   третьей колонкой, а не оставлены «на всякий случай».
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
	.plvp-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px 10px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   3. ШАПКА: логотип слева, три ряда пилюль справа
   Фото-баннер и крупный заголовок убраны — первый экран отдан каталогу.
   ══════════════════════════════════════════════════════════════════════ */
.plvch-hero--slim {
	/* style.css выкладывает баннер колонкой по центру и держит min-height
	   420px под фото — под баннер верно, для строки «знак слева, разделы
	   справа» приходится перебивать. */
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 14px;
	min-height: 0 !important;
	height: auto !important;
	padding: 10px 14px 14px 52px !important;   /* слева место под бургер */
	background: none !important;
}
.plvch-hero--slim .plvch-hero-bg,
.plvch-hero--slim .plvch-hero-ov,
.plvch-hero--slim .plvch-hero-content,
.plvch-hero--slim .plvch-hero-fade { display: none !important; }

/* Логотип переехал в шапку каталога — в верхней панели он стал бы вторым. */
body:has(.plvch-hero--slim) .plv-nav-logo { display: none; }

.plvch-hero-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	align-self: stretch;          /* по высоте трёх рядов пилюль */
	line-height: 0;
}
.plvch-hero-logo img { height: 100%; width: auto; max-height: 116px; display: block; }

.plvch-hero--slim .plvch-hero-cats {
	flex: 1 1 auto; min-width: 0; position: relative; padding: 0; margin: 0; display: block;
}
.plvch-hero--slim .plvch-hero-rows { display: flex; flex-direction: column; gap: 5px; }
.plvch-hero--slim .plvch-hero-row {
	display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
	-webkit-overflow-scrolling: touch; padding-right: 14px;
}
.plvch-hero--slim .plvch-hero-row::-webkit-scrollbar { display: none; }
.plvch-hero--slim .plvch-cat { flex: 0 0 auto; }
.plvch-hero--slim .plvch-hero-row:nth-child(2) { padding-left: 12px; }

@media (max-width: 760px) {
	.plvch-hero--slim { gap: 10px; padding: 8px 10px 10px 46px !important; }
	.plvch-hero-logo img { max-height: 104px; }
	.plvch-hero--slim .plvch-hero-rows { gap: 4px; }
	.plvch-hero--slim .plvch-hero-row:nth-child(2) { padding-left: 9px; }
}

/* ══════════════════════════════════════════════════════════════════════
   4. БУРГЕР И МЕНЮ РАЗДЕЛОВ · Underwater Edition
   Кнопка слева вверху, панель — по макету заказчика: волна перехода,
   толща воды с лучами и пузырьками, стеклянные пилюли разделов.
   ══════════════════════════════════════════════════════════════════════ */
.plvbn-btn {
	position: fixed;
	top: 12px;
	left: 10px;
	/* Верхняя панель витрины идёт с z-index: 1000 — кнопка должна быть выше,
	   иначе она есть в разметке, но её не видно. */
	z-index: 1100;
	width: 38px;
	height: 38px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.plvbn-btn i {
	display: block;
	width: 17px;
	height: 2px;
	border-radius: 2px;
	background: #0e7490;
	transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .18s;
}
.plvbn-btn.is-open i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.plvbn-btn.is-open i:nth-child(2) { opacity: 0; }
.plvbn-btn.is-open i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Кнопка стоит поверх верхней панели — освобождаем ей место, иначе она
   накрывает плашку выбора города. */
body:has(.plvbn-btn) .plv-nav { padding-left: 58px; }
@media (max-width: 760px) { body:has(.plvbn-btn) .plv-nav { padding-left: 54px; } }

/* Затемнение под панелью */
.plvbn-veil {
	position: fixed;
	inset: 0;
	z-index: 1090;
	background: rgba(8, 47, 73, .38);
	backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}
.plvbn-veil.is-open { opacity: 1; pointer-events: auto; }

/* Панель */
.plvbn {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1095;
	width: min(420px, 92vw);
	max-height: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	font-family: 'Inter', system-ui, sans-serif;
	transform: translateX(-102%);
	transition: transform .34s cubic-bezier(.4, 0, .2, 1);
	box-shadow: 8px 0 40px rgba(0, 0, 0, .28);
}
.plvbn.is-open { transform: none; }

.plvbn-wave { display: block; width: 100%; line-height: 0; margin-bottom: -2px; overflow: hidden; }
.plvbn-wave svg { display: block; width: 100%; height: auto; }

.plvbn-sea {
	background: linear-gradient(180deg, #0891b2 0%, #0e7490 40%, #155e75 80%, #164e63 100%);
	padding: 26px 18px 40px;
	position: relative;
	overflow: hidden;
	min-height: 60vh;
}
/* Свет, входящий сверху */
.plvbn-sea::before {
	content: '';
	position: absolute;
	top: -10px; left: 0; right: 0; height: 140px;
	background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(125, 211, 252, .35) 0%, transparent 100%);
	pointer-events: none;
}

/* Лучи */
.plvbn-rays { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.plvbn-ray {
	position: absolute; top: 0; width: 2px; height: 55%;
	background: linear-gradient(to bottom, rgba(186, 230, 253, .18), transparent);
	transform-origin: top center; border-radius: 2px;
	animation: plvbn-ray-sway ease-in-out infinite alternate;
}
@keyframes plvbn-ray-sway {
	from { transform: skewX(-8deg) scaleX(1);   opacity: .6; }
	to   { transform: skewX(8deg)  scaleX(1.4); opacity: 1; }
}

/* Пузырьки */
.plvbn-bub {
	position: absolute; border-radius: 50%;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .22);
	pointer-events: none;
	animation: plvbn-bubble-rise linear infinite;
}
@keyframes plvbn-bubble-rise {
	0%   { transform: translateY(0)     translateX(0);    opacity: .55; }
	40%  { transform: translateY(-40%)  translateX(5px);  opacity: .35; }
	100% { transform: translateY(-100%) translateX(-4px); opacity: 0; }
}

.plvbn-inner { position: relative; z-index: 2; }

.plvbn-head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 20px;
}
.plvbn-title {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 800; font-size: 15px;
	color: rgba(255, 255, 255, .95); letter-spacing: -.2px;
}
.plvbn-home {
	font-size: 12px; font-weight: 500; letter-spacing: .3px;
	color: rgba(255, 255, 255, .45); text-decoration: none; transition: color .2s;
}
.plvbn-home:hover { color: rgba(255, 255, 255, .78); }

/* Подпись главы внутри меню */
.plvbn-ch {
	width: 100%;
	margin: 14px 0 8px;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 10px; font-weight: 800;
	letter-spacing: 1.6px; text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}
.plvbn-ch:first-child { margin-top: 0; }

.plvbn-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.plvbn-pill {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 8px 15px; border-radius: 100px;
	font-size: 12.5px; font-weight: 500;
	color: rgba(255, 255, 255, .92) !important;
	text-decoration: none;
	background: rgba(255, 255, 255, .11);
	border: 1.5px solid rgba(255, 255, 255, .20);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	white-space: nowrap;
	transition: background .22s, border-color .22s, transform .2s, box-shadow .22s;
	-webkit-tap-highlight-color: transparent;
}
.plvbn-pill:visited { color: rgba(255, 255, 255, .92) !important; }
.plvbn-pill:hover {
	background: rgba(255, 255, 255, .22);
	border-color: rgba(255, 255, 255, .42);
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.plvbn-pill em { font-style: normal; font-size: 13px; line-height: 1; }

.plvbn-pill--active {
	background: rgba(255, 255, 255, .24) !important;
	border-color: rgba(255, 255, 255, .58) !important;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .09), 0 4px 16px rgba(0, 0, 0, .18) !important;
	transform: none !important;
}

@keyframes plvbn-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
	.plvbn, .plvbn-btn i { transition: none; }
	.plvbn-ray, .plvbn-bub, .plvbn-pill { animation: none !important; }
}
@media print { .plvbn, .plvbn-btn, .plvbn-veil { display: none; } }

/* ── Товар со скидкой ────────────────────────────────────────────────
   В разметке порядок «цена → старая цена → фасовка», поэтому на карточке
   выходило три строки, причём слэш от цены висел над перечёркнутой ценой и
   читалось это как каша. Переставляем флексом: фасовка сразу за ценой,
   старая цена — отдельной строкой под ними.

   Новая цена красная — это единственный на карточке сигнал, что скидка
   есть. #d92d20 на белом даёт контраст 4.83 при норме 4.5 для мелкого
   жирного текста. Определяем скидку через :has(): отдельного класса на
   карточке нет, а трогать разметку подрядчика ради него незачем. */
.plvp-card .plvp-price      { order: 1; }
.plvp-card .plvp-portion    { order: 2; }
.plvp-card .plvp-price-orig {
	order: 3;
	flex: 0 0 100%;
	margin-top: 2px;
	font-size: 12px !important;
	color: #98a2ab !important;
	font-weight: 600;
}
.plvp-card .plvp-price-row:has(.plvp-price-orig) .plvp-price {
	color: #d92d20 !important;
}
/* Слэш при красной цене остаётся серым: он разделитель, а не часть цены. */
.plvp-card .plvp-price-row:has(.plvp-price-orig) .plvp-price::after { color: #e0a9a3; }

/* ── Узкая карточка: цена и фасовка обязаны уместиться в одну строку ──
   Замер на телефоне: карточка 100px, под текст остаётся 80px, а «15,00 €»
   плюс «/1шт» просят 97 — фасовка срывалась на вторую строку и переставала
   читаться как «цена за столько-то».

   Порог по ширине КАРТОЧКИ, не окна: в сетке глав карточка 100px, а на
   странице раздела 234px при том же окне. */
.plvp-card { container-type: inline-size; }

@container (max-width: 140px) {
	.plvp-card .plvp-cap { padding: 0 7px !important; }
	.plvp-card .plvp-price-row { gap: 3px; }
	.plvp-card .plvp-price { font-size: 14px !important; }
	.plvp-card .plvp-portion { font-size: .78em; }
	/* Перечёркнутая старая цена третьим элементом в строку уже не влезает —
	   у распродажных карточек фасовка честно уходит вниз. */
	.plvp-card .plvp-price-orig { font-size: 11px !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   ПОДТВЕРЖДЕНИЕ ГОРОДА (18.08.2026)
   Город определяется автоматически и ошибается: у заказчика в Будве вышел
   Котор. Молча доверять этому нельзя — от города зависят и ассортимент, и
   день доставки. Поэтому после начала прокрутки новичку показываем окно с
   указанием на плашку в шапке, где город и дата.

   Затемнение НЕплотное, а плашка поднята над ним: человек должен увидеть,
   ГДЕ это меняется, а не просто прочитать вопрос.
   ══════════════════════════════════════════════════════════════════════ */
/* Затемнения нет: вопрос про город — уточнение, а не преграда. Слой оставлен
   прозрачным только чтобы ловить клик мимо окна. */
.plvcc-veil { position: fixed; inset: 0; z-index: 2400; background: transparent; }

.plvcc {
	position: fixed; z-index: 2403;
	/* Без border-box padding прибавлялся к ширине: окно выходило 362px при
	   заданных 330 и упиралось в оба края экрана. */
	box-sizing: border-box;
	/* Окно висит прямым потомком body, а шрифт сайта задан ниже по дереву —
	   без явного объявления текст падал в засечный дефолт браузера. */
	font-family: 'Golos Text', 'Montserrat', system-ui, -apple-system, sans-serif;
	width: min(248px, calc(100vw - 24px));
	padding: 12px 13px 11px;
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(8, 30, 44, .20);
	opacity: 0; transform: translateY(-8px);
	transition: opacity .22s ease, transform .22s ease;
}
.plvcc.is-on { opacity: 1; transform: translateY(0); }

/* Стрелка вверх — «смотрите туда». Левый край считает JS по плашке. */
.plvcc::before {
	content: ""; position: absolute; top: -7px; left: var(--plvcc-arrow, 24px);
	width: 14px; height: 14px; background: #fff;
	transform: rotate(45deg); border-radius: 3px;
}
.plvcc-title {
	margin: 0 0 7px;
	font-size: 14px; font-weight: 800; color: #12303c; line-height: 1.25;
}
.plvcc-city {
	display: inline-flex; align-items: center; gap: 5px;
	margin: 0 0 10px; padding: 3px 9px; border-radius: 999px;
	background: #e8f6fe; color: #0b5f85;
	font-size: 12px; font-weight: 700;
}
.plvcc-text {
	margin: 0 0 13px;
	font-size: 13px; line-height: 1.45; color: #5c6874;
}
.plvcc-btns { display: flex; gap: 8px; }
.plvcc-btn {
	flex: 1 1 auto; appearance: none; border: 0; cursor: pointer;
	padding: 8px 10px; border-radius: 10px;
	font-family: inherit; font-size: 12px; font-weight: 700;
	transition: background .15s, transform .12s;
}
.plvcc-btn:active { transform: scale(.97); }

/* Второй экран окна — выбор города. Список сделан кнопками в рост пальца:
   окно всплывает на телефоне, где выпадающий select неудобен. */
.plvcc.is-list { width: min(280px, calc(100vw - 24px)); }
.plvcc-cities {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: min(46vh, 320px);
	overflow-y: auto;
	margin-top: 10px;
	-webkit-overflow-scrolling: touch;
}
.plvcc-city-opt {
	appearance: none;
	border: 1px solid transparent;
	background: #f1f3f5;
	color: #12303c;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.plvcc-city-opt:hover { background: #e6f6fa; }
.plvcc-city-opt.is-on { border-color: #0090b8; background: #e6f6fa; color: #0090b8; }
.plvcc-city-opt.is-busy { opacity: .6; cursor: progress; }
.plvcc-yes { background: #12303c; color: #fff; }
.plvcc-yes:hover { background: #1d4759; }
.plvcc-no  { background: #eef1f4; color: #33414d; }
.plvcc-no:hover { background: #e2e7ec; }

@media (prefers-reduced-motion: reduce) { .plvcc { transition: none; } }


/* ── Пустая полоса между последней главой и подвалом ──────────────────
   Замер: 165px белого. Складывалось из трёх слагаемых — 40px собственного
   низа главы, 96px `padding-bottom` у `main` (запас под липкую корзину) и
   40px `margin-top` у подвала.

   Запас под корзину на `main` не работает: корзина прибита к низу ОКНА
   (`position: fixed`), а у нижней кромки страницы стоит подвал — он и
   попадает под неё. Переносим запас на подвал: белая дыра исчезает,
   а нижняя строка подвала по-прежнему не уезжает под корзину. */
.site-main--front { padding-bottom: 0 !important; }
.site-main--front ~ .site-footer { margin-top: 0 !important; }
.site-footer { padding-bottom: 96px; }


/* ── Поиск: один крестик вместо двух и сообщение о пустой выдаче ──────
   Поле объявлено как <input type="search">, поэтому WebKit рисует СВОЙ
   крестик поверх кнопки темы (.plv-search-clear) — их было видно два.
   Родной убираем: кнопка темы умеет больше, она же снимает фильтр. */
.plv-search-input::-webkit-search-cancel-button,
.plv-search-input::-webkit-search-decoration,
.plv-search-input::-webkit-search-results-button {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}
.plv-search-input::-ms-clear { display: none; width: 0; height: 0; }

/* Пустая выдача раньше выглядела как поломка: карточки исчезали, а причины
   никто не показывал. */
.plvsn {
	margin: 10px auto 0;
	max-width: 720px;
	padding: 14px 16px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 4px 16px rgba(8, 47, 73, .10);
	font-family: 'Golos Text', 'Montserrat', system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: #33414d;
	text-align: center;
}
.plvsn b { color: #12303c; }
.plvsn-hint { display: block; margin-top: 4px; font-size: 12.5px; color: #6b7785; }

/* ── КОРЕНЬ проблемы «поиск не реагирует» ────────────────────────────
   Штатный фильтр помечает карточки атрибутом `hidden`, но у .plvp-card
   класс задаёт `display: flex`, а правило класса сильнее браузерного
   `[hidden] { display: none }`. Замер: 453 карточки с атрибутом `hidden`,
   реально скрытых — НОЛЬ. Поиск работал, просто результат не был виден.

   Одна строка чинит и наш слой, и штатный фильтр, и чужой файл не трогает. */
.plvp-card[hidden] { display: none !important; }

/* Глава, из которой поиск убрал все карточки, оставалась пустой шапкой. */
.plvch[hidden], [data-plv-section][hidden] { display: none !important; }

/* ── Знак «+» по центру кружка ────────────────────────────────────────
   Кнопка центрирует ТЕКСТ по строке (`align-items: center`), а глиф «+»
   сидит на математической оси шрифта, которая с центром строки не совпадает,
   — поэтому крестик визуально уезжал вниз и влево. Кегль и line-height тут
   не помогут: смещение зависит от метрик шрифта.

   Рисуем плюс и минус двумя полосками: их центр задаётся геометрией, а не
   шрифтом, и совпадает с центром круга при любом кегле и любой локали. */
.plvp-qty-btn { position: relative; font-size: 0 !important; }

.plvp-qty-btn::before,
.plvp-qty-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	border-radius: 1.5px;
}
/* Горизонтальная перекладина есть у обоих знаков. */
.plvp-qty-btn::before {
	width: 15px;
	height: 2.5px;
	transform: translate(-50%, -50%);
}
/* Вертикальная — только у плюса. */
.plvp-qty-plus::after {
	width: 2.5px;
	height: 15px;
	transform: translate(-50%, -50%);
}
.plvp-qty-minus::after { display: none; }

/* Счётчик остаётся текстом — там цифры, и им кегль нужен. */
.plvp-qty .plvp-qty-n { font-size: 14px !important; }

@media (max-width: 560px) {
	.plvp-qty-btn::before { width: 13px; height: 2.2px; }
	.plvp-qty-plus::after { width: 2.2px; height: 13px; }
}


/* ══════════════════════════════════════════════════════════════════════
   ОКНО ДОСТАВКИ: модалка вместо шторы, две недели вместо месяца (19.08)

   Было: шторка снизу во весь экран (`bottom: 0`, до 90dvh) с календарём на
   целый месяц и колонкой городов списком. На телефоне это занимало экран
   целиком ради выбора одной даты.

   Стало: компактная модалка по центру, город — выпадающим списком, даты —
   полосой на текущую и следующую неделю.

   Поведение окна живёт в plv-spa-cart.js (файл подрядчика) и НЕ тронуто:
   даты рисует наш слой, а клики по ним ловит штатный делегированный
   обработчик — он ищет `[data-plv-dp-date]` в любом месте панели.
   ══════════════════════════════════════════════════════════════════════ */

.plv-dp-panel {
	top: 50% !important;
	bottom: auto !important;
	left: 50% !important;
	width: calc(100% - 28px) !important;
	max-width: 360px !important;
	max-height: min(86dvh, 640px) !important;
	transform: translate(-50%, -46%) scale(.98) !important;
	/* Прозрачность НЕ анимируем: элемент с opacity < 1 создаёт свой контекст
	   наложения, и `backdrop-filter` у внутренней подложки начинает подмешивать
	   не тот фон — окно просвечивает насквозь. Достаточно движения и масштаба. */
	transition: transform .26s cubic-bezier(.34, 1.1, .64, 1) !important;
}
.plv-dp-panel.open { transform: translate(-50%, -50%) scale(1) !important; }
.plv-dp-inner {
	border-radius: 20px !important;
	max-height: min(86dvh, 640px) !important;
	padding: 18px 18px 16px !important;
	border: 1px solid rgba(255, 255, 255, .95) !important;
	box-shadow: 0 18px 56px rgba(0, 90, 140, .22) !important;
}
.plv-dp-title { font-size: 20px !important; margin-bottom: 12px !important; }
.plv-dp-subtitle { margin: 10px 0 6px !important; }

/* ── Окно «Доставка» списком (22.09.2026) ──────────────────────────────
   Город — выпадающим списком, даты — строками «Пт, 25 сентября · 17:00–18:30»,
   нажатие на строку сразу выбирает день (plv-dock.js). Родные части окна —
   плитки городов, месячный календарь и «Готово» — прячем: сохранение идёт
   через них же, но показывать один выбор дважды незачем. */
.plv-dp-panel, .plv-dp-inner { height: auto !important; }
.plv-dp-panel.plvdl-on .plv-dp-title,
.plv-dp-panel.plvdl-on .plv-dp-subtitle,
.plv-dp-panel.plvdl-on .plv-dp-cities,
.plv-dp-panel.plvdl-on .plv-dp-cal,
.plv-dp-panel.plvdl-on .plv-dp-dates,
.plv-dp-panel.plvdl-on .plv-dp-confirm { display: none !important; }

.plvdl { display: flex; flex-direction: column; gap: 10px; font-family: var(--plv-font-ui, Manrope, -apple-system, 'Segoe UI', Roboto, sans-serif); }
.plvdl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plvdl-title { font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif); font-size: 28px; font-weight: 500; font-style: italic; color: var(--sky-4, #0b7fb3); line-height: 1.1; }
.plvdl-x {
	flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(18, 48, 60, .07); color: #12303c; font-size: 16px; line-height: 1;
}
.plvdl-city, .plvdl-sub {
	display: flex; flex-direction: column; gap: 6px;
	font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #7c8a95;
}
.plvdl-sub { margin-top: 2px; }
.plvdl-select {
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 48px; padding: 0 42px 0 14px; border-radius: 13px;
	border: 1px solid rgba(0, 120, 180, .22); background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2312303c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 8px;
	font: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #12303c;
	cursor: pointer;
}
.plvdl-select:focus { outline: 2px solid #2cb2f0; outline-offset: 1px; }
.plvdl-list { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; max-height: 56dvh; overflow-y: auto; overscroll-behavior: contain; padding: 1px; }
.plvdl-date {
	display: flex; align-items: center; gap: 12px; width: 100%;
	padding: 12px 14px; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
	background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 1px rgba(0, 120, 180, .14);
	font: inherit; color: #12303c; transition: background .15s, box-shadow .15s, transform .1s;
}
.plvdl-date:hover { background: #fff; }
.plvdl-date:active { transform: scale(.985); }
.plvdl-date.active { background: #12303c; color: #fff; box-shadow: 0 4px 14px rgba(18, 48, 60, .3); }
.plvdl-radio { flex: 0 0 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(18, 48, 60, .28); }
.plvdl-date.active .plvdl-radio { box-shadow: inset 0 0 0 5px #fff; }
.plvdl-day { flex: 1 1 auto; min-width: 0; }
.plvdl-day b { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; }
.plvdl-day i {
	display: inline-block; margin-top: 2px; font-style: normal;
	font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0090b8;
}
.plvdl-date.active .plvdl-day i { color: #9fe3f7; }
.plvdl-time { flex: 0 0 auto; text-align: right; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plvdl-time small { display: block; margin-top: 1px; font-size: 11px; font-weight: 600; opacity: .72; }
.plvdl-note { margin: 4px 0; padding: 14px 8px; font-size: 14px; line-height: 1.4; color: #6b7785; text-align: center; }
/* 24.09.2026: у дня два окна — выбор второй строкой под датой, основное отмечено по умолчанию. */
.plvdl-date:has(.plvdl-slots) { flex-wrap: wrap; row-gap: 8px; }
.plvdl-slots { flex: 1 1 100%; display: flex; gap: 6px; padding-left: 30px; box-sizing: border-box; }
.plvdl-sl {
	flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
	padding: 6px 8px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px rgba(18, 48, 60, .16);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.plvdl-sl b { font-size: 14px; font-weight: 700; line-height: 1.2; }
.plvdl-sl small { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.plvdl-sl.is-on { background: #e6f6fa; box-shadow: inset 0 0 0 2px #0090b8; color: #12303c; }
.plvdl-date.active .plvdl-sl { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.plvdl-date.active .plvdl-sl.is-on { background: #fff; color: #12303c; box-shadow: none; }
.plvdl-retry { margin-left: 4px; padding: 0; border: 0; background: none; color: #0090b8; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ══════════════════════════════════════════════════════════════════════
   ПОЛОСА ЛЕЙБЛОВ (25.08.2026)

   Заменила три ряда пилюль с разделами: разделов три десятка и они есть в
   бургер-меню, а лейблов шесть и у каждого понятный повод нажать. Каждый
   квадрат покрашен в цвет своего лейбла из справочника (--lbl приходит из
   разметки), значок подобран под смысл.

   Полоса липкая: фильтр остаётся под рукой во время прокрутки — иначе, уйдя
   вниз на третью главу, снять его было бы нечем.
   ══════════════════════════════════════════════════════════════════════ */
.plvch-labels {
	/* Шапка — флекс: без min-width полоса раздвигает её по своему содержимому
	   и уезжает за правый край экрана вместо того, чтобы прокручиваться. */
	flex: 1 1 0;
	min-width: 0;
	margin: 0 0 4px;
	padding: 8px 0 10px;
}

/* Залипание сделано классом, а не `position: sticky`: полоса живёт внутри
   короткого блока шапки, и sticky уезжал бы вместе с ним. Пока шапка на
   экране — полоса стоит справа от логотипа; как только шапка ушла вверх,
   полоса открепляется и садится под верхней панелью, чтобы фильтр
   оставался под рукой на любой глубине прокрутки. */
.plvch-labels.is-stuck {
	position: fixed;
	top: var(--plv-nav-h, 61px);
	left: 0;
	right: 0;
	z-index: 900;              /* ниже верхней панели (1000) и бургера (1200) */
	margin: 0;
	padding: 8px 12px 10px;
	background: linear-gradient(180deg, var(--plv-bg, #fff) 84%, rgba(255, 255, 255, 0));
	backdrop-filter: blur(6px);
	animation: plvchLabelsDrop .18s ease-out both;
}
/* Анимируем только прозрачность. Сдвигом полосу двигать нельзя: в фоновой
   вкладке анимация застывает на первом кадре, и полоса так и осталась бы
   поднятой на несколько пикселей, заезжая под верхнюю панель. */
@keyframes plvchLabelsDrop {
	from { opacity: 0; }
	to   { opacity: 1; }
}
/* Место, которое полоса занимала в потоке, — чтобы каталог не прыгнул вверх. */
.plvch-labels-hold { display: none; }
.plvch-labels-hold.is-on { display: block; }
.plvch-labels-row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 2px 4px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.plvch-labels-row::-webkit-scrollbar { display: none; }

.plvch-lbl {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 84px;
	min-height: 68px;
	padding: 8px 6px;
	border: 1.5px solid color-mix(in srgb, var(--lbl) 28%, transparent);
	border-radius: 16px;       /* квадрат со сглаженными углами */
	background: color-mix(in srgb, var(--lbl) 9%, #fff);
	color: color-mix(in srgb, var(--lbl) 78%, #12303c);
	font-family: var(--plv-font);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	cursor: pointer;
	transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.plvch-lbl:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--lbl) 22%, transparent);
}
.plvch-lbl:active { transform: scale(.97); }
.plvch-lbl-ic { font-size: 20px; line-height: 1; }
.plvch-lbl-tx { display: block; max-width: 100%; }

/* Выбранный лейбл заливается своим цветом целиком — видно с одного взгляда,
   какой фильтр включён. */
.plvch-lbl[aria-pressed="true"] {
	background: var(--lbl);
	border-color: var(--lbl);
	color: #fff;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--lbl) 34%, transparent);
}
/* Когда фильтр включён, остальные приглушаются: взгляд не спорит. */
.plvch-labels.is-filtering .plvch-lbl[aria-pressed="false"] { opacity: .45; }

/* Лейбл, под который нет ни одного товара, не показываем: нажимать не на что. */
.plvch-lbl[hidden] { display: none; }

@media (max-width: 760px) {
	/* На телефоне полоса встаёт под логотип во всю ширину: рядом с ним ей
	   остаётся несколько пикселей, и квадраты схлопываются в ничто. */
	.plvch-hero { flex-wrap: wrap; }
	.plvch-labels { flex: 1 0 100%; width: 100%; }
}
@media (max-width: 560px) {
	.plvch-lbl { width: 74px; min-height: 62px; font-size: 10px; padding: 7px 5px; }
	.plvch-lbl-ic { font-size: 18px; }
	.plvch-labels { padding: 6px 0 8px; }
}

/* ── Бургер на телефоне: правый нижний угол ─────────────────────────────
   Собирать заказ удобнее одной рукой, а до левого верхнего угла большой
   палец не достаёт. На компьютере кнопка остаётся на прежнем месте: там
   мышь, и угол экрана ничем не лучше. */
@media (max-width: 760px) {
	.plvbn-btn {
		top: auto;
		left: auto;
		right: 14px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		z-index: 1200;
		box-shadow: 0 8px 24px rgba(8, 47, 73, .28);
	}
	/* Панель корзины приходит снизу — приподнимаем кнопку над ней. */
	body:has(.plv-cart-bar.visible) .plvbn-btn {
		bottom: calc(78px + env(safe-area-inset-bottom, 0px));
	}
	/* Отступ слева под кнопку в шапке больше не нужен. */
	body:has(.plvbn-btn) .plv-nav { padding-left: 12px; }
}

/* Оформление: «Номер для связи через мессенджеры тот же» (22.09.2026) */
.plv-checkout-same { margin: 10px 0 8px; }
.plv-checkout-input.is-same { background: #f1f5f9; color: #475569; }