/* ============================================================
   Nuelle&Nue — woo.css
   Тонкий шар під розмітку, яку сам генерує WooCommerce і яку не бачив
   прототип: нотиси форм, чекаут (лишений на стандартному шаблоні Woo —
   логіка чекаута критична, тому шаблон не перекривався, тільки стилі),
   дрібні елементи, додані вже в темі (subscribe__msg, popup картки).

   Токени й основні компоненти (.btn, .card, .grid, .drawer, .pdp, .acc…) —
   в assets/css/main.css, спільному з прототипом. Тут — тільки різниця.
   ============================================================ */

/* ---------- Тост для cart.js (помилка додавання в кошик) ---------- */
[data-nn-toast] {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 400;
  max-width: min(90vw, 420px);
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
[data-nn-toast].is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Кнопки-тригери кошика під час AJAX-запиту ---------- */
.size-chip.is-loading,
[data-pdp-add].is-loading,
.combo__row.is-loading { opacity: 0.6; pointer-events: none; }

/* ---------- Нотиси Woo (валідація форм, помилки чекаута) ----------
   Стандартні стилі Woo вимкнені (woocommerce_enqueue_styles → []),
   тож без цього блоку список нотисів був би невпорядкованим <ul>.
   Один нейтральний вигляд для error/message/info — щоб не заводити
   акцентний колір лише під один тип повідомлень (DESIGN.md). */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-notices-wrapper ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--ink);
  font-size: 14px;
  background: var(--paper-tint);
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li { margin: 0; }
.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Форма підписки: повідомлення після AJAX ---------- */
.subscribe__msg {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}
.subscribe__msg.is-error { color: var(--ink); font-weight: 500; }

/* ---------- Попап «оплата карткою тимчасово недоступна» (LAUNCH.md) ----------
   Не окремий модальний компонент — рядок під списком способів оплати,
   з'являється/ховається через .is-shown, без кольору-індикатора. */
.nn-card-notice {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper-tint);
  font-size: 13px;
  color: var(--ink);
}
.nn-card-notice.is-shown { display: block; }


/* ============================================================
   Чекаут

   Розмітку тепер дає тема (woocommerce/checkout/*.php) — та сама, що в
   design/checkout.html, тож картки кроків, способів і підсумку вже описані
   в main.css (.fieldset, .opt, .summary, .promo, .trust). Тут лишається
   рівно те, чого макет не знав: поля, які Woo та плагін Нової пошти
   малюють своєю розміткою (p.form-row, select2), і дрібні перебивання
   вбудованих стилів Woo.
   ============================================================ */

.woocommerce-checkout form.checkout { align-items: start; }

/* ---------- Поля Woo всередині наших .fields ----------

   Однакові в чекауті, кабінеті й формі входу: усе це форми Woo зі
   своєю розміткою p.form-row, і різні на вигляд поля в них читались
   би як різні частини різних сайтів. ---------- */

:is(.checkout, .account, .auth) .fields { display: grid; gap: 18px 24px; }
@media (min-width: 620px) { .checkout .fields { grid-template-columns: 1fr 1fr; } }

:is(.checkout, .account, .auth) .form-row { margin: 0; min-width: 0; }
:is(.checkout, .account, .auth) .form-row-wide,
:is(.checkout, .account, .auth) .form-row.notes,
:is(.checkout, .account, .auth) .field--full { grid-column: 1 / -1; }

:is(.checkout, .account, .auth) .form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
:is(.checkout, .account, .auth) .form-row label .required { text-decoration: none; }
:is(.checkout, .account, .auth) .form-row .optional { display: none; } /* «(необовʼязково)» шумить у рядку міток */

