/* ================================================================ */
/* === СТИЛИ ДЛЯ ПОПАПА "ТОВАР ДОБАВЛЕН В КОРЗИНУ" === */
/* ================================================================ */

/* Основная обертка окна */
.popup_block {
    position: absolute;
    z-index: 101;
    width: 100%;
    min-width: 1000px;
}

/* Белая подложка окна */
.popup_wrap {
    margin: 0 auto;
    box-shadow: 0 0 10px #000;
    background: #ffffff;
    position: relative;
    z-index: 10000;
    /* Ваши радиусные углы */
    border-radius: 10px; 
    behavior: url(border-radius.htc); /* Для старых IE, если нужно */
}

/* Специфика именно окна корзины */
.add_to_bascet_popup .popup_wrap {
    width: 1000px;
    padding: 47px 0 44px 0;
}

/* Заголовок "ТОВАР ДОБАВЛЕН В КОРЗИНУ" */
.popup_block .popup_heading {
    text-align: center;
    font-size: 36px;
    text-transform: uppercase;
    font-weight: 300;
    clear: both;
    margin-bottom: 20px;
}

/* Крестик закрытия */
.popup_block .close {
    text-decoration: none;
    position: absolute;
    right: 0;
    top: -37px;
    height: 37px;
    background: #e44000;
    color: #FFFFFF;
    width: 37px;
    text-align: center;
    cursor: pointer;
    font-size: 38px;
    font-weight: 300;
    line-height: 34px;
    border-radius: 5px 5px 0 0; /* Скругление сверху */
}
.popup_block .close:hover {
    background: #c33700;
}

/* Список товаров внутри попапа */
.add_to_bascet_popup .tovar {
    border-top: 1px solid #d7d7d7;
    margin-top: 20px;
    list-style: none;
    padding: 0;
}

.add_to_bascet_popup .tovar li {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #d7d7d7;
    padding: 30px 0 24px 0;
    display: block;
    clear: both;
}

/* Вспомогательный класс для выравнивания в строку */
.add_to_bascet_popup .inline {
    display: inline-block;
    vertical-align: middle; /* По центру по вертикали */
    zoom: 1; 
    *display: inline;
}

/* Фото товара */
.add_to_bascet_popup .tovar .foto {
    text-align: center;
    width: 200px; /* Чуть меньше, чем в оригинале, чтобы влезло */
    margin-top: 0;
    margin-right: 20px;
}
.add_to_bascet_popup .tovar .foto img {
    max-width: 100%;
    height: auto;
    max-height: 150px;
}

/* Название и опции */
.add_to_bascet_popup .tovar .name {
    padding: 0 20px;
    width: 250px;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 18px;
    text-align: left;
}
.add_to_bascet_popup .tovar .name a {
    color: #000000;
    text-decoration: none;
    font-weight: bold;
}
.add_to_bascet_popup .tovar .name a:hover {
    text-decoration: underline;
}

/* Блок цены */
.add_to_bascet_popup .tovar .fprice {
    width: 130px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

/* Блок количества */
.add_to_bascet_popup .tovar .fcount {
    width: 140px;
    text-align: center;
}
.add_to_bascet_popup .tovar .fcount .count {
    /* Центрируем блок счетчика */
    display: inline-block;
}

/* Кнопки плюс/минус */
.add_to_bascet_popup .tovar .but {
    width: 24px;
    height: 24px;
    background: #e44000;
    color: #fff;
    overflow: hidden;
    text-align: center;
    font: 20px/22px tahoma;
    margin: 0 5px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    border-radius: 3px;
}
.add_to_bascet_popup .tovar .but:hover {
    background: #c93800;
}

/* Цифра количества */
.add_to_bascet_popup .tovar .num {
    font-size: 24px;
    text-align: center;
    min-width: 30px;
    display: inline-block;
    vertical-align: middle;
}

/* Итоговая сумма */
.add_to_bascet_popup .tovar .ftotal {
    width: 150px;
    text-align: right;
    padding-right: 30px;
}
.add_to_bascet_popup .tovar .red {
    font-size: 24px;
    color: #e44000;
    font-weight: bold;
}
.add_to_bascet_popup .tovar .r {
    font-size: 14px;
    text-transform: uppercase;
}

/* Крестик удаления товара (внутри строки) */
.add_to_bascet_popup .tovar .closex {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -15px; /* По центру по вертикали */
    color: #d7d7d7;
    font-size: 30px;
    font-weight: 300;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
}
.add_to_bascet_popup .tovar .closex:hover {
    color: #e44000;
}

/* КНОПКИ ВНИЗУ (Оформить / Продолжить) */
.add_to_bascet_popup .buttons {
    text-align: center;
    padding-top: 40px;
}
.add_to_bascet_popup .buttons a {
    margin: 0 15px;
    font-size: 18px; /* Чуть меньше, чтобы влезали */
    display: inline-block;
    text-decoration: none;
    border-radius: 5px; /* Скругление кнопок */
    height: 50px;
    line-height: 50px;
    padding: 0;
}

/* Общие стили кнопок (из вашего CSS) */
.submit, .yellow_but {
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    border: 0;
    cursor: pointer;
    color: #FFFFFF;
}

/* Кнопка "Продолжить покупки" */
.yellow_but {
    background: #f78015;
    width: 325px;
}
.yellow_but:hover {
    background: #e47613;
}

/* Кнопка "Оформить заказ" */
.submit {
    background: #e44000;
    width: 345px;
}
.submit:hover {
    background: #c33700;
}

/* === Стили для характеристик (Две колонки) === */
.tech-specs-simple {
    width: 100%;
    margin-top: 20px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif; /* Или ваш основной шрифт */
}

.spec-block {
    margin-bottom: 30px; /* Отступ между группами */
}

.spec-header {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #333;
    background-color: #f7f7f7;
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.spec-list {
    padding: 0 5px;
}

/* Строка с характеристикой - это Flex-контейнер */
.spec-row {
    display: flex; /* Включаем колонки */
    padding: 8px 0;
    border-bottom: 1px dotted #ccc; /* Тонкая линия разделителя */
    align-items: baseline; /* Выравнивание по тексту */
}

.spec-row:last-child {
    border-bottom: none;
}

/* Левая колонка (Названия) */
.spec-label {
    flex: 0 0 40%; /* Занимает ровно 40% ширины */
    max-width: 40%;
    color: #666;
    padding-right: 15px; /* Отступ от правой колонки */
    box-sizing: border-box;
}

/* Правая колонка (Значения) */
.spec-value {
    flex: 0 0 60%; /* Занимает оставшиеся 60% ширины */
    max-width: 60%;
    text-align: left; /* Прижато к ЛЕВОМУ краю правой колонки */
    color: #000;
    box-sizing: border-box;
}

/* Жирный шрифт для основного значения */
.spec-value b {
    font-weight: 700;
    color: #000;
    font-size: 15px;
}

/* Варианты размеров (в скобках) */
.spec-opt {
    display: inline-block; /* Выстраиваем в одну строку с основным значением */
    color: #888;
    font-size: 13px;
    margin-left: 8px;
    font-weight: normal;
}

/* --- АДАПТАЦИЯ ПОД МОБИЛЬНЫЕ --- */
@media (max-width: 500px) {
    .spec-row {
        flex-direction: column; /* На телефоне друг под другом */
    }
    
    .spec-label {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 4px;
        font-weight: 600; /* Чуть жирнее на телефоне для читаемости */
    }
    
    .spec-value {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
    }
}

/* --- Скрываем старые элементы, замененные Конфигуратором --- */

/* Скрыть старую кнопку выбора ткани */
.choose_tkan, .start_cloth {
    display: none !important;
}

/* ================================================================= */
/* === ФИНАЛЬНЫЙ FIX: СКРЫТИЕ ТАБЛИЦЫ БЕЗ ПОЛОМКИ КНОПКИ === */
/* ================================================================= */

/* 1. Скрываем таблицу на странице товара методом "Схлопывания" */
/* Мы НЕ используем display:none и НЕ убираем её за экран. */
/* Мы просто делаем её высоту 0. Скрипт думает, что она на месте. */
.clothes_category:not(#factory_choice_popup .clothes_category) {
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;    /* Обязательно block, чтобы скрипт работал */
    visibility: visible !important; /* Обязательно visible */
    width: 100% !important;       /* Оставляем ширину, чтобы скрипт мог её посчитать */
}

/* 2. Восстанавливаем таблицу, когда она попадает внутри попапа */
#factory_choice_popup .clothes_category {
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    display: block !important;
    margin-bottom: 20px !important;
}

/* 3. Внутри попапа скрываем ряды с ценами (чтобы не мусорить) */
#factory_choice_popup .clothes_category tr {
    display: none !important;
}

/* 4. ...но показываем шапку с категориями (1, 2, 3...) для клика */
#factory_choice_popup .clothes_category tr:first-child {
    display: table-row !important;
}

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

.similar-products-wrapper {
    margin: 30px 0;
    width: 100%;
}

/* Контейнер с прокруткой */
.variants-scroll-container {
    width: 100%;
    overflow: hidden; /* Прячем внешний скролл */
    padding: 10px 0; /* Место для теней */
}

.variants-scroll-list {
    display: flex;
    flex-wrap: nowrap; /* Строго в одну строку */
    overflow-x: auto;  /* Горизонтальная прокрутка */
    -webkit-overflow-scrolling: touch; /* Плавность на iOS */
    gap: 15px; /* Расстояние между карточками */
    padding: 5px 15px 25px 15px !important; /* Отступы внутри ленты */
    margin: 0 !important;
    list-style: none !important;
    scrollbar-width: none; /* Firefox: скрываем скроллбар */
}

/* Chrome/Safari: скрываем скроллбар */
.variants-scroll-list::-webkit-scrollbar {
    display: none;
}

/* Карточка товара */
.variant-card {
    flex: 0 0 auto; /* Не сжимать */
    width: 200px;   /* Фиксированная ширина */
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease;
}

.variant-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.vc-link {
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Фото */
.vc-img {
    width: 100%;
    height: 140px;
    margin-bottom: 10px;
    border-radius: 6px;
    overflow: hidden;
    background: #f9f9f9;
    position: relative;
}

.vc-img img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Вписываем фото целиком */
    display: block;
}

/* Название */
.vc-name {
    font-size: 13px;
    line-height: 1.3;
    height: 34px; /* Ограничение высоты под 2 строки */
    overflow: hidden;
    text-align: center;
    margin-bottom: 5px;
    font-weight: 600;
}

/* Цена */
.vc-price {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
    margin-bottom: 10px;
}

/* Кнопка */
.vc-btn {
    display: block;
    width: 100%;
    padding: 8px 0;
    text-align: center;
    background: #e44000;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    transition: background 0.2s;
}

.vc-btn:hover {
    background: #c33700;
}

/* Мобильная версия */
@media (max-width: 600px) {
    .variant-card {
        width: 160px; /* Карточки чуть меньше */
    }
    .vc-img {
        height: 110px;
    }
    .variants-scroll-list {
        padding-left: 10px !important;
    }
}

/* ======================================================= */
/* === ДОРАБОТКА СЛАЙДЕРА (ПОЛОСА ПРОКРУТКИ + ФОН) === */
/* ======================================================= */

/* 1. УБИРАЕМ СЕРЫЙ ФОН У ФОТО */
.vc-img {
    background-color: #ffffff !important; /* Был #f9f9f9 -> Ставим Белый */
    border: none !important;              /* Убираем любые рамки у картинки */
}

/* 2. НАСТРОЙКА ПОЛОСЫ ПРОКРУТКИ (SCROLLBAR) */

/* Для Firefox */
.variants-scroll-list {
    /* Делаем полосу тонкой и оранжевой */
    scrollbar-width: thin !important;
    scrollbar-color: #e44000 #f0f0f0 !important; 
    
    /* Добавляем отступ снизу, чтобы полоса не прилипала к кнопкам */
    padding-bottom: 15px !important; 
}

/* Для Chrome, Safari, Edge */
.variants-scroll-list::-webkit-scrollbar {
    display: block !important; /* Включаем показ */
    height: 6px !important;    /* Высота полоски (тонкая) */
    background-color: #f0f0f0; /* Цвет дорожки (серый) */
    border-radius: 3px;
}

.variants-scroll-list::-webkit-scrollbar-thumb {
    background-color: #e44000; /* Цвет ползунка (Ваш оранжевый) */
    border-radius: 3px;        /* Закругление */
}

.variants-scroll-list::-webkit-scrollbar-track {
    background-color: #f5f5f5; /* Фон дорожки */
    border-radius: 3px;
}

/* 3. СКРЫВАЕМ ПОЛОСУ ТОЛЬКО НА ТЕЛЕФОНАХ (Там она не нужна) */
@media (max-width: 1023px) {
    .variants-scroll-list {
        scrollbar-width: none !important; /* Firefox */
        padding-bottom: 5px !important;   /* Меньше отступ на моб */
    }
    .variants-scroll-list::-webkit-scrollbar {
        display: none !important; /* Chrome/Safari */
    }
}

/* ================================================================= */
/* === СКРЫТИЕ АКЦИОННОГО БЛОКА "BEST DIVAN" === */
/* ================================================================= */

#best-divan {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ================================================================= */
/* === УДАЛЕНИЕ ЛИШНИХ ОТСТУПОВ И ЛИНИЙ ПЕРЕД ПОДВАЛОМ === */
/* ================================================================= */

/* 1. Скрываем старые блоки-распорки */
.pfooter, 
.pfooter2, 
.pfooter3 {
    display: none !important;
    height: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Убираем линию СНИЗУ (которая на самом деле верхняя граница футера) */
#footer {
    border-top: none !important;
    margin-top: 0 !important; /* Подтягиваем футер выше, если нужно */
}

/* 3. Убираем линию СВЕРХУ (которая может быть у блока контента) */
#content, 
.wrapper, 
.tovar_block {
    border-bottom: none !important;
}

/* Если линия была у блока "best-divan", который мы скрыли, но граница осталась */
#best-divan {
    border: none !important;
}

/* ================================================================= */
/* === СОВРЕМЕННЫЙ ДИЗАЙН ВКЛАДОК (ОБНОВЛЕНИЕ) === */
/* ================================================================= */

/* 1. КОНТЕЙНЕР (ПОЛОСА) */
.tovar_block .tabs_links {
    height: auto !important;        /* Сбрасываем фиксированную высоту */
    background: #fff !important;    /* Белый фон */
    border-bottom: 2px solid #f0f0f0 !important; /* Тонкая линия внизу всей полосы */
    margin-bottom: 20px !important;
    padding: 0 !important;
}

/* 2. СПИСОК (Растягиваем на всю ширину) */
.tovar_block .tabs_links ul {
    display: flex !important;       /* Включаем Flexbox */
    width: 100% !important;         /* На всю ширину */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 3. ЯЧЕЙКА ВКЛАДКИ (Равномерное распределение) */
.tovar_block .tabs_links li {
    flex-grow: 1 !important;        /* Каждая вкладка занимает равную долю */
    flex-basis: 0 !important;       /* Базовый размер 0 для точного деления */
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;    /* Убираем старый серый фон */
}

/* 4. ССЫЛКА (ТЕКСТ ВКЛАДКИ) */
.tovar_block .tabs_links li a {
    display: flex !important;       /* Чтобы центрировать текст вертикально */
    align-items: center !important;
    justify-content: center !important;
    
    height: 55px !important;        /* Высота кнопки */
    padding: 0 5px !important;      /* Небольшие отступы по бокам */
    
    color: #666 !important;         /* Цвет неактивной вкладки (серый) */
    font-size: 13px !important;     /* Аккуратный размер шрифта */
    font-weight: 600 !important;    /* Полужирный */
    text-transform: uppercase !important;
    text-decoration: none !important;
    
    background: none !important;    /* Убираем фоны */
    border: none !important;        /* Убираем старые рамки */
    
    /* ПОДГОТОВКА К ПОДЧЕРКИВАНИЮ */
    position: relative !important;
    transition: color 0.3s ease !important;
}

/* Линия подчеркивания (скрытая по умолчанию) */
.tovar_block .tabs_links li a::after {
    content: "" !important;
    position: absolute !important;
    bottom: -2px; /* Накладываем на нижнюю линию контейнера */
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;         /* Толщина активной линии */
    background-color: #e44000 !important; /* Ваш фирменный оранжевый */
    transform: scaleX(0) !important; /* Скрыта (масштаб 0) */
    transition: transform 0.3s ease !important;
}

/* 5. ЭФФЕКТ ПРИ НАВЕДЕНИИ (HOVER) */
.tovar_block .tabs_links li:hover a {
    color: #000 !important;         /* Текст чернеет */
    background: #fcfcfc !important; /* Очень легкий фон */
}

/* 6. АКТИВНАЯ ВКЛАДКА */
.tovar_block .tabs_links li.active a {
    color: #e44000 !important;      /* Текст оранжевый (или черный, как хотите) */
    background: none !important;    /* Без фона */
    border: none !important;        /* Без рамок */
}

/* Показываем линию у активной вкладки */
.tovar_block .tabs_links li.active a::after {
    transform: scaleX(1) !important; /* Линия появляется */
}

/* Специфический стиль для вкладки "Курьер" (если она была желтой) - теперь унифицируем */
.tovar_block .tabs_links li.usluga-kurer, 
.tovar_block .tabs_links li.usluga-kurer a {
    background: none !important;
}

/* ================================================================= */
/* === АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ (ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ) === */
/* ================================================================= */
@media (max-width: 992px) {
    /* На телефонах вкладки не влезут по ширине, делаем ленту */
    .tovar_block .tabs_links ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;  /* Скролл */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;        /* Скрываем скроллбар Firefox */
    }
    
    .tovar_block .tabs_links ul::-webkit-scrollbar {
        display: none;                /* Скрываем скроллбар Chrome */
    }

    .tovar_block .tabs_links li {
        flex-grow: 0 !important;      /* Не растягивать */
        flex-basis: auto !important;
        white-space: nowrap !important; /* Текст в одну строку */
    }

    .tovar_block .tabs_links li a {
        padding: 0 20px !important;   /* Больше отступов для пальца */
        font-size: 12px !important;
    }
}

