/*
 Theme Name: Damesmotorshop Child
 Theme URI: https://damesmotorshop.nl
 Description: Child theme voor Shoptimizer
 Author: Kimberley
 Version: 1.0.0
 Text Domain: damesmotorshop-child

 Template: shoptimizer
*/

:root{
  /* Brand */
  --main-purple:#8224E3;      /* primary */
  --purple-ink:#6B1BC4;       /* hover/active */

  /* Accent (sale/promo/badges e.d.) */
  --accent:#F59E0B;
  --accent-ink:#111827;       /* tekst op accent */

  /* UI basics */
  --ink:#111827;              /* hoofdtekst */
  --muted:#6B7280;            /* secundaire tekst */
  --surface:#FFFFFF;          /* vlakken */
  --surface-muted:#F8FAFC;    /* kaart/mega-menu bg */
  --border:#E5E7EB;

  /* States & focus (optioneel) */
  --success:#16A34A;
  --warning:#D97706;
  --danger:#DC2626;
  --info:#2563EB;
  --focus:#C4B5FD;

  /* jouw bestaande menu-vars kun je laten staan */
  --nav-h:54px;
  --dd-pad:22px;
  --dd-radius:16px;
  --dd-shadow:0 10px 30px rgba(0,0,0,.10), 0 30px 60px rgba(0,0,0,.10);
  --item-pad-y:13px;
  --item-pad-x:16px;
  --item-gap-y:8px;
  --col-gap:32px;
  --row-gap:14px;
}

/* === Basis navbar === */
.main-navigation,
.main-navigation ul.menu{ background:#fff !important; }
.main-navigation .menu,
.main-navigation .sub-menu,
.main-navigation .mega-menu{ margin:0 !important; padding:0 !important; list-style:none !important; }
.main-navigation ul ul{ margin-left:0 !important; padding-left:0 !important; }
.main-navigation .menu > li{ margin:0 !important; padding:0 !important; position:relative; }

/* === Top-level items (kleur/typografie gelijk aan knop) === */
.main-navigation .menu > li > a,
.main-navigation .menu .menu-button > a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:var(--nav-h) !important;
  padding:0 14px !important;
  font-size:1em !important;
  font-weight:600 !important;
  color:var(--main-purple) !important;
  text-decoration:none !important;
  line-height:1 !important;
  background:transparent !important;
  border:0 !important;
}
.main-navigation .menu > li > a:hover,
.main-navigation .menu > li > a:focus{
  color:var(--purple-ink) !important;
}

/* === “Kies je categorie” als outline‑button (match kleur/hoogte) === */
.main-navigation .menu .menu-button > a{
  border:1px solid var(--main-purple) !important;
  border-radius:6px !important;
  background:transparent !important;
  padding:0 14px !important;
  height:calc(var(--nav-h) - 8px) !important;  /* 4px lucht boven/onder */
  margin-top:4px !important;
  transition:background-color .2s ease, transform .15s ease;
}
.main-navigation .menu .menu-button > a:hover{
  background-color:color-mix(in srgb, var(--main-purple) 12%, transparent) !important;
  transform:translateY(-1px);
}
/* binnen-span ‘pill’ volledig uit */
.main-navigation .menu .menu-button > a > span{
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; font-size:inherit !important; line-height:inherit !important; color:var(--main-purple) !important;
}
/* hover‑state vasthouden terwijl dropdown actief is */
.main-navigation .menu .menu-button:hover > a,
.main-navigation .menu .menu-button:focus-within > a,
.main-navigation .menu .menu-button.toggled-on > a,
.main-navigation .menu .menu-button > a[aria-expanded="true"]{
  background-color:color-mix(in srgb, var(--main-purple) 12%, transparent) !important;
  transform:translateY(-1px);
}

/* =========================================
   DROPDOWNS – zelfde look & feel als navbar
   ========================================= */

