/* ==== AL UI – hardened (mobile-first) ==== */
/* Tipp: Du kannst die Akzentfarbe zentral ändern: */
:root { --al-accent: #2C6B4A; --al-surface: #fff; --al-text: #0f172a; --al-border: rgba(0,0,0,.08); }


/* Basis (Safe-Area) */
:root{
  --al-accent:#2C6B4A;
  --al-surface:#fff;
  --al-text:#0f172a;
  --al-border:rgba(0,0,0,.08);
  --al-safe-bottom: env(safe-area-inset-bottom, 0px);
  --al-sheet-base-offset: max(var(--al-safe-bottom), 8px);
  --al-brand: #2C6B4A;     /* Primary button */
  --al-muted: #f8fafc;     /* hover bg */
  --al-ink:   #0f172a;     /* text */
}


/* ==== AL UI – Offsets für Member-Section ==== */

/* Basis (Safe-Area) */
:root{
  --al-safe-bottom: env(safe-area-inset-bottom, 0px);
  --al-sheet-base-offset: max(var(--al-safe-bottom), 8px);
}

.al-icon[data-count]:not([data-count="0"])::after{
  content:attr(data-count) !important; position:absolute !important; top:-4px !important; right:-6px !important;
  min-inline-size:18px !important; block-size:18px !important; padding:0 5px !important;
  font:600 11px/18px system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  color:#fff !important; background: var(--al-accent) !important; border-radius:999px !important; transform:translateZ(0) !important;
}
.al-icon[data-dot="1"]::before{
  content:"" !important; position:absolute !important; top:2px !important; right:2px !important;
  inline-size:6px !important; block-size:6px !important; border-radius:50% !important; background: var(--al-accent) !important;
}

/* Motion */
@keyframes al-pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(44,107,74,.4)}70%{transform:scale(1.08);box-shadow:0 0 0 10px rgba(44,107,74,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(44,107,74,0)}}
@keyframes al-bump{0%{transform:translateY(0)}30%{transform:translateY(-2px)}60%{transform:translateY(0)}100%{transform:translateY(-1px)}}
@keyframes al-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}75%{transform:rotate(-4deg)}}
.al-icon.is-pulse{ animation: al-pulse .8s ease-out !important; }
.al-icon.is-wiggle{ animation: al-wiggle .45s ease-in-out !important; }
.al-icon.bump-badge::after{ animation: al-bump .35s ease-out !important; }
@media (prefers-reduced-motion: reduce){
  .al-icon.is-pulse, .al-icon.is-wiggle, .al-icon.bump-badge::after{ animation:none !important; }
}

/* Auth-State Signals */
body.is-auth .al-icon--user::before{
  content:"" !important; position:absolute !important; bottom:-2px !important; right:-2px !important;
  inline-size:8px !important; block-size:8px !important; border-radius:50% !important;
  background:#22c55e !important; outline:2px solid #fff !important;
}
body.is-auth-loading .al-icon{ opacity:.65 !important; }
body.is-auth-loading .al-icon::after{ opacity:.75 !important; }

/* Toasts */
.al-toast{
  position:fixed !important; right:16px !important; bottom:16px !important; z-index:11000 !important;
  display:flex !important; gap:10px !important; align-items:center !important;
  padding:10px 12px !important; border-radius:10px !important;
  background: rgba(17,24,39,.92) !important; color:#fff !important;
  font:500 13px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  box-shadow:0 8px 30px rgba(0,0,0,.25) !important;
  opacity:0 !important; transform: translateY(8px) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}
.al-toast.show{ opacity:1 !important; transform: translateY(0) !important; }
.al-toast .al-toast-icon{ inline-size:18px !important; block-size:18px !important; display:inline-block !important; }
.u-visually-hidden{
  position:absolute !important; inline-size:1px !important; block-size:1px !important;
  overflow:hidden !important; clip:rect(1px,1px,1px,1px) !important; white-space:nowrap !important; clip-path:inset(50%) !important;
}

/* Cart Panel (Desktop Sidepanel + Mobile Bottom-Sheet) */
#al-cart-overlay{
  position:fixed !important; inset:0 !important; background:rgba(15,23,42,.35) !important; z-index:9998 !important;
  opacity:0 !important; pointer-events:none !important; transition:.18s opacity !important;
}
#al-cart-panel{
  position:fixed !important; z-index:9999 !important; background:var(--al-surface) !important; color:var(--al-text) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.25) !important;
}
.al-cart-head{
  display:flex !important; justify-content:space-between !important; align-items:center !important;
  padding:12px 14px !important; border-bottom:1px solid var(--al-border) !important;
}
.al-cart-body{ padding:12px 14px !important; max-height:calc(100vh - 60px) !important; overflow:auto !important; }
.al-cart-close{ font-size:22px !important; line-height:1 !important; background:none !important; border:none !important; cursor:pointer !important; }

/* Desktop */
@media (min-width:768px){
  #al-cart-panel{
    top:0 !important; right:0 !important; width:380px !important; height:100vh !important;
    transform: translateX(110%) !important; transition: transform .2s ease !important;
    border-left:1px solid var(--al-border) !important;
  }
  body.is-cart-open #al-cart-panel{ transform: translateX(0) !important; }
  body.is-cart-open #al-cart-overlay{ opacity:1 !important; pointer-events:auto !important; }
}

