/**
 * Zphyr Breadcrumbs Ella - Custom Styles
 * Customize WooCommerce breadcrumb appearance
 */

.zphyr-breadcrumb {
    font-size: 0.82rem;
    color: #4B5563;
    --zc-primary: #F198B3;
    --zc-secondary: #FF90BB;
    --zc-text: #4B5563;
    --zc-border: #E5E7EB;
    --zc-grey: #9CA3AF;
    --zc-black: #2F3035;
    --zc-white: #FFFFFF;
    position: relative;
}

.zphyr-breadcrumb-list {
    display: flex;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0.45rem 0.75rem;
    align-items: center;
    background: var(--zc-white);
    border: 1px solid var(--zc-border);
    border-radius: 999px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    -ms-overflow-style: none;       /* IE/Edge */
    scrollbar-width: none;          /* Firefox */
    scrollbar-color: transparent transparent;
}

.zphyr-breadcrumb-list::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

.zphyr-breadcrumb-list::-webkit-scrollbar-track,
.zphyr-breadcrumb-list::-webkit-scrollbar-thumb {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.zphyr-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    scroll-snap-align: start;
}

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

.zphyr-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;
}

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

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