/**
 * Ella Breadcrumbs
 * Customize WooCommerce breadcrumb appearance
 */

.ella-breadcrumb {
    --zc-text: #4B5563;
    --zc-border: #E5E7EB;
    --zc-grey: #9CA3AF;
    --zc-black: #2F3035;
    --zc-white: #FFFFFF;

    color: var(--zc-text);
    font-size: 0.82rem;
    max-width: 100%;
    min-width: 0;
    position: relative;
}

.ella-breadcrumb-list {
    display: flex;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0.45rem 0.75rem;
    align-items: center;
    box-sizing: border-box;
    max-width: 100%;
    background: var(--zc-white);
    border: 1px solid var(--zc-border);
    border-radius: 999px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.ella-breadcrumb-list::-webkit-scrollbar {
    display: none;
}

.ella-breadcrumb-list:focus-visible {
    outline: 2px solid var(--zc-black);
    outline-offset: 2px;
}

.ella-breadcrumb-item {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.ella-breadcrumb-item:not(:last-child)::after {
    content: '›';
    font-weight: 600;
    color: var(--zc-grey);
    opacity: 0.75;
}

.ella-breadcrumb-item a {
    color: var(--zc-text);
    text-decoration: none;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.ella-breadcrumb-item a:hover {
    color: var(--zc-black);
    background: rgba(156, 163, 175, 0.16);
}

.ella-breadcrumb-item a:focus-visible {
    color: var(--zc-black);
    background: rgba(156, 163, 175, 0.16);
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ella-breadcrumb-item:last-child {
    color: var(--zc-black);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .ella-breadcrumb-item a {
        transition: none;
    }
}