/* ==========================================================================
   硬件商城 /mall、商品详情 /mall/<slug>、询价单 /mall/cart
   购物网站的骨架，但只做展示与询价：没有在线支付、没有结算按钮。
   颜色只用 site.css 的变量；价格用 --c-danger，符合国内报价习惯。
   ========================================================================== */

/* ------------------------------------------------------------------ 页头 */

.mall-hero {
  padding: var(--sp-5) 0 0;
  background: linear-gradient(180deg, var(--c-bg-2) 0%, var(--c-bg) 100%);
  border-bottom: 1px solid var(--c-line);
}
.mall-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: var(--sp-5);
  align-items: end;
  padding-bottom: var(--sp-4);
}
.mall-hero__title {
  font-size: var(--fs-h1);
  margin: var(--sp-1) 0 var(--sp-2);
}
.mall-hero__lead {
  max-width: 620px;
  margin: 0;
  color: var(--c-text-2);
  line-height: 1.8;
}

.mall-search {
  display: flex;
  height: 48px;
  overflow: hidden;
  background: var(--c-bg);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mall-search:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.mall-search__input {
  flex: 1;
  min-width: 0;
  padding: 0 14px;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.mall-search__input::placeholder { color: var(--c-text-3); }
.mall-search__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  border: 0;
  background: var(--c-primary);
  color: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--t-fast);
}
.mall-search__btn:hover { background: var(--c-primary-dark); }

/* 服务承诺条 */
.mall-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
}
.mall-trust li {
  display: flex;
  gap: 10px;
  padding: var(--sp-2) var(--sp-3) var(--sp-3) 0;
  border-right: 1px solid var(--c-line);
}
.mall-trust li:last-child { border-right: 0; }
.mall-trust__no {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-accent-ink);
  letter-spacing: .06em;
}
.mall-trust__body { display: flex; flex-direction: column; gap: 2px; }
.mall-trust__body b { font-size: var(--fs-sm); color: var(--c-ink); }
.mall-trust__body em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  line-height: 1.55;
}

/* ------------------------------------------------------------------ 布局 */

.mall-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
/* 网格子项默认 min-width:auto，分类横滑条会把整列撑出屏幕。
   这里统一压回 0，让 overflow-x 在内部生效。 */
.mall-layout > * { min-width: 0; }

/* 左侧分类 */
.mall-side {
  position: sticky;
  top: calc(var(--h-header) + var(--sp-3));
}
.mall-side__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--c-text-3);
}
.mall-cats {
  display: grid;
  max-width: 100%;
  border-top: 1px solid var(--c-line);
}
.mall-cats__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--c-line);
  border-left: 2px solid transparent;
  color: var(--c-text);
  font-size: var(--fs-sm);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.mall-cats__item:hover { background: var(--c-bg-2); color: var(--c-primary); }
.mall-cats__item.is-on {
  border-left-color: var(--c-primary);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-weight: 600;
}
.mall-cats__n {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
.mall-cats__item.is-on .mall-cats__n { color: var(--c-primary); }

.mall-side__help {
  margin-top: var(--sp-3);
  padding: var(--sp-2);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}
.mall-side__help b { display: block; font-size: var(--fs-sm); margin-bottom: 4px; }
.mall-side__help p {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--c-text-2);
}
.mall-side__help .link-arrow { font-size: var(--fs-xs); }

/* 工具条 */
.mall-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 40px;
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-line);
}
.mall-bar__count { margin: 0; font-size: var(--fs-sm); color: var(--c-text-2); }
.mall-bar__count b { color: var(--c-ink); font-size: var(--fs-body); }
.mall-bar__filter { color: var(--c-text-3); }
.mall-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.mall-sort select {
  height: 34px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-xs);
  background: var(--c-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7480' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  appearance: none;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--c-text);
  cursor: pointer;
}
.mall-sort select:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
}

/* ------------------------------------------------------------------ 商品卡 */

