/*
 * Shopvenzia 店铺前台默认主题 — 设计令牌
 *
 * 与后台（admin/platform-admin，hue 268 品牌蓝）独立的消费级设计语言。
 * 见 DESIGN.md §8、docs/规范/店铺前台设计系统.md（唯一真源，改动需同步）。
 *
 * 本期为静态原型：变量以 :root 自定义属性实现（非 Tailwind @theme），
 * 未来转 Liquid 模板时可整体迁移为主题设置（theme settings）驱动。
 *
 * 字体：自托管 Archivo（woff2 放 assets/，@font-face 同源引入，不违反 CSP）；
 * CJK 回退系统字体。「极简黑白奢感」方向（COS/Aesop 式克制）。
 */

/* 自托管 Archivo —— 极简奢感主字体（同源 asset，CSP 合规；CJK 走系统回退） */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url("archivo-400.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url("archivo-500.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("archivo-600.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("archivo-700.woff2") format("woff2")}

:root {
  /* ================= 色彩：OKLCH，中性无彩度灰阶（2026-07-20 去暖：极简黑白奢感的
     中性系统彩度归零，明度不变——旧暖调 hue 50-60 是早期"暖调编辑风"遗产，导致
     商家把底色设纯白后页面仍显米黄） ================= */

  /* 中性色阶 */
  --sc-color-canvas: oklch(0.98 0 0);               /* #f8f8f8 页面底色，中性近白 */
  --sc-color-surface: oklch(0.995 0 0);             /* #fdfdfd 卡片/内容面 */
  --sc-color-surface-sunken: oklch(0.955 0 0);       /* #f0f0f0 内嵌区/输入底/次级区块 */
  --sc-color-header: oklch(0.995 0 0);               /* 页头背景（可切换深色见下） */

  --sc-color-fg: oklch(0.22 0 0);                   /* #1b1b1b 正文 */
  --sc-color-fg-muted: oklch(0.48 0 0);             /* #5d5d5d 次要文字/描述 */
  --sc-color-fg-subtle: oklch(0.64 0 0);            /* #8c8c8c 占位/禁用/辅助说明 */
  --sc-color-on-dark: oklch(0.98 0 0);              /* 深底上的文字 */

  --sc-color-border: oklch(0.90 0 0);               /* #dedede 边框/分隔 */
  --sc-color-border-strong: oklch(0.82 0 0);        /* #c4c4c4 强调边框 */

  /* 品牌主色：近墨黑（极简黑白奢感——CTA/强调走高对比黑，不用彩色） */
  --sc-color-primary: oklch(0.20 0 0);              /* #161616 近墨黑 主 CTA / 强调 */
  --sc-color-primary-hover: oklch(0.32 0 0);        /* 悬停：略提亮 */
  --sc-color-primary-active: oklch(0.14 0 0);       /* 按下：更沉 */
  --sc-color-primary-subtle: oklch(0.945 0 0);      /* 极浅灰底（标签/选中态） */
  --sc-color-on-primary: oklch(0.99 0 0);           /* 主色其上文字，近白 */

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

  /* 语义状态色（成对：主色 + 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:
    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    Helvetica, Arial, sans-serif;
  --sc-font-serif:
    Georgia, "Times New Roman", "Songti SC", SimSun, 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;   /* 正文，门面阅读舒适度优先 */
  /* 通用「排版」组的正文行高档需要比 normal 更松的两档（商家要"把正文放疏"
     远多于"收紧"）。1.75 / 2 不是新数值——rich-text.liquid 的内联样式块里
     早就以字面量写着这两个行高，这里只是把既有字面量收编进令牌阶，让
     universal_typography.py 与各 section 共用同一套刻度。
     ⚠️ 本段注释（以及 :root 里的任何注释）**不得出现花括号**：本仓多处
     解析 theme.css 的测试用「选择器 + 左花括号 + 非右花括号若干 + 右花括号」
     这类正则抓规则体，注释里出现一个右花括号就会让规则体在此截断、后面的
     声明全部"消失"。实测炸过
     test_container_padding_responsive_ladder_uses_base_var_with_calc；
     常驻门禁见 test_universal_typography.py::test_root_block_comments_contain_no_braces。 */
  --sc-leading-relaxed: 1.75; /* 正文放疏 */
  --sc-leading-loose: 2;      /* 正文最疏 */

  /* 正文字间距阶（通用「排版」组消费）：档位名与取值沿用 announcement-bar
     既有的 normal/wide/wider 口径（0.04em / 0.08em 本就是它内联样式块里的
     字面量），另补一档 tight。收编成令牌避免同一套档位在多处各写一份魔数；
     正文默认字距是 CSS 关键字 normal，故"常规"档不需要令牌。 */
  --sc-tracking-tight: -0.01em;
  --sc-tracking-wide: 0.04em;
  --sc-tracking-wider: 0.08em;

  /* ================= 间距（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 */
  /* 容器左右留白（组件重构批次4B：主题设置「内容区左右留白」接入这里的
     -base 变量，只覆盖移动端基准值；下方两档媒体查询用 calc() 按 2倍/3倍
     跟随，响应式阶梯的比例保持不变，商家改的是整体密度而非单一断点。
     --sc-container-padding 自身不再是字面量，改为对 -base 的 calc() 引用，
     未设置 -base 时用 1rem 兜底——与改造前的字面量 1rem/2rem/3rem 逐档
     数值相等，零回归。 */
  --sc-container-padding-base: 1rem;
  --sc-container-padding: var(--sc-container-padding-base);   /* 移动默认边距，桌面媒体查询加大 */

  /* ================= 圆角 / 阴影 ================= */
  --sc-radius-sm: 0.125rem;  /* 2px 极简·近直角 */
  --sc-radius-md: 0.1875rem; /* 3px 按钮/商品卡（极简奢感·锐利克制） */
  --sc-radius-lg: 0.375rem;  /* 6px 大卡片/弹层 */
  --sc-radius-full: 999px;  /* 圆形（购物车角标/头像） */

  --sc-shadow-card: 0 1px 3px oklch(0.22 0 0 / 0.06), 0 1px 2px oklch(0.22 0 0 / 0.04);
  --sc-shadow-card-hover: 0 8px 20px oklch(0.22 0 0 / 0.10);
  --sc-shadow-popover: 0 12px 32px oklch(0.22 0 0 / 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;

  /* ================= 页头（页头/页脚升级 —— 字距/高度/mega 令牌化） ================= */
  --sc-tracking-logo: -0.005em;      /* logo 克制收紧（去大写后所见即所得） */
  --sc-tracking-nav: 0.02em;         /* 导航标题式大小写的克制字距（去大写） */
  --sc-header-h: 4rem;               /* 页头栏高（现状 64px） */
  --sc-header-h-scrolled: 3.75rem;   /* 粘顶滚动收缩后的栏高（60px） */
  --sc-shadow-header:
    0 1px 0 oklch(0.22 0 0 / 0.04),
    0 6px 24px -12px oklch(0.22 0 0 / 0.14);  /* 滚动后 border→极轻投影 */
  --sc-mega-radius: var(--sc-radius-lg);          /* mega 面板圆角 */
  --sc-mega-shadow: 0 24px 48px -24px oklch(0.22 0 0 / 0.35);  /* mega 面板阴影 */
  --sc-ease-drawer: cubic-bezier(0.22, 1, 0.36, 1);  /* 抽屉/mega 缓动（对齐购物车抽屉） */
  --sc-duration-drawer: 280ms;
  /* ================= 页脚（页脚升级切片令牌） ================= */
  --sc-footer-pad-top: var(--sc-space-9);        /* 顶部留白放疏（原 space-8） */
  --sc-footer-grid-gap: var(--sc-space-7);       /* 品牌/链接列间距加大 */
  --sc-footer-brand-tracking: -0.005em;          /* 品牌名去大写后的克制字距（尊重原文大小写） */
  --sc-footer-heading-tracking: 0.14em;          /* 链接列小标题字距（略收，原硬编码 0.16em） */
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 正文字号缩放（组件重构批次4B，主题设置「正文字号缩放」）：故意用字面量
     16px 做基准，不用 1rem——在**根元素自身**的 font-size 声明里写
     calc(1rem * ...) 属于 CSS 规范里"rem 在根元素上按 font-size 初始值
     解析"的特殊分支，行为对不熟悉这条规则的读者是隐晦的；16px 是浏览器
     font-size 的标准初始值，字面量表达同一件事但零歧义、零对 UA 默认值
     的隐性依赖。--sc-text-scale 缺省 1 时 = 16px，和不设本条规则时的浏览器
     默认完全一致（零回归）；同时这行让全站 rem 单位（正文/间距/圆角…）
     一并按比例联动缩放，是有意为之的"整体密度"效果，不是只影响文字。 */
  font-size: calc(16px * var(--sc-text-scale, 1));
}

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

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

/* Responsive images: HTML width/height attributes must only carry the aspect
   ratio, never the rendered size.

   Every <img> rendered from a merchant asset carries the asset's intrinsic
   width/height (see the image_attrs Liquid filter). Browsers use that pair for
   the UA `aspect-ratio: attr(width) / attr(height)` rule, which reserves the
   right box before the bytes arrive — that is the whole point, it removes the
   layout shift.

   But those attributes ALSO map to presentational hints for the `width` and
   `height` CSS properties. Section CSS almost always declares `width: 100%`,
   which beats the width hint; many sections deliberately leave `height`
   unset so the box follows the aspect ratio. Without the rule below, the
   height hint wins in exactly those places and a 1600px-tall asset renders a
   1600px-tall box. Measured live on multicolumn/gallery/showcase before this
   rule existed — the columns stretched from 373px to 1600px tall.

   `:where()` zeroes the selector's specificity on purpose: any real height
   declaration (`height: 100%` on absolutely-filled media, `height: 40px` on
   logos, inline styles) still wins, while the presentational hint — which the
   cascade ranks below every author declaration — never does. */
:where(img[width][height]) {
  height: auto;
}

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

button {
  font-family: inherit;
}

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

h1, h2, h3, h4 {
  font-family: var(--sc-font-heading, var(--sc-font-sans));
}

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

/* 真实数据缺图占位（斜纹灰块）：商品/集合/购物车/搜索/结账等真实商品没传图时用。
   与下方 .sc-placeholder-art（商家「还没配置」时的示意线稿）是两种状态，不互相替代。 */
.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;
}

/* ================= 占位线稿（原型 v1，2026-09-25） =================
   只出现在商家「还没配置」的位置：没选图、没选商品/集合、没传视频。配置后即消失。
   买家也看得到，所以画成一眼可辨的示意线稿：无文字、无价格、不像实物照片。
   线条取当前配色的文字色（currentColor），透明度写在图里。
   底色用主题现有的「图位灰底」令牌 --sc-color-surface-sunken，且必须不透明：
   前后对比组件把两张图叠在一起，上层半透明会透出下层的线（原型实测）。
   「墨黑」配色会改写这两个令牌，所以整张图自动翻成深底浅线。 */
.sc-placeholder-art {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--sc-color-surface-sunken);
  color: var(--sc-color-fg);
}
/* 叠字模式（整幅/视差横幅、轮播）：组件把标题强制成浅色，所以占位改用中灰底 + 浅色线。
   不用纯深底：预设按钮是近黑实心，深底上几乎看不见。取 --sc-color-ink-muted（L 0.55）：
   白字对比 4.6:1（≥4.5 正文达标），近黑按钮与底色 3.7:1（≥3 控件边界达标）。 */
.sc-placeholder-art--on-dark {
  background-color: var(--sc-color-ink-muted);
  /* 线条再往底色收：叠字会直接压在线稿上（手机上尤其），线稿要退到背景里，让文字更突出 */
  color: color-mix(in oklch, var(--sc-color-on-dark) 60%, var(--sc-color-ink-muted));
}

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

/* ================= 通用布局层(组件重构批次1) =================
   值全部来自 renderer.py::_universal_layout_attrs 的受控输出(白名单枚举/
   正则约束),这里只负责消费:分隔线 hairline、背景图两种填充模式、锚点占位。
   容器最大宽/全宽走 --sc-container-max 继承变量,无需额外规则。 */
section[data-sc-section].sc-sec--divider-top { border-top: 1px solid var(--sc-color-border); }
section[data-sc-section].sc-sec--divider-bottom { border-bottom: 1px solid var(--sc-color-border); }
section[data-sc-section].sc-sec--bg-cover,
section[data-sc-section].sc-sec--bg-contain {
  background-image: var(--sc-sec-bg-image);
  background-position: center;
}
section[data-sc-section].sc-sec--bg-cover { background-size: cover; }
section[data-sc-section].sc-sec--bg-contain { background-size: contain; background-repeat: no-repeat; }
.sc-section-anchor { display: block; height: 0; }

/* ================= 通用「配色方案」(装修器对标 Dawn P0 地基,2026-08-30) =================
   两套主题级预置配色包("纸白"/"墨黑",极简黑白奢感品牌,守 ≥2 套底线)。商家在
   任意 section 的「布局」组选中后，容器加对应 class，这里只改写一小撮
   --sc-color-* 令牌——不是逐元素重写颜色。全站绝大多数文字/边框/按钮的颜色
   声明本就读 var(--sc-color-fg)/-primary 等令牌（见本文件几十处 `color: var(
   --sc-color-*)`），custom property 沿 DOM 继承，改一次令牌即可让标题、正文、
   小标签、outline/primary 按钮一起换到匹配配色——结构性解法，不是给某个
   section 单独打补丁（对照：2026-08-27 footer 背景图被内层不透明底色盖住，
   是因为那次改的是 background-image 而不是这套令牌）。
   "paper" 与当前全站默认视觉一致（未选择配色方案时页面本来就是这个样子），
   显式选中它是为了在配色方案将来调整全局主题色时，仍把该区块钉在"浅底"。
   "ink" 把背景/主文字/次要文字/边框换成深底配色，同时把 primary 按钮的底色
   与按钮上文字互换（深底上纯黑按钮会隐形，需要反转成浅底深字）。 */
section[data-sc-section].sc-scheme-paper {
  background-color: var(--sc-color-canvas);
  color: var(--sc-color-fg);
}
section[data-sc-section].sc-scheme-ink {
  background-color: var(--sc-color-ink);
  color: var(--sc-color-on-dark);
  --sc-color-fg: var(--sc-color-on-dark);
  /* 次要文字**不能直接沿用 --sc-color-ink-muted(oklch 0.55)**：它是给页脚
     那种「只在 --sc-color-ink(0.24) 纯深底上放一行 powered-by」的场景调的，
     而配色方案里的次要文字还会落在**更浅的卡片底** --sc-color-surface(0.30) 上。
     2026-08-31 真机对比度实测（164 个取样）坐实：0.55 在卡片底上只有 2.78、
     在区块底上 3.38，**双双低于 WCAG AA 正文 4.5** —— multicolumn 的说明文字、
     image-text 的小标签/正文、product-showcase 的副文都中招。
     这与同日修掉的 header 白字白底是**同一类病的另一种形态**：字翻了，但没翻够。
     取 0.72：按中性灰 Y=L³ 反推，对最浅的卡片底 0.30 得 5.50、对区块底 0.24 得 6.63，
     都过 4.5 且仍明显弱于主文字(0.98)，保住「次要」的视觉层级。
     **刻意不改全局 --sc-color-ink-muted**——它还被 footer.liquid、newsletter.liquid
     与 theme.css 页脚样式共用，动它会连带改掉页脚已定型的外观（页脚自身在纯深底上
     是 3.38，属既存无障碍问题，另记技术债，不在本次范围）。 */
  --sc-color-fg-muted: oklch(0.72 0 0);
  --sc-color-fg-subtle: oklch(0.72 0 0);
  --sc-color-border: var(--sc-color-ink-border);
  --sc-color-border-strong: var(--sc-color-ink-border);
  --sc-color-surface: oklch(0.30 0 0);
  --sc-color-surface-sunken: oklch(0.28 0 0);
  --sc-color-primary: var(--sc-color-on-dark);
  --sc-color-on-primary: var(--sc-color-ink);
  --sc-color-primary-hover: oklch(0.90 0 0);
  --sc-color-primary-active: oklch(0.99 0 0);
  --sc-color-primary-subtle: oklch(0.32 0 0);
  /* 「底色类」令牌必须与 fg 一起翻，否则出现「字翻了、底没翻」的隐形文字。
     2026-08-31 lead 真机实测抓到：header 区块选墨黑后，`.sc-header` 的
     `background: var(--sc-color-header)` 不在改写清单里 → 底仍是浅色，而
     --sc-color-fg 已被本规则翻成近白 → 字标与图标白字白底、彻底看不见
     （截图 RISK__90-header-ink.png）。--sc-color-canvas 同理：main-product
     缩略图轨道两端的渐隐用 `linear-gradient(90deg, var(--sc-color-canvas), transparent)`
     蒙边，不翻会在深底上抹出一道浅灰。
     判据：凡是**被当作背景**的 --sc-color-* 都得进这份清单；被当作前景
     （线条/进度条填充，如 `background: var(--sc-color-fg)` 的下划线指示器与
     `.sc-ship-progress__bar`）的**不能**动——那两处在深底上正好要白色。 */
  --sc-color-header: var(--sc-color-ink);
  --sc-color-canvas: var(--sc-color-ink);
  /* 按钮专属配色（2026-09-01）落地后，深底反转必须**同时改写 --sc-btn-* 这一层**：
     商家一旦在主题设置里填了按钮色，那四个变量就存在于 :root 并沿 DOM 继承进来，
     `var(--sc-btn-primary-bg, var(--sc-color-primary))` 会优先吃到它，
     上面对 --sc-color-primary 的反转就够不着了 → 深底上又变回"纯黑按钮隐形"。
     所以这里把按钮层一并钉成反转值（浅底深字），与 --sc-color-primary 那两条同源。 */
  --sc-btn-primary-bg: var(--sc-color-on-dark);
  --sc-btn-primary-fg: var(--sc-color-ink);
  --sc-btn-primary-bg-hover: oklch(0.90 0 0);
  --sc-btn-primary-bg-active: oklch(0.99 0 0);
  --sc-btn-secondary-fg: var(--sc-color-on-dark);
  --sc-btn-secondary-border: var(--sc-color-ink-border);
}

@media (min-width: 768px) {
  :root {
    --sc-container-padding: calc(var(--sc-container-padding-base) * 2);
  }
}

@media (min-width: 1280px) {
  :root {
    --sc-container-padding: calc(var(--sc-container-padding-base) * 3);
  }
}

.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.22em;
  text-transform: uppercase;
  color: var(--sc-color-fg-muted);
}

.sc-heading-hero {
  font-size: calc(var(--sc-text-2xl) * var(--sc-heading-scale, 1));
  line-height: 1.04;
  font-weight: var(--sc-font-heading-weight, var(--sc-font-weight-medium));
  text-wrap: balance;
  /* 标题字间距（组件重构批次4B）：--sc-heading-tracking 未设置（「标准」档）
     时用 -0.022em 兜底，与改造前的字面量逐字节相等；.sc-heading-hero 与
     .sc-heading-section 现状字距本就不同，各自保留自己的 fallback 字面量，
     只有商家显式选了「收紧/加宽」才统一覆盖成同一个值（见 _theme_vars.liquid）。 */
  letter-spacing: var(--sc-heading-tracking, -0.022em);
}

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

.sc-heading-section {
  font-size: calc(var(--sc-text-xl) * var(--sc-heading-scale, 1));
  line-height: var(--sc-leading-tight);
  font-weight: var(--sc-font-heading-weight, var(--sc-font-weight-semibold));
  letter-spacing: var(--sc-heading-tracking, -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);
  /* 按钮圆角/字间距（组件重构批次4B，主题设置「按钮」组）：两个 fallback
     字面量与改造前逐字节相等，「跟随主题」/「标准」档不输出覆盖变量。 */
  border-radius: var(--sc-btn-radius, var(--sc-radius-md));
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-font-weight-semibold);
  letter-spacing: var(--sc-btn-tracking, 0.14em);
  text-transform: uppercase;
  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：全站最醒目的可点元素 */
