/*NOTE: This file is intended for programmers. Aspro technical support is not advised to work with him.*/

/* Examples (uncomment to use):*/

/* Expand site width */
/* body .wrapper { max-width: 1400px !important;  } */

/* Set site background image */
/* body {  background: url(image_source) top no-repeat; }

/* Hide compare button */
/* a.compare_item { display: none !important;  }*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


.sb_block_region {
    display: flex;
    align-items: center;
}

.sb_block_region .line-block__item {
    margin-right: 20px;
}

.sb_block_region .region_wrapper {
    font-size: 13px;
}


.sb_block_region_fix .svg {
    display: none;
}

.sb_block_region_fix .regions__name {
    margin-left: 0 !important;
}

.js-open-store-popup {
    /*text-decoration-line: none !important;*/
}

.store_chooser_small_frame .bx-yandex-view-layout {
    min-width: 50%;
    width: 57%;
}

.locations-list-popup-2 .popup-header {
    position: relative;
    display: flex;
    justify-content: space-between;

}


.popup-title {
    font-weight: 600;
    font-size: 22px;
    line-height: 26px;
    color: #424242;
    display: flex;
    align-items: center;
}

.locations-list-popup-2 .popup-header .close-popup-icon {
    position: absolute;
    display: block;
    right: -33px;
    top: -25px;
    padding: 5px;
    width: 20px;
    height: 20px
}

.locations-list-popup-2 .popup-header .close-popup-icon::before {
    content: '\2573';
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    transition: .2s ease-in-out
}

.locations-list-popup-2 .popup-header .close-popup-icon:hover::before {
    color: #FC8B1C
}

.popup-title.return-link::before {
    content: '';
    width: 16px;
    height: 16px;
    background: url(/images/arrow-left-icon.svg) center no-repeat;
    display: block;
    margin-right: 12px;
}

#headerfixed .line-block__item.flex-1 {
    width: 255px;
    flex: initial;
}

#headerfixed .line-block.line-block--gap.line-block--gap-32 {
    justify-content: space-between;
}

ul.stores-list>li::before {
    display: none
}

ul.stores-list .sb_name {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

ul.stores-list .sb_address {
    margin-bottom: initial;
}

.regions__name {
    --underline-opacity: 16%;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in oklab, var(--white_text_black) var(--underline-opacity), transparent);
    text-underline-offset: 0.2em;
}

.line-block__item.flex-1.header__search {
    min-width: 400px;
}

/*.line-block.line-block--gap.line-block--gap-24{*/
/*    align-items: center;*/
/*    justify-content: space-between;*/
/*}*/
/*.sb_block_catalog_city{*/
/*    width:215px!important;*/
/*}*/

.b24-widget-button-wrapper.b24-widget-button-position-bottom-right.b24-widget-button-visible {
    bottom: 130px;
    right: 62px;
}

.mobilemenu .region_wrapper {
    padding: 0px 8px;
}

.mobilemenu .region_wrapper a:not(.no-decoration, .btn, .chip, .link, .dark_link) {
    text-decoration-line: unset;
}

.mobilemenu__menu--regions .ui-menu {
    padding: 0 0 0 0 !important;
    position: static !important;
}

/*
==========================================================================
  БЛОК 1: Стили ТОЛЬКО для ОСНОВНОЙ шапки (НЕ плавающей)
==========================================================================
*/

/* Стили для экранов МЕНЬШЕ 1250px */
@media (max-width: 1250px) {

    /* Уменьшаем отступ между основными блоками в шапке (лого, поиск и т.д.) */
    .part-with-search__inner {
        gap: 16px;
    }

    /* Уточняем, что меняем размер шрифта ТОЛЬКО у кнопки каталога в блоке с поиском */
    .part-with-search__inner .header-menu__title {
        font-size: 14px;
    }
}

