/*! MOV 商城 · Graphite Minimal（UPG-198）
 * token 源 = 设计师/设计/商城-stitch/stitch_mov_web_ui/graphite_minimal/DESIGN.md（与官网族同 token）
 * 零外链：无 CDN、无字体外链（系统字体栈）、图标=内联 SVG、无外部图片（缺省=本地占位块）
 */
:root {
  --surface: #f9f9f9;
  --surface-bright: #ffffff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f3f3f3;
  --surface-container: #eeeeee;
  --surface-container-high: #e8e8e8;
  --surface-container-highest: #e2e2e2;
  --on-surface: #1a1c1c;
  --on-surface-variant: #444748;
  --outline: #747878;
  --ink-muted: #6a6d6d;             /* 小字浅灰须过 WCAG AA（axe 0 口径·同 192/193） */
  --outline-variant: #c4c7c7;
  --primary: #000000;
  --on-primary: #ffffff;
  --primary-container: #1a1c1c;
  --success: #0a7d33;
  --danger: #b3261e;
  --gutter: 24px;
  --maxw: 1080px;
  --radius-card: 14px;
  --radius-btn: 8px;
  --radius-full: 999px;
  --font-head: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --shadow-float: 0 8px 24px rgba(0, 0, 0, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 顶栏 ───────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: rgba(249, 249, 249, .85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--outline-variant);
}
.header-inner {
  height: 56px; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--on-surface); }
.brand-mark { width: 32px; height: 32px; object-fit: contain; display: block; }
.brand-word { font-family: var(--font-head); font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
.header-actions { display: flex; align-items: center; gap: 12px; }

.cart-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-btn);
  color: var(--on-surface-variant); text-decoration: none;
}
.cart-link:hover { background: var(--surface-container-high); color: var(--on-surface); }
.cart-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary);
  font-size: 11px; font-weight: 600; line-height: 16px; text-align: center;
}
.cart-badge[hidden] { display: none; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; border: 1px solid var(--primary); border-radius: var(--radius-btn);
  background: var(--primary); color: var(--on-primary);
  font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 20px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn-primary:hover { background: var(--primary-container); }
.btn-primary[disabled], .btn-primary[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn-block { width: 100%; padding: 13px 16px; font-size: 15px; line-height: 24px; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--outline); border-radius: var(--radius-btn);
  background: transparent; color: var(--on-surface);
  font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 20px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn-ghost:hover { background: var(--surface-container-high); }
.btn-ghost[disabled] { color: var(--ink-muted); border-color: var(--outline-variant); cursor: not-allowed; }
.btn-text {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 8px; border: 0; background: transparent; color: var(--on-surface);
  font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 20px;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.btn-text:hover { color: var(--primary-container); }

/* ── 主区 / 状态 ─────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 80px var(--gutter) 48px; flex: 1; }
.h1 { margin: 0; font-family: var(--font-head); font-size: 32px; font-weight: 700; line-height: 40px; letter-spacing: -.01em; }
.h2 { margin: 0; font-family: var(--font-head); font-size: 20px; font-weight: 600; line-height: 28px; }

.state { padding: 56px 24px 72px; text-align: center; color: var(--on-surface-variant); }
.state[hidden] { display: none; }
.state h2 { margin: 0 0 8px; font-family: var(--font-head); font-size: 20px; font-weight: 600; line-height: 28px; color: var(--on-surface); }
.state p { margin: 0 0 16px; font-size: 14px; line-height: 22px; }
.state a { color: var(--on-surface); }

.skeleton { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 8px 0 32px; }
@media (max-width: 1023px) { .skeleton { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .skeleton { grid-template-columns: 1fr; } }
.skeleton[hidden] { display: none; }
.sk-card { height: 260px; border-radius: var(--radius-card); border: 1px solid var(--outline-variant); background: var(--surface-container-lowest); }

/* ── 列表页：搜索 / 分类 / 网格 ─────────────────────── */
.bar { display: flex; flex-direction: column; gap: 16px; padding: 24px 0 8px; }
.search {
  display: flex; align-items: center; gap: 10px; padding: 0 16px; max-width: 640px;
  border: 1px solid var(--outline-variant); border-radius: var(--radius-btn);
  background: var(--surface-container-lowest); min-height: 46px;
}
.search:focus-within { border-color: var(--primary); }
.search svg { flex: none; color: var(--on-surface-variant); }
.search input {
  flex: 1; border: 0; outline: 0; background: transparent; min-width: 0;
  font-family: var(--font-body); font-size: 15px; line-height: 26px; color: var(--on-surface);
}
.search input::placeholder { color: var(--ink-muted); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips[hidden] { display: none; }
.chip {
  padding: 8px 16px; border: 1px solid transparent; border-radius: var(--radius-full);
  background: var(--surface-container); color: var(--on-surface-variant);
  font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 20px; cursor: pointer;
}
.chip:hover { background: var(--surface-container-high); }
.chip[aria-pressed="true"] { background: var(--primary-container); color: var(--on-primary); }

/* ── 货架 = 杂志编排（2026-09-21 用户定稿·demo 方案A）：主推 hero（主图可左右滑图集）+ 成对错落 duo；
     衣服是竖的——卡片图统一 3:4，方图裁掉的是搭配信息 ── */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px; padding: 16px 0 24px; }
@media (max-width: 1023px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid[hidden] { display: none; }

.pcard { display: flex; flex-direction: column; gap: 8px; }
.pcard-out .pcard-media > .ph, .pcard-out .ph-img { filter: grayscale(1); }
.pcard-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; }
.pcard-media { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--surface-container); }
.ph-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--surface-container); }
.ph svg { width: 42%; height: 42%; color: #b9bcbc; }
.pcard-badge {
  position: absolute; top: 10px; left: 10px; padding: 2px 10px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .92); border: 1px solid var(--outline-variant);
  color: var(--on-surface-variant); font-size: 12px; font-weight: 500; line-height: 18px;
  backdrop-filter: blur(4px); z-index: 2;
}
.pcard-name { margin: 0; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--on-surface);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard-price { font-family: var(--font-mono); font-size: 17px; font-weight: 700; line-height: 24px; letter-spacing: -.01em; }
.pcard-out .pcard-price { color: var(--on-surface-variant); }

