/* V6.4: dark-mode hero only. Layout, content and product behavior are unchanged. */
html[data-theme="dark"] .storefront-page #contenido .hero-wrap {
  /* Restore the same photograph used in light mode: the old dark shorthand
     removed it. #contenido also matches the ID specificity inherited by the
     older :is(..., #tienda, ...) rule. Dimming stays on its own layer. */
  background: #071619 url("assets/canchas-realistas-v3.png") center top / cover no-repeat !important;
}

html[data-theme="dark"] .storefront-page .hero-wrap::before {
  inset: 0;
  opacity: 1;
  transform: none;
  background:
    linear-gradient(90deg, rgba(2, 12, 16, .83), rgba(3, 16, 21, .62) 47%, rgba(3, 14, 21, .40)),
    linear-gradient(180deg, rgba(2, 10, 17, .10), rgba(3, 14, 20, .12) 55%, rgba(3, 14, 20, .40));
  pointer-events: none;
}

html[data-theme="dark"] .storefront-page .hero-wrap::after {
  /* Stationary mint/cyan LED accents: decorative and behind all content. */
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: -1;
  opacity: 1;
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
  background:
    linear-gradient(90deg, transparent, rgba(111, 255, 174, .80) 20%, rgba(106, 230, 255, .76) 73%, transparent) center top / 100% 1px no-repeat,
    radial-gradient(ellipse at 10% 0%, rgba(92, 255, 170, .11), transparent 49%) center top / 100% 650px no-repeat,
    radial-gradient(ellipse at 96% 48%, rgba(81, 212, 255, .11), transparent 43%) center top / 100% 780px no-repeat;
  box-shadow: inset 0 10px 25px -25px #89ffce;
  pointer-events: none;
}

html[data-theme="dark"] .storefront-page .hero-copy .eyebrow-line {
  background: #9cffc1;
  box-shadow: 0 0 5px rgba(121, 255, 179, .80), 0 0 17px rgba(81, 255, 155, .43);
}

html[data-theme="dark"] .storefront-page .hero-copy .hero-actions .btn:not(.secondary) {
  box-shadow: 0 0 0 1px rgba(180, 255, 201, .25), 0 0 22px rgba(105, 255, 163, .20), 0 10px 24px rgba(0, 0, 0, .25);
}

html[data-theme="dark"] .storefront-page .hero-copy .hero-actions .btn.secondary {
  border-color: rgba(139, 232, 244, .55);
  box-shadow: inset 0 0 12px rgba(100, 217, 247, .04), 0 0 14px rgba(100, 217, 247, .08);
}

html[data-theme="dark"] .storefront-page .hero .offer-carousel {
  border-color: rgba(124, 239, 190, .60) !important;
  box-shadow: 0 0 0 1px rgba(107, 247, 175, .06), 0 0 26px rgba(102, 237, 193, .13), 0 20px 48px rgba(0, 0, 0, .35) !important;
}

html[data-theme="dark"] .storefront-page .hero .offer-carousel::after {
  background: linear-gradient(90deg, #97ffb7, #74e5ff);
  box-shadow: 0 0 7px rgba(111, 255, 178, .75), 0 0 20px rgba(92, 224, 255, .45);
}

@media (max-width: 640px) {
  html[data-theme="dark"] .storefront-page #contenido .hero-wrap {
    /* Match the existing mobile photograph crop and its solid-color continuation. */
    background-size: auto 650px !important;
    background-position: 56% top !important;
  }

  html[data-theme="dark"] .storefront-page .hero-wrap::before {
    background: linear-gradient(180deg, rgba(2, 12, 16, .68), rgba(3, 16, 21, .63) 440px, #071619 690px);
  }
}