/* =========================================================
   0) Font-face（原样保留）
   ========================================================= */
@font-face { font-family: InterRegular;  src: url(/build/fonts/Inter_18pt-Regular.37dcabff.ttf); }
@font-face { font-family: InterMedium;   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); }

/* =========================================================
   1) 设计令牌（不改变当前值，只集中管理）
   ========================================================= */
:root{
  /* 家族 */
  --ff-regular:   InterRegular;
  --ff-medium:    InterMedium;
  --ff-semibold:  InterSemiBold;
  --ff-bold:      InterBold;

  /* 颜色（如需） */
  --c-body-bg:    #F1F1F1;
  --c-text:       #000;
  --c-subtext:    #484848;

  /* 字体大小（桌面默认值：完全沿用你目前的） */
  --fs-dd-menu:         24px;                                      /* 下拉菜单行（.dropDownMenu） */
  --fs-sort-text:       22px;              /* #SortBy / #sortMenu */
  --fs-select-option:   14px;                                      /* <option> */
  --fs-type-title:      26px;                                      /* .type-title */
  --fs-type-title-1390:      26px;                                      /* .type-title */
  --fs-type-title-960:      24px;                                      /* .type-title */
  --fs-type-title-768:      22px;                                      /* .type-title */
  --fs-product-title:   18px;              /* .productTitle 基准 */
  --fs-product-title-1390: 18px;                                   /* <=1390 时 */
  --fs-product-title-960:  18px;                                   /* <=960  时 */
  --fs-product-title-768:  16px;                                   /* <=768  时 */
  --fs-price:            16px;                                     /* .productPrice 基准 */
  --fs-price-960:        14px;                                     /* <=960 */
  --fs-price-768:        14px;                                     /* <=768 */

  /* 你页面其它通用字号若后续需要，也可在此扩展 */
}

/* =========================================================
   2) Base（桌面/默认样式 + 为兼容保留的 1390/960/768 断点）
   ========================================================= */
body{
  margin: 0px;
  padding: 0px;
  background-color: #F1F1F1;
    font-family: InterRegular;
    font-size: 1rem;
    cursor: default;

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


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




/* —— 下拉菜单区域 —— */
.dropDownArea{
  width: 80vw;
  height: 16vh;
  display: flex;
  flex-direction: column-reverse;
}
.dropDownMenu{
  height: 30px;
  color: var(--c-subtext);
  font-family: var(--ff-medium);
  font-size: var(--fs-dd-menu);
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
}
#SortBy{
  font-family: var(--ff-regular) !important;
  font-size: var(--fs-product-title);
  padding-left:10px;
}
#sortMenu{
  border: none;
  /* margin-left: 10px; */
  width:min-content;
  background-color: var(--c-body-bg);
  color: var(--c-subtext);
  font-family: var(--ff-regular) !important;
  font-size: var(--fs-product-title);
}
select option{ font-size: var(--fs-select-option); }

/* —— 商品区域 —— */
.productArea{
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  width: 80vw;
}

.type-group{ margin-bottom: 30px; }

.type-title{
  font-family: var(--ff-semibold);
  font-size: var(--fs-type-title);
  margin-left: 10px;
  margin-bottom: 10px;
}

.product-grid{
  display: grid;
  grid-gap: 10px;
  row-gap: 40px;
  grid-template-columns: repeat(4, 1fr);
}
.product-card{
  position: relative;
  padding: 10px;
  background-color: #f1f1f100;
  transition: opacity 200ms ease-in, transform 200ms ease-in;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(10px);
}
.product-card.animate{ opacity: 1; transform: translateY(0); }
.product-card::before{
  content:"";
  position:absolute; inset:0;
  background-color: inherit;
  z-index:-1;
  transition:150ms ease-in;
  filter: drop-shadow(0 0 4px #e2e2e2);
  border-radius:10px;
}
.product-card:hover{ transform: scale(1.008); border-radius:10px; }
.product-card:hover::before{ filter: drop-shadow(0 0 6px #d7d7d7); border-radius:10px; }

.upperArea{  max-height:500px; width:100%; position:relative; }
*{ border: none !important; }

.tagBox:empty{ display:none; }
.tagBox{
   width:110px; height:30px; border-radius:15px;
  position:absolute; left:10px; bottom:16px; padding:0;
  font-family: var(--ff-semibold);
}
.Tag{ display:flex; align-items:center; justify-content:center; }

/* 标签色系 */
.tag--new{
  width:120px; height:30px; border-radius:15px; padding:0; margin:0;
  background-color:#0ad285; color:#fff;
}
.tag--bestseller{
  width:110px; height:30px; border-radius:15px; padding:0; margin:0;
  background-color:#5BC3F2; color:#fff;
}

.thumbnail-img,
.hover-img{
  max-height:480px; width:100%;
  border-radius:10px; object-fit:cover;
  filter: drop-shadow(0 0 0 #fff);
}

.lowerArea{ margin-top:10px;  max-height:100px; width:100%; }

/* 商品标题与价格（默认值来自变量） */
.productTitle{
  font-family: var(--ff-semibold);
  font-size: var(--fs-product-title);
  display:flex; align-items:start;
  min-height:40px;
}
.productPrice{
  margin-top:6px;
  font-family: var(--ff-semibold);
  font-size: var(--fs-price);


}

/* 链接卡片 */
.product-card-link{ display:block; text-decoration:none; color:inherit; }

/* —— 保留原断点以保证完全兼容 —— */
@media (max-width: 1390px){
  .product-grid{ grid-template-columns: repeat(3,1fr); }
  .productTitle{ min-height:40px; font-size: var(--fs-product-title-1390); }

}
@media (max-width: 960px){
  .productArea{ width:90vw; margin-top:10px; }
  .product-grid{ grid-template-columns: repeat(2,1fr); }
  .product-grid{ grid-gap:8px; row-gap:40px; }
  .productTitle{ font-size: var(--fs-product-title-960); min-height:30px; }
  .productPrice{ font-size: var(--fs-price-960); }
  .type-title{
  font-size: var(--fs-type-title-768);
  }
}
@media (max-width: 750px){
  .product-grid{ row-gap:20px; }
  .tag--new{ width:100px; height:25px; font-size:13px; }
  .productTitle{ font-size: var(--fs-product-title-768); min-height:30px; }
  .productPrice{ font-size: var(--fs-price-768); margin-top:6px; }
  .type-title{
  font-size: var(--fs-type-title-768);
  }
}
 
/* =========================================================
   3) ≤1190px（这一段只放确实在 1190 内需要的覆盖）
   —— 不改动原有 1390/960/768 行为，避免破坏兼容
   ========================================================= */
@media (max-width: 1190px){
  .OrderHistoryArea{ width:100%; }          /* 你原有 */
  .tagBox{ width:100px; height:25px; bottom:20px; }
  .dropDownArea{ width: 86vw; height: 12vh; } /* 你原有在 960 内的设置也继续保留 */
    #SortBy{
    padding-left:0px ;
    

  }
}

/* =========================================================
   4) ≤750px（移动窄屏特化）
   ========================================================= */
@media (max-width: 750px){
  .dropDownMenu{ width:80vw; } /* 你原来 750 的规则保持 */
  #SortBy{
    font-family: var(--ff-regular) !important;
    font-size: 1.125rem !important;
    padding-left:0px ;


  }
  #sortMenu{
    margin-left: 10px;
    background-color: var(--c-body-bg);
    color: var(--c-subtext);
    font-family: var(--ff-regular) !important;
    font-size: 1.125rem !important;
  }
  option{font-size: 1.125rem !important; }
}