/* ===================== ZF Single — trimmed ===================== */

/* Грид контейнера */
.zf-single__grid{
  display:grid;
  grid-template-columns: minmax(460px, 1.2fr) minmax(380px, 1fr);
  gap:24px;
  margin:0 0 32px;
  text-align:left;
}

@media (max-width: 768px){
  .zf-single__grid{ grid-template-columns: 1fr; }
}

/* --------------------- Галерея: сцена + превью --------------------- */
.zf-gallery{
  background:#f7faf7;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  min-height:460px;
  padding:12px;
  display:grid;
  grid-template-columns: 1fr 120px;
  gap:12px;
  align-items:start;
}

.zf-stage{
  position:relative;
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:420px;
}

.zf-photo{
  display:none;
  max-width:100%;
  height:auto;
  object-fit:contain;
}
.zf-photo.is-visible{ display:block; }

.zf-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.1);
  width:36px;
  height:36px;
  border-radius:50%;
  font-size:22px;
  line-height:32px;
  cursor:pointer;
}
.zf-prev{ left:10px; }
.zf-next{ right:10px; }
.zf-nav:hover{ background:#fff; }

.zf-thumbs{
  display:grid;
  gap:8px;
  align-content:start;
  overflow-y:auto;
  overflow-x:hidden;
  max-height:100%;
}
.zf-thumb{
  width:100%;
  height:72px;
  object-fit:cover;
  border-radius:6px;
  opacity:.7;
  cursor:pointer;
  display:none;
}
.zf-thumb.is-active{
  outline:3px solid rgba(1,73,22,.25);
  opacity:1;
}

/* Превью под сценой на узких экранах */
@media (max-width: 900px){
  .zf-gallery{ grid-template-columns: 1fr; }
  .zf-thumbs{
    grid-template-columns: repeat(auto-fill, minmax(72px,1fr));
    grid-auto-rows:72px;
  }
}

/* --------------------------- Таблица --------------------------- */
:root{
  --zf-accent: #1b6e2b;
  --zf-accent-bg: #e6f4ea;
  --zf-accent-ring: rgba(27,110,43,.28);
}

.zf-row{
  display:grid;
  grid-template-columns: 1fr 110px 150px 130px; /* актуальная ширина колонок */
  align-items:center;
  gap:14px;
  padding:12px 14px;
  background:#f9faf9;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  cursor:pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .02s, border-color .15s ease;
}
.zf-row:hover{
  background:#f0f7f2;
  border-color: rgba(27,110,43,.18);
  box-shadow: 0 2px 10px rgba(27,110,43,.06);
}
.zf-row.is-active{
  background: var(--zf-accent-bg);
  border-color: var(--zf-accent);
  box-shadow: 0 0 0 3px var(--zf-accent-ring), inset 0 0 0 1px var(--zf-accent);
  outline: none;
}
.zf-row:focus-within{
  background:#edf8ef;
  box-shadow: 0 0 0 3px var(--zf-accent-ring);
  border-color: var(--zf-accent);
}
.zf-row--head{
  font-weight:800;
  background:#e8f3e8;
  cursor:default;
}
.zf-row--head:hover{ background:#e8f3e8; }

/* табличные цифры для второй колонки (цены/объёмы) */
.zf-row > :nth-child(2){
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px){
  .zf-row{ grid-template-columns: 1fr 95px 1fr 120px; }
}

/* --------------------------- Кнопки --------------------------- */
.zf-btn{
  background:#2e7d32;
  color:#fff;
  border:none;
  border-radius:28px;
  padding:10px 18px;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(46,125,50,.18);
  transition:background .15s ease, transform .06s ease, box-shadow .15s ease;
}
.zf-btn:hover{ background:#1f5a22; box-shadow:0 8px 18px rgba(31,90,34,.22); }
.zf-btn:active{ transform:translateY(1px); box-shadow:0 5px 12px rgba(31,90,34,.20); }
.zf-btn[disabled]{ opacity:.55; box-shadow:none; cursor:not-allowed; }

/* чуть выразительнее кнопки в активной строке */
.zf-row.is-active .zf-btn{
  box-shadow:0 8px 18px rgba(27,110,43,.25);
}

/* ------------------------ Qty control (pill) ------------------------ */
.zf-qty{
  --qty-h: 40px;
  --qty-r: 14px;
  --qty-bd: rgba(1,73,22,.25);
  --qty-focus: rgba(46,125,50,.25);
  display:inline-flex;
  align-items:center;
  height:var(--qty-h);
  border:1.8px solid var(--qty-bd);
  border-radius:var(--qty-r);
  background:#fff;
  padding:0 6px;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.02);
  width:auto;
  min-width:120px;
  justify-content:center;
}

.zf-qty .qty{
  width:72px;
  height:calc(var(--qty-h) - 8px);
  margin:0 6px;
  text-align:center;
  padding:0 6px;
  border:0;
  border-radius:10px;
  background:#fff;
  font-weight:700;
  color:#2d432e;
  outline:none;
}
.zf-qty .qty:focus{ box-shadow:0 0 0 3px var(--qty-focus); }

/* скрываем нативные стрелки */
.zf-qty .qty::-webkit-outer-spin-button,
.zf-qty .qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.zf-qty .qty[type=number]{ -moz-appearance:textfield; }

.zf-qty__btn{
  width:34px; height:34px;
  display:inline-grid; place-items:center;
  border-radius:10px;
  border:0;
  background:#e8f3e8;
  color:#1f5a22;
  font-weight:800;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:transform .06s ease, background .15s ease, box-shadow .15s ease;
}
.zf-qty__btn:hover{ background:#dff0df; }
.zf-qty__btn:active{ transform:translateY(1px); }
.zf-qty__btn:disabled{ opacity:.5; cursor:not-allowed; }

.zf-qty:focus-within{
  border-color:#2e7d32;
  box-shadow:0 0 0 3px rgba(46,125,50,.12);
}

@media (max-width: 640px){
  .zf-qty{ --qty-h: 36px; --qty-r: 12px; }
  .zf-qty .qty{ width:64px; }
  .zf-qty__btn{ width:32px; height:32px; }
}
/* === FIX: стабильная сцена, без прыжков === */

/* растянуть обе колонки галереи по высоте одной строки */
.zf-gallery{ align-items: stretch !important; }

/* сцена: фиксированная пропорция, без min-height и flex */
.zf-gallery .zf-stage{
  position: relative !important;
  aspect-ratio: 4 / 3;                 /* выбери 4/3 или 3/4/1/1 */
  max-height: min(72vh, 820px);        /* ограничитель по экрану */
  height: auto !important;             /* высоту задаёт aspect-ratio */
  display: block !important;           /* перебиваем прежний flex */
  min-height: 0 !important;            /* перебиваем старый min-height */
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
}

/* фото: все в одной «стопке», видно только активное */
.zf-gallery .zf-stage .zf-photo{
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;                  /* без обрезки; хочешь — поставь cover */
  display: block !important;            /* не скрываем display:none */
  opacity: 0;
  transition: opacity .18s ease;
}
.zf-gallery .zf-stage .zf-photo.is-visible{ opacity: 1; }

/* колонка превью: без дёрганья от появления скроллбара */
.zf-thumbs{
  overflow-y: auto !important;
  scrollbar-gutter: stable;             /* резерв под полосу прокрутки */
}
/* Повідомлення "немає фото" поверх сцени */
.zf-no-photo{
  position:absolute; left:0; right:0; top:0; bottom:0;
  width:100%; height:100%; z-index:10;
  display:none; align-items:center; justify-content:center;
  background:#fff; color:#0f4e19; font-weight:800;
  text-align:center; padding:24px; border-radius:8px;
}
.zf-no-photo.is-visible{ display:flex; }
.zf-nav.is-disabled{ opacity:.3; pointer-events:none; }
#zf-gallery.zf-gallery--empty #zf-thumbs{ visibility:hidden; }
/* --- Грид для галереи: левая колонка + колонка превью --- */
#zf-gallery{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px; /* minmax(0,1fr) чтобы не распирало */
  grid-template-rows: auto auto;               /* сцена + примітка */
  gap: 12px;
  align-items: start;
  min-width: 0;                                /* не расширять контейнер */
}

/* сцена строго в левой колонке, в первой строке */
#zf-gallery .zf-stage{
  grid-column: 1 / 2 !important;
  grid-row: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;                                /* ВАЖНО: позволит сжиматься */
  overflow: hidden;
  position: relative;                          /* база для оверлеев */
}

/* превью в правой колонке, на две строки */
#zf-gallery #zf-thumbs{
  grid-column: 2 / 3 !important;
  grid-row: 1 / 3;
  min-width: 0;                                /* тоже не распираем */
  overflow-y: auto;
  overflow-x: hidden;
}

