/* ============================================================
   BLUBBERHAUS — custom.css  (NOVABlubber child theme)
   Round 1: brand tokens, fonts, topbar, header, logo, footer
   Applied over NOVA parent HTML — dynamic parts untouched.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root{
  --blue:#1A1A1A;
  --blue2:#333333;
  --blue-l:#333333;
  --dark:#0d1b2a;
  --navy:#1a2d42;
  --bg:#f5f7fa;
  --bdr:#e8edf2;
  --t2:#5a7080;
  --t3:#9aacba;
  --ff:'Outfit',sans-serif;
}

/* ---- Global font ---- */
body,.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6,
.btn,input,select,textarea,.navbar,.nav-link{
  font-family:var(--ff) !important;
}

/* ---- Page background: WHITE ---- */
body{background:#ffffff !important}
#content-wrapper,main,.main-content,.opc-canvas,.opc-page,
#opc-page,.opc-portlet,.opc-area{background:transparent !important}
#content-wrapper:not(.has-fluid){background:#ffffff !important}

/* ============================================================
   TOPBAR  (#header-top-bar in NOVA — dark blubberhaus strip)
   ============================================================ */
#header-top-bar.topbar-wrapper{
  background:var(--navy) !important;
  min-height:36px;
  padding:0;
  display:flex !important;   /* force visible on mobile too (NOVA hides it) */
}
/* Undo NOVA's flex-row-reverse so our order (USP center, links right) works */
#header-top-bar .container-fluid{
  align-items:center !important;
  flex-direction:row !important;
  justify-content:center !important;
  position:relative;
  display:flex !important;
}
#header-top-bar .nav-link{
  color:rgba(255,255,255,.95) !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:.1px;
  padding:.3rem .7rem;
}
#header-top-bar .nav-link:hover{color:#fff !important}
#header-top-bar .nav-link i{color:#fff !important}
/* dividers between items */
#header-top-bar .nav-dividers > li + li{border-left:1px solid rgba(255,255,255,.22)}

/* USP strip — centered in the middle */
.topbar-usp{display:flex;list-style:none;margin:0;padding:0;align-items:center;justify-content:center}
.topbar-usp .nav-link{cursor:default;white-space:nowrap;display:flex;align-items:center}

/* Links group — pushed to the far right (absolute so USP stays truly centered) */
#header-top-bar .topbar-right{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  margin:0;display:flex;align-items:center;
}
/* Mobile topbar: hide B2B/News/Kontakt links, show only 2 USP items centered */
@media(max-width:991.98px){
  #header-top-bar .topbar-right{display:none !important}
  #header-top-bar .nav-link{font-size:9.5px !important;padding:.3rem .5rem}
  .topbar-usp{width:100%;justify-content:center}
}

/* ============================================================
   HEADER  (#jtl-nav-wrapper — sticky translucent bar)
   ============================================================ */
#jtl-nav-wrapper{
  background:rgba(255,255,255,.97) !important;
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--bdr) !important;
  box-shadow:0 2px 24px rgba(0,0,0,.06);
  position:sticky;position:-webkit-sticky;top:0;
  /* sticky establishes a containing block, so the absolute search bar anchors here */
}

/* Desktop single-row header: keep logo INLINE with nav (not floated below) */
@media(min-width:992px){
  #jtl-nav-wrapper .container-fluid,
  #jtl-nav-wrapper .container-fluid-xl{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
  }
  #jtl-nav-wrapper .toggler-logo-wrapper{
    float:none !important;
    position:static !important;
    display:flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    margin-right:1.5rem !important;
  }
  #jtl-nav-wrapper .navbar{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
}

/* Logo */
#jtl-nav-wrapper .navbar-brand img#shop-logo,
#logo .navbar-brand img{
  height:44px !important;
  width:auto !important;
  max-width:180px;
  object-fit:contain;
}
@media(min-width:992px){
  #jtl-nav-wrapper .navbar-brand img#shop-logo,
  #logo .navbar-brand img{height:50px !important;max-width:220px}
}

/* Main category nav links */
#mainNavigation .navbar-nav > li.nav-item > a.nav-link{
  font-size:15px !important;
  font-weight:600 !important;
  color:var(--dark) !important;
  transition:color .18s;
  position:relative;
  padding-left:.6rem !important;
  padding-right:.6rem !important;
}
@media(min-width:1200px){
  #mainNavigation .navbar-nav > li.nav-item > a.nav-link{
    padding-left:.85rem !important;padding-right:.85rem !important;
  }
}
#mainNavigation .navbar-nav > li.nav-item > a.nav-link:hover,
#mainNavigation .navbar-nav > li.nav-item:hover > a.nav-link,
#mainNavigation .navbar-nav > li.nav-item.show > a.nav-link{color:var(--blue) !important}
/* animated underline */
#mainNavigation .navbar-nav > li.nav-item > a.nav-link::after{
  content:'';position:absolute;left:.6rem;right:.6rem;bottom:2px;height:2px;
  background:var(--blue);transform:scaleX(0);transition:transform .22s ease;
}
#mainNavigation .navbar-nav > li.nav-item:hover > a.nav-link::after,
#mainNavigation .navbar-nav > li.nav-item.show > a.nav-link::after{transform:scaleX(1)}

/* Right-side icons (search / account / wishlist / cart) */
#shop-nav.nav-icons > li > .nav-link{
  color:var(--dark) !important;
  font-size:17px;
  transition:color .18s,background .18s;
  border-radius:10px;
}
#shop-nav.nav-icons > li > .nav-link:hover{background:var(--bg) !important;color:var(--blue) !important}

/* Cart price text — keep but style */
.cart-icon-dropdown-price{font-size:13px;font-weight:700;color:var(--dark)}

/* ============================================================
   SEARCH — icon toggles a full-width bar below the header
   ============================================================ */
/* Hide the burger/toggler on desktop — full nav is visible, no burger needed */
@media(min-width:992px){
  #burger-menu,.burger-menu-wrapper,.navbar-toggler{display:none !important}
}

/* Force the inner navbar row (icons + category nav) to vertically CENTER,
   overriding base .align-items-lg-end{align-items:flex-end}. Applies to desktop + mobile. */
#jtl-nav-wrapper .navbar,
#jtl-nav-wrapper .navbar.align-items-lg-end{
  align-items:center !important;
}
#jtl-nav-wrapper #shop-nav.nav-icons,
#jtl-nav-wrapper #mainNavigation{
  align-self:center !important;
}
#jtl-nav-wrapper .navbar-brand{display:flex;align-items:center;margin:0}

/* ─── MOBILE HEADER: one centered row (burger + logo left, icons right) ─── */
@media(max-width:991.98px){
  /* the outer container is the single flex row */
  #jtl-nav-wrapper .container-fluid,
  #jtl-nav-wrapper .container-fluid-xl{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    min-height:60px;
    position:relative;
  }
  /* burger + logo: static (not absolute/float), sits at the left */
  #jtl-nav-wrapper .toggler-logo-wrapper{
    position:static !important;
    float:none !important;
    display:flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    margin:0 !important;
  }
  #jtl-nav-wrapper .toggler-logo-wrapper #burger-menu{
    float:none !important;position:static !important;
    padding:8px 10px 8px 0 !important;margin:0 !important;
    display:flex !important;align-items:center;
  }
  #jtl-nav-wrapper .toggler-logo-wrapper .logo-wrapper{
    float:none !important;position:static !important;margin:0 !important;
    display:flex !important;align-items:center;
  }
  /* the navbar takes remaining space; icons pushed to the right, centered */
  #jtl-nav-wrapper .navbar{
    flex:1 1 auto !important;
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    min-width:0;
  }
  #jtl-nav-wrapper #shop-nav.nav-icons{
    margin-left:auto !important;
    align-items:center !important;
    align-self:center !important;
    order:0 !important;
  }
  /* the collapsible category menu stays hidden until burger tap (NOVA default);
     when closed it must take no row space so icons stay on the top row */
  #jtl-nav-wrapper #mainNavigation.collapse:not(.show){display:none !important}
}

/* ============================================================
   MOBILE MENU (drawer) — styled like blubberhaus design
   ============================================================ */