/* A) Gewone (kleine) dropdown-bubble */
.main-navigation .menu > li > .sub-menu:not(.mega-menu){
  position:absolute; top:100%; left:0; right:auto; z-index:9999;
  margin:14px 0 0 0 !important;             /* geen “links‑gat” */
  padding:var(--dd-pad) !important;
  min-width:340px;
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--dd-radius) !important;
  box-shadow:var(--dd-shadow);
  overflow:hidden; isolation:isolate; contain:layout paint; /* clip netjes */
  animation:dms-pop .2s ease-out both;
}
.main-navigation .menu > li > .sub-menu:not(.mega-menu) li + li{ margin-top:var(--item-gap-y); }
.main-navigation .menu > li > .sub-menu:not(.mega-menu) a{
  display:block; padding:var(--item-pad-y) var(--item-pad-x);
  border-radius:12px; color:var(--ink) !important; font-weight:500;
  text-decoration:none !important;
  transition:background-color .18s ease, color .18s ease, transform .18s ease;
}
.main-navigation .menu > li > .sub-menu:not(.mega-menu) a:hover{
  background:rgba(130,36,227,.10); color:var(--main-purple) !important; transform:translateX(2px);
}

/* B) MEGA‑MENU paneel — matcht kleuren, typografie, spacing */
.main-navigation .menu > li > .mega-menu{
  position:absolute; top:100%; left:0; right:auto; z-index:9998;
  margin:14px 0 0 0 !important;            /* geen extra linker marge */
  padding:calc(var(--dd-pad) + 2px) calc(var(--dd-pad) + 2px) !important;
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--dd-radius) !important;
  box-shadow:var(--dd-shadow);
  overflow:hidden; isolation:isolate; contain:layout paint;
  animation:dms-pop .22s ease-out both;

  /* Layout: zijbalk links + 3 kolommen rechts */
  display:grid !important;
  grid-template-columns: 260px 1fr 1fr 1fr;
  column-gap:var(--col-gap);
  row-gap:var(--row-gap);
  min-width:1040px;  /* ruimer, modern */
}

/* inkom‑animatie (subtiele fade + pop) */
@keyframes dms-pop{ from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);} }

/* Linker kolom (eerste li) = sectie + vertical list */
.main-navigation .menu > li > .mega-menu > li:first-child{
  grid-column:1; grid-row:1 / -1;
  padding-right:26px; border-right:1px solid rgba(0,0,0,.06);
}
.main-navigation .menu > li > .mega-menu > li:first-child > a{
  display:block; padding:6px 8px !important; margin:0 0 10px !important;
  font-size:.86rem !important; font-weight:700 !important;
  text-transform:uppercase; letter-spacing:.02em; color:var(--muted) !important;
  background:transparent !important; pointer-events:none; border-radius:6px;
}
.main-navigation .menu > li > .mega-menu > li:first-child > .sub-menu{
  position:static !important; margin:0 !important; padding:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important; min-width:0 !important;
}
.main-navigation .menu > li > .mega-menu > li:first-child > .sub-menu > li + li{ margin-top:var(--item-gap-y); }
.main-navigation .menu > li > .mega-menu > li:first-child > .sub-menu > li > a{
  display:block; padding:var(--item-pad-y) var(--item-pad-x);
  border-radius:12px; color:var(--ink) !important; font-weight:500;
  text-decoration:none !important;
  transition:background-color .18s ease, color .18s ease, transform .18s ease;
}
.main-navigation .menu > li > .mega-menu > li:first-child > .sub-menu > li > a:hover{
  background:rgba(130,36,227,.10); color:var(--main-purple) !important; transform:translateX(2px);
}

/* Rechter kolommen (auto-flow) + subtiele scheiding */
.main-navigation .menu > li > .mega-menu > li:not(:first-child){
  border-left:1px solid rgba(0,0,0,.06);
  padding-left:26px;
}
/* eerste rechter kolom (posities 2,5,8,...) géén lijn */
.main-navigation .menu > li > .mega-menu > li:nth-child(3n + 2){ border-left:0; padding-left:0; }

