/* =============================================================
   home.css — Styles specific to the home screen
   (banner · popular products by category)  ※ The all-products grid uses the shared styles in common.css

   -------------------------------------------------------------
   📱→💻 Each SECTION below keeps its own wider-screen tweaks right under it:
       @media (min-width: 768px)  → 📱 TABLET  and up
       @media (min-width: 1024px) → 💻 DESKTOP and up
   ============================================================= */


/* =============================================================
   SECTION A — BANNER  (auto-swipe)
   Text on the left + image on the right. As the screen widens it also
   grows taller to keep its proportions.
   ============================================================= */
.banner {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.banner-track { display: flex; transition: transform .5s ease; }
.slide {
  flex: 0 0 100%;
  color: #fff;
  display: flex;                 /* Fill the background color; center the content with the inner below */
  background: #111111;
}
/* 🎨 BANNER BACKGROUND COLORS — one rule per slide.
   nth-child(1) is slide 1 (uses #111111 set above), (2) is slide 2, (3) is slide 3.
   ✏️ CHANGE ME: swap these color values to recolor each banner slide. */
.slide:nth-child(2) { background: var(--purple); }   /* slide 2 — accent color */
.slide:nth-child(3) { background: #2a2a2a; }          /* slide 3 — dark gray */
.slide:nth-child(4) { background: #2828a8; }
.slide-inner {
  width: 100%;
  min-height: 110px;
  /* On wide screens the side padding grows naturally so content doesn't hug the edges */
  padding: 18px clamp(24px, 5vw, 96px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Limit the text width so the description doesn't become overly long lines */
.slide .txt { flex: 1 1 auto; max-width: 620px; min-width: 0; }
.slide .label {
  display: inline-block;
  font-size: clamp(10px, 1.2vw, 13px);
  font-weight: 700;
  letter-spacing: .14em;
  opacity: .7;
  margin-bottom: clamp(6px, 1vw, 12px);
}
/* The text scales smoothly with the screen width (clamp: min · fluid · max) */
.slide .txt h3 { margin: 0 0 10px; font-size: clamp(19px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.03em; }
.slide .txt p { margin: 0; font-size: clamp(13px, 1.5vw, 16px); line-height: 1.55; opacity: .82; }
/* The short subtitle shows on mobile too; the long description is hidden on mobile (shown from tablet up) */
.slide .txt .sub-long { display: none; }

/* Banner button (CTA) — semi-transparent white pill button (hidden on mobile) */
.slide-cta {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 700;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background .15s ease;
}
.slide-cta:hover { background: rgba(255, 255, 255, .28); }

/* Right-side image — grows along with the banner height (transparent PNG) */
.slide-img {
  flex: 0 0 40%;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.slide-img img { max-height: 86%; max-width: 100%; object-fit: contain; }
/* The free-shipping icon has lots of padding so it looks smaller than others — make it a bit bigger */
.slide:nth-child(3) .slide-img img { max-height: 118%; }

.banner-dots {
  position: absolute;
  bottom: 14px;
  left: clamp(24px, 5vw, 96px);   /* aligned below the text, matching the content's left padding */
  display: flex; gap: 6px;
}
.banner-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.4);
  transition: .2s; cursor: pointer;
}
.banner-dots span.on { background: #fff; width: 18px; border-radius: var(--r-pill); }

/* 📱→💻 RESPONSIVE (banner) — grows taller; swaps short subtitle for the long one + button */
@media (min-width: 768px) {   /* 📱 TABLET and up */
  .slide-inner { min-height: 140px; padding-block: 26px; }
  .slide .txt .sub-short { display: none; }   /* hide short subtitle */
  .slide .txt .sub-long { display: block; }   /* show long description */
  .slide-cta { display: inline-flex; }        /* show the CTA button */
}
@media (min-width: 1024px) {  /* 💻 DESKTOP — make the banner text large (about 2× the tablet size) */
  .slide-inner { min-height: 260px; padding-block: 44px; }
  .slide .txt { max-width: 900px; }
  .slide .label { font-size: 26px; margin-bottom: 18px; }
  .slide .txt h3 { font-size: 68px; margin-bottom: 22px; }
  .slide .txt .sub-long { font-size: 32px; line-height: 1.4; }
  .slide-cta { font-size: 30px; padding: 16px 30px; margin-top: 30px; }
}


/* =============================================================
   SECTION B — POPULAR PRODUCTS  (ranking cards: 1, 2, 3 …)
   One column on mobile, more columns as the screen widens.
   ============================================================= */
.rank-list {
  display: grid;
  /* 🔢 COLUMNS for the popular-products list on phones. "1fr" = 1 column.
     ✏️ CHANGE ME: e.g. "repeat(2, 1fr)" for two columns.
     (Tablet/desktop counts are set in the responsive block at the end of this section.) */
  grid-template-columns: 1fr;
  gap: 10px 20px;
}
.rank-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--line);
}
.rank-num {
  flex: 0 0 auto;
  width: 22px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.02em;
}
.rank-card .thumb {
  width: 64px; height: 64px;
  flex: 0 0 64px;
  border-radius: var(--r-sm);
}
.rank-info { flex: 1 1 auto; min-width: 0; }
.rank-cat { font-size: 12px; color: var(--muted); font-weight: 600; }
.rank-info .name {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-info .price { margin-top: 3px; font-size: var(--fs-price); font-weight: 800; color: var(--purple); }

/* 📱→💻 RESPONSIVE (popular list) — spread into more columns as it widens */
@media (min-width: 768px) {   /* 📱 TABLET  */ .rank-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {  /* 💻 DESKTOP */ .rank-list { grid-template-columns: repeat(3, 1fr); } }