/* ============================================================
   MORANDI 主题 — 暖阳莫兰迪 · 高级灰（灰粉 + 雾蓝 + 奶茶，双模式）
   视觉权威：docs/assets/theme-library-mockup.html 面板 .s8
   结构：三段式（契约见 themes/_shared/README.md）
     段1 token 覆盖 —— 换肤核心，功能页（商品/购物车/结账…）继承
         florisse EJS + 基底 CSS，仅靠本段变量整体变高级灰风
     段2 nav / footer —— mo- 前缀（防污染，仿 florisse 的 fl- 惯例）；chip 胶囊导航
     段3 首页 —— hero 左右分栏大圆角软卡 + 大圆角软卡片三栏（柔阴影 + 圆润加购钮）
   关键手法：灰米底（--cream:#EFE7E3，抄 .s8）+ 软白卡（--card:#F7F1EE）
     + 灰粉次强调（--rose:#D8C3C0）+ 雾蓝点缀（--sage:#A9B4BE）+ 奶茶点缀（--mo-tan:#C9B29B）
     + 大圆角 22px（莫兰迪关键身份）+ 柔和低饱和灰调阴影 + 柔和无衬线。
   ⚠️ 对比度（本主题最大风险）：莫兰迪整体低饱和低对比，.s8 原稿多处文字色撞 WCAG AA 红线，
     故「文字/按钮」全部选够深的莫兰迪同族深灰玫，逐一量对比后落值（不照抄 .s8 浅色）：
       · 主按钮底 --rose-deep #7E5D59（白字 5.44:1、作链接骑灰米 4.78:1）——.s8 原 #B48E89 白字仅 2.73:1，故调深
       · 价格/toast 底 --rose-ink #6E4F4C（骑软白卡 6.51:1、白字骑其上 6.79:1）——.s8 原 #8A6E6B 骑卡仅 4.15:1，故调深
       · 次要字 --muted #6F625E（骑灰米 4.81:1）——.s8 原 #A9948F 骑卡仅 2.57:1，远不达标，故调深
       · 正文 --ink #5A4F4C（骑灰米 6.48:1）、深雾蓝 --sage-deep #5E6B75（骑卡 4.89:1）、错误字 --danger #A8493F（骑灰米 4.66:1）
     「灰粉/雾蓝/奶茶」浅色只落装饰底/卡图渐变/chip，不承载正文——高级灰观感与可读性两全。
   双模式：四个 token 块「三块不同值」（②与③a 同=暮色深灰紫值、①与③b 同=灰米高级灰值）。
     暗版为真设计（暮色高级灰：深灰紫底 #262123 + 灰米字 + 灰粉/雾蓝/奶茶提亮），非继承 florisse 暗色粉。
   自引入色 --mo-tan（奶茶点缀）/ --mo-chip（chip 胶囊底）随明暗变，四块各定义（grep 冒号锚 =4）。
   ⚠️ 反转（README §7）：morandi toast 底(--rose-ink)/主按钮底(--rose-deep) 亮色为深灰玫（#6E4F4C/#7E5D59）、
     暗色翻浅（提亮灰粉 #CDB4B0/#C7ABA7）→ 骑其上的 --on-accent（文字）与 --btn-close-filter（关闭钮滤镜）
     必须成对四块同步翻转（深底→白字/白钮 invert；浅底→暗字/黑钮 none），否则暗色浅 toast 上白关闭钮不可见。
   ============================================================ */

/* ========== 段1：token 覆盖（三个选择器块缺一不可，见 README §5） ========== */