/* 按钮专属配色（2026-09-01）：`var(--sc-btn-*, var(--sc-color-*))` 的两层写法是
   刻意的——商家没设按钮色时 `--sc-btn-*` 根本不存在（见 _theme_vars.liquid：
   那四个键只在有值时才输出），于是回落到原令牌，**渲染结果与本改动前逐字节等价**；
   同时配色方案在区块级改写 `--sc-color-primary` 时按钮照样跟着翻（那是 2026-08-31
   墨黑按钮反转的依赖）。商家设了按钮色时，`.sc-scheme-ink` 会在区块级把
   `--sc-btn-*` 一并改写回反转值（见该规则块），保证深底上按钮不隐形。
   hover/active 同样两层回落，否则商家改了底色、悬停却跳回主色系，观感断裂。 */
.sc-btn-primary {
  background: var(--sc-btn-primary-bg, var(--sc-color-primary));
  color: var(--sc-btn-primary-fg, var(--sc-color-on-primary));
  box-shadow: 0 1px 2px oklch(0.22 0 0 / 0.08);
}

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

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

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

.sc-btn-outline:hover:not(:disabled) {
  border-color: var(--sc-btn-secondary-fg, 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);
  /* 商品卡圆角（组件重构批次4B，主题设置「商品卡」组）：fallback 字面量与
     改造前逐字节相等，「跟随主题」档不输出覆盖变量；.sc-product-card 与
     .sc-product-card__media 共用同一个 --sc-card-radius，保持两者现状下
     本就相同的视觉（都是 --sc-radius-md）。 */
  border-radius: var(--sc-card-radius, var(--sc-radius-md));
  transition: transform var(--sc-duration-base) var(--sc-ease-out);
}

.sc-product-card:hover .sc-product-card__media {
  border-color: var(--sc-color-border-strong);
}

/* 商品卡悬停图片放大（组件重构批次4B，主题设置「商品卡悬停图片放大」）：
   这是 theme.css 里**唯一**的商品卡悬停缩放基础规则——collection-list/
   main-collection/product-showcase 三个 section 各自在自己的 {% style %}
   块里内联了同款效果（选择器带 #sc-section-{{ section.id }} 前缀，特异度
   更高，源码顺序也更靠后），本条全局规则**不会**覆盖它们，只对没有自带
   悬停缩放实现的商品卡消费点生效（如 storefront/search_routes.py 的搜索
   结果卡）——四件套第4步"theme.css 消费"对这个新键只能做到这个覆盖范围，
   如实写在这里，不假装是全站统一开关。 */
.sc-product-card__media img {
  transition: transform var(--sc-duration-base) var(--sc-ease-out);
}

.sc-product-card:hover .sc-product-card__media img {
  transform: scale(var(--sc-card-zoom, 1.045));
}

.sc-product-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--sc-card-radius, var(--sc-radius-md));
  overflow: hidden;
  background: var(--sc-color-surface-sunken);
  border: 1px solid var(--sc-color-border);
  transition: border-color 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-surface);
  color: var(--sc-color-fg);
  font-size: 0.625rem;
  font-weight: var(--sc-font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  /* 徽章形状（组件重构批次4B，主题设置「商品卡」组「徽章形状」）：fallback
     字面量与改造前逐字节相等，「直角」档（现状）不输出覆盖变量。 */
  border-radius: var(--sc-badge-radius, var(--sc-radius-sm));
}

.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;
}

/* 独立 newsletter section：真实提交状态与蜜罐，不改变既有输入组布局。 */
.sc-newsletter {
  /* 13px 状态文字使用组件级高对比语义色；全局状态色仍服务大字号/浅色提示面。 */
  --sc-newsletter-status-success: oklch(0.44 0.09 155);
  --sc-newsletter-status-error: oklch(0.46 0.15 25);
}

.sc-newsletter--bg-ink {
  --sc-newsletter-status-success: oklch(0.78 0.08 155);
  --sc-newsletter-status-error: oklch(0.78 0.10 25);
}

.sc-newsletter__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sc-newsletter__banner {
  max-width: 26rem;
  margin: 0 auto var(--sc-space-3);
  font-size: var(--sc-text-sm);
}

.sc-newsletter__native-status {
  display: none;
  max-width: 26rem;
  margin: 0 auto var(--sc-space-3);
  font-size: var(--sc-text-sm);
}

.sc-newsletter__native-status:target {
  display: block;
}

.sc-newsletter__banner--ok,
.sc-newsletter__native-status--ok {
  color: var(--sc-newsletter-status-success);
}

.sc-newsletter__banner--error,
.sc-newsletter__native-status--error,
.sc-newsletter__feedback.is-error {
  color: var(--sc-newsletter-status-error);
}

.sc-newsletter__feedback {
  margin-top: var(--sc-space-2);
  font-size: var(--sc-text-sm);
  color: var(--sc-newsletter-status-success);
}

@media (max-width: 479px) {
  .sc-newsletter .sc-input-group {
    flex-direction: column;
  }

  .sc-newsletter .sc-input-group .sc-input {
    flex: 0 0 auto;
    width: 100%;
  }

  .sc-newsletter .sc-input-group .sc-btn {
    width: 100%;
  }
}

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

.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);
}

/* 粘顶滚动收缩（页头/页脚升级）：越阈值后加 .is-scrolled——栏高收缩、
   border 换极轻投影。过渡仅在用户未要求减弱动效时启用（无障碍降级）。 */
@media (prefers-reduced-motion: no-preference) {
  .sc-header {
    transition: box-shadow var(--sc-duration-base) var(--sc-ease-out),
      border-color var(--sc-duration-base) var(--sc-ease-out);
  }
  .sc-header__bar {
    transition: height var(--sc-duration-base) var(--sc-ease-out);
  }
}

.sc-header.is-scrolled {
  border-bottom-color: transparent;
  box-shadow: var(--sc-shadow-header);
}

.sc-header.is-scrolled .sc-header__bar {
  height: var(--sc-header-h-scrolled);
}

/* 公告栏一体化（best-effort 衔接）：公告栏与页头相邻时去掉重复边线连成一体。
   注：公告栏是独立 section（各自 section 包裹），跨 section 的滚动联动收缩需
   JS 触达兄弟 section——与页头脚本作用域隔离冲突故不做；本规则只处理相邻边线。 */
.sc-announcement-bar + .sc-header {
  border-top: none;
}

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

.sc-header__logo {
  font-size: var(--sc-text-md);
  font-weight: var(--sc-font-weight-bold);
  letter-spacing: var(--sc-tracking-logo);
  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-xs);
  font-weight: var(--sc-font-weight-semibold);
  letter-spacing: var(--sc-tracking-nav);
}

/* 导航项容器（一级项；有子项时挂 mega 面板）。 */
.sc-header__nav-item {
  position: relative;
}

/* 一级链接 / mega 触发器：去大写（用户拍板）标题式大小写 + 下划线滑入
   （scaleX 0→1 transform 动效替换纯 color 过渡；aria-current 常亮指示）。 */
.sc-header__nav-item > a,
.sc-header__nav-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-1);
  padding: var(--sc-space-2) 0;
  color: var(--sc-color-fg-muted);
  background: transparent;
  border: none;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color var(--sc-duration-fast) var(--sc-ease-out);
}

.sc-header__nav-item > a::after,
.sc-header__nav-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--sc-color-fg);
  transform: scaleX(0);
  transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
  .sc-header__nav-item > a::after,
  .sc-header__nav-trigger::after {
    transition: transform var(--sc-duration-base) var(--sc-ease-out);
  }
}

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

.sc-header__nav-item:hover > a::after,
.sc-header__nav-item:focus-within > a::after,
.sc-header__nav-item:hover .sc-header__nav-trigger::after,
.sc-header__nav-item:focus-within .sc-header__nav-trigger::after,
.sc-header__nav-item > a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* caret（有 mega 的一级项）：展开时旋转指示。 */
.sc-header__nav-caret {
  width: 0.5rem;
  height: 0.5rem;
  opacity: 0.5;
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  .sc-header__nav-caret {
    transition: transform var(--sc-duration-base) var(--sc-ease-out);
  }
}

.sc-header__nav-item--mega:hover .sc-header__nav-caret,
.sc-header__nav-item--mega:focus-within .sc-header__nav-caret {
  transform: rotate(180deg);
}

/* mega 子项面板：基线（移动抽屉内静态缩进展开）；桌面覆盖为悬浮下拉。 */
.sc-header__mega {
  display: grid;
  gap: var(--sc-space-1);
}

.sc-header__mega a {
  display: block;
  color: var(--sc-color-fg-muted);
  font-size: var(--sc-text-base);
  font-weight: var(--sc-font-weight-normal);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: color var(--sc-duration-fast) var(--sc-ease-out);
}

.sc-header__mega a:hover,
.sc-header__mega a:focus-visible {
  color: var(--sc-color-fg);
}

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

  .sc-header__nav-item {
    display: flex;
    align-items: center;
  }

  /* 桌面 mega：绝对定位悬浮面板，hover / focus-within 展开（键盘可达）。
     令牌化圆角/阴影/间距。 */
  .sc-header__mega {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--sc-z-dropdown);
    min-width: 14rem;
    grid-auto-rows: min-content;
    padding: var(--sc-space-4);
    background: var(--sc-color-surface);
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-mega-radius);
    box-shadow: var(--sc-mega-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
  }

  /* 子项多时自动两列（保持 mega 分列观感，不硬造无数据的精选区）。 */
  .sc-header__mega--cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--sc-space-1) var(--sc-space-6);
    min-width: 26rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    .sc-header__mega {
      transition: opacity var(--sc-duration-drawer) var(--sc-ease-drawer),
        transform var(--sc-duration-drawer) var(--sc-ease-drawer),
        visibility var(--sc-duration-drawer) var(--sc-ease-drawer);
    }
  }

  .sc-header__nav-item--mega:hover .sc-header__mega,
  .sc-header__nav-item--mega:focus-within .sc-header__mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .sc-header__mega a {
    padding: var(--sc-space-2) 0;
  }
}

.sc-header__spacer {
  flex: 1;
}

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

.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__cart-count[hidden] {
  display: none;
}

.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;
  }
}

/* 窄屏页头：菜单 / 可收缩品牌 / 操作区三列定序。Logo 是唯一弹性列，长标题
   省略而不把购物车推出视口；操作入口保持单行可用，语言/币种在窄屏仅收起
   可见文字，图标和无障碍名称仍保留。桌面沿用上方 flex 规格。 */
@media (max-width: 767.98px) {
  .sc-header > .sc-container {
    padding-inline: var(--sc-space-3);
  }

  .sc-header__bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--sc-space-2);
  }

  .sc-header__menu-btn {
    grid-column: 1;
  }

  .sc-header__logo {
    grid-column: 2;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sc-header__logo--image img {
    max-width: min(var(--sc-header-logo-size-mobile, 140px), 100%);
  }

  .sc-header__spacer {
    display: none;
  }

  .sc-header__actions {
    grid-column: 3;
    min-width: 0;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: var(--sc-space-1);
  }

  .sc-header__icon-btn {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
  }

  .sc-header__lang-btn {
    width: 2.75rem;
    padding: 0;
  }

  .sc-header__lang-current {
    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;
  }

  /* 抽屉滑入：对齐购物车抽屉 280ms cubic-bezier(.22,1,.36,1)（减弱动效时略过）。 */
  @media (prefers-reduced-motion: no-preference) {
    .sc-header.is-nav-open .sc-header__nav {
      animation: sc-header-drawer-in var(--sc-duration-drawer) var(--sc-ease-drawer);
    }
  }

  /* 抽屉内一级项：整行可点，去下划线动效（改用 hover 底色，同既有抽屉观感）。 */
  .sc-header.is-nav-open .sc-header__nav-item {
    display: block;
  }

  .sc-header.is-nav-open .sc-header__nav-item > a,
  .sc-header.is-nav-open .sc-header__nav-trigger {
    display: flex;
    width: 100%;
    padding: var(--sc-space-3) var(--sc-container-padding);
  }

  .sc-header.is-nav-open .sc-header__nav-item > a::after,
  .sc-header.is-nav-open .sc-header__nav-trigger::after {
    display: none;
  }

  /* 抽屉内 caret 不表意（mega 静态展开、无折叠切换）→ 隐藏免误导。 */
  .sc-header.is-nav-open .sc-header__nav-caret {
    display: none;
  }

  /* 抽屉内 mega：静态缩进展开子项（所有子链接可达，不造假折叠切换）。 */
  .sc-header.is-nav-open .sc-header__mega {
    padding: 0;
  }

  .sc-header.is-nav-open .sc-header__mega a {
    padding: var(--sc-space-2) var(--sc-container-padding);
    padding-left: calc(var(--sc-container-padding) + var(--sc-space-4));
    font-size: var(--sc-text-sm);
  }

  .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: var(--sc-header-h);
    bottom: 0;
    background: color-mix(in oklab, var(--sc-color-ink) 45%, transparent);
    z-index: 1;
  }
}

@keyframes sc-header-drawer-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.sc-footer {
  background: var(--sc-color-ink);
  color: var(--sc-color-on-dark);
  padding: var(--sc-footer-pad-top) 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 {
    /* 品牌区放大留白：品牌 + 一句话主张独占更宽列（1.4fr → 1.7fr） */
    grid-template-columns: 1.7fr repeat(3, 1fr);
    gap: var(--sc-footer-grid-gap) var(--sc-space-6);
  }
}

.sc-footer__brand {
  /* 尊重原文大小写：去 text-transform:uppercase，字距令牌化收紧（与页头 logo
     同口径——所见即所得，商家填什么大小写就显示什么） */
  font-size: var(--sc-text-lg);
  font-weight: var(--sc-font-weight-bold);
  letter-spacing: var(--sc-footer-brand-tracking);
  color: var(--sc-color-on-dark);
  margin-bottom: var(--sc-space-3);
}

.sc-footer__desc {
  color: var(--sc-color-ink-muted);
  font-size: var(--sc-text-sm);
  max-width: 34ch;
  line-height: 1.6;
  margin: 0 0 var(--sc-space-5);
}

.sc-footer__heading {
  /* 链接列小标题保持 eyebrow 式全大写（Shop/Company 等分区标签，非品牌名），
     仅字距令牌化。 */
  font-size: var(--sc-text-xs);
  font-weight: var(--sc-font-weight-semibold);
  letter-spacing: var(--sc-footer-heading-tracking);
  text-transform: uppercase;
  margin-bottom: var(--sc-space-4);
  color: var(--sc-color-ink-muted);
}

.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);
  border-radius: var(--sc-radius-sm);
  transition: color var(--sc-duration-fast) var(--sc-ease-out),
    transform var(--sc-duration-fast) var(--sc-ease-out);
}

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

.sc-footer__links a:focus-visible {
  outline: 2px solid var(--sc-color-on-dark);
  outline-offset: 3px;
  color: var(--sc-color-on-dark);
}

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

.sc-footer__newsletter-form .sc-input {
  flex: 1 1 12rem;
  min-width: 0;
  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__newsletter-form .sc-btn {
  flex: 1 1 auto;
}

/* 窄列/窄视口（375px 移动端整列宽度不足以并排容纳输入框+按钮时）：
   与独立 newsletter section 的 .sc-input-group 同一套响应式令牌口径
   （见本文件 .sc-newsletter 断点），改竖排各占满宽，杜绝输入框被压窄到
   placeholder 被截断（如 "Ente..."）。 */
@media (max-width: 479px) {
  .sc-footer__newsletter-form {
    flex-direction: column;
    max-width: none;
  }

  .sc-footer__newsletter-form .sc-input,
  .sc-footer__newsletter-form .sc-btn {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* honeypot: off-screen; never affects the flex form layout */
.sc-footer__newsletter-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

.sc-footer__newsletter-feedback {
  margin-top: var(--sc-space-2);
  font-size: var(--sc-text-xs);
  color: var(--sc-color-ink-muted);
}

.sc-footer__newsletter-feedback.is-error {
  color: var(--sc-color-on-dark);
}

.sc-footer__bottom {
  margin-top: var(--sc-space-8);
  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 {
    /* 法务栏分层：wrap 允许换行分组，不再单行硬挤；首项（版权，其次政策）
       吃掉剩余空间，把支付/社交组推到右侧，空间不足时自然换行。 */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sc-space-4) var(--sc-space-6);
  }

  .sc-footer__bottom > :first-child {
    margin-right: auto;
  }

  .sc-footer__bottom .sc-footer__links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sc-space-4);
  }
}

.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);
  color: var(--sc-color-ink-muted);
}

/* 单色矢量支付卡片：SVG 图标随页脚深底走 currentColor 单色（黑白奢感·克制） */
.sc-footer__payment-icon {
  height: 1.375rem;
  width: 2.125rem;
  border: 1px solid var(--sc-color-ink-border);
  border-radius: var(--sc-radius-sm);
  background: oklch(1 0 0 / 0.04);
  color: var(--sc-color-ink-muted);
}

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

.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 通用间距 ================= */

/* 装修「#8 组件上下内边距默认 4px」：跳板保留（协调方 2026-08-14 拍板——
 * 「区块间距节奏」控件继续有效，不能因为要 4px 默认就砍掉控件消费点）。
 * 三级兜底不变：实例级 --sc-section-instance-padding-*（编辑器「间距」面板
 * 0-160 可调）→ --sc-section-pad-y(-lg)（主题级 section_rhythm 驱动，见
 * _theme_vars.liquid，恒定义不可绕过）→ --sc-space-7/9（历史遗留兜底，
 * 因上一跳恒定义而不可达，非本次改动范围）。真正让默认渲染 = 4px 的改动
 * 在 _theme_vars.liquid：把 section_rhythm 的默认档（现为 compact）取值改成
 * 4px/4px。
 */
.sc-section {
  padding-top: var(--sc-section-instance-padding-top, var(--sc-section-pad-y, var(--sc-space-7)));
  padding-right: 0;
  padding-bottom: var(--sc-section-instance-padding-bottom, var(--sc-section-pad-y, var(--sc-space-7)));
  padding-left: 0;
}

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

.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);
  min-width: 0;
  overflow-wrap: anywhere;
}

.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;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sc-space-3);
  margin-top: auto;
  padding-top: var(--sc-space-2);
  font-size: var(--sc-text-sm);
}

.sc-address-card__actions form {
  margin: 0;
}

.sc-address-card__actions a,
.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;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.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-address-card__actions--danger {
  color: var(--sc-color-destructive, #b42318) !important;
}

/* 快捷入口网格（账户概览） */
.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.75rem;
  overflow: hidden;
}

.sc-qty__btn {
  width: 2.75rem;
  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);
}

/* 🔴 生产缺陷修复（2026-09-17，用户拍板随 modern 皮肤一起上）：上面
   `.sc-summary__row { display: flex }` 会**盖掉** UA 样式表里的
   `[hidden] { display: none }`——作者样式恒优先于 user-agent origin，这不是
   特异度问题，加多少个类名都没用。后果是结账页在折扣/礼品卡为 0 时照样渲染
   出「Discount -USD 0.00」「Gift card -USD 0.00」两行垃圾（生产 FREERANGE 店
   实测：`hidden=true` 而 `display=flex`、height>0，买家真看得见）。
   写 `hidden` 的只有 checkout_routes 的这两行（SSR 条件属性 + 内联 JS
   applySummary 的 `row.hidden = …` 实时切换）；购物车页那两行走 Liquid
   `{% if %}` 根本不渲染，不受本条影响。
   同本文件既有 `.sc-steps[hidden]` / `.sc-notice[hidden]` / `.sc-checkout__error[hidden]`
   的同一手法——凡是给某个类写死了 display，就得把 `[hidden]` 补回来。 */
.sc-summary__row[hidden] {
  display: none;
}

.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);
}

/* Author display:flex must not override the browser's native hidden rule. */
.sc-notice[hidden] {
  display: none;
}

.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[hidden] {
  display: none;
}

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

/* classic 皮肤的页面级提示块（缺货横幅 / 上一笔付款确认中提示）：它们夹在页头与步骤条/
   表单之间，既有样式没给任何外边距，横幅下沿直接贴着下方的区块标题（CK7 截图验收）。
   用设计令牌补回下方间距；上方页头自带 padding-bottom，不再叠加外边距。modern 不在
   此列——它的 `.sc-checkout--modern .sc-checkout__error` 自带 14px 下外边距，这里用
   :not(.sc-checkout--modern) 把它排除在外，保持原样。 */
.sc-checkout:not(.sc-checkout--modern) [data-sc-checkout-unavailable-notice],
.sc-checkout:not(.sc-checkout--modern) [data-sc-checkout-prior-payment-notice] {
  margin-block: 0 var(--sc-space-4);
}

