/* Компактний вигляд картки товару на мобільних — менші відступи між
   "Колір/Розмір" → "Очистити" → кількість/кнопка → опис. Діє лише на
   мобільних (до 767px), десктоп не чіпаємо. */
@media (max-width: 767px) {

    /* Менший відступ під блоком свотчів (колір/розмір) */
    .single-product .vtux-swatches-wrap {
        margin: 8px 0 !important;
    }

    /* Прибираємо зайвий верхній відступ у формі "Кількість + Купити" */
    .single-product form.cart,
    .single-product .woocommerce-variation-add-to-cart {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    /* Сама кнопка "Купити" — трохи компактніша по висоті на мобільних */
    .single-product .summary button.single_add_to_cart_button,
    .single-product .summary a.single_add_to_cart_button {
        padding: 13px 20px !important;
        font-size: 15px !important;
    }

    /* Менший проміжок після блоку "Оберіть варіант товару" (плейсхолдер
       поки варіація не вибрана) і після повідомлення про недоступність */
    .woocommerce-variation,
    .woocommerce-variation-availability,
    .vtux-price-unavailable {
        margin: 4px 0 !important;
    }

    /* Опис товару під кнопкою — менший відступ зверху */
    .single-product .woocommerce-product-details__short-description,
    .single-product .entry-summary > .woocommerce-product-details__short-description {
        margin-top: 6px !important;
    }

    /* FIX (запит користувача): кнопка "Очистити" вибір варіації — була
       дрібним текстовим посиланням, легко промахнутись пальцем на
       мобільному. Збільшуємо зону натискання (padding), не змінюючи
       сам вигляд/розмір тексту помітно. */
    .single-product .reset_variations {
        display: inline-flex !important;
        align-items: center;
        padding: 8px 10px !important;
        margin: 2px -10px !important; /* компенсуємо padding, щоб текст лишився на тому ж місці */
        min-height: 36px;
        font-size: 13px !important;
    }

    /* Загальний вертикальний ритм у правій колонці картки товару —
       зменшуємо зазор між усіма прямими блоками summary */
    .single-product .summary > * {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }
}