.mobile-section {
  display: none;
}
.pc-section {
  display: block;
}
.hqd-go .pro-pic {
  bottom: 0;
  right: 17.96vw;
  z-index: 9;
  width: 27.685vw;
}
.hqd-go .text-pic {
  position: absolute;
  top: 3.991vw;
  right: 10.26vw;
  z-index: 1;
  width: 44.219vw;
}
.featured-products .hqd-go-img {
  width: 14.74vw;
  margin-bottom: 1.146vw;
  transition: all 0.5s;
}
.event-banner {
  position: relative;
  box-sizing: border-box;
  font-size: 0;
  width: 100%;
  height: 36.4583vw;
}
.event-banner-inner {
  position: absolute;
  width: 100%;
  color: #FD5000;
  text-align: center;
  font-family: Roboto;
  font-style: normal;
  font-weight: 900;
  line-height: 1.5;
  font-size: 5.73vw;
  top: 50%;
  transform: translateY(-50%);
}
.event-banner-inner span {
  display: block;
}
.event-banner-inner .event-banner-inner-item-title1 {
  text-align: left;
  padding-left: 13vw;
}
.event-banner-inner .event-banner-inner-item-title2 {
  text-align: right;
  padding-right: 6vw;
}
.event-banner img.bg-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-banner .icon-pic {
  position: absolute;
  z-index: 99;
  width: 25.36vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  transition: all 0.5s ease-in-out;
}
.event-banner .icon-pic.active {
  transform: translate(-50%, -50%);
}
.banner-videos .before-banner {
  border-radius: 1.667vw;
}
.banner-videos .swiper-slide .bg-pic img {
  border-radius: 1.667vw;
}
@media (max-width: 768px) {
  /* Homepage Container */
  .homepage {
    overflow-x: hidden;
  }
  .pc-section {
    display: none;
  }
  .mobile-section {
    display: block;
  }
  /* Mobile Banner Styles */
  .banner-new-products .swiper-slide .bg-pic {
    height: 147.2vw;
    background: url("/wp-content/themes/hqd/assets/images/banner/shisha-20k-bg-m.webp");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .banner-new-products .swiper-slide.glow-pro-12k .bg-pic {
    height: 147.2vw;
    background: url("/wp-content/themes/hqd/assets/images/banner/h618_banner_m.webp");
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
  }
  .banner-new-products .swiper-slide.glow-air-70k .bg-pic {
    background: url("/wp-content/themes/hqd/assets/images/banner/glow-air-70K-bg-m.webp");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .banner-new-products .swiper-slide.hqd-go .bg-pic {
    background: url("/wp-content/themes/hqd/assets/images/banner/h136-bg-m.webp");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  /** RIFEX Air：与 h631 PC 底图一致（暂无独立 h631 移动端底图资源时用同一张） */
  .banner-new-products .swiper-slide.rifex-air .bg-pic {
    height: 147.2vw;
    background: url("/wp-content/themes/hqd/assets/images/banner/h631-bg-m.webp");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  /** 与 GLOW / HQD GO 等块一致：picture 包裹 pro-pic 时占满宽、避免行内空隙影响布局 */
  .banner-new-products .swiper-slide .swiper-item-inner > picture {
    display: block;
    width: 100%;
    line-height: 0;
  }
  .banner-new-products .swiper-slide.banner-coming-soon .bg-pic {
    height: 147.2vw;
    background: url("/wp-content/themes/hqd/assets/images/comingsoon-m.webp");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .banner-new-products .swiper-slide .bg-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
  }
  .banner-new-products .swiper-slide .text-pic {
    display: none;
  }
  .banner-new-products .swiper-slide .pro-pic {
    width: 83.2vw;
    bottom: 10vw;
    right: 50%;
    transform: translateX(50%);
  }
  .banner-new-products .swiper-slide.rifex-air .pro-pic {
    width: 83.2vw;
    bottom: 6vw;
    right: 43%;
    transform: translateX(50%);
  }
  .banner-new-products .swiper-slide.glow-pro-12k .pro-pic {
    width: 83.2vw;
    bottom: 10vw;
    right: 50%;
    transform: translateX(50%);
    display: none;
  }
  .banner-new-products .swiper-slide.shisha-20k .pro-pic {
    width: 45.6vw;
    bottom: 12.6vw;
  }
  .banner-new-products .swiper-slide.glow-air-70k .pro-pic {
    width: 83.2vw;
    bottom: 10vw;
    right: 50%;
    transform: translateX(50%);
  }
  .banner-new-products .swiper-slide .pro-desc {
    top: 8.533vw;
    left: 50%;
    transform: translateX(-50%);
    width: 91.467vw;
    text-align: center;
  }
  .banner-new-products .swiper-slide .pro-desc .title {
    font-size: 10.667vw;
    font-weight: 700;
    line-height: 150%;
  }
  .banner-new-products .swiper-slide .pro-desc .subtitle {
    height: 9.333vw;
    font-size: 4.533vw;
    font-weight: 600;
    line-height: 150%;
    margin-top: 1.333vw;
  }
  .banner-new-products .swiper-slide .pro-desc .subtitle span {
    font-size: 4.533vw;
  }
  .banner-new-products .swiper-slide .pro-desc a.learn-more {
    font-size: 3.733vw;
    margin-top: 0;
  }
  .banner-new-products .swiper-pagination {
    bottom: 5.333vw;
  }
  .swiper-pagination .swiper-pagination-bullet {
    width: 2.133vw;
    height: 2.133vw;
  }
  .swiper-pagination .swiper-pagination-bullet-active {
    width: 8.533vw;
    border-radius: 1.067vw;
  }
  /* Featured Products Mobile */
  .featured-products {
    width: 91.467vw;
    margin: 98.667vw auto 0;
  }
  .section-title {
    font-size: 6.4vw;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 6.4vw;
  }
  .featured-products .products-list {
    flex-direction: column;
    gap: 3.2vw;
  }
  .featured-products .products-list .product-item {
    width: 100%;
    height: 91.2vw;
    border-radius: 4.267vw;
  }
  .featured-products .products-list .product-item > a {
    width: 73.6vw;
    height: 73.6vw;
  }
  .featured-products .products-list .product-item > a .product-desc {
    top: 3.333vw;
  }
  .featured-products .shisha-20k-img {
    width: 28.267vw;
    margin-bottom: 1.717vw;
  }
  .featured-products .product-desc .slogan-explore {
    opacity: 1;
  }
  .featured-products .product-desc .slogan-explore .explore {
    opacity: 0;
  }
  .featured-products .glow-air-70k-img {
    width: 64.53vw;
    margin-bottom: -2.8vw;
  }
  .featured-products .hqd-go-img {
    width: 49vw;
    margin-bottom: 2.5vw;
  }
  .featured-products .title {
    font-size: 4.8vw;
    font-weight: 600;
    line-height: 150%;
  }
  .featured-products .slogan {
    font-size: 3.867vw;
    font-weight: 400;
    line-height: 150%;
  }
  .featured-products .explore {
    font-size: 2.133vw;
    font-weight: 400;
    line-height: 150%;
  }
  /* More Products Mobile */
  .more-products-part {
    max-width: 91.467vw;
    margin: 10.667vw auto 10.667vw;
    font-size: 0;
  }
  .more-products-part .products-list ul {
    display: flex;
    flex-direction: row;
    gap: 4.5vw;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2.133vw;
    flex-wrap: nowrap;
    padding-top: 3vw;
    margin-top: 0;
  }
  .more-products-part .products-list ul::-webkit-scrollbar {
    display: none;
  }
  .more-products-part .products-list li {
    flex-shrink: 0;
  }
  .more-products-part .products-list .item {
    width: 49.73vw;
    border-radius: 8.534vw;
    margin-bottom: 2.133vw;
    margin-top: 6.533vw;
  }
  .more-products-part .products-list .item .item-img {
    max-width: 40vw;
    max-height: 58.111vw;
  }
  .more-products-part .products-list .title {
    font-size: 4.267vw;
    font-weight: 400;
    line-height: 150%;
  }
  .more-products-part .products-list .explore-icon {
    width: 6.933vw;
    bottom: 0.8vw;
    right: 0.8vw;
  }
  /* 移除第一个产品的特殊样式，统一所有产品的大小 */
  /* 现在通过 active-product 类动态应用效果，不需要特殊设置第一个产品 */
  /* 移除第一个产品的默认动画，改为通过 JavaScript 根据可见面积动态触发 */
  .more-products-part .products-list li .item .item-bg-svg.animate-border {
    animation: hqd-border-draw 3s linear forwards;
  }
  /* 移动端：当产品成为可见面积占比最大的时，应用与PC端hover相同的放大效果 */
  .more-products-part .products-list li.active-product {
    transform: scale(1.21);
    z-index: 9;
    transition: all 0.5s ease-in-out;
  }
  .more-products-part .products-list li.active-product .item {
    box-shadow: none;
  }
  .more-products-part .products-list li.active-product .explore-icon {
    opacity: 1;
  }
  /* 移动端禁用 hover 效果和 transform */
  .more-products-part .products-list li:hover {
    transform: none;
    z-index: auto;
  }
  /* Pin Videos Section Mobile - Hide or adjust */
  .pin-videos-section {
    height: auto;
    min-height: initial;
    margin-top: 0;
  }
  .pin-videos-section .pin-videos-content {
    position: relative;
    height: auto;
    min-height: initial;
  }
  .pin-videos-section .before-swiper-div {
    flex-direction: column;
    padding: 0 4.267vw;
    gap: 5.333vw;
    display: none;
  }
  .pin-videos-section .before-title {
    font-size: 21.333vw;
    width: 100%;
    text-align: center;
  }
  .pin-videos-section .before-banner {
    width: 100%;
    border-radius: 4.267vw;
  }
  .banner-videos .swiper-container,
  .common-swiper-section .swiper-container {
    width: 100%;
  }
  .banner-videos .swiper-slide,
  .common-swiper-section .swiper-slide {
    width: 80vw;
  }
  .banner-videos .swiper-slide .pro-desc .title,
  .common-swiper-section .swiper-slide .pro-desc .title {
    font-size: 6.4vw;
    font-weight: 700;
    line-height: 150%;
  }
  .banner-videos .swiper-slide .pro-desc .learn-more,
  .common-swiper-section .swiper-slide .pro-desc .learn-more {
    font-size: 3.733vw;
    margin: 0;
  }
  .banner-videos .swiper-slide .pro-desc,
  .common-swiper-section .swiper-slide .pro-desc {
    top: 10.667vw;
  }
  .diy-button-prev,
  .diy-button-next {
    width: 12.267vw;
    height: 12.267vw;
  }
  .diy-button-prev {
    left: 4.267vw;
  }
  .diy-button-next {
    right: 4.267vw;
  }
  /* Explore Section Mobile */
  .dxx-section-explore {
    height: auto;
    min-height: 220vw;
    padding: 17.067vw 0;
    display: none;
  }
  .explore-bg {
    display: none;
  }
  .explore-content {
    position: relative;
    width: 91.467vw;
    margin: 0 auto;
  }
  .explore-content .title {
    font-size: 6.4vw;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 5.333vw;
  }
  .explore-content .explore-grid {
    flex-direction: column;
    height: auto;
    gap: 3.733vw;
  }
  .explore-grid .explore-item-left,
  .explore-grid .explore-item-right {
    width: 100%;
    height: 56.8vw;
    border-radius: 4.267vw;
  }
  .explore-grid .explore-item-middle {
    width: 100%;
    height: auto;
    gap: 3.733vw;
  }
  .explore-grid .explore-item-middle .explore-item {
    height: 34.8vw;
    width: 100%;
  }
  .explore-content .explore-grid .title {
    font-size: 4.533vw;
    font-weight: 600;
    line-height: 150%;
    margin-top: 4.107vw;
  }
  .explore-content .explore-grid .learn-more {
    font-size: 3.2vw;
    font-weight: 400;
    line-height: 150%;
  }
  /* News & Blog Mobile */
  .dxx-section-news {
    margin-top: 17.067vw;
    margin-bottom: 22.267vw;
    max-width: 91.467vw;
  }
  .news-content .title {
    font-size: 6.4vw;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 5.333vw;
  }
  .news-content .news-grid {
    flex-direction: column;
    gap: 5.333vw;
  }
  .news-item {
    max-width: 100%;
  }
  .news-item a {
    height: auto;
    min-height: 113.6vw;
    border-radius: 4.267vw;
    background-position: bottom 0 right 0;
  }
  .news-item a:hover {
    background-size: 28vw;
  }
  .news-item img {
    width: 100%;
    border-radius: 4.267vw 4.267vw 0 0;
  }
  .news-item .title {
    height: 23.6875vw;
    font-size: 4.267vw;
    font-weight: 600;
    line-height: 1.4;
    padding: 0 4.853vw;
    padding-top: 5.547vw;
    padding-bottom: 2.08vw;
  }
  .news-item .desc {
    height: 28.266vw;
    font-size: 3.2vw;
    font-weight: 400;
    line-height: 1.5;
    padding: 0 4.853vw;
    padding-bottom: 5.547vw;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .more-products-part .section-title {
    margin-bottom: 3.4vw;
  }
  .diy-button-container {
    display: none;
  }
  .common-swiper-section .swiper-slide .bg-pic img {
    width: 100%;
    border-radius: 8.534vw;
  }
  .common-swiper-section {
    margin: 10.667vw auto 10.667vw;
  }
  .common-swiper-section .swiper-slide .pro-desc {
    top: 6.4vw;
  }
  .news-item.swiper-slide-active a {
    background: url('/wp-content/themes/hqd/assets/images/explore-arrow.png');
    background-size: 31.2vw;
    background-repeat: no-repeat;
    background-position: bottom 0 right 0;
  }
  .dxx-section-new-mobile {
    margin: 0;
  }
  .dxx-section-new-mobile .news-content .news-grid {
    padding-bottom: 12vw;
  }
  .event-banner {
    padding: 3.734vw 4.567vw 0;
    position: relative;
    border-radius: 4.267vw;
  }
  .event-banner img.bg-pic {
    border-radius: 4.267vw;
  }
  .event-banner-inner {
    top: 7.6vw;
    font-size: 9.6vw;
    font-weight: 700;
    line-height: 1.2;
    transform: none;
  }
  .event-banner-inner .event-banner-inner-item span {
    text-align: center;
    padding: 0;
  }
  /* GLOW Air 70K 视频播放样式 */
  .glow-air-70k-media-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  .glow-air-70k-video {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .glow-air-70k-media-wrapper.playing .glow-air-70k-trigger {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .glow-air-70k-media-wrapper.playing .glow-air-70k-video {
    display: block;
    position: relative;
  }
  /* Banner 中的视频样式 */
  .banner-new-products .glow-air-70k-media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .banner-new-products .glow-air-70k-media-wrapper.playing .glow-air-70k-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* Featured Products 中的视频样式 */
  .featured-products .glow-air-70k-media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .featured-products .glow-air-70k-media-wrapper.playing .glow-air-70k-video {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  /* Banner Videos 中的视频样式 */
  .banner-videos .bg-pic {
    position: relative;
  }
  .banner-videos .h631-banner-video,
  .banner-videos .b-global-banner-video,
  .banner-videos .glow-pro-12k-banner-video,
  .banner-videos .glow-air-70k-banner-video,
  .banner-videos .shisha-20k-banner-video,
  .banner-videos .fresher-hqd-banner-video {
    display: none;
    width: 100%;
    /* height: 100%; */
    height: 131.2vw;
    /**解决有些视频高度不统一**/
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .banner-videos .h631.playing-video .h631-banner-video,
  .banner-videos .b-global.playing-video .b-global-banner-video,
  .banner-videos .glow-pro-12k.playing-video .glow-pro-12k-banner-video,
  .banner-videos .glow-air-70k.playing-video .glow-air-70k-banner-video,
  .banner-videos .shisha-20k.playing-video .shisha-20k-banner-video,
  .banner-videos .fresher-hqd.playing-video .fresher-hqd-banner-video {
    display: block;
    position: relative;
  }
  .banner-videos .h631.playing-video .bg-pic picture,
  .banner-videos .b-global.playing-video .bg-pic picture,
  .banner-videos .glow-pro-12k.playing-video .bg-pic picture,
  .banner-videos .glow-air-70k.playing-video .bg-pic picture,
  .banner-videos .shisha-20k.playing-video .bg-pic picture,
  .banner-videos .fresher-hqd.playing-video .bg-pic picture {
    display: none;
  }
  /* Banner Videos 播放按钮样式 */
  .banner-videos .banner-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    background: none;
    cursor: pointer;
    z-index: 20;
    padding: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .banner-videos .banner-video-play:hover {
    transform: translate(-50%, -50%) scale(1.1);
  }
  .banner-videos .banner-video-play svg {
    width: 72px;
    height: 72px;
    display: block;
  }
  .banner-videos .h631.playing-video .banner-video-play,
  .banner-videos .b-global.playing-video .banner-video-play,
  .banner-videos .glow-pro-12k.playing-video .banner-video-play,
  .banner-videos .glow-air-70k.playing-video .banner-video-play,
  .banner-videos .shisha-20k.playing-video .banner-video-play,
  .banner-videos .fresher-hqd.playing-video .banner-video-play {
    display: none;
  }
  /* 移动端播放按钮样式 */
  /* 视频加载提示样式 */
  .banner-videos .video-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    pointer-events: none;
  }
  .banner-videos .loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FF6A00;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  /* 移动端加载提示 */
}
@media (max-width: 768px) and (max-width: 768px) {
  .banner-videos .banner-video-play svg {
    width: 19.2vw;
    height: 19.2vw;
  }
}
@media (max-width: 768px) and (max-width: 768px) {
  .banner-videos .loading-spinner {
    width: 13.33vw;
    height: 13.33vw;
    border-width: 1.07vw;
  }
}
