/*
Theme Name: My Storefront Child
Theme URI: https://woocommerce.com/storefront/
Description: Custom lightweight child theme for Storefront and WooCommerce.
Author: Your Store Name
Version: 1.0.0
Template: storefront
Text Domain: my-storefront-child
*/


/* =========================================================
   STORE VARIABLES
   ========================================================= */

:root {

    --store-primary: #0b2a4a;
    --store-secondary: #1d5f9b;
    --store-accent: #d62828;

    --store-text: #222222;
    --store-muted: #666666;

    --store-background: #ffffff;
    --store-border: #dddddd;

    --store-header-height: 76px;

    --store-content-width: 1200px;

}


/* =========================================================
   GLOBAL RESET FOR OUR HEADER
   ========================================================= */

.msc-header,
.msc-header *,
.msc-header *::before,
.msc-header *::after {

    box-sizing: border-box;

}


/* =========================================================
   MAIN HEADER
   ========================================================= */

.msc-header {

    width: 100%;

    background: var(--store-background);

    border-bottom: 1px solid var(--store-border);

    position: relative;

    z-index: 1000;

}


/* =========================================================
   MAIN HEADER ROW
   ========================================================= */

.msc-header-main {

    width: 100%;

}


.msc-header-inner {

    width: 100%;

    max-width: var(--store-content-width);

    min-height: var(--store-header-height);

    margin: 0 auto;

    padding: 12px 20px;

    display: flex;

    align-items: center;

    gap: 20px;

}


/* =========================================================
   BRAND
   ========================================================= */

.msc-brand {

    flex: 0 0 auto;

}


.msc-brand-link {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--store-primary);

    text-decoration: none;

    line-height: 1;

}


.msc-brand-link:hover {

    color: var(--store-primary);

}


.msc-logo {

    display: block;

    width: auto;

    max-width: 55px;

    max-height: 55px;

    object-fit: contain;

}


.msc-store-name {

    font-size: 21px;

    font-weight: 700;

    line-height: 1.15;

    white-space: nowrap;

}


/* =========================================================
   DESKTOP SEARCH
   ========================================================= */

.msc-desktop-search {

    flex: 1 1 auto;

    min-width: 180px;

}


.msc-desktop-search .woocommerce-product-search {

    margin: 0;

    display: flex;

    width: 100%;

}


.msc-desktop-search .search-field {

    flex: 1 1 auto;

    min-width: 0;

    height: 44px;

    padding: 0 14px;

    border: 1px solid var(--store-border);

    border-right: 0;

    border-radius: 4px 0 0 4px;

    font-size: 15px;

    background: #ffffff;

}


.msc-desktop-search button {

    flex: 0 0 auto;

    height: 44px;

    padding: 0 18px;

    border: 0;

    border-radius: 0 4px 4px 0;

    background: var(--store-primary);

    color: #ffffff;

    cursor: pointer;

}


.msc-desktop-search button:hover {

    background: var(--store-secondary);

}


/* =========================================================
   CART
   ========================================================= */

.msc-cart {

    flex: 0 0 auto;

}


.msc-cart-link {

    min-width: 58px;

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    position: relative;

    color: var(--store-primary);

    text-decoration: none;

}


.msc-cart-link:hover {

    color: var(--store-secondary);

}


.msc-cart-icon {

    display: flex;

    align-items: center;

    justify-content: center;

}


.msc-cart-text {

    font-size: 14px;

    font-weight: 600;

}


.msc-cart-count {

    min-width: 19px;

    height: 19px;

    padding: 0 5px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--store-accent);

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.msc-desktop-navigation {

    width: 100%;

    background: var(--store-primary);

}


.msc-navigation-inner {

    max-width: var(--store-content-width);

    margin: 0 auto;

    padding: 0 20px;

}


.msc-primary-menu {

    margin: 0;

    padding: 0;

    display: flex;

    align-items: stretch;

    list-style: none;

}


.msc-primary-menu > li {

    position: relative;

    margin: 0;

}


.msc-primary-menu > li > a {

    display: flex;

    align-items: center;

    min-height: 46px;

    padding: 0 17px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

}


