/*section-header.css*/

:root {

/* Direction */
--direction: ltr;

/* Font variables */


/* Color variables */

--color-background-header: #ffffff;
--color-secondary-background-header: rgba(0, 0, 0, 0.08);
--color-opacity-background-header: rgba(255, 255, 255, 0);
--color-text-header: #000000;
--color-foreground-header: #ffffff;
--color-accent-header: #000000;
--color-foreground-accent-header: #ffffff;
--color-borders-header: rgba(0, 0, 0, 0.1);

--color-background-main: #ffffff;
--color-secondary-background-main: rgba(0, 0, 0, 0.08);
--color-third-background-main: rgba(0, 0, 0, 0.04);
--color-fourth-background-main: rgba(0, 0, 0, 0.02);
--color-opacity-background-main: rgba(255, 255, 255, 0);
--color-text-main: #000000;
--color-foreground-main: #ffffff;
--color-secondary-text-main: rgba(0, 0, 0, 0.62);
--color-accent-main: #000000;
--color-foreground-accent-main: #ffffff;
--color-borders-main: rgba(0, 0, 0, 0.15);

--color-background-cards: #ffffff;
--color-gradient-cards: ;
--color-text-cards: #000000;
--color-foreground-cards: #ffffff;
--color-secondary-text-cards: rgba(0, 0, 0, 0.6);
--color-accent-cards: #000000;
--color-foreground-accent-cards: #ffffff;
--color-borders-cards: #e1e1e1;

--color-background-footer: #000000;
--color-text-footer: #ffffff;
--color-accent-footer: #ebae01;
--color-borders-footer: rgba(255, 255, 255, 0.15);

--color-borders-forms-primary: rgba(0, 0, 0, 0.3);
--color-borders-forms-secondary: rgba(0, 0, 0, 0.6);

/* Borders */

--border-width-cards: 1px;
--border-radius-cards: 10px;
--border-width-buttons: 1px;
--border-radius-buttons: 16px;
--border-width-forms: 1px;
--border-radius-forms: 5px;

/* Shadows */
--shadow-x-cards: 0px;
--shadow-y-cards: 0px;
--shadow-blur-cards: 0px;
--color-shadow-cards: rgba(0, 0, 0, 0);
--shadow-x-buttons: 0px;
--shadow-y-buttons: 0px;
--shadow-blur-buttons: 0px;
--color-shadow-buttons: rgba(0, 0, 0, 0);

/* Layout */

--grid-gap-original-base: 26px;
--theme-max-width: 1360px;
--container-vertical-space-base: 100px;
--image-fit-padding: 10%;

}



.Avada-Faqs_Popup ::-webkit-scrollbar {
width: 7px;
height: 7px
}

.Avada-Faqs_Popup ::-webkit-scrollbar-thumb {
border-radius: 15px;
background: #c3c3c3
}

.Avada-Faqs_Popup ::-webkit-scrollbar-thumb:hover {
background: #a7a7a7
}

.Avada-Faqs_Popup ::-webkit-scrollbar-thumb:active {
background: #909090
}

.Avada-Faqs_Popup ::-webkit-scrollbar-track {
background: #f1f1f1
}

.Avada-Faqs_Popup,
.Avada-Faqs_Button {
position: fixed !important
}

.Avada-Faqs_Popup .Avada-svg_action svg,
.Avada-Faqs_Button .Avada-svg_action svg {
fill: var(--faqsActionColor)
}

.Avada-Faqs_Popup .Avada-svg_brand,
.Avada-Faqs_Button .Avada-svg_brand {
fill: var(--faqsBrandColor)
}

.Avada-Faqs_Popup textarea:focus {
border: unset
}

@media(max-width: 500px) {
body:has(#Avada-FAQ_Widget #Avada_Faq_Popup-Container) {
    overflow: hidden !important
}

html:has(#Avada_Faq_Popup-Container) {
    scrollbar-gutter: stable !important
}
}




.announcement-bar__slider,
.header-links {
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.announcement-bar__slider::-webkit-scrollbar,
.header-links::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important
}

.menu-promotion .menu-promotion-background-image img,
.menu-promotion .menu-promotion-background-image:after,
.menu-promotion .menu-promotion-background-image {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%
}

html[dir=rtl] .menu-promotion .menu-promotion-background-image img,
.menu-promotion .menu-promotion-background-image html[dir=rtl] img,
html[dir=rtl] .menu-promotion .menu-promotion-background-image:after,
.menu-promotion html[dir=rtl] .menu-promotion-background-image:after,
html[dir=rtl] .menu-promotion .menu-promotion-background-image,
.menu-promotion html[dir=rtl] .menu-promotion-background-image {
    right: 0
}

html[dir=ltr] .menu-promotion .menu-promotion-background-image img,
.menu-promotion .menu-promotion-background-image html[dir=ltr] img,
html[dir=ltr] .menu-promotion .menu-promotion-background-image:after,
.menu-promotion html[dir=ltr] .menu-promotion-background-image:after,
html[dir=ltr] .menu-promotion .menu-promotion-background-image,
.menu-promotion html[dir=ltr] .menu-promotion-background-image {
    left: 0
}

.site-header {
    background: var(--color-background-header);
    color: var(--color-text-header);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 999;
    --shadow-x-buttons: 0;
    --shadow-y-buttons: 0;
    --shadow-blur-buttons: 0
}

.site-header #logo-sticky .logo-img {
    --header-logo: 40px
}

