/* =========================================================
   HERO
   Header is fixed at 82px on desktop, so the hero must
   start below it. Keep the hero content safely inside.
========================================================= */

.btb-category-hero{
    padding-top: 50px;
    position:relative;
    margin-top:85px !important;
    min-height:330px;
    overflow:hidden;
    background:#111;
    color:#fff;
}

.btb-hero-image{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:.58;
}

.btb-hero-overlay{
    position:absolute;
    inset:0;

    background: transparent;
}

.btb-category-hero .container{
    position:relative;
    z-index:2;
}

.btb-category-hero .btb-breadcrumb{
    display:block !important;
    padding-top:23px !important;
}

.btb-category-hero .btb-hero-content{
    display:block !important;
    padding:42px 0 45px !important;
}

.btb-breadcrumb{
    padding-top:23px;
    font-size:13px;
    color:#d5d5d5;
}

.btb-breadcrumb a{
    color:#fff;
    text-decoration:none;
}

.btb-breadcrumb span{
    margin:0 8px;
}

.btb-hero-content{
    max-width:680px;
    padding:42px 0 45px;
}

.btb-eyebrow{
    margin-bottom:12px;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#ddd;
}

.btb-hero-content h1{
    margin:0 0 13px;
    font-size:48px;
    line-height:1.05;
    font-weight:800;
    color:#fff;
}

.btb-hero-content p{
    max-width:600px;
    margin:0;
    color:#ededed;
    font-size:17px;
    line-height:1.65;
}

.btb-hero-points{
    display:flex;
    flex-wrap:wrap;
    gap:10px 24px;
    margin-top:24px;
}

.btb-hero-points span{
    color:#fff;
    font-size:11px;
    font-weight:700;
}


/* =========================================================
   PRODUCTS SECTION
========================================================= */

.btb-products-section{
    padding:30px 0 60px;
    background:#f5f6f7;
}

.btb-products-section .row{
    display:flex;
    align-items:flex-start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.btb-sidebar{
    position:sticky;
    top:20px;
}

.btb-sidebar-heading{
    padding:17px 16px;
    background:#fff;
    border:1px solid #e1e3e5;
    font-size:17px;
    font-weight:800;
}

.btb-category-list{
    background:#fff;
    border-left:1px solid #e1e3e5;
    border-right:1px solid #e1e3e5;
    border-bottom:1px solid #e1e3e5;
}

.btb-category-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    padding:13px 14px;

    border-bottom:1px solid #ececec;

    color:#292929;

    text-decoration:none !important;

    font-size:13px;
    line-height:1.3;

    transition:
        background .2s ease,
        color .2s ease;
}

.btb-category-item:last-child{
    border-bottom:0;
}

.btb-category-item b{
    flex:0 0 auto;
    font-size:19px;
    line-height:1;
    font-weight:400;
}

.btb-category-item{
    position:relative;
    overflow:hidden;
    transition:
        background .25s ease,
        color .25s ease,
        padding-right .25s ease;
}

.btb-category-item b{
    width:0;
    height:30px;
    margin-left:0;
    overflow:hidden;
    opacity:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    color:#fff;
    font-size:0;
    font-weight:900;
    line-height:1;
    transform:translateX(8px);
    transition:
        width .25s ease,
        margin-left .25s ease,
        opacity .2s ease,
        transform .25s ease;
}

.btb-category-item b::after{
    content:"↗";
    font-size:16px;
    line-height:1;
}

.btb-category-item:hover,
.btb-category-item.active{
    background:var(--tr-red);
    color:#fff;
    font-weight:700;
    padding-right:18px;
}

.btb-category-item:hover b,
.btb-category-item.active b{
    width:20px;
    margin-left:3px;
    opacity:1;
    transform:translateX(0);
}


/* =========================================================
   QUOTE BOX
========================================================= */

.btb-quote-box{
    position:relative;

    min-height:245px;

    margin-top:22px;
    padding:25px 20px;

    overflow:hidden;

    background:
        linear-gradient(
            140deg,
            #111,
            #242424
        );

    color:#fff;
}

