:root{
  --border:#e5e5e5;
  --hover:#fff8c4;
  --active:#fff3a6;
  --scroll-thumb:#cfcfcf;
  --scroll-track:#f2f2f2;
  --text:#222;
}

.gsm-mega-menu *{box-sizing:border-box}
.gsm-mega-menu{font-family:Arial,sans-serif;color:var(--text)}

/* ===== WRAPPER ===== */
.gsm-mega-menu.mega-menu-wrapper{
  display:flex;
  max-width:1900px;
  margin:0 auto;
  border-bottom:1px solid var(--border);
}

/* ===== LEFT (BRANDS) ===== */
.gsm-mega-menu .mega-menu-left{
  width:20%;
  height:520px;
  overflow-y:scroll;
  background:#fafafa;
  border-right:1px solid var(--border);
  list-style:none;
  margin:0;
  padding:4px 0;
}

/* SCROLLBAR */
.gsm-mega-menu .mega-menu-left::-webkit-scrollbar{width:7px}
.gsm-mega-menu .mega-menu-left::-webkit-scrollbar-track{background:var(--scroll-track)}
.gsm-mega-menu .mega-menu-left::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border-radius:4px;
}
.gsm-mega-menu .mega-menu-left{
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) var(--scroll-track);
}

.gsm-mega-menu .left-item{
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-size:14px;
  border-bottom:1px solid var(--border);
}
.gsm-mega-menu .left-item:hover,
.gsm-mega-menu .left-item.active{
  background:var(--hover);
  font-weight:600;
}

/* ===== BRAND LOGO FIX ===== */
.gsm-mega-menu .left-item img{
  width: 28px;          /* fixe Breite */
  height: 28px;         /* fixe Höhe → Quadrat */
  object-fit: contain;  /* ganzes Logo sichtbar */
  background: #fff;     /* optional: ruhiger Hintergrund */
  border-radius: 4px;   /* optional: leichtes Abrunden */
  padding: 2px;         /* optional: Luft bei schmalen Logos */
}


/* ===== MIDDLE (DESKTOP ONLY) ===== */
.gsm-mega-menu .mega-menu-middle{
  width:22%;
  height:520px;
  border-right:1px solid var(--border);
  display:none;
}

.gsm-mega-menu .mid-item{
  padding:8px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-size:14px;
}
.gsm-mega-menu .mid-item::after{
  content:"›";
  margin-left:auto;
  color:#999;
}
.gsm-mega-menu .mid-item:hover,
.gsm-mega-menu .mid-item.active{
  background:var(--hover);
  font-weight:600;
}
.gsm-mega-menu .mid-item a{color:inherit;text-decoration:none;display:block;width:100%}

/* ===== RIGHT (DESKTOP ONLY) ===== */
.gsm-mega-menu .mega-menu-right{
  width:58%;
  height:520px;
  padding:8px 14px;
  display:none;
}

.gsm-mega-menu .models-wrapper{
  display:flex;
  gap:12px;
  height:100%;
  overflow-y:auto;
}

.gsm-mega-menu .model-list{
  flex:1;
  list-style:none;
  margin:0;
  padding:0 8px;
  border-right:1px solid #eee;
}
.gsm-mega-menu .model-list:last-child{border-right:none}

.gsm-mega-menu .model-item{
  padding:6px 8px;
  font-size:13px;
  cursor:pointer;
  border-bottom:1px solid #f0f0f0;
}
.gsm-mega-menu .model-item:hover{
  background:var(--hover);
  font-weight:600;
}
.gsm-mega-menu .model-item a{color:inherit;text-decoration:none;display:block}

/* ===================================================
   MOBILE – TRUE SINGLE-LIST DRILLDOWN
   =================================================== */
@media (max-width:768px){
  .gsm-mega-menu.mega-menu-wrapper{display:block}
  .gsm-mega-menu .mega-menu-middle,
  .gsm-mega-menu .mega-menu-right{display:none !important}
  .gsm-mega-menu .mega-menu-left{
    width:100%;
    height:auto;
    overflow:visible;
  }
  .gsm-mega-menu .left-item{
    font-size:15px;
    padding:14px 18px;
  }

  /* + / − icons */
  .gsm-mega-menu .left-item::after{
    content:"+";
    margin-left:auto;
    font-weight:bold;
  }
  .gsm-mega-menu .left-item.open::after{content:"−"}
  .gsm-mega-menu .left-item.is-leaf::after{content:""}

  /* indentation */
  .gsm-mega-menu .submenu .left-item{padding-left:32px}
  .gsm-mega-menu .submenu .submenu .left-item{padding-left:48px}
}