21/* --- 1. КРАСНАЯ КОРОБОЧКА (ФОН) --- */
html body .sale_block .sale-number {
    background: #FF0000 !important;      /* Красный фон */
    border-color: #FF0000 !important;    /* Красная рамка */
    opacity: 1 !important;
}
/* --- 2. ЦИФРА ПРОЦЕНТА (-12%) + ТЕНЬ --- */
html body .sale_block .sale-number .value,
html body .sale_block .sale-number .value span {
    color: #ffffff !important;           /* Белый текст */
    font-size: 16px !important;          /* Крупный размер */
    line-height: 1 !important;
}
/* --- 3. ТЕКСТ "ЭКОНОМИЯ" + ТЕНЬ --- */
html body .sale_block .inner-sale,
html body .sale_block .inner-sale .text, 
html body .sale_block .inner-sale .price_diff {
    color: #ffffff !important;           /* Белый цвет текста */
    background:#FF0000 !important;      /* Красный фон */
}
/* --- КРАСИМ ТЕКСТ АКЦИИ (ИСПРАВЛЕНО) --- */
/* 1. Красим сам текст "Скидки 15%..." */
html body .list-sales-compact-item__title span.dark-color,
html body .list-sales-compact-item__title span.dotted {
    color: #1E90FF !important;       /* Красный цвет текста */
    border-bottom-color: #FF0000 !important; /* Красим пунктирную линию под текстом */
}
/* 2. При наведении мышки делаем цвет чуть ярче (по желанию) */
html body .list-sales-compact-item__title:hover span.dark-color {
    color: #ff0000 !important;
    border-bottom-color: #ff0000 !important;
}
/* Вариант с нижним подчеркиванием - самый вероятный */
.basket_fly .price_name {
    display: none !important;
}
#showDiscountBtn:hover{opacity:0.8;}
#showDiscountBtn{
	background: #6f06b1;
    color: white;
    border: none;
    padding: 16px 26px 14px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 400;
    margin-top: 10px;
	font-size:12px;
	width:100%;
	line-height:1.3em;
	margin-bottom:10px;
}
.dis_pr{font-size: 0.6em;
    font-weight: 400;}
/* --- 5. КРАСИМ СТИКЕРЫ  --- */
.stickers [class*="sticker_"].sticker_jacob_delafon {
    background-color: #8A2BE2 !important; /* Замените #ff9900 на код вашего цвета */
}
.stickers [class*="sticker_"].sticker_unitazy {
    background-color: #FF8C00 !important; /* Замените #ff9900 на код вашего цвета */
}
.stickers [class*="sticker_"].sticker_installyatsii {
    background-color: #1E90FF !important; /* Замените #ff9900 на код вашего цвета */
}
.stickers [class*="sticker_"].sticker_trapy {
    background-color: #A52A2A !important; /* Замените #ff9900 на код вашего цвета */
}
.price_percent{
	margin-left:10px;
	background-color: #6eade1;
    color: #ffffff;
	outline-offset: -2px;
    font-size: 13px;
	font-weight:400;
    line-height: 15px;
    padding-inline: 8px;
	border-radius: 2px;
    border: 1px solid #6eade1;
    text-decoration: none;
}
/* --- 6. КРАСИМ СТИКЕРЫ  --- */
.stickers [class*="sticker_"].sticker_uznat_skidku {
    background-color: #800080 !important; /* Замените #ff9900 на код вашего цвета */
}
/* --- 6. КРАСИМ СТИКЕРЫ  --- */
.stickers [class*="sticker_"].sticker_ideal_standard{
    background-color: #DAA520 !important; /* Замените #ff9900 на код вашего цвета */
}
/* --- 6. КРАСИМ СТИКЕРЫ  --- */
.stickers [class*="sticker_"].sticker_hansgrohe{
    background-color: #696969 !important; /* Замените #ff9900 на код вашего цвета */
}

/* --- 6. КРАСИМ СТИКЕРЫ  --- */
.stickers [class*="sticker_"].sticker_super_tsena{
    background-color: #FF0000 !important; /* Замените #60c339 на код вашего цвета */
}

/* Перекрашиваем желтый процент скидки в блоке цены в красный */
.sale_block .sale-number {
    background: #FF0000 !important; /* Заменяем желтый #ffd83a на красный */
    color: #ffffff !important; /* Делаем текст белым, чтобы он не сливался с красным фоном */
}

/* Убираем "По умолчанию (убывание)" */
.dropdown-select__list-item:has(a[href*="sort=SORT" i][href*="order=desc" i]),
a[href*="sort=SORT" i][href*="order=desc" i] {
    display: none !important;
}
body:not(.sort-ready) .dropdown-select__title { visibility: hidden; }

