/** Shopify CDN: Minification failed

Line 50:6 Expected ":"
Line 50:8 Expected identifier but found "700"
Line 153:0 Unexpected "}"
Line 258:4 "weight" is not a known CSS property

**/
/*-----------------------------------------------------------------------------/
/ Custom Theme CSS
/-----------------------------------------------------------------------------*/
/*---------------- Global Custom CSS -------------------*/
.t4s-eff {
margin-bottom: 20px;
}

.t4s-shipping-list.t4s-text-center .t4s-shipping .t4s-shipping-icon {
margin-bottom: 20px;
}

#t4s-menu-drawer {
background-color: #FFFAF2;
}

/* Десктопные стили для H1 */
h1 {
    font-size: 70px;
    line-height: 70px;
    font-weight: 700; /* weight: 700; - свойство должно быть font-weight */
    font-family: 'Inter', sans-serif; 
    margin-left: -7px;
}

/* **** МЕДИА-ЗАПРОС ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (H1) **** */
@media screen and (max-width: 767px) {
    h1 {
        font-size: 40px; /* Размер шрифта для мобильных */
        line-height: 40px; /* Высота строки для мобильных */
        /* Остальные стили (font-weight, font-family, margin-left)
           унаследуются от десктопных стилей H1, если не переопределены здесь. */
    }
}

.t4s-shipping-item .t4s-shipping-title {
  margin-bottom: 10px;
}
.t4s-btn-base {
font-size: 20px;
border-radius: 0;
weight; 700;
margin-top: 20px;
}
.t4s-shipping-list.t4s-text-center .t4s-shipping .t4s-shipping-icon {
  width: 100px;
  height: 100px;
}

.t4s-rating-wapper svg {
  fill: #000;
}
.t4s-accordion-style-2 .t4s-accor-title .t4s-accor-item-nav {
background-color: #222;
}
.t4s-swatch__item {
padding: 6px 70px 7px;
font-size: 18px;
border-color: #222; 
}
.t4s-swatch__title {
display: none;
}

/* START CSS FOR CUSTOM ICON Tick.png */

/* ---- НАЧАЛО CUSTOM TICK LIST STYLES ---- */

.custom-tick-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
    display: block !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.custom-tick-list li {
    list-style: none !important;
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 0px !important;
    
    font-size: 20px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
    color: #342D29 !important;
    display: block !important;
}

