/* =========================================================================
   TT Artikelslider – Frontend (Swiper-basierter Produkt-Slider)
   Stabiles Karten-Layout: Kopf oben, Preis/Verfügbarkeit/Buttons IMMER unten.
   ========================================================================= */
.tt-aslider{ position:relative; margin:0 0 8px; }
.tt-aslider *,
.tt-aslider *::before,
.tt-aslider *::after{ box-sizing:border-box; }

.tt-aslider__viewport{ position:relative; width:100%; padding:4px 2px 8px; overflow:hidden; }
.tt-aslider .swiper-wrapper{ display:flex; align-items:stretch; }
.tt-aslider .swiper-slide{ height:auto; display:flex; }
.tt-aslider__slide{ display:flex; width:100%; }

/* Fallback, falls Swiper (JS/CSS) nicht verfügbar ist: horizontal scrollbar.
   Swiper setzt .swiper-initialized auf den Viewport; ohne Init bleibt es scrollbar.
   `display:flex` muss hier explizit stehen, damit die Artikel nebeneinander
   statt untereinander erscheinen. */
.tt-aslider__viewport:not(.swiper-initialized) .swiper-wrapper{ display:flex; flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; gap:var(--tt-gap,16px); }
.tt-aslider__viewport:not(.swiper-initialized) .tt-aslider__slide{ flex:0 0 clamp(200px,25%,300px); scroll-snap-align:start; }

/* Karte */
.tt-aslider__card{
    display:flex; flex-direction:column; width:100%;
    border:1px solid #eceff3; overflow:hidden;
    box-shadow:0 4px 14px rgba(15,23,42,.06);
    transition:box-shadow .18s ease, transform .18s ease;
}
.tt-aslider__card:hover{ box-shadow:0 14px 32px rgba(15,23,42,.14); }