/* Mobile */
@media (max-width:767px){
  #al-cart-panel{
    left:0 !important; right:0 !important; bottom:0 !important; max-height:90vh !important;
    border-radius:16px 16px 0 0 !important; transform: translateY(105%) !important; transition: transform .2s ease !important;
  }
  body.is-cart-open #al-cart-panel{ transform: translateY(0) !important; }
  body.is-cart-open #al-cart-overlay{ opacity:1 !important; pointer-events:auto !important; }

  #al-cart-panel .al-sheet-grip{
    position:sticky !important; top:0 !important; display:flex !important; justify-content:center !important; padding:8px 0 !important; z-index:1 !important;
  }
  #al-cart-panel .al-sheet-grip::before{
    content:"" !important; inline-size:36px !important; block-size:4px !important; border-radius:2px !important; background: var(--al-border) !important;
  }
}

/* Empty state & Buttons */
.al-cart-empty{ text-align:center !important; padding:24px 12px !important; }
.al-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 14px !important;
  border-radius:10px !important;
  background: var(--al-accent) !important;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:600 !important;
  min-width:120px !important;   /* sorgt für richtige Breite */
  height:auto !important;       /* überschreibt das 40px-Constraint */
  line-height:1.4 !important;   /* schönerer Textfluss */
}


/* ==== AL Search (final) – Desktop: compact under header | Mobile: bottom-sheet ==== */
:root{
  --al-accent:#2C6B4A; --al-surface:#fff; --al-text:#0f172a; --al-border:rgba(0,0,0,.08);
  /* Stelle sicher, dass dein Header seine Höhe hier einträgt (JS/CSS): */
  --al-fixed-top: 60px;
}

/* Overlay (unter dem Panel) */
#alCmdkOverlay{
  position:fixed !important; inset:0 !important;
  background:rgba(15,23,42,.35) !important;
  z-index:10000 !important; opacity:0 !important; pointer-events:none !important;
  transition:opacity .18s ease !important;
}
body.is-search-open #alCmdkOverlay{ opacity:1 !important; pointer-events:auto !important; }

/* Gemeinsame Basen */
#alCmdk{ z-index:10001 !important; }
#alCmdk .al-cmdk__panel{ background:var(--al-surface) !important; color:var(--al-text) !important; }
#alCmdk .al-cmdk__search{
  display:flex !important; align-items:center !important; gap:8px !important;
  padding:10px 12px !important; border-bottom:1px solid var(--al-border) !important;
}
#alCmdk input#alCmdkInput{
  flex:1 1 auto !important; padding:10px 12px !important; border:1px solid var(--al-border) !important;
  border-radius:10px !important; font:500 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  background:#fff !important;
}
#alCloseCmdk{
  inline-size:28px !important; block-size:28px !important; border-radius:8px !important;
  color:#0f172a !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
  font-weight:700 !important; opacity:.75 !important; background:transparent !important; border:none !important; cursor:pointer !important;
}
#alCloseCmdk:hover, #alCloseCmdk:focus-visible{
  background:rgba(0,0,0,.06) !important; opacity:1 !important; outline:2px solid transparent !important;
}
#alCmdkList{ padding:8px !important; max-height:55vh !important; overflow:auto !important; }
#alCmdkList li{
  padding:9px 10px !important; border-radius:8px !important; display:flex !important; align-items:center !important; justify-content:space-between !important;
}
#alCmdkList li:hover{ background:rgba(0,0,0,.04) !important; }
#alCmdkList li.is-empty{ text-align:center !important; opacity:.8 !important; }
#alCmdk #al-search-footer{ padding:8px 12px !important; display:flex !important; justify-content:flex-end !important; }

  /* Grip auf Desktop ausblenden */
  html body #alCmdk .al-sheet-grip{ display:none !important; }

/* ==== AL Account Menu (compact dropdown under header icon) ==== */
#al-account-menu{
  position:fixed !important;            /* wir positionieren via JS exakt unter das Icon */
  min-width:220px !important; max-width:92vw !important;
  background:#fff !important; color:var(--al-text,#0f172a) !important;
  border:1px solid var(--al-border,rgba(0,0,0,.08)) !important;
  border-radius:12px !important; box-shadow:0 18px 50px rgba(0,0,0,.18) !important;
  z-index:10002 !important; overflow:hidden !important; display:none !important;
}
#al-account-menu::before{
  content:"" !important; position:absolute !important; top:-8px !important;
  inline-size:14px !important; block-size:14px !important; transform:rotate(45deg) !important;
  background:#fff !important;
  border-left:1px solid var(--al-border,rgba(0,0,0,.08)) !important;
  border-top:1px solid var(--al-border,rgba(0,0,0,.08)) !important;
  left: var(--caret-left, 24px) !important;              /* durch JS gesetzt */
}
#al-account-menu ul{ list-style:none !important; margin:0 !important; padding:6px !important; }
#al-account-menu li{ margin:0 !important; }
#al-account-menu a, #al-account-menu button{
  appearance:none !important; background:none !important; border:none !important;
  display:flex !important; width:100% !important; text-align:left !important;
  align-items:center !important; gap:10px !important;
  padding:10px 12px !important; border-radius:8px !important;
  color:inherit !important; text-decoration:none !important;
  font:500 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
}
#al-account-menu a:hover, #al-account-menu a:focus-visible,
#al-account-menu button:hover, #al-account-menu button:focus-visible{
  background:rgba(0,0,0,.04) !important; outline:2px solid transparent !important;
}
#al-account-menu .sep{ height:1px !important; margin:6px 8px !important; background:var(--al-border,rgba(0,0,0,.08)) !important; }

