@button__hover__color: @color-white;
// Button 
@button__border-radius: 40px;

@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;

// Footer
@footer_item_width_tabel: 50%;

@use_custom_page-bg: true;
@module_margin_bottom: 2.5rem;
// Reset menu style

// Slide show on top
@content_banner_padding: 10% 0 16%;
@layout-indent__width: 15px;
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
	.col-on-top{
		&.row, .row{
			margin-left: -10px;
			margin-right: -10px;
			> div[class*="col-"]{
				padding: 0 10px;
			}
		}
		*.no-wrap-desktop,
		.no-wrap-desktop{
			flex-wrap: nowrap;
		}
		.banner{
			position: relative;
			z-index: 3;
			> div{
				.col-banner{
					&:not(:first-child){
						margin-top: 2rem;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
	.col-on-top{
		margin-top: 3rem;
	}
	.cms-index-index{
		.header-container{
			&:not(.sticky){
				.lib-css(border-bottom, 1px solid @header-border-color);
			}
		}
	}
}
.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-middle{
		.col-banner{
			.content{
				h3{
					line-height: 1.5;
				}
			}
		}
	}
	.banner {
		.col-banner {
			.content {
				.button-wrap{
					.btn{
						.border_radius(2px);
						width: 55%;
						text-align: center;
						margin: auto;
					}
				}
			}
		}

	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
	.banner-middle{
		.col-banner{
			&.left{
				.content{
					padding-left: 2.5rem !important;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
	.group-product.featured{
		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; 
				}
			}
		}
		> div{
			&:last-of-type{
				.section{
					margin-bottom: 0;
				}
			}
		}
	}
}
.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
								}
							}
						}
					}
				}
			}
		}
	}
}
// Brand 
& when (@media-common = true) {
	body{
		.section.block-widget-rokanthemes-brand{
			border-top: 1px solid @border-color__base;
			border-radius: 0;
		}
	}
}
// Sub category
// Vertical thumb image
@show_sub_category_bg_color: true;
@sub_category_bg_color: @header__background-color;
@sub_category_widget_padding: 1.5rem 0;

@hozital_image_max-width: 25%;
@padding-category-thumb: 1rem;

@category-name-font-weight: @text-weight;
@category-name-size: 14px;
@category-name-mobile-size: 13px;
@category-name-text-transform: capitalize;
@line-height_category_name: 1.3;

@category_name-padding: 1.2rem 3rem 1rem;
@category_name_mobile-padding: 1rem;
@category_name_position: false;
@align_category_name: center;
@justify_category_name: flex-start;
@text_align_category_name: false;
@img_category_thumb-radius: false;

