.sellnex-menu-backdrop{
 position:fixed;
 inset:0;
 z-index:1190;
 background:rgba(10,12,15,.16);
 opacity:0;
 visibility:hidden;
 pointer-events:none;
 transition:opacity .22s ease,visibility .22s ease;
 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px)
}
.sellnex-menu-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}

.sellnex-menu-sheet{
 position:fixed;
 z-index:1200;
 inset:0;
 width:100%;
 height:100dvh;
 padding:calc(14px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
 border-radius:0;
 background:
  radial-gradient(circle at 88% 2%,rgba(119,119,255,.10),transparent 25%),
  radial-gradient(circle at 8% 34%,rgba(40,165,107,.035),transparent 24%),
  #f5f6f7;
 color:#17191b;
 box-shadow:none;
 transform:translateY(105%);
 transition:transform .30s cubic-bezier(.16,1,.3,1);
 overflow:auto;
 overscroll-behavior:contain;
 -webkit-overflow-scrolling:touch
}
.sellnex-menu-sheet.open{transform:translateY(0)}
.sellnex-menu-stack{position:relative;min-height:100%}
.sellnex-menu-panel{display:none;min-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px)}
.sellnex-menu-panel.active{display:flex;flex-direction:column}

.sellnex-menu-head,
.sellnex-submenu-head{
 display:grid;
 grid-template-columns:minmax(0,1fr) 44px;
 align-items:center;
 gap:12px;
 margin-bottom:16px
}
.sellnex-submenu-head{grid-template-columns:44px minmax(0,1fr) 40px;margin-bottom:10px}

.sellnex-menu-title small{
 display:block;
 margin-bottom:5px;
 color:#90969d;
 font-size:7px;
 font-weight:750;
 letter-spacing:1.05px;
 text-transform:uppercase
}
.sellnex-menu-title strong{
 display:block;
 font-size:31px;
 line-height:1;
 letter-spacing:-1.35px;
 font-weight:760
}

.sellnex-menu-close,
.sellnex-submenu-back{
 width:44px;
 height:44px;
 padding:0;
 border:1px solid rgba(33,37,41,.075);
 border-radius:50%;
 background:rgba(255,255,255,.90);
 color:#17191b;
 display:grid;
 place-items:center;
 box-shadow:0 8px 24px rgba(27,31,35,.055),inset 0 1px 0 rgba(255,255,255,.92)
}
.sellnex-menu-close-small{width:40px;height:40px}
.sellnex-menu-close svg,
.sellnex-submenu-back svg{
 width:19px;
 height:19px;
 stroke:currentColor;
 fill:none;
 stroke-width:2;
 stroke-linecap:round;
 stroke-linejoin:round
}

.sellnex-menu-groups{display:grid;gap:14px}
.sellnex-menu-main-groups{gap:13px}
.sellnex-menu-group-label{
 margin:0 10px 7px;
 color:#8d939a;
 font-size:8px;
 font-weight:750;
 letter-spacing:.9px;
 text-transform:uppercase
}
.sellnex-menu-list{display:grid;gap:8px}
.sellnex-menu-category{width:100%;text-align:left}

.sellnex-menu-row{
 min-height:58px;
 padding:0 14px;
 border:1px solid rgba(33,37,41,.06);
 border-radius:20px;
 background:rgba(255,255,255,.88);
 display:grid;
 grid-template-columns:38px minmax(0,1fr) 20px;
 align-items:center;
 gap:10px;
 color:#17191b;
 box-shadow:0 7px 20px rgba(27,31,35,.038),inset 0 1px 0 rgba(255,255,255,.94);
 transition:transform .16s ease,background .16s ease,border-color .16s ease
}
button.sellnex-menu-row{appearance:none;-webkit-appearance:none;font:inherit}
.sellnex-menu-row:active{
 transform:scale(.988);
 background:rgba(241,239,255,.96);
 border-color:rgba(119,119,255,.15)
}
.sellnex-menu-row-icon{
 width:36px;
 height:36px;
 border-radius:12px;
 display:grid;
 place-items:center;
 background:#eef0f2;
 color:#34383c
}
.sellnex-menu-row-icon svg{
 width:17px;
 height:17px;
 fill:none;
 stroke:currentColor;
 stroke-width:1.8;
 stroke-linecap:round;
 stroke-linejoin:round
}
.sellnex-menu-row-copy{min-width:0}
.sellnex-menu-row-copy strong{
 display:block;
 font-size:12.5px;
 line-height:1.1;
 color:#17191b;
 font-weight:750
}
.sellnex-menu-row-copy small{
 display:block;
 margin-top:3px;
 color:#8b9197;
 font-size:6.8px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis
}
.sellnex-menu-row-arrow{
 display:grid;
 place-items:center;
 color:#8d9399
}
.sellnex-menu-row-arrow svg{
 width:14px;
 height:14px;
 fill:none;
 stroke:currentColor;
 stroke-width:2.1;
 stroke-linecap:round;
 stroke-linejoin:round
}

