/* ==========================================================
   RadSvet / Tilda Store: объединённый CSS (T123)
   - Внешний вид должен остаться как сейчас
   - Колонки не трогаем: телефон 2 в ряд, ПК 4 в ряд (как в Тильде)
   Если будешь переносить в другой блок — замени recID 1706471901 на новый.
   ========================================================== */


/* =========================
   THEME (RadSvet)
========================= */
.js-store{
  --pageBg:#F5F1E8;          /* твой бежевый фон */
  --surface:#ffffff;         /* белые карточки */
  --text:#0F1724;            /* тёмно-синий (почти чёрный) */
  --muted:rgba(15,23,36,.55);
  --line:rgba(15,23,36,.10);
  --line2:rgba(15,23,36,.16);
  --brass:#D1A35B;           /* латунь */
  --brass2:#FACC6B;          /* светлая латунь */
  --brassSoft:rgba(209,163,91,.12);

  --r18:18px;
  --r14:14px;
  --pill:999px;

  --shadow:0 18px 44px rgba(15,23,36,.10);
  --shadow2:0 10px 24px rgba(15,23,36,.08);

  font-family:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* чтобы кликабельность ощущалась */
.js-store a,
.js-store button,
.js-store .t-store__filter__item-title,
.js-store .t-store__filter__reset,
.js-store .t-store__filter__btn,
.js-store .t-store__filter__btn-expand,
.js-store .t-checkbox__control,
.js-store select,
.js-store .t-store__sort-select,
.js-store .t-store__card,
.js-store .t-store__filter__custom-sel,
.js-store .t-store__filter__checkbox{
  cursor:pointer;
}

/* =========================
   LAYOUT / BACKGROUND
========================= */
/* сам блок каталога на бежевом фоне (если нужно) */
.js-store{
  background: transparent;
}

/* если хочешь, чтобы вся область вокруг каталога была бежевой, включи это:
.js-store .t951 { background: var(--pageBg); }
*/

/* чуть “воздуха” и одинаковые отступы внутри */
.js-store .t951__cont-w-filter{
  padding-left: 20px;
  padding-right: 20px;
}

/* =========================
   TOP ROW: SEARCH + SORT
========================= */
.js-store .t-store__filter__search-and-sort{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r18);
  box-shadow: var(--shadow2);
  padding: 14px 14px;
  margin-bottom: 14px;
}

/* поиск */
.js-store .t-store__search-wrapper{
  position: relative;
}

.js-store .t-store__filter__input.js-store-filter-search{
  width: 100%;
  border: 1px solid var(--line) !important;
  border-radius: var(--pill) !important;
  padding: 12px 44px 12px 14px !important;
  background: #fff !important;
  color: var(--text) !important;
  outline: none !important;
  transition: box-shadow .18s ease, border-color .18s ease;
}

.js-store .t-store__filter__input.js-store-filter-search::placeholder{
  color: rgba(15,23,36,.45) !important;
}

.js-store .t-store__filter__input.js-store-filter-search:focus{
  border-color: rgba(209,163,91,.55) !important;
  box-shadow: 0 0 0 4px rgba(209,163,91,.14);
}

/* иконки внутри поиска */
.js-store .t-store__search-icon{
  right: 14px !important;
  left: auto !important;
  opacity: .6;
}
.js-store .t-store__search-close-icon{
  right: 14px !important;
  left: auto !important;
  opacity: .7;
}

/* сортировка */
.js-store .t-store__sort-select-wrapper{
  width: 100%;
}

.js-store select.t-store__sort-select{
  width: 100%;
  border: 1px solid var(--line) !important;
  border-radius: var(--pill) !important;
  padding: 12px 14px !important;
  background: #fff !important;
  color: var(--text) !important;
  outline: none !important;
  transition: box-shadow .18s ease, border-color .18s ease;
}

.js-store select.t-store__sort-select:focus{
  border-color: rgba(209,163,91,.55) !important;
  box-shadow: 0 0 0 4px rgba(209,163,91,.14);
}

/* =========================
   SIDEBAR FILTERS (LEFT)
========================= */
.js-store .t951__sidebar-wrapper{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r18);
  box-shadow: var(--shadow2);
  padding: 16px;
}

/* заголовки пунктов фильтра */
.js-store .t-store__filter__item{
  border-color: var(--line) !important;
}

.js-store .t-store__filter__item-title{
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .02em;
  padding: 10px 0 !important;
}

