/* ==========================================================================
   MARCWELL — 前台设计系统
   风格定位：暖调自然 + 编辑式排版（美式 DTC 独立站主流审美）
   字体策略：只用系统字体栈（Georgia / system-ui），不引外部字体 ——
             加载快、无第三方请求、离线也能看，符合美国买家对性能的预期。
   ========================================================================== */

:root {
  --jade-900: #0a3521;
  --jade-800: #0f4f2e;
  --jade-700: #12703c;
  --jade-600: #1b8a4b;
  --jade-100: #e6f1e9;

  --ink-900: #14181c;
  --ink-800: #232a31;
  --ink-700: #39424b;
  --ink-500: #6b757f;
  --ink-400: #8b949e;
  --ink-200: #d7dce0;

  --cream-50: #fdfcf8;
  --cream-100: #f8f5ee;
  --cream-200: #f0ebdf;
  --cream-300: #e4dccb;

  --gold-600: #9c7c2c;
  --gold-500: #c8a04a;
  --gold-300: #e6d3a3;

  --sale: #b3452f;
  --line: #e6dfd2;
  --line-soft: #efe9dd;

  --font-display: Georgia, 'Times New Roman', 'Songti SC', 'Noto Serif SC', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --sh-1: 0 1px 2px rgba(20, 24, 28, .06), 0 1px 3px rgba(20, 24, 28, .04);
  --sh-2: 0 4px 12px rgba(20, 24, 28, .07), 0 2px 4px rgba(20, 24, 28, .04);
  --sh-3: 0 14px 40px rgba(20, 24, 28, .12);

  --wrap: 1240px;
  --hdr: 68px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-800);
  background: var(--cream-50);
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.8rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.center { text-align: center; }
.muted { color: var(--ink-500); }
.small { font-size: .86rem; }
.tiny { font-size: .78rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- 顶部公告 ---------- */
.announce {
  background: var(--jade-900); color: #eaf3ec; text-align: center;
  font-size: .82rem; letter-spacing: .04em; padding: 9px 16px; text-transform: uppercase;
}
.announce b { color: var(--gold-300); font-weight: 600; }

/* ---------- 头部 ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60; background: rgba(253, 252, 248, .92);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft);
}
.hdr-in { display: flex; align-items: center; gap: 26px; height: var(--hdr); }
.logo { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .06em; display: flex; align-items: baseline; gap: 8px; }
.logo b { font-weight: 400; }
.logo span { font-family: var(--font-body); font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-600); }
.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav > li { list-style: none; position: relative; }
.nav a.nav-l {
  display: block; padding: 10px 14px; font-size: .93rem; color: var(--ink-700);
  border-radius: var(--r-sm); letter-spacing: .01em; white-space: nowrap;
}
.nav a.nav-l:hover { background: var(--cream-100); color: var(--jade-700); }
.nav .sub {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-3);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .16s;
}
.nav li:hover .sub, .nav li:focus-within .sub, .nav li.open .sub { opacity: 1; visibility: visible; transform: none; }
.nav .sub a { display: block; padding: 9px 12px; border-radius: var(--r-sm); font-size: .9rem; }
.nav .sub a:hover { background: var(--jade-100); color: var(--jade-800); }
.hdr-sp { flex: 1; }
.hdr-act { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  background: none; border: 0; padding: 9px; border-radius: var(--r-sm); color: var(--ink-700);
  display: inline-flex; align-items: center; gap: 7px; font-size: .86rem;
}
.icon-btn:hover { background: var(--cream-100); }
.cart-n {
  background: var(--jade-700); color: #fff; border-radius: 999px; font-size: .7rem;
  min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; font-weight: 600;
}
.lang-btn { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: #fff; font-size: .82rem; }
.lang-btn:hover { border-color: var(--jade-600); color: var(--jade-700); }
.burger { display: none; }
.hdr-search { display: none; }
.hdr-search.on { display: block; }
.hdr-search input {
  width: 190px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: .86rem;
}
.hdr-search input:focus { outline: 0; border-color: var(--jade-600); box-shadow: 0 0 0 3px var(--jade-100); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; border: 1px solid transparent;
  font-size: .93rem; font-weight: 600; letter-spacing: .015em; transition: .18s;
  text-align: center; line-height: 1;
}
.btn-p { background: var(--jade-700); color: #fff; }
.btn-p:hover { background: var(--jade-800); box-shadow: var(--sh-2); transform: translateY(-1px); }
.btn-g { background: transparent; color: var(--ink-800); border-color: var(--ink-800); }
.btn-g:hover { background: var(--ink-800); color: var(--cream-50); }
.btn-l { background: #fff; color: var(--ink-800); border-color: var(--line); }
.btn-l:hover { border-color: var(--ink-400); }
.btn-gold { background: var(--gold-500); color: #2b2416; }
.btn-gold:hover { background: var(--gold-600); color: #fff; }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 34px; font-size: 1rem; }
.btn-sm { padding: 9px 16px; font-size: .82rem; }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }

/* ---------- 徽标 ---------- */
.badge {
  display: inline-block; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; font-weight: 600;
}
.badge-sale { background: var(--sale); color: #fff; }
.badge-new { background: var(--jade-700); color: #fff; }
.badge-cus { background: var(--gold-500); color: #2b2416; }
.badge-soft { background: var(--cream-200); color: var(--ink-700); }
.badge-ok { background: var(--jade-100); color: var(--jade-800); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fbfaf5 0%, #eef3ec 100%); }
.hero-in { display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: center; padding: 64px 0 70px; }
.hero .kick { font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 16px; }
.hero h1 { margin-bottom: 20px; }
.hero .sub { font-size: 1.08rem; color: var(--ink-700); max-width: 30em; margin-bottom: 30px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.hero-badges { display: flex; gap: 22px; flex-wrap: wrap; }
.hero-badges div { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink-700); }
.hero-badges i { color: var(--jade-600); font-style: normal; }
.hero-art { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3); }
.hero-art img { width: 100%; height: auto; }

/* ---------- 区块 ---------- */
.sec { padding: 74px 0; }
.sec-tight { padding: 52px 0; }
.sec-alt { background: var(--cream-100); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.sec-head .eyebrow { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 10px; }
.sec-head h2 { margin: 0; }
.sec-head p { margin: 6px 0 0; color: var(--ink-500); }
.sec-link { font-size: .88rem; color: var(--jade-700); border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; }

/* ---------- 三板块 ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column; transition: .22s;
}
.pillar:hover { box-shadow: var(--sh-3); transform: translateY(-3px); }
.pillar-art { aspect-ratio: 4 / 3; background: var(--cream-100); }
.pillar-art img { width: 100%; height: 100%; object-fit: cover; }
.pillar-b { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.pillar-b h3 { font-size: 1.35rem; margin-bottom: 10px; }
.pillar-b p { color: var(--ink-500); font-size: .93rem; flex: 1; }
.pillar-b .more { margin-top: 16px; font-size: .86rem; font-weight: 600; color: var(--jade-700); }

/* ---------- 商品网格 ---------- */
.grid-p { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 20px; }
.pcard { display: flex; flex-direction: column; }
.pcard-art {
  position: relative; /* 4:3 与插图比例一致，整张图完整可见，不会只剩中间一条 */
  aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--r-md); overflow: hidden; margin-bottom: 14px; transition: .2s;
}
.pcard:hover .pcard-art { box-shadow: var(--sh-2); border-color: var(--line); }
.pcard-art img { width: 100%; height: 100%; object-fit: cover; }
.pcard-tags { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.pcard-quick {
  position: absolute; left: 10px; right: 10px; bottom: 10px; opacity: 0; transform: translateY(6px);
  transition: .2s;
}
.pcard:hover .pcard-quick { opacity: 1; transform: none; }
.pcard h3 { font-family: var(--font-body); font-size: .95rem; font-weight: 600; line-height: 1.4; margin: 0 0 6px; }
.pcard h3 a:hover { color: var(--jade-700); }
.pcard .blurb { font-size: .82rem; color: var(--ink-500); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.price { display: flex; align-items: baseline; gap: 8px; }
.price .now { font-weight: 700; font-size: 1.02rem; }
.price .was { color: var(--ink-400); text-decoration: line-through; font-size: .86rem; }
.price .from { font-size: .76rem; color: var(--ink-500); }

/* ---------- 信任条 ---------- */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.trust > div { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px 22px; }
.trust b { display: block; font-family: var(--font-display); font-size: 1.08rem; margin-bottom: 8px; }
.trust p { font-size: .86rem; color: var(--ink-500); margin: 0; }
.trust .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--jade-100); color: var(--jade-800); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 1rem; }

/* ---------- 定制横幅 ---------- */
.cband {
  background: linear-gradient(120deg, var(--jade-900), var(--jade-700) 60%, #1c7a4c);
  color: #eef6f0; border-radius: var(--r-xl); padding: 54px; display: grid;
  grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; overflow: hidden;
}
.cband h2 { color: #fff; }
.cband p { color: #cfe3d5; max-width: 34em; }
.cband .list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.cband .list li { display: flex; gap: 10px; font-size: .92rem; color: #dfeee4; }
.cband .list li::before { content: '✓'; color: var(--gold-300); font-weight: 700; }
.cband-art { background: rgba(255, 255, 255, .07); border-radius: var(--r-lg); padding: 14px; }

/* ---------- 页头（内页） ---------- */
.pagehead { background: var(--cream-100); border-bottom: 1px solid var(--line); padding: 44px 0 40px; }
.crumb { font-size: .8rem; color: var(--ink-500); margin-bottom: 12px; }
.crumb a:hover { color: var(--jade-700); }
.pagehead h1 { margin: 0; }
.pagehead p { margin: 12px 0 0; color: var(--ink-500); max-width: 52em; }

/* ---------- 筛选条 ---------- */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .85rem; }
.chip:hover { border-color: var(--jade-600); }
.chip.on { background: var(--jade-700); border-color: var(--jade-700); color: #fff; }
.toolbar select { padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.shell { display: grid; grid-template-columns: 1fr 330px; gap: 44px; align-items: start; }

/* ---------- 商品详情 ---------- */
.pd { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: start; }
.pd-art { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.pd-art img { width: 100%; }
.pd h1 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 12px; }
.pd-price { display: flex; align-items: baseline; gap: 12px; margin: 16px 0; }
.pd-price .now { font-family: var(--font-display); font-size: 1.9rem; }
.pd-price .was { color: var(--ink-400); text-decoration: line-through; }
.pd-desc { color: var(--ink-700); font-size: .95rem; margin: 18px 0 24px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.qty button { width: 42px; height: 44px; border: 0; background: none; font-size: 1.1rem; color: var(--ink-700); }
.qty button:hover { background: var(--cream-100); }
.qty input { width: 52px; height: 44px; border: 0; text-align: center; font-weight: 600; }
.buyrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 18px 0; }
.meta { border-top: 1px solid var(--line-soft); margin-top: 26px; padding-top: 20px; font-size: .87rem; color: var(--ink-500); display: grid; gap: 7px; }
.specs { width: 100%; border-collapse: collapse; margin: 10px 0 0; font-size: .9rem; }
.specs th, .specs td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-weight: 400; }
.specs th { width: 38%; color: var(--ink-500); }
.tabs { margin-top: 60px; }
.tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tabbar button { border: 0; background: none; padding: 13px 18px; font-size: .92rem; color: var(--ink-500); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabbar button.on { color: var(--jade-800); border-bottom-color: var(--jade-700); font-weight: 600; }
.tabpane { padding: 26px 0; font-size: .95rem; color: var(--ink-700); white-space: pre-wrap; }

/* ---------- 定制页 ---------- */
.cz { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: start; }
/* ⚠️ 左侧栏必须拉满整行高度，里面的 .cz-stage 才能 sticky 住。
   只写 .cz-stage{position:sticky} 是不够的：网格项默认 align-items:start 时高度=内容高度，
   sticky 元素没有可滑动的行程 → 表现为「往下选层数和颜色时预览跑出屏幕」。
   业主就是提的这个：选下面的选项时要回头往上拉才看得见预览。 */
.cz-left { align-self: stretch; min-width: 0; }
.cz-stage {
  position: sticky; top: calc(var(--hdr) + 16px); z-index: 20;
  background: linear-gradient(180deg, #ffffff, #eef2ec);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.cz-canvas { width: 100%; aspect-ratio: 1 / 1; touch-action: none; cursor: grab; }
.cz-canvas:active { cursor: grabbing; }
/* 图稿加载失败时的可见提示：贴在预览图上，绝不让「上传了但没显示」无声无息 */
.cz-warn {
  display: none; position: absolute; left: 12px; right: 12px; bottom: 62px; z-index: 6;
  background: #fdecea; color: #8c3225; border: 1px solid #f3c9c3; border-radius: var(--r-sm);
  padding: 10px 13px; font-size: .8rem; line-height: 1.55;
}
.cz-tools { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line-soft); background: #fff; flex-wrap: wrap; align-items: center; }
.cz-tools .sp { flex: 1; }
.cz-tag { font-size: .76rem; color: var(--ink-500); }
.steps { display: flex; gap: 6px; margin-bottom: 26px; flex-wrap: wrap; }
.steps div { flex: 1; min-width: 120px; font-size: .78rem; padding: 10px 12px; border-radius: var(--r-sm); background: var(--cream-100); color: var(--ink-500); border: 1px solid transparent; }
.steps div.on { background: #fff; border-color: var(--jade-600); color: var(--jade-800); font-weight: 600; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; margin-bottom: 18px; }
.card > h3 { font-family: var(--font-body); font-size: .95rem; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 9px; }
.card > h3 .n { width: 22px; height: 22px; border-radius: 50%; background: var(--jade-700); color: #fff; font-size: .74rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); }
.card .hint { font-size: .82rem; color: var(--ink-500); margin: 6px 0 16px; }
.field { margin-bottom: 15px; }
.field > label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 6px; }
.field .sub { font-size: .78rem; color: var(--ink-500); font-weight: 400; }
.inp, .sel, .ta {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; transition: .15s;
}
.inp:focus, .sel:focus, .ta:focus { outline: 0; border-color: var(--jade-600); box-shadow: 0 0 0 3px var(--jade-100); }
.ta { min-height: 96px; resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: .88rem; cursor: pointer; }
.check input { margin-top: 4px; }
.swatches { display: flex; gap: 9px; flex-wrap: wrap; }
.sw { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); position: relative; }
.sw.on { border-color: var(--jade-700); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 0 0 3px var(--jade-100); }
.sw i { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: #fff; font-style: normal; font-size: .9rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.sw.on i { display: flex; }
.drop {
  border: 1.5px dashed var(--line); border-radius: var(--r-md); padding: 22px; text-align: center;
  background: var(--cream-50); transition: .16s; cursor: pointer;
}
.drop:hover, .drop.over { border-color: var(--jade-600); background: var(--jade-100); }
.drop .big { font-size: .9rem; font-weight: 600; margin-bottom: 4px; }
.drop .sm { font-size: .78rem; color: var(--ink-500); }
.thumb { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.thumb .pv { width: 56px; height: 56px; border-radius: var(--r-sm); background: var(--cream-100); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.thumb .pv img { width: 100%; height: 100%; object-fit: contain; }
.thumb .fi { flex: 1; min-width: 0; }
.thumb .fi b { display: block; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb .fi span { font-size: .74rem; color: var(--ink-500); }
.thumb .artnote {
  display: block; margin-top: 6px; font-size: .74rem; line-height: 1.5;
  color: #8c3225; background: #fdecea; border-radius: var(--r-sm); padding: 7px 9px;
}
/* 牌面地图放在右侧配置栏（较窄），列数收一档更整齐 */
.facemap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-height: 300px; overflow-y: auto; padding-right: 4px; }
.fm {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 4px;
  text-align: center; position: relative; cursor: pointer; transition: .14s;
}
.fm:hover { border-color: var(--jade-600); }
.fm.on { border-color: var(--jade-700); box-shadow: 0 0 0 2px var(--jade-100); }
/* 牌面是竖版（高:宽 ≈ 38:28），缩略图必须同比，否则看着就是躺着的牌 */
.fm img { width: 100%; aspect-ratio: 28 / 38; object-fit: contain; border-radius: 4px; }
.fm span { font-size: .62rem; color: var(--ink-500); display: block; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm .dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); }


/* 上传进度条：真实字板常有 20~45MB，没有进度反馈客户会以为卡死 */
.progbox { margin-top: 10px; }
.upbar-t { font-size: .74rem; color: var(--ink-500); margin-bottom: 4px; }
.upbar-p { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.upbar-p i { display: block; height: 100%; width: 3%; border-radius: 99px; background: var(--jade-700); transition: width .18s linear; }
.upbar-p i.indet { width: 34% !important; animation: upbarIndet 1.1s ease-in-out infinite; }
@keyframes upbarIndet { 0% { transform: translateX(-110%); } 100% { transform: translateX(330%); } }

/* 整版字板拆分出来的牌面图库（点选即可实时预览） */
.sheetbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheetbar b { font-size: .82rem; color: var(--jade-800); }
.sheetadj { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--ink-500); }
.sheetadj i { font-style: normal; }
.inp-mini { width: 52px; padding: 5px 6px; font-size: .8rem; text-align: center; }
.facegrid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  max-height: 320px; overflow-y: auto; padding-right: 4px;
}
.sf {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 3px;
  position: relative; cursor: pointer; transition: .14s; line-height: 0;
}
.sf:hover { border-color: var(--jade-600); }
.sf.on { border-color: var(--jade-700); box-shadow: 0 0 0 2px var(--jade-100); }
.sf img { width: 100%; aspect-ratio: 23 / 32; object-fit: contain; border-radius: 3px; background: #fff; }
.sf span { position: absolute; left: 3px; bottom: 3px; font-size: .58rem; color: var(--ink-500); background: rgba(255,255,255,.82); border-radius: 3px; padding: 0 3px; line-height: 1.5; }
.summary { position: sticky; top: calc(var(--hdr) + 16px); }
.sum-line { display: flex; justify-content: space-between; font-size: .88rem; padding: 7px 0; border-bottom: 1px dashed var(--line-soft); }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; font-size: 1.5rem; font-family: var(--font-display); }
.sum-total small { font-family: var(--font-body); font-size: .72rem; color: var(--ink-500); display: block; }

/* ---------- 购物车 / 结算 ---------- */
.cart-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.citem { display: grid; grid-template-columns: 104px 1fr auto; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line-soft); align-items: start; }
.citem-img { aspect-ratio: 1; border: 1px solid var(--line-soft); border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.citem-img img { width: 100%; height: 100%; object-fit: cover; }
.citem h3 { font-family: var(--font-body); font-size: .95rem; font-weight: 600; margin: 0 0 6px; }
.citem .cfg { font-size: .78rem; color: var(--ink-500); display: grid; gap: 3px; margin: 8px 0; }
.citem .rm { background: none; border: 0; color: var(--ink-400); font-size: .78rem; text-decoration: underline; padding: 0; }
.citem .rm:hover { color: var(--sale); }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; }
.panel h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin-bottom: 16px; }
.sline { display: flex; justify-content: space-between; font-size: .89rem; padding: 6px 0; }
.sline.big { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 14px; font-size: 1.2rem; font-weight: 700; font-family: var(--font-display); }
.pay-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 10px; cursor: pointer; transition: .15s; }
.pay-opt:hover { border-color: var(--ink-400); }
.pay-opt.on { border-color: var(--jade-600); box-shadow: 0 0 0 3px var(--jade-100); }
.pay-opt b { font-size: .9rem; display: block; }
.pay-opt span { font-size: .78rem; color: var(--ink-500); }
.empty { text-align: center; padding: 80px 20px; }
.empty .ic { font-size: 2.6rem; margin-bottom: 14px; }

/* ---------- 订单 ---------- */
.done { max-width: 720px; margin: 0 auto; text-align: center; }
.tick { width: 68px; height: 68px; border-radius: 50%; background: var(--jade-100); color: var(--jade-700); display: flex; align-items: center; justify-content: center; font-size: 1.9rem; margin: 0 auto 22px; }
.kv { display: grid; grid-template-columns: 190px 1fr; gap: 8px 18px; text-align: left; font-size: .9rem; margin: 26px 0; }
.kv b { color: var(--ink-500); font-weight: 400; }
.pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.pill.pending { background: #fdf3e3; color: #8a6320; }
.pill.paid { background: var(--jade-100); color: var(--jade-800); }
.pill.in_production { background: #e8eefb; color: #2b4a8a; }
.pill.shipped { background: #e6f2f6; color: #1f6273; }
.pill.completed { background: var(--cream-200); color: var(--ink-700); }
.pill.cancelled { background: #f6e7e5; color: #8c3225; }
.pill.quoting { background: #f2ecfa; color: #563a8a; }

/* ---------- 表单通用 ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.note { font-size: .82rem; color: var(--ink-500); }

/* ---------- 页脚 ---------- */
.ft { background: var(--ink-900); color: #c9cfd4; margin-top: 80px; padding: 62px 0 30px; }
.ft-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 44px; }
.ft h4 { color: #fff; font-family: var(--font-body); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.ft a { color: #aeb6bd; font-size: .88rem; display: block; padding: 5px 0; }
.ft a:hover { color: #fff; }
.ft .logo { color: #fff; margin-bottom: 14px; }
.ft .about { font-size: .87rem; color: #98a1a9; max-width: 30em; }
.news { display: flex; gap: 8px; margin-top: 14px; }
.news input { flex: 1; padding: 11px 13px; border-radius: var(--r-sm); border: 1px solid #333c45; background: #1b2127; color: #fff; }
.ft-bot { border-top: 1px solid #262d34; margin-top: 46px; padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: #7d868e; }
.paylogos { display: flex; gap: 8px; align-items: center; }
.paylogos span { background: #232a31; border: 1px solid #333c45; border-radius: 5px; padding: 3px 9px; font-size: .7rem; color: #b9c1c8; }

/* ---------- 促销 / 优惠券展示 ---------- */
.promobar {
  background: linear-gradient(90deg, #fdf6e3, #f7ecd2);
  border-bottom: 1px solid #ecdfc0; font-size: .82rem; color: #7a5a12; padding: 9px 0;
}
.promobar .wrap { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: center; }
.promobar .pb-item b { font-family: var(--font-body); letter-spacing: .06em; }
.promobar .pb-sep { color: #d8c69b; }

.offers { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; margin-top: 34px; }
.offers-h h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin-bottom: 14px; }
.offers-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.offer-card { background: var(--cream-100); border: 1px dashed #ddcfae; border-radius: var(--r-md); padding: 14px 16px; }
.offer-card b { display: block; color: var(--jade-800); font-size: .96rem; margin-bottom: 4px; }
.offer-card span { font-size: .78rem; color: var(--ink-500); }

.offerline {
  display: inline-flex; align-items: center; gap: 8px; background: #fdf6e3; border: 1px solid #ecdfc0;
  color: #7a5a12; border-radius: var(--r-sm); padding: 7px 12px; font-size: .84rem; margin: 4px 0 12px;
}
.offerline b { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #a8842f; }

.cpnbox { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 18px; }
.cpnbox h4 { font-family: var(--font-body); font-size: .88rem; font-weight: 700; margin-bottom: 12px; }
.cpnrow { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line-soft); }
.cpnrow:last-child { border-bottom: 0; }
.cpncode {
  font-family: var(--font-body); font-weight: 700; letter-spacing: .06em; font-size: .84rem;
  background: var(--jade-100); color: var(--jade-800); border-radius: var(--r-sm); padding: 5px 10px; flex: none;
}
.cpntxt { flex: 1; font-size: .82rem; color: var(--ink-700); }
@media (max-width: 620px) {
  .cpnrow { flex-wrap: wrap; }
  .cpntxt { flex: 1 1 100%; order: 3; }
}

/* ---------- 主图放大镜 ---------- */
.pd-art { position: relative; cursor: crosshair; }
.pd-art .zoom-lens {
  position: absolute; width: 190px; height: 190px; border-radius: 50%; pointer-events: none;
  border: 3px solid #fff; box-shadow: 0 10px 30px rgba(20, 24, 28, .28), inset 0 0 0 1px rgba(0, 0, 0, .08);
  background-repeat: no-repeat; background-color: #fff; display: none; z-index: 5;
}
.pd-art.zooming .zoom-lens { display: block; }
.pd-art .zoom-hint {
  position: absolute; right: 12px; bottom: 12px; background: rgba(20, 24, 28, .62); color: #fff;
  font-size: .72rem; padding: 5px 10px; border-radius: 999px; pointer-events: none; transition: .2s;
}
.pd-art.zooming .zoom-hint { opacity: 0; }
@media (max-width: 760px) {
  /* 触屏没有 hover，用点击放大代替（也避免遮住手指） */
  .pd-art .zoom-lens { display: none !important; }
}
.pcard-art img { transition: transform .45s cubic-bezier(.2, .7, .3, 1); }
.pcard:hover .pcard-art img { transform: scale(1.06); }

/* ---------- 提示条 / 弹窗 ---------- */
.toast-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--ink-900); color: #fff; padding: 13px 18px; border-radius: var(--r-md);
  box-shadow: var(--sh-3); font-size: .88rem; animation: tin .22s ease; max-width: 340px;
}
.toast.ok { background: var(--jade-800); }
.toast.err { background: #8c3225; }
/* 「有提示但不是错误」用琥珀色 —— 例如「图形已能预览，文字未转曲那部分看不到」 */
.toast.warn { background: #8a5a12; }
@keyframes tin { from { opacity: 0; transform: translateY(10px); } }
.modal-bd { position: fixed; inset: 0; z-index: 190; background: rgba(20, 24, 28, .5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: #fff; border-radius: var(--r-lg); max-width: 560px; width: 100%; padding: 30px; box-shadow: var(--sh-3); max-height: 88vh; overflow: auto; }

/* ---------- 骨架 / 加载 ---------- */
.skel { background: linear-gradient(90deg, #eee 25%, #f6f6f6 37%, #eee 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .grid-p { grid-template-columns: repeat(3, 1fr); }
  .pillars { grid-template-columns: 1fr; }
  /* 手机/平板单列：预览固定在顶栏下方，往下配置时也一直看得见。
     ⚠️ 这里必须把 .cz 改成普通块级、并让 **.cz-left 本身** 做 sticky：
     原来是在单列网格里让 .cz-stage 做 sticky，但网格项的「行」只有内容那么高，
     sticky 没有行程 → 手机上一滚预览就没了（真机回归量出来 canvasTop=-1729）。 */
  .cz { display: block; }
  .cz-left { position: sticky; top: var(--hdr); z-index: 30; background: var(--cream-50); }
  .cz-stage {
    position: static;
    border-radius: 0 0 var(--r-lg) var(--r-lg); border-top: 0;
  }
  .cz-canvas { aspect-ratio: auto; height: 42vh; max-height: 400px; }
  .cz-tools { padding: 8px 10px; gap: 6px; }
  .shell, .cart-wrap { grid-template-columns: 1fr; }
  .pd { grid-template-columns: 1fr; gap: 30px; }
  .hero-in { grid-template-columns: 1fr; padding: 40px 0 46px; }
  .cband { grid-template-columns: 1fr; padding: 36px; }
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
/* ==========================================================================
   移动端（手机优先）—— 美国移动端购物占比最高，这一版按手机习惯重排
   核心思路：
     1. 拇指可达：底部固定「标签栏 + 主行动按钮」，重要操作都在拇指区；
     2. 一屏能看：促销条横向滚动、隐藏次要文案、卡片两列；
     3. 手指友好：所有可点元素 ≥44px、iOS 输入框不缩放（16px 起）；
     4. 有回馈：按下有反馈，不用 hover 才能用的功能一律常显。
   ========================================================================== */
@media (max-width: 760px) {
  :root { --hdr: 54px; --tabbar: 58px; --r-lg: 14px; }
  html { scroll-padding-top: calc(var(--hdr) + 8px); }
  body {
    font-size: 16px;
    /* 给底部标签栏留位置，内容不会被挡住 */
    padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px));
  }
  .wrap { padding: 0 16px; }
  h1 { font-size: 1.8rem; line-height: 1.22; }
  h2 { font-size: 1.42rem; }
  h3 { font-size: 1.1rem; }
  .sec { padding: 36px 0; }
  .sec-tight { padding: 26px 0; }
  .muted.small, .small { font-size: .84rem; }

  /* iOS 上字号 <16px 的输入框会自动放大页面，这条必须守住。
     用 !important 是因为项目里有多条更具体的选择器（如 .hdr-search input / .lrow .th input），
     单靠优先级压不住，而这条关系到手机上能不能正常填表。 */
  input, select, textarea, .inp, .sel, .ta { font-size: 16px !important; }

  /* 手指友好：所有可点元素 ≥40px（主行动按钮 ≥46px） */
  .btn { min-height: 46px; }
  .btn-sm { min-height: 40px; padding: 10px 14px; }
  .icon-btn { min-height: 44px; min-width: 44px; }
  .sw { width: 44px; height: 44px; }
  .chip { min-height: 42px; }

  /* 顶部两条信息条：改成横向滚动，只占一行，省出竖向空间。
     右侧加一道渐隐，暗示「还能往右滑」（不然用户根本不知道有更多优惠） */
  .announce { font-size: .72rem; padding: 6px 14px; letter-spacing: .02em; white-space: nowrap; overflow-x: auto; }
  .promobar {
    font-size: .76rem; padding: 7px 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  }
  .promobar::-webkit-scrollbar { display: none; }
  .promobar .wrap { flex-wrap: nowrap; justify-content: flex-start; gap: 0 14px; }
  .promobar .pb-sep { display: none; }
  .promobar .pb-item { flex: 0 0 auto; }

  /* 头部：收起导航，改用底部标签栏（更像 App，也把导航从拇指够不到的地方挪走） */
  .hdr-in { gap: 8px; }
  .logo { font-size: 1.1rem; letter-spacing: .03em; }
  .logo span { display: none; }
  .burger { display: none; }
  .nav { display: none !important; }
  /* 搜索：手机上展开成顶栏下方一整条，比塞在图标旁边好点得多 */
  .hdr-search.on {
    position: absolute; left: 0; right: 0; top: 100%; padding: 10px 16px;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--sh-2); z-index: 65;
  }
  .hdr-search input { width: 100%; padding: 11px 14px; }
  .icon-btn { padding: 9px; min-width: 40px; min-height: 40px; justify-content: center; }
  .lang-btn { padding: 7px 11px; }
  .cart-n { font-size: .66rem; }

  /* 商品网格：两列，卡片上少放字，价格和「加入购物车」一眼可见 */
  .grid-p { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .pcard h3 { font-size: .86rem; line-height: 1.35; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .pcard .blurb { display: none; }
  .pcard-art { margin-bottom: 10px; }
  .price { flex-wrap: wrap; gap: 6px; }
  .price .now { font-size: .96rem; }
  .pcard-quick .btn { padding: 11px 12px; font-size: .8rem; }

  /* 信任条 / 三板块 / 定制横幅 */
  .trust { grid-template-columns: 1fr; gap: 12px; }
  .trust > div { padding: 18px; }
  .pillars { gap: 16px; }
  .cband { padding: 26px 20px; border-radius: var(--r-lg); }
  .offers { padding: 18px; margin-top: 24px; }
  .offers-g { grid-template-columns: 1fr; }

  /* Hero：图片放上面、文字在下，CTA 通栏更好点 */
  .hero-in { padding: 24px 0 34px; gap: 22px; }
  .hero-art { order: -1; }
  .hero .kick { margin-bottom: 10px; font-size: .68rem; }
  .hero .sub { font-size: 1rem; margin-bottom: 22px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { flex: 1 1 100%; padding: 15px 20px; }
  .hero-badges { gap: 10px 16px; font-size: .8rem; }

  /* 筛选标签：横向滑动不换行（右侧渐隐提示可滑） */
  .toolbar { gap: 10px; }
  .chips {
    flex: 0 0 auto; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; padding: 9px 14px; }
  .toolbar select { width: 100%; }

  /* 商品详情 */
  .pd-art .zoom-lens { display: none !important; }        /* 触屏没有 hover */
  .pd h1 { font-size: 1.45rem; }
  .pd-price .now { font-size: 1.6rem; }
  .pd .btn-lg { width: 100%; padding: 15px 20px; }
  .qty { width: 100%; justify-content: space-between; }
  .qty button { width: 56px; height: 50px; }
  .qty input { width: 100%; height: 50px; }
  .tabbar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tabbar::-webkit-scrollbar { display: none; }
  .tabbar button { flex: 0 0 auto; padding: 13px 14px; }
  .specs th { width: 42%; }

  /* 定制器：预览在上、配置在下；画布压扁一点，给下面的配置留屏幕 */
  .cz-canvas { height: 34vh; max-height: 320px; }
  .cz-tools { padding: 8px 10px; gap: 6px; overflow-x: auto; flex-wrap: nowrap; }
  .cz-tools::-webkit-scrollbar { display: none; }
  .cz-tools .btn { flex: 0 0 auto; }
  .cz-tools .cz-tag { display: none; }
  .steps { gap: 6px; margin-bottom: 18px; }
  .steps div { min-width: 0; flex: 1 1 calc(50% - 3px); text-align: center; padding: 9px 6px; font-size: .74rem; }
  .card { padding: 18px; }
  .form-grid, .row2, .row3 { grid-template-columns: 1fr; }
  .lrow { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  /* 色板排整齐：6 列等分，12 个色正好两行（原来会零散掉一个到下一行） */
  .lrow .lsw { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .lrow .lsw button { width: 100%; height: auto; aspect-ratio: 1; }
  .swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .swatches .sw { width: 100%; height: auto; aspect-ratio: 1; }
  .facemap { grid-template-columns: repeat(4, 1fr); max-height: 260px; }
  .facegrid { grid-template-columns: repeat(4, 1fr); max-height: 260px; }
  .applyall { padding: 12px; }
  .summary { position: static; }

  /* 购物车 / 结算 */
  .citem { grid-template-columns: 74px 1fr; gap: 12px; padding: 16px 0; }
  .citem .citem-r { grid-column: 2; }
  .citem .qty { width: auto; }
  .citem .qty button { width: 44px; height: 42px; }
  .citem .qty input { width: 46px; height: 42px; }
  .panel { padding: 18px; }
  .cpnrow { flex-wrap: wrap; }
  .cpntxt { flex: 1 1 100%; order: 3; }
  .cpnrow .btn { width: 100%; }
  .form-grid .field label { font-size: .88rem; }
  .pay-opt { padding: 15px 14px; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv b { margin-top: 12px; }

  /* 页脚：竖向排，订阅框铺满 */
  .ft { padding: 40px 0 24px; margin-top: 52px; }
  .ft-grid { grid-template-columns: 1fr; gap: 26px; }
  .news input { font-size: 16px; }

  /* 提示条挪到标签栏上方，别被挡住 */
  .toast-wrap { left: 14px; right: 14px; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + 12px); }
  .toast { max-width: none; }

  /* 模态：底部抽屉式，拇指好按 */
  .modal-bd { align-items: flex-end; padding: 0; }
  .modal { border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 88vh; padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* 只有真正带 hover 的设备才用 hover 效果（触屏点一下就"卡住"最讨厌） */
@media (hover: none) {
  .pcard-quick { opacity: 1; transform: none; }
  .pcard:hover .pcard-art img { transform: none; }
  .zoom-hint { display: none; }
}
/* 按下有反馈（手机上没有 hover，靠这个告诉用户"点到了"） */
@media (hover: none) {
  .btn:active, .chip:active, .icon-btn:active, .pay-opt:active, .sw:active { opacity: .82; transform: scale(.985); }
  .pcard-art:active { opacity: .9; }
}

/* ---------- 底部标签栏（仅手机显示） ---------- */
.m-tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  height: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(253, 252, 248, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.m-tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: .66rem; color: var(--ink-500); position: relative; letter-spacing: .01em;
}
.m-tabbar a.on { color: var(--jade-700); font-weight: 600; }
.m-tabbar a svg { width: 22px; height: 22px; }
.m-tabbar .m-badge {
  position: absolute; top: 6px; left: 50%; margin-left: 6px;
  background: var(--jade-700); color: #fff; border-radius: 999px; font-size: .62rem;
  min-width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
@media (max-width: 760px) { .m-tabbar { display: flex; } }

/* ---------- 拇指区固定行动条（商品 / 购物车 / 定制） ---------- */
.mcta {
  display: none;
  position: fixed; left: 0; right: 0; z-index: 79;
  bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px));
  background: rgba(253, 252, 248, .97); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 10px 16px; gap: 12px; align-items: center;
}
.mcta .m-price { font-family: var(--font-display); font-size: 1.24rem; line-height: 1.1; }
.mcta .m-sub { font-size: .7rem; color: var(--ink-500); }
.mcta .btn { flex: 1; padding: 15px 18px; }
@media (max-width: 760px) { .mcta { display: flex; } }
/* 有固定行动条的页面，主内容底部再留出它的高度 */
@media (max-width: 760px) { body.has-mcta { padding-bottom: calc(var(--tabbar) + 74px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 打印（后台打单用） ---------- */
@media print {
  .hdr, .announce, .ft, .toast-wrap { display: none !important; }
}

/* 会员账户页 / 结账页会员提示 */
.acct-wrap { max-width: 760px; }
.tabs2 { display: flex; gap: 8px; margin-bottom: 14px; }
.tabs2 button {
  flex: 1; padding: 9px 12px; border: 1px solid var(--line); background: #fff;
  border-radius: var(--r-sm); font-size: .86rem; cursor: pointer; color: var(--ink-500);
}
.tabs2 button.on { border-color: var(--jade-700); color: var(--jade-800); font-weight: 600; box-shadow: 0 0 0 2px var(--jade-100); }
.ord-tb { width: 100%; border-collapse: collapse; font-size: .84rem; }
.ord-tb th, .ord-tb td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.ord-tb th { font-size: .72rem; color: var(--ink-500); font-weight: 500; }
.membox { border-left: 3px solid var(--jade-600); }

/* 登录门槛提示（业主 2026-09-29：必须注册会员才能加购/下单/上传） */
.gatebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 11px 14px; border-radius: 10px;
  background: #fff8e6; border: 1px solid #f0d9a0; color: #6b5525; font-size: .84rem; }
.gatebar a { text-decoration: none; }
.card.center { text-align: center; }
@media (max-width: 640px) { .gatebar { font-size: .8rem; } }

/* ==========================================================================
   MARCWELL 扩展组件
   ========================================================================== */

/* 商品徽标 */
.badge-fba { background: var(--jade-100); color: var(--jade-800); }
.badge-custom { background: var(--gold-300); color: #5d4a12; }

/* 商品列表：分类区块 */
.cat-block { margin-bottom: 44px; scroll-margin-top: 90px; }
.cat-title {
  font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 18px;
  padding-bottom: 12px; border-bottom: 2px solid var(--line);
}
.cat-title .small { font-weight: 400; margin-left: 8px; }

/* 定制配置器 */
.config { display: grid; grid-template-columns: 1fr 420px; gap: 40px; align-items: start; }
.cfg-preview { position: sticky; top: 96px; }
.cfg-tile {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-lg);
  background: linear-gradient(145deg, var(--jade-700), var(--jade-900));
  box-shadow: var(--sh-3); display: grid; place-items: center; overflow: hidden;
  transition: background .35s ease;
}
.cfg-tile img { width: 62%; opacity: .92; }
.cfg-art {
  position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .22em;
  color: rgba(255, 255, 255, .82); text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.cfg-form label { display: block; margin: 0 0 14px; font-size: .88rem; color: var(--ink-700); }
.cfg-form .inp, .cfg-form select { width: 100%; margin-top: 5px; }

/* 购物车行 */
.cart-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.cart-line {
  display: grid; grid-template-columns: 90px 1fr auto auto auto; gap: 16px;
  align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line-soft);
}
.cart-line img { width: 90px; height: 90px; object-fit: cover; border-radius: var(--r-md); background: var(--cream-100); }
.cart-line .qty { display: flex; align-items: center; gap: 8px; }
.cart-line .qty button {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; cursor: pointer; line-height: 1; font-size: 1rem; color: var(--ink-700);
}
.cart-line .qty button:hover { background: var(--cream-100); }
.cart-amt { font-weight: 600; min-width: 76px; text-align: right; }
.cart-rm {
  background: none; border: 0; color: var(--ink-400); cursor: pointer;
  font-size: .84rem; text-decoration: underline; padding: 0;
}
.cart-rm:hover { color: var(--sale); }

/* 政策页正文 */
.prose { max-width: 780px; margin: 0 auto; padding: 34px 38px; }
.prose h3 { font-family: var(--font-display); margin: 26px 0 8px; font-size: 1.08rem; }
.prose h3:first-child { margin-top: 0; }
.prose p { color: var(--ink-700); }
.prose ul { color: var(--ink-700); padding-left: 20px; }

@media (max-width: 900px) {
  .config, .cart-wrap { grid-template-columns: 1fr; }
  .cfg-preview { position: static; max-width: 320px; margin: 0 auto 24px; }
  .cart-line { grid-template-columns: 72px 1fr; row-gap: 10px; }
  .cart-line img { width: 72px; height: 72px; }
  .prose { padding: 24px 20px; }
}