:is(.checkout, .account, .auth) .input-text,
:is(.checkout, .account, .auth) select,
:is(.checkout, .account, .auth) textarea,
:is(.checkout, .account, .auth) .select2-selection {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.3s var(--ease);
}
:is(.checkout, .account, .auth) .input-text:focus,
:is(.checkout, .account, .auth) select:focus,
:is(.checkout, .account, .auth) textarea:focus { outline: none; border-color: var(--ink); }
:is(.checkout, .account, .auth) textarea { min-height: 72px; resize: vertical; }

/* Поля Нової пошти приходять від плагіна зі своєю розміткою й select2.
   Плагін тримає окремий контейнер під кожен метод (відділення / поштомат)
   і показує потрібний, тому сітку задаємо контейнеру, а не обгортці:
   інакше в дві колонки лягають самі контейнери, а поля лишаються в стовпчик.
   Службові поля (ref, label, area, number) плагін заповнює сам — ховаємо. */
.nn-ship-fields { padding-top: 22px; }
.mrkv_ua_shipping_checkout_fields > div[id$="-shipping-info"] { display: grid; gap: 18px 24px; }
@media (min-width: 620px) { .mrkv_ua_shipping_checkout_fields > div[id$="-shipping-info"] { grid-template-columns: 1fr 1fr; } }
.mrkv_ua_shipping_checkout_fields p.form-row:has(.input-hidden) { display: none; }
/* select2 приходить зі своєю рамкою й фіксованою висотою, вищою за
   контейнер — сусідня мітка через це налазила. Складаємо його до
   тієї самої лінії, що й решта полів. Селектор повний: коротший
   програє власним стилям select2, які вантажаться пізніше. */
.checkout .select2-container { display: block; width: 100% !important; }
.checkout .select2-container--default .select2-selection--single {
  height: auto;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.checkout .select2-container--default.select2-container--open .select2-selection--single { border-bottom-color: var(--ink); }
.checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.4; font-size: 15px; color: var(--ink); }
.checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 0; }

/* ---------- Способи доставки й оплати ----------

   Woo вважає, що список оплати — це <ul><li><label>, і робить label
   рядковим. У нас це картки .opt із власною сіткою, тож перебиваємо. */

.woocommerce-checkout .wc_payment_methods { list-style: none; margin: 0; padding: 0; }
.woocommerce-checkout .wc_payment_methods label.opt { display: grid; margin: 0; }
.checkout .payment_box { grid-column: 1 / -1; margin: 8px 0 0; padding: 0; background: none; font-size: 13px; color: var(--ink-soft); }
.checkout .payment_box p { margin: 0; }

/* Єдиний спосіб доставки не вимагає вибору — картку лишаємо як довідку. */
.nn-ship .opt:has(input[hidden]) { cursor: default; }
.nn-ship__none { font-size: 14px; color: var(--ink-soft); }

/* ---------- Підсумок ---------- */

.woocommerce-checkout #order_review { min-width: 0; }
.woocommerce-checkout-review-order-table { display: block; width: 100%; }

.nn-submit { margin-top: 18px; }
.woocommerce-terms-and-conditions-wrapper { margin: 0 0 14px; }

/* Кнопка вже має клас .btn — тут лишається тільки те, чого немає в
   ньому: скидання дефолтів <button>.

   isolation потрібна через те, що Woo перемальовує підпис кнопки
   через .text() при зміні способу оплати й зриває з неї <span>,
   на якому в .btn тримається z-index. Без власного контексту
   заливка з ::before лягала поверх тексту, і на ховері він зникав. */
#place_order {
  width: 100%;
  border-radius: 0;
  font-family: inherit;
  cursor: pointer;
  isolation: isolate;
}
#place_order::before { z-index: -1; }
#place_order:disabled { opacity: 0.4; cursor: not-allowed; }

/* Помилки Woo (порожнє обовʼязкове поле) — своїм голосом, не дефолтним. */
.woocommerce-NoticeGroup { grid-column: 1 / -1; }
.woocommerce-error {
  margin: 0 0 24px;
  padding: 14px 18px;
  list-style: none;
  border: 1px solid var(--ink);
  font-size: 14px;
}
.woocommerce-error li + li { margin-top: 6px; }

