/* [OURS] CHECKOUT-REBUILD Б12 (2026-08-26): ОБЩИЕ стили состава корзины — пара к
   checkout_v2_cart.js («один рендер состава — один стиль», BUILD-PLAN Б12 п.1).
   Правила ВЫРЕЗАНЫ из checkout_v2.css Б0-Б10 дословно (не копия — переезд: там их больше
   нет). Грузятся ДВУМЯ страницами ПЕРВЫМИ:
     - оформление /basket/ (view_checkout.php) — дальше checkout_v2.css со страничным;
     - витрина (view_index.php, за server mode) — дальше cart_popup_v2.css с попапом.
   Классы q-* на старом сайте не живут (греп CSS/JS 26.08 — пусто), утечки нет.
   Перед показом Диме: python3 scripts/prototype_css_check.py --file <этот файл>. */

:root {
	--q-bg: #FFFFFF;      /* фон белый — прикмета живого сайта (тур покупателем 25.08) */
	--q-card: #FFFFFF;
	--q-ink: #202c38;
	--q-ink2: #5E6B76;
	--q-line: #E4E9EE;    /* рамки серые, без синевы */
	--q-fline: #9AACB9;   /* границы полей ввода (контраст ~2.8 — итог аудита п.20) */
	--q-brand: #0894D4;   /* интерактив: гармонизированный яркий голубой, 3.4:1 на белом */
	--q-deep: #056CB0;    /* глубина/hover/ссылки */
	--q-sky: #0FAEE3;     /* живой .akabtn и доминанта логотипа */
	--q-soft: #E9F7FD;
	/* --q-shadow-hdr (тень шапки, HEADER-V2 «М1» 07.09) снят 09.09 (BL-11, решение Димы 08.09 по eMAG): граница шапки — полоска 3 px deep/sky по нижней кромке (popup_v2.css STICKY-HEADER), тени у шапки нет, потребителей у токена не осталось */
	--q-ok: #168A4E;      /* зелёная карточка = зафиксированная конкретика (§2 п.19) */
	--q-oksoft: #E9F6EF;
	--q-danger: #C23434;
	--q-np: #DA291C;      /* фирменный красный Новой Пошты */
	--q-sale: #F84147;    /* плашка скидки — живой оттенок Розетки (ит.43) */
	--q-cta1: #00C0F7;    /* CTA-градиент: живой класс кнопок сайта */
	--q-cta2: #0FAEE3;
	--q-price: #0894D4;   /* ДЕНЬГИ ГОЛУБЫЕ — прикмета живого кошика (§2 п.38) */
	--q-shadow: 0 1px 3px rgba(15,44,82,.08); /* живой сайт без теней — карточку держит рамка */
	--q-r: 14px;
	--q-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── СОСТАВ ЗАКАЗА (прототип .q-item; карточка-позиция с рамкой, выбор Димы 24.08 «б»;
      шаблон ОБЩИЙ: страница оформления, попап корзины, страница заказа) ── */
.q-item { display:grid; grid-template-columns:56px 1fr; grid-template-areas:"ph mid" "rt prices";
	gap:6px 12px; padding:10px; position:relative;
	border:1px solid var(--q-line); border-radius:14px; margin-top:8px; }
.q-item:first-child { margin-top:0; }
/* плашка скидки: пилюля Розетки 9px/600 (ит.43 + доводки Димы) */
.q-item .q-disc { position:absolute; top:6px; left:6px; z-index:1; background:var(--q-sale);
	color:#fff; font-size:9px; font-weight:600; line-height:1; padding:2px 5px; border-radius:99px;
	font-variant-numeric:tabular-nums; }
.q-item.has-disc .ph { margin-top:13px; } /* фото съезжает ниже плашки — не перекрывается (Дима 25.08) */
.q-item .ph { grid-area:ph; width:56px; height:56px; border-radius:12px;
	display:grid; place-items:center; overflow:hidden; }
.q-item .ph img { width:100%; height:100%; object-fit:contain; display:block; }
.q-item .mid { grid-area:mid; min-width:0; }
.q-item .nm { font-size:15px; line-height:1.35; font-weight:600; padding-right:36px; }
.q-item .nm a { color:inherit; text-decoration:none; }
.q-item .art { color:var(--q-ink2); font-size:12.5px; margin-top:3px; }
.q-badge-free { display:inline-flex; align-items:center; gap:4px; margin-top:4px; font-size:12px; font-weight:600;
	color:var(--q-ok); background:var(--q-oksoft); border-radius:99px; padding:2px 9px; }
/* цены строки — за ВСЮ позицию ×кількість (Дима 24.08); мобильно столбиком, десктоп в строку */
.q-item .prices { grid-area:prices; justify-self:end; align-self:center; margin:0;
	display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.q-item .old { color:var(--q-ink2); text-decoration:line-through; font-size:13px; font-variant-numeric:tabular-nums; }
/* вес денег: ключевые 500 / второстепенные 400 (§2 п.37, история 800→700→400→600→500) */
/* [решение Димы 27.08] 600, а НЕ 500: сайт подключает Open Sans только в 400/600/700
   (view_index.php, view_basket.php, view_checkout.php), пятисотой в наборе нет — браузер
   откатывался на 400, и суммы выглядели бледнее прототипа (поймал Дима глазами).
   Вариант «добавить сайту 500» отклонён: не тянем лишний файл шрифта ради полутона. */
.q-item .cur { font-weight:600; font-size:16px; font-variant-numeric:tabular-nums; color:var(--q-price); }
.q-item .rt { grid-area:rt; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; }
.q-item .q-kebabwrap { position:absolute; top:8px; right:8px; }
@media (min-width:700px){
	.q-item { grid-template-columns:64px 1fr auto; grid-template-areas:"ph mid rt" "ph prices rt"; gap:4px 12px; }
	.q-item .ph { width:64px; height:64px; }
	.q-item .prices { justify-self:start; align-self:start; margin-top:3px;
		flex-direction:row; align-items:baseline; gap:8px; flex-wrap:wrap; }
	.q-item .rt { flex-direction:column; align-items:flex-end; justify-content:space-between; gap:8px; }
	.q-item .q-kebabwrap { position:static; }
	.q-item .nm { padding-right:0; }
}

/* степпер */
.q-qty { display:flex; align-items:center; border:1.5px solid var(--q-fline); border-radius:99px; }
.q-qty button { width:42px; height:40px; border:none; background:none; color:var(--q-brand); font-size:21px; cursor:pointer;
	display:grid; place-items:center; font-weight:600; }
.q-qty button:disabled { color:var(--q-line); }
.q-qty output { min-width:28px; text-align:center; font-weight:400; font-variant-numeric:tabular-nums; font-size:16px; }

/* кебаб «⋮» + поповер (Дима 04.08: единый жест вместо крестика) */
.q-kebabwrap { position:relative; }
.q-kebab { border:none; background:none; color:var(--q-ink); cursor:pointer; width:40px; height:40px;
	border-radius:10px; display:grid; place-items:center; margin:-6px -8px 0 0; }
.q-kebab:hover { background:var(--q-bg); }
.q-pop { position:absolute; top:36px; right:0; z-index:20; background:var(--q-card); border:1px solid var(--q-line);
	border-radius:12px; box-shadow:var(--q-shadow); min-width:200px; overflow:hidden; }
.q-pop button { display:flex; gap:10px; align-items:center; width:100%; border:none; background:none;
	font:inherit; font-size:14.5px; color:var(--q-brand); padding:12px 14px; cursor:pointer; min-height:46px; text-align:left; }
.q-pop button:hover { background:var(--q-soft); }
.q-pop button svg { flex:none; }

/* товар закончился, пока лежал в корзине */
.q-item.absent .ph img { filter:grayscale(1); opacity:.45; }
.q-item.absent .nm { color:var(--q-ink2); }
.q-item.absent .prices, .q-item.absent .q-badge-free { display:none; }
.q-absent-badge { display:inline-flex; align-items:center; gap:6px; margin-top:6px;
	color:#C43A3A; font-size:13px; font-weight:700; }
.q-absent-note { display:block; margin-top:3px; font-size:12.5px; color:var(--q-ink2); }

/* CTA (общая: «Оформити замовлення» страницы и попапа) */
.q-cta { width:100%; min-height:52px; border:none; border-radius:14px;
	background:linear-gradient(180deg,var(--q-cta1),var(--q-cta2)); color:#fff; font:inherit; font-size:17px; font-weight:700;
	cursor:pointer; box-shadow:0 8px 18px -8px rgba(11,133,200,.55); margin-top:12px; }
/* [замечание Димы 27.08] кнопка была статичной — при наведении ничего не менялось.
   Светлеем на один шаг (его уточнение: «должно быть не потемнение, а посветление») и чуть
   усиливаем тень — кнопка «оживает», оставаясь своей по цвету. Осветление умеренное: белый
   текст на голубом и так невысокого контраста, сильнее светлить — станет плохо читаться.
   Только для мыши: на тач-экранах :hover залипает после тапа. */
@media (hover:hover) and (pointer:fine) {
	.q-cta:hover:not([disabled]) { background:linear-gradient(180deg,#1ACCFF,#25BDF0);
		box-shadow:0 10px 22px -8px rgba(11,133,200,.6); }
}
.q-cta:active { transform:translateY(1px); }
.q-cta[disabled] { opacity:.45; cursor:default; }

/* блокировка прокрутки фона под открытым модалом/шторкой */
body.q-noscroll { overflow:hidden; }

/* ── [Б19 2026-08-30] программы рассрочки — ОБЩИЙ рендер: модал чекаута (#q-mcredit)
      и окно карточки товара (popup_v2). Перенесено из checkout_v2.css без правок. ── */
/* программы рассрочки (окно + сводка выбранной) */
.q-cprog { border:1.5px solid var(--q-line); border-radius:12px; margin-top:8px; }
.q-cprog.on { border-color:var(--q-brand); background:var(--q-soft); }
.q-cprog-head { display:flex; gap:10px; align-items:center; padding:11px 12px; cursor:pointer; min-height:48px; }
.q-cprog-head .ttl { font-size:13.5px; font-weight:600; flex:1; line-height:1.3; }
.q-cprog-head .ttl small { display:block; font-weight:400; font-size:12px; color:var(--q-ink2); margin-top:1px; }
.q-badge0 { font-size:11px; font-weight:700; color:var(--q-ok); background:var(--q-oksoft); border-radius:99px; padding:3px 9px; flex:none; }
.q-cprog-body { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:0 12px 12px; }
.q-csel { border:1.5px solid var(--q-fline); border-radius:11px; padding:10px 36px 10px 12px; font:inherit;
	font-size:16px; /* [Б19 блок6] ≥16 — иначе iOS Safari зумит страницу при тапе по селекту */
	color:var(--q-ink); min-height:44px;
	/* [Б матрица 01.09 №3] appearance:none — как у полей чекаута (.q-fld input): без него Safari/WebKit
	   рисовал системный селект (radius 5, h 28), рамка/радиус контракта не применялись; стрелка — своя SVG */
	-webkit-appearance:none; appearance:none;
	background:var(--q-card) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235E6B76" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') no-repeat right 12px center / 18px 18px; }
.q-csel:focus { outline:none; border-color:var(--q-sky); box-shadow:0 0 0 3px color-mix(in srgb, var(--q-sky) 20%, transparent); }
.q-cpm { font-size:17px; font-weight:400; font-variant-numeric:tabular-nums; }
.q-cpm small { font-size:12.5px; font-weight:600; color:var(--q-ink2); }
.q-cpick { display:block; width:calc(100% - 24px); margin:0 12px 12px; border:none; border-radius:11px;
	background:var(--q-brand); color:#fff; font:inherit; font-size:14.5px; font-weight:700; min-height:44px; cursor:pointer; }
.q-cpick:hover { background:var(--q-deep); }

/* ── тост-подтверждение (общий: попап корзины + страница оформления; рендерит CQCart.toast).
   [Б19 02.09] переехал из cart_popup_v2.css: понадобился обоим потребителям («Товар додано до
   списку бажань» — решение Димы «б»); z-index 10080 — тост ВСЕГДА верхний слой, в т.ч. поверх
   витринных окон popup_v2 (10070) — тост 10060 тонул под окном входа ── */
.q-sheet-toast { position:fixed; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 40px);
	bottom:24px; z-index:10080; background:var(--q-ink); color:#fff;
	border-radius:11px; padding:11px 15px; font-size:13.5px; text-align:center; opacity:0; transition:.25s;
	pointer-events:none; display:flex; gap:14px; align-items:center; font-family:var(--q-serif); box-sizing:border-box; }
.q-sheet-toast.show { opacity:.97; pointer-events:auto; }
.q-sheet-toast button { border:none; background:none; color:#7FD4F7; font:inherit; font-weight:700; cursor:pointer;
	padding:0; min-height:24px; white-space:nowrap; }