@img_category_thumb_hover: false;
& when (@media-common = true) {
	.wrapper_sub_category_tabs{
		@box_shadow: 800px 0 @sub_category_bg_color, -800px 0 @sub_category_bg_color;
		.lib-css(box-shadow, @box_shadow, @_prefix: 1);	
		@media only screen and (max-width: @screen__l){
	  		@box-shadow: 300px 0 @sub_category_bg_color, -300px 0 @sub_category_bg_color;
	  		.lib-css(box-shadow, @box-shadow, 1);
	  	}
		.owl-carousel {
			.owl-stage-outer{
				padding: 0;
				margin: 0;
			}
		}
	}
}
// Banner Slider
@image_border-radius: 20px;
& when (@media-common = true){
	.banner-slider{
		.banner-slider-item{
			.pagebuilder-banner-wrapper{
				border-radius: @image_border-radius;
			}
		}
	}
	.banner-slider-right{
		.banner-slider-item{
			.pagebuilder-banner-wrapper{
				.pagebuilder-overlay{
					.pagebuilder-poster-content{
						.content-top{
							text-align: center;
							h6{
								display: inline-block;
								padding: 0.5rem 1.5rem;
								background: @element_bg;
								border-radius: @element_border-radius;
							}
						}
						.button-wrap{
							text-align: center;
							span{
								padding: 8px 47px;
								display: inline-block;
								border: 1px solid @color-white;
							}
						}
					}
				}
			}
		}
	}
	.wrap-slider-banner{
		.pagebuilder-column-group{
			margin-left: -10px;
			margin-right: -10px;
			.banner-slider-left{
				.banner-slider-left-item{
					flex: 1;
					height: 100%;
					.pagebuilder-banner-wrapper{
						height: 100%;
						.pagebuilder-overlay{
							height: 100%;
						}
					}
				}
			}
			.pagebuilder-column{
				.banner-slider-right-item{
					flex: 1;
					height: 100%;
					.pagebuilder-banner-wrapper{
						height: 100%;
						.pagebuilder-overlay{
							height: 100%;
						}
					}	
				}
			}
		}
	}
}
// Banner Slider
& when (@media-common = true) {
	.banner-slider-right{
		.banner-slider-right-item{
			.pagebuilder-banner-wrapper{
				.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;
									padding: @element_padding;
									.border_radius(2px);
									margin-bottom: 2.2rem;
								}
								h3{
									line-height: 0.8;
								}	
							}
							.button-wrap{
								span{
									display: inline-block;
									border: 2px solid;
									width: 55.5%;
									padding: 19px 0;
									text-align: center;
									.border_radius(2px);
								}
							}
						}
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
	.wrap-slider-banner{
		margin-top: 6rem;
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	#html-body {
		.pagebuilder-column-group{
			flex-wrap: nowrap;
			.wrap-slider{
				flex: 0 0 auto;
				width: 66.6666666667%;
			}
			.banner-slider-left{
				display: none;
			}
			.banner-slider-right{
				flex: 0 0 auto;
				width: 33.3333333333%;
				z-index: 1;
			}
		}	
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
	#html-body {
		.pagebuilder-column-group{
			.wrap-slider{
				flex: 0 0 auto;
				width: 100%;
			}
			.banner-slider-right{
				display: none;
			}
		}	
	}
}
// Banner Middle
& when (@media-common = true) {
	.wrap-banner-middle{
		.banner-middle{
			.banner-middle-item{
				.pagebuilder-overlay{
					h3{
						line-height: 1.5;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
	#html-body{
		.wrap-banner-middle{
			.banner-middle{
				.banner-middle-item{
					.pagebuilder-banner-wrapper{
						padding: 18px 0;
						.pagebuilder-overlay{
							padding-left: 4rem;
						}
					}
				}
			}
		}
	}	
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	#html-body{
		.wrap-banner-middle{
			overflow: hidden;
			.pagebuilder-column-group{
				overflow: hidden;
				overflow-x: scroll;
				-ms-overflow-style: none;  /* IE and Edge */
				scrollbar-width: none;  /* Firefox */
				&::-webkit-scrollbar{
					display: none;
				}
				.banner-middle{
					width: 50%;
					flex: 0 0 50%;
				}
			}
		}
	}	
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
	#html-body{
		.wrap-banner-middle{
			.pagebuilder-column-group{
				.banner-middle{
					width: 100%;
					flex: 0 0 100%;
				}
			}
		}
	}	
}
// Grid Product
& when (@media-common = true) {
	.grid-product-tab{
		.rokan-title{
			.module-title{
				margin-bottom: 0;
			}
		}
		.pagebuilder-column-group{
			margin-left: -10px;
    		margin-right: -10px;
			.wrap-product-tabs{
				.product-tab-item{
					.custom-hover{
						.wrapper_product_tabs{
							.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 = 'max') and (@break = @screen__l) {
	#html-body {
		.grid-product-tab{
			.pagebuilder-column-group{
				flex-wrap: wrap;
				.pagebuilder-column{
					width: 100%;
					&.wrap-product-tabs{
						margin-bottom: 2rem;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
	#html-body{
		.grid-product-tab{
			.pagebuilder-column-group{
				.pagebuilder-column.wrap-product-tabs{
					margin-bottom: 1rem;
				}
			}
		}
	}   
}
// List Product
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) {
	#html-body{
		.wrap-list-product{
			.rate-products{
				width: 100%;
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	rs-module-wrap::after{
		left: 76%;
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
	rs-module-wrap::after{
		left: 51%;
	}
}
.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;
						}
					}
				}
			}
		}
	}
}
