// Demo 32

// # Content
// 1. Header
//    1.1) Header Base
//    1.2) Header Element
//    	   1.2.1) Main Nav
//    	   1.2.2) DropDown and Cart DropDown
//    	   1.2.3) Search

// 2. Footer
//    2.1) Footer Base
//    2.2) Footer Elements
//    	   2.2.1) Social Icons
// 		   2.2.3) Newsletter
// 		   2.2.4) Badge

// 3. Component
//    3.1) Breadcrumb
//    3.2) Product Default

// 4. Responsive

body {
    font-family: $second-font-family;
}

// 1. Header
// 1.1) Header Base
.header {
    font-family: $second-font-family;
    
    &.home {
		position: absolute;
		width: 100%;
    }
  
    .container-fluid,
    .container {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		justify-content: space-between;
		position: relative;
		width: 100%;
		max-width: none;
		padding: 0 3.15%;
	}
	
	.header-middle {
		a {
			color: $primary-color-dark;
		}
	}
}
  
.header-top {
	height: 48px;
	background-color: $primary-color-dark;
	color: #fff;
	
    .header-left {
		h4 {
			font-size: 1.3rem;
			color: #fff;
			font-weight: 500;
	
			a {
			font-weight: 700;
			}
		}
    }
  
    .header-right {
		letter-spacing: .02em;

		>ul {
			display: flex;
			font-size: 1.2rem;
			margin-bottom: 0;
			margin-right: 1.4rem;
			font-weight: 500;
			color: #fff;
	
			li {
				margin: 0 1.8rem;
			}
		}
    }
}

.header-middle {
	color: $primary-color-dark;
}

.header-bottom {
	position: absolute;
	margin-left: 3.125%;
	background-color: transparent;
	width: fit-content;
    z-index: 101;
}

.header-dropdown ul a {
    padding: 0.5em 0.7em;
}

// 1.2) Header Element
// 1.2.1) Header Main Nav
.main-nav {
	.menu {
		margin-right: 0;
		display: flex;
		flex-direction: column;
		width: 270px;

		>li {
			position: relative;
			padding: 0;
			margin: 0;

			>ul {
				left: 100%;
				top: -1rem;
			}

			>.sf-with-ul {
				&:before {
					display: none;
				}
		
				&:after {
					font-family: 'porto';
				}
			}
	
			>a {
				padding: 0 0 1.5rem;
				font: 600 14px $font-family;
				letter-spacing: 0.005em;
				transition: none;
				text-transform: none;
				color: $primary-color-dark;
		
			  &.sf-with-ul {
				&:after {
					content: '\e81a';
					position: absolute;
					top: auto;
					right: 27px;
					bottom: 1.6rem;
					font-size: 15px;
					font-weight: 400;
					transform: none;
					color: #777;
				}
			  }
			}
		
			&:not(:last-child) {
			  border-bottom: 1px solid rgba($primary-color-dark, 0.07);
			  margin-bottom: 1.3rem;
			}
		
			&:hover>a,
			&.show>a,
			&.active>a {
			  color: $primary-color;    
			  background-color: transparent;
			}

			&:hover {
				.megamenu,
				> ul {
					visibility: visible;
					opacity: 1;
					margin-left: 0;
					left: 100%;
					.sf-with-ul::after {
						content: '\e81a';
						position: absolute;
						top: auto;
						right: 27px;
						bottom: .6rem;
						font-size: 15px;
						font-weight: 400;
						color: #777;
						font-family: 'porto';
					}
				}
			}

			.megamenu,
			> ul {
				display: block;
				visibility: hidden;
				opacity: 1;
				margin-left: -2rem;
				left: -999999px;
				transition: visibility .3s, opacity .3s, margin-left .3s;
			}		
		}

		.megamenu,
		li.sf-with-ul>ul {
			top: -1rem;
	
			&:before {
				content: '';
				position: absolute;
				border-right: 12px solid #fff;
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				left: -12px;
				top: 13px;
				z-index: 112;
			}
		}

		ul {
			border: 0;
		}
	}
}

// 1.2.2) Header DropDown and Cart DropDown
.header-dropdown {
	font-size: 1.2rem;
	font-weight: 500;

	a {
		display: flex;
		align-items: center;
	}
}

.dropdown-arrow {
	&:after {
		display: none;
	}

	.badge-circle {
		top: -5px;
		left: 20px;
	}
}

.minicart-icon {
	&:before {
		left: 48%;
	}
}

.badge-circle {
	background-color: $primary-color;
}

// 1.2.3) Header Search
.header-icon {
	&:not(:last-child) {
		margin-top: 2px;
	}

	.header-search {
		margin-right: 2.9rem;
    	margin-top: 1px;
	}
}

