/* base.css · 商家页多模版基座
   消费皮肤变量(由 /m/_assets/t/<id>.css 注入到 body.t-<id>)。
   定义版式族 lay-* + 区块 m-* + 响应式 + 稀疏降级。改一处全模版生效。 */

*{box-sizing:border-box;margin:0;padding:0;}
img{max-width:100%;display:block;}
a{color:var(--accent-ink);text-decoration:none;}
a:hover{text-decoration:underline;}

html{-webkit-text-size-adjust:100%;}
html,body{overscroll-behavior:none;}
body.m-page{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
}

.m-root{max-width:840px;margin:0 auto;padding:0 22px 48px;}

/* 合成测试数据横幅（展示注明，绝不与真实混淆）*/
.m-testbanner{background:#bf4800;color:#fff;text-align:center;font-size:12.5px;font-weight:600;letter-spacing:.04em;padding:7px 12px;}

/* 商家入驻/认领入口：商家页一律不出抢眼 CTA（DESIGN-RULES §4「入驻=低调，不抢眼」）。
   全局隐藏所有认领入口(导航「这是你的店?」按钮 / 页脚「认领」链接 / 无联系时的「认领此店」CTA)，26 套一处生效。 */
.m-page .claim,
.m-page a[href^="/join"]{display:none!important;}

/* —— 语言切换条 —— */
.m-langs{display:flex;gap:2px;justify-content:flex-end;padding:16px 22px 0;max-width:880px;margin:0 auto;}
.m-langs a{font-size:12px;letter-spacing:.04em;color:var(--ink-dim);padding:5px 9px;border-radius:980px;}
.m-langs a.on{color:var(--on-accent);background:var(--accent);}
.m-langs a:hover{text-decoration:none;color:var(--ink);}

/* —— Hero —— */
.m-hero{padding:26px 0 18px;}
.m-hero-in{display:flex;flex-direction:column;gap:14px;}
.m-kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--kicker-color);font-weight:600;}
.m-name{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  letter-spacing:var(--display-spacing);
  text-transform:var(--display-transform);
  font-size:var(--display-size);
  line-height:1.04;
  display:flex;flex-direction:column;gap:6px;
}
.m-name-sub{font-size:.4em;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-dim);}
.m-tagline{font-size:17px;color:var(--ink-dim);max-width:44ch;line-height:1.5;}
.m-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:13.5px;color:var(--ink-dim);}
.m-live{display:inline-flex;align-items:center;gap:7px;color:var(--accent-ink);font-weight:500;}
.m-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);}
.m-badge{font-size:12px;color:var(--accent-ink);}
.m-tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;}
.m-tags li{font-size:12px;color:var(--ink-dim);background:var(--surface);border:1px solid var(--line);border-radius:980px;padding:4px 11px;}

/* —— 关键信息 facts —— */
.m-facts{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.m-fact{display:grid;grid-template-columns:88px 1fr;gap:12px;background:var(--surface);padding:13px 16px;}
.m-fact dt{font-size:12.5px;color:var(--ink-dim);letter-spacing:.02em;}
.m-fact dd{font-size:14.5px;color:var(--ink);word-break:break-word;}

/* 点顶部 CTA 落到代客框时闪一下，提示"在这里下单/联系"。 */
@keyframes m-cc-flash{0%,100%{box-shadow:0 0 0 0 rgba(240,140,66,0);}30%{box-shadow:0 0 0 4px rgba(240,140,66,.45);}}
.m-cc-flash{animation:m-cc-flash 1.2s ease-out;border-radius:14px;}

/* —— CTA —— */
.m-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.m-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:980px;font-size:14.5px;font-weight:500;font-family:var(--font-body);cursor:pointer;}
.m-btn:hover{text-decoration:none;opacity:.92;}
.m-btn-map{background:var(--accent);color:var(--on-accent);}
.m-btn-call{background:transparent;color:var(--ink);border:1px solid var(--line);}

/* —— 区段通用 —— */
.m-sec{margin-top:26px;}
.m-h{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--kicker-color);padding-bottom:10px;margin-bottom:16px;border-bottom:1px solid var(--line);}

