/* ===== 机π 电商网站 全局样式 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root{
  --primary:#d9232e;
  --primary-dark:#b91c27;
  --text:#1f2933;
  --text-light:#64748b;
  --border:#e6e8ee;
  --bg:#f5f7fb;
  --orange:#ff6700;
  --green:#52c41a;
  --accent:#0f9f8f;
  --accent-dark:#0f766e;
  --surface:#fff;
  --shadow-sm:0 8px 24px rgba(15,23,42,.06);
  --shadow-md:0 16px 40px rgba(15,23,42,.10);
  --radius:8px;
}
body{
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#fff 0,#f7f8fb 360px,#f4f6fa 100%);
  font-size:14px;
  line-height:1.6;
}
a{ color:var(--text); text-decoration:none; transition:color .2s; }
a:hover{ color:var(--primary); }
img{ max-width:100%; display:block; }
ul,li,ol{ list-style:none; }
button{ cursor:pointer; font-family:inherit; border:none; outline:none; }
button:disabled{ cursor:not-allowed; opacity:.65; }
input,select,textarea{ font-family:inherit; outline:none; }
.container{ width:1200px; margin:0 auto; }
.svg-icon{ width:1em; height:1em; display:inline-block; vertical-align:-0.14em; object-fit:contain; }
.svg-icon.sm{ width:14px; height:14px; }
.svg-icon.md{ width:18px; height:18px; }
.svg-icon.lg{ width:28px; height:28px; }
.svg-icon.xl{ width:48px; height:48px; }
.with-icon{ display:inline-flex; align-items:center; gap:6px; }

/* 顶部条 */
.topbar{ background:#f7f7f7; border-bottom:1px solid var(--border); height:34px; line-height:34px; font-size:12px; color:#999; }
.topbar .container{ display:flex; justify-content:space-between; }
.topbar .tb-left b{ color:var(--primary); }
.topbar .tb-right{ display:flex; gap:0; }
.topbar .tb-right a{ padding:0 12px; border-right:1px solid #ddd; color:#999; }
.topbar .tb-right a:last-child{ border-right:none; }
.topbar .tb-right a:hover{ color:var(--primary); }

/* 头部品牌+搜索 */
.header{ padding:20px 0; background:#fff; }
.header .container{ display:flex; align-items:center; gap:30px; }
.brand-copy{ flex:0 0 auto; display:flex; align-items:baseline; gap:8px; color:var(--primary); font-size:30px; font-weight:bold; white-space:nowrap; letter-spacing:0; }
.brand-copy span{ color:#6b7280; font-size:14px; font-weight:normal; }
.brand-copy:hover{ color:var(--primary); }
.search-box{ flex:1; max-width:560px; }
.search-box .sb-input{ display:flex; border:2px solid var(--primary); border-radius:2px; overflow:hidden; }
.search-box input{ flex:1; height:36px; padding:0 12px; border:none; font-size:14px; }
.search-box button{ width:80px; background:var(--primary); color:#fff; font-size:15px; }
.search-box button:hover{ background:var(--primary-dark); }
.search-hot{ margin-top:8px; font-size:12px; color:#999; display:flex; gap:10px; flex-wrap:wrap; }
.search-hot a{ color:#999; }
.cart-entry{ position:relative; }
.cart-entry a{ display:flex; align-items:center; gap:6px; border:1px solid var(--border); padding:8px 20px; color:var(--primary); font-size:14px; border-radius:2px; }
.cart-entry a:hover{ border-color:var(--primary); }
.cart-badge{ position:absolute; top:-6px; right:-6px; background:var(--primary); color:#fff; font-size:11px; min-width:18px; height:18px; line-height:18px; border-radius:9px; text-align:center; padding:0 4px; }

/* 导航 */
.nav{ background:var(--primary); height:42px; }
.nav .container{ display:flex; align-items:center; }
.nav-all{ width:210px; height:42px; line-height:42px; background:var(--primary-dark); color:#fff; text-align:center; font-size:15px; font-weight:bold; }
.nav-list{ display:flex; }
.nav-list a{ display:block; padding:0 22px; line-height:42px; color:#fff; font-size:15px; }
.nav-list a:hover,.nav-list a.active{ background:var(--primary-dark); }

/* banner */
.banner{ background:var(--bg); padding:10px 0; }
.banner .container{ display:flex; gap:10px; height:420px; }
.banner-side{ width:210px; background:#fff; padding:8px 0; }
.banner-side li a{ display:block; padding:9px 16px; font-size:13px; color:#555; border-left:3px solid transparent; }
.banner-side li a:hover{ background:#fff5f5; color:var(--primary); border-left-color:var(--primary); }
.banner-main{ flex:1; background:linear-gradient(135deg,#ff7a45,#e4393c); border-radius:4px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff; }
.banner-main .bm-text{ text-align:center; z-index:2; }
.banner-main .bm-text h2{ font-size:42px; margin-bottom:14px; letter-spacing:2px; }
.banner-main .bm-text p{ font-size:18px; opacity:.9; }
.banner-main .bm-text button{ margin-top:24px; padding:10px 32px; background:#fff; color:var(--primary); border-radius:24px; font-size:15px; font-weight:bold; }
.banner-news{ width:230px; background:#fff; padding:12px; }
.banner-news h4{ font-size:14px; padding-bottom:8px; border-bottom:1px solid var(--border); margin-bottom:8px; }
.banner-news li{ font-size:12px; color:#777; padding:5px 0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* 服务保障 */
.service{ background:#fff; padding:24px 0; border-bottom:1px solid var(--border); }
.service .container{ display:flex; justify-content:space-around; }
.service-item{ display:flex; align-items:center; gap:12px; }
.service-item .si-icon{ width:48px; height:48px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:24px; }
.service-item .si-icon img{ width:24px; height:24px; }
.service-item h4{ font-size:15px; }
.service-item p{ font-size:12px; color:#999; }

/* 区块标题 */
.section{ padding:30px 0; }
.section-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.section-title h3{ font-size:22px; position:relative; padding-left:14px; }
.section-title h3::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:20px; background:var(--primary); border-radius:2px; }
.section-title .more{ font-size:13px; color:#999; }
.section-title .tabs{ display:flex; gap:24px; }
.section-title .tabs a{ color:#999; font-size:15px; padding-bottom:4px; }
.section-title .tabs a.active{ color:var(--primary); border-bottom:2px solid var(--primary); }

/* 商品网格 */
.product-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.product-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.product-card{ background:#fff; border:1px solid var(--border); border-radius:4px; overflow:hidden; transition:all .2s; position:relative; }
.product-card:hover{ border-color:var(--primary); box-shadow:0 6px 16px rgba(0,0,0,.08); transform:translateY(-2px); }
.product-card .pc-img{ position:relative; padding-top:100%; overflow:hidden; background:#f9f9f9; }
.product-card .pc-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.product-card .pc-info{ padding:10px; }
.product-card .pc-name{ font-size:13px; color:#333; height:40px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:20px; }
.product-card .pc-price{ margin-top:8px; color:var(--primary); font-size:18px; font-weight:bold; }
.product-card .pc-price small{ font-size:12px; font-weight:normal; }
.product-card .pc-price .pc-old{ color:#999; font-size:12px; text-decoration:line-through; font-weight:normal; margin-left:6px; }
.product-card .pc-shop{ font-size:12px; color:#999; margin-top:6px; }
.product-card .tag-new{ position:absolute; top:0; left:0; background:var(--primary); color:#fff; font-size:11px; padding:2px 6px; z-index:2; }
.product-card .pc-actions{ display:flex; gap:8px; margin-top:10px; }
.product-card .pc-actions button{ width:34px; height:30px; background:#fff; color:var(--primary); border:1px solid var(--border); border-radius:2px; font-size:15px; }
.product-card .pc-actions button img{ margin:0 auto; width:16px; height:16px; }
.product-card .pc-actions button:hover{ border-color:var(--primary); background:#fff5f5; }

/* 楼层 */
.floor{ background:var(--bg); padding:30px 0; }
.floor .floor-head{ background:linear-gradient(90deg,#fff 60%,transparent); display:flex; align-items:center; gap:20px; margin-bottom:18px; }
.floor .floor-head h3{ font-size:24px; color:var(--primary); }
.floor .floor-head p{ color:#999; font-size:13px; }

/* 页脚 */
.footer{ background:#fff; border-top:2px solid var(--primary); margin-top:30px; }
.footer-top{ padding:30px 0; border-bottom:1px solid var(--border); }
.footer-top .container{ display:flex; justify-content:space-between; }
.footer-col{ min-width:140px; }
.footer-col h5{ font-size:14px; margin-bottom:14px; color:#333; }
.footer-col li{ margin-bottom:8px; }
.footer-col a{ color:#999; font-size:12px; }
.footer-col a:hover{ color:var(--primary); }
.footer-contact .fc-item{ display:flex; align-items:center; gap:8px; font-size:13px; color:#666; margin-bottom:8px; }
.footer-contact .phone{ color:var(--primary); font-size:22px; font-weight:bold; }
.footer-bottom{ padding:20px 0; text-align:center; color:#999; font-size:12px; }
.footer-bottom .links{ margin-bottom:8px; }
.footer-bottom .links a{ color:#999; margin:0 8px; }
.footer-bottom p{ margin:4px 0; }

/* 按钮 */
.btn{ display:inline-block; padding:8px 20px; background:var(--primary); color:#fff; border-radius:2px; font-size:14px; border:none; cursor:pointer; text-align:center; }
.btn:hover{ background:var(--primary-dark); color:#fff; }
.btn-block{ display:block; width:100%; }
.btn-lg{ padding:12px 30px; font-size:16px; }
.btn-outline{ background:#fff; color:var(--primary); border:1px solid var(--primary); }
.btn-outline:hover{ background:var(--primary); color:#fff; }
.btn-gray{ background:#ddd; color:#666; }
.btn-gray:hover{ background:#ccc; color:#555; }

/* 面包屑 */
.crumb{ padding:14px 0; color:#999; font-size:12px; }
.crumb a{ color:#999; }
.crumb a:hover{ color:var(--primary); }

/* 商品详情 */
.detail{ display:flex; gap:30px; padding:20px 0; background:#fff; }
.detail-left{ width:400px; }
.detail-main-img{ width:400px; height:400px; border:1px solid var(--border); overflow:hidden; }
.detail-main-img img{ width:100%; height:100%; object-fit:cover; }
.detail-thumbs{ display:flex; gap:8px; margin-top:10px; }
.detail-thumbs img{ width:60px; height:60px; border:2px solid transparent; cursor:pointer; object-fit:cover; }
.detail-thumbs img:hover,.detail-thumbs img.active{ border-color:var(--primary); }
.detail-info{ flex:1; }
.detail-info h1{ font-size:20px; font-weight:normal; line-height:1.4; margin-bottom:10px; }
.detail-sub{ color:var(--primary); font-size:13px; margin-bottom:10px; }
.detail-price-box{ background:var(--bg); padding:16px; border-radius:4px; margin-bottom:16px; }
.detail-price-box .price{ color:var(--primary); font-size:30px; font-weight:bold; }
.detail-price-box .old{ color:#999; text-decoration:line-through; font-size:14px; margin-left:10px; }
.detail-meta{ padding:10px 0; font-size:13px; color:#666; }
.detail-meta dl{ display:flex; padding:8px 0; border-bottom:1px dashed var(--border); }
.detail-meta dt{ width:80px; color:#999; }
.spec-row{ display:flex; align-items:center; padding:12px 0; border-bottom:1px dashed var(--border); }
.spec-row label{ width:80px; color:#999; font-size:13px; }
.spec-row .opts{ display:flex; gap:8px; flex-wrap:wrap; }
.spec-opt{ padding:6px 14px; border:1px solid var(--border); cursor:pointer; font-size:13px; }
.spec-opt:hover,.spec-opt.active{ border-color:var(--primary); color:var(--primary); }
.qty-row{ display:flex; align-items:center; padding:16px 0; }
.qty-row label{ width:80px; color:#999; font-size:13px; }
.qty-control{ display:flex; align-items:center; border:1px solid var(--border); width:fit-content; }
.qty-control button{ width:32px; height:32px; background:#fff; font-size:16px; }
.qty-control button:hover{ background:var(--bg); }
.qty-control input{ width:50px; height:32px; text-align:center; border:none; border-left:1px solid var(--border); border-right:1px solid var(--border); }
.detail-actions{ display:flex; gap:12px; margin-top:20px; }
.btn-cart{ background:var(--orange); color:#fff; padding:12px 30px; font-size:15px; border-radius:2px; }
.btn-cart:hover{ background:#e65c00; color:#fff; }
.btn-buy{ background:var(--primary); }

/* 购物车 */
.cart-table{ width:100%; background:#fff; border:1px solid var(--border); }
.cart-table th{ background:var(--bg); padding:12px; font-weight:normal; color:#666; font-size:13px; text-align:left; }
.cart-table td{ padding:12px; border-top:1px solid var(--border); vertical-align:middle; }
.cart-table .cart-pro{ display:flex; align-items:center; gap:12px; }
.cart-table .cart-pro img{ width:60px; height:60px; object-fit:cover; border:1px solid var(--border); }
.cart-table .cart-pro .pn{ font-size:13px; width:280px; }
.cart-checkbox{ width:16px; height:16px; }
.cart-footer{ background:#fff; border:1px solid var(--border); border-top:none; padding:16px; display:flex; justify-content:space-between; align-items:center; }
.cart-footer .cf-left{ display:flex; align-items:center; gap:16px; }
.cart-footer .total{ color:var(--primary); font-size:22px; font-weight:bold; }

/* 表单 */
.form-wrap{ max-width:400px; margin:30px auto; background:#fff; padding:30px; border:1px solid var(--border); border-radius:4px; }
.form-wrap.center{ max-width:560px; }
.form-wrap h2{ text-align:center; margin-bottom:24px; font-size:22px; }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; margin-bottom:6px; font-size:13px; color:#666; }
.form-group input,.form-group select,.form-group textarea{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:2px; font-size:14px; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{ border-color:var(--primary); }
.form-row{ display:flex; gap:10px; }
.form-row .form-group{ flex:1; }
.form-tip{ font-size:12px; color:#999; margin-top:6px; }
.form-msg{ padding:10px; margin-bottom:16px; border-radius:2px; font-size:13px; display:none; }
.form-msg.success{ display:block; background:#f0fff0; color:var(--green); border:1px solid #b7eb8f; }
.form-msg.error{ display:block; background:#fff2f0; color:var(--primary); border:1px solid #ffccc7; }

/* 用户中心 */
.uc{ display:flex; gap:20px; padding:20px 0; }
.uc-side{ width:200px; background:#fff; border:1px solid var(--border); padding:0; }
.uc-side .uc-user{ background:var(--primary); color:#fff; padding:20px; text-align:center; }
.uc-side .uc-user .avatar{ width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.3); margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:28px; }
.uc-side .uc-menu li a{ display:block; padding:12px 20px; font-size:14px; border-left:3px solid transparent; color:#555; }
.uc-side .uc-menu li a:hover,.uc-side .uc-menu li a.active{ background:var(--bg); color:var(--primary); border-left-color:var(--primary); }
.uc-main{ flex:1; background:#fff; border:1px solid var(--border); padding:20px; min-height:400px; }
.uc-main h3{ font-size:18px; padding-bottom:12px; border-bottom:1px solid var(--border); margin-bottom:16px; }

/* 订单状态 */
.order-status{ display:flex; gap:0; margin-bottom:20px; }
.order-status li{ flex:1; text-align:center; padding:16px; background:#fff; border:1px solid var(--border); border-right:none; }
.order-status li:last-child{ border-right:1px solid var(--border); }
.order-status li .num{ font-size:24px; color:var(--primary); font-weight:bold; }
.order-status li .lbl{ font-size:12px; color:#999; margin-top:4px; }

/* 空状态 */
.empty{ text-align:center; padding:60px 20px; color:#999; }
.empty .icon{ font-size:60px; margin-bottom:16px; opacity:.3; }
.empty img.icon{ width:60px; height:60px; margin:0 auto 16px; }
.empty p{ margin-bottom:16px; }

/* 店铺卡片 */
.store-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.store-card{ background:#fff; border:1px solid var(--border); border-radius:4px; overflow:hidden; }
.store-card .sc-head{ background:linear-gradient(135deg,#ff7a45,#e4393c); height:80px; position:relative; }
.store-card .sc-logo{ position:absolute; bottom:-25px; left:16px; width:60px; height:60px; border-radius:50%; background:#fff; border:2px solid #fff; display:flex; align-items:center; justify-content:center; font-size:24px; }
.store-card .sc-body{ padding:32px 16px 16px; }
.store-card .sc-body h4{ font-size:16px; margin-bottom:6px; }
.store-card .sc-body p{ font-size:12px; color:#999; margin-bottom:12px; }
.store-card .sc-pros{ display:flex; gap:6px; }
.store-card .sc-pros img{ width:60px; height:60px; object-fit:cover; }

/* 信息发布 */
.info-list{ background:#fff; border:1px solid var(--border); }
.info-list li{ padding:14px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.info-list li:hover{ background:var(--bg); }
.info-list li .info-title{ font-size:14px; }
.info-list li .info-date{ color:#999; font-size:12px; }
#infoMenu a{ display:block; padding:12px 18px; border-left:3px solid transparent; color:#555; }
#infoMenu a:hover,#infoMenu a.active{ background:var(--bg); color:var(--primary); border-left-color:var(--primary); }

/* 入驻步骤 */
.steps{ display:flex; justify-content:space-between; margin:30px 0; position:relative; }
.steps::before{ content:""; position:absolute; top:25px; left:10%; right:10%; height:2px; background:var(--border); z-index:0; }
.step-item{ text-align:center; flex:1; position:relative; z-index:1; }
.step-item .step-num{ width:50px; height:50px; border-radius:50%; background:#fff; border:2px solid var(--primary); color:var(--primary); line-height:46px; font-size:20px; font-weight:bold; margin:0 auto 10px; }
.step-item h5{ font-size:14px; margin-bottom:4px; }
.step-item p{ font-size:12px; color:#999; }

/* 文章页 */
.article{ background:#fff; padding:30px; border:1px solid var(--border); }
.article h1{ font-size:24px; text-align:center; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.article-body{ line-height:2; color:#555; }
.article-body p{ margin-bottom:16px; }
.article-body h3{ font-size:18px; margin:20px 0 10px; color:#333; }

/* 工具类 */
.text-red{ color:var(--primary); }
.text-gray{ color:#999; }
.mt20{ margin-top:20px; }
.mb20{ margin-bottom:20px; }
.fl{ float:left; } .fr{ float:right; } .clearfix::after{ content:""; display:block; clear:both; }

.pager{ text-align:center; padding:30px 0; display:flex; gap:6px; justify-content:center; align-items:center; flex-wrap:wrap; }
.pager .btn{ min-width:38px; padding:7px 12px; }

@media (max-width: 1240px){
  .container{ width:94%; }
  .product-grid{ grid-template-columns:repeat(4,1fr); }
}

@media (max-width: 900px){
  .topbar .container,.header .container,.nav .container,.service .container,.footer-top .container,.detail,.uc{ flex-direction:column; align-items:stretch; }
  .topbar{ height:auto; line-height:1.8; padding:6px 0; }
  .topbar .tb-right{ flex-wrap:wrap; }
  .header .container{ gap:14px; }
  .brand-copy{ font-size:24px; flex-wrap:wrap; row-gap:0; }
  .brand-copy span{ font-size:13px; }
  .search-box{ max-width:none; width:100%; }
  .nav{ height:auto; }
  .nav-all{ width:100%; }
  .nav-list{ flex-wrap:wrap; width:100%; }
  .nav-list a{ flex:1 0 33.33%; text-align:center; padding:0 8px; }
  .banner .container{ height:auto !important; display:block; }
  .banner-side{ position:static !important; width:100% !important; height:auto !important; margin-bottom:10px; display:grid; grid-template-columns:repeat(2,1fr); }
  .banner-main{ margin-left:0 !important; min-height:260px; }
  .banner-news{ position:static !important; width:100%; margin-top:10px; }
  .product-grid,.product-grid.cols-4,.store-grid{ grid-template-columns:repeat(2,1fr); }
  .detail-left,.detail-main-img{ width:100%; height:auto; }
  .detail-main-img{ aspect-ratio:1/1; }
  .uc-side{ width:100%; }
  .footer-top .container{ gap:18px; }
}

@media (max-width: 560px){
  .container{ width:96%; }
  .product-grid,.product-grid.cols-4,.store-grid{ grid-template-columns:1fr; }
  .form-row{ flex-direction:column; gap:0; }
  .detail-actions{ flex-direction:column; }
  .cart-table{ font-size:12px; }
  .cart-footer{ flex-direction:column; gap:14px; align-items:stretch; }
}

/* 视觉升级 */
.topbar{
  background:#fff;
  color:#6b7280;
  border-bottom:1px solid rgba(226,232,240,.9);
}
.topbar .tb-right a{
  border-right:1px solid #edf0f4;
}
.header{
  padding:24px 0 18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 28px rgba(15,23,42,.04);
}
.search-box .sb-input{
  border:1px solid rgba(217,35,46,.35);
  border-radius:999px;
  background:#fff;
  box-shadow:0 10px 24px rgba(217,35,46,.08);
}
.search-box input{
  height:42px;
  padding:0 18px;
  background:transparent;
}
.search-box button{
  height:42px;
  width:92px;
  border-radius:999px;
  margin:0;
  background:linear-gradient(135deg,var(--primary),#ef5b3f);
  font-weight:600;
}
.search-hot{
  color:#94a3b8;
  padding-left:12px;
}
.header .search-box{
  max-width:none;
}
.cart-entry a{
  border:1px solid rgba(217,35,46,.22);
  background:#fff7f7;
  border-radius:999px;
  padding:10px 22px;
  box-shadow:0 10px 22px rgba(217,35,46,.07);
}
.nav{
  height:48px;
  background:linear-gradient(90deg,var(--primary-dark),var(--primary),#ef5b3f);
  box-shadow:0 12px 26px rgba(217,35,46,.18);
}
.nav-all{
  height:48px;
  line-height:48px;
  background:rgba(0,0,0,.16);
}
.nav-list a{
  line-height:48px;
  padding:0 24px;
}
.nav-list a:hover,.nav-list a.active{
  background:rgba(255,255,255,.16);
}

.banner{
  background:linear-gradient(180deg,#fff,#f5f7fb);
  padding:18px 0 12px;
}
.banner .container{
  gap:14px;
}
.banner-side{
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.banner-side li a{
  padding:12px 16px;
  color:#46515f;
}
.banner-side li a:hover{
  background:#fff6f6;
}
.banner-main{
  border-radius:var(--radius);
  justify-content:flex-start;
  padding-left:68px;
  background:
    linear-gradient(110deg,rgba(22,28,45,.94) 0%,rgba(134,28,36,.88) 52%,rgba(239,91,63,.78) 100%),
    url("../assets/products/1001.jpg") right center/contain no-repeat;
  box-shadow:var(--shadow-md);
}
.banner-main::before{
  content:"";
  position:absolute;
  right:52px;
  bottom:34px;
  width:210px;
  height:210px;
  border-radius:18px;
  background:url("../assets/products/2001.jpg") center/cover no-repeat;
  transform:rotate(-5deg);
  box-shadow:0 22px 44px rgba(0,0,0,.28);
  border:8px solid rgba(255,255,255,.78);
}
.banner-main::after{
  content:"";
  position:absolute;
  right:268px;
  top:52px;
  width:148px;
  height:148px;
  border-radius:18px;
  background:url("../assets/products/4003.jpg") center/cover no-repeat;
  transform:rotate(7deg);
  box-shadow:0 18px 34px rgba(0,0,0,.24);
  border:7px solid rgba(255,255,255,.72);
}
.banner-main .bm-text{
  text-align:left;
  max-width:480px;
}
.banner-main .bm-text h2{
  font-size:46px;
  line-height:1.15;
  letter-spacing:0;
}
.banner-main .bm-text p{
  font-size:17px;
  color:rgba(255,255,255,.86);
}
.banner-main .bm-text button{
  border-radius:999px;
  padding:12px 34px;
  box-shadow:0 14px 26px rgba(0,0,0,.18);
}
.banner-news{
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.banner-news h4{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:15px;
}
.banner-news li{
  padding:7px 0;
  color:#5f6b7a;
}

.section{
  padding:34px 0;
}
.section-title h3,
.floor .floor-head h3{
  display:flex;
  align-items:center;
  gap:8px;
  color:#172033;
  letter-spacing:0;
}
.section-title h3::before{
  background:linear-gradient(180deg,var(--primary),#ef6b4b);
}
.section-title .tabs a.active{
  color:var(--primary);
}
.floor{
  background:transparent;
  padding:28px 0 36px;
}
.floor .container{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-sm);
}
.floor .floor-head{
  background:transparent;
  justify-content:space-between;
  margin-bottom:16px;
}
.floor .floor-head p{
  color:#7b8796;
}
.product-grid{
  gap:18px;
}
.product-card{
  border:1px solid rgba(226,232,240,.95);
  border-radius:var(--radius);
  box-shadow:0 10px 22px rgba(15,23,42,.04);
}
.product-card:hover{
  border-color:rgba(217,35,46,.34);
  box-shadow:0 20px 44px rgba(15,23,42,.12);
  transform:translateY(-4px);
}
.product-card .pc-img{
  background:#f8fafc;
}
.product-card .pc-img img{
  transition:transform .3s ease;
}
.product-card:hover .pc-img img{
  transform:scale(1.04);
}
.product-card .pc-info{
  padding:14px;
}
.product-card .pc-name{
  font-size:14px;
  line-height:21px;
  height:42px;
  color:#172033;
}
.product-card .pc-price{
  font-size:20px;
}
.product-card .pc-shop{
  color:#7b8796;
}
.product-card .tag-new{
  top:10px;
  left:10px;
  border-radius:999px;
  padding:3px 9px;
  background:linear-gradient(135deg,var(--primary),#ef6b4b);
}
.product-card .pc-actions button{
  border-radius:999px;
  background:#fff;
}
.product-card .pc-actions button:hover{
  background:#fff6f6;
}

.service{
  padding:28px 0;
}
.service .container{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 28px;
  box-shadow:var(--shadow-sm);
}
.service-item .si-icon{
  background:#fff4f4;
  border:1px solid rgba(217,35,46,.14);
}
.merchant-cta{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  padding:42px 48px;
  color:#fff;
  text-align:left;
  background:
    linear-gradient(120deg,rgba(15,118,110,.94),rgba(15,159,143,.88)),
    url("../assets/products/6007.jpg") right center/contain no-repeat;
  box-shadow:var(--shadow-md);
}
.merchant-cta h2{
  font-size:28px;
  margin-bottom:10px;
}
.merchant-cta p{
  font-size:15px;
  opacity:.92;
  margin-bottom:20px;
}
.merchant-cta .btn{
  background:#fff;
  color:var(--accent-dark);
  border-radius:999px;
}
.footer{
  border-top:none;
  background:#101827;
  color:#cbd5e1;
}
.footer .service{
  background:transparent;
}
.footer .service .container,
.footer-top{
  border-color:rgba(255,255,255,.08);
}
.footer-top{
  padding:34px 0;
}
.footer-col h5{
  color:#fff;
}
.footer-col a,
.footer-bottom,
.footer-bottom .links a{
  color:#94a3b8;
}
.footer-contact .phone{
  color:#fff;
}
.footer-contact .fc-item{
  color:#cbd5e1;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
}

.btn{
  border-radius:6px;
  box-shadow:0 10px 20px rgba(217,35,46,.12);
}
.btn-outline{
  box-shadow:none;
}
.form-wrap,.article,.uc-side,.uc-main,.cart-table,.cart-footer,.info-list,.store-card{
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.form-group input,.form-group select,.form-group textarea{
  border-radius:6px;
}
.spec-opt{
  border-radius:6px;
  background:#fff;
}
.detail-main-img{
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.detail-thumbs img{
  border-radius:6px;
}

@media (max-width: 900px){
  .banner-main{
    padding:38px 28px;
    background:linear-gradient(135deg,#172033,var(--primary));
  }
  .banner-main::before,.banner-main::after{
    display:none;
  }
  .merchant-cta{
    padding:30px 24px;
    background:linear-gradient(135deg,var(--accent-dark),var(--accent));
  }
}

@media (max-width: 900px){
  .nav{
    height:48px;
    overflow:hidden;
  }
  .nav .container{
    width:100%;
    flex-direction:row;
    align-items:center;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .nav .container::-webkit-scrollbar,
  .nav-list::-webkit-scrollbar{
    display:none;
  }
  .nav-all{
    width:auto;
    flex:0 0 auto;
    padding:0 18px;
    white-space:nowrap;
  }
  .nav-list{
    width:auto;
    flex:1 0 auto;
    flex-wrap:nowrap;
    overflow-x:auto;
  }
  .nav-list a{
    flex:0 0 auto;
    min-width:auto;
    padding:0 14px;
    white-space:nowrap;
  }
  .banner #homeCatSide{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    padding:10px;
  }
  .banner #homeCatSide li a{
    justify-content:center;
    border-left:none;
    border-radius:6px;
    padding:10px 4px;
    font-size:12px;
  }
  .banner-main .bm-text h2{
    font-size:36px;
  }
  .banner-main .bm-text p{
    font-size:15px;
  }
}

@media (max-width: 560px){
  .topbar .container{
    gap:2px;
  }
  .topbar .tb-right a{
    padding:0 8px 0 0;
    border-right:none;
  }
  .header{
    padding:16px 0;
  }
  .header .container{
    gap:12px;
  }
  .search-box button{
    width:76px;
  }
  .cart-entry a{
    justify-content:center;
  }
  .banner{
    padding-top:12px;
  }
  .banner-main{
    min-height:220px;
    padding:30px 26px;
  }
  .banner-main .bm-text h2{
    font-size:31px;
  }
  .banner-main .bm-text button{
    padding:10px 24px;
    margin-top:18px;
  }
  .banner-news{
    padding:10px 12px;
  }
  .banner-news li:nth-child(n+5){
    display:none;
  }
  .section{
    padding:24px 0;
  }
  .section-title{
    align-items:flex-end;
    gap:10px;
  }
  .section-title h3{
    font-size:20px;
  }
  .section-title .tabs{
    gap:14px;
  }
  .product-grid,
  .product-grid.cols-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .product-card .pc-info{
    padding:10px;
  }
  .product-card .pc-name{
    height:36px;
    font-size:12px;
    line-height:18px;
  }
  .product-card .pc-price{
    font-size:16px;
  }
  .product-card .pc-shop{
    font-size:11px;
  }
  .product-card .pc-actions{
    gap:6px;
  }
  .product-card .pc-actions button{
    width:30px;
    height:28px;
  }
  .floor{
    padding:18px 0 24px;
  }
  .floor .container{
    padding:14px;
  }
  .floor .floor-head{
    align-items:flex-start;
    flex-direction:column;
    gap:2px;
  }
  .merchant-cta h2{
    font-size:23px;
  }
}