.site-header .logo {
    flex: 1;
    padding-inline-end: 2.5rem;
    align-items: center;
    display: flex;
/*    max-width: 20rem;*/
    box-sizing: content-box
}

@media screen and (min-width: 768px) {
    .site-header .logo {
        padding-inline-end: 7.5rem
    }
}

.site-header .logo img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(var(--header-logo))
}

.site-header .logo-img {
    display: inline-flex;
    align-items: center
}

@media screen and (max-width: 1023px) {
    .site-header .logo-img--desk-only {
        display: none
    }
}

.site-header .logo-img--mobile {
    display: none
}

@media screen and (max-width: 1023px) {
    .site-header .logo-img--mobile {
        display: inline-flex;
        height: auto
    }
}

.site-header .logo-txt {
    margin: 0;
    word-break: break-all;
    color: var(--color-text-header)
}


@media screen and (max-width: 474px) {
    .site-header .logo-txt {
        font-size: calc(20px / 16 * var(--base-body-size) + 0px)
    }
}

@media screen and (min-width: 475px) and (max-width: 1023px) {
    .site-header .logo-txt {
        font-size: calc(22px / 16 * var(--base-body-size) + 0px)
    }
}

@media screen and (min-width: 1024px) {
    .site-header .logo-txt {
        font-size: calc(24px / 16 * var(--base-body-size) + 0px)
    }
}

@media screen and (max-width: 767px) {
    .site-header .logo-txt--desk-only {
        display: none
    }
}

@media screen and (min-width: 768px) {
    .site-header .logo-txt--mobile-only {
        display: none
    }
}

.site-header .logo-txt--hidden {
    display: none
}

.site-header h1 {
    margin-bottom: 0;
    line-height: 0
}

.site-header a {
    color: var(--color-text-header)
}

.header-container {
    border-bottom: 1px solid var(--color-borders-header);
    background: var(--color-background-header);
    position: relative;
    font-size: calc(16px / 16 * var(--base-menu-size) + 0px);
    font-weight: var(--font-weight-menu)
}

.header-container .header-actions > .button,
.header-container .header-actions > input {
    font-size: calc(16px / 16 * var(--base-menu-size) + 0px);
    font-weight: var(--font-weight-menu);
    height: 3.125rem;
    line-height: 1
}

html[dir=rtl] .header-container .header-actions > a.button {
    padding-left: 1.25rem
}

html[dir=ltr] .header-container .header-actions > a.button {
    padding-right: 1.25rem
}

.header-container .button {
    border-width: 1px;
    color: var(--color-text-header)
}

.header-container .button--solid {
    background-color: var(--color-text-header);
    border-color: var(--color-text-header);
    color: var(--color-foreground-header)
}

.no-touchevents .header-container .button:not(.button--outline-hover):hover {
    background-color: var(--color-accent-header);
    border-color: var(--color-accent-header);
    color: var(--color-foreground-accent-header)
}

.no-touchevents .header-container .button:not(.button--outline-hover):hover svg * {
    stroke: var(--color-foreground-accent-header)
}

.no-touchevents .header-container .button--outline-hover:not(.button--no-hover):hover {
    border-color: var(--color-accent-header);
    color: var(--color-accent-header)
}

.site-header-container .header-container .button--icon.button--outline svg * {
    stroke: var(--color-text-header);
    fill: var(--color-text-header)
}

.site-header-container .header-container .button--icon.button--solid svg * {
    stroke: var(--color-foreground-header)
}

.header-container--top {
    z-index: 11
}

.header-container--bottom {
    z-index: 10
}

.header-links {
    flex: 1;
    overflow-x: auto;
    padding-bottom: 1.25rem;
    margin-bottom: -1.25rem
}

.scrollable-navigation-button {
    display: none;
    width: 1.25rem;
    align-items: center;
    justify-content: center;
    z-index: 11;
    cursor: pointer
}

.scrollable-navigation-button:before {
    content: "";
    position: absolute;
    top: -1.5625rem;
    width: 1.875rem;
    height: 1.5625rem;
    pointer-events: none;
    z-index: 9;
    background: var(--color-background-header);
    background: linear-gradient(0, var(--color-background-header) 50%, var(--color-opacity-background-header) 100%)
}

html[dir=rtl] .scrollable-navigation-button:before {
    left: -.3125rem
}

html[dir=ltr] .scrollable-navigation-button:before {
    right: -.3125rem
}

.scrollable-navigation-button:after {
    content: "";
    position: absolute;
    width: 2.1875rem;
    height: 2.1875rem
}

.scrollable-navigation-button--right {
    transform: rotate(-90deg);
    margin-inline-start: .625rem;
    margin-inline-end: .9375rem
}

html[dir=rtl] .scrollable-navigation-button--right {
    transform: rotate(90deg)
}

.scrollable-navigation-button--left {
    transform: rotate(90deg);
    margin-inline-end: .25rem
}

html[dir=rtl] .scrollable-navigation-button--left {
    transform: rotate(-90deg)
}

@media screen and (min-width: 1281px) {
    .scrollable-navigation-button--left {
        margin-inline-start: .8125rem
    }
}

@media screen and (max-width: 1280px) {
    .scrollable-navigation-button--left {
        margin-inline-start: .5rem
    }
}

.scrolling-navigation-enabled .scrollable-navigation-button {
    display: flex
}

.scrollable-navigation-button svg path {
    fill: var(--color-text-header)
}

