/* ==========================================================
   BT Swatches CSS (SSOT)
   Zweck:
   - Swatches Styling aus WP Customizer in bt-core auslagern
   - Customizer bleibt leer -> stabile Messlatte + weniger Render-Blocking
   PATCH 2026-02-05: Migration aus Customizer
   ========================================================== */

#swatches {
  scroll-margin-top: 70px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 2%;
}

/* Tablet */
@media (max-width: 1024px) {
  #swatches {
    scroll-margin-top: 100px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  #swatches {
    scroll-margin-top: 85px;
  }
}

/* Container für die Swatches */
.bt-more-options {
  margin: 24px 0;
  overflow: visible;
}

/* Überschrift "Weitere Optionen" */
.bt-more-options__title {
  margin: 0 0 10px 0;
  font-size: 1.05em;
}

/* Wrapper für alle Swatch-Bilder */
.bt-more-options__row {
  display: flex;
  gap: 10px;
  padding: 10px 22px 8px 5px;
  flex-wrap: wrap;

  /* flüssiges Scrollen auf iOS */
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================
   Swatches: vertikaler Scrollbereich
   Desktop only – Aktivierung erst durch JavaScript
   ========================================================== */

@media (min-width: 769px) {
  .bt-more-options.bt-swatches--scroll-ready .bt-more-options__row {
    max-height: 460px;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* ==========================================================
   Swatches: Vertikale Scrollleiste dauerhaft kenntlich machen
   Zweck:
   - Sichtbar zeigen, dass weitere Swatches unterhalb vorhanden sind
   - Abstand zwischen Pool-Karten und Scrollleiste schaffen
   - Scrollmöglichkeit auch ohne aktive Mausbewegung erkennbar halten
   ========================================================== */

/* Native Scrollleiste im Swatch-Bereich vollständig ausblenden.
   Die sichtbare Scrollanzeige übernimmt ausschließlich unser
   eigener JS-gesteuerter Indikator. */
.bt-more-options__row {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bt-more-options__row::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}


/* ==========================================================
   Swatches: eigener vertikaler Scrollindikator
   Zweck:
   - Native Scrollleiste bleibt vollständig ausgeblendet
   - Eigener Indikator erscheint nur bei echtem Overflow
   - Track und Thumb bleiben unabhängig vom Betriebssystem sichtbar
   - Deutliche Breite signalisiert klar: Hier kann gescrollt werden
   ========================================================== */

/* Bezugssystem für den absolut positionierten Indikator */
.bt-more-options {
  position: relative;
}

/* Standardmäßig verborgen; JavaScript aktiviert ihn bei Overflow */
.bt-swatches-scroll-indicator {
  position: absolute;
  right: 5px;
  z-index: 4;

  display: none;
  width: 14px;

  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
}

/* Nur bei echtem vertikalem Overflow sichtbar */
.bt-swatches--custom-scroll-indicator
  .bt-swatches-scroll-indicator {
  display: block;
  opacity: 1;
}

/* Sichtbare äußere Scrollschiene */
.bt-swatches-scroll-indicator__track {
  position: absolute;
  top: 18px;
  right: 0;
  bottom: 18px;
  left: 0;

  display: block;

  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.065);
}

/* Beweglicher dunkler Scrollgriff */
.bt-swatches-scroll-indicator__thumb {
  position: absolute;
  top: 2px;
  left: 2px;

  display: block;
  width: calc(100% - 4px);
  min-height: 34px;

  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);

  will-change: transform;
}

/* Am Ende etwas ruhiger darstellen */
.bt-swatches--at-scroll-end
  .bt-swatches-scroll-indicator__thumb {
  background: rgba(0, 0, 0, 0.30);
}

/* ==========================================================
   Swatches-Scrollindikator: Richtungsanzeige
   Zweck:
   - Zeigt sofort, in welche Richtung weiterer Inhalt vorhanden ist
   - Am oberen beziehungsweise unteren Anschlag wird der Pfeil
     deutlich abgeschwächt
   ========================================================== */

.bt-swatches-scroll-indicator::before,
.bt-swatches-scroll-indicator::after {
  position: absolute;
  left: 50%;

  display: block;
  width: 0;
  height: 0;

  content: "";
  transform: translateX(-50%);
  opacity: 0.78;
}

/* Pfeil nach oben */
.bt-swatches-scroll-indicator::before {
  top: 3px;

  border-right: 5px solid transparent;
  border-bottom: 7px solid rgba(0, 0, 0, 0.62);
  border-left: 5px solid transparent;
}

/* Pfeil nach unten */
.bt-swatches-scroll-indicator::after {
  bottom: 3px;

  border-top: 7px solid rgba(0, 0, 0, 0.62);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

/* Ganz oben: Nach-oben-Pfeil ist inaktiv */
.bt-swatches--at-scroll-start
  .bt-swatches-scroll-indicator::before {
  opacity: 0.16;
}

/* Ganz unten: Nach-unten-Pfeil ist inaktiv */
.bt-swatches--at-scroll-end
  .bt-swatches-scroll-indicator::after {
  opacity: 0.16;
}


/* Einzelnes Swatch-Element */
.bt-more-options__item {
  display: block;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
}

/* Swatch-Bild */
.bt-more-options__img {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Hover-Effekt (dezent) (deaktiviert + - mauszittern)*/
/* .bt-more-options__item:hover .bt-more-options__img {
  transform: translateY(-2px);
  transition: transform 0.15s ease;
} */

/* Hover-Effekt entschärft
   PATCH 2026-04-26 – Mauszittern / Main-Thread-Hänger vermeiden
   Warum:
   - Transform im scrollbaren Swatch-Container kann zusammen mit Tooltips Hover-Zustände destabilisieren.
   - Die Hitbox bleibt jetzt komplett ruhig; der Hover bleibt nur optisch über Border/Opacity wahrnehmbar. */
.bt-more-options__item:hover .bt-more-options__img {
  opacity: 0.9;
}

/* Aktives Produkt markieren */
.bt-more-options__item.is-current .bt-more-options__img {
  outline: 2px solid rgba(0, 0, 0, 0.35);
  outline-offset: 2px;
  border-radius: 12px;
  opacity: 0.75;
}

/* Aktives Produkt nicht klickbar */
.bt-more-options__item.is-current {
  pointer-events: none;
  cursor: default;
}

/* Pool-Überschrift + Abstand */
.bt-more-options__pooltitle {
  flex-basis: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  margin-top: 6px;
  margin-bottom: 6px;
}

.bt-more-options__pooltitle-text {
  display: inline-block;
}

.bt-more-options__break {
  flex-basis: 100%;
  height: 0;
}

.bt-more-options__poollink {
  font-weight: 500;
  font-size: 0.86em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

/* ==========================================================
   Swatch Entry – First Paint Mask
   Zweck:
   - Verhindert kurzes Aufblitzen von Header + Produkttitel
     beim Swatch-Navigation-Entry
   - Nur aktiv, wenn Body-State gesetzt ist
   - Kein Layout-Shift, kein Reflow
   ========================================================== */

html.bt-swatch-entry header,
html.bt-swatch-entry .site-header,
html.bt-swatch-entry .subheader,
html.bt-swatch-entry h1.product_title {
  visibility: hidden;
}