.header-custom-block {
    padding-top: 5px;
    line-height: 1.4;
}

.header-instagram a {
    color: #E1306C !important; /* Фірмовий колір Instagram */
    font-weight: 700;
    font-size: 16px;
    text-decoration: none !important;
    transition: opacity 0.2s;
}

.header-instagram a:hover {
    opacity: 0.8;
}

.header-instagram i {
    font-size: 18px;
    margin-right: 4px;
    vertical-align: middle;
}

.header-schedule {
    font-size: 12px;
    color: #777;
    margin-top: 2px;
}

.header-schedule i {
    margin-right: 3px;
}

/* Прибираємо старий відступ для іконки кошика, якщо вона занадто близько */
.col-md-push-5 + .col-md-1 {
    padding-left: 10px;
}


/* Робимо панель легкою та чистою */
nav#top {
    background: #f8f9fa !important; /* Дуже світлий сірий, майже білий */
    border-bottom: 1px solid #e9ecef !important;
    padding: 4px 0 !important;
    min-height: 38px !important;
}

/* Налаштування посилань зліва */
#top-links ul {
    margin: 0 !important;
    padding: 0 !important;
}

#top-links li a {
    font-size: 12px !important;
    color: #6c757d !important; /* Стриманий сірий колір */
    font-weight: 500 !important;
    text-transform: none !important; /* Повертаємо звичайний регістр */
    padding: 0 15px !important;
    border-right: 1px solid #dee2e6 !important;
    transition: all 0.2s ease !important;
}

#top-links li:last-child a {
    border-right: none !important;
}

#top-links li a:hover {
    color: #A29BFE !important; /* М'який бузковий акцент */
    text-decoration: none !important;
}

/* Кнопки вибору мови та кабінету */
#top .pull-right .btn-link {
    font-size: 12px !important;
    color: #495057 !important;
    background: transparent !important;
    border: none !important;
    padding: 4px 12px !important;
    font-weight: 500 !important;
}

#top .pull-right .btn-link:hover {
    color: #A29BFE !important;
}

/* Тонкі іконки */
#top i {
    font-size: 13px !important;
    opacity: 0.8 !important;
    margin-right: 4px !important;
}

-----
категорія
------
/* 1. Основний контейнер панелі */
.product-filter {
    display: flex !important;
    justify-content: flex-end !important; /* Зміщуємо все вправо для легкості */
    align-items: center !important;
    gap: 20px !important;
    padding: 10px 0 !important;
    background: transparent !important;
    border: none !important;
    margin-bottom: 20px !important;
}

/* 2. Стиль випадаючих списків (Select) */
#input-sort, #input-limit {
    border: 1px solid #efebff !important;
    border-radius: 15px !important; /* Більш округлі форми */
    background: #ffffff !important;
    height: 38px !important;
    padding: 0 15px !important;
    color: #555 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 6px rgba(162, 155, 254, 0.05) !important;
}

/* 3. Текст та іконки (Сортувати/Показати) */
.input-group-addon {
    background: transparent !important;
    border: none !important;
    color: #A29BFE !important; /* Бузковий Candy колір */
    font-weight: 600 !important;
    font-size: 13px !important;
    padding-right: 8px !important;
}

/* Іконки (fa-sort, fa-eye) */
.input-group-addon i {
    color: #A29BFE !important;
    opacity: 0.7 !important;
}

/* 4. Ефекти при взаємодії */
#input-sort:hover, #input-limit:hover {
    border-color: #F06292 !important; /* Рожевий при наведенні */
    box-shadow: 0 4px 10px rgba(240, 98, 146, 0.1) !important;
}

#input-sort:focus, #input-limit:focus {
    outline: none !important;
    border-color: #F06292 !important;
}

/* 5. Прибираємо зайві розділювачі (лінії HR) */
.product-filter + hr, hr {
    border-top: 1px solid #f8f8ff !important;
}

-----
категорія товар
-----
/* ==========================================================
   1. ПОВНЕ ПРИХОВУВАННЯ ЗАЙВОГО (Без змін)
   ========================================================== */
/* ==========================================================
   1. ЗАГАЛЬНА СІТКА (Виправляє дірки та зсуви)
   ========================================================== */
.products-block .row, 
#content .row { 
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

/* Прибираємо розпірки Bootstrap, які ламають Flexbox */
.products-block .row:before, 
.products-block .row:after,
#content .row:after,
#content .row:before {
    display: none !important;
}

.product-layout {
    float: none !important; /* КРИТИЧНО: прибираємо float, щоб працював flex */
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 20px !important;
}

/* Приховуємо зайве */
.product-thumb .button-group button:not(.add_to_cart),
.product-thumb .wishlist,
.product-thumb .compare,
.product-thumb .rating,
.product-thumb .description,
.product-thumb .caption p:not(.price) {
    display: none !important;
}

/* ==========================================================
   2. ДИЗАЙН КАРТКИ (Твої стилі)
   ========================================================== */
.product-thumb {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; 
    padding: 15px !important;
    transition: transform 0.3s ease !important;
    width: 100% !important;
    margin: 0 !important;
}

.product-thumb:hover {
    transform: translateY(-5px);
}

.product-thumb .caption {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; /* Штовхає ціну та кнопку вниз */
}

/* Картинка */
.product-thumb .image {
    padding: 10px !important;
    margin-bottom: 10px !important;
}

/* Назва товару */
.product-thumb h4 {
    margin: 10px 0 !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-thumb h4 a {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #2d3436 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}

/* Ціна */
.product-thumb .price {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #6c5ce7 !important;
    margin: auto 0 15px !important; /* 'auto' зверху притискає до низу */
    text-align: center !important;
}

/* ==========================================================
   3. КНОПКИ (Твій дизайн)
   ========================================================== */
.product-thumb .button-group, 
.product-thumb .cart {
    display: flex !important;
    margin-top: auto !important; /* Кнопка завжди в самому низу */
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.product-thumb .button-group button.btn.add_to_cart,
.product-thumb .cart button.add_to_cart {
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%) !important;
    color: #ffffff !important;
    height: 48px !important;
    border-radius: 30px !important; 
    padding: 5px 20px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.25) !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Наведення */
.product-thumb .button-group button.btn.add_to_cart:hover {
    background: linear-gradient(135deg, #F06292 0%, #ec407a 100%) !important;
}

/* В кошику */
.product-thumb .button-group button.in_cart {
    background: linear-gradient(135deg, #ffdde1 0%, #ee9ca7 100%) !important;
}

/* ==========================================================
   4. МОБІЛЬНА АДАПТАЦІЯ (2 в ряд, без зсувів)
   ========================================================== */
@media (max-width: 767px) {
    .product-layout {
        width: 50% !important; /* Рівно половина екрану */
    }

    .product-thumb {
        padding: 8px !important;
    }

    .product-thumb h4 {
        min-height: 38px !important;
    }

    .product-thumb h4 a {
        font-size: 13px !important;
        -webkit-line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .product-thumb .price {
        font-size: 16px !important;
    }

    .product-thumb .button-group button.add_to_cart {
        height: 40px !important;
        font-size: 13px !important;
    }
}
нижня частина сайта
-------
/* === ПАГІНАЦІЯ (ПЕРЕМИКАННЯ СТОРІНОК) === */
.pagination {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 30px 0 !important;
}

.pagination li {
    display: inline-block !important;
}

/* Базовий вигляд цифр */
.pagination li a, .pagination li span {
    border: none !important;
    background: #ffffff !important;
    color: #6c757d !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important; /* Круглі кнопки */
    font-weight: 600 !important;
    font-size: 14px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease !important;
}

/* Активна сторінка (Бузкова) */
.pagination li.active span, .pagination li.active a {
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3) !important;
}

/* Наведення на цифри */
.pagination li a:hover {
    background: #f8f9fa !important;
    color: #F06292 !important; /* Рожевий акцент при наведенні */
    transform: translateY(-2px) !important;
}

/* === БЛОК ПІДПИСКИ (ФІКС ПОМИЛКИ EMAIL) === */
#subscribe {
    background: #f9f8ff !important;
    padding: 35px 0 !important;
    border-top: 1px solid #efebff !important;
}

/* 1. РОБИМО ПАРОЛЬ НЕВИДИМИМ, АЛЕ ЗАЛИШАЄМО В КОДІ */
#subscribe .pass {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: 0 !important;
}

/* 2. Текст зліва */
#subscribe .subscribe-info {
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
    color: #4834d4 !important;
    text-transform: uppercase;
}

/* 3. Налаштування поля Email */
#subscribe .subscribe-input .email {
    width: 100% !important;
}

