/* ===== Shell (overlay) ===== */
.aaap-menu-wrap{
  position:fixed; inset:0; z-index:9999;
  visibility:hidden; opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.aaap-menu-wrap[aria-hidden="false"]{
  visibility:visible; opacity:1; pointer-events:auto;
}
.aaap-menu-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
html.aaap-menu-open{ overflow:hidden; }

/* ===== LEFT drawer (structure) ===== */
/* We target both our class and your old .menu-panel */
.aaap-menu-panel,
.menu-panel{
  position:relative;
  background:#fff;
  width:360px;            /* change to taste */
  max-width:86vw;
  height:100vh;
  overflow:auto;
  padding:36px 20px;
  border-right:1px solid #eee;
  margin-right:auto;      /* stick to LEFT edge */
  display:none;

  /* left-slide animation */
  transform:translateX(-100%);
  transition:transform .4s ease, opacity .4s ease;
  opacity:0;
}
.aaap-menu-panel.aaap-active,
.menu-panel.active{
  display:block;
  opacity:1;
}
.aaap-menu-wrap[aria-hidden="false"] .aaap-menu-panel.aaap-active,
.aaap-menu-wrap[aria-hidden="false"] .menu-panel.active{
  transform:translateX(0);
}

/* ===== Your typography/look ===== */
.menu-section-title{
  font-size:11px;
  text-transform:uppercase;
  color:#999;
  font-weight:500;
  margin:18px 0 12px;
}
/* Our alias so either class works */
.aaap-title{ composes: menu-section-title; } /* ignored by browsers that don't support; harmless */

.menu-list{
  list-style:none;
  margin:0;
  padding:4px;
}
.menu-list li{ margin-bottom:32px; }
.menu-list a{
  color:#111;
  font-weight:500;
  text-decoration:none;
  font-size:16px;
}
.menu-list a:hover{ color:#555; }

.breadcrumb{
  display:block;
  margin-bottom:20px;
  color:#999;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
}
.chevron-icon{
  flex-shrink:1;
  margin-left:4px;
  stroke:#999;
  position:relative;
  top:2px;
}

/* HIDE Moderno's own mobile off-canvas (replace with the real container selector) */
.c-header__mobile-menu,
.c-header__drawer,
.c-offcanvas,
.js-mobile-menu { display: none !important; }

/* If your header row is flex and you want the trigger on the far left */
.aaap-left { order:-999; margin-right:auto; }

/* Layout for the trigger link (icon + text) */
.aaap-menu-link,
.aaap-menu-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* Make the cloned Moderno icon bigger (tweak as you like) */
.aaap-burger-icon{
  font-size:20px;       /* works for <i> font icons */
  line-height:1;
  display:inline-block;
}

/* Desktop: show icon + text; Mobile: icon-only */
@media (max-width: 1024px){
  .aaap-menu-text{ display:none; }
}
@media (max-width: 767px) {
  .fi-bd21-hamburger{
      display:none !important;
  }
}
@media (max-width: 767px) {
  .c-header__menu-button {
   
    visibility: hidden;
  }
.h-cb.c-header__button-link.c-header__custom-button{
      position:absolute;
      left:10px;
  }
}