/* ============================================
   WD Frequently Bought Together
   Final Style
============================================ */


/* ===============================
   Main Product Area
================================ */


.wd-fbt-layout{

    display:flex;

    align-items:flex-end;

    gap:30px;

}



.wd-fbt-products{

    flex:none;

    display:flex;

    align-items:flex-start;

    justify-content:flex-start;

    gap:15px;

}



/* ===============================
   Product Card
================================ */


.wd-fbt-product-item {

    position:relative;

    width:220px;

    flex:0 0 220px;

    text-align:left !important;

}



.wd-fbt-card {

    text-align:left !important;

}



/* checkbox */

.wd-fbt-product-item > input.wd-fbt-check {

    position:absolute;

    top:10px;

    left:10px;

    width:18px;

    height:18px;

    z-index:10;

}



/* image */

.wd-fbt-thumb img{

    width:180px;

    height:180px;

    object-fit:contain;

}



/* content */

.wd-fbt-content {

    margin-top:15px;

    text-align:left !important;

}



/* category */

.wd-fbt-content .wd-primary-cat {

    display:block;

    font-size:13px;

    text-align:left;

    margin-bottom:8px;

}



/* title */

.wd-fbt-content .wd-loop-prod-title {

    font-size:15px;

    line-height:1.4;

    text-align:left !important;

    margin:0 0 -10px;
    
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    
    overflow: hidden;

}



.wd-fbt-content .wd-loop-prod-title a {

    text-align:left !important;

}



/* price */

.wd-fbt-content .price {

    text-align:left !important;

    margin-top:10px;

}



/* variation */


.wd-fbt-variation-box {

    margin-top:15px;

}


.wd-fbt-attribute label {

    display:block;

    font-size:13px;

    text-align:left;

    margin-bottom:6px;

}


.wd-fbt-variation-select {

    width:100%;

    height:42px;

}



/* ===============================
   Plus
================================ */


.wd-fbt-plus {

    display:flex;

    align-items:center;

    justify-content:center;

    width:35px;

    height:220px;

    flex:0 0 35px;

    font-size:28px;

    font-weight:600;

}



/* ===============================
   Right Summary
================================ */


.wd-fbt-price-box {

    width:330px;

    min-height:220px;

    background:#f7f7f7;

    padding:25px;

    box-sizing:border-box;

}



.wd-fbt-total {

    font-size:18px;

}



#wd-fbt-total {

    font-size:24px;

    font-weight:700;

}



.wd-fbt-add {

    width:100%;

    margin-top:20px;

}



/* ===============================
   Mobile
================================ */


@media(max-width:768px){


    .wd-fbt-layout{

        display:block;
        padding: 40px 0 40px 0;
    }



    .wd-fbt-products{

        display:block;

    }



    .wd-fbt-product-item{

        width:100%;

        flex:0 0 100%;

    }



.wd-fbt-thumb{

    width:100%;

    height:220px;

    display:flex;

    align-items:center;

    justify-content:flex-start;

}


.wd-fbt-thumb img{

    width:220px;

    height:220px;

    object-fit:contain;

    object-position:left center;

    margin-left:0;

}



    .wd-fbt-plus{

        width:100%;

        height:80px;

        display:flex;

        align-items:center;

        justify-content:center;

        font-size:28px;

        padding:0 0 40px 0;

    }



    .wd-fbt-content{

        margin-top:10px;
        padding: 40px 40px 0 0
    }



    .wd-fbt-price-box{

        width:100%;

        margin-top:25px;

    }


}


.wd-fbt-swatches{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

}


.wd-fbt-swatch{

    border:1px solid #ddd;

    padding:8px 14px;

    cursor:pointer;

    font-size:14px;

    line-height:1;

}


.wd-fbt-swatch.active{

    border-color:#000;

}


.wd-fbt-attribute{

    margin-top:15px;

}


/* 
|--------------------------------------------------------------------------
| FBT More / Less Attribute
|--------------------------------------------------------------------------
*/


.wd-fbt-swatches{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    max-height:42px;
    overflow:hidden;
}


.wd-fbt-swatch-wrap.expanded .wd-fbt-swatches{
    max-height:none;
}


.wd-fbt-more{

    cursor:pointer;
    font-size:13px;
    margin-top:8px;
    display:inline-block;

}

.wd-fbt-less{

    cursor:pointer;
    font-size:13px;
    margin-top:8px;
    display:inline-block;

}


