/* ═══ BREADCRUMBS ════════════════════════════════════
 * Unified with the InkSide design system:
 *  - Typography  → var(--ink-font), var(--ink-font-size-*)
 *  - Colors      → var(--ink-text*), var(--ink-primary*)
 *  - Spacing     → var(--ink-space-*)
 *  - Radius      → var(--ink-radius-*)
 *  - Transitions → var(--ink-transition-*)
 * Breakpoints aligned with tokens.css:
 *   ≤ var(--ink-bp-tablet)  = 768px  → compact typo
 *   ≤ var(--ink-bp-mobile)  = 600px  → horizontal scroll + pill
 * ════════════════════════════════════════════════════ */

body.inkside-theme .ink-breadcrumbs,
body.inkside-theme .woocommerce-breadcrumb,
body.inkside-theme nav.woocommerce-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ink-space-xs);
    list-style: none;
    padding: var(--ink-space-md) 0;
    margin: 0 0 var(--ink-space-md);
    font-family: var(--ink-font);
    font-size: var(--ink-font-size-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink-text-muted);
}

body.inkside-theme .ink-breadcrumbs a,
body.inkside-theme .woocommerce-breadcrumb a {
    color: var(--ink-text-muted);
    text-decoration: none;
    transition: color var(--ink-transition-fast);
}

body.inkside-theme .ink-breadcrumbs a:hover,
body.inkside-theme .woocommerce-breadcrumb a:hover {
    color: var(--ink-primary);
}

/* ── Separator (chevron) ──
 * Empty <span class="ink-breadcrumbs__sep"> + ::before glyph so screen
 * readers ignore it (parent carries aria-hidden).
 */
body.inkside-theme .ink-breadcrumbs__sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ink-space-md);
    height: var(--ink-space-md);
    color: var(--ink-text-faint);
    user-select: none;
    flex-shrink: 0;
}

body.inkside-theme .ink-breadcrumbs__sep::before {
    content: '›';
    font-family: var(--ink-font);
    font-size: var(--ink-font-size-md);
    font-weight: 400;
    line-height: 1;
}

/* ── Current crumb (last item) ── */
body.inkside-theme .ink-breadcrumbs__current,
body.inkside-theme .woocommerce-breadcrumb > :last-child:not(a) {
    color: var(--ink-text);
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Tablet — ≤ var(--ink-bp-tablet) (768px) ── */
@media (max-width: 768px) {
    body.inkside-theme .ink-breadcrumbs,
    body.inkside-theme .woocommerce-breadcrumb {
        font-size: var(--ink-font-size-xs);
        padding: var(--ink-space-sm) 0;
        gap: var(--ink-space-xs);
    }

    body.inkside-theme .ink-breadcrumbs__sep::before {
        font-size: var(--ink-font-size-sm);
    }
}

/* ── Mobile — ≤ var(--ink-bp-mobile) (600px) ──
 * Horizontal scroll, fade right edge, current crumb prominent. */
@media (max-width: 600px) {
    body.inkside-theme .ink-breadcrumbs,
    body.inkside-theme .woocommerce-breadcrumb {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        width: auto;
        max-width: none;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* IE/Edge legacy */
        scroll-snap-type: x proximity;
        scroll-padding-inline: var(--ink-space-md);
        padding-right: var(--ink-space-xl);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--ink-space-lg)), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--ink-space-lg)), transparent 100%);
    }

    body.inkside-theme .ink-breadcrumbs::-webkit-scrollbar,
    body.inkside-theme .woocommerce-breadcrumb::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
        background: transparent;
    }

    body.inkside-theme .ink-breadcrumbs > *,
    body.inkside-theme .woocommerce-breadcrumb > * {
        white-space: nowrap;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    /* Current crumb pill — full emphasis on mobile, full-length scrollable */
    body.inkside-theme .ink-breadcrumbs__current,
    body.inkside-theme .woocommerce-breadcrumb > :last-child:not(a) {
        color: var(--ink-primary);
        font-weight: 700;
        background: var(--ink-primary-bg);
        padding: var(--ink-space-xs) var(--ink-space-sm);
        border-radius: var(--ink-radius-full);
        scroll-snap-align: end;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
    }
}

/* ── Print: keep textual separator ── */
@media print {
    body.inkside-theme .ink-breadcrumbs__sep::before {
        content: ' / ';
    }
}