/* 结账页副标题（仅游客态"已有账户？登录"，见 _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 A2/A3 结账页浮动标签输入（Shopify 式核心观感）：``.sc-fld`` 系——
   真实 ``<label>`` + ``placeholder=" "`` 触发 ``:placeholder-shown``，见
   ``checkout_routes.py::_field_input`` docstring。刻意用全新类名，不动共享的
   ``.sc-field``/``.sc-input``（那两个类同时被账户页/两步式降级页复用，见
   ``_field_input`` 注释）。 ---- */
.sc-fld {
  position: relative;
  margin-bottom: var(--sc-space-3);
}

/* 并排在 .sc-field-row 里的字段：行自身的 gap 已提供列间距，字段自带的
   margin-bottom 只在“行”这一级保留一次，避免行内每个格子各自多出一份底距。 */
.sc-field-row .sc-fld {
  margin-bottom: 0;
}

.sc-fld__input {
  width: 100%;
  height: 3.25rem;
  padding: 1.25rem var(--sc-space-3) 0.375rem;
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-md);
  font: inherit;
  font-size: var(--sc-text-base);
  color: var(--sc-color-fg);
  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);
  appearance: none;
}

.sc-fld--select .sc-fld__input {
  padding-top: 1.125rem;
  cursor: pointer;
}

.sc-fld__input:focus {
  outline: none;
  border-color: var(--sc-color-primary);
  box-shadow: 0 0 0 1px var(--sc-color-primary);
}

.sc-fld label {
  position: absolute;
  left: 0.8125rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--sc-text-base);
  color: var(--sc-color-fg-subtle);
  pointer-events: none;
  transition: all var(--sc-duration-fast) var(--sc-ease-out);
}

/* 有值/聚焦时标签上浮缩小；select 没有 :placeholder-shown，"是否已有值"由
   _CHECKOUT_SCRIPT 的 has-value 同步函数在 load/change 时切换 class。 */
.sc-fld__input:focus + label,
.sc-fld__input:not(:placeholder-shown) + label,
.sc-fld select.has-value + label {
  top: 0.875rem;
  font-size: var(--sc-text-xs);
  color: var(--sc-color-fg-muted);
}

.sc-fld__input::placeholder {
  color: transparent;
}

.sc-fld--select::after {
  content: "";
  position: absolute;
  right: var(--sc-space-3);
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--sc-color-fg-muted);
  border-bottom: 1.5px solid var(--sc-color-fg-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* ---- 结账优化批一 Bug②（2026-08-10）：字段级报错——1:1 对齐定稿原型
   docs/superpowers/prototypes/2026-08-10-checkout-optimization/index.html
   的 .sc-fld__error/is-invalid 机制（同样的选择器、同样的令牌）。SSR 只在
   字段真的出错时才渲染 .sc-fld__error 子元素并给外壳加 is-invalid，这里的
   display:none 默认态是防御性的（给未来任何 JS 动态切换 class 场景兜底），
   不依赖它才能在当前纯 SSR 路径下正确隐藏。 ---- */
.sc-fld.is-invalid .sc-fld__input {
  border-color: var(--sc-color-destructive);
}

.sc-fld__error {
  display: none;
  margin-top: var(--sc-space-1);
  font-size: var(--sc-text-xs);
  color: var(--sc-color-destructive);
  align-items: center;
  gap: 0.35rem;
}

.sc-fld.is-invalid .sc-fld__error {
  display: flex;
}

.sc-fld__error svg {
  flex-shrink: 0;
}

/* ---- 需求2/3（2026-07-23）：区号选择器 + 国家可搜索下拉共用样式——纯复用
   本文件既有令牌（.sc-fld 系间距/圆角/边框色 + --sc-shadow-popover 弹层
   阴影），不新增字面量色值。JS 见 _CHECKOUT_SCRIPT 的 scMakeFilterList/
   initCountrySearch/initPhoneEnhance。 ---- */
.sc-combobox {
  position: relative;
}

.sc-combobox__panel {
  list-style: none;
  margin: 0;
  padding: var(--sc-space-1) 0;
  max-height: 12rem;
  overflow-y: auto;
}

/* 国家可搜索下拉：面板直接绝对定位挂在 .sc-combobox（自身即 anchor）下方。
   手机号区号面板不是 .sc-combobox 的直接子级（挂在 .sc-combobox__dropdown
   里，见下），本规则不影响它。 */
.sc-combobox > .sc-combobox__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--sc-space-1));
  left: 0;
  right: 0;
  background: var(--sc-color-surface);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-lg);
  box-shadow: var(--sc-shadow-popover);
}

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

.sc-combobox__option {
  padding: var(--sc-space-2) var(--sc-space-3);
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg);
  cursor: pointer;
}

.sc-combobox__option.is-active {
  background: var(--sc-color-primary-subtle);
}

.sc-combobox__empty {
  padding: var(--sc-space-2) var(--sc-space-3);
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-subtle);
}

/* 手机号区号下拉：搜索框 + 面板整块绝对定位挂在 .sc-fld（已 position:
   relative）左下方。 */
.sc-combobox__dropdown {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--sc-space-1));
  left: 0;
  width: 16rem;
  max-width: 90vw;
  padding: var(--sc-space-2);
  background: var(--sc-color-surface);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-lg);
  box-shadow: var(--sc-shadow-popover);
}

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

.sc-combobox__dropdown .sc-combobox__panel {
  max-height: 10rem;
}

.sc-combobox__search {
  width: 100%;
  height: 2.25rem;
  padding: 0 var(--sc-space-2);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-sm);
  font: inherit;
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg);
  background: var(--sc-color-surface);
}

.sc-combobox__search:focus {
  outline: none;
  border-color: var(--sc-color-primary);
  box-shadow: 0 0 0 1px var(--sc-color-primary);
}

/* 手机号区号按钮：嵌在 .sc-fld 左边缘（Shopify 惯例），号码输入右挪让位。 */
.sc-phone-combo__input {
  padding-left: 4.25rem;
}

.sc-phone-combo__code {
  position: absolute;
  left: 0.4375rem;
  top: 0.5625rem;
  bottom: 0.5625rem;
  display: flex;
  align-items: center;
  padding: 0 var(--sc-space-2);
  border: none;
  border-right: 1px solid var(--sc-color-border);
  background: transparent;
  font: inherit;
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg);
  cursor: pointer;
}

.sc-phone-combo__code:focus {
  outline: none;
  color: var(--sc-color-primary);
}

.sc-fld.sc-phone-combo label {
  left: 4.25rem;
}

/* 邮箱域名建议 + 拼写纠错（结账优化批一 D⑥，1:1 对照原型
   docs/superpowers/prototypes/2026-08-10-checkout-optimization/index.html
   改动6；纯复用本文件既有令牌，不新增字面量色值——.sc-suggest 结构同上方
   .sc-combobox 系弹层，.sc-typo 配色沿用 .sc-badge--warning 的
   warning-subtle 底 + warning 字色搭配，见 checkout_routes.py
   ::_email_typo_html/initEmailSuggest()）。 */
.sc-suggest {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--sc-space-1));
  left: 0;
  right: 0;
  background: var(--sc-color-surface);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-lg);
  box-shadow: var(--sc-shadow-popover);
  padding: var(--sc-space-1) 0;
  list-style: none;
  margin: 0;
}

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

.sc-suggest li {
  padding: var(--sc-space-2) var(--sc-space-3);
  font-size: var(--sc-text-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sc-space-2);
}

.sc-suggest li:hover,
.sc-suggest li.is-active {
  background: var(--sc-color-primary-subtle);
}

.sc-suggest li .at {
  color: var(--sc-color-fg-subtle);
}

/* 结账优化批三重做（服务器代理架构，2026-08-11 用户拍板）：Google 地址自动
   联想。旧版直连 Google Maps JS 时用的是 Google 原生注入的 .pac-container/
   .pac-item（非本项目 DOM，无法定制结构/无障碍属性）；改服务器代理后浏览器
   自己拼下拉 DOM（见 checkout_routes.py::_CHECKOUT_SCRIPT 的
   initGooglePlaces），结构对齐本文件既有 .sc-suggest（邮箱域名建议）弹层
   —— 复用既有设计令牌，不新增字面量色值。列表末尾的 .sc-gplaces__attr 是
   "Powered by Google" 归属栏，Google Places 服务条款强制要求展示，本规则不
   隐藏/覆盖它。 */
.sc-gplaces {
  position: absolute;
  z-index: var(--sc-z-dropdown);
  top: calc(100% + var(--sc-space-1));
  left: 0;
  right: 0;
  background: var(--sc-color-surface);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-lg);
  box-shadow: var(--sc-shadow-popover);
  padding: var(--sc-space-1) 0;
  list-style: none;
  margin: 0;
  max-height: 16rem;
  overflow-y: auto;
}

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

.sc-gplaces li[role="option"] {
  padding: var(--sc-space-2) var(--sc-space-3);
  font-size: var(--sc-text-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sc-space-2);
}

.sc-gplaces li[role="option"]:hover,
.sc-gplaces li[role="option"].is-active {
  background: var(--sc-color-primary-subtle);
}

.sc-gplaces li[role="option"] .pin {
  color: var(--sc-color-fg-subtle);
}

.sc-gplaces__attr {
  padding: var(--sc-space-2) var(--sc-space-3);
  font-size: 0.6875rem;
  color: var(--sc-color-fg-subtle);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--sc-color-border);
}

.sc-typo {
  margin-top: var(--sc-space-2);
  padding: var(--sc-space-2) var(--sc-space-3);
  background: var(--sc-color-warning-subtle);
  border-radius: var(--sc-radius-sm);
  font-size: var(--sc-text-xs);
  color: var(--sc-color-warning);
  display: flex;
  align-items: center;
  gap: var(--sc-space-2);
}

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

.sc-typo svg {
  flex-shrink: 0;
}

.sc-typo__fix {
  font: inherit;
  font-weight: var(--sc-font-weight-semibold);
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* 结账页选中态背景（CO-7 T1 定稿）：只在 .sc-checkout 容器内让已选中的单选卡片
   带一层极浅暖灰底——不改全局 .sc-option-card（该类同时被商品页等其它 storefront
   页面复用）。字面量 #fbfaf8（非令牌）同本文件 .sc-checkout 的 --sc-color-canvas:
   #fff 一样，是结账页专属的一次性 scoped 覆写，不是要新增一个全站设计令牌。 */
.sc-checkout .sc-option-card:has(input:checked) {
  background: #fbfaf8;
}

/* 结账问题3a（2026-08-11，原型 docs/superpowers/prototypes/
   2026-08-11-checkout-shipping-compact/index.html 定稿，1:1 落地）：运费方式
   卡片纵向内边距太大 + __body 允许换行——窄屏价格换到第二行把卡片撑得比同页
   其它卡片明显高。scope 收紧到 [data-sc-shipping-methods] 容器内（该属性是
   SSR shipping_methods_html 与 JS renderShippingOptions() 共用的唯一挂载点，
   见 checkout_routes.py 的 `data-sc-shipping-methods`/`shippingMethodsEl`），
   不碰全局 .sc-option-card（同一个类同时被商品页/支付方式卡复用，见上方
   本文件 2694-2697 行注释警告）。选中态浅底沿用上面
   `.sc-checkout .sc-option-card:has(input:checked)` 的既有 scoped 背景覆写，
   这里不重复定义；原型里 Free 价格的绿色只是示意色，未接语义令牌前沿用默认
   前景色（价格不额外上色）。所有断点统一生效（原型本身不分桌面/移动断点，
   紧 padding + 单行不换行在桌面同样不难看）。 */
.sc-checkout [data-sc-shipping-methods] .sc-option-card {
  padding: 0.6875rem 0.8125rem; /* 11px 13px，对齐原型定稿的一次性 scoped 值 */
  min-height: 3.25rem; /* 52px */
}

.sc-checkout [data-sc-shipping-methods] .sc-option-card__body {
  flex-wrap: nowrap;
}

.sc-checkout [data-sc-shipping-methods] .sc-option-card__label {
  font-size: 0.875rem; /* 14px，对齐原型；不复用 --sc-text-sm(13px) */
  font-weight: var(--sc-font-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-checkout [data-sc-shipping-methods] .sc-option-card__desc {
  font-size: var(--sc-text-xs); /* 12px，原型定稿值正好对应既有令牌 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-checkout [data-sc-shipping-methods] .sc-option-card__price {
  font-size: 0.875rem; /* 14px，同 __label */
  flex-shrink: 0;
}

/* 支付方式卡片外壳（CO-7 A6，定稿原型 .pay-card/.pay-card__head/.pay-frame）：
   选中单选后展开的子内容（NexPay 内嵌 iframe 容器/说明/账单地址勾选框）在同一张
   卡片视觉内，不是紧挨着的下一张卡片。 */
.sc-pay-card {
  border-radius: var(--sc-radius-md);
  overflow: hidden;
}

.sc-pay-card .sc-option-card {
  border-radius: var(--sc-radius-md) var(--sc-radius-md) 0 0;
}

.sc-pay-frame {
  border: 1px solid var(--sc-color-border-strong);
  border-top: none;
  border-radius: 0 0 var(--sc-radius-md) var(--sc-radius-md);
  background: var(--sc-color-surface);
  padding: var(--sc-space-4);
}

.sc-pay-frame:empty {
  display: none;
}

/* 结账页支付区优化 · 手机端 M1 紧凑竖排（2026-08-26 用户拍板，原型 docs/
   superpowers/prototypes/2026-08-25-checkout-payment-layout/p2-mobile.html
   M1 方案定稿 + LEAD-裁决.md，1:1 落地）：上方 .sc-pay-frame 兜底 iframe
   高度 420→240px 省掉大半空白后，手机端仍要多滑 163px 才能看到最后一个
   支付方式——未选中通道逐条叠加的行高就是这段距离。这里只在真手机宽度
   （767px，同本文件 .sc-bp-mobile / 头部收起断点口径——比结账页 2 栏→1 栏
   切换用的 1023px 更窄，不波及平板宽度）压缩未选中通道的内边距 + 隐藏其
   描述行，选中通道保留原样（略宽松）。纯 CSS 媒体查询，不改 DOM 结构/
   文案/组件/顺序——三个候选方案（M1 紧凑竖排 / M2 横向通道条 / M3 手风琴）
   选 M1 正是因为零代价：M2 要新造设计系统里没有的横向选择器组件（原型
   shared.css 里 .m2-chip 本就标注"临时画的示意，不是既有资产"，违反本文件
   一贯的"禁页面级私搭样式"惯例）；M3 会把 PayPal 折进"其它支付方式"抽屉，
   而支付图标本身是买家的转化信号，能不藏就不藏。
   scope 用 .sc-pay-card 祖先——结账页支付选项唯一容器，全仓库 grep 确认
   `.sc-pay-card`/`.sc-pay-frame` 只在 checkout_routes.py 出现（SSR
   `_pay_option_label_html`、JS `nxCreateChannelOption` 两条渲染路径都会
   给每个支付选项套一层 `.sc-pay-card`），不碰同一个 `.sc-option-card` 基类
   的运费方式卡片（已有自己的 `[data-sc-shipping-methods]` scope，见上方
   「结账问题3a」紧凑规则）与两步式降级支付页（payment_routes.py）的
   `.sc-option-card--sub`（另一套次级子选项视觉，不在本次范围）。
   选中态用 `:has(input:checked)`（不是类名切换）——同本文件既有
   `.sc-checkout .sc-option-card:has(input:checked)` 选中态背景覆写同一
   选择器口径，因为结账页支付选项渲染的是真实 `<label><input type="radio">`
   （原型静态示意稿里的 `.is-checked` 类只是原型简化，不是生产 DOM 约定）。
   压缩后的未选中卡片经真机测量仍高于 44px（WCAG 2.1 AA 触控下限）——48px
   是 iOS/Android 官方推荐触控尺寸，44px 是可接受下限，这里贴着下限之上，
   不能因为想更紧凑而继续压。

   2026-08-26 lead 复核线上效果后追加（未选中卡片实测仍 86-88px，远高于
   47px 目标，M1 没打到要害）：上面四条规则只压了 padding/gap，没碰真正的
   大头——.sc-option-card__body 基类是 flex-wrap: wrap（见下方约 3572 行），
   .sc-pay-brands 是 flex-shrink: 0（约 2895 行）、里面每个品牌角标 <img>
   高 1.25rem/20px（约 2918 行）。真实 NexPay 渠道常带 6-9 个受理卡组织
   （JS nxApplyBrandBadge 最多渲 6 个 + "+N"，见 checkout_routes.py 里对应
   注释），6 个 20px 角标 + 边框/内边距 ≈ 180px，加标题/单选圈后超出手机内容
   宽度（390px 视口刨去左右 padding 约剩 358px），被 flex-wrap 甩到第二行，
   卡片直接高一倍——这才是 79px→47px 目标没达成的真正原因，不是内边距。
   这里补三条：①禁止换行（body 恒定单行）；②角标区允许收缩（不再是
   flex-shrink:0 死扛原宽度）；③手机端角标图缩到 1rem/16px。第四条"手机端
   角标数量上限 6→4"是 JS 逻辑，接线在 checkout_routes.py 的
   nxApplyBrandBadge/nxMaxBrandLogos（按 window.innerWidth 与这里同一个
   767px 断点判定，并在 resize/orientationchange 时重新应用，不是只判一次）。
   scope 同样收在 .sc-pay-card 祖先内、且都比各自基类多至少一层 .sc-pay-card
   类选择器（specificity 严格更高，不依赖源码顺序判胜负——上面 gap 那条
   规则已经在真机上踩过"同特异度靠顺序、顺序判错就静默不生效"的坑，这次
   直接用"specificity 严格更高"避开同一类问题，不再赌顺序）。 */
@media (max-width: 767px) {
  .sc-pay-card .sc-option-card {
    padding: 0.6875rem var(--sc-space-4); /* 16px→11px 上下，左右不变 */
  }

  .sc-pay-card .sc-option-card__desc {
    display: none;
  }

  .sc-pay-card .sc-option-card:has(input:checked) {
    padding: var(--sc-space-3) var(--sc-space-4); /* 选中态 12px，比未选中略宽松 */
  }

  .sc-pay-card .sc-option-card:has(input:checked) .sc-option-card__desc {
    display: block; /* 选中通道若带说明文字，不因上面这条规则丢失 */
  }

  .sc-pay-card .sc-option-card__body {
    /* 基类（约 3572 行）flex-wrap: wrap 特异度 (0,1,0)；这条 (0,2,0)，严格
       更高，稳赢不看源码顺序。真正的大头修复：禁止品牌角标行换行到第二行
       （换行是卡片高度翻倍的真凶，不是内边距）。 */
    flex-wrap: nowrap;
  }

  .sc-pay-card .sc-pay-brands {
    /* 基类（约 2895 行）flex-shrink: 0 特异度 (0,1,0)；这条 (0,2,0)。角标区
       允许在空间不够时收缩（配合下面缩小的图标尺寸 + JS 端减少的图标数量），
       而不是死扛原宽度把标题/单选圈一起挤到换行。 */
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    /* 跟着下一条 img 的 1rem 内容高重算外沿高度（不加外框的 .sc-pay-mark 用）。 */
    --sc-pay-mark-size: calc(1rem + 2 * (0.125rem + 1px));
  }

  .sc-pay-card .sc-pay-brands img {
    /* 基类（约 2918 行）specificity (0,1,1)；这条 (0,2,1)。20px→16px，配合
       JS 端手机宽度下最多渲 4 个（而不是桌面的 6 个），两者一起把角标行
       真实占宽压到手机内容宽度以内。 */
    height: 1rem;
  }

  .sc-option-list[data-sc-payment-methods] {
    /* 选择器必须带 .sc-option-list（不能只写属性选择器）——本文件下方
       3529 行 .sc-option-list 基类同样是 (0,1,0) 特异度且源码顺序在后，
       纯属性选择器在等特异度平局时会被它压过去，媒体查询包一层也不加分
       （真机排查坐实：只写属性选择器版本时，手机端 getComputedStyle 量出来
       的 gap 仍是基类的 12px，没吃到这条规则）。
       这里补上类名把特异度提到 (0,2,0)，与源码顺序无关地稳赢。 */
    gap: var(--sc-space-2); /* 12px→8px，逐条叠加省下的距离是"一屏装下"结论的一部分 */
  }

  /* 提一层 .sc-pay-card:基类 (0,1,0) 在 2764 行、本条在其后,靠源码顺序也能赢,
     但那是脆的(顺序一变就翻车,同 .sc-option-list 那条的教训)。提到 (0,2,0) 与顺序无关。 */
  .sc-pay-card .sc-pay-frame {
    padding: var(--sc-space-3) var(--sc-space-2); /* 16px→12px/8px，收窄给内嵌 iframe 让宽度 */
  }
}

/* 线下收款方式（既有真实功能，定稿原型没有这个场景）：作为 .sc-pay-card 的同级
   选项列表渲在其下方，非空时才有必要的顶部留白。 */
.sc-pay-card + .sc-option-list {
  margin-top: var(--sc-space-3);
}

/* newsletter / 账单地址等复选框行（定稿原型 .pay-check），复用同一新类名策略。 */
.sc-fld-check {
  display: flex;
  align-items: center;
  gap: var(--sc-space-2);
  margin-top: var(--sc-space-2);
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg);
}

.sc-fld-check input {
  accent-color: var(--sc-color-primary);
  width: 0.9375rem;
  height: 0.9375rem;
  flex-shrink: 0;
}

/* 跳转型渠道提示（定稿原型 .redirect-note）：虚线框居中——选中跳转型支付方式时
   frame 容器不留空白，明确告知点击 CTA 后去 NexPay 托管页完成支付。 */
.sc-redirect-note {
  display: block;
  margin: 0;
  padding: var(--sc-space-5) var(--sc-space-4);
  border: 1px dashed var(--sc-color-border);
  border-radius: var(--sc-radius-sm);
  background: var(--sc-color-surface);
  text-align: center;
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-muted);
}

/* TWP v2 owns the only final submit surface after capability config. This
   selector outranks the generic display:block above while the fallback
   control is removed from pointer and keyboard use. */
[data-sc-twp-iframe-fallback][hidden] {
  display: none;
}

button[data-sc-twp-iframe-fallback] {
  width: 100%;
  font: inherit;
  cursor: pointer;
}

/* 跳转型渠道预填说明（Task 14，对照原型视图⑤ .sf-prefill）：redirect note 下方
   小字，告知买家已填的邮箱/电话/收货地址会自动带到跳转页，无需重填。 */
.sc-pay-prefill {
  margin: var(--sc-space-2) 0 0;
  text-align: center;
  font-size: var(--sc-text-xs);
  color: var(--sc-color-fg-subtle);
}

/* 支付标题品牌容器：NexPay 运行时动态填充，SDK 与 TWP 静态展示复用同一套样式。 */
.sc-pay-brands {
  display: flex;
  gap: 0.3125rem;
  flex-shrink: 0;
  /* 下方 .sc-pay-brands img 那种带外框标志的外沿高度 = 内容高 + 上下内边距 + 上下边框
     （同 VenziaPay paymentIconOuterHeight）。不加外框的 .sc-pay-mark 取它作可见高度，
     与并列标志外沿齐平。手机端与 modern 各自重算（跟着各自的 img 规则）。 */
  --sc-pay-mark-size: calc(1.25rem + 2 * (0.125rem + 1px));
}

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

.sc-pay-brands span {
  font-size: 0.5625rem;
  font-weight: var(--sc-font-weight-bold);
  letter-spacing: 0.03em;
  border: 1px solid var(--sc-color-border);
  border-radius: 0.1875rem;
  padding: 0.1875rem 0.375rem;
  background: var(--sc-color-surface);
  color: var(--sc-color-fg-muted);
  white-space: nowrap;
}

/* NexPay payType 返回官方卡组织 SVG 时,角标渲 <img>(真实受理范围)而非文字 chip。 */
.sc-pay-brands img {
  height: 1.25rem;
  width: auto;
  border: 1px solid var(--sc-color-border);
  border-radius: 0.1875rem;
  background: var(--sc-color-surface);
  padding: 0.125rem 0.1875rem;
  box-sizing: content-box;
}

/* VenziaPay 支付标志里**不加外框**的官方标志：Apple Pay、Google Pay（图标 Task 6，
   markup 见 checkout_routes.py::_venziapay_icon_mark_html，键清单与 VenziaPay 登记表
   PAYMENT_ICON_UNFRAMED_KEYS 一致，有用例锁定）。
   - 外框例外：官方标志自带圆角描边，再套上面那圈外框会成双边框；Apple 规范还明文
     禁止其标志与其它图形共用边框。
   - 等高：可见高度 = --sc-pay-mark-size（并列带框标志的外沿高度），Google Pay 不小于
     并列标志。
   - 按可见内容校准、不撑大布局框：google_pay.svg 四周自带大片透明留白。盒子只取可见
     内容框（横竖两向），原图整张等比放大、负偏移对齐，留白落在盒外被裁掉，行高不变。
     各键比例由服务端按 VenziaPay PAYMENT_ICON_VISIBLE_BOX 算好，经 style 上的
     --sc-pay-mark-* 给出；原图文件不动。
   - 四周留白：左右补到不少于标志高度的 1/4（Apple Pay 规范；容器 gap 是 0.3125rem）。
   特异性：容器 (0,2,0) 压过 .sc-pay-brands span (0,1,1)；图 (0,3,0) 压过本文件所有
   "… .sc-pay-brands img" 变体（最高 (0,2,1)），不靠源码顺序。 */
.sc-pay-brands .sc-pay-mark {
  position: relative;
  display: block;
  flex: none;
  box-sizing: content-box;
  overflow: hidden;
  width: calc(var(--sc-pay-mark-size) * var(--sc-pay-mark-w));
  height: var(--sc-pay-mark-size);
  margin: 0 max(0px, calc(var(--sc-pay-mark-size) / 4 - 0.3125rem));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.sc-pay-brands .sc-pay-mark .sc-pay-mark__img {
  position: absolute;
  left: calc(var(--sc-pay-mark-size) * var(--sc-pay-mark-img-x));
  top: calc(var(--sc-pay-mark-size) * var(--sc-pay-mark-img-y));
  display: block;
  width: calc(var(--sc-pay-mark-size) * var(--sc-pay-mark-img-w));
  height: calc(var(--sc-pay-mark-size) * var(--sc-pay-mark-img-h));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  object-fit: fill;
}

/* NexPay 内嵌 iframe 挂载到 onload 之间的加载占位（结账页/两步式降级页共用）。 */
.sc-nexpay-frame-loading {
  margin: 0;
  padding: var(--sc-space-5) var(--sc-space-4);
  text-align: center;
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-subtle);
}

.sc-nexpay-frame-loading::before {
  content: "";
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: var(--sc-space-2);
  vertical-align: -0.125rem;
  border: 2px solid var(--sc-color-border);
  border-top-color: var(--sc-color-fg-muted);
  border-radius: 50%;
  animation: sc-spin 0.8s linear infinite;
}

/* 方式列表拉取中的骨架条：aria-busy 时渲染一条中性占位（不显示假选项文字），
   拉取结束由 JS 置回 aria-busy=false 自然消失。 */
[data-sc-nexpay-methods][aria-busy="true"]::before {
  content: "";
  display: block;
  height: 2.75rem;
  border-radius: var(--sc-radius-sm);
  background: linear-gradient(
    90deg,
    var(--sc-color-surface-sunken) 25%,
    var(--sc-color-surface) 50%,
    var(--sc-color-surface-sunken) 75%
  );
  background-size: 200% 100%;
  animation: sc-shimmer 1.1s ease-in-out infinite;
}

@keyframes sc-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* TopWinWinPay 两步卡域在 /session 与 iframe ready 之间的真实加载态。
   对齐已定稿原型：字段骨架占住最终卡框高度，避免「空白 → 突然撑开」；只有
   受信 page_style 到达后才隐藏。全部颜色/间距来自店铺主题令牌。 */
.sc-twp-frame-loading {
  display: grid;
  gap: var(--sc-space-2);
  min-height: 12.9375rem;
  padding: var(--sc-space-3);
  box-sizing: border-box;
}

.sc-twp-frame-loading[hidden] {
  display: none;
}

.sc-twp-frame-loading__fields {
  display: grid;
  gap: var(--sc-space-2);
}

.sc-twp-frame-loading__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sc-space-2);
}

