// Demo 2

// 1. Header
//    1.1) Header Base
//    1.2) Header Element
// 	  	   1.2.1) Header Dropdown
// 	  	   1.2.2) Header Search
// 	  	   1.2.3) Header Contact with Phone Image
// 	  	   1.2.4) Header Main Nav
// 	  	   1.2.5) Header Cart Dropdown

// 2. Footer
// 	  2.1) Footer Base
// 	  2.2) Footer Element
// 	  	   2.2.1) Footer Social Icons
// 	  	   2.2.2) Footer Contact Info
// 	  	   2.2.3) Footer Newsletter
// 	  	   2.2.4) Footer Copyright

// 3. Component
// 	  3.1) Breadcrumb
// 	  3.2) Product Default
// 	       3.2.1) Product Default Base
// 		   3.2.2) Product Hover Effect
// 		   3.2.3) Product Inner Quickview

// 4. Responsive

// 1. Header
// 1.1) Header Base
.header {
	background-color: $primary-color;
	.mobile-menu-toggler {
		color: #fff;
	}
	.separator {
		height: 20px;
	}
	.social-icon {
		opacity: .7;
		&:hover {
			opacity: 1;
		}
	}
}
.header-top .header-dropdown {
	>a {
		color: #bde1f5;
	}
	.container {
		height: 42px;
	}
}
.header-middle .header-right {
	padding-right: 2.6rem;
}
.sticky-header.fixed {
	background-color: $primary-color;
	border-color: $primary-color;
	.main-nav .menu> li {
		>a {
			color: #fff;
		}
		&.active >a,
		&:hover >a{
			color: #bde1f5;
		}
	} 
}
.dropdown-expanded li+li {
    margin-left: 2.4rem;
    letter-spacing: 0.025em;
}

// 1.2) Header Element
// 1.2.1) Header Dropdown
.header-dropdowns {
	margin-top: 1px;
}
.header-dropdown:not(.dropdown-expanded) .header-menu ul a:hover {
	background-color: #292c30;
}
.header-dropdown:hover >a {
	color: #fff;
}

// 1.2.2) Header Search
.header-search-wrapper {	
	.select-custom {
		&::after {
			right: 12px;
		}
		select:focus {		
			background-color: $primary-color-dark;
		}
	}
	select {
		font-size: 1.3rem;
	}
}

// 1.2.3) Header Contact with Phone Image
.header-contact {
	padding-right: 1.3rem;
	h6 {
		margin-top: 2px;
		color: #bde1f5;
	}
	img {
		margin-right: .8rem;
	}
}

// 1.2.4) Header Main Nav
.main-nav {
	.tip-top {
		padding-top: 2px;
		padding-left: 3px;
	}
	.menu>li {
		margin-right: 3.5rem;
		letter-spacing: -.01em;
	}	
}
.menu>li>.sf-with-ul:before {
    bottom: -1px;
	transition: opacity .1s;
	border-bottom-color: #1b1e21;
}
.menu-banner.menu-banner-2 .btn {
    bottom: 11px;
    padding: 8px 33px;
}
// 1.2.5) Header Cart Dropdown
.dropdown-arrow {
	.badge-circle {
		top: -5px;
		left: 23px;
		z-index: 1;
	}
	&:after {
		position: absolute;
		right: -2.8rem;
		font-size: 17px;
		top: .6rem;
	}
}
.header-icon:not(:last-child) {
    margin-bottom: 2px;
}

// 2. Footer
// 2.1) Footer Base
.footer-bottom {
	.footer-right {
		padding-bottom: 1px;
	}
}
.footer-ribbon {
    padding: 9px 20px 5px;
}
.footer {
	a:hover,
	a:focus {
		color: #fff;
	}

// 2.2) Footer Element
	// 2.2.1) Footer Social Icons
 	.social-icon {
		margin-left: 2px;
		height: 3.7rem;
		width: 3.7rem;
		font-size: 1.4rem;
		line-height: 3.5rem;
		border: 1px solid transparent;
		border-radius: 50%;
		&:not(:hover):not(:active):not(:focus) {
			background-color: transparent;
			color: #fff;
		}
		&+.social-icon {
			margin-left: .4rem;
		}
	}

	// 2.2.2) Footer Contact Info
	.contact-info {
		padding-bottom: 2px;
		li {
			position: relative;
			margin-bottom: 1rem;
			line-height: 1.4;
		}
	}
	.contact-info li:last-child {
		margin-bottom: 1.8rem;
	}
	.contact-info-label {
		display: block;
		color: #fff;
		font-weight: 400;
		text-transform: uppercase;
	}
	
	// 2.2.3) Footer Newsletter
	.widget-newsletter {
		margin: -1px 0 3.6rem;
	    padding-bottom: 2.5rem;
		border-bottom: 1px solid #313438;
		.widget-title {
			margin-bottom: .9rem;
		}
		p {
			max-width: 360px;
			margin-top: 2px;
			line-height: 1.6;
		}
		form {
			padding-right: 2px;
			background: #292c30;
			border-radius: 5rem;
			padding-left: 2.5rem;
		}
		.form-control {
			height: 4.8rem;
			padding: .9rem 2.5rem .8rem 0;
			border: 0;
			box-shadow: none;
			outline: none;
			background: #292c30;
			color: #777;
			font-size: 1.2rem;
			@include only_for_ie() {
				flex: 1;
			}
			&::placeholder {
				color: #999999;
			}
		}
		.btn {
			padding: 1rem 2.3rem .8em;
			border-radius: 0 5rem 5rem 0;
			font-size: 1.2rem;
			letter-spacing: 0.01em;
		}
	}
}

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

// 3. Component
// 3.1) Types
.btn-light {
	background-color: #fff;
	border-color: #fff;
}
.btn-secondary {
	@include button-variant( #fff, $secondary-color, $secondary-color);
}
.btn-black {
	border-color: #0e0f11;
	background-color: #0e0f11;
}

// 3.2) Product Default
// 3.2.1) Product Default Base
.product-default {
	position: relative;
	.product-details {
		padding: 0;
	}
	.btn-add-cart, 
	.btn-icon-wish, 
	.btn-quickview {
		background-color: transparent;;
	}
}
.ratings-container {
    margin-left: 0;
}

// 3.2.2) 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. Responsive
@media (min-width: 992px) and (max-width: 1200px) {
	.dropdown-expanded li:not(:first-child) {
		margin-left: 1.3rem;
	}
}
@include mq( xl, max ) {
	.main-nav .menu>li {
		margin-right: 2.5rem;
	}
	.header-bottom.fixed .header-center {
		margin-left: 3.5rem;
	}
}
@include mq( lg, max ) {
	.header-top .container:after {
		left: 15px;
		right: 15px;
	}
	.header-search i {
		font-size: 2.4rem;
	}
	footer .widget {
		margin-bottom: 0;
	}
}
@include mq( md, max ) {
	.header-icon i {
		font-size: 3rem;
	}
	.header-search {
		i {
			font-size: 2.4rem;
		}
	}
}
@include mq( xs, max ) {
	.header-icon.header-search-inline {
		display: none;
	}
}