.header__top {
    padding-top: var(--header-vertical-space);
    padding-bottom: var(--header-vertical-space);
    position: relative
}

.header__bottom {
    padding-top: calc(var(--header-vertical-space) / 2);
    padding-bottom: calc(var(--header-vertical-space) / 2)
}

@media screen and (min-width: 1281px) {
    .header__bottom {
/*        padding-inline-start: calc(var(--gutter-container) - 1.25rem)*/
    }
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
    .header__bottom {
/*        padding-inline-start: calc(var(--gutter-container) - .9375rem)*/
    }
}

.header__bottom .site-menu-handle {
    position: absolute;
    visibility: hidden;
    pointer-events: none
}

.header__bottom.show-mobile-menu .site-menu-handle {
    visibility: visible;
    pointer-events: all
}

.header__bottom.show-mobile-menu .site-nav.style--classic {
    visibility: hidden;
    pointer-events: none
}

.header__top,
.header__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media screen and (min-width: 1024px) {
    .header__top {
        display: grid;
        grid-template-columns: auto 1fr
    }
}

.header-info-block {
    display: flex;
    align-items: center
}

.header-info-block__image {
    font-size: 0;
    text-align: end;
    margin-inline-end: .9375rem
}

.header-info-block__image svg {
    width: 2.375rem;
    height: 2.375rem
}

.header-info-block__image svg * {
    stroke: var(--color-text-header)
}

.header-info-block__text > span {
    display: block
}

.header-info-block__caption {
    font-weight: var(--font-weight-body)
}

.header-info-block__title {
    font-size: calc(16px / 16 * var(--base-menu-size) + 0px);
    margin-top: .3125rem
}

@media screen and (max-width: 1023px) {
    .header-info-block__title {
        margin-top: .125rem
    }
}

.header-info-block__title path {
    fill: var(--color-text-header);
    transition: all .1s linear
}

.header-info-block[href],
.header-info-block[aria-controls] {
    cursor: pointer
}

.no-touchevents .header-info-block:hover .text-animation--underline-in-header {
    background-size: 100% 1px;
    color: var(--color-accent-header)
}

.no-touchevents .header-info-block:hover .text-animation--underline-in-header + .icon path {
    fill: var(--color-accent-header)
}

.header-actions {
    position: relative;
    line-height: 1.1;
    flex-shrink: 0
}

.header-actions {
  align-items: center;
}
.language-selector {
  align-self: flex-start;
}



.header-actions:empty {
    display: none
}

.header-actions:not(:empty) {
    display: flex
}

@media screen and (min-width: 1024px) {

  .header-actions:not(:empty) {
    display: grid;
    grid-template-columns: auto auto auto auto;
    align-items: center;

    justify-content: end;
  }

    .header-actions:not(:empty).header-actions--show-search {
        justify-items: stretch
    }
}


@media screen and (min-width: 768px) {
    .header-actions a.button {
        max-width: 100%
    }
}

/*
.header-actions--buttons > *:not(:last-child) {
    margin-inline-end: .625rem
}
*/
/*
.header-actions--buttons {
  justify-self: end;
  width: max-content;
  display: flex;
  margin: 0;
}

.header-actions--buttons > *:not(:last-child) {
  margin-inline-end: 10px;
}

.header-actions--buttons > * {
  flex: 0 0 auto;
}
*/
.spacer {
  width: 10px;
  display: inline-block;
}


.top-utility-bar {
  background-color: #1d70b8;
}




.header__bottom .header-actions--buttons {
    flex-shrink: 0
}

.header-actions--blocks:not(:empty) {
    display: flex;
    justify-content: end
}

.header-actions--blocks > *:not(:last-child) {
    margin-inline-end: var(--gutter-large)
}

search-form {
    display: block;
    position: relative;
    z-index: 999
}

@media screen and (min-width: 768px) {

    search-form .button,
    search-form form {
        width: 100%
    }
}

.site-search-handle {
    border-color: transparent;
    z-index: 10
}


/* Account button */
a.button--outline.button--icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}

/* Make sure icon stays centered */
a.button--outline.button--icon .button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}




/* Cart button fix */
a.button--solid.button--icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px; /* remove 3.3125rem */
}

/* Force cart SVG white */
a.button--solid.button--icon svg,
a.button--solid.button--icon svg path,
a.button--solid.button--icon svg .circle {
  stroke: #fff !important;
  fill: #fff !important;
}


.site-search-handle input {
    width: 25rem;
    display: block;
    text-align: start;
    padding: var(--button-padding-regular);
    
/*    padding-inline-start: 3.3125rem;*/
    
    background: var(--color-background-header);
    border-color: var(--color-borders-header);
    border-radius: var(--border-radius-buttons);
    border-width: 1px;
    font-weight: var(--font-weight-body)
}

@media screen and (min-width: 768px) {
    .site-search-handle input {
        width: 100%
    }
}

.site-search-handle input:-webkit-autofill {
    box-shadow: inset 0 0 0 9999px var(--color-background-header)
}

.site-search-handle input::placeholder {
    color: var(--color-text-header)
}

.no-touchevents .site-search-handle input:hover,
.site-search-handle input:focus {
    border-color: var(--color-text-header);
    color: var(--color-text-header)
}

.no-touchevents .site-search-handle input:hover::placeholder,
.site-search-handle input:focus::placeholder {
    opacity: 1
}

