/* ============================================================
   KRAFT 主题 — 森系自然 · 田园植物（牛皮纸 + 苔绿赤陶，双模式）
   视觉权威：docs/assets/theme-library-mockup.html 面板 .s2
   结构：三段式（契约见 themes/_shared/README.md）
     段1 token 覆盖 —— 换肤核心，功能页（商品/购物车/结账…）继承
         florisse EJS + 基底 CSS，仅靠本段变量整体变森系风
     段2 nav / footer —— kr- 前缀（防污染，仿 florisse 的 fl- 惯例）
     段3 首页 —— 邮票徽章 hero（纸卡 + 虚线徽章 + 手写便签）+ 三栏纸卡片
   关键手法：牛皮纸底（--cream:#EDE3D0）带 radial 点纹理 + 苔绿主按钮
     （--rose-deep:#5B6B45）+ 赤陶次强调（--rose:#B0623C）+ 纸卡（--card:#F7F0E1）
     + 温暖衬线为主 + 手写体点缀 + 邮票虚线徽章 + 按钮硬底阴影 + 圆角 10px（森系柔和不归零）。
   双模式：四个 token 块「三块不同值」（②与③a 同=暗森系值、①与③b 同=亮牛皮纸值）。
     暗版为真设计（深咖/深橄榄底），非继承 florisse 暗色粉。
   自引入色统一走 --kr-* 局部变量，四个 token 块各定义一次（暗色给暗值），
     组件只 var(--kr-*) 引用——切忌只写亮色 + 一条 [data-theme=dark] 手工兜底（易漏 @media 分支）。
   ============================================================ */

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