/* services */
.m-svc-list{list-style:none;display:flex;flex-direction:column;}
.m-svc-list li{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
.m-svc-n{font-size:12px;color:var(--ink-dim);font-variant-numeric:tabular-nums;min-width:24px;}
.m-svc-name{flex:1;font-size:15px;color:var(--ink);}
.m-svc-name i{font-style:normal;font-size:12.5px;color:var(--ink-dim);margin-left:8px;}
.m-svc-price{font-size:15px;color:var(--accent-ink);font-weight:600;text-align:right;font-variant-numeric:tabular-nums;}
.m-svc-price small{display:block;font-size:11.5px;color:var(--ink-dim);font-weight:400;}

/* gallery */
.m-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;}
.m-grid figure{background:var(--surface);border-radius:calc(var(--radius) - 4px);overflow:hidden;border:1px solid var(--line);}
.m-grid img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.m-grid figcaption{font-size:11.5px;color:var(--ink-dim);padding:7px 10px;}

/* story */
.m-prose p{font-size:15.5px;line-height:1.8;color:var(--ink);margin-bottom:14px;}
.m-prose p:last-child{margin-bottom:0;}

/* rating（hero 内） */
.m-rating{color:var(--accent-ink);font-weight:600;font-variant-numeric:tabular-nums;}
.m-rating small{color:var(--ink-dim);font-weight:400;}

/* reviews */
.m-rv-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.m-rv{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--radius) - 4px);padding:16px;}
.m-rv blockquote{font-size:14px;line-height:1.6;color:var(--ink);}
.m-rv figcaption{margin-top:10px;font-size:12.5px;color:var(--ink-dim);}
.m-rv-stars{color:var(--accent);letter-spacing:1px;}
/* P2 「经闹闹成交」验证标：c2m 真实成交评论(verified)旁的小绿标。主题无关、与各模板署名/星级同排。 */
.m-rv-verified{display:inline-block;font-size:11.5px;font-weight:600;line-height:1.4;padding:1px 7px;border-radius:999px;background:rgba(22,163,74,.12);color:#16a34a;white-space:nowrap;vertical-align:middle;}

/* A1 服务案例 + 对话样例：主题无关样式——背景=文字色(currentColor)半透明淡化，文字 inherit，
   所以任何明暗/任何模板皮肤都自适配可读；商家气泡叠 --accent 色调(有则用、无则回退 currentColor)。
   color-mix 不支持的老浏览器优雅降级为透明背景(纯文字)。 */
/* 全部以 .m-page 作用域提特异性(0,2,0)，稳胜 v2 模板的 .d-{id} *{padding:0} 作用域重置(0,1,0)，与加载顺序无关 */
.m-page .m-a1{max-width:880px;margin:0 auto;padding:0 22px;}
.m-page .m-case-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.m-page .m-case{background:color-mix(in srgb,currentColor 5%,transparent);border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:12px;padding:14px 16px;}
.m-page .m-case-t{font-family:var(--font-display,inherit);font-size:14.5px;font-weight:600;color:inherit;margin-bottom:4px;}
.m-page .m-case-s{font-size:13px;line-height:1.55;color:inherit;opacity:.72;}

.m-page .m-dlg-tip{font-size:13px;line-height:1.5;color:inherit;opacity:.72;margin-bottom:10px;max-width:52ch;}
.m-page .m-dlg{display:flex;flex-direction:column;gap:8px;}
.m-page .m-dlg-row{display:flex;}
.m-page .m-dlg-c{justify-content:flex-start;}
.m-page .m-dlg-m{justify-content:flex-end;}
.m-page .m-dlg-bubble{max-width:78%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;color:inherit;border:1px solid transparent;}
.m-page .m-dlg-c .m-dlg-bubble{background:color-mix(in srgb,currentColor 7%,transparent);border-color:color-mix(in srgb,currentColor 13%,transparent);border-bottom-left-radius:5px;}
.m-page .m-dlg-m .m-dlg-bubble{background:color-mix(in srgb,var(--accent,currentColor) 16%,transparent);border-color:color-mix(in srgb,var(--accent,currentColor) 26%,transparent);border-bottom-right-radius:5px;}

/* qa */
.m-qa-list{display:flex;flex-direction:column;gap:16px;}
.m-qa-i dt{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:5px;}
.m-qa-i dd{font-size:14.5px;color:var(--ink-dim);line-height:1.65;}

/* —— 页脚 —— */
.m-foot{max-width:840px;margin:36px auto 0;padding:20px 22px 30px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:13px;color:var(--ink-dim);}
.m-foot-brand{font-family:var(--font-display);font-weight:600;color:var(--ink);}
.m-foot-brand span{color:var(--accent);}
.m-foot-links{display:flex;gap:14px;}
.m-foot-meta{margin-left:auto;font-variant-numeric:tabular-nums;}

/* ============================================================
   版式族
   ============================================================ */

/* sidebar：主 + 粘性侧栏 */
.lay-cols{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start;margin-top:8px;}
.lay-cols .lay-aside{position:sticky;top:18px;display:flex;flex-direction:column;gap:14px;}
.lay-main>.m-sec:first-child{margin-top:0;}

/* magazine：宽栏正文 + 资料边注 */
.lay-mag{display:grid;grid-template-columns:1fr 280px;gap:36px;align-items:start;margin-top:8px;}
.lay-mag-side{display:flex;flex-direction:column;gap:16px;}
.lay-mag .m-name{font-size:clamp(34px,7vw,62px);}
.lay-mag-main>.m-sec:first-child{margin-top:0;}

/* split：左名片右资料卡 */
.lay-split{display:grid;grid-template-columns:1.2fr .8fr;gap:34px;align-items:center;max-width:980px;margin:8px auto 0;padding:24px 22px 0;min-height:46vh;}
.lay-split .lay-split-r{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:14px;}
.lay-split .lay-split-r .m-facts{border:0;background:transparent;}
.lay-split .lay-split-r .m-fact{background:transparent;padding:10px 0;border-bottom:1px solid var(--line);}
.m-root.lay-split{max-width:none;padding:0 0 72px;}

/* ticket：票根 */
.m-root.lay-ticket{max-width:560px;}
.lay-ticket .ticket-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:8px;}
.lay-ticket .ticket-top{padding:26px 24px 20px;}
.lay-ticket .ticket-mid,.lay-ticket .ticket-foot{padding:20px 24px;}
.lay-ticket .ticket-perf{height:0;border-top:2px dashed var(--line);position:relative;}
.lay-ticket .ticket-mid .m-facts{border:0;background:transparent;}
.lay-ticket .ticket-mid .m-fact{background:transparent;padding:9px 0;border-bottom:1px dotted var(--line);}
.lay-ticket .m-name{font-size:clamp(26px,7vw,38px);}