/* =========================================================
   Build Your Bundle - Stage 2
========================================================= */

.wd-build-bundle{
    margin-top:35px;
}

.wd-bundle-current{
    display:flex;
    align-items:flex-start;
    gap:18px;
    max-width:720px;
    padding:15px;
    border:1px solid #e5e5e5;
    margin-bottom:15px;
}

.wd-bundle-current-thumb{
    width:95px;
    flex:0 0 95px;
}

.wd-bundle-current-thumb img{
    width:95px;
    height:95px;
    object-fit:contain;
}

.wd-bundle-current-info{
    flex:1 1 auto;
    min-width:0;
}

.wd-bundle-current-info h3{
    font-size:15px;
    line-height:1.4;
    margin:5px 0;
}

.wd-bundle-current-info .wd-bundle-variation-box{
    margin-top:12px;
}

.wd-bundle-included{
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
}

.wd-bundle-open-picker{
    min-height:44px;
}

.wd-bundle-status{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin:15px 0;
    font-size:13px;
}

.wd-bundle-next-tier{
    opacity:.75;
}

.wd-bundle-picker{
    width:100%;
    max-width:980px;
    margin-top:18px;
    padding:20px;
    border:1px solid #e5e5e5;
    background:#fff;
    box-sizing:border-box;
}

.wd-bundle-picker-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}

.wd-bundle-close-picker{
    border:0;
    background:transparent;
    font-size:28px;
    line-height:1;
    cursor:pointer;
    padding:0 5px;
}

.wd-bundle-picker-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,220px));
    justify-content:start;
    align-items:start;
    gap:22px;
}

.wd-bundle-picker-item{
    position:relative;
    min-width:0;
}

.wd-bundle-picker-item.is-selected{
    opacity:.62;
}

.wd-bundle-picker-thumb{
    width:100%;
    max-width:220px;
}

.wd-bundle-picker-thumb img{
    width:100%;
    height:220px;
    object-fit:contain;
}

.wd-bundle-picker-content h3{
    font-size:14px;
    line-height:1.4;
    margin:10px 0 4px;
}

.wd-bundle-picker-content .price{
    margin-bottom:10px;
}

.wd-bundle-select-product{
    width:100%;
    margin-top:12px;
}

.wd-bundle-selected-list{
    max-width:620px;
}

.wd-bundle-selected-row{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 0;
    border-top:1px solid #eee;
}

.wd-bundle-selected-thumb{
    width:72px;
    min-width:72px;
    height:72px;
}

.wd-bundle-selected-thumb img{
    display:block;
    width:72px;
    height:72px;
    object-fit:contain;
}

.wd-bundle-selected-details{
    flex:1;
    min-width:0;
}

.wd-bundle-selected-name{
    font-size:13px;
    font-weight:600;
    line-height:1.35;
    margin-bottom:4px;
}

.wd-bundle-selected-meta{
    font-size:12px;
    line-height:1.5;
    margin-bottom:3px;
}

.wd-bundle-selected-attribute-label{
    font-weight:600;
}

.wd-bundle-selected-price{
    font-size:13px;
    font-weight:600;
}

.wd-bundle-selected-price .price{
    margin:0;
}

.wd-bundle-remove{
    border:0;
    background:transparent;
    cursor:pointer;
    text-decoration:underline;
    padding:0;
    font-size:12px;
}

.wd-bundle-attribute{
    margin-top:10px;
}

.wd-bundle-attribute label{
    display:block;
    font-size:12px;
    margin-bottom:5px;
}

.wd-bundle-swatch.active{
    outline:2px solid currentColor;
    outline-offset:1px;
}

@media(max-width:768px){
    .wd-bundle-current{
        max-width:100%;
    }

    .wd-bundle-picker{
        max-width:100%;
        padding:15px;
    }

    .wd-bundle-picker-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px;
    }

    .wd-bundle-picker-thumb{
        max-width:none;
    }

    .wd-bundle-picker-thumb img{
        height:auto;
        aspect-ratio:1/1;
    }
}

