/* ============================================================
   RENUCE — HOME PAGE (home.css)
   Layout and visual styling for every homepage section.
   Typography (eyebrows, titles, body text) lives in typography.css.
   Reusable atoms (buttons, badges, tabs) live in components.css.
   This file owns: section rhythm, grid layouts, card visuals,
   image treatments, overlays, and home-specific interactions.

   Sections:
     1.  Section Base Spacing
     2.  Category Showcase Grid
     3.  Category Cards
     4.  Products Grid
     5.  Brand Editorial Banner
     6.  Collection Spotlight
     7.  Promo Banners
     8.  Testimonials
     9.  Newsletter Section
    10.  Recently Viewed
    11.  Responsive Overrides
   ============================================================ */


/* =====================================================
   1. SECTION BASE SPACING
   Applied to every <section class="section"> on the page
===================================================== */

.section {
  padding: var(--section-padding-y) 0;
  /* 80px top/bottom */
}

/* Alternating cream background on every other section */
.categories-section,
.testimonials-section {
  background: var(--color-bg-secondary);
}

/* Sections that sit against a white background */
.products-section,
.collection-spotlight,
.promo-banners {
  background: var(--color-bg-primary);
}


/* =====================================================
   2. CATEGORY SHOWCASE GRID
   6 cards: 2 tall hero cards + 2×2 small cards
   Layout: [Women | Men | Shawls  + Shoes      ]
           [      |     | Caps    + Accessories ]
===================================================== */

.categories-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--grid-gap);
  /* 1.5rem */
}

/* Women — tall, spans 2 rows, 1 col */
.cat-card--women {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

/* Men — tall, spans 2 rows, 1 col */
.cat-card--men {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

/* Small cards fill the right two columns, one row each */
.cat-card--shawls {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.cat-card--shoes {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
}

.cat-card--caps {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.cat-card--accessories {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}


/* =====================================================
   3. CATEGORY CARDS
   Base card, large variant, hover states, overlays
===================================================== */

.cat-card {
  display: block;
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  background: var(--color-bg-tertiary);
  cursor: pointer;
}

/* Aspect ratios */
.cat-card--large {
  aspect-ratio: 3 / 4;
  /* Tall portrait for Women & Men */
}

.cat-card--shawls,
.cat-card--shoes,
.cat-card--caps,
.cat-card--accessories {
  aspect-ratio: 4 / 3;
  /* Landscape for small cards */
}

/* --- Image --- */
.cat-card__media {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.cat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform var(--duration-slowest) var(--ease-out);
  will-change: transform;
}

.cat-card:hover .cat-card__img {
  transform: scale(1.06);
}

/* Fallback when image fails */
.cat-card__media--fallback {
  background: var(--color-bg-tertiary);
}

/* --- Gradient overlay — bottom-up for text legibility --- */
.cat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(10, 10, 10, 0.80) 0%,
      rgba(10, 10, 10, 0.35) 45%,
      transparent 75%);
  transition: opacity var(--duration-slow) var(--ease-in-out);
  pointer-events: none;
  z-index: 1;
}

.cat-card:hover::after {
  opacity: 0.85;
}

/* --- Body text (positioned over image) --- */
.cat-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6);
  z-index: 2;
  transform: translateY(0);
  transition: transform var(--duration-slow) var(--ease-out);
}

.cat-card--large .cat-card__body {
  padding: var(--space-8);
}

/* Nudge body content up slightly on hover */
.cat-card:hover .cat-card__body {
  transform: translateY(-4px);
}

/* Typography in typography.css:
   .cat-card__eyebrow, .cat-card__name, .cat-card__cta */

/* Subtle CTA underline expands on hover */
.cat-card__cta {
  position: relative;
  transition: gap var(--duration-base) var(--ease-out);
}

.cat-card__cta::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-brand-white);
  transition: width var(--duration-slow) var(--ease-out);
  opacity: 0.60;
}

.cat-card:hover .cat-card__cta::after {
  width: calc(100% - 22px);
  /* Full width minus arrow */
}

.cat-card:hover .cat-card__cta svg {
  transform: translateX(3px);
}

