/* LOOLA — кошик, оформлення, кабінет §21.
   Джерело: theme/demo/cart-account.html (збирається з wp/setup/proto/shop-extra.css).
   Правки вносити в прототип і переносити сюди, а не навпаки. */

/* §21 · КОШИК, ОФОРМЛЕННЯ, КАБІНЕТ
   Стилі поверх бази з header-footer.html. Токени, кнопки, типографіка
   й підвал звідти ж — тут тільки те, чого в базі немає. */

.wrap{ width:100%; max-width:var(--container); margin:0 auto; padding-inline:var(--pad-page) }
.crumbs{ padding:var(--s-3) 0; font-size:13px; color:var(--muted) }
.crumbs a{ color:var(--muted) } .crumbs a:hover{ color:var(--ink) }
.crumbs span{ padding:0 var(--s-2) }

.screen{ padding-bottom:var(--s-9) }
.screen + .screen{ margin-top:var(--s-9); padding-top:var(--s-8);
  border-top:var(--hairline) solid var(--line) }
.screen-h{ margin-bottom:var(--s-6) }
.screen-h .count{ margin-top:var(--s-2); color:var(--muted); font-size:14px }

/* ── Дві колонки: список ліворуч, підсумок праворуч ───────────
   Та сама пропорція, що на сторінці товара (7/5): око вже знає
   цей ритм, і кошик не читається як інша сторінка.            */
.co-grid{ display:grid; grid-template-columns:7fr 5fr; gap:var(--s-7); align-items:start }

/* ── Рядок кошика ─────────────────────────────────────────────
   Кадр 2:3, як усюди. Ширина 96px: менше — товар не впізнати,
   більше — рядок перестає бути рядком і стає карткою.         */
.cart-list{ display:grid }
.cart-row{ display:grid; grid-template-columns:96px minmax(0,1fr) auto auto;
  gap:var(--s-4); align-items:start;
  padding:var(--s-5) 0; border-bottom:var(--hairline) solid var(--line) }
.cart-row:first-child{ padding-top:0 }
.cart-shot{ display:block; width:96px; aspect-ratio:2/3; background:var(--wash);
  overflow:hidden; border-radius:var(--r-xs) }
.cart-shot img{ width:100%; height:100%; object-fit:cover }
.cart-name{ display:block; font-size:15px; color:var(--ink) }
.cart-name:hover{ text-decoration:underline; text-underline-offset:4px }
.cart-sub{ margin-top:var(--s-1); font-size:14px; color:var(--muted) }
.cart-attr{ margin-top:var(--s-3); font-size:14px; color:var(--soft) }
.cart-price{ font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums;
  text-align:right; white-space:nowrap }
/* «Видалити» — текст, а не хрестик: хрестик у рядку читається як
   «закрити», а тут дія незворотна й має називатися словом (§7). */
.cart-drop{ margin-top:var(--s-3); padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--font-body); font-size:13px; color:var(--muted);
  text-decoration:underline; text-underline-offset:4px }
.cart-drop:hover{ color:var(--ink) }

/* ── Кількість ────────────────────────────────────────────── */
.qty{ display:inline-flex; align-items:center;
  border:var(--hairline) solid var(--line-strong); border-radius:var(--r-sm) }
.qty button{ width:40px; height:44px; padding:0; border:0; background:none; cursor:pointer;
  color:var(--soft); font-size:16px; line-height:1;
  transition:color var(--t-color) var(--ease-soft) }
.qty button:hover{ color:var(--ink) }
.qty button:disabled{ color:var(--line); cursor:not-allowed }
.qty output{ min-width:28px; text-align:center; font-size:15px; color:var(--ink);
  font-variant-numeric:tabular-nums }
/* У темі всередині крокувальника живе справжнє поле форми: без скрипта
   кількість теж має відправлятися. Системні стрілки прибираємо — вони
   дрібні, і на телефоні в них не влучити; замість них дві кнопки 44px. */
