/*
Theme Name: Astra Child
Template: astra
Version: 1.0.0
*/
/* -------------------------------
   1. Фон всего сайта для всех устройств
--------------------------------- */
body {
    background-color: #ecfdf3 !important;
}





/* -------------------------------
   2. Заголовки категорий (UA + RU)
--------------------------------- */
.woocommerce ul.products li.product h2.woocommerce-loop-category__title,
.page-id-8 ul.products li.product h2.woocommerce-loop-category__title {
    font-size: 18px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    bottom: auto !important; 
    padding: 0 !important;
    margin-top: -10px !important; 
    display: block !important;
}

/* -------------------------------
   3. Эффект увеличения
--------------------------------- */
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product-category img {
    transition: transform 0.3s ease-in-out !important;
}

@media (min-width: 1025px) {
    .woocommerce ul.products li.product:hover img,
    .woocommerce ul.products li.product-category:hover img {
        transform: scale(1.1) !important;
    }
    .astra-shop-thumbnail-wrap, 
    .woocommerce-loop-category__title {
        overflow: hidden !important;
    }
}

/*---------------------------------------------------------------------------
                   4. Скрываем кнопку Фильтр на всех устройствах по умолчанию 
----------------------------------------------------------------------------*/
#toggle-filters-btn {
    display: none !important;
}

/* Показываем кнопку только на экранах меньше 921px (мобильные и планшеты) */
@media (max-width: 921px) {
    #toggle-filters-btn {
        display: block !important;
    }
}

/* ---------------------------------------------------------------------------
                 5. Скрываем иконки и корзину, убираем для айфона двойной клик
------------------------------------------------------------------------------ */
.ast-shop-footer-out-view,
.ast-quick-view-button,
.astra-shop-thumbnail-wrap .ast-on-card-button {
    display: none !important;
}
/* -------------------------------
   Исправления для мобильных
--------------------------------- */
@media (max-width: 1024px) {
    .woocommerce ul.products li.product:hover img {
        opacity: 1 !important;
        transform: none !important;
    }
    .astra-shop-thumbnail-wrap {
        pointer-events: auto !important;
    }
    .astra-shop-thumbnail-wrap::before, 
    .astra-shop-thumbnail-wrap::after {
        display: none !important;
    }
}
.woocommerce ul.products li.product .button {
    display: inline-block !important;
}

