@module_margin_bottom: 0;
@layout__max-width: 1440px;
@page_custom-bg: @color-white;
@theme__color__primary: #fcbe00;

// Button 
@button__border-radius: 2px;
@button__color: @heading__color__base;
@button__hover__background: lighten(saturate(spin(@theme__color__primary, -2.8571), 0.0000), 0.0000);

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

@banner_element_bg: @element_bg;
@banner_element_border-radius: @element_border-radius;
@banner_element_padding: @element_padding;

@image_border-radius: 5px;
// Header
// Topbar
// ===================
@topbarbg: #022335;
@topbarcolor: @color-white;
@topbarhovercolor: @theme__color__primary;
@header__background-color: #022335;
@header-icons-color: @color-white;
@header_padding: 20px; // Make header height bigger than menu height
@header-border-color: fade(@color-white, 10%);
@header_shadow: 1px 3px 5px 0px rgba(210, 217, 237, 0.3);


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

// Footer
@footer__background-color: #f3f5f6;

@footercolor: #666666;
@footer_font-size: 1.4rem;

@footer-title-font-size: 1.8rem;
@footer-title-font-weight: 500;
@footer-title-color: @heading__color__base;
@footer-title-transform: capitalize;
@footer-border-color: #e1e1e1;

@footer-title-mobile-font-size: 1.6rem;
@footer-title-mobile_bg: @color-white;
@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%;


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

// Search icon color

& when (@media-common =true) {
	.top-search-not-dropdown {
		.block.block-search {
			.block-content {
				.dropdown {
					.form.minisearch {
						.actions {
							.action.search:before {
								color: @button__hover__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 {
		margin-top: 3rem;
		margin-bottom: 5.5rem;

		&.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;
		}
	}

	.slider_home5 {
		display: block !important;

		.right-banner {
			max-width: 100%;

			.banner {
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-gap: 20px;
				margin-top: 20px;

				.col-banner {
					.banner-img {
						width: 100%;

						img {
							width: 100%;
						}
					}

					.content {
						padding: 20px;
					}
				}
			}
		}

		.left-banner {
			width: 100%;

			#rokanthemes-slidebanner-5 {
				border-radius: @image_border-radius;
			}
		}
	}
}

.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	.banner {
		.col-banner:not(.as-desktop):not(.not-has-text) {
			.banner-img {
				width: 100%;
			}
		}
	}

	.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;
		}
	}
	.page-footer{
		padding-top: 0;
	}
	.col-on-top{
		.section, rs-module-wrap{
			margin-bottom: 0 !important;
		}
		.banner {
			.col-banner {
				.content {
					.button-wrap {
						.btn {
							width: 55%;
						}
					}
				}
			}
		}
	}
}

// Top deals sale

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

// Shipping Support

& when (@media-common =true) {
	.page-footer {
		.block-newsletter-form {
			input {
				border: 1px solid @border-color__base;
			}

			+p.margin_0 {
				color: #999999 !important;

				a:not(:hover) {
					color: inherit !important;
				}
			}
		}

		.footer-contact {
			background-color: @theme__color__primary;
			margin-bottom: @margin_gobal_value - 2;

			.shipping-support {
				background-color: @theme__color__primary;
				.col-content{
					background-color: @theme__color__primary;
				}
				@media only screen and (min-width: @screen__m) {
					padding-bottom: 3.1rem;
				}

				@media only screen and (max-width: (@screen__m - 1)) {
					padding: 3rem 0;
				}

				.fa,
				.far,
				.fas,
				.icon {
					&:before {
						color: @button__color;
					}
				}

				p {
					font-size: 1.3rem;
					color: #555555;
				}
			}
		}
	}
}

.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__m) {
	.shipping-support {
		background-color: @color-white;
		padding: 3.1rem 1.5rem;

		.space-between {
			justify-content: space-around;
		}

		.col-auto {
			flex: 1;

			&:not(:last-child) {
				border-left: 1px solid rgba(37, 37, 37, 0.2);
			}
		}
	}
}

// Group Product

.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 ='min') and (@break =@screen__m) {
	.group-product {
		margin-right: -1rem;
		margin-left: -1rem;
		.section {
			.lib-css(margin-bottom, 2rem);
		}

		.margin_0 {
			.lib-css(margin-bottom, 0);
		}
		>div {
			padding: 0 1rem;
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	.group-product {
		.section {
			.lib-css(margin-bottom, 1rem);
		}
	}
}
.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;
			}
		}
	}
}

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