/* —— ① 亮色默认（森系主调：牛皮纸底、苔绿主按钮、赤陶点缀、深橄榄字） —— */
:root {
  --cream: #EDE3D0;      /* 页面底：牛皮纸暖调（配 body 点纹理，见段2下方 body 覆写） */
  --card: #F7F0E1;       /* 卡片/浮层底：更浅的纸卡 */
  --rose: #B0623C;       /* 次强调：赤陶（描边/hover/徽章边） */
  --rose-deep: #5B6B45;  /* 主按钮/链接：苔绿 */
  --rose-ink: #4C5A38;   /* 价格/品牌强调：深苔绿（抄 .s2 .pr / .logo 色 #4C5A38） */
  --sage: #8A9A6B;       /* 绿点缀：中苔绿 */
  --sage-deep: #4C5A38;  /* 深绿（成功态）：深苔绿 */
  --ink: #40492F;        /* 正文：深橄榄（抄 .s2 h2 #40492F / body #3E3A2F） */
  --muted: #6B6552;      /* 次要文字：暖褐灰（抄 .s2 p #6B6552） */
  --blush: #F7F0E1;      /* 软背景块：纸卡色（森系无腮红粉） */
  --line: #D8C9AC;       /* 描边/分隔线：纸色描边（抄 .s2 border #D8C9AC） */
  --shadow: 0 14px 30px -22px rgba(76, 90, 56, .45); /* 卡片悬浮影：苔绿着色的柔和暖影（抄 .s2 hero 阴影） */
  --shadow-ink: #4C5A38; /* 阴影着色基色（配 color-mix；明暗恒定，深苔绿——暗色下苔调阴影仍协调，与 --rose-ink 解耦口径同 florisse） */
  --scrim: #2A2519;      /* 全屏遮罩基色（搜索层/FAB/分类面板背板）：深咖，明暗恒定的暗色 dimmer */
  --on-accent: #F7F0E1;  /* 苔绿主按钮（深色 #5B6B45）上的文字：浅纸色 */
  --kr-on-clay: #F7F0E1; /* 赤陶(--rose)底上的纸字（.kr-cart-badge / .kr-btn-clay:hover）——注意 --rose 明暗不同(#B0623C/#C9805B)，但浅纸字 #F7F0E1 骑在两种赤陶上都够可读，故前景取单值 mode-invariant，只放 :root、不进四块 */
  --danger: #B83227;     /* 表单错误字：暖砖红（浅纸底可读） */
  --danger-soft: #F7ECE6;/* 表单错误软底：暖米白（浅底可留） */

  /* —— 自引入色 --kr-*（森系专属硬编码色，四个 token 块各定义一次，暗色给暗值）—— */
  --kr-paper-dot: rgba(91, 107, 69, .06); /* 牛皮纸 radial 点纹理色（抄 .s2::before，苔绿极淡点） */
  --kr-script: #B0623C;  /* 手写体便签色：赤陶（.s2 .card .no） */
  --kr-stamp: #B0623C;   /* 邮票徽章虚线边框色：赤陶 */
  --kr-btn-shadow: #40492F; /* 按钮硬底阴影色：深橄榄（.s2 .btn box-shadow 0 3px 0 #40492F） */

  /* 温暖衬线字体栈（.s2 用 Georgia/Palatino 系，中文落 Noto Serif SC/宋体） */
  --serif: Georgia, "Palatino Linotype", "Book Antiqua", "Noto Serif SC", "Songti SC", serif;
  --apple-font: Georgia, "Palatino Linotype", "Book Antiqua", "Noto Serif SC", "Songti SC", serif;

  /* 圆角：森系柔和，不归零。--radius 10px 主基调；pill 保留 980px（徽章/胶囊仍圆） */
  --radius: 10px;
  --apple-radius: 10px;
  --apple-radius-lg: 14px;
  --apple-radius-pill: 980px;
  --radius-field: 10px;
  --radius-sm: 8px;
  --radius-panel: 14px;   /* PDP 大面板（基底 .fl-pdp）：森系柔和 14px；明暗恒定，只需 :root 一处 */
  --apple-shadow: 0 2px 12px rgba(76, 90, 56, .10); /* 组件浅影：苔绿极淡 */

  /* —— --apple-* 兼容别名组（照 florisse 模式重定向到语义 token；随 :root 语义 token 自动跟明暗切换） ——
     显式重申理由同 mono：① --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: #B83227; /* iOS 红 → 收敛为森系暖砖红（与 --danger 同调） */
  /* cartToast 底色 = --rose-ink（深苔绿），深底上白钮滤镜保持基底默认（invert 白钮）即可 */
  --btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

/* —— ② 系统暗色（深咖/深橄榄底 · 暖米字 · 苔绿赤陶提亮） —— */
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #2A2519; --card: #35301F; --rose: #C9805B; --rose-deep: #8AA872;
    --rose-ink: #A8C088; --sage: #8AA872; --sage-deep: #A8C088; --ink: #E8DCC8;
    --muted: #B0A488; --blush: #3A3524; --line: #4A4230;
    --shadow: 0 14px 30px -22px rgba(0, 0, 0, .6); /* 暗底改纯黑向阴影 */
    --on-accent: #241F14;   /* 暗色苔绿按钮（提亮 #8AA872 偏亮）→ 文字用深咖 */
    --danger: #E8907A;      /* 暗底错误字：提亮的暖红 */
    --danger-soft: #3A241C; /* 暗底错误软底：基底浅色在暗底刺眼，必改深暖色 */
    --apple-danger: var(--danger); /* 基底 .apple-popup-danger/.fl-stock-out 用 --apple-danger，暗色须同步跟 --danger 否则两种红 */
    --kr-paper-dot: rgba(138, 168, 114, .05); /* 暗底点纹理：苔绿更淡的点 */
    --kr-script: #C9805B;   /* 暗色手写体：赤陶提亮 */
    --kr-stamp: #C9805B;    /* 暗色邮票虚线：赤陶提亮 */
    --kr-btn-shadow: #14120B; /* 暗色按钮硬阴影：近黑橄榄 */
    /* btn-close 回填（真 bug）：暗色 toast 底 = --rose-ink 翻浅苔绿(#A8C088)，白关闭钮(invert)对比 2:1 不可见
       → 改黑钮(none)。作者暗色已把 --on-accent 翻深字(#241F14)却漏了成对的 btn-close，此处补齐。 */
    --btn-close-filter: none;
  }
}
/* —— ③a 用户手动锁暗（specificity 高于裸 :root，漏写会被基底 florisse 暗色粉调反杀；值=②同暗值） —— */
:root[data-theme="dark"] {
  --cream: #2A2519; --card: #35301F; --rose: #C9805B; --rose-deep: #8AA872;
  --rose-ink: #A8C088; --sage: #8AA872; --sage-deep: #A8C088; --ink: #E8DCC8;
  --muted: #B0A488; --blush: #3A3524; --line: #4A4230;
  --shadow: 0 14px 30px -22px rgba(0, 0, 0, .6);
  --on-accent: #241F14;
  --danger: #E8907A;
  --danger-soft: #3A241C;
  --apple-danger: var(--danger);
  --kr-paper-dot: rgba(138, 168, 114, .05);
  --kr-script: #C9805B;
  --kr-stamp: #C9805B;
  --kr-btn-shadow: #14120B;
  --btn-close-filter: none; /* 手动锁暗：同 @media dark，浅苔绿 toast 底须黑关闭钮 */
}
/* —— ③b 用户手动锁亮（须压过系统暗色偏好；值=①同亮值） —— */
:root[data-theme="light"] {
  --cream: #EDE3D0; --card: #F7F0E1; --rose: #B0623C; --rose-deep: #5B6B45;
  --rose-ink: #4C5A38; --sage: #8A9A6B; --sage-deep: #4C5A38; --ink: #40492F;
  --muted: #6B6552; --blush: #F7F0E1; --line: #D8C9AC;
  --shadow: 0 14px 30px -22px rgba(76, 90, 56, .45);
  --on-accent: #F7F0E1;
  --danger: #B83227;
  --danger-soft: #F7ECE6;
  --apple-danger: #B83227;
  --kr-paper-dot: rgba(91, 107, 69, .06);
  --kr-script: #B0623C;
  --kr-stamp: #B0623C;
  --kr-btn-shadow: #40492F;
  --btn-close-filter: invert(1) grayscale(100%) brightness(200%); /* 手动锁亮：同 :root，深苔绿 toast 底须白关闭钮 */
}

