/* ============================================================
   VIDRO — сторінка колекції
   Підключається тільки на колекції, як і vidro-pdp.css на картці товару.
   ============================================================ */

.v-collection { display: block; padding-bottom: var(--sp-16); }

.v-collection__head { margin-bottom: var(--sp-4); }
.v-collection__head .v-meta { margin: var(--sp-2) 0 0; }
.v-collection__intro { max-width: 70ch; margin-bottom: var(--sp-4); }

/* Стрічка чипів прилипає під хедером — фільтри мають бути під рукою
   на будь-якій глибині скролу, а не тільки вгорі сторінки. */
.v-collection__chips {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-bg);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  border-bottom: var(--border);
}

.v-collection__applied { padding-block: var(--sp-3) 0; }
.v-collection__applied .v-chip { text-decoration: none; }

.v-collection__main { padding-top: var(--sp-4); }
.v-collection__more { margin-top: var(--sp-12); text-align: center; }

.v-collection[data-loading='true'] [data-collection-grid] { opacity: 0.5; }
[data-collection-grid] { transition: opacity var(--dur-base) var(--ease); }

/* Недоступне значення фільтра не ховаємо — приглушуємо.
   Зникаючі опції ламають розуміння так само, як зникаючі розміри. */
.v-option-row[data-empty='true'] { opacity: 0.4; }
.v-option-row[data-empty='true'] .v-option-row__box { border-style: dashed; }

.v-option-row__box--radius,
.v-option-row__box--radio { border-radius: var(--radius-pill); }

.v-facet__price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--gutter);
}

/* ---------- md ---------- */

@media (min-width: 600px) and (max-width: 1023px) {
  .v-collection__main { padding-top: var(--sp-6); }
}

/* ---------- lg: ліва колонка фільтрів 260px ---------- */

@media (min-width: 1024px) {
  .v-collection__layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--sp-12);
    align-items: start;
  }

  /* Чипи на desktop не потрібні: фільтри й так розкриті збоку */
  .v-collection__chips { display: none; }

  .v-collection__side {
    position: sticky;
    top: var(--sp-6);
  }

  /* Та сама шторка перетворюється на звичайний блок у колонці.
     Завдяки цьому інпути в темі існують в одному екземплярі. */
  .v-panel--facet {
    position: static;
    width: auto;
    max-height: none;
    height: auto;
    transform: none;
    border: 0;
    border-bottom: var(--border);
    z-index: auto;
    /* Шторки за замовчуванням приховані, поки не відкриті. Тут вони
       перестають бути шторками й мають бути видимі завжди. */
    visibility: visible;
  }
  .v-panel--facet .v-panel__head {
    padding-inline: 0;
    border-bottom: 0;
    padding-block: var(--sp-4) var(--sp-2);
  }
  .v-panel--facet .v-panel__close { display: none; }
  .v-panel--facet .v-panel__body { overflow: visible; }
  .v-panel--facet .v-option-row { padding-inline: 0; border-bottom: 0; min-height: 44px; }
  .v-panel--facet .v-facet__price { padding-inline: 0; }

  /* Кнопка «Показати N товарів» на desktop зайва: сітка вже оновилась
     на очах, натискати нема чого. Лічильник видно в підзаголовку. */
  .v-panel--facet .v-panel__foot { display: none; }
}

/* ---------- Сортування у верхньому рядку (desktop) ---------- */

@media (min-width: 1024px) {
  .v-collection__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-8);
  }

  /* Сортування тут не сайдбарний фільтр, а компактний блок праворуч:
     заголовок «Сортування» зайвий, і рамка знизу теж. */
  .v-collection__head .v-panel--facet {
    flex: 0 0 auto;
    min-width: 220px;
    border-bottom: 0;
    padding-bottom: var(--sp-2);
  }
  .v-collection__head .v-panel--facet .v-panel__head {
    padding-block: 0 var(--sp-1);
  }
  /* Сортування на desktop — рядок пігулок, а не список у чотири рядки:
     інакше воно тягне вниз заголовок і з'їдає перший екран. */
  .v-collection__head .v-panel--facet .v-panel__body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: 0;
  }
  .v-collection__head .v-option-row--pill {
    width: auto;
    min-height: 36px;
    padding: 0 var(--sp-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    font-size: var(--fs-meta);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
  }
  .v-collection__head .v-option-row--pill .v-option-row__box { display: none; }
  .v-collection__head .v-option-row--pill:has(input:checked) {
    background: var(--color-btn);
    border-color: var(--color-btn);
    color: var(--color-on-btn);
  }
}

/* ---------- Повзунок ціни ---------- */
/* Власник: «фільтр ціни має бути повзунком, як на розетці».
   Повзунок — надбудова над двома полями, тому займає цілий рядок сітки
   над ними, а не місце одного з них. */

.v-price-slider {
  grid-column: 1 / -1;
  display: block;
  margin-bottom: var(--sp-2);
}

/* Гістограма над повзунком (як у Rozetka): стовпчик = скільки товарів
   у цьому відрізку цін. Поза обраним діапазоном — світлі. Без тіней і
   градієнтів — лише два плоскі кольори з токенів. */
