/*
 * ShopCraft 店铺前台默认主题 — 设计令牌
 *
 * 与后台（admin/platform-admin，hue 268 品牌蓝）独立的消费级设计语言。
 * 见 DESIGN.md §8、docs/规范/店铺前台设计系统.md（唯一真源，改动需同步）。
 *
 * 本期为静态原型：变量以 :root 自定义属性实现（非 Tailwind @theme），
 * 未来转 Liquid 模板时可整体迁移为主题设置（theme settings）驱动。
 *
 * 不引外部字体 CDN（CSP 禁止），全部使用系统字体栈。
 */

:root {
  /* ================= 色彩：OKLCH，微偏暖橙 hue 40（区别于后台冷蓝 hue 268） ================= */

  /* 中性色阶 */
  --sc-color-canvas: oklch(0.98 0.004 60);          /* #f8f7f5 页面底色，暖白 */
  --sc-color-surface: oklch(0.995 0.002 60);        /* #fdfdfc 卡片/内容面 */
  --sc-color-surface-sunken: oklch(0.955 0.006 60);  /* #eeece9 内嵌区/输入底/次级区块 */
  --sc-color-header: oklch(0.995 0.002 60);          /* 页头背景（可切换深色见下） */

  --sc-color-fg: oklch(0.22 0.008 50);              /* #201d1a 正文 */
  --sc-color-fg-muted: oklch(0.48 0.01 50);         /* #6b625a 次要文字/描述 */
  --sc-color-fg-subtle: oklch(0.64 0.01 50);        /* #948b82 占位/禁用/辅助说明 */
  --sc-color-on-dark: oklch(0.98 0.004 60);         /* 深底上的文字 */

  --sc-color-border: oklch(0.90 0.006 55);          /* #ddd8d2 边框/分隔 */
  --sc-color-border-strong: oklch(0.82 0.008 55);   /* #c5beb5 强调边框 */

  /* 品牌主色：暖珊瑚橙（消费级、可信赖又有活力，区别于后台蓝） */
  --sc-color-primary: oklch(0.62 0.19 40);          /* #d9603f 主 CTA / 强调 */
  --sc-color-primary-hover: oklch(0.56 0.19 40);    /* #bf4f30 悬停 */
  --sc-color-primary-active: oklch(0.51 0.19 40);   /* #a8431f 按下 */
  --sc-color-primary-subtle: oklch(0.95 0.03 40);   /* #fbe9e1 浅底（标签/选中态） */
  --sc-color-on-primary: oklch(0.99 0.004 60);      /* 主色其上文字，近白 */

  /* 深色强调（页头/页脚可选深底，营造品牌质感），与主色同色系但更沉 */
  --sc-color-ink: oklch(0.24 0.02 45);              /* #2b2420 页脚深底 */
  --sc-color-ink-muted: oklch(0.55 0.015 50);       /* 深底上的次要文字 */
  --sc-color-ink-border: oklch(0.34 0.02 45);       /* 深底分隔线 */

  /* 语义状态色（成对：主色 + subtle 底，禁高饱和实心大色块） */
  --sc-color-success: oklch(0.55 0.13 155);
  --sc-color-success-subtle: oklch(0.95 0.035 155);
  --sc-color-warning: oklch(0.64 0.14 85);
  --sc-color-warning-subtle: oklch(0.96 0.045 85);
  --sc-color-destructive: oklch(0.55 0.20 25);
  --sc-color-destructive-subtle: oklch(0.96 0.03 25);

  /* 折扣/促销强调色（消费场景常用，独立于 destructive，避免"错误"联想） */
  --sc-color-sale: oklch(0.55 0.20 25);
  --sc-color-sale-subtle: oklch(0.96 0.03 25);

  /* ================= 字体：系统字体栈，不引 CDN ================= */
  --sc-font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    Helvetica, Arial, sans-serif;

  /* 排版阶（比率 ~1.25，比后台更疏朗——门面阅读场景而非密集工作台） */
  --sc-text-xs: 0.75rem;    /* 12px 版权/细则 */
  --sc-text-sm: 0.8125rem;  /* 13px 辅助说明/标签 */
  --sc-text-base: 0.9375rem;/* 15px 正文基准 */
  --sc-text-md: 1.0625rem;  /* 17px 商品卡标题 */
  --sc-text-lg: 1.25rem;    /* 20px 区块标题 */
  --sc-text-xl: 1.75rem;    /* 28px 页面级标题 */
  --sc-text-2xl: 2.5rem;    /* 40px hero 标题（移动端见媒体查询降级） */
  --sc-text-3xl: 3.25rem;   /* 52px hero 标题（桌面） */

  --sc-font-weight-normal: 400;
  --sc-font-weight-medium: 500;
  --sc-font-weight-semibold: 600;
  --sc-font-weight-bold: 700;

  --sc-leading-tight: 1.15;   /* 大标题 */
  --sc-leading-snug: 1.35;    /* 小标题 */
  --sc-leading-normal: 1.6;   /* 正文，门面阅读舒适度优先 */

  /* ================= 间距（4px 阶，比后台更慷慨的留白节奏） ================= */
  --sc-space-1: 0.25rem;  /* 4px */
  --sc-space-2: 0.5rem;   /* 8px */
  --sc-space-3: 0.75rem;  /* 12px */
  --sc-space-4: 1rem;     /* 16px */
  --sc-space-5: 1.5rem;   /* 24px */
  --sc-space-6: 2rem;     /* 32px */
  --sc-space-7: 3rem;     /* 48px */
  --sc-space-8: 4rem;     /* 64px */
  --sc-space-9: 6rem;     /* 96px：hero/大区块上下留白 */

  /* 容器宽度 */
  --sc-container-max: 80rem;      /* 1280px */
  --sc-container-padding: 1rem;   /* 移动默认边距，桌面媒体查询加大 */

  /* ================= 圆角 / 阴影 ================= */
  --sc-radius-sm: 0.375rem;  /* 6px 标签/输入 */
  --sc-radius-md: 0.625rem; /* 10px 按钮/商品卡（比后台略圆润，消费级更柔和） */
  --sc-radius-lg: 1rem;     /* 16px 大卡片/弹层 */
  --sc-radius-full: 999px;  /* 圆形（购物车角标/头像） */

  --sc-shadow-card: 0 1px 3px oklch(0.22 0.02 50 / 0.06), 0 1px 2px oklch(0.22 0.02 50 / 0.04);
  --sc-shadow-card-hover: 0 8px 20px oklch(0.22 0.02 50 / 0.10);
  --sc-shadow-popover: 0 12px 32px oklch(0.22 0.02 50 / 0.16);

  /* ================= 动效 ================= */
  --sc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sc-duration-fast: 150ms;
  --sc-duration-base: 220ms;

  /* ================= 层级 ================= */
  --sc-z-header: 40;
  --sc-z-dropdown: 50;
  --sc-z-modal: 100;
}

/* ================= 基础重置 & 全局 ================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sc-color-canvas);
  color: var(--sc-color-fg);
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-base);
  line-height: var(--sc-leading-normal);
  font-weight: var(--sc-font-weight-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* 页面 body 永不横滚，宽内容自身 overflow-x:auto 包裹 */
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

h1, h2, h3, h4, p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 图片占位（示例数据用，未来替换为真实商品图/懒加载） */
.sc-img-placeholder {
  background:
    linear-gradient(135deg, var(--sc-color-surface-sunken) 25%, transparent 25.5%, transparent 50%, var(--sc-color-surface-sunken) 50.5%, var(--sc-color-surface-sunken) 75%, transparent 75.5%, transparent);
  background-size: 16px 16px;
  background-color: var(--sc-color-surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sc-color-fg-subtle);
  font-size: var(--sc-text-xs);
  text-align: center;
}

.sc-container {
  max-width: var(--sc-container-max);
  margin: 0 auto;
  padding-left: var(--sc-container-padding);
  padding-right: var(--sc-container-padding);
}

@media (min-width: 768px) {
  :root {
    --sc-container-padding: 2rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --sc-container-padding: 3rem;
  }
}

.sc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================= 移动分值双端条件渲染：断点显隐开关（装修 D3-T6，口径12） =================
 *
 * section 实例有非空 mobile_settings 时，storefront 渲染管线
 * （app.storefront.render._render_section_with_breakpoints）会把该 section
 * 渲两遍：桌面变体加 class sc-bp-desktop、移动变体加 class sc-bp-mobile（各自
 * 独立的 #sc-section-{id} / #sc-section-{id}--m 作用域），这两条规则按视口宽度
 * 切换两个变体的显隐——766px 以下只显示移动变体，≥767px 只显示桌面变体。
 *
 * 767px 断点与 section 内既有的 `_mobile` 后缀键 media query（image-banner 等
 * 用 max-width:749px、theme.css 别处用 min-width:768px）对称（≥768 桌面、
 * <768 移动），但两套是**独立机制**，如实并存（口径10/12）：`_mobile` 后缀键
 * 是 schema 级独立 setting，同一次 SSR 输出里靠 CSS 自定义属性切换；这里的
 * sc-bp-* 是"整个 section 渲两份实例"级别的显隐切换，服务于 mobile_settings
 * 稀疏覆盖模型（蓝图决策3）。无 mobile_settings 的 section 不加 sc-bp-*
 * class，不受这两条规则影响（渲一遍，零开销）。
 */
