/* ===========================================================================
   IndustrieWert — global chrome: header, drawer, footer
   =========================================================================== */

/* ------------------------------------------------------------------ header */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-surface);
  border-bottom: var(--bw-hair) solid var(--c-rule);
  transition: box-shadow var(--t-base) var(--ease-mech);
}
.hdr.is-stuck { box-shadow: var(--shadow-float); }

.hdr__inner {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: var(--h-header);
  transition: min-height var(--t-base) var(--ease-mech);
}
.hdr.is-stuck .hdr__inner { min-height: var(--h-header-compact); }

.hdr__brand { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.logo { width: 168px; height: auto; transition: width var(--t-base) var(--ease-mech); }
.hdr.is-stuck .logo { width: 144px; }

.hdr__nav { margin-inline-start: auto; }
.hdr__list { display: flex; gap: var(--s-5); list-style: none; }
.hdr__list a {
  display: inline-block; padding-block: var(--s-2);
  font-size: var(--fs-body-s); font-weight: 550; text-decoration: none;
  position: relative;
}
.hdr__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--bw-emph); background: var(--c-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-mech);
}
.hdr__list a:hover::after, .hdr__list a[aria-current]::after { transform: scaleX(1); }

.hdr__util { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
.hdr__phone { font-size: var(--fs-body-s); text-decoration: none; white-space: nowrap; }
.hdr__cta { min-height: 40px; padding-block: 9px; }

.hdr__burger {
  display: none; width: 44px; height: 44px; padding: 10px;
  background: none; border: var(--bw-hair) solid var(--c-rule); border-radius: var(--r-1);
  cursor: pointer; flex-direction: column; justify-content: space-between;
}
.hdr__burger span { display: block; height: 2px; background: var(--c-ink); transition: transform var(--t-base) var(--ease-mech), opacity var(--t-fast); }
.hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.hdr__drawer { border-top: var(--bw-hair) solid var(--c-rule); padding-block: var(--s-5); background: var(--c-surface); }
.hdr__drawer-list { list-style: none; display: flex; flex-direction: column; }
.hdr__drawer-list a {
  display: block; padding: var(--s-4) 0; font-size: var(--fs-h4); font-weight: 600;
  text-decoration: none; border-bottom: var(--bw-hair) solid var(--c-grey-100);
}
.hdr__drawer-foot { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); }

@media (max-width: 1160px) {
  /* Wordmark + five nav links + four icons + the CTA measure ~1125px and only
     fit from ~1150px up; below that the nav folds into the drawer. */
  .hdr__nav { display: none; }
  .hdr__burger { display: flex; }
}
@media (min-width: 1161px) {
  .hdr__drawer { display: none !important; }
}
@media (max-width: 720px) {
  /* Wordmark + four icons + the CTA + burger need ~706px; below that the CTA
     lives in the drawer (and the hero and product bar lead with it anyway). */
  .hdr__cta { display: none; }
}
@media (max-width: 560px) {
  /* Search leaves the bar too (the drawer carries it) and the icons tighten. */
  .hdr__icon[data-search-open] { display: none; }
  .hdr__util { gap: 4px; }
  .hdr__icon { width: 40px; height: 40px; }
  .hdr__inner { gap: var(--s-3); }
  .logo { width: 120px; }
}

/* ---------------------------------------------------- header utilities */
.hdr__icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: var(--c-ink); text-decoration: none; border-radius: var(--r-1); }
.hdr__icon:hover { background: var(--c-surface-alt); }
.hdr__icon[aria-current] { box-shadow: inset 0 -2px 0 var(--c-accent); }
.hdr__count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; background: var(--c-accent); color: var(--c-accent-ink); font-family: var(--f-mono); font-size: 11px; font-weight: 700; border-radius: 9px; }
.hdr__count--on { background: var(--c-industrial-900); color: var(--c-accent); font-size: 10px; }   /* signed-in tick */
.drawer__search { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }
.drawer__search input { flex: 1; min-width: 0; padding: 12px var(--s-3); border: var(--bw-hair) solid var(--c-rule); border-radius: var(--r-1); font-size: var(--fs-body); }