/* ---------------------------------------------------------------------------
           6. Таблица характеристик делаем красиво и подгоняем для мобильных
---------------------------------------------------------------------------- */
.product-attributes-table {
  width: 100%;
  max-width: 920px;
  border-collapse: collapse;
  font-size: 14px;
  margin: 20px 0;
  border: 1px solid #d0d7e0;
  background: #f9fbff;
}
.product-attributes-table th,
.product-attributes-table td {
  border: 1px solid #d0d7e0;
  padding: 8px 12px;
  white-space: normal;
  text-align: left;
}
.product-attributes-table th {
  background-color: #c7dbff;
  color: #2c3e50;
  font-weight: 600;
}
.product-attributes-table tr:nth-child(even) td { background-color: #e7f0ff; }
.product-attributes-table tr:nth-child(odd) td { background-color: #ffffff; }

@media (min-width: 768px) {
  .woocommerce div.product .product-attributes-table { margin-left: 0; margin-right: auto; }
}


/* -----------------------------------------------------------------------
                7. Стрелки галереи добавляем на фото товара на странице товара (ПК)
--------------------------------------------------------------------------- */
@media (min-width: 922px) {
    .woocommerce-product-gallery .flex-direction-nav {
        list-style: none; margin: 0; padding: 0; display: block !important;
    }
    .woocommerce-product-gallery .flex-direction-nav a {
        display: flex !important; align-items: center; justify-content: center;
        width: 26px; height: 26px; background-color: rgba(0, 150, 255, 0.2) !important; 
        text-indent: -9999px; border-radius: 50%; transition: all 0.2s ease-in-out;
    }
    .woocommerce-product-gallery .flex-nav-next { right: -15px; position: absolute; top: 35%; }
    .woocommerce-product-gallery .flex-nav-prev { left: -15px; position: absolute; top: 35%; }
    .woocommerce-product-gallery .flex-direction-nav a::before {
        content: ''; display: block; width: 8px; height: 8px;
        border-top: 3px solid #000; border-left: 3px solid #000; position: absolute;
    }
    .woocommerce-product-gallery .flex-nav-prev a::before { transform: rotate(-45deg); left: 10px; }
    .woocommerce-product-gallery .flex-nav-next a::before { transform: rotate(135deg); left: 8px; }
}
/* Скрываем стрелки галереи на мобильных и планшетах */
@media (max-width: 921px) {
    .woocommerce-product-gallery .flex-direction-nav {
        display: none !important;
    }
}
/* ---------------------------------------------------------
                          8. ТОЧКИ ВМЕСТО МИНИАТЮР (Пагинация галереи)
------------------------------------------------------------ */

/* 1. Прячем миниатюры (маленькие фото) */
.woocommerce-product-gallery .flex-control-thumbs {
    display: none !important;
}

/* 2. Контейнер для точек: центрируем и задаем отступы */
.flex-control-nav.flex-control-paging {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    z-index: 10 !important;
}

/* 3. Сами точки (ссылки) */
.flex-control-nav.flex-control-paging li a {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 6px !important;
    background-color: #d1d1d1 !important; /* Светло-серый для неактивных */
    border-radius: 50% !important;
    text-indent: -9999px !important; /* Прячем цифры внутри точек */
    cursor: pointer !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease !important;
}

/* 4. Активная точка (синий цвет под твою цену) */
.flex-control-nav.flex-control-paging li a.flex-active {
    background-color: #1e3a8a !important;
}

/* 5. Эффект при наведении */
.flex-control-nav.flex-control-paging li a:hover {
    background-color: #1e3a8a !important;
    opacity: 0.7;
}

/* -----------------------------------------------------------
                       9. КНОПКА ВЫЗОВА И МОДАЛЬНОЕ ОКНО (Callback)
   Создает круглую кнопку и стилизует всплывающее окно с формой.
-------------------------------------------------------------- */
#callback-btn {
    position: fixed; bottom: 90px; right: 30px; background: #28a745; color: white;
    width: 95px; height: 95px; border-radius: 50%; cursor: pointer; z-index: 999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.2); animation: pulse-green 2s infinite;
}
#callback-btn .dashicons { font-size: 28px; margin-bottom: 3px; width: auto; height: auto; }
#callback-btn .btn-text { font-size: 12px; text-transform: uppercase; font-weight: 800; line-height: 1.2 !important; display: block; }

/* Стили самого всплывающего окна (то, что ты просил добавить) */
#callback-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 10000; display: none;
    justify-content: center; align-items: center; padding: 20px;
}
.callback-content {
    background: white; padding: 45px 30px 30px; border-radius: 15px;
    width: 90%; max-width: 360px; position: relative; color: #333; text-align: center;
}
.close-callback {
    position: absolute; top: 0; right: 15px; font-size: 45px; cursor: pointer; color: #aaa; line-height: 1;
}
.callback-content input { width: 100%; margin-bottom: 15px; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; color: #333; }
#cb-submit-btn { width: 100%; background: #28a745; color: white; border: none; padding: 14px; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 16px; text-transform: uppercase; }

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(40, 167, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}
@media (max-width: 544px) {
    /* Сама кнопка */
    #callback-btn { 
        width: 80px; 
        height: 80px; 
        bottom: 20px !important; 
        right: 20px !important; 
    }
    /* Текст внутри (уменьшаем, чтобы влез) */
    #callback-btn .btn-text { 
        font-size: 9px !important; 
        line-height: 1.1 !important; 
    }
    /* Иконка внутри (чуть меньше) */
    #callback-btn .dashicons { 
        font-size: 22px; 
    }
}

/* -------------------------------------------------------------------------
                  10. Сетка товара для ПК (экраны шире 921px)
----------------------------------------------------------------------------- */
@media (min-width: 922px) {
    .woocommerce div.product div.images { 
        width: 35% !important; 
        float: left !important; 
        margin-left: -15px !important; 
    }
    .woocommerce div.product div.summary { 
        width: 62% !important; 
        float: right !important; 
    }
}