.qty .qty-field{ width:44px; height:44px; padding:0; text-align:center;
  border:0; background:none; appearance:textfield;
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  font-variant-numeric:tabular-nums }
.qty .qty-field::-webkit-outer-spin-button,
.qty .qty-field::-webkit-inner-spin-button{ appearance:none; margin:0 }
.qty .qty-field:focus{ outline:none }
.qty:focus-within{ border-color:var(--ink) }
.qty-one{ font-size:14px; color:var(--muted); white-space:nowrap }
/* Кнопка перерахунку — тільки для тих, у кого не працює скрипт */
.cart-apply{ margin-top:var(--s-5) }

/* ── Підсумок ─────────────────────────────────────────────────
   Липне, поки список довгий: сума й кнопка мають бути на екрані
   в будь-якій точці прокрутки.                                 */
.summary{ position:sticky; top:calc(var(--hd-h) + var(--s-5));
  padding:var(--s-6); background:var(--wash); border-radius:var(--r-xs) }
.summary h2{ margin-bottom:var(--s-5) }
.sum-rows{ display:grid; gap:var(--s-3) }
.sum-rows > div{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4) }
.sum-rows dt{ font-size:14px; color:var(--soft) }
.sum-rows dd{ font-size:14px; color:var(--body); text-align:right;
  font-variant-numeric:tabular-nums }
.sum-total{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4);
  margin-top:var(--s-5); padding-top:var(--s-4);
  border-top:var(--hairline) solid var(--line-strong) }
.sum-total span{ font-family:var(--font-display); font-weight:500; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--soft) }
.sum-total b{ font-weight:500; font-size:20px; color:var(--ink);
  font-variant-numeric:tabular-nums }
/* Тільки прямий нащадок: інакше правило ловить і кнопку промокоду,
   і вона з'їжджає на 24px нижче за своє поле. */
.summary > .btn{ margin-top:var(--s-5) }

/* Прогрес до безкоштовної доставки. Обіцянка та сама, що в смузі
   над шапкою, — 2 500 ₴; два різних числа тут були б обманом. */
.ship{ margin-top:var(--s-5); padding-top:var(--s-5);
  border-top:var(--hairline) solid var(--line) }
.ship p{ font-size:13px; color:var(--soft) }
.ship b{ font-weight:500; color:var(--ink) }
.ship .bar{ margin-top:var(--s-3); height:1px; background:var(--line); position:relative }
.ship .bar i{ position:absolute; inset:0 auto 0 0; background:var(--ink) }
.ship.done p{ color:var(--ink) }

/* Промокод складений: постійно відкрите порожнє поле відправляє
   людину шукати код деінде — і вона не повертається. */
.promo{ margin-top:var(--s-4) }
.promo summary{ list-style:none; cursor:pointer; font-size:13px; color:var(--muted);
  text-decoration:underline; text-underline-offset:4px }
.promo summary::-webkit-details-marker{ display:none }
.promo summary:hover{ color:var(--ink) }
.promo-row{ display:flex; gap:var(--s-2); margin-top:var(--s-3) }
/* width обов'язковий: без нього поле тягне за собою природну ширину
   в 20 символів, і саме вона задає мінімум усього підсумку. Нижче
   ~1300px підсумок забирав різницю в лівої колонки, і назва товару
   в рядку кошика стискалась до 33px. Видима ширина не міняється:
   flex-grow однаково розтягує поле на весь вільний простір. */
.promo-row input{ flex:1 1 auto; min-width:0; width:96px; height:44px; padding:0 var(--s-3);
  font-family:var(--font-body); font-size:14px; color:var(--ink); background:var(--surface);
  border:var(--hairline) solid var(--line-strong); border-radius:var(--r-sm) }
.promo-row input:focus{ outline:none; border-color:var(--ink) }

.sum-pay{ display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center;
  margin-top:var(--s-5); padding-top:var(--s-5); border-top:var(--hairline) solid var(--line) }
.sum-pay img{ display:block; height:24px; width:auto }

/* ── Порожній кошик ───────────────────────────────────────────
   Не тупик: звідси є два виходи — каталог і обране.           */
.empty{ display:grid; justify-items:start; gap:var(--s-5);
  padding:var(--s-8) 0; border-top:var(--hairline) solid var(--line) }
