/* Vape-Sale Produktberater — eigenes statisches CSS (bewusst NICHT im
 * Theme-Build: theme.json kompiliert kein @Plugins-SCSS, und als eigene Datei
 * ist der Berater vor dem PurgeCSS des Themes sicher).
 * Farbwelt = Theme: Navy #101C2B, Akzent-Cyan #00B2D4, Linien #E7EAEE. */

/* ---------- Desktop-Tab an der rechten Bildschirmkante ---------- */
.vs-brt-tab {
    display: none;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1028;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 9px 16px;
    background: #101C2B;
    color: #fff;
    border-radius: 10px 0 0 10px;
    box-shadow: 0 4px 14px rgba(16, 28, 43, .28);
    text-decoration: none;
    transition: background .15s ease, padding-right .15s ease;
}
@media (min-width: 992px) {
    .vs-brt-tab { display: inline-flex; }
}
.vs-brt-tab:hover,
.vs-brt-tab:focus {
    background: #00B2D4;
    color: #fff;
    padding-right: 13px;
    text-decoration: none;
}
.vs-brt-tab-icon { flex: 0 0 auto; }
.vs-brt-tab-text {
    writing-mode: vertical-rl;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
}
.is-ctl-berater .vs-brt-tab { display: none; }

/* ---------- Overlay + Panel ---------- */
.vs-brt-overlay { position: fixed; inset: 0; z-index: 1050; }
.vs-brt-backdrop { position: absolute; inset: 0; background: rgba(16, 28, 43, .55); }
body.vs-brt-offen { overflow: hidden; }

.vs-brt-panel {
    position: absolute;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 10px 40px rgba(16, 28, 43, .35);
    /* Desktop: zentriertes Popup (User-Wunsch 20.08. — Seitenpanel am Rand
       war unbequem zu lesen) */
    inset: 0;
    margin: auto;
    width: min(720px, calc(100% - 48px));
    height: -moz-fit-content;
    height: fit-content;
    max-height: min(86vh, 900px);
    border-radius: 14px;
    overflow: hidden;
    animation: vs-brt-auf .2s ease;
}
@keyframes vs-brt-auf { from { transform: scale(.97); opacity: .4; } to { transform: none; opacity: 1; } }