/* board：深色全幅菜单板 */
.m-root.lay-board{max-width:none;padding:0;}
.lay-board{background:var(--bg);}
.lay-board .m-hero{max-width:820px;margin:0 auto;padding:40px 22px 24px;}
.lay-board .board-body{max-width:820px;margin:0 auto;padding:0 22px 64px;}
.lay-board .m-svc-price{color:var(--accent-ink);}

/* index：瑞士网格编号索引 */
.lay-index{margin-top:8px;}
.lay-index .m-facts{border-radius:0;border-left:0;border-right:0;}
.lay-index .m-sec,.lay-index .m-facts{border-top:2px solid var(--line);padding-top:16px;}
.lay-index .m-h{border-bottom:0;}

/* poster：超大字海报 */
.m-root.lay-poster{max-width:1000px;}
.lay-poster .poster-hero{padding:48px 0 30px;}
.lay-poster .poster-hero .m-name{font-size:var(--display-size);}
.lay-poster .poster-body{max-width:760px;}

/* zen：留白居中 */
.m-root.lay-zen{max-width:680px;}
.lay-zen .m-hero{text-align:center;padding:60px 0 30px;}
.lay-zen .m-hero-in{align-items:center;}
.lay-zen .m-tagline{margin:0 auto;}
.lay-zen .m-meta{justify-content:center;}
.lay-zen .m-tags{justify-content:center;}
.lay-zen .zen-body{display:flex;flex-direction:column;gap:8px;}
.lay-zen .m-h{text-align:center;border-bottom:0;letter-spacing:.2em;}

/* card：着色底上的圆角卡 */
.m-root.lay-card{max-width:720px;padding-top:22px;}
.lay-card .card-shell{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 60px -34px rgba(0,0,0,.3);}
.lay-card .m-hero{padding:34px 28px 22px;}
.lay-card .card-body{padding:0 28px 32px;}
.lay-card .m-facts{background:var(--surface2);}

/* ============================================================
   闹闹代客成交（concierge）· 护城河 CTA
   ============================================================ */