/* Если в <li> есть дочерние элементы типа <p> или <div>, то стилизуем их */
.custom-tick-list li > p,
.custom-tick-list li > div {
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

.custom-tick-list li:last-child {
    margin-bottom: 0 !important;
}

/* Иконка Tick.png */
.custom-tick-list li:before {
    content: "";
    width: 12px !important;
    height: 15px !important;
    position: absolute !important;
    left: 0 !important;
    top: 7px !important;
    /* --- ОБНОВЛЕННАЯ ССЫЛКА НА ИЗОБРАЖЕНИЕ --- */
    background-image: url('/cdn/shop/files/Vector_c9794b74-1916-4d2a-a8c0-b69016b0d437.png?v=1748934085') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Медиазапросы для мобильной версии */
@media (max-width: 767px) {
  .custom-tick-list {
    margin-top: 8px !important;
  }

  .custom-tick-list li {
    padding-left: 20px !important;
    margin-bottom: 0px !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-family: Inter;
    font-weight: 400;
  }
}
/* Abstand oben bei der custom-tick-list im Slideshow-Bereich verringern */
.slideshow__text .custom-tick-list {
  margin-top: 8px !important;
}
    .custom-tick-list li:before {
        width: 10px !important;
        height: 10px !important;
        top: 7px !important;
    }
}

/* ---- КОНЕЦ CUSTOM TICK LIST STYLES ---- */

/* ---- НАЧАЛО CUSTOM SLIDESHOW LIST STYLES ---- */

.slideshow-custom-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.slideshow-custom-list li {
    list-style: none !important;
    position: relative !important;
    padding-left: 25px !important;
    margin-bottom: 0 !important;
}

/* Иконка Tick для slideshow-custom-list */
.slideshow-custom-list li:before {
    content: "";
    width: 12px !important;
    height: 15px !important;
    position: absolute !important;
    left: 0 !important;
    /* --- ОБНОВЛЕННАЯ ССЫЛКА НА ИЗОБРАЖЕНИЕ --- */
    background-image: url('/cdn/shop/files/Vector_c9794b74-1916-4d2a-a8c0-b69016b0d437.png?v=1748934085') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    top: 2px !important;
}

.slideshow-custom-list .slideshow-list-heading {
    text-transform: uppercase !important;
    font-size: 20px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    color: #342D29 !important;
    margin: 0 !important;
    margin-bottom: 5px !important;
    padding: 0 !important;
    display: block;
}

.slideshow-custom-list .slideshow-list-paragraph {
    font-size: 16px !important;
    line-height: 18px !important;
    color: #342D29 !important;
    font-family: inter, sans-serif;
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 25px !important;
    display: block;
}

/* Убираем отступ у последнего параграфа в последнем элементе списка, если это нужно */
.slideshow-custom-list li:last-child .slideshow-list-paragraph {
    margin-bottom: 0 !important;
}

/* Медиазапросы для мобильной версии (если нужны отдельные стили) */
@media (max-width: 767px) {
    .slideshow-custom-list li {
        padding-left: 22px !important;
    }

    .slideshow-custom-list li:before {
        /* Если для мобильных иконка или ее позиционирование должны измениться,
           то можно добавить стили сюда. Например, если шрифт заголовка меняется.
           Для примера, оставим как есть, так как line-height и font-size заголовка
           в данном ТЗ не меняются для мобильных. */
        /* top: Ypx !important; */
    }

    .slideshow-custom-list .slideshow-list-paragraph br {
        display: none !important;
    }
}

/* ---- КОНЕЦ CUSTOM SLIDESHOW LIST STYLES ---- */



/* ---- НАЧАЛО CUSTOM SLIDESHOW LIST STYLES (ОБНОВЛЕНО) ---- */

.slideshow-custom-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
    margin-bottom: 20px !important; /* Отступ 20px вниз от всего блока списка */
}

.slideshow-custom-list li {
    list-style: none !important;
    position: relative !important;
    padding-left: 25px !important; /* Отступ слева для размещения галочки и текста */
    margin-bottom: 10px !important; /* !!! ОБНОВЛЕНО: Отступ между li списками до 10px */
    
    /* Стили для всего текста в li - будут наследоваться list-item-content */
    font-size: 18px !important; 
    line-height: 18px !important; /* Оставляем 22px, так как выглядит хорошо */
    color: #342D29 !important;
    font-family: inter !important;
    weight: 200;
    
    text-indent: 0 !important; /* Сброс text-indent */
}

/* Иконка Tick для slideshow-custom-list */
.slideshow-custom-list li:before {
    content: "";
    width: 12px !important; 
    height: 15px !important;
    position: absolute !important;
    left: 0 !important;
    background-image: url('/cdn/shop/files/Vector_c9794b74-1916-4d2a-a8c0-b69016b0d437.png?v=1748934085') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    top: 5px !important; 
}

/* Новый стиль для обертки всего контента li */
.slideshow-custom-list li .list-item-content {
    display: block !important; 
    text-indent: 0 !important; 
    margin: 0 !important; 
    padding: 0 !important; 
}


/* Стили для жирной части текста */
.slideshow-custom-list li .bold-part {
    font-weight: 600 !important;
    color: #342D29 !important;
}

/* Убираем отступ у последнего элемента списка, чтобы отступом управлял ul.slideshow-custom-list */
.slideshow-custom-list li:last-child {
    margin-bottom: 0 !important; 
}

