/* ============================================
   /portal/assets/css/portal.mobile.css
   ============================================ */
/* ============================================================================================
   手机端适配（核心）----放：全局 mobile 样式（变量、布局、reset）
   组件自身内部的CSS样式放组件自己的CSS样式里；组件整体在手机UI的布局属于全局，放这文件
   ========================================================================================== */
@media (max-width: 768px) {

/* ---------------------手机抽屉菜单的全局布局---------------------------- */
  /* ⭐ 抽屉整体：挂在导航下方，高度 40vh，浅灰背景 */
  .portal-mobile-menu-wrapper {
    display: none;
    position: fixed;
    top: var(--portal-nav-height);
    left: 0;
    right: 0;
    height: calc(100vh - var(--portal-nav-height));
    background: #e5eaf3;          /* ⭐ 让背景色柔和但明显，和白色卡片区分 */
    padding: 0;        /* ← 关键：去掉左右 padding */
    z-index: 2000;
    flex-direction: column;
  }

  body.portal-menu-open .portal-mobile-menu-wrapper {
    display: flex;
  }

  /* ⭐ 顶部固定悬浮层（你的 footer）视觉样式 */
  .portal-mobile-footer {
      padding: 6px 16px;   /* 上下 8，左右 16 —— 作为统一“内边距基准线” */
      background: #ffffff;        /* 白色背景 */
      border-bottom: 1px solid #e5e7eb;  /* ⭐ 顶部悬浮层的分割线（你要的） */
      box-shadow: 0 1px 2px rgba(0,0,0,0.06); /* ⭐ 轻微阴影（可选） */
      display: flex;
      flex-direction: column;     /* 整体仍然纵向 */
      gap: 12px;
	  position: relative;
  }
  

  /* ⭐ 登录/注册按钮保持同一行（放这里最合适） */
  #portal-login-row-mobile {
      display: flex;
	  flex-direction: row;
	  gap: 10px;
	  align-items: center;
  }
  
  /* ⭐ 登录后用户区：头像 + 昵称 + 后台 + 退出 全部一行 */
  #portal-user-row-mobile {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;              /* 按钮与头像之间的间距 */
      padding: 6px 0;      /* ⭐ 只保留上下 8，左右用 footer 的 16px */
      background: #ffffff;
  }

  /* ⭐ 头像 + 昵称 */
  #portal-user-info-mobile {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
  }
  
  /* ⭐ 后台 + 退出按钮（同一行） */
  #portal-user-actions-mobile {
      display: flex;
      flex-direction: row;
      gap: 10px;
      margin-left: auto;      /* ⭐ 让按钮组靠右 */
  }
  
  /* 手机端昵称最多显示 4 个汉字宽度 */
  #portal-user-name-mobile {
    max-width: 4em;        /* ⭐ 关键：限制为 4 个汉字宽度 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;      /* ⭐ 关键：让昵称宽度固定为 4em，不被 flex 挤压 */
  }

  /* 隐藏 PC 菜单（旧结构） */
.portal-nav-left > .portal-nav-menu {
    display: none;
}

/* ⭐ 隐藏 PC 菜单（新结构） */
.portal-menu-pc {
    display: none;
}


/* ⭐ --------------显示手机顶部第二层菜单（横向滑动）---------------- */
/*这段代码属于“布局修复层”，必须放在最前面*/
/* ⭐ 让左侧容器允许横向滚动（关键） */
.portal-nav-second .portal-nav-left {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
}

/* ⭐ ----- 手机导航菜单滑动（结束）------- */

