/* ===========================
   Сторінки «Знижки» / «Новинки» / «Хіти продажів» (store/collection.html).
   Чіпи, сортування, «Показати ще» — з search.css; тут шапка у кольорі підбірки й переходи.
   =========================== */
.cl-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(120deg, #667eea, #764ba2); }
.cl--sale .cl-hero { background: linear-gradient(120deg, #ef4444, #f97316); }
.cl--new .cl-hero { background: linear-gradient(120deg, #10b981, #0ea5e9); }
.cl--top .cl-hero { background: linear-gradient(120deg, #f59e0b, #ef4444 60%, #b91c1c); }
.cl-hero::after { content: ''; position: absolute; right: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.cl-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; padding-top: 30px; padding-bottom: 28px; }
.cl-hero h1 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 42px; font-weight: 700; color: #fff; }
.cl-emoji { margin-right: 10px; }
.cl-lead { margin: 6px 0 0; max-width: 60ch; font-size: 16px; opacity: .92; }
.cl-facts { display: grid; grid-template-columns: repeat(3, 170px); gap: 12px; }
.cl-fact { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); }
.cl-fact b { display: block; font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; }
.cl-fact span { font-size: 13px; opacity: .92; }
.cl-count { margin-left: 0; margin-right: auto; }

/* місце в рейтингу на картці */
.product-badge-rank { position: absolute; top: 10px; right: 10px; z-index: 3; min-width: 34px; height: 30px; padding: 0 9px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #fff; background: linear-gradient(135deg, #f59e0b, #ef4444); box-shadow: 0 4px 10px rgba(239, 68, 68, .3); }

/* вкладки підбірок під шапкою */
.cl-tabs { background: #fff; border-bottom: 1px solid #e9ebf3; }
.cl-tabs-in { display: flex; gap: 8px; padding-top: 12px; padding-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.cl-tabs-in::-webkit-scrollbar { display: none; }
.cl-tab { flex: 0 0 auto; padding: 10px 18px; border-radius: 999px; background: #f2f3f8; font-size: 15px; font-weight: 800; color: #1f2133 !important; white-space: nowrap; text-decoration: none !important; transition: background .2s ease; }
.cl-tab:hover { background: #e8eaff; }
.cl-tab.is-on { color: #fff !important; }
.cl-tab--sale.is-on { background: linear-gradient(120deg, #ef4444, #f97316); }
.cl-tab--new.is-on { background: linear-gradient(120deg, #10b981, #0ea5e9); }
.cl-tab--top.is-on { background: linear-gradient(120deg, #f59e0b, #ef4444); }

@media (max-width: 991px) {
  .cl-hero-in { grid-template-columns: 1fr; padding-top: 72px; }
  .cl-facts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  .cl-hero-in { padding-top: 64px; padding-bottom: 20px; gap: 16px; }
  .cl-hero h1 { font-size: 28px; }
  .cl-facts { gap: 8px; }
  .cl-fact { padding: 10px; }
  .cl-fact b { font-size: 16px; }
  .cl-fact span { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-tab { transition: none; }
}