/* PDP 无图占位渐变：基底为粉紫装饰渐变（不走 token），kraft 换牛皮纸 + 苔绿赤陶花影 */
.fl-pdp-img {
  background:
    radial-gradient(340px 240px at 70% 36%, #B0623C 0%, transparent 55%),
    radial-gradient(240px 200px at 34% 66%, #5B6B45 0%, transparent 52%),
    var(--blush);
}

/* ========== 段2：全局底纹 + nav / footer（kr- 前缀，抄 mockup .s2 .nav/.logo/.foot） ========== */

/* 牛皮纸点纹理：站点级底纹（基底 body{background:var(--cream)}，本处叠加 radial 点，
   --kr-paper-dot 四块各定义 → 明暗自动切换，无需手工写暗色兜底行）。 */
body {
  background-color: var(--cream);
  background-image: radial-gradient(var(--kr-paper-dot) 1px, transparent 1px);
  background-size: 7px 7px;
}

/* 顶栏：牛皮纸底（无毛玻璃，森系用实底纸感）+ 底缘纸色细线。
   保留 id=appleNav 的 .scrolled 契约：滚动后仅加一道柔和暖影，不改底色。 */
.kr-nav {
  /* z-index 1030 同基底 fl-nav 理由：须盖过页面 sticky 摘要(1020)，低于搜索遮罩(2000) */
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s;
}
.kr-nav.scrolled {
  box-shadow: 0 4px 20px -14px rgba(76,90,56,.35); /* 兜底：不支持 color-mix 的旧 WebView 吃本行 */
  box-shadow: 0 4px 20px -14px color-mix(in srgb, var(--shadow-ink) 35%, transparent);
}
.kr-nav-inner {
  max-width: var(--content-max); margin: 0 auto; height: 64px;
  display: flex; align-items: center; gap: 26px; padding: 0 36px;
}
/* logo：温暖衬线粗体，苔绿主色；em（Moss&Clay）赤陶双色（抄 .s2 .logo/.logo em） */
.kr-brand {
  display: flex; align-items: baseline; gap: 8px;
  margin-right: auto; text-decoration: none; color: var(--rose-ink);
}
.kr-brand:hover { color: var(--rose-ink); text-decoration: none; }
.kr-brand .kr-mark {
  font-family: var(--serif); font-size: 21px; font-weight: 700;
  color: var(--rose-ink); letter-spacing: .01em; white-space: nowrap;
}
.kr-brand .kr-mark em { font-style: normal; color: var(--rose); } /* Moss&Clay 赤陶点缀 */
.kr-brand-logo { height: 30px; width: auto; }
/* 菜单：温暖衬线中字 + 便签 hover 下划线（赤陶底线，抄 .s2 .nav u s:hover） */
.kr-navlinks { display: flex; gap: 22px; }
.kr-navlink {
  font-family: var(--serif); font-size: 13.5px;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: border-color .2s, color .2s;
}
.kr-navlink:hover { color: var(--ink); border-color: var(--rose); text-decoration: none; }
/* 右侧图标钮：深橄榄，hover 赤陶 */
.kr-nav-actions { display: flex; align-items: center; gap: 16px; }
.kr-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;
}
.kr-icon-btn:hover { color: var(--rose); }
.kr-icon-btn svg, .kr-icon-btn .kr-icon { width: 20px; height: 20px; }
/* 购物车角标：赤陶底（森系高亮色块），pill 仍圆 */
.kr-cart-badge {
  position: absolute; top: -4px; right: -6px;
  background: var(--rose); color: var(--kr-on-clay);
  font-family: system-ui, sans-serif; font-size: 0.6rem; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: var(--apple-radius-pill); padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
}

/* footer：便签风小字（抄 .s2 .foot：暖褐灰 system-ui 小字，纸色上缘线） */
.kr-footer {
  border-top: 1px solid var(--line); background: var(--cream);
  margin-top: 56px; padding: 20px 0 26px;
}
.kr-footer-inner {
  max-width: var(--content-max); margin: 0 auto; padding: 0 36px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px 24px; flex-wrap: wrap;
  font-family: system-ui, "Segoe UI", "PingFang SC", sans-serif;
  font-size: 12px; letter-spacing: .04em; color: var(--muted);
}
.kr-footer-left, .kr-footer-right { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.kr-footer a { color: var(--muted); text-decoration: none; transition: color .2s; }
.kr-footer a:hover { color: var(--rose); text-decoration: none; }
.kr-footer .kr-footer-lang a.active { color: var(--ink); font-weight: 600; }
.kr-footer-sep { color: var(--line); }

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

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

/* 眉题（便签手写体小字，赤陶） */
.kr-kick {
  font-family: "Segoe Script", "Comic Sans MS", cursive;
  font-size: 14px; color: var(--kr-script); margin-bottom: 12px;
}

/* —— 邮票徽章 hero：纸卡容器（圆角 + 纸色边 + 硬底线 + 柔和暖影）+ 装饰苔绿圆 —— */
.kr-hero {
  position: relative; margin: 20px 36px 30px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 48px 44px 44px; overflow: hidden;
  box-shadow: 0 1px 0 var(--line), var(--shadow);
}
/* 右上角装饰苔绿光晕（纯 CSS，pointer-events:none） */
.kr-hero::after {
  content: ""; position: absolute; right: -60px; top: -40px;
  width: 340px; height: 340px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--rose-deep) 0%, transparent 72%);
  opacity: .22;
}
.kr-hero-tx { position: relative; z-index: 1; }
/* 邮票徽章：虚线边框 + 微旋转（transform:rotate(-2deg)）——reduced-motion 下取消旋转 */
.kr-stamp {
  display: inline-block; border: 1.5px dashed var(--kr-stamp); color: var(--rose);
  border-radius: var(--apple-radius-pill); padding: 5px 14px;
  font-family: system-ui, "PingFang SC", sans-serif; font-size: 11.5px; letter-spacing: .18em;
  transform: rotate(-2deg); margin-bottom: 16px;
}
.kr-hero-h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(26px, 3.6vw, 38px); line-height: 1.35;
  margin: 0 0 12px; color: var(--ink); text-wrap: balance;
}
.kr-hero-h1 em { font-style: italic; color: var(--rose); } /* 赤陶斜体强调 */
.kr-hero-lede {
  font-family: system-ui, "PingFang SC", sans-serif;
  color: var(--muted); font-size: 14px; line-height: 1.95;
  max-width: 46ch; margin: 0 0 24px;
}
/* 手写便签（hero 装饰小字，赤陶手写体） */
.kr-hero-note {
  font-family: "Segoe Script", "Comic Sans MS", cursive;
  color: var(--kr-script); font-size: 14px; margin: 0 0 20px;
}
.kr-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
/* 森系按钮：苔绿实心胶囊 + 按钮硬底阴影（0 3px 0 深橄榄），hover 加深 */
.kr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--rose-deep); color: var(--on-accent); border: none;
  border-radius: var(--apple-radius-pill); padding: 13px 30px;
  font-family: system-ui, "PingFang SC", sans-serif; font-size: 14px;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 3px 0 var(--kr-btn-shadow);
  transition: background .2s, transform .15s, box-shadow .15s;
}
.kr-btn:hover {
  background: var(--rose-ink); color: var(--on-accent); text-decoration: none;
  transform: translateY(-1px); box-shadow: 0 4px 0 var(--kr-btn-shadow);
}
.kr-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--kr-btn-shadow); }
/* 赤陶描边变体（次 CTA：细虚边风的赤陶轮廓钮） */
.kr-btn-clay {
  background: none; color: var(--rose); border: 1.5px solid var(--rose);
  box-shadow: none;
}
.kr-btn-clay:hover { background: var(--rose); color: var(--kr-on-clay); box-shadow: none; }
/* 分类 hero 返回链接 */
.kr-hero-back {
  display: inline-block; font-family: system-ui, sans-serif; font-size: 12px;
  color: var(--muted); text-decoration: none; margin-bottom: 14px;
}
.kr-hero-back:hover { color: var(--rose); }
/* 分类 hero 配图（有 homepage_image 时铺图） */
.kr-hero-im {
  margin-top: 20px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); max-height: 320px;
}
.kr-hero-im img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* —— 场合分类横条：纸卡胶囊一排（森系目录条） —— */
.kr-occ { max-width: var(--content-max); margin: 0 auto 8px; padding: 0 36px; }
.kr-occ-row { display: flex; flex-wrap: wrap; gap: 12px; }
.kr-occ-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 20px; text-align: center; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--apple-radius-pill);
  transition: background .2s, border-color .2s, transform .18s;
}
.kr-occ-card:hover {
  background: var(--rose-deep); color: var(--on-accent);
  border-color: var(--rose-deep); text-decoration: none; transform: translateY(-2px);
}
.kr-occ-card:hover .kr-occ-en { color: var(--on-accent); }
.kr-occ-name { font-family: var(--serif); font-size: 15px; font-weight: 700; }
.kr-occ-en { font-family: system-ui, sans-serif; font-size: 10.5px; letter-spacing: .12em; color: var(--muted); }