/* —— ① 亮色默认（高级灰主调：灰米底、软白卡、深灰玫按钮、灰粉/雾蓝/奶茶点缀） —— */
:root {
  --cream: #EFE7E3;      /* 页面底：灰米（抄 .s8 background #EFE7E3） */
  --card: #F7F1EE;       /* 卡片/浮层底：软白米（抄 .s8 .card #F7F1EE） */
  --rose: #D8C3C0;       /* 次强调：灰粉（chip hover / 徽章 / 花影渐变，抄 .s8 灰粉 #D8C3C0） */
  --rose-deep: #7E5D59;  /* 主按钮/链接：深灰玫（.s8 .btn #B48E89 白字仅 2.73:1 不达标 → 调深至白字 5.44:1、链接骑灰米 4.78:1） */
  --rose-ink: #6E4F4C;   /* 价格/强调/toast 底：更深灰玫（.s8 .pr #8A6E6B 骑卡仅 4.15:1 → 调深至骑卡 6.51:1） */
  --sage: #A9B4BE;       /* 点缀：雾蓝（抄 .s8 #A9B4BE；装饰底/卡图渐变，不承载文字） */
  --sage-deep: #5E6B75;  /* 深雾蓝（成功态/叶徽标字）：骑软白卡 4.89:1 达标 */
  --ink: #5A4F4C;        /* 正文/标题：暖灰（抄 .s8 #5A4F4C；骑灰米 6.48:1） */
  --muted: #6F625E;      /* 次要文字：够深暖灰（.s8 #A9948F 骑卡仅 2.57:1 远不达标 → 调深至骑灰米 4.81:1） */
  --blush: #EFE4E0;      /* 软背景块：暖浅灰（无腮红粉，抄 .s8 卡图底 #EFE4E0） */
  --line: #E4D8D3;       /* 描边/分隔线：暖浅灰线（抄 .s8 chip 底 #E4D8D3） */
  --shadow: 0 16px 40px -22px rgba(74,62,60,.30); /* 卡片悬浮影：柔和低饱和灰调影（莫兰迪软阴影，不刺眼） */
  --shadow-ink: #4A3E3C; /* 阴影着色基色（配 color-mix）：暖灰，明暗恒定 */
  --scrim: #2A2325;      /* 全屏遮罩基色（搜索层/FAB/分类面板背板）：暖深灰，明暗恒定的暗色 dimmer */
  --on-accent: #FBF7F5;  /* 深灰玫主按钮(#7E5D59)上的文字：近白（暗色翻为深灰紫，见四块） */
  --danger: #A8493F;     /* 表单错误字：收敛的暖砖红（灰米底 4.66:1 达标，不用刺眼纯红） */
  --danger-soft: #F5E7E3;/* 表单错误软底：暖浅灰（浅底可留） */

  /* —— 自引入色（随明暗变 → 四块各定义，grep 冒号锚 =4）——
     --mo-tan：奶茶点缀（卡图第三色渐变、footer 花饰、hero 装饰）；
     --mo-chip：chip 胶囊导航底色（nav 场合导航胶囊）。 */
  --mo-tan: #C9B29B;     /* 奶茶（抄 .s8 j3 #C9B29B）——亮值 */
  --mo-chip: #E4D8D3;    /* chip 胶囊底：暖浅灰（抄 .s8 .nav u s 底 #E4D8D3）——亮值 */

  /* —— --mo-on-rose：灰粉底(--rose)上的深字，mode-invariant（只放 :root、不进四块，grep 冒号锚 =1）——
     判据（README §5 规则1(b)「前景骑两模式同色背景取单值」）：--rose 两模式都是浅灰粉
     （亮 #D8C3C0 / 暗 #D9C4C1），故骑其上的字取一个够深的单值即两模式都可读；
     ⚠️ 不可用随明暗翻转的 --ink（暗色翻浅 #EDE4E0 → 浅底浅字仅 1.33:1 近乎不可见）。
     用于：卡片圆润加购钮默认态 + nav chip / 场合 chip 的 hover 态（底都变 --rose）。
     实测：#4A3F3C 骑 --rose 亮 6.05:1 / 暗 6.12:1，两模式均 ≥4.5。 */
  --mo-on-rose: #4A3F3C;

  /* 柔和无衬线字体栈（.s8 用 Segoe UI / PingFang / YaHei）：
     --apple-font 承载全站正文/价格/UI；--serif 仅少量大标题保留一丝气质（多数用 sans 保高级灰的干净）。 */
  --apple-font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  /* 圆角：大圆角软卡片是莫兰迪关键（--radius 22px，抄 .s8 .card 22px / .hero 26px）。pill 保留 980px */
  --radius: 22px;
  --apple-radius: 16px;
  --apple-radius-lg: 22px;
  --apple-radius-pill: 980px;
  --radius-field: 14px;
  --radius-sm: 14px;
  --radius-panel: 28px;     /* PDP 大面板（基底 .fl-pdp）：大圆角 28px；明暗恒定，只需 :root 一处 */
  --apple-shadow: 0 2px 14px rgba(74,62,60,.08); /* 组件浅影：柔和暖灰软影 */

  /* —— --apple-* 兼容别名组（照 florisse 模式重定向到语义 token；随 :root 语义 token 自动跟明暗切换） ——
     显式重申理由同 maison/zen：① --apple-danger 在基底是字面量(#ff3b30)，必须显式改；
     ② 主题 CSS 自包含，不依赖基底别名段实现细节（README §6 契约）。 */
  --apple-blue: var(--rose-deep);      /* 深灰玫主按钮 */
  --apple-blue-hover: var(--rose-ink); /* hover 转更深灰玫 */
  --apple-dark: var(--ink);
  --apple-gray: var(--muted);
  --apple-light-gray: var(--blush);
  --apple-white: var(--card);
  --apple-border: var(--line);
  --apple-price: var(--rose-ink);
  --apple-success: var(--sage-deep);
  --apple-danger: #A8493F; /* iOS 红 → 收敛为暖砖红（与 --danger 同调） */

  /* cartToast 底 = --rose-ink（亮色深灰玫 #6E4F4C）→ 深底上白关闭钮（invert 滤镜）。
     ⚠️ 暗色下 --rose-ink 翻浅为提亮灰粉 #CDB4B0（反转），toast 变浅底 → 须黑钮(none)，故四块各定义。 */
  --btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

/* —— ② 系统暗色（暮色高级灰：深灰紫底 · 灰米字 · 灰粉/雾蓝/奶茶提亮） —— */
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #262123; --card: #2E2829; --rose: #D9C4C1; --rose-deep: #C7ABA7;
    --rose-ink: #CDB4B0; --sage: #B4C0CA; --sage-deep: #A9BCC8; --ink: #EDE4E0;
    --muted: #B3A5A0; --blush: #34292B; --line: #43393B;
    --shadow: 0 18px 42px -20px rgba(0,0,0,.60); /* 暗底加深投影 */
    --on-accent: #262123;   /* 暗色主按钮(提亮灰粉 #C7ABA7)上的文字 → 深灰紫（反转，深字 7.0:1） */
    --danger: #E6A79C;      /* 暗底错误字：提亮暖红 */
    --danger-soft: #3A2624; /* 暗底错误软底：基底浅色在暗底刺眼，必改深暖色 */
    --apple-danger: var(--danger); /* 基底 .apple-popup-danger/.fl-stock-out 用 --apple-danger，暗色须同步跟 --danger */
    --mo-tan: #D2BCA4;      /* 奶茶提亮：在深灰紫底上仍显温润 */
    --mo-chip: #3A3032;     /* chip 胶囊底：暗暖灰（灰米字骑其上可读） */
    --btn-close-filter: none; /* 暗色 toast 底翻浅(--rose-ink #CDB4B0) → 黑关闭钮（none 恢复原黑钮） */
  }
}
/* —— ③a 用户手动锁暗（specificity 高于裸 :root，漏写会被基底 florisse 暗色粉调反杀；值=②同暗值） —— */
:root[data-theme="dark"] {
  --cream: #262123; --card: #2E2829; --rose: #D9C4C1; --rose-deep: #C7ABA7;
  --rose-ink: #CDB4B0; --sage: #B4C0CA; --sage-deep: #A9BCC8; --ink: #EDE4E0;
  --muted: #B3A5A0; --blush: #34292B; --line: #43393B;
  --shadow: 0 18px 42px -20px rgba(0,0,0,.60);
  --on-accent: #262123;
  --danger: #E6A79C;
  --danger-soft: #3A2624;
  --apple-danger: var(--danger);
  --mo-tan: #D2BCA4;
  --mo-chip: #3A3032;
  --btn-close-filter: none;
}
/* —— ③b 用户手动锁亮（须压过系统暗色偏好；值=①同亮值） —— */
:root[data-theme="light"] {
  --cream: #EFE7E3; --card: #F7F1EE; --rose: #D8C3C0; --rose-deep: #7E5D59;
  --rose-ink: #6E4F4C; --sage: #A9B4BE; --sage-deep: #5E6B75; --ink: #5A4F4C;
  --muted: #6F625E; --blush: #EFE4E0; --line: #E4D8D3;
  --shadow: 0 16px 40px -22px rgba(74,62,60,.30);
  --on-accent: #FBF7F5;
  --danger: #A8493F;
  --danger-soft: #F5E7E3;
  --apple-danger: #A8493F;
  --mo-tan: #C9B29B;
  --mo-chip: #E4D8D3;
  --btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

/* PDP 无图占位渐变：基底为粉紫装饰渐变（不走 token），morandi 换灰米 + 灰粉/雾蓝花影（低饱和高级灰） */
.fl-pdp-img {
  background:
    radial-gradient(340px 240px at 62% 40%, var(--rose) 0%, transparent 60%),
    radial-gradient(240px 200px at 34% 66%, var(--sage) 0%, transparent 60%),
    var(--blush);
}

/* ========== 段2：nav / footer（mo- 前缀，抄 mockup .s8 .nav/.logo/.foot） ========== */

/* body 灰米底（无底纹，靠软卡与柔阴影营造高级灰质感） */
body { background-color: var(--cream); }

/* 顶栏：灰米实底 + 底缘极浅线；左字标 / 中 chip 胶囊导航 / 右动作簇。
   保留 id=appleNav 的 .scrolled 契约：滚动后底线加实、微投影。 */
.mo-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.mo-nav.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 22px -18px var(--shadow-ink); }
.mo-nav-inner {
  max-width: var(--content-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 38px;
}
/* logo：粗字距字标 + 深灰玫（抄 .s8 .logo #8A6E6B letter-spacing .2em 600；本主题用更深 --rose-ink 保对比 5.97:1） */
.mo-brand { display: inline-flex; align-items: center; text-decoration: none; }
.mo-brand:hover { text-decoration: none; }
.mo-brand .mo-mark {
  font-family: var(--apple-font); font-weight: 600;
  font-size: 20px; color: var(--rose-ink); letter-spacing: .18em; white-space: nowrap;
}
.mo-brand-logo { height: 34px; width: auto; }

/* chip 胶囊导航（抄 .s8 .nav u s：暖浅灰胶囊底，hover 灰粉底）；文字用 --ink 保对比 5.67:1（.s8 原 #8A7D79 仅 2.85:1 不达标） */
.mo-navlinks { display: flex; gap: 10px; align-items: center; }
.mo-navlink {
  font-family: var(--apple-font); font-size: 13px; font-weight: 500;
  color: var(--ink); text-decoration: none;
  background: var(--mo-chip); border-radius: var(--apple-radius-pill);
  padding: 7px 16px; transition: background .2s, color .2s;
}
.mo-navlink:hover { background: var(--rose); color: var(--mo-on-rose); text-decoration: none; }

/* 右侧动作簇 */
.mo-nav-actions { display: flex; align-items: center; gap: 14px; }
.mo-icon-btn {
  background: none; border: none; color: var(--ink); cursor: pointer;
  padding: 4px; display: inline-flex; align-items: center; justify-content: center;
  position: relative; transition: color .2s;
}
.mo-icon-btn:hover { color: var(--rose-deep); }
.mo-icon-btn svg, .mo-icon-btn .mo-icon { width: 19px; height: 19px; }
/* 购物车角标：深灰玫底、近白字（暗色翻提亮灰粉底 + 深字，随 token 自动） */
.mo-cart-badge {
  position: absolute; top: -4px; right: -6px;
  background: var(--rose-deep); color: var(--on-accent);
  font-family: var(--apple-font); font-size: 0.58rem; font-weight: 600;
  min-width: 17px; height: 17px; border-radius: var(--apple-radius-pill); padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
}

/* footer：柔和浅色，左右两栏小字（抄 .s8 .foot #A9948F；本主题用 --muted 保对比 4.81:1） */
.mo-footer {
  border-top: 1px solid var(--line); background: var(--cream);
  margin-top: 72px; padding: 26px 0 30px;
}
.mo-footer-inner {
  max-width: var(--content-max); margin: 0 auto; padding: 0 38px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  font-family: var(--apple-font); font-size: 12.5px; color: var(--muted); letter-spacing: .04em;
}
.mo-footer-left, .mo-footer-right { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.mo-footer a { color: var(--muted); text-decoration: none; transition: color .2s; }
.mo-footer a:hover { color: var(--rose-deep); text-decoration: none; }
.mo-footer-lang a.active { color: var(--rose-deep); }
.mo-footer-sep { color: var(--line); }

/* ========== 段3：首页（抄 mockup .s8 .hero/.grid/.card） ========== */

.mo-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 38px; }

/* 眉题（大字距小标，深灰玫作层次） */
.mo-kick {
  font-family: var(--apple-font); font-weight: 600;
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--rose-ink); margin-bottom: 14px;
}