/* ---------------------------------------------------------------------------
                  11. Фиксация размера фото (чтобы не прыгало при перелистывании)
------------------------------------------------------------------------------ */
/* Настройка на ПК */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    height: 800px !important; 
    display: block !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 800px !important; 
    object-fit: contain !important; /* Вписывает фото без обрезки */
    background-color: #ffffff;    /* Белый фон, если фото не на весь блок */
}

/* Настройка на мобильных (чтобы не было слишком огромным) */
@media (max-width: 921px) {
    .woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
    .woocommerce div.product div.images .woocommerce-product-gallery__image img {
        height: 400px !important; 
    }
}
/*--------------------------------------------------------------------------------
                   12. Размер цены в общем каталоге (ПК и мобильные) 
-----------------------------------------------------------------------------------*/
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
    font-size: 20px !important; 
    font-weight: 700 !important; 
    color: #1e3a8a !important; 
    display: block !important;
    margin-bottom: 5px !important;
}

@media (max-width: 921px) {
    .woocommerce ul.products li.product .price,
    .woocommerce ul.products li.product .price .woocommerce-Price-amount {
        font-size: 18px !important; 
    }
}
/* Старая цена */
.woocommerce ul.products li.product .price del .woocommerce-Price-amount {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #999 !important;
    margin-right: 5px;
}

  /* -----------------------------------------------------------------------------------
                               13 Кнопка "Купить сейчас" (ПК и Мобильные) 
    -----------------------------------------------------------------------------*/
       /* 13.1 СТИЛИ ДЛЯ ПК (Кнопки в одну линию и одинаковые) */
@media (min-width: 922px) {
    .single-product .cart {
        display: flex !important;
        align-items: center !important;
        gap: 10px; /* Расстояние между кнопками */
    }
    
    /* Делаем обе кнопки одинаковыми по размеру */
    .single-product .cart .single_add_to_cart_button,
    .buy-now-button {
        flex: 1; /* Растягивает их поровну */
        height: 50px; /* Фиксированная высота для обеих */
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
    }
}

          /* 13.2 СТИЛИ ДЛЯ МОБИЛЬНОГО (Кнопки друг под другом на всю ширину) */
@media (max-width: 921px) {
    .single-product .cart {
        display: flex !important;
        flex-direction: column !important; /* Ставим в колонку */
    }

    .single-product .cart .single_add_to_cart_button,
    .buy-now-button {
        width: 100% !important; /* На всю ширину */
        margin: 5px 0 !important; /* Отступ между кнопками, чтобы не наезжали */
        padding: 15px !important;
        display: block !important;
        text-align: center;
    }
}
/* Цвет и шрифт для "Купить сейчас" (если еще не добавил) */
.buy-now-button {
    background-color: #ff9800 !important;
    color: #fff !important;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
}
/* -----------------------------------------------------------
                           14. ЧЕКБОКСЫ В ФИЛЬТРАХ (Галочки)
-------------------------------------------------------------- */
#secondary .widget_layered_nav ul li a::before {
    content: ""; display: inline-block; width: 16px; height: 16px;
    border: 1px solid #ccc; border-radius: 3px; margin-right: 10px; vertical-align: middle; background: #fff;
}
#secondary .widget_layered_nav ul li.chosen a::before {
    background-color: #28a745; border-color: #28a745; content: "✓";
    color: white; font-size: 12px; line-height: 15px; text-align: center; font-weight: bold;
}
/* -----------------------------------------------------------
                           15. КНОПКА СБРОСА ФИЛЬТРОВ
-------------------------------------------------------------- */
.reset-filters-container { margin: 15px 0 !important; display: block !important; }
.reset-all-filters-btn {
    display: inline-block !important; background-color: #f3f4f6 !important; color: #4b5563 !important;
    padding: 6px 14px !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 4px !important;
    border: 1px solid #d1d5db !important; text-decoration: none !important;
}
.reset-all-filters-btn::before { content: "✕"; margin-right: 7px; font-size: 10px; }
/* -----------------------------------------------------------
                          16. СТИЛИЗАЦИЯ ФИЛЬТРОВ (Для ПК)
-------------------------------------------------------------- */
@media (min-width: 922px) {
    .mobile-done-btn { display: none !important; }
    #secondary .widget { margin-bottom: 5px !important; }
    #secondary .widget-title { font-size: 16px !important; font-weight: 600 !important; margin-bottom: 5px !important; padding-bottom: 0 !important; }
   /* Уменьшаем только цифры в скобках на ПК */
    #secondary ul li .count {
        font-size: 11px !important;    /* Размер шрифта цифр */
        opacity: 0.6 !important;       /* Делаем их бледнее */
        margin-left: 4px !important;   /* Отступ от текста */
    }
}

