/* Two-tier premium header + mega-nav — generated by scripts/gen_mega_nav.py (UX-HEADER2).
   Single source for the whole header: tier-0 utility strip, tier-1 cream brand row (logo + search
   field + utility/cart), tier-2 dark-teal nav band (categories + Account). Linked sitewide. */
:root { --hpp-band:#0A2E36; --hpp-band-hi:#0f5257; --hpp-cream:#FAF7F2; --hpp-teal:#0f5257; }

/* Nuance zoom (desktop only) + sticky whole-header. */
@media (min-width: 901px) { body { zoom: 1.05; } }
.hpp-header { position: sticky; top: 0; z-index: 100; font-family:'Proxima Nova',-apple-system,sans-serif; }

/* ---------- tier 0: utility strip ---------- */
.hpp-topbar { background:#08252c; color:var(--hpp-cream); font-size:11px; letter-spacing:.05em;
  padding:6px 24px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.hpp-topbar a { color:var(--hpp-cream); text-decoration:none; font-weight:600; }
.hpp-tb-left,.hpp-tb-right { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- tier 1: cream brand row ---------- */
.hpp-brandrow { background:var(--hpp-cream); border-bottom:1px solid #ece7dd;
  display:flex; align-items:center; gap:24px; padding:16px 24px; }
.hpp-brand { display:flex; align-items:center; gap:14px; text-decoration:none; flex:none; min-width:0; }
.hpp-brand img { width:56px; height:56px; display:block; }
.hpp-brand .hpp-bt { line-height:1.12; }
.hpp-brand .hpp-bt b { font-size:23px; font-weight:700; letter-spacing:-.01em; color:var(--hpp-band); display:block; white-space:nowrap; }
.hpp-brand .hpp-bt small { font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:#6b7280; display:block; margin-top:3px; }
/* search field (button styled like an input; opens the site-search overlay) */
.hpp-search { flex:1 1 auto; max-width:560px; display:flex; align-items:center; gap:11px;
  background:#fff; border:1.6px solid #d8ddd9; border-radius:12px; padding:12px 16px;
  cursor:text; font:inherit; color:#9aa2a0; text-align:left; }
.hpp-search:hover,.hpp-search:focus-visible { border-color:var(--hpp-teal); }
.hpp-search svg { flex:none; color:var(--hpp-teal); }
.hpp-search-ph { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hpp-brandrow-right { flex:none; display:flex; align-items:center; gap:20px; margin-left:auto; }
.hpp-util { display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--hpp-band);
  font-size:13px; font-weight:600; white-space:nowrap; }
.hpp-util svg { flex:none; }
.hpp-util:hover { color:var(--hpp-teal); }
.hpp-util:first-child svg { color:#e8b039; }         /* review star gold */
.hpp-cart { position:relative; display:inline-flex; align-items:center; color:var(--hpp-band); text-decoration:none; }
.hpp-cart:hover { color:var(--hpp-teal); }
.hpp-cart-count { display:none; position:absolute; top:-6px; right:-7px; background:#c47556; color:#fff;
  font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:8px; text-align:center; line-height:16px; padding:0 3px; }

/* ---------- tier 2: dark-teal nav band ----------
   `.hpp-header .` prefix (0,2,0) OUT-specifies each page's own inline `nav{background:cream;
   position:sticky}` element rule (0,0,1) — otherwise the band shows the page's cream, not our teal. */
.hpp-header .hpp-nav { background:var(--hpp-band); display:flex; align-items:stretch; gap:6px; padding:0 24px; position:static; border:0; }
.hpp-header .hpp-navhome { display:inline-flex; align-items:center; padding:0 14px 0 0; color:var(--hpp-cream); text-decoration:none; }
.hpp-header .hpp-navhome:hover { color:#fff; }
.hpp-header .hpp-links { display:flex; align-items:stretch; gap:2px; flex:1; }
.hpp-header .hpp-links > a, .hpp-header .hpp-mi > a { color:var(--hpp-cream); text-decoration:none; font-weight:600; font-size:14px;
  display:inline-flex; align-items:center; padding:14px 12px; white-space:nowrap; }
.hpp-header .hpp-links > a:hover, .hpp-header .hpp-mi:hover > a, .hpp-header .hpp-mi:focus-within > a { color:#fff; background:rgba(255,255,255,.08); border-radius:8px; }
.hpp-links .hpp-home { display:none; }               /* desktop: home is the icon; this is the mobile hub link */
.hpp-links .hpp-cart, .hpp-searchbtn.hpp-mi-hidden { display:none; }
/* caret */
.hpp-mi { position:relative; display:inline-flex; }
.hpp-mi > a::after { content:""; display:inline-block; flex:none; margin-left:6px; width:6px; height:6px;
  border-right:1.7px solid currentColor; border-bottom:1.7px solid currentColor; transform:rotate(45deg);
  margin-top:-3px; opacity:.65; }
/* dropdown panel (white, opens below the dark band) */
.hpp-mega { display:none; position:absolute; top:100%; left:0; min-width:272px; background:#fff;
  border:1px solid #e5e7eb; border-radius:0 0 14px 14px; padding:10px; margin:0; list-style:none;
  box-shadow:0 22px 48px rgba(10,46,54,.22); z-index:70; }
.hpp-mi:hover > .hpp-mega, .hpp-mi:focus-within > .hpp-mega { display:block; }
.hpp-mi > .hpp-mega::before { content:""; position:absolute; top:-8px; left:0; right:0; height:8px; }
.hpp-mega li { display:block; }
.hpp-mi .hpp-mega a { display:flex; align-items:center; gap:13px; padding:11px 18px; border-radius:9px;
  font-size:14.5px; color:#1f2937; text-decoration:none; white-space:nowrap; font-weight:500; }
.hpp-mi .hpp-mega .hpp-mega-ico { flex:none; color:var(--hpp-teal); opacity:.85; }
.hpp-mi .hpp-mega a:hover, .hpp-mi .hpp-mega a:focus-visible { background:#f2f7f4; color:var(--hpp-teal); }
/* Account pill (cream on the dark band) — right-aligned */
.hpp-mi.hpp-acct { margin-left:auto; align-items:center; }
.hpp-mi.hpp-acct > .hpp-signin { display:inline-flex; align-items:center; gap:8px; background:var(--hpp-cream);
  color:var(--hpp-band); padding:8px 16px; border-radius:999px; font-weight:700; margin:8px 0; }
.hpp-mi.hpp-acct > .hpp-signin::after { border-color:var(--hpp-band); }
.hpp-mi.hpp-acct:hover > .hpp-signin, .hpp-mi.hpp-acct:focus-within > .hpp-signin { background:#fff; color:var(--hpp-teal); }
.hpp-mi.hpp-acct > .hpp-mega { left:auto; right:0; }

/* nav-fit tightening on laptops (the 1.05 zoom makes the band ~90px too wide at 1280–1440) */
@media (min-width:901px) and (max-width:1480px) {
  .hpp-links > a, .hpp-mi > a { padding-left:9px; padding-right:9px; font-size:13px; }
  .hpp-brand .hpp-bt small { display:none; }
  .hpp-util span { display:none; }                   /* Reviews/Delivery become icon-only when tight */
  .hpp-brandrow { gap:16px; }
}
@media (min-width:901px) and (max-width:1180px) {
  .hpp-links > a, .hpp-mi > a { padding-left:7px; padding-right:7px; font-size:12.5px; }
  .hpp-brand img { width:48px; height:48px; }
  .hpp-brand .hpp-bt b { font-size:19px; }
}

/* ---------- mobile: burger + accordion ---------- */
.hpp-burger { display:none; background:none; border:none; cursor:pointer; padding:8px; margin:-8px -4px; }
.hpp-burger span { display:block; width:24px; height:2px; background:var(--hpp-band); margin:5px 0; border-radius:2px; transition:transform .2s,opacity .2s; }
.hpp-mi-chev { display:none; }
@media (max-width:900px) {
  body { width:100%; }
  .hpp-topbar { justify-content:center; padding:7px 16px; }
  .hpp-tb-left { display:none; }
  .hpp-brandrow { gap:12px; padding:11px 16px; }
  .hpp-brand { margin-right:auto; }                    /* push search + cart + burger to the right */
  .hpp-brand img { width:42px; height:42px; }
  .hpp-brand .hpp-bt b { font-size:17px; }
  .hpp-brand .hpp-bt small { display:none; }
  /* mobile: search collapses to a 44px icon-only tap target beside the cart (Pharmica-style) */
  .hpp-search { flex:none; order:2; width:44px; height:44px; max-width:none; padding:0;
    justify-content:center; border-radius:11px; background:#fff; }
  .hpp-search-ph { display:none; }
  .hpp-brandrow-right { order:3; gap:14px; }
  .hpp-util { display:none; }
  .hpp-burger { display:block; }
  /* tier-2 band collapses; its links become the burger dropdown under the whole header
     (`.hpp-header .` prefix to override the now-more-specific desktop nav rules on mobile) */
  .hpp-header .hpp-nav { background:none; padding:0; display:block; position:static; }
  .hpp-header .hpp-navhome { display:none; }
  .hpp-header .hpp-links { display:none; position:absolute; top:100%; left:0; right:0; background:#fff;
    flex-direction:column; align-items:stretch; gap:0; box-shadow:0 16px 32px rgba(10,46,54,.16); border-bottom:1px solid #e5e7eb; }
  .hpp-header.open .hpp-links { display:flex; }
  .hpp-header.open .hpp-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .hpp-header.open .hpp-burger span:nth-child(2){ opacity:0; }
  .hpp-header.open .hpp-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .hpp-header .hpp-links > a, .hpp-header .hpp-mi > a { color:#1f2937; font-weight:600; padding:13px 22px; display:block; white-space:normal; background:none; border-radius:0; }
  .hpp-header .hpp-links > a { border-top:1px solid #f1f3f3; }
  .hpp-header .hpp-links .hpp-home { display:block; }
  .hpp-mi { display:block; position:relative; border-top:1px solid #f1f3f3; }
  .hpp-mi > a::after { display:none; }
  .hpp-mi-chev { display:block; position:absolute; top:0; right:0; width:56px; height:48px;
    background:none; border:none; border-left:1px solid #f1f3f3; cursor:pointer; padding:0; }
  .hpp-mi-chev::before { content:""; position:absolute; top:50%; left:50%; width:9px; height:9px; margin:-6px 0 0 -5px;
    border-right:2px solid var(--hpp-band); border-bottom:2px solid var(--hpp-band); transform:rotate(45deg); transition:transform .2s; }
  .hpp-mi.open > .hpp-mi-chev::before { transform:rotate(-135deg); margin-top:-2px; }
  .hpp-mega { display:block !important; position:static; max-height:0; overflow:hidden; background:#f8faf9;
    border:none; border-radius:0; box-shadow:none; padding:0; margin:0; transition:max-height .28s ease; min-width:0; }
  .hpp-mi.open > .hpp-mega { max-height:700px; }
  .hpp-mi .hpp-mega a { padding:12px 22px 12px 30px; font-size:15px; border-top:1px solid #eef1ef; }
  .hpp-mi.hpp-acct { margin-left:0; }
  .hpp-mi.hpp-acct > .hpp-signin { margin:10px 22px 16px; justify-content:center; }
  a[aria-label="Chat on WhatsApp"],a[aria-label="Request a callback"]{ font-size:0 !important; gap:0 !important; padding:13px !important; border-radius:50% !important; }
}