/** Shopify CDN: Minification failed

Line 340:2 Unexpected "="
Line 343:57 Unterminated string token

**/
.m-menu{--main-link-px: 16px;--main-link-py: 20px;font-size:calc(var(--font-base-size, 16)*1px);font-weight:500;white-space:nowrap;list-style:none;display:flex;flex-wrap:wrap}.m-menu__arrow,.m-menu__sub-arrow{margin-left:8px}.m-menu__arrow svg,.m-menu__sub-arrow svg{width:8px;height:8px}.m-menu__arrow{transition:var(--m-duration-default, 0.25s) transform}.m-menu__sub-arrow svg{transform:rotate(-90deg)}.m-menu__link--main{display:flex;align-items:center;position:relative;padding:var(--main-link-py) var(--main-link-px)}.m-menu__link--main:after{position:absolute;content:"";width:0;height:2px;background-color:currentColor;left:var(--main-link-px);bottom:calc(var(--main-link-py) - 5px);transition:width var(--m-duration-default, 0.25s) ease-in-out}.m-menu::-webkit-scrollbar{display:none}.m-menu__item--dropdown{position:relative}.m-menu__item--dropdown .m-mega-menu{right:auto;box-shadow:0 5px 15px 0 rgba(0,0,0,.07);transition:all var(--m-duration-default, 0.25s);transform:translate3d(0, 20px, 0);transform-origin:center}.m-menu__item--dropdown .m-mega-menu__inner{padding:16px}.m-menu__item--dropdown .m-mega-menu__column{position:absolute;top:-16px;left:calc(100% + 16px);opacity:0;visibility:hidden;box-shadow:0 5px 15px 0 rgba(0,0,0,.07);transition:all var(--m-duration-default, 0.25s);transform:translate3d(20px, 0, 0);transform-origin:center;min-width:250px;pointer-events:none;padding:16px;background-color:rgb(var(--color-background))}.m-menu__item--dropdown .m-mega-menu__column::before{content:"";position:absolute;width:100%;height:100%;top:0;left:-35px;z-index:-1}.m-menu__item--dropdown .m-sub-menu__item--level-1{position:relative;width:100%}.m-menu__item--dropdown .m-sub-menu__item--level-1:hover .m-mega-menu__column{transform:translate3d(0, 0, 0);pointer-events:auto;opacity:1;visibility:visible}.m-menu__item--dropdown:hover .m-mega-menu{transform:translate3d(0, 0, 0);pointer-events:auto;opacity:1;visibility:visible}.m-menu__item--mega .m-mega-menu{left:0;right:0;overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - var(--m-header-height, 0px));border-top:1px solid rgba(0,0,0,0);transition:all var(--m-duration-default, 0.25s) ease-in}.m-menu__item--mega .m-mega-menu__inner{padding-top:40px;padding-bottom:40px}.m-menu__item--mega .m-mega-menu::-webkit-scrollbar{display:none}.m-menu__item--mega .m-sub-menu__item--level-1>.m-menu__link{font-weight:500;padding-left:12px;padding-right:12px}.m-menu__item--mega .m-sub-menu__item--level-1>.m-menu__link:hover{background:rgba(0,0,0,0)}.m-menu__item--mega .m-mega-menu__column{margin-top:16px}.m-menu__item--has-submenu .m-mega-menu__inner{display:flex}.m-menu__item--active .m-mega-menu{visibility:visible;opacity:1;transition:none;pointer-events:auto}.m-menu__item--active .m-mega-menu.m-show-menu-column-divider{border-top-color:rgb(var(--color-border))}.m-menu__item--active .m-mega-menu__container{animation:menu_slide_in var(--m-slide-trans-duration) both}.m-menu__item:hover>a:after{width:calc(100% - var(--main-link-px)*2)}.m-menu__item:hover .m-menu__arrow{transform:rotateX(-180deg)}.m-mega-menu{position:absolute;z-index:50;width:100%;min-width:250px;white-space:normal;visibility:hidden;pointer-events:none;opacity:0;transition-property:transform,opacity,visibility;transition-duration:var(--m-duration-default, 0.25s)}.m-mega-menu__container{margin-left:auto;margin-right:auto}.m-mega-menu__container.w-full{padding-left:20px;padding-right:20px}.m-mega-menu__inner{--column-width: 200px;--items-width: calc(var(--total-columns) * var(--column-width, 200px))}@media(min-width: 1680px){.m-mega-menu__inner{--column-width: 250px}}@media(min-width: 1920px){.m-mega-menu__inner{--column-width: 270px}}.m-mega-menu__inner--stretch-width .m-mega-menu__content{width:calc(100% - var(--items-width));flex:1}.m-mega-menu__content{width:33.333%;padding-left:20px;flex:auto}.m-mega-menu .m-header:hover{transition:none}.m-sub-menu{list-style:none}.m-sub-menu--level-1{display:flex}.m-menu__item--mega .m-sub-menu--level-1{width:66.667%;margin-left:-12px;margin-right:-12px}.m-menu__item--mega .m-sub-menu--level-1.m\:w-full{width:100%}.m-menu__item--dropdown .m-sub-menu--level-1{flex-direction:column;width:100%}.m-menu__item--mega .m-mega-menu__inner--stretch-width .m-sub-menu--level-1{width:var(--items-width)}.m-sub-menu__item>a{color:rgba(var(--color-foreground), 0.6);font-weight:400;display:block;overflow:hidden;white-space:normal;padding:.5rem .75rem;transition:all var(--m-duration-default, 0.25s)}.m-sub-menu__item>a:hover{color:rgb(var(--color-foreground));background:rgba(var(--color-foreground), 0.07)}.m-sub-menu__item--level-1>a{display:flex;align-items:center;justify-content:space-between}.m-mega-menu__inner--stretch-width .m-sub-menu__item--level-1{min-width:200px;padding-right:8px}.m-menu__item--mega .m-sub-menu__item--level-1{width:50%;margin-bottom:16px}.m-menu__item--mega .m-sub-menu__item--level-1>a{color:rgb(var(--color-foreground))}@media screen and (min-width: 1536px){.m-menu__item--mega .m-sub-menu__item--level-1{width:25%}}@media screen and (min-width: 1280px){.m-menu__item--mega .m-sub-menu__item--level-1{width:33.333%}}.m-show-menu-column-divider .m-sub-menu__item--level-1{padding:0 18px;border-left:1px solid rgb(var(--color-border))}.m-show-menu-column-divider .m-sub-menu__item--level-1:first-child{padding-left:0;border-left:none}.logo-left__2l .m-menu{--main-link-px: 32px;--main-link-py: 16px;margin-left:calc(-1*var(--main-link-px));margin-right:calc(-1*var(--main-link-px))}.both-center .m-header__menu:first-child .m-menu{justify-content:flex-end}.logo-center__2l .m-menu{--main-link-px: 32px;justify-content:center}@media(max-width: 1440px){.m-menu{--main-link-px: 12px}}.m-mega-banner{height:100%;position:relative}.m-mega-banner__image{overflow:hidden}.m-mega-banner .m-image{transition:all var(--m-duration-image, 0.65s)}.m-mega-banner__title{font-size:24px;font-weight:400;color:currentColor}.m-mega-banner__description{color:rgba(var(--color-foreground), 0.6);font-size:calc(var(--font-base-size, 16)*1px);margin-top:8px}.m-mega-banner__button{margin-top:8px}.m-mega-banner--outside .m-mega-banner__inner{margin-top:16px}.m-mega-banner--inside .m-mega-banner__inner{position:absolute;top:0;left:0;width:100%;height:100%;padding:24px}.m-mega-banner--inside .m-mega-banner__button{position:absolute !important;bottom:24px;left:24px}.m-mega-banner--no-content .m-mega-banner__inner{display:none;padding:0;margin:0}.m-mega-banner:hover .m-image{transform:scale(1.06)}@media screen and (min-width: 768px){.m-menu__item--has-submenu .m-mega-collection-list{padding-left:1rem}}@media screen and (min-width: 1280px){.m-menu__item--has-submenu .m-mega-collection-list{padding-left:3rem}}.m-mega-collection-list .m-collection-card__link,.m-mega-collection-list .m-collection-card__title{color:currentColor}.m-mega-product-list__header{display:flex;align-items:center;justify-content:space-between;margin-top:-10px;margin-bottom:16px;padding:0 8px}.m-mega-product-list__heading{font-size:24px;font-weight:500;white-space:normal;color:currentColor}.m-mega-product-list .m-product-card__name,.m-mega-product-list .m-product-card__title,.m-mega-product-list .m-price__sale .m-price-item--regular,.m-mega-product-list .m-price{color:currentColor}.m-mega-product-list .m-price__sale .m-price-item--regular{opacity:.6}.m-mega-product-list .m-slider-controls{margin-top:0;margin-left:-16px}.m-mega-product-list .m-slider-controls button{width:40px;height:40px;border-radius:9999px;cursor:pointer}.m-mega-product-list .m-slider-controls button.m-slider-controls__button-next{margin-right:0}.m-mega-product-list .m-product-card__price{font-size:14px}@media screen and (min-width: 768px){.m-menu__item--has-submenu .m-mega-product-list{padding-left:15px}}@media screen and (min-width: 1280px){.m-menu__item--has-submenu .m-mega-product-list{padding-left:50px}}.m-menu__item--has-submenu .m-mega-blog-list{border-left:1px solid rgb(var(--color-border))}@media screen and (min-width: 768px){.m-menu__item--has-submenu .m-mega-blog-list{padding-left:15px}}@media screen and (min-width: 1280px){.m-menu__item--has-submenu .m-mega-blog-list{padding-left:60px}}.m-mega-blog-list__item+.m-mega-blog-list__item{margin-top:32px}.m-mega-article-card__content{padding-left:20px;white-space:normal}.m-mega-article-card__title{font-weight:500}.m-mega-article-card__tag{font-size:.75rem;text-transform:uppercase;margin-bottom:4px;display:block}.m-menu-drawer{position:absolute;top:100%;left:0;right:0;touch-action:none;visibility:hidden;pointer-events:none;z-index:59;height:var(--menu-drawer-height)}.m-menu-drawer.open{pointer-events:auto;cursor:pointer;visibility:visible}.m-menu-drawer__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;z-index:19;transition:all var(--m-duration-default, 0.25s)}.m-menu-drawer.open .m-menu-drawer__backdrop{background-color:rgba(0,0,0,.3);transition-delay:.15s}.m-menu-drawer__wrapper{color:rgb(var(--color-foreground));background-color:rgb(var(--color-background));width:450px;max-width:100%;height:100%;transition:all var(--m-duration-default, 0.25s);transform:translateX(-100%);overflow:hidden;cursor:auto;position:absolute;top:0;left:0;z-index:29}.m-menu-drawer.open .m-menu-drawer__wrapper{transform:translateX(0)}@media(max-width: 767px){.m-menu-drawer__wrapper{width:calc(100% - 40px)}}.m-menu-drawer__content{display:flex;flex-direction:column;flex-grow:1;justify-content:space-between;padding-top:5px;height:100%;transition:padding var(--m-duration-default, 0.25s);overflow-y:scroll}.m-menu-drawer__content::-webkit-scrollbar{width:3px}.m-menu-drawer__content::-webkit-scrollbar-thumb{background:#ebebeb}.m-menu-drawer__content::-webkit-scrollbar-thumb:hover{background:#555}.m-header.stuck .m-menu-drawer{height:calc(100vh - var(--m-header-height))}.m-menu-mobile{list-style:none;padding:0;margin:0}.m-menu-mobile__item{display:flex;align-items:center}.m-menu-mobile__item>a{display:flex;align-items:center;justify-content:space-between;flex-grow:1;padding:12px 16px;position:relative}.m-menu-mobile__item--no-submenu .m-menu-mobile__back-button{margin-bottom:30px}.m-menu-mobile__toggle-button{display:flex;align-items:center;justify-content:center;flex:0 0 48px;height:100%;min-height:48px;cursor:pointer}.m-menu-mobile__toggle-button svg{width:16px;height:16px}.m-menu-mobile__back-button{font-weight:500;display:flex;align-items:center;padding:16px 0;margin:0 16px 10px;text-align:left;border-bottom:1px solid rgb(var(--color-border))}.m-menu-mobile__back-button *{pointer-events:none}.m-menu-mobile__back-button svg{width:16px;height:16px}.m-menu-mobile__back-button span{margin-left:12px}.m-menu-mobile .m-mega-banner--inside .m-mega-banner__inner{padding:20px}.m-menu-mobile .m-mega-banner--inside .m-mega-banner__button{bottom:20px;left:20px}.m-menu-mobile .m-mega-article-card__content{padding-left:0;padding-top:12px}.m-megamenu-mobile{position:absolute;top:0;bottom:0;left:0;width:100%;display:flex;flex-direction:column;background-color:rgb(var(--color-background));transform:translateX(100%);z-index:9;visibility:hidden}.m-megamenu-mobile.open{transform:translateX(0)}.m-menu-drawer.open .m-megamenu-mobile{visibility:visible;transition:all var(--m-duration-default, 0.25s)}.m-megamenu-mobile__wrapper{overflow-y:scroll;overflow-x:hidden;display:flex;flex-direction:column}.m-megamenu-mobile__wrapper.open-submenu{overflow:hidden}.m-submenu-open--level-2 .m-megamenu-mobile--level-1{overflow:hidden}.m-submenu-mobile{margin-bottom:16px}.m-megamenu-mobile__block{padding-left:15px;padding-right:15px;padding-bottom:20px}.m-menu-customer{margin-top:40px}.m-menu-customer__wrapper{margin-bottom:15px;padding:16px;display:block}@media(min-width: 1280px){.m-menu-customer__wrapper{display:none}}.m-menu-customer__label{font-size:20px;font-weight:500;margin-bottom:24px}.m-menu-customer__name{width:100%;display:flex;align-items:center;padding-top:12px;padding-bottom:12px;margin-bottom:12px}.m-menu-customer__name svg{width:24px;height:24px}.m-menu-customer__name span{margin-left:8px}.m-menu-customer .m-signin-button{margin-bottom:12px}.m-menu-customer a.m-button{width:100%}.m-menu-customer__language-currency{display:flex;flex-wrap:wrap}.m-menu-customer__language-currency .m-switcher-dropdown{padding-top:10px;padding-bottom:10px;display:block}@media(min-width: 1280px){.m-menu-customer__language-currency .m-switcher-dropdown{display:none}}.m-logo{font-size:1rem;line-height:unset;padding-left:16px;padding-right:16px;display:flex;align-items:center;justify-content:center;position:relative;color:inherit}.m-logo-mobile:before{padding-top:calc(100%/(.0001 + var(--aspect-ratio-mobile, --aspect-ratio))) !important}.m-logo__image{position:relative;padding-top:10px;padding-bottom:10px}.m-logo__image-transparent{display:none}.m-logo a{width:var(--logo-width-desktop, 150px)}.m-logo .m-image{transition:all var(--m-duration-default, 0.25s);line-height:1}.m-logo img{margin:auto}.m-menu-bar{position:relative;z-index:1}.m-header{--m-slide-trans-duration: 0.3s;--m-slide-from-val: -65px;--m-slide-to-val: 65px;min-height:calc(var(--m-topbar-height, 0px) + var(--m-header-height, 40px));position:relative}.m-header.slide-from-right{--m-slide-from-val: 65px;--m-slide-to-val: -65px }.m-header.slide-reveal{--m-slide-from-val: 0;--m-slide-to-val: 0 }.m-header header{transition:all var(--m-duration-default, 0.25s)}.m-header__wrapper{width:100%;transition:transform var(--m-duration-long, 0.5s);will-change:transform;z-index:82;position:relative}.header-sticky-always .m-header__wrapper{position:fixed;top:0}.m-header__desktop{position:relative;display:none}@media screen and (min-width: 1024px){.m-header__desktop{display:block}}.m-header__mobile .m-logo a{text-align:center;width:var(--logo-width-mobile, 100px);white-space:nowrap}.m-header__mobile m-search-popup{padding:10px}@media screen and (min-width: 1024px){.m-header__mobile{display:none}}@media(max-width: 480px){.m-header__mobile>*:last-child{padding-right:0}}.m-header__bg{display:block;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;pointer-events:none;transition:all var(--m-duration-default, 0.25s)}.m-mega-active .m-header__bg{opacity:1}.m-header__dropdown-bg{width:100vw;height:calc(var(--sf-dropdown-height, 0px)*1px);position:absolute;left:0;right:0;top:100%;opacity:0;pointer-events:none;transform-origin:top left;transition:all var(--m-duration-default, 0.25s)}.m-mega-active .m-header__dropdown-bg{opacity:1}.m-header__overlay{background-color:rgba(0,0,0,.6);position:fixed;top:calc(var(--m-topbar-height, 0px) + var(--m-announcement-height, 0px));right:0px;bottom:0px;left:0px;opacity:0;visibility:hidden;pointer-events:none;z-index:-1;display:none;transition:all var(--m-duration-default, 0.25s)}.m-mega-active .m-header__overlay{z-index:29;opacity:1;visibility:visible}@media screen and (min-width: 768px){.m-header__overlay{display:block}}.m-header__container{z-index:1}.m-header__inner{display:flex;align-items:center;margin-left:-16px;margin-right:-16px}.m-header__left,.m-header__center,.m-header__right{display:flex;align-items:center}.m-header__left{justify-content:flex-start}.m-header__center{justify-content:center}.m-header__right{justify-content:flex-end}.m-header:not(.m-mega-active,.stuck,.header-sticky-always).transparent-on-top header:not(.header-drawer-open){color:rgb(var(--header-transparent-text-color, #fff))}.m-header:not(.m-mega-active,.stuck,.header-sticky-always).transparent-on-top header:not(.header-drawer-open) .m-hamburger-box{--color-foreground: var(--header-transparent-text-color, #fff)}.transparent-on-top{position:absolute;left:0px;right:0px;z-index:70}.transparent-on-top header:not(.header-drawer-open){background-color:rgba(0,0,0,0);border-bottom:none;box-shadow:none}.transparent-on-top .m-menu-bar{background-color:rgba(0,0,0,0);transition:all var(--m-duration-default, 0.25s)}.transparent-on-top .m-logo__image-default{display:none}.transparent-on-top .m-logo__image-transparent{display:flex}.transparent-on-top .header-drawer-open .m-logo__image-default{display:flex}.transparent-on-top .header-drawer-open .m-logo__image-transparent{display:none}.m-header.stuck .m-header__wrapper{position:fixed;top:0;left:0;transform:none;box-shadow:0px 4px 20px rgba(0,0,0,.04)}.m-header.stuck .m-header__wrapper.m-unset-shadow{box-shadow:none}.m-header.stuck .m-logo a{width:var(--logo-width-sticky, 100px)}.m-header.stuck .m-header__mobile .m-logo a{width:var(--logo-width-mobile, 100px)}.m-header.stuck.transparent-on-top .m-header__mobile,.m-header.stuck.transparent-on-top .m-header__desktop,.m-header.stuck.transparent-on-top .m-menu-bar{background-color:rgb(var(--color-background))}.m-header.stuck.transparent-on-top .m-logo__image-default{display:flex}.m-header.stuck.transparent-on-top .m-logo__image-transparent{display:none}.m-header.scroll-up .m-header__wrapper{transform:none}.m-header.scroll-down.stuck .m-header__wrapper{transform:translate3d(0, -100%, 0)}.m-header.header-sticky-always.transparent-on-top .m-header__mobile,.m-header.header-sticky-always.transparent-on-top .m-header__desktop,.m-header.header-sticky-always.transparent-on-top .m-menu-bar{background-color:rgb(var(--color-background))}.m-header.header-sticky-always.transparent-on-top .m-logo__image-default{display:flex}.m-header.header-sticky-always.transparent-on-top .m-logo__image-transparent{display:none}.m-header.header-sticky-always .m-header__wrapper:not(.m-unset-shadow){box-shadow:0px 4px 20px rgba(0,0,0,.04)}.m-mega-active header{box-shadow:none}.m-mega-active.transparent-on-top .m-logo__image-default{display:flex}.m-mega-active.transparent-on-top .m-logo__image-transparent{display:none}.both-center .m-header__menu{width:37.5%}.both-center .m-header__logo{width:25%}.logo-left-menu-center .m-header__left,.logo-left-menu-center .m-header__right{flex:1 1 0%}.logo-left-menu-center .m-header__center{flex-shrink:1;flex-grow:2}.logo-left__2l .m-header__inner{padding-bottom:8px;padding-top:8px}.logo-center__2l .m-header__inner{margin-left:0;margin-right:0}.m-hamburger-box{display:inline-block;vertical-align:-1px;position:relative;width:20px;height:12px;padding:14px 0;border:0;cursor:pointer;pointer-events:auto}.m-hamburger-box__inner{position:absolute;top:50%;left:0;margin-top:-1px;width:100%;height:2px;background:rgb(var(--color-foreground));transition:transform .2s ease}.m-hamburger-box__inner:before,.m-hamburger-box__inner:after{content:"";display:block;position:absolute;width:100%;height:2px;background-color:inherit;background:rgb(var(--color-foreground))}.m-hamburger-box__inner:before{top:-7px;transition:top .2s ease .22s,opacity .2s ease,width .2s ease}.m-hamburger-box__inner:after{bottom:-7px;transition:bottom .2s ease .22s,transform .2s ease,width .2s ease}.m-hamburger-box.active .m-hamburger-box__inner{transform:rotate(45deg);transition-delay:.22s}.m-hamburger-box.active .m-hamburger-box__inner:before{top:0;opacity:0;width:100%;transition:top .2s ease,opacity .2s ease .22s,width .1s ease}.m-hamburger-box.active .m-hamburger-box__inner:after{bottom:0;transform:rotate(-90deg);width:100%;transition:bottom .2s ease,transform .2s ease .22s,width .1s ease}.m-menu-button{pointer-events:none}.m-header .ssw-link-fave-menu,.m-header__compare,.m-header__account,.m-header__wishlist{position:relative;padding:14px 8px}.m-search-wrapper .m-header .ssw-link-fave-menu,.m-search-wrapper .m-header__compare,.m-search-wrapper .m-header__account,.m-search-wrapper .m-header__wishlist{padding:0;margin-left:8px;margin-right:8px}.m-header__account-text{padding:20px 16px}@media screen and (min-width: 1024px){.m-header .m-cart-icon-bubble{margin-right:22px}}.m-search-form--icon-left{margin-right:16px}.m-search-form--full{border:1px solid rgb(var(--color-border));border-radius:.375rem;transition:border .3s;height:42px}.m-search-form--full:hover{border-color:rgb(var(--color-foreground))}.m-search-form__label{color:rgba(var(--color-foreground), 0.6);padding-left:12px;white-space:nowrap}.m-search-form__button{padding:8px 12px}@media(min-width: 1280px){.m-search-form--full{min-width:250px}.m-search-form--full>span{flex:1}}

/* ============================================================
   Transparent header text-color fix
   This makes Header > Text color work with:
   - one-line headers
   - two-line Logo center / Logo left headers
   - menu bar color schemes
   - header icons and dropdown arrows
   ============================================================ */

/* Override the foreground variable supplied by m-color-* schemes
   only while the header is transparent at the top. */
.m-header.transparent-on-top:not(.m-mega-active):not(.stuck):not(.header-sticky-always)
:is(
  .m-header__desktop,
  .m-header__mobile,
  .m-header__top,
  .m-header__main,
  .m-menu-bar
) {
  --color-foreground: var(--header-transparent-text-color);
  --color-border: var(--header-transparent-text-color);
  color: rgb(var(--header-transparent-text-color)) !important;
}

/* Main navigation text and dropdown arrows */
.m-header.transparent-on-top:not(.m-mega-active):not(.stuck):not(.header-sticky-always)
.m-menu-bar .m-menu__link--main,
.m-header.transparent-on-top:not(.m-mega-active):not(.stuck):not(.header-sticky-always)
.m-menu-bar .m-menu__arrow,
.m-header.transparent-on-top:not(.m-mega-active):not(.stuck):not(.header-sticky-always)
.m-header__desktop > * {
  color: rgb(var(--header-transparent-text-color));
}

/* Header links, icon buttons and currentColor SVG icons */
.m-header.transparent-on-top:not(.m-mega-active):not(.stuck):not(.header-sticky-always)
.m-header__desktop a,
.m-header.transparent-on-top:not(.m-mega-active):not(.stuck):not(.header-sticky-always)
.m-header__desktop button,
.m-header.transparent-on-top:not(.m-mega-active):not(.stuck):not(.header-sticky-always)
.m-header__mobile a,
.m-header.transparent-on-top:not(.m-mega-active):not(.stuck):not(.header-sticky-always)
.m-header__mobile button,
.m-header.transparent-on-top:not(.m-mega-active):not(.stuck):not(.header-sticky-always)
:is(.m-header__desktop, .m-header__mobile, .m-menu-bar) svg {
  color: rgb(var(--header-transparent-text-color)) !important;
}

/* Underline below the active/hovered top-level menu item */
.m-header.transparent-on-top:not(.m-mega-active):not(.stuck):not(.header-sticky-always)
.m-menu-bar .m-menu__link--main::after {
  background-color: rgb(var(--header-transparent-text-color)) !important;
}

/* Mobile hamburger lines use the theme foreground variable */
.m-header.transparent-on-top:not(.m-mega-active):not(.stuck):not(.header-sticky-always)
.m-hamburger-box,
.m-header.transparent-on-top:not(.m-mega-active):not(.stuck):not(.header-sticky-always)
.m-hamburger-box__inner {
  --color-foreground: var(--header-transparent-text-color);
}

/* Do not force transparent colors after scrolling or while mega menu is open.
   The selected normal header/menu color schemes take control again. */
.m-header.m-mega-active.transparent-on-top
:is(.m-header__desktop, .m-header__mobile, .m-menu-bar),
.m-header.stuck.transparent-on-top
:is(.m-header__desktop, .m-header__mobile, .m-menu-bar),
.m-header.header-sticky-always.transparent-on-top
:is(.m-header__desktop, .m-header__mobile, .m-menu-bar) {
  color: rgb(var(--color-foreground));
}

/* ============================================================
   Dropdown and mega-menu text color control
   ------------------------------------------------------------
   Transparent header:
   - Only top-level menu links remain the transparent text color.
   - Dropdown / mega-menu links use --header-dropdown-text-color.
   ============================================================ */

/* Restore a normal foreground variable inside every desktop dropdown. */
.m-header .m-header__desktop
:is(.m-menu__item--dropdown, .m-menu__item--mega)
.m-mega-menu {
  --color-foreground: var(--header-dropdown-text-color, 34, 34, 34);
  --color-border: var(--header-dropdown-text-color, 34, 34, 34);
  color: rgb(var(--header-dropdown-text-color, 34, 34, 34)) !important;
}

/* Standard submenu links use a softer version of the selected color. */
.m-header.transparent-on-top
.m-header__desktop
:is(.m-menu__item--dropdown, .m-menu__item--mega)
.m-mega-menu
.m-sub-menu__item > a,
.m-header.transparent-on-top
.m-header__desktop
:is(.m-menu__item--dropdown, .m-menu__item--mega)
.m-mega-menu
.m-menu__link {
  color: rgba(var(--header-dropdown-text-color, 34, 34, 34), 0.66) !important;
}

/* Column headings and first-level mega-menu links remain solid. */
.m-header.transparent-on-top
.m-header__desktop
:is(.m-menu__item--dropdown, .m-menu__item--mega)
.m-mega-menu
.m-sub-menu__item--level-1 > a,
.m-header.transparent-on-top
.m-header__desktop
:is(.m-menu__item--dropdown, .m-menu__item--mega)
.m-mega-menu
:is(
  .m-mega-banner__title,
  .m-mega-product-list__heading,
  .m-mega-article-card__title,
  .m-collection-card__title,
  .m-collection-card__link,
  .m-product-card__name,
  .m-product-card__title,
  .m-mega-banner-item__title
),
.m-header.transparent-on-top
.m-header__desktop
:is(.m-menu__item--dropdown, .m-menu__item--mega)
.m-mega-menu
:is(h1, h2, h3, h4, h5, h6) {
  color: rgb(var(--header-dropdown-text-color, 34, 34, 34)) !important;
}

/* Prices and miscellaneous content inside mega-menu cards. */
.m-header.transparent-on-top
.m-header__desktop
:is(.m-menu__item--dropdown, .m-menu__item--mega)
.m-mega-menu
:is(
  .m-price,
  .m-price-item,
  .m-mega-banner__description,
  .m-mega-article-card__tag
) {
  color: rgba(var(--header-dropdown-text-color, 34, 34, 34), 0.66) !important;
}

/* Dropdown arrows inside the white panel should also be dark. */
.m-header.transparent-on-top
.m-header__desktop
:is(.m-menu__item--dropdown, .m-menu__item--mega)
.m-mega-menu
:is(.m-menu__sub-arrow, .m-menu__sub-arrow svg) {
  color: rgb(var(--header-dropdown-text-color, 34, 34, 34)) !important;
}

/* Hover state. */
.m-header.transparent-on-top
.m-header__desktop
:is(.m-menu__item--dropdown, .m-menu__item--mega)
.m-mega-menu
.m-sub-menu__item > a:hover,
.m-header.transparent-on-top
.m-header__desktop
:is(.m-menu__item--dropdown, .m-menu__item--mega)
.m-mega-menu
a:hover {
  color: rgb(var(--header-dropdown-text-color, 34, 34, 34)) !important;
}

/* Keep only the direct, top-level menu links in the transparent color. */
.m-header.transparent-on-top:not(.m-mega-active):not(.stuck):not(.header-sticky-always)
.m-header__desktop
.m-menu > .m-menu__item > .m-menu__link--main {
  color: rgb(var(--header-transparent-text-color, 255, 255, 255)) !important;
}

/* ============================================================
   Mega-menu open header color fix
   ------------------------------------------------------------
   Closed transparent header  -> transparent text color
   Mega menu open             -> normal theme/menu color scheme
   Sticky/scrolled header     -> normal theme/menu color scheme
   ============================================================ */

/* The transparent white color must stop as soon as a mega menu opens. */
.m-header.transparent-on-top:not(.m-mega-active):not(.stuck):not(.header-sticky-always)
.m-header__desktop
.m-menu > .m-menu__item > .m-menu__link--main {
  color: rgb(var(--header-transparent-text-color, 255, 255, 255)) !important;
}

/* Mega menu open: restore the normal selected header/menu scheme. */
.m-header.m-mega-active.transparent-on-top
.m-header__desktop,
.m-header.m-mega-active.transparent-on-top
.m-menu-bar {
  color: rgb(var(--color-foreground)) !important;
}

.m-header.m-mega-active.transparent-on-top
.m-header__desktop
.m-menu > .m-menu__item > .m-menu__link--main,
.m-header.m-mega-active.transparent-on-top
.m-header__desktop
.m-menu > .m-menu__item > .m-menu__link--main
.m-menu__arrow,
.m-header.m-mega-active.transparent-on-top
.m-header__desktop
.m-menu > .m-menu__item > .m-menu__link--main
svg,
.m-header.m-mega-active.transparent-on-top
.m-header__desktop
.m-header__search-icon,
.m-header.m-mega-active.transparent-on-top
.m-header__desktop
:is(
  .m-header__account,
  .m-header__wishlist,
  .m-header__compare,
  .m-cart-icon-bubble
) {
  color: rgb(var(--color-foreground)) !important;
}
/* ============================================================
   Mobile drawer final fix
   - Full viewport width: no grey/right-side gap
   - Drawer-open header and menu use dark dropdown text color
   - Transparent white text is used only while drawer is closed
   ============================================================ */

@media screen and (max-width: 1023px) {
  /* Full-screen mobile drawer for normal menu, Tabs and Gallery. */
  .m-menu-drawer,
  .m-menu-drawer__wrapper,
  .m-menu-drawer__content,
  .m-megamenu-mobile,
  .m-megamenu-mobile__wrapper {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
  }

  .m-menu-drawer__wrapper {
    right: 0 !important;
  }

  /* The drawer fills the viewport, so a visible side backdrop is not needed. */
  .m-menu-drawer.open .m-menu-drawer__backdrop {
    background: transparent !important;
    pointer-events: none;
  }

  /* Keep all nested submenu pages full-width too. */
  .m-megamenu-mobile {
    right: 0;
  }

  .m-megamenu-mobile__block {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  /* Drawer open: restore dark/normal menu colors on a white header. */
  .m-header.transparent-on-top
  .m-header__mobile.header-drawer-open {
    --color-foreground: var(--header-dropdown-text-color, 34, 34, 34) !important;
    color: rgb(var(--header-dropdown-text-color, 34, 34, 34)) !important;
    background-color: rgb(var(--color-background)) !important;
    border-bottom-color: rgb(var(--color-border)) !important;
  }

  .m-header.transparent-on-top
  .m-header__mobile.header-drawer-open
  :is(
    a,
    button,
    svg,
    .m-header__search-icon,
    .m-cart-icon-bubble,
    .m-menu-mobile__link,
    .m-menu-mobile__toggle-button,
    .m-menu-mobile__back-button
  ) {
    color: rgb(var(--header-dropdown-text-color, 34, 34, 34)) !important;
  }

  .m-header.transparent-on-top
  .m-header__mobile.header-drawer-open
  .m-hamburger-box,
  .m-header.transparent-on-top
  .m-header__mobile.header-drawer-open
  .m-hamburger-box__inner {
    --color-foreground: var(--header-dropdown-text-color, 34, 34, 34) !important;
  }

  /* Drawer body and every submenu inherit the same readable dark color. */
  .m-header.transparent-on-top
  .m-header__mobile.header-drawer-open
  :is(
    .m-menu-drawer__wrapper,
    .m-menu-drawer__content,
    .m-megamenu-mobile,
    .m-megamenu-mobile__wrapper,
    .m-megamenu-mobile__block
  ) {
    --color-foreground: var(--header-dropdown-text-color, 34, 34, 34) !important;
    color: rgb(var(--header-dropdown-text-color, 34, 34, 34)) !important;
    background-color: rgb(var(--color-background)) !important;
  }

  .m-header.transparent-on-top
  .m-header__mobile.header-drawer-open
  :is(
    .m-menu-drawer__wrapper,
    .m-menu-drawer__content,
    .m-megamenu-mobile,
    .m-megamenu-mobile__wrapper,
    .m-megamenu-mobile__block
  )
  :is(a, button, svg, span, p, h1, h2, h3, h4, h5, h6) {
    color: inherit;
  }

  /* Make the top mobile header span the viewport while drawer is open. */
  .m-header.transparent-on-top
  .m-header__mobile.header-drawer-open {
    width: 100%;
    max-width: 100%;
  }
}
* ============================================================
   Transparent mobile drawer readable-color fix
   ------------------------------------------------------------
   The drawer's actual open state is .m-menu-drawer.open.
   Do not rely only on .header-drawer-open.
   ============================================================ */

@media screen and (max-width: 1023px) {
  /* Header row becomes normal white/dark while the drawer is open. */
  .m-header.transparent-on-top:has(.m-menu-drawer.open) .m-header__mobile {
    --color-foreground: var(--header-dropdown-text-color, 34, 34, 34) !important;
    --color-border: var(--header-dropdown-text-color, 34, 34, 34) !important;
    color: rgb(var(--header-dropdown-text-color, 34, 34, 34)) !important;
    background-color: rgb(var(--color-background)) !important;
    border-bottom-color: rgb(var(--color-border)) !important;
  }

  .m-header.transparent-on-top:has(.m-menu-drawer.open)
  .m-header__mobile
  :is(
    .m-menu-button,
    .m-hamburger-box,
    .m-hamburger-box__inner,
    .m-header__search-icon,
    .m-cart-icon-bubble,
    a,
    button,
    svg
  ) {
    --color-foreground: var(--header-dropdown-text-color, 34, 34, 34) !important;
    color: rgb(var(--header-dropdown-text-color, 34, 34, 34)) !important;
  }

  /* Drawer and all submenu pages use the normal dark foreground. */
  .m-header.transparent-on-top .m-menu-drawer.open,
  .m-header.transparent-on-top .m-menu-drawer.open
  :is(
    .m-menu-drawer__wrapper,
    .m-menu-drawer__content,
    .m-menu-mobile,
    .m-megamenu-mobile,
    .m-megamenu-mobile__wrapper,
    .m-megamenu-mobile__block,
    .m-menu-customer,
    .m-menu-customer__wrapper
  ) {
    --color-foreground: var(--header-dropdown-text-color, 34, 34, 34) !important;
    --color-border: var(--header-dropdown-text-color, 34, 34, 34) !important;
    color: rgb(var(--header-dropdown-text-color, 34, 34, 34)) !important;
    background-color: rgb(var(--color-background)) !important;
  }

  /* Main drawer links and arrows must not inherit transparent white. */
  .m-header.transparent-on-top .m-menu-drawer.open
  :is(
    .m-menu-mobile__link,
    .m-menu-mobile__toggle-button,
    .m-menu-mobile__back-button,
    .m-menu-customer__label,
    .m-menu-customer__name,
    .m-mega-tabs__tab,
    .m-mega-tabs__tab-link
  ) {
    color: rgb(var(--header-dropdown-text-color, 34, 34, 34)) !important;
    opacity: 1 !important;
  }

  .m-header.transparent-on-top .m-menu-drawer.open
  :is(
    .m-menu-mobile__link,
    .m-menu-mobile__toggle-button,
    .m-menu-mobile__back-button,
    .m-menu-customer__name,
    .m-mega-tabs__tab,
    .m-mega-tabs__tab-link
  )
  svg {
    color: currentColor !important;
    fill: currentColor;
    stroke: currentColor;
  }

  /* Keep native primary button contrast; fix the outlined Register button. */
  .m-header.transparent-on-top .m-menu-drawer.open
  .m-menu-customer
  .m-button--secondary {
    color: rgb(var(--header-dropdown-text-color, 34, 34, 34)) !important;
    border-color: rgb(var(--header-dropdown-text-color, 34, 34, 34)) !important;
    background: transparent !important;
  }

  .m-header.transparent-on-top .m-menu-drawer.open
  .m-menu-customer
  .m-button--primary {
    color: rgb(var(--color-button-text, 255, 255, 255)) !important;
  }

  /* Fallback for browsers where :has() is unavailable. */
  .m-header.transparent-on-top .m-menu-drawer.open
  ~ * {
    --color-foreground: var(--header-dropdown-text-color, 34, 34, 34);
  }
}