/* ============================================================
   PETAL 皮肤 — 浅粉 · 轻盈现代（vitrine 的二级皮肤，双模式）
   对标：50gram.com.my（吉隆坡/PJ 同日达花店，2026-08-28 用 playwright 实测首页 + 商品页）
   继承链：petal → vitrine → florisse → default（layout / index / product / partials 全部沿链用 vitrine 的）
     · 本文件由 vitrine/layout.ejs 按 themeMeta.name 动态挂在 vitrine-theme.css 之后（源序覆盖），只写差异；
     · 改本文件须 bump theme.json 的 cssVersion。

   ── 对标站实测（1440 宽）──────────────────────────────────────
     配色：页底纯白 · 正文纯黑 #000 · **浅粉色块** #FFF4F4 / #FFF6F6（通知条、四格 USP 卡）· 更深一档粉 #FFE0DE ·
           星级金 #FDBC32 · 加购钮绿 #3FA24F（白字，5px 圆角）· 页脚白底、灰 #54595F 小字。
     字体：正文 **Manrope** 16px（菜单 16px 400 / 卡片标题 13px 600 / 价格 13px 600）；
           标题衬线 **TeX Gyre Pagella**（Palatino 系，非 Google 字体）+ 已加载的 **Playfair Display**
           （加购钮 18px）——本皮肤统一用 Playfair Display 承担衬线（Pagella 没有网络字体）。
     形态：白色**胶囊**钮（hero 的 Deliver Today，30px 圆角）· 场合 chips 5px 圆角描边 · 卡片无描边、
           图**正方** · 首页每个系列 = 「衬线标题 + Browse xxx 链接 + 4 列轮播」重复 6 次 · 生活照通栏 ·
           As seen in 媒体 logo · SEO 长文 · 白底四列页脚 + 支付 logo 行。
     商品页：主图 **585×585 正方**（Swiper 滑轨 + 左右箭头 + hover 放大）· 缩略图 **68px 一行 8 张、5px 间距** ·
           标题 Manrope 26px 700 字距 1px · 「Starting From: 269」Manrope 16px · 规格是**图片色板**（80×88 选中黑框）·
           绿色 Add to cart · 右侧「同日达倒计时」卡。
     本皮肤按这些尺寸落：主图正方、缩略图 68/5px、卡片图正方、卡片标题 13px；
     滑轨 / 箭头由 vitrine 的 product.ejs 提供（2026-08-28 同批改）。
     做不到的（要新 DOM / 数据）：倒计时卡、图片色板规格、hover 放大、评价星级、支付 logo 图 —— 不在皮肤范围。

   ── 反转判定（README §7 末条）─────────────────────────────────
     cartToast 底 = --rose-ink：亮色纯黑 #000、暗色近白 → 明度反转 → --on-accent / --btn-close-filter 四块成对翻。
     主钮底 --rose-deep 亮暗都是绿：亮配白字（对标站 3.6:1，照搬），暗跟 --on-accent 翻成近黑。
   自引入色：--pt-pink（浅粉面）随明暗变，四块各定义；--pt-gold（星级金）mode-invariant，只放 :root。
   ============================================================ */

