/* Keep file here as future opt-in. Currently emptied to avoid unintended overrides. */

/* 全局字体设置 - 所有页面统一使用 PingFang SC */
* {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Helvetica Neue', Arial, sans-serif !important;
}

html, body {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Helvetica Neue', Arial, sans-serif !important;
}

/* 确保所有文本元素都使用 PingFang SC */
h1, h2, h3, h4, h5, h6,
p, span, div, a, button, input, textarea, select,
label, li, td, th, caption {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Helvetica Neue', Arial, sans-serif !important;
}

/* 覆盖所有可能的字体设置 */
body, .main-container, .purchase-section, .checkout-section, .order-section, .member-section,
.nav-content, .product-info, .product-title, .product-subtitle, .product-features,
.summary-title, .summary-label, .summary-value, .payment-info, .form-input,
.floating-label, .btn-buy, .btn-skianalysis, .cart-bottom-bar, .total-price,
.savings-badge, .original-price, .add-to-cart-btn, .checkout-btn, .submit-btn {
  font-family: 'PingFang SC' !important;
}

/* PC端隐藏移动端专用元素 - 只在PC端生效 */
@media (min-width: 1025px) {
  .mobile-only {
    display: none !important;
  }
  
  /* PC端显示桌面端专用元素 */
  .desktop-only {
    display: block !important;
  }
  
  /* PC端显示desktop-box，隐藏mobile-box */
  .desktop-box {
    display: flex !important;
  }
  
  .mobile-box {
    display: none !important;
  }
}

/* Earlier stack for medium screens to avoid overlap */
@media (max-width: 1280px) {
  .bottom-content-row { flex-direction: column !important; gap: clamp(12px, 3vw, 20px) !important; align-items: center !important; }
  .bottom-left-box, .bottom-right-box, .bottom-right-box-2 { width: 100% !important; height: auto !important; }
  .bottom-right-box { background: none !important; }
  .bottom-img { display: block !important; width: clamp(260px, 40vw, 480px) !important; height: auto !important; border-radius: 20px !important; }
}

/* 全局容器样式 - 在所有屏幕尺寸下都生效 */
.main-container {
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* 2) Navigation tweaks on narrow screens already handled by nav.css */

