/* ============================================================
   LASTGROVE Web · 前后端分离版补充样式
   只写「原型里没有、但真实前端页面需要」的部分。
   设计系统（颜色、字阶、间距、组件）全部来自 app.css / refine.css，此处不重复定义。
   ============================================================ */

/* 集合页 / 通用页标题区 */
.collhead{padding:30px 0 26px;border-bottom:1px solid var(--line-3);margin-bottom:8px}
.collhead h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1.1;letter-spacing:-.01em}
.collhead p{margin-top:10px;font-size:13px;color:var(--muted);max-width:640px;line-height:1.65}

.cartlines{border-top:1px solid var(--line-3)}
.cartlines .cline{border-bottom:1px solid var(--line-3);padding:18px 0}

.donebox{padding:40px 0 70px}
.donebox h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,40px);line-height:1.12;margin:10px 0 12px}
.donebox .lede{font-size:13.5px;color:var(--ink-2);line-height:1.7;max-width:520px}
.ordernum{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:24px 0 0;padding:16px 20px;background:var(--cream-d);border:1px solid var(--line-2);
}
.ordernum span{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.ordernum b{font-family:var(--mono, ui-monospace, monospace);font-size:17px;letter-spacing:.04em;color:var(--sea)}

/* 订单进度条 */
.trackbar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:26px 0 8px}
.trackbar i{
  position:relative;font-style:normal;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);padding-top:20px;
}
.trackbar i span{
  position:absolute;top:4px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--line-2);
}
.trackbar i::before{
  content:"";position:absolute;top:8px;left:9px;right:0;height:1px;background:var(--line-2);
}
.trackbar i:last-child::before{display:none}
.trackbar i.on{color:var(--sea)}
.trackbar i.on span{background:var(--sea)}
.trackbar i.on::before{background:var(--sea)}

