/* ==========================================================================
   折袖AI会员 · 商城样式 v1.0
   --------------------------------------------------------------------------
   背景：原前台由 4 个样式表叠加而成（store.css 85KB + store-polish 20KB +
   store-final 22KB + checkout 1KB），其中 .ld-product-grid 被重复定义 18 次、
   .ld-product-image 20 余次，并夹杂大量 !important 覆盖。
   本文件把这套层叠关系收敛成一份可维护的样式表。

   重要：类名与 DOM 结构完全沿用现有的 store.js / product.js / account.js，
   业务逻辑与支付流程不做任何改动。

   视觉基调：白底 + 单一品牌蓝 + 中性灰，克制阴影，靠间距与层级建立秩序。
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌
   ========================================================================== */
:root {
  /* 品牌色（单一主色，不再按分类给不同边框色） */
  --c-brand: #2563eb;
  --c-brand-strong: #1d4ed8;
  --c-brand-soft: #eff5ff;
  --c-brand-line: #d6e4ff;

  /* 中性 */
  --c-ink: #0f172a;
  --c-text: #334155;
  --c-muted: #64748b;
  --c-faint: #94a3b8;
  --c-line: #e7ecf3;
  --c-line-soft: #f1f5f9;
  --c-surface: #ffffff;
  --c-canvas: #f6f8fb;

  /* 语义 */
  --c-success: #059669;
  --c-success-soft: #ecfdf5;
  --c-warning: #d97706;
  --c-warning-soft: #fffbeb;
  --c-danger: #dc2626;
  --c-danger-soft: #fef2f2;

  /* 圆角 */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  /* 间距 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;

  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;

  /* 阴影：克制，密集网格里不糊 */
  --sh-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sh-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sh-md: 0 6px 16px rgba(15, 23, 42, 0.08);
  --sh-lg: 0 16px 40px rgba(15, 23, 42, 0.14);

  /* 内容宽度 */
  --shell-max: 1240px;
  /* 电脑端分类导航移到左侧后，内容区需要更宽 */
  --shell-max-wide: 1492px;
  /* 侧栏宽度 = 商品区左侧的可用空白。
     商品区固定 1160px 居中 → 左边距 = calc(50% - 580px)；
     侧栏放 left:24px，所以可用宽度 = calc(50% - 580px - 34px) = calc(50% - 614px)。
     夹在 [176px, 312px]：宽屏取满 312px，窄屏自动收缩，
     任何视口下都不会压住商品区（之前固定 312px 就会压住）。 */
  --cat-sidebar-w: 200px;
  /* 商品区目标宽度（原来 shell 1160px 时的商品区宽度）。
     用 cqw（网格容器查询单位）而不是 %/calc ——
     在 grid-template-columns 里 100% 会解析成整个网格的宽度、
     不会自动扣掉侧栏和间距，导致算出错误列宽。
     cqw 表示「容器宽度的百分比」，这里容器没有显式声明 container-type，
     所以改用最稳的方案：固定值 + 下面的 minmax 上限。 */
  --content-col-w: 1450px;
  --shell-pad: 24px;

  /* 兼容旧变量名（原 CSS 里用到这些变量） */
  --tokyo-link: var(--c-brand);
  --tokyo-border: var(--c-line);
  --tokyo-text: var(--c-ink);
  --tokyo-muted: var(--c-muted);
  --tokyo-surface: var(--c-surface);
  --tokyo-shadow-soft: var(--sh-xs);
  --tokyo-shadow-elevated: var(--sh-md);
}

/* ==========================================================================
   2. 基础重置
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text);
  /* 背景改为中性浅灰，商品卡片的白色才能凸显出来 */
  background: var(--c-canvas);
  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: var(--c-brand);
  text-decoration: none;
}

/* 数字等宽，价格列对齐 */
.num,
.ld-product-price,
.tokyo-commodity-price {
  font-variant-numeric: tabular-nums;
}

/* 屏幕阅读器专用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ==========================================================================
   3. 页面骨架
   ========================================================================== */
.tokyo-page-frame,
.ld-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.tokyo-main,
.ld-main {
  flex: 1;
  padding: var(--s-5) var(--shell-pad) var(--s-8);
}

.tokyo-shell,
.ld-shop-shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

/* 兼容旧版隐藏控件容器 */
.ld-hidden-controls,
.ld-compat-header {
  display: none !important;
}

/* ==========================================================================
   4. 店铺头部
   ========================================================================== */
.ld-store-profile,
.tokyo-store-profile {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: var(--s-4) !important;
  padding: var(--s-4) var(--s-5) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-lg) !important;
  background: var(--c-surface) !important;
  box-shadow: var(--sh-xs) !important;
  min-width: 0 !important;
}

.ld-store-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--r-md) !important;
  object-fit: contain;
  background: var(--c-brand-soft);
  border: 1px solid var(--c-brand-line);
  padding: 4px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   logo 显示策略
   --------------------------------------------------------------------------
   背景：页面里的 logo 由 store.js 读到店铺配置后写入，属于动态内容。
   曾经为了「避免先显示占位图再跳成真实头像」，把 logo 默认为透明、
   等图片加载完成再淡入。但这个方案有致命缺陷：
   一旦 ready 标记没能加上（事件时机、脚本异常等），logo 会永久不可见。

   现在的做法：**不隐藏 logo**。
   页面里的 src 已经直接指向店铺真实头像（/store-favicon 或配置返回的地址），
   显示出来的从一开始就是正确的图，不存在「先旧后新」的问题。
   仅保留一个极短的淡入动画，由 store.js 在写入后触发。
   -------------------------------------------------------------------------- */
.ld-store-avatar {
  animation: zx-logo-in 0.2s ease both;
}

#storeBrandAvatar,
#detailBrandAvatar,
#returnBrandAvatar {
  animation: zx-logo-in 0.2s ease both;
}

@keyframes zx-logo-in {
  from { opacity: 0.001; }
  to { opacity: 1; }
}

/* 若确实需要晚一点显示（配置返回较慢），可加 .zx-logo-pending 类，
   由脚本在写完 logo 后移除；未加该类时 logo 始终可见。 */
html.zx-logo-pending .ld-store-avatar,
html.zx-logo-pending #storeBrandAvatar,
html.zx-logo-pending #detailBrandAvatar,
html.zx-logo-pending #returnBrandAvatar {
  opacity: 0;
}

.ld-store-copy {
  min-width: 0;
}

.ld-store-title h1,
#storeBrandName {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}

.ld-store-header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 头部按钮：统一成浅色描边按钮 */
.ld-store-header-button,
.ld-member-entry {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 var(--s-3) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-md) !important;
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ld-store-header-button:hover,
.ld-member-entry:hover {
  border-color: var(--c-brand-line) !important;
  color: var(--c-brand) !important;
  background: var(--c-brand-soft) !important;
}

.ld-store-header-button svg,
.ld-member-entry svg,
.ld-store-header-button i,
.ld-member-entry i {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ==========================================================================
   5. 分类栏
   ========================================================================== */
.ld-catalog-panel,
.tokyo-catalog-panel {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-lg) !important;
  background: var(--c-surface) !important;
  box-shadow: var(--sh-xs) !important;
  min-width: 0 !important;
}

.ld-category-bar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: var(--s-2) !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

/* 分类项：选中态用品牌蓝实心，未选中用浅灰底
   需要 body.ld-shop 前缀才能压过 store-final.css 的同名规则 */
body.ld-shop .ld-category-bar {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: var(--s-2) !important;
}

body.ld-shop .ld-category-bar > button,
body.ld-shop .ld-category-bar > a,
body.ld-shop .tokyo-category-link {
  display: flex !important;
  align-items: center !important;
  gap: var(--s-2) !important;
  min-height: 62px !important;
  height: auto !important;
  padding: var(--s-2) var(--s-3) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-md) !important;
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  text-align: left;
  min-width: 0 !important;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ld-category-bar > button:hover,
.tokyo-category-link:hover {
  border-color: var(--c-brand-line) !important;
  background: var(--c-brand-soft) !important;
}

/* 选中态：原实现用蓝色整块，保留这种明确的选中反馈 */
.ld-category-bar > button.is-active,
.ld-category-bar > button[aria-current='true'],
.tokyo-category-link.is-active {
  border-color: var(--c-brand) !important;
  background: var(--c-brand) !important;
  color: #fff !important;
}

.tokyo-category-image,
.tokyo-category-icon {
  width: 26px !important;
  height: 26px !important;
  flex-shrink: 0;
  object-fit: contain;
}

.tokyo-category-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tokyo-category-count {
  flex-shrink: 0;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--c-line-soft);
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.ld-category-bar > button.is-active .tokyo-category-count,
.tokyo-category-link.is-active .tokyo-category-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* ==========================================================================
   6. 商品网格
   --------------------------------------------------------------------------
   原实现是 grid-template-columns: repeat(4, 230px) 固定宽度，
   窗口变窄时右侧留白、更窄时挤压。这里改成真正的响应式：
   由 minmax 决定列数，卡片高度自适应内容。
   ========================================================================== */
.ld-product-heading,
.tokyo-catalog-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}



.tokyo-loading-cell {
  grid-column: 1 / -1;
  padding: var(--s-8) 0;
  text-align: center;
  color: var(--c-faint);
  font-size: 13px;
}

/* ==========================================================================
   7. 商品卡片
   --------------------------------------------------------------------------
   注意特异性的坑：原样式中真正生效的规则写作
       body.ld-shop .ld-product-card { ... !important }
   特异性是 0,2,1。本文件若只写 .ld-product-card（0,1,0），
   即使同样带 !important 也会输掉，导致尺寸/配色改不动。
   因此这里统一加上 body.ld-shop 前缀（前台 body 上确实有 .ld-shop）。
   ========================================================================== */

body.ld-shop .ld-product-card,
body.ld-shop .tokyo-product-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  /* 释放固定尺寸，让卡片随网格宽度自适应 */
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-md) !important;
  background: var(--c-surface) !important;
  background-image: none !important;
  box-shadow: var(--sh-xs) !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

/* --------------------------------------------------------------------------
   覆盖按品牌图变色的自定义变量
   --------------------------------------------------------------------------
   原样式写作：
     body.ld-shop .ld-product-card:has(.ld-product-image.is-chatgpt-wordmark) {
       --product-accent: #0b948b; ... }
   特异性高达 0,4,1，普通写法压不过。
   这里用 :where() 把前半段特异性归零，整体降到 0,1,0，
   再靠 !important 取胜——一条规则覆盖全部品牌变体，不必逐个列举。
   -------------------------------------------------------------------------- */
:where(body.ld-shop) .ld-product-card {
  --product-accent: var(--c-brand) !important;
  --product-button: var(--c-brand) !important;
  --product-wash: var(--c-brand-soft) !important;
  --product-line: var(--c-brand-line) !important;
  --product-shadow: var(--sh-md) !important;
}

body.ld-shop .ld-product-card:hover {
  border-color: var(--c-brand-line) !important;
  box-shadow: var(--sh-md) !important;
  transform: translateY(-2px);
}

/* 图片区：固定比例，品牌图居中不裁切 */


body.ld-shop .ld-product-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 信息区 */
body.ld-shop .ld-product-body {
  padding: var(--s-3) var(--s-3) var(--s-2) !important;
  background: var(--c-surface) !important;
  min-width: 0 !important;
}

body.ld-shop .ld-product-body h3,
body.ld-shop .ld-product-name {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.8em;
}

/* 副标题：补齐原来缺失的信息层级 */
body.ld-shop .ld-product-subtitle,
body.ld-shop .ld-product-meta {
  font-size: 12px;
  color: var(--c-muted);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* 标签 */
body.ld-shop .ld-product-badges {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px !important;
  margin-top: var(--s-2) !important;
}

body.ld-shop .ld-product-badges > * {
  padding: 1px 7px;
  border-radius: var(--r-xs);
  background: var(--c-line-soft) !important;
  color: var(--c-muted) !important;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

/* 底部：库存 + 价格 */
body.ld-shop .ld-product-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--s-2) !important;
  min-height: 0 !important;
  margin-top: auto !important;
  padding: var(--s-2) var(--s-3) var(--s-3) !important;
  border-top: 0 !important;
  background: var(--c-surface) !important;
  pointer-events: auto !important;
}

/* 库存状态 */
body.ld-shop .ld-stock-status,
body.ld-shop .tokyo-stock {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 22px !important;
  max-width: none !important;
  padding: 0 8px !important;
  border-radius: var(--r-xs) !important;
  background: var(--c-success-soft) !important;
  color: var(--c-success) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.ld-shop .ld-stock-status.is-out,
body.ld-shop .ld-stock-status[data-out='true'] {
  background: var(--c-warning-soft) !important;
  color: var(--c-warning) !important;
}

/* 价格 */
body.ld-shop .ld-product-price,
body.ld-shop .tokyo-commodity-price {
  color: var(--c-ink) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

body.ld-shop .ld-buy-button,
body.ld-shop .tokyo-buy-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 var(--s-3) !important;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  background: var(--c-brand) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  transition: background 0.15s ease;
}

body.ld-shop .ld-buy-button:hover,
body.ld-shop .tokyo-buy-button:hover {
  background: var(--c-brand-strong) !important;
}

/* ==========================================================================
   8. 页脚
   ========================================================================== */
.tokyo-footer {
  margin-top: auto;
  padding: var(--s-5) var(--shell-pad);
  border-top: 1px solid var(--c-line);
  background: var(--c-surface);
}

.tokyo-footer-wrap {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--c-muted);
}

