/* NuMotion landing-page polish: stable desktop hover states and image-led cards. */

.nf-product-hidden {
  display: none !important;
}

@media (max-width: 639px) {
  /* The remaining section links use the original sm:flex breakpoint. */
  .nf-product-nav {
    display: none;
  }
}

.nf-dual-panel {
  --nf-dual-media-height: 500px;
  isolation: isolate;
}

.nf-dual-side {
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.nf-dual-media {
  height: var(--nf-dual-media-height);
  min-height: 0;
  border: 1px solid hsl(var(--stroke) / 0.8);
  border-radius: 1.25rem;
  background-image: url("/website_nutrafactri/static/app/images/dual-action-diptych.webp");
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 16px 30px hsl(var(--ink) / 0.08);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms ease;
}

.nf-dual-side[data-nf-side="nerv"] .nf-dual-media {
  background-image: url("/website_nutrafactri/static/app/images/nerv-leg-knee.webp");
  background-position: 50% center;
}

.nf-dual-side:hover .nf-dual-media {
    box-shadow: 0 22px 38px hsl(var(--ink) / 0.12);
  transform: scale(1.015);
}

.nf-dual-side[data-nf-side="flex"] .nf-dual-media {
  background-position: 0% center;
  background-size: 200% auto;
}

.nf-ingredient-media {
  min-height: 204px;
  border: 1px solid hsl(var(--stroke) / 0.75);
  border-radius: 1.25rem;
  background-image: url("/website_nutrafactri/static/app/images/ingredients-grid.webp");
  background-repeat: no-repeat;
  /* Each source panel is square. Scale by width and crop vertically so the
     ingredient photography never becomes distorted in a wide card. */
  background-size: 300% auto;
  box-shadow: 0 14px 28px hsl(var(--ink) / 0.07);
}

.nf-ingredient-media--collagen {
  min-height: 232px;
  background-position: 0% 0%;
}

.nf-ingredient-media--boswellia {
  background-position: 50% 0%;
}

.nf-ingredient-media--curcumin {
  background-position: 100% 0%;
}

.nf-ingredient-tile {
  min-height: 124px;
  border-radius: 1rem;
  background-image: url("/website_nutrafactri/static/app/images/neurotropic-trio.webp");
  background-repeat: no-repeat;
  background-size: 300% auto;
  background-position-y: 50%;
  box-shadow: inset 0 0 0 1px hsl(var(--stroke) / 0.4);
}

.nf-ingredient-tile--b1 {
  background-position-x: 0%;
}

.nf-ingredient-tile--b6 {
  background-position-x: 50%;
}

.nf-ingredient-tile--b12 {
  background-position-x: 100%;
}

.nf-ritual-card {
  overflow: hidden;
}

.nf-ritual-media {
  height: 220px;
  margin: -2rem -2rem 1.75rem;
  border-bottom: 1px solid hsl(var(--stroke) / 0.8);
  background-image: url("/website_nutrafactri/static/app/images/ritual-triptych.webp");
  background-repeat: no-repeat;
  background-size: 300% auto;
}

.nf-ritual-media--tear {
  background-image: url("/website_nutrafactri/static/app/images/ritual-tear.webp");
  background-position: 50% center;
  background-size: cover;
}

.nf-ritual-media--stir {
  background-image: url("/website_nutrafactri/static/app/images/stir-numotion-sachet.webp");
  background-position: 50% 55%;
  background-size: cover;
}

.nf-ritual-media--move {
  background-position: 100% center;
}

.nf-testimonial-card .nf-testimonial-meta {
  justify-content: flex-start;
}

@media (min-width: 768px) {
  /* Keep the panel at a stable two-column baseline; the dataset state is
     controlled by pointer entry instead of allowing React's transient
     class changes to collapse the card while the pointer crosses the seam. */
  .nf-dual-panel {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    transition: grid-template-columns 460ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nf-dual-panel[data-nf-hover="flex"] {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr) !important;
  }

  .nf-dual-panel[data-nf-hover="nerv"] {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr) !important;
  }
}

@media (max-width: 767px) {
  .nf-dual-panel {
    --nf-dual-media-height: 320px;
  }

  .nf-dual-media {
    min-height: 0;
  }

  .nf-ingredient-media {
    min-height: 184px;
  }

  .nf-ingredient-media--collagen {
    min-height: 204px;
  }

  .nf-ingredient-tile {
    min-height: 112px;
  }

  .nf-ritual-media {
    height: 184px;
  }

  .nf-ritual-media--tear {
    height: 184px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nf-dual-media {
    transition: none;
  }
}