/* Тень для всего светлого текста на внутренних баннерах (включая заголовки и описания) */
.side-childs .item_inner .wrap_tizer.light_text,
.side-childs .item_inner .wrap_tizer.light_text * {
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7), 0px 0px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Поднимаем виджет чата над нижним мобильным меню (Аспро) */
@media (max-width: 767px) {
    /* Селекторы для стандартного виджета Битрикс24 */
    .b24-widget-button-wrapper,
    .b24-widget-button-position-bottom-right {
        bottom: 120px !important; /* Поднимаем кнопку (высота меню обычно 60-70px + небольшой зазор) */
        transition: bottom 0.3s ease; /* Плавное смещение, если виджет анимирован */
    }
}

/* Увеличение touch-зоны для иконок "Избранное" и "Сравнение" на мобильных */
@media (max-width: 767px) {
    /* Применяем 44px к самой невидимой кнопке-обертке, на которую нажимает палец */
    .catalog_block .like_icons .wish_item,
    .catalog_block .like_icons .compare_item,
    .like_icons .wish_item,
    .like_icons .compare_item {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center; /* Центрируем иконку 32px по вертикали внутри зоны 44px */
        justify-content: center; /* Центрируем по горизонтали */
        margin-right: 8px !important; /* Запас между кнопками */
        padding: 0 !important;
    }

    /* Убираем отступ у самой последней иконки */
    .like_icons > *:last-child {
        margin-right: 0 !important;
    }
}

/* Стили для мобильной кнопки "Наверх" */
@media (max-width: 767px) {
    .mobile-up-button {
        position: fixed;
        bottom: 210px; /* Размещаем НАД кнопкой чата, которая находится на 80px */
        right: 16px;   /* Выравниваем по тому же правому краю */
        width: 44px;
        height: 44px;
        background-color: #6eade1; /* Фирменный синий цвет (можете заменить на свой hex) */
        border-radius: 50%;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        z-index: 999 !important;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in-out;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Рисуем белую стрелочку внутри кнопки */
    .mobile-up-button::before {
        content: '';
        width: 10px;
        height: 10px;
        border-top: 3px solid #ffffff;
        border-left: 3px solid #ffffff;
        transform: rotate(45deg);
        margin-top: 4px; /* Небольшое смещение для оптического центра */
    }

    /* Класс, который добавляется скриптом при прокрутке */
    .mobile-up-button.is-active {
        opacity: 1;
        visibility: visible;
    }
}

/* Повышение контрастности подзаголовка (Ванная комната - Дизайн) в компоненте Lookbook */
.lookbook__info-section {
    color: #333333 !important; /* Меняем тусклый #999 на хорошо читаемый темно-серый */
    font-weight: 500 !important; /* Опционально: делаем шрифт капельку плотнее для лучшей читаемости */
}

/* Оптимизация размера заголовка H1 для мобильных устройств (рекомендация 3.4) */
@media (max-width: 767px) {
    h1, 
    #pagetitle {
        font-size: 21px !important; /* Уменьшаем размер шрифта (21px - золотая середина) */
        line-height: 1.25 !important; /* Делаем межстрочный интервал плотнее */
        margin-bottom: 12px !important; /* Чуть поджимаем отступ снизу, чтобы подтянуть контент выше */
    }
}

/* Оптимизация навигации по табам на мобильных (рекомендация 3.5) */
@media (max-width: 767px) {
    /* 1. Полностью прячем блок со стрелками навигации */
    .tabs.arrow_scroll .arrows_wrapper {
        display: none !important;
    }

    /* 2. Включаем нативный свайп для полосы с табами */
    .tabs.arrow_scroll .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;  /* Запрещает перенос табов на вторую строку */
        overflow-x: auto !important;  /* Включает горизонтальную прокрутку */
        overflow-y: hidden !important;
        scroll-behavior: smooth !important;  /* Делает движение мягким и плавным */
        -webkit-overflow-scrolling: touch !important; /* Плавный скролл по инерции на iOS */
        transform: none !important; /* Жестко отключаем скрипт Аспро, который пытался двигать табы */
        padding-right: 40px !important; /* Даем отступ справа, чтобы последний таб не уходил под тень */
    }

    /* Убираем видимый системный скроллбар (полосу прокрутки) для эстетики */
    .tabs.arrow_scroll .nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    /* 3. Рисуем легкий белый градиент справа, показывая, что там есть продолжение */
    .tabs.arrow_scroll {
        position: relative !important;
    }
    
    .tabs.arrow_scroll::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 45px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
        pointer-events: none; /* Делаем тень "прозрачной" для кликов, чтобы она не блокировала нажатие на таб */
        z-index: 5;
    }
}