.tokyo-footer-wrap > div {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.tokyo-footer-wrap button {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--c-muted);
  font-size: 13px;
}

.tokyo-footer-wrap button:hover,
.tokyo-footer-wrap a:hover {
  color: var(--c-brand);
}

/* ==========================================================================
   9. 弹窗（下单 / 公告 / 订单查询）
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}

.modal-backdrop[hidden] {
  display: none !important;
}

.modal {
  position: relative;
  width: min(560px, 100%);
  max-height: min(88vh, 820px);
  overflow-y: auto;
  padding: var(--s-6) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-lg) !important;
  background: var(--c-surface) !important;
  box-shadow: var(--sh-lg) !important;
}

.modal-close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-muted);
}

.modal-close:hover {
  background: var(--c-line-soft);
  color: var(--c-ink);
}

.modal-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-brand);
}

.modal h2,
#checkoutTitle {
  margin: var(--s-1) 0 var(--s-4);
  font-size: 19px;
  font-weight: 700;
  color: var(--c-ink);
}

/* 表单控件统一 */
.modal input[type='text'],
.modal input[type='email'],
.modal input[type='password'],
.modal input[type='search'],
.modal input[type='number'],
.modal textarea,
.modal select {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modal textarea {
  padding: var(--s-2) var(--s-3);
  min-height: 80px;
  line-height: 1.6;
  resize: vertical;
}

.modal input:focus,
.modal textarea:focus,
.modal select:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-soft);
}

.modal label {
  display: block;
  margin-bottom: var(--s-1);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
}

/* 主按钮 */
.modal .primary-button,
.modal button[type='submit'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--c-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.15s ease;
}

.modal .primary-button:hover,
.modal button[type='submit']:hover {
  background: var(--c-brand-strong);
}

.modal button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 公告弹窗 */
.store-announcement-modal {
  width: min(640px, 100%) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.store-announcement-heading {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6) !important;
  border-bottom: 1px solid var(--c-line-soft) !important;
  background: var(--c-surface) !important;
}

.store-announcement-icon {
  width: 48px !important;
  height: 48px !important;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-brand-line) !important;
  border-radius: var(--r-md) !important;
  background: var(--c-brand-soft) !important;
  color: var(--c-brand) !important;
  overflow: hidden;
}

/* 公告头部展示店铺真实 logo（原先是通用的 sparkles 装饰图标） */
.store-announcement-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.store-announcement-icon svg {
  width: 22px;
  height: 22px;
}

.store-announcement-content {
  max-height: min(52vh, 440px) !important;
  padding: var(--s-5) var(--s-6) !important;
  overflow-y: auto;
  color: var(--c-text) !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}

/* 公告里的联系方式（数据来自后台「设置 → 店铺资料」） */
.store-announcement-contact {
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--c-line-soft);
  background: var(--c-brand-soft);
}

.announcement-contact__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-brand);
  margin-bottom: var(--s-2);
}

.announcement-contact__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 5px 0;
  font-size: 14px;
}

.announcement-contact__row > span {
  color: var(--c-muted);
  flex-shrink: 0;
}

.announcement-contact__row > strong {
  color: var(--c-ink);
  font-weight: 600;
  word-break: break-all;
  text-align: right;
  user-select: all;
}

@media (max-width: 767px) {
  .store-announcement-contact {
    padding: var(--s-3) var(--s-4);
  }
}

.store-announcement-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6) !important;
  border-top: 1px solid var(--c-line-soft) !important;
  background: var(--c-surface) !important;
  flex-wrap: wrap;
}

/* 公告确认按钮：原样式中 body.tokyo-theme .tokyo-button-dark 是紫色渐变
   （特异性 0,2,1），必须带同样的前缀才能压过它，否则即使写了 !important 也会输。 */
body.tokyo-theme .store-announcement-footer .tokyo-button-dark {
  border-color: var(--c-brand) !important;
  background: var(--c-brand) !important;
  background-image: none !important;
  box-shadow: var(--zx-shadow-xs) !important;
  color: #fff !important;
  min-height: 40px;
  padding: 0 var(--s-4) !important;
  border-radius: var(--r-sm) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.tokyo-theme .store-announcement-footer .tokyo-button-dark:hover:not(:disabled) {
  border-color: var(--c-brand-strong) !important;
  background: var(--c-brand-strong) !important;
  background-image: none !important;
  box-shadow: var(--zx-shadow-sm) !important;
}

/* 底部说明：图标 + 文案。
   对齐问题的根因：lucide 生成的图标容器是 display:block 且高度继承了
   父级行高（实测 14x19，而内部 svg 只有 14x14），
   图标在容器内偏上，和文字看起来差 2~3px。
   这里把图标容器改成 inline-flex 居中、并锁死 14x14。 */
.store-announcement-footer > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  font-size: 12.5px;
  color: var(--c-faint);
  min-width: 0;
  line-height: 1.5;
}

.store-announcement-footer > span > span {
  display: inline !important;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

/* 图标容器：居中且尺寸锁死，消除行高造成的偏移 */
.store-announcement-footer > span > .lucide,
.store-announcement-footer > span > svg,
.store-announcement-footer > span svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  vertical-align: middle;
  position: relative;
  top: 0;
}

.store-announcement-footer > span > .lucide > svg {
  display: block !important;
}

@media (max-width: 767px) {
  .store-announcement-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .store-announcement-footer .tokyo-button-dark {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   商品说明：字体改用黑体并加深颜色
   --------------------------------------------------------------------------
   原来正文继承到 --c-text（灰蓝），用户反馈"感觉是灰体"。
   这里统一为黑体系字体 + 近黑文字色，与详情页其他文字风格一致。
   ========================================================================== */

body.product-page .product-description-content,
body.product-page .product-description-content p,
body.product-page .product-description-content div,
body.product-page .product-description-content span,
body.product-page .product-description-content li {
  font-family: var(--zx-font-sans) !important;
  color: #1a1a1a !important;
}

body.product-page .product-description-content {
  font-size: var(--zx-detail-body) !important;
  line-height: 2 !important;
  /* 容器自身也要显式设色：只给子元素设色时，
     直接写在容器里的文本节点仍会继承原来的灰蓝色 rgb(51,65,85) */
  color: #1a1a1a !important;
  font-family: var(--zx-font-sans) !important;
  -webkit-font-smoothing: antialiased;
}

body.product-page .product-description-content strong,
body.product-page .product-description-content b {
  color: #111111 !important;
  font-weight: 700 !important;
}

/* 富文本里的标题也统一为黑体、近黑 */
body.product-page .product-description-content h1,
body.product-page .product-description-content h2,
body.product-page .product-description-content h3,
body.product-page .product-description-content h4 {
  font-family: var(--zx-font-sans) !important;
  color: #111111 !important;
  font-weight: 700 !important;
}

/* 说明里的链接保持品牌色，不跟着变黑 */
body.product-page .product-description-content a {
  color: var(--c-brand) !important;
}

/* 说明标题（“商品说明”这一行）也加深 */
body.product-page .product-description-heading h2 {
  color: #111111 !important;
  font-family: var(--zx-font-sans) !important;
}

/* ==========================================================================
   11. 商品详情页
   --------------------------------------------------------------------------
   原 product.css 用十余条 width:min(78%,520px)!important 之类规则控制品牌图，
   导致图被撑得过大、比例失衡。这里统一收敛：容器固定比例，图按 contain 居中。
   ========================================================================== */

.product-detail-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 400px !important;
  gap: var(--s-5) !important;
  align-items: start !important;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 详情页容器：保证内容永远不超出视口宽度 */
.product-detail-shell,
.detail-page-main,
.product-summary,
.product-summary-copy,
.product-summary-media,
.product-description-panel {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* 品牌图区域：给一个稳定的展示比例，不再随卡片宽度无限放大 */
.product-summary-media,
.product-summary-media.is-chatgpt-wordmark,
.product-summary-media.is-claude-wordmark,
.product-summary-media.is-gemini-wordmark,
.product-summary-media.is-codex-wordmark,
.product-summary-media.is-relay-wordmark,
.product-summary-media.is-relay-symbol,
.product-summary-media.is-uploaded {
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  padding: var(--s-8) !important;
  display: grid !important;
  place-items: center !important;
  background: var(--c-surface) !important;
  border-bottom: 1px solid var(--c-line-soft) !important;
}

/* 所有品牌图统一：限制最大尺寸，保持比例，居中 */
.product-summary-media img,
.product-summary-media.is-chatgpt-wordmark img,
.product-summary-media.is-claude-wordmark img,
.product-summary-media.is-gemini-wordmark img,
.product-summary-media.is-codex-wordmark img,
.product-summary-media.is-relay-wordmark img,
.product-summary-media.is-relay-symbol img,
.product-summary-media.is-uploaded img {
  width: auto !important;
  height: auto !important;
  max-width: min(58%, 300px) !important;
  max-height: 150px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
}

/* 方形符号类（codex / relay-symbol）单独给方形上限 */
.product-summary-media.is-codex-wordmark img,
.product-summary-media.is-relay-symbol img {
  max-width: 118px !important;
  max-height: 118px !important;
}

/* 商品摘要信息区 */
.product-summary-copy {
  display: block !important;
  padding: var(--s-5) var(--s-5) var(--s-5) !important;
}

.product-summary-copy h1 {
  margin: 0 0 var(--s-1);
  font-size: var(--zx-text-xl, 20px);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.35;
}

/* 副标题：原先详情页完全没有展示，这里补上 */
.product-detail-subtitle {
  margin: 0 0 var(--s-3);
  font-size: var(--zx-text-base, 14px);
  color: var(--c-muted);
  line-height: 1.6;
}

/* 周期 / 标签：小圆角标签 */
.product-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--s-4);
}

.product-detail-tags:empty {
  display: none;
}

.product-detail-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--r-xs);
  background: var(--c-line-soft);
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.product-detail-chip.is-accent {
  background: var(--c-brand-soft);
  color: var(--c-brand);
}

.product-detail-price {
  display: inline-block;
  color: var(--c-brand) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  margin-right: var(--s-3);
}

.product-detail-price small {
  font-size: 16px;
  font-weight: 700;
  margin-right: 2px;
}

.product-detail-status {
  display: inline-flex !important;
  align-items: center;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: var(--r-xs) !important;
  background: var(--c-success-soft) !important;
  color: var(--c-success) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  vertical-align: middle;
}

.product-detail-status.is-out {
  background: var(--c-warning-soft) !important;
  color: var(--c-warning) !important;
}

/* 右侧购买卡片 */
.product-purchase-card {
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-lg) !important;
  background: var(--c-surface) !important;
  box-shadow: var(--sh-sm) !important;
  padding: var(--s-5) !important;
}

.product-purchase-card h2 {
  margin: 0 0 var(--s-4);
  font-size: var(--zx-text-md, 15px);
  font-weight: 600;
  color: var(--c-ink);
}

/* 付款方式选项：选中态统一为品牌蓝 */
.detail-payment-picker {
  min-inline-size: 0;
  margin: 0;
  /* 窄屏放不下两个按钮，会被内容撑破。
     桌面两列、手机单列，用 auto-fit 自动切换。 */
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: var(--s-2) !important;
  border: 0;
  padding: 0;
}

.detail-payment-option {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  min-height: 46px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.detail-payment-option:hover {
  border-color: var(--c-brand-line);
}

.detail-payment-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 选项内容：图标 + 文字，居中排布。
   注意：旧的 product.css 给内层 span 也加了边框与光圈
   （border 1px 青绿 + box-shadow 3px），与 label 的边框叠成「双层边框」。
   这里把内层 span 的边框/背景/阴影全部清掉，只保留 label 一层边框。 */
.detail-payment-option > span,
.detail-payment-option__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-width: 0;
  flex: 1;
  overflow: hidden;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* 选中态的视觉全部由 label 承担。
   必须把 input:checked + span 这段也写进来并加 !important：
   product.css 里有一条更高特异性的规则给选中项的内层 span
   染了青绿背景 + 3px 光圈，只覆盖基础选择器压不住它。 */
body.product-page .detail-payment-option > span,
body.product-page .detail-payment-option__body,
body.product-page .detail-payment-option input:checked + span,
body.product-page .detail-payment-option input:checked + .detail-payment-option__body,
.detail-payment-option > span,
.detail-payment-option__body,
.detail-payment-option input:checked + span,
.detail-payment-option input:checked + .detail-payment-option__body {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  color: inherit !important;
}

.detail-payment-brand {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  object-fit: contain;
}

.detail-payment-option strong {
  font-size: var(--zx-text-base, 14px);
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  text-align: center;
}

/* 选中态 */
.detail-payment-option:has(input:checked) {
  border-color: var(--c-brand) !important;
  background: var(--c-brand-soft) !important;
}

.detail-payment-option:has(input:checked) strong {
  color: var(--c-brand);
}

/* 表单字段 */
.detail-field {
  display: block;
  margin-top: var(--s-4);
}

.detail-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
}

.detail-field input {
  width: 100%;
  min-height: 42px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: inherit;
  font-size: 14px;
}

.detail-field input:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-soft);
}

.detail-field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--c-faint);
  line-height: 1.5;
}

.detail-terms {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: var(--s-4);
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.5;
}

