/* ══════════════════════════════════════════════════════════════
   CANDY GLASS LAYER + 2026 Typo (lädt NACH shop.css)
   Dezente Tiefe & Glanz, WhatsApp-Grün, neues Kategorie-Design.
   ══════════════════════════════════════════════════════════════ */
:root{--grad:linear-gradient(135deg,#C86DC5,#A764CB);--sheen:inset 0 1px 0 rgba(255,255,255,.85)}
html.dark{--grad:linear-gradient(135deg,#D675B2,#B96FD0);--sheen:inset 0 1px 0 rgba(255,255,255,.10)}

/* Moderne Schrift */
body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;letter-spacing:-.011em}
h1,h2,h3,.cat-tab-main,.section-label,.footer-brand{letter-spacing:-.02em}

/* Candy-Glas für Karten (Tiefe + sanfter Glanz oben) */
.rv-card,.contact,.ts-card{
  background:linear-gradient(160deg,color-mix(in srgb,var(--card) 92%,#fff),color-mix(in srgb,var(--card) 72%,transparent))!important;
  border:1px solid var(--glass-border)!important;border-radius:16px!important;
  box-shadow:var(--sheen),0 14px 30px -20px var(--glow)!important;
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
}

/* Flavor-/Produktkarten: nur etwas mehr Tiefe (Layout unangetastet) */
.fi{box-shadow:var(--sheen),0 10px 24px -20px var(--glow)!important;border-radius:14px!important}

/* Primär-Buttons: Candy-Verlauf + Glanz */
.fab-btn,.cart-bar-btn{background:var(--grad)!important;box-shadow:var(--sheen),0 12px 26px -10px var(--glow)!important}

/* WhatsApp in WhatsApp-Grün */
.wa-btn{background:#25D366!important;box-shadow:var(--sheen),0 12px 26px -10px rgba(37,211,102,.45)!important}
.wa-btn:hover{background:#1ebe5b!important;transform:translateY(-1px)}

/* Engere Abstände unten (Kundenstimmen → Fragen → Bottom-Nav) */
.section-label{margin:20px 0 10px!important}
.reviews{margin-top:14px!important}
.contact{margin-top:16px!important;padding:22px!important}
.footer{margin-top:20px!important;padding:22px 20px 24px!important}

/* ══════════════════════════════════════════════════════════════
   KATEGORIEN 40K / 100K / 50K — neues Candy-Karten-Design
   ══════════════════════════════════════════════════════════════ */
.category-tabs{
  background:linear-gradient(160deg,color-mix(in srgb,var(--card) 88%,#fff),color-mix(in srgb,var(--card) 68%,transparent))!important;
  border:1px solid var(--glass-border)!important;border-radius:18px!important;
  padding:7px!important;gap:7px!important;
  box-shadow:var(--sheen),0 12px 28px -18px var(--glow)!important;
}
.cat-tab{
  border:1px solid transparent!important;border-radius:13px!important;
  background:color-mix(in srgb,var(--surface-2) 65%,transparent)!important;color:var(--ink-soft)!important;
  padding:13px 8px 11px!important;gap:3px!important;position:relative;overflow:hidden;
  transition:transform .22s cubic-bezier(.34,1.4,.5,1),box-shadow .22s,background .22s,color .22s!important;
}
.cat-tab-main{font-size:1.18rem!important;font-weight:800!important;line-height:1!important}
.cat-tab small{font-size:.66rem!important;font-weight:700!important;opacity:.6!important;margin-top:1px!important}
.cat-tab.active{
  background:var(--grad)!important;color:#fff!important;border-color:transparent!important;
  box-shadow:var(--sheen),0 12px 24px -8px var(--glow)!important;
  transform:translateY(-2px) scale(1.03)!important;
}
.cat-tab.active .cat-tab-main,.cat-tab.active small{color:#fff!important;opacity:.92!important}
.cat-tab:not(.active):active{transform:scale(.96)!important}
/* feiner Glanzstreifen oben auf der aktiven Karte */
.cat-tab.active::before{content:"";position:absolute;inset:0 0 auto 0;height:42%;
  background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);pointer-events:none}

/* Lücke schließen: Alt-Padding der .wrap entfernen, Bottom-Nav-Abstand straffen */
.wrap{padding-bottom:0!important}
body{padding-bottom:calc(80px + env(safe-area-inset-bottom))!important}

/* ══════════════════════════════════════════════════════════════
   FEINTUNING: Kategorien ohne Icon + kleiner, Plus-first, Bottom-Nav
   ══════════════════════════════════════════════════════════════ */

/* Kategorie-Icon weg + Karten kompakter */
.cat-tab-icon{display:none!important}
.category-tabs{padding:6px!important;gap:6px!important;border-radius:15px!important;margin:8px 0 14px!important}
.cat-tab{padding:9px 6px 8px!important;border-radius:11px!important;gap:1px!important}
.cat-tab-main{font-size:1rem!important}
.cat-tab small{font-size:.6rem!important;margin-top:0!important}
.cat-tab.active{transform:translateY(-1px) scale(1.02)!important}

/* Plus-first: am Anfang nur +, Minus & Anzahl erst wenn ausgewählt */
.fi:not(.has-qty) .fi-ctrl .qbtn:not(.plus),
.fi:not(.has-qty) .fi-ctrl .qnum{display:none!important}

/* ── Bottom-Nav: saubere, gleichwertige Tab-Items ── */
.bottom-nav{padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;gap:0!important}
.bn-item,.bn-cart{
  background:transparent!important;border:0!important;box-shadow:none!important;margin:0!important;
  width:auto!important;height:auto!important;border-radius:0!important;padding:4px 0!important;
  display:grid!important;place-items:center!important;gap:4px!important;cursor:pointer;
  color:var(--muted)!important;font-family:inherit;font-size:.66rem!important;font-weight:700!important;
  line-height:1!important;position:relative;-webkit-tap-highlight-color:transparent;
}
.bn-item svg,.bn-cart svg{width:23px!important;height:23px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important}
.bn-item.active{color:var(--a)!important}
.bn-cart:active,.bn-item:active{color:var(--a)!important;transform:scale(.94)}
.bn-cart .fab-badge{
  position:absolute!important;top:-3px!important;left:50%!important;transform:translateX(7px)!important;
  min-width:17px!important;height:17px!important;padding:0 4px!important;
  background:var(--a)!important;color:#fff!important;border:2px solid var(--surface)!important;
  border-radius:999px!important;font-size:.6rem!important;font-weight:800!important;
  display:none;align-items:center;justify-content:center;box-shadow:none!important;
}
.bn-cart .fab-badge.on{display:flex!important}

/* Cart-Badge: rundes kleines Badge (alte right-Regel neutralisieren) */
.bn-cart .fab-badge{right:auto!important;top:-2px!important;width:auto!important}

/* ══════════════════════════════════════════════════════════════
   Geschmack-Filter als einfache Text-Tabs in EINER Zeile + Trennstrich
   ══════════════════════════════════════════════════════════════ */
.flavor-chips{
  display:flex!important;flex-wrap:nowrap!important;gap:0!important;
  background:transparent!important;border:0!important;border-bottom:1px solid var(--border)!important;
  border-radius:0!important;padding:0!important;margin:12px 2px 8px!important;
  box-shadow:none!important;backdrop-filter:none!important;overflow:visible!important;
}
.flavor-chip{
  flex:1 1 0!important;min-width:0!important;text-align:center;white-space:nowrap!important;
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  color:var(--muted)!important;font-size:.74rem!important;font-weight:700!important;
  padding:9px 3px!important;position:relative!important;transition:color .2s!important;
}
.flavor-chip .fc-emoji{display:none!important}        /* Emoji weg → alles passt in eine Zeile */
.flavor-chip.active{background:transparent!important;color:var(--a)!important;border-color:transparent!important}
.flavor-chip.active::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:2.5px;
  background:var(--grad);border-radius:3px}
.flavor-chip:active{transform:none!important}
@media(min-width:620px){.flavor-chip{flex:0 1 auto!important;padding:9px 12px!important}.flavor-chip .fc-emoji{display:inline!important}}

/* Plus-first: das alleinige "+" rechts halten (sonst rutscht es in Grid-Spalte 1) */
.fi:not(.has-qty) .fi-ctrl{display:flex!important;justify-content:flex-end!important;grid-template-columns:none!important}

/* Platzhalter/Hochkant-Bilder vollständig zeigen (Media-Box fix, Bild contain) */
.fi-media{width:72px!important;height:72px!important;align-self:center!important;overflow:hidden}
.fi-media .fi-img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}

/* Bild absolut in die Media-Box klemmen (verhindert Aufblähen hochkanter Bilder) */
.fi-media{position:relative!important}
.fi-media .fi-img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;padding:7px!important;filter:drop-shadow(0 6px 14px var(--glow))}

/* Zahlungs-Logos (Revolut/Visa/Mastercard) sauber & ohne Abschneiden */
.pay-method{overflow:hidden!important;padding:12px 10px!important}
.pay-method-logos{display:flex!important;align-items:center!important;justify-content:center!important;
  gap:7px!important;flex-wrap:nowrap!important;width:100%!important;max-width:100%!important}
.pay-method-logos img{height:13px!important;width:auto!important;max-width:31%!important;object-fit:contain!important;
  background:transparent!important;border:0!important;padding:0!important}
html.dark .pay-method-logos img{background:#fff!important;border-radius:3px!important;padding:2px 3px!important;height:17px!important;max-width:31%!important}

/* Filter-Tabs sauber proportional: gleiche Spalten, responsive Schrift, kein Überlauf */
.flavor-chips{margin:12px 0 8px!important;padding:0!important;justify-content:space-between!important}
.flavor-chip{flex:1 1 0!important;min-width:0!important;padding:9px 2px!important;text-align:center!important;
  font-size:clamp(.58rem,2.6vw,.74rem)!important;font-weight:600!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important}
@media(min-width:620px){.flavor-chip{flex:0 1 auto!important;padding:9px 14px!important;font-size:.8rem!important}}

/* Filter-Tabs: inhaltsbreit, gleichmäßiger Abstand, mittig (kein Kleben am Rand) */
.flavor-chips{display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;
  align-items:center!important;gap:clamp(8px,3.2vw,20px)!important;
  padding:0 10px!important;margin:12px 0 8px!important;overflow:hidden!important}
.flavor-chip{flex:0 0 auto!important;width:auto!important;min-width:0!important;padding:9px 0!important;
  text-align:center!important;white-space:nowrap!important;
  font-size:clamp(.55rem,2.55vw,.78rem)!important;font-weight:600!important}
.flavor-chip.active::after{left:0!important;right:0!important}
@media(min-width:620px){.flavor-chip{padding:9px 4px!important;font-size:.82rem!important}}

/* Fliegendes, leicht transparentes Deko-Emoji im Karten-Hintergrund */
.fi{overflow:hidden!important}
.fi>.fi-media,.fi>.fi-info,.fi>.fi-price,.fi>.fi-ctrl{position:relative;z-index:1}
.fi-ghost{position:absolute;z-index:0;pointer-events:none;user-select:none;
  left:52%;top:50%;font-size:3rem;line-height:1;white-space:nowrap;opacity:.09;
  transform:translate(-50%,-50%) rotate(-12deg);
  animation:fiFloat 6.5s ease-in-out infinite}
html.dark .fi-ghost{opacity:.15}
@keyframes fiFloat{
  0%,100%{transform:translate(-50%,-50%) rotate(-12deg)}
  50%{transform:translate(-50%,-63%) rotate(-5deg)}
}
@media(prefers-reduced-motion:reduce){.fi-ghost{animation:none}}

/* ══════════════════════════════════════════════════════════════
   SPEED: teures backdrop-blur von Inhaltskarten entfernen
   (dahinter ist nichts zu durchblicken → nur Scroll-Kosten).
   Blur bleibt nur auf funktionalen Overlays (Nav, sticky Tabs).
   ══════════════════════════════════════════════════════════════ */
.fi,.rv-card,.ts-card,.contact{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.fi{background:var(--card)!important}
/* Laufschrift/Reviews bei „reduzierte Bewegung" anhalten */
@media(prefers-reduced-motion:reduce){
  .reviews-inner{animation:none!important}
  .fi-ghost{animation:none!important}
}

/* Warenkorb-Tab (unten) violett hervorheben, sobald Artikel drin sind */
.bn-cart:has(.fab-badge.on){color:var(--a)!important}

/* ══════════════════════════════════════════════════════════════
   Sichtbarer Warenkorb: schwebende Cart-Bar über der Bottom-Nav,
   sobald Artikel drin sind ("X Artikel · CHF Y · Bestellen →").
   ══════════════════════════════════════════════════════════════ */
.cart-bar.visible{
  display:flex!important;align-items:center;justify-content:space-between;gap:12px;
  position:fixed!important;left:50%!important;transform:translateX(-50%);
  bottom:calc(74px + env(safe-area-inset-bottom))!important;
  width:min(460px,calc(100% - 20px))!important;z-index:205!important;
  padding:9px 10px 9px 18px!important;border-radius:999px!important;
  background:color-mix(in srgb,var(--card) 82%,transparent)!important;
  border:1px solid var(--glass-border)!important;
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:var(--sheen),0 16px 36px -14px var(--glow)!important;
  animation:cartBarUp .32s cubic-bezier(.22,1,.36,1) both;
}
.cart-bar-info{font-weight:600!important;font-size:.9rem!important;color:var(--ink)!important}
.cart-bar-btn{background:var(--grad)!important;color:#fff!important;border:0!important;
  padding:11px 22px!important;border-radius:999px!important;font-weight:700!important;font-size:.9rem!important;
  white-space:nowrap;box-shadow:0 8px 18px -8px var(--glow)!important;cursor:pointer}
@keyframes cartBarUp{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
/* Platz reservieren, damit die Leiste nichts verdeckt */
body.has-cart{padding-bottom:calc(146px + env(safe-area-inset-bottom))!important}
@media(prefers-reduced-motion:reduce){.cart-bar.visible{animation:none}}

/* Cart-Bar minimal schlanker */
.cart-bar.visible{padding:7px 8px 7px 16px!important;bottom:calc(72px + env(safe-area-inset-bottom))!important}
.cart-bar-info{font-size:.85rem!important}
.cart-bar-btn{padding:9px 18px!important;font-size:.85rem!important}
body.has-cart{padding-bottom:calc(138px + env(safe-area-inset-bottom))!important}

/* ══════════════════════════════════════════════════════════════
   PROMO-TICKER ganz oben (über der Menüleiste), rotierend
   ══════════════════════════════════════════════════════════════ */
.banner.banner-ticker{
  position:sticky!important;top:0!important;z-index:320!important;
  min-height:38px;height:38px;padding:0 14px!important;
  display:block!important;overflow:hidden!important;position:relative;
}
.shop-topbar{top:var(--banner-h,38px)!important}
.bt-slide{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:6px;white-space:nowrap;overflow:hidden;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .45s ease,transform .45s ease;
}
.bt-slide.is-on{opacity:1;transform:none;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.bt-slide{transition:opacity .3s ease;transform:none}}

/* ══════════════════════════════════════════════════════════════
   Ticker + Menüleiste scrollen weg (nur ganz oben sichtbar)
   ══════════════════════════════════════════════════════════════ */
.banner.banner-ticker{position:relative!important;top:auto!important}
.shop-topbar{position:relative!important;top:auto!important}
/* Kategorie-Leiste dockt dann direkt oben an */
.category-tabs{top:6px!important}

/* Korrektur: Ticker bleibt oben kleben, NUR die Menüleiste scrollt weg */
.banner.banner-ticker{position:sticky!important;top:0!important;z-index:320!important}
.shop-topbar{position:relative!important;top:auto!important}
/* Kategorie-Leiste dockt unter dem Ticker an */
.category-tabs{top:calc(var(--banner-h,38px) + 6px)!important}

/* ══════════════════════════════════════════════════════════════
   DESKTOP-LAYOUT 2.0 (≥760px) — komplett neu, sauber & zentriert
   ══════════════════════════════════════════════════════════════ */
.desktop-cart{display:none}
@media(min-width:760px){
  /* Grundraster: alles mittig auf 1080px */
  .wrap{max-width:1080px!important;margin:0 auto!important;padding-left:24px!important;padding-right:24px!important}
  .hero.hero-slider{max-width:1032px!important;margin:16px auto 0!important;border-radius:18px!important}
  body{padding-bottom:28px!important}
  body.has-cart{padding-bottom:110px!important}

  /* Topbar: Logo · Links · Toggle+Warenkorb */
  .shop-topbar{max-width:1080px!important;margin:0 auto!important}
  .desktop-cart{display:inline-flex!important;position:relative;width:42px;height:42px;
    border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink)}
  .desktop-cart .top-cart-badge{background:var(--a)!important;border-color:var(--surface)!important;box-shadow:none!important}

  /* ALTES Produkt-Grid neutralisieren → sauberer Block-Fluss */
  .prod-card:not([hidden]){display:grid!important;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
    grid-template-rows:auto auto auto auto!important;
    grid-template-areas:"img head" "search search" "chips chips" "list list"!important;
    align-items:start!important;max-height:none!important;overflow:visible!important;
    padding:26px!important;gap:0!important;border-radius:20px!important}
  .prod-img{grid-area:img!important;grid-row:auto!important;grid-column:auto!important;
    width:100%!important;height:300px!important;min-height:0!important;
    object-fit:contain!important;border-radius:0!important;border:0!important;background:transparent!important}
  .prod-head{grid-area:head!important;grid-row:auto!important;grid-column:auto!important;
    padding:4px 0 0 28px!important;text-align:left}
  .prod-title{font-size:1.9rem!important}
  .prod-features{justify-content:flex-start!important}

  /* Suche + Filter: ruhige, volle Breite */
  .flavor-search-wrap{grid-area:search!important;margin:22px 0 0!important;padding:0!important}
  .flavor-search{max-width:none!important}
  .flavor-chips{grid-area:chips!important;margin:14px 0 4px!important;justify-content:center!important}
  .flavor-chip{flex:0 0 auto!important;padding:10px 18px!important;font-size:.82rem!important}

  /* Flavor-Liste: 2 Spalten, kein Innen-Scrollen */
  .flavor-list{grid-area:list!important;grid-column:auto!important;grid-row:auto!important;
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px 14px!important;padding:14px 0 0!important;margin:0!important;
    overflow:visible!important;max-height:none!important}
  .fi{min-height:0!important}

  /* Kategorie-Leiste: kompakt zentriert, klebt unter dem Ticker */
  .category-tabs{max-width:560px!important;margin:16px auto!important}

  /* Sektionen zentriert & begrenzt */
  .trust-row{max-width:1032px;margin-left:auto!important;margin-right:auto!important}
  .reviews{max-width:1032px!important;margin-left:auto!important;margin-right:auto!important;border-radius:14px;overflow:hidden}
  .contact{max-width:640px!important;margin-left:auto!important;margin-right:auto!important}
  .footer{max-width:none}

  /* Schwebende Bestell-Leiste: unten mittig (keine Bottom-Nav auf Desktop) */
  .cart-bar.visible{bottom:18px!important;width:min(430px,calc(100% - 40px))!important}
}
@media(min-width:1100px){
  .prod-img{height:330px!important}
  .prod-title{font-size:2.1rem!important}
}

/* FIX Desktop-Grid: grid-area war durch nachfolgende grid-column/row-Auto-Werte
   neutralisiert (Longhand überschreibt Shorthand) → hier sauber neu zugewiesen */
@media(min-width:760px){
  .prod-img{grid-area:img!important}
  .prod-head{grid-area:head!important}
  .flavor-search-wrap{grid-area:search!important}
  .flavor-chips{grid-area:chips!important}
  .flavor-list{grid-area:list!important}
  /* Flavor-Zeile: gleiche gestapelte Struktur wie mobil (Preis über +) */
  .fi{grid-template-columns:72px minmax(0,1fr) auto!important;
    grid-template-areas:"media info price" "media info ctrl"!important;
    min-height:0!important;padding:12px!important}
  .fi-media{width:72px!important;height:72px!important}
  .fi-price{grid-area:price!important;justify-self:end!important;align-self:end!important;white-space:nowrap}
  .fi-ctrl{grid-area:ctrl!important;justify-self:end!important;align-self:start!important}
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP: Menüleiste sticky + Bestell-Leiste deutlich sichtbarer
   ══════════════════════════════════════════════════════════════ */
@media(min-width:760px){
  /* Menüleiste klebt unter dem Ticker */
  .shop-topbar{position:sticky!important;top:var(--banner-h,38px)!important;z-index:315!important}
  /* Kategorie-Leiste dockt unter Ticker + Menü */
  .category-tabs{top:calc(var(--banner-h,38px) + var(--topbar-h,66px) + 8px)!important}

  /* Bestell-Leiste: kräftiger Violett-Verlauf, weißer Button → fällt sofort auf */
  .cart-bar.visible{
    background:var(--grad)!important;border:0!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    box-shadow:0 18px 44px -12px rgba(167,100,203,.65),var(--sheen)!important;
    width:min(480px,calc(100% - 40px))!important;bottom:22px!important;
    padding:10px 10px 10px 22px!important;
  }
  .cart-bar.visible .cart-bar-info{color:#fff!important;font-size:.98rem!important;font-weight:700!important}
  .cart-bar.visible .cart-bar-btn{
    background:#fff!important;color:var(--a)!important;
    box-shadow:0 6px 16px -6px rgba(0,0,0,.35)!important;
    padding:12px 26px!important;font-size:.95rem!important;
  }
  .cart-bar.visible .cart-bar-btn:hover{transform:translateY(-1px)}
}

/* Bestell-Leiste: Violett-Verlauf + weiße Schrift jetzt auch auf Mobile */
.cart-bar.visible{
  background:var(--grad)!important;border:0!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:0 14px 34px -12px rgba(167,100,203,.6),var(--sheen)!important;
}
.cart-bar-info{color:#fff!important;font-weight:700!important}
.cart-bar-btn{background:#fff!important;color:var(--a)!important;box-shadow:0 5px 14px -6px rgba(0,0,0,.35)!important}

/* ══════════════════════════════════════════════════════════════
   Karten-Look pro Produkt (Admin): Standard = Violett-Glow,
   .cards-white = neutrale weisse Karten ohne Violett-Schimmer
   ══════════════════════════════════════════════════════════════ */
.prod-card.cards-white .fi{
  background:var(--card)!important;
  border-color:rgba(0,0,0,.08)!important;
  box-shadow:0 1px 3px rgba(20,15,30,.05)!important;
}
.prod-card.cards-white .fi:hover{border-color:rgba(0,0,0,.14)!important;box-shadow:0 6px 18px rgba(20,15,30,.08)!important}
.prod-card.cards-white .fi.low,
.prod-card.cards-white .fi.popular,
.prod-card.cards-white .fi.badge-neu,
.prod-card.cards-white .fi.badge-aktion{background:var(--card)!important;border-color:rgba(0,0,0,.08)!important}
.prod-card.cards-white .fi-media{background:#f4f4f6!important;border-color:rgba(0,0,0,.06)!important}
.prod-card.cards-white .fi-img{filter:none!important}
.prod-card.cards-white .fi-ghost{opacity:.05}
html.dark .prod-card.cards-white .fi{background:var(--card)!important;border-color:rgba(255,255,255,.09)!important;box-shadow:0 2px 8px rgba(0,0,0,.35)!important}
html.dark .prod-card.cards-white .fi-media{background:#211a30!important;border-color:rgba(255,255,255,.07)!important}
html.dark .prod-card.cards-white .fi-ghost{opacity:.1}

/* Weiss-Modus: Kachel KOMPLETT weiss (auch Bild-Box, kein Ghost-Emoji) */
.prod-card.cards-white .fi-media{background:transparent!important;border:0!important}
.prod-card.cards-white .fi-ghost{display:none!important}
html.dark .prod-card.cards-white .fi-media{background:transparent!important;border:0!important}

/* Dunkelmodus + Kategorie im Weiss-Look: Produktfotos mit eigenem (nicht
   transparentem) Hintergrund abrunden — bei transparenten PNGs unsichtbar */
html.dark .prod-card.cards-white .fi-img{border-radius:12px!important}


/* ══════════════════════════════════════════════════════════════
   TWINT-Zahlung: klare 2-Schritte-Anleitung (Checkout Schritt 2)
   ══════════════════════════════════════════════════════════════ */
.twint-steps{
  display:flex;flex-direction:column;gap:14px;
  border:2px solid var(--a);border-radius:14px;
  padding:14px;margin-bottom:10px;background:var(--surface-2);
}
.tw-step{display:flex;gap:10px;align-items:flex-start;border-radius:10px;padding:3px;transition:background .35s}
.tw-num{
  flex:0 0 24px;height:24px;border-radius:50%;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;
}
.tw-body{min-width:0;flex:1}
.tw-title{font-size:.92rem;font-weight:850;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
.tw-desc{font-size:.82rem;line-height:1.55;color:var(--ink-soft)}
.tw-desc b{color:var(--ink);font-weight:850}
.tw-copyrow{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px;
}
.tw-copyrow .twint-num{flex:1;margin:0!important;font-size:1.1rem!important;letter-spacing:1px}
.tw-copyrow .copy-btn{flex:0 0 auto;padding:9px 14px!important;font-size:.75rem!important}
.copy-btn.copied{background:#16a34a!important;box-shadow:none!important}
.tw-flash{background:color-mix(in srgb,var(--a) 14%,transparent)}

/* ── Sprach-Umschalter (SQ/EN) ── */
.lang-toggle{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;margin-right:6px}
.lang-btn{padding:6px 10px;font-size:.72rem;font-weight:800;color:var(--muted);text-decoration:none;letter-spacing:.02em;line-height:1;border:0;background:transparent;cursor:pointer;font-family:inherit}
.lang-btn.active{background:var(--grad);color:#fff}
html.dark .lang-btn{color:var(--muted)}
.mobile-action-btn{display:none}

/* ── WhatsApp-Bestell-Button ── */
.wa-order-btn{background:#25D366!important;display:flex!important;align-items:center;justify-content:center;gap:8px}
.wa-order-btn:hover{background:#1ebe5b!important}
.wa-order-note{text-align:center;font-size:.74rem;color:var(--muted);margin:8px 0 0;line-height:1.5}
.order-confirm[hidden]{display:none!important}
.order-confirm{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:20px;background:rgba(8,5,14,.64);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.order-confirm-card{width:min(390px,100%);padding:26px 22px 20px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:0 24px 70px rgba(0,0,0,.34);text-align:center}
.order-confirm-check{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:#22c55e;color:#fff;font-size:2rem;font-weight:900;box-shadow:0 10px 24px rgba(34,197,94,.28)}
.order-confirm-card h3{margin:0;color:var(--ink);font-size:1.18rem;font-weight:900}
.order-confirm-card p{margin:9px auto 19px;color:var(--muted);font-size:.84rem;line-height:1.55;max-width:320px}
.order-confirm-submit,.order-confirm-cancel{width:100%;border:0;border-radius:12px;padding:13px 16px;font-family:inherit;font-weight:850;cursor:pointer}
.order-confirm-submit{background:#25d366;color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.22)}
.order-confirm-cancel{margin-top:8px;background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}

/* ══════════════════════════════════════════════════════════════
   KS VAPES – Luxus-Dunkelviolett-Palette (Kosovo)
   ══════════════════════════════════════════════════════════════ */
:root{
  --a:#7C3AED!important; --a2:#9061F9!important; --ah:#6D28D9!important;
  --grad:linear-gradient(135deg,#8B5CF6,#6D28D9)!important;
  --glow:rgba(124,58,237,.22)!important;
}
html.dark{
  --a:#A78BFA!important; --a2:#C4B5FD!important; --ah:#8B5CF6!important;
  --grad:linear-gradient(135deg,#9B6DFF,#6D28D9)!important;
  --glow:rgba(139,92,246,.34)!important;
  --surface:#120a1f; --surface-2:#180f28;
}
/* Dunkler, edler Body-Hintergrund im Dark-Mode */
html.dark body{background:radial-gradient(1200px 600px at 50% -5%, #241247 0%, #0d0717 55%, #080410 100%)!important}
.top-logo-word{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.shop-topbar{position:sticky!important;top:var(--banner-h,38px)!important;z-index:315!important;min-height:82px!important;padding-top:8px!important;padding-bottom:8px!important}
.top-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
.top-logo-mark.vapenks-logo{width:138px;height:72px;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible;box-shadow:none!important}
.top-logo-mark.vapenks-logo img{width:100%;height:100%;object-fit:contain;filter:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.top-nav-links{justify-self:start}
.top-actions{justify-self:end}
.top-logo-word{display:none}
.footer-brand img{width:70px;height:44px;object-fit:contain;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;filter:none!important}
.footer-meta{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;font-size:.61rem;letter-spacing:.08em;opacity:.48}
.footer-meta a{color:var(--muted);text-decoration:none;transition:opacity .18s ease,color .18s ease}
.footer-meta a:hover{color:var(--a);opacity:1}
@media(max-width:700px){
  .shop-topbar{min-height:76px!important;padding-top:7px!important;padding-bottom:7px!important}
  .top-logo-mark.vapenks-logo{width:112px;height:60px}
  .top-nav-links{visibility:hidden;pointer-events:none}
  .top-actions{gap:5px}
  .lang-toggle,.theme-toggle{display:none!important}
  .mobile-action-btn{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--ink);font:800 .65rem/1 Plus Jakarta Sans,sans-serif;cursor:pointer;box-shadow:none}
  .mobile-action-btn:active{transform:scale(.94)}
  .mobile-theme-btn svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .mobile-theme-moon{display:none}
  html.dark .mobile-theme-sun{display:none}
  html.dark .mobile-theme-moon{display:block}
  html.dark .mobile-theme-moon svg{fill:currentColor;stroke:none}
}