/* ==========================================================================
   狗狗云 · 购物车 / 下单主题（gougou）
   作用域：public/cart/template/pc/gougou/
   说明：本文件只覆盖视觉（配色、圆角、投影、间距、表格与按钮观感），
        不包含任何业务逻辑，删除本文件即可完全回到官方外观。
   ========================================================================== */

:root {
  --gg-brand: #0052d9;
  --gg-brand-dark: #002ab1;
  --gg-brand-light: #ecf2fe;
  --gg-bg: #f7f9fd;
  --gg-card: #ffffff;
  --gg-line: #e7e8ea;
  --gg-line-soft: #f0f1f3;
  --gg-text: #181818;
  --gg-text-2: #5e646e;
  --gg-text-3: #8a9099;
  --gg-price: var(--color-price-text, #e5484d);
  --gg-r: 8px;
  --gg-r-sm: 4px;
  --gg-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  --gg-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.08);
}

body {
  background: var(--gg-bg) !important;
  color: var(--gg-text);
}

/* ---------- 标题 ---------- */
.main-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--gg-text);
  letter-spacing: 0.2px;
}

.second-desc,
.tips {
  color: var(--gg-text-3);
}

/* ---------- 容器卡片 ---------- */
.main-content-box {
  background: var(--gg-card);
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-r);
  box-shadow: var(--gg-shadow);
  padding: 20px 22px;
}

.cart-des,
.goods-box,
.info-box,
.description-box,
.footer-box,
.total-box,
.price-box,
.goods-list-div {
  border-radius: var(--gg-r);
}

.cart-des {
  border: 1px solid var(--gg-line);
  background: var(--gg-brand-light);
  color: var(--gg-text-2);
}

/* ---------- 商品卡片（产品列表页） ---------- */
.shopping-box {
  display: grid;
  gap: 16px;
}

.shopping-item {
  background: var(--gg-card);
  border: 1px solid var(--gg-line);
  border-radius: 12px;
  box-shadow: var(--gg-shadow);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.shopping-item:hover {
  border-color: #c9d8ff;
  box-shadow: var(--gg-shadow-lg);
  transform: translateY(-2px);
}

.active-item {
  border-color: var(--gg-brand) !important;
  box-shadow: 0 0 0 3px rgba(0, 82, 217, 0.10) !important;
}

.buy-area {
  border-top: 1px dashed var(--gg-line);
  padding-top: 12px;
  margin-top: 12px;
}

/* ---------- 按钮 ---------- */
.buy-btn,
.car-settle,
.search-btn,
.add-btn,
.batch-btn,
.buy-again-btn {
  border: none !important;
  border-radius: var(--gg-r-sm) !important;
  background: linear-gradient(90deg, #3d7bff, var(--gg-brand)) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 82, 217, 0.22) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.buy-btn:hover,
.car-settle:hover,
.search-btn:hover,
.add-btn:hover,
.batch-btn:hover,
.buy-again-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 82, 217, 0.28) !important;
  opacity: 0.95;
}

.cancel-btn,
.delete-btn,
.delect-btn {
  border-radius: var(--gg-r-sm) !important;
  border: 1px solid var(--gg-line) !important;
  background: #fff !important;
  color: var(--gg-text-2) !important;
}

.cancel-btn:hover,
.delete-btn:hover,
.delect-btn:hover {
  border-color: #f0b4b6 !important;
  color: var(--gg-price) !important;
}

/* ---------- 表格（购物车 / 结算） ---------- */
.goods-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-r);
  overflow: hidden;
}

.goods-table thead th,
.table-name {
  background: #f8fafe !important;
  color: var(--gg-text-2) !important;
  font-weight: 600;
  font-size: 13px;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--gg-line) !important;
}

.goods-table tbody td {
  padding: 14px !important;
  border-bottom: 1px solid var(--gg-line-soft) !important;
  color: var(--gg-text);
  vertical-align: middle;
}

.goods-table tbody tr:last-child td {
  border-bottom: none !important;
}

.goods-table tbody tr:hover td {
  background: #fafcff;
}

.goods-name,
.goodsInfo-name,
.car-name {
  color: var(--gg-text);
  font-weight: 600;
}

.goodsInfo-type,
.car-year,
.qty-tips {
  color: var(--gg-text-3);
}

/* ---------- 金额 ---------- */
.item-price,
.item-total,
.total-price,
.car-money,
.car-price,
.goodsInfo-price,
.price-list {
  color: var(--gg-price);
  font-weight: 700;
}

.original-price {
  color: var(--gg-text-3);
  text-decoration: line-through;
  font-weight: 400;
}

/* ---------- 数量、选择框、输入框 ---------- */
.num-box,
.qty-num {
  border-radius: var(--gg-r-sm);
  border: 1px solid var(--gg-line);
  overflow: hidden;
  background: #fff;
}

.el-input__inner,
.el-textarea__inner {
  border-radius: var(--gg-r-sm) !important;
  border-color: var(--gg-line) !important;
}

.el-input__inner:focus {
  border-color: var(--gg-brand) !important;
}

.search-box .el-select .el-input__inner {
  border-radius: var(--gg-r-sm) !important;
}

/* ---------- 底部结算条 ---------- */
.el-footer,
.car-bottom,
.car-settle {
  backdrop-filter: blur(6px);
}

.el-footer {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid var(--gg-line) !important;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.05);
}