#subscribe .form-control[name="email"] {
    background: #ffffff !important;
    border: 2px solid #dcd6ff !important;
    border-radius: 30px !important;
    height: 50px !important;
    color: #2d3436 !important;
    font-size: 15px !important;
    padding: 0 25px !important;
    box-shadow: 0 2px 10px rgba(162, 155, 254, 0.1) !important;
}

/* 4. Кнопка підписки (Контрастна) */
#subscribe .subscribe-button .btn {
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    height: 50px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3) !important;
    width: 100% !important;
    cursor: pointer !important;
}

#subscribe .subscribe-button .btn span, 
#subscribe .subscribe-button .btn i {
    color: #ffffff !important;
}

#subscribe .subscribe-button .btn:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.1);
}

/* ==========================================================
   5. ФІКС "НЕМАЄ В НАЯВНОСТІ" (ВАРІАНТ №3 — ЧЕРЕЗ КНОПКУ)
   ========================================================== */

/* 1. Шукаємо кнопку, яка заблокована АБО має текст/подію відсутності */
button.add_to_cart:disabled, 
button.add_to_cart.disabled,
.product-thumb .button-group button[onclick*="product/product"]:not([onclick*="cart/add"]) {
    background: #576574 !important; /* Темно-сірий */
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    pointer-events: none !important; /* Робить кнопку неактивною для кліків */
}

/* 2. Прибираємо рожевий ефект при наведенні на ТАКУ кнопку */
button.add_to_cart:disabled:hover,
button.add_to_cart.disabled:hover,
.product-thumb .button-group button[onclick*="product/product"]:hover {
    background: #2d3436 !important;
    background-image: none !important;
    transform: none !important;
}

/* 3. Малюємо плашку через контейнер картинки (це зазвичай працює всюди) */
/* Якщо кнопка має клас disabled, ми робимо картинку сірою */
.product-thumb:has(button:disabled) .image,
.product-thumb:has(button[onclick*="product/product"]) .image {
    opacity: 0.6;
    filter: grayscale(1);
}

/* Додаємо напис поверх картинки, якщо кнопка неактивна */
.product-thumb:has(button:disabled)::before {
    content: "Закінчилось" !important;
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    background: #2d3436 !important;
    color: #fff !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
    z-index: 10 !important;
}


-------
футер-
--------
/* Робимо весь блок помітним */
.product_banners_modern {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Більше простору між пунктами */
    margin: 25px 0;
    padding: 20px;
    background: #ffffff; 
    border: 2px solid #f2efff; /* Світло-лавандова рамка */
    border-radius: 20px; /* Сильніше закруглення */
    box-shadow: 0 10px 30px rgba(157, 141, 241, 0.08); /* М'яка тінь */
}

/* Кожен пункт переваги */
.banner-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Робимо іконку великою та яскравою */
.banner-icon-wrapper {
    width: 48px; /* Збільшено з 36px */
    height: 48px;
    background: #f8f7ff;
    border-radius: 14px; /* Квадрат із закругленими кутами виглядає сучасніше */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: 0.3s;
}

.banner-item:hover .banner-icon-wrapper {
    background: #9d8df1;
}

.banner-icon-wrapper i {
    color: #9d8df1;
    font-size: 22px; /* Велика виразна іконка */
    transition: 0.3s;
}

.banner-item:hover .banner-icon-wrapper i {
    color: #ffffff;
}

/* Текст: робимо заголовок жирним, а підпис читким */
.banner-text {
    font-size: 14px;
    line-height: 1.4;
    color: #333;
}

.banner-text b {
    display: block; /* Заголовок з нового рядка */
    color: #9d8df1;
    font-size: 15px;
    margin-bottom: 2px;
}

/* Основний блок покупки */
.product-buy-module {
    margin: 20px 0;
    padding: 0;
}

/* Ціна */
.main-price, .new-price {
    font-size: 38px !important;
    font-weight: 900;
    color: #9d8df1;
    line-height: 1;
}
.old-price {
    font-size: 18px;
    color: #bbb;
    text-decoration: line-through;
    margin-right: 10px;
}
.stock-badge {
    color: #2ecc71;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
}