/* ================================================================= */
/* === ВКЛАДКА "ИНФОРМАЦИЯ": ВЫРАВНИВАНИЕ ВЛЕВО === */
/* ================================================================= */

/* 1. Сбрасываем контейнер списка */
#info .list {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 0 !important;
}

/* 2. Настраиваем таблицу (чтобы она не растягивалась) */
#info .list table {
    width: auto !important;         /* Ширина по содержимому, а не 100% */
    border-collapse: collapse !important;
    margin: 0 !important;
}

/* 3. Настраиваем ячейки (Левая колонка - Названия) */
#info .list table td {
    text-align: left !important;    /* Текст слева */
    vertical-align: top !important; /* Прижать к верху */
    background: none !important;    /* Убираем точки/линии фона */
    padding: 6px 0 !important;      /* Отступы сверху/снизу */
    border: none !important;        /* Убираем рамки */
    white-space: nowrap !important; /* Запрещаем разрыв слов в заголовках */
    font-weight: 600 !important;    /* Чуть жирнее для названий */
    color: #333 !important;
}

/* 4. Правая колонка (Значения) */
#info .list table td + td {
    padding-left: 40px !important;  /* Отступ между Названием и Значением */
    text-align: left !important;    /* Принудительно влево */
    width: auto !important;         /* Сброс ширины */
    white-space: normal !important; /* Текст значений может переноситься */
    font-weight: 400 !important;    /* Обычный шрифт */
    color: #555 !important;
}

/* 5. Убираем лишние вложенные таблицы, если они есть */
#info .list table table {
    margin: 0 !important;
    width: 100% !important;
}

/* ================================================================= */
/* === ТАБЛИЦА "ИНФОРМАЦИЯ": ОБНОВЛЕНИЕ V2 (ШРИФТЫ И РЕГИСТР) === */
/* ================================================================= */

/* 1. Настраиваем ВСЮ таблицу */
#info .list table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

/* 2. ЛЕВАЯ КОЛОНКА (Названия параметров) */
#info .list table td {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    
    white-space: nowrap !important;
    vertical-align: top !important;
    text-align: left !important;
    padding-right: 10px !important; /* Чуть меньше отступ до двоеточия */
    
    /* === ИСПРАВЛЕНИЕ ШРИФТА === */
    font-weight: 400 !important;    /* Убираем лишнюю жирность, чтобы двоеточия были тонкими */
    font-size: 14px !important;     /* Оптимальный размер */
    color: #333 !important;         /* Темно-серый цвет (не чисто черный) */
    border: none !important;
}

/* 3. ЗАГЛАВНАЯ БУКВА (Делаем первую букву большой) */
#info .list table td::first-letter {
    text-transform: uppercase !important;
}

/* 4. ДОБАВЛЯЕМ ДВОЕТОЧИЕ ДЛЯ ПЕРВОЙ СТРОКИ (Производитель) */
#info .list table tr:first-child td:first-child::after {
    content: ":" !important;
}

/* 5. ПРАВАЯ КОЛОНКА (Значения) */
#info .list table td + td {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    
    white-space: normal !important; 
    padding-left: 0 !important;
    text-align: left !important;
    
    font-weight: 400 !important;
    color: #555 !important;         /* Чуть светлее названий */
    
    /* Сбрасываем эффекты левой колонки для правой */
    text-transform: none !important; 
}

/* Сбрасываем ::first-letter для правой колонки, чтобы там не менялся регистр */
#info .list table td + td::first-letter {
    text-transform: none !important;
}

/* ================================================================= */
/* === СТИЛИЗАЦИЯ ВКЛАДКИ "ХАРАКТЕРИСТИКИ" === */
/* ================================================================= */

/* 1. Общие настройки текста */
#teh_chars {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px !important;     /* Размер как в Информации */
    line-height: 1.6 !important;    /* Межстрочный интервал */
    color: #333 !important;         /* Темно-серый цвет */
    font-weight: 400 !important;    /* Нормальная толщина */
    padding: 10px 0 !important;
}

/* 2. Настройка строк (абзацев) */
#teh_chars p, 
#teh_chars div {
    margin: 0 0 8px 0 !important;   /* Отступ снизу между строками */
    padding: 0 !important;
}

/* 3. Если там есть списки */
#teh_chars ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#teh_chars li {
    margin-bottom: 8px !important;
}

/* Отступы между строками характеристик */
#teh_chars .char-line {
    margin-bottom: 8px !important; /* Расстояние между строками */
    line-height: 1.5 !important;
    color: #333 !important;
}

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

/* 1. Сбрасываем отступ у главного контейнера вкладки */
#info {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 2. Настраиваем отступ у внутреннего списка */
/* Если полоса вкладок имеет margin-bottom: 20px, то здесь ставим 20px, */
/* чтобы в сумме было 40px (или меньше, если нужно визуально ближе) */
#info .list {
    padding-top: 10px !important; /* Уменьшаем с 20-30px до 10px */
    margin-top: 0 !important;
}

/* 3. Гарантируем, что таблица не добавляет свой отступ */
#info .list table {
    margin-top: 0 !important;
}

/* ================================================================= */
/* === ОФОРМЛЕНИЕ ВКЛАДКИ "ОПЛАТА И ДОСТАВКА" (GRID LAYOUT) === */
/* ================================================================= */

/* 1. Сетка контейнера */
.delivery-sections-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Отступы между карточками */
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* 2. Карточка (Блок текста) */
.del-card {
    background: #fff;
    border: 1px solid #eee; /* Тонкая рамка как у соседей */
    border-radius: 8px;
    padding: 25px;
    width: calc(50% - 10px); /* 2 колонки */
    box-sizing: border-box;
    transition: box-shadow 0.3s ease;
}

.del-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Легкая тень при наведении */
}

/* Блок на всю ширину */
.del-card.full-width {
    width: 100%;
}

/* Блок с предупреждением (красноватый) */
.del-card.warning {
    border-left: 4px solid #e44000;
    background: #fffaf7; /* Очень легкий оранжевый оттенок */
}

/* 3. Заголовок карточки */
.del-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e44000; /* Оранжевая линия под заголовком */
    display: inline-block;
}

/* 4. Текст */
.del-text p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #333 !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
}

.del-text p:last-child {
    margin-bottom: 0 !important;
}

/* Жирный текст внутри */
.del-text strong {
    font-weight: 700;
    color: #000;
}

/* Мелкие примечания */
.del-note, .del-small {
    font-size: 13px !important;
    color: #666 !important;
    font-style: italic;
    margin-top: 8px !important;
}

/* 5. АДАПТИВНОСТЬ (На телефоне в 1 колонку) */
@media (max-width: 1023px) {
    .del-card {
        width: 100% !important;
        padding: 20px 15px !important;
    }
    
    .del-title {
        font-size: 15px !important;
        width: 100%; /* Линия на всю ширину на мобильном */
    }
}

/* ================================================================= */
/* === ОФОРМЛЕНИЕ ВКЛАДКИ "КОНТАКТЫ" (MODERN) === */
/* ================================================================= */

.contacts-tab-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
    width: 100%;
}

/* Карточка */
.ct-card {
    flex: 1 1 300px; /* Адаптивная ширина */
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

/* Заголовок */
.ct-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e44000;
    display: inline-block;
}

/* Строки контактов */
.ct-row {
    margin-bottom: 18px;
    font-size: 14px;
    display: flex;
    flex-direction: column; /* На телефоне друг под другом, на ПК поправим ниже */
    gap: 4px;
}

.ct-label {
    color: #888;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Обертка для телефона и времени */
.ct-phone-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

/* Сам телефон */
.ct-phone {
    font-size: 20px !important;
    font-weight: 700;
    color: #333 !important;
    text-decoration: none !important;
    line-height: 1.2;
}

/* Ссылка (email) */
.ct-link {
    font-size: 16px !important;
    color: #e44000 !important;
    text-decoration: none !important;
    border-bottom: 1px dotted #e44000;
}

/* Примечание (время работы) */
.ct-note {
    font-size: 13px;
    color: #999;
}

/* Блок праздников */
.ct-holiday-alert {
    background: #fff9f5; /* Очень легкий оранжевый фон */
    border-left: 3px solid #e44000;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

/* ================================================================= */
/* === СОЦСЕТИ: ВАРИАНТ "АНТИ-УДАЛЕНИЕ" (ЧЕРЕЗ CSS МАСКИ) === */
/* ================================================================= */

.ct-socials-block {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.ct-label-sm {
    font-size: 12px;
    color: #888;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 600;
}

.ct-socials-links {
    display: flex;
    gap: 15px;
}

/* ================================================================= */
/* === СОЦСЕТИ: ФИНАЛЬНЫЙ ВАРИАНТ (БУКВЫ VK + БЕЗ ЧЕРТОЧЕК) === */
/* ================================================================= */

/* 1. КНОПКА-КОНТЕЙНЕР (ИСПРАВЛЕНИЕ ЧЕРТОЧЕК) */
.soc-safe-link {
    display: inline-block !important;
    width: 50px !important;
    height: 50px !important;
    border: 1px solid #ddd !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    
    /* === ГЛАВНОЕ ИСПРАВЛЕНИЕ ДЛЯ СКРЫТИЯ ЧЕРТОЧЕК === */
    font-size: 0 !important;          /* Размер текста 0 */
    line-height: 0 !important;
    color: transparent !important;    /* Текст и подчеркивание прозрачные */
    text-decoration: none !important; /* Принудительно убираем подчеркивание */
    overflow: hidden !important;      /* Обрезаем всё лишнее */
}

/* 2. РИСУЕМ САМУ ИКОНКУ ВНУТРИ */
.soc-safe-link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Центрируем */
    
    width: 28px;  
    height: 28px;
    
    background-color: #777; /* Цвет иконки (серый) */
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color 0.3s ease;
}

/* 3. НОВАЯ ИКОНКА VK (ПРОСТО БУКВЫ "VK") */
.soc-safe-link.vk::before {
    /* Используем SVG с обычным текстом "VK" */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctext x='50%25' y='52%25' dominant-baseline='middle' text-anchor='middle' font-family='Arial, Helvetica, sans-serif' font-weight='900' font-size='14px' fill='black'%3EVK%3C/text%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctext x='50%25' y='52%25' dominant-baseline='middle' text-anchor='middle' font-family='Arial, Helvetica, sans-serif' font-weight='900' font-size='14px' fill='black'%3EVK%3C/text%3E%3C/svg%3E");
    
    width: 32px; /* Чуть шире для букв */
}

/* 4. ИКОНКА INSTAGRAM (Оставляем контурную, она хорошая) */
.soc-safe-link.inst::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'%3E%3C/rect%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'%3E%3C/path%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'%3E%3C/line%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'%3E%3C/rect%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'%3E%3C/path%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'%3E%3C/line%3E%3C/svg%3E");
}

/* 5. ЭФФЕКТЫ ПРИ НАВЕДЕНИИ */
.soc-safe-link:hover {
    border-color: #e44000 !important;
    transform: translateY(-2px);
}

.soc-safe-link:hover::before {
    background-color: #e44000 !important;
}

/* ================================================================= */
/* === КНОПКА "ОСТАВИТЬ ОТЗЫВ" (КОНТУРНЫЙ СТИЛЬ) === */
/* ================================================================= */

#reviewlink {
    /* 1. Сбрасываем старые размеры и картинку */
    background-image: none !important; 
    width: auto !important;          
    height: auto !important;         
    
    /* 2. Основной стиль (Спокойное состояние) */
    background-color: #ffffff !important;   /* Белый фон */
    border: 2px solid #e44000 !important;   /* Оранжевая рамка */
    color: #e44000 !important;              /* Оранжевый текст */
    
    /* 3. Типографика */
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    
    /* 4. Форма и отступы */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 35px !important;
    margin: 20px 0 30px 0 !important;
    border-radius: 50px !important;   /* Овальная форма */
    
    /* 5. Анимация */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-indent: 0 !important;
    box-shadow: none !important; /* Без тени в обычном состоянии */
}

/* Иконка карандаша */
#reviewlink::before {
    content: "✎";
    font-size: 18px;
    margin-right: 10px;
    font-weight: 400; /* Иконка чуть тоньше текста */
}

/* === ЭФФЕКТ ПРИ НАВЕДЕНИИ (HOVER) === */
#reviewlink:hover {
    background-color: #e44000 !important; /* Заливаем оранжевым */
    color: #ffffff !important;            /* Текст становится белым */
    border-color: #e44000 !important;
    
    /* Легкая тень и всплытие */
    box-shadow: 0 5px 15px rgba(228, 64, 0, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* === ЭФФЕКТ ПРИ НАЖАТИИ === */
#reviewlink:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* ================================================================= */
/* === МОДЕРНИЗАЦИЯ МОДАЛЬНОГО ОКНА ОТЗЫВОВ (CSS ONLY) === */
/* ================================================================= */

/* 1. Настраиваем обертку окна (ТОЛЬКО если внутри есть textarea) */
#factory_choice_popup:has(textarea) .popup_wrap {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
    padding: 40px !important;
    max-width: 600px !important; /* Узкое окно только для отзывов */
    margin: 0 auto !important;
}

/* 2. Заголовок */
#factory_choice_popup:has(textarea) .popup_heading {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    margin-bottom: 25px !important;
    color: #333 !important;
    text-transform: uppercase !important;
    border: none !important;
}

/* 3. Тексты */
#factory_choice_popup:has(textarea) form {
    font-family: 'Open Sans', sans-serif !important;
    color: #555 !important;
}

/* 4. Поля ввода */
#factory_choice_popup:has(textarea) input[type="text"],
#factory_choice_popup:has(textarea) textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #f9f9f9 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    color: #333 !important;
    outline: none !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

#factory_choice_popup:has(textarea) input[type="text"]:focus,
#factory_choice_popup:has(textarea) textarea:focus {
    background: #fff !important;
    border-color: #ff9933 !important;
    box-shadow: 0 2px 8px rgba(255, 153, 51, 0.15) !important;
}

#factory_choice_popup:has(textarea) textarea {
    height: 100px !important;
    resize: vertical !important;
}

/* 5. Капча */
#factory_choice_popup:has(textarea) .captcha-block {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}

#factory_choice_popup:has(textarea) input[name="captcha_code"] {
    width: 100px !important;
    margin-bottom: 0 !important;
    margin-left: 10px !important;
    text-align: center !important;
    letter-spacing: 2px !important;
    font-weight: bold !important;
}

#factory_choice_popup:has(textarea) img[src*="captcha"] {
    border-radius: 6px !important;
    cursor: pointer !important;
}

