/* === СКРЫТИЕ КНОПКИ "+ ЕЩЕ" ДЛЯ ТОВАРОВ КОНКРЕТНОЙ КАТЕГОРИИ === */

/* Вставьте адрес категории из админки в кавычки ниже */
a.variant-link[href*="stellazhi-billi-ikea-ikea"],
a.variant-link[href*="shkafy-billi-ikea-ikea"],
a.variant-link[href*="stenki-billi-ajden-ikea-ikea"],
a.variant-link[href*="stellazhi-billi-ajden-ikea-ikea"],
a.variant-link[href*="tv-tumby-billi-ajden-ikea-ikea"],
a.variant-link[href*="prihozhie-billi-ikea-ikea"],
a.variant-link[href*="kollektsiya-billi-ikea-ikea"],
a.variant-link[href*=" "],
a.variant-link[href*=" "],
a.variant-link[href*=" "],
a.variant-link[href*=" "],
a.variant-link[href*=" "],
a.variant-link[href*=" "],
a.variant-link[href*=" "],
a.variant-link[href*=" "],
a.variant-link[href*=" "],
a.variant-link[href*=" "],
a.variant-link[href*=" "],
a.variant-link[href*=" "],
a.variant-link[href*=" "]
 {
    display: none !important;
}

/* === ПРИНУДИТЕЛЬНОЕ ОБНОВЛЕНИЕ ЗАГОЛОВКА И КНОПКИ === */

/* 1. Заголовок "ПОПУЛЯРНЫЕ МОДЕЛИ" (Сбрасываем фон и картинку) */
#catalog-block .catalog-header-row h2.catalog-name,
#catalog-block .catalog-header-row h1.catalog-name,
.catalog-name {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    border: none !important; /* Убираем все старые рамки */
    
    /* Новый стиль: */
    padding: 0 0 0 20px !important; /* Отступ только слева */
    margin: 0 !important;
    height: auto !important;
    
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #222 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    line-height: 1.2 !important;
    
    /* Оранжевая черта слева */
    border-left: 5px solid #e44000 !important;
    display: flex !important;
    align-items: center !important;
}

/* Красим слово "Популярные" в черный, если оно было в span */
#catalog-block .catalog-name span { 
    color: #222 !important; 
}


/* 2. Кнопка "ФИЛЬТРЫ И ПОДБОР" (Делаем белой с оранжевым при наведении) */
#show-filters-btn,
button.filter-btn,
.filter-btn {
    background: #fff !important; /* Белый фон */
    background-image: none !important;
    background-color: #fff !important;
    
    border: 2px solid #e0e0e0 !important; /* Серая рамка */
    color: #333 !important; /* Черный текст */
    
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    
    height: 46px !important;
    padding: 0 30px !important;
    border-radius: 30px !important; /* Овальная форма */
    box-shadow: none !important;
    
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* Иконка фильтра (Цвет #cc3300) */
#show-filters-btn svg,
#show-filters-btn .btn-icon,
.filter-btn svg {
    color: #cc3300 !important;   /* Ваш цвет */
    stroke: #cc3300 !important;  /* Красим линии иконки */
    
    font-size: 18px !important;
    margin: 0 !important;
    margin-right: 10px !important; /* Отступ до текста */
    transition: all 0.2s ease;
}

/* Эффект при наведении (Ховер) */
#show-filters-btn:hover,
button.filter-btn:hover,
.filter-btn:hover {
    border-color: #e44000 !important; /* Оранжевая рамка */
    color: #e44000 !important; /* Оранжевый текст */
    background: #fff !important;
}

/* --- 4. ОКНО ФИЛЬТРОВ --- */
#filter-dropdown {
    position: absolute;
    top: 51px; /* Сразу под линией */
    right: 0;
    left: 0;
    width: 100%; 
    background: #fff;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    padding: 30px;
    padding-bottom: 60px !important; /* Место для кнопки сброса */
    z-index: 10000;
    border: 1px solid #dcdcdc;
    border-top: none; 
    border-radius: 0 0 4px 4px;
    box-sizing: border-box;
    display: none;
}

#filter-dropdown.active { display: block; }

.close-filters {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 30px;
    color: #ccc;
    cursor: pointer;
    line-height: 1;
    z-index: 20;
}
.close-filters:hover { color: #333; }

#filter-dropdown #sidebar .heading2 { display: none; }

#filter-dropdown #sidebar {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* === КОЛОНКИ (ЧТОБЫ ЗНАЧЕНИЯ БЫЛИ ПОД ЗАГОЛОВКАМИ) === */
#filter-dropdown #sidebar dl {
    display: block !important;
    column-count: 4;
    column-gap: 40px;
    width: 100%;
    margin-top: 0 !important;
}

#filter-dropdown #sidebar dt, 
#filter-dropdown #sidebar dt.color1, 
#filter-dropdown #sidebar dt.color2, 
#filter-dropdown #sidebar dt.color3,
#filter-dropdown #sidebar dt.color4,
#filter-dropdown #sidebar dt.color5,
#filter-dropdown #sidebar dt.color6,
#filter-dropdown #sidebar dt.color7 {
    background: none !important;
    color: #000 !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 0 10px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #eee;
    cursor: default;
    pointer-events: none;
    
    /* Не отрывать заголовок от низа */
    break-after: avoid; 
    -webkit-column-break-after: avoid;
    display: block;
}

#filter-dropdown #sidebar dt a.caret { display: none !important; }

#filter-dropdown #sidebar dd,
#filter-dropdown #sidebar dd.hide {
    display: block !important;
    height: auto !important;
    border: none !important;
    padding: 10px 0 0 0 !important;
    background: none !important;
    width: 100% !important;
    
    /* Не разрывать блок внутри */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 30px !important;
}

#filter-dropdown #sidebar dd ul li {
    padding: 3px 0;
    margin: 0 !important;
    display: block !important;
}

#filter-dropdown label.change_checkbox {
    color: #555;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
}
#filter-dropdown label.change_checkbox:hover { color: #ff6600; }

#filter-dropdown .change_checkbox .ch_box {
    border-color: #ddd !important;
    background-color: #f9f9f9 !important;
    margin-right: 8px !important;
}
#filter-dropdown .change_checkbox.check .ch_box {
    background-color: #ff6600 !important;
    border-color: #ff6600 !important;
}

#filter-dropdown .relative {
    padding: 25px 5px 10px 5px !important;
    margin: 0 !important;
    width: 90% !important;
}
#filter-dropdown .num-1, #filter-dropdown .num-2 { top: -25px !important; }
#filter-dropdown .num-1 input, 
#filter-dropdown .num-2 input {
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #333;
    width: 60px !important;
    height: 25px !important;
    background: #fff !important;
    padding: 0 !important;
}

/* Кнопка сброса внизу справа */
#filter-dropdown .reset {
    margin-top: 20px;
    padding-top: 20px;
    text-align: right;
    border-top: 1px solid #eee;
    position: absolute;
    bottom: 20px;
    right: 30px;
    width: auto;
}

/* Адаптивность */
@media (max-width: 1200px) {
    #filter-dropdown #sidebar dl { column-count: 3; }
}
@media (max-width: 900px) {
    #filter-dropdown #sidebar dl { column-count: 2; }
}
@media (max-width: 600px) {
    #filter-dropdown #sidebar dl { column-count: 1; }
}
/* --- Исправление заголовков для слайдеров (Габариты, Сп. место) --- */
#filter-dropdown .filter_subheader {
    display: block !important;
    width: 100%;
    font-weight: 700;       /* Жирный шрифт, как у заголовков групп */
    font-size: 13px;
    color: #333;
    
    /* Отступ сверху, чтобы отделить от предыдущего фильтра */
    margin-top: 15px !important; 
    
    /* ВАЖНО: Отступ снизу 40px, чтобы поместились поля ввода */
    margin-bottom: 40px !important; 
}
/* --- Отступ для заголовка ЦЕНА (он последний в списке) --- */
#filter-dropdown #sidebar dl dt:last-of-type {
    margin-bottom: 40px !important;
}
/* Контейнер для кнопок фильтра */
.filter-submit-container {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    
    /* ДОБАВЛЕНО ДЛЯ ВИДИМОСТИ */
    clear: both;          /* Очистка обтекания, чтобы не наезжали колонки */
    display: block;       /* Блочный элемент */
    background: #fff;     /* Белый фон, чтобы не было прозрачным */
    position: relative;   /* Относительное позиционирование */
    z-index: 100;         /* Вытаскиваем слой наверх */
}

/* Большая оранжевая кнопка */
.btn-filter-show {
    display: block;
    width: 100%;
    border: none;
    background-color: #ff5722 !important; /* !important чтобы точно перебить другие стили */
    color: #fff !important;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 15px 0;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 10px;
    transition: background-color 0.3s;
}

.btn-filter-show:hover {
    background-color: #e64a19 !important;
}

/* Ссылка сброса */
.btn-filter-reset {
    font-size: 13px;
    color: #888;
    text-decoration: underline;
    cursor: pointer;
    display: inline-block;
    padding-bottom: 10px;
}

.btn-filter-reset:hover {
    color: #333;
    text-decoration: none;
}


/* КНОПКА "ПЕРЕЙТИ В КАТАЛОГ" */
.alldiv1 {
    display: block;
    margin: 32px auto;
    text-align: center;
}



/* ================================================================= */
/* 1. ИСПРАВЛЕНИЕ СЛОЕВ (Z-INDEX) И ВСПЛЫВАЮЩИХ ОКОН                 */
/* ================================================================= */
#popup_bg { z-index: 9000 !important; position: fixed !important; top: 0; left: 0; width: 100%; height: 100%; }

/* Контейнеры окон - ПРОЗРАЧНЫЕ, чтобы не было белой пелены */
.popup_block, #comback_ring, #one_click_popup, #add_to_bascet_popup {
    z-index: 99999 !important;
    position: fixed !important; 
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-height: 90vh !important; max-width: 95vw !important;
    overflow-y: auto !important;
    background: transparent !important; 
}

/* Белый фон только у контента окна */
.popup_wrap { background: #fff !important; position: relative; box-shadow: 0 0 20px rgba(0,0,0,0.5); }

/* Остальные слои */
.ai-chat-window { z-index: 9500 !important; }
#fancybox-wrap, #fancybox-overlay { z-index: 100000 !important; }
#megapbx-callback-button-container, .megapbx-callback-widget-button { z-index: 2147483647 !important; }


/* ================================================================= */
/* 2. ВОССТАНОВЛЕНИЕ СТИЛЕЙ ШАПКИ И МЕНЮ                             */
/* ================================================================= */
#new-light-header { width: 100%; background: #fff; font-family: 'Open Sans', sans-serif; box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: relative; z-index: 1000; margin-bottom: 20px; }
#new-light-header ul, #new-light-header li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#new-light-header a { text-decoration: none !important; }

/* Сброс старых стилей */
#new-light-header .categories.newmenu li.level li a, 
#new-light-header .categories.newmenu li.level:nth-child(n) li a { 
    background-image: none !important; background: none !important; 
    padding: 0 !important; height: auto !important; min-height: 0 !important; border: none !important; 
}
#new-light-header .menu-img { display: none !important; }

/* Горизонтальное меню */
#new-light-header .categories.newmenu > ul.parentlevel { display: flex !important; justify-content: space-between; flex-wrap: wrap; }
#new-light-header .categories.newmenu > ul.parentlevel > li.level > a { display: block; padding: 15px 10px !important; font-weight: 700 !important; color: #000 !important; text-transform: uppercase; text-decoration: none; font-size: 14px; }
#new-light-header .categories.newmenu > ul.parentlevel > li.level > a:hover { color: #e44000 !important; }

/* Выпадающая шторка */
#new-light-header .categories.newmenu li .submenu { background: #ffffff !important; box-shadow: 0 3px 10px rgba(0,0,0,0.5); border-top: 3px solid #e44000; padding: 20px 0 !important; width: 100% !important; left: 0 !important; display: none; position: absolute; top: 100%; z-index: 2000; }
#new-light-header li.level:hover .submenu { display: block; }

/* Сетка внутри меню */
#new-light-header .categories.newmenu li .submenu .row, 
#new-light-header .categories.newmenu li .submenu .row ul { display: flex !important; flex-wrap: wrap !important; width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; background: none !important; justify-content: flex-start !important; align-items: flex-start !important; }
#new-light-header .categories.newmenu li .submenu li { flex: 1 1 auto !important; min-width: 200px; max-width: 25% !important; margin: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; border-right: 1px solid #f0f0f0; border-bottom: none !important; box-sizing: border-box !important; padding: 15px 15px !important; height: auto !important; }
#new-light-header .categories.newmenu li .submenu li:last-child { border-right: none !important; }

/* Ссылки внутри меню */
#new-light-header .column-header a.menu_link-text, #new-light-header .column-header a { font-weight: 400 !important; font-size: 15px !important; text-transform: uppercase !important; color: #000 !important; display: block !important; width: 100% !important; text-align: center !important; margin: 0 !important; padding: 5px 0 !important; box-sizing: border-box !important; white-space: nowrap; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.2s; }
#new-light-header .column-header:hover a { color: #e44000 !important; transform: scale(1.1); }
#new-light-header .column-links a.menu_link { font-weight: 400 !important; font-size: 13px !important; text-transform: none !important; color: #555 !important; padding: 3px 0px !important; display: block !important; width: 100%; text-align: left !important; box-sizing: border-box !important; line-height: 1.4 !important; transition: all 0.2s ease-in-out; position: relative; }
#new-light-header .column-links a.menu_link:hover { color: #e44000 !important; background: transparent !important; text-decoration: none !important; transform: translateX(7px); border-left: 2px solid #e44000; padding-left: 8px !important; }
.newmenu .column-header { margin-bottom: 12px !important; display: block; }

