/* ============================================================
   app.css —— 移动端 App 外壳（对标「珠了个珠」小程序 UI）
   ------------------------------------------------------------
   为什么单独一个文件：站点原有的 style.css 是「品牌官网」的排版体系
   （衬线大标题 + 大留白 section），而对手跑通的是一套「小程序 App」体系
   —— 底部标签栏、状态胶囊、底部抽屉、三列素材格。两套体系混在一个文件里
   会互相污染，所以这里用 .ax-* 前缀独立成层，只覆盖必要的页头规则。

   作用范围：全站。移动端为主，≥900px 退化成「宽版卡片行」，不破坏桌面排版。

   配色：沿用站点令牌（暖砂底 + 赭金主色），只是把「表面」提亮到纯白、
   圆角换成 App 的软圆角 —— 这是与对手视觉最接近的做法，同时不丢品牌色。
   若要完全跟对手的橙色系，只改下面这几个 --ax-* 变量即可。
   ============================================================ */

:root {
  /* —— App 层表面与文字 —— */
  --ax-bg:      #F5F4F1;   /* App 页面底（比站点暖砂略冷，更「应用」） */
  --ax-card:    #FFFFFF;   /* 卡片：纯白，和对手一致 */
  --ax-line:    #EDEBE6;   /* 发丝分隔线 */
  --ax-line-2:  #E3E0DA;
  --ax-ink:     #1F1B16;
  --ax-mut:     #8B8478;
  --ax-mut-2:   #B3ACA1;

  /* —— 品牌与强调 —— */
  --ax-brand:   var(--jade, #8A6A2F);
  --ax-brand-2: var(--gold, #C29A4A);
  --ax-grad:    linear-gradient(135deg, #8A6A2F 0%, #C29A4A 100%);
  --ax-grad-hot:linear-gradient(135deg, #B0733A 0%, #D9A85C 100%);
  --ax-ink-pill:#1F1B16;   /* 次按钮：黑胶囊（对手的「完成设计」） */
  --ax-soft:    #F3EFE6;   /* 胶囊底 / 内嵌块 */
  --ax-soft-2:  #FBF3E4;   /* 优惠券条底的暖调 */

  /* —— 圆角（App 软圆角；站点令牌 --radius 仍是 2px 锐角，两套并存） —— */
  --ax-r:    16px;
  --ax-r-sm: 12px;
  --ax-r-xs: 9px;
  --ax-pill: 999px;

  --ax-shadow:    0 1px 2px rgba(31,27,22,.04), 0 8px 24px rgba(31,27,22,.05);
  --ax-shadow-up: 0 -2px 14px rgba(31,27,22,.07);

  --ax-tabbar-h: 56px;
  /* 安全区。⚠️ 这三个变量只在有 viewport-fit=cover 的页面上才非 0 ——
     2026-09-17 实测：15 个页面原本全都没写 viewport-fit=cover，
     导致 iOS 上 env() 恒为 0，底部标签栏被 iPhone 的 home 指示条压住。
     已批量补上；以后新建页面别忘了这个 meta。 */
  --ax-safe:    env(safe-area-inset-bottom, 0px);
  --ax-safe-t:  env(safe-area-inset-top, 0px);
  --ax-safe-l:  env(safe-area-inset-left, 0px);
  --ax-safe-r:  env(safe-area-inset-right, 0px);
}

/* ============================================================
   一、页头：改成「应用标题栏」
   原 .site-header 是深色半透明（#0A0A0E/.82）—— 那是已否决的深色主题残留，
   在暖砂浅底上看着像贴了块黑板。这里统一成浅色玻璃 + 发丝线。
   ============================================================ */
.site-header {
  background: rgba(255, 255, 255, .88) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--ax-line) !important;
}
.site-header .logo { color: var(--ax-ink); }
.site-header .main-nav a { color: var(--ax-mut); }
.site-header .main-nav a:hover { color: var(--ax-ink); }
.site-header .cart-link {
  background: var(--ax-ink-pill) !important;
  color: #fff !important;
  border-radius: var(--ax-pill) !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
}
.site-header .cart-link:hover { background: var(--ax-brand) !important; }
.site-header .cart-count { border-radius: var(--ax-pill) !important; }
.site-header .menu-toggle span { background: var(--ax-ink); }

/* 移动端把标题栏做矮做轻，像 App 顶部条 */
@media (max-width: 900px) {
  /* 顶部安全区：Safari 里恒为 0；只有「添加到主屏幕」全屏打开时才有值。
     不补的话标题栏会被状态栏/灵动岛压住。
     高度拆两段：内容区固定 52（见下 .header-inner），安全区由外层 padding 承担，
     这样 --header-h 仍然等于总高，其它地方的 sticky 偏移不用改。 */
  :root { --header-h: calc(52px + var(--ax-safe-t)); }
  .site-header { padding-top: var(--ax-safe-t); }
  .site-header .header-inner { gap: 10px; height: 52px; }
  .site-header .logo { font-size: 20px; }
  .site-header .logo .seal { width: 30px; height: 30px; font-size: 16px; border-radius: 8px; }
  .site-header .cart-link { padding: 5px 12px !important; }
  .site-header .lang-dd-btn { padding: 5px 8px; }
}

/* ============================================================
   二、底部标签栏（首页 / 定制 / 购物车）
   ============================================================ */
.ax-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: stretch;
  height: calc(var(--ax-tabbar-h) + var(--ax-safe));
  padding-bottom: var(--ax-safe);
  /* 横屏刘海在左/右：不补的话边缘图标会被圆角切掉（竖屏时这两个值为 0） */
  padding-left: var(--ax-safe-l);
  padding-right: var(--ax-safe-r);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--ax-line);
}
.ax-tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 11px; letter-spacing: .02em; color: var(--ax-mut-2);
  transition: color .18s;
}
.ax-tabbar a svg { width: 22px; height: 22px; stroke-width: 1.7; }
.ax-tabbar a.on { color: var(--ax-brand); font-weight: 600; }
.ax-tabbar a .ax-tab-badge {
  position: absolute; transform: translate(16px, -12px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--ax-pill);
  background: var(--ax-brand); color: #fff; font-size: 10px; line-height: 16px; text-align: center;
}
.ax-tabbar a { position: relative; }
/* 有标签栏时必须给页面留出底部空间，否则页脚最后一行被永久遮住 */
body.ax-has-tabbar { padding-bottom: calc(var(--ax-tabbar-h) + var(--ax-safe)); }
/* 反白（toast / 浮动条）要为标签栏让位 */
body.ax-has-tabbar .b-toast { bottom: calc(var(--ax-tabbar-h) + var(--ax-safe) + 84px) !important; }
@media (min-width: 901px) {
  /* 桌面端不显示 App 标签栏：桌面有完整导航 */
  .ax-tabbar { display: none; }
  body.ax-has-tabbar { padding-bottom: 0; }
}