/* Увеличение шрифта и контрастности характеристик только для мобильных (рекомендация 3.8) */
@media (max-width: 767px) {
    /* Увеличиваем значения характеристик и делаем цвет более читаемым */
    .properties-group__item .properties-group__value-wrap,
    .properties-group__item .properties-group__value-wrap a {
        font-size: 15px !important; /* Было слишком мелко, делаем 15px (золотая середина) */
        color: #1c82c4 !important; /* Меняем бледный голубой на ваш фирменный, более контрастный синий */
        line-height: 1.3 !important;
    }

    /* Немного увеличиваем названия самих характеристик (слева) для визуального баланса */
    .properties-group__item .properties-group__name-wrap {
        font-size: 15px !important; 
    }
    
    /* Чуть раздвигаем строки характеристик между собой, чтобы в них было легче попасть пальцем */
    .properties-group__item {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}

/* Увеличение touch-зоны крестика в комплектах на мобильных (рекомендация 3.7) */
@media (max-width: 767px) {
    /* Создаем круглую серую кнопку из контейнера крестика */
    .bx-added-item-table-cell-del .bx-added-item-delete {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #f9f9f9 !important; /* Светло-серый фон */
        border-radius: 50% !important; /* Делаем идеальный круг */
        cursor: pointer !important;
        margin: 0 auto !important; /* Выравниваем по центру колонки */
    }

    /* Настраиваем саму иконку, чтобы она стояла строго по центру круга */
    .bx-added-item-table-cell-del .bx-added-item-delete i.svg {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 14px !important;
        height: 14px !important;
    }
    
    /* Делаем сам крестик чуть темнее для контраста */
    .bx-added-item-table-cell-del .bx-added-item-delete svg path {
        fill: #666666 !important;
    }
}21/* --- 1. КРАСНАЯ КОРОБОЧКА (ФОН) --- */
html body .sale_block .sale-number {
    background: #FF0000 !important;      /* Красный фон */
    border-color: #FF0000 !important;    /* Красная рамка */
    opacity: 1 !important;
}
/* --- 2. ЦИФРА ПРОЦЕНТА (-12%) + ТЕНЬ --- */
html body .sale_block .sale-number .value,
html body .sale_block .sale-number .value span {
    color: #ffffff !important;           /* Белый текст */
    font-size: 16px !important;          /* Крупный размер */
    line-height: 1 !important;
}
/* --- 3. ТЕКСТ "ЭКОНОМИЯ" + ТЕНЬ --- */
html body .sale_block .inner-sale,
html body .sale_block .inner-sale .text, 
html body .sale_block .inner-sale .price_diff {
    color: #ffffff !important;           /* Белый цвет текста */
    background:#FF0000 !important;      /* Красный фон */
}
/* --- КРАСИМ ТЕКСТ АКЦИИ (ИСПРАВЛЕНО) --- */
/* 1. Красим сам текст "Скидки 15%..." */
html body .list-sales-compact-item__title span.dark-color,
html body .list-sales-compact-item__title span.dotted {
    color: #1E90FF !important;       /* Красный цвет текста */
    border-bottom-color: #FF0000 !important; /* Красим пунктирную линию под текстом */
}
/* 2. При наведении мышки делаем цвет чуть ярче (по желанию) */
html body .list-sales-compact-item__title:hover span.dark-color {
    color: #ff0000 !important;
    border-bottom-color: #ff0000 !important;
}
/* Вариант с нижним подчеркиванием - самый вероятный */
.basket_fly .price_name {
    display: none !important;
}
#showDiscountBtn:hover{opacity:0.8;}
#showDiscountBtn{
	background: #6f06b1;
    color: white;
    border: none;
    padding: 16px 26px 14px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 400;
    margin-top: 10px;
	font-size:12px;
	width:100%;
	line-height:1.3em;
	margin-bottom:10px;
}
.dis_pr{font-size: 0.6em;
    font-weight: 400;}
/* --- 5. КРАСИМ СТИКЕРЫ  --- */
.stickers [class*="sticker_"].sticker_jacob_delafon {
    background-color: #8A2BE2 !important; /* Замените #ff9900 на код вашего цвета */
}
.stickers [class*="sticker_"].sticker_unitazy {
    background-color: #FF8C00 !important; /* Замените #ff9900 на код вашего цвета */
}
.stickers [class*="sticker_"].sticker_installyatsii {
    background-color: #1E90FF !important; /* Замените #ff9900 на код вашего цвета */
}
.stickers [class*="sticker_"].sticker_trapy {
    background-color: #A52A2A !important; /* Замените #ff9900 на код вашего цвета */
}
.price_percent{
	margin-left:10px;
	background-color: #6eade1;
    color: #ffffff;
	outline-offset: -2px;
    font-size: 13px;
	font-weight:400;
    line-height: 15px;
    padding-inline: 8px;
	border-radius: 2px;
    border: 1px solid #6eade1;
    text-decoration: none;
}
/* --- 6. КРАСИМ СТИКЕРЫ  --- */
.stickers [class*="sticker_"].sticker_uznat_skidku {
    background-color: #800080 !important; /* Замените #ff9900 на код вашего цвета */
}
/* --- 6. КРАСИМ СТИКЕРЫ  --- */
.stickers [class*="sticker_"].sticker_ideal_standard{
    background-color: #DAA520 !important; /* Замените #ff9900 на код вашего цвета */
}
/* --- 6. КРАСИМ СТИКЕРЫ  --- */
.stickers [class*="sticker_"].sticker_hansgrohe{
    background-color: #696969 !important; /* Замените #ff9900 на код вашего цвета */
}

/* Перекрашиваем желтый процент скидки в блоке цены в красный */
.sale_block .sale-number {
    background: #FF0000 !important; /* Заменяем желтый #ffd83a на красный */
    color: #ffffff !important; /* Делаем текст белым, чтобы он не сливался с красным фоном */
}

