/*
Theme Name: Shopic Child
Description: Дочерняя тема для Shopic. Адаптация для больших экранов.
Author: Ваше имя
Template: shopic
Version: 1.0
*/

/* =========================================== */
/* 1. СБРОС ВСЕХ ОГРАНИЧЕНИЙ ДЛЯ СЕКЦИИ ТОВАРОВ */
/* =========================================== */

/* Убираем ВСЕ ограничения ширины для всей цепочки элементов товаров */
.elementor-element-dc42433,
.elementor-element-dc42433 .elementor-container,
.elementor-element-dc42433 .elementor-column,
.elementor-element-dc42433 .elementor-widget-wrap,
.elementor-element-dc42433 .elementor-widget-shopic-products,
.elementor-element-dc42433 .elementor-widget-container {
    max-width: none !important;
    width: auto !important;
}

/* =========================================== */
/* 2. ИСПРАВЛЕННАЯ СЕТКА ДЛЯ ВСЕХ УСТРОЙСТВ */
/* =========================================== */

/* Сброс для мобильных - не трогаем */
@media screen and (max-width: 767px) {
    /* Оставляем как есть */
}

/* Для планшетов (768px-1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    body .elementor-element-dc42433 ul.products.columns-5 > li.product {
        width: calc(50% - 8px) !important; /* 2 колонки */
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        min-width: 250px !important;
    }
}

/* Для ноутбуков (1024px-1199px) - 5 КОЛОНОК */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
    body .elementor-element-dc42433 .elementor-container {
        max-width: 1280px !important;
        width: 95% !important;
    }
    
    body .elementor-element-dc42433 ul.products.columns-5 > li.product {
        width: calc(20% - 12px) !important; /* 5 колонок */
        flex: 0 0 calc(20% - 12px) !important;
        max-width: calc(20% - 12px) !important;
        min-width: 200px !important;
    }
}

/* Для больших ноутбуков (1200px-1399px) - 5 КОЛОНОК */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
    body .elementor-element-dc42433 .elementor-container {
        max-width: 1350px !important;
        width: 95% !important;
    }
    
    body .elementor-element-dc42433 ul.products.columns-5 > li.product {
        width: calc(20% - 16px) !important; /* 5 колонок */
        flex: 0 0 calc(20% - 16px) !important;
        max-width: calc(20% - 16px) !important;
        min-width: 220px !important;
    }
}

/* Для ПК (1400px-1599px) - 5 КОЛОНОК, ШИРЕ */
@media screen and (min-width: 1400px) and (max-width: 1599px) {
    body .elementor-element-dc42433 .elementor-container {
        max-width: 1550px !important;
        width: 95% !important;
    }
    
    body .elementor-element-dc42433 ul.products.columns-5 > li.product {
        width: calc(20% - 20px) !important; /* 5 колонок */
        flex: 0 0 calc(20% - 20px) !important;
        max-width: calc(20% - 20px) !important;
        min-width: 240px !important;
    }
}

/* Для больших мониторов (1600px-1919px) - 6 КОЛОНОК */
@media screen and (min-width: 1600px) and (max-width: 1919px) {
    body .elementor-element-dc42433 .elementor-container {
        max-width: 1750px !important;
        width: 95% !important;
    }
    
    body .elementor-element-dc42433 ul.products.columns-5 > li.product {
        width: calc(16.666% - 21px) !important; /* 6 колонок */
        flex: 0 0 calc(16.666% - 21px) !important;
        max-width: calc(16.666% - 21px) !important;
        min-width: 240px !important;
    }
}

/* Для Full HD+ (1920px+) - 6-7 КОЛОНОК */
@media screen and (min-width: 1920px) {
    body .elementor-element-dc42433 .elementor-container {
        max-width: 1850px !important;
        width: 96% !important;
    }
    
    body .elementor-element-dc42433 ul.products.columns-5 > li.product {
        width: calc(16.666% - 25px) !important; /* 6 колонок */
        flex: 0 0 calc(16.666% - 25px) !important;
        max-width: calc(16.666% - 25px) !important;
        min-width: 260px !important;
    }
}

/* Общие стили для сетки (для всех разрешений) */
@media screen and (min-width: 768px) {
    body .elementor-element-dc42433 ul.products.columns-5 {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 20px !important;
        width: 100% !important;
    }
}



/* =========================================== */
/* 3. ПЕРЕОПРЕДЕЛЕНИЕ ДРУГИХ КОНТЕЙНЕРОВ */
/* =========================================== */

/* Увеличиваем другие контейнеры на сайте */
@media screen and (min-width: 1024px) {
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 1200px !important;
    }
}

@media screen and (min-width: 1200px) {
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 1400px !important;
    }
}

@media screen and (min-width: 1400px) {
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 1600px !important;
    }
}

@media screen and (min-width: 1600px) {
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 1800px !important;
    }
}
/* Центрируем все изображения логотипов на сайте */
img.attachment-medium.size-medium.wp-image-17817,
img[src*="Безымянный-no-bg-preview-carve.photos"],
img[alt=""][class*="wp-image-17817"] {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Контейнер логотипа по центру */
.elementor-widget-image .elementor-image,
.elementor-widget-image .elementor-widget-container {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}