/* ============================================================
   观境轩 · 绿植景观新零售平台 — 品牌视觉规范（共享样式）
   brand prefix: zhili
   tone: 自然轻奢 × 清新治愈 × 东方禅意 × 现代商务
   ============================================================ */

/* ---- 主色：深森绿（单一品牌色 + 明度阶） ---- */
:root {
  --zhili-primary-50:  #EDF5F0;
  --zhili-primary-100: #D7EAE0;
  --zhili-primary-200: #AED4C1;
  --zhili-primary-300: #80B89C;
  --zhili-primary-400: #559A79;
  --zhili-primary-500: #3A7D5F;
  --zhili-primary-600: #2C624B;
  --zhili-primary-700: #244F3D;
  --zhili-primary-800: #1D3F32;
  --zhili-primary-900: #163129;

  /* ---- 中性色：暖纸米白（东方禅意 / 治愈温润 / 轻奢暖调） ---- */
  --zhili-neutral-50:  #FBFAF6;
  --zhili-neutral-100: #F4F1E9;
  --zhili-neutral-200: #E9E3D5;
  --zhili-neutral-300: #D8CFBB;
  --zhili-neutral-400: #BCAE93;
  --zhili-neutral-500: #9D8E72;
  --zhili-neutral-600: #7E7057;
  --zhili-neutral-700: #615546;
  --zhili-neutral-800: #453C2F;
  --zhili-neutral-900: #2A241B;

  /* ---- 语义别名（浅色模式） ---- */
  --zhili-background: #F7F5EF;
  --zhili-foreground: #17211B;
  --zhili-card: #FFFFFF;
  --zhili-card-foreground: #17211B;
  --zhili-popover: #FFFFFF;
  --zhili-popover-foreground: #17211B;
  --zhili-primary: var(--zhili-primary-600);
  --zhili-primary-foreground: #FFFFFF;
  --zhili-muted: #EFEBE1;
  --zhili-muted-foreground: #66736A;
  --zhili-border: #E5E0D2;
  --zhili-input: #E5E0D2;
  --zhili-ring: var(--zhili-primary-400);

  /* ---- 状态色（仅语义状态） ---- */
  --state-success: #2E8B62;
  --state-warning: #C98A2E;
  --state-error: #C2493D;
  --state-info: #3A7D8C;

  /* ---- 圆角（克制） ---- */
  --zhili-radius-sm: 4px;
  --zhili-radius-md: 8px;
  --zhili-radius-lg: 16px;
  --zhili-radius-full: 9999px;

  /* ---- 字体 ---- */
  --font-display: "Songti SC", "Noto Serif SC", "STSong", "SimSun", serif;
  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- 阴影（静态面 alpha ≤ 0.05，悬浮层可更高） ---- */
  --zhili-shadow-sm: 0 1px 2px 0 rgba(23, 33, 27, 0.04);
  --zhili-shadow-md: 0 4px 14px 0 rgba(23, 33, 27, 0.05);
  --zhili-shadow-lg: 0 16px 40px 0 rgba(23, 33, 27, 0.10);
}

/* ---- 深色模式 ---- */
.dark {
  --zhili-background: #101A15;
  --zhili-foreground: #EAF1EC;
  --zhili-card: #17241E;
  --zhili-card-foreground: #EAF1EC;
  --zhili-popover: #1B2A22;
  --zhili-popover-foreground: #EAF1EC;
  --zhili-primary: #559A79;
  --zhili-primary-foreground: #FFFFFF;
  /* 深色模式下将品牌色阶整体反相：浅色阶转为深色底，深色阶转为亮色强调 */
  --zhili-primary-50:  #1B2A22;
  --zhili-primary-100: #22372A;
  --zhili-primary-200: #2C4634;
  --zhili-primary-300: #3A5A45;
  --zhili-primary-400: #4A7559;
  --zhili-primary-500: #559A79;
  --zhili-primary-600: #3F8C63;
  --zhili-primary-700: #6FB892;
  --zhili-primary-800: #8CCAA8;
  --zhili-primary-900: #B0E0C3;
  --zhili-muted: #223129;
  --zhili-muted-foreground: #93A49A;
  --zhili-border: #2A3A31;
  --zhili-input: #2A3A31;
  --zhili-ring: #559A79;

  --state-success: #4CAF7E;
  --state-warning: #DDA14A;
  --state-error: #E07065;
  --state-info: #5A9CA8;
}