/* Убираем "По умолчанию (убывание)" */
.dropdown-select__list-item:has(a[href*="sort=SORT" i][href*="order=desc" i]),
a[href*="sort=SORT" i][href*="order=desc" i] {
    display: none !important;
}
body:not(.sort-ready) .dropdown-select__title { visibility: hidden; }

/* Тень для всего светлого текста на внутренних баннерах (включая заголовки и описания) */
.side-childs .item_inner .wrap_tizer.light_text,
.side-childs .item_inner .wrap_tizer.light_text * {
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7), 0px 0px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Поднимаем виджет чата над нижним мобильным меню (Аспро) */
@media (max-width: 767px) {
    /* Селекторы для стандартного виджета Битрикс24 */
    .b24-widget-button-wrapper,
    .b24-widget-button-position-bottom-right {
        bottom: 120px !important; /* Поднимаем кнопку (высота меню обычно 60-70px + небольшой зазор) */
        transition: bottom 0.3s ease; /* Плавное смещение, если виджет анимирован */
    }
}

/* Увеличение touch-зоны для иконок "Избранное" и "Сравнение" на мобильных */
@media (max-width: 767px) {
    /* Применяем 44px к самой невидимой кнопке-обертке, на которую нажимает палец */
    .catalog_block .like_icons .wish_item,
    .catalog_block .like_icons .compare_item,
    .like_icons .wish_item,
    .like_icons .compare_item {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center; /* Центрируем иконку 32px по вертикали внутри зоны 44px */
        justify-content: center; /* Центрируем по горизонтали */
        margin-right: 8px !important; /* Запас между кнопками */
        padding: 0 !important;
    }

    /* Убираем отступ у самой последней иконки */
    .like_icons > *:last-child {
        margin-right: 0 !important;
    }
}

/* Стили для мобильной кнопки "Наверх" */
@media (max-width: 767px) {
    .mobile-up-button {
        position: fixed;
        bottom: 210px; /* Размещаем НАД кнопкой чата, которая находится на 80px */
        right: 16px;   /* Выравниваем по тому же правому краю */
        width: 44px;
        height: 44px;
        background-color: #6eade1; /* Фирменный синий цвет (можете заменить на свой hex) */
        border-radius: 50%;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        z-index: 999 !important;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in-out;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Рисуем белую стрелочку внутри кнопки */
    .mobile-up-button::before {
        content: '';
        width: 10px;
        height: 10px;
        border-top: 3px solid #ffffff;
        border-left: 3px solid #ffffff;
        transform: rotate(45deg);
        margin-top: 4px; /* Небольшое смещение для оптического центра */
    }

    /* Класс, который добавляется скриптом при прокрутке */
    .mobile-up-button.is-active {
        opacity: 1;
        visibility: visible;
    }
}

/* Повышение контрастности подзаголовка (Ванная комната - Дизайн) в компоненте Lookbook */
.lookbook__info-section {
    color: #333333 !important; /* Меняем тусклый #999 на хорошо читаемый темно-серый */
    font-weight: 500 !important; /* Опционально: делаем шрифт капельку плотнее для лучшей читаемости */
}

/* Оптимизация размера заголовка H1 для мобильных устройств (рекомендация 3.4) */
@media (max-width: 767px) {
    h1, 
    #pagetitle {
        font-size: 21px !important; /* Уменьшаем размер шрифта (21px - золотая середина) */
        line-height: 1.25 !important; /* Делаем межстрочный интервал плотнее */
        margin-bottom: 12px !important; /* Чуть поджимаем отступ снизу, чтобы подтянуть контент выше */
    }
}

/* Оптимизация навигации по табам на мобильных (рекомендация 3.5) */
@media (max-width: 767px) {
    /* 1. Полностью прячем блок со стрелками навигации */
    .tabs.arrow_scroll .arrows_wrapper {
        display: none !important;
    }

    /* 2. Включаем нативный свайп для полосы с табами */
    .tabs.arrow_scroll .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;  /* Запрещает перенос табов на вторую строку */
        overflow-x: auto !important;  /* Включает горизонтальную прокрутку */
        overflow-y: hidden !important;
        scroll-behavior: smooth !important;  /* Делает движение мягким и плавным */
        -webkit-overflow-scrolling: touch !important; /* Плавный скролл по инерции на iOS */
        transform: none !important; /* Жестко отключаем скрипт Аспро, который пытался двигать табы */
        padding-right: 40px !important; /* Даем отступ справа, чтобы последний таб не уходил под тень */
    }

    /* Убираем видимый системный скроллбар (полосу прокрутки) для эстетики */
    .tabs.arrow_scroll .nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    /* 3. Рисуем легкий белый градиент справа, показывая, что там есть продолжение */
    .tabs.arrow_scroll {
        position: relative !important;
    }
    
    .tabs.arrow_scroll::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 45px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
        pointer-events: none; /* Делаем тень "прозрачной" для кликов, чтобы она не блокировала нажатие на таб */
        z-index: 5;
    }
}

