/*
* css/site-header.css - THE header for every customer page. (25 Sep 2026)
* ==========================================================================
* Paired with js/site-header.js, which writes the markup into
*
* The look is index.html's header, which is the standard. Before this there
* were five header designs and four copies of the header CSS (storefront.css,
* policy.css, loginpage.html, global.css); a page moved onto this file drops
* its copy.
*
* WHY EVERYTHING IS UNDER #siteHeader / #ehDrawer, WITH eh- CLASSES
* The pages still carry their own stylesheets, full of `header {…}`, `.nav`,
* `.logo`, `.btn`, `#accountMenu` rules written for their old headers. The
* header is a , not a , and every class here is
* prefixed, so none of those rules can reach it - whatever page it lands on,
* it looks the same. Edit HERE, never in a page.
*
* DARK MODE follows js/theme.js, which sets data-theme="dark" on .
*/
#siteHeader, #ehDrawer {
--eh-ink:#0e1620; --eh-ink-2:#1b2733; --eh-paper:#fff; --eh-soft:#f4f7f8;
--eh-cyan:#00a9e0; --eh-cyan-deep:#0079a6; --eh-cyan-wash:#e7f6fc;
--eh-orange:#ff8c00; --eh-orange-deep:#ea6c0a;
--eh-line:#dde4e8; --eh-line-strong:#c4cfd5; --eh-muted:#5d6c76;
--eh-red:#dc3545; --eh-admin:#d86c0a;
--eh-bar:rgba(255,255,255,.88);
--eh-disp:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
--eh-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-theme="dark"] #siteHeader, html[data-theme="dark"] #ehDrawer {
--eh-ink:#e8edf2; --eh-ink-2:#c3cdd7; --eh-paper:#161e29; --eh-soft:#10171f;
--eh-cyan-deep:#3bbdeb; --eh-cyan-wash:#0b2632;
--eh-line:#28323e; --eh-line-strong:#3a4651; --eh-muted:#97a4af;
--eh-red:#ff7b86; --eh-admin:#ffa24d;
--eh-bar:rgba(12,18,25,.88);
}
/* ── The bar ─────────────────────────────────────────────────────────────── */
#siteHeader {
position:sticky; top:0; z-index:50; /* index's value: modals (z 1000+) must still cover it */
display:block; margin:0; padding:0; height:auto; min-height:75px;
background:var(--eh-bar); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
border-bottom:1px solid var(--eh-line);
font-family:var(--eh-body); color:var(--eh-ink); line-height:1.4;
box-shadow:none; text-align:left;
}
#siteHeader *, #ehDrawer * { box-sizing:border-box; }
#siteHeader [hidden], #ehDrawer[hidden], #ehDrawer [hidden], #ehDrawerBack[hidden] { display:none !important; }
#siteHeader a, #ehDrawer a { text-decoration:none; color:inherit; }
#siteHeader button, #ehDrawer button { font:inherit; margin:0; }
#siteHeader svg, #ehDrawer svg { display:block; flex:none; }
#siteHeader img, #ehDrawer img { display:block; max-width:none; }
#siteHeader .eh-bar { display:flex; align-items:center; gap:28px; height:74px; padding:0 34px; }
#siteHeader .eh-logo { flex:none; display:block; }
#siteHeader .eh-logo img { height:55px; width:auto; }
#siteHeader .eh-links { display:flex; gap:26px; margin:0 0 0 14px; padding:0; }
#siteHeader .eh-links a {
position:relative; padding:6px 0; white-space:nowrap;
font-family:var(--eh-body); font-size:14.5px; font-weight:500; color:var(--eh-ink-2);
}
#siteHeader .eh-links a:hover { color:var(--eh-cyan-deep); }
#siteHeader .eh-links a::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--eh-orange); transition:width .2s; }
#siteHeader .eh-links a:hover::after, #siteHeader .eh-links a[aria-current="page"]::after { width:100%; }
#siteHeader .eh-links a[aria-current="page"] { color:var(--eh-ink); }
#siteHeader .eh-right { margin-left:auto; display:flex; align-items:center; gap:9px; }
/* Buttons - index's .hbtn, one for one */
#siteHeader .eh-btn {
position:relative; display:inline-flex; align-items:center; gap:7px; height:40px;
padding:0 14px; border-radius:9px; border:1.5px solid transparent; cursor:pointer;
font-family:var(--eh-disp); font-weight:700; font-size:13.5px; line-height:1; white-space:nowrap;
background:var(--eh-paper); color:var(--eh-ink);
transition:background .15s,border-color .15s,color .15s,transform .12s;
}
#siteHeader .eh-btn:hover { transform:translateY(-1px); }
#siteHeader .eh-btn:focus-visible, #siteHeader .eh-avatar:focus-visible, #siteHeader .eh-burger:focus-visible,
#ehDrawer a:focus-visible, #ehDrawer button:focus-visible, #siteHeader .eh-menu a:focus-visible, #siteHeader .eh-menu button:focus-visible {
outline:3px solid var(--eh-orange); outline-offset:2px;
}
#siteHeader .eh-btn svg { width:16px; height:16px; }
#siteHeader .eh-design { background:var(--eh-orange); border-color:var(--eh-orange); color:#fff; box-shadow:0 4px 12px rgba(255,140,0,.28); }
#siteHeader .eh-design:hover { background:var(--eh-orange-deep); border-color:var(--eh-orange-deep); }
#siteHeader .eh-wish { border-color:#f4b8c6; color:#e74c6b; padding:0 11px; }
#siteHeader .eh-wish:hover { border-color:#e74c6b; background:#fff5f7; }
html[data-theme="dark"] #siteHeader .eh-wish:hover { background:rgba(231,76,107,.14); }
#siteHeader .eh-wish svg { fill:#e74c6b; }
#siteHeader .eh-cart { background:var(--eh-cyan); border-color:var(--eh-cyan); color:#fff; }
#siteHeader .eh-cart:hover { background:#0079a6; border-color:#0079a6; }
#siteHeader .eh-contact, #siteHeader .eh-login, #siteHeader .eh-theme { border-color:var(--eh-line-strong); }
#siteHeader .eh-contact:hover, #siteHeader .eh-login:hover, #siteHeader .eh-theme:hover { border-color:var(--eh-cyan); color:var(--eh-cyan-deep); }
#siteHeader .eh-theme { padding:0 11px; }
#siteHeader .eh-theme svg, #siteHeader .eh-login svg { width:17px; height:17px; }
#siteHeader .eh-badge {
min-width:17px; height:17px; padding:0 4px; border-radius:9px; display:inline-grid; place-items:center;
font:700 10px/1 var(--eh-body); background:var(--eh-orange); color:#fff;
}
#siteHeader .eh-cart .eh-badge { background:#fff; color:#0079a6; }
#siteHeader .eh-wish .eh-badge { position:absolute; top:-6px; right:-6px; background:#e74c6b; color:#fff; }
/* Avatar + its menu */
#siteHeader .eh-acct { position:relative; flex:none; }
#siteHeader .eh-avatar {
width:40px; height:40px; padding:0; border-radius:50%; overflow:hidden; cursor:pointer;
border:2px solid var(--eh-line); background:var(--eh-ink); display:grid; place-items:center;
transition:transform .12s, border-color .15s;
}
#siteHeader .eh-avatar:hover, #siteHeader .eh-avatar[aria-expanded="true"] { transform:translateY(-1px); border-color:var(--eh-cyan); }
#siteHeader .eh-avatar img { width:100%; height:100%; object-fit:cover; }
#siteHeader .eh-menu {
position:absolute; top:calc(100% + 8px); right:0; width:264px; max-height:calc(100vh - 96px); overflow-y:auto;
padding:6px; border-radius:12px; background:var(--eh-paper); border:1px solid var(--eh-line);
box-shadow:0 12px 32px rgba(14,22,32,.16); z-index:950;
}
html[data-theme="dark"] #siteHeader .eh-menu { box-shadow:0 12px 32px rgba(0,0,0,.5); }
/* ── Menu rows: shared by the avatar menu and the phone drawer ───────────── */
#siteHeader .eh-list, #ehDrawer .eh-list { display:flex; flex-direction:column; gap:1px; }
#siteHeader .eh-who, #ehDrawer .eh-who { display:flex; align-items:center; gap:11px; padding:10px 10px 12px; margin-bottom:4px; border-bottom:1px solid var(--eh-line); }
#siteHeader .eh-who img, #ehDrawer .eh-who img { width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--eh-cyan); flex:none; }
#siteHeader .eh-who div, #ehDrawer .eh-who div { min-width:0; }
#siteHeader .eh-who b, #ehDrawer .eh-who b { display:block; font:600 14px/1.3 var(--eh-body); color:var(--eh-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#siteHeader .eh-who small, #ehDrawer .eh-who small { display:block; font:400 12.5px/1.3 var(--eh-body); color:var(--eh-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#siteHeader .eh-item, #ehDrawer .eh-item {
display:flex; align-items:center; gap:11px; width:100%; min-height:40px; padding:9px 11px; border-radius:8px;
font:500 14px/1.25 var(--eh-body); color:var(--eh-ink); background:none; border:0; cursor:pointer; text-align:left;
transition:background .12s,color .12s;
}
#siteHeader .eh-item:hover, #ehDrawer .eh-item:hover { background:var(--eh-soft); color:var(--eh-cyan-deep); }
#siteHeader .eh-item svg, #ehDrawer .eh-item svg { width:17px; height:17px; color:var(--eh-cyan); }
#siteHeader .eh-item[aria-current="page"], #ehDrawer .eh-item[aria-current="page"] { background:var(--eh-cyan-wash); color:var(--eh-cyan-deep); }
#siteHeader .eh-sep, #ehDrawer .eh-sep { height:1px; background:var(--eh-line); margin:5px 4px; }
#siteHeader .eh-cap, #ehDrawer .eh-cap { padding:8px 11px 3px; font:600 10.5px/1 var(--eh-body); letter-spacing:.08em; text-transform:uppercase; color:var(--eh-muted); }
#siteHeader .eh-item.eh-admin, #ehDrawer .eh-item.eh-admin { color:var(--eh-admin); font-weight:600; }
#siteHeader .eh-item.eh-admin svg, #ehDrawer .eh-item.eh-admin svg { color:var(--eh-admin); }
#siteHeader .eh-item.eh-out, #ehDrawer .eh-item.eh-out { color:var(--eh-red); }
#siteHeader .eh-item.eh-out svg, #ehDrawer .eh-item.eh-out svg { color:var(--eh-red); }
#siteHeader .eh-item.eh-out:hover, #ehDrawer .eh-item.eh-out:hover { background:rgba(220,53,69,.08); color:var(--eh-red); }
#siteHeader .eh-item .eh-ext, #ehDrawer .eh-item .eh-ext { margin-left:auto; width:12px; height:12px; opacity:.5; color:currentColor; }
#siteHeader .eh-item .eh-n, #ehDrawer .eh-item .eh-n { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px; display:inline-grid; place-items:center; font:700 11px/1 var(--eh-body); background:var(--eh-cyan-wash); color:var(--eh-cyan-deep); }
/* Dark mode switch row */
#siteHeader .eh-item .eh-sw, #ehDrawer .eh-item .eh-sw { margin-left:auto; width:36px; height:20px; border-radius:10px; background:var(--eh-line-strong); position:relative; transition:background .15s; flex:none; }
#siteHeader .eh-item .eh-sw::after, #ehDrawer .eh-item .eh-sw::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
#siteHeader .eh-item[aria-checked="true"] .eh-sw, #ehDrawer .eh-item[aria-checked="true"] .eh-sw { background:var(--eh-cyan); }
#siteHeader .eh-item[aria-checked="true"] .eh-sw::after, #ehDrawer .eh-item[aria-checked="true"] .eh-sw::after { transform:translateX(16px); }
/* ── Burger + phone drawer ───────────────────────────────────────────────── */
#siteHeader .eh-burger {
display:none; width:40px; height:40px; padding:0; border-radius:9px; cursor:pointer; place-items:center;
background:var(--eh-paper); border:1.5px solid var(--eh-line-strong); color:var(--eh-ink);
}
#siteHeader .eh-burger svg { width:20px; height:20px; }
#ehDrawerBack { position:fixed; inset:0; background:rgba(8,12,18,.45); z-index:1990; opacity:0; transition:opacity .2s; }
#ehDrawerBack.eh-open { opacity:1; }
#ehDrawer {
position:fixed; top:0; right:0; bottom:0; width:304px; max-width:88vw; z-index:2000;
display:flex; flex-direction:column; background:var(--eh-paper); color:var(--eh-ink);
border-left:1px solid var(--eh-line); box-shadow:-8px 0 28px rgba(0,0,0,.18);
font-family:var(--eh-body); transform:translateX(100%); transition:transform .25s ease;
padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
#ehDrawer.eh-open { transform:none; }
#ehDrawer .eh-dhead { display:flex; align-items:center; gap:10px; padding:12px 12px 12px 16px; border-bottom:1px solid var(--eh-line); }
#ehDrawer .eh-dhead .eh-who { flex:1; min-width:0; border:0; margin:0; padding:0; }
#ehDrawer .eh-x { width:36px; height:36px; border-radius:50%; border:0; background:var(--eh-soft); color:var(--eh-ink); cursor:pointer; display:grid; place-items:center; flex:none; }
#ehDrawer .eh-x svg { width:18px; height:18px; }
#ehDrawer .eh-dbody { flex:1; overflow-y:auto; padding:8px; }
#ehDrawer .eh-cta { display:flex; flex-direction:column; gap:8px; padding:4px 4px 10px; }
#ehDrawer .eh-cta a {
flex:none; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; border-radius:9px;
font:700 14px/1 var(--eh-disp); border:1.5px solid var(--eh-line-strong); color:var(--eh-ink); background:var(--eh-paper);
}
#ehDrawer .eh-cta a.eh-cta-main { background:var(--eh-orange); border-color:var(--eh-orange); color:#fff; }
#ehDrawer .eh-cta svg { width:16px; height:16px; }
html.eh-lock, html.eh-lock body { overflow:hidden; }
/* ── Narrower desktops: stop the row from wrapping ───────────────────────── */
@media (max-width:1240px) {
#siteHeader .eh-bar { gap:20px; padding:0 22px; }
#siteHeader .eh-links { gap:20px; margin-left:4px; }
#siteHeader .eh-contact, #siteHeader .eh-theme { display:none; } /* both are in the avatar menu / drawer */
}
@media (max-width:1080px) {
#siteHeader .eh-cart .eh-lbl, #siteHeader .eh-login .eh-lbl { display:none; }
#siteHeader .eh-cart, #siteHeader .eh-login { padding:0 11px; }
}
/* ── Phones and tablets: index's mobile header ───────────────────────────── */
@media (max-width:980px) {
#siteHeader .eh-bar { gap:10px; padding:0 14px; }
#siteHeader .eh-links, #siteHeader .eh-design, #siteHeader .eh-theme, #siteHeader .eh-contact, #siteHeader .eh-acct { display:none; }
#siteHeader .eh-lbl { display:none; }
#siteHeader .eh-btn { padding:0 10px; }
#siteHeader .eh-right { gap:6px; }
#siteHeader .eh-burger { display:inline-grid; }
#siteHeader .eh-logo img { height:42px; }
}
@media (max-width:360px) {
#siteHeader .eh-bar { padding:0 10px; }
#siteHeader .eh-logo img { height:36px; }
}
@media (prefers-reduced-motion:reduce) {
#siteHeader *, #ehDrawer, #ehDrawerBack { transition:none !important; }
}