/* ==========================================================================
   北鸣跨境 · 设计系统 v240
   单一样式层：令牌 → 排版 → 组件 → 布局 → 动效 → 响应式
   只做覆盖与重排，不改变选中器契约。作用域：html[data-ds]
   ========================================================================== */

/* ---------- 1. 令牌 ---------- */
html[data-ds]{
  /* 中性色（浅） */
  --ds-paper:#F7F8F4;
  --ds-surface:#FFFFFF;
  --ds-surface-2:#F1F2EC;
  --ds-ink:#171A16;
  --ds-ink-2:#3D4239;
  --ds-muted:#5E645A;
  --ds-line:#E2E4DC;
  --ds-line-strong:#CFD2C7;

  /* 强调色：荧光黄绿，克制使用 */
  --ds-accent:#D2FA41;
  --ds-accent-press:#C1EB2B;
  --ds-accent-ink:#1A2113;
  --ds-accent-soft:#EEFBC4;
  --ds-accent-line:#C8DC7E;
  --ds-focus:#7BA814;

  /* 语义色 */
  --ds-ok:#2E7D4F;
  --ds-ok-soft:#E6F4EA;
  --ds-warn:#8A5A00;
  --ds-warn-soft:#FCF0D8;
  --ds-bad:#B3261E;
  --ds-bad-soft:#FBE9E7;
  --ds-info:#2C5C8F;
  --ds-info-soft:#E8F0F9;

  /* 间距（4pt 栅格） */
  --ds-1:4px; --ds-2:8px; --ds-3:12px; --ds-4:16px;
  --ds-5:20px; --ds-6:24px; --ds-8:32px; --ds-10:40px;

  /* 圆角 */
  --ds-r-xs:6px; --ds-r-sm:8px; --ds-r-md:10px; --ds-r-lg:14px; --ds-r-pill:999px;

  /* 字级 */
  --ds-f-xs:12px; --ds-f-sm:13px; --ds-f-base:15px; --ds-f-md:16px;
  --ds-f-lg:18px; --ds-f-xl:22px; --ds-f-2xl:28px; --ds-f-3xl:34px;

  /* 阴影：只在需要层级时出现 */
  --ds-shadow-1:0 1px 2px rgba(20,24,18,.05);
  --ds-shadow-2:0 6px 18px -8px rgba(20,24,18,.18);
  --ds-shadow-3:0 24px 60px -24px rgba(20,24,18,.35);

  /* 动效 */
  --ds-ease:cubic-bezier(.2,.7,.2,1);
  --ds-ease-out:cubic-bezier(.16,1,.3,1);
  --ds-t-fast:150ms;
  --ds-t-base:220ms;
  --ds-t-slow:320ms;

  /* 内容宽度 */
  --ds-shell:1360px;
  --ds-gutter:32px;
}

html[data-ds][data-color-mode=dark]{
  --ds-paper:#121512;
  --ds-surface:#1A1E1A;
  --ds-surface-2:#20251F;
  --ds-ink:#EFF2E9;
  --ds-ink-2:#C9D0C2;
  --ds-muted:#A6AEA0;
  --ds-line:#2C322B;
  --ds-line-strong:#3A4238;
  --ds-accent:#D2FA41;
  --ds-accent-press:#BEE72F;
  --ds-accent-ink:#151B0E;
  --ds-accent-soft:#2A3517;
  --ds-accent-line:#4C5E24;
  --ds-focus:#D2FA9B;
  --ds-ok:#7FD3A0; --ds-ok-soft:#1C2C22;
  --ds-warn:#F0C069; --ds-warn-soft:#2E2717;
  --ds-bad:#F2A09A; --ds-bad-soft:#33201E;
  --ds-info:#9CC3EA; --ds-info-soft:#1B2634;
  --ds-shadow-1:0 1px 2px rgba(0,0,0,.35);
  --ds-shadow-2:0 8px 24px -10px rgba(0,0,0,.6);
  --ds-shadow-3:0 30px 80px -30px rgba(0,0,0,.8);
}

/* ---------- 2. 基础与排版 ---------- */
html[data-ds] body{
  background:var(--ds-paper);
  color:var(--ds-ink);
  font-family:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  font-size:var(--ds-f-base);
  line-height:1.55;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html[data-ds] body ::selection{background:var(--ds-accent);color:var(--ds-accent-ink)}
html[data-ds] :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ds-focus);
  outline-offset:2px;
  border-radius:var(--ds-r-xs);
}
html[data-ds] .sf-ui,
html[data-ds] .shell{color:var(--ds-ink)}
html[data-ds] .sf-ui .sf-shell,
html[data-ds] .shell.marketplace-heading{width:min(var(--ds-shell),calc(100% - var(--ds-gutter)*2));margin-inline:auto}
html[data-ds] .sf-ui :is(h1,h2,h3,h4){
  color:var(--ds-ink);
  letter-spacing:-.012em;
  line-height:1.25;
  font-weight:650;
}
html[data-ds] .sf-ui h1{font-size:var(--ds-f-3xl)}
html[data-ds] .sf-ui h2{font-size:var(--ds-f-xl)}
html[data-ds] .sf-ui h3{font-size:var(--ds-f-md)}
html[data-ds] .sf-ui p{color:var(--ds-ink-2)}
html[data-ds] .sf-ui .muted,
html[data-ds] .sf-ui small{color:var(--ds-muted)}

/* ---------- 3. 按钮 ---------- */
html[data-ds] .sf-ui .button,
html[data-ds] .button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:42px;padding:0 16px;
  border-radius:var(--ds-r-sm);
  border:1px solid var(--ds-line-strong);
  background:var(--ds-surface);
  color:var(--ds-ink);
  font-size:var(--ds-f-sm);
  font-weight:550;
  line-height:1;
  text-decoration:none;
  box-shadow:none;
  cursor:pointer;
  transition:background-color var(--ds-t-fast) var(--ds-ease),
             border-color var(--ds-t-fast) var(--ds-ease),
             color var(--ds-t-fast) var(--ds-ease),
             transform var(--ds-t-fast) var(--ds-ease),
             box-shadow var(--ds-t-fast) var(--ds-ease);
}
html[data-ds] .sf-ui .button:hover,
html[data-ds] .button:hover{border-color:var(--ds-ink-2);background:var(--ds-surface-2);transform:none}
html[data-ds] .sf-ui .button:active,
html[data-ds] .button:active{transform:translateY(1px)}
html[data-ds] .sf-ui .button.primary,
html[data-ds] .button.primary{
  background:var(--ds-accent)!important;
  border-color:var(--ds-accent)!important;
  color:var(--ds-accent-ink)!important;
  font-weight:600;
  box-shadow:none!important;
}
html[data-ds] .sf-ui .button.primary:hover,
html[data-ds] .button.primary:hover{background:var(--ds-accent-press)!important;border-color:var(--ds-accent-press)!important;transform:none!important}
html[data-ds] .sf-ui .button.primary:disabled,
html[data-ds] .button:disabled,
html[data-ds] .button[aria-disabled=true]{
  background:var(--ds-surface-2)!important;border-color:var(--ds-line)!important;color:var(--ds-muted)!important;
  cursor:not-allowed;transform:none!important;opacity:1;
}
html[data-ds] .button.text,
html[data-ds] .sf-ui .button.text{
  background:transparent!important;border-color:transparent!important;color:var(--ds-ink)!important;
  padding-inline:10px;min-height:38px;
}
html[data-ds] .button.text:hover{background:var(--ds-surface-2);border-color:transparent}
html[data-ds] .button.icon-only{min-width:42px;padding:0}

/* ---------- 4. 表单 ---------- */
html[data-ds] :is(.field,.sf-filter-field){display:flex;flex-direction:column;gap:6px;font-size:var(--ds-f-sm);color:var(--ds-ink-2)}
html[data-ds] :is(.field,.sf-filter-field)>span{font-weight:550;color:var(--ds-ink)}
html[data-ds] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea),
html[data-ds] .sf-ui :is(input:not([type=checkbox]):not([type=radio]),select,textarea){
  min-height:42px;padding:0 12px;
  border:1px solid var(--ds-line-strong);
  border-radius:var(--ds-r-sm);
  background:var(--ds-surface);
  color:var(--ds-ink);
  font-size:var(--ds-f-sm);
  transition:border-color var(--ds-t-fast) var(--ds-ease),box-shadow var(--ds-t-fast) var(--ds-ease),background-color var(--ds-t-fast) var(--ds-ease);
}
html[data-ds] textarea{min-height:104px;padding:10px 12px;line-height:1.55}
html[data-ds] :is(input,select,textarea):hover{border-color:var(--ds-ink-2)}
html[data-ds] :is(input,select,textarea):focus{
  outline:none;border-color:var(--ds-focus);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ds-focus) 22%,transparent);
}
html[data-ds] :is(input,select,textarea)[aria-invalid=true]{border-color:var(--ds-bad)}
html[data-ds] input::placeholder,html[data-ds] textarea::placeholder{color:var(--ds-muted)}

/* ---------- 5. 站点头部 ---------- */
html[data-ds] .sf-site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--ds-paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--ds-line);
}
html[data-ds] .sf-site-header .sf-header-inner{min-height:64px;gap:28px}
html[data-ds] .sf-site-header .sf-brand{font-size:20px;font-weight:680;letter-spacing:-.015em}
html[data-ds] .sf-site-header .sf-logo{width:34px;height:34px;border-radius:8px;border:1px solid var(--ds-line)}
html[data-ds] .sf-site-header .sf-site-nav>a{font-size:var(--ds-f-sm);color:var(--ds-ink-2);border-radius:var(--ds-r-sm);padding-inline:10px}
html[data-ds] .sf-site-header .sf-site-nav>a:hover{color:var(--ds-ink);background:var(--ds-surface-2)}
html[data-ds] .sf-site-header .sf-site-nav .is-current{color:var(--ds-ink);font-weight:600;background:var(--ds-accent-soft)}

