/** Shopify CDN: Minification failed

Line 201:0 Expected "}" to go with "{"

**/
/* =========================================================
   MODELITA – Mega menu kolomkoppen & subcategorieën
   Voorwaarde:
   - Alleen kolomkoppen in het mega menu hebben href="#"
   ========================================================= */

/* Alles in mega menu eerst normaal zichtbaar */
header .mega-menu__content a,
header .mega-menu__list a{
  color: #AC80A0 !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

/* === KOPPEN (href="#") === */
header .mega-menu__content a[href="#"],
header .mega-menu__list a[href="#"]{
  pointer-events: none !important;     /* niet klikbaar */
  cursor: default !important;
  font-size: 18px !important;          /* groter */
  font-weight: 800 !important;         /* vet */
  line-height: 1.25 !important;
  margin-bottom: 10px !important;
}

/* Geen hover of focus op koppen */
header .mega-menu__content a[href="#"]:hover,
header .mega-menu__list a[href="#"]:hover,
header .mega-menu__content a[href="#"]:focus,
header .mega-menu__list a[href="#"]:focus{
  background: transparent !important;
  color: #AC80A0 !important;
  text-decoration: none !important;
}

/* === SUBCATEGORIEËN (alles wat geen # is) === */
header .mega-menu__content a:not([href="#"]),
header .mega-menu__list a:not([href="#"]){
  font-size: 15px !important;
  font-weight: 400 !important;
  opacity: 1 !important;   /* klein verschil, niet doorzichtig */
}

/* Hover alleen op subcategorieën */
header .mega-menu__content a:not([href="#"]):hover,
header .mega-menu__list a:not([href="#"]):hover{
  opacity: 1 !important;
  text-decoration: underline !important;
}
/* =========================================================
   MODELITA – Mobiel menu: koppen vs links (drawer)
   ========================================================= */
@media (max-width: 768px) {

  /* Alles in mobiele menu standaard kleur */
  .menu-drawer a {
    color: #AC80A0 !important;
    text-decoration: none !important;
  }

  /* KOPPEN (href="#") groter & vetter */
  .menu-drawer a[href="#"] {
    font-size: 1.15rem !important;   /* ±18px */
    font-weight: 800 !important;
    pointer-events: none !important; /* geen klik */
    cursor: default !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.25rem !important;
  }

  /* SUBLINKS (klikbare items) kleiner */
  .menu-drawer a:not([href="#"]) {
    font-size: 0.95rem !important;   /* ±15px */
    font-weight: 500 !important;
    opacity: 1 !important;
    margin-left: 0.25rem !important; /* lichte inspringing */
  }

  /* Hover/focus alleen op sublinks */
  .menu-drawer a:not([href="#"]):hover {
    opacity: 1 !important;
    text-decoration: underline !important;
  }
/* =========================================================
   MODELITA – Mobiel: sublinks iets kleiner dan koppen
   ========================================================= */
@media (max-width: 768px) {

  /* Alleen de klikbare links onder de koppen */
  .menu-drawer .list-menu__item a:not([href="#"]),
  .menu-drawer .menu-drawer__menu-item a:not([href="#"]),
  .menu-drawer a:not([href="#"]) {
    font-size: 0.9rem !important;   /* ~14px – pas aan naar 0.88 / 0.92 naar smaak */
    font-weight: 500 !important;
  }
}
/* =========================================================
   MODELITA – Balk achter menu-koppen (mega menu + mobiel)
   ========================================================= */

/* Desktop mega menu koppen */
header .mega-menu__list a[href="#"]{
  display: inline-block !important;
  background: rgba(0,0,0,0.06);     /* subtiele zwarte balk */
  padding: 6px 10px !important;
  border-radius: 6px !important;
}

/* Mobiele drawer koppen */
@media (max-width: 768px){
  .menu-drawer a[href="#"]{
    display: block !important;
    background: rgba(0,0,0,0.06);
    padding: 8px 12px !important;
    border-radius: 6px;
    margin-top: 12px !important;
  }
}
/* =========================================================
   MODELITA – Zwarte balk (#202020) achter menu-koppen
   ========================================================= */

/* Desktop mega menu koppen */
header .mega-menu__list a[href="#"]{
  display: inline-block !important;
  background: #202020 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  color: #AC80A0 !important;   /* behoud Modelita roze tekst */
}

/* Mobiele drawer koppen */
@media (max-width: 768px){
  .menu-drawer a[href="#"]{
    display: block !important;
    background: #202020 !important;
    padding: 10px 16px !important;
    border-radius: 6px !important;
    margin-top: 14px !important;
    color: #AC80A0 !important;
  }
}/* Extra ruimte tussen kop-balk en eerste sublink */
@media (max-width: 768px){
  .menu-drawer a[href="#"]{
    margin-bottom: 12px !important;   /* was 0.25rem / 4px, nu mooier */
  }
}
/* =========================================================
   MODELITA – Mobiel drawer: hoofdmenu items (level 1) overal gelijk
   ========================================================= */
@media (max-width: 768px){

  /* Alle level-1 links en buttons zelfde kleur/opacity */
  .menu-drawer .list-menu > li > a,
  .menu-drawer .list-menu > li > details > summary,
  .menu-drawer .menu-drawer__menu > li > a,
  .menu-drawer .menu-drawer__menu > li > details > summary{
    color: #AC80A0 !important;
    opacity: 1 !important;
  }

  /* Ook als Shopify/Ritual hem 'active/current' maakt */
  .menu-drawer .is-active > a,
  .menu-drawer .is-active > details > summary,
  .menu-drawer .list-menu__item--active > a,
  .menu-drawer .list-menu__item--active > details > summary,
  .menu-drawer a[aria-current="page"],
  .menu-drawer a[aria-current="true"]{
    color: #AC80A0 !important;
    opacity: 1 !important;
  }
}
/* MODELITA – Mobiel hoofdmenu: alles zelfde gewicht (normaal zoals Nieuw) */
@media (max-width: 768px){
  .menu-drawer .list-menu > li > a,
  .menu-drawer .list-menu > li > details > summary,
  .menu-drawer .menu-drawer__menu > li > a,
  .menu-drawer .menu-drawer__menu > li > details > summary{
    font-weight: 500 !important; /* normaal/clean */
  }
}/* =========================================================
   MODELITA – Zwarte menu-koppen platter maken (zonder tekst te verschuiven)
   ========================================================= */
@media (max-width: 768px){
  .menu-drawer a[href="#"]{
    line-height: 1.2 !important;   /* compacter tekstblok */
    min-height: 36px !important;   /* was visueel ~48px, nu platter */
    display: flex !important;
    align-items: center !important; /* tekst mooi verticaal gecentreerd */
  }
}




