/* ═══════════════════════════════════════════════════════════
   Category Hero Carousel — shared by index.php and products.php
   (loaded via each page's own $extraCss). Auto-sliding, single
   centered card with peeking neighbours, directly below the shared
   header + category-tabs row.

   Native horizontal scroll + scroll-snap (not a transform hack) —
   same technique as assets/js/home-carousel.js's .featured-carousel
   elsewhere on the site, so touch/trackpad gestures work for free.
   Behaviour in assets/js/category-hero-carousel.js.

   The 140px/88px figures below mirror the exact ones already used in
   assets/css/hero-showcase.css for the same fixed 2-row header (140px
   desktop ≥1024px once the category-tabs row is visible, 88px on the
   single-row mobile header below that) — margin-top here uses the
   same numbers plus a visible gap, since (unlike hero-showcase.css)
   this section has no padding-top of its own to clear the fixed
   header, and would otherwise render partly underneath it.
   ═══════════════════════════════════════════════════════════ */

.category-hero-carousel {
  position: relative;
  width: 100%;
  margin-top: calc(140px + 32px);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

@media (max-width: 1023.98px) {
  .category-hero-carousel {
    margin-top: calc(88px + 24px);
  }
}

.category-hero-carousel__viewport {
  position: relative;
  width: 100%;
  height: clamp(420px, calc(100svh - 240px), 660px);
  min-height: 420px;
  max-height: 660px;
  overflow: hidden;
}

@media (max-width: 1023.98px) {
  .category-hero-carousel__viewport {
    height: clamp(380px, calc(100svh - 188px), 660px);
    min-height: 380px;
  }
}

/* One large, centered card at a time — neighbouring cards peek in on
   both sides. Side padding equal to half the leftover width (100% -
   card width, halved) so the first/last real card can also reach a
   fully-centered scroll position, not just the ones in the middle —
   matched by the JS's centering math in scrollToIndex(). */
.category-hero-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(1100px, 82%);
  gap: clamp(10px, 1vw, 18px);
  height: 100%;
  padding-inline: 9%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.category-hero-carousel__track::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .category-hero-carousel__track {
    scroll-behavior: auto;
  }
}

@media (max-width: 767.98px) {
  .category-hero-carousel__track {
    grid-auto-columns: 88%;
    padding-inline: 6%;
  }
}

@media (max-width: 519.98px) {
  .category-hero-carousel__track {
    grid-auto-columns: 92%;
    padding-inline: 4%;
  }
}

/* ── Card ──────────────────────────────────────────────────────── */
/* Only the centered card is shown — the peeking neighbours on either
   side are fully hidden rather than just dimmed, so exactly one banner
   is visible at a time. .is-active is toggled by
   assets/js/category-hero-carousel.js whenever the active card changes
   (goTo()). :focus-visible still forces a card visible so keyboard
   users tabbing through the track aren't left focused on something
   invisible. */
.category-hero-carousel__card {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  scroll-snap-align: center;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(20, 60, 100, 0.10);
  opacity: 0;
  transition: transform 250ms ease, box-shadow 250ms ease, opacity 350ms ease;
}

.category-hero-carousel__card.is-active {
  opacity: 1;
}

.category-hero-carousel__card.is-active:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(20, 60, 100, 0.16);
}

.category-hero-carousel__card:focus-visible {
  opacity: 1;
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(20, 60, 100, 0.16);
  outline: 3px solid var(--color-accent, #009FE3);
  outline-offset: 2px;
}

.category-hero-carousel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.category-hero-carousel__card:hover .category-hero-carousel__img,
.category-hero-carousel__card:focus-visible .category-hero-carousel__img {
  transform: scale(1.06);
}

/* Decorative — the whole card is already the real link (aria-label on
   the <a>), so this is aria-hidden and just gives the banner a visible
   call-to-action instead of relying on the image alone. */
.category-hero-carousel__cta {
  position: absolute;
  left: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: var(--radius-full, 999px);
  background: #F2994A;
  color: #ffffff;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 18px -6px rgba(217, 127, 46, 0.55);
  transition: background 0.2s ease;
}

.category-hero-carousel__card:hover .category-hero-carousel__cta,
.category-hero-carousel__card:focus-visible .category-hero-carousel__cta {
  background: #D97F2E;
}

/* ── Arrows ────────────────────────────────────────────────────── */
.category-hero-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-text-dark, #123A63);
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(20, 60, 100, 0.18);
  transition: background 200ms ease, transform 200ms ease;
}

.category-hero-carousel__arrow:hover {
  background: #ffffff;
}

.category-hero-carousel__arrow:focus-visible {
  outline: 2px solid var(--color-accent, #009FE3);
  outline-offset: 2px;
}

.category-hero-carousel__arrow[hidden] {
  display: none;
}

.category-hero-carousel__arrow--prev {
  left: calc(clamp(16px, 2vw, 32px) + 8px);
}

.category-hero-carousel__arrow--next {
  right: calc(clamp(16px, 2vw, 32px) + 8px);
}

@media (max-width: 767.98px) {
  .category-hero-carousel__arrow {
    width: 38px;
    height: 38px;
  }

  .category-hero-carousel__cta {
    left: 50%;
    bottom: 44px;
    transform: translateX(-50%);
  }
}

/* ── Pagination dots ───────────────────────────────────────────── */
.category-hero-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
}

.category-hero-carousel__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.category-hero-carousel__dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.category-hero-carousel__dot.is-active {
  background: #ffffff;
  transform: scale(1.3);
}

.category-hero-carousel__dot:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .category-hero-carousel__card,
  .category-hero-carousel__img,
  .category-hero-carousel__arrow,
  .category-hero-carousel__dot {
    transition: none;
  }
  .category-hero-carousel__card:hover,
  .category-hero-carousel__card:focus-visible {
    transform: none;
  }
  .category-hero-carousel__card:hover .category-hero-carousel__img,
  .category-hero-carousel__card:focus-visible .category-hero-carousel__img {
    transform: none;
  }
}