/* Увеличение шрифта и контрастности характеристик только для мобильных (рекомендация 3.8) */
@media (max-width: 767px) {
    /* Увеличиваем значения характеристик и делаем цвет более читаемым */
    .properties-group__item .properties-group__value-wrap,
    .properties-group__item .properties-group__value-wrap a {
        font-size: 15px !important; /* Было слишком мелко, делаем 15px (золотая середина) */
        color: #1c82c4 !important; /* Меняем бледный голубой на ваш фирменный, более контрастный синий */
        line-height: 1.3 !important;
    }

    /* Немного увеличиваем названия самих характеристик (слева) для визуального баланса */
    .properties-group__item .properties-group__name-wrap {
        font-size: 15px !important; 
    }
    
    /* Чуть раздвигаем строки характеристик между собой, чтобы в них было легче попасть пальцем */
    .properties-group__item {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}

/* Увеличение touch-зоны крестика в комплектах на мобильных (рекомендация 3.7) */
@media (max-width: 767px) {
    /* Создаем круглую серую кнопку из контейнера крестика */
    .bx-added-item-table-cell-del .bx-added-item-delete {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #f9f9f9 !important; /* Светло-серый фон */
        border-radius: 50% !important; /* Делаем идеальный круг */
        cursor: pointer !important;
        margin: 0 auto !important; /* Выравниваем по центру колонки */
    }

    /* Настраиваем саму иконку, чтобы она стояла строго по центру круга */
    .bx-added-item-table-cell-del .bx-added-item-delete i.svg {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 14px !important;
        height: 14px !important;
    }
    
    /* Делаем сам крестик чуть темнее для контраста */
    .bx-added-item-table-cell-del .bx-added-item-delete svg path {
        fill: #666666 !important;
    }
}

/* Повышение контрастности кнопки "В корзину" с помощью тени (только для мобильных) */
@media (max-width: 767px) {
    .catalog_item .button_block .btn.btn-default.to-cart {
        color: #ffffff !important; /* Гарантируем идеально белый цвет текста */
        font-weight: 700 !important; /* Делаем шрифт максимально жирным (Bold) */
        
        /* Добавляем аккуратную темную тень под буквы */
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4) !important; 
        
        /* Чуть раздвигаем буквы, чтобы они не слипались из-за толщины и тени */
        letter-spacing: 0.5px !important; 
    }
}

/* Ультимативное увеличение touch-зон пагинации (только для мобильных) */
@media (max-width: 767px) {
    /* Переделываем стандартные классы Битрикса и Аспро */
    .module-pagination .nums .item,
    .module-pagination .nums a,
    .bx-pagination .bx-pagination-container ul li,
    .bx-pagination .bx-pagination-container ul li a,
    .bx-pagination .bx-pagination-container ul li span {
        min-width: 44px !important;
        min-height: 44px !important;
        
        /* Принудительно делаем элементы блочными, иначе min-width не сработает */
        display: inline-flex !important; 
        align-items: center !important;
        justify-content: center !important;
        
        /* Задаем жесткие отступы */
        margin: 0 4px 8px !important; 
        padding: 0 !important; /* Убираем внутренний отступ, чтобы цифра встала ровно в центр 44x44 */
    }
}

/* Увеличение контрастности текста в SEO-блоках на мобильных (рекомендация 2.6) */
@media (max-width: 767px) {
    .group_description_block p,
    .group_description_block ul,
    .group_description_block li {
        color: #333333 !important; /* Насильно делаем текст темным, перебивая встроенный стиль */
    }
}

/* Улучшение читаемости хлебных крошек на мобильных (рекомендация 2.9) */
@media (max-width: 767px) {
    /* Нацеливаемся на сам текст крошек, ссылки и тире-разделители */
    #navigation .breadcrumbs__item-name,
    #navigation .breadcrumbs__item a,
    #navigation .breadcrumbs__separator {
        font-size: 13px !important; /* Увеличиваем размер шрифта (можно поставить 14px, если покажется мало) */
        color: #666666 !important; /* Меняем бледный светло-серый на контрастный темно-серый */
    }
}

/* --- Улучшение читаемости кнопок в корзине (Шрифт и Контраст) --- */

/* 1. Увеличиваем шрифт для обеих кнопок */
.basket-checkout-block .btn,
.basket-checkout-block-btn .btn,
[data-entity="basket-checkout-button"],
.fast_order.btn {
    font-size: 14px !important;       /* Увеличиваем размер текста */
    font-weight: 600 !important;      /* Делаем шрифт полужирным для читаемости */
    letter-spacing: 0.5px !important; /* Слегка раздвигаем буквы */
}

/* 2. Повышаем контраст для кнопки "КУПИТЬ В 1 КЛИК" */
/* Делаем текст и рамку темно-серыми (ближе к черному) */
.basket-checkout-block .btn-transparent,
.basket-checkout-block .fast_order,
.basket-checkout-block-btn .btn-transparent,
.basket-checkout-block-btn .fast_order {
    color: #333333 !important;        /* Темный текст для высокого контраста */
    border-color: #777777 !important; /* Более темная и заметная рамка */
    background-color: #ffffff !important;
}

