/*
Theme Name: Furnilife Child
Theme URI: http://demo.roadthemes.com/furnilife/
Description: Child theme untuk Furnilife theme - Bale Living.
Author: Bale Living
Author URI: https://baleliving.com/
Template: furnilife
Version: 1.0.0
Text Domain: furnilife-child
*/

/* Custom CSS Bale Living mulai dari sini */
/* Bale Living - Remove WooCommerce tab content titles */
.woocommerce-tabs .woocommerce-Tabs-panel--description > h2:first-child,
.woocommerce-tabs .woocommerce-Tabs-panel--additional_information > h2:first-child {
    display: none !important;
}
/* Bale Living - WooCommerce Product Tabs Font Weight */
.woocommerce-tabs ul.tabs > li > a {
    font-weight: 600 !important;
}
/* Bale Living - Hide Blog Post Meta */
.post-meta {
    display: none !important;
}
/* Bale Living - Blog Post Excerpt */
.post-wrapper .post-info > .post-excerpt {
    line-height: 1.5 !important;
}
/* Bale Living - Product Description H2 Spacing */
.main-container .product-view .product .woocommerce-tabs .panel p + h2 {
    margin-top: 24px !important;
}
.main-container .shop-products.grid-view .product-wrapper .box-hover {
    display: none;
}
.main-container .title-breadcrumb .separator {
    color: #91959b;
    margin: 0 1px;
}
.main-container .product-view .summary.single-product-info h1.product_title {
    font-size: 22px;
}
.main-container .product-view .summary.single-product-info h1.product_title {
    font-weight: 500;
    margin-bottom: 0px;
}
.woocommerce-tabs ul.tabs > li > a {
    font-weight: 400 !important;
}
/*Halaman Contact*/
.contact-item{
    display:flex;
    align-items:flex-start;
    gap:22px;
    margin-bottom:28px;
}

.contact-item .icon{
    width:52px;
    height:52px;
    border:1px solid #ddd;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    background: #fdfdfd;
}

.contact-item .content h4{
    margin:-4px 0 8px;
    font-size:16px;
    font-weight:500;
}

.contact-item .content p{
    margin:0;
    line-height:1.7;
}
.btn {
    width: 100%;
    height: 45px;
}
label {
    font-weight: 400;
    color: #000;
    font-size: 14px;
}
/* ==========================================
   BALE LIVING INQUIRY FORM
   Uniform Input Height
========================================== */

