/* Custom Editorial Header Polish */
header.site-header, .wp-block-navigation {
    padding: 30px 20px !important;
    background-color: #fff !important;
    border-bottom: 1px solid #f2f2f2;
}

/* Site Branding Title */
.site-title a, .site-logo-text {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    letter-spacing: 4px !important;
    font-size: 1.3rem !important;
    color: #000 !important;
    text-decoration: none !important;
}

/* Site Navigation Menu Links */
.wp-block-navigation-item__content, .main-navigation a {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-weight: 600 !important;
    color: #444 !important;
    transition: color 0.2s ease;
}

.wp-block-navigation-item__content:hover, .main-navigation a:hover {
    color: #ff5e97 !important; /* Matches your OCTAVES color accent pop */
}


/* Slim header (Site Manager, Oct 2026) */

/* --- All sizes: compact header shell --- */
header.site-header#masthead {
    padding: 12px 16px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 16px;
    row-gap: 10px;
}
#masthead > * { margin-top: 0; margin-bottom: 0; }
#masthead::before, #masthead::after { content: none; display: none; }

/* Branding: logo + title on one row */
#masthead .site-branding {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 1 auto;
    min-width: 0;
    padding-right: 0;
}
#masthead .site-branding > * { margin: 0; }
#masthead .site-logo { flex: 0 0 auto; line-height: 0; }
#masthead .site-logo .custom-logo {
    height: 70px;
    width: auto;
    max-width: none;
    max-height: none;
    display: block;
}
#masthead .site-logo + .site-title { margin-top: 0; }
#masthead .site-title { line-height: 1.35; margin: 0; }
#masthead .site-title a {
    font-size: 12px !important;
    letter-spacing: 2px !important;
    display: block;
}

/* Mobile: Menu + Cart buttons on their own compact row */
#masthead .main-navigation { flex: 1 1 100%; margin: 0; }
#masthead .main-navigation #toggle-menu,
body[class*=woocommerce] #page #masthead .main-navigation #toggle-cart {
    padding: 7px 14px;
    font-size: 13px;
    line-height: 1.4;
}
/* Opened mobile menu: tidy, readable list */
#masthead .main-navigation #toggle:checked ~ .menu-pages-container { margin-top: 8px; }
#masthead .main-navigation #toggle:checked ~ .menu-pages-container a { padding: 8px 0; }

/* --- Tablet and up (>=560px): full menu, compact, cart flows inline after the last item --- */
@media only screen and (min-width: 560px) {
    header.site-header#masthead { padding: 14px 24px !important; }
    #masthead .site-logo .custom-logo { height: 90px; }
    #masthead .site-title a { font-size: 14px !important; letter-spacing: 3px !important; }
    #masthead .site-branding { flex: 1 1 100%; }
    #masthead .main-navigation { display: block; line-height: 1; text-align: left; margin-left: -7px; /* align first item with logo */ }
    #masthead .main-navigation > div.menu-pages-container { display: inline; }
    #masthead .main-navigation > div.woocommerce-menu-container { display: inline-block; vertical-align: middle; }
    body[class*=woocommerce] #page #masthead .main-navigation > div:not(:last-of-type) { margin-right: 0; }
    #masthead .main-navigation > div > ul#menu-pages-1 { display: inline; font-size: 0; /* removes stray gaps between items */ }
    #masthead .main-navigation > div > ul#menu-pages-1 > li { display: inline-block; width: auto; vertical-align: middle; }
    #masthead .main-navigation > div > ul > li > a {
        font-size: 12px !important;
        letter-spacing: 1.2px !important;
        padding: 6px 7px;
        line-height: 1.2;
    }
    #masthead .main-navigation > div > ul > li:first-of-type > a { padding-left: 7px; }
    #masthead .main-navigation > div > ul > li:last-of-type > a { padding-right: 7px; }
    body[class*=woocommerce] #page #masthead .main-navigation .woocommerce-cart-link { font-size: 12px !important; padding: 6px 6px 6px 10px; }
    #masthead .woocommerce-menu-container { text-align: left; }
}

