/* ============================================================
   购物车 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:#0e47c2;}

/* ---- 产品卡统一 ---- */
.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;
}