.header-search-wrapper {
	.form-control {
		min-width: 195px;
	}

	.btn {
		border: 0;
	}
}

.header-search {
	i {
		font-size: 1.9rem;

		&:before {
			font-weight: 800;
		}
	}
}

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

.footer-bottom {
	display: flex;
	justify-content: space-between;
    align-items: flex-start;
	border-top: 1px solid $primary-color-dark;
  
	p {
	  font-size: 1.2rem;
	  color: #999;
	  letter-spacing: -.013em;
	  margin-bottom: 0;
	}
  
	ul {
		display: flex;
		margin-bottom: 0;
		letter-spacing: -.015em;
  
	  	li {
			color: #fff;
			font-size: 1.2rem;
			font-weight: 500;
			text-transform: uppercase;
		}
  
		li+li {
			margin-left: 5.2rem;
		}
	}
}

.widget-group {
	.widget:first-child {
		padding-bottom: 4px;

		.widget-title {
			margin-bottom: 1.8rem;
		}
	}
}

footer {
// 2.2) Footer Elements
// 2.2.1) Footer Social Icons
	.social-icon {
		font-size: 1.9rem;
		color: #999999;
		
		&+.social-icon {
			margin-left: .4rem;
		}
	}

// 2.2.2) Footer Info Box
	.info-box {
		margin-left: -2px;
		margin-top: -3px;
		padding: 0 0 3.1rem;

		i {
			margin-right: 1.5rem;
			font-size: 3.7rem;
		}

		p {
			color: #999999;
		}
	}
}

// 2.2.3) Footer Newsletter
.footer-submit-wrapper {
	border: 2px solid #fff;
	height: 48px;
	min-width: 474px;

	.form-control {
		padding-top: 7px;
		border: none;
		height: 40px;
		font-size: 1.3rem;
		font-style: italic;
		font-family: $second-font-family;
		min-width: 200px;

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

	.btn {
		padding: .9em 1.1em;
		font-size: 1.3rem;
		border: none;

		&:hover,
		&:focus {
			background-color: #fff;
			color: $primary-color-dark;
		}
	}
}

.widget-newsletter-info {
    margin-right: 5.8rem;
    margin-bottom: 6px;
}

.widget-newsletter-title {
    font-size: 1.6rem;
}

p.widget-newsletter-content {
	line-height: 8px;
    letter-spacing: 0;
    color: #999;
}

// 2.2.4) Footer Badge
.porto-content-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #fff;
	position: absolute;
	right: 6.3%;
	bottom: 0;
	transform: translateY(50%);
	width: 150px;
	height: 150px;
  
	h3 {
		margin-top: 1px;
		margin-bottom: 0;
		font-size: 2.2rem;
		color: $primary-color-dark;
		letter-spacing: -0.015em;
		font-weight: 700;
		line-height: 1;
	}
  
	span {
		font-size: 1.5rem;
		letter-spacing: 0.002em;
		font-weight: 300;
		color: #777;
	}
  
	h4 {
		font-size: 1.8rem;
		letter-spacing: 0.005em;
		color: #777;
		font-weight: 700;
		margin-bottom: 0;
	}
  
	a {
		display: flex;
		position: absolute;
		align-items: center;
		justify-content: center;
		top: 8px;
		right: 8px;
		width: 25px;
		height: 25px;
		border-radius: 50%;
		font-size: 1.7rem;
		color: #43413c;
		background-color: #9d8d6c;
		font-weight: 300;
	}
}

// 3. Component
// 3.1) Breadcrumb and Base
.breadcrumb-nav {
    margin-bottom: 3.1rem;
    border-color: rgba(34,37,41,.07);
}

.breadcrumb {
    padding: 1.2rem 0 1.1rem;
}

.breadcrumb-item {
    font-size: 10px;
    font-weight: 700;
    font-family: $second-font-family;
	color: $primary-color-dark;
	letter-spacing: .05em;

    & a, 
    &.active {
        color: $primary-color-dark;
    }

    &+.breadcrumb-item {
        padding-left: 1.3rem;
    }
}

//  3.2) Product Default
.product-default { 
	.category-list {
	  font-family: $second-font-family;
	}
  
	.product-title a {
	  font-family: $second-font-family;
	  color: #222329;
	}

	.price-box {
		font-family: $second-font-family;
	}
}
  
.center-details {
	.product-details {
	  align-items: center;
	}
  
	.category-wrap {
	  width: auto;
	}
}
  
// 4. Responsive
@include mq(md, max) {
	.footer-bottom ul li+li {
		margin-left: 1.4rem;
	}
}

@include mq(sm, max) {
	.footer-submit-wrapper {
		min-width: auto;
	}
}