:root{

  --bg:#f5f5f3;

  --panel:#ffffff;

  --text:#111111;

  --muted:#888888;

  --line:#eeeeec;

  --gold:#f2c33d;

  --nav-h:82px;

}


*{

  box-sizing:border-box;

}


html,
body{

  margin:0;

  padding:0;

  width:100%;

  background:var(--bg);

  color:var(--text);

  font-family:
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  "PingFang SC",
  "Microsoft YaHei",
  sans-serif;

}


body{

  min-height:100vh;

}


button,
input{

  font:inherit;

}


button{

  border:0;

  background:none;

  cursor:pointer;

  color:inherit;

}


img{

  max-width:100%;

}


/* =========================
   页面结构
========================= */

.app-shell{

  min-height:100vh;

  padding-bottom:
  calc(
    var(--nav-h) +
    env(safe-area-inset-bottom)
  );

}


#app{

  min-height:
  calc(
    100vh -
    var(--nav-h)
  );

}


/* =========================
   底部导航
========================= */

.bottom-nav{

  position:fixed;

  z-index:100;

  left:0;

  right:0;

  bottom:0;

  height:
  calc(
    var(--nav-h) +
    env(safe-area-inset-bottom)
  );

  padding-bottom:
  env(safe-area-inset-bottom);

  display:grid;

  grid-template-columns:
  repeat(4,1fr);

  background:
  rgba(
    255,
    255,
    255,
    .98
  );

  border-top:
  1px solid
  var(--line);

}


.nav-item{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:17px;

  color:#999;

}


.nav-item.active{

  color:#111;

  font-weight:600;

}


.nav-item.active::after{

  content:"";

  position:absolute;

  left:50%;

  bottom:12px;

  transform:
  translateX(-50%);

  width:34px;

  height:3px;

  border-radius:3px;

  background:#111;

}


/* =========================
   首页
========================= */

.home-page{

  position:relative;

  min-height:
  calc(
    100vh -
    var(--nav-h)
  );

  overflow:hidden;

  background:#111;

}


.home-media{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center;

  background:#111;

}


.home-overlay{

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    180deg,
    rgba(0,0,0,.05),
    rgba(0,0,0,.44)
  );

}


.home-content{

  position:relative;

  z-index:2;

  min-height:
  calc(
    100vh -
    var(--nav-h)
  );

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:flex-end;

  padding:
  0 24px 11vh;

  color:#fff;

  text-align:center;

}


.home-kicker{

  margin-bottom:18px;

  font-size:14px;

  letter-spacing:.3em;

}


.home-title{

  font-size:
  clamp(
    38px,
    7vw,
    74px
  );

  font-weight:700;

  line-height:1.08;

}


.home-sub{

  margin-top:22px;

  font-size:
  clamp(
    16px,
    2vw,
    24px
  );

  letter-spacing:.24em;

}


.primary-btn{

  min-width:210px;

  margin-top:48px;

  padding:
  15px 42px;

  border:
  1.5px solid
  rgba(255,255,255,.95);

  border-radius:999px;

  color:#fff;

  font-size:18px;

}


/* =========================
   产品页顶部
========================= */

.page-header{

  padding:
  24px 22px 18px;

  background:#fff;

  border-bottom:
  1px solid
  var(--line);

}


.page-title{

  text-align:center;

  font-size:28px;

  font-weight:700;

}


.search-box{

  height:52px;

  margin-top:18px;

  padding:
  0 18px;

  display:flex;

  align-items:center;

  border-radius:999px;

  background:#f1f1f1;

}


.search-box input{

  width:100%;

  border:0;

  outline:0;

  background:transparent;

  font-size:16px;

}


.filters{

  display:grid;

  grid-template-columns:
  1fr 1fr;

  background:#fff;

  border-bottom:
  1px solid
  var(--line);

}


.filter-btn{

  position:relative;

  height:58px;

  font-size:18px;

}


.filter-btn.active{

  font-weight:700;

}


.filter-btn.active::after{

  content:"";

  position:absolute;

  left:25%;

  right:25%;

  bottom:0;

  height:2px;

  background:#111;

}


/* =========================
   产品主体
========================= */

.products-layout{

  display:grid;

  grid-template-columns:
  160px minmax(0,1fr);

  width:100%;

  min-height:
  calc(
    100vh -
    var(--nav-h) -
    170px
  );

}


.series-sidebar{

  width:160px;

  min-width:160px;

  background:#fff;

  border-right:
  1px solid
  var(--line);

}


.series-item{

  width:100%;

  min-height:70px;

  padding:
  18px 8px;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  line-height:1.4;

  font-size:15px;

  color:#666;

}


.series-item.active{

  background:#111;

  color:#fff;

  font-weight:700;

}


