@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap");

:root {
    --io-ink: #17213f;
    --io-blue: #3155d9;
    --io-coral: #ff785a;
    --io-sun: #ffd86b;
    --io-paper: #f7f4ee;
    --io-line: rgba(23, 33, 63, .11);
}

body {
    color: var(--io-ink);
    background: #fff;
    font-family: "DM Sans", sans-serif;
}

h1, h2, h3 {
    font-family: "Manrope", sans-serif;
    letter-spacing: -.04em;
}

.page-wrapper {
    overflow: hidden;
}

.page-main {
    max-width: none !important;
    padding: 0 !important;
}

.columns {
    display: block !important;
}

/* Header & Navigation Fixes */
.page-header, #header {
    background: #ffffff !important;
    border: 0;
    color: #17213f !important;
}

#header a, #header span, #header button, #header p, #header div, #header input {
    color: #17213f !important;
}

#header svg {
    stroke: #17213f !important;
}

.header.content {
    max-width: 1320px;
    min-height: 90px;
    margin: auto;
    padding: 0 28px;
}

.logo img {
    width: 210px !important;
    height: auto !important;
}

.nav-sections {
    background: var(--io-ink) !important;
    border: 0;
}

nav.navigation, .navigation {
    max-width: 1320px;
    margin: auto;
    background: #17213f !important;
}

/* Fix navigation text color inside light containers/dropdowns vs navbar */
.nav-sections .navigation a, 
.nav-sections .navigation span, 
nav.navigation a, 
nav.navigation span {
    color: #17213f !important;
}

.nav-sections a.level-0, 
.nav-sections span.level-0,
nav.navigation a.level-0 {
    color: #ffffff !important;
}

/* Category & Product text links */
a.product-item-link, .product-item-name a, .product-item-details a {
    color: #17213f !important;
}

a.product-item-link:hover, .product-item-name a:hover {
    color: #3155d9 !important;
}

/* Footer Fixes */
.page-footer, footer.page-footer {
    margin: 0 !important;
    background: #111a34 !important;
    color: #ffffff !important;
}

.page-footer a {
    color: #e2e8f0 !important;
}

.page-footer a:hover {
    color: #ffffff !important;
}

.page-footer div, .page-footer p, .page-footer h2, .page-footer h3, .page-footer span {
    color: #ffffff !important;
}
