/* =========================================
   HEADER LAYOUT (Buyer-ready)
   - Desktop: JS-hover opens mega
   - Mobile: drawer
========================================= */

/* Generic tokens */
:root{
  --border:#e5e7eb;
  --ink:#111827;
  --brand:#2b2c83;
}

/* Announcement (pink) */
.hdr-announce{ background:#ffd9df; color:var(--ink); }
.hdr-announce__row{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:36px; }
.hdr-announce__chev{ background:transparent; border:0; font-size:18px; opacity:.7; }
.hdr-announce__text{ font-size:14px; }

/* Main row */
.hdr-main{ background:#fff; border-bottom:1px solid var(--border); }
.hdr-main__row{ display:flex; align-items:center; gap:14px; min-height:76px; }
.brand{ display:inline-flex; align-items:center; }
.brand__logo{
  width:48px; height:48px; border-radius:999px; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:900;
}
.search{ flex:1; position:relative; display:flex; }
.search input{ width:100%; height:46px; padding:0 44px 0 14px; border:1px solid var(--border); border-radius:999px; }
.search__btn{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  height:34px; width:34px; border-radius:999px; border:1px solid var(--border); background:#fff;
}
.actions{ display:flex; align-items:center; gap:10px; }
.act{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 14px; border-radius:14px; border:1px solid var(--border); background:#fff; }
.act--pill{ background:var(--brand); color:#fff; border-color:transparent; }
.nav-toggle{ display:none; background:var(--brand); color:#fff; border:0; height:40px; padding:0 12px; border-radius:10px; }

/* Primary nav */
.hdr-nav{ background:#fff; border-bottom:1px solid var(--border); position:relative; z-index:40; }
.hdr-nav__row{ display:flex; align-items:center; gap:8px; position:relative; }
.mitem{ position:relative; }
.mitem__btn{ background:transparent; border:0; height:40px; padding:0 10px; border-radius:10px; cursor:pointer; }
.mitem__btn:hover{ background:#ffe4e6; }
.mitem__link{ padding:8px 10px; border-radius:10px; }
.mitem__link:hover{ background:#f3f4f6; }
.mitem__badge .badge{ display:inline-flex; align-items:center; height:28px; padding:0 10px; border-radius:999px; background:var(--brand); color:#fff; font-size:12px; }

/* Panels (MEGA default hidden; JS toggles .open) */
.panel{
  position:absolute; left:0; top:100%; margin-top:8px; background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:0 12px 40px rgba(2,8,23,.12); padding:14px; display:none; z-index:60;
}
.mitem.open > .panel{ display:block; } /* JS sets .open */

/* Mega base (for no-JS/mobile fallback) */
.panel--mega{
  left:50%;
  transform:translateX(-50%);
  width:min(1200px, calc(100vw - 32px)); /* 16px gutter sides */
  padding-inline:16px;
}

/* When JS pins to viewport we add .is-fixed (+ alignment) */
.panel--mega.is-fixed{
  position:fixed !important;
  top:0; left:0; transform:none !important;
  width:auto; max-width:none; z-index:1000; box-sizing:border-box;
}
.panel--mega.is-fixed.align-left{ /* pinned to left gutter */ }
.panel--mega.is-fixed.align-right{ /* pinned to right gutter */ }
.panel--mega.is-fixed.align-center{ /* centered */ }

/* Mega grid (shrink-safe) */
.mega-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(160px,1fr));
  gap:18px;
}
.mega-col a{ display:block; padding:8px 10px; border-radius:8px; color:var(--ink); }
.mega-col a:hover{ background:#f8fafc; }

/* Blue info strip */
.hdr-info{ background:var(--brand); color:#fff; }
.hdr-info__row{ display:flex; align-items:center; gap:12px; min-height:36px; }
.hdr-social{ display:flex; gap:12px; }
.hdr-social a{ width:22px; height:22px; border-radius:999px; display:grid; place-items:center; background:#131857; color:#fff; font-size:12px; }
.hdr-tagline{ flex:1; text-align:center; font-size:14px; opacity:.95; }
.hdr-spacer{ width:22px; }

/* Drawer (mobile) */
.drawer{
  position:fixed; inset:0 0 0 auto; width:min(86%,380px); background:#fff; transform:translateX(100%); transition:.2s ease; z-index:80;
  display:flex; flex-direction:column; border-left:1px solid var(--border);
}
.drawer.open{ transform:none; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); }
.drawer__body{ padding:10px 16px; display:flex; flex-direction:column; gap:4px; overflow:auto; }
.drawer__body a{ padding:10px 8px; border-radius:10px; }
.drawer__body a:hover{ background:#f8fafc; }
.drawer__close{ height:36px; padding:0 10px; border-radius:8px; border:1px solid var(--border); background:#fff; }

/* Responsive */
@media (max-width:1180px){
  .panel--mega{ left:0; right:0; transform:none; width:auto; }
}
@media (max-width:900px){
  .nav-toggle{ display:inline-flex; }
  .search{ display:none; }
  .hdr-nav{ display:none; }   /* mobile uses drawer */
  .hdr-info{ display:none; }
}

/* =========================================
   FIX: Header CLS + reserved space for injection
========================================= */
:root{
  --hdr-h-desktop: 188px; /* 36+76+40+36 */
  --hdr-h-mobile: 112px;  /* 36+76 */
}
.hdr-mount{ min-height:var(--hdr-h-desktop); }
.hdr-mount > .hdr-skeleton{ height:100%; opacity:0; }
@media (max-width:900px){
  .hdr-mount{ min-height:var(--hdr-h-mobile); }
}

/* ================= Footer layout ================= */
.site-footer{
  padding-top: 5%;
}

/* Utilities */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Shell */
.site-footer{
  background:#fff; color:#111827;
  border-top:1px solid #e5e7eb;
}
.site-footer a{ color:inherit; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }

/* Top grid (4 columns on desktop) */
.footer-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr; /* first col a bit wider (logo+copy) */
  gap: clamp(22px, 3.5vw, 48px);
  padding: clamp(32px, 5vw, 64px) 0;
}

/* Column base */
.footer-col{ font-size:15px; line-height:1.6; }
.footer-heading{
  margin: 0 0 10px;
  font-size: 18px; font-weight: 700; color:#0b0b0b;
}

/* Col 1: brand + blurb + socials */
.footer-brand .footer-logo img{
  display:block; width:auto; height:auto;
  max-width: 120px; /* matches screenshot scale */
  margin: 0 0 10px;
}
.footer-blurb{ margin: 6px 0 10px; color:#374151; }

/* Social placeholders (simple, monochrome chips) */
.footer-social{
  list-style:none; display:flex; gap:16px; padding:0; margin:10px 0 0;
}
.footer-social a{ display:inline-flex; align-items:center; justify-content:center; }
.social-ph{
  display:inline-grid; place-items:center;
  width:28px; height:28px; border:1.5px solid #111827; border-radius:999px;
  font-size:12px; font-weight:700; color:#111827;
}

/* Contact block */
.footer-address{ font-style:normal; margin:0 0 10px; }
.footer-meta{ margin:0; color:#374151; }

/* Link lists */
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li + li{ margin-top:8px; }
.footer-links a{ text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }

/* Bottom bar */
.footer-bar{
  border-top:1px solid #e5e7eb;
  padding: 14px 0;
}
.footer-bar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px;
  font-size:14px;
}
.footer-copy{ text-align:center; margin:0 auto; } /* centers text visually */

/* Currency (placeholder button) */
.currency-btn{
  appearance:none; border:1px solid #d1d5db; background:#fff; color:#111827;
  height:36px; padding:0 12px; border-radius:999px; cursor:pointer;
  font-weight:600;
}
.currency-btn:hover{ background:#f9fafb; }

/* ----------------- Responsive ----------------- */
@media (max-width: 1024px){
  .footer-grid{
    grid-template-columns: 1fr 1fr; /* 2 columns tablet */
  }
}
@media (max-width: 600px){
  .footer-grid{
    grid-template-columns: 1fr;     /* 1 column mobile */
    text-align:left;
  }
  .footer-bar__inner{
    flex-direction:column;
  }
  .footer-copy{ margin:0; }
}