/* Header utility icons based on Figma Frame 5. */
:root {
    --og-header-icon-color: #252525;
    --og-header-icon-hover: #438773;
    --og-header-cart-badge-bg: #438773;
    --og-header-cart-badge-color: #ffffff;
    --og-header-search-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.5306 20.4696L16.8366 15.7765C18.1971 14.1431 18.8755 12.048 18.7307 9.92715C18.5859 7.80629 17.629 5.82289 16.0591 4.38956C14.4892 2.95623 12.4272 2.18333 10.3019 2.23163C8.17666 2.27993 6.15184 3.14571 4.64867 4.64888C3.1455 6.15205 2.27971 8.17687 2.23141 10.3021C2.18311 12.4274 2.95602 14.4894 4.38935 16.0593C5.82268 17.6293 7.80607 18.5861 9.92694 18.7309C12.0478 18.8757 14.1429 18.1973 15.7763 16.8368L20.4694 21.5308C20.5391 21.6005 20.6218 21.6558 20.7128 21.6935C20.8039 21.7312 20.9015 21.7506 21 21.7506C21.0985 21.7506 21.1961 21.7312 21.2872 21.6935C21.3782 21.6558 21.4609 21.6005 21.5306 21.5308C21.6003 21.4612 21.6556 21.3784 21.6933 21.2874C21.731 21.1963 21.7504 21.0988 21.7504 21.0002C21.7504 20.9017 21.731 20.8041 21.6933 20.713C21.6556 20.622 21.6003 20.5393 21.5306 20.4696ZM3.75 10.5002C3.75 9.16519 4.14588 7.86015 4.88758 6.75011C5.62928 5.64008 6.68349 4.77492 7.91689 4.26403C9.15029 3.75314 10.5075 3.61946 11.8169 3.87991C13.1262 4.14036 14.329 4.78324 15.273 5.72724C16.217 6.67125 16.8599 7.87398 17.1203 9.18335C17.3808 10.4927 17.2471 11.8499 16.7362 13.0833C16.2253 14.3167 15.3601 15.3709 14.2501 16.1126C13.1401 16.8543 11.835 17.2502 10.5 17.2502C8.7104 17.2482 6.99466 16.5364 5.72922 15.271C4.46378 14.0056 3.75199 12.2898 3.75 10.5002Z' fill='black'/%3E%3C/svg%3E");
    --og-header-profile-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.2861 19.899C19.8583 17.4306 17.658 15.6606 15.0902 14.8215C16.3603 14.0654 17.3471 12.9132 17.8991 11.542C18.4511 10.1707 18.5376 8.65616 18.1455 7.23093C17.7534 5.8057 16.9043 4.54859 15.7286 3.65265C14.5528 2.75671 13.1155 2.27148 11.6373 2.27148C10.1592 2.27148 8.72184 2.75671 7.54611 3.65265C6.37039 4.54859 5.52127 5.8057 5.12916 7.23093C4.73704 8.65616 4.82362 10.1707 5.37558 11.542C5.92754 12.9132 6.91437 14.0654 8.18453 14.8215C5.61671 15.6597 3.4164 17.4297 1.98859 19.899C1.93623 19.9844 1.9015 20.0794 1.88645 20.1784C1.8714 20.2774 1.87633 20.3785 1.90096 20.4755C1.92558 20.5726 1.9694 20.6638 2.02983 20.7437C2.09026 20.8235 2.16607 20.8905 2.2528 20.9406C2.33953 20.9907 2.43541 21.0229 2.53478 21.0353C2.63416 21.0478 2.73502 21.0402 2.83142 21.013C2.92782 20.9858 3.0178 20.9396 3.09605 20.8771C3.1743 20.8146 3.23923 20.737 3.28703 20.649C5.05328 17.5965 8.17515 15.774 11.6373 15.774C15.0995 15.774 18.2214 17.5965 19.9877 20.649C20.0354 20.737 20.1004 20.8146 20.1786 20.8771C20.2569 20.9396 20.3469 20.9858 20.4433 21.013C20.5397 21.0402 20.6405 21.0478 20.7399 21.0353C20.8393 21.0229 20.9352 20.9907 21.0219 20.9406C21.1086 20.8905 21.1844 20.8235 21.2448 20.7437C21.3053 20.6638 21.3491 20.5726 21.3737 20.4755C21.3983 20.3785 21.4033 20.2774 21.3882 20.1784C21.3732 20.0794 21.3384 19.9844 21.2861 19.899ZM6.38734 9.02403C6.38734 7.98568 6.69525 6.97065 7.27212 6.10729C7.849 5.24393 8.66894 4.57103 9.62825 4.17367C10.5876 3.77631 11.6432 3.67234 12.6616 3.87491C13.68 4.07748 14.6154 4.5775 15.3496 5.31172C16.0839 6.04595 16.5839 6.98141 16.7865 7.99981C16.989 9.01821 16.8851 10.0738 16.4877 11.0331C16.0903 11.9924 15.4174 12.8124 14.5541 13.3893C13.6907 13.9661 12.6757 14.274 11.6373 14.274C10.2454 14.2725 8.91092 13.7189 7.92667 12.7347C6.94243 11.7505 6.38883 10.416 6.38734 9.02403Z' fill='black'/%3E%3C/svg%3E");
    --og-header-cart-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 6 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.2142 25.9027C10.2142 26.1947 10.1276 26.4802 9.9653 26.7231C9.80303 26.9659 9.57239 27.1552 9.30255 27.267C9.03271 27.3788 8.73579 27.408 8.44933 27.351C8.16286 27.2941 7.89973 27.1534 7.6932 26.9469C7.48668 26.7404 7.34603 26.4772 7.28905 26.1908C7.23207 25.9043 7.26131 25.6074 7.37308 25.3375C7.48486 25.0677 7.67414 24.8371 7.91699 24.6748C8.15984 24.5125 8.44535 24.4259 8.73743 24.4259C9.12908 24.4259 9.5047 24.5815 9.78165 24.8584C10.0586 25.1354 10.2142 25.511 10.2142 25.9027ZM18.3363 24.4259C18.0442 24.4259 17.7587 24.5125 17.5159 24.6748C17.273 24.8371 17.0837 25.0677 16.972 25.3375C16.8602 25.6074 16.831 25.9043 16.8879 26.1908C16.9449 26.4772 17.0856 26.7404 17.2921 26.9469C17.4986 27.1534 17.7617 27.2941 18.0482 27.351C18.3347 27.408 18.6316 27.3788 18.9014 27.267C19.1713 27.1552 19.4019 26.9659 19.5642 26.7231C19.7264 26.4802 19.8131 26.1947 19.8131 25.9027C19.8131 25.511 19.6575 25.1354 19.3805 24.8584C19.1036 24.5815 18.728 24.4259 18.3363 24.4259ZM22.7343 12.8288L20.101 21.3856C19.9631 21.8393 19.6826 22.2363 19.3013 22.518C18.9199 22.7996 18.4578 22.9508 17.9837 22.9492H9.11307C8.63218 22.9474 8.16481 22.7898 7.78096 22.5001C7.3971 22.2105 7.11742 21.8042 6.98378 21.3423L3.64448 9.65839H2.09204C1.89621 9.65839 1.70841 9.5806 1.56993 9.44213C1.43146 9.30365 1.35367 9.11585 1.35367 8.92002C1.35367 8.72419 1.43146 8.53638 1.56993 8.39791C1.70841 8.25943 1.89621 8.18164 2.09204 8.18164H3.64448C3.96513 8.1827 4.27681 8.28759 4.53287 8.48059C4.78893 8.67359 4.9756 8.94433 5.06493 9.25229L5.81346 11.8735H22.0282C22.1437 11.8735 22.2577 11.9006 22.3609 11.9526C22.464 12.0046 22.5536 12.0801 22.6222 12.173C22.6909 12.2659 22.7368 12.3737 22.7563 12.4876C22.7757 12.6015 22.7682 12.7183 22.7343 12.8288ZM21.0286 13.3503H6.23525L8.40331 20.9371C8.44742 21.0913 8.54054 21.2269 8.6686 21.3235C8.79665 21.4201 8.95268 21.4724 9.11307 21.4724H17.9837C18.1417 21.4725 18.2956 21.4218 18.4227 21.328C18.5498 21.2341 18.6434 21.102 18.6898 20.9509L21.0286 13.3503Z' fill='black'/%3E%3C/svg%3E");
}