/* Верхняя полоса и поиск */
.header-top-bar { background-color: #f8f8f8; border-bottom: 1px solid #ececec; padding: 8px 0; font-size: 13px; color: #666; }
.header-flex-row { display: flex !important; justify-content: space-between !important; align-items: center !important; }
.top-buyer-menu { display: flex !important; gap: 20px; }
.top-contacts-block { display: flex !important; align-items: center; gap: 15px; }
.header-main-bar { padding: 20px 0; background: #fff; }
.header-search { flex-grow: 1; margin: 0 40px; position: relative; }
.modern-search-form { display: flex !important; width: 100%; position: relative; }
.search-input { width: 100%; padding: 10px 15px !important; height: 40px !important; border: 2px solid #e44000 !important; border-radius: 4px !important; font-size: 14px; outline: none; }
.search-button { position: absolute; right: 0; top: 0; height: 40px !important; width: 50px; background: #e44000 !important; border: none; color: #fff !important; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* Иконки справа (Корзина, Сравнение) */
.header-actions-block { display: flex !important; align-items: center; gap: 30px; margin-left: 30px; }
.action-item { display: flex !important; flex-direction: row !important; align-items: center; text-decoration: none !important; color: #333 !important; cursor: pointer; gap: 12px; }
.action-icon-wrapper { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #f4f4f4; border-radius: 50%; transition: background 0.2s; }
.action-item:hover .action-icon-wrapper { background: #e44000; }
.action-item:hover .action-icon-wrapper svg { stroke: #fff; }
.action-icon-wrapper svg { stroke: #333; transition: stroke 0.2s; }
.action-icon-wrapper .count { position: absolute; top: -2px; right: -2px; background: #e44000; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.action-text-group { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.action-title { font-size: 13px; font-weight: 700; color: #222; }
.action-subtitle { font-size: 12px; color: #888; white-space: nowrap; }
.action-subtitle.price { font-weight: 600; color: #e44000; }

/* Выпадающая корзина */
#new-light-header .header-cart { display: flex !important; align-items: center !important; height: 100% !important; }
#new-light-header .hint { display: none; position: absolute; top: 100%; right: 0; width: 320px; background: #fff; border: 1px solid #eee; box-shadow: 0 10px 30px rgba(0,0,0,0.15); padding: 20px; z-index: 3000; margin-top: 15px; border-radius: 8px; }
#new-light-header .header-cart:hover .hint { display: block; }
#new-light-header .hint:before { content: ''; position: absolute; top: -6px; right: 40px; width: 12px; height: 12px; background: #fff; border-left: 1px solid #eee; border-top: 1px solid #eee; transform: rotate(45deg); }
#new-light-header .hint ul { max-height: 300px; overflow-y: auto; margin-bottom: 15px !important; border-bottom: 1px solid #eee; }
#new-light-header .hint ul li { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #f9f9f9; }
#new-light-header .hint .all, #new-light-header .hint .right { text-align: left; width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14px; color: #555; }
#new-light-header .hint .right a.to_bascet { display: none; }
#new-light-header .hint .checkout-btn { display: block; width: 100%; background: #e44000; color: #fff !important; text-align: center; padding: 12px 0; border-radius: 4px; font-weight: 700; text-transform: uppercase; text-decoration: none; margin-top: 15px; transition: background 0.2s; }
#new-light-header .hint .checkout-btn:hover { background: #cc3900; }
#new-light-header .hint .total, #new-light-header .hint .red { font-size: 18px; font-weight: 800; color: #222; }
.top-phone { font-size: 18px !important; font-weight: 800 !important; color: #222 !important; text-decoration: none !important; display: flex; align-items: center; gap: 8px; }
.top-phone::before { content: ''; display: block; width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e44000'%3E%3Cpath d='M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 0 0-1.01.24l-1.51 1.87c-2.65-1.36-4.87-3.58-6.22-6.23l1.88-1.51c.23-.24.33-.56.24-1.01-.36-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3.63 3 4.22 3 5.01c0 9.27 7.55 16.82 16.82 16.82.79 0 1.38-.65 1.38-1.19v-4.26c0-.55-.45-.99-.99-1.01z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; }
.callback-link { color: #e44000 !important; font-size: 13px; font-weight: 600; border-bottom: 1px dotted #e44000; cursor: pointer; text-decoration: none !important; }

/* ================================================================= */
/* 4. ЛИПКАЯ ШАПКА И ФУТЕР                                         */
/* ================================================================= */
#sticky-header-panel { position: fixed; top: -70px; left: 0; width: 100%; height: 60px; background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.1); z-index: 9999; transition: top 0.3s ease-in-out; }
#sticky-header-panel.visible { top: 0; }
#sticky-header-panel .wrapper { width: 1360px; max-width: 95%; margin: 0 auto; padding: 0 15px; height: 60px; display: flex; align-items: center; gap: 25px; box-sizing: border-box; }
.sticky-catalog-wrapper { position: relative; height: 100%; display: flex; align-items: center; }
.sticky-catalog-btn { background: #e44000; color: #fff !important; text-decoration: none; padding: 0 25px 0 20px; height: 40px; display: flex; align-items: center; gap: 10px; font-weight: 700; text-transform: uppercase; font-size: 13px; border-radius: 30px; cursor: default; transition: background 0.2s; }
.sticky-catalog-btn:hover { background: #cc3900; }
.sticky-menu-dropdown { display: none; position: absolute; top: 100%; left: 0; background: #fff; width: 340px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); border-radius: 8px; border: 1px solid #eee; padding: 10px 0; margin-top: 0px; }
.sticky-catalog-wrapper:hover .sticky-menu-dropdown { display: block; }
/* ================================================================= */
/* === ИСПРАВЛЕНИЕ СЛЕТАЮЩЕГО МЕНЮ (МОСТИК) === */
/* ================================================================= */

.sticky-menu-dropdown {
    /* 1. Гарантируем, что меню показывается поверх всего */
    z-index: 9000 !important;
    
    /* 2. Оставляем визуальный отступ (чтобы было красиво) */
    margin-top: 5px !important;
}

/* 3. Строим НЕВИДИМЫЙ МОСТ между кнопкой и меню */
.sticky-menu-dropdown:before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    
    /* Начинаем мост на 20px выше самого меню (перекрываем margin-top) */
    top: -20px !important; 
    
    left: 0 !important;
    width: 100% !important;
    
    /* Высота моста - 20px (хватит, чтобы соединить с кнопкой) */
    height: 20px !important;
    
    /* Прозрачный фон (для отладки можно временно поставить red) */
    background: transparent !important;
}
.scroll-container { max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden; }

/* Аккордеон меню */
.vertical-menu, .vertical-menu li { list-style: none; margin: 0; padding: 0; }
.vertical-menu a { text-decoration: none; display: block; transition: all 0.2s; }
.v-level-1 { border-bottom: 1px solid #f5f5f5; background: #fff; }
.main-row, .menu-row { display: flex; justify-content: space-between; align-items: center; padding-right: 15px; cursor: pointer; }
.main-row:hover, .menu-row:hover { background: #fcfcfc; }
.main-row:hover .v-link-1, .menu-row:hover .v-link-2 { color: #e44000; }
.main-row:hover .menu-toggle, .menu-row:hover .menu-toggle { border-color: #e44000; }
.v-link-1 { font-size: 15px; font-weight: 800; color: #222; text-transform: uppercase; padding: 12px 20px; border: none; background: transparent; display: block; flex-grow: 1; }
.v-level-2-list { display: none; background: #fff; padding: 0; }
.v-link-2 { flex-grow: 1; font-size: 14px; font-weight: 700; color: #444; padding: 8px 10px 8px 35px; }
.v-level-3-list { display: none; padding-bottom: 10px; background: #fcfcfc; box-shadow: inset 0 3px 5px rgba(0,0,0,0.03); }
.v-level-3-list a { font-size: 13px; font-weight: 400; color: #666; padding: 6px 20px 6px 50px; }
.v-level-3-list a:hover { color: #e44000; padding-left: 55px; }
.menu-toggle { position: relative; width: 20px; height: 20px; border: 1px solid #ddd; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.menu-toggle::before { content: ''; position: absolute; background: #888; width: 10px; height: 2px; }
.menu-toggle::after { content: ''; position: absolute; background: #888; width: 2px; height: 10px; }
.menu-toggle.active { border-color: #e44000; background: #e44000; }
.menu-toggle.active::before { background: #fff; transform: rotate(180deg); }
.menu-toggle.active::after { height: 0; }

.sticky-contacts { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.sticky-phone { color: #222; font-weight: 800; text-decoration: none; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.sticky-phone::before { content: ''; display: block; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e44000'%3E%3Cpath d='M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 0 0-1.01.24l-1.51 1.87c-2.65-1.36-4.87-3.58-6.22-6.23l1.88-1.51c.23-.24.33-.56.24-1.01-.36-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3.63 3 4.22 3 5.01c0 9.27 7.55 16.82 16.82 16.82.79 0 1.38-.65 1.38-1.19v-4.26c0-.55-.45-.99-.99-1.01z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; }
.sticky-callback { color: #e44000; font-size: 11px; text-decoration: none; border-bottom: 1px dotted #e44000; cursor: pointer; width: fit-content; margin-left: 20px; }
.sticky-search-block { flex-grow: 1; max-width: none; min-width: 200px; }
.sticky-search-block form { display: flex; position: relative; }
.sticky-search-block input { width: 100%; height: 40px; padding: 0 15px; border: 1px solid #ddd; border-radius: 20px; font-size: 13px; outline: none; background: #f5f5f5; }
.sticky-search-block button { position: absolute; right: 5px; top: 0; height: 40px; width: 30px; border: none; background: none; cursor: pointer; }
.sticky-filter-btn { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border: 2px solid #eee; border-radius: 20px; color: #333; font-weight: 600; font-size: 13px; text-decoration: none; background: #fff; cursor: pointer; }
.sticky-filter-btn svg { color: #e44000; }
.sticky-cart { display: flex; align-items: center; text-decoration: none; color: #333; gap: 10px; }
.sticky-cart .icon-wrap { position: relative; height: 24px; }
.sticky-cart svg { stroke: #333; stroke-width: 2; }
.sticky-cart .text { font-weight: 800; text-transform: uppercase; font-size: 13px; display: block; }
.sticky-count { background: #e44000; color: #fff; border-radius: 50%; font-size: 10px; height: 16px; min-width: 16px; display: flex; align-items: center; justify-content: center; position: absolute; top: -5px; right: -5px; }

/* Футер */
.links-footer { display: grid !important; grid-template-columns: repeat(4, 1fr); column-gap: 30px; row-gap: 10px; align-items: start; padding: 20px 0; width: 100%; box-sizing: border-box; }
details.footer-spoiler { margin-bottom: 5px; width: 100%; }
details.footer-spoiler summary { cursor: pointer; font-weight: 700; text-transform: uppercase; font-size: 14px; padding: 6px 0; list-style: none; color: #333; outline: none; border-bottom: 1px solid transparent; display: flex; align-items: center; gap: 8px; width: fit-content; }
details.footer-spoiler summary::after { content: '+'; font-weight: normal; color: #999; font-size: 16px; line-height: 1; margin-top: -1px; }
details.footer-spoiler[open] summary::after { content: '−'; color: #333; font-weight: bold; }
details.footer-spoiler[open] summary { border-bottom: 1px solid #eee; margin-bottom: 8px; }
details.footer-spoiler summary::-webkit-details-marker { display: none; }
details.footer-spoiler ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: block !important; }
.links-footer__item a { display: block; padding: 4px 0 4px 15px; color: #666; text-decoration: none; font-size: 13px; transition: 0.2s; line-height: 1.3; border-left: 1px solid #eee; }
.links-footer__item a:hover { color: #000; text-decoration: underline; border-left: 1px solid #000; }
.links-footer__item.footer-main-link a { font-weight: bold; color: #333; padding-left: 0; border-left: none; margin-bottom: 3px; }
.footer-contacts-modern { display: flex; flex-direction: column; align-items: flex-start; color: #fff; padding-top: 10px; }
.footer-contacts-modern .name { font-size: 18px; font-weight: 700; text-transform: uppercase; margin-bottom: 5px; color: #fff; letter-spacing: 0.5px; }
.footer-contacts-modern .sub-text { font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-bottom: 20px; }
.contact-item { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.phone-item a { font-size: 26px; font-weight: 600; color: #fff !important; text-decoration: none; display: flex; align-items: center; gap: 12px; transition: opacity 0.2s; }
.phone-item a:hover { opacity: 0.8; }
.address-item { font-size: 15px; color: rgba(255, 255, 255, 0.9); }
.contact-item svg { opacity: 0.8; }

@media (max-width: 992px) { .links-footer { grid-template-columns: repeat(2, 1fr); row-gap: 15px; } }
@media (max-width: 1023px) { .footer-contacts-modern { align-items: center; text-align: center; margin-top: 30px; } .phone-item a { font-size: 24px; justify-content: center; } .contact-item { justify-content: center; } }
@media (max-width: 576px) { .links-footer { grid-template-columns: 1fr; gap: 0; } details.footer-spoiler { border-bottom: 1px solid #eee; margin-bottom: 0; } details.footer-spoiler summary { width: 100%; justify-content: flex-start; gap: 15px; padding: 12px 0; } details.footer-spoiler[open] summary { border-bottom: none; margin-bottom: 0; padding-bottom: 5px; } }


/* === Кнопка "Домой" (Картинка PNG) === */
.sticky-home-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px; /* Отступ справа от каталога */
    height: 100%;       /* На всю высоту шапки */
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Настройки самой картинки */
.sticky-home-btn img {
    height: 22px;       /* Уменьшаем высоту до размера иконок */
    width: auto;        /* Ширина подстроится автоматически */
    display: block;
}

/* Эффект при наведении (легкая прозрачность, т.к. цвет PNG менять сложно) */
.sticky-home-btn:hover {
    opacity: 0.7;
}

/* Адаптация для мобильных */
@media (max-width: 1023px) {
    .sticky-home-btn {
        margin-right: 10px;
    }
    .sticky-home-btn img {
        height: 20px; /* Чуть меньше на телефонах */
    }
}




/* ================================================================= */
/* === 4. ОКНО ЧАТА ИИ (НОВЫЙ "РЕЗИНОВЫЙ" СТИЛЬ) === */
/* ================================================================= */

/* ГЛОБАЛЬНЫЕ СТИЛИ (ПК + МОБ) */
.ai-chat-window { 
    position: fixed; 
    bottom: 85px; 
    right: 20px; 
    width: 380px; 
    max-width: 90vw; 
    height: 600px; 
    max-height: 80vh; 
    background: #fff; 
    border-radius: 12px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.3); 
    display: none; 
    flex-direction: column; 
    border: 1px solid #ddd; 
    overflow: hidden;
    z-index: 8001; /* Поверх кнопок */
    font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif !important;
}

/* 2. Шапка окна чата */
.ai-header {
    background: #993300 !important; /* Наш фирменный оранжевый */
    color: #fff; 
    padding: 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-size: 16px;
    font-weight: bold;
}
.ai-close { cursor: pointer; font-size: 24px; line-height: 1; }

/* Область сообщений */
.ai-messages { 
    flex-grow: 1; 
    padding: 15px; 
    overflow-y: auto; 
    background: #f9f9f9; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}
.ai-msg { 
    max-width: 85%; 
    padding: 10px 14px; 
    border-radius: 12px; 
    font-size: 15px; 
    line-height: 1.4; 
}
.ai-msg.bot { align-self: flex-start; background: #fff; border: 1px solid #eee; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
/* 3. Сообщения пользователя */
.ai-msg.user {
    background: #FFE6CC !important;
    color: #000 !important;
}

/* 5. Ссылка "Читать полностью" и другие ссылки в чате */
.ai-msg a {
    color: #993300 !important; /* Коричневый для ссылок, чтобы выделялись */
}

/* ОБЛАСТЬ ВВОДА (Flexbox для резиновости) */
.ai-input-area { 
    padding: 10px 15px; 
    border-top: 1px solid #eee; 
    background: #fff;
    display: flex !important;
    align-items: flex-end !important; /* ВАЖНО: Кнопка прижата к низу */
    gap: 10px !important;
    min-height: 60px;
    box-sizing: border-box;
}

/* ================================================================= */
/* === ПОЛЕ ВВОДА (ИСПРАВЛЕННЫЙ CSS) === */
/* ================================================================= */

#aiInput {
    flex-grow: 1 !important;
    width: auto !important;
    
    /* УБРАЛИ !important у высоты, чтобы работал скрипт */
    height: 40px; 
    min-height: 40px;
    
    max-height: 120px !important; /* Максимум 5 строк */
    padding: 10px 14px !important;
    border: 1px solid #ddd !important;
    border-radius: 20px !important;
    resize: none !important;
    background: #f5f5f5 !important;
    
    /* Шрифт */
    font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.4 !important; /* Важно для расчета высоты строк */
    box-sizing: border-box !important;
    overflow-y: hidden; /* Скролл скрыт пока не нужен */
}

/* 4. Кнопка отправки внутри чата */
.ai-send {
    background: #993300 !important;
    color: #fff; 
    border: none; 
    width: 40px !important; 
    height: 40px !important; 
    border-radius: 50% !important; 
    cursor: pointer; 
    flex-shrink: 0 !important; /* ЗАПРЕТ НА СПЛЮЩИВАНИЕ */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 0 !important;
}
.ai-send:hover { opacity: 0.9; transform: scale(1.05); transition: 0.2s; }


/* ================================================================= */
/* === 5. МОБИЛЬНАЯ ВЕРСИЯ (WHATSAPP STYLE) === */
/* ================================================================= */

@media (max-width: 1023px) {
    .ai-chat-window {
        position: fixed !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 60vh !important;    /* 60% высоты экрана */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        
        border-radius: 15px 15px 0 0 !important; /* Скругление только сверху */
        box-shadow: 0 -5px 20px rgba(0,0,0,0.2) !important;
        z-index: 99999 !important;
    }
    
    /* Убираем лишние отступы снизу, так как окно прижато к краю */
    .ai-input-area {
        padding-bottom: 15px !important; /* Чуть больше места для пальца */
    }
    
    /* Скрываем кнопки связи, когда открыт чат (чтобы не мешали) */
    .ai-chat-window[style*="block"] ~ .floating-buttons-container {
        display: none !important;
    }
}

/* ================================================================= */
/* === АНИМАЦИЯ "ПЕЧАТАЕТ..." === */
/* ================================================================= */

.ai-typing {
    display: none; /* Скрыто по умолчанию */
    padding: 5px 15px;
    font-size: 13px;
    color: #999;
    font-style: italic;
    background: #fff;
}

/* Анимация точек */
.ai-typing span {
    animation: typingDots 1.4s infinite ease-in-out both;
    margin-left: 2px;
}

.ai-typing span:nth-child(1) { animation-delay: -0.32s; }
.ai-typing span:nth-child(2) { animation-delay: -0.16s; }
.ai-typing span:nth-child(3) { animation-delay: 0s; }

@keyframes typingDots {
    0%, 80%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

/* ================================================================= */
/* === НАСТРОЙКА ИЗОБРАЖЕНИЯ (chat_ii.png) В КНОПКЕ ЧАТА === */
/* ================================================================= */

/* Убираем старые SVG, если вдруг остались в коде */
.ai-btn-manual svg { display: none !important; }

/* Настраиваем новую картинку */
.ai-btn-manual img {
    width: 55px !important;  /* Оптимальный размер внутри кнопки 55px */
    height: auto !important; /* Сохраняем пропорции */
    display: block !important;
    /* Центрируем, если картинка не квадратная */
    margin: 0 auto !important; 
    transition: transform 0.3s ease !important;
}

/* Эффект при наведении (легкое увеличение и поворот) */
.ai-btn-manual:hover img {
    transform: scale(1.1) rotate(-8deg) !important;
}

/* Небольшая корректировка для мобильных */
@media (max-width: 1023px) {
    .ai-btn-manual img {
        width: 55px !important; /* Чуть меньше на телефоне */
    }
	
}
	
		
/* ================================================================= */
/* 5. ИСПРАВЛЕНИЕ ВЫПАДАЮЩЕЙ КОРЗИНЫ (FINAL FIX)                     */
/* ================================================================= */

/* --- 1. ЖЕЛЕЗОБЕТОННЫЙ МОСТИК --- */
#new-light-header .header-cart {
    position: relative !important;
    height: 100% !important; /* Убеждаемся, что блок во всю высоту */
}

/* Расширяем само выпадающее окно вверх, чтобы уменьшить "дырку" */
#new-light-header .hint {
    margin-top: 0 !important;    /* Убираем внешний отступ */
    padding-top: 20px !important; /* Заменяем его внутренним полем (оно чувствительно к мышке) */
    top: 100% !important;
}

/* Дополнительный слой-страховка */
#new-light-header .header-cart::after {
    content: "";
    display: block;
    position: absolute;
    top: 90%;         /* Начинаем чуть выше низа шапки */
    left: 0;
    width: 100%;
    height: 40px;     /* Перекрываем стык */
    background: transparent;
    z-index: 2999;
}

/* Треугольник-стрелочка */
#new-light-header .hint:before {
    content: '';
    position: absolute;
    top: 14px; /* Корректируем позицию из-за padding-top */
    right: 40px;
    width: 12px; height: 12px;
    background: #fff;
    border-left: 1px solid #eee; border-top: 1px solid #eee;
    transform: rotate(45deg);
    z-index: 3001;
    display: block !important;
}
/* Чистим старое */
#new-light-header .hint::after { display: none !important; }


/* --- 2. ВЫРАВНИВАНИЕ ЦИФР (ЛЕВЫЙ КРАЙ ПРАВОГО ПОЛЯ) --- */

/* Контейнер строки */
.cart-footer .row-summary {
    display: block !important;
    width: 100% !important;
    height: 24px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    clear: both !important;
}


/* --- СТИЛИ ДЛЯ ВЫПАДАЮЩЕГО ПОИСКА (ДИЗАЙН 40px) --- */

.mh-search-panel {
    background: #ffffff; /* Белый фон самой выпадающей панели */
    padding: 10px 15px;  /* Отступы вокруг строки поиска */
    position: absolute;
    top: 55px; left: 0; width: 100%;
    border-bottom: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    z-index: 9999;
}

.mh-search-form {
    position: relative;
    width: 100%;
    display: block; /* Важно для позиционирования */
}

/* Сама строка ввода */
.mh-search-input-exact {
    width: 100%;
    height: 40px;             /* Высота ровно 40px */
    background-color: #f0f0f0; /* Светло-серый фон поля */
    border: 1px solid #e0e0e0; /* Тонкая серая окантовка */
    border-radius: 20px;      /* Радиус 20px делает края идеально круглыми при высоте 40 */
    padding: 0 45px 0 20px;   /* Отступ справа 45px под лупу, слева 20px под текст */
    font-size: 14px;
    color: #333;              /* Цвет вводимого текста */
    outline: none;            /* Убираем синюю обводку браузера */
    box-shadow: none;         /* Убираем тени */
    -webkit-appearance: none; /* Убираем стили iOS */
}

/* Цвет текста плейсхолдера "Поиск..." (Серый) */
.mh-search-input-exact::-webkit-input-placeholder { color: #999; opacity: 1; }
.mh-search-input-exact::-moz-placeholder          { color: #999; opacity: 1; }
.mh-search-input-exact:-ms-input-placeholder      { color: #999; opacity: 1; }

/* Кнопка с лупой справа */
.mh-search-submit-exact {
    position: absolute;
    right: 0;
    top: 0;
    height: 40px; /* Высота кнопки равна высоте поля */
    width: 45px;  /* Ширина зоны клика */
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #888; /* Цвет иконки лупы (Серый) */
    transition: color 0.2s;
}

.mh-search-submit-exact:hover {
    color: #555; /* Чуть темнее при наведении */
}

.mh-search-submit-exact svg {
    width: 18px;
    height: 18px;
}

/* --- КНОПКА КАТАЛОГ (Цвет #e44000 как в sticky-panel) --- */

.mh-catalog-pill-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;            
    background-color: #e44000; /* Ваш фирменный цвет */
    color: #ffffff;
    padding: 0 16px;         
    border-radius: 20px;     
    cursor: pointer;
    /* Тень под цвет кнопки */
    box-shadow: 0 2px 5px rgba(228, 64, 0, 0.3); 
    transition: background-color 0.2s;
    overflow: visible; 
}

.mh-catalog-pill-btn:active {
    background-color: #cc3900; /* Цвет при нажатии (как hover на десктопе) */
    transform: scale(0.97);
}

/* Иконка */
.mh-catalog-pill-btn .burger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 13px; 
    height: 10px;
    margin-right: 8px; 
}

.mh-catalog-pill-btn .burger-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 2px;
}

/* Текст */
.mh-catalog-pill-btn .btn-text {
    font-size: 12px;           
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;            
    margin-top: 2px;
    display: block;            
}

/* --- КНОПКА ФИЛЬТРЫ (Стиль как в Sticky Header: Белая с рамкой) --- */

.mh-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;                 /* Отступ между иконкой и текстом */
    height: 40px;             /* Высота 40px */
    padding: 0 15px;          /* Отступы по бокам */
    border: 2px solid #eee;   /* Светло-серая рамка */
    border-radius: 20px;      /* Овальная форма */
    color: #333;              /* Темно-серый текст */
    font-weight: 600;
    font-size: 13px;
    background: #fff;         /* Белый фон */
    cursor: pointer;
    white-space: nowrap;      /* Текст в одну строку */
}

/* Иконка внутри кнопки */
.mh-filter-btn svg {
    color: #e44000;           /* Оранжевый цвет иконки */
    stroke: #e44000;          /* На всякий случай красим и линии */
    display: block;
}

/* Эффект нажатия */
.mh-filter-btn:active {
    background-color: #f9f9f9;
    border-color: #ddd;
}

/* --- КНОПКА КОРЗИНЫ (Светло-серый круг) --- */

.mh-cart-circle {
    display: flex;
    align-items: center; 
    justify-content: center;
    width: 40px;             /* Размер 40px (как у других кнопок) */
    height: 40px;
    background: #eee;        /* Светло-серый фон (цвет рамки фильтров) */
    border-radius: 50%;      /* Круг */
    position: relative;
    text-decoration: none;
    transition: background-color 0.2s;
}

.mh-cart-circle:active {
    background: #e0e0e0;     /* Чуть темнее при нажатии */
}


/* Оранжевый счетчик товаров */
.mh-cart-count {
    position: absolute;
    top: -2px; 
    right: -2px;
    background: #e44000;     /* Ваш фирменный оранжевый */
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px; 
    height: 16px;
    line-height: 16px;       /* Центровка текста по вертикали */
    text-align: center;
    border-radius: 50%;
    border: 2px solid #fff;  /* Белая обводка, чтобы отделить от серого круга */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* --- КНОПКА ТЕЛЕФОНА (Зеленый круг) --- */

.mh-phone-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;             /* Размер 40px */
    height: 40px;
    background-color: #4fa3af; /* Зеленый цвет (как у Мегафона) */
    border: none;
    border-radius: 50%;      /* Круг */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 185, 86, 0.4); /* Зеленоватая тень */
    transition: background-color 0.2s, transform 0.1s;
    padding: 0;
}

.mh-phone-btn:active {
    background-color: #009645; /* Чуть темнее при нажатии */
    transform: scale(0.95);
}

/* Размер иконки внутри */
.mh-phone-btn svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* --- КНОПКА ЛУПЫ (Простая, без фона) --- */

.mh-icon-btn {
    background: transparent; /* Фон прозрачный */
    border: none;            /* Рамки нет */
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;             /* Цвет лупы (темно-серый) */
    transition: color 0.2s, transform 0.1s;
}

/* Настройки самой иконки */
.mh-icon-btn svg {
    /* === РЕГУЛИРОВКА РАЗМЕРА ЗДЕСЬ === */
    width: 28px;   /* Ширина лупы */
    height: 28px;  /* Высота лупы */
    
    /* === РЕГУЛИРОВКА ТОЛЩИНЫ ЗДЕСЬ === */
    stroke-width: 1.5px; /* Толщина линий (можно ставить 1px, 1.5px, 2px...) */
}

/* Эффект при наведении и нажатии */
.mh-icon-btn:hover {
    color: #000; /* Становится черной при наведении */
}

.mh-icon-btn:active {
    transform: scale(0.9); /* Легкое уменьшение при клике */
}

/* --- КНОПКА ДОМОЙ (Серый домик) --- */

.mh-home-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;  /* Фиксированная ширина, как у других кнопок */
    height: 40px; /* Фиксированная высота */
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.1s;
    /* Если нужно чуть отодвинуть от самого края экрана, можно добавить margin-left */
    /* margin-left: 2px; */ 
}

.mh-home-link:active {
    transform: scale(0.9);
}

/* Настройки иконки SVG */
.mh-home-link svg {
    width: 24px;   /* Размер чуть меньше лупы (у лупы 28px) */
    height: 24px;
    display: block;
    stroke: #555;  /* Цвет как у лупы */
    transition: stroke 0.2s;
}

.mh-home-link:hover svg {
    stroke: #000; /* При наведении чернеет */
}

/* --- КОНТЕЙНЕР ШАПКИ (Обновленный) --- */
.mh-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Равномерно распределяет кнопки */
    height: 100%;
    /* Уменьшаем отступы с краев экрана, чтобы кнопкам было просторнее внутри */
    padding: 0 3px; /* 5px - отступ слева/справа. Меняйте эту цифру! */
	/* А если нужно сдвинуть саму иконку внутри квадрата чуть левее/правее */
    /* margin-left: -2px; */
    margin-right: -2px;	
    width: 100%;
    box-sizing: border-box;
}

/* --- КНОПКА ДОМОЙ (Обновленная) --- */
.mh-home-link {
    display: flex;
    align-items: center;
    justify-content: center; /* Центрируем иконку внутри квадрата */
    width: 40px;  /* Фиксированный квадрат, как и другие кнопки */
    height: 40px;
    text-decoration: none;
    cursor: pointer;
    /* Убираем любые лишние отступы, чтобы не толкать соседей */
    margin: 0; 
    padding: 0;
}

.mh-home-link svg {
    width: 26px;   /* Оптимальный размер */
    height: 26px;
    display: block;
    stroke: #555;
    transition: stroke 0.2s;
}

.mh-home-link:hover svg {
    stroke: #000;
}

/* === FIX: ИСПРАВЛЕНИЕ СКРОЛЛА НА МОБИЛЬНЫХ === */
@media (max-width: 1023px) {
    html, body {
        height: auto !important; /* Убираем жесткую высоту 100% */
        min-height: 100% !important;
        overflow-y: auto !important; /* Возвращаем нативную прокрутку */
        overflow-x: hidden !important; /* Убираем гориз. прокрутку */
        position: static !important; /* Убираем возможные фиксации */
    }
    
    #wrap {
        height: auto !important;
        overflow: visible !important; /* Разрешаем контенту растягивать блок */
    }
}

/* === СКРЫВАЕМ "СБРОСИТЬ ФИЛЬТРЫ" ТОЛЬКО НА ТЕЛЕФОНЕ === */
@media (max-width: 1023px) {
    .reset, 
    .reset-filters-btn, 
    input[type="reset"], 
    .filter-submit-container .reset {
        display: none !important;
    }
    
    /* Убираем лишние отступы, которые могли остаться от кнопки */
    .filter-submit-container {
        padding-bottom: 0 !important;
    }
}

/* === ТОЧЕЧНО: СКРЫВАЕМ СБРОС И УБИРАЕМ ОТСТУПЫ (ПОЛОСУ) === */
@media (max-width: 1023px) {
    
    /* 1. Скрываем кнопку сброса */
    #reset-filters-js, 
    .reset, 
    .reset-filters-btn, 
    .filter-submit-container .reset {
        display: none !important;
    }

    /* 2. Убираем белую полосу (внутренние отступы контейнера) */
    .filter-submit-container {
        padding: 0 !important;   /* Было 20-24px, ставим 0 */
        margin: 0 !important;
        min-height: 0 !important;
    }
}



/* === FIX: ЯРКИЙ МИНУС ПО ЦЕНТРУ (ТОЛЬКО МОБИЛЬНЫЙ) === */
@media (max-width: 1023px) {

    /* 1. Настройки самой кнопки (контейнера) */
    .mobile-acc-menu .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        
        /* Убираем любую "пелену" по умолчанию */
        opacity: 1 !important; 
        filter: none !important;
        -webkit-appearance: none !important; /* Убираем стили телефона */
    }

    /* 2. Стиль ОТКРЫТОГО состояния (МИНУС) - ДЕЛАЕМ ЯРКИМ */
    .menu-row.menu-open .menu-toggle {
        background-color: #e44000 !important; /* Насыщенный оранжевый */
        border-color: #e44000 !important;
        
        /* ГАРАНТИЯ ЯРКОСТИ */
        opacity: 1 !important; 
        box-shadow: none !important; 
    }

    /* 3. Делаем сам минус (полоску) ярко-белым */
    .menu-row.menu-open .menu-toggle::before {
        background-color: #ffffff !important;
        opacity: 1 !important; /* Чтобы полоска не была полупрозрачной */
        margin: 0 !important; 
        position: static !important;
    }

    /* 4. Скрываем вертикальную полоску */
    .menu-row.menu-open .menu-toggle::after {
        display: none !important;
    }
}



/* СТИЛИ ДЛЯ ФИЗИЧЕСКОЙ РАСПОРКИ */

    /* На ПК распорка не нужна, скрываем ее */
    .mobile-hard-spacer {
        display: none;
}

 @media (max-width: 1023px) {
        /* На мобильном даем распорке высоту 60px */
        /* Это физически сдвинет товары вниз, так как блок занимает место в потоке */
        .mobile-hard-spacer {
            display: block !important;
            width: 100% !important;
            height: 15px !important; 
            clear: both !important;
    }
        
        /* Доп. страховка для блока товаров */
        .right_block {
            float: none !important;
            clear: both !important;
    }
}


/* --- БЛОК ВАРИАНТОВ (ЦВЕТА) --- */
.productvar {
    margin-top: 10px !important;
    height: 60px !important; /* Фиксируем высоту для ряда иконок */
    overflow: hidden;
    position: relative;
}

.productvar li {
    width: 60px !important; /* Иконки тканей обычно маленькие */
    height: 60px !important;
    float: left;
    margin-right: 5px;
}

.productvar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Ткань должна заполнять квадратик */
    border-radius: 4px;
}


/* ================================================= */
/* === БЛОК ПРЕИМУЩЕСТВ (FINAL: Белый фон / Серые) === */
/* ================================================= */

/* 1. Общий контейнер (Белый фон) */
.advantages-wide {
    display: block !important;
    width: 100% !important;
    background-color: #ffffff !important; /* БЕЛЫЙ ФОН */
    border-top: 1px solid #e3e3e3;
    padding: 40px 0;
    margin-top: 40px;
    clear: both;
}

.advantages-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 2. Заголовок */
.advantages-title {
    text-align: center;
    font-size: 28px;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-weight: 300;
    color: #000;
    display: block;
    width: 100%;
}

.advantages-title span {
    color: #e44000;
    font-weight: 700;
}

/* 3. Сетка (Grid) */
.advantages-grid {
    display: flex !important; /* Flex надежнее */
    flex-wrap: wrap !important;
    justify-content: space-between;
    margin: 0 -15px; /* Компенсация отступов */
}

/* 4. Карточка (Серая плашка) */
.adv-item {
    background-color: #f5f5f5 !important; /* СЕРЫЙ ФОН ПЛАШКИ */
    width: 31% !important; /* 3 в ряд с запасом */
    margin: 0 1% 20px 1% !important;
    padding: 25px 20px;
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #ebebeb;
    box-shadow: none;
    transition: all 0.3s ease;
}

.adv-item:hover {
    background-color: #eeeeee !important; /* Чуть темнее при наведении */
    transform: translateY(-5px);
}

/* Иконка */
.adv-icon {
    font-size: 40px;
    margin-bottom: 15px;
    display: block;
}

/* Название */
.adv-name {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #333;
    display: block;
}

.adv-name a {
    text-decoration: none !important;
    color: #333 !important;
}

/* Текст */
.adv-text {
    font-size: 13px;
    line-height: 1.5;
    color: #666;
}

.adv-text a {
    color: #e44000 !important;
    text-decoration: underline !important;
}

/* === АДАПТИВНОСТЬ === */
@media (max-width: 992px) {
    .adv-item {
        width: 48% !important; /* 2 в ряд на планшете */
    }
}

@media (max-width: 600px) {
    .adv-item {
        width: 100% !important; /* 1 в ряд на телефоне */
        margin: 0 0 15px 0 !important;
    }
}

/* === SEO ТЕКСТ (Скрываем лишнее) === */
.seo-intro {
    height: 180px !important; /* Принудительно ограничиваем высоту */
    overflow: hidden !important;
    position: relative;
    margin-bottom: 20px;
}

/* Класс open добавляется скриптом, когда текст раскрыт */
.seo-intro.open {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 0;
}

/* Туман внизу */
.seo-intro:not(.open)::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 80px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    pointer-events: none;
}

/* === КНОПКА ПО ЦЕНТРУ (Fix) === */
.seo-btn-area {
    display: block;
    width: 100%;           /* Занимаем всю ширину */
    text-align: center;    /* Выравниваем содержимое (кнопку) по центру */
    margin-top: 15px;
    clear: both;
}

.seo-toggle-btn {
    display: inline-block; /* Чтобы слушалась text-align: center */
    padding: 10px 40px;    /* Сделал чуть пошире для красоты */
    border: 2px solid #e44000;
    color: #e44000;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    border-radius: 25px;
    cursor: pointer;
    background: #fff;
    transition: all 0.3s;
}

.seo-toggle-btn:hover {
    background: #e44000;
    color: #fff;
}

/* ================================================================= */
/* === ИСПРАВЛЕННЫЙ ПОРЯДОК ИКОНОК (ПО ТВОЕМУ HTML) === */
/* ================================================================= */

/* Общие настройки (включая "жирность" линий через drop-shadow) */
.adv-icon {
    font-size: 0 !important;
    background-image: none !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 20px auto !important;
    display: block !important;
    
    /* Основной цвет (Терракотовый) */
    background-color: #993300 !important; 
    
    /* Настройки маски */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    
    /* Делаем линии чуть жирнее (как ты просил) */
    filter: drop-shadow(0 0 0.5px #993300);
    
    transition: transform 0.3s ease;
}

/* Эффект при наведении */
.adv-item:hover .adv-icon {
    transform: scale(1.1);
}

/* --- РАСПРЕДЕЛЕНИЕ ПО ПОРЯДКУ --- */

/* 1. ПРЕДЕЛЬНО НИЗКИЕ ЦЕНЫ -> icons-price.png */
.adv-item:nth-child(1) .adv-icon {
    -webkit-mask-image: url('/images/icons-price.png');
    mask-image: url('/images/icons-price.png');
}

/* 2. ПРОВЕРЕННОЕ КАЧЕСТВО -> icons-quality.png */
.adv-item:nth-child(2) .adv-icon {
    -webkit-mask-image: url('/images/icons-quality.png');
    mask-image: url('/images/icons-quality.png');
}

/* 3. ОГРОМНЫЙ ВЫБОР -> icons-furniture.png */
.adv-item:nth-child(3) .adv-icon {
    -webkit-mask-image: url('/images/icons-furniture.png');
    mask-image: url('/images/icons-furniture.png');
}

/* 4. БЕСПЛАТНАЯ ДОСТАВКА -> icons-delivery.png */
.adv-item:nth-child(4) .adv-icon {
    -webkit-mask-image: url('/images/icons-delivery.png');
    mask-image: url('/images/icons-delivery.png');
}

/* 5. ТКАНИ НА ВЫБОР -> icons-cloth.png */
.adv-item:nth-child(5) .adv-icon {
    -webkit-mask-image: url('/images/icons-cloth.png');
    mask-image: url('/images/icons-cloth.png');
}

/* 6. СКИДКИ И АКЦИИ -> icons-discount.png (Красный цвет) */
.adv-item:nth-child(6) .adv-icon {
    -webkit-mask-image: url('/images/icons-discount.png');
    mask-image: url('/images/icons-discount.png');
    
    /* Перекрашиваем только эту иконку в красный */
    background-color: #e40000 !important; 
    filter: drop-shadow(0 0 0.5px #e40000); /* Тень тоже красная */
}

/* ================================================================= */
/* === СТИЛИ АВТОПОИСКА (ИСПРАВЛЕННАЯ ШИРИНА) === */
/* ================================================================= */
.autocomplete-suggestions {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    
    /* Скролл, если много товаров */
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    
    padding: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 2147483647 !important; /* Поверх всего */
    box-sizing: border-box;
    
    /* --- ВАЖНОЕ ИЗМЕНЕНИЕ --- */
    /* Убрали width: auto !important, чтобы работала ширина от JS */
    /* Убрали min-width, чтобы не распирало на мобильных */
}

/* Остальные стили элементов оставляем как были */
.autocomplete-suggestion {
    cursor: pointer;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #333;
    line-height: 1.3;
    transition: background-color 0.2s ease;
}

.autocomplete-suggestion:last-child { border-bottom: none; }

.autocomplete-suggestion:hover, 
.autocomplete-selected {
    background-color: #f7f7f7 !important;
    color: #000 !important;
}

.autocomplete-suggestions strong {
    font-weight: 700;
    color: #e44000;
}

.autocomplete-suggestion img {
    width: 40px; height: 40px; object-fit: contain; margin-right: 12px;
    background: #fff; border: 1px solid #eee; border-radius: 4px; flex-shrink: 0;
}

/* ================================================================= */
/* === СТИЛЬ КНОПКИ "ПОКАЗАТЬ ВСЕ" В ПОИСКЕ === */
/* ================================================================= */

/* Обращаемся к последнему элементу в списке подсказок */
.autocomplete-suggestion:last-child {
    /* 1. Фиксация внизу */
    position: -webkit-sticky; /* Для Safari */
    position: sticky;
    bottom: 0;
    z-index: 100; /* Чтобы был поверх товаров при прокрутке */

    /* 2. Визуальное выделение */
    background-color: #ffecb3 !important; /* Желтоватый фон для заметности */
    border-top: 2px solid #e0e0e0;      /* Граница сверху */
    color: #d83c3c !important;          /* Красный текст или ваш фирменный цвет */
    font-weight: bold;                  /* Жирный шрифт */
    text-align: center;                 /* Текст по центру */
    padding: 12px 10px;                 /* Побольше отступы */
    
    /* Убираем картинку-заглушку, если она вдруг есть */
    background-image: none !important;
}

/* Эффект при наведении на кнопку "Показать все" */
.autocomplete-suggestion:last-child:hover {
    background-color: #ffd54f !important; /* Чуть темнее при наведении */
    cursor: pointer;
}

/* Скрываем пустой блок картинки у кнопки "Показать все", чтобы текст был по центру */
.autocomplete-suggestion:last-child img {
    display: none;
}

/* --- ТОЧЕЧНОЕ ОБНОВЛЕНИЕ ТЕЛЕФОНА --- */

/* 1. Сбрасываем старые границы и отступы у блока телефона */
.tels {
    border: none !important;      /* Убираем вертикальную черту */
    padding: 0 !important;
    margin-bottom: 15px !important;
    height: auto !important;      /* Сбрасываем фиксированную высоту если была */
}

/* 2. Выстраиваем иконку и номер в ряд */
.tels p {
    display: flex !important;
    align-items: center !important;
    gap: 15px;                    /* Отступ между трубкой и цифрами */
    margin: 0 !important;
}

/* 3. Стиль желтого круга */
.phone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: #ffdb4d;    /* Желтый фон */
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    flex-shrink: 0;               /* Не даем кругу сжиматься */
    transition: transform 0.3s ease;
}

/* Иконка внутри */
.phone-icon svg {
    width: 20px;
    height: 20px;
    fill: #d35400;                /* Оранжевая трубка */
}

/* Анимация при наведении */
.tels:hover .phone-icon {
    transform: scale(1.1) rotate(-10deg);
}

/* 4. Сам номер телефона */
.tels a {
    font-size: 24px !important;   /* Размер шрифта */
    font-weight: 700 !important;
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap !important; /* ЗАПРЕЩАЕМ ПЕРЕНОС СТРОКИ */
    border: none !important;        /* Убираем подчеркивания/границы */
}


/* ================================================================= */
/* === FIX V26: ФИНАЛЬНАЯ ЧИСТАЯ СБОРКА (ОТСТУП ПОД ЗНАЧКИ) === */
/* ================================================================= */


/* 1. Сбрасываем отступ под боковую колонку у основного блока */
#content .right_block {
    margin: 0 !important;       /* БЫЛО: 281px (под сайдбар). СТАЛО: 0 */
    padding: 0 !important;
    float: none !important;
    width: 100% !important;     /* Растягиваем на всю ширину окна */
    border: none !important;
}

/* 2. ЛЕВАЯ ЧАСТЬ (Габариты, Сп. место) — ФИКСАЦИЯ ВЫСОТЫ */
.catalog .cat-item .characteristics .size {
    display: flex !important;
    flex-direction: column !important;
    
    /* Прижимаем текст к верху (чтобы 1-2 строки были сверху, а пустота снизу) */
    justify-content: flex-start !important; 
    align-items: flex-start !important;
    text-align: left !important;
    
    /* === ГЛАВНОЕ: РЕЗЕРВ МЕСТА ПОД 3 СТРОКИ === */
    /* Даже если строки нет, блок будет держать высоту */
    min-height: 45px !important; 
    
    flex-grow: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    
    font-size: clamp(10px, 4cqi, 12px) !important;
    line-height: 1.2 !important;
}

.catalog .cat-item .characteristics .size p {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 3. ПРАВАЯ ЧАСТЬ (Цена) */
.catalog .cat-item .price-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;    /* Прижато вправо */
    justify-content: center !important;  
    text-align: right !important;
    
    flex-shrink: 0 !important;
    height: 100% !important;
    width: auto !important;
    
    margin: 0 !important;
    padding-right: 0 !important; /* Уже задано в padding родителя */
    padding-left: 0 !important;
	text-align: center !important;
    position: relative !important;
    /* Убираем лишние отступы вокруг блока цен */
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}



/* --- 1. СЕТКА ТОВАРОВ (GRID) --- */
body #content .catalog-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -5px !important;      
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    font-size: 0; 
}






/* --- 4. АДАПТИВНОСТЬ (КОЛОНКИ) --- */
@media (min-width: 1600px) {
    body #content .catalog-grid .cat-item { width: calc(14.2% - 10px) !important; }
}
@media (max-width: 1599px) and (min-width: 1300px) {
    body #content .catalog-grid .cat-item { width: calc(20% - 10px) !important; }
}
@media (max-width: 1299px) {
    body #content .catalog-grid .cat-item { width: calc(25% - 10px) !important; }
}
@media (max-width: 979px) {
    body #content .catalog-grid .cat-item { width: calc(33.333% - 10px) !important; }
}



/* --- 5. ТЕКСТ, ЦЕНА, КНОПКИ (ВОЗВРАЩАЕМ ОТСТУПЫ ПО БОКАМ) --- */
/* Так как у самой карточки padding по бокам 0 (ради фото), 
   тексту нужно добавить свой padding */
.catalog .cat-item .price-wrap,
.catalog .cat-item .type,
.catalog .cat-item .characteristics,
.catalog .cat-item .variants,
.catalog .cat-item .quick {
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
}

/* ======================================================= */
/* === НАСТРОЙКА: НАЗВАНИЕ, ТИП ДИВАНА, ЦЕНА ПО ФОТО === */
/* ======================================================= */


/* 2. ТИП ДИВАНА (Например "ДИВАН КНИЖКА") */
/* Это тот самый текст внутри ссылки, который подчеркивается вместе с названием */
.catalog .cat-item .name .cathref {
    display: block !important; /* Перенос на новую строку */
    
    /* === НАСТРОЙКА ВЫСОТЫ (ОТСТУП ОТ НАЗВАНИЯ СВЕРХУ) === */
    margin-top: 2px !important;  /* <--- МЕНЯТЬ ЗДЕСЬ */
    /* 0px  = Вплотную к названию
       5px  = Чуть ниже
       10px = Сильно ниже
    */
    
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #999 !important;      /* Цвет текста типа (обычно серый) */
    text-align: left !important;
    white-space: normal !important;
}








/* --- 6. КОНТЕЙНЕР ФОТО (КВАДРАТ 4:4) И СДВИГ НИЖНИХ ПОЛЕЙ --- */
.catalog .cat-item .foto,
.catalog .cat-item .product-jcarousel {
    display: block !important;
    position: relative !important;
    
    /* === 1. ПРОПОРЦИИ ФОТО (ТЕПЕРЬ КВАДРАТ 4:4) === */
    aspect-ratio: 4 / 3.2 !important; 
    
    /* === 2. СДВИГ НИЖНЕГО КОНТЕНТА ВНИЗ === */
    /* Меняйте значение 20px на нужное вам. 
       Это создаст пустое пространство под фото и сдвинет 
       артикул, название и цены вниз. */
    margin: 0 0 10px 0 !important; 

    width: 100% !important;
    /* ЗАМЕНА ЗДЕСЬ: */
    background-color: #ffffff !important;
    overflow: hidden !important;
    z-index: 1 !important;
}


/* --- 7. СТРУКТУРА СЛАЙДЕРА (ДЛЯ JS) --- */

/* Лента */
.catalog .cat-item .product-jcarousel ul {
    position: absolute !important;
    top: 0; left: 0;
    height: 100% !important;
    margin: 0 !important; 
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
}

/* Ячейка */
.catalog .cat-item .product-jcarousel li,
.catalog .cat-item .jcarousel li {
    position: relative !important;
    float: left !important; /* Нужно для работы JS */
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}


/* --- 8. КАРТИНКА (ЯДЕРНОЕ ЦЕНТРИРОВАНИЕ) --- */
html body .catalog .cat-item .product-jcarousel img,
html body .catalog .cat-item .foto img {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important; /* Центровка */
    
    /* Сбрасываем любые размеры от JS */
    width: auto !important;
    height: auto !important;
    
    /* ОГРАНИЧИТЕЛИ */
    max-width: 100% !important;
    max-height: 100% !important;
    
    /* ВПИСЫВАНИЕ */
    object-fit: contain !important;
    display: block !important;
    border: none !important;
    padding: 0 !important;

}


/* --- 9. ПАГИНАЦИЯ (СЕРЫЕ НА СТАРТЕ, ЦВЕТ ПРИ ДВИЖЕНИИ) --- */
.catalog.catalog-grid .jcarousel-pagination {
    position: absolute !important;
    /* === РЕГУЛИРОВКА ВЫСОТЫ (ОТСТУП ОТ НИЗА) === */
    bottom: 0px !important;    /* <--- МЕНЯТЬ ЗДЕСЬ. Чем больше число, тем ВЫШЕ точки */
    /* Пример:
       bottom: 0px;  — прижать к самому низу
       bottom: 20px; — поднять повыше на фото
    */
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 6px !important;          /* Расстояние между точками */
    z-index: 100 !important;
}

/* Точка (Серая) */
.catalog.catalog-grid .jcarousel-pagination a {
    display: block !important;
    
    /* === НАСТРОЙКИ РАЗМЕРОВ === */
    width: 8px !important;         /* Ширина точки */
    height: 8px !important;        /* <--- ВЫСОТА ТОЧКИ (Меняйте здесь) */
    
    /* Если хотите полоски вместо кругов:
       1. Поставьте height: 3px;
       2. Поставьте width: 20px;
       3. Поставьте border-radius: 2px; 
    */
    border-radius: 50% !important; /* 50% = круг. Для полосок ставьте 2px или 4px */
    
    background-color: #ccc !important; 
    text-indent: -9999px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, width 0.2s ease, height 0.2s ease !important;
}

/* Ховер (при наведении) */
.catalog.catalog-grid .jcarousel-pagination a:hover {
    background-color: #e44000 !important;
    opacity: 0.7 !important;
}

/* Активная точка (Только если есть класс .activated от JS) */
.catalog.catalog-grid .jcarousel-pagination.activated a.active {
    background-color: #e44000 !important; 
    opacity: 1 !important;
    
    /* Если хотите, чтобы активная точка была шире других (как черточка), раскомментируйте: */
    /* width: 20px !important; */
    /* border-radius: 4px !important; */
}

/* Размер не меняем (сброс трансформации) */
.catalog.catalog-grid .jcarousel-pagination a.active {
    transform: none !important; 
}

/* Стрелки скрыты */
.catalog.catalog-grid .jcarousel-control-prev,
.catalog.catalog-grid .jcarousel-control-next {
    display: none !important;
}

/* ================================================================= */
/* === FIX V40: РЕЗИНОВОЕ ФОТО (4:3) + КНОПКА СНИЗУ (АБСОЛЮТ) === */
/* ================================================================= */

/* 1. КАРТОЧКА (БАЗА) */
body #content .catalog-grid .cat-item,
.catalog .cat-item {
    display: block !important;
    position: relative !important;
     
    
    /* Место снизу под кнопку */
    padding-bottom: 30px !important;  
    
    /* Убираем боковые отступы у самой карточки */
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    /* Внешние границы */
    margin: 0 10px 20px 10px !important;
    border: none !important;
    /* === ИЗМЕНЕНИЕ 1: НОВЫЙ ЦВЕТ ФОНА КАРТОЧКИ === */
    background-color: #ffffff !important;
    
    /* Скругление всей карточки */
    border-radius: 12px !important; 
    overflow: hidden !important; 
}

/* 2. ФОТО (АБСОЛЮТНОЕ + РЕЗИНОВОЕ) */
.catalog .cat-item .foto,
.catalog .cat-item .product-jcarousel {
    /* Вынимаем из потока и накладываем сверху */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    
    width: 100% !important;
    
    /* === ГЛАВНОЕ: ВЫСОТА ПОДСТРАИВАЕТСЯ ПОД ШИРИНУ === */
    height: auto !important;
    aspect-ratio: 4 / 3 !important; /* Пропорция 4:3 (совпадает с padding-top 75%) */
    
    margin: 0 !important;
    padding: 0 !important;
    /* === ИЗМЕНЕНИЕ 2: ФОН ПОД ФОТО ТАКОЙ ЖЕ, КАК У КАРТОЧКИ === */
    /* Раньше тут было #fff или #f2f2f2. Ставим ваш цвет: */
    background-color: #ffffff !important;
    z-index: 1 !important;
    
    /* Скругление только верхних углов */
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
}

/* Сама картинка внутри */
html body .catalog .cat-item .foto img,
html body .catalog .cat-item .product-jcarousel img {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto !important;
    
    width: 100% !important;        /* Растягиваем */
    height: 100% !important;       /* Растягиваем */
    
    object-fit: contain !important; /* Вписываем (чтобы диван влез целиком) */
    /* Если хотите обрезать края, но заполнить всё, поставьте: cover */
}

/* 3. ЗНАЧОК "СКИДКА" (Поверх фото, отступ 10px) */

.catalog .cat-item .right-icons { 
    top: 0px !important; 
    right: 0px !important; 
    z-index: 20 !important; 
}

/* 4. ТЕКСТОВЫЕ БЛОКИ (Возвращаем внутренние отступы, т.к. у карточки их нет) */

/* Цвета */
.catalog .cat-item .productvar {
    padding-left: 10px !important;
    margin-bottom: 5px !important;
    position: relative; z-index: 5;
    margin-top: 5px !important; /* Небольшой отступ от фото */
}

/* Артикул */
.catalog .cat-item .type {
    position: static !important;
    text-align: right !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin: 0 0 2px 0 !important;
    color: #999 !important;
    font-size: 13px !important;
    min-height: 14px !important;
}

/* 5. Название (В ОДНУ СТРОКУ С ТРОЕТОЧИЕМ) */
.catalog .cat-item .name {
    grid-column: 1 !important;
    grid-row: 4 !important;
    
    text-align: left !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-top: 0 !important;
    
    /* === НАСТРОЙКИ ОБРЕЗКИ ТЕКСТА === */
    white-space: nowrap !important;      /* Запрещаем перенос на новую строку */
    overflow: hidden !important;         /* Скрываем то, что не влезло */
    text-overflow: ellipsis !important;  /* Добавляем троеточие "..." */
    display: block !important;           /* Гарантируем блочное поведение */
    
    height: auto !important;       
    min-height: 38px !important;   
}

/* Страховка для категории, чтобы она не наследовала запрет переноса */
.catalog .cat-item .name .cathref {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}



/* Характеристики */
.catalog .cat-item .characteristics {
    width: 100% !important;
    margin-top: 5px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    background: none !important;
}


/* 5. ЦЕНА (По центру) */
.catalog .cat-item .pricename { display: none !important; }

.catalog .cat-item .price {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;          /* Убираем отступы, чтобы прижать к старой цене */
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #000 !important;
	
}

/* Убираем старый рубль */
.catalog .cat-item .price .rub, .catalog .cat-item .price span { display: none !important; }

/* Новый тонкий рубль */
.catalog .cat-item .price::after {
    content: " \20BD" !important;
    font-weight: 400 !important;
    font-size: 0.8em !important;
    margin-left: 4px !important;
    display: inline-block !important;
}

/* 6. БЫСТРЫЙ ПРОСМОТР */
.catalog .cat-item .quick {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

/* ИСПРАВЛЕНИЕ 1: Быстрый просмотр ниже */
.catalog .cat-item .quick {
    margin-top: 0px !important;    /* Толкаем вниз от цены */
    margin-bottom: 15px !important;  /* Прижимаем ближе к кнопке корзины */
    padding: 0 !important;
    position: relative !important;
    z-index: 20 !important;
}

/* ================================================================= */
/* === FIX V49: КНОПКА С ВЕКТОРНОЙ ИКОНКОЙ (SVG) — ИДЕАЛЬНОЕ КАЧЕСТВО === */
/* ================================================================= */

/* 1. КНОПКА (ОСНОВА) */
.catalog .cat-item .add_to_cart {
    /* Позиционирование */
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    
    /* Размеры */
    width: 100% !important;
    height: 40px !important; /* Удобная высота */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    
    /* ЦЕНТРОВКА (Flexbox) */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: row !important;
    
    /* Дизайн */
    background-color: #e44000 !important; /* Оранжевый */
    background-image: none !important;    /* Убираем старые картинки */
    border: none !important;
    border-radius: 0 0 12px 12px !important;
    z-index: 10 !important;
    
    /* Текст */
    text-decoration: none !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Ховер */
.catalog .cat-item .add_to_cart:hover {
    background-color: #c33700 !important;
}

/* 2. ИКОНКА (SVG) — ЖЕЛТАЯ КОРЗИНКА (КАК НА СКРИНЕ) */
.catalog .cat-item .add_to_cart::before {
    content: "" !important;
    display: block !important;
    
    /* Размеры иконки */
    width: 20px !important;
    height: 20px !important;
    
    /* === ВЕКТОРНАЯ ИКОНКА (ЖЕЛТАЯ) === */
    /* fill='%23ffff00' — это желтый цвет */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcc00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16'/%3E%3Cpath d='m5 9 2 11h10l2-11'/%3E%3Cpath d='m8 9 4-5 4 5'/%3E%3C/svg%3E") !important;
    
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    
    /* Отступ до текста */
    margin-right: 10px !important;
    
    /* Сброс смещений (Flex сам центрирует) */
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 3. ТЕКСТ (С ПРОБЕЛАМИ) */
.catalog .cat-item .add_to_cart span,
.catalog .cat-item .add_to_cart .fst,
.catalog .cat-item .add_to_cart .snd {
    display: inline-block !important;
    margin: 0 2px !important;
    line-height: 1 !important;
    width: auto !important;
    visibility: visible !important;
}

/* 4. СКРЫВАЕМ СТАРЫЙ МУСОР */
.catalog .cat-item .add_to_cart i,
.catalog .cat-item .add_to_cart svg,
.catalog .cat-item .add_to_cart img {
    display: none !important;
}

/* ================================================================= */
/* === ФИНАЛЬНАЯ СЕТКА: ПЕРЕСЧЕТ ПОД ОТСТУПЫ 10px (Всего 22px) === */
/* ================================================================= */

/* 1. Центрируем ВЕСЬ блок каталога на огромных экранах */
#catalog-full-width,
#catalog-full-width.custom-catalog-grid {
    padding-left: 30px !important; 
    padding-right: 30px !important;
    /* Ограничитель: 5 карточек по 350px + 40px отступы = 1950px */
    max-width: 1950px !important; 
    margin: 0 auto !important; /* Центрирует блок, отдавая остаток экрана в боковые поля */
    box-sizing: border-box !important;
}

/* 2. Выравниваем карточки по центру внутри блока */
body #content .catalog-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Центрирует карточки, когда они упираются в свой лимит ширины */
    margin: 0 -10px !important; /* Базовая компенсация для мобильных */
}

/* 3. ЖЕСТКОЕ ОГРАНИЧЕНИЕ: Карточка никогда не будет шире 350px */
body #content .catalog-grid .cat-item,
.catalog .cat-item {
    max-width: 350px !important; /* ТО САМОЕ ПРАВИЛО, ЧТОБЫ НЕ РАЗДУВАЛОСЬ */
    box-sizing: border-box !important;
}

/* ================================================================= */
/* === ФИНАЛЬНАЯ СЕТКА: ВОЗДУШНЫЕ ОТСТУПЫ И МАКСИМУМ 350px === */
/* ================================================================= */

/* МОБИЛЬНЫЕ (до 1023px) - 2 карточки, компактные отступы */
body #content .catalog-grid .cat-item,
.catalog .cat-item {
    margin: 0 10px 20px 10px !important; 
    padding-top: min(37%, 265px) !important; /* Умный стопор отступа */
    width: calc(50% - 22px) !important;
}

/* ПЛАНШЕТЫ И ПК (от 992px) - Воздушные отступы по 20px (итого 40px между) */
@media (min-width: 992px) {
    body #content .catalog-grid {
        margin: 0 -20px !important; /* Компенсация больших отступов */
    }
}

/* МЕНЕЕ 1600px: 3 КАРТОЧКИ */
@media (min-width: 992px) and (max-width: 1599px) {
    body #content .catalog-grid .cat-item, .catalog .cat-item {
        margin: 0 20px 40px 20px !important;
        padding-top: min(25%, 265px) !important; /* Умный стопор отступа */
        width: calc(33.333% - 42px) !important;
    }
}

/* ОТ 1600px ДО 2399px: 4 КАРТОЧКИ */
@media (min-width: 1600px) and (max-width: 2399px) {
    body #content .catalog-grid .cat-item, .catalog .cat-item {
        margin: 0 20px 40px 20px !important;
        padding-top: min(19%, 265px) !important; /* Умный стопор отступа */
        width: calc(25% - 42px) !important;
    }
}

/* ОТ 2400px: 5 КАРТОЧЕК */
@media (min-width: 2400px) {
    body #content .catalog-grid .cat-item, .catalog .cat-item {
        margin: 0 20px 40px 20px !important;
        padding-top: min(15%, 265px) !important; /* Умный стопор отступа */
        width: calc(20% - 42px) !important;
    }
}

/* ================================================================= */
/* === ЧИСТЫЙ БЕЛЫЙ ДИЗАЙН КАРТОЧЕК С ТОНКОЙ РАМКОЙ === */
/* ================================================================= */

/* 1. Меняем фон самой карточки и блока с фото на чистый белый */
body #content .catalog-grid .cat-item,
.catalog .cat-item,
.catalog .cat-item .foto,
.catalog .cat-item .product-jcarousel {
    background-color: #ffffff !important; 
}

/* 2. Добавляем тонкую элегантную рамку по периметру */
body #content .catalog-grid .cat-item,
.catalog .cat-item {
    border: 1px solid #eaeaea !important; /* Тонкая светло-серая обводка */
    box-sizing: border-box !important;
}

/* 3. Фикс для наведения: сохраняем рамку, чтобы карточка не "дергалась" */
.catalog .cat-item:hover {
    border: 1px solid #eaeaea !important; 
}


/* === 4. НОВАЯ СТРОКА "ХИТ АКЦИЯ" (СМЕНА ЦВЕТА И ЖИРНОСТИ) === */

/* Контейнер (без изменений) */
.catalog .cat-item .left-icons {  
    position: static !important; 
    text-align: left !important; 
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin: 0 0 2px 0 !important;
    z-index: 5 !important;
}

/* 1. БАЗОВОЕ СОСТОЯНИЕ (Серый, тонкий) */
.catalog .cat-item .hit, 
.catalog .cat-item .action {
    background: none !important;
    border: none !important;
    
    /* === ИЗМЕНЕНИЯ ЗДЕСЬ === */
    color: #999999 !important;    /* Серый цвет покоя */
    font-weight: 400 !important;  /* Обычный шрифт (не жирный) */
    /* ======================== */
    
    font-size: 13px !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    margin-right: 15px !important;
    
    /* Добавляем плавность, чтобы не моргало резко */
    transition: all 0.2s ease !important;
}

/* 2. ПРИ НАВЕДЕНИИ НА КАРТОЧКУ (Красный, жирный) */
.catalog .cat-item:hover .hit, 
.catalog .cat-item:hover .action {
    color: #ff0000 !important;    /* Становится красным */
    font-weight: 800 !important;  /* Становится жирным */
}

/* ================================================================= */
/* === FIX V52: ТИПОГРАФИКА (БЕЗ ПОДЧЕРКИВАНИЙ + СОВРЕМЕННЫЙ ЭФФЕКТ) === */
/* ================================================================= */

/* 1. ТИП/АРТИКУЛ (СЕРЫЙ ТЕКСТ) — ВООБЩЕ БЕЗ ЭФФЕКТОВ */
.catalog .cat-item .type,
.catalog .cat-item .type a {
    text-decoration: none !important; /* Убираем подчеркивание */
    border-bottom: none !important;   /* На всякий случай убираем границы */
    cursor: default !important;       /* Курсор не меняется на "руку" */
    pointer-events: none !important;  /* Отключаем кликабельность (если нужно) */
}

.catalog .cat-item .type a:hover {
    color: #999 !important;           /* Цвет остается серым при наведении */
    text-decoration: none !important;
}

/* 2. НАЗВАНИЕ ТОВАРА — ПЛАВНЫЙ ЦВЕТОВОЙ ПЕРЕХОД */
.catalog .cat-item .name a {
    text-decoration: none !important; /* Убираем подчеркивание */
    border-bottom: none !important;
    
    color: #000 !important;           /* Изначальный цвет (черный) */
    
    /* СОВРЕМЕННЫЙ ЭФФЕКТ: Плавная анимация цвета за 0.3 секунды */
    transition: color 0.3s ease !important; 
}

/* При наведении название плавно становится оранжевым */
.catalog .cat-item .name a:hover {
    color: #e44000 !important;        /* Фирменный оранжевый */
    text-decoration: none !important; /* Гарантированно без линий */
}

/* ================================================================= */
/* === FIX V57: СМАРТ-ПЛАШКА ("СКИДКА" -> "-30%" ПРИ НАВЕДЕНИИ) === */
/* ================================================================= */

/* 1. КОНТЕЙНЕР (ОБЩАЯ ФОРМА) */
.catalog .cat-item .right-icons {
    /* ПОЗИЦИЯ */
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 25 !important;

    /* ДИЗАЙН (Фирменный оранжевый полупрозрачный) */
    background-color: rgba(228, 65, 0, 0.3) !important; /* Оранжевый полупрозрачный */
    backdrop-filter: blur(4px) !important;             /* Эффект стекла */
    color: #ffffff !important;

    /* РАЗМЕРЫ */
    /* Делаем пошире, чтобы влезло слово "СКИДКА" */
    min-width: 60px !important; 
    height: 34px !important;    /* Фиксируем высоту, чтобы не прыгало */
    padding: 0 10px !important;
    
    border-radius: 0 12px 0 12px !important;
    
    /* ФЛЕКС для центровки всего */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* ПЛАВНАЯ АНИМАЦИЯ ДЛЯ ФОНА */
    transition: background-color 0.4s ease !important;
}

/* 2. ЦИФРА СКИДКИ (СКРЫТА ПО УМОЛЧАНИЮ) */
/* Мы делаем текст прозрачным, чтобы он занимал место, но его не было видно */
.catalog .cat-item .right-icons {
    color: transparent !important; 
}
/* А вот саму цифру внутри (если она в span) или просто текст настраиваем */
.catalog .cat-item .right-icons span,
.catalog .cat-item .right-icons div {
    opacity: 0 !important;  /* Скрываем цифру */
    transform: translateY(10px) !important; /* Сдвигаем вниз */
    transition: all 0.3s ease !important;   /* Анимация появления */
    
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #ffffff !important; /* Цвет цифры когда появится */
}


/* 3. СЛОВО "СКИДКА" (ВИДИМО ПО УМОЛЧАНИЮ) */
/* Используем псевдо-элемент ::after для слова */
.catalog .cat-item .right-icons::after {
    content: "СКИДКА" !important;
    
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    
    /* Центровка слова */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    color: #ffffff !important;
    font-size: 11px !important;       /* Аккуратный шрифт для слова */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;   /* Разрядка букв */
    
    opacity: 1 !important;            /* ВИДИМО СРАЗУ */
    transform: translateY(0) !important;
    transition: all 0.3s ease !important;
}

/* 1. Убираем "внутренний" красный фон и чиним цвет цифры */
.catalog .cat-item .right-icons .discount {
    background: none !important;             /* Убираем красный фон inline */
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    
    /* === ИСПРАВЛЕНИЕ: ЦВЕТ ДОЛЖЕН БЫТЬ БЕЛЫМ, А НЕ ПРОЗРАЧНЫМ === */
    color: #ffffff !important; 
    
    /* Настройки шрифта для цифры */
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 34px !important; /* Центровка по вертикали */
}

/* 2. Отключаем CSS-минус (так как он уже есть в цифре из базы) */
.catalog .cat-item .right-icons::before {
    content: none !important;
    display: none !important;
}

/* 3. Центровка цифры внутри плашки */
.catalog .cat-item .right-icons {
    /* Убеждаемся, что текст по центру */
    justify-content: center !important;
    text-align: center !important;
}

/* ================================================================= */
/* === ЭФФЕКТЫ ПРИ НАВЕДЕНИИ (HOVER) === */
/* ================================================================= */

/* А. Меняем фон на Фирменный оранжевый*/
.catalog .cat-item:hover .right-icons {
    background-color: #e44100 !important; /* Оранжевый */
}

/* Б. Скрываем слово "СКИДКА" (Улетает вверх) */
.catalog .cat-item:hover .right-icons::after {
    opacity: 0 !important;
    transform: translateY(-10px) !important; /* Улетает вверх */
}

/* В. Показываем ЦИФРУ (Вылетает снизу) */
.catalog .cat-item:hover .right-icons,
.catalog .cat-item:hover .right-icons span, 
.catalog .cat-item:hover .right-icons div {
    color: #ffffff !important; /* Делаем видимым */
    opacity: 1 !important;
    transform: translateY(0) !important; /* Встает на место */
}



/* ================================================================= */
/* === FIX V59: АККУРАТНАЯ ТЕНЬ ПРИ НАВЕДЕНИИ === */
/* ================================================================= */

.catalog .cat-item:hover {
    /* Поднимаем карточку выше соседей */
    z-index: 40 !important; 
    
    /* Убираем старые рамки/обводки, если они были */
    outline: none !important;
    border: none !important; 

    /* === НОВАЯ ТЕНЬ === */
    /* 0 10px 30px - это размытие. rgba(0,0,0,0.1) - это прозрачность (очень легкая) */
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3) !important;

    /* === ЛЕГКИЙ ПОДЪЕМ === */
    /* Карточка плавно всплывает на 5 пикселей вверх */
    transform: translateY(-5px) !important;
}

/* Цена по фото (ИСПРАВЛЕНО ДЛЯ РАЗНЕСЕНИЯ ПО КРАЯМ) */
.catalog .cat-item .po-photo {
    display: flex !important;                  /* Включаем Flexbox */
    justify-content: space-between !important; /* Разносим элементы: левый влево, правый вправо */
    align-items: flex-start !important;        /* Выравниваем по верху (или center по центру) */
    
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-top: 3px !important;
    min-height: 15px !important;
    font-size: 12px !important;
    color: #888 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- Ссылка "+ еще варианты" (Стиль Мегафон) --- */
.variant-link {
    /* 1. Цвет Мегафона и базовый вид */
    color: #4fa3af !important; 
    border: 1px solid #4fa3af !important;
    background-color: transparent !important;
    
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: lowercase; /* Или uppercase, если хотите капсом */
    text-decoration: none !important;
    white-space: nowrap !important;
    
    /* Форма таблетки */
    padding: 2px 10px !important;
    border-radius: 20px !important;
    
    /* Позиционирование */
    display: inline-block !important;
    margin-left: auto !important; /* Прижимаем вправо */
    position: relative !important;
    z-index: 30 !important;
    
    /* 2. Современный эффект (Плавность) */
    transition: all 0.3s ease-in-out !important;
}

/* Эффект при наведении (Заливка цветом + Тень) */
.variant-link:hover {
    background-color: #4fa3af !important; /* Зеленый фон */
    color: #ffffff !important;             /* Белый текст */
    box-shadow: 0 4px 10px rgba(0, 185, 86, 0.4) !important; /* Зеленое свечение */
    transform: translateY(-1px);           /* Легкий подъем */
    border-color: #4fa3af !important;
    text-decoration: none !important;
}

/* ================================================================= */
/* === FIX: СТАРАЯ ЦЕНА ПРИ НАВЕДЕНИИ (V2) === */
/* ================================================================= */

.hover-old-price {
    /* Позиционирование */
    position: absolute !important;
    bottom: 45px !important;      /* Высота над кнопкой "Купить" */
    left: 0 !important;
    right: 0 !important;
    z-index: 5 !important;
    
    /* Центровка */
    text-align: center !important;
    display: block !important;
    
    /* Стили текста */
    text-decoration: line-through !important;
    color: #555 !important;       /* Темно-серый */
    font-weight: 400 !important;
    font-size: 16px !important;
    
    /* Скрыто по умолчанию */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(5px);   /* Слегка опущено вниз */
    
    /* Плавная анимация */
    transition: all 0.3s ease-in-out !important;
}

/* При наведении на карточку - показываем */
.cat-item:hover .hover-old-price {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0);     /* Всплывает на место */
}

/* 3. СТАРАЯ ЦЕНА (Логика: Невидимая -> Красная/Жирная) */
.catalog .cat-item .old-price {
    display: block !important;
    text-decoration: line-through !important;
    font-size: 16px !important;
    line-height: 16px !important;
    margin-bottom: 2px !important; /* Минимальный отступ до цены */
    
    /* БАЗОВОЕ СОСТОЯНИЕ: */
    color: transparent !important; /* Невидимая (под цвет фона) */
    font-weight: 400 !important;   /* Тонкая */
    
    /* Плавность перехода */
    transition: all 0.2s ease-in-out !important;
}

/* 4. СТАРАЯ ЦЕНА ПРИ НАВЕДЕНИИ (HOVER) */
.catalog .cat-item:hover .old-price {
    color: #cc3300 !important;     /* Красная */
    font-weight: 600 !important;   /* Жирная (как ХИТ) */
}

/* ================================================================= */
/* === СЛОЖНАЯ ЗАЛИВКА: РЕЗИНОВЫЕ КРАЯ + ФИКСИРОВАННЫЙ ЦЕНТР === */
/* ================================================================= */

/* 1. СЛАЙДЕР (БАННЕР)
   Схема: [FF7733 резина] [993300 - 1160px центр] [FFDDCC резина]
   Расчет: 1160px / 2 = 580px от центра экрана
*/

#mainslider {
    /* СЛОЖНЫЙ ГРАДИЕНТ: Оранжевый (резина) | Темный (центр 1160px) | Светлый (резина) */
    background: linear-gradient(
        to right, 
        #ff9933 0%, 
        #ff9933 calc(50% - 580px), 
        #993300 calc(50% - 580px), 
        #993300 calc(50% + 580px), 
        #FFE6CC calc(50% + 580px), 
        #FFE6CC 100%
    );
    position: relative;
    z-index: 2;
    margin-bottom: 51px;
    padding-top: 1px;
}

/* ================================================================ */
/* === ТОЧЕЧНАЯ НАСТРОЙКА ЦВЕТОВ (ТОЛЬКО ПРАВАЯ КОЛОНКА) === */
/* ================================================================ */

/* 1. Слово "Контактная" (обычно оно в теге span или с классом white) */
#footer .foot_block .row + .row .name span,
#footer .foot_block .row + .row .name .white {
    color: #ffffff !important; /* <-- БЕЛЫЙ (Замени на свой код) */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 2. Слово "информация" (Остальной текст заголовка) */
#footer .foot_block .row + .row .name {
    color: #ffe400 !important; /* <-- БЕЖЕВЫЙ (Замени на свой код) */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}   

/* 3. "Не нашли то, что искали?..." */
#footer .foot_block .row + .row .not_find {
    color: #993300 !important; /* <-- СВЕТЛО-ОРАНЖЕВЫЙ */
    font-style: italic !important; /* Делаем курсивом */
    font-size: 16px !important;    /* Если нужно чуть изменить размер */
    opacity: 1 !important;         /* Убираем прозрачность, если была */
	margin-top: 15px !important;    /* Отступ сверху */
}

/* 4. Номер телефона */
#footer .foot_block .row + .row .tels a {
    color: #ffffff !important; /* <-- БЕЛЫЙ */
    font-weight: 700 !important; /* Жирность (можно убрать) */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 5. Адрес "г. Москва" и гео-иконка */
#footer .foot_block .row + .row .address,
#footer .foot_block .row + .row .address-item,
#footer .foot_block .row + .row .address-item span {
    color: #ffffff !important; /* <-- БЕЛЫЙ */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Цвет самой иконки гео (булавки) */
#footer .foot_block .row + .row .address svg,
#footer .foot_block .row + .row .contact-item svg {
    stroke: #ffffff !important; /* Цвет линий иконки */
    /* fill: #ffffff !important; <--- Раскомментируй, если иконка залитая, а не контурная */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* ========================================================= */
/* === КНОПКА "ПЕРЕЙТИ В КАТАЛОГ" (СКРУГЛЕНИЕ 12px) === */
/* ========================================================= */
.alldiv1 {
    border-radius: 12px !important;
    overflow: hidden !important; /* Обрезает фон по углам */
}

/* На всякий случай скругляем и внутренний span, если фон задан ему */
.alldiv1 span {
    border-radius: 12px !important;
}

/* --- Исправленные стили для логотипов --- */

/* 1. Логотип в шапке (Верхний) */
.header-logo img {
    width: 140px !important;    /* Жестко задаем ширину */
    height: 70px !important;    /* Жестко задаем высоту */
    object-fit: contain;        /* Чтобы картинка не сплющилась */
    max-height: none !important; /* Убираем старые ограничения высоты */
    max-width: none !important;
}

/* Снимаем ограничение с блока-родителя, иначе он может обрезать картинку */
.header-logo {
    max-height: none !important;
    width: auto !important;
}

/* 2. Логотип в футере (Нижний) */
/* Используем двойной селектор, чтобы точно попасть */
#footer .flogo, .flogo {
    width: 280px !important;
    height: 35px !important;
    max-width: 100% !important; /* На случай мобильных */
    object-fit: contain;
    display: block;
}

/* ========================================================= */
/* === СКРЫВАЕМ "МЕНЮ КАТАЛОГА" НА КОМПЬЮТЕРЕ === */
/* ========================================================= */

/* Скрываем кнопку меню и треугольник по умолчанию (для ПК) */
.footer-mobile-title {
    display: none !important;
}

/* На мобильных (ширина до 1023px) кнопка появится снова, 
   так как у вас уже есть настройки для неё в блоке @media (max-width: 1023px) */

/* --- Адаптация логотипов для мобильных --- */
@media screen and (max-width: 1023px) {
    
    /* Растягиваем нижний логотип во всю ширину экрана */
    #footer .flogo, .flogo {
        width: 100% !important;      /* Ширина 100% от контейнера */
        max-width: 100% !important;  /* Убираем ограничения */
        height: auto !important;     /* Высота подстроится сама */
        display: block;
        margin: 10px auto;           /* Немного отступа сверху/снизу */
    }

    /* Если нужно, чтобы и верхний логотип вел себя иначе на мобильных, 
       можно добавить правила сюда. Пока оставляем как есть. */
}

/* ========================================================= */
/* === МОБИЛЬНОЕ МЕНЮ V3 (БЕЗ ЛИНИИ + КОМПАКТНОЕ) === */
/* ========================================================= */

@media (max-width: 1023px) {
    
    /* 1. Убираем границы и отступы у контейнера */
    .links-footer {
        margin-top: 0 !important;       /* Убираем отступ от кнопки "Читать полностью" */
        padding-top: 0 !important;
        border: none !important;        /* Гарантированно убираем все рамки */
        background: transparent !important;
		margin-bottom: 0 !important;   /* Убираем внешний отступ до футера */
        padding-bottom: 0 !important;  /* Убираем внутренний отступ снизу */
    }

    /* 2. КНОПКА "МЕНЮ КАТАЛОГА" */
    .footer-mobile-title {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        
        /* УДАЛЯЕМ ЛИНИЮ */
        border-top: none !important; 
        
        /* Сжимаем высоту кнопки */
        padding: 5px 0 !important;      /* Было 10px, сделали 5px для компактности */
        
        /* Шрифт */
        font-size: 16px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        color: #333 !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* 3. ТРЕУГОЛЬНИК (Отодвигаем от края) */
    .footer-mobile-title .arrow {
        color: #e44000 !important;
        font-size: 14px !important;
        
        /* ОТСТУП СПРАВА */
        margin-right: 20px !important;  /* Отодвинули от правого края экрана */
    }

    /* 4. Уменьшаем отступ снизу (до футера) */
    .footer-grid-wrapper {
        padding-bottom: 10px !important; /* Минимальный отступ после списка */
    }

    /* === ЛОГИКА РАБОТЫ (СВЯЗЬ С JS) === */
    .links-footer details.footer-spoiler {
        display: none !important;
    }

    .links-footer.menu-open details.footer-spoiler {
        display: block !important;
        border-bottom: 1px solid #eee !important;
        padding: 0 0px !important;
    }
    
    /* Цвет заголовка при открытии */
    .links-footer.menu-open .footer-mobile-title {
        color: #e44000 !important;
        padding-bottom: 10px !important; /* Чуть воздуха, когда меню открыто */
    }
}

/* ================================================================= */
/* === МОБИЛЬНАЯ ВЕРСИЯ: ИСПРАВЛЕНИЕ ВСЕХ ПУНКТОВ (FIX V6) === */
/* ================================================================= */

@media (max-width: 1023px) {

    /* --- 1. РАСТЯГИВАЕМ КОНТЕЙНЕР СЕТКИ --- */
    body #content .catalog-grid,
    .catalog.catalog-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        
        /* Тянем сетку в стороны на 10px, чтобы компенсировать отступы главного контейнера. 
           Это расширит зону для карточек ближе к краям экрана */
        margin-left: -30px !important;
        margin-right: -30px !important;
        padding: 0 !important;
    }

    /* --- 2. НАСТРАИВАЕМ КАРТОЧКУ (БЕЗ СЛОМА ВНУТРЕННЕГО КОНТЕНТА) --- */
    body #content .catalog-grid .cat-item,
    .catalog .cat-item {
        /* Возвращаем отображение, которое не ломает ярлыки */
        display: flex !important;
        flex-direction: column !important;
        
        /* Ширина: ровно 50% минус 10px (сумма боковых отступов карточки) */
        width: calc(50% - 10px) !important;
        
        /* margin: сверху | справа | снизу | слева
           5px справа + 5px слева соседней карточки = 10px горизонтальный зазор.
           10px снизу = 10px вертикальный зазор (сравняли с горизонтальным).
        */
        margin: 0 5px 10px 5px !important; 
        
        background-color: #ffffff !important; 
        height: auto !important;
        padding-bottom: 38px !important; 
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    /* Форма-контейнер */
    .catalog .cat-item form {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        width: 100% !important;
    }
    
    /* Раскрываем noindex */
    .catalog .cat-item noindex { display: contents !important; }

    /* --- 1. ФОТО (Сверху) --- */
    .catalog .cat-item .foto,
    .catalog .cat-item .product-jcarousel {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 5px !important;
        background-color: #ffffff !important; 
    }

    /* --- ПАГИНАЦИЯ --- */
    .catalog.catalog-grid .jcarousel-pagination {
        bottom: 5px !important;
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
        gap: 0 !important; /* Отступы задаем в ссылках */
    }

    /* 1. ОБЫЧНАЯ ТОЧКА (НЕАКТИВНАЯ) - СЕРАЯ */
    .catalog.catalog-grid .jcarousel-pagination a {
        width: 5px !important;        /* Размер точки */
        height: 5px !important;
        margin: 0 3px !important;     /* Расстояние между точками */
        border-radius: 50% !important;
        
        /* === ЦВЕТ ПОКОЯ (СЕРЫЙ) === */
        background-color: #cccccc !important; 
        border: none !important;
        
        opacity: 1 !important;        /* Делаем видимой */
        flex-shrink: 0 !important;
        transition: background-color 0.2s ease !important;
    }

    /* 2. АКТИВНАЯ ТОЧКА (ТЕКУЩЕЕ ФОТО) - ОРАНЖЕВАЯ */
    .catalog.catalog-grid .jcarousel-pagination a.active {
        /* === ЦВЕТ АКТИВНОСТИ (ОРАНЖЕВЫЙ) === */
        background-color: #e44000 !important;
        
        /* Если нужно чуть увеличить активную точку */
        /* transform: scale(1.2) !important; */
    }

    /* --- 2. ХИТ / АКЦИЯ --- */
    .catalog .cat-item .left-icons {
        order: 2 !important;
        display: flex !important;
        width: 100% !important;
        padding: 0 8px !important;
        margin-bottom: 2px !important;
    }
	
	/* --- 2. ХИТ / АКЦИЯ (ЯРКИЕ СРАЗУ) --- */
    
    /* Общие настройки для обоих слов */
    .catalog .cat-item .hit, 
    .catalog .cat-item .action {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        margin-right: 10px !important; /* Отступ между словами */
        
        /* Сразу жирный шрифт */
        font-weight: 800 !important; 
        font-size: 11px !important;
        text-transform: uppercase !important;
    }

    /* Индивидуальный цвет: ХИТ (фирменный) */
    .catalog .cat-item .hit {
        color: #cc3300 !important; 
    }
    
    /* Индивидуальный цвет: ХИТ внутри span (страховка) */
    .catalog .cat-item .hit span {
        color: #cc3300 !important; 
    }

    /* Индивидуальный цвет: АКЦИЯ (Красный) */
    .catalog .cat-item .action {
        color: #ff0000 !important; 
    }
    
    /* Индивидуальный цвет: АКЦИЯ внутри span (страховка) */
    .catalog .cat-item .action span {
        color: #ff0000 !important; 
    }

    /* --- 3. НАЗВАНИЕ (ОДНА СТРОКА) --- */
    .catalog .cat-item .name {
        order: 3 !important;
        display: block !important;
        width: 100% !important;
        padding: 0 8px !important;
        margin-bottom: 0 !important;
        text-align: left !important;
        
        /* Обрезка в одну строку */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        
        height: auto !important;
        min-height: 0 !important;
    }
    /* Скрываем всё лишнее внутри названия */
    .catalog .cat-item .name span { display: none !important; }

    /* --- 4. АРТИКУЛ (ТИП) --- */
    .catalog .cat-item .type {
        order: 4 !important;
        display: block !important;
        width: 100% !important;
        padding: 0 8px !important;
        margin-bottom: 2px !important;
        font-size: 10px !important;
        color: #999 !important;
        text-align: left !important;
        line-height: 1.2 !important;
        min-height: 12px !important;
    }

    /* --- ИСПРАВЛЕНИЕ: ЦЕНА ПО ФОТО И ВАРИАНТЫ (ДВЕ СТРОКИ) --- */
    
    /* 1. Сам блок-контейнер: ставим элементы в колонку */
    .catalog .cat-item .po-photo {
        order: 5 !important;            /* Порядок: после Артикула */
        display: flex !important;       /* Включаем Flex */
        flex-direction: column !important; /* СТРОГО ВЕРТИКАЛЬНО (друг под другом) */
        align-items: flex-start !important; /* Прижимаем влево */
        
        width: 100% !important;
        padding: 0 10px !important;
        margin-bottom: 8px !important;
        text-align: left !important;
        min-height: 25px !important;    /* Чуть больше высоты под 2 строки */
    }

    /* 2. Текст "Цена по фото" (span): ДЕЛАЕМ ВИДИМЫМ */
    .catalog .cat-item .po-photo > span { 
        display: block !important;      /* Возвращаем видимость! */
        font-size: 12px !important;     /* Размер шрифта текста */
        color: #cc3300 !important;         /* Цвет (фирменный) */
        margin-bottom: 8px !important;  /* Отступ вниз до кнопки "+ еще" */
        line-height: 1.2 !important;
		font-style: italic !important; /* <--- КУРСИВ */
    }

    /* 3. Кнопка "+ еще ... вариантов" (ПО ЦЕНТРУ) */
    .catalog .cat-item .po-photo .variant-link, 
    .variant-link {
        display: inline-block !important;
        float: none !important;
        
        /* === ЦЕНТРИРОВАНИЕ === */
        align-self: center !important;  /* Если родитель flex-колонки */
        margin: 0 auto !important;      /* Если родитель блочный + отступы */
        /* ===================== */
        
        font-size: 11px !important;
        color: #4fa3af !important;
        border: 1px solid #4fa3af !important;
        border-radius: 10px !important;
        padding: 1px 8px !important;
        text-decoration: none !important;
    }

    /* --- 6. ХАРАКТЕРИСТИКИ (100% ШИРИНА) --- */
    .catalog .cat-item .characteristics {
        order: 6 !important;
        display: block !important;
        width: 100% !important;
        padding: 0 0px !important;
        background: none !important;
        margin-bottom: 5px !important;
        clear: both !important;
    }

    /* ТЕКСТ - На всю ширину */
    .catalog .cat-item .characteristics .size {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin-bottom: 5px !important;
		
    }
    .catalog .cat-item .characteristics .size p {
        /* === ГЛАВНЫЕ НАСТРОЙКИ ДЛЯ ОДНОЙ СТРОКИ === */
        white-space: nowrap !important;      /* Запрещаем перенос */
        overflow: hidden !important;         /* Скрываем лишнее */
        text-overflow: ellipsis !important;  /* Добавляем "..." в конце */
        
        display: block !important;
        width: 100% !important;
        
        /* Остальные настройки шрифта */
        font-size: 11px !important;
        line-height: 1.3 !important;
        color: #555 !important;
        margin-bottom: 3px !important;
    }

    /* ЦЕНА - По центру */
    .catalog .cat-item .price-wrap {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        margin-top: 2px !important;
		/* ГЛАВНОЕ: Убираем отступ снизу */
        margin-bottom: 5px !important;
    }

    /* СТАРАЯ ЦЕНА (Прижата вправо) */
    .catalog .cat-item .old-price {
        display: block !important;
        width: 100% !important;
        
        /* === ГЛАВНОЕ: ВЫРАВНИВАНИЕ ВПРАВО === */
        text-align: right !important; 
        
        /* Убираем отступы справа, если нужно вплотную к краю */
        padding-right: 0 !important; 
        
        font-size: 14px !important;
        color: #cc3300 !important;
        text-decoration: line-through !important;
        margin-bottom: 0 !important;
		font-weight: 500 !important; /* Стандартный жирный */
		
    }
    
    .catalog .cat-item .price {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        color: #000 !important;
    }

    /* 7. КНОПКА */
    .catalog .cat-item .add_to_cart {
        order: 10 !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 0 12px 12px !important;
    }

    /* Скрываем лишнее */
    .catalog .cat-item .quick { display: none !important; }
    .hover-old-price { display: none !important; }
    
    /* --- ПЛАШКА СКИДКИ (ЦИФРА НА ПОЛУПРОЗРАЧНОМ ФОНЕ) --- */

    /* 1. Контейнер плашки */
    .catalog .cat-item .right-icons {
        /* Оранжевый цвет (228, 65, 0) с прозрачностью 0.6 (можно менять от 0.1 до 1) */
        background-color: rgba(228, 65, 0, 0.6) !important; 
        
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        
        min-width: 45px !important;
        height: 24px !important;
        padding: 0 5px !important;
        border-radius: 0 0 0 8px !important;
    }

    /* 2. Скрываем слово "СКИДКА" (которое перекрывало цифру) */
    .catalog .cat-item .right-icons::after {
        display: none !important;
        content: none !important;
    }

    /* 3. Показываем ЦИФРУ */
    .catalog .cat-item .right-icons span,
    .catalog .cat-item .right-icons div,
    .catalog .cat-item .right-icons .discount {
        opacity: 1 !important;          /* Делаем видимой */
        visibility: visible !important;
        transform: none !important;     /* Убираем смещения */
        
        color: #ffffff !important;      /* Белый текст */
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        
        background: none !important;    /* Убираем лишние фоны у самого текста */
        display: block !important;
        text-shadow: 0 1px 1px rgba(0,0,0,0.2) !important; /* Легкая тень для читаемости */
    }
	
	/* ========================================================= */
    /* === 1. УБИРАЕМ ПОЛОСКУ И НАСТРАИВАЕМ ЗАГОЛОВОК === */
    /* ========================================================= */
    
    /* Перебиваем настройки из custom.css */
    #catalog-block .catalog-header-row h1.catalog-name,
    #catalog-block .catalog-header-row h2.catalog-name,
    .catalog-name {
        /* ГЛАВНОЕ: Убираем оранжевую черту */
        border: none !important;      
        border-left: none !important; 
        
        /* Убираем отступ слева, который был для черты */
        padding-left: 0 !important;   
        
        /* Внешний вид */
        text-align: center !important; /* Центруем текст */
        font-size: 20px !important;    /* Размер шрифта (поменьше) */
		
        
        /* ОТСТУПЫ ЗАГОЛОВКА: Сжимаем сверху и снизу */
        margin-top: -15px !important;    
        margin-bottom: 10px !important; 
    }

    /* ========================================================= */
    /* === 2. УМЕНЬШАЕМ ОТСТУПЫ (ШАПКА - КНОПКА - ТОВАРЫ) === */
    /* ========================================================= */

    /* Шаг 1: Поднимаем весь блок контента выше к шапке сайта */
    body #content {
        padding-top: 0 !important;   /* Минимальный отступ от меню */
    }

    /* Шаг 2: Кнопка "ФИЛЬТРЫ И ПОДБОР" (уменьшаем воздух вокруг нее) */
    /* Обычно она лежит в блоке .catalog-controls или сама по себе */
    .catalog-controls, 
    #show-filters-btn, 
    .filter-btn-wrapper {
        margin-top: 0 !important;      /* Прижимаем к заголовку */
        margin-bottom: 0 !important;/* Прижимаем к товарам снизу */
    }

    /* Шаг 3: Сетка товаров (прижимаем к кнопке фильтров) */
    .catalog-grid {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
	

	
	/* ========================================================= */
    /* === ТОЧЕЧНО: СЖАТИЕ ОТСТУПОВ (КНОПКА КАТАЛОГА + ТЕКСТ) === */
    /* ========================================================= */

    /* 1. Кнопка "ПЕРЕЙТИ В КАТАЛОГ" */
    .alldiv1 {
        margin-top: -5px !important;    /* Было 32px. Прижимаем к товарам */
        margin-bottom: 15px !important; /* Было 32px. Прижимаем к тексту ниже */
    }

    /* 2. Блок текста "Почему покупают..." (Сразу под кнопкой) */
    /* Убираем внешние отступы у контейнера текста */
    .inner-block {
        margin-top: -30px !important;       /* Убираем inline-стиль 20px */
        padding-top: 0 !important;
    }

    /* 3. Заголовки h2 внутри текста (Подтягиваем их вверх) */
    #content .inner-block h2,
    #content h2,
    .content-text h2 {
        margin-top: -30px !important;       /* Убираем отступ сверху */
        margin-bottom: 10px !important; /* Небольшой отступ до текста */
        padding-top: 0 !important;
        
        font-size: 19px !important;     /* Делаем шрифт чуть аккуратнее */
        line-height: 1.2 !important;
    }
    
    /* 4. Сам текст (параграфы) */
    #content .inner-block p {
        margin-bottom: 10px !important; /* Уменьшаем пробелы между абзацами */
    }
	
	/* ========================================================= */
    /* === ПРЕИМУЩЕСТВА: 2 В РЯД (МОБИЛЬНАЯ ВЕРСИЯ) === */
    /* ========================================================= */

    /* 1. Корректировка сетки */
    .advantages-grid {
        margin: 0 -5px !important; /* Уменьшаем отрицательный отступ контейнера */
        display: flex !important;
        flex-wrap: wrap !important;
    }

    /* 2. Сама плитка (делаем 50% ширины) */
    .adv-item {
        /* Ширина: 50% минус отступы (5px слева + 5px справа) */
        width: calc(50% - 10px) !important; 
        margin: 0 5px 10px 5px !important;
        
        /* Внутренние отступы поменьше */
        padding: 15px 5px !important; 
        
        /* Выравнивание высоты */
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* 3. Иконка (Уменьшаем с 64px до 40px, чтобы влезло) */
    .adv-icon {
        width: 40px !important; 
        height: 40px !important;
        margin-bottom: 8px !important;
        background-size: contain !important;
    }

    /* 4. Заголовок (Например: "Предельно низкие цены") */
    .adv-name {
        font-size: 11px !important; 
        line-height: 1.2 !important;
        margin-bottom: 5px !important;
        
        /* Фиксируем высоту под 2 строки, чтобы плитки были ровными */
        min-height: 28px !important; 
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 5. Текст описания */
    .adv-text {
        font-size: 10px !important;
        line-height: 1.2 !important;
        color: #777 !important;
    }
	
	/* ========================================================= */
    /* === УМЕНЬШЕНИЕ ОТСТУПОВ ВОКРУГ ЧЕРТЫ (ПРЕИМУЩЕСТВА - ТЕКСТ) === */
    /* ========================================================= */

    /* 1. Блок с иконками (верхняя часть) */
    .advantages-wide {
        /* Уменьшаем отступ от нижних плиток до границы блока */
        padding-bottom: 5px !important; /* Было 40px */
        margin-bottom: 0 !important;
        
        /* Если черта - это нижняя граница преимуществ */
        border-bottom: 1px solid #e3e3e3 !important; 
    }

    /* 2. Блок с текстом "Каталог диванов" (нижняя часть) */
    #advantage,
    .seo-intro {
        /* Уменьшаем отступ от границы блока до заголовка */
        padding-top: 5px !important; 
        margin-top: 0 !important;
		border-top: none !important;
		border-bottom: none !important; 
        box-shadow: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 3. Сам заголовок "КАТАЛОГ ДИВАНОВ" */
    .seo-intro h2,
    .seo-intro .heading3 {
        margin-top: 0 !important; /* Убираем лишний воздух над буквами */
        padding-top: 0 !important;
    }
	
	/* ========================================================= */
    /* === ФОРМАТИРОВАНИЕ ТЕКСТА "ЧИТАТЬ ПОЛНОСТЬЮ" (FIX) === */
    /* ========================================================= */

    /* 1. Блоки внутри текста (разделяем их, чтобы не наезжали) */
    .seo-intro .inner-block {
        margin-top: 30px !important;    /* Возвращаем отступ сверху */
        margin-bottom: 20px !important; /* Отступ снизу */
        display: block !important;
        clear: both !important;         /* Запрещаем обтекание (убирает наложение) */
        height: auto !important;
    }

    /* 2. Заголовки H2 внутри текста */
    .seo-intro h2,
    .seo-intro .inner-block h2 {
        margin-top: 0 !important;
        margin-bottom: 15px !important; /* Воздух под заголовком */
        padding-top: 0 !important;
        
        font-size: 18px !important;     /* Читаемый размер */
        line-height: 1.3 !important;    /* Нормальная высота строки */
        text-transform: uppercase !important;
        word-wrap: break-word !important;
    }

    /* 3. Абзацы (обычный текст) */
    .seo-intro p {
        margin-bottom: 15px !important; /* Отступ между абзацами */
        line-height: 1.5 !important;    /* Удобное чтение */
        text-align: left !important;
    }

    /* 4. Списки (если есть) */
    .seo-intro ul {
        margin-bottom: 15px !important;
        padding-left: 20px !important;
    }
    .seo-intro li {
        margin-bottom: 8px !important;
    }
	
}

/* ========================================================= */
/* === МОБИЛЬНАЯ ШАПКА: БАЛАНС 1 к 4 (FIX V4) === */
/* ========================================================= */

.mobile-fixed-header { display: none; }

@media screen and (max-width: 1023px) {
    
    /* Скрываем лишнее */
    .desktop-header-wrapper, .header, #header, #menu, .top-bar, #navigation, .top-line { 
        display: none !important; 
    }
    
    body { padding-top: 55px !important; } 
    #wrap { margin-top: 0 !important; }

    /* Основа */
    .mobile-fixed-header {
        display: block !important;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 55px;
        background: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 10000;
        border-bottom: 1px solid #eee;
    }

    /* Контейнер */
    .mobile-fixed-header .mh-container {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        /* Убрали лишние отступы, flex сам распределит */
        padding: 0 !important; 
        box-sizing: border-box !important;
    }

    /* --- [1] и [3,4,5,6] ВСЕ КНОПКИ (КРОМЕ ЛОГО) --- */
    /* Всем даем одинаковый вес (flex: 1). 
       Это значит: Бургер займет 1 часть слева, 
       а 4 иконки справа займут 4 такие же части. */
    .mh-burger-wrap,
    .mh-search-wrap,
    .mh-phone-wrap,
    .mh-filter-wrap,
    .mh-cart-wrap {
        flex: 1 !important;             /* Равные доли */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* Центруем иконку ВНУТРИ её доли */
        height: 100% !important;
        margin: 0 !important;
        min-width: 0 !important;        /* Защита от распирания */
    }

    /* --- [2] ЛОГОТИП (ЦЕНТР КОМПОЗИЦИИ) --- */
    .mh-home-link {
        flex: 0 0 auto !important;      /* Не сжиматься и не расти */
        width: 110px !important;        /* Жесткая ширина (как вы просили) */
        height: 55px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        /* Небольшие отступы, чтобы картинка не слипалась с соседями */
        padding: 0 5px !important;      
    }
    
    .mh-home-link img {
        height: 100% !important;        /* На всю высоту (55px) */
        width: 100% !important;         /* На всю ширину (110px) */
        object-fit: contain !important; /* Вписываем без искажений */
        display: block !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 55px !important;    /* Защита от eskimobi.css */
		min-width: 110px !important;
        max-width: none !important;
    }

    /* --- СТИЛИ ИКОНОК ВНУТРИ ЯЧЕЕК --- */

    /* --- [1] БУРГЕР (С АНИМАЦИЕЙ КРЕСТИКА) --- */
    .mh-burger {
        width: 24px; 
        height: 18px;
        position: relative; 
        cursor: pointer;
        display: flex; 
        flex-direction: column; 
        justify-content: space-between;
        z-index: 10001; /* Чтобы крестик был поверх меню */
    }

    /* Настройки полосок */
    .mh-burger span {
        display: block; 
        width: 100%; 
        height: 2px; 
        background: #333; 
        border-radius: 2px;
        /* Добавляем плавность превращения */
        transition: all 0.3s ease-in-out; 
        transform-origin: center;
    }

    /* === СОСТОЯНИЕ "КРЕСТИК" (Класс .active) === */
    
    /* 1. Верхняя полоска: опускается в центр и поворачивается на 45 градусов */
    .mh-burger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    /* 2. Средняя полоска: исчезает */
    .mh-burger.active span:nth-child(2) {
        opacity: 0;
        transform: scale(0); /* Сжимается */
    }

    /* 3. Нижняя полоска: поднимается в центр и поворачивается на -45 градусов */
    .mh-burger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Поиск (кнопка) */
    .mh-search-btn {
        background: transparent !important; border: none !important; padding: 0 !important; 
        width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    }
    .mh-search-btn svg { width: 35px; height: 35px; color: #333; 
	    stroke-width: 1px !important;
	}

    /* ========================================================= */
/* === ВЫПАДАЮЩАЯ ПАНЕЛЬ ТЕЛЕФОНА === */
/* ========================================================= */

/* Сам выпадающий блок */
.mh-phone-panel {
    position: fixed;
    top: 55px; /* Сразу под шапкой */
    left: 0;
    width: 100%;
    background: #ffffff;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Красивая тень */
    border-top: 1px solid #f0f0f0;
    z-index: 9999;
    text-align: center;
    box-sizing: border-box;
}

/* Крупный номер телефона */
.mh-big-phone {
    display: block;
    font-size: 26px;       /* Крупный шрифт */
    font-weight: 800;      /* Жирный */
    color: #222222;        /* Темный цвет */
    text-decoration: none;
    margin-bottom: 10px;   /* Отступ до ссылки */
    font-family: 'Open Sans', sans-serif;
}

/* Ссылка "Заказать звонок" */
.mh-callback-link {
    display: inline-block;
    color: #e44000;        /* Фирменный оранжевый */
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 1px dotted #e44000; /* Пунктирное подчеркивание */
    cursor: pointer;
    text-decoration: none;
}

    /* Фильтры */
    .mh-filter-btn {
        width: 36px; height: 36px;
        border-radius: 50%; border: 1px solid #eee; background: #fff;
        display: flex; align-items: center; justify-content: center;
        padding: 0 !important;
    }
    .mh-filter-btn span { display: none !important; } 
    .mh-filter-btn svg { width: 18px; height: 18px; stroke: #e44000; }

    /* Корзина */
    .mh-cart-circle {
        position: relative; display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px;
    }
    .mh-cart-count {
        position: absolute; top: 2px; right: 0px;
        background: #e44000; color: #fff; font-size: 10px; font-weight: bold;
        min-width: 16px; height: 16px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        border: 2px solid #fff;
    }
}

/* ========================================================= */
/* === ШАПКА КАТАЛОГА: ФИНАЛ (ПК + МОБ 1 СТРОКА) === */
/* ========================================================= */

/* --- 1. ПК ВЕРСИЯ (> 992px) --- */
@media screen and (min-width: 992px) {
    .catalog-header-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 20px;
        position: relative;
    }

    /* ЗАГОЛОВОК (ПК: С оранжевой полосой) */
    .header-title-wrap .catalog-name {
        margin: 0;
        height: 50px;
        display: flex;
        align-items: center;
        padding: 0 30px 0 73px;
        background: url(/design/ohdesign/images/sprite.png) -42px -957px no-repeat #e44000;
        color: #fff;
        font-size: 22px;
        text-transform: uppercase;
        font-weight: 700;
    }
    
    .header-title-wrap .catalog-name .yellow { color: #fff; }

    /* КНОПКА (ПК: Большая) */
    .filter-btn {
        height: 40px;
        padding: 0 20px;
        background: #fff; 
        border: 1px solid #ccc;
        border-radius: 20px;
        display: flex; align-items: center;
        cursor: pointer;
        transition: all 0.2s;
    }
    .filter-btn:hover { background: #f9f9f9; }
    
    .filter-btn svg { width: 18px; height: 18px; margin-right: 10px; stroke: #333; }
    .btn-text { color: #333; font-size: 14px; font-weight: 600; text-transform: uppercase; }
}


/* --- 2. МОБИЛЬНАЯ ВЕРСИЯ (< 1023px) --- */
@media screen and (max-width: 1023px) {
    
    /* КОНТЕЙНЕР: СТРОГО В ОДНУ СТРОКУ (Flex + Nowrap) */
    .catalog-header-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important; /* Запрещаем перенос */
        margin-bottom: 0px !important;
        padding-top: 0px !important;
        padding-left: 5px; padding-right: 5px;
    }

    /* ЗАГОЛОВОК (Слева) */
    .header-title-wrap {
        flex: 1; /* Занимает все свободное место */
        min-width: 0; /* Разрешаем сжиматься тексту */
        margin-right: 10px; /* Отступ до кнопки */
        text-align: left;
    }

    .header-title-wrap .catalog-name {
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #000 !important;
        display: block !important;
        
        /* Шрифт поменьше, чтобы влезло в 1 строку */
        font-size: 15px !important; 
        font-weight: 700 !important;
        text-transform: uppercase;
        line-height: 1.1 !important;
        
        /* Если текст не влезает - ставим троеточие */
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .header-title-wrap .catalog-name .yellow { color: #e44000 !important; }

    /* ОБЕРТКА КНОПКИ (Справа) */
    .filter-toggle-wrap {
        flex: 0 0 auto; /* Не сжиматься */
        width: auto !important;
    }

    /* КНОПКА (Мобильная компактная) */
    .filter-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        width: auto !important;         
        height: 32px !important;        /* Компактная высота */
        padding: 0 0 !important;     /* Небольшие отступы */
        
        background: #fff !important;
        border: 1px solid #ccc !important;
        border-radius: 16px !important; 
    }
    
    /* Иконка */
    .filter-btn svg { 
        width: 18px !important; height: 18px !important; 
        margin-right: 6px !important; 
        stroke: #cc3300 !important; 
    }
    
    /* Текст кнопки */
    .btn-text { 
        font-size: 14px !important; /* Уменьшенный шрифт для мобильного */
        font-weight: 700 !important; 
        color: #333 !important; 
        text-transform: uppercase; 
        white-space: nowrap !important;
    }
	
/* ========================================================= */
    /* === СКРЫТИЕ КНОПКИ И СВОРАЧИВАНИЕ КОНТЕЙНЕРА (МОБ) === */
    /* ========================================================= */

    /* 1. Скрываем саму кнопку "Фильтры и подбор" */
    #show-filters-btn {
        display: none !important;
    }

    /* 2. Сворачиваем контейнер в ноль (чтобы не было дырки) */
    /* ВАЖНО: Мы НЕ пишем display:none контейнеру, иначе попап внутри него умрет */
    .filter-toggle-wrap {
        display: block !important;      /* Оставляем в коде */
        width: 0 !important;            /* Ширина 0 */
        height: 0 !important;           /* Высота 0 */
        margin: 0 !important;           /* Отступы 0 */
        padding: 0 !important;          /* Поля 0 */
        border: none !important;        /* Рамки нет */
        
        /* Самое важное: разрешаем выпадашке "вылезать" за пределы свернутого блока */
        overflow: visible !important;   
        position: static !important;    /* Или relative, зависит от контекста, static безопаснее для потока */
        z-index: 100 !important;
    }
	
	/* ================================================================= */
/* === ПРЕВРАЩЕНИЕ ИКОНОК В КРЕСТИК (ТЕЛЕФОН, ПОИСК, ФИЛЬТРЫ) === */
/* ================================================================= */

/* 1. Делаем кнопки "относительными", чтобы крестик не улетал */
.mh-item button,
.mh-filter-btn,
.mh-phone-btn,
.mh-icon-btn {
    position: relative !important; /* ВАЖНО: Крестик будет жить внутри этих границ */
}

/* 2. Когда кнопка активна, скрываем её родную SVG иконку */
.mh-item button.active svg,
.mh-filter-btn.active svg,
.mh-phone-btn.active svg,
.mh-icon-btn.active svg {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 3. Рисуем крестик поверх кнопки через псевдо-элемент */
.mh-item button.active::before,
.mh-filter-btn.active::before,
.mh-phone-btn.active::before,
.mh-icon-btn.active::before {
    content: "" !important;
    position: absolute !important;
    
    /* Центрирование внутри кнопки */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* Размеры крестика */
    width: 24px !important;
    height: 24px !important;
    
    /* Картинка крестика (Темно-серая по умолчанию) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    z-index: 100 !important;
    display: block !important;
}

/* 4. СПЕЦИАЛЬНЫЙ ЦВЕТ ДЛЯ ЗЕЛЕНОЙ КНОПКИ ТЕЛЕФОНА (Белый крестик) */
.mh-phone-btn.active::before {
    /* Меняем цвет SVG на белый (%23ffffff) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
}
}

/* ========================================================= */
/* === СКРЫТИЕ ТЕКСТА ОФЕРТЫ В ФУТЕРЕ (МОБИЛЬНАЯ ВЕРСИЯ) === */
/* ========================================================= */

@media (max-width: 1023px) {
    #footer .wrapper.bottom .info {
        display: none !important;
    }
	
	/* ========================================================= */
    /* === УДАЛЕНИЕ 5 ПИКСЕЛЕЙ (ФИНАЛЬНЫЙ КОД) === */
    /* ========================================================= */

    /* 1. Убираем нижний отступ у самого окна фильтров (если он там есть) */
    #filter-dropdown {
        padding-bottom: 0 !important; 
    }

    /* 2. Лечим контейнер кнопки от "текстовых" отступов */
    .filter-submit-container {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        border: none !important;
        height: auto !important;
        background: transparent !important;
        
        /* УБИВАЕМ ПАРАЗИТНЫЕ 5 ПИКСЕЛЕЙ: */
        line-height: 0 !important; 
        font-size: 0 !important;   
    }

    /* 3. Делаем кнопку блоком, чтобы она не стояла на "строке" */
    .btn-filter-show {
        margin-bottom: 0 !important;
        display: block !important;     /* Важно! */
        vertical-align: bottom !important;
        width: 100% !important;
        border-radius: 0 !important;   /* Если нужно, чтобы кнопка была вплотную к краям */
    }
	
	/* ================================================================= */
/* === ИСПРАВЛЕНИЕ МОБИЛЬНОГО МЕНЮ (ФИНАЛ) === */
/* ================================================================= */

/* 1. Настройка стрелки (Цвет #993300) */
.footer-mobile-title {
    position: relative !important;
    cursor: pointer;
}

.footer-mobile-title .arrow {
    content: '' !important;
    font-size: 0 !important;
    background: none !important;
    
    /* Позиция справа */
    position: absolute !important;
    right: 0px !important; 
    top: 50% !important;
    
    /* Рисуем галочку линиями */
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border: none !important;
    
    /* ЦВЕТ СТРЕЛКИ */
    border-right: 2px solid #993300 !important; 
    border-bottom: 2px solid #993300 !important; 
    
    /* Поворот вниз */
    transform: rotate(45deg) !important;
    margin-top: -8px !important; 
    transition: transform 0.3s ease !important;
}

/* 2. Поворот стрелки при нажатии (смотрит ВВЕРХ) */
.footer-mobile-title.active .arrow {
    transform: rotate(225deg) !important;
    margin-top: -2px !important;
}

/* 3. ПРИНУДИТЕЛЬНОЕ ОТКРЫТИЕ МЕНЮ */
/* Это правило перебьет любые скрытые настройки шаблона */
html body.eskimobi_responsive #footer .categories.open_menu {
    display: block !important;
    padding-bottom: 20px;
}
}

/* ========================================================= */
/* === МОБИЛЬНОЕ МЕНЮ (ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ) === */
/* ========================================================= */

@media (max-width: 1023px) {
    /* 1. По умолчанию скрываем все выпадающие списки (теги details) */
    #footerCatalogBlock .footer-spoiler {
        display: none;
    }

    /* 2. ГЛАВНОЕ ПРАВИЛО: */
    /* Если у родителя (#footerCatalogBlock) есть класс .open, то показываем списки */
    #footerCatalogBlock.open .footer-spoiler {
        display: block !important;
        margin-bottom: 10px; /* Отступ между блоками */
    }

    /* 3. Настройка кнопки (для надежности) */
    .footer-mobile-title {
        position: relative !important;
        cursor: pointer;
        padding-bottom: 15px; /* Отступ от текста до меню */
    }

    /* 4. Стрелка (Ваш цвет #993300 и позиция) */
    .footer-mobile-title .arrow {
        content: '' !important;
        background: none !important;
        font-size: 0 !important;
        
        position: absolute !important;
        right: -2px !important; 
        top: 50% !important;
        
        display: block !important;
        width: 10px !important;
        height: 10px !important;
        
        border: none !important;
        border-right: 2px solid #993300 !important;
        border-bottom: 2px solid #993300 !important;
        
        transform: rotate(45deg) !important;
        margin-top: -8px !important; /* Центрируем */
        
        transition: transform 0.3s ease !important;
    }

    /* 5. Поворот стрелки вверх при открытии */
    .footer-mobile-title.active .arrow {
        transform: rotate(225deg) !important;
        margin-top: -5px !important;
    }
	
}

/* ================================================================= */
/* === СВОРАЧИВАНИЕ БЛОКА КОНТАКТЫ === */
/* ================================================================= */

@media (max-width: 1023px) {
    /* 1. Скрываем содержимое контактов по умолчанию */
    .footer-spoiler-body {
        display: none;
    }

    /* 2. Настраиваем стрелку для заголовка "Контактная информация" */
    /* Используем темный цвет #993300, так как фон блока бежевый */
    html body.eskimobi_responsive #footer .foot_block .row .name::after {
        content: '' !important;
        background: none !important;
        display: block !important;
        width: 10px !important;
        height: 10px !important;
        border: none !important;
        
        /* ЦВЕТ СТРЕЛКИ (Темно-коричневый) */
        border-right: 2px solid #993300 !important; 
        border-bottom: 2px solid #993300 !important; 
        
        position: absolute !important;
        right: 5px !important; 
        top: 50% !important;
        
        transform: rotate(45deg) !important;
        margin-top: -8px !important;
        transition: transform 0.3s ease !important;
    }

    /* 3. При открытии (класс active) поворачиваем стрелку вверх */
    html body.eskimobi_responsive #footer .foot_block .row .name.active::after {
        transform: rotate(225deg) !important;
        margin-top: -2px !important;
    }
	
	/* ================================================================= */
/* === ИСПРАВЛЕНИЕ КОНФЛИКТА В БЛОКЕ "ПОКУПКИ" === */
/* ================================================================= */

/* Отключаем открытие через CSS, чтобы работал плавный скрипт */
html body.eskimobi_responsive #footer .foot_block .row:nth-of-type(1) .name.active+.lists {
    display: none; /* Убираем авто-показ */
}

/* Гарантируем, что списки скрыты по умолчанию, пока скрипт их не откроет */
html body.eskimobi_responsive #footer .foot_block .row .lists {
    display: none;
}

/* ================================================================= */
/* === ЦВЕТА СТРЕЛОК В ФУТЕРЕ (РАЗНЫЕ ДЛЯ БЛОКОВ) === */
/* ================================================================= */

/* 1. БЛОК "ПОКУПКИ И СЕРВИС" (Первый блок) -> ЖЕЛТАЯ СТРЕЛКА */
html body.eskimobi_responsive #footer .foot_block .row:nth-of-type(1) .name::after {
    content: '' !important;
    background: none !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border: none !important;
    
    /* ЖЕЛТЫЙ ЦВЕТ */
    border-right: 2px solid #FFFF00 !important; 
    border-bottom: 2px solid #FFFF00 !important; 
    
    position: absolute !important;
    right: 5px !important; 
    top: 50% !important;
    transform: rotate(45deg) !important;
    margin-top: -8px !important;
    transition: transform 0.3s ease !important;
}

/* Поворот для "Покупок" */
html body.eskimobi_responsive #footer .foot_block .row:nth-of-type(1) .name.active::after {
    transform: rotate(225deg) !important;
    margin-top: -2px !important;
}


/* 2. БЛОК "КОНТАКТНАЯ ИНФОРМАЦИЯ" (Второй блок) -> КОРИЧНЕВАЯ СТРЕЛКА */
html body.eskimobi_responsive #footer .foot_block .row:nth-of-type(2) .name::after {
    content: '' !important;
    background: none !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border: none !important;
    
    /* КОРИЧНЕВЫЙ ЦВЕТ */
    border-right: 2px solid #993300 !important; 
    border-bottom: 2px solid #993300 !important; 
    
    position: absolute !important;
    right: 5px !important; 
    top: 50% !important;
    transform: rotate(45deg) !important;
    margin-top: -8px !important;
    transition: transform 0.3s ease !important;
}

/* Поворот для "Контактов" */
html body.eskimobi_responsive #footer .foot_block .row:nth-of-type(2) .name.active::after {
    transform: rotate(225deg) !important;
    margin-top: -2px !important;
}
}

/* ================================================================= */
/* === ИСПРАВЛЕНИЕ ВЫСОТЫ ФУТЕРА (СБРОС СТАРЫХ НАСТРОЕК) === */
/* ================================================================= */

@media (max-width: 1023px) {
    /* 1. Сбрасываем жесткую высоту и "прилипание" футера */
    html body.eskimobi_responsive #footer {
        min-height: 0 !important;      /* Разрешаем футеру быть низким */
        height: auto !important;       /* Высота зависит от контента */
        margin-top: 0 !important;      /* Убираем отрицательный отступ */
        padding-bottom: 20px !important; /* Небольшой отступ снизу для красоты */
    }

    /* 2. Скрываем блок-распорку .pfooter (он больше не нужен) */
    html body.eskimobi_responsive .pfooter,
    html body.eskimobi_responsive .pfooter2 {
        display: none !important;
        height: 0 !important;
    }

    /* 3. Сбрасываем высоту внутренних оберток */
    html body.eskimobi_responsive #footer .wrapper,
    html body.eskimobi_responsive #footer .wrapper.bottom {
        height: auto !important;
        min-height: 0 !important;
        float: none !important; /* Убираем обтекание для надежности */
    }
    
    /* 4. Центрируем логотип в самом низу */
    html body.eskimobi_responsive #footer .flogo {
        margin: 10px auto 0 !important;
        float: none !important;
        display: block !important;
        position: static !important; /* Возвращаем в нормальный поток */
    }
}

/* ================================================================= */
/* === УДАЛЕНИЕ ПОСЛЕДНИХ 20PX ПУСТОТЫ ВНИЗУ === */
/* ================================================================= */

@media (max-width: 1023px) {
    /* 1. Убираем отступ, который я добавлял ранее */
    html body.eskimobi_responsive #footer {
        padding-bottom: 0 !important;
    }

    /* 2. Гарантируем, что у логотипа нет отступа снизу */
    html body.eskimobi_responsive #footer .flogo {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        
        /* Превращаем картинку в блок, чтобы исчез "строчный" отступ (3-5px) */
        display: block !important;
        vertical-align: bottom !important;
    }
    
    /* 3. На всякий случай обнуляем отступы у обертки */
    html body.eskimobi_responsive #footer .wrapper.bottom {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ================================================================= */
/* === ОТСТУП МЕЖДУ КОНТЕНТОМ И ФУТЕРОМ === */
/* ================================================================= */

@media (max-width: 1023px) {
    html body.eskimobi_responsive #footer {
        /* Делаем отступ сверху 30px, чтобы отделить кнопку от серой линии */
        margin-top: 10px !important; 
    }
}


/* 1. Контейнер */
    .breadcramps {
        width: 100% !important;
        overflow: hidden !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
    }

    /* 2. Список (Скролл) */
    .breadcramps ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        
        width: 100% !important;
        
        /* ДОБАВИЛИ ОТСТУП СВЕРХУ (padding-top: 3px), чтобы верхушки не резались */
        padding: 3px 15px 8px 15px !important; 
        
        margin: 0 !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .breadcramps ul::-webkit-scrollbar { display: none; }

    /* 3. Элементы (Буквы) */
    .breadcramps li {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        
        font-size: 13px !important;
        
        /* ИСПРАВЛЕНИЕ: Было 1, стало 1.3. Это даст высоту строки, чтобы буквы влезли целиком */
        line-height: 1.3 !important; 
    }

    /* Ссылки */
    .breadcramps li a {
        white-space: nowrap !important;
        display: inline-block !important;
        color: #333;
        text-decoration: none;
        
        /* Дополнительное сглаживание для жирного текста */
        -webkit-font-smoothing: antialiased !important; 
    }
    
    /* Последний пункт (Жирный) */
    .breadcramps li:last-child a {
        font-weight: 600 !important; /* Используем 700 вместо bold для четкости */
        color: #000;
        padding-right: 15px;
    }

/* Сетки каталога (унификация с главной) */
.catalog-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px; /* Компенсация отступов */
}
.catalog-grid .cat-item {
    width: 33.333%; /* 3 товара в ряд на ПК */
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Стили для SEO блока внизу */
.seo-text-bottom {
    line-height: 1.6;
    color: #333;
}
.seo-text-bottom h1, .seo-text-bottom h2 {
    font-size: 20px;
    margin-bottom: 15px;
}
.dop-links .name {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}
.dop-links a {
    display: inline-block;
    padding: 3px 8px;
    background: #f5f5f5;
    border-radius: 4px;
    margin: 0 5px 5px 0;
    color: #333;
    text-decoration: none;
    font-size: 13px;
}
.dop-links a:hover {
    background: #e44000;
    color: #fff;
}

/* Мобильная адаптация */
@media (max-width: 1023px) {
    .catalog-grid .cat-item {
        width: 50%; /* 2 товара в ряд на планшете/мобильном */
    }
    .mobile-hard-spacer {
        height: 10px; /* Отступ от фильтра */
    }
}
@media (max-width: 480px) {
    .catalog-grid .cat-item {
        width: 100%; /* 1 товар в ряд на узких экранах, если хотите крупные карточки */
        /* Или оставьте 50%, если хотите плитку */
    }
}

/* --- ХЛЕБНЫЕ КРОШКИ: Очистка (Удаление слэшей) --- */

.breadcramps ul li:after {
    content: "" !important;
    padding: 0 !important;
}

.breadcramps ul li a:after {
    content: "" !important;
}

/* --- ФИНАЛЬНОЕ УДАЛЕНИЕ ЛИНИЙ В КАТАЛОГЕ --- */

/* 1. Убираем ВЕРХНЮЮ линию (перебиваем строки 393-394 в style.css) */
#catalog-block h1,
#catalog-block .heading,
.catalog-name {
    border: none !important;
    border-bottom: none !important;
}

/* Убираем скрытую линию, которая делается через :before */
#catalog-block h1:before,
#catalog-block .heading:before,
.catalog-name:before {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* 2. Убираем НИЖНЮЮ линию (перебиваем строку 672 в style.css - пагинация) */
.paging_block {
    border-top: none !important;
    margin-top: 0 !important; /* Убираем лишний отступ, если нужно */
}

/* 3. Убираем линию у SEO-текста снизу (если осталась) */
.seo-text-bottom {
    border: none !important;
    border-top: none !important;
}

/* --- НОВАЯ СОВРЕМЕННАЯ ПАГИНАЦИЯ (ОКРУГЛАЯ) --- */

/* 1. Настраиваем контейнер: выстраиваем всё в центр в один ряд */
.paging_block {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    min-height: 60px !important;
    border: none !important;
    margin-top: 20px !important;
    padding: 0 !important;
    background: none !important;
    gap: 8px; /* Расстояние между кнопками */
}

/* 2. Сбрасываем старые стили для списка */
.paging_block ul {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
}

/* 3. Оформляем ВСЕ кнопки (цифры и стрелки) в едином стиле */
.paging_block li, 
.paging_block .prev, 
.paging_block .next {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 44px !important;  /* Размер круга */
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: static !important; /* Убираем "отлет" вправо */
    background: #f5f5f5 !important; /* Спокойный серый фон */
    border-radius: 50% !important; /* Делаем круг */
    text-indent: 0 !important; /* Показываем скрытый текст (если был) */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* 4. Стили для ссылок внутри кнопок */
.paging_block li a,
.paging_block .prev a, 
.paging_block .next a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    color: #333 !important; /* Темный текст */
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    background: none !important; /* Убираем старые фоны */
    border: none !important;
}

/* Убираем старые псевдо-элементы (картинки стрелок из спрайтов) */
.paging_block .prev a:before, 
.paging_block .next a:before {
    display: none !important;
}

/* 5. Активная страница (Текущая) */
.paging_block li.active {
    background: #e44000 !important; /* Ваш фирменный оранжевый */
    color: #fff !important;
    font-weight: bold !important;
    padding: 0 !important; /* Сброс старых отступов */
}
.paging_block li.active a {
    color: #fff !important;
}

/* 6. Ховер-эффект (при наведении) */
.paging_block li:hover:not(.active),
.paging_block .prev:hover,
.paging_block .next:hover {
    background: #e0e0e0 !important;
    transform: translateY(-2px); /* Легкая анимация всплытия */
}

/* 7. Рисуем новые современные стрелочки через CSS */
.paging_block .next a {
    font-size: 0 !important; /* Прячем старый текст/отступы */
}
.paging_block .prev a {
    font-size: 0 !important;
}

/* Стрелка ВПРАВО (Next) */
.paging_block .next a::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    transform: rotate(45deg);
    margin-right: 4px; /* Визуальная компенсация */
}

/* Стрелка ВЛЕВО (Prev) - если она появится */
.paging_block .prev a::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #333;
    border-left: 2px solid #333;
    transform: rotate(-45deg);
    margin-left: 4px;
}

/* --- КНОПКА "ВСЕ ТОВАРЫ" (ОВАЛ В ОДНУ СТРОКУ) --- */

.paging_block .all {
    width: auto !important; /* Разрешаем блоку растягиваться */
    margin-left: 15px !important;
}

.paging_block .all a {
    display: inline-flex !important; /* Используем flex для центрирования */
    align-items: center !important;
    justify-content: center !important;
    
    width: auto !important; /* Автоматическая ширина */
    min-width: 120px !important; /* Минимальная ширина, чтобы было красиво */
    height: 44px !important; /* Высота как у круглых кнопок */
    
    padding: 0 25px !important; /* Отступы по бокам */
    border-radius: 22px !important; /* Идеальный овал (половина высоты) */
    
    white-space: nowrap !important; /* ЗАПРЕТ ПЕРЕНОСА СТРОК */
    
    border: 1px solid #dcdcdc !important;
    background: #fff !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.paging_block .all a:hover {
    border-color: #e44000 !important;
    color: #e44000 !important;
    background: #fff !important;
}

/* --- НОВЫЙ SEO БЛОК (С ГРАДИЕНТОМ И ТЭГАМИ) --- */

.seo-wrapper-container {
    margin-top: 40px;
    margin-bottom: 20px;
    border-top: 1px solid #eee; /* Тонкая линия отсечки от товаров */
    padding-top: 30px;
    position: relative;
}

/* Обертка контента с ограничением высоты */
.seo-content-wrap {
    max-height: 180px; /* Высота в свернутом виде (примерно 5-6 строк) */
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s ease-in-out; /* Плавное раскрытие */
}

/* Класс для раскрытого состояния */
.seo-content-wrap.expanded {
    max-height: 5000px; /* Достаточно много, чтобы показать всё */
}

/* Градиент (затухание текста) */
.seo-content-wrap::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
    transition: opacity 0.3s;
}

.seo-content-wrap.expanded::after {
    opacity: 0; /* Убираем градиент когда раскрыто */
    pointer-events: none;
}

/* Кнопка "Читать далее" */
.seo-toggler-wrap {
    text-align: center;
    margin-top: -20px; /* Наезжаем на градиент */
    position: relative;
    z-index: 5;
}

.seo-btn {
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 20px;
    padding: 8px 25px;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 -5px 15px rgba(255,255,255,0.8); /* Белая тень сверху */
}

.seo-btn:hover {
    border-color: #e44000;
    color: #e44000;
}

.seo-btn.opened span {
    content: "Свернуть";
}
.seo-btn.opened svg {
    transform: rotate(180deg);
}

/* --- ОФОРМЛЕНИЕ ССЫЛОК (ТЭГИ) --- */

/* Группа тегов */
.seo-tags-group {
    margin-top: 20px;
}
.tag-title {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: bold;
}

/* Сами теги */
.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.seo-tag {
    display: inline-block;
    padding: 4px 12px;
    background: #f4f4f4;
    border-radius: 4px;
    color: #555 !important;
    font-size: 12px;
    text-decoration: none !important;
    transition: background 0.2s;
}
.seo-tag:hover {
    background: #e4e4e4;
    color: #000 !important;
}

/* --- СЕТКА КАТЕГОРИЙ (Вместо таблиц) --- */
.seo-grid-links {
    margin-top: 30px;
}
.seo-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Адаптивная сетка */
    gap: 20px;
}
.seo-link-column ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.seo-link-column li {
    padding-left: 0 !important;
    margin-bottom: 5px !important;
}
.seo-link-column li::before {
    display: none !important; /* Убираем красные полоски */
}
.seo-link-column .col-title {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 14px;
    color: #333;
}
.seo-link-column a {
    color: #666 !important;
    font-size: 13px;
}
.seo-link-column a:hover {
    color: #e44000 !important;
}

/* === ФИНАЛЬНАЯ ПАГИНАЦИЯ: ЧИСТКА ЛИНИЙ И ОТСТУПОВ === */
@media (max-width: 1023px) {

    /* 1. ГЛОБАЛЬНАЯ ЗАЧИСТКА (Убиваем все лишние линии вокруг) */
    html body.eskimobi_responsive .bottom_paging,       /* Родитель */
    html body.eskimobi_responsive .seo-wrapper-container, /* Блок снизу */
    html body.eskimobi_responsive .seo-text-bottom,     /* Текст снизу */
    html body.eskimobi_responsive .text-block {
        border: none !important;        /* Убираем границы */
        background: none !important;
        margin-top: 0 !important;       /* Убираем отступы сверху у текста */
        padding-top: 0 !important;
        box-shadow: none !important;
    }

    /* 2. НАСТРОЙКА САМОЙ ПАГИНАЦИИ */
    html body.eskimobi_responsive .bottom_paging .paging_block {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
		
        
        width: 100% !important;
        height: auto !important;
        
        /* Z-INDEX (Чтобы кнопки нажимались и были сверху) */
        position: relative !important;
        z-index: 9999 !important; 
        
        /* --- [НАСТРОЙКИ ОТСТУПОВ И ЛИНИИ] --- */
        
        /* Отступ СВЕРХУ (от товаров) */
        margin-top: 15px !important; 

        /* Отступ ВНУТРИ (от кнопок до линии) -> БЫЛО 20px, СТАЛО 10px */
        padding-bottom: 10px !important; 
        
        /* Отступ СНИЗУ (от линии до текста) -> БЫЛО 20px, СТАЛО 10px */
        margin-bottom: -50px !important;  

        /* ЕДИНСТВЕННАЯ ЛИНИЯ (Снизу блока пагинации) */
        border: none !important; 
        border-bottom: none !important;
    }

    /* 3. СЕТКА КНОПОК (Чтобы не наезжали друг на друга) */
    html body.eskimobi_responsive .bottom_paging .paging_block ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        
        /* Зазоры между кнопками (и по вертикали, и по горизонтали) */
        gap: 8px !important; 
    }

    /* 4. СТИЛЬ КНОПОК */
    html body.eskimobi_responsive .bottom_paging .paging_block li,
    html body.eskimobi_responsive .bottom_paging .paging_block .prev,
    html body.eskimobi_responsive .bottom_paging .paging_block .next {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        margin: 0 !important; /* Margin не нужен, работает gap */
        
        position: relative !important;
        z-index: 10000 !important;
        background: #f4f4f4 !important;
        border-radius: 50% !important;
    }

    /* Ссылки */
    html body.eskimobi_responsive .bottom_paging .paging_block a {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        font-size: 14px !important;
        color: #333 !important;
        text-decoration: none !important;
        background: none !important;
    }

    /* Активная кнопка */
    html body.eskimobi_responsive .bottom_paging .paging_block li.active {
        background: #e44000 !important;
    }
    html body.eskimobi_responsive .bottom_paging .paging_block li.active a {
        color: #fff !important;
    }

    /* Стрелки */
    html body.eskimobi_responsive .paging_block .prev a, 
    html body.eskimobi_responsive .paging_block .next a { font-size: 0 !important; }

    html body.eskimobi_responsive .paging_block .prev a::after {
        content: ""; display: block; width: 6px; height: 6px;
        border-top: 2px solid #333; border-left: 2px solid #333;
        transform: rotate(-45deg); margin-left: 3px;
    }
    html body.eskimobi_responsive .paging_block .next a::after {
        content: ""; display: block; width: 6px; height: 6px;
        border-top: 2px solid #333; border-right: 2px solid #333;
        transform: rotate(45deg); margin-right: 3px;
    }
    
    /* Кнопка "ВСЕ ТОВАРЫ" */
    html body.eskimobi_responsive .paging_block .all {
        width: auto !important;
        flex: 0 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 !important;
        background: none !important;
        border: none !important;
        position: relative !important;
        z-index: 10000 !important;
        order: 999 !important;
    }
    
    html body.eskimobi_responsive .paging_block .all a {
        width: auto !important;
        padding: 0 15px !important;
        height: 34px !important;
        border: 1px solid #ccc !important;
        border-radius: 17px !important;
        background: #fff !important;
        font-size: 12px !important;
        text-transform: uppercase !important;
        font-weight: bold !important;
        white-space: nowrap !important;
    }
}

/* === ХЛЕБНЫЕ КРОШКИ: ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ (ДЛЯ ВАШЕГО ШАБЛОНА) === */
@media (max-width: 1023px) {
    
    /* 1. Настраиваем блок-контейнер .breadcramps (именно так он у вас называется) */
    .breadcramps {
        width: 100% !important;
        overflow: hidden !important; /* Чтобы не растягивал экран */
        margin-bottom: 10px !important;
        padding: 0 !important;
    }

    /* 2. Настраиваем список */
    .breadcramps ul {
        display: flex !important;
        flex-wrap: nowrap !important; /* ЗАПРЕЩАЕМ ПЕРЕНОС */
        
        overflow-x: auto !important;  /* ВКЛЮЧАЕМ СКРОЛЛ */
        -webkit-overflow-scrolling: touch; /* Плавность для iPhone */
        
        width: 100% !important;
        padding: 0 15px 5px 15px !important; /* Отступы по бокам и снизу для скролла */
        margin: 0 !important;
        
        /* Скрываем полосу прокрутки */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE */
    }

    /* Скрываем скроллбар для Chrome/Safari */
    .breadcramps ul::-webkit-scrollbar {
        display: none;
    }

    /* 3. Настраиваем элементы списка */
    .breadcramps li {
        flex: 0 0 auto !important; /* Запрещаем сжиматься */
        white-space: nowrap !important; /* Текст в одну строку */
        display: flex !important;
        align-items: center !important;
        
        font-size: 13px !important; /* Оптимальный размер */
        line-height: 1 !important;
    }

    /* 4. Ссылки и разделители */
    .breadcramps li a {
        white-space: nowrap !important;
        display: inline-block !important;
        color: #333; /* Цвет текста, можно поменять */
        text-decoration: none;
    }
    
    /* Если нужно выделить последнюю категорию жирным */
    .breadcramps li:last-child a {
        font-weight: bold;
        color: #000;
        padding-right: 15px; /* Отступ справа, чтобы текст не прилипал к краю экрана */
    }
}

/* === НАСТРОЙКА ОТСТУПОВ: ШАПКА -> КРОШКИ -> ЗАГОЛОВОК -> ТОВАРЫ === */
@media (max-width: 1023px) {

    /* [3] ЗАГОЛОВОК КАТЕГОРИИ (Название раздела) */
    /* Обычно это тег H1. Настраиваем отступы вокруг него */
    h1, .page-title {
        margin-top: 0 !important;       /* Убираем лишнее сверху */
        
        /* [4] ОТСТУП ОТ ЗАГОЛОВКА ВНИЗ (К ТОВАРАМ) */
        margin-bottom: 15px !important; 
        
        line-height: 1.2 !important;    /* Чтобы строки не слипались */
    }

    /* УБИРАЕМ "ПАРАЗИТНЫЕ" ОТСТУПЫ */
    /* В вашем коде есть блок .mobile-hard-spacer, он может давать лишнюю дыру */
    .mobile-hard-spacer {
        display: none !important;     /* Скрываем его, чтобы регулировать самим */
        height: 0 !important;
        margin: 0 !important;
    }
    
    /* Блок с товарами (на всякий случай обнуляем ему верх) */
    #catalog-full-width, 
    .catalog.catalog-grid {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* === ВЫРАВНИВАНИЕ ТОВАРОВ: РЕЗЕРВ МЕСТА ПОД "ХИТ/АКЦИЯ" === */
@media (max-width: 1023px) {
    
    /* Обращаемся к блоку, где лежат иконки */
    html body.eskimobi_responsive .cat-item .left-icons {
        /* 1. Самое важное: резервируем высоту */
        min-height: 20px !important; /* Высота строки текста "АКЦИЯ" */
        
        /* 2. Убеждаемся, что блок участвует в потоке (толкает название вниз) */
        position: static !important; /* Отменяем absolute, если он был */
        display: flex !important;
        align-items: center !important;
        
        /* 3. Отступы */
        margin-top: 5px !important;
        margin-bottom: 5px !important; /* Отступ до Названия товара */
        padding: 0 !important;
    }

    /* На всякий случай уточняем стиль самих надписей, чтобы не скакали */
    html body.eskimobi_responsive .cat-item .left-icons .action,
    html body.eskimobi_responsive .cat-item .left-icons .hit {
        font-size: 12px !important;
        line-height: 1.2 !important;
        display: inline-block !important;
        margin-right: 5px !important;
    }
}


/* === ВАРИАНТ 3: ЭКО-СТИЛЬ (БЕЖЕВЫЙ) === */
html body.eskimobi_responsive .catalog.catalog-grid .add_to_cart,
.catalog.catalog-grid .add_to_cart {
    background: #e0d5c7 !important; /* Ваш бежевый цвет */
    color: #333333 !important;      /* Текст должен быть ТЕМНЫМ! */
    border: none !important;
    border-radius: 4px !important;
    
    /* Плавность */
    transition: all 0.2s ease !important;
}

/* При наведении делаем её чуть темнее, чтобы был отклик */
html body.eskimobi_responsive .catalog.catalog-grid .add_to_cart:hover,
.catalog.catalog-grid .add_to_cart:hover {
    background: #cfc3b3 !important; /* Чуть темнее при наведении */
    color: #000000 !important;
}

/* Текст внутри и иконки тоже красим в темный */
html body.eskimobi_responsive .catalog.catalog-grid .add_to_cart span,
.catalog.catalog-grid .add_to_cart span,
html body.eskimobi_responsive .catalog.catalog-grid .add_to_cart::before,
.catalog.catalog-grid .add_to_cart::before {
    color: #333333 !important;
}

/* === НОВАЯ ИКОНКА (КОНТУРНАЯ) === */
html body.eskimobi_responsive .catalog.catalog-grid .add_to_cart::before,
.catalog.catalog-grid .add_to_cart::before {
    content: "" !important;
    display: block !important;
    width: 22px !important; /* Чуть крупнее, чтобы тонкие линии были видны */
    height: 22px !important;
    
    /* SVG: Контурная корзина (Stroke) цвета #e44000 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e44000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E") !important;
    
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
	
	/* Настройки для иконки */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* ======================================================= */
/* === ФИНАЛЬНЫЙ ФИКС КНОПОК (ТЕЛЕГРАМ + ИИ) === */
/* ======================================================= */

/* 1. КОНТЕЙНЕР (Держит кнопки в правом нижнем углу) */
#aiWidget, .ai-widget-container {
    position: fixed !important;
    bottom: 25px !important;       /* Отступ снизу */
    right: 20px !important;        /* Отступ справа */
    z-index: 2147483647 !important; /* Поверх всего */
    
    /* Выстраиваем в столбик */
    display: flex !important;
    flex-direction: column !important;
    
    /* ВАЖНО: Прижимаем вправо (чтобы не растягивались) */
    align-items: flex-end !important; 
    
    gap: 12px !important; /* Расстояние между кнопками */
    
    /* Сброс лишнего */
    background: none !important;
    border: none !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    transform: none !important;
}

/* 2. ОБЩИЙ СТИЛЬ ДЛЯ ОБЕИХ КНОПОК */
/* Используем классы из вашего HTML, чтобы точно попасть в цель */
#aiWidget .tg-shop-btn, 
#aiWidget .ai-btn-manual {
    /* ЖЕСТКИЕ РАЗМЕРЫ (Делаем круг) */
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important; /* Запрет сжатия */
    max-width: 60px !important; /* Запрет растягивания */
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    cursor: pointer !important;
    
    /* Сброс инлайн-стилей HTML */
    margin: 0 !important;
    position: relative !important; /* Чтобы тултип позиционировался от кнопки */
    text-decoration: none !important;
}

/* 3. НАСТРОЙКА КНОПКИ ТЕЛЕГРАМ */
#aiWidget .tg-shop-btn {
    background-color: #fff !important; /* Белый фон */
}

/* Исправляем SVG внутри Телеграма (чтобы был по центру) */
#aiWidget .tg-shop-btn svg {
    width: 60px !important;  /* Размер иконки */
    height: 60px !important;
    display: block !important;
    margin: 0 !important;
    fill: #229ED9 !important; /* Цвет иконки Телеграм (голубой) */
}

/* 4. НАСТРОЙКА КНОПКИ ИИ */
#aiWidget .ai-btn-manual {
    background-color: transparent !important; /* Прозрачный, если картинка круглая */
    border: none !important;
    padding: 0 !important;
}

#aiWidget .ai-btn-manual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

/* 5. ТУЛТИП (Всплывашка "Магазин в Telegram") */
.tg-tooltip {
    position: absolute !important;
    right: 70px !important; /* Слева от кнопки */
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    background: rgba(0,0,0,0.8) !important;
    color: #fff !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    pointer-events: none;
}

/* Показываем тултип при наведении */
#aiWidget .tg-shop-btn:hover .tg-tooltip {
    opacity: 1;
    visibility: visible;
}

/* === СКРЫВАЕМ ТЕЛЕГРАМ НА МОБИЛЬНЫХ === */
@media (max-width: 1023px) {
    #aiWidget .tg-shop-btn {
        display: none !important;
    }
}

/* Принудительно поднимаем окно чата на самый верхний слой */
#aiChatWindow {
    z-index: 2147483647 !important; /* Максимально возможное значение */
    position: fixed !important; /* Гарантируем фиксацию */
}

/* Опускаем кнопку виджета ниже, на случай если у нее тоже высокий z-index */
#aiWidget {
    z-index: 9999 !important; 
}

/* ================================================================= */
/* === ИСПРАВЛЕНИЕ КОРЗИНЫ: ФОТО, ШРИФТЫ, СКРОЛЛ (FINAL CLEAN) === */
/* ================================================================= */

/* 1. УБИРАЕМ СКРОЛЛ И ЛИШНИЕ ОТСТУПЫ У СПИСКА */
html body #new-light-header .hint ul {
    width: 100% !important;
    height: auto !important;
    max-height: 400px !important; /* Ограничение высоты только по вертикали */
    overflow-y: auto !important;  /* Вертикальный скролл разрешен */
    overflow-x: hidden !important; /* ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ УБРАН */
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 2. СТРОКА ТОВАРА (МИНИМАЛЬНЫЕ ОТСТУПЫ) */
html body #new-light-header .hint ul li {
    display: flex !important;
    align-items: center !important; /* Центровка по вертикали */
    justify-content: flex-start !important;
    
    width: 100% !important;
    min-height: 0 !important; /* Убираем лишнюю высоту */
    
    /* Минимальные отступы сверху/снизу (по 8px) */
    padding: 8px 10px 8px 0 !important; 
    margin: 0 !important;
    
    border-bottom: 1px solid #f0f0f0 !important; /* Тонкая линия */
    box-sizing: border-box !important;
}

/* 3. КОНТЕЙНЕР (Ссылка <a>, оборачивающая картинку) */
#header .bascet .hint ul li > a:not(.closex),
#new-light-header .hint ul li > a:not(.closex) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    width: 65px !important;
    height: 65px !important;
    min-width: 65px !important;
    max-width: 65px !important;
    
    margin: 0 15px 0 0 !important; /* Вертикальные отступы здесь равны 0 */
    padding: 0 !important;
    border: none !important;
}

/* 4. САМА КАРТИНКА (Класс .foto висит прямо на теге img!) */
#header .bascet .hint ul li img.foto,
#new-light-header .hint ul li img.foto {
    /* Заставляем тег занять весь родительский квадрат 65x65 */
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    
    /* Идеально вписываем фото без искажений */
    object-fit: contain !important;
    
    /* Декор (Фон) */
    background: #ffffff !important;
    border: none !important; /* Убрали серую рамку */
    border-radius: 4px !important;
    padding: 0 !important; /* Убрали внутренние отступы */
    
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* 4. ТЕКСТ (НАЗВАНИЕ) - АККУРАТНЫЙ */
html body #new-light-header .hint ul li .text {
    flex: 1 !important;
    width: auto !important;
    padding-right: 25px !important; /* Место под крестик справа */
}

html body #new-light-header .hint ul li .text a {
    font-size: 13px !important;
    font-weight: 600 !important; /* Чуть жирнее обычного, но не bold */
    color: #333 !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
    display: block !important;
    text-decoration: none !important;
}

/* 5. КОЛИЧЕСТВО И ЦЕНА (УБИРАЕМ ЖИРНОСТЬ И РАЗМЕР) */

/* Блок с ценой и кол-вом в одну строку */
html body #new-light-header .hint ul li .text div,
html body #new-light-header .hint ul li .price-block {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Количество "1 шт" (Обычный шрифт) */
html body #new-light-header .hint ul li .kol,
html body #new-light-header .hint ul li .count {
    font-size: 13px !important;    /* Аккуратный размер */
    font-weight: 400 !important;   /* НЕ ЖИРНЫЙ */
    color: #000 !important;        /* Черный цвет */
    margin: 0 5px 0 0 !important;  /* Отступ справа до цены */
    text-transform: none !important;
}

/* Цена (Обычный шрифт, черный) */
html body #new-light-header .hint ul li .price,
html body #new-light-header .hint ul li .red {
    font-size: 13px !important;    /* Тот же размер, что у кол-ва */
    font-weight: 600 !important;   /* Чуть-чуть выделить, но не 800 */
    color: #000 !important;        /* Черный */
    margin: 0 !important;
}

/* 6. КНОПКА УДАЛЕНИЯ (КРЕСТИК) */
/* Она должна быть абсолютной, чтобы не занимать место и не растягивать блок */
html body #new-light-header .hint ul li .closex,
.bascet li .closex {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    font-size: 20px !important;
    
    color: #ccc !important;
    background: none !important;
    text-align: center !important;
    cursor: pointer !important;
    z-index: 10;
}
html body #new-light-header .hint ul li .closex:hover {
    color: #e44000 !important;
}

/* ========================================================= */
/* НОВЫЙ КОМПАКТНЫЙ ДИЗАЙН КОРЗИНЫ (В ОДНУ СТРОКУ)           */
/* ========================================================= */

.cart-item-compact {
    padding: 20px 0;
    position: relative;
    border-bottom: 1px solid #d7d7d7;
}

/* Кнопка удаления товара */
.cart-item-compact .closex {
    position: absolute;
    right: 0;
    top: 15px;
    z-index: 10;
    font-size: 30px;
    color: #d7d7d7;
    text-decoration: none;
}
.cart-item-compact .closex:hover { color: #e44000; }

/* ВЕРХНИЙ ЭТАЖ: Фото, Имя, Цена, Кол-во, Сумма */
.cart-main-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%; /* Оставляем место для крестика */
    gap: 15px;
}

.cart-main-info .cart-foto { width: 15%; text-align: center; }
.cart-main-info .cart-foto img { max-width: 100%; height: auto; border-radius: 6px; }

.cart-main-info .cart-name { width: 40%; font-size: 16px; font-weight: 600; text-transform: uppercase; line-height: 1.2;}
.cart-main-info .cart-name a { color: #000; text-decoration: none; }
.cart-main-info .cart-name a:hover { text-decoration: underline; }
.cart-main-info .cart-name .artikul { font-size: 12px; text-transform: none; color: #777; margin-top: 5px; font-weight: normal; }

.cart-main-info .label { font-size: 11px; text-transform: uppercase; color: #999; display: block; margin-bottom: 3px;}

.cart-main-info .cart-price { width: 15%; text-align: center; }
.cart-main-info .cart-price .red { font-size: 24px; color: #e44000; }

.cart-main-info .cart-count { width: 15%; text-align: center; }
.cart-main-info .cart-count .count { display: flex; justify-content: center; align-items: center; }
.cart-main-info .cart-count .count .but { background: #e44000; color: #fff; width: 22px; height: 22px; text-align: center; line-height: 20px; font-size: 18px; text-decoration: none; display: inline-block; }
.cart-main-info .cart-count .count .num { font-size: 24px; padding: 0 10px; min-width: 30px; }

.cart-main-info .cart-total { width: 15%; text-align: center; }
.cart-main-info .cart-total .red { font-size: 24px; color: #e44000; font-weight: bold;}


/* НИЖНИЙ ЭТАЖ: Ткани и Опции */
.cart-options-info {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed #e8e8e8;
    width: 95%;
}

/* Блок Тканей */
.cart-options-info .cart-cloths { width: 45%; }
.cart-options-info .cart-cloths .radios { padding: 0; margin: 0; list-style: none; }
.cart-options-info .cart-cloths .radios li { display: flex; align-items: center; margin-bottom: 10px; border-bottom: 1px solid #f2f2f2; padding-bottom: 10px;}
.cart-options-info .cart-cloths .radios li:last-child { border-bottom: none; }
.cart-options-info .cart-cloths img { max-width: 80px; height: auto; border-radius: 4px; margin-right: 15px; }
.cart-options-info .cart-cloths .txt { font-size: 13px; line-height: 1.4; color: #555; }
.cart-options-info .cart-cloths .txt .hh { font-weight: bold; color: #000; margin-bottom: 3px; }

/* Блок Опций (габариты и т.д.) */
.cart-options-info .cart-features { width: 50%; }
.cart-options-info .clothes_list { width: 100%; border-top: none; margin-top: 0; }
.cart-options-info .clothes_list dt { width: 40%; font-size: 13px; font-weight: normal; color: #666; padding: 5px 0; border-top: 1px solid #f2f2f2; }
.cart-options-info .clothes_list dd { margin-left: 42%; padding: 5px 0; border-top: 1px solid #f2f2f2;}
.cart-options-info .clothes_list dt:first-child, .cart-options-info .clothes_list dt:first-child + dd { border-top: none; }

/* Адаптивность для мобильных устройств */
@media (max-width: 900px) {
    .cart-main-info { flex-wrap: wrap; }
    .cart-main-info .cart-foto { width: 100%; text-align: center; margin-bottom: 15px; }
    .cart-main-info .cart-name { width: 100%; text-align: center; margin-bottom: 15px; }
    .cart-main-info .cart-price, 
    .cart-main-info .cart-count, 
    .cart-main-info .cart-total { width: 33%; }
    .cart-options-info { flex-direction: column; }
    .cart-options-info .cart-cloths, 
    .cart-options-info .cart-features { width: 100%; }
}

/* 1. Цены, Итого и символ рубля - темно-серые, жирность 600 */
    #bascet_block .red, 
    #bascet_block span.red, 
    #bascet_block .fprice .red, 
    #bascet_block .ftotal .red, 
    #full_price_block .price.red {
        color: #333 !important;
        font-weight: 600 !important;
    }
    #bascet_block .r {
        color: #333 !important;
        font-weight: 600 !important;
    }
    
    /* 2. Кнопки плюс и минус - светло-оранжевый фон, темно-серый крестик */
    #bascet_block .count .but {
        background: #fef5ec !important;
        color: #333 !important;
        border-radius: 4px !important;
        transition: background 0.3s ease;
    }
    #bascet_block .count .but:hover {
        background: #fde8d4 !important;
    }

/* 3. Овальная белая кнопка "Оформить заказ" с оранжевой обводкой */
    .cart-submit-btn {
        background: #fff !important;
        color: #e44000 !important;
        border: 2px solid #e44000 !important;
        border-radius: 30px !important;
        padding: 10px 30px !important; /* Уменьшили отступы сверху и снизу */
        font-weight: 600 !important;
        font-size: 15px !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        display: inline-block !important;
        
        /* Жестко сбрасываем старые размеры, чтобы кнопку не раздувало */
        height: auto !important; 
        line-height: normal !important; 
        box-sizing: border-box !important;
        
        transition: 0.3s ease !important;
    }
    .cart-submit-btn:hover {
        background: #e44000 !important;
        color: #fff !important;
    }

/* ========================================================= */
/* --- БРОНЕБОЙНЫЕ СТИЛИ ДЛЯ ЦЕН В КОРЗИНЕ (ТОЛЬКО ДЕСКТОП) --- */
/* ========================================================= */
@media (min-width: 1023px) {
    /* 1. Цены внутри карточки товара */
    body div#content div#bascet_block .item .fprice span.red, 
    body div#content div#bascet_block .item .ftotal span.red,
    body div#content div#bascet_block .item .fprice span.r, 
    body div#content div#bascet_block .item .ftotal span.r,
    body div#content div#bascet_block .item span.fullPrice {
        font-size: 24px !important;
        color: #666 !important;
        font-weight: 600 !important;
        line-height: normal !important;
    }
}


/* --- СТИЛИ ДЛЯ БЛОКА "ИТОГО" --- */

/* 1. Обертка (выравниваем вправо) */
.cc-total-wrapper {
    display: flex !important;
    width: 100% !important; 
    justify-content: flex-end !important; 
    align-items: center !important; /* Выровняли по центру вертикали */
    margin-top: 25px !important;
    padding-right: 0 !important; 
}

/* 2. Само слово "Итого:" */
.cc-itogo-text {
    font-size: 20px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    color: #333 !important;
    margin-right: 0 !important; 
}

/* 3. Блок с ценой (15% ширины, запрет переноса строк, сброс float) */
body div#content div#bascet_block .cc-total-wrapper div#full_price_block {
    width: 15% !important; /* Ширина строго как у суммы в товаре */
    text-align: center !important; 
    margin: 0 !important;
    padding: 0 !important;
    float: none !important; /* Убиваем старый float:right */
    clear: none !important;
    white-space: nowrap !important; /* Жестко запрещаем переносить "Р." вниз */
}

/* 4. Сама цифра - УБИВАЕМ СТАРЫЙ ОТСТУП 79% */
body div#content div#bascet_block div#full_price_block span.price,
body div#content div#bascet_block div#full_price_block span.red {
    margin-left: 0 !important; /* ИМЕННО ЭТО ЛОМАЛО ВЕРСТКУ */
    float: none !important;
    font-size: 32px !important;
    color: #e44000 !important; 
    font-weight: bold !important;
    line-height: normal !important;
    display: inline-block !important;
}

/* 5. Буква Р. */
body div#content div#bascet_block div#full_price_block span.r {
    font-size: 32px !important;
    color: #e44000 !important;
    font-weight: bold !important;
    line-height: normal !important;
    margin-left: 5px !important;
    display: inline-block !important;
}

/* ========================================================= */
/* --- СОВРЕМЕННЫЙ ДИЗАЙН ФОРМЫ ОФОРМЛЕНИЯ ЗАКАЗА --- */
/* ========================================================= */

#cart_form {
    clear: both !important;
    padding: 40px 0 !important;
}

/* Заголовок формы */
#cart_form .cc-form-heading {
    text-align: center !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #333 !important;
    border: none !important;
    margin-bottom: 40px !important;
    padding: 0 !important;
}
#cart_form .cc-form-heading:before { display: none !important; }

/* Сетка (Grid) - выравнивает форму по центру и делает широкой */
#cart_form .cc-form-grid {
    display: grid !important;
    grid-template-columns: 250px 1fr !important; /* Текст слева, инпут на всю правую часть */
    gap: 20px 20px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 800px !important; /* Оптимальная ширина формы */
    margin: 0 auto !important; /* Выравнивание ровно по центру страницы */
    padding: 0 !important;
}

/* Текст слева (Фамилия, Адрес) */
#cart_form .cc-form-grid dt {
    text-align: right !important;
    padding: 12px 0 0 0 !important;
    font-size: 15px !important;
    color: #333 !important;
    font-weight: normal !important;
}
#cart_form .cc-form-grid dt .req { color: #d85417; } /* Красная звездочка */

#cart_form .cc-form-grid dd {
    margin: 0 !important;
    padding: 0 !important;
}

/* Убиваем старые рамки */
#cart_form .cc-clean-control {
    border: none !important;
    background: transparent !important;
    display: block !important;
    width: 100% !important;
}
#cart_form .cc-clean-control:before, 
#cart_form .cc-clean-control:after {
    display: none !important;
}

/* Сами поля ввода (широкие, с серой рамкой) */
#cart_form .cc-input, 
#cart_form .cc-textarea {
    width: 100% !important;
    border: 1px solid #e2e2e2 !important; /* Светло-серая рамка */
    border-radius: 8px !important; /* Скругление */
    padding: 12px 15px !important;
    font-size: 15px !important;
    color: #333 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    height: auto !important;
    transition: border-color 0.3s ease !important;
}
#cart_form .cc-textarea {
    min-height: 120px !important;
    resize: vertical;
}

