/*
---
generated_by: GLM-5.3-Flash (builtin:bigmodel-coding-plan, Reflect experience v2 Task 8)
date: 2026-09-14
core_logic: Reflect 体验 v2 Shop 页换装（§5.4：顶部可回收 FREE 学习带 + 服务端 ready 货架 + 诚实空态 +
  Diff 个人资格面非货架 SKU）。版式语言来自 demo shop 视图金样：夜色特写带（.feature → .sy-free-band）、
  纸卡货架（.product-card → .sy-product-card）、苔绿洗交付面板语言（.delivery → .sy-diff）。
  素描为小幅辅助：FREE 带左栏 + 商品卡窄条（≤ 商品信息视觉权重），alt="" 纯装饰、零展签 DOM。
  全部取值走 tokens.css 令牌；交互 ≥44px；动效仅 hover/焦点 120–220ms 档；选择器全部 scope 在
  #page-shop 内，不外溢他页。行为零变化：全部 id/data-* 契约原样，仅视觉层。
test_record: Playwright en/zh-CN × 390/1280 截图 + scrollWidth≤clientWidth + img naturalWidth>0 +
  空态无假 SKU（无划线价/倒计时/Coming soon 字样）+ FREE 带/确认钮命中区 ≥44px，见 task-8-report.md（2026-09-14）。
recent_changes:
  - 2026-09-14: 初版——FREE 学习带/诚实空态/货架商品卡/Diff 面板/Support 入口纸感换装。
  - 2026-09-20: demo移植冲刺 task-10——FEATURED 卡（reflect_plus 真档位锚定）/FEATURED 角标
    变体/每卡「已含权益」行/ratesHint/FAQ（details 原生折叠零 JS，summary ≥44px 焦点环；
    全部静态诚实文案零动效零 reduce 逻辑）。
  - 2026-09-29: 全目录货架（用户拍板 7 付费点全列）——货架两区分组（.sy-shelf 组间 24/组内 12；
    .sy-shelf-group）；一次性卡导航链接（.sy-product-open，复用 components .cta-line）；FAQ 区
    整块删除（HTML+CSS 同步，fineprint 保留）；新增水晶计费目录区（.sy-crystals 两信息行，
    hairline 分隔，非售卡零结账元素；价格真值镜像见 index.html 注释）。
  - 2026-10-07: v3.2 改版（notes.md §v3.2 认可稿）——FREE 带改通栏免费钩子带（.sy-free-hero
    330px 夜色 + sketch--stars-night 变体）；新增本命报告专版区（.sy-natal hero/预览/目录/购买）、
    合盘横幅价格行（.sy-crush，结构复用 home.css .home-eros）、手动添加人行（.sy-custom-row，
    72×72 drawn-figure-chart）；#page-shop .btn-primary 墨底药丸换装（chart.css 同法）；
    旧 .sy-free-band 家族样式删除（DOM 已随 v3.2 重写）。
---
*/

/* ================= 页头（衬线页标 + lead：四页共用 re-skin 见 you.css 共用段） ================= */

/* ================= v3.2 免费钩子带（notes.md §v3.2 认可稿：通栏夜色 330px，整块即链接 →
   #/learn/transits；夜底 #111814 = --reflect-night；头图 learn-stars-1 走 components.css
   .sketch--stars-night 变体（去色偏棕 + 1.1 放大裁白边）；底部渐变压暗上压文字；
   「免费」徽标=cardsFreeDrawBadge；CTA › 箭头走 ::after 不进文案） ================= */
.sy-free-hero {
  position: relative;
  display: block;
  height: 330px; /* 设计给定横幅尺寸（390×330），施工单红线豁免项 */
  margin-inline: -20px; /* 通栏：出 .page-pad 20px 左右内边距（shell.css .page-pad 同值） */
  overflow: hidden;
  background: var(--reflect-night);
  color: var(--reflect-paper-light);
  text-decoration: none;
}
.sy-free-hero:focus-visible {
  outline: 2px solid var(--reflect-ochre);
  outline-offset: -2px;
}
.sy-free-hero-art {
  position: absolute;
  inset: 0;
}
.sy-free-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(17, 24, 20, 0) 38%, rgba(17, 24, 20, .78) 70%, var(--reflect-night) 100%);
}
.sy-free-hero-copy {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.sy-free-hero-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  padding: 3px 10px 3px 12px;
  border-radius: var(--reflect-radius-pill);
  background: var(--reflect-ochre);
  color: var(--reflect-night);
}
.sy-free-hero-title {
  font-family: var(--reflect-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--reflect-paper-light);
}
.sy-free-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: var(--reflect-radius-pill);
  background: var(--reflect-paper-light);
  color: var(--reflect-night);
}
.sy-free-hero-cta::after {
  content: "›";
  font-size: 17px;
  line-height: 1;
  transform: translateY(-1px);
}
.sy-free-hero:hover .sy-free-hero-cta {
  background: var(--reflect-ochre);
}

