/* ============================================
   /portal/assets/css/portal.brand-sidebar.css
   手机端品牌竖向导航栏
   ============================================ */
@media (max-width: 768px) {
/*-- ---------------搜索结果页“品牌”功能------------------ --*/
/* 左侧竖向导航栏固定 */
  .brand-fixed-sidebar {
      position: fixed;
      top: var(--portal-nav-total); /* 顶部导航栏总高度 */
      left: 0;
      width: 14%;              /* 这是调整品牌导航栏宽度：左侧栏占屏幕 百分比% */ 
      height: calc(100vh - var(--portal-nav-total));   /* ⭐ 这行代码是高度计算触发上下滑动的 */
      background: #f7f7f7;
      border-right: 1px solid #eee;
      overflow-y: auto;               /* 两行就是移动端“独立滚动容器”的标准写法。 */
      -webkit-overflow-scrolling: touch;    /* 两行就是移动端“独立滚动容器”的标准写法。 */
      z-index: 500; /* 在内容上面，但低于顶部导航 */
	  padding-bottom: 58px; /* ⭐ 关键：给底部导航栏留出空间，防止滑动看最后一个时被底部栏遮挡文字 */
	  box-sizing: border-box;
  }

  /* 右侧内容区域自然让位 */
  /* 右侧内容整体往右“让出空间”的偏移量%，让出的这个位置是用来放品牌导航栏的 */    
  body.brand-mode .portal-container {
      margin-left: 14%;     /* 这个让位偏移量需要和品牌导航栏宽度一致，不能更小，否则内容会被导航栏遮住% */          
  }
  
/* ⭐ --------------隐藏滚动条，保留滚动功能（如不行隐藏，注释掉这段即可）--------------- */   
/* 隐藏滚动条（Chrome / Edge / Safari / Android） */
.brand-fixed-sidebar::-webkit-scrollbar {
    display: none;
}

/* 隐藏滚动条（Firefox） */
.brand-fixed-sidebar {
    scrollbar-width: none;
}

/* 隐藏滚动条（IE / Edge 旧版） */
.brand-fixed-sidebar {
    -ms-overflow-style: none;
}
/* ⭐ --------隐藏滚动条代码结束--------------- */     
  
/* =====================================================
   品牌导航栏全局代码:放在portal.mobile.css内的
   此处只是补充说明
   /* ⭐ 彻底禁止页面横向滚动（关键中的关键） */
 /*html, body {
    overflow-x: hidden !important;
    width: 100% !important;
}*/

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

/* ⭐ 防止 flex 子元素撑宽父容器 */
 /*.search-results,
.brand-products {
    min-width: 0 !important;
	} 
======================================================= */ 
 
/* 左侧品牌竖向导航栏：每一项一个格子 */
.brand-vertical-nav {
    display: flex;
    flex-direction: column;
}

/* 每个品牌项一个独立格子 + 自动换行 + iOS/Android 统一字体 */
.brand-vertical-link {
    display: block;
    padding: 12px 12px;              /* 左右间距统一 */
    
    /* 统一字体渲染（解决 iOS/Android 字距不同的问题） */
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
                 "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;                 /* 字体大小 */
    letter-spacing: 0;               /* 统一字距 */
    line-height: 1.35;               /* 统一行高，避免安卓换行过早 */

    /* ⭐ 允许换行（关键） */
    white-space: normal;             /* ← 允许自动换行 */
    word-break: break-all;           /* ← 两字品牌也能换行，不会挤成一行 */
    overflow: visible;               /* ← 不隐藏文字 */
	
	text-align: center;   /* ⭐ 让品牌文字水平居中 */

    color: #333;
    background: #fff;
    border-bottom: 1px solid #eee;
}

/* 选中态（拼多多风格） */
.brand-vertical-link.active {
    background: #e0e7ff;   /* 浅蓝背景 */
    color: #1d4ed8;        /* 蓝色文字 */
    font-weight: 600;
	}
	

}  /* ← 这里是 @media 的结束 */