.sc-bp-mobile {
  display: none;
}

@media (max-width: 767px) {
  .sc-bp-desktop {
    display: none;
  }

  .sc-bp-mobile {
    display: block;
  }
}

/* ================= 排版工具类 ================= */

.sc-eyebrow {
  font-size: var(--sc-text-xs);
  font-weight: var(--sc-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-color-primary);
}

.sc-heading-hero {
  font-size: var(--sc-text-2xl);
  line-height: var(--sc-leading-tight);
  font-weight: var(--sc-font-weight-bold);
  text-wrap: balance;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .sc-heading-hero {
    font-size: var(--sc-text-3xl);
  }
}

.sc-heading-section {
  font-size: var(--sc-text-xl);
  line-height: var(--sc-leading-tight);
  font-weight: var(--sc-font-weight-semibold);
  letter-spacing: -0.005em;
}

.sc-text-muted {
  color: var(--sc-color-fg-muted);
}

.sc-text-subtle {
  color: var(--sc-color-fg-subtle);
}

/* ================= 按钮（主 CTA 醒目；default/hover/focus/active/disabled/loading） ================= */

.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-2);
  height: 3rem;
  padding: 0 var(--sc-space-6);
  border-radius: var(--sc-radius-md);
  font-size: var(--sc-text-base);
  font-weight: var(--sc-font-weight-semibold);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--sc-duration-fast) var(--sc-ease-out),
    border-color var(--sc-duration-fast) var(--sc-ease-out),
    box-shadow var(--sc-duration-fast) var(--sc-ease-out),
    transform var(--sc-duration-fast) var(--sc-ease-out);
  white-space: nowrap;
}

.sc-btn:active {
  transform: translateY(1px);
}

.sc-btn:focus-visible {
  outline: 2px solid var(--sc-color-primary);
  outline-offset: 2px;
}

.sc-btn:disabled,
.sc-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* 主 CTA：全站最醒目的可点元素 */
.sc-btn-primary {
  background: var(--sc-color-primary);
  color: var(--sc-color-on-primary);
  box-shadow: 0 1px 2px oklch(0.22 0.02 50 / 0.08);
}

.sc-btn-primary:hover:not(:disabled) {
  background: var(--sc-color-primary-hover);
}

.sc-btn-primary:active:not(:disabled) {
  background: var(--sc-color-primary-active);
}

/* 次要按钮：描边 */
.sc-btn-outline {
  background: transparent;
  color: var(--sc-color-fg);
  border-color: var(--sc-color-border-strong);
}

.sc-btn-outline:hover:not(:disabled) {
  border-color: var(--sc-color-fg);
  background: var(--sc-color-surface-sunken);
}

/* 幽灵按钮：无边框，用于次级操作（如页头图标旁文字） */
.sc-btn-ghost {
  background: transparent;
  color: var(--sc-color-fg);
}

.sc-btn-ghost:hover:not(:disabled) {
  background: var(--sc-color-surface-sunken);
}

.sc-btn-sm {
  height: 2.25rem;
  padding: 0 var(--sc-space-4);
  font-size: var(--sc-text-sm);
}

.sc-btn-lg {
  height: 3.5rem;
  padding: 0 var(--sc-space-7);
  font-size: var(--sc-text-md);
}

.sc-btn-block {
  width: 100%;
}

/* loading 态：文字置换为占位圆点，禁用交互（JS 侧切 aria-busy + disabled） */
.sc-btn[aria-busy="true"] {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.sc-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--sc-color-on-primary);
  animation: sc-spin 0.7s linear infinite;
}

.sc-btn-outline[aria-busy="true"]::after,
.sc-btn-ghost[aria-busy="true"]::after {
  color: var(--sc-color-fg);
}

@keyframes sc-spin {
  to { transform: rotate(360deg); }
}

/* ================= 商品卡 ================= */

.sc-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sc-space-4);
}

@media (min-width: 640px) {
  .sc-product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sc-space-5);
  }
}

@media (min-width: 1024px) {
  .sc-product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sc-product-card {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-3);
  border-radius: var(--sc-radius-md);
  transition: transform var(--sc-duration-base) var(--sc-ease-out);
}

.sc-product-card:hover .sc-product-card__media {
  box-shadow: var(--sc-shadow-card-hover);
}

.sc-product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--sc-radius-md);
  overflow: hidden;
  box-shadow: var(--sc-shadow-card);
  transition: box-shadow var(--sc-duration-base) var(--sc-ease-out);
}

.sc-product-card__badge {
  position: absolute;
  top: var(--sc-space-3);
  left: var(--sc-space-3);
  background: var(--sc-color-sale-subtle);
  color: var(--sc-color-sale);
  font-size: var(--sc-text-xs);
  font-weight: var(--sc-font-weight-semibold);
  padding: 0.25rem 0.625rem;
  border-radius: var(--sc-radius-full);
}

.sc-product-card__quickadd {
  position: absolute;
  right: var(--sc-space-3);
  bottom: var(--sc-space-3);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--sc-duration-base) var(--sc-ease-out),
    transform var(--sc-duration-base) var(--sc-ease-out);
}

.sc-product-card:hover .sc-product-card__quickadd,
.sc-product-card:focus-within .sc-product-card__quickadd {
  opacity: 1;
  transform: translateY(0);
}

.sc-product-card__title {
  font-size: var(--sc-text-base);
  font-weight: var(--sc-font-weight-medium);
  color: var(--sc-color-fg);
  line-height: var(--sc-leading-snug);
}

.sc-product-card__meta {
  display: flex;
  align-items: baseline;
  gap: var(--sc-space-2);
  font-variant-numeric: tabular-nums;
}

.sc-product-card__price {
  font-size: var(--sc-text-md);
  font-weight: var(--sc-font-weight-semibold);
  color: var(--sc-color-fg);
}

.sc-product-card__price--compare {
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-subtle);
  text-decoration: line-through;
}

.sc-product-card__price--sale {
  color: var(--sc-color-sale);
}

/* 卡片级空态（如集合无商品） */
.sc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-3);
  padding: var(--sc-space-8) var(--sc-space-4);
  text-align: center;
  color: var(--sc-color-fg-muted);
}

/* ================= 表单 ================= */

.sc-field {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2);
  text-align: left;
}

.sc-label {
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-font-weight-medium);
  color: var(--sc-color-fg);
}

/* .sc-field 内联标签（结账/账户表单的 <span class="sc-field__label">，与 .sc-label 同款
   视觉，但语义上是包在 <label class="sc-field"> 里的行内文字块） */
.sc-field__label {
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-font-weight-medium);
  color: var(--sc-color-fg);
}

.sc-input {
  height: 2.75rem;
  padding: 0 var(--sc-space-4);
  border-radius: var(--sc-radius-sm);
  border: 1px solid var(--sc-color-border-strong);
  background: var(--sc-color-surface);
  color: var(--sc-color-fg);
  font-size: var(--sc-text-base);
  font-family: inherit;
  transition: border-color var(--sc-duration-fast) var(--sc-ease-out),
    box-shadow var(--sc-duration-fast) var(--sc-ease-out);
}

.sc-input::placeholder {
  color: var(--sc-color-fg-subtle);
}

.sc-input:hover {
  border-color: var(--sc-color-fg-subtle);
}

.sc-input:focus-visible {
  outline: none;
  border-color: var(--sc-color-primary);
  box-shadow: 0 0 0 3px var(--sc-color-primary-subtle);
}

.sc-input:disabled {
  background: var(--sc-color-surface-sunken);
  color: var(--sc-color-fg-subtle);
  cursor: not-allowed;
}

.sc-input[aria-invalid="true"] {
  border-color: var(--sc-color-destructive);
}

.sc-field__hint {
  font-size: var(--sc-text-xs);
  color: var(--sc-color-fg-subtle);
}

.sc-field__error {
  font-size: var(--sc-text-xs);
  color: var(--sc-color-destructive);
}

/* 搜索/邮箱输入 + 内联按钮的组合（页头搜索、newsletter） */
.sc-input-group {
  display: flex;
  gap: var(--sc-space-2);
}

.sc-input-group .sc-input {
  flex: 1;
  min-width: 0;
}

/* 邮件订阅诚实占位提示（装修 D6-T2b：订阅后端未上线，明示「即将上线」） */
.sc-newsletter__note {
  margin-top: var(--sc-space-3);
  font-size: var(--sc-text-sm);
}