/* 7. "Ломающие" стили таблиц - применяем ТОЛЬКО если есть textarea */
#factory_choice_popup:has(textarea) table,
#factory_choice_popup:has(textarea) tbody,
#factory_choice_popup:has(textarea) tr,
#factory_choice_popup:has(textarea) td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    text-align: left !important;
}

#factory_choice_popup:has(textarea) td:first-child {
    padding-bottom: 5px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-top: 10px !important;
}

/* ================================================================= */
/* === КНОПКА "ОТПРАВИТЬ ОТЗЫВ" (FIX для DIV #sendreview) === */
/* ================================================================= */

/* 1. Сбрасываем старые inline-стили и наводим красоту */
#factory_choice_popup #sendreview {
    /* Размеры и положение */
    display: flex !important;          /* Чтобы выровнять текст по центру */
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;            /* На всю ширину контейнера */
    max-width: 280px !important;       /* Ограничиваем ширину */
    height: auto !important;           /* Сбрасываем фиксированную высоту */
    margin: 20px auto 0 auto !important; /* Центрируем саму кнопку */
    padding: 14px 20px !important;     /* Внутренние отступы */
    
    /* Оформление */
    background: #e44000 !important;    /* Фирменный оранжевый */
    background-image: none !important; /* Убираем старые картинки, если есть */
    border-radius: 50px !important;    /* Закругленные углы (капсула) */
    box-shadow: 0 5px 15px rgba(228, 64, 0, 0.3) !important; /* Тень */
    border: none !important;
    
    /* Текст */
    color: #fff !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* 2. Убираем лишние отступы у текста внутри кнопки */
#factory_choice_popup #sendreview p {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: inherit !important;
    font-size: inherit !important;
}

/* 3. Эффект при наведении (Hover) */
#factory_choice_popup #sendreview:hover {
    background: #c93800 !important;    /* Темнеет */
    transform: translateY(-2px) !important; /* Всплывает */
    box-shadow: 0 8px 20px rgba(228, 64, 0, 0.4) !important;
}

/* 4. Эффект нажатия */
#factory_choice_popup #sendreview:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 5px rgba(228, 64, 0, 0.4) !important;
}

/* ================================================================= */
/* === ФИНАЛЬНЫЙ ВАРИАНТ: FLEX-РЯД + ТОНКИЙ СКРОЛЛ (3px) === */
/* ================================================================= */

/* 1. КОНТЕЙНЕР (Ряд + Отступ от иконок) */
.tovar_block .miniaturs {
    /* 1. Основа Flex */
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    
    /* УДАЛЯЕМ justify-content: center, так как он обрезает левый край при переполнении */
    /* justify-content: center !important; --- ЭТУ СТРОКУ УБРАТЬ ИЛИ ЗАКОММЕНТИРОВАТЬ */
    
    /* 2. ЗАЩИТА ОТ НАЕЗДА НА ИКОНКИ СЛЕВА */
    margin-left: 80px !important; 
    
    /* 3. КОРРЕКЦИЯ ШИРИНЫ */
    width: calc(100% - 80px) !important; 
    
    /* Отступы */
    padding: 10px 0 !important; 
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    
    border: none !important;
}

/* 1.5. МАГИЯ "УМНОГО" ЦЕНТРИРОВАНИЯ (Добавьте этот блок) */
/* Эти невидимые элементы работают как пружины по краям:
   - Если фото мало: пружины разжимаются и толкают фото в центр.
   - Если фото много: пружины сжимаются в ноль, и скролл работает нормально от левого края. */
.tovar_block .miniaturs::after {
    content: '' !important;
    margin: auto !important; /* Занимает всё свободное место справа */
    flex: 0 0 auto !important;
}

.tovar_block .miniaturs::before {
    content: '' !important;
    margin: auto !important; /* Занимает всё свободное место слева */
    flex: 0 0 auto !important;
}

/* 2. ФОТОГРАФИИ (Плитки) */
.tovar_block .miniaturs li {
    display: block !important;
    float: none !important;
    flex: 0 0 auto !important; /* Запрет сжатия */
    
    vertical-align: top !important;
    margin: 0 5px 0 0 !important;
    
    /* Поднимаем фото наверх, чтобы нажимались */
    position: relative !important;
    z-index: 20 !important;
}

/* 3. УБИВАЕМ СТАРЫЕ КНОПКИ (которые могут перекрывать фото) */
.tovar_block .jcarousel-prev,
.tovar_block .jcarousel-next,
.tovar_block .prev,
.tovar_block .next {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    z-index: -1 !important;
}

/* ================================================================= */
/* === НАСТРОЙКА ТОНКОГО СКРОЛЛА (3px) === */
/* ================================================================= */

/* 1. ВЫСОТА ПОЛОСЫ (Теперь это будет работать!) */
.tovar_block .miniaturs::-webkit-scrollbar {
    height: 6px !important;            /* Тонкая линия */
    background-color: transparent !important;
}

/* 2. ФОН ДОРОЖКИ */
.tovar_block .miniaturs::-webkit-scrollbar-track {
    background-color: #f5f5f5 !important;
    border-radius: 2px !important;
}

/* 3. ПОЛЗУНОК (Движок) */
.tovar_block .miniaturs::-webkit-scrollbar-thumb {
    background-color: #dcdcdc !important; /* Серый в покое */
    border-radius: 2px !important;
    transition: background-color 0.3s ease !important;
}

/* 4. ЦВЕТ ПРИ НАВЕДЕНИИ */
.tovar_block .miniaturs::-webkit-scrollbar-thumb:hover {
    background-color: #e44000 !important; /* Оранжевый при наведении */
}

/* 5. УБИРАЕМ КНОПКИ-СТРЕЛКИ СКРОЛЛА (для стиля 3px они не нужны) */
.tovar_block .miniaturs::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ================================================================= */
/* === ФИНАЛЬНЫЙ ФИКС ВЫБОРА РАЗМЕРОВ (ВИДИМОСТЬ + ОТСТУПЫ) === */
/* ================================================================= */

/* 1. Основной контейнер */
#tovar_block .razmselect {

    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
	
	#tovar_block .razmselect .name {
    display: none !important;
}
    
    /* УМЕНЬШАЕМ ОТСТУП СНИЗУ (было 20px, ставим 5px) */
    margin: 15px 0 5px 0 !important; 
    
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

/* 2. Оформление колонок (Ширина, Глубина, Высота) */
#tovar_block .razmselect .sel {
    flex: 1 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* 3. САМИ ПОЛЯ (ИСПРАВЛЕНИЕ ВИДИМОСТИ ЦИФР) */
#tovar_block .razmselect .sel select {
    display: block !important;
    width: 100% !important;
    height: 46px !important;       /* Высота плашки */
    
    /* ЦЕНТРИРУЕМ ЦИФРЫ ПО ВЕРТИКАЛИ */
    line-height: 46px !important;  /* Должно совпадать с height */
    padding: 0 30px 0 10px !important; 
    
    background-color: #ffffff !important; 
    border: 2px solid #eeeeee !important; 
    border-radius: 10px !important;    /* КРУГЛЫЕ УГЛЫ */
    
    /* ЦВЕТ И РАЗМЕР ЦИФР (МАКСИМАЛЬНАЯ ВИДИМОСТЬ) */
    font-size: 16px !important;
    color: #000000 !important;     /* Чистый черный цвет */
    font-weight: 700 !important;   /* Жирный шрифт */
    
    -webkit-appearance: none !important;
    appearance: none !important;
    
    /* Оранжевая стрелочка */
    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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    
    cursor: pointer !important;
    outline: none !important;
}

/* 4. Наведение */
#tovar_block .razmselect .sel select:hover {
    border-color: #e44000 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* 5. Убираем лишние отступы у конфигуратора ниже, если они есть */
#configurator_block, .configurator {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ================================================================= */
/* === ПОЛНЫЙ КОД ОКНА ТКАНЕЙ: СКРЫТИЕ КОЛОНКИ + КОМПАКТНАЯ ПАНЕЛЬ === */
/* ================================================================= */

/* 1. Настройка обертки окна (делаем отступ снизу под панель) */
#factory_choice_popup .popup_wrap {
    padding-bottom: 80px !important;
    position: relative !important;
    display: block !important;
}

/* 2. СКРЫВАЕМ ЛЕВУЮ КОЛОНКУ (Фото товара и цены исчезают) */
#factory_choice_popup .left {
    display: none !important;
}

/* 3. РАСТЯГИВАЕМ ПРАВУЮ КОЛОНКУ (Список тканей на всю ширину) */
#factory_choice_popup .right {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 4. НИЖНЯЯ ФИКСИРОВАННАЯ ПАНЕЛЬ */
.fabric-bottom-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 960px !important; /* Ограничиваем ширину */
    height: 70px !important;      /* Компактная высота */
    background: #fff !important;
    box-shadow: 0 -5px 25px rgba(0,0,0,0.15) !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    border-top: 1px solid #e5e5e5 !important;
}

/* 5. КОНТЕЙНЕР СПИСКА ТКАНЕЙ */
.fabric-bottom-bar ul.radios {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 10px !important;
    align-items: center !important;
    height: 100% !important;
}

/* 6. КОМПАКТНАЯ КАРТОЧКА ТКАНИ (LI) */
.fabric-bottom-bar ul.radios li {
    display: flex !important;
    align-items: center !important;
    background: #f4f4f4 !important;
    padding: 4px 8px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    margin: 0 !important;
    width: 220px !important;     /* Фиксированная ширина */
    height: 46px !important;     /* Фиксированная высота */
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Обрезаем лишний текст */
}

/* Картинка ткани */
.fabric-bottom-bar ul.radios li img {
    width: 36px !important;
    height: 36px !important;
    object-fit: cover !important;
    border-radius: 3px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    border: 1px solid #ccc !important;
}

/* Блок с текстом (Обрезаем лишнее) */
.fabric-bottom-bar ul.radios li .txt {
    font-size: 10px !important;
    line-height: 1.1 !important;
    color: #555 !important;
    white-space: normal !important; 
    height: 30px !important;     /* Показываем только 2-3 строки */
    overflow: hidden !important; /* Остальное скрываем */
    display: block !important;
}

/* Заголовки "Основной", "Компаньон" */
.fabric-bottom-bar ul.radios li .hh {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 9px !important;
    color: #999 !important;
    margin-bottom: 2px !important;
    display: block !important;
}

/* Кнопка удаления (крестик) */
.fabric-bottom-bar ul.radios li .del {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    background: transparent !important;
    color: #d03d33 !important;
    width: 14px !important;
    height: 14px !important;
    text-align: center !important;
    line-height: 14px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    text-decoration: none !important;
    opacity: 0.6 !important;
}
.fabric-bottom-bar ul.radios li .del:hover {
    opacity: 1 !important;
}

/* 7. КНОПКА "Я ВЫБРАЛ" */
.fabric-bottom-bar #choosebtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 46px !important;
    font-size: 14px !important;
    padding: 0 25px !important;
    background: #e44000 !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 5px rgba(228, 64, 0, 0.3) !important;
    margin-left: 10px !important;
}
.fabric-bottom-bar #choosebtn:hover {
    background: #cc3900 !important;
}

/* ================================================================= */
/* === УБИРАЕМ ЛИШНЮЮ ЛИНИЮ ПОД КАТЕГОРИЯМИ === */
/* ================================================================= */

/* 1. Убираем границы у всей таблицы и ячеек */
#factory_choice_popup .clothes_category,
#factory_choice_popup .clothes_category td,
#factory_choice_popup .clothes_category th,
#factory_choice_popup .clothes_category tr {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 2. Убираем лишние отступы снизу, чтобы подтянуть контент */
#factory_choice_popup .clothes_category {
    margin-bottom: 10px !important; /* Был большой отступ, делаем меньше */
    padding-bottom: 0 !important;
}

/* На всякий случай, если линия сделана через псевдоэлемент */
#factory_choice_popup .clothes_category:after,
#factory_choice_popup .clothes_category tr:after {
    display: none !important;
}

/* ================================================================= */
/* === СОВРЕМЕННЫЙ ДИЗАЙН: ВЕРХНИЕ ФИЛЬТРЫ (FIX ДЛЯ ТАБЛИЦЫ) === */
/* ================================================================= */

/* 1. Сбрасываем таблицу, превращаем её в гибкий блок */
#factory_choice_popup .factorys_types,
#factory_choice_popup .factorys_types tbody,
#factory_choice_popup .factorys_types tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 5px 0 !important;
}

/* 2. Превращаем ячейки (td) в стильные кнопки */
#factory_choice_popup .factorys_types td {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    height: 34px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    
    /* ПЕРЕКРЫВАЕМ СТАРЫЕ ЦВЕТА */
    background: #fff !important; 
    border: 1px solid #ddd !important;
    border-radius: 50px !important; /* Делаем овальными */
    
    /* Настройка текста */
    color: #555 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    
    /* Эффекты */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    transition: all 0.2s ease !important;
    width: auto !important; /* Чтобы кнопка была по ширине текста */
}

/* 3. Эффект при наведении (Оранжевая рамка и текст) */
#factory_choice_popup .factorys_types td:hover {
    border-color: #e44000 !important;
    color: #e44000 !important;
    background: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(228, 64, 0, 0.15) !important;
}

/* 4. Попытка выделить активный элемент (если скрипт добавляет класс) */
/* Если скрипт меняет inline-style (background), мы можем попробовать поймать это,
   но лучше оставить всё белым для чистоты стиля. */

/* Скрываем лишние отступы у контейнера */
#factory_choice_popup .factorys_types_block {
    margin-bottom: 20px !important;
    padding: 0 !important;
    background: transparent !important;
}

/* ================================================================= */
/* === FIX: ВОССТАНОВЛЕНИЕ ТЕКСТА В КНОПКАХ ФИЛЬТРОВ === */
/* ================================================================= */

/* 1. Основной стиль кнопок (td) */
#factory_choice_popup .factorys_types td {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    height: 34px !important;
    padding: 0 15px !important;
    margin: 0 !important;
    
    background: #fff !important; 
    border: 1px solid #ddd !important;
    border-radius: 50px !important;
    
    /* ВАЖНО: Задаем цвет и сбрасываем возможные скрытия */
    color: #333 !important;
    text-indent: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Эффекты */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    width: auto !important;
}

/* 2. ГЛАВНОЕ ИСПРАВЛЕНИЕ: Красим любой текст внутри кнопки */
/* Это правило затронет span, b, font, a и любые другие теги внутри td */
#factory_choice_popup .factorys_types td * {
    color: #333 !important;       /* Темно-серый цвет текста */
    font-size: 11px !important;   /* Размер шрифта */
    font-weight: 700 !important;  /* Жирный */
    text-transform: uppercase !important;
    background: transparent !important; /* Убираем фон у вложенных элементов */
    text-decoration: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important; /* Гарантируем, что текст не скрыт */
}

/* 3. Эффект при наведении (Оранжевый) */
#factory_choice_popup .factorys_types td:hover {
    border-color: #e44000 !important;
    background: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(228, 64, 0, 0.15) !important;
}

/* Меняем цвет текста при наведении тоже */
#factory_choice_popup .factorys_types td:hover,
#factory_choice_popup .factorys_types td:hover * {
    color: #e44000 !important;
}

/* ================================================================= */
/* === СТИЛИ ДЛЯ РАСКРЫВАЮЩЕГОСЯ ОПИСАНИЯ (АККОРДЕОН) === */
/* ================================================================= */

/* 1. Блок описания (Свернутый вид по умолчанию) */
#clothdesc, .fabric-desc-accordion {
    display: block !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Ограничиваем высоту (примерно 2 строки) */
    max-height: 42px !important; 
    overflow: hidden !important;
    
    /* Оформление */
    margin: 15px 0 20px 0 !important;
    padding-right: 30px !important; /* Место для стрелки */
    border-bottom: 1px dashed #ddd; /* Пунктирная линия снизу */
    
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #555 !important;
    cursor: pointer !important; /* Курсор "рука" */
    
    transition: max-height 0.4s ease-out !important; /* Плавность */
}

/* 2. Состояние "РАСКРЫТО" (добавляется скриптом) */
#clothdesc.open, .fabric-desc-accordion.open {
    max-height: 1000px !important; /* Раскрываем на всю высоту */
    border-bottom: none !important;
    transition: max-height 0.6s ease-in !important;
}

