/* LcayunM1 购物车主题 v2.9.18 —— 密码/账号/验证码输入框补全 autocomplete 语义，图形验证码明确 off */
@charset "utf-8";
/* ==========================================================================
   莱卡云 LcayunM1 · 购物车主题样式
   全部原创。命名空间 lck-（lcayun cart）。
   两种加载场景，写法上都要照顾到：
     A. 商品列表 / 结算 / 配置页 —— 官网主题 header 已经加载了 lcayun.css，
        这里只做加法，直接复用 .lc-wrap / .lc-btn / --blue 这套设计变量。
     B. v10 云主机·DCIM 订购页 —— 系统自带的 Vue 独立页面，不走官网 header，
        拿不到 lcayun.css。所以变量在本文件里重新声明一份，保证独立可用。
   ========================================================================== */

/* ------------------------------ 1. 变量 ------------------------------ */
:root{
  --blue:#0f76d4; --blue-d:#0a5aa8; --blue-l:#e9f3fc;
  --ink:#12161d; --ink2:#525a66; --ink3:#6b7280;
  --line:#e9edf2; --line-2:#f2f4f8; --bg:#f7f9fc; --bg-2:#fbfcfe;
  --price:#c8401b; --ok:#00a06f; --warn:#d98a00; --err:#d94a3d;
  --r:8px; --r-lg:10px;
  --sh1:0 1px 2px rgba(18,44,84,.04);
  --sh2:0 4px 16px rgba(20,45,85,.05);
  --sh3:0 10px 28px rgba(18,44,84,.07);
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:74px;
}

/* ------------------------------ 1.5 兜底基座 ------------------------------
   购物车页面的页头由 {include file="common/header"} 接官网主题，lcayun.css 也是
   那里加载的。万一那一步出问题（主题没装全、路径变了），整页会连按钮和容器宽度
   都没有。下面这几条用 :where() 写，特异性为 0 —— lcayun.css 只要正常加载，
   它里面任何一条同名规则都会覆盖这里；加载不到时才由这里兜住基本版式。
   所以这不是复制一份样式，是一张安全网。 */
