/* Prevent a blank flash while the shared header component is fetched.
   The component itself remains unchanged; this only reserves the header
   surface immediately so page content never appears before the header. */
div[data-apemart-component="header"]{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:74px;
  min-height:74px;
  z-index:9999;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #e9edf2;
  box-shadow:0 6px 24px rgba(15,23,42,.06);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* ============================================================
   ApeMart.lk — Shared Header V32
   Refined marketplace navigation. Existing component/functionality retained.
============================================================ */
.header{position:fixed;top:0;left:0;width:100%;z-index:9999;background:rgba(255,255,255,.96);border-bottom:1px solid #e9edf2;box-shadow:0 6px 24px rgba(15,23,42,.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.header .container{width:min(1380px,calc(100% - 48px));min-height:74px;margin:auto;padding:10px 0;display:grid;grid-template-columns:245px 1fr 245px;align-items:center;gap:18px}
.logo{display:inline-flex;align-items:center;gap:11px;min-width:0;text-decoration:none;color:#182230}
.logo-mark{width:46px;height:46px;display:grid;place-items:center;flex:0 0 46px;border-radius:14px;background:#fff7ef;border:1px solid #ffe1c7;overflow:hidden;box-shadow:0 4px 12px rgba(255,107,0,.08)}
.logo img{width:39px;height:39px;object-fit:contain;margin:0}
.logo-copy{display:flex;flex-direction:column;line-height:1;min-width:0}.logo-copy #siteName{font-size:21px;font-weight:900;letter-spacing:-.035em;color:#182230}.logo-copy small{font-size:8px;font-weight:800;letter-spacing:.10em;color:#8a94a2;margin-top:6px;text-transform:uppercase;white-space:nowrap}
.navbar{display:flex;align-items:center;justify-content:center;gap:5px}.navbar a{display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border-radius:10px;color:#566273;text-decoration:none;font-size:13px;font-weight:800;transition:.2s}.navbar a i{font-size:12px;color:#9aa4b1}.navbar a:hover{color:#ff6b00;background:#fff5ed}.navbar a:hover i{color:#ff6b00}.navbar a.active{color:#ff6b00;background:#fff5ed}.navbar a.active i{color:#ff6b00}.navbar .nav-post{color:#fff;background:#ff6b00;box-shadow:0 7px 17px rgba(255,107,0,.20);margin-left:5px}.navbar .nav-post i{color:#fff}.navbar .nav-post:hover{color:#fff;background:#e96100}
.header-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.desktop-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.mobile-header-actions{display:none;align-items:center;gap:8px}.notification-icon{position:relative;width:42px!important;height:42px!important;min-width:42px!important;display:inline-flex!important;align-items:center;justify-content:center;padding:0!important;border-radius:12px!important;background:#f7f8fa!important;border:1px solid #e6ebf0!important;color:#526071!important;text-decoration:none!important;transition:.2s}.notification-icon:hover{background:#fff3e9!important;color:#ff6b00!important;border-color:#ffd5b2!important}.notification-count{display:none;position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#ef4444;color:#fff;font-size:9px;font-weight:900;align-items:center;justify-content:center;border:2px solid #fff}.login-btn,.register-btn{min-height:42px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:6px;padding:0 13px!important;border-radius:11px!important;text-decoration:none!important;font-size:11px!important;font-weight:900!important;transition:.2s!important;white-space:nowrap}.login-btn{color:#ff6b00!important;background:#fff7ef!important;border:1px solid #ffd7b4!important}.login-btn:hover{background:#ffefe2!important}.register-btn{color:#fff!important;background:#ff6b00!important;border:1px solid #ff6b00!important;box-shadow:0 6px 16px rgba(255,107,0,.18)}.register-btn:hover{background:#e96100!important}
.header.scrolled{box-shadow:0 8px 28px rgba(15,23,42,.09)}
@media(max-width:1100px){.header .container{width:calc(100% - 32px);grid-template-columns:205px 1fr auto;gap:10px}.logo-copy #siteName{font-size:19px}.navbar{gap:1px}.navbar a{padding:9px 9px;font-size:12px}.navbar a i{display:none}.header-right{gap:6px}}
@media(max-width:768px){
div[data-apemart-component="header"]{height:66px;min-height:66px}
.header{height:66px}
.header .container{width:calc(100% - 24px);height:66px;min-height:66px;padding:0;display:flex;align-items:center;gap:10px}
.logo{flex:1;min-width:0;gap:9px;align-items:center;height:66px}
.logo-mark{width:42px;height:42px;flex:0 0 42px;border-radius:12px}
.logo img{width:36px;height:36px}
.logo-copy{justify-content:center;height:42px}
.logo-copy #siteName{font-size:19px;line-height:1;font-weight:900}
.logo-copy small{font-size:7px;margin-top:4px}
.navbar{display:none}
.desktop-header-actions{display:none}
.mobile-header-actions{display:flex;align-items:center;justify-content:center;gap:10px;height:66px;flex:0 0 auto}
.header-right{height:66px;gap:0;flex:0 0 auto;align-items:center}
.mobile-header-actions .notification-icon,.mobile-profile-icon{width:42px!important;height:42px!important;min-width:42px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;border-radius:12px!important;box-sizing:border-box!important}
.mobile-profile-icon{position:relative;background:#f8fafc;border:1px solid #e3e8ee;color:#536174;text-decoration:none;overflow:hidden;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.mobile-profile-icon i{font-size:18px;line-height:1}
.mobile-profile-icon img{width:100%;height:100%;object-fit:cover;display:block}
.mobile-header-actions .notification-icon{background:#f8fafc!important;border:1px solid #e3e8ee!important;color:#536174!important;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.mobile-header-actions .notification-icon i{font-size:18px;line-height:1}
.mobile-header-actions .notification-count{top:-3px;right:-3px}
}

@media(max-width:390px){
.header .container{width:calc(100% - 18px)}
.logo-copy #siteName{font-size:18px}
.logo-copy small{display:none}
.mobile-header-actions{gap:8px}
.mobile-header-actions .notification-icon,.mobile-profile-icon{width:40px!important;height:40px!important;min-width:40px!important;border-radius:12px!important}
}

/* ============================================================
   GLOBAL MOBILE HEADER — FINAL SHARED PASS
   Applies to the shared header on EVERY public page.
   Desktop styles remain unchanged.
============================================================ */
@media (max-width: 768px){
  .header,
  .home-page .header{
    height:72px!important;
    min-height:72px!important;
    padding:0!important;
    display:block!important;
    box-sizing:border-box!important;
  }

  .header .container,
  .home-page .header .container{
    width:calc(100% - 24px)!important;
    height:72px!important;
    min-height:72px!important;
    margin:0 auto!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    box-sizing:border-box!important;
  }

  .header .logo,
  .home-page .header .logo{
    flex:1 1 auto!important;
    min-width:0!important;
    height:72px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    box-sizing:border-box!important;
  }

  .header .logo-mark,
  .home-page .header .logo-mark{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    flex:0 0 44px!important;
    margin:0!important;
    padding:0!important;
    border-radius:13px!important;
    display:grid!important;
    place-items:center!important;
    box-sizing:border-box!important;
  }

  .header .logo img,
  .home-page .header .logo img{
    width:37px!important;
    height:37px!important;
    margin:0!important;
    display:block!important;
    object-fit:contain!important;
  }

  .header .logo-copy,
  .home-page .header .logo-copy{
    height:auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
  }

  .header .logo-copy #siteName,
  .home-page .header .logo-copy #siteName{
    font-size:19px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:-.04em!important;
    white-space:nowrap!important;
  }

  .header .logo-copy small,
  .home-page .header .logo-copy small{
    display:none!important;
  }

  .header .navbar,
  .home-page .header .navbar,
  .header .desktop-header-actions,
  .home-page .header .desktop-header-actions{
    display:none!important;
  }

  .header .header-right,
  .home-page .header .header-right{
    height:72px!important;
    min-height:72px!important;
    flex:0 0 auto!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    box-sizing:border-box!important;
  }

  .header .mobile-header-actions,
  .home-page .header .mobile-header-actions{
    height:72px!important;
    min-height:72px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    box-sizing:border-box!important;
  }

  .header .mobile-header-actions .notification-icon,
  .header .mobile-profile-icon,
  .home-page .header .mobile-header-actions .notification-icon,
  .home-page .header .mobile-profile-icon{
    position:relative!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    flex:0 0 44px!important;
    margin:0!important;
    padding:0!important;
    border-radius:14px!important;
    box-sizing:border-box!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    align-self:center!important;
    overflow:hidden!important;
  }

  .header .mobile-header-actions .notification-icon i,
  .header .mobile-profile-icon i,
  .home-page .header .mobile-header-actions .notification-icon i,
  .home-page .header .mobile-profile-icon i{
    font-size:20px!important;
    line-height:1!important;
    margin:0!important;
  }

  .header .mobile-profile-icon img,
  .home-page .header .mobile-profile-icon img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    display:block!important;
    margin:0!important;
  }
}

@media (max-width:390px){
  .header .container,
  .home-page .header .container{
    width:calc(100% - 18px)!important;
  }

  .header .logo,
  .home-page .header .logo,
  .header .header-right,
  .home-page .header .header-right,
  .header .mobile-header-actions,
  .home-page .header .mobile-header-actions{
    height:68px!important;
    min-height:68px!important;
  }

  .header,
  .home-page .header{
    height:68px!important;
    min-height:68px!important;
  }

  .header .logo-mark,
  .home-page .header .logo-mark{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    flex-basis:42px!important;
  }

  .header .logo img,
  .home-page .header .logo img{
    width:35px!important;
    height:35px!important;
  }

  .header .logo-copy #siteName,
  .home-page .header .logo-copy #siteName{
    font-size:18px!important;
  }

  .header .mobile-header-actions,
  .home-page .header .mobile-header-actions{
    gap:8px!important;
  }

  .header .mobile-header-actions .notification-icon,
  .header .mobile-profile-icon,
  .home-page .header .mobile-header-actions .notification-icon,
  .home-page .header .mobile-profile-icon{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    flex-basis:42px!important;
    border-radius:13px!important;
  }
}

/* Targeted dark-mode fix: keep the shared Apemart.lk brand name visible. */
body.dark-mode .logo-copy #siteName,
html[data-theme="dark"] .logo-copy #siteName{
  color:#f3f5f7!important;
}


/* V43 — Mobile header search shortcut only. Desktop/header navigation is unchanged. */
.mobile-search-icon{display:none;text-decoration:none}
@media (max-width:768px){
  .mobile-header-actions .mobile-search-icon{
    position:relative;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0!important;
    border-radius:12px!important;
    box-sizing:border-box!important;
    background:#f8fafc!important;
    border:1px solid #e3e8ee!important;
    color:#536174!important;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
    text-decoration:none!important;
  }
  .mobile-header-actions .mobile-search-icon i{font-size:18px;line-height:1}
}
@media (max-width:390px){
  .mobile-header-actions .mobile-search-icon{
    width:40px!important;height:40px!important;min-width:40px!important;
    border-radius:12px!important;
  }
}