/* =========================================================================
   通用「子屏幕」组件样式（v3.7 · 2026-09-21）
   用途：① 悠芯鲜点 C 位 → 产品详情子屏；② 各栏目页把长内容折进子屏（每栏一屏 + 点开子屏）
   视觉：延续品牌深墨绿 + 柠檬绿点缀，浅字白底内容区；手机端单列
   ========================================================================= */
.ss-wrap{position:fixed;inset:0;z-index:120;display:none}
.ss-wrap.on{display:block}
.ss-bg{position:absolute;inset:0;background:rgba(3,17,11,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .26s ease}
.ss-wrap.on .ss-bg{opacity:1}
.ss-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);width:min(1140px,93vw);max-height:88vh;
  overflow:auto;background:#0A3021;border:1px solid rgba(205,232,107,.22);border-radius:20px;
  box-shadow:0 40px 90px rgba(0,0,0,.62);opacity:0;transition:opacity .26s ease,transform .26s cubic-bezier(.2,.8,.3,1);
  padding:0}
.ss-wrap.on .ss-panel{opacity:1;transform:translate(-50%,-50%)}
.ss-head{position:sticky;top:0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:22px 26px 16px;background:linear-gradient(180deg,#0A3021 70%,rgba(10,48,33,.86));
  border-bottom:1px solid rgba(255,255,255,.1)}
.ss-head .t{min-width:0}
.ss-head .tagline{font-family:var(--latin);font-size:11px;letter-spacing:.2em;color:var(--lime);margin-bottom:8px}
.ss-head h2{color:#fff;font-size:clamp(19px,2.4vh,26px);line-height:1.35;margin:0}
.ss-head .sub{color:#8FBBA3;font-size:12.5px;margin-top:6px;letter-spacing:.02em}
.ss-close{flex:0 0 auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#fff;
  border-radius:999px;font-size:13px;padding:8px 15px;cursor:pointer;white-space:nowrap}
.ss-close:hover{background:rgba(255,255,255,.16)}
.ss-body{display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);gap:26px;padding:22px 26px 8px;align-items:start}
.ss-body.noimg{grid-template-columns:1fr}
.ss-fig{background:var(--paper);border-radius:14px;padding:14px;position:relative}
.ss-fig img{display:block;width:100%;height:auto;max-height:60vh;object-fit:contain;border-radius:10px}
.ss-fig .todo{display:flex;align-items:center;justify-content:center;height:260px;border-radius:10px;
  background:repeating-linear-gradient(45deg,#EAF3EC,#EAF3EC 10px,#DDE9E2 10px,#DDE9E2 20px);color:#5C7A6B;font-size:13px}
.ss-fig .cap{position:absolute;left:22px;top:22px;background:rgba(6,36,24,.84);color:#EAF3EC;font-size:11px;
  padding:4px 10px;border-radius:999px}
/* 多图缩略条：点一下换主图（只有一张时由 JS 隐藏） */
.ss-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px}
.ss-thumbs[hidden]{display:none}
.ss-thumbs button{flex:0 0 auto;width:64px;height:64px;padding:0;border:2px solid rgba(255,255,255,.14);border-radius:9px;
  overflow:hidden;background:#0A3021;cursor:pointer;transition:border-color .15s ease}
.ss-thumbs button.on{border-color:#CDE86B}
.ss-thumbs button:hover{border-color:rgba(205,232,107,.55)}
.ss-thumbs img{display:block;width:100%;height:100%;object-fit:cover}
.ss-fig:has(.ss-thumbs:not([hidden])) img{max-height:52vh}
.ss-content{color:#D3E2D7;font-size:14px;line-height:1.7}
.ss-content .sell{color:#EAF3EC;font-size:15.5px;line-height:1.95}
.ss-content dl{display:grid;grid-template-columns:96px 1fr;gap:9px 16px;margin-top:15px;
  border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
.ss-content dt{color:#8FBBA3;font-size:12.5px;line-height:1.6}
.ss-content dd{color:#EAF3EC;font-size:13.5px;margin:0;line-height:1.6}
.ss-content .todo-line{color:#CDE86B;border-bottom:1px dashed #CDE86B}
.ss-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 26px 18px;margin-top:10px;border-top:1px solid rgba(255,255,255,.1);
  position:sticky;bottom:0;z-index:3;background:linear-gradient(0deg,#0A3021 72%,rgba(10,48,33,.92))}
.ss-foot .pager{display:flex;gap:10px;align-items:center}
.ss-foot button{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);color:#fff;
  border-radius:999px;padding:9px 16px;font-size:13px;cursor:pointer}
.ss-foot button:hover{background:rgba(205,232,107,.18);border-color:rgba(205,232,107,.5)}
.ss-foot .idx{color:#8FBBA3;font-size:12.5px;letter-spacing:.06em}
.ss-foot .note{color:#7F9E8F;font-size:12px}

/* 矮屏（笔记本浏览器带地址栏/工具条时常见 640–700px）：整块再收一档，保证子屏一屏不出滚动条 */
/* 双轨对照表（三列宽表）在中等以下高度：图缩小、表格收紧 → 图保留且一屏不出滚动条 */
@media (max-height:820px){
  .ss-body:has(table.dual3){grid-template-columns:minmax(0,34%) minmax(0,66%);gap:18px}
  .ss-body:has(table.dual3) .ss-fig{padding:10px}
  .ss-body:has(table.dual3) .ss-fig img{max-height:40vh}
  .ss-body:has(table.dual3) table.ss-facts th,
  .ss-body:has(table.dual3) table.ss-facts td{padding:4px 4px;font-size:12px}
}
@media (max-height:700px){
  .ss-panel{max-height:94vh}
  .ss-head{padding:15px 24px 11px}
  .ss-head .tagline{margin-bottom:5px}
  .ss-head h2{font-size:clamp(17px,2.2vh,22px)}
  .ss-content{font-size:13px;line-height:1.6}
  .ss-content .sell{font-size:14px}
  .ss-content dl{gap:6px 14px;margin-top:10px;padding-top:10px}
  .ss-content dt{font-size:12px}.ss-content dd{font-size:12.5px}
  .ss-foot{padding:10px 24px 12px;margin-top:6px}
  .qc-strip img{height:96px !important}
  .qc-strip figcaption{font-size:11px;margin-top:4px;line-height:1.4}
  .ss-thumbs button{width:50px;height:50px}
  .ss-fig:has(.ss-thumbs:not([hidden])) img{max-height:44vh}
}
@media (max-width:860px){
  .ss-panel{width:94vw;max-height:92vh;border-radius:16px}
  .ss-body{grid-template-columns:1fr;gap:18px;padding:18px 18px 6px}
  .ss-fig img{max-height:34vh}
  .ss-head{padding:18px 18px 14px}
  .ss-content dl{grid-template-columns:80px 1fr;gap:8px 12px}
  .ss-foot{padding:14px 18px 20px}
  .ss-thumbs button{width:56px;height:56px}
  .ss-fig:has(.ss-thumbs:not([hidden])) img{max-height:30vh}
}
@media (prefers-reduced-motion:reduce){
  .ss-bg,.ss-panel{transition:none}
}

/* 卖点列表（替代整段描述）：圆点 + 短标题 + 说明 */
.ss-points{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.ss-points li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.6;color:#B8CFC2}
.ss-points li::before{content:'';position:absolute;left:1px;top:8px;width:6px;height:6px;border-radius:50%;background:#CDE86B;box-shadow:0 0 0 3px rgba(205,232,107,.12)}
.ss-points li b{font-weight:600;color:#EAF3EC}
.ss-points li b::after{content:' ·';color:#7FA890;font-weight:400}
.ss-content:has(.ss-points){display:flex;flex-direction:column;justify-content:center;min-height:0}
@media (max-height:760px){.ss-points{gap:6px;margin-bottom:10px}.ss-points li{font-size:12.5px;line-height:1.52}}
@media (max-width:820px){.ss-points li{font-size:13px}}

/* 卖点版式：左右两栏内容垂直居中，避免右栏贴顶、下方大片空白 */
.ss-body:has(.ss-points){align-items:center}

/* 缩略图 7 张以上：自动缩小以保持单行 */
.ss-thumbs:has(> button:nth-child(7)) button{width:54px;height:54px}
.ss-thumbs:has(> button:nth-child(9)) button{width:46px;height:46px}

/* 缩略图位留空：虚线框 + 「图片待补充」 */
.ss-thumbs button.ph-todo{display:flex;align-items:center;justify-content:center;border-style:dashed;border-color:rgba(205,232,107,.35);
  background:rgba(255,255,255,.03);color:#A7CCBA;font-size:10px;line-height:1.25;text-align:center;cursor:default;opacity:.9}

/* 纯图模式：只放一张大图，居中、放宽 */
.ss-body.imgonly{grid-template-columns:1fr;justify-items:center;padding:18px 26px 6px}
.ss-body.imgonly .ss-content{display:none}
.ss-body.imgonly .ss-fig{width:min(100%,1080px);padding:12px}
.ss-wrap:has(.ss-body.imgonly) .ss-panel{max-height:92vh}
.ss-body.imgonly{display:flex;justify-content:center;align-items:center}
.ss-body.imgonly .ss-fig{max-height:calc(92vh - 222px);display:flex;justify-content:center}
.ss-body.imgonly .ss-fig img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
@media (max-width:820px){
  .ss-body.imgonly{padding:12px 14px 4px}
  .ss-body.imgonly .ss-fig img{max-height:calc(100vh - 300px)}
}