.mall-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}
.mall-grid--peers { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pd-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--e-out),
              box-shadow var(--t-base) var(--e-out),
              transform var(--t-base) var(--e-out);
}
.pd-card:hover {
  border-color: var(--c-line-2);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.pd-card__fig {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: var(--sp-3);
  background: var(--c-bg-2);
}
.pd-card__fig img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--t-slow) var(--e-out);
}
.pd-card:hover .pd-card__fig img { transform: scale(1.04); }
.pd-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: var(--c-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
}
.pd-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px;
}
.pd-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-ink);
}
.pd-card__name:hover { color: var(--c-primary); }
.pd-card__tagline {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 5px 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.pd-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: var(--sp-1) 0 0;
  font-size: 11px;
  color: var(--c-text-3);
  letter-spacing: .02em;
}
.pd-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--sp-2);
}
.pd-card__price {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-danger);
  letter-spacing: -.01em;
}
.pd-card__price em {
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-text-3);
}
.pd-card__price.is-ask { font-size: 15px; color: var(--c-text-2); font-weight: 600; }
.pd-card__add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  border: 1px solid var(--c-primary);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--c-primary);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.pd-card__add:hover { background: var(--c-primary); color: #fff; }
.pd-card__add .icon { flex: none; }
.pd-card__link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-xs);
  color: var(--c-primary);
}

.mall-empty {
  padding: var(--sp-6) var(--sp-3);
  text-align: center;
  background: var(--c-bg-2);
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-md);
}
.mall-empty .icon { margin: 0 auto var(--sp-2); color: var(--c-text-3); }
.mall-empty h2 { font-size: var(--fs-h4); margin-bottom: 6px; }
.mall-empty p { margin: 0 auto var(--sp-3); max-width: 420px; color: var(--c-text-2); font-size: var(--fs-sm); }
.mall-empty__acts { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-1); }

.mall-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  line-height: 1.7;
}

/* ------------------------------------------------------------------ 底部说明 */

.mall-help {
  padding: var(--sp-6) 0;
  background: var(--c-dark);
  color: #fff;
}
.mall-help__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: var(--sp-5);
  align-items: center;
}
.mall-help .eyebrow { color: var(--c-dark-info); }
.mall-help__title { font-size: var(--fs-h2); color: #fff; margin: var(--sp-1) 0 var(--sp-2); }
.mall-help__lead {
  max-width: 620px;
  margin: 0;
  color: var(--c-dark-text);
  line-height: 1.8;
}
.mall-help__acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mall-help__acts .btn--outline {
  border-color: var(--c-dark-line);
  color: #fff;
}
.mall-help__acts .btn--outline:hover {
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

/* ------------------------------------------------------------------ 商品详情 */

.pd-hero {
  padding: var(--sp-4) 0 var(--sp-5);
}
.pd-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.pd-gallery__main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: var(--sp-5);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.pd-gallery__main img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-gallery__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 4px 10px;
  border-radius: var(--r-xs);
  background: var(--c-primary);
  color: #fff;
  font-size: var(--fs-xs);
}
.pd-gallery__note {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  text-align: center;
}

.pd-info__model {
  margin: 0 0 4px;
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--c-text-3);
}
.pd-info__title { font-size: var(--fs-h1); margin: 0 0 6px; }
.pd-info__tagline { margin: 0; color: var(--c-text-2); font-size: var(--fs-body); }

.pd-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: var(--sp-3) 0; 
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}
.pd-price__now {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600;
  color: var(--c-danger);
  letter-spacing: -.02em;
}
.pd-price.is-ask .pd-price__now { font-size: 22px; color: var(--c-text); }
.pd-price em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

.pd-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 var(--sp-3);
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}
.pd-meta > div {
  display: flex;
  gap: 12px;
  padding: 9px 12px;
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}
.pd-meta dt { flex: none; width: 40px; color: var(--c-text-3); font-size: var(--fs-xs); line-height: 1.9; }
.pd-meta dd { margin: 0; color: var(--c-text); }