/* —— hero 左右分栏：左软卡文案 + 右装饰花影块（抄 .s8 .hero grid 1fr 1fr，大圆角软卡） —— */
.mo-hero {
  max-width: var(--content-max); margin: 0 auto; padding: 14px 38px 26px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch;
}
.mo-hero-tx {
  background: var(--card); border-radius: var(--radius);
  padding: 44px 38px; display: flex; flex-direction: column; justify-content: center;
  box-shadow: var(--shadow);
}
.mo-hero-h1 {
  font-family: var(--apple-font); font-weight: 600;
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.5; letter-spacing: .005em;
  margin: 0 0 14px; color: var(--ink); text-wrap: balance;
}
.mo-hero-h1 em { font-style: normal; color: var(--rose-deep); } /* 点睛：深灰玫 */
.mo-hero-lede {
  font-family: var(--apple-font); font-weight: 400;
  color: var(--muted); font-size: 13.5px; line-height: 2; letter-spacing: .01em;
  max-width: 44ch; margin: 0 0 26px;
}
.mo-hero-back {
  display: inline-block; font-family: var(--apple-font);
  font-size: 13px; color: var(--muted); text-decoration: none; margin-bottom: 12px;
}
.mo-hero-back:hover { color: var(--rose-deep); }
.mo-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
/* 右装饰花影块：灰粉/雾蓝/奶茶低饱和径向渐变叠灰米底（纯装饰，aria-hidden） */
.mo-hero-im {
  border-radius: var(--radius); min-height: 300px; overflow: hidden; position: relative;
  background:
    radial-gradient(220px 200px at 30% 32%, var(--rose) 0%, transparent 62%),
    radial-gradient(220px 200px at 74% 60%, var(--sage) 0%, transparent 62%),
    radial-gradient(180px 160px at 52% 84%, var(--mo-tan) 0%, transparent 62%),
    var(--blush);
}
.mo-hero-im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 灰玫填充胶囊按钮（抄 .s8 .btn：bg #B48E89 白字 pill；本主题深灰玫底保白字 5.44:1），hover 加深 */
.mo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rose-deep); color: var(--on-accent); border: none;
  padding: 13px 30px; border-radius: var(--apple-radius-pill);
  font-family: var(--apple-font); font-size: 13px; font-weight: 500; letter-spacing: .04em;
  cursor: pointer; text-decoration: none; transition: background .2s, filter .2s;
}
.mo-btn:hover { background: var(--rose-ink); color: var(--on-accent); text-decoration: none; }
/* 次 CTA：描边空心胶囊（同尺寸，区分主/次） */
.mo-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; color: var(--rose-deep); border: 1px solid var(--line);
  padding: 13px 30px; border-radius: var(--apple-radius-pill);
  font-family: var(--apple-font); font-size: 13px; font-weight: 500; letter-spacing: .04em;
  cursor: pointer; text-decoration: none; transition: border-color .2s, color .2s;
}
.mo-btn-ghost:hover { border-color: var(--rose); color: var(--rose-ink); text-decoration: none; }
/* 侧栏「筛选」等块状钮：描边胶囊，hover 深灰玫填充 */
.mo-btn-box {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rose-deep); border-radius: var(--apple-radius-pill);
  background: none; color: var(--rose-deep); padding: 10px 20px;
  font-family: var(--apple-font); font-size: 12px; font-weight: 500; letter-spacing: .03em;
  cursor: pointer; text-decoration: none; transition: color .2s, border-color .2s, background .2s;
}
.mo-btn-box:hover { background: var(--rose-deep); color: var(--on-accent); text-decoration: none; }