/* ⭐ ------------------------“全局 mobile 样式（布局、结构、reset）”------------------------- */
  /* 显示汉堡按钮 */
  .portal-nav-toggle {
    display: block;
    margin-left: 12px;
  }

  /* 隐藏 PC 登录/注册 */
  #portal-btn-login,
  #portal-btn-register {
    display: none;
  }

  /* 退出登录按钮靠左 */
  #portal-btn-logout-mobile {
    margin-left: 0 !important;   /* 保持靠左 */
    align-self: flex-start;      /* ⭐ 内容宽度，不拉满整行 */
    width: auto !important;      /* ⭐ 强制恢复按钮原本宽度 */
  }

  /* 二级菜单改为纵向 */
  body.portal-menu-open .portal-submenu {
    display: none;
    position: static;
    flex-direction: column;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }

  body.portal-menu-open .portal-nav-item-with-children {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }

  body.portal-menu-open .portal-nav-link.has-children {
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }

  /* 删除导致按钮错位的 margin-top */
  body.portal-menu-open #portal-btn-logout-mobile {
    margin-top: 0 !important;
  }

  /* mobile 通用按钮基类 */
  .portal-btn-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
  }

  /* mobile 登录后按钮样式 */
  #portal-btn-dashboard-mobile,
  #portal-btn-logout-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
	
	border: none;      /* ⭐ 去掉默认边框 */
    outline: none;     /* ⭐ 去掉点击外轮廓 */
    box-shadow: none;  /* ⭐ 确保没有阴影边框 */
  }

  /* 灰色按钮 */
  #portal-btn-dashboard-mobile {
    background: #e5e7eb;
    color: #111827;
  }

  /* 红色按钮 */
  #portal-btn-logout-mobile {
    background: #ef4444;
    color: #ffffff;
  }
  
  /* 移除 mobile 菜单所有链接的下划线 */
  .portal-mobile-mega a {
      text-decoration: none;
  }

/* ==================================================
   Mobile 双栏 Mega Menu（阿里云）已经抽离成组件CSS
   文件：mobile_mega_menu.css
=================================================== */  

/* ============================================================================================
  “手机门户首页：第二层滑动菜单导航样式代码 ：（包括：滑动 + 贴边 + 清除旧布局）模块1-----模块4
  是 全局级别的布局规则，必须放在 portal.mobile.css。
================================================================================================*/ 

/* ===============================================
   模块 1：手机顶部第二层导航栏的“贴边 + 清除旧布局”模块
   作用：让滑动菜单真正贴边、去掉 PC 旧布局、清除 transform
=================================================*/

/* 1) 去掉导航内层的左侧 padding（全局左留白） */
.portal-nav-second .portal-nav-inner {
  padding-left: 0 !important;
  padding-right: 0 !important; /* 右侧留白用菜单自身或按钮留白处理 */
}

/* 2) 确保 portal-nav-left 不再以 flex 占位（避免撑开左侧） */
.portal-nav-second .portal-nav-left {
  display: block !important;    /* 保留容器但不强制占位 */
  flex: 0 0 auto !important;    /* 不占剩余空间 */
  width: auto !important;
  min-width: 0 !important;
  overflow: visible !important; /* 防止裁剪 */
  margin: 0 !important;
  padding: 0 !important;
}

/* 5) 清理会破坏 fixed 定位的 transform（保险） */
/* .portal-menu-mobile-top .mobile-top-link {注销这一行，这导致顶部菜单选中放大效果不生效*/
.portal-nav-second,
.portal-nav-inner,
.portal-nav-left,
.portal-menu-mobile-top {
  transform: none !important;
}

/* 7) iOS 安全区（可选）：如果你希望在刘海屏上也贴边，考虑安全区 */
.portal-menu-mobile-top {
  padding-left: env(safe-area-inset-left, 0) !important;
  } 
  
  /* === 手机端：给滑动菜单一个合适的左侧间距（可选 12 / 14 / 16px） === */
:root {
  --mobile-menu-left-gap: 16px; /* ← 改成 12px 或 14px 按需选择 */
  --mobile-menu-right-gap: 56px; /* 给悬浮按钮的右侧留白，按需调整 */
}

