// Primary color
@theme__color__primary: #fcbe00;
@module_margin_bottom: 0;
// Button 
@button__color: #222222;
@button__hover__color: @button__color;
@button__border-radius: 2px;

@button__hover__background: lighten(saturate(spin(@theme__color__primary, -2.8571), 0.0000), 0.0000);
// Slide show variable
@vertical_menu_title_color: #fff;
@vertical_menu_title_hover_color: #222222;
@banner_element_bg: @element_bg;
@banner_element_border-radius: @element_border-radius;
@banner_element_padding: @element_padding;

// Border images
@image_border-radius: 5px;

// Button search header

& when (@media-common =true) {
	.top-search-not-dropdown {
		.block.block-search {
			.block-content {
				.dropdown {
					.form.minisearch {
						.actions {
							.action.search {
								&:before {
									color: @button__color;
								}
							}
						}
					}
				}
			}
		}
	}
}

// header layout 4
& when (@media-common =true) {
	html {
		body {
			.header-container {
				.rokan-vertical-menu {
					.title-category-dropdown {
						&.active {
							color: @vertical_menu_title_hover_color;

							&:before {
								color: @vertical_menu_title_hover_color  !important;
							}
						}

						&:hover {
							&:before {
								color: @vertical_menu_title_hover_color;
							}
						}
					}
				}

				&.sticky {
					.flex-layout-sticky {
						.rokan-vertical-menu {
							.title-category-dropdown {
								&:before {
									color: @vertical_menu_title_hover_color;
								}
							}
						}
					}
				}
			}
		}
	}
}
// Top deals sale

& when (@media-common = true){
	.hot-deal-tab-slider-customcss{
		margin-bottom: @margin_gobal_value - 3rem;
	}
}

// Footer
@footer_item_width_tabel: 50%;
// Reset menu style

// Slide show on top
@content_banner_padding: 10% 0 16%;

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

& when (@media-common =true) {
	.cms-index-index {
		.page-footer {
			margin-top: 0;
		}
	}

	.catalog-category-view,
	.cms-index-index,
	.catalog-product-view {
		.product.data.items>.item.content {
			background: transparent;
		}
	}
	.banner-middle {
		.col-banner {
			.content {
				h3 {
					line-height: 1.5;
				}
			}
		}
	}
}

.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__l) {
	.banner-middle {
		.col-banner {
			&.left {
				.content {
					padding-left: 2.5rem !important;
				}
			}
		}
	}
}
// Grid product hover
@custom_shadow_light: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);

& when (@media-common =true) {
	.products-grid {
		.product-items {
			.owl-stage {
				@media only screen and (min-width: @screen__m){
					padding-top: 15px;
				}
				.owl-item.active {
					&:hover {
						z-index: 4;

						.product-item {
							.product-item-info {
								&:before {
									content: "";
									position: absolute;
									left: -1px;
									top: 0;
									bottom: 0;
									width: 10px;
									.lib-css(border-radius, @image_border-radius);
									background: @color-white;
								}
								@media screen and (min-width: @screen__m){
									.actions-primary {
										&:before {
											content: "";
											position: absolute;
											left: -1px;
											top: 0;
											bottom: 0px;
											width: 10px;
											.lib-css(border-radius, @image_border-radius);
											background: @color-white;
										}
									}
								}
							}
						}
					}
					&:not(.last-active-item) {
						.product-item {
							.product-item-info {
								&:after {
									content: "";
									position: absolute;
									right: 0;
									top: 20px;
									bottom: 25px;
									border-right: 1px solid @border-color__base;
								}
							}

							&:hover {
								.product-item-info {
									&:after {
										border-color: transparent;
									}
								}
							}
						}
					}

				}
			}

			.product-item {
				.product-item-details {
					>div[class*="swatch-opt"] {
						right: 1px;
					}
				}
			}
		}
	}
}

.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	.section {
		.product-items {
			.product-item {
				.lib-css(box-shadow, none, 1);
			}
		}
	}
}


// Category Product Tab