.empty p{ font-size:17px; line-height:1.7; color:var(--soft); max-width:48ch }
.empty-links{ display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center }
/* Уточнення під головною фразою: оплата карткою, що ще не підтвердилась */
.empty p.empty-note{ margin-top:calc(-1 * var(--s-3)); font-size:14px; line-height:1.6; color:var(--muted) }
/* Повторна оплата: сума й номер над вибором способу */
.pay-lead{ margin:0 0 var(--s-5); font-size:15px; line-height:1.6; color:var(--soft) }

/* ── Оформлення ───────────────────────────────────────────── */
.co-steps{ display:grid; gap:var(--s-8) }
.co-step h2{ display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-5) }
/* Номер кроку — цифра в рамці, а не заливка: суцільна заливка
   в системі одна, і це кнопка покупки (§1, закон 1). */
.co-n{ flex:0 0 28px; width:28px; height:28px; display:grid; place-items:center;
  border:var(--hairline) solid var(--line-strong); border-radius:var(--r-pill);
  font-family:var(--font-body); font-weight:500; font-size:13px; color:var(--soft) }
.fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4) }
.field{ display:grid; gap:var(--s-2) }
.field.wide{ grid-column:1 / -1 }
.field > span{ font-family:var(--font-display); font-weight:500; font-size:11px;
  line-height:1.5; letter-spacing:.18em; text-transform:uppercase; color:var(--soft) }
.field input, .field select, .field textarea{ height:48px; padding:0 var(--s-3);
  font-family:var(--font-body); font-size:15px; color:var(--ink); background:var(--surface);
  border:var(--hairline) solid var(--line-strong); border-radius:var(--r-sm) }
.field textarea{ height:auto; min-height:96px; padding:var(--s-3) }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--ink) }
.field .hint{ font-size:13px; color:var(--muted) }

/* Спосіб доставки й оплати — рядки з радіо, а не випадайка:
   варіантів мало, і ціна кожного має бути видно одразу. */
.choices{ display:grid; gap:var(--s-2) }
/* Вибір перевізника й поля адреси — різні групи одного кроку:
   впритул «Місто» читається як продовження списку способів. */
.choices + .fields{ margin-top:var(--s-6) }
.choice{ display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:var(--s-3);
  align-items:center; min-height:56px; padding:var(--s-3) var(--s-4);
  border:var(--hairline) solid var(--line); border-radius:var(--r-sm); cursor:pointer;
  transition:border-color var(--t-fast) var(--ease) }
.choice:hover{ border-color:var(--line-strong) }
.choice:has(input:checked){ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink) }
.choice input{ position:absolute; width:1px; height:1px; opacity:0; margin:0 }
/* Кружок вирівнюється рядком, а не відступом: 2px не лягають у шкалу §11 */
.choice .mark{ width:18px; height:18px; border-radius:var(--r-pill);
  border:var(--hairline) solid var(--line-strong); background:var(--surface);
  transition:border-color var(--t-fast) var(--ease) }
.choice:has(input:checked) .mark{ border-color:var(--ink); border-width:5px }
.choice .name{ font-size:15px; color:var(--body) }
.choice:has(input:checked) .name{ color:var(--ink) }
/* Строк — другим рядком під назвою: у рядок із назвою він читався як її частина */
.choice .note{ display:block; margin-top:var(--s-1); font-size:13px; color:var(--muted) }
.choice .cost{ font-size:14px; color:var(--soft); white-space:nowrap;
  font-variant-numeric:tabular-nums }

/* ── Прапорець «створити акаунт» ─────────────────────────────
   Та сама картка, що й вибір перевізника, але мітка квадратна:
   це не вибір з кількох, а «так» чи «ні». Галочку малюємо кутом
   рамки — це один елемент і жодного кольору хексом. */
.choice.is-check .mark{ position:relative; border-radius:var(--r-xs) }
.choice.is-check:has(input:checked) .mark{ border-width:var(--hairline);
  background:var(--ink) }
