/* ==========================================================================
   红森艺术 —— 客户站样式
   设计体系：Sober 白色极简（Poppins / 12px 大写导航 / 超大留白 / 极细分割线 / 深墨 #23232c）
   布局参照：在线配框（大预览 + 左侧框条库 + 右侧参数卡）
   ========================================================================== */

/* ------------------------------- 字体 ------------------------------- */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/poppins-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600.woff2') format('woff2');
}

/* ------------------------------- 令牌 ------------------------------- */

:root {
  --ink: #1b1a1f;
  --ink-2: #26242b;
  --ink-hover: #000;
  /* 灰阶可读性（原设计偏浅，自检时按 WCAG 提了一档）：
     原 text-2 #85848d 白底仅 3.70、text-3 #a5a4ad 仅 2.47（连 3.0 都没过）。
     现值 text-2 4.24 / text-3 3.41 —— 明显更清楚，又没把整页压重。
     若要严格 AA 小字（4.5），text-2 需 #75747d、text-3 需 #767581，视需要再降。 */
  --text: #6b6a73;
  --text-2: #7b7a83;
  --text-3: #8b8a93;
  --line: #ece9e4;
  --line-2: #dedad2;
  --line-3: #f5f3ef;
  --bg: #ffffff;
  --bg-soft: #faf8f5;
  --bg-warm: #f6f2ec;

  /* ── 主色 / 强调色（现代电商风：暖赤陶 + 金）─────────────────────
     框条是木头、卡纸是纸，暖色系比冷色更贴品类；主色只用在
     「要你点的地方」（CTA、价格、选中态），避免整页花掉。 */
  --brand: #e0562a;
  --brand-ink: #b23c14;
  /* 浅底上的「正文级」主色。--brand(#e0562a) 在白底只有 3.79:1，够 AA 大字（≥18.66px 粗体）
     但不够小字（要 4.5）。实测：白底要更深、深色底反而要更亮，方向相反，
     所以拆成两个令牌 —— 小字/正文用 --brand-text(5.01)，大号数字与深底文字仍用 --brand。 */
  --brand-text: #c64218;
  --brand-soft: #fff1e9;
  --brand-line: #ffd9c7;
  --gold: #c08a2e;
  --gold-soft: #fdf5e6;
  /* 渐变整体压深一档：白字压在中点上由 3.79 → 4.74，主 CTA 的白字才过 AA。
     0% 的亮端只占左上角一点，按钮文字居中，不受影响。 */
  --grad-brand: linear-gradient(135deg, #cb4718 0%, #b23c14 52%, #93300d 100%);
  --grad-ink: linear-gradient(135deg, #2b2930 0%, #17161a 100%);

  --danger: #c0392b;
  --ok: #2f7d5b;
  --warn: #b8860b;

  /* 分级阴影：电商界面靠阴影建立卡片层次 */
  --sh-xs: 0 1px 2px rgba(28, 24, 20, 0.05);
  --sh-sm: 0 2px 8px rgba(28, 24, 20, 0.06);
  --sh-md: 0 10px 26px rgba(28, 24, 20, 0.09);
  --sh-lg: 0 22px 50px rgba(28, 24, 20, 0.14);
  --sh-brand: 0 8px 22px rgba(224, 86, 42, 0.28);

  /* 圆角体系 */
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --pad: clamp(18px, 3.6vw, 52px);
  --maxw: 1440px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------- 基础 ------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* r66：字号 / 字体走 CSS 变量，店主在后台「店铺设置 → 外观」可调（common.js 注入变量） */
  font-family: var(--font-body, 'Poppins', -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif);
  font-size: var(--fs-base, 14px);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
h1 { font-size: clamp(28px, 4vw, 44px); }
h2 { font-size: clamp(22px, 2.6vw, 32px); }
h3 { font-size: 17px; }
h4 { font-size: 14px; font-weight: 500; }
h5 { font-size: 13px; font-weight: 500; }
p { margin: 0; }
a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--ink); }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

::selection { background: var(--ink); color: #fff; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.02em; }
.empty {
  padding: 34px 0;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}
.hidden, [hidden] { display: none !important; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}

/* ------------------------------- 按钮 ------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 30px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: #fff; }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }

.btn.outline { background: transparent; color: var(--ink); }
.btn.outline:hover { background: var(--ink); color: #fff; }

.btn.ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}
.btn.ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }

.btn.sm { height: 36px; padding: 0 18px; font-size: 11px; }
.btn.lg { height: 54px; padding: 0 44px; font-size: 13px; }
.btn.block { width: 100%; }

.link-btn {
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.2s var(--ease);
  white-space: nowrap;
}
.link-btn:hover { color: var(--ink); }
.link-btn.active { color: var(--ink); }

.heart {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--text-2);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.heart:hover { color: var(--ink); border-color: var(--ink); }
.heart.on { color: #d24a3d; border-color: #d24a3d; }
.heart svg { width: 15px; height: 15px; display: block; }
.heart.on svg path { fill: currentColor; }

/* ------------------------------- 表单 ------------------------------- */

.field { display: block; }
.field > span,
.flabel {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 7px;
}

input[type='text'], input[type='number'], input[type='tel'], input[type='password'],
input[type='search'], input:not([type]), select, textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s var(--ease);
  appearance: none;
}
textarea { height: auto; padding: 11px 14px; line-height: 1.65; resize: vertical; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237c7c80' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 34px;
  cursor: pointer;
}
input:focus, select:focus, textarea:focus { border-color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input[type='number'] { -moz-appearance: textfield; }
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.input-suffix { position: relative; }
.input-suffix input { padding-right: 38px; }
.input-suffix i {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 12px; color: var(--text-3);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: 32px;
  padding: 0 15px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.seg { display: flex; border: 1px solid var(--line-2); }
.seg button {
  flex: 1;
  height: 40px;
  border: 0;
  background: #fff;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button.active { background: var(--ink); color: #fff; }

/* --------------------- 公告条（topbar）+ 页头 --------------------- */

.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.68);
  font-size: 11.5px;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  gap: 20px;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 22px; }
.topbar a, .topbar button {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-weight: 400;
}
.topbar a:hover, .topbar button:hover { color: #fff; }
.topbar .sep { width: 1px; height: 13px; background: rgba(255, 255, 255, 0.2); }

.site-header {
  /* r61b 修滚动重影：原来这里也是 sticky —— 外层 #siteTop 已把整块页头钉住，
     内外两层 sticky 会各自独立重绘/对齐，是重影来源之一。降级为普通 relative 块。 */
  position: relative;
  z-index: 1;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

/* 整块页头（含导航）真正钉住不随页面滚走（sticky 只在父容器内生效，
   所以要把外层 #siteTop 一起钉住），下滑时收掉公告条只留导航，省高度。
   ★ 全宽度生效：原来只写在 min-width:1041 里，导致手机端只有 .site-header 自己
   在 #siteTop 内吸顶（行程受 #siteTop 高度限制），滚过公告条后页头就跟着滚走了；
   而配框页 .stage 吸顶预留的 top:66px 又是按「页头常驻」算的 —— 结果手机端滚动时
   顶部既没有页头、还空出 66px 一条。店主手机截图反馈的正是这个。 */
/* r61b 修滚动重影：给 sticky 页头提升为独立合成层（层内没有 fixed 子元素——
   抽屉/弹窗都挂在 body 上，提升无副作用）。否则 Windows 高分屏 + 鼠标滚轮滚动时
   页头重绘会留残影，顶栏轮播每 4.2s 淡出淡入还会加重。 */
#siteTop {
  position: sticky;
  top: 0;
  z-index: 60;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
#siteTop.scrolled .topbar { display: none; }
.site-header .container.header-inner {
  position: relative;
  display: grid;
  /* 页头版式（r59 店主指定：「logo移到左边，导航文字居中」）：
     LOGO 靠左、导航整组**居中**、工具区靠右。
     中间列 auto 由导航撑开、两侧 1fr 等宽，导航才真正落在容器中线上。
     （r39~r58 是反过来的「导航靠左、LOGO 对中线」，r59 对调。）
     ⚠ 中间列 auto 宽 = 导航整组宽，两侧各分到 (容器宽-导航)/2 ——
     品牌块 206px 在 1041px 容器下也放得下（见 ≤1240 断点）。 */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 84px;
}
.head-nav { display: flex; align-items: center; grid-column: 2; grid-row: 1; justify-self: center; gap: clamp(14px, 1.2vw, 26px); }
/* 导航字体加大（原来 12px 全大写太秀气），去掉大写、字号提到 14px。
   r31 店主再要求「加粗、稍微大一点」→ 15px + 600（选中态 700 保住层次）。
   ⚠️ r59 起导航居中、独占中间 auto 列，不再受「左列 (容器宽-品牌块)/2」的宽度挤压；
   下面的 ≤1600 / ≤1400 收字号两档保留（更窄时给两侧让空间），只是不再那么生死攸关。 */
.head-nav .link-btn { font-size: 15px; letter-spacing: 0.04em; text-transform: none; font-weight: 600; }
.head-nav .link-btn.active { font-weight: 700; }

/* 导航改居中后字号按宽度收两档（窄屏时给两侧的品牌块/工具区让路）。
   参考站 Sober 的极简页头导航本身就是 12px/600 大写，13~14px 完全在同一路子上。 */
@media (max-width: 1600px) {
  .head-nav { gap: clamp(11px, 1vw, 20px); }
  .head-nav .link-btn { font-size: 14px; }
}
@media (max-width: 1400px) {
  .head-nav { gap: clamp(9px, 0.85vw, 18px); }
  .head-nav .link-btn { font-size: 13px; }
}

/* 导航下拉子菜单：悬停 / 键盘聚焦展开 */
.nav-drop {
  position: relative;
  display: flex;
  align-items: center;
  padding-bottom: 14px;      /* 悬停桥接：鼠标从标题移到菜单不会中断 */
  margin-bottom: -14px;
}
.nav-drop .nav-caret { font-style: normal; font-size: 9px; margin-left: 5px; color: var(--text-3); }
.nav-drop:hover .nav-caret { color: var(--ink); }
.drop-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 196px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
  z-index: 70;
}
.nav-drop:hover .drop-menu,
.nav-drop:focus-within .drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.drop-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
}
.drop-item:hover { background: var(--bg-soft); }
.drop-item small { font-size: 11px; color: var(--text-3); }
.brand-logo { height: 42px; width: auto; max-width: 140px; object-fit: contain; display: block; }
/* LOGO 靠左（r59）。grid-row 必须显式写 1：三个子项都只给了 grid-column 时，
   Chromium 会把「列确定、行自动」的项按不回溯的光标顺序摆，结果 nav 独占第一行、
   LOGO 与工具区被挤到第二行（实测 rows = 35.25px 48.75px）。 */
.brand {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  position: relative;
  z-index: 1;
}
.head-tools {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 22px;
}
/* 右上角「我的订单」：登录后带一张最终付款方案的小缩略图 */
.order-link { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; padding: 0; }
.order-link .ol-thumb {
  width: 0;
  height: 22px;
  background: var(--bg-soft) center/contain no-repeat;
  border: 0 solid var(--line-2);
  transition: width .18s ease;
}
.order-link .ol-thumb.has { width: 22px; border-width: 1px; }
.hamburger { position: absolute; left: var(--pad); }
.mobile-left { display: none; }

.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink);
  color: #fff;
  font-size: 19px;
  font-weight: 500;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text b { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.brand-text i { font-style: normal; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }

.hamburger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line-2);
  background: #fff;
  cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center;
}
.hamburger span { display: block; width: 17px; height: 1.5px; background: var(--ink); position: relative; }
.hamburger span::before, .hamburger span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--ink);
}
.hamburger span::before { top: -5.5px; }
.hamburger span::after { top: 5.5px; }

/* 手机端横滑导航条（需求1）：桌面隐藏，≤980px 显示在页头下方 */
.m-quicknav { display: none; }

.drawer-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  pointer-events: none;
}
.drawer-menu .veil {
  position: absolute; inset: 0;
  background: rgba(20, 20, 24, 0.42);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}
.drawer-menu .sheet {
  position: relative;
  width: min(88vw, 380px);
  margin-left: auto;
  background: #fff;
  height: 100%;
  padding: 26px var(--pad) 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.34s var(--ease);
}
.drawer-menu.open { pointer-events: auto; }
.drawer-menu.open .veil { opacity: 1; }
.drawer-menu.open .sheet { transform: none; }
.drawer-menu .d-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }.drawer-menu .d-close {
  width: 38px; height: 38px; border: 1px solid var(--line-2); background: #fff;
  cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink);
}
.drawer-menu nav { display: flex; flex-direction: column; }
.drawer-menu nav a, .drawer-menu nav button {
  padding: 15px 0;
  border: 0; border-bottom: 1px solid var(--line-3);
  background: none; text-align: left;
  font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink);
  cursor: pointer;
}
.drawer-menu .d-foot { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }

/* ------------------------------- 页脚 ------------------------------- */

.site-footer {
  margin-top: clamp(70px, 9vw, 130px);
  border-top: 1px solid var(--line);
  padding: clamp(46px, 5vw, 76px) 0 30px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}
.foot-col h5 {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 18px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.foot-col a, .foot-col button {
  font-size: 13px; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.foot-col a:hover, .foot-col button:hover { color: var(--ink); }
.foot-about { font-size: 13px; line-height: 1.9; max-width: 320px; }
/* r62：版权一行居中、去掉上方的白色分割线 */
.foot-bar {
  margin-top: 52px; padding-top: 24px;
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-3); text-align: center;
}
/* r62：页脚二维码（微信 / 小红书 / 抖音），后台「店铺设置」上传后出现在品牌列下方 */
.foot-qr { display: flex; gap: 18px; margin-top: 20px; flex-wrap: wrap; }
.foot-qr-item { margin: 0; text-align: center; }
.foot-qr-item img {
  display: block; width: 88px; height: 88px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px;
}
.foot-qr-item figcaption { font-size: 11px; color: var(--text-3); margin-top: 6px; letter-spacing: 0.06em; }

/* --------------------------- 通用区块 --------------------------- */

.section { padding: clamp(56px, 7vw, 100px) 0 0; }
.section-head { margin-bottom: clamp(30px, 3.4vw, 52px); }
.section-head.center { text-align: center; }
.section-head .h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 500; }
.section-head p { margin-top: 12px; font-size: 13.5px; color: var(--text-2); max-width: 620px; }
.section-head.center p { margin-left: auto; margin-right: auto; }
.section-head .head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 24px; }