.cat-card__cta svg {
  transition: transform var(--duration-base) var(--ease-out);
}

/* Focus ring */
.cat-card:focus-visible {
  outline: 3px solid var(--color-brand-gold);
  outline-offset: 3px;
}


/* =====================================================
   4. PRODUCTS GRID
   Used for New Arrivals and Best Sellers sections
===================================================== */

/* 4-column grid */
.products-grid--4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}

/* 3-column variant (when needed) */
.products-grid--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

/* 2-column variant */
.products-grid--2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}


/* =====================================================
   5. BRAND EDITORIAL BANNER
   Full-bleed dark section with centred quote
===================================================== */

.brand-editorial {
  background: var(--color-bg-dark);
  position: relative;
  overflow: hidden;
}

/* Subtle radial glow — luxury atmosphere */
.brand-editorial::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
      rgba(201, 169, 110, 0.07) 0%,
      transparent 65%);
  pointer-events: none;
}

/* Thin gold ruled lines top and bottom */
.brand-editorial::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(201, 169, 110, 0.35),
      transparent);
}

.brand-editorial__inner {
  padding: var(--space-24) 0;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.brand-editorial__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 680px;
  padding: 0 var(--space-6);
}

/* Decorative horizontal rule between quote and body text */
.brand-editorial__rule {
  width: 60px;
  height: 1px;
  background: var(--color-brand-gold);
  margin: var(--space-8) auto;
  opacity: 0.60;
}

/* Bottom border of the section — mirror of top */
.brand-editorial {
  border-bottom: 1px solid rgba(201, 169, 110, 0.12);
}


/* =====================================================
   6. COLLECTION SPOTLIGHT
   Two-column: text content left, stacked images right
===================================================== */

.collection-spotlight {
  overflow: hidden;
}

.collection-spotlight__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

/* --- Content side --- */
.collection-spotlight__content {
  padding: var(--space-8) 0;
}

/* Typography (.collection-spotlight__desc, __features)
   is declared in typography.css */

.collection-spotlight__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* --- Image side --- */
.collection-spotlight__media {
  position: relative;
}

.collection-spotlight__img-stack {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Primary (large) image */
.collection-spotlight__img-main {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  margin: 0;
  box-shadow: var(--shadow-2xl);
  aspect-ratio: 4 / 5;
  background: var(--color-bg-tertiary);
  max-width: 420px;
}

.collection-spotlight__img-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform var(--duration-slowest) var(--ease-out);
}

.collection-spotlight__img-main:hover img {
  transform: scale(1.04);
}

/* Secondary (smaller) image — offset bottom-right */
.collection-spotlight__img-secondary {
  position: absolute;
  bottom: -var(--space-8);
  right: calc(-1 * var(--space-10));
  width: 55%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 4px solid var(--color-bg-primary);
  margin: 0;
  background: var(--color-bg-tertiary);
  aspect-ratio: 3 / 4;

  /* Position it overlapping the main image corner */
  bottom: var(--space-8);
  right: calc(-1 * var(--space-12));
}

.collection-spotlight__img-secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback for missing images */
.img--fallback {
  background: var(--color-bg-tertiary);
}

/* Rotating luxury badge */
.collection-spotlight__badge {
  position: absolute;
  top: var(--space-8);
  right: calc(-1 * var(--space-6));
  width: 80px;
  height: 80px;
  background: var(--color-brand-black);
  border-radius: var(--radius-full);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.5px solid rgba(201, 169, 110, 0.35);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  animation: badge-spin 18s linear infinite;
}

@keyframes badge-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Pause rotation on hover */
.collection-spotlight__media:hover .collection-spotlight__badge {
  animation-play-state: paused;
}

/* Typography (.collection-spotlight__badge-label, __badge-year)
   is declared in typography.css */


/* =====================================================
   7. PROMO BANNERS
   Two equal-width image banners side by side
===================================================== */

.promo-banners {
  background: var(--color-bg-secondary);
}

.promo-banners__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
}

/* --- Individual banner card --- */
.promo-banner {
  position: relative;
  display: block;
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  background: var(--color-bg-tertiary);
  aspect-ratio: 16 / 9;
}

