/* The mobile brand header is present in HTML and never enters through animation. */
.sb-mobile-header { display: none; }
.sb-mobile-tabbar { display: none; }

/* Keep the complete brand lockup compact and centered within the header. */
@media (min-width: 992px) {
  #site-header .header-desktop .site-logo { display: flex; align-items: center; }
  #site-header .header-desktop .sb-logo { display: flex; width: fit-content; gap: 9px; padding: 0; }
  #site-header .header-desktop .sb-logo-mark { width: 40px !important; height: 40px !important; border-radius: 8px; }
  #site-header .header-desktop .sb-logo-title { font-size: 32px; line-height: 1; }
  #site-header .header-desktop .sb-logo-sub { margin-top: 4px; font-size: 6.5px; line-height: 1.2; letter-spacing: 0.28em; }
}

@media (max-width: 991px) {
  #site-header { position: relative !important; transform: none !important; opacity: 1 !important; }
  #site-header .header-desktop { display: none !important; }
  #site-header .sb-mobile-header {
    display: flex !important;
    align-items: center;
    gap: 10px;
    height: 56px !important;
    padding: 0 12px !important;
    background: #081716;
    color: #fff;
  }
  .sb-mobile-header .sb-header-menu {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 44px;
    padding: 6px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
  }
  .sb-mobile-header svg, .sb-mobile-tabbar svg { display: block; width: 22px; height: 22px; }
  #site-header .sb-mobile-header .sb-header-brand { display: flex; flex: 1; min-width: 0; gap: 6px; min-height: 44px; padding: 0; }
  #site-header .sb-mobile-header .sb-logo-mark { width: 28px !important; height: 28px !important; border-radius: 6px; }
  #site-header .sb-mobile-header .sb-logo-title { font-size: clamp(16px, 4.6vw, 20px); line-height: 1; }
  #site-header .sb-mobile-header .sb-logo-sub { font-size: 5px; line-height: 1.2; letter-spacing: 0.12em; margin-top: 3px; }
  .sb-header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
  #site-header .sb-mobile-header .sb-header-actions .mojuri-topcart { margin: 0; }
  #site-header .sb-mobile-header .cart-icon { display: grid; place-items: center; width: 32px; height: 44px; padding: 0; }
  #site-header .sb-mobile-header .icons-cart { position: relative; width: 24px; height: 24px; line-height: 1; }
  #site-header .sb-mobile-header .cart-count { position: absolute; top: -6px; right: -5px; width: 16px; height: 16px; line-height: 16px; font-size: 10px; }
  #site-header .sb-mobile-header .sb-mobile-quote { padding: 7px 10px; color: #ffd84d !important; border: 1px solid #ffd84d; border-radius: 30px; font: 700 9px/1.5 "Lato", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
  .sb-mobile-header :is(button,a):focus-visible, .sb-mobile-tabbar :is(button,a):focus-visible { outline: 2px solid #ffd84d; outline-offset: 2px; }
  .sb-mobile-header :is(button,a), .sb-mobile-tabbar :is(button,a) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .sb-mobile-header :is(button,a):active, .sb-mobile-tabbar :is(button,a):active { opacity: .7; }
}

@media (max-width: 767px) {
  .sb-mobile-tabbar.header-mobile-fixed {
    position: fixed;
    display: flex !important;
    align-items: center;
    justify-content: space-around;
    inset: auto 0 0 !important;
    width: 100%;
    height: 52px;
    padding: 0;
    background: #081716;
    color: #ffd84d;
    z-index: 1000;
  }
  .sb-mobile-tabbar > div { display: flex; justify-content: center; flex: 1; }
  .sb-mobile-tabbar :is(a,button) { display: grid; place-items: center; width: 56px; height: 48px; padding: 0; border: 0; background: transparent; color: #ffd84d; cursor: pointer; }
}

@media (max-width: 360px) {
  #site-header .sb-mobile-header { gap: 6px; padding-inline: 8px !important; }
  .sb-mobile-header .sb-header-menu { flex-basis: 30px; width: 30px; }
  .sb-header-actions { gap: 7px; }
  #site-header .sb-mobile-header .sb-mobile-quote { padding-inline: 8px; }
}

@media (max-width: 280px) {
  #site-header .sb-mobile-header { height: 14vw !important; gap: 1vw; padding-inline: 1vw !important; }
  .sb-mobile-header .sb-header-menu { flex-basis: 10vw; width: 10vw; height: 12vw; padding: 1vw; }
  .sb-mobile-header svg, .sb-mobile-tabbar svg { width: 6vw; height: 6vw; }
  #site-header .sb-mobile-header .sb-header-brand { gap: 1vw; min-height: 12vw; }
  #site-header .sb-mobile-header .sb-logo-mark { width: 7.5vw !important; height: 7.5vw !important; }
  #site-header .sb-mobile-header .sb-logo-title { font-size: 4.5vw !important; }
  #site-header .sb-mobile-header .sb-logo-sub { font-size: 1.3vw !important; }
  #site-header .sb-mobile-header .cart-icon { width: 10vw; height: 12vw; }
  #site-header .sb-mobile-header .icons-cart { width: 6vw; height: 6vw; }
  .sb-header-actions { gap: 0; }
  .sb-mobile-tabbar.header-mobile-fixed { height: 14vw !important; }
  .sb-mobile-tabbar :is(a,button) { height: 14vw; width: 20vw; }
}