.sc-twp-frame-loading__label,
.sc-twp-frame-loading__box,
.sc-twp-frame-loading__button {
  display: block;
  border-radius: var(--sc-radius-sm);
  background: linear-gradient(
    90deg,
    var(--sc-color-surface-sunken) 25%,
    var(--sc-color-surface) 50%,
    var(--sc-color-surface-sunken) 75%
  );
  background-size: 200% 100%;
  animation: sc-shimmer 1.1s ease-in-out infinite;
}

.sc-twp-frame-loading__label {
  width: 5.5rem;
  height: 0.5rem;
}

.sc-twp-frame-loading__box {
  height: 2.5rem;
}

.sc-twp-frame-loading__button {
  height: 2.375rem;
}

.sc-emb-loading.sc-twp-frame-loading__hint {
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sc-twp-frame-loading__label,
  .sc-twp-frame-loading__box,
  .sc-twp-frame-loading__button {
    animation: none;
  }
}

/* 方式列表拉取失败的就地重试按钮（只重拉只读 /methods 端点，不建单）。 */
.sc-nexpay-retry {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--sc-color-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* 2026-07-22 用户验收修复一：stripe/paypal/square/airwallex 四家内嵌卡域
   ——买家选中即在本页就地挂载真实 SDK 卡输入组件（见 checkout_routes.py 的
   _EMB_PROVIDER_FIELDS_HTML + _CHECKOUT_SCRIPT 的 emb* 函数族）。容器结构与
   above 的 NexPay 内嵌（.sc-nexpay-frame-loading/.sc-nexpay-retry）同一套
   视觉语言，复用既有 sc-spin 关键帧/间距令牌，不新增设计体系。 */
.sc-emb-embed {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-3);
}

/* 会话创建中 / SDK 脚本加载中的占位文案（默认可见，挂载成功后由 JS 隐藏）。 */
.sc-emb-loading {
  margin: 0;
  padding: var(--sc-space-5) var(--sc-space-4);
  text-align: center;
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-subtle);
}

.sc-emb-loading::before {
  content: "";
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: var(--sc-space-2);
  vertical-align: -0.125rem;
  border: 2px solid var(--sc-color-border);
  border-top-color: var(--sc-color-fg-muted);
  border-radius: 50%;
  animation: sc-spin 0.8s linear infinite;
}

/* stripe/square/airwallex：单个 SDK 就地挂载容器（Square/Airwallex 官方
   API 按 id 字符串选择器挂载，见 embMountSquare/embMountAirwallex）。挂载前
   预留最小高度，避免加载占位文案消失、SDK iframe 尚未渲染完成之间的选项卡
   高度跳动。 */
[data-sc-emb-mount] {
  min-height: 3rem;
}

/* airwallex：3DS 验证挂载容器——3DS 挑战仅在发卡行要求时才由 SDK 动态填充
   内容，默认不占可见高度。 */
[data-sc-emb-3ds] {
  min-height: 0;
}

/* paypal：number + (expiry|cvv) 光板字段容器——PayPal CardFields iframe 自带
   完整输入外观（边框/占位/校验态），我方不套 .sc-field/.sc-input 壳（套壳=
   双层边框且 iframe 默认高度与壳错位，2026-07-22 用户验收拍板单层）；观感
   对齐经 JS 侧 EMB_INPUT_TOKENS 传给 SDK 官方样式 API（checkout_routes）。 */
[data-sc-emb-fields] {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2);
}

/* 2026-07-22 静默预载定稿：paypal/airwallex 拆分字段（number/expiry/cvv）
   页面一加载就并行挂载，各自 iframe 就绪前保留与 EMB_INPUT_TOKENS.height
   一致的最小高度，避免"空 div → iframe 撑开"这一瞬间的布局跳动（与
   [data-sc-emb-mount] 对 stripe/square 单容器的处理同一诉求）。 */
[data-sc-emb-field] {
  min-height: 52px;
}

/* 有效期 | 安全码 并排一行（紧凑专业，同主流收银台惯例）。 */
.sc-emb-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sc-space-3);
}

/* =====================================================================
   Whop 结账页内嵌（计划 3C CK3）：卡框三格骨架 / Whop 列表插槽 + 两行占位 /
   两处 Whop 声明插槽 + 一行占位 / 8 秒提示两个动作。逐条照定稿原型
   docs/superpowers/prototypes/2026-09-30-whop-checkout/checkout-payment.html
   的 <style id="whop-new"> ①–④ 并入（modern 专属规则在 MODERN-SKIN-SCOPE-GUARD
   区段内「Whop」分组）。骨架的扫光复用上方 TWP 骨架（.sc-twp-frame-loading）
   同一套渐变令牌与 sc-shimmer 关键帧，不改任何 TWP 类，也不另起别名类——骨架
   全由 aria-busy="true" 驱动，JS（_CHECKOUT_SCRIPT 的 embLoadingStage）只切
   aria-busy，就绪时原位揭示、尺寸不变、不跳动。
   🔴 用户追加要求：Whop 声明（BrandingElement）容器永不隐藏——这里只在
   aria-busy="true" 期间把 Whop 挂载点移出排版并 visibility:hidden（不用
   display:none，否则 iframe 不渲染、onReady 不来），由我方一行占位原位替身。
   ===================================================================== */

/* ① 卡框三格：每一格自己就是骨架（Whop onReady 之前）。尺寸 = 真框尺寸，
      揭示时只是撤掉 aria-busy，不改任何尺寸，不跳动。 */
[data-sc-emb-provider="whop"] [data-sc-emb-field] {
  position: relative;
  border-radius: var(--sc-radius-md);
}

[data-sc-emb-provider="whop"] [data-sc-emb-field][aria-busy="true"] > * {
  visibility: hidden;
}

[data-sc-emb-provider="whop"] [data-sc-emb-field][aria-busy="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sc-color-surface-sunken) 25%, var(--sc-color-surface) 50%, var(--sc-color-surface-sunken) 75%);
  background-size: 200% 100%;
  animation: sc-shimmer 1.1s ease-in-out infinite;
}

/* ② Whop 付款方式列表插槽：[data-sc-payment-methods] 里的一整块（定稿决定 2）。
      classic：Whop 按独立卡片逐行画（separated），沿用列表 12px（手机 8px）间距；
      modern 的连续列表规则见 modern 区段。 */
[data-sc-whop-list] {
  position: relative;
  min-width: 0;
}

/* classic：Whop 列表（连同列表下的声明）后面还有别的通道行时多留 8px，
   让那行声明读作 Whop 列表的收尾，而不是下一张卡片的。modern 有分隔线，不需要。 */
[data-sc-payment-methods] > [data-sc-whop-list] + * {
  margin-top: var(--sc-space-2);
}

/* ②b 列表加载占位（定稿决定 5）：Whop onReady 之前，插槽里显示我方两行骨架，
      高度约等于两行付款方式（classic 每行 58px、行距 12px，手机 48px / 8px）。
      Whop 列表照常挂载，只是移出文档流且不可见。就绪后撤掉 aria-busy，列表按实际
      行数展开。 */
[data-sc-whop-list-skeleton] {
  display: none;
}

[data-sc-whop-list][aria-busy="true"] > [data-sc-whop-list-skeleton] {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-3);
}

[data-sc-whop-list][aria-busy="true"] > [data-sc-whop-mount] {
  position: absolute;
  inset: 0 0 auto;
  visibility: hidden;
  pointer-events: none;
}

.sc-whop-list-skeleton__row {
  display: flex;
  align-items: center;
  gap: var(--sc-space-3);
  height: 3.625rem;
  padding: 0 var(--sc-space-4);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-md);
  background: var(--sc-color-surface);
}

.sc-whop-list-skeleton__row::before,
.sc-whop-list-skeleton__row::after {
  content: "";
  display: block;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--sc-color-surface-sunken) 25%, var(--sc-color-surface) 50%, var(--sc-color-surface-sunken) 75%);
  background-size: 200% 100%;
  animation: sc-shimmer 1.1s ease-in-out infinite;
}

.sc-whop-list-skeleton__row::before {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
}

.sc-whop-list-skeleton__row::after {
  width: 34%;
  height: 0.625rem;
  border-radius: var(--sc-radius-full);
}

@media (max-width: 767px) {
  [data-sc-whop-list][aria-busy="true"] > [data-sc-whop-list-skeleton] {
    gap: var(--sc-space-2);
  }

  .sc-whop-list-skeleton__row {
    height: 3rem;
  }
}

/* ③ Whop 声明插槽（定稿决定 1）：两处各一行——卡框下方（卡框展开区的最后一行，
      排在 8 秒提示与报错之后，间距沿用卡框内 12px）、Whop 列表下方。Pay now 下方
      不再放。classic：列表下那行离最后一张卡片 12px。 */
[data-sc-whop-branding] {
  position: relative;
}

[data-sc-whop-list] > [data-sc-whop-branding] {
  margin-top: var(--sc-space-3);
}

/* ③c 列表失败/超时提示（CK3 修复轮 1b，lead 裁定；原型未画此态）：与卡行 8 秒提示
      同一组件（.sc-redirect-note + 两个 .sc-nexpay-retry），排在列表挂载点之后、列表
      声明之前，间距同声明。 */
[data-sc-whop-list] > [data-sc-whop-slow] {
  margin-top: var(--sc-space-3);
}

/* ③b 声明就绪前：Whop 声明照常挂载但移出文档流、不可见；插槽里显示一行字高的
      短骨架（高 17px、宽 200px、最多占 70%，居中），就绪时原位替换，下方内容不跳动。 */
[data-sc-whop-branding][aria-busy="true"] > [data-sc-whop-mount] {
  position: absolute;
  inset: 0 0 auto;
  visibility: hidden;
  pointer-events: none;
}

[data-sc-whop-branding][aria-busy="true"]::before {
  content: "";
  display: block;
  width: 12.5rem;
  max-width: 70%;
  height: 1.0625rem;
  margin: 0 auto;
  border-radius: var(--sc-radius-sm);
  background: linear-gradient(90deg, var(--sc-color-surface-sunken) 25%, var(--sc-color-surface) 50%, var(--sc-color-surface-sunken) 75%);
  background-size: 200% 100%;
  animation: sc-shimmer 1.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-sc-emb-provider="whop"] [data-sc-emb-field][aria-busy="true"]::before,
  .sc-whop-list-skeleton__row::before,
  .sc-whop-list-skeleton__row::after,
  [data-sc-whop-branding][aria-busy="true"]::before {
    animation: none;
  }
}

/* ④ 8 秒提示：沿用 .sc-redirect-note 的提示框，两个动作用 .sc-nexpay-retry 文字
      按钮，这里只管隐藏态与两个按钮的排列（.sc-redirect-note 自带 display:block，
      [hidden] 需要显式压住，同上方 [data-sc-twp-iframe-fallback][hidden]）。 */
[data-sc-whop-slow][hidden] {
  display: none;
}

.sc-whop-slow__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sc-space-2) var(--sc-space-5);
  margin-top: var(--sc-space-2);
}

/* ③d 列表选中时的付款报错（CK4，lead 裁定；原型只画了卡框下的报错，列表选中时卡框
      是收起的）：JS 在列表里、列表声明之前插一条 .sc-checkout__error，间距同列表提示。 */
[data-sc-whop-list] > [data-sc-whop-list-error] {
  margin-top: var(--sc-space-3);
}

/* ⑥ 「金额已更新」提示（定稿决定 4，原型 whop-new ⑥）：JS 插在 Pay now 正上方，复用
      .sc-checkout__error。表单列 gap 32px，这里把提示与按钮之间收成 12px；modern 见
      modern 区段（14px，桌面端提示条上方补 32px）。 */
.sc-checkout__form > [data-sc-total-updated] {
  margin-bottom: calc(var(--sc-space-3) - var(--sc-space-6));
}

.sc-fld-check input:disabled {
  cursor: not-allowed;
}

/* 支付安全一句话提示（定稿原型 .pay-secure-note），CTA 正下方。 */
.sc-checkout__secure-note {
  display: flex;
  align-items: center;
  gap: var(--sc-space-2);
  font-size: var(--sc-text-xs);
  color: var(--sc-color-fg-muted);
  margin-top: var(--sc-space-3);
}

/* 页脚政策链接行（CO-7 A7，定稿原型 .foot-links）：CTA/安全提示下方、离开
   Payment 区块前的信任信号——只渲染商家已保存非空内容的政策，见
   build_checkout_page_data 的 footer_policy_links。 */
.sc-checkout__footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-5);
  margin-top: var(--sc-space-6);
  padding-top: var(--sc-space-5);
  border-top: 1px solid var(--sc-color-border);
}