/* —— 区块标题行（画廊区头：手写眉题 + 衬线标题 + 右侧查看全部） —— */
.kr-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 40px 0 22px;
}
.kr-sec-head h2 { font-family: var(--serif); font-weight: 700; font-size: 26px; margin: 0; color: var(--ink); }
.kr-sec-head .kr-kick { margin-bottom: 6px; }
.kr-sec-link {
  font-family: system-ui, sans-serif; font-size: 12.5px;
  color: var(--rose-deep); text-decoration: none; white-space: nowrap;
}
.kr-sec-link:hover { color: var(--rose); text-decoration: none; }

/* —— 三栏纸卡片（抄 mockup .s2 .grid/.card：hover 微旋 + 上浮） —— */
.kr-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.kr-card {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink);
  transition: transform .18s, box-shadow .18s;
}
/* 卡片微旋 + 上浮（森系俏皮手作感）；reduced-motion 下取消 */
.kr-card:hover {
  transform: translateY(-3px) rotate(-.4deg); text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow);
}
.kr-card-ph {
  position: relative; aspect-ratio: 1 / 0.82; overflow: hidden;
  background: radial-gradient(130px 120px at 50% 52%, var(--rose) 0%, transparent 60%),
              radial-gradient(90px 80px at 26% 36%, var(--rose-deep) 0%, transparent 56%),
              var(--blush);
  display: grid; place-items: center;
}
.kr-card-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kr-card-ph svg { width: 54px; height: 54px; color: var(--rose-deep); opacity: .7; }
/* 售罄/精选徽标：邮票风虚线小标（微旋） */
.kr-card-badge {
  position: absolute; top: 12px; left: 12px;
  font-family: system-ui, sans-serif; font-size: 10px; letter-spacing: .1em;
  background: var(--ink); color: var(--card); padding: 4px 10px;
  border-radius: var(--radius-sm); transform: rotate(-2deg);
}
.kr-card-badge.leaf { background: var(--rose-deep); color: var(--on-accent); }
/* 名称：衬线粗体；手写便签描述；价格深苔绿 */
.kr-card h3 {
  font-family: var(--serif); font-size: 16.5px; font-weight: 700;
  margin: 16px 18px 4px; color: var(--ink);
}
.kr-card-note {
  font-family: "Segoe Script", "Comic Sans MS", cursive;
  font-size: 12.5px; color: var(--kr-script); margin: 0 18px 10px;
}
.kr-card-row { display: flex; align-items: center; justify-content: space-between; margin: 0 18px 16px; gap: 10px; }
.kr-card-pr {
  font-family: system-ui, sans-serif; font-size: 15px; font-weight: 700;
  color: var(--rose-ink); font-variant-numeric: tabular-nums;
}
/* 卡内加购：苔绿描边胶囊钮，hover 填充 */
.kr-card-add {
  background: none; border: 1.5px solid var(--rose-deep); color: var(--rose-deep);
  border-radius: var(--apple-radius-pill); padding: 5px 12px; cursor: pointer;
  font-family: system-ui, "PingFang SC", sans-serif; font-size: 12px;
  text-decoration: none; transition: background .2s, color .2s;
}
.kr-card-add:hover { background: var(--rose-deep); color: var(--on-accent); text-decoration: none; }
.kr-card-add.disabled { border-color: var(--line); color: var(--muted); opacity: .6; cursor: default; }

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