.ast-desktop .site-header-primary-section-right,
.ast-desktop .site-header-section-right {
    align-items: flex-end !important;
    column-gap: 0 !important;
}

.ast-desktop .site-header-primary-section-right > [data-section="section-header-search"],
.ast-desktop .site-header-section-right > [data-section="section-header-search"],
.ast-desktop .site-header-primary-section-right > .ast-header-search,
.ast-desktop .site-header-section-right > .ast-header-search {
    margin-right: 48px !important;
}

.ast-desktop .site-header-primary-section-right > [data-section="section-header-account"],
.ast-desktop .site-header-section-right > [data-section="section-header-account"],
.ast-desktop .site-header-primary-section-right > .ast-header-account,
.ast-desktop .site-header-section-right > .ast-header-account,
.ast-desktop .site-header-primary-section-right > .ast-header-account-wrap,
.ast-desktop .site-header-section-right > .ast-header-account-wrap {
    margin-right: 16px !important;
}

[data-section="section-header-search"] .ast-search-menu-icon,
[data-section="section-header-search"] .ast-search-icon,
[data-section="section-header-search"] .astra-search-icon,
.ast-header-search .ast-search-menu-icon,
.ast-header-search .ast-search-icon,
.ast-header-search .astra-search-icon,
[data-section="section-header-account"] .ast-header-account-link,
.ast-header-account-wrap .ast-header-account-link,
.ast-header-account .ast-header-account-link,
[data-section="section-header-woo-cart"] .ast-cart-menu-wrap,
.ast-site-header-cart .ast-cart-menu-wrap {
    align-items: center !important;
    color: var(--og-header-icon-color) !important;
    display: inline-flex !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-height: 24px !important;
    position: relative !important;
    transition: color 160ms ease !important;
}