/* Image */
.promo-banner__media {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.promo-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slowest) var(--ease-out);
  will-change: transform;
}

.promo-banner:hover .promo-banner__img {
  transform: scale(1.05);
}

.promo-banner__media--fallback {
  background: var(--color-bg-tertiary);
}

/* Gradient overlay */
.promo-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(10, 10, 10, 0.65) 0%,
      rgba(10, 10, 10, 0.20) 60%,
      transparent 100%);
  transition: opacity var(--duration-slow) var(--ease-in-out);
  pointer-events: none;
  z-index: 1;
}

.promo-banner:hover::after {
  opacity: 0.90;
}

/* Content sits over image */
.promo-banner__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-8);
  z-index: 2;
  transform: translateY(0);
  transition: transform var(--duration-slow) var(--ease-out);
}

.promo-banner:hover .promo-banner__content {
  transform: translateY(-4px);
}

/* Typography (.promo-banner__tag, __title, __sub, __cta)
   is declared in typography.css */

.promo-banner__cta svg {
  transition: transform var(--duration-base) var(--ease-out);
  flex-shrink: 0;
}

.promo-banner:hover .promo-banner__cta svg {
  transform: translateX(4px);
}

/* Focus ring */
.promo-banner:focus-visible {
  outline: 3px solid var(--color-brand-gold);
  outline-offset: 3px;
}


/* =====================================================
   8. TESTIMONIALS
   Three-column card grid with star ratings
===================================================== */

.testimonials-section {
  position: relative;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap-lg);
  /* 2rem */
  margin-bottom: var(--space-10);
}

/* --- Testimonial Card --- */
.testimonial-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  transition: box-shadow var(--duration-base) var(--ease-in-out),
    transform var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-in-out);
  overflow: hidden;
}

.testimonial-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: rgba(201, 169, 110, 0.30);
}

/* Decorative open-quote mark */
.testimonial-card::before {
  content: '\201C';
  /* Left double quotation mark */
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  font-family: var(--font-serif);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-brand-gold);
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Stars */
.testimonial-card__stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-4);
  color: var(--color-star);
}

/* blockquote typography in typography.css: .testimonial-card__text */
/* footer meta in typography.css: __name, __location, __badge */

.testimonial-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-light);
}

/* Avatar initials circle */
.testimonial-card__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-brand-gold);
  color: var(--color-brand-black);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
}

.testimonial-card__meta {
  flex: 1;
  min-width: 0;
}

.testimonial-card__badge {
  margin-left: auto;
  flex-shrink: 0;
}

/* CTA below grid */
.testimonials-section__cta {
  display: flex;
  justify-content: center;
}


/* =====================================================
   9. NEWSLETTER SECTION
   Dark full-width section: content left, form right
===================================================== */

.newsletter-section {
  background: var(--newsletter-bg);
  position: relative;
  overflow: hidden;
}

/* Atmospheric texture — subtle grain effect */
.newsletter-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%,
      rgba(201, 169, 110, 0.06) 0%,
      transparent 55%),
    radial-gradient(ellipse at 80% 50%,
      rgba(201, 169, 110, 0.04) 0%,
      transparent 55%);
  pointer-events: none;
}

/* Top border accent */
.newsletter-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(201, 169, 110, 0.40),
      transparent);
}

.newsletter-section__box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* --- Content side --- */
.newsletter-section__content {
  padding: var(--space-4) 0;
}

/* Typography (.newsletter-section__title, __desc, __perks)
   is declared in typography.css */

/* --- Form side --- */
.newsletter-section__form-wrap {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Newsletter form components in components.css (section 21) */


/* =====================================================
   10. RECENTLY VIEWED
   Hidden by default; shown by JS when items exist
===================================================== */

#recentlyViewedSection {
  background: var(--color-bg-secondary);
}

/* When made visible by JS (removes [hidden]) */
#recentlyViewedSection:not([hidden]) {
  animation: fade-in var(--duration-slow) var(--ease-out);
}


/* =====================================================
   11. RESPONSIVE OVERRIDES
===================================================== */

