/* ====== Container ====== */
.rissel-lvs-inline{margin-top:8px}

/* ====== Variants Slider (Baseline) ====== */
.rissel-lvs-inline__slider{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rissel-lvs-inline__viewport{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1 1 auto;
}
.rissel-lvs-inline__viewport::-webkit-scrollbar{display:none}

.rissel-lvs-inline__variants{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  padding:2px 0;
  scroll-snap-type:x mandatory;
}

.rissel-lvs-inline__thumb{
  flex:0 0 auto;
  width:46px;
  height:46px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:8px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  scroll-snap-align:start;
  text-decoration:none;
}

.rissel-lvs-inline__img{
  width:42px;
  height:42px;
  object-fit:contain;
}

.rissel-lvs-inline__thumb--more{
  font-weight:700;
  color:#333;
  background:rgba(0,0,0,.04);
}

/* Pfeile default hidden; JS schaltet bei Overflow auf flex */
.rissel-lvs-inline__nav{
  display:none;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  color:#333;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
}
.rissel-lvs-inline__nav:disabled{opacity:.35;cursor:default}

/* Desktop: Hover + 70x70 */
@media (min-width:768px){
  .rissel-lvs-inline{opacity:0;pointer-events:none;transition:opacity .15s ease}
  .product-box:hover .rissel-lvs-inline{opacity:1;pointer-events:auto}

  .rissel-lvs-inline__thumb{width:70px;height:70px;border-radius:10px}
  .rissel-lvs-inline__img{width:66px;height:66px}
}

/* Detail-Button nur in Produktbox ausblenden */
.product-box .btn-detail{display:none !important;}

/* ====== Größenleiste ====== */
.rissel-lvs-inline__sizes{
  display:flex;
  gap:6px;
  margin-top:8px;
  padding-bottom:2px; /* optischer Abstand, falls Browser Scrollbar zeichnet */
  flex-wrap:nowrap;
}

/* Mobile: wischbar, aber Scrollbar verstecken */
@media (max-width:767.98px){
  .rissel-lvs-inline__sizes{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .rissel-lvs-inline__sizes::-webkit-scrollbar{display:none}
}

/* Desktop: NICHT wischbar, kein Scrollbar */
@media (min-width:768px){
  .rissel-lvs-inline__sizes{
    overflow:hidden;
  }
}

.rissel-lvs-inline__size{
  flex:0 0 auto;
  font-size:12px;
  line-height:1;
  padding:3px 6px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:999px;
  background:#fff;
  white-space:nowrap;
}

@media (min-width:768px){
  .rissel-lvs-inline__size{font-size:13px;padding:4px 7px}
}

.rissel-lvs-inline__size--more{
  font-weight:700;
  background:rgba(0,0,0,.04);
}

/* ===== Größen-Navigation (Desktop) ===== */
.rissel-lvs-inline__sizes-wrap{
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.rissel-lvs-inline__sizes-viewport{
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1 1 auto;
}
.rissel-lvs-inline__sizes-viewport::-webkit-scrollbar{display:none}

.rissel-lvs-inline__sizes{
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}

.rissel-lvs-inline__sizes-nav{
  display: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.rissel-lvs-inline__sizes-nav:disabled{opacity:.35;cursor:default}

@media (min-width:768px){
  .rissel-lvs-inline__sizes-nav{display:flex}
}

@media (max-width:767.98px){
  .rissel-lvs-inline__sizes-nav{display:none}
}

/* Größen-Viewport & Pfeile */
.rissel-lvs-inline__sizes-wrap{
  position: relative;
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
}

.rissel-lvs-inline__sizes-viewport{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  flex:1 1 auto;
}
.rissel-lvs-inline__sizes-viewport::-webkit-scrollbar{display:none}

.rissel-lvs-inline__sizes{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
}

.rissel-lvs-inline__sizes-nav{
  display:none; /* JS schaltet bei Overflow auf flex */
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.rissel-lvs-inline__sizes-nav:disabled{opacity:.35;cursor:default}

@media (min-width:768px){
  /* Pfeile dürfen auf Desktop grundsätzlich erscheinen, JS entscheidet ob nötig */
  .rissel-lvs-inline__sizes-nav{display:flex}
}

@media (max-width:767.98px){
  /* Auf Mobile keine Pfeile, nur Swipe */
  .rissel-lvs-inline__sizes-nav{display:none !important}
}

/* FIX: Flexbox-Overflow zuverlässig (sonst wird Overflow manchmal nie erkannt) */
.rissel-lvs-inline__sizes-viewport{
  min-width: 0;
}
.rissel-lvs-inline__sizes{
  width: max-content;
}

/* +X bei Größen (nur Desktop zeigen, Mobile unnötig) */
.rissel-lvs-inline__sizes-more{display:none}
@media (min-width:768px){
  .rissel-lvs-inline__sizes-more{display:inline-flex}
}

/* +X Hinweis bei Größen:
   - Desktop: sichtbar (wie bisher)
   - Mobile: ebenfalls sichtbar, kleiner dargestellt
   - JS rendert es NUR wenn sizes.length > 8
*/
.rissel-lvs-inline__sizes-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

@media (max-width:767.98px){
  .rissel-lvs-inline__sizes-more{
    font-size:11px;
    padding:3px 6px;
    opacity:.85;
  }
}

/* Pfeil-Hinweis am Ende der Größenleiste (statt +X) */
.rissel-lvs-inline__sizes-more{
  font-weight:700;
  padding:3px 8px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:999px;
  background:rgba(0,0,0,.04);
  line-height:1;
}

/* =========================================================
   FIX: Einheitliche Kartenhöhe im Listing
   - Gleiche Höhe für Artikel mit / ohne Crossselling-Varianten
   - Betrifft NUR den Variantenblock
   ========================================================= */

/* Mobile: Platz für Varianten-Zeile reservieren */
.rissel-lvs-inline{
  min-height: 64px; /* ca. 1 Varianten-Zeile */
}

/* Desktop: Platz für 70x70 Thumbs + Abstand */
@media (min-width:768px){
  .rissel-lvs-inline{
    min-height: 86px;
  }
}

/* =========================================================
   FEINJUSTIERUNG: exakte Höhe für Varianten-Block
   - gleicht Karten mit / ohne Crossselling endgültig an
   - betrifft NUR den Varianten-Bereich
   ========================================================= */

/* Mobile: etwas mehr Luft für Touch & Padding */
.rissel-lvs-inline{
  min-height: 72px;
}

/* Desktop: 70px Thumb + Border + Padding + Abstand */
@media (min-width:768px){
  .rissel-lvs-inline{
    min-height: 96px;
  }
}

/* =========================================================
   VARIANTEN-SLOT (fixe Höhe, unabhängig vom Inhalt)
   - gleicht Karten mit / ohne Varianten aus
   - betrifft NUR den Variantenbereich
   ========================================================= */

.rissel-lvs-inline__variant-slot{
  width: 100%;
}

/* Mobile: eine Zeile Varianten */
.rissel-lvs-inline__variant-slot{
  height: 72px;
}

/* Desktop: 70px Thumbs + echte Abstände */
@media (min-width:768px){
  .rissel-lvs-inline__variant-slot{
    height: 96px;
  }
}

/* =========================================================
   VARIANTEN-SLOT (fixe Höhe, unabhängig vom Inhalt)
   - gleicht Karten mit / ohne Varianten aus
   - betrifft NUR den Variantenbereich
   ========================================================= */

.rissel-lvs-inline__variant-slot{
  width: 100%;
}

/* Mobile: eine Zeile Varianten */
.rissel-lvs-inline__variant-slot{
  height: 72px;
}

/* Desktop: 70px Thumbs + echte Abstände */
@media (min-width:768px){
  .rissel-lvs-inline__variant-slot{
    height: 96px;
  }
}

/* Pfeil-Hinweis am Ende der Größenleiste (statt +X) */
.rissel-lvs-inline__sizes-more{
  font-weight: 700;
  padding: 3px 8px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  line-height: 1;
  opacity: .85;
}

/* Pfeil-Hinweis am Ende der Größenleiste (statt +X) */
.rissel-lvs-inline__sizes-more{
  font-weight: 700;
  padding: 3px 8px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  line-height: 1;
  opacity: .85;
}

/* ===== Fixer Slot nur für Varianten (damit Kartenhöhe gleich ist) ===== */
.rissel-lvs-inline__variant-slot{
  width: 100%;
  height: 72px; /* mobile */
}
@media (min-width:768px){
  .rissel-lvs-inline__variant-slot{
    height: 96px; /* desktop: 70px thumbs + padding/border */
  }
}

/* ===== Pfeil-Hinweis bei Größen ===== */
.rissel-lvs-inline__sizes-more{
  font-weight:700;
  padding:3px 8px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:999px;
  background:rgba(0,0,0,.04);
  line-height:1;
  opacity:.85;
}

/* ===== Dezente Trennlinie am Ende jeder Produktbox (nur Mobile) ===== */
.rissel-lvs-inline__divider{
  display:none;
  margin-top:10px;
  border-top:1px solid rgba(0,0,0,.08);
}
@media (max-width:767.98px){
  .rissel-lvs-inline__divider{
    display:block;
  }
}

/* =========================================================
   Mobile: dezente Trennlinie GANZ am Ende der Produktbox
   - sitzt unter Preis/gesamtem Inhalt (nicht unter Größenleiste)
   - nur im Listing, nur Mobile
   - +5px Abstand NACH der Linie
   ========================================================= */
@media (max-width:767.98px){
  .cms-element-product-listing .product-box{
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding-bottom: 5px;
    margin-bottom: 10px; /* optional: etwas Luft zwischen den Boxen */
  }

  /* damit die Linie nicht doppelt wirkt, falls ThemeWare schon etwas ähnliches nutzt */
  .cms-element-product-listing .product-box:last-child{
    margin-bottom: 0;
  }
}

/* Alte Divider-Lösung im Plugin (falls noch vorhanden) komplett deaktivieren */
.rissel-lvs-inline__divider{display:none !important;}

/* =========================================================
   Mobile Trennlinie: ThemeWare Primärfarbe (dezent)
   - nutzt Shopware/ThemeWare Brand-Primary
   - automatische Anpassung bei Theme-Farbänderung
   ========================================================= */
@media (max-width:767.98px){
  .cms-element-product-listing .product-box{
    border-bottom-color: color-mix(
      in srgb,
      var(--sw-color-brand-primary) 18%,
      transparent
    );
  }
}

/* =========================================================
   Feinschliff: extrem dezente Trennlinie in Theme-Primärfarbe
   - gleiche CSS-Klasse, nur transparenter
   - edler, ruhiger Look
   ========================================================= */
@media (max-width:767.98px){
  .cms-element-product-listing .product-box{
    border-bottom-color: color-mix(
      in srgb,
      var(--sw-color-brand-primary) 8%,
      transparent
    );
  }
}

/* =========================================================
   FINAL FIX: Mobile Trennlinie sicher & edel (ThemeWare-safe)
   - überschreibt ThemeWare zuverlässig
   - volle Border-Definition (nicht nur Farbe)
   ========================================================= */
@media (max-width:767.98px){
  .cms-element-product-listing .product-box{
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 5px;
  }
}

/* Feintuning: Trennlinie ca. 25% dunkler (Mobile) */
@media (max-width:767.98px){
  .cms-element-product-listing .product-box{
    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
    padding-bottom: 5px;
  }
}

/* Performance: Reflows auf einzelne Produktbox begrenzen */
.cms-element-product-listing .product-box{
  contain: layout paint;
}