.detail-order-button {
  width: 100% !important;
  min-height: 46px;
  margin-top: var(--s-4);
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* 下单按钮：原样式 body.product-page .detail-order-button 用的是青绿色渐变
   （--detail-accent / --detail-button），与全站品牌蓝不一致。
   必须带 body.product-page 前缀才能压过同等特异性的规则。 */
body.product-page .detail-order-button {
  border-color: var(--c-brand) !important;
  background: var(--c-brand) !important;
  background-image: none !important;
  box-shadow: var(--zx-shadow-xs) !important;
  color: #fff !important;
}

body.product-page .detail-order-button:hover:not(:disabled) {
  border-color: var(--c-brand-strong) !important;
  background: var(--c-brand-strong) !important;
  background-image: none !important;
  filter: none !important;
}

.detail-form-error {
  margin-top: var(--s-3);
  font-size: 13px;
  color: var(--c-danger);
}

/* 商品说明面板 */
.product-description-panel {
  grid-column: 1 / -1;
  margin-top: var(--s-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-xs);
  overflow: hidden;
}

.product-description-heading {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-line-soft);
}

.product-description-heading h2 {
  margin: 0;
  font-size: var(--zx-text-md, 15px);
  font-weight: 600;
  color: var(--c-ink);
}

.product-description-content {
  padding: var(--s-5);
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-text);
  /* 不要用 pre-wrap：富文本内容用 <br>/<p> 表达换行，
     再叠加 pre-wrap 会出现大片多余空行。 */
  white-space: normal;
  word-break: break-word;
}

/* 详情页头部 */
.detail-site-header {
  padding: var(--s-4) 0;
}

.detail-site-header-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.detail-site-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-ink);
}

.detail-site-brand img {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  object-fit: contain;
  background: var(--c-brand-soft);
  border: 1px solid var(--c-brand-line);
  padding: 3px;
}

.detail-site-brand strong {
  font-size: var(--zx-text-lg, 17px);
  font-weight: 700;
}

.detail-site-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.detail-store-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.detail-store-link:hover {
  border-color: var(--c-brand-line);
  color: var(--c-brand);
  background: var(--c-brand-soft);
}

.detail-store-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .product-detail-card {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767px) {
  .detail-site-header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 手机上让详情区贴边，去掉外层 40px 留白造成的横向溢出 */
  .product-detail-shell {
    width: 100% !important;
    padding-left: var(--s-3);
    padding-right: var(--s-3);
  }

  .product-summary-media,
  .product-summary-media.is-chatgpt-wordmark,
  .product-summary-media.is-claude-wordmark,
  .product-summary-media.is-gemini-wordmark {
    aspect-ratio: 16 / 10 !important;
    padding: var(--s-5) !important;
  }

  .product-summary-media img {
    max-width: 74% !important;
    max-height: 104px !important;
  }

  .product-summary-copy {
    padding: var(--s-4) !important;
  }

  .product-detail-price {
    font-size: 24px !important;
  }

  .product-purchase-card {
    padding: var(--s-4) !important;
  }

  /* 长商品名与副标题必须能换行，否则会横向撑破卡片 */
  .product-summary-copy h1,
  .product-detail-subtitle {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* 简介内容里的长链接/长串也要换行 */
  .product-description-content {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   13. 商品详情页字体系统
   --------------------------------------------------------------------------
   原来详情页各处字号来自 product.css，大小参差（.78rem 的小字、粗细混杂），
   中文在这种尺寸下很挤、可读性差。这里统一为一套更有层次的阶梯：
     商品名 26px / 价格 30px / 区块标题 16px / 正文 15px / 辅助 13px
   根因说明：原来的规则用 body.product-page 前缀（特异性 0,2,x），
   所以这里也必须带同样前缀并加 !important 才能稳定覆盖。
   ========================================================================== */

body.product-page {
  /* 中文用系统无衬线体，字距略微收紧更利落 */
  --zx-detail-title: 26px;
  --zx-detail-price: 30px;
  --zx-detail-section: 16px;
  --zx-detail-body: 15px;
  --zx-detail-aux: 13px;
}

body.product-page .product-summary-copy h1 {
  font-size: var(--zx-detail-title) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  color: var(--c-ink) !important;
  margin-bottom: var(--s-2) !important;
}

body.product-page .product-detail-subtitle {
  font-size: var(--zx-detail-body) !important;
  font-weight: 400 !important;
  color: var(--c-muted) !important;
  line-height: 1.65 !important;
}

body.product-page .product-detail-tags {
  margin-bottom: var(--s-4) !important;
}

body.product-page .product-detail-chip {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
}

body.product-page .product-detail-price {
  font-size: var(--zx-detail-price) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  /* 原来这里被 --detail-accent 染成青绿色 rgb(11,148,139)，
     与全站品牌蓝不一致。统一为品牌蓝。 */
  color: var(--c-brand) !important;
}

body.product-page .product-detail-price small {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-right: 3px !important;
  color: inherit !important;
}

/* 发货 / 库存状态标签
   原样式 body.product-page .product-detail-status:not(.is-out) 特异性更高，
   所以必须带上 :not(.is-out) 才能覆盖它的青绿色。 */
body.product-page .product-detail-status,
body.product-page .product-detail-status:not(.is-out) {
  font-size: 13px !important;
  font-weight: 600 !important;
  min-height: 28px !important;
  padding: 0 11px !important;
  border-radius: var(--r-xs) !important;
  color: var(--c-success) !important;
  background: var(--c-success-soft) !important;
}

/* 右侧购买卡片的标题与字段 */
body.product-page .product-purchase-card h2 {
  font-size: var(--zx-detail-section) !important;
  font-weight: 600 !important;
  color: var(--c-ink) !important;
  margin-bottom: var(--s-4) !important;
}

body.product-page .detail-payment-picker legend {
  font-size: var(--zx-detail-aux) !important;
  font-weight: 500 !important;
  color: var(--c-muted) !important;
  margin-bottom: var(--s-2) !important;
  padding: 0 !important;
}

body.product-page .detail-payment-option strong {
  font-size: var(--zx-detail-body) !important;
  font-weight: 600 !important;
}

body.product-page .detail-field > span {
  font-size: var(--zx-detail-aux) !important;
  font-weight: 500 !important;
  color: var(--c-text) !important;
}

body.product-page .detail-field input {
  font-size: var(--zx-detail-body) !important;
  min-height: 46px !important;
  border-radius: var(--r-sm) !important;
}

body.product-page .detail-field-hint {
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  color: var(--c-faint) !important;
}

body.product-page .detail-terms,
body.product-page .detail-terms span {
  font-size: var(--zx-detail-aux) !important;
  line-height: 1.6 !important;
}

body.product-page .detail-order-button,
body.product-page .detail-order-button span {
  font-size: var(--zx-detail-section) !important;
  font-weight: 600 !important;
}

body.product-page .detail-form-error {
  font-size: var(--zx-detail-aux) !important;
}

/* 商品说明区块 */
body.product-page .product-description-heading h2 {
  font-size: var(--zx-detail-section) !important;
  font-weight: 600 !important;
  color: var(--c-ink) !important;
}

body.product-page .product-description-content {
  font-size: var(--zx-detail-body) !important;
  line-height: 2 !important;
  letter-spacing: 0.005em;
  /* 颜色与字体由第 13 节的「商品说明字体」统一设定（近黑 + 黑体）。
     这里不要再写 color，否则同特异性下后来居上，会把颜色改回灰蓝。 */
}

body.product-page .product-description-content p {
  margin: 0 0 var(--s-4) !important;
}

body.product-page .product-description-content p:last-child {
  margin-bottom: 0 !important;
}

/* 说明里的「重要」提示：原来是刺眼的红棕 rgb(223,63,50)，
   改为暖琥珀色 + 左侧色条，既有警示感又不刺眼。
   注意用 display:block 撑满整行 —— 原来是 inline-block，蓝色背景只包住文字，
   两侧留出空白，看起来像「没对齐」。
   但不要用 width:100%：父容器有内边距时会向右溢出。 */
body.product-page .product-description-important,
body.product-page .product-description-content strong {
  display: block !important;
  width: auto !important;
  color: #b45309 !important;
  font-weight: 600 !important;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  padding: 8px 12px;
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  margin: 8px 0;
  box-sizing: border-box;
  max-width: 100%;
}

/* 顶部导航 */
body.product-page .detail-site-brand strong {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--c-ink) !important;
}

body.product-page .detail-store-link {
  font-size: var(--zx-detail-aux) !important;
  font-weight: 500 !important;
  /* 原来是偏紫的 rgb(89,102,185)，统一为常规文字色 */
  color: var(--c-text) !important;
}

body.product-page .detail-store-link:hover {
  color: var(--c-brand) !important;
}

/* 下单按钮与条款文字的颜色统一 */
body.product-page .detail-terms,
body.product-page .detail-terms span,
body.product-page .detail-terms a {
  font-size: var(--zx-detail-aux) !important;
  color: var(--c-muted) !important;
  line-height: 1.65 !important;
}

body.product-page .detail-terms a {
  color: var(--c-brand) !important;
  text-decoration: none;
}

body.product-page .detail-terms a:hover {
  text-decoration: underline;
}

/* 发货 / 库存标签一行排列 */
.product-detail-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-1);
}

/* 库存分级配色：少量(黄) / 一般(蓝) / 充足(绿) */
body.product-page .product-detail-status.is-low {
  background: var(--c-warning-soft) !important;
  color: #b45309 !important;
}

body.product-page .product-detail-status.is-mid {
  background: var(--c-brand-soft) !important;
  color: var(--c-brand) !important;
}

body.product-page .product-detail-status.is-high {
  background: var(--c-success-soft) !important;
  color: var(--c-success) !important;
}

/* ==========================================================================
   14. 用户端商品卡片的库存标签
   --------------------------------------------------------------------------
   规则：<3 张 → 库存少量(黄) / 3-6 张 → 库存一般(蓝) / >=7 张 → 库存充足(绿)
   选择器必须带 body.ld-shop .ld-stock-status 前缀：
   基础规则是 body.ld-shop .ld-stock-status（0,2,1），
   只用 .ld-stock-status.is-low（0,2,0）压不过它，配色会全部退回默认蓝。
   ========================================================================== */

body.ld-shop .ld-stock-status.is-low,
body.ld-shop .ld-product-card .ld-stock-status.is-low {
  background: #fef3c7 !important;
  color: #b45309 !important;
}

body.ld-shop .ld-stock-status.is-mid,
body.ld-shop .ld-product-card .ld-stock-status.is-mid {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
}

body.ld-shop .ld-stock-status.is-high,
body.ld-shop .ld-product-card .ld-stock-status.is-high {
  background: #dcfce7 !important;
  color: #15803d !important;
}

/* 在线发货（人工）：中性靛蓝，区别于库存三档 */
body.ld-shop .ld-stock-status.is-online,
body.ld-shop .ld-product-card .ld-stock-status.is-online {
  background: #e0e7ff !important;
  color: #4338ca !important;
}

/* 已售罄：红色 */
body.ld-shop .ld-stock-status.is-out,
body.ld-shop .ld-product-card .ld-stock-status.is-out {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

/* 「自动发货」小标：仅桌面端显示。
   手机端卡片宽度不够，两个标签会挤在一起，所以 ≤767px 直接隐藏。 */
body.ld-shop .ld-ship-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  background: var(--c-brand-soft);
  color: var(--c-brand);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 桌面端卡片的底部：价格左、标签组右。
   原来直接用 space-between 把元素撑到两端，中间出现 40px 空档。
   改成「价格 + 标签组」两组，标签之间只留 6px。
   注意 margin-left 必须带 !important —— 原样式对 footer 用了 !important，
   普通声明会被压掉，导致标签组停在中间、右侧留下空白。 */
body.ld-shop .ld-product-footer {
  justify-content: flex-start !important;
  gap: 6px !important;
}

body.ld-shop .ld-product-footer > .ld-product-badges {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

/* ==========================================================================
   全站字体：统一为系统黑体
   --------------------------------------------------------------------------
   store-polish.css 里有一条
     body.ld-shop { font-family: Inter, ... !important }
   它在本文件之前加载但带 !important，会把整个前台的字体改成 Inter
   （中文实际回落到雅黑，但西文/数字走 Inter，与后台的观感不一致）。
   这里在**源头 body 上覆盖**，所有继承字体的元素一次性统一，
   不必逐个选择器去改。
   ========================================================================== */
body.ld-shop,
body.tokyo-theme,
body.product-page {
  font-family: var(--zx-font-sans) !important;
}

/* 商品名：黑色黑体。
   必须带上 .ld-product-card .ld-product-body 这串路径 ——
   store.css 里的规则是 body.ld-shop .ld-product-card .ld-product-body h3
   （0,4,1，带 !important），选择器短一点就会被它压住，颜色改不动。 */
body.ld-shop .ld-product-card .ld-product-body h3,
body.ld-shop .ld-product-card h3,
body.ld-shop .ld-product-body h3,
body.ld-shop .ld-product-name,
body.ld-shop .tokyo-commodity-name {
  color: #111111 !important;
  font-family: var(--zx-font-sans) !important;
  font-weight: 600 !important;
}

@media (max-width: 767px) {
  body.ld-shop .ld-ship-badge {
    display: none !important;
  }
}

/* ==========================================================================
   15. 公告弹窗
   --------------------------------------------------------------------------
   原来公告内容区偏窄、字号偏小，长公告读起来吃力。这里放宽并放大：
   弹窗更宽、正文 15px/1.9、标题与 kicker 层次拉开。
   ========================================================================== */

body.ld-shop .store-announcement-modal {
  width: min(680px, calc(100vw - 32px)) !important;
  max-width: min(680px, calc(100vw - 32px)) !important;
}

.store-announcement-heading {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6) !important;
  border-bottom: 1px solid var(--c-line-soft) !important;
  background: var(--c-surface) !important;
}

/* logo 方块：固定 52px、圆角、浅蓝底，图片铺满并裁切成方形 */
.store-announcement-icon {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--c-brand-line) !important;
  border-radius: var(--r-md) !important;
  background: var(--c-brand-soft) !important;
  overflow: hidden !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.store-announcement-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  padding: 0 !important;
}