/* Mobil: Bottom-Sheet */
@media (max-width: 991.98px) {
    .vs-brt-panel {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        margin: 0;
        width: 100%;
        height: auto;
        max-height: 88vh;
        max-height: 88dvh;
        border-radius: 16px 16px 0 0;
        animation: vs-brt-hoch .24s ease;
    }
    @keyframes vs-brt-hoch { from { transform: translateY(30px); opacity: .4; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
    .vs-brt-panel { animation: none; }
}

.vs-brt-panel-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #101C2B;
    color: #fff;
    flex: 0 0 auto;
}
@media (max-width: 991.98px) {
    .vs-brt-panel-kopf { border-radius: 16px 16px 0 0; }
}
.vs-brt-panel-titel {
    flex: 1 1 auto;
    font-weight: 700;
    font-size: 16px;
}
.vs-brt-panel-zurueck,
.vs-brt-panel-schliessen {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}
.vs-brt-panel-zurueck:hover,
.vs-brt-panel-schliessen:hover { background: #00B2D4; }

.vs-brt-panel-inhalt {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 16px 26px;
    -webkit-overflow-scrolling: touch;
    /* Am Listenende NICHT auf die Seite dahinter weiterscrollen */
    overscroll-behavior: contain;
}
.vs-brt-overlay { overscroll-behavior: contain; }
.vs-brt-panel-inhalt.vs-brt-laedt { opacity: .45; pointer-events: none; }
.vs-brt-laden { color: #6b7684; }

/* ---------- Schritt-Inhalt (Panel + Vollseite gemeinsam) ---------- */
.vs-brt-titel {
    font-size: 20px;
    font-weight: 700;
    color: #101C2B;
    margin: 0 0 6px;
    line-height: 1.3;
}
.vs-brt-hinweis {
    font-size: 13.5px;
    color: #6b7684;
    margin: 0 0 14px;
    line-height: 1.5;
}
.vs-brt-text { font-size: 14.5px; line-height: 1.6; color: #2a3542; margin: 0 0 14px; }
.vs-brt-text p { margin: 0 0 10px; }
.vs-brt-tipp {
    background: #E6F7FB;
    border-left: 3px solid #00B2D4;
    border-radius: 0 8px 8px 0;
    padding: 9px 12px;
    font-size: 13.5px;
    color: #145060;
}

.vs-brt-kopfzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 12px;
}
.vs-brt-zurueck {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #101C2B;
    background: #F2F5F9;
    border-radius: 999px;
    padding: 5px 13px;
    text-decoration: none;
}
.vs-brt-zurueck:hover { background: #E6F7FB; color: #00829B; text-decoration: none; }
.vs-brt-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.vs-brt-chip {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    color: #145060;
    background: #E6F7FB;
    border-radius: 999px;
    padding: 3px 9px;
}
.vs-brt-neustart {
    display: inline-block;
    font-size: 12.5px;
    color: #6b7684;
    text-decoration: none;
    margin: 0 0 10px;
}
.vs-brt-kopfzeile .vs-brt-neustart { margin: 0; }
.vs-brt-neustart:hover { color: #00B2D4; text-decoration: none; }
.vs-brt-neustart--unten { margin: 16px 0 0; }

/* Antwort-Karten */
.vs-brt-antworten { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
.vs-brt-antwort {
    display: block;
    padding: 13px 15px;
    border: 1px solid #E7EAEE;
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.vs-brt-antwort:hover,
.vs-brt-antwort:focus {
    border-color: #00B2D4;
    box-shadow: 0 2px 10px rgba(0, 178, 212, .14);
    text-decoration: none;
}
.vs-brt-antwort-label {
    display: block;
    font-weight: 600;
    font-size: 14.5px;
    color: #101C2B;
}
.vs-brt-antwort-sub {
    display: block;
    font-size: 12.5px;
    color: #6b7684;
    margin-top: 2px;
}

/* Produkt-Empfehlungen */
.vs-brt-block { margin: 16px 0 4px; }
.vs-brt-lockerung {
    font-size: 12.5px;
    color: #8a5a0b;
    background: #FBF3E2;
    border-radius: 8px;
    padding: 7px 11px;
    margin: 0 0 10px;
}
.vs-brt-block-titel {
    font-size: 14px;
    font-weight: 700;
    color: #101C2B;
    margin: 0 0 10px;
}
.vs-brt-produkte {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.vs-brt-produkt {
    display: flex;
    flex-direction: column;
    border: 1px solid #E7EAEE;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    text-decoration: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.vs-brt-produkt:hover,
.vs-brt-produkt:focus {
    border-color: #00B2D4;
    box-shadow: 0 2px 10px rgba(0, 178, 212, .14);
    text-decoration: none;
}
.vs-brt-produkt-bild {
    display: block;
    aspect-ratio: 1 / 1;
    background: #fff;
    margin: 0 0 8px;
}
.vs-brt-produkt-bild img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Auffüll-Treffer nach Teil-Lockerung (z. B. andere Slimstick-Geschmäcker) */
.vs-brt-produkt-alt {
    align-self: flex-start;
    margin-bottom: 4px;
    padding: 1px 7px;
    border-radius: 99px;
    background: #f1f3f6;
    color: #6b7684;
    font-size: 10.5px;
    font-weight: 600;
}
.vs-brt-produkt-name {
    font-size: 12.5px;
    line-height: 1.35;
    color: #2a3542;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
.vs-brt-produkt-specs {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.45;
    color: #6b7684;
}
.vs-brt-produkt-specs span { display: block; }
.vs-brt-produkt-specs span::before { content: "· "; }
.vs-brt-produkt-preis {
    margin-top: auto;
    padding-top: 6px;
    font-weight: 700;
    font-size: 13.5px;
    color: #101C2B;
}
.vs-brt-mehr {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #00829B;
    text-decoration: none;
}
.vs-brt-mehr:hover { text-decoration: underline; }

/* „Mehr anzeigen": Desktop 3 Karten sichtbar (eine 3er-Reihe), mobil 4
   (zwei volle 2er-Reihen) — Rest aufklappbar */
.vs-brt-produkt--mehr { display: none; }
.vs-brt-block--offen .vs-brt-produkt--mehr { display: flex; }
.vs-brt-block--offen .vs-brt-mehr-knopf { display: none; }
.vs-brt-zahl-mobil { display: none; }
@media (max-width: 991.98px) {
    .vs-brt-produkte .vs-brt-produkt:nth-child(4) { display: flex; }
    .vs-brt-zahl-desktop { display: none; }
    .vs-brt-zahl-mobil { display: inline; }
    .vs-brt-mehr-knopf--nur-desktop { display: none; }
}
.vs-brt-mehr-knopf {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px dashed #CBD5DE;
    border-radius: 8px;
    background: #fff;
    color: #00829B;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.vs-brt-mehr-knopf:hover { border-color: #00B2D4; background: #E6F7FB; }

/* Feste Links */
.vs-brt-links { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; }
.vs-brt-link {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    background: #F2F5F9;
    color: #101C2B;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.vs-brt-link:hover { background: #E6F7FB; color: #00829B; text-decoration: none; }

/* ---------- Vollseite ---------- */
.vs-brt-seite { max-width: 720px; margin: 0 auto; padding-top: 22px; padding-bottom: 60px; }
.vs-brt-seite-kopf h1 { font-size: 26px; font-weight: 700; color: #101C2B; margin: 0 0 6px; }
.vs-brt-seite-kopf p { color: #6b7684; font-size: 14.5px; margin: 0 0 20px; }
.vs-brt-seite-inhalt {
    border: 1px solid #E7EAEE;
    border-radius: 14px;
    padding: 22px 20px 26px;
    background: #fff;
}
/* Vollseite: 3 Spalten erst ab 992 — darunter überall 2 Spalten, damit die
   4-sichtbar-Regel für Panel UND Vollseite gilt */
@media (min-width: 992px) {
    .vs-brt-seite .vs-brt-produkte { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
    .vs-brt-panel .vs-brt-produkte { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
    .vs-brt-seite-inhalt { padding: 16px 12px 20px; }
}