/* —— 分页：森系纸卡胶囊数字 —— */
.kr-pagination { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 36px 0 8px; }
.kr-page-link {
  font-family: system-ui, sans-serif; font-size: 13px;
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--apple-radius-pill);
  background: var(--card); color: var(--ink); text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.kr-page-link:hover { background: var(--blush); border-color: var(--rose); text-decoration: none; color: var(--ink); }
.kr-page-link.active { background: var(--rose-deep); color: var(--on-accent); border-color: var(--rose-deep); }

/* 空态 */
.kr-empty {
  text-align: center; padding: 60px 20px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--radius); margin: 24px 0; background: var(--card);
}
.kr-empty svg { width: 52px; height: 52px; color: var(--rose-deep); opacity: .5; }

/* —— 响应式：中屏 2 列、窄屏单列（375 单列断点：Task 7 跨主题项，kraft 起带上） —— */
@media (max-width: 991.98px) {
  .kr-grid { grid-template-columns: repeat(2, 1fr); }
  .kr-hero { margin: 16px 24px 26px; }
  .kr-occ { padding: 0 24px; }
  .kr-wrap { padding: 0 24px; }
}
@media (max-width: 575.98px) {
  /* 单列：覆盖到 375px 及以下窄屏（三栏网格塌成单列，避免小屏挤压） */
  .kr-grid { grid-template-columns: 1fr; }
  .kr-nav-inner { padding: 0 18px; gap: 14px; }
  .kr-brand .kr-mark { font-size: 18px; }
  .kr-hero { margin: 14px 16px 22px; padding: 34px 22px 30px; }
  .kr-occ { padding: 0 16px; }
  .kr-wrap { padding: 0 16px; }
  .kr-footer-inner { flex-direction: column; align-items: flex-start; padding: 0 16px; }
}