/* ========== 段1：token 覆盖（四个选择器块缺一不可，见 README §5） ========== */
:root {
  --cream: #FFFFFF;      /* 页底：纯白 */
  --card: #FFFFFF;       /* 卡底：白（卡无描边，靠留白与圆角图区分） */
  --rose: #FDBC32;       /* 次强调：星级金（对标站唯一高饱和色，只做小标记） */
  --rose-deep: #3FA24F;  /* 主按钮：加购绿 */
  --rose-ink: #000000;   /* 价格/标题/字标/toast 底：纯黑（对标站正文就是 #000） */
  --sage: #3FA24F;
  --sage-deep: #2E7F3C;  /* 成功态：深一档的绿（白底 5.0 ✓） */
  --ink: #000000;
  --muted: #54595F;      /* 次要字：对标站页脚灰。对比度（白底）7.0 ✓ */
  --blush: #FFF4F4;      /* 软背景块：浅粉（通知条 / USP 卡 / 承诺带） */
  --line: #EDE6E6;       /* 描边：带一点粉的浅灰 */

  --shadow: 0 16px 32px -22px rgba(0, 0, 0, .22);
  --apple-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  --shadow-ink: #000000;
  --avatar-glow: rgba(253, 188, 50, .35);

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

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

  /* 字体：Manrope 正文 + Playfair Display 衬线标题；中文 Noto Sans SC / Noto Serif SC 分别跟随 */
  --serif: "Playfair Display", "Noto Serif SC", Palatino, "Palatino Linotype", Georgia, "Songti SC", serif;
  --apple-font: Manrope, "Noto Sans SC", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;

  /* radius：钮 5px（Add to cart）、卡片/图 8px、胶囊 30px 只给 hero 钮（段3） */
  --radius: 8px;
  --apple-radius: 5px;
  --apple-radius-lg: 8px;
  --apple-radius-pill: 980px;
  --radius-field: 5px;
  --radius-sm: 5px;
  --radius-panel: 12px;

  --vt-hairline: #F1ECEC;
  --vt-accent-hover: #34903F;   /* 绿钮 hover：压深一档 */
  --vt-hover-surface: #FFF0F0;  /* 软底 hover：比 --blush 再粉一档（ΔL* 对白底约 5） */
  --vt-on-gold: #000000;        /* 金底上的字：黑（金 #FDBC32 配黑 11.9 ✓）—— mode-invariant */
  --vt-on-photo: #FFFFFF;
  --vt-photo-ink: #111111;

  --pt-pink: #FFF4F4;           /* 浅粉面（随明暗变，四块各定义） */
  --pt-pink-deep: #FFE0DE;      /* 深一档粉：hover / 选中面 */
  --pt-gold: #FDBC32;           /* 星级金（mode-invariant，只此一处） */

  --btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #121212; --card: #1B1B1B; --rose: #FDBC32; --rose-deep: #4FB861;
    --rose-ink: #F2F0EE; --sage: #4FB861; --sage-deep: #9AD6A5; --ink: #ECEAE8;
    --muted: #A5A2A0; --blush: #221C1C; --line: #2E2A2A;
    --shadow: 0 16px 32px -22px rgba(0, 0, 0, .7);
    --on-accent: #0F1510;
    --danger: #EFA79F;
    --danger-soft: #3A211E;
    --apple-danger: var(--danger);
    --vt-hairline: #292525;
    --vt-accent-hover: #7CCB8A;
    --vt-hover-surface: #2A2323;
    --pt-pink: #221C1C;
    --pt-pink-deep: #2E2424;
    --btn-close-filter: none;
  }
}
:root[data-theme="dark"] {
  --cream: #121212; --card: #1B1B1B; --rose: #FDBC32; --rose-deep: #4FB861;
  --rose-ink: #F2F0EE; --sage: #4FB861; --sage-deep: #9AD6A5; --ink: #ECEAE8;
  --muted: #A5A2A0; --blush: #221C1C; --line: #2E2A2A;
  --shadow: 0 16px 32px -22px rgba(0, 0, 0, .7);
  --on-accent: #0F1510;
  --danger: #EFA79F;
  --danger-soft: #3A211E;
  --apple-danger: var(--danger);
  --vt-hairline: #292525;
  --vt-accent-hover: #7CCB8A;
  --vt-hover-surface: #2A2323;
  --pt-pink: #221C1C;
  --pt-pink-deep: #2E2424;
  --btn-close-filter: none;
}
:root[data-theme="light"] {
  --cream: #FFFFFF; --card: #FFFFFF; --rose: #FDBC32; --rose-deep: #3FA24F;
  --rose-ink: #000000; --sage: #3FA24F; --sage-deep: #2E7F3C; --ink: #000000;
  --muted: #54595F; --blush: #FFF4F4; --line: #EDE6E6;
  --shadow: 0 16px 32px -22px rgba(0, 0, 0, .22);
  --on-accent: #FFFFFF;
  --danger: #B3261E;
  --danger-soft: #FBEEEC;
  --apple-danger: #B3261E;
  --vt-hairline: #F1ECEC;
  --vt-accent-hover: #34903F;
  --vt-hover-surface: #FFF0F0;
  --pt-pink: #FFF4F4;
  --pt-pink-deep: #FFE0DE;
  --btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

/* ========== 段2：nav / footer ========== */

/* 通知条：浅粉底黑字（对标站「Free Delivery KL/PJ」那条），Manrope 13px */
.vt-notice { background: var(--pt-pink); color: var(--ink); }
.vt-notice-inner { font-family: var(--apple-font); font-size: .82rem; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* 顶栏：logo 靠左、菜单紧随其后（对标站的 header 是「logo + 菜单」一行左对齐，右侧电话/搜索）。
   vitrine 是两层（品牌行 + 菜单行）；本皮肤把品牌挪到第 1 列，菜单行保持但左对齐、字号 16px。 */
.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: var(--vt-hairline); }
.vt-navbar-inner { justify-content: flex-start; }
.vt-brand .vt-mark { font-family: var(--apple-font); font-size: 1.5rem; font-weight: 800; 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: 36px; }
.vt-navlinks { gap: 28px; }
.vt-navlink { font-family: var(--apple-font); font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: 1; }
.vt-navlink::after { background: var(--ink); }
.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: .9rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.vt-dropdown, .vt-mega { border-radius: var(--radius); box-shadow: var(--shadow); }

/* 页脚：白底、上缘发丝线、Manrope 13px、列标题 700 不大写（对标站四列 + 版权行） */
.vt-footer { background: var(--cream); border-top: 1px solid var(--line); margin-top: 80px; }
.vt-footer-brandname { font-family: var(--apple-font); font-weight: 800; letter-spacing: .02em; text-transform: none; }
.vt-footer-tag { font-size: .82rem; color: var(--muted); }
.vt-footer-col h4 { font-family: var(--apple-font); font-size: .85rem; font-weight: 700; letter-spacing: 0; text-transform: none; margin-bottom: 8px; }
.vt-footer-col a { font-size: .82rem; }
.vt-footer-col a:hover { border-bottom-color: var(--ink); }
.vt-footer-meta, .vt-footer-bottom { border-top-color: var(--line); }
.vt-footer-bottom { font-size: .74rem; letter-spacing: 0; }

/* ========== 段3：首页 / 列表 / PDP ========== */

/* 区块头：衬线标题居中（对标站每个系列的 Pagella 标题），眉题不要 */
.vt-sec-eyebrow, .vt-storenote-eyebrow { display: none; }
.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: 400; letter-spacing: 0;
}
.vt-sec-title { font-size: clamp(1.4rem, 2.2vw, 1.65rem); }
.vt-occ-count { font-family: var(--apple-font); font-size: .85rem; letter-spacing: 0; }