/* —— 场合分类横条：灰粉 chip 胶囊目录 —— */
.mo-occ { max-width: var(--content-max); margin: 8px auto 6px; padding: 0 38px; }
.mo-occ-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mo-occ-card {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 20px; text-align: center; text-decoration: none; color: var(--ink);
  background: var(--mo-chip); border-radius: var(--apple-radius-pill);
  transition: background .2s, color .2s;
}
.mo-occ-card:hover { background: var(--rose); color: var(--mo-on-rose); text-decoration: none; }
.mo-occ-name { font-family: var(--apple-font); font-weight: 500; font-size: 14px; }
/* 副名（英文小标）：骑 chip 底(#E4D8D3)——用 --ink 保对比 5.66:1（--muted 骑此深底仅 4.20:1 不达标；
   不用 opacity 降透明度：会把字色往 chip 底混回浅色、对比又跌回 ~4.2，故用实心 --ink，靠 9px/字距区分层级）。 */
.mo-occ-en { font-family: var(--apple-font); font-weight: 400; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
/* hover 时底变 --rose（两模式浅灰粉）→ 副名同步用 mode-invariant 深字 --mo-on-rose（暗色 --ink 翻浅会不可读） */
.mo-occ-card:hover .mo-occ-en { color: var(--mo-on-rose); }

/* —— 区块标题行（画廊区头：标题 + 右侧查看全部） —— */
.mo-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 46px 0 24px;
}
.mo-sec-head h2 {
  font-family: var(--apple-font); font-weight: 600; font-size: 24px;
  margin: 0; color: var(--ink); letter-spacing: .005em;
}
.mo-sec-head .mo-kick { margin-bottom: 8px; }
.mo-sec-link {
  font-family: var(--apple-font); font-size: 13px; font-weight: 500;
  color: var(--muted); text-decoration: none; white-space: nowrap;
}
.mo-sec-link:hover { color: var(--rose-deep); text-decoration: none; }

