/* Checkout page — token-driven view scaffold, identical across themes. */

/* -- Page head -- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}
.pgh{padding:34px 0 4px}
.pgh-title{font-family:var(--font-head);font-weight:400;font-size:clamp(32px,6vw,52px);margin:12px 0 10px;text-wrap:balance}
.pgh-sub{color:var(--ink-2);max-width:62ch;font-size:15.5px;text-wrap:pretty}
.ct-h{font-family:var(--font-head);font-weight:400;font-size:22px;margin-bottom:16px}

/* -- Steps -- */
.co-grid{display:grid;gap:16px;align-items:start}
.co-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 20px;margin-bottom:16px}
.co-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.co-head .n{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font-weight:700;font-size:13px}
.co-head h2{font-family:var(--font-head);font-weight:400;font-size:21px;flex:1}
.store .co-login{font-size:13px;font-weight:700;color:var(--primary);white-space:nowrap}
.store .co-login:hover{color:var(--primary-hover)}

/* -- Radio options -- */
.store .opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--radius);margin-bottom:10px;background:var(--surface);color:var(--ink);transition:border-color .18s,background .18s}
.store .opt:last-of-type{margin-bottom:0}
.store .opt:hover{border-color:var(--primary)}
.opt[data-sel="true"]{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,transparent)}
.opt .rad{flex:none;width:18px;height:18px;border-radius:999px;border:2px solid var(--line);display:grid;place-items:center;transition:border-color .18s}
.opt[data-sel="true"] .rad{border-color:var(--primary)}
.opt[data-sel="true"] .rad::after{content:"";width:8px;height:8px;border-radius:999px;background:var(--primary)}
.opt-tx{flex:1;min-width:0}
.opt-tx b{display:block;font-size:14px}
.opt-tx span{font-size:12.5px;color:var(--muted)}
.opt-pr{font-weight:700;font-size:13.5px;white-space:nowrap;color:var(--ink-2)}

/* -- Summary -- */
.co-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 20px}
/* Сума позиції стоїть на ЛІНІЇ ЦІНИ ЗА ОДИНИЦЮ (нижній рядок), а не по центру блоку й не
   на лінії назви: вирівнюємо по кінцю, бо цей рядок у вмісті останній. */
/* 🔴 Три колонки: фото | назва+характеристики | керування. Керування — ОКРЕМА колонка,
   вирівняна по вертикальному центру всієї позиції. Доти вони жили всередині текстового
   блоку, тож із 5+ характеристиками з'їжджали вниз разом із ним і позиція розтягувалась. */
/* `start`, а не `center`: при 2+ характеристиках текстовий блок вищий за праву колонку,
   і центрування ставило суму навпроти списку характеристик, а не навпроти назви. */
/* 🔴 Третій трек — `fit-content(150px)`, а НЕ `auto`. `auto` міряє max-content, тобто ширину
   так, ніби переносу немає: колонка лишалась ~254px навіть після розбиття на три рядки, і
   текст далі душився до ~106px. `minmax(0,1fr)` дозволяє середній колонці стискатись. */
.co-item{display:grid;grid-template-columns:auto minmax(0,1fr) fit-content(150px);align-items:start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.co-info{min-width:0}
/* Спільна БАЗОВА ЛІНІЯ тексту, а не нижній край коробок: кегль суми більший за ціну, тож
   flex-end давав ~4px розбіжності, які око читає як "збито". last baseline бере ОСТАННІЙ
   рядок вмісту (той, де ціна), а не перший (назву). Для старих браузерів лишається flex-end. */

/* Картинку виводимо з baseline-вирівнювання рядка: інакше вона сідає НА базову лінію тексту,
   і назва з цінами виглядають приклеєними до її низу. Центруємо — сума лишається на лінії ціни. */
.co-item img{width:52px;height:68px;object-fit:cover;border-radius:var(--radius);flex:none}

.co-item b{font-family:var(--font-head);font-weight:600;font-size:15px;display:block;line-height:1.3}
.co-item span{font-size:12px;color:var(--muted)}

.co-side .mm-row{margin-top:10px}
.co-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:22px 8px 8px}
.co-empty svg{color:var(--muted)}
.co-empty p{color:var(--ink-2);font-size:14.5px}
/* Причини недоступності оформлення (checkout_unavailable.tpl) */
.co-reasons{margin:0;padding:0 0 0 18px;text-align:left;color:var(--ink-2);font-size:14.5px;line-height:1.6}
.co-reasons li{margin:4px 0}


/* -- Contact row -- */
.ct-row{display:grid;gap:0 12px}

@media (min-width:768px){
	.co-grid{grid-template-columns:1.2fr .8fr;gap:20px}
	.co-side{position:sticky;top:86px}
	.co-card{padding:26px 24px}
	.ct-row{grid-template-columns:1fr 1fr}
}