/* 表单错误提示 */
.falert{
  margin:12px 0;padding:12px 14px;border-left:2px solid var(--clay, #B4472F);
  background:rgba(180,71,47,.06);font-size:12px;line-height:1.7;color:#8A3A26;
}
.fld.bad input,.fld.bad select{border-color:#B4472F;background:rgba(180,71,47,.03)}
/* 会话过期属于正常提示，不是用户做错了事，用中性墨绿而不是报警红 */
.falert--note{border-left-color:var(--pine,#1B3A34);background:rgba(27,58,52,.05);color:var(--pine,#1B3A34)}

/* 后台：搜索框与柱状图 */
.admsearch{display:flex;gap:8px}
.admsearch input{
  width:260px;padding:9px 12px;border:1px solid var(--line-2);background:var(--cream);
  font:inherit;font-size:12px;color:var(--ink);
}
.barchart{
  display:flex;align-items:flex-end;gap:3px;height:180px;padding-top:10px;
}
.barchart i{
  flex:1 1 0;min-width:2px;background:var(--sea);opacity:.72;border-radius:1px 1px 0 0;
  transition:opacity .18s;
}
.barchart i:hover{opacity:1}

/* 迷你商品卡（详情页关联推荐） */
.grid--4{grid-template-columns:repeat(4,1fr)}
.card--mini{display:block}
.card--mini .card__body{padding-top:10px}
.card--mini .card__price{margin-top:4px;display:block;color:var(--ink-2)}

/* 后台移动端：侧栏改抽屉 */
@media(max-width:900px){
  .adm__side{position:fixed;top:0;bottom:0;left:0;width:236px;z-index:120;transform:translateX(-101%);transition:transform .3s var(--ease)}
  body.adm-open .adm__side{transform:none}
  .adm__main{width:100%}
  #admMenuBtn{display:inline-flex !important}
  .admsearch input{width:100%}
  .barchart{height:130px}
  .trackbar{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:620px){
  .collhead{padding:22px 0 20px}
  .ordernum{flex-direction:column;align-items:flex-start;gap:6px}
  .grid--4{grid-template-columns:repeat(2,1fr)}
}

/* 后台「需要处理」条目：数字与文案之间必须有间距，
   否则会渲染成 "5Orders waiting to ship" */
.attn{
  display:flex;align-items:baseline;gap:9px;
  padding:11px 14px;border:1px solid var(--line-3);background:var(--cream);
  transition:border-color .18s,background .18s;
}
.attn:hover{border-color:var(--sea);background:rgba(27,58,52,.03)}
.attn b{font-size:17px;font-weight:600;color:var(--sea);font-variant-numeric:tabular-nums;min-width:18px}
.attn span{font-size:12px;color:var(--ink-2)}

/* ============================================================
   后台补充模块：优惠券 / 评价 / 客户 / 库存流水 / 审计
   ============================================================ */

/* 优惠券新建表单：宽屏三列、窄屏单列 */
.cform{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end;max-width:900px}
/* 两列版：内容页的「标题 + 导语」必须同行相邻。
   三列时 about-title / about-intro / care-title 挤在一行，读者要跨列配对。 */
.cform--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
.cform .afld{display:flex;flex-direction:column;gap:6px}
.cform .btn{justify-self:start;grid-column:span 1}

/* 评价卡片列表 */
.revlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.revcard{border:1px solid var(--line-3);background:var(--cream);padding:16px 17px;display:flex;flex-direction:column;gap:8px}
.revcard__hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.revcard h3{font-size:14px;line-height:1.35;font-family:var(--sans);font-weight:600;letter-spacing:0}
.revcard p{font-size:12.5px;line-height:1.62;color:var(--ink-2)}
.revcard__ft{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding-top:10px;border-top:1px solid var(--line-3);font-size:11.5px;color:var(--ink-2)}
.stars{display:inline-flex;gap:2px;letter-spacing:0}
.stars i{font-style:normal;font-size:12px;color:rgba(148,140,129,.34)}
.stars i.on{color:#C08A2E}

/* 库存流水：正负增量用颜色区分（入库=海蓝，出库=陶土红） */
.delta-up{color:var(--sea);font-weight:600;font-variant-numeric:tabular-nums}
.delta-dn{color:var(--clay);font-weight:600;font-variant-numeric:tabular-nums}

/* 订单金额汇总：左标签、右数值。
   这两条（.srow / .tag）在页面里用了却一直没有定义，渲染出来是
   「Subtotal$64.00」「Shipping · Standard$6.90」粘成一串，桌面端同样错。
   靠肉眼扫截图容易当成"字挤了"，实际是缺样式。 */
.srow{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:5px 0;font-size:12.5px;color:var(--ink-2);
}
.srow b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.srow--total{
  border-top:1px solid var(--line-2);margin-top:8px;padding-top:10px;
  font-size:13.5px;color:var(--ink);
}
.srow--total b{font-size:15px}
/* 赠品标记：金额是 $0，但确实占了一个仓位，必须一眼能认出来 */
.tag{
  display:inline-block;margin-left:6px;padding:1px 6px;
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--sand);color:var(--sea);vertical-align:1px;
}

@media(max-width:900px){
  .cform{grid-template-columns:repeat(2,minmax(0,1fr))}
  .revlist{grid-template-columns:1fr}
}

@media(max-width:620px){
  .cform{grid-template-columns:1fr;max-width:none}
  .cform .btn{grid-column:auto;width:100%}
  .revcard__ft{align-items:flex-start}
}

/* 窄屏表格：让表格在面板内部横向滚动，而不是把整页顶宽。
   min-width:0 是关键——grid 子项默认 min-width:auto，会被表格的 min-content 撑开，
   结果就是页面出现横向滚动条（仪表盘的 Top products / Restock soon 最容易踩到）。 */
.adm__body .panel{min-width:0}
.adm__body .two > *,
.adm__body .two-eq > *{min-width:0}
.adm__body .panel__bd.flush{overflow-x:auto;-webkit-overflow-scrolling:touch}
.adm__body .panel__bd.flush > table.atable{min-width:100%;width:max-content}
/* 数值列不折行：优惠券的「84 / 500 17%」在窄列里会被断成两行，
   百分比孤零零落到下一行，读起来像另一个字段。 */
.adm__body table.atable td.num,
.adm__body table.atable th.num{white-space:nowrap}

/* 图标兜底尺寸：svg 只有 viewBox 没有 width/height 时，
   在 flex 容器里会按替换元素默认尺寸（300×150）渲染或被压成 0，
   表现为「按钮有框、里面是空白」。后台汉堡按钮与门店端菜单按钮都踩过。 */
.abtn svg{width:13px;height:13px;flex:none}
.abtn.sm svg{width:12px;height:12px;flex:none}
.mob-menu-btn svg{width:19px;height:19px;flex:none}

/* ============================================================
   内容页正文（Our story / Care / Shipping / FAQ / 法务页）
   这些页面是长文，排版规则和商品页的短文案完全不同：
   行宽压到 68 字符以内，段落间距大于行距，标题用衬线字体拉开层级。
   ============================================================ */
.prose{max-width:680px;padding:34px 0 76px}
.prose h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.1vw,27px);
  line-height:1.25;letter-spacing:-.005em;color:var(--ink);
  margin:36px 0 12px;
}
.prose h2:first-child{margin-top:0}
.prose p{font-size:15px;line-height:1.72;color:var(--ink-2);margin:0 0 15px}
.prose ul{margin:0 0 18px;padding-left:19px;list-style:disc}
.prose li{font-size:15px;line-height:1.72;color:var(--ink-2);margin-bottom:7px}
.prose li::marker{color:var(--brass)}
.prose b,.prose strong{font-weight:600;color:var(--ink)}
.prose a{color:var(--sea);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--brass)}
.prose code{
  font-family:var(--mono, ui-monospace, monospace);font-size:12.5px;
  background:var(--cream-d);border:1px solid var(--line-3);padding:1px 5px;color:var(--ink);
}
.prose__meta{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
  margin:0 0 10px;
}

/* FAQ 手风琴：summary 去掉默认三角，用自绘的 + / − */
.faq-item{border-top:1px solid var(--line-3);padding:15px 0}
.faq-item:last-child{border-bottom:1px solid var(--line-3)}
.faq-item summary{
  cursor:pointer;list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  font-size:15px;line-height:1.5;font-weight:500;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';flex:none;font-size:18px;line-height:1;color:var(--brass);
  transition:transform .18s var(--ease);
}
.faq-item[open] summary::after{content:'−'}
.faq-item summary:hover{color:var(--sea)}
.faq-item p{margin:11px 0 2px;font-size:14.5px;line-height:1.7;color:var(--muted);max-width:600px}

@media (max-width:620px){
  .prose{padding:24px 0 56px}
  .prose h2{margin-top:28px}
  .prose p,.prose li{font-size:14.5px}
  /* KPI 奇数张时最后一张只占左半格，右边空一块，读起来像少了一张卡。
     让它横跨两列，视觉上收口。（仪表盘 4 张、评价页 2 张都是偶数，不受影响） */
  .kpis > .kpi:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ============================================================
   后台表格 → 窄屏卡片（≤620px）
   宽表在手机上只有两个选择：横向滑动（金额、日期藏在屏幕外，用户找不到）
   或折成卡片（列名当标签、值靠右）。运营在手机上最常看的是「谁下了单、
   多少钱、该不该发货」，这些恰恰是最右几列，所以选折卡。
   data-l 由 app.js 的 labelTables() 按表头写上去，改表头不用改 CSS。
   ============================================================ */
@media (max-width:620px){
  .adm__body .panel__bd.flush{overflow-x:visible}
  /* 选择器要压过桌面那条 `.panel__bd.flush > table.atable{width:max-content}`，
     否则表格在窄屏仍按内容撑宽——空态那一行长文案会把整页顶出 35px。
     （这一条比"看起来一样"更要紧：权重输了，规则在浏览器里就是不存在的。） */
  .adm__body .panel__bd.flush > table.atable--wide{
    display:block;width:100%;min-width:0;border-collapse:collapse;
  }
  .adm__body table.atable--wide thead{display:none}
  .adm__body table.atable--wide tbody{display:block}
  .adm__body table.atable--wide tbody tr{
    display:block;padding:13px 14px;border-bottom:1px solid var(--line-2);
  }
  .adm__body table.atable--wide tbody tr:first-child{border-top:1px solid var(--line-2)}
  .adm__body table.atable--wide td{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:2px 0;border:0;text-align:left;font-size:12.5px;
  }
  .adm__body table.atable--wide td::before{
    content:attr(data-l);flex:none;
    font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);
  }
  .adm__body table.atable--wide td.num{text-align:right;white-space:normal}
  /* 单元格内容包一层：flex 项可以收缩，长邮箱用 anywhere 断行而不是顶出屏幕 */
  .adm__body table.atable--wide td > .tdv{
    flex:1 1 auto;min-width:0;text-align:right;overflow-wrap:anywhere;
  }
  /* 第一列是这张卡的主语（订单号 / 商品名 / SKU），单独占一行加粗，
     不再重复显示列名——否则每张卡都以「ORDER」开头，扫读效率反而下降。 */
  .adm__body table.atable--wide td:first-child{
    display:block;padding:0 0 7px;font-size:13.5px;
  }
  .adm__body table.atable--wide td:first-child::before{display:none}
  .adm__body table.atable--wide td:first-child > .tdv{text-align:left;font-weight:600}
  /* 首列里的 .sub 是副标题（SKU、券说明），跟着加粗会和主标题抢层级 */
  .adm__body table.atable--wide td:first-child > .tdv .sub{font-weight:400}
  .adm__body table.atable--wide td.tdspan{
    display:block;text-align:center;padding:10px 0;color:var(--muted);
  }
  .adm__body table.atable--wide td.tdspan::before{display:none}
  .adm__body table.atable--wide td.tdspan > .tdv{text-align:center}

  /* 顶栏在 390px 挤了四组东西：标题、View store、账号、退出。
     账号名与 View store 在手机上都是"到别处去"的低频动作，收进抽屉跟侧栏一致。 */
  .adm__top{padding:0 16px;gap:10px}
  .adm__top h1{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .adm__top-r{gap:8px;font-size:10px;flex:none}
  .adm__top-r .who span.who__n{display:none}
  .adm__top-r > a[href="#/"]{display:none}

  /* 搜索框固定 260px，在窄屏会把面板标题挤掉，改成自适应 */
  .admsearch{flex:1 1 100%}
  .admsearch input{width:100%;min-width:0}
}


/* 订单列表分页（v1.3 补）：接口一直支持 page/limit，前端此前没画按钮，
   90 单只能看到前 25 单。这里给翻页条一个统一外观，与本页其他按钮同一套视觉。 */
.adm__body .pager{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:12px;
}
.adm__body .pager .sub{font-size:11px;color:var(--muted)}
.abtn.is-off{
  opacity:.38;pointer-events:none;cursor:default;
  border-color:var(--line);color:var(--muted);background:transparent;
}


/* ============================================================
   商品编辑抽屉 / CSV 导入弹窗
   ============================================================ */
.phd-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.pdrawer{position:fixed;inset:0;z-index:80;display:none}
body.pedit-open .pdrawer{display:block}
body.pedit-open{overflow:hidden}
.pdrawer__ov{position:absolute;inset:0;background:rgba(20,30,28,.42)}
.pdrawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);
  background:var(--cream);display:flex;flex-direction:column;
  box-shadow:-18px 0 40px rgba(20,30,28,.18);animation:pslide .22s var(--ease);
}
@keyframes pslide{from{transform:translateX(22px);opacity:.55}to{transform:none;opacity:1}}
.pdrawer__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}
.pdrawer__hd h2{font-size:15px;font-weight:600;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdrawer__bd{flex:1;overflow-y:auto;padding:4px 20px 22px;overscroll-behavior:contain}
.pdrawer__ft{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;border-top:1px solid var(--line);background:var(--cream-d);flex-wrap:wrap;
}
.pdrawer__meta{font-size:10.5px;color:var(--muted);max-width:54%;line-height:1.5}
.pdrawer__act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}