/* ================= 页头 ================= */

.sc-header {
  position: sticky;
  top: 0;
  z-index: var(--sc-z-header);
  background: var(--sc-color-header);
  border-bottom: 1px solid var(--sc-color-border);
}

.sc-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sc-space-4);
  height: 4rem;
}

.sc-header__logo {
  font-size: var(--sc-text-lg);
  font-weight: var(--sc-font-weight-bold);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Logo 图片受页头约束（编辑器 P1）：max-height 钉死在 4rem 页头内，
   --sc-header-logo-size（「Logo 宽度」滑块）只作为最大宽度上限——任何
   比例的图按 contain 缩放，绝不撑爆页头高度。 */
.sc-header__logo--image {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.sc-header__logo--image img {
  max-height: 2.5rem;
  max-width: var(--sc-header-logo-size, 140px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.sc-header__nav {
  display: none;
  align-items: center;
  gap: var(--sc-space-6);
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-font-weight-medium);
}

.sc-header__nav a {
  color: var(--sc-color-fg-muted);
  transition: color var(--sc-duration-fast) var(--sc-ease-out);
}

.sc-header__nav a:hover,
.sc-header__nav a[aria-current="page"] {
  color: var(--sc-color-fg);
}

@media (min-width: 1024px) {
  .sc-header__nav {
    display: flex;
  }
}

.sc-header__spacer {
  flex: 1;
}

.sc-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sc-space-1);
}

.sc-header__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--sc-radius-sm);
  color: var(--sc-color-fg);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--sc-duration-fast) var(--sc-ease-out);
}

.sc-header__icon-btn:hover {
  background: var(--sc-color-surface-sunken);
}

.sc-header__icon-btn:focus-visible {
  outline: 2px solid var(--sc-color-primary);
  outline-offset: 2px;
}

/* 语言切换器（多语言前台 T1）：原生 <details> 下拉，无 JS 可展开切换。 */
.sc-header__lang {
  position: relative;
}
.sc-header__lang-btn {
  width: auto;
  gap: var(--sc-space-1);
  padding: 0 var(--sc-space-2);
  list-style: none;
}
.sc-header__lang-btn::-webkit-details-marker {
  display: none;
}
.sc-header__lang-current {
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-font-weight-medium);
}
.sc-header__lang-menu {
  position: absolute;
  top: calc(100% + var(--sc-space-1));
  right: 0;
  z-index: 30;
  min-width: 9rem;
  margin: 0;
  padding: var(--sc-space-1);
  list-style: none;
  background: var(--sc-color-surface);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-md);
  box-shadow: var(--sc-shadow-popover);
}
.sc-header__lang-menu a {
  display: block;
  padding: var(--sc-space-1) var(--sc-space-2);
  border-radius: var(--sc-radius-sm);
  color: var(--sc-color-fg);
  text-decoration: none;
  font-size: var(--sc-text-sm);
  white-space: nowrap;
}
.sc-header__lang-menu a:hover {
  background: var(--sc-color-surface-sunken);
}
.sc-header__lang-menu a.is-active {
  color: var(--sc-color-primary);
  font-weight: var(--sc-font-weight-semibold);
}

.sc-header__cart-count {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  background: var(--sc-color-primary);
  color: var(--sc-color-on-primary);
  border-radius: var(--sc-radius-full);
  font-size: 0.625rem;
  font-weight: var(--sc-font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.sc-header__currency {
  display: none;
  align-items: center;
  gap: var(--sc-space-1);
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-muted);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-sm);
  padding: 0.375rem var(--sc-space-2);
  background: transparent;
  cursor: pointer;
}

@media (min-width: 768px) {
  .sc-header__currency {
    display: inline-flex;
  }
}

/* 图标按钮禁用态（诚实占位：搜索/购物车此期无后端路由，disabled 不可点） */
.sc-header__icon-btn:disabled,
.sc-header__icon-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.sc-header__icon-btn:disabled:hover,
.sc-header__icon-btn[aria-disabled="true"]:hover {
  background: transparent;
}

/* 移动端菜单按钮（>=1024px 隐藏，用横向导航代替） */
.sc-header__menu-btn {
  display: inline-flex;
}

@media (min-width: 1024px) {
  .sc-header__menu-btn {
    display: none;
  }
}

/* 移动导航抽屉：<1024px 汉堡展开时把 .sc-header__nav 变为下拉面板 + 遮罩。
   桌面（>=1024px）nav 常显为横向、汉堡隐藏，本组规则不触发；跨断点即使
   is-nav-open 残留也无害（nav 走上面的 min-width 横向规则、遮罩保持隐藏）。
   .sc-header 为 sticky 定位上下文，抽屉 absolute top:100% 即贴在页头栏之下；
   遮罩用设计令牌派生的半透明底色（color-mix + --sc-color-ink），不硬编码颜色。 */
.sc-header__overlay {
  display: none;
}

@media (max-width: 1023.98px) {
  .sc-header.is-nav-open .sc-header__nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--sc-color-header);
    border-bottom: 1px solid var(--sc-color-border);
    box-shadow: var(--sc-shadow-popover);
    padding: var(--sc-space-2) 0;
    font-size: var(--sc-text-base);
    z-index: 2;
  }

  .sc-header.is-nav-open .sc-header__nav a {
    padding: var(--sc-space-3) var(--sc-container-padding);
  }

  .sc-header.is-nav-open .sc-header__nav a:hover,
  .sc-header.is-nav-open .sc-header__nav a[aria-current="page"] {
    background: var(--sc-color-surface-sunken);
    color: var(--sc-color-fg);
  }

  .sc-header.is-nav-open .sc-header__overlay {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 4rem;
    bottom: 0;
    background: color-mix(in oklab, var(--sc-color-ink) 45%, transparent);
    z-index: 1;
  }
}

/* ================= 页脚 ================= */

.sc-footer {
  background: var(--sc-color-ink);
  color: var(--sc-color-on-dark);
  padding: var(--sc-space-8) 0 var(--sc-space-5);
}

.sc-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sc-space-6);
}

@media (min-width: 768px) {
  .sc-footer__grid {
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--sc-space-5);
  }
}

.sc-footer__brand {
  font-size: var(--sc-text-lg);
  font-weight: var(--sc-font-weight-bold);
  margin-bottom: var(--sc-space-3);
}

.sc-footer__desc {
  color: var(--sc-color-ink-muted);
  font-size: var(--sc-text-sm);
  max-width: 28rem;
}

.sc-footer__heading {
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-font-weight-semibold);
  margin-bottom: var(--sc-space-3);
  color: var(--sc-color-on-dark);
}

.sc-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-3);
}

.sc-footer__links a {
  font-size: var(--sc-text-sm);
  color: var(--sc-color-ink-muted);
  transition: color var(--sc-duration-fast) var(--sc-ease-out);
}

.sc-footer__links a:hover {
  color: var(--sc-color-on-dark);
}

.sc-footer__newsletter-form {
  display: flex;
  gap: var(--sc-space-2);
  margin-top: var(--sc-space-3);
}

.sc-footer__newsletter-form .sc-input {
  background: var(--sc-color-ink);
  border-color: var(--sc-color-ink-border);
  color: var(--sc-color-on-dark);
}

.sc-footer__newsletter-form .sc-input::placeholder {
  color: var(--sc-color-ink-muted);
}

.sc-footer__bottom {
  margin-top: var(--sc-space-7);
  padding-top: var(--sc-space-5);
  border-top: 1px solid var(--sc-color-ink-border);
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-4);
}

@media (min-width: 768px) {
  .sc-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.sc-footer__copyright {
  font-size: var(--sc-text-xs);
  color: var(--sc-color-ink-muted);
}

.sc-footer__payments {
  display: flex;
  align-items: center;
  gap: var(--sc-space-2);
}

.sc-footer__payment-icon {
  height: 1.5rem;
  padding: 0 var(--sc-space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sc-radius-sm);
  background: var(--sc-color-surface);
  color: var(--sc-color-ink);
  font-size: 0.625rem;
  font-weight: var(--sc-font-weight-semibold);
  letter-spacing: 0.02em;
}

/* ================= 信任要素条 ================= */

.sc-trust-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sc-space-5);
  padding: var(--sc-space-6) 0;
}

@media (min-width: 640px) {
  .sc-trust-bar {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sc-trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-space-3);
}

.sc-trust-item__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--sc-radius-full);
  background: var(--sc-color-primary-subtle);
  color: var(--sc-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-trust-item__title {
  font-size: var(--sc-text-base);
  font-weight: var(--sc-font-weight-semibold);
}

.sc-trust-item__desc {
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-muted);
}

/* ================= Section 通用间距 ================= */

.sc-section {
  padding: var(--sc-section-pad-y, var(--sc-space-7)) 0;
}

