/* ScooterDoc Marken Manager – premium Marken dropdown.
   Everything is scoped to .sdmm-menu / .sdmm-marken / .sdmm-brand-item (added only to the Marken item and its children).
   Design values (sizes, colours, gaps, columns…) are CSS variables printed from the admin settings. */

/* ---------- brand link (all devices) ---------- */
.sdmm-brand-item>a{display:flex!important;align-items:center;gap:var(--sdmm-lgap,12px);box-sizing:border-box;width:100%;line-height:1.2;text-decoration:none;color:var(--sdmm-ink,#12181b)!important}
.sdmm-brand-item>a:before,.sdmm-brand-item>a:after{display:none!important}
.sdmm-brand-item>a .nav-link-text{display:contents}
.sdmm-menu-name{display:block;flex:1 1 auto;min-width:0;font-size:var(--sdmm-fs,15px);font-weight:600;letter-spacing:.01em;overflow-wrap:break-word;hyphens:none;color:inherit;transition:color .18s ease}

/* ---------- logo box: fixed slot, artwork never stretched ---------- */
.sdmm-logo-wrap{flex:none;display:flex;align-items:center;justify-content:var(--jc,center);box-sizing:border-box;width:calc(var(--sdmm-lw,100px) + 16px);max-width:100%;margin:0;padding:4px 8px;line-height:0}
.sdmm-logo-wrap img.sdmm-menu-logo{display:block;box-sizing:border-box;width:100%;height:var(--sdmm-lh,36px);max-width:100%;max-height:none;min-width:0;margin:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0;object-fit:contain;object-position:var(--op,center center);transform:scale(var(--s,1));transform-origin:center;transition:transform .22s ease}
.sdmm-logo-wrap.sdmm-bg-light{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);border-radius:calc(var(--sdmm-r,12px)*.6)}
.sdmm-logo-wrap.sdmm-bg-dark{background:#1b2226;border-radius:calc(var(--sdmm-r,12px)*.6)}
.sdmm-logo-wrap.sdmm-bg-none{background:transparent}
.sdmm-logo-wrap.sdmm-opq img.sdmm-menu-logo{border-radius:6px}
.sdmm-brand-item>a:hover .sdmm-menu-logo,.sdmm-brand-item>a:focus-visible .sdmm-menu-logo{transform:scale(calc(var(--s,1)*1.06))}

/* ---------- hover effects ---------- */
.sdmm-brand-item>a{border-radius:var(--sdmm-r,12px);transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease,color .18s ease}
.sdmm-brand-item>a:hover,.sdmm-brand-item>a:focus-visible{color:var(--sdmm-hink,#12181b)!important}
.sdmm-fx-lift .sdmm-brand-item>a:hover,.sdmm-fx-lift .sdmm-brand-item>a:focus-visible{background:var(--sdmm-hbg,#eef7f2);transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,25,30,.10)}
.sdmm-fx-glow .sdmm-brand-item>a:hover,.sdmm-fx-glow .sdmm-brand-item>a:focus-visible{background:var(--sdmm-hbg,#eef7f2);box-shadow:0 0 0 2px var(--sdmm-acc,#3fb67f),0 6px 18px rgba(63,182,127,.22)}
.sdmm-fx-underline .sdmm-brand-item>a:hover .sdmm-menu-name,.sdmm-fx-underline .sdmm-brand-item>a:focus-visible .sdmm-menu-name{text-decoration:underline;text-decoration-color:var(--sdmm-acc,#3fb67f);text-decoration-thickness:2px;text-underline-offset:4px}
.sdmm-fx-none .sdmm-brand-item>a:hover{background:var(--sdmm-hbg,#eef7f2)}
.sdmm-brand-item>a:focus-visible{outline:2px solid var(--sdmm-acc,#3fb67f);outline-offset:1px}

/* ---------- DESKTOP: horizontal mega menu (desktop nav only, never the mobile menu) ---------- */
@media (min-width:768px){
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken.sdmm-marken{--sdmm-pw:min(var(--sdmm-w,960px),calc(100vw - 32px))}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken>.wd-dropdown,
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken>.sub-menu-dropdown{position:absolute!important;top:100%!important;left:var(--sdmm-shift,0px)!important;right:auto!important;width:var(--sdmm-pw)!important;min-width:0!important;max-width:calc(100vw - 32px)!important;margin:0!important;padding:0!important;background:var(--sdmm-bg,#fff)!important;border:1px solid rgba(15,25,30,.07)!important;border-radius:calc(var(--sdmm-r,12px) + 4px)!important;box-shadow:0 22px 56px rgba(15,25,30,.20)!important;overflow:hidden;box-sizing:border-box}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken>.wd-dropdown>.container,
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken>.wd-dropdown>div{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken .wd-sub-menu,
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken .sub-menu{display:grid!important;grid-template-columns:var(--sdmm-cols,repeat(4,minmax(0,1fr)));gap:var(--sdmm-rg,8px) var(--sdmm-cg,8px);align-content:start;margin:0!important;padding:18px!important;list-style:none;max-height:min(70vh,540px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;box-sizing:border-box}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken .sdmm-brand-item{display:block;margin:0!important;padding:0!important;border:0!important;min-width:0;list-style:none}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken .sdmm-brand-item>a{padding:var(--sdmm-pad,10px) calc(var(--sdmm-pad,10px) + 4px)!important;min-height:calc(var(--sdmm-lh,36px) + var(--sdmm-pad,10px)*2)}
 /* non-brand entries inside Marken (e.g. "Alle Marken") use the full row */
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken .wd-sub-menu>li:not(.sdmm-brand-item){grid-column:1/-1}
}
@media (min-width:1025px){
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken.sdmm-d-list{--sdmm-cols:minmax(0,1fr);--sdmm-w:340px}
}
@media (min-width:768px) and (max-width:1024px){
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken.sdmm-t-list{--sdmm-cols:minmax(0,1fr);--sdmm-w:340px}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken.sdmm-marken{--sdmm-pw:min(var(--sdmm-w,960px),720px,calc(100vw - 32px))}
}

/* opening animation (the theme keeps control of show/hide; this only animates the content) */
@media (prefers-reduced-motion:no-preference){
 .sdmm-anim:is(:hover,:focus-within,.wd-opened,.opened,.sdmm-open)>.wd-dropdown .wd-sub-menu,
 .sdmm-anim:is(:hover,:focus-within,.wd-opened,.opened,.sdmm-open)>.sub-menu-dropdown .sub-menu{animation:sdmm-drop .26s cubic-bezier(.2,.7,.2,1) both}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-anim:is(:hover,:focus-within,.wd-opened,.opened,.sdmm-open) .sdmm-brand-item{animation:sdmm-rise .3s ease both}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-anim:is(:hover,:focus-within,.wd-opened,.opened,.sdmm-open) .sdmm-brand-item:nth-child(4n+2){animation-delay:.03s}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-anim:is(:hover,:focus-within,.wd-opened,.opened,.sdmm-open) .sdmm-brand-item:nth-child(4n+3){animation-delay:.06s}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-anim:is(:hover,:focus-within,.wd-opened,.opened,.sdmm-open) .sdmm-brand-item:nth-child(4n+4){animation-delay:.09s}
}
@keyframes sdmm-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes sdmm-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- MOBILE: one brand per row, logo left / name right (WoodMart mobile menu keeps its own accordion) ---------- */
.wd-nav-mobile .sdmm-brand-item>a,.mobile-nav .sdmm-brand-item>a,.wd-side-hidden .sdmm-brand-item>a{display:flex!important;align-items:center;gap:var(--sdmm-lgap,12px);min-height:calc(var(--sdmm-lh,36px) + var(--sdmm-pad,8px)*2);padding:var(--sdmm-pad,8px) 16px!important;border-radius:0;-webkit-tap-highlight-color:transparent}
.wd-nav-mobile .sdmm-brand-item>a:hover,.mobile-nav .sdmm-brand-item>a:hover,.wd-side-hidden .sdmm-brand-item>a:hover{transform:none;box-shadow:none}
.wd-nav-mobile .sdmm-brand-item,.mobile-nav .sdmm-brand-item{min-width:0}
.wd-nav-mobile .sdmm-menu-name,.mobile-nav .sdmm-menu-name{font-size:var(--sdmm-fs,15px)}
.wd-nav-mobile .sdmm-m-compact .sdmm-brand-item>a{min-height:44px}
@media (max-width:767px){
 .sdmm-logo-wrap{max-width:45%}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
 .sdmm-brand-item>a,.sdmm-menu-name,.sdmm-logo-wrap img.sdmm-menu-logo{transition:none!important;animation:none!important}
 .sdmm-fx-lift .sdmm-brand-item>a:hover{transform:none!important}
}

/* =====================================================================
   v1.5 – uniform logo tiles, instant logos, readable mobile names
   (!important is needed: the theme forces its own img height/width in menus)
   ===================================================================== */

/* every logo gets the SAME fixed box, whatever the original picture size is */
.sdmm-brand-item .sdmm-logo-wrap{position:relative;flex:none!important;display:flex!important;align-items:center;justify-content:center!important;box-sizing:border-box!important;width:calc(var(--sdmm-lw,100px) + 16px)!important;max-width:100%;height:calc(var(--sdmm-lh,36px) + 12px)!important;padding:6px 8px!important;overflow:hidden;line-height:0;border-radius:calc(var(--sdmm-r,12px)*.7)}
.sdmm-brand-item .sdmm-logo-wrap img.sdmm-menu-logo{display:block!important;position:static!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;min-width:0!important;margin:0!important;padding:0!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center center!important;opacity:1!important;visibility:visible!important;background:transparent;transform:none;transition:transform .22s ease}
.sdmm-brand-item>a:hover .sdmm-logo-wrap img.sdmm-menu-logo,.sdmm-brand-item>a:focus-visible .sdmm-logo-wrap img.sdmm-menu-logo{transform:scale(1.05)}

/* tile colour is measured per logo by menu.js (white logo -> white tile, black logo -> black tile) so every box looks identical */
.sdmm-brand-item .sdmm-logo-wrap{padding:6px 10px!important;background:transparent;transition:background-color .2s ease}
.sdmm-brand-item .sdmm-logo-wrap.sdmm-tile{box-shadow:inset 0 0 0 1px rgba(128,128,128,.22)}
.sdmm-brand-item .sdmm-logo-wrap.sdmm-opq{padding:6px 10px!important}
.sdmm-brand-item img.wd-lazy-fade,.sdmm-brand-item img.wd-lazy-blur,.sdmm-brand-item img.lazyload,.sdmm-brand-item img.lazyloading{opacity:1!important;filter:none!important}

/* names always aligned in one column, never cut */
.sdmm-brand-item>a .sdmm-menu-name{flex:1 1 0;min-width:0;line-height:1.25}

/* ---------- MOBILE / SIDE MENU: dark theme -> light text, no light flash on tap ---------- */
.wd-nav-mobile .sdmm-brand-item>a,.mobile-nav .sdmm-brand-item>a,.wd-side-hidden .sdmm-brand-item>a{color:var(--sdmm-m-ink,#f2f5f4)!important;background:transparent!important;gap:14px;padding:10px 16px!important;min-height:64px;border-radius:0!important;border-bottom:1px solid var(--sdmm-m-line,rgba(255,255,255,.08));transform:none!important;box-shadow:none!important}
.wd-nav-mobile .sdmm-brand-item>a .nav-link-text,.mobile-nav .sdmm-brand-item>a .nav-link-text,.wd-side-hidden .sdmm-brand-item>a .nav-link-text{color:inherit!important}
.wd-nav-mobile .sdmm-brand-item>a .sdmm-menu-name,.mobile-nav .sdmm-brand-item>a .sdmm-menu-name,.wd-side-hidden .sdmm-brand-item>a .sdmm-menu-name{color:inherit!important;opacity:1!important;font-size:var(--sdmm-fs,15px);font-weight:600;letter-spacing:.02em;text-transform:none}
.wd-nav-mobile .sdmm-brand-item>a:hover,.wd-nav-mobile .sdmm-brand-item>a:focus,.wd-nav-mobile .sdmm-brand-item>a:active,
.mobile-nav .sdmm-brand-item>a:hover,.mobile-nav .sdmm-brand-item>a:focus,.mobile-nav .sdmm-brand-item>a:active,
.wd-side-hidden .sdmm-brand-item>a:hover,.wd-side-hidden .sdmm-brand-item>a:focus,.wd-side-hidden .sdmm-brand-item>a:active{background:rgba(255,255,255,.07)!important;color:var(--sdmm-acc,#3fb67f)!important}
.wd-nav-mobile .sdmm-brand-item>a:hover .sdmm-menu-name,.mobile-nav .sdmm-brand-item>a:hover .sdmm-menu-name,.wd-side-hidden .sdmm-brand-item>a:hover .sdmm-menu-name{color:inherit!important}
@media (max-width:767px){
 .sdmm-logo-wrap{max-width:46%}
 .wd-nav-mobile .sdmm-brand-item .sdmm-logo-wrap,.mobile-nav .sdmm-brand-item .sdmm-logo-wrap,.wd-side-hidden .sdmm-brand-item .sdmm-logo-wrap{width:104px!important;height:48px!important}
}

/* ---------- DESKTOP: tidy cards ---------- */
@media (min-width:768px){
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken .sdmm-brand-item>a{border:1px solid transparent}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken .sdmm-brand-item>a:hover{border-color:rgba(63,182,127,.35)}
}

/* ---------- v1.5.2 DESKTOP polish: 3 calm columns, card rows ---------- */
@media (min-width:768px){
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken .wd-sub-menu,.wd-nav:not(.wd-nav-mobile)>li.sdmm-marken .sub-menu{padding:20px!important;gap:10px 12px}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken .sdmm-brand-item>a{background:#f6f8f7;border:1px solid rgba(15,25,30,.05);padding:8px 12px!important;min-height:60px;gap:14px}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken .sdmm-brand-item>a:hover,.wd-nav:not(.wd-nav-mobile)>li.sdmm-marken .sdmm-brand-item>a:focus-visible{background:var(--sdmm-hbg,#eef7f2);border-color:rgba(63,182,127,.45);transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,25,30,.10)}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken .sdmm-menu-name{font-size:var(--sdmm-fs,14px);font-weight:600}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken .wd-sub-menu::-webkit-scrollbar{width:8px}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken .wd-sub-menu::-webkit-scrollbar-thumb{background:rgba(15,25,30,.22);border-radius:8px}
}
/* small laptops: slightly tighter so 3 columns always fit */
@media (min-width:1025px) and (max-width:1200px){
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken{--sdmm-lw:76px;--sdmm-lh:28px}
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken .sdmm-brand-item>a{padding:6px 10px!important;gap:10px}
}

/* =====================  v1.5.3  ===================== */
/* logo = CSS background (contain) on its own layer: can never be cropped or stretched, whatever the theme does to <img> */
.sdmm-brand-item .sdmm-logo-wrap{position:relative!important}
.sdmm-brand-item .sdmm-logo-wrap .sdmm-logo-art{position:absolute;top:6px;right:10px;bottom:6px;left:10px;background-repeat:no-repeat;background-position:center center;background-size:contain;transition:transform .22s ease}
.sdmm-brand-item>a:hover .sdmm-logo-wrap .sdmm-logo-art{transform:scale(1.05)}
.sdmm-brand-item .sdmm-logo-wrap img.sdmm-menu-logo{position:absolute!important;left:0!important;top:0!important;width:1px!important;height:1px!important;min-width:0!important;max-width:none!important;max-height:none!important;opacity:0!important;pointer-events:none!important;margin:0!important;padding:0!important;transform:none!important;border-radius:0!important}
/* before the script runs, unwrapped theme images already get the final box size (no jumping) */
.sdmm-brand-item>a img:not(.sdmm-menu-logo){width:calc(var(--sdmm-lw,88px) + 16px)!important;height:calc(var(--sdmm-lh,32px) + 12px)!important;object-fit:contain!important;flex:none}

/* desktop dropdown is centred under "Marken" by CSS alone (no left-jump while the page loads); JS only nudges it away from the screen edge */
@media (min-width:768px){
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken>.wd-dropdown,
 .wd-nav:not(.wd-nav-mobile)>li.sdmm-marken>.sub-menu-dropdown{left:50%!important;margin-left:calc(var(--sdmm-pw,900px) / -2 + var(--sdmm-shift,0px))!important}
}

/* ===== v1.6 spare-parts menu: entries without a logo get a letter tile ===== */
.sdmm-brand-item .sdmm-logo-wrap.sdmm-ph{background:rgba(63,182,127,.12)!important;box-shadow:inset 0 0 0 1px rgba(63,182,127,.28)}
.sdmm-brand-item .sdmm-logo-wrap .sdmm-ph-t{font-size:20px;font-weight:800;line-height:1;color:var(--sdmm-acc,#3fb67f);letter-spacing:.02em}