.bl-inquiry-form input.form-control,
.bl-inquiry-form select.form-control,
.bl-inquiry-form textarea.form-control {
    height: 41px;
    min-height: 41px;
    padding: 10px 11px;
    border: 1px solid #dcdcdc;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
}
/* textarea tetap lebih tinggi */
.bl-inquiry-form textarea.form-control{
    height:auto;
    min-height:180px;
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

/* =========================================================
   BALE LIVING
   COMPACT MOBILE HEADER
   Version: 2.2
   ========================================================= */
   
@media (min-width: 1200px) {

    .header-container .header-middle .logo {
        height: 80px !important;
    }

    .header-container .header-middle .our-service {
        padding: 15px 0 !important;
    }

}

@media screen and (max-width: 991px) {

    /*
    |--------------------------------------------------------------------------
    | 1. HIDE DESKTOP HEADER INFO
    |--------------------------------------------------------------------------
    | Contact Email
    | Download Catalog
    | Request Inquiry
    |--------------------------------------------------------------------------
    */

    .header-container .header-middle .our-service {
        display: none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | 2. COMPACT HEADER MIDDLE
    |--------------------------------------------------------------------------
    */

    .header-container .header-middle {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | 3. MOBILE LOGO
    |--------------------------------------------------------------------------
    */

    .header-container .header-middle .logo {
        height: 72px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


    /*
    |--------------------------------------------------------------------------
    | 4. MOBILE LOGO IMAGE
    |--------------------------------------------------------------------------
    */

    .header-container .header-middle .logo img {
        width: auto !important;
        height: auto !important;

        max-height: 48px !important;
        max-width: 190px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | 5. MOBILE MENU LAYER
    |--------------------------------------------------------------------------
    | Menu harus berada di atas Search ketika dropdown dibuka.
    |--------------------------------------------------------------------------
    */

    .header-container .main-menu-wrapper {
        position: relative !important;
        z-index: 9990 !important;
    }

    .header-container .mobile-menu {
        position: relative !important;

        width: 100% !important;

        z-index: 9991 !important;

        overflow: visible !important;
    }


    /*
    |--------------------------------------------------------------------------
    | 6. MOBILE MENU DROPDOWN
    |--------------------------------------------------------------------------
    */

    .header-container .mobile-menu .mobile-menu-container {
        z-index: 9999 !important;

        background: #fff !important;
    }

    .header-container .mobile-menu .mobile-menu-container.open {
        z-index: 9999 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | 7. SEARCH AREA - FULL WIDTH
    |--------------------------------------------------------------------------
    | Furnilife desktop menggunakan width sekitar 73%.
    | Pada mobile kita paksa menjadi full width.
    |--------------------------------------------------------------------------
    */

    .header-container .header-search {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        float: none !important;
        clear: both !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;

        z-index: 1 !important;

        box-sizing: border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | 8. SEARCH WIDGET - FULL WIDTH
    |--------------------------------------------------------------------------
    */

    .header-container .header-search .widget_product_search {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | 9. SEARCH FORM - FULL WIDTH
    |--------------------------------------------------------------------------
    */

    .header-container .header-search #searchform {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | 10. SEARCH INPUT WRAPPER
    |--------------------------------------------------------------------------
    | Override padding desktop Furnilife yang terlalu besar.
    |--------------------------------------------------------------------------
    */

    .header-container .header-search #searchform .form-input {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 40px !important;

        margin: 0 !important;

        padding-top: 0 !important;
        padding-right: 46px !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;

        box-sizing: border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | 11. SEARCH TEXT INPUT
    |--------------------------------------------------------------------------
    */

    .header-container .header-search #searchform #ws {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 40px !important;

        margin: 0 !important;

        padding: 0 14px !important;

        line-height: 40px !important;

        box-sizing: border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | 12. SEARCH BUTTON
    |--------------------------------------------------------------------------
    */

    .header-container .header-search #searchform #wsearchsubmit {
        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;

        width: 46px !important;
        height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

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

        line-height: 40px !important;

        box-sizing: border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | 13. SEARCH ICON
    |--------------------------------------------------------------------------
    */

    .header-container .header-search #searchform #wsearchsubmit i {
        margin: 0 !important;
        padding: 0 !important;

        line-height: 1 !important;
    }

}
/* =========================================================
   BALE LIVING - MOBILE MENU FONT SIZE
   ========================================================= */

@media screen and (max-width: 991px) {

    /* Main mobile menu items */
    .header-container .mobile-menu .mobile-menu-container ul.nav-menu > li > a,
    .header-container .mobile-menu .mobile-menu-container .nav-menu > li > a {
        font-size: 12px !important;
    }

    /* Sub menu items */
    .header-container .mobile-menu .mobile-menu-container ul.sub-menu li a {
        font-size: 12px !important;
    }

}
/* ==========================================
   Google reCAPTCHA Badge
========================================== */

.grecaptcha-badge {
    visibility: hidden !important;
}
/*google autentication v3*/

.bl-recaptcha-notice {
    margin-top: 12px;
    font-size: 10px;
    line-height: 1.5;
    color: #999;
    text-align: center;
}

.bl-recaptcha-notice a {
    color: #777;
    text-decoration: underline;
}

.bl-recaptcha-notice a:hover {
    color: #333;
}

.our-service .box .box-inner i{
    width: 40px;
    height: 40px;
    border: 1px solid #ebebeb;
    border-radius: 50%;

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

    position: absolute;
    left: 0;
    top: 50%;
    margin: 0;

    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);

    text-align: center;
    line-height: 1;
}

.our-service .box .box-inner i:before{
    font-size: 16px;
    line-height: 1;
}

.our-service .box .content{
    padding-left: 0px;
}
/*hiden page title*/
body.page-id-16721 .entry-title,
body.page-id-16721 .breadcrumbs {
    display: none !important;
}

/* ==========================================
   BALE LIVING TRUST BAR
   FINAL DESKTOP ALIGNMENT
========================================== */


/* ==========================================
   TRUST ROW
========================================== */

.bl-trust-row {
    clear: both !important;
    position: relative !important;
}


/* ==========================================
   TRUST ITEM
========================================== */

.bl-trust-item {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================
   ICON + TEXT WRAPPER
========================================== */

.bl-trust-item .wpb_wrapper {
    width: 100% !important;

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

    gap: 12px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================
   ICON CIRCLE
========================================== */

.bl-trust-item i.icon {
    position: relative !important;
    float: none !important;

    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;
    min-height: 42px !important;

    flex: 0 0 42px !important;

    margin: 0 !important;
    padding: 0 !important;

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

    border: none !important;
    border-radius: 50% !important;

    background: #ffffff !important;
    color: #669b38 !important;

    font-size: 0 !important;
    line-height: 1 !important;

    box-sizing: border-box !important;
}


/* Actual Ionicon */
.bl-trust-item i.icon:before {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 21px !important;
    line-height: 1 !important;

    color: #669b38 !important;
}


/* ==========================================
   TEXT CONTAINER
========================================== */

.bl-trust-item .content {
    float: none !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: center !important;
}


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

.bl-trust-item .content h5 {
    margin: 0 0 3px 0 !important;
    padding: 0 !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;

    color: #242424 !important;

    text-transform: none !important;
    white-space: nowrap;
}


/* ==========================================
   SUBTITLE
========================================== */

.bl-trust-item .content span {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 10px !important;
    font-weight: 400 !important;

    line-height: 1.3 !important;

    color: #6e6e6e !important;

    white-space: nowrap;
}


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

@media (min-width: 768px) {

    /* ROW */
    .bl-trust-row {
        width: calc(100% + 30px) !important;
        max-width: none !important;

        margin-right: -30px !important;

        height: 100px !important;
        min-height: 100px !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        display: flex !important;
        flex-wrap: nowrap !important;

        align-items: stretch !important;
    }


    /* 4 COLUMNS */
    .bl-trust-row > .wpb_column {
        float: none !important;

        flex: 0 0 25% !important;

        width: 25% !important;
        max-width: 25% !important;

        height: 100px !important;
        min-height: 100px !important;

        margin: 0 !important;

        display: flex !important;

        align-items: stretch !important;
        justify-content: center !important;
    }


    /* VC COLUMN INNER */
    .bl-trust-row > .wpb_column > .vc_column-inner {
        width: 100% !important;
        height: 100px !important;
        min-height: 100px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        display: flex !important;

        align-items: stretch !important;
        justify-content: center !important;

        box-sizing: border-box !important;
    }


    /* COLUMN MAIN WRAPPER */
    .bl-trust-row
    > .wpb_column
    > .vc_column-inner
    > .wpb_wrapper {

        width: 100% !important;
        height: 100px !important;
        min-height: 100px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;
    }


    /* TEXT BLOCK */
    .bl-trust-row .wpb_text_column {
        width: 100% !important;
        height: 100px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;
    }


    /* TEXT BLOCK INNER WRAPPER */
    .bl-trust-row .wpb_text_column > .wpb_wrapper {
        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

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

        gap: 12px !important;
    }

}


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

@media (max-width: 767px) {

    .bl-trust-row {
        width: 100% !important;

        margin-right: 0 !important;

        height: auto !important;
        min-height: 0 !important;
    }


    .bl-trust-item {
        margin: 0 !important;
    }


    .bl-trust-item .wpb_wrapper {
        min-height: 70px !important;

        padding-left: 15px !important;
        padding-right: 15px !important;

        justify-content: flex-start !important;
    }


    .bl-trust-item i.icon {
        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
        min-height: 38px !important;

        flex: 0 0 38px !important;
    }


    .bl-trust-item i.icon:before {
        font-size: 19px !important;
    }


    .bl-trust-item .content h5 {
        font-size: 11px !important;
        white-space: normal;
    }


    .bl-trust-item .content span {
        font-size: 10px !important;
        white-space: normal;
    }

}

/* ==========================================
   Bale Living - Collection Label Button
========================================== */

.bl-collection-label .vc_btn3,
.bl-collection-label a.vc_btn3,
a.bl-collection-label {

    padding: 7px 13px !important;

    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;

    min-width: auto !important;
    min-height: auto !important;
    height: auto !important;

    border-width: 1px !important;
    border-radius: 20px !important;
}

/* =========================================================
   BALE LIVING - PRODUCT CATEGORY GRID
   ROW 1 : 2/3 + 1/3
   Desktop Gap : 10px
========================================================= */


/* =========================================================
   1. WPBAKERY RESET
========================================================= */

.bl-cat-row .wpb_content_element{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.bl-cat-row .wpb_text_column{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.bl-cat-row .wpb_text_column p{
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   2. ROW 1 - DESKTOP GAP
   Kolom kiri  : right 5px
   Kolom kanan : left 5px
   Total gap   : 10px
========================================================= */

@media (min-width: 992px){

    .bl-cat-row-1 > .wpb_column:first-child > .vc_column-inner{
        padding-left: 0 !important;
        padding-right: 5px !important;
    }

    .bl-cat-row-1 > .wpb_column:last-child > .vc_column-inner{
        padding-left: 5px !important;
        padding-right: 0 !important;
    }

}


/* =========================================================
   3. LARGE CATEGORY CARD
========================================================= */

.bl-cat-row-1 .bl-category-card--large{
    position: relative;

    display: block;

    width: 100%;
    height: 250px;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    border-radius: 6px;

    background: #f3f3f3;

    text-decoration: none !important;
}


/* =========================================================
   4. IMAGE WRAPPER
========================================================= */

.bl-cat-row-1
.bl-category-card--large
.bl-category-card__image{

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* =========================================================
   5. CATEGORY IMAGE
========================================================= */

.bl-cat-row-1
.bl-category-card--large
.bl-category-card__image img{

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;
    object-position: bottom center;

    background: #f5f5f5;

    transition: transform .4s ease;
}


/* =========================================================
   6. DARK GRADIENT OVERLAY
========================================================= */

.bl-cat-row-1 .bl-category-card--large::after{

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 1;

    background: linear-gradient(
        to top,
        rgba(0,0,0,.60) 0%,
        rgba(0,0,0,.30) 30%,
        rgba(0,0,0,.08) 58%,
        rgba(0,0,0,0) 78%
    );

    pointer-events: none;
}


/* =========================================================
   7. CONTENT POSITION
========================================================= */

.bl-cat-row-1
.bl-category-card--large
.bl-category-card__content{

    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 15px;

    z-index: 2;

    display: grid;

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

    grid-template-areas:
        "title title"
        "view count";

    align-items: end;

    column-gap: 15px;
}


/* =========================================================
   8. CATEGORY TITLE
========================================================= */

.bl-cat-row-1
.bl-category-card--large
.bl-category-card__title{

    grid-area: title;

    margin: 0 0 5px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 20px !important;
    line-height: 1.2 !important;

    font-weight: 500 !important;

    text-decoration: none !important;
}


/* =========================================================
   9. VIEW COLLECTION
========================================================= */

.bl-cat-row-1
.bl-category-card--large
.bl-category-card__view{

    grid-area: view;

    display: block;

    color: #ffffff !important;

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

    font-weight: 500;

    white-space: nowrap;
}


/* =========================================================
   10. PRODUCT COUNT
========================================================= */

.bl-cat-row-1
.bl-category-card--large
.bl-category-card__count{

    grid-area: count;

    display: block;

    color: #ffffff !important;

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

    font-weight: 400;

    white-space: nowrap;

    opacity: .95;
}


/* =========================================================
   11. REMOVE LINK DEFAULT STYLE
========================================================= */

.bl-cat-row-1 .bl-category-card--large,
.bl-cat-row-1 .bl-category-card--large:hover,
.bl-cat-row-1 .bl-category-card--large:focus{

    color: inherit;

    text-decoration: none !important;

    outline: none;
}



/* =========================================================
   13. TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px){

    .bl-cat-row-1 > .wpb_column > .vc_column-inner{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .bl-cat-row-1 .bl-category-card--large{
        height: 230px;
    }

    .bl-cat-row-1
    .bl-category-card--large
    .bl-category-card__content{

        left: 16px;
        right: 16px;
        bottom: 14px;
    }

    .bl-cat-row-1
    .bl-category-card--large
    .bl-category-card__title{

        font-size: 18px !important;
    }

}


/* =========================================================
   14. MOBILE
========================================================= */

@media (max-width: 767px){

    .bl-cat-row-1 > .wpb_column > .vc_column-inner{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .bl-cat-row-1 .bl-category-card--large{
        height: 220px;
    }

    .bl-cat-row-1
    .bl-category-card--large
    .bl-category-card__content{

        left: 14px;
        right: 14px;
        bottom: 13px;

        column-gap: 8px;
    }

    .bl-cat-row-1
    .bl-category-card--large
    .bl-category-card__title{

        margin-bottom: 4px !important;

        font-size: 17px !important;
    }

    .bl-cat-row-1
    .bl-category-card--large
    .bl-category-card__view{

        font-size: 10px;
    }

    .bl-cat-row-1
    .bl-category-card--large
    .bl-category-card__count{

        font-size: 9px;
    }

}
/* =========================================================
   BALE LIVING - PRODUCT CATEGORY GRID
   ROW 2 : 4 EQUAL COLUMNS
   Desktop Gap : 10px
========================================================= */


/* =========================================================
   1. ROW 2 - DESKTOP COLUMN GAP
========================================================= */

@media (min-width: 992px){

    /* COLUMN 1 */
    .bl-cat-row-2 > .wpb_column:nth-child(1) > .vc_column-inner{
        padding-left: 0 !important;
        padding-right: 5px !important;
    }

    /* COLUMN 2 */
    .bl-cat-row-2 > .wpb_column:nth-child(2) > .vc_column-inner{
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* COLUMN 3 */
    .bl-cat-row-2 > .wpb_column:nth-child(3) > .vc_column-inner{
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* COLUMN 4 */
    .bl-cat-row-2 > .wpb_column:nth-child(4) > .vc_column-inner{
        padding-left: 5px !important;
        padding-right: 0 !important;
    }

}


/* =========================================================
   2. MEDIUM CATEGORY CARD
========================================================= */

.bl-cat-row-2 .bl-category-card--medium{

    position: relative;

    display: block;

    width: 100%;
    height: 180px;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    border-radius: 6px;

    background: #f3f3f3;

    text-decoration: none !important;
}


/* =========================================================
   3. IMAGE WRAPPER
========================================================= */

.bl-cat-row-2
.bl-category-card--medium
.bl-category-card__image{

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* =========================================================
   4. CATEGORY IMAGE
========================================================= */

.bl-cat-row-2
.bl-category-card--medium
.bl-category-card__image img{

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;
    object-position: center center;

    transition: transform .4s ease;
}


/* =========================================================
   5. DARK GRADIENT OVERLAY
========================================================= */

.bl-cat-row-2 .bl-category-card--medium::after{

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 1;

    background: linear-gradient(
        to top,
        rgba(0,0,0,.62) 0%,
        rgba(0,0,0,.32) 32%,
        rgba(0,0,0,.08) 62%,
        rgba(0,0,0,0) 80%
    );

    pointer-events: none;
}


/* =========================================================
   6. CONTENT
========================================================= */

.bl-cat-row-2
.bl-category-card--medium
.bl-category-card__content{

    position: absolute;

    left: 13px;
    right: 13px;
    bottom: 11px;

    z-index: 2;

    display: grid;

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

    grid-template-areas:
        "title title"
        "view count";

    align-items: end;

    column-gap: 8px;
}


/* =========================================================
   7. CATEGORY TITLE
========================================================= */

.bl-cat-row-2
.bl-category-card--medium
.bl-category-card__title{

    grid-area: title;

    margin: 0 0 4px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 16px !important;
    line-height: 1.2 !important;

    font-weight: 600 !important;
}


/* =========================================================
   8. VIEW COLLECTION
========================================================= */

.bl-cat-row-2
.bl-category-card--medium
.bl-category-card__view{

    grid-area: view;

    display: block;

    color: #ffffff !important;

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

    font-weight: 500;

    white-space: nowrap;
}


/* =========================================================
   9. PRODUCT COUNT
========================================================= */

.bl-cat-row-2
.bl-category-card--medium
.bl-category-card__count{

    grid-area: count;

    display: block;

    color: #ffffff !important;

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

    font-weight: 400;

    white-space: nowrap;

    opacity: .95;
}


/* =========================================================
   10. REMOVE DEFAULT LINK STYLE
========================================================= */

.bl-cat-row-2 .bl-category-card--medium,
.bl-cat-row-2 .bl-category-card--medium:hover,
.bl-cat-row-2 .bl-category-card--medium:focus{

    color: inherit;

    text-decoration: none !important;
}


/* =========================================================
   12. TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px){

    .bl-cat-row-2 > .wpb_column > .vc_column-inner{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}


/* =========================================================
   13. MOBILE
========================================================= */

@media (max-width: 767px){

    .bl-cat-row-2 > .wpb_column > .vc_column-inner{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}
/* =========================================================
   BALE LIVING - PRODUCT CATEGORY GRID
   ROW 3 : 6 EQUAL COLUMNS
   Desktop Gap : 10px
========================================================= */


/* =========================================================
   1. ROW 3 - DESKTOP COLUMN GAP
========================================================= */

@media (min-width: 992px){

    /* COLUMN 1 */
    .bl-cat-row-3 > .wpb_column:nth-child(1) > .vc_column-inner{
        padding-left: 0 !important;
        padding-right: 5px !important;
    }

    /* COLUMN 2 */
    .bl-cat-row-3 > .wpb_column:nth-child(2) > .vc_column-inner{
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* COLUMN 3 */
    .bl-cat-row-3 > .wpb_column:nth-child(3) > .vc_column-inner{
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* COLUMN 4 */
    .bl-cat-row-3 > .wpb_column:nth-child(4) > .vc_column-inner{
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* COLUMN 5 */
    .bl-cat-row-3 > .wpb_column:nth-child(5) > .vc_column-inner{
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* COLUMN 6 */
    .bl-cat-row-3 > .wpb_column:nth-child(6) > .vc_column-inner{
        padding-left: 5px !important;
        padding-right: 0 !important;
    }

}


/* =========================================================
   2. SMALL CATEGORY CARD
========================================================= */

.bl-cat-row-3 .bl-category-card--small{

    position: relative;

    display: block;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    border: 1px solid #eeeeee;
    border-radius: 6px;

    background: #ffffff;

    text-decoration: none !important;

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

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


/* =========================================================
   3. IMAGE WRAPPER
========================================================= */

.bl-cat-row-3
.bl-category-card--small
.bl-category-card__image{

    position: relative;

    width: 100%;
    height: 125px;

    overflow: hidden;

    background: #f5f5f5;
}


/* =========================================================
   4. CATEGORY IMAGE
========================================================= */

.bl-cat-row-3
.bl-category-card--small
.bl-category-card__image img{

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;
    object-position: center;

    transition: transform .35s ease;
}


/* =========================================================
   5. CONTENT
========================================================= */

.bl-cat-row-3
.bl-category-card--small
.bl-category-card__content{

    position: relative;

    display: block;

    padding: 10px 6px 9px;

    text-align: center;
}


/* =========================================================
   6. CATEGORY TITLE
========================================================= */

.bl-cat-row-3
.bl-category-card--small
.bl-category-card__title{

    margin: 0 0 4px 0 !important;
    padding: 0 !important;

    color: #222222 !important;

    font-size: 12px !important;
    line-height: 1.25 !important;

    font-weight: 600 !important;
}


/* =========================================================
   7. HIDE VIEW COLLECTION
========================================================= */

.bl-cat-row-3
.bl-category-card--small
.bl-category-card__view{

    display: none !important;
}


/* =========================================================
   8. PRODUCT COUNT
========================================================= */

.bl-cat-row-3
.bl-category-card--small
.bl-category-card__count{

    display: block;

    color: #777777 !important;

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

    font-weight: 400;
}


/* =========================================================
   9. REMOVE DEFAULT LINK STYLE
========================================================= */

.bl-cat-row-3 .bl-category-card--small,
.bl-cat-row-3 .bl-category-card--small:hover,
.bl-cat-row-3 .bl-category-card--small:focus{

    color: inherit;

    text-decoration: none !important;
}


/* =========================================================
   11. TABLET & MOBILE RESET
   Responsive final akan kita atur setelah desktop selesai
========================================================= */

@media (max-width: 991px){

    .bl-cat-row-3 > .wpb_column > .vc_column-inner{

        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}

/* =========================================================
   BALE LIVING - CATEGORY GRID
   VERTICAL ROW GAP
   Same as horizontal gap: 10px
========================================================= */

/* Reset spacing vertikal bawaan WPBakery */
.vc_row.bl-cat-row{
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Row 1 → Row 2 */
.vc_row.bl-cat-row-1{
    margin-bottom: 16px !important;
}

/* Row 2 → Row 3 */
.vc_row.bl-cat-row-2{
    margin-bottom: 16px !important;
}

/* Row terakhir tidak perlu gap tambahan */
.vc_row.bl-cat-row-3{
    margin-bottom: 0 !important;
}

/* =========================================================
   BALE LIVING - HERO MOBILE ONLY
   Hide CTA buttons + white hero text
========================================================= */

@media (max-width: 767px) {

    /* ==========================================
       HIDE BOTH HERO BUTTONS
    ========================================== */

    .bl-hero-actions {
        display: none !important;
    }


    /* ==========================================
       HERO HEADING - WHITE
    ========================================== */

    .bl-hero-content .vc_custom_heading,
    .bl-hero-content h1,
    .bl-hero-content h2 {
        color: #ffffff !important;
    }


    /* ==========================================
       HERO DESCRIPTION - WHITE
    ========================================== */

    .bl-hero-content .wpb_text_column,
    .bl-hero-content .wpb_text_column p {
        color: #ffffff !important;
    }

}
/* =========================================================
   BALE LIVING - FINAL MOBILE HERO + TRUST BAR FIX
   MOBILE ONLY
========================================================= */

@media (max-width: 767px) {


    /* =====================================================
       1. CATEGORY COLLECTION BUTTON TEXT = WHITE
    ===================================================== */

    .bl-hero-content .vc_btn3 {
        color: #ffffff !important;
    }

    .bl-hero-content .vc_btn3:hover,
    .bl-hero-content .vc_btn3:focus {
        color: #ffffff !important;
    }


    /* =====================================================
       HIDE HERO CTA BUTTONS
       Request Quote + Download Catalog
    ===================================================== */

    .bl-hero-actions {
        display: none !important;
    }


    /* =====================================================
       HERO TITLE = WHITE
    ===================================================== */

    .bl-hero-content .vc_custom_heading,
    .bl-hero-content h1,
    .bl-hero-content h2 {
        color: #ffffff !important;
    }


    /* =====================================================
       2. HERO DESCRIPTION
       Batasi lebar agar tidak memanjang ke kanan
    ===================================================== */

    .bl-hero-content .wpb_text_column {
        width: 78% !important;
        max-width: 260px !important;

        margin-left: 0 !important;
        margin-right: auto !important;

        padding: 0 !important;

        box-sizing: border-box !important;
    }


    .bl-hero-content .wpb_text_column p {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;

        line-height: 1.35 !important;

        box-sizing: border-box !important;
    }



    /* =====================================================
       3. TRUST BAR
       OEM / ODM / Hospitality / SVLK
    ===================================================== */

    .bl-trust-row {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding: 0 !important;

        display: block !important;
    }


    /* Setiap column = satu baris penuh */
    .bl-trust-row > .wpb_column {
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;
    }


    /* Column inner */
    .bl-trust-row > .wpb_column > .vc_column-inner {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;
    }


    /* Wrapper column */
    .bl-trust-row
    > .wpb_column
    > .vc_column-inner
    > .wpb_wrapper {

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;
    }


    /* Text block */
    .bl-trust-row .bl-trust-item {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       ICON + TEXT BENAR-BENAR CENTER
    ===================================================== */

    .bl-trust-row .bl-trust-item > .wpb_wrapper {

        width: 100% !important;
        min-height: 95px !important;

        margin: 0 !important;
        padding: 14px 15px !important;

        display: flex !important;

        flex-direction: column !important;

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

        gap: 7px !important;

        text-align: center !important;

        box-sizing: border-box !important;
    }


    /* ICON */
    .bl-trust-row .bl-trust-item i.icon {

        float: none !important;
        position: relative !important;

        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
        min-height: 40px !important;

        flex: 0 0 40px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


    .bl-trust-row .bl-trust-item i.icon:before {
        font-size: 19px !important;
        line-height: 1 !important;

        margin: 0 !important;
    }


    /* TEXT CONTAINER */
    .bl-trust-row .bl-trust-item .content {

        float: none !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;

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

        text-align: center !important;
    }


    /* TITLE */
    .bl-trust-row .bl-trust-item .content h5 {

        width: 100% !important;

        margin: 0 0 3px 0 !important;
        padding: 0 !important;

        text-align: center !important;

        font-size: 11px !important;
        line-height: 1.25 !important;

        white-space: normal !important;
    }


    /* DESCRIPTION */
    .bl-trust-row .bl-trust-item .content span {

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;

        font-size: 10px !important;
        line-height: 1.3 !important;

        white-space: normal !important;
    }

}
/* =========================================================
   HERO DESCRIPTION WHITE - MOBILE ONLY
========================================================= */

@media (max-width: 767px) {

    .bl-hero-content .wpb_text_column,
    .bl-hero-content .wpb_text_column p,
    .bl-hero-content .wpb_text_column span {
        color: #ffffff !important;
    }

}

/* =========================================================
   BALE LIVING - CATEGORY GRID MOBILE
   Menggunakan existing class:
   bl-cat-row-1 / bl-cat-row-2 / bl-cat-row-3
   Desktop tidak terpengaruh
========================================================= */

@media (max-width: 767px) {


    /* =====================================================
       RESET ROW WPBAKERY
    ===================================================== */

    .bl-cat-row-1,
    .bl-cat-row-2,
    .bl-cat-row-3 {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
    }


    /*
     * WPBakery memakai pseudo-element untuk clearfix.
     * Saat row menjadi CSS Grid, pseudo-element ini bisa
     * ikut dianggap sebagai grid item.
     */
    .bl-cat-row-1::before,
    .bl-cat-row-1::after,
    .bl-cat-row-2::before,
    .bl-cat-row-2::after,
    .bl-cat-row-3::before,
    .bl-cat-row-3::after {
        display: none !important;
        content: none !important;
    }


    /* =====================================================
       ROW 1
       2 LARGE CARD -> 1 COLUMN
    ===================================================== */

    .bl-cat-row-1 {
        display: grid !important;

        grid-template-columns: 1fr !important;

        column-gap: 0 !important;
        row-gap: 8px !important;
    }


    /* =====================================================
       ROW 2
       4 MEDIUM CARD -> 2 COLUMNS x 2 ROWS
    ===================================================== */

    .bl-cat-row-2 {
        display: grid !important;

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

        gap: 8px !important;
    }


    /* =====================================================
       ROW 3
       6 SMALL CARD -> 2 COLUMNS x 3 ROWS
    ===================================================== */

    .bl-cat-row-3 {
        display: grid !important;

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

        gap: 8px !important;
    }


    /* =====================================================
       RESET WIDTH COLUMN WPBAKERY
    ===================================================== */

    .bl-cat-row-1 > .wpb_column,
    .bl-cat-row-2 > .wpb_column,
    .bl-cat-row-3 > .wpb_column {
        float: none !important;

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

        margin: 0 !important;
        padding: 0 !important;

        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       RESET CUSTOM PADDING DESKTOP
       0/8, 8/0, dst hanya dinetralkan di mobile
    ===================================================== */

    .bl-cat-row-1 > .wpb_column > .vc_column-inner,
    .bl-cat-row-2 > .wpb_column > .vc_column-inner,
    .bl-cat-row-3 > .wpb_column > .vc_column-inner {
        width: 100% !important;

        margin: 0 !important;

        padding-top: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       RESET WRAPPER
    ===================================================== */

    .bl-cat-row-1 .wpb_wrapper,
    .bl-cat-row-2 .wpb_wrapper,
    .bl-cat-row-3 .wpb_wrapper {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       REMOVE DEFAULT WPBAKERY BOTTOM MARGIN
    ===================================================== */

    .bl-cat-row-1 .wpb_content_element,
    .bl-cat-row-2 .wpb_content_element,
    .bl-cat-row-3 .wpb_content_element {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

}
/* =========================================================
   BALE LIVING V2
   FEATURED CATEGORY - FINAL
========================================================= */


/* =========================================================
   1. BASIC RESET
========================================================= */

.vc_row.blv2-cat-featured {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;
}


.blv2-cat-featured .wpb_content_element,
.blv2-cat-featured .wpb_text_column {
    margin: 0 !important;
    padding: 0 !important;
}


.blv2-cat-featured .wpb_text_column p {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   2. COLUMN RESET
========================================================= */

.blv2-cat-featured > .wpb_column {
    float: none !important;

    margin: 0 !important;
    padding: 0 !important;

    min-width: 0 !important;

    box-sizing: border-box !important;
}


.blv2-cat-featured > .wpb_column > .vc_column-inner {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


.blv2-cat-featured
> .wpb_column
> .vc_column-inner
> .wpb_wrapper {

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   3. FEATURED CARD
========================================================= */

.blv2-category-card--featured {
    position: relative;

    display: block;

    width: 100% !important;
    height: 250px;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    border-radius: 6px;

    background: #f3f3f3;

    text-decoration: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   4. IMAGE WRAPPER
========================================================= */

.blv2-category-card--featured
.blv2-category-card__image {

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* =========================================================
   5. IMAGE
========================================================= */

.blv2-category-card--featured
.blv2-category-card__image img {

    display: block;

    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover;
    object-position: center center;
}


/* =========================================================
   6. GRADIENT OVERLAY
========================================================= */

.blv2-category-card--featured::after {

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 1;

    background: linear-gradient(
        to top,
        rgba(0,0,0,.62) 0%,
        rgba(0,0,0,.30) 32%,
        rgba(0,0,0,.08) 60%,
        rgba(0,0,0,0) 80%
    );

    pointer-events: none;
}


/* =========================================================
   7. CONTENT
========================================================= */

.blv2-category-card--featured
.blv2-category-card__content {

    position: absolute;

    left: 16px;
    right: 16px;
    bottom: 14px;

    z-index: 2;

    display: grid;

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

    grid-template-areas:
        "title title"
        "view count";

    align-items: end;

    column-gap: 10px;
}


/* =========================================================
   8. TITLE
========================================================= */

.blv2-category-card--featured
.blv2-category-card__title {

    grid-area: title;

    margin: 0 0 4px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 18px !important;
    line-height: 1.2 !important;

    font-weight: 600 !important;
}


/* =========================================================
   9. VIEW COLLECTION
========================================================= */

.blv2-category-card--featured
.blv2-category-card__view {

    grid-area: view;

    display: block;

    color: #ffffff !important;

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

    font-weight: 500;

    white-space: nowrap;
}


/* =========================================================
   10. PRODUCT COUNT
========================================================= */

.blv2-category-card--featured
.blv2-category-card__count {

    grid-area: count;

    display: block;

    color: #ffffff !important;

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

    font-weight: 400;

    white-space: nowrap;

    opacity: .95;
}


/* =========================================================
   11. LINK RESET
========================================================= */

.blv2-category-card--featured,
.blv2-category-card--featured:hover,
.blv2-category-card--featured:focus {

    color: inherit !important;

    text-decoration: none !important;

    outline: none !important;
}



/* =========================================================
   DESKTOP
   2 / 3 + 1 / 3
========================================================= */

@media (min-width: 768px) {

    .vc_row.blv2-cat-featured {

        display: grid !important;

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

        gap: 10px !important;

        align-items: stretch !important;
    }


    /*
     * Matikan width bawaan 2/3 dan 1/3 WPBakery.
     * Grid yang menentukan ukurannya.
     */

    .vc_row.blv2-cat-featured > .wpb_column {

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

        min-height: 0 !important;
    }


    .blv2-category-card--featured {

        height: 250px !important;
    }

}



/* =========================================================
   MOBILE
   1 COLUMN + 1 COLUMN
========================================================= */

@media (max-width: 767px) {

    .vc_row.blv2-cat-featured {

        display: grid !important;

        grid-template-columns: minmax(0, 1fr) !important;

        gap: 8px !important;

        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    .vc_row.blv2-cat-featured > .wpb_column {

        width: 100% !important;
        max-width: 100% !important;

        float: none !important;
        clear: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .blv2-category-card--featured {

        width: 100% !important;

        height: 205px !important;

        border-radius: 5px;
    }


    .blv2-category-card--featured
    .blv2-category-card__content {

        left: 12px;
        right: 12px;
        bottom: 11px;

        column-gap: 6px;
    }


    .blv2-category-card--featured
    .blv2-category-card__title {

        margin-bottom: 3px !important;

        font-size: 15px !important;
        line-height: 1.15 !important;
    }


    .blv2-category-card--featured
    .blv2-category-card__view {

        font-size: 8px;
    }


    .blv2-category-card--featured
    .blv2-category-card__count {

        font-size: 7px;
    }

}