/* 3. Стрелка-индикатор справа */
#clothdesc::after, .fabric-desc-accordion::after {
    content: '▼';
    position: absolute;
    right: 5px;
    top: 0;
    color: #e44000; /* Ваш фирменный оранжевый */
    font-size: 14px;
    transition: transform 0.3s;
}

/* Поворот стрелки при раскрытии */
#clothdesc.open::after, .fabric-desc-accordion.open::after {
    transform: rotate(180deg);
}

/* 4. Эффект "затухания" текста внизу (градиент), когда свернуто */
#clothdesc:not(.open)::before, .fabric-desc-accordion:not(.open)::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
}

/* 5. Стиль активной кнопки фильтра (Оранжевый) */
#factory_choice_popup .factorys_types td.active-fabric {
    background: #e44000 !important;
    border-color: #e44000 !important;
}
#factory_choice_popup .factorys_types td.active-fabric * {
    color: #fff !important;
}

/* ================================================================= */
/* === ГЛОБАЛЬНЫЙ РЕДИЗАЙН ОКНА ВЫБОРА ТКАНЕЙ (MODERN UI) === */
/* ================================================================= */

/* --- 1. УБИРАЕМ "ГРУБУЮ" ОРАНЖЕВУЮ ПОЛОСУ --- */
/* Убираем старую границу и делаем легкую тень для блока фильтров */
#factory_choice_popup .factorys_types_block {
    border-bottom: none !important; /* Убираем толстую линию */
    box-shadow: 0 10px 20px -10px rgba(0,0,0,0.05) !important; /* Легкая тень вниз */
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
}

/* --- 2. ТЕКСТ "ВНИМАНИЕ" И "ЦЕНЫ ПО КАТЕГОРИЯМ" --- */
/* Делаем текст легким, серым и аккуратным */

/* Блок с предупреждением */
#factory_choice_popup .red {
    color: #999 !important; /* Вместо красного - спокойный серый */
    font-size: 11px !important;
    font-weight: 400 !important;
    text-align: center !important;
    display: block !important;
    margin: 10px 0 !important;
    text-transform: none !important; /* Убираем Caps Lock если есть */
}

/* Заголовки (Цены по категориям и т.д.) */
#factory_choice_popup .heading2, 
#factory_choice_popup h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-align: center !important;
    margin-bottom: 5px !important;
    text-transform: none !important; /* Обычный регистр букв */
}

/* Инструкция "Для выбора нажмите..." */
#factory_choice_popup .tkanp, 
#factory_choice_popup p {
    font-size: 13px !important;
    color: #888 !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* --- 3. ПОЛОСА КАТЕГОРИЙ (ЦИФРЫ 1, 2, 3... ИЛИ ТЕКСТ) --- */

/* 1. Контейнер таблицы (ОСТАВЛЯЕМ СТАРЫЙ) */
#factory_choice_popup .clothes_category_heading {
    border-collapse: separate !important;
    border-spacing: 10px 0 !important; /* Расстояние между кнопками */
    margin: 0 auto 10px auto !important; /* Центрируем + отступ снизу */
    width: auto !important; 
    display: table !important;
}

/* Скрываем границы ячеек (ОСТАВЛЯЕМ СТАРОЕ) */
#factory_choice_popup .clothes_category_heading td {
    border: none !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

/* Первая ячейка с текстом "КАТЕГОРИЯ" (ОСТАВЛЯЕМ СТАРОЕ) */
#factory_choice_popup .clothes_category_heading td:first-child {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #bbb !important; /* Светло-серый */
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding-right: 15px !important;
}

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

/* 2. Сами кнопки категорий (Label) */
#factory_choice_popup .clothes_category_heading label.change_checkbox {
    /* === АДАПТИВНОСТЬ (ГЛАВНОЕ ИЗМЕНЕНИЕ) === */
    width: auto !important;          /* Ширина подстраивается под текст */
    min-width: 42px !important;      /* Но не меньше круга */
    height: 42px !important;         /* Высота фиксирована */
    
    /* === ФОРМА КАПСУЛЫ === */
    border-radius: 21px !important;  /* Идеальное скругление */
    padding: 0 12px !important;      /* Воздух по бокам для длинного текста */
    
    /* Выравнивание */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    
    /* Цвета и декор */
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    color: #555 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    
    /* Фикс от прыжков */
    position: relative !important;
    top: 0 !important;
    transform: none !important;
}

/* 3. Текст внутри кнопки */
#factory_choice_popup .clothes_category_heading label span {
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 1px !important;      /* Оптическое выравнивание */
    border: none !important;
    white-space: nowrap !important;  /* Текст строго в одну строку */
    display: block !important;
    line-height: 1 !important;
}

/* 4. Эффект при наведении */
#factory_choice_popup .clothes_category_heading label:hover {
    border-color: #e44000 !important;
    color: #e44000 !important;
    transform: translateY(-2px) !important;
    z-index: 5;
}

/* 5. Активная (выбранная) категория */
#factory_choice_popup .clothes_category_heading label.check {
    background: #e44000 !important;
    border-color: #e44000 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(228, 64, 0, 0.3) !important;
    transform: scale(1.05) !important;
    z-index: 2;
}

#factory_choice_popup .clothes_category_heading label.check span {
    color: #fff !important;
    border-bottom: none !important;
}

/* Скрываем стандартный input, чтобы не ломал верстку */
#factory_choice_popup .clothes_category_heading label input {
    display: none !important;
}

/* --- 4. СПИСОК ТКАНЕЙ (СЕТКА) --- */

/* Заголовок названия коллекции (например, "Alma...") */
#factory_choice_popup .cloth_heading {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
    border-bottom: 1px solid #eee !important;
    padding-bottom: 10px !important;
}

/* Названия цветов под фото (ссылки) */
#factory_choice_popup .cloth_view_list li a {
    text-decoration: none !important; /* Убираем подчеркивание */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Текст названия цвета (вместо оранжевого делаем аккуратным серым) */
#factory_choice_popup .cloth_view_list li .name {
    color: #555 !important;
    font-size: 12px !important;
    margin-top: 8px !important;
    font-weight: 500 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

/* При наведении на картинку текст чуть темнеет */
#factory_choice_popup .cloth_view_list li:hover .name {
    color: #000 !important;
}

/* Сама картинка ткани */
#factory_choice_popup .cloth_view_list li .img img {
    border-radius: 6px !important; /* Закругляем углы */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    transition: transform 0.2s ease !important;
}
#factory_choice_popup .cloth_view_list li:hover .img img {
    /* transform: scale(1.03);  Легкое увеличение при наведении */
}

/* --- 5. ХОВЕР-ОКНО (ЛУПА / ОСНОВНАЯ / КОМПАНЬОН) --- */
/* Делаем стильную полупрозрачную накладку */

#factory_choice_popup .cloth_view_list li .hovered {
    background: rgba(0, 0, 0, 0.6) !important; /* Темный полупрозрачный фон */
    border-radius: 6px !important; /* Повторяем скругление картинки */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important; /* Отступ между элементами */
    opacity: 0; /* Скрыто по умолчанию */
    transition: opacity 0.3s ease !important;
    /* Центрируем блок поверх картинки */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important; /* Высота только по картинке, не закрывая текст */
    max-height: 100px; /* Ограничиваем высоту, чтобы не вылезало на текст */
}

/* Показываем при наведении */
#factory_choice_popup .cloth_view_list li:hover .hovered {
    opacity: 1 !important;
}

/* Иконка лупы */
#factory_choice_popup .cloth_view_list li .hovered .zoom {
    background: url('../images/zoom-w.png') no-repeat center center !important; /* Нужна белая иконка */
    /* Если белой иконки нет, используем фильтр для инверсии черной */
    filter: brightness(0) invert(1); 
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 5px !important;
    cursor: pointer !important;
    opacity: 0.8;
}
#factory_choice_popup .cloth_view_list li .hovered .zoom:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Кнопки "Основная" и "Компаньон" */
#factory_choice_popup .cloth_view_list li .hovered .main,
#factory_choice_popup .cloth_view_list li .hovered .compain {
    background: rgba(255, 255, 255, 0.2) !important; /* Прозрачный белый */
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    color: #fff !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    width: auto !important;
    text-align: center !important;
    transition: all 0.2s !important;
    margin: 2px 0 !important;
    text-decoration: none !important;
}

/* Ховер на кнопки выбора */
#factory_choice_popup .cloth_view_list li .hovered .main:hover,
#factory_choice_popup .cloth_view_list li .hovered .compain:hover {
    background: #e44000 !important; /* Оранжевый при наведении */
    border-color: #e44000 !important;
    color: #fff !important;
}

/* ================================================================= */
/* === ФИНАЛЬНЫЕ ПРАВКИ: УБИРАЕМ ПОЛОСУ И ЧИНИМ КНОПКИ === */
/* ================================================================= */

/* 1. УБИРАЕМ ТОЛСТУЮ ОРАНЖЕВУЮ ПОЛОСУ */
/* Скрываем элемент с классом .line внутри попапа */
#factory_choice_popup .line {
    display: none !important;
    height: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. ЧИНИМ ПРЫГАЮЩУЮ КНОПКУ КАТЕГОРИИ */

/* Скрываем радио-точку внутри кнопки, которая ломает верстку */
#factory_choice_popup .clothes_category_heading label input {
    display: none !important;
}

/* Жестко фиксируем размеры и положение кнопок */
#factory_choice_popup .clothes_category_heading label.change_checkbox {
    display: inline-flex !important; /* Используем inline-flex для идеального центра */
    align-items: center !important;
    justify-content: center !important;
    
    width: 42px !important;  /* Чуть больше, чтобы цифра дышала */
    height: 42px !important;
    
    margin: 0 !important;    /* Убираем любые внешние отступы */
    padding: 0 !important;   /* Убираем внутренние отступы */
    
    vertical-align: middle !important; /* Выравниваем по центру строки */
    position: relative !important;
    top: 0 !important;       /* Запрещаем смещение */
    transform: none !important; /* Сбрасываем трансформации по умолчанию */
}

/* Фикс для активной кнопки (чтобы не уезжала) */
#factory_choice_popup .clothes_category_heading label.check {
    margin: 0 !important;
    top: 0 !important;
    transform: scale(1.1) !important; /* Только легкое увеличение, без смещения вниз */
    z-index: 2;
}

/* Текст (цифра) внутри кнопки */
#factory_choice_popup .clothes_category_heading label span {
    position: static !important; /* Возвращаем в поток */
    line-height: 1 !important;   /* Сбрасываем высоту строки */
    display: block !important;
    margin-top: 1px !important;  /* Микро-коррекция для визуального центра */
}

/* ================================================================= */
/* === ФИКСИРОВАННЫЙ БЛОК ОПИСАНИЯ (БЕЗ СДВИГОВ) === */
/* ================================================================= */

/* 1. Сам блок описания */
#clothdesc, .fabric-desc-accordion {
    /* ЗАЩИТА ОТ СДВИГОВ: Резервируем место */
    display: block !important;
    min-height: 42px !important; /* Высота под 2 строчки текста */
    height: 42px !important;     /* Фиксируем высоту */
    
    /* Скрываем всё, что не влезло (если текста много) */
    overflow: hidden !important; 
    
    /* Позиционирование и отступы (заменяем ими старые пустые отступы) */
    margin-top: 15px !important;
    margin-bottom: 20px !important;
    padding-right: 30px !important; /* Место для стрелки */
    
    /* Пунктирная линия всегда привязана к низу этого блока */
    border-bottom: 1px dashed #cccccc !important;
    
    /* Стили текста */
    color: #555 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    
    /* Плавность и курсор */
    transition: all 0.4s ease !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 2. Если текста нет (пустой блок) — скрываем стрелку, но высоту держим */
#clothdesc:empty, .fabric-desc-accordion:empty {
    cursor: default !important;
}
#clothdesc:empty::after, .fabric-desc-accordion:empty::after {
    display: none !important;
}

/* 3. Стрелочка (появляется только когда есть текст) */
#clothdesc::after, .fabric-desc-accordion::after {
    content: '▼';
    position: absolute;
    right: 5px;
    top: 50%; /* Центрируем стрелку по высоте зарезервированного блока */
    transform: translateY(-50%);
    color: #e44000;
    font-size: 12px;
    transition: transform 0.3s;
}

/* 4. СОСТОЯНИЕ "РАСКРЫТО" (При клике) */
#clothdesc.open, .fabric-desc-accordion.open {
    height: auto !important; /* Разрешаем растягиваться */
    min-height: 42px !important;
    max-height: 1000px !important;
    border-bottom: none !important; /* Можно убрать линию при раскрытии для красоты */
    padding-bottom: 15px !important;
}

/* Поворот стрелки */
#clothdesc.open::after, .fabric-desc-accordion.open::after {
    transform: translateY(-50%) rotate(180deg);
}

/* ================================================================= */
/* === КОМПАКТНЫЙ РЕЖИМ ВЕРХНЕЙ ЧАСТИ (СЖАТИЕ ОТСТУПОВ) === */
/* ================================================================= */

/* 1. Верхний отступ самого окна (от края до фильтров) */
#factory_choice_popup .popup_wrap {
    padding-top: 5px !important; /* Было больше, ставим минимум */
}

/* 2. Блок с кнопками-фильтрами (Чипсы) */
#factory_choice_popup .factorys_types_block {
    margin-bottom: 5px !important;  /* Отступ от фильтров до тени вниз */
    padding-bottom: 5px !important; /* Внутренний отступ до тени */
    /* Тень остается, но блок занимает меньше места */
}

/* 3. Текст "ВНИМАНИЕ! Передача цвета..." */
#factory_choice_popup .red {
    margin-top: 5px !important;    /* Отступ сверху от тени фильтров */
    margin-bottom: -15px !important; /* Отступ снизу до описания */
    line-height: 1.2 !important;   /* Уменьшаем высоту строки */
}

/* 4. Блок описания (Аккордеон) + Пунктирная линия */
#clothdesc, .fabric-desc-accordion {
    margin-top: -15px !important;     /* Отступ сверху от "Внимания" */
    margin-bottom: -10px !important; /* Отступ СНИЗУ (от пунктира до заголовка Цены) */
    padding-bottom: 2px !important; /* Отступ текста до самой пунктирной линии */
    
    /* Уменьшаем высоту самого блока, чтобы он был компактнее в свернутом виде */
    min-height: 36px !important;    
    height: 36px !important;
}
/* Стрелочку тоже чуть поднимем, раз высоту уменьшили */
#clothdesc::after, .fabric-desc-accordion::after {
    top: 45% !important; 
}

/* 5. Заголовок "ЦЕНЫ ПО КАТЕГОРИЯМ..." */
#factory_choice_popup .heading2 {
    margin-top: -10px !important;       /* Убираем отступ сверху */
    margin-bottom: 0px !important;  /* Отступ снизу до текста-подсказки */
    font-size: 16px !important;     /* Чуть уменьшим шрифт для компактности */
    line-height: 1.2 !important;
}

/* 6. Текст "Для выбора цвета нажмите..." (если он есть) */
#factory_choice_popup .tkanp, 
#factory_choice_popup p {
    margin-top: 0 !important;
    margin-bottom: 10px !important; /* Отступ до кружков категорий */
    line-height: 1 !important;
}

/* 7. Полоса с кружками категорий (1, 2, 3...) */
#factory_choice_popup .clothes_category_heading {
    margin-bottom: -20px !important; /* Отступ от кружков до названия ткани */
}

/* 8. Название коллекции ткани (например "Alma...") */
#factory_choice_popup .cloth_heading {
    margin-top: 5px !important;     /* Отступ сверху */
    padding-bottom: 5px !important; /* Отступ снизу до фоток */
    margin-bottom: 10px !important;
    font-size: 15px !important;     /* Чуть компактнее шрифт */
}

/* ================================================================ */
/* === ПРИНУДИТЕЛЬНОЕ СКРЫТИЕ ЛИШНИХ ВКЛАДОК === */
/* ================================================================ */

/* 1. Скрываем вкладку "Дополнительные опции" */
.tovar_block .tabs_links li:has(a[href="#dop_options"]) {
    display: none !important;
}

/* 2. Скрываем вкладку "Дополнительные элементы" */
.tovar_block .tabs_links li:has(a[href="#modules"]) {
    display: none !important;
}

/* --- ЗАПАСНОЙ ВАРИАНТ (Если вдруг браузер старый и не понимает :has) --- */
/* Просто скрываем текст ссылок, чтобы они не мешали */
.tovar_block .tabs_links a[href="#dop_options"],
.tovar_block .tabs_links a[href="#modules"] {
    display: none !important;
}

