/* ============================================================
   VIDRO — головна: hero, категорійні плитки, футер
   ============================================================ */

/* ---------- Hero ---------- */

.v-hero { padding-block: var(--sp-6) var(--sp-8); }
.v-hero__line { display: block; }
.v-hero__tagline { max-width: 42ch; margin: var(--sp-4) 0 0; }

/* Кнопка до бестселерів — рішення для mobile: перший екран інакше не
   містить ані товару, ані ціни, а сеанс триває 44 секунди. */
.v-hero__cta { margin-top: var(--sp-6); width: 100%; }

.v-hero__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  margin-top: var(--sp-8);
}
.v-hero__tile { aspect-ratio: var(--ratio-product); overflow: hidden; }
.v-hero__tile img { width: 100%; height: 100%; object-fit: cover; }
.v-hero__placeholder { display: block; width: 100%; height: 100%; background: var(--color-surface); }

@media (min-width: 1024px) {
  .v-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
    align-items: center;
    padding-block: var(--sp-12) var(--sp-16);
  }
  .v-hero__tiles { margin-top: 0; }

  /* Зсув другої плити — фірмовий прийом нинішньої головної */
  .v-hero__tile:last-child { margin-top: var(--sp-16); }

  /* Аудит: «на desktop лише заголовок і два фото, жодної дії».
     Кнопку лишаємо, але по ширині напису — на всю колонку вона на
     великому екрані виглядала б як банер, а не як заклик. */
  .v-hero__cta { width: auto; align-self: flex-start; }
}

/* ============================================================
   WooCommerce-версія: доповнення до стилів головної.
   Файл підключається на всіх сторінках (inc/modules/content-pages.php):
   пошук-оверлей, відгуки й стрічки живуть не лише на головній.
   ============================================================ */

/* ---------- Hero: на desktop усе велике, без порожнього поля справа ---------- */

@media (min-width: 1024px) {
  .v-hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-8); }
  .v-hero__tiles { gap: var(--grid-gap); }
}

/* ---------- «Що шукаєте» ---------- */

.v-home-tiles .v-railwrap { margin-top: var(--sp-6); display: block; }
.v-home-tiles .v-tiles--rail { margin-top: 0; }
@media (min-width: 1024px) { .v-tile__title { font-size: 26px; } }

/* ---------- Стрічка: «Дивитись усі» ---------- */

.v-rail__more { margin: var(--sp-4) 0 0; font-size: var(--fs-meta); }
vidro-rail { display: block; }

/* ---------- Відгуки ---------- */

/* Відео покупця — та сама клітинка 4:5, що й фото, щоб стрічка не стрибала. */
.v-review__video { width: 100%; aspect-ratio: var(--ratio-product); object-fit: cover; background: var(--color-ink); display: block; }

/* Сторінка «Відгуки»: сітка замість стрічки. */
.v-reviews__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) var(--grid-gap);
  margin-top: var(--sp-6);
}
@media (min-width: 768px)  { .v-reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .v-reviews__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v-reviews--page { margin-top: 0; }
.v-reviews--page .v-review__text { font-size: var(--fs-meta); }

/* ---------- Пошук-оверлей ---------- */

.v-search__label { margin: var(--sp-6) 0 var(--sp-2); }
.v-search__all { margin: var(--sp-6) 0 0; }
.v-search__empty + .v-chips { margin-bottom: var(--sp-6); }
.v-search__fallback-title { margin: 0 0 var(--sp-2); }

/* ---------- Текстові сторінки ---------- */

.v-page .v-display--cat,
.v-blog .v-display--cat,
.v-article .v-display--cat { overflow-wrap: anywhere; }
.v-faq .v-accordion { margin-top: var(--sp-6); }
.v-contact .v-display--section { margin-bottom: var(--sp-6); }
.v-page--reviews { padding-bottom: 0; }
.v-charity { margin-top: 0; }
.v-charity__grid { margin-top: var(--sp-6); }
.v-saved__grid { margin-top: var(--sp-6); }
.v-article__cover { max-width: 700px; width: 100%; height: auto; margin-bottom: var(--sp-6); }
.v-page__body .v-btn { text-decoration: none; }

/* Товари, про які йдеться в статті журналу: ряд із трьох фото 4:5 одразу після абзацу. */
.v-page__body .v-article__shop {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: var(--sp-6) 0;
}
.v-page__body .v-article__shop img { margin: 0; width: 100%; aspect-ratio: var(--ratio-product); object-fit: cover; }