@media(max-width:480px){
    .wd-bundle-current{
        display:block;
    }

    .wd-bundle-current-thumb{
        margin-bottom:12px;
    }

    .wd-bundle-picker-grid{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   Build Your Bundle - Front-end Category Selector
========================================================= */

.wd-bundle-category-filter{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 20px;
}

.wd-bundle-category-filter label{
    font-size:13px;
    font-weight:600;
}

.wd-bundle-category-select{
    min-width:240px;
    max-width:360px;
    height:42px;
}

.wd-bundle-product-search{
    min-width:220px;
    max-width:320px;
    height:42px;
    padding:0 12px;
}

.wd-bundle-category-loading{
    font-size:12px;
    opacity:.7;
}

.wd-bundle-category-results.is-loading{
    opacity:.55;
    pointer-events:none;
}

.wd-bundle-category-results > .wd-bundle-empty{
    grid-column:1 / -1;
    margin:0;
}

@media(max-width:480px){
    .wd-bundle-category-filter{
        display:block;
    }

    .wd-bundle-category-filter label{
        display:block;
        margin-bottom:6px;
    }

    .wd-bundle-category-select{
        width:100%;
        max-width:none;
    }

    .wd-bundle-product-search{
        width:100%;
        max-width:none;
        margin-top:8px;
    }

    .wd-bundle-category-loading{
        display:block;
        margin-top:6px;
    }
}


/* Build Your Bundle - combined cart button */
.wd-bundle-cart-action{
    margin-top:18px;
    margin-bottom:18px;
}

.wd-bundle-add-cart{
    min-height:48px;
    padding:0 28px;
}

.wd-bundle-add-cart.loading{
    opacity:.65;
    pointer-events:none;
}


@media(max-width:480px){
    .wd-bundle-selected-thumb{
        width:60px;
        min-width:60px;
        height:60px;
    }

    .wd-bundle-selected-thumb img{
        width:60px;
        height:60px;
    }
}

/* =========================================================
   Build Your Bundle - Category Product Vertical Scroll
========================================================= */

.wd-bundle-category-results{
    max-height:720px;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:12px;
    align-content:start;
    scrollbar-gutter:stable;
}

@media(max-width:768px){
    .wd-bundle-category-results{
        max-height:65vh;
        padding-right:8px;
    }
}


.wd-bundle-scroll-loading{
    grid-column:1 / -1;
    width:100%;
    padding:18px 10px;
    text-align:center;
    font-size:13px;
}

/* =========================================================
   Build Your Bundle - Search first / OR / Category
========================================================= */
.wd-bundle-category-filter{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
    align-items:center;
    gap:12px;
    width:100%;
}

.wd-bundle-search-field,
.wd-bundle-category-field{
    min-width:0;
    width:100%;
}

.wd-bundle-product-search,
.wd-bundle-category-select{
    display:block;
    width:100%;
    min-width:0;
    max-width:none;
    height:42px;
    margin:0;
}

.wd-bundle-filter-or{
    display:block;
    position:static;
    transform:none;
    flex:none;
    width:auto;
    margin:0;
    padding:0 2px;
    font-size:12px;
    font-weight:600;
    line-height:1;
    text-align:center;
    opacity:.6;
}

@media(max-width:768px){
    .wd-bundle-category-filter{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }

    .wd-bundle-search-field,
    .wd-bundle-category-field{
        width:100%;
        min-width:0;
    }

    .wd-bundle-filter-or{
        justify-self:center;
        padding:2px 0;
    }

    .wd-bundle-product-search,
    .wd-bundle-category-select{
        width:100%;
        margin:0;
    }

    .wd-bundle-category-loading{
        margin-top:0;
    }
}

/* =========================================================
   Build Your Bundle - Search / OR / Category layout fix
========================================================= */
.wd-bundle-category-filter{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr) !important;
    grid-template-areas:"search or category" !important;
    column-gap:12px !important;
    row-gap:10px !important;
    align-items:center !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
}

.wd-bundle-search-field{
    grid-area:search;
    min-width:0 !important;
    width:100% !important;
}

.wd-bundle-filter-or{
    grid-area:or;
    position:static !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:42px !important;
    min-width:42px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    text-align:center !important;
    line-height:1 !important;
    box-sizing:border-box !important;
}

.wd-bundle-category-field{
    grid-area:category;
    min-width:0 !important;
    width:100% !important;
}

.wd-bundle-product-search,
.wd-bundle-category-select{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:42px !important;
    margin:0 !important;
    box-sizing:border-box !important;
}

.wd-bundle-category-loading{
    grid-column:1 / -1;
}

@media(max-width:768px){
    .wd-bundle-category-filter{
        grid-template-columns:minmax(0,1fr) !important;
        grid-template-areas:
            "search"
            "or"
            "category" !important;
        gap:10px !important;
    }

    .wd-bundle-search-field,
    .wd-bundle-category-field{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }

    .wd-bundle-product-search,
    .wd-bundle-category-select{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        box-sizing:border-box !important;
    }

    .wd-bundle-filter-or{
        justify-self:center !important;
    }
}

/* =========================================================
   Build Your Bundle - Search / Category clear buttons
========================================================= */
.wd-bundle-search-field,
.wd-bundle-category-field{
    position:relative !important;
}

.wd-bundle-product-search{
    padding-right:44px !important;
}

.wd-bundle-category-select{
    padding-right:72px !important;
}

.wd-bundle-search-clear,
.wd-bundle-category-clear{
    position:absolute !important;
    top:50% !important;
    z-index:5 !important;
    align-items:center !important;
    justify-content:center !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#555 !important;
    font:400 20px/1 Arial,sans-serif !important;
    text-align:center !important;
    cursor:pointer !important;
    transform:translateY(-50%) !important;
    -webkit-appearance:none !important;
    appearance:none !important;
}


.wd-bundle-search-clear{
    right:6px !important;
}

/* Leave the native/theme select arrow on the far right. */
.wd-bundle-category-clear{
    right:34px !important;
}

.wd-bundle-search-clear:hover,
.wd-bundle-category-clear:hover{
    color:#111 !important;
}

.wd-bundle-search-clear:focus,
.wd-bundle-category-clear:focus{
    outline:1px solid currentColor !important;
    outline-offset:-4px !important;
}

/* Stage 3.9.3 - robust clear controls (supports cached older PHP markup) */
.wd-bundle-search-field,
.wd-bundle-category-field{
    position:relative;
}

.wd-bundle-search-field .wd-bundle-search-clear,
.wd-bundle-category-field .wd-bundle-category-clear{
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#555 !important;
    font-size:22px !important;
    line-height:34px !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    z-index:20 !important;
    display:none;
}

.wd-bundle-search-field .wd-bundle-search-clear{
    right:8px !important;
}

.wd-bundle-category-field .wd-bundle-category-clear{
    right:34px !important;
}

.wd-bundle-search-field .wd-bundle-product-search{
    padding-right:48px !important;
}

.wd-bundle-category-field .wd-bundle-category-select{
    padding-right:76px !important;
}


/* =========================================================
   Stage 3.9.4 - robust native Search clear + Category clear
========================================================= */
.wd-bundle-search-field .wd-bundle-product-search[type="search"]{
    -webkit-appearance:auto !important;
    appearance:auto !important;
    padding-right:14px !important;
}
.wd-bundle-search-field .wd-bundle-product-search[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance:auto !important;
    appearance:auto !important;
    cursor:pointer !important;
}
.wd-bundle-category-field .wd-bundle-category-clear{
    display:none !important;
}
.wd-bundle-category-field .wd-bundle-category-select:valid + .wd-bundle-category-clear{
    display:flex !important;
}
.wd-bundle-product-link{
    color:inherit !important;
    text-decoration:none !important;
}
.wd-bundle-picker-thumb .wd-bundle-product-link{
    display:block;
}
.wd-bundle-picker-content h3 .wd-bundle-product-link:hover{
    text-decoration:underline !important;
}


/* =========================================================
   Stage 3.9.5 - deterministic clear controls and clickable cards
========================================================= */
.wd-bundle-search-field,
.wd-bundle-category-field{
    position:relative !important;
}
.wd-bundle-product-search{
    padding-right:46px !important;
}
.wd-bundle-category-select{
    padding-right:76px !important;
}
.wd-bundle-product-search::-webkit-search-cancel-button{
    -webkit-appearance:none !important;
    appearance:none !important;
}
.wd-bundle-search-clear,
.wd-bundle-category-clear{
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:999 !important;
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:#fff !important;
    color:#444 !important;
    box-shadow:none !important;
    font:400 21px/32px Arial,sans-serif !important;
    text-align:center !important;
    cursor:pointer !important;
}
.wd-bundle-search-clear{ right:7px !important; }
.wd-bundle-category-clear{ right:34px !important; }
.wd-bundle-picker-item[data-product-url]{ cursor:pointer; }
.wd-bundle-picker-item a.wd-bundle-product-link{
    pointer-events:auto !important;
    position:relative !important;
    z-index:3 !important;
}