// Demo Base

// 1. Header --------------
//    1.1) Header base
//    1.2) Header Element
// 	  	   1.2.1) Header Notice
//         1.2.2) Header Dropdown
//         1.2.3) Header Cart Menu
//         1.2.4) Header Icon
//         1.2.5) Header Search
//         1.2.6) Header Menu

// 2. Footer --------------
//    2.1) Footer Base
//    2.2) Footer Element
//         2.2.1) Footer Contact Info
//         2.2.2) Footer Logo
//         2.2.3) Footer Newsletter
//         2.2.4) Footer Social Icon
//         2.2.5) Footer Tagcloud
//         2.2.6) Footer Copyright 

// 3. Component ------------
//    3.1) Base
//    3.2) Breadcrumb 
//    3.3) Product
// 	  	   3.3.1) Product Hover Effect 
// 	  	   3.3.2) Product Default
// 	  	   3.3.3) Product Widget
//    3.4) Product

// 4. Responsive -----------

// 1. Header --------------
// 1.1) Header base
body {
	font-family: $second-font-family;
}

.header-top {
	a {
		color: inherit;
	}

	.top-message {
		margin-right: 3.8rem;
	}
}

.header-middle {
	padding: 2.7rem 0;

	.header-right {
		padding-right: 2.6rem;
	}
}

.cart-toggle {
	&:hover {
		color: $primary-color-dark;
	}
}

// 1.2) Header Element
// 1.2.1) Header Notice
.top-notice {
	h5 {
		margin-right: 2px;
	}

	.category {
		margin: 0 2px;
		padding: .3em .78em .4em .82em;
	}

	small {
		margin-left: 6px;
		letter-spacing: .03em;
	}

	.mfp-close {
		top: 53%;
		right: -1px;
	}
}

// 1.2.2) Header Dropdown
.header-left {
	.header-menu {
		font-weight: 500;
	}
}

.header-dropdown {
	padding: 4px 0;

	.dropdown-toggle:after {
		font-size: 17px;
	}
}

// 1.2.3) Header Cart Menu
.dropdown-arrow {
	.badge-circle {
		top: -5px;
		left: 23px;
		z-index: 1;
	}

	&:after {
		position: absolute;
	    right: -2.8rem;
		font-size: 17px;
		top: .6rem;
	}
}

// 1.2.4) Header Icon
.header-icon {
	&.header-icon-user {
		margin-right: 2.5rem;
		margin-left: -1px;
	}

	&.header-search-inline {
		margin-right: 1.6rem;
		margin-left: 2px;

		.form-control {
			font-family: $second-font-family;
		}
	}
}

// 1.2.5) Header Search
.header-search-wrapper {
	.select-custom:after {
		right: 10px;
	}
}

// 1.2.6) Header Menu
.main-nav .menu {
	>li {
		margin-right: 2.4rem;
	
		>a {
			font-weight: 600;
			letter-spacing: -.025em;
		}
	}

	.tip-top {
		padding: 2px;
		border-radius: 0;
		left: 85%;
		margin-top: 3px;
	}
}


.menu-vertical {
	.megamenu .submenu a {
		background: transparent;
	}

	>li {
		> a {
			padding: 1.3rem 1rem 1.3rem .5rem;
			font-weight: 500;
		}
	
		&:first-child {
			a {
				padding: 1.3rem 1rem 1.2rem .5rem;
			}
			
			i {
				top: 0px;
			}
		}
	
		&:nth-child(7) > a,
		&:last-child > a {
			padding-bottom: 1.2rem;
		}
	} 
}