.pd-buy {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.pd-qty {
  display: flex;
  align-items: stretch;
  height: 48px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.pd-qty button {
  width: 40px;
  border: 0;
  background: var(--c-bg-2);
  color: var(--c-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-qty button:hover { background: var(--c-bg-3); }
.pd-qty input {
  width: 52px;
  border: 0;
  border-left: 1px solid var(--c-line);
  border-right: 1px solid var(--c-line);
  text-align: center;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--c-text);
  outline: none;
}
.pd-buy__add { flex: 1 1 180px; justify-content: center; }
.pd-buy__now { flex: 1 1 140px; justify-content: center; }
.pd-buy__note {
  margin: 10px 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.pd-promises {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) 0 0;
  border-top: 1px solid var(--c-line);
  list-style: none;
}
.pd-promises li {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--c-text-2);
}
.pd-promises .icon { color: var(--c-success); flex: none; }

.pd-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
}
.pd-fact {
  padding: var(--sp-2) var(--sp-3);
  border-right: 1px solid var(--c-line);
}
.pd-fact:last-child { border-right: 0; }
.pd-fact b {
  display: block;
  font-size: var(--fs-h3);
  color: var(--c-primary);
  letter-spacing: -.01em;
}
.pd-fact span { font-size: var(--fs-xs); color: var(--c-text-3); }

/* 商品说明 */
.pd-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: var(--sp-5);
  align-items: start;
}
.pd-intro__title { font-size: var(--fs-h2); margin: var(--sp-1) 0 var(--sp-2); }
.pd-intro__lead {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--fs-body);
  line-height: 1.85;
}
.pd-highlights {
  display: grid;
  gap: 8px;
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}
.pd-highlights li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.pd-highlights .icon { flex: none; margin-top: 3px; color: var(--c-success); }

.pd-buybox {
  padding: var(--sp-3);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.pd-buybox__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
}
.pd-buybox__steps {
  display: grid;
  gap: 10px;
  margin: 0 0 var(--sp-3);
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.pd-buybox__steps li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-text-2);
}
.pd-buybox__steps span {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}
.pd-buybox__tech {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
}
.pd-buybox__tech:hover { color: var(--c-primary); }

/* 参数 */
.pd-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.pd-spec {
  padding: var(--sp-3);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.pd-spec__name {
  margin: 0 0 var(--sp-2);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-primary);
}
.pd-spec__list { margin: 0; }
.pd-spec__row {
  display: flex;
  gap: var(--sp-2);
  padding: 8px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}
.pd-spec__row:last-child { border-bottom: 0; }
.pd-spec__row dt { flex: none; width: 38%; color: var(--c-text-3); font-size: var(--fs-xs); line-height: 1.9; }
.pd-spec__row dd { margin: 0; color: var(--c-text); line-height: 1.65; }

/* 采购流程 */
.pd-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-steps li {
  padding-top: var(--sp-2);
  border-top: 2px solid var(--c-primary);
}
.pd-steps span {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--c-primary);
}
.pd-steps b { display: block; font-size: var(--fs-sm); margin-bottom: 4px; }
.pd-steps p { margin: 0; font-size: var(--fs-xs); line-height: 1.7; color: var(--c-text-2); }

/* ------------------------------------------------------------------ 询价单 */

.cart { padding: var(--sp-4) 0 var(--sp-6); }
.cart-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-line);
}
.cart-head__title { font-size: var(--fs-h1); margin: var(--sp-1) 0 6px; }
.cart-head__lead { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); }
.cart-head__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.cart-alert { margin-bottom: var(--sp-3); }

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-4);
  align-items: start;
}

.cart-list { display: grid; }
.cart-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto 96px;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-line);
}
.cart-row__fig {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  padding: 8px;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}
.cart-row__fig img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.cart-row__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
}
.cart-row__name:hover { color: var(--c-primary); }
.cart-row__meta {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.cart-row__del {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-text-3);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.cart-row__del:hover { color: var(--c-danger); }
.cart-row__qty {
  display: flex;
  align-items: stretch;
  height: 36px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.cart-row__qty button {
  width: 32px;
  border: 0;
  background: var(--c-bg-2);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
}
.cart-row__qty button:hover { background: var(--c-bg-3); }
.cart-row__qty input {
  width: 44px;
  border: 0;
  border-left: 1px solid var(--c-line);
  border-right: 1px solid var(--c-line);
  text-align: center;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--c-text);
  outline: none;
}
.cart-row__sum {
  margin: 0;
  text-align: right;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
}

.cart-empty {
  padding: var(--sp-6) var(--sp-3);
  text-align: center;
  background: var(--c-bg-2);
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-md);
}
.cart-empty .icon { margin: 0 auto var(--sp-2); color: var(--c-text-3); }
.cart-empty h2 { font-size: var(--fs-h4); margin-bottom: 6px; }
.cart-empty p { margin: 0 auto var(--sp-3); max-width: 400px; color: var(--c-text-2); font-size: var(--fs-sm); }
.cart-empty__acts { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-1); }
.cart-noscript {
  margin: var(--sp-2) 0;
  padding: var(--sp-2);
  background: var(--c-warn-soft);
  color: var(--c-warn);
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
}

