/** Shopify CDN: Minification failed

Line 16:42 The "-" operator only works if there is whitespace on both sides
Line 36:57 The "-" operator only works if there is whitespace on both sides

**/
.header__icon--menu{position:initial}

/* Backdrop (Overlay) */
.js menu-drawer>details>summary::before,
.js menu-drawer>details[open]:not(.menu-opening)>summary::before{
  content:'';
  position:absolute;
  cursor:default;
  width:100%;
  height:calc(var(--viewport-height,100vh)-(var(--header-bottom-position,100%)));
  top:100%;
  left:0;
  background:rgba(var(--color-foreground),.5);
  opacity:0;visibility:hidden;z-index:2;
  transition:opacity 0s,visibility 0s
}
menu-drawer>details[open]>summary::before{
  visibility:visible;opacity:1;
  transition:opacity var(--duration-default) ease,visibility var(--duration-default) ease
}

/* Drawer (Basis) */
.menu-drawer{
  position:absolute;transform:translateX(-100%);
  visibility:hidden;z-index:3;left:0;top:100%;
  width:100%;padding:0;background-color:rgb(var(--color-background));
  overflow-x:hidden;
  filter:drop-shadow(var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius) rgba(var(--color-shadow),var(--drawer-shadow-opacity)))
}
.js .menu-drawer{height:calc(var(--viewport-height,100vh)-(var(--header-bottom-position,100%)))}
.js details[open]>.menu-drawer,
.js details[open]>.menu-drawer__submenu{transition:transform var(--duration-default) ease,visibility var(--duration-default) ease}
.js details[open].menu-opening>.menu-drawer,
details[open].menu-opening>.menu-drawer__submenu{transform:translateX(0);visibility:visible}
.js .menu-drawer__navigation .submenu-open{visibility:hidden}

@media(min-width:750px){
  .menu-drawer{
    width:40rem;border-width:0 var(--drawer-border-width) 0 0;
    border-style:solid;border-color:rgba(var(--color-foreground),var(--drawer-border-opacity))
  }
}

.menu-drawer__inner-container{position:relative;height:100%}
.menu-drawer__navigation-container{
  display:grid;grid-template-rows:1fr auto;align-content:space-between;
  overflow-y:auto;height:100%
}
.menu-drawer__navigation{padding:3rem 0}
.menu-drawer__inner-submenu{height:100%;overflow-x:hidden;overflow-y:auto}
.js .menu-drawer__menu li{margin-bottom:.2rem}

.menu-drawer__menu-item{
  padding:1.1rem 5.2rem 1.1rem 3rem;position:relative;
  text-decoration:none;font-size:1.8rem
}
.menu-drawer__menu-item>.svg-wrapper.menu-drawer__empty-icon{opacity:.3;pointer-events:none}
.menu-drawer__empty-icon{
  position:absolute;right:3rem;top:50%;transform:translateY(-50%);
  width:15px;height:15px;opacity:0;pointer-events:none
}
.menu-drawer__menu-item .menu-drawer__menu-item-text{display:inline-block;padding-right:5.2rem}
.menu-drawer summary.menu-drawer__menu-item{padding-right:5.2rem}

.menu-drawer__menu-item--active,
.menu-drawer__menu-item:focus,
.menu-drawer__close-button:focus,
.menu-drawer__menu-item:hover,
.menu-drawer__close-button:hover{
  color:rgb(var(--color-foreground));background-color:rgba(var(--color-foreground),.04)
}
.menu-drawer__menu-item--active:hover{background-color:rgba(var(--color-foreground),.08)}
.js .menu-drawer__menu-item .icon-caret{display:none}
.menu-drawer__menu-item>.svg-wrapper{
  width:15px;position:absolute;right:3rem;top:50%;transform:translateY(-50%)
}

/* Submenü-Basis */
.js .menu-drawer__submenu{
  position:absolute;top:0;width:100%;bottom:0;left:0;
  background-color:rgb(var(--color-background));
  z-index:1;transform:translateX(100%);visibility:hidden
}
.js .menu-drawer__submenu .menu-drawer__submenu{overflow-y:auto}

.menu-drawer__close-button{
  margin-top:1.5rem;padding:1.2rem 2.6rem 1.2rem 3rem;
  text-decoration:none;display:flex;align-items:center;
  font-size:1.4rem;width:100%;background-color:transparent;
  font-family:var(--font-body-family);font-style:var(--font-body-style);
  text-align:left
}
.menu-drawer__close-button .svg-wrapper{transform:rotate(180deg);margin-right:1rem;width:15px}

