/* ============================================================
   KLEAN KOSMETICS — BEST SELLERS  (best-sellers.css)
   Mobile-first. Link AFTER style.css and hero.css:
     <link rel="stylesheet" href="assets/css/best-sellers.css">

   Everything is scoped to .bests, so the shop grid and the Trending row
   keep their own card styles. Cards are still rendered by engine.js
   (renderProductCard); this file only restyles them inside .bests.

   Markup contract (index.html):
   <section class="section bests">
     <div class="container">
       <header class="bests__head reveal">
         <span class="section__eyebrow">Handpicked for you</span>
         <h2 class="bests__title"><span>Best</span><span>sellers</span></h2>
         <p class="section__sub">One short sentence.</p>
       </header>
       <div class="products-grid" id="best-sellers-grid"></div>
       <div class="bests__foot"><a class="bests__cta" href="/shop">Shop all products</a></div>
     </div>
   </section>

   Colours: only var(--clr-purple) / var(--clr-ink). Never hardcode the brand colour.
   ============================================================ */

.bests { background: var(--clr-bg); }

/* ── HEADER ──────────────────────────────────────────────────── */
.bests .section__header,
.bests__head { margin-bottom: 28px; }

.bests__title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 17vw, 4.8rem);
  line-height: .88;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--clr-ink);
}
.bests__title span { display: block; }
/* Same stepped second line as the hero headline. */
.bests__title span + span { padding-left: .5em; }

.bests__head .section__sub { margin-top: 14px; max-width: 32ch; }

/* ── GRID ────────────────────────────────────────────────────── */
/* 4 products: 2 columns on phones and tablets, 4 on desktop (never 3 with an orphan). */
.bests .products-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 12px;
  counter-reset: rank;
}

/* ── CARD ────────────────────────────────────────────────────── */
.bests .product-card {
  counter-increment: rank;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.bests .product-card:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

.bests .product-card__image-wrap {
  border-radius: var(--radius-lg);
  background: #ececec;
}

/* Soft top fade so the rank number stays readable on any photo. */
.bests .product-card__image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,10,10,.42) 0, rgba(10,10,10,0) 42%);
}

/* Rank number: 01, 02, 03, 04 (CSS counter, no markup needed). */
.bests .product-card__image-wrap::before {
  content: counter(rank, decimal-leading-zero);
  position: absolute;
  top: 8px;
  left: 12px;
  z-index: 2;
  font-family: var(--ff-display);
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  pointer-events: none;
}

/* Add button: a true 44px circle (style.css would stretch it to 36x44 on phones). */
.bests .product-card__add {
  width: 44px;
  height: 44px;
  min-height: 44px;
  bottom: 10px;
  right: 10px;
  background: var(--clr-purple);
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
}

/* Info */
.bests .product-card__info { padding: 12px 2px 0; }

/* Everything here is featured, and ratings default to 5 stars, so both add noise. */
.bests .product-card__badges,
.bests .product-card__rating { display: none; }

.bests .product-card__brand { margin-bottom: 2px; }
.bests .product-card__name {
  font-size: .95rem;
  line-height: 1.3;
  margin-bottom: 6px;
}
.bests .product-card__price { font-size: 1.2rem; }

/* ── FOOT CTA ────────────────────────────────────────────────── */
.bests__foot { margin-top: 32px; }
.bests__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 28px;
  border-radius: var(--radius-full);
  background: var(--clr-ink);
  color: #fff;
  font-family: var(--ff-condensed);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .03em;
  transition: transform .15s ease, filter .15s ease;
}
.bests__cta:active { transform: scale(.97); }
.bests__cta:focus-visible { outline: 2px solid var(--clr-purple); outline-offset: 3px; }
@media (hover: hover) {
  .bests__cta:hover { filter: brightness(1.25); }
}

/* ── LARGER SCREENS ──────────────────────────────────────────── */
@media (min-width: 640px) {
  .bests__foot { text-align: center; }
  .bests__cta { display: inline-flex; padding: 0 44px; }
}

@media (min-width: 900px) {
  .bests .section__header,
  .bests__head { margin-bottom: 44px; }
  .bests__title { font-size: clamp(4.5rem, 7vw, 6.5rem); }
  .bests .products-grid { grid-template-columns: repeat(4, 1fr); gap: 28px 20px; }
  .bests .product-card__image-wrap::before { font-size: 3rem; }
  .bests__foot { margin-top: 48px; }
}

/* ── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bests .reveal { opacity: 1; transform: none; transition: none; }
  .bests__cta { transition: none; }
}