header.wp-block-template-part {
    padding-block-start: 24px;
    padding-block-end: 20px;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-block-start: 0;
    position: relative;
    z-index: 10;
}

/* Header on front page - overlay on hero */
body.home header.wp-block-template-part,
body.page-template-front-page header.wp-block-template-part {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 3;
    background-color: transparent;
}

/* Ensure header content is visible on hero background */
body.home header.wp-block-template-part .wp-block-group,
body.page-template-front-page header.wp-block-template-part .wp-block-group {
    position: relative;
    z-index: 101;
}

/* Override accent-4 background to white */
/* header.bg-\[var\(--wp--preset--color--accent-4\)\],
header[class*="accent-4"] {
    background-color: var(--wp--preset--color--accent-2) !important;
} */

/* Override any Tailwind bg-[var(--wp--preset--color--accent-4)] class */
/* .bg-\[var\(--wp--preset--color--accent-4\)\] {
    background-color: var(--wp--preset--color--accent-2) !important;
} */
header.wp-block-template-part.ecommerce {
    padding-block-start: 0;
    padding-block-end: 0;
}

.ecommerce-search .wp-block-search__inside-wrapper  {
    border: 0;
    padding: 0 0 8px 28px;
    position: relative;
    width: 100%;
    border-bottom: 1px solid var(--wp--preset--color--accent-2);
}

.wp-block-search__inside-wrapper input[type="search"] {
    position: relative;
}

.wp-block-search__inside-wrapper input[type="search"]:focus {
    border: 0;
    outline: 0;
}

.wp-block-search__inside-wrapper button[type="submit"] {
    position: absolute;
    left: 0;
    top: -6px;
    bottom: 0;
    background-color: transparent;
    border: 0;
    padding: 0;
    margin-left: 0;
}

.header__cart .wc-block-mini-cart__icon {
    width: 24px !important;
    height: 24px !important;
}
            
.header__cart .wc-block-mini-cart__badge {
    background-color: var(--wp--preset--color--accent-1) !important;
    color: var(--wp--preset--color--accent-2) !important;
    opacity: 1 !important;
}

.header__login  {
    background-image: url('../../images/login-icon.svg');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 26px;
    transition: filter .25s ease;
}

.header__login  a {
    color: var(--wp--preset--color--accent-2);
    transition: color .25s ease;
}

.header__login  a:hover {
    filter: brightness(0) saturate(100%) invert(16%) sepia(83%) saturate(4558%) hue-rotate(343deg) brightness(91%) contrast(99%);
}

.header__logo.wp-block-site-logo.is-default-size a,
.header__logo.wp-block-site-logo.is-default-size img.custom-logo {
    width: 180px;
}

.header__logo.wp-block-site-logo.is-default-size  a {
    display: block; 
}

.is-layout-flex > :is(.header__top-icons)  {
    margin: 0 auto;
    width: 100%;
    column-gap: 15px;
}

.is-layout-flex > :is(.wp-block-social-links) {
    column-gap: 10px;
}

.is-layout-flex > :is(.header__top-icons .header-icons-block) {
    margin-left: auto;
}

@media (min-width: 768px ) {
    .is-layout-flex > :is(.header__top-icons)  {
        width: auto;
        margin: 0 0 auto 0;
        column-gap: 20px;
    }
}

@media (min-width: 1024px ) {
    .header__logo.wp-block-site-logo.is-default-size a,
    .header__logo.wp-block-site-logo.is-default-size img.custom-logo {
            width: 150px;
    }
    .is-layout-flex > :is(.header__top-icons)  {
        column-gap: 16px;
    }
    header.wp-block-template-part {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    body.home .header-container {
        width: calc(100% - 120px) !important;
    }
}


@media ( min-width: 1280px ) {
    header.wp-block-template-part {
        padding-block-start: 40px;
        padding-block-end: 30px;
    }
    header.wp-block-template-part.ecommerce {
        padding-block-start: 0;
        padding-block-end: 0;
    }
    .header__logo.wp-block-site-logo.is-default-size a,
    .header__logo.wp-block-site-logo.is-default-size img.custom-logo {
            width: 180px;
    }
    .is-layout-flex > :is(.header__top-icons)  {
        column-gap: 20px;
    }
    .is-layout-flex > :is(.header__top-icons .wp-block-social-links)  {
        column-gap: 10px;
    }
}

@media ( min-width: 1440px ) {
    header.wp-block-template-part {
        padding-left: 0;
        padding-right: 0;
    }
    body.home .header-container {
        width: 100% !important;
    }
}

@media ( min-width: 1536px ) {
    header.wp-block-template-part {
        padding-block-start: 40px;
    }
}
/* Header language switcher: cancel the drawer offset coming from the
   languageswitcher block CSS (old cached copies still carry a
   margin-block-start: 20px !important on .lang-switcher) */
.wp-block-group .lang-switcher:not(.lang-switcher--drawer-only) {
    margin-block-start: 0 !important;
}

/* Center the logo on the actual screen: the right-side icon group (language
   switcher / account / wishlist / cart) is taken out of the flex flow so the
   split menu (whose own center is the logo) centers within the full
   .header-container width. Below lg the same group is the full-width mobile
   top bar; between lg and xl the front-page menu (842px) plus the icon group
   does not fit around a true screen center, so the fix starts at xl. */
@media (min-width: 1280px) {
    .header-container {
        position: relative;
    }

    .header-container > .wp-block-group {
        /* !important: the front-page header variant re-declares position on
           this group later in the cascade */
        position: absolute !important;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .header-container > .main-menu {
        margin-inline: auto;
    }
}

/* Mobile / tablet header bar (burger layouts, < lg): center the logo on the
   screen. The top-bar language switcher is hidden here — the burger drawer
   contains its own copy (.lang-switcher--drawer-only) — which frees the room
   the centered logo needs on narrow screens. */
@media (max-width: 1023px) {
    .header-container > .wp-block-group {
        position: relative;
        min-height: 48px;
    }

    .header-container > .wp-block-group > .lang-switcher {
        display: none !important;
    }

    .header-container > .wp-block-group > .wp-block-site-logo.menu-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
    }

    /* With the logo out of flow, pin the burger left and the icon cluster
       right regardless of the group's own justification setting */
    .header-container > .wp-block-group > .mobile-menu__button {
        margin-right: auto !important;
    }
}