/* Unified site header — injected on every page by functions/_middleware.js.
   Self-contained (hardcoded colors) so it renders correctly regardless of
   whatever other CSS a given page happens to load.

   Every declaration below carries !important. Reason: dozens of pages
   (and shared files like blog/assets/styles.css, assets/qh-tap.css) still
   ship their own leftover header/nav rules from before this file existed.
   Where those old rules touch a property this file doesn't also pin down,
   the old rule wins by default even with lower specificity — that's how
   the menu button, nav scroll area, and search icon position kept drifting
   page to page. !important here makes this file the true single source of
   truth instead of a "usually wins" one. */

header.topbar,.topbar{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:10000!important;height:82px!important;background:#fff!important;border-bottom:1px solid #E7DED2!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 14px!important;box-sizing:border-box!important}
body{padding-top:82px!important}

.topbar .brand{display:flex!important;align-items:center!important;gap:10px!important;text-decoration:none!important;color:inherit!important;min-width:0!important}
.topbar .brand img{width:58px!important;height:58px!important;border-radius:50%!important;object-fit:cover!important;box-shadow:0 3px 10px rgba(0,0,0,.1)!important;flex:0 0 58px!important}
.topbar .brand b{display:block!important;color:#0B563F!important;font-size:20px!important;line-height:1!important;letter-spacing:-.5px!important;white-space:nowrap!important}
.topbar .brand small{display:block!important;margin-top:6px!important;color:#F06D4F!important;font-size:9px!important;font-weight:900!important;letter-spacing:1.6px!important;text-transform:uppercase!important;white-space:nowrap!important}

.topbar .headRight{display:flex!important;align-items:center!important;gap:2px!important}

.topbar .qhHeadSearch,.topbar .qhHeadCart{position:relative!important;color:#0B563F!important;display:flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;background:none!important;border:0!important;border-radius:0!important;width:38px!important;height:38px!important;padding:0!important;margin:0!important;cursor:pointer!important}
.topbar .qhCartBadge{position:absolute!important;right:0!important;top:0!important;min-width:18px!important;height:18px!important;border-radius:99px!important;background:#F06D4F!important;color:#fff!important;font-size:10px!important;font-weight:900!important;display:grid!important;place-items:center!important;padding:0 4px!important}
.topbar .qhCartBadge[hidden]{display:none!important}

.topbar .menuBtn{border:0!important;border-radius:0!important;background:transparent!important;color:#0B563F!important;font-size:29px!important;line-height:1!important;width:auto!important;height:auto!important;padding:4px!important;margin-left:10px!important;cursor:pointer!important}

.topbar .nav{display:none;position:absolute!important;right:12px!important;top:74px!important;background:#fff!important;border:1px solid #E7DED2!important;border-radius:16px!important;box-shadow:0 10px 28px rgba(16,45,38,.08)!important;padding:8px!important;min-width:225px!important}
.topbar .nav.open{display:block}
.topbar .nav a,.topbar .nav summary{display:block!important;padding:11px 12px!important;text-decoration:none!important;color:#161F26!important;font-weight:850!important;font-size:15px!important;cursor:pointer!important}
.topbar .nav details{border:0!important}
.topbar .servicesMenu{display:flex!important;flex-direction:column!important;padding-left:7px!important}
.topbar .servicesMenu a{font-size:14px!important;color:#3D4750!important;font-weight:700!important;padding:8px 12px!important}

@media(max-width:699px){
  .topbar .nav{min-width:250px!important;max-height:calc(100dvh - 86px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
  .topbar .nav a,.topbar .nav summary{padding:14px!important;font-size:17px!important;line-height:1.25!important}
  .topbar .servicesMenu a{padding:11px 14px!important;font-size:16px!important}
}

@media(min-width:700px){
  .topbar .menuBtn{display:none!important}
  .topbar .nav{display:flex!important;position:static!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;min-width:0!important;max-height:none!important;overflow:visible!important;align-items:center!important;gap:4px!important}
  .topbar .nav a{padding:10px!important}
  .topbar .nav details{position:relative!important}
  .topbar .servicesMenu{display:none!important;position:absolute!important;right:0!important;top:42px!important;width:240px!important;flex-direction:column!important;background:#fff!important;border:1px solid #E7DED2!important;border-radius:14px!important;padding:8px!important;box-shadow:0 10px 28px rgba(16,45,38,.08)!important}
  .topbar .nav details[open] .servicesMenu{display:flex!important}
  .topbar .headRight{gap:10px!important}
}