/* Janela Reality Loading em PNG */
.reality-loading-slot{
  width:min(43vw,560px);
  justify-self:end;
  align-self:end;
  position:relative;
  z-index:6;
  background:none;
  border:0;
  box-shadow:none;
  color:inherit;
  pointer-events:none;
}

.reality-loading-window{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(12px 14px 0 rgba(19,13,22,.72));
  transform-origin:center;
  animation:realityWindowFloat 5.8s ease-in-out infinite;
}

@keyframes realityWindowFloat{
  0%,100%{transform:translateY(0) rotate(1.4deg)}
  50%{transform:translateY(-15px) rotate(-.8deg)}
}

/* Aproxima os dois CTAs das artes sem mover o resto do hero. */
.hero .hero-actions{
  top:-15px !important;
}

/* Deixa os dois botões maiores sem alterar os links ou a posição do bloco. */
body .hero .hero-price-button-image,
body .hero .hero-justification-button-image{
  width:clamp(225px,22vw,335px) !important;
}

/* A nova arte já contém título, etiqueta e texto auxiliar. */
.drop-section .float-star.star-a,
.drop-section .section-tag,
.drop-section .section-lead{
  display:none !important;
}

/* Mantém a nova arte no fluxo normal, centralizada e longe dos produtos. */
.drop-section .drop-title-image-wrap{
  position:relative !important;
  left:0 !important;
  top:0 !important;
  width:min(100%,1100px) !important;
  max-width:1100px !important;
  margin:0 auto 34px !important;
}

/* Faz a arte Coisas à venda flutuar sem alterar o fluxo da seção. */
.drop-section .drop-title-image{
  animation:dropTitleFloat 7.4s ease-in-out infinite;
  transform-origin:center;
  will-change:transform;
}

@keyframes dropTitleFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(2px,-10px,0) rotate(-.4deg)}
}

/* Abaixa as duas artes principais mais 35px. */
body .hero .hero-copy > .hero-collection-sticker{
  top:169px !important;
}
body .hero .hero-copy .hero-cta-sticker{
  top:115px !important;
}

@media (max-width:900px){
  .reality-loading-slot{
    justify-self:start;
    width:min(76vw,560px);
  }
}

@media (max-width:620px){
  /* Trava o layout na largura real do aparelho e elimina a faixa preta lateral. */
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
  body main,
  body .hero,
  body .top-strip,
  body .site-nav{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  body main{
    overflow-x:hidden !important;
  }

  /* A sacola estava sendo forçada no mobile por outra folha e alargando a página. */
  body .site-nav .cart-pill{
    display:none !important;
  }
  body .site-nav .brand{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:calc(100% - 92px) !important;
  }
  body .site-nav .brand-logo{
    width:min(58vw,230px) !important;
    max-width:100% !important;
  }
  body .site-nav .menu-button{
    flex:0 0 auto !important;
    margin-left:auto !important;
  }

  .reality-loading-slot{width:100%}
  .reality-loading-window{
    filter:drop-shadow(7px 9px 0 rgba(19,13,22,.7));
  }
  .drop-section .drop-title-image-wrap{
    width:100% !important;
    margin-bottom:24px !important;
  }
  body .hero .hero-interface,
  body .hero .hero-bottom,
  body .hero .hero-copy{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* Sobe o adesivo da coleção e o “Compre” exatamente 30px, somente no mobile. */
  html body .hero .hero-copy > .hero-collection-sticker{
    top:72px !important;
  }
  html body .hero .hero-copy .hero-cta-sticker{
    top:30px !important;
  }

  /* Remove apenas os dois CTAs da primeira dobra no mobile. */
  body .hero .hero-copy .hero-actions{
    display:none !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .reality-loading-window,
  .drop-section .drop-title-image{
    animation:none !important;
    will-change:auto;
  }
}