/* Glue layer.
   Only for gaps the source's own CSS cannot cover in the replica context.

   MOBILE NAVIGATION — a deliberate addition the source does not have. Its own CSS
   hides the menu AND the hamburger below 768px, leaving phone users with no way to
   reach a category from the header. Requested by the store owner.

   Everything below is inside @media (max-width: 767px) so the desktop and tablet
   rendering (verified pixel-identical to the source) is completely untouched.
   Palette taken from the source: #fdb819 brand yellow, #212121 dark, #626262 body. */

.ra-mnav-toggle { display: none; }

@media (max-width: 767px) {

  /* --- trigger -------------------------------------------------------------
     Kept in normal flow at the top of the branding block. It was originally
     absolutely positioned and vertically centred, which dropped it straight on
     top of the search field, since .site-branding is ~312px tall on a phone. */
  .ra-mnav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 2px 12px;
    padding: 10px 14px;
    border: 0;
    border-radius: 4px;
    background: #212121;
    color: #fff;
    font-family: Rubik, sans-serif;
    font-size: 13px;
    letter-spacing: .03em;
    line-height: 1;
    cursor: pointer;
  }
  .ra-mnav-toggle:focus-visible { outline: 2px solid #fdb819; outline-offset: 2px; }
  .ra-mnav-bars { display: block; width: 16px; }
  .ra-mnav-bars i {
    display: block;
    height: 2px;
    margin: 3px 0;
    background: #fdb819;
    border-radius: 2px;
  }

  /* --- overlay ------------------------------------------------------------- */
  .ra-mnav-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .22s ease;
  }
  .ra-mnav-overlay.is-open { opacity: 1; }

  /* --- drawer -------------------------------------------------------------- */
  .ra-mnav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 9999;
    width: 86%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    background: #fff;
    font-family: Rubik, sans-serif;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.22, .61, .36, 1);
    box-shadow: 0 0 28px rgba(0, 0, 0, .28);
  }
  .ra-mnav.is-open { transform: translateX(0); }

  /* An author `display` declaration beats the UA rule for [hidden], so the closed
     drawer computed to display:flex and stayed in the a11y tree / tab order even
     though it was off-screen. Restore what [hidden] is supposed to mean. */
  .ra-mnav[hidden],
  .ra-mnav-overlay[hidden] { display: none !important; }

  .ra-mnav-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #212121;
    color: #fff;
  }
  .ra-mnav-title { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
  .ra-mnav-close {
    border: 0;
    background: none;
    color: #fdb819;
    font-size: 30px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
  }

  .ra-mnav-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .ra-mnav-sec { border-bottom: 1px solid #ececec; padding: 6px 0; }
  .ra-mnav-h {
    margin: 10px 16px 4px;
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #9a9a9a;
    font-weight: 500;
  }

  .ra-mnav ul { list-style: none; margin: 0; padding: 0; }
  .ra-mnav-menu > li > a,
  .ra-mnav-cats > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    color: #212121;
    font-size: 15px;
    text-decoration: none;
    border-left: 3px solid transparent;
  }
  .ra-mnav-menu > li > a:active,
  .ra-mnav-cats > li > a:active { background: #fafafa; }
  .ra-mnav-menu > li.current-menu-item > a {
    border-left-color: #fdb819;
    background: #fffaef;
    font-weight: 500;
  }
  /* second level */
  .ra-mnav-menu .sub-menu > li > a {
    display: block;
    padding: 10px 16px 10px 30px;
    color: #626262;
    font-size: 14px;
    text-decoration: none;
  }
  .ra-mnav-cats > li > a em {
    font-style: normal;
    font-size: 12px;
    color: #9a9a9a;
    background: #f4f4f4;
    border-radius: 10px;
    padding: 2px 8px;
  }

  .ra-mnav-all {
    display: block;
    margin: 8px 16px 12px;
    padding: 11px 14px;
    text-align: center;
    background: #fdb819;
    color: #212121;
    font-size: 14px;
    font-weight: 500;
    border-radius: 3px;
    text-decoration: none;
  }

  .ra-mnav-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 22px; }
  .ra-mnav-foot a {
    flex: 1 1 45%;
    padding: 11px 10px;
    text-align: center;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    color: #212121;
    font-size: 14px;
    text-decoration: none;
  }
  .ra-mnav-call { flex-basis: 100% !important; background: #212121; color: #fff !important; border-color: #212121 !important; }
  .ra-mnav-cartn {
    display: inline-block;
    min-width: 18px;
    margin-left: 4px;
    padding: 1px 5px;
    background: #fdb819;
    color: #212121;
    border-radius: 9px;
    font-size: 12px;
  }

  /* stop the page scrolling behind the open drawer */
  body.ra-mnav-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .ra-mnav, .ra-mnav-overlay { transition: none; }
}