.store-announcement-heading > div {
  min-width: 0;
}

.store-announcement-heading .modal-kicker {
  display: block;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--c-brand) !important;
  text-transform: none !important;
  margin-bottom: 2px;
}

.store-announcement-heading h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--c-ink) !important;
  margin: 0 0 3px !important;
  line-height: 1.3 !important;
}

.store-announcement-heading p {
  font-size: 13px !important;
  color: var(--c-muted) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* 公告正文里的加强句（如「星光不问赶路人，时光不负有心人。」）   做成整行撑满的强调块：蓝色浅底 + 顶部色条 + 文字居中。
   原来是 inline 元素，背景只包住文字，两侧留白，看起来没对齐。 */
.store-announcement-content strong {
  display: block !important;
  width: auto !important;
  box-sizing: border-box;
  max-width: 100%;
  margin: var(--s-4) 0 !important;
  padding: var(--s-4) var(--s-4) !important;
  border-left: 0 !important;
  border-top: 3px solid var(--c-brand);
  border-radius: var(--r-sm) !important;
  background: var(--c-brand-soft) !important;
  color: var(--c-brand) !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  line-height: 1.7 !important;
  text-align: center !important;
}

@media (max-width: 767px) {
  .store-announcement-content strong {
    margin: var(--s-3) 0 !important;
    padding: var(--s-3) !important;
    font-size: 14.5px !important;
  }
}

/* ==========================================================================
   公告弹窗滚动方式
   --------------------------------------------------------------------------
   原实现给内容区单独设了 max-height + overflow-y:auto，
   结果「联系我们」和底部按钮被固定在弹窗下半部分不动，
   只能滚动公告正文 —— 手机上看起来就是「联系客服 QQ 被锁住了」。
   改为整个弹窗一起滚动：滑到底部自然看到「联系我们」和按钮。
   ========================================================================== */
body.ld-shop .store-announcement-modal {
  display: flex !important;
  flex-direction: column !important;
  /* 需要显式高度上限，overflow-y 才会生效 */
  max-height: min(88vh, 760px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 内容区不再自己滚动，随弹窗一起滚 */
.store-announcement-content {
  max-height: none !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

.store-announcement-heading,
.store-announcement-contact,
.store-announcement-footer {
  flex: 0 0 auto !important;
}

.store-announcement-content {
  padding: var(--s-6) !important;  font-size: 15px !important;
  line-height: 1.95 !important;
  color: var(--c-text) !important;
  max-height: min(52vh, 460px) !important;
  overflow-y: auto !important;
}

.store-announcement-content p {
  margin: 0 0 var(--s-4) !important;
}

/* 注意：这里不要再写 strong 的样式。
   加强句的最终样式在「公告弹窗」一节统一设定
   （display:block 撑满整行 + 顶部色条 + 居中）。
   同特异性下后写的规则会赢，重复定义会让前面的失效。 */

@media (max-width: 767px) {
  body.ld-shop .store-announcement-modal {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .store-announcement-heading {
    padding: var(--s-4) !important;
  }

  .store-announcement-heading h2 {
    font-size: 18px !important;
  }

  .store-announcement-content {
    padding: var(--s-4) !important;
    font-size: 14.5px !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   16. 「正在获取卡密」等待界面
   --------------------------------------------------------------------------
   卡密类商品已付款、但管理员还没放真实卡密时显示。
   按需求做成极简：只有一句「正在获取卡密」+ 转圈。
   页面每 5 秒自动轮询订单状态，管理员发卡后会自动切到卡密界面。
   ========================================================================== */
.delivery-result.delivery-waiting.is-minimal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-4);
  min-height: 220px;
  text-align: center;
}

.delivery-result.delivery-waiting.is-minimal .delivery-spinner {
  margin: 0 !important;
}

.delivery-result.delivery-waiting.is-minimal h2 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--c-ink) !important;
}

/* ==========================================================================
   17. 响应式
   ========================================================================== */

/* 平板：3 列，收紧间距 */
@media (max-width: 1023px) {
  :root {
    --shell-pad: 18px;
  }

  body.ld-shop .ld-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--s-3) !important;
  }
}

/* 手机：头部改为两行、分类两列、商品两列 */
@media (max-width: 767px) {
  :root {
    --shell-pad: 12px;
  }

  .tokyo-main,
  .ld-main {
    padding: var(--s-3) var(--shell-pad) var(--s-6);
  }

  .ld-store-profile,
  .tokyo-store-profile {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: var(--s-3) !important;
    padding: var(--s-3) !important;
  }

  .ld-store-avatar {
    width: 44px !important;
    height: 44px !important;
  }

  .ld-store-title h1,
  #storeBrandName {
    font-size: 17px;
  }

  /* 头部动作：容器原本是 grid。
     store-final.css 在 760px 处用
       body.ld-shop .ld-store-header-actions { grid-template-columns: repeat(2,...) !important }
     强制两列，且按钮被固定 height:46px。
     这里必须带同样的 body.ld-shop 前缀并略增特异性才能压过它。
     四个按钮排成一行，头部高度从 190px 降到约 150px。 */
  body.ld-shop .ld-store-header-actions,
  body.ld-shop .ld-store-header-actions:has(.ld-member-entry[hidden]) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
  }

  body.ld-shop .ld-store-header-actions > .ld-store-header-button,
  body.ld-shop .ld-store-header-actions > .ld-member-entry {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* 原样式固定 46px，这里放开高度限制 */
    height: auto !important;
    min-height: 34px !important;
    padding: 0 4px !important;
    gap: 3px !important;
    font-size: 11px !important;
    justify-content: center !important;
    white-space: nowrap;
    overflow: hidden;
  }

  body.ld-shop .ld-store-header-actions > .ld-store-header-button span,
  body.ld-shop .ld-store-header-actions > .ld-member-entry span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  body.ld-shop .ld-store-header-actions > .ld-store-header-button svg,
  body.ld-shop .ld-store-header-actions > .ld-member-entry svg {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    flex-shrink: 0;
  }

  .ld-catalog-panel,
  .tokyo-catalog-panel {
    padding: var(--s-3) !important;
  }

  /* ------------------------------------------------------------------------
     分类在手机上改为横向滑动的胶囊标签
     ------------------------------------------------------------------------
     原样式的规则是
       body.ld-shop .ld-category-bar .tokyo-category-link {
         width: calc((100vw - 52px) / 4) !important;
         height: 84px !important;
         grid-template-rows: 42px 18px 17px !important; }
     即每项恰好占 1/4 屏宽、内部纵向堆叠，看起来像四个大卡片，非常突兀。
     这里改写为「横向滚动 + 一行内容」的胶囊标签。
     注意选择器必须精确到 .tokyo-category-link（不是 button），否则匹配不到。
     ------------------------------------------------------------------------ */
  body.ld-shop .ld-category-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    /* 不要用「负外边距 + 等量内边距」去贴屏幕边缘：
       负边距会把第一个标签推出容器左缘、压在面板边框上，
       看起来就像左侧被切掉了一截（实测左缘 5px vs 面板 8px）。
       直接留一点内边距，让标签与面板内容对齐即可。 */
    margin: 0 !important;
    padding: 2px 0 6px !important;
    scroll-padding-left: 2px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.ld-shop .ld-category-bar::-webkit-scrollbar {
    display: none;
  }

  /* 选择器必须与原样式逐字一致（含 .is-active 变体），
     否则特异性不足，即使写了 !important 也压不过。 */
  body.ld-shop .ld-category-bar .tokyo-category-link,
  body.ld-shop .ld-category-bar .tokyo-category-link.is-active {
    /* 覆盖原样的 1/4 屏宽与固定高度，改为随内容宽度 */
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    align-content: center !important;
    border-radius: var(--r-full) !important;
    scroll-snap-align: start;
  }

  /* 图标尺寸必须与原样式的选择器逐字一致。
     store-final.css 里的规则是两段式：
       body.ld-shop .ld-category-bar .tokyo-category-image,
       body.ld-shop .ld-category-bar .tokyo-category-link.is-active .tokyo-category-image
     其中 .is-active 那半段特异性更高（0,5,1），所以**只有被选中的那个分类
     图标会变成 44px**，导致点击分类时按钮突然变宽（120px → 150px）。
     注意 CSS 里 min-width 优先级高于 max-width，只覆盖 max-width 是无效的，
     必须把 width / height / min-* 一起去掉。 */
  body.ld-shop .ld-category-bar .tokyo-category-image,
  body.ld-shop .ld-category-bar .tokyo-category-link.is-active .tokyo-category-image,
  body.ld-shop .ld-category-bar .tokyo-category-icon,
  body.ld-shop .ld-category-bar .tokyo-category-link.is-active .tokyo-category-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* 图标容器内的 SVG 也要锁死尺寸。
     原样式 .tokyo-category-icon 是 24px 圆形徽章、内含 13px SVG。 */
  body.ld-shop .ld-category-bar .tokyo-category-icon svg,
  body.ld-shop .ld-category-bar .tokyo-category-image svg,
  body.ld-shop .ld-category-bar .tokyo-category-link svg,
  body.ld-shop .ld-category-bar .tokyo-category-link.is-active svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    display: block !important;
  }

  body.ld-shop .ld-category-bar .tokyo-category-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap;
  }

  /* 计数在胶囊里压缩成小角标 */
  body.ld-shop .ld-category-bar .tokyo-category-count {
    width: auto !important;
    min-width: 18px !important;
    height: 16px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    line-height: 16px !important;
  }

  /* 选中态的勾选装饰在胶囊里会溢出，去掉 */
  body.ld-shop .ld-category-bar .tokyo-category-link.is-active::after {
    display: none !important;
  }

  /* 商品两列，间距收紧 */
  body.ld-shop .ld-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }


  body.ld-shop .ld-product-body {
    padding: 10px 10px 6px !important;
  }

  body.ld-shop .ld-product-body h3,
  body.ld-shop .ld-product-name {
    font-size: 13px;
    min-height: 0;
  }

  body.ld-shop .ld-product-footer {
    padding: 6px 10px 10px !important;
  }

  body.ld-shop .ld-product-price,
  body.ld-shop .tokyo-commodity-price {
    font-size: 15px !important;
  }

  body.ld-shop .ld-stock-status {
    min-height: 20px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }

  /* 弹窗贴边 */
  .modal {
    width: 100% !important;
    max-height: 92vh;
    padding: var(--s-4) !important;
    border-radius: var(--r-lg) !important;
  }

  .store-announcement-heading,
  .store-announcement-content,
  .store-announcement-footer {
    padding-left: var(--s-4) !important;
    padding-right: var(--s-4) !important;
  }

  .store-announcement-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .tokyo-footer-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }
}

/* 超窄屏兜底：保持 2 列，只收紧间距。
   原实现在 ≤360px 时切成 1 列，导致「微信内置浏览器 1 列、手机浏览器 2 列」
   —— 微信 WebView 上报的视口宽度比标准浏览器窄，会落到那条断点里。
   统一保持 2 列，两端表现一致；卡片宽度靠 gap 和字号收缩来适配。 */
@media (max-width: 374px) {
  body.ld-shop .ld-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.ld-shop .ld-product-footer {
    padding: 6px 8px 8px !important;
  }

  body.ld-shop .ld-product-footer strong {
    font-size: 14px !important;
  }

  body.ld-shop .ld-stock-status {
    font-size: 9.5px !important;
    padding: 0 5px !important;
    min-height: 18px !important;
  }
}

/* 尊重系统「减弱动态效果」 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}



/* --------------------------------------------------------------------------
   19. 商品卡底部：保证价格永远不被挤没
   --------------------------------------------------------------------------
   背景：
     侧栏占了横向空间后，中等宽度（1024~1300px）下卡片会变窄到 150px 左右。
     此时页脚里「价格」和「标签组」争空间：
       · 价格是 flex: 0 1 auto  → 可被压缩，极端情况压到 0 宽
       · 标签组是 flex: 0 0 auto → 不收缩
     结果是价格被压成 0px，而卡片 overflow:hidden 又把溢出的数字裁掉，
     客户看到的是「¥1」而不是「¥150」—— 金额显示错误，属于事故级问题。

   修法：
     1. 价格改为不收缩，保证数字完整
     2. 页脚允许换行：宽度不够时标签组落到第二行，而不是把价格挤掉
     3. 标签组允许收缩，并给 min-width:0 让内部省略号生效
   -------------------------------------------------------------------------- */
body.ld-shop .ld-product-footer {
  flex-wrap: wrap !important;
  row-gap: 4px !important;
}

body.ld-shop .ld-product-footer > strong {
  flex: 0 0 auto !important;
}

body.ld-shop .ld-product-footer > .ld-product-badges {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
  margin-left: auto !important;
}


/* --------------------------------------------------------------------------
   20. 平板（768~1023px）：顶部按钮改成两列
   --------------------------------------------------------------------------
   store.css 把 .ld-store-header-actions 在窄屏改成 4 列网格，
   但 820px 时 header 内容区只有约 480px，每个按钮仅得 ~110px 放不下，
   于是 4 个按钮各自占满一行、堆成一大块（实测在 820px 下明显）。
   改成两列，两行放完。
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  body.ld-shop .ld-store-header-actions {
    /* ⚠ 必须显式声明 display:grid。
       store.css 里这条是 display:flex，
       而 flex 容器完全不理会 grid-template-columns ——
       只写列定义的话按钮仍会逐个纵向堆叠（实测 820px 就是这样）。*/
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* 在线发货/库存标签在窄卡片里也允许换行，避免互相挤压 */
  body.ld-shop .ld-product-footer .ld-product-badges {
    flex-wrap: wrap !important;
  }
}