/* ---------- 弹窗 / 气泡 ---------- */
.el-dialog,
.el-popover,
.up-dialog {
  border-radius: 14px !important;
  box-shadow: var(--gg-shadow-lg) !important;
  overflow: hidden;
}

.el-dialog__header {
  border-bottom: 1px solid var(--gg-line);
  padding: 16px 22px !important;
}

/* ---------- 标签页 / 分段 ---------- */
.active-name,
.blue-a-text,
.bule-text {
  color: var(--gg-brand) !important;
}

.suffix-active {
  color: var(--gg-brand) !important;
}

/* ---------- 滚动条 ---------- */
.goods-list-div::-webkit-scrollbar,
.table-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.goods-list-div::-webkit-scrollbar-thumb,
.table-content::-webkit-scrollbar-thumb {
  background: #d5dfef;
  border-radius: 8px;
}

/* ==========================================================================
   v8 · 结算页（请核对商品信息）· 精简排版
   作用域：.gg-settlement（只在 settlement.php 的 main-card 上挂这个类）
   原则：只压缩留白与信息密度，字段、数量、校验、金额计算一律不动
   ========================================================================== */

/* ---------- 卡片化：cart 页的 .main-card 本身没有底纹，这里补齐 ---------- */
.gg-settlement {
  background: #fff;
  border: 1px solid var(--gg-line);
  border-radius: 12px;
  box-shadow: var(--gg-shadow);
  padding: 18px 22px 20px !important;
  margin: 0 0 100px;
}

/* ---------- 标题：与内容之间加一条细线，不再糊在一起 ---------- */
.gg-settlement .main-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -.2px;
  line-height: 1.4;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--gg-line);
}

.gg-settlement .dont-save-password {
  font-size: 12px;
  font-weight: 400;
  color: var(--gg-text-3);
  margin: 6px 0 0;
}

.gg-settlement .goods-box {
  padding-bottom: 0 !important;
}

.gg-settlement .shopping-goods {
  margin-bottom: 0 !important;
}

/* ---------- 商品名条：灰底 → 白底 + 左侧主色竖条 ---------- */
.gg-settlement .table-name {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px !important;
  background: #f7faff !important;
  border: 1px solid var(--gg-line);
  border-bottom: none;
  border-radius: var(--gg-r) var(--gg-r) 0 0;
}

.gg-settlement .table-name::before {
  content: "";
  flex: none;
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--gg-brand);
}

.gg-settlement .goods-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.2px;
}

/* ---------- 表格：与名称条合并成一块，去掉重复的顶边框 ---------- */
.gg-settlement .table-content {
  border-radius: 0 0 var(--gg-r) var(--gg-r);
  clip-path: inset(0 round 0 0 10px 10px);
}

.gg-settlement .goods-table {
  margin-top: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border-top: none;
  border-radius: 0 0 var(--gg-r) var(--gg-r);
  background: #fff;
}

.gg-settlement .goods-table thead {
  line-height: normal !important;
  height: auto !important;
  background: transparent !important;
}

.gg-settlement .goods-table thead th {
  padding: 9px 16px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7b8aa0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--gg-line) !important;
  white-space: nowrap;
}

.gg-settlement .goods-table tbody td {
  padding: 16px !important;
  vertical-align: top;
}

.gg-settlement .goods-table tbody tr:hover td {
  background: transparent !important;
}

/* 列宽：配置详情吃掉剩余空间，三个金额列收紧到刚好 */
.gg-settlement .goods-table thead .description-box { width: auto; }
.gg-settlement .goods-table thead .price-box { width: 130px; }
.gg-settlement .goods-table thead .num-box { width: 74px; }
.gg-settlement .goods-table thead .total-box {
  width: 130px;
  text-align: right;
}

/* 表头列之间不再画竖线，与内容行保持一致 */
.gg-settlement .goods-table thead th + th {
  border-left: none !important;
}

/* ---------- 配置详情：7 行竖排 → 横向标签流 ---------- */
.gg-settlement .info-box {
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: baseline;
  gap: 11px 30px !important;
}

.gg-settlement .info-box > .goods-info {
  flex: 0 1 auto;
  min-width: 158px;
  max-width: 100%;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: baseline;
  justify-content: flex-start !important;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
}

.gg-settlement .goodsInfo-type {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  color: var(--gg-text);
}

.gg-settlement .goodsInfo-name {
  flex: none;
  color: var(--gg-text-3) !important;
  font-weight: 400 !important;
  font-size: 12.5px;
}

.gg-settlement .goodsInfo-name::after {
  content: "：";
}