/* ---------- 6. 首页：首屏与目录 ---------- */
html[data-ds] .sf-store .sf-hero{
  margin-block:20px 8px;
  border:1px solid var(--ds-line);
  border-radius:var(--ds-r-lg);
  background:var(--ds-surface);
  overflow:hidden;
}
html[data-ds] .sf-store .sf-hero .sf-hero-slide{min-height:196px!important}
html[data-ds] .sf-store .sf-hero .sf-hero-copy{padding:24px 28px!important}
html[data-ds] .sf-store .sf-hero .sf-hero-copy h1{font-size:var(--ds-f-2xl)!important;line-height:1.22!important;color:#fff!important;letter-spacing:-.02em}
html[data-ds] .sf-store .sf-hero .sf-hero-copy p{font-size:14px!important;color:#DCE6D7!important;max-width:56ch}
html[data-ds] .sf-store .sf-hero .sf-hero-eyebrow{font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.85}
html[data-ds] .sf-store .sf-hero .sf-hero-trust-pills{display:none}
html[data-ds] .sf-store .sf-hero-controls{min-height:44px!important;border-top:1px solid var(--ds-line)}

html[data-ds] .sf-store .sf-directory{
  grid-template-columns:184px minmax(0,1fr)!important;
  gap:32px!important;
  margin-top:20px!important;
  align-items:start;
}

/* 左侧分类：无卡片、无外框，靠行高与选中态建立秩序 */
html[data-ds] .sf-store .sf-categories{
  position:sticky;top:76px;
  padding:0!important;background:transparent!important;border:0!important;
}
html[data-ds] .sf-store .sf-categories h2{
  font-size:14px;font-weight:600;line-height:22px;letter-spacing:0;
  color:var(--ds-ink-2);padding:0 10px 8px;
}
html[data-ds] .sf-store .sf-categories nav{display:flex;flex-direction:column;gap:2px}
html[data-ds] .sf-store .sf-categories .button{
  display:flex;align-items:center;justify-content:flex-start;gap:10px;
  width:100%;min-height:42px;padding:0 10px;
  border:1px solid transparent;background:transparent;
  color:var(--ds-ink-2);font-size:15px!important;font-weight:500;line-height:22px;text-align:left;
}
html[data-ds] .sf-store .sf-categories .button:hover{background:var(--ds-surface-2);color:var(--ds-ink)}
html[data-ds] .sf-store .sf-categories .button.is-current{
  background:var(--ds-surface);color:var(--ds-ink);font-weight:600;
  border-color:var(--ds-line);box-shadow:var(--ds-shadow-1);
}
html[data-ds] .sf-store .sf-categories .button.is-current::before{
  content:"";position:absolute;left:-1px;top:50%;width:3px;height:18px;
  transform:translateY(-50%);border-radius:0 2px 2px 0;background:var(--ds-accent);
}
html[data-ds] .sf-store .sf-categories .button{position:relative}
html[data-ds] .sf-store .sf-cat-label{display:flex;align-items:center;gap:10px;min-width:0}
html[data-ds] .sf-store .sf-cat-icon{display:grid;place-items:center;width:22px;height:22px;flex:none}
html[data-ds] .sf-store .sf-cat-icon :is(img,svg,.icon){width:16px;height:16px;object-fit:contain}
html[data-ds] .sf-store .sf-categories small{color:var(--ds-muted);font-size:12px;line-height:18px;margin-left:auto;font-variant-numeric:tabular-nums}
html[data-ds] .sf-store .sf-category-help{padding:16px 10px 0;border-top:1px solid var(--ds-line);margin-top:12px}
html[data-ds] .sf-store .sf-category-help p{font-size:12px;color:var(--ds-muted);margin:0 0 6px}
html[data-ds] .sf-store .sf-category-help a{font-size:12px;color:var(--ds-ink-2);text-decoration:underline;text-underline-offset:3px}

/* 右侧商品区 */
html[data-ds] .sf-store .sf-catalogue{min-width:0}
html[data-ds] .sf-store .sf-catalogue-heading{
  display:flex;align-items:baseline;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--ds-line);margin-bottom:14px;
}
html[data-ds] .sf-store .sf-catalogue-heading h2{font-size:var(--ds-f-xl)}
html[data-ds] .sf-store .sf-catalogue-heading #catalogue-count{color:var(--ds-muted);font-size:var(--ds-f-sm)}
html[data-ds] .sf-store .sf-views{margin-left:auto;display:flex;gap:2px;padding:2px;background:var(--ds-surface-2);border-radius:var(--ds-r-sm)}
html[data-ds] .sf-store .sf-views .button{
  min-height:34px;padding:0 10px;border:0;background:transparent;
  color:var(--ds-muted);font-size:12px;
}
html[data-ds] .sf-store .sf-views .button.is-current{background:var(--ds-surface);color:var(--ds-ink);box-shadow:var(--ds-shadow-1)}

/* 工具栏：搜索 + 筛选，收紧高度 */
html[data-ds] .sf-store .sf-tools{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
html[data-ds] .sf-store .sf-search{
  flex:1 1 320px;display:flex;align-items:center;gap:8px;margin:0;
  padding:0 0 0 12px;background:var(--ds-surface);
  border:1px solid var(--ds-line-strong);border-radius:var(--ds-r-sm);
  transition:border-color var(--ds-t-fast) var(--ds-ease),box-shadow var(--ds-t-fast) var(--ds-ease);
}
html[data-ds] .sf-store .sf-search:focus-within{border-color:var(--ds-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ds-focus) 18%,transparent)}
html[data-ds] .sf-store .sf-search input{
  flex:1;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;
  padding:0;font-size:var(--ds-f-sm);
}
html[data-ds] .sf-store .sf-search .button{border-radius:0 var(--ds-r-sm) var(--ds-r-sm) 0;min-height:40px;margin:-1px -1px -1px 0}
html[data-ds] .sf-store .sf-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html[data-ds] .sf-store .sf-stock-filter{
  display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;
  border:1px solid var(--ds-line-strong);border-radius:var(--ds-r-sm);
  background:var(--ds-surface);font-size:var(--ds-f-sm);color:var(--ds-ink-2);cursor:pointer;
}
html[data-ds] .sf-store .sf-stock-filter input{accent-color:var(--ds-focus);width:15px;height:15px}
html[data-ds] .sf-store #catalogue-sort{
  min-height:40px;border-radius:var(--ds-r-sm);font-size:var(--ds-f-sm);
  background:var(--ds-surface);
}
html[data-ds] .sf-store .sf-filter-panel{
  display:flex;flex-wrap:wrap;gap:10px;margin:0 0 4px;
  padding:12px;background:var(--ds-surface-2);border-radius:var(--ds-r-md);
}
html[data-ds] .sf-store .sf-filter-summary{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:12px;color:var(--ds-muted)}
html[data-ds] .sf-store .sf-filter-summary p{margin:0;color:var(--ds-muted)}

/* ---------- 7. 商品卡片 ---------- */
html[data-ds] .sf-store .sf-products{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;min-width:0;
}
html[data-ds] .sf-store .sf-product{
  position:relative;display:flex;flex-direction:column;gap:0;
  min-width:0;padding:0;overflow:hidden;
  background:var(--ds-surface);
  border:1px solid var(--ds-line);
  border-radius:var(--ds-r-md);
  box-shadow:none;
  transition:border-color var(--ds-t-base) var(--ds-ease),
             transform var(--ds-t-base) var(--ds-ease),
             box-shadow var(--ds-t-base) var(--ds-ease);
}
html[data-ds] .sf-store .sf-product:hover{
  border-color:var(--ds-line-strong);
  transform:translateY(-2px);
  box-shadow:var(--ds-shadow-2);
}
html[data-ds] .sf-store .sf-product:active{transform:translateY(0);box-shadow:var(--ds-shadow-1)}
/* 缺货卡片：不用整体 opacity（会把文字对比度拉低到 3.2–3.8:1），改用边框与封面降饱和 */
html[data-ds] .sf-store .sf-product[data-stock-state=empty]{
  opacity:1;
  background:var(--ds-surface);
  border-color:var(--ds-line);
}
html[data-ds] .sf-store .sf-product[data-stock-state=empty] .sf-product-cover :is(img,.product-cover-image){
  filter:saturate(.55) contrast(.96);
}
html[data-ds] .sf-store .sf-product[data-stock-state=empty] .sf-product-price{color:var(--ds-ink-2)}
html[data-ds] .sf-store .sf-product[data-stock-state=empty]:hover{
  border-color:var(--ds-line-strong);
  box-shadow:var(--ds-shadow-1);
}

/* 封面：统一 16:10，留白固定 */
html[data-ds] .sf-store .sf-product-cover{
  display:block;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:var(--ds-surface-2);border-radius:0;
  order:-1;
}
html[data-ds] .sf-store .sf-product-cover :is(img,.product-cover-image){
  width:100%;height:100%;object-fit:contain;
  transition:transform var(--ds-t-slow) var(--ds-ease-out);
}
html[data-ds] .sf-store .sf-product:hover .sf-product-cover :is(img,.product-cover-image){transform:scale(1.03)}

/* 卡片主体：标题两行、元信息一行、价格与动作一行 */
html[data-ds] .sf-store .sf-product-body{padding:12px 14px 0;min-width:0;display:flex;flex-direction:column;gap:6px}
html[data-ds] .sf-store .sf-product-title-row{display:flex;align-items:flex-start;gap:8px;min-width:0}
html[data-ds] .sf-store .sf-product h3{
  margin:0;min-width:0;flex:1;
  font-size:var(--ds-f-base);font-weight:600;line-height:1.45;
}
html[data-ds] .sf-store .sf-product h3>a{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  color:var(--ds-ink);text-decoration:none;overflow-wrap:anywhere;
}
html[data-ds] .sf-store .sf-product h3>a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ds-line-strong)}
html[data-ds] .sf-store .product-package-label{
  flex:none;align-self:flex-start;margin-top:2px;
  padding:1px 6px;border-radius:var(--ds-r-xs);
  background:var(--ds-surface-2);color:var(--ds-muted);
  font-size:11px;line-height:18px;font-weight:500;white-space:nowrap;
}
html[data-ds] .sf-store .sf-product-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;margin:0;
  color:var(--ds-muted);font-size:12px;line-height:20px;min-height:20px;
}
html[data-ds] .sf-store .sf-product-meta>*+*::before{content:"·";margin-right:8px;color:var(--ds-line-strong)}
html[data-ds] .sf-store .sf-product-meta .delivery-badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:0;background:transparent;border:0;font-size:12px!important;
  color:var(--ds-muted);font-weight:400;
}
html[data-ds] .sf-store .sf-product-meta .delivery-badge .icon{width:12px;height:12px}
html[data-ds] .sf-store .sf-product-meta .delivery-auto{color:var(--ds-ok)}
html[data-ds] .sf-store .sf-product-meta .delivery-manual{color:var(--ds-warn)}
html[data-ds] .sf-store .stock-quantity{font-variant-numeric:tabular-nums}
html[data-ds] .sf-store .stock-quantity.out-of-stock{color:var(--ds-bad)}
html[data-ds] .sf-store .sf-product-meta .product-sold{color:var(--ds-muted)}

html[data-ds] .sf-store .sf-product-footer{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:auto;padding:10px 14px 14px;
}
html[data-ds] .sf-store .sf-product-price{
  font-size:var(--ds-f-xl);font-weight:700;letter-spacing:-.02em;
  color:var(--ds-ink);font-variant-numeric:tabular-nums;white-space:nowrap;
}
html[data-ds] .sf-store .sf-product-price small{font-size:12px;font-weight:500;color:var(--ds-muted);letter-spacing:0}
html[data-ds] .sf-store .sf-product-footer .button{
  min-height:38px;padding:0 14px;font-size:13px;border-radius:var(--ds-r-sm);flex:none;
}
html[data-ds] .sf-store .sf-product-footer .button:not(.primary){border-color:var(--ds-line-strong);background:transparent}
html[data-ds] .sf-store .catalogue-restock{border-color:var(--ds-line-strong)!important}

/* 列表视图：独立的行式结构，而不是把卡片压扁 */
html[data-ds] .sf-store .sf-products.list-view{display:flex;flex-direction:column;gap:8px}
html[data-ds] .sf-store .sf-products.list-view .sf-product{
  flex-direction:row;align-items:center;gap:16px;padding:10px 14px 10px 10px;
}
html[data-ds] .sf-store .sf-products.list-view .sf-product-cover{
  width:96px;height:64px;aspect-ratio:auto;flex:none;border-radius:var(--ds-r-xs);
}
html[data-ds] .sf-store .sf-products.list-view .sf-product-body{padding:0;flex:1;gap:3px}
html[data-ds] .sf-store .sf-products.list-view .sf-product h3{font-size:var(--ds-f-base)}
html[data-ds] .sf-store .sf-products.list-view .sf-product h3>a{-webkit-line-clamp:1}
html[data-ds] .sf-store .sf-products.list-view .sf-product-footer{margin:0;padding:0;flex:none;gap:16px}
html[data-ds] .sf-store .sf-products.list-view .sf-product-price{font-size:var(--ds-f-lg)}

/* ---------- 8. 快速购买面板 ---------- */
html[data-ds] .modal-backdrop{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  padding:24px;background:rgba(14,17,12,.42);
  backdrop-filter:blur(3px);
  animation:ds-fade-in var(--ds-t-base) var(--ds-ease) both;
}
html[data-ds] .modal-backdrop .modal,
html[data-ds] .modal{
  background:var(--ds-surface);color:var(--ds-ink);
  border:1px solid var(--ds-line);border-radius:var(--ds-r-lg);
  box-shadow:var(--ds-shadow-3);
  animation:ds-rise var(--ds-t-slow) var(--ds-ease-out) both;
  max-height:min(88vh,880px);overflow:auto;overscroll-behavior:contain;
}
html[data-ds] .modal.wide{width:min(1040px,100%)}
html[data-ds] .modal-head{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;margin:0;
  background:var(--ds-surface);border-bottom:1px solid var(--ds-line);
}
html[data-ds] .modal-head h2{font-size:var(--ds-f-lg);font-weight:650;margin:0}
html[data-ds] .quick-buy-product{display:flex;align-items:center;gap:12px}
html[data-ds] .quick-buy-product .cart-thumbnail{
  width:64px;height:64px;flex:none;border-radius:var(--ds-r-sm);
  background:var(--ds-surface-2);overflow:hidden;
}
html[data-ds] .quick-buy-product .cart-thumbnail :is(img,svg){width:100%;height:100%;object-fit:contain}
html[data-ds] .quick-buy-product>h3,
html[data-ds] .quick-buy-product-info h3{font-size:var(--ds-f-base);font-weight:600;margin:0;min-width:0}
html[data-ds] .quick-buy-price{
  display:flex;align-items:baseline;gap:6px;padding:12px 0;
  border-block:1px solid var(--ds-line);margin:4px 0 12px;
}
html[data-ds] .quick-buy-price strong{font-size:var(--ds-f-2xl);font-weight:700;letter-spacing:-.02em}
html[data-ds] .quick-buy-price span{color:var(--ds-muted);font-size:var(--ds-f-sm)}
html[data-ds] .popup-checkout-grid{gap:0}
html[data-ds] .popup-order-fields{padding:20px}
html[data-ds] .popup-order-summary{
  padding:20px;background:var(--ds-surface-2);
  border-left:1px solid var(--ds-line);
}
html[data-ds] .popup-payment-choice{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
html[data-ds] .popup-submit-btn{min-height:48px;font-size:var(--ds-f-md)}
html[data-ds] .quantity{display:inline-flex;align-items:center;border:1px solid var(--ds-line-strong);border-radius:var(--ds-r-sm);overflow:hidden;background:var(--ds-surface)}
html[data-ds] .quantity .button{min-height:40px;min-width:40px;border:0;border-radius:0;background:transparent}
html[data-ds] .quantity input{width:64px;min-height:40px;border:0;border-radius:0;text-align:center;box-shadow:none!important}

/* ---------- 9. 动效 ---------- */
@keyframes ds-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ds-rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ds-item-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
html[data-ds] #catalogue[data-motion=replace] .sf-product{
  animation:ds-item-in var(--ds-t-base) var(--ds-ease-out) both;
}
html[data-ds] #catalogue[data-motion=replace] .sf-product:nth-child(2){animation-delay:20ms}
html[data-ds] #catalogue[data-motion=replace] .sf-product:nth-child(3){animation-delay:40ms}
html[data-ds] #catalogue[data-motion=replace] .sf-product:nth-child(4){animation-delay:60ms}
html[data-ds] #catalogue[data-motion=replace] .sf-product:nth-child(n+5){animation-delay:75ms}