.choice.is-check:has(input:checked) .mark::after{ content:''; position:absolute;
  left:5px; top:2px; width:4px; height:8px; border:2px solid var(--canvas);
  border-top:0; border-left:0; transform:rotate(45deg) }
.choice.is-check .name{ line-height:1.5 }

.co-join{ margin-top:var(--s-6) }
/* Поля пароля відкриваються самим прапорцем, без скрипта: він тут
   лише перераховує підсумки. Без CSS :has() поля просто лишаться
   видимими — це не ламає оформлення. */
.co-join .co-account{ display:none }
.co-join:has(input:checked) .co-account{ display:grid; margin-top:var(--s-4) }

/* ── Місто й відділення з довідника Нової Пошти ──────────────
   Підказки — список під полем, а не випадайка на весь екран:
   людина друкує, і збіги мають бути видно поруч із набраним.
   Тінь — та сама --elevation, що в усіх оверлеях (§6).        */
.np-box{ position:relative; display:grid }
.np-list{ position:absolute; z-index:30; top:calc(100% + var(--s-1)); left:0; right:0;
  max-height:min(320px, 50vh); overflow-y:auto; overscroll-behavior:contain;
  margin:0; padding:var(--s-1) 0; list-style:none;
  background:var(--surface); border:var(--hairline) solid var(--line);
  border-radius:var(--r-sm); box-shadow:var(--elevation) }
.np-opt{ display:grid; align-content:center; min-height:44px; padding:var(--s-2) var(--s-3);
  cursor:pointer }
.np-opt[aria-selected="true"]{ background:var(--wash) }
.np-main{ font-size:15px; line-height:1.4; color:var(--ink) }
.np-sub{ font-size:13px; line-height:1.4; color:var(--muted) }
.np-note{ padding:var(--s-2) var(--s-3); font-size:13px; line-height:1.45; color:var(--muted) }
.np-hint:empty{ display:none }

/* ── Стислий список у підсумку оформлення ─────────────────── */
.mini{ display:grid; gap:var(--s-3); margin-bottom:var(--s-5);
  padding-bottom:var(--s-5); border-bottom:var(--hairline) solid var(--line) }
.mini li{ display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:var(--s-3);
  align-items:center }
.mini .shot{ width:48px; aspect-ratio:2/3; background:var(--surface); overflow:hidden;
  border-radius:var(--r-xs) }
.mini .shot img{ width:100%; height:100%; object-fit:cover }
.mini .nm{ font-size:14px; color:var(--body) }
.mini .sz{ font-size:13px; color:var(--muted) }
.mini .pr{ font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums }

/* ── Кабінет: вхід і реєстрація ───────────────────────────── */
.auth{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-7) }
.auth-card{ padding:var(--s-7); border:var(--hairline) solid var(--line); border-radius:var(--r-xs) }
.auth-card h2{ margin-bottom:var(--s-3) }
.auth-card > p{ margin-bottom:var(--s-5); font-size:14px; line-height:1.6; color:var(--soft) }
.auth-card .fields{ grid-template-columns:minmax(0,1fr) }
.auth-card .btn{ margin-top:var(--s-5) }
.auth-card .fine{ margin-top:var(--s-4); font-size:13px; color:var(--muted) }
.auth-card .fine a{ color:var(--soft); text-decoration:underline; text-underline-offset:3px }
/* Обіцянка та сама, що в смузі підвала: −10% за реєстрацію */
.auth-perk{ display:grid; gap:var(--s-2); margin-bottom:var(--s-5);
  padding:var(--s-4); background:var(--wash); border-radius:var(--r-xs) }
.auth-perk b{ font-family:var(--font-display); font-weight:500; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink) }
.auth-perk span{ font-size:14px; color:var(--soft) }

/* ── Кабінет: свій ──────────────────────────────────────────── */
.acc{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--s-7); align-items:start }
.acc-nav{ display:grid; gap:var(--s-1) }
.acc-nav a{ display:flex; align-items:center; min-height:44px; padding:0 var(--s-3);
  margin-inline:calc(-1 * var(--s-3)); border-radius:var(--r-sm);
  font-size:15px; color:var(--body);
  transition:background-color var(--t-color) var(--ease-soft), color var(--t-color) var(--ease-soft) }
