/* [OURS] CHECKOUT-REBUILD Б12 (2026-08-26): попап корзины ВИТРИНЫ (этап D) — вёрстка 1:1
   с утверждённым прототипом (docs/checkout-rebuild/PROTOTYPE.html: .q-sheet/.q-plate/
   .q-cross/.q-sheet-toast; медиа-план ит.19/29/30: узкие 100vw, 700+ = 640, 980+ = 1100).
   Грузится ТОЛЬКО на витрине в server mode, ПОСЛЕ checkout_v2_cart.css (тот несёт токены
   и общий .q-item). Правило каскада прототипа: медиа-блоки размеров стоят ПОСЛЕ базовых
   правил (класс «молча проигравшего правила» пойман смоком дважды — ит.19).
   Перед показом Диме: python3 scripts/prototype_css_check.py --file <этот файл>. */

/* попап живёт на СТАРОЙ витрине — свой box-sizing и шрифт, чтобы не зависеть от её CSS */
.q-ovl, .q-sheet, .q-sheet * { box-sizing: border-box; }
.q-sheet [hidden], .q-ovl[hidden] { display: none !important; }

.q-ovl { position:fixed; inset:0; background:rgba(8,26,38,.5); z-index:10040;
	opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s ease, visibility 0s linear .22s; }
.q-ovl.show { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .22s ease; }

/* міні-кошик: модал по центру, высота подстраивается под содержимое (живой мобильный
   паттерн Розетки); на узком экране — БЕЗ полей вокруг (Дима 24.08), ширина 100vw */
.q-sheet { position:fixed; inset:0; margin:auto; z-index:10050; background:var(--q-card);
	width:100vw; height:fit-content; max-height:calc(100dvh - 12px); border-radius:14px;
	box-shadow:0 24px 60px -24px rgba(0,0,0,.55);
	transform:scale(.96) translateY(10px); opacity:0; pointer-events:none;
	visibility:hidden; /* закрытая шторка — вне табуляции и дерева скринридера */
	transition:.25s cubic-bezier(.3,.9,.4,1); transition-property:transform,opacity,visibility;
	display:flex; flex-direction:column;
	color:var(--q-ink); font-family:var(--q-serif); font-size:15px; line-height:1.45; text-align:left; }
.q-sheet.show { transform:none; opacity:1; pointer-events:auto; visibility:visible; transition-delay:0s; }
.q-sheet button { font-family:inherit; }
.q-sheet .sh { display:flex; align-items:center; gap:10px; padding:14px 13px 8px; }
.q-sheet .sh h3 { font:700 19px/1.2 var(--q-serif); flex:1; margin:0; }
.q-x { border:none; background:var(--q-bg); width:44px; height:44px; border-radius:50%; cursor:pointer;
	color:var(--q-ink); display:grid; place-items:center; flex:none; }
.q-x:hover { background:var(--q-soft); }
.q-sheet .body { overflow:auto; padding:0 13px; overscroll-behavior:contain; }
.q-added { display:flex; gap:8px; align-items:center; color:var(--q-ok); font-size:14px; font-weight:600; padding:0 0 8px; }
.q-added svg { flex:none; }

/* пустой кошик в шторке (всё удалили не закрывая) */
.q-sheet-empty { text-align:center; color:var(--q-ink2); font-size:14.5px; padding:18px 6px 10px; }

/* ошибка сети/сервера внутри шторки (ретрай исчерпан — честный текст вместо белого экрана) */
.q-sheet-err { display:none; margin:4px 0 10px; border:1.5px solid var(--q-danger); background:rgba(196,58,58,.07);
	border-radius:11px; padding:10px 13px; font-size:13.5px; line-height:1.45; color:var(--q-danger); font-weight:600; }
.q-sheet-err.show { display:block; }