/* Account menu */
#al-account-menu{ position:fixed !important; top:calc(var(--al-fixed-top,60px)) !important; right:var(--al-pad-x,16px) !important; left:auto !important; width:280px !important; max-height:min(70vh,520px) !important; overflow:auto !important; background:#fff !important; border:1px solid var(--al-border,#e5e7eb) !important; border-radius:12px !important; box-shadow:0 10px 30px rgba(0,0,0,.12) !important; z-index:100003 !important; display:none !important; }
#al-account-menu[aria-hidden="false"]{ display:block !important; }
#al-account-menu ul{ list-style:none !important; margin:8px 0 !important; padding:6px !important; }
#al-account-menu li{ margin:0 !important; }
#al-account-menu li.sep{ height:1px !important; background:var(--al-border,#e5e7eb) !important; margin:6px 8px !important; }
#al-account-menu a, #al-account-menu button{ width:100% !important; text-align:left !important; padding:10px 12px !important; border-radius:10px !important; font-size:15px !important; color:var(--al-ink,#0f172a) !important; background:transparent !important; border:0 !important; }
#al-account-menu a:hover, #al-account-menu a:focus-visible, #al-account-menu button:hover, #al-account-menu button:focus-visible{ background:var(--al-muted,#f8fafc) !important; outline:0 !important; }
/* Mobile sheet */
#al-account-menu .sheet-handle{ display:none !important; }
@media (max-width:768px){
  #al-account-menu{ left:0 !important; right:0 !important; bottom:0 !important; top:auto !important; width:100% !important; max-height:70vh !important; border-radius:16px 16px 0 0 !important; border-left:0 !important; border-right:0 !important; }
  #al-account-menu .sheet-handle{ display:block !important; height:22px !important; }
  #al-account-menu .sheet-handle::after{ content:"" !important; display:block !important; width:36px !important; height:4px !important; margin:8px auto !important; border-radius:999px !important; background:rgba(0,0,0,.15) !important; }
}
/* Status dot */
.al-icon--user{ position:relative !important; }
.al-icon--user .status-dot{ position:absolute !important; top:6px !important; right:6px !important; width:8px !important; height:8px !important; border-radius:999px !important; background:#16a34a !important; border:2px solid #fff !important; box-shadow:0 0 0 2px rgba(22,163,74,.15) !important; }

/* Account menu – base */
#al-account-menu{
  position:fixed !important;
  z-index:100003 !important;
  background:#fff !important;
  border:1px solid var(--al-border, #e5e7eb) !important;
  border-radius:12px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.12) !important;
  width:260px !important;
  right:var(--al-pad-x, 24px) !important;
  top:calc(var(--al-h, 70px) - 1px) !important;
  padding:8px 0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateY(6px) !important;
  transition:opacity .18s ease, transform .18s ease !important;
}
#al-account-menu[aria-hidden="false"]{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}
#al-account-menu ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
#al-account-menu li{ margin:0 !important; }
#al-account-menu a[role="menuitem"],
#al-account-menu button[role="menuitem"]{
  width:100% !important; display:flex !important; align-items:center !important; gap:10px !important;
  padding:12px 14px !important; background:transparent !important; border:0 !important; text-align:left !important;
  font:inherit !important; color:#0f172a !important; border-radius:8px !important; cursor:pointer !important;
}
#al-account-menu a[role="menuitem"]:hover,
#al-account-menu button[role="menuitem"]:hover{ background:#f8fafc !important; }
#al-account-menu .sep{ height:1px !important; background:#e5e7eb !important; margin:4px 0 !important; }

/* Mobile bottom-sheet: centered */
@media (max-width:767px){
  #al-account-menu{
    left:50% !important; right:auto !important; top:auto !important; bottom:0 !important;
    width:min(92vw, 420px) !important; border-radius:16px 16px 0 0 !important;
    transform:translate(-50%, 110%) !important; opacity:1 !important; pointer-events:auto !important;
    transition:transform .22s ease !important; padding-top:10px !important;
  }
  #al-account-menu[aria-hidden="false"]{ transform:translate(-50%, 0) !important; }
  #al-account-menu .sheet-handle{
    width:44px !important; height:4px !important; border-radius:999px !important;
    background:#cbd5e1 !important; margin:8px auto 10px !important;
  }
}

/* Status dot (logged-in) */
#icon-user{ position:relative !important; }
#icon-user .status-dot{
  position:absolute !important; top:6px !important; right:6px !important;
  width:8px !important; height:8px !important; border-radius:999px !important;
  background:#10b981 !important; box-shadow:0 0 0 2px #fff !important;
}


/* Toasts – immer über Modals/Blur */
#al-toast-portal{
  position:fixed !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:2147483600 !important;
  isolation:isolate !important;
}

