/* HandShop — доповнення рівня теми.
   Тут лежить те, що потрібне ШАБЛОНАМ, але чого не було в макетах:
   у макетах розмітку писали руками, а в темі її генерує PHP і додає
   службові елементи (підписи для читалок екрана, посилання пропуску).
   Вантажиться після посторінкового файлу на кожній сторінці. */

/* Підпис, який має чути читалка екрана, але не має бачити око.
   Без цього правила текст <label> просто виводився в шапці поруч
   із полем пошуку. */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}
/* Виняток: коли на такий елемент перейшли клавіатурою, його треба
   показати — інакше людина не бачить, де перебуває фокус. */
.sr-only:focus, .sr-only:focus-within{
  position:static !important;
  width:auto; height:auto;
  margin:0; overflow:visible;
  clip:auto; clip-path:none; white-space:normal;
}

/* Якір «до вмісту» не повинен ловити рамку фокуса як видимий елемент. */
#hs-main{outline:none}

/* Службові класи WordPress, яких у макетах не було. */
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}
.alignleft{float:left;margin:0 20px 14px 0}
.alignright{float:right;margin:0 0 14px 20px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:12.5px;color:var(--muted);margin-top:6px}

/* ---------- те, що виводить WooCommerce, а в макетах не малювали ---------- */

/* Лічильник товарів у назві розділу WooCommerce друкує тегом <mark>.
   Браузер малює <mark> жовтим маркером — на сторінці це виглядало
   як помилка вёрстки. Робимо його звичайною цифрою поруч із назвою. */
mark.count, .woocommerce mark{
  background:none; color:var(--muted); font-size:.85em;
  font-variant-numeric:tabular-nums;
}