@media (min-width: 768px) {
  .sc-section {
    padding: var(--sc-section-pad-y-lg, var(--sc-space-9)) 0;
  }
}

.sc-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sc-space-3);
  margin-bottom: var(--sc-space-5);
}

/* ================= 账户中心：Tabs / 表格 / 地址卡 / 状态徽章 ================= */

.sc-account-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sc-space-6);
}

@media (min-width: 900px) {
  .sc-account-layout {
    grid-template-columns: 15rem 1fr;
    align-items: start;
  }
}

/* 侧边 tabs（移动端横向滚动的分段控件，桌面端纵向列表） */
.sc-account-tabs {
  display: flex;
  gap: var(--sc-space-2);
  overflow-x: auto;
  padding-bottom: var(--sc-space-2);
}

@media (min-width: 900px) {
  .sc-account-tabs {
    flex-direction: column;
    overflow-x: visible;
    padding-bottom: 0;
    position: sticky;
    top: calc(4rem + var(--sc-space-6));
  }
}

.sc-account-tabs a {
  display: flex;
  align-items: center;
  gap: var(--sc-space-2);
  padding: var(--sc-space-3) var(--sc-space-4);
  border-radius: var(--sc-radius-sm);
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-font-weight-medium);
  color: var(--sc-color-fg-muted);
  white-space: nowrap;
  transition: background-color var(--sc-duration-fast) var(--sc-ease-out),
    color var(--sc-duration-fast) var(--sc-ease-out);
}

.sc-account-tabs a:hover {
  background: var(--sc-color-surface-sunken);
  color: var(--sc-color-fg);
}

.sc-account-tabs a[aria-current="page"] {
  background: var(--sc-color-primary-subtle);
  color: var(--sc-color-primary);
}

.sc-account-tabs a:focus-visible {
  outline: 2px solid var(--sc-color-primary);
  outline-offset: 2px;
}

/* 卡片容器（账户概览/地址卡/表单卡通用） */
.sc-card {
  background: var(--sc-color-surface);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-md);
  padding: var(--sc-space-5);
}

.sc-card__title {
  font-size: var(--sc-text-md);
  font-weight: var(--sc-font-weight-semibold);
  margin-bottom: var(--sc-space-1);
}

/* 状态徽章（订单状态等，subtle 底 + 主色文字，禁高饱和实心色块） */
.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-1);
  padding: 0.25rem 0.625rem;
  border-radius: var(--sc-radius-full);
  font-size: var(--sc-text-xs);
  font-weight: var(--sc-font-weight-semibold);
  white-space: nowrap;
}

.sc-badge--success {
  background: var(--sc-color-success-subtle);
  color: var(--sc-color-success);
}

.sc-badge--warning {
  background: var(--sc-color-warning-subtle);
  color: var(--sc-color-warning);
}

.sc-badge--destructive {
  background: var(--sc-color-destructive-subtle);
  color: var(--sc-color-destructive);
}

.sc-badge--neutral {
  background: var(--sc-color-surface-sunken);
  color: var(--sc-color-fg-muted);
}

/* 数据表格（订单历史等；窄屏横向滚动包裹，body 永不横滚） */
.sc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-md);
}

.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sc-text-sm);
  min-width: 36rem;
}

.sc-table thead th {
  text-align: left;
  font-weight: var(--sc-font-weight-medium);
  color: var(--sc-color-fg-muted);
  background: var(--sc-color-surface-sunken);
  padding: var(--sc-space-3) var(--sc-space-4);
  white-space: nowrap;
}

.sc-table tbody td {
  padding: var(--sc-space-3) var(--sc-space-4);
  border-top: 1px solid var(--sc-color-border);
  color: var(--sc-color-fg);
  vertical-align: middle;
}

.sc-table tbody tr:hover {
  background: var(--sc-color-surface-sunken);
}

.sc-table .sc-table__num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sc-table__link {
  color: var(--sc-color-primary);
  font-weight: var(--sc-font-weight-medium);
}

.sc-table__link:hover {
  text-decoration: underline;
}

/* 地址簿卡片网格 */
.sc-address-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sc-space-4);
}

@media (min-width: 640px) {
  .sc-address-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sc-address-card {
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-md);
  padding: var(--sc-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2);
}

.sc-address-card--dashed {
  border-style: dashed;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--sc-color-fg-muted);
  min-height: 9rem;
  gap: var(--sc-space-3);
}

.sc-address-card__actions {
  display: flex;
  gap: var(--sc-space-4);
  margin-top: var(--sc-space-2);
  font-size: var(--sc-text-sm);
}

.sc-address-card__actions button {
  background: none;
  border: none;
  padding: 0;
  color: var(--sc-color-fg-muted);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.sc-address-card__actions button:hover {
  color: var(--sc-color-primary);
  text-decoration: underline;
}

.sc-address-card__actions button.sc-address-card__actions--danger:hover {
  color: var(--sc-color-destructive);
}

/* 快捷入口网格（账户概览） */
.sc-quicklink-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sc-space-3);
}

@media (min-width: 640px) {
  .sc-quicklink-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sc-quicklink {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-space-3);
  padding: var(--sc-space-4);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-md);
  transition: border-color var(--sc-duration-fast) var(--sc-ease-out),
    box-shadow var(--sc-duration-fast) var(--sc-ease-out);
}

.sc-quicklink:hover {
  border-color: var(--sc-color-border-strong);
  box-shadow: var(--sc-shadow-card);
}

.sc-quicklink__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--sc-radius-sm);
  background: var(--sc-color-primary-subtle);
  color: var(--sc-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-quicklink__label {
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-font-weight-medium);
  color: var(--sc-color-fg);
}

/* 表单卡（登录/注册） */
.sc-auth-card {
  max-width: 26rem;
  margin: 0 auto;
  width: 100%;
}

.sc-auth-switch {
  text-align: center;
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-muted);
  margin-top: var(--sc-space-5);
}

.sc-auth-switch a {
  color: var(--sc-color-primary);
  font-weight: var(--sc-font-weight-medium);
}

.sc-auth-switch a:hover {
  text-decoration: underline;
}

.sc-divider-text {
  display: flex;
  align-items: center;
  gap: var(--sc-space-3);
  color: var(--sc-color-fg-subtle);
  font-size: var(--sc-text-xs);
  margin: var(--sc-space-5) 0;
}

.sc-divider-text::before,
.sc-divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sc-color-border);
}

/* ================= 页面标题（购物车/结账等功能页共用） ================= */

.sc-page-header {
  padding: var(--sc-space-6) 0 var(--sc-space-5);
}

.sc-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sc-space-2);
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-subtle);
  margin-bottom: var(--sc-space-3);
}

.sc-breadcrumb a {
  color: var(--sc-color-fg-muted);
  transition: color var(--sc-duration-fast) var(--sc-ease-out);
}

.sc-breadcrumb a:hover {
  color: var(--sc-color-fg);
}

.sc-page-title {
  font-size: var(--sc-text-xl);
  font-weight: var(--sc-font-weight-bold);
  line-height: var(--sc-leading-tight);
  letter-spacing: -0.01em;
}

/* ================= 购物车 ================= */

.sc-cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sc-space-7);
  align-items: start;
}

@media (min-width: 1024px) {
  .sc-cart-layout {
    grid-template-columns: 1fr 22rem;
  }
}

.sc-cart-list {
  display: flex;
  flex-direction: column;
}

.sc-cart-line {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--sc-space-4);
  padding: var(--sc-space-5) 0;
  border-bottom: 1px solid var(--sc-color-border);
}

.sc-cart-line:first-child {
  padding-top: 0;
}

.sc-cart-line__media {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--sc-radius-md);
  overflow: hidden;
}

.sc-cart-line__body {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2);
  min-width: 0;
}

.sc-cart-line__top {
  display: flex;
  justify-content: space-between;
  gap: var(--sc-space-3);
}

.sc-cart-line__title {
  font-size: var(--sc-text-base);
  font-weight: var(--sc-font-weight-medium);
  color: var(--sc-color-fg);
  line-height: var(--sc-leading-snug);
}

.sc-cart-line__variant {
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-subtle);
}

.sc-cart-line__unit-price {
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-muted);
  font-variant-numeric: tabular-nums;
}

.sc-cart-line__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sc-space-3);
  margin-top: auto;
}

.sc-cart-line__subtotal {
  font-size: var(--sc-text-md);
  font-weight: var(--sc-font-weight-semibold);
  color: var(--sc-color-fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 数量增减器 */
.sc-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--sc-color-border-strong);
  border-radius: var(--sc-radius-sm);
  height: 2.25rem;
  overflow: hidden;
}

.sc-qty__btn {
  width: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--sc-color-fg);
  cursor: pointer;
  font-size: var(--sc-text-base);
  transition: background-color var(--sc-duration-fast) var(--sc-ease-out);
}