/* ---------- 10. 响应式 ---------- */
@media (max-width:1180px){
  html[data-ds] .sf-store .sf-products{grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-ds] .sf-store .sf-directory{grid-template-columns:160px minmax(0,1fr)!important;gap:24px!important}
}
@media (max-width:900px){
  html[data-ds]{--ds-gutter:20px}
  html[data-ds] .sf-store .sf-products{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-ds] .sf-store .sf-directory{display:block!important}
  html[data-ds] .sf-store .sf-categories{
    position:static;display:flex;gap:8px;overflow-x:auto;
    padding-bottom:10px!important;margin-bottom:8px;
    border-bottom:1px solid var(--ds-line)!important;
    scrollbar-width:none;
  }
  html[data-ds] .sf-store .sf-categories h2{display:none}
  html[data-ds] .sf-store .sf-categories nav{flex-direction:row;gap:6px}
  html[data-ds] .sf-store .sf-categories .button{
    width:auto;flex:none;min-height:38px;padding:0 12px;
    border-color:var(--ds-line);border-radius:var(--ds-r-pill);
  }
  html[data-ds] .sf-store .sf-categories .button.is-current::before{display:none}
  html[data-ds] .sf-store .sf-categories small{display:none}
  html[data-ds] .sf-store .sf-category-help{display:none}
}
@media (max-width:640px){
  html[data-ds]{--ds-gutter:14px}
  html[data-ds] .sf-store .sf-products{gap:10px}
  html[data-ds] .sf-store .sf-product-body{padding:10px 10px 0}
  html[data-ds] .sf-store .sf-product h3{font-size:14px}
  html[data-ds] .sf-store .sf-product-footer{padding:8px 10px 12px;flex-direction:column;align-items:stretch;gap:8px}
  html[data-ds] .sf-store .sf-product-price{font-size:var(--ds-f-lg)}
  html[data-ds] .sf-store .sf-product-footer .button{width:100%}
  html[data-ds] .sf-store .sf-product-meta{min-height:18px;font-size:11px;line-height:18px}
  html[data-ds] .sf-store .sf-hero .sf-hero-copy{padding:18px!important}
  html[data-ds] .sf-store .sf-hero .sf-hero-copy h1{font-size:22px!important}
  html[data-ds] .modal-backdrop{padding:0;place-items:end stretch}
  html[data-ds] .modal,
  html[data-ds] .modal.wide{
    width:100%;max-height:92vh;border-radius:16px 16px 0 0;border-bottom:0;
    animation:ds-sheet-in var(--ds-t-slow) var(--ds-ease-out) both;
  }
}
@keyframes ds-sheet-in{from{opacity:.6;transform:translateY(24px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html[data-ds] *,
  html[data-ds] *::before,
  html[data-ds] *::after{
    animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;scroll-behavior:auto!important;
  }
}

/* ---------- 11. 头部账户按钮统一 ---------- */
html[data-ds] .sf-site-header .sf-header-actions .account-register,
html[data-ds] .header-actions .account-register{
  display:inline-flex!important;
  background:var(--ds-accent)!important;
  border:1px solid var(--ds-accent)!important;
  color:var(--ds-accent-ink)!important;
  border-radius:var(--ds-r-sm);
  padding:0 16px!important;
  min-height:40px;
  font-size:14px!important;
  font-weight:600;
}
html[data-ds] .sf-site-header .sf-header-actions .account-register:hover{
  background:var(--ds-accent-press)!important;border-color:var(--ds-accent-press)!important;
}
html[data-ds] .sf-site-header .sf-header-actions .account-login,
html[data-ds] .sf-site-header .sf-header-actions .user-link{
  color:var(--ds-ink)!important;font-size:14px!important;
}

/* 覆盖 home-layout.css 中特异性更高的头部主按钮规则 */
html[data-ds] body .sf-site-header .sf-header-actions a.button.primary.account-register{
  background:var(--ds-accent)!important;
  border-color:var(--ds-accent)!important;
  color:var(--ds-accent-ink)!important;
}

/* 手机端分类横向滚动：不裁切、可滑动、有末端留白 */
@media(max-width:900px){
  html[data-ds] .sf-store .sf-categories{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  html[data-ds] .sf-store .sf-categories nav{padding-right:24px}
  html[data-ds] .sf-store .sf-categories .button{scroll-snap-align:start;white-space:nowrap}
}

/* 弹窗规格选中态与整体强调色对齐（旧层用的是 bm-selected 蓝底） */
html[data-ds] .popup-spec-chip.selected{
  background:var(--ds-accent-soft)!important;
  border-color:var(--ds-accent)!important;
  box-shadow:inset 0 0 0 1px var(--ds-accent)!important;
  color:var(--ds-ink)!important;
}
html[data-ds] .popup-spec-chip.selected span{color:var(--ds-ink)!important}
html[data-ds] .popup-spec-chip.selected small{color:var(--ds-ink-2)!important}
html[data-ds] .popup-spec-chip{min-height:56px!important;font-size:14px!important}
html[data-ds] .popup-spec-chip small{font-size:12.5px!important;white-space:nowrap}
html[data-ds] .popup-spec-options{gap:8px!important}

/* 命中 inner-layout.css: #overlays .popup-spec-chip(.selected) 的 !important */
html[data-ds] #overlays .popup-spec-chip{
  background:var(--ds-surface)!important;
  border-color:var(--ds-line-strong)!important;
  color:var(--ds-ink)!important;
}
html[data-ds] #overlays .popup-spec-chip.selected{
  background:var(--ds-accent-soft)!important;
  border-color:var(--ds-accent)!important;
  box-shadow:inset 0 0 0 1px var(--ds-accent)!important;
  color:var(--ds-ink)!important;
}
html[data-ds] #overlays .popup-spec-chip.selected span{color:var(--ds-ink)!important}
html[data-ds] #overlays .popup-spec-chip.selected small{color:var(--ds-ink-2)!important}
html[data-ds] #overlays .popup-spec-chip:disabled{opacity:.5!important;background:var(--ds-surface-2)!important}

/* ---------- 12. 弹窗颜色与窄屏对齐修正 ---------- */
html[data-ds] #overlays .popup-detail-link{
  color:var(--ds-ink-2)!important;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--ds-line-strong);
}
html[data-ds] #overlays .popup-detail-link:hover{color:var(--ds-ink)!important}

html[data-ds] #overlays :is(.checkout-price-summary,.quick-buy-price,.popup-order-summary) strong{
  color:var(--ds-ink)!important;
}
html[data-ds] #overlays .checkout-price-summary .total,
html[data-ds] #overlays .checkout-price-summary strong{font-variant-numeric:tabular-nums}

html[data-ds] #overlays .popup-payment-option .payment-check-mark{
  background:var(--ds-ink)!important;
  color:var(--ds-surface)!important;
  border:0;
}
html[data-ds] #overlays .popup-payment-option:has(input:checked){
  border-color:var(--ds-ink)!important;
  background:var(--ds-accent-soft)!important;
  box-shadow:none!important;
}

/* 规格卡：内容不再横向溢出，窄屏两列 */
html[data-ds] #overlays .popup-spec-chip{
  min-width:0!important;
  overflow:hidden;
}
html[data-ds] #overlays .popup-spec-chip span,
html[data-ds] #overlays .popup-spec-chip small{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:640px){
  html[data-ds] #overlays .popup-spec-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html[data-ds] #overlays .popup-spec-chip{padding:8px 10px!important;min-height:52px!important}
  html[data-ds] #overlays .popup-spec-chip span{font-size:13px!important}
  html[data-ds] #overlays .popup-spec-chip small{font-size:12px!important}
}

/* 手机端：提交区吸底，滚动时始终可见 */
@media(max-width:900px){
  html[data-ds] #overlays .popup-checkout-actions{
    position:sticky;bottom:0;z-index:3;
    margin:0 -16px -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--ds-surface);
    border-top:1px solid var(--ds-line);
  }
  html[data-ds] #overlays .popup-hold-note{margin-top:6px}
}

/* 价格：命中 inner-layout.css 中使用 bm-accent 的具体选择器 */
html[data-ds] #overlays .checkout-price-summary .totals.final strong,
html[data-ds] #overlays .checkout-price-summary .totals strong{
  color:var(--ds-ink)!important;
}
html[data-ds] #overlays .checkout-price-summary .totals.final{
  color:var(--ds-ink)!important;
  border-top:1px solid var(--ds-line)!important;
}

/* ---------- 13. 查询密码字段：解除固定高度，工具按钮不再压住输入框 ---------- */
html[data-ds] #overlays .popup-credentials-grid .lookup-credential-field .lookup-field-head,
html[data-ds] #overlays .popup-credentials-grid .field>span{
  height:auto!important;
  max-height:none!important;
  min-height:28px!important;
  flex-wrap:wrap!important;
  row-gap:2px;
  align-items:center!important;
}
html[data-ds] #overlays .lookup-field-tools{gap:4px!important;flex-wrap:wrap}
html[data-ds] #overlays .lookup-field-tools .button{
  min-height:22px!important;height:22px!important;
  padding:0 7px!important;font-size:11.5px!important;
  border-radius:5px!important;
  background:var(--ds-surface-2)!important;color:var(--ds-ink-2)!important;
  border:0!important;
}
html[data-ds] #overlays .lookup-field-tools .button:hover{background:var(--ds-accent-soft)!important;color:var(--ds-ink)!important}
html[data-ds] #overlays .lookup-credential-field input{margin-top:2px}

/* 确认勾选框：品牌色 */
html[data-ds] input[type=checkbox],
html[data-ds] input[type=radio]{accent-color:var(--ds-focus)!important}
html[data-ds] #overlays .popup-accepted input{width:18px;height:18px;min-height:18px}

/* 深色弹窗底色与设计层保持同一暖黑色，避免冷蓝黑混入 */
html[data-color-mode=dark] #overlays .modal,
html[data-color-mode=dark] #overlays .modal.wide{
  background:var(--ds-surface)!important;
  border-color:var(--ds-line)!important;
}
html[data-color-mode=dark] #overlays .popup-order-summary{
  background:var(--ds-surface-2)!important;
  border-color:var(--ds-line)!important;
}
html[data-color-mode=dark] #overlays .modal-head{
  background:var(--ds-surface)!important;
  border-bottom-color:var(--ds-line)!important;
}
html[data-color-mode=dark] #overlays :is(.quick-buy-product,.popup-spec-chip,.popup-payment-option){
  background:var(--ds-surface)!important;
  border-color:var(--ds-line-strong)!important;
}

/* ---------- 14. 分类栏配色：去掉旧主题蓝，保证深色下可读 ---------- */
html[data-ds] .sf-store .sf-categories .button{
  color:var(--ds-ink-2)!important;
  background:transparent!important;
}
html[data-ds] .sf-store .sf-categories .button:hover{
  color:var(--ds-ink)!important;
  background:var(--ds-surface-2)!important;
}
html[data-ds] .sf-store .sf-categories .button[aria-pressed=true],
html[data-ds] .sf-store .sf-categories .button.is-current{
  color:var(--ds-ink)!important;
  background:var(--ds-surface)!important;
  border-color:var(--ds-line)!important;
}
html[data-ds] .sf-store .sf-categories .button[aria-pressed=true] span,
html[data-ds] .sf-store .sf-categories .button.is-current span{color:var(--ds-ink)!important}
html[data-ds] .sf-store .sf-categories .button[aria-pressed=true] small,
html[data-ds] .sf-store .sf-categories .button.is-current small{
  background:var(--ds-accent-soft)!important;
  color:var(--ds-ink)!important;
  font-weight:600;
}
html[data-ds] .sf-store .sf-categories small{
  background:var(--ds-surface-2)!important;
  color:var(--ds-muted)!important;
}
html[data-color-mode=dark] .sf-store .sf-categories .button[aria-pressed=true],
html[data-color-mode=dark] .sf-store .sf-categories .button.is-current{
  background:var(--ds-surface-2)!important;
  box-shadow:inset 3px 0 0 var(--ds-accent)!important;
}