/* ── СУПУТНІ (решение Димы 22.08: блок ПОД кнопкой + карусель вбок; §2 п.21 «в») ── */
.q-cross { border-top:1px solid var(--q-line); margin-top:14px; padding:16px 0 4px; }
.q-xhead { display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.q-xhead h4 { font:700 15.5px/1.2 var(--q-serif); letter-spacing:-.01em; margin:0; }
/* полоса карточек: свой горизонтальный скролл со снапом; справа — мягкое згасання «є ще».
   Снап МЯГКИЙ (proximity): mandatory цеплялся намертво — ловлено смоком прототипа 22.08 */
.q-xwrap { position:relative; margin:0 -13px; padding:0 13px; }
.q-xrow { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity;
	scroll-padding-left:13px; padding:2px 0 10px; scrollbar-width:thin; scrollbar-color:var(--q-line) transparent; }
.q-xrow::-webkit-scrollbar { height:4px; }
.q-xrow::-webkit-scrollbar-thumb { background:var(--q-line); border-radius:4px; }
.q-xrow::-webkit-scrollbar-track { background:transparent; }
/* згасання справа гаснет, когда долистали (класс ставит JS) */
.q-xwrap::after { content:""; position:absolute; top:0; right:0; bottom:10px; width:34px; pointer-events:none;
	background:linear-gradient(to right, transparent, var(--q-card) 78%); opacity:1; transition:opacity .25s; }
.q-xwrap.q-end::after { opacity:0; }
/* стрелка — ТОЛЬКО где есть мышь: на телефоне садилась поверх карточки (320px, прототип) */
.q-xnext { display:none; }
@media (hover:hover) and (pointer:fine){
	.q-xnext { position:absolute; top:calc(50% - 22px); right:6px; width:36px; height:36px; border-radius:50%;
		border:1px solid var(--q-line); background:var(--q-card); color:var(--q-ink); cursor:pointer;
		display:grid; place-items:center; box-shadow:0 6px 18px -8px rgba(8,30,46,.45); transition:opacity .25s, transform .18s; }
}
.q-xnext:hover { transform:translateX(2px); border-color:var(--q-brand); color:var(--q-brand); }
.q-xwrap.q-end .q-xnext { opacity:0; pointer-events:none; }
/* карточка: фото КВАДРАТНОЕ без внутренней рамки; название ровно 2 строки с многоточием
   (наши названия длинные — медиана 81 символ, §2 п.21) */
.q-xcard { flex:0 0 148px; scroll-snap-align:start; border:1px solid var(--q-line); border-radius:14px;
	padding:12px; background:var(--q-card); display:flex; flex-direction:column;
	transition:border-color .18s, box-shadow .18s, transform .18s; }
.q-xcard:hover { border-color:#cfe0ee; box-shadow:0 10px 24px -16px rgba(8,30,46,.5); transform:translateY(-1px); }
.q-xcard .i { aspect-ratio:1/1; width:100%; display:grid; place-items:center; overflow:hidden; padding:4px; }
.q-xcard .i img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.q-xcard .nm { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
	font-size:13.5px; line-height:1.32; font-weight:600; margin-top:9px; min-height:calc(2 * 1.32em);
	color:inherit; text-decoration:none; }
/* [решение Димы 27.08] 600, а НЕ 500: сайт подключает Open Sans только в 400/600/700
   (view_index.php, view_basket.php, view_checkout.php), пятисотой в наборе нет — браузер
   откатывался на 400, и суммы выглядели бледнее прототипа (поймал Дима глазами).
   Вариант «добавить сайту 500» отклонён: не тянем лишний файл шрифта ради полутона. */
.q-xcard .pr { font-size:16.5px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:6px; color:var(--q-price); }
.q-xcard .avail { font-size:11.5px; color:var(--q-ok); font-weight:600; margin-top:3px; }
.q-xadd { margin-top:9px; width:100%; min-height:44px; border-radius:10px; border:1.5px solid var(--q-brand);	/* [Б32] было 40 — тач-мишень ≥44 (правило Б22, обмер дизайн-критика 05.09: 40,0) */
	background:none; color:var(--q-brand); font:inherit; font-weight:600; font-size:15px; line-height:1; cursor:pointer;
	display:flex; align-items:center; justify-content:center; gap:6px; transition:background .18s, color .18s, border-color .18s; }
.q-xadd:hover { background:var(--q-brand); color:#fff; }

/* итог и кнопки — в потоке, но липнут к низу пока не долистал (супутні — ПОД ними) */
.q-sheet .foot { position:sticky; bottom:0; z-index:2; background:var(--q-card);
	padding:12px 0 calc(6px + env(safe-area-inset-bottom)); border-top:1px solid var(--q-line); }
.q-plate { display:flex; align-items:center; gap:10px; background:var(--q-oksoft); border-radius:13px; padding:8px 8px 8px 14px; }
/* сумма плашки — без подписи, вес 500 (§2 п.37) */
.q-plate .s { font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; flex:1; white-space:nowrap; color:var(--q-price); }
.q-plate .q-cta { margin:0; width:auto; flex:none; padding:0 16px; min-height:48px; font-size:15px; }
/* «Продовжити покупки» — притушена (§2 п.5) */
.q-continue { display:block; width:100%; text-align:center; border:none; background:none; color:var(--q-ink2);
	font-size:14px; cursor:pointer; min-height:44px; margin-top:2px; text-decoration:underline; text-underline-offset:3px; }
.q-continue:hover { color:var(--q-brand); }
@media (max-width:374px){
	.q-plate { flex-direction:column; align-items:stretch; gap:8px; padding:10px; }
	.q-plate .s { text-align:center; }
	.q-plate .q-cta { width:100%; }
}

/* тост «Товар додано» уехал в общий checkout_v2_cart.css ([Б19 02.09]: нужен и странице
   оформления — сердечко кебаба «б»; z-index там 10080 — поверх окон popup_v2) */

/* ── размеры шторки на широких экранах — ПОСЛЕ базовых правил (урок каскада ит.19) ── */
@media (min-width:700px){
	.q-sheet { width:min(640px,96vw); max-height:94dvh; border-radius:18px; }
}
/* «Продовжити покупки» на узких скрыта (решение Димы 24.08 по живой Розетке; §2 п.5/21) */
@media (max-width:979px){
	.q-continue { display:none; }
}
@media (min-width:980px){
	/* модал ~960 как у Розетки (замер их попапа refs/roz_product_popup.png на 1440 ≈ 960px;
	   решение Димы 26.08 «уже, текст висит в воздухе» — было min(1100), 2 товара оставляли
	   пустоту справа; сверено по его ориентиру-Розетке) */
	.q-sheet { width:min(960px,92vw); max-height:92dvh; }
	.q-sheet .body { padding:0 26px; }
	.q-sheet .sh { padding:16px 26px 8px; }
	.q-xwrap { margin:0 -26px; padding:0 26px; }
	.q-xrow { scroll-padding-left:26px; }
	/* низ широкого кошика — строка как у Розетки: «Продовжити» слева, плашка справа ПО СОДЕРЖИМОМУ */
	.q-sheet .foot { display:flex; align-items:center; gap:14px; }
	.q-continue { order:-1; width:auto; margin:0; flex:none; padding:0 12px; }
	.q-plate { margin-left:auto; flex:none; gap:18px; padding:8px 8px 8px 18px; }
	.q-xcard { flex:0 0 200px; }
}