/*
 Theme Name:   BFHU
 Description:  BFHU
 Template:     atelier
 Author:       Mayk
 Version:      1.0
*/

.grid-2x2 {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
@media (max-width: 768px) {
    .grid-2x2 {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }
}

/* change woo message button style */
html .product-main .button.wc-forward{
background: #FFF !important;
color: #9e83b6 !important;
padding: 10px;
}

/* fix logo dropping out of header area */
.full-center #logo, .full-center #logo a{
max-height: 0;
}

/* amend check styles */
#add_payment_method #payment div.payment_box::before, 
.woocommerce-cart #payment div.payment_box::before, 
.woocommerce-checkout #payment div.payment_box::before{
display: none !important;
}
html .woocommerce #payment div.payment_box{
padding: 0;
background-color: #FFF !important;
}

/* hide add to cart on main wpp products page */
.products .shop-actions{
display: none;
}

/* menu 2 col list */
.menu-item.col-2-list ul.sub-menu{
columns: 2;
}

/* position the overlay menu social icons at the bottom on mobile */
.mobile-overlay-menu-social-icons{
text-align: center;
position: absolute;
width: 100%;
bottom: 10px;
}
.mobile-overlay-menu-social-icons ul{
margin-left: 0;
}

/* fix line height issue */
.page-heading h1{
line-height: 63px;
}

/* fix bullet points add indent and proper spacing */
.content-wrap ul,
.spb_text_column ul, 
.box-content-wrap ul, 
#comments-list .comment-body ul,
.sf-icon-box-content ul{
list-style: disc outside none;
margin-left: 35px;
}
.content-wrap ol,
.spb_text_column ol, 
.box-content-wrap ol, 
#comments-list .comment-body ol,
.sf-icon-box-content ol{
margin-left: 35px;    
}
.content-wrap li,
.spb_text_column li, 
.box-content-wrap li, 
#comments-list .comment-body li,
.sf-icon-box-content li{
margin-bottom: 10px;  
list-style-position: outside;
}

/* changed boxed content spacing on blog posts */
.boxed-inner-page #main-container{
margin-top: 75px;
}
.boxed-inner-page #main-container .container figure.media-type-{
margin-left: -30px;
margin-right: -30px;
}

/* update the footer menu styles */
#footer .title-wrap{
margin-bottom: 0;
}
#footer h3.spb-heading{
font-size: 20px;
margin-bottom: 15px;
}
#footer h3.spb-heading span{
border-bottom: 0;
padding: 0;
}
#footer a,
#footer li a{
padding: 0;
line-height: 25px;
display: inline;
font-size: 14px;
}

/* change top bar social icons position */
#top-bar .tb-right ul.social-icons,
#top-bar .tb-right a{
float: right;
}
#top-bar .tb-right a{
padding-left: 5px;
}
#top-bar .tb-right a:focus{
color: #522178;
}

/* increase top banner text size */
#top-bar .container .tb-text{
font-size: 14px;
}

/* hide archive by author meta */
.blog-item-details{
display: none;
}

/* hide blog date on modules */
.blog-items .date-overlay{
top: 0 !important;
}

/* even out the spacing in the footer */
#footer{
padding-bottom: 10px;
}

/* fix right aux padding */
.full-center .header-4 .header-right, 
.full-center .header-4-alt .header-right{
padding-left: 17px;
}

/* add down arrow to menu items with children */
nav .menu .menu-item-has-children > a{
padding-right: 34px !important;
position: relative;
}
nav .menu .menu-item-has-children > a:after{
font-family: "Font Awesome 5 Pro" !important;
content: "\f107" !important;
display: inline-block !important;
font-weight: 300 !important;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
position: absolute;
right: 0;
margin-right: 26px;
margin-top: 2px;
width: 0;
height: 0;
}
#mobile-menu #menu-mega-menu .menu-item-has-children > a:after{
right: 22px;
left: auto;
opacity: 1;
margin: 0 !important;
}

/* don't add the arrow to sub mega menu items */
nav .menu .menu-item-has-children.sf-mega-menu .menu-item-has-children a:after{
content: "" !important;
}

/* ellipsis the recent posts title */
.spb_recent_posts_widget .recent-post h5{
white-space: nowrap; 
text-overflow: ellipsis; 
overflow: hidden;
width: 100%;
font-weight: normal;
}

/* align buttons in the menu vertically middle */
.header-right .aux-item.text .sf-button{
display: inline-block;
margin: 0;
}

/* change font size of large button in header */
.header-right .aux-item.text .sf-button.large{
font-size: 16px;
font-weight: 400;
}

/* hide some woo defaults */
.product .product_meta .posted_in,
.product .product_meta .sku_wrapper{
display: none;
}

/* set special icons right padding style */
.icons-right-padding i{
margin-right: 10px;
}

