/* =========================================================
   STORE: grid spacing (<=960)
   ========================================================= */
@media screen and (max-width: 960px){
  .t-store__grid-cont .t-store__card-list.t-store__card-list{
    row-gap: 10px !important;
  }
}

/* =========================================================
   DESKTOP: title spacing in cards (>=980)
   ========================================================= */
@media screen and (min-width: 980px){
  .t-store__card__title{
    margin-bottom: 25px !important; /* 15–30px */
    display: block !important;
  }
}

/* =========================================================
   MOBILE: global container/columns tweaks (<=960)
   ========================================================= */
@media screen and (max-width: 960px){

  /* col padding reset */
  .t-col{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* store card text wrapper in one-row */
  .t-store__grid-cont_mobile-one-row .store__card__wrap_txt-and-opts .t-store__card__textwrapper{
    padding-left: 10px !important;
    padding-right: 30px !important;
    margin-top: 0 !important;
  }

  .t-store__grid-cont_mobile-one-row .t-store__card__price-wrapper{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* container padding on mobile */
  .t-container{
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-top: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   STORE: spacing inside cards (base)
   ========================================================= */
.t-store__card__price-wrapper_above-title{ margin-bottom: 0 !important; }
.t-store__card__sold-out-msg{ margin-top: 0 !important; }
.t-store__card__descr{ margin-top: 0 !important; }

/* base text paddings in card */
.t-store .t-store__card__wrap_all .store__card__wrap_txt-and-opts .t-store__card__textwrapper{
  padding-top: 0 !important;
  padding-bottom: 8px !important;
  margin-left: 0 !important;
  padding-left: 3px !important;
  padding-right: 40px !important;
}

/* =========================================================
   MOBILE: store grid tweaks (<=640 / <=560)
   ========================================================= */
@media screen and (max-width: 640px){

  .t-store__grid-cont_mobile-grid .t-col:not(.t-col_8){
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .t-store__grid-cont .t-col{
    margin-bottom: 5px !important;
  }

  .t-store__card__price-wrapper_above-title{
    margin-bottom: 5px !important;
  }

  .t-store__grid-cont_mobile-grid .store__card__wrap_txt-and-opts .t-store__card__textwrapper{
    padding-left: 10px !important;
    padding-right: 30px !important;
  }
}

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

  .t-store__prod-snippet__container{ padding-top: 0 !important; }

  .t778__textwrapper.t778__paddingsmall{
    padding-left: 10px !important;
    padding-right: 30px !important;
    padding-bottom: 5px !important;
  }

  .t778__price-wrapper_above-title{
    margin-top: 0 !important;
    margin-bottom: 5px !important;
  }

  /* ВАЖНО: раньше тут было margin-right:0 для t-item и оно убивало расстояние */
  .t-store__product-snippet + .t-store__relevants__container .t-store__valign-buttons .t-item{
    margin-right: 0 !important; /* оставляем как было (вдруг влияет на другие блоки) */
  }

  .t-store__card__img{
    max-width: 100% !important;
    max-height: unset !important;
    margin-bottom: 0 !important;
  }

  .t-name_xs{
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .t-store__card__descr{
    padding-left: 5px !important;
    padding-right: 0 !important;
  }

  /* NEW/SALE badge */
  .t-store__card__mark{
    background-color: transparent !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    color: #000 !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   "СМОТРИ ТАКЖЕ" / "ВАМ ПОНРАВИТСЯ" — ВСЁ ТУТ
   - Заголовок прижимаем к началу секции (убираем левые паддинги)
   - MOBILE: уменьшаем расстояние между карточками
   - DESKTOP: делаем горизонтальную прокрутку (даже если Тильда упирается)
   - Hide sold-out: JS ниже (реально работает)
   ========================================================= */

/* ---- Заголовок секции: к началу (и мобила, и десктоп) ---- */
.t-store__relevants__title{
  padding-left: 0 !important;   /* ← прижали к началу */
  margin-left: 0 !important;
}

/* ---- MOBILE (<=960): горизонтальная лента + МЕНЬШЕ gap ---- */
@media screen and (max-width: 960px){

  .t-store__product-snippet + .t-store__relevants__container,
  .t-store__relevants__container{
    margin-top: 28px !important;
    padding-top: 0 !important;
  }

  .t-store__relevants__title{
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;     /* ← к началу */
    padding-bottom: 10px !important;
  }

  .t-store__relevants__container .t-store__valign-buttons{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    scroll-snap-type: x mandatory !important;

    gap: 8px !important;            /* ← БЫЛО 14, СТАЛО МЕНЬШЕ */
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .t-store__relevants__container .t-item{
    flex: 0 0 45% !important;
    width: 45% !important;
    max-width: 45% !important;
    min-width: 45% !important;

    float: none !important;
    display: block !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;

    margin-right: 8px !important;   /* fallback если gap игнорится */
  }

  .t-store__relevants__container .t-item:last-child{
    margin-right: 0 !important;
  }

  .t-store__relevants__container .t-store__valign-buttons::-webkit-scrollbar{
    height: 0 !important;
  }
}

/* ---- DESKTOP (>=980): ПРОКРУТКА ГОРИЗОНТАЛЬНО ---- */
/* У тебя “в десктопе ничего не поменялось” — значит .t-item не тот,
   поэтому давим и .t-item, и .t-store__card (Тильда любит оба варианта) */
@media screen and (min-width: 980px){

  .t-store__product-snippet + .t-store__relevants__container,
  .t-store__relevants__container{
    margin-top: 30px !important;
    padding-top: 0 !important;
  }

  .t-store__relevants__title{
    padding-left: 0 !important;  /* ← к началу */
    margin-left: 0 !important;
    padding-bottom: 12px !important;
  }

  .t-store__relevants__container .t-store__valign-buttons{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;

    gap: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Вариант 1: если карточки внутри как .t-item */
  .t-store__relevants__container .t-item{
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
    float: none !important;
    display: block !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  /* Вариант 2: если карточки внутри как .t-store__card */
  .t-store__relevants__container .t-store__card{
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
    float: none !important;
    display: block !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  .t-store__relevants__container .t-store__valign-buttons::-webkit-scrollbar{
    height: 0 !important;
  }
}

/* =========================================================
   UNIVERSAL STORE TYPO (Tilda)
   ========================================================= */

/* PRODUCT PAGE TITLE — HARD FIX */
.t-store__product h1.js-store-prod-name,
.t-store__product h1.js-product-name,
.t-store__product h1.t-store__prod-name,
h1.js-store-prod-name,
h1.js-product-name{
  font-family: 'HouschkaPro','Houschka Pro',sans-serif !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
}

/* description */
.t-store__prod-snippet__container .t-store__prod-descr,
.t-store__prod-snippet__container .t778__descr,
.t-store__prod-snippet__container .t-descr,
.t-store__prod-snippet__container .t-text,
.t-store__prod-popup .t-store__prod-popup__description,
.t-store__prod-popup .t-store__prod-popup__text,
.t-store__prod-popup .t-descr,
.t-store__prod-popup .t-text{
  font-family: 'HouschkaPro','Houschka Pro',sans-serif !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* buttons */
.t-store__prod-snippet__container .t-store__prod-btn,
.t-store__prod-snippet__container .t778__btn,
.t-store__prod-snippet__container .t-btn,
.t-store__prod-popup .t-store__prod-popup__btn,
.t-store__prod-popup a.t-btn,
.t-store__prod-popup button,
.t-store__prod-popup .t-btn{
  font-family: 'HouschkaPro','Houschka Pro',sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
}

/* relevants title */
.t-store__relevants__title,
.t-store__relevants__container .t-store__relevants__title,
.t-store__relevants__container .t-title,
.t-store__relevants__container h2,
.t-store__relevants__container h3,
.t-store__prod-popup .t-store__prod-popup__related-title,
.t-store__prod-popup .t-store__prod-popup__related-title span{
  font-family: 'HouschkaPro','Houschka Pro',sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
}

/* safety typo */
.t-store .t-title,
.t-store .t-name,
.t-store .t-descr,
.t-store .t-text,
.t-store__prod-popup .t-store__prod-popup__title,
.t-store__prod-snippet__container .t778__title{
  font-family: 'HouschkaPro','Houschka Pro',sans-serif !important;
}

/* =========================================================
   Header account icon (single source of truth)
   ========================================================= */
.sa-account-header{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
  text-decoration: none !important;

  pointer-events: auto !important;
  position: relative !important;
  z-index: 10001 !important;
}
.sa-account-header img{
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  pointer-events: none !important;
}

/* =========================================================
   Desktop: product snippet paddings (>=980)
   ========================================================= */
@media screen and (min-width: 980px){
  #allrecords .t-store.t-store__prod-snippet__container{
    padding-top: 0 !important;
    padding-bottom: 10px !important;
    margin-top: 10px !important;
  }

  #allrecords .t-store__product-snippet{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #allrecords .t-store__product-snippet > .t-container.t-container_fluid{
    padding-top: 30px !important;
  }
}

/* =========================================================
   Header menu layout fixes (>=980)
   ========================================================= */
@media screen and (min-width: 980px){

  #allrecords .t1261__container.t1261__container_100-40{
    display: flex !important;
    align-items: center !important;
  }

  #allrecords .t1261__top-middle{
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  #allrecords .t1261__catalog-buttons{
    display: flex !important;
    align-items: center !important;
  }

  #allrecords .t1261__catalog-button{
    margin-right: 16px !important;
  }

  #allrecords .t1261__catalog-button.t-btnflex_md{
    padding-right: 0 !important;
  }

  #allrecords .t1261__catalog-button.t-btnflex{
    display: flex !important;
    align-items: center !important;
  }

  #allrecords .t1261__catalog-button .t-btnflex__text{ order: 1 !important; }
  #allrecords .t1261__catalog-button .t-btnflex__icon{
    order: 2 !important;
    margin-left: 8px !important;
  }

  #allrecords .t1261__bottom-line{
    position: relative !important;
    z-index: 20 !important;
  }

  #allrecords .t1261__dropdown-wrapper{
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
  }
}

/* =========================================================
   Tilda Store mobile slider — FIX "huge cards + holes"
   Block: #rec1759188721 + class: uc-slide-mob
   Mobile only
   ========================================================= */
@media screen and (max-width: 980px){

  #allrecords .uc-slide-mob .t-store__card-list,
  #allrecords #rec1759188721 .t-store__card-list{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    scroll-snap-type: x mandatory !important;

    gap: 0 !important;
    padding: 0 12px !important;
    margin: 0 !important;

    width: 100% !important;
    margin-top: 2px !important;
    box-sizing: border-box !important;
  }

  #allrecords .uc-slide-mob .t-store__card,
  #allrecords #rec1759188721 .t-store__card{
    flex: 0 0 45% !important;
    width: 45% !important;
    max-width: 45% !important;
    min-width: 45% !important;

    float: none !important;
    display: block !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  #allrecords .uc-slide-mob .t-store__card.t-col,
  #allrecords .uc-slide-mob .t-store__card.t-col_3,
  #allrecords #rec1759188721 .t-store__card.t-col,
  #allrecords #rec1759188721 .t-store__card.t-col_3{
    flex: 0 0 45% !important;
    width: 45% !important;
    max-width: 45% !important;
    min-width: 45% !important;
  }

  #allrecords .uc-slide-mob .js-store-grid-cont,
  #allrecords #rec1759188721 .js-store-grid-cont{
    overflow: visible !important;
  }

  #allrecords .uc-slide-mob .t-store__card-list::-webkit-scrollbar,
  #allrecords #rec1759188721 .t-store__card-list::-webkit-scrollbar{
    height: 0 !important;
  }
}

