/*
 * Volt Tech UX Pro — UX Audit Fixes (v1.1)
 * Точкові правки за аудитом мобільної версії каталогу:
 *  1) компактніша шапка на мобільному
 *  3) більші відступи між картками, щоб не було промахів пальцем
 *  4) помітніше і крупніше серце "обране"
 *  5) трохи прибираємо візуальний шум (один зелений акцент замість двох)
 *
 * v1.1: пункт 2 ("єдиний стиль кнопки — без окремого зеленого стану")
 * видалено. Зелений колір .vtux-in-cart / .vtux-added-flash — це
 * навмисний індикатор "товар вже в кошику" (див. vtux-core.css /
 * vtux-shared.css, #16a34a), а не залишковий стан, який треба ховати.
 * Цей файл більше НЕ перекриває його фірмовим градієнтом.
 *
 * Підключається останнім у черзі (після vtux-modern-trust), тому
 * не потребує довгих ланцюжків !important заради пріоритету каскаду.
 */

/* ── 1. Компактна шапка на мобільному ─────────────────────────────── */
@media (max-width: 767.98px) {
    #masthead .custom-logo,
    .site-header .custom-logo {
        max-height: 32px !important;
    }
    #masthead .col-full,
    .site-header .col-full {
        min-height: 48px !important;
        padding: 6px 12px !important;
        gap: 8px !important;
    }
    /* мовний перемикач — компактніше, без зайвого повітря */
    #vtux-lang-switcher .vtux-lang-item {
        min-width: 26px !important;
        height: 22px !important;
        padding: 0 6px !important;
        font-size: 11px !important;
    }
}

/* ── 3. Ширші відступи між картками — менше промахів пальцем ─────── */
@media (max-width: 479px) {
    .woocommerce ul.products,
    .woocommerce ul.products[class*="columns-"],
    .woocommerce-page ul.products,
    .woocommerce-page ul.products[class*="columns-"] {
        gap: 14px !important;
    }
}
@media (min-width: 480px) and (max-width: 767px) {
    .woocommerce ul.products,
    .woocommerce ul.products[class*="columns-"],
    .woocommerce-page ul.products,
    .woocommerce-page ul.products[class*="columns-"] {
        gap: 16px !important;
    }
}

/* ── 4. Крупніше й контрастніше серце "обране" на мобільному ─────── */
@media (max-width: 767px) {
    .woocommerce ul.products li.product .vt-card-actions .vt-wl-btn,
    .woocommerce-page ul.products li.product .vt-card-actions .vt-wl-btn,
    body .vt-card-actions .vt-wl-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        font-size: 17px !important;
        opacity: 1 !important;
        background: rgba(255, 255, 255, .98) !important;
        border: 1.5px solid rgba(0, 0, 0, .14) !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, .2) !important;
    }
}

/* ── 5. Менше візуального шуму: якщо є бейдж "Економія", ховаємо ─── */
/*      дублюючий зелений відтінок з інших елементів картки в цьому ж */
/*      блоці (крім самого бейджа) — залишаємо один зелений акцент.  */
.woocommerce ul.products li.product:has(.vt-price-savings) .vtux-card-freeship-badge,
.woocommerce-page ul.products li.product:has(.vt-price-savings) .vtux-card-freeship-badge {
    filter: grayscale(0.15);
}

/* ── 6. «Показ сайту як на комп'ютері» на телефоні: ховаємо нижнє ── */
/*      меню. Основний випадок (viewport = 980px у desktop-режимі)   */
/*      вже покриває @media(max-width:959.98px) у vtux-shared.css —  */
/*      меню видиме лише нижче 980. Цей блок — страховка для         */
/*      браузерів, які в режимі «як на ПК» віддають viewport трохи   */
/*      вужчий за 980px (Samsung Internet, окремі Android-збірки).   */
/*      Клас .vtux-desktop-view ставить інлайн-скрипт у wp_head      */
/*      (includes/04-popups-scripts.php): тач-екран + десктопний UA  */
/*      + ширина ≥960 = мобільний браузер у режимі «версія для ПК».  */
html.vtux-desktop-view #vt-mobile-nav,
html.vtux-desktop-view .vt-mnav-reopen,
html.vtux-desktop-view #vt-mnav-reopen,
html.vtux-desktop-view .vt-mnav-hint,
html.vtux-desktop-view .vtux-mobile-buy-fab {
    display: none !important;
}
/* нижні бари, що спираються на висоту меню (--vt-nav-h): пошук,     */
/* compare-bar, engage-popup — притискаємо до низу, як на десктопі   */
html.vtux-desktop-view {
    --vt-nav-h: 0px;
}
html.vtux-desktop-view body {
    padding-bottom: 0 !important;
}

/* ── 7. ПК: кнопка "нагору" (#vtux-scroll-top) впритул/накладалась ── */
/*      на плаваючу кнопку кошика (#vt-header-cart.vt-cart-fab) в     */
/*      правому нижньому куті екрана. Кошик на ПК (≥960px, поза       */
/*      чекаутом) закріплений: right:24px; bottom:120px; 58×58px      */
/*      (див. vtux-shared.css, блоки v5.17.70–75). Кнопка "нагору"    */
/*      рахувала відступ від низу через --vt-nav-h-live (висота       */
/*      НИЖНЬОГО МЕНЮ САЙТУ, на ПК його немає), тому просідала на     */
/*      bottom:78px — майже впритул під кошиком. Піднімаємо її чітко  */
/*      вище кошика (120 + 58 висота + 14 зазор = 192px) і вирівнюємо */
/*      по центру відносно ширшої кнопки кошика (58px) — власна       */
/*      ширина кнопки 46px, тож +6px до right для оптичного           */
/*      центрування в акуратний вертикальний стовпчик, а не внапуск.  */
@media (min-width: 960px) {
  body:not(.woocommerce-checkout) #vtux-scroll-top {
    right: 30px !important;
    bottom: 192px !important;
  }
}