/* Animações de entrada (fx-reveal), ativadas por assets/js/animations.js. */

html, body {
    overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

/* Usa animation + translate para não disputar transition/transform com os hovers. */
.fx-reveal {
  --fx-distance: 32px;
  --fx-duration: .7s;
  --fx-ease: cubic-bezier(.2, .8, .2, 1);
}
.fx-up    { --fx-y: var(--fx-distance); }
.fx-down  { --fx-y: calc(var(--fx-distance) * -1); }
.fx-left  { --fx-x: var(--fx-distance); }
.fx-right { --fx-x: calc(var(--fx-distance) * -1); }

.fx-reveal:not(.is-visible) {
  opacity: 0;
}
.fx-reveal.is-visible {
  animation: fx-reveal var(--fx-duration) var(--fx-ease) var(--fx-delay, 0ms) both;
}
@keyframes fx-reveal {
  from { opacity: 0; translate: var(--fx-x, 0) var(--fx-y, 0); }
  to   { opacity: 1; translate: 0 0; }
}

body.elementor-editor-active .fx-reveal,
.fx-reveal.fx-static {
  opacity: 1 !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .fx-reveal {
    opacity: 1 !important;
    animation: none !important;
  }
}

@media (min-width: 992px) {
  .hide-desktop {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .hide-tablet {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Esconde o bloco "Concentração" (label + Listing Grid) na página de produto
   quando a query do JetEngine não retorna nenhum item (ex.: produtos sem
   concentracao_466, como coleiras e cremes). O Listing Grid já tem
   "Hide widget if: Query is empty" configurado — quando ele não é
   renderizado, sobra só o título como filho único do container, e o :has()
   detecta essa ausência para esconder o bloco inteiro junto. */
.concentracao-block:not(:has(.elementor-widget-jet-listing-grid)) {
  display: none !important;
}