.acc-nav a:hover{ background:var(--wash); color:var(--ink) }
.acc-nav a[aria-current]{ color:var(--ink) }
.acc-nav a[aria-current]::before{ content:''; width:12px; height:var(--hairline);
  margin-right:var(--s-3); background:var(--ink) }
.acc-nav a[aria-current]{ margin-left:calc(-1 * var(--s-3)) }
.acc-nav .out{ margin-top:var(--s-4); padding-top:var(--s-4);
  border-top:var(--hairline) solid var(--line); color:var(--muted) }

.orders{ display:grid; gap:var(--s-4) }
.order{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-4) var(--s-5);
  align-items:start; padding:var(--s-5); border:var(--hairline) solid var(--line);
  border-radius:var(--r-xs) }
.order-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-3) }
.order-no{ font-family:var(--font-display); font-weight:500; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink) }
.order-date{ font-size:13px; color:var(--muted) }
.order-items{ margin-top:var(--s-3); font-size:14px; color:var(--soft) }
.order-side{ display:grid; justify-items:end; gap:var(--s-2) }
.order-sum{ font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums }
/* Статус — плашка контуром. Заливкою в системі тільки кнопка покупки */
.status{ display:inline-flex; align-items:center; min-height:24px; padding:0 var(--s-2);
  font-family:var(--font-display); font-weight:500; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; border:var(--hairline) solid var(--line-strong);
  border-radius:var(--r-sm); color:var(--soft) }
.status.done{ border-color:var(--ink); color:var(--ink) }

.acc-empty{ padding:var(--s-7); border:var(--hairline) dashed var(--line-strong);
  border-radius:var(--r-xs); display:grid; justify-items:start; gap:var(--s-4) }
.acc-empty p{ font-size:15px; color:var(--soft) }

/* «Обране» живе не в WooCommerce, тому стоїть окремим рядком під
   розділами — але виглядає як один із них. */
.acc-nav-extra{ margin-top:var(--s-1) }
.acc-lead{ margin-top:var(--s-3); font-size:15px; line-height:1.6; color:var(--soft); max-width:52ch }
.acc-links{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6) }

/* ── Рівень клубу ────────────────────────────────────────────
   Знижка особиста, тому живе в кабінеті, а не на вітрині:
   у каталозі ціни лишаються публічними (inc/discounts.php).
   Відсоток — єдина пляма кольору, закон 2: червоне лише вигода. */
.acc-club{ margin-top:var(--s-6); padding:var(--s-5) var(--s-5) var(--s-4);
  border:var(--hairline) solid var(--line); border-radius:var(--r-sm) }
.acc-club-now{ display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--s-2) var(--s-3) }
.acc-club-now .t-label{ flex:1 0 100%; color:var(--muted) }
.acc-club-now b{ font-family:var(--font-display); font-weight:500; font-size:15px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink) }
.acc-club-off{ font-family:var(--font-display); font-weight:300; font-size:22px;
  line-height:1; letter-spacing:.02em; color:var(--price-sale) }
.acc-club p{ margin-top:var(--s-3); font-size:14px; line-height:1.6; color:var(--soft) }
.acc-club-more{ display:inline-block; margin-top:var(--s-3); font-size:14px; color:var(--soft) }
.acc-club-more:hover{ color:var(--ink) }
.acc-club-more .arw{ margin-left:var(--s-1) }
/* Прапорець «запамʼятати мене» — рядком, а не блоком */
.acc-remember{ display:inline-flex; align-items:center; gap:var(--s-2); cursor:pointer }

/* ── Замовлення прийнято ──────────────────────────────────────
   Головне тут — номер і те, що буде далі. Склад замовлення
   праворуч тим самим блоком, що на оформленні.               */
.thanks-rows{ margin-top:var(--s-6) }
.thanks-rows dd b{ font-weight:500; color:var(--ink) }
.thanks-next{ margin-top:var(--s-8); padding-top:var(--s-6);
  border-top:var(--hairline) solid var(--line) }
