/* =========================================================
   EUROTRON HEADER
   Save as /wp-content/themes/YOUR-THEME/css/ei-header.css
   (loaded automatically by inc/ei-menu.php)

   Everything is scoped to .ei-* classes so it won't affect
   the rest of the theme.
   ========================================================= */

:root {
  --ei-green: #51b124;
  --ei-green-dark: #428f1d;
  --ei-green-tint: #eef7e9;
  --ei-black: #0d0f0e;
  --ei-ink: #1b1e1c;
  --ei-text: #3a3f3c;
  --ei-muted: #6b726e;
  --ei-line: #e7eae8;
  --ei-surface: #f5f7f6;
  --ei-radius: 8px;
  --ei-wrap: 1320px;
  --ei-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Scoped resets (protects against theme styles) ---------- */
.ei-topbar, .ei-header, .ei-drawer {
  font-family: var(--ei-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ei-text);
  -webkit-font-smoothing: antialiased;
}
.ei-topbar *, .ei-header *, .ei-drawer *,
.ei-topbar *::before, .ei-header *::before, .ei-drawer *::before,
.ei-topbar *::after, .ei-header *::after, .ei-drawer *::after { box-sizing: border-box; }
.ei-header ul, .ei-drawer ul { list-style: none; margin: 0; padding: 0; }
.ei-header li, .ei-drawer li { margin: 0; padding: 0; }
.ei-header p, .ei-drawer p { margin: 0; }
.ei-topbar a, .ei-header a, .ei-drawer a { color: inherit; text-decoration: none; }
.ei-header button, .ei-drawer button {
  font-family: inherit; font-size: inherit; line-height: inherit;
  cursor: pointer; border: 0; background: none; color: inherit;
  margin: 0; padding: 0; box-shadow: none; text-transform: none; letter-spacing: normal;
}
.ei-header img, .ei-drawer img { max-width: 100%; display: block; }
.ei-header input { font-family: inherit; }

.ei-wrap { max-width: var(--ei-wrap); margin: 0 auto; padding: 0 24px; }
.ei-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.ei-i { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.ei-lock { overflow: hidden; }

/* ---------- Top bar ---------- */
.ei-topbar { background: var(--ei-black); color: #c9cecb; font-size: 13px; }
.ei-topbar .ei-wrap { display: flex; align-items: center; justify-content: space-between; height: 40px; gap: 16px; }
.ei-topbar__group { display: flex; gap: 24px; align-items: center; }
.ei-topbar a, .ei-topbar span { display: inline-flex; align-items: center; gap: 7px; }
.ei-topbar a { transition: color .2s; }
.ei-topbar a:hover { color: #fff; }
.ei-topbar svg.ei-i { width: 15px; height: 15px; color: var(--ei-green); }
.ei-topbar .ei-topbar__cta { color: #fff; font-weight: 600; }

/* ---------- Header ---------- */
.ei-header { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 1px 0 var(--ei-line); }
.admin-bar .ei-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ei-header { top: 0; } }
.ei-header.is-scrolled { box-shadow: 0 1px 0 var(--ei-line), 0 8px 24px rgba(13,15,14,.06); }
.ei-header__main { position: relative; z-index: 3; }
.ei-header__main > .ei-wrap { display: flex; align-items: center; gap: 32px; height: 84px; }
.ei-logo { flex-shrink: 0; }
.ei-logo img { height: 44px; width: auto; object-fit: contain; }

/* ---------- Search ---------- */
.ei-search { flex: 1; max-width: 620px; position: relative; z-index: 5; margin: 0; }
.ei-search__field { display: flex; align-items: center; background: var(--ei-surface); border-radius: 10px; height: 50px; padding: 0 6px 0 16px; transition: box-shadow .2s, background .2s; }
.ei-search__field:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--ei-green); }
.ei-search__field svg.ei-i { color: var(--ei-muted); }
.ei-header .ei-search input[type="search"] {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 12px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0;
  font-size: 15px; color: var(--ei-ink); -webkit-appearance: none; appearance: none;
}
.ei-search input::-webkit-search-cancel-button { display: none; }
.ei-header .ei-search__go { height: 38px; padding: 0 18px; border-radius: 7px; background: var(--ei-black); color: #fff; font-weight: 600; font-size: 13.5px; transition: background .2s; }
.ei-header .ei-search__go:hover { background: var(--ei-green); }

.ei-search__panel { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--ei-line), 0 20px 48px rgba(13,15,14,.14); padding: 8px; display: none; max-height: 70vh; overflow: auto; }
.ei-search__panel.is-open { display: block; }
.ei-search__label { font-size: 12px; font-weight: 600; color: var(--ei-muted); padding: 8px 12px 4px; }
.ei-search__item { display: flex; align-items: center; gap: 16px; padding: 10px 12px; border-radius: 8px; }
.ei-search__item:hover, .ei-search__item.is-active { background: var(--ei-surface); }
.ei-search__name { font-weight: 600; color: var(--ei-ink); font-size: 14px; }
.ei-search__name mark, .ei-search__meta mark { background: none; color: var(--ei-green-dark); padding: 0; }
.ei-search__meta { font-size: 12.5px; color: var(--ei-muted); }
.ei-search__price { margin-left: auto; font-weight: 600; color: var(--ei-ink); font-size: 14px; white-space: nowrap; }
.ei-search__empty { padding: 22px 12px; text-align: center; color: var(--ei-muted); font-size: 14px; }
.ei-search__empty a { color: var(--ei-green-dark); font-weight: 600; }
.ei-search__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 10px; }
.ei-header .ei-chip { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--ei-surface); color: var(--ei-ink); transition: background .2s, color .2s; }
.ei-header .ei-chip:hover, .ei-header .ei-chip.is-active { background: var(--ei-green-tint); color: var(--ei-green-dark); }
.ei-chip mark { background: none; color: inherit; font-weight: 700; padding: 0; }
.ei-search__all { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; padding: 12px; border-top: 1px solid var(--ei-line); border-radius: 0 0 8px 8px; font-weight: 600; font-size: 14px; color: var(--ei-green-dark); }
.ei-search__all:hover, .ei-search__all.is-active { background: var(--ei-surface); }