/* Выделение поля оранжевым при клике */
#cart_form .cc-input:focus, 
#cart_form .cc-textarea:focus {
    border-color: #d85417 !important;
    outline: none !important;
}

/* Подсказка под адресом */
#cart_form .cc-info {
    font-size: 12px !important;
    color: #888 !important;
    margin-top: 5px !important;
}

/* Кнопка */
#cart_form .cc-submit-wrapper {
    text-align: center !important;
    margin-top: 40px !important;
}
#cart_form .cc-submit-btn {
    background: #d85417 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 30px !important; /* Форма таблетки */
    padding: 16px 60px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
}
#cart_form .cc-submit-btn:hover {
    background: #bf4712 !important;
}

/* --- СТИЛИ ДЛЯ ДИНАМИЧЕСКОГО БАННЕРА В КОРЗИНЕ --- */
.cc-cart-banner {
    margin: 15px 0 25px 0 !important;
    padding: 15px 20px !important;
    background: #fef5ec !important; /* Легкий оранжевый фон, чтобы выделялось */
    border: 1px dashed #d85417 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    text-align: center !important;
}

/* Настройки для картинок внутри баннера */
.cc-cart-banner img {
    max-width: 100% !important;
    height: auto !important;
    vertical-align: middle !important;
    margin: 0 15px 0 0 !important;
    display: inline-block !important;
}

