/*
 Theme Name:   Modfusion
 Theme URI:    http://example.com/storefront-child/
 Description:  Storefront Child Theme
 Author:       Nadir Krid
 Author URI:   nadirkrid.com
 Template:     storefront
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

@font-face {
font-family: TitilliumWeb;
src: url(assets/fonts/TitilliumWeb-Regular.ttf);}

body {
    color: #474747;
}

a:focus,
.focus a,
.menu-toggle,
button {
    outline: none !important;
}

/* HEADER */

header#masthead {
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    background: #800080;
    background-image: -webkit-radial-gradient(top, circle cover, #800080 0%, #4B0082 80%);
    background-image: -moz-radial-gradient(top, circle cover, #800080 0%, #4B0082 80%);
    background-image: -o-radial-gradient(top, circle cover, #800080 0%, #4B0082 80%);
    background-image: radial-gradient(top, circle cover, #800080 0%, #4B0082 80%);
}

header#masthead,
nav.main-navigation li a,
nav.main-navigation li.current-menu-item > a,
.site-header-cart .cart-contents,
a.cart-contents,
.mon-compte a,
.site-footer,
.site-footer a {
    color: #fff !important;
}

header#masthead > .col-full {
    display: block !important;
}

#primary,
#secondary {
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

#primary {
    padding: 15px;
}

h1 {
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    background: #800080;
    background-image: -webkit-radial-gradient(top, circle cover, #800080 0%, #4B0082 80%);
    background-image: -moz-radial-gradient(top, circle cover, #800080 0%, #4B0082 80%);
    background-image: -o-radial-gradient(top, circle cover, #800080 0%, #4B0082 80%);
    background-image: radial-gradient(top, circle cover, #800080 0%, #4B0082 80%);
    border-radius: 10px;
    padding-left: 15px;
    color: white;
    text-transform: uppercase;
    line-height: 60px;
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.3em;
    font-weight: bold;
}

p+h2,
p+h3 {
    margin-top: 0;
}

ul.product-categories > li,
ul.product-categories > li.cat-parent,
ul#menu-menu-pour-mobiles-2 li {
    line-height: 50px !important;
    color: #800080;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    font-weight: bold;
    border-bottom: 1px solid #e2e2e2;
    float: left;
    padding-right: 10px;
    margin-right: 10px;
}

.widget-area .widget a {
    color: #fff;
    display: block;
    text-transform: uppercase;
}

.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
    background: #800080;
    background-image: -webkit-radial-gradient(top, circle cover, #800080 0%, #4B0082 80%);
    background-image: -moz-radial-gradient(top, circle cover, #800080 0%, #4B0082 80%);
    background-image: -o-radial-gradient(top, circle cover, #800080 0%, #4B0082 80%);
    background-image: radial-gradient(top, circle cover, #800080 0%, #4B0082 80%);
}

.widget-area .widget a:not(.button){
    text-decoration: none;
}

ul.product-categories li:before,
.widget_product_categories ul li:before,
.widget_product_categories ul li.current-cat:before,
.widget_categories ul li.current-cat:before,
.widget_categories ul li:before {
    content: none;
}

.widget .widget-title { 
    font-size: 24px;
    color: #800080;
    letter-spacing: 2px;
    font-weight: bold;
    display: block;
    text-transform: uppercase;
    margin: 0;
    padding: 0 0 0 15px;
}

.site-header {
    margin: 0 !important;
    padding: 0 !important;
}

.site-header .site-branding {
    margin: 0 !important;
}

.woocommerce-product-search,
.mon-compte p {
    margin: 0 !important;
}

.search-submit {
    background-color: orange;
    color: white;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

#instagram-embed-0 {
    max-width: inherit !important;
    min-width: inherit !important;
}

@media (min-width: 576px) {
    #masthead .main-navigation {
        text-align: center !important;
    }
}

@media (max-width: 768px)
{
    .widget.woocommerce.widget_product_categories { display: none !important; }
    .widget.widget_categories { display: none !important; }
}

@media (min-width: 768px) {
    #masthead .col-full {
        display: flex;
        align-items: center;
    }

    #masthead .main-navigation {
        width: 100%;
        margin: 0 !important;
        padding: 10px 0;
    }

    .woocommerce-active .site-header div.site-branding {
        width: auto;
    }

    .col-full {
        max-width: 100% !important;
    }

    #masthead .col-full { 
        margin: 0;
        padding: 0;
    }
    
    .main-navigation ul li {
        padding-right: 30px;
    }
}

.site-header-cart .cart-contents::after, .storefront-handheld-footer-bar ul li.cart > a::before {
    content: "\f07a";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    vertical-align: -.125em;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    line-height: inherit;
    vertical-align: baseline;
    height: 1em;
    float: right;
    line-height: 1.618;
}

.fb_iframe_widget .scaledImageFitHeight {
    width: 100% !important;
    height: auto;
    left: 0 !important;
}

.fb_iframe_widget ._2zfs {
    background: none !important;
}

ul.products li.product .button {
    background-color: #800080;
    border: 1px solid #800080;
    color: white;
    border-radius: 10px;
}

ul.products li.product .button:hover {
    background-color: white;
    border: 1px solid #800080;
    color: #800080;
}

ul.product-categories ul.children {
    display: none;
}

ul.product-categories > li.cat-parent:hover > ul.children,
ul.product-categories > li.cat-parent:hover > ul.children > li.cat-parent > ul.children
{
    display: block;
}

.cart-contents {
    padding: 0 !important;
}

.widget_categories ul li {
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    background: #800080;
    background-image: -webkit-radial-gradient(top, circle cover, #800080 0%, #4B0082 80%);
    background-image: -moz-radial-gradient(top, circle cover, #800080 0%, #4B0082 80%);
    background-image: -o-radial-gradient(top, circle cover, #800080 0%, #4B0082 80%);
    background-image: radial-gradient(top, circle cover, #800080 0%, #4B0082 80%);
}

.secondary-navigation,
ul#menu-menu-pour-mobiles-2 ul.children
{
    display: none;
}

#map_div { height: 200px; }

.storefront-breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
    color: #800080;
}

.widget_nav_menu ul li::before { content: none; }

#menu-menu-footer > li:last-child { display: none; }

.site-footer {
    background: #7f7f7f;
    position: relative;
}

.site-footer ul {
    list-style-type: none;
}

footer ul {
    margin: 0;
    padding-bottom: 20px;
}

#footer-content li {  
    width: 25%;
    float: left;
    text-align: left;
}

#footer-content li:not(:first-child) { padding: 0 0 0 5%; }

.widget_archive ul .children,
.widget_categories ul .children,
.widget_layered_nav ul .children,
.widget_layered_nav_filters ul .children,
.widget_links ul .children,
.widget_nav_menu ul .children,
.widget_pages ul .children,
.widget_product_categories ul .children,
.widget_recent_comments ul .children,
.widget_recent_entries ul .children {
    margin-left: 0;
    margin-top: 0;
    padding: 0;
}

.widget_product_categories ul li {
    padding: 0;
}

ul.product-categories > li {
    padding-left: 10px;
}

.header-widget-region {
    width: 100%;
}

button.menu-toggle,
button.menu-toggle:hover {
    background: none;
    border: none;
}

/*.search-field {
    max-width: 0px;
    overflow: hidden;
    opacity: 0;
    transition: 0.3s linear all;
}

.search-field.open {
    max-width: 100%;
    opacity: 1;
}*/

/* DESKTOP */
@media screen and (min-width: 768px) {
    header#masthead {
        width: 100%;
        box-shadow: 0 1px 4px rgba(0,0,0,0.3);
        position: fixed;
    }

    header#masthead > .col-full {
        width: 90%;
        max-width: 90%;
        padding: 10px 0 0 0;
        margin: 0 auto;
    }

    header#masthead > .col-full > .col-full{
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    .search-field {
        width: calc(100% - 75px);
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    
    /* LOGO */
    .site-header .top-left {
        width: 229px !important;
        float: left;
    }

    /* SEACH BAR + ACCOUNT + CART */
    .site-header .top-right {
        width: calc(100% - 230px) !important;
        padding-left: 5%;
        float: right;
        font-size: 18px;
    }
    
    .site-header .site-search-form {
        width: 50%;
        float: left;
    }

    .site-header .top-right .mon-compte {
        width: 25%;
        margin: 0;
        float: left;
        text-align: center;
    }
    
    .site-header .top-right .mon-compte a {
        width: 100%;
        display: block;
        float: left;
    }

    .site-header .top-right .site-header-cart {
        width: 25%;
        margin: 0;
        float: right;
        text-align: center;
    }
    
    header .cart-contents > .woocommerce-Price-amount,
    .price .woocommerce-Price-amount {
        padding: 10px;
    }
    
    .main-navigation ul.menu > li > a,
    .main-navigation ul.nav-menu > li > a {
        padding: 0 !important;
    }
    
    .site-header ul.menu li.current-menu-item > a,
    .site-header ul.menu li a:hover {
        color: #e42828;
    }
    
    .price .woocommerce-Price-amount,
    .price .woocommerce-Price-currencySymbol {
        background: #800080;
        color: white;
        font-weight: 600 !important;
        border-radius: 10px;
        font-size: 18px;
    }
    
    .price .woocommerce-Price-amount {
        border: 1px solid orange;
    }

    .col-full {
        max-width: 90%;
    }
    
    header .cart-contents > .woocommerce-Price-amount,
    .price .woocommerce-Price-amount {
        padding: 10px;
    }
    
    #content {
        margin-top: 150px;
    }
}