.product { position: relative; display: flex; flex-direction: column; }
.product .shot {
  position: relative;
  aspect-ratio: 5 / 6;
  background: var(--bg-soft);
  overflow: hidden;
  display: block;
}
.product .shot img, .product .shot .bg {
  width: 100%; height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease);
}
.product:hover .shot img, .product:hover .shot .bg { transform: scale(1.035); }
.product .badge {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 9px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.product .shot .heart { position: absolute; top: 12px; right: 12px; opacity: 0; transition: opacity 0.24s var(--ease); }
.product:hover .shot .heart { opacity: 1; }
.product .shot .heart.on { opacity: 1; }
.product .body { padding-top: 15px; }
.product .name { font-size: 13.5px; color: var(--ink-2); }
.product .meta { margin-top: 4px; font-size: 12px; color: var(--text-3); }
.product .size { margin-top: 3px; font-size: 11.5px; color: var(--text-3); }
.product .price { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.product .price small { font-weight: 400; color: var(--text-3); }
.product .actions { margin-top: 12px; display: flex; gap: 8px; }

.more-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: 3px;
}
.more-link:hover { color: var(--ink-hover); border-color: var(--ink-hover); }

.hero {
  position: relative;
  background: var(--bg-soft);
  min-height: clamp(420px, 58vh, 640px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero .bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.94;
}
.hero .inner { position: relative; max-width: 560px; }
.hero h1 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.14; letter-spacing: -0.02em; }
.hero p { margin-top: 20px; font-size: 14.5px; color: var(--text); }
.hero .cta { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.steps > div { background: #fff; padding: 34px 30px; }
.steps .n { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.steps h4 { margin-top: 14px; font-size: 15px; }
.steps p { margin-top: 9px; font-size: 13px; color: var(--text); }

/* ==========================================================================
   在线配框
   ========================================================================== */

/* 顶部「在线配框」标题块已去掉（店主需求）：标题在页头导航里已经有了。 */

.stage {
  position: relative;
  background: var(--bg-soft);
  padding: clamp(28px, 4vw, 60px) 0 clamp(22px, 3vw, 40px);
}
.stage-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.stage-canvas-wrap { position: relative; display: flex; justify-content: center; width: 100%; }
#preview {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0 24px 60px -28px rgba(24, 24, 32, 0.28);
}
.stage-empty {
  width: min(100%, 640px);
  aspect-ratio: 4 / 3;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 13px;
  box-shadow: 0 24px 60px -28px rgba(24, 24, 32, 0.2);
}
.stage-meta {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-2);
  letter-spacing: 0.02em;
}
/* 「11.5 cm」里的空格允许折行 → 手机端会把 cm 单独甩到下一行，
   还让小数点被切开。数值+单位整段不许断。 */
.stage-meta b { color: var(--ink); font-weight: 500; white-space: nowrap; }
.stage-meta .dot { margin: 0 9px; color: var(--line-2); }

.stage-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stage-cta .hint { font-size: 12px; color: var(--text-3); text-align: center; }
.stage-cta .hint a { color: var(--ink); border-bottom: 1px solid var(--line-2); }

/* 画心上传条（需求3）：合并到效果图下方，紧凑一行 */
/* 画心上传入口：做成一个紧凑的实心深色按钮 + 下方一行小字。
   （原来是一整条 640px 白底虚线框，店主反馈「太长太素、小字挤在按钮里」） */
.stage-art { width: 100%; display: flex; justify-content: center; }
.stage-art-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.stage-art-upload {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 24px;
  background: var(--grad-ink);
  border-radius: var(--r-pill);
  color: #fff;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--sh-sm);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), filter 0.18s var(--ease);
}
.stage-art-upload:hover { transform: translateY(-1px); box-shadow: var(--sh-md); filter: brightness(1.14); }
.stage-art-upload:active { transform: translateY(0); }
.stage-art-upload .sa-ic {
  width: 22px; height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  flex: none;
  transition: all 0.18s var(--ease);
}
.stage-art-upload:hover .sa-ic { border-color: #fff; background: rgba(255, 255, 255, 0.16); }
.stage-art-upload input[type="file"] { display: none; }
/* 小字与「去图库挑一张」挪到按钮下方，不再挤在按钮里 */
.stage-art-meta { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--text-3); }
.stage-art-meta .sa-s { font-weight: 400; }
.stage-art-link { font-size: 11.5px; color: var(--brand-text); border-bottom: 1px solid var(--brand-line); }

/* 已上传状态：还是一张浅色信息卡（缩略图 + 文件名 + 更换/移除），跟按钮形态区分开 */
.stage-art-row.has {
  flex-direction: row;
  width: min(100%, 620px);
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.stage-art-row.has img { width: 40px; height: 40px; object-fit: cover; border: 1px solid var(--line); flex: none; }
.stage-art-row.has .sa-name { font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-art-row.has .sa-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }

.mode-row {
  margin-top: clamp(30px, 3.6vw, 48px);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
}

/* 装裱方案面板（需求：从效果图下方挪到「画心尺寸」上方，字号按钮都加大） */
.mode-panel .mode-row { margin-top: 0; justify-content: flex-start; gap: 10px; }
.mode-panel .chip {
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
  border-radius: var(--r-pill);
}

.cfg-cols {
  display: grid;
  /* 左栏 = 固定效果图 + 画心上传 + 价格配置（桌面端整体吸顶），
     右栏承载全部选材料面板（可折叠）。
     店主需求（r50）：「电脑端效果图展示改宽一点，左右各占一半」——
     原来是 1fr / 1.4fr（左栏只占 42%，效果图受宽度拖累被压到 236px 高）。
     改成 1fr / 1fr 真五五分，宽度交给下面的 @media 在窄屏兜底。 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
  padding-top: clamp(30px, 3.6vw, 52px);
}
.cfg-left, .cfg-right { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* 桌面端：左栏（只剩效果图）吸顶固定不动，右侧面板滚动时随时对照效果 */
@media (min-width: 1041px) {
  .cfg-left {
    position: sticky;
    top: 96px;                    /* 桌面页头高度 84px + 呼吸空隙 */
    align-self: start;            /* 吸顶必须：不让栅格拉伸整行高 */
    max-height: calc(100vh - 112px);
    overflow-y: auto;             /* 矮窗口安全垫：内容过高时左栏内部滚动 */
    scrollbar-width: none;
  }
  .cfg-left::-webkit-scrollbar { display: none; }
  /* 效果图进栏目后不再要整幅横幅的留白 */
  .stage { padding: 8px 0 4px; background: transparent; }
  .stage-inner { gap: 12px; }
  /* ⚠ r51：「画心尺寸」卡与「合计 / 立即购买」价格卡已从这条公式里拿掉
     （搬到右栏最上方），所以不再扣它们那 356px（146 + 210）。
     原来的 664 是「上传条 134 + 间隙 44 + 尺寸卡 146 + 价格卡 210 + 页头/空隙 130」，
     现在左栏只剩「上传条 134 + 间隙 44 + 页头/空隙 130」≈ 344。
     这里取 380（比 344 留了 36px 余量，免得小字号/行高差异把上传条挤掉）；
     上限同时从 420 抬到 640 —— 因为 2560×1440 下 (1440-380)=1060 已经远高于上限，
     真正能长多大由第二档（≥1600 的 720）和画布位图上限决定。 */
  #preview { max-height: clamp(240px, calc(100vh - 380px), 640px); width: auto; max-width: 100%; }
  .stage-empty { width: 100%; aspect-ratio: 4 / 3; height: auto; }
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.panel-head h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.panel-head h3::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--ink);
  display: block;
  flex: none;
}
.panel-head .sub { font-size: 12.5px; color: var(--text-2); }
.panel-body { padding: 20px; }
.panel-body.tight { padding: 14px 20px 20px; }

.panel-head { cursor: pointer; user-select: none; }
.panel-head .caret { display: block; width: 13px; height: 13px; transition: transform 0.24s var(--ease); flex: none; }
.panel.folded .panel-head .caret { transform: rotate(-90deg); }
.panel.folded .panel-body { display: none; }

.size-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: end;
  gap: 11px;
}
.size-grid .x { padding-bottom: 13px; color: var(--text-3); }
.size-grid .qty { width: 78px; }

/* 画心尺寸（左栏 · 效果图下方）：紧凑横排，不用整块面板 ——
   左栏还要放效果图和价格卡，面板的标题条 + 大内边距会把效果图挤小 */
.size-inline {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 16px 14px;
}
.si-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* 标题块限宽 100px：说明文字折成两行也不会把输入行挤到下一行去 */
.si-title { flex: none; max-width: 100px; display: flex; flex-direction: column; gap: 2px; }
.si-title b {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink);
}
.si-title b::before { content: ''; width: 5px; height: 5px; background: var(--ink); flex: none; }
.si-title small { font-size: 11.5px; line-height: 1.45; color: var(--text-2); }
.size-inline .size-grid { flex: 1 1 300px; min-width: 0; }
/* 常用尺寸：固定一行，放不下就横向滑（换行会把左栏顶高，效果图跟着变小） */
.si-presets { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.si-presets .flabel { margin-bottom: 0; flex: none; }
.si-presets .chips {
  flex: 1 1 auto; min-width: 0;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  gap: 6px; padding-bottom: 2px;
  /* 右缘渐隐：提示「还有没显示完的尺寸可以横向滑」 */
  mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}
.si-presets .chips::-webkit-scrollbar { display: none; }
.si-presets .chip { height: 30px; padding: 0 10px; font-size: 11.5px; flex: none; }

.tile-grid {
  display: grid;
  /* 128 起步：规格行「底宽 0.8 · 槽深 0.3 cm」要能一行放下，别把 cm 挤到第三行 */
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 11px;
}
.tile {
  position: relative;
  border: 1px solid var(--line-2);
  background: #fff;
  padding: 0 0 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  overflow: hidden;
}
.tile:hover { border-color: var(--ink); }
.tile.active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tile .shot {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-soft) center/cover no-repeat;
  display: block;
}
.tile .t-name {
  display: -webkit-box;
  padding: 9px 9px 0;
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.45;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tile .t-price { display: block; padding: 5px 9px 0; font-size: 11px; color: var(--text-3); }
/* 规格固定两行，卡片高度才齐平（内容有差也不跳） */
.tile .t-size {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 9px 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-3);
  min-height: 3em;
}
.tile .tick {
  position: absolute; top: 7px; right: 7px;
  width: 17px; height: 17px;
  background: var(--ink);
  color: #fff;
  display: none; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1;
}
.tile.active .tick { display: flex; }

/* 价格卡跟随左栏整体吸顶（见 .cfg-left），自身不再 sticky */
.price-card { position: static; }
.price-top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.price-top .lbl { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.price-top .val { font-size: 30px; font-weight: 500; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.price-top .val small { font-size: 12px; color: var(--text-3); font-weight: 400; margin-left: 8px; letter-spacing: 0.06em; }
.price-actions { display: flex; gap: 10px; padding: 16px 20px; }
.price-actions .btn { flex: 1; }

/* 自动计费明细已取消（手机 + 桌面一致）：只保留合计与操作按钮 */
.price-lines { display: none; padding: 14px 20px 4px; max-height: 268px; overflow-y: auto; }
.quote-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  font-size: 12.5px;
  color: var(--text);
  border-bottom: 1px dashed var(--line-3);
}
.quote-line:last-child { border-bottom: 0; }
.quote-line .lbl small { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.quote-line .val { color: var(--ink); font-weight: 500; white-space: nowrap; }
.quote-line.discount .val { color: var(--ok); }

.price-foot { padding: 12px 20px 18px; font-size: 11.5px; color: var(--text-3); border-top: 1px solid var(--line-3); }

.filter-bar { display: flex; gap: 9px; align-items: center; margin-bottom: 4px; }
.filter-bar .search { flex: 1; height: 40px; }
.filter-summary { padding: 12px 2px; font-size: 11.5px; color: var(--text-3); }

.frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; }
.frame-card {
  position: relative;
  border: 1px solid var(--line-2);
  background: #fff;
  padding: 8px 8px 11px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  font: inherit;
}
.frame-card:hover { border-color: var(--ink); }
.frame-card.active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.frame-card .frame-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;                 /* 方形样角图，和后台列表保持一致 */
  background: var(--bg-soft) center/cover no-repeat;
}

/* 没有实拍图的材料（卡纸等）：纯 CSS 画一个 L 形样角，颜色取材料色 */
.tile .shot.sample-l,
.frame-card .frame-thumb.sample-l {
  position: relative;
  background: #f4f1ea;
  overflow: hidden;
}
.tile .shot.sample-l::before,
.frame-card .frame-thumb.sample-l::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 26%; height: 100%;
  background: var(--c, #e8e2d6);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.12);
}
.tile .shot.sample-l::after,
.frame-card .frame-thumb.sample-l::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 26%;
  background: var(--c, #e8e2d6);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.frame-card .frame-tag {
  position: absolute; top: 13px; left: 13px;
  padding: 2px 7px; background: var(--ink); color: #fff;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.frame-card .fav {
  position: absolute; top: 12px; right: 12px;
  width: 26px; height: 26px; opacity: 0;
  background: rgba(255, 255, 255, 0.94);
  border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
  color: var(--text-2);
}
.frame-card:hover .fav { opacity: 1; }
.frame-card .fav.on { opacity: 1; color: #d24a3d; }
.frame-card .fav.on svg path { fill: currentColor; }
.frame-card .fav svg { width: 13px; height: 13px; }
.frame-card .frame-name {
  display: block; padding: 10px 2px 0;
  font-size: 12px; color: var(--ink); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.frame-card .frame-size {
  display: block; padding: 3px 2px 0;
  font-size: 10.5px; color: var(--text-3); letter-spacing: 0.02em;
}
.frame-card .frame-meta {
  display: block; padding: 2px 2px 0;
  font-size: 10.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.frame-card .frame-price {
  display: block; padding: 7px 2px 0;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.frame-card .frame-price small { font-weight: 400; color: var(--text-3); font-size: 10.5px; }

.sub-ctrl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-2);
}
/* 卡纸面板要把「层数 / 每层边宽 / 画面间距」一次排开，颜色单独一行 */
.sub-ctrl.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
/* 内线条位置：单独占满一行 */
.sub-ctrl.one-col { grid-template-columns: 1fr; }

/* 分段切换（内线条压在卡纸外侧 / 内侧） */
.seg {
  display: inline-flex; flex-wrap: wrap;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: #fff;
}
.seg-btn {
  border: 0; background: transparent; cursor: pointer;
  height: 38px; padding: 0 16px;
  font-size: 12.5px; color: var(--text);
  border-right: 1px solid var(--line);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { background: var(--bg-soft); color: var(--ink); }
.seg-btn.active { background: var(--ink); color: #fff; }

.inline-hint { margin-top: 9px; font-size: 11.5px; line-height: 1.65; color: var(--text-2); }
/* 「未选 · 不含此项」标记：贴在单选组标题后面 */
.opt-off {
  margin-left: 9px; padding: 2px 9px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--bg-soft); color: var(--text-3);
  font-size: 11px; font-weight: 400; letter-spacing: 0;
  vertical-align: middle;
}

/* 画心尺寸卡里的「旋转 90°」：跟在「常用尺寸」芯片行末尾的小按钮 */
.si-rot { flex: none; height: 32px; padding: 0 12px; gap: 5px; font-size: 11.5px; letter-spacing: 0.04em; }
.si-rot-ic { font-size: 15px; line-height: 1; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 28px; height: 28px;
  border: 1px solid var(--line-2);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform 0.15s var(--ease);
}
.swatch:hover { transform: translateY(-2px); }
.swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ink); }
.swatch.custom {
  background-image: conic-gradient(#f66, #fc6, #6f9, #6cf, #96f, #f66);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.swatch.custom input {
  width: 220%; height: 220%;
  border: 0; padding: 0; cursor: pointer; background: transparent;
}

.upload-box {
  border: 1px dashed var(--line-2);
  padding: 18px;
  text-align: center;
  background: var(--bg-soft);
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
  display: block;
}
.upload-box:hover { border-color: var(--ink); }
.upload-box .u-ic { font-size: 18px; color: var(--text-3); }
.upload-box .u-t { margin-top: 8px; font-size: 12.5px; color: var(--ink); }
.upload-box .u-s { margin-top: 4px; font-size: 11px; color: var(--text-3); }
.art-preview { display: flex; align-items: center; gap: 14px; margin-top: 13px; }
.art-preview img { width: 66px; height: 82px; object-fit: cover; border: 1px solid var(--line); }

.opt-group + .opt-group { margin-top: 18px; }
.opt-group h4 {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px;
}
.opt-list { display: flex; flex-wrap: wrap; gap: 9px; }
.opt-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink);
  transition: all 0.2s var(--ease);
  text-align: left;
}
.opt-chip:hover { border-color: var(--ink); }
.opt-chip.active { border-color: var(--ink); background: var(--ink); color: #fff; }
.opt-chip .opt-price { font-size: 10.5px; color: var(--text-3); }
.opt-chip.active .opt-price { color: rgba(255, 255, 255, 0.68); }

.mobile-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: #fff;
  border-top: 1px solid var(--line-2);
  padding: 11px var(--pad) calc(11px + env(safe-area-inset-bottom));
  align-items: center;
  gap: 12px;
  box-shadow: 0 -6px 24px -14px rgba(0, 0, 0, 0.3);
}
.mobile-bar .mb-price { flex: 1; min-width: 0; }
.mobile-bar .mb-price span { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.mobile-bar .mb-price b { font-size: 21px; font-weight: 500; color: var(--ink); }

/* ==========================================================================
   栏目页：材料 / 图库 / 配画商城 / 常见问题 / 买家晒图 / 我的收藏
   ========================================================================== */

.page-hero {
  padding: clamp(44px, 5.6vw, 84px) 0 clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(26px, 3.4vw, 40px); }
.page-hero p { margin-top: 14px; max-width: 640px; font-size: 14px; color: var(--text-2); }

.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-3);
}
.toolbar .search { flex: 1; min-width: 190px; max-width: 320px; height: 40px; }
.toolbar .count { font-size: 12px; color: var(--text-3); margin-left: auto; }

.tabs { display: flex; gap: 26px; flex-wrap: wrap; }
.tab {
  position: relative;
  border: 0; background: none; padding: 0 0 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3); cursor: pointer;
  transition: color 0.2s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); }
.tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); }
.tab .n { margin-left: 6px; font-weight: 400; color: var(--text-3); }

.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 26px 22px; padding-top: 34px; }

/* 材料页：左侧分类子菜单 + 右侧网格（桌面端；手机端隐藏侧栏，用顶部标签） */
.mat-layout { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 30px; align-items: start; }
.mat-main { min-width: 0; }
.mat-side {
  position: sticky;
  top: 100px;                /* 页头高度 + 呼吸位 */
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  background: #fff;
  max-height: calc(100vh - 124px);
  overflow-y: auto;
}
.mat-side h4 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 4px 10px 10px;
}
.side-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  font-size: 13.5px;
  color: var(--text-2);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.side-item:hover { color: var(--ink); background: var(--bg-soft); }
.side-item.active { color: var(--brand-text); font-weight: 600; background: var(--brand-soft); }
.side-item .n { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.side-item.active .n { color: var(--brand-text); }
.mat-item { border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; }
/* 图片区不再 1:1：5:4 更矮，cover 顺手裁掉角样图上下两端的纯底色，
   角样在卡里更满、整张卡少占一截屏幕高度（店主 2026-09-21 要求「不要占用屏幕空间」）。 */
.mat-item .shot { aspect-ratio: 1 / 1; background: var(--bg-soft) center/cover no-repeat; }
/* 玻璃 / 背板这类没有纹理的材料：用底纹 + 大类别文字占位，不留空框 */
.mat-item .shot.plain,
.shop-item .pic.plain {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--tint, #f4f1ea);
}
.mat-item .shot.plain .ph-kind,
.shop-item .pic.plain .ph-kind {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7c7c88;
}
.mat-item .shot.plain.k-glass, .shop-item .pic.plain.k-glass {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.85) 47%, rgba(255, 255, 255, 0) 53%),
    linear-gradient(150deg, #eef5f8 0%, #dfeaf0 60%, #f7fbfc 100%);
}
.mat-item .shot.plain.k-backing, .shop-item .pic.plain.k-backing {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.025) 0 1px, transparent 1px 7px),
    linear-gradient(150deg, #f7f3ea, #e6ddcd);
}
.mat-item .shot.plain.k-mat, .shop-item .pic.plain.k-mat {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0 3px, transparent 3px 8px),
    linear-gradient(150deg, #fbf8f2, #eee7db 62%, #f9f7f2 100%);
}
/* 画芯材质（相纸 / 油画布 / 宣纸这类，店主还没传实拍图时）：细密交叉纤维，
   比 k-mat 更「料子」一点，免得和卡纸占位图看起来一样。 */
.mat-item .shot.plain.k-art, .shop-item .pic.plain.k-art {
  background:
    repeating-linear-gradient(38deg, rgba(120, 105, 80, 0.055) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-52deg, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 6px),
    linear-gradient(150deg, #fbf8f1, #eee6d6);
}
.mat-item .shot.plain.k-outer, .shop-item .pic.plain.k-outer,
.mat-item .shot.plain.k-inner, .shop-item .pic.plain.k-inner {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 2px, rgba(255, 255, 255, 0.35) 2px 5px, transparent 5px 11px),
    linear-gradient(150deg, #efe9df, #ddd3c4);
}
.mat-item .shot.plain.k-mounting, .shop-item .pic.plain.k-mounting,
.mat-item .shot.plain.k-hardware, .shop-item .pic.plain.k-hardware {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0 2px, transparent 2px 7px),
    linear-gradient(150deg, #f2f2f4, #e2e3e7);
}
.mat-item .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mat-item h4 { font-size: 14px; font-weight: 500; }
.mat-item .spec { font-size: 12px; color: var(--text-2); }
/* 图片正下方只有两样：编号 + 尺寸（仅宽/厚）。一行摆平，不再一行一样往下堆。 */
.mat-item .meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 9px;
  font-size: 11.5px;
  color: var(--text-3);
}
.mat-item .meta .code { letter-spacing: 0.02em; }
.mat-item .meta .dims { color: var(--ink); background: var(--bg-soft); padding: 2px 8px; }
.mat-item .foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ===================== 商城 /shop（版式对齐 Sober 的 shop 页） =====================
   与「材料选择」的分工：那一页按分类分块讲规格参数；这一页是商品网格，
   卡片上只有三行 —— 名称 / 编号 / 单价，鼠标悬停时图上浮出操作按钮。 */

