.kk-fcg-ui{
    width:100%;
    margin:6px 0 24px;
}

.kk-fcg-switch{
    display:inline-flex;
    align-items:center;
    gap:3px;
    margin:0 0 18px;
    padding:3px;
    border:1px solid rgba(0,0,0,.09);
    border-radius:10px;
    background:#f5f5f5;
}

.kk-fcg-switch-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:6px 12px;
    border-radius:7px;
    color:#777!important;
    font-size:11px;
    line-height:1.3;
    text-decoration:none!important;
    white-space:nowrap;
}

.kk-fcg-switch-link.is-active{
    background:#fff;
    color:#222!important;
    font-weight:700;
    box-shadow:0 1px 5px rgba(0,0,0,.06);
}

/*
 * Important:
 * Only hide original output AFTER category AJAX completed successfully.
 * ALL mode never receives this class and has no showcase JS at all.
 */
body.kk-fcg-mode-categories.kk-fcg-categories-ready .kk-fc-loop-bar,
body.kk-fcg-mode-categories.kk-fcg-categories-ready .kk-fc-products-grid,
body.kk-fcg-mode-categories.kk-fcg-categories-ready nav.woocommerce-pagination{
    display:none!important;
}

.kk-fcg-root:empty{
    display:none;
}

.kk-fcg-loading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:55px;
    color:#888;
    font-size:11px;
}

.kk-fcg-loader{
    width:15px;
    height:15px;
    border:2px solid #ddd;
    border-top-color:#555;
    border-radius:50%;
    animation:kkfcg-spin .75s linear infinite;
}

@keyframes kkfcg-spin{
    to{transform:rotate(360deg)}
}

.kk-fcg-overview{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.kk-fcg-section{
    min-width:0;
}

.kk-fcg-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 0 10px;
}

.kk-fcg-section-head h2{
    margin:0!important;
    padding:0!important;
    font-size:15px!important;
    line-height:1.5!important;
    font-weight:700!important;
}

.kk-fcg-view-all{
    display:inline-flex;
    align-items:center;
    gap:5px;
    flex:0 0 auto;
    padding:4px 2px;
    color:#666!important;
    font-size:11px;
    line-height:1.4;
    text-decoration:none!important;
    white-space:nowrap;
}

.kk-fcg-carousel{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.kk-fcg-carousel::-webkit-scrollbar{
    display:none;
}

body.kk-filter-combo-page ul.products.kk-fcg-carousel-products{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:14px!important;
    width:max-content!important;
    min-width:100%!important;
    height:auto!important;
    margin:0!important;
    padding:0 0 3px!important;
}

body.kk-filter-combo-page ul.products.kk-fcg-carousel-products > li.product{
    flex:0 0 calc((min(1240px, 100vw) - 54px) / 4)!important;
    width:calc((min(1240px, 100vw) - 54px) / 4)!important;
    min-width:210px!important;
    max-width:300px!important;
    margin:0!important;
    float:none!important;
    clear:none!important;
    position:static!important;
    transform:none!important;
    scroll-snap-align:start;
}

@media(max-width:767px){
    .kk-fcg-ui{
        margin-bottom:18px;
    }

    .kk-fcg-switch{
        max-width:100%;
        overflow-x:auto;
        scrollbar-width:none;
        margin-bottom:14px;
    }

    .kk-fcg-switch::-webkit-scrollbar{
        display:none;
    }

    .kk-fcg-overview{
        gap:20px;
    }

    .kk-fcg-section-head h2{
        font-size:13px!important;
    }

    .kk-fcg-view-all{
        font-size:10.5px;
    }

    body.kk-filter-combo-page ul.products.kk-fcg-carousel-products{
        gap:9px!important;
        padding-inline-end:18px!important;
    }

    body.kk-filter-combo-page ul.products.kk-fcg-carousel-products > li.product{
        flex:0 0 43vw!important;
        width:43vw!important;
        min-width:145px!important;
        max-width:190px!important;
    }
}


/* 0.4.1 - same deterministic view switch at top and bottom */
.kk-fcg-switch-top{
    margin-bottom:18px;
}

.kk-fcg-bottom-switch-wrap{
    display:flex;
    justify-content:center;
    width:100%;
    margin-top:26px;
    padding-top:16px;
    border-top:1px solid rgba(0,0,0,.06);
}

.kk-fcg-switch-bottom{
    margin:0;
}

@media(max-width:767px){
    .kk-fcg-bottom-switch-wrap{
        margin-top:20px;
        padding-top:14px;
        overflow-x:auto;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .kk-fcg-bottom-switch-wrap::-webkit-scrollbar{
        display:none;
    }

    .kk-fcg-switch-bottom{
        flex:0 0 auto;
    }
}


/* 0.4.2 - clear way back after "مشاهده همه" of one carousel */
.kk-fcg-return-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    margin:0 0 16px;
    padding:10px 12px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:9px;
    background:#fafafa;
}

.kk-fcg-return-text{
    color:#666;
    font-size:11px;
    line-height:1.6;
}

.kk-fcg-return-link{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:6px 10px;
    border-radius:7px;
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.05);
    color:#222!important;
    font-size:11px;
    font-weight:700;
    line-height:1.3;
    text-decoration:none!important;
    white-space:nowrap;
}

