/* RECOMENDACOES V9 — camada final de correcoes. Carregada cedo, por isso usa
   especificidade maior para vencer as camadas antigas sem desmontar o visual V7. */

:root{--rec-frame:1220px}

html,body{max-width:100%;overflow-x:hidden!important}
html body .nav-login,
html body a[href="/admin/"],
html body a[href^="/admin/#"]{display:none!important}

@media (min-width:1101px){
  html body .frame,
  html body .topbar-inner,
  html body #heroSection.hero-v4{
    width:min(var(--rec-frame),calc(100% - 72px))!important;
    max-width:var(--rec-frame)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* HERO: usa o banner aprovado como fundo inteiro, mas cobre a tipografia embutida
   do lado esquerdo com um gradiente suave. Assim a foto integra sem "corte" vertical. */
html body #heroSection.hero-v4{
  position:relative!important;
  height:356px!important;
  min-height:356px!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:#010914!important;
  border-bottom:1px solid rgba(18,170,255,.38)!important;
}
html body #heroSection.hero-v4 #heroBg.hero-bg{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:block!important;
  opacity:1!important;
  background-image:url('/recomendacoes/assets/recomendacoes-hero-delta.webp')!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center center!important;
  transform:none!important;
  filter:saturate(1.08) contrast(1.05) brightness(1.01)!important;
  -webkit-mask-image:none!important;
  mask-image:none!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,rgba(1,8,16,.998) 0%,rgba(1,8,16,.995) 35%,rgba(1,8,16,.97) 48%,rgba(1,8,16,.84) 57%,rgba(1,8,16,.44) 67%,rgba(1,8,16,.12) 79%,rgba(1,8,16,.03) 100%),
    linear-gradient(180deg,rgba(1,8,16,.03),transparent 64%,rgba(1,8,16,.35))!important;
}
html body #heroSection.hero-v4::after{
  content:""!important;
  position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;height:1px!important;
  z-index:7!important;
  background:linear-gradient(90deg,transparent,rgba(18,170,255,.78),transparent)!important;
}
html body #heroSection.hero-v4 .hero-shade{display:none!important}
html body #heroSection.hero-v4 .hero-content{
  position:relative!important;
  z-index:5!important;
  width:57%!important;
  max-width:655px!important;
  height:356px!important;
  min-height:356px!important;
  padding:40px 0 30px 18px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
}
html body #heroSection.hero-v4 .hero-content h1{
  margin:0 0 12px!important;
  max-width:650px!important;
  font-size:clamp(3rem,4.25vw,4.2rem)!important;
  line-height:.87!important;
  letter-spacing:-.052em!important;
}
html body #heroSection.hero-v4 #heroDescription{
  max-width:445px!important;
  font-size:.83rem!important;
  line-height:1.42!important;
  color:#eaf2f7!important;
}
html body #heroSection.hero-v4 .hero-confidence{gap:7px!important;margin-top:16px!important;max-width:620px!important}
html body #heroSection.hero-v4 .hero-confidence span{
  min-height:32px!important;
  padding:6px 10px!important;
  border-radius:7px!important;
  border-color:rgba(18,170,255,.48)!important;
  background:rgba(2,13,24,.70)!important;
  backdrop-filter:blur(8px)!important;
}
html body #heroSection.hero-v4 .hero-rail{display:none!important}

/* VIDEOS: tira a mascara que cortava o primeiro/ultimo card. O JS V7 ja duplica a
   faixa e faz scrollLeft continuo, portanto o loop continua infinito e suave. */
