/**
 * 手机端 H5：隐藏 PC 壳层 + 隔离 style.css 对 #mp-app 的污染
 * 主视觉见 mp-theme.css；由 html.mp-mobile 触发，不依赖 JS 注入
 */

@media (min-width: 768px) {
  #mp-app,
  .mp-nav-wrap,
  .mp-nav-spacer,
  .announcement-mask,
  .fullscreen-ad-mask {
    display: none !important;
  }
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  html.mp-mobile {
    --rpx: calc(100vw / 750);
  }

  html.mp-mobile body {
    background: #f8fafc !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding-bottom: 0 !important;
  }

  /* 隐藏 PC 页面（script/style 除外） */
  html.mp-mobile body.pc-home > *:not(#mp-app):not(.mp-nav-wrap):not(.mp-nav-spacer):not(.announcement-mask):not(.fullscreen-ad-mask):not(script):not(style),
  html.mp-mobile body.pc-inner > *:not(#mp-app):not(.mp-nav-wrap):not(.mp-nav-spacer):not(.announcement-mask):not(.fullscreen-ad-mask):not(script):not(style) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  html.mp-mobile #mp-app {
    display: block !important;
    visibility: visible !important;
    box-sizing: border-box;
    min-height: 100vh;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: calc(24 * var(--rpx)) calc(32 * var(--rpx)) calc(env(safe-area-inset-bottom, 0px) + calc(24 * var(--rpx)));
  }

  html.mp-mobile #mp-app.category-feed-page {
    padding: 0;
  }

  html.mp-mobile #mp-app.container-img-page {
    padding-top: calc(12 * var(--rpx));
    padding-left: calc(32 * var(--rpx));
    padding-right: calc(32 * var(--rpx));
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + calc(120 * var(--rpx)));
  }

  html.mp-mobile #mp-app.image-page {
    padding: 0 !important;
    min-height: 100vh;
    max-width: none !important;
    z-index: 10000;
  }

  html.mp-mobile body.mp-image-detail-mode .mp-nav-wrap,
  html.mp-mobile body.mp-image-detail-mode .mp-nav-spacer,
  html.mp-mobile.mp-image-detail-mode .mp-nav-wrap,
  html.mp-mobile.mp-image-detail-mode .mp-nav-spacer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    pointer-events: none !important;
  }

  html.mp-mobile body.pc-inner #mp-app.image-page,
  html.mp-mobile body.pc-home #mp-app.image-page {
    width: 100% !important;
    margin: 0 !important;
  }

  /* 阻断 .pc-home / .pc-inner 全局样式污染小程序 DOM */
  html.mp-mobile body.pc-home #mp-app .hero,
  html.mp-mobile body.pc-inner #mp-app .hero {
    position: relative !important;
    width: calc(100% + 64 * var(--rpx)) !important;
    margin: calc(-24 * var(--rpx)) calc(-32 * var(--rpx)) 0 !important;
    margin-bottom: calc(24 * var(--rpx)) !important;
    height: 45vh !important;
    min-height: calc(520 * var(--rpx)) !important;
    max-height: calc(720 * var(--rpx)) !important;
    max-width: none !important;
    overflow: hidden !important;
  }

  html.mp-mobile body.pc-home #mp-app .hero-swiper-inner {
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    transform: none !important;
    transition: none !important;
  }

  html.mp-mobile body.pc-home #mp-app .hero-swiper,
  html.mp-mobile body.pc-home #mp-app .hero-swiper-inner,
  html.mp-mobile body.pc-home #mp-app .hero-swiper-slide {
    width: 100% !important;
    height: 100% !important;
  }

  html.mp-mobile body.pc-home #mp-app .hero-inner,
  html.mp-mobile body.pc-home #mp-app .hero-carousel {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  html.mp-mobile body.pc-home #mp-app .container,
  html.mp-mobile body.pc-inner #mp-app.container {
    max-width: none !important;
    width: 100% !important;
    padding-left: calc(32 * var(--rpx)) !important;
    padding-right: calc(32 * var(--rpx)) !important;
  }

  html.mp-mobile body.pc-home #mp-app .content-wrapper,
  html.mp-mobile body.pc-home #mp-app .main-content,
  html.mp-mobile body.pc-home #mp-app .sidebar,
  html.mp-mobile body.pc-home #mp-app .site-header,
  html.mp-mobile body.pc-home #mp-app .portal-nav,
  html.mp-mobile body.pc-home #mp-app .module {
    display: revert !important;
    max-width: none !important;
  }

  html.mp-mobile body.pc-home #mp-app .banner-video,
  html.mp-mobile body.pc-home #mp-app video.banner-video {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }

  html.mp-mobile .mp-nav-wrap,
  html.mp-mobile .mp-nav-spacer {
    display: block !important;
    visibility: visible !important;
  }
}