.wishlist-header-icon {
  display: inline-flex;
}

/* Defensiv: falls das Theme normalerweise eine Trennlinie zwischen
   benachbarten Header-Icons einfügt (border-left / Pseudo-Element),
   hier für unser eingefügtes Icon zurücksetzen. */
.wishlist-header-icon,
.wishlist-header-icon .header__icon--wishlist {
  border: none !important;
}

/* Der von Shopify automatisch erzeugte Block-Wrapper (.shopify-app-block) trägt
   im Theme eine Trennlinie (border-left) zur optischen Abgrenzung mehrerer
   App-Blocks im Icon-Bereich — für unseren Block zurücksetzen. Die ID enthält
   immer den festen Block-Key "wishlist_app_header_wishlist_icon", daher per
   Teilstring-Selektor statt exakter (bei jedem Deploy wechselnder) ID. */
div[id*="wishlist_app_header_wishlist_icon"].shopify-app-block {
  border: none !important;
  overflow: visible !important;
}

.wishlist-header-icon .header__icon--wishlist::before,
.wishlist-header-icon .header__icon--wishlist::after {
  content: none !important;
}

.header__icon--wishlist {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.header__icon--wishlist .svg-wrapper svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor;
  transition: fill 0.15s ease, stroke 0.15s ease;
}

/* Sobald der Kunde mind. 1 Artikel auf der Wishlist hat, Herz rot füllen */
.header__icon--wishlist.has-items .svg-wrapper svg {
  fill: #e0263b;
  stroke: #e0263b;
}

.wishlist-count-badge {
  position: absolute;
  top: calc(50% + 3px);
  left: calc(50% + 3px);
  min-width: 16px;
  height: 16px !important;
  padding: 0 4px;
  border-radius: 999px;
  background: #e0263b;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 600;
  pointer-events: none;
}

.wishlist-count-badge[hidden] {
  display: none;
}