/* 手机端提交区吸底：覆盖 inner-layout.css 的 padding:0!important */
@media(max-width:900px){
  html[data-ds] #overlays .popup-checkout-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:5!important;
    margin-top:10px!important;
    padding:12px 0 calc(12px + env(safe-area-inset-bottom))!important;
    background:var(--ds-surface)!important;
    border:0!important;
    border-top:1px solid var(--ds-line)!important;
  }
  html[data-ds] #overlays .popup-checkout-actions .popup-submit-btn{
    min-height:50px;width:100%;
  }
  html[data-ds] #overlays .popup-hold-note{margin:6px 0 0!important;text-align:center!important}
}

/* 手机端：提交区固定在面板底部，内容区独立滚动 */
@media(max-width:900px){
  html[data-ds] #overlays .popup-checkout-form{
    display:flex!important;
    flex-direction:column!important;
    height:100%!important;
    max-height:100%!important;
    overflow:hidden!important;
  }
  html[data-ds] #overlays .popup-checkout-scroll{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  html[data-ds] #overlays .popup-order-summary{overflow:visible!important}
  html[data-ds] #overlays .popup-checkout-actions{
    position:static!important;
    flex:none!important;
    order:99;
    margin:0!important;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;
    background:var(--ds-surface)!important;
    border-top:1px solid var(--ds-line)!important;
    box-shadow:0 -8px 24px -18px rgba(20,24,18,.5);
  }
}

/* 窄屏提交区：固定到视口底部（挂在 backdrop 定位上下文内），内容区预留空间 */
@media(max-width:900px){
  html[data-ds] #overlays .popup-checkout-actions{
    position:fixed!important;
    left:0!important;right:0!important;bottom:0!important;top:auto!important;
    z-index:95!important;
    margin:0!important;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;
    background:var(--ds-surface)!important;
    border:0!important;
    border-top:1px solid var(--ds-line)!important;
    box-shadow:0 -10px 30px -22px rgba(20,24,18,.6);
  }
  html[data-ds] #overlays .popup-checkout-actions .popup-submit-btn{width:100%!important;min-height:50px}
  html[data-ds] #overlays .popup-checkout-actions .popup-hold-note{display:none!important}
  html[data-ds] #overlays .popup-checkout-actions .popup-order-recovery:empty{display:none}
  html[data-ds] #overlays .popup-checkout-scroll{padding-bottom:118px!important}
}

/* 641–900px：底栏与居中弹窗对齐，不横跨视口 */
@media(min-width:641px) and (max-width:900px){
  html[data-ds] #overlays .popup-checkout-actions{
    left:16px!important;right:16px!important;bottom:16px!important;
    border-radius:0 0 12px 12px!important;
  }
  html[data-ds] #overlays .popup-checkout-scroll{padding-bottom:104px!important}
}

/* ---------- 15. 对比度达标（WCAG AA）---------- */

/* 购物车角标：旧蓝压深底只有 3.0:1 */
html[data-ds] .sf-site-header .cart-count,
html[data-ds] .header-actions .cart-count{
  background:var(--ds-accent)!important;
  color:var(--ds-accent-ink)!important;
  font-weight:700;
  border:1px solid var(--ds-accent)!important;
}
html[data-color-mode=dark] html[data-ds] .cart-count,
html[data-ds][data-color-mode=dark] .cart-count{
  background:var(--ds-accent)!important;
  color:var(--ds-accent-ink)!important;
}

/* 轮播圆点标签：文字透明度导致 4.06:1 */
html[data-ds] body .sf-store .sf-hero .hero-dots .button{
  color:var(--ds-ink-2)!important;
  background:var(--ds-surface-2)!important;
  opacity:1;
}
html[data-ds] body .sf-store .sf-hero .hero-dots .button[aria-pressed=true]{
  color:var(--ds-accent-ink)!important;
  background:var(--ds-accent)!important;
  opacity:1;
}
html[data-ds] body .sf-store .sf-hero .hero-dots .button.active{
  color:var(--ds-accent-ink)!important;
  background:var(--ds-accent)!important;
}

/* 说明文字与页脚灰字：4.48 差一点，提一档 */
html[data-ds] .sf-store-note,
html[data-ds] .sf-store-note>span,
html[data-ds] .sf-store-note>a,
html[data-ds] .site-footer small,
html[data-ds] .site-footer .footer-payment-note,
html[data-ds] .footer-payment-badge,
html[data-ds] .footer-payment-methods .footer-payment-badge[data-payment-state=unavailable]{
  color:var(--ds-muted)!important;
}
html[data-color-mode=dark] html[data-ds] :is(.sf-store-note,.sf-store-note>span,.sf-store-note>a,.site-footer small,.footer-payment-note,.footer-payment-badge){
  color:var(--ds-muted)!important;
}

/* 弹窗规格卡：缺货副标题与说明文字对比度补足 */
html[data-ds] #overlays .popup-spec-chip small,
html[data-ds] #overlays .popup-spec-chip span{
  color:var(--ds-ink-2)!important;
}
html[data-ds] #overlays .popup-spec-chip:disabled small,
html[data-ds] #overlays .popup-spec-chip:disabled span{
  color:var(--ds-muted)!important;
}
html[data-ds] #overlays .popup-spec-chip.selected small{color:var(--ds-ink-2)!important}
html[data-ds] #overlays :is(.popup-field-error,.quick-buy-price span,.popup-availability,.popup-order-summary small){
  color:var(--ds-muted)!important;
}

/* ---------- 16. 快速下单弹窗：须知行与凭据栅格对齐 ---------- */

/* 须知块与数量步进器顶端对齐（跳过标签高度），不再悬空成台阶 */
html[data-ds] #overlays .popup-qty-guide-row{
  align-items:start!important;
  gap:14px!important;
}
html[data-ds] #overlays .popup-qty-guide-row .popup-delivery-guide{
  margin-top:34px!important; /* 标签 28px + 间距 6px */
  min-width:0;
}
html[data-ds] #overlays .popup-delivery-guide .purchase-guide,
html[data-ds] #overlays .popup-delivery-guide details{
  margin:0!important;
  min-height:44px;
  display:flex;
  align-items:center;
}

/* 查询密码行：工具按钮单行不换行，两列输入框顶端严格对齐 */
html[data-ds] #overlays .popup-credentials-grid .lookup-credential-field .lookup-field-head{
  flex-wrap:nowrap!important;
  height:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  gap:6px!important;
  overflow:hidden;
}
html[data-ds] #overlays .popup-credentials-grid .lookup-field-head>span{
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
html[data-ds] #overlays .popup-credentials-grid .lookup-field-tools{
  flex:none;
  gap:3px!important;
  flex-wrap:nowrap!important;
}
html[data-ds] #overlays .popup-credentials-grid .lookup-field-tools .button{
  padding:0 4px!important;
  font-size:11px!important;
  min-height:22px!important;
  height:22px!important;
  white-space:nowrap;
}
html[data-ds] #overlays .popup-credentials-grid .lookup-credential-field input{margin-top:0!important}
html[data-ds] #overlays .popup-credentials-grid .field>span{margin-bottom:6px!important}
html[data-ds] #overlays .popup-credentials-grid .field{padding-top:0!important}

/* 窄屏：须知回到自然流，不保留顶对齐偏移 */
@media(max-width:640px){
  html[data-ds] #overlays .popup-qty-guide-row .popup-delivery-guide{margin-top:0!important}
  html[data-ds] #overlays .popup-qty-guide-row{gap:10px!important}
  html[data-ds] #overlays .popup-credentials-grid .lookup-field-head{
    height:auto!important;max-height:none!important;min-height:28px!important;flex-wrap:wrap!important;
  }
}

/* ---------- 16. 快速下单弹窗：行内对齐与节奏 ---------- */

/* 数量步进器与「购买前须知」同一行等高，基线对齐 */
html[data-ds] #overlays .popup-qty-guide-row{
  align-items:end!important;
  gap:12px!important;
  margin-top:8px!important;
}
html[data-ds] #overlays .popup-qty-guide-row .popup-qty-field{min-width:0}
html[data-ds] #overlays .popup-qty-guide-row .quantity,
html[data-ds] #overlays .popup-qty-guide-row .popup-quantity-stepper{
  height:44px!important;min-height:44px!important;
  display:inline-flex!important;align-items:center;
  border-radius:var(--ds-r-sm);
}
html[data-ds] #overlays .popup-qty-guide-row .quantity .button{
  height:42px!important;min-height:42px!important;min-width:42px;border-radius:0;
}
html[data-ds] #overlays .popup-qty-guide-row .quantity input{
  height:42px!important;min-height:42px!important;width:60px;
}
html[data-ds] #overlays .popup-qty-guide-row .popup-delivery-guide{min-width:0;display:flex;align-items:flex-end}
html[data-ds] #overlays .popup-qty-guide-row .popup-delivery-guide .purchase-guide{width:100%;margin:0!important;padding:0!important;border:0!important;background:transparent!important}
html[data-ds] #overlays .popup-qty-guide-row .purchase-guide summary{
  min-height:44px!important;
  display:flex!important;align-items:center;gap:8px;
  padding:0 14px!important;
  border:1px solid var(--ds-line-strong)!important;
  border-radius:var(--ds-r-sm)!important;
  background:var(--ds-surface)!important;
  color:var(--ds-ink)!important;
  font-size:13px!important;font-weight:500;
  cursor:pointer;
}
html[data-ds] #overlays .popup-qty-guide-row .purchase-guide summary:hover{border-color:var(--ds-ink-2)!important;background:var(--ds-surface-2)!important}

/* 查询密码工具按钮：与标签同基线，不再挤压输入框 */
html[data-ds] #overlays .lookup-credential-field .lookup-field-head{
  display:flex!important;align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;flex-wrap:nowrap!important;
  min-height:24px!important;height:24px!important;max-height:24px!important;
  margin-bottom:6px!important;
}
html[data-ds] #overlays .lookup-credential-field .lookup-field-head>span{
  font-size:13px!important;font-weight:600!important;color:var(--ds-ink)!important;
  white-space:nowrap;
}
html[data-ds] #overlays .lookup-credential-field .lookup-field-tools{flex:none;display:inline-flex;gap:4px}

/* 左右两栏内容高度与底部对齐 */
html[data-ds] #overlays .popup-order-fields{padding:20px 20px 18px!important;gap:12px!important}
html[data-ds] #overlays .popup-credentials-grid{gap:12px 14px!important;padding-top:16px!important;margin-top:4px!important}
html[data-ds] #overlays .popup-order-summary{
  padding:18px!important;gap:12px!important;
  align-self:stretch;
  justify-content:flex-start;
}
html[data-ds] #overlays .popup-order-summary>:last-child{margin-top:auto}
html[data-ds] #overlays .popup-payment-choice{gap:8px;margin-bottom:2px}
html[data-ds] #overlays .popup-accepted{
  justify-content:flex-start!important;
  text-align:left!important;
  font-size:12.5px!important;
  line-height:1.5!important;
  min-height:22px;
  margin:2px 0!important;
}
html[data-ds] #overlays .popup-accepted input{flex:none;margin:0!important}

/* 覆盖旧层的 margin-top:34px，让须知按钮与步进器底部对齐 */
html[data-ds] #overlays .popup-qty-guide-row .popup-delivery-guide{
  margin-top:0!important;
  align-self:end!important;
}
html[data-ds] #overlays .popup-qty-guide-row .popup-qty-field{
  margin-top:0!important;
  align-self:end!important;
}
html[data-ds] #overlays .popup-qty-guide-row .popup-qty-field>span{
  display:block;margin-bottom:6px;
}

/* 「已确认」行：左对齐，勾选框与文字同轴 */
html[data-ds] #overlays .popup-accepted{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:left!important;
  gap:8px!important;
  width:100%;
}
html[data-ds] #overlays .popup-accepted input{
  flex:0 0 18px!important;
  width:18px!important;height:18px!important;min-height:18px!important;
  margin:0!important;position:static!important;
}
html[data-ds] #overlays .popup-order-summary{align-items:stretch!important}

/* 步进器自带的 24px 下边距会把按钮顶偏，在弹窗内归零 */
html[data-ds] #overlays .popup-qty-field .quantity,
html[data-ds] #overlays .popup-qty-field .popup-quantity-stepper{
  margin:0!important;
}
html[data-ds] #overlays .popup-qty-field>span{
  margin-bottom:6px!important;
  line-height:20px;
}