/* Kolomkopjes rechts (optioneel) */
.main-navigation .mega-menu > li > a{
  padding:6px 8px !important; margin:0 0 10px !important;
  font-size:.86rem !important; font-weight:700 !important;
  text-transform:uppercase; letter-spacing:.02em; color:var(--muted) !important;
  background:transparent !important; border-radius:6px; pointer-events:none;
}

/* Klikbare links rechts */
.main-navigation .mega-menu li li > a{
  display:block !important; padding:var(--item-pad-y) var(--item-pad-x) !important;
  border-radius:12px !important; color:var(--ink) !important; font-weight:500 !important;
  text-decoration:none !important;
  transition:background-color .18s ease, color .18s ease, transform .18s ease;
}
.main-navigation .mega-menu li li + li > a{ margin-top:var(--item-gap-y); }
.main-navigation .mega-menu li li > a:hover,
.main-navigation .mega-menu li.current-menu-item > a{
  background:rgba(130,36,227,.10); color:var(--main-purple) !important; transform:translateX(2px);
}

/* Chevron/arrow naar rechts uitlijnen (meeste themes) */
.main-navigation .mega-menu a > .submenu-toggle,
.main-navigation .mega-menu a > .arrow,
.main-navigation .mega-menu a > .caret,
.main-navigation .sub-menu a > .submenu-toggle{ margin-left:auto; opacity:.55; transform:translateY(1px); }

/* Focus toegankelijkheid */
.main-navigation a:focus-visible{ outline:2px solid color-mix(in srgb, var(--main-purple) 45%, #0000); outline-offset:2px; border-radius:8px; }

/* === Mobiel/off‑canvas: vlak en ruim === */
@media (max-width: 992px){
  .main-navigation .menu > li > .sub-menu:not(.mega-menu){
    position:static; min-width:auto; margin:0 !important; padding:10px 0 !important;
    border:0 !important; border-radius:10px !important; box-shadow:none !important;
  }
  .main-navigation .menu > li > .mega-menu{
    position:static; min-width:auto; margin:0 !important; padding:10px 0 !important;
    border:0 !important; border-radius:10px !important; box-shadow:none !important; display:block !important;
  }
  .main-navigation .menu > li > .mega-menu > li:first-child{ border-right:0; padding-right:0; }
  .main-navigation .menu > li > .mega-menu > li:not(:first-child){ border-left:0; padding-left:0; }
  .main-navigation .mega-menu li li > a{ padding:14px 16px !important; }
  .main-navigation .mega-menu li li + li > a{ margin-top:8px; }
}


/* HIERBOVEN IS GOED */

/* =====================================
   DMS — Shoptimizer default, modern edges
   (géén wijziging aan open/close gedrag)
   ===================================== */



/* 1) Gewone dropdown (niveau-1) – alleen de “kaart-look” */
.site-header .main-navigation .nav-menu > li > .sub-menu:not(.mega-menu),
.main-navigation .menu > li > .sub-menu:not(.mega-menu){
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--dd-radius) !important;
  box-shadow:var(--dd-shadow) !important;
  overflow:hidden;                /* nette afgeronde hoeken */
}

/* 2) Fly-outs (niveau-2+) – zelfde look, positie blijft zoals Shoptimizer het doet */
.site-header .main-navigation .nav-menu .sub-menu > li > .sub-menu,
.main-navigation .menu .sub-menu > li > .sub-menu{
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  box-shadow:var(--dd-shadow) !important;
}

/* 3) Mega-menu NIET full-width – geef de kaart-look aan het paneel zelf */
.site-header .main-navigation .nav-menu > li > .mega-menu:not(.full-width),
.main-navigation .menu > li > .mega-menu:not(.full-width){
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--dd-radius) !important;
  box-shadow:var(--dd-shadow) !important;
  overflow:hidden;
}

