/* SmartFit Online-Sizing — Storefront-Overlay-Styles (store.movetoshop.de).
 * Platzhalter-Button (Click-to-Load) + Banner-Templates (CI).
 * PDP-Regeln (Task 12); Category-Sizing (Task 18) am Dateiende.
 */
/* Platzierung: oben RECHTS im Rahmenform-Block (.mts-fsw, TASK-451).
 * Bewusst absolut: .mts-fsw zentriert Kopf + Chips (text-align/justify-content
 * center). Ein Flex-/Flow-Geschwister wuerde diese Zentrierung verschieben —
 * Vorgabe ist aber "Rahmenform bleibt zentriert, nichts anderes bewegt sich".
 * Absolut = wir nehmen keinen Platz im Flow ein. */
.mts-fsw { position: relative; }
.mts-fsw > .mts-sf-section { position: absolute; top: 0; right: 0; margin: 0; z-index: 2; }

/* Ohne Rahmenform-Switcher (Singleton-Modell): im Flow, ueber den Groessen,
 * ZENTRIERT (Nutzer 2026-07-17: bei nur einer Rahmenform soll das Widget mittig
 * stehen, nicht rechtsbuendig). Mit Switcher bleibt es rechts oben
 * (.mts-fsw > .mts-sf-section, absolut). */
/* Die Platzhalter-Reserve teilt sich die Aussenabstaende mit der echten
   Sektion — BEWUSST in derselben Regel, damit beide nicht auseinanderlaufen.
   Sonst kollabiert der Reserve-Rand anders als der der Sektion gegen
   .pd-variants-container (margin-top 6px) und der Tausch versetzt das Layout
   um die Differenz (gemessen: 6 px). */
.mts-sf-section--standalone,
.mts-sf-reserve { margin: 0 0 .9rem; text-align: center; }

