
@layout__max-width: 1440px;

@theme__color__primary: #0063d1;
// Button 
@button__border-radius: 2px;


// Slide show variable
@vertical_menu_title_color: #fff;

@element_bg: #fdc801;
@element_border-radius: 2px;
@element_padding: 0.5rem 1.5rem;
@banner_element_bg: @element_bg;
@banner_element_border-radius: @element_border-radius;
@banner_element_padding: @element_padding;

@image_border-radius: 5px;
@img_category_thumb-radius: @image_border-radius;

@category-name-size: 13px;
@category-name-text-transform: uppercase;

@align_category_name: flex-end;
@justify_category_name: center;
@text_align_category_name: center;
@category-name-color: @heading__color__base;

@category_name-padding: 2rem;
@category_name_mobile-padding: 1.5rem;
// Header
// Topbar
// ===================
@topbarbg: @color-white;
@topbarcolor: @text__color;
@topbarhovercolor: @theme__color__primary;
@header__background-color: @color-white;
@header-icons-color: @heading__color__base;
@header-border-color: @border-color__base;
@header_shadow: false;
@header_sticky_border: @border-color__base;
// Navigation
@navigation-desktop__background: @heading__color__base;
@vertical_menu_title_bg: @theme__color__primary;


@_search-border-color: @border-color__base;
@_search-border-width: 2px;

// Footer
@footer__background-color: #084d9a;

@footercolor: #8eb9e9;
@footer_hover_color: @color-white;
@footer_font-size: 1.4rem;

@footer-title-font-size: 1.8rem;
@footer-title-font-weight: 500;
@footer-title-color: @color-white;
@footer-title-text-align: left;
@footer-title-transform: capitalize;
@footer-border-color: #1b5ba2;

@footer-title-mobile-font-size: 1.6rem;
@footer-title-mobile_bg: lighten(@footer__background-color, 5%);
@footer-title-mobile_margin: 0;
@footer-title-mobile_padding: 1.5rem 0;
@footer_content_mobile_margin_top: 0.4rem;
@footer_content_mobile_margin_bottom: 1.4rem;

@footer_menu_mobile_color: @greycolor;
@footer_item_width_tabel: 50%;
@use_custom_page-bg: false;

@banner__content_left_padding: 1.5rem 1.5rem 1.5rem 5rem;