.product-content{

  width:100%;

  min-width:0;

  padding:14px;

}


.active-filters{

  display:flex;

  flex-wrap:wrap;

  gap:8px;

  margin-bottom:12px;

}


.filter-chip{

  padding:
  7px 10px;

  border:
  1px solid #ddd;

  border-radius:999px;

  background:#fff;

  font-size:12px;

  color:#555;

}


/* =========================
   产品卡片
========================= */

.product-grid{

  display:grid;

  grid-template-columns:
  repeat(
    2,
    minmax(0,1fr)
  );

  gap:18px;

}


.product-card{

  width:100%;

  overflow:hidden;

  border-radius:16px;

  background:#fff;

  box-shadow:
  0 2px 12px
  rgba(0,0,0,.035);

}


.product-card img{

  width:100%;

  aspect-ratio:
  16/10;

  object-fit:cover;

  display:block;

  background:#eee;

}


.no-image{

  width:100%;

  aspect-ratio:
  16/10;

  display:flex;

  align-items:center;

  justify-content:center;

  background:#f0f0f0;

  color:#aaa;

}


.product-meta{

  padding:
  16px 18px 20px;

}


.product-name{

  font-size:20px;

  line-height:1.35;

  font-weight:700;

}


.product-model{

  margin-top:6px;

  font-size:14px;

  color:#555;

}


.product-sub{

  margin-top:10px;

  font-size:14px;

  color:#888;

}


.product-brand{

  margin-top:6px;

  font-size:14px;

  color:#999;

}


.empty{

  padding:
  80px 20px;

  text-align:center;

  color:#aaa;

}


/* =========================
   筛选弹层
========================= */

.sheet-mask{

  position:fixed;

  z-index:500;

  inset:0;

  display:flex;

  align-items:flex-end;

  background:
  rgba(0,0,0,.3);

}


.sheet{

  width:100%;

  max-height:70vh;

  padding:
  22px 20px
  calc(
    22px +
    env(safe-area-inset-bottom)
  );

  overflow:auto;

  border-radius:
  24px 24px 0 0;

  background:#fff;

}


.sheet-title{

  margin-bottom:16px;

  font-size:19px;

  font-weight:700;

}


.sheet-options{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

}


.sheet-option{

  padding:
  10px 16px;

  border:
  1px solid #ddd;

  border-radius:999px;

  font-size:15px;

}


.sheet-option.active{

  background:#111;

  border-color:#111;

  color:#fff;

}


/* =========================
   产品详情
========================= */

.detail-page{

  min-height:100vh;

  padding-bottom:20px;

  background:#f5f5f3;

}


.detail-hero{

  background:#eee;

}


.detail-hero img{

  width:100%;

  max-height:75vh;

  object-fit:cover;

  display:block;

}


.no-detail-image{

  min-height:360px;

  display:flex;

  align-items:center;

  justify-content:center;

  color:#aaa;

}


.detail-head{

  position:relative;

  padding:
  26px 100px 26px 24px;

  background:#fff;

}


.detail-name{

  font-size:30px;

  line-height:1.3;

  font-weight:700;

}


.detail-model{

  margin-top:8px;

  font-size:16px;

  color:#555;

}


.detail-size{

  margin-top:12px;

  font-size:16px;

  color:#555;

}


.detail-sub{

  margin-top:12px;

  color:#777;

}


.heart-btn{

  position:absolute;

  right:24px;

  top:28px;

  width:46px;

  height:46px;

  display:flex;

  align-items:center;

  justify-content:center;

  border:
  1px solid #eee;

  border-radius:50%;

  color:#e1ae1c;

  font-size:24px;

}


.detail-card{

  margin:16px;

  padding:22px;

  border-radius:20px;

  background:#fff;

}


.detail-card h3{

  margin:
  0 0 18px;

  font-size:20px;

}


.property-row{

  display:grid;

  grid-template-columns:
  110px 1fr;

  padding:
  10px 0;

  font-size:15px;

}


.property-row
span:first-child{

  color:#999;

}


.detail-long{

  margin-top:16px;

  padding:
  24px 16px;

  background:#fff;

}


.detail-long .en{

  font-size:12px;

  letter-spacing:.18em;

  color:#aaa;

}


.detail-long h3{

  margin:
  6px 0 18px;

}


.detail-long img{

  width:100%;

  display:block;

}


.detail-actions{

  display:flex;

  gap:12px;

  margin:
  18px 16px;

}


.secondary,
.accent{

  flex:1;

  padding:
  14px 18px;

  border-radius:999px;

  text-align:center;

  font-size:16px;

}


.secondary{

  background:#eee;

}


.accent{

  background:var(--gold);

}


/* =========================
   品牌页
========================= */

.brand-image-page{

  width:100%;

  min-height:100vh;

  background:#fff;

}


