/* Hero editorial: la fotografía conserva el foco y el texto se lee sobre el vacío oscuro. */
.hero {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0 !important;
  aspect-ratio: 2.7 / 1;
  padding: 0 !important;
  color: #fff !important;
  background:
    linear-gradient(90deg, rgba(8, 7, 6, .72) 0%, rgba(8, 7, 6, .54) 31%, rgba(8, 7, 6, .12) 57%, rgba(8, 7, 6, .04) 100%),
    url('hero-vestidor-editorial-v3.webp') center center / 100% 100% no-repeat !important;
}

/* El header vive encima del banner; las categorías quedan dentro del menú lateral. */
body .topbar {
  position: absolute !important;
  z-index: 20 !important;
  top: 0;
  right: 0;
  left: 0;
  height: 84px !important;
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
}

.topbar .brand,
.topbar .brand-crest span,
.topbar .cart-link,
.topbar .search-mini,
.topbar .header-actions .header-tool {
  color: #fff !important;
}

.topbar .brand-crest img {
  content: url('logo-peyote-blanco-v3.webp');
  filter: none;
}

.topbar .menu-icon i {
  background: #fff !important;
}

.topbar .cart-link span,
.topbar .header-actions .header-tool .header-tool-count {
  border: 1px solid rgba(255, 255, 255, .8);
  background: transparent !important;
  color: #fff !important;
}

.topbar .cart-link svg,
.topbar .header-actions .header-tool svg {
  stroke: currentColor !important;
}

body .store-nav {
  position: absolute !important;
  z-index: 20 !important;
  top: 84px;
  right: 0;
  left: 0;
  height: 42px !important;
  display: flex !important;
  justify-content: center !important;
  gap: clamp(15px, 2.3vw, 42px) !important;
  padding: 0 20px !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}

body .store-nav a {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  font: 700 10px Raleway, Arial, sans-serif !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

body .store-nav a:hover {
  background: transparent !important;
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.hero::before {
  display: none !important;
}

.hero .eyebrow,
.hero h1,
.hero h1 i,
.hero-copy {
  color: #fff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .48);
}

.hero h1 {
  max-width: min(610px, 48vw);
  font-size: clamp(48px, 6.7vw, 88px) !important;
}

.hero-copy {
  max-width: 320px;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  body .topbar {
    height: 70px !important;
  }

  body .store-nav {
    top: 70px;
    height: 38px !important;
    justify-content: flex-start !important;
    gap: 19px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  body .store-nav::-webkit-scrollbar {
    display: none;
  }

  body .store-nav a {
    flex: 0 0 auto;
    font-size: 9px !important;
  }

  .hero {
    min-height: 0 !important;
    padding: 0 !important;
    background:
      linear-gradient(0deg, rgba(8, 7, 6, .18) 0%, rgba(8, 7, 6, .02) 72%),
      url('hero-vestidor-editorial-v3.webp') center center / 100% 100% no-repeat !important;
  }

  .hero h1 {
    max-width: 335px;
    font-size: clamp(43px, 13vw, 62px) !important;
  }
}

/* Celular: la etiqueta ÁLBUM de «Mi colección» ya no se corta arriba (la barra es un poco más alta, el texto queda en el mismo lugar) */
@media (max-width: 760px) {
  html body .store-nav:has(.store-nav-collection) { top: 64px; height: 50px !important; }
  html body .store-nav:has(.store-nav-collection) > a::after, html body .store-nav:has(.store-nav-collection) .store-nav-dropdown > a::after { bottom: 16px; }
  html body .store-nav .store-nav-collection .nav-sticker { top: -8px !important; right: -14px !important; }
}