.sc-qty__btn:hover:not(:disabled) {
  background: var(--sc-color-surface-sunken);
}

.sc-qty__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sc-qty__btn:focus-visible {
  outline: 2px solid var(--sc-color-primary);
  outline-offset: -2px;
}

.sc-qty__input {
  width: 2.75rem;
  border: none;
  border-left: 1px solid var(--sc-color-border-strong);
  border-right: 1px solid var(--sc-color-border-strong);
  text-align: center;
  font-size: var(--sc-text-base);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--sc-color-fg);
  background: var(--sc-color-surface);
  -moz-appearance: textfield;
}

.sc-qty__input::-webkit-outer-spin-button,
.sc-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sc-qty__input:focus-visible {
  outline: none;
  background: var(--sc-color-primary-subtle);
}

.sc-cart-line__remove {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-1);
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-subtle);
  background: transparent;
  border: none;
  padding: var(--sc-space-1) 0;
  cursor: pointer;
  transition: color var(--sc-duration-fast) var(--sc-ease-out);
}

.sc-cart-line__remove:hover {
  color: var(--sc-color-destructive);
}

.sc-cart-line__remove:focus-visible {
  outline: 2px solid var(--sc-color-primary);
  outline-offset: 2px;
  border-radius: var(--sc-radius-sm);
}

/* 缺货/低库存提示行 */
.sc-cart-line__stock-note {
  font-size: var(--sc-text-xs);
  color: var(--sc-color-warning);
  display: flex;
  align-items: center;
  gap: var(--sc-space-1);
}

/* 购物车空态 */
.sc-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-4);
  padding: var(--sc-space-9) var(--sc-space-4);
  text-align: center;
}

.sc-cart-empty__icon {
  width: 4rem;
  height: 4rem;
  border-radius: var(--sc-radius-full);
  background: var(--sc-color-surface-sunken);
  color: var(--sc-color-fg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 订单摘要 / 结算面板（购物车 + 结账共用） */
.sc-summary {
  background: var(--sc-color-surface);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-lg);
  padding: var(--sc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-4);
}

.sc-summary__title {
  font-size: var(--sc-text-md);
  font-weight: var(--sc-font-weight-semibold);
}

.sc-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-3);
  font-size: var(--sc-text-base);
  color: var(--sc-color-fg-muted);
  font-variant-numeric: tabular-nums;
}

.sc-summary__row-value {
  color: var(--sc-color-fg);
  font-weight: var(--sc-font-weight-medium);
}

.sc-summary__row--discount .sc-summary__row-value {
  color: var(--sc-color-sale);
}

.sc-summary__divider {
  border: none;
  border-top: 1px solid var(--sc-color-border);
  margin: 0;
}

.sc-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sc-space-3);
}

.sc-summary__total-label {
  font-size: var(--sc-text-base);
  font-weight: var(--sc-font-weight-semibold);
  color: var(--sc-color-fg);
}

.sc-summary__total-value {
  font-size: var(--sc-text-lg);
  font-weight: var(--sc-font-weight-bold);
  color: var(--sc-color-fg);
  font-variant-numeric: tabular-nums;
}

.sc-summary__total-currency {
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-font-weight-medium);
  color: var(--sc-color-fg-subtle);
  margin-left: var(--sc-space-1);
}

.sc-summary__hint {
  font-size: var(--sc-text-xs);
  color: var(--sc-color-fg-subtle);
}

.sc-summary__error {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-space-2);
  padding: var(--sc-space-3);
  background: var(--sc-color-destructive-subtle);
  color: var(--sc-color-destructive);
  border-radius: var(--sc-radius-sm);
  font-size: var(--sc-text-sm);
}

/* 优惠码输入行：正常 / 已应用成功态 */
.sc-promo-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-3);
  padding: var(--sc-space-3) var(--sc-space-4);
  background: var(--sc-color-success-subtle);
  color: var(--sc-color-success);
  border-radius: var(--sc-radius-sm);
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-font-weight-medium);
}

.sc-promo-applied__remove {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0;
}

.sc-promo-applied__remove:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: var(--sc-radius-sm);
}

/* 安全/信任提示（购物车用，靠近 CTA；结账页 CO-7 T1 定稿改用下方 .sc-notice
   诚实 sandbox 免责声明，见 _checkout_html docstring） */
.sc-trust-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-2);
  font-size: var(--sc-text-xs);
  color: var(--sc-color-fg-subtle);
  text-align: center;
}

/* 图标 + 文字的小型说明框（sunken 底），结账摘要栏 sandbox 免责声明首用，
   CO-7 定稿原型 .notice 组件对应令牌 */
.sc-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-space-2);
  padding: var(--sc-space-3) var(--sc-space-4);
  background: var(--sc-color-surface-sunken);
  border-radius: var(--sc-radius-sm);
  font-size: var(--sc-text-xs);
  color: var(--sc-color-fg-muted);
  line-height: var(--sc-leading-snug);
}

.sc-notice svg {
  flex-shrink: 0;
  color: var(--sc-color-fg-subtle);
  margin-top: 0.1rem;
}

/* ================= 结账页（1/2/3 页式：进度条 + 左表单/右摘要，CO-7 T1 定稿） ================= */

.sc-checkout {
  padding: var(--sc-space-6) 0 var(--sc-space-8);
  /* 白底 scoped（CO-7 定稿"canvas=#fff"）：只在这一个容器局部覆写
     --sc-color-canvas 并用它给自己上色——不改 :root，商品/集合等其它 storefront
     页面全局仍是暖白（见 app/storefront/checkout_routes.py::_checkout_html
     docstring 的口径说明）。 */
  --sc-color-canvas: #fff;
  background: var(--sc-color-canvas);
}

/* 结账表单级错误横幅（校验失败无 JS 重渲染时置于表单顶部，destructive subtle 底） */
.sc-checkout__error {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-space-2);
  padding: var(--sc-space-3) var(--sc-space-4);
  background: var(--sc-color-destructive-subtle);
  color: var(--sc-color-destructive);
  border-radius: var(--sc-radius-sm);
  font-size: var(--sc-text-sm);
}

.sc-checkout__error svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* 结账页副标题（仅游客态"已有账户？登录"，见 _checkout_html docstring） */
.sc-checkout__subtitle {
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-muted);
  margin-top: var(--sc-space-2);
}

.sc-checkout__subtitle a {
  color: var(--sc-color-primary);
  font-weight: var(--sc-font-weight-medium);
}

.sc-checkout__subtitle a:hover {
  text-decoration: underline;
}

/* "返回购物车" / 步骤间"返回上一步"链接（左列表单下方，CO-7 T1 定稿位置——
   同定稿原型 .back-link，不在右侧摘要栏里） */
.sc-checkout__back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-2);
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-muted);
  margin-top: var(--sc-space-4);
}

.sc-checkout__back-link:hover {
  color: var(--sc-color-primary);
}

.sc-checkout__back-link:focus-visible {
  outline: 2px solid var(--sc-color-primary);
  outline-offset: 2px;
  border-radius: var(--sc-radius-sm);
}

/* ---- 订单完成感谢页 / 持久订单状态页（CO-7 T2：勾选圆 + 摘要/地址/邮件注 + CTA，
   映射定稿原型 .thanks/.checkmark/.cta-row，复用 .sc-summary/.sc-address-card/.sc-notice/.sc-badge） ---- */

/* 窄栏面板（支付步骤页 / 单列订单页）——设计令牌收敛宽度居中，替代页面级内联 max-width */
.sc-checkout__panel {
  max-width: 36rem;
  margin-inline: auto;
}

/* 感谢页居中容器（定稿 .thanks） */
.sc-order-confirm {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

/* 成功勾选圆（定稿 .checkmark：success-subtle 底 + success 勾） */
.sc-order-confirm__icon {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: var(--sc-radius-full);
  background: var(--sc-color-success-subtle);
  color: var(--sc-color-success);
  display: grid;
  place-items: center;
  margin: var(--sc-space-2) auto var(--sc-space-5);
}

.sc-order-confirm__lede {
  color: var(--sc-color-fg-muted);
  font-size: var(--sc-text-base);
  line-height: var(--sc-leading-normal);
  margin-top: var(--sc-space-3);
}

.sc-order-confirm__onum {
  color: var(--sc-color-fg-muted);
  font-size: var(--sc-text-sm);
  margin-top: var(--sc-space-3);
}

.sc-order-confirm__onum b {
  color: var(--sc-color-fg);
  font-variant-numeric: tabular-nums;
}

/* 订单明细卡组（摘要 + 地址 + 邮件注）——纵向堆叠，内容左对齐（容器可能居中） */
.sc-order-detail {
  max-width: 30rem;
  margin: var(--sc-space-6) auto 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-4);
}