.sc-checkout__footer-links a {
  font-size: var(--sc-text-xs);
  color: var(--sc-color-fg-muted);
  text-decoration: underline;
}

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

/* ---- 订单完成感谢页 / 持久订单状态页（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);
  /* 未到达步骤的编号：`fg-subtle`(oklch 0.64) 落在 `surface-sunken`(0.955) 上只有
     **2.95**，而徽标里是 `--sc-text-xs` 的小字号数字，适用 WCAG AA 正文 4.5 —— 买家
     在结账页看不清"我在第几步、总共几步"。换成语义更贴切的 `fg-muted`(0.48)：
     对比度 **5.73**，且它本就是「次要文字」令牌——未到达的步骤是次要信息，
     不是"占位/禁用"（那才是 fg-subtle 的语义）。不新发明颜色，用既有令牌。
     ⚠️这不属于 WCAG「禁用控件」豁免：步骤条是**信息性指示**，不是失效的表单控件。 */
  color: var(--sc-color-fg-muted);
  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: minmax(0, 1fr);
  gap: var(--sc-space-7);
  align-items: start;
}

.sc-checkout-layout > * {
  min-width: 0;
}

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

  /* 表单列贴齐右侧摘要栏、限宽避免长行——对齐原型 .main 的
     max-width:620px + margin-left:auto（原型是 flex 58% 轨道内右对齐，
     这里网格轨道本身即 1fr，直接限宽+右对齐达到同样视觉效果）。 */
  .sc-checkout-layout > .sc-checkout__form {
    max-width: 38.75rem;
    margin-left: auto;
    width: 100%;
  }

  /* 摘要栏在桌面端吸顶，随表单滚动可见（转化优先）；左侧分隔线对齐
     原型 .aside 的 border-left（未复刻原型灰底 var(--bg-summary)——
     店铺前台设计系统暖白基调下额外灰底与摘要卡片自身的留白/边框会
     重复叠加，如实标注为次要视觉偏离）。 */
  .sc-checkout__summary-col {
    position: sticky;
    top: var(--sc-space-5);
    border-left: 1px solid var(--sc-color-border);
    padding-left: var(--sc-space-7);
  }
}

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

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

/* 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);
  min-width: 0;
  flex-wrap: wrap;
}

.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);
  min-width: 0;
}

.sc-checkout-section__link {
  font-size: var(--sc-text-sm);
  color: var(--sc-color-primary);
  font-weight: var(--sc-font-weight-medium);
  min-width: 0;
  margin-left: auto;
  overflow-wrap: anywhere;
}

.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);
}

/* NexPay 内嵌渠道子选择（结账页/两步式降级页共用）：从属于外层「Credit or
   debit card」支付方式卡片的次级子选项——缩进 + 小号字 + 常规（非强调）边框，
   避免与顶级支付方式卡片同款 .sc-option-card 造成"两个都选中"的视觉混淆。 */
.sc-option-card--sub {
  padding: var(--sc-space-3);
  margin-left: var(--sc-space-4);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-sm);
}

.sc-option-card--sub .sc-option-card__label {
  font-size: var(--sc-text-sm);
}

.sc-nexpay-methods__heading {
  margin: 0 0 var(--sc-space-2) var(--sc-space-4);
  font-size: var(--sc-text-xs);
  font-weight: var(--sc-font-weight-medium);
  color: var(--sc-color-fg-subtle);
}

/* 支付方式：卡号输入内嵌卡组织图标 */
.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 {
  /* 只定位、不裁剪——裁剪框下沉到 __thumb，好让数量角标能悬浮探出图片边框
     外（角标是 __media 的另一个直接子级，不在 __thumb 的 overflow:hidden
     范围内）。 */
  position: relative;
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
}

.sc-summary-line__thumb {
  width: 100%;
  height: 100%;
  border-radius: var(--sc-radius-sm);
  overflow: hidden;
  background: var(--sc-color-surface-sunken);
}

.sc-summary-line__qty {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  min-width: 1.15rem;
  height: 1.15rem;
  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-color-canvas 令牌（对抗复核 CSS nit）：本组件只在
     .sc-checkout 容器内使用（结账/支付步骤/感谢页/订单状态页，见
     app/storefront/checkout_routes.py::_summary_line_html 与
     payment_routes.py 的复用点），该容器已把 --sc-color-canvas 局部覆写为
     #fff（见本文件 .sc-checkout 规则）——描边因此仍是白色，但不再是与
     容器背景脱节的裸字面量；fallback #fff 只在令牌缺失时兜底，同本文件
     其它 var(--sc-color-canvas, #fff) 用法同一口径。 */
  box-shadow: 0 0 0 2px var(--sc-color-canvas, #fff);
}

.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);
}

/* 免运进度条（结账优化批一 D⑦，1:1 对照原型
   docs/superpowers/prototypes/2026-08-10-checkout-optimization/index.html
   改动7 .sc-ship-progress；SSR 只在 checkout_routes.py::_free_shipping_progress
   返回非 None 时渲染，见其 docstring）。 */
.sc-ship-progress {
  padding: var(--sc-space-3);
  background: var(--sc-color-surface-sunken);
  border-radius: var(--sc-radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2);
}

.sc-ship-progress__msg {
  font-size: var(--sc-text-xs);
  color: var(--sc-color-fg-muted);
}

.sc-ship-progress__msg b {
  color: var(--sc-color-fg);
  font-weight: var(--sc-font-weight-semibold);
}

.sc-ship-progress.is-free .sc-ship-progress__msg {
  color: var(--sc-color-success);
}

.sc-ship-progress__track {
  height: 0.375rem;
  border-radius: var(--sc-radius-full);
  background: var(--sc-color-border);
  overflow: hidden;
}

.sc-ship-progress__bar {
  height: 100%;
  border-radius: var(--sc-radius-full);
  background: var(--sc-color-fg);
  transition: width 400ms var(--sc-ease-out);
}

.sc-ship-progress.is-free .sc-ship-progress__bar {
  background: var(--sc-color-success);
}

/* 移动端结账摘要折叠触发条（CO-7 A8，定稿原型 .m-summary summary）：
   .sc-checkout__summary-col 本身是 <details open>，桌面端把这个 <summary>
   触发条隐藏——open 属性一直是 true，内容照常渲染，只是不再有可点击的折叠头；
   移动端（<1024px，同 .sc-checkout-layout 断点，避免中间出现两种布局都不生效的
   死区）才显示为可点击的折叠条，默认展开态与桌面一致（<details open>），买家可
   点击收起。折叠态下不重复渲染金额——避免和下方完整摘要各自维护一份、失焦风险
   （见 checkout_routes.py::_checkout_html 的相关说明），只显示"查看订单摘要"文案。 */
.sc-checkout__summary-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-3);
  width: 100%;
  padding: var(--sc-space-4) var(--sc-space-5);
  margin-bottom: var(--sc-space-4);
  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-muted);
  list-style: none;
}

.sc-checkout__summary-toggle::-webkit-details-marker {
  display: none;
}

.sc-checkout__summary-toggle::after {
  content: "\25BE";
  transition: transform var(--sc-duration-fast) var(--sc-ease-out);
}

[open] > .sc-checkout__summary-toggle::after {
  transform: rotate(180deg);
}

@media (max-width: 1023px) {
  .sc-checkout__summary-toggle {
    display: flex;
  }
}

/* =====================================================================
   内嵌卡域样式令牌（设计 §12.2，CK2）：classic 默认值。Stripe / PayPal /
   Square / Airwallex 四家挂载函数与 Whop 的 whopAppearance()（见
   checkout_routes.py 的 embInputTokens()）都经这份令牌取值——iframe 无法
   继承页面 CSS 变量与自托管字体，只能显式传字符串，这里的字面量就是最终
   会喂给各家 SDK 的值，逐项等于改造前 EMB_INPUT_TOKENS 的写死常量：
   52px 高 / 3px 圆角 / #dedede 边框 / 聚焦 #161616 / 15px #1b1b1b 正文 /
   #8c8c8c 占位色 / #c53929 错误色 / #fdfdfd 背景 / Archivo 字族。
   .sc-checkout--modern 下会整体覆写为 --sc-ckm-* 令牌（见该规则块内「内嵌
   卡域令牌」分组），classic 结账页维持这份默认值不变。放在 modern 哨兵区段
   之外——这批变量本身不分皮肤，只是 modern 通过类选择器整体覆写它们。
   ===================================================================== */
:root {
  --sc-emb-input-font-family: Archivo, 'Helvetica Neue', Arial, sans-serif;
  --sc-emb-input-font-size: 15px;
  --sc-emb-input-text: #1b1b1b;
  --sc-emb-input-placeholder: #8c8c8c;
  --sc-emb-input-border: #dedede;
  --sc-emb-input-focus: #161616;
  --sc-emb-input-danger: #c53929;
  --sc-emb-input-radius: 3px;
  --sc-emb-input-height: 52px;
  --sc-emb-input-surface: #fdfdfd;
}

/* === MODERN-SKIN-SCOPE-GUARD:BEGIN ===
   这对哨兵注释是给 tests/test_checkout_modern_skin.py::
   test_modern_skin_css_is_fully_scoped 定位用的，**别删、别挪**：它逐条断言
   本区段内每个选择器都带 `.sc-checkout--modern` 作用域。classic 与购物车/
   账户/订单页共用同一批基类，漏一条作用域就会污染所有在售店。 */
/* =====================================================================
   结账页 modern 皮肤（「简洁单页」，2026-09-11 用户定稿）
   ---------------------------------------------------------------------
   原型（视觉唯一真源）：docs/superpowers/prototypes/2026-09-11-shopify-
   checkout-skin/（checkout.html + checkout-skin.css）；设计文档：
   docs/superpowers/specs/2026-09-11-shopify-checkout-skin-prototype-design.md。
   下面这份令牌逐条照抄原型 checkout-skin.css 顶部那张表——它们是从母本
   （用户自有 Shopify 店 velorowraps.com 结账页）实测出来的具体值，不是
   随手取的近似色，**改一个就偏离母本一点**，要改先回原型改。

   作用域铁律：**所有规则都必须挂在 `.sc-checkout--modern` 下**。classic
   皮肤（2026-07-20 定稿的极简黑白奢感）与购物车/账户/订单页共用同一批
   `.sc-fld` / `.sc-summary` / `.sc-option-card` / `.sc-pay-card` 基类，
   这里只做「本皮肤内的局部覆写」，一条都不许漏出去。

   SSR 结构：两套皮肤共用同一份四区块表单 HTML（见 checkout_routes.py 的
   `*_section_html` 变量），差异只在外壳与本文件这段 CSS。
   ===================================================================== */
.sc-checkout--modern {
  /* ---- 颜色（母本实测）---- */
  --sc-ckm-accent: #005bd1;
  --sc-ckm-accent-hover: #00459e;
  --sc-ckm-accent-subdued: #f5f6ff;
  --sc-ckm-bg: #ffffff;
  --sc-ckm-bg-subdued: #f5f5f5;
  --sc-ckm-bg-subdued-2: #ededed;
  --sc-ckm-border: #dedede;
  --sc-ckm-border-emphasis: #8f8f8f;
  --sc-ckm-text: #000000;
  --sc-ckm-text-subdued: #707070;
  --sc-ckm-text-subdued-aside: #666666;
  --sc-ckm-critical: #d91c1c;

  /* ---- 尺寸（母本实测）---- */
  --sc-ckm-field-h: 49px;
  --sc-ckm-btn-h: 50px;
  --sc-ckm-btn-sm-h: 35px;
  --sc-ckm-control: 18px;
  --sc-ckm-thumb: 64px;
  --sc-ckm-topbar-h: 93px;
  --sc-ckm-radius: 12px;
  --sc-ckm-radius-lg: 16px;

  /* 内容盒 min(980px, 100vw - 80px) 居中；--sc-ckm-col-main 的语义是
     「左栏内容宽 + 右侧 gap」，与原型同名变量一致。 */
  --sc-ckm-content: 980px;
  --sc-ckm-col-main: 540px;
  --sc-ckm-col-main-gap: 41px;
  --sc-ckm-col-aside-gap: 39px;
  --sc-ckm-pad: max(40px, calc((100vw - var(--sc-ckm-content)) / 2));

  /* ---- 字体（母本实测，供下方 font-family/font-size 与内嵌卡域令牌共用，
     避免同一个值写两遍）---- */
  --sc-ckm-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    sans-serif;
  --sc-ckm-font-size: 14px;

  /* ---- 内嵌卡域令牌（设计 §12.2，CK2）：整体覆写 :root 的 --sc-emb-input-*
     默认值，供 embInputTokens() 读取——逐项对应上面的颜色/尺寸/字体令牌，
     modern 结账页走系统字体、母本实测的圆角/间距，是与 classic 刻意的差异。 ---- */
  --sc-emb-input-font-family: var(--sc-ckm-font-family);
  --sc-emb-input-font-size: var(--sc-ckm-font-size);
  --sc-emb-input-text: var(--sc-ckm-text);
  --sc-emb-input-placeholder: var(--sc-ckm-text-subdued);
  --sc-emb-input-border: var(--sc-ckm-border);
  --sc-emb-input-focus: var(--sc-ckm-accent);
  --sc-emb-input-danger: var(--sc-ckm-critical);
  --sc-emb-input-radius: var(--sc-ckm-radius);
  --sc-emb-input-height: var(--sc-ckm-field-h);
  --sc-emb-input-surface: var(--sc-ckm-bg);

  padding: 0;
  /* 母本用系统字体栈（原型 §3.2 明列，不引外部字体）——这是本皮肤与
     classic 的一处刻意差异：classic 跟随主题的 Archivo 品牌字，modern
     一比一跟母本走系统字。数值挪进上面的 --sc-ckm-font-* 令牌，这里改引用，
     渲染值不变。 */
  font-family: var(--sc-ckm-font-family);
  font-size: var(--sc-ckm-font-size);
  line-height: 1.35;
  color: var(--sc-ckm-text);
  background: var(--sc-ckm-bg);
}

/* ---- 极简顶栏：居中 Logo + 右侧购物袋（去全站导航/页脚，见 render_minimal_page
   的 chrome 参数）---- */
.sc-checkout--modern .sc-checkout__topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--sc-ckm-topbar-h);
  border-bottom: 1px solid var(--sc-ckm-border);
  background: var(--sc-ckm-bg);
}

.sc-checkout--modern .sc-checkout__brand {
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 120px);
  color: var(--sc-ckm-text);
  text-decoration: none;
}

.sc-checkout--modern .sc-checkout__brand-logo {
  /* 母本 Logo 盒 180 × 52：任何比例的图都按最大盒等比收进去，不拉伸。 */
  max-width: 180px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.sc-checkout--modern .sc-checkout__brand-text {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-checkout--modern .sc-checkout__bag {
  position: absolute;
  right: var(--sc-ckm-pad);
  display: inline-flex;
  color: var(--sc-ckm-accent);
}

/* ---- 两栏：左白底、右灰底且向右出血到视口边缘（母本 1440 实测：左栏内容
   x=230 w=499、分界 x=770、右栏内容 x=810 w=400）---- */
.sc-checkout--modern .sc-checkout-layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.sc-checkout--modern .sc-checkout__main {
  width: calc(var(--sc-ckm-pad) + var(--sc-ckm-col-main));
  flex-shrink: 0;
  min-width: 0;
  padding: 40px var(--sc-ckm-col-main-gap) 40px var(--sc-ckm-pad);
  background: var(--sc-ckm-bg);
}

.sc-checkout--modern .sc-checkout__summary-col {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  position: sticky;
  top: 0;
  padding: 40px 20px 40px var(--sc-ckm-col-aside-gap);
  background: var(--sc-ckm-bg-subdued);
  border-left: 1px solid var(--sc-ckm-border);
}

.sc-checkout--modern .sc-checkout__summary-toggle {
  display: none;
}

/* 1000–1119px：母本 1024 实测（--sc-ckm-col-main 含 gap，故 480+40=520）。 */
@media (max-width: 1119px) {
  .sc-checkout--modern {
    --sc-ckm-pad: 40px;
    --sc-ckm-col-main: 520px;
    --sc-ckm-col-main-gap: 40px;
    --sc-ckm-col-aside-gap: 42px;
  }
}

/* ---- 表单区块：母本区块间距 32、标题→首字段 14 ---- */
.sc-checkout--modern .sc-checkout__form {
  display: block;
  gap: 0;
}

.sc-checkout--modern .sc-checkout-section {
  display: block;
  gap: 0;
}

.sc-checkout--modern .sc-checkout-section + .sc-checkout-section {
  margin-top: 32px;
}

.sc-checkout--modern .sc-checkout-section__head {
  align-items: baseline;
  margin-bottom: 14px;
}

.sc-checkout--modern .sc-checkout-section__title {
  display: block;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sc-ckm-text);
}

.sc-checkout--modern .sc-checkout-section__aside {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 母本把「Shipping method」画成 Delivery 区块内的子标题（16/600，上 24 下 14），
   不是独立区块。SSR 必须保留 4 个独立 [data-sec] 区块（无 JS 降级地基），
   所以这里只在视觉上把它接回上一区块。 */
.sc-checkout--modern .sc-checkout-section[data-sec="shipping"] {
  margin-top: 0;
}

.sc-checkout--modern .sc-checkout-section[data-sec="shipping"] .sc-checkout-section__head {
  margin: 24px 0 14px;
}

.sc-checkout--modern .sc-checkout-section[data-sec="shipping"] .sc-checkout-section__title {
  font-size: 16px;
}

.sc-checkout--modern .sc-checkout-section__link {
  font-size: 14px;
}

.sc-checkout--modern .sc-checkout-section__link a,
.sc-checkout--modern .sc-checkout__subtitle a {
  color: var(--sc-ckm-accent);
  font-weight: 400;
  text-decoration: underline;
}

/* ---- 表单级横幅（缺货 / 校验失败 / 运费报错）：母本没有这几条，沿用既有
   结构，只把配色换成母本的 critical 组、并补回 modern 下被 display:block 拿掉
   的区块间距。 ---- */
.sc-checkout--modern .sc-checkout__error {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--sc-ckm-radius);
  background: #fef6f6;
  color: var(--sc-ckm-critical);
  font-size: 14px;
}

.sc-checkout--modern .sc-checkout__subtitle {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--sc-ckm-text-subdued);
}

/* ---- 字段（浮动标签）：母本 49 高、圆角 12、内边距 21/10/6 ---- */
.sc-checkout--modern .sc-fld {
  margin-bottom: 10px;
}

.sc-checkout--modern .sc-field-row {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.sc-checkout--modern .sc-fld__input {
  /* display:block 是必须的：input 默认 inline-block + baseline 对齐，会在行盒
     底部留出 descender 间隙，把并排行的行高从 49 撑到 59（原型踩过这个坑，
     见 checkout-skin.css 同处注释）。 */
  display: block;
  height: var(--sc-ckm-field-h);
  padding: 21px 10px 6px;
  border: 1px solid var(--sc-ckm-border);
  border-radius: var(--sc-ckm-radius);
  background: var(--sc-ckm-bg);
  font-size: 14px;
  line-height: 1.35;
  color: var(--sc-ckm-text);
}

.sc-checkout--modern .sc-fld--select .sc-fld__input {
  padding-top: 21px;
}

.sc-checkout--modern .sc-fld__input:focus {
  border-color: var(--sc-ckm-accent);
  box-shadow: 0 0 0 1px var(--sc-ckm-accent);
}

.sc-checkout--modern .sc-fld label {
  left: 11px;
  font-size: 14px;
  color: var(--sc-ckm-text-subdued);
  transition: top 150ms ease, font-size 150ms ease, transform 150ms ease;
}

.sc-checkout--modern .sc-fld__input:focus + label,
.sc-checkout--modern .sc-fld__input:not(:placeholder-shown) + label,
.sc-checkout--modern .sc-fld select.has-value + label,
.sc-checkout--modern .sc-fld--select label {
  top: 7px;
  transform: none;
  font-size: 12px;
  color: var(--sc-ckm-text-subdued);
}

.sc-checkout--modern .sc-fld--select::after {
  right: 12px;
  border-right-color: var(--sc-ckm-text-subdued);
  border-bottom-color: var(--sc-ckm-text-subdued);
}

/* 报错态：母本是红框 + 1px 红环 + 下方 14px 红字，**没有图标**。 */
.sc-checkout--modern .sc-fld.is-invalid .sc-fld__input {
  border-color: var(--sc-ckm-critical);
  box-shadow: 0 0 0 1px var(--sc-ckm-critical);
}

.sc-checkout--modern .sc-fld__error {
  margin-top: 4px;
  font-size: 14px;
  line-height: 18px;
  color: var(--sc-ckm-critical);
}

.sc-checkout--modern .sc-fld__error svg {
  display: none;
}

.sc-checkout--modern .sc-fld-check {
  margin-top: 10px;
  gap: 10px;
  font-size: 14px;
  color: var(--sc-ckm-text);
}

/* ---- 单选圆 / 复选框（母本 18px；选中单选是 6px 主色边形成白心）---- */
.sc-checkout--modern .sc-option-card input[type="radio"],
.sc-checkout--modern .sc-fld-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: var(--sc-ckm-control);
  height: var(--sc-ckm-control);
  flex-shrink: 0;
  border: 1px solid var(--sc-ckm-border-emphasis);
  background: var(--sc-ckm-bg);
  cursor: pointer;
}

