/* ==========================================================================
   SecMall — Storefront header styles  (modern · classic · bold)
   All CSS variables are injected via Blade/header-tokens.blade.php
   ========================================================================== */

/* ── Icon helpers (IcoFont) ───────────────────────────────────────────────── */
i.hdr-icon    { font-size: 20px; line-height: 1; display: block; flex: none }
i.hdr-icon-sm { font-size: 15px; line-height: 1; display: block; flex: none }
.hdr-chevron  { opacity: .65 }
/* Legacy SVG icon helpers */
.hdr-ico    { width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none }
.hdr-ico-sm { width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none }

/* ── Shared container ─────────────────────────────────────────────────────── */
.hdr-container {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ── Action icon (cart / wishlist / compare) ──────────────────────────────── */
.hdr-act {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: inherit;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s, opacity .2s;
  background: none;
  border: none;
  padding: 4px 3px;
  letter-spacing: .01em;
}
.hdr-act:hover { color: var(--h-primary) }
.hdr-act-lbl   { line-height: 1; white-space: nowrap }
.hdr-badge {
  position: absolute;
  top: -4px; right: 3px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--h-accent);
  color: var(--h-accent-ink);
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
  pointer-events: none;
}

/* ── Mobile toggle button ─────────────────────────────────────────────────── */
.hdr-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 7px;
  border-radius: 10px;
  font-size: 24px;
  line-height: 1;
  transition: background .18s;
  flex: none;
}
.hdr-mobile-toggle:hover { background: rgba(0,0,0,.06) }

/* ── Mobile nav drawer ────────────────────────────────────────────────────── */
.hdr-backdrop {
  position: fixed; inset: 0; z-index: 1199;
  background: rgba(8,15,30,.55);
  backdrop-filter: blur(3px) saturate(1.2);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.hdr-backdrop.open { opacity: 1; pointer-events: auto }

.hdr-drawer {
  position: fixed;
  top: 0; left: -100%;
  width: min(320px, 92vw);
  height: 100dvh;
  z-index: 1200;
  background: var(--h-bg);
  color: var(--h-ink);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 6px 0 40px rgba(0,0,0,.22);
  transition: left .3s cubic-bezier(.4,0,.2,1);
}
.hdr-drawer.open { left: 0 }

.hdr-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--h-line);
  flex: none;
}
.hdr-drawer-logo {
  font-weight: 800;
  font-size: 20px;
  color: var(--h-primary);
  text-decoration: none;
  font-family: var(--h-font-display);
  letter-spacing: -.3px;
}
.hdr-drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--h-muted);
  font-size: 20px;
  line-height: 1;
  padding: 5px;
  border-radius: 8px;
  transition: background .18s, color .18s;
}
.hdr-drawer-close:hover { background: rgba(0,0,0,.07); color: var(--h-ink) }

.hdr-drawer-body { flex: 1; padding: 10px 0 8px; overflow-y: auto }

.hdr-drawer-section { margin-bottom: 6px }
.hdr-drawer-section-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--h-muted);
  padding: 10px 20px 4px;
  margin: 0;
}
.hdr-drawer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--h-ink);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.hdr-drawer-link:hover { background: rgba(0,0,0,.04); color: var(--h-primary) }
/* Badge inside drawer links — inline pill, not absolute */
.hdr-drawer-link .hdr-badge {
  position: static;
  transform: none;
  margin-left: auto;
  flex: none;
  display: inline-flex;
}
.hdr-drawer-link-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--h-line);
  flex: none;
  transition: background .15s;
}
.hdr-drawer-link:hover .hdr-drawer-link-dot { background: var(--h-primary) }

.hdr-drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--h-line);
  flex: none;
}
.hdr-drawer-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--h-ink);
  text-decoration: none;
  transition: color .18s;
}
.hdr-drawer-phone:hover { color: var(--h-primary) }
.hdr-drawer-phone .icofont-phone { color: var(--h-primary); font-size: 15px }
.hdr-drawer-lang { margin-top: 14px }

/* ── Search suggest dropdown ──────────────────────────────────────────────── */
.hdr-suggest {
  position: absolute;
  top: calc(100% + 7px); left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius);
  box-shadow: var(--h-shadow-md);
  z-index: 300;
  overflow: hidden;
  max-height: 420px;
  overflow-y: auto;
  display: none;
}
.hdr-suggest.open { display: block }

.hdr-si {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 16px;
  text-decoration: none;
  color: #16202d;
  border-bottom: 1px solid #f0f2f5;
  transition: background .14s;
}
.hdr-si:last-child { border-bottom: none }
.hdr-si:hover { background: #f7f9fc }
.hdr-si-img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none }
.hdr-si-no-img {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: #f0f2f5;
  display: grid;
  place-items: center;
  color: #b0b8c4;
  font-size: 16px;
  flex: none;
}
.hdr-si-body { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.hdr-si-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hdr-si-price { font-size: 13px; color: #6b7480; font-weight: 500 }

/* Language switcher — neutral overrides (works on dark bars) */
.hdr-modern .hdr-top .ls-btn,
.hdr-classic .hdr-util .ls-btn {
  color: rgba(255,255,255,.88);
  border-color: rgba(255,255,255,.22);
}
.hdr-modern .hdr-top .ls-btn:hover,
.hdr-classic .hdr-util .ls-btn:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
.hdr-modern .hdr-top .ls-btn.ls-active,
.hdr-classic .hdr-util .ls-btn.ls-active {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.38);
  color: #fff;
}
.hdr-bold .ls-btn {
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.24);
}
.hdr-bold .ls-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.36); color: #fff }
.hdr-bold .ls-btn.ls-active { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.42); color: #fff }

/* ==========================================================================
   TYPE 1 — MODERN
   Clean, airy, brand accent topbar + white sticky main
   ========================================================================== */
.hdr-modern { background: var(--h-bg); font-family: var(--h-font) }

/* Top bar */
.hdr-modern .hdr-top {
  background: var(--h-primary-dark);
  color: rgba(255,255,255,.9);
  font-size: 13px;
}
.hdr-modern .hdr-top .hdr-container { min-height: 42px; gap: 0 }
.hdr-modern .hdr-top-left  { display: flex; align-items: center; flex: 1; gap: 0 }
.hdr-modern .hdr-top-right { display: flex; align-items: center; gap: 18px; margin-left: auto; padding-right: 0 }