.psec{padding:18px 0;border-bottom:1px solid var(--line)}
.psec:last-child{border-bottom:0}
.psec h3{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-bottom:14px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-weight:600;
}
.psec h3 em{font-style:normal;font-size:10px;letter-spacing:.02em;text-transform:none;color:var(--muted-2)}
.psec .cform{max-width:none}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border:1px solid var(--line-3);background:#fff;font-size:11px;cursor:pointer;transition:.15s;
}
.chip:hover{border-color:var(--line-2)}
.chip input{width:auto;margin:0;accent-color:var(--sea)}
.chip:has(input:checked){border-color:var(--sea);background:rgba(27,58,52,.06)}

.imggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.imgcell{
  position:relative;aspect-ratio:1;border:1px dashed var(--line-2);background:var(--cream-d);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;padding:0;overflow:hidden;transition:.15s;
}
.imgcell:hover{border-color:var(--sea);background:rgba(27,58,52,.04)}
.imgcell span{font-size:20px;color:var(--muted-2);line-height:1}
.imgcell em{font-style:normal;font-size:9.5px;color:var(--muted);letter-spacing:.06em}
.imgcell.on{border-style:solid;cursor:grab}
.imgcell.on:active{cursor:grabbing}
.imgcell img{width:100%;height:100%;object-fit:cover;display:block}
.imgcell__main{
  position:absolute;left:0;top:0;background:var(--sea);color:var(--cream);
  font-size:8px;letter-spacing:.12em;padding:2px 6px;text-transform:uppercase;
}
.imgcell__x{
  position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;
  background:rgba(20,30,28,.68);color:#fff;font-size:13px;line-height:1;border:0;cursor:pointer;z-index:2;
}
.imgcell__x:hover{background:var(--clay)}
.imgcell__set{
  position:absolute;left:0;right:0;bottom:0;background:rgba(20,30,28,.68);color:#fff;
  font-size:9px;letter-spacing:.08em;padding:4px 0;border:0;cursor:pointer;
  opacity:0;transition:.15s;
}
.imgcell:hover .imgcell__set{opacity:1}

