/* ============================================================
   FOGSMOKE Redesign — Doofinder-Such-Layer (Sitzung DOOFINDER)
   Alle Regeln hängen unter .dfd-root: das Element existiert nur,
   wenn der Layer offen ist — kein Einfluss auf den Rest der Seite.
   Plugin-Dateien bleiben unangetastet (Update-Sicherheit).
   Tokens: Magenta #c90f88 / dunkel #830779 / Flächen #fdf4fa,
   Text #111114 / weich #3a3640, "FS Display" (Anton 400), kantig.
   ============================================================ */

/* Doofinder-eigene Farbvariablen auf die kontrastsicheren Header-Töne
   heben: #c90f88 hält 5,37:1 mit weißer Schrift (F26: #e5169f fiel mit
   4,24:1 durch). !important nötig: Doofinder injiziert seine Werte zur
   Laufzeit nach unserem Bundle. */
html .dfd-root {
    --df-accent-primary: #c90f88 !important;
    --df-accent-primary-hover: #830779 !important;
    --df-accent-primary-active: #830779 !important;
    --df-card-flag-discount-background: #c90f88 !important;
    --df-card-flag-out-of-stock-background: var(--brand-tinte-weich) !important;
    --df-card-flag-out-of-stock-color: #fafafa !important;
}

/* ---------- Typo: Abschnittstitel wie die Redesign-Sektionen ---------- */
.dfd-root .dfd-title-lg,
.dfd-root .dfd-title-sm {
    font-family: "FS Display", "FS Text", sans-serif;
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #111114;
}

/* ---------- Kantig statt rund ---------- */
.dfd-root .dfd-card,
.dfd-root .dfd-card-thumbnail,
.dfd-root .dfd-card-flag,
.dfd-root .dfd-suggestion-button,
.dfd-root .dfd-view-all-link-button,
.dfd-root .dfd-btn-icon,
.dfd-root .dfd-carousel-arrow,
.dfd-root .dfd-searchbox,
.dfd-root .dfd-searchbox-input,
.dfd-root input,
.dfd-root button {
    border-radius: 0;
}

/* ---------- Suchfeld: klare schwarze Kante, Magenta beim Fokus ---------- */
.dfd-root .dfd-searchbox {
    border: 2px solid #111114;
}
.dfd-root .dfd-searchbox:focus-within {
    border-color: #c90f88;
    box-shadow: none;
}

/* ---------- Vorschlags-Chips wie die Finder-Chips ---------- */
.dfd-root .dfd-suggestion-button {
    background: #ffffff;
    border: 1px solid #111114;
    color: #111114;
}
.dfd-root .dfd-suggestion-button:hover,
.dfd-root .dfd-suggestion-button:focus-visible {
    background: #fdf4fa;
    border-color: #c90f88;
    color: #111114;
}

/* ---------- Produktkarten: Streichpreis grau, Aktionspreis Magenta ---------- */
.dfd-root .dfd-card-price--sale {
    color: #c90f88;
}

/* ---------- Trusted-Shops-Badge weg, solange der Layer offen ist ----------
   (gleiche Praxis wie beim Age-Gate; die Klasse dfd-fixed-layout sitzt am
   html-Element und existiert nur bei offenem Layer) */
/* 27.08.: visibility reichte nicht mehr — TS setzt in seinen Kindern (und im
   Shadow DOM von <trstd-login>) selbst wieder visibility:visible, und ein Kind
   mit explizitem visible uebersteuert den versteckten Vorfahren. display:none
   am Container bzw. Shadow-HOST kappt den ganzen Teilbaum, dagegen kommt auch
   Shadow-Inhalt nicht an. Beim Schliessen des Layers faellt die Klasse vom
   html-Element und der Badge erscheint unveraendert wieder (geprueft). */
html.dfd-fixed-layout div[id^="trustbadge-container-"],
body.dfd-fixed-layout div[id^="trustbadge-container-"],
html.dfd-fixed-layout [id^="minimized-trustbadge-"],
html.dfd-fixed-layout trstd-login {
    display: none !important;
}

