/**
 * Coffeeness custom header.
 *
 * Ported from the approved coffeeness-header-final.html mockup.
 * All component styles are scoped under `.cn-header` so they never leak into
 * the rest of the site (classes like .menu / .search / .logo are common in WP).
 * Exceptions kept global on purpose:
 *   - :root custom properties
 *   - body-state classes toggled by js/header.js (.nav-collapsed / .nav-open)
 *   - .menu-backdrop / .drawer-backdrop (rendered as siblings outside the header)
 */

:root{
  --topbar-bg:#032936;
  --topbar-fg:#ffffff;
  --text:#032936;
  --blue:#285bb8;
  --hover-bg:#efecea;
  --search-bg:#efecea;
  --border:#e8e8e8;
  --pill:#e05858;
  --cart-badge:#285bb8;
  --tan:#c08f6e;
  --dark:#032936;
  --note:#e05858;
  --maxw:1280px;
}

.cn-header *{box-sizing:border-box;}
/* Freeze all header transitions while JS switches the desktop<->mobile layout,
   so the drawer/topbar don't slide or cross-fade when crossing the breakpoint. */
.cn-header.cn-no-anim,
.cn-header.cn-no-anim *{transition:none !important;}
.cn-header{
  position:relative;z-index:50;background:#fff;color:var(--text);
  font-family:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.cn-header a{color:inherit;text-decoration:none;}

/* Normalise inherited theme typography so header rows match the mockup exactly.
   The standalone mockup relies on the browser default line-height (normal);
   Astra's parent theme sets a larger base line-height that inherits in and
   inflates every row. Reset it here without touching the component-specific
   line-heights below (they are class-scoped and keep their own values). */
.cn-header{line-height:normal;}
.cn-header p{line-height:normal;margin:0;}
.cn-header a,
.cn-header button,
.cn-header input,
.cn-header select,
.cn-header textarea{line-height:normal !important;}

/* ---------------------------------------------------------------
   TOP ANNOUNCEMENT BAR
----------------------------------------------------------------*/
.cn-header .topbar{background:var(--topbar-bg);color:var(--topbar-fg);}
.cn-header .topbar-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:30px;padding:9px 24px;font-size:.82rem;font-weight:500;
}
.cn-header .topbar-item{display:inline-flex;align-items:center;gap:7px;color:var(--topbar-fg);}
.cn-header .topbar-item svg{width:14px;height:14px;stroke:var(--topbar-fg);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* ---------------------------------------------------------------
   MAIN HEADER ROW
----------------------------------------------------------------*/
.cn-header .mainbar{border-bottom:1px solid var(--border);}
.cn-header .mainbar-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;gap:34px;padding:16px 24px;
}
.cn-header .logo{display:flex;align-items:center;flex:0 0 auto;}
.cn-header .logo-img{height:42px;width:auto;display:block;}
.cn-header .logo-mark{height:54px;width:auto;display:none;}

