/* ============================================================
   1. ОТСТУПЫ КОНТЕЙНЕРА КАРТОЧКИ ТОВАРА (сниппет)
   Управляет «воздухом» сверху/снизу у блока товара.
   ============================================================ */

/* 1. Настройка для компьютеров (десктопов) по умолчанию */
.t-store.t-store__prod-snippet__container {
    padding-top: 45px !important;  /* Сверху на ПК — 45px */
    padding-bottom: 0px !important; /* Снизу — 0px */
}

/* 2. Настройка для мобильных устройств (экраны меньше 1024px) */
@media (max-width: 1023px) {
    .t-store.t-store__prod-snippet__container {
        padding-top: 30px !important; /* Сверху на мобилках — 30px */
    }
}


/* ============================================================
   2. БЛОК ОПИСАНИЯ ВАРИАНТА
   Тот самый div.js-custom-variant-desc, который создаёт JS
   и вставляет между опциями и ценой.
   ============================================================ */

/* --- БЛОК ОПИСАНИЯ ВАРИАНТА --- */
.js-custom-variant-desc {
    margin-top: 15px;
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 1.5;
    color: #595959;
    font-family: 'Geologica', sans-serif;
    font-weight: 300;
}

/* Настройки для мобильных (до 1023px) */
@media (max-width: 1023px) {
    .js-custom-variant-desc {
        font-size: 12px !important;  /* Чуть увеличил с 10 до 12 для читаемости */
        line-height: 1.4;
        margin-top: 20px;
        margin-bottom: 25px;

        /* Убираем лишние padding, чтобы блок прижался к краям контейнера Тильды */
        padding-left: 0 !important;
        padding-right: 0 !important;

        /* Гарантируем отсутствие margin, если вдруг контейнер родителя имеет свои отступы */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* ============================================================
   3. ТАБЫ ТОВАРА — ОТСТУПЫ
   Убираем нижний отступ у табов и задаём одинаковый зазор
   до следующего за ними блока.
   ============================================================ */

.t-store__tabs {
  margin-bottom: 0 !important;
}

.t-store__tabs + * {
  margin-top: 15px !important;
}


/* ============================================================
   4. РАЗМЕРЫ ШРИФТОВ В ПОПАПЕ ТОВАРА
   Текст описания — мельче, характеристики — крупнее.
   ============================================================ */

.t-store__prod-popup__text *,
.js-store-prod-all-text {
  font-size: 12px !important;
}


.js-store-prod-charcs {
  font-size: 14px !important;
}


/* ============================================================
   5. КНОПКИ ВЫБОРА ВАРИАНТА (опции товара)
   Активная опция — жёлтая заливка, тёмный текст,
   плавное переключение и увеличенные боковые отступы.
   ============================================================ */

/* Активная кнопка: фон и рамка фирменного жёлтого */
.t-product__option-item_active .t-product__option-checkmark,
.t-product__option-item_active {
  background-color: #F9C909 !important;
  border-color: #F9C909 !important;
}


/* Текст на активной кнопке: тёмный, без жирности */
.t-product__option-item_active .t-product__option-title {
  color: #323232 !important;
  font-weight: 400 !important;
}

/* Плавная анимация при переключении вариантов */
.t-product__option-item,
.t-product__option-item .t-product__option-title,
.t-product__option-checkmark {
  transition: all 0.2s ease !important;
}

/* Боковые отступы внутри кнопок-вариантов */
.t-product__option-item_buttons {
  padding-left: 16px !important;
  padding-right: 16px !important;
}


/* ============================================================
   6. ВЕРТИКАЛЬНАЯ ПОДГОНКА ТАБОВ КАТАЛОГА (.js-store-tabs)
   Сдвигаем блок табов относительно исходного положения:
   на мобилке — вниз, на десктопе — вверх.
   ============================================================ */

/* Для мобильных устройств (экраны меньше 1024px) */
@media (max-width: 1023px) {
    .js-store-tabs {
        position: relative;
        top: 10px; /* Здесь задайте нужное значение для мобильных */
    }
}

/* Для компьютеров (экраны от 1024px и больше) */
@media (min-width: 1024px) {
    .js-store-tabs {
        position: relative;
        top: -20px;
    }
}


/* ============================================================
   7. СЛАЙДЕР ИЗОБРАЖЕНИЙ В ПОПАПЕ ТОВАРА — МОБИЛЬНАЯ ВЕРСИЯ
   Ужимаем картинку по высоте, поднимаем её вверх (transform)
   и убираем боковые отступы у контейнера попапа.
   ============================================================ */

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

    /* 1. Геометрия контейнера */
    .js-store-prod-slider, 
    .t-store__prod-popup__slider-wrap {
        max-width: calc(100% - 30px) !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
    }

    /* 2. Жесткая настройка высоты */
    .t-store__prod-popup__slider .t-slds__bgimg,
    .t-store__prod-popup__slider .t-slds__img,
    .t-store__prod-popup__slider .t-slds__main,
    .t-store__prod-popup__slider .t-slds__container {
        height: 140px !important; 
    }

    /* 3. ПОДЪЕМ СОВЫ ЧЕРЕЗ ПРОЦЕНТЫ */
    .t-store__prod-popup__slider .t-slds__bgimg {
        /* Пробуем -75% или -50%, чтобы найти идеальный баланс */
        transform: translateY(-25%) !important; 

        background-position: center center !important; 
        background-size: contain !important; 
        background-repeat: no-repeat !important; 
        background-color: #292929 !important; 
        width: 100% !important;
        height: 100% !important;
    }

    /* Дублируем для тега img */
    .t-store__prod-popup__slider .t-slds__item .t-slds__img {
        transform: translateY(-25%) !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; 
        object-position: center center !important; 
    }

    /* 4. Остальные настройки отображения */
    .t-slds__items-wrapper {
        text-align: left !important;
    }

    .t-store__prod-popup__info {
        padding-left: 15px !important;  
        padding-right: 15px !important; 
    }

    .t-store__prod-popup__container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }
}


/* ============================================================
   8. ТЕКСТ ВНУТРИ ТАБОВ ТОВАРА
   Размер и межстрочный интервал контента вкладок.
   ============================================================ */

/* Стили для компьютеров и планшетов */
div.t-store__tabs__content.t-descr.t-descr_xxs {
    font-size: 12px !important;
    line-height: 1.55 !important;
}

/* Стили для мобильных телефонов (ширина экрана 640px и меньше) */
@media screen and (max-width: 640px) {
    div.t-store__tabs__content.t-descr.t-descr_xxs {
        font-size: 10px !important;
    }
}