/* При наведении на "КУПИТЬ В 1 КЛИК" */
.basket-checkout-block .btn-transparent:hover,
.basket-checkout-block .fast_order:hover,
.basket-checkout-block-btn .btn-transparent:hover,
.basket-checkout-block-btn .fast_order:hover {
    color: #000000 !important;
    border-color: #333333 !important;
    background-color: #f5f5f5 !important;
}

/* 3. Повышаем контраст для кнопки "ПЕРЕЙТИ К ОФОРМЛЕНИЮ" */
/* Если текущий синий фон слишком светлый для белого текста, делаем фон темнее */
.basket-checkout-block .btn-default,
.basket-checkout-block .checkout,
.basket-checkout-block-btn .btn-default,
.basket-checkout-block-btn .checkout,
[data-entity="basket-checkout-button"] {
    background-color: #2167b5 !important; /* Более темный, насыщенный синий цвет */
    color: #ffffff !important;            /* Белый текст */
    border-color: #2167b5 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; /* Легкая тень под текстом для четкости */
}

/* При наведении на "ПЕРЕЙТИ К ОФОРМЛЕНИЮ" */
.basket-checkout-block .btn-default:hover,
.basket-checkout-block-btn .btn-default:hover,
[data-entity="basket-checkout-button"]:hover {
    background-color: #1a5291 !important; /* Еще более темный синий при наведении */
    border-color: #1a5291 !important;
}



/* --- Улучшение читаемости кнопок в корзине (Шрифт и Контраст) --- */

/* 1. Увеличиваем шрифт для обеих кнопок в корзине */
.basket-checkout-block .btn,
.basket-checkout-block-btn .btn,
[data-entity="basket-checkout-button"],
.fast_order.btn {
    font-size: 14px !important;       
    font-weight: 600 !important;      
    letter-spacing: 0.5px !important; 
}

/* 2. Повышаем контраст для кнопки "КУПИТЬ В 1 КЛИК" */
.basket-checkout-block .btn-transparent,
.basket-checkout-block .fast_order,
.basket-checkout-block-btn .btn-transparent,
.basket-checkout-block-btn .fast_order {
    color: #333333 !important;        
    border-color: #777777 !important; 
    background-color: #ffffff !important;
}

.basket-checkout-block .btn-transparent:hover,
.basket-checkout-block .fast_order:hover,
.basket-checkout-block-btn .btn-transparent:hover,
.basket-checkout-block-btn .fast_order:hover {
    color: #000000 !important;
    border-color: #333333 !important;
    background-color: #f5f5f5 !important;
}

/* 3. Повышаем контраст для кнопки "ПЕРЕЙТИ К ОФОРМЛЕНИЮ" */
.basket-checkout-block .btn-default,
.basket-checkout-block .checkout,
.basket-checkout-block-btn .btn-default,
.basket-checkout-block-btn .checkout,
[data-entity="basket-checkout-button"] {
    background-color: #2167b5 !important; 
    color: #ffffff !important;            
    border-color: #2167b5 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; 
}

.basket-checkout-block .btn-default:hover,
.basket-checkout-block-btn .btn-default:hover,
[data-entity="basket-checkout-button"]:hover {
    background-color: #1a5291 !important; 
    border-color: #1a5291 !important;
}


/* --- Улучшение читаемости кнопки "ЗАКАЗАТЬ ЗВОНОК" в шапке --- */

header .callback-block span,
header .callback-block a,
.header-phones .callback-item,
.phone-block .title,
header .phone-block .callback-block {
    font-size: 11px !important;       
    color: #2167b5 !important;        
    font-weight: 600 !important;      
    text-decoration: none !important; 
    letter-spacing: 0.5px !important;
}

header .callback-block span:hover,
header .callback-block a:hover,
.header-phones .callback-item:hover,
.phone-block .title:hover,
header .phone-block .callback-block:hover {
    color: #000000 !important; /* Черный цвет при наведении */
}


/*
 * ===================== КНОПКА «СБРОСИТЬ» В ФИЛЬТРЕ КАТАЛОГА =====================
 */