/* -----------------------------------------------------------
                       17. СКРЫТИЕ ТЕКСТА "ОТОБРАЖЕНИЕ РЕЗУЛЬТАТОВ"
-------------------------------------------------------------- */
.woocommerce-result-count {
    display: none !important;
}
/* ----------------------------------------------------------------------
                18. ВЫРАВНИВАНИЕ ФИЛЬТРОВ И строки СОРТИРОВКА (ПК ВЕРСИЯ)
-------------------------------------------------------------------------- */
@media (min-width: 922px) {
    /* 1. Позволяем блоку фильтров занимать место слева */
    .custom-active-filters {
        display: inline-block !important;
        vertical-align: middle !important;
        margin: 0 20px 15px 0 !important;
        width: auto !important;
        float: left !important; /* Прижимаем к левому краю */
    }

    /* 2. Прижимаем сортировку к правому краю */
    .woocommerce-ordering {
        display: inline-block !important;
        vertical-align: middle !important;
        margin: 0 0 15px 0 !important;
        float: right !important; /* Прижимаем к правому краю */
    }

    /* 3. Очистка потока, чтобы товары не налезли на фильтры */
    .ast-shop-control-bar::after,
    .site-main::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }

    /* 4. Убираем лишний зазор сверху у сетки товаров */
    #primary {
        clear: both !important;
        margin-top: 10px !important;
    }
}
/*-----------------------------------------------------------------------------
                  19 ОТСТУП И РАЗМЕР ХЛЕБНЫХ КРОШЕК (ТОЛЬКО ПК) 
-------------------------------------------------------------------------------*/
@media (min-width: 922px) {
    .ast-breadcrumbs-wrapper, 
    .woocommerce-breadcrumb { 
        margin-top: 7px !important;    /* Отступ только сверху */
        margin-bottom: 0 !important;      /* Обнуляем нижний, чтобы не плодить дыры */
        font-size: 16px !important;       /* Твой размер шрифта */
    }
}
/* -------------------------------------------------------------------------------
                       20. ХЛЕБНЫЕ КРОШКИ (ТОЛЬКО МОБИЛЬНАЯ ВЕРСИЯ) 
-------------------------------------------------------------------------------*/
@media (max-width: 921px) {
    .ast-breadcrumbs-wrapper, 
    .woocommerce-breadcrumb,
    .woocommerce-breadcrumb a { 
        margin-top: 10px !important;    /* Отступ от хедера */
        font-size: 18px !important;     /* Увеличенный размер шрифта для мобилок */
        display: block !important;
        padding-left: 15px !important;  /* Чтобы текст не прилипал к краю экрана */
    }
}
/*-------------------------------------------------------------------------
                       21. Подтягиваем саму кнопку филтры  выше 
--------------------------------------------------------------------------*/
    .mobile-only-filter-btn { 
        display: block !important; 
        margin-top: -40px !important; /* Отрицательный отступ тянет кнопку вверх */
        margin-bottom: 10px !important;
        position: relative !important;
        z-index: 5 !important;
    }

/* -----------------------------------------------------------
                   22. КНОПКА-ТРИГГЕР ФИЛЬТРОВ (Для мобильных)
-------------------------------------------------------------- */
.mobile-only-filter-btn {
    display: none; /* Прячем на ПК */
    width: 100%; 
    padding: 14px; 
    background-color: #28a745 !important;
    color: #fff !important; 
    border: none; 
    border-radius: 5px; 
    font-weight: bold;
    margin-bottom: 20px; 
    transition: background-color 0.3s ease; 
    cursor: pointer;
    text-transform: uppercase; 
    text-align: center;
}
.mobile-only-filter-btn.active { 
    background-color: #007bff !important; 
}

