/* Mobile header + fixed bottom navigation. Phones only (<= 760px): nothing here applies to the desktop layout.
   Which items show is decided in Admin > Mobile View (classes mv-h-* on the header, items of #mvBottomNav). */
.mv-bn{display:none}
@media (max-width:760px){
  /* ---------- Header: hamburger | logo + name | cart ---------- */
  .site-header-main .header-main{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:0;min-height:56px;padding:4px 8px}
  .site-header-main .header-actions{display:contents}
  /* hamburger = the existing More Menu button (left) */
  .site-header-main #moreMenuButton{order:1;display:none;min-width:44px;width:44px;height:48px;min-height:48px;padding:0;margin:0;align-items:center;justify-content:center}
  .site-header-main.mv-h-menu #moreMenuButton{display:flex}
  .site-header-main #moreMenuButton small{display:none}
  .site-header-main #moreMenuButton .header-svg-icon{width:26px;height:26px;flex-basis:26px}
  /* right side: only the icons switched ON */
  .site-header-main .header-action[data-mv]{display:none;order:3;min-width:44px;width:44px;height:48px;min-height:48px;padding:0;justify-content:center}
  .site-header-main .header-action[data-mv] small{display:none}
  .site-header-main .header-action[data-mv="cart"]{order:5}
  .site-header-main.mv-h-cart .header-action[data-mv="cart"],
  .site-header-main.mv-h-wishlist .header-action[data-mv="wishlist"],
  .site-header-main.mv-h-track .header-action[data-mv="track"],
  .site-header-main.mv-h-account .header-action[data-mv="account"]{display:flex}
  .site-header-main .header-main::before{content:"";order:2;flex:1 1 0;min-width:0}
  /* Logo + brand name: ONE line, centred together (horizontally on the screen, vertically in the 56px header row).
     Width left for them = screen - 2 x (side icons); the same reserve is kept on both sides so the pair stays truly centred. */
  .site-header-main{--mv-icon:44px;--mv-side:calc(8px + var(--mv-icon))}
  .site-header-main.mv-r-2{--mv-side:calc(8px + 2 * var(--mv-icon))}
  .site-header-main.mv-r-3{--mv-side:calc(8px + 3 * var(--mv-icon))}
  .site-header-main.mv-r-4{--mv-side:calc(8px + 4 * var(--mv-icon))}
  .site-header-main .brand{position:absolute;left:50%;top:0;height:56px;bottom:auto;transform:translateX(-50%);flex:none;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:7px;width:max-content;max-width:calc(100% - 2 * var(--mv-side));min-width:0;overflow:hidden;margin:0;padding:0}
  .site-header-main .brand-logo{display:none;height:var(--mv-logo-h,38px)!important;max-height:var(--mv-logo-h,38px)!important;width:var(--mv-logo-w,auto)!important;max-width:var(--mv-logo-w,120px)!important;flex:0 0 auto;object-fit:contain}
  .site-header-main .brand-mark{display:none;width:34px;height:34px;font-size:15px}
  .site-header-main.mv-h-logo .brand-logo,.site-header-main.mv-h-logo .brand-mark{display:block}
  .site-header-main.mv-h-logo .brand-mark{display:grid}
  .site-header-main .brand>span.brand-text{display:none;min-width:0;overflow:hidden}
  .site-header-main.mv-h-name .brand>span.brand-text{display:block}
  .site-header-main .brand-text b{display:block;font:700 17px/1.15 Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .site-header-main .brand>span.brand-text{align-self:center;line-height:1}
  .site-header-main .brand-text small{display:none}
  /* Search bar row: only when switched ON, or opened from the bottom Search button */
  .site-header-main .search-box{display:none;order:9;flex:1 1 100%;max-width:none;height:42px;margin:4px 0 6px}
  .site-header-main.mv-h-search .search-box,html.mv-search-open .site-header-main .search-box{display:flex}
  html.mv-search-open .site-header.is-header-hidden,html.mv-search-open .category-bar{transform:none!important}
  /* count bubble sits on the icon corner */
  .site-header-main .header-action i{top:2px;left:auto;right:0}

  /* ---------- Bottom navigation ---------- */
  .mv-bn{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1001;background:var(--green-dark,#384a35);color:#fff;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));border-radius:16px 16px 0 0;box-shadow:0 -4px 18px rgba(0,0,0,.18)}
  .mv-bn-item{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;padding:4px 2px;background:transparent;color:rgba(255,255,255,.82);font:600 10.5px/1.1 Arial,sans-serif;border-radius:12px;-webkit-tap-highlight-color:transparent}
  .mv-bn-item svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
  .mv-bn-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em}
  .mv-bn-item.is-active{color:#fff;background:rgba(255,255,255,.16)}
  .mv-bn-item i{position:absolute;top:1px;left:calc(50% + 4px);min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;border-radius:9px;background:#f28b20;color:#fff;font:700 10px/17px Arial,sans-serif;text-align:center;font-style:normal}
  .mv-bn-item i[hidden]{display:none}
  .toast{bottom:84px}
}

/* Small phones (<= 360px): slightly smaller icons, logo and name so both always fit on one line */
@media (max-width:360px){
  .site-header-main{--mv-icon:38px}
  .site-header-main .header-action[data-mv],.site-header-main #moreMenuButton{min-width:38px;width:38px}
  .site-header-main .brand{gap:5px}
  .site-header-main .brand-logo{height:var(--mv-logo-h,30px)!important;max-height:var(--mv-logo-h,30px)!important;max-width:var(--mv-logo-w,60px)!important}
  .site-header-main .brand-mark{width:28px;height:28px;font-size:13px}
  .site-header-main .brand-text b{font-size:15px}
}