/* -- Radio inputs (native, no-JS friendly) + errors + success (C2) -- */
.opt{position:relative;cursor:pointer}
.opt-radio{position:absolute;opacity:0;width:0;height:0}
.opt:has(.opt-radio:checked){border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,transparent)}
.opt:has(.opt-radio:checked) .rad{border-color:var(--primary)}
.opt:has(.opt-radio:checked) .rad::after{content:"";width:8px;height:8px;border-radius:999px;background:var(--primary)}
.opt-radio:focus-visible ~ .rad{outline:2px solid var(--primary);outline-offset:2px}
.co-errors{background:color-mix(in srgb,var(--danger,#c0392b) 8%,transparent);color:var(--danger,#c0392b);border:1px solid color-mix(in srgb,var(--danger,#c0392b) 30%,transparent);border-radius:var(--radius);padding:12px 14px;margin-bottom:16px;font-size:14px}
.mm-field.err input{border-color:var(--danger,#c0392b)}
.co-success{padding:40px 0 60px;display:flex;justify-content:center}
.cos-card{max-width:520px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 28px;text-align:center}
.cos-check{width:56px;height:56px;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);display:grid;place-items:center;margin:0 auto 16px}
.cos-title{font-family:var(--font-head);font-weight:400;font-size:clamp(26px,4vw,36px);margin-bottom:8px}
.cos-sub{color:var(--ink-2);margin-bottom:20px}
.cos-num,.cos-total{font-size:15px;margin:4px 0}
.cos-iban{text-align:left;background:color-mix(in srgb,var(--primary) 5%,transparent);border-radius:var(--radius);padding:16px;margin:18px 0}
.cos-iban h3{font-size:14px;font-weight:700;margin-bottom:8px}
.cos-iban pre{white-space:pre-wrap;font-family:inherit;font-size:13.5px;color:var(--ink-2);margin:0}
.cos-items{text-align:left;margin:18px 0;border-top:1px solid var(--line)}
.cos-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.cos-recipient{background:color-mix(in srgb,var(--primary) 5%,transparent);border-radius:var(--radius);padding:14px;margin:18px 0;text-align:left}
.cos-recipient b{display:block;font-size:14.5px;margin-bottom:4px}
.cos-recipient span{display:block;font-size:13px;color:var(--ink-2)}
.cos-register{background:color-mix(in srgb,var(--accent,var(--primary)) 8%,transparent);border-radius:var(--radius);padding:14px;margin:18px 0;text-align:left}
.cos-register b{display:block;font-size:14.5px}
.cos-register span{font-size:12.5px;color:var(--ink-2)}
.cos-register .mm-field{margin-top:10px}
.cos-register-alt{display:block;margin-top:10px;font-size:12.5px}
.cos-register-alt a{text-decoration:underline}
.co-success .btn{width:100%;margin-top:8px}
.cos-tax{font-size:12.5px;color:var(--muted);margin-top:2px}
.cos-ttn{font-size:13.5px;margin-top:8px}
.cos-ttn a{margin-left:8px;text-decoration:underline}
.cos-item{align-items:center;gap:10px}
.cos-item-name{display:inline-flex;align-items:center;gap:8px;min-width:0;text-align:left}
.cos-item-name img{width:34px;height:34px;object-fit:cover;border-radius:var(--radius);flex:none}

/* ── Підсумок замовлення: степери кількості + подарунковий код ─────────────── */
/* 🔴 Права колонка — ДВА рядки, а не один.
   Степер + ціна за одиницю + сума в ОДНОМУ нерозривному рядку (`flex-wrap:nowrap` плюс
   `min-width:96px` у суми) з'їдали ~280px із ~500px картки. Текстовій колонці лишалось
   ~140px, тож назва й характеристики ламались по слову, а степер налазив на список —
   саме це й виглядало як «зламаний кошик».
   Тепер сума йде власним рядком зверху (`order:-1` + `flex:0 0 100%`), степер із ціною —
   під нею. Колонка звузилась удвічі, і її ширина більше не залежить від довжини суми. */
.co-qty{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px 8px;margin:0;justify-self:end;max-width:100%}
.co-qty .mm-pr{order:-1;flex:0 0 100%;margin:0;text-align:right;font-weight:600;white-space:nowrap}
/* Ціна за одиницю — теж власним рядком: вона не переноситься всередині себе, тож поки
   стояла поруч зі степером, саме вона диктувала ширину колонки (~200px) і душила текст. */
.co-qty .co-unit{order:1;flex:0 0 100%;text-align:right}

/* Смуга «на складі лише N» — спільна з кошиком, живе в critical.css (.co-item/.cart-line). */

/* На вузькому екрані 150px під керування з'їдали залишок: при ~300px контейнера текстовій
   колонці лишалось 0. Тому керування переїжджає ПІД позицію на всю ширину рядка — там
   сума, степер і ціна знову вміщуються в один рядок. */
@media (max-width:768px){
	.co-item{grid-template-columns:auto minmax(0,1fr)}
	.co-qty{grid-column:1 / -1;justify-self:stretch;justify-content:flex-end;gap:8px}
	.co-qty .mm-pr,.co-qty .co-unit{order:0;flex:0 0 auto;text-align:right}
}
.co-unit{white-space:nowrap;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
/* Підсумок позиції не переносимо: він тримає праву колонку рівною. */
.co-item .mm-pr{white-space:nowrap}
.co-step{
	width:22px;height:22px;line-height:1;padding:0;
	border:1px solid var(--line,#ddd);background:transparent;color:inherit;
	border-radius:6px;cursor:pointer;font-size:15px
}
.co-step:hover:not([disabled]){border-color:var(--ink)}
.co-step[disabled]{opacity:.45;cursor:default}
.co-qty [data-co-qty]{min-width:18px;text-align:center;font-variant-numeric:tabular-nums}
.co-unit{opacity:.7}

.co-coupon{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
/* min-width:0 обовʼязковий: флекс-елемент за замовчуванням має min-width:auto й не стискається
   нижче «природної» ширини інпута — саме через це кнопка зʼїжджала на наступний рядок. */
.co-coupon .mm-field{flex:1 1 0;min-width:0;margin:0}
.co-coupon .mm-field input{width:100%;box-sizing:border-box}
/* Кнопка була вища за інпут (53.25 проти 48): у .btn власні вертикальні падінги,
   а поле має свою висоту. Прирівнюємо явно й центруємо текст. */
.co-coupon .btn{flex:0 0 auto;white-space:nowrap;margin:0;height:48px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;justify-content:center}
.co-coupon [data-coupon-msg]{flex-basis:100%}

/* -- Місто/точка видачі: автокомпліт + селект (C4) -- */
.co-ship{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.co-ac{position:relative}
.co-ac-list{position:absolute;z-index:20;top:100%;left:0;right:0;margin:4px 0 0;padding:4px;list-style:none;max-height:260px;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.co-ac-list li{padding:9px 10px;border-radius:calc(var(--radius) - 2px);cursor:pointer;font-size:14px}
.co-ac-list li:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.co-ship select{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:inherit;font:inherit}
.co-ship select:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.mm-field.err select{border-color:var(--danger,#c0392b)}
.co-hint{display:block;margin-top:6px;font-size:12px;color:var(--muted,#777)}

/* Promo gifts in order summary + success. */
.co-gift-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);border:1px solid currentColor;border-radius:999px;padding:1px 7px;margin-right:6px}
.cos-gift-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);border:1px solid currentColor;border-radius:999px;padding:1px 7px;margin-left:6px}

/* Осі комбінації в рядку замовлення — списком, як у кошику (інакше дві позиції одного
   товару виглядають однаково, і покупець не бачить, що саме купує). */
.co-variant{list-style:none;margin:2px 0 4px;padding:0;font-size:12px;color:var(--muted)}
.co-variant li{position:relative;padding-left:10px}
.co-variant li::before{content:"•";position:absolute;left:0;opacity:.55}

/* Недоступний рядок у підсумку замовлення: приглушений, зі статусом і кнопкою «прибрати»
   замість степера кількості. Osiротілий варіант (видалений при перезборі матриці) не має
   ані ціни, ані складу — показувати степер було б оманою. */
.co-item--off{opacity:.62}
.co-item--off img{filter:grayscale(1)}
.co-off-note{display:block;margin-top:2px;font-size:12px;color:var(--sale,#b5462b)}
.co-qty--off{display:flex;align-items:center;justify-content:flex-end}
.co-remove{border:1px solid var(--line);background:transparent;color:var(--muted);width:26px;height:26px;border-radius:999px;cursor:pointer;font-size:15px;line-height:1}
.co-remove:hover{color:var(--sale,#b5462b);border-color:currentColor}

/* -- Кастомне поле-чекбокс (матриця «доставка × оплата») --
   Один рядок: бокс + текст. Нативний input лишається у формі (доступність, сабміт),
   видимий квадрат малює span — інакше браузер малює свій, чужий темі. */
.co-check-row{margin:12px 0 0}
.store .co-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;user-select:none;font-size:14.5px;color:var(--ink)}
.store .co-check input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.store .co-check__box{flex:none;width:19px;height:19px;margin-top:1px;display:inline-flex;align-items:center;justify-content:center;
	border:1.5px solid var(--line);border-radius:5px;background:var(--surface);transition:background .15s,border-color .15s}
.store .co-check__box svg{width:12px;height:12px;color:var(--accent-ink);opacity:0;transition:opacity .12s}
.store .co-check input:checked + .co-check__box{background:var(--accent);border-color:var(--accent)}
.store .co-check input:checked + .co-check__box svg{opacity:1}
.store .co-check input:focus-visible + .co-check__box{outline:2px solid var(--accent);outline-offset:2px}
.store .co-check:hover .co-check__box{border-color:var(--accent)}
.store .co-check__tx{line-height:1.45}
.co-check__hint{display:block;margin:4px 0 0 29px}