/* ---------- Account / basket ---------- */
.ei-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ei-action { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; transition: background .2s; position: relative; }
.ei-action:hover { background: var(--ei-surface); }
.ei-action svg.ei-i { width: 22px; height: 22px; color: var(--ei-ink); }
.ei-action__txt { display: flex; flex-direction: column; line-height: 1.25; }
.ei-action__txt small { font-size: 12px; color: var(--ei-muted); }
.ei-action__txt strong { font-size: 14px; color: var(--ei-ink); font-weight: 600; }
.ei-action__txt strong .woocommerce-Price-amount { font: inherit; color: inherit; }
.ei-badge { position: absolute; top: 2px; left: 26px; background: var(--ei-green); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; min-width: 19px; height: 19px; border-radius: 999px; display: grid; place-items: center; padding: 0 5px; box-shadow: 0 0 0 2px #fff; }
.ei-badge[hidden] { display: none; }
.ei-header .ei-burger { display: none; }

/* ---------- Primary navigation ---------- */
.ei-nav { border-top: 1px solid var(--ei-line); position: relative; z-index: 2; }
.ei-nav > .ei-wrap { display: flex; align-items: center; height: 54px; }
.ei-nav__list { display: flex; height: 100%; }
.ei-nav__item { height: 100%; display: flex; align-items: center; }
.ei-nav__link { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 18px; font-weight: 600; font-size: 14.5px; color: var(--ei-ink); position: relative; transition: color .2s; }
.ei-nav__item:first-child .ei-nav__link { padding-left: 0; }
.ei-nav__link::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--ei-green); transform: scaleX(0); transition: transform .2s; }
.ei-nav__item:first-child .ei-nav__link::after { left: 0; }
.ei-nav__item:hover > .ei-nav__link,
.ei-nav__item.is-open > .ei-nav__link,
.ei-nav__item.current > .ei-nav__link { color: var(--ei-green-dark); }
.ei-nav__item:hover > .ei-nav__link::after,
.ei-nav__item.is-open > .ei-nav__link::after { transform: scaleX(1); }
.ei-nav__link svg.ei-i { width: 14px; height: 14px; transition: transform .2s; }
.ei-nav__item.is-open > .ei-nav__link svg.ei-i { transform: rotate(180deg); }
.ei-nav__aside { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 13.5px; color: var(--ei-muted); }
.ei-nav__aside span { display: inline-flex; align-items: center; gap: 7px; }
.ei-nav__aside svg.ei-i { width: 16px; height: 16px; color: var(--ei-green); }

