
/* =========================================================
   Shopoint Best Sellers Grid v3.0
   Desktop 5 | Tablet 3 | Mobile 2
========================================================= */

.spbsc-root,
.spbsc-root *{
    box-sizing:border-box;
}

.spbsc-root{
    width:100vw;
    max-width:100vw;
    position:relative;
    left:50%;
    margin-left:-50vw;
    margin-right:-50vw;
    padding:0 18px 10px;
    font-family:inherit;
    color:#111;
    background:transparent;
    overflow:visible;
}

/* Heading */
.spbsc-top{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    width:100%;
}

.spbsc-heading-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex:1;
}

.spbsc-heading{
    margin:0;
    font-family:Georgia, "Times New Roman", serif;
    font-size:23px;
    line-height:1.1;
    font-weight:700;
    text-align:center;
    color:#111;
}

.spbsc-line{
    width:42px;
    height:1px;
    background:#D7A33D;
}

/* Promo */
.spbsc-promo{
    position:absolute;
    right:22px;
    top:3px;
    display:flex;
    align-items:center;
    gap:9px;
    background:#090909;
    border:1px solid #D7A33D;
    border-radius:5px;
    padding:7px 12px;
    min-width:180px;
}

.spbsc-promo-icon{
    font-size:25px;
    color:#D7A33D;
}

.spbsc-promo span:last-child{
    display:flex;
    flex-direction:column;
    line-height:1.08;
}

.spbsc-promo-title{
    font-size:11px;
    color:#D7A33D;
}

.spbsc-promo-text{
    margin-top:2px;
    font-size:8.5px;
    color:#fff;
}

/* Tabs */
.spbsc-tabs{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    flex-wrap:wrap;
    margin:0 0 14px;
}

.spbsc-tab{
    appearance:none;
    border:1px solid transparent;
    background:transparent;
    color:#111;
    border-radius:6px;
    padding:7px 18px;
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    box-shadow:none;
}

.spbsc-tab:hover{
    border-color:#dfc891;
}

.spbsc-tab.is-active{
    background:#D7A33D;
    border-color:#D7A33D;
    color:#fff;
}

/* Panels */
.spbsc-grid-panels,
.spbsc-panel{
    width:100%;
    height:auto;
    max-height:none;
    overflow:visible;
}

.spbsc-panel{
    display:none;
}

.spbsc-panel.is-active{
    display:block;
}

/* TRUE GRID */
.spbsc-product-grid{
    display:grid !important;
    grid-template-columns:repeat(5, minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:auto !important;
    gap:18px !important;

    width:100% !important;
    height:auto !important;
    max-height:none !important;

    overflow:visible !important;
    transform:none !important;
    transition:none !important;
}

/* Product card */
.spbsc-card{
    position:relative;
    display:flex !important;
    flex-direction:column;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:100%;

    margin:0 !important;
    padding:9px 11px 10px;

    background:#fff;
    border:1px solid #e7e7e7;
    border-radius:7px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.025);

    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
}

.spbsc-card-highlight{
    border-color:#e5c773;
    background:#fffaf0;
}

.spbsc-card-link{
    position:absolute;
    inset:0;
    z-index:1;
}

.spbsc-badge{
    position:absolute;
    left:10px;
    top:9px;
    z-index:3;
    padding:5px 7px;
    border-radius:3px;
    background:#D7A33D;
    color:#fff;
    font-size:8.5px;
    font-weight:700;
    line-height:1;
}

.spbsc-heart{
    position:absolute;
    right:10px;
    top:8px;
    z-index:3;
    color:#666;
    font-size:18px;
    pointer-events:none;
}

.spbsc-image{
    width:100%;
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#fff;
    margin-bottom:5px;
}

.spbsc-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.spbsc-body{
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:0;
    position:relative;
    z-index:2;
    pointer-events:none;
}

.spbsc-title{
    margin:2px 0 1px;
    min-height:29px;
    font-size:12px;
    font-weight:500;
    line-height:1.18;
    color:#111;
}

.spbsc-subtitle{
    min-height:12px;
    margin-bottom:8px;
    font-size:9px;
    line-height:1.2;
    color:#8b8b8b;
}

.spbsc-prices{
    display:flex;
    align-items:baseline;
    gap:8px;
    flex-wrap:wrap;
    margin-top:auto;
}

.spbsc-price{
    font-size:13px;
    font-weight:700;
    color:#111;
}

.spbsc-price.is-highlight{
    color:#F04438;
}