/* —— a11y：reduced-motion 下关掉旋转/位移（邮票微旋 + 卡片微旋上浮） —— */
@media (prefers-reduced-motion: reduce) {
  .kr-stamp { transform: none; }
  .kr-card-badge { transform: none; }
  .kr-card:hover { transform: none; }
  .kr-occ-card:hover { transform: none; }
  .kr-btn:hover, .kr-btn:active { transform: none; }
}

/* ========== 段4：PDP 内页（纸质有机不对称 · 抄 mockup .k-pdp；kr- 前缀，双模式走 token） ==========
   不对称两栏：左图微旋+虚线赤陶边+胶带贴纸 | 右牛皮纸卡信息。邮戳徽章 + 手写体副名 + 硬阴影苔绿钮 + 虚线贺卡框。
   钩子契约（见 _shared/README §8）视觉类叠在 .apple-* 和 .fl-* 钩子上。库存态挂 .apple-stock.in-stock/.out-stock
   （matchVariant 重写 className）。双模式全走 token（含 --kr-paper-dot/--kr-stamp/--kr-btn-shadow/--kr-script
   四块明暗值 + --kr-on-clay mode-invariant），暗色自动跟随。手写体用 cursive 字体栈（mode-invariant）。 */

.kr-pdp-wrap { padding-bottom: 8px; }

/* 面包屑 */
.kr-crumb { font-family: system-ui, "PingFang SC", sans-serif; font-size: 12px; color: var(--muted); padding: 18px 0 8px; }
.kr-crumb a { color: var(--muted); text-decoration: none; }
.kr-crumb a:hover { color: var(--rose); }
.kr-crumb-sep { color: var(--line); margin: 0 6px; }
.kr-crumb-cur { color: var(--ink); }

/* 不对称两栏 + 牛皮纸点纹理 */
.kr-pdp { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: start; padding: 6px 0 34px; position: relative; }
.kr-pdp::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(var(--kr-paper-dot) 1px, transparent 1px); background-size: 7px 7px; }