/* font awesome pro fix */
.fa, 
.fas,
.far,
.fal,
.fad{
font-family: "Font Awesome 5 Pro" !important;
}

/* fix accordion font size */
.spb_accordion .ui-accordion .ui-accordion-header{
font-size: 18px;
font-weight: normal;
}

/* reduce search icon spacing */
.header-left .aux-item, .header-right .aux-item{
padding-left: 0 !important;
}

/* sort more aux item spacing */
.header-right .aux-item.aux-item-social{
padding-right: 14px !important;
}
.header-right .aux-item.text{
padding-right: 27px !important;
}

/* increase top right social icon size */
#header .header-right ul.social-icons li a {
padding: 15px;
width: 47px;
height: 47px;
line-height: 47px;
font-size: 18px;
}

/* fix mobile active menu link */
#mobile-menu li.current-menu-item>a{
color: #FFF !important;
}

/* sub menu font weight fix */
nav.std-menu ul.sub-menu > li > a, 
nav.std-menu ul.sub-menu > li > div.current-language{
font-weight: 300;
font-size: 16px;
}

/* mega menu align fix */
li.sf-menu-item-html{
padding-top: 40px !important;
padding-bottom: 40px !important;
}
li.sf-menu-item-html a{
padding-left: 0 !important;
}
nav.std-menu ul.sub-menu,
li.menu-item.sf-mega-menu > ul.sub-menu{
letter-spacing: inherit;
}
.sf-mega-menu .mega-menu-widget img{
padding-top: 15px;
}

/* mega menu sizing fixes */
.sf-mega-menu .menu-item-type-custom a{
font-size: 25px;
}
.sf-mega-menu ul.sub-menu > li > a{
font-size: 16px !important;
font-weight: 300 !important;
}

/* fix search icon position */
#header .aux-item ul.menu > li > a.header-search-link i{
height: 25px;
}

/* ellipis and reduce font and padding on small screen just before break point for mobile */
@media only screen and (max-width: 1300px) {
    /*
    .menu .sf-mega-menu.parent .menu-item-text{
        white-space: nowrap; 
        text-overflow: ellipsis; 
        overflow: hidden;
        width: 100%;
        font-weight: normal;
        width: 68px;
        display: inline-block;
    }
    #menu-mega-menu .menu-item a::after{
        bottom: 25px;
    }*/
    #header .header-right ul.social-icons li a {
        padding: 8px;
        width: 30px;
        height: 30px;
        font-size: 15px;
    }
    .header-right .aux-item.text .sf-button{
        padding: 10px 20px;
    }
    .full-center .fw-header #logo{
        padding: 0;
    }
    .full-center .header-right{
        padding-left: 0 !important;
    }
    #header .aux-item ul.menu > li > a.header-search-link i{
        font-size: 18px;
        height: auto;
    }
    .full-center .header-right .aux-item.aux-search{
        padding-left: 0;
        margin-left: 0;
    }
}
@media only screen and (max-width: 1137px) {
    #header .header-right .aux-item.aux-item-social{
        display: none;
    }
}


/* hide continue shopping link on basket page */
.continue-shopping{
display: none;
}

/* fix checkbox and radio on checkout page */
.woocommerce-checkout input[type="checkbox"]{
float: none !important;
width: auto !important;
margin-right: 10px !important;
}
.woocommerce-checkout label.checkbox,
.mc4wp-checkbox-woocommerce label{
width: auto !important;
line-height: 25px !important;
}
.woocommerce-checkout .woocommerce-billing-fields input[type="radio"]{
float: left !important;
width: auto !important;
margin-bottom: 15px;
clear: both;
margin-top: 3px;
}
.woocommerce-checkout .woocommerce-billing-fields input[type="radio"]:last-of-type{
margin-bottom: 0;
}
.woocommerce-checkout .woocommerce-billing-fields label.radio{
line-height: 18px !important;
padding-left: 10px !important;
width: 90% !important;
margin-bottom: 15px !important;
}
.woocommerce-checkout .woocommerce-billing-fields label.radio:last-of-type{
margin-bottom: 0 !important;
}

/* hide order notes label and make full width */
#order_comments_field label{
display: none;
}
textarea#order_comments{
width: 100% !important;
float: none !important;
}

/* sort spacing after privacy policy bit */
.woocommerce-privacy-policy-text p{
margin-bottom: 20px;
}

/* fix checkout payment box colour */
.woocommerce #payment div.payment_box{
background: #dfdcde !important;
}

/* center social icons */
.center-social-icons.spb_text_column .social-icons{
display: flex;
justify-content: center;
}

/* add margin under order recieved items */
.woocommerce-order-received ul.order_details li{
margin-bottom: 15px;
}