.hdr-modern .hdr-city-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 22px 0 0;
  font-family: var(--h-font);
  transition: color .15s;
  white-space: nowrap;
}
.hdr-modern .hdr-city-btn:hover { color: #fff }

.hdr-modern .hdr-util-links { display: flex; gap: 0 }
.hdr-modern .hdr-util-links a {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  min-height: 42px;
  color: rgba(255,255,255,.80);
  text-decoration: none;
  font-size: 13px;
  transition: background .15s, color .15s;
  border-right: 1px solid rgba(255,255,255,.1);
}
.hdr-modern .hdr-util-links a:first-child { border-left: 1px solid rgba(255,255,255,.1) }
.hdr-modern .hdr-util-links a:hover { background: rgba(255,255,255,.1); color: #fff }

.hdr-modern .hdr-top-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: opacity .15s;
  white-space: nowrap;
}
.hdr-modern .hdr-top-phone:hover { opacity: .8 }
.hdr-modern .hdr-top-phone .hdr-icon-sm { color: rgba(255,255,255,.7) }

/* Sticky wrapper */
.hdr-modern .hdr-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--h-bg);
  box-shadow: var(--h-shadow-sm);
}

/* Main row */
.hdr-modern .hdr-main { border-bottom: 1px solid var(--h-line) }
.hdr-modern .hdr-main .hdr-container { min-height: 76px; gap: 14px; padding-top: 10px; padding-bottom: 10px }

/* Logo */
.hdr-modern .hdr-logo {
  font-family: var(--h-font-display);
  font-weight: 800;
  font-size: 25px;
  color: var(--h-primary);
  letter-spacing: -.4px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  text-decoration: none;
  flex: none;
  transition: opacity .18s;
}
.hdr-modern .hdr-logo:hover { opacity: .82 }
.hdr-modern .hdr-logo-mark {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--h-primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
  overflow: hidden;
  flex: none;
}
.hdr-modern .hdr-logo-img { width: 100%; height: 46px; object-fit: contain; border-radius: 10px }
.hdr-modern .hdr-logo-text { letter-spacing: -.3px }

/* Search */
.hdr-modern .hdr-search-wrap { flex: 1; position: relative; min-width: 0 }
.hdr-modern .hdr-search {
  display: flex;
  align-items: center;
  height: 52px;
  background: var(--h-surface);
  border: 1.5px solid var(--h-line);
  border-radius: var(--h-radius);
  padding: 0 6px 0 18px;
  transition: border-color .18s, box-shadow .18s;
  overflow: hidden;
}
.hdr-modern .hdr-search:focus-within {
  border-color: var(--h-primary);
  box-shadow: 0 0 0 3px var(--h-primary-soft);
  background: #fff;
}
.hdr-modern .hdr-search-icon { color: var(--h-muted); flex: none }
.hdr-modern .hdr-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--h-font);
  font-size: 15px;
  color: var(--h-ink);
  background: transparent;
  padding: 0 12px;
  min-width: 0;
}
.hdr-modern .hdr-search input::placeholder { color: var(--h-muted) }
.hdr-modern .hdr-search-btn {
  flex: none;
  height: 40px;
  padding: 0 20px;
  border: none;
  border-radius: calc(var(--h-radius) - 4px);
  background: var(--h-accent);
  color: var(--h-accent-ink);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: var(--h-font);
  transition: filter .18s;
  white-space: nowrap;
}
.hdr-modern .hdr-search-btn:hover { filter: brightness(.93) }

/* Action icons */
.hdr-modern .hdr-acts { display: flex; gap: 6px; color: var(--h-ink); flex: none }

/* Nav strip — multi-row category bar */
.hdr-modern .hdr-nav-strip {
  background: var(--h-primary);
}
.hdr-modern .hdr-nav-strip .hdr-container {
  gap: 0;
  min-height: 46px;
  flex-wrap: wrap;
  align-items: stretch;
  padding-top: 0;
  padding-bottom: 0;
}

.hdr-modern .hdr-strip-catalog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,.18);
  border: none;
  color: #fff;
  padding: 0 20px;
  min-height: 46px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--h-font);
  transition: background .18s;
  white-space: nowrap;
  flex: none;
  align-self: stretch;
}
.hdr-modern .hdr-strip-catalog:hover { background: rgba(0,0,0,.28) }

.hdr-modern .hdr-strip-link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 8px 13px;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transition: background .18s, color .18s;
  white-space: nowrap;
  line-height: 1.2;
  position: relative;
}
.hdr-modern .hdr-strip-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.22);
  border-radius: 1px;
  pointer-events: none;
}
.hdr-modern .hdr-strip-link:hover { background: rgba(0,0,0,.16); color: #fff }
.hdr-modern .hdr-strip-link-custom { font-style: italic }

/* ==========================================================================
   TYPE 2 — CLASSIC
   Traditional three-tier layout with primary nav bar
   ========================================================================== */
.hdr-classic { background: var(--h-bg); font-family: var(--h-font) }

/* Utility bar */
.hdr-classic .hdr-util {
  background: var(--h-primary-dark);
  color: rgba(255,255,255,.88);
  font-size: 13px;
}
.hdr-classic .hdr-util .hdr-container { min-height: 40px; gap: 0 }
.hdr-classic .hdr-util-left  { display: flex; align-items: stretch; flex: 1; min-width: 0 }
.hdr-classic .hdr-util-right { display: flex; align-items: center; gap: 16px; margin-left: auto; padding-left: 16px; flex: none }

.hdr-classic .hdr-util-link {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  min-height: 40px;
  color: rgba(255,255,255,.80);
  text-decoration: none;
  font-size: 13px;
  transition: background .15s, color .15s;
  border-right: 1px solid rgba(255,255,255,.1);
}
.hdr-classic .hdr-util-link:first-child { border-left: 1px solid rgba(255,255,255,.1) }
.hdr-classic .hdr-util-link:hover { background: rgba(255,255,255,.1); color: #fff }

.hdr-classic .hdr-util-city {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color .15s;
}
.hdr-classic .hdr-util-city:hover { color: #fff }

/* Sticky wrapper */
.hdr-classic .hdr-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--h-bg);
  box-shadow: var(--h-shadow-sm);
}

/* Main row */
.hdr-classic .hdr-main { border-bottom: 1px solid var(--h-line) }
.hdr-classic .hdr-main .hdr-container { gap: 22px; min-height: 80px; padding-top: 12px; padding-bottom: 12px }

/* Logo */
.hdr-classic .hdr-logo {
  font-family: var(--h-font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--h-primary);
  display: flex;
  align-items: center;
  gap: 11px;
  white-space: nowrap;
  text-decoration: none;
  flex: none;
  transition: opacity .18s;
}
.hdr-classic .hdr-logo:hover { opacity: .82 }
.hdr-classic .hdr-logo-mark {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--h-primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  overflow: hidden;
  flex: none;
}
.hdr-classic .hdr-logo-img { width: 100%; height: 46px; object-fit: contain; border-radius: 5px }
.hdr-classic .hdr-logo-text { letter-spacing: -.3px }

/* Contact blocks */
.hdr-classic .hdr-contact-block {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: none;
}
.hdr-classic .hdr-contact-link { text-decoration: none; transition: opacity .18s }
.hdr-classic .hdr-contact-link:hover { opacity: .8 }
.hdr-classic .hdr-contact-addr { display: none }

.hdr-classic .hdr-contact-pin {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--h-primary-soft);
  color: var(--h-primary);
  display: grid;
  place-items: center;
  flex: none;
  transition: background .18s, color .18s;
}
.hdr-classic .hdr-contact-link:hover .hdr-contact-pin { background: var(--h-primary); color: #fff }
.hdr-classic .hdr-contact-label { font-size: 11.5px; color: var(--h-muted); line-height: 1.3; margin-bottom: 2px }
.hdr-classic .hdr-contact-value { font-size: 15px; font-weight: 700; color: var(--h-ink); line-height: 1.2; white-space: nowrap }

/* Search */
.hdr-classic .hdr-search-wrap { flex: 1; position: relative; min-width: 0 }
.hdr-classic .hdr-search {
  display: flex;
  align-items: center;
  height: 50px;
  background: var(--h-surface);
  border: 1.5px solid var(--h-line);
  border-radius: var(--h-radius);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.hdr-classic .hdr-search:focus-within {
  border-color: var(--h-primary);
  box-shadow: 0 0 0 3px var(--h-primary-soft);
}
.hdr-classic .hdr-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--h-font);
  font-size: 15px;
  padding: 0 16px;
  background: transparent;
  color: var(--h-ink);
}
.hdr-classic .hdr-search input::placeholder { color: var(--h-muted) }
.hdr-classic .hdr-search-btn {
  flex: none;
  width: 56px; height: 100%;
  border: none;
  background: var(--h-primary);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .18s;
}
.hdr-classic .hdr-search-btn:hover { background: var(--h-primary-dark) }