/* 左：图微旋 + 虚线赤陶边 + 手写胶带 */
.kr-pdp-gal { position: relative; z-index: 1; }
.kr-pdp-imgwrap { position: relative; transform: rotate(-1.4deg); }
.kr-pdp-hero { border: 2px dashed var(--rose); padding: 6px; background: var(--blush); border-radius: 4px; overflow: hidden; }
.kr-pdp-hero-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kr-pdp-hero-ph {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background:
    radial-gradient(200px 170px at 52% 46%, var(--rose) 0%, transparent 58%),
    radial-gradient(140px 120px at 34% 66%, var(--sage) 0%, transparent 55%),
    var(--blush);
}
.kr-pdp-hero-ph svg { width: 74px; height: 74px; color: var(--rose); opacity: .55; }
.kr-pdp-tape {
  position: absolute; right: -10px; top: -14px; z-index: 2;
  background: var(--rose-deep); color: var(--on-accent);
  font-family: "Segoe Script", "Comic Sans MS", cursive; font-size: 14px;
  padding: 6px 16px; transform: rotate(4deg); border-radius: 2px;
  box-shadow: 0 3px 8px -3px rgba(0, 0, 0, .35);
}
/* 缩略图：牛皮纸卡方块，active 苔绿粗边 */
.kr-pdp-thumbs { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.kr-pdp-thumb { width: 58px; height: 58px; object-fit: cover; background: var(--blush); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: border-color .2s; }
.kr-pdp-thumb:hover { border-color: var(--rose-deep); }
.kr-pdp-thumb.active { border-color: var(--rose-deep); border-width: 2px; }

/* 右：牛皮纸卡信息 */
.kr-pdp-info { position: relative; z-index: 1; background: var(--blush); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow); }
.kr-pdp-stamp { display: inline-block; border: 1.5px solid var(--kr-stamp); color: var(--kr-stamp); border-radius: 999px; padding: 4px 13px; font-family: system-ui, "PingFang SC", sans-serif; font-size: 11px; letter-spacing: .1em; transform: rotate(-2deg); margin-bottom: 14px; }
.kr-pdp-title { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 3vw, 28px); color: var(--ink); margin: 0 0 4px; line-height: 1.25; }
.kr-pdp-no { font-family: "Segoe Script", "Comic Sans MS", cursive; color: var(--kr-script); font-size: 15px; margin-bottom: 14px; }
.kr-pdp-price { font-family: system-ui, sans-serif; font-weight: 700; font-size: 24px; color: var(--rose-ink); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.kr-pdp-ptag { display: inline-block; font-family: system-ui, sans-serif; font-size: 11px; font-weight: 700; background: var(--rose-deep); color: var(--on-accent); border-radius: 999px; padding: 2px 10px; margin-bottom: 6px; }
.kr-pdp-lede { font-family: system-ui, "PingFang SC", sans-serif; font-size: 12.5px; line-height: 1.9; color: var(--muted); margin: 12px 0 16px; }
.kr-pdp-lede img { max-width: 100%; height: auto; }

/* 通用标签 */
.kr-pdp-lbl { font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 18px 0 9px; }
.kr-pdp-lbl-sub { text-transform: none; letter-spacing: 0; color: var(--muted); }

/* 规格：牛皮纸卡片钮，选中 .selected 苔绿，缺货 .opt-oos 灰划 */
.kr-pdp-sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.kr-pdp-size { font-family: system-ui, sans-serif; font-size: 12.5px; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.kr-pdp-size:hover { border-color: var(--rose-deep); }
.kr-pdp-size.selected { background: var(--rose-deep); color: var(--on-accent); border-color: var(--rose-deep); }
.kr-pdp-size.opt-oos { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

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

/* 贺卡：虚线赤陶框 */
.kr-pdp-field { margin-top: 4px; }
.kr-pdp-note { width: 100%; font-family: system-ui, "PingFang SC", sans-serif; font-size: 13px; color: var(--ink); background: var(--cream); border: 1px dashed var(--rose); border-radius: 8px; padding: 10px 12px; resize: vertical; }
.kr-pdp-note::placeholder { color: var(--muted); }
.kr-pdp-note:focus { outline: none; border-color: var(--rose-deep); }
.kr-pdp-counter { font-family: system-ui, sans-serif; font-size: 10.5px; color: var(--muted); text-align: right; margin-top: 5px; }

/* PWP 加购：纸卡列，选中 .on 苔绿边 + 微纸底 */
.kr-pdp-addons { display: flex; flex-direction: column; gap: 10px; }
.kr-pdp-addons .fl-addon { display: flex; align-items: center; gap: 12px; margin: 0; background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: border-color .2s, background .2s; }
.kr-pdp-addons .fl-addon:hover { border-color: var(--rose-deep); }
.kr-pdp-addons .fl-addon.on { border-color: var(--rose-deep); background: var(--blush); }
.kr-pdp-addons .fl-addon-ic { width: 38px; height: 38px; flex: none; overflow: hidden; display: grid; place-items: center; background: var(--blush); border: 1px solid var(--line); border-radius: 6px; }
.kr-pdp-addons .fl-addon-ic img { width: 100%; height: 100%; object-fit: cover; }
.kr-pdp-addons .fl-addon-ic svg { width: 20px; height: 20px; color: var(--rose); }
.kr-pdp-addons .fl-addon-body { flex: 1; min-width: 0; }
.kr-pdp-addons .fl-addon-name { font-family: var(--serif); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.kr-pdp-addons .fl-addon-variant { font-family: system-ui, sans-serif; font-weight: 400; font-size: 11px; color: var(--muted); }
.kr-pdp-addons .fl-addon-save { font-family: system-ui, sans-serif; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.kr-pdp-addons .fl-addon-price { font-family: system-ui, sans-serif; font-weight: 700; font-size: 13px; color: var(--rose-ink); text-align: right; }
.kr-pdp-addons .fl-addon-price small { display: block; font-size: 10px; font-weight: 400; color: var(--muted); text-decoration: line-through; }

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

/* 数量 */
.kr-pdp-qty-wrap { margin-top: 18px; }
.kr-pdp-qty { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--cream); }
.kr-pdp-qty button { border: none; background: none; color: var(--ink); font-family: system-ui, sans-serif; font-size: 16px; width: 40px; height: 40px; cursor: pointer; transition: background .2s; }
.kr-pdp-qty button:hover { background: var(--blush); }
.kr-pdp-qty input { border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); width: 52px; text-align: center; background: none; color: var(--ink); font-family: system-ui, sans-serif; font-size: 14px; -moz-appearance: textfield; }
.kr-pdp-qty input::-webkit-outer-spin-button, .kr-pdp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* CTA：苔绿硬阴影 pill 钮（0 3px 0 深橄榄）+ 赤陶描边变体 */
.kr-pdp-cta { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.kr-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: 999px; padding: 13px 28px; font-family: system-ui, "PingFang SC", sans-serif; font-size: 14px; cursor: pointer; box-shadow: 0 3px 0 var(--kr-btn-shadow); transition: transform .12s, box-shadow .12s, background .2s; }
.kr-pdp-buy:hover:not(:disabled) { background: var(--rose-ink); transform: translateY(-1px); box-shadow: 0 4px 0 var(--kr-btn-shadow); color: var(--on-accent); }
.kr-pdp-buy:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--kr-btn-shadow); }
.kr-pdp-buy:disabled { background: var(--line); color: var(--muted); box-shadow: 0 3px 0 var(--line); opacity: .85; cursor: not-allowed; }
/* 立即购买：赤陶描边变体 */
.kr-pdp-buy-clay { background: none; color: var(--rose); border: 1.5px solid var(--rose); }
.kr-pdp-buy-clay:hover:not(:disabled) { background: var(--rose); color: var(--kr-on-clay); }

/* 脚注 */
.kr-pdp-fine { font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: .06em; color: var(--muted); margin-top: 16px; }

/* 长描述：牛皮纸卡 */
.kr-pdp-desc { position: relative; z-index: 1; background: var(--blush); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; margin: 8px 0 34px; box-shadow: var(--shadow); }
.kr-pdp-desc-hd h2 { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--ink); margin: 0 0 14px; }
.kr-pdp-desc-body { font-family: system-ui, "PingFang SC", sans-serif; font-size: 14px; line-height: 1.85; color: var(--muted); }
.kr-pdp-desc-body img { max-width: 100%; height: auto; }

