/* =============================================================================
   购物车页面配色（浅蓝渐变白）与主题侧栏协调化
   -----------------------------------------------------------------------------
   改的是什么：
     1. 桌面端「用户中心」左侧导航 .el-aside（商品详情页可见，原来是主题主色
        #1A56DB 的实心蓝）→ 改为浅蓝到白的竖向渐变，文字改深色；
     2. 商品列表页左侧分类栏 .Hui-sidebar（本模板自己的）→ 同一套浅蓝渐变白；
     3. 移动端左侧抽屉 .drawer-menu、商品筛选面板、整页底色 → 同一套浅蓝渐变白。
   为什么"不影响任何系统功能"：
     - 本文件只由购物车模板的 goodsList.php / goods.php / goods_iframe.php 引入，
       其它页面不加载；
     - 不修改主题目录下任何文件，主题升级不会覆盖；
     - 只覆盖颜色变量与 background，不改尺寸 / 位置 / 事件，分类切换、下单、
       抽屉开关等逻辑一行未动；
     - 桌面端 .el-aside 的配色变量改在 .el-aside 自身，移动抽屉改在 .drawer-menu
       自身，两者作用域互不干扰，主题其它位置（如选中项的 3px 竖线）仍用主色。

   想调色：只改下面 :root 里的 6 个变量即可（渐变起止色、边框、文字、主色、悬浮底）。
   ============================================================================= */

