/* =====================================================================
   INGREDIENTS — Сторінка товару · напрям B+ (Фаза 8)
   ===================================================================== */

.product-wrap{ padding-block:clamp(28px,4vw,48px); }

.woocommerce div.product{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,52px); align-items:start; }

/* Галерея */
.woocommerce div.product .woocommerce-product-gallery{ margin:0; float:none; width:100% !important; max-width:none; align-self:start; }
.woocommerce div.product .woocommerce-product-gallery__wrapper{ margin:0; }
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img{ width:100%; border-radius:16px; border:1px solid var(--line); background:var(--surface-3); }
.woocommerce div.product .flex-control-thumbs{ display:flex; gap:10px; margin:12px 0 0; padding:0; }
.woocommerce div.product .flex-control-thumbs li{ width:72px !important; margin:0; }
.woocommerce div.product .flex-control-thumbs img{ border-radius:10px; }

/* Summary */
.woocommerce div.product .summary{ margin:0 !important; float:none !important; width:auto !important; }
.woocommerce div.product .product_title{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.4vw,38px); line-height:1.08; color:#fff; margin:0 0 12px; letter-spacing:-.01em; }
.woocommerce div.product .prod-availability{ margin:0 0 16px; }
.woocommerce div.product .woocommerce-product-details__short-description{ color:var(--tx-mut); font-size:16px; margin-bottom:8px; }

/* Мета (SKU / категорії) */
.woocommerce div.product .product_meta{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-size:13.5px; color:var(--tx-dim); }
.woocommerce div.product .product_meta > span{ display:block; margin-bottom:6px; }
.woocommerce div.product .product_meta a{ color:var(--tx-mut); }
.woocommerce div.product .product_meta a:hover{ color:var(--acc); }