/* 页面头：左标题 + 右面包屑，紧凑一行（不用大色块 hero，对齐参考站） */
.shop-head { background: #fff; border-bottom: 1px solid var(--line); }
.shop-head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 22px;
}
.shop-title { display: flex; align-items: baseline; gap: 12px; }
.shop-title .eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand); }
.shop-title h1 { font-size: 28px; font-weight: 300; letter-spacing: 0.01em; }
.shop-crumb { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); }
.shop-crumb a { color: var(--text-3); }
.shop-crumb a:hover { color: var(--ink); }
.shop-crumb i { font-style: normal; opacity: 0.55; }
.shop-crumb span { color: var(--ink); }

/* 工具栏：左分类（对应参考站的 All / Hot / New / Sale）/ 右件数 + 列数 + 筛选 */
.shop-toolbar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding: 20px 0 26px;
  border-bottom: 1px solid var(--line);
}
.shop-tabs { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.shop-tab {
  position: relative; display: inline-flex; align-items: baseline; gap: 5px;
  padding: 0 0 7px; border: 0; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--text-2);
  font-family: inherit; transition: color 0.18s var(--ease);
}
.shop-tab .n { font-size: 11px; color: var(--text-3); }
.shop-tab:hover { color: var(--ink); }
.shop-tab.active { color: var(--ink); font-weight: 600; }
.shop-tab.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand);
}
.shop-controls { display: flex; align-items: center; gap: 16px; }
.shop-count { font-size: 12.5px; color: var(--text-3); }
.shop-cols { display: flex; align-items: center; }
.shop-col {
  width: 28px; height: 28px; border: 0; border-radius: var(--r-xs); background: none;
  color: var(--text-3); cursor: pointer; display: grid; place-items: center;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.shop-col svg { width: 16px; height: 16px; display: block; }
.shop-col:hover { color: var(--ink); background: var(--bg-soft); }
.shop-col.active { color: var(--ink); background: var(--bg-soft); }
.shop-fbtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: #fff; color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.shop-fbtn:hover, .shop-fbtn.active { border-color: var(--ink); color: var(--ink); }
.shop-fbtn .n {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 10.5px; line-height: 16px; text-align: center;
}
/* 筛选面板：从工具栏下沿展开，绝对定位不推内容 */
.shop-fpanel {
  position: absolute; right: 0; top: calc(100% - 6px); z-index: 30;
  width: min(340px, 86vw); padding: 16px 18px 14px;
  display: flex; flex-direction: column; gap: 12px;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  box-shadow: 0 18px 44px rgba(28, 24, 18, 0.13);
}
.shop-fpanel[hidden] { display: none; }
.shop-fpanel .fp-row { display: flex; align-items: flex-start; gap: 10px; }
.shop-fpanel .fp-label { flex: none; width: 34px; font-size: 12px; line-height: 27px; color: var(--text-3); }
.shop-fpanel .chips { gap: 7px; }
.shop-fpanel .fp-foot { display: flex; justify-content: flex-end; padding-top: 11px; border-top: 1px solid var(--line); }

/* 商品网格：列数由 --shop-cols 决定（JS 按视口上限和店主选择算） */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(var(--shop-cols, 6), minmax(0, 1fr));
  gap: 28px 16px;
  padding-top: 28px;
}
.shop-item { display: flex; flex-direction: column; }
.shop-item.clickable { cursor: pointer; }
.shop-item .shot { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-soft); }
.shop-item .shot .pic {
  width: 100%; height: 100%;
  background: var(--bg-soft) center/cover no-repeat;
  transition: transform 0.5s var(--ease);
}
.shop-item.clickable:hover .shot .pic { transform: scale(1.04); }
/* 分类角标（对齐参考站的 NEW / HOT / 折扣角标） */
.shop-item .badge {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  padding: 2px 7px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line-2);
  font-size: 10.5px; letter-spacing: 0.06em; color: var(--text-2);
}
.shop-item .shot .heart {
  position: absolute; right: 8px; top: 8px; z-index: 3;
  width: 30px; height: 30px; background: rgba(255, 255, 255, 0.92);
  opacity: 0; transition: opacity 0.22s var(--ease);
}
.shop-item:hover .shot .heart, .shop-item .shot .heart.on { opacity: 1; }
/* 悬停浮出的操作条（就是参考站 Add to cart 那一条的位置） */
.shop-item .act {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: center; padding: 12px;
  background: linear-gradient(to top, rgba(20, 18, 14, 0.36), rgba(20, 18, 14, 0));
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.shop-item:hover .act, .shop-item:focus-within .act { opacity: 1; transform: none; }
/* 按钮只做样子：点击统一交给整张卡（触屏也能点，不用先 hover 再点按钮） */
.shop-item .act .btn { pointer-events: none; }
.shop-item .shot .heart { pointer-events: auto; }
/* 触屏没有 hover：操作条与收藏常显 */
@media (hover: none) {
  .shop-item .act { opacity: 1; transform: none; }
  .shop-item .shot .heart { opacity: 1; }
}

.shop-item .body { padding-top: 11px; display: flex; flex-direction: column; gap: 3px; text-align: center; }
.shop-item .body h4 {
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shop-item .body .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.03em; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shop-item .body .price { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
/* 没有单价的（画芯材质这类手工条目）用弱色显示规格文案，别像价格一样抢眼 */
.shop-item .body .price.quiet { font-weight: 500; color: var(--text-3); }

/* 二级分类文件夹：选中某个栏目后，在栏目 tab 下方展开一行小文件夹（栏目 → 文件夹 → 素材）。
   一级 tab 在覆盖层上是深色胶囊，文件夹刻意做得更轻 —— 浅描边 + 文件夹图标，
   两层拉开区分，不至于两排"按钮"打架。
   没建文件夹的栏目这一行整个隐藏（hidden），页面高度跟以前完全一致。 */
.gal-folders { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 0 0; }
.gal-folder {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; color: var(--text-2);
  font-size: 13px; font-weight: 600; line-height: 1;
  cursor: pointer; transition: all 0.18s var(--ease);
}
.gal-folder .fi { display: inline-flex; width: 17px; height: 17px; color: var(--text-3); transition: color 0.18s var(--ease); }
.gal-folder .fi svg { display: block; width: 100%; height: 100%; }
.gal-folder .fn { white-space: nowrap; }
.gal-folder .fc { font-size: 11px; font-weight: 500; color: var(--text-3); transition: color 0.18s var(--ease); }
.gal-folder:hover { border-color: var(--line-2); color: var(--ink); }
.gal-folder:hover .fi { color: var(--brand); }
.gal-folder.active { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-text); }
.gal-folder.active .fi, .gal-folder.active .fc { color: var(--brand-text); }
/* 三级文件夹行（r76 / 1027 表行16）：一级 tab → 二级文件夹 → 三级文件夹 → 图片墙。
   三级整体缩进一档、字号更小、底色更浅，一眼看出是"文件夹里的文件夹"，
   而不是又一行并列的按钮。 */
.gal-folders-3 { padding-top: 9px; padding-left: 16px; position: relative; }
/* 左侧一条短竖线，把三级挂在二级下面 */
.gal-folders-3::before {
  content: ''; position: absolute; left: 2px; top: 12px; bottom: 2px; width: 1px;
  background: var(--line); border-radius: 1px;
}
.gal-folders-3 .gal-folder {
  padding: 7px 11px 7px 9px; font-size: 12.5px; gap: 7px;
  background: var(--bg-soft, #fbfaf7); border-color: var(--line);
}
.gal-folders-3 .gal-folder .fi { width: 15px; height: 15px; }
/* 上面刚有文件夹行时，图片墙不用再留 34px 的大间距（用 ~ 是因为三级行夹在中间） */
.gal-folders:not([hidden]) ~ .gal-grid { padding-top: 22px; }
.gal-folders-3:not([hidden]) + .gal-grid { padding-top: 16px; }

@media (max-width: 640px) {
  .gal-folders { gap: 8px; padding-top: 14px; }
  .gal-folder { padding: 7px 11px 7px 9px; font-size: 12.5px; gap: 6px; }
  .gal-folder .fi { width: 15px; height: 15px; }
  .gal-folders-3 { padding-top: 8px; padding-left: 12px; }
  .gal-folders-3 .gal-folder { padding: 6px 10px 6px 8px; font-size: 12px; }
  .gal-folders:not([hidden]) ~ .gal-grid { padding-top: 18px; }
  .gal-folders-3:not([hidden]) + .gal-grid { padding-top: 12px; }
}

/* 图库版式（1009 表 #15：「图片显示为瀑布流自适应图片比例」，参考 linggantu.3d66.com）
   r77：从 CSS 多列（columns）换成「定列 Grid + 每张卡按高度占行」。
   为什么换：Chrome 的多列平衡算法遇到 `break-inside: avoid` 的卡片时，在**某些张数**
   下会多排出一列 —— 线上 17 张时排成 3+3+3+3+3+2 六列，第 6 列整列挂在容器右边外面，
   整页多出 219px 横向滚动条（只在特定张数复现，改 column-width/count/column-fill 都治不好）。
   现在列数只由视口宽度决定（见下方 media query 与 page-gallery.js 的 masonryColumns，
   两边必须同步），任何张数都排不出多余的一列。
   grid-auto-rows: 4px 是隐式行高，卡片用 span N 行拼出真实高度（N 由 JS 按实测高度算）。 */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 0;
  grid-auto-rows: 4px;
  /* 不能 stretch：撑满占行后高度被拉长，下次量到的高度就越算越高 */
  align-items: start;
  padding-top: 34px;
}
.gal-item {
  position: relative; cursor: zoom-in;
  width: 100%;
  margin: 0;
}
.gal-item img { width: 100%; height: auto; display: block; background: var(--bg-soft); transition: opacity 0.3s var(--ease); }
.gal-item:hover img { opacity: 0.88; }
/* 卡片 = 图片 + 图片下方一行（左：作品名 / 右：收藏心）。
   r73（店主 2026-10-22 圈红框）：r64 的「半透明衬底压图底」在浅色作品上
   看起来像浮错位置的白色补丁（30x30、63x57 那几张全中）→ 改为图外独立一行：
   固定行高、白底、名称左爱心右，任何底色的画都不被遮。
   行高固定 + 单行省略，瀑布流里每张卡的标题行都一样齐（9-21 那次「高低不齐」的病根）。
   r64：不再 1:1 裁方图，各比例按原样展示；灯箱里看的仍是原图。 */
.gal-item .shot { position: relative; }
.gal-item .shot img { display: block; }
.gal-item .gal-cap {
  display: flex; align-items: center; gap: 8px;
  height: 34px;
  padding: 7px 2px 0;
}
.gal-item .gal-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gal-item .gal-cap .heart {
  position: static; flex: 0 0 auto;
  width: 28px; height: 28px;
  pointer-events: auto;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transition: color 0.2s var(--ease), background 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.gal-item .gal-cap .heart:hover { background: #fff; color: var(--ink); border-color: var(--ink); transform: scale(1.06); }
.gal-item .gal-cap .heart.on,
.gal-item .gal-cap .heart.on:hover { border-color: transparent; background: var(--bg-soft); color: var(--brand); }

/* 无限滚动的底部状态条 —— 它同时是「哨兵」：一进视口就取下一页，
   所以任何状态下都要占住高度（否则 observer 会因为高度 0 反复触发/不触发） */
.gal-foot {
  min-height: 64px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 22px 0 6px;
  font-size: 12.5px; color: var(--text-3);
}
.gal-foot .spin {
  width: 14px; height: 14px; flex: 0 0 auto;
  border: 2px solid var(--line-2); border-top-color: var(--brand);
  border-radius: 50%;
  animation: gal-spin 0.75s linear infinite;
}
@keyframes gal-spin { to { transform: rotate(360deg); } }
.gal-foot .link-btn { color: var(--brand-text); }

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(18, 18, 22, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.lightbox img { max-width: 100%; max-height: 84vh; object-fit: contain; }
.lightbox .lb-count {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  padding: 6px 14px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.lightbox .lb-info { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; color: rgba(255, 255, 255, 0.8); font-size: 13px; }
.lightbox .lb-info b { color: #fff; font-weight: 500; display: block; font-size: 15px; margin-bottom: 5px; }
/* 配框 CTA 在灯箱里是最重要的一步，做大一点好点 */
.lightbox .lb-use {
  min-width: 260px;
  padding: 15px 34px;
  font-size: 15px;
  margin-top: 14px;
  background: #fff;
  color: var(--ink);
  border-color: transparent;
  font-weight: 600;
}
.lightbox .lb-use:hover { background: var(--brand); color: #fff; }
.lightbox .lb-close {
  position: absolute; top: 22px; right: 26px;
  width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.3);
  background: none; color: #fff; font-size: 22px; cursor: pointer; line-height: 1;
}
.lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 62px; border: 1px solid rgba(255, 255, 255, 0.24);
  background: none; color: #fff; font-size: 20px; cursor: pointer;
}
.lightbox .lb-nav.prev { left: 22px; }
.lightbox .lb-nav.next { right: 22px; }

.ref-card { border: 1px solid var(--line); display: flex; flex-direction: column; background: #fff; }
/* 缩略图按画框真实比例自适应（不再用固定 4:3 裁切），并内缩一圈避免画框直角被卡片圆角吃掉 */
.ref-card .shot {
  position: relative;
  background: var(--bg-soft);
  padding: 16px;
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
}
.ref-card .shot img, .ref-card .shot canvas { width: 100%; height: auto; max-height: 520px; object-fit: contain; display: block; }
.ref-card .body { padding: 15px 16px 17px; }
.ref-card .body h4 { font-size: 13.5px; }
.ref-card .body p { margin-top: 6px; font-size: 12px; color: var(--text-3); }
/* 尺寸行（店主需求：卡片下方要能看到画多大、能直接买）：
   画心尺寸用深色加粗（客户最常看的数），成品外径跟在后面对比色 */
.ref-card .body .ref-size { margin-top: 9px; font-size: 12px; color: var(--text-3); }
.ref-card .body .ref-size b { color: var(--ink); font-weight: 600; }
/* 卡片信息区（r38）：① 图片名称前挂「图」标签，把「图名」和「框名」分清楚（原来混在一行，
   店主和客户都会把框名当成图名）；② 外框编号做成徽标，客户能直接抄给客服 / 回来搜同款框条。 */
.ref-card .body .ref-title { display: flex; align-items: center; gap: 6px; }
.ref-card .body .ref-title .ref-k {
  flex: none; font-size: 10px; line-height: 1.6; letter-spacing: .06em; font-weight: 500;
  color: var(--text-3); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px;
}
.ref-card .body .ref-title .ref-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-card .body .ref-meta {
  margin-top: 6px; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-3);
}
.ref-card .body .ref-meta .ref-frame { min-width: 0; }
.ref-card .body .ref-code {
  flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .02em; color: var(--ink);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px;
  white-space: nowrap;
}
.ref-card .pick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  font-size: 14.5px; color: var(--ink); font-weight: 500;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .pm { position: relative; width: 13px; height: 13px; flex: none; }
.faq-item summary .pm::before, .faq-item summary .pm::after {
  content: ''; position: absolute; background: var(--ink); transition: opacity 0.2s var(--ease);
}
.faq-item summary .pm::before { left: 0; right: 0; top: 6px; height: 1px; }
.faq-item summary .pm::after { top: 0; bottom: 0; left: 6px; width: 1px; }
.faq-item[open] summary .pm::after { opacity: 0; }
.faq-item .ans { padding: 0 0 24px; font-size: 13.5px; line-height: 1.9; color: var(--text); max-width: 860px; }
.faq-item .ans p + p { margin-top: 12px; }

/* align-items: start —— 卡片高度按内容自适应。
   栅格行默认 stretch，同排卡片会被最高的那张（图多）拉到一样高，
   结果只有 1~4 张晒图的卡片下方空出一大块（实测最夸张的一张空了 418px）。 */
.sc-grid { display: grid; align-items: start; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 24px; padding-top: 34px; }
.sc-card { border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.sc-card .who { display: flex; align-items: center; gap: 11px; }
.sc-card .av {
  width: 38px; height: 38px; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none;
}
.sc-card .who b { font-size: 13px; font-weight: 500; color: var(--ink); display: block; }
.sc-card .who span { font-size: 11px; color: var(--text-3); }
.sc-card .stars { color: var(--ink); font-size: 12px; letter-spacing: 2px; }
.sc-card .txt { font-size: 13.5px; line-height: 1.85; color: var(--text); }
.sc-card .pics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sc-card .pics img { aspect-ratio: 1; object-fit: cover; cursor: zoom-in; }

/* 写晒图弹层里「已选图片」的横排缩略图。
   注意容器必须自己带 display:grid —— 只写 grid-template-columns 是不生效的，
   之前就因为这个，手机上一张图会竖着占满一整屏。 */
.sc-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.sc-pick .thumb { position: relative; }
.sc-pick img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-soft);
}
.sc-pick .del {
  position: absolute; top: 3px; right: 3px;
  width: 19px; height: 19px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(18, 16, 14, 0.55); color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer;
  transition: background 0.18s var(--ease);
}
.sc-pick .del:hover { background: rgba(18, 16, 14, 0.85); }
.sc-card .rep {
  margin-top: auto; font-size: 12px; color: var(--text-2);
  border-top: 1px solid var(--line-3); padding-top: 12px;
}
.sc-card .rep b { color: var(--ink); font-weight: 500; }

.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; padding-top: 32px; }
.fav-card { border: 1px solid var(--line); display: flex; flex-direction: column; background: #fff; }
.fav-card .shot { aspect-ratio: 4 / 3; background: var(--bg-soft) center/cover no-repeat; }
.fav-card .body { padding: 15px 16px 17px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.fav-card h4 { font-size: 13.5px; }
.fav-card .sm { font-size: 12px; color: var(--text-3); line-height: 1.7; }
.fav-card .foot { margin-top: auto; padding-top: 12px; display: flex; gap: 8px; }

/* ==========================================================================
   浮层：联系客服 / 弹窗 / 提示
   ========================================================================== */

.side-contact {
  position: fixed;
  right: 0;
  top: 40%;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.side-contact > button {
  width: 42px;
  padding: 15px 0;
  background: var(--ink);
  color: #fff;
  border: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  writing-mode: vertical-rl;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.side-contact > button:hover { background: #000; }
.side-contact .mini-qr { width: 42px; background: #fff; border: 1px solid var(--line-2); padding: 5px; cursor: pointer; }
.side-contact .mini-qr img { width: 100%; }

.contact-pop {
  position: fixed;
  right: 58px;
  top: 40%;
  z-index: 95;
  width: 258px;
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: 0 22px 60px -24px rgba(20, 20, 28, 0.4);
  padding: 22px;
}
.contact-pop h4 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
.contact-pop .row { display: flex; flex-direction: column; gap: 4px; padding: 11px 0; border-bottom: 1px solid var(--line-3); }
.contact-pop .row span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.contact-pop .row b { font-size: 13.5px; font-weight: 500; color: var(--ink); user-select: all; }
.contact-pop .qr { text-align: center; padding-top: 16px; }
.contact-pop .qr img { width: 148px; margin: 0 auto; border: 1px solid var(--line); }
.contact-pop .qr p { margin-top: 9px; font-size: 11.5px; color: var(--text-3); }

.modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  background: rgba(20, 20, 26, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #fff;
  padding: 34px;
  margin: auto;
  max-height: 92vh;
  overflow-y: auto;
}
.modal-card.narrow { max-width: 420px; }
.modal-card.wide { max-width: 940px; }
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  border: 0; background: none;
  font-size: 24px; line-height: 1; color: var(--text-3);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.modal-close:hover { color: var(--ink); }
.modal h3 { font-size: 19px; padding-right: 40px; }
.modal .modal-sub { margin: 11px 0 22px; font-size: 12.5px; color: var(--text-2); }
.modal .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.modal .field + .field { margin-top: 15px; }
.modal .form-grid .field + .field { margin-top: 0; }
.modal .modal-tip { margin-top: 15px; font-size: 11.5px; color: var(--text-3); line-height: 1.7; }
.modal .modal-actions { margin-top: 22px; display: flex; gap: 10px; }
.modal .modal-actions .btn { flex: 1; }

.order-summary {
  padding: 15px;
  background: var(--bg-soft);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text);
  margin-top: 15px;
}
.order-summary b { color: var(--ink); }

.pay-tabs { display: flex; gap: 9px; margin: 18px 0; }
.pay-tab {
  flex: 1; height: 40px;
  border: 1px solid var(--line-2); background: #fff;
  font-size: 12px; letter-spacing: 0.08em; cursor: pointer; color: var(--text-2);
  transition: all 0.2s var(--ease);
}
.pay-tab.active { border-color: var(--ink); background: var(--ink); color: #fff; }

.pay-qr { display: flex; justify-content: center; padding: 22px 0; }
.pay-qr img { width: 208px; height: 208px; border: 1px solid var(--line); }
.pay-qr-empty { font-size: 12.5px; color: var(--text-3); text-align: center; padding: 60px 0; }
.pay-status {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; background: var(--bg-soft);
  font-size: 12.5px; color: var(--text); margin-bottom: 15px;
}
.pay-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; }
.pay-status.paid { color: var(--ok); }
.pay-status.paid .dot { background: var(--ok); }
.pay-report { padding-top: 15px; border-top: 1px solid var(--line-3); }
.pay-report .btn { margin-top: 12px; width: 100%; }

.done-mark {
  width: 54px; height: 54px; margin: 0 auto 20px;
  border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--ink);
}
#orderDoneStage { text-align: center; }
#orderDoneStage .modal-sub { margin-bottom: 18px; }
.done-status {
  padding: 15px; background: var(--bg-soft);
  font-size: 12.5px; color: var(--text); text-align: left; margin-bottom: 20px;
}

.lk-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px dashed var(--line-2); font-size: 12.5px;
}
.lk-row span { color: var(--text-3); }
.lk-row b { color: var(--ink); font-weight: 500; }
.lookup-result { margin-top: 20px; }

.toast {
  position: fixed;
  left: 50%; bottom: 34px;
  transform: translateX(-50%);
  z-index: 400;
  padding: 12px 22px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  max-width: min(90vw, 460px);
  text-align: center;
}

/* ==========================================================================
   响应式
   ========================================================================== */

/* ── 大屏自适应（1080p 全屏 / 2K / 2.5K / 4K）────────────────────────────
   1440px 的容器在 1366~1440 的屏上刚好铺满，但在 2K(2560) 上左右会各空出
   560px 白 —— 内容显得又小又空，店主在 2K 显示器上反馈的正是这个问题。
   这里按屏宽分档放宽「容器上限 + 左右内边距」，把大屏真正用满：
     1600 档 → 1080p 全屏 / 2K@150% (1707)
     1920 档 → 1920 / 2K@125% (2048)
     2400 档 → 2K 原生 (2560)
     3000 档 → 带鱼屏 / 4K
   只放宽宽度与留白，不动字号、不改任何栅格列数，≤1599 的屏幕完全不受影响。 */
@media (min-width: 1600px) {
  :root { --maxw: 1520px; --pad: clamp(28px, 2.6vw, 60px); }
}
@media (min-width: 1920px) {
  :root { --maxw: 1780px; --pad: clamp(30px, 2.6vw, 68px); }
  /* 商城页/订单卡片的 3 列栅格在大屏上每列会到 590px 宽，卡片里的画框
     只占中间一块、四周又空出来 —— 改 4 列，列宽回到 ~470，画框正好占满。 */
  .grid-3 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 2400px) {
  :root { --maxw: 2080px; --pad: clamp(34px, 2.6vw, 80px); }
}
@media (min-width: 3000px) {
  :root { --maxw: 2600px; --pad: clamp(40px, 2.4vw, 96px); }
}

/* 大屏的纵向空间同样宽裕：效果图上限从 420 抬到 620（2K 上不再是一张小图）。
   左栏（效果图 + 画心尺寸 + 价格卡）给一个宽度上限 —— 效果图的宽度本来就由
   高度决定，左栏再宽也只是变成两侧空白；把多出来的宽度全给右栏，
   框条/内线条/卡纸就能多排一列，大屏才真正划算。 */
@media (min-width: 1600px) {
  #preview { max-height: clamp(300px, calc(100vh - 400px), 720px); }
  /* 大屏也保持五五分（r50 统一），只把两侧的间隙放宽一点。
     原来这里是 min(640px, 40%) —— 2560 上左栏被锁死在 640px、只占 33%，
     效果图按画布像素 1:1 撑满 620px 高，再多给宽度已经没用（会两侧留白），
     多出来的宽度全给右栏才对：框条/内线条/卡纸能多排一列。
     现在一半 = 967px 已远超 620 的上限，所以「锁左栏」这一步在大屏是多余的。 */
  .cfg-cols { gap: 34px; }
}

/* 上面几档「只放宽宽度、不动栅格列数」针对的是卡片类栅格（列宽还要放文字）。
   图库是瀑布流（columns），列宽 400px+ 时一张图占掉半屏、看着又大又空，
   所以 2K 及以上再加一列（只动 .gal-grid 这一个选择器）。 */
@media (min-width: 1600px) { .gal-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

@media (max-width: 1240px) {
  .grid-5 { grid-template-columns: repeat(4, 1fr); }
  .gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1.3fr repeat(3, 1fr); gap: 30px; }
  /* r59 导航居中、品牌块独占左侧 1fr 后，1041~1240 这一档左列有
     (容器宽-导航)/2 ≈ 270px+，完整品牌块 206px 放得下 —— 店名恢复显示
     （r39~r58 导航占左缘时这块被挤到只剩 0.x px，当时只能留印章）。
     右上工具区的宽度不够，仍收进抽屉菜单（抽屉里同样有这三项）。 */
  .head-tools { display: none; }
  /* 汉堡放右列右缘（品牌占左、导航居中，右缘是唯一空位） */
  .hamburger { display: flex; position: static; grid-column: 3; grid-row: 1; justify-self: end; }
}

@media (max-width: 1040px) {
  /* 单栏时改成 block 排布：sticky 的包含块就是整个配置区（最标准、兼容性最好的场景）。
     .stage 的 DOM 位置由 page-custom.js 的 syncStageHome() 提到这一层，
     不再靠 `display: contents` 让它变成栅格项 —— WebKit（iPhone 的 Safari / 微信内置浏览器）
     对「display:contents + 栅格」的组合支持有缺陷：子元素顺序错乱（画心尺寸卡跑到效果图上面）、
     sticky 失效。改成真实 DOM 位置后，桌面端行为完全不变，窄屏则是最稳的 sticky 场景。 */
  .cfg-cols { display: block; }
  .cfg-cols > * + * { margin-top: 22px; }
  /* 材料页：窄屏收起左侧子菜单，分类回到顶部标签 */
  .mat-layout { grid-template-columns: 1fr; gap: 0; }
  .mat-side { display: none; }
  /* 解除 min-width:auto，否则内容把容器撑到 600px+ 横向溢出 */
  .stage, #cfgLeft, #cfgLeftSize { min-width: 0; }
  /* 画心尺寸卡片：窄屏标题与输入行分两行，别硬挤成一行再折行 */
  .si-title { max-width: none; }
  .size-inline { padding: 12px 14px 13px; }
  .size-inline .size-grid { flex: 1 1 100%; }
  .price-card { position: static; }
  .grid-5, .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
}

/* 页头：导航整组收进抽屉，标题栏只留汉堡 + LOGO。
   （原来挂在 980 断点；r39 导航改靠左后，1041~1240 那档左列已装不下 7 项导航，
   提前到 1040 —— 与「配框页单栏」同一个断点，好记。） */
@media (max-width: 1040px) {
  .head-nav, .head-tools { display: none; }
  /* 手机端横滑导航条（需求1） */
  .m-quicknav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px var(--pad) 12px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .m-quicknav::-webkit-scrollbar { display: none; }
  .m-quicknav .qn-item {
    flex: none;
    height: 32px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
  }
  .m-quicknav .qn-item:hover { border-color: var(--ink); color: var(--ink); }
  .m-quicknav .qn-item.active { background: var(--grad-ink); border-color: transparent; color: #fff; }
  .site-header .container.header-inner {
    display: flex;
    justify-content: center;
    min-height: 66px;
  }
  /* position 要显式写回 absolute：≤1240 那档把汉堡挪到了右列（position:static），
     这里标题栏只留汉堡 + LOGO，汉堡回到左缘 */
  .hamburger { position: absolute; left: var(--pad); }
  .brand { position: static; transform: none; z-index: auto; }
  /* 导航整体收进抽屉，标题栏有位置了，店铺名恢复显示（≤1240 那档只留印章） */
  .brand-text { display: flex; }
  .topbar-left { display: none; }
  .topbar .container { justify-content: center; }
  .page-hero { padding-top: 34px; }
}

@media (max-width: 860px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  /* r77：卡片间距改由 JS 占行自带（span 里多算一个 gap），这里不再用 margin-bottom */
  .mat-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
  .modal .form-grid { grid-template-columns: 1fr; }
  .modal-card { padding: 26px 20px; }
  .side-contact { display: none; }
}

@media (max-width: 640px) {
  :root { --pad: 18px; }
  body { font-size: 13.5px; }
  .grid-5, .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  /* 配画商城的卡片比其他栅格多一行尺寸 + 一个主按钮，两列时（卡片只剩 ~160px）
     三个按钮会竖排成一列、尺寸也折成两行 —— 这页在手机上一律单列。 */
  #refGrid { grid-template-columns: 1fr; }
  .frame-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .size-grid { grid-template-columns: 1fr auto 1fr; }
  .size-grid .qty { grid-column: 1 / -1; width: 100%; }
  .sub-ctrl, .sub-ctrl.cols-3, .sub-ctrl.one-col { grid-template-columns: 1fr; }
  .seg { width: 100%; }
  .seg-btn { flex: 1 1 auto; padding: 0 10px; }
  /* 图库卡片底部那一行（名字 + 收藏心），窄卡上整体收小一档，
     免得名字被右侧的按钮挤掉太多字 */
  .gal-item .gal-cap { height: 30px; padding: 5px 2px 0; gap: 6px; }
  .gal-item .gal-cap .heart { width: 26px; height: 26px; }
  .gal-item .gal-name { font-size: 12px; }
  /* 配框页「内线条位置」是三个较长的选项，390px 宽横排会折成两行不好读 —— 改竖排。
     只限定 #cfgRight：common.js 的登录/注册切换也用 .seg，不要被波及。 */
  #cfgRight .seg { flex-direction: column; }
  #cfgRight .seg-btn { flex: 0 0 auto; height: 40px; padding: 0 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  #cfgRight .seg-btn:last-child { border-bottom: 0; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .foot-bar { flex-direction: column; align-items: center; }
  /* 需求6-c：效果图吸顶固定上半屏，参数面板从它下方滚过。
     页头（含横滑导航条）现在也是常驻的，吸顶位置必须贴它的下沿 ——
     手机端页头是「LOGO 栏 + 导航条」两层约 122px，写死 66px 会被页头压住大半。
     --head-h 由 common.js 按页头实际高度实时写入，兜底 66px。 */
  .stage {
    position: sticky;
    top: var(--head-h, 66px);
    z-index: 40;
    padding: 10px 0 12px;
    box-shadow: 0 12px 26px -18px rgba(24, 24, 32, 0.4);
  }
  .stage-inner { gap: 8px; }
  #preview { max-height: 26vh; width: auto; max-width: 100%; }
  .stage-empty { aspect-ratio: auto; width: 100%; padding: 22px 12px; }
  .stage-cta { display: none; }   /* 「开始定制」按钮和提示在吸顶模式下多余 */
  /* 装裱方案预设：吸顶区放不下两排，改单排横滑 */
  .mode-row {
    margin-top: 0;
    gap: 7px;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mode-row::-webkit-scrollbar { display: none; }
  .mode-row > span { white-space: nowrap; flex: none; }
  /* 上传按钮：手机端收窄，小字与「去图库挑一张」在按钮下方一行 */
  .stage-art-row { gap: 8px; }
  .stage-art-upload { height: 44px; padding: 0 18px; font-size: 12.5px; white-space: nowrap; }
  .stage-art-meta { gap: 10px; }
  .stage-art-row.has { gap: 10px; padding: 8px 12px; }
  /* 需求5：自动计费明细取消，只保留合计（底部固定结算条里有总价） */
  .mobile-bar { display: flex; }
  body { padding-bottom: 76px; }
  .sc-grid { grid-template-columns: 1fr; }
  .fav-grid { grid-template-columns: 1fr; }
  .ref-card .shot { padding: 12px; }
  .lightbox { padding: 16px; }
  .lightbox .lb-nav { width: 38px; height: 52px; }
  .lightbox .lb-nav.prev { left: 6px; }
  .lightbox .lb-nav.next { right: 6px; }
}

@media (max-width: 400px) {
  .brand-text b { font-size: 13.5px; }
  .frame-grid { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  .topbar, .site-header, .site-footer, .side-contact, .mobile-bar, .drawer-menu { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   主题层 v2 —— 现代电商风
   做法：覆盖层（追加在文件末尾），只改「皮」不改「骨」。
   布局规则（grid / sticky / fixed / 断点）一律不动，避免破坏已通过的巡检。
   视觉权重来自：主色只给「要你点的地方」、分级阴影、圆角、悬浮位移、角标。
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------------------------- A. 排版基调 ---------------------------- */

body { color: var(--text); }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; }
h1 { letter-spacing: -0.03em; }

/* 小标签：改成主色小竖条 + 加粗，替代原来几乎看不见的灰字 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
}

/* 通用角标：新品 / 热卖 / 折扣 */
.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge.gold { background: var(--gold-soft); border-color: #f0e0bb; color: #8f6412; }
.badge.ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.badge.solid { background: var(--grad-brand); border-color: transparent; color: #fff; }

/* ---------------------------- B. 按钮 ---------------------------- */

.btn {
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--grad-ink);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--sh-sm);
  transition: transform 0.18s var(--ease), box-shadow 0.22s var(--ease), background 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.btn:hover {
  background: var(--grad-ink);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.btn:active { transform: translateY(0); box-shadow: var(--sh-xs); }

/* 主 CTA：整站只有「立即购买 / 提交」这类用主色，形成唯一的视觉焦点 */
.btn.primary,
.btn.buy {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--sh-brand);
}
.btn.primary:hover,
.btn.buy:hover { filter: brightness(.94); box-shadow: 0 12px 28px rgba(224, 86, 42, 0.36); }

.btn.ghost {
  background: #fff;
  border-color: var(--line-2);
  color: var(--ink);
  box-shadow: none;
}
.btn.ghost:hover {
  background: #fff;
  border-color: var(--brand);
  color: var(--brand-ink);
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}

.btn.outline { border-color: var(--ink); border-radius: var(--r-pill); box-shadow: none; }
.btn.outline:hover { background: var(--ink); color: #fff; }

.btn.sm { font-size: 11.5px; font-weight: 600; }
.btn[disabled], .btn:disabled { opacity: 0.45; transform: none !important; box-shadow: none !important; cursor: not-allowed; }

/* 导航文字链接：选中态用主色下划线，不再是"几乎看不出选中" */
.link-btn { position: relative; font-weight: 500; }
.link-btn.active { color: var(--ink); font-weight: 600; }
.link-btn.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
}

/* ------------------------ C. 顶栏 / 页头 ------------------------ */

.topbar {
  background: var(--grad-ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
}
.topbar a, .topbar button { color: rgba(255, 255, 255, 0.78); }
.topbar a:hover, .topbar button:hover { color: #fff; }
.topbar .sep { background: rgba(255, 255, 255, 0.18); }

/* 顶栏轮播位：活动 / 公告 / 优惠券（店主 2026-09-25 需求；内容在后台「店铺设置 → 顶栏内容」）。
   一行 = 类型徽标 + 文案（可带链接）+ 指示点；换条靠 .tn-row 淡出淡入，不做叠放。 */
.topbar-notes { display: flex; align-items: center; gap: 9px; min-width: 0; }
.topbar-notes .tn-row {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  opacity: 1; transition: opacity 0.24s var(--ease);
}
.topbar-notes .tn-row.tn-out { opacity: 0; }
.topbar-notes .tn-badge {
  flex: none; padding: 2px 7px; border-radius: var(--r-pill); line-height: 1.5;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.92);
}
/* 三种类型的徽标底色：活动=品牌色（醒目）、优惠券=金色、公告=中性 —— 一眼分清这条是什么 */
.topbar-notes .tn-badge.k-promo { background: var(--grad-brand); color: #fff; }
.topbar-notes .tn-badge.k-coupon { background: rgba(192, 138, 46, 0.92); color: #fff; }
.topbar-notes .tn-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; letter-spacing: 0;
}
/* 可点的那条：下划线压淡到几乎融进黑底（原来 .35 太重、整句像被红线划了），
   悬停时才实心 —— 既看得出能点，又不抢文字本身的注意力。 */
.topbar-notes a.tn-text { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.22); padding-bottom: 1px; }
.topbar-notes a.tn-text:hover { border-bottom-color: rgba(255, 255, 255, 0.85); }
/* 没配任何条目时的回落：与原「发货说明」一行完全一致 */
.topbar-notes .tn-plain {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.68);
}
.topbar-notes .tn-dots { flex: none; display: flex; align-items: center; gap: 4px; margin-left: 2px; }
.topbar-notes .tn-dot {
  width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.3);
  transition: background 0.24s var(--ease);
}
.topbar-notes .tn-dot.on { background: rgba(255, 255, 255, 0.9); }
@media (prefers-reduced-motion: reduce) { .topbar-notes .tn-row, .topbar-notes .tn-dot { transition: none; } }

/* ≤1040：顶栏改为「只留轮播」。原来这一档是整块 .topbar-left 隐藏、右侧链接居中，
   现在反过来 —— 手机端本来就只有顶栏这一处能看见活动/公告，右侧 4 个链接在抽屉与
   横滑导航里都有。**顶栏高度仍是 42px**，不额外挤占手机端竖向空间。 */
@media (max-width: 1040px) {
  .topbar-left { display: block; flex: 1 1 auto; min-width: 0; }
  .topbar .container { justify-content: flex-start; gap: 12px; }
  .topbar-right { display: none; }
  .topbar-notes .tn-dots { display: none; }
}

.site-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-xs);
}
.brand-mark {
  border-radius: var(--r-sm);
  background: var(--grad-ink);
  box-shadow: var(--sh-sm);
}
.brand:hover .brand-mark { background: var(--grad-brand); }
.brand-mark, .brand-text b, .brand-text i { transition: all 0.22s var(--ease); }

.hamburger { border-radius: var(--r-xs); border-color: var(--line-2); }
.hamburger:hover { border-color: var(--brand); }

/* 抽屉菜单 */
.drawer-menu .sheet, .drawer-menu .drawer-card { box-shadow: var(--sh-lg); }
.drawer-menu a { border-radius: var(--r-xs); }
.drawer-menu a.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }

/* ---------------------- D. 页面横幅 / hero ---------------------- */

.page-hero {
  background:
    radial-gradient(900px 320px at 12% -20%, rgba(224, 86, 42, 0.08), transparent 62%),
    radial-gradient(700px 300px at 88% -10%, rgba(192, 138, 46, 0.09), transparent 60%),
    var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { letter-spacing: -0.03em; }
.page-hero p { color: var(--text); }

.hero {
  background:
    radial-gradient(1000px 420px at 18% -10%, rgba(224, 86, 42, 0.08), transparent 60%),
    radial-gradient(800px 380px at 92% 0%, rgba(192, 138, 46, 0.08), transparent 62%),
    var(--bg-soft);
}

/* ------------------------ E. 区块标题 ------------------------ */

.section-head .h2 { font-weight: 600; letter-spacing: -0.025em; }
.section-head p { color: var(--text-2); }
.more-link { color: var(--brand-text); font-weight: 600; }

/* ------------------------ F. 卡片 / 面板 ------------------------ */

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--sh-xs);
  overflow: hidden;
}
.panel-head {
  background: linear-gradient(180deg, #fdfaf5, #f6f2ec);   /* 暖色标题条，不再用白底 */
  border-bottom: 1px solid var(--line);
  padding-left: 16px;
  padding-right: 16px;
}
.panel-head b, .panel-head span { font-weight: 600; color: var(--ink); }
.panel-body { padding: 16px; }
.panel-head .sub { font-size: 12.5px; color: var(--text-2); }
.panel-head .caret { color: var(--brand); }

/* ------------------------ G. 价格卡（核心 CTA）------------------------ */

.price-card {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  overflow: hidden;
}
.price-card::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--grad-brand);
}
.price-top { padding: 18px 18px 4px; }
.price-top .lbl {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-3);
  text-transform: uppercase;
}
.price-top .val {
  color: var(--brand);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.price-top .val small { color: var(--text-3); font-size: 12px; font-weight: 500; margin-left: 6px; }
.price-actions { padding: 14px 18px 4px; gap: 10px; }

/* 下单 CTA = 全站最强的一个动作，用主色实心；旁边「保存配置单」留白底做次级 */
.price-actions .btn:not(.ghost),
.stage-cta .btn:not(.ghost),
.mobile-bar .btn:not(.ghost) {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--sh-brand);
}
.price-actions .btn:not(.ghost):hover,
.stage-cta .btn:not(.ghost):hover,
.mobile-bar .btn:not(.ghost):hover {
  filter: brightness(.94);
  box-shadow: 0 12px 28px rgba(224, 86, 42, 0.36);
}
.price-lines { border-top: 1px dashed var(--line-2); margin-top: 14px; }
.quote-line { border-bottom: 1px solid var(--line-3); }
.quote-line .lbl { color: var(--text-2); }
.quote-line .val { color: var(--ink); font-weight: 600; }
.quote-line.discount .val { color: var(--brand-text); }
.price-foot {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: 11.5px;
}

/* ------------------------ H. 图鉴卡片 ------------------------ */

.tile {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sh-xs);
  transition: transform 0.18s var(--ease), box-shadow 0.22s var(--ease), border-color 0.18s var(--ease);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.tile.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft), var(--sh-sm);
}
.tile .t-name { font-weight: 600; color: var(--ink); }
.tile .t-price { color: var(--brand-text); font-weight: 600; }
.tile .tick {
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--sh-xs);
}
.tile .t-tag, .frame-card .frame-tag {
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* 内线条 / 卡纸卡片左上角角标（外框卡用 .frame-tag，两者定位方式一致） */
.tile .t-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 2px 8px;
  background: var(--grad-brand);
  color: #fff;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  box-shadow: var(--sh-xs);
}

.frame-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform 0.18s var(--ease), box-shadow 0.22s var(--ease), border-color 0.18s var(--ease);
}
.frame-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.frame-card.active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--sh-sm); }
.frame-card .frame-name { font-weight: 600; color: var(--ink); }
.frame-card .frame-price { color: var(--brand-text); font-weight: 700; }
.frame-card .frame-size { color: var(--text-2); }
.frame-card .frame-meta { color: var(--text-3); }
.frame-card .frame-tag { background: var(--grad-brand); color: #fff; }

.heart { border-radius: var(--r-pill); }

/* 选项卡：胶囊样式需要补齐横向内边距，否则深色背景会瘪成椭圆色块；
   同时关闭底部下划线（::after），避免从胶囊下缘露出 */
.tab, .seg { border-radius: var(--r-pill); font-weight: 500; }
.tabs { gap: 10px; }
.tab {
  padding: 8px 16px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.tab:hover { background: var(--bg-soft); }
.tab.active { background: var(--grad-ink); color: #fff; }
.tab.active::after { display: none; }
.tab .n { font-size: 11px; }
.tab.active .n { color: rgba(255, 255, 255, 0.72); }

/* ------------------------ I. 材料 / 图库 / 晒图 / 收藏 ------------------------ */

.mat-item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sh-xs);
  transition: transform 0.18s var(--ease), box-shadow 0.22s var(--ease);
}
.mat-item:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.mat-item .shot { border-bottom: 1px solid var(--line-3); }
.mat-item .spec, .mat-item .spec.mono { color: var(--text-2); }

.gal-item img { border-radius: var(--r); box-shadow: var(--sh-xs); }
.gal-item:hover img { box-shadow: var(--sh-md); }

.sc-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--sh-xs);
  transition: transform 0.18s var(--ease), box-shadow 0.22s var(--ease);
}
.sc-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.sc-card .av { border-radius: var(--r-pill); background: var(--grad-brand); }
.sc-card .stars { color: var(--gold); }