[data-section="section-header-search"] .ast-search-menu-icon,
[data-section="section-header-search"] .ast-search-icon,
[data-section="section-header-search"] .astra-search-icon,
.ast-header-search .ast-search-menu-icon,
.ast-header-search .ast-search-icon,
.ast-header-search .astra-search-icon,
[data-section="section-header-account"] .ast-header-account-link,
.ast-header-account-wrap .ast-header-account-link,
.ast-header-account .ast-header-account-link {
    height: 24px !important;
    width: 24px !important;
}

[data-section="section-header-search"] svg,
.ast-header-search svg,
[data-section="section-header-account"] svg,
[data-section="section-header-account"] img,
[data-section="section-header-account"] .ast-header-account-text,
.ast-header-account-wrap svg,
.ast-header-account-wrap img,
.ast-header-account-wrap .ast-header-account-text,
.ast-site-header-cart .ast-cart-menu-wrap svg,
.ast-site-header-cart .ast-cart-menu-wrap .ast-icon,
.ast-site-header-cart .ast-cart-menu-wrap .astra-icon,
.ast-site-header-cart .ast-cart-menu-wrap .cart-total,
.ast-site-header-cart .ast-cart-menu-wrap .woocommerce-Price-amount {
    display: none !important;
}

[data-section="section-header-search"] .ast-search-menu-icon::before,
[data-section="section-header-search"] .ast-search-icon::before,
[data-section="section-header-search"] .astra-search-icon::before,
.ast-header-search .ast-search-menu-icon::before,
.ast-header-search .ast-search-icon::before,
.ast-header-search .astra-search-icon::before,
[data-section="section-header-account"] .ast-header-account-link::before,
.ast-header-account-wrap .ast-header-account-link::before,
.ast-header-account .ast-header-account-link::before,
[data-section="section-header-woo-cart"] .ast-cart-menu-wrap::before,
.ast-site-header-cart .ast-cart-menu-wrap::before {
    background-color: currentColor !important;
    content: "" !important;
    display: block !important;
    flex: 0 0 auto !important;
    height: 24px !important;
    mask-position: center !important;
    mask-repeat: no-repeat !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    width: 24px !important;
}

[data-section="section-header-search"] .ast-search-menu-icon::before,
[data-section="section-header-search"] .ast-search-icon::before,
[data-section="section-header-search"] .astra-search-icon::before,
.ast-header-search .ast-search-menu-icon::before,
.ast-header-search .ast-search-icon::before,
.ast-header-search .astra-search-icon::before {
    mask-image: var(--og-header-search-mask) !important;
    -webkit-mask-image: var(--og-header-search-mask) !important;
}

[data-section="section-header-account"] .ast-header-account-link::before,
.ast-header-account-wrap .ast-header-account-link::before,
.ast-header-account .ast-header-account-link::before {
    mask-image: var(--og-header-profile-mask) !important;
    -webkit-mask-image: var(--og-header-profile-mask) !important;
}