.sc-order-detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-2);
  margin-bottom: var(--sc-space-3);
}

.sc-order-detail__label {
  font-weight: var(--sc-font-weight-semibold);
  font-size: var(--sc-text-sm);
}

.sc-order-detail__address {
  font-style: normal;
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-muted);
  line-height: var(--sc-leading-normal);
}

/* 物流追踪块（订单状态页已发货时）：定义列表 label/value 两列小行 */
.sc-order-detail__track {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2);
  margin: 0;
  font-size: var(--sc-text-sm);
}

.sc-order-detail__track-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sc-space-4);
}

.sc-order-detail__track-row dt {
  color: var(--sc-color-fg-muted);
}

.sc-order-detail__track-row dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sc-order-detail__track-link {
  color: var(--sc-color-primary);
  font-weight: var(--sc-font-weight-medium);
}

.sc-order-detail__track-link:hover {
  text-decoration: underline;
}

/* 订单进度时间线（真实 OrderEvent） */
.sc-order-detail__timeline {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-3);
}

.sc-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2);
}

.sc-timeline__item {
  display: flex;
  justify-content: space-between;
  gap: var(--sc-space-4);
  font-size: var(--sc-text-sm);
  padding-left: var(--sc-space-4);
  position: relative;
}

/* 时间线圆点（珊瑚橙），靠左对齐每条 */
.sc-timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--sc-radius-full);
  background: var(--sc-color-primary);
}

.sc-timeline__when {
  color: var(--sc-color-fg-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- 商品搜索页（GET /search：表单 + .sc-product-grid 结果网格复用） ---- */

.sc-search__form {
  max-width: 32rem;
  margin-bottom: var(--sc-space-6);
}

.sc-search__hint {
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-muted);
  margin-bottom: var(--sc-space-5);
}

.sc-search__grid {
  margin-bottom: var(--sc-space-5);
}

/* 分页导航（集合详情页 + 搜索页共用，集合/搜索分页期） */
.sc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-4);
  margin-top: var(--sc-space-6);
  flex-wrap: wrap;
}

.sc-pagination__info {
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-muted);
  font-variant-numeric: tabular-nums;
}

/* 订单状态页头部 meta（状态徽章 + 下单时间） */
.sc-order-status__meta {
  display: flex;
  align-items: center;
  gap: var(--sc-space-2);
  flex-wrap: wrap;
  margin-top: var(--sc-space-2);
}

.sc-order-status__placed {
  color: var(--sc-color-fg-muted);
  font-size: var(--sc-text-sm);
}

/* 行动号召按钮行（感谢页 .sc-order-confirm 内居中；订单状态页窄栏内亦居中） */
.sc-cta-row {
  display: flex;
  gap: var(--sc-space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sc-space-6);
}

/* 步骤进度条（CO-7 T1：SSR 留空 + hidden，JS 按 checkout_page_style 填充/显隐——
   [hidden] 覆写是必须的，普通 UA [hidden]{display:none} 规则 specificity 与本
   class 相同，author 来源仍会赢，不显式覆写会一直显示空进度条容器） */
.sc-steps {
  display: flex;
  align-items: center;
  gap: var(--sc-space-2);
  margin-bottom: var(--sc-space-6);
  font-size: var(--sc-text-sm);
  flex-wrap: wrap;
}

.sc-steps[hidden] {
  display: none;
}

.sc-steps__item {
  display: flex;
  align-items: center;
  gap: var(--sc-space-2);
  color: var(--sc-color-fg-subtle);
}

.sc-steps__item[aria-current="step"] {
  color: var(--sc-color-fg);
  font-weight: var(--sc-font-weight-semibold);
}

.sc-steps__item--done {
  color: var(--sc-color-fg-muted);
}

.sc-steps__badge {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--sc-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sc-text-xs);
  font-weight: var(--sc-font-weight-semibold);
  background: var(--sc-color-surface-sunken);
  color: var(--sc-color-fg-subtle);
  flex-shrink: 0;
}

.sc-steps__item[aria-current="step"] .sc-steps__badge {
  background: var(--sc-color-primary);
  color: var(--sc-color-on-primary);
}

.sc-steps__item--done .sc-steps__badge {
  background: var(--sc-color-primary-subtle);
  color: var(--sc-color-primary);
}

.sc-steps__sep {
  width: 1.5rem;
  height: 1px;
  background: var(--sc-color-border);
  flex-shrink: 0;
}

.sc-checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sc-space-7);
  align-items: start;
}

@media (min-width: 1024px) {
  .sc-checkout-layout {
    grid-template-columns: 1fr 24rem;
  }

  /* 摘要栏在桌面端吸顶，随表单滚动可见（转化优先） */
  .sc-checkout__summary-col {
    position: sticky;
    top: var(--sc-space-5);
  }
}

.sc-checkout__form {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-6);
}

.sc-checkout-section {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-4);
}

/* CO-7 T1：JS 按 checkout_page_style 把区块分组显示为客户端步骤时靠 hidden
   属性切换——同 .sc-steps[hidden] 的 specificity 覆写理由。 */
.sc-checkout-section[hidden] {
  display: none;
}

.sc-checkout-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-3);
}

.sc-checkout-section__title {
  font-size: var(--sc-text-md);
  font-weight: var(--sc-font-weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--sc-space-2);
}

.sc-checkout-section__link {
  font-size: var(--sc-text-sm);
  color: var(--sc-color-primary);
  font-weight: var(--sc-font-weight-medium);
}

.sc-checkout-section__link:hover {
  text-decoration: underline;
}

.sc-field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sc-space-4);
}

@media (min-width: 560px) {
  .sc-field-row--2 {
    grid-template-columns: 1fr 1fr;
  }

  .sc-field-row--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* 单选卡片（配送方式 / 支付方式） */
.sc-option-list {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-3);
}

.sc-option-card {
  display: flex;
  align-items: center;
  gap: var(--sc-space-3);
  padding: var(--sc-space-4);
  border: 1px solid var(--sc-color-border-strong);
  border-radius: var(--sc-radius-md);
  cursor: pointer;
  background: var(--sc-color-surface);
  transition: border-color var(--sc-duration-fast) var(--sc-ease-out),
    box-shadow var(--sc-duration-fast) var(--sc-ease-out);
}

.sc-option-card:has(input:checked) {
  border-color: var(--sc-color-primary);
  box-shadow: 0 0 0 1px var(--sc-color-primary);
}

.sc-option-card:has(input:focus-visible) {
  outline: 2px solid var(--sc-color-primary);
  outline-offset: 2px;
}

.sc-option-card input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--sc-color-primary);
  flex-shrink: 0;
  cursor: pointer;
}

.sc-option-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-3);
  flex-wrap: wrap;
}

/* 选项卡左侧信息块：标题 + 描述纵向堆叠（flex 列，让行内 label/desc 各占一行） */
.sc-option-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.sc-option-card__label {
  font-size: var(--sc-text-base);
  font-weight: var(--sc-font-weight-medium);
  color: var(--sc-color-fg);
}

.sc-option-card__desc {
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-subtle);
}

.sc-option-card__price {
  font-size: var(--sc-text-base);
  font-weight: var(--sc-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sc-option-card__icon {
  flex-shrink: 0;
  color: var(--sc-color-fg-muted);
}

/* 支付方式：卡号输入内嵌卡组织图标 */
.sc-card-input-wrap {
  position: relative;
}

.sc-card-input-wrap .sc-input {
  padding-right: 3.5rem;
}

.sc-card-input-wrap__icons {
  position: absolute;
  right: var(--sc-space-3);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: var(--sc-space-1);
  pointer-events: none;
}

.sc-card-brand-icon {
  height: 1.25rem;
  padding: 0 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.2rem;
  background: var(--sc-color-surface-sunken);
  color: var(--sc-color-fg-subtle);
  font-size: 0.5625rem;
  font-weight: var(--sc-font-weight-bold);
  letter-spacing: 0.01em;
}

/* PayPal 占位面板 */
.sc-payment-placeholder {
  padding: var(--sc-space-4);
  background: var(--sc-color-surface-sunken);
  border-radius: var(--sc-radius-sm);
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-muted);
  line-height: var(--sc-leading-snug);
  /* 曾是 text-align:center（未落地的 PayPal 占位气泡，无消费者）；CO-7 T1 首个
     真消费者是结账页 Payment 区块的说明文字，随周边左对齐内容走左对齐。 */
  text-align: left;
}

/* 结账页订单摘要中的商品行（比购物车行更紧凑，图上叠加数量角标） */
.sc-summary-line {
  display: flex;
  gap: var(--sc-space-3);
  align-items: center;
}

.sc-summary-line__media {
  position: relative;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--sc-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.sc-summary-line__qty {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  background: var(--sc-color-fg-subtle);
  color: var(--sc-color-on-primary);
  border-radius: var(--sc-radius-full);
  font-size: 0.625rem;
  font-weight: var(--sc-font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.sc-summary-line__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.sc-summary-line__title {
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-font-weight-medium);
  color: var(--sc-color-fg);
  line-height: var(--sc-leading-snug);
}

.sc-summary-line__variant {
  font-size: var(--sc-text-xs);
  color: var(--sc-color-fg-subtle);
}

.sc-summary-line__price {
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-font-weight-medium);
  color: var(--sc-color-fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sc-summary-lines {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-4);
}

/* 移动端结账摘要折叠触发条（贴合店匠两页式移动端体验：默认收起显示合计，点击展开明细） */
.sc-checkout__summary-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-3);
  width: 100%;
  padding: var(--sc-space-4) var(--sc-space-5);
  background: var(--sc-color-surface-sunken);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-lg);
  cursor: pointer;
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg);
}