.fav-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform 0.18s var(--ease), box-shadow 0.22s var(--ease);
}
.fav-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }

.ref-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform 0.18s var(--ease), box-shadow 0.22s var(--ease);
}
.ref-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: var(--sh-xs);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.faq-item:hover, .faq-item.open { border-color: var(--brand-line); box-shadow: var(--sh-sm); }
.faq-item .q, .faq-item b { font-weight: 600; color: var(--ink); }

/* 卡片皮肤是覆盖层后加的，而基础样式是 `.faq-item summary { padding: 22px 0 }`、`.ans { padding: 0 0 24px }`
   —— 只有纵向留白。没有边框时贴边不违和，一旦画上边框，问题文字就紧贴左边框、
   ＋/－ 顶死在右边框与圆角上（实测 1536 视口：卡片内缘 101/1435，文字左缘也是 101、
   图标右缘也是 1435，padL/padR 均为 0；顺带图标还会跟右侧「联系客服」浮标挤在一起）。
   横向留白补在覆盖层里，原始 hairline 版式不受影响。 */
.faq-item summary { padding: 22px 24px; }
.faq-item .ans { padding: 0 24px 24px; }

/* 窄屏：外面 --pad 只剩 18px，卡内再留 24px 会把正文挤到 250px 以下 */
@media (max-width: 640px) {
  .faq-item summary { padding: 18px 16px; }
  .faq-item .ans { padding: 0 16px 20px; }
}