.ain{width:100%;font:inherit;font-size:11.5px;padding:6px 8px;border:1px solid var(--line-2);background:#fff;color:var(--ink)}
.ain:focus{outline:none;border-color:var(--sea)}
.ain.num{text-align:right;font-variant-numeric:tabular-nums}
.atable--in th{padding:7px 6px}
.atable--in td{padding:5px 6px;border-bottom:1px solid var(--line-3)}
.atable--in select.ain{padding:6px 6px}

/* 导入弹窗 */
.pmodal{position:fixed;inset:0;z-index:90;display:none}
body.pimp-open .pmodal{display:block}
body.pimp-open{overflow:hidden}
.pmodal__ov{position:absolute;inset:0;background:rgba(20,30,28,.45)}
.pmodal__box{
  position:relative;margin:6vh auto 0;width:min(760px,calc(100% - 32px));max-height:84vh;
  background:var(--cream);display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(20,30,28,.26);
}
.pmodal__hd{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pmodal__hd h2{font-size:14px;font-weight:600;margin-right:auto}
.pmodal__bd{overflow-y:auto;padding:16px 18px}
.pmodal__ft{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;border-top:1px solid var(--line);background:var(--cream-d);flex-wrap:wrap;
}
.impdrop{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:26px;
  border:1px dashed var(--line-2);background:var(--cream-d);cursor:pointer;margin-bottom:14px;text-align:center;
}
.impdrop:hover,.impdrop.on{border-color:var(--sea);background:rgba(27,58,52,.05)}
.impdrop b{font-size:12.5px}
.impdrop span{font-size:11px;color:var(--muted)}
.kpis--tight{margin-bottom:12px}
.pmodal .falert ul{margin:6px 0 0 16px;padding:0}
.pmodal .falert li{font-size:11px;line-height:1.65}

.atable tr.is-bad td{background:rgba(180,71,47,.07)}
.is-bad{border-color:var(--clay)!important;box-shadow:0 0 0 2px rgba(180,71,47,.16)}
.abtn.danger{color:var(--clay);border-color:rgba(180,71,47,.38)}
.abtn.danger:hover{background:rgba(180,71,47,.08);border-color:var(--clay)}

@media (max-width:900px){
  .pdrawer__panel{width:100%}
  .pdrawer__ft{gap:8px}
  .pdrawer__meta{max-width:100%;order:2;flex:1 1 100%}
  .pdrawer__act{order:1;width:100%;justify-content:flex-end}
  .pmodal__box{margin:0;width:100%;max-height:100vh;height:100%}
  .imggrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .phd-r{width:100%}
  .phd-r .admsearch{flex:1 1 140px}
}


/* ============================================================
   修复层 · 2026-11-14 验收缺陷
   承接 D-106 / D-119 ~ D-128，追加在最后，优先级高于前三层。
   ============================================================ */

/* ---------- 键盘焦点（D-119） ----------
   前三层里有十几处 `outline:none`（输入框、下拉、搜索框），
   它们的选择器特异性比 refine.css 的 :focus-visible 高，
   结果键盘用户 Tab 过去什么都看不见。可达性是底线，用 !important 提权。 */
:is(a, button, input, select, textarea, [tabindex], summary):focus-visible {
  outline: 2px solid var(--sea) !important;
  outline-offset: 3px;
}

/* ---------- 星级：区分空心与实心（D-120） ----------
   原先 .st 统一 color:var(--brass)，空心实心长得一模一样，
   0 条评价的商品照样是五颗金灿灿的星——等于给新品贴「五星好评」。
   空星用极淡的墨色，一眼能分出「没评价」和「五星」。 */
.st span { color: rgba(46, 42, 37, .18); }
.st span.on { color: var(--brass); }
.st span.half { color: var(--brass); opacity: .45; }
.card__rate--none,
.pdp__rate--none { color: var(--muted); font-size: 10.5px; letter-spacing: .04em; }
.pdp__rate--none { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

/* ---------- 收藏按钮（D-123） ---------- */
.card { position: relative; }
.card__wish {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(250, 246, 239, .92);
  color: var(--sea); opacity: 0; transition: opacity .2s var(--ease), background .2s;
}
.card:hover .card__wish, .card__wish:focus-visible, .card__wish.on { opacity: 1; }
.card__wish:hover { background: var(--paper); }
.card__wish svg { width: 15px; height: 15px; }
.card__wish.on { color: var(--clay); }
@media (hover: none) { .card__wish { opacity: 1; } }

.pdp__wish {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); transition: color .2s;
}
.pdp__wish svg { width: 15px; height: 15px; }
.pdp__wish:hover { color: var(--sea); }
.pdp__wish.on { color: var(--clay); }

/* ---------- 评分分布与评价表单（D-107） ---------- */
#reviews { scroll-margin-top: 90px; }
.revwrap {
  display: grid; grid-template-columns: 260px 1fr; gap: 56px;
  padding: 56px 0; border-top: 1px solid var(--line);
}
.revwrap__sum { position: sticky; top: 96px; align-self: start; }
.revavg { display: flex; align-items: center; gap: 16px; margin: 14px 0 20px; }
.revavg b { font-family: var(--serif); font-size: 46px; line-height: 1; font-weight: 400; color: var(--ink); }
.revavg .st { display: block; font-size: 13px; letter-spacing: 2px; }
.revavg small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.revdist { display: grid; gap: 7px; }
.revdist__row { display: grid; grid-template-columns: 46px 1fr 24px; align-items: center; gap: 10px; }
.revdist__row span { font-size: 10.5px; color: var(--muted); }
.revdist__row i { display: block; height: 4px; background: var(--line); }
.revdist__row i em { display: block; height: 100%; background: var(--brass); }
.revdist__row b { font-size: 10.5px; font-weight: 400; color: var(--muted); text-align: right; }

.revwrap__list .rev {
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.revwrap__list .rev:last-of-type { border-bottom: 0; }

.revy {
  margin-top: 32px; padding: 26px 28px; background: var(--cream-d);
  border: 1px solid var(--line); max-width: 560px;
}
.revy__hd h4 { font-family: var(--serif); font-size: 22px; font-weight: 400; margin: 0 0 6px; }
.revy__hd p { font-size: 12px; color: var(--muted); margin: 0 0 18px; }
.revy .fld { margin-bottom: 14px; }
.revy textarea { resize: vertical; min-height: 90px; }
.revy .btn { width: 100%; margin-top: 6px; }
.revy__done { padding: 8px 0; }
.revy__done b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 400; margin-bottom: 6px; }
.revy__done p { font-size: 12px; color: var(--muted); margin: 0; }
.revstars { display: flex; gap: 6px; margin-bottom: 16px; }
.revstars label { cursor: pointer; }
.revstars input { position: absolute; opacity: 0; width: 0; height: 0; }
.revstars span {
  display: inline-block; padding: 6px 11px; font-size: 11px; letter-spacing: .04em;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--muted);
  transition: .16s;
}
.revstars input:checked + span { background: var(--sea); border-color: var(--sea); color: var(--cream); }
.revstars input:focus-visible + span { outline: 2px solid var(--sea); outline-offset: 2px; }

/* ---------- 搜索浮层结果 ---------- */
.searchlayer__res { padding: 8px 0 24px; }
.searchlayer__none { font-size: 12.5px; color: var(--muted); padding: 12px 2px; }
.slres {
  display: flex; gap: 14px; align-items: center; padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}
.slres img { width: 44px; height: 55px; object-fit: cover; background: var(--cream-d); }
.slres span { display: flex; flex-direction: column; gap: 2px; }
.slres b { font-weight: 400; font-size: 13px; color: var(--ink); }
.slres em { font-style: normal; font-size: 11px; color: var(--muted); }
.slres:hover b { text-decoration: underline; text-underline-offset: 3px; }
.slres__all { display: block; padding: 14px 2px 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sea); }

