/* 哈巴狗 · 极简高级风设计系统（2026-08-10） */
:root{
  --s-primary:#18181B;          /* 墨黑主色 */
  --s-accent:#2563EB;           /* 科技蓝强调 */
  --s-accent-hover:#1D4ED8;
  --s-border:#E5E7EB;           /* 微边框 */
  --s-border-light:#F0F1F3;
  --s-bg:#F9FAFB;               /* 页面背景 */
  --s-card:#FFFFFF;             /* 卡片 */
  --s-text:#1A1A1A;
  --s-text-2:#666666;
  --s-text-3:#999999;
  --s-danger:#EF4444;
  --s-success:#10B981;
  --s-radius:8px;
  --s-radius-lg:12px;
  --s-shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --s-shadow-md:0 4px 12px rgba(0,0,0,.08);
  --s-shadow-lg:0 8px 24px rgba(0,0,0,.12);
  --s-trans:all .25s cubic-bezier(.4,0,.2,1);
}
/* 卡片 */
.s-card{ background:var(--s-card); border:1px solid var(--s-border); border-radius:var(--s-radius-lg); box-shadow:var(--s-shadow-sm); transition:var(--s-trans); }
.s-card:hover{ box-shadow:var(--s-shadow-md); transform:translateY(-2px); }
/* 按钮 */
.s-btn{ display:inline-flex; align-items:center; justify-content:center; padding:9px 22px; border-radius:var(--s-radius); font-size:14px; font-weight:600; cursor:pointer; transition:var(--s-trans); text-decoration:none; border:1px solid transparent; }
.s-btn-primary{ background:var(--s-primary); color:#fff; }
.s-btn-primary:hover{ box-shadow:var(--s-shadow-md); transform:translateY(-1px); }
.s-btn-accent{ background:var(--s-accent); color:#fff; }
.s-btn-accent:hover{ background:var(--s-accent-hover); box-shadow:var(--s-shadow-md); }
.s-btn-ghost{ background:#fff; border-color:var(--s-border); color:var(--s-text); }
.s-btn-ghost:hover{ border-color:var(--s-primary); color:var(--s-primary); }
/* 价格 */
.s-price{ color:var(--s-primary); font-weight:700; }
.s-price big{ font-size:22px; }
.s-price-del{ color:var(--s-text-3); text-decoration:line-through; font-weight:400; }
/* 商品卡片（搜索/推荐共用） */
.s-goods-card{ background:var(--s-card); border:1px solid var(--s-border); border-radius:var(--s-radius-lg); overflow:hidden; transition:var(--s-trans); }
.s-goods-card:hover{ box-shadow:var(--s-shadow-lg); transform:translateY(-3px); }
.s-goods-card .thumb{ width:100%; aspect-ratio:1/1; background:#F5F5F5; overflow:hidden; }
.s-goods-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:var(--s-trans); }
.s-goods-card:hover .thumb img{ transform:scale(1.04); }
.s-goods-card .info{ padding:10px 12px 12px; }
.s-goods-card .name{ font-size:13px; line-height:1.5; color:var(--s-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:39px; }
.s-goods-card .price{ margin-top:6px; color:var(--s-primary); font-weight:700; font-size:18px; }
.s-goods-card .meta{ margin-top:6px; font-size:12px; color:var(--s-text-3); display:flex; justify-content:space-between; }
/* 筛选/排序条 */
.s-filter-bar{ background:var(--s-card); border:1px solid var(--s-border); border-radius:var(--s-radius-lg); padding:10px 16px; }
.s-filter-bar a{ color:var(--s-text-2); font-size:13px; padding:4px 10px; border-radius:6px; text-decoration:none; }
.s-filter-bar a:hover{ color:var(--s-primary); }
.s-filter-bar a.active{ color:#fff; background:var(--s-primary); }
/* 空状态 */
.s-empty{ text-align:center; padding:60px 20px; color:var(--s-text-3); font-size:14px; }
/* 步骤条 */
.s-steps{ display:flex; align-items:center; justify-content:center; gap:0; background:var(--s-card); border-radius:var(--s-radius-lg); box-shadow:var(--s-shadow-sm); padding:16px 20px; }
.s-steps .step{ display:flex; align-items:center; color:var(--s-text-3); font-size:13px; }
.s-steps .step .dot{ width:22px; height:22px; border-radius:50%; background:#F0F0F0; color:var(--s-text-3); display:flex; align-items:center; justify-content:center; font-size:11px; margin-right:7px; }
.s-steps .step.active{ color:var(--s-primary); font-weight:600; }
.s-steps .step.active .dot{ background:var(--s-primary); color:#fff; }
.s-steps .step.done{ color:var(--s-text-2); }
.s-steps .step.done .dot{ background:var(--s-success); color:#fff; }
.s-steps .line{ flex:1; height:2px; background:#F0F0F0; margin:0 14px; min-width:20px; }
/* 响应式断点（主链路页共用） */
@media (max-width:920px){ .s-card, .s-filter-bar { border-radius:8px; } }
@media (max-width:640px){ .s-btn{ width:100%; } }
/* 头部搜索框 → 墨黑+科技蓝（Task 2 补充：仅视觉覆写，未动结构） */
#header .top-search-box .form-fields{ border:1px solid var(--s-primary); }
#header .top-search-box .select-act{ border:1px solid var(--s-primary); border-right-width:0; }
#header .top-search-box .select-act li:hover{ background:var(--s-primary); color:#fff; }
#header .top-search-box .select-act li:hover b{ background:url(../images/down-white.png) no-repeat center center; background-size:90%; }
#header .top-search-box .submit{ background:var(--s-primary); }
#header .top-search-box .submit:hover{ background:var(--s-accent); }
#header .top-search-keywords a:hover{ color:var(--s-accent); text-decoration:none; }
#header .top-search-keywords a[style]{ color:var(--s-accent) !important; }

/* ===== 商品详情页规格按钮极简样式（Task 3, 2026-08-11）===== */
.s-spec-btn{ border:1px solid var(--s-border); border-radius:6px; padding:6px 14px; font-size:13px; }
.goods-attr .attribute .attr-detail .handle .sale-attr li a.s-spec-btn{ height:auto; line-height:1.5; border:1px solid var(--s-border); border-radius:6px; padding:6px 14px; font-size:13px; margin:2px 8px 2px 0; min-width:40px; }
.goods-attr .attribute .attr-detail .handle .sale-attr li a.s-spec-btn span{ min-width:0; padding:0 6px; background:transparent; }
.goods-attr .attribute .attr-detail .handle .sale-attr li a.s-spec-btn img{ width:auto; height:24px; margin:0 4px 0 0; }
.goods-attr .attribute .attr-detail .handle .sale-attr li a.s-spec-btn:hover{ border-color:var(--s-accent); }
.goods-attr .attribute .attr-detail .handle .sale-attr li.solid a.s-spec-btn{ background:var(--s-primary); color:#fff; border-color:var(--s-primary); }
.goods-attr .attribute .attr-detail .handle .sale-attr li.solid a.s-spec-btn:hover{ border-color:var(--s-primary); }
.goods-attr .attribute .attr-detail .handle .sale-attr li.solid a.s-spec-btn b{ display:none; }
.goods-attr .attribute .attr-detail .handle .sale-attr li a.s-spec-btn.none{ background:#F3F4F6; color:#C7C9CC; border:1px dashed var(--s-border); cursor:not-allowed; }
.goods-attr .attribute .attr-detail .handle .sale-attr li a.s-spec-btn.none:hover{ border-color:var(--s-border); }