.cn-header .search{flex:1 1 auto;max-width:560px;position:relative;}
.cn-header .search input{
  width:100%;border:1px solid var(--border);background:var(--search-bg);
  border-radius:20px !important;padding:0.60rem 2.6em 0.60rem 1.1em !important;
  font-size:.95rem;font-family:inherit;color:var(--text);outline:none;
  height:auto !important;line-height:normal !important;margin:0 !important;
}
.cn-header .search input::placeholder{color:#8a8a8a;}
.cn-header .search input:focus{border-color:#c9c9c9;}
.cn-header .search-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:6px;display:flex;}
.cn-header .search-btn svg{width:18px;height:18px;stroke:#555;fill:none;stroke-width:2;stroke-linecap:round;}

.cn-header .actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.cn-header .action{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px 12px;border-radius:10px;color:var(--text);cursor:pointer;min-width:64px;
  transition:background .15s ease, color .15s ease;
}
.cn-header .action .ico-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
.cn-header .action svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s ease;}
.cn-header .action-label{font-size:.8rem;font-weight:500;}
.cn-header .action:hover{background:var(--hover-bg);color:var(--blue);}
.cn-header .action:hover svg{stroke:var(--blue);}

.cn-header .cart-count{
  position:absolute;top:-7px;right:-10px;min-width:18px;height:18px;padding:0 5px;
  background:var(--cart-badge);color:#fff;border-radius:9px;font-size:.68rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
/* discount highlight tag in the menu row, right of "Über uns" (right-aligned) */
.cn-header .menu-highlight{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:6px;
  background:var(--blue);color:#fff;font-size:.82rem;font-weight:700;
  padding:6px 12px 6px 10px;border-radius:6px;line-height:1;white-space:nowrap;
  transition:background .15s ease;
}
.cn-header .menu-highlight svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.cn-header .menu-highlight:hover{background:#1f4a99;}

/* ---------------------------------------------------------------
   MAIN NAVIGATION
----------------------------------------------------------------*/
.cn-header .menu{border-bottom:1px solid var(--border);}
.cn-header .menu-inner{
  max-width:var(--maxw);margin:0 auto;position:relative;
  display:flex;align-items:center;gap:4px;padding:6px 24px;flex-wrap:nowrap;
}
.cn-header .menu-item{
  display:inline-flex;align-items:center;gap:5px;
  padding:10px 12px;border-radius:10px;
  font-size:1rem;font-weight:500;color:var(--text);cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.cn-header .menu-item .arrow{
  width:.7rem;height:.7rem;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s ease, transform .15s ease;
}
.cn-header .menu-item:hover{background:var(--hover-bg);color:var(--blue);}
.cn-header .menu-item:hover .arrow{stroke:var(--blue);transform:rotate(180deg);}
.cn-header .pill{display:inline-flex;align-items:center;justify-content:center;padding:.2em 8px;background:var(--pill);color:#fff;font-size:1rem;font-weight:700;border-radius:5px;line-height:1;}

/* ---------- backdrop blur over the body ---------- */
.menu-backdrop{
  position:fixed;inset:0;z-index:30;background:rgba(3,41,54,.06);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease, visibility .18s;
}
body:has(.cn-header .menu-item.has-mega:hover) .menu-backdrop{opacity:1;visibility:visible;}

/* While a mega menu is open, lift the header + backdrop into a high z-index band
   so the dim/blur actually covers high-z-index page chrome (footer z-index:100000,
   #ast-scroll-top:10000000, the PayPal button on product pages) that otherwise
   pokes through. Scoped to the hover state so it never interferes with overlays
   when no mega is open; kept below the FunnelKit side cart (~1e9) so the cart
   still layers above the header. */
body:has(.cn-header .menu-item.has-mega:hover) .menu-backdrop{z-index:100000000;}
body:has(.cn-header .menu-item.has-mega:hover) .cn-header{z-index:100000001;}

/* ---------- mega menu shell ---------- */
.cn-header .mega{
  position:absolute;left:0;right:0;top:calc(100% - 6px);
  padding-top:12px;                 /* hoverable bridge + visual gap */
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  z-index:55;
}
.cn-header .menu-item.has-mega:hover .mega{opacity:1;visibility:visible;transform:translateY(0);}
.cn-header .mega-inner{
  background:#fff;border-radius:10px;color:#032936;
  box-shadow:0 24px 60px rgba(3,41,54,.18);
  padding:26px 28px;
}
.cn-header .mega-cols{display:flex;gap:32px;align-items:stretch;}
.cn-header .mega-list{flex:1 1 42%;display:flex;flex-direction:column;gap:7px;}
.cn-header .mega-aside{flex:1 1 58%;display:grid;gap:18px;}
.cn-header .mega-aside.two-col{grid-template-columns:1fr 1fr;}
.cn-header .mega-aside.two-row{grid-template-columns:1fr;grid-auto-rows:1fr;}
.cn-header .mega-aside.one{grid-template-columns:1fr;}

/* left-list links */
.cn-header .m-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 10px;border-radius:8px;color:#032936;font-size:1.06rem;font-weight:500;
  transition:color .14s ease, background .14s ease;
}
.cn-header .m-link-arrow{
  width:16px;height:16px;stroke:rgba(3,41,54,.32);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;
  transition:stroke .14s ease, transform .14s ease;
}
.cn-header .m-link:hover{color:var(--blue);background:var(--hover-bg);}
.cn-header .m-link:hover .m-link-arrow{stroke:var(--blue);transform:translateX(3px);}
.cn-header .m-link--big{font-size:1.14rem;font-weight:700;padding:14px 10px;}
.cn-header .m-link--big strong{font-weight:800;}
.cn-header .m-hot{color:var(--pill);}
.cn-header .bundle-promo{display:flex;align-items:center;gap:11px;background:#f3f0ec;border:1px solid rgba(3,41,54,.10);border-radius:10px;padding:11px 13px;margin-bottom:8px;color:#032936;transition:background .14s ease;}
.cn-header .bundle-promo:hover{background:#ece8e2;}
.cn-header .bp-icon{flex:0 0 auto;width:34px;height:34px;border-radius:8px;background:rgba(3,41,54,.07);display:flex;align-items:center;justify-content:center;}
.cn-header .bp-icon svg{width:19px;height:19px;stroke:#032936;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.cn-header .bp-text{flex:1;min-width:0;}
.cn-header .bp-text strong{display:block;font-size:.96rem;font-weight:700;line-height:1.2;}
.cn-header .bp-text span{display:block;font-size:.83rem;color:rgba(3,41,54,.7);margin-top:1px;}
.cn-header .bp-arrow{width:16px;height:16px;flex:0 0 auto;stroke:rgba(3,41,54,.35);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .14s ease, transform .14s ease;}
.cn-header .bundle-promo:hover .bp-arrow{stroke:#032936;transform:translateX(3px);}
.cn-header .m-sep{display:block;height:1px;background:rgba(3,41,54,.12);margin:8px 4px;}
.cn-header .m-grouplabel{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(3,41,54,.45);padding:8px 10px 2px;margin-top:4px;}
.cn-header .m-leadnote{display:flex;align-items:center;gap:7px;color:#c0392b;font-size:.84rem;font-weight:600;padding:2px 10px;margin:0 0 4px;}
.cn-header .m-leadnote svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.cn-header .m-leadnote strong{font-weight:800;}
.cn-header .m-benefits{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:9px;}
.cn-header .m-benefits li{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;line-height:1.3;}
.cn-header .m-benefits li svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85;}
.cn-header .m-benefits .disc{color:var(--pill);font-weight:700;}
.cn-header .buero-card .m-card-title{font-size:1.4rem;line-height:1.22;}
.cn-header .buero-contact{display:flex;align-items:flex-start;gap:9px;margin-top:14px;padding:11px 12px;border-radius:9px;background:rgba(249,249,249,.08);font-size:.84rem;line-height:1.4;}
.cn-header .buero-contact svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.9;}
.cn-header .buero-contact a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.cn-header .m-note{margin:0 6px 14px;color:var(--note);font-weight:600;font-size:.95rem;}

/* cards */
.cn-header .m-card{display:flex;flex-direction:column;padding:20px;border-radius:12px;min-height:170px;}
.cn-header .m-card--tan{background:var(--tan);color:#032936;}
.cn-header .m-card--dark{background:var(--dark);color:#f9f9f9;}
.cn-header .m-card--light{background:#fff;color:#032936;border:1px solid rgba(3,41,54,.12);}
.cn-header .m-card--light .m-card-foot{border-top-color:rgba(3,41,54,.12);}
.cn-header .m-card--light .m-card-title{font-size:1.12rem;}
.cn-header .m-card--light:hover{border-color:rgba(3,41,54,.24);}
.cn-header .m-card--light:hover .m-card-cta{color:var(--blue);}
.cn-header .m-card-chip{width:34px;height:34px;border-radius:9px;background:rgba(3,41,54,.07);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;}
.cn-header .m-card-chip svg{width:19px;height:19px;stroke:#032936;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.cn-header .m-card-main{flex:1 1 auto;}
/* color:inherit !important - the card titles are <h4>s; the theme's heading
   colour rule would otherwise override the card's colour and make the white
   titles on dark cards invisible. inherit makes each title follow its card
   (white on dark/sirup cards, #032936 on tan/light), matching the mockup. */
.cn-header .m-card-title{margin:0 0 8px;font-size:1.5rem;font-weight:700;line-height:1.18;color:inherit !important;}
.cn-header .m-card-sub{margin:0;font-size:.92rem;line-height:1.45;opacity:.92;}
.cn-header .m-card-img{width:100%;height:120px;object-fit:cover;border-radius:8px;margin-top:14px;display:block;background:#b3825f;}
.cn-header .m-card-foot{margin-top:16px;padding-top:12px;border-top:1px solid;}
.cn-header .m-card--tan .m-card-foot{border-top-color:rgba(3,41,54,.22);}
.cn-header .m-card--dark .m-card-foot{border-top-color:rgba(249,249,249,.22);}
.cn-header .m-card-cta{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.92rem;}
.cn-header .m-arrow{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .14s ease;}
.cn-header .m-card:hover .m-arrow{transform:translateX(3px);}
.cn-header .m-card-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;margin-bottom:14px;}
.cn-header .m-card-icon svg{width:22px;height:22px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.cn-header .m-card--dark .m-card-icon{background:rgba(249,249,249,.12);}
.cn-header .m-card--dark .m-card-icon svg{stroke:#f9f9f9;}
.cn-header .m-card--tan .m-card-icon{background:rgba(3,41,54,.10);}
.cn-header .m-card--tan .m-card-icon svg{stroke:#032936;}
.cn-header .m-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;}
.cn-header .m-chip{font-size:.78rem;font-weight:600;padding:4px 11px;border-radius:999px;}
.cn-header .m-card--dark .m-chip{border:1px solid rgba(249,249,249,.32);color:#f9f9f9;}
.cn-header .m-card--tan .m-chip{border:1px solid rgba(3,41,54,.26);color:#032936;}
.cn-header .m-callout{display:inline-flex;align-items:center;gap:9px;background:#fbe7e7;color:#b83838;font-size:.95rem;font-weight:600;padding:9px 14px;border-radius:8px;margin:0 0 18px;}
.cn-header .m-callout svg{width:18px;height:18px;flex:0 0 auto;stroke:#b83838;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.cn-header .m-callout strong{font-weight:800;}
.cn-header .m-callout--list{display:flex;width:100%;margin:0 0 4px;}
.cn-header .gift-grid{display:flex;gap:20px;align-items:stretch;}
.cn-header .gift-text{flex:1.25;display:flex;flex-direction:column;}
.cn-header .gift-visual{flex:1;display:flex;align-items:center;justify-content:center;}
.cn-header .voucher{width:100%;background:#f5efe8;color:#032936;border:1.5px dashed rgba(3,41,54,.28);border-radius:12px;padding:18px 16px;display:flex;flex-direction:column;gap:5px;}
.cn-header .voucher-label{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.65;}
.cn-header .voucher-amount{font-size:1.7rem;font-weight:800;line-height:1.05;}
.cn-header .voucher-amount em{font-style:normal;font-size:.92rem;font-weight:600;}
.cn-header .voucher-brand{font-size:.84rem;font-weight:600;opacity:.6;margin-top:3px;}
.cn-header .sirup-card{
  --zoom:160%; --focus-x:50%; --focus-y:32%;
  position:relative;overflow:hidden;padding:0;color:#fff;background-color:#c08f6e;
  background-image:url('https://shop.coffeeness.de/wp-content/uploads/2026/06/sirup-einfuellen.png');
  background-repeat:no-repeat;background-size:var(--zoom);background-position:var(--focus-x) var(--focus-y);
}
.cn-header .sirup-card .m-card-scrim{
  margin-top:auto;width:100%;padding:20px;
  background:linear-gradient(to top, rgba(3,41,54,.92) 0%, rgba(3,41,54,.74) 50%, rgba(3,41,54,0) 100%);
}
.cn-header .sirup-card .m-card-sub{opacity:.95;}
.cn-header .sirup-card .m-card-foot{border-top-color:rgba(255,255,255,.28);}
.cn-header .m-card--watermark{position:relative;overflow:hidden;}
.cn-header .m-card--watermark .m-card-main,.cn-header .m-card--watermark .m-card-foot{position:relative;z-index:1;}
.cn-header .m-watermark{position:absolute;right:-22px;bottom:-26px;width:150px;height:150px;color:#f9f9f9;opacity:.08;pointer-events:none;}
.cn-header .m-watermark svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;}
.cn-header .m-card--tan .m-watermark{color:#032936;opacity:.12;}
.cn-header .office-promo{display:flex;align-items:center;gap:12px;background:#f3f0ec;border:1px solid rgba(3,41,54,.10);border-radius:10px;padding:11px 13px;color:#032936;transition:background .15s ease;}
.cn-header .office-promo:hover{background:#ece8e2;}
.cn-header .office-icon{flex:0 0 auto;width:36px;height:36px;border-radius:9px;background:rgba(3,41,54,.07);display:flex;align-items:center;justify-content:center;}
.cn-header .office-icon svg{width:20px;height:20px;stroke:#032936;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.cn-header .office-text{flex:1;min-width:0;}
.cn-header .office-text strong{display:block;font-size:1rem;font-weight:700;line-height:1.2;}
.cn-header .office-text span{display:block;font-size:.83rem;color:rgba(3,41,54,.7);margin-top:1px;}
.cn-header .office-badge{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--pill);color:#fff;border-radius:8px;padding:5px 11px;line-height:1;}
.cn-header .office-badge b{font-size:1.2rem;font-weight:800;}
.cn-header .office-badge small{font-size:.62rem;font-weight:600;letter-spacing:.04em;margin-top:2px;opacity:.9;}

/* Gläser infographics */
.cn-header .glas-imgs{grid-template-columns:1fr 1fr;align-items:center;}
.cn-header .glas-img{width:100%;height:100%;min-height:280px;max-height:380px;object-fit:cover;border-radius:10px;background:#f5f3f0;}
.cn-header .glas-link{display:block;height:100%;border-radius:10px;overflow:hidden;}

/* Zubehör image cards */
.cn-header .mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.cn-header .m-imgcard{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:1/1;border-radius:12px;color:#fff;text-decoration:none;background-color:#3a2c22;background-repeat:no-repeat;background-size:cover;background-position:center;}
.cn-header .m-imgcard-scrim{width:100%;padding:16px;background:linear-gradient(to top, rgba(3,41,54,.93) 0%, rgba(3,41,54,.62) 52%, rgba(3,41,54,0) 100%);}
.cn-header .m-imgcard-title{margin:0;font-size:1.05rem;font-weight:700;line-height:1.22;color:#fff !important;}
.cn-header .m-imgcard .m-card-foot{margin-top:9px;padding-top:10px;border-top:1px solid rgba(255,255,255,.28);}
.cn-header .m-imgcard .m-card-cta{color:#fff;}
.cn-header .m-imgcard:hover .m-arrow{transform:translateX(3px);}

/* mobile menu helpers (hidden on desktop) */
.cn-header .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;border-radius:8px;color:var(--text);}
.cn-header .nav-toggle .bars{position:relative;display:inline-block;width:26px;height:17px;}
.cn-header .nav-toggle .bars i{position:absolute;left:0;right:0;height:3px;border-radius:2px;background:currentColor;
  transition:transform .28s ease, opacity .18s ease, top .28s ease, bottom .28s ease;}
.cn-header .nav-toggle .bars i:nth-child(1){top:0;}
.cn-header .nav-toggle .bars i:nth-child(2){top:7px;}
.cn-header .nav-toggle .bars i:nth-child(3){top:14px;}
/* Lengthen the rotated arms so the X's overall width matches the flat hamburger
   lines. scaleX accounts for both the 45deg projection and the 3px bar
   thickness, which together set the diagonal's bounding width. */
body.nav-open .cn-header .nav-toggle .bars i:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg) scaleX(1.2);}
body.nav-open .cn-header .nav-toggle .bars i:nth-child(2){opacity:0;}
body.nav-open .cn-header .nav-toggle .bars i:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg) scaleX(1.2);}
.cn-header .drawer-top{display:none;}
.cn-header .drawer-extras{display:none;}
.drawer-backdrop{position:fixed;inset:0;background:rgba(3,41,54,.45);z-index:85;opacity:0;visibility:hidden;transition:opacity .25s ease;}

@media (max-width:1024px){
  .cn-header .mega-cols{flex-direction:column;}
  .cn-header .mega-grid{grid-template-columns:repeat(2,1fr);}
}

/* === MOBILE NAV: triggered by JS the moment the desktop row would wrap === */
body.nav-collapsed{overflow-x:hidden;}
/* Lock the page behind the open drawer. Lock BOTH html and body: the scroll
   container is often <html>, so locking only <body> lets the page (and the
   sticky header) scroll away behind the menu. */
body.nav-collapsed.nav-open{overflow:hidden;}
html:has(body.nav-collapsed.nav-open){overflow:hidden;}
body.nav-collapsed .menu-backdrop{display:none;}
body.nav-collapsed .cn-header{position:sticky;top:0;z-index:95;}   /* header stays pinned and above the drawer */
/* the drawer is a child of the header, so raise the visible bars above it (z 90) and keep them opaque */
body.nav-collapsed .cn-header .topbar{position:relative;z-index:100;}
body.nav-collapsed .cn-header .mainbar{position:relative;z-index:100;background:#fff;}

/* top header becomes a one-at-a-time ticker */
body.nav-collapsed .cn-header .topbar-inner{position:relative;height:38px;overflow:hidden;flex-wrap:nowrap;gap:0;padding:0 20px;}
body.nav-collapsed .cn-header .topbar-item{position:absolute;left:20px;right:20px;top:0;height:38px;display:flex;justify-content:center;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .45s ease, transform .45s ease;}
/* Before header.js starts the ticker (adds .ticker-ready), show only the first
   item so the bar keeps its fixed 38px height rather than stacking all three and
   causing a load-time layout shift. Once .ticker-ready is set, .is-active drives it. */
body.nav-collapsed .cn-header .topbar-inner:not(.ticker-ready) .topbar-item:first-child{opacity:1;transform:none;pointer-events:auto;}
body.nav-collapsed .cn-header .topbar-item.is-active{opacity:1;transform:translateY(0);pointer-events:auto;}

/* top bar: logo (squirrel) left | Konto, Warenkorb, Burger right; search full width below */
body.nav-collapsed .cn-header .nav-toggle{display:flex;order:3;}
body.nav-collapsed .cn-header .mainbar-inner{flex-wrap:wrap;gap:8px;padding:8px 24px;}
body.nav-collapsed .cn-header .logo{order:1;margin-right:auto;}
/* small tablets and up keep the full logo + wordmark; only phones up to ~7" show the squirrel mark */
@media (max-width:480px){
  body.nav-collapsed .cn-header .logo-full{display:none;}
  body.nav-collapsed .cn-header .logo-mark{display:block;}
}
body.nav-collapsed .cn-header .actions{order:2;gap:2px;margin-left:0;}
body.nav-collapsed .cn-header .actions .action:first-child{display:none;}
body.nav-collapsed .cn-header .search{display:none;}

/* off-canvas drawer.
   Closed state is fully hidden with visibility:hidden - translateY(-100%) alone
   only shifts the drawer up by its own height, leaving its bottom edge at
   top:var(--drawer-top), so the last menu items would peek out below the header
   (worse before JS sets --drawer-top). visibility:hidden removes the peek
   regardless of geometry; its change is delayed on close so the slide-out is
   still visible, and immediate on open. overscroll-behavior:contain stops the
   drawer's scroll from chaining to the page. */
body.nav-collapsed .cn-header .menu{position:fixed;left:0;right:0;top:var(--drawer-top,138px);bottom:0;width:100%;background:#fff;z-index:90;
  transform:translateY(-100%);visibility:hidden;transition:transform .32s ease, visibility 0s linear .32s;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-bottom:none;}
body.nav-collapsed.nav-open .cn-header .menu{transform:translateY(0);visibility:visible;transition:transform .32s ease, visibility 0s linear 0s;}
body.nav-collapsed.nav-open .drawer-backdrop{opacity:1;visibility:visible;}
body.nav-collapsed .cn-header .menu-inner{flex-direction:column;align-items:stretch;gap:0;padding:4px 0 0;max-width:none;flex-wrap:nowrap;}

body.nav-collapsed .cn-header .drawer-top{display:none;}
body.nav-collapsed .cn-header .drawer-title{font-weight:700;font-size:1.05rem;}
body.nav-collapsed .cn-header .drawer-close{background:none;border:none;cursor:pointer;padding:6px;color:var(--text);}
body.nav-collapsed .cn-header .drawer-close svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}

/* accordion rows */
body.nav-collapsed .cn-header .menu-item{flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0;padding:0;border-radius:0;border-bottom:1px solid var(--border);}
body.nav-collapsed .cn-header .menu-item:hover{background:transparent;color:var(--text);}
body.nav-collapsed .cn-header .menu-item > a{flex:1 1 auto;padding:16px 6px 16px 18px;font-size:1.05rem;}
body.nav-collapsed .cn-header .menu-item .pill{margin-right:6px;}
body.nav-collapsed .cn-header .menu-item .arrow{width:1.05rem;height:1.05rem;margin-right:16px;transition:transform .2s ease, stroke .2s ease;}
body.nav-collapsed .cn-header .menu-item.open,body.nav-collapsed .cn-header .menu-item.open > a{color:var(--blue);}
body.nav-collapsed .cn-header .menu-item.open .arrow{transform:rotate(180deg);stroke:var(--blue);}

/* expandable submenu content */
body.nav-collapsed .cn-header .mega{position:static;display:none;width:100%;flex-basis:100%;opacity:1;visibility:visible;transform:none;padding-top:0;z-index:auto;}
body.nav-collapsed .cn-header .menu-item.open > .mega{display:block;}
body.nav-collapsed .cn-header .mega-inner{box-shadow:none;border-radius:0;background:#f7f4f1;padding:18px 14px 22px;}
body.nav-collapsed .cn-header .mega-cols{flex-direction:column;gap:16px;}
body.nav-collapsed .cn-header .mega-aside,body.nav-collapsed .cn-header .mega-aside.two-col,body.nav-collapsed .cn-header .mega-aside.two-row,body.nav-collapsed .cn-header .mega-aside.one{grid-template-columns:1fr;}
body.nav-collapsed .cn-header .mega-grid{grid-template-columns:repeat(2,1fr);}

body.nav-collapsed .cn-header .menu-highlight{margin:0;align-self:stretch;width:100%;justify-content:flex-start;
  gap:9px;font-size:1.05rem;padding:16px 18px;border-radius:0;white-space:normal;}
body.nav-collapsed .cn-header .menu-highlight svg{width:19px;height:19px;}

body.nav-collapsed .cn-header .drawer-extras{display:flex;flex-direction:column;padding:6px 0 22px;border-top:1px solid var(--border);}
body.nav-collapsed .cn-header .drawer-extras a{display:flex;align-items:center;gap:11px;padding:14px 18px;font-size:1.05rem;color:var(--text);}
body.nav-collapsed .cn-header .drawer-extras svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* Doppelwandige Gläser mega: in the mobile drawer the two glass images are
   otherwise forced to one column (see the mega-aside rule above) and stretch
   into oversized wide banners. On tablet widths keep them side by side and
   square. Placed after that rule so it wins on equal specificity. */
@media (min-width:600px){
  body.nav-collapsed .cn-header .glas-imgs{grid-template-columns:1fr 1fr;align-items:start;}
  body.nav-collapsed .cn-header .glas-link{height:auto;}
  body.nav-collapsed .cn-header .glas-img{height:auto;min-height:0;max-height:none;aspect-ratio:1/1;}
}