/* ---------- Сторінка «Дякуємо» (order-received) використовує ті самі
   класи .thanks*, що й прототип (woocommerce/checkout/thankyou.php). ---------- */

/* Блок подяки живе всередині .container сторінки, а не як окремий <main>,
   тому правило main.css `.thanks > .container > p` до нього не дістає. */
.thanks > p { max-width: 46ch; margin: 0 auto; color: var(--ink-soft); }

/* Перелік мірок за розмірами в акордеоні «Як підібрати розмір». */
.acc__panel .spec-list { margin: 0 0 12px; padding: 0; list-style: none; }
.acc__panel .spec-list li {
  font-size: 14px;
  color: var(--ink-soft);
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.acc__panel .spec-list li:last-child { border-bottom: 0; }

/* ============================================================
   Правки під розмітку WordPress (макет їх не потребував)
   ============================================================ */

/* WordPress проставляє <img width="200" height="250">, чого в прототипі не було.
   Там, де висота задана в CSS (`height: 100%`), правило переважає атрибут і все
   гаразд. А там, де пропорції тримає лише `aspect-ratio`, браузер бере висоту
   з атрибута — і замість 74×92 виходить 74×250: прев'ю витягується в стовпчик.
   `height: auto` повертає керування властивості aspect-ratio. */
.line-item img,
.combo__row img,
.summary__item img,
.hero__card img { height: auto; }

/* Панель кошика — грід на три рядки (шапка / список / підсумок), і саме він
   притискає підсумок донизу. Але вміст панелі ми підміняємо одним AJAX-фрагментом,
   і його обгортка стала зайвим рівнем: грід бачив два елементи замість трьох,
   тож підсумок висів одразу під останнім товаром. `display: contents` робить
   обгортку прозорою — її діти знову стають рядками того самого гріда. */
[data-cart-fragment] { display: contents; }

/* Під останньою позицією роздільник зайвий: одразу за ним іде підсумок
   із власною верхньою лінією, і разом виходить подвійна риска. */
.drawer__body .line-item:last-child { border-bottom: 0; }

/* ============================================================
   Галерея товару під реальний формат фото постачальника
   ============================================================ */

/* Фото приходять вертикальні 3:4, а плитки в макеті були 4:5 — кадр обрізався
   згори й знизу, і в попапі одразу видно, що показано лише його частину.
   Пропорція плитки тепер збігається з форматом кадру, тож видно все фото.
   Четверта плитка на десктопі лишається широкою — це навмисний акцент-зріз,
   а не спроба показати кадр цілком. */
.pdp__gallery > figure { aspect-ratio: 3 / 4; }

@media (max-width: 979px) {
  /* На телефоні кадр один на екран — тут цілісність важлива найбільше. */
  .pdp__gallery > figure,
  .pdp__gallery > figure.is-lead--last { aspect-ratio: 3 / 4; }
}

/* ---------- Лайтбокс: кадр має вміщатися в екран ----------
   Обмеження висоти на зображенні не спрацьовувало, і кадр 1920×2560
   розгортався до 1448×1931 при 781 доступних — тобто видно було лише
   його середину. Причин було дві, і потрібні обидві правки:

   1. Сцена стоїть у рядку сітки лайтбокса. У такого елемента типове
      min-height: auto, тому він розтягується під вміст.
   2. Сама сцена теж була сіткою (grid + place-items), а її рядок має
      розмір auto — тобто підлаштовується під фото. Виходила петля:
      висота сцени залежить від фото, а обмеження фото — від сцени,
      тож браузер це обмеження просто ігнорував.

   min-height: 0 розриває першу петлю, flex замість сітки — другу:
   у flex-контейнера з відомою висотою відсоток рахується від неї. */
.lb__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}
.lb__stage img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ---------- Плитки категорій ----------
   У макеті було жорстко шість колонок під шість плиток. Але порожні категорії
   не показуються (у них нічого купити), і щойно одна зникала — у ряду лишалась
   порожня клітинка. Кількість колонок тепер задає сам блок через --cats. */