/* =========================================================
   T778 mobile flex slider — #rec1759226031 + uc-slide-mob
   ========================================================= */
@media screen and (max-width: 980px){

  #allrecords #rec1759226031.uc-slide-mob .t778__container_mobile-flex,
  #allrecords .uc-slide-mob#rec1759226031 .t778__container_mobile-flex{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;

    gap: 2px !important;
    padding: 0 12px !important;
    margin-top: 2px !important;
    box-sizing: border-box !important;
  }

  #allrecords #rec1759226031.uc-slide-mob .t778__col,
  #allrecords .uc-slide-mob#rec1759226031 .t778__col{
    flex: 0 0 45% !important;
    width: 45% !important;
    max-width: 45% !important;
    min-width: 45% !important;

    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  #allrecords #rec1759226031.uc-slide-mob .t778__wrapper,
  #allrecords .uc-slide-mob#rec1759226031 .t778__wrapper{
    padding: 0 !important;
    margin: 0 !important;
  }

  #allrecords #rec1759226031.uc-slide-mob .t778__container_mobile-flex::-webkit-scrollbar,
  #allrecords .uc-slide-mob#rec1759226031 .t778__container_mobile-flex::-webkit-scrollbar{
    height: 0 !important;
  }
}

@media screen and (max-width: 980px){
  #allrecords #rec1759226031 .t778__content{ padding-top: 0 !important; }
  #allrecords #rec1759226031 .t778__textwrapper{ padding-top: 4px !important; }
  #allrecords #rec1759226031 .t778__title{
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 1.15 !important;
  }
}