html[dir=rtl] .site-search-handle input .button__icon {
    right: 1.25rem
}

html[dir=ltr] .site-search-handle input .button__icon {
    left: 1.25rem
}

.site-nav:focus {
    outline: none
}

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.site-nav a {
    display: inline-block
}

.site-nav .icon {
    margin-inline-start: .625rem;
    display: inline-flex;
    align-items: center
}

.site-nav.style--classic {
    display: flex;
    color: var(--color-text-header)
}

.site-nav.style--classic .icon svg * {
    fill: var(--color-text-header);
    transition: all .1s linear
}

.site-nav.style--classic a {
    color: var(--color-text-header)
}

.site-nav.style--classic a span {
    transition: all .1s linear
}

.no-touchevents .site-nav.style--classic a:hover span {
    color: var(--color-accent-header)
}

.no-touchevents .site-nav.style--classic a:hover span + .icon svg * {
    fill: var(--color-accent-header)
}

.site-nav.style--classic nav {
    padding-inline-end: 1.875rem
}

.site-nav.style--classic nav > ul {
    display: flex;
    flex-wrap: nowrap
}

.site-nav.style--classic nav > ul > li {
    flex-shrink: 0
}

.site-nav.style--classic nav > ul > li > .menu-link {
    outline-offset: -.3125rem
}



.site-nav.style--classic .menu-link {
    line-height: 1;
    color: var(--color-text-header);
    position: relative;
    padding: .9375rem 1.25rem;
    z-index: 9;
    display: inline-flex;
}


/* My changes 
components-php\01-php-01-supermenu\section-header.css
*/

/* Sticky header — allow overflow through entire chain */
.sticky-header,
.sticky-header .uk-container-full,
.sticky-header .header__bottom,
.sticky-header .header-container,
.sticky-header scrollable-navigation,
.sticky-header .site-nav.style--classic,
.sticky-header .site-nav-container,
.sticky-header nav,
.sticky-header .link-list,
.sticky-header li.has-submenu {
  overflow: visible !important;
}

/* Submenu in sticky: absolute relative to the fixed sticky bar */
.sticky-header .site-nav.style--classic .submenu.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .1s linear 40ms, visibility .1s linear 40ms;
  padding: calc(var(--header-vertical-space, 20px) * 1.5) 0 var(--header-vertical-space, 20px);
  display: flex;
  background: var(--color-background-header);
  z-index: 200;
}

/* Show on hover in sticky */
.sticky-header .site-nav.style--classic li.has-submenu:hover .submenu.mega-menu {
  opacity: 1;
  visibility: visible;
}