.cc-cart-banner a {
    color: #d85417 !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}
.cc-cart-banner a:hover {
    text-decoration: none !important;
}

/* ========================================================= */
/* --- СОВРЕМЕННЫЕ ПОДСКАЗКИ ДЛЯ ОПЦИЙ В КОРЗИНЕ --- */
/* ========================================================= */

/* 1. Сама иконка "i" (Делаем круглой, серой, меняет цвет при наведении) */
#bascet_block dt .tip {
    background: #fff !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    border: 1px solid #ccc !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: -2px 0 0 5px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Убиваем старую квадратную графику и пишем красивую букву i */
#bascet_block dt .tip:before { display: none !important; }
#bascet_block dt .tip::after { 
    content: "i" !important; 
    color: #999 !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-size: 12px !important;
    font-style: italic !important;
    font-weight: 600 !important;
    transition: color 0.3s ease !important;
}

/* Эффект при наведении на кружочек */
#bascet_block dt .tip:hover {
    border-color: #d85417 !important;
    background: #fff5f0 !important;
}
#bascet_block dt .tip:hover::after {
    color: #d85417 !important;
}

/* 2. Само всплывающее окно (Делаем белым, скругленным, с мягкой тенью) */
#bascet_block dt .tip .hint {
    display: block !important;
    visibility: hidden; /* Скрываем до наведения */
    opacity: 0;
    position: absolute !important;
    left: 50% !important;
    bottom: 25px !important;
    
    /* Центрируем и чуть опускаем вниз для анимации выплывания */
    transform: translateX(-50%) translateY(10px) !important;
    
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1) !important;
    
    width: max-content !important;
    max-width: 250px !important;
    text-align: left !important;
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    z-index: 100 !important;
    
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Мягкая анимация пружинки */
    pointer-events: none; /* Чтобы мышка не цеплялась за невидимый блок */
}