/* ============================================================
   三、首页 App 区块
   ============================================================ */
.ax-home { background: var(--ax-bg); padding: 12px 0 24px; }
@media (min-width: 901px) { .ax-home { padding: 20px 0 32px; } }
.ax-wrap {
  max-width: 1180px; margin: 0 auto;
  padding-left: calc(14px + var(--ax-safe-l));
  padding-right: calc(14px + var(--ax-safe-r));
}
@media (min-width: 901px) { .ax-wrap { padding: 0 32px; } }
/* ---- 3.1 顶部横幅 ---- */
.ax-banner {
  position: relative; overflow: hidden;
  border-radius: var(--ax-r); padding: 16px 18px;
  background: var(--ax-grad); color: #fff;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 8px 22px rgba(138, 106, 47, .22);
}
.ax-banner::after {
  content: ""; position: absolute; right: -40px; top: -50px; width: 160px; height: 160px;
  border-radius: 50%; background: rgba(255, 255, 255, .12);
}
.ax-banner .ax-banner-txt { flex: 1; min-width: 0; }
.ax-banner .ax-bn-cn {
  font-family: var(--serif); font-size: 30px; line-height: 1; opacity: .95; flex: none;
}
.ax-banner .ax-bn-t { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: .01em; }
.ax-banner .ax-bn-d { display: block; font-size: 12px; opacity: .88; margin-top: 3px; line-height: 1.5; }
.ax-banner .ax-bn-go {
  margin-left: auto; flex: none; font-size: 12px; font-weight: 700;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .5);
  padding: 7px 13px; border-radius: var(--ax-pill); color: #fff; white-space: nowrap;
}

