/* Recce NI Storefront 1.0 component foundation.
 * Loaded last by design: this file is the canonical homepage layout layer.
 */
:root {
  --rni-v1-ink: #0b1711;
  --rni-v1-forest: #10251a;
  --rni-v1-olive: #668544;
  --rni-v1-olive-light: #a9bd78;
  --rni-v1-paper: #f7f8f4;
  --rni-v1-line: rgba(15, 35, 25, .14);
  --rni-v1-radius: 4px;
  --rni-v1-shadow: 0 12px 30px rgba(8, 20, 13, .10);
}

body .rni-storefront-homepage {
  overflow-x: hidden;
  background: var(--rni-v1-paper);
  color: var(--rni-v1-ink);
}
body .rni-storefront-homepage .rni-storefront-container {
  width: min(calc(100% - 48px), 1440px) !important;
  margin-inline: auto !important;
}
body .rni-storefront-homepage .rni-home-section {
  padding-block: clamp(52px, 6vw, 92px) !important;
}

/* HERO COMPONENT ------------------------------------------------------- */
body .rni-storefront-homepage .rni-flagship-hero,
body .rni-storefront-homepage .rni-hero-track,
body .rni-storefront-homepage .rni-hero-slide {
  height: clamp(560px, 50vw, 760px) !important;
  min-height: 0 !important;
}
body .rni-storefront-homepage .rni-flagship-hero {
  position: relative !important;
  background: #07110c !important;
  overflow: hidden !important;
}
body .rni-storefront-homepage .rni-hero-slide picture {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
}
body .rni-storefront-homepage .rni-hero-slide picture img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: none !important;
  transform: none !important;
}
body .rni-storefront-homepage .rni-hero-slide::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(90deg, rgba(5,14,9,.72) 0%, rgba(5,14,9,.48) 28%, rgba(5,14,9,.13) 55%, rgba(5,14,9,0) 76%) !important;
  pointer-events: none !important;
}
body .rni-storefront-homepage .rni-hero-overlay { display: none !important; }
body .rni-storefront-homepage .rni-hero-content {
  position: relative !important;
  z-index: 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 72px 0 90px !important;
}
body .rni-storefront-homepage .rni-hero-content .rni-eyebrow {
  color: var(--rni-v1-olive-light) !important;
  letter-spacing: .18em !important;
  margin: 0 0 22px !important;
}
body .rni-storefront-homepage .rni-hero-content h1 {
  color: #fff !important;
  font-size: clamp(3.25rem, 5.5vw, 6rem) !important;
  line-height: .88 !important;
  letter-spacing: -.055em !important;
  max-width: 9.5ch !important;
  margin: 0 0 26px !important;
  text-wrap: balance !important;
}
body .rni-storefront-homepage .rni-hero-content > p:not(.rni-eyebrow) {
  max-width: 590px !important;
  color: rgba(255,255,255,.90) !important;
  font-size: clamp(1rem, 1.25vw, 1.22rem) !important;
  line-height: 1.55 !important;
  margin: 0 0 30px !important;
}
body .rni-storefront-homepage .rni-home-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
body .rni-storefront-homepage .rni-home-actions .rni-button {
  min-height: 50px !important;
  padding: 0 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body .rni-storefront-homepage .rni-hero-controls {
  position: absolute !important;
  z-index: 4 !important;
  left: 50% !important;
  right: auto !important;
  bottom: 24px !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
body .rni-storefront-homepage .rni-hero-controls > button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  background: rgba(4,12,8,.42) !important;
  color: #fff !important;
}
body .rni-storefront-homepage .rni-hero-dots {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}
body .rni-storefront-homepage .rni-hero-dots button {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: rgba(255,255,255,.45) !important;
}
body .rni-storefront-homepage .rni-hero-dots button.is-active {
  width: 26px !important;
  border-radius: 99px !important;
  background: #fff !important;
}

/* CATEGORY CARD COMPONENT --------------------------------------------- */
body .rni-storefront-homepage .rni-departments-section {
  background: #fff !important;
}
body .rni-storefront-homepage .rni-section-heading-rich {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 30px !important;
  margin-bottom: 28px !important;
}
body .rni-storefront-homepage .rni-section-heading-rich h2 {
  margin: 0 !important;
  font-size: clamp(2rem, 3vw, 3.3rem) !important;
  letter-spacing: -.045em !important;
}
body .rni-storefront-homepage .rni-department-grid.rni-department-grid-flagship {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
body .rni-storefront-homepage .rni-department-grid-flagship > .rni-department-card {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid var(--rni-v1-line) !important;
  border-radius: var(--rni-v1-radius) !important;
  background: #0d1711 !important;
  box-shadow: none !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
body .rni-storefront-homepage .rni-department-grid-flagship > .rni-department-card-8 { grid-column: 2 !important; }
body .rni-storefront-homepage .rni-department-grid-flagship > .rni-department-card-9 { grid-column: 3 !important; }
body .rni-storefront-homepage .rni-department-card .rni-department-image {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #0d1711 !important;
  transform: none !important;
}
body .rni-storefront-homepage .rni-department-card .rni-department-shade { display: none !important; }
body .rni-storefront-homepage .rni-department-card .rni-department-meta {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 62px !important;
  padding: 14px 16px !important;
  background: #0d1711 !important;
  color: #fff !important;
}
body .rni-storefront-homepage .rni-department-meta small,
body .rni-storefront-homepage .rni-department-meta b { display: none !important; }
body .rni-storefront-homepage .rni-department-meta strong {
  font-size: .96rem !important;
  letter-spacing: -.01em !important;
  line-height: 1.15 !important;
}
body .rni-storefront-homepage .rni-department-meta::after {
  content: "→";
  flex: 0 0 auto;
  color: var(--rni-v1-olive-light);
  font-size: 1.15rem;
}
body .rni-storefront-homepage .rni-department-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--rni-v1-shadow) !important;
  border-color: rgba(102,133,68,.55) !important;
}
body .rni-storefront-homepage .rni-department-card:hover .rni-department-image { transform: none !important; }

/* Reusable premium panels. */
body .rni-storefront-homepage .rni-brand-strip,
body .rni-storefront-homepage .rni-trust-bar { border-color: var(--rni-v1-line) !important; }
body .rni-storefront-homepage .rni-brand-strip > .rni-storefront-container > div {
  overflow-x: auto !important;
  scrollbar-width: thin;
}

@media (max-width: 900px) {
  body .rni-storefront-homepage .rni-storefront-container { width: min(calc(100% - 32px), 1440px) !important; }
  body .rni-storefront-homepage .rni-department-grid.rni-department-grid-flagship {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  body .rni-storefront-homepage .rni-department-grid-flagship > .rni-department-card-8,
  body .rni-storefront-homepage .rni-department-grid-flagship > .rni-department-card-9 { grid-column: auto !important; }
}

@media (max-width: 700px) {
  body .rni-storefront-homepage .rni-storefront-container { width: calc(100% - 28px) !important; }
  body .rni-storefront-homepage .rni-home-section { padding-block: 48px !important; }
  body .rni-storefront-homepage .rni-flagship-hero,
  body .rni-storefront-homepage .rni-hero-track,
  body .rni-storefront-homepage .rni-hero-slide {
    height: 760px !important;
    min-height: 0 !important;
  }
  body .rni-storefront-homepage .rni-hero-slide {
    background: #07110c !important;
  }
  body .rni-storefront-homepage .rni-hero-slide picture {
    inset: 0 0 auto 0 !important;
    height: 43% !important;
  }
  body .rni-storefront-homepage .rni-hero-slide picture img {
    object-position: center center !important;
  }
  body .rni-storefront-homepage .rni-hero-slide::before {
    inset: 0 0 auto 0 !important;
    height: 47% !important;
    background: linear-gradient(180deg, rgba(7,17,12,0) 55%, #07110c 100%) !important;
  }
  body .rni-storefront-homepage .rni-hero-content {
    height: 100% !important;
    padding: 350px 0 76px !important;
    justify-content: flex-start !important;
  }
  body .rni-storefront-homepage .rni-hero-content .rni-eyebrow {
    margin-bottom: 15px !important;
    font-size: .74rem !important;
  }
  body .rni-storefront-homepage .rni-hero-content h1 {
    max-width: 100% !important;
    font-size: clamp(2.65rem, 12.5vw, 4rem) !important;
    line-height: .92 !important;
    margin-bottom: 18px !important;
  }
  body .rni-storefront-homepage .rni-hero-content > p:not(.rni-eyebrow) {
    font-size: 1.03rem !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
  }
  body .rni-storefront-homepage .rni-home-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 10px !important;
  }
  body .rni-storefront-homepage .rni-home-actions .rni-button {
    width: 100% !important;
    min-height: 52px !important;
  }
  body .rni-storefront-homepage .rni-hero-controls { bottom: 22px !important; }
  body .rni-storefront-homepage .rni-hero-controls > button { display: none !important; }
  body .rni-storefront-homepage .rni-section-heading-rich {
    display: block !important;
    margin-bottom: 22px !important;
  }
  body .rni-storefront-homepage .rni-section-heading-rich > p {
    margin-top: 10px !important;
  }
  body .rni-storefront-homepage .rni-department-grid.rni-department-grid-flagship {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body .rni-storefront-homepage .rni-department-card .rni-department-image {
    aspect-ratio: 3 / 2 !important;
  }
  body .rni-storefront-homepage .rni-department-card .rni-department-meta {
    min-height: 52px !important;
    padding: 10px 11px !important;
  }
  body .rni-storefront-homepage .rni-department-meta strong {
    font-size: clamp(.72rem, 3.2vw, .88rem) !important;
  }
}

@media (max-width: 390px) {
  body .rni-storefront-homepage .rni-hero-content { padding-top: 338px !important; }
  body .rni-storefront-homepage .rni-department-grid.rni-department-grid-flagship { gap: 8px !important; }
  body .rni-storefront-homepage .rni-department-card .rni-department-meta { padding-inline: 9px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body .rni-storefront-homepage * { scroll-behavior: auto !important; }
  body .rni-storefront-homepage .rni-department-card { transition: none !important; }
}

/* 1.0.0-beta.2 — approved nine-image department gallery ---------------- */
body .rni-storefront-homepage .rni-department-grid.rni-department-grid-flagship {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
body .rni-storefront-homepage .rni-department-grid-flagship > .rni-department-card,
body .rni-storefront-homepage .rni-department-grid-flagship > .rni-department-card-8,
body .rni-storefront-homepage .rni-department-grid-flagship > .rni-department-card-9 {
  grid-column: auto !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3 / 2 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(14, 32, 23, .14) !important;
  border-radius: 8px !important;
  background: #0a120d !important;
  box-shadow: 0 12px 30px rgba(7, 17, 12, .10) !important;
  line-height: 0 !important;
  text-decoration: none !important;
}
body .rni-storefront-homepage .rni-department-card .rni-department-image {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #0a120d !important;
  transform: none !important;
  transition: transform .28s ease, filter .28s ease !important;
}
body .rni-storefront-homepage .rni-department-card .rni-department-shade,
body .rni-storefront-homepage .rni-department-card .rni-department-meta {
  display: none !important;
}
body .rni-storefront-homepage .rni-department-card:hover,
body .rni-storefront-homepage .rni-department-card:focus-visible {
  transform: translateY(-4px) !important;
  border-color: rgba(104, 132, 69, .7) !important;
  box-shadow: 0 18px 40px rgba(7, 17, 12, .18) !important;
  outline: none !important;
}
body .rni-storefront-homepage .rni-department-card:hover .rni-department-image,
body .rni-storefront-homepage .rni-department-card:focus-visible .rni-department-image {
  transform: scale(1.012) !important;
  filter: brightness(1.035) !important;
}
@media (max-width: 900px) {
  body .rni-storefront-homepage .rni-department-grid.rni-department-grid-flagship {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  body .rni-storefront-homepage .rni-department-grid-flagship > .rni-department-card-8 {
    grid-column: 1 / -1 !important;
    width: calc(50% - 6px) !important;
    justify-self: center !important;
  }
}
@media (max-width: 560px) {
  body .rni-storefront-homepage .rni-department-grid.rni-department-grid-flagship {
    gap: 8px !important;
  }
  body .rni-storefront-homepage .rni-department-grid-flagship > .rni-department-card {
    border-radius: 5px !important;
  }
  body .rni-storefront-homepage .rni-department-grid-flagship > .rni-department-card-8 {
    width: calc(50% - 4px) !important;
  }
}