/* Характеристики */
.short-attributes-list {
    margin: 20px 0;
    background: #fdfbff;
    padding: 15px;
    border-radius: 15px;
}
.attr-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 14px;
}
.attr-dot { flex: 1; border-bottom: 1px dotted #ddd; margin: 0 10px; }
.attr-label { color: #888; }
.attr-val { font-weight: 700; color: #333; }

/* Кнопки та Кількість */
.modern-cart-group {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.qty-selector {
    display: flex;
    position: relative;
    width: 90px;
}
.qty-selector input {
    height: 60px;
    border-radius: 15px;
    text-align: center;
    font-weight: 700;
}
.qty-btns {
    position: absolute;
    right: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.qty-btns i { font-size: 10px; cursor: pointer; padding: 5px; color: #999; }

/* ГОЛОВНА КНОПКА КУПИТИ */
.btn-buy-modern {
    flex: 1;
    background: #ff85a1 !important;
    border: none !important;
    border-radius: 15px !important; /* Квадратна з легким закругленням або 50px для овальної */
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(255, 133, 161, 0.3);
    transition: 0.3s;
}
.btn-buy-modern:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(255, 133, 161, 0.4); }

/* Швидке замовлення */
.btn-quick-order {
    width: 100%;
    margin-top: 12px;
    background: none;
    border: 2px solid #f2efff;
    padding: 12px;
    border-radius: 15px;
    color: #9d8df1;
    font-weight: 600;
    transition: 0.3s;
}
.btn-quick-order:hover { background: #fdfbff; border-color: #9d8df1; }
/* Контейнер блоку купити */
.product-buy-module {
    background: #ffffff;
    border: 1px solid #f0edff;
    border-radius: 24px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(157, 141, 241, 0.05);
}

/* Ціна */
.main-price, .new-price {
    font-size: 38px !important;
    font-weight: 900;
    color: #9d8df1;
    letter-spacing: -1px;
}

/* Характеристики крапками */
.short-attributes-list { margin: 15px 0; }
.attr-row { display: flex; align-items: baseline; margin-bottom: 6px; font-size: 13px; }
.attr-dot { flex: 1; border-bottom: 1px dotted #e0e0e0; margin: 0 10px; }
.attr-label { color: #888; }
.attr-val { font-weight: 600; color: #333; }

/* Кнопки */
.modern-cart-group { display: flex; gap: 12px; margin-top: 20px; }
.btn-buy-modern {
    flex: 1;
    background: #ff85a1 !important;
    height: 55px;
    border-radius: 15px !important;
    font-size: 18px !important;
    border: none !important;
}

.qty-selector-modern {
    display: flex;
    background: #f7f7f9;
    border-radius: 15px;
    width: 90px;
    padding: 5px 10px;
    align-items: center;
}

.qty-selector-modern input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 700;
    text-align: center;
}

/* Основний контейнер для кнопок та кількості */
.modern-cart-group {
    display: flex;
    flex-wrap: wrap; /* Дозволяє кнопці швидкого замовлення перенестись нижче, якщо мало місця */
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

/* Блок вибору кількості */
.qty-selector-modern {
    display: flex;
    background: #f7f7f9;
    border-radius: 12px;
    width: 90px;
    height: 54px;
    position: relative;
    padding: 0 5px;
    border: 1px solid #efeff4;
}

.qty-selector-modern input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    width: 100%;
    height: 100% !important;
    padding: 0 !important;
}

.qty-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.qty-nav i {
    font-size: 10px;
    color: #bbb;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s;
}
.qty-nav i:hover { color: #9d8df1; }

/* Кнопка КУПИТИ (скидаємо стилі UniShop) */
#button-cart.add_to_cart {
    flex: 2; /* Займає більше простору ніж кількість */
    height: 54px !important;
    background: #ff85a1 !important;
    color: #fff !important;
    border-radius: 12px !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 15px !important;
    margin: 0 !important;
    box-shadow: 0 4px 15px rgba(255, 133, 161, 0.2);
    line-height: normal !important;
}

#button-cart.in_cart {
    background: #2ecc71 !important;
}

/* Кнопка Швидкого замовлення */
.modern-cart-group .quick_order {
    flex: 1 1 100%; /* На мобільних буде на весь рядок */
    margin-top: 5px;
    background: #f8f6ff !important;
    border: 1px dashed #9d8df1 !important;
    color: #9d8df1 !important;
    border-radius: 12px !important;
    height: 45px !important;
    font-weight: 600;
    font-size: 13px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

@media (min-width: 768px) {
    .modern-cart-group .quick_order {
        flex: 1; /* На ПК стає в ряд, якщо вистачає місця */
        margin-top: 0;
        height: 54px !important;
    }
}

/* Перетворюємо контейнер опції на зручну плитку */
.option .radio label.input, .option .checkbox label.input {
    border: 1px solid #d1d1d1;
    border-radius: 10px;
    padding: 8px 16px !important;
    min-width: 45px;
    min-height: 40px; /* Додаємо мінімальну висоту */
    text-align: center;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex !important; /* Важливо для центрування тексту */
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* Приховуємо саму кнопку-кружечок, але залишаємо текст */
.option .radio input[type="radio"], 
.option .checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Стиль тексту всередині плитки */
.option .radio label span, 
.option .checkbox label span {
    display: block;
    width: 100%;
}

/* Коли опція вибрана */
.option .radio input:checked + label.input,
.option .checkbox input:checked + label.input {
    border-color: #9d8df1 !important;
    background: #f8f6ff !important;
    color: #9d8df1 !important;
    box-shadow: 0 0 0 1px #9d8df1;
}

/* Якщо текст опції знаходиться в span ПІСЛЯ label (залежить від верстки UniShop) */
.option .radio input:checked + label.input + span {
    color: #9d8df1;
    font-weight: 700;
}
/* Блок рейтингу */
.rating {
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    padding: 0;
}

/* Колір зірочок */
.rating i.fa-star, .rating i.far.fa-star, .rating i.fa.fa-star {
    color: #ffc107 !important; /* Класичний золотий */
    font-size: 13px;
}

/* Посилання на відгуки */
.rating a {
    color: #888 !important;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
    transition: all 0.2s;
    margin-left: 5px;
}

.rating a:hover {
    color: #9d8df1 !important;
    border-color: #9d8df1;
}

/* Іконка коментарів */
.rating i.fa-comments-o {
    color: #bbb;
    margin-left: 10px;
}
/* Головний контейнер без зайвих відступів */
.modern-social-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 15px 0 !important; /* Обнуляємо бокові відступи */
    margin: 10px 0 !important;
    border-top: 1px solid #f4f4f6 !important;
    clear: both !important;
}

/* Рейтинг зліва */
.modern-rating-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modern-stars {
    color: #ffc107;
    font-size: 13px;
    display: flex;
    gap: 2px;
}

.modern-review-link {
    color: #a0a0a0 !important;
    font-size: 12px;
    text-decoration: none !important;
    border-bottom: 1px dotted #ccc;
}

/* Кнопки справа */
.modern-action-btns {
    display: flex;
    gap: 8px;
}

.action-btn {
    background: #f8f7ff !important;
    border: none !important;
    color: #9d8df1 !important;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover { background: #9d8df1 !important; color: #fff !important; }
.action-btn.wishlist:hover { background: #ff85a1 !important; }



/* Адаптація для мобільного */
@media (max-width: 767px) {
    .modern-social-wrapper {
        padding: 15px 5px !important; /* Невеликий відступ тільки на мобільних */
    }
}
/* Контейнер для перемикачів */
.nav-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    border: none !important;
    margin: 20px 0 !important;
    padding: 0 !important;
}

/* Прибираємо всі старі стилі UniShop */
.nav-tabs > li {
    float: none !important;
    margin: 0 !important;
}

.nav-tabs > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 8px 18px !important;
    background: #f8f9fa !important; /* Світло-сірий фон для неактивної кнопки */
    color: #777 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 12px !important; /* Заокруглені кути як на кнопках вище */
    border: 1px solid #eee !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

/* Іконки всередині */
.nav-tabs > li > a i {
    margin-right: 8px !important;
    font-size: 15px !important;
    opacity: 0.7;
}

/* Стан при наведенні */
.nav-tabs > li > a:hover {
    background: #f1f0ff !important;
    color: #9d8df1 !important;
    border-color: #9d8df1 !important;
}

/* Активна кнопка (обраний таб) */
.nav-tabs > li.active > a {
    background: #9d8df1 !important; /* Ваш фірмовий колір */
    color: #ffffff !important;
    border-color: #9d8df1 !important;
    box-shadow: 0 4px 12px rgba(157, 141, 241, 0.2) !important;
}

.nav-tabs > li.active > a i {
    color: #ffffff !important;
    opacity: 1;
}

/* Прибираємо непотрібні лінії під табами */
.nav-tabs > li.active > a::after {
    display: none !important;
}

/* Контент нижче */
.tab-content {
    background: #fff;
    padding: 15px 5px !important;
    border-top: 1px solid #f4f4f7;
}

/* ============================================================
   ПОВНИЙ КОД: ЦЕНТРОВКА (ПК) + ВЕРТИКАЛЬ (МОБ) + РАМКИ
   ============================================================ */

/* 1. ПІДГОТОВКА КОНТЕЙНЕРА */
.product-0-0 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
}

.product-0-0 .owl-wrapper-outer,
.product-0-0 .owl-wrapper {
    display: contents !important; 
}

/* 2. СТИЛІ ДЛЯ КАРТОК ТОВАРІВ */
.product-0-0 .product-layout-1 {
  width: calc(33.333% - 20px) !important;
    margin: 10px !important;
    max-width: none !important;
}

/* 3. ОФОРМЛЕННЯ КАРТКИ (Повертаємо рамки та дизайн) */
.product-0-0 .product-thumb {
    background: #fff !important; /* Білий фон */
    border: 1px solid #ebebeb !important; /* Світла рамка */
    border-radius: 10px !important; /* Заокруглення */
    padding: 15px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; /* Легка тінь */
}

/* Ефект при наведенні */
.product-0-0 .product-thumb:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    border-color: #d1d1d1 !important;
}

/* 4. ВЕРСТКА ДЛЯ ПК (3 блоки по центру) */
@media (min-width: 992px) {
    .product-0-0 {
        flex-direction: row !important;
        justify-content: center !important;
    }

    .product-0-0 .product-layout-1 {
        width: 33.333% !important;
        max-width: 360px !important;
    }
}

/* 5. ВЕРСТКА ДЛЯ МОБІЛЬНИХ (Вертикальний список) */
@media (max-width: 991px) {
    .product-0-0 {
        flex-direction: column !important;
        align-items: center !important;
    }

    .product-0-0 .product-layout-1 {
        width: 100% !important;
        max-width: 340px !important;
    }
}

/* ФІКС ТЕКСТУ ТА КНОПОК */
.product-0-0 .caption {
    flex-grow: 1 !important;
    text-align: center !important;
}

.product-0-0 .owl-controls {
    display: none !important;
}

/* 1. КОНТЕЙНЕР ТА КАРТКА ВІДГУКУ */
#record_columns-11 .owl-item {
    padding: 15px !important;
}

#record_columns-11 .content-records {
    background: #fff !important;
    border: 1px solid #ebebeb !important;
    border-radius: 12px !important;
    padding: 20px !important;
    height: 100% !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. ШАПКА ВІДГУКУ (Автор та статус) */
#record_columns-11 .blogdescription > div:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}

#record_columns-11 .blog-author {
    font-weight: 700 !important;
    color: #333 !important;
    font-size: 1.1em !important;
}

#record_columns-11 .seocmspro_buy {
    font-size: 0.85em !important;
    color: #888 !important;
    background: #f5f5f5 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

/* 3. РЕЙТИНГ (Зірочки) */
#record_columns-11 .sc_rating img {
    max-width: 80px !important;
    height: auto !important;
    display: inline-block !important;
}

/* 4. ЗОБРАЖЕННЯ ТОВАРУ У ВІДГУКУ */
#record_columns-11 .blog-image {
    float: left !important;
    margin: 0 15px 10px 0 !important;
    width: 60px !important;
}

#record_columns-11 .blog-image img {
    border-radius: 8px !important;
    border: 1px solid #f0f0f0 !important;
}

/* 5. ТЕКСТ ВІДГУКУ */
#record_columns-11 .blogdescription {
    font-size: 0.95em !important;
    line-height: 1.5 !important;
    color: #444 !important;
    flex-grow: 1 !important;
}

/* 6. ПОСИЛАННЯ НА ТОВАР (Знизу) */
#record_columns-11 .ascp_list_info {
    margin-top: 15px !important;
    padding-top: 10px !important;
    border-top: 1px dashed #eee !important;
    list-style: none !important;
    padding-left: 0 !important;
}