/* =========================================================
   MOBILE padding utility: only for blocks with uc-sa-mobile-padding
   ========================================================= */
@media screen and (max-width: 960px){
  .uc-sa-mobile-padding .t-container,
  .uc-sa-mobile-padding .t-container_100{
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .uc-sa-mobile-padding .t-col{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   BF702 scroll-to-top custom SVG — #rec224564969
   ========================================================= */
#rec224564969 svg,
#rec224564969 img,
#rec224564969 .tn-atom__img{
  display: none !important;
}

#rec224564969 .t396__scrolltop,
#rec224564969 .t270__scrolltop,
#rec224564969 .t142__scrolltop,
#rec224564969 .t933__scrolltop,
#rec224564969 .t967__scrolltop,
#rec224564969 a,
#rec224564969 button{
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  min-height: 78px !important;

  background-image: url('https://static.tildacdn.com/tild6630-3466-4030-b036-393036343633/arrow-up-dick.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 60px 60px !important;
}

#rec224564969 a,
#rec224564969 button{
  font-size: 0 !important;
  line-height: 0 !important;
}

/* =========================================================
   Remove shadow from Tilda subscription widget
   ========================================================= */
.uc-no-shadow,
.uc-no-shadow *{
  box-shadow: none !important;
  filter: none !important;
}

/* Tilda t653 badge: 100x100 and remove circle clipping */
.uc-no-shadow .t653__btn_wrapper,
.uc-no-shadow .t653__btn_wrapper::before,
.uc-no-shadow .t653__btn_wrapper::after,
.uc-no-shadow .t653__btn,
.uc-no-shadow .t653__btn::before,
.uc-no-shadow .t653__btn::after{
  border-radius: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

.uc-no-shadow .t653__btn_wrapper,
.uc-no-shadow .t653__bgimg{
  width: 100px !important;
  height: 100px !important;
}

.uc-no-shadow .t653__bgimg{
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* =========================================================
   FINAL HAMMER (<=960): prevent weird shifts for scroll-lists
   (без навязывания padding, чтобы можно было "до краёв")
   ========================================================= */
@media screen and (max-width: 960px){

  #allrecords .t-container,
  #allrecords .t-container_100,
  #allrecords .t-container_1000,
  #allrecords .t-container_1200,
  #allrecords .t-container_1400{
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  #allrecords .t-col{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #allrecords .t-store__card-list,
  #allrecords .t-store__relevants__container .t-store__valign-buttons,
  #allrecords .t778__container_mobile-flex{
    margin-left: 0 !important;
    transform: none !important;
    left: auto !important;
    box-sizing: border-box !important;
  }
}
</style>