/* 步骤条 */
.steps .step, .step { border-radius: var(--r); }
.step .n, .step b { color: var(--brand-text); font-weight: 700; }

/* ------------------------ J. 芯片 / 表单 ------------------------ */

.chip {
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: #fff;
  font-weight: 500;
  transition: all 0.18s var(--ease);
}
.chip:hover { border-color: var(--brand); color: var(--brand-ink); }
.chip.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: var(--sh-xs);
}

.opt-chip {
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: #fff;
  transition: all 0.18s var(--ease);
}
.opt-chip:hover { border-color: var(--brand); }
.opt-chip.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.opt-chip.active b, .opt-chip.active span { color: var(--brand-ink); }

.swatch { border-radius: var(--r-xs); }
.swatch.active, .swatch.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); }

.upload-box {
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--bg-soft);
  transition: all 0.2s var(--ease);
}
.upload-box:hover { border-color: var(--brand); background: var(--brand-soft); }
.upload-box .u-ic { color: var(--brand-text); font-weight: 600; }

.field input, .field select, .field textarea,
.search, .input-suffix, .toolbar input, .toolbar select {
  border-radius: var(--r-sm);
  border-color: var(--line-2);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus,
.search:focus, .input-suffix:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  outline: none;
}

/* ------------------------ K. 弹窗 / 抽屉 / 提示 ------------------------ */

.modal-card {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--line);
}
.modal-close { border-radius: var(--r-pill); }
.modal-close:hover { background: var(--brand-soft); color: var(--brand-ink); }

.lightbox { background: rgba(18, 16, 14, 0.88); }
.lightbox img { border-radius: var(--r-sm); }
.lightbox .lb-nav { border-radius: var(--r-pill); }

.toast {
  border-radius: var(--r-pill);
  background: var(--grad-ink);
  color: #fff;
  box-shadow: var(--sh-lg);
  font-weight: 500;
}