// auto play background
& when (@media-common =true) {
	.auto-play {
		.lib-css(background-color, #df2424);
		@box-shadow: 800px 0 #df2424,
		-800px 0 #df2424;
		.lib-css(box-shadow, @box-shadow, 1);

		@media only screen and (max-width: @screen__l) {
			@box-shadow: 100px 0 #df2424,
			-100px 0 #df2424;
			.lib-css(box-shadow, @box-shadow, 1);
		}

		.notification-text {
			.lib-css(background-color, #df2424);
		}
	}
}


// 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;
									right: -1px;
									top: 0;
									bottom: 0;
									width: 10px;
									.border_radius(5px);
									background: @color-white;
								}
								@media screen and (min-width: @screen__m){
									.actions-primary {
										&:before {
											content: "";
											position: absolute;
											left: -1px;
											top: 0;
											bottom: 0px;
											width: 10px;
											.border_radius(5px);
											background: @color-white;
										}
									}
								}
							}
						}
					}

					&:not(.last-active-item) {
						.product-item {
							.product-item-info {
								&:after {
									content: "";
									position: absolute;
									left: 0;
									top: 20px;
									bottom: 25px;
									border-left: 1px solid @border-color__base;
									@media only screen and (max-width: (@screen__m - 1)){
										top: 15px;
										bottom: 1.5rem;
									}
								}
							}

							&: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);
			}
		}
	}
}



.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%;
				}
			}
		}
	}
}


// Category tab menu
.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__l) {
	.wrapper_sub_category_tabs {
		&:not(.onlyparent) {
			.category-thumb-section {
				.widget-tabs {
					>ul {
						grid-template-columns: repeat(5, 1fr);
						grid-gap: 30px;
					}
				}
			}
		}
	}
}

.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__m) {
	.wrapper_sub_category_tabs {
		&:not(.onlyparent) {
			.category-thumb-section {
				.widget-tabs {
					>ul {
						grid-template-columns: repeat(5, 22.7%);
					}
				}

				.rokan-title {
					.module-title {
						margin-bottom: 3rem;
					}
				}
			}
		}
	}
}

.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__s) {
	.wrapper_sub_category_tabs {
		&:not(.onlyparent) {
			.category-thumb-section {
				.widget-tabs {
					>ul {
						grid-template-columns: repeat(5, 31.3%);
					}
				}
			}
		}
	}
}

.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__s) {
	.wrapper_sub_category_tabs {
		&:not(.onlyparent) {
			.category-thumb-section {
				.widget-tabs {
					>ul {
						grid-template-columns: repeat(5, 35%);
					}
				}
			}
		}
	}
}

.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__xs) {
	.wrapper_sub_category_tabs {
		&:not(.onlyparent) {
			.category-thumb-section {
				.widget-tabs {
					>ul {
						grid-template-columns: repeat(5, 50%);
						grid-gap: 3%;
					}
				}
			}
		}
	}
}

.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__xs) {
	.wrapper_sub_category_tabs {
		&:not(.onlyparent) {
			.category-thumb-section {
				.widget-tabs {
					>ul {
						grid-template-columns: repeat(5, 47.5%);
						grid-gap: 5%;
					}
				}
			}
		}
	}
}


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

// Sub category
// Vertical thumb image
@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: 16px;
@category-name-color: @heading__color__base;
@sub_category_color: #666666;
@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;

& when (@media-common =true) {
	.wrapper_sub_category_tabs {
		.widget-tabs {
			figure{
				img{
					border-radius: 2px;
				}
			}

			ul {
				overflow: hidden;
				overflow-x: scroll;
				-ms-overflow-style: none;  /* IE and Edge */
				scrollbar-width: none;  /* Firefox */
				flex-wrap: nowrap;
				&::-webkit-scrollbar{
					display: none;
				}
				li {
					a.absolute-content-image{
						span.thumb-infor{
							margin-top: 18px;
						}
					}
					ul {
						li {
							margin-bottom: 0;
							line-height: 2.4rem;

							a {
								&:hover {
									padding-left: 10px;
								}
							}

							&:before {
								display: none;
							}
						}
					}
				}
			}
		}
	}
}