/* 确保第一个菜单项没有额外的负 margin 或多余内边距 */
.portal-menu-mobile-top .mobile-top-link:first-child {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* ----------------------------分割线---模块 2：手机端顶部导航栏（第一层 + 第二层）定位模块-------------------------------*/
/* ===============================================
   模块 2：手机端顶部导航栏（第一层 + 第二层）固定定位体系
   作用：两层导航固定在顶部、页面内容整体下移、抽屉菜单同步下移
=================================================*/   

/* 1) 全局高度变量（只在此处定义一次，按实际像素调整） */
:root {
  --portal-nav-height: 56px;         /* 第一层导航高度，按实际调整 */
  --portal-nav-second-height: 48px;  /* 第二层导航高度，按实际调整 */
  --portal-nav-total: calc(var(--portal-nav-height) + var(--portal-nav-second-height));
}

/* 2) 清理会破坏 fixed 定位的 transform（放在末尾以覆盖） */
html, body, #app, .portal-root, .portal-nav, .portal-nav-inner, .portal-mobile-menu-wrapper {
  transform: none !important;
  -webkit-transform: none !important;
}

/* 3) 第一层导航：固定在顶部（第一层在上） */
.portal-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--portal-nav-height) !important;
  z-index: 2400 !important; /* 第一层在上 */
  margin: 0 !important;
  box-sizing: border-box;
}

/* 4) 第二层导航：紧贴第一层下方并固定（不会覆盖第一层） */
.portal-nav-second {
  position: fixed !important;
  top: var(--portal-nav-height) !important; /* 直接等于第一层高度 */
  left: 0 !important;
  right: 0 !important;
  height: var(--portal-nav-second-height) !important;
  z-index: 2390 !important; /* 略低于第一层，确保不被覆盖 */
  margin: 0 !important;
  box-sizing: border-box;
  overflow: visible !important; /* 允许内部绝对定位元素显示 */
}

/* 5) 导航内部垂直居中（保持原有内联布局） */
.portal-nav .portal-nav-inner {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding-right: 16px !important;
}

.portal-nav-second .portal-nav-inner {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 0 !important;      /* ⭐ 第二层保持贴边，由 .portal-menu-mobile-top 控制间距 */
  padding-right: 0 !important;
}

/* ----------------------------分割线---模块 3：面包按钮（汉堡按钮）定位 + 样式-------------------------------*/
/* ===============================================
   模块 3：面包按钮（汉堡按钮）定位 + 样式模块
   作用：按钮绝对定位、视觉样式、按下反馈
=================================================*/

/* 6) 把面包按钮放回第二层内部右侧（绝对定位，相对于 .portal-nav-second） */
.portal-nav-second .portal-nav-actions {
  position: absolute !important;
  right: calc(env(safe-area-inset-right, 0px) + 0px) !important; /* 紧贴第二层右侧 */
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2450 !important; /* 高于第二层内容，低于第一层仍可调整 */
  pointer-events: auto;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
}