/* ================================================================ */
/* === МИНИАТЮРЫ: ВЕРСИЯ 2 (ПОЛНОЕ ФОТО + ЦЕНТРОВКА) === */
/* ================================================================ */

/* 1. КОНТЕЙНЕР (ЯЧЕЙКА) */
.tovar_block .miniaturs li {
    /* Размеры: чуть увеличим их, чтобы фото было лучше видно */
    width: 100px !important;  
    height: 100px !important; 
    
    /* Отступы между миниатюрами */
    margin: 0 6px 10px 0 !important; 
    
    /* Оформление: убираем серую рамку (делаем прозрачной) */
    border: 1px solid transparent !important; 
    border-radius: 6px !important; /* Скругление */
    background-color: #ffffff !important; /* Белый фон (чище, чем серый) */
    
    /* === ГЛАВНОЕ: ЦЕНТРОВКА === */
    /* Используем Flexbox, чтобы фото всегда было ровно по центру */
    display: inline-flex !important;
    align-items: center !important;     /* Центр по вертикали */
    justify-content: center !important; /* Центр по горизонтали */
    
    /* Сбрасываем старые стили */
    float: none !important;
    line-height: normal !important; 
    padding: 2px !important; /* Небольшой внутренний отступ, чтобы фото не касалось краев */
    box-sizing: border-box !important;
    
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* 2. САМА КАРТИНКА */
.tovar_block .miniaturs li img {
    /* Фото занимает всё доступное место, НО НЕ БОЛЬШЕ своих пропорций */
    max-width: 100% !important;
    max-height: 100% !important;
    
    /* Сбрасываем жесткие размеры */
    width: auto !important; 
    height: auto !important;
    
    /* === ГЛАВНОЕ: ВПИСЫВАНИЕ === */
    /* contain = показать фото целиком, добавив пустое место, если нужно */
    object-fit: contain !important; 
    
    border-radius: 4px !important; /* Чуть меньший радиус для самой картинки */
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Ссылка внутри li (растягиваем, чтобы кликалось везде) */
.tovar_block .miniaturs li a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Убираем старые псевдо-рамки */
.tovar_block .miniaturs li:after {
    display: none !important;
}

/* 3. ПРИ НАВЕДЕНИИ (HOVER) */
.tovar_block .miniaturs li:hover {
    /* Появляется легкая серая рамка */
    border-color: #e0e0e0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* 4. АКТИВНОЕ ФОТО (ВЫБРАННОЕ) */
.tovar_block .miniaturs li.active {
    /* Яркая оранжевая рамка */
    border: 2px solid #e44000 !important; 
    background-color: #fff !important;
}

/* === ИСПРАВЛЕНИЕ ЦЕНТРИРОВАНИЯ КАТЕГОРИЙ === */
#factory_choice_popup .clothes_category_heading {
    width: auto !important;       /* Таблица занимает столько места, сколько нужно контенту */
    margin: 0 auto 10px auto !important; /* Центрируем таблицу и даем отступ снизу */
    display: table !important;    /* Гарантируем табличное отображение */
}

/* На всякий случай центрируем контейнер с категориями */
#factory_choice_popup .clothes_category {
    text-align: center !important;
}

/* Исправление высоты нижней панели, чтобы она не перекрывала контент */
.fabric-bottom-bar {
    z-index: 9999 !important; /* Чтобы точно была поверх всего */
}
.popup_wrap {
    padding-bottom: 80px !important; /* Место под панель, чтобы контент не обрезался */
}

/* ================================================================ */
/* === ИСПРАВЛЕНИЕ ВЫРАВНИВАНИЯ В КНОПКАХ (Наполнение / Механизм) === */
/* ================================================================ */

/* 1. Настраиваем кнопку как Flex-контейнер */
.tovar_block .buttons.buttons-premium-wrap a.btn-premium {
    display: flex !important;           /* Включаем гибкую верстку */
    align-items: center !important;     /* Выравнивание строго по вертикали (по центру) */
    justify-content: center !important; /* Выравнивание строго по горизонтали (по центру) */
    flex-direction: row !important;     /* Иконка и текст в одну строку */
    
    gap: 12px !important;               /* Расстояние между иконкой и текстом */
    padding: 0 5px !important;          /* Небольшие отступы по бокам */
    line-height: 1 !important;          /* Сбрасываем лишние межстрочные интервалы */
    height: 44px !important;            /* Фиксируем высоту для надежности */
}

/* 2. Настройка самой иконки (SVG) */
.tovar_block .buttons.buttons-premium-wrap a.btn-premium svg {
    display: block !important;          /* Убираем поведение строчного элемента */
    flex-shrink: 0 !important;          /* Запрещаем иконке сжиматься */
    margin: 0 !important;               /* Убираем любые внешние отступы */
    position: relative !important;
    top: 0 !important;                  /* Сбрасываем сдвиги, если были */
}

/* 3. Настройка текста (SPAN) */
.tovar_block .buttons.buttons-premium-wrap a.btn-premium span {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    
    /* ОПТИЧЕСКАЯ КОРРЕКЦИЯ */
    /* Заглавные буквы часто "висят" выше центра. Опускаем их на 1-2 пикселя вниз */
    margin-top: 2px !important;         
    line-height: 1 !important;
}

/* ================================================================= */
/* === FIX: ЧТОБЫ УВЕЛИЧЕННОЕ ФОТО БЫЛО ПОВЕРХ ВСЕГО === */
/* ================================================================= */
div.pp_overlay {
    z-index: 100000 !important;
}
div.pp_pic_holder {
    z-index: 100001 !important;
}

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

/* 1. Сброс старых стилей */
#factory_choice_popup .clothes_category_heading {
    width: auto !important;
    margin: 0 auto 15px auto !important;
    border-collapse: separate !important;
    border-spacing: 10px 0 !important;
}

#factory_choice_popup .clothes_category_heading td {
    border: none !important;
    padding: 0 !important;
    vertical-align: middle !important;
    background: none !important;
}

/* Первая колонка ("КАТЕГОРИЯ") */
#factory_choice_popup .clothes_category_heading td:first-child {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #bbb !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding-right: 15px !important;
    border: none !important;
}

/* 2. Сама кнопка (Label) - УМНАЯ КАПСУЛА */
#factory_choice_popup .clothes_category_heading label.change_checkbox {
    /* Геометрия */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    width: auto !important;          /* Ширина зависит от текста */
    min-width: 42px !important;      /* Но не меньше круга */
    height: 42px !important;         /* Высота фиксирована */
    border-radius: 21px !important;  /* Идеальное скругление */
    
    margin: 0 !important;
    padding: 0 12px !important;      /* Отступы внутри */
    box-sizing: border-box !important;
    
    /* Оформление */
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    
    /* Сброс позиций */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    float: none !important;
}

/* Убираем старые цветные полоски */
#factory_choice_popup .clothes_category .change_checkbox:before,
#factory_choice_popup .clothes_category .change_checkbox.check:before {
    display: none !important;
}

/* 3. Текст внутри кнопки */
#factory_choice_popup .clothes_category_heading label span {
    position: static !important;
    display: block !important;
    
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #555 !important;
    
    margin: 0 !important;
    margin-top: 1px !important;
    padding: 0 !important;
    border: none !important;
    
    white-space: nowrap !important;
    line-height: 1 !important;
}

/* 4. Эффект при наведении */
#factory_choice_popup .clothes_category_heading label:hover {
    border-color: #e44000 !important;
    color: #e44000 !important;
    transform: translateY(-2px);
    z-index: 5;
}
#factory_choice_popup .clothes_category_heading label:hover span {
    color: #e44000 !important;
}

/* 5. Активная кнопка */
#factory_choice_popup .clothes_category_heading label.check {
    background: #e44000 !important;
    border-color: #e44000 !important;
    box-shadow: 0 4px 10px rgba(228, 64, 0, 0.3) !important;
    transform: scale(1.05);
    z-index: 2;
}

#factory_choice_popup .clothes_category_heading label.check span {
    color: #ffffff !important;
}

/* Скрываем стандартный input */
#factory_choice_popup .clothes_category_heading label input {
    display: none !important;
}

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

/* 1. Центрируем контейнер и настраиваем ячейки */
#factory_choice_popup .list {
    text-align: center !important; /* ГЛАВНОЕ: центрирует все плитки в окне */
    padding: 0 !important;
}

#factory_choice_popup .list li,
#factory_choice_popup .cloth_view_list li {
    width: 116px !important;         /* Чуть сузили (на 4px), чтобы гарантированно влезало в ряд */
    height: auto !important;         
    min-height: 10px !important;     
    margin: 5px 4px 10px 4px !important; /* Симметричные отступы (4px слева и справа) */
    padding: 0 !important;
    vertical-align: top !important;
    display: inline-block !important; /* Важно для центрирования через text-align */
    float: none !important;          /* Убираем флоаты, которые тянут всё влево */
}

/* 2. Настройка ссылки (обертка фото + текст) */
#factory_choice_popup .list li a,
#factory_choice_popup .cloth_view_list li a {
    display: block !important;
    height: auto !important;         /* Ссылка тянется под контент */
    width: 100% !important;
    text-decoration: none !important;
    overflow: visible !important;    /* НИЧЕГО НЕ ОБРЕЗАЕМ */
}

/* 3. Фотография */
#factory_choice_popup .list li img,
#factory_choice_popup .cloth_view_list li img {
    width: 100% !important;
    height: auto !important;
    max-height: 90px !important;     /* Ограничиваем только высоту картинки */
    display: block !important;
    margin: 0 auto 5px auto !important;
    border-radius: 4px;
}

/* 5. Эффект наведения */
#factory_choice_popup .list li:hover a span {
    color: #e44000 !important;
}

/* Исправление иконок в кнопках Наполнение/Механизм */
.btn-premium:hover .premium-icon {
    filter: brightness(0) invert(1) !important;
}

.wrapper-wide {
    max-width: 1600px; /* Та самая новая ширина */
    min-width: 1000px; /* Защита от схлопывания, как у стандартного .wrapper */
    margin: 0 auto;    /* Центрируем блок на экране */
    position: relative;
    padding: 0 10px;   /* Безопасные отступы по бокам */
    width: 100%;       /* Растягиваем на всё доступное пространство до 1600px */
    box-sizing: border-box;
}

/* ================================================================ */
/* === РАСШИРЕНИЕ ПРАВОГО БЛОКА С КНОПКАМИ ДО 400px === */
/* ================================================================ */


/* 2. Увеличиваем отступ у левого блока с фото, 
      чтобы он освободил место для широкого правого блока */
.tovar_block .foto_block {
    margin-right: 400px !important;
}

/* ================================================================ */
/* === ГОРИЗОНТАЛЬНЫЕ ИКОНКИ ПРЕИМУЩЕСТВ (В ПРАВОМ БЛОКЕ) === */
/* ================================================================ */

/* Контейнер для иконок */
.product-advantages-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;            /* Расстояние между иконками */
    justify-content: center !important; /* Центрируем иконки по ширине блока */
    
    margin-top: 25px !important;     /* Отступ от верхних кнопок */
    padding-top: 20px !important;    /* Внутренний отступ */
    border-top: 1px solid #eeeeee !important; /* Легкая линия-разделитель */
    width: 100% !important;
}

/* Сами иконки (Оригинальный размер) */
.product-advantages-row img {
    width: auto !important;          /* Возвращаем родную ширину */
    height: auto !important;         /* Возвращаем родную высоту */
    
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    
    cursor: pointer !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
}

/* Эффект при наведении на иконку */
.product-advantages-row img:hover {
    transform: translateY(-4px) !important; /* Иконка слегка "подпрыгивает" */
    filter: drop-shadow(0 4px 6px rgba(228, 64, 0, 0.2)) !important; /* Легкая оранжевая тень */
}

/* ================================================================ */
/* === НАСТРОЙКА СТЫКА ВЕРХНЕГО (1600px) И НИЖНЕГО БЛОКОВ === */
/* ================================================================ */

/* 1. ПОЛНОСТЬЮ УБИРАЕМ РАЗДЕЛИТЕЛЬНУЮ ЧЕРТУ */
.wrapper-wide .tovar_block {
    border-bottom: none !important; /* Убираем линию внизу верхнего блока */
    padding-bottom: 0 !important;   /* Убираем лишнее пустое пространство */
    margin-bottom: 0 !important;
}

.wrapper .tovar_block {
    border-top: none !important;    /* Убираем линию вверху нижнего блока */
    padding-top: 0 !important;      /* Убираем лишнее пустое пространство */
    margin-top: 0 !important;
}

/* На всякий случай гасим линию у самой обертки табов */
.tabs_block {
    border-top: none !important; 
}


/* 2. НАСТРОЙКА ОТСТУПОВ (РЕГУЛИРУЙТЕ ЭТИ ЗНАЧЕНИЯ) */

/* Отступ СНИЗУ от дополнительных фотографий (миниатюр) */
.tovar_block .miniaturs {
    margin-bottom: 0px !important; /* Увеличьте цифру, чтобы отодвинуть табы ниже */
}

/* Отступ СВЕРХУ над табами ("Характеристики", "Информация" и т.д.) */
.tovar_block .tabs_block {
    margin-top: 0px !important;     /* Увеличьте цифру, чтобы опустить табы еще ниже */
    padding-top: 0 !important;      /* Сброс старого внутреннего отступа */
}

/* ================================================================ */
/* === 1. УБИРАЕМ "ПРИЗРАЧНУЮ" ЛИНИЮ ОТ ЗАГОЛОВКА H1 === */
/* ================================================================ */

/* Уничтожаем бесконечную линию, которая липла к низу блока */
.tovar_block h1::before,
.tovar_block h1:before,
.wrapper-wide h1::before,
.wrapper-wide h1:before {
    display: none !important;
    content: none !important;
}

/* === ЧИСТЫЙ КОД ДЛЯ ПК (Без мобильной версии) === */

@media (min-width: 992px) {

    /* 1. Глобальный сброс для родителя (чтобы разрешить 1600px) */
    #content {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }
    
    /* Ограничиваем НИЖНИЙ блок, чтобы он не разъехался */
    .wrapper {
        max-width: 1360px !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
    }

    /* 2. Контейнер ВЕРХА (1600px макс, резиновый) */
    .wrapper-wide {
        max-width: 1600px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* 3. Правая колонка (Цена) - Прижата вправо */
    /* Используем селектор .wrapper-wide, чтобы не сломать низ */
    .wrapper-wide .charachteristics {
        float: right !important;
        
        /* Умная ширина: от 300 до 400px */
        width: 26% !important;
        min-width: 300px !important;
        max-width: 400px !important;
        
        margin: 0 !important;
        padding: 0 !important;
        background: #fff;
        
        /* Липкость */
        position: sticky !important;
        top: 20px !important;
        z-index: 100;
    }

    /* 4. Левая колонка (Фото) - Занимает остальное место */
    .wrapper-wide .foto_block {
        float: left !important;
        
        /* Ширина = 100% минус место под правую колонку */
        width: calc(100% - 430px) !important;
        /* Уточнение для современных браузеров */
        width: calc(100% - clamp(300px, 26%, 400px) - 30px) !important;
        
        margin: 0 !important;
        padding: 0 !important;
        
        /* overflow: visible нужен, чтобы стрелки прокрутки не обрезались */
        overflow: visible !important; 
    }

    /* 5. Главное фото (Высота макс 500px, резиновое) */
    .wrapper-wide .big_foto {
        width: 100% !important;
        height: auto !important;
        text-align: center !important;
        display: block !important;
        float: none !important;
        overflow: hidden !important;
        margin-bottom: 20px !important;
    }

    .wrapper-wide .big_foto img {
        max-width: 100% !important;
        max-height: 500px !important; /* Ограничитель высоты */
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* 6. Полоса прокрутки (Миниатюры) */
    .wrapper-wide .miniaturs {
        clear: both !important;       /* Спускаем вниз под фото */
        margin-top: 10px !important;
        position: relative !important;
        z-index: 10;
        /* Убрали жесткую ширину, чтобы скрипт прокрутки работал сам */
    }
}

/* --- СТИЛИ ДЛЯ ПЛАШЕК В ПРАВОЙ КОЛОНКЕ --- */

/* Треугольничек слева от скидки (для красоты) */
.inline-discount-badge::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #e44000;
}

/* 2. Ряд плашек ХИТ/АКЦИЯ под ценой */
.bottom-badges-row {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    gap: 10px; /* Расстояние между плашками */
}

/* Стиль самих плашек */
.bottom-badges-row .ic {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    letter-spacing: 0.5px;
}

.bottom-badges-row .ic.action {
    border: 1px solid #f78015;
    color: #f78015;
    background: #fff;
}

.bottom-badges-row .ic.hit {
    border: 1px solid #e44000;
    color: #e44000;
    background: #fff;
}

/* --- СТИЛЬНЫЕ МЕТКИ (НАД ЦЕНОЙ) --- */
.product-status-tags {
    margin-bottom: 8px; /* Отступ до цены */
    display: flex;
    gap: 6px; /* Расстояние между метками */
}

.tag-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    line-height: 1;
}