html body #proofGallerySection.videos-v4{overflow:hidden!important}
html body #proofGallerySection .proof-gallery-viewport{
  position:relative!important;
  width:100%!important;
  overflow:hidden!important;
  padding:0 2px 2px!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  scroll-behavior:auto!important;
}
html body #proofGallerySection .proof-gallery-track{
  display:flex!important;
  align-items:stretch!important;
  gap:10px!important;
  width:max-content!important;
}
html body #proofGallerySection .proof-gallery-card{
  flex:0 0 184px!important;
  width:184px!important;
  min-width:184px!important;
  height:184px!important;
  min-height:184px!important;
  max-height:184px!important;
  border-radius:8px!important;
  overflow:hidden!important;
}
html body #proofGallerySection .proof-embed{
  flex:0 0 108px!important;
  height:108px!important;
  min-height:108px!important;
  max-height:108px!important;
}
html body #proofGallerySection .proof-copy{min-height:0!important;padding:8px 9px 9px!important}
html body #proofGallerySection .proof-copy strong{
  display:-webkit-box!important;
  white-space:normal!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  font-size:.66rem!important;
  line-height:1.22!important;
}
html body #proofGallerySection .proof-copy>span{
  display:-webkit-box!important;
  white-space:normal!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:1!important;
  font-size:.56rem!important;
}

/* PRODUTOS: o renderer ja cria um fallback. Aqui ele vira uma capa premium e nunca
   deixa area branca/vazia quando a loja nao entrega uma foto. */
html body .product-media{isolation:isolate!important}
html body .product-media .product-fallback,
html body .product-media .product-placeholder{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:16px 12px!important;
  text-align:center!important;
  background:
    radial-gradient(circle at 50% 25%,rgba(18,170,255,.20),transparent 42%),
    linear-gradient(145deg,#071b2a,#03101b)!important;
  color:#fff!important;
}
html body .product-media .product-fallback::before,
html body .product-media .product-placeholder::before{
  content:"△"!important;
  width:34px!important;height:34px!important;
  display:grid!important;place-items:center!important;
  border:1px solid rgba(18,170,255,.58)!important;
  border-radius:9px!important;
  color:#18b7ff!important;
  font-size:1.1rem!important;
  box-shadow:0 0 18px rgba(18,170,255,.11)!important;
}
html body .product-media .product-fallback span,
html body .product-media .product-placeholder span{
  color:#18b7ff!important;
  font-size:.52rem!important;
  font-weight:950!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}
html body .product-media .product-fallback strong,
html body .product-media .product-placeholder strong{
  max-width:95%!important;
  color:#f4fbff!important;
  font-size:.66rem!important;
  line-height:1.18!important;
}
html body .product-media .product-fallback small,
html body .product-media .product-placeholder small{
  max-width:94%!important;
  color:#8fa8b9!important;
  font-size:.50rem!important;
  line-height:1.2!important;
}
html body .product-media>img{
  position:relative!important;
  z-index:1!important;
  background:#f5f6f7!important;
}
html body #featuredGrid .product-card{display:flex!important;flex-direction:column!important}
html body #featuredGrid .product-body{display:flex!important;flex:1 1 auto!important;flex-direction:column!important}
html body #featuredGrid .product-btn,
html body #featuredGrid .primary-btn{margin-top:auto!important}
html body .product-btn.is-disabled,
html body .primary-btn.is-disabled{opacity:.48!important;pointer-events:none!important;cursor:not-allowed!important}

/* CUPONS & ACHADOS: reduz a altura sem tirar informacao importante. */
html body #ofertas-do-dia.daily-v4{
  margin-top:8px!important;
  padding:10px!important;
  border-radius:9px!important;
}
html body #ofertas-do-dia .daily-deal-layout{
  grid-template-columns:1.18fr .82fr!important;
  gap:12px!important;
  align-items:stretch!important;
}
html body #ofertas-do-dia .daily-deal-intro{padding:10px 8px 6px!important}
html body #ofertas-do-dia .daily-deal-intro h2{
  margin:4px 0 7px!important;
  max-width:390px!important;
  font-size:2.15rem!important;
  line-height:.90!important;
}
html body #ofertas-do-dia .daily-deal-intro>p{font-size:.64rem!important;max-width:470px!important}
html body #ofertas-do-dia .daily-deal-features{gap:6px!important;margin:10px 0 8px!important}
html body #ofertas-do-dia .daily-deal-features>div{min-height:56px!important;padding:8px!important}
html body #ofertas-do-dia .daily-deal-features strong{font-size:.52rem!important;margin-bottom:3px!important}
html body #ofertas-do-dia .daily-deal-features span{font-size:.49rem!important;line-height:1.23!important}
html body #ofertas-do-dia .daily-deal-queue{gap:5px!important}
html body #ofertas-do-dia .deal-queue-item{min-height:42px!important;padding:4px!important}
html body #ofertas-do-dia .deal-queue-item:nth-child(n+3){display:none!important}
html body #ofertas-do-dia .daily-deal-shell{padding:7px!important;border-radius:8px!important}
html body #ofertas-do-dia .daily-deal-shell-head{min-height:30px!important}
html body #ofertas-do-dia .daily-deal-card{
  display:grid!important;
  grid-template-columns:42% 58%!important;
  min-height:192px!important;
  align-items:stretch!important;
}
html body #ofertas-do-dia .daily-deal-media{
  width:100%!important;
  height:auto!important;
  min-height:192px!important;
  max-height:220px!important;
}
html body #ofertas-do-dia .daily-deal-content{padding:8px!important;min-width:0!important}
html body #ofertas-do-dia .daily-deal-content h3{
  margin:3px 0!important;
  font-size:.78rem!important;
  line-height:1.20!important;
  display:-webkit-box!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
}
html body #ofertas-do-dia .daily-deal-content p{
  margin:0 0 4px!important;
  font-size:.52rem!important;
  display:-webkit-box!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}
