/** Shopify CDN: Minification failed

Line 1160:0 Unexpected "}"

**/
/* =========================================================
   CARDCOMPLEX HEADER – FULL WIDTH LIQUID GLASS
========================================================= */

.shopify-section-header,
.section-header,
sticky-header {
  background: transparent;
}

.header-wrapper {
  position: relative;
  z-index: 20;
  isolation: auto;
  overflow: visible;

  width: 100%;
  margin: 0;
  border-radius: 0;

  background: transparent;
  background-clip: padding-box;

  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(var(--color-foreground), 0.08),
    inset 0 -1px 0 rgba(var(--color-foreground), 0.06);
}

.header {
  position: relative;
  background: transparent;
}

.header-wrapper::before {
  content: none;
}

/* Desktop: Glass-Fix aktiv */
@media screen and (min-width: 750px) {
  .header-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background: rgba(0, 0, 0, 0.54);
    background-clip: padding-box;

    -webkit-backdrop-filter: blur(26px) saturate(145%);
    backdrop-filter: blur(26px) saturate(145%);

    opacity: 1;
  }
}

.header-wrapper > * {
  position: relative;
  z-index: 1;
}

.header a,
.header button,
.header summary {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.34);
}

/* =========================================================
   NAVIGATION
========================================================= */

.header__inline-menu .list-menu--inline {
  display: flex;
  align-items: center;
  column-gap: 0.65rem;
}

.header__inline-menu .list-menu--inline > li {
  display: flex;
  align-items: center;
}