/* Красивый белый треугольник-хвостик, направленный вниз */
#bascet_block dt .tip .hint:before {
    content: "" !important;
    width: 10px !important;
    height: 10px !important;
    background: #fff !important;
    border-right: 1px solid #eee !important;
    border-bottom: 1px solid #eee !important;
    border-top: none !important;
    border-left: none !important;
    
    position: absolute !important;
    left: 50% !important;
    bottom: -6px !important;
    transform: translateX(-50%) rotate(45deg) !important;
}

/* 3. Анимация появления подсказки при наведении */
#bascet_block dt .tip:hover .hint {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0) !important; /* Поднимается на свое место */
}

/* ================================================================= */
/* === ЭФФЕКТ ПОЯВЛЕНИЯ ИНТЕРЬЕРНОГО ФОТО ПРИ НАВЕДЕНИИ === */
/* ================================================================= */

/* 1. Настраиваем обертку-слой (скрываем её по умолчанию) */
.catalog .cat-item .hover-interior-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999 !important; /* Гарантированно поверх карусели */
    display: block !important;
    
    background-color: #ffffff !important; /* Белый фон, чтобы перекрыть первую картинку */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important; /* Плавное появление */
}

/* 2. Настраиваем саму картинку внутри слоя */
.catalog .cat-item .hover-interior-layer img {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* 3. Проявляем весь слой при наведении мышки на карточку */
.catalog .cat-item:hover .hover-interior-layer {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ================================================================= */
/* === ИСПРАВЛЕНИЕ ТОЧЕК ПАГИНАЦИИ (ПОВЕРХ ИНТЕРЬЕРА) === */
/* ================================================================= */

/* 1. Вытягиваем точки пагинации на самый верх (выше интерьерного фото) */
.catalog .cat-item .foto .jcarousel-pagination {
    z-index: 1010 !important;
    position: absolute !important; /* Гарантируем, что z-index сработает */
}

/* 2. УМНАЯ ЛОГИКА: Если мышка наведена на точки, прячем интерьерное фото, 
   чтобы покупатель видел, как листается основная карусель */
.catalog .cat-item .foto .jcarousel-pagination:hover ~ .hover-interior-layer {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ================================================================= */
/* === ВЕРХНИЙ БЛОК: КРОШКИ, НАЗВАНИЕ, АРТИКУЛ И ЦЕНА ПО ФОТО === */
/* ================================================================= */
@media (max-width: 1023px) {

    /* 1. БАЗА: Делаем хлебные крошки нейтральными (они больше никого не толкают) */
    html body.eskimobi_responsive .breadcramps {
        margin-bottom: 0px !important; 
    }

    /* --------------------------------------------------- */
    /* ПУЛЬТ №1: ТОЛЬКО ДЛЯ СТРАНИЦЫ ТОВАРА                */
    /* (Отступ от крошек вниз до названия конкретного дивана) */
    /* --------------------------------------------------- */
    html body.eskimobi_responsive .tovar_block .product_name {
        /* Меняйте цифру здесь. Если нужно поднять выше, используйте отрицательные значения (например, -5px или -10px) */
        margin-top: -10px !important; 
    }

    /* --------------------------------------------------- */
    /* ПУЛЬТ №2: ТОЛЬКО ДЛЯ СТРАНИЦЫ КАТАЛОГА              */
    /* (Отступ от крошек вниз до заголовка категории)      */
    /* --------------------------------------------------- */
    html body.eskimobi_responsive #catalog-block .catalog-header-row,
    html body.eskimobi_responsive h1.page-title,
    html body.eskimobi_responsive .catalog-name {
        /* Меняйте цифру здесь независимо от страницы товара */
        margin-top: 5px !important; 
    }

    /* --- ГЛАВНЫЙ КОНТЕЙНЕР (Умная сетка) --- */
    html body.eskimobi_responsive .tovar_block .product_name {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        /* Убрали space-between, чтобы не рвало экран */
        width: 100% !important;
        max-width: 100vw !important; /* Защита ширины */
        padding: 0 10px !important; /* Небольшой воздух по краям, чтобы не липло к рамке телефона */
        
        /* --- [2] ОТСТУП ОТ БЛОКА (АРТИКУЛ/ЦЕНА) ДО ГЛАВНОГО ФОТО --- */
        margin-bottom: -10px !important; /* <--- НАСТРАИВАЙ ЭТОТ ОТСТУП ЗДЕСЬ */
        box-sizing: border-box !important;
    }

    /* Прячем перенос строки из HTML */
    html body.eskimobi_responsive .tovar_block .product_name br {
        display: none !important;
    }

    /* --- НАЗВАНИЕ ТОВАРА (2 строчки + троеточие) --- */
    html body.eskimobi_responsive .tovar_block .product_name h1 {
        width: 100% !important; 
        
        /* --- [3] ОТСТУП ОТ НАЗВАНИЯ ДО АРТИКУЛА ВНИЗ --- */
        margin: 0 0 8px 0 !important; /* <--- НАСТРАИВАЙ ЭТОТ ОТСТУП ЗДЕСЬ (сейчас 8px) */
        padding: 0 !important;
        
        /* Аккуратный размер шрифта вместо конского */
        font-size: 16px !important; 
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        
        /* Идеальная обрезка текста: максимум 2 строки, остальное в "..." */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* --- АРТИКУЛ (Спокойно стоит слева) --- */
    html body.eskimobi_responsive .tovar_block .product_name .artikul {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        color: #888888 !important; /* Спокойный серый цвет */
        font-weight: 400 !important;
        text-transform: none !important;
        text-align: left !important;
    }

/* --- ЦЕНА ПО ФОТО (Безопасно прижата справа с отступом) --- */
    html body.eskimobi_responsive .tovar_block .product_name .note {
        /* === МАГИЯ ФЛЕКСА: толкает вправо, но оставляет 5px от края === */
        margin: 0 20px 0 auto !important; /* <--- ИЗМЕНЕНО: добавлено 5px справа */
        
        padding: 0 !important;
        font-size: 13px !important;
        color: #cc3300 !important;
        font-weight: 600 !important;
        text-transform: none !important;
        font-style: italic !important; 
        text-align: right !important;
    }
}

@media (max-width: 1023px) {
    html body.eskimobi_responsive .tovar_block .charachteristics {
        width: 410px !important;      /* Жестко фиксируем родную ширину, чтобы внутри ничего не поплыло */
        float: none !important;       /* Убиваем прилипание к краям */
        
        /* === ТОЧЕЧНАЯ КОРРЕКЦИЯ === */
        margin-left: 0px !important; /* <--- Джойстик. Меняй эту цифру (20px, 35px, 40px), пока блок не встанет идеально по центру твоего экрана */
    }
}

/* ================================================================= */
/* === ТОЧЕЧНОЕ УМЕНЬШЕНИЕ БЛОКА КОЛИЧЕСТВА (+ / -) НА МОБИЛЬНОМ === */
/* ================================================================= */
@media (max-width: 1023px) {

    /* 2. Кнопки Плюс и Минус */
    html body.eskimobi_responsive .tovar_block .tcount .count .but {
        width: 30px !important;         /* Делаем их узкими */
        height: 30px !important;
        line-height: 28px !important;   /* Центровка крестика по вертикали */
        font-size: 18px !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Сохраняем "родную" логику выравнивания шаблона, чтобы не сломать порядок */
    html body.eskimobi_responsive .tovar_block .tcount .count .minus {
        float: left !important;
    }
    html body.eskimobi_responsive .tovar_block .tcount .count .plus {
        float: right !important;
    }

    /* 3. Цифра в центре */
    html body.eskimobi_responsive .tovar_block .tcount .count .num {
        width: 34px !important;         /* Оставшееся место в центре */
        height: 30px !important;
        line-height: 30px !important;
        font-size: 15px !important;     /* Уменьшаем огромный шрифт */
        margin: 0 auto !important;      /* Ровно посередине между кнопками */
        padding: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
    }
}

/* ================================================================= */
/* === ВЫРАВНИВАНИЕ БЛОКА КОЛИЧЕСТВА (ТОЧЕЧНАЯ КОРРЕКЦИЯ) === */
/* ================================================================= */
@media (max-width: 1023px) {

    /* 1. Сдвигаем весь блок вправо к краю экрана */
    html body.eskimobi_responsive .tovar_block .price-item .tcount {
        /* Безопасно двигаем вправо. Увеличивай цифру (например, 30px, 40px), 
           пока блок не встанет ровно в 10px от края твоего экрана */
        transform: translateX(50px) !important; 
    }

    /* 2. Опускаем прямоугольник на уровень цены */
    html body.eskimobi_responsive .tovar_block .tcount .count {
        /* БЫЛО 5px. Увеличиваем, чтобы опустить блок вниз. 
           Подбери цифру (12px, 14px, 16px), чтобы центр совпал с ценой */
        margin-top: 11px !important; 
        
        /* === Остальные твои рабочие стили оставляем без изменений === */
        height: 32px !important;        
        width: 96px !important;         
        padding: 0 !important;
        border: 1px solid #f2f2f2 !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;    
    }
}

/* ================================================================= */
/* === ПУЛЬТ УПРАВЛЕНИЯ ОТСТУПАМИ (МОБИЛЬНАЯ ВЕРСИЯ) === */
/* ================================================================= */
@media (max-width: 1023px) {

    /* 1. Отступ ПОД конфигуратором (Выбрать цвет | размеры) */
    html body.eskimobi_responsive .tovar_block .configurator_btn_wrap {
        margin-bottom: -10px !important; /* <--- МЕНЯТЬ ЗДЕСЬ */
    }

    /* 2. Отступ ПОД кнопкой "КУПИТЬ" */
    html body.eskimobi_responsive .tovar_block .in_bascet.buy {
        margin-bottom: 0px !important; /* <--- МЕНЯТЬ ЗДЕСЬ */
    }

    /* 3. Отступ ПОД кнопкой "Купить в 1 клик" */
    html body.eskimobi_responsive .tovar_block .quick_pay {
        margin-bottom: -10px !important; /* <--- МЕНЯТЬ ЗДЕСЬ */
    }

    /* 4. Отступ ПОД кнопкой "добавить в избранное" */
    html body.eskimobi_responsive .tovar_block .add_to_fav {
        margin-bottom: -5px !important; /* <--- МЕНЯТЬ ЗДЕСЬ */
    }

    /* 5. Отступ ПОД кнопками "НАПОЛНЕНИЕ / МЕХАНИЗМ" */
    html body.eskimobi_responsive .tovar_block .buttons-premium-wrap {
        margin-bottom: 25px !important; /* <--- МЕНЯТЬ ЗДЕСЬ */
    }

    /* 6. Отступ ПОД иконками преимуществ (круглые значки STOP и т.д.) */
    html body.eskimobi_responsive .tovar_block .product-advantages-row {
        margin-bottom: 10px !important; /* <--- МЕНЯТЬ ЗДЕСЬ */
    }

    /* 7. Отступ ПЕРЕД табами (Характеристики, Информация) */
    html body.eskimobi_responsive .tovar_block .tabs_block {
        margin-top: 0px !important;    /* <--- МЕНЯТЬ ЗДЕСЬ (отступ сверху) */
        margin-bottom: 20px !important; /* <--- МЕНЯТЬ ЗДЕСЬ (отступ снизу) */
    }
	
}

/* ========================================================= */
/* === МОБИЛЬНЫЙ АККОРДЕОН (БЕЗ КОЛБАСЫ) === */
/* ========================================================= */
@media (max-width: 1023px) {
    
    /* 1. Скрываем десктопные вкладки ТОЛЬКО на мобилке */
    html body .tovar_block .tabs_block .tabs_links {
        display: none !important;
    }

    /* 2. Дизайн кнопок аккордеона */
    .mobile-acc-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #f9f9f9 !important;
        padding: 15px 20px !important;
        margin-top: 5px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #333 !important;
        text-transform: uppercase !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 4px !important;
        cursor: pointer !important;
    }
    
    .mobile-acc-header.active {
        background: #fff !important;
        border-color: #fff !important;
        color: #e44000 !important;
        border-bottom: none !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .mobile-acc-header .acc-arrow {
        display: block !important;
        width: 10px !important;
        height: 10px !important;
        border-right: 2px solid #333 !important;
        border-bottom: 2px solid #333 !important;
        transform: rotate(45deg) !important;
        transition: transform 0.3s ease !important;
    }
    .mobile-acc-header.active .acc-arrow {
        border-color: #e44000 !important;
        transform: rotate(225deg) !important;
        margin-top: 5px !important;
    }

    /* 3. УПРАВЛЕНИЕ КОНТЕНТОМ (БЛОКИРУЕМ ШАБЛОН) */
    html body .tovar_block .tab_content {
        display: none !important; /* По умолчанию всё скрыто */
    }
    
    /* Открытая вкладка НЕ МОЖЕТ быть скрыта или сплющена */
    html body .tovar_block .tab_content.acc-open {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 15px !important;
        box-sizing: border-box !important;
        border: 1px solid #fff !important;
        border-top: none !important;
        background: #fff !important;
        margin-bottom: -15px !important;
        overflow: hidden !important; 
    }


    /* 5. КНОПКА КОНФИГУРАТОРА (СТРОГО ВНИЗУ) */
    html body .spec-btn-wrap {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 20px 0 30px 0 !important;
        clear: both !important;
    }
}

/* ================================================================= */
/* НОВАЯ СТРУКТУРА КОРЗИНЫ ДЛЯ МОБИЛЬНЫХ (Перезапись старых стилей)  */
/* ================================================================= */
@media (max-width: 1023px) {
    
    /* --------------------------------------------------- */
    /* РЯД 1 и 2: Блок с фото, названием и ценами */
    /* --------------------------------------------------- */
    html body.eskimobi_responsive #bascet_block .items .item .right {
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    /* Делаем обертку гибкой, чтобы цены спрыгнули на второй ряд */
    html body.eskimobi_responsive #bascet_block .items .item .price-item {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* РЯД 1: Фото */
    html body.eskimobi_responsive #bascet_block .items .item .cart-foto {
        width: 80px !important;
        flex: 0 0 80px !important;
        text-align: center !important;
    }

    /* РЯД 1: Название и артикул */
    html body.eskimobi_responsive #bascet_block .items .item .right .name {
        width: calc(100% - 95px) !important;
        flex: 0 0 calc(100% - 95px) !important;
        padding-right: 30px !important; /* Отступ чтобы текст не залезал на крестик удаления */
        margin: 0 !important;
        text-align: left !important;
    }

    /* 1. Настройка самих плашек (убираем flex-column и лишнюю высоту) */
    html body.eskimobi_responsive #bascet_block .items .item .right .fprice,
    html body.eskimobi_responsive #bascet_block .items .item .right .fcount,
    html body.eskimobi_responsive #bascet_block .items .item .right .ftotal {
        display: block !important; /* ВАЖНО: меняем flex на block */
        text-align: center !important;
        height: auto !important; /* Убираем жесткую высоту 65px */
        padding: 8px 2px 8px !important; /* Делаем плашки компактнее */
        box-sizing: border-box !important;
    }
	
	/* 2. Принудительно выстраиваем цифры и "Р." в одну строку */
    html body.eskimobi_responsive #bascet_block .items .item .right .fprice span.red,
    html body.eskimobi_responsive #bascet_block .items .item .right .ftotal span.red,
    html body.eskimobi_responsive #bascet_block .items .item span.fullPrice,
    html body.eskimobi_responsive #bascet_block .items .item .right .fprice span.r,
    html body.eskimobi_responsive #bascet_block .items .item .right .ftotal span.r {
        display: inline-block !important; 
        vertical-align: baseline !important; /* Выравниваем по базовой линии текста */
        margin-top: 4px !important;
        line-height: 1 !important;
    }

/* --------------------------------------------------- */
    /* РЯД 3: ТКАНИ (50% ширины, автовысота, в одну строку) */
    /* --------------------------------------------------- */
    html body.eskimobi_responsive #bascet_block .items .item .left {
        width: 100% !important;
        padding: 0 !important;
        margin-top: 20px !important;
        float: none !important;
    }
    
    /* Контейнер для двух плашек (жестко в один ряд) */
    html body.eskimobi_responsive #bascet_block .items .item .left .radios {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Запрещаем перенос самих плашек на новые строки */
        justify-content: space-between !important;
        align-items: stretch !important; /* Плашки вытянутся до одинаковой высоты по наибольшему тексту */
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Сама плашка (строго 50% ширины минус половина отступа) */
    html body.eskimobi_responsive #bascet_block .items .item .left .radios li {
        width: calc(50% - 5px) !important;
        flex: 0 0 calc(50% - 5px) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        border: none !important;
        height: auto !important;
    }

    /* Внутренности плашки (Рамка, Картинка и Текст) */
    html body.eskimobi_responsive #bascet_block .items .item .left .radios li label {
        display: flex !important;
        flex-direction: column !important; /* Выстраиваем фото над текстом */
        align-items: center !important; 
        justify-content: flex-start !important;
        text-align: center !important;
        background: #fdfdfd !important;
        border: 1px solid #eee !important;
        border-radius: 6px !important;
        padding: 10px 5px !important;
        width: 100% !important;
        height: 100% !important; /* Занимает всю высоту своего li */
        box-sizing: border-box !important;
    }

    /* Картинка (Текстура) */
    html body.eskimobi_responsive #bascet_block .items .item .left .radios li img {
        width: 48px !important;
        height: 48px !important;
        object-fit: cover !important;
        margin: 0 0 8px 0 !important;
        float: none !important; /* Убиваем старый float, из-за которого текст ехал */
    }

    /* Текст описания ткани (Разрешаем перенос строк!) */
    html body.eskimobi_responsive #bascet_block .items .item .left .radios li .txt {
        font-size: 11px !important;
        line-height: 1.3 !important;
        color: #555 !important;
        margin: 0 !important;
        display: block !important;
        white-space: normal !important; /* ВАЖНО: Разрешаем тексту переноситься на новую строку */
        word-wrap: break-word !important; /* Если слово слишком длинное, оно перенесется */
    }

    /* Заголовки "Основной цвет" и "Цвет компаньон" */
    html body.eskimobi_responsive #bascet_block .items .item .left .radios li .txt .hh {
        font-size: 12px !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }

    /* --------------------------------------------------- */
    /* РЯД 4: Выбранные опции в строку (плиткой) */
    /* --------------------------------------------------- */
    html body.eskimobi_responsive #bascet_block .items .item .tovar_block_safe {
        width: 100% !important;
        padding-left: 0 !important;
        margin-top: 15px !important;
    }

    /* Заголовок опции (например, "Габариты внешние:") */
    html body.eskimobi_responsive #bascet_block .items .item .clothes_list dt {
        width: 100% !important;
        padding: 10px 0 5px 0 !important;
        font-size: 14px !important;
    }

    /* Обертка для кнопок */
    html body.eskimobi_responsive #bascet_block .items .item .clothes_list dd {
        width: 100% !important;
    }

    /* Гибкая сетка для галочек с автопереносом */
    html body.eskimobi_responsive #bascet_block .items .item .clothes_list dd ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Кнопка опции (галочка) */
    html body.eskimobi_responsive #bascet_block .items .item .change_checkbox {
        padding: 8px 12px !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        font-size: 13px !important;
        display: inline-block !important;
        margin: 0 !important;
        height: auto !important;
    }

    /* Активная (выбранная) кнопка */
    html body.eskimobi_responsive #bascet_block .items .item .change_checkbox.check {
        border-color: #d56336 !important;
        background: #fff5f0 !important;
        color: #000 !important;
    }
}

