/* =========================================
   GLOBAL STYLES (amanita project)
   Версия: 2025-08-30
   ========================================= */

/* ================================
   Кастомная сетка для блока T758 (хлебные крошки)
   ================================= */

/* Вариант для широких экранов ≥1400px */
@media screen and (min-width: 1400px) {
    .t758 .t-container {
        width: 1320px !important;
        max-width: 1320px;
    }
  
    .t758 .t-col ul {
        margin-bottom: -5px !important;
    }
  }
  
  /* Вариант для экранов 1200–1399px */
  @media screen and (min-width: 1200px) and (max-width: 1399px) {
    .t758 .t-container {
        width: 1180px !important;
        max-width: 1180px;
    }
  
    .t758 .t-col ul {
        margin-bottom: -5px !important;
    }
  }

  /* =========================================
   Оформление вариантов товара (options)
   ========================================= */

/* Скругление углов и отступы у вариантов товара */
.js-product .t-product__option-variants_buttons .t-product__option-item_simple {
    padding: 10px 15px;
    border-radius: 6px;
}

/* Активная кнопка варианта */
.t-product__option-item.t-product__option-item_active {
  background-color: #FFE6CA !important;
  border-color: #FFE6CA !important;
  color: #FFFFFF !important;
}

/* Толщина и размер текста */
.t-product__option-variants_buttons .t-product__option-item span {
  font-weight: 400;
  font-size: 14px;
}

/* Отступ заголовка от вариантов */
.t-store .t-product__option-title {
    padding-bottom: 10px;
}

/* =========================================
   Метка "Sale" на карточке товара (listing)
   ========================================= */
   .js-store-grid-cont a .t-store__card__mark {
    width: 80px;
    border-radius: 10px;
    font-size: 13px;
  }

  /* =========================================
   Кастомная сетка каталога товаров (ST310N)
   ========================================= */

/* Глобальные переменные для разных разрешений */
:root {
    /* Десктоп под 1360px */
    --grid1360: 1fr 1fr 1fr;
    --gap1360: 20px;
    --heightImg1920: 280px !important;

    /* 1200–1359px */
    --gridDesktop: 1fr 1fr 1fr;
    --gapDesktop: 20px;
    --heightImgDesktop: 260px !important;

    /* 960–1199px */
    --gridTabletLarge: 1fr 1fr 1fr;
    --gapTabletLarge: 20px;
    --heightImgTabletLarge: 200px !important;
    --fontSizeTitleTabletLarge: 18px;
    --fontSizeDescrTabletLarge: 16px;
    --fontSizePriceTabletLarge: 20px;
    --fontSizeOldPriceTabletLarge: 14px;

    /* 640–959px */
    --gridTabletSmall: 1fr 1fr;
    --gapTabletSmall: 15px;
    --heightImgTabletSmall: 210px !important;
    --fontSizeTitleTabletSmall: 18px;
    --fontSizeDescrTabletSmall: 15px;
    --fontSizePriceTabletSmall: 18px;
    --fontSizeOldPriceTabletSmall: 14px;

    /* до 640px */
    --gridMobile: 1fr;
    --gapMobile: 18px !important;
    --heightImgMobile: 280px !important;
    --fontSizeTitleMobile: 20px;
    --fontSizeDescrMobile: 16px;
    --fontSizePriceMobile: 24px;
    --fontSizeOldPriceMobile: 10px;
}

/* базовые правки */
.js-store-grid-cont:before { 
    display: none; 
}

.t-store__card__wrap_all { 
    height: 100% !important; 
}

.t-store__grid-separator { 
    display: none; 
}