@media(max-width:991.98px){
  /* Drawer panel — slide-in from left, ~86% width, above the header */
  #mainNavigation.collapse.show,
  #mainNavigation.collapsing{
    display:block !important;
    position:fixed !important;
    top:0 !important;left:0 !important;bottom:0 !important;
    width:min(340px,86vw) !important;max-width:86vw !important;
    height:100vh !important;
    background:#fff !important;
    z-index:1100 !important;
    overflow-y:auto !important;
    box-shadow:0 0 40px rgba(0,0,0,.25);
    -webkit-overflow-scrolling:touch;
  }
  #mainNavigation .nav-mobile-body{background:#fff}

  /* header of the drawer (back / close / title row) */
  .nav-mobile-header{
    padding:16px 18px !important;
    border-bottom:1px solid var(--bdr) !important;
    align-items:center !important;
    position:sticky;top:0;background:#fff;z-index:2;
  }
  .nav-mobile-header .nav-mobile-header-name{
    font-family:var(--ff);font-size:16px;font-weight:800;color:var(--dark);
  }
  .nav-mobile-header .navbar-toggler,
  .nav-mobile-header .nav-mobile-back{color:var(--blue) !important}

  /* each menu row — tighter, cleaner */
  #mainNavigation .navbar-nav .nav-item{
    border-bottom:1px solid var(--bg);
    width:100%;
  }
  /* Top-level row = the dropdown-toggle link. Force text + arrow on ONE line. */
  #mainNavigation .navbar-nav > .nav-item > .nav-link.dropdown-toggle{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:14px 18px !important;
    font-family:var(--ff);font-weight:600 !important;
    color:var(--dark) !important;text-decoration:none !important;
    width:100% !important;line-height:1.2;
    position:relative;
  }
  #mainNavigation .nav-mobile-heading{
    font-family:var(--ff);font-size:14.5px !important;font-weight:600 !important;
    color:var(--dark) !important;
    flex:1 1 auto;margin:0 !important;
  }
  #mainNavigation .navbar-nav .nav-link:active{background:var(--bg)}

  /* HIDE Bootstrap/base solid-triangle carets on the mobile nav links */
  #mainNavigation .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after,
  #mainNavigation .navbar-nav .nav-link[data-toggle="collapse"]::after,
  #mainNavigation .dropright .nav-link::after{
    display:none !important;content:none !important;border:0 !important;
  }
  /* Draw our OWN clean chevron using ::before on a wrapper we control.
     Add it as a trailing element via the nav-mobile-heading parent using an extra pseudo. */
  #mainNavigation .navbar-nav > .nav-item{position:relative}
  /* CRITICAL: keep dropdown-full items static so their submenu anchors to the
     drawer body (top:0 = top of drawer), NOT to the li. Fixes the white gap
     when opening a lower category. The chevron anchors to .nav-link (relative). */
  #mainNavigation .navbar-nav > .nav-item.dropdown-full{position:static !important}
  #mainNavigation .navbar-nav > .nav-item > .nav-link.dropdown-toggle{padding-right:40px !important}
  #mainNavigation .navbar-nav > .nav-item > .nav-link.dropdown-toggle::before{
    content:"" !important;
    position:absolute !important;right:16px;top:50%;
    width:8px;height:8px;
    border:0 solid var(--t2) !important;
    border-top:2px solid var(--t2) !important;
    border-right:2px solid var(--t2) !important;
    transform:translateY(-50%) rotate(45deg) !important;
    box-sizing:border-box;
    display:block !important;
    margin:0 !important;
  }
  /* ── Left icons: ONLY on the TOP-LEVEL categories (direct children of the scrollbar list) ── */
  #mainNavigation .navbar-nav.nav-scrollbar-inner > .nav-item > .nav-link.dropdown-toggle > .nav-mobile-heading{
    display:inline-flex;align-items:center;
  }
  #mainNavigation .navbar-nav.nav-scrollbar-inner > .nav-item > .nav-link.dropdown-toggle > .nav-mobile-heading::before{
    font-family:"Font Awesome 5 Free" !important;font-weight:900;
    color:var(--blue);font-size:14px;width:24px;flex:0 0 auto;
    margin-right:4px;text-align:left;
    content:"\f72e"; /* default wind icon */
  }
  /* map by href (top-level only) */
  #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link[href*="Tabak"] > .nav-mobile-heading::before{content:"\f06c" !important}
  #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link[href*="Kohle"] > .nav-mobile-heading::before{content:"\f7e4" !important}
  #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link[href*="Zubeh"] > .nav-mobile-heading::before{content:"\f7d9" !important}
  #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link[href*="Liquid"] > .nav-mobile-heading::before{content:"\f0c3" !important}
  #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link[href*="Zigarett"] > .nav-mobile-heading::before,
  #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link[href*="Vape"] > .nav-mobile-heading::before{content:"\f0e7" !important}
  #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link[href*="SAMEN"] > .nav-mobile-heading::before,
  #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link[href*="Samen"] > .nav-mobile-heading::before{content:"\f4d8" !important}
  /* sub-level (drilled-in) items: NO left icon */
  #mainNavigation .dropdown-menu .nav-mobile-heading::before,
  #mainNavigation .subcategory-wrapper .nav-mobile-heading::before{content:none !important;display:none !important}

  /* ── SUB-LEVEL items (drilled-in): normalise Bootstrap columns to full-width rows ── */
  #mainNavigation .dropdown-menu .col.nav-item,
  #mainNavigation .subcategory-wrapper .col.nav-item,
  #mainNavigation .nav-item-lg-m{
    border-bottom:1px solid var(--bg) !important;
    width:100% !important;max-width:100% !important;
    flex:0 0 100% !important;
    margin:0 !important;padding:0 !important;
    position:relative !important;
  }
  /* CRITICAL (3rd level): keep dropdown items static so their deeper submenu
     anchors to the drawer body, not the item (fixes white gap on level 3). */
  #mainNavigation .dropdown-menu .col.nav-item.dropdown,
  #mainNavigation .subcategory-wrapper .col.nav-item.dropdown,
  #mainNavigation .nav-item-lg-m.dropdown{position:static !important}
  /* the actual link uses .categories-recursive-link (NOT .nav-link) */
  /* MATCH level-1 exactly: same 14px vertical padding, weight 600, dark colour */
  #mainNavigation .categories-recursive-link,
  #mainNavigation .col.nav-item > a{
    display:flex !important;align-items:center !important;justify-content:flex-start !important;
    padding:14px 40px 14px 18px !important;
    font-family:var(--ff);font-size:14.5px !important;font-weight:600 !important;
    color:var(--dark) !important;text-decoration:none !important;
    width:100% !important;line-height:1.2 !important;min-height:0 !important;
    margin:0 !important;background:#fff !important;
    position:relative !important;   /* anchor the chevron to the link, not the (static) item */
  }
  #mainNavigation .categories-recursive-link .text-truncate,
  #mainNavigation .categories-recursive-link .nav-mobile-heading{
    font:inherit !important;color:inherit !important;margin:0 !important;
  }
  /* right chevron ONLY on sub-level items that have deeper levels (.dropdown) */
  #mainNavigation .col.nav-item.dropdown > a.categories-recursive-link::after,
  #mainNavigation .col.nav-item.dropdown > a::after{
    content:"" !important;position:absolute !important;right:16px;top:50%;
    width:8px;height:8px;
    border:0 solid var(--t2) !important;
    border-top:2px solid var(--t2) !important;border-right:2px solid var(--t2) !important;
    transform:translateY(-50%) rotate(45deg) !important;
    box-sizing:border-box;display:block !important;margin:0 !important;
  }
  /* remove any Bootstrap caret on these */
  #mainNavigation .col.nav-item.dropdown > a.dropdown-toggle::before{display:none !important;content:none !important}
  /* hide bootstrap caret on sub-level too */
  #mainNavigation .dropdown-menu .nav-link.dropdown-toggle::after,
  #mainNavigation .subcategory-wrapper .nav-link.dropdown-toggle::after{display:none !important;content:none !important}
  /* "... anzeigen" headline — same row height as level 1, blue accent, white bg */
  #mainNavigation .submenu-headline,
  #mainNavigation .submenu-headline strong,
  #mainNavigation .submenu-headline .nav-mobile-heading{
    color:var(--blue) !important;font-weight:800 !important;
  }
  #mainNavigation .submenu-headline{
    padding:14px 18px !important;background:#fff !important;
  }

  /* Hide the count badges (⊕) on the mobile-menu Wunschzettel/Vergleichsliste
     rows — keeps the list clean; nothing to misalign with the arrows. */
  #mainNavigation .fa-sup,
  #mainNavigation #shop-nav-wish .fa-sup,
  #mainNavigation #shop-nav-compare .fa-sup,
  #mainNavigation .nav-link .fa-sup{display:none !important}
  /* the "... anzeigen" headline (top of each level) — blue accent, white bg
     (was grey var(--bg) which caused the striped look vs level 1) */
  .submenu-headline,
  #mainNavigation .submenu-headline .nav-link{
    font-weight:800 !important;color:var(--blue) !important;
    background:#fff !important;
  }
  /* remove empty gap at top (both top-level AND drilled-in sub-levels) */
  #mainNavigation .nav-mobile-body,
  #mainNavigation .navbar-nav.nav-scrollbar-inner{
    padding-top:0 !important;margin-top:0 !important;
  }
  /* drilled-in submenu panel: kill Bootstrap dropdown-menu padding + empty wrappers */
  #mainNavigation .dropdown-menu.show,
  #mainNavigation .dropdown-menu{
    padding:0 !important;margin:0 !important;border:0 !important;
  }
  #mainNavigation .dropdown-body{padding:0 !important;margin:0 !important}
  #mainNavigation .subcategory-wrapper{padding:0 !important;margin:0 !important}
  #mainNavigation .subcategory-wrapper > .row{margin:0 !important}
  /* hide empty image/banner wrappers that reserve vertical space in submenus */
  #mainNavigation .dropdown-menu .subcategories-image,
  #mainNavigation .dropdown-menu .category-image,
  #mainNavigation .dropdown-menu .content-cats-small{display:none !important}
  #mainNavigation .nav-mobile-header-hr{display:none !important}
  #mainNavigation .navbar-nav.nav-scrollbar-inner > .nav-item:first-child{border-top:none;margin-top:0 !important}
  /* hide the recursive submenu panels until their level is opened */
  #mainNavigation .nav-item.dropdown-full > .dropdown-menu:not(.show){display:none !important}
  /* the toggle link should not have Bootstrap's caret pushing layout */
  #mainNavigation .nav-link.dropdown-toggle > .caret,
  #mainNavigation .nav-link.dropdown-toggle::before{display:none !important}
}

/* Icon group: search + account + wishlist + cart, all together on the right */
#shop-nav.nav-icons{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:2px;
}
@media(min-width:992px){
  #shop-nav.nav-icons{margin-left:auto !important}
}
/* Search icon: normal inline item, no special positioning, no growth */
#search.bh-search-icon-item,
#shop-nav #search{
  position:static !important;
  transform:none !important;
  left:auto !important;right:auto !important;
  margin:0 !important;
  flex:0 0 auto !important;
  width:auto !important;max-width:none !important;
  order:0 !important;
}
/* make sure the search toggle icon is always visible */
#search.bh-search-icon-item,
.bh-search-icon-item .bh-search-toggle{display:flex !important}
.bh-search-toggle{
  display:flex !important;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:10px;
  color:var(--dark) !important;font-size:17px;
  transition:color .18s,background .18s;cursor:pointer;
  text-decoration:none;
}
.bh-search-toggle:hover{background:var(--bg);color:var(--blue) !important}

/* ── Slide-down full-width search bar — clean & simple ── */
.bh-search-bar{
  position:fixed;left:0;right:0;top:0;
  background:#fff;
  box-shadow:0 8px 24px rgba(13,27,42,.12);
  max-height:0;overflow:hidden;
  transition:max-height .3s ease;
  z-index:2000;
}
.bh-search-bar.open{max-height:72px}
/* once fully open: let the live-search suggestions (appended inside the form) show below the bar */
.bh-search-bar.open.bh-sb-full{overflow:visible}
.bh-search-bar .bh-search-form{position:relative}
.bh-search-bar #live-search-suggestions{z-index:2001}
.bh-search-bar-inner{
  max-width:620px;margin:0 auto;
  height:64px;padding:0 16px;
  display:flex;align-items:center;gap:10px;
}
.bh-search-bar .bh-search-form{flex:1 1 auto;margin:0;width:100%}
/* single clean rounded pill: input fills, button flush at right end */
.bh-search-bar .input-group{
  display:flex !important;
  width:100% !important;
  border:1.5px solid var(--blue);
  border-radius:50px;
  overflow:hidden;
  background:#fff;
  height:48px;
  flex-wrap:nowrap !important;
}
/* input must FILL the pill — override JTL's fixed #search width */
.bh-search-bar #search-header,
.bh-search-bar .input-group .form-control,
.bh-search-bar .input-group .ac_input,
.bh-search-bar .input-group .live-search-input,
.bh-search-bar .input-group .twitter-typeahead .tt-input{
  border:none !important;box-shadow:none !important;outline:none !important;
  height:48px !important;padding:0 20px;font-size:15px;background:transparent !important;
  flex:1 1 auto !important;min-width:0 !important;
  width:auto !important;max-width:none !important;
}
/* if JS wraps input in typeahead, that wrapper must fill too */
.bh-search-bar .input-group .twitter-typeahead{flex:1 1 auto !important;width:auto !important;min-width:0 !important}
.bh-search-bar .input-group-append{display:flex;margin:0;flex:0 0 auto}
.bh-search-bar .input-group-append .btn{
  background:var(--blue) !important;border:none !important;color:#fff !important;
  width:56px;height:100%;border-radius:0;margin:0;
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.bh-search-bar .input-group-append .btn:hover{background:var(--blue2) !important}
/* close button — simple round */
.bh-search-close{
  flex:0 0 auto;width:44px;height:44px;border:none;background:transparent;
  border-radius:50px;color:var(--t3);font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .18s;
}
.bh-search-close:hover{background:var(--bg);color:var(--dark)}

@media(max-width:767px){
  .bh-search-bar.open{max-height:70px}
  .bh-search-bar-inner{height:62px;padding:0 12px;gap:8px;max-width:100%}
  .bh-search-bar .input-group{height:44px}
  .bh-search-close{width:38px;height:38px;font-size:16px}
}

/* ── Match blubberhaus design icons (FontAwesome 6 glyph swap) ── */
/* Account: fa-user -> fa-circle-user */
.account-icon-dropdown .nav-link .fa-user::before{content:"\f2bd"}
/* Cart: fa-shopping-cart -> fa-bag-shopping */
.cart-icon-dropdown .fa-shopping-cart::before,
.cart-icon-dropdown-icon.fa-shopping-cart::before{content:"\f290"}
/* Wishlist stays fa-heart (already matches). Search uses fa-magnifying-glass. */

/* Cart / wishlist / compare count badge */
.fa-sup,#badge-wl-count,#comparelist-badge,
#shop-nav .fa-sup,.cart-icon-dropdown .fa-sup{
  background:var(--blue) !important;
  color:#fff !important;
  font-size:9px !important;
  font-weight:900 !important;
  border:2px solid #fff !important;
  border-radius:50px !important;
}

/* ============================================================
   BUTTONS — brand primary
   ============================================================ */
.btn-primary,.btn-outline-primary:hover{
  background-color:var(--blue) !important;
  border-color:var(--blue) !important;
}
.btn-primary:hover,.btn-primary:focus{
  background-color:var(--blue2) !important;
  border-color:var(--blue2) !important;
}
.btn-outline-primary{
  color:var(--blue) !important;
  border-color:var(--blue) !important;
}
a{color:var(--blue)}
a:hover{color:var(--blue2)}

/* ============================================================
   FOOTER — blubberhaus dark footer
   (custom markup injected via footer.tpl block override)
   ============================================================ */
/* ── Newsletter row (above footer) ── */
.bh-nl{background:var(--dark);padding:40px 0;border-top:1px solid rgba(255,255,255,.06)}
@media(max-width:767px){.bh-nl{padding:24px 16px}}
.bh-nl-inner{max-width:500px;margin:0 auto;padding:0 20px;text-align:center}
@media(max-width:767px){.bh-nl-inner{padding:0}}
.bh-nl-h{font-family:var(--ff);font-size:22px;font-weight:900;letter-spacing:-.6px;color:#fff;margin-bottom:7px}
.bh-nl-sub{font-size:13px;color:rgba(255,255,255,.8);margin-bottom:22px;line-height:1.6}
.bh-nl-form{display:flex;gap:5px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);border-radius:50px;padding:5px}
.bh-nl-form:focus-within{border-color:rgba(255,255,255,.28)}
.bh-nl-form input{flex:1 1 auto;background:transparent;border:none;outline:none;padding:9px 15px;font-family:var(--ff);font-size:13px;color:#fff;min-width:0}
.bh-nl-form input::placeholder{color:rgba(255,255,255,.45)}
.bh-nl-form button{background:var(--blue);color:#fff;border:none;font-family:var(--ff);font-size:12.5px;font-weight:700;padding:10px 22px;border-radius:50px;white-space:nowrap;cursor:pointer;transition:background .18s;flex:0 0 auto}
.bh-nl-form button:hover{background:var(--blue-l)}
.bh-nl-note{font-size:10.5px;color:rgba(255,255,255,.55);margin-top:11px}
@media(max-width:767px){
  .bh-nl-h,.bh-nl-sub{display:none}
  .bh-nl-inner{text-align:left}
  .bh-nl-form{border-radius:12px;padding:4px}
  .bh-nl-form button{border-radius:9px;padding:10px 16px;font-size:12px}
  .bh-nl-note{text-align:center;font-size:10px}
}

.bh-footer{
  background:var(--dark);
  padding:44px 0 calc(16px + env(safe-area-inset-bottom,0px));
  border-top:1px solid rgba(255,255,255,.08);
  color:#fff;
}
@media(max-width:767px){.bh-footer{padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px))}}
.bh-footer .bh-wrap{max-width:1320px;margin:0 auto;padding:0 16px}
@media(min-width:768px){.bh-footer .bh-wrap{padding:0 24px}}