.brand-video-wrap{

  position:relative;

  width:100%;

  height:72vh;

  min-height:520px;

  overflow:hidden;

  background:#111;

}


.brand-video{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;

}


.brand-video-mask{

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    180deg,
    rgba(0,0,0,.06),
    rgba(0,0,0,.42)
  );

}


.brand-video-text{

  position:absolute;

  left:0;

  right:0;

  bottom:11%;

  padding:
  0 24px;

  text-align:center;

  color:#fff;

}


.brand-video-kicker{

  font-size:13px;

  letter-spacing:.28em;

}


.brand-video-title{

  margin-top:18px;

  font-size:
  clamp(
    42px,
    6vw,
    72px
  );

  line-height:1.1;

  font-weight:700;

}


.brand-video-sub{

  margin-top:18px;

  font-size:
  clamp(
    18px,
    2vw,
    26px
  );

  letter-spacing:.18em;

}


.brand-full-image{

  width:100%;

  height:auto;

  display:block;

}


/* =========================
   我的
========================= */

.mine-page{

  padding:
  28px 18px;

}


.mine-title{

  margin-bottom:18px;

  font-size:30px;

  font-weight:700;

}


.mine-card{

  margin-bottom:16px;

  padding:22px;

  border-radius:20px;

  background:#fff;

}


.mine-card h3{

  margin:
  0 0 14px;

}


.favorite-grid{

  display:grid;

  grid-template-columns:
  repeat(
    2,
    minmax(0,1fr)
  );

  gap:12px;

}


.favorite-item img{

  width:100%;

  aspect-ratio:
  1.2/1;

  object-fit:cover;

  display:block;

  border-radius:12px;

  background:#eee;

}


.favorite-item .m{

  margin-top:8px;

  font-weight:700;

}


.simple-list{

  display:flex;

  flex-direction:column;

  gap:10px;

}


.simple-list div{

  padding:14px;

  border-radius:12px;

  background:#fafafa;

  color:#666;

}


/* =========================
   手机端
========================= */

@media screen and
(max-width:899px){

  :root{

    --nav-h:72px;

  }


  .bottom-nav{

    height:
    calc(
      72px +
      env(safe-area-inset-bottom)
    );

  }


  .nav-item{

    font-size:16px;

  }


  .page-header{

    padding:
    20px 20px 16px;

  }


  .page-title{

    font-size:26px;

  }


  .search-box{

    height:50px;

  }


  .products-layout{

    grid-template-columns:
    160px minmax(0,1fr);

  }


  .series-sidebar{

    width:160px;

    min-width:160px;

  }


  .series-item{

    min-height:68px;

    padding:
    16px 6px;

    font-size:15px;

  }


  .product-content{

    padding:12px;

  }


  /* 手机强制一行一个 */
  .product-grid{

    grid-template-columns:
    minmax(0,1fr);

    gap:14px;

  }


  .product-card{

    border-radius:14px;

  }


  .product-card img,
  .no-image{

    aspect-ratio:
    16/10;

  }


  .product-meta{

    padding:
    14px 15px 18px;

  }


  .product-name{

    font-size:18px;

  }


  .product-model{

    font-size:14px;

  }


  .product-sub,
  .product-brand{

    font-size:13px;

  }


  .brand-video-wrap{

    height:72vh;

    min-height:520px;

  }


  .brand-video-title{

    font-size:48px;

  }

}


/* =========================
   小屏手机
========================= */

@media screen and
(max-width:520px){

  .products-layout{

    grid-template-columns:
    82px minmax(0,1fr);

  }


  .series-sidebar{

    width:82px;

    min-width:82px;

  }


  .series-item{

    min-height:64px;

    padding:
    15px 5px;

    font-size:14px;

  }


  .product-content{

    padding:10px;

  }


  .product-name{

    font-size:18px;

  }


  .brand-video-wrap{

    min-height:500px;

  }

}


/* =========================
   PC端
========================= */

@media screen and
(min-width:900px){

  .app-shell{

    max-width:1440px;

    margin:0 auto;

    background:#fff;

  }


  .bottom-nav{

    left:50%;

    width:100%;

    max-width:1440px;

    transform:
    translateX(-50%);

  }


  .page-header{

    padding-left:220px;

    padding-right:220px;

  }


  .products-layout{

    grid-template-columns:
    150px minmax(0,1fr);

  }


  .series-sidebar{

    width:150px;

    min-width:150px;

  }


  .product-content{

    padding:26px;

  }


  .product-grid{

    grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

    gap:22px;

  }

}
.search-box{
  display:flex;
  align-items:center;
  gap:10px;
}

.search-box input{
  flex:1;
  min-width:0;
}

.search-btn{
  flex-shrink:0;
  height:38px;
  padding:0 18px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:14px;
}