@font-face {
    font-family: InterRegular;
    src: url(/build/fonts/Inter_18pt-Regular.37dcabff.ttf);
}

@font-face {
    font-family: InterMeduim;
    src: url(/build/fonts/Inter_18pt-Medium.8540f35b.ttf);
}

@font-face {
    font-family: InterBold;
    src: url(/build/fonts/Inter_18pt-Bold.7ef6f6d6.ttf);
}

@font-face {
    font-family: InterSemiBold;
    src: url(/build/fonts/Inter_18pt-SemiBold.e5532d99.ttf);
}

@font-face {
    font-family: InterLight;
    src: url(/build/fonts/Inter_18pt-Light.dfaec8b8.ttf);
}

@font-face {
    font-family: RubikBold;
    src: url(/build/fonts/Rubik-Bold.627d0e53.ttf);
}

@font-face {
    font-family: RubikMediun;
    src: url(/build/fonts/Rubik-Medium.e785acbf.ttf);
}

@font-face {
    font-family: RubikSemiBold;
    src: url(/build/fonts/Rubik-SemiBold.742cf1e6.ttf);
}

@font-face {
    font-family: RubikLight;
    src: url(/build/fonts/Rubik-Light.86699cab.ttf);
}

@font-face {
    font-family: RubikRegular;
    src: url(/build/fonts/Rubik-Regular.46df2880.ttf);
}

body{
  margin: 0px;
  padding: 0px;
  background-color: #F1F1F1;
    font-family: InterRegular;
    font-size: 1rem;
    cursor: default;

  overflow-x: hidden;
  color: var(--c-text);
}

.mainContainer{
  width: 100vw;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mainArea{
    height:auto;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 背景蓝色圆形 1（位置不变，只把 absolute 改成 fixed） */
body::before{
  content:"";
  position: fixed;            /* ← 改为 fixed */
  top: 46%;
  right: 10%;
  transform: translateY(-50%);
  width: 32vw;
  height: 32vw;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(7, 48, 167, 0.7) 0%,
    rgba(58, 123, 213, 0) 80%
  );
  filter: blur(100px);
  z-index: -1;
  pointer-events: none;
}

/* 背景蓝色圆形 2（位置不变，只把 absolute 改成 fixed） */
body::after{
  content:"";
  position: fixed;            /* ← 改为 fixed */
  top: 80%;
  right: 76%;
  transform: translateY(-50%);
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(7, 48, 167, 0.7) 0%,
    rgba(58, 123, 213, 0) 80%
  );
  filter: blur(100px);
  z-index: -1;
  pointer-events: none;
}

.TitleArea{
    border-bottom: 1px solid #9b9b9b8b !important;
    padding-bottom: 16px;
    width: 66vw;

    height: 100px;
    font-family: InterSemiBold;
    font-size: 34px;
    align-content:end;
    margin-top: 4vh;

    @media (max-width: 1190px) {
        width: 80vw;
        font-size: 32px;
        margin-top: 1vh;
        height: 80px;


    }
    @media (max-width: 750px) {
        width: 90vw;
        margin-top: 0vh;
        font-size: 28px;
        height: 70px;

    }
}

/* 固定宽度，少于宽屏改为纵列式排布 */
.DetailArea{
    margin-top: 24px;
    width: 66vw;
    
    height: max-content;
  min-height: 60vh;
    display: flex;
    justify-content: space-between;    

    @media (max-width: 1190px) {
        flex-direction: column;
        width: 80vw;
        
    }


    @media (max-width: 750px) {
        width: 90vw;


    }
}

.tpl-sBProductCard{
    border: 1px solid black;
   
    
}

.ProductArea{
    width: 70%;
    margin-right: 40px;
    
    @media (max-width: 1190px) {
        width: 100%;
        margin-right: 0px;

    }

    @media (max-width: 750px) {


    }
}
.empty-msg{
    display:none;
    font-size:clamp(0.875rem, 1.5vw, 1rem);
    font-family: InterRegular;

}
.ProductBox{
  min-width: 500px;
  width: 100%;
  height: 154px;

  /* 毛玻璃 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.629);

  border-radius: 5px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 16px;
  margin-bottom: 16px;
  justify-content: space-between;
}

@media (max-width: 1190px){
  /* 当前无特别需求，留空即可 */
}

@media (max-width: 750px){
  .ProductBox{
    margin-bottom: 10px;

    /* 不再改成 column；保持 row + 允许换行 */
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 30vw;
    height: auto;
    align-items: flex-start;      /* 顶对齐更自然 */
  }
}

/* ---------------- 图片 ---------------- */
.ProductImageSmall{
  width: 122px;
  height: 122px;
  border-radius: 6px;
  margin-right: 16px;
  flex-shrink: 0;                /* 桌面端不被压缩 */
}

@media (max-width: 750px){
  .ProductImageSmall{
    /* 占第一行左侧固定宽度 */
    height: auto;
    margin-right: 0;
    flex: 0 0 24%;
  }
}

.ProductImg{
  width: 122px;
  height: 122px;
}

@media (max-width: 750px){
  .ProductImg{
    width: 100%;
    height: auto;

  }
}

/* ---------------- 信息 ---------------- */
.ProductInfo{
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
  width: 700px;
}

