:root{
  --drawer-offset:.5em;
  --drawer-width:500px;
}

yc-drawer .drawer-btn{
  color:currentColor;
  border-color:color-mix(in srgb, currentColor 20%, transparent);
}
yc-drawer .drawer-box{
  position:fixed;
  z-index:100;
  inset:0;
  margin:.5em;
  margin:var(--drawer-offset);
  width:500px;
  width:var(--drawer-width);
  inset-inline-start:calc(500px * -1 - .5em * 2);
  inset-inline-start:calc(var(--drawer-width) * -1 - var(--drawer-offset) * 2);
  border-radius:var(--drawer-border-radius);
  overflow:hidden;
  transition:var(--transition-duration-normal);
}
yc-drawer .drawer-overlay{
  opacity:0;
  visibility:hidden;
}
yc-drawer[data-direction$=rtl] .drawer-box{
  inset-inline-start:100%;
}
yc-drawer[data-hidden$=false][data-direction$=rtl] .drawer-box{
  inset-inline-start:calc(100% - 500px - .5em * 2);
  inset-inline-start:calc(100% - var(--drawer-width) - var(--drawer-offset) * 2);
}
yc-drawer[data-hidden$=false] .drawer-box{
  inset-inline-start:0%;
}
yc-drawer[data-hidden$=false] .drawer-overlay{
  opacity:1;
  visibility:visible;
}
yc-drawer#menu{
  display:none;
}

@media (max-width: 1024px){
  yc-drawer#menu{
    display:inline;
    display:initial;
  }
}
@media (max-width: 768px){
  :root{
    --drawer-width:85%;
  }
  yc-drawer#cart .cart-btn .total-amount,
  yc-drawer#cart .cart-btn::before{
    display:none;
  }
}



/* ==================================================================
   VOZRAX DRAWER LAYER — one coherent override block
   (replaces a stack of earlier patches that fought each other)

   Bugs fixed here, all measured live:
   * yc-drawer#menu was display:none above 1024px -> burger invisible.
   * The cart button did nothing: the drawer JS bound its toggles in the
     constructor (before children existed) so no listener was ever attached.
   * After opening, the box stayed visibility:hidden (cross-origin theme CSS).
   * On the RTL page inset-inline-start resolved to the RIGHT, so the menu
     box parked at x=372 on a 390px viewport and never slid into view.
     -> use PHYSICAL left/right.
   * The empty-cart state was a lone low-contrast icon with no message/CTA.
   ================================================================== */

:root { --drawer-width: 460px; }
@media (max-width: 820px) { :root { --drawer-width: 92vw; } }
@media (max-width: 480px) { :root { --drawer-width: 94vw; } }

/* ---- the menu burger is always available ---- */
yc-drawer#menu {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
}
.drawer-btn.icon,
yc-drawer .drawer-btn,
button.drawer-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important; height: 44px !important;
  min-width: 44px !important; min-height: 44px !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  border-radius: 50% !important;
  background: rgba(212,175,55,.1) !important;
  color: #D4AF37 !important;
  visibility: visible !important; opacity: 1 !important;
  cursor: pointer !important; position: relative !important; z-index: 40 !important;
}
.drawer-btn svg { width: 20px !important; height: 20px !important; display: block !important; stroke: currentColor !important; }

/* ---- container + box geometry ---- */
yc-drawer .drawer-container {
  position: fixed !important; inset: 0 !important; z-index: 100 !important;
  visibility: visible !important; opacity: 1 !important; pointer-events: none !important;
}
yc-drawer .drawer-box {
  position: fixed !important;
  top: var(--drawer-offset) !important;
  bottom: var(--drawer-offset) !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  width: var(--drawer-width) !important;
  height: calc(100vh - var(--drawer-offset) * 2) !important;
  max-height: calc(100vh - var(--drawer-offset) * 2) !important;
  background: #0E0E11 !important;
  border: 1px solid rgba(212,175,55,.18) !important;
  border-radius: 18px !important;
  box-shadow: -18px 0 60px rgba(0,0,0,.72) !important;
  overflow: hidden !important;
  visibility: visible !important; opacity: 1 !important;
  transition: left .32s cubic-bezier(.2,.7,.3,1),
              right .32s cubic-bezier(.2,.7,.3,1),
              visibility .32s !important;
}
/* MENU slides from the LEFT */
yc-drawer#menu .drawer-box { left: calc(var(--drawer-width) * -1 - 2em) !important; right: auto !important; }
yc-drawer#menu[data-hidden="false"] .drawer-box { left: var(--drawer-offset) !important; right: auto !important; }
/* CART slides from the RIGHT */
yc-drawer#cart .drawer-box { right: calc(var(--drawer-width) * -1 - 2em) !important; left: auto !important; }
yc-drawer#cart[data-hidden="false"] .drawer-box { right: var(--drawer-offset) !important; left: auto !important; }