/* Медиазапросы для мобильной версии */
@media (max-width: 767px) {
    .slideshow-custom-list li {
        padding-left: 22px !important;
        font-size: 14px !important; 
        line-height: 24px !important; 
        margin-bottom: 10px !important; /* ОБНОВЛЕНО: Отступ между li списками на мобильных до 10px */
    }

    .slideshow-custom-list li:before {
        top: 5px !important; 
    }
}

/* ---- КОНЕЦ CUSTOM SLIDESHOW LIST STYLES ---- */

/* Custom styles for the tick list */
.custom-tick-list-new {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: -2px !important; /* Добавили !important для теста */
}
/* Остальной код без изменений */
.custom-tick-list-new li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 18px;
    font-family: 'Inter', sans-serif;
    color: #39352E;
}

.custom-tick-list-new li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    background-image: url('/cdn/shop/files/Vector_c9794b74-1916-4d2a-a8c0-b69016b0d437.png?v=1748934085');
    background-size: 12px 10px;
    background-repeat: no-repeat;
    width: 12px;
    height: 10px;
}

/* Styles for the main wrapper containing all swatches */
.t4s-swatch__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Выравниваем по левому краю контейнера на десктопе */
    gap: 5px; /* Промежуток между свотчами 5px */
    margin-top: 30px;
    padding: 0;
    margin-left: -5px !important; /* Твой установленный отступ */
    margin-right: 0;
    width: auto;
    max-width: none;
}

/* Custom styles for each product variant swatch item */
.t4s-swatch__item.is-sw__color {
    width: 270px;
    height: 200px; /* Пропорции 1.35, ближе к 1.347 изображения */

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;

    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;

    background-color: #fff;
    background-position: center top;
    background-size: contain; /* Изображение полностью помещается */
    background-repeat: no-repeat;
    
    border: 1px solid transparent;
    border-radius: 0px;
    padding: 10px;
    padding-top: 155px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 0;
    box-sizing: border-box;
    
    text-indent: -9999px;
    overflow: hidden;
}

