/* ═══════════════════════════════════════════════════════════════════════════
   PLOVI 24.08.2026 — окно выбора варианта и платных опций по «+».

   Форма взята у плашки «Это ваш город?» (.plvcc в plv-dock.css): небольшое
   белое окно у самой кнопки, стрелка смотрит на неё, вуаль прозрачная и нужна
   только чтобы поймать клик мимо. Полноэкранная шторка с блюром здесь лишняя —
   выбор мелкий, а карточку под ним хочется видеть.
   ═══════════════════════════════════════════════════════════════════════════ */

.plvo-veil { position: fixed; inset: 0; z-index: 2400; background: transparent; }

.plvo-pop {
	position: fixed; z-index: 2403;
	/* Без border-box padding прибавился бы к ширине и окно упёрлось бы в края. */
	box-sizing: border-box;
	/* Окно — прямой потомок body, шрифт сайта задан ниже по дереву: без явного
	   объявления текст падает в засечный дефолт браузера. */
	font-family: 'Golos Text', 'Montserrat', system-ui, -apple-system, sans-serif;
	width: min(272px, 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;
}
.plvo-pop.is-on { opacity: 1; transform: translateY(0); }
.plvo-pop.is-above { transform: translateY(8px); }
.plvo-pop.is-above.is-on { transform: translateY(0); }

/* Стрелка на кнопку: сверху окна, а если окно встало над карточкой — снизу. */
.plvo-pop::before {
	content: ""; position: absolute; top: -7px; left: var(--plvo-arrow, 24px);
	width: 14px; height: 14px; background: #fff;
	transform: rotate(45deg); border-radius: 3px;
}
.plvo-pop.is-above::before { top: auto; bottom: -7px; }

.plvo-title {
	margin: 0 0 9px; padding-right: 18px;
	font-size: 13px; font-weight: 800; line-height: 1.25; color: #12303c;
}

.plvo-close {
	position: absolute; top: 8px; right: 8px;
	width: 22px; height: 22px; padding: 0;
	border: 0; border-radius: 50%;
	background: #eef1f4; color: #5c6874;
	font: 700 14px/1 'Golos Text', system-ui, sans-serif;
	cursor: pointer;
}
.plvo-close:hover { background: #e2e7ec; }

/* 24.09.2026: весовой вариант — вес и цена за кг под названием */
.plvo-item-w { display: block; font-size: 12px; font-weight: 500; color: #6b7a83; margin-top: 2px; }
/* 24.09.2026: товар уже в корзине — окно открыто чистым, подсказка под названием */
.plvo-more { margin: -4px 0 8px; font-size: 13px; line-height: 1.35; color: #5b6b74; }
.plvo-sub {
	margin: 9px 0 5px;
	font-size: 9px; font-weight: 800; letter-spacing: 1.1px;
	text-transform: uppercase; color: #9aa8b3;
}
.plvo-sub:first-child { margin-top: 0; }

.plvo-list { display: flex; flex-direction: column; gap: 4px; max-height: 42vh; overflow-y: auto; }

.plvo-item {
	display: flex; align-items: center; gap: 8px;
	width: 100%; box-sizing: border-box;
	padding: 7px 9px;
	border: 1.5px solid #e4eaef; border-radius: 10px;
	background: #fff; cursor: pointer; text-align: left;
	font-family: inherit; font-size: 12.5px; color: #12303c;
	transition: background .15s, border-color .15s;
}
.plvo-item:hover { background: #f6fbfe; }
.plvo-item.active { border-color: #0b9fd8; background: #e8f6fe; }
.plvo-item.is-off { opacity: .45; cursor: not-allowed; background: #fafbfc; }
.plvo-item.is-off:hover { background: #fafbfc; }

.plvo-item-label { flex: 1 1 auto; font-weight: 700; line-height: 1.25; }
.plvo-item-price { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: #5c6874; }
.plvo-item.is-off .plvo-item-price { font-weight: 600; color: #9aa8b3; }

/* Кружок радио и квадрат чекбокса — тот же приём, что у списка городов. */
.plvo-mark {
	flex: 0 0 auto; position: relative;
	width: 17px; height: 17px;
	border: 1.5px solid #cfdae2; background: #fff;
}
.plvo-mark-radio { border-radius: 50%; }
.plvo-mark-check { border-radius: 5px; }
.plvo-item.active .plvo-mark { border-color: #0b9fd8; background: #0b9fd8; }
.plvo-item.active .plvo-mark::after {
	content: ''; position: absolute;
	left: 5px; top: 1.5px; width: 4px; height: 9px;
	border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.plvo-foot { margin-top: 11px; }
.plvo-total {
	display: flex; align-items: baseline; justify-content: space-between;
	margin-bottom: 7px;
	font-size: 11.5px; font-weight: 600; color: #5c6874;
}
.plvo-total b { font-size: 15px; font-weight: 800; color: #12303c; }

.plvo-add {
	display: block; width: 100%;
	appearance: none; border: 0; cursor: pointer;
	padding: 9px 10px; border-radius: 10px;
	background: #12303c; color: #fff;
	font-family: inherit; font-size: 12.5px; font-weight: 700;
	transition: background .15s, transform .12s;
}
.plvo-add:hover { background: #1d4759; }
.plvo-add:active { transform: scale(.98); }
.plvo-add[disabled] { background: #c3ccd4; cursor: not-allowed; transform: none; }

.plvo-err {
	margin: 7px 0 0;
	font-size: 11.5px; font-weight: 700; color: #d3455b; text-align: center;
}

/* Подпись платной опции в корзине (рядом с вариантом). */
.plv-checkout-item-opt {
	display: inline-block;
	margin-left: 4px;
	font-size: 11px; font-weight: 600;
	color: var(--sky-5, #0099d4);
}

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

/* 24.09.2026: количество в окне и «Уже в корзине» — строки этого товара со своими −/+. */
.plvo-qtyrow {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 7px;
	font-size: 11.5px; font-weight: 600; color: #5c6874;
}
.plvo-qty { display: inline-flex; align-items: center; gap: 2px; }
.plvo-qty b { min-width: 26px; text-align: center; font-size: 14px; font-weight: 800; color: #12303c; }
.plvo-qbtn {
	width: 30px; height: 30px; min-height: 0; margin: 0; padding: 0;
	border: 1.5px solid #e4eaef; border-radius: 50%;
	background: #fff; color: #12303c;
	font: 700 16px/1 'Golos Text', system-ui, sans-serif;
	cursor: pointer; text-transform: none; letter-spacing: 0;
	display: inline-flex; align-items: center; justify-content: center;
}
.plvo-qbtn:hover { background: #f6fbfe; border-color: #0b9fd8; }
.plvo-qbtn[disabled] { opacity: .5; cursor: default; }
.plvo-qty--s .plvo-qbtn { width: 26px; height: 26px; font-size: 14px; }
.plvo-qty--s b { min-width: 20px; font-size: 13px; }

.plvo-incart { margin-top: 11px; padding-top: 9px; border-top: 1px dashed #e4eaef; }
.plvo-clist { display: flex; flex-direction: column; gap: 5px; max-height: 30vh; overflow-y: auto; }
.plvo-cline { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #12303c; }
.plvo-cline-l { flex: 1 1 auto; min-width: 0; font-weight: 700; line-height: 1.25; }
.plvo-cline-p { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: #5c6874; }