/* ---------- hero 裁切（D-127） ----------
   1100×1375 的竖图 cover 进 806×640 的横容器，上下各裁掉 170px，
   人像只剩中间一条脖子。把裁切基准线往上提到 30%，
   保住脸和锁骨，项链正好落在视觉中心。 */
.hero__media img { object-position: center 30%; }

/* ---------- 卡片图片占位（D-128） ---------- */
.card__media img,
.gal__main img,
.gal__thumbs img {
  background: var(--cream-d);
}

/* ---------- 响应式图片容器（D-111 / D-112） ----------
   U.pic() 会输出 <picture><source webp><img 兜底>。
   picture 本身不建盒子（display:contents），这样 .card__media > img、
   .gal__main img 之类既有选择器和 flex/grid 布局完全不受影响，
   相当于把 <picture> 从渲染树里「透明掉」。 */
picture { display: contents; }

/* ---------- 顶栏 1201–1400px 挤爆（D-129） ----------
   refine.css 把 .hdr__inner 改成 flex、把导航 gap 提到 22px，
   但它的断点只到 1200px（以下导航整体隐藏）。于是 1201–1400 这一段
   没有任何压缩档：11 个 white-space:nowrap 的条目自然宽约 830px，
   而 flex 槽位只有约 735px，多出来的直接压到右侧搜索/收藏图标上——
   表现为「GIFTS」被图标盖住，变成 GIßS。
   app.css 里本来有 1280 的压缩档，但被后加载的 refine.css 同权重盖掉了。

   这里只压缩间距和字距，不动字号结构；不能用 overflow:hidden，
   那会把 mega menu 一起裁掉（refine 里特意写了 overflow:visible）。 */
