/* =====================================
   SECTION HEADER
===================================== */

.section-header{

    text-align:center;

    margin-bottom:70px;

}

.section-header span{

    display:block;

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:1px;

    font-size:14px;

    font-weight:700;

    margin-bottom:14px;

}

.section-header h2{

    font-size:48px;

}

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

.site-header{

    background:#fff;

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

}

.site-header__inner{

    height:90px;

    display:grid;

    grid-template-columns:auto 1fr auto;

    align-items:center;

    gap:40px;

}

.site-branding{

    font-size:34px;

    font-weight:800;

    letter-spacing:-1px;

}

.main-navigation{

    justify-self:center;

}

/* =====================================
   HEADER ACTIONS
===================================== */

.header-actions{
    display:flex;
    gap:26px;
    align-items:center;
}

.header-action{

    color:var(--text);

    transition:.25s;

}

.header-action svg{
    width:22px;
    height:22px;
}

.header-action:hover{

    color:var(--primary);

    transform:translateY(-2px);

}
.custom-logo{

    display:block;

    width:auto;

    height: 64px;

}

.custom-logo-link{

    display:flex;

    align-items:center;

}

.site-branding img{

    width:auto;

    height:54px;

}

.header-cart{

    position:relative;

}

.cart-count{

    position:absolute;

    top:-6px;

    right:-8px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:11px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

}

.cart-count[data-count="0"]{

    display:none;

}

@media (max-width:900px){

    .site-header__inner{

        height:auto;

        min-height:78px;

        grid-template-columns:1fr auto;

        gap:20px;

        padding-block:14px;

    }

    .main-navigation{

        grid-column:1 / -1;

        justify-self:start;

        width:100%;

        overflow-x:auto;

        padding-bottom:4px;

    }

    .site-branding{

        font-size:28px;

    }

    .site-branding img,
    .custom-logo{

        height:48px;

    }

    .header-actions{

        gap:18px;

    }

}

@media (max-width:560px){

    .section-header{

        margin-bottom:44px;

    }

    .section-header h2{

        font-size:34px;

    }

}