/* 加入衣柜（2026-09-21 用户定稿）：货架唯一动作——价格旁小胶囊，在场不催人；已入=实心确认 */
.pcard-ward {
  flex: none; border: 1px solid var(--outline-variant); background: transparent; color: var(--on-surface-variant);
  font-family: var(--font-body); font-size: 11px; font-weight: 500; line-height: 18px;
  border-radius: var(--radius-full); padding: 4px 11px; cursor: pointer; transition: all .15s ease;
}
.pcard-ward:active { transform: scale(.95); }
.pcard-ward[disabled] { opacity: .5; cursor: default; }
.pcard-ward.in { background: var(--on-surface); border-color: var(--on-surface); color: var(--surface-container-lowest); }

/* duo 错落（仅双列窄屏：右列下沉 16px 造呼吸节奏，hero 占整行不计） */
@media (max-width: 767px) {
  .pcard--duo:nth-child(odd) { transform: translateY(16px); }
  .grid { padding-bottom: 40px; }
}

/* hero 主推位：占整行 + 主图图集左右滑（scroll-snap 原生触摸）+ 计数/圆点 + 渐变信息条 */
.pcard--hero { grid-column: 1 / -1; }
.pcard--hero .pcard-media { aspect-ratio: 3 / 3.4; border-radius: 16px; }
.hero-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide { flex: none; width: 100%; height: 100%; scroll-snap-align: start; }
.hero-cnt {
  position: absolute; top: 12px; right: 12px; z-index: 2; pointer-events: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: #fff;
  background: rgba(0, 0, 0, .38); border-radius: var(--radius-full); padding: 4px 10px; backdrop-filter: blur(4px);
}
.hero-dots { position: absolute; bottom: 96px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.hero-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: all .2s ease; }
.hero-dots i.on { width: 14px; border-radius: 3px; background: #fff; }
.hero-veil {
  position: absolute; inset: auto 0 0 0; z-index: 1; pointer-events: none;
  padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); color: #fff;
}
.hero-veil .pcard-name { color: #fff; font-size: 18px; font-weight: 600; line-height: 24px; }
.hero-veil .pcard-name a { color: inherit; text-decoration: none; pointer-events: auto; }
.hero-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 7px; }
.hero-veil .pcard-price { color: #fff; }
.hero-veil .pcard-ward { pointer-events: auto; color: #fff; border-color: rgba(255, 255, 255, .55); background: transparent; }
.hero-veil .pcard-ward.in { background: rgba(255, 255, 255, .92); border-color: transparent; color: var(--on-surface); }

/* 能力卡保持盒式（编辑编排只适用于商品货架） */
.ccard { padding: 14px; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-card); }

/* ── 能力类目（能力市场并入商城）：无价无库存卡——说明/元信息/徽标/明细 ── */
.ccard .pcard-name { min-height: 0; }
.ccard-desc {
  margin: 0; color: var(--on-surface-variant); font-size: 13px; line-height: 20px; min-height: 40px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ccard-meta { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.ccard-badge {
  display: inline-block; padding: 2px 10px; border: 1px solid var(--outline-variant); border-radius: var(--radius-full);
  color: var(--on-surface-variant); font-size: 12px; line-height: 18px;
}
.ccard-detail { border-top: 1px solid var(--outline-variant); padding-top: 8px; color: var(--on-surface-variant); font-size: 12px; line-height: 20px; }
.ccard-detail code {
  display: inline-block; margin: 0 4px 4px 0; padding: 1px 6px; border-radius: 6px;
  background: var(--surface-container); font-family: var(--font-mono); font-size: 12px;
}

.more-wrap { display: flex; justify-content: center; padding: 4px 0 16px; }
.more-wrap[hidden] { display: none; }

/* ── 详情页（2026-09-17 用户令：按桌面参考稿版式/配色重构） ─────────────
   参考：#/Desktop/index.html —— 1.7fr/0.95fr 两栏 · 大图 720 · 浮动胶囊 · 规格方块钮 ·
   配送方式 · 材质成分 · 发货退换折叠 · 大字价格 · 数量步进 · 双钮 · 相关推荐。
   配色作用域限本页（--pd-*），不影响商城其余页面的石墨体系。 */
.pd-page {
  /* 2026-09-17 用户令：去蓝·石墨风——选中态/主钮=墨黑；小字与白字底用近墨黑（对比度 ≥4.5:1·axe 0） */
  --pd-blue: #000000;      /* 选中环/圆点/价格强调 */
  --pd-blue-dark: #1a1c1c; /* 白字底/描边钮/小字链接 */
  --pd-text: #1a1c1c; --pd-muted: #6a6d6d;
  --pd-line: #e8e8e8; --pd-soft: #f3f3f3;
}
.pd { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, .95fr); gap: 30px; align-items: start; }
@media (max-width: 1000px) { .pd { grid-template-columns: 1fr; gap: 24px; } }
.pd[hidden] { display: none; }

.pd-gallery { position: relative; display: flex; flex-direction: column; gap: 12px; }
​.pd-stage { position: relative; touch-action: pan-y; user-select: none; }
.pd-stage:focus-visible { outline: 2px solid var(--pd-blue); outline-offset: 3px; }
.pd-nav {
  position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; margin-top: -23px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--pd-text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08); font-size: 24px; line-height: 1; cursor: pointer;
}
.pd-nav:hover { background: #fff; }
.pd-nav[hidden] { display: none; }
.pd-nav-prev { left: 16px; }
.pd-nav-next { right: 16px; }
.pd-dots { position: absolute; left: 50%; bottom: 20px; z-index: 2; display: flex; gap: 8px; transform: translateX(-50%); }
.pd-dots[hidden] { display: none; }
.pd-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #777; }
.pd-dot.active { width: 22px; border-radius: 99px; background: var(--pd-blue); }
.pd-swatches { display: flex; gap: 15px; }
.pd-swatch { width: 46px; height: 46px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
.pd-swatch.active { border-color: var(--pd-blue); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--pd-blue); }
.pd-main { position: relative; width: 100%; height: clamp(780px, 86vh, 960px); border-radius: 18px; overflow: hidden; background: #f3f3f3; }   /* 2026-09-17 用户令：大卡放大（原 720） */
@media (max-width: 1000px) { .pd-main { height: clamp(460px, 74vh, 680px); } }
.pd-main .ph svg { width: 22%; height: 22%; }
.pd-main .ph-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-main .ph-img.fit-contain { object-fit: contain; }   /* 试穿图完整显示（竖版全身防裁切） */
.pd-gallery-actions { position: absolute; left: 22px; right: 22px; top: 22px; z-index: 2; display: flex; justify-content: space-between; }
.pd-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px;
  border: 0; border-radius: var(--radius-full); background: rgba(255, 255, 255, .94); color: var(--pd-text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06); font-size: 15px; line-height: 20px;
}
.pd-pill[hidden] { display: none; }
.pd-pill-try { cursor: pointer; color: var(--pd-text); }
.pd-pill-try:hover { background: #fff; }
.pd-pill-brand { color: var(--pd-text); }
.pd-info { display: flex; flex-direction: column; }
.pd-title { margin: 0 0 8px; font-size: 30px; line-height: 1.25; font-weight: 650; color: var(--pd-text); }
.pd-store { margin: 0 0 22px; color: var(--pd-muted); font-size: 14px; line-height: 20px; }
.pd-store-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.pd-store-link:hover #pdStoreName { color: var(--pd-blue-dark); text-decoration: underline; }
.pd-chev { color: var(--pd-muted); }
.pd-section { margin-bottom: 25px; }
.pd-label { margin-bottom: 13px; font-size: 18px; font-weight: 600; color: var(--pd-text); }
.pd-sizes { display: flex; flex-wrap: wrap; gap: 12px; }
.pd-size {
  min-width: 82px; padding: 9px 18px; border: 1px solid #c4c7c7; border-radius: 9px;
  background: #fff; color: #1a1c1c; font-family: var(--font-body); font-size: 15px; line-height: 22px; cursor: pointer;
}
.pd-size.active { background: var(--pd-blue-dark); border-color: var(--pd-blue-dark); color: #fff; }
.pd-size.out { border-style: dashed; color: var(--pd-muted); cursor: not-allowed; }
.pd-size-static { cursor: default; }
/* UPG-254 R1 多规格选择器（颜色×尺码组合；沿用 09-17 版式语言：白底/蓝选中/虚线缺货） */
.pd-pills { display: flex; flex-wrap: wrap; gap: 12px; }
#pdSkuGroup button.pd-pill {
  min-width: 64px; padding: 9px 18px; border: 1px solid #c4c7c7; border-radius: 9px;
  background: #fff; color: #1a1c1c; font-family: var(--font-body); font-size: 15px; line-height: 22px; cursor: pointer;
}
#pdSkuGroup button.pd-pill.on { background: var(--pd-blue-dark); border-color: var(--pd-blue-dark); color: #fff; }
#pdSkuGroup button.pd-pill.out { border-style: dashed; color: var(--pd-muted); text-decoration: line-through; }
#pdSkuGroup button.pd-pill[disabled] { background: #f3f3f3; border-style: dashed; color: var(--pd-muted); cursor: not-allowed; }
/* UPG-254 R1 服饰素材位（上身图/尺码表·并入详情区） */
.pd-cloth .h3 { margin: 14px 0 0; font-size: 16px; font-weight: 600; line-height: 24px; color: var(--pd-text); }
.pd-cloth .h3:first-child { margin-top: 0; }
.mat-imgs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.mat-img { width: 220px; max-width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #f3f3f3; }
.mat-img .ph svg { width: 28%; height: 28%; }
.pd-ship[disabled] { border-style: dashed; color: var(--pd-muted); cursor: not-allowed; }
.pd-delivery { display: flex; flex-wrap: wrap; gap: 12px; }
.pd-delivery[hidden] { display: none; }
.pd-material { font-size: 15px; line-height: 1.65; color: #444748; }
.pd-material[hidden] { display: none; }
.pd-material strong { display: block; margin-bottom: 4px; font-size: 17px; color: var(--pd-text); }
.pd-material p { margin: 0; white-space: pre-line; }   /* 成分多行照参考稿分行显示 */
.pd-expand { margin-bottom: 8px; }
.pd-expand summary {
  display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; cursor: pointer;
  border-top: 1px solid var(--pd-line); color: #1a1c1c; font-size: 16px; list-style: none;
}
.pd-expand summary::-webkit-details-marker { display: none; }
.pd-expand-body { padding: 0 0 14px; color: var(--pd-muted); font-size: 14px; line-height: 22px; }
.pd-expand-body p { margin: 0 0 6px; }
.pd-price { margin: 22px 0; font-family: var(--font-mono); font-size: 38px; font-weight: 650; line-height: 1.1; color: var(--pd-blue); }
.pd-stock { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 18px; color: var(--pd-muted); font-size: 13px; line-height: 20px; }
.pd-stock .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.pd-stock.out .dot { background: var(--outline); }
.pd-quantity { display: flex; width: 175px; height: 48px; margin-bottom: 20px; overflow: hidden; border: 1px solid var(--pd-line); border-radius: 12px; background: #f3f3f3; }
.pd-quantity button { width: 52px; border: 0; background: transparent; color: #444748; font-size: 22px; line-height: 1; cursor: pointer; }
.pd-quantity button[disabled] { color: #c4c7c7; cursor: not-allowed; }
.pd-quantity span { flex: 1; display: grid; place-items: center; background: #fff; font-family: var(--font-mono); font-size: 17px; }
.pd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 650px) { .pd-actions { grid-template-columns: 1fr; } }
.pd-btn { height: 56px; border-radius: 12px; font-family: var(--font-body); font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.pd-btn-cart { border: 1px solid var(--pd-blue-dark); background: var(--pd-blue-dark); color: #fff; }
.pd-btn-buy { border: 1px solid var(--pd-blue-dark); background: #fff; color: var(--pd-blue-dark); }
.pd-btn:hover { filter: brightness(.97); }
.pd-btn[disabled] { opacity: .55; cursor: not-allowed; }
.pd-btn[hidden] { display: none; }
.pd-ship { margin: 14px 0 0; color: var(--pd-muted); font-size: 13px; line-height: 20px; }
.pd-ship[hidden] { display: none; }

.pd-reco-title { display: flex; align-items: center; gap: 12px; margin: 38px 0 16px; font-size: 25px; font-weight: 650; color: var(--pd-text); }
.pd-reco-title[hidden] { display: none; }
.pd-reco-title::before { content: ""; width: 5px; height: 24px; border-radius: 5px; background: var(--pd-blue); }
.pd-reco { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1000px) { .pd-reco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 650px) { .pd-reco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pd-reco[hidden] { display: none; }
.pd-card { overflow: hidden; background: #fff; border: 1px solid #e8e8e8; border-radius: 13px; transition: transform .18s, box-shadow .18s; }
.pd-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0, 0, 0, .06); }
.pd-card-user { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.pd-avatar {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #eeeeee; color: var(--pd-blue-dark); font-size: 13px; line-height: 1; font-weight: 600;
}
.pd-card-user-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 20px; color: var(--pd-text); }
.pd-card-user-tag { flex: none; font-size: 12px; line-height: 18px; color: var(--pd-blue-dark); border: 1px solid #c4c7c7; border-radius: 999px; padding: 0 8px; }
.pd-card-img { display: block; width: 100%; aspect-ratio: 1.05 / 1; overflow: hidden; background: #f3f3f3; }
.pd-card-img .ph-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── 购物车 ─────────────────────────────────────────── */
.cart-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 24px; }
.cart-meta { color: var(--on-surface-variant); font-size: 13px; line-height: 20px; }
.cart-meta strong { color: var(--on-surface); font-weight: 600; }
.cart-grid { display: grid; grid-template-columns: 8fr 4fr; gap: 24px; align-items: start; }
@media (max-width: 1023px) { .cart-grid { grid-template-columns: 1fr; } }
.cart-grid[hidden] { display: none; }
.cart-list { display: flex; flex-direction: column; gap: 12px; }
.cart-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px; background: var(--surface-container-low); border-radius: var(--radius-card);
}
.cart-bar label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; line-height: 20px; cursor: pointer; }
.ck { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.cart-bar .link-danger { border: 0; background: transparent; color: var(--on-surface-variant); font-family: var(--font-body); font-size: 13px; line-height: 20px; cursor: pointer; text-decoration: none; }
.cart-bar .link-danger:hover { color: var(--danger); text-decoration: underline; }

.citem {
  display: grid; grid-template-columns: 24px 56px 1fr auto; gap: 16px; align-items: center;
  padding: 16px 20px; background: var(--surface-container-low); border-radius: var(--radius-card);
}
@media (max-width: 767px) {
  .citem {
    grid-template-columns: 24px 56px minmax(0, 1fr);
    grid-template-areas: "ck media main" "side side side";
    row-gap: 10px; align-items: start;
  }
  .citem > .ck { grid-area: ck; }
  .citem-media { grid-area: media; }
  .citem-main { grid-area: main; }
  .citem-side { grid-area: side; }
}
.citem.out { background: rgba(243, 243, 243, .6); }
.citem-media { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--surface-container-highest); }
.citem-media .ph svg { width: 55%; height: 55%; }
.citem-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.citem-name { margin: 0; font-size: 15px; font-weight: 500; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citem-name a { text-decoration: none; }
.citem-name a:hover { text-decoration: underline; }
.citem-spec { margin: 0; color: var(--on-surface-variant); font-size: 13px; line-height: 20px; }
.citem-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-full);
  background: var(--surface-container-highest); color: var(--on-surface-variant); font-size: 12px; line-height: 18px; }
.citem-side { display: flex; align-items: center; gap: 20px; }
@media (max-width: 767px) { .citem-side { justify-content: space-between; flex-wrap: wrap; row-gap: 8px; } }
.citem-unit { font-family: var(--font-mono); color: var(--on-surface-variant); font-size: 14px; line-height: 22px; }
.citem-sub { font-family: var(--font-mono); font-size: 16px; font-weight: 700; line-height: 24px; min-width: 78px; text-align: right; }
.citem-del { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 0; border-radius: 8px; background: transparent; color: var(--on-surface-variant); cursor: pointer; }
.citem-del:hover { background: var(--surface-container-high); color: var(--danger); }

.cart-summary {
  display: flex; flex-direction: column; gap: 16px; padding: 24px;
  background: var(--surface-container-low); border-radius: var(--radius-card);
  position: sticky; top: 72px;
}
.sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--on-surface-variant); font-size: 14px; line-height: 22px; }
.sum-row .v { font-family: var(--font-mono); color: var(--on-surface); font-size: 15px; }
.sum-hr { height: 1px; background: rgba(196, 199, 199, .6); }
.sum-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sum-total .k { font-size: 15px; font-weight: 600; }
.sum-total .v { font-family: var(--font-mono); font-size: 24px; font-weight: 700; line-height: 32px; }
.sum-note { color: var(--ink-muted); font-size: 12px; line-height: 18px; }
.cart-summary .btn-primary { display: none; }
@media (min-width: 1024px) { .cart-summary .btn-primary { display: inline-flex; } }

.cart-fixed {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  background: rgba(249, 249, 249, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--outline-variant);
}
@media (min-width: 1024px) { .cart-fixed { display: none; } }
.cart-fixed-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 10px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cart-fixed .total { display: flex; align-items: baseline; gap: 8px; }
.cart-fixed .total .k { color: var(--on-surface-variant); font-size: 12px; }
.cart-fixed .total .v { font-family: var(--font-mono); font-size: 20px; font-weight: 700; }

/* ── 页脚 ───────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--outline-variant); margin-top: 24px; }
.site-foot .foot-in {
  max-width: var(--maxw); margin: 0 auto; padding: 20px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: var(--ink-muted); font-size: 12px; line-height: 18px;
}
.site-foot a { color: var(--ink-muted); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.site-foot .beian { height: 14px; vertical-align: middle; margin-right: 3px; }

/* ── 轻提示 ─────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(8px);
  z-index: 60; max-width: min(88vw, 420px); padding: 10px 18px;
  background: var(--primary-container); color: var(--on-primary);
  border-radius: var(--radius-full); font-size: 13px; line-height: 20px; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 宽屏适配（UPG-224）：容器分级扩宽 + gutter 递进（4K 不再窄条） ── */
@media (min-width: 1440px) { :root { --maxw: 1280px; --gutter: 32px; } }
@media (min-width: 1920px) { :root { --maxw: 1440px; } }
@media (min-width: 2560px) { :root { --maxw: 1600px; --gutter: 40px; } }

@media (min-width: 1440px) {
  .grid, .skeleton { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ── 结算页 + 支付（UPG-227） ────────────────────────── */
.co-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.co-grid[hidden] { display: none; }
@media (min-width: 1024px) { .co-grid { grid-template-columns: 1fr 380px; } }
.co-col { display: flex; flex-direction: column; gap: 24px; }
.co-card { background: var(--surface-container-low); border-radius: var(--radius-card); padding: 24px; }
.co-card > .h2 { margin-bottom: 12px; }
.co-addrs { display: flex; flex-direction: column; gap: 10px; }
.co-addr {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--outline-variant); border-radius: var(--radius-btn);
  background: var(--surface-bright); cursor: pointer;
}
.co-addr:hover { border-color: var(--outline); }
.co-addr.sel { border-color: var(--primary); }
.co-addr input { margin-top: 4px; flex: none; }
.co-addr .n { font-weight: 600; font-size: 14px; line-height: 22px; }
.co-addr .m { color: var(--on-surface-variant); font-size: 13px; line-height: 20px; }
.co-items { display: flex; flex-direction: column; gap: 8px; }
.co-item { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 22px; color: var(--on-surface-variant); }
.co-item .v { font-family: var(--font-mono); color: var(--on-surface); white-space: nowrap; }
.co-match { display: flex; justify-content: space-between; gap: 12px; }
.co-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.co-actions[hidden] { display: none; }
.co-pay { margin-top: 24px; border: 1px solid var(--outline-variant); }
.co-pay-state { display: flex; flex-direction: column; gap: 10px; }
.co-pay-state[hidden] { display: none; }
.co-pay-state .lead { font-family: var(--font-head); font-size: 18px; font-weight: 600; line-height: 26px; }
.co-pay-state p { margin: 0; font-size: 14px; line-height: 22px; color: var(--on-surface-variant); }
.co-status.ok { color: var(--success); }
.co-status.err { color: var(--danger); }

/* 订单摘要·收货地址（2026-09-16 用户令：地址进摘要·单「获取」动作） */
.sum-addr { display: flex; flex-direction: column; gap: 10px; }
.sum-addr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--on-surface-variant); font-size: 14px; line-height: 22px; }
.btn-fetch { padding: 4px 12px; font-size: 13px; }
.sum-addr .co-addr { padding: 10px 12px; }
.co-monosem { font-family: var(--font-mono); font-size: 13px; word-break: break-all; }
.co-tag { display: inline-block; padding: 1px 8px; border-radius: var(--radius-full); background: var(--surface-container-high); font-size: 12px; line-height: 18px; color: var(--on-surface-variant); }

/* ── 登录下拉（2026-09-16 用户令）：页头「登录」钮 + 登入码 + 下载 App（六页共享·mall.js 注入） ── */
.login-wrap { position: relative; }
.login-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: 216px; padding: 16px; text-align: center;
  background: var(--surface-bright); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-card); box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}
.login-pop[hidden] { display: none; }
.login-pop .qr-frame {
  width: 168px; height: 168px; margin: 0 auto 12px; padding: 12px;
  background: var(--surface-container-lowest); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-btn); display: flex; align-items: center; justify-content: center;
}
.login-pop .qr-box { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.login-pop .qr-box svg { width: auto; height: auto; max-width: 100%; max-height: 100%; display: block; }
.login-pop .pop-tip { margin: 0 0 12px; color: var(--on-surface-variant); font-size: 13px; line-height: 20px; }
.login-pop .btn-block { display: flex; width: 100%; }
.login-pop .login-pop-ver { margin: 8px 0 0; color: var(--ink-muted); font-size: 12px; line-height: 16px; }
.login-pop .login-pop-ver[hidden] { display: none; }

/* ── 账户菜单与身份切换器（UPG-264）：登录入口 + 单账号多角色直达 ── */
.acct-slot { position: relative; }
.acct-login { color: var(--on-surface); text-decoration: none; font-size: 14px; line-height: 32px; }
.acct-login:hover { text-decoration: underline; }
.acct-menu { position: relative; }
.acct-sum { cursor: pointer; list-style: none; font-size: 14px; line-height: 32px; color: var(--on-surface); }
.acct-sum::-webkit-details-marker { display: none; }
.acct-menu[open] .acct-sum { color: var(--primary); }
.acct-sum.btn-primary { color: var(--on-primary); line-height: 20px; }   /* 已登录：壳内主钮形态 */
.acct-menu[open] .acct-sum.btn-primary { color: var(--on-primary); background: var(--primary-container); }
.acct-pop {
  position: absolute; right: 0; top: 38px; z-index: 60; min-width: 200px;
  background: var(--surface-bright); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-card); box-shadow: 0 8px 24px rgba(0,0,0,.06); padding: 6px;
}
.acct-head { padding: 8px 10px; font-size: 12px; color: var(--on-surface-variant); border-bottom: 1px solid var(--outline-variant); margin-bottom: 4px; }
.acct-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; color: var(--on-surface); font-size: 14px; text-decoration: none; cursor: pointer; border-radius: 8px; }
.acct-item:hover { background: var(--surface-container-low); }
.acct-item .acct-sub { font-size: 12px; color: var(--on-surface-variant); }
.acct-out { color: var(--danger); }
/* ── UPG-268 dsh 意图层：搜索框指令结果卡（无聊天外观） ── */
.intent-card { margin: 10px 16px; padding: 12px 14px; background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: 12px; }
.ic-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.ic-sum { font-size: 13px; color: var(--on-surface-variant); line-height: 20px; }
.ic-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--outline-variant); }
.ic-act { display: inline-block; margin: 8px 8px 0 0; padding: 6px 12px; border: 1px solid var(--outline-variant); border-radius: 999px; font-size: 13px; text-decoration: none; color: inherit; }

