/**
 * Weinberater — eigenes Stylesheet.
 *
 * Bewusst NICHT in main.scss: Das Modul ist standardmäßig aus, und ein
 * abgeschaltetes Modul soll keine Bytes in der 670-KB-Hauptdatei belegen, die
 * jede Instanz ausliefert. Geladen wird nur, wenn der Berater auch angeboten
 * wird.
 *
 * Farben kommen aus den bestehenden CSS-Variablen der Instanz, damit der
 * Berater aussieht wie der Shop und nicht wie ein Fremdkörper.
 */

/* ─── Einstieg: EIN Block, zwei Plätze ──────────────────── */

/* Im Fluss (Handy) und in der Filterspalte (Desktop) ist es derselbe Knopf,
   unterschieden nur durch `--side`. Vorher waren es zwei Klassenfamilien für
   ein Element — genau der Wildwuchs, den dieses Projekt ohnehin zu viel hat. */

.advisor-entry--side { display: none; }

@media (min-width: 769px) {
    /* Auf Desktop trägt die Filterspalte den Einstieg. Die Fassung im Fluss
       entfällt ERSATZLOS — zwei gleichrangige Einstiege auf einer Seite wirken
       wie eine Kampagne und machen jede spätere Messung wertlos, weil die
       schwächere Variante die stärkere verdünnt. */
    .advisor-entry:not(.advisor-entry--side) { display: none; }

    .advisor-entry--side {
        display: block;
        margin: 0 0 1.25rem;
        /* KEIN `position: sticky` — bewusst entfernt.
           Die Karte steht mitten in der Filterspalte, zwischen Suchfeld und
           Facetten. Genau das ist ihr Platz: Wer den Wein kennt, tippt ihn;
           wer ihn ungefähr kennt, filtert; wer gar nicht weiß wonach, nimmt
           den Berater. Eine klebende Karte kämpft gegen diese Reihenfolge —
           sie friert auf halber Höhe ein, und die Filtergruppen darunter
           laufen HINTER ihr durch. Mit eigenem Hintergrund verdeckt sie die
           Filter dabei, was aussieht, als sei die Seite kaputt (auf Staging
           nachgestellt: ab rund 1370 px Scroll klebt sie, die Facetten
           schieben sich darunter weg).
           Wer den Einstieg dauerhaft sichtbar haben will, müsste die GANZE
           `.shop__sidebar` mitscrollen lassen. Das ändert das Verhalten der
           Filter für alle und ist keine Nebenbei-Entscheidung. */
    }

    .advisor-entry--side .advisor-entry__btn {
        min-height: 0;
        padding: 14px;
        background: var(--color-light, #faf8f5);
    }

    /* Eigene Materialität, damit der Block NICHT als Filtergruppe gelesen wird:
       rundes Foto bzw. Icon, Rahmen, Knopf — keine Checkbox-Liste. */
    .advisor-entry__face {
        width: 44px !important;
        height: 44px !important;
        max-width: 44px !important;
        border-radius: 50%;
        object-fit: cover;
        flex: 0 0 auto;
    }

    .advisor-entry--side .advisor-entry__title {
        /* 0.875rem = exakt `.shop__filter-title`. Damit steht die Karte als
           gleichrangige Nachbarin der Facettengruppen statt als vierte
           Schriftgröße in einer Spalte, die nur zwei kennt. */
        font-size: .875rem;
        line-height: 1.3;
    }

    .advisor-entry--side .advisor-entry__sub { font-size: .75rem; line-height: 1.4; }
}

/* ─── Einstieg ──────────────────────────────────────────── */

.advisor-entry {
    margin: 0 0 24px;
}

.advisor-entry__btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 64px;
    padding: 12px 18px;
    border: 1px solid var(--color-border, #e2e2e2);
    border-radius: calc(var(--border-radius, 12px) * 2 / 3);
    background: var(--color-light, #faf8f5);
    color: var(--color-primary, #101222);
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.advisor-entry__btn:hover,
.advisor-entry__btn:focus-visible {
    border-color: var(--color-accent, #c5a44e);
    background: #fff;
}

/* Am Handy eine echte KARTE, nicht eine Flaeche in Seitenfarbe.
   `--color-light` ist auf dieser Instanz exakt der Seitenhintergrund
   (rgb(240,240,245) auf beiden Seiten gemessen) — vom Einstieg blieb damit
   nur ein 1px-Rahmen sichtbar, und er las sich als Trennlinie statt als
   Angebot. Weiss ist zugleich die Materialitaet der Weinkarten direkt
   darunter: gleiche Farbe, gleiche Rahmenfarbe, gleicher Radius aus dem
   Radien-System (`--card-radius`) — der Einstieg steht damit als
   gleichrangige erste Karte der Liste, nicht als Fremdkoerper.
   Desktop bleibt unberuehrt: `--side` setzt seinen Hintergrund selbst. */
.advisor-entry:not(.advisor-entry--side) .advisor-entry__btn {
    background: var(--color-surface, #fff);
    /* Exakt die Tokens der Weinkarte (`_wine-card.scss`): gleiche Flaeche,
       gleiche Rahmenfarbe, gleicher Radius. */
    border-color: var(--color-border-light, #ededef);
    border-radius: var(--card-radius, 16px);
    padding: 14px 18px;
}

.advisor-entry__icon, .advisor-entry__btn .icon {
    font-family: MaterialIcons, sans-serif;
    font-size: 26px;
    line-height: 1;
    color: var(--color-accent, #c5a44e);
    flex: 0 0 auto;
}

.advisor-entry__text { display: flex; flex-direction: column; gap: 2px; }
.advisor-entry__title { font-weight: 600; font-size: 1rem; }
.advisor-entry__sub { font-size: .8125rem; color: #595959; }

/* ─── Dialog ────────────────────────────────────────────── */

/* Der Rahmen kommt jetzt von `.a148-sheet` (components/_sheet.scss): dvh statt
   vh, Scroll-Sperre, Safe-Area, Ziehgriff, Fokus-Falle, und — entscheidend —
   `html.a148-sheet-lock`, wodurch sich der Cookie-Banner ausblendet. Hier
   stehen nur noch die Eigenheiten des Beraters. */

.advisor .advisor__head { position: relative; padding-bottom: 12px; }

.advisor__step {
    margin: 0 0 4px;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b6b6b;              /* 5,3:1 — 12px Versalien brauchen Reserve */
}

.advisor__title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
    font-family: var(--font-primary, inherit);
}
.advisor__title:focus { outline: none; }   /* Fokus nur programmatisch gesetzt */

.advisor__foot {
    display: flex;
    gap: 16px;
    align-items: center;
    /* KEIN Umbruch: Bei zwei Eintraegen sprang die Fusszeile sonst von 69 auf
       129 px — auf einem 629-px-Schirm ein Fuenftel der Hoehe, und zwar
       springend von Frage zu Frage. */
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 10px 24px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border, #ececec);
}
.advisor__foot[hidden] { display: none; }

/* Der Notausgang steht in der Fußzeile, nicht in der Liste — dort war er
   systematisch unter der Bildschirmkante. */
.advisor__link--skip { margin-left: auto; }

.advisor__foot .advisor__link {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* ─── Antwortmöglichkeiten ──────────────────────────────── */

/* Einordnung zur Frage — ruhig, aber lesbar (7:1 auf Weiß). */
.advisor__note {
    margin: 0 0 14px;
    font-size: .8125rem;
    line-height: 1.5;
    color: #595959;
}

.advisor__options { display: flex; flex-direction: column; gap: 10px; }

/* Kurze Labels (Speisen) zweispaltig: 9 Optionen brauchen einspaltig 548 px,
   zweispaltig 300 px — damit passen sie ohne Scrollen ins sichtbare Fenster.
   Eine 343 px breite Zeile für das Wort „Fisch" ist verschenkte Fläche. */
.advisor__options--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.advisor__options--grid .advisor__option { text-align: center; }

/* Volle Zeilenbreite: sicher über der 44-px-Marke und mit dem Daumen
   erreichbar, ohne zielen zu müssen. */
.advisor__option {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid var(--color-border, #dcdcde);
    border-radius: calc(var(--border-radius, 12px) / 2);
    background: #fff;
    color: var(--color-primary, #101222);
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.advisor__option-label { display: block; font-weight: 500; }

/* Die Erklärung darf den Knopf nicht dominieren — sie ist Beiwerk,
   das nur gelesen wird, wenn jemand unsicher ist. */
.advisor__option-hint {
    display: block;
    margin-top: 3px;
    font-size: .8125rem;
    line-height: 1.4;
    color: #595959;
}

.advisor__option:hover,
.advisor__option:focus-visible {
    border-color: var(--color-accent, #c5a44e);
    background: var(--color-light, #faf8f5);
}

/* ─── Ergebnis ──────────────────────────────────────────── */

.advisor__card {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border, #f0f0f0);
    color: inherit;
    text-decoration: none;
}

.advisor__card:last-of-type { border-bottom: none; }

/* Der Pfeil macht die Karte als Ziel erkennbar — ohne ihn wirkte sie wie eine
   reine Auflistung. */
.advisor__card-go {
    font-family: MaterialIcons, sans-serif;
    font-size: 22px;
    margin-left: auto;
    flex: 0 0 auto;
    color: #767676;
}

.advisor__card:hover,
.advisor__card:focus-visible {
    background: var(--color-light, #faf8f5);
}
.advisor__card:hover .advisor__card-go { color: var(--color-primary, #101222); }

.advisor__card-img {
    flex: 0 0 64px;
    width: 64px;
    height: 84px;
    object-fit: contain;
}

.advisor__card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.advisor__card-name { font-weight: 600; font-size: 1rem; }

/* Die Begründung trägt die Empfehlung — deshalb in der Akzentfarbe, aber
   in einem Ton, der auf Weiß die 4,5:1 erreicht. */
/* Rolle im Vergleich — klein und ruhig, sie ordnet ein, sie schreit nicht. */
.advisor__card-role {
    font-size: .6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #767676;
}

.advisor__card-price { font-size: .9375rem; font-weight: 600; }

/* Geschmacksbild („Kräftig & intensiv · Trocken") — macht die drei
   Vorschläge vergleichbar, ohne drei Produktseiten öffnen zu müssen. */
.advisor__card-taste {
    font-size: .8125rem;
    color: #595959;
}

.advisor__card-reason { font-size: .875rem; color: #7a5220; }

.advisor__card-note { font-size: .8125rem; color: #595959; line-height: 1.45; }

/* ─── Die drei Vorschläge auf der Produktseite ──────────── */

/* Form bewusst identisch zum Jahrgangs-Umschalter (`.pdp__vintages`), der auf
   derselben Seite steht: Beschriftung, dann Chips, der aktuelle markiert.
   Keine neue Formsprache — das Projekt hat davon ohnehin zu viele. */

.advisor-picks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
}

.advisor-picks[hidden] { display: none !important; }

.advisor-picks__label {
    font-size: .8125rem;
    color: #595959;
    margin-right: 2px;
}

.advisor-picks__item {
    display: inline-flex;
    /* `baseline` liess Name und Preis auf unterschiedlichen Hoehen sitzen und
       den Text im Chip nach oben rutschen — hier gehoert alles auf eine
       gemeinsame Mitte. */
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 5px 14px 5px 6px;
    border: 1px solid var(--color-border, #dcdcde);
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary, #101222);
    font-size: .8125rem;
    text-decoration: none;
    transition: border-color .15s ease;
}

.advisor-picks__item:hover { border-color: var(--color-accent, #c5a44e); }

/* „Ihre Wahl" — der aktuelle Wein bleibt stehen und wird markiert, statt zu
   verschwinden. Ihn auszublenden würde die Reihe bei jedem Klick umbauen. */
.advisor-picks__item.is-active {
    border-color: var(--color-primary, #101222);
    background: var(--color-light, #faf8f5);
    font-weight: 600;
    cursor: default;
}

/* Kleines Flaschenbild — beim Wein ist das Etikett der Wiedererkennungsanker. */
.advisor-picks__img {
    width: 28px !important;
    height: 34px !important;
    max-width: 28px !important;
    object-fit: contain;
    flex: 0 0 auto;
}

.advisor-picks__item:not(:has(.advisor-picks__img)) { padding-left: 14px; }

.advisor-picks__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
    text-align: left;
}

.advisor-picks__name  { font-size: .8125rem; }
.advisor-picks__price { font-size: .75rem; color: #595959; }
.advisor-picks__item.is-active .advisor-picks__price { color: inherit; }

/* Am Handy tragen die Chips zu viel Höhe im ohnehin engen Kopfbereich — dort
   genügt die Leiste unten mit dem Rückweg. */
@media (max-width: 768px) {
    .advisor-picks { display: none; }
}

/* ─── Rückweg auf der Produktseite: Desktop ─────────────── */

/* Am Handy trägt die Leiste unten den Rückweg; dort ist dieser Link überflüssig
   und würde eine zweite Ansage derselben Sache sein. */
.advisor-backlink { display: none; }
.advisor-backlink[hidden] { display: none !important; }

@media (min-width: 769px) {
    .advisor-backlink:not([hidden]) {
        display: block;
        margin: -8px 0 16px;
    }

    .advisor-backlink__btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        padding: 0;
        border: none;
        background: none;
        color: var(--color-primary, #101222);
        font-size: .875rem;
        cursor: pointer;
        /* KEINE Unterstreichung am Knopf: Sie wird auf alle Nachfahren
           durchgezeichnet — auch auf das Icon — und laesst sich dort NICHT
           per `text-decoration: none` abschalten. Deshalb traegt sie das
           Label-Element. Siehe .claude/rules/icon-link-underline.md */
        text-decoration: none;
    }

    .advisor-backlink__label {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .advisor-backlink__btn:hover { color: var(--color-accent, #c5a44e); }
    .advisor-backlink__btn .icon { font-family: MaterialIcons, sans-serif; font-size: 18px; }
}

/* ─── Leiste auf der Produktseite ───────────────────────── */

/* Bewusst KEINE eigene Formsprache: Die Leiste nutzt `.shop__appbar` aus dem
   Theme, also exakt das Element, aus dem der Kunde gerade kommt. Hier stehen
   nur die Abweichungen. */

.advisor-bar { display: none; }

@media (max-width: 768px) {
    .advisor-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 29;                 /* unter der Kaufleiste (30) */
    }

    /* ABLÖSEN statt stapeln.
       Gestapelt belegten Kauf- und Navigationsleiste zusammen 206 von 629 px —
       ein Drittel des Bildschirms, dauerhaft. Die Kaufleiste allein ist schon
       149 px hoch (Staffelauswahl + Kaufzeile). Deshalb: Sobald sie erscheint,
       weicht die Navigation. Der Kunde ist in dem Moment beim Kaufentscheid,
       nicht beim Zurückgehen — und ein kurzes Hochscrollen holt sie zurück,
       weil die Kaufleiste dann selbst wieder verschwindet. */
    .advisor-bar {
        transform: translateY(0);
        transition: transform .22s ease;
    }
    .advisor-bar.is-hidden {
        transform: translateY(100%);
        pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .advisor-bar { transition: none; }
    }

    /* Der Seitenfuß braucht Platz, sonst liegt die Leiste auf dem Inhalt. */
    body.a148-has-advisor-bar .site-footer {
        padding-bottom: calc(var(--advisor-bar-h, 56px) + env(safe-area-inset-bottom, 0px));
    }

    /* Der Rückweg ist ein <a>, die Shop-Leiste enthält sonst nur <button>.
       Die Link-Unterstreichung des Themes traf deshalb den Text UND das Icon —
       ein unterstrichenes Icon sieht nach Fehler aus. */
    .advisor-bar a,
    .advisor-bar a:hover,
    .advisor-bar a:focus,
    .advisor-bar a:focus-visible,
    .advisor-bar a .icon,
    .advisor-bar a .shop__appbar-label {
        text-decoration: none;
    }

    /* Liegt ein Beratungsergebnis vor, ist das der wichtigere Rückweg. */
    .advisor-bar [data-advisor-has-result] { color: var(--color-accent, #c5a44e); }
    .advisor-bar [data-advisor-has-result] .icon { color: inherit; }
}

/* ─── Desktop: zentriertes Fenster statt Blatt von unten ── */

/* `.a148-sheet` ist als Bottom-Sheet gebaut. Auf dem Handy ist das richtig; auf
   dem Desktop klebte das Panel mit 828 px Höhe am unteren Rand eines 900-px-
   Fensters, und der Ziehgriff bedeutet mit einer Maus nichts.
 *
 * BREAKPOINT 1024 + (pointer: fine), nicht 769: Ein iPad Pro meldet 1024 CSS-px,
 * wird aber in der Hand gehalten — dort ist ein Blatt am unteren Rand besser
 * erreichbar als ein Fenster in der Bildschirmmitte. Dieselbe Grenze zieht das
 * Projekt schon bei der Verkostungs-Leiste (_wine-tasting.scss). */

@media (min-width: 1024px) and (pointer: fine) {
    .advisor.a148-sheet { align-items: center; }

    .advisor .a148-sheet__panel {
        /* 560 = Breite von `.upsell-modal__panel` UND der heutige max-width des
           Sheets. Damit bleiben Antwort-Raster und Ergebniskarten in der
           Breite, in der sie schon geprüft sind. 600 wäre eine dritte
           Fensterbreite im Projekt gewesen. */
        max-width: 560px;

        /* Gegen das Springen: Bei zentrierter Ausrichtung wandert der Kopf,
           sobald eine Frage 3 statt 9 Antworten hat — bei jedem Klick. 480
           deckt die längste Frage ab, danach bewegt sich nichts mehr. */
        min-height: 480px;

        /* Das Ergebnis misst rund 730 px (drei Karten, Winzerzeile, Paket).
           Mit 720 hätte ausgerechnet der Moment gescrollt, für den das
           Desktop-Fenster gebaut ist. */
        max-height: min(86vh, 780px);

        border-radius: var(--border-radius, 12px);

        /* KEIN Schlagschatten: Weder `.login-modal` noch `.upsell-modal` haben
           einen — der abgedunkelte Hintergrund trägt die Ebene. */
        box-shadow: none;

        /* Bewegung wie beim Login-Fenster. Ohne diese Überschreibung galt
           weiter `translateY(100%)` aus der Blatt-Komponente: Das Fenster
           schoss von der Bildschirmunterkante in die Mitte — auf dem Handy
           richtig, hier falsch (gemessen: translateY(160px) mitten in der
           Bewegung). */
        opacity: 0;
        transform: translateY(20px) scale(.98);
        transition: opacity .3s ease, transform .4s cubic-bezier(.19, 1, .22, 1);
    }

    /* Spezifität 0,3,0 — schlägt die Blatt-Regel (0,2,0) unabhängig von der
       Ladereihenfolge der Stylesheets. */
    .advisor.a148-sheet.is-open .a148-sheet__panel {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Der Ziehgriff ist eine Geste ohne Entsprechung an der Maus — und zugleich
       ein unbeschriftetes Schließfeld. Schließen bleibt über X, Hintergrund
       und Escape. */
    .advisor .a148-sheet__handle { display: none; }

    .advisor .advisor__head { padding: 24px 24px 12px; }

    /* Die Blatt-Komponente zentriert den Schließen-Knopf per top:50% in der
       Kopfzone; mit dem größeren Kopfabstand rutschte er unter die
       Schrittzeile. */
    .advisor .a148-sheet__close { top: 20px; right: 12px; transform: none; }
}

/* ─── Wer berät ─────────────────────────────────────────── */

.advisor__by {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}

.advisor__by-face {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.advisor__by-name { font-size: .875rem; color: #595959; }

/* ─── Prämierungen ──────────────────────────────────────── */

.advisor__card-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* `!important` ist hier NICHT Bequemlichkeit, sondern noetig: Eine globale
   Bild-Regel im Theme setzt `max-width: 100%` und `height: auto` mit
   `!important` (WooCommerce-Bildkorrektur). Ohne Gegenwehr rendert ein
   300x300-Logo deshalb 257x257 px und blaeht die Karte von 220 auf 681 px auf.
   Gegen `!important` hilft nur `!important` mit hoeherer Spezifitaet. */
.advisor .advisor__badge {
    height: 32px !important;
    width: auto !important;
    max-width: 80px !important;
    object-fit: contain;
}

.advisor__badge--text {
    height: auto;
    padding: 2px 8px;
    border: 1px solid var(--color-border, #dcdcde);
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    color: #595959;
}

/* ─── Paket-Abschluss ───────────────────────────────────── */

.advisor__bundle {
    margin: 18px 0 4px;
    padding: 16px;
    border: 1px solid var(--color-border, #e2e2e2);
    border-radius: calc(var(--border-radius, 12px) * 2 / 3);
    background: var(--color-light, #faf8f5);
}

.advisor__bundle-title {
    margin: 0 0 10px;
    font-size: .8125rem;
    font-weight: 600;
}

.advisor__bundle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1px solid var(--color-primary, #101222);
    border-radius: calc(var(--border-radius, 12px) / 2);
    background: #fff;
    color: var(--color-primary, #101222);
    font-size: .9375rem;
    text-align: left;
    cursor: pointer;
}

.advisor__bundle-btn:last-child { margin-bottom: 0; }
.advisor__bundle-btn[disabled] { opacity: .6; cursor: default; }

/* „Versand frei" erscheint nur, wenn die Schwelle mit dieser Menge wirklich
   fällt — deshalb darf es auch deutlich aussehen. */
.advisor__bundle-free {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--color-primary, #101222);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.advisor__link {
    border: none;
    background: none;
    padding: 8px 0;
    min-height: 44px;
    color: var(--color-primary, #101222);
    font-size: .875rem;
    text-decoration: underline;
    cursor: pointer;
}

.advisor__link--block { display: block; width: 100%; text-align: left; margin-top: 8px; }

/* ─── Bewegung sparsam ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .advisor-entry__btn,
    .advisor__option { transition: none; }
}