/* ELÉNE header, menu and search — shared by every page (generated by deploy/unify_chrome.py from the home page) */
/* These header/drawer icon controls use currentColor SVG strokes and previously relied on
   body's inherited text colour (which used to be --silver everywhere). Now that body's
   default flips to --ink for the new light content zone, they need --silver pinned
   explicitly so the header/drawer — which stay navy — keep their original look. */
.menu-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-inline-start:-10px;color:var(--silver)}
.shell{max-width:1280px;margin:0 auto;padding-inline:var(--s3)}
@media(min-width:900px){.shell{padding-inline:var(--s4)}}

/* Structural label — the site's connective tissue.
   Borrowed from the wordmark's own tracking. */
.label{
  font-family:var(--ui); font-size:11.5px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
html[dir="rtl"] .label{letter-spacing:0;font-size:13px;text-transform:none}

/* ── HEADER — centered wordmark + icon row (Sep 2026 revision). The header used to be a
   left-aligned wordmark with inline "Shop / Lookbook / About" links on desktop and a
   dropdown-style drawer on mobile only. It's now one pattern at every width: a hamburger
   opens a real off-canvas drawer that carries all navigation, and the wordmark sits centered
   and large, per Nesaa-style reference. See SESSION_HANDOFF.md for what moved where. ── */
.hdr{
  position:sticky; top:0; z-index:20; background:var(--ground);
  border-bottom:1px solid var(--line);
}
.hdr-in{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:var(--s3); height:76px;
}
.hdr-in .menu-btn{justify-self:start}
.hdr-in .hdr-end{justify-self:end}
/* Wordmark only. The star never appears here — brand rule. */
.wordmark{
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:700; font-size:26px;
  letter-spacing:.3em; text-indent:.3em; color:var(--silver); white-space:nowrap;
  justify-self:center;
}
@media(min-width:640px){.wordmark{font-size:34px}}
/* Phones: header must fit 360–390px without spilling the bag icon off-screen (bug found 25 Sep
   2026 — moving the EN/AR toggle into this row made it 460px wide at 390px). */
@media(max-width:639px){
  .hdr-in{gap:var(--s1)}
  .wordmark{font-size:21px; letter-spacing:.2em; text-indent:.2em}
  .hdr-end{gap:0}
  .hdr-end .lang{padding:7px 8px}
  .hdr-end .icon-btn{min-width:40px}
}
@media(max-width:379px){.wordmark{font-size:18px;letter-spacing:.14em;text-indent:.14em} .hdr-end .icon-btn{min-width:36px} .hdr-end .lang{padding:7px 6px}}

.hdr-end{display:flex;align-items:center;gap:var(--s1)}
.icon-btn{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  position:relative; color:var(--silver); transition:color .2s var(--ease);
}
.icon-btn:hover{color:var(--bone)}
.bag-count{
  position:absolute; top:9px; inset-inline-end:7px;
  font-size:10px; line-height:1; min-width:14px; text-align:center; color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ── SEARCH — expands under the header when the search icon is pressed. Presentational only
   for now: the form GETs to elene-shop.html?q=..., which is safe (never errors) but the shop
   page doesn't read that query param yet, so it lands on the normal, unfiltered page rather
   than real search results. Flagged in the handoff — needs a real product search once there's
   a catalog to query against. ── */
.search-bar{border-top:1px solid var(--line); background:var(--ground)}
.search-form{display:flex; align-items:center; gap:var(--s2); padding-block:var(--s2)}
.search-input{
  flex:1; background:none; border:0; border-bottom:1px solid var(--line-strong);
  color:var(--silver); font:inherit; font-size:16px; padding-block:10px; min-height:44px;
}
.search-input::placeholder{color:var(--muted)}
.search-submit{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* ── NAV DRAWER — off-canvas, opens from the menu button's own side: left in English, right
   in Arabic. The button already flips sides via grid's logical justify-self:start, so the
   panel flips with it via the RTL override below — keeping the button-to-panel relationship
   intact instead of hard-coding a physical left edge that would disagree with the button in
   RTL. inert (in the HTML) plus aria-hidden keep it out of the tab order and off-screen-reader
   radar while closed, matching the WCAG focus-order work done earlier on this site. ── */
.drawer-backdrop{
  position:fixed; inset:0; z-index:38; background:rgba(20,31,46,.6);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.drawer-backdrop.show{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; inset-block:0; inset-inline-start:0; z-index:41;
  width:min(360px,86vw); background:var(--ground); border-inline-end:1px solid var(--line);
  padding:var(--s3); overflow-y:auto;
  transform:translateX(-100%); transition:transform .35s var(--ease);
}
html[dir="rtl"] .drawer{transform:translateX(100%)}
html[dir="rtl"] .drawer.open{transform:translateX(0)}  /* RTL open state must out-rank the closed rule above (3 Oct 2026 fix) */
.drawer.open{transform:translateX(0)}
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--s3); padding-bottom:var(--s2); border-bottom:1px solid var(--line);
}
.drawer-head .wordmark{font-size:20px; justify-self:auto}
.drawer-link{
  display:flex; align-items:center; min-height:52px; border-bottom:1px solid var(--line);
  font-family:var(--display); font-size:20px; color:var(--silver);
}
.drawer-group{border-bottom:1px solid var(--line)}
.drawer-group summary{
  display:flex; align-items:center; justify-content:space-between; min-height:52px;
  font-family:var(--display); font-size:20px; color:var(--silver); cursor:pointer; list-style:none;
}
.drawer-group summary::-webkit-details-marker{display:none}
.drawer-group summary::after{content:"+"; font-family:var(--ui); font-size:18px; color:var(--muted)}
.drawer-group[open] summary::after{content:"–"}
.drawer-sub{display:grid; padding-inline-start:var(--s2); padding-bottom:var(--s2)}
.drawer-sub a{
  display:flex; align-items:center; min-height:44px;
  font-family:var(--ui); font-size:15px; color:var(--muted);
}
.drawer-sub a:hover{color:var(--silver)}
.drawer-foot{margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line)}
.lang{
  border:1px solid var(--line-strong); padding:7px 14px; min-height:44px; color:var(--silver);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.lang:hover{border-color:var(--muted);color:var(--bone)}
.lang{min-height:44px}
.wordmark{min-height:44px;display:inline-flex;align-items:center}
.acct{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;transition:color .2s var(--ease);color:var(--silver)}
.acct:hover{color:var(--bone)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.drawer a[aria-current="page"]{color:var(--bone);text-decoration:underline;text-underline-offset:4px}
.drawer-foot .drawer-link{border-bottom:0}
.bag-count{position:absolute;top:3px;inset-inline-end:0;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--bone);color:var(--ground);font-size:11.5px;font-weight:500;line-height:19px;text-align:center;font-variant-numeric:tabular-nums;pointer-events:none}
.bag-count[data-n="0"]{display:none}
.bag-count.bump{animation:bagBump .55s cubic-bezier(.22,.61,.36,1)}
@keyframes bagBump{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.bag-count.bump{animation:none}}