/* BQ Shop by Category - frontend */
.bq-sbc-section,
.bq-sbc-section *{box-sizing:border-box}

.bq-sbc-section{
    position:relative;
    width:100vw;
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:30px 32px;
    background:#fff;
    overflow:hidden;
    font-family:'Space Grotesk',sans-serif;
    --bq-sbc-gap:18px;
}

.bq-sbc-section,
.bq-sbc-section a,
.bq-sbc-section img,
.bq-sbc-section span,
.bq-sbc-section h2{
    -webkit-user-select:none!important;
    -moz-user-select:none!important;
    -ms-user-select:none!important;
    user-select:none!important;
    -webkit-tap-highlight-color:transparent!important;
}

.bq-sbc-section img{
    -webkit-user-drag:none;
    pointer-events:none;
}

.bq-sbc-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:0 0 22px;
}

.bq-sbc-head h2{
    margin:0;
    color:var(--bq-sbc-title-color,#183b20);
    font:600 var(--bq-sbc-title-desktop,32px)/1.1 'Space Grotesk',sans-serif;
    letter-spacing:-.8px;
}

.bq-sbc-viewall{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--bq-sbc-color,#3DAA45);
    font-size:12px;
    font-weight:500;
    text-decoration:none!important;
    white-space:nowrap;
}

.bq-sbc-viewall svg,
.bq-sbc-arrow svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.bq-sbc-wrap{position:relative}

.bq-sbc-track{
    display:flex;
    gap:var(--bq-sbc-gap);
    align-items:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding:4px 2px 6px;
}

.bq-sbc-track::-webkit-scrollbar{display:none}

.bq-sbc-item{
    flex:0 0 calc((100% - (var(--bq-sbc-desktop) - 1) * var(--bq-sbc-gap)) / var(--bq-sbc-desktop));
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;
    color:#273229;
    text-align:center;
    text-decoration:none!important;
    outline:none!important;
    scroll-snap-align:start;
    transition:transform .13s cubic-bezier(.2,.8,.3,1);
}

.bq-sbc-circle{
    display:block;
    width:100%;
    aspect-ratio:var(--bq-sbc-ratio,1);
    padding:4px;
    border-width:var(--bq-sbc-stroke,1.9px);
    border-style:var(--bq-sbc-stroke-style,solid);
    border-color:var(--bq-sbc-color,#3DAA45);
    border-radius:var(--bq-sbc-radius,14px);
    overflow:hidden;
    background:#fff;
    transition:transform .24s ease,box-shadow .24s ease;
}

.bq-sbc-circle img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    border-radius:calc(max(0px, var(--bq-sbc-radius,14px) - 4px));
    transition:transform .28s ease;
}

.bq-sbc-name{
    display:block;
    width:100%;
    color:#273229;
    font-size:12px;
    line-height:1.25;
    font-weight:500;
    transition:color .2s ease;
}

.bq-sbc-item:active{transform:scale(.92)}

@media(hover:hover){
    .bq-sbc-item:hover .bq-sbc-circle{
        transform:translateY(-3px);
        box-shadow:0 7px 20px rgba(61,170,69,.11);
    }
    .bq-sbc-item:hover .bq-sbc-circle img{transform:scale(1.05)}
    .bq-sbc-item:hover .bq-sbc-name{color:var(--bq-sbc-color,#3DAA45)}
}

/* Grid mode */
.bq-sbc-mode-grid .bq-sbc-track{
    display:grid;
    grid-template-columns:repeat(var(--bq-sbc-desktop),minmax(0,1fr));
    overflow:visible;
}
.bq-sbc-mode-grid .bq-sbc-item{width:100%}

/* Transparent arrows */
.bq-sbc-arrow{
    position:absolute;
    top:42%;
    z-index:8;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid rgba(61,170,69,.25);
    border-radius:50%;
    background:rgba(255,255,255,.76);
    color:var(--bq-sbc-color,#3DAA45);
    box-shadow:0 4px 14px rgba(0,0,0,.05);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    cursor:pointer;
    opacity:.86;
    transform:translateY(-50%);
    transition:opacity .2s ease,transform .2s ease,background .2s ease;
}
.bq-sbc-arrow:hover{opacity:1;background:rgba(255,255,255,.94)}
.bq-sbc-arrow:active{transform:translateY(-50%) scale(.9)}
.bq-sbc-prev{left:5px}
.bq-sbc-next{right:5px}

@media(max-width:900px){
    .bq-sbc-section{padding:26px 18px;--bq-sbc-gap:15px}
    .bq-sbc-head h2{font-size:var(--bq-sbc-title-tablet,28px)}
    .bq-sbc-item{
        flex-basis:calc((100% - (var(--bq-sbc-tablet) - 1) * var(--bq-sbc-gap)) / var(--bq-sbc-tablet));
    }
    .bq-sbc-mode-grid .bq-sbc-track{
        grid-template-columns:repeat(var(--bq-sbc-tablet),minmax(0,1fr));
    }
}

@media(max-width:600px){
    .bq-sbc-section{
        padding:21px 12px;
        --bq-sbc-gap:11px;
    }
    .bq-sbc-head{margin-bottom:16px}
    .bq-sbc-head h2{font-size:var(--bq-sbc-title-mobile,23px);letter-spacing:-.5px}
    .bq-sbc-viewall{font-size:10px}
    .bq-sbc-item{
        flex-basis:calc((100% - (var(--bq-sbc-mobile) - 1) * var(--bq-sbc-gap)) / var(--bq-sbc-mobile));
        gap:7px;
    }
    .bq-sbc-name{font-size:9.5px}
    .bq-sbc-circle{padding:3px}
    .bq-sbc-mode-grid .bq-sbc-track{
        grid-template-columns:repeat(var(--bq-sbc-mobile),minmax(0,1fr));
    }
    .bq-sbc-arrow{
        width:30px;
        height:30px;
        top:41%;
    }
    .bq-sbc-arrow svg{width:13px;height:13px}
    .bq-sbc-prev{left:1px}
    .bq-sbc-next{right:1px}
}

@media(prefers-reduced-motion:reduce){
    .bq-sbc-track{scroll-behavior:auto}
    .bq-sbc-item,.bq-sbc-circle,.bq-sbc-circle img{transition:none}
}