/* ==========================================================================
   21. 桌面端：固定左侧分类导航（类似管理后台的侧边栏）
   --------------------------------------------------------------------------
   设计目标（与用户确认）：
     1. 分类导航独立占左侧一列，钉死在最左边，位置不随分类切换而变化
     2. 右侧商品区保持原来的整宽，卡片尺寸不被压缩
     3. 顺序：ChatGPT → Claude → Gemini → Codex → 中转站 → 测试

   实现要点：
     · 外层 .ld-shop-shell 变成两列网格：[侧栏] + [主内容]
       —— 注意这里不是把商品面板拆成两列（那样会挤压卡片），
          而是侧栏和商品面板是并列的两个区域。
     · 分类栏 <nav id="categoryTabs"> 由 store.js 在桌面端搬进
       <aside id="catSidebar">，手机端搬回 .ld-catalog-panel 原位。
       面板有 overflow:hidden，纯 CSS 搬不出去，所以必须用 JS。
     · 侧栏用 position:sticky，滚动时钉在视口左侧。

   为什么商品网格要改成 auto-fit：
      原样式里 .ld-product-grid 带 min-width:0!important，
      那只是解除网格项的收缩限制，不会阻止列数变化 ——
      4 列固定列在窄宽度下会把卡片压到 150px，价格被挤没。
      改成 auto-fit + minmax 让浏览器自己决定列数。
   ========================================================================== */
@media (min-width: 768px) {
  body.ld-shop .ld-cat-sidebar[hidden] {
    display: none !important;
  }

  /* ⚠ 不要给商品面板/资料区指定 grid-column！
     侧栏已改为 position:fixed（完全脱离文档流），外壳里只剩
     「资料区 + 商品面板」两个元素，应当各占整行。
     之前这里残留了 grid-column: 2（早期两列方案的写法），
     会把它们挤到第 2 列、第 1 列空出宽度 = gap 的幽灵列，
     实测外壳列变成 `14px 1132px`，商品区被白白压掉 28px。 */

  /* ⚠ 商品面板必须是单列。
     原样式把它设成 [分类栏 176px] + [商品 1fr] 两列 —— 那是分类栏还嵌在
     面板里时的布局。现在分类栏已被搬进独立侧栏，若不清掉这个两列定义，
     面板会白白空出第一列，把商品网格挤到只剩 200px（实测 1024~1300px 退化成 1 列）。 */
  body.ld-shop .ld-shop-shell > .ld-catalog-panel,
  body.ld-shop .ld-shop-shell > .tokyo-catalog-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--s-4) !important;
  }

  /* 侧栏内的分类栏：竖排，去掉卡片外观（外观由侧栏容器提供） */
  body.ld-shop .ld-cat-sidebar .ld-category-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--s-1) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* 分类项：图标 + 名称 + 数量 一行。
     ⚠ 高度必须写死 height，不能只写 min-height！
     store-final.css 里有一条
       body.ld-shop .ld-category-bar .tokyo-category-link { height: 84px !important }
     （那是给横排胶囊用的）。只写 min-height 的话，选中项会被撑到 84px、
     未选中项停在 44px —— 表现就是「点哪个分类哪个就变大」。
     这里把 height / min-height 一起锁死，选中态只靠背景色区分。 */
  body.ld-shop .ld-cat-sidebar .tokyo-category-link,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
    padding: 0 var(--s-3) !important;
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) auto !important;
    grid-template-rows: 44px !important;
    align-items: center !important;
    justify-items: start !important;
    gap: var(--s-2) !important;
    flex: none !important;
    border-radius: var(--r-sm) !important;
    text-align: left !important;
  }

  /* 去掉原横排样式右下角那个大对勾装饰 */
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active::after {
    display: none !important;
  }

  /* 图标统一小方形。
     ⚠ 必须同时写上 .is-active 那半段：原样式里
       body.ld-shop .ld-category-bar .tokyo-category-link.is-active .tokyo-category-image
     特异性更高，只写一半会让「选中」的分类图标卡在 44px 把文字挤没。 */
  body.ld-shop .ld-cat-sidebar .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover .tokyo-category-image {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    padding: 2px !important;
    flex: none !important;
    border-radius: var(--r-sm) !important;
    background: #fff !important;
  }


}


/* ==========================================================================
   23. 平板（768~1023px）：侧栏窄一些，商品 2 列
   --------------------------------------------------------------------------
   桌面端（≥1024px）不做任何列数覆盖 —— 直接使用 store-final.css 的
   repeat(4, 250px)。只要 shell 宽度足够（--shell-max-wide ≥ 1348px），
   4 列 250px 就能完整放下，卡片尺寸与改动前完全一致。
   这里只处理平板：侧栏占位后放不下 3×250，改为 2 列。
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

  body.ld-shop .ld-cat-sidebar .tokyo-category-link {
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
    padding: var(--s-2) !important;
    gap: var(--s-1) !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active .tokyo-category-image {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
  }

  body.ld-shop .ld-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 12px !important;
  }
}

/* ==========================================================================
   24. 中等桌面（1150~1439px）：4 列放不下时降为 3 列
   --------------------------------------------------------------------------
   4 列 250px 需要 shell ≥1348px（1084 网格 + 208 侧栏 + 20 间隙 + 36 内边距）。
   视口低于约 1396px 时 shell 会被 calc(100% - 48px) 限制而不够宽，
   此时必须降到 3 列，否则第 4 列会被面板 overflow:hidden 裁掉。
   3 列用 minmax(0,1fr) 等分，卡片仍保持 250px 高（aspect-ratio:1）。
   ========================================================================== */


/* 1024~1199px：放不下 3×250，改为等分 3 列（卡片随宽度收缩） */


/* ==========================================================================
   25. 压缩网格内边距，让 4 列 250px 尽早放得下
   --------------------------------------------------------------------------
   4 列 250px 的硬需求 = 4×250 + 3×gap + 2×padding
     原规格 gap 16 / padding 18 → 1048px 网格可用宽（对应视口 1460px）
     压缩为 gap 12 / padding 10 → 1024px（对应视口 1436px）
   省下 24px，让 1440px 这类常见宽度也能显示 4 列。
   卡片本身仍是 250px，尺寸不变。
   ========================================================================== */


/* ==========================================================================
   26. Grok 商品图
   --------------------------------------------------------------------------
   Grok 图标是 128×128 的方形符号（黑底圆角方块 + 白色圆环斜杠），
   和其它品牌的横版 wordmark 比例不同，需要单独约束尺寸，
   否则会被拉成横条或缩得过小。
   与 is-codex-wordmark 同规格：桌面 118×118、手机端更小。
   ========================================================================== */
body.ld-shop .ld-product-image.is-grok-symbol img {
  width: 118px !important;
  height: 118px !important;
  max-width: 76% !important;
  max-height: 118px !important;
  aspect-ratio: 1 !important;
  object-fit: contain !important;
}

