// Demo 6
// # Content

// 1. Header --------
// 2. Footer --------

// 3. Component --------
//    3.1) Types 
//    3.2) Breadcrumb
//    3.3) Product Default

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

// 1. Header
// 1.1) Header Base
.header {
    z-index: 1041;
    .logo-transition {
        transition: none;
    }
    .sticky-header.fixed .logo {
        max-width: 106.25px;
    }
    .header-dropdowns {
        margin-right: 2.4rem;
    }
    .dropdown-arrow .badge-circle {
        top: -4px;
    }
    .dropdown-toggle i {
        font-size: 2.6rem;
    }
    .cart-dropdown {
        margin: 2px -2px 0 2px;
        max-height: 2.8rem;
    }
    .header-search {
        max-height: 2rem;
        margin-right: 2rem;
    }
    .header-search-wrapper {
        margin-top: .6rem;
    }
    .logo {
        padding: 1rem 0;
    }
}

.header-icon {
    display: inline-block;
    width: 2.6rem;
    height: 3.6rem;
    line-height: 3.6rem;

    &.header-icon-user {
        margin-right: 2.5rem;
    }
}

.header-menu {
    font-weight: 400;
}

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

.search-toggle i:before {
    font-weight: 600;
}

// 2. Footer
.widget-social {
    justify-content: flex-end;
}

.footer {
    .widget {
        margin-bottom: 1rem;
    }

    .footer-content {
        .widget {
            margin-bottom: .9rem;
        }
    }

    .widget-time {
        li {
            padding-top: 1px;
            letter-spacing: .02em;
        }
    }

    .widget-title {
        line-height: 1.4;
    }

    .social-icons .social-icon {
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .contact-info{
        margin-bottom: 3rem;
        li {
            margin-bottom: 1.7rem;
            line-height: 1.3;
        }
    
        .contact-info-label {
            line-height: 2rem
        }
    }
}

.widget-newsletter {
    input,
    button {
        max-height: 4.8rem;
    }
    button {
        padding: 0 2.4rem 2px 2.3rem;
        border-radius: 0 30px 30px 0;
    }
    input {
        max-width: 677px;
        padding: 1px 0 0 2.5rem;
        border-width: 0;
        border-radius: 3.2rem 0 0 3.2rem;
        height: 48px;

        &::placeholder {
            color: #999;
            font-size: 1.4rem;
        }
    }
}

.newsletter-subscribe {
    .custom-checkbox .custom-control-label:after,
    .custom-control-label:before, 
    .custom-control-label:after {
        top: 4px;
    }
}

// 3. Component
// 3.1) Types
body {
    line-height: 2.4rem
}

hr {
    max-width: none;
}

.container-fluid {
    padding-left: 4vw;
    padding-right: 4vw;
}

// 3.2) Breadcrumb
.breadcrumb-item {
    font-weight: 600;
    color: $primary-color-dark;

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

    &+.breadcrumb-item {
        padding-left: 1.3rem;
    
        &::before {
            color: #777;
        }
    }
}

// 3.3) Product Default
.product-default {
	position: relative;
    margin-bottom: 1.9rem;

    .product-title {
        margin-bottom: 5px;
        letter-spacing: -.01em;
    }

    .ratings-container {
        margin-left: 0;
        margin-bottom: 1.2rem;
    }

    &:not(.product-widget) {
        margin-bottom: 3px;

        .product-details {
            padding: 0;
        }
    }

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

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

.price-box {
    margin-bottom: 1.5rem;
	font-family: $font-family;
}

// 4. Responsive
@include mq('1368px',max) {
    .main-nav .menu li:last-child {
        display: none;
    }
    
    @media (min-width: 992px) {
        .footer .social-icons .social-icon {
            width: 3.4rem;
            height: 3.4rem;
            line-height: 3.4rem;
        }
    }
}


@media (min-width: 1400px) {
    .header-middle {
        .header-center {
            margin-right: 11.7rem;
        }
    }
}


@include mq(xl, max) {
    .mobile-menu-toggler {
        display: block;
    }
}

@media (max-width: 991px) {
    .header-search i {
        font-size: inherit;
    }
}

@include mq(md,max) {
    .footer-bottom {
        text-align: center;
        .footer-payments {
            margin: 1rem auto 0;
        }
    }
}

@include mq(sm, max) {
    .header-icon.header-icon-user {
        margin-right: 1.5rem;
    }
}

@include mq(xs, max) {
    .widget-newsletter {
        input {
            padding-left: 1.5rem;
            max-width: 184px;
        }

        button {
            padding: 0 1.4rem 2px 1.3rem;
        }        
    } 
}