/* ==========================================================
   THEBEST PRODUCT SHOWCASE
   v1.2
   ========================================================== */

.tbps-showcase {

    --tbps-accent: #ff747d;
    --tbps-radius: 16px;

    width: 100%;

    padding:
        42px 20px
        50px;

    background:
        #fffdfb;

    box-sizing:
        border-box;
}


.tbps-showcase *,
.tbps-showcase *::before,
.tbps-showcase *::after {

    box-sizing:
        border-box;
}


.tbps-container {

    width:
        100%;

    max-width:
        1680px;

    margin:
        0 auto;
}


/* ==========================================================
   HEADER
   ========================================================== */

.tbps-head {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        24px;

    margin-bottom:
        28px;
}


.tbps-head-copy {

    min-width:
        0;
}


.tbps-title {

    margin:
        0 !important;

    padding:
        0;

    color:
        #111;

    font-size:
        clamp(
            30px,
            2.3vw,
            44px
        );

    line-height:
        1.05;

    font-weight:
        800;

    letter-spacing:
        -1.2px;
}


.tbps-subtitle {

    margin:
        9px 0
        0 !important;

    color:
        #777;

    font-size:
        16px;

    line-height:
        1.5;
}


/* ==========================================================
   VIEW ALL
   ========================================================== */

.tbps-view-all {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        15px;

    padding-bottom:
        4px;

    border-bottom:
        1px solid #222;

    color:
        #111;

    text-decoration:
        none !important;

    white-space:
        nowrap;

    font-size:
        16px;

    line-height:
        1.4;

    transition:
        color .2s ease,
        border-color .2s ease;
}


.tbps-view-all:hover {

    color:
        var(--tbps-accent);

    border-color:
        var(--tbps-accent);
}


.tbps-view-arrow {

    display:
        inline-block;

    font-size:
        24px;

    line-height:
        1;

    transition:
        transform .2s ease;
}


.tbps-view-all:hover
.tbps-view-arrow {

    transform:
        translateX(3px);
}


/* ==========================================================
   DESKTOP LAYOUT
   Promo ~27%
   Products ~73%
   ========================================================== */

.tbps-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            300px,
            .92fr
        )
        minmax(
            0,
            2.55fr
        );

    align-items:
        start;

    gap:
        24px;
}


/* Promo OFF */

.tbps-no-promo
.tbps-layout {

    display:
        block;
}


/* ==========================================================
   PROMO
   ========================================================== */

.tbps-promo {

    position:
        relative;

    display:
        block;

    width:
        100%;

    height:
        470px;

    min-height:
        0;

    overflow:
        hidden;

    border:
        1px solid
        #f0e4df;

    border-radius:
        16px;

    background:
        #f8f3ef;

    box-shadow:
        0 5px 18px
        rgba(
            0,
            0,
            0,
            .035
        );

    text-decoration:
        none !important;
}


.tbps-promo picture {

    display:
        block;

    width:
        100%;

    height:
        100%;
}


.tbps-promo-img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform .4s ease;
}


.tbps-promo:hover
.tbps-promo-img {

    transform:
        scale(1.02);
}


.tbps-promo-placeholder {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        100%;

    padding:
        20px;

    background:
        #faf2ed;

    color:
        #9a8881;

    text-align:
        center;

    font-size:
        14px;
}


/* ==========================================================
   PRODUCTS DESKTOP
   ========================================================== */

.tbps-products {

    min-width:
        0;

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    align-items:
        start;

    gap:
        16px;
}


/*
 * Promo OFF:
 * vẫn dùng 4 cột,
 * desktop 8 SP = 2 hàng.
 */
.tbps-no-promo
.tbps-products {

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );
}


/* ==========================================================
   DESKTOP / TABLET LIMIT

   Product vượt desktop_num
   chỉ dành cho Mobile slider.
   ========================================================== */

@media
(min-width: 550px) {

    .tbps-desktop-extra {

        display:
            none !important;
    }
}


/* ==========================================================
   PRODUCT CARD
   ========================================================== */

.tbps-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    height:
        auto;

    margin:
        0;

    padding:
        0;

    overflow:
        hidden;

    border-radius:
        var(--tbps-radius);

    background:
        #fff;

    scroll-snap-align:
        start;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


/* BORDER */

.tbps-has-border
.tbps-card {

    border:
        1px solid
        #e9e6e4;
}


.tbps-no-border
.tbps-card {

    border:
        1px solid
        transparent;
}


/* ==========================================================
   SHADOW
   ========================================================== */

.tbps-shadow-none
.tbps-card {

    box-shadow:
        none;
}


.tbps-shadow-soft
.tbps-card {

    box-shadow:
        0 3px 12px
        rgba(
            0,
            0,
            0,
            .025
        ),

        0 12px 30px
        rgba(
            0,
            0,
            0,
            .035
        );
}