html.light { color-scheme: light; }
html.dark { color-scheme: dark; }

/* ---- 基础 ---- */
html {
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}
body {
  background: var(--zhili-background);
  color: var(--zhili-foreground);
}

/* ---- 字体工具类 ---- */
.font-display { font-family: var(--font-display); }
.font-sans { font-family: var(--font-sans); }

/* ---- 图片加载失败占位：保留布局空间（防卡片塌陷），露出容器背景色，避免显示破图图标 ---- */
img.img-broken { opacity: 0; }

/* ---- 通用质感工具类 ---- */
.surface-card {
  background: var(--zhili-card);
  border: 1px solid var(--zhili-border);
  border-radius: var(--zhili-radius-lg);
  box-shadow: var(--zhili-shadow-sm);
}
.surface-soft {
  background: var(--zhili-muted);
  border: 1px solid var(--zhili-border);
  border-radius: var(--zhili-radius-lg);
}
.text-balance { text-wrap: balance; }
.gradient-hero {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(85, 154, 121, 0.18) 0%, rgba(85, 154, 121, 0) 55%),
    radial-gradient(100% 80% at 0% 100%, rgba(188, 174, 147, 0.20) 0%, rgba(188, 174, 147, 0) 50%),
    linear-gradient(165deg, var(--zhili-background) 0%, #F0F4EF 100%);
}

/* ---- 语义令牌 fallback（供 Tailwind 运行时之外兜底） ---- */
.bg-background { background-color: var(--zhili-background); }
.text-background { color: var(--zhili-background); }
.border-background { border-color: var(--zhili-background); }
.ring-background { --tw-ring-color: var(--zhili-background); }
.bg-foreground { background-color: var(--zhili-foreground); }
.text-foreground { color: var(--zhili-foreground); }
.border-foreground { border-color: var(--zhili-foreground); }
.ring-foreground { --tw-ring-color: var(--zhili-foreground); }
.bg-card { background-color: var(--zhili-card); }
.text-card { color: var(--zhili-card); }
.border-card { border-color: var(--zhili-card); }
.ring-card { --tw-ring-color: var(--zhili-card); }
.bg-card-foreground { background-color: var(--zhili-card-foreground); }
.text-card-foreground { color: var(--zhili-card-foreground); }
.border-card-foreground { border-color: var(--zhili-card-foreground); }
.ring-card-foreground { --tw-ring-color: var(--zhili-card-foreground); }
.bg-popover { background-color: var(--zhili-popover); }
.text-popover { color: var(--zhili-popover); }
.border-popover { border-color: var(--zhili-popover); }
.ring-popover { --tw-ring-color: var(--zhili-popover); }
.bg-popover-foreground { background-color: var(--zhili-popover-foreground); }
.text-popover-foreground { color: var(--zhili-popover-foreground); }
.border-popover-foreground { border-color: var(--zhili-popover-foreground); }
.ring-popover-foreground { --tw-ring-color: var(--zhili-popover-foreground); }
.bg-primary { background-color: var(--zhili-primary); }
.text-primary { color: var(--zhili-primary); }
.border-primary { border-color: var(--zhili-primary); }
.ring-primary { --tw-ring-color: var(--zhili-primary); }
.bg-primary-foreground { background-color: var(--zhili-primary-foreground); }
.text-primary-foreground { color: var(--zhili-primary-foreground); }
.border-primary-foreground { border-color: var(--zhili-primary-foreground); }
.ring-primary-foreground { --tw-ring-color: var(--zhili-primary-foreground); }
.bg-muted { background-color: var(--zhili-muted); }
.text-muted { color: var(--zhili-muted); }
.border-muted { border-color: var(--zhili-muted); }
.ring-muted { --tw-ring-color: var(--zhili-muted); }
.bg-muted-foreground { background-color: var(--zhili-muted-foreground); }
.text-muted-foreground { color: var(--zhili-muted-foreground); }
.border-muted-foreground { border-color: var(--zhili-muted-foreground); }
.ring-muted-foreground { --tw-ring-color: var(--zhili-muted-foreground); }
.bg-border { background-color: var(--zhili-border); }
.text-border { color: var(--zhili-border); }
.border-border { border-color: var(--zhili-border); }
.ring-border { --tw-ring-color: var(--zhili-border); }
.bg-input { background-color: var(--zhili-input); }
.text-input { color: var(--zhili-input); }
.border-input { border-color: var(--zhili-input); }
.ring-input { --tw-ring-color: var(--zhili-input); }
.bg-ring { background-color: var(--zhili-ring); }
.text-ring { color: var(--zhili-ring); }
.border-ring { border-color: var(--zhili-ring); }
.ring-ring { --tw-ring-color: var(--zhili-ring); }