.al-toast{
  position:absolute !important;
  right:16px !important;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  z-index:1 !important;             /* reicht innerhalb des Portals */
  display:flex !important; gap:10px !important; align-items:center !important;
  padding:10px 12px !important; border-radius:10px !important;
  background: rgba(17,24,39,.92) !important; color:#fff !important;
  font:500 13px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  box-shadow:0 8px 30px rgba(0,0,0,.25) !important;
  opacity:0 !important; transform: translateY(8px) !important;
  transition: opacity .18s ease, transform .18s ease !important;
  pointer-events:auto !important;   /* falls der Toast Buttons hat */
}

.al-toast.show{ opacity:1 !important; transform: translateY(0) !important; }

#alCmdk[aria-hidden="true"] {
  display: none !important;
}

#alCmdk .al-cmdk__panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  max-width: min(840px, 95%);
  width: 100%;
  padding: 20px;
  color: #111827;
}

/* Das eigentliche Panel (WICHTIG: __panel, nicht .al-cmdk) */
#alCmdk .al-cmdk__panel {
  width: min(860px, calc(100vw - 32px)) !important;
  max-height: 70vh !important;
  overflow: auto !important;
  background: #fff !important;
  border: 1px solid var(--al-border, #e5e7eb) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18) !important;
  padding: 0 !important;
}

/* Kopf & Suchfeld */
#alCmdk .al-cmdk__search {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--al-border, #e5e7eb) !important;
}
#alCmdk #alCmdkInput {
  flex: 1 1 auto !important;
  padding: 10px 12px !important;
  border: 1px solid var(--al-border, #e5e7eb) !important;
  border-radius: 10px !important;
  font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  background: #fff !important;
}

/* Liste */
#alCmdk #alCmdkList {
  padding: 8px !important;
  max-height: 55vh !important;
  overflow: auto !important;
}
#alCmdk #alCmdkList li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 9px 10px !important;
  border-radius: 8px !important;
}
#alCmdk #alCmdkList li:hover { background: rgba(0,0,0,.04) !important; }
#alCmdk #alCmdkList li.is-empty { text-align: center !important; opacity: .8 !important; }

/* Close-Button */
#alCloseCmdk {
  inline-size: 28px !important;
  block-size: 28px !important;
  border-radius: 8px !important;
  color: #0f172a !important;
  background: transparent !important;
  border: 0 !important;
}
#alCloseCmdk:hover, #alCloseCmdk:focus-visible {
  background: rgba(0,0,0,.06) !important;
  outline: 2px solid transparent !important;
}

/* Desktop: Panel unter dem Header einrasten (optional) */
@media (min-width: 1024px) {
  #alCmdk {
    align-items: flex-start !important;
    padding-top: calc(var(--al-fixed-top, 60px) + 10px) !important;
  }
}

/* Overlay für Outside-Click (unter dem Panel) */
#alCmdkOverlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15,23,42,.35) !important;
  z-index: 10002 !important;                  /* unter #alCmdk */
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease !important;
}
body.is-search-open #alCmdkOverlay { opacity: 1 !important; pointer-events: auto !important; }


/* WICHTIG: korrektes Ziel ist __panel, nicht .al-cmdk */
#alCmdk .al-cmdk__panel {
  display: block !important;
  width: min(860px, calc(100vw - 32px)) !important;
  min-width: 320px !important;
  max-height: 70vh !important;
  overflow: auto !important;
  background: #fff !important;
  border: 1px solid var(--al-border, #e5e7eb) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18) !important;
  padding: 0 !important;
}

/* Kopf & Suchfeld */
#alCmdk .al-cmdk__search {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--al-border, #e5e7eb) !important;
}
#alCmdk #alCmdkInput {
  flex: 1 1 auto !important;
  padding: 10px 12px !important;
  border: 1px solid var(--al-border, #e5e7eb) !important;
  border-radius: 10px !important;
  font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  background: #fff !important;
}

/* Ergebnisliste */
#alCmdk #alCmdkList { padding: 8px !important; max-height: 55vh !important; overflow: auto !important; }
#alCmdk #alCmdkList li {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  padding: 9px 10px !important; border-radius: 8px !important;
}
#alCmdk #alCmdkList li:hover { background: rgba(0,0,0,.04) !important; }
#alCmdk #alCmdkList li.is-empty { text-align: center !important; opacity: .8 !important; }

/* Close Button */
#alCloseCmdk {
  inline-size: 28px !important; block-size: 28px !important; border-radius: 8px !important;
  color: #0f172a !important; background: transparent !important; border: 0 !important;
}
#alCloseCmdk:hover, #alCloseCmdk:focus-visible { background: rgba(0,0,0,.06) !important; outline: 2px solid transparent !important; }

/* Overlay unter dem Panel für Outside-Click */
#alCmdkOverlay { position: fixed !important; inset: 0 !important; background: rgba(15,23,42,.35) !important; z-index: 10002 !important;
  opacity: 0 !important; pointer-events: none !important; transition: opacity .18s ease !important; }
body.is-search-open #alCmdkOverlay { opacity: 1 !important; pointer-events: auto !important; }

/* Desktop: unter Header einrasten */
@media (min-width: 1024px) {
  body.is-search-open #alCmdk { align-items: flex-start !important; padding-top: calc(var(--al-fixed-top, 60px) + 10px) !important; }
  #alCmdk .al-sheet-grip { display: none !important; }
}