/* ── 一键试穿（2026-09-17 用户令）：试穿图块（插在原图上方·原图被顶下去）＋徽标＋生成中 ── */
.pd-ai-badge {
  position: absolute; left: 16px; bottom: 16px; z-index: 3; padding: 4px 12px; border-radius: var(--radius-full);
  background: #000; color: #fff; font-size: 12px; line-height: 18px;
}
.pd-ai-loading {
  position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(255,255,255,.86); color: var(--pd-text); font-size: 14px;
}
.pd-ai-loading[hidden] { display: none; }
.pd-spin { width: 16px; height: 16px; border: 2px solid var(--outline-variant); border-top-color: #000; border-radius: 50%; animation: pd-spin 0.9s linear infinite; }
@keyframes pd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pd-spin { animation: none; } }

/* ── 试穿说明面板（2026-09-17 用户令：点不动时要讲清情况·给恢复路径） ── */
.pd-ai-note {
  border: 1px solid var(--outline-variant); border-radius: 14px; padding: 14px 16px; margin-top: 12px;
  background: #fafafa; color: var(--pd-text);
}
.pd-ai-note[hidden] { display: none; }
.pd-ai-note-t { margin: 0; font-size: 14px; line-height: 22px; }
.pd-ai-note-s { margin: 4px 0 12px; font-size: 12px; line-height: 20px; color: var(--on-surface-variant); }
.pd-ai-bind {
  padding: 8px 18px; cursor: pointer; font-size: 13px; color: var(--pd-text);
  border: 1px solid var(--pd-text); border-radius: var(--radius-full); background: #fff;
}
.pd-ai-bind:disabled { opacity: .5; cursor: default; }

