/* ============================================================
   MEADOW 皮肤 — 草绿 · 电商效率风（vitrine 的二级皮肤，双模式）
   对标：flowerchimp.my（Flower Chimp 马来西亚站，2026-08-28 用 playwright 实测）
   继承链：meadow → vitrine → florisse → default
     · layout / index / product / partials **全部沿链用 vitrine 的**，本皮肤只有本文件 + theme.json；
     · 本文件由 vitrine/layout.ejs 按 themeMeta.name 动态挂在 vitrine-theme.css 之后（源序覆盖），
       所以这里**只写差异**；改本文件须 bump theme.json 的 cssVersion。

   ── 对标站实测（1440 宽）──────────────────────────────────────
     页底纯白 · 正文 Lato 14px #181318 · 标题 Merriweather 700 28px（下有一条发丝线）· 主色草绿 #51A582
     （倒计时通知条 / 搜索钮 / 「Quick Gift Finder」通栏 / 90 分钟徽章 / 价格滑块）· 深灰钮 #454346 圆角 5px ·
     浅灰底 #F8F8F8（订阅带 / 页脚）· 薰衣草紫 #B7B4D6（页尾四格服务承诺带）· 星级橙 #FF9900。
     卡片：白底 + 1px #E7E4E0 描边 + 8px 圆角，图**正方**，标题 Lato 13.5px 500，价格 Lato 14px。
     顶栏：logo **靠左**、中间搜索框、右侧账户/购物袋；第二行导航 Lato 14px **不大写** + 下拉箭头。
     区块序：通知条 → 顶栏 → 通栏 hero（浅底 + 绿钮）→ 绿色礼物筛选带 → **圆形**分类图标行 →
     「Popular This Week」4 列产品 → 系列拼贴（图 + 标题条）→ SEO 长文 → 评价轮播 → 博客 3 列 →
     配送地区标签 → 紫色四格承诺带 → 灰底订阅 → 灰底五列页脚。
     vitrine 首页与之同构的部分照单覆写；「搜索框在顶栏中间」「评价轮播」「倒计时」需要新 DOM / 数据，不在本皮肤范围。

   ── 刻意的取舍 ───────────────────────────────────────────────
     绿底配白字（#51A582 / #FFFFFF）只有 3.1:1，是对标站的签名配色（Search / SHOP NOW / 通知条），
     本皮肤照搬；要过 AA 把 --on-accent 亮值与 --vt-on-gold 换成 #0F1512 即可（绿底近黑 6.6:1 ✓）。

   ── 反转判定（README §7 末条）─────────────────────────────────
     cartToast 底 = --rose-ink：亮色近黑 #181318、暗色近白 #F0EEEB → 明度反转 → --on-accent /
     --btn-close-filter 四块成对翻。主钮底 --rose-deep 亮暗都是绿：亮配白字，暗跟 --on-accent 翻成近黑。
   自引入色：--md-band / --md-on-band 薰衣草承诺带的底与字 —— 两模式同值（暗色页底上一条浅紫带同样成立），
     mode-invariant，只放 :root（grep -c '\-\-md-band:' 应 = 1）。
   ============================================================ */

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