.spbsc-old-price{
    font-size:9px;
    color:#999;
    text-decoration:line-through;
}

.spbsc-rating{
    display:flex;
    align-items:center;
    gap:5px;
    margin-top:4px;
    line-height:1;
}

.spbsc-stars{
    color:#D7A33D;
    font-size:12px;
    letter-spacing:1px;
}

.spbsc-reviews{
    color:#777;
    font-size:9px;
}

.spbsc-cart-btn{
    position:relative;
    z-index:4;
    pointer-events:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:flex-end;
    min-width:112px;
    margin-top:5px;
    padding:7px 12px;
    border-radius:6px;
    background:#D7A33D;
    color:#fff !important;
    font-size:9.5px;
    line-height:1;
    text-decoration:none !important;
}

.spbsc-empty{
    grid-column:1/-1;
    width:100%;
    padding:30px;
    text-align:center;
    border:1px dashed #ddd;
    color:#777;
}

/* No carousel UI */
.spbsc-arrow,
.spbsc-prev,
.spbsc-next,
.spbsc-stage,
.spbsc-viewport{
    display:none !important;
}

/* Tablet */
@media (max-width:1024px){
    .spbsc-root{
        padding-left:12px;
        padding-right:12px;
    }

    .spbsc-product-grid{
        grid-template-columns:repeat(3, minmax(0,1fr)) !important;
        gap:14px !important;
    }

    .spbsc-promo{
        position:static;
        margin-left:14px;
    }
}

/* Mobile */
@media (max-width:767px){
    .spbsc-root{
        width:100vw;
        max-width:100vw;
        left:50%;
        margin-left:-50vw;
        margin-right:-50vw;
        padding-left:8px;
        padding-right:8px;
        overflow:visible;
    }

    .spbsc-top{
        display:block;
    }

    .spbsc-heading-wrap{
        gap:8px;
    }

    .spbsc-heading{
        font-size:17px;
        white-space:normal;
    }

    .spbsc-line{
        width:24px;
    }

    .spbsc-promo{
        width:max-content;
        max-width:100%;
        margin:10px auto 0;
        padding:7px 10px;
    }

    .spbsc-tabs{
        justify-content:flex-start;
        gap:8px;
        flex-wrap:nowrap;
        overflow-x:auto;
        margin-top:9px;
        padding:1px 2px 5px;
        scrollbar-width:none;
    }

    .spbsc-tabs::-webkit-scrollbar{
        display:none;
    }

    .spbsc-tab{
        flex:0 0 auto;
        padding:7px 14px;
        font-size:10px;
    }

    .spbsc-product-grid{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        grid-auto-flow:row !important;
        gap:10px !important;

        width:100% !important;
        height:auto !important;
        max-height:none !important;
        overflow:visible !important;
    }

    .spbsc-card{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        height:auto !important;
        padding:8px;
    }

    .spbsc-title{
        min-height:28px;
        font-size:10.5px;
    }

    .spbsc-subtitle{
        font-size:8.5px;
        margin-bottom:6px;
    }

    .spbsc-price{
        font-size:11.5px;
    }

    .spbsc-old-price{
        font-size:8px;
    }

    .spbsc-stars{
        font-size:10px;
        letter-spacing:.5px;
    }

    .spbsc-reviews{
        font-size:8px;
    }

    .spbsc-cart-btn{
        min-width:0;
        width:100%;
        font-size:9px;
        padding:7px 6px;
    }
}


/* =========================================================
   v3.1 SHOW MORE — 2 ROWS AT A TIME
========================================================= */
.spbsc-card.spbsc-row-hidden{display:none !important;}
.spbsc-show-more-wrap{width:100%;display:flex;justify-content:center;align-items:center;margin:22px 0 8px;}
.spbsc-show-more{appearance:none;border:1px solid #D7A33D;background:#D7A33D;color:#fff;min-width:160px;min-height:42px;padding:11px 24px;border-radius:5px;font-size:12px;line-height:1;font-weight:700;letter-spacing:.35px;text-transform:uppercase;cursor:pointer;transition:.2s ease;}
.spbsc-show-more:hover{background:#B9831F;border-color:#B9831F;color:#fff;}
.spbsc-show-more-wrap.is-complete{display:none !important;}
@media(max-width:767px){.spbsc-show-more-wrap{margin-top:16px}.spbsc-show-more{min-width:145px;min-height:40px;padding:10px 20px;font-size:11px;}}