/* ================= v3.2 本命报告区（图纸 S1：hero 通栏 250px 底部渐隐到纸色，Big Three +
   标题压渐隐区；下方=预览（陶锈左标线 + 底部渐隐截断）+ 全章目录（✦ 前缀 SVG 9px 赭石）
   + 购买行。价格由 shop-view.js 以服务端 quote 水合，零写死） ================= */
.sy-natal {
  display: flex;
  flex-direction: column;
}
.sy-natal-hero {
  position: relative;
  height: 250px; /* 设计给定横幅尺寸（390×250），施工单红线豁免项 */
  margin-inline: -20px; /* 通栏：出 .page-pad 20px 左右内边距 */
}
.sy-natal-art {
  position: absolute;
  inset: 0;
}
.sy-natal-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(rgba(238, 233, 221, 0), rgba(238, 233, 221, .9) 60%, var(--reflect-paper));
}
.sy-natal-hero-tx {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 6px;
}
.sy-natal-bt {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-family: var(--reflect-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--reflect-ink-soft);
}
.sy-natal-g {
  color: var(--reflect-ochre);
}
.sy-natal-title {
  margin: 6px 0 0;
  font-family: var(--reflect-serif);
  font-size: 29px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--reflect-ink);
}
.sy-natal-prev {
  position: relative;
  margin: 14px 0 0;
  padding: 2px 0 0 14px;
  border-left: 2px solid var(--reflect-rust);
  font-family: var(--reflect-serif);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--reflect-ink);
  max-height: 104px; /* 首屏承诺：预览约前三行可见，底部渐隐截断（图纸 .prev 同法） */
  overflow: hidden;
}
.sy-natal-prev::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  background: linear-gradient(rgba(238, 233, 221, 0), var(--reflect-paper));
}
.sy-natal-toc {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
  font-size: 13px;
  line-height: 1.95;
  color: var(--reflect-ink-soft);
}
.sy-natal-toc li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.sy-natal-star {
  flex: none;
  width: 9px;
  height: 9px;
  color: var(--reflect-ochre); /* ✦ 赭石四角星（内联 SVG fill=currentColor） */
}
.sy-natal-price {
  margin-top: 10px;
  font-family: var(--reflect-mono);
  font-size: 13px;
  color: var(--reflect-ink-soft);
}
.sy-natal-open {
  margin-top: 10px;
  width: 100%;
}
.sy-natal-inc {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--reflect-ink-soft);
}

/* ================= v3.2 合盘报告横幅（复用 home.css .home-eros 全局结构样式；此处只补
   商店侧价格行与页序间距；贴纸层本批不渲染——无对应 i18n 键，见 index.html 注释） ================= */
.sy-crush .shop-eros-price {
  font-family: var(--reflect-mono);
  font-size: 13px;
  color: var(--reflect-ink-soft);
}

/* ================= v3.2 手动添加的人行（图纸 S4：72×72 蚀刻缩略 + 标题 + 副行 + 价格行 +
   ›；整行即链接 → #/custom/new，可访问名=shopOpenCustom（data-i18n-aria）） ================= */
.sy-custom-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--reflect-hairline);
  border-bottom: 1px solid var(--reflect-hairline);
  text-decoration: none;
  color: inherit;
}
.sy-custom-thumb {
  width: 72px; /* 设计给定缩略图尺寸（72×72），施工单红线豁免项 */
  height: 72px;
  flex: none;
  border-radius: 4px;
}
.sy-custom-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sy-custom-title {
  font-family: var(--reflect-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--reflect-ink);
}
.sy-custom-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--reflect-ink-soft);
}
.sy-custom-price {
  margin-top: 2px;
  font-family: var(--reflect-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--reflect-ink-soft);
}
.sy-custom-row .chev {
  flex: none;
  margin-left: auto;
  color: var(--reflect-ink-soft);
}

/* ================= v3.2 主按钮换装（scoped：与 chart.css 同法的墨底纸字药丸；本页
   本命报告购买钮与 Diff 确认钮同一语言，图纸两处均墨底药丸） ================= */