@media (max-width: 1023px) {
    /* 1. Жестко фиксируем одинаковую высоту для всех трех блоков */
    html body.eskimobi_responsive #bascet_block .items .item .right .fprice,
    html body.eskimobi_responsive #bascet_block .items .item .right .fcount,
    html body.eskimobi_responsive #bascet_block .items .item .right .ftotal {
        height: 65px !important; /* Единая высота */
        justify-content: center !important; /* Выравнивание по центру по вертикали */
        padding: 5px !important;
    }

    /* 2. Уменьшаем шрифт цен и итоговой суммы */
    html body.eskimobi_responsive #bascet_block .items .item .right .fprice .red,
    html body.eskimobi_responsive #bascet_block .items .item .right .ftotal .red {
        font-size: 14px !important; /* Уменьшенный шрифт цены */
        line-height: 1.2 !important;
        display: inline-block !important;
        margin-top: 4px !important; /* Небольшой отступ от подписи "цена:" */
    }

    /* 3. Уменьшаем знак рубля (Р.) */
    html body.eskimobi_responsive #bascet_block .items .item .right .fprice .r,
    html body.eskimobi_responsive #bascet_block .items .item .right .ftotal .r {
        font-size: 11px !important;
        margin-left: 2px !important;
    }

    /* 3. Оставляем центрирование только для кнопок плюса и минуса */
    html body.eskimobi_responsive #bascet_block .items .item .right .fcount .count {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 4px !important;
    }

    /* Сама цифра количества */
    html body.eskimobi_responsive #bascet_block .items .item .right .fcount .num {
        font-size: 14px !important; /* Такой же размер, как у цены */
        line-height: 1 !important;
        width: 24px !important;
        margin: 0 5px !important;
    }

    /* Кнопки плюс и минус делаем компактнее */
    html body.eskimobi_responsive #bascet_block .items .item .right .fcount .but {
        width: 24px !important;
        height: 24px !important;
        line-height: 22px !important;
        font-size: 16px !important;
        padding: 0 !important;
    }
	
	/* ===================================================================== */
    /* ОПЦИИ: Выстраиваем "Заголовок: Значения" последовательно в строку     */
    /* ===================================================================== */

    /* 1. Обертка одной опции (Заголовок + Значения) */
    html body.eskimobi_responsive #bascet_block .items .item .clothes_list > div {
        display: flex !important;
        flex-direction: row !important;      /* Выстраиваем элементы горизонтально */
        flex-wrap: wrap !important;          /* Разрешаем перенос, если экран очень узкий */
        align-items: center !important;      /* Выравниваем текст заголовка по центру кнопок */
        justify-content: flex-start !important;
        padding: 8px 0 !important;
    }

    /* 2. Заголовок опции (Например: "Габариты внешние:") */
    html body.eskimobi_responsive #bascet_block .items .item .clothes_list dt {
        width: auto !important;              /* Отменяем старые 35% ширины */
        flex: 0 0 auto !important;           /* Запрещаем растягиваться */
        margin: 0 8px 0 0 !important;        /* Отступ справа от текста до первой кнопки */
        padding: 0 !important;
        float: none !important;
        font-size: 13px !important;
        line-height: normal !important;
    }

    /* 3. Контейнер для значений (где лежат кнопки) */
    html body.eskimobi_responsive #bascet_block .items .item .clothes_list dd {
        width: auto !important;              /* Отменяем старые 65% ширины */
        flex: 1 1 auto !important;           /* Занимает всё оставшееся место в строке */
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* 4. Сами галочки / варианты опций */
    html body.eskimobi_responsive #bascet_block .items .item .clothes_list dd ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;          /* Автоматически переносит кнопки на новую строку, если они не влезли */
        gap: 6px !important;                 /* Расстояние между кнопками */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
	
	/* ===================================================================== */
    /* ПОДВАЛ КОРЗИНЫ: Итого + Кнопка оформления (Без лишних линий)          */
    /* ===================================================================== */

    /* 1. Общий контейнер "Итого" (разносит текст и цену по краям) */
    html body.eskimobi_responsive #bascet_block .cc-total-wrapper {
        display: flex !important;
        justify-content: space-between !important; 
        align-items: baseline !important;          
        
        width: auto !important; /* ВАЖНО: меняем 100% на auto, чтобы блок не вылезал за экран */
        box-sizing: border-box !important;
        
        border-top: none !important;  
        margin-top: 0 !important; 
        
        /* ⬇️ ОТСТУПЫ: сверху 20px, справа 10px (чтобы цена не прилипала к краю телефона) ⬇️ */
        padding: 10px 100px 0 0 !important; 
    }
        
        /* Убираем мою лишнюю линию */
        border-top: none !important;  
        
        /* ⬇️ ОТСТУП ВНИЗ ОТ ВАШЕЙ СУЩЕСТВУЮЩЕЙ ЛИНИИ ДО СЛОВА "ИТОГО" ⬇️ */
        padding-top: 10px !important;              
        margin-top: 0 !important; 
    }

    /* 2. Текст "Итого:" */
    html body.eskimobi_responsive #bascet_block .cc-total-wrapper .cc-itogo-text {
        font-size: 18px !important;
        font-weight: bold !important;
        color: #333 !important;
        margin: 0 !important;
    }

    /* 3. Блок с самими цифрами (отменяем 100% ширины) */
    html body.eskimobi_responsive #bascet_block #full_price_block {
        width: auto !important;         
        float: none !important;
        display: flex !important;
        align-items: baseline !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Сама цифра суммы */
    html body.eskimobi_responsive #bascet_block #full_price_block .price.red {
        font-size: 24px !important;
        font-weight: bold !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    /* Буква "Р." */
    html body.eskimobi_responsive #bascet_block #full_price_block .r {
        font-size: 14px !important;
        margin-left: 6px !important;
        color: #666 !important;
    }

    /* 4. Блок кнопок оформления */
    html body.eskimobi_responsive #bascet_block .buttons {
        display: flex !important;
        flex-direction: column !important; 
        width: 100% !important;
        
        /* ⬇️ ОТСТУП ОТ ЦЕНЫ "ИТОГО" ДО КНОПОК ⬇️ */
        margin-top: 0px !important; 
        
        /* Расстояние между кнопками (если есть "В кредит" и "Оформить") */
        gap: 0px !important;
    }

    /* Растягиваем кнопки на всю ширину экрана */
    html body.eskimobi_responsive #bascet_block .buttons a.submit,
    html body.eskimobi_responsive #bascet_block .buttons a.buy_credit_cart {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
	
	/* ===================================================================== */
    /* ФОРМА ОФОРМЛЕНИЯ ЗАКАЗА (В одну колонку для мобильных)                */
    /* ===================================================================== */

    /* 1. Отключаем десктопную сетку (Grid/Flex) у контейнера формы */
    html body.eskimobi_responsive #cart_form dl.cc-form-grid,
    html body.eskimobi_responsive #cart_form dl {
        display: block !important; 
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Заголовки полей (ФИО, Телефон и т.д.) */
    html body.eskimobi_responsive #cart_form dl dt {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        font-weight: bold !important;
        font-size: 14px !important;
        margin: 15px 0 5px 0 !important; /* Отступ 15px сверху (от предыдущего поля) и 5px снизу (до инпута) */
        padding: 0 !important;
        float: none !important;
        clear: both !important;
    }

    /* Убираем верхний отступ у самого первого заголовка (ФИО) */
    html body.eskimobi_responsive #cart_form dl dt:first-child {
        margin-top: 0 !important;
    }

    /* 3. Обертка для самих полей ввода */
    html body.eskimobi_responsive #cart_form dl dd {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
    }

    /* 4. Поля ввода (Инпуты) */
    html body.eskimobi_responsive #cart_form dl dd .inp,
    html body.eskimobi_responsive #cart_form dl dd .cc-input {
        width: 100% !important;
        box-sizing: border-box !important;
        height: 44px !important;    /* Сделали чуть выше для удобного нажатия пальцем */
        font-size: 16px !important; /* ВАЖНО: 16px предотвращает авто-приближение экрана на iPhone при клике */
        padding: 0 12px !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        margin: 0 !important;
    }

    /* 5. Поле комментария (Текстовая область) */
    html body.eskimobi_responsive #cart_form dl dd textarea.inp,
    html body.eskimobi_responsive #cart_form dl dd textarea.cc-textarea {
        height: 80px !important;
        padding: 12px !important;
        resize: vertical !important;
    }

    /* 6. Подсказка под адресом (Например: "г.Москва...") */
    html body.eskimobi_responsive #cart_form dl dd .cc-info {
        display: block !important;
        font-size: 12px !important;
        color: #888 !important;
        margin-top: 6px !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }


	
	/* ===================================================================== */
    /* ОТСТУПЫ ПЕРЕД И ВНУТРИ ФОРМЫ ОФОРМЛЕНИЯ ЗАКАЗА                        */
    /* ===================================================================== */

    /* 1. Отступ от корзины (или кнопки "Оформить заказ") вниз до текста "ОФОРМЛЕНИЕ ЗАКАЗА" */
    html body.eskimobi_responsive #cart_form {
        margin-top: -10px !important; /* ⬅️ Меняйте эту цифру для регулировки */
        padding-top: 0 !important;
        float: none !important;
        clear: both !important;
    }

    /* 2. Отступ от текста "ОФОРМЛЕНИЕ ЗАКАЗА" вниз до поля "ФИО" */
    html body.eskimobi_responsive #cart_form .heading.cc-form-heading {
        margin-bottom: 20px !important; /* ⬅️ Меняйте эту цифру для регулировки */
        padding-bottom: 0 !important;
        line-height: 1.2 !important;
    }

    /* Убеждаемся, что само поле ФИО не добавляет лишних отступов сверху */
    html body.eskimobi_responsive #cart_form dl dt:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Усмиряем десктопные бронебойные стили цен на мобилке */
    html body.eskimobi_responsive div#content div#bascet_block .item .fprice span.red, 
    html body.eskimobi_responsive div#content div#bascet_block .item .ftotal span.red,
    html body.eskimobi_responsive div#content div#bascet_block .item span.fullPrice {
        font-size: 14px !important;
        line-height: normal !important;
    }

    html body.eskimobi_responsive div#content div#bascet_block .item .fprice span.r, 
    html body.eskimobi_responsive div#content div#bascet_block .item .ftotal span.r {
        font-size: 11px !important;
    }

