/* ==========================================================================
   Strandkörbe Amrum – Mini-Warenkorb
   Hängt an den Klassen, die mini-cart.js setzt, nicht an ATOMION-Klassen.
   ========================================================================== */

/* Nur für Screenreader – trägt die Ansage bei AJAX-Änderungen */
.skam-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Anklickbare Fläche ------------------------------------------------ */

/* 44 x 44 Pixel Mindestgröße. Ein 24px-Symbol allein reicht nicht –
   das ist einer der häufigsten Befunde bei Shop-Kopfbereichen.

   position: relative + !important, weil ATOMION für .header-cart-link
   innerhalb von .desktop-cart eine eigene, spezifischere Regel mitbringt
   (vermutlich position: static). Ohne die Absicherung gewinnt die
   Theme-Regel über die Spezifität, unabhängig von der Ladereihenfolge –
   das Badge sucht sich dann den nächsten positionierten Vorfahren weiter
   oben im DOM (z. B. den Sticky-Header) und landet dort in der Ecke. */
.cart-item .skam-cart-link,
.skam-cart-link {
  position: relative !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.skam-cart-link:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius);
}

/* Im dunklen Kopfbereich braucht der Fokusring die helle Variante */
.site-header .skam-cart-link:focus-visible,
.header-main .skam-cart-link:focus-visible {
  outline-color: #F5F6F1;
}

/* --- Zähler ------------------------------------------------------------ */

/* Gleiche Absicherung wie oben: absolute + !important, damit das Badge
   sich garantiert am 44x44-Klickbereich orientiert und nicht an einem
   entfernten Vorfahren, falls die relative-Positionierung des Elternteils
   durch das Theme überschrieben würde.

   top/right ebenfalls mit !important: ATOMION bringt für die Klasse
   .cart-contents-count offenbar eigene top/right-Werte mit, die sonst
   trotz korrekter position weiterhin gewinnen.

   right ist bewusst NICHT hier gesetzt, sondern weiter unten getrennt
   für Desktop- und Mobile-Container: Das Icon sitzt in beiden Kontexten
   an unterschiedlicher Stelle, ein einzelner Wert passt nie für beide. */
.skam-cart-link > .skam-cart-count {
  position: absolute !important;
  top: 20px !important;

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

  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  box-sizing: border-box;

  background: var(--cta-bg);
  color: var(--cta-text);          /* 4,89:1 */
  border-radius: var(--radius-pill);

  /* Trennt die Plakette vom Symbol darunter, egal wie voll der
     Kopfbereich ist. Farbe folgt dem Header, nicht der Seite. */
  border: 2px solid var(--header-solid);

  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Desktop- und Mobile-Cart sitzen an unterschiedlichen Stellen im
   Header/Menü, deshalb getrennte right-Werte. Klassennamen nach dem
   Muster von .desktop-cart – bei Abweichung hier anpassen. */
.desktop-cart .skam-cart-link > .skam-cart-count {
  right: 24px !important;
}

.mobile-cart .skam-cart-link > .skam-cart-count {
  right: 60px !important;
}

/* Leerer Warenkorb: keine Plakette. Der Unterschied liegt damit in der
   An- oder Abwesenheit einer Form, nicht in einer Farbe – 1.4.1. */
.skam-cart-count.is-empty {
  display: none;
}

/* Solange das Skript noch nicht gelaufen ist, bleibt der rohe Zähler
   unsichtbar. Verhindert, dass beim Laden kurz eine ungestylte "0" blitzt. */
.cart-contents-count:not(.skam-cart-count),
.atomion-cart-count:not(.skam-cart-count),
.mini-cart-count:not(.skam-cart-count) {
  visibility: hidden;
}

/* --- Falls der Kopfbereich hell ist ------------------------------------ */

.header-light .skam-cart-count,
.is-transparent .skam-cart-count {
  border-color: var(--surface);
}

/* --- Dreistellige Zahlen ----------------------------------------------- */

/* Ab 100 wächst die Plakette sonst über das Symbol hinaus. */
.skam-cart-count {
  max-width: 34px;
  overflow: hidden;
}