/* SCATHAN FINAL OVERRIDES - 2026-10-13 */

/* HERO */
.hero-product-generic {
  position: relative !important;
  min-height: 520px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  isolation: isolate;
}

.hero-product-generic .hero-generic-art {
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  width: min(115%, 610px) !important;
  max-width: none !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: .94 !important;
  transform: scale(1.08) !important;
  filter:
    brightness(.72)
    contrast(1.08)
    saturate(.90)
    drop-shadow(0 30px 45px rgba(0,0,0,.52)) !important;

  -webkit-mask-image:
    radial-gradient(
      ellipse 72% 78% at 50% 50%,
      #000 48%,
      rgba(0,0,0,.98) 58%,
      rgba(0,0,0,.80) 68%,
      rgba(0,0,0,.42) 79%,
      transparent 96%
    ) !important;

  mask-image:
    radial-gradient(
      ellipse 72% 78% at 50% 50%,
      #000 48%,
      rgba(0,0,0,.98) 58%,
      rgba(0,0,0,.80) 68%,
      rgba(0,0,0,.42) 79%,
      transparent 96%
    ) !important;
}

.hero-product-generic .hero-product-halo {
  width: 82% !important;
  opacity: .28 !important;
}

.hero-product-generic .hero-product-caption {
  display: none !important;
}

/* deixa a direita do hero menos escura para o frasco aparecer */
.hero-premium .hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.94) 0%,
      rgba(0,0,0,.79) 40%,
      rgba(0,0,0,.25) 68%,
      rgba(0,0,0,.36) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5,5,5,.06),
      #050505 108%
    ) !important;
}

/* 6 DESTAQUES NA MESMA LINHA */
@media (min-width: 1101px) {

  .featured-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .featured-card {
    min-width: 0 !important;
    min-height: 330px !important;
    padding: 12px 10px 13px !important;
  }

  .featured-card img {
    width: 100% !important;
    height: 165px !important;
    object-fit: contain !important;
    transform: none !important;
  }

  .featured-card > div:last-child {
    padding-top: 11px !important;
  }

  .featured-card h3 {
    font-size: .72rem !important;
    line-height: 1.15 !important;
    letter-spacing: .065em !important;
  }

  .featured-dose {
    font-size: .64rem !important;
    margin: 4px 0 9px !important;
  }

  .featured-card button {
    padding: 8px 7px !important;
    font-size: .56rem !important;
    letter-spacing: .055em !important;
    white-space: nowrap !important;
  }
}

/* NOTEBOOK / TABLET */
@media (min-width: 781px) and (max-width: 1100px) {
  .featured-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}

/* MOBILE */
@media (max-width: 980px) {
  .hero-product-generic {
    min-height: 310px !important;
  }

  .hero-product-generic .hero-generic-art {
    width: min(108vw, 430px) !important;
    transform: none !important;
    opacity: .96 !important;
  }
}

@media (max-width: 780px) {
  .featured-grid {
    display: flex !important;
    overflow-x: auto !important;
    gap: 14px !important;
    scroll-snap-type: x mandatory !important;
  }

  .featured-card {
    flex: 0 0 min(84vw, 360px) !important;
    scroll-snap-align: center !important;
  }
}

/* ===== HERO BLEND FINAL ===== */

.hero-product-generic {
  position: relative !important;
  min-height: 500px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* REMOVE COMPLETAMENTE O EFEITO OVAL */
.hero-product-generic .hero-generic-art {
  position: relative !important;
  z-index: 1 !important;

  display: block !important;

  width: 112% !important;
  max-width: 640px !important;
  height: 455px !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: 0 !important;

  opacity: .88 !important;

  transform: translateX(12px) scale(1.04) !important;

  filter:
    brightness(.74)
    contrast(1.06)
    saturate(.90) !important;

  -webkit-mask-image: none !important;
  mask-image: none !important;

  mix-blend-mode: normal !important;
}

/* FADE REAL NAS BORDAS */
.hero-product-generic::after {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  z-index: 2 !important;

  pointer-events: none !important;

  background:
    linear-gradient(
      90deg,
      #050505 0%,
      rgba(5,5,5,.86) 6%,
      rgba(5,5,5,.35) 15%,
      rgba(5,5,5,0) 30%,
      rgba(5,5,5,0) 76%,
      rgba(5,5,5,.25) 90%,
      rgba(5,5,5,.78) 97%,
      #050505 100%
    ),
    linear-gradient(
      180deg,
      #050505 0%,
      rgba(5,5,5,.52) 8%,
      rgba(5,5,5,0) 23%,
      rgba(5,5,5,0) 78%,
      rgba(5,5,5,.42) 92%,
      #050505 100%
    ) !important;
}

/* remove o círculo dourado atrás */
.hero-product-generic .hero-product-halo {
  display: none !important;
}

/* sem legenda flutuante */
.hero-product-generic .hero-product-caption {
  display: none !important;
}

/* libera um pouco mais de luz no lado direito */
.hero-premium .hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.94) 0%,
      rgba(0,0,0,.79) 39%,
      rgba(0,0,0,.33) 58%,
      rgba(0,0,0,.12) 76%,
      rgba(0,0,0,.28) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5,5,5,.06),
      #050505 106%
    ) !important;
}

@media (max-width: 980px) {

  .hero-product-generic {
    min-height: 330px !important;
  }

  .hero-product-generic .hero-generic-art {
    width: 108% !important;
    max-width: 440px !important;
    height: 310px !important;
    transform: none !important;
  }

  .hero-product-generic::after {
    background:
      linear-gradient(
        90deg,
        #050505 0%,
        rgba(5,5,5,.55) 9%,
        rgba(5,5,5,0) 24%,
        rgba(5,5,5,0) 76%,
        rgba(5,5,5,.55) 91%,
        #050505 100%
      ),
      linear-gradient(
        180deg,
        #050505 0%,
        rgba(5,5,5,.38) 8%,
        rgba(5,5,5,0) 23%,
        rgba(5,5,5,0) 80%,
        rgba(5,5,5,.38) 93%,
        #050505 100%
      ) !important;
  }
}


/* ===== HERO FEATHER FINAL ===== */

.hero-product-generic {
  overflow: visible !important;
}

.hero-product-generic .hero-generic-art {
  width: 118% !important;
  max-width: 660px !important;
  height: 470px !important;

  opacity: .92 !important;

  filter:
    brightness(.78)
    contrast(1.04)
    saturate(.92)
    drop-shadow(0 28px 38px rgba(0,0,0,.30)) !important;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.25) 7%,
      #000 22%,
      #000 78%,
      rgba(0,0,0,.25) 93%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      #000 16%,
      #000 84%,
      transparent 100%
    ) !important;

  -webkit-mask-composite: source-in !important;

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 22%,
      #000 78%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      #000 16%,
      #000 84%,
      transparent 100%
    ) !important;

  mask-composite: intersect !important;
}

/* o fade agora é feito diretamente na própria imagem */
.hero-product-generic::after {
  display: none !important;
}