/* Bild + Badges */
.tt-aslider__imgwrap{ display:block; position:relative; aspect-ratio:1/1; background:transparent; overflow:hidden; }
.tt-aslider__imglink{ display:block; width:100%; height:100%; }
.tt-aslider__img{ width:100%; height:100%; object-fit:contain; display:block; padding:10px; }
.tt-aslider__ph{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#cbd5e1; font-size:34px; }
/* Overlay-Spalte(n) auf dem Bild: Wunschzettel/Vergleich (+ optional Info).
   Zwei mögliche Spalten – oben rechts (Standard) und oben links. */
.tt-aslider__badges{ position:absolute; top:8px; z-index:3; display:flex; flex-direction:column; gap:6px; }
.tt-aslider__badges--right{ right:8px; align-items:flex-end; }
.tt-aslider__badges--left{ left:8px; align-items:flex-start; }
.tt-aslider__badge{
    width:34px; height:34px; border-radius:50%; flex:0 0 auto; cursor:pointer; font-size:14px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 10px rgba(15,23,42,.12); transition:background .12s,color .12s,border-color .12s,transform .12s;
}
/* Farben mit hoher Spezifität (zwei Vorfahren-Klassen), damit aggressive
   Theme-Regeln die konfigurierten Badge-Farben nicht überschreiben. */
.tt-aslider .tt-aslider__card .tt-aslider__badge{
    border:1px solid var(--bdg-bd,#e2e8f0)!important; background:var(--bdg-bg,#fff)!important; color:var(--bdg-ic,#475569)!important;
}
.tt-aslider .tt-aslider__card .tt-aslider__badge i{ color:inherit!important; }
.tt-aslider .tt-aslider__card .tt-aslider__badge:hover{ background:var(--bdg-bg-h,#2563eb)!important; color:var(--bdg-ic-h,#fff)!important; border-color:var(--bdg-bd-h,#2563eb)!important; transform:translateY(-1px); }
/* „Aktiv" (auf Wunschzettel/Vergleich gesetzt) */
.tt-aslider .tt-aslider__card .tt-aslider__badge.wishlist.active,
.tt-aslider .tt-aslider__card .tt-aslider__badge.wishlist.is-active,
.tt-aslider .tt-aslider__card .tt-aslider__badge.comparelist-button.active,
.tt-aslider .tt-aslider__card .tt-aslider__badge.comparelist-button.is-active{ background:var(--bdg-bg-a,#ef4444)!important; color:var(--bdg-ic-a,#fff)!important; border-color:var(--bdg-bg-a,#ef4444)!important; }

/* Info-Button in der Overlay-Spalte (ordnet sich unter Wunschzettel/Vergleich
   ein). Position übernimmt der Spalten-Container. */
.tt-aslider__infobtn--stack{
    align-self:auto; width:auto; flex:0 0 auto; white-space:nowrap;
    padding:.4em .72em; font-size:12.5px; line-height:1.1; gap:6px;
    box-shadow:0 3px 10px rgba(15,23,42,.18);
}

/* Info-Button „nur Symbol": kompakter, quadratischer Knopf. Mit Rundung 50%
   entsteht ein runder Badge wie bei Wunschzettel/Vergleich. */
.tt-aslider__infobtn--icon{
    width:38px; height:38px; min-width:0; padding:0; gap:0; flex:0 0 auto;
    align-self:flex-start; display:inline-flex; align-items:center; justify-content:center;
}
.tt-aslider__infobtn--icon .tt-aslider__btntext{ display:none; }
.tt-aslider__infobtn--icon i{ margin:0; font-size:15px; }
/* Im Overlay-Stapel als runder Badge (Größe wie Wunschzettel/Vergleich). */
.tt-aslider__infobtn--stack.tt-aslider__infobtn--icon{ width:34px; height:34px; }

/* Body: Kopf (variabel) + Spacer + Fuß (fix unten) */
.tt-aslider__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:14px; gap:8px; }
.tt-aslider__head{ display:flex; flex-direction:column; gap:6px; }
.tt-aslider__spacer{ flex:1 1 auto; min-height:6px; }
.tt-aslider__foot{ display:flex; flex-direction:column; gap:8px; }

.tt-aslider__name{
    color:#0f172a; font-weight:600; font-size:15px; line-height:1.35; text-decoration:none;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tt-aslider__name:hover{ color:#2563eb; text-decoration:none; }
/* Konfigurierbare Namensfarbe / Hover-Farbe / Unterstreichung. Hohe Spezifität +
   !important, damit Theme-Link-Regeln (z. B. „.opc-Container a{color:…!important}")
   nicht gewinnen. Ohne konfigurierte Farbe bleibt das bisherige Verhalten. */
.tt-aslider .tt-aslider__card .tt-aslider__name.tt-aslider__name--c{ color:var(--name-c,#0f172a)!important; }
.tt-aslider .tt-aslider__card .tt-aslider__name.tt-aslider__name--ch:hover{ color:var(--name-ch,#2563eb)!important; }
.tt-aslider .tt-aslider__card .tt-aslider__name.tt-aslider__name--ul,
.tt-aslider .tt-aslider__card .tt-aslider__name.tt-aslider__name--ul:hover{ text-decoration:underline!important; }
.tt-aslider .tt-aslider__card .tt-aslider__name.tt-aslider__name--ulh{ text-decoration:none!important; }
.tt-aslider .tt-aslider__card .tt-aslider__name.tt-aslider__name--ulh:hover{ text-decoration:underline!important; }

/* Bewertung: reservierte Zeile, damit Karten ohne Sterne bündig bleiben */
.tt-aslider__rating-row{ min-height:18px; display:flex; align-items:center; }
.tt-aslider__rating{ display:inline-flex; align-items:center; gap:2px; color:#f59e0b; font-size:13px; }
.tt-aslider__rating .far{ color:#cbd5e1; }
.tt-aslider__rating-cnt{ color:#94a3b8; font-size:12px; margin-left:4px; }

.tt-aslider__desc{
    margin:0; font-size:13px; line-height:1.5; color:#64748b;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Verfügbarkeit – feste Höhe, damit nichts rutscht */
.tt-aslider__avail{ min-height:20px; font-size:12.5px; display:flex; align-items:center; gap:6px; color:#16a34a; }
.tt-aslider__avail-dot{ width:9px; height:9px; border-radius:50%; background:currentColor; flex:0 0 9px; }
.tt-aslider__avail--green{ color:#16a34a; }
.tt-aslider__avail--yellow{ color:#d97706; }
.tt-aslider__avail--red{ color:#dc2626; }
/* Lieferdauer-Modus: neutraler Look mit Liefer-Symbol (keine Ampel). */
.tt-aslider__avail--duration{ color:#475569; }
.tt-aslider__avail-ic{ font-size:12px; flex:0 0 auto; }

/* Preisblock */
.tt-aslider__prices{ display:flex; flex-direction:column; gap:2px; }
.tt-aslider__uvp{ font-size:12px; color:#94a3b8; }
.tt-aslider__uvp s{ color:#94a3b8; }
.tt-aslider__price{ font-size:18px; font-weight:700; color:#0f172a; }
.tt-aslider__baseprice{ font-size:11.5px; color:#94a3b8; line-height:1.3; }
.tt-aslider__price--native .price,
.tt-aslider__price--native .productbox-price{ font-size:18px; font-weight:700; color:#0f172a; }
.tt-aslider__price--native .price_label{ font-size:12px; font-weight:600; color:#64748b; }
.tt-aslider__price--native .special-price,
.tt-aslider__price--native .special{ color:#dc2626; }
.tt-aslider__price--native s,
.tt-aslider__price--native del{ color:#94a3b8; font-weight:400; font-size:13px; }

/* Aktionsbereich (Buttons) */
.tt-aslider__actions{ display:flex; flex-direction:column; gap:8px; }

/* Warenkorb-Form + Menge */
.tt-aslider__cartform{ display:flex; gap:8px; align-items:stretch; margin:0; }
.tt-aslider__qty{ width:64px; flex:0 0 64px; text-align:center; border:1px solid #cbd5e1; border-radius:9px; padding:.4em; font-size:14px; }
.tt-aslider__qty:focus{ outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.tt-aslider__cartform .tt-aslider__cta{ flex:1 1 auto; }

/* „Sofort kaufen" – Direkt-Modus: Mengenzähler + Warenkorb-Button NEBENEINANDER.
   Der Zähler nutzt die JTL-Standard-Klassen (.form-counter), das Theme stylt ihn;
   hier nur die Aufteilung: Zähler kompakt links, Button füllt den Rest. */
.tt-aslider__buyrow{ flex-direction:row; gap:8px; align-items:stretch; flex-wrap:nowrap; }
.tt-aslider__buyrow .tt-aslider__counter{ flex:0 0 auto; width:auto; margin:0; }
.tt-aslider__buyrow .tt-aslider__counter .form-control{ flex:0 0 44px; width:44px; min-width:44px; text-align:center; padding-left:2px; padding-right:2px; }
.tt-aslider__buyrow .tt-aslider__addcart{ flex:1 1 auto; min-width:0; }

/* EINHEITLICHE HÖHE aller Aktions-Elemente, damit ALLE Karten (ob „Zum Artikel",
   „In den Warenkorb" oder Mengenzähler + Button) auf einer Linie enden.
   Eine gemeinsame Höhe (--tt-act-h) für: Primär-Buttons, Warenkorb-Button,
   Mengenzähler inkl. Eingabefeld und +/- Buttons. box-sizing:border-box, damit
   die Höhe theme-unabhängig exakt gleich bleibt. */
.tt-aslider__actions{ --tt-act-h:44px; }
.tt-aslider .tt-aslider__card .tt-aslider__actions .tt-aslider__cta:not(.tt-aslider__infobtn--icon){ height:var(--tt-act-h)!important; min-height:var(--tt-act-h)!important; box-sizing:border-box!important; align-self:stretch!important; }
.tt-aslider .tt-aslider__card .tt-aslider__buyrow .tt-aslider__counter{ height:var(--tt-act-h)!important; min-height:0!important; box-sizing:border-box!important; align-self:stretch!important; }
/* Alle Bedienelemente des Zählers auf 100% der Zählerhöhe – so sind Eingabefeld
   UND +/- Buttons exakt gleich hoch (hohe Spezifität, damit Theme-Regeln zum
   Spinner nicht das Eingabefeld höher machen als die Buttons). */
.tt-aslider .tt-aslider__card .tt-aslider__buyrow .tt-aslider__counter .form-control,
.tt-aslider .tt-aslider__card .tt-aslider__buyrow .tt-aslider__counter .input-group-prepend,
.tt-aslider .tt-aslider__card .tt-aslider__buyrow .tt-aslider__counter .input-group-append,
.tt-aslider .tt-aslider__card .tt-aslider__buyrow .tt-aslider__counter .input-group-prepend .btn,
.tt-aslider .tt-aslider__card .tt-aslider__buyrow .tt-aslider__counter .input-group-append .btn,
.tt-aslider .tt-aslider__card .tt-aslider__buyrow .tt-aslider__counter > .btn{ height:100%!important; min-height:0!important; max-height:100%!important; box-sizing:border-box!important; }

/* Mobil: Warenkorb-Button im Direkt-Modus zeigt nur das Symbol */
@media(max-width:576px){
    .tt-aslider__buyrow .tt-aslider__addcart .tt-aslider__btntext{ display:none; }
    .tt-aslider__buyrow .tt-aslider__addcart i{ margin:0; }
    /* Ohne Symbol bleibt der Text sichtbar, sonst wäre der Button leer. */
    .tt-aslider__buyrow .tt-aslider__addcart--noicon .tt-aslider__btntext{ display:inline; }
}

/* Button: Bootstrap-Klasse ODER eigene Farben */
.tt-aslider__cta{ align-self:flex-start; }
.tt-aslider__cta--block{ width:100%; align-self:stretch; justify-content:center; text-align:center; }
.tt-aslider__cta--block.tt-aslider__btnbs{ display:flex; }
.tt-aslider__btnbs{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; }
.tt-aslider__btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5em; cursor:pointer;
    text-decoration:none; font-weight:600; line-height:1; border-radius:9px; border:2px solid transparent;
    padding:.6em 1.1em; white-space:nowrap;
    transition:background-color .12s, border-color .12s, color .12s, transform .12s, box-shadow .12s;
}
.tt-aslider__btn:hover{ text-decoration:none; transform:translateY(-1px); }
/* Eigene Farben: !important UND SEHR hohe Spezifität. Manche Theme-Regeln
   erreichen durch verschachtelte :not(...) eine überraschend hohe Spezifität
   (z. B. „.opc-Container a:not(.product-wrapper a):not(.opc-Button .btn)" = 0,4,2).
   Mit zwei Vorfahren-Klassen (.tt-aslider .tt-aslider__card) + Compound liegen die
   Plugin-Regeln bei 0,5,x und gewinnen zuverlässig – nur für Plugin-Buttons. */
.tt-aslider .tt-aslider__card .tt-aslider__cta.tt-aslider__btn.tt-aslider__btn--custom{ background:var(--btnc-bg,#2563eb)!important; border-color:var(--btnc-bd,#2563eb)!important; color:var(--btnc-tx,#fff)!important; }
.tt-aslider .tt-aslider__card .tt-aslider__cta.tt-aslider__btn.tt-aslider__btn--custom:hover{ background:var(--btnc-bg-h,#1d4ed8)!important; border-color:var(--btnc-bd-h,#1d4ed8)!important; color:var(--btnc-tx-h,#fff)!important; }
.tt-aslider .tt-aslider__card .tt-aslider__cta.tt-aslider__btn.tt-aslider__btn--custom:active{ background:var(--btnc-bg-a,#1e40af)!important; border-color:var(--btnc-bd-a,#1e40af)!important; color:var(--btnc-tx-a,#fff)!important; }
.tt-aslider .tt-aslider__card .tt-aslider__cta.tt-aslider__btn.tt-aslider__btn--custom:focus,
.tt-aslider .tt-aslider__card .tt-aslider__cta.tt-aslider__btn.tt-aslider__btn--custom:focus-visible{ background:var(--btnc-bg-f,#2563eb)!important; border-color:var(--btnc-bd-f,#2563eb)!important; color:var(--btnc-tx-f,#fff)!important; outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.35); }

/* Bootstrap-Stil-Buttons: Bootstrap liefert Hintergrund/Rahmen/Hover; hier wird
   nur die SCHRIFTFARBE mit hoher Spezifität abgesichert (gleiches Prinzip). */
.tt-aslider .tt-aslider__card .tt-aslider__cta.tt-aslider__btnbs.btn-primary,
.tt-aslider .tt-aslider__card .tt-aslider__cta.tt-aslider__btnbs.btn-secondary,
.tt-aslider .tt-aslider__card .tt-aslider__cta.tt-aslider__btnbs.btn-info,
.tt-aslider .tt-aslider__card .tt-aslider__cta.tt-aslider__btnbs.btn-success,
.tt-aslider .tt-aslider__card .tt-aslider__cta.tt-aslider__btnbs.btn-dark{ color:#fff!important; }
.tt-aslider .tt-aslider__card .tt-aslider__cta.tt-aslider__btnbs.btn-light{ color:#212529!important; }
.tt-aslider .tt-aslider__card .tt-aslider__cta.tt-aslider__btnbs.btn-outline-primary{ color:var(--bs-primary,var(--primary,#2563eb))!important; }
.tt-aslider .tt-aslider__card .tt-aslider__cta.tt-aslider__btnbs.btn-outline-primary:hover,
.tt-aslider .tt-aslider__card .tt-aslider__cta.tt-aslider__btnbs.btn-outline-primary:focus{ color:#fff!important; }
/* „Zum Artikel"-Link im Info-Popup ebenfalls absichern. */
.tt-qv .tt-qv__tolink.tt-aslider__btn--custom{ color:var(--btnc-tx,#fff)!important; background:var(--btnc-bg,#2563eb)!important; border-color:var(--btnc-bd,#2563eb)!important; }

/* „Sofort kaufen": nur Marker-Klasse für das JS – Aussehen kommt aus den
   Button-Klassen (.tt-aslider__btn--custom mit eigenen Farben ODER Bootstrap). */
.tt-aslider__qbtn{ cursor:pointer; }

/* Navigationspfeile – Farben über CSS-Variablen (im Backend konfigurierbar);
   !important, damit Theme-Regeln (z. B. globales Link-/Button-Styling) sie nicht
   überschreiben. */
.tt-aslider__nav{
    position:absolute; top:calc(50% - 24px); transform:translateY(-50%); z-index:5;
    width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:15px; box-shadow:0 6px 18px rgba(15,23,42,.12); transition:background .12s,color .12s,border-color .12s;
    border:1px solid var(--nav-bd,#e2e8f0)!important; background:var(--nav-bg,#fff)!important; color:var(--nav-ic,#334155)!important;
}
.tt-aslider__nav i{ color:inherit!important; }
.tt-aslider__nav:hover{ background:var(--nav-bg-h,#2563eb)!important; color:var(--nav-ic-h,#fff)!important; border-color:var(--nav-bd-h,#2563eb)!important; }
.tt-aslider__prev{ left:-6px; }
.tt-aslider__next{ right:-6px; }
.tt-aslider__nav.swiper-button-disabled{ opacity:.35; cursor:default; }
.tt-aslider__nav.swiper-button-lock{ display:none; }

/* Punkte-Navigation (Farben über CSS-Variablen, im Backend konfigurierbar;
   !important gegen Theme-/Swiper-Standardfarben). */
.tt-aslider__dots{ display:flex; justify-content:center; gap:6px; margin-top:8px; }
.tt-aslider__dots .swiper-pagination-bullet{ width:8px; height:8px; border-radius:50%; opacity:1; cursor:pointer; background:var(--dot-bg,#cbd5e1)!important; }
.tt-aslider__dots .swiper-pagination-bullet-active{ width:22px; border-radius:5px; background:var(--dot-bg-a,#2563eb)!important; }

@media(max-width:600px){
    .tt-aslider__prev{ left:0; } .tt-aslider__next{ right:0; }
    .tt-aslider__nav{ width:34px; height:34px; font-size:13px; }
}

/* =========================================================================
   Quick-View / „Sofort kaufen"-Popup
   ========================================================================= */
body.tt-qv-open{ overflow:hidden; }
.tt-qv{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; }
.tt-qv[hidden]{ display:none; }
.tt-qv__backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.55); }
.tt-qv__dialog{
    position:relative; z-index:1; width:min(920px,94vw); max-height:90vh; overflow:auto;
    background:#fff; border-radius:14px; box-shadow:0 30px 80px rgba(15,23,42,.35);
    display:grid; grid-template-columns:1fr 1fr; gap:0;
}
@media(max-width:700px){ .tt-qv__dialog{ grid-template-columns:1fr; } }
.tt-qv__close{
    position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:50%;
    border:1px solid #e2e8f0; background:#fff; color:#334155; font-size:22px; line-height:1; cursor:pointer;
}
.tt-qv__close:hover{ background:#f1f5f9; }
.tt-qv__media{ background:#f8fafc; display:flex; align-items:center; justify-content:center; padding:24px; min-height:280px; }
.tt-qv__img{ max-width:100%; max-height:60vh; object-fit:contain; }
.tt-qv__info{ padding:28px 30px; display:flex; flex-direction:column; gap:12px; }
.tt-qv__name{ font-size:22px; font-weight:700; color:#0f172a; text-decoration:none; line-height:1.3; }
.tt-qv__name:hover{ color:#2563eb; }
.tt-qv__avail{ display:flex; align-items:center; gap:6px; font-size:13.5px; color:#16a34a; }
.tt-qv__avail-dot{ width:9px; height:9px; border-radius:50%; background:currentColor; }
.tt-qv__avail--yellow{ color:#d97706; } .tt-qv__avail--red{ color:#dc2626; }
.tt-qv__uvp{ font-size:13px; color:#94a3b8; }
.tt-qv__price{ font-size:24px; font-weight:800; color:#0f172a; }
.tt-qv__price .price_label{ font-size:13px; font-weight:600; color:#64748b; }
.tt-qv__desc{ font-size:14px; line-height:1.6; color:#475569; margin:0; }
.tt-qv__buy{ display:flex; gap:10px; align-items:stretch; margin-top:6px; }
.tt-qv__qty{ width:80px; text-align:center; border:1px solid #cbd5e1; border-radius:9px; padding:.55em; font-size:15px; }
.tt-qv__cart{ flex:1 1 auto; border:0; border-radius:9px; padding:.7em 1.2em; font-size:15px; font-weight:600; cursor:pointer; background:#2563eb; color:#fff; }
.tt-qv__cart:hover{ background:#1d4ed8; }

/* Variationsauswahl im Popup – immer 2 nebeneinander, mobil 1 */
.tt-qv__vars{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin:4px 0 2px; }
@media(max-width:560px){ .tt-qv__vars{ grid-template-columns:1fr; } }
.tt-qv__var{ display:flex; flex-direction:column; gap:5px; margin:0; }
.tt-qv__var-lb{ font-size:12.5px; font-weight:600; color:#475569; }
.tt-qv__var-in{
    width:100%; height:42px; padding:0 12px; font-size:14px; color:#0f172a; background:#fff;
    border:1px solid #cbd5e1; border-radius:9px; appearance:auto;
}
.tt-qv__var-in:focus{ outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.tt-qv__var-in.is-invalid{ border-color:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.15); }

/* Info-Popup (optionaler Info-Button) */
.tt-qv--noimg .tt-qv__dialog{ grid-template-columns:1fr; }
.tt-qv__infocontent{ font-size:14px; line-height:1.6; color:#475569; overflow:auto; max-height:52vh; padding-right:4px; }
.tt-qv__infosec{ margin:0 0 14px; }
.tt-qv__infosec:last-child{ margin-bottom:0; }
.tt-qv__infohd{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#94a3b8; margin:0 0 4px; }
.tt-qv__infotext{ margin:0 0 8px; white-space:normal; }
.tt-qv__infotext:last-child{ margin-bottom:0; }
.tt-qv__infotext--empty{ color:#94a3b8; font-style:italic; }
.tt-qv__merkmale{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 16px; }
.tt-qv__merkmale dt{ font-weight:600; color:#0f172a; margin:0; }
.tt-qv__merkmale dd{ margin:0; color:#475569; }
/* „Zum Artikel"-Button im Info-Popup: Basis-Optik; eigene Farben/Radius kommen
   per Inline-Style/Klasse aus der Konfiguration (tt-aslider__cta greift). */
.tt-qv__tolink{
    flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:.7em 1.2em; font-size:15px; font-weight:600;
    cursor:pointer; text-decoration:none;
}
.tt-qv__tolink:hover{ text-decoration:none; }
@media(max-width:560px){ .tt-qv__merkmale{ grid-template-columns:1fr; gap:2px 0; } .tt-qv__merkmale dd{ margin-bottom:8px; } }

/* =========================================================================
   Toast-Bestätigung (Warenkorb / Wunschzettel / Vergleich)
   ========================================================================= */
.tt-toast-wrap{ position:fixed; z-index:100001; right:20px; bottom:20px; display:flex; flex-direction:column; gap:10px; max-width:min(380px,92vw); }
@media(max-width:560px){ .tt-toast-wrap{ left:12px; right:12px; bottom:12px; max-width:none; } }
.tt-toast{
    display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:12px;
    background:#0f172a; color:#fff; font-size:14px; line-height:1.4; font-weight:500;
    box-shadow:0 16px 40px rgba(15,23,42,.28); cursor:pointer;
    opacity:0; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease;
}
.tt-toast.is-in{ opacity:1; transform:translateY(0); }
.tt-toast i{ font-size:17px; flex:0 0 auto; }
.tt-toast--success{ background:#16a34a; }
.tt-toast--success i{ color:#fff; }
.tt-toast--error{ background:#dc2626; }
.tt-toast span{ flex:1 1 auto; }