/* 窄屏单列堆叠时，须知按钮通栏，避免孤立小块 */
@media(max-width:900px){
  html[data-ds] #overlays .popup-qty-guide-row{
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    align-items:stretch!important;
  }
  html[data-ds] #overlays .popup-qty-guide-row .popup-delivery-guide,
  html[data-ds] #overlays .popup-qty-guide-row .popup-qty-field{width:100%}
  html[data-ds] #overlays .popup-qty-guide-row .purchase-guide summary{
    width:100%!important;justify-content:space-between;
  }
  html[data-ds] #overlays .popup-qty-guide-row .quantity,
  html[data-ds] #overlays .popup-qty-guide-row .popup-quantity-stepper{
    display:flex!important;width:100%!important;
  }
  html[data-ds] #overlays .popup-qty-guide-row .quantity input{flex:1 1 auto;width:auto!important;text-align:center}
}

/* ---------- 17. 分类标题改为普通块；补屏幕阅读器专用标题 ---------- */
html[data-ds] .sf-store .sf-categories .sf-categories-title{
  font-size:14px;font-weight:600;line-height:22px;letter-spacing:0;
  color:var(--ds-ink-2);padding:0 10px 8px;
}
html[data-ds] .visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
@media(max-width:900px){
  html[data-ds] .sf-store .sf-categories .sf-categories-title{display:none}
}

/* ---------- 18. 查单页：去掉卡片套卡片的内部边框 ---------- */
html[data-ds] :is(.lookup-search-panel,.lookup-results) :is(.lookup-browser-entry,.lookup-member-link){
  border-top:0!important;
  padding-top:16px!important;
  margin-top:16px!important;
  background:transparent!important;
}
html[data-ds] :is(.lookup-search-panel,.lookup-results) :is(.lookup-browser-entry,.lookup-member-link)::before{
  content:"";display:block;height:1px;background:var(--ds-line);
  margin:-16px 0 14px;
}

/* 弹窗库存标签同步使用可读的深绿 */
html[data-ds] #overlays .quick-buy-badges .stock-quantity.in-stock{
  color:#166534!important;font-weight:600;
}
html[data-color-mode=dark] html[data-ds] #overlays .quick-buy-badges .stock-quantity.in-stock{
  color:#86EFAC!important;
}

/* ---------- 19. 浅色模式下旧主题 --bm-muted 提到达标档位 ---------- */
html[data-ds][data-color-mode=light] body:not(.merchant-admin){
  --bm-muted:#5A6055;
}
html[data-ds][data-color-mode=light] :is(.lookup-page,.help-page,.article-page,.page-title p,.lookup-feedback p,.lookup-feedback dd){
  color:var(--ds-muted);
}

/* ---------- 20. 查单页：反馈块不再套一层卡片 ---------- */
html[data-ds] .lookup-results .lookup-feedback{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
}
html[data-ds] .lookup-results .lookup-feedback::before{
  content:"";display:block;height:1px;background:var(--ds-line);margin:0 0 14px;
}
html[data-ds] .lookup-results .lookup-feedback:first-child::before{display:none}

/* ---------- 21. 自托管字体：Cabinet Grotesk（标题/价格）+ Satoshi（正文/UI） ----------
   CSP 为 default-src 'self'，字体必须同源。中文无拉丁字形，回落到系统字体。 */
@font-face{
  font-family:"Cabinet Grotesk";
  src:url("/assets/fonts/cabinet-grotesk-500.woff2") format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Cabinet Grotesk";
  src:url("/assets/fonts/cabinet-grotesk-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Cabinet Grotesk";
  src:url("/assets/fonts/cabinet-grotesk-800.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("/assets/fonts/satoshi-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("/assets/fonts/satoshi-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("/assets/fonts/satoshi-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

html[data-ds] body,
html[data-ds] .sf-ui{
  font-family:"Satoshi","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
/* 标题与价格使用 Cabinet Grotesk，形成层级对比 */
html[data-ds] .sf-ui :is(h1,h2,h3,h4),
html[data-ds] .sf-store .sf-product-price,
html[data-ds] .quick-buy-price strong,
html[data-ds] #overlays .checkout-price-summary strong,
html[data-ds] .sf-store .sf-brand,
html[data-ds] .sf-site-header .sf-brand{
  font-family:"Cabinet Grotesk","PingFang SC","Microsoft YaHei",-apple-system,sans-serif;
  letter-spacing:-.015em;
}
/* 数字统一等宽对齐 */
html[data-ds] .sf-store .sf-product-price,
html[data-ds] #overlays .checkout-price-summary strong,
html[data-ds] .quick-buy-price strong{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Cabinet Grotesk 只有 400/500/700/800：把标题与价格显式落到真实档位，避免合成粗体 */
html[data-ds] .sf-ui :is(h1,h2,h3,h4){font-weight:500}
html[data-ds] .sf-store .sf-catalogue-heading :is(h1,h2),
html[data-ds] .sf-store h1{font-weight:700}
html[data-ds] .sf-store .sf-product h3{font-weight:500}
html[data-ds] .sf-store .sf-product-price,
html[data-ds] .quick-buy-price strong,
html[data-ds] #overlays .checkout-price-summary strong{font-weight:700}
html[data-ds] .sf-store .sf-product h3>a{font-weight:inherit}

/* ---------- 22. 内页头部统一：旧 .topbar → 与首页一致的紧凑头部 ---------- */
html[data-ds] header.topbar.shell,
html[data-ds] .topbar{
  position:sticky;top:0;z-index:40;
  width:min(var(--ds-shell),calc(100% - var(--ds-gutter)*2))!important;
  max-width:none!important;
  height:auto!important;
  min-height:64px!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex;align-items:center;gap:24px;
  background:color-mix(in srgb,var(--ds-paper) 90%,transparent)!important;
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  backdrop-filter:saturate(1.4) blur(10px);
  border:0!important;
  border-bottom:1px solid var(--ds-line)!important;
  border-radius:0!important;
  box-shadow:none!important;
  top:0!important;
}

/* 品牌区：与首页同尺寸 */
html[data-ds] .topbar .brand{
  display:flex;align-items:center;gap:10px;
  font-size:20px!important;font-weight:680!important;
  color:var(--ds-ink)!important;letter-spacing:-.015em;
  background:transparent!important;border:0!important;
}
html[data-ds] .topbar .brand img,
html[data-ds] .topbar .brand-logo{
  width:34px!important;height:34px!important;
  border-radius:8px;border:1px solid var(--ds-line);
  object-fit:cover;
}
html[data-ds] .topbar .brand small{display:none!important}

/* 导航：字号、间距、选中态与首页一致，去掉蓝色下划线 */
html[data-ds] .topbar .nav{gap:4px!important;height:auto!important}
html[data-ds] .topbar .nav a{
  display:inline-flex;align-items:center;
  min-height:40px;padding:0 12px!important;
  font-size:14px!important;font-weight:500!important;
  color:var(--ds-ink-2)!important;
  border-radius:var(--ds-r-sm);
  position:relative;
  transition:background-color var(--ds-t-fast) var(--ds-ease),color var(--ds-t-fast) var(--ds-ease);
}
html[data-ds] .topbar .nav a:hover{color:var(--ds-ink)!important;background:var(--ds-surface-2)!important}
html[data-ds] .topbar .nav a.active,
html[data-ds] .topbar .nav a.is-current,
html[data-ds] .topbar .nav a[aria-current]{
  color:var(--ds-ink)!important;font-weight:600!important;
  background:var(--ds-accent-soft)!important;
}
html[data-ds] .topbar .nav a.active::after,
html[data-ds] .topbar .nav a.is-current::after,
html[data-ds] .topbar .nav a[aria-current]::after{
  content:none!important;display:none!important;
}

/* 右侧操作区 */
html[data-ds] .topbar .header-actions{margin-left:auto!important;gap:8px!important}
html[data-ds] .topbar .header-actions .button{
  min-height:40px;border-radius:var(--ds-r-sm);
}
html[data-ds] .topbar .account-login,
html[data-ds] .topbar .user-link{color:var(--ds-ink)!important;font-size:14px!important}
html[data-ds] .topbar .store-preferences{gap:4px!important}

/* ---------- 23. 内页字号统一到 16px 基准 ---------- */
html[data-ds] .shell.page,
html[data-ds] main.page{
  font-size:var(--ds-f-base)!important;
  width:min(var(--ds-shell),calc(100% - var(--ds-gutter)*2))!important;
  max-width:var(--ds-shell)!important;
  margin-inline:auto;
}
html[data-ds] .page :is(.field,.field>span,.field small,.muted,small,p,li,dd,dt,label){
  font-size:inherit;
}
html[data-ds] .page .field>span{font-size:var(--ds-f-sm)!important}
html[data-ds] .page .field small,
html[data-ds] .page .muted,
html[data-ds] .page p.muted{font-size:var(--ds-f-sm)!important}
html[data-ds] .page-title h1,
html[data-ds] .page>.page-title h1,
html[data-ds] :is(.member-page,.help-page,.order-page,.checkout-page,.lookup-page,.supplier-page)>.page-title h1{
  font-size:var(--ds-f-2xl)!important;
  line-height:1.25!important;
  letter-spacing:-.02em!important;
  font-weight:700!important;
}
html[data-ds] .page-title p,
html[data-ds] :is(.member-page,.help-page,.order-page,.checkout-page)>.page-title p{
  font-size:var(--ds-f-base)!important;
  line-height:1.6!important;
  color:var(--ds-muted)!important;
  margin-top:8px!important;
}
html[data-ds] .page :is(input,select,textarea){font-size:var(--ds-f-sm)!important}

/* ---------- 24. 商品详情购买面板：深色底改回浅色体系 ---------- */
html[data-ds] .buy-panel{
  background:var(--ds-surface)!important;
  border:1px solid var(--ds-line)!important;
  border-radius:var(--ds-r-lg);
  box-shadow:none!important;
  color:var(--ds-ink)!important;
}
html[data-ds] .buy-panel :is(h2,h3,h4,strong,label,legend){color:var(--ds-ink)!important}
html[data-ds] .buy-panel :is(p,li,dd,dt,span){color:var(--ds-ink-2)!important}
html[data-ds] .buy-panel .muted,
html[data-ds] .buy-panel small,
html[data-ds] .buy-panel .purchase-cost-note{color:var(--ds-muted)!important}
html[data-ds] .buy-panel .price{color:var(--ds-ink)!important;font-weight:700!important}
html[data-ds] .buy-panel .notice{
  background:var(--ds-warn-soft)!important;color:var(--ds-warn)!important;
  border:1px solid color-mix(in srgb,var(--ds-warn) 24%,transparent);
  border-radius:var(--ds-r-sm);
}
html[data-ds] .buy-panel .purchase-guide{
  background:var(--ds-surface-2)!important;color:var(--ds-ink-2)!important;
  border-radius:var(--ds-r-sm);padding:12px 14px;
}
html[data-ds] .buy-panel .purchase-guide :is(dt,dd,summary){color:var(--ds-ink-2)!important}
html[data-ds] .buy-panel .button:not(.primary):not(.text){
  background:var(--ds-surface)!important;
  border:1px solid var(--ds-line-strong)!important;
  color:var(--ds-ink)!important;
}
html[data-ds] .buy-panel .sku-options button{
  background:var(--ds-surface)!important;
  border:1px solid var(--ds-line-strong)!important;
  color:var(--ds-ink)!important;
  border-radius:var(--ds-r-sm);
}
html[data-ds] .buy-panel .sku-options button.selected,
html[data-ds] .buy-panel .sku-options button[aria-pressed=true]{
  background:var(--ds-accent-soft)!important;
  border-color:var(--ds-accent)!important;
  color:var(--ds-ink)!important;
  box-shadow:inset 0 0 0 1px var(--ds-accent)!important;
}

/* 规格切换条选中态：去掉蓝色半透明底 */
html[data-ds] .buy-panel .series-option-chip.selected,
html[data-ds] .series-option-chip.selected{
  background:var(--ds-accent-soft)!important;
  border-color:var(--ds-accent)!important;
  color:var(--ds-ink)!important;
  box-shadow:inset 0 0 0 1px var(--ds-accent)!important;
}
html[data-ds] .series-option-chip{
  background:var(--ds-surface)!important;
  border:1px solid var(--ds-line-strong)!important;
  color:var(--ds-ink-2)!important;
}

/* ---------- 25. 内页基准字号与首页对齐（16px） ---------- */
html[data-ds] .shell.page,
html[data-ds] main.page{font-size:var(--ds-f-md)!important}
html[data-ds] .page :is(p,li,dd,label,.field,.field>span,.field small){font-size:var(--ds-f-base)!important}
html[data-ds] .page .field>span{font-size:var(--ds-f-sm)!important}
html[data-ds] .page small,
html[data-ds] .page .muted{font-size:var(--ds-f-sm)!important}
html[data-ds] .page :is(input,select,textarea){font-size:var(--ds-f-sm)!important}

/* 供货合作等大标题收敛到统一尺度 */
html[data-ds] .supplier-page .page-title h1,
html[data-ds] .supplier-page>h1,
html[data-ds] .supplier-hero h1{font-size:var(--ds-f-3xl)!important;line-height:1.2!important}

/* 命中 inner-layout.css 里 body:not(.merchant-admin) .product-page .buy-panel 的 !important */
html[data-ds] body:not(.merchant-admin) .product-page .buy-panel,
html[data-ds] body:not(.merchant-admin) .buy-panel{
  background:var(--ds-surface)!important;
  border:1px solid var(--ds-line)!important;
  color:var(--ds-ink)!important;
}
html[data-ds] body:not(.merchant-admin) .buy-panel :is(h2,h3,h4,strong,label,legend,dt,.price){color:var(--ds-ink)!important}
html[data-ds] body:not(.merchant-admin) .buy-panel :is(p,li,dd,span){color:var(--ds-ink-2)!important}
html[data-ds] body:not(.merchant-admin) .buy-panel :is(.muted,small,.product-sold){color:var(--ds-muted)!important}
html[data-ds] body:not(.merchant-admin) .buy-panel .notice{
  background:var(--ds-warn-soft)!important;
  color:var(--ds-warn)!important;
  border:1px solid color-mix(in srgb,var(--ds-warn) 24%,transparent)!important;
}
html[data-ds] body:not(.merchant-admin) .buy-panel .purchase-guide{
  background:var(--ds-surface-2)!important;
  border:1px solid var(--ds-line)!important;
  color:var(--ds-ink-2)!important;
}
html[data-ds] body:not(.merchant-admin) .buy-panel .button:not(.primary):not(.text){
  background:var(--ds-surface)!important;
  border:1px solid var(--ds-line-strong)!important;
  color:var(--ds-ink)!important;
}
html[data-ds] body:not(.merchant-admin) .buy-panel .quantity{
  border-color:var(--ds-line-strong)!important;
  background:var(--ds-surface)!important;
}
html[data-ds] body:not(.merchant-admin) .buy-panel .quantity .button{
  background:transparent!important;color:var(--ds-ink)!important;
}
html[data-ds] body:not(.merchant-admin) .buy-panel .quantity input{
  background:transparent!important;color:var(--ds-ink)!important;
}

/* ---------- 26. 登录/注册切换标签：蓝色选中态改品牌色 ---------- */
html[data-ds] .auth-page :is(.auth-tabs,.tabs) a{
  color:var(--ds-ink-2)!important;
  background:var(--ds-surface-2)!important;
  border:1px solid transparent!important;
  border-radius:var(--ds-r-sm);
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--ds-f-sm)!important;font-weight:550;
}
html[data-ds] .auth-page :is(.auth-tabs,.tabs) a.active,
html[data-ds] .auth-page :is(.auth-tabs,.tabs) a[aria-current]{
  background:var(--ds-accent)!important;
  color:var(--ds-accent-ink)!important;
  border-color:var(--ds-accent)!important;
  font-weight:650;
}
html[data-ds] .auth-page :is(.auth-tabs,.tabs) a:hover{
  color:var(--ds-ink)!important;
  border-color:var(--ds-line-strong)!important;
}

/* ---------- 27. 供货合作页标题收敛到统一尺度 ---------- */
html[data-ds] .supplier-page :is(.supplier-hero h1,.page-title h1)>br{display:block}
html[data-ds] .supplier-page :is(.supplier-hero h1,.page-title h1){
  font-size:var(--ds-f-2xl)!important;
  line-height:1.28!important;
  letter-spacing:-.02em!important;
  font-weight:700!important;
}

/* 供货合作页：.supplier-intro h1（supplier-portal.css 的 clamp）收敛到统一尺度 */
html[data-ds] .supplier-page .supplier-intro h1,
html[data-ds] .supplier-intro h1{
  font-size:var(--ds-f-2xl)!important;
  line-height:1.28!important;
  letter-spacing:-.02em!important;
  font-weight:700!important;
}
html[data-ds] .supplier-page .supplier-intro :is(p,.supplier-subtitle){
  font-size:var(--ds-f-base)!important;
  line-height:1.6!important;
  color:var(--ds-muted)!important;
}

/* ---------- 28. 查单页链接与分页当前页：去掉旧主题蓝 ---------- */
html[data-ds] .lookup-page :is(.lookup-member-link,.lookup-browser-entry,.lookup-cache-note) a,
html[data-ds] .lookup-page a:not(.button){
  color:var(--ds-ink)!important;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--ds-line-strong);
}
html[data-ds] .lookup-page a:not(.button):hover{
  color:var(--ds-ink)!important;
  text-decoration-color:var(--ds-accent);
  background:var(--ds-accent-soft);
}

html[data-ds] .catalogue-page-numbers button.button.is-current,
html[data-ds] :is(.catalogue-page-controls,.pagination) button.is-current,
html[data-ds] :is(.catalogue-page-controls,.pagination) .button[aria-current="page"]{
  background:var(--ds-accent)!important;
  border-color:var(--ds-accent)!important;
  color:var(--ds-accent-ink)!important;
  font-weight:700;
}
html[data-ds] :is(.catalogue-page-controls,.pagination) .button:not(.is-current):not([aria-current]){
  background:var(--ds-surface)!important;
  border:1px solid var(--ds-line-strong)!important;
  color:var(--ds-ink-2)!important;
}
html[data-ds] :is(.catalogue-page-controls,.pagination) .button:not(.is-current):not([aria-current]):hover{
  color:var(--ds-ink)!important;
  border-color:var(--ds-ink-2)!important;
}

/* ---------- 29. 商品卡片排版对齐 ---------- */

/* 标题固定预留两行高度：单行标题与两行标题的元信息行对齐 */
html[data-ds] .sf-store .sf-product h3{
  min-height:calc(2 * 1.45em);
  display:flex;align-items:flex-start;
}
html[data-ds] .sf-store .sf-product h3>a{-webkit-line-clamp:2}

/* 底部价格与按钮不换行，单行等高对齐 */
html[data-ds] .sf-store .sf-product-footer{
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  min-height:60px;
  padding:10px 14px 14px!important;
}
html[data-ds] .sf-store .sf-product-price{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
html[data-ds] .sf-store .sf-product-footer .button{
  flex:0 0 auto;
  white-space:nowrap!important;
  max-width:60%;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 小屏：允许纵向堆叠但仍保持卡片间一致 */
@media(max-width:640px){
  html[data-ds] .sf-store .sf-product-footer{
    flex-direction:column!important;
    align-items:stretch!important;
    min-height:0;
    gap:8px!important;
  }
  html[data-ds] .sf-store .sf-product-footer .button{max-width:none;width:100%}
  html[data-ds] .sf-store .sf-product h3{min-height:calc(2 * 1.45em)}
}

/* 价格不允许被截断：按钮改为可收缩、价格优先保留 */
html[data-ds] .sf-store .sf-product-price{
  flex:1 1 auto!important;
  min-width:0;
  overflow:visible!important;
  text-overflow:clip!important;
}
html[data-ds] .sf-store .sf-product-footer .button{
  flex:0 1 auto!important;
  max-width:none!important;
  padding-inline:10px!important;
  font-size:12.5px!important;
}
html[data-ds] .sf-store .sf-product-footer .button .icon{width:14px;height:14px}

/* ---------- 30. 购买须知展开：标题与内容纵向排列，不再并排挤压 ---------- */
html[data-ds] #overlays .popup-qty-guide-row .popup-delivery-guide{
  display:block!important;
  align-self:end!important;
  width:100%;
}
html[data-ds] #overlays .popup-qty-guide-row .popup-delivery-guide .purchase-guide,
html[data-ds] #overlays .popup-qty-guide-row .popup-delivery-guide details,
html[data-ds] #overlays .popup-delivery-guide details{
  display:block!important;
  width:100%!important;
}
html[data-ds] #overlays .popup-qty-guide-row .purchase-guide summary{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between;
  gap:8px;
  width:100%!important;
  min-height:44px;
  white-space:nowrap;
}
html[data-ds] #overlays .popup-qty-guide-row .purchase-guide[open] summary{
  border-bottom-left-radius:0!important;
  border-bottom-right-radius:0!important;
  border-bottom-color:transparent!important;
}
html[data-ds] #overlays .popup-qty-guide-row .purchase-guide dl{
  display:grid!important;
  gap:12px!important;
  margin:0!important;
  padding:14px 16px 16px!important;
  border:1px solid var(--ds-line-strong);
  border-top:0;
  border-radius:0 0 var(--ds-r-sm) var(--ds-r-sm);
  background:var(--ds-surface)!important;
}
html[data-ds] #overlays .popup-qty-guide-row .purchase-guide dl>div{
  display:grid!important;
  grid-template-columns:92px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:start;
}
html[data-ds] #overlays .popup-qty-guide-row .purchase-guide dt{
  font-size:12.5px!important;
  color:var(--ds-muted)!important;
  white-space:nowrap;
}
html[data-ds] #overlays .popup-qty-guide-row .purchase-guide dd{
  font-size:13px!important;
  line-height:1.65!important;
  color:var(--ds-ink-2)!important;
  margin:0;
  overflow-wrap:anywhere;
}
@media(max-width:900px){
  html[data-ds] #overlays .popup-qty-guide-row .purchase-guide dl>div{
    grid-template-columns:minmax(0,1fr)!important;gap:4px!important;
  }
  html[data-ds] #overlays .popup-qty-guide-row .purchase-guide dt{color:var(--ds-ink)!important;font-weight:600}
}