/* 4) Mega-menu met .full-width – teken een “sheet” binnenin met ::before */
.site-header .main-navigation .nav-menu > li > .mega-menu.full-width,
.main-navigation .menu > li > .mega-menu.full-width{
  background:transparent !important;      /* zelf transparant */
  overflow:visible;                        /* ruimte voor de sheet */
}
.site-header .main-navigation .nav-menu > li > .mega-menu.full-width::before,
.main-navigation .menu > li > .mega-menu.full-width::before{
  content:"";
  position:absolute;
  inset: 8px 12px;                         /* marge tot de randen */
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--dd-radius);
  box-shadow:var(--dd-shadow);
  pointer-events:none;                     /* niet klikbaar */
  z-index:-1;                              /* achter de content van het mega-menu */
}

/* 5) Link-items: comfortabel klikvlak + subtiele hover (gedrag blijft gelijk) */
.site-header .main-navigation .nav-menu li li > a,
.main-navigation .menu li li > a{
  padding:12px 14px !important;
  border-radius:10px !important;
  line-height:1.45 !important;
}
.site-header .main-navigation .nav-menu li li > a:hover,
.main-navigation .menu li li > a:hover{
  background:rgba(130,36,227,.08) !important;
  color:var(--main-purple) !important;
}

/* 6) Z-index netjes zodat niets erboven valt (zonder overkill) */
.site-header, .site-header .main-navigation{ position:relative; z-index:1000; }
.site-header .main-navigation .nav-menu > li > .sub-menu,
.site-header .main-navigation .nav-menu > li > .mega-menu,
.main-navigation .menu > li > .sub-menu,
.main-navigation .menu > li > .mega-menu{ z-index:1010; }


/* PATCH */
/* ===========================
   DMS — PATCH: clean hover + categorie-sheet
   =========================== */

/* 0) Geen paarse fill overal; alleen subtiele underline + kleur */
.site-header .main-navigation .nav-menu li li > a:hover,
.main-navigation .menu li li > a:hover,
.main-navigation .mega-menu li li > a:hover,
.main-navigation .menu > li > .sub-menu:not(.mega-menu) a:hover {
  background: transparent !important;
  color: var(--purple-ink) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--main-purple) 55%, transparent);
  transform: none !important; /* geen zijwaartse 'nudge' meer */
}

/* ===== DMS — Alleen 'Kies je categorie' dropdown (id: #nav-menu-item-7179) ===== */

/* 1) Wrapper goed positioneren en niet laten uitrekken door .container */
#nav-menu-item-7179 > .sub-menu-wrapper{
  position: absolute !important;
  left: 0 !important;
  top: 100% !important;
  margin-top: 8px !important;
  z-index: 1015 !important;
  overflow: visible !important;
}
#nav-menu-item-7179 > .sub-menu-wrapper > .container{
  width: max-content !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2) Eerste lijst (Motorhelmen / Men / Women) krijgt kaart-look */
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.12), 0 18px 44px rgba(0,0,0,.08) !important;
  padding: 12px !important;
  min-width: 280px !important;
  overflow: hidden !important;
}

/* 3) Items in de eerste lijst – strak, geen paarse fill of underline */
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li > a{
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li + li > a{
  margin-top: 6px !important;
}
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li > a:hover,
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li:focus-within > a{
  background: rgba(0,0,0,.05) !important;
  color: var(--purple-ink) !important;
  text-decoration: none !important;
}

/* 4) Caret-pijltje in de eerste kolom weghalen (strakker) */
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li > .caret{
  display: none !important;
}

/* 5) Tweede niveau (rechts) netjes naast de eerste kolom en zelfde kaart-look */
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li > .sub-menu-wrapper{
  position: absolute !important;
  left: calc(100% + 10px) !important;  /* naast de eerste lijst */
  top: 0 !important;
}
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li > .sub-menu-wrapper > .container > ul.sub-menu{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.12) !important;
  padding: 10px !important;
  min-width: 260px !important;
}
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li > .sub-menu-wrapper > .container > ul.sub-menu > li > a{
  padding: 9px 12px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ink) !important;
  text-decoration: none !important;
}
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li > .sub-menu-wrapper > .container > ul.sub-menu > li > a:hover{
  background: rgba(0,0,0,.05) !important;
  color: var(--purple-ink) !important;
}