/* маленькая стрелка раскрытия (делаем “латунной”) */
.js-store .t-store__filter__item-title:after{
  border-right-color: rgba(209,163,91,.85) !important;
  border-bottom-color: rgba(209,163,91,.85) !important;
}

/* чекбоксы */
.js-store .t-checkbox__control{
  color: var(--text) !important;
}

.js-store .t-checkbox__indicator{
  border-color: rgba(15,23,36,.30) !important;
  border-radius: 6px !important;
}

.js-store .t-checkbox:checked + .t-checkbox__indicator{
  border-color: rgba(209,163,91,.95) !important;
  background: rgba(209,163,91,.20) !important;
}

.js-store .t-checkbox__indicator:after{
  border-color: rgba(209,163,91,.95) !important;
}

/* кнопка "Показать все" */
.js-store .t-store__filter__btn-expand{
  border-radius: var(--pill) !important;
  border: 1px solid rgba(209,163,91,.55) !important;
  background: rgba(209,163,91,.10) !important;
  padding: 10px 12px !important;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}

.js-store .t-store__filter__btn-expand:hover{
  background: rgba(209,163,91,.16) !important;
  border-color: rgba(250,204,107,.85) !important;
  transform: translateY(-1px);
}

/* =========================
   PRICE SLIDER
========================= */
.js-store .t-store__filter__item-price-box input.t-store__filter__input{
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 10px 10px !important;
  color: var(--text) !important;
  background: #fff !important;
  outline: none !important;
}

.js-store .t-store__filter__item-price-box input.t-store__filter__input:focus{
  border-color: rgba(209,163,91,.55) !important;
  box-shadow: 0 0 0 4px rgba(209,163,91,.14);
}

.js-store .t-store__filter__btn.js-store-filter-price-btn{
  border-radius: 12px !important;
  border: 1px solid rgba(209,163,91,.70) !important;
  background: rgba(209,163,91,.12) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  padding: 10px 12px !important;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.js-store .t-store__filter__btn.js-store-filter-price-btn:hover{
  background: rgba(209,163,91,.18) !important;
  border-color: rgba(250,204,107,.85) !important;
  transform: translateY(-1px);
}

/* трек диапазона */
.js-store .t-store__filter__range_bg{
  background: rgba(15,23,36,.08) !important;
  border-radius: 999px !important;
}

.js-store .t-store__filter__price-outer{
  background: rgba(209,163,91,.28) !important;
  border-radius: 999px !important;
}

/* ползунки range (webkit) */
.js-store input[type="range"]{
  accent-color: var(--brass);
}

/* =========================
   CHOSEN FILTERS BAR (chips)
========================= */
.js-store .t-store__filter__chosen-bar{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r18) !important;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
  padding: 12px 12px !important;
  margin-top: 12px !important;
}

.js-store .t-store__filter__reset{
  color: var(--text) !important;
  font-weight: 600 !important;
  border-bottom: 1px dotted rgba(209,163,91,.75);
  display: inline-block;
  padding-bottom: 2px;
}

.js-store .t-store__filter__chosen-val{
  border: 1px solid rgba(209,163,91,.40) !important;
  background: rgba(209,163,91,.10) !important;
  border-radius: var(--pill) !important;
  padding: 8px 10px !important;
  color: var(--text) !important;
  font-weight: 600 !important;
}

/* =========================
   PRODUCT GRID + CARDS
========================= */
.js-store .t-store__card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r18);
  box-shadow: none;
  padding: 12px 12px 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.js-store .t-store__card:hover{
  transform: translateY(-3px);
  border-color: rgba(209,163,91,.35);
  box-shadow: var(--shadow2);
}

/* картинка */
.js-store .t-store__card__imgwrapper{
  border-radius: 16px !important;
  overflow: hidden;
}

/* если у тильды bgimg/cover */
.js-store .t-store__card__bgimg,
.js-store .t-store__card__bgimg_second{
  border-radius: 16px !important;
}

/* заголовок товара */
.js-store .t-store__card .t-typography__title{
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-top: 10px !important;
}