.sticky-header .site-nav.style--classic li.has-submenu:hover .submenu.mega-menu .submenu-holder {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure nothing clips the Macy absolute-positioned li items */
.sticky-header .submenu.mega-menu,
.sticky-header .submenu-holder,
.sticky-header .submenu-masonry {
  overflow: visible !important;
}


/* Override Macy absolute positioning — use normal flex flow instead */
.site-nav.style--classic .submenu-masonry {
  display: flex !important;
  flex-wrap: wrap !important;
  height: auto !important;
  position: relative;
}

.site-nav.style--classic .submenu-masonry .mega-link {
  position: relative !important;
  top: auto !important;
  left: auto !important;
}



/* Inner holder centering — sticky uses uk-container-full so padding is 0, re-apply it */
.sticky-header .submenu.mega-menu .submenu-holder {
  margin-left: auto;
  margin-right: auto;
  width: 100%;

  box-sizing: border-box;
}

/* 1. Prevent clipping — all ancestors must allow overflow */
.scrollable-navigation,
.site-nav.style--classic,
.site-nav-container,
.site-nav.style--classic nav,
.site-nav.style--classic ul.link-list,
.site-nav.style--classic li.has-submenu {
  overflow: visible !important;
}

/* 2. Submenu: absolute, anchored to the full-width header (position:relative parent) */
.site-nav.style--classic .submenu.mega-menu {
  position: absolute;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .1s linear 40ms, visibility .1s linear 40ms;
  padding: calc(var(--header-vertical-space, 20px) * 1.5) 0 var(--header-vertical-space, 20px);
  display: flex;
  background: var(--color-background-header);
  z-index: 100;
}

/* 3. Show on hover */
.site-nav.style--classic li.has-submenu:hover .submenu.mega-menu {
  opacity: 1;
  visibility: visible;
}

.site-nav.style--classic li.has-submenu:hover .submenu.mega-menu .submenu-holder {
  opacity: 1;
  transform: translateY(0);
}

/* 4. Inner holder aligns with uk-container */
.submenu.mega-menu .submenu-holder {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}


.site-nav.style--classic .submenu.mega-menu .submenu-holder .mega-link:first-child {
padding-left: 0;
}

.site-nav.style--classic nav > ul > li:first-child > .menu-link {
padding-left: 0;
}

@media screen and (max-width: 1280px) {

    .site-nav.style--classic .menu-link {
        padding: .9375rem;
    }

}

/*
.site-nav.style--classic .submenu {
    background: transparent;
    position: absolute;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .1s linear 40ms, visibility .1s linear 40ms;
    padding-top: calc(var(--header-vertical-space) / 2);
    margin-top: .0625rem
}
*/

/* End changes */



html[dir=rtl] .site-nav.style--classic .submenu {
    left: 100%
}

html[dir=rtl] .site-nav.style--classic .submenu.normal-menu {
    transform: translate(-100%)
}

.site-nav.style--classic .submenu .submenu-holder {
    opacity: 0;
    transform: translateY(5px);
    transition: 80ms linear
}

.site-nav.style--classic .submenu:after {
    content: "";
    position: absolute;
    top: calc(var(--header-vertical-space) / 2);
    width: 100%;
    height: 0;
    background: var(--color-background-header);
    border: 1px solid var(--color-borders-header);
    border-top: none;
    z-index: -1;
    transition: height .1s ease-in-out 40ms
}

html[dir=rtl] .site-nav.style--classic .submenu:after {
    right: 0
}

html[dir=ltr] .site-nav.style--classic .submenu:after {
    left: 0
}

.site-nav.style--classic .has-submenu:hover .submenu,
.site-nav.style--classic .has-submenu.focus .submenu,
.site-nav.style--classic .submenu-is-mega-menu.focus .submenu {
    opacity: 1;
    visibility: visible;
    transition: opacity 10ms linear, visibility 10ms linear
}

.site-nav.style--classic .has-submenu:hover .submenu:after,
.site-nav.style--classic .has-submenu.focus .submenu:after,
.site-nav.style--classic .submenu-is-mega-menu.focus .submenu:after {
    height: calc(100% - (var(--header-vertical-space) / 2));
    transition: height .14s ease-in-out
}

.site-nav.style--classic .has-submenu:hover .submenu .submenu-holder,
.site-nav.style--classic .has-submenu.focus .submenu .submenu-holder,
.site-nav.style--classic .submenu-is-mega-menu.focus .submenu .submenu-holder {
    opacity: 1;
    transform: translateY(0);
    transition: .12s linear 80ms
}

.site-nav.style--classic .submenu.normal-menu {
    margin-inline-start: -.625rem;
    width: max-content;
    min-width: 9.375rem;
    max-width: 22.5rem
}

.site-nav.style--classic .submenu.normal-menu .submenu-holder {
    padding: 1.25rem 0;
    min-width: 9.375rem;
    margin-top: -1px
}

.site-nav.style--classic .submenu.normal-menu .submenu-holder > li {
    display: block;
    position: relative
}

.site-nav.style--classic .submenu.normal-menu .submenu-holder .menu-link {
    padding: .625rem 1.875rem
}

.site-nav.style--classic .submenu.normal-menu .submenu-holder .icon {
    position: relative;
    transform: rotate(-90deg);
    display: inline-block
}

html[dir=rtl] .site-nav.style--classic .submenu.normal-menu .submenu-holder .icon {
    transform: rotate(90deg)
}

.site-nav.style--classic .submenu.normal-menu .submenu-holder .icon svg {
    transform: scale(.95)
}

.site-nav.style--classic .submenu.normal-menu .babymenu {
    position: absolute;
    display: block;
    top: -1.25rem;
    background: var(--color-background-header);
    width: max-content;
    min-width: 9.375rem;
    max-width: 22.5rem;
    padding: 1.1875rem 0;
    border: 1px solid var(--color-borders-header);
    opacity: 0;
    margin-inline-start: -1px;
    margin-top: 0;
    visibility: hidden;
    clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 101%);
    transition: opacity .1s linear 40ms, visibility .1s linear 40ms, clip-path .1s ease-in-out 40ms
}

html[dir=rtl] .site-nav.style--classic .submenu.normal-menu .babymenu {
    right: 100%
}

html[dir=ltr] .site-nav.style--classic .submenu.normal-menu .babymenu {
    left: 100%
}

html[dir=rtl] .site-nav.style--classic .submenu.normal-menu .babymenu {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 101%)
}

.site-nav.style--classic .submenu.normal-menu .babymenu li {
    opacity: 0;
    transform: translateY(5px);
    transition: 80ms linear
}

.site-nav.style--classic .submenu.normal-menu .babymenu span {
    position: relative;
    top: -1px
}

.site-nav.style--classic .submenu.normal-menu .has-babymenu:hover .babymenu,
.site-nav.style--classic .submenu.normal-menu .has-babymenu.focus .babymenu {
    opacity: 1;
    visibility: visible;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 101%);
    transition: opacity 10ms linear, visibility 10ms linear, clip-path .14s ease-in-out
}

html[dir=rtl] .site-nav.style--classic .submenu.normal-menu .has-babymenu:hover .babymenu,
html[dir=rtl] .site-nav.style--classic .submenu.normal-menu .has-babymenu.focus .babymenu {
    clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 101%)
}

.site-nav.style--classic .submenu.normal-menu .has-babymenu:hover .babymenu li,
.site-nav.style--classic .submenu.normal-menu .has-babymenu.focus .babymenu li {
    opacity: 1;
    transform: translateY(0);
    transition: .12s linear 80ms
}

.site-nav.style--classic .submenu.normal-menu .babymenu-faux {
    display: none
}

.site-nav.style--classic .submenu.normal-menu .has-babymenu a {
    display: flex
}

.site-nav.style--classic .submenu.mega-menu {
    left: 0;
    width: 100%;
    padding: calc(var(--header-vertical-space) * 1.5) 0 var(--header-vertical-space);
    display: flex
}

html[dir=rtl] .site-nav.style--classic .submenu.mega-menu {
    left: 0
}

.site-nav.style--classic .submenu.mega-menu .submenu-masonry {
    display: flex;
    flex-wrap: wrap;
    /*
    margin-inline-start: -.9375rem
    */
}