.msc-primary-menu > li > a:hover,

.msc-primary-menu > li.current-menu-item > a,

.msc-primary-menu > li.current-menu-ancestor > a {

    background: var(--store-secondary);

}


/* =========================================================
   SECOND-LEVEL DESKTOP MENU
   ========================================================= */

.msc-primary-menu .sub-menu {

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 220px;

    margin: 0;

    padding: 8px 0;

    background: #ffffff;

    border: 1px solid var(--store-border);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.10);

    list-style: none;

    opacity: 0;

    visibility: hidden;

    transform: translateY(5px);

    transition:
        opacity 0.15s ease,
        transform 0.15s ease;

}


.msc-primary-menu li:hover > .sub-menu,

.msc-primary-menu li:focus-within > .sub-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


.msc-primary-menu .sub-menu a {

    display: block;

    padding: 10px 15px;

    color: var(--store-text);

    font-size: 14px;

    text-decoration: none;

}


.msc-primary-menu .sub-menu a:hover {

    background: #f5f5f5;

    color: var(--store-primary);

}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.msc-menu-toggle {

    display: none;

    width: 42px;

    height: 42px;

    padding: 8px;

    border: 0;

    background: transparent;

    cursor: pointer;

}


.msc-menu-toggle span {

    display: block;

    width: 24px;

    height: 2px;

    margin: 5px auto;

    background: var(--store-primary);

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;

}


/* =========================================================
   MOBILE SEARCH
   ========================================================= */

.msc-mobile-search {

    display: none;

    padding: 0 15px 12px;

}


.msc-mobile-search .woocommerce-product-search {

    display: flex;

    width: 100%;

    margin: 0;

}


.msc-mobile-search .search-field {

    flex: 1;

    min-width: 0;

    height: 42px;

    padding: 0 12px;

    border: 1px solid var(--store-border);

    border-right: 0;

    border-radius: 4px 0 0 4px;

    font-size: 15px;

}


.msc-mobile-search button {

    height: 42px;

    padding: 0 15px;

    border: 0;

    border-radius: 0 4px 4px 0;

    background: var(--store-primary);

    color: #ffffff;

}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

.msc-mobile-navigation {

    display: none;

    border-top: 1px solid var(--store-border);

    background: #ffffff;

}


.msc-mobile-menu {

    margin: 0;

    padding: 0;

    list-style: none;

}


.msc-mobile-menu li {

    margin: 0;

    border-bottom: 1px solid var(--store-border);

}


.msc-mobile-menu a {

    display: block;

    padding: 14px 18px;

    color: var(--store-text);

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

}


.msc-mobile-menu a:hover {

    background: #f5f5f5;

    color: var(--store-primary);

}


/* =========================================================
   MOBILE BREAKPOINT
   ========================================================= */

@media screen and (max-width: 767px) {


    .msc-header-inner {

        min-height: 62px;

        padding: 8px 12px;

        gap: 8px;

    }


    .msc-menu-toggle {

        display: block;

        flex: 0 0 42px;

    }


    .msc-brand {

        flex: 1 1 auto;

        min-width: 0;

    }


    .msc-brand-link {

        gap: 7px;

        overflow: hidden;

    }


    .msc-logo {

        max-width: 42px;

        max-height: 42px;

    }


    .msc-store-name {

        max-width: 100%;

        overflow: hidden;

        text-overflow: ellipsis;

        font-size: 17px;

    }


    .msc-desktop-search {

        display: none;

    }


    .msc-cart-text {

        display: none;

    }


    .msc-cart-link {

        min-width: 42px;

        min-height: 42px;

    }


    .msc-mobile-search {

        display: block;

    }


    .msc-desktop-navigation {

        display: none;

    }


    .msc-mobile-navigation:not([hidden]) {

        display: block;

    }


}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media screen and (max-width: 360px) {


    .msc-store-name {

        font-size: 15px;

    }


    .msc-logo {

        max-width: 36px;

        max-height: 36px;

    }


    .msc-header-inner {

        padding-left: 8px;

        padding-right: 8px;

    }

}