.ds-badge {
  /* domyślna skórka = Desktop · Light */
  --ds-badge-bg: transparent;
  --ds-badge-border: #888;
  --ds-badge-content: #888;
  --ds-badge-width: 210px;
  --ds-badge-gap: 17.43px;      /* Apple: logo 27.574 + 17.43 = 45px */

  display: inline-flex;         /* bez !important — patrz komentarz wyżej */
  align-items: center !important;
  gap: var(--ds-badge-gap) !important;
  position: relative !important;
  box-sizing: border-box !important;
  flex: none !important;
  width: var(--ds-badge-width) !important;
  max-width: 100%;
  height: 60px !important;
  padding: 0 16px !important;
  border: 1.5px solid var(--ds-badge-border) !important;
  border-radius: 10px !important;
  background: var(--ds-badge-bg) !important;
  color: var(--ds-badge-content) !important;
  overflow: hidden !important;
  opacity: 1 !important;        /* reset legacy .footer-2026__badge img{opacity:.5} itp. */
  filter: none !important;      /* reset legacy hover-filter chainów */
  vertical-align: top;
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.ds-badge--google { --ds-badge-gap: 13.13px; } /* 31.871 + 13.13 = 45px */

/* ---- Mode: Dark (na Desktopie) ---- */
.ds-badge--dark {
  --ds-badge-bg: #222;
  --ds-badge-border: transparent;
  --ds-badge-content: #F7F7F3;
}

/* ---- Mode: White — biały chip, bez ramki, ciemny content. Niezależny od device/dark
   (!important na custom-props → wygrywa ze wszystkimi skórkami). Chip zostaje biały,
   a hover/active tylko przyciemnia content #222 → #000 (Figma: biały chip = Mobile·Dark,
   którego stan to content-active #000). */
.ds-badge--white {
  --ds-badge-bg: #FFF !important;
  --ds-badge-border: transparent !important;
  --ds-badge-content: #222 !important;
}
@media (hover: hover) and (pointer: fine) {
  .ds-badge--white:hover,
  a:hover > .ds-badge--white { --ds-badge-content: #000 !important; }
}
.ds-badge--white:active,
a:active > .ds-badge--white { --ds-badge-content: #000 !important; }

/* ---- Device: Mobile (wymuszony, niezależnie od szerokości) ---- */
.ds-badge--mobile {
  --ds-badge-width: auto;       /* hug */
  --ds-badge-bg: #222;          /* Mobile·Light */
  --ds-badge-border: transparent;
  --ds-badge-content: #F7F7F3;
  --ds-badge-gap: 12px;
}
.ds-badge--mobile.ds-badge--google { --ds-badge-gap: 13.13px; }
.ds-badge--mobile.ds-badge--dark {
  --ds-badge-bg: #FFF;          /* Mobile·Dark → biały chip */
  --ds-badge-content: #222;
}

/* ---- Device: auto → Mobile poniżej 768px (chyba że wymuszono --desktop/--mobile) ---- */
@media (max-width: 768px) {
  .ds-badge:not(.ds-badge--desktop):not(.ds-badge--mobile) {
    --ds-badge-width: auto;
    --ds-badge-bg: #222;
    --ds-badge-border: transparent;
    --ds-badge-content: #F7F7F3;
    --ds-badge-gap: 12px;
  }
  .ds-badge--google:not(.ds-badge--desktop):not(.ds-badge--mobile) { --ds-badge-gap: 13.13px; }
  .ds-badge--dark:not(.ds-badge--desktop):not(.ds-badge--mobile) {
    --ds-badge-bg: #FFF;
    --ds-badge-content: #222;
  }
}

/* ---- Hover (tylko Desktop) — wymuszony --desktop zawsze; auto tylko >768px ---- */
@media (hover: hover) and (pointer: fine) {
  /* Desktop·Light hover → zielony outline */
  .ds-badge--desktop:not(.ds-badge--dark):hover,
  a:hover > .ds-badge--desktop:not(.ds-badge--dark) {
    --ds-badge-bg: transparent;
    --ds-badge-border: #22E243;
    --ds-badge-content: #22E243;
  }
  /* Desktop·Dark hover → czarny chip, biały content */
  .ds-badge--desktop.ds-badge--dark:hover,
  a:hover > .ds-badge--desktop.ds-badge--dark {
    --ds-badge-bg: #000;
    --ds-badge-border: transparent;
    --ds-badge-content: #FFF;
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  .ds-badge:not(.ds-badge--desktop):not(.ds-badge--mobile):not(.ds-badge--dark):hover,
  a:hover > .ds-badge:not(.ds-badge--desktop):not(.ds-badge--mobile):not(.ds-badge--dark) {
    --ds-badge-bg: transparent;
    --ds-badge-border: #22E243;
    --ds-badge-content: #22E243;
  }
  .ds-badge--dark:not(.ds-badge--desktop):not(.ds-badge--mobile):hover,
  a:hover > .ds-badge--dark:not(.ds-badge--desktop):not(.ds-badge--mobile) {
    --ds-badge-bg: #000;
    --ds-badge-border: transparent;
    --ds-badge-content: #FFF;
  }
}

/* ---- Active (tylko Mobile) ---- */
.ds-badge--mobile:not(.ds-badge--dark):active,
a:active > .ds-badge--mobile:not(.ds-badge--dark) {
  --ds-badge-bg: #000;          /* Mobile·Light active */
  --ds-badge-content: #FFF;
}
.ds-badge--mobile.ds-badge--dark:active,
a:active > .ds-badge--mobile.ds-badge--dark {
  --ds-badge-bg: #FFF;          /* Mobile·Dark active */
  --ds-badge-content: #000;
}
@media (max-width: 768px) {
  .ds-badge:not(.ds-badge--desktop):not(.ds-badge--dark):active,
  a:active > .ds-badge:not(.ds-badge--desktop):not(.ds-badge--dark) {
    --ds-badge-bg: #000;
    --ds-badge-content: #FFF;
  }
  .ds-badge--dark:not(.ds-badge--desktop):not(.ds-badge--mobile):active,
  a:active > .ds-badge--dark:not(.ds-badge--desktop):not(.ds-badge--mobile) {
    --ds-badge-bg: #FFF;
    --ds-badge-content: #000;
  }
}

.ds-badge .ds-badge__logo {
  flex: none !important;
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.ds-badge.ds-badge--apple .ds-badge__logo {
  width: 27.574px !important;
  height: 33.89px !important;
  -webkit-mask-image: url('../images/global/designsystem/app-store-logo.svg');
          mask-image: url('../images/global/designsystem/app-store-logo.svg');
}
.ds-badge.ds-badge--google .ds-badge__logo {
  width: 31.871px !important;
  height: 35.838px !important;
  -webkit-mask-image: url('../images/global/designsystem/google-play-logo.svg');
          mask-image: url('../images/global/designsystem/google-play-logo.svg');
}

.ds-badge .ds-badge__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  min-width: 0;
  overflow: hidden;
}
.ds-badge.ds-badge--google .ds-badge__content { gap: 3.5px !important; }

.ds-badge .ds-badge__tagline {
  font-family: Inter, 'Nunito', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 14px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: inherit !important;
  white-space: nowrap !important;
}
.ds-badge.ds-badge--google .ds-badge__tagline {
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 11px !important;
  letter-spacing: 0.8px !important;
}

/* Wordmark ("App Store" / "Google Play") — wektor przez maskę, nie tłumaczy się */
.ds-badge .ds-badge__label {
  display: block;
  flex: none !important;
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left center;
          mask-position: left center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.ds-badge.ds-badge--apple .ds-badge__label {
  width: 116.823px !important;
  height: 24.311px !important;
  -webkit-mask-image: url('../images/global/designsystem/app-store-label.svg');
          mask-image: url('../images/global/designsystem/app-store-label.svg');
}
.ds-badge.ds-badge--google .ds-badge__label {
  width: 130.444px !important;
  height: 25.547px !important;
  -webkit-mask-image: url('../images/global/designsystem/google-play-label.svg');
          mask-image: url('../images/global/designsystem/google-play-label.svg');
}