[data-section="section-header-woo-cart"] .ast-cart-menu-wrap,
.ast-site-header-cart .ast-cart-menu-wrap {
    height: 24px !important;
    min-width: 31px !important;
    overflow: visible !important;
    width: 31px !important;
}

[data-section="section-header-woo-cart"] .ast-cart-menu-wrap::before,
.ast-site-header-cart .ast-cart-menu-wrap::before {
    left: 0 !important;
    mask-image: var(--og-header-cart-mask) !important;
    position: absolute !important;
    top: 2px !important;
    -webkit-mask-image: var(--og-header-cart-mask) !important;
}

[data-section="section-header-woo-cart"] .ast-cart-menu-wrap .count,
.ast-site-header-cart .ast-cart-menu-wrap .count {
    align-items: center !important;
    background: var(--og-header-cart-badge-bg) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: var(--og-header-cart-badge-color) !important;
    display: flex !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    height: 16px !important;
    justify-content: center !important;
    left: 15px !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-width: 16px !important;
    padding: 0 4px !important;
    position: absolute !important;
    right: auto !important;
    top: -4px !important;
    transform: none !important;
    width: auto !important;
    z-index: 2 !important;
}

[data-section="section-header-search"] a:hover,
[data-section="section-header-search"] button:hover,
[data-section="section-header-account"] .ast-header-account-link:hover,
.ast-header-account-wrap .ast-header-account-link:hover,
.ast-header-account .ast-header-account-link:hover,
.ast-site-header-cart a:hover .ast-cart-menu-wrap,
.ast-site-header-cart .ast-cart-menu-wrap:hover,
[data-section="section-header-search"] a:focus-visible,
[data-section="section-header-search"] button:focus-visible,
[data-section="section-header-account"] .ast-header-account-link:focus-visible,
.ast-header-account-wrap .ast-header-account-link:focus-visible,
.ast-header-account .ast-header-account-link:focus-visible,
.ast-site-header-cart a:focus-visible .ast-cart-menu-wrap,
.ast-site-header-cart .ast-cart-menu-wrap:focus-visible {
    color: var(--og-header-icon-hover) !important;
}

/* Mobile header based on Figma Mobile / Navi bar (355:10200): account and cart
 * on the left, the logo centred, search and the menu toggle on the right,
 * 16px between icons. Each builder element is placed by its data-section in a
 * 1fr | logo | 1fr grid, whichever Astra section it is in, so the row fits
 * 320px and also works once the Header Builder order matches the layout. */
@media (max-width: 922px) {
    #ast-mobile-header .ast-builder-grid-row {
        align-items: center !important;
        column-gap: 12px !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    }

    #ast-mobile-header .site-header-primary-section-left,
    #ast-mobile-header .site-header-primary-section-right {
        display: contents !important;
    }

    #ast-mobile-header .site-header-primary-section-center {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #ast-mobile-header .site-logo-img {
        padding-right: 0 !important;
    }

    #ast-mobile-header .site-header-primary-section-right > *,
    #ast-mobile-header .site-header-primary-section-left > * {
        grid-row: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #ast-mobile-header .site-header-section > [data-section="section-header-account"] {
        grid-column: 1 !important;
        justify-self: start !important;
    }

    /* Account icon 24px + 16px gap. */
    #ast-mobile-header .site-header-section > [data-section="section-header-woo-cart"] {
        grid-column: 1 !important;
        justify-self: start !important;
        margin-left: 40px !important;
    }

    /* Max Mega Menu draws the 24px icon 14px inside the right edge of its 40px
     * toggle (measured): pull the toggle outward so the icon, not the tap
     * area, lines up with the header edge. */
    #ast-mobile-header .site-header-section > [data-section="section-hb-menu-1"] {
        grid-column: 3 !important;
        justify-self: end !important;
        margin-right: -14px !important;
        width: auto !important;
    }

    /* Menu icon 24px + 16px gap. */
    #ast-mobile-header .site-header-section > [data-section="section-header-search"] {
        grid-column: 3 !important;
        justify-self: end !important;
        margin-right: 40px !important;
    }
}

/* The cart drawer is a modal layer. Keep it and its overlay above the fixed
 * mobile header (99999) and notification bar (100000) from
 * figma-notification-bar.css; otherwise both cover the drawer title, its
 * close button and the first cart item, and a tap on the close button hits
 * the notification bar instead. */
.astra-mobile-cart-overlay {
    z-index: 100001 !important;
}

#astra-mobile-cart-drawer,
.astra-cart-drawer {
    z-index: 100002 !important;
}