@import url('/recomendacoes/recomendacoes-video-v13.css?v=13');

/* HOTFIX V13 — ajustes finais de CUPONS, HERO, catálogo e vídeos. */

/* ===== CUPONS & ACHADOS — sem altura fantasma ===== */
html body #ofertas-do-dia,
html body #ofertas-do-dia.daily-v4,
html body #ofertas-do-dia.daily-deals-section{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding-top:10px!important;
  padding-bottom:10px!important;
}
html body #ofertas-do-dia .daily-deal-layout{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  align-items:start!important;
  align-content:start!important;
}
html body #ofertas-do-dia .daily-deal-intro{
  height:auto!important;
  min-height:0!important;
  align-self:start!important;
}
html body #ofertas-do-dia .daily-deal-shell{
  position:relative!important;
  top:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  align-self:start!important;
}
html body #ofertas-do-dia .daily-deal-card{
  height:auto!important;
  min-height:184px!important;
  max-height:none!important;
}
html body #ofertas-do-dia .daily-deal-media{
  height:184px!important;
  min-height:184px!important;
  max-height:184px!important;
}
html body #ofertas-do-dia .daily-deal-content{height:auto!important;min-height:0!important}
html body #ofertas-do-dia .daily-deal-features{margin-top:9px!important;margin-bottom:8px!important}
html body #ofertas-do-dia .daily-deal-features>div{min-height:52px!important}
html body #ofertas-do-dia .daily-deal-queue{margin-bottom:0!important}
html body #ofertas-do-dia .deal-queue-item{min-height:40px!important}

/* ===== HERO — mostra o retrato inteiro e evita o corte/zoom do banner ===== */
html body #heroSection.hero-v4{
  position:relative!important;
  height:356px!important;
  min-height:356px!important;
  background:#010914!important;
  overflow:hidden!important;
}
html body #heroSection.hero-v4 #heroBg.hero-bg{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  opacity:1!important;
  background-image:url('/recomendacoes/assets/recomendacoes-hero-delta.webp')!important;
  background-repeat:no-repeat!important;
  background-size:auto 100%!important;
  background-position:right center!important;
  transform:none!important;
  filter:saturate(1.07) contrast(1.04) brightness(1.01)!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 30%,rgba(0,0,0,.12) 38%,rgba(0,0,0,.42) 47%,rgba(0,0,0,.82) 55%,#000 63%,#000 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,transparent 30%,rgba(0,0,0,.12) 38%,rgba(0,0,0,.42) 47%,rgba(0,0,0,.82) 55%,#000 63%,#000 100%)!important;
}
html body #heroSection.hero-v4::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,#010914 0%,rgba(1,9,20,.995) 31%,rgba(1,9,20,.96) 41%,rgba(1,9,20,.72) 49%,rgba(1,9,20,.34) 56%,rgba(1,9,20,.09) 63%,transparent 72%),
    linear-gradient(180deg,rgba(1,9,20,.02) 0%,transparent 68%,rgba(1,9,20,.27) 100%)!important;
}
html body #heroSection.hero-v4 .hero-content{
  width:56%!important;
  max-width:650px!important;
  height:356px!important;
  min-height:356px!important;
  padding:38px 0 28px 18px!important;
}
html body #heroSection.hero-v4 .hero-content h1{
  max-width:640px!important;
  font-size:clamp(3rem,4.2vw,4.15rem)!important;
}
html body #heroSection.hero-v4 #heroDescription{max-width:430px!important}

/* ===== TODAS AS RECOMENDAÇÕES — sempre visível no estado TODOS ===== */
html body #allProductsSection,
html body #allProductsSection[hidden],
html body:not(.catalog-open) #allProductsSection{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
html body #allProductsSection{
  margin-top:12px!important;
  padding:18px 8px 28px!important;
  border-top:1px solid rgba(18,170,255,.22)!important;
}
html body #allProductsSection .catalog-tools{display:block!important}
html body #allProductsSection #productGrid{min-height:0!important}

@media (min-width:821px) and (max-width:1100px){
  html body #heroSection.hero-v4{height:340px!important;min-height:340px!important}
  html body #heroSection.hero-v4 #heroBg.hero-bg{
    background-size:auto 100%!important;
    background-position:right center!important;
  }
  html body #heroSection.hero-v4 .hero-content{
    width:58%!important;
    height:340px!important;
    min-height:340px!important;
  }
}

@media (max-width:820px){
  html body #ofertas-do-dia,
  html body #ofertas-do-dia.daily-v4,
  html body #ofertas-do-dia.daily-deals-section{height:auto!important;min-height:0!important}
  html body #ofertas-do-dia .daily-deal-layout{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    gap:12px!important;
  }
  html body #ofertas-do-dia .daily-deal-media{
    height:165px!important;
    min-height:165px!important;
    max-height:165px!important;
  }

  html body #heroSection.hero-v4{
    width:calc(100% - 20px)!important;
    height:auto!important;
    min-height:535px!important;
  }
  html body #heroSection.hero-v4 #heroBg.hero-bg{
    background-size:auto 61%!important;
    background-position:72% top!important;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 43%,rgba(0,0,0,.75) 52%,rgba(0,0,0,.22) 62%,transparent 72%)!important;
    mask-image:linear-gradient(180deg,#000 0%,#000 43%,rgba(0,0,0,.75) 52%,rgba(0,0,0,.22) 62%,transparent 72%)!important;
  }
  html body #heroSection.hero-v4::before{
    background:linear-gradient(180deg,rgba(1,9,20,.02) 0%,rgba(1,9,20,.08) 32%,rgba(1,9,20,.52) 48%,rgba(1,9,20,.90) 61%,#010914 72%,#010914 100%)!important;
  }
  html body #heroSection.hero-v4 .hero-content{
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:535px!important;
    padding:270px 15px 24px!important;
    justify-content:flex-end!important;
  }
  html body #allProductsSection{padding-inline:0!important}
}

@media (max-width:520px){
  html body #heroSection.hero-v4{width:calc(100% - 14px)!important;min-height:550px!important}
  html body #heroSection.hero-v4 #heroBg.hero-bg{background-size:auto 58%!important;background-position:70% top!important}
  html body #heroSection.hero-v4 .hero-content{min-height:550px!important;padding:255px 12px 20px!important}
}