/* ====== Header base ====== */
.hf-header{position:sticky; top:0; z-index:50; background:#131921; color:#fff; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}
.hf-top{display:grid; grid-template-columns:auto 1fr auto; gap:.75rem; align-items:center; padding:.5rem .75rem}
.hf-logo{color:#fff; text-decoration:none; font-weight:900; font-size:1.15rem}
.hf-logo span{color:#febd69}
.hf-logo small{opacity:.8; font-weight:700}
.hf-burger{background:transparent; border:0; color:#fff; font-size:1.25rem; display:inline-flex; align-items:center}
.hf-location{display:none;gap:.35rem;padding:0;border:0;background:transparent;color:#ddd;font:inherit;text-align:left;text-decoration:none}
.hf-loc-lines{display:flex; flex-direction:column; line-height:1.05}
.hf-l1{font-size:.75rem; color:#bbb}
.hf-l2{font-size:.9rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40vw}

.hf-search{grid-column:1/-1}
.hf-search__box{display:flex; align-items:center; background:#fff; border-radius:6px; overflow:hidden}
.hf-search__cat{background:#f3f4f6; color:#111827; border:0; padding:.55rem .5rem; font-size:.9rem}
.hf-search__input{flex:1; border:0; padding:.6rem .65rem; font-size:.95rem; min-width:0}
.hf-search__input:focus{outline:none}
.hf-search__btn{background:#febd69; border:0; padding:.55rem .7rem; font-weight:800; cursor:pointer}
.hf-search-toggle{display:none;align-items:center;justify-content:center;border:0;background:transparent;color:#fff;cursor:pointer}
.hf-mobile-live{display:none}

.hf-actions{display:flex; align-items:center; gap:.75rem; justify-self:end}
.hf-actions a{color:#fff; text-decoration:none}
.hf-account{display:none; flex-direction:column; line-height:1.05; text-align:right}
.hf-a1{font-size:.75rem; color:#bbb}
.hf-a2{font-size:.9rem; color:#fff}
.hf-orders{display:none}
.hf-logout{display:none}
.hf-cart{position:relative; display:inline-flex; align-items:center; gap:.25rem; padding:.15rem .35rem; background:#232f3e; border-radius:6px}
.hf-cart__count{position:absolute; top:-6px; right:-6px; background:#cc0c39; color:#fff; font-size:.7rem; font-weight:800; padding:.05rem .35rem; border-radius:999px; min-width:1.2rem; text-align:center}

.hf-subnav{background:#232f3e}
.hf-subnav__inner{display:flex; gap:1rem; padding:.5rem .75rem; overflow-x:auto}
.hf-subnav__inner a{color:#fff; text-decoration:none; white-space:nowrap; font-size:.95rem}
.hf-subnav__inner a{display:inline-flex;align-items:center;gap:.35rem}
.hf-subnav__inner .hf-live-link{color:#ffd08a;font-weight:800}
.hf-subnav__inner .hf-live-link:before{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.18);content:""}

@media (max-width: 767px){
  .hf-header{position:relative;top:auto}
  .hf-search{display:none!important}
  .hf-search.is-open{display:block!important;grid-column:1/-1}
  .hf-search-toggle{display:inline-flex}
  .hf-mobile-live{display:inline-flex!important;align-items:center;gap:5px;min-height:30px;padding:0 8px;border:1px solid rgba(248,113,113,.45);border-radius:999px;background:rgba(190,18,60,.22);color:#fff;text-decoration:none;font-size:.68rem;font-weight:900;letter-spacing:.03em;text-transform:uppercase}
  .hf-mobile-live span{position:relative;width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.7);animation:hfLivePulse 1.25s ease-out infinite}
  .hf-mobile-live b{font:inherit}
  .hf-subnav{display:none!important}
}
@keyframes hfLivePulse{70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
@media (prefers-reduced-motion:reduce){.hf-mobile-live span{animation:none}}

/* ====== Drawer (mobile menu) ====== */
.hf-drawer{position:fixed; inset:0; pointer-events:none}
.hf-drawer__panel{position:absolute; top:0; left:0; height:100%; width:78%; max-width:320px; background:#fff; color:#111; transform:translateX(-100%); transition:transform .24s ease; display:flex; flex-direction:column; padding:12px}
.hf-drawer__panel a{color:#111; text-decoration:none; padding:10px 6px; border-radius:6px}
.hf-drawer__panel a:hover{background:#f3f4f6}
.hf-drawer__head{display:flex; align-items:center; justify-content:space-between; padding:8px 4px; font-weight:800}
.hf-close{background:transparent; border:0; font-size:1.15rem}
.hf-drawer__scrim{position:absolute; inset:0; background:rgba(2,6,23,.55); opacity:0; transition:opacity .24s ease}
.hf-drawer.open{pointer-events:auto}
.hf-drawer.open .hf-drawer__panel{transform:translateX(0)}
.hf-drawer.open .hf-drawer__scrim{opacity:1}

/* ====== ≥ 768px (tablet/desktop) ====== */
@media (min-width: 768px){
  .hf-top{grid-template-columns:auto auto 1fr auto}
  .hf-burger{display:none}
  .hf-location{display:flex}
  .hf-search{grid-column:auto}
  .hf-account,.hf-orders{display:flex}
  .hf-logout{display:inline-flex}
  .hf-l2{max-width:22ch}
  .hf-search-toggle{display:none!important}
  .hf-mobile-live{display:none!important}
}
/* --- Mobile drawer layering & clicks --- */
.hf-drawer{
  position: fixed;
  inset: 0;
  pointer-events: none;     /* off until opened */
  z-index: 1000;            /* above header (z:50) */
}
.hf-drawer.open{ pointer-events: auto; }

.hf-drawer__panel{
  position: absolute;       /* inside fixed drawer */
  top: 0; left: 0;
  height: 100dvh;           /* full viewport height incl. mobile UI */
  width: 86%;
  max-width: 360px;
  background: #fff;
  color: #111;
  transform: translateX(-100%);
  transition: transform .24s ease;
  display: flex;
  flex-direction: column;
  padding: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1002;            /* panel above scrim */
}
.hf-drawer.open .hf-drawer__panel{ transform: translateX(0); }

.hf-drawer__scrim{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.45);
  opacity: 0;
  transition: opacity .24s ease;
  z-index: 1001;
}
.hf-drawer.open .hf-drawer__scrim{ opacity: 1; }
.hf-location{ cursor:pointer; }
.hf-location.is-loading .hf-l2{ opacity:.6 }