/* 6) Mobiel: niets forceren, laat theme-stapeling intact */
@media (max-width: 992px){
  #nav-menu-item-7179 > .sub-menu-wrapper{
    position: static !important;
    margin-top: 0 !important;
  }
  #nav-menu-item-7179 > .sub-menu-wrapper > .container{
    width: 100% !important;
  }
}

/* ==== DMS: Fix 'Kies je categorie' 2e paneel (alleen #nav-menu-item-7179) ==== */

/* 1) Submenu-wrapper van de knop goed positioneren */
#nav-menu-item-7179 > .sub-menu-wrapper{
  position: absolute !important;
  left: 0 !important;
  top: 100% !important;
  margin-top: 8px !important;
  z-index: 1015 !important;
  overflow: visible !important;
}
#nav-menu-item-7179 > .sub-menu-wrapper > .container{
  width: max-content !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2) Eerste kolom (Motorhelmen/Men/Women) — kaart-look, maar GEEN clipping */
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu{
  position: relative !important;             /* anker voor rechterpaneel */
  overflow: visible !important;              /* <— belangrijk: niet clippen */
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.12), 0 18px 44px rgba(0,0,0,.08) !important;
  padding: 12px !important;
  min-width: 280px !important;
}

/* Items links: strak, geen paarse fill/underline */
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li > a{
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li + li > a{
  margin-top: 6px !important;
}
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li > a:hover,
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li:focus-within > a{
  background: rgba(0,0,0,.05) !important;
  color: var(--purple-ink) !important;
}
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li > .caret{
  display: none !important;
}

/* 3) Rechterpaneel (2e niveau) — naast de linker kolom, met fade-in */
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li > .sub-menu-wrapper{
  position: absolute !important;
  top: 0 !important;
  left: calc(100% + 12px) !important;        /* direct naast de kaart */
  display: none !important;
  opacity: 0; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1020;
}
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li:hover > .sub-menu-wrapper,
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li:focus-within > .sub-menu-wrapper,
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li.toggled-on > .sub-menu-wrapper{
  display: block !important;
  opacity: 1; transform: translateY(0);
}

/* Inhoud van het rechterpaneel */
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu
> li > .sub-menu-wrapper > .container > ul.sub-menu{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.12) !important;
  padding: 10px !important;
  min-width: 260px !important;
}
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu
> li > .sub-menu-wrapper > .container > ul.sub-menu > li > a{
  padding: 9px 12px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ink) !important;
  text-decoration: none !important;
}
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu
> li > .sub-menu-wrapper > .container > ul.sub-menu > li > a:hover{
  background: rgba(0,0,0,.05) !important;
  color: var(--purple-ink) !important;
}

/* 4) Mobiel: niets forceren */
@media (max-width: 992px){
  #nav-menu-item-7179 > .sub-menu-wrapper{ position: static !important; margin-top:0 !important; }
  #nav-menu-item-7179 > .sub-menu-wrapper > .container{ width:100% !important; }
}

/* ==== DMS: fine-tune 'Kies je categorie' ==== */

/* 1) Minder lucht boven de dropdown */
#nav-menu-item-7179 > .sub-menu-wrapper{
  margin-top: 4px !important;        /* was 8px */
}

/* 2) Linkerkolom: positioneer items zodat we een hover-bridge kunnen maken */
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li{
  position: relative !important;
}

/* 3) Rechterpaneel: vrijwel tegen de linker kaart, top gelijk met de kaart */
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li > .sub-menu-wrapper{
  left: calc(100% + 2px) !important; /* vrijwel geen gat */
  top: -12px !important;             /* compenseert de 12px padding van de linker kaart */
  z-index: 2;                         /* boven de hover-bridge */
}

/* 4) Hover-bridge: voorkomt dat hover wegvalt tussen links en rechts */
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu > li::after{
  content: "";
  position: absolute;
  top: -12px;                         /* zelfde correctie als het paneel */
  right: -14px;                       /* breedte van de brug */
  width: 14px;
  height: calc(100% + 24px);          /* vangt ook de afgeronde hoeken op */
  background: transparent;
  z-index: 1;                         /* onder het rechterpaneel (z-index:2) */
}