#record_columns-11 .blog-list-record a {
    color: #7b68ee !important; /* Ваш фіолетовий колір */
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* 7. КНОПКА ДЕТАЛЬНІШЕ (Стрілка) */
#record_columns-11 .seocms_further {
    float: right !important;
    background: #f0edff !important;
    color: #7b68ee !important;
    border: none !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    line-height: 30px !important;
    text-align: center !important;
}

/* Прибираємо зайві розділювачі теми */
#record_columns-11 .divider100, 
#record_columns-11 .blog-child_divider,
#record_columns-11 .lineheight1 {
    display: none !important;
}
/* 1. БАЗОВИЙ КОНТЕЙНЕР ДЛЯ ВСІХ ПРИСТРОЇВ */
.home_banners.row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    margin: 30px auto !important;
    padding: 0 10px !important;
    gap: 15px !important;
    width: 100% !important;
    max-width: 1200px !important;
}

/* Скидання колонок Bootstrap */
.home_banners.row > div {
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* 2. СТИЛЬ КАРТКИ */
.home_banner {
    background: #ffffff !important;
    border: 1px solid #f0edff !important;
    border-radius: 20px !important;
    padding: 18px !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 15px rgba(123, 104, 238, 0.05) !important;
}

/* Іконка та текст (Загальні) */
.home_banner .icon {
    flex: 0 0 50px !important;
    height: 50px !important;
    background: #f8f7ff !important;
    border-radius: 14px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-right: 15px !important;
}

.home_banner .icon i {
    font-size: 24px !important;
    color: #9d8df1 !important;
}

.home_banner .text strong {
    font-size: 16px !important;
    color: #4834d4 !important;
    display: block !important;
    margin-bottom: 3px !important;
}

.home_banner .text span {
    font-size: 13px !important;
    color: #6c757d !important;
    line-height: 1.3 !important;
    display: block !important;
}

/* 3. НАЛАШТУВАННЯ ДЛЯ ПК (3 блоки в ряд) */
@media (min-width: 992px) {
    .home_banners.row > div {
        flex: 1 1 300px !important;
        max-width: 360px !important;
    }
}

/* 4. МОБІЛЬНА АДАПТАЦІЯ (Вертикально) */
@media (max-width: 991px) {
    .home_banners.row {
        flex-direction: column !important; /* Ставимо блоки в стовпчик */
        align-items: center !important;
        gap: 12px !important; /* Відступ між банерами */
    }

    .home_banners.row > div {
        width: 100% !important;
        max-width: 380px !important; /* Обмежуємо ширину на телефоні для краси */
    }

    .home_banner {
        padding: 15px !important;
        min-height: 85px !important;
    }

    .home_banner .icon {
        width: 45px !important;
        height: 45px !important;
        margin-right: 12px !important;
    }

    .home_banner .text strong {
        font-size: 15px !important;
    }

    .home_banner .text span {
        font-size: 12px !important;
    }
}
/* 1. ГЛОБАЛЬНІ НАЛАШТУВАННЯ КОНТЕЙНЕРА */
.home_banners.row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin: 20px auto !important;
    padding: 0 15px !important;
    gap: 12px !important;
    width: 100% !important;
}

/* 2. АДАПТАЦІЯ ДЛЯ ТЕЛЕФОНІВ (вертикальний список) */
@media (max-width: 767px) {
    .home_banners.row {
        flex-direction: column !important; /* Суворо в один стовпчик */
        align-items: center !important;
    }

    .home_banners.row > div {
        width: 100% !important;
        max-width: 100% !important; /* Займає всю ширину екрана з урахуванням padding */
        padding: 0 !important;
    }

    .home_banner {
        width: 100% !important;
        min-height: 70px !important; /* Компактніше для мобайла */
        padding: 12px 15px !important;
        border-radius: 15px !important; /* Трохи менше заокруглення для малих екранів */
        justify-content: flex-start !important;
    }

    /* Компактні іконки для мобільного */
    .home_banner .icon {
        flex: 0 0 42px !important;
        height: 42px !important;
        margin-right: 12px !important;
        border-radius: 10px !important;
    }

    .home_banner .icon i {
        font-size: 18px !important;
    }

    /* Текст на мобільному */
    .home_banner .text strong {
        font-size: 14px !important; /* Менший шрифт, щоб не розривало рядки */
        line-height: 1.2 !important;
    }

    .home_banner .text span {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
}

/* 3. НАЛАШТУВАННЯ ДЛЯ ПЛАНШЕТІВ (горизонтально або 2 в ряд) */
@media (min-width: 768px) and (max-width: 991px) {
    .home_banners.row {
        grid-template-columns: repeat(2, 1fr); /* Якщо використовуєте grid */
        justify-content: center !important;
    }
    
    .home_banners.row > div {
        flex: 1 1 45% !important;
    }
}

------
кошик-
--------



/* ================================================= */
/* ПОВНИЙ CSS ДЛЯ СТОРІНКИ КОНТАКТІВ CANDY MEOW      */
/* ================================================= */

/* Основний контейнер сторінки */
#contact-page {
    background: #fff !important;
    padding: 40px !important;
    border-radius: 25px !important;
    box-shadow: 0 15px 45px rgba(123, 104, 238, 0.05) !important;
    margin-bottom: 50px !important;
}

/* Логотип (збільшений) */
.contact-image-wrapper {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 30px !important;
}

.contact-image-wrapper img {
    max-width: 250px !important; /* Розмір за вашим запитом */
    height: auto !important;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.08)) !important;
}

/* Заголовки */
#contact-page h1.heading {
    font-weight: 700 !important;
    color: #4834d4 !important;
    margin-bottom: 40px !important;
    text-align: center !important;
}

