/* ══════════════════════════════════════════════════════════════════
   Storefront Home polish — Cycle 6 Home Commit 3
   Class extractions from inline `style="..."` soup in templates/storefront/
   home.html + _product_card.html + carousel hardening.
   Pre-fix the home template was sprinkled with 6+ inline style attrs
   (banner heights, search field min-widths, price-range box widths,
   product-card image height) which fought the cascade and made theme
   tweaks impossible. Centralising here.
   ══════════════════════════════════════════════════════════════════ */

/* ── Section headings (Cycle 20 Lane D) ──────────────────────────────
   v2 identity §3: section headings are navy on light surfaces, white
   on navy. The storefront body text is near-black zinc, so home-page
   section titles ("Featured products", "Categories", "New arrivals")
   read as flat dark text. Re-tone them to the navy ink token so the
   buyer surface picks up the v2 anchor. `--wasla-ink` is token-flip
   driven (navy in light, off-white in dark) — no dark override needed.
   Neutral chrome only: this is the Wasla section-band heading, not
   merchant-themed product copy. */
.wasla-home-section-title {
  color: var(--wasla-ink, #1D3A5E);
  font-weight: 700;
}

/* ── Hero banner carousel ────────────────────────────────────────── */

.wasla-home-banner-img {
  /* Banner aspect-ratio is set via width/height attrs (1200×400) for
     CLS — this caps height on wide screens where the natural 1200×400
     would stretch unreasonably. object-fit keeps the image filling
     the box without distortion. */
  max-height: 400px;
  object-fit: cover;
}

.wasla-home-banner-fallback {
  /* Shown when a banner record has no image set. Fixed height so the
     carousel slot reserves the same vertical space as a real image. */
  height: 300px;
}

/* Honour the user's reduced-motion preference: pause the carousel
   auto-rotation. Bootstrap's data-bs-ride="carousel" auto-cycles by
   default; this CSS-only fallback is a defence-in-depth signal — the
   JS-side `data-bs-ride` is also gated below. */
@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none !important;
  }
}

/* ── Search / filter form ────────────────────────────────────────── */

.wasla-home-search-field {
  /* Stops the search input from collapsing below readable width when
     other filter controls fill the row on tablets. */
  min-width: 220px;
}

.wasla-home-price-input {
  /* Min/max number inputs sit side-by-side; matching widths keep the
     row tidy without stretching to fill the flex row. */
  width: 100px;
}

/* ── Category tiles (clickable filters) ──────────────────────────── */

.wasla-home-category-tile {
  /* Cards used as filter buttons. Inherit `card` baseline + add a
     subtle hover lift so the click affordance is obvious. */
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.wasla-home-category-tile:hover,
.wasla-home-category-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--brand-primary, #1d3a5e);
}

.wasla-home-category--active {
  /* Currently-selected category — stronger border + tinted bg so the
     active filter is unambiguous. Cycle 20 Lane D: the --brand-primary
     fallback + the matching bg tint re-toned to v2 navy #1D3A5E
     (rgb 29,58,94) — was legacy #1F4FD8 / rgba(31,79,216,…). */
  border-color: var(--brand-primary, #1d3a5e) !important;
  background-color: rgba(29, 58, 94, 0.06);
}

.wasla-home-category--active .card-body .fw-bold {
  color: var(--brand-primary, #1d3a5e);
}

/* ── Product-card image ─────────────────────────────────────────── */

.wasla-home-product-card-img {
  /* Pulled out of inline `style="height:180px;object-fit:cover"`.
     width/height attrs on the <img> still set 300×180 for CLS. */
  height: 180px;
  object-fit: cover;
}

/* Honour reduced motion on the carousel-item slide animation. */
@media (prefers-reduced-motion: reduce) {
  #storeBannerCarousel .carousel-item {
    transition: none;
  }
}

/* ── Dark mode (Cycle 21 Lane A) ─────────────────────────────────────
   home.css is almost entirely layout/sizing; headings + category-tile
   borders flip via the --wasla-ink / --brand-* tokens. Only the two
   hard-coded light-mode surface values below need a dark counterpart:
   the hover shadow (a faint black shadow is invisible on a dark
   surface) and the active-category navy tint (rgba(29,58,94,.06) is
   too dark to read on the deep-navy dark canvas). */
[data-bs-theme="dark"] .wasla-home-category-tile:hover,
[data-bs-theme="dark"] .wasla-home-category-tile:focus-visible {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .wasla-home-category--active {
  background-color: rgba(120, 150, 200, 0.14);
}