/* --- Sticky header: keep only the brandbar sticky --- */
.topbar { position: relative; z-index: 1000; }
.brandbar { position: sticky; top: 0; z-index: 9999; }

/* --- Mega menu: apply styles to BOTH class conventions --- */
.brandbar .mega-wrap,
.brandbar .fo-mega { position: relative; display: inline-block; }

.brandbar .mega-panel,
.brandbar .fo-mega-panel {
  display: none;
  position: absolute;
  left: 0; top: 100%;
  min-width: 680px; max-width: 90vw;
  background: #0f5c7a; color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  padding: 16px 20px;
  z-index: 1000;
}

/* Grid inside the panel */
.brandbar .mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.brandbar .mega-panel h4 { margin:.25rem 0 .5rem; font-size:.95rem; letter-spacing:.02em; border-bottom:2px solid rgba(255,255,255,.25); padding-bottom:.25rem; }
.brandbar .mega-panel a { display:block; padding:.2rem 0; color:#fff; opacity:.95; }
.brandbar .mega-panel a:hover { opacity:1; text-decoration: underline; }

/* Desktop fallback: open on hover even if JS is late */
@media (hover:hover){
  .brandbar .mega-wrap:hover .mega-panel,
  .brandbar .fo-mega:hover .fo-mega-panel { display: block; }
}

/* Mobile: show mega content inline */
@media (max-width: 900px){
  .brandbar .mega-panel,
  .brandbar .fo-mega-panel {
    position: static;
    display: block;
    min-width: unset;
    border: 0; border-radius: 0; box-shadow: none;
    background: transparent; padding: 8px 0;
  }

  /* Ensure mobile nav can open/close */
  .brandbar .nav-toggle { display: inline-block; }
  .brandbar .mainmenu { display: none; flex-direction: column; gap: 10px; padding: 10px 0; }
  .brandbar .mainmenu.open { display: flex; }
}

/* Buttons (keep your existing) */
.fo-btn{background:linear-gradient(135deg,#18a2a5,#0e4a4d);color:#fff;padding:.6rem 1rem;border-radius:999px;font-weight:700;display:inline-flex;align-items:center;gap:.4rem}
.fo-btn:hover{filter:brightness(1.05);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.fo-btn-outline{background:transparent;border:2px solid #18a2a5;color:#fff}

/* Optional: product chips / stepper (unchanged) */
.fo-stepper{display:flex;gap:8px;margin:10px 0}
.fo-stepper .dot{width:10px;height:10px;border-radius:999px;background:#1da1a5;opacity:.35}
.fo-stepper .dot.active{opacity:1}
.p-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:.35rem 0 .5rem;font-size:.9rem}
.p-flag{font-size:1rem;line-height:1;display:inline-flex;align-items:center}
.p-origin{opacity:.9}
.p-chip{background:rgba(11,58,60,.08);border:1px solid rgba(11,58,60,.15);color:#0b3a3c;padding:.15rem .45rem;border-radius:999px;font-size:.8rem}
.p-chip.p-fob{font-weight:700;border-color:rgba(24,162,165,.25)}