/* module.html 配置覆盖文件
 * 约束：仅维护可配置的颜色与属性变量，不放结构性样式。
 * 使用方式：在 public.css 等基础样式之后引入。
 */

 :root {
    /* 背景配置 */
    --bg-img: url("https://resource.xp-pen.com/img/active_list/Anniversary21th/bg1.jpg");
    /* --bg-img2: url("https://resource.xp-pen.com/img/active_list/Anniversary21th/bg2.jpg"); */
    --bg-img2: url("https://resource.xp-pen.com/img/active_list/DoubleTeenPromotion/bg.jpg");
    --bg-color: #fff;
  
    /* 主色板 */
    --color-white: #fff;
    --color-black: #000000;
    --color-dark: #212121;
    --color-red: #cc1f1f;
    --color-light-gray: #f2f4fb;
  
    /* Banner 文案配色 */
    --color-text1: #FFFFFF;
    --color-textH1: #FFFFFF;
    --color-textH1-span: #010102;
    --color-textH2: #DB052B;
    --color-textH2-bg: #FCFFFB;
  
    /* 导航色 */
    --color-navbg: #C33A05;
    --nav-active-bg: #E54F15;
    --nav-text: #FCFFFB;
    --nav-active-color: #FCFFFB;
  
    /* 倒计时色 */
    --coutdown-title: #FAFAFA;
    --coutdown-number: #C33A05;
    --coutdown-number-bg: #FEDF73;
  
    /* 优惠券色 */
    --coupon-title: #000;
    --color-coupon: #FEEABF;
    --coupon-p1: #fff;
    --coupon-p2: #fff;
    --coupon-p3: #0C0D0D;
    --coupon-p3-bg: #FFFFFF;
    --coupon-bd: #DCEBF9;
    --coupon-img-display: block;
  
    /* 商品区与按钮色 */
    --NY-title: #000;
    --sell-text: #000;
    --buy-btn: #000000;
    --buy-btn-hover: #F02D2B;
    --more-btn: #0E0E0E;
    --more-btn-text: #FCC827;
    --more-btn-border: #000000;
  
    /* 其他可配置属性 */
    --free-title: #000;
    --title-bg: #FDEFE4;
    --title-transform: translate(-50%, -20%);
  }
  
  #module .banner-info-item-bg{
      text-align: center;
  }
  
    #module .Wb_textH1{
      font-weight: 600;
    }
  #module .Wb_text1, #module .Wb_text2{
    font-size: var(--font-size-xxxl);
  }
  
  @media screen and (min-width: 481px) {
    #module .Wb_text1, #module .Wb_text2{
      font-size: var(--font-size-30);
      text-align: left;
    }
    #module .Wb_textH1{
      font-size: var(--spacing-6xl);
      text-align: left;
    }
    #module .banner-info-item-bg{
      /* margin: var(--spacing-60) 0 var(--spacing-36); */
      text-align: left;
    }
  }
  
  @media screen and (max-width: 1460px) {
    :root{
      --spacing-6xl: 3vw;
    }
    #module .banner-info-item-bg{
      margin:var(--spacing-36) 0;
    }
  }
  
  #module .Wb_textH2{
    background: #FCFFFB;
    border-radius: 2.3438vw;
    font-size: 0.9375vw;
    color: #DB052B;
    font-family: Gilroy;
    font-weight: bold;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    padding: 0.3125vw 1.875vw;
    line-height: 1.2;
  }
  
  #module .Wb_textH2::after{
    display: none;
  }

  #module .Wb_textH2 .Wb_textH2_p1{
    font-size: 1.7969vw;
    font-weight: bold;
    color: #DB052B;
    font-family: Gilroy;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    vertical-align: sub;
    margin-left: .7813vw;
  }
  
  #module .module_nav .nav-list{
    color: var(--nav-text);
  }
  
  #module .NY_big .NY_big_tag{
    font-weight: bold;
  }

  /* Pilot Pro / XL：左产品图右文案，卖点每条一行 */
  #module .NY_big .NY_big_p {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    text-align: left;
    white-space: normal;
    margin-bottom: var(--spacing-md);
  }
  
  
  #module .NY_More a{
    border: .1563vw solid #000000;
    border-radius: var(--border-radius-sm);
    color: var(--more-btn-text);
  }
  
  #module .Wb_textH2 span{
    font-size: inherit;
    font-weight: bold;
    color: #DB052B;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
  }
  
  @media screen and (max-width: 1460px){
    #module .Wb_textH2{
      font-size: 1.64vw;
      border-radius: 4.11vw;
      padding: 0.82vw 3.29vw;
    }
    #module .Wb_textH2 .Wb_textH2_p1{
      font-size: 3.15vw;
      margin-left: .7813vw;
    }
  }
  
  @media screen and (max-width: 480px) {
    #module .module_banner .module_banner_text .Wb_textH2{
      font-size: 3.2vw;
      border-radius: 8vw;
      padding: 2vw 6.4vw;
    }
    #module .module_banner .module_banner_text .Wb_textH2 .Wb_textH2_p1{
      font-size: 6.133vw;
    }
    #module .Wb_text1, #module .Wb_text2{
      font-size: var(--font-size-banner);
    }
  }
  
  
  #module .module_coupon .module_coupon_item::before, #module .module_coupon .module_coupon_item::after{
    display: none;
  }
  
  #module .module_coupon .module_coupon_item{
    border: none;
    border-radius: 0;
    padding: 0;
    background: none;
  }
  
  #module .module_bg_2{
    background: var(--bg-img2);
  }
  
  /* 优惠券轮播：一排一张 */
  #module .swiper-coupon{
    width: 100%;
    margin-top: var(--spacing-60);
    overflow: hidden;
    box-sizing: border-box;
  }
  #module .swiper-coupon .swiper-slide img{
    width: 100%;
    height: auto;
  }
  #module .swiper-coupon .swiper-pagination-coupon{
    bottom: 0;
  }
  #module .swiper-coupon .swiper-pagination-bullet{
    background: #cfcfcf;
    opacity: 1;
  }
  #module .swiper-coupon .swiper-pagination-bullet-active{
    background: #fff;
    box-shadow: 0 0 0 1px #333;
  }
  @media screen and (max-width: 480px){
    #module .swiper-coupon{
      margin: 0 0 20px;
    }
  }
  
  /* 市场部活动：左侧对齐 module_inner，右侧铺满 */
  #module .swiper-activity{
    --activity-content-width: 54.688vw;
    width: calc(50% + var(--activity-content-width) / 2);
    margin: 0 0 40px calc(50% - var(--activity-content-width) / 2);
    padding-bottom: 36px;
    overflow: hidden;
    box-sizing: border-box;
  }
  #module .swiper-activity .swiper-slide a{
    display: block;
  }
  #module .swiper-activity .swiper-slide img{
    width: 100%;
    height: auto;
    border: 1px solid #fff;
    box-sizing: border-box;
  }
  #module .swiper-activity .swiper-pagination-activity{
    bottom: 0;
  }
  #module .swiper-activity .swiper-pagination-bullet{
    background: #cfcfcf;
    opacity: 1;
  }
  #module .swiper-activity .swiper-pagination-bullet-active{
    background: #fff;
    box-shadow: 0 0 0 1px #333;
  }
  @media screen and (max-width: 1460px){
    #module .swiper-activity{
      --activity-content-width: min(98%, 95.89vw);
    }
  }
  @media screen and (max-width: 1024px){
    #module .swiper-activity{
      --activity-content-width: 95%;
    }
  }
  @media screen and (max-width: 480px){
    #module .swiper-activity{
      width: 100%;
      margin: 0 0 24px;
      --activity-content-width: 100%;
    }
  }
  
  /* Tab 切换：胶囊按钮 + 面板显隐 */
  #module .tab-group{
    width: 100%;
    margin: 20px 0 10px;
  }
  #module .tab-buttons{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 20px;
    margin-bottom: 24px;
  }
  #module .tab-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 28px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px dashed #000;
    background: transparent;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  #module .tab-button.active{
    background: #000;
    color: #fff;
    border-style: solid;
    border-color: #000;
  }
  #module .tab-panels .tab-content{
    display: none;
  }
  #module .tab-panels .tab-content.active{
    display: block;
  }
  @media screen and (max-width: 480px){
    #module .tab-buttons{
      gap: 10px 12px;
    }
    #module .tab-button{
      min-height: 36px;
      padding: 6px 16px;
      font-size: 13px;
    }
  }