.gg-settlement .goodsInfo-val {
  color: var(--gg-text);
  font-weight: 500;
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* 加价：只保留非 0 项，做成淡底小标签 */
.gg-settlement .gg-info-price {
  flex: none;
  padding: 0 5px;
  border-radius: 4px;
  background: #f1f5fb;
  color: var(--gg-text-3) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 17px;
}

.gg-settlement .gg-has-price .gg-info-price {
  background: var(--gg-brand-light);
  color: var(--gg-brand) !important;
}

/* ---------- 单价 / 数量 / 小计 ---------- */
.gg-settlement .item-price,
.gg-settlement .item-total {
  white-space: nowrap;
}

.gg-settlement .item-price {
  padding-top: 15px !important;
}

.gg-settlement .gg-money {
  color: var(--gg-price);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.3px;
}

.gg-settlement .gg-cycle {
  margin-left: 1px;
  color: var(--gg-text-3);
  font-size: 12px;
  font-weight: 400;
}

.gg-settlement .gg-qty {
  padding-top: 15px !important;
  color: var(--gg-text-2);
  font-size: 13px;
}

.gg-settlement .item-total {
  text-align: right;
  padding-top: 15px !important;
}

.gg-settlement .gg-total {
  color: var(--gg-price);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.3px;
}

/* ---------- 底部固定结算条：压薄，金额与按钮对齐更稳 ---------- */
.el-footer {
  min-height: .78rem !important;
  padding-top: .1rem;
  padding-bottom: .1rem;
  box-shadow: 0 -1px 0 var(--gg-line), 0 -8px 24px rgba(24, 50, 102, .05) !important;
}

.el-footer .footer-right {
  align-items: center;
}

.el-footer .totalprice-box {
  font-size: 13px;
  color: var(--gg-text-2);
  white-space: nowrap;
  display: flex;
  align-items: baseline;
}

.el-footer .totalprice-box > div {
  white-space: nowrap;
}

.el-footer .total-price {
  margin-left: 2px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.6px;
}

.el-footer .buy-btn {
  width: auto !important;
  min-width: 1.5rem;
  height: .42rem !important;
  padding: 0 .26rem !important;
  font-size: 14px !important;
  border-radius: var(--gg-r-sm) !important;
}

.el-footer .btn-box {
  margin-left: .34rem;
}

.el-footer .check-box {
  margin-top: 7px;
  font-size: 12px;
  color: var(--gg-text-3);
  line-height: 1.5;
}

.el-footer .check-box .bule-text {
  color: var(--gg-brand) !important;
}

/* ==========================================================================
   v10 · 结算页空状态
   场景：结算数据只存在 sessionStorage，刷新/换标签/清缓存后可能丢失，
        原版会渲染成一张“只有标题”的白卡片，容易被误认为页面坏了。
   ========================================================================== */
.gg-settlement .gg-empty {
  padding: 44px 20px 48px;
  text-align: center;
}

.gg-settlement .gg-empty-icon {
  width: 68px;
  height: 60px;
  margin: 0 auto 18px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='60' viewBox='0 0 68 60' fill='none'><g stroke='%23c3d1e8' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'><path d='M7 22 16 8h36l9 14v24a4 4 0 0 1-4 4H11a4 4 0 0 1-4-4z'/><path d='M7 22h15l4 7h16l4-7h15'/><path d='M27 38h14' stroke-dasharray='4 5'/></g></svg>") no-repeat center / contain;
}

.gg-settlement .gg-empty-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gg-text);
  letter-spacing: -.2px;
}

.gg-settlement .gg-empty-desc {
  max-width: 460px;
  margin: 0 auto 22px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--gg-text-3);
}

.gg-settlement .gg-empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.gg-settlement .gg-empty-btn {
  display: inline-block;
  height: 36px;
  line-height: 34px;
  padding: 0 20px;
  font-size: 13px;
  color: var(--gg-text-2);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--gg-line);
  border-radius: 8px;
  transition: border-color .18s, color .18s, background .18s;
}

.gg-settlement .gg-empty-btn:hover {
  color: var(--gg-brand);
  border-color: var(--gg-brand);
}

.gg-settlement .gg-empty-btn--primary {
  color: #fff !important;
  background: var(--gg-brand);
  border-color: var(--gg-brand);
  box-shadow: 0 4px 12px rgba(0, 82, 217, .22);
}

.gg-settlement .gg-empty-btn--primary:hover {
  background: var(--gg-brand-dark);
  border-color: var(--gg-brand-dark);
}

.gg-settlement .gg-empty-code {
  margin: 18px 0 0;
  font-size: 12px;
  color: #c2ccdb;
  letter-spacing: .2px;
}

/* ==========================================================================
   v14 · 订购页（/cart/goodsList）· 左侧分组 + 右侧商品卡网格
   作用域：只在 cart 的商品列表页生效（gougou.css 仅本目录页面加载）
   原则：不改官方 JS 逻辑，仅做视觉与排版；删除本段即回到 v13 外观
   ========================================================================== */

/* ---------- 页面骨架：隐藏官方侧边菜单，改为两栏 ---------- */
.template > .el-container > .el-aside { display: none !important; }

.el-main {
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: #fff;
  border-radius: 0 !important;
}

.gg-cart {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - 60px);
  background: #fff;
}

/* ---------- 左侧：商品分组 ---------- */
.gg-side {
  min-height: calc(100vh - 60px);
  padding: 0 0 30px;
  background: #fff;
  border-right: 1px solid #ebedf0;
}

.gg-side-search {
  position: relative;
  padding: 16px 16px 10px;
}

.gg-side-search input {
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  padding: 0 12px 0 32px;
  border: 0;
  border-radius: 2px;
  background: #f5f6f7;
  color: #1d2129;
  font-size: 12.5px;
  line-height: 34px;
  outline: none;
  transition: background .15s, box-shadow .15s;
}