/* 7) 面包按钮视觉样式（在第二层内） */
.portal-nav-second .portal-nav-actions .portal-mobile-menu-toggle {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: 0 6px 18px rgba(16,24,40,0.12) !important;
  border: none !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: #111827 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}

/* 8) 按下反馈（保持在第二层内） */
.portal-nav-second .portal-nav-actions .portal-mobile-menu-toggle:active {
  transform: translateY(-50%) scale(0.98) !important;
  box-shadow: 0 4px 10px rgba(16,24,40,0.10) !important;
}

/* ----------------------------分割线---模块 4：滑动菜单右侧留白 + 隐藏滚动条-------------------------------*/
/* ===============================================
   模块 4：滑动菜单增强（右侧留白 + 隐藏滚动条）
   作用：避免被面包按钮遮挡、隐藏滚动条、保持滑动流畅
=================================================*/

/* 9) 页面主体与抽屉/遮罩同步下移，避免被导航遮挡 */
body {
  padding-top: var(--portal-nav-total) !important;
}
.portal-mobile-menu-wrapper {
  top: var(--portal-nav-total) !important;
}
.portal-mobile-overlay {
  top: var(--portal-nav-total) !important;
}

/* 10) 给滑动菜单留出右侧空间，避免被按钮遮挡（按需微调） */
.portal-menu-mobile-top {
  padding-right: calc(env(safe-area-inset-right, 0px) + 64px) !important;
  }
  
  
 /* ------------- 模块 4：滑动菜单代码到此结束  ----------------*/ 
 
/* -------------滑条 + 选中态颜色 ----------------*/  
/* ================================
   手机端第二层导航栏（横向滑动）
  ================================ */

.portal-menu-mobile-top {
    position: relative;
    display: flex;
    overflow-x: auto;
	overflow-y: hidden;              /* ← 必须加：禁止垂直滚动 */
	overscroll-behavior-y: contain;  /* ← 必须加：阻止滚动链 */
	touch-action: pan-x;             /* ← 必须加：只允许横向滑动 */
    white-space: nowrap;
    gap: 16px;
    padding-left: 16px !important;
    padding-right: 64px !important; /* 给右侧按钮留白 */ /* 左侧安全间距 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

/* 隐藏滚动条 */
.portal-menu-mobile-top::-webkit-scrollbar {
    display: none; /* Chrome 隐藏滚动条 */
}

/* 默认菜单样式 */
.portal-menu-mobile-top .mobile-top-link {
    font-size: 15px;        /* ← 字体大小 */
	font-weight: 500;       /* ← 字体粗细（400正常，500略粗，600更粗） */
	/*margin-right: 12px;     /* ← 菜单项之间的间距（可替代 gap），加了叠加了宽度，暂时不用 */
    color: #333 !important;   /* ← 默认文字颜色 */
    position: relative;
    padding: 10px 0 !important;   /* ⭐ 左右 0，滑条立刻精准对齐 */
    display: inline-flex;   /* 菜单横向排列*/
    white-space: nowrap;  /* 文字是否换行*/
	align-items: center;   /* 文字垂直居中*/
	
}

/* 选中态 */
.portal-menu-mobile-top .mobile-top-link.active {
    color: #1d4ed8 !important;      /* ← 选中态颜色：#ff2d7a粉色 */
    font-weight: 600;
  }
  
/* ⭐ --------------增强：选中态轻微放大 + 平滑过渡（唯品会同款）----------- */

/* 默认状态：定义动画和初始缩放 */
.portal-menu-mobile-top .mobile-top-link {
    transition:
        color .25s ease,
        font-weight .25s ease,
        transform .25s ease;
    transform: scale(1);   /* 默认大小 */
}

/* 选中态：加粗 + 轻微放大 */
.portal-menu-mobile-top .mobile-top-link.active {
    transform: scale(1.12);  /* 建议 1.08 ~ 1.15 之间微调 */
}

/* ----------滑条------------- */	
.mobile-underline {
    position: absolute;
    bottom: 0;
	left: 0;   /* ⭐ 必须加上这一行，滑条才会完全对齐 */
    height: 2px;
    background-color: #1d4ed8;
    transition: transform .25s ease, width .25s ease;
    will-change: transform, width;
	}
/* ⭐ -----------------手机首页顶部第二层导航栏代码结束-------------------- */	

/* ==============================================================================
  ------------------------------手机首页顶部第一层导航栏布局--------------------
  ============================================================================== */ 

/* ⭐ 手机端隐藏顶部第一层导航栏的 Logo + 网站名称 */
.portal-topbar .portal-nav-left {
    display: none !important;
}

/* ⭐ ---------清除第一层导航内层左右 padding------------- */
.portal-topbar .portal-nav-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }	

/* ⭐ ----手机端：顶部第一层导航栏的搜索框左右间距-------- */
.portal-topbar .portal-topbar-search {
    padding-left: 8px !important;
    padding-right: 8px !important;
    width: 100% !important;      /* 让搜索框占满可用空间 */
    box-sizing: border-box !important;
  }

/* ⭐ --------- 手机顶部第一层导航栏（代码到此结束）---------- */

/* ==============================================================================
  搜索结果页：顶部第二层横向导航栏（全局代码）
=============================================================================== */ 

/* ⭐ ---------搜索结果按钮的箭头（抽屉开关）----------- */
/* ⭐ 搜索结果按钮的箭头（抽屉开关） */
.info-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #666;
    transition: transform .2s ease;
}

