/* Trust-поля картки товару (артикул/виробник) + мітка «Хіт продажів» (Ф5, 5-32).
   Власник: inc/product-card-fields.php. Виділено з content-blocks.css (se1 D7). Токени з fallback-літералом
   (RUCSS на деяких сторінках ріже :root{--tapki-*} з used-css → без fallback var() ламається). */
.tapki-card-meta { margin: 12px 0; font-size: 13.5px; color: var(--tapki-ink2,#4b5563); }
.tapki-card-meta__item { display: inline-block; margin-right: 18px; }
.tapki-card-meta__label { color: var(--tapki-gray,#6b7280); }
/* Білий текст 11px — потрібен green-600 (5.61:1); на бренд-зеленому було 2.91:1 (M2). */
.tapki-hit { display: inline-block; background: var(--tapki-green-600,#2e7564); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .03em; }
.product-small .box-image { position: relative; }
/* Мітка «Хіт» у каталозі/слайдері — absolute-оверлей у кут фото (НЕ в потоці, інакше featured-картки
   вищі за решту на ~21px і ряд/слайдер стає нерівним). Якір — сама картка (.box має position:relative). */
.product-small.box { position: relative; }
/* Мітка «Хіт» — оверлеєм у кут ФОТО, а не в потоці тексту (інакше зсуває назву й ціну).
   ⚠ Прив'язка саме до .box-image, а не до .product-small.box: у слайдері на головній Flatsome
   будує картку іншою розміткою, класу .product-small там немає — і мітка «їхала» в текст.
   Заміряно 2026-08-09 обходом усіх місць виводу: каталог, слайдер головної, сторінка товару. */
/* Саме правило живе в inc/header-critical-css.php: файловий CSS для цих класів RUCSS вирізає. */

/* Статус наявності — бренд-зелений, а не оливковий Flatsome (фронт-аудит S9).
   Було: колір брався з --fs-color-success кастомайзера (#627d47) — тону, якого немає в бренді,
   і на картці товару він сусідив із нашим зеленим. Тут задаємо явно, не чіпаючи кастомайзер:
   значення кастомайзера — критичний шар (правка в БД) і окреме рішення оператора (M1/M2).
   --tapki-status-done — той самий токен, що позначає «все гаразд» у статусах заказа. */
.woocommerce p.stock.in-stock { color: var(--tapki-status-done, #2e7d32); font-weight: 600; }
.woocommerce p.stock.out-of-stock { color: var(--tapki-status-fail, #c0392b); font-weight: 600; }

/* Опис товару: суцільний текст на всю ширину картки (рішення власника 12.08).
   Хронологія, щоб не ходити по колу втретє:
   1) було обмеження рядка 68ch — 597px тексту в панелі 1140px, права половина порожня.
      Власник: «чому опис якимось маленьким блоком».
   2) зробив дві шпальти — місце зайняте, рядок 71 знак. Власник подивився: «зроби, щоб
      воно монолітним текстом ішло, не розбивай на блоки».
   3) тепер суцільний текст на всю ширину.
   ⚠ Рядок при цьому ~150 знаків при нормі 65-70 — це названо власнику і прийнято ним свідомо.
   Єдине, що додано від себе, — трохи більший міжрядковий інтервал: на довгому рядку око
   легше знаходить початок наступного, і це не змінює саму вимогу. */
.woocommerce-Tabs-panel--description {
  line-height: 1.75;
}

/* Мінімальна партія під ціною: умова покупки, а не дрібний шрифт — покупець мусить побачити
   її до того, як почне набирати кількість (inc/product-min-qty.php). */
.tapki-min-qty {
  margin: 6px 0 12px; padding: 8px 12px; display: inline-block;
  background: var(--tapki-green-bg,#f1f9f7); border-radius: var(--tapki-radius,8px);
  font-size: 14px; color: var(--tapki-green-tx,#2e7564);
}

/* Ступені оптової ціни (inc/product-tier-pricing.php). Таблиця, а не список: покупець порівнює
   пороги з цінами очима, і колонки для цього зручніші за рядок. */
.tapki-tiers { width: auto; margin: 0 0 14px; border-collapse: collapse; font-size: 14px; }
/* Заголовок переїхав із <caption> у <summary> (згортання на телефоні, 23.08) — правило
   лишається для сумісності зі старим кешем сторінок, де caption ще є. */
.tapki-tiers caption { text-align: left; font-size: 12.5px; color: var(--tapki-gray-mute,#8a8a8a); padding-bottom: 5px; }

/* ── Блок ступенів, що згортається ──
   На телефоні друкується згорнутим (стан задає сервер, див. inc/product-tier-pricing.php),
   тому рядок мусить ЧИТАТИСЬ як такий, що розкривається: інакше покупець не здогадається,
   що під ним ціни, і вирішить, що опт тут не показують. Стрілка — єдиний натяк, і вона
   в CSS свідомо: її пропажа не ламає доступ до цін, сам <details> лишається клікабельним. */
/* ⚠ Тут лишилась ЛИШЕ косметика. Заміряно 23.08: правила по цих нових класах RUCSS вирізає
   з бойового used-css (computed-стилі показали content:none), тому все, без чого блок не
   читається як «розкривається» — сам рядок, стрілка, відступи — задано інлайном у
   inc/product-tier-pricing.php. Якщо правила нижче не доїдуть, зникне тільки поворот
   стрілки й підсвітка на ховері: блок лишиться клікабельним і зрозумілим. */
.tapki-tiers-box > summary::-webkit-details-marker { display: none; }
.tapki-tiers-arrow { transition: transform .15s; }
.tapki-tiers-box[open] .tapki-tiers-arrow { transform: rotate(-135deg) !important; margin-bottom: 0 !important; margin-top: 3px; }
.tapki-tiers-box > summary:hover { color: var(--tapki-green-tx,#2e7564); }
.tapki-tiers td { padding: 5px 16px 5px 0; border-bottom: 1px solid var(--tapki-green-100,#d4ece6); }
.tapki-tiers tr:last-child td { border-bottom: 0; }
.tapki-tiers td:last-child { color: var(--tapki-green-tx,#2e7564); }