.menu-drawer__utility-links{padding:0;background-color:rgba(var(--color-foreground),.03);position:relative}
.header--has-social .menu-drawer__utility-links{padding:2rem 3rem}
@media(max-width:749px){
  .header--has-account:where(:not(.header--has-social):not(.header--has-localizations)) .menu-drawer__utility-links{padding:2rem 3rem}
}
@media(max-width:989px){
  .header--has-localizations:where(:not(.header--has-social)) .menu-drawer__utility-links{padding:2rem 3rem}
}

.menu-drawer__account{
  display:inline-flex;align-items:center;text-decoration:none;
  padding:1rem 0;font-size:1.4rem;color:rgb(var(--color-foreground));margin-bottom:0
}
.menu-drawer__utility-links:has(.menu-drawer__localization) .menu-drawer__account{margin:0}
.menu-drawer__account account-icon>.svg-wrapper{height:2rem;width:2rem;margin-right:1rem}
.menu-drawer__account shop-user-avatar{--shop-avatar-size:2.4rem;margin-right:.55rem;margin-left:-.45rem}
.menu-drawer__account:hover account-icon>.svg-wrapper{transform:scale(1.07)}

.menu-drawer .list-social{justify-content:flex-start;margin-left:-1.25rem}
.menu-drawer .list-social:empty{display:none}
.menu-drawer .list-social__link{padding:1.1rem 1.1rem}

@media(max-width:749px){
  .menu-drawer.country-selector-open{transform:none!important;filter:none!important;transition:none!important}
}
.menu-drawer__divider{border:none;border-top:1px solid rgba(0,0,0,.1);margin:1rem 0}

/* =========================
   MOBILE (≤ 749px): Vollflächig + genau 1 Scroll-Container
   ========================= */
@media(max-width:749px){
  .menu-drawer{position:fixed;top:0;left:0;width:100%;height:100dvh}
  .js .menu-drawer{height:100dvh}
  details[open]>summary::before{height:100dvh;top:0}

  .menu-drawer,
  .menu-drawer__inner-container,
  .menu-drawer__navigation-container,
  .menu-drawer__navigation,
  .menu-drawer__submenu,
  .menu-drawer__inner-submenu{min-height:0}

  .menu-drawer__navigation-container{display:flex;flex-direction:column;height:100%;overflow:hidden}

  /* WICHTIG: Top-Level darf scrollen */
  .menu-drawer__navigation{
    padding:1rem 0;flex:1 1 auto;
    overflow-y:auto; -webkit-overflow-scrolling:touch
  }
  .menu-drawer__navigation>.menu-drawer__menu{
    max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch
  }

  .menu-drawer__submenu{position:absolute;inset:0;height:100%;overflow:hidden;z-index:5}
  .menu-drawer__inner-submenu{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden}
  .menu-drawer__close-button{flex:0 0 auto;margin-top:.5rem;padding-top:.8rem;padding-bottom:.8rem}
  .menu-drawer__submenu .menu-drawer__menu{
    flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:96px;scroll-padding-bottom:96px
  }
  .menu-drawer__menu details{overflow:visible}
  details[open] .menu-drawer__utility-links{display:none}
  .menu-drawer__inner-submenu::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:48px;pointer-events:none;
    background:linear-gradient(to bottom,rgba(var(--color-background),0) 0%,rgba(var(--color-background),.7) 60%,rgba(var(--color-background),1) 100%)
  }

  /* Im geöffneten Drawer Farben schwarz */
  details[open] #menu-drawer,
  details[open] #menu-drawer .menu-drawer__menu-item{color:#000!important}
  details[open] #menu-drawer svg,
  details[open] #menu-drawer .icon,
  details[open] #menu-drawer .icon *,
  details[open] #menu-drawer .svg-wrapper svg,
  details[open] #menu-drawer .icon-caret,
  details[open] #menu-drawer .icon-caret path{
    fill:#000!important;stroke:#000!important;color:#000!important;opacity:1!important
  }
  details[open]>summary svg,
  details[open]>summary .icon path{fill:#000!important;stroke:#000!important;color:#000!important}

  /* Overlay blockiert nichts, wenn unsichtbar */
  .js menu-drawer>details>summary::before{pointer-events:none}
  details[open]>summary::before{pointer-events:auto}
}

