/* ══════════════════════════════════════════
   TRUST BAR
══════════════════════════════════════════ */
.trust-bar{
  position:relative;
  z-index:9100;
  background:#1A1A1A;
  color:#fff;
  font-family:var(--f-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.8px;
  text-transform:uppercase;
  display:flex;
  justify-content:center;
  gap:32px;
  padding:8px 24px;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
}
.trust-bar::-webkit-scrollbar{display:none}

/* ══════════════════════════════════════════
   NAVIGATION — new UI (white / black / red / gold)
   Layout (RTL): burger → right | logo → center | cart → left
══════════════════════════════════════════ */
:root{
  --n-white:#FFFFFF;
  --n-black:#111111;
  --n-red:#E4241D;
  --n-gold:#B4922E;
  --n-line:#EAEAEA;
  --n-gray:#8B8B8B;
  --f-ar:'Cairo',sans-serif;
  --f-en:'Oswald',sans-serif;
  --f-title:'Tajawal',sans-serif;
}

#nav{
  position:sticky;top:0;z-index:9000;
  direction:rtl;
  height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;
  background:var(--n-white);
  border-bottom:1px solid var(--n-line);
}

/* Hide nav on admin page */
.pg#pg-admin.on ~ #nav,
body.admin-active #nav{display:none}

.nav-logo{
  position:absolute;left:50%;transform:translateX(-50%);
  height:38px;width:auto;
  cursor:pointer;
}

/* ── burger ── */
.nav-burger{
  width:40px;height:40px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none;border:none;z-index:2;
}
.nav-burger span{width:20px;height:2px;background:var(--n-black);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── cart ── */
.nav-cart{
  position:relative;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;z-index:2;
}
.nav-cart svg{width:22px;height:22px;stroke:var(--n-black)}
.nav-cart-badge{
  position:absolute;top:2px;left:2px;
  min-width:16px;height:16px;padding:0 3px;
  background:var(--n-red);color:var(--n-white);
  border-radius:50%;
  font-family:var(--f-en);font-size:9px;
  display:flex;align-items:center;justify-content:center;
}

/* Orders badge in admin — unaffected */
#ordBadge{
  position:relative;top:auto;right:auto;
  display:inline-flex !important;margin-left:6px;
  background:var(--gold);color:#fff;font-weight:700;
  min-width:20px;height:20px;border-radius:50%;
  font-size:9px;padding:0 4px;
}

/* ══════════════════════════════════════════
   DRAWER — partial slide-in panel (never covers the whole page)
══════════════════════════════════════════ */
.drawer-overlay{
  position:fixed;inset:0;
  background:rgba(17,17,17,.45);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);
  z-index:9150;
}
.drawer-overlay.open{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;top:0;right:0;
  width:min(85vw,340px);height:100%;
  background:var(--n-white);
  transform:translateX(100%);
  transition:transform .35s var(--ease);
  z-index:9151;
  display:flex;flex-direction:column;overflow-y:auto;
}
.drawer.open{transform:translateX(0)}

.drawer-head{
  height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;
  border-bottom:1px solid var(--n-line);
  flex-shrink:0;
}
.drawer-head span{font-family:var(--f-en);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.drawer-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none}
.drawer-close svg{width:18px;height:18px;stroke:var(--n-black)}

.drawer-list{padding:8px 0}
.drawer-item{border-bottom:1px solid var(--n-line)}
.drawer-item-head{
  width:100%;background:none;border:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;
  font-family:var(--f-ar);
  font-size:15px;font-weight:600;color:var(--n-black);
  cursor:pointer;
}
.drawer-item-head .chev{
  width:9px;height:9px;
  border-right:1.5px solid var(--n-gold);
  border-bottom:1.5px solid var(--n-gold);
  transform:rotate(45deg);
  transition:transform .25s var(--ease);
  flex-shrink:0;
}
.drawer-item.open .drawer-item-head .chev{transform:rotate(-135deg)}
.drawer-item.no-sub .drawer-item-head .chev{display:none}

.drawer-sub{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);background:#FAFAFA}
.drawer-item.open .drawer-sub{max-height:300px}
.drawer-sub a{display:block;padding:11px 20px 11px 36px;font-family:var(--f-ar);font-size:13px;color:var(--n-gray)}
.drawer-sub a:active{color:var(--n-red)}

.drawer-foot{margin-top:auto;padding:20px;border-top:1px solid var(--n-line);display:flex;gap:16px}
.drawer-foot a{font-family:var(--f-en);font-size:11px;letter-spacing:.06em;color:var(--n-gray);text-transform:uppercase}

/* ══════════════════════════════════════════
   PAGES
══════════════════════════════════════════ */
.pg{display:none}
.pg.on{display:block}