/* Mobile tap hotfix — closed details menus must not steal taps.
   Loaded via public URL; also appended into main CSS chunk when possible. */

details:not([open]) > :not(summary) {
  display: none !important;
}

details:not([open]) [data-header-user-menu],
details:not([open]) [data-header-lang-menu],
details:not([open]) .mm-user-menu,
details:not([open]) .clothoff-lang-menu {
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Nested free-credits / lang panels (button-expanded, not nested details) */
details[data-header-user-root][open] [data-free-credits-panel],
details[data-header-user-root][open] .mm-user-submenu-panel {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Legacy nested-details free-credits (kept for safety) */
details[data-header-user-root][open] details[data-free-credits-root][open] > .mm-user-submenu-panel {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Mobile landing: hero flush under fixed header (no sticky, no extra gap) */
@media (max-width: 1023.98px) {
  [data-clothoff-landing="true"] [data-mobile-hero-pin="1"],
  [data-explore-shell="true"] [data-mobile-hero-pin="1"],
  .mobile-home-main [data-mobile-hero-pin="1"] {
    position: relative;
    margin-top: 0;
    padding-bottom: 0;
    z-index: 1;
  }

  [data-mobile-hero-pin="1"] [data-clothoff-hero="1"] > div {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  [data-clothoff-landing="true"] .clothoff-hero-side-video,
  [data-explore-shell="true"] .clothoff-hero-side-video {
    display: none !important;
  }
}

@media (max-width: 1023.98px) {
  [data-mobile-primary-nav],
  [data-explore-duration-filter="true"] {
    position: relative;
    z-index: 200;
  }

  [data-explore-duration-filter="true"] .mm-user-menu {
    z-index: 10050 !important;
    pointer-events: auto !important;
  }

  details[data-explore-duration-filter="true"][open] {
    z-index: 210;
  }
}

/* Enlarge known-small hub links on /quick */
a[href="/explore"],
a[href="/history"],
a[href="/history-native"] {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding-block: 0.65rem;
}

header a[href="/"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Parity snapshots: desktop must not stay opacity:0 (clothoff-reveal needs JS in prod). */
[data-parity-snapshot] .clothoff-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none;
}

/* Desktop / tablet: hide parity mobile quick strip (sm:!grid beats sm:hidden in snapshot). */
@media (min-width: 640px) {
  [data-parity-snapshot] nav.explore-mobile-quick-strip,
  [data-parity-snapshot] nav[data-explore-mobile-quick-strip] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* Desktop: template card hover video preview (parity grid) */
@media (min-width: 640px) {
  [data-parity-snapshot] .mm-template-card:hover video,
  [data-parity-snapshot] .mm-template-card:focus-within video,
  [data-parity-snapshot] .mm-template-card.mm-template-card--playing video {
    opacity: 1 !important;
  }

  [data-parity-snapshot] .mm-template-card video {
    pointer-events: none;
  }
}

/* Mobile: hide legacy parity quick strip — React strip is the only pair */
@media (max-width: 1023.98px) {
  [data-parity-snapshot] nav.explore-mobile-quick-strip,
  [data-parity-snapshot] nav[data-explore-mobile-quick-strip] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* Mobile parity hero wrap (legacy) */
@media (max-width: 1023.98px) {
  .mobile-parity-hero-wrap {
    position: relative;
  }

  .mobile-parity-hero-wrap .hero-banner-shell,
  .mobile-parity-hero-wrap [data-parity-snapshot*="home-main-hero-strip"] .hero-banner-shell {
    overflow: hidden !important;
  }
}

/* Mobile hero: transparent animated WebP 动图 (no maroon video plate) */
@media (max-width: 1023.98px) {
  [data-clothoff-hero="1"] .hero-side-anim {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* Legacy paths */
@media (max-width: 1023.98px) {
  .voxy-hero-side-motion {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .voxy-hero-side-motion__img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    background: transparent !important;
  }
}

/* Legacy parity video path — keep soft masks (morning). Do not force mask:none. */
@media (max-width: 1023.98px) {
  [data-mobile-parity-hero] .hero-side-video-mobile,
  [data-parity-snapshot*="home-main-hero-strip"] .hero-side-video-mobile {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    right: 0 !important;
    z-index: 3 !important;
    width: 7.85rem !important;
    min-width: 7.85rem !important;
    height: 11.25rem !important;
    min-height: 11.25rem !important;
  }

  [data-mobile-parity-hero] .hero-side-video-mobile .hero-side-poster,
  [data-parity-snapshot*="home-main-hero-strip"] .hero-side-video-mobile .hero-side-poster {
    transition: opacity 0.25s ease;
    z-index: 1;
  }

  [data-mobile-parity-hero] .hero-side-video-mobile.hero-side-video-playing .hero-side-poster,
  [data-parity-snapshot*="home-main-hero-strip"] .hero-side-video-mobile.hero-side-video-playing .hero-side-poster {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  [data-mobile-parity-hero] .hero-side-video-mobile .hero-side-video-el,
  [data-mobile-parity-hero] .hero-side-video-mobile video,
  [data-parity-snapshot*="home-main-hero-strip"] .hero-side-video-mobile video {
    position: relative;
    z-index: 2;
  }

  [data-mobile-parity-hero] .hero-side-video-mobile .hero-side-poster,
  [data-mobile-parity-hero] .hero-side-video-mobile video,
  [data-parity-snapshot*="home-main-hero-strip"] .hero-side-video-mobile video {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top !important;
  }
}

/* Explore mobile: hide parity desktop hero cards (React strip is canonical) — no :has() */
@media (max-width: 639.98px) {
  .explore-desktop-hero-mobile-off,
  [data-mobile-hide-desktop-hero="1"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* Touch targets — forms, parity CTAs, template cards */
@media (max-width: 1023.98px) {
  .mobile-native-btn,
  [data-parity-snapshot] .mobile-native-btn,
  [data-parity-snapshot] a.mm-template-card,
  [data-react-mobile-quick-strip] a,
  [data-react-mobile-quick-strip] button {
    min-height: 44px;
    touch-action: manipulation;
  }

  .mobile-gender-option {
    min-height: 48px;
    touch-action: manipulation;
  }

  [data-parity-snapshot] video.mm-template-card video,
  [data-parity-snapshot] .mm-template-card video {
    pointer-events: none;
  }
}

/* Template grid — consistent 2-up on phones */
@media (max-width: 639.98px) {
  [data-parity-snapshot] .explore-template-grid,
  [data-parity-snapshot] .explore-verified-showcase__grid,
  [data-parity-snapshot] .mm-template-video-grid,
  [data-parity-snapshot] [data-explore-template-grid="1"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.625rem !important;
  }
}

/* Home: marketing blocks below template grid (editable zone) */
@media (max-width: 1023.98px) {
  [data-mobile-home-below-showcase] {
    margin-top: 0.25rem;
  }

  [data-mobile-home-below-showcase] [data-parity-snapshot] section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  [data-mobile-home-below-showcase] [data-parity-snapshot] section:first-of-type {
    padding-top: 1.25rem !important;
  }

  [data-mobile-home-below-showcase] [data-parity-snapshot] .clothoff-marketing-section {
    max-width: 100%;
  }

  [data-clothoff-landing="true"] [data-mobile-home-below-showcase] + div .clothoff-footer {
    margin-top: 0.75rem;
  }
}

/* Pricing — single-column cards on phones */
@media (max-width: 639.98px) {
  [data-pricing-client="1"] .grid.gap-6 > div {
    padding: 1.25rem !important;
  }
}