/* Sichtbarkeit ausschließlich über aria-hidden/hidden + Body-Klasse */
#alCmdk{ display:none !important; }
#alCmdk[aria-hidden="false"]{ display:flex !important; }

/* Desktop: Panel unter Header, Container bleibt full-screen für Outside-Click */
@media (min-width:1024px){
  #alCmdk{ padding: 10px 14px !important; }
  #alCmdk .al-cmdk__panel{
    margin-top: calc(var(--al-fixed-top, 60px) + 10px) !important;
  }
}

/* === AL Search – single source of truth (final) === */
#alCmdk{
  position: fixed !important;
  inset: 0 !important;                    /* NIE mehr 'inset:auto' auf Desktop */
  display: none !important;               /* geschlossen */
  z-index: 100003 !important;
  padding: 8vh 14px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  background: rgba(15,23,42,.5) !important;
  backdrop-filter: blur(6px) !important;
}
body.is-search-open #alCmdk{ display:flex !important; }
#alCmdk[aria-hidden="true"]{ display:none !important; } /* Safety */

#alCmdk .al-cmdk__panel{
  display: block !important;
  width: min(860px, 95vw) !important;
  max-height: 70vh !important;
  overflow: auto !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18) !important;
  padding: 0 !important;
}

/* Desktop: einfach unter dem Header „einrasten“ – Container bleibt Fullscreen */
@media (min-width:1024px){
  #alCmdk{ padding-top: calc(var(--al-fixed-top,60px) + 10px) !important; }
  #alCmdk .al-sheet-grip{ display:none !important; }
}

/* Overlay unter dem Panel (nur 1x definieren) */
#alCmdkOverlay{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15,23,42,.35) !important;
  z-index: 10002 !important;              /* < #alCmdk */
  opacity: 0 !important; pointer-events: none !important;
  transition: opacity .18s ease !important;
}
body.is-search-open #alCmdkOverlay{ opacity:1 !important; pointer-events:auto !important; }

/* === AL Search – harte Final-Overrides (sichtbar, ganz oben) === */
#alCmdk{
  position:fixed !important;
  inset:0 !important;
  display:none !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding:8vh 14px !important;
  background:rgba(15,23,42,.5) !important;
  backdrop-filter:blur(6px) !important;
  /* sehr hoher z-index, über Header/Sticky-Bars */
  z-index:2147483600 !important;
}
body.is-search-open #alCmdk{ display:flex !important; }
#alCmdk[aria-hidden="true"]{ display:none !important; }

#alCmdk .al-cmdk__panel{
  display:block !important;
  width:min(860px,95vw) !important;
  max-height:70vh !important;
  overflow:auto !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:12px !important;
  box-shadow:0 18px 50px rgba(0,0,0,.18) !important;
  /* Falls irgendwo versteckt wurde: */
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

#alCmdkOverlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(15,23,42,.35) !important;
  z-index:2147483599 !important; /* knapp unter #alCmdk */
  opacity:1 !important;
  pointer-events:auto !important;
}

/* === FINAL OVERRIDE: CmdK sichtbar erzwingen === */
#alCmdk{
  position:fixed !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:100vw !important; height:100vh !important;
  display:flex !important; align-items:flex-start !important; justify-content:center !important;
  padding:8vh 14px !important;
  z-index:2147483600 !important;

  /* Sichtbarkeit & Anti-Clip */
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
  clip:auto !important; clip-path:none !important;
  content-visibility:visible !important; contain:none !important;
  transform:none !important;               /* falls irgendwo scale(0) o.ä. gesetzt wird */
  box-sizing:border-box !important;
}

#alCmdk .al-cmdk__panel{
  display:block !important;
  min-width:320px !important;
  width:min(860px,95vw) !important;
  max-height:70vh !important; overflow:auto !important;
  background:#fff !important; border:1px solid rgba(0,0,0,.08) !important;
  border-radius:12px !important; box-shadow:0 18px 50px rgba(0,0,0,.18) !important;
  clip:auto !important; clip-path:none !important;
  content-visibility:visible !important; contain:none !important; transform:none !important;
}

/* Overlay darunter (falls vorhanden) */
#alCmdkOverlay{
  position:fixed !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  background:rgba(15,23,42,.35) !important;
  z-index:2147483599 !important;
  opacity:1 !important; pointer-events:auto !important;
  clip:auto !important; clip-path:none !important; content-visibility:visible !important; contain:none !important;
}

/* Sicherheitsnetz gegen “versteck”-Attribute */
#alCmdk[hidden], #alCmdk[aria-hidden="true"]{ display:flex !important; }

/* Default: zu (unsichtbar) */
#alCmdk { display: none !important; }

/* Öffnen nur, wenn JS die Klasse setzt */
body.is-search-open #alCmdk { display: flex !important; }

/* oder alternativ/zusätzlich über ARIA */
#alCmdk[hidden], #alCmdk[aria-hidden="true"] { display: none !important; }
#alCmdk[aria-hidden="false"]:not([hidden]) { display: flex !important; }

#alCmdk{ display:none !important; }
#alCmdk[hidden], #alCmdk[aria-hidden="true"]{ display:none !important; }
body.is-search-open #alCmdk,
#alCmdk[aria-hidden="false"]:not([hidden]){ display:flex !important; }