/* --------------------------------------------------------- search overlay */
.search { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-surface); border-bottom: var(--bw-hair) solid var(--c-rule); box-shadow: var(--shadow-float); z-index: 110; }
.search__inner { padding-block: var(--s-4) var(--s-5); }
.search__form { display: flex; gap: var(--s-2); align-items: stretch; }
.search__form input { flex: 1; min-width: 0; padding: 12px var(--s-3); border: var(--bw-hair) solid var(--c-rule); border-radius: var(--r-1); font-size: var(--fs-body-l); }
.search__close { width: 48px; background: none; border: var(--bw-hair) solid var(--c-rule); border-radius: var(--r-1); font-size: 1.4rem; cursor: pointer; }
.search__results { margin-top: var(--s-3); display: flex; flex-direction: column; }
.search__results:empty { display: none; }
.search__hit { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-2); text-decoration: none; border-radius: var(--r-1); }
.search__hit:hover, .search__hit.is-on { background: var(--c-surface-alt); }
.search__hit img { width: 64px; height: 48px; object-fit: cover; border: var(--bw-hair) solid var(--c-rule); }
.search__hit-name { font-size: var(--fs-body-s); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__hit-meta { font-size: var(--fs-caption); color: var(--c-ink-faint); }
.search__hit-price { font-family: var(--f-mono); font-size: var(--fs-body-s); white-space: nowrap; }
.search__more { padding: var(--s-2); font-size: var(--fs-caption); color: var(--c-ink-faint); }
.search__none { padding: var(--s-3) var(--s-2); font-size: var(--fs-body-s); color: var(--c-ink-muted); }

/* ------------------------------------------------------- flash & toast */
.flash { background: var(--c-industrial-900); color: #fff; font-size: var(--fs-body-s); }
.flash .wrap { padding-block: var(--s-3); }
.flash--error { background: var(--c-error); }
.flash--ok { background: var(--c-accent); color: var(--c-accent-ink); }
.toast { position: fixed; left: 50%; bottom: var(--s-6); transform: translateX(-50%); z-index: 200; max-width: min(92vw, 520px); padding: var(--s-3) var(--s-5); background: var(--c-industrial-900); color: #fff; font-size: var(--fs-body-s); border-radius: var(--r-1); box-shadow: 0 6px 24px rgb(0 0 0 / .25); }
.toast--error { background: var(--c-error); }
.toast a { color: var(--c-accent); }

/* ------------------------------------------------------------------ footer */
.ftr { background: var(--c-surface-deep); color: #fff; padding-top: var(--s-9); }
.ftr__inner {
  display: grid; gap: var(--s-7);
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  padding-bottom: var(--s-8);
}
@media (max-width: 1080px) { .ftr__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .ftr__inner { grid-template-columns: 1fr; gap: var(--s-6); } }

.ftr .logo { width: 208px; }
.ftr__tag { color: var(--c-grey-400); margin-top: var(--s-3); }
.ftr__col h2 { margin-bottom: var(--s-4); color: var(--c-accent); }
.ftr__address { font-style: normal; color: var(--c-grey-300); font-size: var(--fs-body-s); margin-bottom: var(--s-3); line-height: 1.7; }
.ftr__links { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.ftr__links a {
  color: var(--c-grey-300); font-size: var(--fs-body-s); text-decoration: none;
  transition: color var(--t-fast) var(--ease-mech);
}
.ftr__links a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--c-accent); }
.ftr__hours { margin-top: var(--s-3); color: var(--c-grey-500); }
.ftr__pay { color: #fff; }
.ftr__pay-note { color: var(--c-grey-500); margin-top: var(--s-2); line-height: 1.6; }

.ftr__base {
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  padding-block: var(--s-5); border-top: var(--bw-hair) solid rgb(255 255 255 / .12);
  color: var(--c-grey-500);
}

/* ------------------------------------------------------------------ errors */
.err { padding-block: var(--s-10); text-align: center; }
.err__code { font-family: var(--f-mono); font-size: var(--fs-display); color: var(--c-accent); }