.gg-side-search input::placeholder { color: #9aa1ab; }

.gg-side-search input:focus {
  background: #fff;
  box-shadow: inset 0 0 0 1px #0052d9;
}

.gg-ico-search {
  position: absolute;
  left: 27px;
  top: 27px;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='6' cy='6' r='4.5' stroke='%239aa1ab' stroke-width='1.4'/%3E%3Cpath d='M9.5 9.5 13 13' stroke='%239aa1ab' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.gg-side-nav { padding: 2px 0 0; }

.gg-side-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 42px;
  padding: 0 16px 0 18px;
  color: #4e5969;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.gg-side-item:hover { background: #f7f9fc; color: #0052d9; }

.gg-side-item.is-active {
  background: #f2f7ff;
  color: #0052d9;
  font-weight: 600;
}

.gg-side-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #0052d9;
}

.gg-side-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gg-side-arrow {
  flex: none;
  width: 6px;
  height: 6px;
  margin-right: 2px;
  border-right: 1.4px solid #b8c0cc;
  border-bottom: 1.4px solid #b8c0cc;
  transform: rotate(-45deg);
  transition: transform .2s, border-color .2s;
}

.gg-side-item.is-active .gg-side-arrow { border-color: #0052d9; }
.gg-side-arrow.is-open { transform: rotate(45deg); }

.gg-side-sub { padding: 2px 0 8px; }

.gg-side-subitem {
  position: relative;
  display: block;
  height: 36px;
  line-height: 36px;
  padding: 0 16px 0 32px;
  color: #4e5969;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s, color .15s;
}

.gg-side-subitem:hover { background: #f7f9fc; color: #0052d9; }
.gg-side-subitem.is-active { background: #f2f7ff; color: #0052d9; font-weight: 600; }

.gg-side-subitem.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #0052d9;
}

/* ---------- 右侧主区 ---------- */
.gg-main {
  min-width: 0;
  padding: 0 0 48px;
  background: #fff;
}

/* 面包屑 */
.gg-crumb {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 24px;
  border-bottom: 1px solid #ebedf0;
  font-size: 13px;
  color: #4e5969;
}

.gg-crumb-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #4e5969;
  text-decoration: none;
}

.gg-crumb-back i {
  width: 6px;
  height: 6px;
  margin: 0 2px 0 3px;
  border-left: 1.4px solid #8a9099;
  border-bottom: 1.4px solid #8a9099;
  transform: rotate(45deg);
}

.gg-crumb-back:hover { color: #0052d9; }
.gg-crumb-back:hover i { border-color: #0052d9; }

.gg-crumb-line {
  width: 1px;
  height: 12px;
  background: #e5e6eb;
}

.gg-crumb-label { color: #1d2129; }

/* 顶部蓝色提示条 */
.gg-cart-tips {
  position: relative;
  display: block;
  min-height: 40px;
  margin: 16px 24px 0;
  padding: 10px 14px 10px 36px;
  border: 0;
  border-radius: 2px;
  background: #eaf3ff;
  color: #0052d9;
  font-size: 12.5px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.gg-cart-tips * {
  color: inherit !important;
  font-size: inherit;
  background: transparent;
}

.gg-cart-tips a { color: #0052d9 !important; text-decoration: underline; }

.gg-ico-info {
  position: absolute;
  left: 14px;
  top: 13px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='7' cy='7' r='6.2' stroke='%230052d9' stroke-width='1.2'/%3E%3Cpath d='M7 6.1v4.1' stroke='%230052d9' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='4.05' r='.85' fill='%230052d9'/%3E%3C/svg%3E") no-repeat center / contain;
}

.gg-tips-link { color: #0052d9; text-decoration: underline; cursor: pointer; }

/* 内容容器：搜索框已移到侧栏，这里清掉旧留白 */
.gg-main .main-content-box {
  width: auto !important;
  margin: 0 24px;
  padding: 16px 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.gg-main .search-box,
.gg-main .main-title { display: none !important; }

.gg-main .second-desc {
  height: auto;
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
  color: #86909c;
  font-size: 12.5px;
}

.gg-main .shopping-box { margin-top: 0; min-height: 220px; }

/* ---------- 商品卡网格 ---------- */
.goods-list-div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.shopping-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid #ebedf0;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.shopping-item:hover {
  border-color: #c9d8ff;
  box-shadow: 0 6px 18px rgba(0, 41, 109, 0.07);
  transform: translateY(-2px);
}

/* 推荐标签（热销）：跟在标题右侧 */
.shopping-item .gg-hot {
  flex: none;
  padding: 0 5px;
  border-radius: 2px;
  background: #fff1f0;
  color: #d54941;
  font-size: 11px;
  font-weight: 400;
  line-height: 17px;
  box-shadow: inset 0 0 0 1px #ffd8d4;
}

/* 兼容旧结构里的角标（如仍存在） */
.shopping-item .client-box {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 0 4px 0 4px;
  background: #fff1f0 !important;
  color: #d54941 !important;
  font-size: 11px;
  line-height: 16px;
  box-shadow: inset 0 0 0 1px #ffd8d4;
}

/* 标题行 */
.shopping-item .goods-content {
  display: block;
  padding: 14px 16px 0;
}

.shopping-item .goods-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 0;
}

/* 售罄商品：标题保持正常色，只把按钮置灰 */
.shopping-item .goods-name.sold-out .goods-name-text { color: #1d2129 !important; }
.shopping-item .goods-name.sold-out .qty-box { width: auto !important; }

.shopping-item .goods-name .goods-name-text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1d2129;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.shopping-item .goods-name .qty-box {
  flex: none;
  position: static;
  font-size: 12px;
  color: #9aa1ab;
}

.shopping-item .goods-name .qty-box img { display: none; }

/* 售罄：用文字标签代替官方图片，避免缩成小圆点 */
.shopping-item .goods-name.sold-out .qty-box {
  padding: 0 6px;
  border-radius: 2px;
  background: #f2f3f5;
  color: #9aa1ab;
  font-size: 11px;
  line-height: 17px;
}

.shopping-item .goods-name.sold-out .qty-box::after { content: "售罄"; }

/* 试用 / 防火墙等小标签 */
.shopping-item .goods-tag {
  height: auto;
  margin-top: 8px;
  padding: 0;
  gap: 6px;
  background: transparent;
}

.shopping-item .goods-tag .tag-item {
  padding: 0 6px;
  border-radius: 2px;
  background: #eef4ff;
  color: #0052d9;
  font-size: 11px;
  line-height: 18px;
}

.shopping-item .goods-tag .tag-item::after { display: none; }

/* 规格描述区 */
.shopping-item .goods-description {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 10px 16px 0 !important;
  overflow: visible;
  background: transparent !important;
  color: #4e5969;
  font-size: 13px;
  line-height: 22px;
  white-space: normal;
}

.shopping-item .goods-description::-webkit-scrollbar { width: 0; height: 0; }

/* 规格列表：去项目符号，键弱化、值加深 */
.goods-description .specs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

.goods-description .specs-list li {
  display: flex;
  align-items: baseline;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 22px;
  color: #1d2129;
  white-space: nowrap;
}

.goods-description .specs-list li::before { content: none; }

.goods-description .spec-label {
  flex: none;
  color: #86909c;
  font-size: 13px;
}

.goods-description .spec-value {
  min-width: 0;
  color: #1d2129;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 描述顶部的卖点徽章 */
.goods-description .badge-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.goods-description .server-badge {
  padding: 0 6px;
  border-radius: 2px;
  font-size: 11px;
  line-height: 18px;
  background: #f2f3f5;
  color: #86909c;
}

.goods-description .server-badge.badge-pink { background: #fff1f0; color: #d54941; }
.goods-description .server-badge.badge-orange { background: #fff7e8; color: #d88600; }
.goods-description .server-badge.badge-blue { background: #eef4ff; color: #0052d9; }
.goods-description .server-badge.badge-green { background: #eafaf1; color: #2ba471; }

/* 活动标签 */
.shopping-item .goods-active {
  margin: 8px 0 0;
  padding: 0;
  gap: 6px;
}

.shopping-item .goods-active .active-name {
  padding: 0 6px;
  border-radius: 2px;
  font-size: 11px;
  line-height: 18px;
  background: #fff1f0;
  color: #d54941;
}

/* 价格行 */
.shopping-item .price-box {
  display: block;
  margin: 0;
  padding: 10px 16px 12px;
}

.shopping-item .price-box .price-box-left {
  display: block;
  text-align: left;
}

.shopping-item .price-box .item-price {
  color: #d54941;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.3px;
}

.shopping-item .price-box .item-price .item-price-prefix {
  margin-right: 1px;
  font-size: 14px;
  font-weight: 700;
}

.shopping-item .price-box .item-price .item-price-cycle {
  margin-left: 2px;
  color: #86909c;
  font-size: 12px;
  font-weight: 400;
}

.shopping-item .price-box .original-price {
  margin-left: 6px;
  color: #b0b6bf;
  font-size: 12px;
}

/* 底部通栏按钮 */
.shopping-item .gg-buy-bar {
  margin-top: auto;
  border-top: 1px solid #f0f1f3;
}

.shopping-item .gg-buy-bar .buy-btn,
.shopping-item .gg-buy-bar .buy-btn.el-button {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0052d9 !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 40px;
  box-shadow: none !important;
}

.shopping-item .gg-buy-bar .buy-btn:hover { background: #1466ed !important; }

.shopping-item .gg-buy-bar .buy-btn.is-disabled,
.shopping-item .gg-buy-bar .buy-btn.is-disabled:hover,
.shopping-item .gg-buy-bar .buy-btn.is-disabled:focus {
  background: #f2f3f5 !important;
  color: #b7bcc4 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* 空状态与加载提示 */
.gg-main .no-goods { padding: 60px 0; }
.gg-main .tips { padding: 18px 0; color: #9aa1ab; font-size: 12.5px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1400px) {
  .goods-list-div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .gg-cart { grid-template-columns: 200px minmax(0, 1fr); }
  .goods-list-div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 750px) {
  .gg-cart { grid-template-columns: minmax(0, 1fr); }
  .gg-side {
    min-height: 0;
    padding-bottom: 12px;
    border-right: 0;
    border-bottom: 1px solid #ebedf0;
  }
  .gg-main { padding-bottom: 24px; }
  .gg-crumb { padding: 0 16px; }
  .gg-cart-tips { margin: 12px 16px 0; }
  .gg-main .main-content-box { margin: 0 16px; }
  .goods-list-div { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .goods-description .specs-list li { white-space: normal; }
  .shopping-item .goods-description { padding: 10px 14px 0 !important; }
  .shopping-item .goods-content { padding: 14px 14px 0; }
  .shopping-item .price-box { padding: 10px 14px 12px; }
}

/* ==========================================================================
   v16 · 对齐参照站 yeziidc.com/cart 的版式与尺寸
   数据来源：CDP 实测 1440 视口（内容宽 1422）
     侧栏 250 / 间距 12 / 主区 padding 20px 60px 0 0
     网格 minmax(260px,1fr) gap 16 / 卡片 border 1px #d4d6d9 圆角 0
     卡头 #f7f7f9 padding 14 16 / 描述 10 20 0 字号 13 行高 26
     价格 ¥14 + 金额24 + 周期14 #777 色 #ff0000 / 按钮 42 高 #0056FF
   作用域：全部限定在 .gg-cart 内，不影响结算页与购物车页
   ========================================================================== */

/* ---------- 骨架 ---------- */
.gg-cart {
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 12px;
  background: #f7f7f9;
}

.gg-main {
  min-width: 0;
  padding: 0 60px 20px 0;
  background: #f7f7f9;
}

/* ---------- 左侧栏 ---------- */
.gg-cart .gg-side {
  width: auto;
  min-height: calc(100vh - 60px);
  padding: 20px 10px;
  background: #fff;
  border-right: 0;
}

.gg-cart .gg-side-search { padding: 0 0 10px; }

.gg-cart .gg-side-search input {
  height: 34px;
  padding: 0 10px 0 30px;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  background: #fff;
  color: #000;
  font-size: 13px;
  line-height: 32px;
}

.gg-cart .gg-side-search input::placeholder { color: #999; }

.gg-cart .gg-side-search input:focus {
  border-color: #0052d9;
  background: #fff;
  box-shadow: none;
}

.gg-cart .gg-ico-search { left: 16px; top: 10px; }

.gg-cart .gg-side-nav {
  margin: 10px 0 0;
  padding: 0 0 40px;
  background: #f9fafc;
}

.gg-cart .gg-side-item {
  height: 39px;
  padding: 0 20px;
  color: #181818;
  font-size: 14px;
  font-weight: 400;
}

.gg-cart .gg-side-item.is-active {
  background: transparent;
  color: #0052d9;
  font-weight: 500;
}

.gg-cart .gg-side-item.is-active::before { display: none; }

.gg-cart .gg-side-sub { padding: 0; }

.gg-cart .gg-side-subitem {
  height: 40px;
  line-height: 40px;
  padding: 0 20px 0 26px;
  color: #4e5969;
  font-size: 14px;
}

.gg-cart .gg-side-subitem.is-active {
  background: #e0eeff;
  color: #0052d9;
  font-weight: 500;
}

/* ---------- 面包屑 ---------- */
.gg-cart .gg-crumb {
  height: 50px;
  padding: 0;
  border-bottom: 0;
  background: transparent;
  color: #495057;
  font-size: 14px;
  gap: 20px;
}

.gg-cart .gg-crumb-label { color: #495057; }

/* ---------- 提示条 ---------- */
.gg-cart .gg-cart-tips {
  display: block;
  min-height: 43px;
  margin: 0 0 12px;
  padding: 10px 20px 12px 52px;
  border: 0;
  border-radius: 0;
  background: #d5e7ff;
  color: #002da0;
  font-size: 14px;
  line-height: 21px;
}

.gg-cart .gg-cart-tips a { color: #002da0 !important; text-decoration: underline; }
.gg-cart .gg-cart-tips .gg-ico-info { left: 20px; top: 13px; }

/* ---------- 内容容器 ---------- */
.gg-cart .gg-main .main-content-box {
  width: auto !important;
  margin: 0;
  padding: 0;
  background: transparent;
}

.gg-cart .gg-main .second-desc { margin: 0 0 12px; }

/* ---------- 卡片网格：等宽铺满 ---------- */
.gg-cart .goods-list-div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  width: 100%;
  margin-bottom: 40px;
}

/* ---------- 卡片本体 ---------- */
.gg-cart .shopping-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid #d4d6d9;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 5px 20px 3px rgba(230, 233, 249, .3);
  transition: border-color .3s, box-shadow .3s;
}

.gg-cart .shopping-item:hover {
  border-color: #0052d9;
  box-shadow: -2px -2px 20px rgba(55, 99, 170, .1), 8px 8px 20px rgba(55, 99, 170, .1);
  transform: none;
}

/* 卡片头：灰底标题条 */
.gg-cart .shopping-item .goods-content { padding: 0 !important; }

.gg-cart .shopping-item .goods-name {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  margin: 0;
  padding: 14px 16px;
  background: #f7f7f9;
}

.gg-cart .shopping-item .goods-name .goods-name-text {
  flex: 1;
  min-width: 0;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 库存：右侧灰字 + 左侧竖线 */
.gg-cart .shopping-item .goods-name .qty-box {
  position: relative;
  flex: none;
  padding-left: 10px;
  color: #a9a9a9;
  font-size: 12px;
  line-height: 19px;
  white-space: nowrap;
}

.gg-cart .shopping-item .goods-name .qty-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 1px;
  height: 12px;
  background: #d4d6d9;
}

.gg-cart .shopping-item .goods-name.sold-out .qty-box {
  width: auto !important;
  padding: 0 0 0 10px;
  background: transparent;
  color: #a9a9a9;
  font-size: 12px;
}

.gg-cart .shopping-item .goods-name.sold-out .qty-box::after { content: none; }
.gg-cart .shopping-item .goods-name .qty-box img { display: none; }
.gg-cart .shopping-item .goods-name.sold-out .qty-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 1px;
  height: 12px;
  background: #d4d6d9;
}

/* 热销 / 试用等标签：贴标题下、白底区域内 */
.gg-cart .shopping-item .gg-hot {
  flex: none;
  margin-left: 6px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  line-height: 19px;
}

.gg-cart .shopping-item .goods-tag {
  margin: 0;
  padding: 8px 20px 0;
  gap: 6px;
}

.gg-cart .shopping-item .goods-tag .tag-item {
  padding: 0 6px;
  border-radius: 2px;
  background: #eef4ff;
  color: #0052d9;
  font-size: 12px;
  line-height: 20px;
}

/* 规格描述 */
.gg-cart .shopping-item .goods-description {
  flex: 1 1 auto;
  padding: 10px 20px 0 !important;
  color: #83838e;
  font-size: 13px;
  line-height: 26px;
}

.gg-cart .shopping-item .goods-description * {
  color: #83838e;
  font-size: 13px;
  line-height: 26px;
}

.gg-cart .shopping-item .goods-description .spec-label { color: #212529; }
.gg-cart .shopping-item .goods-description .spec-value { color: #83838e; }

.gg-cart .shopping-item .goods-description .specs-list li {
  font-size: 13px;
  line-height: 26px;
}

.gg-cart .shopping-item .goods-active { margin: 4px 0 0; padding: 0 20px; }

/* 价格 */
.gg-cart .shopping-item .price-box {
  margin-top: auto;
  padding: 2px 20px 8px;
}

.gg-cart .shopping-item .price-box .item-price {
  color: #ff0000;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 31px;
}

.gg-cart .shopping-item .price-box .item-price .item-price-prefix {
  margin-right: 0;
  color: #ff0000;
  font-size: 14px;
  font-weight: 400;
  vertical-align: super;
}

.gg-cart .shopping-item .price-box .item-price .item-price-cycle {
  margin-left: 4px;
  color: #777;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
}

.gg-cart .shopping-item .price-box .original-price {
  margin-left: 6px;
  color: #777;
  font-size: 12px;
}

/* 通栏按钮 */
.gg-cart .shopping-item .gg-buy-bar {
  margin-top: 0;
  border-top: 0;
}

.gg-cart .shopping-item .gg-buy-bar .buy-btn,
.gg-cart .shopping-item .gg-buy-bar .buy-btn.el-button {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0056ff !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 42px;
  text-align: center;
  box-shadow: none !important;
  transition: all .2s cubic-bezier(.22, .61, .36, 1);
}

.gg-cart .shopping-item .gg-buy-bar .buy-btn:hover {
  background: #2b73ff !important;
  transform: translateY(-1px);
}

.gg-cart .shopping-item .gg-buy-bar .buy-btn.is-disabled,
.gg-cart .shopping-item .gg-buy-bar .buy-btn.is-disabled:hover,
.gg-cart .shopping-item .gg-buy-bar .buy-btn.is-disabled:focus {
  background: linear-gradient(45deg, #d8d8d8 0%, #d8d8d8 100%) !important;
  color: #5a5a5a !important;
  text-shadow: 0 0.1em 0 #f0f0f0;
  transform: none;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1400px) {
  .gg-main { padding-right: 30px; }
}

@media (max-width: 1100px) {
  .gg-cart { grid-template-columns: 200px minmax(0, 1fr); }
  .gg-main { padding-right: 20px; }
  .gg-cart .goods-list-div { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (max-width: 750px) {
  .gg-cart { grid-template-columns: minmax(0, 1fr); }
  .gg-main { padding: 0 12px 20px; }
  .gg-cart .gg-side {
    min-height: 0;
    padding: 12px;
    border-bottom: 1px solid #ebedf0;
  }
  .gg-cart .gg-crumb { height: 44px; }
  .gg-cart .gg-cart-tips { padding: 10px 14px 10px 40px; font-size: 13px; }
  .gg-cart .gg-cart-tips .gg-ico-info { left: 14px; }
  .gg-cart .goods-list-div { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .gg-cart .shopping-item .goods-name { padding: 12px 14px; }
  .gg-cart .shopping-item .goods-description { padding: 8px 14px 0 !important; }
  .gg-cart .shopping-item .price-box { padding: 2px 14px 8px; }
  .gg-cart .shopping-item .goods-description .specs-list li { white-space: normal; }
}

/* ==========================================================================
   v17 · 官网顶部导航（替换购物车简洁头）
   对应 /web/gougou/public/header.html 的结构与 /web/gougou/assets/css/style.css
   的 .site-header / .nav / .header-actions 视觉；独立命名空间 .ggnav-*，
   不改动 element 与 member 主题的全局样式，也不影响结算页（settlement.php）。
   ========================================================================== */

/* 隐藏原购物车简洁头（仅本页，top-menu 组件本身未改动） */
.gg-legacy-top { display: none !important; }

/* ---------- 外壳 ---------- */
.ggnav {
  position: sticky;
  top: 0;
  z-index: 900;
  width: 100%;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid #f0f1f3;
  transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1);
  flex: none;
}

.ggnav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 58px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

/* ---------- LOGO ---------- */
.ggnav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #181818;
  text-decoration: none;
}

.ggnav-logo:hover { color: #181818; }

.ggnav-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(180deg, #0052d9 0%, #1466ed 100%);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(0, 82, 217, .20);
}

.ggnav-text { line-height: 1.15; }
.ggnav-text small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #8a9099;
  letter-spacing: 1px;
  margin-top: -4px;
}

/* ---------- 一级菜单 ---------- */
.ggnav ul.ggnav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ggnav-menu > li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ggnav-menu > li > a {
  display: block;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  color: #5e646e;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s, background .2s;
}

.ggnav-menu > li > a:hover,
.ggnav-menu > li.is-active > a {
  color: #0052d9;
  background: #ecf2fe;
}

.ggnav-menu .has-sub > a::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .6;
}

/* ---------- 二级下拉 ---------- */
.ggnav ul.ggnav-sub {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  min-width: 190px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid #e7e8ea;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
}

.ggnav-sub li { margin: 0; padding: 0; list-style: none; }

.ggnav-menu li:hover > .ggnav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ggnav-sub a {
  display: block;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 14px;
  color: #5e646e;
  text-decoration: none;
  transition: color .2s, background .2s;
}

.ggnav-sub a:hover { background: #f7f9fd; color: #0052d9; }

/* ---------- 右侧操作区 ---------- */
.ggnav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ggnav-doc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #8a9099;
  text-decoration: none;
  white-space: nowrap;
}

.ggnav-doc:hover { color: #0052d9; }

.ggnav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
}

.ggnav-btn.is-ghost { background: transparent; color: #5e646e; }
.ggnav-btn.is-ghost:hover { background: #f7f9fd; color: #181818; }

.ggnav-btn.is-outline { background: #fff; border-color: #e7e8ea; color: #181818; }
.ggnav-btn.is-outline:hover { border-color: #0052d9; color: #0052d9; }

.ggnav-btn.is-primary {
  background: #0052d9;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 82, 217, .20);
}

.ggnav-btn.is-primary:hover {
  background: #002ab1;
  color: #fff;
  transform: translateY(-1px);
}

/* ---------- 移动端汉堡 ---------- */
.ggnav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #e7e8ea;
  border-radius: 4px;
  background: #fff;
  position: relative;
  cursor: pointer;
}

.ggnav-toggle span,
.ggnav-toggle span::before,
.ggnav-toggle span::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  margin-left: -9px;
  margin-top: -1px;
  background: #181818;
  border-radius: 2px;
  content: "";
  transition: transform .2s, opacity .2s;
}

.ggnav-toggle span::before { top: -6px; left: 0; margin: 0; }
.ggnav-toggle span::after { top: 6px; left: 0; margin: 0; }
.ggnav-toggle.is-open span { background: transparent; }
.ggnav-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
.ggnav-toggle.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) {
  .ggnav-inner { gap: 20px; padding: 0 24px; }
  .ggnav-menu > li > a { padding: 8px 10px; font-size: 15px; }
  .ggnav-doc { display: none; }
}

@media (max-width: 1024px) {
  .ggnav-inner { height: 54px; }
  .ggnav-toggle { display: block; }

  .ggnav ul.ggnav-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - 54px);
    overflow-y: auto;
    padding: 8px 20px 24px;
    background: #fff;
    border-bottom: 1px solid #e7e8ea;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .09);
  }

  .ggnav ul.ggnav-menu.is-open { display: flex; }

  .ggnav-menu > li { width: 100%; }

  .ggnav-menu > li > a {
    padding: 13px 8px;
    font-size: 16px;
    border-radius: 4px;
  }

  .ggnav ul.ggnav-sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 8px 14px;
    min-width: 0;
    background: transparent;
  }

  .ggnav-sub a { padding: 9px 8px; }
  .ggnav-actions > .ggnav-btn.is-ghost { display: none; }
}

@media (max-width: 720px) {
  .ggnav-inner { gap: 12px; padding: 0 16px; }
  .ggnav-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }
  .ggnav-logo { font-size: 17px; }
  .ggnav-text small { display: none; }
  .ggnav-actions { gap: 8px; }
  .ggnav-actions > .ggnav-btn.is-outline { display: none; }
  .ggnav-btn { height: 32px; padding: 0 12px; font-size: 12.5px; }
}

/* v17 · 原 el-main 的 margin-top:58px 是给旧的固定定位简洁头让位的，
   新导航本身在文档流内（sticky），需清掉，否则顶部多出 58px 空白 */
.ggnav + .el-main { margin-top: 0 !important; }

/* v17 · 小屏展开时菜单高度按视口计算，需把 padding 计入，避免超出屏幕 */
.ggnav ul.ggnav-menu { box-sizing: border-box; }

/* v17 · 1024 以下菜单收起后，右侧操作区需要靠右（否则贴着 logo 留下大片空白） */
@media (max-width: 1024px) {
  .ggnav-actions { margin-left: auto; }
}

/* v17 · LOGO 用后台配置的官网图（142×31 → 高 36 显示，与官网 .logo-img 一致） */
.ggnav-logo-img {
  height: 36px;
  width: auto;
  display: block;
}

/* v17 · 尺寸校准：按钮与官网同为 34px 高（border 需计入），文档中心图标行高对齐 */
.ggnav-btn { box-sizing: border-box; }
.ggnav-doc { line-height: 22px; }

@media (max-width: 720px) {
  .ggnav-logo-img { height: 30px; }
}

/* v17 · 与官网完全对齐：头部底色 86% 白，滚动后出现浅阴影 */
.ggnav { background: rgba(255, 255, 255, .86); }
.ggnav.is-stuck { box-shadow: 0 2px 8px rgba(0, 0, 0, .05); }