/* Вкладки (варіант D — великі заголовки + градієнт-лінія; перебиваємо дефолти WooCommerce) */
.woocommerce div.product .woocommerce-tabs{ grid-column:1 / -1; margin-top:14px; }
.woocommerce div.product .woocommerce-tabs ul.tabs{ display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,30px); margin:0 0 24px; padding:0; list-style:none; border-bottom:1px solid var(--line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after{ display:none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{ margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ position:relative; display:block; padding:4px 2px 14px; color:var(--tx-mut); font-family:var(--font-display); font-weight:700; font-size:clamp(15px,2vw,17px); text-shadow:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{ color:var(--tx); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:#fff; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--acc),#7df0ff); }
.woocommerce div.product .woocommerce-Tabs-panel{ color:var(--tx-mut); font-size:15.5px; line-height:1.7; }
.woocommerce div.product .woocommerce-Tabs-panel h2{ font-size:20px; color:#fff; margin-top:0; }
.prod-documents a{ color:var(--acc); }

/* Заголовки секцій усередині вкладок (Опис, Специфікація, Форми випуску) */
.woocommerce div.product .woocommerce-Tabs-panel h3{ font-family:var(--font-display); font-size:17px; color:#fff; margin:28px 0 12px; }
.woocommerce div.product .woocommerce-Tabs-panel h4{ font-family:var(--font-display); font-size:15px; color:var(--tx); margin:22px 0 10px; }

/* Типографіка вмісту вкладки (WYSIWYG) */
.woocommerce div.product .woocommerce-Tabs-panel > *:first-child{ margin-top:0; }
.woocommerce div.product .woocommerce-Tabs-panel p{ margin:0 0 1em; max-width:80ch; }
.woocommerce div.product .woocommerce-Tabs-panel strong,
.woocommerce div.product .woocommerce-Tabs-panel b{ color:var(--tx); font-weight:600; }
.woocommerce div.product .woocommerce-Tabs-panel a{ color:var(--acc); }
.woocommerce div.product .woocommerce-Tabs-panel a:hover{ text-decoration:underline; }
.woocommerce div.product .woocommerce-Tabs-panel ul,
.woocommerce div.product .woocommerce-Tabs-panel ol{ margin:0 0 1.2em; padding-left:1.5em; max-width:80ch; display:grid; gap:.5em; }
.woocommerce div.product .woocommerce-Tabs-panel ul li{ list-style:disc; }
.woocommerce div.product .woocommerce-Tabs-panel ol li{ list-style:decimal; }
.woocommerce div.product .woocommerce-Tabs-panel li{ padding-left:.25em; }
.woocommerce div.product .woocommerce-Tabs-panel li::marker{ color:var(--acc); }
.woocommerce div.product .woocommerce-Tabs-panel ul ul,
.woocommerce div.product .woocommerce-Tabs-panel ol ol,
.woocommerce div.product .woocommerce-Tabs-panel ul ol,
.woocommerce div.product .woocommerce-Tabs-panel ol ul{ margin:.4em 0 0; }
.woocommerce div.product .woocommerce-Tabs-panel hr{ border:0; border-top:1px solid var(--line); margin:22px 0; }

/* Таблиці у вмісті вкладки (напр. «Ключові показники») */
.woocommerce div.product .woocommerce-Tabs-panel table:not(.variants-table){ width:100%; max-width:660px; border-collapse:separate; border-spacing:0; margin:6px 0 24px;
  font-size:14.5px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.woocommerce div.product .woocommerce-Tabs-panel table:not(.variants-table) td,
.woocommerce div.product .woocommerce-Tabs-panel table:not(.variants-table) th{ padding:11px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.woocommerce div.product .woocommerce-Tabs-panel table:not(.variants-table) tr:last-child td,
.woocommerce div.product .woocommerce-Tabs-panel table:not(.variants-table) tr:last-child th{ border-bottom:0; }
.woocommerce div.product .woocommerce-Tabs-panel table:not(.variants-table) td:first-child,
.woocommerce div.product .woocommerce-Tabs-panel table:not(.variants-table) th:first-child{ color:var(--tx); font-weight:600; width:48%; }
.woocommerce div.product .woocommerce-Tabs-panel table:not(.variants-table) td:last-child{ color:var(--tx-mut); }
.woocommerce div.product .woocommerce-Tabs-panel table:not(.variants-table) tr:hover td{ background:rgba(255,255,255,.02); }

/* Форми випуску — таблиця варіантів у описі товару */
.variants-wrap{ margin:14px 0 6px; border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden; overflow-x:auto; }
.variants-table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px; margin:0; }
.variants-table thead th{ text-align:left; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-dim); font-weight:600; padding:12px 16px; border-bottom:1px solid var(--line-2); background:rgba(255,255,255,.02); }
.variants-table td{ padding:12px 16px; border-bottom:1px solid var(--line); color:var(--tx-mut); vertical-align:middle; }
.variants-table tbody tr:last-child td{ border-bottom:0; }
.variants-table tbody tr:hover td{ background:rgba(255,255,255,.02); }
.variants-table td:first-child{ color:var(--tx); font-weight:500; }
.variants-table td:nth-child(2){ font-family:var(--font-mono); font-size:13px; }
.variants-table .vbadge{ display:inline-block; font-size:12.5px; line-height:1; padding:5px 10px; border-radius:999px; border:1px solid var(--line-2); color:var(--tx-dim); white-space:nowrap; }
.variants-table .vbadge.is-in{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 45%, transparent); }
.variants-table .vbadge.is-order{ color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, transparent); }
.variants-table__img{ width:60px; }
.variants-table__img img{ width:44px; height:44px; object-fit:cover; border-radius:8px; display:block; border:1px solid var(--line-2); background:var(--bg-2); }
.variants-table__na{ color:var(--tx-dim); }

/* Таблиця атрибутів у «Додатковій інформації»: вужчий лейбл, значення — чипи */
.woocommerce div.product .woocommerce-Tabs-panel table.woocommerce-product-attributes{ max-width:none; }
.woocommerce div.product .woocommerce-Tabs-panel table.woocommerce-product-attributes th.woocommerce-product-attributes-item__label{ width:200px; white-space:nowrap; vertical-align:top; color:var(--tx); font-weight:600; }
.woocommerce div.product .woocommerce-Tabs-panel table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value{ color:var(--tx-mut); font-style:normal; }
.woocommerce div.product .woocommerce-Tabs-panel table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value p{ margin:0; font-style:normal; }
.attr-chips{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px; }
.attr-chips .spec-chip{ display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:12.5px; color:var(--tx-mut);
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:8px; padding:7px 12px; line-height:1.3; }

/* Variable-товар: підказки + колонка-дія в таблиці форм */
.product-cta--variable{ display:block; }
.product-cta--variable .btn{ display:inline-flex; }
.product-cta__hint{ color:var(--tx-mut); font-size:13.5px; line-height:1.55; margin:12px 0 0; max-width:48ch; }
.variants-hint{ color:var(--tx-mut); font-size:14px; margin:0 0 12px; max-width:70ch; }
.variants-table__act{ width:1%; white-space:nowrap; text-align:right; }
.variants-table__act .btn{ white-space:nowrap; }

/* Схожі товари */
.woocommerce div.product .related.products,
.woocommerce section.related.products{ grid-column:1 / -1; margin-top:20px; border-top:1px solid var(--line); padding-top:36px; }
.woocommerce .related.products > h2, .woocommerce .up-sells > h2{ font-family:var(--font-display); font-size:clamp(22px,3vw,30px); color:#fff; margin-bottom:24px; }

@media (max-width:860px){
  .woocommerce div.product{ grid-template-columns:1fr; }
  .woocommerce div.product .woocommerce-product-gallery{ position:static; }
  /* внутрішні блоки мають стискатись (щоб overflow-x працював, а не розпирав сторінку) */
  .woocommerce div.product .summary,
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .woocommerce-Tabs-panel{ min-width:0; max-width:100%; }
  .variants-wrap{ max-width:100%; }
  /* спецтаблиця — стек: підпис зверху, значення знизу */
  .prod-specs, .prod-specs tbody, .prod-specs tr, .prod-specs th, .prod-specs td{ display:block; width:auto; }
  .prod-specs tr{ border-bottom:1px solid var(--line); padding:9px 0; }
  .prod-specs tr:last-child{ border-bottom:0; }
  .prod-specs th{ width:auto; white-space:normal; padding:0 0 5px; }
  .prod-specs td{ padding:0; border-bottom:0; }
  .prod-specs .spec-chip{ white-space:normal; }
}

/* Форми випуску на телефоні — картками (без горизонтального скролу) */
@media (max-width:560px){
  .variants-wrap{ border:0; background:transparent; overflow:visible; border-radius:0; }
  .variants-table{ min-width:0; }
  .variants-table thead{ display:none; }
  .variants-table, .variants-table tbody, .variants-table tr, .variants-table td{ display:block; width:auto; }
  .variants-table tr{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:12px; }
  .variants-table td{ padding:2px 0; border:0; }
  .variants-table tbody tr:last-child td{ border:0; }
  .variants-table td:first-child{ font-size:15px; font-weight:600; color:#fff; margin-bottom:6px; }
  .variants-table td:nth-child(2){ font-size:13px; }
  .variants-table td:nth-child(2)::before{ content:"Фасування: "; color:var(--tx-dim); font-family:var(--font-body); }
  .variants-table__act{ width:auto; text-align:left; margin-top:12px; }
  .variants-table__act .btn{ width:100%; }
}