.header__inline-menu .header__menu-item {
  --cn-header-menu-bg: transparent;
  --cn-header-menu-shadow: none;

  margin-inline: 0.08rem;
  border-radius: 999px;

  background: var(--cn-header-menu-bg);
  box-shadow: var(--cn-header-menu-shadow);

  text-decoration: none;

  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

.header__inline-menu .header__menu-item span,
.header__inline-menu .header__active-menu-item {
  padding: 0;
  margin: 0;

  background: transparent !important;
  box-shadow: none !important;

  color: inherit;
  text-decoration: none !important;
  text-underline-offset: 0;
}

@media (hover: hover) and (pointer: fine) {
  .header__inline-menu .header__menu-item:hover,
  .header__inline-menu .header__menu-item:focus-visible {
    --cn-header-menu-bg: rgba(var(--color-foreground), 0.075);
    --cn-header-menu-shadow:
      inset 0 1px 0 rgba(var(--color-foreground), 0.1),
      0 8px 18px rgba(0, 0, 0, 0.13);
  }
}

.header__inline-menu .header__menu-item[aria-current="page"] {
  --cn-header-menu-bg: rgba(var(--color-foreground), 0.105);
  --cn-header-menu-shadow:
    inset 0 1px 0 rgba(var(--color-foreground), 0.12),
    0 8px 18px rgba(0, 0, 0, 0.14);
}

@supports selector(:has(*)) {
  .header__inline-menu .header__menu-item:has(.header__active-menu-item) {
    --cn-header-menu-bg: rgba(var(--color-foreground), 0.105);
    --cn-header-menu-shadow:
      inset 0 1px 0 rgba(var(--color-foreground), 0.12),
      0 8px 18px rgba(0, 0, 0, 0.14);
  }
}

/* =========================================================
   HEADER ICONS
========================================================= */

.header__icons {
  display: flex;
  align-items: center;
  column-gap: 0.9rem;
}

.header__icons > * {
  flex-shrink: 0;
  align-self: center;
}

.header__icons > .header__search,
.header__icons > .header__icon,
.header__icons > a.header__icon,
.header__icons > details-modal,
.header__icons > .cn-member-benefits--header {
  align-self: center;
  backface-visibility: hidden;
}

.header__icons .header__icon {
  --cn-header-icon-bg: transparent;
  --cn-header-icon-shadow: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  background: var(--cn-header-icon-bg);
  box-shadow: var(--cn-header-icon-shadow);

  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

.header__icon--cart {
  margin-right: 0;
}

@media (hover: hover) and (pointer: fine) {
  .header__icons .header__icon:hover,
  .header__icons .header__icon:focus-visible,
  .header__icons summary.header__icon:hover,
  .header__icons summary.header__icon:focus-visible {
    --cn-header-icon-bg: rgba(var(--color-foreground), 0.075);
    --cn-header-icon-shadow:
      inset 0 1px 0 rgba(var(--color-foreground), 0.1),
      0 8px 18px rgba(0, 0, 0, 0.13);
  }
}

.header__search details[open] > summary.header__icon,
.header__icons .header__icon[aria-current="page"] {
  --cn-header-icon-bg: rgba(var(--color-foreground), 0.105);
  --cn-header-icon-shadow:
    inset 0 1px 0 rgba(var(--color-foreground), 0.12),
    0 8px 18px rgba(0, 0, 0, 0.14);
}

.cart-count-bubble {
  box-shadow:
    0 0 0 2px rgba(var(--color-background), 0.72),
    0 6px 14px rgba(0, 0, 0, 0.22);
}

/* =========================================================
   MEMBER BADGE – PLUS / PRO / PRIME
========================================================= */

.cn-member-benefits--header {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 3.05rem;
}

.cn-member-benefits--header .cn-member-benefits__button {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "tier chevron"
    "active chevron";
  align-items: center;
  justify-content: center;
  justify-items: center;

  column-gap: 0.38rem;
  row-gap: 0.2rem;

  margin: 0;
  padding: 0;

  appearance: none;
  border: 0;
  background: transparent;
  box-shadow: none;

  color: inherit;
  font: inherit;
  line-height: 1;
  text-align: center;

  cursor: pointer;
}

.cn-member-benefits--header .cn-membership-tier-pill {
  grid-area: tier;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  max-width: max-content;
  min-height: 1.9rem;
  padding: 0.3rem 0.7rem;

  border: 1px solid var(--cn-membership-pill-border);
  border-radius: 999px;

  background: linear-gradient(
    135deg,
    var(--cn-membership-pill-color-1),
    var(--cn-membership-pill-color-2) 48%,
    var(--cn-membership-pill-color-3)
  );

  color: #ffffff;

  font-size: 0.88rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  white-space: nowrap;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 5px var(--cn-membership-pill-glow),
    0 0 12px var(--cn-membership-pill-glow),
    0 6px 16px rgba(0, 0, 0, 0.18);
}

.cn-member-benefits--header .cn-membership-tier-pill--plus {
  --cn-membership-pill-color-1: rgba(35, 108, 255, 0.95);
  --cn-membership-pill-color-2: rgba(87, 120, 255, 0.82);
  --cn-membership-pill-color-3: rgba(55, 190, 255, 0.78);
  --cn-membership-pill-border: rgba(170, 205, 255, 0.45);
  --cn-membership-pill-glow: rgba(48, 112, 255, 0.48);
}

.cn-member-benefits--header .cn-membership-tier-pill--pro {
  --cn-membership-pill-color-1: rgba(217, 119, 6, 0.96);
  --cn-membership-pill-color-2: rgba(245, 158, 11, 0.88);
  --cn-membership-pill-color-3: rgba(251, 191, 36, 0.78);
  --cn-membership-pill-border: rgba(255, 213, 128, 0.48);
  --cn-membership-pill-glow: rgba(245, 158, 11, 0.40);
}

.cn-member-benefits--header .cn-membership-tier-pill--prime {
  --cn-membership-pill-color-1: rgba(126, 34, 206, 0.96);
  --cn-membership-pill-color-2: rgba(168, 85, 247, 0.86);
  --cn-membership-pill-color-3: rgba(217, 70, 239, 0.78);
  --cn-membership-pill-border: rgba(220, 185, 255, 0.46);
  --cn-membership-pill-glow: rgba(132, 72, 220, 0.48);
}

.cn-member-benefits--header .cn-member-benefits__active {
  grid-area: active;
  justify-self: center;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;

  width: max-content;
  margin: 0 auto;
  padding: 0;

  color: rgba(226, 234, 255, 0.72);

  font-size: 0.82rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.cn-member-benefits--header .cn-member-benefits__dot {
  width: 0.46rem;
  height: 0.46rem;
  flex: 0 0 auto;
  display: inline-block;

  border-radius: 999px;
  background: #22c55e;

  transform: translateY(0.05rem);

  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.14),
    0 0 9px rgba(34, 197, 94, 0.62);
}

.cn-member-benefits--header .cn-member-benefits__chevron {
  grid-area: chevron;
  align-self: center;
  justify-self: center;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1rem;
  height: 100%;

  color: rgba(226, 234, 255, 0.72);

  font-size: 0.74rem;
  line-height: 1;

  transition: transform 180ms ease;
}

.cn-member-benefits--header.is-open .cn-member-benefits__chevron {
  transform: rotate(180deg);
}

/* =========================================================
   MEMBER DROPDOWN
========================================================= */

.cn-member-benefits--header .cn-member-benefits__panel {
  position: absolute;
  top: calc(100% + 1.15rem);
  left: 50%;
  z-index: 60;

  display: grid;
  gap: 1rem;

  width: 31rem;
  max-width: calc(100vw - 3.2rem);
  padding: 1.35rem;

  border: 1px solid rgba(var(--color-foreground), 0.1);
  border-radius: 8px;

  background: rgba(0, 0, 0, 0.54) !important;
  background-clip: padding-box;

  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);

  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(var(--color-foreground), 0.08),
    inset 0 -1px 0 rgba(var(--color-foreground), 0.06);

  transform: translateX(-50%) translateY(-0.4rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 180ms ease,
    visibility 180ms ease,
    transform 180ms ease;
}

.cn-member-benefits--header.is-open .cn-member-benefits__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.cn-member-benefits--header .cn-member-benefits__panel[hidden] {
  display: grid !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cn-member-benefits--header .cn-member-benefits__panel::before {
  content: "";
  position: absolute;
  top: -0.55rem;
  left: 50%;

  width: 1rem;
  height: 1rem;

  border-left: 1px solid rgba(var(--color-foreground), 0.1);
  border-top: 1px solid rgba(var(--color-foreground), 0.1);

  background: rgba(0, 0, 0, 0.54);

  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);

  transform: translateX(-50%) rotate(45deg);
}

.cn-member-benefits--header .cn-member-benefits__panel-head {
  display: grid;
  gap: 0.35rem;

  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cn-member-benefits--header .cn-member-benefits__panel-kicker,
.cn-member-benefits--header .cn-member-benefits__list li,
.cn-member-benefits--header .cn-member-benefits__list li > span,
.cn-member-benefits--header .cn-member-benefits__link {
  color: rgba(240, 240, 240, 1) !important;
}

.cn-member-benefits--header .cn-member-benefits__panel-kicker {
  font-size: 0.92rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cn-member-benefits--header .cn-member-benefits__panel-head strong {
  color: #f3f6ff;
  font-size: 1.24rem;
  line-height: 1.2;
  font-weight: 900;
}

@supports selector(:has(*)) {
  .cn-member-benefits--header:has(.cn-membership-tier-pill--plus) .cn-member-benefits__panel-head strong {
    color: rgba(170, 205, 255, 0.96);
  }

  .cn-member-benefits--header:has(.cn-membership-tier-pill--pro) .cn-member-benefits__panel-head strong {
    color: rgba(255, 213, 128, 0.96);
  }

  .cn-member-benefits--header:has(.cn-membership-tier-pill--prime) .cn-member-benefits__panel-head strong {
    color: rgba(220, 185, 255, 0.96);
  }
}

.cn-member-benefits--header .cn-member-benefits__list {
  display: grid;
  gap: 0.72rem;

  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-member-benefits--header .cn-member-benefits__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;

  font-size: 1.08rem;
  line-height: 1.35;
  font-weight: 650;
}

.cn-member-benefits--header .cn-member-benefits__list li span {
  font-weight: 950;
  line-height: 1.35;
}

.cn-member-benefits--header .cn-member-benefits__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  margin-top: 0.15rem;
  padding: 0.85rem 1rem;

  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;

  background: rgba(255, 255, 255, 0.045);

  font-size: 1.06rem;
  line-height: 1.2;
  font-weight: 850;
  text-decoration: none;

  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .cn-member-benefits--header .cn-member-benefits__link:hover,
  .cn-member-benefits--header .cn-member-benefits__link:focus-visible {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.075);
    transform: translateY(-0.06rem);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 749px) {
  .shopify-section-header,
  .section-header,
  sticky-header,
  .header-wrapper,
  .header,
  .cn-mobile-header {
    background: transparent !important;
  }

  .shopify-section-header .header-wrapper,
  .section-header .header-wrapper,
  sticky-header.header-wrapper,
  sticky-header {
    position: relative !important;
    isolation: auto !important;
    overflow-x: clip !important;
    overflow-y: visible !important;

    max-width: 100vw !important;

    background: transparent !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .shopify-section-header .header-wrapper::before,
  .section-header .header-wrapper::before,
  sticky-header.header-wrapper::before,
  sticky-header::before {
    content: none !important;
    display: none !important;

    background: transparent !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .cn-member-benefits--header .cn-member-benefits__panel {
    left: auto;
    right: 0;

    width: min(31rem, calc(100vw - 2rem));
    transform: translateY(-0.4rem);
  }

  .cn-member-benefits--header.is-open .cn-member-benefits__panel {
    transform: translateY(0);
  }

  .cn-member-benefits--header .cn-member-benefits__panel::before {
    left: auto;
    right: 2.2rem;
    transform: rotate(45deg);
  }
}

@media screen and (max-width: 989px) {
  .shopify-section-header .header,
  .section-header .header,
  sticky-header .header {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

@media screen and (max-width: 749px) and (hover: none) and (pointer: coarse) {
  .cn-mobile-header {
    --cn-phone-header-shift-x: 19.5px;
  }

  .cn-mobile-header.header--mobile-center .header__heading-link,
  .cn-mobile-header .cn-mobile-header-icons {
    transform: translate3d(var(--cn-phone-header-shift-x), 0, 0);
  }
}

/* =========================================================
   Hinweis: Search-spezifische Layer liegen in cn-header-search.css.
   Der Header-Glass-Look wird ausschließlich hier definiert.
========================================================= */

/* =========================================================
   FIX: 750PX–999PX Header bleibt immer gleich
   Kein anderer Blur/Kontrast beim Öffnen der Suche
========================================================= */

.header-wrapper::after,
sticky-header.header-wrapper::after,
.shopify-section-header .header-wrapper::after,
.section-header .header-wrapper::after {
  content: none !important;
  display: none !important;
}

@media screen and (min-width: 750px) and (max-width: 999px) {
  .shopify-section-header,
  .section-header,
  sticky-header,
  .shopify-section-header .gradient,
  .section-header .gradient,
  .shopify-section-header .header,
  .section-header .header,
  sticky-header .header,
  .header,
  .header-wrapper,
  sticky-header.header-wrapper,
  body.cn-search-open .shopify-section-header,
  body.cn-search-open .section-header,
  body.cn-search-open sticky-header,
  body.cn-search-open .header,
  body.cn-search-open .header-wrapper,
  body.cn-search-open sticky-header.header-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  .shopify-section-header .header-wrapper,
  .section-header .header-wrapper,
  sticky-header.header-wrapper,
  sticky-header .header-wrapper,
  .header-wrapper,
  body.cn-search-open .shopify-section-header .header-wrapper,
  body.cn-search-open .section-header .header-wrapper,
  body.cn-search-open sticky-header.header-wrapper,
  body.cn-search-open sticky-header .header-wrapper,
  body.cn-search-open .header-wrapper {
    border-bottom: 1px solid rgba(var(--color-foreground), 0.1) !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;

    box-shadow:
      0 14px 38px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(var(--color-foreground), 0.08),
      inset 0 -1px 0 rgba(var(--color-foreground), 0.06) !important;
  }

  .shopify-section-header .header-wrapper::before,
  .section-header .header-wrapper::before,
  sticky-header.header-wrapper::before,
  sticky-header .header-wrapper::before,
  .header-wrapper::before,
  body.cn-search-open .shopify-section-header .header-wrapper::before,
  body.cn-search-open .section-header .header-wrapper::before,
  body.cn-search-open sticky-header.header-wrapper::before,
  body.cn-search-open sticky-header .header-wrapper::before,
  body.cn-search-open .header-wrapper::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;

    pointer-events: none !important;

    background: rgba(0, 0, 0, 0.54) !important;
    background-color: rgba(0, 0, 0, 0.54) !important;
    background-image: none !important;
    background-clip: padding-box !important;

    -webkit-backdrop-filter: blur(26px) saturate(145%) !important;
    backdrop-filter: blur(26px) saturate(145%) !important;

    opacity: 1 !important;
  }

  .header-wrapper > *,
  body.cn-search-open .header-wrapper > * {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* =========================================================
   HEADER MEMBERSHIP TIER LINE
   - Plus  = Blau
   - Pro   = Gold
   - Prime = Lila
   - auf maximal 1200px begrenzt
   - an beiden Seiten weich ausgeblendet
   - subtiler Glow
========================================================= */

@supports selector(:has(*)) {
  .header-wrapper:has(
    .cn-member-benefits--header
    .cn-membership-tier-pill--plus
  ) {
    --cn-header-tier-line-rgb: 64, 112, 224;
    --cn-header-tier-glow-rgb: 32, 72, 184;
  }

  .header-wrapper:has(
    .cn-member-benefits--header
    .cn-membership-tier-pill--pro
  ) {
    --cn-header-tier-line-rgb: 255, 213, 128;
    --cn-header-tier-glow-rgb: 245, 158, 11;
  }

  .header-wrapper:has(
    .cn-member-benefits--header
    .cn-membership-tier-pill--prime
  ) {
    --cn-header-tier-line-rgb: 132, 82, 210;
    --cn-header-tier-glow-rgb: 92, 44, 170;
  }

  /*
    Der normale durchgehende Border wird für Mitglieder entfernt.
    Die eigentliche Tier-Linie liegt als zentrierter ::after-Layer
    auf maximal 1200px und läuft seitlich transparent aus.
  */
  .header-wrapper:has(
    .cn-member-benefits--header
    :is(
      .cn-membership-tier-pill--plus,
      .cn-membership-tier-pill--pro,
      .cn-membership-tier-pill--prime
    )
  ) {
    border-bottom-color: transparent !important;

    box-shadow:
      0 14px 38px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(var(--color-foreground), 0.08) !important;
  }

  .header-wrapper:has(
    .cn-member-benefits--header
    :is(
      .cn-membership-tier-pill--plus,
      .cn-membership-tier-pill--pro,
      .cn-membership-tier-pill--prime
    )
  )::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: -1px !important;
    z-index: 0 !important;

    width: min(1200px, calc(100% - 40px)) !important;
    height: 1px !important;

    pointer-events: none !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--cn-header-tier-line-rgb), 0.08) 4%,
        rgba(var(--cn-header-tier-line-rgb), 0.42) 14%,
        rgba(var(--cn-header-tier-line-rgb), 0.78) 50%,
        rgba(var(--cn-header-tier-line-rgb), 0.42) 86%,
        rgba(var(--cn-header-tier-line-rgb), 0.08) 96%,
        transparent 100%
      ) !important;

    box-shadow:
      0 1px 4px rgba(var(--cn-header-tier-glow-rgb), 0.18),
      0 2px 10px rgba(var(--cn-header-tier-glow-rgb), 0.10) !important;

    transform: translateX(-50%) !important;
  }
}

/* Mobil: gleicher Fade, passend zur mobilen 16px-Seitenkante. */
@media screen and (max-width: 749px) {
  @supports selector(:has(*)) {
    .header-wrapper:has(
      .cn-member-benefits--header
      :is(
        .cn-membership-tier-pill--plus,
        .cn-membership-tier-pill--pro,
        .cn-membership-tier-pill--prime
      )
    )::after {
      width: calc(100% - 32px) !important;

      background:
        linear-gradient(
          90deg,
          transparent 0%,
          rgba(var(--cn-header-tier-line-rgb), 0.18) 10%,
          rgba(var(--cn-header-tier-line-rgb), 0.68) 50%,
          rgba(var(--cn-header-tier-line-rgb), 0.18) 90%,
          transparent 100%
        ) !important;

      box-shadow:
        0 1px 4px rgba(var(--cn-header-tier-glow-rgb), 0.15),
        0 2px 8px rgba(var(--cn-header-tier-glow-rgb), 0.08) !important;
    }
  }
}

/* =========================================================
   MENU DRAWER – TIER-LINIE ÜBER „KONTO“
   Exakt dieselben mobilen Werte wie die obere Header-Linie.
========================================================= */

@media screen and (max-width: 989px) {
  @supports selector(:has(*)) {
    .menu-drawer:has(.cn-membership-tier-pill--plus) {
      --cn-drawer-tier-line-rgb: 64, 112, 224;
      --cn-drawer-tier-glow-rgb: 32, 72, 184;
    }

    .menu-drawer:has(.cn-membership-tier-pill--pro) {
      --cn-drawer-tier-line-rgb: 255, 213, 128;
      --cn-drawer-tier-glow-rgb: 245, 158, 11;
    }

    .menu-drawer:has(.cn-membership-tier-pill--prime) {
      --cn-drawer-tier-line-rgb: 132, 82, 210;
      --cn-drawer-tier-glow-rgb: 92, 44, 170;
    }

    .menu-drawer:has(
      :is(
        .cn-membership-tier-pill--plus,
        .cn-membership-tier-pill--pro,
        .cn-membership-tier-pill--prime
      )
    ) .menu-drawer__utility-links {
      position: relative !important;
      border-top: 0 !important;
      box-shadow: none !important;
    }

    .menu-drawer:has(
      :is(
        .cn-membership-tier-pill--plus,
        .cn-membership-tier-pill--pro,
        .cn-membership-tier-pill--prime
      )
    ) .menu-drawer__utility-links::before {
      content: "" !important;
      display: block !important;

      position: absolute !important;
      top: 0 !important;
      left: 50% !important;
      right: auto !important;
      z-index: 4 !important;

      width: calc(100% - 32px) !important;
      height: 1px !important;

      pointer-events: none !important;

      background:
        linear-gradient(
          90deg,
          transparent 0%,
          rgba(var(--cn-drawer-tier-line-rgb), 0.18) 10%,
          rgba(var(--cn-drawer-tier-line-rgb), 0.68) 50%,
          rgba(var(--cn-drawer-tier-line-rgb), 0.18) 90%,
          transparent 100%
        ) !important;

      box-shadow:
        0 1px 4px rgba(var(--cn-drawer-tier-glow-rgb), 0.15),
        0 2px 8px rgba(var(--cn-drawer-tier-glow-rgb), 0.08) !important;

      transform: translateX(-50%) !important;
    }
  }
}

/* =========================================================
   FINAL: HEADER-TIER-LINIE BLEIBT IMMER AN IHRER POSITION
   - Die Linie bleibt an der Unterkante des Headers.
   - Sie verschwindet weder beim Öffnen der Suche noch bei Ergebnissen.
   - Search- und Membership-Dropdowns liegen im Z-Index darüber.
   - Dadurch scheint die Linie nicht über den Fenstern, sondern liegt
     dahinter und wird von deren Glass-/Blur-Fläche überlagert.
========================================================= */

@supports selector(:has(*)) {
  /*
    Der reale Header-Inhalt liegt eine Ebene über der Linie.
  */
  .header-wrapper:has(
    .cn-member-benefits--header
    :is(
      .cn-membership-tier-pill--plus,
      .cn-membership-tier-pill--pro,
      .cn-membership-tier-pill--prime
    )
  ) > * {
    position: relative !important;
    z-index: 1 !important;
  }

  /*
    Membership-Dropdown sicher über der Header-Linie.
  */
  .cn-member-benefits--header {
    z-index: 50 !important;
  }

  .cn-member-benefits--header .cn-member-benefits__panel {
    z-index: 100 !important;
    isolation: isolate !important;
  }

  /*
    Search-Modal und Predictive-Results sicher über der Linie.
  */
  .header__search {
    z-index: 1100 !important;
  }

  .header__search details[open] .search-modal {
    z-index: 2147483600 !important;
    isolation: isolate !important;
  }

  .header__search details[open] .search-modal__content,
  .header__search details[open] predictive-search,
  .header__search details[open] search-form,
  .header__search details[open] form.search {
    position: relative !important;
    z-index: 2147483601 !important;
  }

  .header__search details[open] :is(
    .predictive-search,
    .predictive-search--header,
    [data-predictive-search]
  ) {
    z-index: 2147483604 !important;
    isolation: isolate !important;
  }
}

/* =========================================================
   OBERE TIER-LINIE BEIM GEÖFFNETEN DRAWER NICHT BLURREN
========================================================= */

@media screen and (max-width: 989px) {
  @supports selector(:has(*)) {
    .header-wrapper:has(
      header-drawer details[open]
    ):has(
      .cn-member-benefits--header
      :is(
        .cn-membership-tier-pill--plus,
        .cn-membership-tier-pill--pro,
        .cn-membership-tier-pill--prime
      )
    )::after,
    .header-wrapper:has(
      details.menu-drawer-container[open]
    ):has(
      .cn-member-benefits--header
      :is(
        .cn-membership-tier-pill--plus,
        .cn-membership-tier-pill--pro,
        .cn-membership-tier-pill--prime
      )
    )::after {
      bottom: 0 !important;
      z-index: 2147483050 !important;

      opacity: 1 !important;
      filter: none !important;
      -webkit-filter: none !important;
    }
  }
}

/* =========================================================
   MOBILE LOGO – 1PX SPRINGEN BEIM DRAWER-ÖFFNEN VERHINDERN
   Die Y-Korrektur wird automatisch vom bestehenden
   cn-menu-drawer-membership-panel-blur.js gesetzt.
========================================================= */

@media screen and (max-width: 749px) and (hover: none) and (pointer: coarse) {
  .cn-mobile-header.header--mobile-center .header__heading,
  .cn-mobile-header.header--mobile-center .header__heading-link,
  .cn-mobile-header.header--mobile-center .header__heading-logo-wrapper {
    line-height: 0 !important;
  }

  .cn-mobile-header.header--mobile-center .header__heading-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transform:
      translate3d(
        var(--cn-phone-header-shift-x, 0px),
        var(--cn-mobile-logo-y-fix, 0px),
        0
      ) !important;

    backface-visibility: hidden !important;
    will-change: transform !important;
  }

  .cn-mobile-header.header--mobile-center .header__heading-logo-wrapper,
  .cn-mobile-header.header--mobile-center .header__heading-logo {
    display: block !important;
    vertical-align: middle !important;
  }
}

/* =========================================================
   NON-MEMBER HEADER LINE – GRAU MIT SEITLICHEM FADE
   - gleiche Geometrie wie die Membership-Linie
   - Desktop/Tablet: maximal 1200px
   - Mobil: 16px Abstand zu beiden Seiten
   - Membership-Farben überschreiben diese neutralen Standardwerte
========================================================= */

.header-wrapper {
  --cn-header-tier-line-rgb: 255, 255, 255;
  --cn-header-tier-glow-rgb: 255, 255, 255;
}

.shopify-section-header .header-wrapper,
.section-header .header-wrapper,
sticky-header.header-wrapper,
.header-wrapper {
  border-bottom-color: transparent !important;

  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(var(--color-foreground), 0.08) !important;
}

.header-wrapper::after,
sticky-header.header-wrapper::after,
.shopify-section-header .header-wrapper::after,
.section-header .header-wrapper::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: -1px !important;
  z-index: 0 !important;

  width: min(1200px, calc(100% - 40px)) !important;
  height: 1px !important;

  pointer-events: none !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(var(--cn-header-tier-line-rgb), 0.08) 4%,
      rgba(var(--cn-header-tier-line-rgb), 0.34) 14%,
      rgba(var(--cn-header-tier-line-rgb), 0.58) 50%,
      rgba(var(--cn-header-tier-line-rgb), 0.34) 86%,
      rgba(var(--cn-header-tier-line-rgb), 0.08) 96%,
      transparent 100%
    ) !important;

  box-shadow:
    0 1px 4px rgba(var(--cn-header-tier-glow-rgb), 0.10),
    0 2px 8px rgba(var(--cn-header-tier-glow-rgb), 0.05) !important;

  transform: translateX(-50%) !important;
}

/*
  Bei aktiver Plus-/Pro-/Prime-Mitgliedschaft bleiben die bereits
  vorhandenen, spezifischeren Tier-Farben und stärkeren Glows aktiv.
*/

@media screen and (max-width: 749px) {
  .header-wrapper::after,
  sticky-header.header-wrapper::after,
}

/*
  Beim geöffneten Drawer bleibt auch die neutrale Non-Member-Linie
  scharf und liegt über dem Drawer-Blur. Search-Fenster bleiben
  aufgrund ihrer höheren Z-Index-Werte weiterhin darüber.
*/
@media screen and (max-width: 989px) {
  @supports selector(:has(*)) {
    .header-wrapper:has(header-drawer details[open])::after,
    .header-wrapper:has(details.menu-drawer-container[open])::after {
      bottom: 0 !important;
      z-index: 2147483050 !important;

      opacity: 1 !important;
      filter: none !important;
      -webkit-filter: none !important;
    }
  }
}