/* ---- 通用工具 ---- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}

/* ---- 交互组件：Toast ---- */
.zhili-toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%) translateY(12px);
  z-index: 90;
  max-width: min(80vw, 320px);
  padding: 10px 16px;
  border-radius: var(--zhili-radius-full);
  background: var(--zhili-foreground);
  color: var(--zhili-background);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  box-shadow: var(--zhili-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.zhili-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- 交互组件：弹窗 Modal ---- */
.zhili-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 26, 21, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.zhili-modal-overlay.is-show { opacity: 1; }
.zhili-modal {
  width: 100%;
  max-width: 340px;
  background: var(--zhili-card);
  color: var(--zhili-card-foreground);
  border: 1px solid var(--zhili-border);
  border-radius: var(--zhili-radius-lg);
  box-shadow: var(--zhili-shadow-lg);
  padding: 20px;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.2s ease;
}
.zhili-modal-overlay.is-show .zhili-modal { transform: none; }
.zhili-modal-title { font-size: 16px; font-weight: 600; }
.zhili-modal-body { margin-top: 8px; font-size: 14px; color: var(--zhili-muted-foreground); line-height: 1.6; }
.zhili-modal-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--zhili-border);
  border-radius: var(--zhili-radius-md);
  background: var(--zhili-background);
  color: var(--zhili-foreground);
  font-size: 14px;
  outline: none;
}
.zhili-modal-input:focus { border-color: var(--zhili-primary); }
.zhili-modal-actions { margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end; }
.zhili-modal-actions button {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--zhili-radius-full);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.zhili-modal-actions button:active { opacity: 0.75; }
.zhili-modal-cancel {
  background: transparent;
  color: var(--zhili-muted-foreground);
  border: 1px solid var(--zhili-border);
}
.zhili-modal-confirm {
  background: var(--zhili-primary-600);
  color: var(--zhili-primary-foreground);
  border: 1px solid transparent;
}

/* ---- 交互组件：主题切换悬浮按钮 ---- */
.zhili-theme-fab {
  position: fixed;
  right: 14px;
  bottom: 84px;
  z-index: 60;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zhili-card);
  color: var(--zhili-foreground);
  border: 1px solid var(--zhili-border);
  box-shadow: var(--zhili-shadow-md);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.zhili-theme-fab:hover { transform: translateY(-1px); }
.zhili-theme-fab:active { transform: scale(0.94); }
.zhili-cart-fab-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--zhili-primary-600);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
}
.zhili-cart-fab-badge.hidden { display: none; }

