/* ============================================================
   购物车 cart · 统一设计令牌
   与官网 web/www（www-unified.css）、用户中心 QRuser-unified.css
   保持同一套视觉语言。
   主色: #165DFF (Arco 蓝) | 渐变 | 圆角 10px | 统一阴影
   说明：本文件在 head.tpl(custom.css 之后)引入，把购物车原本
   散落的蓝色（#3860f4/#0e52ff/#2948df/#0056ff）统一为令牌主色，
   并把「黄色渐变 CTA」统一为蓝渐变，与官网风格一致。
   ============================================================ */
:root{
  --Original: #165DFF;
  --Original-2: #3D7FFF;
  --gradient1: linear-gradient(135deg,#3D7FFF 0%,#165DFF 100%);
  --txtcl: #1d2129;
  --radius: 10px;
  --global-shadow: 0 10px 30px rgba(22,93,255,.10);
  /* 导航布局变量 */
  --nav-width: 268px;
  --nav-offset: 300px;
  --soft: #eef3ff;
}

/* ---- 主色链接 ---- */
a{color:var(--Original);}
a:hover{color:var(--Original);opacity:.85;}

/* ---- 产品卡统一 ---- */
.smc-card{
  border-radius:var(--radius)!important;
  box-shadow:var(--global-shadow)!important;
  border:1px solid #e1e6f0!important;
}
.smc-card:before{background:var(--Original)!important;}
.smc-card .card-top .title{color:var(--txtcl);}
.smc-card .card-bottom .bottom-wrap .price-detail .font-num{color:var(--Original)!important;}

/* ---- 主按钮：默认蓝渐变 -> 统一渐变 ---- */
.button-base{
  background:var(--gradient1)!important;
  border:none!important;
  color:#fff!important;
  border-radius:var(--radius)!important;
  box-shadow:0 6px 16px rgba(22,93,255,.22)!important;
}
.button-base:hover{filter:brightness(1.05);color:#fff!important;}

/* ---- 原本的黄色渐变 CTA -> 统一蓝渐变（与官网一致） ---- */
a.button-base.button-yellowgradient.h34,
a.button-base.button-yellowgradient.h34:hover{
  background:var(--gradient1)!important;
  color:#fff!important;
  border:none!important;
  text-shadow:none!important;
  box-shadow:0 6px 16px rgba(22,93,255,.22)!important;
}
/* 售罄按钮：保留中性灰，避免产生「可购买」的误导 */
a.button-base.button-yellowgradient.h34.no,
a.button-base.button-yellowgradient.h34.no:hover{
  background:#f2f3f5!important;
  color:#9aa3b2!important;
  border:1px solid #e3e6ec!important;
  box-shadow:none!important;
}

/* ---- 蓝边框 / 蓝渐变按钮 ---- */
a.button-base.button-radius-4.button-blueborder.h34-border.ml16{
  border:1px solid var(--Original)!important;
  background:#fff!important;
  color:var(--Original)!important;
  box-shadow:none!important;
}
a.button-base.button-radius-4.button-bluegradient.h34{
  background:var(--gradient1)!important;
  color:#fff!important;
  border:none!important;
}

/* ---- 左侧分类导航 active ---- */
li#open{background:var(--gradient1)!important;}
li#open:after{background:var(--Original)!important;}
.product_second.active a{color:var(--Original)!important;}
.products-nav>ul li.active{border-right:2px solid var(--Original)!important;}
/* 左侧产品分组导航：grid 第一列，与右侧产品卡片区域等高，消除底部留白 */
.products-nav {
  grid-column: 1;
  align-self: stretch;          /* 拉伸到与右侧同高，避免底部空白不协调 */
  background: #fff;
  max-height: none;             /* 覆盖主题默认限高，跟随右侧高度 */
  overflow: visible;
  float: none;
}
.products-nav>ul li:before,
.products-secondary:before{color:var(--Original)!important;}
.products-secondary:before{background:var(--Original)!important;}
.second .text-white{color:var(--Original)!important;}

/* ---- 价格 / 强调 ---- */
td.font-weight-bold.text-dark.text-right{color:var(--Original)!important;}
button#addToCartBtn{
  background:var(--gradient1)!important;
  border:none!important;
}
.btn-custom-group .active{
  background-color:var(--Original)!important;
  color:#fff!important;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle{
  background-color:var(--Original)!important;
  border-color:var(--Original)!important;
  color:#fff!important;
}

/* ---- 滑块 / 选中态 ---- */
input[type="range"]::-webkit-slider-thumb{border:4px solid var(--Original)!important;}
input[type="range"]::-moz-range-thumb{border:4px solid var(--Original)!important;}

/* ---- 通用圆角 ---- */
.configoption_form,
.card-back{border-radius:var(--radius)!important;}

/* ============================================================
   购物车产品页：桌面端全宽铺满（覆盖 custom.css 的 1240px 固定宽度）
   左分类固定宽度，右侧产品区自适应铺满左右
   ============================================================ */
.products-gray-wrap { min-width: 100% !important; }
.products-wrap {
  display: grid;
  grid-template-columns: var(--nav-width, 268px) 1fr;
  column-gap: calc(var(--nav-offset, 300px) - var(--nav-width, 268px)); /* 与右侧保持原 32px 间距 */
  align-items: start;             /* 左栏不被拉伸，sticky 才能生效 */
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding-left: 24px;
  padding-right: 24px;
  overflow: visible;             /* 关键：取消 overflow:hidden，否则 sticky 失效 */
  clear: none;
}
.index-banner { width: 100% !important; }
.container { width: 100% !important; max-width: 100% !important; }
.configoption_form { width: 100% !important; max-width: 100% !important; }

/* 右侧产品区：grid 第二列自适应铺满，撑高父容器（使左栏 sticky 跟随整页） */
.config-content-parent.product_card {
  grid-column: 2;
  min-width: 0;
  width: auto !important;
  float: none;
}
.products-banner-buttons {
  width: auto !important;
  margin-left: var(--nav-offset, 300px) !important;
}

/* 移动端恢复堆叠，避免左侧 300px 留白 */
@media all and (max-width: 768px) {
  .products-wrap { display: block; padding-left: 10px; padding-right: 10px; }
  .products-nav { position: static; max-height: none; }
  .config-content-parent.product_card { width: 100% !important; float: none; }
  .compliance-notice { grid-column: auto; }
  .products-banner-buttons { margin-left: 0 !important; width: 100% !important; }
}

/* ============================================================
   产品浏览页：每排显示 5 个产品（覆盖 custom.css 的 3 列布局）
   用 flex + gap 布局，卡片宽度按 5 列自适应
   ============================================================ */
.config-content-parent.product_card {
  display: flex !important;
  flex-wrap: wrap;
  gap: 20px;
  align-content: flex-start;
}
.col-sm-product {
  width: calc((100% - 80px) / 5) !important;  /* 5 列，4 个 20px 间隙 */
  margin-right: 0 !important;
  margin-bottom: 40px !important;
  display: block !important;
}
/* 取消原 3 列的 nth-child 负边距 */
.product_card > div:nth-child(3n+3) {
  margin-right: 0 !important;
}

/* 产品卡：等高 + 「立即购买」按钮对齐到卡片最底部 */
.col-sm-product { display: flex !important; flex-direction: column !important; }
.smc-card.card-md {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.smc-card.card-md .card-bottom { margin-top: auto !important; }

/* 价格在上、立即购买按钮换到下一行（覆盖 custom.css 的同行 float 布局） */
.smc-card.card-md .card-bottom .bottom-wrap.label-tags {
  height: auto !important;
  padding: 20px 0 24px 0 !important;
}
.smc-card.card-md .card-bottom .bottom-wrap .price-detail {
  display: block !important;
  width: 100% !important;
}
.smc-card.card-md .card-bottom .bottom-wrap.label-tags .button-base {
  float: none !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 14px !important;
}

/* 中等屏幕：3 列 */
@media all and (max-width: 1400px) {
  .col-sm-product { width: calc((100% - 40px) / 3) !important; }
}
/* 平板：2 列 */
@media all and (max-width: 992px) {
  .col-sm-product { width: calc((100% - 20px) / 2) !important; }
}

/* 隐藏购物车遗留空容器，避免其参与 grid 布局挤占右侧内容 */
#output {
  display: none;
}
/* 手机：1 列 */
@media all and (max-width: 768px) {
  .col-sm-product { width: 100% !important; }
}

/* ============================================================
   产品浏览页底部：机房合规声明提示条
   ============================================================ */
.compliance-notice {
  grid-column: 1 / -1;           /* 跨整行，位于产品区下方 */
  width: calc(100% - (var(--nav-offset, 300px) + 40px));
  margin-left: calc(var(--nav-offset, 300px) + 40px);
  margin-top: 20px;
  padding: 18px 22px;
  background: #fff8f3;
  border: 1px solid #ffd9bf;
  border-left: 4px solid var(--Original);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 24px;
  color: #8a5a3a;
  box-sizing: border-box;
}
.compliance-notice strong {
  color: var(--Original);
  font-weight: 700;
}
/* 移动端：合规提示恢复整行 */
@media all and (max-width: 768px) {
  .compliance-notice { width: 100% !important; margin-left: 0 !important; }
}

/* ============================================================
   购物车页：完全隐藏整站底部栏，聚焦结账流程、避免底部布局张力
   仅作用于购物车主题（unified.css 只在购物车页加载），不影响全站其它页面
   ============================================================ */
footer.footer,
.footer {
  display: none !important;
}

/* ============================================================
   产品区空状态（未查询到该区域下的相关产品）
   父容器 .config-content-parent.product_card 是 flex 换行布局，
   必须用 flex:1 1 100% 撑满整行，否则会被压成一条窄白块
   ============================================================ */
.no-data {
  flex: 1 1 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  margin-top: 0;
  padding: 48px 24px;
  background: none;
  border: 0;
  box-shadow: none;
  text-align: center;
}
.no-data .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.empty .empty-ico {
  display: block;
  line-height: 0;
}
.empty .empty-ico svg {
  display: block;
  width: 104px;
  height: 88px;
}
.empty p {
  margin: 18px 0 0;
  padding: 0;
  background: none;
  background-image: none;
  border: 0;
  box-shadow: none;
  color: #86909c;
  font-size: 15px;
  line-height: 24px;
}
@media all and (max-width: 768px) {
  .no-data { min-height: 280px; padding: 36px 16px; }
  .empty .empty-ico svg { width: 88px; height: 74px; }
  .empty p { font-size: 14px; line-height: 22px; }
}

/* ============================================================
   遗留强调色补齐：custom.css 中尚未被上面规则覆盖的硬编码蓝，
   统一跟随主题主色（切换配色预设后不再残留蓝色）
   ============================================================ */
/* 左侧一级分组：展开/选中态（li#open + li.active）
   custom.css 原为写死的 #0e52ff 实底 + 白字，现底色跟随主色。
   文字必须恒为白色——若被 .active a 的主色覆盖，会与同色底叠在一起“消失” */
.products-nav > ul li#open,
.products-nav > ul li.active {
  background: var(--Original) !important;
  border-right-color: var(--Original) !important;
}
.products-nav > ul li#open a,
.products-nav > ul li#open > a,
.products-nav > ul li.active a,
.products-nav > ul li.active > a {
  color: #fff !important;
  font-weight: 700;
}
.products-nav > ul li#open:after,
.products-nav > ul li.active:after {
  background: var(--Original) !important;
}
.products-nav > ul li#open:before,
.products-nav > ul li.active:before {
  color: #fff !important;
}
/* 产品卡「库存」标签 */
.smc-card .card-tag { color: var(--Original) !important; }
.smc-card .card-tag:before { background: var(--Original) !important; }
/* 顶部横幅按钮 */
.tpm-prod-hero__btn {
  background: var(--gradient1) !important;
  border-color: var(--Original) !important;
}
.index-banner-top ul > li button { color: var(--Original) !important; }
/* 移动端横幅标题竖条 */
h1.banner-title { border-left-color: var(--Original) !important; }

/* ============================================================
   购物车清单 / 产品配置页（回退到 cart/default 模板，页面基于
   Bootstrap + 会员中心头部）：把 Bootstrap 强调色统一到主题主色
   ============================================================ */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):focus,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--Original) !important;
  border-color: var(--Original) !important;
  color: #fff !important;
}
.btn-outline-primary {
  color: var(--Original) !important;
  border-color: var(--Original) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active {
  background-color: var(--Original) !important;
  border-color: var(--Original) !important;
  color: #fff !important;
}
.text-primary { color: var(--Original) !important; }
a.text-primary:hover, a.text-primary:focus { color: var(--Original) !important; }
.bg-primary { background-color: var(--Original) !important; }
.btn-custom.active,
label.btn-custom.active,
.btn-custom-group .active {
  background-color: var(--Original) !important;
  border-color: var(--Original) !important;
  color: #fff !important;
}
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  border-color: var(--Original) !important;
}
/* 会员中心侧栏菜单选中/悬停（7yuser/header.tpl:56-61 内联写死 #165DFF，
   特异性含 ID，必须用相同选择器 + 后加载才能覆盖）
   / 充值方式选中卡片 */
.vertical-menu #sidebar-menu .metismenu a:hover,
.vertical-menu #sidebar-menu .metismenu li.mm-active > a,
.vertical-menu #sidebar-menu .metismenu li.active > a,
.vertical-menu #sidebar-menu .metismenu li.mm-active > a i,
.vertical-menu #sidebar-menu .metismenu li.active > a i {
  color: var(--Original) !important;
}
.vertical-menu #sidebar-menu .metismenu a:hover,
.vertical-menu #sidebar-menu .metismenu li.mm-active > a,
.vertical-menu #sidebar-menu .metismenu li.active > a {
  background: var(--tc-blue-l) !important;
}
.addfunds-payment.active { border-color: var(--Original) !important; }