/* VsWiederAufLager — Storefront (eigene Datei, nicht im Theme-CSS: bleibt vom Purge
   unberührt und lädt nur auf Produkt-, Konto- und Abmeldeseite). Farben über die
   Theme-Tokens, damit Hell- und Dunkelmodus automatisch passen. */

.vs-wal { margin-top: 10px; }
.vs-wal[hidden],
.vs-wal [hidden] { display: none !important; }

.vs-wal-zeile {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.vs-wal-knopf {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 16px;
    border: 2px solid var(--vs-accent, #0E97A5);
    border-radius: 10px;
    background: var(--vs-card, #fff);
    color: var(--vs-accent, #0E97A5);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease;
}
.vs-wal-knopf:hover { background: color-mix(in srgb, var(--vs-accent, #0E97A5) 10%, var(--vs-card, #fff)); }
.vs-wal-knopf:disabled { opacity: .65; cursor: progress; }
.vs-wal-knopf:focus-visible,
.vs-wal-info:focus-visible,
.vs-wal-ab:focus-visible,
.vs-wal-bar-knopf:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--vs-accent, #0E97A5) 45%, transparent);
    outline-offset: 2px;
}
.vs-wal-glocke { flex: 0 0 auto; }

/* Angemeldet: grüner Rahmen, Status links, „Abbestellen" rechts im selben Feld */
.vs-wal-aktiv {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 6px 6px 6px 16px;
    border: 2px solid var(--vs-ship, #2E9E5B);
    border-radius: 10px;
    background: color-mix(in srgb, var(--vs-ship, #2E9E5B) 8%, var(--vs-card, #fff));
}
.vs-wal-aktiv-text {
    color: color-mix(in srgb, var(--vs-ship, #2E9E5B) 78%, var(--vs-text, #101828));
    font-size: .95rem;
    font-weight: 700;
}
.vs-wal-ab {
    appearance: none;
    border: 0;
    background: none;
    padding: 8px 10px;
    color: var(--vs-muted, #5B6672);
    font-size: .85rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.vs-wal-ab:hover { color: var(--vs-text, #101828); }

/* Info-Symbol: gleiche Höhe wie der Knopf, dezent */
.vs-wal-info {
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vs-card-border, #E7EAEE);
    border-radius: 10px;
    background: var(--vs-card, #fff);
    color: var(--vs-muted, #5B6672);
    cursor: pointer;
}
.vs-wal-info > span[aria-hidden] {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font: italic 700 .8rem/1 Georgia, "Times New Roman", serif;
}
.vs-wal-info:hover,
.vs-wal-info[aria-expanded="true"] {
    color: var(--vs-accent, #0E97A5);
    border-color: var(--vs-accent, #0E97A5);
}

.vs-wal-infotext {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--vs-img-tile, #F6F8FA);
    color: var(--vs-muted, #5B6672);
    font-size: .8125rem;
    line-height: 1.45;
}
.vs-wal-infotext a { color: var(--vs-accent, #0E97A5); }

.vs-wal-meldung {
    margin: 8px 0 0;
    color: var(--vs-muted, #5B6672);
    font-size: .85rem;
}

/* Rückkehr vom Login: Knopf zweimal sanft pulsieren lassen */
.vs-wal-hinweis .vs-wal-knopf { animation: vsWalPuls 1.2s ease 2; }
@keyframes vsWalPuls {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vs-accent, #0E97A5) 0%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--vs-accent, #0E97A5) 28%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .vs-wal-hinweis .vs-wal-knopf { animation: none; }
    .vs-wal-knopf { transition: none; }
}

/* ---------- Handy-Kaufleiste: eigener Knopf statt „Ausverkauft" ---------- */
[data-vs-buybar].vs-wal-bar-an .vs-buybar-btn { display: none !important; }
.vs-wal-bar-knopf[hidden] { display: none !important; }
.vs-wal-bar-knopf {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 16px;
    border: 2px solid var(--vs-accent, #0E97A5);
    border-radius: 10px;
    background: var(--vs-card, #fff);
    color: var(--vs-accent, #0E97A5);
    font-size: .9375rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.vs-wal-bar-knopf.is-aktiv,
.vs-wal-bar-knopf.is-aktiv:disabled {
    border-color: var(--vs-ship, #2E9E5B);
    color: color-mix(in srgb, var(--vs-ship, #2E9E5B) 78%, var(--vs-text, #101828));
    opacity: 1;
    cursor: default;
}
@media (min-width: 768px) {
    .vs-wal-bar-knopf {
        flex: 0 0 auto;
        min-width: 220px;
        padding: 0 24px;
    }
}

/* ---------- Kontoseite „Benachrichtigungen" ---------- */
.vs-wal-konto-leer { color: var(--vs-muted, #5B6672); }
.vs-wal-konto-liste {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vs-wal-konto-eintrag {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--vs-card-border, #E7EAEE);
    border-radius: 12px;
    background: var(--vs-card, #fff);
}
.vs-wal-konto-bild {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--vs-img-tile, #F6F8FA);
}
.vs-wal-konto-bild img { width: 100%; height: 100%; object-fit: contain; }
.vs-wal-konto-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vs-wal-konto-name { color: var(--vs-text, #101828); font-weight: 700; text-decoration: none; }
.vs-wal-konto-name:hover { color: var(--vs-accent, #0E97A5); }
.vs-wal-konto-variante,
.vs-wal-konto-seit { color: var(--vs-muted, #5B6672); font-size: .85rem; }
.vs-wal-konto-form { margin: 0; }
.vs-wal-konto-entfernen {
    appearance: none;
    padding: 6px 12px;
    border: 1px solid var(--vs-card-border, #E7EAEE);
    border-radius: 8px;
    background: none;
    color: var(--vs-muted, #5B6672);
    font-size: .85rem;
    cursor: pointer;
}
.vs-wal-konto-entfernen:hover { color: var(--vs-text, #101828); border-color: var(--vs-muted, #5B6672); }
@media (max-width: 575.98px) {
    .vs-wal-konto-eintrag { grid-template-columns: 56px minmax(0, 1fr); }
    .vs-wal-konto-bild { width: 56px; height: 56px; }
    .vs-wal-konto-form { grid-column: 2; }
}

/* ---------- Abmeldeseite (Link aus der Mail) ---------- */
.vs-wal-seite { padding-top: 40px; padding-bottom: 60px; }
.vs-wal-seite-karte {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    border: 1px solid var(--vs-card-border, #E7EAEE);
    border-radius: 14px;
    background: var(--vs-panel, #fff);
}
.vs-wal-seite-karte h1 { margin: 0; font-size: 1.5rem; }
.vs-wal-seite-karte p { margin: 0; }
.vs-wal-seite-karte form { margin: 0; }
.vs-wal-seite-weiter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--vs-muted, #5B6672);
    font-size: .9rem;
}