/* ----------------------------------------------------------------------------
                      23. ВЫЕЗЖАЮЩАЯ ПАНЕЛЬ ФИЛЬТРОВ (Sidebar шторка)
--------------------------------------------------------------------------- */
@media (max-width: 921px) {
.mobile-only-filter-btn { 
    display: block !important; 
    width: 100% !important; 
    background-color: #28a745 !important; 
    position: sticky !important; /* Возвращаем липкость */
    top: 0 !important;           /* Фиксируем у верхнего края при скролле */
    z-index: 10 !important;    /* Число МЕНЬШЕ, чем у шторки (1000000) */
    margin-bottom: 20px !important;
}
    #secondary {
        display: block !important; position: fixed !important; top: 0 !important;
        left: -400px !important; width: 300px !important; max-width: 85% !important; 
        height: 100% !important; background: #ffffff !important; z-index: 1000000 !important;
        padding: 40px 15px 80px 15px !important; box-shadow: 5px 0 15px rgba(0,0,0,0.3) !important;
        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; overflow-y: auto !important;
        overscroll-behavior: contain !important; /* ЗАПРЕЩАЕТ прокрутку фона, когда скроллишь шторку */
    }
/*------------------------------------------------------------------------------
                 24. Уменьшаем шрифт количества товаров в фильт
-----------------------------------------------------------------------------*/
#secondary ul li .count {
    font-size: 11px !important;    /* Шрифт меньше, чем у основного текста (13px) */
    opacity: 0.7 !important;       /* Делаем число чуть бледнее, чтобы не отвлекало */
    margin-left: 5px !important;   /* Отступ от названия атрибута */
    vertical-align: middle !important; /* Выравнивание по центру строки */
}
    #secondary.show-sidebar { left: 0 !important; }
    .close-sidebar-btn { position: absolute; top: 10px; right: 20px; font-size: 30px; color: #333; cursor: pointer; font-weight: bold; }
    .mobile-done-btn {
        display: block !important; width: 70% !important; margin: -20px auto 20px auto !important;
        padding: 12px !important; background-color: #007bff !important; color: #fff !important;
        border: none !important; border-radius: 5px !important; text-transform: uppercase !important; font-size: 14px !important; cursor: pointer !important;
    }
    .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999999; }
    .sidebar-overlay.show { display: block; }
    
/*---------------------------------------------------------------------------
                   25. Уменьшаем заголовки фильтров (например: "Бренд", "Цвет") 
----------------------------------------------------------------------------*/
#secondary .widget-title {
    font-size: 18px !important;    /* Уменьшили размер текста заголовка */
    margin-bottom: 0px !important; /* Уменьшили отступ под заголовком */
    line-height: 1.5 !important;    /* Ужали межстрочный интервал заголовка */
}

/*-----------------------------------------------------------------------------
             26.Уменьшаем сами пункты списка (названия категорий или атрибутов) 
-----------------------------------------------------------------------------*/
#secondary ul li {
    font-size: 17px !important;    /* Сделали текст пунктов меньше */
    padding-top: 2px !important;   /* Уменьшили верхний отступ пункта */
    padding-bottom: 3px !important;/* Уменьшили нижний отступ пункта */
    margin: 1 !important;          /* Убрали внешние отступы между строками */
    line-height: 1.2 !important;    /* Максимально ужали расстояние между строками текста */
}

/* Если в фильтрах есть ссылки, применяем компактность и к ним */
#secondary ul li a {
    padding: 2px 0 !important;     /* Уменьшили область клика по вертикали для плотности */
    display: inline-block !important;
}

/* Уменьшаем отступы между целыми блоками виджетов */
#secondary .widget {
    margin-bottom: 2px !important; /* Чтобы блоки фильтров стояли плотнее друг к другу */
}
/*-----------------------------------------------------------------------------
              27. Уменьшаем текст абзацев на мобильных
-----------------------------------------------------------------------------*/
p {
    font-size: 15px !important; /* Укажи нужный размер, например 15px или 14px */
    line-height: 1.5 !important; /* Межстрочный интервал для читабельности */
}
    
    
}
@media (max-width: 921px) {
    /* Скрываем картинку (логотип) внутри блока группы на мобильных */
    .wp-block-group .wp-block-image {
        display: none !important;
    }
}