.cart-form {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.cart-form__head {
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-line);
}
.cart-form__head h2 { font-size: var(--fs-h4); margin-bottom: 4px; }
.cart-form__head p { margin: 0; font-size: var(--fs-xs); color: var(--c-text-3); }
.cart-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.cart-form__grid .field--wide { grid-column: 1 / -1; }
.cart-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
}
.cart-form__note { margin: 0; font-size: var(--fs-xs); color: var(--c-text-3); line-height: 1.7; }

.cart-side { position: sticky; top: calc(var(--h-header) + var(--sp-3)); }
.cart-side__card {
  padding: var(--sp-3);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.cart-side__title { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.cart-side__steps {
  display: grid;
  gap: 8px;
  margin: 0 0 var(--sp-3);
  padding: 0;
  list-style: none;
}
.cart-side__steps li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-text-2);
}
.cart-side__steps span {
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: #fff;
  font-size: 10px;
  line-height: 17px;
  text-align: center;
}
.cart-sum {
  margin: 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-line);
}
.cart-sum > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 6px 0;
  font-size: var(--fs-sm);
}
.cart-sum dt { color: var(--c-text-2); }
.cart-sum dd { margin: 0; font-weight: 600; color: var(--c-ink); }
.cart-side__note {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  line-height: 1.65;
}
.cart-side__contact {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-line);
}
.cart-side__contact p { margin: 0 0 4px; font-size: var(--fs-xs); color: var(--c-text-3); }
.cart-side__contact a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* 加购提示 */
.mall-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 200;
  transform: translate(-50%, 12px);
  padding: 10px 18px;
  border-radius: var(--r-full);
  background: rgba(11, 26, 43, .94);
  color: #fff;
  font-size: var(--fs-sm);
  box-shadow: var(--sh-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
}
.mall-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------ 响应式 */

@media (max-width: 1024px) {
  .mall-hero__top { grid-template-columns: 1fr; gap: var(--sp-3); align-items: start; }
  .mall-search { max-width: 520px; }
  .mall-layout { grid-template-columns: 190px minmax(0, 1fr); gap: var(--sp-3); }
  .mall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mall-grid--peers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-hero__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .pd-gallery__main { max-width: 560px; }
  .pd-intro__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .pd-buybox { max-width: 520px; }
  .pd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-side { position: static; }
  .mall-help__inner { grid-template-columns: 1fr; gap: var(--sp-3); }
}

