/* Резервируем место под полосу прокрутки навсегда (даже когда контент не скроллится) -
   иначе при открытии окна корзины Тильда делает body{overflow:hidden}, полоса прокрутки
   исчезает, ширина страницы "под капотом" увеличивается на её толщину (обычно 15-17px),
   и весь фон визуально дёргается/прыгает в момент открытия и закрытия корзины. */
html{ overflow-y:scroll; scrollbar-gutter:stable; }

/* В блоке "Смотрите также" тильда сама анимирует появление карточек: каждая карточка
   стартует смещённой на 100px вниз и невидимой, затем "взлетает" на своё место с задержкой
   ~160мс одна за другой (fadeinup). Именно это ощущается как "прыжок"/"дёрганье" карточек.
   Убираем вертикальное смещение и рывок, оставляя мягкое одновременное появление. */
.t-store__relevants-grid-cont [data-animate-style]{
  transition: opacity 0.15s ease-out !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Универсальный код для ВСЕХ блоков с карточками товара на сайте ffbeast.tilda.ws.
   Работает по общим классам Тильды (.js-product, .t-store__card, .js-store-prod-btn2 и т.д.),
   а не по id конкретного блока — поэтому автоматически покрывает:
   - блок #rec2470490731 (главная страница)
   - блок #rec2422407951 (страница /catalog, все страницы отдельных товаров /catalog/tproduct/...,
     включая кнопку "Добавить в корзину" на самой странице товара и карточки "Смотрите также")
   Если Тильда добавит ещё один блок с карточками товара где-то ещё — он подключится
   без каких-либо правок этого кода. */

.t-store__card-list{ align-items:stretch !important; }
.js-product{ display:flex !important; flex-direction:column !important; }
.t-store__card__wrap_txt-and-btns{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; }