@media (min-width: 1024px) {
  .sc-checkout__summary-toggle {
    color: var(--sc-color-fg);
  }
}

/* ================= 装修 D5c-T1：Aurora 内容 section 共用组件样式 =================
 *
 * 每个 section 自身实例相关的尺寸/列数变量（`--sc-*-cols` 等）走各自
 * `sections/*.liquid` 内的 `{% style %}` 块（同既有 featured-collection/
 * multicolumn 手法，作用域限定在 `#sc-section-{{ section.id }}`）；这里只放
 * 与具体实例无关、可跨 section 复用的组件级样式（同 .sc-product-card/
 * .sc-empty-state 这类既有全局组件类的既有惯例）。
 */

/* 评价星标（testimonials）：实心/空心两态，颜色走令牌，不用高饱和纯色 */
.sc-testimonials__card {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-3);
}

.sc-testimonials__stars {
  display: flex;
  gap: 0.125rem;
  font-size: var(--sc-text-md);
  line-height: 1;
}

.sc-testimonials__star {
  color: var(--sc-color-border-strong);
}

.sc-testimonials__star--filled {
  color: var(--sc-color-primary);
}

.sc-testimonials__quote {
  margin: 0;
  color: var(--sc-color-fg);
  font-size: var(--sc-text-base);
  line-height: var(--sc-leading-normal);
}

.sc-testimonials__quote p {
  margin: 0 0 var(--sc-space-2);
}

.sc-testimonials__quote p:last-child {
  margin-bottom: 0;
}

.sc-testimonials__author {
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-font-weight-medium);
  color: var(--sc-color-fg-muted);
}

/* FAQ 折叠列表（collapsible-content）：原生 <details>/<summary>，自绘 +/− 指示器 */
.sc-collapsible__list {
  display: flex;
  flex-direction: column;
}

.sc-collapsible__item {
  border-bottom: 1px solid var(--sc-color-border);
}

.sc-collapsible__item:first-child {
  border-top: 1px solid var(--sc-color-border);
}

.sc-collapsible__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-4);
  padding: var(--sc-space-4) 0;
  font-size: var(--sc-text-base);
  font-weight: var(--sc-font-weight-medium);
  color: var(--sc-color-fg);
  cursor: pointer;
  list-style: none;
}

/* 隐藏浏览器默认的 <summary> 三角标记（Chrome/Firefox 各一套伪元素），
 * 换成自绘的 +/− 文本指示器，视觉更贴合设计系统 */
.sc-collapsible__question::-webkit-details-marker {
  display: none;
}

.sc-collapsible__question::marker {
  content: "";
}

.sc-collapsible__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--sc-radius-full);
  background: var(--sc-color-surface-sunken);
  color: var(--sc-color-fg-muted);
  font-size: var(--sc-text-base);
  transition: transform var(--sc-duration-base) var(--sc-ease-out);
}

.sc-collapsible__item[open] .sc-collapsible__icon {
  transform: rotate(45deg); /* + 旋转 45° 视觉上变成 × ，暗示"点击收起" */
}

.sc-collapsible__answer {
  padding: 0 0 var(--sc-space-4);
}

.sc-collapsible__answer p {
  margin: 0 0 var(--sc-space-2);
}

.sc-collapsible__answer p:last-child {
  margin-bottom: 0;
}

/* =====================================================================
 * 装修 D5c-T2 — 转化组件×4（公告栏/倒计时/优惠券弹窗/销量气泡）
 * 四个组件的样式集中在这一个区块（合并冲突边界，见任务简报口径），
 * 与 D5c-T1（6 个内容 section）的样式各自独立追加，不交叉修改。
 * ===================================================================== */

/* ---- announcement-bar ---- */
.sc-announcement-bar {
  width: 100%;
}

.sc-announcement-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-3);
  padding: var(--sc-space-2) var(--sc-space-4);
  text-align: center;
  font-size: var(--sc-text-sm);
}

.sc-announcement-bar__text {
  margin: 0;
}

.sc-announcement-bar__link {
  margin-left: var(--sc-space-2);
  text-decoration: underline;
  color: inherit;
}

.sc-announcement-bar__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.8;
  cursor: pointer;
}

.sc-announcement-bar__close:hover {
  opacity: 1;
}

/* ---- countdown-banner ---- */
.sc-countdown-banner {
  width: 100%;
  padding-block: var(--sc-space-6);
}

.sc-countdown-banner__heading {
  margin: 0 0 var(--sc-space-4);
  font-size: var(--sc-text-lg);
  font-weight: var(--sc-font-weight-semibold);
}

.sc-countdown-banner__timer {
  display: flex;
  justify-content: center;
  gap: var(--sc-space-5);
}

.sc-countdown-banner__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3rem;
}

.sc-countdown-banner__unit span {
  font-size: var(--sc-text-2xl);
  font-weight: var(--sc-font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--sc-leading-tight);
}

.sc-countdown-banner__unit small {
  font-size: var(--sc-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.sc-countdown-banner__expired {
  margin: 0;
  font-size: var(--sc-text-lg);
  font-weight: var(--sc-font-weight-medium);
}

/* ---- coupon-popup ---- */
.sc-coupon-popup {
  position: fixed;
  inset: 0;
  z-index: var(--sc-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sc-space-4);
  background: oklch(0.22 0.02 50 / 0.45);
}

.sc-coupon-popup[hidden] {
  display: none;
}

.sc-coupon-popup__panel {
  position: relative;
  width: 100%;
  max-width: 26rem;
  padding: var(--sc-space-7) var(--sc-space-6) var(--sc-space-6);
  background: var(--sc-color-surface);
  border-radius: var(--sc-radius-lg);
  box-shadow: var(--sc-shadow-popover);
  text-align: center;
}

.sc-coupon-popup__close {
  position: absolute;
  top: var(--sc-space-3);
  right: var(--sc-space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: transparent;
  border: none;
  color: var(--sc-color-fg-muted);
  cursor: pointer;
}

.sc-coupon-popup__close:hover {
  color: var(--sc-color-fg);
}

.sc-coupon-popup__heading {
  margin: 0 0 var(--sc-space-3);
  font-size: var(--sc-text-lg);
  font-weight: var(--sc-font-weight-semibold);
}

.sc-coupon-popup__text {
  margin: 0 0 var(--sc-space-5);
}

.sc-coupon-popup__code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-3);
  flex-wrap: wrap;
}

.sc-coupon-popup__code {
  padding: var(--sc-space-2) var(--sc-space-4);
  background: var(--sc-color-surface-sunken);
  border: 1px dashed var(--sc-color-border-strong);
  border-radius: var(--sc-radius-sm);
  font-size: var(--sc-text-md);
  font-weight: var(--sc-font-weight-semibold);
  letter-spacing: 0.04em;
}

/* ---- sales-pop ---- */
.sc-sales-pop {
  position: fixed;
  left: var(--sc-space-4);
  bottom: var(--sc-space-4);
  z-index: var(--sc-z-dropdown);
  max-width: 20rem;
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity var(--sc-duration-base) var(--sc-ease-out), transform var(--sc-duration-base) var(--sc-ease-out);
}

.sc-sales-pop.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sc-sales-pop__bubble {
  padding: var(--sc-space-3) var(--sc-space-4);
  background: var(--sc-color-surface);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-md);
  box-shadow: var(--sc-shadow-card-hover);
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg);
}

@media (max-width: 749px) {
  .sc-countdown-banner__timer {
    gap: var(--sc-space-3);
  }

  .sc-countdown-banner__unit {
    min-width: 2.5rem;
  }

  .sc-countdown-banner__unit span {
    font-size: var(--sc-text-xl);
  }

  .sc-sales-pop {
    left: var(--sc-space-3);
    bottom: var(--sc-space-3);
    max-width: calc(100vw - (var(--sc-space-3) * 2));
  }
}

/* 买家账户/登录/注册页（结账 CO-2 T4）——复用 .sc-card/.sc-field/.sc-input/.sc-btn，
   仅补页面布局；间距/颜色用设计令牌 + 兜底值。 */
