/* =========================================================================
   CBD (v32) — mobile / tablet hamburger nav  (shown below 1200px)
   Shared by the homepage and inner pages. Above 1200px the desktop headers
   take over (the .cbd-scroll-header pill on the homepage, the .cbd-inner-header
   bar on inner pages) and this whole component is hidden. Self-contained fonts
   so it does not depend on which stylesheet loaded it.
   ========================================================================= */

@font-face { font-family: 'Moche'; src: url('../assets/fonts/Moche-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'poppins'; src: url('../assets/fonts/Poppins-Light_0.ttf') format('truetype'); font-weight: 300; font-display: swap; }

.cbd-mnav, .cbd-mnav-backdrop, .cbd-mnav-panel { display: none; }

@media (max-width: 1199px) {

  /* ── Top bar (hamburger left · logo centred) ─────────────────────────── */
  .cbd-mnav {
    position: sticky; top: 0; z-index: 9998;   /* above ALL page content (incl. the footer's z-999 cart tape) so the hamburger is always tappable; still below the open panel/backdrop */
    display: flex; align-items: center; justify-content: space-between;
    height: 64px; padding: 0 16px;
    background: #FFAF34; color: #1F130D;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
  }
  /* Hide the bar while a full-screen overlay is open (Bootstrap modal -> body.modal-open;
     product customise slide -> html.menuPSlide) so it never covers it. */
  body.modal-open .cbd-mnav,
  .menuPSlide .cbd-mnav { visibility: hidden; }
  .cbd-mnav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 9px; border: 0; background: none; cursor: pointer;
  }
  .cbd-mnav-toggle span { display: block; width: 100%; height: 2.5px; border-radius: 2px; background: #1F130D; }
  /* Right-side actions: logged-in user icon+dropdown (reuses .cbd-user from modals.css) + hamburger */
  .cbd-mnav-actions { display: flex; align-items: center; gap: 10px; }
  .cbd-mnav-logo { display: inline-flex; }
  .cbd-mnav-logo img { height: 34px; width: auto; }
  /* logo left, hamburger right (justify-content: space-between), matching v30 */

  /* ── Backdrop ────────────────────────────────────────────────────────── */
  .cbd-mnav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 10000;   /* above the footer's z-999 cart tape and z-9999 cart bars */
    background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .cbd-mnav-backdrop.is-open { opacity: 1; visibility: visible; }

  /* ── Slide-out panel ─────────────────────────────────────────────────── */
  .cbd-mnav-panel {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; z-index: 10001;   /* above the backdrop + the footer's high-z cart elements */
    width: min(84vw, 340px); height: 100%;
    background: #25160F; color: #F8E7D1;
    padding: 20px 24px 32px; overflow-y: auto;
    transform: translateX(100%); transition: transform .3s ease;
  }
  .cbd-mnav-panel.is-open { transform: translateX(0); }
  .cbd-mnav-close {
    align-self: flex-end; width: 40px; height: 40px; border: 0; background: none;
    color: #F8E7D1; font-size: 30px; line-height: 1; cursor: pointer;
  }
  .cbd-mnav-panel-logo { display: inline-flex; margin: 2px 0 18px; }
  .cbd-mnav-panel-logo img { height: 58px; width: auto; }
  .cbd-mnav-links { display: flex; flex-direction: column; }
  .cbd-mnav-links a {
    font-family: 'Moche', serif; font-size: 20px; color: #F8E7D1;
    padding: 14px 2px; border-bottom: 1px solid rgba(248, 231, 209, .14);
    transition: color .2s;
  }
  .cbd-mnav-links a:hover,
  .cbd-mnav-links a.is-active { color: #FFAF34; }

  /* Panel auth (Login/Register for guests, or profile links + Logout when signed in) */
  .cbd-mnav-auth { display: flex; flex-direction: column; }
  .cbd-mnav-auth a {
    font-family: 'Moche', serif; font-size: 18px; color: #F8E7D1;
    padding: 13px 2px; border-bottom: 1px solid rgba(248, 231, 209, .14); transition: color .2s;
  }
  .cbd-mnav-auth a:hover { color: #FFAF34; }

  .cbd-mnav-panel-footer { margin-top: auto; padding-top: 24px; }
  .cbd-mnav-social { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
  .cbd-mnav-social span { font-family: 'Moche', serif; font-size: 15px; color: #F8E7D1; }
  .cbd-mnav-social a { width: 24px; height: 24px; display: inline-flex; }
  .cbd-mnav-social img { width: 100%; height: 100%; }
  .cbd-mnav-directions {
    display: inline-flex; align-items: center; gap: 8px;
    background: #FFAF34; color: #1F130D; border-radius: 999px;
    padding: 12px 20px; font-family: 'poppins', 'Helvetica Neue', sans-serif; font-weight: 700; font-size: 14px;
  }
  .cbd-mnav-directions img { width: 15px; height: 15px; }

  /* Lock page scroll while the panel is open (beats the inner layout's inline overflow:auto). */
  body.cbd-mnav-lock { overflow: hidden !important; }
}