/* —— PDP 响应式：窄屏塌单列、图取消微旋 —— */
@media (max-width: 767.98px) {
  .kr-pdp { grid-template-columns: 1fr; gap: 26px; }
  .kr-pdp-imgwrap { transform: none; }
  .kr-pdp-buy { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kr-pdp-imgwrap, .kr-pdp-tape, .kr-pdp-stamp { transform: none; }
  .kr-pdp-buy:hover:not(:disabled), .kr-pdp-buy:active:not(:disabled) { transform: none; }
}

/* ========== 段5：分类侧栏（内页差异化 · 牛皮纸贴纸分类标签，抄 mockup .k-cat .side/.stick） ==========
   分类做成牛皮纸贴纸卡（部分微旋，选中苔绿），手写体英文副标；价格/排序沿用 kraft 纸感。全为纯 <a href>
   GET 导航/表单，无 JS 钩子；双模式全走 token（--blush/--line/--rose-deep/--kr-script/--on-accent 等）。 */
.kr-catside { padding-top: 40px; }
.kr-catsec { margin-bottom: 28px; }
.kr-catsec-h { font-family: system-ui, "PingFang SC", sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }

/* 贴纸标签：牛皮纸卡（软阴影，部分微旋），选中苔绿 */
.kr-stick { display: block; background: var(--blush); border: 1px solid var(--line); border-radius: 8px; padding: 9px 13px; font-family: var(--serif); font-size: 13.5px; color: var(--ink); text-decoration: none; margin-bottom: 10px; box-shadow: 0 3px 8px -5px rgba(76, 90, 56, .5); transition: background .2s, color .2s, border-color .2s; }
.kr-stick:hover { border-color: var(--rose-deep); text-decoration: none; color: var(--ink); }
.kr-stick:nth-of-type(2) { transform: rotate(-1.5deg); }
.kr-stick:nth-of-type(4) { transform: rotate(1.2deg); }
.kr-stick.active { background: var(--rose-deep); color: var(--on-accent); border-color: var(--rose-deep); }
.kr-stick.sub { margin-left: 14px; font-size: 12.5px; padding: 7px 12px; }
.kr-stick-em { display: block; font-family: "Segoe Script", "Comic Sans MS", cursive; color: var(--kr-script); font-size: 12px; margin-top: 1px; }
.kr-stick.active .kr-stick-em { color: var(--on-accent); opacity: .82; }

/* 价格：纸感细边 */
.kr-catprice-row { display: flex; align-items: center; gap: 8px; }
.kr-catprice-in { width: 100%; min-width: 0; font-family: system-ui, sans-serif; font-size: 12.5px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; -moz-appearance: textfield; }
.kr-catprice-in::-webkit-outer-spin-button, .kr-catprice-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kr-catprice-in::placeholder { color: var(--muted); }
.kr-catprice-in:focus { outline: none; border-color: var(--rose-deep); }
.kr-catprice-sep { color: var(--muted); }
.kr-catprice-clear { display: inline-block; margin-top: 10px; font-family: system-ui, sans-serif; font-size: 12px; color: var(--muted); text-decoration: none; }
.kr-catprice-clear:hover { color: var(--rose); }

/* 排序：简列，active 深苔绿粗体 */
.kr-sortlist { display: flex; flex-direction: column; gap: 6px; }
.kr-sortlink { font-family: system-ui, sans-serif; font-size: 13px; color: var(--muted); text-decoration: none; padding: 5px 4px; border-radius: 6px; transition: color .2s, background .2s; }
.kr-sortlink:hover { color: var(--ink); background: var(--blush); text-decoration: none; }
.kr-sortlink.active { color: var(--rose-ink); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .kr-stick:nth-of-type(2), .kr-stick:nth-of-type(4) { transform: none; }
}