.v-price-slider__chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 56px;
  margin-inline: 11px; /* під центри ручок, як і доріжка */
  border-bottom: var(--border);
}
.v-price-slider__bar {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-ink);
  transition: background-color var(--dur-fast) var(--ease);
}
.v-price-slider__bar[data-out] { background: var(--color-line); }

.v-price-slider__range {
  position: relative;
  height: 34px;
}

.v-price-slider__track {
  position: absolute;
  inset-inline: 11px; /* половина ручки: доріжка має починатись під її центром */
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: var(--color-line);
}
.v-price-slider__fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--color-ink);
}

/* Обидві доріжки прозорі й накладені одна на одну — клікабельні лише
   ручки, інакше верхній повзунок перехоплював би всі натискання і
   нижню ручку неможливо було б узяти. */
.v-price-slider__handle {
  position: absolute;
  inset-inline: 0;
  top: 0;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.v-price-slider__handle:focus { outline: none; }

.v-price-slider__handle::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-bg);
  cursor: grab;
}
.v-price-slider__handle::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-bg);
  cursor: grab;
}
.v-price-slider__handle:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--color-line); }
.v-price-slider__handle:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--color-line); }

/* ============================================================
   WordPress-версія: доповнення
   ============================================================ */

/* Хлібні крихти теми — список <ol>, а не рядок посилань. */
.v-collection .v-breadcrumbs ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.v-collection .v-breadcrumbs li + li::before { content: '/'; padding-inline: var(--sp-1); }

.v-collection__intro p { margin: 0 0 var(--sp-2); }

/* Лічильник біля опції не має переноситись під підпис на вузькій шторці. */
.v-option-row__label { min-width: 0; }
.v-option-row { cursor: pointer; }
.v-option-row input:disabled ~ * { cursor: default; }
.v-option-row input:focus-visible + .v-option-row__box { outline: 2px solid var(--color-ink); outline-offset: 2px; }

/* Галочка розміру (ТЗ §5.2 ⚑): стан на :checked інпута — див. vidro-components.css §11.
   Тут лише гарантуємо, що квадратик не зникне на desktop у сайдбарі. */
.v-panel--facet .v-option-row__box { visibility: visible; }

/* Чип на mobile: число обраних не переноситься. */
.v-collection__chips .v-chip [data-chip-count] { white-space: nowrap; }

/* «Показати ще» + скільки вже показано */
.v-collection__progress { margin: 0 0 var(--sp-3); }
.v-collection__more .v-btn[aria-busy='true'] { opacity: 0.6; pointer-events: none; }

.v-collection .v-notice { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }

/* Порожній стан */
.v-collection__empty .v-empty { padding-block: var(--sp-8); }
.v-collection__empty-cta { margin-top: var(--sp-4); }
.v-collection__dym { margin-top: var(--sp-3); }
.v-collection__try { margin: var(--sp-6) 0 0; }
.v-collection__suggest { justify-content: center; flex-wrap: wrap; overflow: visible; }
.v-collection__suggest .v-chip { text-decoration: none; }
.v-collection__maybe { margin: var(--sp-8) 0 var(--sp-4); }

/* Сторінка пошуку без запиту */
.v-collection__searchform {
  display: flex;
  gap: var(--sp-2);
  max-width: 640px;
  margin-top: var(--sp-6);
}
.v-collection__searchform .v-input { flex: 1 1 auto; min-width: 0; font-size: 16px; }
.v-collection__searchform + .v-collection__try { text-align: left; }
.v-collection > .v-collection__suggest { justify-content: flex-start; }

/* Ціни в шторці: поля в 16px, інакше iOS зумить сторінку. */
.v-facet__price .v-input { font-size: 16px; width: 100%; }

@media (max-width: 1023px) {
  /* Шторка фільтра на телефоні: кнопка «Показати N товарів» завжди видна внизу. */
  .v-panel--facet .v-panel__body { overscroll-behavior: contain; }
}

@media (min-width: 1024px) {
  /* Сайдбар довший за екран не має «застрягати» під sticky: прокручується сам. */
  .v-collection__side {
    max-height: calc(100vh - var(--sp-12));
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: var(--sp-2);
  }
  /* Без фільтрів (пошук без збігів) — сітка на всю ширину, без порожньої колонки. */
  .v-collection__layout--bare { display: block; }

  .v-panel--facet .v-facet__body--rozmir {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-block: var(--sp-1) var(--sp-3);
  }
  /* Розміри на desktop — компактні пігулки з видимою галочкою-заливкою. */
  .v-panel--facet .v-facet__body--rozmir .v-option-row {
    width: auto;
    min-height: 40px;
    padding: 0 var(--sp-3);
    gap: var(--sp-2);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
  }
  .v-panel--facet .v-facet__body--rozmir .v-option-row__box { width: 18px; height: 18px; font-size: 11px; }
  .v-panel--facet .v-facet__body--rozmir .v-option-row__count { display: none; }
  .v-panel--facet .v-facet__body--rozmir .v-option-row:has(input:checked) { border-color: var(--color-ink); }

  .v-collection__main { padding-top: 0; }
}

/* Телефон: SEO-опис категорії не має відсувати товари за перший екран —
   три рядки, тап розгортає повністю (vidro-filters.js). */
@media (max-width: 599px) {
  .v-collection__intro:not([data-expanded]) {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
  }
  .v-collection__intro p { display: inline; }
}