/* Стиль для АКЦИИ (Нежно-красный фон, красный текст) */
.tag-label.is-action {
    background-color: #ffeae6; 
    color: #ff3b30;
    border: 1px solid #ff3b30;
}

/* Стиль для ХИТА (Нежно-оранжевый фон, оранжевый текст) */
.tag-label.is-hit {
    background-color: #fff8e1;
    color: #ff8f00;
    border: 1px solid #ff8f00;
}

/* ПРИНУДИТЕЛЬНОЕ ИЗМЕНЕНИЕ РАЗМЕРА (V3 - Wildcard) */
#factory_choice_popup .factorys_name,
#factory_choice_popup .factorys_name * {
    font-size: 18px !important; /* Меняйте это число */
    line-height: 1.0 !important;
    font-weight: 600 !important;
    color: #333333 !important;
    text-transform: uppercase !important;
}

/* --- 1. СТИЛЬ ЦЕНЫ (Жирный, Темно-серый) --- */
.price-osn .fullPrice {
    color: #333333 !important;  /* Темно-серый */
    font-weight: 600 !important; /* Очень жирный */
    font-size: 26px; /* Можно увеличить, если нужно */
}

/* Символ рубля тоже делаем жирным */
.price-osn .rub {
    color: #333333 !important;
    font-weight: 600 !important;
}

/* ========================================= */
/* === СТИЛИ НОВОЙ ПЛАШКИ СКИДКИ (-30%) === */
/* ========================================= */
.inline-discount-badge,
.tag-label.is-discount {
    /* Чтобы точно применилось */
    display: inline-block !important; 
    vertical-align: middle !important;
    
    /* ЦВЕТА */
    background: #e44000 !important; /* Оранжевый */
    color: #fff !important;         /* Белый текст */
    
    /* РАЗМЕРЫ (Сделайте больше или меньше здесь) */
    font-size: 18px !important;    
    font-weight: 600 !important;    /* Жирный */
    padding: 4px 10px !important;   /* Отступы внутри */
    
    /* ОФОРМЛЕНИЕ */
    border-radius: 4px !important;
    margin-left: 10px !important;
    line-height: 1 !important;
    position: relative !important;
    top: -5px !important; /* Чуть поднять */
}

@media screen and (max-width: 1023px) {
    /* Ломаем стандартную структуру таблицы */
    .tab_content#info .list table,
    .tab_content#info .list tbody,
    .tab_content#info .list tr {
        display: block;
        width: 100%;
    }

    /* Добавляем отступ между разными характеристиками */
    .tab_content#info .list tr {
        margin-bottom: 12px;
    }

    /* Выстраиваем ячейки (название и значение) в одну сплошную строку */
    .tab_content#info .list td {
        display: inline; 
        padding: 0 !important;
        border: none !important;
        font-size: 14px;
        line-height: 1.5;
    }

    /* Добавляем небольшой пробел между названием и значением (после двоеточия) */
    .tab_content#info .list td:first-child {
        margin-right: 4px;
    }

    /* Опционально: можно сделать левую часть (названия) чуть более тусклой или жирной, 
       чтобы визуально отделить от значения, раз уж колонок больше нет */
    .tab_content#info .list td:first-child span {
        color: #666; 
    }
	
    /* 1. Возвращаем контейнеру обычное блочное поведение (убираем flex) */
    .tech-specs-simple .spec-row {
        display: block !important; 
        padding: 8px 0 !important;
    }

    /* 2. Название делаем строчным */
    .tech-specs-simple .spec-label {
        display: inline !important;
        margin-right: 4px; /* Небольшой пробел после двоеточия */
    }

    /* 3. Контейнер значения тоже делаем строчным (отменяем flex-direction: column) */
    .tech-specs-simple .spec-value {
        display: inline !important;
    }

    /* 4. Саму цифру делаем строчной */
    .tech-specs-simple .spec-value b {
        display: inline !important;
        font-size: 15px !important;
    }

    /* 5. ГЛАВНОЕ: Возвращаем серый текст в ту же строку */
    .tech-specs-simple .spec-opt {
        display: inline !important; 
        margin-top: 0 !important;
        margin-left: 4px; /* Пробел между основной цифрой и скобками */
        font-size: 13px !important;
        color: #777;
    }
}

@media screen and (max-width: 1023px) {
    /* 1. Делаем так, чтобы скроллилось всё модальное окно целиком, а не только список */
    #config_modal_window {
        overflow-y: auto !important;
    }
    
    #config_modal_body {
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
        flex: 0 0 auto !important; 
        margin-bottom: 0 !important;
    }

    /* 2. Подтягиваем футер сразу под модули и ставим в общий поток */
    #config_modal_footer {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        margin-top: 20px !important; /* Отступ от последнего модуля */
        padding: 15px !important;
        
        /* Выстраиваем цену и кнопку в колонку друг под другом */
        display: flex !important;
        flex-direction: column;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        background-color: #f9f9f9; /* Легкий фон, чтобы визуально собрать этот блок */
        border-radius: 8px;
    }

    /* 3. Перебиваем стили цены (которые заданы у вас прямо в HTML через style="...") */
    #config_modal_footer .total-price-block {
        display: block !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important; /* Отступ от цены до кнопки */
        text-align: center;
        font-size: 20px !important;
        width: 100%;
    }

    /* 4. Делаем кнопку удобной для тапа (широкой и заметной) */
    #config_modal_footer .btn-apply-config {
        display: block !important;
        width: 100%;
        padding: 14px 20px !important;
        text-align: center;
        background-color: #d69c60; /* Измените цвет на тот, который используете для кнопки "Купить" */
        color: #fff !important;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        border-radius: 4px;
        box-sizing: border-box;
        text-decoration: none;
    }

}

@media screen and (max-width: 1023px) {

/* --- 1. ФИЛЬТРЫ В ОДИН РЯД СО СВАЙПОМ --- */
    /* Убиваем старую жесткую ширину в 800px */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .popup_wrap .right .factorys_types_block .factorys_types {
        width: auto !important;
        min-width: 100% !important;
    }
    
    html body.eskimobi_responsive .popup_block#factory_choice_popup .popup_wrap .right .factorys_types_block table, 
    html body.eskimobi_responsive .popup_block#factory_choice_popup .popup_wrap .right .factorys_types_block tbody,
    html body.eskimobi_responsive .popup_block#factory_choice_popup .popup_wrap .right .factorys_types_block tr {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: max-content !important; /* Позволяет контейнеру тянуться вправо */
    }
    
    html body.eskimobi_responsive .popup_block#factory_choice_popup .popup_wrap .right .factorys_types_block td {
        display: block !important;
        flex: 0 0 auto !important; /* Запрещаем кнопкам сжиматься */
        margin-right: 8px !important; 
    }


    /* --- 3. БЕЛЫЙ ТЕКСТ НА АКТИВНОЙ КАТЕГОРИИ --- */
    .clothes1 .change_checkbox.check .checkleftspan {
        color: #ffffff !important;
    }

/* 1. Превращаем саму ячейку в гибкий контейнер */
html body.eskimobi_responsive .popup_block#factory_choice_popup .popup_wrap .right .factorys_types_block td {
    display: inline-flex !important; /* Убиваем табличное поведение */
    align-items: center !important;
    padding: 0 !important;
    margin-right: 8px !important;
    vertical-align: top !important; /* Защита от скачков на строке */
}

/* 2. Идеальное центрирование внутри плашки-ссылки */
html body.eskimobi_responsive .popup_block#factory_choice_popup .popup_wrap .right .factorys_types_block td a {
    display: flex !important;
    align-items: center !important;       /* Выравнивание точно по центру вертикали */
    justify-content: center !important;   /* Выравнивание по горизонтали */
    height: 40px !important;              /* Задаем высоту плашки */
    padding: 0 16px !important;           /* Воздух только по бокам */
    margin: 0 !important;
    white-space: nowrap !important;       /* Запрет переноса на 2 строки */
    box-sizing: border-box !important;
    line-height: 1 !important;            /* Сбрасываем старые межстрочные интервалы */
    
    /* === РУЧНАЯ НАСТРОЙКА === */
    /* Если после этого кода текст все еще кажется сдвинутым вниз,
       увеличьте padding-bottom (например, до 4px), чтобы "выдавить" текст наверх */
    padding-bottom: 2px !important; 
}

/* === СТАРТ: ПРИНУДИТЕЛЬНЫЙ ФИКС ОКНА ТКАНЕЙ === */
    
    /* 1. Жесткий фуллскрин строго по центру, убиваем горизонтальный скролл */
    html body.eskimobi_responsive .popup_block#factory_choice_popup {
        position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100% !important; max-width: 100vw !important; height: 100% !important; margin: 0 !important; padding: 0 !important;
        z-index: 999999 !important; transform: none !important; overflow-x: hidden !important;
    }
    
    html body.eskimobi_responsive .popup_block#factory_choice_popup .popup_wrap {
        position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; 
        width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important;
        overflow-x: hidden !important; overflow-y: auto !important; 
        /* Увеличиваем нижний отступ со 180px до 220px */
        padding: 40px 10px 220px 10px !important; 
        transform: none !important; box-sizing: border-box !important; border: none !important;
    }
    