.js-product:not(.js-product-relevant),
.t-store__stretch-col {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* общий контейнер списка карточек */
.js-store-grid-cont .t-store__card-list {
    width: 100%;
    box-sizing: border-box;
}

/* >=1360px */
@media screen and (min-width: 1360px) {
    .js-store-grid-cont {
        max-width: 1360px;
        padding: 0 20px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .js-store-grid-cont .t-store__card-list {
        display: grid !important;
        grid-template-columns: var(--grid1360);
        grid-gap: var(--gap1360);
        row-gap: var(--gap1360) !important;
        column-gap: var(--gap1360) !important;
    }

    .t-store__card__imgwrapper {
        height: var(--heightImg1920);
        padding-bottom: 0 !important;
    }
}

/* 1200–1359px */
@media (min-width: 1200px) and (max-width: 1359px) {
    .js-store-grid-cont {
        padding: 0 20px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .js-store-grid-cont .t-store__card-list {
        display: grid !important;
        grid-template-columns: var(--gridDesktop);
        grid-gap: var(--gapDesktop);
        row-gap: var(--gapDesktop) !important;
        column-gap: var(--gapDesktop) !important;
    }

    .t-store__card__imgwrapper {
        height: var(--heightImgDesktop);
        padding-bottom: 0 !important;
    }
}

/* 960–1199px */
@media (min-width: 960px) and (max-width: 1199px) {
    .js-store-grid-cont {
        padding: 0 15px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .js-store-grid-cont .t-store__card-list {
        display: grid !important;
        grid-template-columns: var(--gridTabletLarge);
        grid-gap: var(--gapTabletLarge);
        row-gap: var(--gapTabletLarge) !important;
        column-gap: var(--gapTabletLarge) !important;
    }

    .t-store__card__imgwrapper {
        height: var(--heightImgTabletLarge);
        padding-bottom: 0 !important;
    }

    .js-store-prod-name { 
        font-size: var(--fontSizeTitleTabletLarge) !important; 
    }
    .js-store-prod-descr { 
        font-size: var(--fontSizeDescrTabletLarge) !important; 
    }
    .js-product-price,
    .t-store__card__price-currency { 
        font-size: var(--fontSizePriceTabletLarge) !important; 
    }
    .t-store__card__price_old { 
        font-size: var(--fontSizeOldPriceTabletLarge) !important; 
    }
}

/* 640–959px */
@media (min-width: 640px) and (max-width: 959px) {
    .js-store-grid-cont {
        padding: 0 10px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .js-store-grid-cont .t-store__card-list {
        display: grid !important;
        grid-template-columns: var(--gridTabletSmall);
        grid-gap: var(--gapTabletSmall);
        row-gap: var(--gapTabletSmall) !important;
        column-gap: var(--gapTabletSmall) !important;
    }

    .t-store__card__imgwrapper {
        height: var(--heightImgTabletSmall);
        padding-bottom: 0 !important;
    }

    .js-store-prod-name { 
        font-size: var(--fontSizeTitleTabletSmall) !important; 
    }
    .js-store-prod-descr { 
        font-size: var(--fontSizeDescrTabletSmall) !important; 
    }
    .js-product-price,
    .t-store__card__price-currency { 
        font-size: var(--fontSizePriceTabletSmall) !important; 
    }
    .t-store__card__price_old { 
        font-size: var(--fontSizeOldPriceTabletSmall) !important; 
    }
}

/* до 640px */
@media screen and (max-width: 639px) {
    .js-store-grid-cont {
        padding: 0 10px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .js-store-grid-cont .t-store__card-list {
        display: grid !important;
        grid-template-columns: var(--gridMobile);
        grid-gap: var(--gapMobile);
        row-gap: var(--gapMobile) !important;
        column-gap: var(--gapMobile) !important;
    }

    .t-store__card__imgwrapper {
        height: var(--heightImgMobile);
        padding-bottom: 0 !important;
    }

    .js-store-prod-name { 
        font-size: var(--fontSizeTitleMobile) !important; 
    }
    .js-store-prod-descr { 
        font-size: var(--fontSizeDescrMobile) !important; 
    }
    .t-store__card__price { 
        font-size: var(--fontSizePriceMobile) !important; 
    }
    .t-store__card__price_old { 
        font-size: var(--fontSizeOldPriceMobile) !important; 
    }
}

/* Доп. уточнение заголовка в карточке (моб.) */
@media (max-width: 640px) {
    .js-store-grid-cont a .t-store__card__title { 
        font-size: 22px !important; 
    }
}


/*Оставляем только иконку внутри кнопки*/
:root{
  /* Настройки кнопки */
  --btn-padding-y: 14px;   /* сверху/снизу */
  --btn-padding-x: 18px;   /* слева/справа */
  --btn-icon-size: 20px;   /* размер иконки */
  --btn-icon-url: url("https://static.tildacdn.com/tild3065-6665-4061-a239-383163623930/photo.svg");
}

/* Кнопка только с иконкой */
.js-store-prod-btn2{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: var(--btn-padding-y) var(--btn-padding-x) !important;
  width: fit-content !important; /* если нужна вся ширина — меняем на 100% */
  flex-shrink: 0;
}

/* Скрываем текст */
/*.js-store-prod-btn2 .t-btnflex__text{*/
/*  display: none !important;*/
/*}*/

/* Добавляем иконку */
.js-store-prod-btn2::before{
  content: "";
  display: inline-block;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  background: center / contain no-repeat var(--btn-icon-url);
  flex: 0 0 var(--btn-icon-size);   /* запрещаем сжатие */
}


/* =========================================
   Прочее
   ========================================= */

/* Уменьшаем расстояние между элементами в блоке кнопок */
.t-store__card__btns-wrapper {
    gap: 5px;
}

/* =========================================
   СМОТРЕТЬ ТАКЖЕ (related / relevant products)
   ========================================= */


    /*фон карточек смотреть также*/
.js-store div div div div .js-product-relevant > div{
 background-color:#f4f4f4 !important;
}

    @media screen and (min-width: 1200px){
    /* Ширина контента */
.js-store div .js-product-relevant{
 max-width:320px !important;
 margin-right:0px;
 transform:translatex(0px) translatey(0px);
}

/* Скругление верхних углов картинки */
.js-store .js-product-relevant .loaded{
 border-top-left-radius:18px;
 border-top-right-radius:18px;
}
}

@media (min-width:960px) and (max-width:1199px){

 /* Ширина контента */
 .js-store div .js-product-relevant{
  max-width:292px !important;
  transform:translatex(0px) translatey(0px);
  margin-right:10px !important;
 }
 
 /* Размер шрифта заголовка */
 .js-store .js-product-relevant a .t-name{
  font-size:20px !important;
 }
 
 /* Скругление верхних углов картинки */
 .js-product-relevant > div > a > div div{
  border-top-left-radius:18px;
  border-top-right-radius:18px;
 }
 
}

@media (min-width:640px) and (max-width:959px){

 #allrecords .t-rec .t778 .js-store .t-popup_show .t-popup__container-animated div div div div .js-product-relevant{
  width:320px !important;
 }
 
 /* Ширина одной карточки */
 .js-store div .js-product-relevant{
  min-width:54% !important;
 }
 
 /* отступ у карточки */
 .js-store .t-popup_show .t-popup__container-animated div div div div .js-product-relevant{
  margin-right:0px !important;
 }
 
 /* Размер шрифта заголовка */
 .js-store .js-product-relevant a .t-name{
  font-size:18px !important;
 }
 
 /* Скругление верхних углов картинки */
 .js-product-relevant > div > a > div div{
  border-top-left-radius:18px;
  border-top-right-radius:18px;
 }
 
}

@media (max-width:639px){

 /* Ширина одной карточки */
 .js-store div .js-product-relevant{
  min-width:90% !important;
 }
 
 /* отступ у карточки */
 .js-store .t-popup_show .t-popup__container-animated div div div div .js-product-relevant{
  margin-right:0px !important;
 }
 
 /* Размер шрифта заголовка */
 .js-store .js-product-relevant a .t-name{
  font-size:18px !important;
 }
 
 /* Скругление верхних углов картинки */
 .js-product-relevant > div > a > div div{
  border-top-left-radius:18px;
  border-top-right-radius:18px;
 }
 
}


/* Пометка Sale */
.t-store__card__mark {
    border-radius: 12px;
    width: 65px;
}




/* ====== "Вам может понравиться" — 3 карточки в ряд на десктопе ====== */
@media screen and (min-width: 960px) {

  /* сам список релевантных товаров превращаем в грид */
  .t-store__relevants-grid-cont .t-store__card-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;   /* горизонтальный отступ между карточками */
    row-gap: 30px;      /* вертикальный, если вдруг будет вторая строка */
  }

  /* карточки внутри грида — без своих max-width и маргинов */
  .t-store__relevants-grid-cont .js-product-relevant {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;      /* убиваем и left, и right, и всё остальное */
  }
}



  
  /* Плавная анимация карточки при hover */
  .js-product.t-store__card.t-col.t-col_4.t-align_left.t-item {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* ⚠️ Селектор привязан к конкретной сетке (t-col_4).
       На других брейкпоинтах колоночный класс меняется, и стиль может не примениться.
       Если эффект нужен везде, можно прицельно целиться в общий класс карточки. */
  }
  
  /* Незначительное уменьшение карточки при наведении */
  .js-product.t-store__card.t-col.t-col_4.t-align_left.t-item:hover {
    transform: scale(0.99); /* уменьшение на 1% */
    /* ⚠️ Если где-то ещё задаётся transform для карточки (например, сдвиг/подъём),
       это свойство перезапишет тот transform целиком. */
  }

  
/* =========================================
   Попап товара: оформление блока "Характеристики"
   ========================================= */
   .js-store-prod-text .js-store-prod-all-charcs .js-store-prod-charcs {
    /* Фон под список характеристик */
    background-color: #EAF9FF;
  
    /* Внутренние отступы со всех сторон */
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  
    /* Внешний отступ сверху от соседних элементов */
    margin-top: 10px;
  
    /* Скругление углов контейнера */
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  
    /* Размер шрифта пунктов характеристик */
    font-size: 18px;
  }


  /* =========================================
   Попап товара: типографика (заголовки/описания)
   ========================================= */

/* ≥1200px: крупные экраны */
@media (min-width:1200px){
    .t-name_xl { 
      font-size: 28px;           /* Крупный заголовок (H1/H2 в попапе) */
    }
    .t-name_md { 
      font-size: 24px;           /* Подзаголовок/название товара поменьше */
    }
    .t-descr_xxs { 
      font-size: 17px;           /* Мелкий описательный текст */
    }
  }
  
  /* 640–1199px: планшеты и узкие десктопы */
  @media (min-width:640px) and (max-width:1199px){
    .t-name_xl { 
      font-size: 22px !important;  /* ⚠️ !important для перебития базовых стилей Тильды */
    }
    .t-name_md { 
      font-size: 18px !important;
    }
    .t-descr_xxs { 
      font-size: 16px !important;
    }
  }
  
  /* ≤639px: мобильные */
  @media (max-width:639px){
    .t-name_xl { 
      font-size: 23px;             /* Крупный заголовок на мобиле */
    }
    .t-name_md { 
      font-size: 23px !important;  /* ⚠️ По размеру равен .t-name_xl — проверь, так задумано ли */
    }
    .t-descr_xxs { 
      font-size: 16px !important;  /* Базовый мелкий текст на мобиле */
    }
  
    .t-store__relevants__title {
      font-size: 20px;             /* Заголовок блока «Смотреть также» в попапе */
      margin-top: 30px;
      margin-bottom: 25px;
    }
  }
  
  /* ⚠️ Примечание:
     Классы .t-name_* и .t-descr_* — глобальные типографические классы Тильды.
     Эти правила затронут все элементы с этими классами в рамках брейкпоинтов.
     Если нужно ограничить только попап товара, можно в будущем заскаупить через родителя,
     например: .t-store__prod-popup .t-name_xl { ... } (это не правка, просто пометка). */



   /* =========================================
   T395: табы — контейнер, табы, типографика
   ========================================= */

/* Обёртка списка табов: допускаем перенос и задаём зазоры */
.t395__wrapper {
    display: flex;
    flex-wrap: wrap;         /* перенос на новую строку при нехватке места */
    gap: 10px;               /* расстояние между кнопками табов */
    justify-content: flex-start;
  }
  
  /* Отдельная кнопка-таба: свободная ширина и скругление */
  .t395__tab {
    width: auto !important;  /* переопределяем фиксированную ширину */
    flex-shrink: 0;          /* не сжимать табы меньше контента */
    border-radius: 9px;      /* скругление углов */
    overflow: hidden;        /* обрезаем выступающие части (иконки/фон) */
    /* 💡 Если используешь focus-outline, проверь, не обрежется ли подсветка фокуса */
  }
  
  /* ===== ≥1360px: ограничение ширины контейнера ===== */
  @media screen and (min-width: 1360px) {
    .t395 .t-container {
      max-width: 1280px;
      margin-left: auto;
      margin-right: auto;
    }
    .t395 .t-container .t-width_12 {
      max-width: 1280px;
      margin-left: auto;
      margin-right: auto;
    }
  }
  
  /* ===== 1200–1359px ===== */
  @media screen and (min-width: 1200px) and (max-width: 1359px) {
    .t395 .t-container {
      max-width: 1120px;
      margin-left: auto;
      margin-right: auto;
    }
    .t395 .t-container .t-width_12 {
      max-width: 1120px;
      margin-left: auto;
      margin-right: auto;
    }
  }
  
  /* ===== 960–1199px ===== */
  @media screen and (min-width: 960px) and (max-width: 1199px) {
    .t395 .t-container {
      max-width: 920px;
      margin-left: auto;
      margin-right: auto;
    }
    .t395 .t-container .t-width_12 {
      max-width: 920px;
      margin-left: auto;
      margin-right: auto;
    }
  
    /* Размеры кнопок табов на этом брейкпоинте */
    .t395__wrapper .t395__title {
      font-size: 15px !important;
      padding-top: 12px !important;
      padding-bottom: 12px !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
  }
  
  /* ===== 640–959px ===== */
  @media screen and (min-width: 640px) and (max-width: 959px) {
    .t395 .t-container {
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }
    .t395 .t-container .t-width_12 {
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }
  
    /* Чуть компактнее кнопки табов */
    .t395__wrapper .t395__title {
      font-size: 14px !important;
      padding-top: 10px !important;
      padding-bottom: 10px !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
  }
  
  /* ===== ≤639px ===== */
  @media screen and (max-width: 639px) {
    .t395 .t-container,
    .t395 .t-container .t-width_12 {
      width: 100%;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
    }
  
    /* Ещё компактнее на мобиле */
    .t395__wrapper .t395__title {
      font-size: 14px !important;
      padding-top: 8px !important;
      padding-bottom: 8px !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
  }
  
  
  /* ===== Мобилка: выровнять высоту "кол-во" и кнопки в попапе ===== */
@media screen and (max-width: 480px) {
  /* Родительская строка */
  .t-store__prod-popup__btn-wrapper {
    align-items: stretch; /* растягиваем детей по высоте строки */
  }

  /* Счётчик и кнопка получают одинаковую высоту */
  .t-store__prod-popup__btn-wrapper .t-store__prod__quantity,
  .t-store__prod-popup__btn-wrapper .t-store__prod-popup__btn {
    height: 50px !important;   /* при необходимости подгони 48–56px */
  }

  /* Убираем лишний вертикальный паддинг у кнопки,
     чтобы она не была выше из-за внутренних отступов */
  .t-store__prod-popup__btn-wrapper .t-store__prod-popup__btn {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex;
    align-items: center; /* центрируем текст и иконку по вертикали */
  }
}