/* Стиль для активного (выбранного) свотча */
.t4s-swatch__item.is-sw__color.is--selected {
    border: 2px solid #000000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Стиль при наведении на свотч */
.t4s-swatch__item.is-sw__color:not(.is--selected):hover {
    border-color: #f0f0f0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ВНУТРЕННИЙ ЭЛЕМЕНТ ДЛЯ ОТОБРАЖЕНИЯ ТЕКСТА ВАРИАНТА */
.t4s-swatch__item.is-sw__color span.swatch-display-text {
    text-indent: 0;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    font-size: 16px;
    font-weight: bold;
    color: #39352E;
    line-height: 1.2;
    padding: 0 5px;
}


/* **** МЕДИА-ЗАПРОСЫ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ **** */
@media screen and (max-width: 767px) {
    .t4s-swatch__list {
        gap: 5px; /* Промежуток между свотчами 5px */
        padding: 0 5px; /* Уменьшим padding по бокам, чтобы дать больше места */
        margin-left: 0; /* На мобильных убираем отрицательный margin-left */
        justify-content: center; /* Центрируем, если не помещаются */
        /* Попробуем установить фиксированную ширину, если все еще проблемы */
        /* width: calc(100% - 10px); - Это если родитель .t4s-swatch__list имеет паддинг */
    }

    .t4s-swatch__item.is-sw__color {
        /* **** КОРРЕКТИРУЕМ РАЗМЕРЫ БЛОКОВ НА МОБИЛЬНЫХ ДЛЯ ЛУЧШЕГО ВПИСЫВАНИЯ ИЗОБРАЖЕНИЙ **** */
        /* Пропорции изображения 1335x991px = 1.347 */
        /* Попробуем 130px / 96px = 1.354 - очень близко */
        width: 130px; /* Уменьшаем ширину, чтобы точно поместились 2 в ряд на узких экранах */
        height: 96px; /* Новая высота, сохраняющая пропорции изображения */
        padding: 8px;
        padding-top: 65px; /* Корректируем padding-top для новых размеров */
        margin-bottom: 0;
    }

    .t4s-swatch__item.is-sw__color span.swatch-display-text {
        font-size: 13px;
        bottom: 5px;
    }
}


/* Custom styles for the tick list (FULLY ROBUST for nested divs/paragraphs) */
.custom-tick-list-new {
    list-style: none !important; /* Убедимся, что буллеты убраны для UL */
    padding: 0 !important;
    margin: 0 !important;
    margin-left: -2px !important; /* Сохраняем твой оригинальный отступ */
    /* display: block !important; - убрал, т.к. UL и так block */
    /* font-size: 0 !important; line-height: 0 !important; - убрал, это может повлиять на вложенный текст */
}

.custom-tick-list-new li {
    list-style: none !important; /* Убедимся, что буллеты убраны для LI */
    position: relative !important;
    padding-left: 20px !important; /* Отступ слева для иконки */
    margin-bottom: 8px !important; /* Отступ между элементами списка */

    /* Эти стили LI должны быть базовыми для текста */
    font-size: 14px !important;
    line-height: 18px !important;
    font-family: 'Inter', sans-serif !important;
    color: #39352E !important;
    display: block !important; /* LI должен быть блоком */
}

/* !!! КРИТИЧЕСКОЕ ИЗМЕНЕНИЕ: Стили для прямых дочерних элементов div и p внутри li !!! */
/* Это должно гарантировать, что они не вносят свои буллеты и не нарушают форматирование */
.custom-tick-list-new li > div,
.custom-tick-list-new li > p {
    list-style: none !important; /* Убираем буллеты, если вдруг откуда-то появятся */
    margin: 0 !important; /* Сбрасываем все внешние отступы */
    padding: 0 !important; /* Сбрасываем все внутренние отступы */
    /* font-size и line-height могут быть унаследованы или заданы явно, но лучше inherit */
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important; /* Наследуем толщину шрифта */
    color: inherit !important; /* Наследуем цвет */
    display: inline !important; /* Делаем их строчными, чтобы текст продолжался в той же строке */
}

/* Иконка Tick.png */
.custom-tick-list-new li::before { /* Изменил с :before на ::before для более современной практики */
    content: "";
    width: 12px !important;
    height: 15px !important;
    position: absolute !important;
    left: 0 !important;
    top: 3px !important; /* Твой оригинальный top */
    background-image: url('/cdn/shop/files/Vector_c9794b74-1916-4d2a-a8c0-b69016b0d437.png?v=1748934085') !important;
    background-size: contain !important; /* Изменил на contain для лучшей адаптивности */
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Медиазапросы для мобильной версии */
@media (max-width: 767px) {
    .custom-tick-list-new li {
        padding-left: 20px !important;
        margin-bottom: 8px !important;
        font-size: 14px !important; /* Твой оригинальный размер */
        line-height: 18px !important; /* Твой оригинальный line-height */
    }

    .custom-tick-list-new li::before {
        width: 12px !important;
        height: 15px !important;
        top: 3px !important;
    }
}


/* --- OWIN Product Features Section Styles (Final & Complete) --- */

/* Контейнер для двух колонок (без изменений) */
.owin-product-feature-container {
    display: flex;
    width: 100%;
    max-width: 530px;
    margin-left: 15px !important;
    margin-right: auto;
    margin-top: 0 !important;
    box-sizing: border-box;
}

/* Стили для каждой колонки (без изменений) */
.owin-feature-column {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
}

/* Отступ ТОЛЬКО для правой колонки (без изменений) */
.owin-product-feature-container .owin-feature-column:nth-child(2) {
    margin-left: 30px !important;
}

/* Стили для заголовков колонок (без изменений для десктопа) */
.owin-feature-title {
    margin-top: 20px !important;
    margin-bottom: 40px !important;
    font-size: 16px;
    line-height: 18px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    color: #38352E;
    text-align: left;
}

/* Применяем стили для custom-tick-list-new ВНУТРИ нашего контейнера (без изменений) */
.owin-product-feature-container .custom-tick-list-new {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 10px !important;
    margin-left: -2px !important;
}

.owin-product-feature-container .custom-tick-list-new li {
    list-style: none !important;
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-family: 'Inter', sans-serif !important;
    color: #39352E !important;
    display: block !important;
}

.owin-product-feature-container .custom-tick-list-new li > div,
.owin-product-feature-container .custom-tick-list-new li > p {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    font-weight: inherit !important;
}

.owin-product-feature-container .custom-tick-list-new li::before {
    content: '';
    position: absolute !important;
    left: 0 !important;
    top: 3px !important;
    background-image: url('/cdn/shop/files/Vector_c9794b74-1916-4d2a-a8c0-b69016b0d437.png?v=1748934085') !important;
    background-size: 12px 10px !important;
    background-repeat: no-repeat !important;
    width: 12px !important;
    height: 10px !important;
}

/* --- МЕДИА-ЗАПРОСЫ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (ИЗМЕНЕНИЯ ЗДЕСЬ) --- */
@media screen and (max-width: 767px) {
    .owin-product-feature-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: 0 !important;
    }

    /* Убираем margin-left для второй колонки на мобильных, чтобы не было лишнего отступа */
    .owin-product-feature-container .owin-feature-column:nth-child(2) {
        margin-left: 15px !important;
    }

    /* Мобильный размер шрифта заголовков (используем твой обновленный размер) */
    .owin-feature-title {
        font-size: 10px; /* Твой обновленный размер заголовка для мобильных */
        line-height: 14px; /* Корректируем line-height */
        margin-top: 0 !important;
        text-align: center;
    }
    
    .owin-product-feature-container .owin-feature-column:nth-child(2) .owin-feature-title {
        margin-top: 0 !important;
    }

    /* Мобильные стили для custom-tick-list-new - уменьшен font-size */
    .owin-product-feature-container .custom-tick-list-new li {
        padding-left: 15px !important;
        margin-bottom: 5px !important;
        font-size: 10px !important; /* Основной текст 10px для мобильных */
        line-height: 14px !important;
    }

    /* !!! ИЗМЕНЕНИЕ: Размер TICK для мобильных !!! */
    .owin-product-feature-container .custom-tick-list-new li::before {
        width: 8px !important; /* Уменьшаем ширину TICK до 8px */
        height: 12px !important; /* Уменьшаем высоту TICK до 12px */
        top: 2px !important; /* Корректируем позиционирование TICK, чтобы он был выровнен с 10px текстом */
        left: 0 !important;
        background-size: contain !important; /* Убедимся, что изображение вписывается */
    }
    .owin-product-feature-container .custom-tick-list-new {
        margin-left: -5px !important;
        margin-top: 5px !important;
    }
}

/* СТИЛИ для пользовательского маркированного списка */

/* Стили для пользовательского маркированного списка */
.custom-bullet-list {
  list-style: none; /* Скрываем стандартные маркеры списка */
  margin: 0 !important; /* Убираем все внешние отступы, включая слева, с важностью */
  padding: 0 !important; /* Убираем все внутренние отступы, включая слева, с важностью */
}

.custom-bullet-list li {
  font-weight: 400; /* Устанавливаем вес шрифта */
  display: flex; /* Используем flexbox для выравнивания элементов внутри LI */
  align-items: baseline; /* Выравниваем элементы по их базовой линии (первая строка текста) */
  margin: 0 !important; /* Убираем все внешние отступы LI, включая слева, с важностью */
  padding: 0 !important; /* Убираем все внутренние отступы LI, включая слева, с важностью */
}

/* Создаем кастомный маркер с помощью псевдоэлемента ::before */
.custom-bullet-list li::before {
  content: "•"; /* Символ маркера-диска */
  color: inherit; /* Используем тот же цвет, что и у текста */
  display: inline-block; /* Делаем его строчно-блочным для управления отступами */
  line-height: 1; /* Убедимся, что маркер не влияет на межстрочный интервал */
  flex-shrink: 0; /* Запрещаем маркеру сжиматься */
}

.custom-bullet-list li span {
  display: block; /* Делаем span блочным, чтобы текст переносился как нужно */
  flex-grow: 1; /* Позволяем спану занимать все доступное пространство */
}

/* Стили для ПК версии */
@media screen and (min-width: 768px) {
  .custom-bullet-list {
    font-size: 20px; /* Размер шрифта для ПК */
  }

  .custom-bullet-list li {
    margin-bottom: 10px !important; /* Расстояние между булитами для ПК */
  }

  .custom-bullet-list li::before {
    font-size: 20px; /* Размер маркера для ПК */
    margin-right: 5px; /* Отступ 5px от маркера до текста для ПК */
  }

  .custom-bullet-list li span {
    line-height: 24px; /* Межстрочный интервал для ПК */
  }

  /* Для ПК, если <br> нужен для принудительного переноса, он остается видимым */
  .custom-bullet-list li span br {
    display: block; /* Показываем <br> на ПК */
    line-height: 0; /* Устранение лишнего межстрочного интервала */
    font-size: 0;
  }
}

/* Стили для мобильной версии */
@media screen and (max-width: 767px) {
  .custom-bullet-list {
    font-size: 16px; /* Размер шрифта для мобильных устройств */
    line-height: 18px;
  }

  .custom-bullet-list li {
    margin-bottom: 10px !important; /* Расстояние между булитами для мобильных устройств (увеличено до 10px) */
  }

  .custom-bullet-list li::before {
    font-size: 16px; /* Размер маркера для мобильной версии */
    margin-right: 3px; /* Отступ 3px от маркера до текста для мобильной версии */
  }

  .custom-bullet-list li span {
    line-height: 18px; /* Межстрочный интервал для мобильных устройств */
  }

  /* Убираем <br> для мобильной версии */
  .custom-bullet-list li span br {
    display: none !important; /* Скрываем тег <br> на мобильных устройствах */
  }
}

/* Стиль для жирного текста (уже есть в HTML через <strong>) */
.custom-bullet-list li span strong {
  font-weight: 700; /* Или любой другой жирный вес, если <strong> не достаточен */
}



/*---------------- Задаем стили CSS для выбора вариантов товара (ТЕКСТОВЫЕ КНОПКИ) -------------------*/

.t4s-swatch__list {
    display: flex;
    flex-wrap: wrap; /* Разрешаем перенос на следующую строку */
    gap: 8px; /* Расстояние между кнопками */
}

/* Стили для кнопок выбора запаха (НЕ сватчей) - Общие стили */
.t4s-swatch__item:not(.is-sw__color) {
    /* Чтобы текст не выходил за пределы кнопки */
    white-space: nowrap;     /* Запрещает перенос текста */
    overflow: hidden;        /* Обрезает текст, если он слишком длинный */
    text-overflow: ellipsis; /* Добавляет многоточие, если текст обрезан */
    
    /* Центрируем текст вертикально и горизонтально */
    display: flex;
    justify-content: center;
    align-items: center;
    
    box-sizing: border-box; /* Важно, чтобы padding и border учитывались в ширине */
    border: 1px solid #d3d3d3; /* Серая рамка для невыбранных кнопок */
    border-radius: 0;        /* Если хочешь квадратные кнопки */
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* Плавный переход при наведении/выборе */
}

/* Стиль для НЕ выбранной кнопки */
.t4s-swatch__item:not(.is-sw__color) {
    background-color: #FFFAF2; /* Обновленный цвет для невыбранных кнопок */
    color: #333; /* Темный текст для невыбранных */
    border-color: #d3d3d3; /* Серая рамка */
}

/* Стиль для ВЫБРАННОЙ кнопки (черная) */
.t4s-swatch__item:not(.is-sw__color).is--selected {
    background-color: #000; /* Черный фон */
    color: #fff; /* Белый текст */
    border-color: #000; /* Черная рамка */
}

/* Стиль при наведении на кнопку (для невыбранных) */
.t4s-swatch__item:not(.is-sw__color):not(.is--selected):hover {
    background-color: #EEE; /* Чуть темнее светлый фон при наведении */
    border-color: #AAA;
}


/* --- СТИЛИ ДЛЯ ДЕСКТОПНОЙ ВЕРСИИ --- */
@media (min-width: 769px) { /* Применяется для экранов шириной 769px и более */
    .t4s-swatch__item:not(.is-sw__color) {
        width: 230px;
        min-height: 55px;
        padding: 0 50px; /* 0px по вертикали, 50px по горизонтали */
        font-size: 20px;
        line-height: 1.2; /* Убедимся, что текст занимает одну строку */
    }
}

/* --- СТИЛИ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ --- */
@media (max-width: 768px) { /* Применяется для экранов шириной до 768px */
    .t4s-swatch__item:not(.is-sw__color) {
        width: 120px;
        min-height: 42px;
        padding: 0 18px; /* 0px по вертикали, 18px по горизонтали */
        font-size: 15px;
        line-height: 1.2; /* Убедимся, что текст занимает одну строку */
    }
}

/*---------------- Custom CSS for only mobile -------------------*/
@media (max-width: 767px){
  /* Ваши существующие стили для мобильных, например: */
  

  /* *** НОВЫЕ СТИЛИ ДЛЯ КОРРЕКЦИИ ОТСТУПОВ И ШИРИНЫ ВКЛАДОК *** */

  /* Устанавливаем желаемый отступ контента от края экрана на мобильных. */
  :root {
      --owin-mobile-content-edge-padding: 20px; /* ОСТАВЬТЕ ЭТО ЗНАЧЕНИЕ БЕЗ ИЗМЕНЕНИЙ, если оно уже хорошо выравнивает линии */
  }

  /*
    Воздействуем на ключевой элемент, который задает ширину и отступ табов.
  */
  .is--tab-design-mb__accordion.accordion-2 .t4s-tab-wrapper {
    margin-left: calc(-1 * var(--owin-mobile-content-edge-padding)) !important;
    margin-right: calc(-1 * var(--owin-mobile-content-edge-padding)) !important;
    width: calc(100% + (2 * var(--owin-mobile-content-edge-padding))) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /*
    Теперь корректируем внутренние отступы для заголовка таба и его содержимого.
    Здесь мы будем уменьшать padding-left для текста заголовка.
  */
  .t4s-tab__title .t4s-tab__text {
    /* Сдвигаем текст влево, уменьшая padding-left на 10px от переменной */
    padding-left: calc(var(--owin-mobile-content-edge-padding) - 10px) !important;
    padding-right: var(--owin-mobile-content-edge-padding) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    box-sizing: border-box !important;
  }

  .t4s-tab-content {
    padding-left: var(--owin-mobile-content-edge-padding) !important;
    padding-right: var(--owin-mobile-content-edge-padding) !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    box-sizing: border-box !important;
  }

  /* Убедимся, что .t4s-tab__title сам по себе не имеет лишних отступов */
  .t4s-tab__title {
      padding: 0 !important;
      margin: 0 !important;
      width: 100% !important;
      box-sizing: border-box !important;
  }

  /* Также обнуляем любые потенциальные паддинги у верхнего контейнера табов,
     чтобы избежать двойных отступов. */
  .t4s-tabs.t4s-accordion-mb-true {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Убедимся, что и t4s-product-tabs-wrapper (если есть) не добавляет отступов */
  .t4s-product-tabs-wrapper {
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      width: 100% !important;
      box-sizing: border-box !important;
  }
}


/*---------------- КОНЕЦ Custom GLOBALL CSS -------------------*/

/*---------------- Custom CSS for only desktop -------------------*/
@media (min-width: 1025px) {
  
}

/*---------------- Custom CSS for tablet, mobile -------------------*/
@media (max-width: 1024px) {
  
}

/*---------------- Custom CSS for only tablet -------------------*/
@media (min-width: 768px) and (max-width: 1024px) {
  
}

/*---------------- Custom CSS for only mobile -------------------*/
@media (max-width: 767px){
  
}