/* =============================================================
   页面面包屑 — 桌面分级 + 移动端完整层级路径（Amazon 式无死角）
   移动端：← 返回上一级 + Home › … › 当前页（可横滑）
============================================================= */

.page-breadcrumb-bar {
    margin-top: var(--header-offset);
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 0;
}

/* 移动端次顶栏：仅面包屑吸顶壳（桌面无 sticky） */
.page-mobile-breadcrumb {
    margin-top: var(--header-offset);
}

.page-mobile-breadcrumb .page-breadcrumb-bar {
    margin-top: 0;
}

.page-breadcrumb-bar:has(.breadcrumb-mobile.has-trail) {
    padding: 8px 0;
}

.page-breadcrumb-bar .breadcrumb {
    margin: 0;
}

/* ── 移动端路径栏（≤992px）────────────────────────────── */
.breadcrumb-mobile {
    display: none;
}

.breadcrumb-mobile__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 4px 0;
}

.breadcrumb-mobile.has-trail .breadcrumb-mobile__bar {
    min-height: 44px;
}

.breadcrumb-mobile__back {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -4px;
    color: var(--color-primary);
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
}

.breadcrumb-mobile__back:hover,
.breadcrumb-mobile__back:focus-visible {
    color: var(--color-accent-hover);
    background: rgba(var(--color-accent-rgb), 0.1);
    outline: none;
}

.breadcrumb-mobile__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding-right: 8px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb-mobile__trail-wrap {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.breadcrumb-mobile__trail-wrap--inline {
    padding: 0;
    margin: 0;
}

.breadcrumb-mobile__trail-wrap::-webkit-scrollbar {
    display: none;
}

.breadcrumb-mobile__trail {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
    max-width: 100%;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
}

.breadcrumb-mobile__trail-item {
    display: flex;
    align-items: center;
}

.breadcrumb-mobile__trail-item + .breadcrumb-mobile__trail-item::before {
    content: '›';
    margin: 0 6px;
    color: var(--color-text-muted);
    opacity: 0.65;
    font-size: 13px;
}

.breadcrumb-mobile__trail-link {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-mobile__trail-link:hover {
    color: var(--color-accent-hover);
}

.breadcrumb-mobile__trail-current {
    color: var(--color-primary);
    font-weight: 600;
}

/* ── 桌面端列表 ───────────────────────────────────────────── */
.breadcrumb-list--desktop {
    display: flex;
}

.breadcrumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 8px;
    flex-shrink: 0;
    opacity: 0.45;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

.breadcrumb-link--depth-1 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-link--depth-1:hover {
    color: var(--color-accent);
}

.breadcrumb-home-icon {
    flex-shrink: 0;
    opacity: 0.85;
}

.breadcrumb-link--depth-1:hover .breadcrumb-home-icon {
    opacity: 1;
}

.breadcrumb-link--depth-2 {
    color: #4b5563;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-link--depth-2:hover {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.breadcrumb-current--depth-2 {
    color: #1f2937;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.breadcrumb-link--depth-3 {
    color: #6b7280;
    font-weight: 500;
    font-size: 0.8rem;
    text-decoration: none;
}

.breadcrumb-link--depth-3:hover {
    color: var(--color-accent);
}

.breadcrumb-current--depth-3 {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
}

/* ── 四级及以上：当前页强调色 pill ───────────────────── */
.breadcrumb-link--depth-4,
.breadcrumb-link--depth-5 {
    color: #9ca3af;
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
}

.breadcrumb-link--depth-4:hover,
.breadcrumb-link--depth-5:hover {
    color: var(--color-accent);
}

.breadcrumb-current--depth-4,
.breadcrumb-current--depth-5 {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-accent-hover);
    background: rgba(var(--color-accent-rgb), 0.12);
    border-radius: 999px;
}

/* 通用链接/当前页（无 depth 修饰时的兜底） */
.breadcrumb-link {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition);
}

.breadcrumb-current {
    color: var(--color-primary);
    font-weight: 500;
}

.breadcrumb-sep {
    display: none;
}

/* ── 移动端：路径栏替代桌面灰条 ───────────────────────────── */
@media (max-width: 992px) {
    /*
     * B2B 次顶栏：仅面包屑 sticky（.page-mobile-breadcrumb）。
     */
    .page-mobile-breadcrumb {
        position: sticky;
        top: var(--header-offset);
        z-index: 500;
        /* margin-top 沿用基线 var(--header-offset)，勿清零（header 为 fixed） */
        background: var(--color-surface);
    }

    .page-breadcrumb-bar {
        margin-top: 0;
        padding: 0;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        border-top: none;
        position: static;
        z-index: auto;
    }

    .page-breadcrumb-bar .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .breadcrumb-mobile {
        display: block;
    }

    .breadcrumb-list--desktop {
        display: none;
    }
}

/* ── 桌面端：隐藏移动端路径栏 ─────────────────────────────── */
@media (min-width: 993px) {
    .breadcrumb-mobile {
        display: none !important;
    }
}