.js-product.is-in-cart .js-store-prod-btn,
.js-product.is-in-cart .js-store-prod-btn2,
.js-product.is-in-cart .t-store__prod-popup__btn{ background-color:#279a43 !important; cursor:pointer; }

.t-store__card__btns-wrapper{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:8px;
  align-items:center;
  width:100%;
  box-sizing:border-box;
  margin-top:auto !important;
}
.t-store__card__btns-wrapper > a,
.t-store__card__btns-wrapper > .js-store-prod-btn2,
.t-store__card__btns-wrapper > .ffb-qty{
  flex:1 1 calc(50% - 4px) !important;
  width:auto !important;
  max-width:calc(50% - 4px) !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  margin:0 !important;
  align-self:center !important;
  vertical-align:middle !important;
  justify-content:center;
  text-align:center;
}
.t-store__card__btns-wrapper > a:only-child,
.t-store__card__btns-wrapper > .js-store-prod-btn2:only-child{ flex:1 1 100% !important; max-width:100% !important; }

.ffb-qty{ order:1; }
.js-store-prod-btn{ order:2 !important; }
.js-store-prod-btn2.t-store__card__btn_second{ order:2 !important; }
.t-store__card__btn_second{ order:3; }

.ffb-qty{
  display:flex;
  align-items:center;
  justify-content:space-between !important;
  gap:4px;
  border:1px solid #e0e0e0;
  border-radius:10px;
  padding:6px 16px;
}
.ffb-qty button{
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  font-size:25px !important;
  font-weight:600 !important;
  line-height:1;
  cursor:pointer;
  color:#2fae4e;
  width:20px;
  height:20px;
  padding:0;
}
.ffb-qty button:hover{ color:#24863a !important; }
.ffb-qty span{
  min-width:16px;
  text-align:center;
  font-weight:600;
  font-size:16px !important;
  color:#1a1a1a !important;
  line-height:1;
  font-family:'FFbeast' !important;
}

.t-store__card__textwrapper{ display:flex; flex-direction:column; }
.t-store__card__title{ order:1; margin-bottom:0; min-height:48.6px; }
.t-store__card__price-wrapper{ order:2; margin-top:8px !important; margin-bottom:0; }

/* Тильда каждые ~200-500мс (при перерисовке блока "Смотрите также") заново выставляет
   инлайн -webkit-line-clamp:1 на описании, а наш JS следом перебивает обратно на 2 -
   из-за этой "войны" высота блока описания скачет 17.5px <-> 35px каждые доли секунды,
   и вместе с ней дёргается всё, что ниже (цена, кнопки). Жёстко фиксируем высоту под
   ровно 2 строки независимо от текущего значения line-clamp, чтобы карточка больше
   не "прыгала" по высоте, даже в момент, когда Тильда на миг возвращает clamp:1. */
.t-store__card__descr{
  order:3;
  margin-top:8px;
  height:35px !important;
  min-height:35px !important;
  max-height:35px !important;
}

.t-store__card__mark-wrapper{ display:none !important; }
.t-store__card__price{ display:flex !important; align-items:baseline !important; width:100% !important; }
.t-store__card__mark{
  background-color:transparent !important;
  color:#EE8A52 !important;
  border-radius:0 !important;
  padding:0 !important;
  margin-left:auto !important;
  width:auto !important;
  height:auto !important;
  display:inline !important;
  vertical-align:middle;
  font-family:'FFbeast' !important;
  font-weight:700 !important;
  font-size:20px !important;
}

.t-store__prod-popup__btn{ font-weight:500 !important; }

/* Кнопка "Добавить в корзину" в блоке "Смотрите также" на странице товара использует другой
   шаблон Тильды (классы t-btn t-btn_xs без t-btnflex), из-за чего она ниже (35px), чем кнопки
   на главной/каталоге (45px). Выравниваем высоту и внутренние отступы под общий стиль. */
.js-store-prod-btn2.t-btn_xs{
  height:45px !important;
  padding-top:11px !important;
  padding-bottom:11px !important;
  line-height:22px !important;
}

/* В блоке "Смотрите также" число цены иногда появляется на 0.5-1 сек позже, чем всё
   остальное содержимое карточки (картинка, название, кнопка) - в этот момент видна только
   валюта "р" без цифр. Плавно скрываем блок цены на этот короткий момент, чтобы не было
   визуального "глюка", и сразу показываем, как только цифры реально появились в DOM. */
.t-store__card__price{ transition:opacity .15s ease; }
.t-store__card__price.ffb-price-hide{ opacity:0 !important; }

/* На странице товара (блок "подробнее", .t-store__prod-popup__btn-wrapper) три элемента:
   кнопка "Добавить в корзину"/"В корзине", степпер +/- (появляется после добавления
   в корзину) и кнопка "избранное" (сердечко) - она есть в блоке всегда.
   Логика: 1) весь блок ограничен максимальной шириной 315px (ЗНАЧЕНИЕ ДЛЯ РЕДАКТИРОВАНИЯ
   указано ниже), чтобы кнопка не растягивалась на всю ширину поповера; 2) сердечко
   всегда фиксированной естественной ширины и всегда справа от кнопки/степпера;
   3) когда товара ещё нет в корзине - кнопка "Добавить в корзину" занимает всё
   оставшееся место (не 50%, иначе текст обрезается на мобильных); 4) когда товар
   в корзине - степпер занимает свою естественную ширину, а кнопка "В корзине"
   занимает всё оставшееся место (тоже не жёсткое 50/50, чтобы кнопке всегда
   хватало места под текст). */
.t-store__prod-popup__btn-wrapper{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  max-width:315px !important; /* <-- ЗДЕСЬ меняется общая максимальная ширина блока кнопок на странице товара */
}
.t-store__prod-popup__btn-wrapper .t1002__addBtn{
  order:3 !important;
  flex:0 0 auto !important;
}
.js-product:not(.is-in-cart) .t-store__prod-popup__btn-wrapper .t-store__prod-popup__btn{
  order:2 !important;
  flex:1 1 auto !important;
  width:auto !important;
  max-width:none !important;
  box-sizing:border-box !important;
}
.js-product.is-in-cart .t-store__prod-popup__btn-wrapper .ffb-qty{
  order:1 !important;
  flex:0 0 auto !important;
  width:auto !important;
  box-sizing:border-box !important;
}
.js-product.is-in-cart .t-store__prod-popup__btn-wrapper .t-store__prod-popup__btn{
  order:2 !important;
  flex:1 1 auto !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  margin:0 !important;
}
/* Всплывающее окно при добавлении товара в корзину */
.t706__bubble{
  background-color: rgba(255,255,255,0.65) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}
.t706__bubble-text{
  color: rgb(42,42,41) !important;
}
.t706__bubble-close{
  color: rgb(42,42,41) !important;
}

  /* Всплывающее окно при добавлении товара в избраное */
.t1002__bubble{
  background-color: rgba(255,255,255,0.65) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}
.t1002__bubble-text{
  color: rgb(42,42,41) !important;
}
.t1002__bubble-close{
  color: rgb(42,42,41) !important;
}

/* Прозрачна карзина */
.t706__sidebar-content{
  background-color: rgba(255,255,255,0.65) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

/* Красная строка */

.ffb-article-p{
  text-indent: 15px !important;
  text-align: justify !important;
  margin: 0 !important;
  display: block !important;
}

#rec1724084621 .t-popup__close,
#rec1724084621 .t-popup__block-close {
  top: 30px !important;
  right: 20px !important;
}

/* Замена сердечка на карточках товара на фирменный значок FFBeast */
.t1002__addBtn svg { display: none !important; }

.t1002__addBtn {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.t1002__addBtn::before {
  content: '';
  display: block;
  width: 38px;
  height: 38px;
  background-image: url('https://static.tildacdn.com/tild6439-6565-4864-a266-333138323032/photo.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.t1002__addBtn_active::before {
  background-image: url('https://static.tildacdn.com/tild6461-3362-4437-b865-666133346262/_.png') !important;
}

/* Эффект увеличения при наведении на иконку избранного */
.t1002__addBtn::before {
  transition: transform 0.2s ease;
}

.t1002__addBtn:hover::before {
  transform: scale(1.1);
}

/* Лёгкий эффект нажатия (опционально) */
.t1002__addBtn:active::before {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

/* Эффект увеличения при наведении и сжатия при клике */
a.js-store-prod-btn2.t-store__card__btn_second,
.ffb-qty button,
.t706__product-minus,
.t706__product-plus,
.iconcart .tn-atom,
.tn-elem__24874531811784617720628000002 .tn-atom,
.tn-elem__24874531811784617810230000002 .tn-atom,
.tn-elem__24874531811782206746082 .tn-atom {
  transition: transform 0.2s ease;
}

a.js-store-prod-btn2.t-store__card__btn_second:hover,
.ffb-qty button:hover,
.t706__product-minus:hover,
.t706__product-plus:hover,
.iconcart .tn-atom:hover,
.tn-elem__24874531811784617720628000002 .tn-atom:hover,
.tn-elem__24874531811784617810230000002 .tn-atom:hover,
.tn-elem__24874531811782206746082 .tn-atom:hover {
  transform: scale(1.1);
}

a.js-store-prod-btn2.t-store__card__btn_second:active,
.ffb-qty button:active,
.t706__product-minus:active,
.t706__product-plus:active,
.iconcart .tn-atom:active,
.tn-elem__24874531811784617720628000002 .tn-atom:active,
.tn-elem__24874531811784617810230000002 .tn-atom:active,
.tn-elem__24874531811782206746082 .tn-atom:active {
  transform: scale(0.95);
}

/* Уменьшенный масштаб именно для кнопки Добавить в корзину / В корзине */
a.js-store-prod-btn2.t-store__card__btn_second:hover {
  transform: scale(1.03);
}

a.js-store-prod-btn2.t-store__card__btn_second:active {
  transform: scale(0.98);
}

.js-store-buttons-wrapper {
  min-height: 48px !important;
  box-sizing: border-box !important;
}

.js-product .t1002__addBtn {
  top: -5px !important;
  right: -5px !important;
}