.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__m) {
	.wrapper_category_product_tabs:not(.short_description){
		margin-bottom: 3rem;
	}
	.shipping-support{
		.col-auto{
			flex: 1;
			&:not(:last-child){
				border-right: 1px solid @border-color__base;
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m){
	.wrapper_category_product_tabs {
		.widget-tabs {
			.ui-tabs-nav{
				margin-bottom: 0 !important;
			}
		}
		
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__xs) {
	.wrapper_category_product_tabs {
		.widget-tabs {
			.ui-tabs-nav {
				white-space: nowrap;
				overflow-y: hidden;
				margin-bottom: 0rem;
			}
		}
	}
}

// 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;
						}
					}

					.special-price,
					.minimal-price {
						.price {
							.lib-font-size(16);
						}
					}

					.actions-primary {
						width: 100%;

						.action {
							width: 100%;

							&.tocart {
								.small_button_padding();
							}
						}
					}
				}
			}
		}
	}
}


// Group Product
.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;
			}
		}
	}
}


// Brand 
& when (@media-common =true) {
	.block-widget-rokanthemes-brand {
		border-top: 1px solid @border-color__base;
	}
}

// Grid bottom 

& when (@media-common =true) {
	.grid-banner-bottom.banner {
		.lib-css(display, grid);
		grid-template-columns: 1fr 1fr;
		grid-gap: 30px;

		@media only screen and (max-width: (@screen__xs - 1)) {
			grid-template-columns: 1fr;
			grid-gap: inherit;
		}

		.col-banner {
			position: relative;

			.banner-img {
				.lib-css(border-radius, @image_border-radius);
				img.lazy-loaded {
					width: 100%;
				}
			}

			.content {
				.btn {
					.lib-css(border-radius, @button__border-radius);
					padding: 11px 39px;
					font-weight: @font-weight__regular;

					&:not(:hover) {
						background-color: @color-white;
						color: #559728;
					}
				}

				.has-bg {
					margin-bottom: 2rem;
				}

				h3 {
					line-height: 3.6rem;
				}
			}

			&.center {
				&.left {
					.content {
						@banner__content_left_padding: 2.5rem;
						.lib-css(padding, @banner__content_left_padding);
					}
				}
			}

			&.margin-bottom {
				margin-bottom: 28px;
			}
		}
	}
}