/* —— 大圆角软卡片三栏（抄 .s8 .grid 3 列 gap 20px；卡 22px 大圆角 + 柔阴影；hover 上浮 -3px） —— */
.mo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.mo-card {
  display: block; background: var(--card); text-decoration: none; color: var(--ink);
  border-radius: var(--radius); padding: 12px 12px 8px;
  transition: transform .18s, box-shadow .18s;
}
.mo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); text-decoration: none; }
/* 卡图（16px 圆角，抄 .s8 .card .ph；灰粉/雾蓝/奶茶低饱和花影） */
.mo-card-ph {
  position: relative; height: 168px; overflow: hidden;
  border-radius: var(--apple-radius);
  background:
    radial-gradient(120px 108px at 50% 50%, var(--rose) 0%, transparent 62%),
    radial-gradient(90px 84px at 30% 70%, var(--sage) 0%, transparent 58%),
    var(--blush);
  display: grid; place-items: center;
}
.mo-card-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mo-card-ph svg { width: 46px; height: 46px; color: var(--mo-tan); opacity: .7; }
/* 售罄/精选徽标：软白胶囊小标 */
.mo-card-badge {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--apple-font); font-weight: 600; font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--card); color: var(--ink);
  padding: 4px 10px; border-radius: var(--apple-radius-pill);
}
.mo-card-badge.leaf { color: var(--sage-deep); }
/* 品名（抄 .s8 .card h3 600 #6E5B58 15px） */
.mo-card h3 {
  font-family: var(--apple-font); font-weight: 600;
  font-size: 15px; margin: 14px 8px 4px; color: var(--ink);
}
/* 副名（抄 .s8 .card .sub #A9948F；本主题用 --muted 保对比 4.81:1） */
.mo-card-note {
  font-family: var(--apple-font); font-weight: 400;
  font-size: 12px; color: var(--muted); margin: 0 8px 10px;
}
.mo-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 8px 8px; flex-wrap: wrap; }
/* 价格（抄 .s8 .card .pr 700 #8A6E6B；本主题用更深 --rose-ink 保骑卡 6.51:1 tabular） */
.mo-card-pr {
  font-family: var(--apple-font); font-size: 15px; font-weight: 700; letter-spacing: .01em;
  color: var(--rose-ink); font-variant-numeric: tabular-nums;
}
/* 圆润加购钮（抄 .s8 .card .add 圆钮：灰粉底深字；文本态改胶囊容纳「加入/选规格」），hover 深灰玫填充 */
/* ⚠️ 默认态底 --rose 两模式都是浅灰粉，字必须用 mode-invariant 深字 --mo-on-rose（不可用 --ink：
   暗色下 --ink 翻浅 #EDE4E0 → 浅底浅字仅 1.33:1 近乎不可见）。hover 态底翻深灰玫 --rose-deep + --on-accent 字，那对是随明暗翻转的正确组合。 */
.mo-card-add {
  background: var(--rose); border: none; color: var(--mo-on-rose);
  padding: 6px 14px; border-radius: var(--apple-radius-pill); cursor: pointer;
  font-family: var(--apple-font); font-size: 11px; font-weight: 600; letter-spacing: .03em;
  text-decoration: none; transition: background .2s, color .2s;
}
.mo-card-add:hover { background: var(--rose-deep); color: var(--on-accent); text-decoration: none; }
.mo-card-add.disabled { background: var(--blush); color: var(--muted); opacity: .8; cursor: default; }
.mo-card-add.disabled:hover { background: var(--blush); color: var(--muted); }