/* примітка только под сценой, в левой колонке */
#zf-gallery .zf-gallery-note{
  grid-column: 1 / 2 !important;
  grid-row: 2;
}

/* оверлей "Немає фотографій..." всегда в пределах сцены */
#zf-gallery .zf-no-photo{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5px;
  pointer-events: none;
}
/* ==================== MOBILE (≤768px) для [zf_product_gallery_table] ==================== */
@media (max-width:768px){

  /* 1) Контейнер сторінки товару — одна колонка */
  .zf-single__grid{
    grid-template-columns:1fr !important;
    gap:16px;
  }

  /* 2) Галерея: велике фото зліва + вертикальні прев’ю справа */
  .zf-gallery{
    grid-template-columns: minmax(0,1fr) 84px !important; /* сцена + вузька колонка прев’ю */
    align-items:stretch;
    gap:8px;
    padding:10px;
    border-radius:12px;
  }
  .zf-stage{
    min-height:58vw;                 /* робить велику сцену (адаптивно від ширини екрану) */
    display:flex; align-items:center; justify-content:center;
  }
  .zf-photo{
    width:100%; height:100%;
    object-fit:contain;              /* фото не обрізається */
  }
  .zf-thumbs{
    display:flex; flex-direction:column;
    gap:6px;
    overflow-y:auto; overflow-x:hidden;
    max-height:100%;
    -webkit-overflow-scrolling:touch;
  }
  .zf-thumb{
    display:block;
    width:100%; height:64px;         /* однакові плитки прев’ю */
    object-fit:cover;
    border-radius:8px;
  }
  .zf-gallery-note{
    grid-column:1 / -1;
    font-size:13px; line-height:1.35;
    margin-top:6px;
  }

  /* 3) Таблиця розмірів — компактні «картки» */
  .zf-table{ display:grid; gap:10px; }
  .zf-row--head{ display:none !important; } /* шапка на мобайлі не потрібна */

  .zf-row{
    grid-template-columns: 1fr auto; /* зліва — назва розміру, справа — ціна */
    gap:8px;
    padding:12px;
    border-radius:16px;
  }
  .zf-row > :first-child{ min-width:0; word-break:break-word; }
  .zf-row > :nth-child(2){
    justify-self:end; text-align:right; line-height:1.15;
  }
  /* стара/нова ціна блоками (якщо є del/ins) */
  .zf-row > :nth-child(2) del{
    display:block; opacity:.7; font-size:13px; margin-bottom:2px;
  }
  .zf-row > :nth-child(2) ins{
    display:block; text-decoration:none; font-weight:800; font-size:16px;
  }

  /* кількість і кнопка — на всю ширину нижче */
  .zf-row > :nth-child(3),
  .zf-row > :nth-child(4){ grid-column:1 / -1; }
  .zf-qty{ width:100%; justify-content:center; margin:6px 0 2px; }
  .zf-btn{ width:100%; padding:12px 18px; font-size:15px; }

  /* Ряд «Переглянути» (data-size="*") — простіший вигляд */
  .zf-row[data-size="*"] > :nth-child(2),
  .zf-row[data-size="*"] > :nth-child(3){ display:none; }
}