/* 5) (optioneel) iets strakker schaduwtje */
#nav-menu-item-7179 > .sub-menu-wrapper > .container > ul.sub-menu{
  box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 16px 36px rgba(0,0,0,.08) !important;
}

/* ===== DMS — FULL-WIDTH mega (b.v. 'Women'): clean hover, geen fill/underline ===== */

/* Basis: nette klikvlakken voor categorie-links (niet voor productkaarten) */
.menu-primary-menu-container #menu-primary-menu > li.full-width .sub-menu li > a.cg-menu-link,
.menu-primary-menu-container #menu-primary-menu > li.full-width .sub-menu li > a.sub-menu-link{
  display:block !important;
  padding:12px 14px !important;
  border-radius:10px !important;
  background:transparent !important;
  color:var(--ink) !important;
  text-decoration:none !important;
  border:0 !important;                 /* Shoptimizer gebruikt soms border-bottom */
  box-shadow:none !important;
  transition:color .16s ease, background-color .16s ease;
}

/* Hover/focus: alleen kleur, geen achtergrond, geen underline/nudge */
.menu-primary-menu-container #menu-primary-menu > li.full-width .sub-menu li > a.cg-menu-link:hover,
.menu-primary-menu-container #menu-primary-menu > li.full-width .sub-menu li > a.sub-menu-link:hover,
.menu-primary-menu-container #menu-primary-menu > li.full-width .sub-menu li:hover > a.cg-menu-link,
.menu-primary-menu-container #menu-primary-menu > li.full-width .sub-menu li:focus-within > a.cg-menu-link{
  background:transparent !important;
  color:var(--purple-ink) !important;
  text-decoration:none !important;
  border:0 !important;
  transform:none !important;
  box-shadow:none !important;
}

/* Zorg dat eventuele <span> binnen de link de kleur meekrijgt */
.menu-primary-menu-container #menu-primary-menu > li.full-width .sub-menu li > a.cg-menu-link:hover span,
.menu-primary-menu-container #menu-primary-menu > li.full-width .sub-menu li:hover > a.cg-menu-link span{
  color:inherit !important;
}

/* Neutraliseer 'current' of 'highlight' states die alsnog een fill pushen */
.menu-primary-menu-container #menu-primary-menu > li.full-width .sub-menu li.current-menu-item > a,
.menu-primary-menu-container #menu-primary-menu > li.full-width .sub-menu li.current-menu-ancestor > a{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Verwijder eventuele paarse underline in dit mega-menu */
.menu-primary-menu-container #menu-primary-menu > li.full-width .sub-menu a.cg-menu-link,
.menu-primary-menu-container #menu-primary-menu > li.full-width .sub-menu a.sub-menu-link{
  text-decoration:none !important;
  border-bottom:0 !important;
}

/* ===== DMS — Women mega-menu (#nav-menu-item-6763) : clean hover, geen underline ===== */

/* Basis-stijl voor alle "tekst-links" in het Women mega-menu */
#nav-menu-item-6763 > .sub-menu-wrapper > .container > ul.sub-menu
  a.cg-menu-link.sub-menu-link{
  display:block !important;
  padding:12px 14px !important;
  border-radius:10px !important;
  background:transparent !important;
  color:var(--ink) !important;
  text-decoration:none !important;   /* kill elke underline */
  border:0 !important;
  box-shadow:none !important;
}

/* Hover/focus: subtiele grijze achtergrond + paarse tekst, géén underline */
#nav-menu-item-6763 > .sub-menu-wrapper > .container > ul.sub-menu
  li:hover > a.cg-menu-link.sub-menu-link,
#nav-menu-item-6763 > .sub-menu-wrapper > .container > ul.sub-menu
  li:focus-within > a.cg-menu-link.sub-menu-link,