/* Стандартні повідомлення WooCommerce (додано в кошик, помилки форми). */
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  list-style:none; margin:0 0 20px; padding:14px 18px;
  border-radius:8px; font-size:14px; line-height:1.5;
  background:var(--soft2); color:var(--ink);
  border-left:2px solid var(--accent);
}
.woocommerce-error{ background:#f8e9e8; border-left-color:#9c3f3c; }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a{
  color:var(--accent-d,#794979);
}

/* Порожній результат і сторінковість архіву. */
.woocommerce-no-products-found{ padding:40px 0; color:var(--muted); }
.woocommerce-pagination ul{
  display:flex; gap:6px; list-style:none; padding:0; margin:34px 0 0;
  justify-content:center; flex-wrap:wrap;
}
.woocommerce-pagination a, .woocommerce-pagination span{
  display:block; min-width:38px; padding:9px 12px; text-align:center;
  border:1px solid var(--line); border-radius:7px; text-decoration:none;
  color:var(--body); font-size:13.5px;
}
.woocommerce-pagination a:hover{ border-color:var(--accent); color:var(--accent-d,#794979); }
.woocommerce-pagination .current{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---------- смуга над сіткою товарів ----------
   «Показано 1–24 із 186» і вибір сортування. У макеті це був окремий
   рядок; WooCommerce віддає два блоки, які раніше розкладалися
   обтіканням. Ставимо їх у ряд і прибираємо обтікання назовсім. */
.woocommerce-result-count,
.woocommerce-ordering{ float:none; margin:0; }

.prods + .woocommerce-pagination{ margin-top:34px; }

.hs-loopbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:0 0 22px;
}
.hs-loopbar .woocommerce-result-count{
  font-size:13.5px; color:var(--muted);
}
.hs-loopbar .woocommerce-ordering select{
  font-family:inherit; font-size:13.5px; color:var(--body);
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:9px 12px; cursor:pointer;
}
.hs-loopbar .woocommerce-ordering select:hover{ border-color:var(--accent); }
.hs-loopbar .woocommerce-ordering select:focus-visible{
  outline:none; border-color:var(--accent-d,#794979);
  box-shadow:0 0 0 1px var(--accent-d,#794979);
}
@media(max-width:600px){
  .hs-loopbar{ gap:10px }
  .hs-loopbar .woocommerce-ordering{ width:100% }
  .hs-loopbar .woocommerce-ordering select{ width:100% }
}

/* ---------- кошик: те, що приходить від WooCommerce ---------- */

/* Кнопка «Оновити кошик» потрібна WooCommerce у POST, але в макеті її
   немає: кількість застосовується сама. Тому ховаємо за краєм екрана —
   скрипт натискає її сам. Якщо JavaScript вимкнений, стиль нижче
   в <noscript> повертає кнопку на місце. */
.cart__upd{
  position:absolute; left:-9999px;
  font-family:inherit; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:11px 18px; border:1px solid var(--line); border-radius:4px;
  background:#fff; color:var(--ink); cursor:pointer;
}
.cart__upd:hover{ border-color:var(--accent); color:var(--accent); }
/* Фотографія в позиції кошика: без обмеження вона розтягувалася
   на всю висоту рядка вузькою смугою.
   ВАЖЛИВО: розмір має збігатися з колонкою сітки .ci — 104 px на
   компʼютері і 84 px на телефоні. Спершу тут стояло 110 px, і через
   те, що цей файл підключається останнім, він перебивав обидва
   значення з hs-cart.css. На компʼютері це було майже непомітно
   (просвіт 20 -> 14 px), а на телефоні колонка 84 px, і фото
   на 26 px ширше налазило на текст. */
.ci__img{ display:block; width:104px; flex:0 0 104px; }
.ci__img img{ width:100%; height:104px; object-fit:cover; border-radius:8px; display:block; }
@media(max-width:767px){
  .ci__img{ width:84px; flex-basis:84px; }
  .ci__img img{ height:84px; }
}


/* Опис розділу на сливовій обкладинці.
   Клас .ov у блоці доступності перефарбовано в темний акцент — він
   потрібен на світлому тлі. Тут тло темне, і текст ставав майже
   невидимим. Повертаємо світлий, як у решти тексту обкладинки. */
.cover .ov{ color:rgba(255,255,255,.86) !important; }

/* Лічильник обраних фільтрів на кнопці.
   Атрибут hidden не спрацьовував: у .hs-fold__n задано display, а він
   сильніший за типове приховування. Через це на кнопці світився «0». */
.hs-fold__n[hidden]{ display:none !important; }

/* ---------- сторінка товару ---------- */

/* Галерея — рівно як у макеті: перший кадр на всю ширину, решта
   квадратами по двоє в ряд. Своїх правил тут немає навмисно:
   я пробував розтягувати й центрувати останнє фото, коли воно
   лишалося без пари, і обидва рази виходило не так, як у макеті. */

/* Верхній рядок картки: розділ ліворуч, «Порівняти» праворуч. */
.card__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:10px;
}
.card__top .card__eyebrow{ margin:0; min-width:0; }
.card__top .cmp-p{
  flex:none; margin:0; padding:7px 12px; font-size:12.5px; border-radius:7px;
}
.card__top .cmp-p svg{ width:14px; height:14px; }
@media(max-width:600px){
  .card__top .cmp-p span{ position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); }
  .card__top .cmp-p{ padding:8px; }
}

/* Лічильник кількості: поле фіксованої ширини, без стрілок браузера. */
.qty input{ width:40px; -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Останній блок сторінки впирався у підвал — між ними не було нічого.
   Відступ ставимо контейнеру, а не блоку: так він працює і коли
   «Ви дивилися» порожній і останньою йде стрічка схожих. */
.film, .seen{ margin-bottom:0; }
.seen{ padding-bottom:70px; }
.film:last-child{ padding-bottom:70px; }

/* Стара ціна / економія в картці товару.
   Ці правила є лише в hs-catalog.css (взяті з catalog-v2-approved.html),
   а картки .prod виводяться на всіх сторінках — тому переношу в спільний файл. */
.price s{color:var(--muted);font-size:14px;margin-right:8px;font-family:var(--sans)}
.price--sale{color:var(--sale)}
.save{display:inline-block;margin-left:8px;font-family:var(--sans);font-size:11.5px;
      color:var(--sale);border:1px solid var(--sale);border-radius:3px;
      padding:2px 7px;vertical-align:2px}

/* «Ви дивилися»: у макеті блок має margin-top:44px (інлайном у product-v2-approved.html),
   інакше лінія-роздільник прилипає до каруселі згори. */
.seen{ margin-top:44px; }

/* Швидкий перегляд: стан «продано» — крапка й текст сірі, а не зелені.
   У макеті такого стану не було (там усі товари в наявності). */
.qv__stock--off{ color:var(--muted); }
.qv__stock--off::before{ background:var(--muted); }

/* Швидкий перегляд, режим форми: .qv__acts має display:flex, тому самого
   [hidden] браузеру мало — кнопки лишалися висіти над формою.
   Те саме виправлено і в макетах. */
.qv__acts[hidden]{ display:none; }

/* Після AJAX-додавання WooCommerce підставляє під кнопку своє посилання
   «Переглянути кошик». У макеті замість нього спливаюче повідомлення,
   а це посилання зсуває низ картки й ламає рівний ряд. Ховаємо. */
/* Селектор із тегом і !important навмисно: у woocommerce.css лежить
   .woocommerce a.added_to_cart{display:inline-block}, і без цього воно
   виграє за вагою. */
.actions a.added_to_cart,
.qv__acts a.added_to_cart,
.pdp__buy a.added_to_cart,
.mbar a.added_to_cart{ display:none !important; }

/* Службові повідомлення WooCommerce: свою іконку воно бере з власного
   шрифту, який ми не вантажимо, — на місці галочки був порожній квадрат.
   І прибираємо кольорову смугу зверху: у нас акцент ліворуч. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{ display:none !important; }
.woocommerce-message, .woocommerce-info, .woocommerce-error{ border-top:0; }

/* Липка панель фільтрів: у макеті чипи й «Скинути все» — кнопки, тут
   посилання (фільтрує сервер). Знімаємо підкреслення, яке браузер
   малює посиланням, і лишаємо його тільки в «Скинути все», як у макеті. */
.stick .chip-x{ text-decoration:none; line-height:normal; }
.stick__reset{ display:inline-block; }

/* ---------- оформлення замовлення ----------
   Поля малює WooCommerce своєю розміткою (<p class="form-row"> + <label>
   + <span class="woocommerce-input-wrapper">), щоб їх бачили і його
   перевірка, і плагін «Нової пошти». Тут ця розмітка приводиться до
   вигляду .fld з макета checkout.html. */
.co__col .form-row{ display:block; margin:0 0 16px; padding:0; }
.co__col .form-row > label{
  display:block; font-size:13px; color:var(--body); margin-bottom:6px;
}
.co__col .form-row .required{ color:var(--sale); text-decoration:none; border:0; }
.co__col .form-row .optional{ color:var(--muted); }
.co__col .woocommerce-input-wrapper{ display:block; width:100%; }
.co__col .form-row input[type="text"],
.co__col .form-row input[type="tel"],
.co__col .form-row input[type="email"],
.co__col .form-row input[type="number"],
.co__col .form-row select,
.co__col .form-row textarea{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px 14px;
}
.co__col .form-row input:focus,
.co__col .form-row select:focus,
.co__col .form-row textarea:focus{
  outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--tint);
}
.co__col .form-row input::placeholder,
.co__col .form-row textarea::placeholder{ color:#c3b3c3; }
.co__col .form-row.woocommerce-invalid input,
.co__col .form-row.woocommerce-invalid select{ border-color:var(--sale); }
/* Підказка під полем — те саме, що <small> у макеті. */
.fld__hint{ margin:-10px 0 16px; font-size:12.5px; color:var(--muted); }
/* Ім'я та прізвище — у два стовпці, як у макеті. */
.co__col .ff2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media(max-width:575px){ .co__col .ff2{ grid-template-columns:1fr; } }

/* Кнопку WooCommerce ховаємо: у макеті вона в підсумку праворуч,
   і саме вона й надсилає форму. Але лишаємо в розмітці — на неї
   спираються сторонні доповнення. */
/* Рідну кнопку WooCommerce ховаємо, бо в макеті кнопка своя —
   у колонці підсумку. Ховаємо саме ЗА ЕКРАН, а не display:none:
   кнопка лишається справжньою кнопкою форми, і наша її натискає.

   Селектор із id, і з !important. Виглядає грубо, але інакше не
   виходить: у woocommerce.css правило на .button задає position
   і overflow селектором, сильнішим за один клас. Через це кнопка
   лишалася на місці, стискалася до 32 px і напис «Підтвердити
   замовлення» вилазив білим по сірому просто на сторінку. */
#place_order.hs-hidden-submit{
  position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important; min-width:0 !important;
  padding:0 !important; margin:-1px !important; border:0 !important;
  overflow:hidden !important; white-space:nowrap !important;
  clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important;
}

/* Довга назва способу доставки в підсумку. У макеті тут стояло
   коротке «Нова пошта» й nowrap, а в магазині метод називається
   «Нова пошта (за тарифами Нової пошти)». Дужки ми ріжемо в шаблоні,
   але якщо власник колись назве метод інакше й довго — хай перенесеться
   на другий рядок, а не вилазить за край блоку. Цінам nowrap лишаємо. */
.sum__r--ship b{white-space:normal !important;text-align:right}

/* Блок «Нової пошти» від плагіна — у тій самій сітці, що й наші поля. */
.co__col .wcus-checkout-fields .form-row{ margin-bottom:16px; }
.co__col .zen-ui-select__value{
  border:1px solid var(--line); border-radius:8px; padding:12px 14px; background:#fff;
  font-size:15px; color:var(--ink);
}

/* Квіз: у макеті недоступний варіант був <button disabled>. Тут варіанти —
   посилання (щоб працювали без скрипта), тому недоступний варіант це <span>,
   і гасимо його за aria-disabled. */
.opt-c[aria-disabled="true"]{ opacity:.4; pointer-events:none; }

/* Порівняння: «Купити» тут — та сама кнопка WooCommerce, що в картці,
   тому після натискання вона дописує поруч посилання «Переглянути кошик».
   У макеті його немає, і воно ламає рядок кнопок. */
.cmp-col__acts a.added_to_cart{ display:none !important; }

/* Лічильник кошика при нулі не показуємо — так було в макетах.
   Без цього правила [hidden] програє display:grid із .cartn i. */
.cartn i[hidden]{ display:none !important; }

/* Оформлення заблоковане мінімальною сумою: причина, а не загальна фраза. */
.co__err{ margin:0 0 18px; font-size:15px; line-height:1.7; color:var(--body); }
.co__err b{ color:var(--ink); font-weight:500; }


/* ============================================================
   ОБРАНЕ
   Кнопка на сторінці товару взята з product-v2-approved.html —
   там клас .fav описаний повністю, тільки в підсумкову розмітку
   макета не потрапив. Решта (сердечко на картці й лічильник
   у шапці) зроблена в тій самій мові, що вже є на сайті:
   картка повторює геометрію кнопки порівняння, лічильник —
   лічильник кошика.
   ============================================================ */

/* Сторінка товару — один в один із макета. */
.fav{flex:0 0 auto;width:52px;border:1px solid var(--line);border-radius:4px;background:#fff;cursor:pointer;
 display:grid;place-items:center;color:var(--muted);transition:.18s}
.fav svg{width:20px;height:20px}
.fav:hover{border-color:var(--accent);color:var(--accent)}
.fav.is-on{border-color:var(--accent);color:var(--accent)}
.fav.is-on svg{fill:currentColor}

/* Картка в каталозі: під кнопкою порівняння, та сама геометрія. */
.fav-b{position:absolute;top:54px;right:10px;z-index:3;width:36px;height:36px;
 display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
 background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;padding:0;
 opacity:0;transform:translateY(-4px);transition:.18s}
.prod:hover .fav-b,.fav-b:focus-visible,.fav-b.is-on{opacity:1;transform:none}
.fav-b svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
 stroke-linecap:round;stroke-linejoin:round}
.fav-b:hover{border-color:var(--accent);background:#fff;color:var(--accent)}
.fav-b.is-on{border-color:var(--accent);color:var(--accent)}
.fav-b.is-on svg{fill:currentColor}
/* На дотик кнопки видно завжди (наведення там немає), і два кружечки
   один під одним з'їдали половину висоти фото: на телефоні картка
   вужча — 40 px від 194 px це вже п'ята частина ширини. Тому на дотик
   ставимо їх У РЯД: сердечко ліворуч від порівняння. Розмір 40 px
   лишаємо як у макеті — це розмір, зручний для пальця. */
@media (hover:none){ .fav-b{opacity:1;transform:none;width:40px;height:40px;top:10px;right:58px} }

/* Шапка: сердечко поруч із кошиком, лічильник — як у кошика. */
.favn{position:relative}
.favn i{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
 background:var(--accent);color:#fff;font-style:normal;font-size:10.5px;line-height:16px;text-align:center}
.favn i[hidden]{display:none !important}

/* Сторінка обраного: порожній стан — той самий вигляд, що в каталозі. */
.fav-empty{padding:60px 0;text-align:center;color:var(--muted)}
.fav-empty b{display:block;font-family:var(--serif);font-size:22px;color:var(--ink);
 margin-bottom:8px;font-weight:400}
.fav-empty a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* Проданий виріб: пояснення під кнопкою «Зробимо схожу роботу». */
.pdp__repeat{margin:12px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}

/* ============================================================
   КАРТКА НА ТЕЛЕФОНІ — затверджений варіант 3
   (макет D:\HANDSHOP\_design\mobile-cards-v2.html)

   Що було не так. У смузі 421–500 px каталог показує дві колонки,
   і фото стискається до 175 px. На ньому сиділи плашка й два
   кружечки по 40 px — чверть висоти фото. Виріб видно погано,
   а заради нього людина й відкрила каталог.

   Дві зміни, обидві тільки до 767 px:

   1. Кружечки йдуть з фото в рядок «В наявності» під ціною.
      Фото лишається чистим. Порядок задаємо через order, а не
      через порядок у розмітці: сердечко й порівняння додають різні
      скрипти, і хто з них устигне перший — питання випадку.

   2. Рамка фото стає вертикальною, 4:5. Усі знімки в магазині
      зняті 540×600, тобто вертикальні, і квадратна рамка різала
      їм верх і низ — у ляльок зникали то бант, то взуття.
      219 px заввишки замість 175, і виріб нарешті цілий.

   Від 768 px не міняється нічого: фото квадратне, кружечки на фото
   й з'являються при наведенні — рівно як у затвердженому каталозі.
   ============================================================ */
@media(max-width:767px){
  .pimg{aspect-ratio:4/5}
  /* Кнопки тримаються ПАРОЮ праворуч, а не розповзаються по рядку.
     Раніше тут стояло justify-content:space-between, і на одноколонковій
     картці (телефон вужчий за 420 px) сердечко опинялося посеред
     картки, за півсотні пікселів від порівняння. Тепер праворуч їх
     штовхає margin-left:auto на першій кнопці, а між ними — 10 px:
     достатньо, щоб пальцем не влучити в сусідню. */
  .prow{display:flex;align-items:center;gap:10px;margin-top:6px;min-height:36px}
  .prow .stock{margin-top:0}
  .cmp-b,.fav-b{position:static;flex:0 0 auto;width:36px;height:36px;
                opacity:1;transform:none}
  .fav-b{order:1;margin-left:auto}
  .cmp-b{order:2}
}

/* Обране: «Очистити» поруч із кількістю. Вигляд узятий зі смуги
   порівняння (.cmpbar__clr у compare.html) — тиха підкреслена
   кнопка, а не червона «Видалити все»: список складався довго,
   і кнопка не має тягнути на себе увагу.
   Натискається двічі: перший дотик міняє напис на «Точно очистити?»,
   другий — чистить. Скасувати нічим, а на телефоні промазати легко. */
.fav-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.fav-clr{border:0;background:none;color:var(--muted);font-size:12.5px;cursor:pointer;
 padding:6px 2px;font-family:inherit;text-decoration:underline;text-underline-offset:3px;
 transition:color .15s ease}
.fav-clr:hover{color:var(--accent-d,#794979)}
.fav-clr.is-ask{color:var(--sale)}
.fav-clr[hidden]{display:none !important}

/* Обгортку способів оплати WooCommerce малює сам: сіро-бузкова плашка
   із заокругленням. У затвердженому макеті її немає — там просто
   картка способу оплати й підказка під нею. Тому обгортку робимо
   прозорою, а порожній рядок, де сиділа схована рідна кнопка,
   стискаємо до нуля: інакше від нього лишалася сіра смуга. */
#payment{background:none !important;border-radius:0 !important;padding:0 !important}
#payment .form-row.place-order{padding:0 !important;margin:0 !important;min-height:0}

/* Фото в блоці «Підберемо подарунок за 3 кроки» заповнює рамку.
   У макеті там стояло object-fit:contain — це правильно для фотографії
   виробу, яку не можна різати. Тепер там фірмове фото-натюрморт, і
   contain лишав над ним і під ним білі смуги по 46 px. Обрізати такий
   кадр з боків не шкода: у центрі коробка з биркою, і вона лишається. */
.edit figure img{object-fit:cover}

/* ============================================================
   Верхня смуга — запобіжник на вузьких планшетах.
   У всіх стилях у .topbar .wrap стоїть жорстке height:38px.
   На ширинах приблизно 601–660 px промо-рядок ще показується,
   але вже не влазить в один рядок: текст переносився, вилазив
   за межі темної плашки і його накривала біла шапка.
   Замінюємо жорстку висоту на мінімальну: на всіх звичних
   ширинах вигляд не змінюється (вміст там 20 px, смуга та сама
   38 px), а у вузькій смузі плашка просто підростає під текст.
   Файл підключається останнім на кожній сторінці, тому одного
   правила тут вистачає замість правок у 17 стилях.
   ============================================================ */
.topbar .wrap{height:auto;min-height:38px;padding-top:4px;padding-bottom:4px}

/* ============================================================
   Дві дрібниці, які вилізли на 360 px при РЕАЛЬНОМУ вмісті.
   У макетах їх не видно, бо там демо-дані: у блозі було кілька
   сторінок, а не 179, і коротший підпис.
   ============================================================ */

/* 1. Пагінація блогу. Рядок «← 1 2 … 179 →» плюс лічильник
      «з 1 603 статей» не влазить у 300 px і не має права
      переноситися (flex-wrap:nowrap за замовчуванням), тому
      стрілки вилазили в поля сторінки на 15 px ліворуч.
      Дозволяємо перенос і виносимо лічильник окремим рядком —
      кнопки лишаються тим самим рядком, як у макеті. */
@media(max-width:560px){
  .bpage{flex-wrap:wrap;row-gap:10px}
  .bpage > span:not(.bp){flex:1 0 100%;text-align:center;margin:2px 0 0}
}

/* 2. Рядок купівлі на сторінці товару. Лічильник кількості
      займає 120 px, сердечко 52 px, і на «Додати в кошик»
      лишалося 67 px — напис ламався на три рядки, а сердечко
      вилазило за край картки на 7 px.
      На вузьких екранах кнопку опускаємо в окремий рядок
      на всю ширину: і не вилазить, і пальцем влучити легше. */
@media(max-width:560px){
  .pdp__buy{flex-wrap:wrap}
  .pdp__buy .buy{flex:1 1 100%;order:3}
}

/* 3. Оформлення замовлення: перші секунду-дві після завантаження
      сторінку можна було відтягнути вбік на 33 px. Це службовий
      <select> плагіна доставки: поки не спрацював select2, він
      лежить у потоці з природною шириною за найдовшою назвою
      міста. Обмежуємо ширину — select2 потім однаково ховає його
      власними правилами, тож на роботу віджета це не впливає. */
.woocommerce-checkout select{max-width:100%}

/* ============================================================
   Кошик на телефоні: сторінка не має права бути ширшою за екран.
   Власник побачив на своєму телефоні, що в кошику назва товару
   й ціна вилазять за правий край. У мене на 320–425 px усе
   влазило, тож причина не в самій ширині: на телефоні текст
   може бути більшим (системний масштаб шрифту), а тоді
   спрацьовує та сама пастка, що вже двічі ловила нас сьогодні —
   grid-template-columns:1fr має приховану нижню межу по вмісту.
   Якщо вміст не влазить, колонка розпирається, і сторінка їде.

   Тут прибрано всі три способи, якими рядок кошика може
   виявитися ширшим за екран:
     1fr -> minmax(0,1fr)  колонка більше не розпирається
     min-width:0           діти сітки можуть стискатися
     overflow-wrap         довга назва ламається, а не вилазить
     white-space:normal    ціна й підсумки можуть перенестися
   ============================================================ */
@media(max-width:991px){
  .cart__grid{grid-template-columns:minmax(0,1fr)}
  .ci__right{min-width:0}
}
@media(max-width:767px){
  .ci{max-width:100%}
  .ci > *{min-width:0}
  .ci__t{overflow-wrap:anywhere}
  .ci__price{white-space:normal}
  .sum__r b{white-space:normal}
}

/* ============================================================
   Дві правки після першого дня роботи нового сайту.
   ============================================================ */

/* 1. КОШИК ЛИП ДО КРАЇВ ЕКРАНА.
   .wrap задає padding:0 30px, а нижче в тому ж файлі йде
   .cart{padding:26px 0 0} — скорочений запис обнуляє ліве
   й праве поле. На широкому екрані це непомітно: сторінка
   й так вузька посеред екрана. На телефоні ж текст, фото
   й ціна впиралися просто в край. Так було ще в макеті. */
.wrap.cart{padding-left:30px;padding-right:30px}

/* 2. ЛІЧИЛЬНИК ТОВАРІВ ВІДʼЇХАВ ВІД ЗНАЧКА КОШИКА.
   На екранах до 600 px ми навмисно збільшили область
   натискання: .cartn{padding:10px;margin:-10px}. Бабл
   прив'язаний до кутка самого посилання, тому разом із
   падінгом поїхав на 10 px вгору-вправо. Компенсуємо. */
@media(max-width:600px){
  .cartn i{top:3px;right:1px}
}


/* ============================================================
   ПОВНИЙ ОПИС РОЗДІЛУ КАТАЛОГУ + РОЗГОРТАННЯ
   ------------------------------------------------------------
   Було: у woocommerce.php текст різався на 32 словах, тож від
   опису лишалося півтори фрази з трьома крапками. На старому
   сайті показувався весь текст. Повертаємо повний, але згорнутим
   у три рядки — інакше на телефоні опис відтісняє товари вниз
   на пів екрана.

   Верстка тримається макета catalog-v2-approved.html: обкладинка
   .cover — фіолетовий градієнт, тому все всередині біле.
   Кнопка зроблена в тій самій мові, що й .hs-fold у фільтрах:
   капслок, шпація між літерами, шеврон, що повертається.
   ============================================================ */

/* Смуга тексту в 52ch (≈490 px) на широкому екрані виглядала вузькою —
   власник попросив ширшу. Розширюємо ТІЛЬКИ обкладинку розділу каталогу:
   на інших сторінках (про нас, блог) обкладинка лишається як у макеті. */
.tax-product_cat .cover__in,
.tax-product_tag .cover__in{max-width:880px}
.covdesc__in,
.cover .covdesc__in p,
.cover .covdesc__in li{max-width:none}

.covdesc{margin:0;min-width:0}
.covdesc__in{color:rgba(255,255,255,.82);font-size:15px;overflow-wrap:break-word}
/* .cover p уже задає колір і розмір — усередині опису вирівнюємо абзаци */
.cover .covdesc__in p{margin:0 0 10px}
/* Власник просить рівний край з обох боків — як було на старому
   сайті (там абзаци несли inline style="text-align: justify").
   Саме вирівнювання лишаємо, але вмикаємо перенос по складах:
   без нього у вузькій колонці браузер розтягує пробіли в «річки».
   Якщо браузер не вміє переносити українську — просто буде
   звичайне вирівнювання по ширині, гірше не стане. */
.cover .covdesc__in p,
.cover .covdesc__in li{
	text-align:justify;
	text-align-last:left;
	-webkit-hyphens:auto;
	hyphens:auto;
	hyphenate-limit-chars:6 3 3;
}
.cover .covdesc__in p:last-child{margin-bottom:0}
.covdesc__in strong,.covdesc__in b{color:#fff;font-weight:600}
.covdesc__in em,.covdesc__in i{color:rgba(255,255,255,.9)}
.covdesc__in a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.covdesc__in ul,.covdesc__in ol{margin:0 0 10px;padding-left:18px}
.covdesc__in li{margin:0 0 4px}

/* згорнутий стан: рівно три рядки, далі — багатокрапка браузера */
.covdesc--fold .covdesc__in{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
	line-clamp:3;
	overflow:hidden;
}
.covdesc--fold.is-open .covdesc__in{
	display:block;
	overflow:visible;
	-webkit-line-clamp:none;
	line-clamp:none;
}

.covdesc__more{
	display:inline-flex;align-items:center;gap:7px;margin-top:12px;
	font:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
	color:#fff;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.45);
	padding:0 0 4px;cursor:pointer;transition:border-color .18s ease;
}
.covdesc__more:hover{border-bottom-color:#fff}
.covdesc__more:focus-visible{outline:2px solid #fff;outline-offset:4px}
.covdesc__more[hidden]{display:none}
.covdesc__more svg{width:14px;height:14px;flex:0 0 14px;transition:transform .2s ease}
.covdesc__more[aria-expanded="true"] svg{transform:rotate(180deg)}

@media(max-width:767px){
	/* Розмір шрифта не чіпаємо: у макеті .cover p однаковий на всіх
	   екранах. Знімаємо лише обмеження 52ch — на телефоні ширину
	   й так задає екран. */
	.covdesc__in{max-width:none}
	.covdesc__more{margin-top:10px;font-size:11.5px}
}


/* ============================================================
   «ОЧИСТИТИ КОШИК» У ПАНЕЛІ ПІД ЗНАЧКОМ
   ------------------------------------------------------------
   Дія руйнівна, тому вона навмисно не виглядає як третя кнопка:
   дрібний припис під кнопками, кольором підказки. Помітно тому,
   хто шукає, і не тягне на себе увагу того, хто йде оформлювати.
   ============================================================ */
.hs-mini__clear{
	display:block;
	margin:10px 0 0;
	text-align:center;
	font-size:12px;
	color:var(--muted);
	border-bottom:1px solid transparent;
	transition:color .18s ease;
}
.hs-mini__clear:hover,
.hs-mini__clear:focus-visible{ color:var(--accent); }
.hs-mini__clear:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* Те саме на самій сторінці кошика — поруч із «Продовжити покупки».
   Панелі під значком на телефоні немає (.hs-mini сховано до 991 px),
   тому без цього рядка очистити кошик з телефона було б нічим. */
.cart__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cart__foot .cart__back{margin-top:22px}
.cart__clear{margin-top:22px;font-size:13px;color:var(--muted);transition:color .18s ease}
.cart__clear:hover,.cart__clear:focus-visible{color:var(--accent)}
@media(max-width:520px){
	/* На вузькому екрані два посилання в один рядок тиснуться — під себе. */
	.cart__foot{flex-direction:column;align-items:flex-start;gap:0}
	.cart__clear{margin-top:12px}
}

/* ============================================================
   КАРТКИ «ПОДАРУНКИ ДО ДАТИ»: ЩО ПОТРАПЛЯЄ В КАДР
   ------------------------------------------------------------
   Картка горизонтальна (16/10), а фото товарів вертикальні —
   тому з фото береться смуга, і за замовчуванням це точний центр:
   у ляльки в кадр потрапляє тулуб, а голова зрізана.
   Зсуваємо кадр вище — обличчя й верх виробу важливіші за підлогу.
   Точне положення для кожної картки власник може вибрати
   у «Вигляд → Налаштувати → Подарунки до дати (головна)».
   ============================================================ */
.season-card__i{object-position:50% 28%}
.season-card__i.is-top{object-position:50% 0}
.season-card__i.is-center{object-position:50% 50%}
.season-card__i.is-bottom{object-position:50% 100%}


/* ============================================================
   25. ШВИДКИЙ ПЕРЕГЛЯД — ПОВНИЙ НАБІР СТИЛІВ
   Вікно швидкого перегляду тепер відкривається не лише в каталозі,
   а й на головній та в «Обраному». У hs-home.css лежала тільки
   половина правил: не було ні самого .qv (саме воно робить із блоку
   вікно поверх сторінки), ні блоку «Схожі за технікою», ні форми
   швидкого замовлення — тому на головній вміст вивалювався
   в сторінку, а картинки розтягувалися на повний розмір.
   Переносимо сюди канонічний набір із hs-catalog.css: цей файл
   підключається останнім на КОЖНІЙ сторінці, тож швидкий перегляд
   виглядає однаково скрізь.
   ============================================================ */
.qv-hint{ position:absolute;left:0;right:0;bottom:0;background:rgba(49,37,49,.9);color:#fff; text-align:center;padding:11px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; transform:translateY(100%);transition:transform .25s;cursor:pointer }
.prod:hover .qv-hint{ transform:none }
@media (hover:none){
  .qv-hint{ display:none }
}
.qv{ position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px }
.qv[hidden]{ display:none }
.qv__bg{ position:absolute;inset:0;background:rgba(49,37,49,.62) }
.qv__box{ position:relative;background:#fff;width:min(980px,100%);max-height:92vh;overflow:auto; border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.28) }
.qv__x{ position:absolute;top:10px;right:14px;z-index:3;background:rgba(255,255,255,.9);border:0; width:34px;height:34px;border-radius:50%;font-size:24px;line-height:1;color:var(--muted);cursor:pointer }
.qv__x:hover{ color:var(--ink) }
.qv__grid{ display:grid;grid-template-columns:1fr 1fr;gap:0 }
.qv__media{ background:var(--soft2) }
.qv__big{ aspect-ratio:1/1;overflow:hidden }
.qv__big img{ width:100%;height:100%;object-fit:cover }
.qv__thumbs{ display:flex;gap:8px;padding:10px }
.qv__thumbs button{ width:58px;height:58px;padding:0;border:1px solid transparent;background:#fff; cursor:pointer;overflow:hidden;border-radius:4px }
.qv__thumbs button.is-on{ border-color:var(--accent) }
.qv__thumbs img{ width:100%;height:100%;object-fit:cover }
.qv__info{ padding:34px 34px 30px }
.qv__info h3{ font-size:24px;line-height:1.25;margin:0 0 12px }
.qv__price{ font-family:var(--serif);font-size:26px;color:var(--ink);margin-bottom:6px }
.qv__stock{ font-size:12.5px;color:var(--ok);display:flex;align-items:center;gap:6px;margin-bottom:20px }
.qv__stock::before{ content:"";width:5px;height:5px;border-radius:50%;background:var(--ok) }
.qv__acts{ display:flex;flex-direction:column;gap:9px }
.qv__acts .buy{ border-radius:4px;padding:14px }
.qv__more{ display:block;text-align:center;font-size:12.5px;color:var(--muted); text-decoration:underline;text-underline-offset:3px }
.qv__more:hover{ color:var(--accent) }
.qv__sim{ border-top:1px solid var(--line);padding:22px 34px 30px }
.qv__sim h4{ font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); margin:0 0 14px;font-family:var(--sans);font-weight:500 }
.qv__simrow{ display:grid;grid-template-columns:repeat(4,1fr);gap:14px }
.qv__simrow a{ display:block }
.qv__simrow figure{ margin:0 0 8px;aspect-ratio:1/1;overflow:hidden;border-radius:6px;background:var(--soft2) }
.qv__simrow img{ width:100%;height:100%;object-fit:cover }
.qv__simrow b{ display:block;font-size:12.5px;font-weight:400;color:var(--ink);line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden }
.qv__simrow span{ font-size:12.5px;color:var(--muted) }
@media(max-width:767px){
  .qv__grid{ grid-template-columns:1fr }
  .qv__info{ padding:24px 20px }
  .qv__sim{ padding:20px }
  .qv__simrow{ grid-template-columns:repeat(2,1fr) }
}
.qv__fast{ display:flex;align-items:center;justify-content:center;gap:9px;width:100%; padding:13px;border:1px solid var(--accent);border-radius:4px;background:#fff;color:var(--accent); font-family:inherit;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer; transition:.18s }
.qv__fast:hover{ background:var(--accent);color:#fff }
.qv__fast svg{ width:16px;height:16px;flex:0 0 auto }
.qv__form[hidden],.qv__done[hidden]{ display:none }
.qv__form{ padding:0 34px 30px }
.qv__form-t{ font-size:13.5px;color:var(--body);margin:0 0 16px }
.qv__form label{ display:block;font-size:12.5px;color:var(--muted);margin-bottom:13px }
.qv__form input,.qv__form textarea{ display:block;width:100%;margin-top:6px;border:1px solid var(--line); padding:12px 14px;font-family:inherit;font-size:15px;font-weight:300;color:var(--ink);border-radius:4px }
.qv__form input:focus,.qv__form textarea:focus{ outline:none;border-color:var(--accent) }
.qv__form .buy{ border-radius:4px;padding:14px;margin-top:4px }
.qv__back{ display:block;width:100%;margin-top:12px;background:none;border:0;cursor:pointer; font-family:inherit;font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px }
.qv__back:hover{ color:var(--accent) }
.qv__done{ padding:0 34px 30px;text-align:center }
.qv__ok{ font-family:var(--serif);font-size:22px;color:var(--ink);margin:0 0 8px }
.qv__done p{ font-size:14px;color:var(--body);margin:0 }
@media(max-width:767px){
  .qv__form,.qv__done{ padding:0 20px 24px }
}
.qv__simrow figure,.seen__row figure{ box-shadow:0 0 0 1px transparent; transition:box-shadow .2s ease,transform .2s ease }
.qv__simrow img,.seen__row img{ transition:transform .5s ease }
.qv__simrow a:hover figure,.seen__row a:hover figure{ box-shadow:0 0 0 1px var(--accent) }
.qv__simrow a:hover img,.seen__row a:hover img{ transform:scale(1.04) }
.qv__simrow a:hover b,.seen__row a:hover b{ color:var(--accent) }
.qv__simrow a b,.seen__row a b{ transition:color .2s }
body,
.hs-search__form input, .qv__form input, .qv__form textarea,
.bsearch input, .modal input, .modal textarea,
.pdp__price small, .card__price small{ font-weight:400; }


/* ============================================================
   26. СТОРІНКА ТОВАРУ — ЗАЙВІ ВІДСТУПИ МІЖ ФОТОГРАФІЯМИ
   .pdp2 має align-items:stretch, тому ліва колонка з фото
   розтягується на висоту правої (картка покупки + вкладки з описом).
   Сітка .stream складається з рядків auto, і зайву висоту вона
   чесно ділить між ними — між фото з'являються порожні смуги
   по сто з гаком пікселів. Видно там, де фотографій три-чотири,
   а опис довгий: відстань «прив'язується» до висоти вкладок.
   align-content:start притискає рядки догори — відступ лишається
   рівно той, що заданий gap (14px).
   ============================================================ */
.stream{ align-content:start }


/* ============================================================
   27. КНОПКА «ПОДІЛИТИСЯ»
   Одна й та сама кнопка у швидкому перегляді й на сторінці товару.
   Навмисно тиха: це не заклик до дії, а зручність для того, хто вже
   вирішив показати виріб комусь. Тому вигляд як у «Відкрити сторінку
   товару» — підкреслений текст, а не ще одна помітна кнопка поруч
   із «Купити» та «Швидке замовлення».
   ============================================================ */
.hs-share{ display:flex;align-items:center;justify-content:center;gap:8px;
 width:100%;margin-top:10px;padding:6px 0;border:0;background:none;cursor:pointer;
 font-family:inherit;font-size:12.5px;color:var(--muted);transition:color .18s }
.hs-share span{ text-decoration:underline;text-underline-offset:3px }
.hs-share:hover{ color:var(--accent) }
.hs-share svg{ width:15px;height:15px;flex:0 0 auto }

/* На сторінці товару кнопка йде після «Швидкого замовлення», тож
   трохи більший відступ, щоб не злипалася з рамкою. */
.pdp__fast + .hs-share{ margin-top:12px }