/* цена */
.js-store .t-store__card .t-store__card__price{
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.js-store .t-store__card .t-store__card__price_old{
  font-size: 14px !important;
  color: rgba(15,23,36,.45) !important;
}

/* кнопки (если включены в карточке) */
.js-store .t-store__card .t-btn,
.js-store .t-store__card button{
  border-radius: var(--pill) !important;
}

.js-store .t-store__card .t-btn{
  border: 1px solid rgba(209,163,91,.75) !important;
  background: rgba(209,163,91,.10) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.js-store .t-store__card .t-btn:hover{
  background: rgba(209,163,91,.18) !important;
  border-color: rgba(250,204,107,.90) !important;
  transform: translateY(-1px);
}

/* ссылка карточки без подчёркиваний */
.js-store .t-store__card a{
  text-decoration: none !important;
  color: inherit !important;
}

/* =========================
   MOBILE TUNING
========================= */
@media (max-width: 960px){
  .js-store .t-store__filter__search-and-sort{
    padding: 12px;
    border-radius: 16px;
  }
  .js-store .t951__sidebar-wrapper{
    padding: 14px;
    border-radius: 16px;
  }
  .js-store .t-store__card{
    border-radius: 16px;
  }
  .js-store .t-store__card__imgwrapper,
  .js-store .t-store__card__bgimg,
  .js-store .t-store__card__bgimg_second{
    border-radius: 14px !important;
  }
  .js-store .t-store__card .t-btn{
    padding: 10px 12px !important;
    min-height: 0 !important;
    height: auto !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

}
/* MOBILE: счетчик количества как кнопка (10px 12px, font 12px) */
@media screen and (max-width: 480px) {
  .js-store .t-store__prod__quantity {
    min-height: 0 !important;
    height: auto !important;
    border-radius: 10px !important;
  }
}



/* ========================================================== */


/* ==== TOP BAR: Поиск + сортировка (единая версия без конфликтов) ==== */
.js-store .t-store__filter__search-and-sort {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  padding: 16px 16px;
}
.js-store .t-store__filter__search-wrapper {
  flex: 1 1 auto;
  min-width: 200px;
}
.js-store .t-store__filter__search-wrapper input {
  height: 44px;
}
.js-store .t-store__sort-select-wrapper {
  flex: 0 0 220px;
}
.js-store .t-store__sort-select-wrapper select {
  height: 44px;
}

/* Мобайл: оставляем 2 колонки товаров как в Тильде, правим только верхнюю панель */
@media (max-width: 640px) {
  .js-store .t-store__filter__search-and-sort {
    padding: 10px 10px;
  }
  /* Если сортировка не нужна на телефоне — скрываем (как у тебя было в одном из блоков) */
  .js-store .t-store__sort-select-wrapper {
    display: none;
  }
  .js-store .t-store__filter__search-wrapper {
    flex: 1 1 100%;
    min-width: 0;
  }
}


/* ==== Остальные правки из дополнительных T123 (без дублей ) ==== */


/* ==== RadSvet: product typography bigger ==== */

/* Заголовок */
.js-store .t-store__card .t-typography__title,
.js-store .t-store__card__title,
.js-store .t-store__card__name{
  font-size: 22px !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
}

/* Подстрока / артикул (если он отдельным классом) */
.js-store .t-store__card__descr,
.js-store .t-store__card__sku,
.js-store .t-store__card .t-store__card__option,
.js-store .t-store__card .t-typography__text{
  font-size: 18px !important;
  line-height: 1.35 !important;
  color: rgba(15,23,36,.58) !important;
}

/* Цена чуть крупнее (чтобы “дороже”) */
.js-store .t-store__card .t-store__card__price{
  font-size: 26px !important;
}

/* ==== RadSvet: faster & smoother hover ==== */
.js-store .t-store__card{
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease !important;
  will-change: transform;
}

.js-store .t-store__card:hover{
  transform: translateY(-2px) !important; /* меньше прыжок = меньше лагов */
  box-shadow: 0 12px 28px rgba(15,23,36,.10) !important; /* легче */
}

/* ==== RadSvet: align top bar width with cards ==== */
.js-store .t-store__filter__search-and-sort{
  width: 100% !important;
  box-sizing: border-box !important;
}

/* иногда тильда кладет внутрь ограничитель — убираем */
.js-store .t-store__filter__search-and-sort > div{
  width: 100% !important;
}

/* ==== RadSvet: badges (sale/new) styling ==== */
.js-store .t-store__card .t-store__card__mark,
.js-store .t-store__card .t-store__mark,
.js-store .t-store__card .t-store__card__label{
  background: rgba(209,163,91,.92) !important;     /* латунь */
  color: #0F1724 !important;
  border: 1px solid rgba(250,204,107,.95) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 10px 18px rgba(15,23,36,.12) !important;
}

/* если “SALE” должен быть красным — оставим красный, но стиль премиум */
.js-store .t-store__card .t-store__card__mark_sale,
.js-store .t-store__card .t-store__mark_sale{
  background: rgba(239,68,68,.92) !important;
  border-color: rgba(239,68,68,.30) !important;
  color:#fff !important;
}

/* ==== WISHLIST / FAVORITES button (t1002__addBtn) ==== */
.js-store a.t1002__addBtn{
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,23,36,.14) !important;
  backdrop-filter: blur(10px);
  transition: transform .12s ease, background .12s ease, border-color .12s ease !important;
}

.js-store a.t1002__addBtn:hover{
  transform: translateY(-1px) !important;
  background: rgba(209,163,91,.10) !important; /* латунный ховер */
  border-color: rgba(209,163,91,.45) !important;
}

/* SVG stroke тоже делаем “дорогим” */
.js-store a.t1002__addBtn svg path{
  stroke: rgba(15,23,36,.85) !important;
  transition: stroke .12s ease !important;
}

.js-store a.t1002__addBtn:hover svg path{
  stroke: rgba(209,163,91,.95) !important;
}

/* ==== MOBILE TYPOGRAPHY FIX ==== */
@media (max-width: 480px){
  .js-store .t-store__card .t-typography__title,
  .js-store .t-store__card__title,
  .js-store .t-store__card__name{
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .js-store .t-store__card__descr,
  .js-store .t-store__card__sku,
  .js-store .t-store__card .t-typography__text{
    font-size: 12px !important;
  }

  .js-store .t-store__card .t-store__card__price{
    font-size: 15px !important;
  }
}

/* ===========================================
   RadSvet — Mobile: smaller SALE badge + Favorite heart
   Target: .js-store (ST320N)
   Вставить ПОСЛЕДНИМ в CSS
=========================================== */


/* --- 2) Favorite button (heart) --- */
@media (max-width: 640px){
  .js-store a.t1002__addBtn{
    /* уменьшаем кликабельную область, но не делаем слишком маленькой */
    width: 34px !important;
    height: 34px !important;

    /* если у тебя там круг/фон — пусть остаётся, просто меньше */
    border-radius: 999px !important;

    /* позицию прижимаем аккуратнее, чтобы не перекрывала товар */
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
  }

  .js-store a.t1002__addBtn svg{
    width: 16px !important;
    height: 14px !important;
  }

  /* если stroke слишком жирный на маленьком размере — можно облегчить */
  .js-store a.t1002__addBtn svg path{
    stroke-width: 1.6 !important;
  }
}

/* Планшеты */
@media (min-width: 641px) and (max-width: 980px){
  .js-store a.t1002__addBtn{
    width: 38px !important;
    height: 38px !important;
    top: 12px !important;
    right: 12px !important;
  }
  .js-store a.t1002__addBtn svg{
    width: 18px !important;
    height: 16px !important;
  }
}

/* ===========================================
   RadSvet — FIX: SALE badge not shrinking on mobile
   Target: .js-store
   Вставить ПОСЛЕДНИМ
=========================================== */

@media (max-width: 640px){

  /* 1) wrapper — часто именно он задаёт габарит/позицию */
  .js-store .t-store__card__mark-wrapper{
    /* если wrapper абсолютный — уменьшаем и двигаем */
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;

    /* универсально: уменьшаем визуально весь бейдж через scale */
    transform: scale(0.7) !important;
    transform-origin: top left !important;

    /* чтобы transform не ломал поток/клик */
    pointer-events: none !important;
  }

  /* 2) сам бейдж — тоже задаём компактные параметры */
  .js-store .t-store__card__mark-wrapper .t-store__card__mark,
  .js-store .t-store__card__mark{
    font-size: 10px !important;
    line-height: 1 !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Планшеты — чуть меньше, но не так сильно */
@media (min-width: 641px) and (max-width: 980px){
  .js-store .t-store__card__mark-wrapper{
    transform: scale(0.88) !important;
    transform-origin: top left !important;
    pointer-events: none !important;
  }
  .js-store .t-store__card__mark-wrapper .t-store__card__mark,
  .js-store .t-store__card__mark{
    font-size: 11px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
  }
}

/* Уменьшаем ТОЛЬКО вертикальный отступ между карточками на телефоне */
@media screen and (max-width: 640px) {
  .js-store .t-store__card-list{
    row-gap: 6px !important; /* было 10px — поставь 4–8px как нужно */
  }
}