/* ==========================================================================
   WB 会员中心购物车主题 · 同步官网 wb 设计系统（public/web/wb）
   品牌绿 #00C29A / 文字墨 #0E7C63（WCAG 5.15:1）/ 浅绿面板 #F3F9F6
   价格纪律：官网 wb 用墨色 --wb-ink + tabular-nums（非红非绿），小计/总价同律
   紧凑间距：卡片内距 20-24px，商品块间距 14px，正文 13px（应用型密度）
   单位纪律：控件/卡片全 px；与壳 rem 流对齐的几何（el-main 让位、底栏内距）
   必须用 rem——壳 .el-header 是 position:fixed（高 40px），.el-main 原生
   padding-top 0.83rem 即页头 clearance；固定底栏高 64px，el-main 需
   padding-bottom 让位。px 覆盖 clearance 会让内容钻进固定页头/底栏底下。
   覆盖纪律：壳主题注入的 gm-theme.css 有 122 条 !important 规则且本文
   最后加载，冲突处一律镜像其选择器 + !important + 同/更高特异性。
   ========================================================================== */

:root {
  --wb-brand:      #00C29A;
  --wb-brand-deep: #00A886;
  --wb-brand-ink:  #0E7C63;   /* 白底文字版品牌绿，5.15:1 */
  --color-primary: #00C29A;   /* Element UI 主题变量，压过 gm-theme 的 #149CF4 */
  --wb-brand-50:   #F2FCFA;
  --wb-brand-100:  #DDF0EC;
  --wb-band:       #F3F9F6;
  --wb-ink:        #1A1A1A;
  --wb-ink-2:      #3D3D3D;
  --wb-ink-4:      #646464;
  --wb-ink-5:      #A1A1A1;
  --wb-line:       #ECECEC;
  --wb-line-soft:  #F2F2F2;
  --wb-bg:         #FFFFFF;
  --wb-bg-body:    #F7F8F9;
  --wb-down:       #E03B30;
  --wb-r-sm: 6px;
  --wb-r-md: 10px;
  --wb-r-lg: 12px;
  --wb-r-xl: 16px;
  --wb-sh-1: 0 1px 2px rgba(26, 26, 26, .04);
  --wb-sh-2: 0 4px 16px rgba(26, 26, 26, .06);
  --wb-dur: .2s;
  --wb-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   1. 壳品牌覆盖（侧栏 / 顶栏 / 主区）
   ========================================================================== */

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', sans-serif !important;
  background: var(--wb-bg-body);
  color: var(--wb-ink-2);
  font-size: 13px;
}

/* ---- 侧栏：浅色化（白底 + 细线） ---- */
.el-aside,
#app .el-aside,
aside.el-aside {
  background: #FFFFFF !important;
  border-right: 1px solid var(--wb-line) !important;
  overflow: hidden;
}
.el-aside .menu-alink,
#app .el-aside .menu-alink {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px 12px !important;
}
.el-aside .ali-logo,
.el-aside img.ali-logo {
  height: 32px !important;
  max-width: 150px !important;
  width: auto !important;
  background: var(--wb-band) !important;
  border: 1px solid var(--wb-brand-100) !important;
  border-radius: var(--wb-r-md) !important;
  padding: 5px 10px !important;
  margin: 0 !important;
  object-fit: contain;
  cursor: pointer;
  transition: transform var(--wb-dur) var(--wb-ease), box-shadow var(--wb-dur) var(--wb-ease);
}
.el-aside .ali-logo:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 194, 154, .18) !important;
}
.el-aside .menu-top,
.el-aside ul.menu-top {
  padding: 8px 6px 16px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  background: transparent !important;
  border-right: 0 !important;
}
.el-aside .el-menu-item,
.el-aside .el-submenu__title {
  height: 42px !important;
  line-height: 42px !important;
  margin: 3px 8px !important;
  border-radius: var(--wb-r-md) !important;
  color: var(--wb-ink-4) !important;
  transition: background var(--wb-dur) var(--wb-ease), color var(--wb-dur) var(--wb-ease) !important;
}
.el-aside .el-menu-item i,
.el-aside .el-submenu__title i,
.el-aside .el-submenu__icon-arrow {
  color: var(--wb-ink-5) !important;
}
.el-aside .el-menu-item:hover,
.el-aside .el-submenu__title:hover {
  background: var(--wb-band) !important;
  color: var(--wb-brand-ink) !important;
}
.el-aside .el-menu-item:hover i,
.el-aside .el-submenu__title:hover i {
  color: var(--wb-brand-ink) !important;
}
/* 激活态：浅绿底 + 品牌墨字 + 左侧品牌条（镜像 gm (0,2,0) 规则） */
.el-aside .el-menu-item.is-active {
  background: var(--wb-brand-50) !important;
  color: var(--wb-brand-ink) !important;
  border-right: 0 !important;
  box-shadow: inset 3px 0 0 var(--wb-brand) !important;
}
.el-aside .el-menu-item.is-active i {
  color: var(--wb-brand-ink) !important;
}
/* gm 的 (0,4,0) 白字规则必须同特异性回击，否则激活项文字不可见 */
.el-aside .el-menu-item.is-active .aside-menu-text {
  color: var(--wb-brand-ink) !important;
}
.el-aside .line,
.el-aside hr:not(.el-divider--horizontal) {
  background: var(--wb-line) !important;
  border: 0;
  height: 1px;
  width: 82% !important;
  margin: 8px auto !important;
}
/* 弹出子菜单（壳为深色系，这里同步浅色化） */
.el-menu--popup .el-menu-item {
  color: var(--wb-ink-2) !important;
}
.el-menu--popup .el-menu-item:hover {
  color: var(--wb-brand-ink) !important;
  background: var(--wb-band) !important;
}
.el-menu--popup .el-menu-item.is-active {
  color: var(--wb-brand-ink) !important;
}