#page-shop .btn-primary {
  background: var(--reflect-ink);
  color: var(--reflect-paper-light);
  border-radius: var(--reflect-radius-pill);
}
#page-shop .btn-primary:hover { background: var(--reflect-moss); }
#page-shop .btn-primary[disabled] { opacity: .55; }
#page-shop .btn-primary[disabled]:hover { background: var(--reflect-ink); }

/* ================= 诚实空态（无假 SKU/无 Coming soon/无划线价/无倒计时） ================= */
#page-shop [data-shop-closed] {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-paper-wash);
  font-size: 15px;
  line-height: 1.65;
  color: var(--reflect-ink-soft);
}

/* ================= ready 货架（shop-view.js 渲染：标题行 + 商品纸卡） ================= */
.sy-shelf {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-24); /* 2026-09-29 全目录：组间 > 组内（两区分组节奏） */
}
/* 分组容器（shop-view.js 渲染）：区内标题+卡片沿用原 12px 节奏（组内密度不变） */
.sy-shelf-group {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-12);
}
.sy-shelf-title {
  margin: 0;
  font-family: var(--reflect-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--reflect-rust);
}
.sy-product-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-paper-wash);
  box-shadow: var(--reflect-shadow-flat);
}
/* 商品卡素描：窄条辅助，视觉权重低于下方信息区（§5.4 图片合同）；alt="" 零展签 */
.sy-product-art {
  height: 72px;
  margin-bottom: 4px;
  border: 1px solid var(--reflect-hairline);
}
.sy-product-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--reflect-space-12);
}
.sy-product-title {
  font-family: var(--reflect-serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--reflect-ink);
}
.sy-product-badge {
  flex: none;
  font-size: 11px;
  line-height: 15px;
  font-weight: 600;
  color: #425847;
  background: rgba(82, 107, 86, .14);
  border-radius: var(--reflect-radius-pill);
  padding: 2px 10px;
}
.sy-product-price {
  font-family: var(--reflect-mono);
  font-size: 13px;
  color: var(--reflect-ink-soft);
}

/* ================= Diff 个人资格面（非货架 SKU：rust 侧标 + 苔绿洗面板，demo .delivery 语言） ================= */
.sy-diff {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-8);
  padding: 16px 18px;
  border: 1px solid var(--reflect-line);
  border-left: 3px solid var(--reflect-rust);
  border-radius: var(--reflect-radius-sm) var(--reflect-radius-md) var(--reflect-radius-md) var(--reflect-radius-sm);
  background: var(--reflect-moss-wash);
}
.sy-diff .eyebrow { margin: 0; }
.sy-diff-title {
  margin: 0;
  font-family: var(--reflect-serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--reflect-ink);
}
.sy-diff-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--reflect-ink);
}
.sy-diff-meta {
  margin: 0;
  font-family: var(--reflect-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--reflect-ink-soft);
}
.sy-diff-status {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--reflect-ink-soft);
}

/* ================= Task 10（W3 Shop，2026-09-20）：FEATURED 卡/角标变体/已含权益行
   （呈现层换装：真档位锚定 + entitlement 真权益陈述；零动效零 reduce 逻辑） ================= */

/* FEATURED 卡：reflect_plus（真订阅档=最全权益）置前排；陶锈描边安静升级，非促销高亮 */
.sy-product-card--featured {
  border-color: var(--reflect-rust);
  background: var(--reflect-paper-light);
}
/* FEATURED 角标变体：陶锈 pill（Owned/NEW 走苔绿默认 .sy-product-badge） */
.sy-product-badge--featured {
  color: var(--reflect-rust);
  background: var(--reflect-rust-wash);
}
/* 每卡「已含权益」行：小标 mono 大写 + 一句真权益（one_time 不过期 / 订阅每月水晶余额） */
.sy-product-inc {
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sy-product-inc-label {
  font-family: var(--reflect-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--reflect-rust);
}
.sy-product-inc-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--reflect-ink-soft);
}

/* ================= Task 10 ratesHint（点数口径一句话）——2026-09-29 全目录改版：
   FAQ 问答区整块删除（HTML+CSS 同步），ratesHint+政策小字行保留两态恒显 ================= */