.tbps-shadow-medium
.tbps-card {

    box-shadow:
        0 5px 17px
        rgba(
            0,
            0,
            0,
            .045
        ),

        0 18px 38px
        rgba(
            0,
            0,
            0,
            .065
        );
}


@media
(hover: hover) {

    .tbps-card:hover {

        transform:
            translateY(-4px);

        border-color:
            #ddd5d1;

        box-shadow:
            0 8px 20px
            rgba(
                0,
                0,
                0,
                .05
            ),

            0 18px 38px
            rgba(
                0,
                0,
                0,
                .07
            );
    }
}


/* ==========================================================
   PRODUCT MEDIA
   ========================================================== */

.tbps-card-media {

    position:
        relative;

    width:
        100%;

    padding:
        11px
        11px
        0;
}


/* ==========================================================
   PRODUCT IMAGE
   ========================================================== */

.tbps-product-img {

    position:
        relative;

    display:
        block;

    width:
        100%;

    aspect-ratio:
        4 / 5;

    overflow:
        hidden;

    border-radius:
        calc(
            var(--tbps-radius)
            - 5px
        );

    background:
        #f7f3f0;

    text-decoration:
        none !important;
}


.tbps-img {

    display:
        block;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    object-fit:
        cover;

    object-position:
        center top;

    transition:
        transform .4s ease;
}


@media
(hover: hover) {

    .tbps-card:hover
    .tbps-img {

        transform:
            scale(1.025);
    }
}


/* ==========================================================
   BADGE
   ========================================================== */

.tbps-badge {

    position:
        absolute;

    z-index:
        5;

    top:
        20px;

    left:
        20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        50px;

    padding:
        6px 9px;

    border-radius:
        5px;

    background:
        var(--tbps-accent);

    color:
        #fff;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        .2px;
}


/* ==========================================================
   HEART
   ========================================================== */

.tbps-heart {

    position:
        absolute;

    z-index:
        5;

    top:
        18px;

    right:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .95
        );

    color:
        #222;

    font-size:
        22px;

    line-height:
        1;

    pointer-events:
        none;

    box-shadow:
        0 3px 10px
        rgba(
            0,
            0,
            0,
            .06
        );
}


/* ==========================================================
   CARD BODY
   ========================================================== */

.tbps-card-body {

    display:
        flex;

    flex-direction:
        column;

    padding:
        14px
        15px
        17px;
}


/* ==========================================================
   CATEGORY
   ========================================================== */

.tbps-category {

    margin:
        0 0
        5px;

    color:
        #898989;

    font-size:
        10px;

    line-height:
        1.3;

    font-weight:
        600;

    letter-spacing:
        .55px;

    text-transform:
        uppercase;
}


/* ==========================================================
   PRODUCT TITLE
   ========================================================== */

.tbps-product-title {

    min-height:
        44px;

    margin:
        0 0
        8px !important;

    padding:
        0;

    font-size:
        15px;

    line-height:
        1.45;

    font-weight:
        500;

    text-transform:
        none;
}


.tbps-product-title a {

    display:
        -webkit-box;

    overflow:
        hidden;

    color:
        #151515;

    text-decoration:
        none !important;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    transition:
        color .2s ease;
}


.tbps-product-title a:hover {

    color:
        var(--tbps-accent);
}


/* ==========================================================
   RATING
   ========================================================== */

.tbps-rating {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        nowrap;

    gap:
        6px;

    margin:
        2px 0
        7px;
}


.tbps-stars {

    display:
        inline-flex;

    flex-shrink:
        0;

    gap:
        1px;

    color:
        #dedede;

    font-size:
        12px;

    line-height:
        1;
}


.tbps-stars
.is-on {

    color:
        #f2a34c;
}