/* ---------- „Alle anzeigen": Redesign-CTA (schwarz, Versalien) ---------- */
.dfd-root .dfd-view-all-link-button {
    background: #111114;
    border: 2px solid #111114;
    color: #ffffff;
    font-family: "FS Display", "FS Text", sans-serif;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.dfd-root .dfd-view-all-link-button:hover,
.dfd-root .dfd-view-all-link-button:focus-visible {
    background: #c90f88;
    border-color: #c90f88;
    color: #ffffff;
}

/* ============================================================================
   SUCH-LAYER-KARTEN AUF fs-KARTENNORM — Sitzung DOOFINDER, 27.08.2026
   Auftrag Yunus: "doofinder produktkarten auch so wie unsere eigenen machen,
   sodass man nicht sieht dass das ein plugin ist".

   NORM ist wie beim dfwidget-Abschnitt unten die Kompaktkarte .fs-cc aus
   fs-produktkarte.css (Besitzer PRODUKTKARTE): Rahmen #e3e3e7 - Tinte #111114 -
   Name "FS Text" .875rem, zwei Zeilen reserviert - Preis "FS Display" 1.32rem
   SCHWARZ (Magenta traegt nur Sale und Hover) - Akzentbalken 3px #c90f88 unter
   dem Bild - ganze Karte ist die Klickflaeche.
   Gemessener Ausgangsstand (27.08.): Rahmen #cbcccd, Tinte #323334, Preis
   "FS Text" 700 in Magenta, 3-zeiliger Beschreibungsanriss, unterstrichener
   "Mehr sehen"-Textlink — die vier Dinge, an denen man das Plugin erkannte.

   !important aus demselben Grund wie im ganzen uebrigen Abschnitt: das
   Livelayer-CSS kommt zur Laufzeit NACH unserem Bundle.
   RUECKBAU: diesen Abschnitt loeschen.
   ============================================================================ */

/* --- Karte: weisse Flaeche, eine Haarlinie, Tinte nach Kanon --- */
.dfd-root .dfd-card {
    background: #ffffff !important;
    border: 1px solid #e3e3e7 !important;
    box-shadow: none !important;
    color: #111114 !important;
}

/* --- Bild: grauer Grund wie .fs-cc__media, Akzentbalken als eigene Kante
       UNTER dem Bild (nie im Bild — gleiche Regel wie an der Vollkarte) --- */
.dfd-root .dfd-card-thumbnail {
    background: #fafafa !important;
}
.dfd-root .dfd-card-media {
    border-bottom: 3px solid #c90f88;
}

/* --- Produktname: Norm-Typo, zwei Zeilen reserviert (Ansage Yunus 27.08.:
       Preise in jeder Reihe auf gleicher Hoehe), Magenta erst beim Zeigen --- */
.dfd-root .dfd-card-title {
    font-family: "FS Text", system-ui, sans-serif !important;
    font-size: .875rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: #111114 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.6em;
}
.dfd-root .dfd-card:hover .dfd-card-title,
.dfd-root .dfd-card:focus-within .dfd-card-title {
    color: #c90f88 !important;
}

/* --- Beschreibungsanriss raus: die Norm-Karte fuehrt Name und Preis.
       Drei Zeilen SEO-Text auf 240px Breite sind das deutlichste
       Fremdkoerper-Signal des Layers. --- */
.dfd-root .dfd-card-description {
    display: none !important;
}

/* --- Preis: Anton, dominant, SCHWARZ — wie .fs-cc__price. Der bisherige
       Magenta-Preis verstiess gegen den Kanon (Magenta = CTA/Sale, nicht
       Regelpreis). Sale bleibt Magenta (Regel weiter oben), Streichpreis
       gedaempft. --- */
.dfd-root .dfd-card-price {
    font-family: "FS Display", "FS Text", sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.32rem !important;
    line-height: 1.12 !important;
    letter-spacing: .01em;
    color: #111114 !important;
    font-synthesis: none;
}
/* Der Streichpreis traegt KEINE eigene Klasse: er ist das .dfd-card-price,
   das im Sale-Fall HINTER .dfd-card-price--sale steht (gemessen 27.08.,
   line-through kommt von Doofinder selbst). */
.dfd-root .dfd-card-price--sale ~ .dfd-card-price,
.dfd-root .dfd-card-pricing [class*="old"],
.dfd-root .dfd-card-price--strikethrough {
    font-family: "FS Text", system-ui, sans-serif !important;
    font-size: .8rem !important;
    font-weight: 400 !important;
    color: #6b6b75 !important;
    text-decoration: line-through;
}
.dfd-root .dfd-card-price--sale {
    color: #c90f88 !important;
}

/* --- "Mehr sehen": kein Textlink — die ganze Karte ist die Klickflaeche,
       wie an allen fs-Karten (Karte-Klickflaeche). Der Anker bleibt im DOM
       (Semantik, Mittelklick, aria-labelledby) und spannt sich unsichtbar
       ueber die Karte; .dfd-card steht bereits auf position:relative. --- */
.dfd-root .dfd-card-link {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
}
.dfd-root .dfd-card-link > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* Fokusring nach Kanon (2px #e5169f), da der Link keine Textform mehr hat */
.dfd-root .dfd-card-link:focus-visible {
    outline: 2px solid #e5169f;
    outline-offset: -2px;
}

/* --- Karten-Hover: Magenta-Kontur ohne Layout-Sprung (Conversion-Auftrag
       27.08.). Die 1px-Haarlinie existiert bereits — es aendert sich nur
       ihre Farbe, kein Rahmen kommt dazu, nichts springt. --- */
.dfd-root .dfd-card:hover,
.dfd-root .dfd-card:focus-within {
    border-color: #c90f88 !important;
}

/* --- iOS-Zoom-Bremse: unter 16px Feldschrift zoomt iOS Safari beim
       Fokussieren die ganze Seite. Gilt fuer das Suchfeld des Layers auf
       allen Breiten (Desktop faehrt ohnehin groesser). --- */
.dfd-root .dfd-searchbox-input {
    font-size: max(16px, 1em);
}

/* --- Touch-Flaechen mobil: die Icon-Knoepfe des Layers (Zurueck/Schliessen,
       Mikrofon) messen 32x32, Filter-Chips 32 hoch — unter 44px verfehlt man
       sie mit dem Daumen (Spec: mindestens 44x44). Nur <992px, der
       Desktop-Layer bleibt kompakt. --- */
@media (max-width: 991.98px) {
    .dfd-root .dfd-btn-icon {
        min-width: 44px;
        min-height: 44px;
    }
    .dfd-root .dfd-smart-filter-button,
    .dfd-root .dfd-suggestion-button {
        min-height: 44px;
    }
}

/* --- Kantig, zweite Runde (27.08., am 360px-Layer ausgemessen): die
       Filter-Familie des Layers faehrt eigene Pillenradien (500-700px) und
       die Kartenflags 4px — alles DF-Injektionen NACH dem Bundle, darum
       !important (die erste kantig-Liste oben verlor genau daran).
       AUSNAHME nach Kanon: die Schieberegler-GRIFFE (.dfd-slider-handle)
       bleiben rund — ein Kreis ist eine Form, kein Radiuswert. --- */
.dfd-root .dfd-smart-filter-button,
.dfd-root .dfd-toggle-filters-button,
.dfd-root .dfd-card-flag,
.dfd-root .dfd-aside,
.dfd-root .dfd-facet-search-container,
.dfd-root .dfd-btn-term-filter,
.dfd-root .dfd-slider-tooltip,
.dfd-root .dfd-slider-target,
.dfd-root .dfd-slider-connects,
.dfd-root .dfd-clear-filters-button,
.dfd-root .dfd-close-filters-button {
    border-radius: 0 !important;
}

/* ============================================================================
   DOOFINDER-EMPFEHLUNGSWIDGETS (.dfwidget-*) — Sitzung CROSSSELLING, 23.08.2026
   Auftrag Yunus: "arbeiten wir mit den moeglichkeiten von doofinder ... und
   passen die PRODUKTKARTEN unserem stil an".

   ABGRENZUNG: Der Abschnitt oben (.dfd-root) ist der SUCH-LAYER. Hier geht es
   um die Empfehlungs-Karussells auf der Produktseite — anderes Bundle
   (recommendations-v2), anderes Klassenpraefix, vorher komplett ungestylt:
   gemessen Radius 8px, Titel "FS Text" 700 ohne Versalien, Rahmen rgba(0,26,51,.157).

   NORM ist die Kompaktkarte .fs-cc aus fs-produktkarte.css (Besitzer:
   PRODUKTKARTE). Die Werte sind von dort uebernommen, NICHT neu erfunden:
   Radius 0 - Rahmen #e3e3e7 - Name "FS Text" .875rem - Preis "FS Display"
   1.32rem - CTA #c90f88 (Flaeche) / #830779 (Hover) - Akzentbalken 3px.
   Aendert PRODUKTKARTE die Norm, ist dieser Abschnitt nachzuziehen.

   !important ist hier kein Schmuddelwerkzeug, sondern noetig: Doofinder spielt
   sein Custom-CSS aus der Store-Config zur LAUFZEIT nach unserem Bundle ein
   (aktuell u.a. `.dfwidget-host .df-add-to-cart-btn{background-color:#830779}`
   — das ist der HOVER-Ton als Grundflaeche, derselbe Fehler, den PRODUKTKARTE
   an .fs-cc korrigiert hat). Ohne !important gewinnt die Fremdregel.

   RUECKBAU: diesen Abschnitt loeschen. Kein anderes Stylesheet ist beruehrt.
   ============================================================================ */

.dfwidget-host {
    --fs-primary: #c90f88;
    --fs-primary-hover: #830779;
    --fs-ink: #111114;
    --fs-ink-2: #6b6b75;
    --fs-line: #e3e3e7;
    --fs-surface: #ffffff;
}

/* --- Gruppentitel: exakt die Norm der nativen Empfehlungsgruppen
       (.fs-rec .hr-sect-line), damit die Doofinder-Gruppe neben "PASSENDE PODS
       UND LIQUIDS" nicht als Fremdkoerper steht. --- */
.dfwidget-host .dfwidget-title {
    font-family: "FS Display", "FS Text", sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.05rem !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fs-ink) !important;
}

/* --- Die Karte: kantig, weisse Flaeche, eine Haarlinie --- */
.dfwidget-host .dfwidget-card {
    background: var(--fs-surface) !important;
    border: 1px solid var(--fs-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
}

/* --- Bild: 1:1, vollstaendig sichtbar (nie beschnitten), grauer Grund wie
       .fs-cc__media. Danach der 3px-Akzentbalken als eigene Kante UNTER dem
       Bild — bewusst kein Overlay im Bild, gleiche Regel wie an der Vollkarte. --- */
.dfwidget-host .card-media,
.dfwidget-host .card-media-thumbnail {
    border-radius: 0 !important;
    /* !important auch hier: ohne das bleibt die Flaeche weiss (gemessen), weil
       Doofinder seinen eigenen Hintergrund zur Laufzeit nachschiebt. */
    background: #fafafa !important;
}
.dfwidget-host .card-media img {
    object-fit: contain !important;
    border-radius: 0 !important;
}
.dfwidget-host .card-media {
    border-bottom: 3px solid var(--fs-primary);
}

/* --- Produktname: Textschrift, zwei Zeilen, Magenta erst beim Zeigen --- */
.dfwidget-host .card-title {
    font-family: "FS Text", system-ui, sans-serif !important;
    font-size: .875rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: var(--fs-ink) !important;
}
.dfwidget-host .dfwidget-card:hover .card-title {
    color: var(--fs-primary) !important;
}

/* --- Beschreibung raus: die Norm-Karte fuehrt Marke, Name, Preis, Aktion.
       Ein angerissener Beschreibungstext ist auf 200px Breite unlesbar und
       kostet die Hoehe, die der Kaufknopf braucht. --- */
.dfwidget-host .card-description {
    display: none !important;
}

/* --- Preis: Anton, dominant, schwarz (Magenta bleibt dem CTA vorbehalten) --- */
.dfwidget-host .card-pricing .card-price {
    font-family: "FS Display", "FS Text", sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.32rem !important;
    line-height: 1.12 !important;
    letter-spacing: .01em;
    color: var(--fs-ink) !important;
}
/* Streichpreis gedaempft, Aktionspreis im Markenton — wie an .fs-cc__price. */
.dfwidget-host .card-price--old,
.dfwidget-host .card-price-old {
    font-family: "FS Text", system-ui, sans-serif !important;
    font-size: .8rem !important;
    color: var(--fs-ink-2) !important;
    text-decoration: line-through;
}
.dfwidget-host .card-price--sale,
.dfwidget-host .card-price-sale {
    color: var(--fs-primary) !important;
}

/* --- Kaufknopf: Primaer-CTA nach Kanon. Flaeche #c90f88 (5,37:1 mit Weiss),
       #830779 ist NUR der Hover-Zustand.
       KEINE Breiten- oder Schriftregeln: der Knopf ist ein reiner ICON-Knopf,
       den Doofinder absolut in die untere rechte Kartenecke setzt (gemessen
       44x44, inset 16px). Er enthaelt kein Textkind — text-transform und
       font-family waeren tote Regeln, width:100% wird von der absoluten
       Positionierung ohnehin neutralisiert. Die native .fs-cc__btn--cart ist
       mit 26x44 genauso ein Icon-Ziel, die Form ist also normkonform. --- */
.dfwidget-host .df-add-to-cart-btn {
    background-color: var(--fs-primary) !important;
    border: 1px solid var(--fs-primary) !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    min-height: 44px;
    min-width: 44px;
}
.dfwidget-host .df-add-to-cart-btn:hover,
.dfwidget-host .df-add-to-cart-btn:focus-visible {
    background-color: var(--fs-primary-hover) !important;
    border-color: var(--fs-primary-hover) !important;
    color: #ffffff !important;
}
.dfwidget-host .df-add-to-cart-btn svg {
    fill: currentColor;
}

/* --- Karussell-Pfeile: kantig und schwarz wie die uebrigen Slider --- */
.dfwidget-host .carousel-arrow {
    border-radius: 0 !important;
    background: var(--fs-surface) !important;
    border: 1px solid var(--fs-ink) !important;
    color: var(--fs-ink) !important;
}
.dfwidget-host .carousel-arrow:hover {
    background: var(--fs-ink) !important;
    color: #ffffff !important;
}
.dfwidget-host .carousel-arrow svg {
    fill: currentColor;
}

/* --- Flaggen (Rabatt / ausverkauft): Rechtecke, keine Pillen --- */
.dfwidget-host [class*="card-flag"],
.dfwidget-host [class*="card-badge"] {
    border-radius: 0 !important;
    font-family: "FS Display", "FS Text", sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
}

@media (hover: none) {
    .dfwidget-host .df-add-to-cart-btn { min-height: 44px; }
}

/* ============================================================
   EMPFEHLUNGS-WIDGETS STILLGELEGT   (23.08.2026, Sitzung PRODUKTKARTE)
   ============================================================
   ANSAGE Yunus, 23.08.2026: "schalte doofinder ab! für empfehlungen ganz!"

   WARUM HIER UND NICHT IM DOOFINDER-BACKEND:
   Der saubere Weg waere die Doofinder-App gewesen. Dort ist der Bereich aber
   nicht bedienbar — die Recommendations stehen im Konto auf "Start free Trial /
   Subscribe", sind also nicht (mehr) im Abo. Die beiden Widgets laufen trotzdem
   weiter, weil sie in der ausgelieferten Store-Konfiguration stehen
   (eu1-config.doofinder.com/2.x/b511f0fd-…js, last-modified 28.07.2026,
   CDN-Cache s-maxage 1 Jahr). Gemessen auf LIVE am 23.08.: auf
   /Elfliq-Liquid-by-Elfbar-Blueberry rief die Seite beide Widgets auf und
   rendert 20 Karten unter "Aehnliche Produkte".

   WARUM NICHT DEN ANKER UMBENENNEN:
   Das zweite Widget haengt an .slick-slider-other.is-not-opc — dort ist der
   Anker bereits umbenannt. Das erste haengt an #product-offer, und dieses
   Element wird gebraucht: fs-karten.js unterscheidet daran Listing von
   Produktseite, fs-pdp.js liest darueber den Preis, drei Plugins referenzieren
   es. Umbenennen haette stille Folgeschaeden. Ansage Yunus: "nicht rauscodieren".

   WAS DIESE REGEL TUT UND WAS NICHT:
   Sie blendet die Widget-Behaelter aus. Die Skripte laden weiterhin und stellen
   ihre Anfragen — das ist Ballast, aber kein Schaden. Sichtbar ist nichts mehr.
   Der SUCH-LAYER (.dfd-root, alles weiter oben in dieser Datei) bleibt
   ausdruecklich unberuehrt: er traegt die komplette Suche.

   RUECKBAU: diesen Block loeschen. Sobald die Widgets im Doofinder-Konto
   wirklich abgeschaltet sind, kann er ersatzlos weg. */
.dfwidget-host,
.dfwidget-carousel,
[class^="dfwidget-"],
[class*=" dfwidget-"],
[id^="dfwidget"],
[data-df-widget] {
    display: none !important;
}