.custom-filter-reset-btn {
    /*
     * ЧТО ИСПРАВЛЯЕТ: inline-flex центрирует надпись по вертикали и горизонтали.
     * Высота здесь не задана специально: её ставит JS по высоте плашки.
     */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;

    /* ЧТО ИСПРАВЛЯЕТ: кнопку не сжимает, когда плашек много, и надпись не переносится */
    flex-shrink: 0;
    white-space: nowrap;

    /* ЧТО ИСПРАВЛЯЕТ: рамка не увеличивает итоговый размер кнопки */
    box-sizing: border-box;

    /* ЧТО ДЕЛАЕТ: боковые отступы и расстояние до значка воронки и плашек */
    padding: 0 16px;
    margin-right: 10px;

    /* ЧТО ДЕЛАЕТ: белая кнопка с серой рамкой, как на примере */
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1;

    /* ЧТО ИСПРАВЛЯЕТ: убирает подчёркивание ссылки */
    text-decoration: none !important;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

/* ЧТО ДЕЛАЕТ: при наведении кнопка меняет цвет, видно, что она кликабельна */
.custom-filter-reset-btn:hover {
    background: #f5f5f5;
    border-color: #999;
    color: #000;
}



/* ===== КАРТОЧКА В КАТАЛОГЕ: «В корзину» + «Купить в 1 клик» (любая ширина экрана) ===== */

/* ЧТО ИСПРАВЛЯЕТ: на десктопе Aspro прячет блок кнопок до наведения. Возвращаем его в поток карточки,
   чтобы кнопки были видны всегда; отступ снизу не даёт им прилипать к линии сетки */
@media (min-width: 768px) {
    .catalog_item .footer_button { display: block !important; position: static !important; height: auto !important; width: 100% !important;
        opacity: 1 !important; visibility: visible !important; transform: none !important; margin: 10px 0 18px !important; }
    .catalog_item .counter_wrapp { display: flex !important; width: 100% !important; overflow: visible !important; }
}

/* ЧТО ИСПРАВЛЯЕТ: счётчик «− 1 +» убран (количество остаётся 1) */
.catalog_item .counter_block { display: none !important; }

/* ЧТО ИСПРАВЛЯЕТ: «текст обрезается на узких карточках». flex-wrap: две кнопки рядом, если хватает места
   (от 120px каждая), иначе вторая переносится вниз на всю ширину */
.catalog_item .button_block { display: flex !important; flex-wrap: wrap; gap: 8px; width: 100% !important; }
.catalog_item .button_block .btn { flex: 1 1 120px; min-width: 0; height: 40px; margin: 0 !important; padding: 0 6px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    font-size: 11px !important; letter-spacing: 0 !important; white-space: nowrap; }
.catalog_item .button_block .btn .svg { display: none !important; }

/* ЧТО ИСПРАВЛЯЕТ: у товара в корзине не должно быть двух лишних кнопок. Что Aspro скрыл, остаётся скрытым */
.catalog_item .button_block .btn[style*="none"] { display: none !important; }

/* ЧТО ИСПРАВЛЯЕТ: на мобильных «Купить в 1 клик» была синей. Теперь контурная на всех экранах, «В корзину» синяя */
.catalog_item .button_block .custom-oneclick-btn { background: #fff !important; color: #333 !important; border: 1px solid #777 !important; cursor: pointer; }
.catalog_item .button_block .custom-oneclick-btn:hover { background: #f5f5f5 !important; border-color: #333 !important; }

/* ЧТО ИСПРАВЛЯЕТ: вспышка при загрузке. Блок кнопок невидим, пока скрипт не добавил «Купить в 1 клик»
   (место занято, ничего не прыгает). Через 1 секунду покажется в любом случае */
.catalog_item .button_block:not(.oc-ready) { visibility: hidden; animation: ocShow 0s 1s forwards; }
@keyframes ocShow { to { visibility: visible; } }

/* ЧТО ИСПРАВЛЯЕТ: на страницах акций в карточке два блока кнопок. Верхний (у цены) дублирует нижний
   и давал пустую рамку и лишнюю «Купить в 1 клик». Оставляем только нижний блок .footer_button */
.catalog_item .icons-basket-wrapper { display: none !important; }

/* ЧТО ДЕЛАЕТ: карточка доставки выглядит кликабельной */
.bx-soa-pp-company { cursor: pointer; }

/* ЧТО ИСПРАВЛЯЕТ: блок был сжат и сдвинут влево. Теперь он на всю ширину строки «Назад к списку»,
   поэтому центрируется относительно фото. Кнопка «Задать вопрос» стала синей и читаемой. */
.custom-gallery-cta { clear: both; text-align: center; padding: 20px 15px 30px; width: 100% !important; max-width: none !important; margin: 0 !important; flex: 0 0 100% !important; box-sizing: border-box; }
.custom-gallery-cta__text { font-size: 16px; margin-bottom: 15px; color: #333 !important; }
.custom-gallery-cta .btn { background: #6eade1 !important; color: #fff !important; border: 1px solid #6eade1 !important; font-weight: 600; padding: 14px 32px; }
.custom-gallery-cta .btn:hover { background: #5a9bd0 !important; border-color: #5a9bd0 !important; }

/* ЧТО ИСПРАВЛЯЕТ: блок «Задать вопрос» стоял левее центра фото.
   Сдвиг вправо на 29% своей ширины (около 244px) ставит его по центру рамки галереи.
   Если не по центру, меняйте 29%: больше значит правее. На телефоне сдвиг отключён. */
@media (min-width: 992px) {
    .custom-gallery-cta { transform: translateX(29%); }
}

/* 
 * ФАЙЛ: custom.css
 * ЗАДАЧА: Подсветка номера телефона в шапке сайта при наведении курсора.
 * ЧТО ИСПРАВЛЯЕТ: По умолчанию номер телефона отображается статичным текстом и визуально не реагирует на курсор[cite: 12], из-за чего посетитель не считывает его как активный элемент (ссылку). Код добавляет курсор-указатель, плавную анимацию и перекрашивает номер в активный фирменный синий цвет (#2167b5) при наведении[cite: 12].
 */

header a[href^="tel:"],
header .phones a,
header .phone a,
header .phone-block a.phone,
header .header-phones a {
    transition: color 0.2s ease !important; /* ЧТО ИСПРАВЛЯЕТ: Обеспечивает плавное изменение цвета вместо резкого скачка */
    cursor: pointer !important;            /* ЧТО ИСПРАВЛЯЕТ: Принудительно показывает курсор-палец при наведении */
}

/* Стили при наведении курсора */
header a[href^="tel:"]:hover,
header .phones a:hover,
header .phone a:hover,
header .phone-block a.phone:hover,
header .header-phones a:hover {
    color: #2167b5 !important;            /* ЧТО ИСПРАВЛЯЕТ: Подсвечивает цифры номера фирменным синим цветом сайта */
}

/* ЧТО ДЕЛАЕТ: правая панель (корзина, избранное, сравнение) полупрозрачная, чтобы меньше закрывать
   кнопку «В корзину» у крайней правой карточки. При наведении становится полностью видимой,
   чтобы ею можно было пользоваться. Только для экранов, где панель налезает на каталог */
@media (min-width: 768px) and (max-width: 1599px) {
    .basket_fly .opener { opacity: .35; transition: opacity .2s; }
    .basket_fly .opener:hover { opacity: 1; }
}

/* ЧТО ИСПРАВЛЯЕТ: иконка «Распродажа» в меню каталога была вытянута в полосу.
   В разметке задана высота 400px (атрибуты добавил PageSpeed), а тема задаёт только ширину 30px.
   Высота теперь считается по пропорциям картинки */
.menu-navigation__sections-item-link .image img {
    width: 30px !important;
    height: auto !important;
    max-height: 30px;
    object-fit: contain;
}
/* ЧТО ИСПРАВЛЯЕТ: логотип в шапке был растянут по высоте. В разметке заданы размеры файла (4748x1353),
   ширину тема сжимает до места в шапке, а высота оставалась 1353px. Теперь высота считается по пропорциям */
.logo-row .logo img, #mobileheader .logo img {
    height: auto !important;
    width: auto !important;
    max-width: 100%;
    aspect-ratio: 4748 / 1353;
}

/* ===== ФИЛЬТР: пустая страница после снятия фильтра крестиком (×) на SEO-страницах ===== */
document.addEventListener('click', function (e) {
    var x = e.target.closest ? e.target.closest('#filter-helper .delete_filter, #filter-helper .filterHelperItem') : null;
    if (!x) return;

    /* ЧТО ИСПРАВЛЯЕТ: на SEO-страницах (адрес без filter/) после × Aspro меняет адрес, но подгружает пустой список.
       Мы запоминаем адрес в момент клика и, как только он изменился, перезагружаем страницу:
       так же, как это делает ручное обновление, после которого всё показывается правильно.
       На страницах с filter/ и в боковом фильтре ничего не делаем, там всё работало. */
    if (location.pathname.indexOf('filter/') !== -1) return;

    var start = location.href, tries = 0;
    var t = setInterval(function () {
        tries++;
        if (location.href !== start) {
            clearInterval(t);
            location.reload();
        } else if (tries > 25) {      // ждём не дольше 5 секунд
            clearInterval(t);
        }
    }, 200);
}, true);

/* ===== МЕНЮ КАТАЛОГА: растянуть выпадающее меню, убрать внутреннюю прокрутку ===== */
$(function () {
    /* ЧТО ИСПРАВЛЯЕТ: тема ограничивает высоту меню (630px и по высоте окна) и ставит прокрутку,
       причём делает это уже после наведения. Поэтому снимаем ограничение несколько раз за первую секунду:
       у самого меню, у блока .customScrollbar и у всех внутренних блоков с прокруткой. */
    function stretch(menu) {
        var list = [menu].concat([].slice.call(menu.querySelectorAll('.menu-navigation, .menu-navigation__content, .customScrollbar, .scrollblock, .mCSB_container, .mCustomScrollBox')));
        menu.querySelectorAll('*').forEach(function (el) {
            var s = getComputedStyle(el);
            if (/auto|scroll/.test(s.overflowY) && el.scrollHeight > el.clientHeight + 5) list.push(el);
        });
        list.forEach(function (el) {
            ['max-height', 'height'].forEach(function (p) { el.style.setProperty(p, p === 'max-height' ? 'none' : 'auto', 'important'); });
            el.style.setProperty('overflow', 'visible', 'important');
        });
    }
    $(document).on('mouseenter', '.menu-row .menu-item', function () {
        if (window.innerWidth < 1200) return;
        var menu = $(this).find('.dropdown-menu').get(0);
        if (!menu) return;
        [0, 100, 300, 600, 1000].forEach(function (t) { setTimeout(function () { stretch(menu); }, t); });
    });
});