.thanks-next h2{ margin-bottom:var(--s-5) }
/* Нумерація своя: крапка після цифри в цій гарнітурі читається як кома */
.thanks-steps{ display:grid; gap:var(--s-4); counter-reset:step }
.thanks-steps li{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:var(--s-3);
  align-items:start; font-size:15px; line-height:1.6; color:var(--soft) }
.thanks-steps li::before{ counter-increment:step; content:counter(step);
  width:28px; height:28px; display:grid; place-items:center;
  border:var(--hairline) solid var(--line-strong); border-radius:var(--r-pill);
  font-family:var(--font-body); font-weight:500; font-size:13px; color:var(--soft) }
.thanks-note{ margin-top:var(--s-5); font-size:13px; color:var(--muted) }
/* Переказ на рахунок ФОП: єдине, що людині ще треба зробити, тому
   блок виділено тлом — не заливкою кнопки (§1), а тим самим --wash,
   що під кадрами й під наведенням у кабінеті. */
.thanks-pay{ margin-top:var(--s-6); padding:var(--s-5); background:var(--wash) }
.thanks-pay p{ font-size:15px; line-height:1.6; color:var(--body) }
/* Реквізити переносяться рядок у рядок, як їх записали в налаштуванні */
.thanks-pay .req{ margin-top:var(--s-4); color:var(--ink); white-space:pre-line;
  font-variant-numeric:tabular-nums }
.thanks-pay .thanks-note{ margin-top:var(--s-4) }
.thanks-links{ margin-top:var(--s-7) }

/* ── Адаптив ──────────────────────────────────────────────── */
@media (max-width:1023px){
  .co-grid{ grid-template-columns:minmax(0,1fr); gap:var(--s-6) }
  .summary{ position:static }
  .acc{ grid-template-columns:minmax(0,1fr); gap:var(--s-6) }
  .acc-nav{ grid-auto-flow:column; justify-content:start; gap:var(--s-2); overflow-x:auto }
  .acc-nav a{ white-space:nowrap }
  .acc-nav .out{ margin:0; padding:0; border:0 }
}
@media (max-width:739px){
  .auth{ grid-template-columns:minmax(0,1fr); gap:var(--s-5) }
  .auth-card{ padding:var(--s-5) }
  .fields{ grid-template-columns:minmax(0,1fr) }
  /* Рядок кошика на телефоні: кадр і назва в один ряд, кількість
     і ціна — під ними, інакше все чотири колонки не влазять. */
  .cart-row{ grid-template-columns:72px minmax(0,1fr); gap:var(--s-3) }
  .cart-shot{ width:72px }
  .cart-row .qty{ grid-column:2 }
  .cart-row .cart-price{ grid-column:2; text-align:left }
  .order{ grid-template-columns:minmax(0,1fr) }
  .order-side{ justify-items:start }
}


/* ============================================================
   РОЗМІТКА WOOCOMMERCE
   Цього блоку в прототипі немає й бути не може: поля, кнопку
   оформлення й повідомлення малює ядро своєю розміткою, і
   переписати її не можна — тільки одягнути. Значення тут ті
   самі, що в прототипі, просто прив'язані до чужих класів.
   ============================================================ */

/* ── Відступ до підвалу ───────────────────────────────────────
   У прототипі його дає .screen, якого в темі немає: там п'ять
   екранів на одній сторінці, тут — один. Значення те саме, що
   під пагінацією каталогу: впритул читається як обрив сторінки,
   а 128px повітря — це порожній екран на телефоні.            */
main.wrap{ padding-bottom:var(--s-8) }

/* ── Поля ─────────────────────────────────────────────────── */
.fields .form-row{ display:grid; gap:var(--s-2); margin:0; padding:0 }
.fields .form-row-wide,
.fields .form-row.notes{ grid-column:1 / -1 }
/* Прихована країна: магазин відправляє тільки по Україні */
.form-row.hidden-field,
#billing_country_field{ display:none }

.fields label{ font-family:var(--font-display); font-weight:500; font-size:11px;
  line-height:1.5; letter-spacing:.18em; text-transform:uppercase; color:var(--soft) }