/* ---------- Mega menu ---------- */
.ei-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; background: #fff; border-top: 1px solid var(--ei-line); box-shadow: 0 24px 48px rgba(13,15,14,.10); opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s; max-height: calc(100vh - 200px); overflow-y: auto; }
.ei-nav__item.is-open > .ei-mega { opacity: 1; visibility: visible; }
.ei-mega > .ei-wrap { display: block; height: auto; padding-top: 32px; padding-bottom: 28px; }
.ei-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.ei-mega__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px; }
.ei-mega__cols--3 { grid-template-columns: repeat(3, 1fr); gap: 8px 32px; }
.ei-mega__title { display: block; font-weight: 700; font-size: 14.5px; color: var(--ei-ink); padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--ei-line); transition: color .2s; }
a.ei-mega__title:hover { color: var(--ei-green-dark); }
.ei-mega__list li a { display: block; padding: 6px 0; font-size: 14px; color: var(--ei-text); transition: color .15s, transform .15s; }
.ei-mega__list li a:hover { color: var(--ei-green-dark); transform: translateX(3px); }
.ei-mega__list .ei-mega__all a { font-weight: 600; color: var(--ei-green-dark); display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.ei-mega__list .ei-mega__all svg.ei-i { width: 14px; height: 14px; }
.ei-mega__desc { display: block; font-size: 12.5px; color: var(--ei-muted); line-height: 1.45; margin-top: 2px; }
.ei-mega__list--desc li a { padding: 9px 0; }
.ei-mega__list--desc li a strong { font-weight: 600; color: var(--ei-ink); }
.ei-mega__list--desc li a:hover strong { color: var(--ei-green-dark); }
.ei-mega__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--ei-line); font-size: 14px; flex-wrap: wrap; }
.ei-mega__bar ul { display: flex; gap: 28px; flex-wrap: wrap; }
.ei-mega__bar a { font-weight: 600; color: var(--ei-ink); display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.ei-mega__bar a:hover { color: var(--ei-green-dark); }
.ei-mega__bar svg.ei-i { width: 16px; height: 16px; color: var(--ei-green); }
.ei-mega__bar p { color: var(--ei-muted); }

/* ---------- Overlay ---------- */
.ei-overlay { position: fixed; inset: 0; background: rgba(13,15,14,.3); opacity: 0; visibility: hidden; transition: .2s; z-index: 900; }
.ei-overlay.is-open { opacity: 1; visibility: visible; }

/* ---------- Mobile drawer ---------- */
.ei-drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(380px, 88vw); background: #fff; z-index: 100001; transform: translateX(-100%); visibility: hidden; transition: transform .3s, visibility .3s; display: flex; flex-direction: column; }
.ei-drawer.is-open { transform: none; visibility: visible; }
.ei-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--ei-line); }
.ei-drawer__head img { height: 34px; width: auto; }
.ei-drawer__body { overflow: auto; padding: 8px 20px; flex: 1; }
.ei-drawer__body > ul > li { border-bottom: 1px solid var(--ei-line); }
.ei-drawer summary, .ei-drawer__link { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 15px 0; font-weight: 600; color: var(--ei-ink); cursor: pointer; }
.ei-drawer summary::-webkit-details-marker { display: none; }
.ei-drawer summary svg { transition: transform .2s; }
.ei-drawer details[open] summary svg { transform: rotate(180deg); }
.ei-drawer details ul { padding: 0 0 12px 12px; }
.ei-drawer details li a { display: block; padding: 8px 0; color: var(--ei-text); font-size: 14.5px; }
.ei-drawer__foot { padding: 20px; background: var(--ei-surface); display: grid; gap: 12px; font-size: 14px; }
.ei-drawer__foot a { display: flex; gap: 10px; align-items: center; color: var(--ei-ink); font-weight: 600; }
.ei-drawer__foot svg.ei-i { color: var(--ei-green); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .ei-action__txt { display: none; }
  .ei-nav__aside { display: none; }
  .ei-mega__cols--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .ei-topbar .ei-topbar__hours { display: none; }
  .ei-nav { display: none; }
  .ei-header .ei-burger { display: flex; }
  .ei-header__main > .ei-wrap { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; gap: 12px 16px; }
  .ei-logo img { height: 36px; }
  .ei-search { order: 3; flex-basis: 100%; max-width: none; }
  .ei-header .ei-search input[type="search"] { font-size: 16px; } /* stops iOS zooming on focus */
}
@media (max-width: 620px) {
  .ei-wrap { padding: 0 16px; }
  .ei-topbar__group:last-child { display: none; }
  .ei-topbar__email span { display: none; }
  .ei-header .ei-search__go { display: none; }
}