/* ── Large desktop (≤ 1280px) ── */
@media (max-width: 1280px) {

  .categories-grid {
    gap: var(--grid-gap-sm);
  }

  .collection-spotlight__grid {
    gap: var(--space-12);
  }

  .collection-spotlight__img-secondary {
    right: calc(-1 * var(--space-8));
    width: 50%;
  }

  .collection-spotlight__badge {
    right: calc(-1 * var(--space-4));
    width: 72px;
    height: 72px;
  }

  .newsletter-section__box {
    gap: var(--space-12);
  }

}

/* ── Tablet landscape (≤ 1024px) ── */
@media (max-width: 1024px) {

  /* Section spacing */
  .section {
    padding: var(--section-padding-y-sm) 0;
    /* 48px */
  }

  /* Category grid: 2 cols top (women/men), 4 small below */
  .categories-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--grid-gap);
  }

  .cat-card--women {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .cat-card--men {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .cat-card--shawls {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .cat-card--shoes {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .cat-card--caps {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  .cat-card--accessories {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  /* Large cards back to landscape ratio */
  .cat-card--large {
    aspect-ratio: 3 / 2;
  }

  /* Small cards stay landscape */
  .cat-card--shawls,
  .cat-card--shoes,
  .cat-card--caps,
  .cat-card--accessories {
    aspect-ratio: 16 / 9;
  }

  /* Products: 3 columns */
  .products-grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Collection spotlight stacks */
  .collection-spotlight__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .collection-spotlight__media {
    order: -1;
    /* Image above text on tablet */
  }

  .collection-spotlight__img-main {
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }

  .collection-spotlight__img-secondary {
    display: none;
    /* Hide on smaller screens */
  }

  .collection-spotlight__badge {
    top: var(--space-5);
    right: var(--space-5);
  }

  /* Brand editorial tighter */
  .brand-editorial__inner {
    padding: var(--space-16) 0;
  }

  /* Newsletter stacks */
  .newsletter-section__box {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Testimonials: 2 columns */
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-grid .testimonial-card:nth-child(3) {
    display: none;
    /* Hide third card at 2-col */
  }

}

/* ── Tablet portrait (≤ 768px) ── */
@media (max-width: 768px) {

  /* Products: 2 columns */
  .products-grid--4,
  .products-grid--3 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap-sm);
  }

  /* Promo banners stack */
  .promo-banners__grid {
    grid-template-columns: 1fr;
    gap: var(--grid-gap-sm);
  }

  .promo-banner {
    aspect-ratio: 4 / 3;
  }

  /* Testimonials: single column */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--grid-gap);
  }

  .testimonials-grid .testimonial-card:nth-child(3) {
    display: flex;
    /* Restore on single column */
  }

  /* Brand editorial */
  .brand-editorial__inner {
    padding: var(--space-12) 0;
  }

  /* Newsletter form wrap no glass effect on mobile */
  .newsletter-section__form-wrap {
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
  }

  /* Collection spotlight content */
  .collection-spotlight__content {
    padding: var(--space-4) 0;
  }

  .collection-spotlight__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .collection-spotlight__actions .btn {
    width: 100%;
    justify-content: center;
  }

}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {

  .section {
    padding: var(--space-10) 0;
    /* 40px */
  }

  /* Categories: single column */
  .categories-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--grid-gap-sm);
  }

  .cat-card--women,
  .cat-card--men,
  .cat-card--shawls,
  .cat-card--shoes,
  .cat-card--caps,
  .cat-card--accessories {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }

  .cat-card--large {
    aspect-ratio: 3 / 2;
  }

  /* Products: single column for very small screens */
  .products-grid--4,
  .products-grid--3,
  .products-grid--2 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap-sm);
  }

  /* Cat card body padding */
  .cat-card__body {
    padding: var(--space-4);
  }

  /* Brand editorial */
  .brand-editorial__inner {
    padding: var(--space-10) 0;
  }

  .brand-editorial__rule {
    margin: var(--space-6) auto;
  }

  /* Promo banner content */
  .promo-banner__content {
    padding: var(--space-5);
  }

  .promo-banner {
    aspect-ratio: 3 / 2;
  }

  /* Testimonial card */
  .testimonial-card {
    padding: var(--space-5);
  }

  /* Newsletter box */
  .newsletter-section__box {
    gap: var(--space-6);
  }

  .newsletter-section__form-wrap {
    padding: var(--space-5);
  }

  /* Collection spotlight badge */
  .collection-spotlight__badge {
    width: 64px;
    height: 64px;
  }

}

