@import "_fonts.css";


@brown: #724c35;
@yellow: #e9b62e;
@bglight: rgba(249, 248, 236, 1);

@phone: ~"(max-width: 767px)";
@tablet: ~"(min-width: 768px) and (max-width: 991px)";
@desktop: ~"(min-width: 992px) and (max-width: 1366px)";
@lgdesktop: ~"(min-width: 1367px)";

@tenor: "Tenor Sans";
.underlined(@offset, @weight){
	&:after {
		position: absolute;
    	border-bottom: @weight solid @yellow;
    	bottom: -@weight;
    	left: @offset;
    	right: @offset;
    	content: "";
    	display: block;
	}
}
body{
	background-image: url('/img/bg.jpg');
	background-size: cover;
	background-attachment: fixed;
	font-family: "Copperplate";
	height: 100%;
	display: block;
}
.sidebar{
	background-color: #fff;
	float: left;
    position: relative;
    width: 350px;
    background: #fff;
    z-index: 550;
    @media @desktop{
    	width: 300px;
    }
    h3{
    	font-family: @tenor;
    	text-align: center;
    	position: relative;
    	color: @brown;
    	padding: 5px 10px;
    	font-size: 21px;
    	&:after{
    		content: "";
    		position: absolute;
    		bottom: -3px;
    		left: 20%;
    		right: 20%;
    		border-bottom: 3px solid @yellow;

    	}
    }
    .sidebar__close{
    	display: none;
    	@media @phone{
    		position: absolute;
    		top: 0;
    		left: 100%;
    		background: #fff;
    		color: @brown;
    		font-size: 50px;
    		display: block;
    		overflow: auto;
    	}
    }
    @media @phone{
    	position: fixed;
    	width: 80%;
    	top: 0;
    	bottom: 0;
    	right: 0;
    	left: 0;
    	transform: translate(-150%);
    	transition: 0.3s;
    	.sidebar__body{
    		overflow: scroll;
    		position: absolute;
    		top: 0;
    		right: 0;
    		left: 0;
    		bottom: 0;
    	}
    }
    &.js-opened{
    	@media @phone{
    		transform:translate(0)
    	}
    }
    .sidebar__header{
    	display: flex;
    	flex-direction: column;
    	text-align: center;
    	color: @brown;
    	margin-bottom: 40px;
    	img{
    		width: 80%;
    		max-width: 100%;
    	}
    	span{
    		font-size: 18px;
    		padding: 0 15px;
    	}
    }
    .sidebar__menu, .sidebar__info{
    	ul{
	    	display: flex;
	    	flex-direction: column;
	    	margin-left: 0;
	    	padding-left: 0;
	    	list-style: none;
	    	margin: 10px 0;
			li{
	    		padding: 0;
				text-align: left;
				position: relative;
				display: flex;
				flex-direction: column;
				a{
		    		color: @brown;
		    		font-size: 13px;
		    		line-height: 1.5;
		    		padding: 9px 40px;
		    		text-transform: uppercase;
		    		width: 100%;
		    		position: relative;
		    		&:hover{
		    			color: @yellow;
		    			text-decoration: none;
		    		}
		    		&:after{
						position: absolute;
						content: "";
						border-bottom: 1px solid @bglight;
						border-top: 1px solid transparent;
						left: 30px;
						right: 30px;
						top: 0;
						bottom: 0;
						transition: all 0.3s ease-in-out 0s;

		    		}
		    		&:hover:after{
		    			border-bottom:1px solid @yellow;
		    			left: 0;
		    			right: 0;
		    		}
				}
    		}
    	}
	    .toptree{
	    	li.parent{
	    		span{
	    			position: relative;
	    			display: inline-flex;
	    		}
	    		a{
		    		font-size: 14px;
		    		line-height:20px;
		    		padding: 15px 50px 15px 30px;
		    		width: 100%;
		    		display: inline-flex;
		    		text-decoration: none;
		    		&:hover{
		    			color: @yellow;
		    			text-decoration: none;
		    		}
		    		&:after{
						border-bottom: 1px solid @bglight;
						border-top: 1px solid transparent;
						left: 30px;
						right: 30px;
						transition: all 0.3s ease-in-out 0s;

		    		}
		    		&:hover:after{
		    			border-bottom:1px solid @yellow;
		    			border-top: 1px solid @yellow;
		    			left: 0;
		    			right: 0;
		    		}
				}
				&:hover .submenu-toggle{
					visibility: visible;
					opacity: 1;
				}
				.submenu-toggle {
					    font-size: 30px;
					    height: 100%;
					    text-align: center;
					    line-height: 50px;
					    visibility: hidden;
					    width: 50px;
					    display: flex;
					    align-items: center;
					    justify-content: center;
					    position: absolute;
					    right: 0;
					    cursor: pointer;
					    top: 0;
					    opacity: 0;
					    transition: 0.3s;
					    color: @brown;
					    &:before{
					    	transition: all 0.3s ease-in-out 0s;
					    }
					    &.submenu-toggle__openned:before{
					    	transform: rotate(-180deg);
					    }
					    @media @phone{
					    	visibility: visible;
							opacity: 0.5;
					    }
					}
				li.child{
					display: flex;
					a{
						font-size: 13px;
						padding: 10px 50px 10px 40px;
						text-decoration: none;
					}
					li.child{
						display: flex;
						a{
							text-decoration: none;
							font-size: 12px;
							padding: 8px 50px;
						}
					}
				}
		    }
	    	ul{
	    		display: none;
	    	}
		}
    }
    .sidebar__info{
    	span{
			color: @brown;
    		font-size: 13px;
    		line-height: 1.5;
    		padding: 9px 40px;
    		text-transform: uppercase;
    		width: 100%;
    		position: relative;
		}
    }
}
.main-column{
	float: left;
	width: ~"calc(100% - 350px)";
	background: rgba(249, 248, 236, 0.6);

	.content{
		min-height: 100vh;
	}
	@media @desktop{
		width: ~"calc(100% - 300px)";
	}
	@media @phone{
		float: none;
		width: 100%;
	}
	.fixed-header{
		display: none;
		@media @phone{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 40px;
			background: @bglight;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 500;
			.header__btn{
				font-size: 30px;
				height: 40px;
				width: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: @brown;
			}
			.fixed-panel__block{
				height: 40px;
				width: 40px;
			}
			.fixed-panel__block-button{
				height: 40px;
				width: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: @brown;
				font-size: 30px;
			}
			.fixed-panel__inner{
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.fixed-panel__block-inner{
				display: none;
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				background: #fff;
				min-height: 50px;
				font-size: 17px;
				padding: 10px 5px;
				text-align: center;
				a{
					color: @brown;
				}
				i.search-toggle{
					display: none;
				}
			}
		}
	}
	.header_logo{
		display: none;
		@media @phone{
			display: block;
			margin-top: 40px;
			background: ~"calc(@bglight-10%)";
			text-align: center;
			font-size: 18px;
			color: @brown;
			img{
				width: 100%;
			}
		}
	}
	.header{
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: @bglight;
		justify-content: space-between;
		font-family: @tenor;
		color: @brown;
		@media @phone{
			display: none;
		}
		.header__line{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			flex: 1;
			@media @phone{
				flex-direction: column;
			}
		}
		a{
			font-size: 16px;
			line-height: 1.5;
			color:@brown;
			position: relative;
			.fa{
				@media @desktop{
					display: none;
				}
			}
			&:hover, &:active, &:focus{
				color: @yellow;
				text-decoration: none;
	    	}
	    	&:after{
				position: absolute;
				top: 0;
				bottom: 0;
				left: 30%;
				content: "";
				right: 30%;
				transition: all 0.3s ease-in-out 0s;
				border-bottom: 1px solid transparent;
	    	}
			&:hover:after{
				display: block;
				left: 0;
				right: 0;
				border-bottom: 1px solid @yellow;
			}
		}
		.header__links{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			padding: 20px 10px;
			@media @desktop{
				padding: 20px 5px;
			}
			@media @tablet {
				flex-direction: column;
			}
			@media @phone {
				flex-direction: column;
			}
			.header__link{
				padding: 0 10px;
			}
		}
		.header__right{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			padding: 10px 20px;
			@media @desktop{
				padding: 10px 5px;
			}
			.user-wrp{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				@media @tablet{
					flex-direction: column;
				}
			}
			.item{
				padding: 0 20px;
				@media @desktop{
					padding: 0 5px;
				}
			}
			.cart{
				i.fa{
					margin-right: 2px;
				}
			}
			.search{
				position: relative;
				.popup{
					position: absolute;
					top: 200%;
					right: 50%;
					display: none;
					border: 1px solid @brown;
					background: @bglight;
					padding: 15px;
					form{
						margin: 0;
						display: flex;
						flex-direction: row;
						input[type=submit]{
							margin: 0;
							border-radius: 0;
						}
					}
				}
			}
		}
	}
	h1{
		font-size: 22px;
		line-height: 1.5;
		text-align: center;
		padding: 5px;
		margin: 15px 0;
		color: @brown;
		position: relative;
		display: inline-block;
		.underlined(15%, 4px)
	}

	.shippinginfo{
    	font-size: 22px;
    	color: @brown;
    	text-align: center;
    	margin: 15px 0;
    	position: relative;
    	.underlined(30%, 3px);
	}
}

.category_list{
    list-style-type:none;
    margin: 15px 0;
    padding: 0px;
    overflow: hidden;
    /*width: auto;*/
    /*text-align:center;*/
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: flex-start;
	 li{
	    text-align:center;
	    padding: 0px;
	    background: white;
	    margin: 1%;
	    transition: all 0.3s;
	    display: -webkit-flex;
	    display: -moz-flex;
	    display: -ms-flex;
	    display: -o-flex;
	    display: flex;
	    -webkit-flex-direction: column;
	    -moz-flex-direction: column;
	    -ms-flex-direction: column;
	    -o-flex-direction: column;
	    flex-direction: column;
	    flex-basis: 30%;
	    @media @tablet {
	    	flex-basis: 50%;
	    }
	    @media @phone{
	    	flex-basis: 100%;
	    }
	    &.product_item{
	    	flex-basis: 23%;
	    	padding-top: 10px;
	    	@media @tablet{
	    		flex-basis: 50%;
	    	}
	    	@media @phone{
	    	flex-basis: 100%;
	    	}
	    }
	    &:hover{
	    	transform: scale(1.1);
	    	box-shadow: 0 0 100px rgba(114, 76, 53, 0.2)
	    }
	    .cat_image{
	    	display: flex;
			a{
				width: 100%;
				img{
					width: 100%;
					height: auto;
					display: flex;
				}
			}
	    }
	    .prdbrief_image{
	    	display: flex;
	    	justify-content: center;
	    	align-items: center;
	    	flex-direction: column;
	    	img{
	    		max-width: 100%;
	    		display: flex;
	    	}
	    }
	    hr{
	    	width: 100%;
	    }
	    .cat_name, .prdbrief_name{
	    	a{
			    color: @brown;
			    text-decoration: none;
			    transition: all 0.3s;
			    font-size: 18px;
			    padding: 10px;
			    margin: 30px 0;
			    display: inline-flex;
			    position: relative;
			    .underlined(15%, 2px)
	    	}
	    }
	    .prdbrief_price{
	    	font-size: 20px;
	    	color: @yellow;
	    	line-height: 1.2;
	    	margin: 10px 0;
	    	i.fa{
	    		font-size: 0.8em;
	    	}
	    }
	}
}
.cat_path_in_productpage {
    padding: 20px 0;
    font-size: 15px;
    color: @brown;
    & a{
		color: @brown;
    	text-decoration: none;
	    &:hover{
	    	color: @yellow;
	    }
    }
}
input[type=button], input[type=submit], a.btn_submit{
	background-color: @yellow;
	font-size: 18px;
	font-family: @tenor;
	border-radius: 30px;
	color: #fff;
	border: none;
	padding: 15px 50px;
	margin: 10px 2px;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-transition: all 300ms ease-in;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}
.cpt_product_name{
	width: 100%;
	text-align: center;
}
.prod_info_wrap{
	display: flex;
	flex-direction: row;
	margin-top: 40px;
	@media @phone{
		flex-direction: column;
	}
	.prod_info_image, .prod_info_text{
		display: flex;
		flex-direction: column;
		flex-basis: 50%;
		padding: 0 15px;
		@media @phone{
		flex-basis: 100%;
		}
	}
	.cpt_product_price{
		font-size: 30px;
		color: @brown;
	}
	.main-image{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 10px;
	}
	.cpt_product_description{
		font-size: 20px;
	}
	#box_product_thumbnails{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		& > a{
			display: flex;
			padding: 5px;
			flex-basis: 25%;
			& > img{
				width: 100%;
			}
		}
	}
}
form.user-form{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.form_wrapper{
	display: flex;
	flex-direction: column;
	max-width: 800px;
	.form-row{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 5px;
		@media @phone{
			flex-direction: column;
		}
		.form-label{
			display: flex;
			margin-right: 20px;
		}
		input, textarea{
			display: flex;
		}
	}
}
.footer{
	    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
    padding: 10px;
}

p.error_alert {
	font-size: 1.5em;
	border-bottom: 3px solid red;
	padding: 15px 25px;
	display: inline-block;
	color: red;
}
#tbl-checkout-progress{
	margin-top: 40px;
}
.tbl-checkout-step{
	padding: 10px 20px;
}
#block-customerinfo table td{
	padding: 5px 10px;
	&.chklabel{
		width: 120px;
	}
}
#block-customerinfo table input, #block-customerinfo table textarea{
	line-height: 1.5;
	padding: 5px 15px;
	border: none;
	outline: none;
	background: rgba(255,255,255,0.6);
	border-bottom: 2px solid transparent;
	width: 300px;
	&:focus{
		border-bottom: 2px solid #e9b62e;
	}
}
//#block-customerinfo table input:focus, #block-customerinfo table textarea:focus{
//
//}