/* ============================================
   /portal/assets/css/portal.nav.third.css
   ============================================ */ 
/* ============================================
   ⭐ 第三层导航栏（与第二层导航栏完全一致）
   ============================================ */

.portal-nav-third {
    position: fixed;
    left: 0;
    right: 0;

    /* ⭐ 第三层导航栏高度（可在 :root 定义变量） */
    height: var(--portal-nav-third-height, 48px);

    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(229, 231, 235, 0.8);

    display: flex;
    align-items: center;
    justify-content: center;

    /* ⭐ 放在第二层导航栏下面 */
    top: calc(var(--portal-topbar-height) + var(--portal-nav-height));

    z-index: 850; /* 比第二层低一点 */
}

.portal-nav-third-inner {
    width: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
}

.portal-nav-third-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;

    /* ⭐ 未来可放子分类、频道导航等 */
}

/* ============================================
   ⭐ 第三层导航栏菜单项样式（你要插入的）
   ============================================ */

/* 默认菜单样式（综合 / 价格） */
.third-nav-link {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    padding: 10px 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition:
        color .25s ease,
        font-weight .25s ease,
        transform .25s ease;
}

/* 选中态（综合 / 价格） */
.third-nav-link.active {
    color: #1d4ed8;
    font-weight: 600;
    transform: scale(1.12); /* 与手机端一致 */
}

/* ============================================================
   ⭐ 价格箭头（完全复刻手机端）
   ============================================================ */

.third-nav-link .price-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.1px;
}

.third-nav-link .sort-icon {
    width: 20px;
    height: 20px;
    stroke: #333;
    stroke-width: 1.6;
    fill: none;

    position: relative;
    top: -2.2px;      /* 手机端的微调 */
    margin-left: -4px; /* 抵消“价格”字形留白 */
}

/* 默认箭头透明度 */
.third-nav-link .sort-icon .up,
.third-nav-link .sort-icon .down {
    stroke: currentColor;
    opacity: 0.4;
}

/* 升序：上箭头高亮 */
.third-nav-link.price-asc .sort-icon .up {
    opacity: 1;
}

/* 降序：下箭头高亮 */
.third-nav-link.price-desc .sort-icon .down {
    opacity: 1;
}

/* ⭐ PC 第三层导航栏：筛选按钮在面板打开时进入选中态 */
body.pc-filter-open #pc-filter-toggle {
    color: #1d4ed8 !important;      /* 蓝色，与综合一致 */
    font-weight: 600 !important;    /* 加粗 */
    transform: scale(1.12);         /* 放大，与综合一致 */
}

/* ⭐ 品牌 / 搜索结果：鼠标在悬浮窗内时保持选中态 */
.brand-hover-wrapper:hover > .third-nav-link,
.search-info-hover-wrapper:hover > .third-nav-link {
    color: #1d4ed8 !important;
    font-weight: 600 !important;
    transform: scale(1.12);
}

/* ⭐ PC 筛选 hover 区域（必须有 wrapper 才能稳定 hover） */
.pc-filter-hover-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* ⭐ PC 第三层导航栏：综合 / 价格 / 筛选 鼠标悬停时也进入选中态 */
.third-nav-link:hover {
    color: #1d4ed8 !important;
    font-weight: 600 !important;
    transform: scale(1.12);
}

/* ============================================
   ⭐ 手机端隐藏第三层导航栏（必须放最后）
   ============================================ */

/* ⭐ 手机端隐藏第三层导航栏 */
@media (max-width: 768px) {
    .portal-nav-third {
        display: none !important;
        position: static !important;   /* ⭐ 关键：不让它固定定位 */
        height: 0 !important;          /* ⭐ 关键：不占空间 */
        top: auto !important;          /* ⭐ 关键：不覆盖手机端导航栏 */
    }
}