/* RECOMENDACOES LAYOUT V22
   Ajuste visual focado em Produtos em vídeo e Em destaque.
   Mantém o comportamento/JS atual e corrige apenas composição, proporção e CTAs. */

/* ===== PRODUTOS EM VÍDEO ===== */
html body #proofGallerySection.videos-v21{
  padding-bottom:42px!important;
}
html body #proofGallerySection.videos-v21 .proof-gallery-viewport{
  padding:4px 0 18px!important;
}
html body #proofGallerySection.videos-v21 .proof-gallery-track{
  gap:14px!important;
}
html body #proofGallerySection.videos-v21 .proof-gallery-card{
  flex:0 0 292px!important;
  width:292px!important;
  min-width:292px!important;
  height:560px!important;
  min-height:560px!important;
  max-height:560px!important;
  border-radius:18px!important;
}
html body #proofGallerySection.videos-v21 .proof-embed{
  flex:0 0 340px!important;
  height:340px!important;
  min-height:340px!important;
  max-height:340px!important;
  background:linear-gradient(180deg,#071522,#040b13)!important;
}
html body #proofGallerySection.videos-v21 .proof-cover-source{
  object-fit:cover!important;
  object-position:center 60%!important;
}
html body #proofGallerySection.videos-v21 .proof-embed::after{
  content:""!important;
  position:absolute!important;
  inset:auto 0 0!important;
  z-index:4!important;
  height:24%!important;
  pointer-events:none!important;
  background:linear-gradient(0deg,rgba(2,8,20,.34),transparent)!important;
}
html body #proofGallerySection.videos-v21 .proof-play{
  width:60px!important;
  height:60px!important;
  font-size:1.12rem!important;
}
html body #proofGallerySection.videos-v21 .proof-copy{
  padding:15px 15px 14px!important;
}
html body #proofGallerySection.videos-v21 .proof-copy strong{
  min-height:42px!important;
  font-size:.96rem!important;
  line-height:1.24!important;
}
html body #proofGallerySection.videos-v21 .proof-copy>span{
  min-height:42px!important;
  margin-top:7px!important;
  font-size:.70rem!important;
  line-height:1.45!important;
  -webkit-line-clamp:2!important;
}
html body #proofGallerySection.videos-v21 .proof-actions{
  gap:8px!important;
  padding-top:12px!important;
}
html body #proofGallerySection.videos-v21 .proof-action{
  min-height:42px!important;
  padding:8px 10px!important;
  border-radius:10px!important;
}

/* ===== EM DESTAQUE =====
   O V3 usava altura fixa de 270px. Com títulos/preços diferentes o CTA
   ultrapassava o espaço útil e era cortado pelo overflow do card. */
html body #featuredSection.featured-v4{
  overflow:visible!important;
  padding-bottom:18px!important;
}
html body #featuredSection #featuredGrid.product-grid{
  align-items:stretch!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  padding:0 0 12px!important;
}
html body #featuredSection #featuredGrid.product-grid>.product-card{
  height:auto!important;
  min-height:330px!important;
  max-height:none!important;
  align-self:stretch!important;
}
html body #featuredSection #featuredGrid .product-body{
  min-height:190px!important;
  padding:9px 10px 11px!important;
}
html body #featuredSection #featuredGrid .product-body h3{
  margin:4px 0 5px!important;
}
html body #featuredSection #featuredGrid .product-btn,
html body #featuredSection #featuredGrid .primary-btn{
  flex:0 0 40px!important;
  width:100%!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  margin-top:auto!important;
  padding:0 9px!important;
  border-radius:7px!important;
  font-size:.58rem!important;
  line-height:1.08!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* Tablet */
@media(max-width:820px){
  html body #proofGallerySection.videos-v21 .proof-gallery-card{
    flex-basis:270px!important;
    width:270px!important;
    min-width:270px!important;
    height:525px!important;
    min-height:525px!important;
    max-height:525px!important;
  }
  html body #proofGallerySection.videos-v21 .proof-embed{
    flex-basis:305px!important;
    height:305px!important;
    min-height:305px!important;
    max-height:305px!important;
  }
  html body #featuredSection #featuredGrid.product-grid>.product-card{
    min-height:324px!important;
  }
}

/* Mobile: um card principal e um pedaço do próximo para indicar rolagem. */
@media(max-width:520px){
  html body #proofGallerySection.videos-v21 .proof-gallery-card{
    flex:0 0 min(84vw,286px)!important;
    width:min(84vw,286px)!important;
    min-width:min(84vw,286px)!important;
    height:515px!important;
    min-height:515px!important;
    max-height:515px!important;
  }
  html body #proofGallerySection.videos-v21 .proof-embed{
    flex-basis:295px!important;
    height:295px!important;
    min-height:295px!important;
    max-height:295px!important;
  }
  html body #proofGallerySection.videos-v21 .proof-play{
    width:56px!important;
    height:56px!important;
  }
  html body #featuredSection #featuredGrid.product-grid>.product-card{
    min-height:320px!important;
  }
}