/* ---- 顶栏：白底 + wb 细线（gm 已是白底，仅换边线与阴影） ---- */
.top-menu,
.el-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--wb-line) !important;
  box-shadow: none !important;
  height: 40px !important;
}

/* ---- 主区：接管 gm-theme 的 .el-main{padding:18px 22px!important} ----
   桌面：保留壳原生 clearance（顶 0.83rem 让 fixed 页头，左右 1.02rem 对齐侧栏）
   + 底 1.25rem 让固定结算栏（64px 栏 + 间隙）；
   移动：壳 ≤750px 断点自带 1.66rem 顶 / 0.3rem 左右，本文只加底部让位。 */
.el-main {
  background: var(--wb-bg-body) !important;
  padding: 0.83rem 1.02rem !important;
  padding-bottom: 1.25rem !important;
}

/* ---- Loading 动画条：gm 的 #mainLoading .ddr{background:var(--gm-blue)!important}
   直击根级变量不可靠（gm 用具体值 important），必须镜像 ---- */
#mainLoading .ddr { background: var(--wb-brand) !important; }

/* ==========================================================================
   2. Element 组件品牌化（镜像 gm-theme.css 同项 !important 规则）
   ========================================================================== */

.el-button--primary {
  background-color: var(--wb-brand) !important;
  border-color: var(--wb-brand) !important;
}
.el-button--primary:hover,
.el-button--primary:focus {
  background-color: var(--wb-brand-deep) !important;
  border-color: var(--wb-brand-deep) !important;
}
.el-button--primary.is-plain {
  color: var(--wb-brand-ink) !important;
  background: var(--wb-brand-50) !important;
  border-color: var(--wb-brand-100) !important;
}
.el-button--text { color: var(--wb-brand-ink) !important; }
/* gm-theme 199 行：.el-input__inner{border-radius:8px!important} —— 必须镜像 !important */
.el-input__inner { border-radius: var(--wb-r-md) !important; }
.el-input__inner:focus,
.el-input.is-active .el-input__inner {
  border-color: var(--wb-brand) !important;
  box-shadow: 0 0 0 3px rgba(0, 194, 154, .12) !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: var(--wb-brand) !important;
  border-color: var(--wb-brand) !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label { color: var(--wb-brand-ink) !important; }
.el-radio__input.is-checked .el-radio__inner {
  border-color: var(--wb-brand) !important;
  background: var(--wb-brand) !important;
}
.el-loading-spinner .path { stroke: var(--wb-brand) !important; }
.el-loading-spinner .el-loading-text { color: var(--wb-brand-ink) !important; }
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: var(--wb-brand) !important;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover { color: var(--wb-brand-ink) !important; }
.el-tag--primary {
  background: var(--wb-brand-50) !important;
  color: var(--wb-brand-ink) !important;
  border-color: var(--wb-brand-100) !important;
}
.el-dialog { border-radius: var(--wb-r-xl) !important; }
.el-dialog__header { background: #FAFBFB !important; border-bottom: 1px solid var(--wb-line) !important; }
.el-dialog__body { padding: 20px !important; }
.el-link.el-link--primary { color: var(--wb-brand-ink) !important; }
.el-link.el-link--primary:hover { color: var(--wb-brand-deep) !important; }
.el-link--danger, .el-link.el-link--danger { color: var(--wb-down) !important; }

/* ==========================================================================
   3. 页面卡片与标题行
   ========================================================================== */

.main-card {
  background: #FFFFFF;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-lg);
  padding: 20px 24px;
  box-shadow: var(--wb-sh-1);
}
.main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.main-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--wb-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.main-title::before {
  content: '';
  width: 3px;
  height: 14px;
  background: var(--wb-brand);
  border-radius: 2px;
  flex: 0 0 auto;
}

/* ---- 搜索框（页面右上） ---- */
.search-box { flex: 0 0 auto; }
.search-box .el-input { width: 220px; }
.search-box .el-input .el-input__inner {
  height: 36px;
  line-height: 36px;
  border-radius: var(--wb-r-md) !important;
  border-color: var(--wb-line);
  font-size: 13px;
  transition: border-color var(--wb-dur) var(--wb-ease), box-shadow var(--wb-dur) var(--wb-ease);
}
.search-box .el-input .el-input__inner:hover { border-color: var(--wb-brand-100); }
.search-box .el-input .el-input__inner:focus {
  border-color: var(--wb-brand) !important;
  box-shadow: 0 0 0 3px rgba(0, 194, 154, .12);
}
.search-box .el-input__suffix { color: var(--wb-ink-5); }

/* ==========================================================================
   4. 商品列表
   ========================================================================== */

.goods-box { min-height: 120px; }

/* ---- 商品块：白卡 + 品牌描边 hover ---- */
.shopping-goods {
  background: #FFFFFF;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-lg);
  padding: 16px 20px;
  margin-bottom: 14px;
  transition: border-color var(--wb-dur) var(--wb-ease), box-shadow var(--wb-dur) var(--wb-ease);
}
.shopping-goods:hover {
  border-color: var(--wb-brand-100);
  box-shadow: var(--wb-sh-2);
}
.shopping-goods.is-checked { border-color: var(--wb-brand-100); }

/* ---- 块头：勾选 + 商品名 + 编辑链接 ---- */
.table-name {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--wb-line-soft);
}
.goods-name {
  color: var(--wb-ink);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
}
.edit-goods { margin-left: auto; font-size: 13px; flex-shrink: 0; white-space: nowrap; }
.mar-left-24 { margin-left: 24px; }

/* ---- 商品明细表 ---- */
.table-content { font-size: 13px; }
.goods-table {
  margin-top: 12px;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  table-layout: auto;
}
.goods-table thead th {
  background: var(--wb-brand-50);
  color: var(--wb-brand-ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 10px 14px;
  border-bottom: 1px solid var(--wb-brand-100);
  white-space: nowrap;
}
.goods-table thead th:first-child { padding-left: 0; }
.goods-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--wb-line-soft);
  color: var(--wb-ink-2);
  font-size: 13px;
  vertical-align: top;
}
.goods-table tbody td:first-child { padding-left: 0; }
.goods-table tbody tr:last-child td { border-bottom: 0; }
.description-box { width: 36%; }
.price-box { width: 15%; }
.num-box { width: 16%; }
.total-box { width: 18%; }
.action-box { width: 7%; text-align: center; }