/* —— 主商品区（沿用 florisse 侧栏筛选结构 fl-*，靠 token 自动换高级灰肤） —— */
.mo-shop { padding-top: 8px; }

/* —— 分页：软白圆角方框数字（active 深灰玫填充） —— */
.mo-pagination { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 42px 0 8px; }
.mo-page-link {
  font-family: var(--apple-font); font-weight: 500; font-size: 13px; letter-spacing: .01em;
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--apple-radius);
  background: var(--card); color: var(--ink); text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.mo-page-link:hover { border-color: var(--rose); text-decoration: none; color: var(--rose-deep); }
.mo-page-link.active { background: var(--rose-deep); border-color: var(--rose-deep); color: var(--on-accent); }

/* 空态 */
.mo-empty {
  text-align: center; padding: 68px 20px; color: var(--muted);
  border-radius: var(--radius); margin: 28px 0; background: var(--card);
  font-family: var(--apple-font);
}
.mo-empty svg { width: 46px; height: 46px; color: var(--mo-tan); opacity: .7; }

/* —— 响应式：中屏三栏→两栏、窄屏单列；hero 单列 —— */
@media (max-width: 991.98px) {
  .mo-grid { grid-template-columns: repeat(2, 1fr); }
  .mo-hero { grid-template-columns: 1fr; }
  .mo-hero-im { min-height: 200px; order: -1; } /* 单列时装饰块置顶 */
  .mo-occ, .mo-wrap { padding: 0 24px; }
  .mo-hero { padding: 14px 24px 22px; }
}
@media (max-width: 767.98px) {
  .mo-navlinks { display: none; } /* 窄屏隐藏 chip 导航（走汉堡菜单） */
  .mo-nav-inner { padding: 14px 24px; }
}
@media (max-width: 575.98px) {
  .mo-grid { grid-template-columns: 1fr; }
  .mo-nav-inner { padding: 12px 16px; }
  .mo-brand .mo-mark { font-size: 18px; }
  .mo-occ, .mo-wrap { padding: 0 16px; }
  .mo-hero { padding: 12px 16px 18px; }
  .mo-hero-tx { padding: 32px 24px; }
  .mo-footer-inner { padding: 0 16px; }
}

/* —— a11y：reduced-motion 下关掉卡片上浮位移（保留柔阴影/色，无位移动效） —— */
@media (prefers-reduced-motion: reduce) {
  .mo-card { transition: box-shadow .18s; }
  .mo-card:hover { transform: none; }
}

/* ========== 段4：PDP 内页（暖阳莫兰迪大圆角软卡 · 提案 .mo-pdp；mo- 前缀，双模式走 token） ==========
   左右分栏：左图大圆角软卡 | 右信息软圆卡。眉题 + 柔体品名 + 深灰玫价 + 胶囊规格(选中玫瑰实底) +
   圆角软块贺卡 + 玫瑰胶囊加购带柔影 + 圆角数量器。无硬线、靠圆角/柔影/留白分层。
   钩子契约（README §8）视觉类叠在 .apple-* 和 .fl-* 钩子上。库存态挂 .apple-stock.in-stock/.out-stock
   （matchVariant 重写 className）。双模式全走 token。顶距用 padding-top/bottom 长写法（不覆盖 .mo-wrap 横向）。
   ⚠️ a11y：灰粉底(--rose)上字用 --mo-on-rose；选中胶囊用 --rose-deep 底 + --on-accent 白字（AA 安全）。 */

.mo-pdp-wrap { padding-top: 20px; padding-bottom: 8px; }

/* 面包屑 */
.mo-crumb { font-family: var(--apple-font); font-size: 12.5px; color: var(--muted); padding: 4px 0 14px; }
.mo-crumb a { color: var(--muted); text-decoration: none; }
.mo-crumb a:hover { color: var(--rose-deep); }
.mo-crumb-sep { color: var(--line); margin: 0 8px; }
.mo-crumb-cur { color: var(--ink); }

/* 左右分栏 */
.mo-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; padding: 6px 0 34px; }

/* 左：图大圆角软卡 */
.mo-pdp-gal { position: sticky; top: 86px; }
.mo-pdp-hero { border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); }
.mo-pdp-hero-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mo-pdp-hero-ph {
  aspect-ratio: 4 / 5; display: grid; place-items: center;
  background:
    radial-gradient(180px 160px at 54% 42%, var(--rose) 0%, transparent 60%),
    radial-gradient(130px 120px at 34% 66%, var(--sage) 0%, transparent 58%),
    radial-gradient(100px 100px at 72% 74%, var(--mo-tan) 0%, transparent 55%),
    var(--blush);
}
.mo-pdp-hero-ph svg { width: 70px; height: 70px; color: var(--rose-deep); opacity: .5; }
/* 缩略图：大圆角小图，active 玫瑰环 */
.mo-pdp-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.mo-pdp-thumb { width: 58px; height: 58px; object-fit: cover; border-radius: 16px; cursor: pointer; opacity: .8; transition: opacity .2s; background: var(--card); }
.mo-pdp-thumb:hover { opacity: 1; }
.mo-pdp-thumb.active { opacity: 1; outline: 2px solid var(--rose-deep); outline-offset: 2px; }

