/*!
Theme Name: Kadence Child
Template: kadence
Author: Kadence WP
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
Text Domain: kadence-child
*/

/* Theme customization starts here
-------------------------------------------------------------- */

/* Отступы заглавного меню */
.site-header-row.site-header-row-center-column {
    grid-template-columns: 200px auto 300px;
}

/* Узкий гамбургер */

.mobile-toggle-open-container .menu-toggle-open .menu-toggle-icon {
    transform: scaleX(0.8);
}

/* Бабочку под слой */
.kb-row-layout-id114_3b7a58-08 {
    overflow: hidden;
}

/* Карточка товара. Квадратная картинка в галерее */
.woocommerce-product-gallery__image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Карточка товара. Отступ от крошек снизу */
.product-title .kadence-breadcrumbs {
        margin-bottom: 4em;
}

/* Карточка товара. Ширина галереи слева */
.woocommerce-page div.product div.images {
    width: 43%;
}

/* Карточка товара. Ширина Заголовка и цены справа */
.woocommerce-page div.product div.summary {
    width: 55%;
}

@media screen and (max-width: 767px) {
  .woocommerce-page div.product div.images {
    width: 100%; /* Строго мобильные */
  }
  .woocommerce-page div.product div.summary {
    width: 100%;
  }
}




/* Показываем стрелки и позиционируем их поверх главного фото */
/* Освобождаем место по бокам от картинки */
.woocommerce-product-gallery .flex-viewport {
    width: calc(100% - 80px) !important;
    margin: 0 auto !important;
    position: relative !important; /* Важно: теперь стрелки будут позиционироваться внутри него */
}

/* Настройки контейнера стрелок */
.woocommerce-product-gallery .flex-direction-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Позиционируем стрелки строго по центру вертикально относительно .flex-viewport */ 
.woocommerce-product-gallery .flex-nav-prev,
.woocommerce-product-gallery .flex-nav-next {
    position: absolute;
    top: 0 !important;
    margin-top: calc((100% - 80px) / 2) !important;
    transform: translateY(-50%);
    z-index: 99;
}
.woocommerce-product-gallery .flex-nav-prev { left: 10px; }
.woocommerce-product-gallery .flex-nav-next { right: 10px; }

/* Делаем ссылки прозрачными, убираем фон и эффекты */
.woocommerce-product-gallery .flex-direction-nav a {
    display: block;
    width: 30px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    background: none !important; /* Без фона */
    border: none !important;     /* Без рамок */
    box-shadow: none !important; /* Без теней */
    pointer-events: auto;
}

/* Выводим крупные красные знаки */
.woocommerce-product-gallery .flex-nav-prev a::before { content: "\2039"; color: #F05273; font-size: 52px; font-weight: 700; font-family: Verdana, Geneva, sans-serif; display: inline-block; transform: scale(1.4, 0.8);}
.woocommerce-product-gallery .flex-nav-next a::before { content: "\203A"; color: #F05273; font-size: 52px; font-weight: 700; font-family: Verdana, Geneva, sans-serif; display: inline-block; transform: scale(1.4, 0.8);}

/* Скрываем стандартный текст "Next/Prev", если он есть */
.woocommerce-product-gallery .flex-direction-nav .flex-prev,
.woocommerce-product-gallery .flex-direction-nav .flex-next { font-size: 0 !important; color: transparent !important; }

/* Отключаем любые изменения цвета при наведении (hover) */
.woocommerce-product-gallery .flex-direction-nav a:hover,
.woocommerce-product-gallery .flex-direction-nav a:hover::before {
    color: #F05273 !important;
    background: none !important;
}



/* Контейнер миниатюр опускается вниз и выравнивается по ширине верхнего слайда */
.woocommerce div.product div.images .flex-control-thumbs {
    max-width: 100%
}

.woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important; /* Направление слева направо */
    justify-content: flex-start !important; /* Выравнивание от левого края */
    margin: 15px auto 0 !important; /* Отступ 15px снизу от главного кадра */
    padding: 0 !important;
    list-style: none !important;
    width: calc(100%) !important; /* Точная ширина верхнего слайда */
    box-sizing: border-box !important;
}

/* Каждый элемент занимает ровно одну треть (33.333%) ширины */
.woocommerce-product-gallery .flex-control-thumbs li {
    width: 33.333% !important; 
    max-width: 33.333% !important;
    flex: 0 0 33.333% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 5px !important; /* Небольшой зазор между ними внутри этой трети */
    box-sizing: border-box !important;
    clear: none !important;
}

/* Картинки заполняют свою ячейку и становятся строго квадратными */
.woocommerce-product-gallery .flex-control-thumbs img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* Высота всегда равна ширине */
    height: auto !important;         /* Защита от искажения пропорций в некоторых темах */
    display: block !important;
    object-fit: cover !important;    /* Картинка аккуратно заполняет квадрат без деформации */
    cursor: pointer;
    border: 1px solid transparent;
}
.woocommerce div.product div.images .flex-control-thumbs li {
    height: 100%;
}

.woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    
    /* Заменяем auto на 0, чтобы контейнер не схлопывался к центру */
    margin: 15px 0 0 !important; 
    
    /* Добавляем внутренние поля по 40px слева и справа */
    padding: 0 35px !important; 
    
    list-style: none !important;
    width: 100% !important; 
    box-sizing: border-box !important;
}