.info-arrow.open {
    transform: rotate(180deg);
}

/* ⭐ 结果页隐藏滑条（优先级必须这样写） */
.portal-menu-mobile-top.search-top-nav .mobile-underline {
    display: none !important;
}

/* ⭐ 结果页禁用放大效果（覆盖首页的 scale 动画） */
.portal-menu-mobile-top.search-top-nav .mobile-top-link.active {
    transform: none !important;
}

/* ⭐ 搜索结果按钮默认颜色（不是 tab，不参与 active） */
#search-info-toggle {
    color: #333 !important;
}

/* ⭐ 结果页默认文字颜色（不是 tab，不继承 mobile-top-link） */
.portal-menu-mobile-top.search-top-nav .search-top-link {
    color: #333 !important;
}

.portal-menu-mobile-top.search-top-nav a.search-top-link.active {
    color: #1d4ed8 !important;
    font-weight: 600;
}

/* ⭐ --------------（价格箭头图标）------------------ */
/* ⭐ 拼多多双箭头样式（放在 @media 内部的最后） */
.price-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.1px;   /* 价格与箭头间距 */
}

.sort-icon {
    width: 20px;   /* 价格箭头大小调整 */
    height: 20px;
    stroke: #333;   /* 箭头默认颜色 */
    stroke-width: 1.6;  /* 价格箭头粗细 */
    fill: none;

	position: relative;
	top: -2.2px;   /* ⭐ 价格箭头竖向居中微调 -1px / -2px / -3px */
	margin-left: -4px;  /* ⭐ 抵消“价格”右侧的字形留白 */
}

/* 默认箭头颜色跟随文字颜色 */
.sort-icon .up,
.sort-icon .down {
    stroke: currentColor;
    opacity: 0.4; /* 默认半透明 */
}

/* 升序：上箭头高亮（跟随文字颜色） */
.price-asc .sort-icon .up {
    opacity: 1;
}

/* 降序：下箭头高亮（跟随文字颜色） */
.price-desc .sort-icon .down {
    opacity: 1;
}

/* ⭐ ------（价格箭头图标）代码结束 ------- */

/* ⭐ 搜索结果页：字体大小 + 粗细（与首页一致） */
.portal-menu-mobile-top.search-top-nav .search-top-link {
    font-size: 15px !important;
    font-weight: 500 !important;
}

.portal-menu-mobile-top.search-top-nav .search-top-link.active {
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* ============================================================================
   （手机端第二层导航栏）搜索结果页：品牌导航栏全局代码
============================================================================ */   

  /* ⭐ 彻底禁止页面横向滚动（关键中的关键） */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* ⭐ 防止右侧内容把页面撑宽 */
.portal-container {
    overflow-x: hidden !important;
}

/* ⭐ 防止 flex 子元素撑宽父容器 */
.search-results,
.brand-products {
    min-width: 0 !important;
	}

/* ⭐ ------品牌栏代码---结束------ */ 
	
	
}  /* ← 这里是 @media 的结束 */

/* =====================================================
  不同移动设备适配（全局代码）已经抽离为
  global-device-adapt.css
======================================================= */  

/* -------------------------- 分割线 ----遮罩层----------------------------- */
/* ⭐ 遮罩层（默认隐藏） */
.portal-mobile-overlay {
    display: none;
    position: fixed;
    top: var(--portal-nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.45);   /* ⭐ 半透明黑色，和亚马逊一致 */
    z-index: 1500;                  /* ⭐ 在抽屉下面一层 */
}

/* ⭐ 当菜单打开时显示遮罩 */
body.portal-menu-open .portal-mobile-overlay {
    display: block;
}