// 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
//		   1.2.7) Sticky Header

// 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 Social Icon
//         2.2.4) Footer Tagcloud
//         2.2.5) Footer Copyright 

// 3. Component ------------
//    3.1) Base
//    3.2) Product
// 	  	   3.2.1) Product Hover Effect 
// 	  	   3.2.2) Product Default
// 	  	   3.2.3) Product Widget


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

body {
	font-family: $second-font-family;
}
// 1. Header --------------
// 1.1) Header base
.header-top .top-message {
	margin-right: 3.8rem;
}
.header-middle .header-right {
	padding-right: 2.6rem;
	color: #fff;
}

// 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;
	ul a {
		&:hover {
			background-color: $primary-color-dark;
		}
	}
}
.menu > li > .sf-with-ul::before {
	border-bottom-color: $primary-color-dark;
}
// 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 {
	border-color: #313438;
	.select-custom {
		&::after {
			right: 15px;
		}
		select:focus {		
			background-color: #151719;
		}
	}
}
.search-toggle::after {
	border-bottom-color: #313438;
}
// 1.2.6) Header Menu
.menu-vertical >li {
	> a {
		padding: 1.3rem 1rem 1.3rem .5rem;
		font-weight: 500;
	}
	&:first-child {
		a {
			padding-bottom: 1.2rem;
		}
		i {
			top: 0px;
		}
	}
	&:nth-child(7) > a,
	&:last-child > a {
		padding-bottom: 1.2rem;
	}
}
.mobile-menu-toggler {
	color: #fff;
}

// 1.2.7) Sticky Header {
.header-middle.fixed {
	background-color: $primary-color-dark;
}
.header-bottom.fixed {
	background-color: #1b1e21;
}

// 2. Footer --------------
// 2.1) Footer Base
.footer {
	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 {
		margin-top: 1.1rem;
	}
	.contact-info-label {
		margin-bottom: 0;
	}

	// 2.2.2) Footer Logo
	.logo-footer {
		margin-top: 1.6rem;
		margin-bottom: 1.7rem;
		max-width: 101px;
	}

	// 2.2.3) Footer Social Icon
	.social-icon {
		border: 1px solid transparent;
	}

	// 2.2.4) Footer Tagcloud
	.tagcloud {
		padding-top: 2px;
		a {
			padding: .64em .6em .56em;
			margin-top: 4px;
			color: inherit;
			border-radius: 0;
			font-weight: 400;
			text-transform: capitalize;
			&:hover {
				color: #fff;
			}
		}
	} 
}

// 2.2.5) 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) Product
// 3.2.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.2.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;
}
.product-price {
	color: #fff;
}

// 3.2.3) Product Widget
.product-widget {
	.product-title {
		margin-bottom: .6rem;
		letter-spacing: 0;
	}
	.ratings-container {
		margin-bottom: 1.1rem;
	}
	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: 1200px) {
	.dropdown-expanded li:not(:first-child) {
		margin-left: 1.3rem;
	}
}
@media (max-width: 991px) {
	.header-icon.header-search-inline {
		margin-right: 2.5rem;
	}
	.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;
	}
}