/* ---------- 31. 购买须知展开时横跨整行（收起时仍与步进器并排） ---------- */
html[data-ds] #overlays .popup-qty-guide-row:has(.purchase-guide[open]){
  grid-template-columns:minmax(0,1fr)!important;
  align-items:start!important;
  gap:10px!important;
}
html[data-ds] #overlays .popup-qty-guide-row:has(.purchase-guide[open]) .popup-delivery-guide{
  grid-column:1 / -1!important;
  width:100%!important;
}
html[data-ds] #overlays .popup-qty-guide-row:has(.purchase-guide[open]) .popup-qty-field{
  width:auto!important;
  max-width:220px;
}
html[data-ds] #overlays .popup-qty-guide-row:has(.purchase-guide[open]) .quantity{
  width:auto!important;
}

/* ---------- 32. 列表模式重排：封面｜标题区｜价格动作 ---------- */
html[data-ds] .sf-store .sf-products.list-view{
  display:flex!important;flex-direction:column;gap:8px!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-product{
  display:grid!important;
  grid-template-columns:88px minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:16px!important;
  padding:12px 16px!important;
  min-height:88px;
  border-radius:var(--ds-r-md)!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-product-cover{
  order:0!important;
  width:88px!important;height:62px!important;
  aspect-ratio:auto!important;
  border-radius:var(--ds-r-xs)!important;
  margin:0!important;
  align-self:center;
}
html[data-ds] .sf-store .sf-products.list-view .sf-product-body{
  padding:0!important;
  display:flex!important;flex-direction:column;gap:4px!important;
  min-width:0!important;
}
/* 标题与规格标签紧邻，不再被推到头尾两端 */
html[data-ds] .sf-store .sf-products.list-view .sf-product-title-row{
  display:flex!important;align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  min-width:0;
  width:100%;
}
html[data-ds] .sf-store .sf-products.list-view .sf-product h3{
  min-height:0!important;
  flex:0 1 auto!important;
  display:block!important;
  width:auto!important;
  font-size:var(--ds-f-base)!important;
  line-height:1.4!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-product h3>a{
  -webkit-line-clamp:1!important;
  display:block!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-ds] .sf-store .sf-products.list-view .product-package-label{
  flex:0 0 auto!important;align-self:center!important;margin:0!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-product-meta{
  margin:0!important;
  font-size:12.5px!important;
  line-height:18px!important;
  min-height:18px!important;
}
/* 价格与动作：右侧固定列，垂直居中 */
html[data-ds] .sf-store .sf-products.list-view .sf-product-footer{
  padding:0!important;margin:0!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:14px!important;
  flex-wrap:nowrap!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-product-price{
  font-size:var(--ds-f-lg)!important;
  text-align:right;
  white-space:nowrap;
}
html[data-ds] .sf-store .sf-products.list-view .sf-product-footer .button{
  min-width:88px;
  min-height:36px!important;
  font-size:13px!important;
}

/* 手机端：封面 + 内容两行结构 */
@media(max-width:640px){
  html[data-ds] .sf-store .sf-products.list-view .sf-product{
    grid-template-columns:64px minmax(0,1fr)!important;
    grid-template-areas:"cover body" "footer footer";
    row-gap:10px!important;
    padding:12px!important;
  }
  html[data-ds] .sf-store .sf-products.list-view .sf-product-cover{grid-area:cover;width:64px!important;height:46px!important}
  html[data-ds] .sf-store .sf-products.list-view .sf-product-body{grid-area:body}
  html[data-ds] .sf-store .sf-products.list-view .sf-product-footer{grid-area:footer;justify-content:space-between!important}
  html[data-ds] .sf-store .sf-products.list-view .sf-product-footer .button{min-width:0;flex:0 0 auto}
}

/* ---------- 33. 商品元信息行：交付类型与库存字号、字重统一 ---------- */
html[data-ds] .sf-store .sf-product-meta{
  --meta-fs:12.5px;
  font-size:var(--meta-fs)!important;
  line-height:18px!important;
  gap:0 8px!important;
}
html[data-ds] .sf-store .sf-product-meta>span,
html[data-ds] .sf-store .sf-product-meta>.delivery-badge,
html[data-ds] .sf-store .sf-product-meta .stock-quantity,
html[data-ds] .sf-store .sf-product-meta .product-sold,
html[data-ds] .sf-store .sf-product-meta .sf-product-spec,
html[data-ds] .sf-store .sf-product-meta .sf-series-count{
  font-size:var(--meta-fs)!important;
  font-weight:400!important;
  line-height:18px!important;
}
/* 数字仍用等宽，避免库存位数变化时抖动 */
html[data-ds] .sf-store .sf-product-meta .stock-quantity,
html[data-ds] .sf-store .sf-product-meta .product-sold{
  font-variant-numeric:tabular-nums;
}
/* 徽标内图标与文字同高，不再突出 */
html[data-ds] .sf-store .sf-product-meta .delivery-badge{
  display:inline-flex;align-items:center;gap:3px;
}
html[data-ds] .sf-store .sf-product-meta .delivery-badge :is(img,.icon,svg){
  width:13px!important;height:13px!important;
  font-size:0;opacity:.9;
}
/* 列表模式下沿用同一套字号 */
html[data-ds] .sf-store .sf-products.list-view .sf-product-meta,
html[data-ds] .sf-store .sf-products.list-view .sf-product-meta>span{
  font-size:var(--meta-fs)!important;
  line-height:18px!important;
}

/* ---------- 34. 列表模式：表头 + 分类分组 ---------- */
html[data-ds] .sf-store .sf-products.list-view{
  display:flex!important;flex-direction:column;gap:18px!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-head,
html[data-ds] .sf-store .sf-products.list-view .sf-list-row{
  display:grid!important;
  grid-template-columns:56px minmax(0,1fr) 140px 96px 116px!important;
  align-items:center!important;
  column-gap:14px;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-head{
  padding:0 14px 8px!important;
  border-bottom:1px solid var(--ds-line);
  font-size:12px!important;font-weight:600!important;color:var(--ds-muted)!important;
  letter-spacing:.02em;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-head>span:nth-child(3),
html[data-ds] .sf-store .sf-products.list-view .sf-list-head>span:nth-child(4),
html[data-ds] .sf-store .sf-products.list-view .sf-list-head>span:nth-child(5){
  text-align:right;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-head-cover{width:56px}

html[data-ds] .sf-store .sf-products.list-view .sf-list-group{
  display:flex!important;flex-direction:column!important;gap:2px!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-group-title{
  display:flex!important;align-items:baseline;gap:8px;
  margin:0 0 6px!important;
  padding:0 14px!important;
  font-size:13px!important;font-weight:650!important;
  color:var(--ds-ink)!important;letter-spacing:0;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-group-title small{
  font-size:11.5px;font-weight:500;color:var(--ds-muted);
}

html[data-ds] .sf-store .sf-products.list-view .sf-list-row{
  padding:10px 14px!important;
  min-height:72px;
  border-radius:var(--ds-r-sm)!important;
  border:1px solid transparent!important;
  background:transparent!important;
  transition:background-color 120ms var(--ds-ease),border-color 120ms var(--ds-ease);
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-row:hover{
  background:var(--ds-surface)!important;
  border-color:var(--ds-line)!important;
  box-shadow:var(--ds-shadow-1);
  transform:none!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-cover{
  width:56px!important;height:42px!important;
  display:block;overflow:hidden;
  border-radius:var(--ds-r-xs);
  background:var(--ds-surface-2);
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-cover img{width:100%;height:100%;object-fit:contain}
html[data-ds] .sf-store .sf-products.list-view .sf-list-main{min-width:0!important}
html[data-ds] .sf-store .sf-products.list-view .sf-list-main h3{
  margin:0!important;min-height:0!important;
  display:flex!important;align-items:center!important;gap:8px!important;
  font-size:var(--ds-f-base)!important;font-weight:550!important;line-height:1.4!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-main h3>a{
  display:block!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  -webkit-line-clamp:unset!important;
  color:var(--ds-ink)!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-sub{
  display:flex!important;align-items:center!important;gap:8px!important;
  margin-top:2px;
  font-size:12.5px!important;line-height:18px!important;color:var(--ds-muted)!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-sub .delivery-badge{
  font-size:12.5px!important;font-weight:400!important;color:var(--ds-ok)!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-price{
  text-align:right;
  font-size:var(--ds-f-md)!important;font-weight:700!important;
  color:var(--ds-ink)!important;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-price small{
  font-size:11.5px;font-weight:500;color:var(--ds-muted);
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-stock{
  text-align:right;
  font-size:12.5px!important;color:var(--ds-muted)!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-stock .out-of-stock{color:var(--ds-bad)!important}
html[data-ds] .sf-store .sf-products.list-view .sf-list-action{
  display:flex!important;justify-content:flex-end!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-action .button{
  min-width:84px;min-height:34px!important;font-size:13px!important;
}

/* 窄屏：隐藏表头，改为两段式卡片行 */
@media(max-width:900px){
  html[data-ds] .sf-store .sf-products.list-view .sf-list-head{display:none!important}
  html[data-ds] .sf-store .sf-products.list-view .sf-list-row{
    grid-template-columns:48px minmax(0,1fr) auto!important;
    grid-template-areas:"cover main price" "cover sub action";
    row-gap:6px!important;
    column-gap:12px!important;
    padding:12px!important;
    background:var(--ds-surface)!important;
    border:1px solid var(--ds-line)!important;
  }
  html[data-ds] .sf-store .sf-products.list-view .sf-list-cover{grid-area:cover;width:48px!important;height:38px!important;align-self:start}
  html[data-ds] .sf-store .sf-products.list-view .sf-list-main{grid-area:main}
  html[data-ds] .sf-store .sf-products.list-view .sf-list-sub{grid-area:sub;margin-top:0}
  html[data-ds] .sf-store .sf-products.list-view .sf-list-price{grid-area:price;align-self:start}
  html[data-ds] .sf-store .sf-products.list-view .sf-list-stock{display:none!important}
  html[data-ds] .sf-store .sf-products.list-view .sf-list-action{grid-area:action;align-self:end}
  html[data-ds] .sf-store .sf-products.list-view .sf-list-sub .stock-quantity{display:inline-flex!important}
}

/* ---------- 35. 列表模式：交付方式独立成列（六列网格） ---------- */
html[data-ds] .sf-store .sf-products.list-view .sf-list-head,
html[data-ds] .sf-store .sf-products.list-view .sf-list-row{
  grid-template-columns:56px minmax(0,1fr) 96px 132px 84px 112px!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-head>span:nth-child(3){
  text-align:right;
}
/* 交付方式列 */
html[data-ds] .sf-store .sf-products.list-view .sf-list-delivery{
  display:flex!important;align-items:center;justify-content:flex-end;
  min-width:0;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-delivery .delivery-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12.5px!important;font-weight:400!important;line-height:18px!important;
  color:var(--ds-ok)!important;
  white-space:nowrap;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-delivery .delivery-badge.delivery-manual{color:var(--ds-warn)!important}
html[data-ds] .sf-store .sf-products.list-view .sf-list-delivery .delivery-badge .icon,
html[data-ds] .sf-store .sf-products.list-view .sf-list-delivery .delivery-badge img{
  width:13px;height:13px;
}
/* 副行只留销量，高度不足时不占位 */
html[data-ds] .sf-store .sf-products.list-view .sf-list-sub:empty{display:none!important}

@media(max-width:900px){
  html[data-ds] .sf-store .sf-products.list-view .sf-list-row{
    grid-template-columns:48px minmax(0,1fr) auto!important;
    grid-template-areas:"cover main price" "cover delivery action";
  }
  html[data-ds] .sf-store .sf-products.list-view .sf-list-delivery{grid-area:delivery;justify-content:flex-start}
  html[data-ds] .sf-store .sf-products.list-view .sf-list-sub{display:none!important}
  html[data-ds] .sf-store .sf-products.list-view .sf-list-delivery .delivery-badge{
    font-size:12px!important;
  }
}

/* ---------- 36. 表头与数据行网格严格对齐（同一 gap / 同一 padding） ---------- */
html[data-ds] .sf-store .sf-products.list-view .sf-list-head,
html[data-ds] .sf-store .sf-products.list-view .sf-list-row{
  column-gap:14px!important;
  padding-left:14px!important;
  padding-right:14px!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-head{
  padding-top:0!important;
  padding-bottom:8px!important;
}
html[data-ds] .sf-store .sf-products.list-view .sf-list-row{
  padding-top:10px!important;
  padding-bottom:10px!important;
}
/* 表头各列与数据列同向对齐 */
html[data-ds] .sf-store .sf-products.list-view .sf-list-head>span:nth-child(2){text-align:left}
html[data-ds] .sf-store .sf-products.list-view .sf-list-head>span:nth-child(3),
html[data-ds] .sf-store .sf-products.list-view .sf-list-head>span:nth-child(4),
html[data-ds] .sf-store .sf-products.list-view .sf-list-head>span:nth-child(5),
html[data-ds] .sf-store .sf-products.list-view .sf-list-head>span:nth-child(6){text-align:right}

/* ---------- 37. 分类栏加宽，长分类名完整显示 ---------- */
@media(min-width:901px){
  html[data-ds] .sf-store .sf-directory{
    grid-template-columns:216px minmax(0,1fr)!important;
    gap:28px!important;
  }
}
@media(min-width:1180px){
  html[data-ds] .sf-store .sf-directory{
    grid-template-columns:232px minmax(0,1fr)!important;
  }
}
html[data-ds] .sf-store .sf-categories .button{
  min-width:0;
}
html[data-ds] .sf-store .sf-categories .sf-cat-label{
  min-width:0!important;
  flex:1 1 auto;
}
html[data-ds] .sf-store .sf-categories .sf-cat-label>span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html[data-ds] .sf-store .sf-categories .button small{flex:none}

/* ---------- 38. 分类栏：再放宽并允许名称换行（不截断） ---------- */
@media(min-width:1180px){
  html[data-ds] .sf-store .sf-directory{grid-template-columns:252px minmax(0,1fr)!important}
}
@media(min-width:901px) and (max-width:1179px){
  html[data-ds] .sf-store .sf-directory{grid-template-columns:232px minmax(0,1fr)!important}
}
html[data-ds] .sf-store .sf-categories .sf-cat-label>span:last-child{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:22px;
  overflow-wrap:anywhere;
}
html[data-ds] .sf-store .sf-categories .button{
  align-items:flex-start!important;
  padding-block:10px!important;
  min-height:46px;
}
html[data-ds] .sf-store .sf-categories .sf-cat-icon{margin-top:1px}
html[data-ds] .sf-store .sf-categories .button small{margin-top:1px}

/* ---------- 39. 头部控件统一高度与垂直对齐 ---------- */
html[data-ds] .sf-site-header .sf-header-inner,
html[data-ds] .topbar{
  align-items:center!important;
}
/* 导航项、图标按钮、语言框、注册按钮：同一控件高度 */
html[data-ds] .sf-site-header .sf-site-nav>a,
html[data-ds] .topbar .nav a{
  min-height:40px!important;height:40px!important;
  padding:0 12px!important;
  display:inline-flex!important;align-items:center!important;
  font-size:14px!important;line-height:1!important;
  box-sizing:border-box;
}
html[data-ds] .sf-site-header .sf-header-actions .button,
html[data-ds] .sf-site-header .sf-header-actions .sf-icon-button,
html[data-ds] .topbar .header-actions .button,
html[data-ds] .topbar .header-actions .sf-icon-button{
  min-height:40px!important;height:40px!important;
  max-height:40px!important;
  padding:0 12px!important;
  box-sizing:border-box;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  line-height:1!important;
}
html[data-ds] .sf-site-header .sf-header-actions .button.icon-only,
html[data-ds] .sf-site-header .sf-header-actions .sf-icon-button,
html[data-ds] .topbar .header-actions .button.icon-only,
html[data-ds] .topbar .header-actions .sf-icon-button{
  width:40px!important;min-width:40px!important;padding:0!important;
}
/* 语言选择器与主题按钮同高 */
html[data-ds] .sf-site-header .language-control,
html[data-ds] .topbar .language-control{
  min-height:40px!important;height:40px!important;
  display:inline-flex!important;align-items:center!important;
  box-sizing:border-box;
}
html[data-ds] .sf-site-header .language-control select,
html[data-ds] .topbar .language-control select{
  min-height:40px!important;height:40px!important;
  padding-top:0!important;padding-bottom:0!important;
  font-size:14px!important;line-height:1!important;
  box-sizing:border-box;
}
html[data-ds] .sf-site-header .appearance-button,
html[data-ds] .topbar .appearance-button{
  width:40px!important;min-width:40px!important;
  height:40px!important;min-height:40px!important;
  padding:0!important;
}
/* 注册按钮与登录标签同基线 */
html[data-ds] .sf-site-header .sf-header-actions .account-register,
html[data-ds] .topbar .header-actions .account-register{
  display:inline-flex!important;align-items:center!important;
  height:40px!important;min-height:40px!important;
  padding:0 16px!important;line-height:1!important;
}
html[data-ds] .sf-site-header .sf-header-actions .account-login,
html[data-ds] .sf-site-header .sf-header-actions .user-link,
html[data-ds] .topbar .header-actions .account-login,
html[data-ds] .topbar .header-actions .user-link{
  display:inline-flex!important;align-items:center!important;
  height:40px!important;min-height:40px!important;
  padding:0 8px!important;
  font-size:14px!important;line-height:1!important;
}
/* 偏好区整体与导航同宽基线 */
html[data-ds] .sf-site-header .sf-preferences,
html[data-ds] .sf-site-header .store-preferences{
  display:inline-flex!important;align-items:center!important;
  gap:6px!important;
}
html[data-ds] .sf-site-header .sf-header-actions{gap:6px!important}

/* ---------- 40. 首页 polish：手机首屏露出商品，头部单行 ---------- */
@media(max-width:900px){
  /* 头部：语言与主题按钮并回同一行，去掉独立空行 */
  html[data-ds] .sf-site-header .sf-header-inner{
    flex-wrap:wrap!important;
    row-gap:0!important;
    padding-block:8px!important;
    min-height:56px!important;
  }
  html[data-ds] .sf-site-header .sf-preferences,
  html[data-ds] .sf-site-header .store-preferences{
    order:9;margin-left:0!important;
  }
  html[data-ds] .sf-site-header .sf-header-actions{margin-left:auto!important}

  /* Hero：压缩高度，保留标题与主行动 */
  html[data-ds] .sf-store .sf-hero{margin-block:10px 6px!important;border-radius:var(--ds-r-md)!important}
  html[data-ds] .sf-store .sf-hero .sf-hero-slide{min-height:150px!important}
  html[data-ds] .sf-store .sf-hero .sf-hero-copy{padding:16px 18px!important;gap:6px!important}
  html[data-ds] .sf-store .sf-hero .sf-hero-copy h1{font-size:20px!important;line-height:1.25!important}
  html[data-ds] .sf-store .sf-hero .sf-hero-copy p{
    font-size:12.5px!important;line-height:1.5!important;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  html[data-ds] .sf-store .sf-hero .sf-hero-actions{margin-top:10px!important;gap:8px!important}
  html[data-ds] .sf-store .sf-hero .sf-hero-actions .button{min-height:38px!important;font-size:13px!important}
  html[data-ds] .sf-store .sf-hero .sf-hero-controls{min-height:38px!important}
  html[data-ds] .sf-store .sf-hero .sf-hero-controls .button{min-height:32px!important}

  /* 通知条：单行省略，不占两行 */
  html[data-ds] .sf-store .sf-notice{min-height:38px!important;padding-block:4px!important}
  html[data-ds] .sf-store .sf-notice>p{
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* 分类横条：压缩高度 */
  html[data-ds] .sf-store .sf-categories{padding-bottom:6px!important;margin-bottom:4px!important}
  html[data-ds] .sf-store .sf-categories .button{min-height:44px!important;padding:10px!important}
  html[data-ds] .sf-store .sf-catalogue-heading{padding-bottom:8px!important;margin-bottom:8px!important}
  html[data-ds] .sf-store .sf-catalogue-heading h2{font-size:20px!important}
  html[data-ds] .sf-store .sf-tools{gap:8px!important;margin-bottom:8px!important}
  html[data-ds] .sf-store .sf-search{min-height:44px}
  html[data-ds] .sf-store .sf-toolbar{gap:6px!important}
}

/* ---------- 41. 手机头部：强制单行，控件压缩 ---------- */
@media(max-width:640px){
  html[data-ds] .sf-site-header .sf-header-inner{
    flex-wrap:nowrap!important;
    gap:6px!important;
    padding-block:8px!important;
    min-height:56px!important;
    height:auto!important;
  }
  html[data-ds] .sf-site-header .sf-brand{
    flex:0 0 auto!important;
    gap:6px!important;
    font-size:17px!important;
  }
  html[data-ds] .sf-site-header .sf-logo{
    width:28px!important;height:28px!important;
  }
  html[data-ds] .sf-site-header .sf-preferences,
  html[data-ds] .sf-site-header .store-preferences{
    flex:0 0 auto!important;
    margin:0!important;
    gap:2px!important;
  }
  /* 语言选择：只保留图标与短码 */
  html[data-ds] .sf-site-header .language-control{
    width:auto!important;min-width:0!important;
  }
  html[data-ds] .sf-site-header .language-control select,
  html[data-ds] .sf-site-header #store-language{
    width:64px!important;min-width:0!important;
    padding:0 4px!important;
    font-size:12px!important;
  }
  html[data-ds] .sf-site-header .language-control> :is(img,.icon,svg){
    width:15px!important;height:15px!important;
  }
  html[data-ds] .sf-site-header .appearance-button{
    width:30px!important;min-width:30px!important;
    height:32px!important;min-height:32px!important;
  }
  html[data-ds] .sf-site-header .sf-header-actions{
    margin-left:auto!important;
    gap:2px!important;
    flex:0 0 auto!important;
  }
  html[data-ds] .sf-site-header .sf-header-actions .button,
  html[data-ds] .sf-site-header .sf-header-actions .sf-icon-button{
    width:32px!important;min-width:32px!important;
    height:32px!important;min-height:32px!important;
    padding:0!important;
  }
  html[data-ds] .sf-site-header .sf-header-actions .account-register{
    width:auto!important;min-width:0!important;
    padding:0 10px!important;
    font-size:12.5px!important;
  }
  html[data-ds] .sf-site-header .sf-header-actions .account-login{
    padding:0 4px!important;font-size:12.5px!important;height:32px!important;
  }
}

/* ---------- 42. 手机头部：旧层是 grid，强制改回单行 flex ---------- */
@media(max-width:640px){
  html[data-ds] .sf-site-header .sf-header-inner{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:6px!important;
    width:calc(100% - 28px)!important;
    margin-inline:auto!important;
    padding-block:7px!important;
    min-height:0!important;
    height:auto!important;
  }
  html[data-ds] .sf-site-header .sf-brand{
    flex:0 1 auto!important;
    min-width:0!important;
    font-size:16px!important;
    gap:5px!important;
    overflow:hidden;
  }
  html[data-ds] .sf-site-header .sf-brand>span{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  html[data-ds] .sf-site-header .sf-logo{width:26px!important;height:26px!important;flex:none}
  html[data-ds] .sf-site-header .sf-preferences,
  html[data-ds] .sf-site-header .store-preferences{
    flex:0 0 auto!important;margin:0!important;gap:2px!important;
  }
  html[data-ds] .sf-site-header .language-control{
    width:56px!important;min-width:56px!important;max-width:56px!important;
    height:30px!important;min-height:30px!important;
  }
  html[data-ds] .sf-site-header .language-control select,
  html[data-ds] .sf-site-header #store-language{
    width:56px!important;min-width:0!important;
    height:30px!important;min-height:30px!important;
    padding:0 2px!important;font-size:11.5px!important;
  }
  html[data-ds] .sf-site-header .language-control> :is(img,.icon,svg){display:none!important}
  html[data-ds] .sf-site-header .appearance-button{
    width:28px!important;min-width:28px!important;height:30px!important;min-height:30px!important;
  }
  html[data-ds] .sf-site-header .sf-header-actions{
    flex:0 0 auto!important;margin-left:auto!important;gap:2px!important;
  }
  html[data-ds] .sf-site-header .sf-header-actions .button,
  html[data-ds] .sf-site-header .sf-header-actions .sf-icon-button{
    width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;
  }
  html[data-ds] .sf-site-header .sf-header-actions .account-register{
    width:auto!important;min-width:0!important;
    height:30px!important;min-height:30px!important;
    padding:0 9px!important;font-size:12px!important;
  }
  html[data-ds] .sf-site-header .sf-header-actions .account-login{
    height:30px!important;min-height:30px!important;padding:0 2px!important;font-size:12px!important;
  }
  html[data-ds] .sf-site-header .sf-header-actions .cart-count{font-size:9px!important;min-width:14px;height:14px;line-height:13px}
}

/* ---------- 43. 商品卡片底部：价格不可压缩，宽度不足时按钮换行 ---------- */
html[data-ds] .sf-store .sf-product{container-type:inline-size}

html[data-ds] .sf-store .sf-product-footer{
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:6px 8px!important;
}
/* 价格优先保持完整，绝不压缩 */
html[data-ds] .sf-store .sf-product-price{
  flex:0 0 auto!important;
  min-width:max-content!important;
  white-space:nowrap;
}
html[data-ds] .sf-store .sf-product-price small{white-space:nowrap}
html[data-ds] .sf-store .sf-product-footer .button{
  flex:0 0 auto!important;
  min-width:0!important;
  max-width:none!important;
}

/* 卡片窄于 260px 时：按钮独占一行，占满宽度 */
@container (max-width: 259px){
  html[data-ds] .sf-store .sf-product-footer{flex-direction:column!important;align-items:stretch!important}
  html[data-ds] .sf-store .sf-product-footer .button{width:100%}
  html[data-ds] .sf-store .sf-product-price{font-size:var(--ds-f-lg)!important}
}

/* Home catalogue: keep the product name and the selected package distinct. */
html[data-ds] body:has(.home-store){--ds-shell:1520px}
html[data-ds] .sf-store :is(.sf-products.grid-view,.catalogue-recommendations-grid) .sf-product-body{
  padding:12px 0 0;
  flex:1;
  gap:8px;
}
html[data-ds] .sf-store :is(.sf-products.grid-view,.catalogue-recommendations-grid) .sf-product-title-row{
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
html[data-ds] .sf-store :is(.sf-products.grid-view,.catalogue-recommendations-grid) .sf-product h3{
  width:100%;
  min-height:0;
  font-weight:600;
}
html[data-ds] .sf-store :is(.sf-products.grid-view,.catalogue-recommendations-grid) .product-package-label{
  font-size:13px;
  font-weight:600;
  line-height:20px;
  color:var(--ds-ink);
  padding:2px 8px;
  border-radius:4px;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
}
html[data-ds] .sf-store :is(.sf-products.grid-view,.catalogue-recommendations-grid) .sf-product-meta{
  margin-top:auto;
}
html[data-ds] .sf-store :is(.sf-products.grid-view,.catalogue-recommendations-grid) .sf-product-meta .stock-quantity.in-stock{
  color:var(--ds-muted)!important;
}
html[data-ds] .sf-store :is(.sf-products.grid-view,.catalogue-recommendations-grid) .sf-product-footer{
  padding:12px 0 0!important;
  min-height:48px;
}
@container (min-width:220px){
  html[data-ds] .sf-store :is(.sf-products.grid-view,.catalogue-recommendations-grid) .sf-product-footer{
    flex-direction:row!important;
    align-items:center!important;
  }
  html[data-ds] .sf-store :is(.sf-products.grid-view,.catalogue-recommendations-grid) .sf-product-footer .button{
    width:auto;
    min-width:64px!important;
  }
}
@media(max-width:640px){
  html[data-ds] .sf-store :is(.sf-products.grid-view,.catalogue-recommendations-grid) .sf-product-body{padding-top:10px}
}

/* Components follow the selected commerce palette in both appearance modes. */
html[data-ds][data-commerce-theme]{
  --ds-paper:var(--bm-paper);
  --ds-surface:var(--bm-white);
  --ds-surface-2:var(--bm-soft);
  --ds-ink:var(--bm-ink);
  --ds-ink-2:var(--bm-ink);
  --ds-muted:var(--bm-muted);
  --ds-line:var(--bm-line);
  --ds-line-strong:var(--bm-line);
  --ds-accent:var(--bm-accent);
  --ds-accent-press:var(--bm-accent-hover);
  --ds-accent-ink:var(--bm-on-accent);
  --ds-accent-soft:var(--bm-selected);
  --ds-accent-line:var(--bm-focus);
  --ds-focus:var(--bm-focus);
}