/* ============================================================
   RENUCE — HERO SLIDER (hero.css)
   Full-viewport image slider for the homepage hero section.

   Load order: AFTER reset.css, typography.css, layout.css
   Depends on:  variables.css (--space-*, --color-*, --font-*)

   Sections:
     1.  Hero Shell
     2.  Slider & Slides
     3.  Media (image + overlays)
     4.  Content Container & Alignment Variants
     5.  Eyebrow, Title, Subtitle, Actions
     6.  Slide-Up Entry Animations
     7.  Slider Controls (Arrows + Dots)
     8.  Scroll Cue
     9.  Fallback (no image)
    10.  Reduced Motion
    11.  Responsive Overrides
   ============================================================ */


/* =====================================================
   1. HERO SHELL
   Full-viewport height. Sits directly below the sticky
   header — JS sets --header-total-height at runtime.
===================================================== */

.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  /* dynamic viewport height */
  min-height: 560px;
  max-height: 960px;
  /* cap on very tall screens */
  overflow: hidden;
  background-color: #0A0A0A;
  /* shows while image loads */
  isolation: isolate;
}


/* =====================================================
   2. SLIDER & SLIDES
   Slides stack absolutely inside the relative shell.
   Transitions: cross-fade with a subtle forward zoom.
   The active class is toggled by hero.js.
===================================================== */

.hero__slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Individual Slide ── */
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* Outgoing slide fades + zooms out */
  transform: scale(1.03);
  transition: opacity 0.85s var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)),
    transform 0.85s var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  /* Prevent interaction on inactive slides */
  pointer-events: none;
  will-change: opacity, transform;
}

/* ── Active Slide ── */
.hero__slide--active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 1;
}

/* ── Outgoing Slide (JS adds this mid-transition) ── */
.hero__slide--leaving {
  opacity: 0;
  transform: scale(0.98);
  z-index: 0;
}


/* =====================================================
   3. MEDIA — IMAGE & OVERLAYS
===================================================== */

/* ── Figure wrapper — fills the entire slide ── */
.hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ── Full-bleed image ── */
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* favour upper body / model face */
  display: block;
  /* Subtle Ken Burns on the active slide */
  transform-origin: center center;
  transition: transform 6s linear;
}

/* Trigger the Ken Burns movement when slide is active */
.hero__slide--active .hero__img {
  transform: scale(1.06);
}

/* ── Base Overlay — left-to-right dark scrim ── */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      rgba(0, 0, 0, 0.70) 0%,
      rgba(0, 0, 0, 0.40) 55%,
      rgba(0, 0, 0, 0.15) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Dark variant (men's slide — content right) */
.hero__overlay--dark {
  background: linear-gradient(255deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.40) 55%,
      rgba(0, 0, 0, 0.15) 100%);
}

/* Warm variant (shawls slide — content center) */
.hero__overlay--warm {
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.20) 0%,
      rgba(10, 6, 2, 0.55) 45%,
      rgba(16, 10, 2, 0.75) 100%);
}

/* Bottom vignette present on every slide */
.hero__slide::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
  pointer-events: none;
  z-index: 2;
}


/* =====================================================
   4. CONTENT CONTAINER & ALIGNMENT VARIANTS
===================================================== */

/* Stretches to fill the slide above the bottom vignette */
.hero__content-container {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* above overlay + vignette */
  display: flex;
  align-items: center;
  pointer-events: none;
  /* container transparent; children opt back in */
}

/* ── Content block ── */
.hero__content {
  max-width: 640px;
  pointer-events: auto;
}

/* Left-aligned (slide 1: women's) */
.hero__content--left {
  margin-right: auto;
  text-align: left;
}