/* 配置明细行：名称（左，省略）+ 价格（右，对齐） */
.info-box { width: 92%; }
.goods-info {
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
}
.goods-info:last-child { margin-bottom: 0; }
.goodsInfo-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  color: var(--wb-ink-4);
}
.goodsInfo-name { color: var(--wb-ink-5); }
.goodsInfo-val { color: var(--wb-ink-2); }
.goodsInfo-price {
  color: var(--wb-ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* 单价列 */
.item-price { color: var(--wb-ink); line-height: 1.7; }
.item-price .price { font-weight: 600; font-variant-numeric: tabular-nums; }
.default-color { color: var(--wb-ink-5); }

/* 数量列 */
.el-input-number { line-height: 1; }
.el-input-number .el-input__inner {
  border-radius: var(--wb-r-md) !important;
  border-color: var(--wb-line);
  padding: 0 30px;
}
.el-input-number .el-input-number__increase,
.el-input-number .el-input-number__decrease {
  border-color: var(--wb-line);
  color: var(--wb-ink-4);
  transition: color var(--wb-dur) var(--wb-ease);
}
.el-input-number .el-input-number__increase:hover,
.el-input-number .el-input-number__decrease:hover {
  color: var(--wb-brand-ink);
  border-color: var(--wb-brand-100);
}
.qty-num {
  color: var(--wb-ink-4);
  font-size: 12px;
  margin-top: 6px;
}
.qty-tips {
  margin-top: 6px;
  font-size: 12px;
  color: var(--wb-brand-ink);
}
.red-text { color: var(--wb-down) !important; }

/* 小计列 */
.item-total {
  font-size: 15px;
  font-weight: 600;
  color: var(--wb-ink);
  font-variant-numeric: tabular-nums;
}
.total-icon {
  color: var(--wb-brand-ink);
  margin-left: 4px;
  cursor: help;
  font-size: 14px;
}
.original-price {
  text-decoration: line-through;
  color: var(--wb-ink-5);
  font-size: 12px;
  font-weight: 400;
  margin-top: 2px;
}
.discount-box {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 400;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
}

/* 删除列（特异性须高于 .goods-table tbody td 的 (0,1,1)） */
.goods-table .delete-btn {
  cursor: pointer;
  font-size: 16px;
  color: var(--wb-ink-5);
  text-align: center;
  transition: color var(--wb-dur) var(--wb-ease);
}
.goods-table .delete-btn:hover { color: var(--wb-down); }

/* ---- 商品失效行 ---- */
.no-goods-td {
  display: flex;
  align-items: center;
  gap: 12px;
}
.no-goods-tips {
  color: var(--wb-ink-4);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}
.buy-again-btn {
  background: var(--wb-brand-50) !important;
  border: 1px solid var(--wb-brand-100) !important;
  color: var(--wb-brand-ink) !important;
  border-radius: var(--wb-r-md) !important;
  height: 32px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  transition: background var(--wb-dur) var(--wb-ease);
}
.buy-again-btn:hover {
  background: var(--wb-brand-100) !important;
  border-color: var(--wb-brand-100) !important;
  color: var(--wb-brand-ink) !important;
}

/* ---- 空车状态 ---- */
.el-empty { padding: 48px 0; }
.el-empty__description { color: var(--wb-ink-4); font-size: 13px; }
/* gm 的 .el-empty__description p{color:#9B99AC!important} 直击文字节点，必须镜像 */
.el-empty__description p { color: var(--wb-ink-4) !important; }
.el-empty__image img { width: 90px; }

/* ==========================================================================
   5. 固定结算栏（el-footer）
   几何：fixed 底栏，左缘避开 190px 侧栏，内距 1.02rem 与 el-main 内容对齐；
   el-main 已留 1.25rem 底部让位。移动端侧栏隐藏，底栏通栏 + 内容纵堆。
   ========================================================================== */

.el-footer {
  width: calc(100vw - 190px);
  padding: 0 1.02rem !important;
  box-sizing: border-box;
  font-size: 13px;
  height: 64px !important;
  position: fixed;
  bottom: 0;
  left: 190px;
  background-color: #fff;
  border-top: 1px solid var(--wb-line);
  box-shadow: 0 -4px 16px rgba(26, 26, 26, .05);
  z-index: 9;
}
.footer-box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-left {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--wb-ink-2);
  font-size: 13px;
}
.footer-left .all-check .el-checkbox__label { color: var(--wb-ink-2); font-size: 13px; }
.footer-left .delect-btn { margin: 0; }
.footer-left .delect-goods { font-size: 13px; }
.footer-left .text-red {
  color: var(--wb-brand-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: 0 2px;
}
.footer-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-right p {
  font-size: 13px;
  color: var(--wb-ink-4);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.total-price {
  font-weight: 600;
  font-size: 24px;
  color: var(--wb-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.buy-btn {
  margin-left: 0;
  min-width: 132px;
  height: 40px;
  background: var(--wb-brand) !important;
  border-color: var(--wb-brand) !important;
  border-radius: var(--wb-r-md) !important;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff !important;
  transition: background var(--wb-dur) var(--wb-ease), transform var(--wb-dur) var(--wb-ease);
}
.buy-btn:hover {
  background: var(--wb-brand-deep) !important;
  border-color: var(--wb-brand-deep) !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   6. 壳组件品牌化（discount-code / event-code，源码只读，从本文覆盖）
   ========================================================================== */

.discount-text {
  color: var(--wb-brand-ink);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--wb-dur) var(--wb-ease);
}
.discount-text:hover { color: var(--wb-brand-deep); }
.discount-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.discount-content .discount-input { width: 180px; }
.discount-content .discount-input .el-input__inner {
  height: 36px;
  line-height: 36px;
  border-radius: var(--wb-r-md) !important;
  border-color: var(--wb-line);
  font-size: 13px;
}
.discount-content .discount-btn {
  background: var(--wb-brand) !important;
  border-color: var(--wb-brand) !important;
  color: #ffffff !important;
  border-radius: var(--wb-r-md) !important;
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
}
.discount-content .discount-btn:hover {
  background: var(--wb-brand-deep) !important;
  border-color: var(--wb-brand-deep) !important;
}
.discount-code-number {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wb-brand-ink);
  background: var(--wb-brand-50);
  border: 1px solid var(--wb-brand-100);
  border-radius: var(--wb-r-sm);
  padding: 3px 10px;
}
.discount-code-number .remove-discountCode {
  cursor: pointer;
  margin-left: 2px;
  color: var(--wb-ink-5);
  font-size: 13px;
  transition: color var(--wb-dur) var(--wb-ease);
}
.discount-code-number .remove-discountCode:hover { color: var(--wb-down); }

.event-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--wb-brand-ink);
  background: var(--wb-brand-50);
  border: 1px solid var(--wb-brand-100);
  border-radius: var(--wb-r-md);
  padding: 6px 12px;
  cursor: pointer;
  transition: background var(--wb-dur) var(--wb-ease);
}
.event-text:hover { background: var(--wb-brand-100); }
.event-text i { font-size: 12px; }
.event-content .event-select { width: 200px; }
.event-content .el-select .el-input__inner {
  height: 36px;
  line-height: 36px;
  border-radius: var(--wb-r-md) !important;
  border-color: var(--wb-line);
  font-size: 13px;
}
/* event-select 下拉浮层（壳为 10px 圆角 + 深阴影） */
.el-select-dropdown {
  border-radius: var(--wb-r-lg) !important;
  border-color: var(--wb-line) !important;
}
.el-select-dropdown__item.selected { color: var(--wb-brand-ink) !important; }

/* ==========================================================================
   6.5 壳组件遗留镜像（el-card / el-table / el-message）
   本页不直接使用，但壳插件（优惠码/活动/消息提示）可能注入，预留品牌兜底
   ========================================================================== */

.el-card { border-radius: var(--wb-r-lg) !important; border-color: var(--wb-line) !important; box-shadow: var(--wb-sh-1) !important; }
.el-card__header { background: #FAFBFB !important; border-bottom-color: var(--wb-line) !important; }
.el-card__body { padding: 18px 20px !important; }
.el-table th { background: var(--wb-brand-50) !important; color: var(--wb-brand-ink) !important; }
.el-table td { border-bottom-color: var(--wb-line-soft) !important; }
.el-table th.is-leaf { border-bottom-color: var(--wb-brand-100) !important; }
.el-table { border-radius: var(--wb-r-lg) !important; }
.el-message {
  border-radius: var(--wb-r-md) !important;
  border-color: var(--wb-line) !important;
  box-shadow: var(--wb-sh-2) !important;
}
.el-message--success .el-message__content { color: var(--wb-brand-ink) !important; }
.el-message--warning .el-message__content { color: var(--wb-ink-2) !important; }
.el-message--error .el-message__content { color: var(--wb-down) !important; }
.el-message__icon.el-icon-success { color: var(--wb-brand) !important; }

/* ==========================================================================
   7. 响应式（≤750px，与壳同断点）
   ========================================================================== */

@media (max-width: 750px) {
  /* 壳的移动端几何必须原样恢复：页头 1rem(56px)、el-main 顶部让位 1.66rem。
     基础规则（40px / 0.83rem）在媒体查询后加载会压过壳值，此处按同断点接管 */
  .top-menu,
  .el-header { height: 1rem !important; }
  /* 侧栏壳已隐藏；本文只补底部让位（移动底栏内容纵堆，约 97px） */
  .el-main {
    padding-top: 1.66rem !important;
    padding-bottom: 2.1rem !important;
  }
  .main-card { padding: 16px; border-radius: var(--wb-r-md) !important; }
  .main-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 14px;
  }
  .search-box .el-input { width: 100%; }
  .shopping-goods { padding: 14px 16px; margin-bottom: 12px; }
  .table-content { overflow-x: auto; }
  .goods-table { min-width: 640px; }
  .goods-info { font-size: 12.5px; }
  .info-box { width: 100%; }

  /* 结算栏：通栏 + 纵堆 */
  .el-footer {
    left: 0;
    width: 100vw;
    height: auto !important;
    padding: 10px 16px !important;
  }
  .footer-box {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 4px 0;
  }
  .footer-left {
    justify-content: space-between;
    gap: 12px;
  }
  .footer-right {
    justify-content: space-between;
    gap: 12px;
  }
  .footer-right p { align-items: baseline; }
  .total-price { font-size: 20px; }
  .buy-btn {
    flex: 1;
    height: 40px;
    min-width: 0;
  }
}