/* ---- 交互组件：头部「更多 / 关闭」按钮 ---- */
[data-header-more],
[data-header-close] {
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
[data-header-more]:hover,
[data-header-close]:hover { background-color: var(--zhili-muted); }
[data-header-more]:active,
[data-header-close]:active { background-color: var(--zhili-primary-50); color: var(--zhili-primary); }

/* ---- 交互组件：底部操作菜单（Action Sheet） ---- */
.zhili-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: flex;
  align-items: flex-end;
  background: rgba(16, 26, 21, 0.4);
  backdrop-filter: blur(1px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.zhili-sheet-overlay.is-show { opacity: 1; }
.zhili-sheet {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: transparent;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.zhili-sheet-overlay.is-show .zhili-sheet { transform: none; }
.zhili-sheet-list {
  border-radius: var(--zhili-radius-lg);
  overflow: hidden;
  background: var(--zhili-card);
  border: 1px solid var(--zhili-border);
  box-shadow: var(--zhili-shadow-md);
}
.zhili-sheet-item {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--zhili-foreground);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.zhili-sheet-item + .zhili-sheet-item { border-top: 1px solid var(--zhili-border); }
.zhili-sheet-item:active { background-color: var(--zhili-muted); }
.zhili-sheet-item i { width: 18px; height: 18px; }
.zhili-sheet-cancel {
  width: 100%;
  height: 48px;
  margin-top: 10px;
  border-radius: var(--zhili-radius-lg);
  border: 1px solid var(--zhili-border);
  background: var(--zhili-card);
  color: var(--zhili-muted-foreground);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.zhili-sheet-cancel:active { background-color: var(--zhili-muted); }

/* ---- 交互组件：商品画廊缩略图 ---- */
[data-thumb] { cursor: pointer; transition: border-color 0.15s ease; }
[data-thumb].zhili-thumb-active { border-color: var(--zhili-primary) !important; }
[data-gallery] { cursor: grab; }
[data-gallery]:active { cursor: grabbing; }
[data-gallery] img { -webkit-user-drag: none; user-drag: none; user-select: none; }

/* ---- 交互组件：购物车抽屉 ---- */
.zhili-cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 86;
  display: flex;
  align-items: flex-end;
  background: rgba(16, 26, 21, 0.4);
  backdrop-filter: blur(1px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.zhili-cart-overlay.is-show { opacity: 1; }
.zhili-cart {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  background: var(--zhili-card);
  border-top-left-radius: var(--zhili-radius-lg);
  border-top-right-radius: var(--zhili-radius-lg);
  box-shadow: var(--zhili-shadow-lg);
  transform: translateY(100%);
  transition: transform 0.25s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.zhili-cart-overlay.is-show .zhili-cart { transform: none; }
.zhili-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--zhili-border);
}
.zhili-cart-header h3 { font-size: 16px; font-weight: 600; }
.zhili-cart-header button {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  color: var(--zhili-muted-foreground);
  border-radius: var(--zhili-radius-full);
}
.zhili-cart-header button:active { background: var(--zhili-muted); }
.zhili-cart-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zhili-cart-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px 0;
  color: var(--zhili-muted-foreground);
  font-size: 14px;
}
.zhili-cart-empty i { width: 36px; height: 36px; opacity: 0.5; }
.zhili-cart-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  border: 1px solid var(--zhili-border);
  border-radius: var(--zhili-radius-md);
  background: var(--zhili-card);
}
.zhili-cart-item-img {
  width: 56px; height: 56px;
  border-radius: var(--zhili-radius-md);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--zhili-primary-50);
}
.zhili-cart-item-img-empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--zhili-primary);
}
.zhili-cart-item-img-empty i { width: 22px; height: 22px; }
.zhili-cart-item-info { flex: 1; min-width: 0; }
.zhili-cart-item-name {
  font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zhili-cart-item-price { margin-top: 4px; font-size: 13px; color: var(--zhili-primary); font-weight: 600; }
.zhili-cart-item-qty { display: flex; align-items: center; gap: 2px; }
.zhili-cart-item-qty button {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--zhili-border);
  background: var(--zhili-card);
  border-radius: var(--zhili-radius-sm);
  cursor: pointer;
  font-size: 15px;
  color: var(--zhili-foreground);
}
.zhili-cart-item-qty button:active { background: var(--zhili-muted); }
.zhili-cart-item-qty span { min-width: 26px; text-align: center; font-size: 14px; }
.zhili-cart-item-del {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  color: var(--zhili-muted-foreground);
  border-radius: var(--zhili-radius-full);
}
.zhili-cart-item-del:hover { color: var(--state-error); }
.zhili-cart-item-del i { width: 16px; height: 16px; }
.zhili-cart-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--zhili-border);
}
.zhili-cart-total { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--zhili-muted-foreground); }
.zhili-cart-total-price { font-size: 20px; font-weight: 700; color: var(--zhili-primary); font-family: var(--font-display); }
.zhili-cart-checkout {
  height: 44px;
  padding: 0 28px;
  border-radius: var(--zhili-radius-full);
  border: none;
  background: var(--zhili-primary-600);
  color: var(--zhili-primary-foreground);
  font-size: 15px; font-weight: 500;
  cursor: pointer;
}
.zhili-cart-checkout:active { background: var(--zhili-primary-700); }

