/* ═══════════════════════════════════════════════════════════════
   NOVUS — Category Carousel
   Works WITHOUT .is-carousel on mobile — pure CSS scroll.
   ═══════════════════════════════════════════════════════════════ */

a.cat-card { display: block; text-decoration: none; color: inherit; }

/* ── OUTER WRAPPER ── */
.cat-carousel-outer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
}

/* ── DESKTOP GRID ── */
.categories-scroll {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 4rem;
  width: 100%;
}

.categories-scroll > .cat-card {
  width: calc((100% - 5 * 1.5rem) / 6);
  min-width: 130px;
  max-width: 200px;
}

/* ── CAROUSEL MODE ── */
.cat-carousel-outer.is-carousel { padding: 0 3rem; }
.cat-carousel-outer.is-carousel .categories-scroll {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 1.25rem;
  padding: 0.5rem 0 1rem;
  margin-top: 0;
  width: 100%;
}
.cat-carousel-outer.is-carousel .categories-scroll::-webkit-scrollbar { display: none; }

.cat-carousel-outer.is-carousel .categories-scroll > .cat-card,
.cat-carousel-outer.is-carousel .cat-card {
  flex: 0 0 calc((100% - 5 * 1.25rem) / 6) !important;
  width: auto !important;
  min-width: unset !important;
  max-width: unset !important;
  scroll-snap-align: start;
  transform: none;
}

/* ── ARROWS ── */
.cat-arrow {
  display: none; flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--lilac);
  background: var(--cream); color: var(--violet);
  cursor: pointer; align-items: center; justify-content: center;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  z-index: 2;
}
.cat-arrow svg { display: block; pointer-events: none; }
.cat-arrow:hover { background: var(--violet); color: #fff; border-color: var(--violet); }
.cat-arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.cat-carousel-outer.is-carousel .cat-arrow { display: flex; }

/* ── CAT CARD base ── */
.cat-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: none;
  transition: transform 0.4s ease;
}
.cat-card:hover { transform: translateY(-8px); }

.cat-bg {
  position: absolute !important;
  inset: 0; width: 100%; height: 100%;
  transition: transform 0.6s ease;
}
.cat-card:hover .cat-bg { transform: scale(1.08); }

.cat-bg-1 { background: linear-gradient(160deg, #7C3AED 0%, #4C1D95 100%); }
.cat-bg-2 { background: linear-gradient(160deg, #9333EA 0%, #3D1466 100%); }
.cat-bg-3 { background: linear-gradient(160deg, #6B21A8 0%, #1A0533 100%); }
.cat-bg-4 { background: linear-gradient(160deg, #A855F7 0%, #4C1D95 100%); }
.cat-bg-5 { background: linear-gradient(160deg, #8B5CF6 0%, #2D0A4E 100%); }
.cat-bg-6 { background: linear-gradient(160deg, #7C3AED 0%, #2D0A4E 100%); }

.cat-bg-1::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 8px,
    rgba(255,255,255,0.05) 8px, rgba(255,255,255,0.05) 9px
  );
}

.cat-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.5rem 1rem;
  background: linear-gradient(to top, rgba(20,4,40,0.85), transparent);
  text-align: center; z-index: 1;
}
.cat-label h3 {
  font-family: var(--font-serif); font-size: 1rem;
  color: var(--cream); font-weight: 400; letter-spacing: 0.05em;
}
.cat-label span {
  font-size: 0.6rem; letter-spacing: 0.2em; color: var(--gold);
  text-transform: uppercase; display: block; margin-top: 0.2rem;
}

/* ── DOTS ── */
.novus-dots { display: none; justify-content: center; gap: 6px; margin-top: 1.25rem; padding-bottom: 0.5rem; }
.novus-dots.active { display: flex; }
.novus-dots .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(107,33,168,0.2); border: none; padding: 0;
  cursor: pointer; transition: background 0.25s, transform 0.25s;
  appearance: none; -webkit-appearance: none;
}
.novus-dots .dot.active { background: var(--gold); transform: scale(1.4); }

/* ── TABLET LANDSCAPE ≤ 1024px ── */
@media (max-width: 1024px) {
  .categories-scroll { gap: 1.25rem; margin-top: 3rem; }
  .categories-scroll > .cat-card { width: calc((100% - 2 * 1.25rem) / 3); min-width: 140px; max-width: 280px; }
  .cat-carousel-outer.is-carousel { padding: 0 2.5rem; }
  .cat-carousel-outer.is-carousel .categories-scroll > .cat-card,
  .cat-carousel-outer.is-carousel .cat-card {
    flex: 0 0 calc((100% - 2 * 1.25rem) / 3) !important; max-width: unset !important;
  }
  .cat-card:hover { transform: translateY(-4px); }
}

/* ── TABLET PORTRAIT ≤ 768px ── */
@media (max-width: 768px) {
  .categories-scroll { gap: 1rem; margin-top: 2.5rem; }
  .categories-scroll > .cat-card { width: calc((100% - 1rem) / 2); min-width: 130px; max-width: 260px; }
  .cat-carousel-outer.is-carousel { padding: 0 2rem; }
  .cat-carousel-outer.is-carousel .categories-scroll > .cat-card,
  .cat-carousel-outer.is-carousel .cat-card {
    flex: 0 0 calc((100% - 1.25rem) / 2) !important; max-width: unset !important;
  }
  .cat-card:hover { transform: none; }
  .cat-label { padding: 1.25rem 0.75rem; }
  .cat-label h3 { font-size: 0.95rem; }
}

/* ── MOBILE ≤ 600px — NO .is-carousel dependency ── */
@media (max-width: 600px) {

 .categories { overflow: hidden !important; }

  .cat-carousel-outer,
  .cat-carousel-outer.is-carousel {
    flex-direction: row !important;
    overflow: visible !important;
    gap: 0 !important;
    padding: 0 !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  .cat-arrow,
  .cat-carousel-outer.is-carousel .cat-arrow { display: none !important; }

  .categories-scroll,
  .cat-carousel-outer.is-carousel .categories-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: scroll !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.75rem !important;
    padding: 1rem 15vw 1.5rem 1.25rem !important;
    margin-top: 1.5rem !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    width: 100% !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
  }
  .categories-scroll::-webkit-scrollbar { display: none !important; }

  /* ← These selectors MUST be more specific than .is-carousel rules */
  .cat-carousel-outer.is-carousel .categories-scroll > .cat-card,
  .cat-carousel-outer.is-carousel .cat-card,
  .categories-scroll > .cat-card,
  .cat-card {
    flex: 0 0 80vw !important;
    width: 80vw !important;
    min-width: unset !important;
    max-width: 280px !important;
    height: 260px !important;
    max-height: unset !important;
    aspect-ratio: unset !important;
    scroll-snap-align: start !important;
    position: relative !important;
    overflow: hidden !important;
    transform: none !important;
    cursor: auto !important;
  }

  .cat-card .cat-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
  .cat-card .cat-label { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; }
  .categories .section-header { padding: 0 1.25rem; margin-bottom: 0; }
  .novus-dots, .novus-dots.active { display: flex !important; margin-top: 1rem; padding: 0 0 0.5rem; }
}

/* ── SMALL MOBILE ≤ 480px ── */
@media (max-width: 480px) {
  .cat-label h3 { font-size: 0.88rem; }
  .cat-label span { font-size: 0.55rem; }
}