/* ── Base ─────────────────────────────────────────────────────────── */
.wc-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    position: relative;
}

.wc-breadcrumbs .wcb-full-list {
    display: contents; /* children flow inline as if wrapper didn't exist */
}

.wc-breadcrumbs .item {
    opacity: .6;
    transition: color .25s, opacity .25s;
    text-decoration: none;
}

.wc-breadcrumbs .item.current {
    opacity: 1;
    font-weight: 600;
    min-width: 0;
}

/* Non-linked current item — not clickable */
.wc-breadcrumbs span.item.current {
    pointer-events: none;
}

.wc-breadcrumbs .sep {
    display: inline-flex;
    align-items: center;
    opacity: .4;
    font-size: .75em;
    line-height: 1;
}

.wc-breadcrumbs .sep svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* ── Normal mode — wrap to next line ─────────────────────────────── */
@media (max-width: 767px) {
    .wc-breadcrumbs.mode-normal {
        flex-wrap: wrap;
    }
}


.wc-breadcrumbs.mode-back .wcb-back-btn {
    display: none; /* shown only on mobile via media query */
    align-items: center;
    gap: .3em;
}

.wc-breadcrumbs.mode-back .wcb-back-btn i,
.wc-breadcrumbs.mode-back .wcb-back-btn svg {
    font-size: .8em;
    width: .8em;
    height: .8em;
}

@media (max-width: 767px) {
    .wc-breadcrumbs.mode-back .wcb-back-btn {
        display: inline-flex;
    }
    .wc-breadcrumbs.mode-back .wcb-full-list {
        display: none;
    }
}

/* ── Swipe mode ───────────────────────────────────────────────────── */
.wc-breadcrumbs.mode-swipe {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.wc-breadcrumbs.mode-swipe::-webkit-scrollbar { display: none; }
.wc-breadcrumbs.mode-swipe .item { scroll-snap-align: center; }

/* ── Truncate mode ────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .wc-breadcrumbs.mode-truncate {
        flex-wrap: nowrap;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
    }

    /* all items hidden by default, JS will reveal what fits */
    .wc-breadcrumbs.mode-truncate .wcb-full-list > .item,
    .wc-breadcrumbs.mode-truncate .wcb-full-list > .sep {
        visibility: hidden;
        position: absolute;
    }

    /* JS adds .wcb-visible to items/seps that fit */
    .wc-breadcrumbs.mode-truncate .wcb-full-list > .wcb-visible {
        visibility: visible;
        position: static;
    }

    /* ── Ellipsis button — sits at the START of the row ── */
    .wc-breadcrumbs.mode-truncate {
        flex-direction: row;
    }
    .wc-breadcrumbs.mode-truncate .wcb-ellipsis {
        order: -1; /* always first */
        display: inline-flex;
        align-items: center;
        opacity: .5;
        flex-shrink: 0;
        cursor: pointer;
        position: relative;
        padding: 2px 4px;
        border-radius: 3px;
        transition: opacity .2s, background .2s;
        user-select: none;
    }
    .wc-breadcrumbs.mode-truncate .wcb-ellipsis:hover,
    .wc-breadcrumbs.mode-truncate .wcb-ellipsis.wcb-tip-open {
        opacity: 1;
    }

    /* ellipsis hidden when everything fits */
    .wc-breadcrumbs.mode-truncate .wcb-ellipsis.wcb-hidden {
        display: none;
    }

    /* ── Tooltip popup ── */
    .wcb-truncate-tip {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 0;
        z-index: 9999;
        background: #fff;
        border: 1px solid rgba(0,0,0,.12);
        border-radius: 6px;
        box-shadow: 0 4px 16px rgba(0,0,0,.14);
        padding: 8px 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        white-space: nowrap;
        pointer-events: auto;
        /* animate */
        opacity: 0;
        transform: translateY(4px);
        transition: opacity .18s, transform .18s;
    }
    .wcb-truncate-tip.wcb-tip-visible {
        opacity: 1;
        transform: translateY(0);
    }
    .wcb-truncate-tip a,
    .wcb-truncate-tip span {
        font-size: .875em;
        color: inherit;
        text-decoration: none;
        opacity: .7;
        transition: opacity .15s;
    }
    .wcb-truncate-tip a:hover { opacity: 1; text-decoration: underline; }

    /* small caret under the popup, aligned to ellipsis */
    .wcb-truncate-tip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 14px;
        border: 6px solid transparent;
        border-top-color: #fff;
        filter: drop-shadow(0 1px 0 rgba(0,0,0,.1));
    }
}

/* ── Smart UX mode ────────────────────────────────────────────────── */
.wc-breadcrumbs.mode-smart {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.wc-breadcrumbs.mode-smart::-webkit-scrollbar { display: none; }

/* ── Dropdown mode ────────────────────────────────────────────────── */
.wc-breadcrumbs.mode-dropdown .wcb-dropdown-toggle {
    display: none;
}

@media (max-width: 767px) {
    /* Collapsed state: show Home › … › Current */
    .wc-breadcrumbs.mode-dropdown:not(.wcb-open) .wcb-full-list > .item:not(.current):not(:first-child),
    .wc-breadcrumbs.mode-dropdown:not(.wcb-open) .wcb-full-list > .sep:not(:first-of-type):not(:last-of-type) {
        display: none;
    }

    .wc-breadcrumbs.mode-dropdown:not(.wcb-open) .wcb-dropdown-toggle {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        opacity: .5;
        padding: 0 2px;
        font-size: 1.1em;
        line-height: 1;
        user-select: none;
    }

    /* Expanded state: show all, hide toggle */
    .wc-breadcrumbs.mode-dropdown.wcb-open .wcb-dropdown-toggle {
        display: none;
    }

    .wc-breadcrumbs.mode-dropdown.wcb-open {
        flex-wrap: wrap;
    }
}