/* 2. Липкий низ: выстраиваем элементы строго друг под другом без нахлеста */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .fabric-bottom-bar {
        position: fixed !important; bottom: 40px !important; left: 0 !important; right: 0 !important;
        background: #fff !important; padding: 15px 15px 25px 15px !important; 
        box-shadow: 0 -5px 15px rgba(0,0,0,0.15) !important; z-index: 9999999 !important;
        display: flex !important; flex-direction: column !important; align-items: center !important; 
        transform: none !important; width: 100% !important; box-sizing: border-box !important;
    }
    
    /* Поднимаем плашки над кнопкой (даем жесткий отступ 20px вниз) */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .fabric-bottom-bar ul.radios {
        position: relative !important; display: flex !important; flex-direction: row !important; 
        justify-content: center !important; width: 100% !important; 
        margin: 0 0 20px 0 !important; /* ТОТ САМЫЙ ОТСТУП, ЧТОБЫ НЕ ПЕРЕКРЫВАЛИ КНОПКУ */
        padding: 0 !important; flex-wrap: nowrap !important; box-sizing: border-box !important;
    }
    html body.eskimobi_responsive .popup_block#factory_choice_popup .fabric-bottom-bar ul.radios li {
        position: relative !important; margin: 0 5px !important; display: block !important; float: none !important;
    }
    
    /* Жестко ставим кнопку в самый низ панели */
    html body.eskimobi_responsive .popup_block#factory_choice_popup #choosebtn {
        position: relative !important; width: 100% !important; display: block !important; 
        margin: 0 !important; box-sizing: border-box !important; 
        top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important;
    }

    /* 3. Убиваем горизонтальный скролл тканей (отступы и широкие контейнеры) */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list {
        margin: 0 !important; padding: 0 !important; width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important;
    }
    html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li {
        margin: 0 0 15px 0 !important; padding: 0 !important; width: 100% !important; box-sizing: border-box !important; left: 0 !important;
    }
    html body.eskimobi_responsive .popup_block#factory_choice_popup .right .scroll-pane {
        max-height: none !important; overflow-x: hidden !important; overflow-y: visible !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important;
    }
    html body.eskimobi_responsive .popup_block#factory_choice_popup .right .factorys_types_block {
        width: 100% !important; margin: 0 !important; box-sizing: border-box !important; overflow-x: auto !important;
    }

    /* 4. Центрируем текст на кнопках фильтров */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .factorys_types_block td a {
        display: flex !important; align-items: center !important; justify-content: center !important;
        height: 40px !important; padding: 0 15px !important; white-space: nowrap !important; margin: 0 !important;
    }
	
	/* ======================================================= */
    /* 5. ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ ТОЛЬКО ДЛЯ ТАБЛИЦЫ ЦЕН         */
    /* ======================================================= */
    
    /* Снимаем растягивание и скролл с общих контейнеров, чтобы текст стоял на месте */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .popup_wrap .right .clothes_category,
    html body.eskimobi_responsive .popup_block#factory_choice_popup .popup_wrap .right .clothes_category .clothes1 {
        width: 100% !important;
        min-width: 100% !important;
        overflow: visible !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Заголовки (текст) жестко фиксируем по ширине экрана */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .popup_wrap .right .clothes_category .heading2,
    html body.eskimobi_responsive .popup_block#factory_choice_popup .popup_wrap .right .clothes_category .tkanp {
        width: 100% !important;
        white-space: normal !important;
        display: block !important;
    }

    /* Вешаем прокрутку ИСКЛЮЧИТЕЛЬНО на таблицу с цифрами и ценами */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .popup_wrap .right .clothes_category .clothes_category_heading {
        display: block !important; /* Превращаем саму таблицу в скролл-блок */
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* Плавный свайп */
        padding-bottom: 10px !important;
        margin: 0 !important;
    }

    /* Внутренности таблицы сохраняют свои пропорции и тянутся вправо */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .popup_wrap .right .clothes_category .clothes_category_heading tbody {
        display: table !important;
        width: max-content !important;
    }

    /* Ячейки выстраиваются в одну строку */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .popup_wrap .right .clothes_category .clothes_category_heading td {
        white-space: nowrap !important;
        display: table-cell !important;
        padding: 5px 8px !important;
        vertical-align: middle !important;
    }
	
	/* ======================================================= */
    /* 6. СОВРЕМЕННЫЕ КНОПКИ ВЫБОРА (ФИКС НАЛОЖЕНИЯ НА ФОТО)   */
    /* ======================================================= */
    
    /* Оформляем каждую ткань как красивую карточку */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li {
        display: flex !important;
        flex-direction: row !important; /* Строго в строку */
        align-items: center !important;
        justify-content: space-between !important;
        background: #f9f9f9 !important; 
        padding: 10px !important;
        border-radius: 8px !important; 
        margin: 0 0 10px 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Картинка ткани слева */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li .img {
        width: 40% !important;
        min-width: 40% !important;
        max-width: 40% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important; /* ЖЕСТКО ЗАПРЕЩАЕМ ЛЕТАТЬ */
    }
    
    html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li .img img {
        width: 100% !important;
        height: auto !important;
        border-radius: 4px !important;
        display: block !important;
        margin: 0 !important;
    }

    /* Блок с кнопками справа */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li .buttons {
        width: 55% !important;
        min-width: 55% !important;
        max-width: 55% !important;
        float: none !important;
        display: flex !important;
        flex-direction: column !important; /* Кнопки друг под другом */
        gap: 8px !important; /* Расстояние между кнопками */
        padding: 0 !important;
        margin: 0 !important;
        position: static !important; /* УБИВАЕМ СТАРЫЙ АБСОЛЮТ, ИЗ-ЗА КОТОРОГО ОНИ НАЛЕЗАЛИ */
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    /* Сами кнопки */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li .buttons a {
        background: #ffffff !important;
        border: 1px solid #d7d7d7 !important;
        border-radius: 6px !important;
        padding: 10px 5px !important;
        margin: 0 !important;
        text-align: center !important;
        color: #333 !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        display: block !important;
        line-height: 1 !important;
        position: static !important; /* ЖЕСТКАЯ ФИКСАЦИЯ ВНУТРИ КОЛОНКИ */
        width: 100% !important;
        box-sizing: border-box !important;
        text-indent: 0 !important;
    }

    /* Жестко удаляем старые картинки кружочков (circle-off / circle-on) */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li .buttons a::before,
    html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li .buttons a::after {
        display: none !important;
    }

    /* Оформление АКТИВНОЙ кнопки */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li .buttons a.active {
        background: #e63f00 !important;
        color: #ffffff !important;
        border-color: #e63f00 !important;
        font-weight: 600 !important;
    }
	
	/* ======================================================= */
/* 6. КАРТОЧКИ ТКАНЕЙ (ФИНАЛ С УЧЕТОМ СТРУКТУРЫ a.img)     */
/* ======================================================= */

/* Общая карточка */
html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; 
    justify-content: space-between !important;
    padding: 10px !important;
    background: #f9f9f9 !important;
    border-radius: 8px !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* --- БЛОК ИЗОБРАЖЕНИЯ (Теперь это сама ссылка a.img) --- */
html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li a.img {
    width: 42% !important;
    position: relative !important; /* Якорь для лупы */
    display: block !important;
    text-align: center !important;
    pointer-events: auto !important; /* РАЗРЕШАЕМ КЛИК */
    text-decoration: none !important;
    
    /* === ЖЕЛЕЗОБЕТОННО СКРЫВАЕМ ЛЮБОЙ ТЕКСТ ПОД ФОТО === */
    color: transparent !important; 
    font-size: 0 !important; 
    line-height: 0 !important;
}

/* Также прячем старые переносы строк под фото, чтобы не было пустых дыр */
html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li a.img br {
    display: none !important;
}

/* Убиваем жесткую высоту (70px) из инлайн-стилей у span */
html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li a.img > span {
    height: auto !important;
    display: block !important;
    margin-bottom: 5px !important;
}

/* Сама картинка */
html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li a.img img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 4px !important;
    pointer-events: none !important; /* Пропускаем клик на ссылку */
}

/* НАСТРОЙКА ЛУПЫ */
html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li a.img::after {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* === ВСТРАИВАЕМ ИКОНКУ ЛУПЫ ПРЯМО В КОД (БЕЗ ФАЙЛОВ) === */
    background: rgba(0, 0, 0, 0.25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center no-repeat !important; 
    background-size: 40px !important;
    
    border-radius: 4px !important;
    width: 50px !important;
    height: 50px !important;
    
    /* === ТОЧЕЧНАЯ КОРРЕКТИРОВКА ПОЗИЦИИ === */
    top: 50px !important; /* Ровно середина от высоты картинки 112px */
    left: 60% !important; /* Середина по горизонтали */
    right: auto !important; /* Убиваем старый прилипающий отступ */
    transform: translate(-50%, -50%) !important; /* Сдвигаем саму лупу на ее центр */
    /* ====================================== */
    
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    pointer-events: none !important; 
}

/* Убиваем старый черный оверлей (он висит на ::before) */
html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li a.img::before {
    display: none !important;
}

/* --- БЛОК КНОПОК --- */
html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li .buttons {
    width: 53% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    position: static !important;
    border: none !important;
}

html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li .buttons input {
    display: none !important;
}

html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li .buttons a {
    background: #fff !important;
    border: 1px solid #ccc !important;
    padding: 10px 5px !important;
    border-radius: 6px !important;
    text-align: center !important;
    text-indent: 0 !important;
    display: block !important;
    font-size: 13px !important;
}

html body.eskimobi_responsive .popup_block#factory_choice_popup .hy6er .list li .buttons a.active {
    background: #e63f00 !important;
    color: #fff !important;
    border-color: #e63f00 !important;
}

/* ======================================================= */
    /* 7. PRETTYPHOTO: СВАЙП + ИДЕАЛЬНАЯ ШАПКА + КРЕСТИК       */
    /* ======================================================= */

    /* Темный фон и защита от просвечивания (ТОЛЬКО ДЛЯ МОБИЛОК) */
    html body.eskimobi_responsive div.pp_overlay {
        z-index: 2147483640 !important;
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100vw !important; height: 100vh !important;
        transform: translateZ(0) !important; 
    }

    /* РАСТЯГИВАЕМ ГЛАВНЫЙ КОНТЕЙНЕР НА ВЕСЬ ЭКРАН */
    html body.eskimobi_responsive div.pp_pic_holder {
        z-index: 2147483645 !important;
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100vw !important; height: 100vh !important;
        margin: 0 !important; padding: 0 !important;
        transform: translateZ(0) !important;
    }

    /* ВЕРХНЯЯ ПАНЕЛЬ С НАЗВАНИЕМ (Строго на всю ширину экрана) */
    html body.eskimobi_responsive div.ppt {
        display: block !important;
        position: fixed !important; 
        top: 0 !important;
        left: 0 !important; 
        right: 0 !important; 
        width: 100% !important;
        height: 50px !important;
        background: #ffffff !important;
        color: #333333 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-align: center !important;
        line-height: 50px !important;
        z-index: 2147483646 !important;
        padding: 0 15px !important;
        margin: 0 !important; 
        box-sizing: border-box !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
        text-shadow: none !important; 
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important; 
        opacity: 1 !important;
        transform: none !important; 
        border-radius: 0 !important;
    }

    /* ЦЕНТРОВОЧНЫЙ КОНТЕЙНЕР ДЛЯ КАРТИНКИ */
    html body.eskimobi_responsive div.pp_pic_holder .pp_content_container {
        position: absolute !important;
        top: calc(50% + 25px) !important; 
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 94vw !important; 
        background: transparent !important;
        border: none !important; box-shadow: none !important;
        padding: 0 !important; margin: 0 !important;
    }
    
    /* === ЖЕСТКОЕ УДАЛЕНИЕ ЛИШНИХ БЕЛЫХ ФОНОВ И РАМОК === */
    html body.eskimobi_responsive div.pp_pic_holder .pp_top,
    html body.eskimobi_responsive div.pp_pic_holder .pp_bottom {
        display: none !important; 
    }

    html body.eskimobi_responsive div.pp_pic_holder .pp_left,
    html body.eskimobi_responsive div.pp_pic_holder .pp_right,
    html body.eskimobi_responsive div.pp_pic_holder .pp_content,
    html body.eskimobi_responsive div.pp_pic_holder .pp_fade,
    html body.eskimobi_responsive div.pp_pic_holder .pp_details {
        background: transparent !important;
        border: none !important; box-shadow: none !important;
        padding: 0 !important; margin: 0 !important;
        position: static !important; 
    }

    /* Прячем мусор скрипта */
    html body.eskimobi_responsive div.pp_pic_holder .pp_expand,
    html body.eskimobi_responsive div.pp_pic_holder .pp_gallery,
    html body.eskimobi_responsive div.pp_pic_holder .pp_loaderIcon,
    html body.eskimobi_responsive div.pp_pic_holder .pp_nav,
    html body.eskimobi_responsive div.pp_pic_holder .pp_description,
    html body.eskimobi_responsive div.pp_pic_holder .pp_hoverContainer {
        display: none !important;
    }

    /* САМА ФОТОГРАФИЯ */
    html body.eskimobi_responsive div.pp_pic_holder #fullResImage {
        width: 100% !important;
        height: auto !important;
        max-height: 75vh !important; 
        display: block !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        border-radius: 8px !important; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important; 
    }

    /* ======================================================= */
    /* КРЕСТИК ЗАКРЫТИЯ (НЕ ТРОГАЕМ - ОН ИДЕАЛЕН)              */
    /* ======================================================= */

    html body.eskimobi_responsive div.pp_pic_holder .pp_close {
        display: block !important;
        position: absolute !important; 
        top: 10px !important; 
        right: 10px !important; 
        width: 40px !important; height: 40px !important; 
        background: rgba(0,0,0,0.5) !important; 
        border: 1px solid rgba(255,255,255,0.3) !important;
        border-radius: 50% !important; 
        text-indent: -9999px !important;
        z-index: 2147483647 !important;
    }

    /* Белый крестик */
    html body.eskimobi_responsive div.pp_pic_holder .pp_close::after {
        content: "×" !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 40px !important; height: 40px !important;
        text-indent: 0 !important;
        color: #ffffff !important; 
        font-size: 34px !important; line-height: 38px !important;
        text-align: center !important;
        font-family: Arial, sans-serif !important;
        font-weight: normal !important;
    }
    /* === КОНЕЦ ФИКСА === */
}

/* ======================================================= */
/* УМНЫЙ ВЫВОД НАЗВАНИЙ ТКАНЕЙ (ПК / МОБАЙЛ)               */
/* ======================================================= */

/* По умолчанию (для компьютеров) прячем мобильный заголовок */
.fabric-mobile-title { display: none !important; }
.fabric-desktop-title { display: inline !important; }
.fabric-desktop-br { display: inline !important; }

/* Для мобильных устройств (ширина экрана до 1023px или класс eskimobi) */
@media screen and (max-width: 1023px) {
    /* Прячем текст внутри картинки */
    html body.eskimobi_responsive .fabric-desktop-title,
    html body.eskimobi_responsive .fabric-desktop-br {
        display: none !important;
    }
    
    /* Показываем чистый текст над кнопками */
    html body.eskimobi_responsive .fabric-mobile-title {
        display: block !important;
        text-align: center !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
        color: #333 !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
    }
}

/* ======================================================= */
/* ЖЕСТКИЙ ПЕРЕХВАТ КРЕСТИКА PRETTYPHOTO (ФИНАЛ)           */
/* ======================================================= */

/* 1. ГЛАВНАЯ ПРИЧИНА ОШИБКИ: старые стили делали нижний текстовый блок якорем. 
   Мы "отключаем" ему якорь, чтобы крестик вырвался наверх! */
html body div.pp_pic_holder .pp_details {
    position: static !important; 
}

/* 2. Делаем главным якорем обертку всего контента (она начинается ровно над фото) */
html body div.pp_pic_holder .pp_content {
    position: relative !important;
    padding: 0 !important; /* Убираем возможные белые рамки, чтобы крестик лег прямо на ткань */
}

/* 3. Прибиваем крестик в правый верхний угол */
html body div.pp_pic_holder a.pp_close {
    display: block !important;
    position: absolute !important;
    
    /* ЖЕСТКИЕ КООРДИНАТЫ ОТ ВЕРХА */
    top: 10px !important;       /* Отступ сверху прямо по ткани */
    right: 10px !important;     /* Отступ справа прямо по ткани */
    bottom: auto !important;    /* Убиваем любые нижние привязки */
    left: auto !important;
    
    width: 40px !important; 
    height: 40px !important; 
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important; /* Полупрозрачный темный круг */
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 50% !important; 
    
    /* Прячем старые картинки и уродливые слова "Close" */
    font-size: 0 !important; 
    color: transparent !important; 
    text-indent: -9999px !important; 
    background-image: none !important; 
    
    z-index: 2147483647 !important; /* Поверх вообще всего */
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    opacity: 1 !important;
    transform: none !important;
}

/* 4. Рисуем ровный белый крестик внутри */
html body div.pp_pic_holder a.pp_close::after {
    content: "×" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important; 
    left: 0 !important;
    width: 100% !important; 
    height: 100% !important;
    text-indent: 0 !important; /* Показываем только этот символ */
    color: #ffffff !important; 
    font-size: 32px !important; 
    line-height: 36px !important; 
    text-align: center !important;
    font-family: Arial, sans-serif !important;
    font-weight: normal !important;
    background: none !important;
}

/* 5. Эффект при наведении (Оранжевый) */
@media screen and (min-width: 1023px) {
    html body div.pp_pic_holder a.pp_close:hover {
        background: #e63f00 !important; 
        border-color: #e63f00 !important;
        cursor: pointer !important;
    }
}

/* ======================================================= */
/* === РЕДИЗАЙН ОКНА ВЫБОРА ТКАНЕЙ (ТОЛЬКО МОБИЛКА!) === */
/* ======================================================= */

@media (max-width: 1023px) {
    
    /* 1, 2) ЕДИНЫЙ ФОРМАТ 150x112 И ЦЕНТРИРОВАНИЕ ЛУПЫ */
    #factory_choice_popup .list li a.img {
        position: relative !important; 
        display: block !important;
    }
/* Задаем жесткий каркас 4:3 и обрезаем без сплющивания */
    html body.eskimobi_responsive #factory_choice_popup .list li a.img span {
        width: 150px !important;  
        height: 112px !important; 
        display: block !important;
        border-radius: 6px !important;       
        overflow: hidden !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: none !important;
        /* Хак для мобильных браузеров: жестко обрезает нижние углы */
        -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    }
    
    html body.eskimobi_responsive #factory_choice_popup .list li a.img span img {
        width: 150px !important;
        /* Даем картинке запас по высоте, чтобы при сдвиге не было пустой дырки снизу */
        height: 112px !important; 
        min-width: 150px !important;
        min-height: 112px !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important; 
        object-position: center !important;
        
        /* === ПУЛЬТ УПРАВЛЕНИЯ: СДВИГ КАРТИНКИ === */
        position: relative !important;
        top: -5px !important; /* <--- МЕНЯЙ ЭТУ ЦИФРУ (-5px, -10px и т.д.), чтобы двигать фото вверх/вниз */
        /* ======================================== */
        
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        border: none !important;
    }

    /* Прячем длинный дублирующий текст под картинкой */
    #factory_choice_popup .fabric-desktop-br, 
    #factory_choice_popup .fabric-desktop-title {
        display: none !important;
    }

    /* === НОВОЕ: Название ткани в одну строку со свайпом === */
    #factory_choice_popup .fabric-mobile-title {
        white-space: nowrap !important; /* Строго одна строка */
        overflow-x: auto !important;    /* Включаем свайп вправо-влево */
        overflow-y: hidden !important;
        text-overflow: clip !important; /* Убираем троеточие, текст можно будет прокрутить */
        -webkit-overflow-scrolling: touch !important; /* Плавный свайп на айфонах */
        display: block !important;
        width: 100% !important;
        margin-bottom: 0px !important;
        padding-bottom: 0px !important; /* Запас снизу, чтобы не резались буквы "у", "р", "д" */
        scrollbar-width: none !important; /* Прячем скроллбар в Firefox */
    }
    /* Прячем сам ползунок скролла в Chrome/Safari/iOS, чтобы было красиво */
    #factory_choice_popup .fabric-mobile-title::-webkit-scrollbar {
        display: none !important;
    }
    /* ======================================================= */

    /* 3) ПРОКРУТКА НАЗВАНИЯ И ФИКСАЦИЯ "ХАРАКТЕРИСТИК" */
    #factory_choice_popup .factorys_name {
        font-size: 14px !important;    
        line-height: 1.3 !important;
        font-weight: bold;
        margin-bottom: 8px !important;
        
        /* Включаем горизонтальную прокрутку (свайп) для длинных текстов */
        white-space: nowrap !important;
        overflow-x: auto !important;
        display: block !important;
        padding-bottom: 5px !important;
        scrollbar-width: none; 
    }
    #factory_choice_popup .factorys_name::-webkit-scrollbar {
        display: none; 
    }
    /* Приклеиваем ссылку к левому краю, чтобы она не уезжала при скролле */
    #factory_choice_popup .desc-cloth-name {
        color: #007bff !important;     
        text-decoration: underline !important;
        font-size: 13px !important;
        cursor: pointer;
        
        display: inline-block !important;
        position: sticky !important;
        left: 0 !important;
        background: #fff !important; 
        padding-right: 15px;
        box-shadow: 10px 0 10px -5px #fff; /* Легкое размытие края для красоты */
        z-index: 2;
    }

    /* 4) КРАСИВЫЙ ПОПАП С ТЕКСТОМ ХАРАКТЕРИСТИК (ПО ЦЕНТРУ + КРЕСТИК) */
    #factory_choice_popup .desc-cloth-desc {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 85% !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        background: #fff !important;
        padding: 35px 20px 20px !important; 
        z-index: 100000 !important;
        border-radius: 8px !important;
        margin: 0 !important;
        /* Хак: гигантская тень создает эффект затемнения фона */
        box-shadow: 0 0 0 100vw rgba(0,0,0,0.6), 0 5px 20px rgba(0,0,0,0.5) !important;
        border: none !important;
    }
    #factory_choice_popup .desc-cloth-desc .closes {
        position: absolute !important; 
        top: 5px !important;
        right: 15px !important;
        font-size: 32px !important;
        color: #888 !important;
        cursor: pointer;
        background: none !important;
        line-height: 1 !important;
    }

    /* УМЕНЬШАЕМ ТОЧКИ ПАГИНАЦИИ */
    #factory_choice_popup .owl-pagination .owl-page span,
    #factory_choice_popup .owl-dots .owl-dot span {
        width: 8px !important;
        height: 8px !important;
        margin: 5px 4px !important;
    }

