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

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

// Navigation menu
@navigation-desktop-level0-item__color: #222222;
@navigation-desktop-level0-item__hover__color: @navigation-desktop-level0-item__color;	
@navigation-desktop-level0-item__active__border-width: 2px;
@navigation-desktop-level0-item__active__border-color: @navigation-desktop-level0-item__color;
@navigation-desktop-level0-item__padding: 12px;
@navigation-desktop-level0-item__line-height: 50px;

// Slide show variable
@vertical_menu_title_color: #fff;  

@element_bg: #e01717;
@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: 20px;
@custom_shadow: false;
// Header
// Topbar
// ===================
@header__background-color: #fdbe01;
@header-icons-color: #222222;
@header_padding: 20px; // Make header height bigger than menu height
@header-border-color: fade(@color-white, 15%);
@header_shadow: none;


@_search-border-color: @color-white;
@_search-border-width: 2px;
@action_button_bg: #222222;


// Footer
@footer__background-color: #222222;

@footercolor: #999999;
@footer_font-size: 1.4rem;
@footer_padding: 0;

@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: rgba(255, 255, 255, 0.1);

@footer_item_width_tabel: 50%;

@use_custom_page-bg: true;
@page_custom-bg: #f3f5f6;


// Category top

& when (@media-common =true) {
	.category-top {
		padding-top: @margin_gobal_value - 3rem;

		.container_vertical_tab_postions {
			.category-thumb-section {
				.widget-tabs {
					.owl-stage-outer {
						margin-bottom: 0;
						padding-bottom: 3rem;
						margin-bottom: -3rem;
					}

					.owl-item {
						padding: 2.5rem 0;
						background-color: @color-white;
						border-radius: @image_border-radius;
						&:hover{
							.lib-css(box-shadow, 3px 10px 20px 0px rgba(0, 0, 0, 0.05), 1);
						}
						.category-item {
							a {
								figure {
									max-width: 50px;
									margin: 0 auto;
								}

								.thumb-infor {
									padding: 1rem 0;

									.cate-name.cate-count {
										width: 100%;
										text-align: center;
									}
								}

								img {
									@transform: translateZ(0);
									.lib-css(transform, @transform, @_prefix: 1);
								}

								&:hover {
									img {
										@transform: translateZ(0);
										.lib-css(transform, @transform, @_prefix: 1);
									}

									* {
										color: @theme__color__primary;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

// 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: 2.7rem;
		margin-bottom: 0;

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

	.slider_home5 {
		.left-banner {
			flex: 0 0 auto;
			width: calc(~"72% - 10px");
			padding-right: 10px;
		}

		.right-banner {
			flex: 0 0 auto;
			width: calc(~"29% - 10px");
			padding-left:  10px;
			.col-banner:nth-child(1) {
				margin-bottom: 20px;
			}
		}
	}
}

.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) {

	.col-on-top {
		margin-bottom: 0;
		.section, rs-module-wrap{
			margin-bottom: 0 !important;
		}

		.banner {
			.col-banner {
				.content {
					.button-wrap {
						.btn {
							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 + 2px);
			}
		}

	}

}

.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__l) {
	.shipping-support {
		.space-between {
			justify-content: space-around;
		}
	}

}

// Footer links on tablet
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__l) {
	body .shipping-support {
		.col-content {
			padding: 2rem;
		}

		.row {
			margin: 0 -5px;
		}

		.col-6 {

			&:nth-of-type(1),
			&:nth-of-type(2) {
				margin-bottom: 1rem;
			}
		}
	}
}

.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 {
		.section {
			margin-bottom: 2rem;
		}

		.margin_0 {
			margin-bottom: 0;
		}
	}
}

.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	.group-product {
		.section {
			margin-bottom: 1rem;
		}
	}
}
// Grid product hover
@custom_shadow_light: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);

& when (@media-common =true) {
	.notification-text {
		background-color: #df2424;
	}

	.products-grid {
		.product-items {
			.owl-stage {
				.owl-item.active {
					&:hover {
						z-index: 4;
					}
				}
			}

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

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

						.product-item-description {
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box !important;
						}
					}

					.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 {
		margin-right: -1rem;
		margin-left: -1rem;

		>div {
			padding: 0 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;

& when (@media-common =true) {

	// Blog recent post
	.block-recent-posts {
		.post-list-wrapper {
			.blog-list-post {
				.post-holder {
					.post-item {
						.lib-css(border-radius, @image_border-radius);
						.blog-post-thumb {
							.lib-css(border-radius, @image_border-radius @image_border-radius 0 0);
						}

						.blog-post-info {
							padding: 2rem;
							.lib-css(border-radius, 0 0 @image_border-radius @image_border-radius);
						}
					}
				}
			}
		}
	}

	div[class*="block-recent-posts"] {
		padding-bottom: 0;
		padding-top: 0;
	}
}

// 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 {
			ul {
				li {
					ul {
						li {
							margin-bottom: 0;
							line-height: 2.4rem;

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

							&:before {
								display: none;
							}
						}
					}
				}
			}
		}
	}
}
// Page Builder
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__l) {
	.header-container{
		.hidden-sticky{
			.primary-menu-container {
				.custommenu-list{
					> div {
						li.menu-item-has-children{
							border-top: 1px solid @border-color__base;
						}
					}
				}
			}
		}
	}
}
// Slider Banner
.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__m) {
	#html-body {
		.slider-banner{
			margin-top: 2.7rem;
			.pagebuilder-column-group{
				.left-banner{
					width: 72%;
				}
				.right-banner{
					width: 28%;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	#html-body{
		.slider-banner{
			.left-banner{
				margin-bottom: 2rem;
				order: 1;
			}
			.right-banner{
				flex-direction: row;
				order: 2;
				> div {
					margin-bottom: 0;
					.pagebuilder-banner-wrapper{
						padding: 2rem 0;
					}
					&.right-banner-item{
						margin-right: 2rem;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__s) {
	#html-body{
		.slider-banner{
			.left-banner{
				margin-bottom: 0;
			}
			.right-banner{
				display: none;
			}
		}
	}
}
& when (@media-common =true) {
	.slider-banner{
		.pagebuilder-column-group{
			margin-left: -1rem;
			margin-right: -1rem;
			.right-banner{
				> div {
					flex: 1;
					.pagebuilder-banner-wrapper{
						height: 100%;
						.pagebuilder-overlay{
							height: 100%;
						}
					}
				}
			}
		}
	}
}
// Banner Bottom
& when (@media-common =true) {
	.banner-bottom,
	.wrap-product {
		.pagebuilder-column-group{
			margin-left: -10px;
			margin-right: -10px;
		}
	}
}
// Shadow Product Disable
& when (@media-common =true) {
	.wrap-product{
		.rokan-title{
			.module-title{
				margin-bottom: 0;
			}
		}
		.pagebuilder-column-group{
			.wrap-product-left{
				.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) {
	.banner-bottom{
		.pagebuilder-column{
			.pagebuilder-banner-wrapper{
				padding: 15.5px 0;
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	#html-body{
		.banner-bottom{
			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-bottom{
			.pagebuilder-column-group{
				.pagebuilder-column{
					width: 100%;
					flex: 0 0 auto;
				}
			}
		}
	}  
}
// Wrap Product

.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__l) {
	#html-body{
		.wrap-product{
			.wrap-product-left{
				justify-content: center;
				position: relative;
				&::after{
					position: absolute;
					top: 0;
					left: 10px;
					right: 10px;
					bottom: 0;
					content: "";
					background: @color-white;
					border-radius: @image_border-radius;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__l) {
	#html-body{
		.wrap-product{
			.pagebuilder-column-group{
				flex-wrap: wrap;
				.pagebuilder-column{
					width: 100%;
					flex: 0 0 auto;
					&.wrap-product-left{
						margin-bottom: 2rem;
					}
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__s) {
	#html-body{
		.wrap-product{
			.pagebuilder-column-group{
				.pagebuilder-column{
					&.wrap-product-left{
						margin-bottom: 1rem;
					}
				}
			}
		}
	}   
}
& when (@media-common =true) {
	.nav-toggle{
		&:hover{
			&::before{
				color: @header-icons-color !important;
			}
		}
	}
}
& 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__s) {
	.page-footer{
		.footer-container{
			.footer-top{
				.footer-contact{
					max-width: 100%;
				}
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__l) {
	.navigation.nav-sections{
		ul.custommenu-list{
			li.level0{
				&.active{
					border-bottom: 0;
				}
				ul{
					li.menu-item-has-children{
						border-top: 0;
					}
				}
				&.my_account_link_custom{
					border-top: 0;
				}
			}
			
		}
	}
}
& when (@media-common =true) {
	.field-by-cat-search{
		.chosen-container-active{
			ul.chosen-results{
				li.highlighted{
					color: @button__hover__color;
				}
			}
		}
	}
}