#nav-menu-item-6763 > .sub-menu-wrapper > .container > ul.sub-menu
  a.cg-menu-link.sub-menu-link:hover{
  background:rgba(0,0,0,.05) !important;
  color:var(--purple-ink) !important;
  text-decoration:none !important;
}

/* Zorg dat eventuele <span> in de link de kleur/geen-underline erft */
#nav-menu-item-6763 > .sub-menu-wrapper > .container > ul.sub-menu
  a.cg-menu-link.sub-menu-link > span{
  color:inherit !important;
  text-decoration:none !important;
  border:0 !important;
}

/* Neutraliseer 'current' of 'highlight' states die een fill geven */
#nav-menu-item-6763 .sub-menu li.current-menu-item > a.cg-menu-link,
#nav-menu-item-6763 .sub-menu li.current-menu-ancestor > a.cg-menu-link{
  background:transparent !important;
  text-decoration:none !important;
  box-shadow:none !important;
  border:0 !important;
}

/* ===== DMS — Alle mega/dropdown menu's: clean hover (geen underline), niet "sticky" ===== */

/* 0) Zet elke underline hard uit op submenu-links (thema-override) */
.menu-primary-menu-container #menu-primary-menu li li > a:hover,
.menu-primary-menu-container #menu-primary-menu li li > a:focus {
  text-decoration: none !important;
}

/* 1) Basis linkstijl binnen ALLE dropdowns/mega-menu's (alle niveaus) */
.menu-primary-menu-container #menu-primary-menu > li > .sub-menu-wrapper > .container ul.sub-menu li > a.cg-menu-link {
  display: block !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 2) Voorkom "sticky" hover afkomstig van li:hover > a in het thema */
.menu-primary-menu-container #menu-primary-menu > li > .sub-menu-wrapper > .container ul.sub-menu li:hover > a.cg-menu-link {
  background: transparent !important;
  color: inherit !important;
}

/* 3) Échte hover alleen wanneer de ANCHOR zelf gehoverd/gefocust is */
.menu-primary-menu-container #menu-primary-menu > li > .sub-menu-wrapper > .container ul.sub-menu li > a.cg-menu-link:hover,
.menu-primary-menu-container #menu-primary-menu > li > .sub-menu-wrapper > .container ul.sub-menu li > a.cg-menu-link:focus-visible {
  background: rgba(0,0,0,.05) !important;
  color: var(--purple-ink) !important;
  text-decoration: none !important;
}

/* 4) Ook het <span> in de link laat meekleuren en nooit onderlijnen */
.menu-primary-menu-container #menu-primary-menu > li > .sub-menu-wrapper > .container ul.sub-menu li > a.cg-menu-link > span {
  color: inherit !important;
  text-decoration: none !important;
  border: 0 !important;
}

/* 5) Neutraliseer "current/highlight" states die een fill forceren */
.menu-primary-menu-container #menu-primary-menu .sub-menu li.current-menu-item > a.cg-menu-link,
.menu-primary-menu-container #menu-primary-menu .sub-menu li.current-menu-ancestor > a.cg-menu-link {
  background: transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* DMS — cards in álle full-width mega-menu's iets omlaag (desktop) */
@media (min-width: 993px){

  /* 0) Paneel zelf niet verschuiven */
  .menu-primary-menu-container #menu-primary-menu > li.full-width > .sub-menu-wrapper{
    margin-top: 0 !important;
  }

  /* 1) Alleen de product-kolommen (cards) wat top-ruimte geven */
  .menu-primary-menu-container #menu-primary-menu > li.full-width
    > .sub-menu-wrapper > .container > ul.sub-menu
    > li.menu-item-product{
    padding-top: 10px !important;   /* pas aan: 6–14px naar smaak */
  }

  /* 2) Fallback: sommige full-width menu's plaatsen .products direct binnen de kolom */
  .menu-primary-menu-container #menu-primary-menu > li.full-width
    > .sub-menu-wrapper .woocommerce .products{
    margin-top: 10px !important;    /* zelfde waarde als hierboven */
  }
}

.menu-sale-item{
	color: red !important;
}