.btb-quote-box:after{
    content:"";

    position:absolute;

    width:190px;
    height:190px;

    right:-75px;
    bottom:-80px;

    border:25px solid rgba(255,255,255,.05);

    border-radius:50%;
}

.btb-quote-box small{
    position:relative;
    z-index:2;

    color:#aaa;

    font-size:10px;
    font-weight:700;

    letter-spacing:2px;
}

.btb-quote-box h3{
    position:relative;
    z-index:2;

    margin:12px 0 10px;

    color:#fff;

    font-size:27px;
    line-height:1;

    font-weight:800;
}

.btb-quote-box p{
    position:relative;
    z-index:2;

    margin:0;

    color:#c8c8c8;

    font-size:13px;
    line-height:1.5;
}

.btb-quote-box a{
    position:relative;
    z-index:2;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:18px;

    min-height:40px;
    padding:0 17px;

    gap:0;
    overflow:hidden;

    background:var(--tr-red);
    border:1px solid var(--tr-red);
    color:#fff;

    font-size:10px;
    font-weight:800;

    text-decoration:none;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease,
        padding-right .25s ease;
}

.btb-quote-box a::after{
    content:"↗";

    position:absolute;
    right:14px;
    top:50%;

    transform:
        translateY(-50%)
        translateX(8px);

    opacity:0;

    font-size:16px;
    font-weight:400;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.btb-quote-box a:hover{
    padding-right:42px;

    background:#090c10;
    border-color:#090c10;
    color:#fff;

    transform:translateY(-2px);
}

.btb-quote-box a:hover::after{
    opacity:1;

    transform:
        translateY(-50%)
        translateX(0);
}


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

.btb-product-content{
    min-width:0;
}

.btb-products-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    min-height:45px;

    margin-bottom:15px;
}

.btb-results{
    color:#333;
    font-size:13px;
}