/* Actions */
.hdr-classic .hdr-acts { display: flex; gap: 8px; color: var(--h-ink); flex: none }

/* Nav bar */
.hdr-classic .hdr-nav {
  background: var(--h-primary);
  color: #fff;
}
.hdr-classic .hdr-nav .hdr-container { gap: 0; min-height: 50px }

.hdr-classic .hdr-catalog-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,.2);
  height: 50px;
  padding: 0 24px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  border: none;
  color: #fff;
  font-family: var(--h-font);
  transition: background .18s;
  white-space: nowrap;
  flex: none;
}
.hdr-classic .hdr-catalog-btn:hover { background: rgba(0,0,0,.3) }
.hdr-classic .hdr-catalog-text { white-space: nowrap }

.hdr-classic .hdr-nav-link {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 16px;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1px;
  transition: background .18s, color .18s;
  white-space: nowrap;
  position: relative;
}
.hdr-classic .hdr-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 3px;
  background: #fff;
  transition: left .25s, right .25s;
  border-radius: 2px 2px 0 0;
  opacity: .7;
}
.hdr-classic .hdr-nav-link:hover { color: #fff }
.hdr-classic .hdr-nav-link:hover::after { left: 14px; right: 14px }
.hdr-classic .hdr-nav-link-custom { font-style: italic }

/* ==========================================================================
   TYPE 3 — BOLD
   Full brand-colour header — sticky, gradient, retail-style
   ========================================================================== */
.hdr-bold {
  position: sticky;
  top: 0;
  z-index: 100;
  font-family: var(--h-font);
  background: linear-gradient(140deg, var(--h-primary) 0%, var(--h-primary-dark) 100%);
  box-shadow: 0 4px 28px rgba(0,0,0,.2);
}

/* Top info row */
.hdr-bold .hdr-top { border-bottom: 1px solid rgba(255,255,255,.13) }
.hdr-bold .hdr-top .hdr-container { min-height: 46px; gap: 14px; flex-wrap: nowrap; overflow: hidden; padding-top: 6px; padding-bottom: 6px }
.hdr-bold .hdr-top-spacer { flex: 1 }
.hdr-bold .hdr-top-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity .18s;
}
.hdr-bold .hdr-top-phone:hover { opacity: .8 }

/* Logo */
.hdr-bold .hdr-logo {
  font-family: var(--h-font-display);
  font-weight: 800;
  font-size: 26px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 11px;
  white-space: nowrap;
  flex: none;
  text-decoration: none;
  letter-spacing: -.3px;
  transition: opacity .18s;
  margin-right: 6px;
}
.hdr-bold .hdr-logo:hover { opacity: .88 }
.hdr-bold .hdr-logo-mark {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  overflow: hidden;
  flex: none;
  border: 1.5px solid rgba(255,255,255,.24);
}
.hdr-bold .hdr-logo-img { width: 100%; height: 44px; object-fit: contain; border-radius: 12px }
.hdr-bold .hdr-logo-text { letter-spacing: -.2px }

/* Location pill */
.hdr-bold .hdr-location-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 8px 14px;
  color: #fff;
  cursor: pointer;
  transition: background .18s;
  text-align: left;
  font-family: var(--h-font);
}
.hdr-bold .hdr-location-pill:hover { background: rgba(255,255,255,.22) }
.hdr-bold .hdr-location-text { display: flex; flex-direction: column; gap: 1px }
.hdr-bold .hdr-location-city { font-size: 10px; opacity: .72; line-height: 1 }
.hdr-bold .hdr-location-addr { font-size: 13.5px; font-weight: 700; line-height: 1.2; white-space: nowrap }

/* Promo text */
.hdr-bold .hdr-promo {
  font-family: var(--h-font-display);
  font-weight: 800;
  font-size: 21px;
  color: var(--h-accent);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -.2px;
}

/* Lang wrapper */
.hdr-bold .hdr-bold-lang { margin-left: auto; flex: none }

