/* ===== Контейнер ===== */
.sale-teasers{
  display:grid; gap:24px; padding: 20px 0;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1200px){ .sale-teasers{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:992px){  .sale-teasers{ grid-template-columns:repeat(4,1fr);} }

/* Мобайл: горизонтальный скролл без слайдера */
@media (max-width:768px){
  .sale-teasers{
    display:flex; gap:16px; overflow-x:auto; padding-bottom:16px; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .sale-card{ min-width: 80%; flex:0 0 auto; scroll-snap-align:start; max-width: 320px; }
}

/* ===== Карточка ===== */
.sale-card{
  background:#fff; border-radius:10px 0; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease; max-width: 340px;
}
.sale-card:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.10); }
.sale-card__link{ color:inherit; text-decoration:none; display:block; height:100%; }

.sale-card__media{ position:relative; aspect-ratio:16/9; background:#f4f6f8; overflow:hidden; }
.sale-card__img{ width:100%; height:100%; object-fit:cover; display:block; }
.sale-card__img--placeholder{ width:100%; height:100%; background:linear-gradient(135deg,#f2f2f2,#e9ecef); }

.sale-badge{
  position:absolute; left:12px; top:12px;
  display:inline-block; padding:6px 10px;
  border-radius:8px; font-weight:700; font-size:13px; line-height:1;
  background:#ffd400; color:#111; box-shadow:0 1px 4px rgba(0,0,0,.1);
}
/* Красная плашка: используется и для таймера, и для цены у перманентных */
.sale-badge--timer{
  top:auto; bottom:12px; right:12px; left:auto;
  background:var(--btn); color:#fff; font-weight:700; opacity:.98;
}

.sale-card__body{ padding:16px 16px 18px; }
.sale-card__title{ font-size:18px!important; line-height:1.35; margin:0 0 8px; font-weight:700; color:#111; }
.sale-card__excerpt{ color:#5b6770; font-size:14px; line-height:1.5; }

/* ===== Тонкий скроллбар на мобиле ===== */
@media (max-width:768px){
  .sale-teasers::-webkit-scrollbar{ height:6px; }
  .sale-teasers::-webkit-scrollbar-track{ background:transparent; }
  .sale-teasers::-webkit-scrollbar-thumb{ background:#00b377; border-radius:6px; }
  .sale-teasers{ scrollbar-color:var(--primary-color) transparent; scrollbar-width:thin; }
}