/* Right-aligned (slide 2: men's) */
.hero__content--right {
  margin-left: auto;
  text-align: left;
  /* text stays left even when block is right-anchored */
}

/* Center-aligned (slide 3: shawls) */
.hero__content--center {
  margin: 0 auto;
  text-align: center;
}

.hero__content--center .hero__actions {
  justify-content: center;
}


/* =====================================================
   5. EYEBROW, TITLE, SUBTITLE, ACTIONS
===================================================== */

/* ── Eyebrow label ── */
.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand-gold, #C9A96E);
  margin-bottom: var(--space-4, 1rem);
  line-height: 1;

  /* Gold left-bar accent */
  padding-left: var(--space-3, 0.75rem);
  border-left: 2px solid var(--color-brand-gold, #C9A96E);
}

/* Center-aligned slide: no left border */
.hero__content--center .hero__eyebrow {
  padding-left: 0;
  border-left: none;
  /* Replace with flanking lines */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
}

.hero__content--center .hero__eyebrow::before,
.hero__content--center .hero__eyebrow::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--color-brand-gold, #C9A96E);
  opacity: 0.70;
  flex-shrink: 0;
}

/* ── Main Title ── */
.hero__title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: var(--weight-bold, 700);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--color-brand-white, #FFFFFF);
  margin: 0 0 var(--space-5, 1.25rem);
}

/* Italic em — gold accent on the signature word */
.hero__title em {
  font-style: italic;
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-gold, #C9A96E);
}

/* ── Subtitle ── */
.hero__subtitle {
  font-family: var(--font-sans);
  font-size: clamp(var(--text-base, 1rem), 1.4vw, var(--text-lg, 1.125rem));
  font-weight: var(--weight-regular, 400);
  color: rgba(255, 255, 255, 0.78);
  line-height: var(--leading-relaxed, 1.65);
  max-width: 460px;
  margin: 0 0 var(--space-8, 2rem);
}

.hero__content--center .hero__subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* ── Actions (button row) ── */
.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  flex-wrap: wrap;
}


/* =====================================================
   6. SLIDE-UP ENTRY ANIMATIONS
   JS sets --anim-delay (ms) from data-delay attribute,
   then adds .hero__slide--active to the slide.
   Elements with data-anim="slide-up" start hidden.
===================================================== */

/* Initial hidden state — all animatable children */
[data-anim="slide-up"] {
  opacity: 0;
  transform: translateY(28px);
  /* No transition here — animation handles it */
}

/* When slide becomes active, animate children in */
.hero__slide--active [data-anim="slide-up"] {
  animation: hero-slide-up 0.70s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
  /* JS sets inline style: animation-delay: Xms */
}

@keyframes hero-slide-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Convenience delay utilities (fallback if JS doesn't set inline style) */
.hero__slide--active [data-anim="slide-up"][data-delay="0"] {
  animation-delay: 0ms;
}

.hero__slide--active [data-anim="slide-up"][data-delay="80"] {
  animation-delay: 80ms;
}

.hero__slide--active [data-anim="slide-up"][data-delay="160"] {
  animation-delay: 160ms;
}

.hero__slide--active [data-anim="slide-up"][data-delay="240"] {
  animation-delay: 240ms;
}

.hero__slide--active [data-anim="slide-up"][data-delay="320"] {
  animation-delay: 320ms;
}


/* =====================================================
   7. SLIDER CONTROLS — ARROWS + DOTS
===================================================== */

.hero__controls {
  position: absolute;
  bottom: var(--space-10, 2.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-5, 1.25rem);
}

/* ── Arrow buttons ── */
.hero__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.10);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-full, 9999px);
  color: rgba(255, 255, 255, 0.80);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--duration-base, 200ms) var(--ease-in-out),
    border-color var(--duration-base, 200ms) var(--ease-in-out),
    color var(--duration-base, 200ms) var(--ease-in-out),
    transform var(--duration-fast, 120ms) var(--ease-out);
  flex-shrink: 0;
}