/* --- Desktop (>=1024px): branding left, menu right (about 2 rows) --- */
@media only screen and (min-width: 1024px) {
    header.site-header#masthead { flex-wrap: nowrap; padding: 16px 24px !important; column-gap: 24px; }
    #masthead .site-logo .custom-logo { height: 100px; }
    #masthead .site-branding { flex: 0 0 auto; gap: 14px; }
    #masthead .site-title { max-width: 280px; }
    #masthead .site-title a { font-size: 13px !important; letter-spacing: 2px !important; }
    #masthead .main-navigation { flex: 1 1 0; text-align: right; margin-left: 0; margin-right: -5px; }
    #masthead .main-navigation > div > ul > li > a { font-size: 11.5px !important; letter-spacing: 1px !important; padding: 6px 5px; }
}


/* Slim header (Site Manager, Oct 2026) */

/* --- All sizes: compact header shell --- */
header.site-header#masthead {
    padding: 12px 16px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 16px;
    row-gap: 10px;
}
#masthead > * { margin-top: 0; margin-bottom: 0; }
#masthead::before, #masthead::after { content: none; display: none; }

/* Branding: logo + title on one row */
#masthead .site-branding {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 1 auto;
    min-width: 0;
    padding-right: 0;
}
#masthead .site-branding > * { margin: 0; }
#masthead .site-logo { flex: 0 0 auto; line-height: 0; }
#masthead .site-logo .custom-logo {
    height: 70px;
    width: auto;
    max-width: none;
    max-height: none;
    display: block;
}
#masthead .site-logo + .site-title { margin-top: 0; }
#masthead .site-title { line-height: 1.35; margin: 0; }
#masthead .site-title a {
    font-size: 12px !important;
    letter-spacing: 2px !important;
    display: block;
}

/* Mobile: Menu + Cart buttons on their own compact row */
#masthead .main-navigation { flex: 1 1 100%; margin: 0; }
#masthead .main-navigation #toggle-menu,
body[class*=woocommerce] #page #masthead .main-navigation #toggle-cart {
    padding: 7px 14px;
    font-size: 13px;
    line-height: 1.4;
}
/* Opened mobile menu: tidy, readable list */
#masthead .main-navigation #toggle:checked ~ .menu-pages-container { margin-top: 8px; }
#masthead .main-navigation #toggle:checked ~ .menu-pages-container a { padding: 8px 0; }

/* --- Tablet and up (>=560px): full menu, compact, cart flows inline after the last item --- */
@media only screen and (min-width: 560px) {
    header.site-header#masthead { padding: 14px 24px !important; }
    #masthead .site-logo .custom-logo { height: 90px; }
    #masthead .site-title a { font-size: 14px !important; letter-spacing: 3px !important; }
    #masthead .site-branding { flex: 1 1 100%; }
    #masthead .main-navigation { display: block; line-height: 1; text-align: left; margin-left: -7px; /* align first item with logo */ }
    #masthead .main-navigation > div.menu-pages-container { display: inline; }
    #masthead .main-navigation > div.woocommerce-menu-container { display: inline-block; vertical-align: middle; }
    body[class*=woocommerce] #page #masthead .main-navigation > div:not(:last-of-type) { margin-right: 0; }
    #masthead .main-navigation > div > ul#menu-pages-1 { display: inline; font-size: 0; /* removes stray gaps between items */ }
    #masthead .main-navigation > div > ul#menu-pages-1 > li { display: inline-block; width: auto; vertical-align: middle; }
    #masthead .main-navigation > div > ul > li > a {
        font-size: 12px !important;
        letter-spacing: 1.2px !important;
        padding: 6px 7px;
        line-height: 1.2;
    }
    #masthead .main-navigation > div > ul > li:first-of-type > a { padding-left: 7px; }
    #masthead .main-navigation > div > ul > li:last-of-type > a { padding-right: 7px; }
    body[class*=woocommerce] #page #masthead .main-navigation .woocommerce-cart-link { font-size: 12px !important; padding: 6px 6px 6px 10px; }
    #masthead .woocommerce-menu-container { text-align: left; }
}

/* --- Desktop (>=1024px): branding left, menu right (about 2 rows) --- */
@media only screen and (min-width: 1024px) {
    header.site-header#masthead { flex-wrap: nowrap; padding: 16px 24px !important; column-gap: 24px; }
    #masthead .site-logo .custom-logo { height: 100px; }
    #masthead .site-branding { flex: 0 0 auto; gap: 14px; }
    #masthead .site-title { max-width: 280px; }
    #masthead .site-title a { font-size: 13px !important; letter-spacing: 2px !important; }
    #masthead .main-navigation { flex: 1 1 0; text-align: right; margin-left: 0; margin-right: -5px; }
    #masthead .main-navigation > div > ul > li > a { font-size: 11.5px !important; letter-spacing: 1px !important; padding: 6px 5px; }
}
/* Slim header (Site Manager, Oct 2026) */

