/* ====================================================================
 * Kancbazar.ua — Release 9 (27.04.2026)
 * Mobile UX чекаута: сократить textarea, спрятать "Що б ви хотіли".
 *
 * На странице fastorder (Швидке замовлення) и checkout/cart на mobile:
 * 1) <textarea name="comment" rows="8"> → визуально 60px (rows нельзя править через CSS,
 *    меняем height/min-height). На desktop оставляем как есть.
 * 2) Заголовок "Що б ви хотіли зробити далі?" + длинный поясняющий
 *    текст про купоны/бонусы/доставку — спрятан. Сами поля купонов
 *    и сертификатов остаются доступны.
 * Эффект: кнопка "Оформити замовлення" поднимается выше, экран чище.
 * ====================================================================
 */

@media (max-width: 767.98px) {

    /* --- 1) Сокращаем Коментар --- */
    /* Fastorder (Швидке замовлення) */
    .oct-checkout textarea[name="comment"] {
        min-height: 60px !important;
        height: 60px !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
    /* Стандартный multi-step checkout */
    #collapse-shipping-method textarea[name="comment"],
    #collapse-payment-method textarea[name="comment"],
    .panel-body textarea[name="comment"] {
        min-height: 60px !important;
        height: 60px !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
    }

    /* --- 2) Прячем "Що б ви хотіли зробити далі?" + поясняющий абзац --- */
    /* Fastorder: <div class="oct-checkout-actions-title"> + следующий <p> */
    .oct-checkout-actions-title {
        display: none !important;
    }
    .oct-checkout-actions-title + p {
        display: none !important;
    }
    /* На случай если twig перерендерится без заголовка — режем p прямо в actions */
    .oct-checkout-actions > p.mt-3.pb-3 {
        display: none !important;
    }

    /* Cart страница: <div class="sc-cart-actions-title"> + <div class="sc-cart-actions-text"> */
    .sc-cart-actions-block .sc-cart-actions-title,
    .sc-cart-actions-block .sc-cart-actions-text {
        display: none !important;
    }
    /* Полностью убираем верхний отступ блока чтобы купоны подъехали выше */
    .sc-cart-actions-block.pt-0 {
        margin-bottom: 0 !important;
    }

    /* --- 3) Уменьшаем общий вертикальный padding actions-блока на mobile --- */
    .oct-checkout-actions {
        padding-top: 12px !important;
    }
}

/* ====================================================================
 * Bonus: на ОЧЕНЬ узких экранах (≤360px) сжимаем ещё чуть-чуть
 * ====================================================================
 */
@media (max-width: 360px) {
    .oct-checkout textarea[name="comment"],
    #collapse-shipping-method textarea[name="comment"],
    #collapse-payment-method textarea[name="comment"],
    .panel-body textarea[name="comment"] {
        min-height: 48px !important;
        height: 48px !important;
    }
}

/* ====================================================================
 * 4) DESKTOP: бейджи на странице товара ("-15%" / "новинка" / "в наявності")
 *    были font-size:10px (.fsz-10) — слишком мелкие. Увеличиваем для ≥768px.
 *    Mobile не трогаем (там размер ок относительно картинки).
 *
 * Используем МАКСИМАЛЬНУЮ специфичность чтобы перебить любую утилиту .fsz-10.
 * ====================================================================
 */
@media (min-width: 768px) {
    div.sc-product-images div.sc-module-stickers {
        gap: 8px;
    }
    div.sc-product-images div.sc-module-stickers-left {
        gap: 8px;
    }
    /* Текстовые бейджи (НЕ картинки) */
    div.sc-product-images div.sc-module-stickers div.sc-module-sticker {
        font-size: 15px !important;
        font-weight: 700 !important;
        padding: 6px 13px !important;
        line-height: 1.3 !important;
        letter-spacing: 0.3px !important;
        min-height: 28px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    /* Картинки-стикеры оставляем как есть */
    div.sc-product-images div.sc-module-stickers div.sc-module-sticker.sc-module-sticker-image {
        padding: 0 !important;
        font-size: inherit !important;
        min-height: auto !important;
    }
}
@media (min-width: 1200px) {
    div.sc-product-images div.sc-module-stickers div.sc-module-sticker {
        font-size: 16px !important;
        padding: 7px 15px !important;
        min-height: 32px !important;
    }
}