.wp-block-woocommerce-product-collection ul{
    padding-left: 0px;
}


/* Напрямую красим текст внутри кнопки в цвет 9-й палитры Kadence */
.woocommerce div.product .woocommerce-Tabs-panel--description .wc-block-components-product-button__button span {
    color: var(--global-palette9) !important;
}

/* На всякий случай красим и саму ссылку, если она тоже сбросилась */
.woocommerce div.product .woocommerce-Tabs-panel--description .wc-block-components-product-button__button {
    color: var(--global-palette9) !important;
}

/* Десктоп по умолчанию: строго 4 столбца */
.wc-block-product-template__responsive.columns-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Планшеты (меньше 1024px): 3 столбца */
@media (max-width: 1024px) {
    .wc-block-product-template__responsive.columns-4 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Мобильные (меньше 767px): 2 столбца */
@media (max-width: 767px) {
    .wc-block-product-template__responsive.columns-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Узкие мобильные (меньше 480px): 1 столбец */
@media (max-width: 480px) {
    .wc-block-product-template__responsive.columns-4 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}






/* Каталог. Шрифт описания раздела каталога */
.product-archive-title .archive-description {
    font-weight: 600;
    font-size: 22px;
}
/* Карточка товара. Шрифт краткого описания */
.woocommerce .woocommerce-product-details__short-description {
    font-weight: 600;
    color: black;
    font-size: 16px;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .product-archive-title .archive-description {
    font-size: 17px; /* Строго планшеты */
    font-weight: 600;
  }
  .woocommerce .woocommerce-product-details__short-description {
    font-weight: 600;
    color: black;
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .product-archive-title .archive-description {
    font-size: 15px; /* Строго мобильные */
    font-weight: 600;
  }
  .woocommerce .woocommerce-product-details__short-description {
    font-weight: 600;
    color: black;
    font-size: 14px;
  }
}



/* Карточка товара. Описание по центру */
@media screen and (max-width: 767px) {
  /* Селектор контейнера информации о товаре в каталоге */
  .woocommerce div.product .product_title,
  .woocommerce div.product div.summary p.price,
  .woocommerce .woocommerce-product-details__short-description,
  .woocommerce ul.products li.product .woocommerce-product-details__short-description {
    text-align: center !important;
    display: block !important;
  }
}

@media screen and (max-width: 767px) {
  /* Перестраиваем форму в колонку и центрируем элементы */
  .woocommerce div.product form.cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* Центрируем блок выбора количества и задаем отступ снизу */
  .woocommerce div.product form.cart .quantity {
    margin: 0 auto 15px auto !important;
  }

  /* Делаем кнопку по центру и убираем обтекание, если оно было */
  .woocommerce div.product form.cart .button {
    margin: 0 auto !important;
    float: none !important;
    display: block !important;
  }
}



/* 1. Компьютеры и ноутбуки (по умолчанию — всё, что БОЛЬШЕ 1024px) */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px;
}

/* 2. Планшеты (экран меньше или равен 1024px) */
@media screen and (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 3. Мобильные телефоны (экран меньше или равен 767px) */
@media screen and (max-width: 767px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* Сброс старых стилей темы и WooCommerce, чтобы сетка не ломалась */
.woocommerce ul.products li.product {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
    text-align: -webkit-center;
}



/* Стили применятся только к карусели с классом my-blue-slider */
.custom-hits-slider-wrapper.my-blue-slider .custom-hit-card {
    background: #f0f8ff;
    border: 5px solid #0080ff;
}


a.social-button {
    width: 2em;
    height: 1.3em;
}

.footer-widget-area.content-align-center .footer-social-inner-wrap {
    justify-content: start;
}



.related.products .products-title {
    font-style: normal;
    font-weight: 800;
    font-size: 56px;
    line-height: 1;
    letter-spacing: 0em;
    color: var(--global-palette1);
    text-align: center;
    padding-top: 50px;
    text-transform: uppercase;
}
.related.products .products-title::after {
  content: ":";
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .related.products .products-title {
        font-size: 30px;
    }
}

@media screen and (max-width: 767px) {
    .related.products .products-title {
        font-size: 20px;
    }
}


/* Растягиваем кнопки категорий на 100% ширины карточки */
.woocommerce .category-card-button {
    display: flex !important;        /* Включаем flex-режим для центрирования текста */
    justify-content: center;         /* Центрируем текст по горизонтали */
    align-items: center;             /* Центрируем текст по вертикали */
    width: 100% !important;          /* Растягиваем строго на всю ширину картинки */
    box-sizing: border-box !important; /* Защита: паддинги не будут расширять кнопку за края */
    
    /* Ваши настройки шрифта и отступов */
    font-size: 18px !important; 
    padding-top: 14px !important;    
    padding-bottom: 14px !important; 
    padding-left: 5px !important;   
    padding-right: 5px !important;
}

/* Стилизация цифры количества товаров внутри кнопки */
.category-card-button .count {
    font-size: 0.8em !important;     
    opacity: 0.8;                    
    background: transparent !important; 
    margin-left: 6px;                /* Небольшой отступ цифры от текста */
}

@media screen and (min-width: 1025px) and (max-width: 1060px) {
    .main-navigation .primary-menu-container > ul li.menu-item > a {
    font-style: normal;
    font-size: 15px;
    letter-spacing: 0.02em;
}
}