@media (max-width: 750px){
  .ProductInfo{
    /* 占第一行右侧，随宽度自适应 */
    width: auto;
    height: auto;
    margin: 0;
    min-width: 0;               /* 防止内容把行撑爆 */
    align-items: start;
    margin-top: 10px;
  }
}

.ProductTitle{
  font-family: InterSemiBold;
  font-size: 20px;
  @media (max-width: 750px){
    margin-bottom: 4px;
    font-size: 18px;

  }
}
.ProductSize{
  font-family: InterRegular;
  font-size: 14px;
    @media (max-width: 750px){
    margin-bottom: 4px;
  }
}
.ProductPrice{
  font-family: InterSemiBold;
  font-size: 16px;
    @media (max-width: 750px){
    font-size: 14px;
  }
}

/* ---------------- QTP（数量/小计/删除） ---------------- */
.ProductQTP{
  margin: 10px 0;
  width: 190px;
  margin-left: 16px;
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: space-between;
}

@media (max-width: 1190px){
  /* 留空，兼容上层逻辑 */
}

@media (max-width: 750px){
  .ProductQTP{
    /* 独占第二行 */
    order: 3;                 /* 明确排在最后一块 */
    flex: 0 0 100%;
    width: 100%;
    margin-top: 12px;
    align-items: start;      /* 第二行横向布局时垂直居中 */
    justify-content: space-between;
    margin-left: 0px;

  }
}


/* 面板本身 */
.QuantityPanel{
  display: flex;
}

/* 注意：@media 必须单独写，不要嵌在 .QuantityPanel 里 */
@media (max-width: 750px){
  .QuantityPanel { margin-bottom: 4px;}
}

/* 容器 */
.QuantityOptions{
  height: 40px;
  width: 160px;              /* 如需更保险，可用 min-width 改为自适应 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;                  /* 用 gap 代替子项 margin */
  background: #fff;
  border: 1px solid rgb(167,167,167) !important;
  border-radius: 4px;
  overflow: hidden;          /* 裁掉可能的1px溢出 */
}

/* 按钮：清空 iOS 默认外观、边框、内边距 */
.quantity-button {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 40px;
  height: 40px;
  width: 40px;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}
.quantity-button:active {    /* iOS 对 :hover 不友好，用 :active 更实用 */
  background: #a2a2a2;
}

/* 数字输入：同样清空默认外观与内外边距 */
#quantityInput {
  -webkit-appearance: textfield;
  appearance: textfield;
  width: 60px;
  min-width: 0;             /* 防止 iOS 设定的最小内容宽度把布局撑开 */
  text-align: center; 
  font-size: 18px;
  padding: 0;
  margin: 0;                /* 原来是 0 5px，改用 gap 了 */
  border: none;
  background: transparent;
  outline: none;
}
#quantityInput::-webkit-inner-spin-button,
#quantityInput::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.remove{
     all: unset;
  /* 让它还是个按钮，可以点击聚焦 */
  cursor: pointer;
  /* 可选：让它能像按钮一样获得焦点 */
  display: inline-block;
  /* 可选：加上 tab 键聚焦时的 outline */
  outline: revert;
  text-decoration: underline;
      @media (max-width: 750px){
    font-size: 14px;
  }
}



.largeSloganSlideIn{
    opacity: 0;
    transform: translateY(16px);
    transition: ease-out 500ms;

}

.largeSloganSlideIn.active{
    opacity: 1;
    transform: translateY(0);
    transition: ease-out 00ms;
  
}



.TotalArea{
    background-color: #ffffffa9;
    max-width: 364px;
    width: 30%;
    min-height: 220px;
    height: auto;           /* 覆盖可能的 height:100% */
    align-self: flex-start; /* 关键：覆盖 stretch */
    flex: 0 0 auto;         /* 防止在主轴上被撑大（有写过 flex:1 时尤其重要） */
    padding-bottom: 20px;
    border-radius: 5px;

      /*毛玻璃*/
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);   /* iOS / 旧 Chrome */
    background-color: rgba(255, 255, 255, 0.629); /* 一点乳白底，数值可调 */
    
    @media (max-width: 1190px) {
        width: 100%;
        margin-top: 20px;

    }

    @media (max-width: 750px) {
        max-width: none;
      

    }
}

.TotalBox{
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 30px;

    @media (max-width: 750px) {
        margin-left: 16px;
        margin-right: 16px;
    }
    

}
.EstimatedTotal{
    font-family: InterSemiBold;
    font-size: 24px;
}

.TotalPrice{
   font-family: InterSemiBold;
    font-size: 18px;
    margin-top: 10px;
}

.TotalLine{
    height: 1px;
    background: #a6a6a6;
    margin-top: 14px;

}

.Note{
    font-family: InterRegular;
    font-size: 14px;
}

/* .BtnBox{
    @media (max-width: 1190px) {
      display: flex;
      justify-content: center;
    }
} */

.CheckOutBtn{
  margin-top:20px;

  max-width: 300px;
  width: 100%;
  height: 50px;

  border-radius: 26px;

  /* 背景 & 文本 */
  font-family: InterRegular;
  background-color: #000;
  color: #fff;
  font-size: 18px;
  line-height: 40px;  /* 垂直居中文本 */

  /* 交互 */
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;

  filter: drop-shadow(0px 0px 5px #b1b1b1);
}

*{
      border: none !important;
}