/* Зірочку обов'язковості не фарбуємо в червоне: червоний у системі
   означає вигоду покупця (§1), а не «заповни поле». */
.fields label .required{ color:var(--muted); text-decoration:none }
.fields label .optional{ color:var(--muted); text-transform:none; letter-spacing:normal }

.fields .woocommerce-input-wrapper{ display:block }
.fields input[type="text"],
.fields input[type="tel"],
.fields input[type="email"],
.fields input[type="password"],
.fields input[type="number"],
.fields select,
.fields textarea{ width:100%; height:48px; padding:0 var(--s-3);
  font-family:var(--font-body); font-size:15px; line-height:1.5; color:var(--ink);
  background:var(--surface); border:var(--hairline) solid var(--line-strong);
  border-radius:var(--r-sm); appearance:none;
  transition:border-color var(--t-fast) var(--ease) }
.fields textarea{ height:auto; min-height:96px; padding:var(--s-3) }
.fields input:focus, .fields select:focus, .fields textarea:focus{
  outline:none; border-color:var(--ink) }
.fields input::placeholder, .fields textarea::placeholder{ color:var(--muted) }

.fields .description{ font-size:13px; line-height:1.45; color:var(--muted) }
/* Помилка поля — рамкою, а не заливкою */
.fields .woocommerce-invalid input,
.fields .woocommerce-invalid select{ border-color:var(--danger) }
/* Текст помилки ядро ставить під полем, у той самий рядок форми */
.fields .checkout-inline-error-message{ margin:0; font-size:13px; line-height:1.45; color:var(--danger) }

/* display:grid у .form-row перебиває браузерне [hidden] — повертаємо.
   Так ховаються поля, не потрібні обраному способу доставки. */
.fields .form-row[hidden]{ display:none }
/* Відділення до вибору міста — поле є, але чекає */
.fields input:disabled{ background:var(--wash); border-color:var(--line); color:var(--muted);
  cursor:not-allowed }
.fields input:disabled::placeholder{ color:var(--muted) }

/* ── Способи оплати ───────────────────────────────────────── */
.wc_payment_methods{ display:grid; gap:var(--s-2); margin:0; padding:0; list-style:none }
.wc_payment_methods > li{ display:grid }
/* Опис способу оплати ядро віддає окремим блоком під рядком */
.wc_payment_methods .payment_box{ margin:var(--s-2) 0 0; padding:var(--s-3) var(--s-4);
  font-size:13px; line-height:1.6; color:var(--soft);
  background:var(--wash); border-radius:var(--r-sm) }
.wc_payment_methods .payment_box p{ margin:0 }

/* ── Згода й кнопка підтвердження ─────────────────────────── */
.woocommerce-terms-and-conditions-wrapper{ margin-top:var(--s-5); font-size:13px; color:var(--muted) }
.woocommerce-terms-and-conditions-wrapper a{ color:var(--soft);
  text-decoration:underline; text-underline-offset:3px }
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox{
  display:flex; align-items:flex-start; gap:var(--s-2); cursor:pointer }

.form-row.place-order{ margin-top:var(--s-6) }
#place_order{ position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; height:54px; padding:0 var(--s-6);
  font-family:var(--font-display); font-weight:500; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-accent); background:var(--accent);
  border:var(--hairline) solid transparent; border-radius:var(--r-sm); cursor:pointer;
  transition:background var(--t-hover) var(--ease-soft) }
#place_order:hover{ background:var(--accent-hover) }
#place_order:disabled{ opacity:.5; cursor:not-allowed }

/* ── Повідомлення ─────────────────────────────────────────────
   Смуга з хайрлайном ліворуч, без заливки й іконок: заливка в
   системі одна, і це кнопка покупки.                          */
.woocommerce-notices-wrapper:not(:empty){ margin-bottom:var(--s-6) }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{ display:grid; gap:var(--s-2); margin:0 0 var(--s-3);
  padding:var(--s-4) var(--s-5); list-style:none;
  font-size:14px; line-height:1.6; color:var(--body);
  background:var(--wash); border-left:2px solid var(--line-strong); border-radius:var(--r-sm) }