// 2. Footer --------------
// 2.1) Footer Base
.footer {
	position: relative;

	.container {
		position: static;
	}

	p {
		line-height: 24px;
	}
	
	.widget-title {
		letter-spacing: 0;
	}

	.read-more {
		font-weight: 700;
		text-decoration: underline;
	}

	// 2.2) Footer Element
	// 2.2.1) Footer Contact Info
	.contact-info li {
		position: relative;
		margin-bottom: 1rem;
		line-height: 1.4;
		margin-top: 1.1rem;
	}

	.contact-info-label {
		display: block;
		color: #fff;
		font-weight: 400;
		text-transform: uppercase;
		margin-bottom: 0;
	}

	// 2.2.4) Footer Social Icon
	.social-icon {
		margin-left: 2px;
		line-height: 3.8rem;
		border: 1px solid transparent;

		&:not(:hover):not(:active):not(:focus) {
			background-color: transparent;
			border-color: #313438;
			color: #fff;
		}
	}

	// 2.2.5) Footer Tagcloud
	.tagcloud {
		padding-top: 2px;

		a {
			padding: .64em .6em .56em;
			margin: 0 .4rem .8rem 0;
			border: 1px solid #313438;
			color: inherit;
			font-size: 11px;
			background: transparent;
			border-radius: 0;
			font-weight: 400;
			text-transform: capitalize;
			display: inline-block;
	
			&:hover {
				border-color: #fff;
				color: #fff;
				background: transparent;
			}
		}
	} 
	
	// 2.2.3) Footer Newsletter
	.widget-newsletter {
		p {
			margin-bottom: 1.3rem;
			line-height: 1.846;
		}

		.form-control {
			height: 4.4rem;
			padding: .8rem 2.5rem;
			border: 0;
			border-radius: 5rem;
			background: #292c30;
			color: #777;
			font-size: inherit;

			&::placeholder {
				color: #777;
			}
		}

		.btn {
			padding: 1.2rem 2.475rem;
			border-radius: 5rem;
			font-size: inherit;
			font-family: $font-family;
		}
	}
}

.logo-footer {
	margin-top: 1.6rem;
	margin-bottom: 1.7rem;
    max-width: 101px;
}

// 2.2.6) Footer Copyright 
.footer-copyright {
	color: #777;
	font-size: 1.2rem;
	letter-spacing: -.008em;
}

// 3. Component-----------------
// 3.1) Base
.tip {
	font-size: 8px;
	padding: 2px;
	border-radius: 0;
}

.mobile-menu.menu-with-icon li {
	a {
		display: flex;
		align-items: center;
		padding: 1rem 0 1.1rem 1rem;
		
		> i {
			margin-right: 1.5rem;
		}
	}

	&:first-child i {
		margin-top: -2px;
	}
}

// 3.2) breadcrumb
.breadcrumb {
    padding: 1.2rem 0;
}

// 3.3) Product
// 3.3.1) Product Hover Effect
.img-effect > a:first-child::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    z-index: 1;
    opacity: 0;
    transition: opacity .2s;
}

// 3.3.2) Product Default
.product-default {
	position: relative;

	.product-title {
		letter-spacing: -.01em;
	}
	
	.product-details {
		padding: 0;
	}

	.btn-add-cart, 
	.btn-icon-wish, 
	.btn-quickview {
		background-color: transparent;;
	}

	.price-box {
		font-family: $second-font-family;
	}
}

.ratings-container {
    margin-left: 0;
}

// 3.3.3) Product Widget
.product-widget {
	.product-title {
		margin-bottom: .6rem;
		font-size: 1.4rem;
		letter-spacing: 0;
	}

	.ratings-container {
		margin-bottom: 1.1rem;
	}

	.product-price {
		color: #444;
	}

	figure {
		margin-right: 2rem;
	}

	.product-details {
		margin-bottom: 3px;
	}
}

.newsletter-popup {
	.form-control {
		padding: 6px 12px 10px 22px;
		font-family: $second-font-family;
	}

	form {
		margin-right: 5px;
	}
}

.newsletter-subscribe label {
	font-family: $second-font-family;
	letter-spacing: 0.012em;
}

.newsletter-popup-content .btn {
	font-family: $second-font-family;

	&:active,
	&:focus {
		box-shadow: none !important;
	}
}

// 4. Responsive
@media (min-width: 992px) and (max-width: 1199px) {
	.dropdown-expanded li:not(:first-child) {
		margin-left: 1.3rem;
	}
}

@media (max-width: 991px) {
	.header-icon.header-search-inline {
		margin-right: 2.5rem;
	}
}

@media (max-width: 991px) {
	.header-icon i {
		font-size: 2.8rem;
	}

	.header-search i {
		font-size: 2.4rem;
	}
}

@media (max-width: 767px) {
	.header-icon.header-search-inline {
		margin-top: 2px;
	}
}

@media (max-width: 576px) {
	.header-icon.header-search-inline,
	.header-icon.login-link {
		margin-right: 1.2rem;
	}

	.header-icon.header-icon-user {
		margin-right: 1.3rem;
		margin-left: 0px;
	}
}

@media (max-width: 480px) {
	.header-icon.header-search-inline {
		display: none;
	}
}