/* Сітка контактної інформації */
.contact-info-grid {
    display: flex !important;
    justify-content: space-around !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    margin-bottom: 50px !important;
    text-align: center !important;
}

.contact-method {
    flex: 1 !important;
    min-width: 200px !important;
}

.contact-method h4.heading span {
    font-size: 16px !important;
    color: #9d8df1 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Текст та іконки */
.contact-line, .contact-method p {
    font-size: 15px !important;
    color: #333 !important;
    margin: 8px 0 !important;
}

.contact-line i {
    color: #f196b2 !important;
    margin-right: 8px !important;
}

/* Поля форми */
.contact-form-wrapper {
    max-width: 700px !important;
    margin: 0 auto !important;
}

.contact-form-wrapper .form-control {
    border-radius: 12px !important;
    border: 1px solid #e0e0e0 !important;
    padding: 12px 18px !important;
    height: auto !important;
    box-shadow: none !important;
    transition: 0.3s !important;
}

.contact-form-wrapper .form-control:focus {
    border-color: #7b68ee !important;
    background: #f8f7ff !important;
}

/* --- ЦЕНТРУВАННЯ КНОПКИ ТА ТЕКСТУ (ФІКС) --- */
.contact-buttons-center {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 30px !important;
}

.btn-submit-custom {
    background: #f196b2 !important;
    color: #fff !important;
    border: none !important;
    
    /* Важливо для центрування тексту всередині */
    height: 55px !important;
    line-height: 55px !important;
    padding: 0 50px !important;
    
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-align: center !important;
    white-space: nowrap !important; /* Щоб текст не переносився */
    
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 20px rgba(241, 150, 178, 0.3) !important;
}

.btn-submit-custom:hover {
    background: #e085a1 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(241, 150, 178, 0.4) !important;
}

/* reCAPTCHA v3 - залишаємо видимим */
.grecaptcha-badge { 
    visibility: visible !important; 
    display: block !important;
}

/* Адаптивність для мобільних */
@media (max-width: 768px) {
    .contact-info-grid {
        flex-direction: column !important;
        align-items: center !important;
    }
    .btn-submit-custom {
        width: 100% !important;
    }
}



/* ФІОЛЕТОВО-ЛАВАНДОВИЙ БАННЕР MEOW FRIDAY */

/* Основний контейнер */
.wrapper {
    background: #f3f0ff !important; /* Ніжна лаванда */
    border: 2px solid #9c88ff !important; /* Насичена лаванда */
    border-radius: 18px !important;
    padding: 10px 15px !important; /* Зменшено, щоб не було прокрутки */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important; /* СУВОРО ЗАБОРОНЯЄМО ПРОКРУТКУ */
    box-shadow: 0 8px 20px rgba(156, 136, 255, 0.2) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Текст */
.wrapper .text h4 {
    margin: 0 !important;
    font-size: 14px !important;
    color: #4834d4 !important; /* Темно-фіолетовий текст */
    font-weight: 600 !important;
    padding-right: 10px !important;
    white-space: normal !important; /* Дозволяємо перенос тексту, щоб не було прокрутки */
}

/* Кнопки */
.wrapper .buttons {
    display: flex !important;
    gap: 8px !important;
    flex-shrink: 0 !important; /* Забороняємо кнопкам стискатися або розтягувати блок */
}

/* Детальні умови (посилання) */
.wrapper .btn-default {
    background: transparent !important;
    border: none !important;
    color: #686de0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    padding: 5px !important;
    box-shadow: none !important;
    min-width: auto !important;
}

/* Кнопка "Закрити" (яскрава) */
.wrapper .btn-primary {
    background: #686de0 !important; /* Лавандово-синій */
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 6px 15px !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 10px rgba(104, 109, 224, 0.3) !important;
}

/* Адаптація для мобільних (щоб прибрати смугу прокрутки на телефонах) */
@media (max-width: 767px) {
    .wrapper {
        flex-direction: column !important;
        padding: 15px !important;
        text-align: center !important;
    }
    
    .wrapper .text h4 {
        padding-right: 0 !important;
        margin-bottom: 12px !important;
        font-size: 13px !important;
    }
    
    .wrapper .buttons {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Дозволяємо всьому виходити за межі рядків кошика */
.simplecheckout-methods-table, 
.simplecheckout-block-content, 
.form-group, 
.col-sm-8 {
    overflow: visible !important;
    position: static !important;
}

/* Стиль самого списку - робимо його незалежним */
.autocomplete-suggestions {
    position: absolute !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    max-height: 250px !important;
    background: #fff !important;
    border: 1px solid #7369D9 !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2) !important;
    width: inherit !important; /* Бере ширину поля вводу */
}
/* 7. МОБІЛЬНА АДАПТАЦІЯ */
@media screen and (max-width: 991px) {
    .simplecheckout-left-column, 
    .simplecheckout-right-column {
        width: 100% !important;
        float: none !important;
        margin: 0 0 20px 0 !important;
    }
}


-------------------------------------------------------
/* 1. ХОВАЄМО ТУ, ЩО В СЕРЕДИНІ ІНСТРУКЦІЙ (ПЛАТІЖНИЙ МОДУЛЬ) */
#simplecheckout_payment_form .buttons, 
#simplecheckout_payment_form #button-confirm {
    display: none !important;
}

/* 2. ГОЛОВНИЙ ТРЮК: ЯКЩО В БЛОЦІ КНОПОК З'ЯВИВСЯ INPUT (ПІДТВЕРДИТИ), 
   МИ ПОВНІСТЮ ХОВАЄМО АНКЕР (ОФОРМИТИ) */
#buttons .simplecheckout-button-right:has(input[type="button"]) a#simplecheckout_button_confirm {
    display: none !important;
}

/* 3. ДОДАТКОВА ПЕРЕВІРКА ДЛЯ СТАРИХ БРАУЗЕРІВ (ПРИХОВУВАННЯ ЗА АТРИБУТОМ) */
#simplecheckout_button_confirm[style*="display: none"],
#simplecheckout_button_confirm[style*="display:none"] {
    display: none !important;
}

/* 4. СТИЛІ ДЛЯ ОБОХ ТИПІВ КНОПОК ВНИЗУ */
#buttons #button-confirm, 
#buttons #simplecheckout_button_confirm,
#buttons #simplecheckout_button_back {
    background: #7369D9 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 54px !important;
    min-width: 260px !important;
    padding: 0 40px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 6px 18px rgba(115, 105, 217, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

/* Специфіка для кнопки-інпута */
input#button-confirm {
    line-height: normal !important;
    -webkit-appearance: none;
}

/* Текст всередині кнопок-посилань */
#buttons a span {
    line-height: 1 !important;
    display: block !important;
}

/* Кнопка "Назад" */
#buttons #simplecheckout_button_back {
    background: #f0f1f7 !important;
    color: #7369D9 !important;
    box-shadow: none !important;
    min-width: 150px !important;
}

#buttons #simplecheckout_button_back span {
    color: #7369D9 !important;
}

/* Ефект наведення */
#buttons #button-confirm:hover, 
#buttons #simplecheckout_button_confirm:hover {
    background: #5e54c2 !important;
    transform: translateY(-2px);
}
#agreement_checkbox .checkbox input[type="checkbox"] {
    accent-color: #7369D9; /* Фарбує стандартний чекбокс у ваш колір */
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 8px;
    cursor: pointer;
}