.btb-sort select{
    width:155px;
    height:40px;

    padding:0 12px;

    border:1px solid #d8dade;
    border-radius:5px;

    background:#fff;

    color:#222;

    outline:none;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.btb-product-grid{
    display:grid;

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

    gap:15px;
}


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

.btb-product-card{
    position:relative;

    overflow:hidden;

    background:#fff;

    border:1px solid #e1e3e5;

    border-radius:7px;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.btb-product-card:hover{
    transform:translateY(-3px);

    box-shadow:
        0 12px 28px rgba(0,0,0,.09);
}


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

.btb-product-image{
   position: relative;
    display: block;
    width: 100%;
    height: 245px;
    overflow: hidden;
    background: #e5e5e5;
    text-align: center;
}

.btb-product-image img{
  display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 0;
    box-sizing: border-box;
    transition: transform .3s ease;
}

.btb-product-card:hover
.btb-product-image img{
    transform:scale(1.04);
}


/* =========================================================
   NO IMAGE
========================================================= */

.btb-no-image{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    color:#999;

    font-size:11px;
    font-weight:700;
}


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

.btb-product-badge{
    position:absolute;

    top:12px;
    left:12px;

    padding:6px 9px;

    background:#111;
    color:#fff;

    font-size:9px;
    font-weight:800;

    letter-spacing:.5px;
}


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

.btb-heart{
    position:absolute;

    top:12px;
    right:12px;

    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #ddd;
    border-radius:50%;

    background:#fff;

    color:#111;

    font-size:20px;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.btb-product-info{
    padding:17px;
}

.btb-product-info h2{
    min-height:39px;

    margin:0;

    font-size:15px;
    line-height:1.35;

    font-weight:700;
}

.btb-product-info h2 a{
    color:#151515;
    text-decoration:none;
}

.btb-art{
    margin-top:6px;

    color:#888;

    font-size:11px;
}

.btb-wholesale{
    min-height:32px;

    margin-top:13px;

    color:#555;

    font-size:9px;
    font-weight:700;

    line-height:1.4;
}

.btb-wholesale span{
    margin-right:4px;

    color:#111;
}


/* =========================================================
   VIEW PRODUCT
========================================================= */

.btb-view-product{
    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:0;

    width:100%;
    height:39px;

    margin-top:12px;
    padding:0 17px;

    overflow:hidden;

    background:var(--tr-red);
    border:1px solid var(--tr-red);

    color:#fff !important;

    text-decoration:none !important;

    font-size:10px;
    font-weight:800;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease,
        padding-right .25s ease;
}

.btb-view-product:hover{
    padding-right:42px;

    background:#090c10;
    border-color:#090c10;
    color:#fff !important;

    transform:translateY(-2px);
}

.btb-view-product span{
    position:absolute;

    right:14px;
    top:50%;

    width:0;
    height:30px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    margin-left:0;

    opacity:0;

    color:#fff;
    font-size:16px;
    font-weight:400;
    line-height:1;

    transform:
        translateY(-50%)
        translateX(8px);

    transition:
        width .25s ease,
        margin-left .25s ease,
        opacity .2s ease,
        transform .25s ease;
}

.btb-view-product:hover span{
    width:20px;
    margin-left:3px;
    opacity:1;

    transform:
        translateY(-50%)
        translateX(0);
}


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

.btb-empty-products{
    grid-column:1 / -1;

    padding:60px 20px;

    background:#fff;

    border:1px solid #ddd;

    text-align:center;
}

.btb-empty-products h3{
    margin:0 0 8px;

    font-size:20px;
}

.btb-empty-products p{
    margin:0;

    color:#777;

    font-size:13px;
}


/* =========================================================
   PAGINATION
========================================================= */

.btb-pagination{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:6px;

    margin-top:25px;
}

.btb-pagination a,
.btb-pagination span{
    display:flex;

    align-items:center;
    justify-content:center;

    width:37px;
    height:37px;

    border:1px solid #d9dcdf;
    border-radius:4px;

    background:#fff;

    color:#222;

    font-size:12px;

    text-decoration:none;
}

.btb-pagination .active{
    border-color:var(--tr-red);

    background:var(--tr-red);

    color:#fff;
}

.btb-pagination a{
    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;
}

.btb-pagination a:hover{
    border-color:var(--tr-red);
    background:var(--tr-red);
    color:#fff;

    transform:translateY(-2px);
}

.btb-pagination .disabled{
    color:#aaa;
}


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

.btb-category-description{
    margin-top:30px;

    padding:25px;

    background:#fff;

    border:1px solid #e1e3e5;

    color:#555;

    font-size:13px;
    line-height:1.8;
}


/* =========================================================
   MOBILE FILTER BAR
========================================================= */

.btb-mobile-filter-bar{
    display:none;
}


/* =========================================================
   FILTER OVERLAY
========================================================= */

.btb-filter-overlay{
    display:none;

    position:fixed;

    inset:0;

    z-index:9998;

    background:rgba(0,0,0,.58);
}

.btb-filter-overlay.open{
    display:block;
}


/* =========================================================
   FILTER DRAWER
========================================================= */

.btb-filter-drawer{
    position:fixed;

    top:0;
    left:0;

    z-index:9999;

    width:340px;
    max-width:88vw;
    height:100vh;

    overflow-y:auto;

    background:#fff;

    box-shadow:
        10px 0 35px rgba(0,0,0,.25);

    transform:translateX(-105%);

    transition:
        transform .3s ease;
}

.btb-filter-drawer.open{
    transform:translateX(0);
}


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

.btb-drawer-header{
    display:flex;

    align-items:center;
    justify-content:space-between;

    height:65px;

    padding:0 20px;

    background:#111;

    color:#fff;

    font-size:17px;
}

.btb-drawer-header button{
    border:0;

    background:transparent;

    color:#fff;

    font-size:31px;

    line-height:1;

    cursor:pointer;
}


/* =========================================================
   DRAWER CONTENT
========================================================= */

.btb-drawer-content{
    padding:0;
}

.btb-drawer-content
.btb-category-item{
    padding:16px 20px;
}


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

.btb-mobile-quote{
    margin:20px;

    padding:22px;

    background:#111;

    color:#fff;
}

.btb-mobile-quote strong{
    font-size:18px;
}

.btb-mobile-quote p{
    margin:8px 0 15px;

    color:#bbb;

    font-size:13px;
}

.btb-mobile-quote a{
    display:inline-block;

    padding:10px 14px;

    background:#fff;

    color:#111;

    font-size:10px;
    font-weight:800;

    text-decoration:none;
}


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

@media(max-width:991px){

    .btb-product-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .btb-product-image{
        height:225px;
    }

    .btb-hero-content h1{
        font-size:40px;
    }

}


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

@media(max-width:767px){

    .btb-category-hero{
        margin-top:68px !important;
    }

    .btb-category-hero .btb-breadcrumb{
        padding-top:16px !important;
    }

    .btb-category-hero .btb-hero-content{
        padding:27px 0 30px !important;
    }


    .btb-category-hero{
        min-height:280px;
    }


    .btb-breadcrumb{
        padding-top:16px;

        font-size:12px;
    }


    .btb-hero-content{
        padding:27px 0 30px;
    }


    .btb-eyebrow{
        font-size:10px;

        letter-spacing:1.5px;
    }


    .btb-hero-content h1{
        font-size:32px;

        line-height:1.1;
    }


    .btb-hero-content p{
        font-size:14px;

        line-height:1.55;
    }


    .btb-hero-points{
        gap:8px 15px;

        margin-top:17px;
    }


    .btb-hero-points span{
        font-size:9px;
    }


    /* -----------------------------------------
       MOBILE FILTER BUTTON
    ----------------------------------------- */

    .btb-mobile-filter-bar{
        display:block;

        padding:12px 15px;

        background:#fff;

        border-bottom:1px solid #ddd;
    }


    .btb-mobile-filter-bar button{
        position:relative;

        display:block;

        width:100%;
        height:48px;

        padding:0 15px;

        border:1px solid var(--tr-red);
        border-radius:4px;

        background:var(--tr-red);

        color:#fff;

        text-align:left;

        font-size:11px;
        font-weight:800;

        cursor:pointer;

        overflow:hidden;

        transition:
            background .25s ease,
            border-color .25s ease,
            padding-right .25s ease,
            transform .25s ease;
    }

    .btb-mobile-filter-bar button::after{
        content:"↗";

        position:absolute;
        right:14px;
        top:50%;

        transform:
            translateY(-50%)
            translateX(8px);

        opacity:0;

        font-size:16px;
        font-weight:400;

        transition:
            opacity .25s ease,
            transform .25s ease;
    }

    .btb-mobile-filter-bar button:hover{
        padding-right:42px;

        background:#090c10;
        border-color:#090c10;

        transform:translateY(-2px);
    }

    .btb-mobile-filter-bar button:hover::after{
        opacity:1;

        transform:
            translateY(-50%)
            translateX(0);
    }


    .btb-filter-icon{
        margin-right:9px;

        font-size:15px;
    }


    .btb-filter-arrow{
        float:right;

        font-size:18px;
    }


    /* -----------------------------------------
       MAIN PRODUCTS
    ----------------------------------------- */

    .btb-products-section{
        padding:15px 0 40px;
    }


    .btb-products-section .row{
        display:block;
    }


    .btb-desktop-sidebar{
        display:none;
    }


    .btb-product-content{
        width:100%;
    }


    /* -----------------------------------------
       PRODUCT HEADER
    ----------------------------------------- */

    .btb-products-header{
        min-height:auto;

        margin-bottom:12px;

        gap:8px;
    }


    .btb-results{
        font-size:10px;
    }


    .btb-sort select{
        width:135px;
        height:38px;

        font-size:10px;
    }


    /* -----------------------------------------
       PRODUCT GRID
    ----------------------------------------- */

    .btb-product-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px;
    }


    .btb-product-image{
        height:170px;
    }


    .btb-product-info{
        padding:11px;
    }


    .btb-product-info h2{
        min-height:34px;

        font-size:11px;
    }


    .btb-art{
        font-size:9px;
    }


    .btb-wholesale{
        min-height:38px;

        margin-top:9px;

        font-size:7px;
    }


    .btb-view-product{
        height:35px;

        margin-top:9px;

        font-size:8px;
    }


    .btb-view-product span{
        font-size:14px;
    }


    .btb-heart{
        top:8px;
        right:8px;

        width:28px;
        height:28px;

        font-size:17px;
    }


    .btb-product-badge{
        top:8px;
        left:8px;

        padding:5px 7px;

        font-size:7px;
    }


    /* -----------------------------------------
       PAGINATION
    ----------------------------------------- */

    .btb-pagination{
        margin-top:20px;
    }


    .btb-pagination a,
    .btb-pagination span{
        width:34px;
        height:34px;
    }


    /* -----------------------------------------
       DESCRIPTION
    ----------------------------------------- */

    .btb-category-description{
        margin-top:20px;

        padding:18px;

        font-size:12px;
    }

}


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

@media(max-width:430px){

    .btb-hero-content h1{
        font-size:28px;
    }


    .btb-product-image{
        height:150px;
    }


    .btb-product-info{
        padding:10px;
    }


    .btb-product-info h2{
        font-size:10px;
    }


    .btb-wholesale{
        font-size:7px;
    }


    .btb-view-product{
        font-size:8px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:340px){

    .btb-product-grid{
        grid-template-columns:1fr;
    }


    .btb-product-image{
        height:220px;
    }

}


/* =================================================
   CATEGORY PAGE CONTAINER
   Replaces the Bootstrap container dependency.
================================================= */

.btb-category-main .container,
.btb-category-hero .container,
.btb-child-categories-section .container,
.btb-products-section .container{
    width:min(1240px,92%);
    margin-left:auto;
    margin-right:auto;
}

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

        .category-error{
            min-height:60vh;

            display:flex;
            align-items:center;
            justify-content:center;

            padding:60px 20px;

            text-align:center;
        }


        .category-error-box{
            max-width:560px;
            width:100%;

            padding:55px 30px;

            background:#fff;

            border:
                1px solid
                var(--tr-line);
        }


        .category-error-box h1{
            margin:0 0 15px;

            font-size:32px;
            font-weight:800;
        }


        .category-error-box p{
            margin:8px 0;

            color:var(--tr-muted);
        }


        .category-error-box a{
            display:inline-flex;
            align-items:center;
            justify-content:center;

            margin-top:22px;

            padding:
                13px
                24px;

            background:
                var(--tr-black);

            color:#fff;

            text-decoration:none;

            font-size:12px;
            font-weight:800;
        }


        /* =================================================
           HERO
        ================================================= */

        .btb-category-hero{
            position:relative;
            overflow:hidden;
        }


        .btb-category-hero
        .btb-hero-content{
            position:relative;
            z-index:2;
        }


        /* =================================================
           BREADCRUMB
        ================================================= */

        .btb-category-hero
        .btb-breadcrumb{
            position:relative;
            z-index:2;

            display:flex;
            align-items:center;
            flex-wrap:wrap;

            gap:8px;

            margin-bottom:16px;

            font-size:12px;
            line-height:1.5;
        }


        .btb-category-hero
        .btb-breadcrumb a{
            color:
                rgba(255,255,255,.78);

            text-decoration:none;

            transition:
                color .2s ease;
        }


        .btb-category-hero
        .btb-breadcrumb a:hover{
            color:#fff;
        }


        .btb-category-hero
        .btb-breadcrumb span{
            color:
                rgba(255,255,255,.75);
        }


        .btb-category-hero
        .btb-breadcrumb
        span:last-child{
            color:#fff;
            font-weight:700;
        }


        /* =================================================
           CATEGORY DESCRIPTION IN HERO
        ================================================= */

        .btb-category-hero
        .btb-category-description-text{
            max-width:780px;

            margin:
                16px
                0
                0;

            color:
                rgba(255,255,255,.88);

            font-size:15px;
            line-height:1.7;
        }


        /* =================================================
           PARENT CATEGORY SECTION
        ================================================= */

        .btb-child-categories-section{
            padding:75px 0;
        }


        .btb-child-categories-heading{
            margin-bottom:35px;
        }


        .btb-child-categories-heading h2{
            margin:0 0 10px;

            color:var(--tr-black);

            font-size:32px;
            font-weight:800;
        }


        .btb-child-categories-heading p{
            margin:0;

            color:var(--tr-muted);

            font-size:14px;
        }


        /* =================================================
           CHILD CATEGORY GRID
        ================================================= */

        .btb-child-category-grid{
            display:grid;

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

            gap:25px;
        }


        /* =================================================
           CHILD CATEGORY CARD
        ================================================= */

        .btb-child-category-card{
            position:relative;

            display:block;

            overflow:hidden;

            background:#fff;

            border:
                1px solid
                var(--tr-line);

            text-decoration:none;

            color:var(--tr-black);

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


        .btb-child-category-card:hover{
            transform:
                translateY(-3px);

            box-shadow:
                0 15px 35px
                rgba(9,12,16,.12);
        }


        /* =================================================
           CHILD CATEGORY IMAGE
        ================================================= */

        .btb-child-category-image{
            height:210px;

            background-color:
                var(--tr-soft);

            background-position:center;
            background-size:cover;
            background-repeat:no-repeat;
        }


        /* =================================================
           CHILD CATEGORY INFO
        ================================================= */

        .btb-child-category-info{
            position:relative;

            min-height:110px;

            padding:
                19px
                70px
                18px
                20px;

            background:
                var(--tr-red);

            color:#fff;

            transition:
                background-color .25s ease;
        }


        .btb-child-category-info h3{
            margin:
                0
                0
                10px;

            color:#fff;

            font-size:20px;
            font-weight:800;
            line-height:1.25;
        }


        /* =================================================
           VIEW PRODUCTS
           USES YOUR GLOBAL .tr-btn ARROW
        ================================================= */

        .btb-child-category-view{
            display:inline-flex;

            align-items:center;

            position:relative;

            padding:0;

            color:#fff;

            background:transparent;

            font-size:11px;
            font-weight:900;

            letter-spacing:1px;

            text-decoration:none;

            transition:
                color .25s ease,
                padding-right .25s ease;
        }


        /*
         * Use the exact global Top Rank button arrow
         * behavior, but keep this category CTA compact.
         */

        .btb-child-category-view::after{
            content:"↗";

            position:absolute;

            right:0;
            top:50%;

            transform:
                translateY(-50%)
                translateX(8px);

            opacity:0;

            font-size:16px;
            font-weight:400;

            transition:
                opacity .25s ease,
                transform .25s ease;
        }


        .btb-child-category-card:hover
        .btb-child-category-view{
            padding-right:28px;
        }


        .btb-child-category-card:hover
        .btb-child-category-view::after{
            opacity:1;

            transform:
                translateY(-50%)
                translateX(0);
        }


        /* =================================================
           TOP RIGHT CATEGORY ARROW
           YOUR EXISTING tr-category-arrow STYLE
        ================================================= */

        .tr-category-arrow{
            position:absolute;

            top:18px;
            right:18px;

            width:38px;
            height:38px;

            display:flex;
            align-items:center;
            justify-content:center;

            background:
                #fff;

            color:
                var(--tr-black);

            font-size:17px;
            font-weight:400;

            opacity:0;

            transform:
                translate(
                    -4px,
                    4px
                );

            transition:
                opacity .25s ease,
                background .25s ease,
                color .25s ease,
                transform .3s ease;
        }


        .btb-child-category-card:hover
        .tr-category-arrow{
            opacity:1;

            transform:
                rotate(8deg)
                translate(
                    2px,
                    -2px
                );

            background:
                var(--tr-red);

            color:#fff;
        }


        /* =================================================
           RED -> BLACK CARD HOVER
        ================================================= */

        .btb-child-category-card:hover
        .btb-child-category-info{
            background:
                var(--tr-black);
        }


        /* =================================================
           NO CHILD CATEGORIES
        ================================================= */

        .btb-no-child-categories{
            padding:35px;

            text-align:center;

            border:
                1px solid
                var(--tr-line);

            color:
                var(--tr-muted);
        }


        /* =================================================
           CHILD PRODUCTS
           FULL WIDTH
        ================================================= */

        .btb-child-products-only
        .btb-product-grid-4{
            display:grid;

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

            gap:24px;

            width:100%;
        }


        .btb-child-products-only
        .btb-product-card{
            width:100%;
            min-width:0;
        }


        /* =================================================
           PRODUCT VIEW BUTTON
           USE GLOBAL TR BUTTON ARROW
        ================================================= */

        .btb-child-products-only
        .btb-view-product{
            position:relative;

            display:flex;

            align-items:center;
            justify-content:center;

            width:100%;

            margin-top:24px;

            padding:
                13px
                42px
                13px
                18px;

            background:
                var(--tr-red) !important;

            border:
                1px solid
                var(--tr-red);

            color:#fff !important;

            text-decoration:none;

            font-size:11px;
            font-weight:900;

            letter-spacing:.7px;

            overflow:hidden;

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


        /*
         * Global Top Rank arrow.
         */

        .btb-child-products-only
        .btb-view-product::after{
            content:"↗";

            position:absolute;

            right:14px;
            top:50%;

            transform:
                translateY(-50%)
                translateX(8px);

            opacity:0;

            font-size:16px;
            font-weight:400;

            transition:
                opacity .25s ease,
                transform .25s ease;
        }


        .btb-child-products-only
        .btb-view-product:hover{
            background:
                var(--tr-black) !important;

            border-color:
                var(--tr-black);

            color:#fff !important;

            transform:
                translateY(-2px);
        }


        .btb-child-products-only
        .btb-view-product:hover::after{
            opacity:1;

            transform:
                translateY(-50%)
                translateX(0);
        }


        /*
         * Hide the old text arrow because the global
         * CSS arrow is now used.
         */

        .btb-child-products-only
        .btb-view-product
        > span{
            display:none;
        }


        /* =================================================
           CATEGORY DESCRIPTION BELOW PRODUCTS
        ================================================= */

        .btb-category-description{
            max-width:900px;

            margin:
                55px
                auto
                0;

            color:
                var(--tr-muted);

            font-size:15px;
            line-height:1.8;
        }


        /* =================================================
           RESPONSIVE
        ================================================= */

        @media(max-width:1199px){

            .btb-child-products-only
            .btb-product-grid-4{
                grid-template-columns:
                    repeat(3,minmax(0,1fr));
            }

        }


        @media(max-width:991px){

            .btb-child-category-grid{
                grid-template-columns:
                    repeat(2,minmax(0,1fr));
            }

        }


        @media(max-width:767px){

            .btb-child-products-only
            .btb-product-grid-4{
                grid-template-columns:
                    repeat(2,minmax(0,1fr));

                gap:18px;
            }


            .btb-child-categories-section{
                padding:55px 0;
            }


            .btb-category-hero
            .btb-category-description-text{
                font-size:14px;
            }

        }


        @media(max-width:575px){

            .btb-child-category-grid{
                grid-template-columns:1fr;
            }


            .btb-child-products-only
            .btb-product-grid-4{
                grid-template-columns:1fr;
            }


            .btb-child-categories-heading h2{
                font-size:27px;
            }


            .btb-child-category-image{
                height:220px;
            }

        }


        /* =================================================
           MOBILE:
           KEEP CATEGORY ARROW VISIBLE
        ================================================= */

        @media(max-width:700px){

            .btb-child-category-view{
                padding-right:28px;
            }


            .btb-child-category-view::after{
                opacity:1;

                transform:
                    translateY(-50%)
                    translateX(0);
            }


            .tr-category-arrow{
                opacity:1;

                transform:
                    none;
            }


            .btb-child-products-only
            .btb-view-product{
                padding-right:42px;
            }


            .btb-child-products-only
            .btb-view-product::after{
                opacity:1;

                transform:
                    translateY(-50%)
                    translateX(0);
            }

        }