.sy-shop-meta {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-12);
}
.sy-rates-hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--reflect-ink-soft);
}
/* 政策小字行（2026-09-29 政策问答撤下后的 demoted 入口）：低对比弱化，仅保留链接义务 */
.sy-faq-fineprint {
  margin: 0;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--reflect-hairline);
  font-size: 13px;
  line-height: 1.6;
  color: var(--reflect-ink-soft);
}
.sy-faq-fineprint a {
  color: var(--reflect-ink-soft);
  text-decoration: underline;
}
.sy-faq-fineprint a:focus-visible {
  outline: 2px solid var(--reflect-ochre);
  outline-offset: 2px;
}

/* ================= Support 入口（.entry 纸感 re-skin，触控 48px 由原 min-height 保留） ================= */
#page-shop .entry {
  border-color: var(--reflect-line);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-paper-wash);
  color: var(--reflect-ink);
}
#page-shop .entry:hover {
  background: var(--reflect-moss-wash);
  color: var(--reflect-ink);
}
#page-shop .entry .chev { color: var(--reflect-ink-soft); }

/* ================= 2026-09-29 全目录：一次性卡导航链接 + 水晶计费目录区
   （.sy-crystals 信息行非售卡——塔罗/行运目录条目；hairline 分隔延续纸感列表语言；
   全部令牌取值，零写死像素高度容器，零新字体；链接复用 components .cta-line） ================= */
.sy-product-card .sy-product-open {
  margin-top: 2px;
  align-self: flex-start;
}

.sy-crystals {
  display: flex;
  flex-direction: column;
}
.sy-crystals .sy-shelf-title {
  margin: 0 0 var(--reflect-space-4);
}
.sy-crystal-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--reflect-space-12) 0;
  border-top: 1px solid var(--reflect-hairline);
}
.sy-crystals .sy-crystal-row:last-child {
  padding-bottom: 0;
}
.sy-crystal-name {
  font-family: var(--reflect-serif);
  font-size: 17px;
  line-height: 1.3;
  color: var(--reflect-ink);
}
.sy-crystal-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--reflect-ink-soft);
}
.sy-crystal-row .sy-crystal-cta {
  margin-top: 6px;
  align-self: flex-start;
}

/* ================= PR-G 动效（S1 星云呼吸 / S2 钩子浮起+箭头推 / S4 订阅卡星闪；motion_spec §2，2026-10-07） =================
   S1：星云 28s 呼吸（scale/rotate，只动 transform；离视口 animationPlayState=paused——shop-view.js IO；
   will-change 全站仅此一处常驻，规格 §6）。S2：免费/标题/CTA 依次浮起（.15/.22/.30s）+
   1.2s 后 CTA 箭头右推 5px×2（有限两次）。S4：订阅卡水晶插图 70% 入视口四角星闪各一次（错拍）。零 reduce 分支。 */
.sy-free-hero-art img {
  animation: m-nebula var(--m-nebula-dur) var(--m-ease-inout) infinite alternate;
  will-change: transform;
}
@keyframes m-nebula {
  from { transform: scale(1.1) rotate(0deg); }
  to { transform: scale(1.17) rotate(4deg); }
}
.sy-free-hero-badge { animation: m-shop-rise var(--m-rise-dur) var(--m-ease-out) .15s both; }
.sy-free-hero-title { animation: m-shop-rise var(--m-rise-dur) var(--m-ease-out) .22s both; }
.sy-free-hero-cta { animation: m-shop-rise var(--m-rise-dur) var(--m-ease-out) .3s both; }
@keyframes m-shop-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.sy-free-hero.m-nudge .sy-free-hero-cta::after { animation: m-nudge 900ms var(--m-ease-out) 2; }
@keyframes m-nudge {
  0%, 100% { transform: none; }
  40% { transform: translateX(5px); }
}
.m-glint {
  position: absolute;
  z-index: 5;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0) rotate(0deg);
}
.m-glint::before,
.m-glint::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fffaf0;
  border-radius: 2px;
  box-shadow: 0 0 6px 2px rgba(255, 246, 220, .7);
}
.m-glint::before { width: 2px; height: 22px; margin: -11px 0 0 -1px; }
.m-glint::after { width: 22px; height: 2px; margin: -1px 0 0 -11px; }
.m-glint.m-go { animation: m-glint 900ms var(--m-ease-out) both; animation-delay: var(--dl, 0s); }
@keyframes m-glint {
  0% { opacity: 0; transform: scale(0) rotate(0); }
  35% { opacity: 1; transform: scale(1) rotate(45deg); }
  100% { opacity: 0; transform: scale(.2) rotate(90deg); }
}