.sc-account-auth { max-width: 26rem; margin: var(--sc-space-2xl, 3rem) auto; padding: 0 var(--sc-space-md, 1rem); }
.sc-account-auth__title { font-size: var(--sc-font-size-2xl, 1.75rem); margin: 0 0 var(--sc-space-lg, 1.5rem); }
.sc-account-auth__error { color: var(--sc-color-danger, #c0392b); margin: 0 0 var(--sc-space-md, 1rem); }
.sc-account-auth__alt { margin-top: var(--sc-space-lg, 1.5rem); text-align: center; color: var(--sc-color-ink-soft, #666); }
.sc-account-form { display: flex; flex-direction: column; gap: var(--sc-space-md, 1rem); }
.sc-account-form .sc-field { display: flex; flex-direction: column; gap: var(--sc-space-2xs, .25rem); }
.sc-account-form .sc-field--check { flex-direction: row; align-items: center; gap: var(--sc-space-xs, .5rem); }
.sc-account { max-width: 60rem; margin: var(--sc-space-2xl, 3rem) auto; padding: 0 var(--sc-space-md, 1rem); }
.sc-account__title { font-size: var(--sc-font-size-2xl, 1.75rem); margin: 0 0 var(--sc-space-lg, 1.5rem); }
.sc-account-profile { display: flex; flex-direction: column; gap: var(--sc-space-sm, .5rem); margin-bottom: var(--sc-space-xl, 2rem); align-items: flex-start; }
.sc-account-orders, .sc-account-addresses { margin-bottom: var(--sc-space-xl, 2rem); }
.sc-account-orders ul, .sc-account-addresses ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sc-space-xs, .5rem); }
.sc-account-orders li, .sc-account-addresses li { padding: var(--sc-space-sm, .75rem) 0; border-bottom: 1px solid var(--sc-color-border, #e5e5e5); }


/* ---- Cart drawer (optimization batch 4) ---- */
.sc-cart-drawer__overlay { position: fixed; inset: 0; background: rgb(0 0 0 / 0.4); z-index: 60; }
.sc-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); z-index: 61;
  background: var(--sc-color-canvas, #fff); display: flex; flex-direction: column;
  box-shadow: -12px 0 32px rgb(0 0 0 / 0.12);
  transform: translateX(100%); visibility: hidden;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 280ms;
}
.sc-cart-drawer.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .sc-cart-drawer { transition: none; }
}
.sc-drawer-lock { overflow: hidden; }
.sc-cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sc-space-4) var(--sc-space-5); border-bottom: 1px solid var(--sc-color-border, #e5e5e5);
}
.sc-cart-drawer__title { font-size: 1.1rem; margin: 0; }
.sc-cart-drawer__close {
  border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer;
  color: var(--sc-color-fg, #222); padding: 0 var(--sc-space-1);
}
.sc-cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--sc-space-4) var(--sc-space-5); }
.sc-cart-drawer__empty { color: var(--sc-color-fg-muted, #666); text-align: center; padding: var(--sc-space-8) 0; }
.sc-cart-drawer__item {
  display: flex; gap: var(--sc-space-3); align-items: flex-start; position: relative;
  padding: var(--sc-space-3) 0; border-bottom: 1px solid var(--sc-color-border, #eee);
}
.sc-cart-drawer__img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--sc-radius-md, 8px); flex-shrink: 0; }
.sc-cart-drawer__img--empty { background: var(--sc-color-border, #eee); }
.sc-cart-drawer__item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sc-space-1); }
.sc-cart-drawer__item-title { font-weight: 600; text-decoration: none; color: inherit; font-size: 0.95rem; }
.sc-cart-drawer__variant { margin: 0; font-size: 0.8rem; color: var(--sc-color-fg-muted, #666); }
.sc-cart-drawer__item-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-space-2); }
.sc-cart-drawer__qty { display: inline-flex; align-items: center; gap: var(--sc-space-2); }
.sc-cart-drawer__step {
  width: 26px; height: 26px; border: 1px solid var(--sc-color-border, #ddd); background: none;
  border-radius: var(--sc-radius-sm, 6px); cursor: pointer; line-height: 1; color: inherit;
}
.sc-cart-drawer__qty-num { min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }
.sc-cart-drawer__remove {
  border: 0; background: none; cursor: pointer; color: var(--sc-color-fg-muted, #999);
  font-size: 1.1rem; line-height: 1; padding: 0 var(--sc-space-1);
}
.sc-cart-drawer__foot {
  border-top: 1px solid var(--sc-color-border, #e5e5e5);
  padding: var(--sc-space-4) var(--sc-space-5); display: flex; flex-direction: column; gap: var(--sc-space-3);
}
.sc-cart-drawer__total-row { display: flex; justify-content: space-between; font-size: 1rem; }
.sc-cart-drawer__view-link { text-align: center; font-size: 0.85rem; color: var(--sc-color-fg-muted, #666); }


/* ---- Header search suggest (optimization batch 4) ---- */
.sc-header__search-wrap { position: relative; display: inline-flex; align-items: center; }
.sc-header__search-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 55;
  width: min(340px, 80vw); background: var(--sc-color-canvas, #fff);
  border: 1px solid var(--sc-color-border, #e5e5e5); border-radius: var(--sc-radius-lg, 12px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.12); padding: var(--sc-space-2);
}
.sc-header__search-input {
  width: 100%; border: 1px solid var(--sc-color-border, #ddd); border-radius: var(--sc-radius-md, 8px);
  padding: var(--sc-space-2) var(--sc-space-3); font: inherit; background: var(--sc-color-canvas, #fff); color: inherit;
}
.sc-header__search-input:focus { outline: 2px solid var(--sc-color-primary, #6d28d9); outline-offset: 1px; }
.sc-header__suggest { margin-top: var(--sc-space-2); display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.sc-header__suggest-item {
  display: flex; align-items: center; gap: var(--sc-space-3); text-decoration: none; color: inherit;
  padding: var(--sc-space-2); border-radius: var(--sc-radius-md, 8px);
}
.sc-header__suggest-item:hover { background: var(--sc-color-border, #f2f2f2); }
.sc-header__suggest-img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--sc-radius-sm, 6px); flex-shrink: 0; }
.sc-header__suggest-img--empty { background: var(--sc-color-border, #eee); display: inline-block; }
.sc-header__suggest-title { flex: 1; min-width: 0; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-header__suggest-price { font-size: 0.85rem; color: var(--sc-color-fg-muted, #666); font-variant-numeric: tabular-nums; }
.sc-header__suggest-empty { margin: 0; padding: var(--sc-space-3); text-align: center; color: var(--sc-color-fg-muted, #666); font-size: 0.9rem; }
.sc-header__suggest-more {
  display: block; text-align: center; padding: var(--sc-space-2); margin-top: var(--sc-space-1);
  border-top: 1px solid var(--sc-color-border, #eee); font-size: 0.85rem; color: var(--sc-color-primary, #6d28d9); text-decoration: none;
}


/* ---- Contact form (optimization batch 4) ---- */
.sc-contact-form--soft { background: var(--sc-color-surface, #f7f6f3); }
.sc-contact-form--contrast { background: var(--sc-color-ink, #2b2420); color: #fff; }
.sc-contact-form--contrast .sc-text-muted { color: rgb(255 255 255 / 0.75); }
.sc-contact-form__container { padding-block: var(--sc-space-10); }
.sc-contact-form__container--narrow { max-width: 560px; }
.sc-contact-form__container--medium { max-width: 760px; }
.sc-contact-form__subtext { margin-top: var(--sc-space-2); }
.sc-contact-form__banner {
  margin-top: var(--sc-space-4); padding: var(--sc-space-3) var(--sc-space-4);
  border-radius: var(--sc-radius-md, 8px); font-size: 0.95rem;
}
.sc-contact-form__banner--ok { background: rgb(34 152 84 / 0.12); color: #1c7a48; }
.sc-contact-form__banner--error { background: rgb(196 52 45 / 0.12); color: #b03028; }
.sc-contact-form__form { margin-top: var(--sc-space-5); }
.sc-contact-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-space-4); }
.sc-contact-form__field { display: flex; flex-direction: column; gap: var(--sc-space-1); text-align: left; }
.sc-contact-form__field--full { grid-column: 1 / -1; }
.sc-contact-form__textarea { resize: vertical; min-height: 120px; }
.sc-contact-form__submit { margin-top: var(--sc-space-4); }
.sc-contact-form__feedback { margin-top: var(--sc-space-3); font-size: 0.9rem; }
.sc-contact-form__feedback.is-error { color: #b03028; }
/* Honeypot: off-viewport (not display:none — some bots skip hidden fields) */
.sc-contact-form__hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) {
  .sc-contact-form__grid { grid-template-columns: 1fr; }
}