#alCmdkOverlay{ opacity:0 !important; pointer-events:none !important; }
body.is-search-open #alCmdkOverlay{ opacity:1 !important; pointer-events:auto !important; }

/* Quick Cart Panel global über Content & Filterbar */
#al-cart-portal,
.al-cart-overlay,
.al-cart-body,
#al-cart-content {
  z-index: 120000 !important;
}

.al-icon.has-avatar { padding: 0; }

.al-icon .al-avatar{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

/* Avatar IMG inside injected user icon */
.al-header-root #icon-user.has-avatar { padding: 0 !important; }
.al-header-root #icon-user.has-avatar img.al-avatar{
  display:block !important;
  width:28px !important;
  height:28px !important;
  border-radius:999px !important;
  object-fit:cover !important;
}
.al-header-root #icon-user.has-avatar img.al-avatar{
  width:28px !important;
  height:28px !important;
  border-radius:999px !important;
  object-fit:cover !important;
  box-shadow: 0 0 0 1px rgba(15,23,42,.08);
}

/* =========================================================
   HEADER PROFILE AVATAR — robust scope (Astra/Elementor safe)
   ========================================================= */

/* hit both: custom header root + theme header */
.al-header-root #icon-user.al-icon,
header.site-header #icon-user.al-icon{
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: 999px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.al-header-root #icon-user.al-icon:hover,
header.site-header #icon-user.al-icon:hover{
  background: rgba(15, 23, 42, 0.06);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
  transform: translateY(-1px);
}

.al-header-root #icon-user.al-icon:active,
header.site-header #icon-user.al-icon:active{
  transform: translateY(0);
  box-shadow: none;
}

.al-header-root #icon-user.al-icon:focus-visible,
header.site-header #icon-user.al-icon:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.30);
}

/* avatar img */
.al-header-root #icon-user.has-avatar img.al-avatar,
header.site-header #icon-user.has-avatar img.al-avatar{
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  display: block !important;

  box-shadow:
    0 0 0 2px rgba(255,255,255,0.95),
    0 0 0 3px rgba(15, 23, 42, 0.10);
}

/* =========================================================
   Header: Profile button as a clear, tappable avatar chip
   ========================================================= */

/* The actual clickable control */
.al-header-root #icon-user.al-icon{
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(15,23,42,.04) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.10) !important;

  transition: transform .12s ease, box-shadow .12s ease, background .12s ease !important;
}

.al-header-root #icon-user.al-icon:hover{
  background: rgba(15,23,42,.06) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.14) !important;
  transform: translateY(-1px) !important;
}

.al-header-root #icon-user.al-icon:active{
  transform: translateY(0) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.10) !important;
}

.al-header-root #icon-user.al-icon:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.28), 0 10px 26px rgba(15,23,42,.14) !important;
}

/* The image itself */
.al-header-root #icon-user.has-avatar img.al-avatar{
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  display: block !important;

  /* crisp ring so dark/green avatars read as "profile" */
  box-shadow:
    0 0 0 2px rgba(255,255,255,.98),
    0 0 0 3px rgba(15,23,42,.12) !important;
}

/* ---------------------------------------------------------
   Mobile header: slightly smaller profile avatar
--------------------------------------------------------- */
@media (max-width: 767px){
  .al-header-root #icon-user.al-icon{
    width: 34px !important;
    height: 34px !important;
  }

  .al-header-root #icon-user.has-avatar img.al-avatar{
    width: 26px !important;
    height: 26px !important;

    /* slightly softer ring on mobile */
    box-shadow:
      0 0 0 2px rgba(255,255,255,.95),
      0 0 0 2.5px rgba(15,23,42,.12) !important;
  }
}

/* Mobile account menu: remove the drag handle completely */
@media (max-width: 768px){
  #al-account-menu .sheet-handle,
  #al-account-menu .sheet-handle::before,
  #al-account-menu .sheet-handle::after{
    content: none !important;
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  
}
}
/* =========================================================
   HEADER – Account Pill / Rail Trigger (clean, single source)
   ========================================================= */

#icon-user.al-header-rail-trigger{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  height:40px;

  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.85);
  box-shadow:0 8px 22px rgba(15,23,42,.10);

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;

  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

#icon-user.al-header-rail-trigger:hover{
  transform:translateY(-1px);
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.14);
}

#icon-user.al-header-rail-trigger:active{
  transform:none;
  box-shadow:0 8px 22px rgba(15,23,42,.10);
}

#icon-user.al-header-rail-trigger .al-header-rail-label{
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

#icon-user.al-header-rail-trigger .al-header-rail-caret{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
}

#icon-user.al-header-rail-trigger .al-header-rail-caret svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:2.2;
  transition:transform .2s ease;
}

body.rail-open #icon-user.al-header-rail-trigger
.al-header-rail-caret svg{
  transform:rotate(180deg);
}

/* Mobile: Label ausblenden */
@media (max-width:980px){
  #icon-user.al-header-rail-trigger .al-header-rail-label{
    display:none;
  }
}

/* =========================================================
   RAIL – Off-Canvas Navigation (NO BLUR, NO OVERLAY FX)
   ========================================================= */

