/**
 * Volt Tech UX Pro — vtux-large-screens.css (ВИПРАВЛЕНА ВЕРСІЯ)
 * Ноутбук / ПК / ТВ. Замінює однойменний файл у assets/css/.
 *
 * ЩО ВИПРАВЛЕНО ПРОТИ ОРИГІНАЛУ:
 *  1. repeat(N, 1fr) -> repeat(N, minmax(0, 1fr)) у сітці товарів.
 *     1fr == minmax(auto, 1fr); auto-мінімум треку дорівнює внутрішній
 *     ширині картки, тому сітка вилазила за контейнер і остання
 *     колонка обрізалась краєм в'юпорта. minmax(0,1fr) знімає це.
 *  2. Синхронізовано min-height заголовка з -webkit-line-clamp.
 *  3. Додано рівень ТВ (>=2560px) з фокус-кільцем для пульта.
 *  4. Контейнер прив'язано до 100vw, щоб не з'являвся гориз. скрол.
 */

:root { --vt-container-w: 1360px; --vt-card-lines: 2; --vt-card-lh: 1.4; }
@media (min-width: 1440px) { :root { --vt-container-w: 1420px; } }
@media (min-width: 1600px) { :root { --vt-container-w: 1560px; } }
@media (min-width: 1920px) { :root { --vt-container-w: 1720px; } }
@media (min-width: 2560px) { :root { --vt-container-w: 2000px; } }

/* Контейнер ніколи не ширший за в'юпорт мінус смуга прокрутки. */
@media (min-width: 1024px) {
  body .col-full,
  body .woocommerce > .col-full {
    max-width: min(var(--vt-container-w), calc(100vw - 32px)) !important;
    margin-inline: auto !important;
  }
}

/* ── Шапка ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  body #masthead, body header.site-header { position: sticky; top: 0; z-index: 1000; }

  body #vt-account-mini.vt-am-mounted,
  body #vtux-lang-switcher.vtux-lang-mounted,
  body .site-header-cart { flex: 0 0 auto !important; margin: 0 !important; }

  body #vtux-lang-switcher:not(.vtux-lang-mounted) { visibility: hidden !important; }

  /* Ховаємо ЧУЖІ перемикачі мови. Додано GTranslate і TranslatePress,
     яких не було в оригіналі — саме тому UA/RU дублювались. */
  body:has(#vtux-lang-switcher.vtux-lang-mounted) .site-header .wpml-ls,
  body:has(#vtux-lang-switcher.vtux-lang-mounted) .site-header .widget_polylang,
  body:has(#vtux-lang-switcher.vtux-lang-mounted) .site-header .pll-parent-menu-item,
  body:has(#vtux-lang-switcher.vtux-lang-mounted) .gtranslate_wrapper,
  body:has(#vtux-lang-switcher.vtux-lang-mounted) .gt_switcher_wrapper,
  body:has(#vtux-lang-switcher.vtux-lang-mounted) .trp-language-switcher {
    display: none !important;
  }
  /* Другий екземпляр з тим самим id — теж геть. */
  body #vtux-lang-switcher ~ #vtux-lang-switcher { display: none !important; }
}

/* ── Популярні категорії ───────────────────────────────── */
@media (min-width: 1024px) {
  .vtux-popular-cats { display: block !important; }
  .vtux-pc-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    overflow: visible !important;
    gap: 10px !important;
  }
  .vtux-pc-card { min-width: 0 !important; max-width: none !important; }
}
@media (min-width: 1366px) { .vtux-pc-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; } }
@media (min-width: 1600px) { .vtux-pc-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; } }

/* ── Сітка товарів ─────────────────────────────────────── */
@media (min-width: 1024px) {
  .woocommerce ul.products { min-width: 0 !important; }
  .woocommerce ul.products li.product { min-width: 0 !important; }
}
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 1440px) and (max-width: 1919.98px) {
  .woocommerce ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (min-width: 1920px) and (max-width: 2559.98px) {
  .woocommerce ul.products { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
@media (min-width: 2560px) {
  .woocommerce ul.products { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
}

/* ── Заголовок картки: clamp і min-height з однієї формули ─
   Раніше min-height перевизначався по брейкпоінтах (2.8em -> 3em),
   а line-clamp і line-height лишались старими. Висота коробки
   переставала збігатись з висотою двох рядків, третій рядок
   пролазив під ціну. Тепер обидва значення рахуються з змінних. */
@media (min-width: 1024px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: var(--vt-card-lines) !important;
    line-clamp: var(--vt-card-lines) !important;
    line-height: var(--vt-card-lh) !important;
    min-height: calc(var(--vt-card-lines) * var(--vt-card-lh) * 1em) !important;
    max-height: calc(var(--vt-card-lines) * var(--vt-card-lh) * 1em) !important;
    overflow: hidden !important;
  }
}

/* ── Рівень ТВ: перегляд з 2-3 метрів, керування пультом ── */
@media (min-width: 2560px) {
  html { font-size: 20px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1rem !important; }
  .woocommerce ul.products li.product .price { font-size: 1.35rem !important; }
  .woocommerce ul.products li.product .button { min-height: 60px !important; font-size: 1rem !important; }
}

/* Пульт (D-pad) рухає саме фокус. Без видимого кільця навігація сліпа.
   :focus-visible не спрацьовує на мишу, тож десктопу це не заважає. */
@media (min-width: 1920px) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  .woocommerce ul.products li.product a:focus-visible {
    outline: 4px solid #ff7a00 !important;
    outline-offset: 3px !important;
    border-radius: 6px;
  }
}