/* =================== hc-bestsellers.css =================== */
/* hc-bestsellers — home "Популярное у мебельщиков" unified product showcase
 * (Хиты · Новинки · Со скидкой · Товар дня · Для вас). Left column is a
 * branded promo card (one of 4 palettes), right column is a 3-col rail of
 * .pcard mini cards. Strictly .hc-bestsellers / .hc-bestsellers__*.
 *
 * Previous file had every promo rule wrapped in @media(max-width:920px),
 * leaving the promo card on desktop completely unstyled (no gradient bg,
 * no body layout, no bgfx). This rewrite places all base rules outside the
 * media-query and uses @media only for responsive breakpoints. */

.hc-bestsellers__tabs {
display: flex;
  flex-wrap: wrap;
  gap: var(--hc-sp-1, 6px);
  margin-bottom: var(--hc-sp-4, 20px);
}

/* base grid: promo (left) + product rail (right) */
.hc-bestsellers__grid {
display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.4vw, 20px);
  align-items: start;
  margin-top: var(--hc-sp-4, 20px);
}

/* product rail — 3-col grid of mini pcards */
.hc-bestsellers__rail {
display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 16px);
  align-content: start;
  align-items: stretch;
}

.hc-bestsellers__recs {
margin-top: var(--hc-sp-4, 20px);
  min-height: 160px;
}

@media (max-width: 1360px) {
  .hc-bestsellers__grid { grid-template-columns: 1fr; }
}
@media (max-width: 1200px) {
  .hc-bestsellers__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .hc-bestsellers__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* v8.6 — на phone (<=560px) bestsellers — горизонтальный scroll-snap rail.
   Не вертикальный 1-col stack — компактнее и видны 1.2 карты сразу как
   подсказка свайпа. */
@media (max-width: 560px) {
  .hc-bestsellers__rail {
    grid-template-columns: none;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    padding: 4px 16px 16px;
    margin: 0 -16px;
    scrollbar-width: none;
  }
  .hc-bestsellers__rail::-webkit-scrollbar { display: none; }
  .hc-bestsellers__rail > * {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
}

.hc-bestsellers__recs .hc-text-center {
  text-align: center;
  padding: 40px 0;
}