@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ======================================================
   Shop Mobile - Correção de legibilidade do Hero/Banner
   Aplicação segura: apenas CSS, sem alterar PHP/lógica.
====================================================== */

.store-hero,
.hero,
.loja-hero,
.banner-intro,
.welcome-box,
.store-banner,
.hero-banner {
  position: relative !important;
  overflow: hidden !important;
}

/* Camada escura suave para garantir contraste mesmo em fundos claros */
.store-hero::before,
.hero::before,
.loja-hero::before,
.banner-intro::before,
.welcome-box::before,
.store-banner::before,
.hero-banner::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(0,0,0,.32), rgba(0,0,0,.16)) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.store-hero > *,
.hero > *,
.loja-hero > *,
.banner-intro > *,
.welcome-box > *,
.store-banner > *,
.hero-banner > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Texto do hero sempre branco e legível */
.store-hero h1,
.store-hero h2,
.store-hero p,
.store-hero span,
.hero h1,
.hero h2,
.hero p,
.hero span,
.loja-hero h1,
.loja-hero h2,
.loja-hero p,
.loja-hero span,
.banner-intro h1,
.banner-intro h2,
.banner-intro p,
.banner-intro span,
.welcome-box h1,
.welcome-box h2,
.welcome-box p,
.welcome-box span,
.store-banner h1,
.store-banner h2,
.store-banner p,
.store-banner span,
.hero-banner h1,
.hero-banner h2,
.hero-banner p,
.hero-banner span {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
}

/* Subtítulo com branco suave, mas sem ficar apagado */
.store-hero p,
.hero p,
.loja-hero p,
.banner-intro p,
.welcome-box p,
.store-banner p,
.hero-banner p {
  color: rgba(255,255,255,.96) !important;
  font-weight: 500 !important;
}

/* Mobile: melhora leitura e espaçamento */
@media (max-width: 768px) {
  .store-hero h1,
  .hero h1,
  .loja-hero h1,
  .banner-intro h1,
  .welcome-box h1,
  .store-banner h1,
  .hero-banner h1 {
    font-size: clamp(1.45rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
  }

  .store-hero p,
  .hero p,
  .loja-hero p,
  .banner-intro p,
  .welcome-box p,
  .store-banner p,
  .hero-banner p {
    font-size: .9rem !important;
    line-height: 1.45 !important;
  }
}

*{font-family:'Inter',sans-serif !important;}