/* 5) КНОПКА "Я ВЫБРАЛ ЦВЕТ" - ЖЕЛЕЗОБЕТОННО НА ВСЮ ШИРИНУ ВНИЗУ */
    html body.eskimobi_responsive .popup_block#factory_choice_popup #choosebtn,
    #factory_choice_popup .fabric-bottom-bar #choosebtn,
    body #choosebtn {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        top: auto !important;  /* Сбрасываем старые настройки */
        right: auto !important;/* Сбрасываем старые настройки */
        
        width: 100vw !important; /* Строго на ширину экрана телефона */
        max-width: 100vw !important;
        height: 50px !important; 
        line-height: 50px !important; /* Центруем текст по вертикали */
        
        box-sizing: border-box !important;
        text-align: center !important;
        padding: 0 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        
        border-radius: 0 !important;
        margin: 0 !important;
        background-color: #e63f00 !important; 
        color: #fff !important;
        z-index: 9999999 !important; /* Поверх вообще всего */
        box-shadow: 0 -4px 15px rgba(0,0,0,0.15) !important;
        
        display: block !important;
        transform: none !important;
    }
    
    /* Отступ у окна, чтобы кнопка не закрывала ткани */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .popup_wrap {
        padding-bottom: 80px !important; 
    }

    /* 6) КРЕСТИК ЗАКРЫТИЯ САМОГО ОКНА (Справа вверху) */
    #closepopup {
        display: block !important;
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 40px;
        height: 40px;
        line-height: 38px;
        text-align: center;
        font-size: 35px !important;
        color: #333 !important;
        text-decoration: none !important;
        z-index: 9999;
        background: #ffffff;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3); 
    }
    
} /* --- КОНЕЦ МОБИЛЬНОГО БЛОКА --- */

/* ======================================================= */
/* === ОКНО ХАРАКТЕРИСТИК ПО ЦЕНТРУ (ТОЛЬКО ДЛЯ ПК) ==== */
/* ======================================================= */

@media (min-width: 1023px) {
    #factory_choice_popup .desc-cloth-desc {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important; /* Идеальное центрирование */
        
        width: 600px !important; /* Удобная ширина для компьютера */
        max-width: 90vw !important;
        max-height: 80vh !important;
        overflow-y: auto !important; /* Скролл, если текста слишком много */
        
        background: #fff !important;
        padding: 40px 30px 30px !important; 
        z-index: 100000 !important;
        border-radius: 12px !important;
        
        margin: 0 !important; /* УБИВАЕМ кривой сдвиг из скрипта! */
        
        /* Гигантская полупрозрачная тень создает эффект затемнения всего фона */
        box-shadow: 0 0 0 100vw rgba(0,0,0,0.6), 0 10px 40px rgba(0,0,0,0.3) !important;
        border: none !important;
    }
    
    /* Крестик закрытия */
    #factory_choice_popup .desc-cloth-desc .closes {
        position: absolute !important; 
        top: 5px !important;
        right: 15px !important;
        font-size: 36px !important;
        color: #888 !important;
        cursor: pointer;
        background: none !important;
        line-height: 1 !important;
        transition: color 0.2s ease !important;
    }
    
    #factory_choice_popup .desc-cloth-desc .closes:hover {
        color: #e44000 !important; /* Оранжевый при наведении */
    }
}

/* ======================================================= */
/* === КРЕСТИК ЗАКРЫТИЯ ОКНА ТКАНЕЙ (ТОЛЬКО ДЛЯ ПК) ==== */
/* ======================================================= */

@media (min-width: 1023px) {
    /* Делаем белую подложку окна "якорем" для крестика */
    #factory_choice_popup .popup_wrap {
        position: relative !important;
    }

    /* Настраиваем сам крестик */
    #factory_choice_popup .close,
    #factory_choice_popup #closepopup {
        display: block !important;
        position: absolute !important;
        top: 20px !important;       /* Отступ от верхнего края */
        right: 20px !important;     /* Отступ от правого края */
        
        width: 44px !important;
        height: 44px !important;
        
        background: #ffffff !important; /* Белый фон */
        border: 2px solid #e44000 !important; /* Оранжевая рамка */
        color: #e44000 !important; /* Оранжевый крестик */
        
        font-size: 36px !important;
        line-height: 38px !important; /* Ровное центрирование по вертикали */
        text-align: center !important;
        text-decoration: none !important;
        
        border-radius: 50% !important; /* Делаем круглым */
        cursor: pointer !important;
        z-index: 100005 !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; /* Легкая тень */
        transition: all 0.3s ease !important; /* Плавность анимации */
    }

    /* Эффект при наведении мыши (заливается оранжевым и красиво крутится) */
    #factory_choice_popup .close:hover,
    #factory_choice_popup #closepopup:hover {
        background: #e44000 !important;
        color: #ffffff !important;
        transform: rotate(90deg) !important;
        box-shadow: 0 6px 15px rgba(228, 64, 0, 0.3) !important;
    }
}

/* Убираем боковые стрелки слайдера на мобильных устройствах */
    html body.eskimobi_responsive .popup_block#factory_choice_popup .owl-controls .owl-buttons,
    html body.eskimobi_responsive .popup_block#factory_choice_popup .owl-nav {
        display: none !important;
    }	
html body.eskimobi_responsive .popup_block#factory_choice_popup .jcarousel-control-prev,
    html body.eskimobi_responsive .popup_block#factory_choice_popup .jcarousel-control-next {
        display: none !important;
    }	

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

/* 1. Настройка крестика (СКРЫТ НА ПК, чтобы не было второго крестика) */
#mehanizm_popup .mobile-mech-close {
    display: none !important; /* <--- ПРЯЧЕМ НА КОМПЬЮТЕРАХ */
    position: absolute !important;
    top: 10px !important;    
    right: 10px !important;  
    width: 30px !important;
    height: 30px !important;
    background: #f4f4f4 !important;
    border-radius: 50% !important;
    color: #666 !important;
    font-size: 24px !important;
    line-height: 28px !important;
    text-align: center !important;
    cursor: pointer !important;
    z-index: 100000 !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease;
}

/* 2. Разрешаем окну показывать то, что выходит за границы (страховка) */
#mehanizm_popup {
    overflow: visible !important;
}

/* --------------------------------------------------- */
/* АДАПТАЦИЯ ТОЛЬКО ДЛЯ МОБИЛЬНЫХ (Ширина до 1023px)    */
/* --------------------------------------------------- */
@media screen and (max-width: 1023px) {
    
    /* ВКЛЮЧАЕМ КРЕСТИК НА МОБИЛКЕ (там он единственный и нужный) */
    html body.eskimobi_responsive #mehanizm_popup .mobile-mech-close {
        display: flex !important; /* <--- ПОКАЗЫВАЕМ НА ТЕЛЕФОНАХ */
        top: 8px !important;
        right: 8px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 28px !important;
    }

    html body.eskimobi_responsive #mehanizm_popup {
        width: 92% !important;
        max-width: 400px !important;  
        border-radius: 12px !important;
        background: #fff !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    html body.eskimobi_responsive #mehanizm_popup .popup_wrap {
        padding: 45px 20px 20px 20px !important; 
        max-height: 80vh !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    html body.eskimobi_responsive #mehanizm_popup .popup_wrap img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 10px auto !important;
    }
}

@media screen and (max-width: 1023px) {
    
    /* 1. ГЛАВНЫЙ КОНТЕЙНЕР БЛОКА ПОКУПКИ */
    /* Жестко ограничиваем ширину и заставляем учитывать внутренние отступы */
    html body.eskimobi_responsive .tovar_block .charachteristics,
    html body.eskimobi_responsive .tovar_block .purchase {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* 2. БЛОК ЦЕНЫ И КОЛИЧЕСТВА */
    /* Запрещаем им выстраиваться в жесткую неразрывную строку */
    html body.eskimobi_responsive .tovar_block .price-osn {
        display: flex !important;
        flex-wrap: wrap !important; /* Ключевое: перенос на новую строку при нехватке места */
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 15px !important;
    }

    /* 3. ДЛИННАЯ КНОПКА "ВЫБРАТЬ: ЦВЕТ | РАЗМЕРЫ | ОПЦИИ" */
    /* Разрешаем длинному тексту переноситься на 2 строки */
    html body.eskimobi_responsive .tovar_block .buttons a.btn-premium,
    html body.eskimobi_responsive .tovar_block .purchase .choose_options_link {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important; /* Сбрасываем жесткую высоту */
        min-height: 44px !important;
        white-space: normal !important; /* Ключевое: отмена запрета переноса строк */
        line-height: 1.3 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 4. ОСНОВНЫЕ КНОПКИ "КУПИТЬ" И "В 1 КЛИК" */
    html body.eskimobi_responsive .tovar_block .purchase .submit,
    html body.eskimobi_responsive .tovar_block .purchase .yellow_but,
    html body.eskimobi_responsive .tovar_block .purchase .click1 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 5. ФОТО БЛОК (на всякий случай, если он тоже толкается) */
    html body.eskimobi_responsive .tovar_block .foto_block {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
}

@media screen and (max-width: 1023px) {
    /* Жестко ограничиваем ширину всей карточки товара */
    html body.eskimobi_responsive .tovar_block,
    html body.eskimobi_responsive #content {
        max-width: 100vw !important;
        overflow-x: hidden !important; 
        box-sizing: border-box !important;
    }

    /* Заставляем абсолютно все кнопки и их контейнеры сжиматься */
    html body.eskimobi_responsive .tovar_block .purchase *,
    html body.eskimobi_responsive .tovar_block .buttons *,
    html body.eskimobi_responsive .submit,
    html body.eskimobi_responsive .yellow_but,
    html body.eskimobi_responsive button,
    html body.eskimobi_responsive .btn {
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important; 
        word-wrap: break-word !important;
    }

    /* Убиваем жесткие отступы ТОЛЬКО у блока с большим фото (миниатюры не трогаем!) */
    html body.eskimobi_responsive .tovar_block .foto_block {
        padding-left: 0px !important;
        padding-right: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important; 
    }

    /* === ИСПРАВЛЕНИЕ: Мягкое центрирование большого фото без поломки скриптов === */
    html body.eskimobi_responsive .tovar_block .foto_block .big_foto {
        float: none !important;
        margin: 0 auto !important;
        width: 100% !important; 
        max-width: 100% !important;
        text-align: center !important; /* Выравниваем картинку по центру */
        box-sizing: border-box !important;
        /* Мы убрали display: block, чтобы скрипт мог сам управлять видимостью ссылок */
    }
    
    html body.eskimobi_responsive .tovar_block .foto_block .big_foto img {
        margin: 0 auto !important;
        max-width: 100% !important;
        height: 260px !important; /* Фиксированная высота */
        object-fit: contain !important; /* Умное вписывание без искажений */
        /* Мы убрали width: 100% и display: block, чтобы не ломать логику галереи */
    }
	
	/* === ЖЕСТКОЕ ЦЕНТРИРОВАНИЕ ПРАВОГО БЛОКА (ОБХОД ОТСТУПОВ РОДИТЕЛЯ) === */
    html body.eskimobi_responsive .tovar_block .charachteristics {
        width: 100vw !important;
        max-width: 100vw !important;
        /* Магия: вырываем блок из родительского контейнера и ставим ровно от края до края экрана */
        margin-left: calc(-50vw + 50%) !important; 
        margin-right: calc(-50vw + 50%) !important;
        padding-left: 0px !important; /* Ставим свои собственные, ровные безопасные поля */
        padding-right: 20px !important;
        box-sizing: border-box !important;
        float: none !important;
        clear: both !important;
        display: block !important;
    }

    /* Гарантируем, что форма покупки внутри больше не будет распирать ширину */
    html body.eskimobi_responsive .tovar_block .charachteristics .purchase {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
    }
	
}

/* ================================================================= */
/* === ИСПРАВЛЕНИЕ: БЕСПЛАТНАЯ ДОСТАВКА В ОДНУ СТРОКУ === */
/* ================================================================= */
@media screen and (max-width: 1023px) {
    html body.eskimobi_responsive div.free-delivery,
    html body.eskimobi_responsive .tovar_block .free-delivery {
        /* 1. Жесткий запрет на перенос строки */
        white-space: nowrap !important; 
        
        /* 2. Умное сжатие: от 11px на самых узких до 16px на широких */
        font-size: clamp(11px, 4vw, 16px) !important; 
        
        /* 3. Оптимизация места (уменьшаем левый отступ иконки, чтобы дать место тексту) */
        padding-left: 50px !important; 
        background-size: 35px auto !important; /* Делаем фоновую машинку чуть компактнее */
        background-position: 5px center !important;
        
        /* 4. Защита от распирания */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        
        /* Если экран микроскопический - добавляем "...", но не переносим */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Если текст обернут в span, заставляем его слушаться родителя */
    html body.eskimobi_responsive div.free-delivery span,
    html body.eskimobi_responsive .tovar_block .free-delivery span {
        white-space: nowrap !important;
        font-size: inherit !important;
    }
}

/* ================================================================= */
/* === ИСПРАВЛЕНИЕ КНОПКИ В КАТАЛОГЕ (ТОЛЬКО "В КОРЗИНУ") === */
/* ================================================================= */
@media screen and (max-width: 1023px) {
    
    /* 1. Гарантируем, что кнопка не сломается на 2 строки */
    html body.eskimobi_responsive #content .catalog .cat-item .add_to_cart,
    html body.eskimobi_responsive #content .add_to_cart {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        overflow: hidden !important; 
    }

    /* 2. Бронебойное скрытие слова "Добавить" (.fst) */
    html body.eskimobi_responsive #content .catalog .cat-item .add_to_cart .fst,
    html body.eskimobi_responsive #content .add_to_cart .fst {
        display: none !important;
        /* Если display перебьется старым кодом, эти правила физически уничтожат текст: */
        font-size: 0 !important; 
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
    }

    /* 3. Оформление остатка "В КОРЗИНУ" (.snd) */
    html body.eskimobi_responsive #content .catalog .cat-item .add_to_cart .snd,
    html body.eskimobi_responsive #content .add_to_cart .snd {
        display: inline-block !important;
        font-size: 12px !important; /* Оптимальный размер */
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        margin: 0 !important;
        line-height: 1 !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* --- Адаптив для правого блока характеристик --- */

/* 1. Десктопы (шире 1024px): возвращаем 400px, но без !important */
@media (min-width: 1025px) {
    .wrapper-wide .tovar_block .charachteristics {
        width: 400px;
    }
}

/* 2. Планшеты и ноутбуки (от 1023px до 1024px): сужаем до 240px, как ты и хотел */
@media (min-width: 1023px) and (max-width: 1024px) {
    .wrapper-wide .tovar_block .charachteristics {
        width: 300px; 
        /* Если внутри блока элементы (например, длинные кнопки) будут выпирать, 
           они автоматически сожмутся, так как мы сняли жесткие ограничения */
    }
}

/* ================================================================ */
/* Унификация стилей: Цена, Количество и Сумма в попапе корзины     */
/* ================================================================ */

/* 1. Стили для самих подписей (слова "цена:", "количество:", "сумма:") */
#add_to_bascet_popup .tovar .fprice,
#add_to_bascet_popup .tovar .fcount,
#add_to_bascet_popup .tovar .ftotal {
    font-size: 14px !important;
    font-weight: normal !important;
    color: #666 !important; /* Серый цвет для подписей */
    vertical-align: middle !important;
}

/* 2. Стили для самих цифр (делаем их крупными, жирными и оранжевыми) */
#add_to_bascet_popup .tovar .fprice .red,
#add_to_bascet_popup .tovar .ftotal .red {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #e44000 !important; /* Ваш фирменный цвет */
    line-height: 1.2 !important;
}

/* 3. Стили для приставки "руб" */
#add_to_bascet_popup .tovar .fprice .r,
#add_to_bascet_popup .tovar .ftotal .r {
    font-size: 16px !important;
    font-weight: normal !important;
    color: #000 !important;
}

/* --- Адаптивность плеера (RuTube/YouTube) на мобильных --- */
@media screen and (max-width: 1023px) {
    /* Находим все фреймы с видео и растягиваем их */
    iframe[src*="rutube.ru"],
    iframe[src*="youtube.com"] {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        min-height: 200px !important;
        display: block !important;
        margin: 0 auto !important;
        max-width: 100% !important;
    }
}