
@layout__max-width: 1760px;
@heading__color__base: #222;

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

@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;
// Header
// Topbar
// ===================
@topbarbg: @color-white;
@topbarcolor: @text__color;
@topbarhovercolor: @theme__color__primary;
@header__background-color: @color-white;
@header-icons-color: @heading__color__base;
@header_padding: 20px; // Make header height bigger than menu height
@header-border-color: @border-color__base;
@header_shadow: 1px 3px 5px 0px rgba(210, 217, 237, 0.3);


@_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: right;
@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: true;

@layout-indent__width: 15px;
// 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 = 'min') and (@break = @screen__m) {
	.col-on-top{
		&.row, .row{
			margin-left: -10px;
			margin-right: -10px;
			flex-wrap: nowrap;
		}
		*.no-wrap-desktop,
		.no-wrap-desktop{
			flex-wrap: nowrap;
		}
		.col-slide,
		.col-banner-beside,
		.col-lg-6{
			padding: 0 10px;
		}
		.col-slide{
			flex: 0 0 auto;
			width: 59.15%
		}
		.col-banner-beside{
			flex: 0 0 auto;
			width: 40.85% 
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	.col-on-top{
		.col-banner-beside{
			display: none;
		}
	}
	rs-module-wrap{
		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%;
					}
				}
			}
		}
	}
}
& 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);
			}
		}
		&.banner-middle{
			.col-banner{
				&.absolute-content-image.lazyload-content{
					background-color: @color-white !important;
				}
			}
		}
	}
	.shipping-block{
		margin-bottom: 4rem;
	}
	// Remove title margin
	.has-white-bg{
		.section{
			&.hot-deal-tab-slider{
				&:not(.show_description){
					.rokan-title{
						margin-bottom: 0;
						h3{
							margin-bottom: 0;
						}
					}
				}
			}
		}
		.section-product{
			margin-bottom: 3rem;
		}
	}
	.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);
	  	}
	}
	.group-product{
		.col-12{
			.section{
				margin-bottom: 0;
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
	.col-on-top{
		margin-top: 4rem;
		margin-bottom: 3rem;
	}
	.shipping-support{
		background-color: @color-white;
		padding: 3.1rem 1.5rem;
		.lib-css(border-radius, @image_border-radius);
		.col-auto{
			flex: 1;
			&:not(:last-child){
				border-left: 1px solid @border-color__base;
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
	.banner-middle{
		.col-banner{
			&.left{
				.content{
					padding-left: 2.5rem !important;
				}
			}		
		}
	}
	body .group-product{
		.section.short_description .ui-tabs-panel .product-item{
			height: calc(~'100% - 20px');
			.flex();
			flex-wrap: nowrap;
			align-items: center;
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
	body .group-product{
		.section{
			margin-bottom: 2rem;
		}
		.margin_0{
			margin-bottom: 0;
		}
	}
	.banner-middle{
		.col-banner{
			&.bottom {
				.flex();
				align-items: flex-end;
			}
		}
	}
}
.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;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
	.banner-middle{
		&:not(.owl-carousel){
			div{
				.col-banner{
					height: auto !important;
					.banner-img{
						img{
							width: 100%;
						}
					}
					&:last-of-type{
						margin-bottom: 2rem;
					}
				}
			}
		}
	}
}
// Product grid
@custom_shadow_light: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
// Grid product hover
& when (@media-common = true){
	.hot-deal-tab-slider{
		.owl-item.active{
			&.last-active-item{
				.product-item{
					.product-item-info{
						&:after{
							display: none !important;
						}
					}
				}
			}	
		}
	}
	.products-grid{
		.product-items{
			.owl-stage{
				padding-top: 15px;
				.owl-item.active{
					&:hover{
						z-index: 4;
						.product-item{
							.product-item-info{
								&:before{
									content: "";
									position: absolute;
									right: -2px;
									top: 0;
									bottom: 0;
									width: 2px;
									background: @color-white;
								}
								@media screen and (min-width: @screen__m){
									.actions-primary{
										&:before{
											content: "";
											position: absolute;
											left: -1px;
											top: 0;
											bottom: 1px;
											width: 1rem;
											.image_border-radius();
											background: @color-white;
										}
									}
								}
							}
						}
					}
					&:not(.last-active-item){
						.product-item{
							.product-item-info{
								&:after{
									content: "";
									position: absolute;
									left: 0;
									top: 20px;
									bottom: 25px;
									.lib-css(border-inline-start, 1px solid @border-color__base);
								}
							}
							&:hover{
								.product-item-info{
									&:after{
										border-inline-start-color: transparent;
									}
								}
							}
						}
					}					
				}
			}
			.product-item{
				.product-item-details {
					> div[class*="swatch-opt"]{
						right: 1px;
					}
				}
			}
		}
	}
	.list.products-list{
		.product-item-details{
			.product-item-name{
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				display: -webkit-box;
				word-break: break-word;
				min-height: 40px;
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m){
	.section{
		.product-items{
			.product-item{
				.lib-css(box-shadow, none , @_prefix: 1);
			}
		}
	}
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
	.group-product{
		margin-right: -1rem;
		margin-left: -1rem;
		> div{
			padding: 0 1rem;
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) {
	.group-product.featured{
		.section{
			margin-bottom: 1.5rem;
			.products.wrapper.list .item-row .product-item:not(:last-of-type){
				margin-bottom: 1.5rem; 
			}
		}
	}
}
.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%;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
	.group-product.featured{
		.section{
			margin-bottom: 1rem;
			.products.wrapper.list .item-row .product-item:not(:last-of-type){
				margin-bottom: 1rem; 
			}
		}
	}
}
//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-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;
		}
	}
}
// Page Builder
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
	#html-body{
		.wrap-slider-banner{
			margin-top: 4rem;
			margin-bottom: 3rem;
			.wrap-slider-revo{
				width: 59.15%;
			}
			.banner-column{
				width: 20.425%;
			}
		}
		.duka2-banner-top{
			.banner-slider{
				width: 20.425%;
			}
			.slider-rivo{
				flex: 1;
			}
		}
	}

}
& when (@media-common = true) {
	.wrap-slider-banner{
		.pagebuilder-column-group{
			margin-left: -10px;
			margin-right: -10px;
			.banner-column{
				.banner-column-item{
					flex: 1;
					.pagebuilder-banner-wrapper{
						height: 100%;
						.pagebuilder-overlay{
							height: 100%;
							p{
								margin-bottom: 0;
							}
						}
					}
					&.banner-column-item-right{
						.pagebuilder-overlay{
							align-items: normal;
							.pagebuilder-poster-content{
								> div {
									height: 100%;
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									.content-top{
										h6{
											background: @element_bg;
											display: inline-block;
											.border_radius(2px);
											padding: @element_padding;
										}
									}
									.button-wrap{
										span{
											display: inline-block;
											border: 2px solid;
											width: 50.5%;
											padding: 19px 0;
											text-align: center;
											.border_radius(2px);
											font-weight: 500;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	#html-body{
		.wrap-slider-banner{
			margin-bottom: 5rem;
    		margin-top: 0;
			.banner-column{
				display: none;
			}
		}
	}	
}
& when (@media-common = true) {
	.row-full-width-inner{
		.hot-deal-tab-slider{
			.rokan-title{
				margin-bottom: 0;
			}
		}
	}
}
// Banner Grid
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
	.banner-grid{
		.banner-grid-item{
			.sub-banner-grid{
				.pagebuilder-banner-wrapper{
					padding: 3rem 0;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
	.banner-grid{
		.banner-grid-item{
			.sub-banner-grid{
				.pagebuilder-banner-wrapper{
					padding: 3rem 0;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) {
	.banner-grid{
		.banner-grid-item{
			.sub-banner-grid{
				.pagebuilder-poster-content{
					padding-bottom: 3rem;
					button{
						font-size: 1.1rem;

					}
				}
			}
		}
	}	
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	#html-body{
		.banner-grid{
			.banner-grid-item{
				flex: 0 0 auto;
				width: 33.3333333333%;
			}
		}
	}
}
& when (@media-common = true) {
	.banner-grid{
		.pagebuilder-column-group{
			margin-left: -10px;
			margin-right: -10px;
		}
		.banner-grid-item{
			.sub-banner-grid{
				.pagebuilder-poster-content{
					button{
						color: @heading__color__base;
						background: @color-white;
						padding: 11px 18px;
						@transition: all 0.3s ease;
						.lib-css(transition, @transition, @_prefix: 1);
						&:hover{
							background: @theme__color__primary;
							color: @color-white;
						}
					}
				}
			}
		}
		.banner-grid-item-single{
			> div {
				height: 100%;
				.pagebuilder-banner-wrapper{
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					.pagebuilder-overlay{
						align-items: flex-end;
					}
				}
			}
		}
	}	
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
	#html-body{
		.banner-grid{
			.banner-grid-item{
				flex: 0 0 auto;
				width: 50%;
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
	#html-body{
		.banner-grid{
			.banner-grid-item{
				flex: 0 0 auto;
				width: 100%;
				&.banner-grid-item-left{
					.pagebuilder-banner-wrapper{
						padding-top: 9rem;
					}
				}
				&.banner-grid-item-single{
					margin-top: 2rem;
					.pagebuilder-overlay{
						min-height: 568px;
					}
				}
			}
		}
	}
}
& when (@media-common = true) {
	.wrap-list-product{
		.rokan-title{
			h3.module-title{
				margin-bottom: 0;
			}
		}
		.pagebuilder-column-group{
			margin-left: -10px;
			margin-right: -10px;
			.featured-products-item{
				padding-left: 10px;
				padding-right: 10px;
			}
			.featured-products-center{
				.wrapper_category_product_tabs{
					.products-list{
						.owl-carousel{
							.owl-item.active{
								.item-row{
									.product-item{
										&:hover{
											@box-shadow: none;
											.lib-css(box-shadow, @box-shadow, @_prefix: 1);
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
	.wrap-list-product {
		.pagebuilder-column-group{
			.featured-products-center{
				position: relative;
				&::after{
					position: absolute;
					top: 0;
					left: 10px;
					right: 10px;
					bottom: 0;
					content: "";
					border-radius: @image_border-radius;
					background: @color-white;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) {
	#html-body{
		.wrap-list-product{
			.pagebuilder-column-group{
				flex-wrap: wrap;
				.featured-products-item{
					display: none;
				}
				.pagebuilder-column{
					flex: 0 0 auto;
					width: 100%;
					&.featured-products-center{
						margin-bottom: 2rem;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {  
	#html-body{
		.wrap-list-product{
			.pagebuilder-column-group{
				.pagebuilder-column{
					&.featured-products-center{
						margin-bottom: 1rem;
					}
				}
			}
		}
	}  
}
// Banner Middle
& when (@media-common = true) {
	.wrap-banner-middle{
		.pagebuilder-column{
			.pagebuilder-poster-content{
				p{
					&:nth-child(2) {
						margin-bottom: 1.7rem;
						line-height: 1.6;
					}
					&:last-of-type {
						margin-bottom: 0;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
	.wrap-banner-middle{
		.pagebuilder-column{
			.pagebuilder-banner-wrapper{
				padding: 1rem 0;
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) {
	#html-body {
		.wrap-banner-middle{
			overflow: hidden;
			.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;
				}
				.banner-middle-item{
					flex: 0 0 auto;
					width: 50%;
				}
				.banner-middle-item{
					.pagebuilder-overlay{
						padding: 35px 30px 42px 0;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
	#html-body{
		.wrap-banner-middle{
			.pagebuilder-column-group {
				.banner-middle-item{
					flex: 0 0 auto;
					width: 100%;
				}
			}
		}
	} 
}
// Shipping Support 
& when (@media-common = true) {
	.shipping-support{
		.space-around{
			.content{
				p{
					margin-bottom: 0;
				}
			}
		}
	}
	.cms-index-index{
		.page-header{
			.sticky{
				.lib-css(box-shadow, @header_shadow, @_prefix: 1);
			}
		}
	} 
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	#html-body{
		.page-wrapper{
			.duka2-banner-top{
				margin-top: 0;
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__l) {
	.page-header{
		.navigation{
			ul.custommenu-list{
				[data-content-type="html"]{
					li{
						&:last-of-type{
							border-bottom: none !important;
						}
					}
				}
			}
		}
	}
}
& when (@media-common = true) {
	body{
		&:not(.cms-index-index){
			.products-grid{
				.product-items{
					.owl-stage{
						.owl-item.active:not(.last-active-item){
							.product-item{
								.product-item-info:after{
									content: none;
								}
							}
						}
					}
				}
			}     
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	.products-grid{
		.product-items{
			.owl-stage{
				.owl-item.active:not(.last-active-item){
					.product-item{
						.product-item-info:after{
							top: 15px !important;
						}
					}
				}
			}
		}
	}    
}