/* hero：衬线白标题 + 白色**胶囊**钮黑字（对标站 Deliver Today 30px 圆角） */
.vt-hero-slide .vt-hero-title { font-family: var(--serif); font-weight: 400; letter-spacing: 0; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.vt-hero-slide .vt-hero-sub { font-family: var(--apple-font); font-size: .95rem; letter-spacing: 0; }
.vt-hero-btn { border-radius: 30px; font-family: var(--apple-font); font-size: .9rem; font-weight: 500; letter-spacing: 0; text-transform: none; min-height: 42px; padding: 0 24px; }
.vt-hero-slide .vt-hero-btn-solid { background: var(--vt-on-photo); color: var(--vt-photo-ink); border-color: var(--vt-on-photo); }
.vt-hero-slide .vt-hero-btn-solid:hover { background: var(--vt-photo-ink); color: var(--vt-on-photo); border-color: var(--vt-photo-ink); }

/* 其它按钮：Manrope 不大写、5px 圆角（Add to cart 那颗在 PDP，走 token 自动变绿） */
.vt-retail-cta, .vt-filter-apply, .vt-coll-empty-btn, .vt-coll-filterbtn, .vt-pitch-link, .vt-read-more, .vt-tab {
  font-family: var(--apple-font); font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.vt-retail-cta, .vt-filter-apply, .vt-coll-empty-btn { border-radius: var(--apple-radius); }
.vt-retail-cta { background: var(--rose-deep); color: var(--on-accent, #fff); border-color: var(--rose-deep); }
.vt-retail-cta:hover { background: var(--vt-accent-hover); color: var(--on-accent, #fff); border-color: var(--vt-accent-hover); opacity: 1; }
/* 系列 tab 做成对标站的「场合 chips」：描边 + 5px 圆角 + 选中变浅粉底 */
.vt-tablist { gap: 10px; border-bottom: 0; }
.vt-tab { margin-bottom: 0; padding: 7px 16px; border: 1px solid var(--line); border-radius: var(--apple-radius); color: var(--ink); font-weight: 500; }
.vt-tab:hover { background: var(--pt-pink); border-color: var(--pt-pink-deep); }
.vt-tab.is-on { background: var(--pt-pink-deep); border-color: var(--pt-pink-deep); color: var(--ink); }

/* USP：对标站是四张**浅粉圆角卡**（图标 + 粗标题 + 一行小字），不是 vitrine 的通栏黑条。
   底归页底，每格自己一块浅粉卡（20px 圆角）。前景走 --ink（浅粉/暗色深粉两模式都可读）。 */
.vt-sp { background: transparent; color: var(--ink); padding: 8px 0 0; margin-top: clamp(28px, 3vw, 40px); }
.vt-sp-row { gap: 16px; }
.vt-sp-item { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 22px 20px; background: var(--pt-pink); border-radius: 20px; }
.vt-sp-icon { font-size: 1.5rem; color: var(--rose-deep); }
.vt-sp-text { color: var(--ink); max-width: none; font-family: var(--apple-font); font-size: .95rem; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.35; }

/* 分类格：圆角 8px、无描边、标签压图底（对标站 Occasions 的图卡） */
.vt-occ-media { border-color: transparent; border-radius: var(--radius); }
.vt-occ-card:hover .vt-occ-media { border-color: transparent; }
.vt-occ-label { font-family: var(--apple-font); font-size: .82rem; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* 产品卡：**正方图**、无描边、8px 圆角；标题 Manrope 13px 600、价格 13px 600（对标站实测） */
.vt-card-media { border-color: transparent; border-radius: var(--radius); background: var(--pt-pink); }
.vt-card:hover .vt-card-media { border-color: transparent; }
.vt-card-photo, .vt-card-ph { aspect-ratio: 1 / 1; }
.vt-card-body { padding: 10px 2px 0; }
.vt-card-title { font-family: var(--apple-font); font-size: .82rem; font-weight: 600; line-height: 1.5; min-height: 3em; }
.vt-card-price { font-family: var(--apple-font); font-size: .82rem; font-weight: 600; color: var(--ink); }
.vt-card-from, .vt-card-ask { font-family: var(--apple-font); font-size: .72rem; letter-spacing: 0; text-transform: none; }
.vt-card-badge { font-family: var(--apple-font); font-size: .64rem; font-weight: 700; letter-spacing: .02em; border-radius: var(--radius-sm); }
.vt-card-badge-best { background: var(--pt-gold); color: var(--vt-on-gold); }
.vt-card-badge-new { background: var(--pt-pink-deep); color: var(--ink); border-color: var(--pt-pink-deep); }

/* 系列卡 / 阅读卡 / 联系卡：圆角、浅粉底 */
.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.05rem; }
.vt-cc-count, .vt-cc-desc { font-family: var(--apple-font); letter-spacing: 0; text-transform: none; }
.vt-read-media { border-radius: var(--radius); }
.vt-contact-card { border-radius: 20px; border-color: transparent; background: var(--pt-pink); }
.vt-contact-card:hover { border-color: transparent; background: var(--pt-pink-deep); }

/* ── PDP：按对标站尺寸 ──
   主图 585×585 **正方**（vitrine 是 4:5）；缩略图 68px、**5px 间距**、一行 8 张；
   标题 Manrope 26px 700 字距 1px；价格 Manrope 16px；加购钮绿底白字 5px 圆角、Playfair 18px。 */
.vt-pdp { gap: 48px; }
.vt-pdp-hero { border: 0; border-radius: var(--radius); }
.vt-pdp-hero-img, .vt-pdp-hero-ph { aspect-ratio: 1 / 1; }
.vt-pdp-thumbs { gap: 5px; margin-top: 8px; }
.vt-pdp-thumb { width: 68px; height: 68px; border-radius: 4px; border-color: transparent; opacity: .75; }
.vt-pdp-thumb:hover { opacity: 1; border-color: var(--line); }
.vt-pdp-thumb.active { opacity: 1; border-color: var(--ink); }
.vt-pdp-arrow { border-color: transparent; box-shadow: var(--apple-shadow); }
.vt-pdp-title { font-family: var(--apple-font); font-size: 1.625rem; font-weight: 700; letter-spacing: .04em; }
.vt-pdp-eyebrow { font-family: var(--apple-font); font-size: .82rem; letter-spacing: 0; text-transform: none; }
.vt-pdp-eyebrow::before { background: var(--rose-deep); }
.vt-pdp-price { font-family: var(--apple-font); font-size: 1.1rem; font-weight: 500; }
.vt-pdp-lede, .vt-pdp-lede p { font-family: var(--apple-font); font-size: .9rem; }
.vt-pdp-lbl { font-family: var(--apple-font); letter-spacing: 0; text-transform: none; font-size: .9rem; }
.vt-pdp-opt { border-radius: var(--apple-radius); font-family: var(--apple-font); letter-spacing: 0; text-transform: none; }
.vt-pdp-opt.selected { background: var(--pt-pink-deep); border-color: var(--ink); color: var(--ink); }
.vt-pdp-addons .fl-addon { border-radius: var(--radius); }
.vt-pdp-addons .fl-addon-name { font-family: var(--apple-font); font-size: .9rem; font-weight: 600; }
.vt-pdp-addons .fl-addon-price b { font-family: var(--apple-font); font-weight: 700; }
/* 加购 / 立即购买：绿底白字 + Playfair 18px（对标站 Add to cart） */
.vt-pdp-buy .btn-add-cart, .btn-add-cart.fl-btn-primary, .fl-btn-primary {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 400; letter-spacing: 0; text-transform: none; border-radius: var(--apple-radius);
}

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

/* ========== 段4：字号对齐对标站（正文 16px Manrope；菜单 16px；卡片 13px；标题衬线 ~26px） ========== */
body { font-size: 1rem; letter-spacing: 0; }