/* Дуже вузькі екрани */
@media (max-width:380px){
  .zf-gallery{ grid-template-columns:minmax(0,1fr) 76px !important;}
  .zf-thumb{ height:56px; }
  .zf-stage{ min-height:62vw; }      /* ще трохи більша сцена */
}
/* ================= MOBILE FIXES ================= */
@media (max-width:768px){

  /* 1) Кнопка «Купити» не на всю ширину, а адаптивна */
  .zf-row .zf-btn{
    width:auto;
    min-width:120px;
    align-self:center;
    justify-self:center;
    padding:10px 20px;
    font-size:14px;
  }

  /* 2) Лічильник кількості — не розтягується */
  .zf-qty{
    max-width:150px;   /* обмежуємо, щоб не вилазив */
    margin:6px auto 2px;
  }

  /* 3) Ряд «Переглянути» — кнопка не перекриває текст */
  .zf-row[data-size="*"]{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:6px;
  }
  .zf-row[data-size="*"] > div:first-child{
    font-weight:600;
    margin-bottom:4px;
  }
  .zf-row[data-size="*"] .zf-btn--ghost{
    width:auto;
    margin:0 auto;
  }
}
@media (max-width:768px){
  main.wp-block-group.alignwide{
    --wp--style--root--padding-left: 10px !important;
    --wp--style--root--padding-right: 10px !important;
  }
}
/* === Lightbox для галереи === */
#zf-lightbox{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.9);
  display:none; align-items:center; justify-content:center;
}
#zf-lightbox.is-open{ display:flex; }
#zf-lightbox img{
  max-width:95vw; max-height:90vh;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