/* ===================================================================== */
/* ПАНЕЛЬ УПРАВЛЕНИЯ ОТСТУПАМИ КОРЗИНЫ (Для мобилок)                     */
/* ===================================================================== */
@media (max-width: 1023px) {

    /* Возвращаем подписи ("цена:", "кол-во:") наверх */
    html body.eskimobi_responsive #bascet_block .items .item .right .fprice > span:first-child,
    html body.eskimobi_responsive #bascet_block .items .item .right .fcount > span:first-child,
    html body.eskimobi_responsive #bascet_block .items .item .right .ftotal > span:first-child {
        display: block !important;
        margin-bottom: 0px !important;   /* Отступ между словом "цена:" и самой цифрой */
    }

    html body.eskimobi_responsive #bascet_block .items .item .right .ftotal {
        width: 25% !important;
        margin-left: 0 !important;
        margin-right: 10% !important; /* Толкает блок "СУММА" влево */
    }

    /* --- 3. Отступ по вертикали: МЕЖДУ ЦЕНАМИ И ТКАНЯМИ --- */
    html body.eskimobi_responsive #bascet_block .items .item .left {
        margin-top: -50px !important; /* Отдаляет блок тканей вниз от цен */
    }

    /* --- 4. Отступ по вертикали: МЕЖДУ ТКАНЯМИ И ГАЛОЧКАМИ ОПЦИЙ --- */
    html body.eskimobi_responsive #bascet_block .items .item .tovar_block_safe {
        margin-top: 0px !important; /* Отдаляет блок опций вниз от тканей */
    }
	
	/* ===================================================================== */
    /* БАННЕР В КОРЗИНЕ: Отступы и обтекание картинки текстом                */
    /* ===================================================================== */

    /* 1. Отступ между заголовком "Корзина" и баннером */
    html body.eskimobi_responsive #bascet_block h1 {
        margin-bottom: 15px !important; /* ⬅️ Меняйте эту цифру для настройки отступа */
        padding-bottom: 0 !important;
    }

    /* Обертка самого баннера */
    html body.eskimobi_responsive #bascet_block .cc-cart-banner {
        display: block !important;
        overflow: hidden !important;    /* "Очистка потока", чтобы картинка не вываливалась */
        margin-bottom: 25px !important; /* Отступ от баннера вниз до списка товаров */
        text-align: left !important;    /* ⬅️ ПРИНУДИТЕЛЬНО ВЫРАВНИВАЕМ ПО ЛЕВОМУ КРАЮ */
    }

    /* 2. Картинка внутри баннера (Настройка обтекания) */
    html body.eskimobi_responsive #bascet_block .cc-cart-banner img {
        float: left !important;           /* Картинка слева, текст обтекает её справа и снизу */
        max-width: 35% !important;        /* Занимает 35% экрана. Если картинка слишком большая - уменьшите до 25-30% */
        height: auto !important;
        margin: 5px 15px 5px 0 !important; /* Отступы от картинки: сверху 5px, СПРАВА 15px (чтобы текст не прилипал), снизу 5px, слева 0 */
    }

    /* Текст внутри баннера */
    html body.eskimobi_responsive #bascet_block .cc-cart-banner p,
    html body.eskimobi_responsive #bascet_block .cc-cart-banner span,
    html body.eskimobi_responsive #bascet_block .cc-cart-banner div {
        display: inline !important;       
        font-size: 13px !important;       
        line-height: 1.4 !important;
        text-align: left !important;
    }
	
}

