/*
Theme Name: Uthr - Child
Template: uthr
Version: 1.0.0
Text Domain: uthr
*/
/* --- Адаптивность галереи: Главное изображение на 100% ширины на мобильных --- */

@media screen and (max-width: 768px) {
    /* 1. Контейнер, который содержит основное изображение и миниатюры */
    .woocommerce div.product div.images {
        width: 100% !important; /* Принудительно 100% ширины */
        float: none !important; /* Убираем плавающее позиционирование, которое делает его боковой панелью */
        margin-right: 0 !important; /* Убираем правый отступ, если он был для "боковой панели" */
        margin-bottom: 20px; /* Добавляем отступ снизу для разделения с другим контентом */
    }
    
    /* 2. Контейнер основного изображения (если он тоже имеет плавание) */
    .woocommerce-product-gallery {
        float: none !important; /* Дополнительно убираем плавание для самой галереи */
        width: 100% !important;
    }

    /* 3. Контейнер миниатюр (горизонтальная карусель) */
    .woocommerce div.product div.images ol.flex-control-nav {
        display: flex !important; 
        flex-wrap: nowrap !important;
        width: 100% !important; 
        margin: 10px 0 0 0 !important; 
        padding: 0;
        overflow-x: scroll; /* Горизонтальная прокрутка, если миниатюр много */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* 4. Стиль для элементов списка миниатюр (li) */
    .woocommerce div.product div.images ol.flex-control-nav li {
        width: 25% !important; /* 4 миниатюры в ряду */
        flex-shrink: 0; 
        margin-right: 5px !important; 
        float: none !important; 
    }
}
@media screen and (max-width: 768px) {
    /* 1. Сброс основного контейнера изображения */
    .flex-viewport {
        width: 100% !important; /* ОСНОВНОЕ ИЗОБРАЖЕНИЕ: Полная ширина */
        float: none !important;  /* ОСНОВНОЕ ИЗОБРАЖЕНИЕ: Убираем плавание */
        margin: 0 !important;
    }

    /* 2. Сброс боковой панели миниатюр и принудительное горизонтальное отображение */
    .woocommerce div.product div.images .flex-control-thumbs {
        width: 100% !important; /* МИНИАТЮРЫ: Занимают всю ширину под основным фото */
        float: none !important;  /* МИНИАТЮРЫ: Убираем плавание */
        padding-right: 0 !important;
        margin-top: 10px; /* Небольшой отступ от основного фото */
    }

    /* 3. Применяем flexbox для горизонтального ряда (как мы делали ранее) */
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: 25% !important; /* Например, 4 миниатюры в ряд */
        float: none !important;
        display: inline-block !important; /* Или flex, зависит от FlexSlider */
    }
}
/* --- ПРИНУДИТЕЛЬНО 3 КОЛОНКИ В КАТАЛОГЕ --- */
@media screen and (min-width: 769px) { /* Только для десктопа и планшетов */
    .woocommerce ul.products, .woocommerce-page ul.products {
        display: flex; 
        flex-wrap: wrap;
        margin-left: -10px !important; 
        margin-right: -10px !important; 
    }

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
        /* 33.333% для 3-х колонок минус 20px на отступы */
        width: calc(33.333% - 20px) !important; 
        margin: 0 10px 30px 10px !important; 
        float: none !important; 
        box-sizing: border-box;
    }

    /* Убираем старые правила очистки, которые ломали ряды */
    .woocommerce ul.products li:nth-child(2n), 
    .woocommerce ul.products li:nth-child(3n), 
    .woocommerce ul.products li:nth-child(4n) {
        margin-right: 20px; 
        clear: none !important; 
    }
}

.woocommerce span.onsale{
	top:15px;
	left:5px;
	border: 1px solid #2c413d;
	border-radius: 4px;
	color: #2c413d;
	text-transform: inherit;
background: linear-gradient(262.61deg,rgba(189,9,9,0.2) 0.64%,rgba(194,176,14,0.1625) 29.1%,rgba(22,203,73,0.0972628) 61.71%,rgba(56,77,130,0.0552032) 78.27%,rgba(217,34,34,0) 100%),linear-gradient(0deg,#FFFFFF,#FFFFFF)!important;
}

.woocommerce .product_zoom_gallery span.onsale {
    top: 5px;
    left: 120px;
}
.uthr-page-header{
	padding:25px 0 25px;
}
div.priduct_social.d-flex{
	display:none !important;
}