/* Стили для экранов МЕНЬШЕ 1150px */
@media (max-width: 1150px) {

    /* 
     * Прячем текст кнопки "Каталог" только у основной шапки.
     * Селектор .part-with-search__inner гарантирует, что верхнее меню не будет затронуто.
    */
    .part-with-search__inner .header-menu__title-wrapper {
        display: none !important;
    }

    /* Убираем лишний отступ у иконки */
    .part-with-search__inner .header-menu__link--only-catalog .icon-block {
        gap: 0;
    }

    /* Делаем саму кнопку компактнее */
    .part-with-search__inner .header-menu__link--only-catalog {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/*
==========================================================================
  БЛОК 2: Стили ТОЛЬКО для ПЛАВАЮЩЕЙ (FIXED) шапки (Финальная Версия 8)
==========================================================================
*/

/* 
 * Этап 1: Стили для экранов 1410px и меньше.
 * Первоначальная адаптация: убираем жесткую ширину и прячем текст каталога.
*/
@media (max-width: 1410px) {

    /* Отменяем жесткую ширину в 255px у блока с каталогом */
    #headerfixed .line-block__item.flex-1 {
        width: auto !important;
    }

    /* Прячем текст кнопки "Каталог" */
    [data-ajax-load-block="HEADER_FIXED_MAIN_PART"] .header-menu__title-wrapper {
        display: none !important;
    }

    /* Убираем лишний отступ у иконки каталога */
    [data-ajax-load-block="HEADER_FIXED_MAIN_PART"] .header-menu__link--only-catalog .icon-block {
        gap: 0;
    }

    /* Делаем саму кнопку каталога компактнее */
    [data-ajax-load-block="HEADER_FIXED_MAIN_PART"] .header-menu__link--only-catalog {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Уменьшаем общий отступ между блоками */
    [data-ajax-load-block="HEADER_FIXED_MAIN_PART"]>.maxwidth-theme>.line-block--gap-32 {
        gap: 16px;
    }
}

/* 
 * Этап 2: НОВОЕ ПРАВИЛО для экранов 1350px и меньше.
 * Промежуточный шаг: немного уменьшаем поиск, чтобы пережить "серую зону" до 1200px.
*/
@media (max-width: 1350px) {
    [data-ajax-load-block="HEADER_FIXED_MAIN_PART"] .header__search {
        max-width: 360px;
        /* Можете подобрать это значение, если нужно */
        transition: max-width 0.2s ease-in-out;
    }

    /* 2. Немного уменьшаем логотип */
    [data-ajax-load-block="HEADER_FIXED_MAIN_PART"] .logo {
        max-width: 170px;
        /* Исходный размер ~180-200px, чуть уменьшаем */
        transition: max-width 0.2s ease-in-out;
    }
}

/* 
 * Этап 3: Стили для экранов 1150px и меньше.
 * Дополнительно уменьшаем логотип, так как места становится еще меньше.
*/
@media (max-width: 1150px) {
    [data-ajax-load-block="HEADER_FIXED_MAIN_PART"] .logo {
        max-width: 160px;
        /* Уменьшаем логотип, как вы и делали */
        transition: max-width 0.2s ease-in-out;
    }
}


.BIG_BANNER_INDEX.container {
    max-width: 1530px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


.topic__inner .switcher-title {
    margin-right: 20px;
}

.topic__heading.topic__heading.line-height-0 {
    display: initial;
    margin-right: 49px;
}

.topic__heading.line-height-0 .switcher-title {
    margin-right: 10px !important;
}

.topic__heading.line-height-0.flexbox--wrap-nowrap {
    display: flex;
    margin: 0;
}

.element-count {
    margin: 0;
}


.reverse-items ul.mobilemenu__menu-list {
    display: flex;
    flex-direction: column-reverse;
}

.reverse-items .schedule__text {
    color: var(--secondary);
}

/* .mobilemenu__menu-header {

} */
.current-store {
    padding-left: 12px;
}

.current-store .line-block--gap-16 {
    --gap: 8px;
}

/* --- Стили для кастомной верхней полосы в мобильной шапке --- */

.mobile-top-bar {
  background-color: #f2f2f2; /* Цвет фона полоски, можете поменять */
  border-bottom: 1px solid #e5e5e5; /* Нижняя граница */
  padding: 8px 15px; /* Внутренние отступы (сверху/снизу и по бокам) */
  font-size: 13px; /* Размер шрифта */
}

.mobile-top-bar__inner {
  display: flex; /* Включаем Flexbox для расположения элементов */
  justify-content: space-between; /* Элементы по краям */
  align-items: center; /* Выравнивание по центру по вертикали */
  max-width: 100%;
}

/* Стили для ссылок внутри полоски */
.mobile-top-bar a {
  text-decoration: none;
  color: #333; /* Цвет текста */
  border-bottom: 1px dashed #333; /* Пунктирное подчеркивание как у ссылок в Аспро */
}

.mobile-top-bar a:hover {
  border-bottom-color: transparent; /* Убираем подчеркивание при наведении */
}

/* Убираем лишние отступы у стандартного блока региона Аспро */
.mobile-top-bar .region_wrapper .line-block__item {
  padding-left: 0;
  padding-right: 0;
}
/* --- Конец стилей --- */

/* 
 * ШАГ 1: Глобальное обнуление отступов в шапке.
 * Убиваем автоматические отступы, которые все ломают.
*/
.mobileheader_1 .mobileheader__inner-part {
    gap: 0 !important;
    padding-left: 8px !important;  /* Минимальный отступ от края экрана */
    padding-right: 8px !important; /* Минимальный отступ от края экрана */
}

/* 
 * ШАГ 2: Жестко задаем размеры и отступы каждому элементу.
*/

/* Бургер-меню: компактный, с отступом справа */
.mobileheader_1 .mobileheader__burger {
    flex-shrink: 0; /* Не сжимать */
    padding: 0 !important;
    margin-right: 8px !important;
}

/* Логотип: тоже сжимаем и даем отступ */
.mobileheader_1 .logo {
    flex-shrink: 0; /* Не сжимать */
    max-width: 90px; /* Уменьшаем еще сильнее */
    margin-right: 8px !important;
}

/* 
 * ШАГ 3: ПОИСК. Убираем ВСЕ его внутренние и внешние отступы.
*/
.mobileheader_1 .header__search {
    flex-grow: 1; /* Растягиваем на все свободное место */
    padding-left: 0 !important;  /* <-- УБИРАЕМ ОТСТУП СЛЕВА */
    padding-right: 0 !important; /* <-- УБИРАЕМ ОТСТУП СПРАВА */
    margin: 0 !important;        /* Обнуляем внешние отступы на всякий случай */
}

/* Настраиваем само поле ввода, чтобы оно было красивым */
.mobileheader_1 .header__search .search-input {
    height: 38px !important;
    font-size: 14px;
    background-color: #f9f9f9 !important;
    border: 1px solid #e5e5e5 !important;
}

/* Убираем выбор "в каталоге/везде" */
.mobileheader_1 .header__search .search-input-div .dropdown-select {
    display: none !important;
}
.mobileheader_1 .header__search .search-input-div .search-input {
    padding-left: 12px !important;
}

/* 
 * ШАГ 4: Иконки справа. Делаем их крошечными.
*/
.mobileheader_1 .mobileheader__inner-part .line-block__item.no-shrinked {
    padding-left: 3px !important;  /* Минимально возможный отступ */
    padding-right: 3px !important; /* Минимально возможный отступ */
}
/* Отдельно для последней иконки убираем отступ справа */
.mobileheader_1 .mobileheader__inner-part .line-block__item.no-shrinked:last-child {
    padding-right: 0 !important;
}

/* 
 * ШАГ 5: Кнопка закрытия в попапе (остается без изменений).
*/
.search-popup.jqmWindow .popup__close {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    line-height: 32px !important;
    top: 15px;
    right: 15px;
}

.mobilemenu__menu--contacts .mobilemenu__menu-item > .link-wrapper {
    padding-inline: 0;
}

@media screen and (width < 601px) {
    .mobileheader__inner .mobileheader__inner-part {
        --gap: 11px;
    }
}

/* Увеличение размера мобильного логотипа (усиленная версия) */
@media screen and (width < 601px) {
    .mobileheader .logo img {
        height: 30px !important;      /* <<< Добавили !important */
        max-height: 30px !important;  /* <<< Добавили это свойство */
        width: auto !important;       /* <<< Добавили !important */
    }
}

@media screen and (width < 601px) {
    .mobileheader .header__search .search-input {
        /* background-color: #f5f5f5; 
        border-color: #e0e0e0;     
        color: #222222;             */
    }}


/* Стилизация кнопки выбора региона в мобильной шапке (финальная версия) */
@media screen and (width < 601px) {

    /* Стили для контейнера (ссылки), чтобы иконка и текст стояли в ряд */
    .mobile-top-bar__region .region-link-custom {
        display: inline-flex;
        align-items: center;
        gap: 6px;

        /* ===== КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ ===== */
        /* Убираем ВСЕ виды подчеркиваний, включая пунктирное */
        text-decoration: none !important;
        border-bottom: none !important; 
    }

    /* Стили для текста региона */
    .mobile-top-bar__region .region-link-custom .region-text {
        font-family: "Golos Text", Arial, sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
        color: #222222;
        text-decoration: none !important;
    }

    /* Убираем подчеркивание и при наведении */
    .mobile-top-bar__region .region-link-custom:hover {
        text-decoration: none !important;
        border-bottom: none !important;
    }
    
    .mobile-top-bar__region .region-link-custom:hover .region-text {
        text-decoration: none !important;
    }
}

/*
 * ===================================================================
 * ПОКАЗЫВАЕМ ТОЛЬКО 2 НУЖНЫХ ПЕРЕКЛЮЧАТЕЛЯ ВИДОВ НА МОБИЛЬНЫХ
 * ===================================================================
 */
@media (max-width: 600px) {

    /* ШАГ 1: Делаем видимым родительский контейнер, перебивая .hide-600 */
    .filter-panel .filter-panel__part-right.hide-600 {
        display: flex !important;
        align-items: center;
    }

    /* ШАГ 2: Скрываем ВСЕ дочерние элементы внутри блока с иконками */
    .filter-panel .toggle-panel > * {
        display: none !important;
    }

    /* ШАГ 3: Теперь "включаем" обратно ТОЛЬКО нужные нам две кнопки,
       нацеливаясь на них по части URL в атрибуте href. */
    .filter-panel .toggle-panel > a[href*="display=tile"],
    .filter-panel .toggle-panel > a[href*="display=price"] {
        display: inline-flex !important; /* Используем inline-flex для лучшего выравнивания иконки */
        align-items: center;
        justify-content: center;
    }
}

.fill-dark-light-block use {
    fill: var(--fill_dark_light);
}


/*
==========================================================================
  ФИНАЛЬНОЕ РЕШЕНИЕ: Блокировка перерисовки логотипа при смене SRC
==========================================================================
*/
@media (max-width: 991px) {

    /*
     * 1. Жестко фиксируем РАЗМЕРЫ КОНТЕЙНЕРА мобильного логотипа.
     *    Это создает "жесткую рамку", из которой логотип не сможет вылезти.
    */
    .mobileheader .logo {
        width: 30px !important;      /* <-- ПОДБЕРИТЕ ЭТО ЗНАЧЕНИЕ */
        max-width: 30px !important;
        min-width: 30px !important;
        flex-basis: 30px !important;
        height: 30px !important;      /* Указываем высоту из ваших прошлых стилей */
        
        /* Важно: не даем контейнеру сжиматься или расти */
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        
        transition: none !important;
    }

    /*
     * 2. Заставляем саму КАРТИНКУ (<img>) внутри контейнера
     *    вести себя предсказуемо, даже если ее SRC меняется.
    */
    .mobileheader .logo img {
        width: 100% !important;         /* Растягиваем на всю ширину контейнера */
        height: 100% !important;        /* Растягиваем на всю высоту контейнера */
        object-fit: contain !important; /* <-- МАГИЯ! Сохраняет пропорции, вписывая картинку в рамку */
    }
}


.layout .checkbox.disabled,
.layout label.disabled {
    display: none !important;
}





/* 1. Делаем саму карточку "точкой отсчета" для координат */
.store-item {
    position: relative !important;
    /* ВАЖНО: Добавляем отступ снизу, чтобы текст телефона не залез под кнопку */
    padding-bottom: 60px !important; 
}

/* 2. Перемещаем кнопку в правый нижний угол */
.store-item .sb_name button {
    position: absolute !important;
    bottom: 15px !important;  /* Отступ от нижнего края карточки */
    right: 15px !important;   /* Отступ от правого края карточки */
    top: auto !important;     /* Отключаем позиционирование сверху */
    margin: 0 !important;     /* Убираем старые отступы */
    z-index: 5;
    
    /* Опционально: если кнопка слишком маленькая, можно увеличить */
    /* min-width: 100px; */
}


.store-item .sb_name {
   
    display: block !important; 
    width: 100% !important;
}






/*стили хедера мобилки*/

.mobile-top-bar {
    /* Фон по умолчанию (белый) */
    background-color: #ffffff; 
    
    /* Рамка снизу */
    border-bottom: 1px solid #f2f2f2;
    
    padding: 8px 15px;
    width: 100%;
    box-sizing: border-box;
}

.mobile-top-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-top-bar a {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 6px;
    color: var(--white_text_black, #333333); 
}

/* ================================================================== */
/* НАСТРОЙКА ДЛЯ ТЕМНОЙ ТЕМЫ */
/* ================================================================== */

body.theme-dark .mobile-top-bar,
body.dark_theme .mobile-top-bar {
    
    background-color: var(--card_bg_black) !important;
    border-bottom: 1px solid var(--stroke_black) !important;
}

body.theme-dark .mobile-top-bar a,
body.theme-dark .mobile-top-bar span,
body.dark_theme .mobile-top-bar a {
    color: var(--white_text_black) !important;
}

body.theme-dark .mobile-top-bar svg,
body.theme-dark .mobile-top-bar svg use,
body.dark_theme .mobile-top-bar svg {
    fill: var(--white_text_black) !important;
}


@media (max-width: 991px){
    /* Запрещаем размытие для контейнеров шапки, найденных скриптом */
#headerfixed, 
.visible-991,
.mobileheader {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important; /* На случай, если там еще и прозрачность */
}

/* 1. Делаем основное окно контейнером на всю высоту */
.store_chooser_small_frame {
    display: flex !important;
    flex-direction: column !important;
    height: 80vh !important; /* Или 90vh - высота окна на экране */
    max-height: 600px !important;
    overflow: hidden !important; /* Запрещаем скролл самому окну */
}

/* 2. Растягиваем внутреннюю форму */
.form.popup--regions,
.locations-list-popup-2 {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important; /* Убираем лишние скроллы */
}

/* 3. ШАПКА: Заголовок и кнопки делаем "жесткими" */
.stock-select-title,
.mobile-view-switcher {
    flex-shrink: 0 !important; /* Запрещаем сжиматься */
    z-index: 20;
    position: relative;
    background: #fff; /* Чтобы текст списка не просвечивал */
}

/* 4. СПИСОК: Разрешаем скроллиться только ему */
.regions-map__wrapper {
    overflow-y: auto !important; /* Включаем скролл ВНУТРИ списка */
    flex-grow: 1 !important;     /* Занимаем все свободное место */
    height: auto !important;
    display: block !important;   /* Исправляем возможный flex у обертки */
    -webkit-overflow-scrolling: touch; /* Плавность для iPhone */
    padding-bottom: 20px;
}

/* Корректировка для списка внутри обертки */
.regions-map__list {
    height: auto !important;
    overflow: visible !important;
}

/* Если карта скрыта/показана, нужно чтобы она тоже заполняла место */
#BX_YMAP_yam_1, .bx-yandex-view-layout, .bx-yandex-view-map {
    height: 100% !important;
    width: 100% !important;
}


   

}

/* 
 * 1. ГЛОБАЛЬНАЯ ЗАМЕНА "Оптовая" -> "Цена Amigo" 
 * Для каталога (плитка, таблица, список)
 */
[class*="catalog-"] .amigo-tooltip-host .price__title,
.catalog-items .amigo-tooltip-host .price__title {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    margin-bottom: 0 !important;
}

[class*="catalog-"] .amigo-tooltip-host .price__title::before,
.catalog-items .amigo-tooltip-host .price__title::before {
    content: "Цена Amigo";
    display: inline-block;
    font-size: 12px;
    line-height: 1.4;
    color: var(--secondary); /* Оранжевый или серый, как в теме */
    visibility: visible;
}

/* 
 * 2. СТРАНИЦЫ СРАВНЕНИЯ И ИЗБРАННОГО
 */

/* Скрываем текст только у ПЕРВОЙ цены (Оптовой) */
.catalog-compare .price:first-child .price__title,
.table_compare .price:first-child .price__title,
.catalog-block__item .price:first-child .price__title {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important; 
}

/* --- Сравнение и Избранное: Синхронизация шрифтов --- */

/* Настройка для новой надписи (Цена Amigo) */
.catalog-compare .price:first-child .price__title::before,
.table_compare .price:first-child .price__title::before,
.catalog-block__item .price:first-child .price__title::before {
    content: "Цена Amigo";
    font-size: 11px;
    visibility: visible;
    display: inline-block;
    line-height: 1.2;
    font-weight: 400; /* 400 - обычный, 600 - жирный */
    color: var(--secondary, #888); 
}

/* Настройка для оригинальной надписи (Розничная) */
.catalog-compare .price:last-child .price__title,
.table_compare .price:last-child .price__title,
.catalog-block__item .price:last-child .price__title {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important; 
    color: var(--secondary, #888) !important;
    visibility: visible !important;
}

/* 
 * 3. ИСПРАВЛЕННЫЙ БЛОК ОТ МИГАНИЯ
 */
.amigo-tooltip-host .price__title {
    color: transparent !important; 
    transition: none !important;
}

/* 
   1. Ищем внутри попапа (.jqmWindow) блоки-обертки цен (те, что с white-space: nowrap).
   2. Выбираем последний из них (:last-of-type), так как Оптовая всегда идет второй.
   3. Внутри него находим span с заголовком (цвет #555).
*/
.jqmWindow span[style*="white-space: nowrap"]:last-of-type span[style*="color: #555"] {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    display: inline-block;
}

.jqmWindow span[style*="white-space: nowrap"]:last-of-type span[style*="color: #555"]::before {
    content: "Цена Amigo:";
    font-size: 14px; /* Размер шрифта как в оригинале */
    color: #555;     /* Цвет как в оригинале */
    visibility: visible;
    display: inline-block;
}
/* 
 * ЗАМЕНА В БЫСТРОМ ПРОСМОТРЕ, СРАВНЕНИИ И ИЗБРАННОМ
 */

/* 1. Скрываем текст "Оптовая" в первом блоке цены */
.catalog-detail__price .price:first-child .price__title,
.catalog-compare .price:first-child .price__title,
.table_compare .price:first-child .price__title,
.catalog-block__item .price:first-child .price__title {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}

/* 2. Подставляем "Цена Amigo" */
.catalog-detail__price .price:first-child .price__title::before,
.catalog-compare .price:first-child .price__title::before,
.table_compare .price:first-child .price__title::before,
.catalog-block__item .price:first-child .price__title::before {
    content: "Цена Amigo";
    font-size: 12px;           /* В быстром просмотре заголовки обычно 12px */
    visibility: visible;
    display: inline-block;
    line-height: 1.4;
    font-weight: 400;          /* Обычная жирность, как у Розничной */
    color: var(--secondary, #888); 
}

/* 3. Гарантируем, что Розничная (второй блок) видна и имеет тот же стиль */
.catalog-detail__price .price:last-child .price__title,
.catalog-compare .price:last-child .price__title,
.table_compare .price:last-child .price__title,
.catalog-block__item .price:last-child .price__title {
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    color: var(--secondary, #888) !important;
    visibility: visible !important;
}
/* полоска рейтинга по горизонтали */
.rating{display: flex !important;}




/*исправление горизонтального скролла в мобильной версии */
/* 1. Правильное исправление горизонтального скролла */
html {
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    /* Убрали position: relative !important; - он был виновником */
}
@media (max-width: 767px) {
/* 2. Принудительно возвращаем нижнюю панель на место */
.bottom-icons-panel.swipeignore {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 500 !important; /* Достаточный индекс, чтобы быть над контентом */
    display: block !important;
}

/* 3. Фикс для того, чтобы контент не перекрывался нижней панелью */
body {
    padding-bottom: 60px !important; /* Высота вашей нижней панели, чтобы она не закрывала футер */
}}

/* Специальные стили для мобильной версии подписки (до 767px) */
@media (max-width: 767px) {
    /* 1. Центрируем окно по центру экрана, отменяя растягивание Аспро */
    body .subscribe_frame.jqmWindow.show {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important; 
        
        width: 92% !important;
        max-width: 400px !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        
        background: #fff !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
        z-index: 100000 !important; /* Чтобы было точно выше мобильной шапки */
        
        display: block !important;
        opacity: 1 !important;
    }

    /* 2. Шапка формы (контейнер для крестика) */
    body .subscribe_frame.jqmWindow .form-header {
        position: relative !important;
        padding: 20px 50px 10px 20px !important; /* Место под крестик справа */
    }

    /* 3. КРЕСТИК (теперь он внутри заголовка благодаря JS) */
    body .subscribe_frame.jqmWindow .form-header .jqmClose.top-close {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        
        background: #f2f2f2 !important;
        border-radius: 50% !important;
        z-index: 10 !important;
        margin: 0 !important;
    }

    /* 4. Тело формы */
    body .subscribe_frame.jqmWindow .form-body {
        padding: 0 20px 25px 20px !important;
    }

    /* 5. Заголовок */
    body .subscribe_frame.jqmWindow .title {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    /* 6. Фикс для оверлея (темного фона), чтобы он не создавал скролл */
    .jqmOverlay {
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        /*z-index: 99999 !important;*/
    }
    .jqmWindow.subscribe_frame {
    padding-top: 0 !important;
}

.line-block.line-block--column.line-block--gap-36.bordered.outer-rounded-x {
    --gap: 0px !important; /* Ваше значение */
    gap: var(--gap) !important;
}
}



  /* стили для кнопок виджета b24 и кнопки вверх*/
    .hidden_narrow {
        display: block !important;
        
    }
    .b24-widget-button-wrapper.b24-widget-button-position-bottom-right.b24-widget-button-visible {
        right: 30px !important;
        left: auto !important;
        bottom: 95px !important; 
    }
    a.scroll-to-top {
        display: block !important;
        right: 40px !important; 
        bottom: 170px !important; 
    }