@media (max-width: 768px) {
  .mall-hero { padding-top: var(--sp-4); }
  .mall-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mall-trust li:nth-child(2n) { border-right: 0; }
  .mall-trust li:nth-child(-n+2) { border-bottom: 1px solid var(--c-line); }
  .mall-layout { grid-template-columns: 1fr; }
  .mall-side { position: static; }
  .mall-cats {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    border-top: 0;
    scrollbar-width: none;
  }
  .mall-cats::-webkit-scrollbar { display: none; }
  .mall-cats__item {
    flex: none;
    border: 1px solid var(--c-line);
    border-radius: var(--r-full);
    padding: 7px 12px;
    white-space: nowrap;
  }
  .mall-cats__item.is-on { border-color: var(--c-primary); }
  .mall-cats__n { display: none; }
  .mall-side__help { display: none; }

  .mall-bar { flex-wrap: wrap; gap: 8px; }
  .mall-grid,
  .mall-grid--peers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pd-card__fig { padding: var(--sp-2); }
  .pd-card__body { padding: 10px; }
  .pd-card__name { font-size: var(--fs-sm); }
  .pd-card__add span { display: none; }
  .pd-card__add { padding: 7px; }

  .pd-gallery__main { padding: var(--sp-3); }
  .pd-facts { grid-template-columns: 1fr; }
  .pd-fact { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .pd-fact:last-child { border-bottom: 0; }
  .pd-buy { gap: 8px; }
  .pd-qty { order: 1; }
  .pd-buy__add { order: 2; flex: 1 1 auto; }
  .pd-buy__now { order: 3; flex: 1 1 100%; }
  .pd-spec-grid { grid-template-columns: 1fr; }
  .pd-steps { grid-template-columns: 1fr; gap: var(--sp-2); }

  .cart-head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .cart-row {
    grid-template-columns: 80px minmax(0, 1fr) auto;
    grid-template-areas:
      "fig body sum"
      "fig qty qty";
    row-gap: 10px;
  }
  .cart-row__fig { grid-area: fig; width: 80px; height: 80px; }
  .cart-row__body { grid-area: body; }
  .cart-row__qty { grid-area: qty; justify-self: start; }
  .cart-row__sum { grid-area: sum; }
  .cart-form__grid { grid-template-columns: 1fr; }
  .cart-form__foot { flex-direction: column; align-items: stretch; }
  .cart-form__foot .btn { justify-content: center; }
}

@media (max-width: 560px) {
  /* 手机上也保持两列：一列时每张图 350px 见方，7 件商品要滑十几屏 */
  .mall-grid,
  .mall-grid--peers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mall-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mall-trust li { border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
  .mall-trust li:nth-child(2n) { border-right: 0; }
  .mall-trust li:nth-last-child(-n+2) { border-bottom: 0; }
  .mall-search { height: 44px; }
  .mall-search__btn span { display: none; }
}

/* ==========================================================================
   列表页 v2：商品第一
   --------------------------------------------------------------------------
   页头压成一行（标题 + 搜索），分类做成横排 chips，商品网格紧跟其后。
   服务承诺、采购流程、商城说明整块移除 —— 详情页与询价单页各有一份。
   ========================================================================== */

.mall-top {
  padding: var(--sp-4) 0 var(--sp-3);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
}
.mall-top__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
}
.mall-top__copy { min-width: 0; }
.mall-top__title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.25;
  color: var(--c-ink);
}
.mall-top__sub {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}
.mall-top__sub b { color: var(--c-text); font-variant-numeric: tabular-nums; }
.mall-top .mall-search { flex: 0 1 420px; min-width: 260px; }

.mall-main { padding: var(--sp-3) 0 var(--sp-6); }

.mall-bar {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-height: 0;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
}

/* 分类 chips：横向可滑，窄屏不换行占高度 */
.mall-chips {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mall-chips::-webkit-scrollbar { display: none; }
.mall-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 8px 14px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-full);
  background: var(--c-bg);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  white-space: nowrap;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out),
              color var(--t-fast) var(--e-out);
}
.mall-chip em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
.mall-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.mall-chip.is-on {
  border-color: var(--c-primary);
  background: var(--c-primary);
  color: #fff;
}
.mall-chip.is-on em { color: rgba(255, 255, 255, .78); }

.mall-sortbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.mall-sortbox select { height: 32px; }

/* 四列：一进页就能看到四件商品，7 件只占两行 */
.mall-grid { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }

/* hidden 属性会被 .pd-card 的 display:flex 覆盖，这里显式压回 */
.pd-card[hidden],
.mall-empty[hidden] { display: none !important; }

@media (max-width: 768px) {
  .mall-top { padding: var(--sp-3) 0 var(--sp-2); }
  .mall-top__inner { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .mall-top .mall-search { flex: 1 1 auto; min-width: 0; }
  .mall-sortbox { margin-left: 0; }
  .mall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 分类条吸顶：切分类时不用先滚回页头。
   底部留白用阴影补，避免商品从条下面透出来。 */
.mall-bar {
  position: sticky;
  top: var(--h-header);
  z-index: 5;
  background: var(--c-bg);
  padding-top: var(--sp-2);
}
.mall-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(var(--c-bg), transparent);
}