// Base

// # Content
// 1. Heade ----------
//    1.1) Header Base
//    1.2) Header Element
//         1.2.1) Header Top Notice
//         1.2.2) Header Main Nav
//         1.2.3) Header Cart Dropdown
//         1.2.4) Header Search
//         1.2.5) Header Other Icons

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

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

// 4. Responsive

// 1. Heade ----------
// 1.1) Header Base
.header {
    z-index: 1000;
    width: 100%;
    margin: 0 6px;
}

.sticky-header.fixed {
    padding: 8px 0;
}

.header-top {
    font-family: $font-family;

    .header-right {
        margin-bottom: 1px;
    }
}

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

.elements-header {
    margin: 0;

    .header-top {
        border-bottom: 1px solid #e7e7e7;
        padding: 1.3rem;
    }

    .header-middle {
        padding: 2.7rem 0;
    }

    .sticky-header.fixed {
        padding: 8px 0;
    }
}

// 1.2) Header Element
// 1.2.1) Header Top Notice
.top-notice {
    padding: .9rem 2rem 1.1rem;

    .category {
        margin: 0 2px 0 1px;
    }

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

    h5 {
        margin-right: 3px;
    }
} 

// 1.2.2) Header Main Nav
.main-nav {
    margin-left: 6.4rem;

    .menu>li {
        margin-right: 3.7rem;

        >a {
            font-size: 13px;
        }
    }

    .tip.hot {
        top: -5px;
        right: -8px;
        padding: 2px;
        font-size: 9px;
        font-style: normal;
        background-color: #eb2771;
        border-color: #eb2771;
    
        &::before {
            right: auto;
            top: 100%;
            margin-top: 0;
            border-top-color: #eb2771;
        }
    }
}

.menu.sf-arrows > li > .sf-with-ul:after {
    content: none;
}

// 1.2.3) Header Cart Dropdown
.badge-circle {
    top: 0px;
    left: 17px;
}

.dropdown-arrow {
    .badge-circle {
        top: -1px;
        left: 17px;
        z-index: 2;
    }

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

.dropdown-toggle i {
    display: inline-block;
    margin-top: -2px;
    font-size: 2.5rem;
}

// 1.2.4) Header Search
.header-search-wrapper {
    font-family: "Open Sans", sans-serif;
    color: #777;

    input::placeholder {
        font-family: "Open Sans", sans-serif;
        font-size: 13px;
        font-weight: 300;
        color: #777;
    }
}

.header-search-popup .form-control {
    min-width: 23.6rem;
}

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

.search-toggle:after {
    right: calc( 50% - 1px );
}

// 1.2.5) Header Other Icons
.header-icon {
    &.header-wishlist {
        margin-right: 2.8rem;
        margin-bottom: 3px;
    }

    &.header-icon-user {
        margin-right: 2.3rem;
        margin-bottom: 3px;
    }
}

// 2. Footer
// 2.1) Footer Base
footer {
    a:hover {
        color: #fff;
    }

    p {
        line-height: 1.54;
        margin-bottom: 1.3rem;
    }

    .links li {
        margin-bottom: 1px;
        line-height: 1.8;
    }

    .widget-title {
        font-size: 1.5rem;
        font-weight: 700;

        &.tag-widget-title {
            margin-bottom: 1.5rem;
        }

        &.newsletter-title {
            margin-bottom: 1.3rem;
        }
    }

// 2.2) Footer Element
// 2.2.1) Footer Widget Contact Info
    .contact-info li {
        margin-bottom: 7px;
    }

    .contact-info-label {
        margin-bottom: 2px;
    }

// 2.2.2) Footer Social Icons
    .social-icons {
        margin-top: 3.3rem;
        padding-left: 2px;
    }

    .social-icon + .social-icon {
        margin-left: 4px;
    }

// 2.2.3) Footer tagcloud
    .tagcloud {
        padding-right: 24%;
        margin-top: -.3em;
        margin-bottom: -.3846em;

        a {
            padding: 0 .6em;
            margin: 0.3846em 0.3846em 0.3846em 0;
            line-height: 2.4rem;
            border-radius: 0;
            font-weight: 400;
            text-transform: capitalize;

            &:hover {
                color: #fff;
            }
        }
    }

// 2.2.4) Footer Newsletter
    .widget-newsletter {
        padding-right: 1rem;
    }

    .form-control {
        padding: 0 2rem 0 1.6rem;
        max-width: 33rem;
        height: 4.4rem;
        background: #292c30;
        border-radius: 2.2rem;
        border: 0;

        &::placeholder {
            font-family: "Open Sans", sans-serif;
            font-size: 1.3rem;
            color: #999;
        }

        &:focus {
            background: #292c30;
        }
    }

    .btn {
        height: 4.4rem;
        margin-left: -1px;
        padding: 0 2.3rem;
        background: #fff;
        border-radius: 2.2rem;
        letter-spacing: .01em;
        font-size: 13px;

        &:hover, &:focus {
            opacity: .85;
        }
    }
}

// 3. Component
// 3.1) Breadcrumb
.breadcrumb {
    padding: 1.2rem 0;
}

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

// 3.2) Social Icons
.social-icons .social-icon:hover {
    opacity: 1;
}


// 3.3) Product Default
.product-default {
    &:not(.product-widget) {
        &:hover {
            box-shadow: none;
    
            figure {
                box-shadow: 0 25px 35px -5px rgba(0,0,0,0.1);
            }
        }
    }

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

    .btn-add-cart, 
    .btn-icon-wish, 
    .btn-quickview {
        border-color: rgb(221, 221, 221);
        background-color: #fff;
    }
    
    .btn-add-cart {
        display: flex;
        margin: 0 3px;
        padding: 0 1rem;
        align-items: center;
        border-color: rgb(221, 221, 221);
        background-color: #fff;
        color: $primary-color-dark;

        i {
            display: inline-block;
            margin-top: 1px;
        }
    }
}

// 4. Responsive
@include mq( 1200px, max ) {
    .main-nav .menu > li {
        margin-right: 1.7rem;
    }
}

@include mq( lg, max ) {
    .dropdown-expanded ul {
        opacity: 1;
    };
}

@include mq( md, max ) {
    .dropdown-expanded ul {
        opacity: 0;
    };

    .sticky-header .cart-dropdown {
        margin-bottom: 3px;
    }
}