/* ==========================================================================
   Elektrogrosshandel.wien – shared site chrome (requires tokens.css + components.css)
   Styles for the markup rendered by js/partials/header.js, footer.js and
   checkout-header.js: site header (graphite rows 1+2, desktop condensing,
   mobile: logo row scrolls away and only the 52px search row stays sticky),
   menus, mega menu, search suggestions, mobile navigation drawer,
   checkout header and footer.
   ========================================================================== */

/* ---------- Site header (graphite rows 1+2; mobile: logo row scrolls away, search row sticky) ---------- */
.site-header,.co-header,.site-footer{font-family:var(--font-sans);font-size:var(--text-14);line-height:var(--leading-body)}
.site-header{position:sticky;top:0;z-index:var(--z-header);background:var(--color-graphite-900);color:var(--color-on-dark)}
.hdr-main__inner{display:flex;align-items:center;gap:var(--space-4);height:var(--header-row-1)}
.hdr-burger{display:none}
.site-header .search{flex:1 1 auto;max-width:760px}
.hdr-actions{display:flex;align-items:center;gap:var(--space-1);flex:none;margin-left:auto}
.hdr-price{display:inline-flex;align-items:center;gap:var(--space-2);margin-right:var(--space-2);color:var(--color-on-dark-muted);font-size:var(--text-12)}
.hdr-act{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 10px;border:0;border-radius:var(--radius-4);background:none;color:var(--color-on-dark);text-decoration:none;position:relative}
.hdr-act:hover{background:var(--color-graphite-700)}
.hdr-act__txt{display:grid;line-height:1.2;text-align:left}
.hdr-act__txt small{color:var(--color-on-dark-muted)}
.hdr-act__txt b{font-size:var(--text-14);font-weight:var(--weight-semibold);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.hdr-act__badge{position:absolute;top:5px;left:22px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-full);background:var(--color-brand);color:var(--color-on-brand);font-size:var(--text-12);font-weight:var(--weight-bold);display:grid;place-items:center;line-height:1;border:2px solid var(--color-graphite-900);font-variant-numeric:tabular-nums}
.hdr-nav{background:var(--color-graphite-800);border-top:1px solid var(--color-graphite-700);max-height:var(--header-row-2);transition:max-height var(--motion-panel) var(--ease-standard),visibility 0s}
.site-header.is-condensed .hdr-nav{max-height:0;overflow:hidden;visibility:hidden;border-top-color:transparent;transition:max-height var(--motion-panel) var(--ease-standard),visibility 0s var(--motion-panel)}
.hdr-nav__inner{display:flex;align-items:center;gap:var(--space-1);height:var(--header-row-2)}
.hdr-nav__link,.hdr-nav__btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 var(--space-3);border:0;border-radius:var(--radius-4);background:none;color:var(--color-on-dark-muted);text-decoration:none;font-weight:var(--weight-semibold);white-space:nowrap}
.hdr-nav__link:hover,.hdr-nav__btn:hover{color:var(--color-on-dark);background:var(--color-graphite-700)}
.hdr-nav__link[aria-current="page"]{color:var(--color-on-dark);box-shadow:inset 0 -3px 0 var(--color-brand);border-radius:0}
.hdr-nav__btn--main{color:var(--color-on-dark);background:var(--color-graphite-700);margin-right:var(--space-2)}
.hdr-nav__btn[aria-expanded="true"]{background:var(--color-on-dark);color:var(--color-ink)}
.hdr-nav__spacer{flex:1}
.hdr-phone small{color:var(--color-on-dark-muted);font-weight:var(--weight-regular);font-size:var(--text-12)}
.hdr-nav__link.hdr-phone{color:var(--color-on-dark)}
.hdr-menu{position:relative}
.menu-panel{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;padding:6px;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-8);box-shadow:var(--shadow-overlay);z-index:var(--z-dropdown)}
.menu-panel a,.menu-panel button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border:0;border-radius:var(--radius-4);background:none;color:var(--color-ink);text-decoration:none;text-align:left}
.menu-panel a:hover,.menu-panel button:hover{background:var(--color-surface-sunken)}
.menu-panel svg.i{color:var(--color-muted)}
.menu-panel small{display:block;color:var(--color-muted)}
.menu-panel hr{border:0;border-top:1px solid var(--color-border);margin:6px 0}
.menu-panel__label{font-size:var(--text-12);color:var(--color-muted);padding:6px 10px 2px}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--color-surface);color:var(--color-text);border-top:1px solid var(--color-border);box-shadow:var(--shadow-overlay);z-index:var(--z-dropdown)}
.mega__inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.1fr);gap:var(--space-6);padding-top:var(--space-5);padding-bottom:var(--space-6)}
.mega h3{font-size:var(--text-16);margin-bottom:var(--space-2)}
.mega h3 a{color:var(--color-ink);text-decoration:none}
.mega h3 a:hover{text-decoration:underline}
.mega__list a{display:flex;justify-content:space-between;gap:var(--space-3);min-height:36px;align-items:center;border-bottom:1px solid var(--color-border);text-decoration:none;color:var(--color-ink)}
.mega__list a:hover{text-decoration:underline}
.mega__n{color:var(--color-muted);font-variant-numeric:tabular-nums}
.mega__aside{background:var(--color-surface-sunken);border-radius:var(--radius-4);padding:var(--space-4);display:grid;gap:var(--space-2);align-content:start}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-8);box-shadow:var(--shadow-overlay);border:1px solid var(--color-border);overflow:hidden;min-width:min(560px,100vw - 32px);z-index:var(--z-dropdown)}
.suggest__group{padding:var(--space-2) 0;border-bottom:1px solid var(--color-border)}
.suggest__title{font-size:var(--text-12);color:var(--color-muted);padding:4px var(--space-4);font-weight:var(--weight-semibold)}
.suggest__opt{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;min-height:52px;padding:6px var(--space-4);text-decoration:none;color:var(--color-ink);cursor:pointer}
.suggest__opt[aria-selected="true"],.suggest__opt:hover,.suggest__cat:hover,.suggest__cat[aria-selected="true"],.suggest__all:hover,.suggest__all[aria-selected="true"]{background:var(--color-surface-sunken)}
.suggest__thumb{width:40px;height:40px;border:1px solid var(--color-border);border-radius:var(--radius-2);background:var(--color-surface);display:grid;place-items:center;overflow:hidden}
.suggest__thumb img{width:100%;height:100%;object-fit:contain}
.suggest__name{display:block;font-weight:var(--weight-semibold);line-height:1.3}
.suggest mark{background:var(--color-brand-tint);color:inherit;padding:0 1px}
.suggest__meta{font-size:var(--text-12);color:var(--color-muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.suggest__cat{display:flex;justify-content:space-between;align-items:center;min-height:40px;padding:0 var(--space-4);text-decoration:none;color:var(--color-ink)}
.suggest__all{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:0 var(--space-4);font-weight:var(--weight-semibold);color:var(--color-ink);text-decoration:none;background:var(--color-surface-hover)}
.suggest__empty{padding:var(--space-4);display:grid;gap:var(--space-2)}
.mnav__group{padding:var(--space-2) 0;border-bottom:1px solid var(--color-border)}
.mnav__group:last-child{border-bottom:0}
.mnav__title{font-size:var(--text-12);color:var(--color-muted);padding:var(--space-2) 0;font-weight:var(--weight-semibold)}
.mnav a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:48px;text-decoration:none;color:var(--color-ink);font-weight:var(--weight-semibold);font-size:var(--text-16)}
.mnav a svg.i{color:var(--color-muted)}
.mnav .mnav__sub{padding-left:var(--space-4);font-weight:var(--weight-regular)}
.mnav .mnav__svc{justify-content:flex-start;gap:var(--space-3);font-weight:var(--weight-regular)}
.mnav__n{color:var(--color-muted);font-weight:var(--weight-regular);font-size:var(--text-14)}
/* texts become visually hidden (not display:none) so icon-only links keep their accessible name */
@media (max-width:1279px){.hdr-act--lists .hdr-act__txt,.hdr-act--account .hdr-act__txt,.hdr-act--admin .hdr-act__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
@media (max-width:1023px){.hdr-price,.hdr-nav__link--quote{display:none}.hdr-nav__link,.hdr-nav__btn{padding:0 var(--space-2)}.hdr-phone__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.hdr-act__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.mega__inner{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .site-header{top:calc(-1 * var(--header-m-row-1))}
  .hdr-main .container{padding-inline:4px}
  .hdr-main__inner{flex-wrap:wrap;height:auto;gap:0}
  .hdr-burger{display:inline-grid;place-items:center;width:44px;height:var(--header-m-row-1);border:0;background:none;color:var(--color-on-dark)}
  .site-header .logo{font-size:var(--text-14);gap:8px;height:var(--header-m-row-1);margin-left:2px}
  .site-header .logo__mark{width:24px;height:24px}
  .hdr-actions{gap:0}
  .hdr-act{height:var(--header-m-row-1);width:44px;padding:0;justify-content:center}
  .hdr-act--lists,.hdr-act--admin{display:none}
  .hdr-act__badge{left:22px;top:9px}
  .site-header .search{order:10;flex:1 0 100%;max-width:none;height:var(--header-m-search);padding:0 12px 8px}
  .suggest{left:12px;right:12px;min-width:0;max-height:70vh;overflow:auto}
  .hdr-nav,.mega{display:none}
}
.co-header{background:var(--color-graphite-900);color:var(--color-on-dark)}
.co-header__inner{display:flex;align-items:center;gap:var(--space-5);height:var(--checkout-header)}
.co-header__secure{display:inline-flex;gap:8px;align-items:center;color:var(--color-on-dark-muted)}
.co-header__secure svg.i{color:var(--color-brand)}
.co-header__right{margin-left:auto;display:flex;align-items:center;gap:var(--space-4)}
.co-header__right a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--color-on-dark);text-decoration:none}
.co-header__right a:hover{text-decoration:underline}
@media (max-width:767px){.co-header__inner{gap:var(--space-3)}.co-header .logo{font-size:var(--text-14)}.co-header .logo__mark{width:24px;height:24px}.co-header__secure span,.co-header__right .co-header__phone{display:none}}
@media (max-width:400px){.co-header__inner{gap:var(--space-2)}.co-header__secure{display:none}.co-header .logo{flex:0 1 auto;min-width:0}.co-header .logo>span{overflow:hidden;text-overflow:ellipsis}}
@media (max-width:359px){.site-header .hdr-act--account{display:none}}
.site-footer{background:var(--color-graphite-900);color:var(--color-on-dark-muted);margin-top:var(--space-8)}
.site-footer a{color:var(--color-on-dark);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.ft-cols{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:var(--space-6);padding:var(--space-7) 0 var(--space-6)}
.ft-cols h2{font-size:var(--text-14);color:var(--color-on-dark);margin-bottom:var(--space-2)}
.ft-cols li a,.ft-legal a,.ft-legal button{display:inline-flex;align-items:center;min-height:var(--target-min);padding:2px 0}
.ft-contact{display:grid;gap:var(--space-2);margin-top:var(--space-4);font-style:normal}
.ft-contact>div{display:flex;gap:10px;align-items:flex-start}
.ft-contact a{display:inline-flex;align-items:center;min-height:var(--target-min)}
.ft-contact svg.i{color:var(--color-on-dark-muted);margin-top:2px}
.ft-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) 0;border-top:1px solid var(--color-graphite-700)}
.paylist{display:flex;flex-wrap:wrap;gap:6px}
.paylist li{min-height:26px;padding:0 8px;display:grid;place-items:center;border:1px solid var(--color-graphite-600);border-radius:var(--radius-2);color:var(--color-on-dark);font-size:var(--text-12);font-weight:var(--weight-semibold)}
.ft-legal{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding:var(--space-3) 0 var(--space-6);border-top:1px solid var(--color-graphite-700);font-size:var(--text-12)}
.ft-legal a,.ft-legal button{color:var(--color-on-dark-muted);border:0;background:none;font:inherit;cursor:pointer;padding:2px}
.ft-legal button:hover{color:var(--color-on-dark);text-decoration:underline}
.ft-legal__copy{margin-left:auto}
@media (max-width:900px){.ft-cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft-cols{grid-template-columns:1fr;gap:var(--space-5)}.ft-legal__copy{margin-left:0;flex-basis:100%}}
/* checkout footer: legal row only (footer.js data-variant="checkout") */
.site-footer--checkout{margin-top:var(--space-7)}
.ft-legal--checkout{border-top:0;padding-top:var(--space-4)}