.site-nav.style--classic .submenu.mega-menu .submenu-masonry.with-promotion {
    width: 75%
}

.site-nav.style--classic .submenu.mega-menu .submenu-masonry.with-promotion .mega-link {
    width: 33.33%
}

.site-nav.style--classic .submenu.mega-menu .submenu-masonry.without-promotion {
    width: 100%
}

/*New - modified */

.site-nav.style--classic .submenu.mega-menu .submenu-masonry.without-promotion .mega-link {
    width: inherit !important;
    width: 18% !important;
  padding: 10px 0;
}


.site-nav.style--classic li {
    display: inline-block;
    margin: 0;
    border-bottom: 1px solid #b1b4b6;
}


.site-nav.style--classic .submenu.mega-menu .submenu-holder .mega-link {
    padding: 0 .9375rem 1.875rem;
    position: relative;
    width: 25%;
}


.site-nav.style--classic .submenu.mega-menu .submenu-masonry > .mega-link > .menu-link,
.site-nav.style--classic .submenu.mega-menu .mega-link.has-promotion > .menu-link {
    margin-bottom: .9375rem;
    display: block
}

.site-nav.style--classic .submenu.mega-menu .mega-link.has-promotion {
    margin-inline-start: .9375rem;
    padding: 0 !important
}

.site-nav.style--classic .submenu.mega-menu .submenu-holder {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%
}

.site-nav.style--classic .submenu.mega-menu .submenu-holder:not(.container--large) {
    margin-bottom: -1.875rem
}



.site-nav.style--classic .submenu.mega-menu .submenu-holder .mega-link > .menu-link {
    padding: .625rem;
    margin: -.625rem 0 0 -.625rem
}

.site-nav.style--classic .submenu.mega-menu .icon {
    display: none
}

.site-nav.style--classic .submenu.mega-menu .menu-link {
    line-height: 1;
    font-weight: var(--font-weight-body-bold);
    text-transform: none;
    padding: 0
}

.site-nav.style--classic .submenu.mega-menu .babymenu {
    margin-top: .5rem
}

