@media (max-width:767px){
  html body.headerScrolled .top-navigation-bar{top:0!important;transform:none!important;}
  html body.headerScrolled #header{top:50px!important;}
}

@media(max-width:767px){html body.headerScrolled .popup-widget.cart-widget{top:100px!important;}}

/* Isolated diagnostic prototype only. Not approved for deployment. */
@media(max-width:767px){
 html body.mobile-header-version-0.template-11:not(.dklabCrystal):not(.headerScrolled) .top-navigation-bar,
 html body.mobile-header-version-0.template-11:not(.dklabCrystal):not(.headerScrolled) #header{position:relative!important;top:auto!important;transform:none!important;transition:none!important;}
}

@media(max-width:767px){html body.mobile-header-version-0.template-11:not(.dklabCrystal):not(.headerScrolled) #content-wrapper{padding-top:10px!important;}}

/* === FIX START: NE-HEADER-SCROLL-NO-JUMP-20261021 === */
/* headerScrolled takes both 50px header rows out of flow. Where #content-wrapper follows #header directly
   (homepage, cart) the base CSS compensated with #content-wrapper padding 10px -> 110px: content stays put,
   but the #content-wrapper box itself moves 100px = layout shift 0.1185 on every switch (CrUX home CLS).
   Reserve the 100px on .user-action, the in-flow element right before the rows, and keep the 10px padding:
   no box moves, also with the information bar (.site-msg) above. Breadcrumb pages: NE-MOBILE-BREADCRUMB-FLOW-20260921
   in base CSS (not matched here). Without :has() support the old behaviour stays. */
@supports selector(:has(*)){@media(max-width:767px){
 html body.mobile-header-version-0.template-11:not(.dklabCrystal).headerScrolled .overall-wrapper>.user-action:has(+.top-navigation-bar+#header+#content-wrapper){padding-bottom:100px!important;}
 html body.mobile-header-version-0.template-11:not(.dklabCrystal).headerScrolled .overall-wrapper>.user-action+.top-navigation-bar+#header+#content-wrapper{padding-top:10px!important;}
}}
/* === FIX END: NE-HEADER-SCROLL-NO-JUMP-20261021 === */

@media(max-width:767px){
.overall-wrapper > .site-msg.information > .container:not(:has(.ne-site-info-label))::before{content:"Aktuálně";display:inline-flex;align-items:center;grid-column:1;justify-self:start;min-height:24px;padding:3px 9px;color:#fff;background:rgba(10,67,17,.42);border:1px solid rgba(255,255,255,.35);border-radius:999px;font-size:.6875rem;font-weight:700;line-height:1;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;box-sizing:border-box;}
}

@media(max-width:767px){
html body.mobile-header-version-0.template-11 #header .site-name{display:flex!important;position:absolute!important;top:-50px!important;left:0!important;width:136px!important;max-width:136px!important;height:50px!important;margin:0!important;align-items:center!important;z-index:101;}
html body.mobile-header-version-0.template-11 #header .site-name img{max-width:128px!important;max-height:50px!important;width:auto!important;height:auto!important;}
}

@media(max-width:767px){html body.mobile-header-version-0.template-11 #header .site-name{left:15px!important;}html body.mobile-header-version-0.template-11 #header .site-name a{display:flex!important;align-items:center!important;height:50px!important;margin:0!important;padding:0!important;line-height:1!important;}html body.mobile-header-version-0.template-11 #header .site-name img{margin:0!important;}}

@media(max-width:767px){html body.mobile-header-version-0.template-11 #header .site-name img{width:128px!important;height:32px!important;object-fit:contain;}}

/* Keep original logo above navigation background until the existing runtime moves it. */
@media(max-width:767px){html body.mobile-header-version-0.template-11:not(.dklabCrystal) #header:has(.site-name){z-index:100!important;}}

/* === FIX START: NE-TOPBAR-TOOLS-NO-JUMP-20261021 === */
/* Mobile top bar. Base JS navFunction() (DOMContentLoaded) moves .top-navigation-tools into the new .nav-part
   (base CSS <=767px: display:flex; justify-content:space-between), but navFunctions() prepends the logo
   (.site-name) into .nav-part only in a setTimeout(70). In the frame(s) between, the tools are the only visible
   flex item, so space-between draws them at the left (x 15), then they jump to the right (x 258) when the logo
   arrives = layout shift 0.0102 on every mobile page. Until the logo is inside .nav-part, push the tools to the
   end of the row, i.e. where they end up anyway. Once the logo is there the rule no longer matches, so the final
   layout is untouched. Without :has() support the old behaviour stays. */
@supports selector(:has(*)){@media(max-width:767px){
 html body .top-navigation-bar .nav-part:not(:has(>.site-name))>.top-navigation-tools{margin-inline-start:auto;}
}}
/* === FIX END: NE-TOPBAR-TOOLS-NO-JUMP-20261021 === */

@media (min-width:768px) and (max-width:991px) {
  html body #header .search { min-width:140px !important; }
}

/* Mobile scroll: retain only the menu; cart starts below its 50px row. */
@media(max-width:767px){
 html body.headerScrolled .top-navigation-bar{transform:translateY(-100%)!important;}
 html body.headerScrolled #header{top:0!important;}
 html body.headerScrolled .popup-widget.cart-widget{top:50px!important;}
}