@media (max-width: 767px) {
  body.ld-shop .ld-product-image.is-grok-symbol img {
    width: 78px !important;
    height: 78px !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}

/* 商品详情页大图同理 */
body.ld-shop .product-summary-media.is-grok-symbol img {
  width: auto !important;
  height: auto !important;
  max-width: 118px !important;
  max-height: 118px !important;
  aspect-ratio: 1 !important;
  object-fit: contain !important;
}

/* ==========================================================================
   27. Grok 商品：图标旁补品牌名 + 加大商品名字体
   --------------------------------------------------------------------------
   需求（2026-09-13）：
     1. Grok 商品图旁加一个「Grok」文字，视觉效果与 ChatGPT / Gemini /
        Claude 的横版 wordmark（图标 + 品牌名）保持一致。
        原因：Grok 图标只是符号，单独放显得比其它品牌「少一截」。
     2. 商品名字体偏小，整体加大。
   ========================================================================== */

/* ---- 1. Grok 图标 + 品牌名 横向排列 ---- */
body.ld-shop .ld-product-image.is-grok-symbol {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* 图标定死尺寸，避免被 flex 拉伸 */
body.ld-shop .ld-product-image.is-grok-symbol img {
  width: 62px !important;
  height: 62px !important;
  max-width: 62px !important;
  max-height: 62px !important;
  flex: 0 0 auto !important;
}

/* 品牌名：字重与其它 wordmark 里的品牌字接近 */
body.ld-shop .ld-brand-wordmark {
  display: inline-block;
  color: var(--c-ink);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

/* ---- 2. 商品名字体加大 ---- */
body.ld-shop .ld-product-card .ld-product-body h3,
body.ld-shop .ld-product-card h3,
body.ld-shop .ld-product-body h3,
body.ld-shop .ld-product-name {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  min-height: 0 !important;
}

/* 手机端：卡片窄，字号略小但仍比原来大 */
@media (max-width: 767px) {
  body.ld-shop .ld-product-card .ld-product-body h3,
  body.ld-shop .ld-product-card h3,
  body.ld-shop .ld-product-body h3,
  body.ld-shop .ld-product-name {
    font-size: 14px !important;
  }

  body.ld-shop .ld-product-image.is-grok-symbol {
    gap: 6px !important;
  }

  body.ld-shop .ld-product-image.is-grok-symbol img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }

  body.ld-shop .ld-brand-wordmark {
    font-size: 22px;
  }
}

/* 商品详情页的 Grok 大图同理 */
body.ld-shop .product-summary-media.is-grok-symbol {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
}

body.ld-shop .product-summary-media.is-grok-symbol img {
  width: 92px !important;
  height: 92px !important;
  max-width: 92px !important;
  max-height: 92px !important;
  flex: 0 0 auto !important;
}

body.ld-shop .product-summary-media.is-grok-symbol .ld-brand-wordmark {
  font-size: 46px;
}

/* ==========================================================================
   28. 侧栏分类按钮：高度放大 1.5 倍（44 → 66px）
   --------------------------------------------------------------------------
   需求（2026-09-13）：分类按钮再高一些，便于点击。
   等比放大：高度 44→66、图标 26→34、行高 66、字号 14→16，
   让整行视觉比例保持一致。
   ⚠ 三个高度属性必须一起锁死（height / min-height / max-height）——
     只写 min-height 会被 store-final.css 的 height:84px 撑开，
     表现为「点哪个分类哪个变大」（这个坑已踩过）。
   ========================================================================== */
@media (min-width: 1024px) {
  body.ld-shop .ld-cat-sidebar .tokyo-category-link,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover {
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    grid-template-rows: 66px !important;
    padding: 0 var(--s-4) !important;
    gap: var(--s-3) !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover .tokyo-category-image {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    padding: 3px !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-name {
    font-size: 16px !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-count {
    min-width: 24px !important;
    height: 22px !important;
    font-size: 12px !important;
    line-height: 22px !important;
  }

  /* 图标与按钮内距同步放大后，侧栏整体留白也跟着调 */
  body.ld-shop .ld-cat-sidebar {
    padding: var(--s-2) !important;
  }
}

/* 平板（768~1023）：侧栏窄，按同样比例放大（44→66 的等比） */
@media (min-width: 768px) and (max-width: 1023px) {
  body.ld-shop .ld-cat-sidebar .tokyo-category-link,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover {
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    grid-template-rows: 62px !important;
    padding: 0 var(--s-3) !important;
    gap: var(--s-2) !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover .tokyo-category-image {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    padding: 3px !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-name {
    font-size: 15px !important;
  }
}



/* 平板：不做弹性留白，侧栏收窄 */
@media (min-width: 768px) and (max-width: 1023px) {
}

/* ==========================================================================
   30. 4 列断点：让 250px 卡片有明确的生效区间
   --------------------------------------------------------------------------
   实测（侧栏 312px 版）：
     视口 ≥1520px → 商品面板 ≥1048px，正好放下 4×250 + 3×16 + 2×18
     视口 1200~1519px → 面板 985~1045px，放不下 250px 的 4 列，
                        改用 flex 均分（卡片 223~250px），仍是 4 列不溢出
     视口 <1024px → 由更早的规则接管（3 列 / 2 列）
   ========================================================================== */

/* ==========================================================================
   32. 侧栏定位（最终方案）
   --------------------------------------------------------------------------
   用户要求：只改导航栏，**绝对不能动商品区**。

   做法：侧栏用绝对定位挂在 shell 左边外面。
     · shell 宽度完全不动（仍是 store-final.css 的 min(1160px, 82vw)）
       → 商品区尺寸、卡片尺寸、图片尺寸全部保持原样
     · 侧栏 left: calc(-1 * (var(--cat-sidebar-w) + var(--s-5)))
       即挂到 shell 左边界再往左 312+20=332px 处
     · 桌面端 shell 左右各留 48px 边距，所以页面最左到 shell 左边界
       有 (100% - 1160px)/2 - 48px 的空白；
       1440px 视口下约有 92px，能放下 312px 侧栏的大部分，
       剩余部分落在边距内，视觉上仍贴页面最左侧。

   ⚠ 为什么不用网格列：
     一旦把侧栏放进 shell 的网格列，它就会分走商品区的宽度，
     导致卡片变小、图片被遮（这个错误已经犯过一次）。
     绝对定位不参与布局，商品区一个像素都不会动。
   ========================================================================== */
@media (min-width: 1440px) {
  body.ld-shop .ld-shop-shell,
  body.ld-shop .tokyo-shell {
    position: relative !important;
  }

  /* 侧栏：固定定位到视口左侧。
     —— 用 fixed 而不是 grid-column / absolute，是因为：
        · grid-column 会分走商品区宽度（会导致卡片变小、图片被遮，已踩坑）
        · absolute 的百分比基准是 shell 宽度，换算复杂且容易算错
        fixed 的基准是视口，与商品区完全解耦：侧栏宽度随便改，
        商品区一个像素都不会动。 */
  body.ld-shop .ld-cat-sidebar {
    position: fixed !important;
    top: 96px !important;
    left: 24px !important;
    width: var(--cat-sidebar-w) !important;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    padding: var(--s-2) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--r-lg) !important;
    background: var(--c-surface) !important;
    box-shadow: var(--sh-xs) !important;
    z-index: 5;
  }


  body.ld-shop .ld-cat-sidebar[hidden] {
    display: none !important;
  }

  /* 侧栏内的分类栏：竖排，去掉自身的卡片外观 */
  body.ld-shop .ld-cat-sidebar .ld-category-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--s-1) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* 分类项：图标 + 名称 + 数量，高度 66px（原 44px 的 1.5 倍） */
  body.ld-shop .ld-cat-sidebar .tokyo-category-link,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover {
    width: 100% !important;
    min-width: 0 !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    box-sizing: border-box !important;
    padding: 0 var(--s-4) !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    grid-template-rows: 66px !important;
    align-items: center !important;
    justify-items: start !important;
    gap: var(--s-3) !important;
    flex: none !important;
    border-radius: var(--r-sm) !important;
    text-align: left !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active::after {
    display: none !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover .tokyo-category-image {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    padding: 3px !important;
    flex: none !important;
    border-radius: var(--r-sm) !important;
    background: #fff !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-name {
    font-size: 16px !important;
    font-weight: 500 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-count {
    width: auto !important;
    min-width: 24px !important;
    height: 22px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
    line-height: 22px !important;
  }
}

/* 平板：侧栏窄一些，同样绝对定位 */
@media (min-width: 768px) and (max-width: 1023px) {
  body.ld-shop .ld-shop-shell,
  body.ld-shop .tokyo-shell {
    position: relative !important;
  }

  body.ld-shop .ld-cat-sidebar {
    position: fixed !important;
    top: 96px !important;
    left: 12px !important;
    width: 170px !important;
    padding: var(--s-2) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--r-lg) !important;
    background: var(--c-surface) !important;
    box-shadow: var(--sh-xs) !important;
    z-index: 5;
  }

  body.ld-shop .ld-cat-sidebar[hidden] {
    display: none !important;
  }

  body.ld-shop .ld-cat-sidebar .ld-category-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--s-1) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-link,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    box-sizing: border-box !important;
    padding: 0 var(--s-2) !important;
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) auto !important;
    grid-template-rows: 56px !important;
    align-items: center !important;
    gap: var(--s-2) !important;
    border-radius: var(--r-sm) !important;
    text-align: left !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active::after {
    display: none !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active .tokyo-category-image {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    padding: 2px !important;
    background: #fff !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-name {
    font-size: 14px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================================================
   33. 侧栏只在宽屏（≥1440px）显示
   --------------------------------------------------------------------------
   侧栏宽 312px + 商品区 1160px = 1472px，低于这个宽度两者会重叠或溢出。
   所以：
     ≥1440px  → 显示固定侧栏（分类导航搬进侧栏）
     768~1439px → 隐藏侧栏容器；JS 不搬移导航，导航留在商品面板内显示为
                  横滑胶囊条（即改动前的原样）
     ≤767px   → 同上，横滑条
   ========================================================================== */
/* ⚠ 这里的阈值必须是 1295，不能是 1439！
   原因：侧栏的显示规则是 @media (min-width: 1296px)，
   若这里写 1439，则 1296~1439px 区间「显示」和「隐藏」同时命中，
   而本条更靠后 → 侧栏在该区间被错误隐藏（已踩坑）。 */
@media (max-width: 1319px) {
  body.ld-shop .ld-cat-sidebar {
    display: none !important;
  }
}

/* ==========================================================================
   34. 列数保护（只改列数，不改卡片尺寸）
   --------------------------------------------------------------------------
   商品面板宽度 = shell 宽度 - 内边距。
   4 列 250px 需要 4×250 + 3×16(gap) + 2×18(padding) = 1084px。
     ≥1440px 视口 → shell 1160px → 面板 1132px → 放得下 4 列 ✓
     1280px 视口  → shell 1050px → 面板 1036px → 差 48px，会溢出
   所以在放不下的区间降到 3 列，避免第 4 列被面板裁掉。
   ⚠ 只覆盖 grid-template-columns，绝不碰 width/height/aspect-ratio，
     卡片尺寸完全交给 store-final.css 的原规则。
   ========================================================================== */
@media (min-width: 1101px) and (max-width: 1439px) {
  body.ld-shop .ld-product-grid {
    grid-template-columns: repeat(3, minmax(0, 250px)) !important;
    justify-content: start !important;
  }
}

/* ==========================================================================
   35. 宽屏布局：shell 加宽以容纳左侧固定侧栏（避免侧栏压住商品）
   --------------------------------------------------------------------------
   问题：store-final.css 把 shell 锁在 width: min(1160px, 82vw)。
        1920px 视口下左边距只有 (1920-1160)/2 = 380px，
        而侧栏宽 312px 放在 left:24px → 右边界 336px，
        与 shell 左边界 380px 只差 44px —— 窄一点的视口就直接压住商品。
        （实测在 1700px 左右就开始重叠）

   修法：
     ≥1600px → 显式把 shell 加宽到 1524px（= 312 侧栏 + 24 左边距 + 20 间隙
               + 1160 商品区 + 8 余量），让侧栏和商品并排而不重叠
     <1600px → 隐藏侧栏容器；JS 也不搬移导航，导航留在商品面板内显示为
               横滑胶囊条（即改动前的原样），商品区完全不受影响
   ========================================================================== */


/* ==========================================================================
   36. 最终布局：左侧导航 + 中间商品
   --------------------------------------------------------------------------
   用户要求：中间放商品，左边放导航栏；导航按钮放大 1.5 倍后
   「ChatGPT」文字不能被挡住。
   ⚠ 因此导航栏必须加宽 —— 用户原话「挡住了就往左边增宽」。

   宽度账（这是硬约束，不是偏好）：
     侧栏 312 + 间距 20 + 商品区 1160 = 1492px
     shell 必须正好 1492px，否则要么侧栏压住商品（太窄），
     要么右侧空出一大块（太宽）。

   为什么原来会压住商品：
     store-final.css 把 shell 锁在 width: min(1160px, 82vw)，
     1920px 视口下 shell 只占 380~1540px 这一段；
     侧栏放在 left:24px、宽 312px → 右边界 336px，
     在 1700px 以下就直接压在商品上了。

   ⚠ 本段**只设置 shell 的宽度与居中**，不写任何商品相关的
     grid-template-columns / width / height / aspect-ratio 覆盖，
     商品区尺寸完全交给 store-final.css 原规则。
   ========================================================================== */

/* 商品面板与资料区放第 2 列 */

/* 侧栏：挂在 shell 左边外面，宽度 312px（按钮加宽后的需求） */
/* 窄屏（<1600px）：侧栏放不下就隐藏，导航回到商品面板内显示为横滑条
   （即改动前的原样），商品区完全不受影响。 */

/* ==========================================================================
   99. 还原：分类按钮回到放大前的尺寸
   --------------------------------------------------------------------------
   用户要求「先还原，没放大 1.5 倍之前」。
   把 66px / 34px / 16px 全部改回原来的 44px / 26px / 14px。

   放在文件最末尾，用同选择器覆盖前面所有重复定义，
   避免逐个清理残留规则时出错。
   ⚠ 只改按钮内部尺寸，不动 shell 宽度、不动商品区。
   ========================================================================== */
@media (min-width: 768px) {
  body.ld-shop .ld-cat-sidebar .tokyo-category-link,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    grid-template-columns: 26px minmax(0, 1fr) auto !important;
    grid-template-rows: 44px !important;
    padding: 0 var(--s-2) !important;
    gap: var(--s-2) !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover .tokyo-category-image {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    padding: 2px !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-count {
    min-width: 22px !important;
    height: 20px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    line-height: 20px !important;
  }
}

/* ==========================================================================
   98. 侧栏在更窄的视口也能显示（放宽断点到 1200px）
   --------------------------------------------------------------------------
   背景：用户浏览器有缩放，有效视口宽度可能远小于屏幕分辨率。
        原来断点 1400px 会直接隐藏侧栏，用户就"看不见导航栏"。

   策略：
     ≥1400px → 侧栏 260px + 商品 4 列（完整形态）
     1200~1399px → 侧栏收窄到 200px + 商品 3 列（仍显示侧栏）
     <1200px → 隐藏侧栏，导航回到商品面板内显示为横滑条（改动前的原样）
   ========================================================================== */

/* ==========================================================================
   97. 兜底：≥1024px 一律显示侧栏（不再依赖更宽的断点）
   --------------------------------------------------------------------------
   背景：用户的 Edge 视口明显比 Chrome 窄（Edge 自带侧边栏/窗口未最大化
        都会压缩有效宽度），导致 1200px 断点没命中、侧栏被隐藏，
        用户报「左边没发现导航栏」。
   策略：只要有 1024px 就显示侧栏，宽度按可用空间分三档：
     ≥1400px → 260px 侧栏 + 4 列
     1280~1399px → 220px 侧栏 + 3 列
     1024~1279px → 190px 侧栏 + 3 列
   ========================================================================== */

/* ==========================================================================
   96. 商品图自适应容器 —— 任何卡片尺寸下都不被裁
   --------------------------------------------------------------------------
   问题：卡片宽度变小时（如 ≤1199px 视口下 212px 的卡），
        容器高度只剩约 100px，而 store-final.css 给图片的
        max-height 是固定 148px → 图片比容器高，被裁掉下半部分。
   修法：图片宽度改成跟随容器（width: 100%），高度 auto，
        并用 object-fit: contain —— 容器多小都能完整显示、不裁切。
   ⚠ 只作用于商品卡内的图片，不影响商品详情页的大图。
   ========================================================================== */
/* ⚠ 只能用 max-*，不能写 width/height: 100%！
   写 height:100% 时，图片的固有比例（如 Codex 的 230×300 竖版）
   会反过来算出更高的高度（实测 224×292 塞进 224×156 的容器 → 溢出 124px 被裁）。
   用 max-width/max-height + width/height:auto 才会真正按容器缩放。 */
body.ld-shop .ld-product-card .ld-product-image img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* 容器必须有「确定高度」，max-height:100% 才有参照物。
   卡片是 flex 纵向布局：图片区 flex:1 1 0 吃掉除文字/价格外的剩余高度，
   配合 min-height:0 才允许收缩。
   ⚠ 只写 min-height:0 不够 —— 容器高度仍是 auto（被图片撑开），
     图片的 max-height:100% 就失去参照，Codex 竖版图会撑到 292px 被裁。 */
body.ld-shop .ld-product-card .ld-product-image {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}

/* ==========================================================================
   100. 收尾：侧栏 1.5 倍 + 商品卡统一 250px
   --------------------------------------------------------------------------
   用户诉求只有一条：**分类按钮放大 1.5 倍**（原来 44px 高的按钮，
   "ChatGPT" 后面几个字被挡住，所以按钮和侧栏都要变宽）。
   我在实现过程中反复去动商品区，把简单事情做复杂了。这里一次性收干净。

   两件事：
   A. 商品卡统一 250×250 —— 之前 store-final.css 的 max-width:86%/148px
      加上各种媒体查询，让卡片在不同宽度下变成 212~276px。
      这里只写「列定义 + 卡片尺寸」，图片交给 max-width/max-height 自适应。
   B. 侧栏按 1.5 倍放宽：宽度 312px、按钮 66px、图标 34px、字号 16px。
      外壳宽度 = 312 + 20 + 1116 = 1448px，对应视口 ≥1472px 时最舒服。
   ========================================================================== */

/* ---- A. 商品卡：4 列 × 250px，尺寸锁死 ---- */

/* ---- B. 侧栏 1.5 倍 ---- */

/* ==========================================================================
   101. 商品图最终修法：按卡片尺寸给固定值
   --------------------------------------------------------------------------
   上图容器的高度由 flex 决定，写 max-height:100% 时容器高度仍是 auto，
   图片的固有比例（Codex 230×300 竖版）会把它撑到 292px 并溢出被裁。
   这里不再依赖百分比，直接给固定像素：
     卡片 250×250 → 图容器可用高约 156px
     Codex 竖版图用 118px（宽高同为 118，正方形，绝不溢出）
     横版 wordmark 用 max-height 118px
   ========================================================================== */
body.ld-shop .ld-product-card .ld-product-image img {
  max-height: 118px !important;
}

body.ld-shop .ld-product-card .ld-product-image.is-codex-wordmark img,
body.ld-shop .ld-product-card .ld-product-image.is-grok-symbol img,
body.ld-shop .ld-product-card .ld-product-image.is-relay-symbol img {
  width: 118px !important;
  height: 118px !important;
  max-width: 118px !important;
  max-height: 118px !important;
  aspect-ratio: 1 !important;
  object-fit: contain !important;
}

body.ld-shop .ld-product-card .ld-product-image.is-chatgpt-wordmark img,
body.ld-shop .ld-product-card .ld-product-image.is-claude-wordmark img,
body.ld-shop .ld-product-card .ld-product-image.is-gemini-wordmark img,
body.ld-shop .ld-product-card .ld-product-image.is-relay-wordmark img,
body.ld-shop .ld-product-card .ld-product-image.is-blue-gpt img {
  width: auto !important;
  height: auto !important;
  max-width: 86% !important;
  max-height: 118px !important;
  object-fit: contain !important;
}
/* 1024~1471px：侧栏 220px + 商品 3 列（放不下 4×250+312） */
@media (min-width: 760px) and (max-width: 1319px) {
  body.ld-shop .ld-cat-sidebar {
    display: block !important;
    width: 220px !important;
  }
  body.ld-shop .ld-shop-shell,
  body.ld-shop .tokyo-shell {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: var(--s-3) !important;
    width: calc(100% - 24px) !important;
    max-width: 1200px !important;
  }
  body.ld-shop .ld-shop-shell > .ld-store-profile,
  body.ld-shop .ld-shop-shell > .ld-catalog-panel {
    grid-column: 2 !important;
  }
  body.ld-shop .ld-cat-sidebar .tokyo-category-link,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    grid-template-rows: 52px !important;
  }
  body.ld-shop .ld-cat-sidebar .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active .tokyo-category-image {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
  }
  body.ld-shop .ld-cat-sidebar .tokyo-category-name { font-size: 14px !important; }
}

/* ==========================================================================
   200. 布局 2.0 —— 照搬管理后台的侧栏方案
   --------------------------------------------------------------------------
   对照管理后台（AppSidebar.vue / AppShell.vue）：
     .zx-sidebar { position: fixed; width: 232px }
     .shell__main { margin-left: 232px }        ← 主内容用整屏剩余宽度
   用户端改为同样结构：
     分类导航 fixed 在最左侧，商品区 margin-left 让开，
     商品区用**整屏剩余宽度**（不再居中固定宽），
     所以 4 列 250px 一定放得下（只需 1084px）。

   实测：视口 1440px 时
     侧栏 240 + 商品区 1200 → 网格可用 1132px → 4×250 + 3×16 = 1048 ✓
   ========================================================================== */

/* 侧栏：对齐管理后台的形态（fixed 在最左，纵向占满） */
@media (min-width: 1320px) {
  body.ld-shop .ld-cat-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--cat-sidebar-w, 240px) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 88px var(--s-2) var(--s-3) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 0 !important;
    border-right: 1px solid var(--c-line) !important;
    border-radius: 0 !important;
    background: var(--c-surface) !important;
    box-shadow: none !important;
    z-index: 40 !important;
  }

  body.ld-shop .ld-cat-sidebar[hidden] { display: none !important; }

  /* 外壳：让开侧栏，占满剩余宽度，不再居中 */
  body.ld-shop .ld-shop-shell,
  body.ld-shop .tokyo-shell {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin-left: calc(var(--cat-sidebar-w, 200px) + 16px) !important;
    margin-right: var(--s-4) !important;
    padding: 0 !important;
  }

  body.ld-shop .tokyo-footer-wrap {
    width: auto !important;
    max-width: none !important;
    margin-left: calc(var(--cat-sidebar-w, 200px) + 16px) !important;
    margin-right: var(--s-4) !important;
  }

  /* 侧栏内分类栏：竖排 */
  body.ld-shop .ld-cat-sidebar .ld-category-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* 分类项：按钮放大 1.5 倍的尺寸 */
  body.ld-shop .ld-cat-sidebar .tokyo-category-link,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover {
    width: 100% !important;
    min-width: 0 !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    box-sizing: border-box !important;
    padding: 0 var(--s-3) !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    grid-template-rows: 66px !important;
    align-items: center !important;
    justify-items: start !important;
    gap: var(--s-2) !important;
    flex: none !important;
    border-radius: var(--r-sm) !important;
    text-align: left !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active::after { display: none !important; }

  body.ld-shop .ld-cat-sidebar .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover .tokyo-category-image {
    width: 34px !important; height: 34px !important;
    min-width: 34px !important; min-height: 34px !important;
    max-width: 34px !important; max-height: 34px !important;
    padding: 3px !important; flex: none !important;
    border-radius: var(--r-sm) !important;
    background: #fff !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-name {
    font-size: 16px !important; font-weight: 500 !important;
    white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-count {
    width: auto !important; min-width: 24px !important;
    height: 22px !important; padding: 0 6px !important;
    font-size: 12px !important; line-height: 22px !important;
  }

  /* 商品网格：4 列 250px。
     不再写 repeat(4, 250px)（那是固定轨道，容器不够就溢出），
     改用 auto-fill + minmax(250px, 250px) —— 放得下就 4 列，
     放不下自动降列，永远不会溢出被裁。 */
  body.ld-shop .ld-product-grid {
    grid-template-columns: repeat(auto-fill, 250px) !important;
    justify-content: start !important;
    /* gap 收到 8px：1440px 视口下网格宽 1071px，
       4×250 + 3×16 = 1048 理论够，但 auto-fill 的实际可用宽度
       会被面板内边距再削一层，导致只排 3 列。
       收到 8px 后 4×250 + 3×8 = 1024px，稳放 4 列。 */
    gap: 8px !important;
    padding: 12px !important;
  }

  body.ld-shop .ld-product-card {
    width: 250px !important;
    height: 250px !important;
    aspect-ratio: 1 !important;
  }
}

/* 窄屏（<1024px）：侧栏收起，导航回到商品面板内显示为横滑条（改动前的原样） */
@media (max-width: 1319px) {
  /* 侧栏放不下（需要 ≥1360px 才能与 4 列并存）→ 隐藏，
     导航回到商品面板内显示为横滑条（改动前的原样），
     商品占满宽度、保持 4 列 250px。 */
  body.ld-shop .ld-cat-sidebar { display: none !important; }
  body.ld-shop .ld-shop-shell,
  body.ld-shop .tokyo-shell {
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ==========================================================================
   210. 手机端修复（第 1 轮截图发现的问题）
   --------------------------------------------------------------------------
   问题 1：商品图尺寸不统一
     原因：store-final.css 给不同品牌图设了不同的 max-width/max-height，
           加上图片固有比例差异，导致有的图大有的图小。
     修法：手机端统一图片最大尺寸，并让高度占满图片区。

   问题 2：价格与库存标签垂直不对齐
     原因：商品名有的 1 行、有的 2 行，卡片高度一致时
           价格行被挤到不同高度。
     修法：商品名固定占 2 行高度（line-clamp 2 + 固定行高），
           这样所有卡片的价格行都在同一水平线上。
   ========================================================================== */
@media (max-width: 767px) {
  /* 商品名固定 2 行，保证价格行对齐 */
  body.ld-shop .ld-product-card .ld-product-body {
    min-height: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
  }

  body.ld-shop .ld-product-card .ld-product-body h3,
  body.ld-shop .ld-product-card h3,
  body.ld-shop .ld-product-body h3 {
    margin: 0 !important;
    min-height: 2.7em !important;   /* 2 行 × 1.35 行高 */
    font-size: 13px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 商品图统一尺寸并占满 */
  body.ld-shop .ld-product-card .ld-product-image {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  /* 图片统一按容器缩放（contain 永不裁切） */
  body.ld-shop .ld-product-card .ld-product-image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  /* ⚠ 方形图（Codex/Grok/中转站符号）必须 ≤ 容器高度！
     实测容器只有 68px 高，原来写 78px → 超出 10px 被裁。 */
  body.ld-shop .ld-product-card .ld-product-image.is-codex-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-grok-symbol img,
  body.ld-shop .ld-product-card .ld-product-image.is-relay-symbol img {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
  }

  /* 横版 wordmark：把高度放大到 56px（原来只有 31px），
     让视觉重量与 60px 的方形图（Codex/Grok）接近，
     同时仍在 68px 的容器高度内，不会裁切。 */
  body.ld-shop .ld-product-card .ld-product-image.is-chatgpt-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-claude-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-gemini-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-relay-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-blue-gpt img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 56px !important;
    object-fit: contain !important;
  }

  /* Grok 的图标+文字组合也同步放大 */
  body.ld-shop .ld-product-card .ld-product-image.is-grok-symbol {
    gap: 8px !important;
  }
  body.ld-shop .ld-product-card .ld-product-image.is-grok-symbol img {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
  }
  body.ld-shop .ld-product-card .ld-product-image.is-grok-symbol .ld-brand-wordmark {
    font-size: 26px !important;
  }

  /* 底部价格行固定高度，标签垂直居中 */
  body.ld-shop .ld-product-card .ld-product-footer {
    min-height: 40px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 6px 10px 8px !important;
  }

  body.ld-shop .ld-product-card .ld-product-footer strong {
    font-size: 15px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }

  body.ld-shop .ld-product-card .ld-stock-status {
    font-size: 10px !important;
    min-height: 20px !important;
    padding: 0 6px !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   211. 手机端卡片改为竖长比例，给商品图足够空间
   --------------------------------------------------------------------------
   实测（390px 视口）：
     卡片 163×163（正方形）→ 图容器只有 68px 高
     而横版 wordmark 比例约 4.28:1，按宽度算高度只有 32px → 图很小、卡片显得空
   改为 3:4 竖长比例后：
     卡片 163×217 → 图容器约 122px → 横版图能到 ~75px 高，视觉饱满
   ========================================================================== */
@media (max-width: 767px) {
  body.ld-shop .ld-product-card {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 5 / 6 !important;
  }

  body.ld-shop .ld-product-card .ld-product-image {
    flex: 1 1 auto !important;
    min-height: 78px !important;
  }

  /* 图容器大了，横版图可以放到更高 */
  body.ld-shop .ld-product-card .ld-product-image.is-chatgpt-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-claude-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-gemini-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-relay-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-blue-gpt img {
    max-width: 100% !important;
    max-height: 88px !important;
  }

  body.ld-shop .ld-product-card .ld-product-image.is-codex-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-relay-symbol img {
    width: 84px !important;
    height: 84px !important;
    max-width: 84px !important;
    max-height: 84px !important;
  }

  body.ld-shop .ld-product-card .ld-product-image.is-grok-symbol img {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
  }

  body.ld-shop .ld-product-card .ld-product-image.is-grok-symbol .ld-brand-wordmark {
    font-size: 34px !important;
  }
}

/* ==========================================================================
   212. 锁定 4 列（用户明确要求：右边必须 4 列，商品大小不变）
   --------------------------------------------------------------------------
   auto-fill 在 1700px 以上会排出 5 列，而需求是固定 4 列。
   这里在宽屏直接写死 repeat(4, 250px)：
     · 卡片恒为 250×250（尺寸不变）
     · 列数恒为 4
     · 1368px 以上都放得下（4×250 + 3×8 = 1024px）
   ========================================================================== */
@media (min-width: 1024px) {
  body.ld-shop .ld-product-grid {
    grid-template-columns: repeat(4, 250px) !important;
    justify-content: start !important;
  }
}

/* ==========================================================================
   213. Grok 图标+文字组合的居中修正（手机端）
   --------------------------------------------------------------------------
   实测：Grok 卡片里图标距卡片左边只有 3px，而其它品牌的图都是 6px 居中。
   原因：grok 是「图标 + 文字」的 flex 组合，图标是 flex 项，
        img 的 getBoundingClientRect 只反映图标本身，看起来偏左。
   修法：整个组合用 flex 居中，并给组合本身一个更均衡的左右留白。
   ========================================================================== */
@media (max-width: 767px) {
  body.ld-shop .ld-product-card .ld-product-image.is-grok-symbol {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 6px 10px !important;
  }

  body.ld-shop .ld-product-card .ld-product-image.is-grok-symbol img {
    width: 66px !important;
    height: 66px !important;
    max-width: 66px !important;
    max-height: 66px !important;
    flex: 0 0 auto !important;
  }

  body.ld-shop .ld-product-card .ld-product-image.is-grok-symbol .ld-brand-wordmark {
    font-size: 30px !important;
    line-height: 1 !important;
  }
}

/* ==========================================================================
   214. 侧栏收窄到 176px（用户要求：导航栏再缩一点点，让 100% 缩放也能显示）
   --------------------------------------------------------------------------
   宽度账（这是硬约束）：
     侧栏 176 + 间距 16 + 商品面板 1080 + 左右边距 24 = 1296px
     商品面板 1080 = 4×250 + 3×8(gap) + 2×12(网格padding) + 2×16(面板padding)
   → 视口 ≥1296px 就能「侧栏 + 4 列 250px」并存。
   侧栏内元素同步收窄，保证「全部商品」「ChatGPT」「中转站」完整显示。
   ========================================================================== */
@media (min-width: 1320px) {
  body.ld-shop .ld-cat-sidebar .tokyo-category-link,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    grid-template-rows: 44px !important;
    padding: 0 8px !important;
    gap: 6px !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover .tokyo-category-image {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    padding: 2px !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-count {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
    line-height: 18px !important;
  }

  body.ld-shop .ld-cat-sidebar {
    padding: 84px 6px 12px !important;
  }
}

/* ==========================================================================
   215. 窄屏（<1296px，侧栏隐藏）商品自适应，不再溢出
   --------------------------------------------------------------------------
   实测：1280px 视口下侧栏隐藏，商品面板 985px、网格容器 951px，
        但 4 列 250px 需要 1024px → 溢出 73px，第 4 列被面板裁掉。
   修法：窄屏改用 minmax(0, 250px) —— 放得下就是 250px（尺寸不变），
        放不下自动等比收缩（220px 左右），绝不溢出。
        卡片高度用 aspect-ratio: 1 跟随宽度，保持正方形。
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1319px) {
  body.ld-shop .ld-product-grid {
    grid-template-columns: repeat(4, minmax(0, 250px)) !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  body.ld-shop .ld-product-card {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
  }

  /* ⚠ 卡片缩小后，文字区（商品名 + 价格）占的高度不变，
     图像区会被压缩 —— 所以图片尺寸不能再用固定像素，
     必须用百分比跟随容器，否则 163px 的卡上图片会被裁（实测裁 13 张）。 */
  body.ld-shop .ld-product-card .ld-product-image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  body.ld-shop .ld-product-card .ld-product-image.is-codex-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-relay-symbol img,
  body.ld-shop .ld-product-card .ld-product-image.is-grok-symbol img {
    width: auto !important;
    height: auto !important;
    max-width: min(58%, 96px) !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  body.ld-shop .ld-product-card .ld-product-image.is-grok-symbol .ld-brand-wordmark {
    font-size: clamp(18px, 3.4vw, 32px) !important;
  }

  body.ld-shop .ld-product-card .ld-product-body h3 {
    font-size: clamp(12px, 1.1vw, 14px) !important;
  }
}

/* 平板（<1024px）：3 列，卡片自适应 */
@media (min-width: 768px) and (max-width: 1023px) {
  body.ld-shop .ld-product-grid {
    grid-template-columns: repeat(3, minmax(0, 250px)) !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  body.ld-shop .ld-product-card {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
  }
}

/* ==========================================================================
   216. 商品名固定 2 行 —— 让所有卡片的「图像区高度」一致
   --------------------------------------------------------------------------
   实测（1024px 视口，卡片 163×163）：
     商品名 1 行的卡：图像容器高 45px
     商品名 2 行的卡：图像容器高 75px
   容器高度随文字行数跳变 30px → 固定尺寸的方形图（Codex 79×79）
   在 45px 的容器里必然溢出 46px 被裁。
   修法：商品名一律占 2 行（不足补空、超出省略），
        图像区高度就恒定了，图片再按百分比缩放即可。
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1295px) {
  body.ld-shop .ld-product-card .ld-product-body h3 {
    min-height: 2.7em !important;   /* 2 行 × 1.35 行高 */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.35 !important;
  }

  /* 图像区固定比例，不再被文字行数影响 */
  body.ld-shop .ld-product-card .ld-product-image {
    flex: 0 0 auto !important;
    height: 42% !important;
    min-height: 0 !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  /* ⚠ 这里必须用最高特异性，否则会被前面各段给单个品牌写的固定尺寸规则压过。
     实测：Codex 图曾被算成 149×149 塞进 161×68 的容器 → 下溢 87px 被裁。 */
  body.ld-shop .ld-product-card .ld-product-image img,
  body.ld-shop .ld-product-card .ld-product-image.is-codex-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-relay-symbol img,
  body.ld-shop .ld-product-card .ld-product-image.is-grok-symbol img,
  body.ld-shop .ld-product-card .ld-product-image.is-chatgpt-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-claude-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-gemini-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-relay-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-blue-gpt img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }


  body.ld-shop .ld-product-card .ld-product-image.is-grok-symbol {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }
}

/* ==========================================================================
   218. 窄屏商品图固定尺寸（不依赖百分比）
   --------------------------------------------------------------------------
   根因（用 tools/img-rules.mjs 查出的）：
     容器 161×68，去掉 padding 后内容区只有 149×56；
     而 Codex 图被规则设成 118×118（!important）；
     `max-height: 100%` 在「容器高度由内容决定」时无法解析 → 被浏览器忽略，
     图片于是按宽度 149px 和自然比例 230:300 算出 194px 高，溢出 133px 被裁。

   结论：窄屏必须给固定像素，不能用 max-height: 100%。
     卡片 163×163 → 图容器内容区 149×56 → 方形图取 56px 才安全。
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1319px) {
  body.ld-shop .ld-product-card .ld-product-image img {
    max-height: 56px !important;
  }

  body.ld-shop .ld-product-card .ld-product-image.is-codex-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-relay-symbol img {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    aspect-ratio: 1 !important;
    object-fit: contain !important;
  }

  body.ld-shop .ld-product-card .ld-product-image.is-grok-symbol img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
  }
}

/* 平板 768~1023px 同理（卡片更窄） */
@media (min-width: 768px) and (max-width: 1023px) {
  body.ld-shop .ld-product-card .ld-product-image img {
    max-height: 64px !important;
  }

  body.ld-shop .ld-product-card .ld-product-image.is-codex-wordmark img,
  body.ld-shop .ld-product-card .ld-product-image.is-relay-symbol img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    aspect-ratio: 1 !important;
  }

  body.ld-shop .ld-product-card .ld-product-image.is-grok-symbol img {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
  }
}

/* ==========================================================================
   220. 侧栏最终尺寸：缝隙 20px + 侧栏 190px + 字号 14px（用户 2026-09-13 定稿）
   --------------------------------------------------------------------------
   两个视觉问题的根因：
     1. 缝隙过大：实测侧栏右边 → 商品左边 = 40px
        （margin-left 给了 16px，外壳内部又加了 24px）
     2. 顶部不对齐：侧栏首按钮 T84、资料区 T32，差 52px
        （侧栏 padding-top:84px 是按固定头部算的，但资料区从 T32 开始）

   宽度账：
     侧栏 190 + 缝隙 20 + 商品面板 1080 + 边距 24 = 1314px
     商品面板 1080 = 4×250 + 3×8(gap) + 2×12(网格padding) + 2×16(面板padding)
   → 视口 ≥1310px 显示侧栏（1310 是这个组合的下限，取整到 10）
   ========================================================================== */
@media (min-width: 1320px) {
  body.ld-shop .ld-cat-sidebar {
    width: 200px !important;
    /* 顶部与资料区对齐：资料区 top = 32px（外壳 margin-top 撑出），
       所以侧栏 padding-top 也取 32px，首按钮正好落在 T32。 */
    padding: 32px 8px 12px !important;
  }

  /* 分类项：按钮 48px、图标 26px、字号 14px */
  body.ld-shop .ld-cat-sidebar .tokyo-category-link,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    grid-template-rows: 52px !important;
    padding: 0 10px !important;
    gap: 10px !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link.is-active .tokyo-category-image,
  body.ld-shop .ld-cat-sidebar .tokyo-category-link:hover .tokyo-category-image {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    padding: 2px !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-name {
    font-size: 17px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body.ld-shop .ld-cat-sidebar .tokyo-category-count {
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 5px !important;
    font-size: 11px !important;
    line-height: 20px !important;
  }

  /* 缝隙：外壳左边距 = 侧栏宽 + 20px */
  body.ld-shop .ld-shop-shell,
  body.ld-shop .tokyo-shell,
  body.ld-shop .tokyo-footer-wrap {
    /* ⚠ 必须扣掉 .ld-main 的 padding-left: 24px！
       外壳的 margin 是相对 main 的内容盒算的，
       而 main 自己还有 24px 的左内边距 ——
       实测：margin-left 给 210px 时，实际左边界是 234px，缝隙变成 44px。
       所以目标缝隙 20px → margin-left = 190 + 20 - 24 = 186px。 */
    margin-left: calc(200px + 16px - 24px) !important;
  }
}

/* ==========================================================================
   221. 侧栏加同款外框 + 顶部与商品面板对齐
   --------------------------------------------------------------------------
   需求：
     1. 侧栏加与商品面板完全相同的外框（左右两个方框，视觉统一）
     2. 去掉侧栏顶部多余空白，让两个框的上边在同一条水平线上

   商品面板的实际样式（用 tools/tmp-style.mjs 读出来的计算值）：
     border: 1px solid rgb(223,231,241)   ← 即 #dfe7f1
     border-radius: 16px                  ← 注意不是 --r-lg(14px)，
                                            被 store-polish.css 覆盖成 16px
     background: #ffffff
     box-shadow: 0 8px 24px rgba(31,52,82,.055)

   做法：
     · 边框加在**侧栏容器**上（不是分类栏），这样容器整高都有一致的框
     · 侧栏 top: 0 + padding-top: 32px
       → 框的上边 = 32px，正好等于商品面板的 T32 ✓
     · 去掉顶部多余空白：原来 padding-top 是 84/88px（按固定头部估的），
       现在按商品面板的实际位置精确取 32px
     · 背景改透明，让 Sidebar 的白色来自框本身，避免框内外双层白
   ========================================================================== */
@media (min-width: 1332px) {
  body.ld-shop .ld-cat-sidebar {
    width: var(--cat-sidebar-w) !important;
    /* 上 32px：让外框上边与右侧资料区/商品面板的上边齐平（实测右侧也是 T32）
       左右 8px：分类项占满框内宽度，文字空间最大化
       下 12px：底部留白 */
    padding: 32px 8px 12px !important;
    border: 1px solid #dfe7f1 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(31, 52, 82, 0.055) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
  }

  /* 分类栏本体不再需要边框/背景（外框由容器提供） */
  body.ld-shop .ld-cat-sidebar .ld-category-bar {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 外壳左边距跟着加：侧栏实际占位 = 200(内容) + 32(左右padding) + 2(边框)
     目标缝隙仍为 16px */
  body.ld-shop .ld-shop-shell,
  body.ld-shop .tokyo-shell,
  body.ld-shop .tokyo-footer-wrap {
    margin-left: calc(200px + 16px - 24px) !important;
  }
}

/* ==========================================================================
   222. 商品详情页顶部按钮居中（手机端）
   --------------------------------------------------------------------------
   问题（店主 2026-09-13 反馈）：
     「返回商城」贴到屏幕最右边，看着像溢出。

   实测根因（product.css 第 19 段的媒体查询里）：
     .detail-site-header-inner { flex-wrap: wrap }
     .detail-site-actions {
       width: 100%;
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));  ← 关键
     }
   三个按钮被摊成三列、撑满整行宽度，最后一列必然顶到右边缘。

   修法：
     · 容器改成 flex + 居中（justify-content: center）
     · 按钮恢复「按内容宽度」自动排布，不再被拉伸
     · 加左右内边距，两边都留出安全距离

   ⚠ 必须用 !important 并写在最后：product.css 用的是
     repeat(3, minmax(0,1fr))，普通声明压不过它。
   ========================================================================== */
@media (max-width: 767px) {
  .detail-site-header-inner {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 10px !important;
  }

  .detail-site-actions {
    width: auto !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 auto !important;
  }

  /* 按钮按内容宽度排布，不再被 grid 拉伸 */
  .detail-site-actions .detail-store-link {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 10px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* 按钮文字在超窄屏（≤360px）略缩，保证三个能并排放下不溢出 */
  .detail-site-actions .detail-store-link {
    font-size: 12px !important;
  }
}

@media (max-width: 374px) {
  .detail-site-actions .detail-store-link {
    font-size: 11px !important;
    padding: 0 7px !important;
    gap: 4px !important;
  }

  .detail-site-actions .detail-store-link svg {
    width: 13px !important;
    height: 13px !important;
  }
}

/* ==========================================================================
   223. Grok 改用官方横版 wordmark（用户端）
   --------------------------------------------------------------------------
   背景：店主提供了官方 Grok 横版 logo（符号 + 品牌名）。
        之前用户端用的是「方形符号图 + 额外补的 Grok 文字」两段拼接，
        既不统一（其他品牌都是单张横版图），也多了维护成本。

   改动：
     · JS 里图片改成 /assets/grok-wordmark-cropped.png
     · CSS 类名从 is-grok-symbol 改成 is-grok-wordmark
     · 不再需要 .ld-brand-wordmark 文字标签（图里已含品牌名）

   规格：wordmark 原图 377×140（比例 2.69:1），透明背景黑色图形。
        按「不超过容器宽高」等比缩放即可，绝不裁切。

   ⚠ 必须放在文件末尾：前面有 30+ 条 is-grok-symbol 的历史规则，
     虽然类名已不同不会命中，但同段位还有针对 is-grok-symbol 的
     flex 布局残留，这里用更高特异性 + !important 一次性覆盖干净。
   ========================================================================== */

/* 商品卡（列表页） */
body.ld-shop .ld-product-card .ld-product-image.is-grok-wordmark {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

body.ld-shop .ld-product-card .ld-product-image.is-grok-wordmark img {
  width: auto !important;
  height: auto !important;
  max-width: 86% !important;
  max-height: 118px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

/* 商品详情页大图 */
body.ld-shop .product-summary-media.is-grok-wordmark {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

body.ld-shop .product-summary-media.is-grok-wordmark img {
  width: auto !important;
  height: auto !important;
  max-width: 86% !important;
  max-height: 148px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

/* 手机端：商品卡 */
@media (max-width: 767px) {
  body.ld-shop .ld-product-card .ld-product-image.is-grok-wordmark img {
    max-width: 92% !important;
    max-height: 84px !important;
  }

  /* 手机端：详情页大图 */
  body.ld-shop .product-summary-media.is-grok-wordmark img {
    max-width: 86% !important;
    max-height: 118px !important;
  }
}

/* 中等宽度（1024~1327px，卡片会收缩）：用固定小尺寸更稳 */
@media (min-width: 1024px) and (max-width: 1327px) {
  body.ld-shop .ld-product-card .ld-product-image.is-grok-wordmark img {
    max-width: 100% !important;
    max-height: 56px !important;
  }
}

/* 平板（768~1023px） */
@media (min-width: 768px) and (max-width: 1023px) {
  body.ld-shop .ld-product-card .ld-product-image.is-grok-wordmark img {
    max-width: 100% !important;
    max-height: 64px !important;
  }
}