.sc-checkout--modern .sc-option-card input[type="radio"] {
  border-radius: 50%;
}

.sc-checkout--modern .sc-option-card input[type="radio"]:checked {
  border: 6px solid var(--sc-ckm-accent);
}

.sc-checkout--modern .sc-fld-check input[type="checkbox"] {
  border-radius: 4px;
}

.sc-checkout--modern .sc-fld-check input[type="checkbox"]:checked {
  border-color: var(--sc-ckm-accent);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 5l2.6 2.6L9 2' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 10px 10px no-repeat,
    var(--sc-ckm-accent);
}

/* ---- 灰底提示条（未填地址时的运费提示 / 各类 hint）---- */
.sc-checkout--modern [data-sc-shipping-methods] .sc-field__hint {
  margin: 0;
  padding: 14px;
  border-radius: var(--sc-ckm-radius);
  background: var(--sc-ckm-bg-subdued);
  color: var(--sc-ckm-text-subdued);
  font-size: 14px;
  text-align: center;
}

/* ---- 运费卡 ---- */
/* 运费卡间距 10（母本）。⚠️ 这里**不能**把基类的 flex 列换成 grid：运费卡的
   名称/副标/价格都带 white-space: nowrap（见上方「结账问题3a」那批规则），
   grid 的 auto 轨道会被内容的 min-content 撑开，390 视口实测整页横向溢出到
   457px；flex 列的 stretch 不吃 min-content，同样得到单列且不溢出。 */
.sc-checkout--modern [data-sc-shipping-methods] {
  gap: 10px;
}

.sc-checkout--modern [data-sc-shipping-methods] .sc-option-card {
  min-height: 0;
  padding: 14px;
  gap: 14px;
  border: 1px solid var(--sc-ckm-border);
  border-radius: var(--sc-ckm-radius);
  background: var(--sc-ckm-bg);
}

.sc-checkout--modern [data-sc-shipping-methods] .sc-option-card:has(input:checked) {
  border-color: var(--sc-ckm-accent);
  background: var(--sc-ckm-accent-subdued);
  box-shadow: none;
}

.sc-checkout--modern [data-sc-shipping-methods] .sc-option-card__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-ckm-text);
}

.sc-checkout--modern [data-sc-shipping-methods] .sc-option-card__desc {
  font-size: 14px;
  color: var(--sc-ckm-text);
}

.sc-checkout--modern [data-sc-shipping-methods] .sc-option-card__price {
  font-size: 14px;
  font-weight: 600;
}

/* 母本手机端运费卡的副标是**换行**的（"Estimated delivery: Tue, Sep 22 -
   Fri, Sep 26" 占两行），不是省略号截断。classic 那批紧凑规则（2026-08-11）
   给名称/副标上了 nowrap + ellipsis，本皮肤按母本放开——买家看不全送达日期
   是实打实的信息损失。外层 __body/__info 自带 min-width:0，换行不会撑破。 */
.sc-checkout--modern [data-sc-shipping-methods] .sc-option-card__label,
.sc-checkout--modern [data-sc-shipping-methods] .sc-option-card__desc {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* ---- 付款手风琴：每行 49 高、行间 1px 分隔；选中行浅蓝底，其下展开灰底面板。
   多通道时外框是 .sc-option-list[data-sc-payment-methods]；未连任何通道的
   sandbox 兜底外层是 .sc-pay-card（两种结构见 _checkout_html）。 ---- */
.sc-checkout--modern [data-sc-payment-provider-options] {
  margin-top: 14px;
}

/* 🔴 这里**不能**用 overflow:hidden（2026-09-20 修的真 bug）：卡组织「+N」
   浮层是向上弹的（bottom: calc(100% + 8px)），外框一裁就只剩底边——原型上
   实测复现过。圆角裁切改由下面「首尾子元素各自圆角」承担，视觉一致且不吃掉
   任何溢出内容。改这段前先想清楚浮层还弹不弹得出来。 */
.sc-checkout--modern [data-sc-payment-provider-options] > [data-sc-payment-methods],
.sc-checkout--modern [data-sc-payment-provider-options] > .sc-pay-card {
  display: block;
  gap: 0;
  border: 1px solid var(--sc-ckm-border);
  border-radius: var(--sc-ckm-radius);
  /* 基类 `.sc-pay-card { overflow: hidden }` 也会裁掉浮层（sandbox 兜底结构的
     外框正是一张 .sc-pay-card）。那条基类同时服务 classic，动不得，所以在
     modern 作用域里显式放开——让「modern 的付款外框一律不裁剪」是条规矩，
     而不是"碰巧今天那个形态里没有浮层"。 */
  overflow: visible;
}

/* 圆角由首尾**真正上色的那个元素**承担。外框自己的 border 本来就是圆的，
   需要收角的只是子元素那些方角背景。
   多通道结构：框 > .sc-pay-card > (.sc-option-card 行 + .sc-pay-frame 面板)，
   所以要往下探一层，不能照搬原型那种扁平的 `> *:first-child`。 */
.sc-checkout--modern [data-sc-payment-provider-options]
  > [data-sc-payment-methods] > .sc-pay-card:first-child > .sc-option-card {
  border-top-left-radius: var(--sc-ckm-radius);
  border-top-right-radius: var(--sc-ckm-radius);
}

/* 末行圆角落在谁身上取决于面板展不展开：展开时是面板，收起时回到行上。
   ⚠️ 不能两个都给——面板展开时行若也带圆角，行与面板之间会露出两个白色缺口。
   `[hidden]` 是 syncPayOptionFrames 实时切的，:has() 跟着实时重算。
   「末行」= **其后再没有可见兄弟**的那一行，不是 :last-child：VenziaPay 的 Apple Pay /
   Google Pay 候选行只要连上就在信用卡行后面（SSR 隐藏，实时回执与 canMakePayment 都过了
   才揭示，图标 Task 7），用 :last-child 的话信用卡行在跳转模式、没开钱包、设备不支持时
   都丢掉底部圆角，灰色面板的直角从圆角外框里露出来。 */
.sc-checkout--modern [data-sc-payment-provider-options]
  > [data-sc-payment-methods]
  > .sc-pay-card:not(:has(~ :not([hidden])))
  > .sc-pay-frame:not([hidden]) {
  border-bottom-left-radius: var(--sc-ckm-radius);
  border-bottom-right-radius: var(--sc-ckm-radius);
}

.sc-checkout--modern [data-sc-payment-provider-options]
  > [data-sc-payment-methods]
  > .sc-pay-card:not(:has(~ :not([hidden]))):not(:has(> .sc-pay-frame:not([hidden])))
  > .sc-option-card {
  border-bottom-left-radius: var(--sc-ckm-radius);
  border-bottom-right-radius: var(--sc-ckm-radius);
}

/* 未连任何通道的 sandbox 兜底结构：框本身就是 .sc-pay-card，
   子元素是 .sc-option-list（里面一张选项行）+ .sc-pay-frame。 */
.sc-checkout--modern [data-sc-payment-provider-options]
  > .sc-pay-card > [data-sc-payment-methods] > .sc-option-card:first-child {
  border-top-left-radius: var(--sc-ckm-radius);
  border-top-right-radius: var(--sc-ckm-radius);
}

.sc-checkout--modern [data-sc-payment-provider-options]
  > .sc-pay-card > .sc-pay-frame:last-child {
  border-bottom-left-radius: var(--sc-ckm-radius);
  border-bottom-right-radius: var(--sc-ckm-radius);
}

.sc-checkout--modern [data-sc-payment-methods] > .sc-pay-card {
  border-radius: 0;
  overflow: visible;
}

.sc-checkout--modern [data-sc-payment-methods] > .sc-pay-card + .sc-pay-card {
  border-top: 1px solid var(--sc-ckm-border);
}

.sc-checkout--modern [data-sc-payment-provider-options] .sc-option-card {
  min-height: 0;
  height: var(--sc-ckm-field-h);
  padding: 0 14px;
  gap: 14px;
  border: 0;
  border-radius: 0;
  background: var(--sc-ckm-bg);
  box-shadow: none;
}

.sc-checkout--modern [data-sc-payment-provider-options] .sc-option-card:has(input:checked) {
  background: var(--sc-ckm-accent-subdued);
  box-shadow: none;
}

.sc-checkout--modern [data-sc-payment-provider-options] .sc-option-card__label {
  font-size: 14px;
  font-weight: 400;
  color: var(--sc-ckm-text);
}

.sc-checkout--modern .sc-pay-frame {
  padding: 14px;
  border: 0;
  border-top: 1px solid var(--sc-ckm-border);
  border-radius: 0;
  background: var(--sc-ckm-bg-subdued);
}

/* 跳转型 / COD 的说明：母本是居中灰字，没有虚线框。 */
.sc-checkout--modern .sc-redirect-note {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--sc-ckm-text-subdued);
  font-size: 14px;
  text-align: center;
}

.sc-checkout--modern .sc-pay-prefill {
  margin-top: 10px;
  text-align: center;
  color: var(--sc-ckm-text-subdued);
}

/* ---- Whop（计划 3C CK3，定稿原型 whop-new ①–③ 的 modern 部分；基础规则见本区段
   之外的「Whop 结账页内嵌」分组）：卡框三格按 modern 字段高度与圆角画骨架；Whop
   列表按连续列表嵌进付款外框（定稿决定 2，避免框中框），与上下行补 1px 分隔线，
   在首/尾时补圆角；两行占位是连续两行 49px + 中间 1px 分隔线；列表下那行声明是
   外框里的最后一行，上方 1px 分隔线。 ---- */
.sc-checkout--modern [data-sc-emb-provider="whop"] [data-sc-emb-field] {
  min-height: var(--sc-ckm-field-h);
  border-radius: var(--sc-ckm-radius);
}

.sc-checkout--modern [data-sc-emb-provider="whop"] [data-sc-emb-field][aria-busy="true"]::before {
  background: linear-gradient(90deg, var(--sc-ckm-bg-subdued-2) 25%, var(--sc-ckm-bg) 50%, var(--sc-ckm-bg-subdued-2) 75%);
  background-size: 200% 100%;
}

/* 卡框下方的报错横幅（复用 .sc-checkout__error）：modern 的该类自带 14px 下外边距，
   放进卡框面板后会与面板内边距叠加，这里在 Whop 卡框内收掉。 */
.sc-checkout--modern [data-sc-emb-provider="whop"] .sc-checkout__error {
  margin-bottom: 0;
}

.sc-checkout--modern [data-sc-payment-methods] > * + [data-sc-whop-list],
.sc-checkout--modern [data-sc-payment-methods] > [data-sc-whop-list] + * {
  border-top: 1px solid var(--sc-ckm-border);
}

.sc-checkout--modern [data-sc-payment-methods] > [data-sc-whop-list]:first-child {
  border-top-left-radius: var(--sc-ckm-radius);
  border-top-right-radius: var(--sc-ckm-radius);
  overflow: hidden;
}

/* 同上：「末行」按其后有没有可见兄弟算（VenziaPay 钱包候选行可能隐藏地排在后面）。 */
.sc-checkout--modern [data-sc-payment-methods] > [data-sc-whop-list]:not(:has(~ :not([hidden]))) {
  border-bottom-left-radius: var(--sc-ckm-radius);
  border-bottom-right-radius: var(--sc-ckm-radius);
  overflow: hidden;
}

.sc-checkout--modern [data-sc-payment-methods] > [data-sc-whop-list] + * {
  margin-top: 0;
}

.sc-checkout--modern [data-sc-whop-list][aria-busy="true"] > [data-sc-whop-list-skeleton] {
  gap: 0;
}

.sc-checkout--modern .sc-whop-list-skeleton__row {
  height: var(--sc-ckm-field-h);
  gap: 14px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: var(--sc-ckm-bg);
}

.sc-checkout--modern .sc-whop-list-skeleton__row + .sc-whop-list-skeleton__row {
  border-top: 1px solid var(--sc-ckm-border);
}

.sc-checkout--modern .sc-whop-list-skeleton__row::before,
.sc-checkout--modern .sc-whop-list-skeleton__row::after {
  background: linear-gradient(90deg, var(--sc-ckm-bg-subdued-2) 25%, var(--sc-ckm-bg) 50%, var(--sc-ckm-bg-subdued-2) 75%);
  background-size: 200% 100%;
}

.sc-checkout--modern [data-sc-whop-list] > [data-sc-whop-branding],
.sc-checkout--modern [data-sc-whop-list] > [data-sc-whop-slow] {
  margin-top: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--sc-ckm-border);
}

/* 列表选中时的付款报错（CK4，原型未画的状态）：连续列表里按列表行内边距缩进，
   收掉 modern .sc-checkout__error 自带的 14px 下外边距。 */
.sc-checkout--modern [data-sc-whop-list] > [data-sc-whop-list-error] {
  margin: 10px 14px;
}

/* 「金额已更新」提示（定稿决定 4）：与 Pay now 间距 14px；桌面端提示条上方就是付款区，
   补回按钮原本的 32px 上间距，按钮自己的 32px 让给提示条（手机端见下方 999px 断点）。 */
.sc-checkout--modern .sc-checkout__form > [data-sc-total-updated] {
  margin-top: 32px;
  margin-bottom: 14px;
}

.sc-checkout--modern .sc-checkout__form > [data-sc-total-updated] + .sc-btn-primary {
  margin-top: 0;
}

@media (max-width: 999px) {
  .sc-checkout--modern .sc-checkout__form > [data-sc-total-updated] {
    margin-top: 14px;
  }
}

.sc-checkout--modern [data-sc-whop-branding][aria-busy="true"]::before {
  background: linear-gradient(90deg, var(--sc-ckm-bg-subdued-2) 25%, var(--sc-ckm-bg) 50%, var(--sc-ckm-bg-subdued-2) 75%);
  background-size: 200% 100%;
}

/* 「单通道退化」那三条规则已于 2026-09-20 随用户拍板「一个通道一个框，多一个
   通道多一个框，无例外」删除。连带 data-sc-pay-channels 标记本身也不再渲染
   （形态只剩一种，留着就是悬空引用），别再按它写选择器。 */

.sc-checkout--modern .sc-pay-brands img {
  height: 24px;
  width: 38px;
  object-fit: contain;
  border-radius: 4px;
  padding: 0;
  border: 1px solid var(--sc-ckm-border);
}

/* 不加外框的 Apple Pay / Google Pay（.sc-pay-mark，见基类那段说明）跟着上一条的
   带框标志重算外沿高度：24px 内容 + 无内边距 + 上下 1px 边框。与手机端那条
   .sc-pay-card .sc-pay-brands 同为 (0,2,0)，本条在后——与 img 高度的取胜方向一致
   （modern 手机端 img 仍是 24px）。 */
.sc-checkout--modern .sc-pay-brands {
  --sc-pay-mark-size: calc(24px + 2 * (0px + 1px));
}

/* ---- 卡组织「+N」可展开浮层（2026-09-20 用户拍板，1:1 对照原型 §16
   `.sv-brands__more/__toggle/__pop`）----
   受理的卡多于 4 张时前 4 个直出、其余收进浮层。三条打开路径：桌面悬浮
   （纯 CSS）、桌面点击、手机点按（触屏没有 hover，只有 :hover 方案等于
   在手机上没有这个功能），外加键盘。 */
/* 🔴 先把基类 `.sc-pay-brands span` 挡掉再说。那条规则是给 classic 那块死文字
   「+N」写的（9px 粗体 + 1px 浅色描边 + 白底 + 内边距），它按 `span` 选择，
   所以我们这两个新 span 会**一并吃到**——实测浮层因此多一圈描边、尺寸比原型
   大 2×2px。基类不能动（classic 的 "+N" 还在用它），只能在 modern 作用域里
   显式复位。放在后面两条规则**之前**：同为 (0,2,0) 特异性，靠源码顺序决胜。 */
.sc-checkout--modern .sc-pay-brands__more,
.sc-checkout--modern .sc-pay-brands__pop {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
}

.sc-checkout--modern .sc-pay-brands__more {
  position: relative;
  display: inline-flex;
}

.sc-checkout--modern .sc-pay-brands__toggle {
  height: 24px;
  min-width: 26px;
  padding: 0 6px;
  border: 1px solid var(--sc-ckm-border);
  border-radius: 4px;
  background: var(--sc-ckm-bg);
  font-family: inherit;
  font-size: 12px;
  color: var(--sc-ckm-text-subdued);
  cursor: pointer;
  line-height: 1;
}

.sc-checkout--modern .sc-pay-brands__toggle:hover {
  border-color: var(--sc-ckm-border-emphasis);
}

.sc-checkout--modern .sc-pay-brands__toggle:focus-visible {
  outline: none;
  border-color: var(--sc-ckm-accent);
  box-shadow: 0 0 0 1px var(--sc-ckm-accent);
}

.sc-checkout--modern .sc-pay-brands__pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  display: none;
  /* 🔴 必须显式给宽：绝对定位元素的 shrink-to-fit 以**包含块**为可用宽度，
     而这里的包含块是 26px 宽的 `__more`。实测不写这一行时三条 auto 轨道会被
     压成 0.42px（整个浮层 29px 宽，图全没了）。写上之后是 142×70，与原型
     逐像素相同。⚠️ 原型没这条是因为它那几张卡标是 <svg> 不是 <img>，
     替换元素的自动最小尺寸算法不一样——不是原型漏了，是两边元素类型不同。 */
  width: max-content;
  grid-template-columns: repeat(3, auto);
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  background: #1c1c1c;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

/* 浮层是深色底，图标不需要那圈浅色描边（母本实测无描边）；去掉后每张图
   恰好 38×24，与原型的浮层尺寸逐像素一致。 */
.sc-checkout--modern .sc-pay-brands__pop img {
  border: 0;
}

/* 浮层是网格，上下也有邻居：Apple Pay 四周留白不少于标志高度 1/4，网格行距 6px 不够时
   上下补齐（左右已由基类 .sc-pay-mark 的 margin 补到）。 */
.sc-checkout--modern .sc-pay-brands__pop .sc-pay-mark {
  margin-top: max(0px, calc(var(--sc-pay-mark-size) / 4 - 6px));
  margin-bottom: max(0px, calc(var(--sc-pay-mark-size) / 4 - 6px));
}

/* 小三角，指向 +N 按钮 */
.sc-checkout--modern .sc-pay-brands__pop::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 10px;
  border: 6px solid transparent;
  border-top-color: #1c1c1c;
}

/* 打开条件一：桌面悬浮。触屏设备不匹配 hover:hover，不会误触发 */
@media (hover: hover) {
  .sc-checkout--modern .sc-pay-brands__more:hover .sc-pay-brands__pop {
    display: grid;
  }

  .sc-checkout--modern .sc-pay-brands:has(.sc-pay-brands__more:hover) {
    overflow: visible;
  }
}

/* 打开条件二 / 三：点击（含手机）与键盘 —— 由内联 JS 翻 aria-expanded，
   CSS 只认这一个属性（见 _CHECKOUT_SCRIPT::initBrandPopovers）。 */
.sc-checkout--modern .sc-pay-brands__toggle[aria-expanded="true"] + .sc-pay-brands__pop {
  display: grid;
}