#agreement_checkbox .checkbox label {
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}
/* Стиль плаваючого кошика для мобільних */
@media (max-width: 767px) {
    #mobile-sticky-cart {
        position: fixed !important;
        bottom: 25px !important;
        right: 20px !important;
        width: 65px !important;
        height: 65px !important;
        background: #f196b2 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 99999 !important;
        cursor: pointer !important;
        box-shadow: 0 8px 25px rgba(241, 150, 178, 0.5) !important;
        
        /* Додаємо анімацію масштабування */
        -webkit-animation: mobile-bounce 2s infinite ease-in-out;
        animation: mobile-bounce 2s infinite ease-in-out;
    }

    .cart-icon-wrapper {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #mobile-sticky-cart i {
        color: #fff !important;
        font-size: 26px !important;
    }

    #mobile-cart-count {
        position: absolute !important;
        top: 2px !important;
        right: 2px !important;
        background: #4834d4 !important;
        color: #fff !important;
        min-width: 22px !important;
        height: 22px !important;
        line-height: 20px !important;
        border-radius: 50% !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-align: center !important;
        border: 2px solid #fff !important;
    }
}

/* Анімація "дихання" (збільшення/зменшення) */
@-webkit-keyframes mobile-bounce {
    0% { -webkit-transform: scale(1); transform: scale(1); }
    50% { -webkit-transform: scale(1.1); transform: scale(1.1); }
    100% { -webkit-transform: scale(1); transform: scale(1); }
}

@keyframes mobile-bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Налаштування для ПК (Зафіксований кошик) */
@media (min-width: 768px) {
    /* Жорстке позиціонування головного контейнера (без змін) */
    #cart.fly, #cart.fly2 {
        top: auto !important;
        bottom: 30px !important;
        right: 30px !important;
        left: auto !important;
        transform: none !important;
        position: fixed !important;
        display: block !important;
        z-index: 9999 !important;
        width: auto !important;
    }

    /* Ховаємо меню */
    #cart.fly.show .dropdown-menu,
    #cart.fly2.show .dropdown-menu {
        display: none !important;
    }

    /* === СТИЛЬ КНОПКИ (Candy Candy Style) === */
    #cart.fly .btn.dropdown-toggle,
    #cart.fly2 .btn.dropdown-toggle {
        border-radius: 50% !important;
        width: 65px !important;
        height: 65px !important;
        padding: 0 !important;
        font-size: 24px !important;
        color: #fff !important;
        border: none !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        
        /* 1. Градієнт та Тінь: робимо кошик «м'яким» та об'ємним */
        background: linear-gradient(135deg, #A29BFE 0%, #6C5CE7 100%) !important;
        box-shadow: 0 10px 25px rgba(108, 92, 231, 0.4) !important;
        
        transition: all 0.3s ease !important;
        position: relative;
    }

    /* === СТИЛЬ ЦИФРИ (Лічильника) === */
    #cart.fly #cart-total,
    #cart.fly2 #cart-total {
        position: absolute;
        bottom: -5px; /* Ставимо цифру трішки нижче кнопки */
        right: -5px;
        background: #F06292 !important; /* Яскраво-рожевий Candy Candy акцент */
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border: 2px solid #fff !important; /* Біла рамка, щоб цифра не зливалася */
        box-shadow: 0 4px 10px rgba(240, 98, 146, 0.3) !important;
    }

    /* === ПОСТІЙНА ПУЛЬСАЦІЯ: для привернення уваги === */
    @keyframes pulseFlyCart {
        0% { transform: scale(1); box-shadow: 0 10px 25px rgba(108, 92, 231, 0.4); }
        50% { transform: scale(1.05); box-shadow: 0 15px 35px rgba(108, 92, 231, 0.5); }
        100% { transform: scale(1); box-shadow: 0 10px 25px rgba(108, 92, 231, 0.4); }
    }

    /* Запускаємо пульсацію (легку і повільну, щоб не дратувала) */
    #cart.fly .btn.dropdown-toggle,
    #cart.fly2 .btn.dropdown-toggle {
        animation: pulseFlyCart 2.5s infinite ease-in-out !important;
    }

    /* Ефект при наведенні курсора */
    #cart.fly:hover .btn.dropdown-toggle,
    #cart.fly2:hover .btn.dropdown-toggle {
        animation-play-state: paused; /* Зупиняємо пульсацію */
        background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%) !important; /* Міняємо градієнт */
        transform: translateY(-3px) !important; /* Кошик «злітає» */
    }
}

/* М'ЯКИЙ СТРИБОК (при додаванні) */
@keyframes softCandyJump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); box-shadow: 0 0 20px rgba(157, 141, 241, 0.6) !important; }
    100% { transform: scale(1); }
}

.soft-candy-jump {
    animation: softCandyJump 0.6s ease-out !important;
}

/* ЛЕГКА ПОСТІЙНА ПУЛЬСАЦІЯ НА ПК */
@media (min-width: 768px) {
    #cart.fly .btn, #cart.fly2 .btn {
        animation: gentleBreathe 4s infinite ease-in-out !important;
        background: linear-gradient(135deg, #A29BFE 0%, #6C5CE7 100%) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }

    /* Прибираємо сильний трансформ при наведенні, робимо мінімальним */
    #cart.fly .btn:hover, #cart.fly2 .btn:hover {
        transform: scale(1.03) !important;
    }
}

@keyframes gentleBreathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.95; }
}

/* СТИЛЬ ЦИФРИ (АКЦЕНТ) */
#cart.fly #cart-total, #cart.fly2 #cart-total {
    background: #F06292 !important; /* Ніжно-рожевий */
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* --- ПОВНЕ ПРИБИРАННЯ ТІНЕЙ ТА ФОНУ (Clean Flat Style) --- */

/* 1. Головний контейнер модалки: робимо фон прозорим */
#modal-cart {
    background: transparent !important; /* Прибираємо сірий фон навколо */
    z-index: 9999999 !important;
    overflow-y: auto !important; /* Дозволяємо скролити вікно, якщо контент великий */
}

/* 2. Діалоговий блок: прибираємо тіні та обнуляємо позицію */
#modal-cart .modal-dialog {
    margin: 30px auto !important; /* Відступ від верху */
    box-shadow: none !important; /* Жодних тіней на діалогу */
    border: none !important;
}

/* 3. Контент вікна: робимо його плоским і чистим */
#modal-cart .modal-content {
    background: #ffffff !important;
    border-radius: 20px !important; /* Закруглені кути залишаємо */
    box-shadow: none !important; /* ПОВНЕ ПРИБИРАННЯ ТІНЕЙ З КОНТЕНТУ */
    border: 1px solid #eee !important; /* Додаємо тонку сіру рамку, щоб вікно не зливалося з білим фоном сайту */
    padding: 20px !important;
    overflow: hidden;
}

/* 4. Прибираємо стандартний чорний фон, який блокує сайт */
.modal-backdrop {
    display: none !important;
}

/* 5. Забороняємо скриптам блокувати скрол сторінки */
body.modal-open {
    overflow: auto !important;
    position: static !important;
    padding-right: 0 !important;
}


/* --- ДОДАТКОВА СТИЛІЗАЦІЯ (Candy Flat Style) --- */

/* Стиль шапки вікна (з кнопкою закриття) */
#modal-cart .modal-header {
    border: none !important;
    padding: 0 !important;
}

#modal-cart .close {
    font-size: 28px !important;
    color: #6C5CE7 !important; /* Кнопка закриття фіолетова */
    opacity: 1 !important;
    position: absolute;
    top: 10px;
    right: 15px;
}

/* Стилізація кнопок у вікні (зробимо їх плоскими та 'candy') */
#modal-cart .btn {
    border-radius: 12px !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    transition: all 0.2s ease;
    box-shadow: none !important; /* Прибираємо тіні на кнопках */
}

/* Кнопка "Оформити" (фіолетовий плоский градієнт) */
#modal-cart .btn-primary {
    background: linear-gradient(135deg, #A29BFE 0%, #6C5CE7 100%) !important;
    color: #fff !important;
    border: none !important;
}

