/* ============================================================================
   PLV — значок весового товара на карточке витрины (фича C)
   ----------------------------------------------------------------------------
   У весового товара цена на карточке ПРИМЕРНАЯ: средний вес × цена за единицу.
   Значок в левом нижнем углу фото раскрывает, сколько стоит сама единица.

   Файл отдельный намеренно: style.css темы сейчас в незакоммиченной работе
   подрядчика, и правки туда конфликтовали бы. Подключается в functions.php
   после plove-theme-style.

   Подсказка открывается по наведению (CSS) и по тапу (класс is-open из
   plv-weighted.js): повторный тап закрывает, тап мимо закрывает, Esc закрывает.
   ============================================================================ */

.plvp-box .plvw {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 4;
	line-height: 0;
}

.plvp-box .plvw-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	color: #20261f;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.plvp-box .plvw-dot svg {
	width: 15px;
	height: 15px;
	display: block;
}

.plvp-box .plvw-dot:hover { background: #fff; }
.plvp-box .plvw-dot:focus-visible { outline: 2px solid #2cb2f0; outline-offset: 2px; }

/* ПОДСКАЗКА ПЕРЕЕХАЛА ИЗ КАРТОЧКИ (24.08.2026).
   Здесь она была абсолютным блоком внутри `.plvp-box`, а у него
   `overflow: hidden`: на карточке 110–160px текст шириной до 190px обрезался
   по краю фото. Теперь plv-weighted.js рисует окно у `body` (.plvw-pop) и
   ставит его по значку — обрезать его нечему. Исходный узел остаётся в
   разметке как источник текста и запасной вариант для читалок. */
.plvp-box .plvw-tip {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Окно подсказки: прямой потомок body, поэтому шрифт задаём явно. */
.plvw-pop {
	position: fixed;
	z-index: 2405;
	box-sizing: border-box;
	/* Ширина обязательна: у fixed-элемента с одним max-width браузер сжимает
	   блок по «shrink-to-fit» и окно схлопывается в колонку по букве. */
	width: max-content;
	max-width: min(268px, calc(100vw - 20px));
	padding: 8px 11px;
	border-radius: 10px;
	background: rgba(32, 38, 31, .96);
	color: #fff;
	font-family: 'Golos Text', 'Nunito Sans', system-ui, -apple-system, sans-serif;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	box-shadow: 0 8px 24px rgba(8, 30, 44, .28);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease;
	pointer-events: none;
}
.plvw-pop.is-on { opacity: 1; transform: translateY(0); }

/* Стрелка на значок: снизу окна, а если окно ушло под значок — сверху. */
.plvw-pop::before {
	content: "";
	position: absolute;
	bottom: -5px;
	left: var(--plvw-arrow, 20px);
	width: 12px; height: 12px;
	background: rgba(32, 38, 31, .96);
	transform: rotate(45deg);
	border-radius: 2px;
}
.plvw-pop.is-below::before { bottom: auto; top: -5px; }

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

/* На узких карточках значок чуть меньше, иначе спорит со степпером справа */
@media (max-width: 560px) {
	.plvp-box .plvw { left: 8px; bottom: 8px; }
	.plvp-box .plvw-dot { width: 24px; height: 24px; }
	.plvp-box .plvw-dot svg { width: 14px; height: 14px; }
}


/* ─── Режим остатка «лимит на день доставки» ──────────────────────────────── */
/* Товар не прячем: на другую дату он свободен, покупателю надо это понять. */

.plvp-box .plvd-closed {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	padding: 7px 10px;
	border-radius: 10px;
	background: rgba(32, 38, 31, .88);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}

@media (max-width: 560px) {
	.plvp-box .plvd-closed { left: 8px; right: 8px; bottom: 8px; font-size: 10.5px; padding: 6px 8px; }
}


/* ── Лейблы товара (17.08.2026, угол — 18.08) ────────────────────────
   Плашка УПИРАЕТСЯ в левый верхний угол фото, а не висит с отступом:
   так она читается как часть карточки, а не как наклейка поверх неё.
   Значок весового товара живёт в левом нижнем углу, они не пересекаются. */
.plvl-row {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	pointer-events: none;
}
.plvl {
	background: var(--plvl-c, #1d9e75);
	color: #fff;
	/* Было 10px — на фото читалось с трудом. */
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1;
	padding: 7px 13px 7px 11px;
	/* Внешний угол повторяет скругление фото (17px), внутренний зеркалит его
	   снизу-справа — получается аккуратный уголок, а не срезанная пилюля.
	   Соседние углы прямые: плашка должна упираться в край, а не парить. */
	border-radius: 17px 0 14px 0;
	white-space: nowrap;
	/* Длинные названия («Plovi рекомендует») на карточке 110px не помещаются и
	   упирались в её край: .plvp-box обрезает по overflow, и хвост слова просто
	   пропадал. Ограничиваем шириной карточки с многоточием — обрезка хотя бы
	   выглядит намеренной. Совсем длинные названия лучше сокращать в справочнике
	   лейблов, там они правятся. */
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
@media (max-width: 600px) {
	.plvl { font-size: 10.5px; padding: 6px 9px 6px 8px; border-radius: 17px 0 12px 0; }
}

/* 22.09.2026: товар закрыт отсечкой на выбранную дату — карточка на месте, но серая;
   вместо кнопки — пояснение «Приём резервов на завтра закрыт» (.plvd-closed). */
.plvp-card.is-cutoff .plvp-photo,
.plv-product.is-cutoff .plv-product-photo { filter: grayscale(1); opacity: .6; }
.plvp-card.is-cutoff .plvp-cap { opacity: .75; }