/* ---- open / closed state ---- */
yc-drawer[data-hidden="true"] .drawer-box {
  visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;
}
yc-drawer[data-hidden="true"] .drawer-overlay {
  visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;
}
yc-drawer[data-hidden="false"] .drawer-container { pointer-events: auto !important; }
yc-drawer[data-hidden="false"] .drawer-box,
yc-drawer[data-hidden="false"] .drawer-box * { pointer-events: auto !important; }
yc-drawer[data-hidden="false"] .drawer-overlay {
  visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;
  background: rgba(4,4,6,.68) !important; backdrop-filter: blur(2px) !important; z-index: 99 !important;
}

/* ---- menu content ---- */
yc-drawer#menu .drawer-box .menu-drawer {
  display: flex !important; flex-direction: column !important;
  height: 100% !important; background: #0E0E11 !important;
}
yc-drawer#menu .menu-head {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 16px 18px !important; border-bottom: 1px solid rgba(212,175,55,.16) !important;
}
yc-drawer#menu .menu-core { padding: 6px 0 !important; overflow-y: auto !important; flex: 1 !important; }
yc-drawer#menu .navigation { list-style: none !important; margin: 0 !important; padding: 0 !important; }
yc-drawer#menu .navigation li { border-bottom: 1px solid rgba(255,255,255,.05) !important; }
yc-drawer#menu .navigation li > a {
  display: block !important; padding: 15px 20px !important;
  color: #F5F5F7 !important; font-size: 15px !important; font-weight: 600 !important;
  text-decoration: none !important;
}
yc-drawer#menu .navigation li > a:hover { color: #D4AF37 !important; background: rgba(212,175,55,.06) !important; }

/* ---- cart content + empty state ---- */
yc-drawer#cart .cart-drawer { background: #0E0E11 !important; color: #F5F5F7 !important; height: 100% !important; }
yc-drawer#cart .cart-drawer .header { border-bottom: 1px solid rgba(212,175,55,.16) !important; }
yc-drawer#cart .cart-drawer .header .title { color: #D4AF37 !important; font-weight: 800 !important; }
yc-drawer#cart .cart-drawer .empty {
  display: none;
  flex-direction: column !important; align-items: center !important; justify-content: center !important;
  gap: 14px !important; flex: 1 !important; padding: 36px 24px !important; text-align: center !important;
}
yc-drawer#cart .cart-drawer[data-is-empty] .empty { display: flex !important; }
yc-drawer#cart .cart-drawer .empty svg { width: 60px !important; height: 60px !important; color: #D4AF37 !important; opacity: .85 !important; }
yc-drawer#cart .cart-drawer .empty .heading { color: #F5F5F7 !important; font-size: 18px !important; font-weight: 800 !important; margin: 0 !important; }
yc-drawer#cart .cart-drawer .empty::after {
  content: 'تصفّح المنتجات';
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 30px; border-radius: 50px;
  background: linear-gradient(135deg,#E8C766,#D4AF37); color: #0A0A0C;
  font-weight: 800; font-size: 15px;
}
yc-drawer#cart .cart-drawer .footer { background: #121215 !important; border-top: 1px solid rgba(212,175,55,.16) !important; }
yc-drawer#cart .cart-drawer .footer .totals { color: #F5F5F7 !important; font-weight: 700 !important; }
yc-drawer#cart .cart-drawer .footer .actions .primary {
  background: linear-gradient(135deg,#E8C766,#D4AF37) !important; color: #0A0A0C !important;
  font-weight: 800 !important; min-height: 50px !important; border-radius: 50px !important;
}
yc-drawer#cart .cart-drawer .footer .actions .secondary {
  border: 1px solid rgba(212,175,55,.34) !important; color: #D4AF37 !important;
  background: transparent !important; min-height: 46px !important; border-radius: 50px !important;
}


/* ==================================================================
   MEASURED ROOT CAUSE: the drawer lives INSIDE <yc-header> (340x160 with
   overflow:hidden auto). Two consequences:
     1. the header's stacking/overflow context clipped the panel, and
     2. an inherited `visibility:hidden` from a header state reached
        .menu-core / .navigation, so the nav rendered but was INVISIBLE.
   Fix: hoist every open drawer out of the header's context and force the
   inner content visible whenever the drawer itself is open.
   ================================================================== */