/* UL/LI auf volle Breite */
.menu-drawer__menu{display:block}
.menu-drawer__menu>li{display:block;width:100%}

/* Klickfläche strecken: A + Summary */
.menu-drawer__menu a.menu-drawer__menu-item,
.menu-drawer__menu summary.menu-drawer__menu-item{
  display:flex;align-items:center;width:100%;
  box-sizing:border-box;padding-right:5.2rem;position:relative
}

/* Falls Theme noch inline-flex setzt */
.menu-drawer .list-menu__item{display:block!important;width:100%!important}

/* Rechte Icons passend */
.menu-drawer__menu-item>.svg-wrapper{right:3rem;top:50%;transform:translateY(-50%);pointer-events:none}

/* Symmetrische Reihen */
.menu-drawer__menu-item{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:1.1rem 3rem;box-sizing:border-box
}
.menu-drawer__menu-item .menu-drawer__menu-item-text{flex:1;text-align:left}
.menu-drawer__menu-item>.svg-wrapper{position:static;opacity:1;margin-left:1rem;transform:none}

/* Menüpunkt-Höhe optimieren */
.menu-drawer__menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;

  /* Weniger vertikales Padding für kompaktere Höhe */
  padding: 0.6rem 3rem; /* vorher 1.1rem */

  /* Schrift etwas kleiner für optische Balance */
  font-size: 1.6rem;
  line-height: 1.2; /* keine extra Zeilenhöhe */
}

/* Textausrichtung */
.menu-drawer__menu-item .menu-drawer__menu-item-text {
  flex: 1;
  text-align: left;
}

/* Icon rechts, gleichmäßig mit Text */
.menu-drawer__menu-item > .svg-wrapper {
  position: static;
  margin-left: 1rem;
  opacity: 1;
  transform: none;
}

/* Falls andere CSS das Padding überschreibt → sicherstellen */
.menu-drawer__menu-item,
.menu-drawer__menu-item a,
.menu-drawer__menu-item summary {
  min-height: auto !important;
}

/* 1) Kein Extra-Einzug mehr für Link-Texte */
.menu-drawer__menu-item .menu-drawer__menu-item-text{
  padding-right:0 !important;
  flex:1 1 auto;              /* Text nimmt Restbreite */
}

/* 2) Nur „echte“ rechte Icons statisch setzen – NICHT die leere Platzhalter-Span */
.menu-drawer__menu-item > .svg-wrapper:not(.menu-drawer__empty-icon){
  position: static !important;
  margin-left:1rem;
  transform:none !important;
  opacity:1;
}

/* 3) Platzhalter-Icon gar nicht anzeigen (sonst macht es Luft rechts) */
.menu-drawer__empty-icon{ display:none !important; }

/* 4) Kompaktere, einheitliche Zeilenhöhe */
.menu-drawer__menu-item{
  padding:0.6rem 3rem !important;
  font-size:1.6rem; line-height:1.2;
  align-items:center; justify-content:space-between;
}

/* Mobile: sichtbare Scrollbar im Hauptmenü */
@media (max-width: 749px){
  /* eine einzige Scrollfläche: die Navigation */
  .menu-drawer__navigation{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Momentum-Scroll iOS */
    scrollbar-width: auto;             /* Firefox: Scrollbar zeigen */
    max-height: 100dvh;                /* falls Elternhöhen variieren */
  }
  /* WebKit: Scrollbar nicht verstecken */
  .menu-drawer__navigation::-webkit-scrollbar{
    display: initial !important;
    width: 8px;
  }
}

/* optional hübscher: */
.menu-drawer__navigation::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.25); border-radius: 8px; }
.menu-drawer__navigation::-webkit-scrollbar-track{ background: transparent; }

/* 1) Sicherheit: auch in Submenüs UL/LI nie als Flex nebeneinander */
#menu-drawer .menu-drawer__submenu .menu-drawer__menu,
#menu-drawer .menu-drawer__submenu .menu-drawer__menu > li {
  display: block !important;
  width: 100%;
}

/* 2) Submenüs bekommen ihre eigene Scrollfläche (Höhe = Drawer – Close-Button) */
@media (max-width: 749px){
  #menu-drawer .menu-drawer__submenu {
    position: absolute; inset: 0; height: 100%; overflow: hidden;
  }
  #menu-drawer .menu-drawer__inner-submenu {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
  }
  #menu-drawer .menu-drawer__submenu .menu-drawer__menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;            /* hier scrollt das Submenü */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}