// Banner owl category
& when (@media-common =true) {
	.banner-category {
		.item {
			.content {
				.flex();
				justify-content: space-between;
				align-items: center;
				padding: 20px;
				border: 1px solid @border-color__base;
				.lib-css(border-radius, 0 0 2px 2px, 1);

				.content-left {
					p.size-16 {
						color: @heading__color__base;
					}

					@media only screen and (max-width: (@screen__l - 1)) {
						margin-bottom: 1rem;
					}
				}

				.content-right {
					a.btn {
						.lib-css(padding, 13.5px 41px);

						&:not(:hover) {
							background-color: #f6f6f6;
							border-color: #e1e1e1;
						}
					}
				}
			}
		}

		.owl-dots {
			.owl-dot.active {
				width: 35px !important;
				border-radius: 3px !important;
			}
		}

	}
}
// Page Builder
& when (@media-common =true) {
	.wrap-slider-banner{
		.pagebuilder-column-group{
			margin-left: -10px;
    		margin-right: -10px;
		}
	} 
}
.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__m) {
	#html-body {
		.wrap-slider-banner{
			margin-top: 3rem;
			margin-bottom: 5.5rem;
			.pagebuilder-column-group{
				.left-banner{
					flex: 0 0 auto;
					width: 71%;
				}
				.right-banner{
					flex: 0 0 auto;
					width: 29%;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	#html-body {
		.wrap-slider-banner{
			margin-top: 0;
			margin-bottom: 5rem;
			.left-banner{
				margin-bottom: 2rem;
			}
			.banner-top{
    			flex-direction: row;
				.banner-top-content{
					.pagebuilder-overlay{
						padding: 15px 20px 30px;
					}
				}
				.banner-top-content-right{
					margin-right: 2rem;

				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__s) {
	#html-body{
		.wrap-slider-banner{
			.pagebuilder-column-group {
				.banner-top{
					display: none;
				}
			}
		}
	}
}
& when (@media-common =true) {
	.wrap-slider-banner{
		.banner-top{
			.banner-top-content{
				flex: 1;
				height: 100%;
				.pagebuilder-banner-wrapper{
					height: 100%;
					.pagebuilder-overlay{
						height: 100%;
						h3{
							margin-bottom: 15px;
						}
					}
				}
			}
		}
	}
}
// Banner Middle
& when (@media-common =true) {
	.banner-middle{
		.pagebuilder-column{
			.pagebuilder-poster-content{
				p{
					&:first-of-type{
						margin-bottom: 1.1rem;
					}
				}
				h3{
					margin-bottom: 2rem;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__l) {
	.banner-middle{
		.pagebuilder-banner-wrapper{
			padding: 3.15rem 0;
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__l) {
	#html-body{
		.banner-middle{
			.pagebuilder-banner-wrapper{
				padding: 1.5rem 0;
				.pagebuilder-overlay{
					padding: 15px 30px 15px 30px;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	#html-body{
		.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%;
				}
			}
		}
	}
}
// Product List
& when (@media-common =true) {
	.product-item-left{
		.products.wrapper.list{
			.products.list.items.product-items.owl-carousel{
				.owl-item.active{
					.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{
		.wrap-product-list{
			.pagebuilder-column-group{
				flex-wrap: wrap;
				.pagebuilder-column{
					width: 100%;
				}
				.product-item-left{
					margin-bottom: 2rem;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__s) {
	#html-body{
		.wrap-product-list{
			.pagebuilder-column-group{
				.product-item-left{
					margin-bottom: 1rem;
				}
			}
		}
	} 
}
.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__l) {
	#html-body{
		.wrap-product-list{
			.pagebuilder-column-group{
				.product-item-left{
					position: relative;
					justify-content: center;
					&::after{
						position: absolute;
						background: @color-white;
						top: 0;
						left: 10px;
						right: 10px;
						bottom: 0;
						content: "";
						border-radius: @image_border-radius;
					}
				}
			}
		}
	}
	
}
// Banner Category
@heading__color__base: #222;
@bg-button-banner: #f6f6f6;
@color-button-border: #e1e1e1;
& when (@media-common =true) {
	.banner-category{
		.pagebuilder-column{
			figure{
				margin-bottom: 0;
				border-radius: 3px 3px 0 0;
				img{
					height: 100% !important;

				}
			}
			> div {
				.flex();
				justify-content: space-between;
				align-items: center;
				border: 1px solid @border-color__base;
				border-radius: 0 0 2px 2px;
				.content-left{
					.size-16{
						color: @heading__color__base;
						font-weight: 500;
					}
				}
				.content-right{
					a{
						display: inline-block;
						padding: 13.5px 41px;
						background: @bg-button-banner;
						border-color: @color-button-border;
						@transition: all 0.3s ease-in;
						.lib-css(transition, @transition, @_prefix: 1);
						&:hover{
							background: @theme__color__primary;
						}
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__l) {
	.banner-category{
		.pagebuilder-column{
			.content-left{
				margin-bottom: 1rem;
			}
		}
	}
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
	.banner-category{
		.pagebuilder-column-group{
			.pagebuilder-column{
				.pagebuilder-mobile-only{
					display: none !important;
				}
			}
		}
	}
	.wrap-product-list{
		.rokan-title{
			.module-title{
				margin-bottom: 3.2rem;
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	#html-body{
		.banner-category{
			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{
					width: 50%;
					flex: 0 0 auto;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__xs) {
	#html-body{
		.banner-category{
			.pagebuilder-column-group{
				.pagebuilder-column{
					width: 100%;
					flex: 0 0 auto;
				}
			}
		}
	}   
}
.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;
						}
					}
				}
			}
			&.mobile-style{
				ul.custommenu-list{
					li.level0{
						li.menu-item-has-children{
							border-top: 0;
						}
					}
				}
			}
		}
	}
}
& when (@media-common = true) {
	body{
		.chosen-container{
			ul.chosen-results{
				li.highlighted{
					color: @button__color;
				}
			}
		}
	}   
}