@media (min-width: 1180px) {
  .cats { grid-template-columns: repeat(var(--cats, 6), minmax(0, 1fr)); }
}

/* ---------- Промокод і попап оплати ---------- */

.nn-coupon-notice { margin: 10px 0 0; font-size: 13px; }
.nn-coupon-notice ul { margin: 0; padding: 0; list-style: none; }
.nn-coupon-notice .woocommerce-error { margin: 0; padding: 10px 12px; border-color: var(--line); }
.nn-coupon-notice .woocommerce-message { margin: 0; padding: 10px 12px; border: 1px solid var(--line); }

/* Попап «картка поки не працює» користується панеллю розмірної таблиці —
   та сама поведінка, той самий вигляд, нічого нового вчити не треба. */
.nn-pay-modal .modal__panel { max-width: 460px; }
.nn-pay-modal .btn { margin-top: 8px; }

/* ---------- Вибір відділення Нової пошти (assets/js/np-picker.js) ---------- */

.np-pick { position: relative; }
.np-pick__input {
  width: 100%;
  padding: 10px 24px 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.3s var(--ease);
}
.np-pick__input:focus { outline: none; border-bottom-color: var(--ink); }
.np-pick__input::placeholder,
:is(.checkout, .account, .auth) .input-text::placeholder,
:is(.checkout, .account, .auth) textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.np-pick.is-disabled .np-pick__input { opacity: 0.45; cursor: not-allowed; }

/* Поки летить відповідь — тонка смужка замість спінера: пошук триває
   десяті секунди, і крутилка встигла б лише блимнути. */
.np-pick::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.np-pick.is-busy::after { transform: scaleX(1); }