/* —— ① 亮色默认 + mode-invariant —— */
:root {
  /* 11 基础色 */
  --cream: #FFFFFF;      /* 页底：纯白 */
  --card: #FFFFFF;       /* 卡底：白（卡靠 1px 描边 + 圆角与页底区分） */
  --rose: #51A582;       /* 次强调/描边：草绿 */
  --rose-deep: #51A582;  /* 主按钮/链接：草绿 */
  --rose-ink: #181318;   /* 价格/标题/字标/cartToast 底：近黑 */
  --sage: #51A582;       /* 绿点缀：与主色同色（对标站只有一种绿） */
  --sage-deep: #2E7A57;  /* 成功态：深草绿（白底可读 5.0 ✓） */
  --ink: #181318;        /* 正文：近黑（对标站正文色） */
  --muted: #5C5A5D;      /* 次要字：对标站的灰字 rgb(92,90,93)。对比度（底 #FFFFFF）6.32 ✓ AA */
  --blush: #F8F8F8;      /* 软背景块：订阅带 / 页脚的浅灰 */
  --line: #E7E4E0;       /* 描边：卡片描边色（实测 rgb(231,228,224)） */

  --shadow: 0 12px 28px -18px rgba(24, 19, 24, .28);
  --apple-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-ink: #181318;
  --avatar-glow: rgba(81, 165, 130, .35);

  --on-accent: #FFFFFF;  /* 绿钮 / 近黑 toast 上的字：白（见取舍；暗色翻近黑） */

  --danger: #B3261E;
  --danger-soft: #FBEEEC;

  /* 字体：正文 Lato、标题 Merriweather（Google Fonts 由 layout 按 theme.json 的 googleFonts 挂载） */
  /* 中文：Noto Sans SC 配 Lato、Noto Serif SC 配 Merriweather（都从 Google Fonts 按需分片加载）。
     对标站是纯英文站；不配的话汉字落到微软雅黑/宋体，与拉丁字不成一套。PingFang / 雅黑留作离线回退。 */
  --serif: Merriweather, "Noto Serif SC", Georgia, "Times New Roman", "Songti SC", serif;
  --apple-font: Lato, "Noto Sans SC", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;

  /* radius：卡片 8px、按钮/字段 5px（对标站实测） */
  --radius: 8px;
  --apple-radius: 5px;
  --apple-radius-lg: 8px;
  --apple-radius-pill: 980px;
  --radius-field: 5px;
  --radius-sm: 4px;
  --radius-panel: 8px;

  /* vitrine 的自引入色，本皮肤逐个接管（四块各定义） */
  --vt-hairline: #ECEAE7;
  --vt-accent-hover: #3F8F6E;   /* 绿钮 hover：压深一档 */
  --vt-hover-surface: #EFEFEF;
  /* 「金底上的字」在本皮肤变成「绿底上的字」：白（见取舍），mode-invariant 只此一处 */
  --vt-on-gold: #FFFFFF;
  --vt-on-photo: #FFFFFF;
  --vt-photo-ink: #111111;

  /* 承诺带：薰衣草紫底 + 近黑字，两模式恒定 */
  --md-band: #B7B4D6;
  --md-on-band: #181318;

  --btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

/* —— ② 系统暗色 —— */
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #121413; --card: #1B1E1C; --rose: #5FB391; --rose-deep: #5FB391;
    --rose-ink: #F0EEEB; --sage: #5FB391; --sage-deep: #9ED1B8; --ink: #ECEAE6;
    --muted: #A19FA2; --blush: #1F2220; --line: #2C302E;
    --shadow: 0 12px 28px -18px rgba(0, 0, 0, .7);
    --on-accent: #0F1512;       /* 绿钮 / 近白 toast 上的字翻近黑（绿底近黑 7.4:1） */
    --danger: #EFA79F;
    --danger-soft: #3A211E;
    --apple-danger: var(--danger);
    --vt-hairline: #262A28;
    --vt-accent-hover: #7CC4A6; /* 暗底上绿钮 hover 反向提亮 */
    --vt-hover-surface: #262A28;
    --btn-close-filter: none;
  }
}
/* —— ③a 手动锁暗（= ② 同值） —— */
:root[data-theme="dark"] {
  --cream: #121413; --card: #1B1E1C; --rose: #5FB391; --rose-deep: #5FB391;
  --rose-ink: #F0EEEB; --sage: #5FB391; --sage-deep: #9ED1B8; --ink: #ECEAE6;
  --muted: #A19FA2; --blush: #1F2220; --line: #2C302E;
  --shadow: 0 12px 28px -18px rgba(0, 0, 0, .7);
  --on-accent: #0F1512;
  --danger: #EFA79F;
  --danger-soft: #3A211E;
  --apple-danger: var(--danger);
  --vt-hairline: #262A28;
  --vt-accent-hover: #7CC4A6;
  --vt-hover-surface: #262A28;
  --btn-close-filter: none;
}
/* —— ③b 手动锁亮（= ① 同值） —— */
:root[data-theme="light"] {
  --cream: #FFFFFF; --card: #FFFFFF; --rose: #51A582; --rose-deep: #51A582;
  --rose-ink: #181318; --sage: #51A582; --sage-deep: #2E7A57; --ink: #181318;
  --muted: #5C5A5D; --blush: #F8F8F8; --line: #E7E4E0;
  --shadow: 0 12px 28px -18px rgba(24, 19, 24, .28);
  --on-accent: #FFFFFF;
  --danger: #B3261E;
  --danger-soft: #FBEEEC;
  --apple-danger: #B3261E;
  --vt-hairline: #ECEAE7;
  --vt-accent-hover: #3F8F6E;
  --vt-hover-surface: #EFEFEF;
  --btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

/* ========== 段2：nav / footer 覆写（DOM 是 vitrine 的，只改视觉） ========== */

/* 通知条：绿底白字（底色跟 --rose-deep 自动变绿），Lato 小字不大写 */
.vt-notice-inner { font-family: var(--apple-font); font-size: .84rem; font-weight: 700; letter-spacing: .01em; text-transform: none; }

/* 顶栏第 1 行：对标站 logo **靠左**（vitrine 居中）。三列网格改成 auto 1fr auto，品牌落第 1 列。
   中间那列在对标站是搜索框 —— 本皮肤没有那个 DOM（搜索走右侧图标 + 覆盖层），留空白即可。
   顶栏底部用对标站的那道淡阴影代替发丝线（边框宽 --nav-bw 仍是 1px 单一真源，只把颜色归透明）。 */
.vt-nav-inner { grid-template-columns: auto 1fr auto; }
.vt-nav-inner > .vt-brand { grid-column: 1; justify-self: start; }
.vt-nav { border-bottom-color: transparent; box-shadow: 0 7px 13px -11px rgba(0, 0, 0, .25); }
.vt-nav.scrolled { border-bottom-color: transparent; }
body.vt-nav-over-hero .vt-nav { box-shadow: none; }
.vt-brand .vt-mark { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; letter-spacing: .02em; text-transform: none; }
.vt-brand .vt-sub { font-family: var(--apple-font); font-size: .66rem; letter-spacing: .3em; }
.vt-brand-logo { height: 44px; }

/* 主导航：Lato 14px 400 不大写、实色 */
.vt-navlinks { gap: 30px; }
.vt-navlink {
  font-family: var(--apple-font); font-size: .95rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; opacity: 1;
}
.vt-navlink::after { background: var(--rose-deep); height: 2px; }
.vt-navlink:hover { color: var(--rose-deep); }
.vt-dropitem, .vt-mega-link { font-family: var(--apple-font); font-size: .9rem; letter-spacing: 0; text-transform: none; }
.vt-mega-coltitle { font-family: var(--apple-font); font-size: .92rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.vt-dropdown, .vt-mega { border-radius: var(--radius); box-shadow: var(--shadow); }

/* 页脚：浅灰底（#F8F8F8）、列标题 Lato 700 不大写 */
.vt-footer { background: var(--blush); border-top: 0; margin-top: 80px; }
.vt-footer-brandname { font-family: var(--serif); font-weight: 700; letter-spacing: .02em; text-transform: none; }
.vt-footer-col h4 { font-family: var(--apple-font); font-size: .95rem; font-weight: 700; letter-spacing: 0; text-transform: none; margin-bottom: 8px; }
.vt-footer-col a { font-size: .9rem; }
.vt-footer-col a:hover { border-bottom-color: var(--rose-deep); color: var(--rose-deep); }
.vt-footer-meta, .vt-footer-bottom { border-top-color: var(--line); }

/* ========== 段3：首页 / 列表 / PDP 视觉覆写 ========== */

/* 区块头：无眉题；标题 Merriweather 700 28px 居中，头部下压一条发丝线（对标站「Popular This Week」） */
.vt-sec-eyebrow, .vt-storenote-eyebrow { display: none; }
.vt-sec-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.vt-sec-title, .vt-pitch-title, .vt-story-title, .vt-retail-title, .vt-cathero-title, .vt-cc-title, .vt-read-title {
  font-family: var(--serif); font-weight: 700; letter-spacing: 0;
}
.vt-sec-title { font-size: clamp(1.5rem, 2.4vw, 1.75rem); }
.vt-occ-count { font-family: var(--apple-font); font-size: .88rem; letter-spacing: 0; }

/* hero：对标站标题是**细体无衬线**（Lato 300 ~40px）+ 一行 Lato 副标 + 绿色实心钮 */
.vt-hero-slide .vt-hero-title { font-family: var(--apple-font); font-weight: 300; letter-spacing: 0; }
.vt-hero-slide .vt-hero-sub { font-size: 1rem; letter-spacing: 0; }

/* 按钮：Lato 700 不大写、圆角 5px。
   照片上的实心钮 = 绿底（对标站 SHOP NOW）：底走 --rose-deep、字走 --on-accent（token 底绝不写死白字）。 */
.vt-hero-btn, .vt-retail-cta, .vt-filter-apply, .vt-coll-empty-btn, .vt-coll-filterbtn, .vt-tab, .vt-pitch-link, .vt-read-more {
  font-family: var(--apple-font); font-size: .9rem; font-weight: 700;
  letter-spacing: .01em; text-transform: none;
}
.vt-hero-btn, .vt-retail-cta, .vt-filter-apply, .vt-coll-empty-btn { border-radius: var(--apple-radius); }
.vt-hero-slide .vt-hero-btn-solid,
.vt-retail-cta {
  background: var(--rose-deep); color: var(--on-accent, #fff); border-color: var(--rose-deep);
}
.vt-hero-slide .vt-hero-btn-solid:hover,
.vt-retail-cta:hover {
  background: var(--vt-accent-hover); color: var(--on-accent, #fff); border-color: var(--vt-accent-hover); opacity: 1;
}
.vt-tab.is-on { color: var(--rose-deep); border-bottom-color: var(--rose-deep); border-bottom-width: 2px; }
.vt-pitch-link { color: var(--rose-deep); border-bottom-color: var(--rose-deep); }
.vt-pitch-link:hover { color: var(--vt-accent-hover); border-bottom-color: var(--vt-accent-hover); }

/* 分类行：对标站是**圆形**图 + 图下方一行标签（vitrine 是方格 + 压暗层 + 图内白标签）。
   做法：媒体框转圆、去压暗层、标签移到圆下方（绝对定位 top:100%，卡片底部预留一行高度）。
   overflow 改 visible 是为了让标签能露到框外，图与占位各自补 50% 圆角来保住圆形裁切；
   hover 的放大取消 —— 圆框不再裁切，放大会冒出圆外。 */
.vt-occ-media { overflow: visible; border-radius: 50%; border: 1px solid var(--line); background: var(--card); }
.vt-occ-card { padding-bottom: 34px; text-align: center; }
.vt-occ-card:hover .vt-occ-media { border-color: var(--rose-deep); }
.vt-occ-photo, .vt-occ-ph { border-radius: 50%; }
.vt-occ-photo { transition: none; }
.vt-occ-card:hover .vt-occ-photo { transform: none; }
.vt-occ-ph { padding-bottom: 0; background: var(--blush); }
.vt-occ-ph::before { inset: 10px; border-radius: 50%; }
.vt-occ-ph-letter { color: var(--ink); }
.vt-occ-scrim { display: none; }
.vt-occ-label {
  top: calc(100% + 10px); bottom: auto; padding: 0 4px;
  color: var(--ink); text-shadow: none;
  font-family: var(--apple-font); font-size: .92rem; font-weight: 400; letter-spacing: 0; text-transform: none;
}
.vt-occ-card:hover .vt-occ-label { color: var(--rose-deep); }
/* 圆形格子比方格小一档（对标站直径 ~90px，8 个一行）*/
.vt-occ-grid { --vt-occ-min: 120px; gap: 18px 14px; }

/* 产品卡：整卡描边 + 8px 圆角 + 白底，图正方，文字区内缩（对标站 collection 卡实测） */
.vt-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .22s, border-color .22s; }
.vt-card:hover { box-shadow: var(--shadow); border-color: var(--line); }
.vt-card-media { border: 0; border-radius: 0; }
.vt-card:hover .vt-card-media { border-color: transparent; }
.vt-card-photo, .vt-card-ph { aspect-ratio: 1 / 1; }
.vt-card-body { padding: 12px 14px 14px; }
.vt-card-title { font-family: var(--apple-font); font-size: .92rem; font-weight: 500; line-height: 1.45; min-height: 2.9em; }
.vt-card-price { font-family: var(--apple-font); font-size: .95rem; font-weight: 400; color: var(--ink); }
.vt-card-from, .vt-card-ask { font-family: var(--apple-font); font-size: .78rem; letter-spacing: 0; text-transform: none; }
.vt-card-badge { font-family: var(--apple-font); font-size: .66rem; font-weight: 700; letter-spacing: .04em; border-radius: var(--radius-sm); }
.vt-card-badge-best { background: var(--rose-deep); color: var(--vt-on-gold); }

/* 系列卡：圆角图 + 标题条（对标站拼贴的每块 = 图 + 粗标题 + 一行小字） */
.vt-cc-media { border-color: transparent; border-radius: var(--radius); }
.vt-cc:hover .vt-cc-media { border-color: transparent; }
.vt-cc-title { font-size: 1.02rem; }
.vt-cc-desc { font-size: .85rem; }
.vt-cc-count { font-family: var(--apple-font); letter-spacing: 0; text-transform: none; }

/* 承诺带：薰衣草紫底 + 近黑字 + 图标（对标站页尾那条四格带），不是 vitrine 的通栏黑条。
   前景走 --md-on-band（mode-invariant），不用 --on-accent（那是绿底/toast 的字）。 */
.vt-sp { background: var(--md-band); color: var(--md-on-band); padding: clamp(22px, 2.6vw, 32px) 0; }
.vt-sp-item { flex-direction: row; text-align: left; gap: 12px; justify-content: center; }
.vt-sp-icon { font-size: 1.6rem; color: var(--md-on-band); }
.vt-sp-text {
  color: var(--md-on-band); max-width: 20ch;
  font-family: var(--apple-font); font-size: .86rem; font-weight: 400; letter-spacing: 0;
  text-transform: none; line-height: 1.4;
}

/* 阅读卡 / 联系卡：圆角描边卡 */
.vt-read-media { border-radius: var(--radius); }
.vt-contact-card { border-radius: var(--radius); border-color: var(--line); }
.vt-contact-card:hover { border-color: var(--rose-deep); }

/* 列表页：筛选钮 / 分页圆角 */
.vt-coll-select, .vt-pager-link { border-radius: var(--apple-radius); }
.vt-filter-link.is-on { color: var(--rose-deep); }

/* PDP：标题 Merriweather 700，价格 Lato 700，眉题不大写 */
.vt-pdp-title { font-family: var(--serif); font-weight: 700; }
.vt-pdp-price { font-family: var(--apple-font); font-weight: 700; }
.vt-pdp-eyebrow { font-family: var(--apple-font); font-size: .84rem; letter-spacing: 0; text-transform: none; }
.vt-pdp-eyebrow::before { background: var(--rose-deep); }

/* ========== 段4：字号对齐对标站（2026-08-28 实测 flowerchimp.my：正文 Lato 14px · 菜单 14px ·
   标题 Merriweather 28px · 卡片标题 13.5px / 价格 14px · 按钮 13–14px）==========
   独立一段放末尾，理由同 peony：靠源序后置生效，对齐用的字号集中一处、可整段撤回。
   电商效率风的字比基底 16px 小一档，body 级收小让功能页继承文字一起变紧凑。 */
body { font-size: .875rem; letter-spacing: 0; }
.vt-notice-inner { font-size: .8rem; }
.vt-navlink { font-size: .875rem; }
.vt-dropitem, .vt-mega-link { font-size: .85rem; }
.vt-mega-coltitle { font-size: .875rem; }
.vt-sec-title { font-size: 1.75rem; }
.vt-occ-count, .vt-pitch-body, .vt-story-text, .vt-read-excerpt, .vt-cc-desc, .vt-contact-intro, .vt-cathero-desc,
.vt-storenote-body { font-size: .9rem; }
.vt-hero-slide .vt-hero-sub { font-size: .95rem; }
.vt-hero-btn, .vt-retail-cta, .vt-filter-apply, .vt-coll-empty-btn, .vt-coll-filterbtn,
.vt-pitch-link, .vt-read-more, .vt-tab { font-size: .875rem; }
.vt-card-title { font-size: .85rem; }
.vt-card-price { font-size: .875rem; }
.vt-card-from, .vt-card-ask { font-size: .75rem; }
.vt-occ-label { font-size: .875rem; }
.vt-sp-text { font-size: .85rem; }
.vt-footer-col h4 { font-size: .9rem; }
.vt-footer-col a, .vt-footer-tag { font-size: .85rem; }
.vt-pdp-lede, .vt-pdp-lede p { font-size: .9rem; }
.vt-pdp-addons .fl-addon-name { font-size: .875rem; }