/* 3) Home (zhuye) critical fixes - 只在小屏幕下生效 */
@media (max-width: 1024px) {
  /* Reduce overly fixed heights to fluid */
  .title-box {
    height: clamp(160px, 20vh, 280px) !important;
  }

  .video-box {
    height: min(80vh, 56.25vw) !important; /* keep ~16:9 max */
    min-height: 320px !important;
  }

  .big-section {
    height: auto !important;
    padding: clamp(40px, 6vw, 100px) 0 !important;
    background-position: center;
    background-size: cover;
  }

  .twin-row {
    width: min(100%, var(--content-max)) !important;
    padding-left: var(--container-padding) !important;
    padding-right: var(--container-padding) !important;
  }

  .twin-box {
    height: auto !important;
  }
  
  /* 移动端：让twin-row内的元素独立显示 */
  .left-twin {
    display: contents !important; /* 让子元素直接成为flex子项 */
  }
  
  .twin-text-box {
    display: contents !important; /* 让twin-text-box的子元素直接成为flex子项 */
  }
  
  /* 标题部分（超级轨迹 + 超越导航级的轨迹追踪） */
  .twin-text-box > div:first-child {
    order: 1 !important; /* 标题在上 */
    margin-bottom: 20px !important;
    width: 100% !important;
    text-align: center !important; /* 标题居中 */
  }
  
  /* 图片/视频在中间 */
  .right-twin {
    order: 2 !important; /* 图片在中间 */
    margin: 20px 0 !important;
    width: 100% !important;
  }
  
  /* 其他文字内容（传统方案 + 技术创新） */
  .twin-text-box > div:not(:first-child) {
    order: 3 !important; /* 其他文字在下面 */
    margin-top: 20px !important;
    width: 100% !important;
    padding: 0 16px !important; /* 只给下面的文字添加左右间距 */
  }
  
  /* 使用更强的选择器确保生效 */
  div.twin-text-box div:not(:first-child) 
  div.twin-row div.twin-text-box div:not(:first-child)
  /* 覆盖内联样式中的margin-left */
  .twin-text-box [style*="margin-left: 61px"] { 
    margin-left: 0 !important; 
    padding: 0 16px !important; 
  }

  .center-box {
    width: 100% !important;
    padding: 0 var(--container-padding) !important;
  }

  .center-video-box {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .center-content {
    width: 100% !important;
    height: auto !important;
    border-radius: clamp(12px, 2vw, 20px) !important;
  }

  .bottom-box, .bottom-box-2 {
    height: auto !important;
    padding: clamp(40px, 6vw, 100px) 0 !important;
  }
  .middle-white-box { 
    height: auto !important; 
    padding: 16px 0 !important; /* 减少上下间距 */
  }

  /* 移动端middle-white-content横向滚动 */
  .middle-white-content { 
    flex-direction: row !important; 
    align-items: stretch !important; 
    overflow-x: auto !important; 
    overflow-y: hidden !important; 
    -webkit-overflow-scrolling: touch !important; 
    scroll-snap-type: x mandatory !important; 
    gap: 12px !important; 
    padding: 0 var(--container-padding) !important; 
    width: 100% !important; 
    height: 300px !important; /* 固定高度为300px */
    max-height: 300px !important; /* 确保最大高度也是300px */
  }
  .middle-white-item { 
    flex: 0 0 auto !important; 
    width: clamp(260px, 80vw, 300px) !important; 
    scroll-snap-align: start !important; 
    margin: 0 !important; 
  }
  /* 强制所有卡片居中 - 使用更具体的选择器 */
  .middle-white-content .middle-white-item .middle-white-imgbox { 
    margin: 0 !important; 
    padding: 12px !important; /* 减少内边距 */
    height: 300px !important; /* 固定高度为300px */
    max-height: 300px !important; /* 确保最大高度也是300px */
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: center !important; /* 强制垂直居中 */
    align-items: center !important; /* 水平居中 */
    gap: 0 !important; /* 移除gap，避免影响居中 */
  }
  
  /* 强制覆盖其他CSS文件的样式 - 使用最高优先级 */
  div.middle-white-content div.middle-white-item div.middle-white-imgbox {
    justify-content: center !important;
    align-items: center !important;
    height: 300px !important;
    max-height: 300px !important;
  }
  
  /* 最强制性的选择器 - 确保所有卡片都居中 */
  .middle-white-content .middle-white-item .middle-white-imgbox,
  .middle-white-content .middle-white-item .middle-white-imgbox,
  .middle-white-content .middle-white-item .middle-white-imgbox,
  .middle-white-content .middle-white-item .middle-white-imgbox {
    justify-content: center !important;
    align-items: center !important;
    height: 300px !important;
    max-height: 300px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* 减少图标区域高度 */
  .middle-white-img {
    max-height: 32px !important; /* 减小图标高度 */
    width: auto !important;
    margin-bottom: 4px !important;
  }
  /* 减少文字间距 */
  .middle-white-imgbox-text {
    margin: 2px 0 10px 0   !important; /* 减少标题间距 */
    font-size: 14px !important;
  }
  .middle-white-imgbox-bottom-text {
    margin: 2px 0 !important; /* 减少描述文字间距 */
    font-size: 12px !important;
    line-height: 1.2 !important; /* 减少行高 */
  }

  .bottom-center-content, .bottom-center-content-2 {
    width: min(100%, var(--content-max)) !important;
  }

  .bottom-content-row,
  .bottom-content-box {
    width: 100% !important;
    height: auto !important;
  }

  .bottom-left-box, .bottom-right-box, .bottom-right-box-2 {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 16px 0 !important;
  }

  .bottom-image-stack { width: clamp(260px, 55vw, 600px) !important; height: auto !important; }
  .bottom-slider-viewport, .bottom-slider-item {
    width: 100% !important;
    height: auto !important;
  }
  /* 保证移动端图片容器有高度，避免图片叠化区域为空 */
  .bottom-image-stack { height: 42dvh !important; }
  .bottom-image-stack img { object-fit: contain !important; }
  /* Mobile/tablet: ensure image on top, text below without overlap */
  .bottom-slider-track { flex-direction: column !important; gap: clamp(12px, 3vw, 16px) !important; }
  .bottom-text-slider { width: 100% !important; height: auto !important; padding: 0 var(--container-padding) !important; }
  .bottom-text-slider .bottom-desc-item { position: relative !important; opacity: 0; display: none; transform: none !important; }
  .bottom-text-slider .bottom-desc-item.active { opacity: 1; display: block; }
  
  /* 确保移动端下面的内容正常显示 */
  .bottom-slider-viewport {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  .bottom-slider-track {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .bottom-image-stack {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  .bottom-text-slider {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  .bottom-desc-item {
    display: block !important;
    opacity: 1 !important;
  }
  
  /* 增加移动端center-item卡片之间的间距 */
  .center-item {
    margin-bottom: 20px !important;
    margin-right: 20px !important;
  }
  
  .center-list-wrapper {
    gap: 20px !important;
  }
  
  /* 使用更强的选择器确保间距生效 */
  .center-list .center-list-wrapper .center-item {
    margin-bottom: 20px !important;
    margin-right: 20px !important;
    transition: all 0.3s ease !important; /* 添加过渡动画 */
    transform: scale(1) !important; /* 默认正常大小 */
    opacity: 0.8 !important; /* 默认稍微透明 */
    filter: brightness(0.8) !important; /* 默认稍微暗一些 */
  }
  
  .center-list .center-list-wrapper {
    gap: 20px !important;
  }
  
  /* 激活状态的卡片放大加高亮 */
  .center-list .center-list-wrapper .center-item.active {
    transform: scale(1.05) !important; /* 放大效果 */
    opacity: 1 !important; /* 完全显示 */
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3) !important; /* 蓝色高亮阴影 */
    border: 2px solid rgba(0, 212, 255, 0.5) !important; /* 蓝色边框 */
    filter: brightness(1.2) !important; /* 激活时更亮 */
  }
  
  /* 使用最强选择器覆盖zhuye.css中的active样式 */
  .center-box .center-list .center-list-wrapper .center-item.active {
    transform: scale(1.05) !important; /* 覆盖zhuye.css的scale(1.1) */
    opacity: 1 !important;
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3) !important;
    border: 2px solid rgba(0, 212, 255, 0.5) !important;
    background: rgba(12, 12, 12, 0.8) !important; /* 覆盖背景色 */
    filter: brightness(1.2) !important; /* 覆盖亮度 */
  }
  
  /* 确保非激活状态的卡片都是正常大小 */
  .center-box .center-list .center-list-wrapper .center-item:not(.active) {
    transform: scale(1) !important; /* 强制正常大小 */
    opacity: 0.8 !important; /* 稍微透明 */
    filter: brightness(0.8) !important; /* 稍微暗一些 */
  }
  
  /* 覆盖所有center-item状态类，确保移动端大小一致 */
  .center-box .center-list .center-list-wrapper .center-item.center,
  .center-box .center-list .center-list-wrapper .center-item.above,
  .center-box .center-list .center-list-wrapper .center-item.below,
  .center-box .center-list .center-list-wrapper .center-item.far {
    transform: scale(1) !important; /* 强制所有状态都是正常大小 */
    opacity: 0.7 !important;
    filter: brightness(0.8) !important;
    background: rgba(34, 34, 35, 0.8) !important;
    border: 2px solid transparent !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  }
  
  /* 重新设计移动端center-item样式 */
  .center-box .center-list .center-list-wrapper .center-item {
    margin-bottom: 20px !important;
    margin-right: 20px !important;
    transition: all 0.3s ease !important;
    transform: scale(1) !important; /* 所有卡片默认相同大小 */
    opacity: 0.7 !important; /* 默认稍微透明 */
    filter: brightness(0.8) !important; /* 默认稍微暗 */
    background: rgba(34, 34, 35, 0.8) !important; /* 统一背景色 */
    border: 2px solid transparent !important; /* 透明边框 */
    border-radius: 12px !important; /* 圆角 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; /* 默认阴影 */
  }
  
  /* 激活状态的高亮效果 */
  .center-box .center-list .center-list-wrapper .center-item.active {
    transform: scale(1.05) !important; /* 放大效果 */
    opacity: 1 !important; /* 完全显示 */
    filter: brightness(1.2) !important; /* 更亮 */
    background: rgba(34, 34, 35, 1) !important; /* 更深的背景 */
    border: 2px solid rgba(0, 212, 255, 0.8) !important; /* 蓝色高亮边框 */
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3), 0 0 20px rgba(0, 212, 255, 0.2) !important; /* 蓝色发光效果 */
  }
  
  /* 激活状态的文字颜色 */
  .center-box .center-list .center-list-wrapper .center-item.active .center-item-title {
    color: #ffffff !important; /* 白色标题 */
  }
  
  .center-box .center-list .center-list-wrapper .center-item.active .center-item-desc {
    color: #cccccc !important; /* 浅灰色描述 */
  }
  
  /* 非激活状态的文字颜色 */
  .center-box .center-list .center-list-wrapper .center-item:not(.active) .center-item-title {
    color: #888888 !important; /* 灰色标题 */
  }
  
  .center-box .center-list .center-list-wrapper .center-item:not(.active) .center-item-desc {
    color: #666666 !important; /* 深灰色描述 */
  }

  .section-title,
  .new-section-box {
    padding-left: clamp(16px, 8vw, 180px) !important;
    padding-right: clamp(16px, 8vw, 180px) !important;
  }

  .small-item-box { 
    width: clamp(260px, 45vw, 450px) !important; 
    flex-shrink: 0 !important;
    margin: 0 auto !important;
    flex-basis: auto !important;
    max-width: 100% !important;
  }
}

/* Typography scaling - 在所有屏幕尺寸下生效 */
.sub-box-title { 
  font-size: clamp(22px, 5vw, 42px) !important; 
  width: auto !important; 
  max-width: 100% !important;
}
.sub-box-desc { 
  font-size: clamp(14px, 3.5vw, 24px) !important; 
  width: auto !important; 
  padding: 0 var(--container-padding); 
}

/* 其他字体样式 - 只在小屏幕下生效 */
@media (max-width: 1024px) {
  .middle-white-content-text { 
    font-size: clamp(22px, 6vw, 65px) !important; 
    margin-bottom: clamp(16px, 6vw, 120px) !important; /* 减少标题与卡片的间距 */
  }
  /* .twin-title { font-size: clamp(18px, 4.5vw, 35px) !important; } */
  .twin-desc, .twin-desc-gray { font-size: clamp(14px, 3.8vw, 18px) !important; line-height: 1.6 !important; }
  .bottom-title { font-size: clamp(22px, 7vw, 50px) !important; }
  .promo-subtitle, .promo-title, .promo-description { max-width: 100% !important; }
  .promo-subtitle { font-size: clamp(16px, 4.5vw, 36px) !important; }
  .promo-title { font-size: clamp(20px, 5vw, 36px) !important; }
  .promo-description { font-size: clamp(14px, 4vw, 22px) !important; }
}

/* 4) Purchase (gouwu) overrides - 只在小屏幕下生效 */
@media (max-width: 1024px) {
  .purchase-container { max-width: var(--content-max) !important; padding: 0 var(--container-padding); }
  .main-image { width: 100% !important; height: min(60vh, 70vw) !important; }
  .thumbnail-gallery { 
    display: none !important; 
    visibility: hidden !important; 
    opacity: 0 !important; 
  }
  
  /* 移动端预售按钮样式 */
  .title-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    /* margin-bottom: 50px !important; */
    margin-top: 19px;
  }
  
  .presale-btn {
    width: 68px !important;
    height: 21px !important;
    background: #FFD166 !important;
    color: var(--Waikawa-Gray-950, #262C40) !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-family: 'PingFang SC', sans-serif !important;
    font-weight: bold !important;
    font-size: 20px !important;
    line-height: 100% !important;
    letter-spacing: 0% !important;
    text-align: center !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    margin: 0 !important;
    outline: none !important;
    text-decoration: none !important;
    overflow: hidden !important;
  }
  
  /* 强制覆盖所有可能的按钮样式 */
  button.presale-btn.mobile-only {
    width: 68px !important;
    height: 21px !important;
    background: #FFD166 !important;
    color: var(--Waikawa-Gray-950, #262C40) !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-family: 'PingFang SC', sans-serif !important;
    font-weight: bold !important;
    font-size: 10px !important;
    line-height: 100% !important;
    letter-spacing: 0% !important;
    text-align: center !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    margin: 0 !important;
    outline: none !important;
    text-decoration: none !important;
    overflow: hidden !important;
    min-width: 68px !important;
    max-width: 68px !important;
    flex-shrink: 0 !important;
  }
  
  /* 最高优先级：使用属性选择器 */
  button[class*="presale-btn"] {
    width: 68px !important;
    height: 21px !important;
    background: #FFD166 !important;
    color: var(--Waikawa-Gray-950, #262C40) !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-family: 'PingFang SC', sans-serif !important;
    font-weight: bold !important;
    font-size: 20px !important;
    line-height: 100% !important;
    text-align: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    min-width: 68px !important;
    max-width: 68px !important;
    flex-shrink: 0 !important;
  }
  
  /* 移动端显示移动端专用元素 */
  .mobile-only {
    display: block !important;
  }
  
  /* 移动端隐藏桌面端专用元素 */
  .desktop-only {
    display: none !important;
  }
  
  /* 移动端隐藏desktop-box，显示mobile-box */
  .desktop-box {
    display: none !important;
  }
  
  .mobile-box {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* 移动端进度卡片底部区域保持垂直排列 */
  .mobile-box .progress-bottom-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }
  
  .mobile-box .progress-bottom-section .progress-description {
    margin-left: 0 !important;
    color: #666666 !important;
  }
  
  .mobile-box .progress-bottom-section .user-avatar-progress {
    width: 45px !important;
    height: 45px !important;
  }
  
  /* 移动端进度标签保持原有样式 */
  .mobile-box .progress-label {
    font-family: 'PingFang SC', sans-serif !important;
    font-size: 13px !important;
    font-weight: bold !important;
    font-style: normal !important;
    line-height: 100% !important;
    letter-spacing: -1% !important;
  }
  
  /* 移动端进度新值样式 */
  .mobile-box .progress-new {
    font-family: 'PingFang SC', sans-serif !important;
    font-size: 15px !important;
    font-weight: bold !important;
    font-style: normal !important;
    line-height: 100% !important;
    color: #000 !important;
  }
  
  /* 移动端进度旧值保持原有样式 */
  .mobile-box .progress-old {
    font-family: 'PingFang SC', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 100% !important;
    color: #999999 !important;
  }
  
  .product-info { max-width: 100% !important; height: auto !important; padding-top: 0 !important; }
  
  /* 移动端去掉product-title的内边距 */
  .product-title {
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'PingFang SC', sans-serif !important;
    font-weight: bold !important;
    font-size: 20px !important;
    line-height: 100% !important;
    letter-spacing: 0% !important;
    color: var(--Waikawa-Gray-950, #262C40) !important;
  }
  
  /* 移动端让product-subtitle独立出来，不在product-header里面 */
  /* .product-header {
    display: block !important;
  } */
  
      .product-subtitle {
      margin: 16px auto 0!important;
      padding: 0 !important;
      width: 333px;
      font-family: 'PingFang SC', sans-serif !important;
      font-weight: 400 !important;
      font-style: normal !important;
      font-size: 12px !important;
      line-height: 1.5 !important;
      letter-spacing: 0% !important;
      color: #3A2640 !important;
    }
    
    /* 移动端产品特性列表字体样式 */
    .product-features .feature-list li {
      font-family: 'PingFang SC', sans-serif !important;
      font-weight: bold !important;
      font-style: normal !important;
      font-size: 12px !important;
      line-height: 100% !important;
      letter-spacing: 0% !important;
      color: #262C40 !important;
    }
    
    /* 移动端强制覆盖产品特性列表样式 */
    .purchase-section .product-features .feature-list li {
      font-family: 'PingFang SC', sans-serif !important;
      font-weight: bold !important;
      font-style: normal !important;
      font-size: 12px !important;
      line-height: 100% !important;
      letter-spacing: 0% !important;
      color: #262C40 !important;
    }
    
    /* 移动端去除产品特性区域上内边距 */
    .product-features {
      padding-top: 0 !important;
    }
    
    /* 移动端设置进度条上外边距 */
    .progress-bar {
      margin-top: 30px !important;
    }
    
    /* 移动端去除节省徽章内边距 */
    .savings-badge {
      padding: 0 !important;
    }
    
    /* 移动端强制覆盖节省徽章内边距 */
    .cart-bottom-bar .savings-badge,
    #priceSummary .savings-badge,
    div[class*="savings-badge"] {
      padding: 0 !important;
      margin: 0 !important;
    }
    
    /* 移动端最高优先级覆盖节省徽章样式 */
    .savings-badge[style*="padding: 0 !important"] {
      padding: 0 !important;
      margin: 0 !important;
    }
    
    /* 移动端强制覆盖所有可能的节省徽章样式 */
    .savings-badge,
    .cart-bottom-bar .savings-badge,
    #cartBottomBar .savings-badge {
      padding: 0 !important;
      margin: 0 !important;
      box-sizing: border-box !important;
    }
    
    /* 移动端结算按钮样式 */
    .cart-bottom-bar .checkout-btn,
    .cart-bottom-bar button[onclick*="goToCartPage"],
    .cart-bottom-bar .add-to-cart-btn {
      width: 294px !important;
      height: 37px !important;
      font-family: 'PingFang SC', sans-serif !important;
      font-weight: 400 !important;
      font-style: normal !important;
      font-size: 16px !important;
      line-height: 100% !important;
      letter-spacing: 0% !important;
      text-align: center !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 20px !important;
      background-color: #262c40 !important;
    }
  .progress-bar-container { width: 324px !important; max-width: 324px !important; min-width: 324px !important; margin: 0 auto !important; }
  
  /* 移动端预售信息左右排列 */
  .promotion-badge {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    /* gap: 12px !important; */
  }
  
  .badge.limited,
  .delivery-info,
  .stock-info {
    display: inline-block !important;
    white-space: nowrap !important;
  }
  
  /* 移动端强制去除预售徽章内边距并应用字体样式 */
  @media (max-width: 768px) {
    .product-price-box {
      width: 327px !important;
      max-width: 327px !important;
      min-width: 327px !important;
      margin: 0 auto 25px auto !important;
      height: 161px !important;
    }
    
    /* 移动端专门针对内联样式的div宽度设置 */
    .product-price-box > div[style*="width: 340px"] {
      width: 307px !important;
    }
    
    /* 移动端显示原价信息 */
    .product-price-box .original-price {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    /* 移动端产品价格标题字体样式 */
    .product-price-box .product-price-title {
      font-family: 'PingFang SC', sans-serif !important;
      font-weight: bold !important;
      font-size: 14px !important;
      line-height: 100% !important;
      letter-spacing: 0% !important;
      text-align: center !important;
      color: #3A2640 !important;
      display: flex;
      align-items: start;
    }
    
    /* 移动端强制覆盖内联样式 */
    .product-price-box div[style*="color: #262C40"] {
      font-family: 'PingFang SC', sans-serif !important;
      font-weight: bold !important;
      font-size: 14px !important;
      line-height: 100% !important;
      letter-spacing: 0% !important;
      text-align: center !important;
      color: #3A2640 !important;
    }
    
    /* 移动端预售价格字体样式 */
    .product-price-box .presale-price {
      font-family: 'PingFang SC', sans-serif !important;
      font-weight: bold !important;
      font-style: normal !important;
      font-size: 14px !important;
      line-height: 100% !important;
      letter-spacing: 0% !important;
      text-align: center !important;
      color: #FF3B30 !important;
    }
    
    /* 移动端去除产品价格说明内边距 */
    .product-price-box .product-price-note {
      padding: 0 0 0 20px !important;
      margin: 15px 0 0 0  !important;
      font-family: 'PingFang SC', sans-serif !important;
      font-weight: 400 !important;
      font-style: normal !important;
      font-size: 12px !important;
      line-height: 1.5 !important;
      letter-spacing: 0% !important;
      color: #3A2640 !important;
      
    }
    
    .badge.limited,
    .delivery-info,
    .stock-info {
      padding: 0 !important;
      margin: 0 !important;
      font-family: 'PingFang SC', sans-serif !important;
      font-weight: 400 !important;
      font-style: normal !important;
      font-size: 12px !important;
      line-height: 100% !important;
      letter-spacing: 0% !important;
      color: #808080 !important;
    }
  }
  /* .product-price-box, .product-services, .btn-purchase-primary { width: 100% !important; } */
}

/* 5) Checkout overrides - 只在手机下生效 */
@media (max-width: 768px) {
  .checkout-container { max-width: var(--content-max) !important; padding: 0 var(--container-padding); }
  .product-detail-section, .order-summary { width: 100% !important; }
  .product-info.checkout-item { width: 230px !important; height: auto !important; }
}

/* neutralize hard inline margins/sizes on narrow screens */
@media (max-width: 992px) {
  .twin-row { flex-direction: column !important; gap: clamp(16px, 4vw, 24px) !important; }
  .center-box { position: static !important; height: auto !important; }
  /* Bottom section stacks vertically */
  .bottom-content-row { flex-direction: column !important; gap: clamp(12px, 4vw, 20px) !important; align-items: center !important; }
  .bottom-right-box { background: none !important; }
  .bottom-img { display: block !important; width: clamp(240px, 60vw, 420px) !important; height: auto !important; }
  .bottom-left-box { margin-bottom: clamp(8px, 3vw, 16px) !important; }
  
  /* 进步卡片在中等屏幕上的布局 */
  .new-section-box {
    flex-direction: column !important;
    gap: 30px !important;
    align-items: center !important;
    padding: 10px 40px 60px 40px !important;
  }
  
  .small-item-box {
    width: clamp(300px, 60vw, 500px) !important;
    height: auto !important;
    min-height: 300px !important;
  }
  
  /* 确保进步卡片内部文字对齐正确 */
  .progress-top {
    align-items: flex-start !important;
  }
  
  .progress-label {
    text-align: left !important;
  }
  
  .progress-value {
    justify-content: flex-start !important;
    align-items: baseline !important;
  }
  
  .progress-description {
    text-align: left !important;
  }
}

@media (max-width: 768px) {
  .nav-content { padding-left: var(--container-padding) !important; padding-right: var(--container-padding) !important; }

  /* Home */
  .center-list { width: 100% !important; height: auto !important; padding: 0 0 20px 0 !important; }
  .center-list-wrapper { gap: clamp(16px, 4vw, 24px) !important; }
  .center-item { width: 100% !important; height: auto !important; }
  
  /* 移动端调整center-box显示顺序：视频在上，列表在下 */
  .center-box {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* 使用更强的选择器确保顺序生效 */
  .center-box .center-video-box {
    order: 1 !important; /* 视频区域排在第一位 */
    -webkit-order: 1 !important;
  }
  
  .center-box .center-list {
    order: 2 !important; /* 文字列表排在第二位 */
    -webkit-order: 2 !important;
  }
  
  /* 确保元素不重叠，使用margin调整间距 */
  .center-box .center-video-box {
    margin-bottom: 20px !important;
  }
  
  .center-box .center-list {
    margin-top: 0 !important;
  }
  .new-section-box { 
    flex-direction: column !important; 
    gap: clamp(16px, 5vw, 24px) !important; 
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  
  /* 确保进步卡片内部文字对齐正确 */
  .progress-top {
    align-items: flex-start !important;
  }
  
  .progress-label {
    text-align: left !important;
  }
  
  .progress-value {
    justify-content: flex-start !important;
    align-items: baseline !important;
  }
  
  .progress-description {
    text-align: left !important;
  }
  .flashback-content { flex-direction: column !important; gap: 24px !important; }
  .phone-image { width: clamp(200px, 50vw, 280px) !important; height: auto !important; }
  
  /* 移动端：让flashback-left内的元素独立显示 */
  .flashback-left {
    display: contents !important; /* 让子元素直接成为flex子项 */
  }
  
  /* 标题区域独立 */
  .flashback-header {
    order: 1 !important; /* 标题在最上面 */
    margin-bottom: 20px !important;
    text-align: center !important;
  }
  
  /* 手机图片独立 */
  .flashback-phone {
    order: 2 !important; /* 图片在中间 */
    /* margin: 20px 0 !important; */
  }
  
  /* 功能列表独立 */
  .feature-list {
    order: 3 !important; /* 功能列表在下面 */
    margin-top: 20px !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .phone-image { width: clamp(200px, 50vw, 280px) !important; height: auto !important; }
  
  /* 增加flashback内容的间距 */
  .flashback-header {
    margin-bottom: 20px !important; /* 标题区域下方间距 */
  }
  .flashback-title {
    margin-bottom: 12px !important; /* 标题下方间距 */
    font-size: 24px !important;
  }
  .flashback-subtitle {
    margin-bottom: 16px !important; /* 副标题下方间距 */
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
  .feature-list {
    margin-top: 20px !important; /* 功能列表上方间距 */
  }
  .feature-item {
    margin-bottom: 16px !important; /* 功能项之间的间距 */
    text-align: left !important; /* 左对齐 */
  }
  .feature-title {
   /* 功能标题下方间距 */
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  .feature-desc {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #666 !important;
  }
  /* 强制调整flashback布局顺序 - 使用最高优先级 */
  div.flashback-content div.flashback-left div.flashback-header {
    order: 1 !important; /* 标题在最上面 */
  }
  div.flashback-content div.flashback-phone {
    order: 2 !important; /* 图片在中间 */
  }
  div.flashback-content div.flashback-left div.feature-list {
    order: 3 !important; /* 功能列表在下面 */
  }

  .bottom-text-slider { width: 100% !important; height: auto !important; }
  .bottom-right-box { justify-content: center !important; }

  /* Purchase */
  .purchase-container { flex-direction: column !important; gap: 0 !important; }
  /* .main-image { height: min(48vh, 90vw) !important; } */
  .thumbnail { width: 64px !important; height: 64px !important; }

  /* Checkout */
  .checkout-section { padding: 60px var(--container-padding) 40px !important; }
  .product-layout { gap: 16px !important; flex-direction: column !important; }
  .product-layout [style*="margin"] { margin: 0 !important; }
  /* 仅限制商品主图，避免误伤删除图标 */
  .product-layout img[src*="sp.png"],
  .product-image { width: clamp(56px, 22vw, 120px) !important; height: auto !important; }
  .membership-benefits, .benefit-item, .service-item { width: 100% !important; margin: 0 !important; }

  /* 顶部三列区域（图片 | 标题 | 数量/价格+删除） */
  .product-info.quantity-section { width: 240px !important; height: auto !important; gap: 12px !important; }
  .product-info > div[style*="height: 190px"] {
    height: auto !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    column-gap: 12px !important;
    align-items: start !important;
  }
  .product-title { 
    width: 90px !important;  
    white-space: normal !important; 
    font-size: 15px !important;
    font-family: 'PingFang SC', sans-serif !important;
    font-weight: bold !important;
    font-style: normal !important;
    line-height: 100% !important;
    letter-spacing: 0% !important;
  }
  
  .product-warranty { width: 100% !important; height: auto !important; margin: 6px 0 0 0 !important; font-size: clamp(12px, 3.8vw, 14px) !important; }
  .price-quantity-section { width: 100% !important; padding: 8px 0 !important; justify-content: space-between !important; }
  
  /* 移动端数量按钮和价格样式设置 */
  .quantity-btn { 
    width: 16px !important; 
    height: 15px !important; 
    font-size: 10px !important; 
    line-height: 1 !important; 
    padding: 0 !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
  }
  .quantity-value { 
    width: 5px !important; 
    height: 21px !important; 
    font-family: "PingFang SC" !important; 
    font-weight: blod !important; 
    font-style: normal !important; 
    font-size: 15px !important; 
    line-height: 100% !important; 
    letter-spacing: 0% !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    overflow: hidden !important; 
  }
  .product-price { 
    width: 48px !important; 
    height: 22px !important; 
    font-family: "PingFang SC" !important; 
    font-weight: blod  !important; 
    font-style: normal !important; 
    font-size: 16px !important; 
    line-height: 100% !important; 
    letter-spacing: 0% !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    overflow: hidden !important; 
  }
  

  /* 删除图标大小与位置还原，覆盖之前对 img 的通配缩放 */
  .product-info img[src*="clear.png"] { width: 24px !important; height: 24px !important; margin: 8px 0 0 auto !important; display: block !important; }

  /* 分隔线与固定宽度修正 */
  .product-info > div[style*="width: 632px"] { width: 100% !important; margin: 12px 0 !important; }
  .membership-benefits { width: 100% !important; height: auto !important; margin: 12px 0 0 0 !important; }
  .benefit-item, .service-item { width: 100% !important; }
  .benefit-title, .service-title { width: auto !important; margin-left: 0 !important; }
  .benefit-features { width: 100% !important; height: auto !important; margin: 8px 0 0 70px !important; }
  .service-info { margin: 0 !important; height: auto !important; }

  /* Orders */
  .container { padding: 20px var(--container-padding) !important; }
  .orders-list .order-card { width: 100% !important; height: auto !important; }
  .product-table-header { width: 100% !important; margin-left: 0 !important; }
  .product-item { grid-template-columns: 1fr 1fr !important; }
}

/* Member page (member.html) – 手机端专用覆盖，不影响PC */
@media (max-width: 768px) {
  .member-main { max-width: 100% !important; margin: 24px auto !important; padding: 32px 0 !important; border-radius: 12px !important; }
  .member-activate { max-width: 100% !important; padding: 32px 0 24px !important; }
  .member-activate h2 { font-size: clamp(22px, 7vw, 36px) !important; margin-bottom: 16px !important; }
  .member-activate input { width: min(100%, 320px) !important; height: 44px !important; font-size: 16px !important; }

  .member-section { max-width: 100% !important; padding: 24px 0 20px !important; height: auto !important; }
  .member-title { font-size: clamp(18px, 5.5vw, 24px) !important; margin: 0 0 16px 16px !important; }
  .member-card { margin: 0 16px !important; border-radius: 12px !important; }

  /* 表格在小屏上的可读性与不溢出 */
  .member-card-table { width: 100% !important; display: block !important; overflow-x: auto !important; border-collapse: separate !important; border-spacing: 0 !important; }
  .member-card-table th, .member-card-table td { padding: 12px 10px !important; font-size: 14px !important; white-space: nowrap; }
  .member-card-table .row-label, .member-card-table .row-value { width: auto !important; }
  /* 覆盖行内固定宽度/对齐 */
  .member-card-table th[style], .member-card-table td[style] { width: auto !important; text-align: left !important; padding-left: 10px !important; }
  .member-product { gap: 12px !important; }
  .member-product-img { width: 56px !important; height: 56px !important; }
  .member-product-info { width: auto !important; }
  .order-time-box { min-width: 160px !important; font-size: 1rem !important; }
  .member-renew-btn { padding: 10px 24px !important; font-size: 14px !important; }
}

@media (max-width: 480px) {
  .promo-content { flex-direction: column !important; gap: 16px !important; padding: 0 var(--container-padding) !important; height: 600px !important; max-height: 600px !important; }
  .promo-left, .promo-right { width: 100% !important; min-height: auto !important; }
  .promo-chart { height: auto !important; }
  
  /* 确保在极小屏幕上卡片不重叠 */
  .new-section-box {
    padding: 10px 16px 40px 16px !important;
    gap: 20px !important;
  }
  
  .small-item-box {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 162px !important;
    max-height: 162px !important;
    min-height: 162px !important;
    box-sizing: border-box !important;
  }
  
  /* 确保进步卡片内部文字对齐正确 */
  .progress-top {
    align-items: flex-start !important;
  }
  
  .progress-label {
    text-align: left !important;
  }
  
  .progress-value {
    justify-content: flex-start !important;
    align-items: baseline !important;
  }
  
  .progress-description {
    text-align: left !important;
  }
}



/* Mobile overrides for order-detail page only */
@media (max-width: 640px) {
  /* 移动端容器宽度限制为380px，覆盖所有内联样式 */
  .order-detail-container { 
    max-width: 380px !important; 
    width: 380px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* 覆盖页面内联的固定宽度 */
  .order-detail-container > div[style*="width: 810px"],
  .order-detail-container > div[style*="width: 848px"],
  .order-detail-container > div[style*="width: 809px"] { 
    width: 100% !important; 
    max-width: 100% !important;
  }

  /* 移动端按钮区域改为上下排列 */
  .order-detail-container div[style*="width: 211px"] {
    width: auto !important;
    height: auto !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-right: 0 !important;
  }

  .order-detail-container div[style*="width: 92px"] {
    width: 100% !important;
    height: 40px !important;
    justify-content: center !important;
  }

  /* 移除移动端order-detail-container的外边距并填满宽度 */
  .order-detail-container {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* 移动端取消订单按钮样式 */
  .order-detail-container .cancel-btn,
  .order-detail-container button.cancel-btn {
    width: 90px !important;
    height: 40px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
    background: #f8f9fa !important;
    color: #333 !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .order-detail-container .cancel-btn:hover {
    background: #e9ecef !important;
  }

    /* 移动端立即支付按钮样式 */
  .order-detail-container .payment-button-section button,
  .order-detail-container button[onclick*="goToPayment"] {
    width: 90px !important;
    height: 40px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    border-radius: 6px !important;
    border: none !important;
    background: #ff3838 !important;
    color: #ffffff !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .order-detail-container .payment-button-section button:hover {
    background: #e62e2e !important;
  }

  /* 显示并对齐移动端表头为三列，与数据列一致 */
  .order-detail-container .section-title-row { 
    display: grid !important; 
    grid-template-columns: minmax(0, 1fr) 72px 80px 90px !important; 
    column-gap: 12px !important; 
    align-items: center !important; 
    margin: 0 12px 12px 12px !important; 
  }
  .order-detail-container .section-title-row > div:first-child { margin-left: 0 !important; }
  .order-detail-container .product-headers { 
    grid-column: 2 / 5 !important; 
    display: grid !important; 
    grid-template-columns: 72px 80px 90px !important; 
    column-gap: 12px !important; 
    justify-items: center !important;
    align-items: center !important;
    height: auto !important;
  }

  /* 单行布局：左侧为图片+名称（上下排列），右侧为 数量/价格/小计 三列 */
  .order-detail-container .product-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px 80px 90px !important;
    grid-template-areas: "main qty price total" !important;
    column-gap: 12px !important;
    align-items: center !important;
    margin: 0 12px !important;
    height: 160px !important;
  }

  .order-detail-container .product-main { grid-area: main !important; display: grid !important; grid-template-columns: 1fr !important; row-gap: 6px !important; align-items: start !important; min-width: 0; }
  .order-detail-container .product-image { width: 56px !important; height: 80px !important; }
  .order-detail-container .product-details { margin: 0 !important; min-width: 0; }
  .order-detail-container .product-name,
  .order-detail-container .product-subtitle { white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; overflow: hidden !important; }

  .order-detail-container .product-quantity { grid-area: qty !important; text-align: center !important; justify-self: center !important; white-space: nowrap !important; font-size: 12px !important; }
  .order-detail-container .product-price { grid-area: price !important; text-align: center !important; justify-self: center !important; white-space: nowrap !important; font-size: 12px !important; }
  .order-detail-container .product-total { grid-area: total !important; text-align: center !important; justify-self: center !important; white-space: nowrap !important; font-size: 12px !important; }

  /* 移动端配送信息区域左对齐 */
  .order-detail-container .delivery-section {
    text-align: left !important;
    padding: 16px !important;
  }
  
  .order-detail-container .section-header {
    justify-content: flex-start !important;
  }
  
  .order-detail-container .section-title {
    text-align: left !important;
  }

  /* 配送信息标题左对齐 */
  .order-detail-container .delivery-section h2.section-title {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 覆盖所有内联样式 */
  .order-detail-container .delivery-section h2.section-title[style*="padding"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

  /* 移动端专用：强制标题居中 - 只针对移动端 */
  @media screen and (max-width: 768px) {
    /* 显示移动端底部购物车操作栏 */
    .cart-bottom-bar {
      display: flex !important;
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      z-index: 1000 !important;
      box-sizing: border-box !important;
    }
    
    /* 移动端显示产品价格框 */
    .product-price-box {
      display: block !important;
    }
    .twin-title, .twin-desc {
      text-align: center !important;
    }
    
    /* 增加移动端twin-desc的宽度 */
    .twin-desc {
      width: 100% !important;
      max-width: 100% !important;
    }
    
    /* 增加移动端twin-title的宽度 */
    .twin-title {
      width: 100% !important;
      max-width: 100% !important;
    }
    
    /* 设置移动端center-video-box和center-content的尺寸 */
    .center-video-box {
      width: 348px !important;
      height: 250px !important;
    }
    
    .center-content {
      width: 348px !important;
      height: 250px !important;
      object-fit: cover !important; /* 确保视频完全填充容器，消除灰色部分 */
    }
    
    /* 使用更强的选择器确保移动端居中 */
    div.twin-text-box div:first-child .twin-title,
    div.twin-text-box div:first-child .twin-desc {
      text-align: center !important;
    }
    
    /* 最强制性的选择器 */
    div.twin-row div.left-twin div.twin-text-box div:first-child div.twin-title,
    div.twin-row div.left-twin div.twin-text-box div:first-child div.twin-desc {
      text-align: center !important;
    }
    
    /* 覆盖内联样式中的padding-left，确保标题居中 */
    .twin-text-box [style*="padding: 151px"] {
      padding: 16px 0 !important; /* 移除左右padding，只保留上下padding */
      text-align: center !important;
    }
  }

/* 移动端只隐藏第一个卡片的进度值 */
@media (max-width: 768px) {
  .small-item-box:first-child .progress-old, 
  .small-item-box:first-child .progress-arrow, 
  .small-item-box:first-child .progress-new {
    display: none !important;
  }
  
  /* 移动端卡片头部高度 */
  .small-item-header {
    height: 42px !important;
    max-height: 42px !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
  }
  
  /* 移动端进度描述文字样式 */
  .progress-description {
    font-family: 'PingFang SC', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 12px !important;
    line-height: 100% !important;
    letter-spacing: 10% !important;
  }
}