#alRail.al-rail,
aside.al-sidebar.al-rail{
  position:fixed;
  top:0;
  left:0;
  height:100dvh;
  width:var(--al-rail-w, 320px);

  transform:translateX(calc(-100% - 16px));
  transition:transform .22s ease;

  z-index:100000;
  background:#fff;

  pointer-events:none;
}

body.rail-open #alRail.al-rail,
body.rail-open aside.al-sidebar.al-rail{
  transform:translateX(0);
  pointer-events:auto;
}

/* =========================================================
   HEADER – Profile / My Account (final, clean, premium)
   ========================================================= */

#alAccountPill.al-account-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;

  height:38px;
  padding:4px 10px 4px 6px;

  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;

  color:#0f172a;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:13px;
  font-weight:600;

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;

  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .12s ease;
}

/* Hover: ruhig, nicht „Button-like“ */
#alAccountPill.al-account-pill:hover{
  background:#f8fafc;
  border-color:rgba(15,23,42,.14);
  box-shadow:0 4px 14px rgba(15,23,42,.08);
}

/* Active: leichtes Feedback */
#alAccountPill.al-account-pill:active{
  transform:translateY(1px);
  box-shadow:none;
}

/* Keyboard focus – sauber & WCAG */
#alAccountPill.al-account-pill:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(44,107,74,.45);
}

/* =========================================================
   Avatar
   ========================================================= */

#alAccountPill .al-account-pill__av{
  width:28px;
  height:28px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 auto;

  background:#e5e7eb;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#alAccountPill .al-account-pill__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* feiner Ring – hebt Avatar klar vom Header ab */
#alAccountPill .al-account-pill__av{
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px rgba(15,23,42,.12);
}

/* =========================================================
   Label
   ========================================================= */

#alAccountPill .al-account-pill__label{
  white-space:nowrap;
  line-height:1;
  opacity:.9;
}

/* =========================================================
   Chevron
   ========================================================= */

#alAccountPill .al-account-pill__chev{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.7;
  transition:transform .2s ease, opacity .2s ease;
}

#alAccountPill .al-account-pill__chev svg{
  width:14px;
  height:14px;
  stroke:currentColor;
  fill:none;
  stroke-width:2.2;
}

/* offen → Chevron drehen */
body.rail-open #alAccountPill .al-account-pill__chev{
  transform:rotate(180deg);
  opacity:.9;
}

/* =========================================================
   Mobile Feinschliff
   ========================================================= */

@media (max-width: 768px){
  #alAccountPill.al-account-pill{
    padding-right:8px;
  }

  #alAccountPill .al-account-pill__label{
    display:none; /* nur Avatar + Chevron */
  }
}

@media (max-width: 1023px){
  #alAccountPill,
  #icon-user.al-header-rail-trigger{
    display:none !important;
  }
}

/* =========================================================
   ACCOUNT AREA — hide header "My Account" pill
   (Rail is already visible, so this is redundant)
========================================================= */

/* Most robust: account pages */
body.account-area #alAccountPill,
body.woocommerce-account #alAccountPill,
body.account-area .al-account-pill,
body.woocommerce-account .al-account-pill{
  display:none !important;
}


/* Transparent header over hero: secondary soll sichtbar bleiben */
.al-header[data-transparent="true"]:not(.is-solid) .al-authpill--secondary{
  color:#fff !important;
  border-color:rgba(255,255,255,.35) !important;
}
.al-header[data-transparent="true"]:not(.is-solid) .al-authpill--secondary:hover{
  background:rgba(255,255,255,.12) !important;
}

/* =========================================================
   HEADER AUTH BUTTONS – final
   ========================================================= */

:root{
  --al-brand: #2C6B4A;
  --al-ink: #0f172a;
  --al-muted: #f1f5f9;
  --al-border: rgba(15,23,42,.14);
}

/* Base pill */
.al-header-root .al-authpill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  height:40px !important;
  padding:0 16px !important;

  border-radius:12px !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1 !important;
  white-space:nowrap !important;

  text-decoration:none !important;
  cursor:pointer !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .08s ease,
    box-shadow .15s ease !important;
}

/* Secondary (Log in) */
.al-header-root .al-authpill--secondary{
  background:#fff !important;
  color:var(--al-ink) !important;
  border:1px solid var(--al-border) !important;
}

.al-header-root .al-authpill--secondary:hover{
  background:var(--al-muted) !important;
}

/* Primary (Sign up) */
/* Premium Primary */
.al-header-root .al-authpill--primary{
  background: linear-gradient(135deg, #2C6B4A 0%, #2F7A55 100%) !important;
  color:#fff !important;
  border:1px solid #2C6B4A !important;
  box-shadow:
    0 4px 12px rgba(44,107,74,.18),
    0 1px 0 rgba(255,255,255,.08) inset !important;
  transition:
    transform .15s ease,
    box-shadow .2s ease,
    filter .2s ease !important;
}

.al-header-root .al-authpill--primary:hover,
.al-header-root .al-authpill--primary:focus-visible{
  transform: translateY(-1px);
  box-shadow:
    0 8px 20px rgba(44,107,74,.25),
    0 1px 0 rgba(255,255,255,.10) inset !important;
  filter: brightness(.98);
}

.al-header-root .al-authpill--primary:active{
  transform: translateY(0);
  box-shadow:
    0 3px 8px rgba(44,107,74,.18) !important;
}


@media (max-width: 767px){
  .al-header-root .al-authpill{
    height:32px !important;
    padding:0 10px !important;
    font-size:13px !important;
    border-radius:8px !important;
  }
}

/* =========================================================
   AL CmdK – single source of truth (CSS nur für Look)
   Layout/Display macht al-search.js via inline !important
   ========================================================= */

/* Overlay (JS setzt opacity/pointer-events) */
#alCmdkOverlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(15,23,42,.35) !important;
  z-index:2147483579 !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .18s ease !important;
}