.woocommerce-error{ border-left-color:var(--danger) }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a{
  color:var(--ink); text-decoration:underline; text-underline-offset:3px }
/* Кнопку всередині повідомлення ядро малює посиланням .button */
.woocommerce-message .button,
.woocommerce-info .button{ justify-self:start; margin-top:var(--s-2);
  display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s-6);
  font-family:var(--font-display); font-weight:500; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  border:var(--hairline) solid var(--ink); border-radius:var(--r-sm);
  transition:background var(--t-hover) var(--ease-soft), color var(--t-hover) var(--ease-soft) }
.woocommerce-message .button:hover,
.woocommerce-info .button:hover{ background:var(--ink); color:var(--canvas) }

/* ── Кабінет: форми адрес і даних ─────────────────────────── */
.acc-body form .form-row{ display:grid; gap:var(--s-2); margin:0 0 var(--s-4) }
.acc-body form label{ font-family:var(--font-display); font-weight:500; font-size:11px;
  line-height:1.5; letter-spacing:.18em; text-transform:uppercase; color:var(--soft) }
.acc-body form input[type="text"],
.acc-body form input[type="tel"],
.acc-body form input[type="email"],
.acc-body form input[type="password"],
.acc-body form select{ width:100%; height:48px; padding:0 var(--s-3);
  font-family:var(--font-body); font-size:15px; color:var(--ink); background:var(--surface);
  border:var(--hairline) solid var(--line-strong); border-radius:var(--r-sm); appearance:none }
.acc-body form input:focus, .acc-body form select:focus{ outline:none; border-color:var(--ink) }
.acc-body form .button,
.acc-body button[type="submit"]{ display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 var(--s-6); margin-top:var(--s-3);
  font-family:var(--font-display); font-weight:500; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-accent); background:var(--accent);
  border:var(--hairline) solid transparent; border-radius:var(--r-sm); cursor:pointer;
  text-decoration:none; transition:background var(--t-hover) var(--ease-soft) }
.acc-body form .button:hover,
.acc-body button[type="submit"]:hover{ background:var(--accent-hover) }
.acc-body h2, .acc-body h3{ font-family:var(--font-display); font-weight:500; font-size:16px;
  line-height:1.5; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  margin:var(--s-7) 0 var(--s-4) }
.acc-body > h2:first-child, .acc-body > h3:first-child{ margin-top:0 }
.acc-body address{ font-style:normal; font-size:15px; line-height:1.7; color:var(--soft) }
.acc-body fieldset{ margin:var(--s-7) 0 0; padding:var(--s-5) 0 0; border:0;
  border-top:var(--hairline) solid var(--line) }
.acc-body legend{ padding:0; font-family:var(--font-display); font-weight:500; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--soft) }
.woocommerce-Addresses{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-6) }
@media (max-width:739px){ .woocommerce-Addresses{ grid-template-columns:minmax(0,1fr) } }


/* ── Показати пароль ──────────────────────────────────────────
   Ядро малює цю кнопку картинкою зі свого CSS, який ми вимкнули,
   і без неї лишається шість пікселів порожнечі. Малюємо своє око
   маскою — тим самим прийомом, що й решта іконок.             */
.acc-body .password-input,
.fields .password-input{ position:relative; display:block }
.acc-body .password-input input,
.fields .password-input input{ padding-right:44px }
.show-password-input{ position:absolute; top:50%; right:0; transform:translateY(-50%);
  width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer;
  color:var(--muted); transition:color var(--t-color) var(--ease-soft) }
.show-password-input::after{ content:''; display:block; width:20px; height:20px; margin:0 auto;
  background-color:currentcolor;
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2%2012s3.6-6%2010-6%2010%206%2010%206-3.6%206-10%206-10-6-10-6Z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E");
  mask-repeat:no-repeat; mask-position:center center; mask-size:20px 20px }
.show-password-input:hover{ color:var(--ink) }
.show-password-input.display-password{ color:var(--ink) }