.tbps-rating-count {

    overflow:
        hidden;

    color:
        #999;

    font-size:
        10px;

    line-height:
        1.3;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/* ==========================================================
   PRICE
   ========================================================== */

.tbps-price {

    margin:
        0;

    color:
        #111;

    font-size:
        19px;

    line-height:
        1.25;

    font-weight:
        700;
}


.tbps-price
.woocommerce-Price-amount {

    color:
        inherit;
}


.tbps-price del {

    margin-right:
        5px;

    color:
        #aaa;

    font-size:
        12px;

    font-weight:
        400;
}


.tbps-price ins {

    color:
        #111;

    text-decoration:
        none;

    font-weight:
        700;
}


/* ==========================================================
   EMPTY
   ========================================================== */

.tbps-empty {

    padding:
        18px;

    border:
        1px dashed
        #bbb;

    background:
        #fff;

    color:
        #777;
}


/* ==========================================================
   LAPTOP
   ========================================================== */

@media
(max-width: 1250px) {


    .tbps-showcase {

        padding-left:
            16px;

        padding-right:
            16px;
    }


    .tbps-layout {

        grid-template-columns:
            minmax(
                250px,
                .8fr
            )
            minmax(
                0,
                2.5fr
            );

        gap:
            18px;
    }


    .tbps-promo {

        height:
            430px;
    }


    .tbps-products {

        gap:
            12px;
    }


    .tbps-card-media {

        padding:
            8px
            8px
            0;
    }


    .tbps-card-body {

        padding:
            11px
            11px
            14px;
    }


    .tbps-product-title {

        min-height:
            40px;

        font-size:
            13px;
    }


    .tbps-price {

        font-size:
            17px;
    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media
(min-width: 550px)
and
(max-width: 849px) {


    .tbps-showcase {

        padding:
            36px
            15px
            44px;
    }


    .tbps-head {

        margin-bottom:
            21px;
    }


    .tbps-layout {

        display:
            block;
    }


    .tbps-promo {

        width:
            100%;

        height:
            300px;

        margin-bottom:
            20px;

        border-radius:
            14px;
    }


    .tbps-products,
    .tbps-no-promo
    .tbps-products {

        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            14px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media
(max-width: 549px) {


    .tbps-showcase {

        overflow:
            hidden;

        padding:
            29px
            10px
            36px;
    }


    /* ======================================================
       HEADER
       ====================================================== */

    .tbps-head {

        align-items:
            flex-start;

        gap:
            10px;

        margin-bottom:
            17px;
    }


    .tbps-title {

        font-size:
            25px;

        letter-spacing:
            -.5px;
    }


    .tbps-subtitle {

        max-width:
            220px;

        margin-top:
            5px !important;

        font-size:
            11px;
    }


    .tbps-view-all {

        gap:
            6px;

        padding-bottom:
            3px;

        font-size:
            10px;
    }


    .tbps-view-arrow {

        font-size:
            17px;
    }


    /* ======================================================
       LAYOUT
       ====================================================== */

    .tbps-layout {

        display:
            block;
    }


    /* ======================================================
       PROMO MOBILE
       ====================================================== */

    .tbps-mobile-promo-hide
    .tbps-promo {

        display:
            none;
    }


    .tbps-mobile-promo-show
    .tbps-promo {

        display:
            block;

        width:
            100%;

        height:
            170px;

        min-height:
            170px;

        margin-bottom:
            16px;

        border-radius:
            11px;
    }


    .tbps-mobile-promo-show
    .tbps-promo-img {

        object-fit:
            cover;

        object-position:
            center;
    }


    /* ======================================================
       MOBILE SLIDER

       Native scroll
       Không Flickity
       Không JS
       ====================================================== */

    .tbps-products,
    .tbps-no-promo
    .tbps-products {

        display:
            flex;

        align-items:
            stretch;

        flex-wrap:
            nowrap;

        gap:
            10px;

        width:
            100%;

        max-width:
            100%;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        padding:
            0 1px
            9px;

        margin:
            0;

        scroll-snap-type:
            x mandatory;

        scroll-padding-left:
            1px;

        -webkit-overflow-scrolling:
            touch;

        overscroll-behavior-inline:
            contain;

        scrollbar-width:
            none;
    }


    .tbps-products::-webkit-scrollbar {

        display:
            none;
    }


    /**
     * Khoảng 2 card + hé card kế.
     */
    .tbps-products
    .tbps-card {

        display:
            flex !important;

        flex:
            0 0 46%;

        width:
            46%;

        max-width:
            46%;

        min-width:
            0;

        scroll-snap-align:
            start;

        scroll-snap-stop:
            normal;
    }


    /* ======================================================
       PRODUCT CARD MOBILE
       ====================================================== */

    .tbps-card {

        border-radius:
            10px;
    }


    .tbps-card-media {

        padding:
            6px
            6px
            0;
    }


    .tbps-product-img {

        aspect-ratio:
            4 / 5;

        border-radius:
            7px;
    }


    /* Badge */

    .tbps-badge {

        top:
            12px;

        left:
            12px;

        min-width:
            40px;

        padding:
            5px
            6px;

        font-size:
            8px;
    }


    /* Heart */

    .tbps-heart {

        top:
            10px;

        right:
            10px;

        width:
            27px;

        height:
            27px;

        font-size:
            17px;
    }


    /* Body */

    .tbps-card-body {

        padding:
            9px
            8px
            11px;
    }


    /* Category */

    .tbps-category {

        margin-bottom:
            3px;

        font-size:
            8px;
    }


    /* Title */

    .tbps-product-title {

        min-height:
            36px;

        margin-bottom:
            5px !important;

        font-size:
            11px;

        line-height:
            1.38;
    }


    /* Rating */

    .tbps-rating {

        gap:
            3px;

        margin:
            1px 0
            6px;
    }


    .tbps-stars {

        font-size:
            9px;
    }


    /**
     * Mobile bỏ "(0 đánh giá)"
     * cho đỡ chật.
     */
    .tbps-rating-count {

        display:
            none;
    }


    /* Price */

    .tbps-price {

        font-size:
            14px;
    }


    .tbps-price del {

        display:
            block;

        margin:
            0 0
            2px;

        font-size:
            9px;
    }

}