/* Кнопка "Продовжити" (прозора з фіолетовим текстом) */
#modal-cart .modal-body .row:last-child a[onclick] span {
    color: #6C5CE7 !important;
    font-weight: bold;
    text-decoration: underline;
}
/* --- CLEAN CART: NO SCROLL & DELETE BUTTON --- */

/* 1. Основний контейнер */
#cart .dropdown-menu {
    border-radius: 20px !important;
    padding: 15px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12) !important;
    border: 1px solid #f0f0f0 !important;
    min-width: 310px !important;
    max-width: 325px !important;
    overflow: hidden !important;
}

/* 2. Скидання таблиці для адаптації */
#cart .dropdown-menu table, 
#cart .dropdown-menu tbody, 
#cart .dropdown-menu tr, 
#cart .dropdown-menu td {
    display: block !important;
    width: 100% !important;
    border: none !important;
}

/* 3. Контейнер товару (Flexbox) */
#cart .dropdown-menu table.cart tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
    position: relative !important; /* Для позиціонування хрестика */
}

/* Фото товару */
#cart .dropdown-menu td.image {
    width: 50px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

#cart .dropdown-menu td.image img {
    border-radius: 10px !important;
    max-width: 45px !important;
}

/* Назва товару */
#cart .dropdown-menu td.name {
    flex: 1 !important;
    padding: 0 25px 0 10px !important; /* Відступ справа для хрестика */
    font-size: 13px !important;
    line-height: 1.3 !important;
}

/* Ціна товару */
#cart .dropdown-menu td.total {
    width: 100% !important;
    text-align: right !important;
    font-weight: 700 !important;
    color: #6C5CE7 !important;
    font-size: 13px !important;
    margin-top: 5px !important;
}

/* Кнопка видалення (Хрестик) */
#cart .dropdown-menu td.remove {
    position: absolute !important;
    top: 10px !important;
    right: 0 !important;
    width: auto !important;
}

#cart .dropdown-menu td.remove button {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}

#cart .dropdown-menu td.remove i.fa-times {
    display: inline-block !important; /* Показуємо тільки хрестик */
    color: #e0e0e0 !important;
    font-size: 16px !important;
}

#cart .dropdown-menu td.remove i.fa-times:hover {
    color: #ff7675 !important;
}

/* 4. Блок підсумку */
#cart .dropdown-menu li:nth-child(2) tr {
    display: flex !important;
    justify-content: space-between !important;
    padding: 5px 0 !important;
}

#cart .dropdown-menu li:nth-child(2) td {
    width: auto !important;
}

#cart .dropdown-menu li:nth-child(2) td:last-child {
    font-weight: 800 !important;
    color: #6C5CE7 !important;
}

/* 5. Фіолетова кнопка */
#cart .dropdown-menu p.text-right a:last-child {
    display: block !important;
    background: #6C5CE7 !important;
    color: #fff !important;
    padding: 14px !important;
    border-radius: 14px !important;
    text-align: center !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* 6. Ховаємо все зайве, КРІМ хрестика */
#cart .dropdown-menu .input-group,
#cart .dropdown-menu p.text-right a:first-child,
#cart .dropdown-menu i.fa:not(.fa-times), 
#cart .dropdown-menu li:nth-child(2) table tr:first-child {
    display: none !important;
}

------
аджакс завант
-=------
/* Ховаємо весь обгортковий блок за ID та класом */
div#ajax-pagination-container.pagination_wrap {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* На випадок, якщо тема створює копії або виносить цифри окремо */
#ajax-pagination-container *, 
.pagination_wrap * {
    display: none !important;
}



====================
/* ==========================================================
   СТИЛІЗАЦІЯ КНОПКИ "ПОКАЗАТИ ЩЕ" (AJAX LOAD MORE)
   ========================================================== */

/* 1. Контейнер кнопки (щоб вона була по центру) */
.load-more-wrapper {
    text-align: center !important;
    margin: 40px 0 60px 0 !important; /* Відступи зверху та знизу */
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* 2. Сама кнопка (Базовий вигляд - Фіолетова цукерка) */
#load-more-products {
    /* Градієнт як на твоїх кнопках "До кошика" */
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%) !important;
    color: #ffffff !important;
    
    /* Форма та розмір */
    height: 54px !important;
    min-width: 280px !important; /* Широка кнопка виглядає солідніше */
    border-radius: 30px !important; /* Сильне заокруглення */
    padding: 0 40px !important;
    
    /* Шрифт */
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important; /* Всі великі літери */
    letter-spacing: 1px !important;
    
    /* Оформлення */
    border: none !important;
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.25) !important; /* М'яка фіолетова тінь */
    transition: all 0.3s ease !important; /* Плавна анімація */
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
}

/* 3. Ефект при наведенні (Яскраво-рожевий акцент) */
#load-more-products:hover {
    /* Рожевий градієнт для залучення уваги */
    background: linear-gradient(135deg, #F06292 0%, #ec407a 100%) !important;
    box-shadow: 0 8px 25px rgba(240, 98, 146, 0.35) !important; /* Рожева тінь */
    transform: translateY(-3px) !important; /* Кнопка трохи піднімається */
}

/* 4. Стан натискання (трохи притискається) */
#load-more-products:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(240, 98, 146, 0.3) !important;
}

/* 5. Стан завантаження (коли крутиться спіннер) */
#load-more-products:disabled {
    background: #bdc3c7 !important; /* Сірий колір */
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
    transform: none !important;
}

/* Іконка спіннера (fa-spinner) */
#load-more-products i.fa-spinner {
    margin-right: 12px !important;
    font-size: 18px !important;
}

/* 6. Адаптація для мобільних (щоб кнопка не була завеликою) */
@media (max-width: 767px) {
    #load-more-products {
        height: 48px !important;
        min-width: 220px !important;
        font-size: 14px !important;
        padding: 0 25px !important;
    }
    
    .load-more-wrapper {
        margin: 30px 0 40px 0 !important;
    }
}


/* ==========================================================
   ФІКС СТАНУ "В КОШИКУ" (Для AJAX та динамічних змін)
   ========================================================== */

