/* V45: storefront header — Jaya-style arrow menu followed by the site logo.
   The current layout remains selectable in Admin > Setup, with menu_logo as default. */
.rp-top-final,
.rp-top{
  height:64px!important;
  min-height:64px!important;
  max-height:64px!important;
  padding:7px 12px!important;
  background:linear-gradient(180deg,#111d2c 0%,#0b1523 100%)!important;
  border-bottom:1px solid rgba(157,179,209,.20)!important;
}
.rp-top-final .rp-brand-left,
.rp-top .rp-brand-left{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:9px!important;
  height:48px!important;
  max-width:158px!important;
  min-width:0!important;
}
/* Screenshot order: arrow / 3-line navigation button first, logo immediately after it. */
.rp-top-final[data-header-layout="menu_logo"] .rp-menu,
.rp-top[data-header-layout="menu_logo"] .rp-menu{
  order:1!important;
}
.rp-top-final[data-header-layout="menu_logo"] .rp-logo,
.rp-top[data-header-layout="menu_logo"] .rp-logo{
  order:2!important;
}
/* Keep the alternate admin layout working when it is intentionally selected. */
.rp-top-final[data-header-layout="logo_menu"] .rp-logo,
.rp-top[data-header-layout="logo_menu"] .rp-logo{order:1!important}
.rp-top-final[data-header-layout="logo_menu"] .rp-menu,
.rp-top[data-header-layout="logo_menu"] .rp-menu{order:2!important}

.rp-top-final .rp-menu,
.rp-top .rp-menu{
  position:relative!important;
  flex:0 0 42px!important;
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  font-size:0!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
}
/* Three short lines, then a right-facing arrow — matching the reference navigation control. */
.rp-top-final .rp-menu::before,
.rp-top .rp-menu::before,
.rp-side.open ~ .rp-shade + .rp-top .rp-menu::before,
body.side-open .rp-menu::before{
  content:""!important;
  position:absolute!important;
  left:2px!important;
  top:11px!important;
  width:26px!important;
  height:21px!important;
  display:block!important;
  background:
    linear-gradient(#8293ab,#8293ab) 0 1px/21px 4px no-repeat,
    linear-gradient(#8293ab,#8293ab) 0 9px/21px 4px no-repeat,
    linear-gradient(#8293ab,#8293ab) 0 17px/21px 4px no-repeat!important;
  border:0!important;
  border-radius:0!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  transition:filter .18s ease,transform .18s ease!important;
}
.rp-top-final .rp-menu::after,
.rp-top .rp-menu::after{
  content:""!important;
  position:absolute!important;
  left:24px!important;
  top:14px!important;
  width:12px!important;
  height:12px!important;
  display:block!important;
  border-top:4px solid #8293ab!important;
  border-right:4px solid #8293ab!important;
  border-radius:1px!important;
  transform:rotate(45deg)!important;
  transform-origin:center!important;
  box-sizing:border-box!important;
  opacity:1!important;
  transition:border-color .18s ease,transform .18s ease!important;
}
.rp-top-final .rp-menu:active::before,
.rp-top .rp-menu:active::before{transform:translateX(2px)!important;filter:brightness(1.32)!important}
.rp-top-final .rp-menu:active::after,
.rp-top .rp-menu:active::after{transform:rotate(45deg) translate(1px,-1px)!important;border-color:#c5d5e9!important}
.rp-top-final .rp-menu:focus-visible,
.rp-top .rp-menu:focus-visible{outline:2px solid #ffd84a!important;outline-offset:3px!important;border-radius:8px!important}

.rp-top-final .rp-logo,
.rp-top .rp-logo{
  flex:0 0 92px!important;
  width:92px!important;
  min-width:92px!important;
  max-width:92px!important;
  height:48px!important;
  margin:0!important;
  padding:0!important;
  justify-content:flex-start!important;
}
.rp-top-final .rp-logo img,
.rp-top-final .rp-logo .royals-logo-img,
.rp-top .rp-logo img,
.rp-top .rp-logo .royals-logo-img{
  max-width:92px!important;
  max-height:46px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
}
@media(max-width:380px){
  .rp-top-final,.rp-top{height:60px!important;min-height:60px!important;padding:6px 8px!important}
  .rp-top-final .rp-brand-left,.rp-top .rp-brand-left{gap:6px!important;max-width:140px!important}
  .rp-top-final .rp-menu,.rp-top .rp-menu{flex-basis:38px!important;width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important}
  .rp-top-final .rp-menu::before,.rp-top .rp-menu::before{left:1px!important;top:9px!important;transform:scale(.92)!important;transform-origin:left top!important}
  .rp-top-final .rp-menu::after,.rp-top .rp-menu::after{left:22px!important;top:12px!important}
  .rp-top-final .rp-logo,.rp-top .rp-logo{flex-basis:84px!important;width:84px!important;min-width:84px!important;max-width:84px!important;height:42px!important}
  .rp-top-final .rp-logo img,.rp-top-final .rp-logo .royals-logo-img,.rp-top .rp-logo img,.rp-top .rp-logo .royals-logo-img{max-width:84px!important;max-height:41px!important}
}