/* --- All sizes: compact header shell --- */
header.site-header#masthead {
    padding: 12px 16px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 16px;
    row-gap: 10px;
}
#masthead > * { margin-top: 0; margin-bottom: 0; }
#masthead::before, #masthead::after { content: none; display: none; }

/* Branding: logo + title on one row */
#masthead .site-branding {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 1 auto;
    min-width: 0;
    padding-right: 0;
}
#masthead .site-branding > * { margin: 0; }
#masthead .site-logo { flex: 0 0 auto; line-height: 0; }
#masthead .site-logo .custom-logo {
    height: 70px;
    width: auto;
    max-width: none;
    max-height: none;
    display: block;
}
#masthead .site-logo + .site-title { margin-top: 0; }
#masthead .site-title { line-height: 1.35; margin: 0; }
#masthead .site-title a {
    font-size: 12px !important;
    letter-spacing: 2px !important;
    display: block;
}

/* Mobile: Menu + Cart buttons on their own compact row */
#masthead .main-navigation { flex: 1 1 100%; margin: 0; }
#masthead .main-navigation #toggle-menu,
body[class*=woocommerce] #page #masthead .main-navigation #toggle-cart {
    padding: 7px 14px;
    font-size: 13px;
    line-height: 1.4;
}
/* Opened mobile menu: tidy, readable list */
#masthead .main-navigation #toggle:checked ~ .menu-pages-container { margin-top: 8px; }
#masthead .main-navigation #toggle:checked ~ .menu-pages-container a { padding: 8px 0; }

/* --- Tablet and up (>=560px): full menu, compact, cart flows inline after the last item --- */
@media only screen and (min-width: 560px) {
    header.site-header#masthead { padding: 14px 24px !important; }
    #masthead .site-logo .custom-logo { height: 90px; }
    #masthead .site-title a { font-size: 14px !important; letter-spacing: 3px !important; }
    #masthead .site-branding { flex: 1 1 100%; }
    #masthead .main-navigation { display: block; line-height: 1; text-align: left; margin-left: -7px; /* align first item with logo */ }
    #masthead .main-navigation > div.menu-pages-container { display: inline; }
    #masthead .main-navigation > div.woocommerce-menu-container { display: inline-block; vertical-align: middle; }
    body[class*=woocommerce] #page #masthead .main-navigation > div:not(:last-of-type) { margin-right: 0; }
    #masthead .main-navigation > div > ul#menu-pages-1 { display: inline; font-size: 0; /* removes stray gaps between items */ }
    #masthead .main-navigation > div > ul#menu-pages-1 > li { display: inline-block; width: auto; vertical-align: middle; }
    #masthead .main-navigation > div > ul > li > a {
        font-size: 12px !important;
        letter-spacing: 1.2px !important;
        padding: 6px 7px;
        line-height: 1.2;
    }
    #masthead .main-navigation > div > ul > li:first-of-type > a { padding-left: 7px; }
    #masthead .main-navigation > div > ul > li:last-of-type > a { padding-right: 7px; }
    body[class*=woocommerce] #page #masthead .main-navigation .woocommerce-cart-link { font-size: 12px !important; padding: 6px 6px 6px 10px; }
    #masthead .woocommerce-menu-container { text-align: left; }
}

/* --- Desktop (>=1024px): branding left, menu right (about 2 rows) --- */
@media only screen and (min-width: 1024px) {
    header.site-header#masthead { flex-wrap: nowrap; padding: 16px 24px !important; column-gap: 24px; }
    #masthead .site-logo .custom-logo { height: 100px; }
    #masthead .site-branding { flex: 0 0 auto; gap: 14px; }
    #masthead .site-title { max-width: 280px; }
    #masthead .site-title a { font-size: 13px !important; letter-spacing: 2px !important; }
    #masthead .main-navigation { flex: 1 1 0; text-align: right; margin-left: 0; margin-right: -5px; }
    #masthead .main-navigation > div > ul > li > a { font-size: 11.5px !important; letter-spacing: 1px !important; padding: 6px 5px; }
}


/* Front page: trim empty space under the hero banner */
body.home .home-container .home-hero { min-height: 0; margin-bottom: 40px; }