#zf-lightbox .zf-lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
  display:grid; place-items:center; font-size:22px; cursor:pointer;
  transition:background .15s ease;
}
#zf-lightbox .zf-lb-btn:hover{ background:rgba(255,255,255,.2); }
#zf-lightbox .zf-lb-prev{ left:18px; }
#zf-lightbox .zf-lb-next{ right:18px; }
#zf-lightbox .zf-lb-close{
  position:absolute; top:14px; right:14px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
  display:grid; place-items:center; font-size:20px; cursor:pointer;
}
body.zf-no-scroll{ overflow:hidden; }
/* ==== MOBILE: прибрать фіксовану висоту галереї та зайвий простір під нотаткою ==== */
/* ==== MOBILE: фикс «пузыря» + нормальная высота сцены ==== */
@media (max-width:768px){
  /* 1) Контейнер галереи не имеет фиксированного минимума */
  #zf-gallery,
  .zf-gallery{
    min-height: 0 !important;
    height: auto !important;
    align-items: start !important;
    grid-auto-rows: auto;
  }

  /* 2) Сцена снова с высотой (большое фото видно) */
  #zf-gallery .zf-stage{
    /* адаптивная высота: не меньше 220px, обычно ~58vw, но не выше 70vh */
    min-height: clamp(220px, 58vw, 70vh) !important;
    height: auto !important;       /* пусть растёт от контента */
    position: relative;            /* на всякий случай */
  }

  /* 3) Превью — только первая строка, со скроллом */
  #zf-gallery #zf-thumbs{
    grid-row: 1 !important;
    align-self: start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* плавный скролл на iOS */
    max-height: none;                  /* высоту задаст JS через syncThumbsHeight() */
  }

  /* 4) Нотатка — отдельной второй строкой без растяжения */
  #zf-gallery .zf-gallery-note{
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: start;
    margin-bottom: 0;
  }
}
/* ================= DESKTOP: без «растяжения до таблицы» ================= */
@media (min-width:769px){
  /* галерея больше не тянется по высоте таблицы */
  #zf-gallery,
  .zf-gallery{
    align-self: start !important;   /* не растягивать контейнер */
    min-height: 0 !important;       /* перебиваем старые 460px и т.п. */
    height: auto !important;
    align-items: start !important;
    grid-auto-rows: auto;
  }

  /* сцена — фиксируем адекватный минимум, чтобы большое фото было видно */
  #zf-gallery .zf-stage{
    min-height: clamp(320px, 38vw, 78vh) !important;
    height: auto !important;
    position: relative;
  }

  /* превью — только первый ряд гріда, со скроллом; не растягивают ряд примітки */
  #zf-gallery #zf-thumbs{
    grid-row: 1 !important;
    align-self: start;
    overflow-y: auto;
    max-height: none;                /* высоту синхронизирует JS */
    -webkit-overflow-scrolling: touch;
  }

  /* примітка — отдельным вторым рядом, не растягивается по высоте */
  #zf-gallery .zf-gallery-note{
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: start;
    margin-top: 8px;
    margin-bottom: 0;
  }
}