/* =========================================================
   KONIRY — MOBILE NAV DRAWER (Phase 9)
   Loaded site-wide (the header/hamburger exists on every page).
   z-index intentionally sits above the cart drawer (300/301, see
   cart-drawer.css) — the two are mutually-exclusive at the JS level
   (assets/js/mobile-nav.js + cart-drawer.js coordinate via a shared
   'koniry:drawer-opened' event), so this ordering only matters for
   the brief moment during their close/open transition.
   ========================================================= */

.mobile-drawer-overlay{
  position:fixed;inset:0;background:rgba(20,26,22,.45);
  opacity:0;transition:opacity .3s ease;z-index:310;
}
.mobile-drawer-overlay.is-visible{opacity:1}

.mobile-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(360px,86vw);
  background:#fff;
  box-shadow:-24px 0 60px rgba(20,26,22,.2);
  z-index:311;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.mobile-drawer.is-open{transform:translateX(0)}

.mobile-drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;border-bottom:1px solid #EEEAE2;flex-shrink:0;
}
.mobile-drawer-logo{font-size:22px}
.mobile-drawer-logo img{max-height:32px}
.mobile-drawer-close{
  background:none;border:none;font-size:28px;line-height:1;cursor:pointer;
  color:var(--ink);padding:4px 8px;border-radius:8px;
}
.mobile-drawer-close:hover{background:var(--sand)}
.mobile-drawer-close:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.mobile-drawer-body{flex:1;overflow-y:auto;padding:20px 22px}

.mobile-drawer-search{display:flex;margin-bottom:20px}
.mobile-drawer-search input[type=search]{
  width:100%;border:1px solid #EEEAE2;border-radius:var(--r-pill);
  padding:12px 18px;font-size:14.5px;font-family:inherit;outline:none;background:var(--sand);
}

/* main nav list */
.mobile-drawer-menu{list-style:none}
.mobile-drawer-menu > li{border-bottom:1px solid #F1EEE6}
.mobile-drawer-menu > li > a{
  display:block;padding:16px 4px;text-decoration:none;font-weight:600;
  font-size:16px;color:var(--ink);
}
.mobile-drawer-menu li.current-menu-item > a{color:var(--accent)}

/* items with a submenu get a toggle button injected next to the link */
.mobile-drawer-menu li.has-submenu-toggle{position:relative}
.mobile-drawer-menu li.has-submenu-toggle > a{padding-right:44px}
.submenu-toggle{
  position:absolute;top:4px;right:0;width:40px;height:40px;
  background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.submenu-toggle-icon{position:relative;width:14px;height:14px}
.submenu-toggle-icon::before,.submenu-toggle-icon::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--ink);
  transform:translate(-50%,-50%);transition:transform .25s;
}
.submenu-toggle-icon::before{width:14px;height:2px}
.submenu-toggle-icon::after{width:2px;height:14px}
.submenu-toggle[aria-expanded="true"] .submenu-toggle-icon::after{transform:translate(-50%,-50%) rotate(90deg) scale(0)}

/* submenu accordion panel — same grid-rows collapse technique used by
   the accordion component in assets/css/product.css/base.css */
.mobile-submenu-panel{
  list-style:none;padding-left:16px;
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;
}
.mobile-submenu-panel[aria-hidden="false"]{grid-template-rows:1fr}
.mobile-submenu-panel > li{overflow:hidden}
.mobile-submenu-panel a{
  display:block;padding:12px 4px;text-decoration:none;font-size:14.5px;color:var(--body);
}
.mobile-submenu-panel a:hover{color:var(--accent)}

/* account / cart quick actions */
.mobile-drawer-actions{margin-top:20px;padding-top:20px;border-top:1px solid #EEEAE2;display:flex;flex-direction:column;gap:4px}
.mobile-drawer-action{
  display:flex;align-items:center;gap:12px;padding:12px 4px;text-decoration:none;
  color:var(--ink);font-weight:500;font-size:15px;
}
.mobile-drawer-action svg{width:20px;height:20px;stroke:var(--ink);fill:none;flex-shrink:0}
.mobile-drawer-action .cart-count{
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;
  min-width:20px;height:20px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;padding:0 5px;
}

.mobile-drawer-footer{flex-shrink:0;padding:18px 22px 24px;border-top:1px solid #EEEAE2}
.mobile-drawer-footer .btn{width:100%;justify-content:center}

@media(min-width:1001px){
  /* Off-canvas drawer is a mobile/tablet-only affordance — the
     hamburger itself is already hidden at this breakpoint (see
     header-footer.css), this just ensures the panel can't be left
     visible by a stray resize while open. */
  .mobile-drawer.is-open{transform:translateX(100%)}
  .mobile-drawer-overlay.is-visible{opacity:0;pointer-events:none}
}