.mts-sf-btn {
  display: inline-flex; align-items: stretch; width: auto; padding: 0;
  /* Kein Rahmen (Nutzer-Entscheid 2026-07-17, Variante A): der fruehere
   * 1px-solid-#fff-Rahmen war auf weissem Grund unsichtbar und erzeugte auf
   * jedem anderen Hintergrund (Kategorie-Karten, Bilder) einen sinnlosen
   * weissen Ring. Optik auf Weiss unveraendert. */
  border: none; border-radius: 6px;
  background: var(--mts-accent, #5f8175); color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  cursor: pointer; overflow: hidden; text-align: left;
}
.mts-sf-btn[disabled] { opacity: .6; cursor: default; }
/* Der Platzhalter ist optisch identisch — er wird beim Klick 1:1 durch den
 * SmartFit-Button ersetzt und darf keinen sichtbaren Sprung erzeugen. */
.mts-sf-placeholder { background: var(--mts-accent, #5f8175); color: #fff; }

/* Einschwingphase (Teil A, 2026-07-17): bis das finale Label feststeht
 * (activity-Ergebnis, select oder Timeout — smartfit.js settle()), traegt der
 * PLATZHALTER den Zustand. Der echte SmartFit-Button — und damit auch sein
 * Shadow-Ladebalken (oz-loading-wrapper UM den Button) — bleibt solange
 * unsichtbar. Bewusst nur der Button, NICHT sf-product-sizing selbst: unter
 * dem Widget-Element haengt auch der Modal-/iframe-Aufbau, der weiterlaufen
 * und im Klick-Pfad sichtbar oeffnen koennen muss. */
.mts-sf-section.is-settling sf-product-sizing > button,
.mts-sf-section.is-settling sf-product-sizing .mts-sf-btn { display: none; }

/* ...den Button zu verstecken reicht aber NICHT: das Host-Element behaelt
 * seinen Shadow-Ladebalken (live gemessen 64x24) und stand als inline-block
 * NEBEN dem Platzhalter in derselben Zeile. text-align:center zentrierte dann
 * die GANZE Zeile (Platzhalter 148px + Widget 64px) -> der sichtbare Button sass
 * ~32px zu weit links und sprang beim settle() in die Mitte zurueck
 * (Nutzer-Report + Messung 2026-07-20). Deshalb das Widget solange ganz aus dem
 * Fluss nehmen; dann bestimmt allein der Platzhalter die Position.
 * Bewusst position:absolute und NICHT display:none: das Element bleibt
 * gerendert, der Modal-/iframe-Aufbau laeuft weiter und openModal() kann
 * seinen (versteckten) Button klicken. */
.mts-sf-section { position: relative; }
.mts-sf-section.is-settling > sf-product-sizing {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
}
/* Platzhalter UND echter Button muessen dieselbe Hoehe belegen, sonst versetzt
 * settle() (Platzhalter raus, Widget zurueck in den Fluss) das halbe Angebot.
 *
 * Die Mindesthoehe gehoert auf den BUTTON, nicht auf den Host. Beide tragen die
 * Klasse .mts-sf-btn: unser Platzhalter (smartfit.js, placeholder.className) und
 * der Button, den SmartFit aus unserem <template> klont (btnMarkup) — der landet
 * im LIGHT-DOM, nicht im Shadow-DOM. Belege dafuer, falls es wieder jemand
 * anders vermutet: die Regel `.mts-sf-section.is-settling sf-product-sizing
 * .mts-sf-btn` weiter oben greift nachweislich (sie erzeugt den is-settling-
 * Zustand), und whenButtonReady() findet den Button per
 * widget.querySelector('button, a') — beides waere im Shadow-DOM unmoeglich.
 *
 * HISTORIE (2026-07-21, damit der Fehler nicht wiederkommt): Hier stand kurzzeitig
 * `min-height` auf dem HOST <sf-product-sizing>. Das hielt zwar die Sektionshoehe
 * konstant, blies aber den Host ueber die Naturhoehe des sichtbaren Buttons hinaus
 * — die Differenz landete als TOTRAUM unter dem Button und addierte sich zum
 * margin-top des Geometrie-Links. Ergebnis: Button wirkte flacher, Abstand zur
 * "Rahmengeometrie" groesser (exakter Nutzer-Report). Die damalige Begruendung
 * ("Button liegt im Shadow-DOM") war falsch, und die 20px-Messung, auf der sie
 * beruhte, wurde WAEHREND is-settling gemacht — also mit per CSS ausgeblendetem
 * Button. Kein gueltiger Kalibrierwert.
 *
 * Gilt bewusst fuer PDP UND Kategorie-Listing (dort dieselbe Platzhalter-Klasse),
 * sonst tritt derselbe Sprung pro Produktkarte auf. */
.mts-sf-btn { min-height: 32px; }

/* Den Host normalisieren statt auf SmartFits Fremd-CSS zu vertrauen: dort kommt
 * das inline-block her, auf dem die Ausrichtung stillschweigend beruht. Analog
 * zu `.mts-sf-geo sf-geometry-display` weiter unten. Ein Bundle-Update von
 * Radlabor kippt die Annahme sonst lautlos. */
.mts-sf-section > sf-product-sizing { display: inline-flex; vertical-align: top; }

.mts-sf-btn__icon {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .3rem .45rem; background: #1d1d1f; flex: 0 0 auto;
  color: #fff;            /* die SVG-Pfade zeichnen mit fill="currentColor" */
}
/* Seitenverhaeltnis des Icons: 17.068 x 25.683 (~0.665) — nicht verzerren. */
.mts-sf-btn__icon svg { display: block; width: 12px; height: 18px; }
.mts-sf-btn__label { display: inline-flex; align-items: center; padding: .38rem .6rem; }

/* Ladezustand: der Platzhalter BLEIBT waehrend des Ladens stehen (sonst klafft
 * bis status OK eine Luecke) und zeigt einen Spinner statt des Icons. */
.mts-sf-btn.is-loading { cursor: progress; }
.mts-sf-btn.is-loading .mts-sf-btn__icon svg { display: none; }
.mts-sf-btn.is-loading .mts-sf-btn__icon::after {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: mts-sf-spin .7s linear infinite;
}
@keyframes mts-sf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mts-sf-btn.is-loading .mts-sf-btn__icon::after { animation-duration: 2s; }
}

/* Schmale Viewports: absolute Platzierung wuerde die Chips ueberlagern. */
@media (max-width: 575.98px) {
  .mts-fsw > .mts-sf-section {
    /* relative statt static: im Layout identisch (kein Offset gesetzt), aber es
     * bleibt der Containing Block fuer das im Einschwingzustand absolut
     * gesetzte sf-product-sizing. Mit static haenge das Widget am naechsten
     * positionierten Vorfahren und truege seinen Ladebalken quer ueber die PDP. */
    position: relative; margin: .6rem 0 0; text-align: right;
  }
}

.mts-sf-hint { margin: .4rem 0 0; font-size: .78rem; line-height: 1.35; opacity: .7; }

/* ---- Geometrie-Display (TASK-457.10) -----------------------------------
 * Bewusst KEIN zweiter Button: der Groessen-Button ist der Call-to-Action,
 * direkt darunter steht der Warenkorb. Ein zweiter gefuellter Button wuerde
 * mit beiden konkurrieren (Vorgabe Bjoern 09.07.: "dezenter Link, nicht vom
 * Warenkorb weg"). Deshalb reiner Textlink in Akzentfarbe.
 * Der Link erscheint an ZWEI Stellen mit identischer Optik: als unser
 * Platzhalter (vor dem Klick, ohne SmartFit-Kontakt) und als geklonter
 * Template-Button IM sf-geometry-display — der Wechsel darf nicht sichtbar
 * springen. */
/* min-height: derselbe Hoehen-Guard wie beim Groessen-Button weiter oben, nur
 * fuer den Geometrie-Block — und aus demselben Grund noetig.
 *
 * Beim settle() des Geo-Blocks faellt der Platzhalter-Link weg und das echte
 * <sf-geometry-display> kommt aus position:absolute zurueck in den Fluss. Live
 * gemessen 2026-07-21: Platzhalter-Link 15,59 px, echter Host 15,0 px, Wrapper
 * dadurch 16,59 -> 15,0 px. Der Link selbst bleibt dabei stehen (er sitzt oben
 * im Wrapper), aber ALLES DARUNTER — Farb-/Groessenwahl und der ganze Rest des
 * Angebots — verschiebt sich um die Differenz. Exakt der Nutzer-Report:
 * "Rahmengeometrie veraendert sich nicht, aber der Block darunter rutscht".
 *
 * Der Guard sitzt bewusst auf dem WRAPPER, nicht auf den beiden Innenelementen:
 * Platzhalter-Link und Fremd-Host sind verschiedene Elementtypen mit eigenem
 * Box-Verhalten, der Wrapper ist der einzige gemeinsame Nenner, den wir voll
 * kontrollieren. 18px liegt knapp ueber dem hoeheren der beiden Zustaende
 * (16,59) — der Aufschlag ist unsichtbar, die Hoehe dafuer invariant.
 *
 * Nebeneffekt, der die Reserve mit repariert: erst wenn Button UND Geo-Block
 * ueber den Settle hinweg konstant sind, ist die Sektionshoehe invariant — und
 * damit ist auch der gelernte Reservewert (mts-sf-skel2) immer derselbe, egal
 * in welchem Zustand gemessen wurde. Gegengeprueft: Versatz darunter 0px statt
 * -1,59px. */
.mts-sf-geo { margin: .45rem 0 0; line-height: 1; position: relative; min-height: 18px; }
/* Einschwingphase des Geometrie-Links — exakt dieselbe Falle wie oben beim
 * Groessenberater: solange unser Platzhalter UND das aufgebaute
 * sf-geometry-display beide im Fluss stehen, zentriert text-align:center die
 * ganze Zeile und der sichtbare Link sitzt zu weit links. Die Klasse setzt
 * smartfit.js und nimmt sie zurueck, sobald der echte Button da ist. */
.mts-sf-geo.is-settling > sf-geometry-display {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
}
.mts-sf-geolink {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: 0; border: none; background: none;
  color: var(--mts-accent, #5f8175);
  font-size: 12px; font-weight: 600; line-height: 1.3;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.mts-sf-geolink:hover { text-decoration-thickness: 2px; }
.mts-sf-geolink[disabled] { opacity: .6; cursor: progress; }
/* Waehrend des Ladens: dezenter Punkt-Spinner statt Layout-Sprung. */
.mts-sf-geolink.is-loading::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .18); border-top-color: currentColor;
  animation: mts-sf-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mts-sf-geolink.is-loading::after { animation-duration: 2s; }
}
/* sf-geometry-display ist per Shadow-CSS inline-block/100% breit — ohne das
 * hier dehnt sich der Link im standalone-Fall ueber die volle Spaltenbreite
 * und die Unterstreichung laeuft ins Leere. */
.mts-sf-geo sf-geometry-display { display: inline-block; width: auto; height: auto; }

/* ---- Category-Sizing (Task 18 / TASK-457.09) ----------------------------
 * Button-Bar ueberm Listing + Banner auf der Karte. Der Banner-Host
 * (.mts-pcard__media bzw. .art-picture-block) ist position:relative
 * (mts-theme-global.css:363-372). Position OBEN RECHTS (Vorgabe 2026-07-17);
 * oben links sitzt bereits das Sale-Badge (.mts-pcard__badge, top/left 14px)
 * — 14px-Abstand hier gespiegelt. */
.mts-sf-catbar { margin: 0 0 1rem; }
.mts-sf-catbar .mts-sf-btn { width: auto; }
/* Der cache-first gerenderte Badge-Host (.mts-sf-cardbadge-host, ohne
 * SmartFit-Kontakt) sitzt an DERSELBEN Position wie das Live-Banner. */
.artlist .art .mts-pcard__media sf-category-sizing-banner,
.artlist .art .art-picture-block sf-category-sizing-banner,
.artlist .art .mts-pcard__media .mts-sf-cardbadge-host,
.artlist .art .art-picture-block .mts-sf-cardbadge-host {
  position: absolute; top: 14px; right: 14px; left: auto; bottom: auto; z-index: 3;
  display: block; max-width: calc(60% - 14px); text-align: right;
}

/* Custom-Slot-Templates (Light-DOM, von unserem CSS direkt stylebar; laut
 * SmartFit-Doku nur Nachfahren-Selektoren, keine Kind-Kombinatoren).
 * Look = Home-Pill des Sale-Badges (mts-theme-global.css:6581-6586),
 * Groessen-Items mit Haekchen (lieferbar) / Kreuz (ausverkauft) als
 * Inline-SVG — keine Emojis (Hard-Rule). */
.artlist .art .mts-sf-cardbadge {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end;
  background: #fff; color: var(--mts-text, #1d1d1f);
  padding: 6px 11px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08); line-height: 1;
}
/* KEIN text-transform: uppercase — das macht aus "Größe" browserkonform
 * "GRÖSSE" (ß -> SS), Nutzer will "Deine Größe" (2026-07-17). */
.artlist .art .mts-sf-cardbadge__label {
  font-size: 11px; font-weight: 600;
  color: var(--mts-accent, #5f8175);
}
/* Die Groessen-Items stecken im Custom-Element oz-banner-custom-frame-items
 * (SmartFit ersetzt unseren <slot name="items"/> dadurch) — das braucht
 * selbst flex + gap, sonst kleben mehrere Groessen aneinander
 * ("58cm[Haken]60cm[Haken]", Nutzer-Screenshot 2026-07-17). */
.artlist .art .mts-sf-cardbadge oz-banner-custom-frame-items {
  display: inline-flex; align-items: center; gap: 9px;
}
.artlist .art .mts-sf-cardsize {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 700;
}
/* No-Fit-Pille: dezent grau, Kreuz-Icon in gleicher Tonlage. */
.artlist .art .mts-sf-cardbadge--nofit { gap: 5px; }
.artlist .art .mts-sf-cardbadge--nofit .mts-sf-cardbadge__label { color: #6b7280; }
.artlist .art .mts-sf-cardbadge--nofit svg { color: #9ca3af; display: block; }
.artlist .art .mts-sf-cardsize--in svg { color: var(--mts-accent, #5f8175); }
.artlist .art .mts-sf-cardsize--out { color: #9ca3af; text-decoration: line-through; }
.artlist .art .mts-sf-cardsize--out svg { color: #9ca3af; }

/* Optik nur fuer den Dev-Stub — das echte v3-Banner bringt sein eigenes UI. */
sf-category-sizing-banner[data-sf-stub] {
  padding: .3rem .6rem; border-radius: 6px;
  background: rgba(255, 255, 255, .92); color: var(--mts-accent, #5f8175);
  font-size: .72rem; font-weight: 600; line-height: 1.3;
}

/* Platzhalter gegen Layout-Shift (CLS). Haelt exakt den Platz frei, den die
   SmartFit-Sektion beim letzten Aufruf auf diesem Geraet gebraucht hat — die
   Hoehe setzt smartfit.js inline (reserveSpace). Unsichtbar, nicht anklickbar,
   nicht im Accessibility-Tree (aria-hidden am Element). Ohne gelernte Hoehe
   wird das Element gar nicht erst erzeugt. */
.mts-sf-reserve { pointer-events: none; }