:root {
  /* 侧栏 / 抽屉：更偏白的浅蓝 → 白 */
  --cart-grad: linear-gradient(180deg, #e9f2ff 0%, #f6faff 46%, #ffffff 100%);
  /* 页面内容区：更浅的浅蓝 → 白，让白色商品卡片浮起来 */
  --cart-page-grad: linear-gradient(180deg, #eaf2ff 0%, #f7faff 42%, #ffffff 100%);
  /* 侧栏描边 */
  --cart-side-border: #e4edff;
  /* logo 区分割线（比描边更明显一档） */
  --cart-divider: rgba(26, 86, 219, 0.22);
  /* 侧栏 / 抽屉文字 */
  --cart-text: #25324a;
  --cart-text-weak: rgba(37, 50, 74, 0.62);
  /* 强调色（沿用你主题的主色，主题换色这里自动跟随） */
  --cart-accent: var(--color-primary);
  --cart-hover-bg: rgba(26, 86, 219, 0.08);
  /* 选中项投影，浅色底上更有层次 */
  --cart-active-shadow: 0 2px 8px rgba(26, 86, 219, 0.12);
}

/* =============================================================================
   1. 桌面端用户中心侧栏（商品详情页）
   ============================================================================= */
.el-aside {
  background: var(--cart-grad) !important;
  border-right: 1px solid var(--cart-side-border);
  box-shadow: 2px 0 10px rgba(26, 86, 219, 0.05);
  /* 文字与状态色：浅色底上用深色文字 */
  --color-menu-text: var(--cart-text);
  --color-menu-text-active: var(--cart-accent);
  --color-menu-active-bg: #ffffff;
  --color-menu-hover-bg: var(--cart-hover-bg);
}

.el-aside .el-menu-item.is-active,
.el-aside .el-submenu__title:hover {
  box-shadow: var(--cart-active-shadow);
}

/* 主题里白色分隔线在浅底上看不见，换成浅灰蓝 */
.el-aside .line {
  border-color: var(--cart-side-border);
  opacity: 1;
}

/* =============================================================================
   2. 商品列表页左侧分类栏（本模板的 .Hui-sidebar）
   ============================================================================= */
.Hui-sidebar {
  background: var(--cart-grad) !important;
  border-right: 1px solid var(--cart-side-border);
  box-shadow: 2px 0 10px rgba(26, 86, 219, 0.05);
}

/* 页面内容区底色（桌面 + 移动，只命中外层 .el-main，
   不影响商品详情页底部固定结算栏内部的那个 .el-main） */
.template > .el-container > .el-container > .el-main,
.goods > .el-container > .el-container > .el-main {
  background: var(--cart-page-grad) !important;
}

/* 模板原本用了几层不透明底色（#f1f1f1c4 / #f9fafc / 内联背景），
   这里全部改为透明，让渐变透出来；悬浮与选中态保留 */
.Hui-sidebar,
.Hui-sidebar .el-menu,
.Hui-sidebar .el-menu-item,
.Hui-sidebar .el-submenu .el-menu,
.Hui-sidebar .el-submenu .el-menu-item,
.Hui-sidebar .el-submenu__title,
.Hui-sidebar .Hui-titles,
.Hui-sidebar .Hui-search {
  background-color: transparent !important;
}

.Hui-sidebar .el-menu-item:hover,
.Hui-sidebar .el-submenu__title:hover {
  background-color: var(--cart-hover-bg) !important;
}

.Hui-sidebar .el-menu-item.is-active {
  background-color: #ffffff !important;
  border-left-color: var(--cart-accent) !important;
  border-right-color: var(--cart-accent) !important;
  box-shadow: var(--cart-active-shadow);
}

/* =============================================================================
   3. 移动端：抽屉 / 商品筛选面板 / 整页底色
   ============================================================================= */

/* 抽屉样式在主题里位于 @media (max-width: 750px)，用同断点 */
@media screen and (max-width: 750px) {
  .drawer-menu {
    background: var(--cart-grad) !important;
    --color-menu-text: var(--cart-text);
    --color-menu-text-active: var(--cart-accent);
    --color-menu-active-bg: #ffffff;
    --color-menu-hover-bg: var(--cart-hover-bg);
  }

  .drawer-menu .line {
    border-color: var(--cart-side-border);
    opacity: 1;
  }

  /* 旧版类名兜底，避免将来启用时白字白底 */
  .drawer-menu .drawer-menu-item {
    color: var(--cart-text);
  }
}

@media screen and (max-width: 768px) {
  /* 整页底色（移动端，与桌面同一套；同样只命中外层 .el-main） */
  .template > .el-container > .el-container > .el-main,
  .goods > .el-container > .el-container > .el-main {
    background: var(--cart-page-grad) !important;
  }

  /* 商品列表页顶部搜索条保持白色，保证输入可读 */
  .Hui-mobileEndSidePull {
    background-color: #ffffff;
  }

  /* 商品筛选面板 */
  .Hui-filterSubjects .Hui-contentArea {
    background: var(--cart-grad) !important;
  }

  .Hui-filterSubjects .Hui-contentArea .Hui-contentPlus .Hui-rights {
    background-color: rgba(232, 241, 255, 0.72) !important;
  }

  /* 商品卡片保持白色，浮在浅蓝底上 */
  .shopping-item,
  .Hui-productList .shopping-item {
    background-color: #ffffff;
  }
}

/* =============================================================================
   4. 移动端吸顶元素的"接缝"修正
   -----------------------------------------------------------------------------
   主题移动端头部是 .el-header{height:1rem !important}（1rem 随视口缩放），
   而移植层的搜索条 sticky 用 top:15vw、二级分类说明条用 top:33vw，都比头部
   高一点点，滚动时头部与搜索条之间会露出约 1.7vw 的缝（能看到底部内容划过）。
   这里统一按「头部高度 + 搜索条自身高度」对齐，并且同样用 rem/vw 表达，
   跟随主题的缩放，任何手机宽度下都不会再出现缝隙：
     搜索条 = 1rem（与头部同高，紧贴头部下沿）
     说明条 = 1rem + 18vw（搜索条高度 = 上下 padding 4vw×2 + 输入框 10vw）
   ============================================================================= */
@media screen and (max-width: 750px) {
  .Hui-mobileEndSidePull {
    top: 1rem !important;
  }
}

@media screen and (max-width: 768px) {
  .second-desc {
    top: calc(1rem + 18vw) !important;
  }
}

/* =============================================================================
   5. 主题自带的侧栏 / 抽屉 logo 统一规格（与商品列表页侧栏同一套做法）
   -----------------------------------------------------------------------------
   主题原本把两处 logo 限制得很小：
     .ali-logo         { height:28px; max-width:130px }   ← 商品详情页左侧（.el-aside）
     .drawer-menu-logo { height:28px; max-width:2rem }    ← 手机端抽屉
   两者取的都是 commonData.system_logo（与列表页同一个 logo），这里只放大尺寸、
   改为等比居中，不改任何结构 / 交互：
     - 高度、宽度都按可用区域自适应，object-fit: contain 保证不变形不裁切；
     - 本文件只在购物车页面加载，其它页面的侧栏 / 抽屉保持主题原样。
   ============================================================================= */

/* 商品详情页：左侧用户中心侧栏 logo 区（与列表页同一套分割样式） */
.el-aside > .menu-alink:first-child {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 12px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--cart-divider, rgba(26, 86, 219, 0.2));
  box-shadow: 0 2px 8px rgba(26, 86, 219, 0.06);
}

/* 分割带：4px 主色渐变（两端渐隐），与商品列表页侧栏完全一致 */
.el-aside > .menu-alink:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  opacity: 0.32;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

.el-aside .ali-logo {
  height: 56px;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  object-fit: contain;
}

/* 手机端抽屉 logo 区（同步同一套分割样式：细线 + 4px 主色渐变带 + 轻投影） */
@media screen and (max-width: 750px) {
  .drawer-menu-top {
    position: relative;
    height: 64px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--cart-divider, rgba(26, 86, 219, 0.2));
    box-shadow: 0 2px 8px rgba(26, 86, 219, 0.06);
  }

  .drawer-menu-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    opacity: 0.32;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  }

  .drawer-menu-logo {
    height: 48px;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    object-fit: contain;
  }
}