.hero__arrow:hover {
  background: rgba(201, 169, 110, 0.20);
  border-color: rgba(201, 169, 110, 0.55);
  color: var(--color-brand-white, #fff);
}

.hero__arrow:active {
  transform: scale(0.93);
}

.hero__arrow:focus-visible {
  outline: 2px solid var(--color-brand-gold, #C9A96E);
  outline-offset: 3px;
}

.hero__arrow svg {
  flex-shrink: 0;
  /* No translateX on arrows — directional arrows should stay put */
  transition: none;
}

.hero__arrow--prev svg {
  margin-right: 1px;
  /* optical nudge */
}

.hero__arrow--next svg {
  margin-left: 1px;
}

/* ── Dots ── */
.hero__dots {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(255, 255, 255, 0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width var(--duration-slow, 350ms) var(--ease-out),
    background var(--duration-base, 200ms) var(--ease-in-out),
    opacity var(--duration-base, 200ms) var(--ease-in-out);
  flex-shrink: 0;
}

.hero__dot:hover:not(.hero__dot--active) {
  background: rgba(255, 255, 255, 0.65);
}

/* Active dot expands into a pill */
.hero__dot--active,
.hero__dot[aria-selected="true"] {
  width: 28px;
  background: var(--color-brand-gold, #C9A96E);
}

.hero__dot:focus-visible {
  outline: 2px solid var(--color-brand-gold, #C9A96E);
  outline-offset: 3px;
  border-radius: var(--radius-full);
}


/* =====================================================
   8. SCROLL CUE
   Animated vertical line + label at the bottom-center.
   Disappears once user scrolls past the hero.
===================================================== */

.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-8, 2rem);
  right: var(--space-8, 2rem);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  opacity: 1;
  transition: opacity var(--duration-slow, 350ms) var(--ease-in-out);

  /* Vertical writing mode for the label */
  writing-mode: vertical-rl;
}

/* Hide when JS adds .is-scrolled to hero or body */
.hero.is-scrolled .hero__scroll-cue,
.is-scrolled .hero__scroll-cue {
  opacity: 0;
  pointer-events: none;
}

/* Animated descending line */
.hero__scroll-line {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom,
      var(--color-brand-gold, #C9A96E),
      rgba(201, 169, 110, 0));
  animation: scroll-line 1.8s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes scroll-line {
  0% {
    transform: scaleY(0);
    opacity: 0;
    transform-origin: top center;
  }

  30% {
    transform: scaleY(1);
    opacity: 1;
  }

  70% {
    transform: scaleY(1);
    opacity: 1;
  }

  100% {
    transform: scaleY(0);
    opacity: 0;
    transform-origin: bottom center;
  }
}

.hero__scroll-text {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  /* 10px */
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1;
  /* Rotate text back to normal since writing-mode rotated it */
  transform: rotate(180deg);
}


/* =====================================================
   9. FALLBACK — IMAGE FAILS TO LOAD
===================================================== */

/* When onerror fires, a class is added to the figure */
.hero__media--fallback {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.hero__media--fallback .hero__img {
  opacity: 0;
}

/* Slide-level fallback: show a rich gradient in brand colors */
.hero__slide:nth-child(1) .hero__media--fallback {
  background: linear-gradient(135deg, #1C1410 0%, #2A1F14 50%, #0A0A0A 100%);
}

.hero__slide:nth-child(2) .hero__media--fallback {
  background: linear-gradient(135deg, #0D0D0D 0%, #1A1A1A 50%, #111111 100%);
}

.hero__slide:nth-child(3) .hero__media--fallback {
  background: linear-gradient(135deg, #1A1208 0%, #241A0A 50%, #0F0B05 100%);
}


/* =====================================================
   10. REDUCED MOTION
   Collapse all animations to instant cuts.
===================================================== */

@media (prefers-reduced-motion: reduce) {

  .hero__slide {
    transition: opacity 0.01ms;
    transform: none !important;
  }

  .hero__slide--active .hero__img {
    transform: none;
    transition: none;
  }

  .hero__slide--active [data-anim="slide-up"] {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero__scroll-line {
    animation: none;
    opacity: 0.50;
  }

  .hero__arrow {
    transition: none;
  }

  .hero__dot {
    transition: background var(--duration-fast, 120ms);
  }

}


/* =====================================================
   11. RESPONSIVE OVERRIDES
===================================================== */

/* ── LG: ≤ 1024px ── */
@media (max-width: 1024px) {

  .hero {
    max-height: 840px;
  }

  .hero__title {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
  }

  /* Arrows move closer to the dots */
  .hero__controls {
    gap: var(--space-4, 1rem);
  }

}

/* ── MD: ≤ 768px ── */
@media (max-width: 768px) {

  .hero {
    height: 92svh;
    min-height: 520px;
    max-height: none;
  }

  /* All content becomes center-aligned on mobile */
  .hero__content--left,
  .hero__content--right {
    margin: 0 auto;
    text-align: center;
  }

  .hero__content--left .hero__eyebrow,
  .hero__content--right .hero__eyebrow {
    padding-left: 0;
    border-left: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
  }

  .hero__content--left .hero__eyebrow::before,
  .hero__content--left .hero__eyebrow::after,
  .hero__content--right .hero__eyebrow::before,
  .hero__content--right .hero__eyebrow::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--color-brand-gold, #C9A96E);
    opacity: 0.70;
    flex-shrink: 0;
  }

  .hero__content--left .hero__actions,
  .hero__content--right .hero__actions {
    justify-content: center;
  }

  /* Subtitle max-width: full on mobile */
  .hero__subtitle {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Overlay covers more evenly on mobile (content centred) */
  .hero__overlay,
  .hero__overlay--dark {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.30) 0%,
        rgba(0, 0, 0, 0.65) 50%,
        rgba(0, 0, 0, 0.72) 100%);
  }

  /* Scroll cue: bottom-center instead of bottom-right */
  .hero__scroll-cue {
    right: 50%;
    transform: translateX(50%);
    writing-mode: horizontal-tb;
    flex-direction: row;
    bottom: var(--space-5, 1.25rem);
    gap: var(--space-2);
  }

  .hero__scroll-line {
    width: 40px;
    height: 1px;
    background: linear-gradient(to right,
        rgba(201, 169, 110, 0),
        var(--color-brand-gold, #C9A96E),
        rgba(201, 169, 110, 0));
    animation: scroll-line-h 1.8s ease-in-out infinite;
  }

  @keyframes scroll-line-h {
    0% {
      transform: scaleX(0);
      opacity: 0;
      transform-origin: left center;
    }

    30% {
      transform: scaleX(1);
      opacity: 1;
    }

    70% {
      transform: scaleX(1);
      opacity: 1;
    }

    100% {
      transform: scaleX(0);
      opacity: 0;
      transform-origin: right center;
    }
  }

  .hero__scroll-text {
    transform: none;
    writing-mode: horizontal-tb;
  }

  /* Controls: smaller arrows */
  .hero__arrow {
    width: 38px;
    height: 38px;
  }

  .hero__controls {
    bottom: var(--space-6, 1.5rem);
  }

}

/* ── SM: ≤ 640px ── */
@media (max-width: 640px) {

  .hero {
    height: 88svh;
    min-height: 480px;
  }

  .hero__title {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .hero__subtitle {
    font-size: var(--text-base, 1rem);
  }

  /* Stack CTA buttons vertically on small phones */
  .hero__actions {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Hide arrows — swipe gesture handles navigation */
  .hero__arrow {
    display: none;
  }

  .hero__controls {
    gap: var(--space-3, 0.75rem);
  }

}

/* ── XS: ≤ 480px ── */
@media (max-width: 480px) {

  .hero {
    min-height: 440px;
  }

  .hero__title {
    font-size: clamp(1.75rem, 9.5vw, 2.5rem);
  }

  /* Compact eyebrow side lines on very small screens */
  .hero__content--center .hero__eyebrow::before,
  .hero__content--center .hero__eyebrow::after,
  .hero__content--left .hero__eyebrow::before,
  .hero__content--left .hero__eyebrow::after,
  .hero__content--right .hero__eyebrow::before,
  .hero__content--right .hero__eyebrow::after {
    width: 16px;
  }

  .hero__scroll-cue {
    display: none;
    /* too cramped below 480px */
  }

}