.site-nav.style--classic .submenu.mega-menu .babymenu li {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.site-nav.style--classic .submenu.mega-menu .babymenu .menu-link {
    font-weight: var(--font-weight-body);
    padding: 6px 10px;
    margin-inline-start: -10px;
    line-height: 1.2
}

.site-nav.style--classic .submenu.mega-menu .has-babymenu > .menu-link {
    color: var(--color-text-header) !important
}

.site-nav.style--classic .babymenu li {
    display: block;
    margin: 0;
    line-height: 1
}

.site-nav.style--classic .babymenu .menu-link {
    padding: 0
}

.menu-promotion {
    width: 100%;
    text-align: center;
    min-height: 12.5rem;
    position: relative;
    display: flex
}

.menu-promotion:before,
.menu-promotion:after {
    display: none
}

.menu-promotion .menu-promotion-title {
    position: relative;
    z-index: 1;
    display: block
}

.menu-promotion .menu-promotion-content {
    flex-direction: column
}

.menu-promotion .menu-promotion-button {
    border-color: transparent !important
}

.menu-promotion .menu-promotion-background-image {
    z-index: -1
}

.menu-promotion .menu-promotion-background-image:after {
    content: "";
    opacity: .3
}

.menu-promotion .menu-promotion-background-image img {
    object-fit: cover
}

.header-container.fix {
    position: fixed;
    padding: 0;
    top: 0 !important;
    transform: translateY(-100%);
    transition: none !important;
    width: 100%;
    background: var(--color-background-header)
}

.header-container.fix.ready {
    transition: left .5s ease-in-out, transform .1s linear !important
}

@media screen and (max-width: 474px) {
    .header-container.fix.ready {
        transition: left .3s ease-in-out, transform .1s linear !important
    }
}

.header-container.fix.animate {
    transform: translateY(0)
}

.header-container.fix .logo-img {
    max-height: 40px !important
}

.header-container.fix .header__top {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    --header-logo: 20px
}

@media screen and (max-width: 1023px) {
    .site-header .mobile-menu-button {
        order: 2;
        margin-inline-end: -.25rem;
        background: transparent;
        border: 0;
        padding: 0;
        border-radius: 10px;
        color: #fff;
        cursor: pointer;
        transition: background-color .18s ease, transform .12s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .site-header .mobile-menu-button:hover {
        background: rgba(255, 255, 255, .14);
    }

    .site-header .mobile-menu-button:active {
        background: rgba(255, 255, 255, .22);
        transform: scale(.94);
    }

    .site-header .mobile-menu-button:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    .site-header .mobile-menu-button[aria-expanded="true"] {
        background: rgba(255, 255, 255, .18);
    }

    .site-header .mobile-menu-button svg {
        width: 22px;
        height: 18px;
        display: block;
    }

    .site-header .mobile-menu-button svg path {
        fill: currentColor;
    }

    .site-header .logo {
        order: 1;
        flex: auto;
        text-align: left;
        padding: 0 1.5rem 0 0;
        justify-content: flex-start
    }

    .site-header .mobile-cart-button {
        order: 2;
        position: relative;
        cursor: pointer
    }

    .site-header .mobile-cart-button svg path {
        stroke: var(--color-text-header)
    }

    .site-header .mobile-cart-button svg .circle {
        fill: var(--color-text-header)
    }

    .site-header .mobile-cart-button span {
        position: absolute;
        top: .25rem;
        right: .25rem;
        background: var(--color-text-header);
        color: var(--color-foreground-header);
        font-weight: var(--font-weight-body-bold);
        width: 16px;
        height: 16px;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: calc(9px / 16 * var(--base-body-size) + 0px)
    }

    .site-header .mobile-menu-button,
    .site-header .mobile-cart-button {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0
    }

    .hide-border-on-portable {
        border-bottom: 0
    }

    .mobile-search {
        padding-bottom: var(--header-vertical-space)
    }

    .mobile-search .site-search-handle,
    .mobile-search form,
    .mobile-search input {
        width: 100%
    }

    .mobile-search .site-search-handle {
        height: 100%
    }

    html[dir=rtl] .mobile-search .site-search-handle .button__icon {
        right: .75rem
    }

    html[dir=ltr] .mobile-search .site-search-handle .button__icon {
        left: .75rem
    }

    .mobile-search .site-search-handle input {
        height: 2.5rem;
        font-size: 1rem;
        padding-inline-start: 2.6875rem
    }

    .mobile-search .search-results-container:not(:empty) {
        margin-top: 1.875rem;
        max-width: 100%
    }

    .mobile-search .search-results-container:not(:empty):before {
        margin-inline-start: .875rem
    }

    .no-header-blocks {
        display: none
    }
}

.button--solid .circle {
    fill: var(--color-foreground-header)
}

.no-touchevents .button--solid:hover .circle {
    fill: var(--color-foreground-accent-header)
}

@media screen and (max-width: 1023px) {
    
    .header-container--top {
        order: 0
    }

    .header-container--bottom.mobile-search {
        order: 1
    }

    .header-container--bottom.show-header-actions-on-mobile {
        order: 2
    }

    .show-header-actions-on-mobile {
        background: transparent;
        width: 100%
    }

    .show-header-actions-on-mobile.ontop {
        position: absolute;
        bottom: 0;
        transform: translateY(100%)
    }

    html[dir=rtl] .show-header-actions-on-mobile.ontop {
        right: 0
    }

    html[dir=ltr] .show-header-actions-on-mobile.ontop {
        left: 0
    }

    .show-header-actions-on-mobile .header-links,
    .show-header-actions-on-mobile .scrollable-navigation-button {
        display: none
    }

    .show-header-actions-on-mobile .header-actions {
        width: calc(100% + .75rem);
        margin-inline-start: -.375rem;
        justify-content: space-between;
        flex-wrap: wrap
    }

    .show-header-actions-on-mobile .header-actions > * {
        display: inline-flex;
        margin: .375rem
    }

    .show-header-actions-on-mobile .header-actions .header-info-block {
        height: auto
    }

    .show-header-actions-on-mobile .header-actions .header-info-block__image {
        margin-inline-end: .625rem
    }

    .show-header-actions-on-mobile .header-actions .header-info-block__image svg,
    .show-header-actions-on-mobile .header-actions .header-info-block__image img {
        width: 1.75rem !important;
        height: 1.75rem !important
    }

    .show-header-actions-on-mobile .header-actions .header-info-block__title {
        font-size: calc(14px / 16 * var(--base-body-size) + 0px);
        font-weight: var(--font-weight-body-bold);
        letter-spacing: var(--base-body-spacing)
    }

    .show-header-actions-on-mobile .header-actions .header-info-block__text .icon {
        margin-inline-start: .3125rem;
        transform: scale(.9)
    }

    .show-header-actions-on-mobile .header-actions:before {
        display: none
    }
}

.header__top--password-page {
    display: grid;
    grid-template-columns: 1fr 1fr
}

@media screen and (max-width: 1023px) {
    .header__top--password-page {
        display: block;
        text-align: center
    }
}

.header__top--password-page .logo {
    order: 0
}

@media screen and (max-width: 1023px) {
    .header__top--password-page .logo {
        display: inline-block
    }
}

.header__top--password-page svg path {
    stroke: var(--color-text-header)
}

.modal-login-cta {
    display: inline-flex;
    align-items: end;
    gap: .625rem;
    line-height: 1;
    justify-self: end
}

@media screen and (max-width: 1023px) {
    .modal-login-cta {
        margin-top: var(--gutter-regular);
        display: inline-flex;
        width: 100%;
        justify-content: center
    }
}

@media screen and (max-width: 767px) {
    announcement-bar {
        overflow-x: hidden
    }
}

.announcement-bar {
    display: grid;
    align-items: center;
    min-height: 2.5rem;
    grid-template-columns: 27% 46% 27%
}

@media screen and (max-width: 767px) {
    .announcement-bar {
        grid-template-columns: 1fr
    }
}

.announcement-bar__social-icons {
    padding-inline-end: 1.25rem
}

.announcement-bar__localization-forms {
    padding-inline-start: 1.25rem
}

.announcement-bar__content {
    position: relative;
    min-height: 2.5rem;
    align-items: center;
    display: flex
}

.announcement-bar__content .announcement {
    width: 100%;
    flex-shrink: 0;
    text-align: center;
    scroll-snap-align: start;
    line-height: 1.1;
    display: flex;
    align-items: center;
    word-break: break-word;
    justify-content: center;
    padding: .3125rem 1.25rem;
    font-size: calc(14px / 16 * var(--base-body-size) + 0px);
    cursor: default
}

.announcement-bar__content-nav {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.announcement-bar__content-nav--left svg {
    transform: rotate(90deg)
}

html[dir=rtl] .announcement-bar__content-nav--left {
    right: -1.25rem
}

html[dir=ltr] .announcement-bar__content-nav--left {
    left: -1.25rem
}

.announcement-bar__content-nav--right svg {
    transform: rotate(-90deg)
}

html[dir=rtl] .announcement-bar__content-nav--right {
    left: -1.25rem
}

html[dir=ltr] .announcement-bar__content-nav--right {
    right: -1.25rem
}

html[dir=rtl] .announcement-bar__content-nav {
    transform: scale(-1)
}

.announcement-bar__content-nav--disabled {
    opacity: .36;
    pointer-events: none
}

.announcement-bar__slider {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    display: flex;
    width: 100%;
    flex-shrink: 0
}

.announcement-bar__localization-form {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-inline-start: 1.25rem
}

.announcement-bar__localization-form .localization-form {
    justify-content: flex-end
}

.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--color-background-header);
    color: var(--color-text-header);
    z-index: 999;
    transform: translateY(-100%);
    visibility: hidden;
    opacity: 0
}

.sticky-header a.header-info-block {
    color: var(--color-text-header)
}

.sticky-header.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: transform .2s linear;
    box-shadow: 0 2px 10px 2px #0000000f;
    border-bottom: 1px solid var(--color-borders-header)
}