.pd-ai-retry { margin-left: 10px; padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--on-surface-variant);
  border: 0; background: none; text-decoration: underline; }
.pd-ai-bind[hidden] { display: none; }

/* ── 我的订单列表（D1·2026-09-18）：与购物车/商品同卡片语言 ── */
.od-list{display:flex;flex-direction:column;gap:12px}
.od-item{display:block;padding:14px 16px;border:1px solid var(--line,#e6e8ee);border-radius:12px;
  background:var(--s1,#fff);color:inherit;text-decoration:none;transition:box-shadow .15s}
.od-item:hover{box-shadow:0 2px 10px rgba(20,26,40,.06)}
.od-top{display:flex;align-items:center;gap:10px}
.od-title{flex:1;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.od-badge{flex:none;font-size:12px;padding:2px 8px;border-radius:999px;background:#eef0f4;color:#5b6272}
.od-badge.st-ok{background:#e6f5ee;color:#0f8a5f}
.od-badge.st-wait{background:#fdf1e6;color:#8a5a0f}
.od-badge.st-off{background:#f0f1f4;color:#8b91a1}
.od-sub{font-size:12.5px;color:#8b91a1;margin-top:6px}
.od-bottom{display:flex;align-items:baseline;justify-content:space-between;margin-top:10px}
.od-amt{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.od-time{font-size:12px;color:#8b91a1}

/* 治理审计 D1b（2026-09-19）：App 内嵌时模板级隐藏页头「下载 App」静态钮——
   boot 前即生效（html.in-app 由 mall.js head 段注入），消 JS 拆除闪现与失败自跳 */
html.in-app .site-header .btn-primary { display: none; }

/* 2026-09-21 用户令（截图）：App 内头部单行化——类目 chips 上移与购物车同行（App 顶栏正下方）；
   logo/MOV 品牌行撤；原 .bar 整条撤（搜索框已收归 MOV 输入框 + chips 已上移） */
html.in-app .site-header .brand { display: none; }
html.in-app .site-header .header-inner { gap: 10px; }
html.in-app .site-header .chips { flex: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
html.in-app .site-header .chips::-webkit-scrollbar { display: none; }
html.in-app .site-header .chips .chip { flex: none; }
html.in-app main .bar { display: none; }