@media(max-width:767px){
    .kk-fcg-return-bar{
        align-items:flex-start;
        flex-direction:column;
        gap:7px;
        margin-bottom:13px;
        padding:9px 10px;
    }

    .kk-fcg-return-link{
        width:100%;
        justify-content:center;
    }
}


/* 0.4.3 ---------------------------------------------------------------
 * Only ONE view switch is rendered.
 * In drilled "مشاهده همه" mode the return action sits beside that switch.
 */
.kk-fcg-bottom-switch-wrap,
.kk-fcg-switch-bottom,
.kk-fcg-return-bar{
    display:none!important;
}

.kk-fcg-top-controls{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 18px;
}

.kk-fcg-top-controls .kk-fcg-switch-top{
    margin:0;
}

.kk-fcg-return-link-inline{
    min-height:36px;
    margin:0;
    border:1px solid rgba(0,0,0,.08);
}

@media(max-width:767px){
    .kk-fcg-top-controls{
        align-items:stretch;
        flex-wrap:wrap;
        gap:7px;
        margin-bottom:14px;
    }

    .kk-fcg-top-controls .kk-fcg-switch-top{
        margin:0;
    }

    .kk-fcg-return-link-inline{
        width:auto;
        justify-content:center;
    }
}


/* 0.4.4 - BOTH top and bottom controls are intentionally visible */
.kk-fcg-bottom-switch-wrap,
.kk-fcg-switch-bottom,
.kk-fcg-bottom-controls-wrap{
    display:flex!important;
}

.kk-fcg-view-controls{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
}

.kk-fcg-view-controls-top{
    margin:0 0 18px;
}

.kk-fcg-view-controls-bottom,
.kk-fcg-bottom-controls-wrap{
    justify-content:center;
}

.kk-fcg-bottom-controls-wrap{
    width:100%;
    margin:24px 0 8px;
    padding-top:16px;
    border-top:1px solid rgba(0,0,0,.06);
}

.kk-fcg-view-controls .kk-fcg-switch{
    margin:0;
}

.kk-fcg-return-link-inline{
    display:inline-flex!important;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    min-height:36px;
    margin:0;
    border:1px solid rgba(0,0,0,.08);
}

@media(max-width:767px){
    .kk-fcg-view-controls{
        flex-wrap:wrap;
        gap:7px;
    }

    .kk-fcg-view-controls-top{
        margin-bottom:14px;
    }

    .kk-fcg-bottom-controls-wrap{
        margin-top:20px;
        padding-top:14px;
    }

    .kk-fcg-view-controls-bottom{
        justify-content:center;
    }
}


/* 0.4.5 - independent top/bottom controls, no wrapper duplication */
#kk-fcg-controls-top,
#kk-fcg-controls-bottom{
    display:flex!important;
}

#kk-fcg-controls-top{
    margin:0 0 18px;
}

#kk-fcg-controls-bottom{
    justify-content:center;
    margin:24px 0 8px;
    padding-top:16px;
    border-top:1px solid rgba(0,0,0,.06);
}

/* kill legacy wrappers from old versions if cached markup survives */
.kk-fcg-ui,
.kk-fcg-bottom-controls-wrap{
    display:contents;
}

@media(max-width:767px){
    #kk-fcg-controls-top{
        margin-bottom:14px;
    }

    #kk-fcg-controls-bottom{
        margin-top:20px;
        padding-top:14px;
    }
}


/* 0.4.6 - deterministic placement in both view modes */
#kk-fcg-controls-top{
    display:flex!important;
    margin:0 0 18px!important;
}

#kk-fcg-controls-bottom{
    display:flex!important;
    justify-content:center;
    margin:24px 0 8px!important;
    padding-top:16px;
    border-top:1px solid rgba(0,0,0,.06);
}

@media(max-width:767px){
    #kk-fcg-controls-top{
        margin-bottom:14px!important;
    }

    #kk-fcg-controls-bottom{
        margin-top:20px!important;
        padding-top:14px;
    }
}