.np-pick__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(20, 18, 16, 0.09);
}
.np-pick__opt {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.np-pick__opt + .np-pick__opt { border-top: 1px solid var(--line); }
.np-pick__opt:hover,
.np-pick__opt.is-active { background: var(--paper-tint); }
.np-pick__none { padding: 12px 14px; font-size: 13px; color: var(--ink-soft); }

/* Поля плагіна лишаються в DOM (їх читає Woo), але показуємо свої. */
.mrkv_ua_shipping_checkout_fields .select2-container { display: none !important; }

/* ---------- Крок «Коментар» ---------- */

/* Поле стояло всередині кроку «Оплата» й читалось як примітка до способу
   платежу. Тепер це власний крок, а підпис збоку одразу знімає питання,
   чи обовʼязково його заповнювати. */
.fieldset__opt {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.fieldset--soft .fieldset__head { border-bottom-color: transparent; padding-bottom: 8px; margin-bottom: 12px; }
.fieldset--soft .form-row label { display: none; } /* заголовок кроку вже все сказав */

.summary__note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ---------- Перший кадр чекауту ----------

   Сервер віддає обидва набори полів перевізника (на відділення й у поштомат)
   разом із чотирма нативними select, а ховає зайве вже JS. У проміжку між
   першим кадром і DOMContentLoaded це блимало сірими селектами й посувало
   сторінку вдвічі більшою висотою.

   Тому вміст блоку невидимий, поки віджет не скаже, що готовий, а місце під
   нього зарезервоване наперед — сторінка не стрибає. Якщо JS чомусь не
   виконався, поля покажуться самі через три секунди: краще незграбний
   нативний select, ніж чекаут без адреси доставки. */

.nn-ship-fields { min-height: 92px; }
@media (min-width: 620px) { .nn-ship-fields { min-height: 84px; } }

.mrkv_ua_shipping_checkout_fields {
  visibility: hidden;
  animation: nn-ship-fallback 0s linear 3s forwards;
}
.mrkv_ua_shipping_checkout_fields.nn-ready { visibility: visible; animation: none; }

@keyframes nn-ship-fallback { to { visibility: visible; } }

/* ---------- Перерахунок чекауту ----------

   Woo сам перераховує чекаут одразу після завантаження й на час запиту
   накриває блоки оплати й підсумку сірими плашками blockUI. Виглядало так,
   ніби поверх способів оплати на секунду вилазить чужий блок і зникає.

   Плашку лишаємо в DOM — вона перехоплює кліки, поки дані застарілі, — але
   робимо невидимою. Замість неї сам блок м'яко бліднішає: це читається як
   «перераховуємо», а не як збій верстки. */

.woocommerce-checkout .blockUI.blockOverlay { opacity: 0 !important; }
.woocommerce-checkout .blockUI.blockMsg { display: none !important; }

.woocommerce-checkout-payment,
.woocommerce-checkout-review-order-table,
.nn-ship { transition: opacity 0.25s var(--ease); }

.woocommerce-checkout-payment:has(> .blockUI.blockOverlay),
#order_review:has(> .blockUI.blockOverlay) > .woocommerce-checkout-review-order-table,
.nn-ship:has(> .blockUI.blockOverlay) { opacity: 0.55; }

/* ============================================================
   Особистий кабінет

   Розмітка своя (woocommerce/myaccount/*), тож тут описано все — від
   меню розділів до карток замовлень. Спираємось на ті самі блоки, що
   в чекауті: .fieldset для форм, .grid для карток товару.
   ============================================================ */

.account { padding-top: calc(var(--header-h) + clamp(20px, 4vh, 44px)); padding-bottom: clamp(50px, 9vh, 110px); }
.account__head { margin-bottom: clamp(24px, 4vh, 40px); }
.account__head .section-title { margin: 4px 0 0; }

/* ---------- Меню розділів ---------- */

.account__nav {
  display: flex;
  gap: 4px;
  margin-bottom: clamp(24px, 4vh, 38px);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.account__nav::-webkit-scrollbar { display: none; }

.account__link {
  position: relative;
  flex: 0 0 auto;
  padding: 10px 16px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.account__link:hover { color: var(--ink); }
.account__link.is-active { color: var(--ink); }
.account__link.is-active::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: -3px;
  height: 1px;
  background: var(--ink);
}
/* «Вийти» — не такий самий пункт, як решта: відсуваємо й приглушуємо. */
.account__link--out { margin-left: auto; opacity: 0.6; }

/* ---------- Плитки з числами ---------- */

.account__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: clamp(28px, 5vh, 44px); }
@media (min-width: 700px) { .account__cards { max-width: 460px; } }

.account-card {
  display: grid;
  gap: 2px;
  padding: 20px 22px;
  background: var(--paper-tint);
  transition: background 0.3s var(--ease);
}
.account-card:hover { background: var(--line); }
.account-card__num { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; }
.account-card__label { font-size: 12px; color: var(--ink-soft); }

/* ---------- Блоки ---------- */

.account__block { margin-bottom: clamp(28px, 5vh, 44px); }
.account__block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.account__block-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

.account__empty { padding: clamp(30px, 6vh, 60px) 0; text-align: center; }
.account__empty p { max-width: 42ch; margin: 0 auto 20px; color: var(--ink-soft); }

.account__hint { margin: 0; padding: 14px 18px; background: var(--paper-tint); font-size: 13px; color: var(--ink-soft); }
.account__pager { display: flex; gap: 10px; justify-content: center; padding-top: 24px; }

/* ---------- Рядок замовлення ---------- */

.order-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  transition: opacity 0.3s var(--ease);
}
.order-row:hover { opacity: 0.72; }
@media (min-width: 760px) {
  .order-row { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr) auto; gap: 20px; }
}