/* the drawer container escapes any ancestor clipping/stacking */
yc-drawer[data-hidden="false"] .drawer-container {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100vw !important; height: 100vh !important;
  z-index: 9999 !important;
  visibility: visible !important;
  overflow: visible !important;
  clip: auto !important;
  pointer-events: auto !important;
}
/* when open, nothing inside may inherit a hidden state */
yc-drawer[data-hidden="false"] .drawer-box,
yc-drawer[data-hidden="false"] .drawer-box * {
  visibility: visible !important;
  opacity: 1 !important;
}
/* the header must not clip or trap the drawer while it is open */
yc-header:has(yc-drawer[data-hidden="false"]),
#youcan-section--header:has(yc-drawer[data-hidden="false"]) {
  overflow: visible !important;
  z-index: auto !important;
}
/* menu-core is a grid in the theme; give it a sane single column */
yc-drawer#menu .menu-core {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 6px 0 !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}
yc-drawer#menu .navigation {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}
yc-drawer#menu .navigation li { width: 100% !important; }
yc-drawer#menu .navigation li > a {
  color: #F5F5F7 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* cart drawer content must not inherit hidden either */
yc-drawer#cart[data-hidden="false"] .cart-drawer,
yc-drawer#cart[data-hidden="false"] .cart-drawer * { visibility: visible !important; }
yc-drawer#cart[data-hidden="false"] .cart-drawer .empty { display: flex !important; }
yc-drawer#cart .cart-drawer .empty .heading { display: block !important; visibility: visible !important; }


/* ==================================================================
   STACKING ORDER — measured with elementFromPoint
   The menu nav was laid out and visible (365x373, correct text) but
   elementFromPoint over it returned DIV.vz-hero-visual: the page's hero
   section paints ABOVE the drawer. Cause: yc-header creates its own
   stacking context, so the drawer's z-index:100 is scoped INSIDE it and
   competes with hero sections that have a higher root-level z-index.
   Fix: raise the header's own stacking context while a drawer is open, and
   put the drawer above everything on the root level.
   ================================================================== */
yc-header:has(yc-drawer[data-hidden="false"]),
#youcan-section--header:has(yc-drawer[data-hidden="false"]),
header.youcan-section:has(yc-drawer[data-hidden="false"]) {
  position: relative !important;
  z-index: 100000 !important;
}
yc-drawer[data-hidden="false"] {
  position: relative !important;
  z-index: 100001 !important;
}
yc-drawer[data-hidden="false"] .drawer-container {
  z-index: 100002 !important;
}
yc-drawer[data-hidden="false"] .drawer-overlay {
  z-index: 100001 !important;
}
yc-drawer[data-hidden="false"] .drawer-box {
  z-index: 100003 !important;
}
/* nothing in the page content may out-stack an open drawer */
body:has(yc-drawer[data-hidden="false"]) .vz-home,
body:has(yc-drawer[data-hidden="false"]) main,
body:has(yc-drawer[data-hidden="false"]) #main {
  z-index: 1 !important;
}
/* belt-and-braces: kill any transform/filter on ancestors that would create
   a competing containing block for the fixed drawer */
body:has(yc-drawer[data-hidden="false"]) .vz-home,
body:has(yc-drawer[data-hidden="false"]) section {
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}


/* ==================================================================
   MENU DRAWER SEARCH BAR
   The menu drawer reuses `.search-bar` markup, but the header rules above
   styled it as a pill for the header only — inside the drawer it rendered
   unstyled (transparent input, raw button). Give it its own treatment.
   ================================================================== */
yc-drawer#menu .menu-core .search-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: calc(100% - 32px) !important;
  margin: 14px 16px 6px !important;
  padding: 0 6px 0 14px !important;
  height: 46px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(212,175,55,.24) !important;
  background: rgba(255,255,255,.04) !important;
  box-sizing: border-box !important;
}
yc-drawer#menu .menu-core .search-bar input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 44px !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  color: #F5F5F7 !important;
  font-size: 14px !important;
}
yc-drawer#menu .menu-core .search-bar input::placeholder { color: #8A8A92 !important; }
yc-drawer#menu .menu-core .search-bar button {
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg,#E8C766,#D4AF37) !important;
  border: 0 !important;
  color: #0A0A0C !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
yc-drawer#menu .menu-core .search-bar button svg {
  width: 17px !important;
  height: 17px !important;
  stroke: #0A0A0C !important;
  display: block !important;
}
/* nav list sits under the search field, aligned with it */
yc-drawer#menu .menu-core .navigation { margin-top: 6px !important; }


/* ==================================================================
   MENU SEARCH — the gold button floated above the field and overlapped the
   first nav row. Give the row a real height and centre the button vertically.
   ================================================================== */
yc-drawer#menu .menu-core .search-bar {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
}
yc-drawer#menu .menu-core .search-bar input {
  height: 46px !important;
  line-height: 46px !important;
}
yc-drawer#menu .menu-core .search-bar button {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  align-self: center !important;
  margin: 0 !important;
}
/* a little breathing room before the nav list */
yc-drawer#menu .menu-core .navigation { margin-top: 10px !important; }
yc-drawer#menu .menu-core { padding-top: 4px !important; }