/* Static-site helpers — do NOT disable original CSS animations */

/* Hide Next.js loading overlay (no hydration to clear it) */
[class*="Hero_loadingOverlay"],
[class*="loadingOverlay"] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ensure hero overlay sits above video */
[class*="Hero_heroOverlay"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* FAQ summaries */
details[class*="FAQ_item"] > summary {
  cursor: pointer;
  list-style: none;
}
details[class*="FAQ_item"] > summary::-webkit-details-marker {
  display: none;
}

/* Soft hover polish retained even without React */
a,
button {
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

/* Mobile overlay starts hidden until JS opens menu */
.Header_mobileOverlay__OtE3F[hidden],
.Header_mobileOverlay__OtE3F[style*="display: none"] {
  pointer-events: none;
}

/* Language option layout fallback */
.LanguageSwitcher_option__G_kOw {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: transparent;
  border: none;
  color: #f8f8f8;
  cursor: pointer;
  text-align: left;
}
.LanguageSwitcher_option__G_kOw:hover,
.LanguageSwitcher_active__hdGCF {
  background: hsla(39, 47%, 60%, 0.1);
}

/* Respect reduced motion (mirror original) */
@media (prefers-reduced-motion: reduce) {
  [class*="ScrollReveal_scrollReveal"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [class*="Hero_handwriting"],
  [class*="Hero_subheadline"],
  [class*="Hero_buttons"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/*
 * LycheeMintTeaser intro starts at opacity:0 and only becomes visible when
 * .LycheeMintTeaser_visible__xEbq4 is added (React IntersectionObserver).
 * Static site.js never adds that class, so the whole teaser renders as a
 * tall empty dark band (PageBackground / BackgroundElements show through)
 * between ProductShowcase images and Ingredients. Force content visible.
 */
.LycheeMintTeaser_introSection__On7Th {
  opacity: 1 !important;
  transform: none !important;
}

/* ~20px from teaser content bottom → Ingredients heading */
.LycheeMintTeaser_teaser__BHnBh {
  padding-bottom: 0 !important;
}
.Ingredients_ingredients__oniOo {
  padding-top: 1.25rem !important; /* ~20px */
}
@media (max-width: 768px) {
  .LycheeMintTeaser_teaser__BHnBh {
    padding-bottom: 0 !important;
  }
  .Ingredients_ingredients__oniOo {
    padding-top: 1.25rem !important;
  }
}
@media (max-width: 480px) {
  .LycheeMintTeaser_teaser__BHnBh {
    padding-bottom: 0 !important;
  }
  .Ingredients_ingredients__oniOo {
    padding-top: 1.25rem !important;
  }
}

/* Ingredients cards are clickable to switch active tile */
.Ingredients_tile__WGBVQ {
  cursor: pointer;
}