/* Regras do banner após os estilos compartilhados da loja. */
.hero-section > .grid-lines,
.hero-section .hero-glow { display: none; }
.hero-section .hero.wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 0 clamp(20px, 4vw, 76px);
  display: grid;
  grid-template-columns: clamp(340px, 25vw, 450px) minmax(0, 1fr);
  grid-template-areas: "copy visual";
  gap: 24px;
  align-items: center;
  min-height: 0;
}
.hero-section .hero-copy { grid-area: copy; align-self: center; padding-block: clamp(12px, 1vw, 20px); }
.hero-section .hero-copy h1 { font-size: clamp(34px, 2.85vw, 54px); line-height: 1.02; letter-spacing: -.045em; }
.hero-section .hero-description { font-size: clamp(13px, .9vw, 16px); line-height: 1.55; max-width: 52ch; }
.hero-section .hero-actions { flex-wrap: wrap; }
.hero-section .hero-visual {
  position: relative;
  grid-area: visual;
  align-self: center;
  width: 100%;
  margin: 0;
  min-width: 0;
  min-height: 0;
  height: auto;
  aspect-ratio: 15 / 4;
  overflow: hidden;
}
.hero-section .hero-visual,
.hero-section .hero-slides,
.hero-section .hero-image {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.hero-section .hero-slides { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-section .hero-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 1535px) {
  .hero-section .hero.wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "visual" "copy";
    gap: 0;
    padding: 0;
    min-height: 0;
  }
  .hero-section .hero-copy { padding: 28px clamp(20px, 4vw, 44px); }
  .hero-section .hero-copy h1 { font-size: clamp(36px, 7vw, 54px); }
  .hero-section .hero-description { font-size: clamp(14px, 2vw, 16px); }
  .hero-section .hero-visual { margin: 0; width: 100%; min-height: 0; height: auto; aspect-ratio: 15 / 4; }
}

/* O cabeçalho acompanha o hero sem encobrir sua arte durante a primeira rolagem. */
body.storefront .site-header { position: relative; top: auto; }
body.storefront.hero-has-passed .site-header { position: sticky; top: 0; }

/* Permite que a área útil, descontada a barra do navegador, também encolha. */
body.storefront { min-width: 0; }

/* O conteúdo também pode solicitar o modo empilhado em janelas largas. */
.hero-section .hero.wrap.hero-stack { grid-template-columns:minmax(0,1fr); grid-template-areas:"visual" "copy"; gap:0; padding:0; }
.hero-section .hero-stack .hero-copy { padding:28px clamp(20px,4vw,44px); }
.hero-section .hero-stack .hero-copy h1 { font-size:clamp(36px,7vw,54px); }
.hero-section .hero-stack .hero-description { font-size:clamp(14px,2vw,16px); }
@media (min-width:768px) and (max-width:1535px) {
  .hero-section .hero-copy { display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"badge actions" "title actions" "description actions";gap:10px 28px;align-items:center; }
  .hero-section .hero-badge { grid-area:badge;justify-self:start;width:max-content;margin:0; }
  .hero-section .hero-copy h1 { grid-area:title;font-size:clamp(32px,3vw,44px);margin:0; }
  .hero-section .hero-description { grid-area:description;margin:0;max-width:65ch; }
  .hero-section .hero-actions { grid-area:actions;flex-direction:column;align-items:stretch;margin:0; }
}