.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__l) {
	.grid-banner-bottom.banner {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

// Feature Block

& when (@media-common =true) {
	.featured-home-4.section {
		margin-bottom: 0;
		padding: @margin_gobal_value 0;
		@media only screen and (min-width: @screen__m){
			.col-12{
				margin-bottom: 1.5rem;
			}
		}
	}
}

& when(@media-common =true) {
	.section.wrapper_product_tabs {
		.rokan-title.has-see-all {
			.module-title {
				margin-bottom: -0.5rem;
			}
		}
	}
}

// Footer

@background-footer__top: #2f3037;
@footer-title-margin: 0 0 2rem;

& when (@media-common =true) {
	.page-footer {
		padding-top: @margin_gobal_value;
	}
}


// full width images banner 992
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	.banner {
		.col-banner:not(.not-has-text) {
			.banner-img {
				width: 100%;
			}
		}
	}
}
// Page Builder
& when (@media-common = true) {
	.wrap-banner-top{
		.pagebuilder-column{
			.pagebuilder-banner-wrapper{
				.pagebuilder-poster-content{
					h3{
						line-height: 1.5;
					}	
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__l) {
	.wrap-banner-top{
		.pagebuilder-column{
			.pagebuilder-banner-wrapper{
				padding: 1.7rem 0;
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__l) {
	#html-body{
		.wrap-banner-top{
			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;
				}
				.pagebuilder-column{
					flex: 0 0 auto;
					width: 50%;
					.pagebuilder-banner-wrapper{
						padding: 1rem 0;
						.pagebuilder-overlay{
							padding: 15px 30px 15px 30px;
						}
					}
				}
			}
		}
	}	
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__s) {
	#html-body{
		.wrap-banner-top{
			.pagebuilder-column-group{
				.pagebuilder-column{
					flex: 0 0 auto;
					width: 100%;
				}
			}
		}
	}  
}
& when (@media-common = true) {
	.wrap-banner-middle{
		.pagebuilder-column{
			.pagebuilder-poster-content{
				h3{
					margin-bottom: 2rem;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__l) {
	.wrap-banner-middle{
		.pagebuilder-column{
			.pagebuilder-banner-wrapper{
				padding: 24px 0;
				.pagebuilder-poster-content{
					p:first-of-type{
						margin-bottom: 14px;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__l) {
	.wrap-banner-middle{
		.pagebuilder-column{
			.pagebuilder-banner-wrapper{
				padding: 15px 0;
				.pagebuilder-poster-content{
					p{
						margin-bottom: 8px;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	#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;
				}
				.pagebuilder-column{
					flex: 0 0 auto;
					width: 100%;
					.pagebuilder-banner-wrapper{
						.pagebuilder-overlay{
							padding: 2rem;
						}
					}
				}
			}
		}
	}
}
// Featured Products
& when (@media-common = true) {
	.wrap-featured-products{
		.pagebuilder-column-group{
			margin-left: -10px;
			margin-right: -10px;
			.featured-products-left{
				.custom-hover{
					.wrapper_product_tabs{
						.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) {
	#html-body {
		.wrap-featured-products{
			.pagebuilder-column-group{
				.featured-products-left{
					justify-content: center;
					position: relative;
					&::after{
						position: absolute;
						content: "";
						top: 0;
						left: 10px;
						right: 10px;
						bottom: 0;
						background: @color-white;
						border-radius: @image_border-radius;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__l) {
	#html-body{
		.wrap-featured-products{
			.pagebuilder-column-group{
				flex-wrap: wrap;
				.pagebuilder-column{
					flex: 0 0 auto;
					width: 100%;
					&.featured-products-left{
						margin-bottom: 2rem;
					}
				}

			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__s) {
	#html-body{
		.wrap-featured-products{
			.pagebuilder-column-group{
				.pagebuilder-column{
					&.featured-products-left{
						margin-bottom: 1rem;
					}
				}
			}
		}
	}  
}

// Banner Grid
@color-button-banner: #559728;
& when (@media-common = true) {
	.grid-banner{
		.grid-banner-column{
			.pagebuilder-banner-wrapper{
				.pagebuilder-overlay{
					align-items: flex-start;
					.pagebuilder-poster-content{
						h6{
							display: inline-block;
							padding: @element_padding;
							background: @element_bg;
							@border-radius: @element_border-radius;
							.lib-css(border-radius, @border-radius, @_prefix: 1);
							margin-top: 0;
						}
						h3{
							line-height: 1.4;
						}
					}
				}
			}
		}
		.grid-banner-center{
			.grid-banner-center-content{
				flex: 1;
    			height: 100%;
				.pagebuilder-banner-wrapper{
					height: 100%;
					.pagebuilder-overlay{
						height: 100%;
						h3{
							line-height: 1.5;
						}
					}
				}
				&.grid-banner-top{
					.pagebuilder-button-primary{
						background: @color-white;
						color: @color-button-banner;
						@transition: all 0.3s ease;
						.lib-css(transition, @transition, @_prefix: 1);
						padding: 11px 36px;
						&:hover{
							background: @theme__color__primary;
							color: @button__color;
						}
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__l) {
	.grid-banner{
		.grid-banner-column{
			.pagebuilder-banner-wrapper{
				padding: 10.5% 0;
			}
		}
	}  
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__l) {
	#html-body {
		.grid-banner{
			.pagebuilder-column-group{
				.pagebuilder-column{
					flex: 0 0 auto;
					width: 50%;
					.pagebuilder-banner-wrapper{
						padding: 10.5% 0 22%;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	#html-body{
		.grid-banner{
			.pagebuilder-column{
				.pagebuilder-overlay{
					min-height: 210px;
					padding: 0;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	#html-body{
		.grid-banner{
			.pagebuilder-column{
				.pagebuilder-overlay{
					min-height: 175px;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	#html-body {
		.grid-banner{
			.pagebuilder-column-group{
				.pagebuilder-column{
					flex: 0 0 auto;
					width: 100%;
					&.grid-banner-column{
						margin-bottom: 2rem;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__m) {
	#html-body{
		.wrap-category{
			margin-bottom: 3rem;
		}
	}
	.wrap-featured-products{
		.rokan-title {
			.module-title{
				margin-bottom: 3.2rem;
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	#html-body{
		.wrap-category{
			margin-bottom: 5rem;
		}
	}
}	
& when (@media-common = true) {
	ul.chosen-results{
		li.result-selected{
			&.highlighted{
				color: @button__color;
			}
		}
	}
}
.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;
					}
				}
			}
		}
	}
}
.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;
						}
					}
				}
			}
		}
	}    
}