/* Panel Look */
#alCmdk .al-cmdk__search{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 14px !important;
  border-bottom:1px solid var(--al-border, rgba(0,0,0,.08)) !important;
  background:#fff !important;
}

#alCmdk #alCmdkInput{
  flex:1 1 auto !important;
  padding:10px 12px !important;
  border:1px solid var(--al-border, rgba(0,0,0,.08)) !important;
  border-radius:10px !important;
  font:500 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  background:#fff !important;
}

#alCmdk #alCloseCmdk{
  inline-size:32px !important;
  block-size:32px !important;
  border-radius:10px !important;
  background:transparent !important;
  border:0 !important;
  font-size:22px !important;
  line-height:1 !important;
}

#alCmdk #alCmdkList{
  padding:8px !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

#alCmdk #alCmdkList li{
  padding:10px 12px !important;
  border-radius:10px !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
}

#alCmdk #alCmdkList li:hover{ background:rgba(0,0,0,.04) !important; }
#alCmdk #alCmdkList li.is-empty{ text-align:center !important; opacity:.8 !important; }

/* Mobile: verhindert „weißer Klotz“/offscreen bei Tastatur */
@media (max-width: 767px){
  /* JS setzt max-height; wir geben ein robustes Sicherheitsnetz */
  #alCmdk .al-cmdk__panel{
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px)) !important;
    overflow:hidden !important;
  }
  #alCmdk #alCmdkList{
    max-height: calc(100dvh - 24px - 64px - env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Grip optional ausblenden, wenn du kein Pull-to-refresh Risiko willst */
  #alCmdk .al-sheet-grip{ display:none !important; }
}

/* CmdK results: stop "word-per-line" flex shrink */
#alCmdk #alCmdkList li{
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
}

/* title takes the space and may wrap normally */
#alCmdk #alCmdkList li .t{
  flex: 1 1 auto !important;
  min-width: 0 !important;           /* THIS is the key */
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important; /* safety for long strings */
  line-height: 1.25 !important;
}

/* group label stays on one line */
#alCmdk #alCmdkList li em{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  opacity: .65 !important;
  font-style: normal !important;
  font-size: 12px !important;
  margin-top: 2px !important;
}

/* CmdK results – robust wrapping on small widths */
#alCmdk #alCmdkList li{
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  min-width:0 !important;
}

#alCmdk #alCmdkList li .t{
  flex:1 1 auto !important;
  min-width:0 !important;             /* key */
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  line-height:1.25 !important;
}

#alCmdk #alCmdkList li em{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  font-style:normal !important;
  opacity:.65 !important;
}

/* Mobile keyboard-safe CmdK panel */
@media (max-width: 1023px){
  #alCmdk{
    padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + var(--kb-safe, 0px) + 10px) !important;
    align-items: flex-end !important;
  }

  #alCmdk .al-cmdk__panel{
    width: 100% !important;
    max-height: calc(100dvh - 16px - env(safe-area-inset-bottom, 0px) - var(--kb-safe, 0px)) !important;
    overflow: hidden !important; /* panel selbst nicht „doppelt“ scrollen */
  }

  /* nur die Liste scrollt */
  #alCmdk #alCmdkList{
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(
      100dvh
      - 16px
      - env(safe-area-inset-bottom, 0px)
      - var(--kb-safe, 0px)
      - 72px /* searchbar */
      - 44px /* footer */
    ) !important;
    scroll-padding-bottom: 120px !important;
  }
}

/* CmdK Mobile: stable bottom-sheet + list is ALWAYS the scroller */
@media (max-width:1023px){
  #alCmdk{
    align-items:flex-end !important;
    padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  }

  #alCmdk .al-cmdk__panel{
    width:100% !important;
    max-height: min(82dvh, 720px) !important;     /* ohne Tastatur sauber */
    overflow:hidden !important;                  /* nur 1 scroller: die Liste */
    border-radius:16px 16px 0 0 !important;
  }

  #alCmdk #alCmdkList{
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    max-height: calc(min(82dvh, 720px) - 64px - 44px) !important; /* searchbar + footer */
    overscroll-behavior: contain !important;
  }
}

/* CmdK: Panel wird eine Spalte, Liste füllt den Rest und DARF schrumpfen */
#alCmdk .al-cmdk__panel{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;      /* Panel selbst scrollt nicht */
}

/* Searchbar/ Footer bleiben “oben/unten” */
#alCmdk .al-cmdk__search{ flex:0 0 auto !important; }
#alCmdk #al-search-footer{ flex:0 0 auto !important; }

/* Liste ist der einzige Scroller */
#alCmdk #alCmdkList{
  flex:1 1 auto !important;        /* nimmt Resthöhe */
  min-height:0 !important;         /* WICHTIG: sonst kein Scroll in Flex */
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
}