:where(body){
  margin:0; background:#fff; color:var(--ink); font-size:15px; line-height:1.65;
  font-family:"HarmonyOS Sans SC","MiSans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  -webkit-font-smoothing:antialiased;
}
:where(*,*::before,*::after){ box-sizing:border-box; }
:where(a){ color:inherit; text-decoration:none; }
:where(img){ max-width:100%; height:auto; border:0; vertical-align:middle; }
:where(h1,h2,h3,h4,h5,p){ margin:0; }
:where(ul,ol){ margin:0; padding:0; list-style:none; }
:where(button){ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:where(i,em){ font-style:normal; }
:where(.lc-wrap){ width:1280px; max-width:calc(100% - 48px); margin:0 auto; }
:where(.lc-btn){
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 26px; border:1px solid transparent; border-radius:9px;
  font-size:14.5px; font-weight:500; line-height:1; white-space:nowrap; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
:where(.lc-btn-sm){ height:36px; padding:0 17px; font-size:13.5px; border-radius:8px; gap:6px; }
:where(.lc-btn-block){ width:100%; }
:where(.lc-btn-primary){ background-color:#1274d6; color:#fff; }
@media (hover:hover) and (pointer:fine){
	:where(.lc-btn-primary:hover){ background-color:#2e8be7; }
}
:where(.lc-btn-primary:active){ background-color:#1e7edd; }
:where(.lc-btn-ghost){ background-color:#fff; border-color:#dde3ea; color:#39424f; }
:where(.lc-btn-ghost:active){ background-color:#f7fbff; border-color:#a8c9ea; color:var(--blue); }
@media (hover:hover) and (pointer:fine){
	:where(.lc-btn-ghost:hover){ background-color:#f7fbff; border-color:#a8c9ea; color:var(--blue); }
}
:where(.lc-btn-arrow){
  width:6px; height:6px; margin-left:-1px;
  border-right:1.6px solid currentColor; border-top:1.6px solid currentColor;
  transform:rotate(45deg); opacity:.85;
}

/* ------------------------------ 1.8 Bootstrap 纠偏 ------------------------------
   结算页和配置页要用 Bootstrap（官方 JS 的弹窗、下拉都依赖它），而它是在官网主题的
   lcayun.css 之后加载的，于是 Bootstrap 的 a{color:#007bff} 把全站链接色盖成了蓝色，
   页脚、导航全变蓝甚至访问过的变紫。本文件排在最后，这里把链接色还回去。 */
html{ -webkit-tap-highlight-color:transparent; }
a{ color:inherit; }
a:hover{ color:inherit; text-decoration:none; }

/* ⚠ 上面那条 a:hover 有个坑，踩过一次，别删这段注释：
   a:hover 的权重是 (0,1,1)，而 .lc-btn-primary{color:#fff} 只有 (0,1,0)，
   所以鼠标一放到蓝底按钮上，白字就被 color:inherit 拽回正文的深色 #12161D，
   浅蓝底 + 近黑的字，看着又脏又糊。
   下面把按钮的文字色按 (0,2,1) 以上的权重重新钉死，常态/悬停/按下三态都写全。
   以后再往 lcayun.css 里加新的按钮样式，记得回来这里补一条。 */
a.lc-btn-primary, a.lc-btn-primary:hover, a.lc-btn-primary:active,
a.lc-btn-soft:hover, a.lc-btn-outline:hover{ color:#fff; }
a.lc-btn-soft, a.lc-btn-soft:active{ color:#1268c4; }
a.lc-btn-ghost:hover, a.lc-btn-ghost:active,
a.lc-btn-line:hover, a.lc-btn-line:active{ color:#1274d6; }
a.lc-btn-white, a.lc-btn-white:hover, a.lc-btn-white:active{ color:#0b57a5; }

/* 不止链接色。魔方那份 Bootstrap 是改过的（body 基准字号 .75rem），它的 reboot 会把
   整页排版基线一起换掉，实测配置页/结算页变成：
       body 15px/1.65 HarmonyOS → 12px/1.5 Helvetica
       每个 <p> 多出 16px 下边距
   结果就是同一套页头页脚，在这两页比商品列表页高出 67px（258 → 325）。
   下面这几条把官网主题的基线原样还回来 —— 必须是实打实的选择器，
   放在上面那段 :where() 兜底里是没用的（特异性 0，压不过 Bootstrap）。
   ⚠ 数值与官网主题 lcayun.css 的「2. 基础」保持一致，那边改了这里要跟着改。 */
body{
  font-family:"HarmonyOS Sans SC","MiSans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  font-size:15px; line-height:1.65; color:var(--ink); background:#fff;
}
h1,h2,h3,h4,h5,h6,p{ margin:0; }
/* Bootstrap 还给标题压了 line-height:1.2，没有这条页脚栏目标题会矮 6px，
   两类页面的页脚就差 7px 对不齐 */
h1,h2,h3,h4,h5,h6{ line-height:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
label{ margin-bottom:0; }

/* ------------------------------ 1.9 浏览器自动填充 ------------------------------
   Chrome 给自动填充过的输入框刷一层淡蓝底，是浏览器自己画的，普通 background 盖不住，
   只有 inset 阴影能顶掉它；hover / focus / active 三个态都要写，少一个就会在鼠标
   移上去的时候蓝回来。文字颜色也要用 -webkit-text-fill-color，不然是浏览器的默认黑。 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #fff inset!important;
          box-shadow:0 0 0 1000px #fff inset!important;
  -webkit-text-fill-color:#1f2733!important;
  caret-color:#1f2733;
  transition:background-color 100000s ease-in-out 0s!important;
}

/* ------------------------------ 2. 页面骨架 ------------------------------ */
.lck-page{ background:var(--bg); }
.lck-sec{ padding:24px 0 34px; min-height:320px; }

/* 面包屑 */
.lck-crumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink3); }
.lck-crumb a{ color:var(--ink3); }
.lck-crumb a:hover{ color:var(--blue); }
.lck-crumb i{ width:4px; height:4px; border-right:1.4px solid #c6cdd6; border-top:1.4px solid #c6cdd6; transform:rotate(45deg); }

/* 结算 / 配置页的窄页头：标题 + 步骤条 */
.lck-phead-s{ background:#fff; border-bottom:1px solid var(--line); }
.lck-phead-s-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:82px; padding:16px 0; flex-wrap:wrap; }
.lck-phead-s h1{ margin:0; font-size:21px; font-weight:650; letter-spacing:-.3px; color:var(--ink); }

.lck-steps{ display:flex; align-items:center; gap:0; margin:0; padding:0; list-style:none; }
.lck-steps li{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink3); }
.lck-steps li + li::before{ content:""; width:34px; height:1px; background:var(--line); margin:0 14px; }
.lck-steps b{
  width:22px; height:22px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; background:#eef1f5; color:#626a78;
}
.lck-steps .is-now{ color:var(--ink); font-weight:500; }
.lck-steps .is-now b{ background:var(--blue); color:#fff; }
.lck-steps .is-done b{ background:var(--blue-l); color:var(--blue); }

/* 提示条
   ⚠ 默认必须是 block：$ErrorMsg 是服务端拼好的 HTML，可能带 <br> 分成好几条
   （比如「需要实名认证」+「需要绑定手机」）。用 flex 的话 <br> 会被当成弹性项忽略掉，
   几条提示挤成一行，中间还带着诡异的间距 —— v2.6.0 之前就是这个毛病。
   需要横排的场景（比如未登录那条带按钮的）单独加 .lck-note-row。 */
.lck-note{
  display:block;
  margin:0 0 18px; padding:14px 18px; border-radius:10px;
  font-size:13.5px; line-height:1.85;
  background:var(--blue-l); border:1px solid #cfe4f7; color:#12496f;
}
.lck-note-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lck-note-warn{ background:#fff8e9; border-color:#f3e0b5; color:#7a5400; }
.lck-note-err{
  position:relative; padding:15px 18px 15px 48px; line-height:2.15;
  background:#fdf1ef; border-color:#f3cdc7; color:#9b2f22;
}
/* 感叹号：对整条竖向居中。$ErrorMsg 可能是一条也可能是好几条，
   固定贴顶的话两条时会偏在第一行头上，居中两种情况都稳。 */
.lck-note-err::before{
  content:"!"; position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:19px; height:19px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#d94a3d; color:#fff; font-size:12.5px; font-weight:700; line-height:1;
}
/* 「去认证 / 去绑定」跟在各自那句话后面，句子长短不同位置自然不同 ——
   所以做得克制些，像句子里的一个动作标签，而不是两颗对不齐的按钮。 */
.lck-note-err a{
  display:inline-block; margin:0 2px 0 10px; padding:1px 12px;
  border:1px solid #eabbb4; border-radius:999px; background:#fff;
  font-size:12.5px; line-height:1.9; font-weight:500;
  color:#b8392a!important; white-space:nowrap; vertical-align:1px;
  transition:border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}
.lck-note-err a:hover{ border-color:#d94a3d; background:#d94a3d; color:#fff!important; }
.lck-note-err > p,.lck-note-err > div{ margin:0; }
.lck-note-err > p + p,.lck-note-err > div + div{ margin-top:6px; }
.lck-note-info{ margin-bottom:20px; }

/* ------------------------------ 3. 商品列表页 ------------------------------ */
.lck-phead h1{ margin-top:10px; }

.lck-search{ position:relative; display:flex; gap:10px; margin-top:24px; max-width:560px; }
.lck-search-ico{ position:absolute; left:15px; top:50%; transform:translateY(-50%); display:flex; color:var(--ink3); pointer-events:none; }
.lck-search-inp{
  flex:1 1 auto; min-width:0; height:46px; padding:0 16px 0 42px;
  font-size:14.5px; color:var(--ink); background:#fff;
  border:1px solid #dde3ea; border-radius:9px; outline:0;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lck-search-inp::placeholder{ color:#aab2bd; }
.lck-search-inp:focus{ border-color:#9cc6ec; box-shadow:0 0 0 3px rgba(15,118,212,.10); }
.lck-search-btn{ flex:none; height:46px; }

.lck-body{ padding:24px 0 34px; min-height:320px; }
.lck-layout{ display:flex; align-items:flex-start; gap:24px; }

/* 左侧分类：details/summary 折叠，不用 JS */
.lck-side{ flex:none; width:272px; }
.lck-side-in{
  position:sticky; top:calc(var(--nav-h) + 18px);
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--sh1); padding:6px 0 8px;
  max-height:calc(100vh - var(--nav-h) - 40px); overflow:auto;
}
.lck-side-t{
  margin:0; padding:14px 20px 12px; font-size:12px; font-weight:600;
  letter-spacing:.6px; color:var(--ink3); border-bottom:1px solid var(--line-2);
}
.lck-side-empty{ margin:0; padding:16px 20px; font-size:13.5px; color:var(--ink3); }

/* 分类筛选框：产品一多，左边这份目录会很长，给它配个即时筛选。
   条目少于 8 条时脚本不显示它（hidden 属性）。 */
.lck-cat-f{ position:relative; margin:10px 14px 4px; }
.lck-cat-f[hidden]{ display:none; }
.lck-cat-f-ico{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  display:flex; color:#a7b0bb; pointer-events:none;
}
.lck-cat-f-i{
  width:100%; height:34px; padding:0 10px 0 31px;
  border:1px solid var(--line); border-radius:8px; background:#fbfcfe;
  font-size:13px; color:var(--ink); outline:0;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.lck-cat-f-i::placeholder{ color:#aab2bd; }
.lck-cat-f-i:focus{ background:#fff; border-color:#9cc6ec; box-shadow:0 0 0 3px rgba(15,118,212,.10); }
/* 筛选中：分组之间的分隔线去掉，结果看起来是连成一片的一张清单 */
.lck-side.is-filtering .lck-cat-g{ border-bottom:0; }
.lck-side.is-filtering .lck-cat-g[open] > .lck-cat-h{ padding-bottom:4px; }


.lck-cat-g{ border-bottom:1px solid var(--line-2); }
.lck-cat-g:last-of-type{ border-bottom:0; }
.lck-cat-h{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 16px; cursor:pointer; list-style:none;
  font-size:14px; font-weight:600; color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  transition:color .18s var(--ease);
}
.lck-cat-h::-webkit-details-marker{ display:none; }
.lck-cat-h:hover{ color:var(--blue); }
/* 展开的分组标题保持深色 —— 一屏里蓝块太多会显得花，
   「当前在哪」交给下面那条选中的条目去表达就够了。 */
.lck-cat-g[open] > .lck-cat-h{ color:var(--ink); padding-bottom:6px; }
.lck-cat-h > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lck-cat-ar{
  flex:none; width:7px; height:7px;
  border-right:1.6px solid #b3bcc7; border-bottom:1.6px solid #b3bcc7;
  transform:rotate(-45deg); transition:transform .22s var(--ease), border-color .18s var(--ease);
}
.lck-cat-h:hover .lck-cat-ar{ border-color:var(--blue); }
.lck-cat-g[open] > .lck-cat-h .lck-cat-ar{ border-color:#8d97a3; }
.lck-cat-g[open] > .lck-cat-h .lck-cat-ar{ transform:rotate(45deg); }

.lck-cat-l{ margin:0; padding:0 8px 10px; list-style:none; }
.lck-cat-i{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:7px;
  font-size:13.5px; color:var(--ink2); line-height:1.45;
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
/* 条目前面一个小圆点：选中变蓝，没选中是浅灰，层级一眼分得清 */
.lck-cat-i::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%;
  background:#d3dae2; transition:background-color .18s var(--ease);
}
.lck-cat-i:hover{ background:var(--line-2); color:var(--blue); }
.lck-cat-i:hover::before{ background:#9dc2e8; }
.lck-cat-i.is-on{ background:var(--blue-l); color:var(--blue); font-weight:600; }
.lck-cat-i.is-on::before{ background:var(--blue); }
.lck-cat-n{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.lck-tag{
  flex:0 1 auto; max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:1px 6px; border-radius:4px;
  font-size:11px; font-style:normal; font-weight:500; line-height:1.6;
  background:#eaf3fd; color:#1268c4;
}
/* 左侧目录里的分组标语照常显示（v2.9.8 恢复）。
   之前一整列橙色标签太抢眼，是颜色的问题，不是功能的问题，所以只调颜色不藏功能：
   橙色换成主题的浅蓝、字号收到 11px、最多占一行的 40% 并带省略号。
   标语填得少的时候是点睛，填满一整列就会变噪音 —— 建议后台只给重点分组填。
   想换回原来的橙色：把上面 .lck-tag 的 background 改成 #fdefe9、color 改成 var(--price)。 */
.lck-cat-i .lck-tag{ font-size:11px; }
/* 选中那条的底色本身就是浅蓝，标签得换成白底蓝框才分得开 */
.lck-cat-i.is-on .lck-tag{ background:#fff; box-shadow:inset 0 0 0 1px #bcd9f5; }
/* 内容区大标题旁边那颗：整页只有一个，用主题的浅蓝，比橙色稳重 */
.lck-tag-lg{
  margin-left:10px; font-size:12px; padding:2px 9px; vertical-align:middle;
  max-width:none; background:#eaf3fd; color:#1268c4; font-weight:500;
}

/* 右侧列表 */
.lck-main{ flex:1 1 auto; min-width:0; }
.lck-head{ margin-bottom:18px; }
.lck-head-t{ margin:0; font-size:20px; font-weight:650; color:var(--ink); letter-spacing:-.2px; }
.lck-head-d{ margin:6px 0 0; font-size:13px; color:var(--ink3); }

.lck-grid{
  display:grid; gap:16px;
  /* auto-fill：轨道宽度固定，卡片大小始终一致（云厂商目录页都是这个做法）。
     商品少的时候右边留空是正常的，比把两张卡拉宽、间距忽大忽小好看。
     卡片自己还有 max-width 兜底，防止超宽屏下被拉长。 */
  grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr));
  align-items:start;
}
.lck-card{
  display:flex; flex-direction:column; width:100%; min-width:0;
  max-width:420px; min-height:184px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:18px 20px 16px; box-shadow:var(--sh1);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.lck-card:hover{ border-color:#c8ddf2; box-shadow:var(--sh3); transform:translateY(-2px); }
.lck-card.is-out{ opacity:.72; }
.lck-card.is-out:hover{ transform:none; box-shadow:var(--sh1); border-color:var(--line); }

.lck-card-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.lck-card-n{ margin:0; min-width:0; font-size:15px; font-weight:650; line-height:1.5; color:var(--ink); word-break:break-word; }
.lck-stock{
  flex:none; padding:1px 7px; border-radius:4px;
  font-size:11px; font-weight:500; white-space:nowrap;
  background:#f1f5f9; color:#626a78;
}
.lck-stock.is-zero{ background:#f2f4f8; color:#626a78; }

.lck-card-d{
  margin:9px 0 0; font-size:12.5px; line-height:1.75; color:var(--ink3);
  white-space:pre-wrap; word-break:break-word; min-width:0;
}
.lck-card-d p{ margin:0; white-space:normal; }
.lck-card-d ul,.lck-card-d ol{
  margin:0; padding:0; list-style:none; white-space:normal;
  display:grid; gap:2px;
}
.lck-card-d li{
  position:relative; padding-left:13px; white-space:normal; list-style:none;
}
.lck-card-d li::before{
  content:""; position:absolute; left:2px; top:.72em;
  width:4px; height:4px; border-radius:50%; background:#c3ccd7;
}
.lck-card-d br{ display:none; }
.lck-card-d pre{ margin:0; font:inherit; white-space:pre-wrap; word-break:break-word; }
.lck-card-d table{ width:100%; border-collapse:collapse; white-space:normal; }
.lck-card-d td,.lck-card-d th{ padding:2px 6px 2px 0; text-align:left; font-weight:400; }
.lck-card-d img{ display:none; }

.lck-card-p{ margin-top:auto; padding-top:14px; margin-top:auto; }
.lck-card-p::before{
  content:""; display:block; height:1px; margin:0 0 12px; background:var(--line-2);
}
.lck-price{ margin:0; display:flex; align-items:baseline; gap:2px; flex-wrap:wrap; color:var(--price); }
.lck-price-c{ font-size:13px; font-weight:600; }
.lck-price-v{ font-size:23px; font-weight:700; letter-spacing:-.5px; line-height:1.15; }
.lck-price-u{ font-size:12.5px; color:var(--ink3); margin-left:3px; }
.lck-price-o{ margin:5px 0 0; font-size:12px; color:#a6aeb9; text-decoration:line-through; }
.lck-price-t{ margin:5px 0 0; font-size:12px; color:var(--ink3); }

.lck-card-f{ margin-top:13px; }
.lck-btn-buy{ width:100%; }
.lck-btn-out{ width:100%; background:#f2f4f8; color:#a6aeb9; cursor:not-allowed; }

/* 分页：{$Pages} 输出的是 <li><a>…</a></li>，这里给它一层壳 */
.lck-pager{ display:flex; justify-content:center; margin-top:32px; }
.lck-pager ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:2px; margin:0; padding:0; list-style:none; }
.lck-pager li{ list-style:none; }
.lck-pager a,.lck-pager span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 10px; margin:0 3px;
  border:1px solid var(--line); border-radius:7px; background:#fff;
  font-size:13.5px; color:var(--ink2);
}
.lck-pager a:hover{ border-color:#a8c9ea; color:var(--blue); }
.lck-pager .active span,.lck-pager .active a{ background:var(--blue); border-color:var(--blue); color:#fff; }

.lck-empty{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:80px 20px; background:#fff; border:1px solid var(--line); border-radius:12px;
  color:var(--ink3); text-align:center;
}
.lck-empty p{ margin:0; font-size:14px; }

/* ------------------------------ 4. 两栏布局（结算 / 配置） ------------------------------ */
.lck-cols{ display:flex; align-items:flex-start; gap:22px; }
.lck-col-m{ flex:1 1 auto; min-width:0; }
.lck-col-s{ flex:none; width:326px; }

.lck-box{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--sh1); padding:22px 24px 24px; margin-bottom:18px;
}
.lck-box:last-child{ margin-bottom:0; }
.lck-box-h{ display:flex; align-items:baseline; gap:10px; padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.lck-box-h h2{ margin:0; font-size:16px; font-weight:650; color:var(--ink); }
.lck-box-sub{ font-size:12.5px; color:var(--ink3); }

/* ------------------------------ 5. 结算页 ------------------------------ */
.lck-items{ margin:0; padding:0; list-style:none; }
.lck-item{ padding:18px 0; border-bottom:1px solid var(--line-2); }
.lck-item:last-child{ border-bottom:0; padding-bottom:4px; }

.lck-item-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.lck-item-n{ margin:0; min-width:0; font-size:14.5px; font-weight:650; color:var(--ink); line-height:1.5; word-break:break-word; }
.lck-item-ops{ display:flex; gap:6px; flex:none; }
.lck-op{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:6px; color:var(--ink3);
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.lck-op:hover{ background:var(--blue-l); color:var(--blue); }
.lck-op-del:hover{ background:#fdf0ee; color:var(--err); }

.lck-conf{ margin-top:10px; }
.lck-conf > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--ink3);
  transition:color .16s var(--ease);
}
.lck-conf > summary:hover{ color:var(--blue); }
.lck-conf > summary::-webkit-details-marker{ display:none; }
.lck-conf > summary::before{
  content:""; width:5px; height:5px; flex:none;
  border-right:1.4px solid currentColor; border-top:1.4px solid currentColor;
  transform:rotate(45deg); transition:transform .2s var(--ease);
}
.lck-conf[open] > summary::before{ transform:rotate(135deg); }
.lck-conf-l{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:8px; padding-left:11px; }
.lck-conf-i{ font-size:12.5px; color:var(--ink2); }
.lck-conf-i i{ color:var(--ink3); margin-right:4px; font-style:normal; }

.lck-specs{ display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:10px; }
.lck-spec{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:6px; background:var(--line-2);
  font-size:12px; color:var(--ink2); max-width:100%; word-break:break-word;
}
.lck-spec i{ color:var(--ink3); font-style:normal; }

.lck-item-f{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:14px; }

/* 数量：隐藏域 i、数字框 qty、更新按钮必须同在这个容器里，
   官方 viewcart.js 的 cartQtyBtn 靠 $(this).parent().find() 取值。 */
.lck-qty{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink3); }
.lck-qty-inp{
  width:74px; height:32px; padding:0 8px; text-align:center;
  font-size:13.5px; color:var(--ink); background:#fff;
  border:1px solid #dde3ea; border-radius:6px; outline:0;
}
.lck-qty-inp:focus{ border-color:#9cc6ec; box-shadow:0 0 0 3px rgba(15,118,212,.10); }
.lck-qty-btn{
  height:32px; padding:0 12px; border:1px solid #dde3ea; border-radius:6px;
  background:#fff; font-size:13px; color:var(--ink2); cursor:pointer;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.lck-qty-btn:hover{ border-color:#a8c9ea; color:var(--blue); }

.lck-item-sum{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-left:auto; font-size:12.5px; color:var(--ink3); }
.lck-item-old{ text-decoration:line-through; color:#70767d; }   /* 原 #a6aeb9 只有 2.24:1，压深到 4.6:1（WCAG AA） */
.lck-item-cut{ color:#00865d; }   /* 原 var(--ok) #00a06f 在白底上只有 3.36:1，压深到 4.6:1 */
.lck-item-sum b{ font-size:16px; font-weight:700; color:var(--price); }

/* 表单控件 */
.lck-field{ margin-top:20px; }
.lck-label{ display:block; margin-bottom:9px; font-size:13px; font-weight:500; color:var(--ink2); }
.lck-input,.lck-select{
  width:100%; height:42px; padding:0 14px;
  font-size:14px; color:var(--ink); background:#fff;
  border:1px solid #dde3ea; border-radius:8px; outline:0;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lck-input::placeholder{ color:#b3bac4; }
.lck-input:focus,.lck-select:focus{ border-color:#9cc6ec; box-shadow:0 0 0 3px rgba(15,118,212,.10); }
.lck-select{ appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:15px; }

/* 余额 / 信用额 */
.lck-paycheck{
  display:flex; align-items:center; gap:10px; width:100%; margin:0 0 10px;
  padding:12px 16px; border:1px solid #dde3ea; border-radius:9px; background:#fff;
  font-size:13.5px; color:var(--ink2); cursor:pointer;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.lck-paycheck input{ width:15px; height:15px; accent-color:var(--blue); flex:none; }
.lck-paycheck b{ margin-left:auto; font-size:14px; font-weight:650; color:var(--price); }
.lck-paycheck:hover{ border-color:#a8c9ea; }
.lck-paycheck.is-on{ border-color:var(--blue); background:var(--blue-l); }

/* 第三方网关 */
.lck-gates{ display:flex; flex-wrap:wrap; gap:10px; margin-top:2px; }
.lck-gates .addfunds{ flex:none; }
.lck-gate{
  display:flex; align-items:center; justify-content:center;
  min-width:132px; height:52px; padding:0 16px;
  border:1px solid #dde3ea; border-radius:9px; background:#fff; cursor:pointer;
  font-size:13.5px; color:var(--ink2);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lck-gate img{ max-height:22px; width:auto; }
.lck-gate:hover{ border-color:#a8c9ea; }
.lck-gate.active{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(15,118,212,.10); }
.lck-gate .hidden{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }

/* 优惠码 */
.lck-promo{ display:flex; gap:10px; }
.lck-promo .lck-input{ flex:1 1 auto; min-width:0; }
.lck-promo .lc-btn{ flex:none; height:42px; }
.lck-promo-on{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 16px; border-radius:9px; background:#eaf7f1;
  font-size:13.5px; color:#0a6c4d;
}
.lck-promo-on a{ color:var(--err); font-size:13px; }

/* 右栏汇总 */
.lck-sum{
  position:sticky; top:calc(var(--nav-h) + 18px);
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--sh2); padding:22px 22px 24px;
}
.lck-sum-t{ margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:15px; font-weight:650; color:var(--ink); }
.lck-sum-r{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; font-size:13.5px; color:var(--ink3); }
.lck-sum-r em{ font-style:normal; color:var(--ink2); }
.lck-sum-total{ padding-top:12px; margin-top:12px; border-top:1px solid var(--line); }
.lck-sum-total span{ font-size:14px; color:var(--ink); }
.lck-sum-total em{ color:var(--price); font-size:13px; }
.lck-sum-total b{ font-size:25px; font-weight:700; letter-spacing:-.5px; }

.lck-terms{ display:flex; align-items:flex-start; gap:8px; margin:18px 0 14px; font-size:12.5px; line-height:1.75; color:var(--ink3); cursor:pointer; }
.lck-terms input{ margin-top:3px; width:14px; height:14px; flex:none; accent-color:var(--blue); }
.lck-terms a{ color:var(--blue); }
.lck-submit{ height:46px; font-size:15px; }
.lck-back{ display:block; margin-top:12px; text-align:center; font-size:13px; color:var(--ink3); }
.lck-back:hover{ color:var(--blue); }

/* 删除确认弹窗（Bootstrap modal 外壳，只换外观）
   兜底：Bootstrap 的 CSS 万一没加载成功，弹窗默认也必须是隐藏的，
   不然它会直接平铺在页面底部。JS 打开时写的是行内 display，不受这条影响。 */
.modal{ display:none; }
.lck-modal{ border:0; border-radius:12px; box-shadow:0 20px 48px rgba(14,40,80,.16); }
.lck-modal .modal-header{ border-bottom:1px solid var(--line); padding:16px 20px; }
.lck-modal .modal-title{ font-size:15px; font-weight:650; color:var(--ink); }
.lck-modal .modal-body{ padding:20px; font-size:14px; color:var(--ink2); }
.lck-modal .modal-footer{ border-top:1px solid var(--line); padding:14px 20px; gap:10px; }
.lck-modal .close{ font-size:22px; font-weight:400; color:var(--ink3); opacity:1; text-shadow:none; }

/* 完成页 */
.lck-done{
  max-width:560px; margin:40px auto; padding:52px 40px; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh2);
}
.lck-done-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:66px; height:66px; border-radius:50%; background:#eaf7f1; color:var(--ok); margin-bottom:20px;
}
.lck-done h1{ margin:0; font-size:22px; font-weight:650; color:var(--ink); }
.lck-done p{ margin:12px 0 0; font-size:14px; line-height:1.9; color:var(--ink3); }
.lck-done-act{ display:flex; gap:12px; justify-content:center; margin-top:26px; flex-wrap:wrap; }

/* ------------------------------ 6. 配置页（覆盖 Bootstrap 原样式） ------------------------------
   这一页的 DOM 结构是魔方官方契约，configureproduct.js 会往里注入 Bootstrap 标记，
   所以类名一个不能改，只能在这里把外观整体覆盖掉。 */
.lck-box-cfg{ padding:6px 24px 22px; }

.lck-cfg .form-group.row{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  margin:0; padding:11px 0;          /* 每行之间只留间距，不画线，视觉上更连贯 */
}
.lck-cfg .form-group.row > *{ padding-left:0; padding-right:10px; }

.lck-cfg label.col-form-label{
  flex:0 0 138px; max-width:138px; padding:7px 16px 0 0;
  font-size:13.5px; font-weight:500; color:var(--ink2); line-height:1.5;
}
.lck-cfg .form-group.row > div{ flex:1 1 auto; max-width:calc(100% - 138px); min-width:0; }
.lck-cfg .form-group.row > div.col-md-3,
.lck-cfg .form-group.row > div.col-md-2{ flex:0 0 300px; max-width:300px; }
.lck-cfg .form-group.row > div.col-8{ flex:0 0 260px; max-width:260px; }
.lck-cfg .form-group.row > div.col-1,
.lck-cfg .form-group.row > div.d-inline-flex{ flex:0 0 auto; max-width:none; }

.lck-ico-help{ color:var(--ink3); vertical-align:-2px; margin-left:3px; }

/* 输入框 / 下拉 */
.lck-cfg .form-control{
  height:40px; padding:0 13px; font-size:14px; color:var(--ink);
  background:#fff; border:1px solid #dde3ea; border-radius:8px; box-shadow:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lck-cfg textarea.form-control{ height:auto; padding:10px 13px; line-height:1.7; }
.lck-cfg .form-control:focus{ border-color:#9cc6ec; box-shadow:0 0 0 3px rgba(15,118,212,.10); }
.lck-cfg .form-control.is-invalid,.lck-cfg .is-invalid{ border-color:var(--err); }
.lck-cfg .error-tip{ display:none; width:100%; margin:8px 0 0; font-size:12.5px; color:var(--err); }

/* bootstrap-select 生成的下拉
   ⚠ 这一段踩过坑，别简化：bootstrap-select 会把原 select 上的 class 抄一份到它生成的
     外层 div 上，于是那个 div 也带了 form-control。我们那条 .lck-cfg .form-control
     （高度 40 + 内边距 + 边框 + 圆角）就跑到外壳上去了，而里面的按钮自己又是 40px，
     结果是：两层框叠在一起、文字贴着顶边、还没有下拉箭头 —— 线上「域名数量」那一格
     就是这么变成一个空盒子里塞个「1个」的。所以外壳必须先清干净，只让里面的按钮当框用。 */
.lck-cfg .bootstrap-select{ width:100%!important; max-width:420px; }
.lck-cfg .bootstrap-select.form-control{
  height:auto!important; min-height:0!important; padding:0!important; border:0!important;
  border-radius:0!important; background:none!important; box-shadow:none!important;
  display:block; line-height:normal;
}
.lck-cfg .bootstrap-select > .dropdown-toggle{
  width:100%; height:40px; padding:0 32px 0 13px; display:flex; align-items:center;
  background:#fff!important; border:1px solid #dde3ea!important; border-radius:8px!important;
  box-shadow:none!important; font-size:14px; line-height:1.4; color:var(--ink)!important;
  outline:0!important; text-align:left!important; white-space:nowrap; overflow:hidden;
}
/* 1.14 版里显示的那层是 .filter-option（早期版本是 .filter-option.pull-left），
   它默认贴着按钮左上角，按钮改成 flex 也管不到它，所以这里单独让它撑满并居中。 */
.lck-cfg .bootstrap-select .filter-option{
  position:static!important; display:flex!important; align-items:center;
  width:100%; height:100%; padding:0!important; text-align:left; overflow:hidden;
}
.lck-cfg .bootstrap-select .filter-option-inner{
  display:flex; align-items:center; width:100%; min-width:0;
}
.lck-cfg .bootstrap-select .filter-option-inner-inner{
  width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.4;
}
/* 官方那份 bootstrap-select 在这个版本里没画箭头（Bootstrap 的 ::after 被它关了），
   没有箭头用户看不出这是个下拉，这里自己画一个。 */
.lck-cfg .bootstrap-select > .dropdown-toggle::after{ display:none!important; }
.lck-cfg .bootstrap-select > .dropdown-toggle{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2378828f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important; background-position:right 12px center!important;
  background-size:11px 8px!important;
}
.lck-cfg .bootstrap-select .caret{ display:none!important; }
.lck-cfg .bootstrap-select > .dropdown-toggle:focus,
.lck-cfg .bootstrap-select.show > .dropdown-toggle{ border-color:#9cc6ec!important; box-shadow:0 0 0 3px rgba(15,118,212,.10)!important; }
.lck-cfg .bootstrap-select .dropdown-menu{
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--sh3); padding:6px; margin-top:6px;
}
.lck-cfg .bootstrap-select .dropdown-menu li a{ border-radius:6px; padding:8px 10px; font-size:13.5px; color:var(--ink2); }
.lck-cfg .bootstrap-select .dropdown-menu li a:hover{ background:var(--line-2); color:var(--blue); }
.lck-cfg .bootstrap-select .dropdown-menu li.selected a,
.lck-cfg .bootstrap-select .dropdown-menu li a.active{ background:var(--blue-l); color:var(--blue); }
.lck-cfg .bootstrap-select .dropdown-menu .inner{ max-height:300px; }

/* 单选组：官方结构是 .btn-group-toggle + label.btn，类名不能动，
   这里做成圆角独立芯片 —— 拼接方格看着太硬，圆角更贴合整站的调子。 */
.lck-cfg .btn-group-toggle{ display:flex; flex-wrap:wrap; gap:10px; margin:0!important; }
.lck-cfg .btn-group-toggle > .btn,
.lck-cfg .btn-group.btn-group-toggle > .btn{
  position:relative; flex:0 0 auto; min-width:96px; min-height:42px; padding:10px 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:#fff!important; border:1px solid #e2e8f0!important; border-radius:10px!important;
  box-shadow:none!important; font-size:13.5px; font-weight:400; color:var(--ink2)!important;
  cursor:pointer;
  transition:border-color .16s var(--ease), color .16s var(--ease),
             background-color .16s var(--ease), box-shadow .16s var(--ease);
}
.lck-cfg .btn-group-toggle > .btn:hover{ border-color:#a8c9ea!important; color:var(--blue)!important; }
.lck-cfg .btn-group-toggle > .btn.active{
  border-color:var(--blue)!important; background:var(--blue-l)!important;
  /* 选中态是「浅蓝底 + 蓝字」，用品牌蓝 #0f76d4 只有 4.1:1，差一点到 WCAG AA，
     这里压深一档到 #0d6cc4（4.7:1）。边框和底色仍然是品牌蓝，观感不变。 */
  color:#0d6cc4!important; font-weight:500; box-shadow:0 0 0 3px rgba(15,118,212,.09)!important;
}
.lck-cfg .btn-group-toggle > .btn.disabled,
.lck-cfg .btn-group-toggle > .btn:disabled{ opacity:.45; cursor:not-allowed; }
.lck-cfg .btn-group-toggle > .btn input{ position:absolute; opacity:0; pointer-events:none; }
.lck-cfg .cycle-select-discount{
  margin-left:2px; padding:1px 6px; border-radius:5px;
  background:#fdefe9; color:#c63f1a; font-size:11.5px;   /* 原 var(--price) 差 0.05 到 AA，压深一档 */
}

/* 原生 radio / checkbox */
.lck-cfg .form-check{ display:inline-flex; align-items:center; gap:7px; margin:0 22px 0 0!important; padding:6px 0; }
.lck-cfg .form-check-input{ position:static; margin:0; width:15px; height:15px; accent-color:var(--blue); }
.lck-cfg .form-check-label{ margin:0; font-size:13.5px; color:var(--ink2); cursor:pointer; }
.lck-cfg .custom-control.custom-checkbox{ display:flex; align-items:center; gap:8px; padding:0; margin-bottom:10px!important; min-height:0; }
.lck-cfg .custom-control-input{ position:static; width:15px; height:15px; opacity:1; accent-color:var(--blue); flex:none; }
.lck-cfg .custom-control-label{ font-size:13.5px; color:var(--ink2); cursor:pointer; }
.lck-cfg .custom-control-label::before,.lck-cfg .custom-control-label::after{ display:none; }

/* 官方这几行的容器带 d-flex + 行内 width:100%，得把滑块改成可收缩，
   否则数字框和单位会被顶出卡片外面 */
.lck-cfg .form-group.row > div.d-flex{ display:flex!important; align-items:center; gap:12px; flex-wrap:wrap; padding-top:0!important; }
.lck-cfg .form-group.row > div.d-flex > span{ flex:none; font-size:13px; color:var(--ink3); }
.lck-cfg .form-check{ margin:0!important; }

/* 官网主题里有一条 img{max-width:100%;height:auto}，它会盖掉标签上的 height="20"。
   下拉框里的系统图标、订单汇总里的国旗都是靠那个属性控制大小的，所以这里必须显式锁死，
   否则会按原图几百像素铺开，把整页顶散（配置页第一版就是这么炸的）。 */
.lck-cfg .bootstrap-select .filter-option-inner-inner img,
.lck-cfg .bootstrap-select .dropdown-menu img,
.lck-cfg .bootstrap-select .dropdown-toggle img,
.lck-cfg select option img{ height:20px!important; width:auto!important; max-width:none!important; vertical-align:-4px; }
.lck-cfg .btn-group-toggle > .btn img{ height:18px!important; width:auto!important; max-width:none!important; }
.lck-os img,.lck-os-ico{ height:16px!important; width:auto!important; max-width:none!important; vertical-align:-3px; }
.lck-os-ico[height="14"]{ height:14px!important; }

/* 页脚 logo 兜底：官网主题 4.6.1 之前 .lc-footer-brand img 只写了 height 没写 width，
   加上标签上的 width="776" 属性会被横向拉伸。官网主题更新后这条是多余的，留着也无害。 */
.lc-footer-brand img{ width:auto!important; }

/* 系统注入的「Powered by ©智简魔方」：脚本给它打上这个 class 后隐藏 */
.lck-powered{ display:none!important; }

/* 分段小标题：左侧一道蓝竖条，把配置项分成几段，长表单不至于糊成一片 */
.lck-sec-t{
  display:flex; align-items:center; gap:9px;
  margin:26px 0 12px; padding-top:24px;
  border-top:1px solid var(--line-2);   /* 只在分段之间画一条，行与行之间不画 */
  font-size:14.5px; font-weight:650; color:var(--ink);
}
.lck-sec-t::before{ content:""; width:3px; height:14px; border-radius:2px; background:var(--blue); }
.lck-cfg .lck-sec-t:first-child{ margin-top:18px; padding-top:0; border-top:0; }

/* 数值滑块 */
.lck-cfg .configoption_range{
  -webkit-appearance:none; appearance:none; flex:1 1 180px; min-width:0;
  width:auto!important; height:4px; margin:0!important; padding:0; border:0;
  border-radius:2px; background:#e3e8ee; outline:0;
}
.lck-cfg .configoption_range::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid var(--blue); box-shadow:0 1px 4px rgba(15,118,212,.35); cursor:pointer;
}
.lck-cfg .configoption_range::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:#fff;
  border:2px solid var(--blue); box-shadow:0 1px 4px rgba(15,118,212,.35); cursor:pointer;
}
.lck-cfg .configoption_range_val{ flex:none; width:88px!important; max-width:88px; height:36px; margin:0!important; text-align:center; }
.lck-cfg .range_none{ position:absolute; height:4px; display:block; background:#cfd6df; border-radius:2px; cursor:not-allowed; }

/* 镜像（操作系统）：官方那两个下拉藏起来，这里是套在外面的界面。
   瓷砖 + 自绘版本下拉，详见 configureproduct.tpl 末尾的脚本。 */
.lck-mir{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,196px),1fr)); gap:12px; width:100%; }
.lck-mir-t{
  position:relative; display:flex; align-items:center; gap:12px;
  min-height:76px; padding:13px 15px;
  background:var(--bg); border:1px solid transparent; border-radius:12px;
  text-align:left; cursor:pointer;
  transition:background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.lck-mir-t.is-hide{ display:none; }
.lck-mir-t:hover{ background:#eef3f9; }
.lck-mir-t.is-on{ background:#fff; border-color:var(--blue); box-shadow:0 0 0 3px rgba(15,118,212,.10); z-index:3; }
.lck-mir-t img{
  flex:none; width:32px!important; height:32px!important; max-width:none!important;
  object-fit:contain; filter:grayscale(1); opacity:.45;
  transition:filter .18s var(--ease), opacity .18s var(--ease);
}
.lck-mir-t.is-on img{ filter:none; opacity:1; }
.lck-mir-b{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 auto; }
.lck-mir-n{ font-size:14px; font-weight:600; color:var(--ink); line-height:1.3; word-break:break-word; }
.lck-mir-v{ position:relative; min-height:28px; display:flex; align-items:center; font-size:12.5px; }
.lck-mir-hint{ font-style:normal; color:#aab2bd; }
.lck-mir-native{ position:absolute!important; width:1px; height:1px; opacity:0; pointer-events:none; }

/* 「更多系统」那一格 */
.lck-mir-more{ justify-content:center; color:var(--ink3); }
.lck-mir-more-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:#e7edf4; color:var(--ink3);
  transition:transform .22s var(--ease), background-color .18s var(--ease);
}
.lck-mir-more:hover .lck-mir-more-ic{ background:var(--blue-l); color:var(--blue); }
.lck-mir-more.is-open .lck-mir-more-ic{ transform:rotate(180deg); }
.lck-mir-more-t{ font-size:13px; }

/* 版本下拉：自绘，不用系统原生控件 */
.lck-mir-pick{ position:relative; display:block; width:100%; }
.lck-mir-btn{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; height:30px; padding:0 9px;
  background:#fff; border:1px solid #dde3ea; border-radius:8px;
  font-size:12.5px; color:var(--ink); cursor:pointer; text-align:left;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.lck-mir-pick.is-open .lck-mir-btn{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(15,118,212,.10); }
.lck-mir-cur{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lck-mir-ar{
  flex:none; width:6px; height:6px; margin-top:-3px;
  border-right:1.5px solid #a9b2be; border-bottom:1.5px solid #a9b2be;
  transform:rotate(45deg); transition:transform .2s var(--ease);
}
.lck-mir-pick.is-open .lck-mir-ar{ transform:rotate(-135deg); margin-top:2px; border-color:var(--blue); }
.lck-mir-pop{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--sh3); padding:5px; max-height:236px; overflow:auto;
}
.lck-mir-pop ul{ margin:0; padding:0; list-style:none; }
.lck-mir-pop li{
  padding:8px 10px; border-radius:7px; font-size:12.5px; color:var(--ink2);
  cursor:pointer; line-height:1.5; word-break:break-word;
  transition:background-color .14s var(--ease), color .14s var(--ease);
}
.lck-mir-pop li:hover{ background:var(--line-2); color:var(--blue); }
.lck-mir-pop li.is-on{ background:var(--blue-l); color:var(--blue); font-weight:600; }
.lck-mir-tip{ width:100%; margin:10px 0 0; font-size:12.5px; color:var(--ink3); }

/* 主机密码那一行 */
.lck-pw-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:7px; border:1px solid #dde3ea;
  background:#fff; color:var(--ink3); cursor:pointer;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.lck-pw-btn:hover{ border-color:#a8c9ea; color:var(--blue); }

/* ------------------------------ 7. 订单摘要 ------------------------------ */
.lck-sum-cfg{ padding:20px 20px 22px; }
.lck-os-l{ margin:0; padding:0; list-style:none; }
.lck-os-r{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:7px 0; font-size:13px; }
.lck-os-k{ min-width:0; color:var(--ink2); word-break:break-word; }
.lck-os-k i{ color:var(--ink3); font-style:normal; margin-right:4px; }
.lck-os-k b{ font-weight:500; }
.lck-os-ico{ vertical-align:-3px; margin-right:3px; }
.lck-os-v{ flex:none; color:var(--ink2); white-space:nowrap; }
.lck-os-sub{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.lck-os-cut .lck-os-v{ color:var(--ok); }
.lck-os-total{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
}
.lck-os-total span{ font-size:14px; color:var(--ink); }
.lck-os-total em{ font-style:normal; font-size:13px; color:var(--price); }
.lck-os-total b{ font-size:25px; font-weight:700; letter-spacing:-.5px; }
.lck-os-act{ margin-top:18px; }
.lck-os-act .lc-btn{ height:46px; font-size:15px; }

.lck-os-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:900;
  align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px; background:#fff; border-top:1px solid var(--line);
  box-shadow:0 -4px 18px rgba(18,44,84,.08);
}
.lck-os-bar .total{ font-size:15px; font-weight:650; color:var(--price); }
.lck-os-bar .lc-btn{ flex:none; height:40px; }

/* ------------------------------ 8. v10 订购页（Element UI）------------------------------
   这几页是系统自带的独立 Vue 页面，不走官网 header，所以这里只做配色和圆角覆盖，
   让它跟官网主题是一套颜色，不改任何交互。 */
body .template{ font-family:"HarmonyOS Sans SC","MiSans","PingFang SC","Microsoft YaHei",sans-serif; }
.template .el-button--primary{ background-color:var(--blue); border-color:var(--blue); }
.template .el-button--primary:hover,.template .el-button--primary:focus{ background-color:#1583e6; border-color:#1583e6; }
.template .el-button--primary:active{ background-color:var(--blue-d); border-color:var(--blue-d); }
.template .el-radio-button__orig-radio:checked + .el-radio-button__inner{
  background-color:var(--blue); border-color:var(--blue); box-shadow:-1px 0 0 0 var(--blue);
}
.template .el-radio-button__inner:hover,.template .el-checkbox__input.is-checked + .el-checkbox__label,
.template .el-radio__input.is-checked + .el-radio__label{ color:var(--blue); }
.template .el-checkbox__input.is-checked .el-checkbox__inner,
.template .el-radio__input.is-checked .el-radio__inner{ background-color:var(--blue); border-color:var(--blue); }
.template .el-tabs__item.is-active,.template .el-tabs__item:hover{ color:var(--blue); }
.template .el-tabs__active-bar{ background-color:var(--blue); }
.template .el-slider__bar{ background-color:var(--blue); }
.template .el-slider__button{ border-color:var(--blue); }
.template .el-input__inner:focus,.template .el-textarea__inner:focus{ border-color:var(--blue); }
.template .el-link.el-link--primary,.template a{ color:var(--blue); }

/* ------------------------------ 9. 手机端 ------------------------------ */
@media (max-width:1100px){
  .lck-col-s{ width:290px; }
  .lck-side{ width:230px; }
}

@media (max-width:900px){
  /* ⚠ 两个容器都是 align-items:flex-start（桌面端要让侧栏顶部对齐）。
     一旦 flex-direction 变成 column，flex-start 管的就是「宽度」，
     子项会按内容宽度收缩 —— 主内容区会一直卡在两百来像素，右边空一大片。
     所以换列方向的同时必须把对齐改回 stretch，并显式给 100% 宽。 */
  .lck-cols,.lck-layout{ flex-direction:column; align-items:stretch; }
  .lck-col-m,.lck-col-s,.lck-main,.lck-side{ width:100%; max-width:100%; }
  .lck-sum{ position:static; }
  /* 手机端目录不再吸顶，但也不能让它无限长 —— 产品一多，
     整个商品列表会被顶到一两屏之外。这里给个高度上限，里面自己滚。 */
  .lck-side-in{ position:static; max-height:44vh; overflow:auto; -webkit-overflow-scrolling:touch; }
  /* 手机端分类保持整行列表，芯片挤在一起反而看不清层级 */
  .lck-cat-l{ padding:0 10px 10px; }
  .lck-cat-h{ padding:13px 16px; }
  .lck-cat-g[open] > .lck-cat-h{ padding-bottom:7px; }
  .lck-cat-i{ padding:11px 12px; }
  .lck-side-t{ padding:12px 16px 10px; }
}

@media (max-width:768px){
  .lck-sec{ padding:18px 0 28px; }
  .lck-body{ padding:18px 0 28px; }
  .lck-box{ padding:18px 16px 20px; border-radius:10px; }
  .lck-box-cfg{ padding:4px 16px 18px; }
  .lck-phead-s-in{ min-height:0; gap:14px; }
  .lck-phead-s h1{ font-size:18px; }
  .lck-steps li span{ display:none; }
  .lck-steps li + li::before{ width:20px; margin:0 8px; }
  .lck-search{ max-width:none; }
  .lck-grid{ grid-template-columns:minmax(0,1fr); }
  .lck-head-t{ font-size:18px; }
  .lck-done{ margin:20px auto; padding:40px 22px; }

  /* 配置页：标签移到控件上方，一行一项 */
  .lck-cfg .form-group.row{ padding:14px 0; }
  .lck-cfg label.col-form-label{ flex:0 0 100%; max-width:100%; padding:0 0 9px; }
  .lck-cfg .form-group.row > div{ max-width:100%; }
  .lck-cfg .form-group.row > div.col-md-3,
  .lck-cfg .form-group.row > div.col-md-2,
  .lck-cfg .form-group.row > div.col-8{ flex:1 1 auto; max-width:100%; }
  .lck-cfg .btn-group-toggle > .btn{ min-width:88px; padding:8px 12px; font-size:13px; }
  .lck-cfg .configoption_range_val{ width:74px!important; max-width:74px; }
  .lck-mir{ grid-template-columns:repeat(auto-fill,minmax(min(100%,152px),1fr)); gap:10px; }
  .lck-mir-t{ min-height:68px; padding:11px 12px; gap:10px; border-radius:10px; }
  .lck-mir-t img{ width:26px!important; height:26px!important; }
  .lck-mir-n{ font-size:13px; }

  /* 配置页手机端底部有吸底结算条，给页面留出高度，别挡住最后一行 */
  .lck-cfg .lck-sec{ padding-bottom:92px; }

  .lck-item-f{ gap:10px; }
  .lck-item-sum{ margin-left:0; }
  .lck-gate{ min-width:calc(50% - 5px); }
  .lck-paycheck{ font-size:13px; }
}

@media (max-width:480px){
  /* 手机竖屏：镜像一行一个，版本下拉才有地方显示完整名字 */
  .lck-mir{ grid-template-columns:minmax(0,1fr); }
  .lck-mir-t{ min-height:64px; }
}

@media (max-width:420px){
  .lck-gate{ min-width:100%; }
  .lck-promo{ flex-direction:column; }
  .lck-promo .lc-btn{ width:100%; }
}

/* ------------------------- 账号区（登录后资料 / 游客注册登录） -------------------------
   游客那一半是魔方官方的原始结构（Bootstrap 的 .row/.col-sm-6/.form-control/
   .btn-group-toggle），这里只做外观覆盖，不改结构。 */
/* 未登录时把「快速注册/登录」整块提到左栏最前面：没账号是下不了单的
   （后台还要求绑定手机），先把账号这一步摆在最显眼的位置，别让人填完一堆东西
   才发现要注册。:has() 不支持的老浏览器就保持原来的顺序，功能一样不受影响。 */
.lck-col-m{ display:flex; flex-direction:column; }
.lck-col-m > .lck-acct:has(.lck-guest){ order:-1; }

.lck-acct-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:12px 26px; }
.lck-acct-list li{ display:flex; gap:10px; align-items:baseline; font-size:14px; line-height:1.7; }
.lck-acct-list li span{ flex:none; width:52px; color:var(--ink3); }
.lck-acct-list li b{ font-weight:500; color:var(--ink); word-break:break-all; }

/* 官方那行 <p>注册/登录</p> 跟我外面的区块标题重了，藏掉只留两颗切换钮，
   （用 CSS 藏而不是删标签，官方将来改文案也不影响） */
/* 「老客户请点此登录 / 新建账户」这颗切换钮
   —— 原来它自己占一整行，下面还压一条分隔线，卡片顶上空出一大片，很难看。
   现在把它做成一句右对齐的蓝色文字链接，和下面那排「手机注册 / 邮箱注册」并排在同一行：
   注册和登录两个视图的第一行都是那排切换标签时（:has 两个都命中才生效），
   把这条从文档流里拿出来绝对定位到右上角；只要有一个视图没有标签行，
   就退回普通的右对齐一行，绝不会压到输入框上面去。 */
/* 手机端标题那行要能换行，否则副标题会把「快速注册/登录」挤成两行 */
@media (max-width:640px){
  .lck-acct .lck-box-h{ flex-wrap:wrap; }
  .lck-acct .lck-box-sub{ flex:1 1 100%; margin-top:3px; line-height:1.6; }
}
.lck-guest{ position:relative; }
.lck-guest > .d-flex{
  justify-content:flex-end!important; gap:10px; flex-wrap:wrap;
  margin:0 0 10px; padding:0; border:0;
}
.lck-guest > .d-flex > p{ display:none; }
@media (min-width:641px){
  .lck-guest:has(.old-user .btn-group-toggle):has(.new-user .btn-group-toggle) > .d-flex{
    position:absolute; top:2px; right:0; z-index:2; margin:0;
  }
  .lck-guest:has(.old-user .btn-group-toggle):has(.new-user .btn-group-toggle) > .old-user > .row,
  .lck-guest:has(.old-user .btn-group-toggle):has(.new-user .btn-group-toggle) > .new-user > .row{
    margin-top:0!important;
  }
}
.lck-guest .btn.btn-sm{
  height:32px; padding:0 15px; display:inline-flex; align-items:center;
  border:1px solid #dde3ea; border-radius:8px; background:#fff!important;
  font-size:13px; color:#39424f!important; box-shadow:none!important; margin-left:8px;
}
.lck-guest .btn.btn-sm.btn-primary{ border-color:#1274d6; background:#1274d6!important; color:#fff!important; }
/* 切换钮做成一句文字链接：这是卡片里的次要动作，画成按钮反而抢戏。
   权重要压过上面那条 .lck-guest .btn.btn-sm.btn-primary (0,4,0)，所以带上父级。 */
.lck-guest > .d-flex > .btn.btn-sm,
.lck-guest > .d-flex > .btn.btn-sm.btn-primary{
  height:auto; margin:0; padding:2px 0; border:0!important; border-radius:0!important;
  background:none!important; color:#1268c4!important; font-size:13px; line-height:1.6;
  box-shadow:none!important; text-decoration:none;
}
.lck-guest > .d-flex > .btn.btn-sm::after{ content:" ›"; font-size:14px; }
@media (hover:hover) and (pointer:fine){
  .lck-guest > .d-flex > .btn.btn-sm:hover,
  .lck-guest > .d-flex > .btn.btn-sm.btn-primary:hover{ color:#0f5fb0!important; text-decoration:underline; }
}
/* 栅格。官方给的是 .row + col-sm-6/col-sm-12，里面还混了 input-group + custom-file，
   宽度全靠 Bootstrap 的 flex 兜，字段一多就左右两列不等宽、验证码图换行掉到下面去。
   这里整块接管成两列 grid：只改外观，标签、name、id、onclick 一个没动。 */
.lck-guest .row{
  display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 18px; margin:0!important;
}
.lck-guest .row > [class*="col-"]{
  width:auto!important; max-width:none!important; flex:none!important;
  padding:0!important; margin:0!important; min-width:0;
}
.lck-guest .row > .col-sm-12{ grid-column:1 / -1; }
.lck-guest .form-control{
  height:42px; padding:0 13px; border:1px solid #dde3ea; border-radius:8px;
  background:#fff; font-size:14px; color:var(--ink); box-shadow:none; min-width:0;
}
.lck-guest textarea.form-control{ height:auto; padding:10px 13px; line-height:1.7; }
.lck-guest .form-control:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(15,118,212,.12); }
.lck-guest .form-control::placeholder{ color:#aab2bd; }

/* 一格里的 input-group 绝对不许换行：一换行，「获取手机验证码」和验证码图就掉到
   输入框下面去（现网截图里就是这样）。custom-file 是 Bootstrap 的文件控件外壳，
   官方拿它当普通壳子用，它自带固定高度，这里一并清掉。 */
.lck-guest .input-group{
  width:100%!important; float:none!important; margin-right:0!important;
  flex-wrap:nowrap!important; align-items:stretch;
}
.lck-guest .input-group > .custom-file{
  display:flex!important; height:auto!important; flex:1 1 auto; min-width:0; margin:0;
}
.lck-guest .custom-file > .form-control{ width:100%; }
.lck-guest .input-group-append{ flex:none; display:flex; align-items:center; }
.lck-guest .input-group-append .btn,
.lck-guest .btn-outline-secondary{
  height:42px; padding:0 15px; margin-left:-1px; border:1px solid #dde3ea; border-left:0;
  border-radius:0 8px 8px 0; background:#f7fbff; color:#1268c4; font-size:13.5px; white-space:nowrap;
}
.lck-guest .input-group-append .btn:hover{ background:#eaf3fd; }
/* 图形验证码那张图：官网主题有一条 img{max-width:100%;height:auto}，
   会把标签上的 height="36px" 盖掉，图就按原图尺寸铺开，比输入框还高一截。
   宽高都给 auto、只压 max-*，图片按自己的比例缩，既不拉伸也不留黑边。 */
.lck-guest .input-group-append img{
  display:block; width:auto; height:auto; max-width:132px; max-height:42px;
  box-sizing:border-box; border:1px solid #dde3ea; border-radius:8px;
  background:#fff; cursor:pointer; margin-left:8px;
}
.lck-guest .input-group-append.ml-2{ margin-left:0!important; }
/* 官方 viewcart.js 的 init() 会调 changeType("new")，把登录那半（.new-user）收起来，
   但那是 JS 跑完之后的事。不写这一条，页面加载的头一瞬间注册和登录会同时露出来再收掉，
   闪一下很难看。官方模板里也有同样一条内联样式，这里照搬。 */
.lck-guest .new-user,
.lck-guest .btn.btn-sm.new-user{ display:none; }

/* 这两行的写法要留意：切换钮是 .btn.btn-primary.btn-sm，
   上面那条 .lck-guest .btn.btn-sm.btn-primary 权重 (0,4,0) 会把它们全刷成蓝的，
   所以这里必须写到 (0,4,0) 以上，否则选中和没选中长一个样。 */
.lck-guest .btn-group-toggle .btn.btn-sm,
.lck-guest .btn-group-toggle .btn.btn-sm.btn-primary{
  height:38px; padding:0 16px; display:inline-flex; align-items:center; margin-left:0;
  border:1px solid #dde3ea; background:#fff!important; color:#39424f!important;
  font-size:13.5px; box-shadow:none!important;
}
.lck-guest .btn-group-toggle .btn.btn-sm:first-child{ border-radius:8px 0 0 8px; }
.lck-guest .btn-group-toggle .btn.btn-sm:last-child{ border-radius:0 8px 8px 0; margin-left:-1px; }
.lck-guest .btn-group-toggle .btn.btn-sm.active,
.lck-guest .btn-group-toggle .btn.btn-sm.btn-primary.active{
  border-color:#1274d6; background:#eaf3fd!important; color:#1268c4!important; font-weight:500; position:relative; z-index:1;
}
.lck-guest .btn-group-toggle .btn input{ position:absolute; opacity:0; pointer-events:none; }
/* 手机注册那一栏是 col-sm-3 区号 + col-sm-9 号码拼出来的，
   官方用 float 拼，窄屏会错位，这里改成 flex 让两截自己对齐 */
.lck-guest .registerphone, .lck-guest .loginphone{ display:flex; align-items:center; }
.lck-guest .registerphone > .col-sm-3, .lck-guest .loginphone > .col-sm-3{
  float:none!important; flex:0 0 108px; max-width:108px; padding:0!important; margin-bottom:0!important;
}
.lck-guest .registerphone > .col-sm-3 .form-control,
.lck-guest .loginphone > .col-sm-3 .form-control{ border-radius:8px 0 0 8px; }
.lck-guest .registerphone > .form-control, .lck-guest .loginphone > .form-control{
  flex:1 1 auto; width:auto; max-width:none; margin-left:-1px; border-radius:0 8px 8px 0;
}
.lck-guest select.form-control{ appearance:none; padding-right:32px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2378828f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:11px 8px; }
@media (max-width:640px){
  .lck-guest .row{ grid-template-columns:1fr; }
  .lck-guest .d-flex{ flex-wrap:wrap; gap:8px; }
  .lck-guest .input-group-append .btn{ padding:0 11px; font-size:13px; }
  .lck-guest .input-group-append img{ max-width:110px; }
}

/* ---- 浅蓝底上的蓝字：#0f76d4 压在 #e9f3fc 上只有 4.1:1，差一点点到 WCAG AA。
        只把这几处文字压深一档，品牌蓝本身不动。 ---- */
.lck-cat-n,
.lck-steps .is-done b,
.c-item.active,
.badge-primary,
.btn-group-toggle > label.btn.active,
.lck-side-list a.is-on{ color:#0d6cc4; }
.lck-cfg label.btn.btn-primary.active{ color:#0d6cc4!important; }

/* ============================================================================
   云产品订购页「加入购物车」提示弹窗 · 移动端宽度（v2.9.12）
   Element 的弹窗默认宽度是 50%，手机上只有不到 200px，
   两个按钮挤成两行还会被切边。窄屏改成接近满屏宽。
   ⚠ 只改宽度和按钮排布，不动任何交互。
   ========================================================================== */
@media (max-width:767px){
  .el-dialog{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    margin-top:20vh!important;
  }
  .el-dialog__body{
    max-height:calc(100vh - 220px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .el-dialog__footer .dialog-footer{ display:flex; gap:10px; }
  .el-dialog__footer .dialog-footer > .el-button{ flex:1 1 0; margin-left:0!important; }
}


/* 「继续挑选产品」原来只有 21px 高，手机上点击区偏小，补到 24px 起（WCAG 2.2）。*/
a.lck-back,
.lck-crumb a{ display:inline-flex; align-items:center; min-height:24px; padding-block:2px; }