.order-row__thumbs { display: flex; }
.order-row__thumbs img {
  width: 46px;
  height: 58px;
  object-fit: cover;
  background: var(--paper-tint);
}
/* Кадри трохи находять один на одного — це стос речей, а не таблиця. */
.order-row__thumbs img + img { margin-left: -14px; }

.order-row__main { display: grid; gap: 2px; min-width: 0; }
.order-row__main b { font-weight: 500; }
.order-row__main small,
.order-row__state small { font-size: 12px; color: var(--ink-soft); }

.order-row__state { display: grid; gap: 2px; min-width: 0; }
.order-row__state b { font-size: 13px; font-weight: 500; }
/* Колір лише в крапці перед станом: різнокольорові написи в списку
   замовлень читаються як помилки, а не як етапи. */
.order-row__state b::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--ink-soft);
}
.order-row__state--work b::before { background: #b8894a; }
.order-row__state--done b::before { background: #4a7c59; }
.order-row__state--off b::before { background: #b04a4a; }

.order-row__sum { font-family: var(--font-display); font-size: 17px; white-space: nowrap; }
@media (max-width: 759px) {
  .order-row__sum { grid-column: 2; justify-self: start; }
  .order-row__state { grid-column: 2; }
}

/* ---------- Форми кабінету ---------- */

.account-form .fieldset { margin-bottom: clamp(24px, 4vh, 36px); }
.account-form .fields { display: grid; gap: 18px 24px; }
@media (min-width: 620px) { .account-form .fields { grid-template-columns: 1fr 1fr; } }
.account-form__submit { padding-top: 4px; }

/* ---------- Вхід і реєстрація ---------- */

.account--auth .account__auth-box { max-width: 420px; }
.account--auth .page-head__lead { margin-top: 10px; }

.auth__tabs { display: flex; gap: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.auth__tab {
  position: relative;
  padding: 0 0 12px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.auth__tab.is-active { color: var(--ink); }
.auth__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--ink);
}

.auth__form .fields { display: grid; gap: 18px; margin-bottom: 18px; }
.auth__remember { margin-bottom: 18px; }
.auth__hint { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-soft); }
.auth__lost { display: block; margin-top: 16px; font-size: 13px; color: var(--ink-soft); text-align: center; }
.auth__lost:hover { color: var(--ink); }
.auth__legal { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }

.auth__note { margin: 0 0 16px; padding: 10px 14px; font-size: 13px; border: 1px solid var(--line); }
.auth__note--error { border-color: #b04a4a; color: #b04a4a; }

.auth-modal .modal__panel { max-width: 420px; }

/* ---------- Повідомлення Woo ----------

   Woo сам показує тут корисне — наприклад, пропозицію підтвердити пошту,
   щоб підтягнути замовлення, зроблені гостем. Але подає це синьою плашкою
   з дефолтного оформлення. Тут воно говорить тим самим голосом, що й решта. */

.woocommerce-message,
.woocommerce-info,
.woocommerce-notice {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  background: var(--paper-tint);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  list-style: none;
}
.woocommerce-message a,
.woocommerce-info a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.woocommerce-message::before,
.woocommerce-info::before { content: none; }
/* Кнопка всередині повідомлення Woo — не окремий великий заклик до дії. */
.woocommerce-message .button,
.woocommerce-info .button {
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   Склад замовлення (сторінка «Замовлення прийнято» і кабінет)

   Woo віддавав тут таблицю «Товар / Загалом» у дефолтному оформленні —
   на сторінці подяки вона падала окремим шматком під нашою карткою.
   Тепер це той самий блок, що й решта: список із кадрами й підсумок.
   ============================================================ */

.order-detail {
  max-width: 620px;
  margin: clamp(30px, 5vh, 48px) auto 0;
  text-align: left;
}
.order-detail__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}

.order-detail__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.order-detail__item img {
  display: block;
  width: 54px;
  height: 68px;
  object-fit: cover;
  background: var(--paper-tint);
}
.order-detail__name { display: grid; gap: 2px; min-width: 0; }
.order-detail__name b { font-weight: 500; font-size: 15px; }
.order-detail__name small { font-size: 12px; color: var(--ink-soft); }
.order-detail__sum { font-size: 14px; white-space: nowrap; }

.order-detail__totals { padding-top: 12px; }
.order-detail__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 5px 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.order-detail__row span:last-child { color: var(--ink); text-align: right; }
.order-detail__row.is-total {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink);
}
.order-detail__row.is-total span:last-child { font-family: var(--font-display); font-size: 20px; }

.order-detail__note {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: var(--paper-tint);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.order-detail__note b { display: block; color: var(--ink); }

/* ---------- Куди їде ---------- */

.order-detail__facts { display: grid; gap: 8px; }
.order-detail__facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; font-size: 14px; }
.order-detail__facts span { color: var(--ink-soft); }
.order-detail__facts b { font-weight: 400; }
@media (max-width: 520px) {
  .order-detail__facts > div { grid-template-columns: 1fr; gap: 2px; }
  .order-detail__facts span { font-size: 12px; }
}

.order-detail__hint { margin: 16px 0 0; font-size: 12px; color: var(--ink-soft); }
.order-detail__hint a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Рядок-пояснення в картці подяки — без підпису зліва. */

/* ---------- Рамка підтвердження ----------

   Уся інформація про замовлення живе в одній рамці: склад, підсумок,
   оплата й доставка. Раніше частина стояла згори окремою карткою, а
   решта падала під нею — і спосіб оплати з сумою повторювались двічі. */

.thanks__box { max-width: 620px; }

.thanks__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.thanks__head b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
.thanks__head span { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }

/* Секції всередині рамки: власних відступів і ширини їм уже не треба. */
.thanks__box .order-detail { max-width: none; margin: 22px 0 0; }
/* Усередині рамки підзаголовки — тихі мітки секцій, а не заголовки
   рівня сторінки: інакше вони сперечаються з «Замовлення №…» згори. */
.thanks__box .order-detail__title {
  margin-bottom: 12px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.thanks__box .order-detail--where { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.thanks__box .order-detail__hint { display: none; } /* та сама думка вже є нижче, у примітці про ТТН */

.order-detail__paynote {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Номер ТТН — те, заради чого відкривають замовлення після відправки. */
.order-detail__ttn b a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; letter-spacing: 0.04em; }
.order-detail__ttn b a:hover { color: var(--ink-soft); }

/* Форми з одним призначенням (відновлення пароля) — без вкладок. */
.auth--single .fields { margin-bottom: 18px; }

/* ============================================================
   Ролик у галереї товару

   Займає ту саму клітинку, що й широкий кадр, тож розкладка галереї
   не змінюється. Плеєр підставляється скриптом після кліку.
   ============================================================ */

.pdp__video { position: relative; margin: 0; background: var(--paper-tint); }
.pdp__video-play {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.pdp__video-play img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Позначка — щоб було видно, що це не просто фото, ще до наведення. */
.pdp__video-mark {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 10px;
  background: rgba(20, 18, 16, 0.72);
  color: var(--paper);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pdp__video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(251, 250, 248, 0.92);
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}
/* Трикутник складаємо з рамки — щоб не тягнути ще один файл заради значка. */
.pdp__video-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--ink);
}
.pdp__video-play:hover .pdp__video-icon { transform: translate(-50%, -50%) scale(1.08); background: var(--paper); }

.pdp__video-frame { position: relative; width: 100%; aspect-ratio: 9 / 16; background: #000; }
@media (min-width: 760px) { .pdp__video-frame { aspect-ratio: 16 / 10; } }
.pdp__video-frame iframe,
.pdp__video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Підказка під полем не має читатись як мітка наступного. */
.auth__hint { margin-bottom: 4px; }
.auth--single .form-row + .form-row { margin-top: 4px; }