/* fix stupidly small width table data for tolas on order recived page */
.woocommerce-order-received table.order_details td.product-name,
.woocommerce-order-received table.order_details td.product-total{
width: 50%;   
}

/* loose border and padding around address */
.woocommerce .woocommerce-customer-details address{
border: 0;
padding: 0;
}

/* helpers */
.height-400{
height: 400px;
}

/* fix billing title width on checkout */
.woocommerce select#billing_title{
width: 75% !important;
}
@media only screen and (max-width: 479px) {
    .woocommerce select#billing_title{
        width: 100% !important;
    }
}

/* hide optional text on checkout */
.woocommerce span.optional{
display:none;
}

/* change woo alert message border colour */
.woocommerce .woocommerce-message, 
.woocommerce-page .woocommerce-message{
border-color: #9e83b6;
background-color: #9e83b6 !important;
color: #FFF !important;
}
.woocommerce .woocommerce-message span.black, 
.woocommerce-page .woocommerce-message span.black{
color: #222 !important;
}
.woocommerce .woocommerce-message a{
color: #FFF !important;
}


/* remove extra black lines on basket page */
.woocommerce .shop_table.cart{
border-bottom: none;
}
.woocommerce .cart-collaterals{
border-top: none;
}

/* remove your order heading on checkout page */
.woocommerce #order_review_heading{
display: none;
}

/* add light style for button */
.sf-button.accent.light{
border-color: #9e83b6 !important;
color: #9e83b6 !important;
}
.sf-button.accent.light:hover{
color: #FFF !important;
}

/* remove blog modules indent on image */
.masonry-items .blog-item figure.thumb-media-image + .details-wrap::before, 
.masonry-items .blog-item figure.thumb-media-slider + .details-wrap::before{
display: none;
}
.masonry-items .blog-item .details-wrap{
padding-top: 25px !important;
}
.masonry-items .blog-item .details-wrap h2, 
.masonry-items .blog-item .inst-overlay h2{
margin-bottom: 0;
}
.masonry-items .blog-item .details-wrap h2, 
.masonry-items .blog-item .inst-overlay h2{
margin-bottom: 15px;   
}

/* center share icons */
.post-aux-wrap .post-details-wrap{
float: none;
width: auto;
}
.post-details-wrap .sf-share-counts{
text-align: center;
padding-top: 5px;
}
.sf-share-counts .share-text{
color: #222;
float: none;
}

/* divider colors */
.spb_divider.accent{
border-color: #9e83b6;
}
.spb_divider.white{
border-color: #FFF;
}
.spb_divider.black{
border-color: #000;
}

/* change breadcrumb rollover colour */
#breadcrumbs a:hover{
color: #000 !important;
}

/* Basic form styles */
.form-row-wide{
clear: both;
}
.form-row-first{
width: 47.0588235294%;
float: left;
margin-right: 5.8823529412%;
clear: both;
}
.form-row-last {
width: 47.0588235294%;
float: right;
}
@media screen and (max-width: 767px){
    .form-row-first, .form-row-last{
        float: none;
        width: 100%;
    }
}

/* min width buttons */
.btns-min-width-150 a.sf-button{
min-width: 150px;
text-align: center;
}
.btns-min-width-330 a.sf-button{
min-width: 330px;
text-align: center;
}

/* helpers */
.text-small{
line-height: 18px;
font-size: 15px;
}
.no-margin-top{
margin-top: 0 !important;
}
.margin-top-lg{
margin-top: 30px !important;
}
.margin-top-sm{
margin-top: 10px !important;
}
.width-full{
width: 100%;
}
.text-center{
text-align: center;
}
.margin-btm{
margin-bottom: 24px;
}


/* mobile only styles */
@media screen and (max-width: 767px)
{
    /* add margin under image banners */
    .sf-image-banner{
        margin-bottom: 25px;
    }
	
	/* Fixed boxed inner top padding bug */
    .boxed-inner-page #container{
        padding-top: 0;
    }
    
}

/* change woo notice button */
html .wc-block-components-notice-banner{
padding: 5px 5px 5px 10px !important;
display: flex !important;
align-items: center !important;   
}
html .wc-block-components-notice-banner__content{
padding: 0 !important;
display: flex !important;
gap: 10px;
align-items: center !important;
}
html .wc-block-components-notice-banner .button.wc-forward{
background-color: #522178 !important;
opacity: 1 !important;
padding: 10px 20px !important;
border-radius: 3px !important;
color: #fff !important;
text-decoration: none !important;
order: 1 !important;
margin-left: auto !important;
}
@media screen and (max-width: 767px)
{
	html .wc-block-components-notice-banner__content{
		flex-direction: column;
		align-items: start !important;
	}
	html .wc-block-components-notice-banner .button.wc-forward{
		width: 100% !important;
		text-align: center;
	}
}