.sellnex-submenu-copy{
 margin:0 4px 16px;
 max-width:340px;
 color:#8b9197;
 font-size:8px;
 line-height:1.45
}
.sellnex-menu-note{
 margin-top:14px;
 padding:12px 14px;
 border-radius:17px;
 background:rgba(255,255,255,.55);
 color:#8b9197;
 font-size:7px;
 line-height:1.45;
 border:1px solid rgba(33,37,41,.045)
}

.sellnex-menu-footer{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:9px;
 margin-top:auto;
 padding-top:18px
}
.sellnex-menu-footer a,
.sellnex-menu-footer button{
 min-height:50px;
 border-radius:18px;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:8px;
 font-size:9px;
 font-weight:750
}
.sellnex-menu-footer-primary{
 border:1px solid rgba(33,37,41,.07);
 background:rgba(255,255,255,.90);
 color:#17191b;
 box-shadow:0 8px 24px rgba(27,31,35,.045),inset 0 1px 0 rgba(255,255,255,.92)
}
.sellnex-menu-footer-secondary{
 border:1px solid rgba(33,37,41,.045);
 background:rgba(255,255,255,.46);
 color:#6f757b;
 box-shadow:none
}
.sellnex-menu-footer svg{
 width:17px;
 height:17px;
 fill:none;
 stroke:currentColor;
 stroke-width:1.9;
 stroke-linecap:round;
 stroke-linejoin:round
}

body.sellnex-menu-open{overflow:hidden}