/* 右：信息软圆卡 */
.mo-pdp-info { background: var(--card); border-radius: 26px; padding: 30px 28px; box-shadow: var(--shadow); }
.mo-pdp-kick { font-family: var(--apple-font); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.mo-pdp-title { font-family: var(--apple-font); font-weight: 600; font-size: clamp(24px, 3vw, 28px); line-height: 1.4; margin: 0 0 4px; color: var(--ink); }
.mo-pdp-en { font-family: var(--apple-font); font-size: 12px; letter-spacing: .04em; color: var(--muted); margin-bottom: 14px; }
.mo-pdp-price { font-family: var(--apple-font); font-weight: 700; font-size: 22px; color: var(--rose-ink); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.mo-pdp-ptag { display: inline-block; font-family: var(--apple-font); font-size: 11px; font-weight: 600; background: var(--mo-chip); color: var(--ink); border-radius: var(--apple-radius-pill); padding: 3px 12px; margin-bottom: 8px; }
.mo-pdp-lede { font-family: var(--apple-font); font-size: 13px; line-height: 1.95; color: var(--muted); margin: 10px 0 18px; }
.mo-pdp-lede img { max-width: 100%; height: auto; }

/* 通用标签 */
.mo-pdp-lbl { font-family: var(--apple-font); font-size: 12px; letter-spacing: .06em; color: var(--muted); margin: 18px 0 10px; }
.mo-pdp-lbl-sub { color: var(--rose-deep); }

/* 规格：胶囊，选中 .selected 玫瑰实底，缺货 .opt-oos 灰划 */
.mo-pdp-sizes { display: flex; gap: 10px; flex-wrap: wrap; }
.mo-pdp-size { font-family: var(--apple-font); font-size: 13px; color: var(--ink); background: var(--mo-chip); border: none; border-radius: var(--apple-radius-pill); padding: 9px 20px; cursor: pointer; transition: background .2s, color .2s; }
.mo-pdp-size:hover { background: var(--rose); color: var(--mo-on-rose); }
.mo-pdp-size.selected { background: var(--rose-deep); color: var(--on-accent); }
.mo-pdp-size.opt-oos { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.mo-pdp-size.opt-oos:hover { background: var(--mo-chip); color: var(--ink); }

/* 库存（挂 .apple-stock.in-stock/.out-stock） */
.mo-pdp-stock { margin-top: 14px; }
.mo-pdp-stock .apple-stock { font-family: var(--apple-font); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--muted); }
.mo-pdp-stock .apple-stock.in-stock { color: var(--sage-deep); }
.mo-pdp-stock .apple-stock.out-stock { color: var(--danger); }

/* 贺卡：圆角软块 */
.mo-pdp-field { margin-top: 4px; }
.mo-pdp-note { width: 100%; font-family: var(--apple-font); font-size: 13px; color: var(--ink); background: var(--cream); border: none; border-radius: 16px; padding: 12px 14px; resize: vertical; }
.mo-pdp-note::placeholder { color: var(--muted); }
.mo-pdp-note:focus { outline: 2px solid var(--rose); }
.mo-pdp-counter { font-family: var(--apple-font); font-size: 10.5px; color: var(--muted); text-align: right; margin-top: 5px; }

/* PWP 加购：圆角软卡列，选中 .on 玫瑰环 + 灰粉底 */
.mo-pdp-addons { display: flex; flex-direction: column; gap: 10px; }
.mo-pdp-addons .fl-addon { display: flex; align-items: center; gap: 12px; margin: 0; background: var(--cream); border: none; border-radius: 16px; padding: 10px 12px; cursor: pointer; transition: outline .2s, background .2s; outline: 2px solid transparent; }
.mo-pdp-addons .fl-addon:hover { background: var(--blush); }
.mo-pdp-addons .fl-addon.on { outline-color: var(--rose-deep); background: var(--blush); }
.mo-pdp-addons .fl-addon-ic { width: 38px; height: 38px; flex: none; overflow: hidden; display: grid; place-items: center; background: var(--card); border-radius: 12px; }
.mo-pdp-addons .fl-addon-ic img { width: 100%; height: 100%; object-fit: cover; }
.mo-pdp-addons .fl-addon-ic svg { width: 20px; height: 20px; color: var(--rose-deep); }
.mo-pdp-addons .fl-addon-body { flex: 1; min-width: 0; }
.mo-pdp-addons .fl-addon-name { font-family: var(--apple-font); font-weight: 600; font-size: 13.5px; color: var(--ink); }
.mo-pdp-addons .fl-addon-variant { font-weight: 400; font-size: 11px; color: var(--muted); }
.mo-pdp-addons .fl-addon-save { font-family: var(--apple-font); font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.mo-pdp-addons .fl-addon-price { font-family: var(--apple-font); font-weight: 700; font-size: 13px; color: var(--rose-ink); text-align: right; }
.mo-pdp-addons .fl-addon-price small { display: block; font-size: 10px; font-weight: 400; color: var(--muted); text-decoration: line-through; }

/* 批量优惠 */
.mo-pdp-bulk { margin-top: 20px; }

/* 数量 + 加购 一行（圆角胶囊数量器 + 玫瑰胶囊加购带柔影） */
.mo-pdp-buy-row { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.mo-pdp-qty { display: inline-flex; align-items: center; background: var(--cream); border-radius: var(--apple-radius-pill); padding: 4px; }
.mo-pdp-qty button { border: none; background: none; color: var(--ink); font-family: var(--apple-font); font-size: 18px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; transition: background .2s; }
.mo-pdp-qty button:hover { background: var(--mo-chip); }
.mo-pdp-qty input { border: none; width: 42px; text-align: center; background: none; color: var(--ink); font-family: var(--apple-font); font-size: 15px; font-weight: 600; -moz-appearance: textfield; }
.mo-pdp-qty input::-webkit-outer-spin-button, .mo-pdp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mo-pdp-buy { flex: 1; min-width: 150px; display: inline-flex; align-items: center; justify-content: center; background: var(--rose-deep); color: var(--on-accent); border: none; border-radius: var(--apple-radius-pill); padding: 14px 28px; font-family: var(--apple-font); font-size: 14px; font-weight: 500; letter-spacing: .04em; cursor: pointer; box-shadow: 0 12px 26px -12px rgba(74,62,60,.5); transition: filter .2s; }
.mo-pdp-buy:hover:not(:disabled) { filter: brightness(1.06); color: var(--on-accent); }
.mo-pdp-buy:disabled { background: var(--mo-chip); color: var(--muted); box-shadow: none; opacity: .9; cursor: not-allowed; }
/* 立即购买：次要（灰底胶囊，无柔影） */
.mo-pdp-cta2 { margin-top: 12px; }
.mo-pdp-buy2 { width: 100%; background: var(--mo-chip); color: var(--ink); border: none; border-radius: var(--apple-radius-pill); padding: 13px 28px; font-family: var(--apple-font); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .2s; }
.mo-pdp-buy2:hover:not(:disabled) { background: var(--rose); color: var(--mo-on-rose); }
.mo-pdp-buy2:disabled { opacity: .55; cursor: not-allowed; }

/* 脚注 */
.mo-pdp-fine { font-family: var(--apple-font); font-size: 11.5px; color: var(--muted); margin-top: 16px; }

/* 长描述：大圆角软卡 */
.mo-pdp-desc { background: var(--card); border-radius: 26px; padding: 26px 28px; margin: 8px 0 34px; box-shadow: var(--shadow); }
.mo-pdp-desc-hd h2 { font-family: var(--apple-font); font-weight: 600; font-size: 20px; color: var(--ink); margin: 0 0 14px; }
.mo-pdp-desc-body { font-family: var(--apple-font); font-size: 14px; line-height: 1.9; color: var(--muted); }
.mo-pdp-desc-body img { max-width: 100%; height: auto; }

/* —— PDP 响应式：窄屏塌单列、取消 sticky —— */
@media (max-width: 991.98px) {
  .mo-pdp { grid-template-columns: 1fr; gap: 22px; }
  .mo-pdp-gal { position: static; top: auto; }
}

/* ========== 段5：分类导航（内页差异化 · 顶部圆胶囊 tab，提案 .mo-cat） ==========
   取消 florisse 左侧栏，改顶部圆胶囊分类 tab（active 玫瑰实底）+ 工具行（计数/排序/价格）+ 全宽大圆角软卡网格。
   全为纯 <a href> GET 导航 / 表单，无 JS 钩子；双模式全走 token。a11y：hover 胶囊用 --mo-on-rose 字。 */
.mo-cattabs { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0; }
.mo-cattab { font-family: var(--apple-font); font-size: 13px; color: var(--muted); background: var(--mo-chip); border-radius: 999px; padding: 9px 18px; text-decoration: none; transition: background .2s, color .2s; white-space: nowrap; }
.mo-cattab:hover { background: var(--rose); color: var(--mo-on-rose); text-decoration: none; }
.mo-cattab.active { background: var(--rose-deep); color: var(--on-accent); }
.mo-cattab.sub { font-size: 12px; opacity: .9; }

/* 工具行 */
.mo-cat-tools { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; padding: 16px 0 20px; }
.mo-cat-count { display: flex; align-items: center; gap: 12px; font-family: var(--apple-font); font-size: 12.5px; color: var(--muted); }
.mo-cat-tools-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mo-cat-sort { font-family: var(--apple-font); font-size: 12.5px; color: var(--ink); background: var(--card); border: none; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.mo-cat-sort:focus { outline: 2px solid var(--rose); }
.mo-cat-price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mo-cat-price-in { width: 78px; font-family: var(--apple-font); font-size: 12.5px; color: var(--ink); background: var(--card); border: none; border-radius: 999px; padding: 9px 14px; -moz-appearance: textfield; }
.mo-cat-price-in::-webkit-outer-spin-button, .mo-cat-price-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mo-cat-price-in::placeholder { color: var(--muted); }
.mo-cat-price-in:focus { outline: 2px solid var(--rose); }
.mo-cat-price-sep { color: var(--muted); }
.mo-cat-price-btn { font-family: var(--apple-font); font-size: 12.5px; font-weight: 500; background: var(--rose-deep); color: var(--on-accent); border: none; border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: filter .2s; }
.mo-cat-price-btn:hover { filter: brightness(1.06); }
.mo-cat-price-clear { font-family: var(--apple-font); font-size: 12px; color: var(--muted); text-decoration: none; }
.mo-cat-price-clear:hover { color: var(--rose-deep); }

/* 全宽大圆角软卡网格上距 */
.mo-shop .mo-grid { padding-top: 8px; }