/*
 * Store header on tablets and phones.
 * Loaded on its own, after the main stylesheet, so it needs no asset build.
 *
 * One top row: menu button, then the account links and the cart, then the logo.
 * The search box takes the row below. (Before, the account links and the cart had a third
 * row of their own under the search box.)
 */
@media (max-width: 991px) {
  .custonm_navbar .wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  /* the logo and the menu button become items of the row itself, so the links can sit between them */
  .custonm_navbar .logo_navbar {
    display: contents;
  }
  .custonm_navbar .logo_navbar .menu_icon {
    order: 1;
    flex: 0 0 auto;
    padding: 0;
  }
  .custonm_navbar .login_sign {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
  }
  .custonm_navbar .logo_navbar a.logo {
    order: 3;
    flex: 0 0 auto;
    margin: 0;
  }
  .custonm_navbar .search_login {
    order: 4;
    flex: 0 0 100%;
    margin: 10px 0 0;
  }

  .custonm_navbar .login_sign ul {
    justify-content: center;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0 8px;
  }
  .custonm_navbar .login_sign li a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
  .custonm_navbar .login_sign li a span {
    font-size: 0.9rem;
  }
  .custonm_navbar .login_sign li a img {
    width: 20px;
    margin: 0;
    margin-inline-end: 6px;
  }
  .custonm_navbar .login_sign .line span {
    height: 18px;
    margin: 0 12px;
  }
}

/* phones: the header has no cart; the floating cart button (below) is always on screen instead */
@media (max-width: 600px) {
  .custonm_navbar .login_sign ul {
    padding: 0 4px;
  }
  .custonm_navbar .login_sign li a span {
    font-size: 0.85rem;
  }
  .custonm_navbar .login_sign .line span {
    margin: 0 8px;
  }
  /* Sign Out shows its words only */
  .custonm_navbar .login_sign .nav_sign_out a img {
    display: none;
  }
  /* the cart, and the divider in front of it */
  .custonm_navbar .login_sign .backet_icon,
  .custonm_navbar .login_sign li:nth-last-of-type(2).line {
    display: none !important;
  }
}

/* ------------------------------------------------------------------------------------------
 * Floating cart button (phones and tablets)
 * A round button in the bottom corner that appears once the header has scrolled away,
 * so the cart is always one tap away. Hidden on desktop, where the header cart is enough.
 * ------------------------------------------------------------------------------------------ */
.floating_cart {
  display: none;
}
@media (max-width: 991px) {
  .floating_cart {
    position: fixed;
    bottom: 18px;
    inset-inline-end: 16px;
    z-index: 990;                 /* above the page, below the cart panel and its overlay */
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #010d77;
    box-shadow: 0 4px 14px rgba(1, 13, 119, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* hidden until the page is scrolled */
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.9);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s;
  }
  .floating_cart.is_visible {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .floating_cart:active {
    transform: scale(0.94);
  }
  .floating_cart img {
    width: 26px;
    height: 26px;
    filter: brightness(0) invert(1);   /* the navy cart icon, in white */
  }
  .floating_cart .bulletNum {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 11px;
    background-color: #f84242;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* phones: there is no cart in the header, so the floating button is there from the start */
@media (max-width: 600px) {
  .floating_cart {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* while the cart panel is open the floating button is hidden (the panel has its own close button) */
.floating_cart.is_covered {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

/* ------------------------------------------------------------------------------------------
 * The slide-out menu's list is hidden until the menu script has turned it into the menu.
 * (It is a plain list in the page; before the script runs it showed as a long bulleted list
 * at the very top of the page. The loading screen used to cover that.)
 * ------------------------------------------------------------------------------------------ */
nav#menu:not(.mm-menu) {
  display: none !important;
}