/* 🔴 **浮层打开时把 `.sc-pay-brands` 自己的裁剪放开**。手机端紧凑规则
   （约 2982 行，`@media (max-width: 767px)` 里的 `.sc-pay-card .sc-pay-brands`）
   给角标区上了 `overflow: hidden`，而浮层就长在它里面——**实测 390 视口下点开
   「+4」整个浮层一片都看不见**（`aria-expanded` 已是 true、`display` 已是 grid，
   纯粹被裁掉了；这也是为什么只量 getBoundingClientRect 会得到假绿灯：被裁剪的
   元素照样有完整的几何盒）。
   ⚠️ **只在打开的那一刻放开，平时仍然裁剪**：那条手机规则是有用的——通道名
   很长时角标区会被压窄，不裁就会把图标溢出到行外，实测 320 视口下整页
   `scrollWidth` 从 320 撑到 413（横向滚动条，modern 皮肤明确不接受）。
   代价：长通道名 + 窄屏 + 买家主动点开，这三者同时成立时会短暂出现横向滚动；
   但那种情形下今天的行为是「浮层根本不出现」，两害相权。
   特异性：`:has()` 取参数里最高的那条，本条 = (0,4,0) 严格高于被覆盖的
   `.sc-pay-card .sc-pay-brands` (0,2,0)，不靠源码顺序赌。 */
.sc-checkout--modern .sc-pay-brands:has(.sc-pay-brands__toggle[aria-expanded="true"]) {
  overflow: visible;
}

/* 手机端：收窄成两列，避免顶出视口 */
@media (max-width: 999px) {
  .sc-checkout--modern .sc-pay-brands__pop {
    grid-template-columns: repeat(2, auto);
  }
}

/* ---- 主 CTA：母本 50 高、圆角 12、主色底、白字 14/600、**句首大写**
   （classic 的全大写 + 字距是本皮肤明确不要的，见 spec §0.1）---- */
.sc-checkout--modern .sc-btn-primary {
  height: var(--sc-ckm-btn-h);
  margin-top: 32px;
  border-radius: var(--sc-ckm-radius);
  background: var(--sc-ckm-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
}

/* ---- 处理中：转圈与文字重叠修复（定稿决定 12）----
   基类 .sc-btn[aria-busy="true"] 把 ::after 转圈用 position:absolute 居中、
   同时把按钮文字设为 transparent；但 .sc-checkout--modern .sc-btn-primary
   与基类的 .sc-btn[aria-busy="true"] 选择器特异度相同（各 2 个类/属性
   选择器），源码序在后的本规则会赢，文字改回 #fff 可见，与绝对定位居中的
   转圈重叠。母本要求「转圈在文字左侧、间距 8px、文字改 Processing…」
   （modern 独有；classic 保持只显示转圈，字色沿用基类 transparent 不动）：
   把 ::after 从绝对定位改回普通流、放到 flex 排头，基类 .sc-btn 本身已有
   `display:inline-flex; gap: var(--sc-space-2)`（8px），转圈与文字之间的
   间距因此自动满足，不需要再写一条 gap 规则。换字（Pay now ⇄ Processing…）
   由 JS 负责，两皮肤共用同一段换字逻辑，与本条 CSS 规则无关。以原型
   （docs/superpowers/prototypes/2026-09-30-whop-checkout/checkout-payment.html）
   里的写法为准。 ---- */
.sc-checkout--modern .sc-btn-primary[aria-busy="true"]::after {
  position: static;
  order: -1;
  flex-shrink: 0;
}

.sc-checkout--modern .sc-btn-primary:hover:not(:disabled) {
  background: var(--sc-ckm-accent-hover);
}

.sc-checkout--modern .sc-btn-primary:disabled {
  opacity: 0.5;
}

/* ---- 页脚政策链接：母本 14px 主色下划线、横向间距 14、上间距 48、无分隔线 ---- */
.sc-checkout--modern .sc-checkout__footer-links {
  gap: 14px;
  margin-top: 48px;
  padding-top: 0;
  border-top: 0;
}

.sc-checkout--modern .sc-checkout__footer-links a {
  font-size: 14px;
  color: var(--sc-ckm-accent);
  text-decoration: underline;
}

.sc-checkout--modern .sc-checkout__back-link {
  margin-top: 24px;
  font-size: 14px;
  color: var(--sc-ckm-accent);
}

/* ---- 订单摘要 ---- */
.sc-checkout--modern .sc-summary {
  display: block;
  width: 400px;
  max-width: 100%;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

@media (max-width: 1119px) {
  .sc-checkout--modern .sc-summary {
    width: 382px;
  }
}

.sc-checkout--modern .sc-summary-lines {
  gap: 16px;
}

.sc-checkout--modern .sc-summary-line {
  align-items: flex-start;
  gap: 20px;
}

.sc-checkout--modern .sc-summary-line__media {
  width: var(--sc-ckm-thumb);
  height: var(--sc-ckm-thumb);
}

.sc-checkout--modern .sc-summary-line__thumb {
  border-radius: var(--sc-ckm-radius-lg);
  background: var(--sc-ckm-bg-subdued-2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.sc-checkout--modern .sc-summary-line__qty {
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--sc-ckm-text);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
}

.sc-checkout--modern .sc-summary-line__title {
  font-size: 14px;
  font-weight: 400;
  color: var(--sc-ckm-text);
}

.sc-checkout--modern .sc-summary-line__variant {
  font-size: 12px;
  color: var(--sc-ckm-text-subdued-aside);
}

.sc-checkout--modern .sc-summary-line__price {
  font-size: 14px;
  font-weight: 400;
  color: var(--sc-ckm-text);
}

.sc-checkout--modern .sc-summary__tools {
  margin-top: 28px;
}

/* 折扣码 / 礼品卡输入：母本是「输入框内嵌右侧 Apply 次按钮」。 */
.sc-checkout--modern .sc-summary__tools .sc-input-group {
  position: relative;
  display: block;
}

.sc-checkout--modern .sc-summary__tools .sc-input-group + .sc-input-group,
.sc-checkout--modern .sc-summary__tools > p + .sc-input-group {
  margin-top: 10px;
}

.sc-checkout--modern .sc-summary__tools .sc-input {
  width: 100%;
  height: var(--sc-ckm-field-h);
  padding: 0 88px 0 10px;
  border: 1px solid var(--sc-ckm-border);
  border-radius: var(--sc-ckm-radius);
  background: var(--sc-ckm-bg);
  font-size: 14px;
  color: var(--sc-ckm-text);
}

.sc-checkout--modern .sc-summary__tools .sc-input::placeholder {
  color: var(--sc-ckm-text-subdued);
}

.sc-checkout--modern .sc-summary__tools .sc-input:focus {
  outline: none;
  border-color: var(--sc-ckm-accent);
  box-shadow: 0 0 0 1px var(--sc-ckm-accent);
}

.sc-checkout--modern .sc-summary__tools .sc-btn-sm {
  position: absolute;
  right: 7px;
  top: 7px;
  height: var(--sc-ckm-btn-sm-h);
  padding: 0 14px;
  border: 0;
  border-radius: var(--sc-ckm-radius);
  background: var(--sc-ckm-bg-subdued);
  color: var(--sc-ckm-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.sc-checkout--modern .sc-summary__tools .sc-btn-sm:hover:not(:disabled) {
  background: var(--sc-ckm-bg-subdued-2);
}

.sc-checkout--modern .sc-summary__rows {
  margin-top: 28px;
  display: grid;
  /* minmax(0,1fr) 而不是默认的 auto 轨道：auto 会被长金额串的 min-content
     撑出容器（同运费卡那条注释里的坑）。 */
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.sc-checkout--modern .sc-summary__row {
  font-size: 14px;
  color: var(--sc-ckm-text);
}

.sc-checkout--modern .sc-summary__row-value {
  font-weight: 400;
  color: var(--sc-ckm-text);
}

/* 母本的折扣/礼品卡抵扣行不用促销红，与其它金额行同色（classic 走
   --sc-color-sale，两套口径各自独立）。 */
.sc-checkout--modern .sc-summary__row--discount .sc-summary__row-value {
  color: var(--sc-ckm-text);
}

.sc-checkout--modern .sc-summary__hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--sc-ckm-text-subdued-aside);
}

.sc-checkout--modern .sc-summary__total {
  margin-top: 20px;
  align-items: baseline;
}

.sc-checkout--modern .sc-summary__total-label,
.sc-checkout--modern .sc-summary__total-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--sc-ckm-text);
}

.sc-checkout--modern .sc-summary__fx-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--sc-ckm-text-subdued-aside);
}

/* ---- hidden 属性必须真的把元素藏起来 ----
   UA 的 `[hidden] { display: none }` 属于 user-agent origin，任何作者侧的
   `display` 声明都比它优先。上面几条模皮肤规则给 `.sc-checkout-section` /
   `.sc-checkout-section` 写了 display，会连带把「JS 置 hidden」的区块显示
   出来，所以按本文件既有 `.sc-steps[hidden]` / `.sc-notice[hidden]` 的同一
   手法补回。（`.sc-summary__row[hidden]` 那条同源缺陷 classic 也有，已在
   上面的 `.sc-summary__row-value` 附近全局修掉，两套皮肤共用，不在这里
   重复声明。） */
.sc-checkout--modern .sc-checkout-section[hidden] {
  display: none;
}

/* ---- 手机号区号组合控件（initPhoneEnhance 运行时把 .sc-fld 就地升级成
   「区号按钮 + 号码输入」）：上面的 modern 字段规则重写了 label 的 left 与
   input 的 padding，这里按同一套 modern 尺寸把让位量补回去，否则区号按钮
   会和浮动标签/号码叠在一起。 ---- */
.sc-checkout--modern .sc-phone-combo__input {
  padding-left: 68px;
}

.sc-checkout--modern .sc-fld.sc-phone-combo label {
  left: 68px;
}

.sc-checkout--modern .sc-phone-combo__code {
  top: 9px;
  bottom: 9px;
  font-size: 14px;
  color: var(--sc-ckm-text);
  border-right-color: var(--sc-ckm-border);
}

/* ---- 手机端专属元素：桌面恒不显示 ---- */
.sc-checkout--modern .sc-checkout__add-discount,
.sc-checkout--modern .sc-checkout__mtotal {
  display: none;
}

/* ---- < 1000px：单列；右栏收进顶部折叠摘要条（母本行为：默认收起、
   点开展示完整摘要），Pay now 上方补「Add discount」与迷你合计行 ---- */
@media (max-width: 999px) {
  /* 单列。**保持 flex**（不退回 block）是为了还能用 order 把摘要栏提到顶部：
     DOM 里它排在表单之后（桌面视觉顺序 = Tab 顺序），手机端母本要求它在最上面
     那条折叠条的位置。block 布局不认 order。 */
  .sc-checkout--modern .sc-checkout-layout {
    display: flex;
    flex-direction: column;
  }

  .sc-checkout--modern .sc-checkout__main {
    width: 100%;
    padding: 24px 14px 40px;
  }

  .sc-checkout--modern .sc-checkout__summary-col {
    /* order:-1 把它从 DOM 末尾提到顶部（母本的折叠摘要条位置）；DOM 顺序保持
       「表单在前」是为了桌面的 Tab 顺序，见 _checkout_html modern 分支注释。 */
    order: -1;
    display: block;
    position: static;
    padding: 0;
    border-left: 0;
    background: var(--sc-ckm-bg-subdued);
  }

  .sc-checkout--modern .sc-checkout__summary-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: 64px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-bottom: 1px solid var(--sc-ckm-border);
    border-radius: 0;
    background: var(--sc-ckm-bg-subdued);
    font-size: 14px;
    color: var(--sc-ckm-text);
  }

  .sc-checkout--modern .sc-checkout__summary-toggle::after {
    content: none;
  }

  .sc-checkout--modern .sc-checkout__summary-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sc-ckm-accent);
  }

  .sc-checkout--modern [open] > .sc-checkout__summary-toggle .sc-checkout__summary-toggle-label svg {
    transform: rotate(180deg);
  }

  .sc-checkout--modern .sc-checkout__summary-toggle-total {
    font-size: 18px;
    font-weight: 600;
  }

  .sc-checkout--modern .sc-summary {
    width: auto;
    padding: 20px 14px;
    border-bottom: 1px solid var(--sc-ckm-border);
  }

  .sc-checkout--modern .sc-checkout__add-discount {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin-top: 32px;
    padding: 0 14px;
    border: 1px solid var(--sc-ckm-border);
    border-radius: var(--sc-ckm-radius);
    background: var(--sc-ckm-bg);
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-ckm-text);
    text-decoration: none;
  }

  .sc-checkout--modern .sc-checkout__mtotal {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    margin-top: 14px;
  }

  .sc-checkout--modern .sc-checkout__mtotal-thumb {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--sc-ckm-radius);
    overflow: hidden;
    background: var(--sc-ckm-bg-subdued-2);
  }

  .sc-checkout--modern .sc-checkout__mtotal-body {
    flex: 1;
    min-width: 0;
    display: grid;
  }

  .sc-checkout--modern .sc-checkout__mtotal-body b {
    font-size: 16px;
    font-weight: 600;
  }

  .sc-checkout--modern .sc-checkout__mtotal-count {
    font-size: 12px;
    color: var(--sc-ckm-text-subdued-aside);
  }

  .sc-checkout--modern .sc-checkout__mtotal-value {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
  }

  .sc-checkout--modern .sc-btn-primary {
    margin-top: 14px;
  }

  .sc-checkout--modern .sc-checkout__footer-links {
    margin-top: 32px;
  }
}

/* ≥ 1000px 才恢复母本的并排字段（母本手机端实测逐字段单列）。 */
@media (min-width: 1000px) {
  .sc-checkout--modern .sc-field-row--2 {
    grid-template-columns: 1fr 1fr;
  }

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

/* === MODERN-SKIN-SCOPE-GUARD:END === */

/* ================= 装修 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);
  /* 装修「#8 组件上下内边距默认 4px」：垂直分量 8px(--sc-space-2)→4px
   * (--sc-space-1)，需与 announcement-bar.liquid 的 bar_padding_y 默认值/
   * 覆盖判定阈值保持同步（该 liquid 仅在偏离此基线时才产出覆盖规则）。
   * 水平分量维持不变。 */
  padding: var(--sc-space-1) 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;
}

/* 图片/徽标（装修「#3 公告栏支持添加图片」）：基线高度 26px(1.625rem)/
 * 最大宽度 320px(20rem)，需与 announcement-bar.liquid 的 image_height /
 * image_max_width 默认值、覆盖判定阈值保持同步（该 liquid 仅在偏离此
 * 基线时才产出覆盖规则）。 */
.sc-announcement-bar__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.625rem;
  max-width: 20rem;
  overflow: hidden;
  border-radius: var(--sc-radius-sm);
}

.sc-announcement-bar__badge--square {
  border-radius: 0;
}

.sc-announcement-bar__badge-img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.sc-announcement-bar__badge-link {
  display: inline-flex;
  height: 100%;
}

/* ---- 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 0 / 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); }
.sc-account-addresses__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-space-sm, .75rem); }
.sc-account-addresses__head h2 { margin-bottom: var(--sc-space-md, 1rem); }
.sc-address-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sc-space-xs, .5rem); }
.sc-address-card__summary { margin: 0; color: var(--sc-color-fg-muted, #666); font-size: var(--sc-text-sm, .875rem); }
.sc-address-card--editor { grid-column: 1 / -1; }
.sc-address-card__editor { border-top: 1px solid var(--sc-color-border, #e5e5e5); margin-top: var(--sc-space-sm, .75rem); padding-top: var(--sc-space-md, 1rem); }
.sc-address-card__editor-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-space-sm, .75rem); margin-bottom: var(--sc-space-md, 1rem); }
.sc-address-card__editor-head h3 { margin: 0; font-size: var(--sc-font-size-lg, 1.125rem); }
.sc-address-card__add-icon { font-size: var(--sc-font-size-2xl, 1.75rem); line-height: 1; }
.sc-address-card--dashed { text-decoration: none; }
.sc-address-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-space-md, 1rem); }
.sc-address-form [hidden] { display: none !important; }
.sc-address-form-grid .sc-field { min-width: 0; }
.sc-address-form__footer { display: flex; justify-content: flex-end; }
.sc-field__required { color: var(--sc-color-destructive, #b42318); }

@media (min-width: 640px) {
  .sc-address-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-address-form-grid .sc-field--wide { grid-column: 1 / -1; }
}


/* ---- 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 {
  display: inline-grid; min-width: 2.75rem; min-height: 2.75rem; place-items: center;
  border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer;
  color: var(--sc-color-fg, #222); padding: 0;
}
.sc-cart-drawer__retry {
  align-self: flex-start;
  margin: 0 var(--sc-space-5) var(--sc-space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sc-color-fg);
  font: inherit;
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.sc-cart-drawer__retry:disabled { cursor: wait; opacity: 0.55; }
.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 {
  min-width: 2.75rem; min-height: 2.75rem; 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 {
  display: inline-grid; min-width: 2.75rem; min-height: 2.75rem; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--sc-color-fg-muted, #999);
  font-size: 1.1rem; line-height: 1; padding: 0;
}
.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__checkout-form { margin: 0; }
.sc-cart-drawer__total-row { display: flex; justify-content: space-between; font-size: 1rem; }
.sc-cart-drawer__discount-row { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--sc-color-fg-muted, #666); }
.sc-cart-drawer__discount-row strong { color: var(--sc-color-sale); font-weight: var(--sc-font-weight-medium); }
.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, #fdfdfd); }
.sc-contact-form--contrast { background: var(--sc-color-ink, #1f1f1f); 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; }
}

/* =====================================================================
   感谢页 / 订单状态页 modern 皮肤（「简洁单页」，2026-09-11 用户定稿）
   ---------------------------------------------------------------------
   原型（视觉唯一真源）：docs/superpowers/prototypes/2026-09-11-shopify-
   checkout-skin/ 的 thank-you.html / order-status.html / pages-skin.css /
   order-status-skin.css；设计文档同目录 specs/2026-09-11-shopify-checkout-
   skin-prototype-design.md 第 4.2 / 4.3 节。

   下面这份令牌逐条照抄原型 checkout-skin.css 顶部那张表——它们是从母本
   （用户自有 Shopify 店 velorowraps.com）实测出来的具体值，不是随手取的
   近似色，**改一个就偏离母本一点**，要改先回原型改。

   作用域铁律：**所有规则都必须挂在 `.sc-order--modern` 下**。classic 的
   感谢页/订单状态页（`.sc-order-confirm` / `.sc-summary` / `.sc-address-card`
   等）与购物车/账户页共用那批基类，这里一条都不许漏出去。

   与结账页 modern 皮肤的边界：那边 scope 在 `.sc-checkout--modern`、令牌
   前缀 `--sc-ckm-*`；这边 scope 在 `.sc-order--modern`、令牌前缀 `--sc-om-*`。
   两套各自独立，互不覆盖也互不依赖。

   HTML 由 app/storefront/order_pages_modern.py 渲染（classic 的
   `_payment_success_html` / `_order_status_html` 一个字节不动）。
   ===================================================================== */
