/* ============================================
   /portal/assets/css/portal.brand-hover.css
   品牌弹窗 → 视觉风格对齐普通下拉菜单
   ============================================ */
@media (min-width: 769px) {

.brand-hover-wrapper {
    position: relative; /* 允许箭头定位 */
    display: inline-block;
}

/* ============================
   弹窗外层（对齐普通下拉菜单）
   ============================ */
.brand-hover-menu {
    position: absolute;
    top: 100%;              /* 紧贴第三层导航栏底部 */
    left: 0;

    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
	
    border: 1px solid rgba(0,0,0,0.25);	     /* ⭐⭐ 新增：像亚马逊一样的黑色边框 */

    min-width: 180px;
    max-width: 220px;

    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;

    transition:
        opacity 0.22s ease,
        transform 0.22s cubic-bezier(0.33, 1, 0.68, 1);

    z-index: 2000;         
    overflow: visible; /* 允许箭头显示 */
}

/* ============================
   hover 展开动画
   ============================ */
.brand-hover-wrapper:hover .brand-hover-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ============================
   顶部箭头（与普通下拉一致）
   ============================ */
.brand-hover-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 20px;

    width: 0;
    height: 0;

    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    z-index: 2601;   /* ⭐ 比菜单本体略高一点，保证箭头也在遮罩之上 */
}

/* ============================
   内部滚动容器（对齐普通下拉）
   ============================ */
.brand-hover-list {
    padding: 12px 0;
    min-height: 120px;
    max-height: 260px;
    overflow-y: auto;
    box-sizing: border-box;
}

/* ============================
   品牌项样式（对齐普通下拉）
   ============================ */
.brand-hover-list a {
    display: block;
    padding: 6px 14px;
    color: #111;
    white-space: nowrap;
    border-bottom: 1px solid #d1d5db;
}

.brand-hover-list a:first-child {
    border-top: 1px solid #d1d5db;
}

/* ⭐ 品牌弹窗内选项切换时hover颜色 */
.brand-hover-list a:hover {
    background: rgba(29, 78, 216, 0.08) !important; /* 浅蓝背景 */
    color: #1d4ed8 !important;                      /* 和选中态一样的蓝色 */
}

/* ⭐ 品牌弹窗内选中项（active） */
.brand-hover-list a.active {
    background: rgba(29, 78, 216, 0.12) !important; /* 比 hover 略深一点 */
    color: #1d4ed8 !important;
    font-weight: 600;
}

/* ============================
   滚动条美化（与普通下拉一致）
   ============================ */
.brand-hover-list::-webkit-scrollbar {
    width: 6px;
}

.brand-hover-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.25);
    border-radius: 999px;
}

.brand-hover-list::-webkit-scrollbar-track {
    background: transparent;
}

.brand-hover-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.25) transparent;
}

} /* ← 结束 @media */