.pay-tab { border-radius: var(--r-pill); }
.pay-tab.active { background: var(--grad-ink); color: #fff; }
.pay-report { border-radius: var(--r); }

/* 订单查询结果 */
.lookup-result { border-radius: var(--r); border-color: var(--line); box-shadow: var(--sh-xs); }

/* ------------------------ L. 页脚 / 吸底栏 ------------------------ */

.site-footer {
  background: var(--grad-ink);
  color: rgba(255, 255, 255, 0.66);
  border-top: 0;
  margin-top: clamp(70px, 9vw, 130px);
}
.site-footer .eyebrow { color: var(--brand); }
.site-footer b, .site-footer h4 { color: #fff; }
.site-footer a { color: rgba(255, 255, 255, 0.68); }
.site-footer a:hover { color: #fff; }
.site-footer .brand-mark { background: var(--grad-brand); }
.site-footer .brand-text b { color: #fff; }
.site-footer .brand-text i { color: rgba(255, 255, 255, 0.5); }
.site-footer .foot-about p { color: rgba(255, 255, 255, 0.6); }
.foot-grid { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.foot-bar { color: rgba(255, 255, 255, 0.5); }
.foot-bar a { color: rgba(255, 255, 255, 0.55); }

/* 手机端吸底价格条 */
.mobile-bar {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(160%) blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(28, 24, 20, 0.08);
}
.mobile-bar .mobile-left b, .mobile-bar #mbTotal {
  color: var(--brand);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.mobile-bar .btn { box-shadow: var(--sh-brand); }

/* 悬浮客服 / 侧栏联系 */
.side-contact .sc-btn, .contact-pop { border-radius: var(--r); box-shadow: var(--sh-md); }

/* ------------------------ M. 细节收尾 ------------------------ */

::selection { background: var(--brand); color: #fff; }
a:hover { color: var(--brand-ink); }

/* 滚动条（桌面）——细节但很影响"精致感" */
@media (hover: hover) and (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
  *::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }
}

/* 尊重「减少动效」偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .btn:hover, .tile:hover, .frame-card:hover, .mat-item:hover, .sc-card:hover, .fav-card:hover, .ref-card:hover { transform: none; }
}

/* ------------------------ N. 内容页（关于我们 / 高端定制 / 批量定制 / 联系我们）------------------------ */
/* 四个页面共用 page-content.js + 下面这套 .pg-* 版式，改这里会同时改四页。
   版式基调：正文单列（上限 800px，再宽一行 40 多字读不动）+ 右侧 sticky 侧栏
   （联系方式 / 目录 / CTA）。sticky 靠 .pg-layout 的 align-items:start 生效 ——
   去掉它侧栏会被拉伸成整列高，sticky 就没有可滑的行程、看起来像没生效。 */

.pg-chips { display: flex; flex-wrap: wrap; gap: 10px; padding-top: clamp(20px, 2.4vw, 30px); }
.pg-chip {
  height: 34px; padding: 0 16px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: var(--text);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease);
}
.pg-chip:hover { border-color: var(--ink); color: var(--ink); }
.pg-chip.on { background: var(--grad-ink); border-color: transparent; color: #fff; }

.pg-layout {
  display: grid;
  /* 第一列给上限而不是 1fr：容器在 2K/4K 下会放宽到 2000px+，正文不设限就会排成一行五六十字 */
  grid-template-columns: minmax(0, 800px) 296px;
  justify-content: space-between;
  align-items: start;
  gap: clamp(30px, 3.4vw, 56px);
  padding-top: clamp(28px, 3.2vw, 50px);
}
.pg-main { min-width: 0; }

.pg-sec { scroll-margin-top: calc(var(--head-h, 66px) + 24px); }
.pg-sec + .pg-sec { margin-top: clamp(40px, 4.4vw, 66px); }
.pg-h { font-size: clamp(19px, 2.1vw, 25px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }

.pg-text { margin-top: 16px; }
.pg-text p { font-size: 14px; line-height: 2; color: var(--text); }
.pg-text p + p { margin-top: 14px; }
.pg-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pg-list li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.9; color: var(--text); }
.pg-list li::before {
  content: ''; position: absolute; left: 2px; top: 11px;
  width: 5px; height: 5px; border-radius: 999px; background: var(--brand);
}

.pg-steps { margin-top: 20px; border-top: 1px solid var(--line); }
.pg-step { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.pg-step .n {
  flex: none; padding-top: 3px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--brand-text);   /* 小字用 --brand 在白底只有 3.79:1，这里取加深过的那个令牌 */
}
.pg-step .tx b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pg-step .tx p { margin-top: 7px; font-size: 13.5px; line-height: 1.9; color: var(--text-2); }

.pg-cards { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pg-card { border: 1px solid var(--line); border-radius: var(--r); padding: 20px 20px 22px; background: #fff; }
.pg-card .tx b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.pg-card .tx p { margin-top: 8px; font-size: 13px; line-height: 1.9; color: var(--text-2); }

/* 侧栏：联系方式 / 目录 / CTA */
.pg-side { position: sticky; top: calc(var(--head-h, 66px) + 24px); display: flex; flex-direction: column; gap: 16px; }
.pg-box { border: 1px solid var(--line); border-radius: var(--r); padding: 20px; background: #fff; }
.pg-box-h { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.pg-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pg-toc a { font-size: 13px; color: var(--text-2); }
.pg-toc a:hover { color: var(--brand-text); }
.pg-info-rows { display: flex; flex-direction: column; gap: 12px; }
.pg-info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 13px; }
.pg-info-row .k { flex: none; color: var(--text-3); }
.pg-info-row .v { color: var(--ink); font-weight: 600; text-align: right; word-break: break-word; }
.pg-info-tip { font-size: 13px; line-height: 1.9; color: var(--text-2); }
.pg-box-foot { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.pg-cta-tip { margin: 0 0 14px; font-size: 13px; line-height: 1.8; color: var(--text-2); }

.pg-notice { border: 1px dashed var(--line-2); border-radius: var(--r); padding: 26px 24px; }
.pg-notice p { font-size: 14px; line-height: 1.9; color: var(--text-2); }

@media (max-width: 1240px) {
  .pg-layout { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 1040px) {
  /* 窄屏没有并排空间：侧栏落到正文下方（与配框页单栏同一个断点，好记）。
     目录在这一档没意义（正文就在眼前），直接收掉。 */
  .pg-layout { display: flex; flex-direction: column; gap: 34px; }
  .pg-side { position: static; }
  .pg-toc { display: none; }
  /* 联系页反过来：客户进这一页就是来拿电话/微信的，联系方式压在几段文字后面等于藏起来 */
  body[data-page="contact"] .pg-layout { flex-direction: column-reverse; }
}
@media (max-width: 640px) {
  .pg-chip { height: 32px; padding: 0 13px; font-size: 12.5px; }
  .pg-chips { gap: 8px; }
  .pg-cards { grid-template-columns: 1fr; }
  .pg-step { gap: 12px; padding: 16px 0; }
  .pg-text p, .pg-list li { font-size: 13.5px; line-height: 1.95; }
}

/* 价目表（.pg-price）：一行一档 —— 档位在左、说明居中、价格右对齐加粗。
   用在「图片高清处理」的处理费上（section style: price），后台可改。

   两个坑：
   1. 价格要用 --brand-text 而不是 --brand：白底上 --brand 当文字色对比度不够（同 .pg-step .n）。
   2. 三列必须用 grid + 显式 grid-column，不能靠自动流：店主删掉某一档的「说明」后，
      只剩两个子元素时自动流会把价格顶到中间列去，价格列的竖线就歪了。
      显式写 grid-column 以后，缺了 .d 也还是落在第 3 列。 */
.pg-price { margin-top: 20px; border-top: 1px solid var(--line); }
.pg-price-row {
  display: grid;
  grid-template-columns: minmax(120px, 176px) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.pg-price-row .k { grid-column: 1; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pg-price-row .d { grid-column: 2; font-size: 13px; line-height: 1.7; color: var(--text-3); }
.pg-price-row .v {
  grid-column: 3; justify-self: end;
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--brand-text); white-space: nowrap; font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  /* 窄屏放不下三列：档位与价格同一行，说明退到第二行独占整行 */
  .pg-price-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 0; }
  .pg-price-row .k { grid-column: 1; grid-row: 1; }
  .pg-price-row .v { grid-column: 2; grid-row: 1; font-size: 18px; }
  .pg-price-row .d { grid-column: 1 / -1; grid-row: 2; }
}

/* ══════════════════════════════════════════════════════════════════════════
   r52 —— 「配框选项」合并总栏目；r55 —— 小节标题收进一排标签
   店主原话：「右侧下方的栏目全部移到一个栏目方便操作」（r52，合并成一张卡）
            「移到一排展示」（r55，5 个小节标题收进顶部一排胶囊标签）。

   结构（由 page-custom.js 的 configPanel() 生成）：
     .panel.config-panel
       .panel-head            标题条（沿用原 .panel-head 皮肤）
       .panel-body
         .sec-jump            ← 5 个小节标签（胶囊自带状态字，点谁展开谁，再点收起）
         .sec-body[data-sec]  ← 只有当前展开的小节才存在（r55 起不再有 .sec/.sec-head 行）

   两条硬约束：
   1. **单选展开**（state.openSection）—— 材料区一个「选外框」就 700~1700px 高，
      多节同开等于回到合并前的长列表，标签排也失去意义。
   2. `.sec-body` 里的内容是各 PanelBody() 原样搬来的，这些内容的左右留白
      **原来全靠 `.panel-body` 的 padding 撑**（材料网格自身没有水平留白），
      所以 `.sec-body` 必须补回同样的 16px，不能为了「占满」把它去掉。
   ══════════════════════════════════════════════════════════════════════════ */

/* 总栏目自身的收口：标题条下面直接接快捷入口条，内边距交给 .sec-jump */
.config-panel .panel-body { padding: 0; }

/* ------------------------ 快捷入口条 ------------------------ */
.sec-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.sec-jump-btn {
  display: inline-flex;
  /* ⚠ 必须 center 不能 baseline：32px 定高 + baseline 会把文字顶到贴上沿
     （实测上方留白 1px、下方 9px，店主看着就是「内容不整齐」）。
     span(12.5px) 与 em(11.5px) 各自垂直居中，基线差仅 ~0.4px，肉眼不可见。 */
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.sec-jump-btn em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  /* 「9/9 条」「不加」这类状态：默认灰字，展开的那个才变主色，避免一排胶囊全是彩色重点 */
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.sec-jump-btn:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.sec-jump-btn.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-ink);
}
.sec-jump-btn.active em { color: var(--brand-text); }

/* ------------------------ 小节列表 ------------------------
   r55 起收起的「小节标题行」(.sec / .sec-head / .sec-dot / .sec-sub / .caret)
   已随「移到一排展示」一起删除 —— 标签排 (.sec-jump) 就是唯一的小节导航。 */

/* 展开内容：四边 16px —— 等价于原 `.panel-body` 的 padding，见上面「硬约束 2」。
   ⚠ 这层内边距**不能省**：材料网格（.frame-grid / .tile-grid / .filter-bar）
   自身没有水平留白，去掉会让卡片贴到小节边框上。 */
.sec-body { padding: 16px; }
/* body 内层若自带内边距（.panel-body / .sec-inner 的旧外壳），清零，只认 .sec-body 这一层 */
.sec-body > .panel-body,
.sec-body > .sec-inner { padding: 0; }

/* ------------------------ 窄屏 ------------------------ */
@media (max-width: 640px) {
  /* 手机上标签排不下 5 个：横滑，不折行（折成三行会把小节标题全顶出首屏） */
  .sec-jump {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 12px 14px;
    scrollbar-width: none;
  }
  .sec-jump::-webkit-scrollbar { display: none; }
  .sec-jump-btn { flex: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   r53 —— 材料选择页：悬停显示「整幅画框正面图」；r56 —— 改为**卡片内叠加**
   店主原话：「材料选择这里改成鼠标放上去可以显示画框的实拍图」（r53）；
   上线后追加：「显示的图片能在框内吗，现在是显示在右边的」——
   r53 的浮层贴在卡片旁边，店主想要的是 sober 演示站那种**图在卡片框内切换**。

   r56 方案：`.mz-inline` 绝对定位铺满 `.shot`（inset:0），淡入淡出，随卡片滚动。
   不再需要 fixed 定位 / z-index / pointer-events 穿透 / 滚动 reflow —— 全部删除。

   卡片里那张是 L 形**样角**（看木纹漆面），叠加层是**整幅正面**（看装裱完什么样）。
   图片地址由接口 `zoomUrl` 下发（后端按 实拍图 > 整幅正面 > 样角 优先级算好）。
   ══════════════════════════════════════════════════════════════════════════ */

/* 卡片里有放大图时给个提示：右下角一个放大镜小角标 */
.mat-item .shot.has-zoom { position: relative; overflow: hidden; cursor: zoom-in; }
.mat-item .shot.has-zoom::after {
  content: '⌕';
  position: absolute;
  right: 8px; bottom: 8px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: rgba(20, 18, 16, 0.55);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
  pointer-events: none;
  z-index: 3;
}
.mat-item .shot.has-zoom:hover::after { opacity: 1; }

/* ------------------------ 卡片内叠加层 ------------------------ */
.mat-item .shot .mz-inline {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* ⚠ 用 contain 不用 cover：正面图多为竖版（760×1090），cover 会把上下边框裁掉，
     看不出「整幅画框」；contain 完整显示，两侧/上下补 soft 底色。 */
  background: var(--bg-soft) center/contain no-repeat;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.2s var(--ease), transform 0.25s var(--ease);
  pointer-events: none;          /* 鼠标事件全部留给 .shot，mouseleave 才能正常触发 */
}
.mat-item .shot .mz-inline.on { opacity: 1; transform: scale(1); }

/* 触屏设备没有 hover：角标改成「展开」箭头并常显，提示可以点 */
@media (hover: none) {
  .mat-item .shot.has-zoom::after { content: '⤢'; opacity: 0.9; }
}

/* ── r57b：材料卡补单价（商城入口隐藏后价格并进材料选择页） ──
   观感对齐商城卡的 .product .price（13.5px / 600 / ink），但单占一行，
   压在「编号 + 宽厚」下面、「用这条配框」上面；没有价的条目不渲染（见 page-materials.js）。 */
.mat-item .price-row {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ====================== r62 需求批（1009 表格第一档） ====================== */

/* 需求1：顶部公告从左到右连续滚动。
   track 里放两份相同内容，translateX(-50%) -> 0 无限循环 = 内容从左侧进场、向右匀速移动；
   悬停暂停；速度由 JS 按内容宽度写进 animation-duration。 */
.topbar-left { flex: 1 1 auto; min-width: 0; }
.topbar-notes { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.topbar-notes .tn-track {
  display: flex; width: max-content;
  animation: tn-marquee 20s linear infinite;
  will-change: transform;
}
.topbar-notes .tn-half { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
.topbar-notes .tn-item { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.topbar-notes .tn-item .tn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@keyframes tn-marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.topbar-notes:hover .tn-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .topbar-notes .tn-track { animation: none; }
  .topbar-notes .tn-half:last-child { display: none; }
}

/* 需求7：会员资料面板里的分隔线 + 危险按钮（退出登录） */
.btn.danger { background: var(--danger); border-color: transparent; color: #fff; }
.btn.danger:hover { filter: brightness(0.92); }
.profile-sep { border: 0; border-top: 1px solid var(--line); margin: 22px 0 6px; }

/* 需求4：上传区的大图邮箱提示行 */
.stage-art-meta .sa-s { display: block; }

/* ====================== r63 需求批二（1009 表格 8/9/11/12/16） ====================== */

/* 需求12：整幅效果图带落影 + 轻圆角，像挂在墙上的实物 */
#preview { box-shadow: 0 22px 44px rgba(31, 26, 18, 0.16), 0 4px 10px rgba(31, 26, 18, 0.08); border-radius: 3px; }

/* 需求11：卡纸边宽滑块行 */
.rng-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.rng-row .rng-lbl { flex: 0 0 52px; font-size: 12.5px; color: var(--text-2); }
.rng-row .rng { flex: 1 1 auto; min-width: 0; accent-color: var(--brand); height: 22px; cursor: pointer; }
.rng-row .rng-val { flex: 0 0 52px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rng-row .link-btn { flex: 0 0 auto; }

/* 需求11：卡纸颜色 —— 当前色 + 「自定义颜色」按钮，色板默认收起 */
.color-cur { display: flex; align-items: center; gap: 10px; }
.color-cur .flabel { margin: 0; }
.color-cur .swatch.cur { cursor: default; }
.sub-ctrl .swatches { margin-top: 10px; }

/* 需求9：计价两栏（左配框计价 / 右附加服务） */
.price-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; margin-top: 16px; }
.price-col { min-width: 0; }
.quote-line.sub { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 7px; font-weight: 600; }
.addon-box { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--bg-soft, #faf7f1); }
.addon-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.addon-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); }
.addon-name { font-weight: 700; font-size: 14px; }
.addon-tag { margin-left: auto; font-size: 11px; color: var(--text-3); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.addon-tiers { list-style: none; margin: 10px 0 0; padding: 0; }
.addon-tiers li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; color: var(--text-2); }
.addon-tiers li b { font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.addon-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--text-3); }
@media (max-width: 860px) {
  .price-cols { grid-template-columns: 1fr; }
}

/* 需求8：画心图片编辑器 */
.ae-mask {
  position: fixed; inset: 0; z-index: 90; background: rgba(24, 20, 12, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.ae-card {
  background: #fff; border-radius: 14px; width: min(880px, 96vw); max-height: 94vh;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.ae-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ae-head h3 { margin: 0; font-size: 16px; }
.ae-close { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-3); padding: 2px 8px; }
.ae-body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; padding: 18px; overflow: auto; }
.ae-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.ae-canvas { max-width: 100%; max-height: 60vh; border: 1px solid var(--line); background: #fff; cursor: default; touch-action: none; }
.ae-canvas:active { cursor: move; }
.ae-tip { margin: 0; font-size: 11.5px; color: var(--text-3); }
.ae-ctrls { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ae-ctrls .flabel { margin: 8px 0 2px; }
.ae-ratios { display: flex; flex-wrap: wrap; gap: 6px; }
.ae-ratios .chip { font-size: 12px; padding: 3px 10px; }
.ae-btnrow { display: flex; gap: 8px; margin: 8px 0 2px; }
.ae-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .ae-body { grid-template-columns: 1fr; }
  .ae-card { width: 96vw; }
}

/* ==========================================================================
   r64 覆盖层（1009 表 #11/#12/#15/#16）
   参数选择侧栏 / 画芯细节图条 / 内容页背景幻灯与插图 / 联系页地图 / 导航 8 项
   ========================================================================== */

/* --- 导航 8 个一级项（新增「画芯材质」）：1241~1320 再收一档，给两侧让路 --- */
@media (max-width: 1320px) and (min-width: 1041px) {
  .head-nav { gap: clamp(7px, 0.7vw, 12px); }
  .head-nav .link-btn { font-size: 12.5px; }
}

/* --- 材料页左栏「参数选择」：在原 .mat-side 里加分组 chips ---
   侧栏从 196px 放宽到 236px（chips 两列摆得下）。 */
.mat-layout { grid-template-columns: 236px minmax(0, 1fr); }
.facet-kind { display: flex; flex-direction: column; gap: 2px; }
.facet-group { border-top: 1px solid var(--line-3); margin-top: 10px; padding-top: 10px; }
.facet-group h5 {
  margin: 0 0 7px; padding: 0 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
}
.facet-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px; }
.facet-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 999px;
  background: #fff; color: var(--text-2);
  font-size: 12px; line-height: 1.2; cursor: pointer;
  transition: all 0.16s var(--ease);
}
.facet-chip:hover { border-color: var(--ink); color: var(--ink); }
.facet-chip.active { border-color: var(--brand-text); background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.facet-chip .fc-swatch {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.14); flex: 0 0 auto;
}
.facet-reset {
  margin: 12px 6px 0; padding: 7px 10px;
  border: 1px dashed var(--line-2); border-radius: var(--r-sm);
  background: none; color: var(--text-3); font-size: 12px; cursor: pointer;
  transition: all 0.16s var(--ease);
}
.facet-reset:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 1040px) {
  .mat-layout { grid-template-columns: 1fr; }   /* 覆盖层里放宽过的列宽要在窄屏退回单栏 */
}

/* --- 材料卡片：点图看实拍大图 + 画芯细节图条 --- */
.mat-item .shot.clickable { cursor: zoom-in; }
.art-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  border-top: 1px solid var(--line);
  background: var(--line);
}
.art-thumb {
  aspect-ratio: 1 / 1; border: 0; cursor: zoom-in;
  background: var(--bg-soft) center/cover no-repeat;
  transition: opacity 0.18s var(--ease);
}
.art-thumb:hover { opacity: 0.82; }

/* 灯箱里的页码（材料页实拍灯箱多图时显示「2 / 4」） */
.lightbox .lb-idx { margin-left: 12px; font-size: 12.5px; color: rgba(255, 255, 255, 0.75); font-variant-numeric: tabular-nums; }

/* --- 内容页：页头背景幻灯 --- */
.page-hero.has-slides { position: relative; overflow: hidden; border-bottom-color: transparent; }
.hero-slides { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-slide {
  position: absolute; inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.on { opacity: 1; }
/* 背景上面铺一层白纱，保证标题文字永远读得清（图深图浅都不怕） */
.page-hero.has-slides::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(250, 249, 246, 0.92) 0%, rgba(250, 249, 246, 0.55) 55%, rgba(250, 249, 246, 0.25) 100%);
}
.page-hero.has-slides .container { position: relative; z-index: 2; }

/* --- 内容页：段落插图 --- */
.pg-fig { margin: 16px 0 0; }
.pg-fig img {
  display: block; width: 100%; max-height: 460px; object-fit: contain;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-soft); cursor: zoom-in;
}

/* --- 内容页：联系页地图 --- */
.pg-map-sec { margin-top: 26px; }
.pg-map { height: 360px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg-soft); }
.pg-map-card { height: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.pg-map-card b { font-size: 15px; }
.pg-map-card p { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.7; }
.pg-map-tip { margin: 10px 0 0; font-size: 12.5px; color: var(--text-3); display: flex; gap: 14px; flex-wrap: wrap; }
.pg-map-tip a { color: var(--brand-text); }
.pg-map-fallback { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-3); }

/* --- 后台：页面内容卡的背景幻灯 / 段落插图 --- */
.pg-heroimgs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pg-heroimg { position: relative; display: inline-flex; }
.pg-heroimg .th {
  width: 92px; height: 58px; border-radius: 6px; cursor: zoom-in;
  border: 1px solid var(--line-2); background: var(--bg-soft) center/cover no-repeat;
}
.pg-heroimg .icon-btn { position: absolute; top: -8px; right: -8px; }
.pg-img-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pg-img-thumb {
  width: 64px; height: 44px; border-radius: 5px; cursor: zoom-in;
  border: 1px solid var(--line-2); background: var(--bg-soft) center/cover no-repeat;
}
.sub-title { margin: 20px 0 8px; font-size: 14.5px; }

/* --- 后台：材料卡的细节图组 --- */
.mphotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2); }
.mph { position: relative; aspect-ratio: 1 / 1; background: var(--bg-soft) center/cover no-repeat; cursor: zoom-in; }
.mph .mph-x {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; padding: 0; line-height: 1;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; cursor: pointer;
}
.mph .mph-x:hover { background: var(--danger, #c0392b); }

/* ==========================================================================
   r65 覆盖层（1009 表 #17/#18/#19）
   登录注册三视图（验证码/短信/微信QQ占位） / 资料面板地址簿 / 商城 Sober 改版
   ========================================================================== */

/* --- #19 商城 Sober：固定 4 大列、图片 4:5、留白放大、底部数字翻页 --- */
.shop-grid.sober { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 30px; padding-top: 34px; }
@media (max-width: 1240px) { .shop-grid.sober { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .shop-grid.sober { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; } }

.shop-grid.sober .shop-item .shot {
  aspect-ratio: 4 / 5;              /* Sober 的竖构图商品图 */
  background: #fff;
  border: 1px solid var(--line-3);
  border-radius: 2px;
  overflow: hidden;
}
.shop-grid.sober .shop-item .shot .pic { background-size: cover; background-position: center; transition: transform 0.5s var(--ease); }
.shop-grid.sober .shop-item:hover .shot .pic { transform: scale(1.03); }

/* 高端感 = 信息层做减法：细字、小号、去掉强色块 */
.shop-grid.sober .shop-item .badge {
  top: 10px; left: 10px;
  background: rgba(255, 255, 255, 0.88); color: var(--text-2);
  font-size: 10.5px; letter-spacing: 0.12em; padding: 3px 8px;
}
.shop-grid.sober .shop-item .body { text-align: center; gap: 5px; padding-top: 14px; }
.shop-grid.sober .shop-item .body h4 { font-weight: 500; font-size: 14.5px; letter-spacing: 0.04em; }
.shop-grid.sober .shop-item .body .code { font-size: 11.5px; letter-spacing: 0.1em; color: var(--text-3); }
.shop-grid.sober .shop-item .body .price { font-size: 14px; }

/* 工具栏：分类居左、极细分隔；去掉后的筛选/列数样式不再被引用 */
.shop-toolbar { border-bottom: 1px solid var(--line-3); padding-bottom: 12px; }
.shop-tab { font-size: 13px; letter-spacing: 0.06em; color: var(--text-2); }
.shop-tab.active::after { height: 1px; bottom: -13px; }

/* 底部数字翻页（Sober）：居中一排细边框数字，当前页黑边 */
.shop-pager { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 44px 0 6px; }
.shop-pager[hidden] { display: none; }
.pg-btn {
  min-width: 36px; height: 36px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-3); border-radius: 2px;
  background: #fff; color: var(--text-2); font-size: 13.5px; cursor: pointer;
  transition: all 0.16s var(--ease);
}
.pg-btn:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.pg-btn.active { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.pg-btn:disabled { opacity: 0.35; cursor: default; }
.pg-dots { color: var(--text-3); padding: 0 2px; }

/* --- #17 登录/注册弹窗：图形验证码 / 短信 / 第三方占位 --- */
.captcha-row { display: flex; gap: 8px; align-items: center; }
.captcha-img {
  flex: 0 0 132px; height: 44px; cursor: pointer;
  background: var(--bg-soft); border-radius: 6px; overflow: hidden;
}
.captcha-img svg { display: block; }
.sms-row { display: flex; gap: 8px; }
.sms-row input { flex: 1; min-width: 0; }
.sms-row .btn { white-space: nowrap; }

.auth-divider { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px; }
.auth-divider i { flex: 1; height: 1px; background: var(--line-3); }
.auth-divider span, .auth-divider b { font-size: 11.5px; font-weight: 400; color: var(--text-3); letter-spacing: 0.08em; }
.auth-oauth { display: flex; gap: 10px; justify-content: center; }
.auth-row-between { display: flex; justify-content: flex-end; margin: -6px 0 12px; }
.link-btn-plain { border: 0; background: none; padding: 0; color: var(--text-3); font-size: 12.5px; cursor: pointer; }
.link-btn-plain:hover { color: var(--ink); }

/* --- #18 资料面板：收货地址簿 --- */
.profile-row-between { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.addr-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.addr-item { border: 1px solid var(--line-3); border-radius: 8px; padding: 10px 12px; }
.addr-item.default { border-color: var(--brand-text, #7a6a4f); }
.addr-main { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.addr-detail { margin: 4px 0 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.addr-ops { display: flex; gap: 6px; }
.addr-form {
  border: 1px dashed var(--line-2); border-radius: 8px;
  padding: 12px; margin-top: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.addr-form input {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--line-2); border-radius: 6px;
  font-size: 13px; font-family: inherit;
}
.addr-form input:focus { outline: none; border-color: var(--ink); }
.addr-form .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.addr-actions { display: flex; gap: 8px; }
.chk { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.addr-item .icon-btn { font-size: 12px; padding: 3px 8px; }

/* --- r66 行21：顶栏语言切换小按钮（胶囊描边，和右侧其它入口区分开） --- */
.topbar .topbar-lang {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 500;
}
.topbar .topbar-lang:hover { border-color: rgba(255, 255, 255, 0.8); }

/* ==========================================================================
   r67 一站式配框页（店主截图需求）：
   · 左栏 = 效果图 + 付款卡（付款回到效果图下方）
   · 右栏 = 编号分节全部展开（①画心尺寸 ②画芯材质 ③选外框 ④内线条
     ⑤卡纸 ⑥背板 ⑦玻璃 ⑧装裱/附加项），推翻 r55 的单选手风琴
   ========================================================================== */

/* ---- 左栏：付款卡插槽 ---- */
#cfgLeftPrice { min-width: 0; }
#cfgLeftPrice .price-card { margin: 0; }

/* ---- 右栏分节骨架 ---- */
.cfg-sections { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cfg-sec { padding: 0; }
.cfg-sec-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 4px;
}
.cfg-sec-no {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 500; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.cfg-sec-head h3 { margin: 0; font-size: 16px; font-weight: 500; color: var(--ink); }
.cfg-sec-state { margin-left: auto; font-size: 12px; color: var(--text-3); text-align: right; }
/* 16px 内边距铁律不变：材料网格自身没有水平留白 */
.cfg-sec-body { padding: 8px 16px 16px; }

/* 一键方案条：不占编号，贴在分节列表顶部 */
.cfg-mode-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 14px;
}
/* r78：分节改成单页签后，这条上面原来那 30–48px 的外边距会把盒子撑出一大块空白
   （四颗胶囊吊在中间）。收掉外边距、改成左对齐。 */
.cfg-mode-strip .mode-row { margin-top: 0; flex: 1 1 auto; justify-content: flex-start; gap: 8px; }
.cfg-mode-strip .mode-row > span { margin-right: 4px; }
/* r79：这排前面的分组名——它现在排在步骤页签之上，是整栏的第一步。
   用竖线跟胶囊隔开，不加底色，避免和可点的胶囊混淆。 */
.mode-strip-label {
  flex: 0 0 auto;
  font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.2;
  padding-right: 12px; border-right: 1px solid var(--line); white-space: nowrap;
}

/* ② 画芯材质 chips（沿用 opt-chip 观感，微调说明字号） */
.artmat-chips .artmat-chip .opt-price { font-weight: 400; }
.artmat-note { margin: 10px 2px 0; font-size: 12px; color: var(--text-3); }

/* 移动端（≤1040 单栏）：syncStageHome 把 .stage 提到最前，
   DOM 顺序天然变成 效果图 → (cfg-left)付款卡 → 右栏分节，无需额外调整 */
@media (max-width: 1040px) {
  #cfgLeftPrice .price-card { margin: 0; }
}

/* ---- r67 紧凑价格卡（图2）：合计大字 + 按钮 + 明细折叠 ---- */
.price-compact .price-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.price-compact .price-top .addon-check { margin: 0 0 6px; }
.price-compact .price-total { text-align: right; }
.price-compact .price-total .val { font-size: 30px; font-weight: 500; color: var(--ink); line-height: 1.15; }
.price-compact .price-total .val small { font-size: 13px; font-weight: 400; color: var(--text-3); margin-left: 4px; }
.price-compact .price-total .lbl { margin-top: 2px; }
.price-compact .price-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.price-detail { border-top: 1px dashed var(--line); margin-top: 12px; padding-top: 8px; }
.price-detail summary { cursor: pointer; font-size: 13px; color: var(--text-3); user-select: none; }
.price-detail[open] summary { margin-bottom: 10px; }

/* ---- r67 左栏预算：付款卡回左栏后，效果图公式从 380 改 530
   （紧凑卡 245px + 上传条/信息行/间隙 ≈ 270 + 页头 96；实测 4 档视口 overflow≤0，
   「立即购买」不出吸顶容器）。探针复量见 probe-r67。 ---- */
@media (min-width: 1041px) {
  #preview { max-height: clamp(240px, calc(100vh - 530px), 600px); }
}
@media (min-width: 1600px) {
  #preview { max-height: clamp(300px, calc(100vh - 530px), 660px); }
}

/* ==========================================================================
   r68（1009 表行6/14）：挂墙背景轮换 + 3D 视角
   ========================================================================== */

/* ---- 挂墙背景：两层 div 交叉淡化，垫在画框后面（画框本体 = 不透明 canvas） ---- */
.stage-wall {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
  z-index: 0;
  border-radius: 4px;
  overflow: hidden;
}
.stage-wall.show { opacity: 1; }
/* 画框与工具条都要浮在背景层上面 */
.stage-canvas-wrap > #preview { position: relative; z-index: 1; }

/* ---- 3D 视角工具条 ---- */
.stage-3d-bar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.stage-3d-bar .btn { padding: 4px 12px; font-size: 12px; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(4px); }
.stage-3d-bar .btn.active { background: var(--ink, #2b2620); color: #fff; border-color: var(--ink, #2b2620); }
#preview.is-3d {
  cursor: grab;
  transition: transform 0.25s ease;
  will-change: transform;
  touch-action: pan-y;   /* 手机上竖向仍可滚屏，横向拖 = 转动 */
}
#preview.is-3d.dragging { transition: none; cursor: grabbing; }
@media (prefers-reduced-motion: reduce) {
  .stage-wall { transition: none; }
  #preview.is-3d { transition: none; }
}

/* ==========================================================================
   r69 卡纸：各层单独配色 + 「2 层显示 3 层」修复
   ========================================================================== */
.mlc-block { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 10px; }
.mlc-block > .flabel { margin-bottom: 4px; }
.mlc-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.mlc-row .rng-lbl { flex: 0 0 52px; font-size: 12.5px; color: var(--text-2); }
.mlc-row .swatch.cur { cursor: pointer; }
.mlc-hex { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mlc-row .link-btn { flex: 0 0 auto; }
.mlc .swatches { margin: 2px 0 8px 62px; }

/* r69 修：卡纸面板在手机端被「各层颜色」行撑破（grid 1fr 的 min-content 把轨道顶到 365px，
   整行右移到视口外，出现「跟随统一色」被裁掉）。用 minmax(0,1fr) + 允许换行收住。 */
.sub-ctrl > * { min-width: 0; }
.mlc-block, .mlc, .mlc-row { min-width: 0; }
.mlc-row > * { min-width: 0; }
@media (max-width: 1040px) {
  .sub-ctrl, .sub-ctrl.cols-3, .sub-ctrl.one-col { grid-template-columns: minmax(0, 1fr); }
  .mlc-row { flex-wrap: wrap; row-gap: 6px; }
  .mlc-row .mlc-hex { flex: 1 1 auto; }
  .mlc-row .link-btn { margin-left: auto; }
  .mlc .swatches { margin-left: 0; }
}

/* r70：高清处理费用直接标在勾选框后面（档位表已去掉） */
.addon-fee { font-size: 12.5px; font-weight: 700; color: var(--brand); white-space: nowrap; }
/* 手机端合计块太宽会把勾选行挤到换行 —— 让勾选行独占一行，费用跟在名字后面 */
@media (max-width: 1040px) {
  .price-compact .price-top { flex-wrap: wrap; }
  .price-compact .price-top .addon-check { width: 100%; }
}

/* r71：卡纸四边单独加宽 */
.sides-head { display: flex; align-items: center; gap: 10px; }
.sides-head .link-btn { margin-left: auto; }
.sides-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.side-field { display: flex; align-items: center; gap: 6px; min-width: 0; }
.side-field > span { flex: none; font-size: 12.5px; color: var(--text-2); }
.side-field input { width: 100%; min-width: 0; }
.side-field i { flex: none; font-style: normal; font-size: 12px; color: var(--text-3); }
@media (max-width: 1040px) {
  .sides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* r75（1009 表 #16）：店主自建页面的「图片墙」模板 */
.pg-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin: 0 0 34px;
}
.pg-gallery-item { margin: 0; }
.pg-gallery-item img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r); background: var(--bg-soft);
  cursor: zoom-in;
  transition: opacity 0.25s var(--ease);
}
.pg-gallery-item img:hover { opacity: 0.9; }
.pg-gallery-item figcaption {
  margin-top: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.5;
}
@media (max-width: 700px) {
  .pg-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ==========================================================================
   r76（1027 需求表）—— 布局与观感
   ========================================================================== */

/* 行2：选中态的文字必须是深色。原来这里被 `.opt-chip.active .opt-price`（更具体）
   覆盖成 rgba(255,255,255,.68)，而 active 底色早在 r5x 改成浅色了 ——
   结果「260g 哑光」这类副标题在选中后白字白底，看不见。
   r76 第一次只改成 var(--text-3)（#8b8a93，浅灰）—— 看得见，但和未选中几乎没区别，
   店主原话是「改成黑色文字」，所以这里直接用 --ink。 */
.opt-chip.active .opt-price { color: var(--ink); }
.tile.active .t-size { color: var(--ink); }
.tile.active .t-size span { color: inherit; }

/* 行7：画框 / 内线条 / 卡纸 / 材料页的卡片底部不再显示单价。
   价格统一在右侧价格卡里体现，卡片上挂一排 ¥xx/米 只会让客户分心、还容易拿去比价。 */
.tile .t-price,
.mat-item .price-row { display: none !important; }

/* 行4 + r78：8 个步骤并成一排，**点哪个只显示哪一节**（页签式，不再全部展开）。
   按钮整体放大一档：原来 12px / padding 4px 9px，手机上看不清、也不好点。 */
.sec-nav {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 9px 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  position: sticky; top: calc(var(--head-h, 84px) + 8px); z-index: 6;
}
/* r78：按钮放大后 8 个装不进一行（1440 下右栏约 490px，实测要 757px），
   原来靠横向滚动会把最后两个（玻璃 / 装裱）藏在外面 —— 改成自动换行，八个始终都看得见。 */
.sec-step {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px 7px 8px; border: 1px solid transparent; border-radius: 999px;
  background: var(--bg-soft); color: var(--text-3);
  font-size: 13.5px; line-height: 1.4; cursor: pointer; white-space: nowrap;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.sec-step:hover { background: var(--line); }
.sec-step .sec-step-ic {
  width: 21px; height: 21px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600;
  background: #fff; color: var(--text-3); border: 1px solid var(--line);
}
.sec-step.done { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.sec-step.done .sec-step-ic { background: var(--brand); border-color: var(--brand); color: #fff; }
/* 当前打开的那一节：整颗填品牌色（页签态，与「已选 ✓」区分开） */
.sec-step.cur,
.sec-step.done.cur {
  background: var(--brand); color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(224, 86, 42, 0.18);
}
.sec-step.cur .sec-step-ic,
.sec-step.done.cur .sec-step-ic { background: #fff; border-color: #fff; color: var(--brand); }
.sec-step.cur .sec-step-req { background: #fff; }
/* 非当前节整节隐藏（DOM 保留，切回来不重建） */
.cfg-sec.is-off { display: none !important; }
@media (max-width: 640px) {
  /* 手机上两行按钮就有 ~90px 高，再吸顶会压掉半个屏幕 —— 宁可不吸 */
  .sec-nav { gap: 6px; padding: 8px; position: static; }
  .sec-step { padding: 6px 12px 6px 7px; gap: 6px; font-size: 12.5px; }
  .sec-step .sec-step-ic { width: 19px; height: 19px; font-size: 11px; }
  /* r79：窄屏标签与四个胶囊挤不进一行，标签独占一行当小标题；
     这时右边那道竖线会悬空，去掉，改成不占位的普通标题。 */
  .mode-strip-label { flex: 1 1 100%; border-right: 0; padding-right: 0; margin-bottom: -2px; }
  .cfg-mode-strip { gap: 8px; padding: 10px 12px; }
}
/* 标题行去掉后正文自己撑上下留白；锚点滚动时给吸顶页头 + 步骤条留位置 */
.cfg-sec.no-head .cfg-sec-body { padding: 15px 16px 16px; }
.cfg-sec[data-sec-box] { scroll-margin-top: calc(var(--head-h, 84px) + 64px); }

/* 行13：卡纸自定义色加价提示 */
.color-fee {
  font-size: 11.5px; font-weight: 600; color: var(--brand-ink);
  background: var(--brand-soft); border-radius: 999px; padding: 2px 8px;
}
.color-note { margin: 8px 2px 0; font-size: 11.5px; line-height: 1.6; color: var(--text-3); }

/* 行10：四边加宽的滑块行 */
.sides-sliders { display: grid; gap: 2px; }
.sides-sliders .rng-row .rng-lbl { flex: 0 0 24px; }

/* 行18：页脚 —— 版权居中已有，这里去掉那根白色分割线；二维码独占最右一列 */
.site-footer .foot-grid { border-bottom: 0; }
@media (min-width: 1241px) {
  .site-footer .foot-grid { grid-template-columns: 1.4fr repeat(3, 1fr) 1.2fr; gap: 34px; }
}
@media (max-width: 1240px) and (min-width: 861px) {
  .site-footer .foot-grid { grid-template-columns: 1.2fr repeat(3, 0.95fr) 1.1fr; gap: 22px; }
}
@media (max-width: 860px) {
  .site-footer .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .site-footer .foot-qr-col { grid-column: 1 / -1; }
}
.foot-qr { gap: 12px; margin-top: 0; flex-wrap: wrap; }
.foot-qr-item img { width: 74px; height: 74px; border-radius: 6px; padding: 4px; }
.foot-qr-ph {
  display: flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; box-sizing: border-box;
  border: 1px dashed rgba(255, 255, 255, 0.28); border-radius: 6px;
  font-size: 11px; color: rgba(255, 255, 255, 0.4); letter-spacing: 0.06em;
}
.foot-qr-item.pending figcaption { color: rgba(255, 255, 255, 0.32); }

/* 行5：导航栏滚动重影。
   根因是 #siteTop 的 will-change/translateZ 强制合成层 + .site-header 的
   backdrop-filter（毛玻璃）—— Windows 高分屏滚动时毛玻璃采样的是上一帧的
   旧图层，页头就会「复印」一份在下面（店主截图里的重影）。
   页头底色本来就是近纯白，去掉毛玻璃肉眼无差别，重影随之消失。 */
#siteTop { will-change: auto; transform: none; }
.site-header { backdrop-filter: none; }
/* r78：`.sec-step.cur` 的样式已并入上面「页签」那一段（整颗品牌色），
   原来这里那条「只加一圈描边」的滚动联动样式已删除 —— 同权重会把它盖回去。 */

/* 行8：价格卡去掉「费用明细」后，运费/服务费改为合计下面的一行小字 ——
   「不包邮（顺丰到付）」必须还能看见，但不能再占一大块高度（卡片要保持紧凑）。 */
.price-card .price-brief {
  display: grid; gap: 3px;
  margin: 2px 0 10px; padding: 8px 10px;
  background: var(--bg-soft); border-radius: 8px;
}
.price-card .pb-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; line-height: 1.5; }
.price-card .pb-k { color: var(--text-3); }
.price-card .pb-v { color: var(--text-2); font-weight: 500; text-align: right; }
.price-card .pb-row[data-k="hires"] .pb-v { color: var(--brand-ink); }

/* 行14：装裱样式声明「必选」时的小标（分节正文顶部） */
.cfg-sec .sec-req {
  display: inline-block; margin: 0 0 9px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--brand-ink); background: var(--brand-soft);
  border-radius: 999px; padding: 2px 9px;
}
/* 步骤条上「必选」用实心小点，与已选 ✓ 区分开 */
.sec-step .sec-step-req {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--brand); margin-left: 4px; flex: 0 0 auto;
}

/* =====================================================================
   配画商城（r76 / 1027 表行17）：参照 Sober shop 页改版 —— 卖「高端成品画」。
   版式要点：极简页头（面包屑 + 大标题 + 一句说明）、一行分类 + 右侧装裱/卡纸/计数、
   4 列大图网格（图占满卡面、信息在下方、悬停浮出「快速查看」）、底部数字翻页、
   点卡片出商品弹层（大图 + 尺寸 + 实时价 + 下单）。
   命名统一 rfs-（reference shop），与旧 .ref-* 完全不冲突。
   ===================================================================== */
body.no-scroll { overflow: hidden; }

.rfs-head { background: #fff; border-bottom: 1px solid var(--line); padding: 34px 0 30px; }
.rfs-head-in { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.rfs-crumb { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); }
.rfs-crumb a { color: var(--text-3); }
.rfs-crumb a:hover { color: var(--ink); }
.rfs-crumb i { font-style: normal; opacity: 0.55; }
.rfs-crumb span { color: var(--ink); }
.rfs-eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brand); }
.rfs-head h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 300; letter-spacing: 0.06em; line-height: 1.15; }
.rfs-lead { max-width: 640px; font-size: 13.5px; line-height: 1.95; color: var(--text-2); }

/* ⚠ 只写 padding-bottom：写成 `padding: 0 0 84px` 会把 .container 的左右内边距一起清零，
   整块内容贴到屏幕边上（r76 实测 x=0）。 */
.rfs-body { padding-bottom: 84px; }

/* 工具栏：分类 tab 贴底一条细线，选中的那条线压住分割线（Sober 的写法） */
.rfs-bar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px;
  flex-wrap: wrap; padding: 24px 0 0; border-bottom: 1px solid var(--line);
}
.rfs-tabs { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.rfs-tab {
  position: relative; border: 0; background: none; padding: 0 0 14px;
  font-size: 13px; letter-spacing: 0.04em; color: var(--text-3); cursor: pointer;
  transition: color 0.18s var(--ease);
}
.rfs-tab i { font-style: normal; font-size: 11px; margin-left: 4px; opacity: 0.7; }
.rfs-tab:hover { color: var(--ink); }
.rfs-tab.active { color: var(--ink); font-weight: 600; }
.rfs-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }

.rfs-tools { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; flex-wrap: wrap; }
/* 标签「装裱 / 卡纸」两字不能被挤成竖排（r76 首屏实测） */
.rfs-sel { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); white-space: nowrap; flex: none; }
.rfs-sel > span { flex: none; white-space: nowrap; }
.rfs-sel select {
  appearance: none; -webkit-appearance: none;
  border: 0; border-bottom: 1px solid var(--line-2, var(--line)); border-radius: 0;
  background: transparent; padding: 3px 16px 3px 0; font-size: 12.5px; color: var(--ink);
  font-family: inherit; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 7px) calc(50% + 1px), calc(100% - 3px) calc(50% + 1px);
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.rfs-sel select:focus { outline: none; border-bottom-color: var(--ink); }
.rfs-count { font-size: 11.5px; color: var(--text-3); }
/* 右侧固定「联系客服」竖条宽 42px，会把工具栏最右的「共 N 件」压在下面（r76 首屏实测）。
   宽屏给它让出 46px，窄屏那条竖条自己会收起，不用让。 */
@media (min-width: 1024px) {
  .rfs-tools { padding-right: 46px; }
}
/* 右侧固定「联系客服」竖条宽 42px，会把工具栏最右的「共 N 件」压在下面（r76 首屏实测）。
   宽屏给它让出 46px，窄屏那条竖条自己会收起，不用让。 */
@media (min-width: 1024px) {
  .rfs-tools { padding-right: 46px; }
}

/* 商品网格 */
.rfs-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 24px; padding-top: 32px;
}
.rfs-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rfs-shot {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 4 / 5; padding: 24px;
  border: 0; background: var(--bg-soft); cursor: pointer; overflow: hidden;
}
/* 首屏 12 张要一张张合成，线上约 7–9 秒；空着的卡面会像坏图，
   所以绘制期间挂 .is-loading 走一道流光（不占位、不影响布局）。 */
.rfs-shot.is-loading::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, 0.6) 50%, transparent 82%);
  background-size: 220% 100%;
  animation: rfs-shimmer 1.3s linear infinite;
}
@keyframes rfs-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rfs-shot.is-loading::after { animation: none; opacity: 0.5; }
}
.rfs-canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; transition: transform 0.5s var(--ease); }
.rfs-shot:hover .rfs-canvas { transform: scale(1.03); }
.rfs-quick {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 0; text-align: center;
  background: rgba(255, 255, 255, 0.94);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.rfs-shot:hover .rfs-quick, .rfs-shot:focus-visible .rfs-quick { opacity: 1; transform: none; }

/* min-width:0 必须写 —— grid/flex 子项默认 min-width:auto 撑到内容宽度，
   超长标题（如 "Ice in the River - Ernest Lawson - Google Cultural"）会顶出卡片右边。 */
.rfs-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rfs-name {
  display: block; width: 100%; min-width: 0;
  font-size: 13.5px; font-weight: 500; color: var(--ink); letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rfs-sub { font-size: 11.5px; color: var(--text-3); }
.rfs-buy { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 3px; }
.rfs-price { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }
.rfs-price em { font-style: normal; font-size: 11px; font-weight: 400; color: var(--text-3); }
.rfs-size { font-size: 11px; color: var(--text-3); text-align: right; }

/* 数字翻页（Sober 底部是纯数字，没有上一页/下一页的胶囊） */
.rfs-pager { display: flex; align-items: center; justify-content: center; gap: 4px; padding-top: 54px; }
.rfs-pg {
  min-width: 34px; height: 34px; padding: 0 9px;
  border: 1px solid transparent; border-radius: 999px; background: transparent;
  font-size: 12.5px; color: var(--text-2); cursor: pointer; transition: all 0.18s var(--ease);
}
.rfs-pg:hover { border-color: var(--line-2, var(--line)); color: var(--ink); }
.rfs-pg.active { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.rfs-pg.disabled { opacity: 0.3; cursor: default; }

/* -------- 快速查看弹层 -------- */
.rfs-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 22px; }
.rfs-modal[hidden] { display: none; }
.rfs-mask { position: absolute; inset: 0; background: rgba(24, 21, 18, 0.5); opacity: 0; transition: opacity 0.24s var(--ease); }
.rfs-modal.on .rfs-mask { opacity: 1; }
.rfs-panel {
  position: relative; z-index: 1; width: min(1000px, 100%); max-height: min(88vh, 720px);
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  background: #fff; border-radius: 4px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
  transform: translateY(10px) scale(0.995); opacity: 0;
  transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}
.rfs-modal.on .rfs-panel { transform: none; opacity: 1; }
.rfs-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); color: var(--ink);
  font-size: 19px; line-height: 1; cursor: pointer;
}
.rfs-x:hover { background: #fff; }
.rfs-visual {
  display: flex; align-items: center; justify-content: center;
  padding: 40px; background: var(--bg-soft); min-height: 320px;
}
.rfs-big { max-width: 100%; max-height: 62vh; width: auto; height: auto; display: block; }
.rfs-info { padding: 34px 34px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.rfs-mname { font-size: 24px; font-weight: 300; letter-spacing: 0.04em; color: var(--ink); }
.rfs-msub { font-size: 12px; color: var(--text-3); }
.rfs-mdesc { font-size: 13px; line-height: 1.85; color: var(--text-2); }
.rfs-opt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.rfs-ok { font-size: 11.5px; color: var(--text-3); letter-spacing: 0.04em; }
.rfs-sizes { display: flex; gap: 8px; }
.rfs-sizebtn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 66px; padding: 7px 10px;
  border: 1px solid var(--line); background: #fff; border-radius: var(--r-sm);
  cursor: pointer; transition: all 0.18s var(--ease);
}
.rfs-sizebtn b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rfs-sizebtn span { font-size: 10px; color: var(--text-3); }
.rfs-sizebtn:hover { border-color: var(--line-2, var(--line)); }
.rfs-sizebtn.active { border-color: var(--ink); }
.rfs-msize { font-size: 11.5px; color: var(--text-3); }
.rfs-oticket {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 2px; padding: 9px 11px;
  background: var(--bg-soft); border-radius: 6px; font-size: 11.5px; color: var(--text-2);
}
.rfs-och { color: var(--brand-text, var(--brand)); white-space: nowrap; }
.rfs-och:hover { text-decoration: underline; }
.rfs-mprice { display: flex; align-items: baseline; gap: 7px; margin-top: 8px; }
.rfs-mprice .rfs-plabel { font-size: 11.5px; color: var(--text-3); }
.rfs-mprice b { font-size: 26px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); }
.rfs-mprice em { font-style: normal; font-size: 11px; color: var(--text-3); }
.rfs-macts { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.rfs-macts .btn { flex: 1; min-width: 132px; }
.rfs-macts .btn.lg { height: 46px; padding: 0 20px; font-size: 12.5px; }
.rfs-notes { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.rfs-notes li { position: relative; padding-left: 12px; font-size: 11.5px; line-height: 1.7; color: var(--text-3); }
.rfs-notes li::before { content: ''; position: absolute; left: 1px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--line-2, var(--line)); }

@media (max-width: 1180px) {
  .rfs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 20px; }
}
@media (max-width: 860px) {
  .rfs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .rfs-panel { grid-template-columns: 1fr; max-height: 90vh; }
  .rfs-visual { padding: 26px; min-height: 240px; }
  .rfs-big { max-height: 38vh; }
  .rfs-info { padding: 22px 20px 24px; gap: 8px; }
  .rfs-mname { font-size: 20px; }
  .rfs-mprice b { font-size: 22px; }
}
@media (max-width: 640px) {
  .rfs-head { padding: 22px 0 20px; }
  .rfs-lead { font-size: 12.5px; }
  .rfs-bar { padding-top: 16px; }
  .rfs-tabs { gap: 16px; }
  .rfs-tab { font-size: 12.5px; padding-bottom: 11px; }
  .rfs-tools { gap: 12px; padding-bottom: 10px; }
  .rfs-grid { gap: 24px 12px; padding-top: 20px; }
  .rfs-shot { padding: 14px; }
  .rfs-quick { opacity: 1; transform: none; padding: 9px 0; font-size: 10px; }
  .rfs-name { font-size: 12.5px; }
  .rfs-buy { flex-direction: column; align-items: flex-start; gap: 2px; }
  .rfs-size { text-align: left; }
  .rfs-pager { padding-top: 34px; }
  .rfs-modal { padding: 0; align-items: end; }
  .rfs-panel { width: 100%; max-height: 92vh; border-radius: 12px 12px 0 0; }
  .rfs-macts .btn.lg { height: 44px; }
}

/* ==========================================================================
   r80（2026-11-02）—— 卡纸卡片角标压住名称 + 右栏材料不显示单价
   ========================================================================== */

/* 卡纸卡片没有缩略图（r76 去掉了「画框样角」照片），名称从卡片顶端开始；
   而 .t-tag 是 absolute 定位在左上角 —— 「常备」这类角标正好盖住名称
   （实测 tag 386~407 / name 378~404，纵向重叠 29px，名字几乎看不见）。
   卡纸卡片在 JS 里加上 .no-shot 之后，角标改成流式：占第一行，名称接在下面。 */
.tile.no-shot .t-tag {
  position: static;
  display: inline-block;
  margin: 9px 9px 0;
}
.tile.no-shot .t-name { padding-top: 6px; }

/* 外框卡片底部单价：与行7 的 .tile .t-price 同一条口径 ——
   价格只在下方价格卡里体现，卡片上不再挂 ¥xx/米。
   保留节点（display:none 而非删掉 DOM），以后要恢复只需去掉这一行。 */
.frame-card .frame-price { display: none !important; }

/* ==========================================================================
   r81（2026-11-02）—— 内容单页的页头标题区居中
   ========================================================================== */

/* 店主截图反馈：「这种单页面的文字居中显示，不要靠左」（已确认 = 只居中页头标题区）。
   范围只限「内容单页」的页头（小标签 + 大标题 + 一句简介）：
   关于我们 / 业务介绍 / 批量定制 / 艺术微喷 / 图片高清处理 / 联系我们 + 自建页（data-page="custom"）。
   ⚠ 正文 .pg-* 段落仍是左对齐 —— 800px 列里长段落居中会难读，店主明确只要页头这块；
   ⚠ 不要写成全局 .page-hero —— 材料 / 图库 / 常见问题 / 买家晒图 共用同一个类，那些是工具页，版式不动；
   ⚠ 以后后台新增内容页，记得把它的 data-page 加进下面这个 :is() 列表（与 page-content.js 的 PAGES 对齐）。 */
body:is([data-page="about"], [data-page="bespoke"], [data-page="bulk"],
       [data-page="giclee"], [data-page="hires"], [data-page="contact"],
       [data-page="custom"]) .page-hero .container {
  text-align: center;
}

/* 简介是 max-width: 640px 的块，光有 text-align 只会让「块内的文字」居中、整块依旧贴左；
   要连块本身一起推才真正落在中线上。 */
body:is([data-page="about"], [data-page="bespoke"], [data-page="bulk"],
       [data-page="giclee"], [data-page="hires"], [data-page="contact"],
       [data-page="custom"]) .page-hero p {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   r82（2026-11-02）—— 内容单页去掉整块右栏（本页目录 + 「还有别的想法」CTA 卡）
   ========================================================================== */

/* 右栏没东西时 page-content.js 会移除 <aside>，并给 .pg-layout 打上 .no-side。
   这时 grid 只剩第一列（minmax(0,800px)），默认 justify-content:space-between
   会把正文压在容器最左边 —— 补一条 justify-content:center，正文变成居中一列。
   ⚠ 只认 .no-side：联系我们 / 图片高清处理 / 自建页 还有「联系方式卡」，右栏保留、两列版式不变。
   ⚠ ≤980 断点下 .pg-layout 已经是 flex column，这条不参与，无需重复写。 */
@media (min-width: 981px) {
  .pg-layout.no-side {
    grid-template-columns: minmax(0, 800px);
    justify-content: center;
  }
}

/* 页内切换条跟着居中（仅 .no-side 的页面，由 page-content.js 打 .is-center）：
   正文列已经居中，胶囊条再贴左就明显错位。 */
.pg-chips.is-center { justify-content: center; }

/* ==========================================================================
   r83（2026-11-02）—— 价格卡增加「运费（寄付）」勾选框
   ========================================================================== */

/* 价格卡顶部原本只有一个勾选（图片高清处理）+ 右侧合计。加了运费勾选后两个并排：
   外面包一层 .price-addons 才能让它们成组换行，不会把合计块挤变形。
   （page-custom.js 的 priceCard() 里渲染，位置就在「图片高清处理」右边） */
.price-compact .price-addons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  min-width: 0;
}

@media (max-width: 1040px) {
  /* 手机端：勾选组独占一行，两个勾选仍在一行内并排（真的放不下才换行） */
  .price-compact .price-addons { width: 100%; }
  .price-compact .price-top .addon-check { width: auto; }
}

/* ==========================================================================
   r84（2026-11-02）—— LOGO 支持店主自己上传 PNG，并新增「整张图」显示方式
   ========================================================================== */

/* 默认（badge）：上传的图当图标，高度与原来的字形印章一致，右边照旧显示店名。
   这是老行为，不动 —— .brand-logo 的规则在上面第 449 行。 */

/* full：整张图直接当品牌区（后台选「只用这张图」）。图里通常已经排好店名，
   所以比图标那档放大一点，宽高都由图片自身比例决定，绝不拉伸（object-fit: contain）。 */
.brand.is-full .brand-logo {
  height: 46px;
  max-width: 260px;
}

/* 窄屏页头会收掉店名文字，整图模式要跟着收一点，免得把「我的订单 / 登录」挤掉 */
@media (max-width: 1240px) {
  .brand.is-full .brand-logo { height: 40px; max-width: 210px; }
}

/* 手机端标题栏是「汉堡 + LOGO」居中，图再大就顶到两侧的按钮了 */
@media (max-width: 640px) {
  .brand.is-full .brand-logo { height: 34px; max-width: 150px; }
}

/* ==========================================================================
   r85（2026-11-03）—— 材料页画框卡片显示 L 形框条样角（不再裁切成一片白）
   ========================================================================== */

/* 店主反馈：「画框显示的不是样角图…点开后显示实拍图」。
   page-materials.js 里已经把外框/内线条的卡片图换成样角（photoUrl），
   这里保证它**完整显示、不被裁**：正方形卡片 + cover 会把 L 形样角的两条边切掉，
   细边框（如 6mm 铝合金）裁完只剩中间一片白，客户根本看不出是什么。
   ⚠ 只针对有图的外框/内线条；画芯材质的纹理图仍是 cover（铺满更好看）。 */
.mat-item .shot.has-pic.k-outer,
.mat-item .shot.has-pic.k-inner {
  background-size: contain;
}

/* ==========================================================================
   r86（2026-11-05）—— 页脚底栏 ICP 备案号
   ========================================================================== */

/* 备案号必须能在网站底部看到（工信部要求），点击进 beian.miit.gov.cn。
   底栏是 flex + gap:16px 居中，直接作为一个 <a> 参与排布即可。
   ⚠ 别给 display:block，手机上底栏是 column，会多出一截空白。 */
.foot-bar .foot-icp {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

.foot-bar .foot-icp:hover,
.foot-bar .foot-icp:focus-visible {
  border-bottom-color: currentColor;
}