/* CommercePro 3.5 mobile navigation isolation layer.
 * Loaded after theme CSS so every storefront theme receives the same usable drawer. */
.mobile-drawer,.mobile-nav-backdrop{display:none}
@media (max-width:900px){
  body.menu-open{overflow:hidden!important}
  body[class*="theme-"] .desktop-category-nav{display:none!important;visibility:hidden!important;pointer-events:none!important}
  body[class*="theme-"] .mobile-menu{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:5px!important;position:relative!important;z-index:10002!important;width:46px!important;height:46px!important;min-height:46px!important;padding:0!important;border:1px solid #d8ddda!important;border-radius:9px!important;background:#fff!important;color:#111714!important;box-shadow:none!important;text-decoration:none!important}
  body[class*="theme-"] .mobile-menu span{display:block!important;width:20px!important;height:2px!important;margin:0!important;padding:0!important;border:0!important;border-radius:2px!important;background:#111714!important;transition:transform .2s ease,opacity .2s ease!important}
  body[class*="theme-"] .mobile-menu.active span:nth-child(1){transform:translateY(7px) rotate(45deg)!important}
  body[class*="theme-"] .mobile-menu.active span:nth-child(2){opacity:0!important}
  body[class*="theme-"] .mobile-menu.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important}
  .mobile-nav-backdrop{display:block;position:fixed!important;inset:0!important;z-index:10000!important;background:rgba(12,18,15,.48)!important;backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s ease}
  .mobile-nav-backdrop.open{opacity:1;pointer-events:auto}
  .mobile-nav-backdrop[hidden]{display:none!important}
  body[class*="theme-"] .mobile-drawer{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;position:fixed!important;z-index:10001!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:min(410px,94vw)!important;height:100dvh!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-left:1px solid #d8ddda!important;border-radius:0!important;background:#fff!important;color:#111714!important;box-shadow:-28px 0 72px rgba(0,0,0,.22)!important;transform:translate3d(104%,0,0)!important;visibility:hidden!important;opacity:0!important;overflow:hidden!important;transition:transform .25s ease,opacity .18s ease,visibility .25s!important;font-family:var(--font-body,Arial,sans-serif)!important;text-align:left!important}
  body[class*="theme-"] .mobile-drawer.is-open{transform:translate3d(0,0,0)!important;visibility:visible!important;opacity:1!important}
  body[class*="theme-"] .mobile-drawer-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;min-height:88px!important;padding:20px 22px 17px!important;margin:0!important;border:0!important;border-bottom:1px solid #dfe3e0!important;background:#fff!important;color:#111714!important}
  body[class*="theme-"] .mobile-drawer-head>div{display:grid!important;gap:3px!important;min-width:0!important}
  body[class*="theme-"] .mobile-drawer-head small{display:block!important;margin:0!important;font-size:10px!important;font-weight:750!important;line-height:1.2!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:#707874!important}
  body[class*="theme-"] .mobile-drawer-head strong{display:block!important;margin:0!important;font:700 25px/1.08 var(--font-heading,var(--font-body,Arial,sans-serif))!important;letter-spacing:-.02em!important;color:#111714!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body[class*="theme-"] .mobile-nav-close{display:grid!important;place-items:center!important;flex:0 0 42px!important;width:42px!important;height:42px!important;min-height:42px!important;margin:0!important;padding:0!important;border:1px solid #d8ddda!important;border-radius:50%!important;background:#fff!important;color:#111714!important;box-shadow:none!important;text-decoration:none!important;cursor:pointer!important}
  body[class*="theme-"] .mobile-nav-close svg{display:block!important;width:19px!important;height:19px!important;fill:none!important;stroke:#111714!important;stroke-width:1.8!important;stroke-linecap:round!important}
  body[class*="theme-"] .mobile-drawer-links{display:block!important;min-height:0!important;margin:0!important;padding:7px 22px 18px!important;overflow-y:auto!important;overflow-x:hidden!important;background:#fff!important;color:#111714!important}
  body[class*="theme-"] .mobile-drawer-links a{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:16px!important;width:100%!important;min-height:55px!important;margin:0!important;padding:0!important;border:0!important;border-bottom:1px solid #eceeec!important;border-radius:0!important;background:#fff!important;color:#111714!important;box-shadow:none!important;text-decoration:none!important;font:650 19px/1.2 var(--font-body,Arial,sans-serif)!important;letter-spacing:-.01em!important}
  body[class*="theme-"] .mobile-drawer-links a span{display:block!important;min-width:0!important;color:#111714!important;transform:none;transition:transform .15s ease!important}
  body[class*="theme-"] .mobile-drawer-links a b{display:block!important;font-size:10px!important;font-weight:750!important;letter-spacing:.1em!important;color:#8a918e!important}
  body[class*="theme-"] .mobile-drawer-links a:hover span{transform:translateX(5px)!important}
  body[class*="theme-"] .mobile-drawer-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;margin:0!important;padding:15px 22px calc(17px + env(safe-area-inset-bottom))!important;border:0!important;border-top:1px solid #dfe3e0!important;background:#f5f6f4!important;color:#111714!important}
  body[class*="theme-"] .mobile-drawer-actions a,body[class*="theme-"] .mobile-drawer-actions button{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:47px!important;height:47px!important;margin:0!important;padding:0 12px!important;border:1px solid #ccd2ce!important;border-radius:7px!important;background:#fff!important;color:#111714!important;box-shadow:none!important;text-decoration:none!important;font:700 14px/1 var(--font-body,Arial,sans-serif)!important;cursor:pointer!important}
  body[class*="theme-"] .mobile-drawer-actions .cart-toggle,body[class*="theme-"] .mobile-drawer-actions .mobile-quote{grid-column:1/-1!important;background:#111714!important;color:#fff!important;border-color:#111714!important}
  body[class*="theme-"] .mobile-drawer-actions .cart-toggle b{display:grid!important;place-items:center!important;width:22px!important;height:22px!important;margin-left:7px!important;border-radius:50%!important;background:#fff!important;color:#111714!important}
}
@media (max-width:560px){
  body[class*="theme-"] .mobile-drawer{width:100vw!important}
  body[class*="theme-"] .mobile-drawer-head,body[class*="theme-"] .mobile-drawer-links,body[class*="theme-"] .mobile-drawer-actions{padding-left:18px!important;padding-right:18px!important}
  body[class*="theme-"] .mobile-drawer-actions{grid-template-columns:1fr!important}
  body[class*="theme-"] .mobile-drawer-actions .cart-toggle,body[class*="theme-"] .mobile-drawer-actions .mobile-quote{grid-column:auto!important}
}
