/**
 * Category Column Browser - Ecliss Theme v2
 * Styles for the column-based category navigation
 */

/* ── Hide original BeRocket category list immediately (prevents FOUC) ── */
.bapf_sfilter[data-taxonomy="product_cat"] .bapf_body > ul {
    display: none !important;
}

/* ── Hide original BeRocket list (JS fallback) ── */
.ecliss-original-hidden {
    display: none !important;
}

/* ── Column container ── */
.ecliss-cat-columns {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
}

/* ── Single column — fixed width, columns stack to the right ── */
.ecliss-cat-col {
    flex: 0 0 250px;
    width: 250px;
    border: none;
    padding: 0 15px;
}

.ecliss-cat-col:first-child {
    padding-left: 0;
}

/* ── Column list — force single vertical stack, never multi-column ── */
.ecliss-cat-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    column-count: auto !important;
    columns: auto !important;
}

/* ── Single item — always full width, one per row ── */
.ecliss-cat-columns .ecliss-cat-col ul li.ecliss-cat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 !important;
    margin: 0 !important;
    margin-bottom: 3px !important;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #041E3A;
    transition: font-weight 0.15s ease;
    white-space: nowrap;
    width: 100%;
    flex-shrink: 0;
}

.ecliss-cat-columns .ecliss-cat-col ul li.ecliss-cat-item:first-child {
    padding-top: 0 !important;
}

.ecliss-cat-columns .ecliss-cat-col ul li.ecliss-cat-item:last-child {
    margin-bottom: 0 !important;
}

.ecliss-cat-item:hover {
    font-weight: 400;
}

/* ── Fake checkbox ── */
.ecliss-cat-check {
    display: inline-block;
    width: 15px;
    height: 15px;
    min-width: 15px;
    border: 1px solid #9E9E9E;
    border-radius: 0;
    background-color: #fff;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    position: relative;
    flex-shrink: 0;
}

/* ── Active state (selected) ── */
.ecliss-cat-item.active .ecliss-cat-check {
    background-color: #041E3A;
    border-color: #041E3A;
}

.ecliss-cat-item.active .ecliss-cat-check::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ecliss-cat-item.active .ecliss-cat-name {
    font-weight: 600;
}

/* ── Override bapf_body width for column mode — auto-size to columns ── */
.ecliss-column-mode .bapf_body,
.bapf_sfilter.ecliss-column-mode .bapf_body,
.berocket_single_filter_widget.berocket_hidden_clickable .bapf_sfilter.ecliss-column-mode .bapf_body,
.berocket_single_filter_widget.berocket_hidden_clickable .bapf_sfilter.ecliss-column-mode.bapf_ccolaps .bapf_body {
    width: auto !important;
    left: 0 !important;
    right: auto !important;
    box-sizing: border-box !important;
}

/* ── Responsive: Mobile drill-down (< 992px) ── */
@media screen and (max-width: 991px) {

    /* Container: no flex row, just show one column at a time */
    .ecliss-cat-columns {
        display: block;
        position: relative;
        overflow: hidden;
    }

    /* All columns hidden by default on mobile */
    .ecliss-cat-col {
        display: none;
        width: 100%;
        flex: none;
        padding: 0;
    }

    /* Only the active (visible) column is shown */
    .ecliss-cat-col.ecliss-mobile-visible {
        display: block;
    }

    /* Back button */
    .ecliss-mobile-back {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 0 14px 0;
        cursor: pointer;
        font-family: 'Barlow', sans-serif;
        font-size: 0.75rem;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: #041E3A;
        border-bottom: 1px solid #E1E5EC;
        margin-bottom: 10px;
    }

    .ecliss-mobile-back:before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        border-left: 1.5px solid #041E3A;
        border-bottom: 1.5px solid #041E3A;
        transform: rotate(45deg);
        flex-shrink: 0;
    }

    /* Body width override for mobile — readable width */
    .ecliss-column-mode .bapf_body,
    .bapf_sfilter.ecliss-column-mode .bapf_body,
    .berocket_single_filter_widget.berocket_hidden_clickable .bapf_sfilter.ecliss-column-mode .bapf_body,
    .berocket_single_filter_widget.berocket_hidden_clickable .bapf_sfilter.ecliss-column-mode.bapf_ccolaps .bapf_body {
        width: calc(100vw - 30px) !important;
        min-width: 300px !important;
        margin-left: 0 !important;
        left: 0 !important;
    }
}

/* Hide back button on desktop */
@media screen and (min-width: 992px) {
    .ecliss-mobile-back {
        display: none !important;
    }
}