// Footer
& when (@media-common = true) {
	.page-footer{
		.color_primary {
			.lib-css(color, @footer-title-color);
		}
		.footer-static_link {
			.footer-links {
				&.footer-newsletter{
					.footer-contents{
						> p{
							color: #548dcd !important;
							a{
								&:not(:hover){
									color: #548dcd
								}
								&:hover{
									.lib-css(color, @footer-title-color);
								}
							}
						}
					}
				}
			}
		}
	}
}
// Slide show on top
@content_banner_padding: 10% 0 16%;
@content_banner_bottom_padding: 1.5rem 0 3rem;
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	.col-on-top{
        .col-slide{
			flex: 0 0 auto;
			width: 100%;
            padding: 0 15px;
		}
		.col-banner-beside{
			display: none;
		}
	}
	.wrapper-the-blue-sky-slider{
		padding: 0 1.5rem;
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	.col-on-top{
		.banner{
			height: 100%;
			.col-banner{
				height: 100%;
				.banner-img{
					img{
						position: relative;
						top: 50%;
					    left: 50%;
					    @transform: translate(-50%, -50%);
					    .lib-css(transform, @transform, @_prefix: 1);
					    max-width: 100%;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
	.wrapper-the-blue-sky-slider .container-the-blue-sky-slider .the-blue-sky-banner-text {
		h2{
			line-height: 1;
		}
		p{
			margin-top: 2rem;
		}
	}
}
& when (@media-common = true) {
	.cms-index-index{
		.page-footer{
			margin-top: 0;
		}
	}
	.col-on-top{
		.section, rs-module-wrap{
			margin-bottom: 0 !important;
		}
		.banner {
			.col-banner {
				.content {
					.button-wrap{
						.btn{
							min-width: 55%;
						}
					}
				}
			}
		}
	}
	.banner-middle{
		.col-banner{
			.content{
				h3{
					line-height: 1.5;
				}
			}
		}
	}
	.banner {
		.col-banner {
			.content {
				.button-wrap{
					.btn{
						text-align: center;
						margin: auto;
					}
				}
			}
			&.radius{
				.lib-css(border-radius, @image_border-radius);
			}
		}

	}
	.hot-deal-tab-slider,
	.wrapper_product_tabs{
		.module-title,
		.rokan-title{
			margin-bottom: 1.5rem;
		}
	}
	.category-tab-section{
		z-index: 3;
	}
	html body .page-wrapper .verticalmenu.navigation .title-category-dropdown{
		.lib-css(border-radius, @form-element-input__border-radius);
	}
	.shipping-support{
		border: 1px solid @border-color__base;
		.lib-css(border-radius, @image_border-radius);
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
	.shipping-support{
		padding: 3.1rem 1.5rem;
		.col-auto{
			flex: 1;
			&:not(:last-child){
				border-left: 1px solid @border-color__base;
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	.shipping-support{
		padding: 2rem 0 1rem;
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
	.col-on-top{
		margin: 3rem 0;
	} 
	body .group-product{
		.section.short_description .product-items .product-item{
			height: calc(~'100% - 20px');
			.flex();
			flex-wrap: nowrap;
			align-items: center;
		}
	}
	body .header-container .custommenu.navigation li.level0 {
		&.fullwidth{
			.level0.submenu {
				box-shadow: none;
				padding: 3rem 3rem 0;
				border: 1px solid @border-color__base;
				border-bottom: 0;
				.menu-bottom-block{
					box-shadow: none;
					margin: 0 -3.1rem;
					margin-top: 0.8rem;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
	body .group-product{
		.margin_0{
			margin-bottom: 0;
		}
	}
	.banner-middle{
		.col-banner{
			&.bottom {
				.flex();
				align-items: flex-end;
			}
		}
		&.owl-carousel{
			margin-bottom: 2rem;
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	body .group-product{
		.section{
			margin-bottom: 1rem;
		}
	}
	.section .products.wrapper.list .product-items .item-row .product-item:not(:last-of-type){
		margin-bottom: 1rem;
	}
	.banner-middle{
		div{
			.col-banner{
				&:last-of-type{
					margin-bottom: 0;
				}
			}
		}
	}
}
// Product grid
@custom_shadow_light: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
// List product
& when (@media-common = true) {
	.list.products-list {
		.product-items {
			.product-item {
				.product-item-info {
					.product-item-details {
						.price-box{
							margin-top: 1.1rem;
						}
					}
				}
			}
		}
	}
	.section.short_description{
		.products.wrapper.list {
			.product-items {
				.product-item {
					@media only screen and (min-width: @screen__m){
						.product-item-info{
							padding: 2.5rem 10% 2.5rem 2.5rem;
						}
					}

					.special-price,
					.minimal-price {
						.price{
							.lib-font-size(16);
						}
					}
					.actions-primary{
						width: 100%;
						.action{
							width: 100%;
							&.tocart{
								.small_button_padding();
							}
						}
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
	.group-product{
		> div{
			padding: 0 1rem;
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	.section {
		.products.wrapper.list {
			.product-item .product-item-info {
				.product-item-photo{
					max-width: 41%;
				}
			}
		}
	}
}
//Blog post 
@recent_post_title_font-size: 1.6rem;
@post_slider_padding: @margin_gobal_value 0;
@recent_post_infor-padding: 2rem 0 0;
@recent_post_infor-mobile-padding: 1.5rem 0 0;
@recent_post_hover_box-shadow: false;
& when (@media-common = true) {
	// Blog recent post
	.block-recent-posts{
		.post-list-wrapper {
			.blog-list-post {
				.post-holder {
					.post-item{
						.blog-post-thumb{
							.image_border-radius();
						}
						.blog-post-info {
							.post-content {
								.post-description{
									display: none
								}
							}
						}
					}
				}
			}
		}
	}
	div[class*="block-recent-posts"]{
		padding: 0;
	}
}
// Brand 
& when (@media-common = true) {
	.block-widget-rokanthemes-brand{
		border-top: 1px solid @border-color__base;
	}
}
// Cms block
& when (@media-common = true) {
	.section{
		&.has-white-bg{
			div[class*="block-recent-posts"]{
				margin-bottom: 0;
			}
		}
		&.margin_bottom_0{
			margin-bottom: 0;
		}
		&.not-padding{
			padding: 0;
		}
	}
	.auto-play{
		background-color: @theme__color__primary;
		@box-shadow: 800px 0  @theme__color__primary, -800px 0  @theme__color__primary;
	  	.lib-css(box-shadow, @box-shadow, 1);
	  	@media only screen and (max-width: @screen__l){
	  		@box-shadow: 100px 0  @theme__color__primary, -100px 0  @theme__color__primary;
	  		.lib-css(box-shadow, @box-shadow, 1);
	  	}
	}
}
// Widget category tab
& when (@media-common = true) {
	.wrapper_sub_category_tabs{
		&.onlyparent {
			.list-category-item {
				.category-item {
					a {
						.transition();
						.cate-name.cate-count{
							width: auto;
							background: @color-white;
							.lib-css(border-radius, @form-element-input__border-radius);
							padding: 1rem;
							width: 100%;
							
						}
						&:hover{
							.cate-name.cate-count{
								.lib-css(background, @button__hover__background);
								color: @color-white;
							}
						}
					}

				}
			}
		}
	}
}
// Page Builder
& when (@media-common = true) {
	.wrap-slider-banner{
		.pagebuilder-column-group{
			margin-left: -10px;
    		margin-right: -10px;
			.banner-top{
				> div{
					flex: 1;
					.pagebuilder-banner-wrapper{
						height: 100%;
						.pagebuilder-overlay{
							height: 100%;
						}
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
	#html-body{
		.wrap-slider-banner{
			margin-bottom: 3rem;
			.pagebuilder-column-group{
				.wrap-slider{
					flex: 0 0 auto;
    				width: 71.4%;
				}
				.banner-top{
					flex: 0 0 auto;
    				width: 28.6%;
				}
			}
		}
	}	
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) {
	#html-body{
		.banner-top{
			.pagebuilder-banner-wrapper{
				.pagebuilder-overlay{
					padding: 15px 30px 15px 30px;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	#html-body{
		.wrap-slider-banner{
			margin-bottom: 5rem;
			.pagebuilder-column-group{
				.banner-top{
					display: none;
				}
			}
		}
	}
}
// Banner Center
& when (@media-common = true) {
	#html-body{
		.banner-center-top{
			.pagebuilder-column-group{
				margin-left: -10px;
    			margin-right: -10px;
				.pagebuilder-column{
					.pagebuilder-poster-content{
						h3{
							margin-bottom: 2.2rem;
						}
					}
				}
			}
		}
	}
	.banner-center-bottom{
		.pagebuilder-column-group{
			margin-left: -10px;
			margin-right: -10px;
			.pagebuilder-column{
				.pagebuilder-poster-content{
					h3{
						margin-bottom: 20px;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
	.banner-center-top{
		.pagebuilder-column-group{
			.pagebuilder-column{
				.pagebuilder-banner-wrapper{
					padding: 1.8rem 0;
				}
			}
		}
	}
	.banner-center-bottom{
		.pagebuilder-column-group{
			.pagebuilder-column {
				.pagebuilder-banner-wrapper{
					padding: 2.2rem 0;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) {
	#html-body {
		.banner-center-top{
			.banner-center-column{
				.pagebuilder-overlay{
					padding-right: 30px;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
	#html-body {
		.banner-center-top{
			margin-bottom: 2rem;
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) {
	#html-body {
		.banner-center-top{
			margin-bottom: 6rem;
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	#html-body{
		.banner-center-top{
			overflow: hidden;
			margin-bottom: 5rem;
			.pagebuilder-column-group{
				flex-wrap: nowrap;
                overflow: hidden;
                overflow-x: scroll;
                -ms-overflow-style: none;  /* IE and Edge */
                scrollbar-width: none;  /* Firefox */
                &::-webkit-scrollbar{
                    display: none;
                }
				.pagebuilder-column{
					flex: 0 0 auto;
					width: 50%;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
	#html-body{
		.banner-center-top{
			.pagebuilder-column-group{
				.pagebuilder-column{
					width: 100%;
					flex: 0 0 auto;
				}
			}
		}
	}   
}
// Group Product
& when (@media-common = true) {
	.group-product{
		.pagebuilder-column-group{
			margin-left: -10px;
    		margin-right: -10px;
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
	#html-body{
		.group-product{
			.pagebuilder-column-group{
				.group-product-column{
					justify-content: center;
					position: relative;
					&::after{
						position: absolute;
						top: 0;
						bottom: 0;
						left: 10px;
						right: 10px;
						background: @color-white;
						content: "";
						border-radius: @image_border-radius;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) {
	#html-body{
		.group-product{
			.pagebuilder-column-group{
				flex-wrap: wrap;
				.pagebuilder-column{
					flex: 0 0 auto;
					width: 100%;
					&.group-product-column{
						margin-bottom: 2rem;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	#html-body{
		.group-product {
			.pagebuilder-column-group {
				.pagebuilder-column{
					&.group-product-column{
						margin-bottom: 1rem;
					}
				}
			}
		}
	} 
}
& when (@media-common = true) {
	.wrapper_sub_category_tabs{
		&.onlyparent{
			.category-thumb-section{
				.list-category-item {
					.category-item {
						a{
							&:hover{
								.cate-name.cate-count{
									.count{
										color: @color-white;
									}
								}
								
							}
							.cate-name.cate-count{
								.count{
									@transition: all 0.3s ease;
									.lib-css(transition, @transition, @_prefix: 1);
									color: @color-gray40;
									margin-top: 2px;
									text-transform: capitalize;
									.bracket{
										font-size: 0;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
& when (@media-common =true) {
	.page-footer{
		.footer-static_link{
			.footer-links{
				.footer-title{
					text-align: right;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) {
	.page-header {
		.navigation{
			ul.custommenu-list {
				li{
					&.active{
						border-top: none;
						border-bottom: none;
					}
					&.level0{
						ul{
							li.menu-item-has-children{
								border-top: none;
							}	
						}
					}
					&.my_account_link_custom{
						border-top: none;
					}
				}
			}
			ul.verticalmenu-list{
				li.ui-menu-item{
					&:first-child{
						border-top: 0;
					}
				}
			}
		}
	}
}