/* ---- 3.2 信任条（三格） ---- */
.ax-trust {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--ax-card); border-radius: var(--ax-r); margin-top: 12px;
  border: 1px solid var(--ax-line); overflow: hidden;
}
.ax-trust li {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 6px; font-size: 12.5px; color: var(--ax-ink); font-weight: 600;
  border-right: 1px solid var(--ax-line);
}
.ax-trust li:last-child { border-right: none; }
.ax-trust li i {
  width: 17px; height: 17px; flex: none; border-radius: 50%;
  background: var(--ax-soft); color: var(--ax-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-style: normal; font-weight: 800;
}
@media (max-width: 360px) { .ax-trust li { font-size: 11.5px; gap: 4px; } }

/* ---- 3.3 双入口卡（自己 DIY / 老师私定） ---- */
.ax-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ax-duo-card {
  background: var(--ax-card); border: 1px solid var(--ax-line); border-radius: var(--ax-r);
  padding: 15px 15px 14px; position: relative; overflow: hidden; transition: .18s;
  display: flex; flex-direction: column; min-height: 108px;
}
.ax-duo-card:hover { border-color: var(--ax-brand); box-shadow: var(--ax-shadow); transform: translateY(-2px); }
.ax-duo-card .ax-duo-t { font-size: 16px; font-weight: 800; color: var(--ax-ink); letter-spacing: .01em; }
.ax-duo-card .ax-duo-d {
  font-size: 12px; color: var(--ax-mut); line-height: 1.55; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ax-duo-card .ax-duo-i {
  position: absolute; right: -8px; bottom: -10px; font-family: var(--serif);
  font-size: 54px; line-height: 1; color: var(--ax-brand); opacity: .10; pointer-events: none;
}
.ax-duo-card .ax-duo-go {
  margin-top: auto; padding-top: 10px; font-size: 12px; font-weight: 700; color: var(--ax-brand);
  display: inline-flex; align-items: center; gap: 3px;
}

/* ---- 3.4 优惠券条 ---- */
.ax-coupon {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
  background: var(--ax-soft-2); border: 1px solid #F0E1C6; border-radius: var(--ax-r);
  padding: 13px 15px;
}
.ax-coupon .ax-cp-badge {
  flex: none; width: 38px; height: 38px; border-radius: var(--ax-r-xs);
  background: var(--ax-grad); color: #fff; font-size: 12px; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.ax-coupon .ax-cp-b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ax-ink); }
.ax-coupon .ax-cp-s { display: block; font-size: 11.5px; color: var(--ax-mut); margin-top: 3px; }
.ax-coupon .ax-cp-go {
  margin-left: auto; flex: none; font-size: 12.5px; font-weight: 700; color: var(--ax-brand);
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
}

/* ---- 3.5 区块标题 ---- */
.ax-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 22px 2px 10px;
}
.ax-sec-head h3 { font-family: var(--sans); font-size: 17px; font-weight: 800; color: var(--ax-ink); letter-spacing: .01em; }
.ax-sec-head .ax-more { font-size: 12.5px; color: var(--ax-mut); display: inline-flex; align-items: center; gap: 2px; }
.ax-sec-head .ax-more::after { content: "›"; font-size: 15px; line-height: 1; }

/* ---- 3.6 设计广场（两列瀑布卡） ---- */
.ax-plaza { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 700px) { .ax-plaza { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .ax-plaza { grid-template-columns: repeat(4, 1fr); } }
.ax-pc {
  background: var(--ax-card); border: 1px solid var(--ax-line); border-radius: var(--ax-r);
  overflow: hidden; transition: .18s; display: block;
}
.ax-pc:hover { box-shadow: var(--ax-shadow); transform: translateY(-2px); border-color: var(--ax-line-2); }
.ax-pc .ax-pc-img { position: relative; background: #F7F5F1; aspect-ratio: 1 / 1; overflow: hidden; }
.ax-pc .ax-pc-img img { width: 100%; height: 100%; object-fit: cover; }
.ax-pc .ax-pc-img .ax-pc-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 34px; color: var(--ax-mut-2);
}
.ax-pc .ax-pc-tag {
  position: absolute; left: 8px; top: 8px; background: rgba(255,255,255,.92);
  border-radius: var(--ax-pill); padding: 3px 9px; font-size: 10.5px; font-weight: 700; color: var(--ax-brand);
}
.ax-pc .ax-pc-b { padding: 10px 11px 12px; }
.ax-pc .ax-pc-t {
  font-size: 13.5px; font-weight: 700; color: var(--ax-ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.ax-pc .ax-pc-d {
  font-size: 11.5px; color: var(--ax-mut); line-height: 1.5; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 34px;
}
.ax-pc .ax-pc-f {
  display: flex; align-items: center; justify-content: space-between; margin-top: 8px;
  font-size: 11px; color: var(--ax-mut-2);
}
.ax-pc .ax-pc-price { font-size: 13.5px; font-weight: 800; color: var(--ax-brand); }

/* ---- 3.7 浮动计数条（对手的「已累计完成 N 款设计」位置） ---- */
.ax-float {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--ax-tabbar-h) + var(--ax-safe) + 12px); z-index: 60;
  background: rgba(31, 27, 22, .86); color: #fff; font-size: 11.5px; font-weight: 600;
  padding: 7px 15px; border-radius: var(--ax-pill); backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22); white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.ax-float b { color: #EBC988; font-weight: 800; }
.ax-float.hide { opacity: 0; pointer-events: none; transition: opacity .25s; }
@media (min-width: 901px) { .ax-float { display: none; } }

/* ============================================================
   四、移动端「应用化」微调（只调必要项，不动内容区块）
   ============================================================ */
@media (max-width: 900px) {
  /* App 里区块之间更紧凑：官网那套大留白在小屏上会变成「一直在滑」 */
  :root { --sec-y: clamp(32px, 5vh, 56px); --sec-head-gap: 20px; }
  .wrap, .wrap-narrow { padding-left: 16px; padding-right: 16px; }
  /* 商品网格两列（官网移动端已是两列，这里只对齐间距） */
  .product-grid { gap: 10px !important; }
}

/* ============================================================
   五、意图落地页说明横幅（shop?intent=xxx）
   ============================================================ */
.intent-banner{display:flex;gap:18px;align-items:flex-start;margin:24px auto 0;max-width:820px;
  background:#FFFCF5;border:1px solid #E6DBC2;border-left:4px solid #C29A4A;border-radius:14px;
  padding:18px 22px;text-align:left}
.ib-glyph{font-family:"Noto Serif SC",Georgia,serif;font-size:34px;line-height:1;flex:0 0 auto;padding-top:2px}
.ib-body{min-width:0}
.ib-body h2{margin:0 0 6px;font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;font-weight:600;color:#2A2318}
.ib-body p{margin:0;font-size:14px;line-height:1.75;color:#6B6252}
.ib-bagua{margin-top:8px;font-size:12px;color:#A2957F;letter-spacing:.04em}
@media (max-width:680px){
  .intent-banner{gap:12px;padding:14px 16px;margin-top:18px}
  .ib-glyph{font-size:26px}
  .ib-body h2{font-size:19px}
  .ib-body p{font-size:13.5px}
}

/* =============================================================
   知识库 SEO 独立页（/guides/*）样式
   主题沿用方案 D 暖砂·锐角：卡片暖白、2px 圆角、赭金主色。
   ============================================================= */
.seo-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.seo-list li{position:relative;padding:14px 16px 14px 34px;background:var(--surface,#FCF9F4);border:1px solid var(--line,rgba(42,35,24,.14));border-radius:2px;font-size:14.5px;line-height:1.75;color:var(--ink,#2A2318)}
.seo-list li::before{content:"";position:absolute;left:16px;top:21px;width:6px;height:6px;background:var(--jade,#8A6A2F);transform:rotate(45deg)}
.seo-faq{display:grid;gap:14px;max-width:820px}
.seo-qa{border-left:2px solid var(--jade,#8A6A2F);padding:2px 0 2px 18px}
.seo-qa h3{font-size:16px;margin:0 0 6px;color:var(--ink,#2A2318)}
.seo-qa p{margin:0;font-size:14.5px;line-height:1.8;color:var(--ink-soft,#7A6E5C)}
.seo-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.seo-fact{background:var(--surface,#FCF9F4);border:1px solid var(--line,rgba(42,35,24,.14));border-radius:2px;padding:16px 18px}
.seo-fact h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--jade,#8A6A2F);margin:0 0 8px}
.seo-fact p{margin:0;font-size:14px;line-height:1.75;color:var(--ink,#2A2318)}
.seo-rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.seo-rel-item{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--bg-alt,#F2EBDF);border-radius:2px}
.seo-rel-item span{font-size:18px;color:var(--ink,#2A2318)}
.seo-rel-item em{font-style:normal;font-size:12.5px;color:var(--ink-soft,#7A6E5C)}
.seo-plain{font-size:15px;line-height:1.85;color:var(--ink,#2A2318);max-width:820px;margin:0}
.seo-cta{max-width:720px;margin:0 auto;text-align:center}
.seo-cta h2{font-size:22px;margin:0 0 10px}
.seo-cta p{font-size:15px;line-height:1.8;color:var(--ink-soft,#7A6E5C);margin:0 0 18px}
.seo-cta-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:18px}
@media (max-width:900px){
  .seo-list{grid-template-columns:1fr}
  .seo-facts{grid-template-columns:1fr}
  .seo-rel{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.seo-index{display:grid;gap:18px}
.seo-index-group h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--jade,#8A6A2F);margin:0 0 10px}
.seo-index-links{display:flex;flex-wrap:wrap;gap:8px}
.seo-index-links a{display:inline-block;padding:7px 13px;background:var(--surface,#FCF9F4);border:1px solid var(--line,rgba(42,35,24,.14));border-radius:2px;font-size:13.5px;color:var(--ink,#2A2318);text-decoration:none;transition:border-color .18s,background .18s}
.seo-index-links a:hover{border-color:var(--jade,#8A6A2F);background:var(--bg-alt,#F2EBDF)}