/* =========================================================
   2. HEADER - DESKTOP
========================================================= */

@media (min-width: 768px) {

    .site-header {
        padding-top: 12px;
        padding-bottom: 0;
    }

    .site-header > .col-full {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 20px;
    }

    /* Logo */

    .site-header .site-branding {
        flex: 0 0 150px;
        width: 150px;
        margin: 0;
    }

    .site-header .site-branding img {
        display: block;
        max-width: 140px;
        max-height: 65px;
        width: auto;
        height: auto;
    }

    /* Search */

    .site-header .site-search {
        flex: 0 0 200px;
        width: 200px;
        margin: 0;
    }

    /* Secondary navigation */

    .site-header .secondary-navigation {
        flex: 0 0 auto;
        width: auto;
        float: none;
        margin: 0;
        white-space: nowrap;
    }

    .site-header .secondary-navigation ul.menu {
        white-space: nowrap;
    }

    .site-header .secondary-navigation ul.menu > li {
        display: inline-block;
        float: none;
    }

    .secondary-navigation ul.menu > li > a {
        padding: 5px 7px;
        color: #fff;
    }

    .secondary-navigation ul.menu > li > a:hover,
    .secondary-navigation ul.menu > li.current-menu-item > a {
        color: #d96b00;
    }

    /* Cart */

    .site-header .site-header-cart {
        flex: 0 0 auto;
        width: auto;
        min-width: 155px;
        float: none;
        margin: 0 0 0 auto;
        white-space: nowrap;
    }

    .site-header .site-header-cart .cart-contents {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .site-header-cart .cart-contents,
    .site-header-cart .cart-contents .amount,
    .site-header-cart .cart-contents .count {
        color: #fff;
    }

    .site-header-cart .cart-contents:hover,
    .site-header-cart .cart-contents:hover .amount,
    .site-header-cart .cart-contents:hover .count {
        color: #d96b00;
    }

    /* PRIMARY NAVIGATION */

    .storefront-primary-navigation {
        min-height: 44px;
    }

    .main-navigation {
        width: 100%;
        float: none;
    }

    .main-navigation ul.menu,
    .main-navigation ul.nav-menu {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        white-space: nowrap;
    }

    .main-navigation ul.menu > li > a,
    .main-navigation ul.nav-menu > li > a {
        padding: 12px 11px;
        font-size: 14px;
        color: #fff;
    }

    .main-navigation ul.menu > li > a:hover,
    .main-navigation ul.nav-menu > li > a:hover,
    .main-navigation ul.menu > li.current-menu-item > a,
    .main-navigation ul.nav-menu > li.current-menu-item > a,
    .main-navigation ul.menu > li.current-menu-ancestor > a,
    .main-navigation ul.nav-menu > li.current-menu-ancestor > a {
        color: #d96b00;
    }

    /* Submenus */

    .main-navigation ul.menu ul.sub-menu,
    .main-navigation ul.nav-menu ul.sub-menu {
        background-color: #111;
    }

    .main-navigation ul.menu ul.sub-menu li a,
    .main-navigation ul.nav-menu ul.sub-menu li a {
        color: #fff;
    }

    .main-navigation ul.menu ul.sub-menu li a:hover,
    .main-navigation ul.nav-menu ul.sub-menu li a:hover {
        color: #d96b00;
        background-color: #1c1c1c;
    }

    .main-navigation ul.menu ul.sub-menu li.current-menu-item > a {
        color: #d96b00;
    }
}

/* =========================================================
   3. HEADER - MOBILE
========================================================= */

@media (max-width: 767px) {

    .site-header .site-branding img {
        max-width: 130px;
        height: auto;
    }
}