.sticky-header .header__bottom {
    border-bottom: 0;
    position: initial
}

.sticky-header .header__top {
    display: none
}

@media screen and (max-width: 1023px) {
.sticky-header .header__top {
display: flex;
flex-direction: row;
background-color: #1d70b8;
}

.sticky-header .header__top .logo-img {
height: 40px !important
}
}

.site-nav.style--classic .submenu:after {
z-index: 0
}

.site-nav.style--classic .submenu .submenu-holder {
    position: relative;
    z-index: 1
}


/* =========================================================
   Semantic desktop dropdown — Full Open Menu-style panel
   Used by renderDesktopMenu() in supermenu.php.
   Everything is scoped to .site-nav.style--classic, so the
   mobile sidebar (.style--sidebar) is never affected.
   ========================================================= */

/* Full-width white panel, anchored to the relative header container */
.site-nav.style--classic .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 14px 24px rgba(0, 0, 0, .10);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s linear, visibility .12s linear;
    z-index: 100;
}

/* Reveal on hover; the panel stays open while the pointer is inside it */
.site-nav.style--classic .has-submenu:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
}

/* Manual close via the × button (re-enabled on mouseleave by the script) */
.site-nav.style--classic .has-submenu.is-dismissed .nav-dropdown {
    opacity: 0;
    visibility: hidden;
}

/* Little triangle aligned under the hovered item.
   --pointer-x is set per item by the script in supermenu-wrapper.php */
.site-nav.style--classic .nav-dropdown__pointer {
    position: absolute;
    top: -10px;
    left: var(--pointer-x, 80px);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 11px solid #000;
    pointer-events: none;
}

/* Inner content: constrained + comfortable indent matching the design */
.site-nav.style--classic .nav-dropdown__inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: var(--gutter-large, 50px);
    padding-top: 48px;
    padding-bottom: 60px;
    padding-left: clamp(20px, 7vw, 90px);
    padding-right: clamp(20px, 7vw, 90px);
}

/* Left column: heading + links */
.site-nav.style--classic .nav-dropdown__menu {
    flex: 1 1 auto;
    max-width: 50%;
}

/* Parent heading link */
.site-nav.style--classic .nav-dropdown__heading {
    margin-bottom: 34px;
}


.site-nav.style--classic .nav-dropdown__heading-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  letter-spacing: .05em;
  line-height: 1.1;
  font-weight: 600;
  color: #153c1d;
}

.site-nav.style--classic .nav-dropdown__heading-link span {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
    font-size: 1.375rem;
}

.site-nav.style--classic .nav-dropdown__heading-arrow {
    display: inline-flex;
    align-items: center;
    color: #153c1d;
}

/* Vertical link list — override the generic .style--classic li styles */
.site-nav.style--classic .nav-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav.style--classic .nav-dropdown__list .nav-dropdown__item {
    display: block;
    margin: 0;
    border: 0;
}

.site-nav.style--classic .nav-dropdown__list .nav-dropdown__item + .nav-dropdown__item {
    margin-top: 28px;
}

.site-nav.style--classic .nav-dropdown__link {
    display: inline-block;
    color: #1d1d1b;
    font-size: 1.125rem;
    line-height: 1.2;
    transition: color .12s linear;
}

.no-touchevents .site-nav.style--classic .nav-dropdown__link:hover {
    color: #e98300;
}

/* Close button, top-right of the panel */
.site-nav.style--classic .nav-dropdown__close {
    position: absolute;
    top: 26px;
    right: clamp(20px, 7vw, 90px);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #1d1d1b;
}

.site-nav.style--classic .nav-dropdown__close:hover {
    color: #e98300;
}

/* Tighter spacing on smaller desktops, mirroring the rest of the header */
@media screen and (max-width: 1280px) {
    .site-nav.style--classic .nav-dropdown__inner {
        padding-top: 36px;
        padding-bottom: 44px;
    }

    .site-nav.style--classic .nav-dropdown__heading-link {
        font-size: 1.375rem;
    }
}

/* End semantic desktop dropdown */