.m-concierge{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;}
.m-concierge .m-h{border-bottom:0;margin-bottom:4px;}
/* 对话区收成可读列宽：桌面端不再铺满拉宽(气泡贴两边、中间空荡);手机端视口<600 时=100%不受影响。 */
.m-concierge .m-cc{max-width:600px;}
.m-cc-tip{font-size:13px;color:var(--ink-dim);margin-bottom:12px;line-height:1.5;max-width:600px;}
.m-cc-intent{display:flex;gap:7px;margin-bottom:9px;}
.m-cc-intent button{min-height:44px;font-size:13px;color:var(--ink-dim);background:var(--bg);border:1px solid var(--line);border-radius:980px;padding:6px 14px;cursor:pointer;font-family:var(--font-body);}
.m-cc-intent button.on{background:var(--accent);color:var(--on-accent);border-color:transparent;}
.m-cc-in{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:12px;font-family:var(--font-body);font-size:15px;background:var(--bg);color:var(--ink);outline:none;resize:vertical;}
.m-cc-in:focus{border-color:var(--accent);}
.m-cc-go{min-height:44px;margin-top:9px;font-size:14.5px;font-weight:600;color:var(--on-accent);background:var(--accent);border:none;border-radius:980px;padding:10px 20px;cursor:pointer;font-family:var(--font-body);}
.m-cc-thread{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-height:340px;overflow-y:auto;}
.m-cmsg{font-size:14px;line-height:1.45;padding:8px 12px;border-radius:14px;max-width:84%;}
.m-cmsg .cm-main{display:block;}
.m-cmsg .cm-sub{display:block;font-size:12px;margin-top:4px;padding-top:4px;border-top:1px dashed var(--line);opacity:.85;}
/* 气泡加细边:深色模版上 surface2/accent-soft 填充太淡几乎隐形,描边保证轮廓可见。 */
.m-cmsg.me{align-self:flex-end;background:var(--accent-soft, rgba(176,138,62,.13));border:1px solid var(--line);border-bottom-right-radius:4px;}
.m-cmsg.me .cm-sub{color:var(--accent-ink);}
.m-cmsg.shop{align-self:flex-start;background:var(--surface2);border:1px solid var(--line);border-bottom-left-radius:4px;}
.m-cmsg.shop .cm-sub{color:var(--ink-dim);}
.m-cmsg.nao{align-self:center;background:none;color:var(--ink-dim);font-size:12px;padding:2px 0;max-width:100%;}
.m-cc-send{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;}
.m-cc-lbl{font-size:13px;color:var(--ink-dim);margin-right:2px;}
.m-chan{min-height:44px;display:inline-flex;align-items:center;font-size:13px;font-weight:500;border-radius:980px;padding:7px 15px;text-decoration:none;border:1px solid var(--line);color:var(--ink);cursor:pointer;font-family:var(--font-body);}
.m-chan.line{background:#06C755;color:#fff;border-color:transparent;}
.m-chan.wa{background:#25D366;color:#fff;border-color:transparent;}
.m-chan.call{background:var(--accent);color:var(--on-accent);border-color:transparent;}
.m-cc-fu{display:flex;gap:8px;margin-top:11px;}
.m-cc-fu .fin{min-height:44px;flex:1;min-width:0;padding:9px 13px;border:1px solid var(--line);border-radius:980px;font-family:var(--font-body);font-size:14px;background:var(--bg);color:var(--ink);outline:none;}
.m-cc-fu .fin:focus{border-color:var(--accent);}
.m-cc-fu .fsend{flex:0 0 auto;width:44px;min-height:44px;border:none;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:16px;cursor:pointer;}
/* 两条路:闹闹代发(主,护城河)/我自己联系(次)。代发用强调色突出,自联走普通描边。 */
.m-cc-paths{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:11px;max-width:600px;}
.m-cc-choose{flex-basis:100%;font-size:13px;color:var(--ink-dim);margin-bottom:2px;}
.m-chan.relay{background:var(--accent);color:var(--on-accent);border-color:transparent;font-weight:600;}
/* 带上称呼/地址(上门用):勾选 + 多地址下拉。 */
.m-cc-fb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:11px;}
.m-cc-attach{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-dim);margin-top:9px;cursor:pointer;}
.m-cc-addr{width:100%;margin-top:6px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:13px;}

/* ============================================================
   响应式
   ============================================================ */
@media(max-width:760px){
  .lay-cols,.lay-mag,.lay-split{grid-template-columns:1fr;gap:24px;}
  .lay-cols .lay-aside{position:static;}
  .lay-split{min-height:0;padding-top:8px;}
  .m-fact{grid-template-columns:80px 1fr;}
}
@media(max-width:420px){
  .m-root{padding-left:16px;padding-right:16px;}
  .m-langs{padding-left:16px;padding-right:16px;}
}