/* 结算面板：积分抵扣 + 优惠券 + 实付金额 */
.zhili-checkout-overlay {
  position: fixed; inset: 0; z-index: 87;
  display: flex; align-items: flex-end;
  background: rgba(16, 26, 21, 0.4);
  backdrop-filter: blur(1px);
  opacity: 0; transition: opacity 0.2s ease;
}
.zhili-checkout-overlay.is-show { opacity: 1; }
.zhili-checkout {
  width: 100%; max-width: 28rem; margin: 0 auto;
  max-height: 82vh; display: flex; flex-direction: column;
  background: var(--zhili-card);
  border-top-left-radius: var(--zhili-radius-lg);
  border-top-right-radius: var(--zhili-radius-lg);
  box-shadow: var(--zhili-shadow-lg);
  transform: translateY(100%); transition: transform 0.25s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.zhili-checkout-overlay.is-show .zhili-checkout { transform: none; }
.zhili-checkout-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--zhili-border);
}
.zhili-checkout-header h3 { font-size: 16px; font-weight: 600; }
.zhili-checkout-header button {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer; color: var(--zhili-muted-foreground);
  border-radius: var(--zhili-radius-full);
}
.zhili-checkout-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.zhili-checkout-goods { font-size: 13px; color: var(--zhili-muted-foreground); line-height: 1.5; }
.zhili-checkout-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.zhili-checkout-muted { color: var(--zhili-muted-foreground); font-size: 13px; }
.zhili-checkout-switch { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.zhili-checkout-switch input { width: 16px; height: 16px; accent-color: var(--zhili-primary); }
.zhili-checkout-row select {
  max-width: 55%; padding: 6px 8px; font-size: 13px;
  border: 1px solid var(--zhili-border); border-radius: var(--zhili-radius-md);
  background: var(--zhili-card); color: var(--zhili-foreground);
}
.zhili-checkout-total { border-top: 1px dashed var(--zhili-border); padding-top: 12px; }
.zhili-checkout-pay { font-size: 20px; font-weight: 700; color: var(--zhili-primary); font-family: var(--font-display); }
.zhili-checkout-items { display: flex; flex-direction: column; gap: 8px; }
.zhili-checkout-gift {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--zhili-radius-md);
  font-size: 12px; font-weight: 500; line-height: 1.5;
  color: var(--zhili-primary-700);
  background: linear-gradient(135deg, var(--zhili-primary-50), color-mix(in srgb, var(--zhili-primary-50) 60%, #FBF4E4));
  border: 1px solid color-mix(in srgb, var(--zhili-primary-200) 70%, var(--zhili-border));
}
.zhili-checkout-gift i { flex-shrink: 0; }
.zhili-checkout-item { padding: 8px 10px; border: 1px solid var(--zhili-border); border-radius: var(--zhili-radius-md); background: var(--zhili-muted); }
.zhili-checkout-item-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zhili-checkout-item-name { font-size: 13px; font-weight: 500; color: var(--zhili-foreground); }
.zhili-checkout-item-price { font-size: 13px; font-weight: 600; color: var(--zhili-primary); }
.zhili-checkout-item-mkt { margin-top: 6px; line-height: 1.8; }
.zhili-checkout-footer { padding: 12px 16px; border-top: 1px solid var(--zhili-border); }
.zhili-checkout-submit {
  width: 100%; height: 44px; border: none; border-radius: var(--zhili-radius-full);
  background: var(--zhili-primary-600); color: var(--zhili-primary-foreground);
  font-size: 15px; font-weight: 500; cursor: pointer;
}
.zhili-checkout-submit:active { background: var(--zhili-primary-700); }
.zhili-checkout-submit:disabled { opacity: 0.6; }

/* ---- 多端适配：平板 / 桌面 ---- */
@media (min-width: 768px) {
  body {
    background-image:
      radial-gradient(60% 50% at 12% 8%, rgba(85, 154, 121, 0.10) 0%, transparent 60%),
      radial-gradient(50% 42% at 88% 92%, rgba(188, 174, 147, 0.16) 0%, transparent 60%),
      linear-gradient(180deg, #F4F2EB 0%, #EDF1EC 100%);
    background-attachment: fixed;
  }
  html.dark body {
    background-image:
      radial-gradient(60% 50% at 12% 8%, rgba(85, 154, 121, 0.12) 0%, transparent 60%),
      radial-gradient(50% 42% at 88% 92%, rgba(188, 174, 147, 0.08) 0%, transparent 60%),
      linear-gradient(180deg, #0B130F 0%, #101A15 100%);
    background-attachment: fixed;
  }
  .zhili-theme-fab { right: 22px; bottom: 28px; }
}

/* ---- 全站自适应：主容器随载体（手机/平板/桌面）自动扩展 ----
   移动端保持原有窄容器；平板 ≥768px 与桌面 ≥1280px 分别放大内容宽度，
   使同一页面在手机、平板、电脑上均获得合理排版，避免桌面出现细长窄条。 */
@media (min-width: 768px) {
  main.max-w-md,
  main .max-w-md,
  body > header .max-w-md,
  [data-mobile-nav="global"] .max-w-md {
    max-width: 48rem;
  }
  /* 通用数据列表（订单/券包/工单/客户卡片等）：平板起双列排布 */
  main.max-w-md #data-list,
  main .max-w-md #data-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    align-items: start;
  }
  /* 商城精选商品 / 场景分区 / 礼赠券选购：平板起多列 */
  main.max-w-md #featured-list,
  main .max-w-md #featured-list,
  main.max-w-md #dg-product-box,
  main .max-w-md #dg-product-box,
  main.max-w-md #dg-products,
  main .max-w-md #dg-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    align-items: start;
  }
  main .max-w-md #scene-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  main.max-w-md,
  main .max-w-md,
  body > header .max-w-md,
  [data-mobile-nav="global"] .max-w-md {
    max-width: 64rem;
  }
  main.max-w-md #featured-list,
  main .max-w-md #featured-list,
  main.max-w-md #dg-products,
  main .max-w-md #dg-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- 无障碍焦点 ---- */
:where(a, button):focus-visible {
  outline: 2px solid var(--zhili-ring);
  outline-offset: 2px;
}

/* ---- 全局鼠标悬停兜底（桌面端） ----
   全站按钮/链接统一提供 hover 反馈：仅作用于未使用 Tailwind hover: 变体的元素，
   已精细定制的（如入口卡片、商品卡）保持原有悬停效果不受影响。
   移动端触屏不触发 hover，不影响原有点击态（:active）。 */
@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):not([class*="hover:"]),
  a[href]:not([class*="hover:"]) {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
  }
  button:not(:disabled):not([class*="hover:"]):hover { filter: brightness(0.94); }
  button:not(:disabled):not([class*="hover:"]):active { filter: brightness(0.9); }
  a[href]:not([class*="hover:"]):hover { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- 备案信息页脚（ICP 备案号 / 公安联网备案号 + 官方查询链接） ----
   由 assets/js/app.js renderBeianFooter 注入，数据来自系统设置，全站消费者页面统一展示 */
.zhili-beian {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 4px 4px;
  text-align: center;
  font-size: 11px;
  line-height: 1.6;
  color: var(--zhili-muted-foreground);
}
.zhili-beian a {
  color: var(--zhili-muted-foreground);
  text-decoration: none;
  word-break: break-all;
}
.zhili-beian a:hover { color: var(--zhili-primary); text-decoration: underline; }
.zhili-beian .zhili-beian-sep { opacity: 0.5; }

/* ===== 行操作按钮窄屏折叠：宽度不足时初始隐藏，仅保留「更多」按钮展开菜单 ===== */
.row-actions > [data-row-more] { display: none; }
/* 折叠态由 JS 按容器宽度给行加 .row-collapsed 控制（优于 viewport 媒体查询，桌面窄窗同样生效） */
.row-collapsed .row-actions > [data-toggle],
.row-collapsed .row-actions > [data-edit],
.row-collapsed .row-actions > [data-del],
.row-collapsed .row-actions > [data-lock] { display: none !important; }
.row-collapsed .row-actions > [data-row-more] { display: inline-flex !important; }
/* 行操作浮层菜单（窄屏「更多」展开） */
.zbl-row-menu {
  position: fixed; z-index: 60; min-width: 130px;
  background: var(--zhili-card, #fff);
  border: 1px solid var(--zhili-border, #e5e7eb);
  border-radius: var(--zhili-radius-md, 12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  padding: 4px;
}
.zbl-row-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; font-size: 13px; color: var(--zhili-foreground, #111);
  border-radius: 8px; text-align: left; background: transparent;
}
.zbl-row-menu button:hover { background: var(--zhili-muted, #f4f4f5); }
.zbl-row-menu button.zbl-danger { color: var(--state-error, #dc2626); }