/* Account link */
.hdr-bold .hdr-account-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.9);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  flex: none;
  transition: color .18s;
  white-space: nowrap;
}
.hdr-bold .hdr-account-link:hover { color: #fff }

/* Bar (logo + search row) */
.hdr-bold .hdr-bar .hdr-container { gap: 12px; min-height: 70px; padding-top: 10px; padding-bottom: 14px }

/* Catalog button */
.hdr-bold .hdr-catalog-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--h-accent);
  color: var(--h-accent-ink);
  border: none;
  border-radius: 14px;
  height: 54px;
  padding: 0 24px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  font-family: var(--h-font);
  white-space: nowrap;
  transition: filter .18s, transform .15s;
  flex: none;
}
.hdr-bold .hdr-catalog-btn:hover { filter: brightness(.94); transform: translateY(-1px) }
.hdr-bold .hdr-catalog-btn:active { transform: translateY(0) }
.hdr-bold .hdr-catalog-text { white-space: nowrap }

/* Search */
.hdr-bold .hdr-search-wrap { flex: 1; position: relative; min-width: 0 }
.hdr-bold .hdr-search {
  display: flex;
  align-items: center;
  height: 54px;
  background: rgba(255,255,255,.96);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.8);
}
.hdr-bold .hdr-search-icon { color: #9aa5b4; margin-left: 18px; flex: none }
.hdr-bold .hdr-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--h-font);
  font-size: 15px;
  padding: 0 14px;
  background: transparent;
  color: #16202d;
}
.hdr-bold .hdr-search input::placeholder { color: #9aa5b4 }
.hdr-bold .hdr-search-mic {
  padding: 0 8px;
  color: #b0bac8;
  cursor: pointer;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  transition: color .18s;
  flex: none;
}
.hdr-bold .hdr-search-mic:hover { color: var(--h-primary) }
.hdr-bold .hdr-search-btn {
  flex: none;
  width: 58px;
  height: 100%;
  border: none;
  background: var(--h-accent);
  color: var(--h-accent-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: filter .18s;
}
.hdr-bold .hdr-search-btn:hover { filter: brightness(.94) }
.hdr-bold .hdr-suggest { background: #fff; border-color: rgba(0,0,0,.1); top: calc(100% + 10px) }

/* Action icons */
.hdr-bold .hdr-acts { display: flex; gap: 10px; align-items: center; color: #fff; flex: none }
.hdr-bold .hdr-act { color: rgba(255,255,255,.92) }
.hdr-bold .hdr-act:hover { color: #fff; opacity: 1 }
.hdr-bold .hdr-act-lbl { color: rgba(255,255,255,.85) }
.hdr-bold .hdr-badge { background: #fff; color: var(--h-primary) }

/* Bold mobile toggle: white */
.hdr-bold .hdr-mobile-toggle { color: #fff }
.hdr-bold .hdr-mobile-toggle:hover { background: rgba(255,255,255,.15) }

/* ==========================================================================
   RESPONSIVE — 1024px: hide secondary address block
   ========================================================================== */
@media (max-width: 1100px) {
  .hdr-classic .hdr-contact-addr { display: none }
  .hdr-classic .hdr-main .hdr-container { gap: 16px }

  .hdr-bold .hdr-promo { display: none }
  .hdr-bold .hdr-location-addr { display: none }
  .hdr-bold .hdr-location-city { font-size: 12.5px; opacity: 1 }
}

@media (max-width: 860px) {
  /* Show hamburger */
  .hdr-mobile-toggle { display: inline-flex }

  /* Reduce container padding */
  .hdr-container { padding-left: 16px; padding-right: 16px }

  /* Only the cart button stays in the header on mobile;
     account / wishlist / compare are all accessible via the drawer */
  .hdr-acts .hdr-act:not(.hdr-cart-btn) { display: none !important; }

  /* Modern */
  .hdr-modern .hdr-top { display: none }
  .hdr-modern .hdr-nav-strip { display: none }
  .hdr-modern .hdr-main .hdr-container {
    flex-wrap: wrap;
    align-items: center;
    min-height: 0;
    gap: 0 10px;
    row-gap: 8px;
    padding-top: 10px;
    padding-bottom: 8px;
  }
  .hdr-modern .hdr-logo { flex: 1; min-width: 0 }
  .hdr-modern .hdr-logo-img { max-width: 160px; width: auto !important; height: 40px !important }
  .hdr-modern .hdr-search-wrap { order: 10; flex: 0 0 100%; min-width: 0 }
  .hdr-modern .hdr-search { height: 42px }
  .hdr-modern .hdr-search-btn { height: 34px; padding: 0 14px }
  .hdr-modern .hdr-acts { gap: 4px }
  .hdr-modern .hdr-act-lbl { display: none }

  /* Classic */
  .hdr-classic .hdr-util { display: none }
  .hdr-classic .hdr-nav  { display: none }
  .hdr-classic .hdr-contact-block { display: none }
  .hdr-classic .hdr-main .hdr-container {
    flex-wrap: wrap;
    align-items: center;
    min-height: 0;
    gap: 0 10px;
    row-gap: 8px;
    padding-top: 10px;
    padding-bottom: 8px;
  }
  .hdr-classic .hdr-logo { flex: 1; min-width: 0 }
  .hdr-classic .hdr-logo-img { max-width: 160px; width: auto !important; height: 40px !important }
  .hdr-classic .hdr-search-wrap { order: 10; flex: 0 0 100%; min-width: 0 }
  .hdr-classic .hdr-search { height: 42px }
  .hdr-classic .hdr-search-btn { width: 46px }
  .hdr-classic .hdr-acts { gap: 4px }

  /* Bold */
  .hdr-bold .hdr-top { display: none }
  .hdr-bold .hdr-bar .hdr-container {
    flex-wrap: wrap;
    align-items: center;
    min-height: 0;
    gap: 0 10px;
    row-gap: 8px;
    padding-top: 10px;
    padding-bottom: 8px;
  }
  .hdr-bold .hdr-logo { flex: 1; min-width: 0; font-size: 20px }
  .hdr-bold .hdr-logo-img { max-width: 160px; width: auto !important; height: 38px !important }
  .hdr-bold .hdr-catalog-btn { display: none }
  .hdr-bold .hdr-search-wrap { order: 10; flex: 0 0 100%; min-width: 0 }
  .hdr-bold .hdr-search { height: 46px }
  .hdr-bold .hdr-search-icon { display: none }
  .hdr-bold .hdr-search-btn { width: 46px }
  .hdr-bold .hdr-acts { gap: 4px }
  .hdr-bold .hdr-act-lbl { display: none }
}

@media (max-width: 520px) {
  /* Search is on its own full-width row — no need to collapse the submit button */
  .hdr-classic .hdr-search-btn { width: 46px }
}

/* ==========================================================================
   CART BUTTON — highlighted pill with badge (all header types)
   ========================================================================== */
.hdr-cart-btn.hdr-act {
  flex-direction: row;
  gap: 7px;
  background: var(--h-primary);
  color: #fff !important;
  border-radius: 50px;
  padding: 0 16px 0 13px;
  height: 42px;
  min-width: 56px;
  border: 2px solid transparent;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background .2s, transform .18s cubic-bezier(.4,0,.2,1), box-shadow .2s;
}
.hdr-cart-btn.hdr-act:hover {
  background: var(--h-primary-dark);
  color: #fff !important;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.hdr-cart-btn.hdr-act:active { transform: scale(.97) translateY(0); }

/* Badge inside the pill — inline, not absolute */
.hdr-cart-btn .hdr-badge {
  position: static;
  transform: none;
  background: rgba(255,255,255,.25);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.55);
  font-size: 11px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  line-height: 1;
  top: 0;
  right: 0;
}
/* Hide text label inside the cart button on smaller screens */
.hdr-cart-btn .hdr-act-lbl { display: none }

/* Bounce animation when item added */
@keyframes hdrCartBounce {
  0%   { transform: scale(1) rotate(0); }
  20%  { transform: scale(1.22) rotate(-6deg); }
  45%  { transform: scale(.93) rotate(3deg); }
  70%  { transform: scale(1.07) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
.hdr-cart-btn--bounce { animation: hdrCartBounce .55s cubic-bezier(.4,0,.2,1); }

/* Smooth color glow when item added to wishlist / compare.
   Uses the existing color transition on .hdr-act; JS adds the class then removes it after 3s. */
.hdr-act--glow-wish { color: #ef4444 !important; transition: color .4s ease !important; }
.hdr-act--glow-cmp  { color: #2563eb !important; transition: color .4s ease !important; }

/* ==========================================================================
   MINI-CART DRAWER
   ========================================================================== */

/* Overlay */
.hdr-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.48);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.hdr-cart-overlay.open { opacity: 1; pointer-events: auto; }

/* Drawer */
.hdr-mini-cart {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100vw;
  height: 100dvh;
  height: 100vh;
  background: #fff;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 48px rgba(0,0,0,.18);
  transform: translateX(110%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.hdr-mini-cart.open { transform: translateX(0); }

/* Head */
.hdr-mc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #e5e7eb;
  flex: none;
  background: #fafafa;
}
.hdr-mc-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #111;
}
.hdr-mc-title i { font-size: 22px; color: var(--h-primary, #2563EB); }
.hdr-mc-count {
  background: var(--h-primary, #2563EB);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hdr-mc-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid #e5e7eb;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #6b7280;
  transition: background .15s, color .15s, border-color .15s;
  flex: none;
}
.hdr-mc-close:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }

/* Body */
.hdr-mc-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0;
}

/* Loading */
.hdr-mc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}
.hdr-mc-spinner {
  width: 36px; height: 36px;
  border: 3px solid #e5e7eb;
  border-top-color: var(--h-primary, #2563EB);
  border-radius: 50%;
  animation: hdrMcSpin .7s linear infinite;
}
@keyframes hdrMcSpin { to { transform: rotate(360deg); } }

/* Empty */
.hdr-mc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  text-align: center;
  color: #9ca3af;
}
.hdr-mc-empty i { font-size: 54px; margin-bottom: 14px; color: #d1d5db; display: block; }
.hdr-mc-empty p { margin: 0; font-size: 15px; }

/* Item list */
.hdr-mc-list { list-style: none; margin: 0; padding: 0; }
.hdr-mc-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #f3f4f6;
  animation: hdrMcSlideIn .22s ease;
}
@keyframes hdrMcSlideIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
.hdr-mc-img {
  width: 68px; height: 68px;
  border-radius: 10px;
  overflow: hidden;
  flex: none;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hdr-mc-img img { width: 100%; height: 100%; object-fit: cover; }
.hdr-mc-no-img { font-size: 26px; color: #d1d5db; }
.hdr-mc-info { flex: 1; min-width: 0; padding-top: 2px; }
.hdr-mc-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
  margin-bottom: 4px;
}
.hdr-mc-meta { font-size: 11.5px; color: #9ca3af; margin-bottom: 4px; display: block; }
.hdr-mc-price { font-size: 13px; color: #6b7280; }
.hdr-mc-price b { color: var(--h-primary, #2563EB); font-weight: 700; }
.hdr-mc-remove {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background .15s, color .15s;
  flex: none;
  margin-top: 2px;
}
.hdr-mc-remove:hover { background: #fee2e2; color: #ef4444; }

/* Foot */
.hdr-mc-foot {
  padding: 18px 22px 20px;
  border-top: 1.5px solid #e5e7eb;
  background: #fafafa;
  flex: none;
}
.hdr-mc-subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 14.5px;
  color: #374151;
  font-weight: 500;
}
.hdr-mc-subtotal strong {
  font-size: 22px;
  font-weight: 800;
  color: #111;
}
.hdr-mc-btn-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: var(--h-primary, #2563EB);
  color: #fff;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 10px;
  transition: background .18s, transform .15s, box-shadow .18s;
  border: none;
  cursor: pointer;
}
.hdr-mc-btn-checkout:hover {
  background: var(--h-primary-dark, #1d4ed8);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  text-decoration: none;
}
.hdr-mc-btn-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 20px;
  background: transparent;
  color: var(--h-primary, #2563EB);
  border: 1.5px solid currentColor;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s, color .18s;
}
.hdr-mc-btn-cart:hover {
  background: var(--h-primary, #2563EB);
  color: #fff;
  text-decoration: none;
}

/* Mobile: drawer full width on small screens */
@media (max-width: 480px) {
  .hdr-mini-cart { width: 100vw; border-radius: 0; }
}

/* ==========================================================================
   CITY ADDRESS POPUP  (modern header)
   ========================================================================== */
.hdr-modern .hdr-city-wrap { position: relative; }

.hdr-modern .hdr-city-popup {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 36px rgba(0,0,0,.14);
  padding: 6px 0;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.hdr-modern .hdr-city-popup.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.hdr-modern .hdr-city-popup::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 20px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: -2px -2px 4px rgba(0,0,0,.05);
}
.hdr-modern .hdr-city-popup-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid #f4f4f5;
}
.hdr-modern .hdr-city-popup-row:last-child { border-bottom: none; }
.hdr-modern .hdr-city-popup-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--h-primary-soft, rgba(37,99,235,.08));
  color: var(--h-primary, #2563EB);
  display: grid;
  place-items: center;
  font-size: 15px;
}
.hdr-modern .hdr-city-popup-label {
  font-size: 10px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 3px;
}
.hdr-modern .hdr-city-popup-val {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.45;
}

/* Chevron rotation when open */
.hdr-modern .hdr-city-btn .hdr-chevron,
.hdr-modern .hdr-top-phone .hdr-chevron {
  transition: transform .2s ease, opacity .2s;
}
.hdr-modern .hdr-city-btn[aria-expanded="true"] .hdr-chevron,
.hdr-modern .hdr-phone-toggle[aria-expanded="true"] .hdr-chevron {
  transform: rotate(180deg);
}

/* ==========================================================================
   PHONE DROPDOWN  (modern header)
   ========================================================================== */
.hdr-modern .hdr-phone-wrap { position: relative; }

.hdr-modern .hdr-phone-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.hdr-modern .hdr-phone-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 36px rgba(0,0,0,.14);
  padding: 8px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.hdr-modern .hdr-phone-dropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.hdr-modern .hdr-phone-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 22px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: -2px -2px 4px rgba(0,0,0,.05);
}
.hdr-modern .hdr-phone-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 9px;
  color: #1f2937;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s;
  white-space: nowrap;
}
.hdr-modern .hdr-phone-item:hover { background: var(--h-surface, #f5f7fa); color: var(--h-primary, #2563EB); }
.hdr-modern .hdr-phone-item i { color: var(--h-primary, #2563EB); font-size: 17px; flex: none; }

/* ==========================================================================
   CATALOG MEGA-MENU  (modern header)
   Fully token-driven — adapts to every theme + light/dark header schemes.
   ========================================================================== */

/* Overlay backdrop (behind sticky header, above page content) */
.hdr-mega-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: radial-gradient(120% 120% at 50% 0%, rgba(8,15,30,.30) 0%, rgba(8,15,30,.52) 100%);
  backdrop-filter: blur(3px) saturate(115%);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.hdr-mega-overlay.open { opacity: 1; pointer-events: auto; }

/* Mega panel — fixed to viewport, appears below sticky header */
.hdr-modern .hdr-sticky { overflow: visible; }

.hdr-modern .hdr-mega {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px) scale(.992);
  transform-origin: top center;
  transition: opacity .26s cubic-bezier(.22,.61,.36,1), transform .26s cubic-bezier(.22,.61,.36,1);
}
.hdr-modern .hdr-mega.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.hdr-mega-body {
  position: relative;
  background: var(--h-bg, #fff);
  box-shadow: 0 1px 0 var(--h-line, #e4e8ef),
              0 24px 60px -18px rgba(10,18,40,.32),
              0 8px 24px -16px rgba(10,18,40,.20);
  padding: 22px 0 26px;
  border-radius: 0 0 22px 22px;
}
/* Thin gradient accent hairline at the very top of the panel */
.hdr-mega-body::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--h-primary, #2563EB), var(--h-accent, var(--h-primary, #2563EB)));
  opacity: .9;
}

/* Two-column: categories fill left, banner fixed on right */
.hdr-mega-inner {
  display: flex;
  gap: 26px;
  align-items: stretch;
}

/* Categories: CSS grid, 5 equal columns per row */
.hdr-mega-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex: 1;
  min-width: 0;
  gap: 6px 14px;
  align-items: start;
}

/* Each category column — a soft card that lifts on hover */
.hdr-mega-col {
  min-width: 0;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hdr-mega-col:hover {
  background: color-mix(in srgb, var(--h-surface, #f5f7fa) 70%, transparent);
  border-color: var(--h-line, #e4e8ef);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -16px rgba(10,18,40,.30);
}

.hdr-mega-cat-link {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -.01em;
  color: var(--h-ink, #16202d);
  text-decoration: none;
  padding: 4px 6px 4px 4px;
  border-radius: 12px;
  margin-bottom: 8px;
  transition: color .15s ease;
}
.hdr-mega-cat-link strong { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-mega-col:hover .hdr-mega-cat-link,
.hdr-mega-cat-link:hover { color: var(--h-primary, #2563EB); }

.hdr-mega-cat-img,
.hdr-mega-cat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex: none;
  box-shadow: 0 0 0 1px var(--h-line, #e4e8ef), 0 4px 12px -6px rgba(10,18,40,.25);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.hdr-mega-cat-img {
  object-fit: cover;
  background: var(--h-surface, #f0f0f0);
}
.hdr-mega-cat-icon {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--h-primary, #2563EB) 16%, var(--h-bg, #fff)),
      var(--h-primary-soft, rgba(37,99,235,.08)));
  color: var(--h-primary, #2563EB);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.hdr-mega-col:hover .hdr-mega-cat-img,
.hdr-mega-col:hover .hdr-mega-cat-icon {
  transform: scale(1.06) rotate(-2deg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--h-primary, #2563EB) 40%, transparent),
              0 8px 18px -8px color-mix(in srgb, var(--h-primary, #2563EB) 45%, transparent);
}

/* Sub-category list */
.hdr-mega-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hdr-mega-sub a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--h-muted, #6b7480);
  text-decoration: none;
  border-radius: 8px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s ease, color .15s ease, padding .15s ease;
}
/* Leading dot marker */
.hdr-mega-sub a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
  background: var(--h-line, #d6dbe4);
  transition: background .15s ease, transform .15s ease;
}
.hdr-mega-sub a:hover {
  background: var(--h-primary-soft, rgba(37,99,235,.1));
  color: var(--h-primary, #2563EB);
  padding-left: 13px;
}
.hdr-mega-sub a:hover::before { background: var(--h-primary, #2563EB); transform: scale(1.4); }

.hdr-mega-more {
  color: var(--h-primary, #2563EB) !important;
  font-weight: 700 !important;
}
.hdr-mega-more::before { background: var(--h-primary, #2563EB) !important; }

/* Banner sidebar */
.hdr-mega-sidebar { align-self: stretch; flex: none; width: 330px; }

/* Live banner */
.hdr-mega-banner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 150px;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  position: relative;
  background: var(--h-surface, #f5f7fa);
  box-shadow: 0 1px 0 var(--h-line, #e4e8ef), 0 14px 34px -20px rgba(10,18,40,.40);
  transition: transform .22s ease, box-shadow .22s ease;
}
.hdr-mega-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px -18px rgba(10,18,40,.45);
}

.hdr-mega-banner-img {
  width: 100%;
  object-fit: cover;
  display: block;
  flex: 1;
  min-height: 0;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.hdr-mega-banner:hover .hdr-mega-banner-img { transform: scale(1.05); }

/* Full type: image fills the block, frosted caption card floats at the bottom */
.hdr-mega-banner--full { justify-content: flex-end; }
.hdr-mega-banner--full .hdr-mega-banner-img {
  position: absolute;
  inset: 0;
  height: 100%;
}
.hdr-mega-banner--full .hdr-mega-banner-body {
  position: relative;
  z-index: 2;
  margin: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  background: rgba(12,16,28,.42);
  backdrop-filter: blur(11px) saturate(150%);
  -webkit-backdrop-filter: blur(11px) saturate(150%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 28px -14px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.12);
  color: #fff;
  transition: transform .25s ease, background .25s ease;
}
.hdr-mega-banner--full:hover .hdr-mega-banner-body {
  transform: translateY(-2px);
  background: rgba(12,16,28,.5);
}

/* Accent bar to the left of the title */
.hdr-mega-banner--full .hdr-mega-banner-title {
  color: #fff;
  font-size: 14px;
  position: relative;
  padding-left: 12px;
}
.hdr-mega-banner--full .hdr-mega-banner-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--h-accent, #ffd400), var(--h-primary, #2563EB));
}
.hdr-mega-banner--full .hdr-mega-banner-sub { color: rgba(255,255,255,.86); padding-left: 12px; }

/* Floating arrow chip — invites the click even when there's no button */
.hdr-mega-banner--full .hdr-mega-banner-body::after {
  content: "\2192";
  position: absolute;
  top: -16px;
  right: 13px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--h-primary, #2563EB);
  color: var(--h-on-primary, #fff);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--h-primary, #2563EB) 70%, rgba(0,0,0,.4));
  transform: translateY(6px) scale(.85);
  opacity: 0;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .22s ease;
}
.hdr-mega-banner--full:hover .hdr-mega-banner-body::after {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.hdr-mega-banner--full .hdr-mega-banner-btn { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; }
.hdr-mega-banner--full:hover .hdr-mega-banner-btn { background: rgba(255,255,255,.3); }

/* Small type: image on top, text below */
.hdr-mega-banner--small { flex-direction: column; }
.hdr-mega-banner--small .hdr-mega-banner-img { flex: 0 0 auto; max-height: 124px; }
.hdr-mega-banner--small .hdr-mega-banner-body { padding: 14px 15px 16px; }
.hdr-mega-banner--small .hdr-mega-banner-title { color: var(--h-ink, #16202d); }
.hdr-mega-banner--small .hdr-mega-banner-sub   { color: var(--h-muted, #6b7480); }
.hdr-mega-banner--small .hdr-mega-banner-btn   { background: var(--h-primary, #2563EB); border-color: transparent; color: var(--h-on-primary, #fff); }
.hdr-mega-banner--small:hover .hdr-mega-banner-btn { background: var(--h-primary-dark, #1d4fbf); }

/* Shared text elements */
.hdr-mega-banner-body { display: flex; flex-direction: column; gap: 5px; }
.hdr-mega-banner-title { font-size: 14px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; margin: 0; }
.hdr-mega-banner-sub   { font-size: 12px; font-weight: 500; line-height: 1.45; margin: 0; opacity: .9; }
.hdr-mega-banner-btn   {
  display: inline-flex;
  align-items: center;
  margin-top: 9px;
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 999px;
  border: 1.5px solid;
  align-self: flex-start;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.hdr-mega-banner:hover .hdr-mega-banner-btn { transform: translateX(2px); }

/* Stub fallback */
.hdr-mega-banner-stub {
  height: 100%;
  min-height: 120px;
  background: var(--h-surface, #f5f7fa);
  border-radius: 18px;
  border: 2px dashed var(--h-line, #e5e7eb);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--h-muted, #9ca3af);
  font-size: 12px;
  font-weight: 600;
}
.hdr-mega-banner-stub i { font-size: 28px; opacity: .4; }
.hdr-mega-banner-stub p { margin: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hdr-modern .hdr-mega,
  .hdr-mega-col,
  .hdr-mega-cat-img,
  .hdr-mega-cat-icon,
  .hdr-mega-banner,
  .hdr-mega-banner-img,
  .hdr-mega-sub a { transition: none !important; }
  .hdr-mega-banner:hover .hdr-mega-banner-img { transform: none; }
}

/* Narrower desktop: fewer columns so cards keep breathing room */
@media (max-width: 1180px) {
  .hdr-mega-categories { grid-template-columns: repeat(3, 1fr); }
  .hdr-mega-sidebar { width: 280px; }
}
@media (max-width: 1000px) {
  .hdr-mega-categories { grid-template-columns: repeat(3, 1fr); }
  .hdr-mega-inner { flex-direction: column; }
  .hdr-mega-sidebar { width: 100%; }
  .hdr-mega-banner { min-height: 140px; }
}

/* Responsive: hide mega on mobile (mobile drawer handles it) */
@media (max-width: 860px) {
  .hdr-modern .hdr-mega { display: none; }
  .hdr-mega-overlay { display: none; }
}

/* ──────────────────────────────────────────────────────────
   Custom Navigation Menu Items  (header_custom_menu setting)
   Each item: .hdr-cmi wrapper → .hdr-cmi-trigger + .hdr-cmi-dropdown
   ─────────────────────────────────────────────────────────── */

/* Wrapper — inline-flex so it sits naturally in any nav strip */
.hdr-cmi {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

/* Trigger — reuses the existing .hdr-strip-link / .hdr-nav-link styles,
   just adds the chevron rotation hook */
.hdr-cmi-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.hdr-cmi-trigger .hdr-chevron {
  transition: transform .22s ease;
  font-size: .7rem;
  opacity: .7;
}
.hdr-cmi.open > .hdr-cmi-trigger .hdr-chevron {
  transform: rotate(-180deg);
}

/* Overlay (shared, one global element) */
.hdr-cmi-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1048;
  background: rgba(10, 18, 40, .35);
  backdrop-filter: blur(1px);
}
.hdr-cmi-overlay.open { display: block; }

/* Dropdown panel — full-viewport-width, fixed below the nav strip */
.hdr-cmi-dropdown {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  /* top is set via JS from the nav strip's getBoundingClientRect().bottom */
  top: 120px;
  z-index: 1049;
  background: var(--h-surface, #fff);
  border-top: 3px solid var(--h-primary, #1f3a8a);
  box-shadow: 0 12px 40px rgba(10, 18, 40, .16);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: cmiSlideIn .18s ease;
}
.hdr-cmi.open > .hdr-cmi-dropdown { display: block; }

@keyframes cmiSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Inner container: reuse hdr-container for consistent width */
.hdr-cmi-inner {
  padding: 0;
}

/* ── Mega-menu content layout (cmid-*) ───────────────────────────────────────
   .cmid-row → .cmid-main (sections stacked) + .cmid-sidebar (banner)
   ─────────────────────────────────────────────────────────────────────────── */

.cmid-row {
  display: flex;
  gap: 28px;
  padding: 24px 0 30px;
  width: 100%;
}
.cmid-main {
  flex: 1 1 0;
  min-width: 0;
}
.cmid-sidebar {
  width: 255px;
  flex: none;
  display: flex;
  flex-direction: column;
}

/* Section: head above links */
.cmid-section {
  margin-bottom: 22px;
}
.cmid-section:last-child { margin-bottom: 0 }

.cmid-section-head {
  display: block;
  font-size: .875rem;
  font-weight: 700;
  color: var(--h-ink, #16202d);
  text-decoration: none;
  padding-bottom: 7px;
  margin-bottom: 10px;
  border-bottom: 2px solid var(--h-primary, #1f3a8a);
  transition: color .12s;
}
.cmid-section-head:hover { color: var(--h-primary, #1f3a8a); }

/* Age sub-header within links grid (e.g. "0-24 місяці" in shoe/pj sections) */
.cmid-age-head {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--h-muted, #8a95a3);
  padding: 2px 0;
  text-decoration: none;
  break-before: column;
  break-after: avoid;
  pointer-events: none;
}

/* Links grid */
.cmid-links {
  columns: 5;
  column-gap: 18px;
}
.cmid-links-3 { columns: 3; }
.cmid-links-4 { columns: 4; }

.cmid-link {
  display: block;
  font-size: .8rem;
  line-height: 1.9;
  color: var(--h-ink, #16202d);
  text-decoration: none;
  break-inside: avoid;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 8px;
  border-left: 2px solid transparent;
  transition: color .11s, border-color .11s;
}
.cmid-link:hover {
  color: var(--h-primary, #1f3a8a);
  border-left-color: var(--h-primary, #1f3a8a);
}

/* Sidebar banner */
.cmid-banner {
  border-radius: 10px;
  padding: 22px 18px 26px;
  background: var(--h-primary, #1f3a8a);
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.cmid-banner img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 14px;
  object-fit: cover;
  max-height: 180px;
}
.cmid-banner-title {
  font-size: .9375rem;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.3;
  color: #fff;
}
.cmid-banner-text {
  font-size: .75rem;
  opacity: .88;
  margin: 0 0 16px;
  line-height: 1.45;
  color: #fff;
}
.cmid-banner-btn {
  display: inline-block;
  background: rgba(255,255,255,.18);
  color: #fff;
  padding: 7px 20px;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.35);
  transition: background .15s;
  margin-top: auto;
}
.cmid-banner-btn:hover {
  background: rgba(255,255,255,.32);
  color: #fff;
  text-decoration: none;
}

/* Mobile section head in drawer */
.hdr-drawer-cmi-body .cmid-m-head {
  font-weight: 700;
  font-size: .8rem;
  color: var(--h-primary, #1f3a8a) !important;
  padding: 10px 0 4px !important;
  border-bottom: none !important;
  margin-top: 4px;
}
.hdr-drawer-cmi-body .cmid-m-head:first-child { padding-top: 2px !important; }

/* Bold header custom menu strip */
.hdr-cmi-strip {
  background: var(--h-surface, #f5f7fa);
  border-top: 1px solid var(--h-line, #e4e8ef);
}
.hdr-cmi-strip .hdr-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 44px;
}

/* Mobile drawer: custom menu items */
.hdr-drawer-cmi-section {
  padding: 4px 0;
}
.hdr-drawer-cmi-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--h-ink, #16202d);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.hdr-drawer-cmi-toggle a {
  color: inherit;
  text-decoration: none;
  flex: 1;
}
.hdr-drawer-cmi-toggle .hdr-chevron {
  transition: transform .2s;
  font-size: .7rem;
  opacity: .6;
}
.hdr-drawer-cmi-section.open .hdr-drawer-cmi-toggle .hdr-chevron {
  transform: rotate(-180deg);
}
.hdr-drawer-cmi-body {
  display: none;
  padding: 4px 20px 12px;
  font-size: .84rem;
  color: var(--h-ink, #16202d);
}
.hdr-drawer-cmi-section.open .hdr-drawer-cmi-body { display: block; }
/* Nested links inside mobile custom menu HTML */
.hdr-drawer-cmi-body a {
  display: block;
  padding: 5px 0;
  color: var(--h-ink, #16202d);
  text-decoration: none;
  border-bottom: 1px solid var(--h-line, #e4e8ef);
}
.hdr-drawer-cmi-body a:last-child { border-bottom: none; }
.hdr-drawer-cmi-body a:hover { color: var(--h-primary, #1f3a8a); }

/* Hide desktop dropdown on mobile */
@media (max-width: 860px) {
  .hdr-cmi-dropdown,
  .hdr-cmi-overlay { display: none !important; }
}

/* ══════════════ Voice search (VoiceSearch module) ══════════════ */
.hdr-search-mic {
  padding: 0 8px;
  color: #9aa5b4;
  cursor: pointer;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  transition: color .18s;
  flex: none;
  position: relative;
}
.hdr-search-mic:hover { color: var(--h-primary, #333) }
.hdr-search-mic .hdr-icon { font-size: 18px }

/* Listening state: pulsing halo around the mic */
.hdr-search-mic.voice-listening { color: #e11d48 }
.hdr-search-mic.voice-listening::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: rgba(225, 29, 72, .14);
  animation: voicePulse 1.2s ease-out infinite;
}
.hdr-search-mic.voice-processing { opacity: .55; pointer-events: none }

@keyframes voicePulse {
  0%   { transform: scale(.7); opacity: .9 }
  100% { transform: scale(1.5); opacity: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .hdr-search-mic.voice-listening::before { animation: none }
}

/* "How I understood you" block on the search results page */
.voice-search-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 20px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(125, 135, 155, .08);
  font-size: 14px;
}
.voice-search-summary .vss-heard { display: inline-flex; align-items: center; gap: 6px; opacity: .75 }
.voice-search-summary .vss-filters { display: inline-flex; flex-wrap: wrap; gap: 8px }
.voice-search-summary .vss-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(125, 135, 155, .14);
  font-size: 13px;
  white-space: nowrap;
}
.voice-search-summary .vss-remove {
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  opacity: .55;
  color: inherit;
}
.voice-search-summary .vss-remove:hover { opacity: 1 }