html body #ofertas-do-dia .daily-deal-price .now{font-size:1rem!important}
html body #ofertas-do-dia .daily-coupon-row{min-height:31px!important}
html body #ofertas-do-dia .daily-deal-btn{min-height:31px!important;height:31px!important}
html body #ofertas-do-dia .daily-deal-dots{margin-top:5px!important}
html body #ofertas-do-dia .daily-deal-placeholder{
  width:100%!important;height:100%!important;min-height:192px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  background:radial-gradient(circle at 50% 35%,rgba(18,170,255,.18),transparent 42%),linear-gradient(145deg,#071b2a,#03101b)!important;
  color:#18b7ff!important;
}

@media (max-width:1100px){
  html body #heroSection.hero-v4 .hero-content{width:60%!important}
  html body #ofertas-do-dia .daily-deal-card{grid-template-columns:40% 60%!important}
}

@media (max-width:820px){
  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 64%!important;
    background-position:66% top!important;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.56) 54%,transparent 69%)!important;
    mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.56) 54%,transparent 69%)!important;
  }
  html body #heroSection.hero-v4::before{
    background:linear-gradient(180deg,rgba(1,8,16,.05) 0%,rgba(1,8,16,.12) 36%,rgba(1,8,16,.70) 55%,#010914 70%,#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 #heroSection.hero-v4 .hero-content h1{font-size:clamp(2.5rem,12vw,4rem)!important}
  html body #proofGallerySection .proof-gallery-card{flex-basis:168px!important;width:168px!important;min-width:168px!important}
  html body #ofertas-do-dia .daily-deal-layout{grid-template-columns:1fr!important}
  html body #ofertas-do-dia .deal-queue-item:nth-child(n+3){display:flex!important}
  html body #ofertas-do-dia .daily-deal-card{grid-template-columns:1fr!important}
  html body #ofertas-do-dia .daily-deal-media{height:168px!important;min-height:168px!important;max-height:168px!important}
  html body #ofertas-do-dia .daily-deal-placeholder{min-height:168px!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 60%!important;background-position:64% top!important}
  html body #heroSection.hero-v4 .hero-content{min-height:550px!important;padding:255px 12px 20px!important}
  html body #ofertas-do-dia.daily-v4{padding:8px!important}
  html body #ofertas-do-dia .daily-deal-intro h2{font-size:1.95rem!important}
  html body #ofertas-do-dia .daily-deal-features{grid-template-columns:1fr!important}
  html body #ofertas-do-dia .daily-deal-features>div{min-height:auto!important}
}