/* 1. БАЗОВИЙ СТАН: Коли клас .in_cart з'являється на кнопці */
.product-thumb .button-group button.add_to_cart.in_cart,
.product-thumb .button-group button.in_cart,
.product-thumb .cart button.in_cart,
/* Додаємо селектор для випадків, коли назва класу може бути іншою в темі */
.product-thumb [class*="in_cart"], 
.product-thumb .btn-success.add_to_cart {
    background: linear-gradient(135deg, #ffdde1 0%, #ee9ca7 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(238, 156, 167, 0.3) !important;
    border: none !important;
}

/* 2. ПРИМУСОВЕ ПЕРЕФАРБУВАННЯ ТЕКСТУ ТА ІКОНОК */
.product-thumb .in_cart i,
.product-thumb .in_cart span,
.product-thumb .in_cart:before {
    color: #ffffff !important;
}

/* 3. ЕФЕКТ ПРИ НАВЕДЕННІ НА КНОПКУ, ЯКА ВЖЕ В КОШИКУ */
.product-thumb button.in_cart:hover,
.product-thumb [class*="in_cart"]:hover {
    background: linear-gradient(135deg, #ee9ca7 0%, #d87093 100%) !important;
    box-shadow: 0 6px 20px rgba(238, 156, 167, 0.4) !important;
    transform: translateY(-2px) !important;
}


/* Виправляємо вихід тексту за межі кнопки */
.product-thumb .button-group button.add_to_cart:disabled,
.product-thumb .button-group button[disabled],
.product-thumb .cart button:disabled {
    white-space: normal !important; /* Дозволяємо перенос тексту на новий рядок */
    line-height: 1.1 !important;    /* Зменшуємо міжрядковий інтервал для компактності */
    padding: 5px 10px !important;   /* Трохи збільшуємо внутрішні відступи */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    word-break: break-word !important; /* Розриваємо слово, якщо воно ну дуууже довге */
}

/* Окремо для мобільних пристроїв, де місця найменше */
@media (max-width: 767px) {
    .product-thumb .button-group button.add_to_cart:disabled,
    .product-thumb .cart button:disabled {
        font-size: 11px !important; /* Трохи зменшуємо шрифт саме для цієї кнопки */
        height: 42px !important;    /* Дозволяємо кнопці трохи підлаштовуватись під контент */
    }
}


/* ОБНУЛЕННЯ СТАНДАРТНИХ СТИЛІВ ШАБЛОНУ */
footer {
    background: linear-gradient(to bottom, #ffffff 0%, #fcfaff 100%) !important;
    padding: 60px 0 40px !important;
    color: #4a4a4a !important;
    border-top: 1px solid #f0edf9 !important;
}

footer hr {
    display: none !important; /* Прибираємо зайві лінії */
}

/* СІТКА НА 3 КОЛОНКИ */
footer .row:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

/* Ховаємо 4-ту колонку, щоб залишилось три */
footer .col-md-3:nth-child(4) {
    display: none !important;
}

/* Налаштування ширини колонок для 3-х блоків */
footer .col-md-3 {
    flex: 1 !important;
    min-width: 250px !important;
    margin-bottom: 30px !important;
}

/* ЗАГОЛОВКИ */
footer h5.heading {
    color: #9d8df1 !important; /* Лавандовий колір підписки */
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 25px !important;
    border: none !important;
}

footer h5.heading i, footer h5.heading span::before {
    display: none !important; /* Прибираємо іконки біля заголовків */
}

/* СПИСКИ ПОСИЛАНЬ */
footer ul.list-unstyled li {
    margin-bottom: 12px !important;
}

footer ul.list-unstyled li a {
    color: #5e5e5e !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: 0.3s !important;
    display: block !important;
}

footer ul.list-unstyled li a i {
    display: none !important; /* Прибираємо стрілочки */
}

footer ul.list-unstyled li a:hover {
    color: #9d8df1 !important;
    padding-left: 5px !important;
}

/* СОЦМЕРЕЖІ ТА НИЖНЯ ПАНЕЛЬ */
.socials {
    display: flex !important;
    gap: 15px !important;
    justify-content: flex-start !important;
}

.socials a {
    width: 42px !important;
    height: 42px !important;
    background: #ffffff !important;
    border: 1px solid #f0edf9 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9d8df1 !important;
    font-size: 20px !important;
    box-shadow: 0 4px 10px rgba(157, 141, 241, 0.1) !important;
    transition: 0.3s !important;
}

.socials a:hover {
    background: #9d8df1 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

/* Ховаємо блок оплати, якщо він залишився */
.payments {
    display: none !important;
}

/* Кнопка Вгору */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    left: 30px; /* Змінили right на left */
    width: 50px;
    height: 50px;
    background: #6c5ce7; /* Твій фірмовий фіолетовий */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    visibility: hidden; /* Спочатку прихована */
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3); /* М'яка фіолетова тінь */
}

/* Стан, коли ми проскролили вниз */
.scroll-top-btn.show {
    visibility: visible;
    opacity: 0.7; /* Легка прозорість, щоб не заважала */
}

/* Ефект при наведенні (стає рожевою) */
.scroll-top-btn:hover {
    opacity: 1;
    background: #ec407a; /* Твій рожевий акцент */
    transform: translateY(-5px); /* Трохи піднімається */
    box-shadow: 0 6px 20px rgba(236, 64, 122, 0.4);
}

.scroll-top-btn i {
    font-size: 20px;
}

/* Адаптація для мобільних */
@media (max-width: 767px) {
    .scroll-top-btn {
        bottom: 20px;
        left: 20px;
        width: 45px;
        height: 45px;
    }
}

#additional-img .owl-wrapper {
    width: 100% !important;
}

/* 2. СТИЛІ ДЛЯ ОПИСІВ БОКСІВ CANDYMEOW */

/* Заголовки розділів (Що всередині тощо) */
.cm-box-title {
    color: #d87093 !important;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    margin-top: 20px !important;
    display: block;
}

/* Списки зі смаколиками */
.cm-box-list {
    margin: 10px 0 15px 20px !important;
    list-style-type: disc !important;
    padding: 0 !important;
}

.cm-box-list li {
    margin-bottom: 5px !important;
    line-height: 1.4;
}

/* Перший абзац (вступ) */
.cm-intro {
    font-weight: bold !important;
    color: #333 !important;
    font-size: 1.05em;
    display: block;
    margin-bottom: 10px;
}

/* Нижній блок з рамкою (заміна іконкам) */
.cm-footer-text {
    background: #fff5f7 !important;
    border: 1px dashed #ee9ca7 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-top: 15px !important;
    display: block !important;
    clear: both !important;
    color: #d87093 !important;
    font-weight: 500;
}


/* ФІКС ВИПАДАЮЧОГО СПИСКУ В КОШИКУ */
.simplecheckout-block, 
.simplecheckout-container, 
.form-group, 
.col-sm-8, 
fieldset {
    overflow: visible !important; /* Дозволяємо вихід за межі */
}

/* Сам список автокомпліту */
.ui-autocomplete, 
.autocomplete-suggestions, 
.dropdown-menu.autocomplete {
    position: absolute !important;
    z-index: 99999999 !important; /* Максимальний пріоритет */
    background: #fff !important;
    border: 2px solid #7369D9 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
    display: block !important; 
    max-height: 300px !important;
    overflow-y: auto !important;
}

/* Якщо список "залазить" під нижній блок */
.simplecheckout-customer-block, 
.simplecheckout-shipping-block {
    position: relative !important;
    z-index: 10 !important;
}

#shipping_address_city, #shipping_address_address_1 {
    position: relative !important;
    z-index: 11 !important;
}

/* 1. РОЗБЛОКУВАННЯ КОНТЕЙНЕРА (Те, що ми бачимо на скриншоті) */
.simplecheckout-block, 
.simplecheckout-block-content, 
.simplecheckout-left-column, 
.simplecheckout-right-column,
#simplecheckout_customer,
#simplecheckout_shipping_address {
    overflow: visible !important;
    position: static !important;
    max-height: none !important;
}

/* 2. ПРИМУСОВЕ ВИВЕДЕННЯ СПИСКУ НА ПЕРЕДНІЙ ПЛАН */
.ui-autocomplete, 
.autocomplete-suggestions, 
.dropdown-menu.autocomplete {
    position: fixed !important; /* Міняємо absolute на fixed, щоб список ігнорував межі всіх блоків */
    z-index: 2147483647 !important;
    background: #ffffff !important;
    border: 2px solid #7369D9 !important;
    border-radius: 10px !important;
    box-shadow: 0 15px 50px rgba(0,0,0,0.3) !important;
    display: block !important;
}

/* 3. ОПУСКАЄМО НИЖНІ БЛОКИ (Про всяк випадок) */
#simplecheckout_shipping_method, 
#simplecheckout_payment_method, 
.simplecheckout-proceed-payment {
    z-index: 1 !important;
    position: relative !important;
}

/* Робимо сірим товар, якщо кнопка має текст "Купити" замінений на щось інше 
   або якщо в onclick немає виклику cart.add */

.product-layout:has(button[onclick*="product/product"]:not([onclick*="cart/add"])) .product-thumb,
.product-layout:has(button.disabled) .product-thumb,
.product-layout:has(button:disabled) .product-thumb {
    filter: grayscale(1) opacity(0.7) !important;
    transition: all 0.3s ease;
}

/* Додаємо напис "Немає в наявності" поверх картинки */
.product-layout:has(button[onclick*="product/product"]:not([onclick*="cart/add"])) .image::before {
    content: "Закінчилось";
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 5px 10px;
    font-size: 11px;
    z-index: 10;
    border-radius: 4px;
}