/* DARK MODE */
html[data-theme="dark"] .sellnex-menu-backdrop{background:rgba(0,0,0,.48)}
html[data-theme="dark"] .sellnex-menu-sheet{
 background:
  radial-gradient(circle at 92% 4%,rgba(119,119,255,.16),transparent 24%),
  linear-gradient(155deg,#171a1e,#0c0e10 70%);
 color:#f5f6f7
}
html[data-theme="dark"] .sellnex-menu-title small{color:rgba(245,246,247,.45)}
html[data-theme="dark"] .sellnex-menu-close,
html[data-theme="dark"] .sellnex-submenu-back{
 border-color:rgba(255,255,255,.10);
 background:rgba(255,255,255,.065);
 color:#fff;
 box-shadow:none
}
html[data-theme="dark"] .sellnex-menu-group-label{color:rgba(245,246,247,.42)}
html[data-theme="dark"] .sellnex-menu-row{
 border-color:rgba(255,255,255,.06);
 background:rgba(255,255,255,.035);
 color:#f5f6f7;
 box-shadow:none
}
html[data-theme="dark"] .sellnex-menu-row:active{
 background:rgba(255,255,255,.065);
 border-color:rgba(255,255,255,.09)
}
html[data-theme="dark"] .sellnex-menu-row-icon{
 background:rgba(255,255,255,.07);
 color:#dfe2e6
}
html[data-theme="dark"] .sellnex-menu-row-copy strong{color:#f5f6f7}
html[data-theme="dark"] .sellnex-menu-row-copy small,
html[data-theme="dark"] .sellnex-submenu-copy{color:rgba(245,246,247,.42)}
html[data-theme="dark"] .sellnex-menu-row-arrow{color:rgba(245,246,247,.45)}
html[data-theme="dark"] .sellnex-menu-note{
 background:rgba(255,255,255,.035);
 border-color:rgba(255,255,255,.05);
 color:rgba(245,246,247,.42)
}
html[data-theme="dark"] .sellnex-menu-footer-primary{
 border-color:rgba(255,255,255,.09);
 background:rgba(255,255,255,.055);
 color:#fff;
 box-shadow:none
}
html[data-theme="dark"] .sellnex-menu-footer-secondary{
 border-color:rgba(255,255,255,.045);
 background:rgba(255,255,255,.025);
 color:rgba(245,246,247,.56)
}

@media(min-width:700px){
 .sellnex-menu-sheet{
  left:50%;
  right:auto;
  width:720px;
  transform:translate(-50%,105%)
 }
 .sellnex-menu-sheet.open{transform:translate(-50%,0)}
}

@media(max-width:370px){
 .sellnex-menu-sheet{padding-left:12px;padding-right:12px}
 .sellnex-menu-row{
  min-height:56px;
  padding-left:12px;
  padding-right:12px;
  border-radius:18px
 }
 .sellnex-menu-title strong{font-size:29px}
 .sellnex-menu-groups{gap:11px}
}

html[data-font-size="large"] .sellnex-menu-row-copy strong{font-size:13.5px}
html[data-font-size="large"] .sellnex-menu-row-copy small{font-size:7.8px}
html[data-font-size="large"] .sellnex-menu-group-label{font-size:9px}
html[data-font-size="large"] .sellnex-menu-footer a,
html[data-font-size="large"] .sellnex-menu-footer button{font-size:10px}
html[data-font-size="large"] .sellnex-submenu-copy{font-size:9px}

html[data-font-size="compact"] .sellnex-menu-row-copy strong{font-size:11.7px}
html[data-font-size="compact"] .sellnex-menu-row-copy small{font-size:6.3px}
html[data-font-size="compact"] .sellnex-menu-group-label{font-size:7.4px}
html[data-font-size="compact"] .sellnex-submenu-copy{font-size:7.2px}


/* =========================================================
   SELLNEX MENU — MICRO-ANIMATIES
   Rustig, premium en iets levendiger bij openen/navigeren.
   ========================================================= */

/* Het volledige scherm komt niet alleen omhoog, maar 'landt' subtiel. */
.sellnex-menu-sheet{
 opacity:.985;
 transform:translateY(105%) scale(.992);
 transform-origin:50% 100%;
 will-change:transform,opacity;
}
.sellnex-menu-sheet.open{
 opacity:1;
 transform:translateY(0) scale(1);
}

/* Kop komt zacht omhoog. */
.sellnex-menu-sheet.open .sellnex-menu-panel.active .sellnex-menu-head,
.sellnex-menu-sheet.open .sellnex-menu-panel.active .sellnex-submenu-head{
 animation:sellnexMenuHeadIn .34s cubic-bezier(.16,1,.3,1) both;
}

/* Hoofdcategorieën verschijnen licht na elkaar. */
.sellnex-menu-sheet.open [data-menu-panel="main"].active .sellnex-menu-group{
 opacity:0;
 transform:translateY(12px) scale(.992);
 animation:sellnexMenuGroupIn .38s cubic-bezier(.16,1,.3,1) forwards;
}
.sellnex-menu-sheet.open [data-menu-panel="main"].active .sellnex-menu-group:nth-child(1){animation-delay:.055s}
.sellnex-menu-sheet.open [data-menu-panel="main"].active .sellnex-menu-group:nth-child(2){animation-delay:.095s}
.sellnex-menu-sheet.open [data-menu-panel="main"].active .sellnex-menu-group:nth-child(3){animation-delay:.135s}
.sellnex-menu-sheet.open [data-menu-panel="main"].active .sellnex-menu-group:nth-child(4){animation-delay:.175s}
.sellnex-menu-sheet.open [data-menu-panel="main"].active .sellnex-menu-group:nth-child(5){animation-delay:.215s}

/* Footer volgt als laatste. */
.sellnex-menu-sheet.open [data-menu-panel="main"].active .sellnex-menu-footer{
 opacity:0;
 transform:translateY(10px);
 animation:sellnexMenuGroupIn .36s cubic-bezier(.16,1,.3,1) .255s forwards;
}

/* Submenu voelt als een nieuwe laag die van rechts binnenkomt. */
.sellnex-menu-panel.active:not([data-menu-panel="main"]){
 animation:sellnexSubmenuPanelIn .28s cubic-bezier(.16,1,.3,1) both;
}
.sellnex-menu-panel.active:not([data-menu-panel="main"]) .sellnex-submenu-copy{
 opacity:0;
 transform:translateX(10px);
 animation:sellnexSubmenuItemIn .28s cubic-bezier(.16,1,.3,1) .045s forwards;
}
.sellnex-menu-panel.active:not([data-menu-panel="main"]) .sellnex-menu-list .sellnex-menu-row{
 opacity:0;
 transform:translateX(12px);
 animation:sellnexSubmenuItemIn .32s cubic-bezier(.16,1,.3,1) forwards;
}
.sellnex-menu-panel.active:not([data-menu-panel="main"]) .sellnex-menu-list .sellnex-menu-row:nth-child(1){animation-delay:.075s}
.sellnex-menu-panel.active:not([data-menu-panel="main"]) .sellnex-menu-list .sellnex-menu-row:nth-child(2){animation-delay:.115s}
.sellnex-menu-panel.active:not([data-menu-panel="main"]) .sellnex-menu-list .sellnex-menu-row:nth-child(3){animation-delay:.155s}
.sellnex-menu-panel.active:not([data-menu-panel="main"]) .sellnex-menu-list .sellnex-menu-row:nth-child(4){animation-delay:.195s}
.sellnex-menu-panel.active:not([data-menu-panel="main"]) .sellnex-menu-list .sellnex-menu-row:nth-child(5){animation-delay:.235s}

/* Icoon reageert bij aanraken zonder drukke bounce. */
.sellnex-menu-row .sellnex-menu-row-icon,
.sellnex-menu-close,
.sellnex-submenu-back{
 transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s ease,border-color .18s ease;
}
.sellnex-menu-row:active .sellnex-menu-row-icon{transform:scale(.92) rotate(-2deg)}
.sellnex-menu-close:active,
.sellnex-submenu-back:active{transform:scale(.92)}

/* Pijl schuift een fractie mee om 'doorgaan' voelbaar te maken. */
.sellnex-menu-row .sellnex-menu-row-arrow{
 transition:transform .18s cubic-bezier(.2,.8,.2,1),color .18s ease;
}
.sellnex-menu-row:active .sellnex-menu-row-arrow{transform:translateX(3px)}

/* Achtergrond vervaagt iets zachter in. */
.sellnex-menu-backdrop{transition:opacity .28s ease,visibility .28s ease}

/* Desktop transform behouden in combinatie met de nieuwe scale. */
@media(min-width:700px){
 .sellnex-menu-sheet{
  transform:translate(-50%,105%) scale(.992)
 }
 .sellnex-menu-sheet.open{
  transform:translate(-50%,0) scale(1)
 }
}

@keyframes sellnexMenuHeadIn{
 from{opacity:0;transform:translateY(10px)}
 to{opacity:1;transform:translateY(0)}
}
@keyframes sellnexMenuGroupIn{
 from{opacity:0;transform:translateY(12px) scale(.992)}
 to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes sellnexSubmenuPanelIn{
 from{opacity:.25;transform:translateX(16px)}
 to{opacity:1;transform:translateX(0)}
}
@keyframes sellnexSubmenuItemIn{
 from{opacity:0;transform:translateX(12px)}
 to{opacity:1;transform:translateX(0)}
}

/* Toegankelijkheid: respecteer 'Verminder beweging'. */
@media(prefers-reduced-motion:reduce){
 .sellnex-menu-sheet,
 .sellnex-menu-backdrop,
 .sellnex-menu-panel,
 .sellnex-menu-group,
 .sellnex-menu-footer,
 .sellnex-menu-head,
 .sellnex-submenu-head,
 .sellnex-submenu-copy,
 .sellnex-menu-row,
 .sellnex-menu-row-icon,
 .sellnex-menu-row-arrow,
 .sellnex-menu-close,
 .sellnex-submenu-back{
  animation:none!important;
  transition:none!important;
 }
}


/* =========================================================
   SELLNEX MENU — AANDACHTSBADGES
   Menu totaal -> categorie -> onderdeel.
   ========================================================= */
.sellnex-menu-row-has-badge{
 grid-template-columns:38px minmax(0,1fr) auto 20px;
}
.sellnex-menu-attention-badge{
 min-width:20px;
 height:20px;
 padding:0 6px;
 border-radius:999px;
 display:none;
 place-items:center;
 background:#e45757;
 color:#fff;
 border:1.5px solid rgba(255,255,255,.94);
 box-shadow:0 5px 13px rgba(228,87,87,.20);
 font-size:6.5px;
 line-height:1;
 font-weight:780;
 font-variant-numeric:tabular-nums;
}
.sellnex-menu-attention-badge.show{
 display:grid;
 animation:sellnexMenuBadgeIn .24s cubic-bezier(.16,1,.3,1) both;
}
.sellnex-menu-category .sellnex-menu-attention-badge{
 min-width:22px;
 height:22px;
 font-size:7px;
}
html[data-theme="dark"] .sellnex-menu-attention-badge{
 border-color:rgba(20,22,25,.86);
 box-shadow:0 5px 16px rgba(228,87,87,.17);
}
@keyframes sellnexMenuBadgeIn{
 from{opacity:0;transform:scale(.72)}
 to{opacity:1;transform:scale(1)}
}
@media(max-width:370px){
 .sellnex-menu-row-has-badge{
  grid-template-columns:36px minmax(0,1fr) auto 18px;
 }
}
@media(prefers-reduced-motion:reduce){
 .sellnex-menu-attention-badge.show{animation:none!important}
}