/* ===================================================================== */
/* === ДОБАВЛЕНИЕ ИЗБРАННОГО В ЛИПКУЮ МОБИЛЬНУЮ ШАПКУ (INDEX.TPL) === */
/* ===================================================================== */
@media screen and (max-width: 1023px) {
    
    /* 1. Даем обертке Избранного такие же права, как у остальных кнопок (flex: 1) */
    html body.eskimobi_responsive .mobile-fixed-header .mh-fav-wrap {
        flex: 1 !important;             
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    /* 2. Центруем саму иконку и задаем размер зоны клика (как у корзины) */
    html body.eskimobi_responsive .mobile-fixed-header .mh-fav-circle {
        position: relative !important; 
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important;
        width: 40px !important; 
        height: 40px !important;
        text-decoration: none !important;
    }

    /* 3. Размер сердечка (чуть крупнее, чтобы совпадало с лупой и корзиной) */
    html body.eskimobi_responsive .mobile-fixed-header .mh-fav-circle svg {
        width: 24px !important; 
        height: 24px !important; 
        stroke: #333 !important; /* Темно-серый контур */
        display: block !important;
    }
}

/* ===================================================================== */
/* === ФИКС СЧЕТЧИКА И КРУЖОК ИЗБРАННОГО === */
/* ===================================================================== */
@media screen and (max-width: 1023px) {
    
    /* 1. Делаем кнопку круглым серым значком (как корзина) */
    html body.eskimobi_responsive .mobile-fixed-header .mh-fav-circle {
        position: relative !important; 
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        
        /* ДОБАВИЛИ ФОН И СКРУГЛЕНИЕ */
        background: #eee !important;     /* Светло-серый фон, точно как у корзины */
        border-radius: 50% !important;   /* Идеальный круг */
        text-decoration: none !important;
        transition: background-color 0.2s !important;
    }
    
    /* Эффект нажатия */
    html body.eskimobi_responsive .mobile-fixed-header .mh-fav-circle:active {
        background: #e0e0e0 !important;
    }

    /* 2. Настраиваем сам кружок с цифрой */
    html body.eskimobi_responsive .mobile-fixed-header .mh-fav-circle .favcount {
        position: absolute !important;
        top: -2px !important;       /* Приподняли, чтобы сидел на краю круга */
        right: -2px !important;     /* Сдвинули вправо, как у корзины */
        
        background: #e44000 !important;
        color: #fff !important;
        font-size: 10px !important;
        font-weight: bold !important;
        min-width: 16px !important;
        height: 16px !important;
        border-radius: 50% !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        border: 2px solid #fff !important; /* Белая окантовка */
        z-index: 100 !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* ===================================================================== */
/* === ИДЕАЛЬНОЕ ВЫРАВНИВАНИЕ СЧЕТЧИКОВ КОРЗИНЫ И ИЗБРАННОГО === */
/* ===================================================================== */
@media screen and (max-width: 1023px) {
    
    /* Применяем абсолютно одинаковые координаты для обоих красных кружочков */
    html body.eskimobi_responsive .mobile-fixed-header .mh-fav-circle .favcount,
    html body.eskimobi_responsive .mobile-fixed-header .mh-cart-circle .mh-cart-count {
        position: absolute !important;
        
        /* ⬇️ ВЫРАВНИВАНИЕ ЗДЕСЬ ⬇️ */
        top: -2px !important;   /* Одинаковая высота (чуть вылезает за пределы серого круга сверху) */
        right: -2px !important; /* Одинаковый сдвиг вправо */
        
        /* Гарантируем одинаковый размер, чтобы они не отличались */
        min-width: 16px !important;
        height: 16px !important;
        line-height: 16px !important;
        margin: 0 !important;
        transform: none !important;
        
        /* Цвета и границы */
        background: #e44000 !important;
        color: #fff !important;
        border: 2px solid #fff !important;
        border-radius: 50% !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ================================================================= */
/* === ИСПРАВЛЕНИЕ КНОПКИ В КАТАЛОГЕ (ПЕРЕНОС С ЦЕНТРОВКОЙ) === */
/* ================================================================= */
@media screen and (max-width: 429px) {
    
    /* 1. Настройка самой кнопки */
    html body .catalog .cat-item .add_to_cart {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important; /* Иконка и текст ровно по центру вертикали */
        white-space: normal !important; /* РАЗРЕШАЕМ ПЕРЕНОС */
        padding: 0 5px !important;
        height: 40px !important;        /* Чуть увеличим высоту, чтобы двум строкам было не тесно */
    }

    /* 2. Настройка текста внутри кнопки */
    html body .catalog .cat-item .add_to_cart .single-btn-text,
    html body .catalog .cat-item .add_to_cart span {
        white-space: normal !important; /* Разрешаем перенос текста */
        text-align: center !important;  /* ВЫРАВНИВАЕМ ТЕКСТ СТРОГО ПО ЦЕНТРУ */
        font-size: 11px !important;     /* Оптимальный размер шрифта */
        font-weight: 700 !important;
        text-transform: uppercase !important;
        line-height: 1.1 !important;    /* Сжимаем расстояние между 1 и 2 строкой */
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ================================================================= */
/* === ОПУСКАЕМ ТОЧКИ ПАГИНАЦИИ ПОД ФОТО === */
/* ================================================================= */

/* 1. Разрешаем точкам выходить за нижнюю границу фото */
.catalog .cat-item .foto {
    overflow: visible !important; 
}

/* 2. Сами картинки продолжаем обрезать, чтобы они не вылезали за края при перелистывании */
.catalog .cat-item .product-jcarousel {
    overflow: hidden !important; 
    border-radius: 12px 12px 0 0 !important; 
}

/* 3. Опускаем точки в белую зону */
.catalog.catalog-grid .jcarousel-pagination {
    bottom: -15px !important; /* Регулируйте эту цифру (например, -10px или -20px) */
    z-index: 10 !important;
}

/* 4. Создаем пустое место под фото, чтобы текст не слипался с точками */

/* Для компьютеров (ПК) */
@media (min-width: 992px) {
    .catalog .cat-item form {
        padding-top: 20px !important; /* Сдвигает весь текст вниз */
    }
}

/* Для мобильных устройств */
@media (max-width: 1023px) {
    .catalog .cat-item .foto {
        margin-bottom: 25px !important; /* Раздвигает фото и текст на телефонах */
    }
}

/* ================================================================= */
/* === ЭЛЕГАНТНАЯ ПОЛОСА С КРУГЛЫМ ПОЛЗУНКОМ (МОБИЛЬНЫЕ) === */
/* ================================================================= */
@media (max-width: 1023px) {
    
    /* 1. Контейнер: задаем общую длину и невидимую зону клика */
    .catalog.catalog-grid .jcarousel-pagination {
        display: flex !important;
        width: 60% !important;          /* Сделали чуть короче, чтобы было аккуратнее */
        height: 20px !important;        /* Зона для клика пальцем */
        margin: 0 auto !important;
        bottom: -15px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        gap: 0 !important;
        position: absolute !important;
        z-index: 100 !important;
    }

    /* 2. Тонкая направляющая линия (Track) */
    .catalog.catalog-grid .jcarousel-pagination::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        height: 2px !important;         /* Очень тонкая, не отвлекает */
        background-color: #e8e8e8 !important; /* Светло-серая */
        border-radius: 2px !important;
        z-index: 1 !important;
    }

    /* 3. Невидимые зоны (делят линию на равные части в зависимости от кол-ва фото) */
    .catalog.catalog-grid .jcarousel-pagination a {
        flex: 1 !important;             
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important; 
        border: none !important;
        position: relative !important;
        z-index: 2 !important;
        text-indent: -9999px !important; /* Прячем текст, если он есть */
    }

    /* Скрываем всё у неактивных зон */
    .catalog.catalog-grid .jcarousel-pagination a::after {
        display: none !important;
    }

    /* 4. Сам ползунок (Круглый, фиксированный, легкий цвет) */
    .catalog.catalog-grid .jcarousel-pagination a.active::after {
        display: block !important;
        content: "" !important;
        
        /* Позиционируем ровно по центру своей зоны */
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        
        /* === ФИКСИРОВАННЫЙ РАЗМЕР (не зависит от кол-ва фото) === */
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;  /* Делает круг */
        
        /* === ЛЕГКИЙ ЦВЕТ === */
        /* Вы можете поставить #999999 (серый) или оставить этот мягкий оранжевый */
        background-color: #ff9a66 !important; 
        
        /* Легкая тень, чтобы кружок "парил" над линией */
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
        
        transition: all 0.2s ease !important;
    }
}

/* ================================================================= */
/* === БРОНЕБОЙНОЕ УДАЛЕНИЕ ОРАНЖЕВОЙ КЛЯКСЫ (МОБИЛЬНЫЕ) === */
/* ================================================================= */
@media (max-width: 1023px) {
    
    /* 1. Жестко убиваем фон у всей зоны клика во всех возможных состояниях */
    html body #content .catalog.catalog-grid .jcarousel-pagination a,
    html body #content .catalog.catalog-grid .jcarousel-pagination a.active,
    html body #content .catalog.catalog-grid .jcarousel-pagination a:active,
    html body #content .catalog.catalog-grid .jcarousel-pagination a:hover,
    html body #content .catalog.catalog-grid .jcarousel-pagination a:focus {
        background-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        outline: none !important;
        
        /* Полностью отключаем системную вспышку при тапе (iOS/Android) */
        -webkit-tap-highlight-color: transparent !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
        -webkit-touch-callout: none !important;
    }

    /* 2. Отключаем вспышку тапа и у самого контейнера полоски */
    html body #content .catalog.catalog-grid .jcarousel-pagination {
        -webkit-tap-highlight-color: transparent !important;
    }

    /* 3. Гарантированно красим ТОЛЬКО сам маленький кружочек-ползунок */
    html body #content .catalog.catalog-grid .jcarousel-pagination a.active::after {
        background-color: #ff9933 !important; /* Ваш фирменный оранжевый */
        display: block !important;
        opacity: 1 !important;
    }
}

/* ================================================================= */
/* === ИСПРАВЛЕНИЕ ПОЛЗУНКА: ШИРИНА ПОЛОСЫ И КРУГЛАЯ ТОЧКА === */
/* ================================================================= */
@media (max-width: 1023px) {
    
    /* 1. Делаем саму полосу шире (было 60%, стало 85%) */
    html body #content .catalog.catalog-grid .jcarousel-pagination {
        width: 85% !important; 
    }

    /* 2. Отключаем обрезку! Теперь кружок может быть шире своей зоны */
    html body #content .catalog.catalog-grid .jcarousel-pagination a {
        overflow: visible !important; 
    }

    /* 3. Железобетонно фиксируем размер кружка, чтобы он не сжимался */
    html body #content .catalog.catalog-grid .jcarousel-pagination a.active::after {
        min-width: 8px !important;
        min-height: 8px !important;
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
    }
}

/* ================================================================= */
/* === ПЛАШКА "В ИЗБРАННОЕ" НА КАРТОЧКАХ КАТАЛОГА === */
/* ================================================================= */
.catalog .cat-item .catalog-fav-btn {
    position: absolute !important;
    left: -1px !important; /* Наезжаем на рамку карточки */
    
    /* === РЕГУЛИРОВКА ВЫСОТЫ === */
    /* Меняйте эту цифру, чтобы опустить/поднять плашку относительно цены */
    bottom: 50px !important; 
    
    width: 38px !important;
    height: 38px !important;
    
    /* Форма: полукруг справа */
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-left: none !important; /* Убираем левую границу, чтобы сливалось с краем */
    border-radius: 0 10px 10px 0 !important;
    
    /* Легкая тень для объема */
    box-shadow: 3px 2px 5px rgba(0,0,0,0.04) !important;
    z-index: 30 !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

/* Само сердечко (Векторная SVG графика) */
.catalog .cat-item .catalog-fav-btn::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    
    /* Исходное состояние: Серый контур */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Эффект "пружинки" */
}

/* Эффект при наведении (Закрашивается в оранжевый) */
.catalog .cat-item .catalog-fav-btn:hover {
    background-color: #fdfdfd !important;
}

.catalog .cat-item .catalog-fav-btn:hover::before {
    /* Оранжевая заливка и контур */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e44000' stroke='%23e44000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;
    transform: scale(1.15) !important; /* Легкое увеличение */
}

/* --- МОБИЛЬНАЯ АДАПТАЦИЯ --- */
@media (max-width: 1023px) {
    .catalog .cat-item .catalog-fav-btn {
        /* На мобильных кнопка корзины ниже, возможно плашку нужно опустить */
        bottom: 45px !important; 
        
        width: 32px !important;
        height: 32px !important;
    }
    .catalog .cat-item .catalog-fav-btn::before {
        width: 15px !important;
        height: 15px !important;
    }
}

/* ================================================================= */
/* === АКТИВНОЕ СОСТОЯНИЕ СЕРДЕЧКА (В ИЗБРАННОМ) === */
/* ================================================================= */

/* Срабатывает, когда JS добавил класс .added ИЛИ если ссылка ведет в избранное */
.catalog .cat-item .add_to_fav.added .catalog-fav-btn,
.catalog .cat-item .catalog-fav-btn[href*="show_favorites"] {
    background-color: #fdfdfd !important;
}

.catalog .cat-item .add_to_fav.added .catalog-fav-btn::before,
.catalog .cat-item .catalog-fav-btn[href*="show_favorites"]::before {
    /* Красим само сердечко в ваш фирменный оранжевый/красный */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e44000' stroke='%23e44000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;
    transform: scale(1.15) !important;
}

/* ================================================================= */
/* === КНОПКА "В ИЗБРАННОЕ" С СЕРДЕЧКОМ НА СТРАНИЦЕ ТОВАРА === */
/* ================================================================= */
.tovar_block .add_to_fav {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

.tovar_block .add_to_fav a,
.tovar_block .add_to_fav a.btn-product-fav {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14px !important;
    color: #666 !important;
    text-decoration: underline !important;
    text-decoration-style: dashed !important;
    text-underline-offset: 3px !important;
    transition: color 0.2s ease !important;
    background: none !important; /* Убиваем старую звездочку */
    padding-left: 0 !important;
}

/* Само сердечко рисуем псевдоэлементом */
.tovar_block .add_to_fav a::before,
.tovar_block .add_to_fav a.btn-product-fav::before {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    /* Исходное серое сердечко */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Наведение на текст */
.tovar_block .add_to_fav a:hover,
.tovar_block .add_to_fav a.btn-product-fav:hover {
    color: #e44000 !important;
    text-decoration-color: #e44000 !important;
}

/* Активное состояние (товар уже в избранном) */
.tovar_block .add_to_fav.added a,
.tovar_block .add_to_fav.added a.btn-product-fav {
    color: #e44000 !important;
    text-decoration: none !important; /* Убираем пунктир */
    font-weight: 600 !important;
}

/* Красное сердечко при наведении ИЛИ если товар добавлен */
.tovar_block .add_to_fav.added a::before,
.tovar_block .add_to_fav a:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e44000' stroke='%23e44000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;
    transform: scale(1.15) !important;
}

/* ================================================================= */
/* === ИСПРАВЛЕНИЕ ШАПКИ И ФИЛЬТРОВ (ПЛАНШЕТЫ И МОБИЛЬНЫЕ) === */
/* ================================================================= */

/* 1. Возвращаем кружок Избранного и Корзины на место */
.mh-fav-circle, 
.mh-cart-circle {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mh-fav-circle .mh-cart-count, 
.mh-fav-circle .favcount,
.mh-cart-circle .mh-cart-count {
    position: absolute !important;
    top: -6px !important;
    right: -8px !important;
    left: auto !important;
    bottom: auto !important;
}

/* 2. Чиним выпадающие списки (select) для iPad и iPhone, чтобы они нажимались */
#sidebar select {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    background-image: none !important; /* Убираем нарисованную стрелку, возвращаем родную iOS */
    padding: 10px !important;
    cursor: pointer !important;
}

/* ================================================================= */
/* === ПЛАНШЕТЫ (до 1024px): ИСПРАВЛЕНИЕ ОКНА ВЫБОРА ТКАНЕЙ === */
/* ================================================================= */
@media screen and (max-width: 1024px) {
    

    /* 3. КОРРЕКЦИЯ ВЕРХНЕГО МЕНЮ (чтобы категории не слипались) */
    #factory_choice_popup .factorys_types_block {
        text-align: center !important;
        margin-bottom: 15px !important;
        width: 100% !important;
    }
    #factory_choice_popup .factorys_types_block .tablecategory,
    #factory_choice_popup .factorys_types_block ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    #factory_choice_popup .factorys_types_block label,
    #factory_choice_popup .factorys_types_block td {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
	
/* 1. БЛОКИРУЕМ ССЫЛКИ ПО УМОЛЧАНИЮ (Священное правило!) */
    /* Ссылки мертвы, пока скрипт не даст им класс .clickable-links */
    #factory_choice_popup ul.list li:not(.clickable-links) a {
        pointer-events: none !important;
    }

    /* 2. РАЗРЕШАЕМ КЛИКАТЬ (Добавляется скриптом после смерти фантомного клика) */
    #factory_choice_popup ul.list li.clickable-links a {
        pointer-events: auto !important;
    }

    /* 3. Прячем само меню */
    #factory_choice_popup ul.list li .hover,
    #factory_choice_popup ul.list li .hover_block,
    #factory_choice_popup ul.list li .actions {
        display: none !important;
        opacity: 0 !important;
    }

    /* 4. Мгновенно ПОКАЗЫВАЕМ меню при касании (класс .active-tap) */
    #factory_choice_popup ul.list li.active-tap .hover,
    #factory_choice_popup ul.list li.active-tap .hover_block,
    #factory_choice_popup ul.list li.active-tap .actions {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(255, 255, 255, 0.9) !important;
        z-index: 100 !important;
        opacity: 1 !important;
    }
	
	/* --- ЖЕЛЕЗОБЕТОННО УБИРАЕМ ГОРИЗОНТАЛЬНЫЙ ЛЮФТ И ПРОКРУТКУ НА ПЛАНШЕТАХ --- */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Запрещаем самому окну и его внутренностям распирать экран */
    #factory_choice_popup,
    #factory_choice_popup .popup_wrap {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
	
	/* --- ЖЕСТКАЯ ФИКСАЦИЯ И ЦЕНТРОВКА НИЖНЕЙ ПАНЕЛИ --- */
    #factory_choice_popup .fabric-bottom-bar {
        position: sticky !important;
        bottom: 0 !important; 
        left: 0 !important;
        right: 0 !important; /* Тянем в обе стороны */
        margin: auto 0 0px 0 !important; /* Прижимаем к низу и убиваем старые отступы */
        width: 100% !important;
        min-width: 100% !important; /* Запрещаем сжиматься влево */
        max-width: 100% !important;
        transform: none !important; /* Убиваем любой левый сдвиг от скриптов */
        background: #ffffff !important; 
        z-index: 1000 !important;
        box-sizing: border-box !important;
        box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.15) !important;
        align-self: stretch !important; /* Заставляем растянуться на всю ширину flex-окна */
    }

    
}

/* Возвращаем серый кружок для иконки избранного */
.mh-fav-circle {
    width: 42px; /* Ширина кружка (подогнал примерно под стандарт, если что - можно изменить) */
    height: 42px; /* Высота кружка */
    background-color: #f2f2f2; /* Тот самый светло-серый цвет */
    border-radius: 50%; /* Делает квадрат идеальным кругом */
}