/* Mobile e-commerce nav inspired by Apple bottom bar + Dribbble slide drawer */
:root {
  --m-bg: #ffffff;
  --m-fg: #0f172a;
  --m-muted: #64748b;
  --m-primary: #1e3c72;
  --m-border: rgba(15,23,42,0.08);
  --m-elev: 0 8px 24px rgba(15,23,42,0.12);
}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}

/***** Mobile Header *****/
.mobile-header {
  background: var(--m-bg);
  border-bottom: 1px solid var(--m-border);
  padding: 0;
  /* default: not sticky on desktop */
  position: static;
  z-index: 1030;
  box-shadow: 0 2px 8px rgba(15,23,42,0.08);
}

.mobile-header-logo {
  /* center the logo perfectly on mobile */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mobile-header-logo img {
  height: 62px !important;
  width: auto;
  display: block !important;
}

/***** Desktop Right Logo *****/
.header-logo-right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 20px;
}

.header-logo-right .right-logo {
     max-height: 63px !important;
  width: auto;
}

/* Balance the left logo spacing */
.header-logo {
  padding-right: 20px;
}

@media (max-width: 991.98px) {
  .header-logo-right {
    display: none !important;
  }
  
  .header-logo {
    padding-right: 0;
  }
  /* make mobile header fixed-only on mobile for robust behavior */
  .mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040; /* above theme header/menu */
  }

  /* prevent theme sticky wrapper from overlaying the fixed mobile header */
  .sticky-wrapper.sticky {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    -webkit-filter: none !important;
            filter: none !important;
    -webkit-animation: none !important;
            animation: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* offset page content so it doesn't hide under the fixed mobile header */
  body {
    padding-top: 64px; /* approx mobile header height (62px logo + border) */
  }
}

/***** Bottom Tabbar *****/
.mobile-tabbar{position:fixed;z-index:1040;left:0;right:0;bottom:0;background:var(--m-bg);border-top:1px solid var(--m-border);box-shadow:0 -6px 20px rgba(15,23,42,0.06);display:flex;gap:2px;justify-content:space-around;align-items:center;padding:8px 6px;backdrop-filter:saturate(180%) blur(8px);} 
.mobile-tabbar .tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--m-muted);text-decoration:none;font-size:11px;line-height:1;font-weight:600;padding:8px 6px;border-radius:10px;background:transparent;border:none;}
.mobile-tabbar .tab-item i{font-size:18px;color:var(--m-fg);} 
.mobile-tabbar .tab-item:focus-visible{outline:2px solid var(--m-primary);outline-offset:2px;}
.mobile-tabbar .tab-item.active,.mobile-tabbar .tab-item:hover{color:var(--m-primary);} 
.mobile-tabbar .tab-item.active i,.mobile-tabbar .tab-item:hover i{color:var(--m-primary);} 

@media (min-width: 992px){.mobile-tabbar{display:none}}

/* Hide theme's default mobile hamburger (we use our own) */
.header-button .th-menu-toggle{display:none!important}

/***** Drawer + Overlay *****/
.mobile-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.35);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;z-index:1035;}
.mobile-overlay.active{opacity:1;visibility:visible;}

.mobile-drawer{position:fixed;left:0;right:0;bottom:-100%;z-index:1045;background:var(--m-bg);border-top-left-radius:16px;border-top-right-radius:16px;box-shadow:var(--m-elev);transition:transform .32s cubic-bezier(.2,.7,.2,1), bottom .32s;transform:translateY(20px);} 
.mobile-drawer.open{bottom:0;transform:translateY(0);} 
.drawer-header{position:sticky;top:0;background:var(--m-bg);display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--m-border);border-top-left-radius:16px;border-top-right-radius:16px;}
.drawer-grabber{width:42px;height:4px;border-radius:999px;background:#e2e8f0;margin:0 auto;display:block;}
.drawer-title{flex:1;text-align:center;font-weight:700;color:var(--m-fg);} 
.drawer-close{border:none;background:transparent;color:var(--m-fg);font-size:20px;}

.drawer-search{position:sticky;top:52px;background:var(--m-bg);} 
.search-input{display:flex;align-items:center;gap:8px;border:1px solid var(--m-border);border-radius:12px;padding:10px 12px;background:#f8fafc;}
.search-input i{color:#64748b;}
.search-input input{flex:1;border:none;background:transparent;outline:none;font-size:14px;color:var(--m-fg);} 
.search-input .btn-search{border:none;border-radius:10px;background:var(--m-primary);color:#fff;font-weight:700;font-size:12px;padding:8px 10px;}

.drawer-nav{max-height:55vh;overflow:auto;padding:8px 0 88px;} 
.m-nav-list{list-style:none;margin:0;padding:0;}
.m-nav-list > li{border-bottom:1px solid var(--m-border);} 
.m-nav-list a,.m-nav-list button.m-accordion-toggle{width:100%;display:flex;align-items:center;gap:10px;padding:14px 16px;font-weight:600;color:var(--m-fg);text-decoration:none;background:transparent;border:none;text-align:left;}
.m-nav-list a i,.m-nav-list button i{font-size:18px;color:var(--m-fg);} 
.m-nav-list .chevron{margin-left:auto;transition:transform .2s ease;}
.has-children.open .chevron{transform:rotate(180deg);} 
.m-submenu{padding:6px 0 14px 52px;background:linear-gradient(180deg, rgba(241,245,249,0.6), rgba(255,255,255,0));}
.m-submenu ul{list-style:none;margin:0;padding:0;}
.m-submenu li{padding:6px 0;}
.m-submenu a{padding:0;color:#0f172a;font-weight:500;}
.m-submenu .m-label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#64748b;padding:10px 0 0 0;font-weight:800;}
.m-submenu .m-spacer{height:8px}

.drawer-footer{border-top:1px solid var(--m-border);background:var(--m-bg);} 

/* Make space so content isn't hidden behind the tabbar */
body{padding-bottom:64px;} 
@media (min-width: 992px){body{padding-bottom:0}}

/* Utilities */
.px-3{padding-left:1rem;padding-right:1rem}
.pb-2{padding-bottom:.5rem}
.py-3{padding-top:1rem;padding-bottom:1rem}
.me-2{margin-right:.5rem}
.w-100{width:100%}

/* Theme button compatibility */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}

/* Subtle iOS-like motion */
@media (prefers-reduced-motion: reduce){
  .mobile-drawer,.mobile-overlay,.chevron{transition:none}
}