.sc-order--modern {
  /* ---- 颜色（母本实测）---- */
  --sc-om-accent: #005bd1;
  --sc-om-accent-hover: #00459e;
  --sc-om-bg: #ffffff;
  --sc-om-bg-subdued: #f5f5f5;
  --sc-om-bg-subdued-2: #ededed;
  --sc-om-border: #dedede;
  --sc-om-border-emphasis: #8f8f8f;
  --sc-om-text: #000000;
  --sc-om-text-subdued: #707070;
  --sc-om-text-subdued-aside: #666666;
  --sc-om-success: #4d7a50;

  /* ---- 字号 / 字重（母本实测）---- */
  --sc-om-text-sm: 12px;
  --sc-om-text-base: 14px;
  --sc-om-text-md: 16px;
  --sc-om-text-lg: 18px;
  --sc-om-text-xl: 20px;
  --sc-om-text-2xl: 22px;
  --sc-om-weight-semibold: 600;
  --sc-om-leading-tight: 1.2;

  /* ---- 尺寸（母本实测）---- */
  --sc-om-field-h: 49px;
  --sc-om-btn-h: 50px;
  --sc-om-btn-sm-h: 35px;
  --sc-om-thumb: 64px;
  --sc-om-topbar-h: 93px;
  --sc-om-radius-sm: 8px;
  --sc-om-radius: 12px;
  --sc-om-radius-lg: 16px;
  --sc-om-radius-full: 9999px;

  /* 内容盒 980 居中；--sc-om-col-main 的语义是「左栏内容宽 + 右侧 gap」，
     与原型同名变量一致。 */
  --sc-om-content: 980px;
  --sc-om-col-main: 540px;
  --sc-om-col-main-gap: 41px;
  --sc-om-col-aside-gap: 39px;
  --sc-om-pad: max(40px, calc((100vw - var(--sc-om-content)) / 2));

  /* 母本用系统字体栈（原型 §3.2 明列，不引外部字体）——与 classic 跟随主题
     品牌字是刻意差异，一比一跟母本走。 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: var(--sc-om-text-base);
  line-height: 1.35;
  color: var(--sc-om-text);
  background: var(--sc-om-bg);
}

.sc-order--modern *,
.sc-order--modern *::before,
.sc-order--modern *::after { box-sizing: border-box; }

/* ---- 极简顶栏：居中 Logo（本两页按原型不放购物袋）---- */
.sc-order--modern .sc-order__topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--sc-om-topbar-h);
  border-bottom: 1px solid var(--sc-om-border);
  background: var(--sc-om-bg);
}
.sc-order--modern .sc-order__brand {
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 120px);
  color: var(--sc-om-text);
  text-decoration: none;
}
.sc-order--modern .sc-order__brand-logo {
  /* 母本 Logo 盒 180 × 52：任何比例的图等比收进去，不拉伸。 */
  max-width: 180px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.sc-order--modern .sc-order__brand-text {
  font-size: var(--sc-om-text-xl);
  font-weight: var(--sc-om-weight-semibold);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 两栏：左白底、右灰底出血到视口右缘。
   1440 实测：左栏内容 x=230 w=499、分界 x=770、右栏内容 x=810 w=400 ---- */
.sc-order--modern .sc-order__layout {
  display: flex;
  align-items: flex-start;
  /* 内容不够高时右侧灰栏仍铺满首屏（母本行为：灰色摘要栏是通到底的，
     不是只包住内容）。顶栏已占 --sc-om-topbar-h，故这里减掉它。 */
  min-height: calc(100vh - var(--sc-om-topbar-h));
}
.sc-order--modern .sc-order__main {
  width: calc(var(--sc-om-pad) + var(--sc-om-col-main));
  padding: 40px var(--sc-om-col-main-gap) 40px var(--sc-om-pad);
  background: var(--sc-om-bg);
  flex-shrink: 0;
}
/* 链接过期态没有右栏，左栏不再吃固定宽度、改居中，否则整页会明显偏左。 */
.sc-order--modern .sc-order__layout--single { justify-content: center; }
.sc-order--modern .sc-order__layout--single .sc-order__main {
  width: min(100%, calc(var(--sc-om-col-main) + 2 * var(--sc-om-pad)));
  padding-right: var(--sc-om-pad);
}
.sc-order--modern .sc-order__aside {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  background: var(--sc-om-bg-subdued);
  border-left: 1px solid var(--sc-om-border);
  padding: 40px 20px 40px var(--sc-om-col-aside-gap);
  position: sticky;
  top: 0;
}
.sc-order--modern .sc-order__aside-inner {
  width: 400px;
  max-width: 100%;
}

/* 1000–1119px：母本 1024 实测。--sc-om-col-main 含 gap，故 480+40=520。 */
@media (max-width: 1119px) {
  .sc-order--modern {
    --sc-om-pad: 40px;
    --sc-om-col-main: 520px;
    --sc-om-col-main-gap: 40px;
    --sc-om-col-aside-gap: 42px;
  }
  .sc-order--modern .sc-order__aside-inner { width: 382px; }
}

/* < 1000px：单列，右栏收进顶部折叠摘要条（买家在小屏仍看得到金额）。 */
@media (max-width: 999px) {
  /* 单列时不再需要撑满首屏（没有灰栏要铺），min-height 归零免得短页留白。 */
  .sc-order--modern .sc-order__layout { display: block; min-height: 0; }
  .sc-order--modern .sc-order__main {
    width: 100%;
    padding: 24px 14px 40px;
  }
  .sc-order--modern .sc-order__layout--single .sc-order__main {
    width: 100%;
    padding: 24px 14px 40px;
  }
  .sc-order--modern .sc-order__aside { display: none; }
}

/* ---- 确认头（勾圈 + 确认号/订单号 + Thank you）---- */
.sc-order--modern .sc-order__confirm {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sc-order--modern .sc-order__confirm-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--sc-om-text);
  border-radius: var(--sc-om-radius-full);
  color: var(--sc-om-text);
}
.sc-order--modern .sc-order__confirm-body { min-width: 0; }
.sc-order--modern .sc-order__confirm-no {
  margin: 0;
  font-size: var(--sc-om-text-base);
  color: var(--sc-om-text-subdued);
}
.sc-order--modern .sc-order__confirm-title {
  margin: 2px 0 0;
  font-size: var(--sc-om-text-2xl);
  font-weight: var(--sc-om-weight-semibold);
  line-height: var(--sc-om-leading-tight);
}

/* ---- 卡片（状态卡 / 订阅卡 / 明细卡 / 登录卡共用）---- */
.sc-order--modern .sc-order__card {
  margin-top: 14px;
  border: 1px solid var(--sc-om-border);
  border-radius: var(--sc-om-radius);
  background: var(--sc-om-bg);
  overflow: hidden;
}
/* 确认头 →（24）→ 首张卡；卡与卡之间 14。过期态首张是登录卡、上面没有
   确认头，故单独归零。 */
.sc-order--modern .sc-order__confirm + .sc-order__card { margin-top: 24px; }
.sc-order--modern .sc-order__main-inner > .sc-order__card:first-child { margin-top: 0; }
.sc-order--modern .sc-order__card-body { padding: 14px; }
.sc-order--modern .sc-order__card--plain { padding: 14px; }
.sc-order--modern .sc-order__card-title {
  margin: 0;
  font-size: var(--sc-om-text-lg);
  font-weight: var(--sc-om-weight-semibold);
  line-height: var(--sc-om-leading-tight);
}
.sc-order--modern .sc-order__card-note {
  margin: 6px 0 0;
  color: var(--sc-om-text-subdued);
}
/* sandbox「测试单」徽章：诚实标注未真实扣款，不冒充已收款。 */
.sc-order--modern .sc-order__badge {
  display: inline-block;
  margin: 10px 0 0;
  padding: 2px 8px;
  border: 1px solid var(--sc-om-border);
  border-radius: var(--sc-om-radius-full);
  font-size: var(--sc-om-text-sm);
  color: var(--sc-om-text-subdued);
}

/* ---- 状态卡正文（四阶段文案 + 物流三行）---- */
.sc-order--modern .sc-order__status { display: grid; gap: 6px; }
.sc-order--modern .sc-order__status p { margin: 0; color: var(--sc-om-text-subdued); }
.sc-order--modern .sc-order__status-line + .sc-order__status-line { margin-top: 4px; }
/* 已送达才出现的绿色对勾 */
.sc-order--modern .sc-order__status-icon {
  display: inline-flex;
  color: var(--sc-om-success);
  vertical-align: -3px;
  margin-right: 6px;
}

/* ---- 订单明细两列网格 ---- */
.sc-order--modern .sc-order__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 14px;
}
.sc-order--modern .sc-order__detail-item { min-width: 0; }
.sc-order--modern .sc-order__detail-item b {
  display: block;
  font-size: var(--sc-om-text-base);
  font-weight: var(--sc-om-weight-semibold);
}
.sc-order--modern .sc-order__detail-item p {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

/* ---- 链接过期态：骨架条顶掉正文（设计文档 4.3 第 5 条）---- */
.sc-order--modern .sc-order__skeleton {
  display: block;
  height: 12px;
  width: 60%;
  margin-top: 6px;
  border-radius: var(--sc-om-radius-full);
  background: var(--sc-om-border);
}
.sc-order--modern .sc-order__skeleton--wide { width: 85%; }
.sc-order--modern .sc-order__masked { margin: 0; }

/* ---- 登录卡（过期态，真表单 POST /orders/lookup）---- */
.sc-order--modern .sc-order__login {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: start;
  margin-top: 14px;
}
.sc-order--modern .sc-order__field { position: relative; display: block; }
.sc-order--modern .sc-order__input {
  /* display:block 是必须的：input 默认 inline-block + baseline 对齐，会在行盒
     底部留出 descender 间隙，把行高从 49 撑到 59（原型同一条注释）。 */
  display: block;
  width: 100%;
  height: var(--sc-om-field-h);
  padding: 21px 10px 6px;
  border: 1px solid var(--sc-om-border);
  border-radius: var(--sc-om-radius);
  background: var(--sc-om-bg);
  font-family: inherit;
  font-size: var(--sc-om-text-base);
  line-height: 1.35;
  color: var(--sc-om-text);
}
.sc-order--modern .sc-order__input:focus {
  outline: none;
  border-color: var(--sc-om-accent);
  box-shadow: 0 0 0 1px var(--sc-om-accent);
}
.sc-order--modern .sc-order__field-label {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--sc-om-text-base);
  color: var(--sc-om-text-subdued);
  pointer-events: none;
  transition: top 150ms ease, font-size 150ms ease, transform 150ms ease;
}
.sc-order--modern .sc-order__input:focus + .sc-order__field-label,
.sc-order--modern .sc-order__input:not(:placeholder-shown) + .sc-order__field-label {
  top: 7px;
  transform: none;
  font-size: var(--sc-om-text-sm);
}

/* ---- 底部行 + 页脚 ---- */
.sc-order--modern .sc-order__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}
.sc-order--modern .sc-order__actions-help { margin: 0; }
.sc-order--modern .sc-order__link {
  color: var(--sc-om-accent);
  text-decoration: underline;
}
.sc-order--modern .sc-order__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 48px;
}

/* ---- 主按钮 ---- */
.sc-order--modern .sc-order__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: var(--sc-om-btn-h);
  padding: 0 20px;
  border: 0;
  border-radius: var(--sc-om-radius);
  background: var(--sc-om-accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--sc-om-text-base);
  font-weight: var(--sc-om-weight-semibold);
  text-decoration: none;
  cursor: pointer;
}
.sc-order--modern .sc-order__btn:hover { background: var(--sc-om-accent-hover); }
.sc-order--modern .sc-order__btn--auto { width: auto; }

/* ---- 订单摘要（右栏 / 手机折叠面板共用同一份 HTML）---- */
.sc-order--modern .sc-order-summary__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.sc-order--modern .sc-order-summary__item + .sc-order-summary__item { margin-top: 16px; }
.sc-order--modern .sc-order-summary__thumb {
  position: relative;
  width: var(--sc-om-thumb);
  height: var(--sc-om-thumb);
  flex-shrink: 0;
  border-radius: var(--sc-om-radius-lg);
  background: var(--sc-om-bg-subdued-2);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
}
.sc-order--modern .sc-order-summary__thumb img,
.sc-order--modern .sc-order-summary__thumb-blank {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.sc-order--modern .sc-order-summary__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--sc-om-radius-full);
  background: var(--sc-om-text);
  color: #fff;
  font-size: var(--sc-om-text-sm);
  font-weight: var(--sc-om-weight-semibold);
  line-height: 20px;
  text-align: center;
}
.sc-order--modern .sc-order-summary__body { flex: 1; min-width: 0; }
.sc-order--modern .sc-order-summary__title { display: block; }
.sc-order--modern .sc-order-summary__variant {
  display: block;
  font-size: var(--sc-om-text-sm);
  color: var(--sc-om-text-subdued-aside);
}
.sc-order--modern .sc-order-summary__price { white-space: nowrap; }

/* 「Buy again」在商品行下方另起一行：行改三列网格承载。row-gap 必须显式
   归零，否则 `gap: 20` 同时作用于行方向，按钮会被额外推低 20px（原型同注）。 */
.sc-order--modern .sc-order-summary__item--again {
  display: grid;
  grid-template-columns: var(--sc-om-thumb) 1fr auto;
  column-gap: 20px;
  row-gap: 0;
  align-items: start;
}
.sc-order--modern .sc-order-summary__again {
  grid-column: 2 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: var(--sc-om-btn-sm-h);
  margin-top: 8px;
  padding: 0 14px;
  border-radius: var(--sc-om-radius);
  /* 次按钮默认底色就是 #F5F5F5，而右栏底色同样是 #F5F5F5——照抄会彻底隐形。
     改用白底 + 1px 描边（原型同款处理）。 */
  background: var(--sc-om-bg);
  border: 1px solid var(--sc-om-border);
  color: var(--sc-om-text);
  font-size: var(--sc-om-text-base);
  text-decoration: none;
}
.sc-order--modern .sc-order-summary__again:hover { background: var(--sc-om-bg-subdued-2); }

.sc-order--modern .sc-order-summary__rows {
  margin-top: 28px;
  display: grid;
  gap: 8px;
}
.sc-order--modern .sc-order-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.sc-order--modern .sc-order-summary__row--tender { margin-top: 8px; }
.sc-order--modern .sc-order-summary__total {
  margin-top: 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.sc-order--modern .sc-order-summary__total-label,
.sc-order--modern .sc-order-summary__total-value {
  font-size: var(--sc-om-text-lg);
  font-weight: var(--sc-om-weight-semibold);
}
.sc-order--modern .sc-order-summary__currency {
  font-size: var(--sc-om-text-sm);
  font-weight: 400;
  color: var(--sc-om-text-subdued-aside);
  margin-right: 4px;
}
.sc-order--modern .sc-order-summary__note {
  margin: 6px 0 0;
  color: var(--sc-om-text-subdued-aside);
}

/* ---- 手机端（< 1000px）顶部折叠摘要条 ----
   用原生 <details>/<summary>：零 JS 也能展开（这两页除 frame-bust 外本来
   就不带脚本，不为一个折叠条引一段 JS）。 */
.sc-order--modern .sc-order__msummary { display: none; }
@media (max-width: 999px) {
  .sc-order--modern .sc-order__msummary { display: block; }
  .sc-order--modern .sc-order__msummary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 64px;
    padding: 0 14px;
    border-bottom: 1px solid var(--sc-om-border);
    background: var(--sc-om-bg-subdued);
    font-size: var(--sc-om-text-base);
    color: var(--sc-om-text);
    cursor: pointer;
    list-style: none;
  }
  .sc-order--modern .sc-order__msummary-bar::-webkit-details-marker { display: none; }
  .sc-order--modern .sc-order__msummary-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sc-om-accent);
  }
  .sc-order--modern .sc-order__msummary[open] .sc-order__msummary-toggle svg {
    transform: rotate(180deg);
  }
  .sc-order--modern .sc-order__msummary-total {
    font-size: var(--sc-om-text-lg);
    font-weight: var(--sc-om-weight-semibold);
  }
  .sc-order--modern .sc-order__msummary-panel {
    padding: 20px 14px;
    background: var(--sc-om-bg-subdued);
    border-bottom: 1px solid var(--sc-om-border);
  }

  /* 母本手机端所有多列区块改单列 */
  .sc-order--modern .sc-order__details { grid-template-columns: 1fr; }
  .sc-order--modern .sc-order__login { grid-template-columns: 1fr; }
  .sc-order--modern .sc-order__login .sc-order__btn { width: 100%; }
  .sc-order--modern .sc-order__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .sc-order--modern .sc-order__actions .sc-order__btn--auto { width: 100%; }
  .sc-order--modern .sc-order__footer { margin-top: 32px; }
}

/* ===========================================================================
   顶部快捷支付区（Apple Pay / Google Pay，2026-10-05；定稿原型
   docs/superpowers/prototypes/2026-10-04-venziapay-whop-wallets/index.html 态
   1 / 6 / 7）。位置对齐 Shopify 的 Express Checkout：结账流程最开始、表单之外。

   整块与每个钱包槽的初始态都是 `hidden`，由 _CHECKOUT_SCRIPT 的 vzpMountWalletButtons
   在 canMakePayment() 探测通过、官方按钮建成后才揭示——所以这里必须给 `[hidden]`
   补一条 `display: none`（本文件既有 `.sc-checkout__error[hidden]` 同一手法：凡是给
   某个类写死了 display，就得把 `[hidden]` 补回来，否则 hidden 属性失效）。

   按钮本身是 Apple / Google 的官方按钮（图标 Task 6b）：Apple 的 <apple-pay-button>、
   Google 的 PaymentsClient.createButton()。它们的颜色、字体、标识归厂商管，品牌规范
   不许改按钮内部（Google 品牌指南明令不得改按钮内的字体、颜色、圆角与内边距，只能经
   它自己的选项调）；这里只管槽的尺寸与排布。圆角走两家各自的
   官方参数，取同一个值（页面脚本 VZP_EXPRESS_BUTTON_RADIUS_PX）。
   =========================================================================== */
.sc-express {
  display: block;
  margin-block-end: var(--sc-space-4);
}

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

/* 态 1（宽屏并排）/ 态 7（手机窄屏上下堆叠）：靠 flex-wrap + 槽的基准宽度自然换行，
   不写死断点——区块宽度随左列变化（modern 的灰底出血摘要栏会改左列宽）。基准宽度
   15rem = 240px 是 Google 纯标志按钮的最小宽度（ButtonOptions.buttonType 说明），
   两颗并排放不下这个宽度就堆叠，不会把 Google 按钮挤到规范以下。 */
.sc-express__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-3);
}

/* 高 44px（2.75rem）同原型。Google 按钮以 buttonSizeMode: fill 撑满槽；Apple 按钮
   用它的官方尺寸变量撑满。 */
.sc-express__slot {
  flex: 1 1 15rem;
  min-width: 0;
  height: 2.75rem;
}

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

/* <apple-pay-button> 宿主默认 inline-block（会留基线空隙），这里改成块级。只对没被它
   自己隐藏的元素生效：设备不支持时它会给自己加 hidden，外部的 display 不能把它顶回来。 */
.sc-express__slot apple-pay-button:not([hidden]) {
  display: block;
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 2.75rem;
}

/* 买家已在面板里授权、之后某一步失败时才出现（建单被拒、金额对不上…）。
   复用 .sc-checkout__error 的配色令牌，但不复用那个类——那条是配送错误的位置。 */
.sc-express__error {
  margin: var(--sc-space-3) 0 0;
  padding: var(--sc-space-3) var(--sc-space-4);
  border-radius: var(--sc-radius-sm);
  background: var(--sc-color-destructive-subtle);
  color: var(--sc-color-destructive);
  font-size: var(--sc-text-sm);
}

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

/* 「Or continue below」分隔线（原型 .divider）：两侧细线 + 居中小字。整块隐藏时
   它跟着一起消失（它在 .sc-express 内部），正是原型态 6 要的"连分隔线一起"。 */
.sc-express__divider {
  display: flex;
  align-items: center;
  gap: var(--sc-space-3);
  margin-block-start: var(--sc-space-4);
  font-size: var(--sc-text-sm);
  color: var(--sc-color-fg-subtle);
}

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

/* ===========================================================================
   提交位的钱包官方按钮（2026-10-05 生产修复）。买家在支付方式列表里选中 Apple Pay /
   Google Pay 行时，_CHECKOUT_SCRIPT 的 vzpSyncWalletPay 藏起「Pay now」，在它紧后面的
   这一块显示该钱包的官方按钮（与顶部快捷按钮同一建法）；切回其他行时复原。

   尺寸与 Pay now 一致——它就是来顶替 Pay now 的：Apple 要求「no smaller than other
   payment buttons」，Google 要求「equal to or larger than other buttons」。按钮内部归
   厂商管（同顶部区块），这里只管槽的宽高；整块与每个槽初始 hidden，写死了 display 的
   类照例把 `[hidden]` 补回来。
   =========================================================================== */
.sc-wallet-pay {
  display: block;
}

.sc-wallet-pay[hidden],
.sc-wallet-pay__slot[hidden] {
  display: none;
}

/* 高度 = classic 的 .sc-btn-lg（3.5rem）。Google 按钮以 buttonSizeMode: fill 撑满槽。 */
.sc-wallet-pay__slot {
  display: block;
  height: 3.5rem;
}

.sc-wallet-pay__slot apple-pay-button:not([hidden]) {
  display: block;
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 3.5rem;
}

/* modern：高度与上间距照该皮肤的主 CTA（.sc-checkout--modern .sc-btn-primary）。 */
.sc-checkout--modern .sc-wallet-pay {
  margin-top: 32px;
}

.sc-checkout--modern .sc-wallet-pay__slot {
  height: var(--sc-ckm-btn-h);
}

.sc-checkout--modern .sc-wallet-pay__slot apple-pay-button:not([hidden]) {
  --apple-pay-button-height: var(--sc-ckm-btn-h);
}

@media (max-width: 999px) {
  .sc-checkout--modern .sc-wallet-pay {
    margin-top: 14px;
  }
}