.bh-foot-g{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:20px}
@media(min-width:480px){.bh-foot-g{grid-template-columns:1fr 1fr;gap:28px 20px}}
@media(min-width:992px){.bh-foot-g{grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:40px;align-items:start;margin-bottom:28px}}

/* ── Column 1: brand / logo / about / socials ── */
.bh-foot-brand-area{grid-column:1/-1;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
@media(min-width:992px){.bh-foot-brand-area{grid-column:1;padding-bottom:0;border-bottom:none}}
.bh-foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.bh-foot-brand span{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.5px}
.bh-foot-brand{display:flex;justify-content:center;margin-bottom:16px}
.bh-foot-logo{height:auto !important;width:150px !important;max-width:170px !important;object-fit:contain;display:block}
@media(min-width:992px){.bh-foot-brand{justify-content:flex-start}}
.bh-foot-about{font-size:13px;color:rgba(255,255,255,.85);line-height:1.75;max-width:260px;margin-bottom:18px}
.bh-foot-socs{display:flex;gap:8px}
.bh-foot-soc{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6) !important;font-size:14px;transition:all .18s;text-decoration:none}
.bh-foot-soc:hover{background:var(--blue);border-color:var(--blue);color:#fff !important}

/* ── Dynamic CMS box content — match dark footer ── */
.bh-foot-col--cms{color:rgba(255,255,255,.9)}
.bh-foot-col--cms .box{background:transparent !important;border:none !important;padding:0 !important;margin:0 !important}

/* The heading text lives in .box-normal-link > .text-truncate (a toggle link).
   The .productlist-filter-headline is EMPTY, so hide it. Keep .box-normal-link
   as the single heading, style it, and disable its toggle behaviour. */
.bh-foot-col--cms .productlist-filter-headline{display:none !important}
.bh-foot-col--cms .box-normal-link{
  display:flex !important;align-items:center;
  font-size:12px !important;font-weight:800 !important;color:#ffffff !important;
  text-transform:uppercase;letter-spacing:1px;text-decoration:none !important;
  margin:0 0 14px !important;padding:0 0 10px !important;
  border-bottom:1px solid rgba(255,255,255,.2);
  display:flex !important;align-items:center;justify-content:space-between;
  pointer-events:none;   /* desktop: no toggle */
}
.bh-foot-col--cms .box-normal-link .text-truncate{color:#fff !important;font:inherit !important}
/* hide NOVA's own caret/chevron; we add our own arrow */
.bh-foot-col--cms .box-normal-link .fa,
.bh-foot-col--cms .box-normal-link [class*="chevron"],
.bh-foot-col--cms .box-normal-link [class*="caret"]{display:none !important}
.bh-foot-col--cms .box-normal-link::after{
  content:"\f078" !important;   /* fa chevron-down */
  font-family:"Font Awesome 5 Free" !important;font-weight:900;
  font-size:11px;color:rgba(255,255,255,.5);
  display:none;transition:transform .25s;margin-left:auto;
}
/* Hilfe box (140) uses <h5> as heading */
.bh-foot-box-140 h5{
  font-size:12px !important;font-weight:800 !important;color:#fff !important;
  text-transform:uppercase;letter-spacing:1px;margin:0 0 10px !important;
}

/* force collapsed link lists OPEN on ALL screens — max specificity to beat
   Bootstrap's media-query .collapse:not(.show){display:none}. */
#footer .bh-foot-col--cms div[id^="crd-cllps-"],
.bh-footer .bh-foot-col--cms div[id^="crd-cllps-"],
.bh-footer .bh-foot-col--cms .collapse,
.bh-footer .bh-foot-col--cms .collapse.d-md-block,
.bh-footer .bh-foot-col--cms .collapsing{
  display:block !important;height:auto !important;max-height:none !important;
  visibility:visible !important;opacity:1 !important;overflow:visible !important;
}
.bh-foot-col--cms .nav-panel,
.bh-foot-col--cms .box-nav-item{display:block !important;padding:0 !important;background:transparent !important;border:none !important}
.bh-foot-col--cms .nav.flex-column,
.bh-foot-col--cms ul.nav{display:flex !important;flex-direction:column !important;gap:11px !important;padding:0 !important;margin:0 !important;list-style:none !important}
.bh-foot-col--cms li.nav-item{display:block !important;margin:0 !important;border:none !important}
.bh-foot-col--cms a.nav-link{
  display:block !important;padding:0 !important;
  font-size:13.5px !important;color:rgba(255,255,255,.9) !important;text-decoration:none !important;
}
.bh-foot-col--cms a.nav-link:hover{color:#fff !important}
.bh-foot-col--cms .box-normal-hr{display:none !important}
.bh-foot-col--cms ul{list-style:none;display:flex;flex-direction:column;gap:11px;padding:0;margin:0}
.bh-foot-col--cms li{margin:0;border:none !important}
.bh-foot-col--cms a{font-size:13.5px;color:rgba(255,255,255,.9) !important;text-decoration:none;transition:color .18s}
.bh-foot-col--cms a:hover{color:#fff !important}
.bh-foot-col--cms p{font-size:13px;color:rgba(255,255,255,.85);line-height:1.7;margin:0 0 8px}
.bh-foot-col--cms p i{color:var(--blue-l);width:16px;margin-right:4px}

/* Hilfe box (140) as column 1 — brand name + socials */
.bh-foot-brandname{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.5px;display:block;margin-bottom:14px}
.bh-foot-box-140 .footer-help-box{color:#fff}
.bh-foot-box-140 .footer-help-box p{margin:0 0 8px}

/* map box — iframe fills the column */
.bh-foot-box-143 .box-content-wrapper > div{max-width:100% !important;margin:0 !important}
.bh-foot-box-143 iframe{width:100% !important;height:170px !important;border:0;border-radius:10px;display:block}

.bh-foot-col h5{font-size:11px;font-weight:700;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:space-between}
.bh-foot-col h5 .bh-fc-arrow{display:none;font-size:11px;color:rgba(255,255,255,.5);transition:transform .25s}
@media(max-width:767px){
  .bh-foot-col h5{font-size:13px;color:#fff;cursor:pointer;margin-bottom:0;user-select:none;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .bh-foot-col h5 .bh-fc-arrow{display:block}
  .bh-foot-col h5.open .bh-fc-arrow{transform:rotate(180deg)}
  /* accordion clamp — ONLY for the static (non-CMS) columns that have an h5 toggle */
  .bh-foot-col:not(.bh-foot-col--cms) ul{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;padding:0}
  .bh-foot-col:not(.bh-foot-col--cms) h5.open + ul{max-height:320px;padding-top:10px;padding-bottom:14px}
  /* CMS boxes become tappable accordions on mobile */
  .bh-foot-col--cms .box-normal-link{
    pointer-events:auto !important;cursor:pointer;margin-bottom:0 !important;
    padding:14px 0 !important;
  }
  .bh-foot-col--cms .box-normal-link::after{display:inline-block !important}
  .bh-foot-col--cms.bh-open .box-normal-link::after{transform:rotate(180deg)}
  /* collapsed by default on mobile; expand when the column has .bh-open */
  .bh-footer .bh-foot-col--cms .collapse,
  .bh-footer .bh-foot-col--cms .collapse ul.nav{
    max-height:0 !important;overflow:hidden !important;padding:0 !important;
    transition:max-height .3s ease,padding .3s ease;
  }
  .bh-footer .bh-foot-col--cms.bh-open .collapse,
  .bh-footer .bh-foot-col--cms.bh-open .collapse ul.nav{
    max-height:400px !important;overflow:visible !important;
    padding-top:10px !important;padding-bottom:14px !important;
  }
  /* map box (143) has no toggle — keep it always open */
  .bh-foot-box-143 .collapse,.bh-foot-box-143 .box-content-wrapper{max-height:none !important;overflow:visible !important}
}
/* desktop: always open */
@media(min-width:768px){
  .bh-footer .bh-foot-col--cms ul,
  .bh-footer .bh-foot-col--cms .collapse ul.nav{max-height:none !important;overflow:visible !important}
}
.bh-foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0 0 4px;margin:0}
@media(min-width:768px){.bh-foot-col ul{padding-bottom:0}}
.bh-foot-col ul li a{font-size:13px;color:rgba(255,255,255,.9) !important;transition:color .18s}
.bh-foot-col ul li a:hover{color:#fff !important}

.bh-foot-bot{padding-top:18px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.bh-foot-copy{font-size:12px;color:rgba(255,255,255,.7)}
.bh-foot-copy a{color:rgba(255,255,255,.7) !important;transition:color .18s}
.bh-foot-copy a:hover{color:#fff !important}
.bh-foot-pay{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
/* payment badges — white cards with brand-coloured text, like real logos */
.bh-pay-t{
  font-size:11px;font-weight:800;letter-spacing:.2px;
  background:#fff;color:#0d1b2a;
  padding:5px 10px;border-radius:5px;line-height:1;
  display:inline-flex;align-items:center;gap:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.bh-pay-paypal{color:#003087}
.bh-pay-paypal::after{content:'';}
.bh-pay-klarna{background:#ffb3c7;color:#0a0a0a}
.bh-pay-visa{color:#1a1f71;font-style:italic;font-weight:900;letter-spacing:1px}
.bh-pay-mc{color:#eb001b}
.bh-pay-applepay{color:#000}
.bh-pay-gpay{color:#4285f4}
.bh-pay-vorkasse{color:#5a7080}

/* ── Mobile footer polish ── */
@media(max-width:767px){
  .bh-foot-bot{flex-direction:column;align-items:flex-start;gap:14px}
  .bh-foot-pay{gap:6px;row-gap:8px}
  .bh-pay-t{font-size:10px;padding:5px 9px}
  /* each footer column full-width, spaced */
  .bh-foot-col--cms{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .bh-foot-box-140{border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:18px}
  .bh-foot-socs{margin-top:14px}
}

/* ========================================================================
   Listing / category page product boxes — blubberhaus design (bh-pc)
   These style JTL's native productbox via the item_box.tpl override.
   ======================================================================== */
.bh-pc{
  --bh-blue:#1A1A1A; --bh-blue2:#333333; --bh-dark:#0d1b2a;
  --bh-bdr:#e8edf2; --bh-t3:#9aacba; --bh-r:12px;
  --bh-ease:cubic-bezier(.4,0,.2,1);
  background:#fff; border:1.5px solid var(--bh-bdr); border-radius:var(--bh-r);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  transition:all .28s var(--bh-ease); -webkit-tap-highlight-color:transparent; height:100%;
}
@media(min-width:768px){.bh-pc:hover{box-shadow:0 20px 56px rgba(13,27,42,.13); transform:translateY(-6px); border-color:rgba(50,91,118,.25);}}
.bh-pc .bh-pc-form{display:flex; flex-direction:column; flex:1; margin:0;}

.bh-pc .bh-pc-img{aspect-ratio:1; position:relative; overflow:hidden; background:#f8fafc; flex-shrink:0; display:block; cursor:pointer;}
.bh-pc .bh-pc-img img{width:100%; height:100%; object-fit:contain; padding:8px; transition:transform .5s var(--bh-ease);}
@media(min-width:768px){.bh-pc:hover .bh-pc-img img{transform:scale(1.08);}}

/* native wishlist/compare actions — position top-right pill */
.bh-pc .bh-pc-actions{position:absolute; top:8px; right:8px; z-index:3; display:flex; flex-direction:column; gap:4px;}
.bh-pc .bh-pc-actions .btn,.bh-pc .bh-pc-actions a{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.92); border:1px solid var(--bh-bdr); display:flex; align-items:center; justify-content:center; color:var(--bh-t3); font-size:13px; padding:0;}
.bh-pc .bh-pc-actions .btn:hover,.bh-pc .bh-pc-actions a:hover{color:#e63946; border-color:#e63946;}

/* native ribbon → treat as SALE badge, top-left */
.bh-pc .ribbon,.bh-pc .product-ribbon{position:absolute; top:8px; left:8px; z-index:2;}

.bh-pc .bh-pc-variations{padding:0 10px;}

.bh-pc .bh-pc-body{padding:9px 10px 11px; flex:1; display:flex; flex-direction:column;}
@media(min-width:768px){.bh-pc .bh-pc-body{padding:11px 12px 13px;}}
.bh-pc .bh-pc-brand{font-size:9px; font-weight:700; color:var(--bh-blue); text-transform:uppercase; letter-spacing:.8px; margin-bottom:2px;}
.bh-pc .bh-pc-name{font-size:12px; font-weight:700; line-height:1.3; color:var(--bh-dark); flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:5px;}
.bh-pc .bh-pc-name:hover{color:var(--bh-blue); text-decoration:none;}
@media(min-width:768px){.bh-pc .bh-pc-name{font-size:13px; margin-bottom:7px;}}
.bh-pc .bh-pc-stars{display:flex; align-items:center; gap:2px; margin-bottom:5px;}
.bh-pc .bh-pc-stars i{font-size:9px; color:#f59e0b;}
.bh-pc .bh-pc-stars em{font-style:normal; font-size:10px; color:var(--bh-t3); margin-left:4px;}

/* native price include → force our typography */
.bh-pc .bh-pc-price{margin-bottom:8px;}
.bh-pc .bh-pc-price .price,.bh-pc .bh-pc-price .product-price,.bh-pc .bh-pc-price .preis{font-family:'Outfit','Montserrat',sans-serif !important; font-size:16px !important; font-weight:900 !important; letter-spacing:-.5px; color:var(--bh-dark) !important;}
@media(min-width:768px){.bh-pc .bh-pc-price .price,.bh-pc .bh-pc-price .product-price,.bh-pc .bh-pc-price .preis{font-size:18px !important;}}
.bh-pc .bh-pc-price .old-price,.bh-pc .bh-pc-price del{font-size:10px !important; color:var(--bh-t3) !important; font-weight:400 !important;}
.bh-pc .bh-pc-price .price-note,.bh-pc .bh-pc-price small{font-size:9px; color:var(--bh-t3);}

.bh-pc .bh-pc-footer{display:flex; gap:5px; align-items:stretch; min-width:0; margin-top:auto;}
.bh-pc .bh-pc-qty{display:flex; align-items:center; border:1.5px solid var(--bh-bdr); border-radius:9px; overflow:hidden; height:38px; flex:1 1 auto; min-width:0; max-width:110px;}
.bh-pc .bh-pc-qty-btn{width:26px; min-width:26px; height:100%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--bh-blue); background:#f5f7fa; cursor:pointer; transition:background .15s; flex-shrink:0; user-select:none; border:none;}
.bh-pc .bh-pc-qty-btn:hover{background:rgba(50,91,118,.1);}
.bh-pc .bh-pc-qty-n{flex:1; text-align:center; font-size:13px; font-weight:700; color:var(--bh-dark); border:none; outline:none; background:transparent; width:100%; min-width:0; -moz-appearance:textfield;}
.bh-pc .bh-pc-qty-n::-webkit-outer-spin-button,.bh-pc .bh-pc-qty-n::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.bh-pc .bh-pc-atc{flex:0 0 40px; width:40px; height:38px; border:none; border-radius:9px; background:#1A1A1A; color:#fff !important; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:0; cursor:pointer; transition:background .22s,transform .22s; text-decoration:none;}
@media(min-width:768px){.bh-pc .bh-pc-atc{flex:1; width:auto; font-size:13px; gap:7px; padding:0 12px;}}
.bh-pc .bh-pc-atc-txt{display:none;}
@media(min-width:768px){.bh-pc .bh-pc-atc-txt{display:inline;}}
.bh-pc .bh-pc-atc:hover{background:var(--bh-blue2); color:#fff; text-decoration:none;}
.bh-pc .bh-pc-atc:active{transform:scale(.97);}
.bh-pc .bh-pc-atc.bh-done{background:#10b981;}
.bh-pc.bh-added{outline:2px solid #10b981; outline-offset:-2px;}
.bh-pc .bh-pc-atc-link{background:#0d1b2a;}
.bh-pc .bh-pc-atc-link:hover{background:#000;}
/* variant/non-buyable → full-width Ansehen, text always shown.
   Force white content + visible text/icon (robust against theme resets). */
.bh-pc .bh-pc-footer-single .bh-pc-atc-full,
.bh-pc a.bh-pc-atc-full{
  flex:1 1 100% !important; width:100% !important;
  gap:7px !important; padding:0 12px !important;
  color:#fff !important; font-size:13px !important; font-weight:700 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  text-indent:0 !important; line-height:1 !important; min-height:38px;
}
.bh-pc a.bh-pc-atc-full i,
.bh-pc a.bh-pc-atc-full span{
  display:inline !important; color:#fff !important; font-size:13px !important;
  opacity:1 !important; visibility:visible !important;
}
.bh-pc a.bh-pc-atc-full i{font-size:14px !important;}

/* meta line under the price: variant count (Sorten) or unit price (Grundpreis) */
.bh-pc .bh-pc-meta{font-size:11px;color:#8a97a3;font-weight:600;margin:-2px 0 8px;line-height:1.3;display:flex;align-items:center;gap:5px;}
.bh-pc .bh-pc-sorten{color:#1A1A1A;}
.bh-pc .bh-pc-sorten i{font-size:10px;color:#1A1A1A;}
.bh-pc .bh-pc-vpe{color:#8a97a3;font-weight:500;}

/* ── info strip (Moze style): Geschmack + Nikotinstärke lines under the image ── */
.bh-pc .bh-pc-info{background:#f2f4f6;border-top:1px solid #e8edf2;font-size:11px;line-height:1.35;}
.bh-pc .bh-pc-info-row{display:flex;gap:5px;padding:5px 12px;border-bottom:1px solid #e8edf2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bh-pc .bh-pc-info-row:last-child{border-bottom:none;}
.bh-pc .bh-pc-info-k{color:#8a97a3;font-weight:600;flex:0 0 auto;}
.bh-pc .bh-pc-info-v{color:#1A1A1A;font-weight:600;overflow:hidden;text-overflow:ellipsis;}
.bh-pc .bh-pc-img{position:relative;overflow:hidden;}

/* ── stock / delivery status (Sofort verfügbar / Knapper Lagerbestand) ── */
.bh-pc .bh-pc-stock{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;margin-top:8px;line-height:1.3;}
.bh-pc .bh-pc-stock-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:#9aacba;}
.bh-pc .bh-pc-stock-2{color:#15803d;}         /* green = available */
.bh-pc .bh-pc-stock-2 .bh-pc-stock-dot{background:#22c55e;}
.bh-pc .bh-pc-stock-1{color:#b45309;}         /* yellow = low stock */
.bh-pc .bh-pc-stock-1 .bh-pc-stock-dot{background:#f59e0b;}
.bh-pc .bh-pc-stock-0{color:#b91c1c;}         /* red = out */
.bh-pc .bh-pc-stock-0 .bh-pc-stock-dot{background:#ef4444;}

/* ========================================================================
   Homepage News section — contained white card matching other sections
   ======================================================================== */
.bh-news-wrapper{padding:10px 16px; margin:0 auto; box-sizing:border-box;}
@media(min-width:768px){.bh-news-wrapper{padding:14px 24px;}}
.bh-news-wrapper > .container{
  max-width:1320px; margin:0 auto;
  background:#fff; border-radius:16px;
  box-shadow:0 6px 24px rgba(13,27,42,.06);
  padding:22px 18px 24px;
}
@media(min-width:768px){.bh-news-wrapper > .container{padding:28px 28px 30px;}}
/* tighten the news cards a touch so 6 sit cleanly in the container */
.bh-news-wrapper .newsbox.blog-preview{padding:0 6px;}

/* ========================================================================
   Category listing page — description AFTER products (bh-listing-desc)
   ======================================================================== */
.bh-listing-desc{
  margin:28px 0 8px;
  padding:0;
}
.bh-listing-desc-inner{
  background:#fff;
  border:1px solid #e8edf2;
  border-radius:14px;
  padding:22px 22px 8px;
  color:#334155;
  font-size:14.5px;
  line-height:1.7;
}
@media(min-width:768px){.bh-listing-desc-inner{padding:30px 32px 12px;}}
.bh-listing-desc-inner h1,.bh-listing-desc-inner h2,.bh-listing-desc-inner h3{
  font-family:'Outfit','Montserrat',sans-serif;color:#0d1b2a;
  letter-spacing:-.3px;margin:0 0 12px;
}
.bh-listing-desc-inner h2{font-size:20px;}
.bh-listing-desc-inner h3{font-size:16px;}
.bh-listing-desc-inner a{color:#1A1A1A;text-decoration:underline;}
.bh-listing-desc-inner img{max-width:100%;height:auto;border-radius:8px;}
.bh-listing-desc-inner ul,.bh-listing-desc-inner ol{padding-left:20px;}

/* ── Listing product grid: consistent gaps + card sizing on the category page ── */
#product-list.product-list .product-wrapper{margin-bottom:14px;}
#product-list.product-list .bh-pc{height:100%;}
/* on mobile keep the 2-col grid tight */
@media(max-width:575px){
  #product-list .product-wrapper{padding-left:5px;padding-right:5px;}
}

/* ========================================================================
   Kill remaining native teal/primary link colour → dark #1A1A1A
   (left category sidebar links, breadcrumb, generic content links)
   ======================================================================== */
#categorybox .categories-recursive-link,
#categorybox .submenu-headline,
.sidebar .categories-recursive-link,
.categorybox a,
.nav-categories a,
aside .categories-recursive-link,
.left-sidebar a.categories-recursive-link{
  color:#1A1A1A !important;
}
#categorybox .categories-recursive-link:hover,
.categorybox a:hover,
.nav-categories a:hover{
  color:#333333 !important;
}
/* active category */
#categorybox .active > .categories-recursive-link,
.categorybox .active > a{
  color:#1A1A1A !important; font-weight:800;
}

/* ========================================================================
   Product DETAIL page — bh-design additions (flavour chips, unit price,
   spec table). Native gallery/variation/cart kept, only skinned.
   ======================================================================== */
.product-detail .product-info{font-family:'Outfit','Montserrat',sans-serif;}

/* flavour chips under the title */
.bh-dp-flav{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px;}
.bh-dp-flav-chip{font-size:12px;font-weight:700;color:#1A1A1A;background:#f0f3f7;
  border:1px solid #e2e8ee;border-radius:20px;padding:5px 12px;line-height:1.3;}

/* price wrap + explicit unit price */
.bh-dp-pricewrap{margin:6px 0 4px;}
.bh-dp-vpe{font-size:13px;color:#8a97a3;font-weight:500;margin-top:4px;}

/* spec table */
.bh-dp-specs{margin:22px 0 8px;border:1px solid #e8edf2;border-radius:14px;overflow:hidden;background:#fff;}
.bh-dp-specs-h{font-family:'Outfit','Montserrat',sans-serif;font-size:15px;font-weight:800;color:#1A1A1A;
  padding:14px 18px;background:#f7f9fb;border-bottom:1px solid #e8edf2;}
.bh-dp-specs-list{margin:0;padding:0;}
.bh-dp-spec-row{display:flex;gap:12px;padding:11px 18px;border-bottom:1px solid #f0f3f7;font-size:14px;}
.bh-dp-spec-row:last-child{border-bottom:none;}
.bh-dp-spec-row dt{flex:0 0 42%;max-width:42%;color:#6b7a88;font-weight:600;margin:0;}
.bh-dp-spec-row dd{flex:1;margin:0;color:#1A1A1A;font-weight:600;}
@media(max-width:575px){
  .bh-dp-spec-row{flex-direction:column;gap:2px;}
  .bh-dp-spec-row dt,.bh-dp-spec-row dd{flex:none;max-width:100%;}
}

/* make the native detail buy button match our dark design */
.product-detail .add-to-cart,
.product-detail .btn-primary.submit,
.product-detail button.submit{border-radius:10px;font-weight:700;}

/* ========================================================================
   Product DETAIL page — responsive polish + on-brand layout
   ======================================================================== */
/* overall page rhythm */
.product-detail{--bhd-blue:#1A1A1A;}
#product-offer.product-detail{margin-top:8px;}

/* CRITICAL FIX: blubber.css is missing the Bootstrap grid col rules entirely
   (no .col-lg-6 / .col-12 width rules), so both columns stacked full-width in
   the left half. Force the product-offer row to a 2-col flex grid. Uses
   !important to beat any base .col growth rule, and targets by the real classes. */
#product-offer.product-detail,
.product-detail#product-offer,
.row.product-detail{display:flex !important;flex-wrap:wrap !important;align-items:flex-start;}
#product-offer .product-gallery,
#product-offer .product-info,
.row.product-detail > .product-gallery,
.row.product-detail > .product-info{flex:0 0 50% !important;max-width:50% !important;width:50% !important;}
@media(max-width:991px){
  #product-offer .product-gallery,
  #product-offer .product-info,
  .row.product-detail > .product-gallery,
  .row.product-detail > .product-info{flex:0 0 100% !important;max-width:100% !important;width:100% !important;}
}

/* ---- gallery column ---- */
.product-detail .product-gallery{margin-bottom:20px;}
.product-detail .product-gallery .product-image,
.product-detail .product-gallery .main-image-wrapper{
  background:#fff;border:1px solid #eef2f6;border-radius:16px;overflow:hidden;}
.product-detail .product-gallery img{border-radius:12px;}
.product-detail .product-thumbnails-wrapper{margin-top:12px;}
.product-detail .product-thumbnails img{border:1px solid #eef2f6;border-radius:10px;}

/* ---- info column card feel ---- */
.product-detail .product-info{font-family:'Outfit','Montserrat',sans-serif;}
.product-detail .product-title,
.product-detail h1{font-family:'Outfit','Montserrat',sans-serif;font-weight:800;
  letter-spacing:-.4px;color:#0d1b2a;line-height:1.2;font-size:clamp(20px,4.5vw,30px);margin:0 0 6px;}
.product-detail .manufacturer-logo,
.product-detail .product-manufacturer{margin-bottom:8px;}

/* price — make it the visual anchor */
.product-detail .price .preis,
.product-detail .price .product-price,
.product-detail .price-wrapper .price{font-family:'Outfit','Montserrat',sans-serif !important;
  font-weight:900 !important;font-size:clamp(24px,6vw,32px) !important;color:#0d1b2a !important;letter-spacing:-1px;}
.product-detail .price small,.product-detail .price .price-note{color:#8a97a3;font-weight:500;}
.bh-dp-pricewrap{margin:10px 0;padding:14px 0;border-top:1px solid #eef2f6;border-bottom:1px solid #eef2f6;}

/* ---- variation selector as clean controls ---- */
.product-detail .variations .variation{margin-bottom:14px;}
.product-detail .variations label,
.product-detail .variation-name{font-size:13px;font-weight:700;color:#0d1b2a;margin-bottom:6px;}
.product-detail select.custom-select,
.product-detail .variations select{border:1.5px solid #e2e8ee;border-radius:10px;height:46px;font-weight:600;}
/* image/text swatches */
.product-detail .variation .variationValue,
.product-detail .type-swatches li{border-radius:10px !important;border:1.5px solid #e2e8ee !important;}
.product-detail .variation .variationValue.active,
.product-detail .type-swatches li.active{border-color:#1A1A1A !important;box-shadow:0 0 0 2px rgba(26,26,26,.15);}

/* ---- quantity + add to cart row: big, tidy, dark ---- */
.product-detail .product-buy-box,
.product-detail .add-to-cart-wrapper{margin-top:16px;}
.product-detail .quantity input,
.product-detail input[name="anzahl"]{height:50px;border-radius:10px;border:1.5px solid #e2e8ee;font-weight:700;text-align:center;}
.product-detail .add-to-cart,
.product-detail button.submit,
.product-detail .btn-primary.submit,
.product-detail .add-to-cart-btn{background:#1A1A1A !important;border-color:#1A1A1A !important;
  border-radius:12px !important;font-weight:800 !important;height:50px;font-size:15px;letter-spacing:.2px;
  transition:background .2s,transform .2s;}
.product-detail .add-to-cart:hover,
.product-detail button.submit:hover,
.product-detail .btn-primary.submit:hover{background:#333 !important;border-color:#333 !important;}
.product-detail .add-to-cart:active{transform:scale(.98);}

/* ---- stock/delivery pills ---- */
.product-detail .stock-information,
.product-detail .delivery-status{font-weight:600;font-size:13px;margin-top:10px;}
.product-detail .signal_image.status-2,.product-detail .status-2{color:#15803d !important;}
.product-detail .signal_image.status-1,.product-detail .status-1{color:#b45309 !important;}
.product-detail .signal_image.status-0,.product-detail .status-0{color:#b91c1c !important;}

/* ---- tabs (Beschreibung / Details / Bewertungen) ---- */
.product-detail-tabs .nav-tabs,.product-details-tabs .nav-tabs,#tabs .nav-tabs{border-bottom:2px solid #eef2f6;gap:4px;}
.product-detail-tabs .nav-link,.product-details-tabs .nav-link,#tabs .nav-link{font-family:'Outfit','Montserrat',sans-serif;
  font-weight:700;color:#6b7a88;border:none !important;padding:12px 18px;}
.product-detail-tabs .nav-link.active,#tabs .nav-link.active{color:#1A1A1A;border-bottom:3px solid #1A1A1A !important;background:transparent;}

/* ---- responsive: stack cleanly, sticky buy box on desktop only ---- */
@media(min-width:992px){
  .product-detail .product-info{padding-left:24px;}
}
@media(max-width:991px){
  .product-detail .product-info{padding:0 16px;}
  #product-offer.product-detail{margin-top:0;}
  .product-detail .product-gallery{margin-bottom:16px;}
}
@media(max-width:575px){
  .product-detail .add-to-cart,.product-detail button.submit{width:100%;}
  .bh-dp-flav-chip{font-size:11px;padding:4px 10px;}
  .product-detail .price .preis,.product-detail .price .product-price{font-size:26px !important;}
}

/* ---- detail LEFT column stack (flavour chips, meta, specs under the image) ---- */
.bh-dp-left{margin-top:16px;}
.bh-dp-left .bh-dp-flav{margin:0 0 14px;}
/* item meta (Artikelnummer / Kategorie / Hersteller) */
.bh-dp-meta{margin:0 0 16px;padding:0;}
.bh-dp-meta-row{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid #f0f3f7;font-size:13.5px;}
.bh-dp-meta-row:last-child{border-bottom:none;}
.bh-dp-meta-row dt{flex:0 0 38%;max-width:38%;color:#6b7a88;font-weight:600;margin:0;}
.bh-dp-meta-row dd{flex:1;margin:0;color:#1A1A1A;font-weight:700;}
.bh-dp-meta-row dd a{color:#1A1A1A;text-decoration:underline;}

/* ---- detail left-column blocks: keep them cleanly stacked under the image ----
   .bh-dp-left (flavour chips) and .bh-dp-details (meta + specs) live inside
   .product-gallery → the left column on desktop. Just make them block/full-width
   so they stack under the image. NO float/clear (that broke the column layout). */
.product-detail .bh-dp-left,
.product-detail .bh-dp-details{display:block;width:100%;}
.product-detail .bh-dp-details{margin-top:4px;}
/* mobile reorder (meta+specs AFTER buy button) is handled by JS in footer.tpl —
   it relocates .bh-dp-details into the info column below the cart on <992px. */

/* ========================================================================
   Detail page POLISH — matrix height, price block, Staffelpreis, gaps
   ======================================================================== */

/* 1) flavour list fully open (no inner scroll) — customer sees all variants at once */
#jtl-matrix-container .matrix-flavor-list{max-height:none !important;overflow:visible !important;-webkit-mask-image:none !important;mask-image:none !important;}

/* matrix container: give it our card look + tie it to the buy flow */
#jtl-matrix-container.jtl-matrix-wrapper{
  border:1px solid #e8edf2 !important;border-radius:14px !important;
  background:#fff !important;box-shadow:0 4px 18px rgba(13,27,42,.05) !important;
}
/* summary bar (total + Warenkorb) — make it feel like the primary action */
#jtl-matrix-container .matrix-summary-bar{
  border-top:1px solid #eef2f6 !important;padding-top:12px !important;
}

/* 2) native price block (.bh-dp-pricewrap holds the ab-price / Staffelpreis) —
   tighten it and pull it up so it sits right under the matrix, not floating */
.product-detail .bh-dp-pricewrap{margin:14px 0 6px !important;padding:14px 0 !important;}
.product-detail .price,
.product-detail .product-price{font-family:'Outfit','Montserrat',sans-serif !important;}

/* 3) Staffelpreis (bulk price) table → clean bh card */
.product-detail table.staffelpreise,
.product-detail .staffelpreise,
.product-detail .tier-prices table,
.product-detail table[class*="staffel"]{
  width:100%;border-collapse:separate;border-spacing:0;border:1px solid #e8edf2;
  border-radius:12px;overflow:hidden;font-size:13px;margin-top:8px;
}
.product-detail table.staffelpreise th,
.product-detail table.staffelpreise td,
.product-detail .tier-prices th,.product-detail .tier-prices td{
  padding:9px 14px;border-bottom:1px solid #f0f3f7;text-align:left;
}
.product-detail table.staffelpreise thead th,
.product-detail .tier-prices thead th{background:#f7f9fb;font-weight:800;color:#1A1A1A;font-size:11px;text-transform:uppercase;letter-spacing:.4px;}
.product-detail table.staffelpreise tr:last-child td{border-bottom:none;}
.product-detail table.staffelpreise tr:hover td{background:#fafcfe;}

/* 4) kill the big empty vertical gap: the tabs section should hug the buy area */
.product-detail-tabs,.product-details-tabs,#tabs,
.product-detail + .tabs,.tabs.product-detail-tabs{margin-top:20px !important;}
/* stretch columns to equal height so the left specs don't leave a tall void */
@media(min-width:992px){
  #product-offer.product-detail{align-items:stretch;}
  #product-offer.product-detail > .product-info{display:flex;flex-direction:column;}
}

/* ========================================================================
   FOOTER v2 — Moze-style LIGHT layout (overrides the old dark footer above)
   ======================================================================== */
.bh-footer{background:#f2f4f6 !important;color:#1A1A1A !important;border-top:1px solid #e4e8ec;
  padding:44px 0 24px;font-family:'Outfit','Montserrat',sans-serif}
.bh-footer .bh-wrap{max-width:1320px;margin:0 auto;padding:0 20px}
.bh-footer a{color:#1A1A1A;text-decoration:none}
.bh-footer a:hover{color:#333;text-decoration:underline}
.bh-foot-h{font-family:'Outfit','Montserrat',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.4px;color:#1A1A1A;margin:0 0 12px}
.bh-foot-lead{color:#5a6b78;font-size:14px;line-height:1.6;margin:0 0 16px;max-width:520px}

/* TOP: support + newsletter */
.bh-foot-top{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-bottom:36px}
@media(max-width:900px){.bh-foot-top{grid-template-columns:1fr;gap:32px}}
.bh-foot-wa{display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#fff !important;
  font-weight:800;font-size:13px;letter-spacing:.4px;text-transform:uppercase;padding:11px 20px;border-radius:8px;text-decoration:none !important}
.bh-foot-wa:hover{background:#1eb955;color:#fff !important}
.bh-foot-contact{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:16px 0 10px;font-size:14px;font-weight:600}
.bh-foot-contact .bh-foot-or{color:#9aacba;font-weight:500}
.bh-foot-contact i{color:#5a6b78;margin-right:5px}
.bh-foot-hours{color:#8a97a3;font-size:12.5px;line-height:1.6}

/* newsletter form (light) */
.bh-foot-nl .bh-nl-form{display:flex;flex-direction:column;gap:14px;max-width:560px}
.bh-footer .bh-foot-nl .bh-nl-form input{width:100%;border:none;border-bottom:1.5px solid #cfd8de;background:transparent;
  padding:10px 2px;font-size:14px;color:#1A1A1A !important;outline:none}
.bh-footer .bh-foot-nl .bh-nl-form input::placeholder{color:#8a97a3 !important;opacity:1}
.bh-footer .bh-foot-nl .bh-nl-form input:focus{border-bottom-color:#1A1A1A}
.bh-foot-nl .bh-nl-form button{align-self:flex-start;background:#1A1A1A;color:#fff;border:none;border-radius:8px;
  font-weight:700;font-size:13px;letter-spacing:.5px;text-transform:uppercase;padding:12px 26px;cursor:pointer;transition:background .2s}
.bh-foot-nl .bh-nl-form button:hover{background:#333}

.bh-foot-sep{border:none;border-top:1px solid #e0e5e9;margin:8px 0 32px}

/* MIDDLE: brand + link columns + map */
.bh-foot-mid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.4fr;gap:32px;align-items:start}
@media(max-width:991px){.bh-foot-mid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:575px){.bh-foot-mid{grid-template-columns:1fr;gap:20px}}
.bh-foot-brandcol .bh-foot-logo{width:150px;height:auto;margin-bottom:16px}
.bh-foot-socs{display:flex;gap:8px}
.bh-foot-soc{width:36px;height:36px;border-radius:8px;background:#1A1A1A;color:#fff !important;
  display:flex;align-items:center;justify-content:center;font-size:15px;text-decoration:none !important;transition:background .18s}
.bh-foot-soc:hover{background:#333;color:#fff !important}

/* CMS link columns (light) */
.bh-footer .bh-foot-col--cms{color:#1A1A1A}
/* headings — force DARK (old dark-footer set .box-normal-link .text-truncate to #fff!important) */
.bh-footer .bh-foot-col--cms .box-normal-link,
.bh-footer .bh-foot-col--cms .text-truncate,
.bh-footer .bh-foot-col--cms .box-normal-link .text-truncate,
.bh-footer .bh-foot-map .box-normal-link{color:#1A1A1A !important;font-family:'Outfit','Montserrat',sans-serif;font-weight:800;font-size:15px;margin-bottom:14px;display:block}
.bh-footer .bh-foot-col--cms .box{background:transparent !important;border:none !important;padding:0 !important;margin:0 !important}
.bh-footer .bh-foot-col--cms ul{list-style:none;padding:0;margin:0}
.bh-footer .bh-foot-col--cms li{margin:0 0 9px}
.bh-footer .bh-foot-col--cms .nav-link,.bh-footer .bh-foot-col--cms li a{color:#5a6b78 !important;font-size:14px;font-weight:500;padding:0 !important}
.bh-footer .bh-foot-col--cms li a:hover{color:#1A1A1A !important}

/* map column */
.bh-foot-map .box-normal-link{font-family:'Outfit','Montserrat',sans-serif;font-weight:800;font-size:15px;color:#1A1A1A;margin-bottom:14px;display:block}
.bh-foot-map-embed iframe{width:100%;border:0;border-radius:12px;aspect-ratio:16/10;display:block}
.bh-foot-map-embed > div{max-width:100% !important}

/* BOTTOM bar */
.bh-foot-bot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid #e0e5e9;margin-top:36px;padding-top:20px}
.bh-footer .bh-foot-copy{color:#8a97a3 !important;font-size:12.5px}
.bh-footer .bh-foot-copy a{color:#5a6b78 !important;text-decoration:underline}
.bh-footer .bh-foot-copy a:hover{color:#1A1A1A !important}
.bh-foot-pay{display:flex;gap:6px;flex-wrap:wrap}
.bh-pay-t{font-size:11px;font-weight:800;background:#fff;color:#1A1A1A;padding:5px 10px;border-radius:5px;
  border:1px solid #e0e5e9;display:inline-flex;align-items:center;gap:3px;line-height:1}
.bh-pay-visa{color:#1a1f71;font-style:italic;letter-spacing:1px}
.bh-pay-mc{color:#eb001b} .bh-pay-paypal{color:#003087} .bh-pay-klarna{background:#ffb3c7}
.bh-pay-gpay{color:#4285f4}

@media(max-width:767px){
  .bh-foot-bot{flex-direction:column;align-items:flex-start;gap:14px}
  /* mobile accordion for CMS link groups */
  .bh-footer .bh-foot-col--cms ul{max-height:0;overflow:hidden;transition:max-height .3s}
  .bh-footer .bh-foot-col--cms.bh-open ul{max-height:800px}
}

/* ========================================================================
   FOOTER v2 — MOBILE fix (clean accordions, no empty gaps, dark text)
   Appended last to win over all older dark-footer rules.
   ======================================================================== */
@media(max-width:767px){
  /* each CMS link column = a tidy accordion row */
  .bh-footer .bh-foot-mid{gap:0;}
  .bh-footer .bh-foot-col--cms{border-bottom:1px solid #e0e5e9;padding:0 !important;margin:0 !important;}
  /* heading row: dark, one chevron, tappable */
  .bh-footer .bh-foot-col--cms .box-normal-link,
  .bh-footer .bh-foot-col--cms .text-truncate{
    display:flex !important;align-items:center;justify-content:space-between;
    color:#1A1A1A !important;font-weight:800 !important;font-size:14px !important;
    letter-spacing:0 !important;text-transform:none !important;
    margin:0 !important;padding:16px 2px !important;border-bottom:none !important;
    cursor:pointer;pointer-events:auto !important;
  }
  /* single chevron on the RIGHT (kill any native icons + the map heading chevron) */
  .bh-footer .bh-foot-col--cms .box-normal-link .fa,
  .bh-footer .bh-foot-col--cms .box-normal-link i,
  .bh-footer .bh-foot-col--cms .box-normal-link [class*="chevron"],
  .bh-footer .bh-foot-col--cms .box-normal-link [class*="caret"]{display:none !important;}
  .bh-footer .bh-foot-col--cms .box-normal-link::after{
    content:"\f078" !important;font-family:"Font Awesome 5 Free" !important;font-weight:900;
    font-size:12px;color:#8a97a3;display:inline-block !important;margin-left:auto;transition:transform .25s;
  }
  .bh-footer .bh-foot-col--cms.bh-open .box-normal-link::after{transform:rotate(180deg);}
  /* collapse the links; expand on .bh-open — NO leftover empty space */
  .bh-footer .bh-foot-col--cms .collapse,
  .bh-footer .bh-foot-col--cms .collapse ul.nav,
  .bh-footer .bh-foot-col--cms ul{
    max-height:0 !important;overflow:hidden !important;padding:0 !important;margin:0 !important;
    transition:max-height .3s ease;
  }
  .bh-footer .bh-foot-col--cms.bh-open .collapse,
  .bh-footer .bh-foot-col--cms.bh-open .collapse ul.nav,
  .bh-footer .bh-foot-col--cms.bh-open ul{
    max-height:600px !important;overflow:visible !important;padding:0 0 14px !important;
  }
  .bh-footer .bh-foot-col--cms li a,
  .bh-footer .bh-foot-col--cms .nav-link{color:#5a6b78 !important;font-size:14px !important;padding:7px 2px !important;}

  /* the MAP column: no accordion, always visible, heading dark */
  .bh-footer .bh-foot-map{border-bottom:none;padding-top:8px !important;}
  .bh-footer .bh-foot-map .box-normal-link{pointer-events:none;cursor:default;}
  .bh-footer .bh-foot-map .box-normal-link::after{display:none !important;}
  .bh-footer .bh-foot-map .collapse,
  .bh-footer .bh-foot-map ul{max-height:none !important;overflow:visible !important;}

  /* brand column spacing */
  .bh-footer .bh-foot-brandcol{padding:8px 0 16px;}
  /* remove the big empty gaps from old rules */
  .bh-footer .bh-foot-col--cms .box,
  .bh-footer .bh-foot-col--cms .nav-panel,
  .bh-footer .bh-foot-col--cms .box-nav-item{padding:0 !important;margin:0 !important;background:transparent !important;border:none !important;}
}

/* remove leftover empty elements that create gaps in the mobile footer accordions */
@media(max-width:767px){
  /* the stray filter-headline div takes vertical space — hide it */
  .bh-footer .bh-foot-col--cms .productlist-filter-headline{display:none !important;height:0 !important;margin:0 !important;padding:0 !important;}
  /* collapse content: no extra top/bottom padding beyond the links themselves */
  .bh-footer .bh-foot-col--cms.bh-open .collapse,
  .bh-footer .bh-foot-col--cms.bh-open .collapse .nav-panel,
  .bh-footer .bh-foot-col--cms.bh-open ul.nav{padding:0 0 12px !important;margin:0 !important;}
  .bh-footer .bh-foot-col--cms .nav-panel,
  .bh-footer .bh-foot-col--cms .box-nav-item{padding:0 !important;margin:0 !important;}
  /* kill any hr/spacer inside the boxes */
  .bh-footer .bh-foot-col--cms hr,
  .bh-footer .bh-foot-col--cms .box-normal-hr{display:none !important;}
  /* the closed column should be exactly the heading height — no trailing space */
  .bh-footer .bh-foot-col--cms:not(.bh-open) .collapse{max-height:0 !important;padding:0 !important;margin:0 !important;}
}

/* ========================================================================
   MEGA MENU (desktop >=992px) — matches the approved preview.
   Two-pane for nested menus (rail + swapping panel), clean columns for flat.
   Black/grey only. Mobile (.d-lg-none path) untouched.
   ======================================================================== */
@media(min-width:992px){
  /* panel shell */
  #mainNavigation .navbar-nav > .nav-item.dropdown-full > .dropdown-menu.bh-mega{
    border:none !important;border-top:3px solid #1A1A1A !important;
    box-shadow:0 26px 64px rgba(0,0,0,.12) !important;border-radius:0 0 14px 14px !important;
    padding:0 !important;margin-top:0 !important;background:#fff !important;overflow:hidden !important;
    opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  #mainNavigation .navbar-nav > .nav-item.dropdown-full > .dropdown-menu.bh-mega.show,
  #mainNavigation .navbar-nav > .nav-item.dropdown-full:hover > .dropdown-menu.bh-mega{
    opacity:1 !important;transform:translateY(0) !important;pointer-events:auto;
  }
  #mainNavigation .dropdown-menu.bh-mega .dropdown-body{padding:0 !important;}
  #mainNavigation .bh-mega-inner{max-width:1320px;margin:0 auto;}

  /* ---------- TWO-PANE ---------- */
  #mainNavigation .bh-mega-twopane .bh-mega-inner{display:flex !important;align-items:stretch;min-height:330px;}

  /* left rail */
  #mainNavigation .bh-mega-rail{
    flex:0 0 288px;width:288px;background:#f7f8f9;border-right:1px solid #ececec;
    padding:14px 0;display:flex;flex-direction:column;
  }
  #mainNavigation .bh-mega-trigger{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 24px;font-family:'Outfit','Montserrat',sans-serif;font-size:14px;font-weight:600;
    color:#4a4a4a !important;text-decoration:none !important;text-transform:none;
    border-left:3px solid transparent;transition:background .15s,color .15s,border-color .15s;cursor:pointer;
  }
  #mainNavigation .bh-mega-trigger i{font-size:10px;color:#c4c4c4;transition:color .15s,transform .15s;}
  #mainNavigation .bh-mega-trigger:hover,
  #mainNavigation .bh-mega-trigger.active{
    background:#fff;color:#000 !important;font-weight:700;border-left-color:#1A1A1A;
  }
  #mainNavigation .bh-mega-trigger.active i,
  #mainNavigation .bh-mega-trigger:hover i{color:#1A1A1A;transform:translateX(2px);}

  /* right panels */
  #mainNavigation .bh-mega-panels{flex:1 1 auto;position:relative;padding:26px 32px;min-width:0;}
  #mainNavigation .bh-mega-panel{display:none;}
  #mainNavigation .bh-mega-panel.active{display:block;animation:bhMegaFade .25s ease both;}
  @keyframes bhMegaFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  #mainNavigation .bh-mega-panel-head{
    display:block;font-family:'Outfit','Montserrat',sans-serif;font-size:15px;font-weight:800;
    color:#111 !important;text-decoration:none !important;margin:0 0 14px;padding:0 0 10px;
    border-bottom:1px solid #eee;
  }
  #mainNavigation .bh-mega-panel-head:hover{color:#000 !important;}
  #mainNavigation .bh-mega-panel-list{column-count:3;column-gap:30px;}
  @media(max-width:1180px){#mainNavigation .bh-mega-panel-list{column-count:2;}}

  /* ---------- COLUMNS (flat menu) ---------- */
  #mainNavigation .bh-mega-columns .bh-mega-inner{padding:28px 34px;}
  #mainNavigation .bh-mega-cols{column-count:5;column-gap:28px;}
  @media(max-width:1240px){#mainNavigation .bh-mega-cols{column-count:4;}}

  /* leaf links (both layouts) */
  #mainNavigation .bh-mega-leaf{
    display:block;break-inside:avoid;font-family:'Open Sans',sans-serif;font-size:13px;font-weight:500;
    color:#4a4a4a !important;text-decoration:none !important;padding:5px 10px;border-radius:6px;line-height:1.4;
    transition:color .15s,background .15s,padding-left .15s;
  }
  #mainNavigation .bh-mega-leaf:hover{color:#000 !important;background:#f2f2f2;padding-left:14px;font-weight:600;}

  /* hide the theme's caret on our nav links inside the mega */
  #mainNavigation .navbar-nav > .nav-item.dropdown-full > .nav-link.dropdown-toggle::after{display:none !important;}
}

/* mega leaf-category CTA card (fills the right panel when a category has no sub-items) */
@media(min-width:992px){
  #mainNavigation .bh-mega-cta{
    display:flex;flex-direction:column;justify-content:center;gap:10px;
    min-height:270px;height:100%;padding:40px 44px;border-radius:14px;text-decoration:none !important;
    background:linear-gradient(135deg,#f7f8f9,#eef0f2);border:1px solid #eaecee;
    transition:box-shadow .25s ease, transform .25s ease;width:100%;
  }
  /* the panel itself becomes a flex container so the card fills the whole right area */
  #mainNavigation .bh-mega-panel{height:100%;}
  #mainNavigation .bh-mega-panels{display:flex;}
  #mainNavigation .bh-mega-panel.active{display:flex;flex-direction:column;width:100%;}
  #mainNavigation .bh-mega-cta:hover{box-shadow:0 16px 40px rgba(0,0,0,.1);transform:translateY(-2px);}
  #mainNavigation .bh-mega-cta-label{
    font-family:'Outfit','Montserrat',sans-serif;font-size:26px;font-weight:800;color:#111 !important;line-height:1.15;
  }
  #mainNavigation .bh-mega-cta-go{
    display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#1A1A1A !important;
    transition:gap .2s ease;
  }
  #mainNavigation .bh-mega-cta:hover .bh-mega-cta-go{gap:13px;}
  #mainNavigation .bh-mega-cta-go i{font-size:12px;}
}

/* ===== Wawi-Inhalte (Kategorie-/Hersteller-/Merkmal-/Artikelbeschreibung) =====
   Standardregel: HTML aus der Wawi darf die Seite auf Mobil nie breiter machen.
   Wawi bleibt unveraendert — Tabellen scrollen in sich selbst, Medien skalieren. */
.bh-listing-desc-inner,
.product-detail .desc{overflow-wrap:anywhere;max-width:100%;}
.bh-listing-desc-inner table,
.product-detail .desc table{
  display:block;width:auto !important;max-width:100% !important;height:auto !important;
  overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse;margin:0 0 1rem;
}
.bh-listing-desc-inner table th,.bh-listing-desc-inner table td,
.product-detail .desc table th,.product-detail .desc table td{white-space:normal;vertical-align:top;}
.bh-listing-desc-inner img,.bh-listing-desc-inner video,.bh-listing-desc-inner iframe,
.product-detail .desc img,.product-detail .desc video,.product-detail .desc iframe{max-width:100% !important;height:auto;}
.bh-listing-desc-inner iframe,.product-detail .desc iframe{aspect-ratio:16/9;width:100%;}
.bh-listing-desc-inner pre,.product-detail .desc pre{white-space:pre-wrap;}

/* ===== Bildbox-Fix: NOVA setzt .square-image .inner auf top:0/left:0 — fehlte in blubber.css,
   dadurch rutschte das Produktbild unter ein leeres Quadrat (grosse weisse Luecke, v.a. mobil). ===== */
.square-image .inner{top:0;left:0;}

/* ===== Produktdetails als Tab (desktop) / Akkordeon (mobil) ===== */
.bh-dp-tabspecs{max-width:820px;}
.bh-dp-tabspecs .bh-dp-specs{margin-top:8px;}
.bh-dp-tabspecs .bh-dp-specs-h{display:none;}
.bh-dp-tabspecs .bh-dp-specs{margin:0;}
.bh-dp-spec-row dd a{color:#1A1A1A;text-decoration:underline;text-underline-offset:2px;}
.bh-dp-spec-row dd a:hover{color:#000;}

/* ===== Listing-Karte kompakt: Name waechst nicht mehr, Preisblock ohne NOVA-Mindesthoehe (72px + 24px) ===== */
.bh-pc .bh-pc-name{flex:0 0 auto;}
.bh-pc .bh-pc-price .price_wrapper{min-height:0 !important;margin-bottom:0 !important;}
.bh-pc .bh-pc-price{margin:4px 0 8px;}

/* ===== Produktseite: Cross-Selling ("Kunden kauften dazu" / "Aehnliche Artikel") im Container,
   gleiche Breite wie der Produktinhalt (928px ab 992, 1218px ab 1300). Mobil unveraendert. ===== */
@media (min-width:992px){ .recommendations{max-width:928px;margin-left:auto;margin-right:auto;} }
@media (min-width:1300px){ .recommendations{max-width:1218px;} }

/* ===== Warenkorb-Drawer (statt Popup / Inline-Box nach "In den Warenkorb") ===== */
html.bh-cd-lock,html.bh-cd-lock body{overflow:hidden;}
.bh-cd-overlay{position:fixed;inset:0;background:rgba(13,20,28,.45);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:2090;}
.bh-cd-overlay.open{opacity:1;visibility:visible;}
.bh-cd{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;background:#fff;z-index:2100;
  display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(13,27,42,.18);
  transform:translateX(100%);transition:transform .3s ease;}
.bh-cd.open{transform:translateX(0);}
.bh-cd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid #eef1f4;}
.bh-cd-title{font-weight:800;font-size:15px;color:#1A1A1A;display:flex;align-items:center;gap:8px;}
.bh-cd-title .fa-check-circle{color:#22c55e;}
.bh-cd-close{width:38px;height:38px;border:none;background:transparent;border-radius:50%;font-size:18px;color:#1A1A1A;cursor:pointer;}
.bh-cd-close:hover{background:#f3f5f7;}
.bh-cd-body{flex:1 1 auto;overflow-y:auto;padding:6px 18px 12px;-webkit-overflow-scrolling:touch;}
.bh-cd-loading{display:flex;justify-content:center;padding:40px 0;font-size:22px;color:#9aa5b1;}
.bh-cd-empty{padding:30px 0;text-align:center;color:#6b7a88;}
/* JTL mini-cart content inside the drawer */
.bh-cd .table-responsive{max-height:none !important;overflow:visible;}
.bh-cd .dropdown-cart-items{width:100%;margin:0;font-size:13.5px;}
.bh-cd .dropdown-cart-items td{padding:12px 0;border-top:1px solid #f0f3f7;vertical-align:middle;}
.bh-cd .dropdown-cart-items tr:first-child td{border-top:none;}
.bh-cd .dropdown-cart-items img{max-width:56px;height:auto;border-radius:8px;}
.bh-cd .dropdown-cart-items a{color:#1A1A1A;font-weight:600;text-decoration:none;}
.bh-cd .dropdown-body{border-top:1px solid #eef1f4;margin-top:6px;padding-top:12px;}
.bh-cd .dropdown-body ul{margin:0 0 14px;}
.bh-cd .dropdown-body li{display:block;padding:3px 0;font-size:13px;color:#4b5866;}
.bh-cd .dropdown-body li:has(.cart-dropdown-total-item-price){display:flex;justify-content:space-between;font-size:13.5px;}
.bh-cd .dropdown-body li.font-weight-bold-util{color:#1A1A1A;font-size:15px;}
.bh-cd .cart-dropdown-buttons{display:flex;flex-direction:column;gap:8px;margin:0;}
.bh-cd .cart-dropdown-buttons > [class*="col"]{flex:0 0 100%;max-width:100%;padding:0;}
.bh-cd .cart-dropdown-buttons .btn{height:46px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-weight:700;font-size:14px;}
.bh-cd .cart-dropdown-buttons .btn-primary,.bh-cd .cart-dropdown-buttons .btn-primary:hover,.bh-cd .cart-dropdown-buttons .btn-primary:focus{background:#fff !important;border:1.5px solid #1A1A1A !important;color:#1A1A1A !important;box-shadow:none !important;}
.bh-cd .cart-dropdown-buttons .cart-dropdown-next{background:#1A1A1A !important;border:1.5px solid #1A1A1A;color:#fff !important;}
.bh-cd-foot{padding:12px 18px 18px;border-top:1px solid #eef1f4;}
.bh-cd-continue{width:100%;height:44px;border:none;background:#f3f5f7;border-radius:10px;font-weight:700;color:#1A1A1A;cursor:pointer;}
.bh-cd-continue:hover{background:#e9edf1;}
.bh-cd .dropdown-body{padding-left:0 !important;padding-right:0 !important;}
.bh-cd .cart-dropdown-buttons .btn{box-shadow:none !important;}

/* ===== Produktseite mobil: kompaktere Abstaende + Geschmacks-Chips als Wisch-Karussell ===== */
@media (max-width:991px){
  /* unter dem Bild */
  .product-detail #image_wrapper.gallery-with-action{margin-bottom:8px;}
  .product-detail .product-images .slick-dots{margin-top:10px;}
  .product-detail .bh-dp-left{margin-top:6px;}
  .product-detail .product-gallery{margin-bottom:6px;}
  /* nach Lieferstatus bis "Beschreibung" */
  .product-detail .stock-information{margin-top:6px !important;padding-top:10px !important;padding-bottom:10px !important;}
  .product-detail .product-offer{margin-bottom:8px !important;}
  .product-detail .product-offer > .row{margin-bottom:6px !important;}
  .product-detail .product-offer > .row > .bh-dp-pricewrap{margin-left:16px !important;margin-right:16px !important;width:calc(100% - 32px);}
  .product-detail #add-to-cart.product-buy{margin-top:8px !important;}
  #tabAccordion{margin-bottom:24px;}
  /* Cross-Selling Sektionen */
  .recommendations .hr-sect{margin-top:4px;padding-top:6px;padding-bottom:6px;margin-bottom:14px;}
  .recommendations > .slick-slider-other{margin-bottom:16px;}
}
@media (max-width:767px){
  .bh-dp-left .bh-dp-flav{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:2px;margin-bottom:10px;}
  .bh-dp-left .bh-dp-flav::-webkit-scrollbar{display:none;}
  .bh-dp-left .bh-dp-flav .bh-dp-flav-chip{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;}
}

/* Konfigurator-Hilfsbutton (Enter-Submit) nimmt sonst 22px Platz ein — unsichtbar, aber funktionsfaehig */
.btn-hidden-default{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;border:0 !important;}
@media (max-width:991px){
  /* Produktseite mobil: weniger Luft ueber und unter dem Bild */
  #content-wrapper:has(#product-offer){padding-top:8px !important;}
  #content-wrapper:has(#product-offer) .breadcrumb-wrapper{margin-bottom:10px !important;}
  .product-detail .product-images{margin-bottom:6px !important;}
  /* Preisblock buendig mit dem uebrigen Text */
  .product-detail .bh-dp-pricewrap > .col{padding-left:0 !important;padding-right:0 !important;}
}
/* mobil: Produktname ueber dem Bild (per JS verschoben, .bh-head-top) */
.bh-head-top{margin:0 0 10px;}
.bh-head-top h1,.bh-head-top .h1,.bh-head-top .product-title{font-size:20px !important;line-height:1.25 !important;margin:0 !important;font-weight:700;}

/* ===== Produktseite: Slider-Karten (Cross-Selling) = Listing-Karten (bh-pc) ===== */
.recommendations .slick-track{display:flex !important;}
.recommendations .slick-slide.bh-slide-card{height:auto !important;display:flex !important;padding:0 8px;text-align:left;}
.recommendations .bh-slide-card > .bh-pc{width:100%;}
.bh-slide-card .bh-pc-qty{display:none !important;}
.bh-slide-card .bh-pc-footer .bh-pc-atc,.bh-slide-card .bh-pc-footer .btn-container,.bh-slide-card .bh-pc-footer > *{flex:1 1 100% !important;max-width:100% !important;}

/* ===== Variantenliste (Plugin jtl_matrix_pricing) — Shop-Schrift, klarer Titel, Spalten buendig, mobil+desktop =====
   Nur per Theme-CSS ueberschrieben (Plugin-Dateien unveraendert). */
#jtl-matrix-container.compact-matrix,#jtl-matrix-container.compact-matrix *:not(i){font-family:'Outfit','Montserrat',sans-serif !important;}
html body #jtl-matrix-container .matrix-step-label{font-size:13px !important;font-weight:800 !important;letter-spacing:.6px !important;color:#1A1A1A !important;padding:14px 14px 0 !important;margin:0 0 4px !important;}
#jtl-matrix-container .matrix-list-header{padding:8px 14px !important;gap:12px !important;font-size:11px !important;letter-spacing:.5px !important;color:#6b7a88 !important;}
#jtl-matrix-container .matrix-flavor-row{padding-left:14px !important;padding-right:14px !important;gap:12px !important;}
#jtl-matrix-container .matrix-stepper{width:120px !important;flex:0 0 120px !important;}
#jtl-matrix-container .s-btn{width:34px !important;flex:0 0 34px !important;}
#jtl-matrix-container .s-inp{width:auto !important;flex:1 1 auto !important;min-width:0 !important;}
#jtl-matrix-container .h-col-qty{min-width:0 !important;flex:0 0 120px !important;width:120px !important;padding:0 !important;text-align:center !important;}
#jtl-matrix-container .f-info{min-width:0 !important;flex:1 1 auto !important;}
#jtl-matrix-container .f-name,#jtl-matrix-container .f-name a{font-size:14.5px !important;font-weight:700 !important;color:#1A1A1A !important;line-height:1.25 !important;white-space:normal !important;overflow-wrap:anywhere;text-decoration:none !important;}
#jtl-matrix-container .variant-price{font-size:12.5px !important;font-weight:600 !important;color:#4b5866 !important;}
@media (max-width:575px){
  #jtl-matrix-container .matrix-list-header,#jtl-matrix-container .matrix-flavor-row{padding-left:12px !important;padding-right:12px !important;gap:10px !important;}
  html body #jtl-matrix-container .matrix-step-label{padding:12px 12px 0 !important;}
  #jtl-matrix-container .f-name,#jtl-matrix-container .f-name a{font-size:14px !important;}
  #jtl-matrix-container .matrix-stepper,#jtl-matrix-container .h-col-qty{flex-basis:112px !important;width:112px !important;}
}

/* ===== Vorbestellung-Hinweis (NOVA .alert-warning.coming_soon) im neuen Design ===== */
.product-detail .alert.coming_soon{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;text-align:left !important;
  background:#f4f7fa !important;border:1px solid #e3eaf1 !important;border-left:4px solid #1A1A1A !important;
  border-radius:12px !important;color:#1A1A1A !important;font-size:14px;font-weight:600;padding:12px 16px !important;margin:12px 0 !important;
}
.product-detail .alert.coming_soon::before{content:"\f017";font-family:"Font Awesome 5 Free";font-weight:900;font-size:15px;margin-right:4px;}
.product-detail .alert.coming_soon strong{font-weight:800;color:#1A1A1A;}

/* ===== Produkt-Tabs (desktop): schlichte Text-Tabs, aktiver Tab schwarz mit Unterstrich ===== */
.tab-navigation .nav-tabs{border-bottom:1px solid #e8edf2 !important;gap:30px;}
.tab-navigation .nav-tabs .nav-item{margin:0 !important;}
.tab-navigation .nav-tabs .nav-link{
  border:none !important;background:transparent !important;border-radius:0 !important;box-shadow:none !important;
  padding:12px 2px !important;margin-bottom:-1px;font-size:15px !important;font-weight:600 !important;color:#7a8794 !important;
}
.tab-navigation .nav-tabs .nav-link:hover{color:#1A1A1A !important;}
.tab-navigation .nav-tabs .nav-link.active{color:#1A1A1A !important;font-weight:800 !important;box-shadow:inset 0 -3px 0 #1A1A1A !important;}
.tab-navigation .nav-tabs .nav-link::after{display:none !important;}

/* ===== Warenkorb: Selbstabholer-Hinweis (kompakt) ===== */
.bh-pickup-notice{display:flex;align-items:flex-start;gap:12px;background:#f4f7fa;border:1px solid #e3eaf1;border-left:4px solid #1A1A1A;
  border-radius:12px;padding:12px 16px;margin:0 0 18px;color:#1A1A1A;}
.bh-pickup-icon{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:#1A1A1A;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;}
.bh-pickup-text{display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.4;}
.bh-pickup-text strong{font-size:14.5px;font-weight:800;}
.bh-pickup-old{color:#7a8794;font-size:12.5px;}

/* ===== Produktseite: Mengenwahl (NOVA .form-counter.choose_quantity) — ein sauberer Rahmen ===== */
.product-detail .form-counter.choose_quantity{height:46px !important;border:1.5px solid #d9e1e8 !important;border-radius:10px !important;background:#fff !important;
  overflow:hidden;flex-wrap:nowrap !important;align-items:stretch !important;box-shadow:none !important;}
.product-detail .form-counter.choose_quantity .input-group-prepend,
.product-detail .form-counter.choose_quantity .input-group-append{height:100% !important;margin:0 !important;display:flex !important;align-items:stretch !important;}
.product-detail .form-counter.choose_quantity .btn{width:44px !important;height:100% !important;border:none !important;border-radius:0 !important;
  background:transparent !important;color:#1A1A1A !important;box-shadow:none !important;padding:0 !important;}
.product-detail .form-counter.choose_quantity .btn:hover{background:#f3f5f7 !important;}
.product-detail .form-counter.choose_quantity .quantity{height:100% !important;border:none !important;border-radius:0 !important;background:transparent !important;
  box-shadow:none !important;text-align:center !important;font-weight:800 !important;font-size:16px !important;color:#1A1A1A !important;padding:0 2px !important;min-width:0 !important;}
.product-detail .form-counter.choose_quantity .unit{height:100% !important;border:none !important;background:transparent !important;box-shadow:none !important;
  color:#7a8794 !important;font-size:13px !important;padding:0 4px 0 0 !important;display:flex !important;align-items:center !important;}
.product-detail #add-to-cart button[name="inWarenkorb"]{height:46px !important;border-radius:10px !important;}

/* ===== Startseite: uebernommene Live-Elemente im neuen Design (gleiche Breite 1320px wie die BH-Elemente) ===== */
.bh-home-addr,.bh-home-seo,.bh-home-faq,.bh-home-banner{
  width:calc(100% - 32px) !important;max-width:1320px !important;margin-left:auto !important;margin-right:auto !important;
  padding-left:0 !important;padding-right:0 !important;min-height:0 !important;}
/* Adress-Hinweis */
.bh-home-addr{margin-top:16px !important;margin-bottom:24px !important;}
.bh-home-addr .move-notice-ticker{border-radius:12px !important;margin:0 !important;}
/* Konfigurator-/PIXL-Banner (Desktop + Mobil) */
.bh-home-banner{margin-bottom:24px !important;border-radius:16px;overflow:hidden;}
.bh-home-banner img{display:block;width:100% !important;height:auto;border-radius:16px;border:none !important;padding:0 !important;box-shadow:none !important;background:none !important;}
/* SEO-Text als Karte */
.bh-home-seo{margin-top:40px !important;margin-bottom:24px !important;}
.bh-home-seo > div > div{background:#fff;border:1px solid #e8edf2;border-radius:16px;padding:40px 48px;}
.bh-home-seo h2:empty,.bh-home-seo p:empty{display:none !important;}
.bh-home-seo h1{font-size:28px !important;font-weight:800 !important;line-height:1.25 !important;text-align:left !important;color:#1A1A1A !important;margin:0 0 10px !important;}
.bh-home-seo .lead{text-align:left !important;font-size:16px !important;color:#4b5866 !important;margin:0 0 20px !important;}
.bh-home-seo .row{justify-content:flex-start !important;text-align:left !important;margin:0 !important;}
.bh-home-seo .row > [class*="col-"]{flex:0 0 100% !important;max-width:100% !important;padding:0 !important;}
.bh-home-seo p,.bh-home-seo li{font-size:15px;line-height:1.7;color:#4b5866;text-align:left !important;}
.bh-home-seo h3,.bh-home-seo .h4{font-size:18px !important;font-weight:800 !important;color:#1A1A1A !important;margin:26px 0 10px !important;text-align:left !important;}
.bh-home-seo ul.list-unstyled{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;padding:0;margin:0 0 8px !important;}
.bh-home-seo ul.list-unstyled li{background:#f6f8fa;border-radius:10px;padding:10px 14px;}
.bh-home-seo a{color:#1A1A1A;font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.bh-home-seo .text-center{display:inline-block;text-align:left !important;margin:26px 10px 0 0 !important;}
.bh-home-seo .text-center a{text-decoration:none;}
/* FAQ als Karte */
.bh-home-faq{margin-top:24px !important;margin-bottom:48px !important;border-radius:0 !important;}
.bh-home-faq .row.p-3{margin:0 !important;border:1px solid #e8edf2 !important;border-radius:16px !important;padding:40px 32px !important;background:#fff;}
.bh-home-faq [data-area-id="col-0"] > div:first-child p{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#7a8794;margin:0 0 6px;}
.bh-home-faq h3{font-size:28px !important;font-weight:800 !important;color:#1A1A1A !important;margin:0 0 14px !important;}
.bh-home-faq [data-area-id="col-0"] p{color:#4b5866;font-size:15px;line-height:1.7;}
.bh-home-faq [data-area-id="col-0"] span[style*="18pt"]{font-size:18px !important;font-weight:700;color:#1A1A1A;}
.bh-home-faq a[href^="tel:"]{color:#1A1A1A;text-decoration:none;}
.bh-home-faq a[href^="tel:"] span{font-size:26px !important;}
.bh-home-faq .opc-Accordion .card{border:1px solid #e8edf2 !important;border-radius:12px !important;background:#fff !important;margin:0 0 10px !important;overflow:hidden;box-shadow:none !important;}
.bh-home-faq .opc-Accordion .card-header{background:#fff !important;border:none !important;padding:0 !important;}
.bh-home-faq .opc-Accordion .card-header h2{margin:0 !important;}
.bh-home-faq .opc-Accordion-head{width:100%;display:flex !important;justify-content:space-between;align-items:center;gap:12px;text-align:left;white-space:normal;
  padding:16px 20px !important;font-size:15px !important;font-weight:700 !important;color:#1A1A1A !important;text-decoration:none !important;background:#fff !important;box-shadow:none !important;border:none !important;}
.bh-home-faq .opc-Accordion-head::after{content:"\f078";font-family:"Font Awesome 5 Free";font-weight:900;font-size:12px;flex:0 0 auto;transition:transform .2s;border:none !important;margin:0 !important;}
.bh-home-faq .opc-Accordion-head[aria-expanded="true"]::after{transform:rotate(180deg);}
.bh-home-faq .opc-Accordion .card-body{padding:0 20px 16px !important;color:#4b5866;font-size:14.5px;line-height:1.6;background:#fff !important;}
@media (max-width:767px){
  .bh-home-banner{margin-bottom:16px !important;}
  .bh-home-addr{margin-bottom:16px !important;}
  .bh-home-seo > div > div{padding:24px 18px;}
  .bh-home-seo h1{font-size:22px !important;}
  .bh-home-seo ul.list-unstyled{grid-template-columns:1fr;}
  .bh-home-faq .row.p-3{padding:24px 16px !important;}
  .bh-home-faq h3{font-size:22px !important;}
  .bh-home-faq [data-area-id="col-1"]{margin-top:16px;}
}
/* Startseite Fixes: SEO-Buttons lesbar, FAQ-Pfeil rechts */
.bh-home-seo a.btn{text-decoration:none !important;border-radius:10px !important;font-weight:700 !important;}
.bh-home-seo a.btn-primary{background:#1A1A1A !important;border-color:#1A1A1A !important;color:#fff !important;}
.bh-home-seo a.btn-primary:hover{background:#333 !important;color:#fff !important;}
.bh-home-seo a.btn-outline-secondary{background:#fff !important;border:1.5px solid #1A1A1A !important;color:#1A1A1A !important;}
.bh-home-faq .opc-Accordion .card-header h2,.bh-home-faq .opc-Accordion-head{width:100% !important;}
.bh-home-faq .opc-Accordion-head::after{margin-left:auto !important;}

/* ===== WhatsApp-Sticky-Button (wie NOVAChild) ===== */
.whatsapp-sticky-button{position:fixed;bottom:84px;right:20px;z-index:1000;display:inline-block;transition:transform .3s ease,box-shadow .3s ease;
  border-radius:50%;box-shadow:0 4px 12px rgba(32,168,62,.4);background:transparent;padding:0;line-height:0;}
.whatsapp-sticky-button:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(32,168,62,.6);}
.whatsapp-sticky-button svg{display:block;width:60px;height:60px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));}
@media (max-width:767px){.whatsapp-sticky-button{bottom:76px;right:14px;}.whatsapp-sticky-button svg{width:52px;height:52px;}}

/* ===== iPhone: kein Auto-Zoom beim Antippen von Eingabefeldern (Safari zoomt bei Schrift < 16px) ===== */
@media (max-width:991px){
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),select,textarea,
  .select2-container .select2-selection,.select2-search__field{font-size:16px !important;}
}

/* ===== Startseite: Produkt-Grids ===== */
/* Big Puff: 5 Produkte in einer Reihe (Desktop), mobil 4 (2x2) */
@media (min-width:1024px){ .bh-grid-5 .bh-pg-grid.bh-pg-cols-4{grid-template-columns:repeat(5,minmax(0,1fr)) !important;} }
@media (max-width:639px){ .bh-grid-5 .bh-pg-grid > :nth-child(n+5){display:none !important;} }
/* Wookah Bestseller mobil: 2 Karten nebeneinander als Wisch-Slider */
@media (max-width:639px){
  .bh-home-wookah-grid .bh-pg-grid{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:10px;padding-bottom:6px;scrollbar-width:none;}
  .bh-home-wookah-grid .bh-pg-grid::-webkit-scrollbar{display:none;}
  .bh-home-wookah-grid .bh-pg-grid > *{flex:0 0 calc(50% - 5px);max-width:calc(50% - 5px);scroll-snap-align:start;}
}

/* ===== 2026-10-17: Produktkarten ohne Unterstrich, Startseiten-Slider weiss + mehr Abstand (Desktop) ===== */
.bh-pc a.bh-pc-name,.bh-pc a.bh-pc-name:hover,.bh-pc a.bh-pc-name:focus{text-decoration:none !important;}
.bh-pg,.bh-np{background:#fff !important;}
@media (min-width:992px){
  .bh-pg .bh-pg-grid{gap:24px !important;}
  .bh-pg,.bh-np{padding-top:24px !important;padding-bottom:24px !important;}
}
/* ===== Warenkorb: keine Kurzbeschreibung/Merkmale unter den Artikeln (nur Sorte/Konfiguration bleibt) =====
   Bestellabschluss (Kasse) bleibt unveraendert: dort muessen die wesentlichen Merkmale angezeigt werden. */
.basket-items .cart-items-body li.shortdescription,
.basket-items .cart-items-body li.sku,
.basket-items .cart-items-body li.baseprice,
.basket-items .cart-items-body li.manufacturer,
.basket-items .cart-items-body li.characteristic,
.basket-items .cart-items-body li.attribute,
.basket-items .cart-items-body li.weight{display:none !important;}
/* Konfigurator-Button "Zusammenstellen": Text passt in den Button */
.configurepos{font-size:12px !important;letter-spacing:0 !important;padding:6px 6px !important;white-space:normal !important;overflow-wrap:anywhere;line-height:1.3 !important;}
/* Warenkorb mobil: Abstand Artikel -> Bestelluebersicht verkleinern */
@media (max-width:991.98px){
  .basket_wrapper .basket-items{margin-bottom:16px !important;}
  .basket-items .cart-items-body ul.list-unstyled{margin-bottom:0 !important;}
  .basket-items .cart-items-body .cart-items-delete{margin-top:8px !important;}
  .basket-items .cart-items-body .cart-items-quantity{margin-bottom:12px !important;}
  .bh-cart-sum-moved{margin-top:0 !important;}
}
/* Kasse (Bestellung pruefen): nur Kurzbeschreibung ausblenden, Merkmale bleiben (Pflichtangaben) */
.checkout-items-item li.shortdescription{display:none !important;}
/* Outline-Buttons (z. B. "Coupon einlösen"): bei Hover/Fokus dunkler Hintergrund -> weisse Schrift (war schwarz auf schwarz) */
.btn-outline-primary:hover,.btn-outline-primary:focus,.btn-outline-primary:active,.btn-outline-primary.active,
.btn-outline-primary:not(:disabled):not(.disabled):active{color:#fff !important;background-color:var(--blue) !important;border-color:var(--blue) !important;}
/* OSS-Lieferland-Leiste oben (Plugin ws5_oss) ausgeblendet – Kunde braucht sie nicht; verursachte Layout-Shift (PageSpeed CLS) */
.ws5_oss_wrapper.stickyTop{display:none !important;}