@media (max-width: 1400px) {
  .hdr__nav { gap: 12px; }
  .hdr__nav a { letter-spacing: .03em; }
}

@media (max-width: 1240px) {
  .hdr__nav { gap: 9px; }
  .hdr__nav a { font-size: 10px; letter-spacing: .02em; }
}

/* ---------- mega menu 面板越出视口（D-129 续） ----------
   面板宽 760px，锚在导航项上：left:-26px 时右边缘会顶出视口，
   .mega--right 的 right:-26px 又会把左边缘推出左侧。
   11 个导航项横跨约 550–1090px，760px 的面板无论左锚还是右锚
   都必然有一半项目放不下——这是尺寸冲突，调阈值解决不了。

   改成把面板锚到页头（.navitem 取消定位，让 .mega 对上最近的
   定位祖先 .hdr，它是 sticky，等于整行宽度），水平居中。
   760px 永远小于「视口 - 96px」，任何桌面宽度都不会越界。 */
.hdr__nav .navitem { position: static; }
.hdr__nav .mega,
.hdr__nav .mega--right {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

@media (max-width: 900px) {
  .revwrap { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .revwrap__sum { position: static; }
  .revy { padding: 20px 18px; }
  .card__wish { opacity: 1; }
}

/* ---------- 页脚法务链接（收单审核必查项，原先不可点击） ---------- */
.ftr__legal {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.ftr__legal a {
  color: inherit;
  text-decoration: none;
  opacity: .72;
  transition: opacity .18s ease, color .18s ease;
}
.ftr__legal a:hover,
.ftr__legal a:focus-visible {
  opacity: 1;
  color: var(--sea);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 760px) {
  .ftr__legal { gap: 10px 14px; }
}

/* ---------- 待付款状态（异步支付通道） ----------
   接入真实收单后订单会先停在 pending_payment，等 webhook 确认收款。
   没有这条样式时 pill 会渲染成无底色的裸文字，和「已取消」难以区分。
   配色刻意用琥珀色：既不同于「待发货」的绿，也不同于「已取消」的灰。 */
.pill.pending_payment {
  background: rgba(192, 138, 46, .18);
  color: #8A5A10;
  box-shadow: inset 0 0 0 1px rgba(192, 138, 46, .32);
}