/* ============ KHALIS shared navigation ============
   Hamburger + slide-in drawer (all pages) and the desktop "Shop" hover
   menu (homepage, shown once scrolled into the shop). Colours inherit the
   brand tokens defined in each page's :root. */

/* ---- hamburger (left of logo) ---- */
.head-left{display:flex;align-items:center;gap:.7rem}
.nav-burger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;padding:8px;border:none;background:transparent;
  color:currentColor;cursor:pointer;border-radius:8px;transition:opacity .2s ease;
}
.nav-burger:hover{opacity:.7}
.nav-burger span{display:block;height:1.6px;width:100%;background:currentColor;border-radius:2px}

/* ---- scrim + drawer ---- */
.nav-scrim{
  position:fixed;inset:0;z-index:120;background:rgba(20,10,4,.5);
  opacity:0;pointer-events:none;transition:opacity .35s ease;
}
/* blur only while open — a closed full-screen backdrop-filter layer keeps
   compositing on some mobile browsers and taxes scrolling */
.nav-scrim.open{opacity:1;pointer-events:auto;backdrop-filter:blur(3px)}
.nav-drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:121;width:min(360px,86vw);
  background:var(--warm-white,#FFFDF7);color:var(--ink,#1f1209);
  transform:translateX(-104%);transition:transform .42s cubic-bezier(.22,.8,.24,1);
  display:flex;flex-direction:column;box-shadow:30px 0 80px -30px rgba(0,0,0,.5);
  overflow-y:auto;overscroll-behavior:contain;
}
.nav-drawer.open{transform:none}
.nd-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.3rem .9rem}
.nd-head .nd-title{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--bronze,#7a4a21);font-weight:700}
.nd-close{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line,rgba(122,74,33,.22));
  background:transparent;color:var(--ink,#1f1209);cursor:pointer;font-size:1rem;line-height:1;
}
.nd-close:hover{border-color:var(--amber,#E8A33D);color:var(--amber,#E8A33D)}

/* ---- banner (Balqees-style) ---- */
.nd-banner{position:relative;display:block;margin:0 1.1rem;border-radius:14px;overflow:hidden;text-decoration:none;aspect-ratio:16/8.4;background:#2a1a0d}
.nd-banner img{width:100%;height:100%;object-fit:cover;display:block}
.nd-banner-cap{
  position:absolute;inset:auto 0 0 0;padding:1.15rem 1.15rem 1rem;
  background:linear-gradient(to top,rgba(15,8,3,.9),rgba(15,8,3,.45) 55%,transparent);
  color:#fff;
}
.nd-banner-cap b{display:block;font-family:var(--font-display,serif);font-weight:400;font-size:1.12rem;line-height:1.2}
.nd-banner-cap span{display:block;margin-top:.2rem;font-size:.74rem;letter-spacing:.03em;opacity:.85}

/* ---- links ---- */
.nd-links{display:flex;flex-direction:column;padding:1.1rem .7rem .4rem}
.nd-links a{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.92rem 1rem;border-radius:10px;text-decoration:none;color:var(--ink,#1f1209);
  font-family:var(--font-display,serif);font-size:1.12rem;transition:background .2s ease;
}
.nd-links a .sub{font-family:var(--font-body,sans-serif);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze,#7a4a21);font-weight:700;opacity:.75}
.nd-links a:hover{background:rgba(232,163,61,.12)}
.nd-sep{height:1px;background:var(--line,rgba(122,74,33,.22));margin:.5rem 1.1rem}
.nd-wa{
  display:flex;align-items:center;justify-content:center;gap:.55rem;margin:.6rem 1.1rem 1.4rem;
  padding:.95rem;border-radius:99px;text-decoration:none;
  font-family:var(--font-body,sans-serif);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink,#1f1209);background:linear-gradient(135deg,var(--honey,#F6C65B),var(--amber,#E8A33D));
  box-shadow:0 6px 22px rgba(232,163,61,.35);
}
.nd-wa svg{width:16px;height:16px;flex:none}

/* ---- desktop "Shop" hover menu (homepage in-shop) ---- */
.shop-nav{position:relative;display:none}
.shop-trigger{
  display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 0;
  background:transparent;border:none;color:currentColor;cursor:pointer;
  font-family:var(--font-body,sans-serif);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
}
.shop-trigger svg{width:9px;height:9px;transition:transform .28s ease}
.shop-menu{
  position:absolute;top:100%;right:0;min-width:246px;padding:.5rem;
  background:var(--warm-white,#FFFDF7);border:1px solid var(--line,rgba(122,74,33,.22));border-radius:14px;
  box-shadow:0 24px 54px -20px rgba(20,10,4,.45);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .24s ease,transform .24s ease,visibility .24s;
}
.shop-nav:hover .shop-menu,.shop-nav:focus-within .shop-menu{opacity:1;visibility:visible;transform:none}
.shop-nav:hover .shop-trigger svg,.shop-nav:focus-within .shop-trigger svg{transform:rotate(180deg)}
.shop-menu a{
  display:flex;flex-direction:column;gap:.12rem;padding:.72rem .9rem;border-radius:9px;
  text-decoration:none;color:var(--ink,#1f1209);transition:background .2s ease;
}
.shop-menu a:hover{background:rgba(232,163,61,.12)}
.shop-menu a b{font-family:var(--font-display,serif);font-weight:400;font-size:1rem}
.shop-menu a span{font-size:.68rem;letter-spacing:.02em;color:rgba(31,18,9,.55)}

/* show the desktop Shop menu only on wider screens (mobile uses the burger) */
@media(min-width:721px){
  .site-head.in-shop .shop-nav{display:block}
  .site-head.in-shop .route{display:none}
}

/* body scroll lock when a drawer is open */
body.nav-open{overflow:hidden}