/* Briolight global chrome: the same footer email position for all templates.
   Use the approved homepage's natural layout; no per-template offsets. */
@media(min-width:992px){
  body .footer-v2 .footer-v2__email{
    display:block!important;
    position:static!important;
    top:auto!important;
    transform:none!important;
    margin-top:10px!important;
    line-height:1.25!important;
  }
}
@media(max-width:991.98px){
  body .footer-v2 .footer-v2__email{
    display:block!important;
    position:static!important;
    top:auto!important;
    transform:none!important;
    margin-top:10px!important;
    line-height:1.25!important;
  }
}

/* Align the email text baseline with the founder name on desktop (approved visual). */
@media(min-width:992px){
 body .footer-v2 .footer-v2__email{
  transform:translateY(11px)!important;
 }
}

/* GLOBAL PRODUCT HEADER: approved interactive-floor desktop/mobile menu layout.
   Shared by every product page; shared by all product pages.
   Footer remains globally controlled above in this same stylesheet. */

/* Home: keep the approved product-menu typography. Center the whole menu
   in the free space between the logo and contact controls, not the viewport. */
@media(min-width:1200px){
 body.product-prototype .header .col-12{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;column-gap:clamp(12px,1.4vw,26px)!important}
 body.product-prototype .header .logo{grid-column:1;min-width:0}
 body.product-prototype .header .nav{grid-column:2;position:static!important;left:auto!important;right:auto!important;transform:none!important;display:flex!important;justify-content:center!important;min-width:0!important;width:100%!important;margin:0!important}
 body.product-prototype .header .nav>ul{display:flex!important;justify-content:center!important;align-items:center!important;flex-wrap:nowrap!important}
 body.product-prototype .header .nav>ul>li>a{font-size:16px!important;white-space:nowrap!important}
 body.product-prototype .header-actions{grid-column:3;position:static!important;min-width:0!important;margin:0!important}
 body.product-prototype .header .mobile-group .site-search-toggle{display:grid!important;visibility:visible!important;opacity:1!important;width:36px!important;height:36px!important;flex:0 0 36px!important;order:2!important}
 body.product-prototype .header .mobile-group .lang-switcher{order:1!important}
 body.product-prototype .header .mobile-group{display:flex!important;align-items:center!important;gap:10px!important}
}
@media(min-width:1200px) and (max-width:1999.98px){
 body.product-prototype .header .nav>ul>li{margin-left:clamp(15.6px,1.69vw,31.2px)!important;margin-right:clamp(15.6px,1.69vw,31.2px)!important}
 body.product-prototype .header-messengers{display:none!important}
 body.product-prototype .header .col-12{column-gap:8px!important}
 body.product-prototype .header .nav>ul>li>a{font-size:16px!important}
}
@media(min-width:2000px){
 body.product-prototype .header .nav>ul>li{margin-left:30.8px!important;margin-right:30.8px!important}
}
@media(max-width:1199.98px){
 body.product-prototype .site-search-toggle{display:grid!important;place-items:center!important;width:34px!important;height:34px!important;flex:0 0 34px!important}
 body.product-prototype .mobile-group{display:flex!important;align-items:center!important}
}
@media(max-width:991.98px){
 body.product-prototype .mobile-group .site-search-toggle{order:1!important}
 body.product-prototype .mobile-group .lang-switcher{order:2!important}
 body.product-prototype .mobile-group .btn-menu{order:3!important}
}
@media(max-width:575px){
 body.product-prototype .mobile-group{gap:6px!important;margin-right:0!important}
 body.product-prototype .site-search-toggle{width:32px!important;height:32px!important;flex-basis:32px!important}
}


/* Full HD search must be visible immediately after language selector. */
@media(min-width:1200px) and (max-width:1999.98px){
 body.product-prototype .header .header-actions{display:flex!important;align-items:center!important;flex:0 0 auto!important;overflow:visible!important}
 body.product-prototype .header .mobile-group{display:flex!important;align-items:center!important;flex:0 0 auto!important;gap:8px!important;min-width:104px!important;margin:0!important;overflow:visible!important}
 body.product-prototype .header .mobile-group .lang-switcher{order:1!important;flex:0 0 58px!important}
 body.product-prototype .header .mobile-group button.site-search-toggle{order:2!important;display:grid!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:20!important;flex:0 0 36px!important;width:36px!important;height:36px!important;min-width:36px!important;padding:0!important;place-items:center!important;color:#232323!important;background:transparent!important}
 body.product-prototype .header .mobile-group button.site-search-toggle svg{display:block!important;width:22px!important;height:22px!important;visibility:visible!important;opacity:1!important;stroke:currentColor!important}
}


@media(max-width:991.98px){
body.product-prototype .header .mobile-group .site-search-toggle{display:none!important}
body.product-prototype .mobile-menu>.mobile-menu__search{display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;height:46px!important;margin:0 0 20px!important;padding:0 14px!important;box-sizing:border-box!important;border:1px solid #cbd8e3!important;border-radius:10px!important;background:#fff!important;color:#4b5964!important;font-size:15px!important;text-align:left!important;cursor:pointer!important}
body.product-prototype .mobile-menu>.mobile-menu__search svg{width:20px!important;height:20px!important;flex:0 0 20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important}
body.product-prototype .mobile-menu .mobile-menu__block,body.product-prototype .mobile-menu .mobile-menu__block-title{text-align:left!important}
body.product-prototype .mobile-menu .mobile-menu__block .phone{display:block!important;width:auto!important;margin-left:0!important;margin-right:0!important;text-align:left!important}
body.product-prototype .mobile-menu .horizontal-socials{justify-content:flex-start!important;margin-left:0!important;margin-right:0!important;padding-left:0!important}
body.product-prototype .mobile-menu .horizontal-socials li{margin-left:0!important}
}
@media(min-width:992px){body.product-prototype .mobile-menu>.mobile-menu__search{display:none!important}}



/* Keep the approved homepage footer untouched.
   Other templates: remove the extra 11px downward translation.
   This is a shared global rule, not per-page copies. */
@media(min-width:992px){
 body:not(.home) .footer-v2 .footer-v2__email{
   transform:translateY(9px)!important;
 }
}

/* Non-home templates: compensate excess gap beneath messenger icons.
   Homepage's approved positioning and existing global styles remain unchanged. */
@media(min-width:992px){
 body:not(.home) .footer-v2 .footer-v2__email{
   margin-top:10px!important;
 }
}


/* Shared consent banner – compact, balanced opt-in choices. */
body .cookie-consent{
 box-sizing:border-box!important;
 padding:14px 18px!important;
 gap:14px!important;
 align-items:center!important;
 max-width:960px!important;
}
body .cookie-consent p{
 margin:0!important;
 flex:1 1 320px!important;
 min-width:0!important;
 line-height:1.4!important;
}
body .cookie-consent .cookie-consent__actions{
 display:flex!important;
 flex:0 0 auto!important;
 align-items:center!important;
 gap:10px!important;
 margin-left:auto!important;
}
body .cookie-consent .cookie-consent__actions button{
 box-sizing:border-box!important;
 min-width:0!important;
 width:auto!important;
 height:44px!important;
 min-height:44px!important;
 padding:0 16px!important;
 white-space:nowrap!important;
 font:600 15px/1.15 Roboto,Arial,sans-serif!important;
 border-radius:7px!important;
 box-shadow:none!important;
}
body .cookie-consent .cookie-consent__reject{
 background:#fff!important;
 color:#30363b!important;
 border:1px solid #cdd4da!important;
}
body .cookie-consent .cookie-consent__accept{
 background:#FCD203!important;
 color:#161616!important;
 border:1px solid #FCD203!important;
}
@media(max-width:767px){
 body .cookie-consent{padding:12px 14px!important;gap:12px!important;align-items:stretch!important}
 body .cookie-consent p{flex:0 1 auto!important}
 body .cookie-consent .cookie-consent__actions{width:100%!important;margin:0!important}
 body .cookie-consent .cookie-consent__actions button{flex:1 1 0!important;padding:0 9px!important}
}
@media(max-width:360px){
 body .cookie-consent .cookie-consent__actions{flex-direction:column!important}
 body .cookie-consent .cookie-consent__actions button{flex:none!important;width:100%!important}
}



/* Tablet consent: avoid a 320px-tall paragraph in the inherited column layout. */
@media (min-width:768px) and (max-width:991.98px){
  body .cookie-consent p{flex:0 1 auto!important}
}
@media (min-width:768px) and (max-width:1399.98px) and (orientation:landscape){
  body .cookie-consent{
    left:16px!important;
    right:16px!important;
    bottom:16px!important;
    width:min(480px,calc(100vw - 32px))!important;
    max-width:480px!important;
    padding:14px 16px!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
  }
  body .cookie-consent p{flex:0 1 auto!important}
  body .cookie-consent .cookie-consent__actions{
    width:100%!important;
    margin:0!important;
    flex:0 0 auto!important;
    flex-direction:row!important;
  }
  body .cookie-consent .cookie-consent__actions button{flex:1 1 0!important}
}

/* Keep the approved hero photograph behind Swiper during initial width recalculation.
   No slide content, timing or navigation is changed. */
body.home .promo,
body.home .promo .swiper-full{
  background-image:url('/assets/briolight-children-hero-enhanced-v1.webp');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

/* Mobile menu search is a full-width action row, not the compact header icon. */
@media (max-width:991px){
 html[lang^="uk"] body .mobile-menu>button.mobile-menu__search.site-search-toggle{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:46px!important;
  min-height:46px!important;
  flex:0 0 auto!important;
  margin:0 0 20px!important;
  padding:0 14px!important;
  box-sizing:border-box!important;
  border:1px solid #cbd8e3!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#4b5964!important;
  text-align:left!important;
 }
 html[lang^="uk"] body .mobile-menu>button.mobile-menu__search.site-search-toggle svg{
  display:block!important;
  position:static!important;
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  flex:0 0 20px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
 }
 html[lang^="uk"] body .mobile-menu>button.mobile-menu__search.site-search-toggle span{
  display:block!important;
  position:static!important;
  min-width:0!important;
  overflow:hidden!important;
  white-space:normal!important;
  font-size:15px!important;
  line-height:1.35!important;
 }
}

/* UA mobile drawer search: final authoritative geometry.
   Keep the search action inside the drawer and prevent legacy compact-icon
   rules from shrinking or shifting the full-width control. */
@media(max-width:991.98px){
 html[lang^="uk"] body.home .header .mobile-group button.site-search-toggle{
  display:none!important;
 }
 html[lang^="uk"] body.home .mobile-menu>button.mobile-menu__search.site-search-toggle{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  float:none!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:46px!important;
  min-height:46px!important;
  margin:0 0 20px!important;
  padding:0 14px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
 }
 html[lang^="uk"] body.home .mobile-menu>button.mobile-menu__search.site-search-toggle svg{
  display:block!important;
  position:static!important;
  flex:0 0 20px!important;
  width:20px!important;
  height:20px!important;
  margin:0!important;
 }
 html[lang^="uk"] body.home .mobile-menu>button.mobile-menu__search.site-search-toggle span{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
 }
}


/* Localized 404 uses the same desktop navigation spacing as its home page. */
html[lang="en"] body.not-found-page .lang-switcher .lang-swicher__current-lang,
html[lang="de"] body.not-found-page .lang-switcher .lang-swicher__current-lang{gap:0!important;white-space:nowrap!important}


/* Release safeguard: keep mobile language/menu controls clear of the viewport
   edge on every language and template. This restores the same visual inset as
   the logo side while retaining the approved header geometry. */
@media(max-width:991.98px){
 body .header .mobile-group{
  margin-left:auto!important;
  margin-right:8px!important;
 }
}

/* Related-product cards: stable catalogue crop even if legacy styles differ
   between UA, EN and DE templates. */
body.product-prototype .crosssell-grid .content-card{
 overflow:hidden;
}
body.product-prototype .crosssell-grid .content-card>img{
 display:block!important;
 width:100%!important;
 height:190px!important;
 object-fit:cover!important;
 object-position:center!important;
 background:#eee;
}
@media(max-width:767px){
 body.product-prototype .crosssell-grid .content-card>img{height:230px!important}
}
@media(max-width:480px){
 body.product-prototype .crosssell-grid .content-card>img{height:205px!important}
}

/* Approved cross-sell sandbox photo: shift the crop ten pixels upward so the sand activity is more visible, without clipping the face. */
body.product-prototype .crosssell-grid .content-card>img[src="/assets/products/interactive-sandbox.jpg"]{
 object-position:center calc(50% - 10px)!important;
}

/* Approved cross-sell mirror crop: show the child looking into the mirror, not the computer legs. */
body.product-prototype .crosssell-grid .content-card>img[src="/assets/product-galleries/mirror/briolight-speech-therapy-mirror-01-960x720-1.jpg"]{
 object-position:center calc(50% + 5px)!important;
}


/* QA refinement 2026-10-26: independent dropdown geometries.
   Restore full labels; keep each selector's approved chevron/vertical rhythm.
   Product width follows the longest text plus equal 20px side insets. */
@media(min-width:992px){
  body .header .nav>ul>li.menu-item-has-children>a{
    position:relative!important;
    z-index:2!important;
    margin-right:22px!important;
  }
  body .header .nav>ul>li.menu-item-has-children>a::before{
    right:-22px!important;
    top:7px!important;
  }
  body .header .nav>ul>li.menu-item-has-children>.sub-menu{
    position:absolute!important;
    top:-13px!important;
    left:-30px!important;
    display:block!important;
    width:max-content!important;
    min-width:0!important;
    max-width:calc(100vw - 32px)!important;
    box-sizing:border-box!important;
    padding:56px 61px 23px 30px!important;
    text-align:left!important;
  }
  body .header .nav>ul>li.menu-item-has-children>.sub-menu>li{
    display:block!important;
    width:auto!important;
    margin:0 0 10px!important;
    padding:0!important;
  }
  body .header .nav>ul>li.menu-item-has-children>.sub-menu>li:last-child{
    margin-bottom:0!important;
  }
  body .header .nav>ul>li.menu-item-has-children>.sub-menu>li>a{
    position:relative!important;
    display:inline-block!important;
    width:auto!important;
    max-width:100%!important;
    padding:2px 0!important;
    margin:0!important;
    white-space:nowrap!important;
  }
  body .header .nav>ul>li.menu-item-has-children>.sub-menu>li>a::after{
    bottom:-4px!important;
    left:0!important;
    width:0!important;
    max-width:100%!important;
  }
  body .header .nav>ul>li.menu-item-has-children>.sub-menu>li>a:hover::after,
  body .header .nav>ul>li.menu-item-has-children>.sub-menu>li>a:focus-visible::after{
    width:100%!important;
  }
  /* Language menu: keep its OWN line spacing and chevron position.
     Selected item and all locale labels remain visible in UA/EN/DE. */
  html[lang] body .header .lang-switcher ul{
    top:-22px!important;
    left:-20px!important;
    right:auto!important;
    width:96px!important;
    min-width:96px!important;
    max-width:96px!important;
    box-sizing:border-box!important;
    padding:51px 20px 17px!important;
    text-align:left!important;
  }
  html[lang] body .header .lang-switcher ul>li{
    display:block!important;
    visibility:visible!important;
    margin:0 0 10px!important;
    padding:0!important;
  }
  html[lang] body .header .lang-switcher ul>li:last-child{
    margin-bottom:0!important;
  }
  html[lang] body .header .lang-switcher ul>li>a{
    display:inline-block!important;
    visibility:visible!important;
    opacity:1!important;
    width:auto!important;
    margin:0!important;
    padding:2px 0!important;
    white-space:nowrap!important;
  }
  html[lang] body .header .lang-switcher .lang-swicher__current-lang{
    visibility:visible!important;
    opacity:1!important;
    white-space:nowrap!important;
  }
  /* Phone dropdown is intentionally untouched – Ukrainian version is approved. */
}


/* Fixed current-language logic in UA / EN / DE:
   only the active locale is shown in the trigger; both alternatives are links. */
body .header .lang-switcher .lang-swicher__current-lang{
  position:relative!important;
  z-index:30!important;
  visibility:visible!important;
  opacity:1!important;
}
/* Suppress the native black mouse-focus ring; keep a subtle keyboard cue. */
html[lang] body .header .lang-switcher .lang-swicher__current-lang:focus{
  outline:none!important;
}
html[lang] body .header .lang-switcher .lang-swicher__current-lang:focus-visible{
  text-decoration:underline!important;
  text-decoration-color:#fcd203!important;
  text-decoration-thickness:2px!important;
  text-underline-offset:5px!important;
}
body .header .lang-switcher ul{
  z-index:20!important;
}
body .header .lang-switcher ul>li.current-lang{
  display:none!important;
}
body .header .lang-switcher ul>li:not(.current-lang),
body .header .lang-switcher ul>li:not(.current-lang)>a{
  visibility:visible!important;
  opacity:1!important;
}
body .header .lang-switcher.is-open ul{
  visibility:visible!important;
  opacity:1!important;
  transform:translateY(0)!important;
}

/* All footer mailto links share the yellow hover/focus color of phone links.
   Preserve their normal color, positioning and typography in UA / EN / DE. */
body .footer-v2 a.footer-v2__email:hover,
body .footer-v2 a.footer-v2__email:focus-visible{
  color:#fcd203!important;
}

/* Briolight – definitive mobile language dropdown.
   A separate white surface contains CURRENT trigger + TWO alternatives.
   The alternatives are positioned independently of the trigger; legacy
   CSS top/transform and localization overrides cannot make them overlap. */
@media (max-width:991.98px) {
  html body .header .mobile-group .lang-switcher {
    position:relative!important;
    z-index:110!important;
    isolation:isolate!important;
    overflow:visible!important;
  }
  html body .header .mobile-group .lang-switcher::before {
    content:""!important;
    display:block!important;
    position:absolute!important;
    top:-14px!important;
    left:-18px!important;
    width:98px!important;
    height:136px!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border:1px solid rgba(33,150,243,.14)!important;
    box-shadow:0 4px 14px rgba(33,150,243,.16)!important;
    pointer-events:none!important;
    opacity:0!important;
    visibility:hidden!important;
    z-index:0!important;
    transform:none!important;
  }
  html body .header .mobile-group .lang-switcher:is(:hover,.is-open,:focus-within)::before {
    opacity:1!important;
    visibility:visible!important;
  }
  html body .header .mobile-group .lang-switcher .lang-swicher__current-lang {
    position:relative!important;
    z-index:3!important;
    display:flex!important;
    white-space:nowrap!important;
    width:max-content!important;
    min-width:0!important;
    max-width:80px!important;
    height:22px!important;
    line-height:22px!important;
    color:#212121!important;
    opacity:1!important;
    visibility:visible!important;
    margin:0!important;
    padding:0!important;
  }
  html body .header .mobile-group .lang-switcher ul {
    position:absolute!important;
    top:36px!important;
    left:0!important;
    right:auto!important;
    width:80px!important;
    min-width:80px!important;
    max-width:80px!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:7px 0 0!important;
    box-sizing:border-box!important;
    display:block!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    transform:none!important;
    z-index:2!important;
  }
  html body .header .mobile-group .lang-switcher ul>li {
    display:block!important;
    float:none!important;
    clear:both!important;
    width:100%!important;
    height:22px!important;
    min-height:22px!important;
    margin:0 0 12px!important;
    padding:0!important;
    opacity:1!important;
    visibility:visible!important;
  }
  html body .header .mobile-group .lang-switcher ul>li:last-child {
    margin-bottom:0!important;
  }
  html body .header .mobile-group .lang-switcher ul>li.current-lang {
    display:none!important;
  }
  html body .header .mobile-group .lang-switcher ul>li>a {
    position:static!important;
    display:block!important;
    width:auto!important;
    height:22px!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    font-size:14px!important;
    line-height:22px!important;
    color:#212121!important;
    background:none!important;
    text-decoration:none!important;
    white-space:nowrap!important;
    opacity:1!important;
    visibility:visible!important;
  }
  html body .header .mobile-group .lang-switcher:not(:hover):not(.is-open):not(:focus-within) ul {
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  html body .header .mobile-group .lang-switcher:is(:hover,.is-open,:focus-within) ul {
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:none!important;
  }
}

/* 2026-10-27 approved selectors: desktop language rhythm, EN/DE phones,
   and click-only mobile language dropdown. No UA phone changes. */
@media(min-width:992px){
 html body .header .lang-switcher .lang-swicher__current-lang::after{
   margin-left:17px!important;
 }
 html body .header .lang-switcher ul>li>a{
   display:inline-block!important;position:relative!important;
   text-decoration:none!important;
 }
 html body .header .lang-switcher ul>li>a::after{
   content:""!important;position:absolute!important;
   left:0!important;right:auto!important;bottom:-4px!important;
   width:0!important;border-bottom:2px solid #fcd203!important;
   transition:width .25s ease!important;
 }
 html body .header .lang-switcher ul>li>a:hover::after,
 html body .header .lang-switcher ul>li>a:focus-visible::after{width:100%!important}
 html[lang="en"] body .header-contacts .phones,
 html[lang="de"] body .header-contacts .phones,
 html[lang="en"] body .header-contacts .phones__current,
 html[lang="de"] body .header-contacts .phones__current,
 html[lang="en"] body .header-contacts .phones__hidden,
 html[lang="de"] body .header-contacts .phones__hidden{
    width:max-content!important;min-width:0!important;
 }
 html[lang="en"] body .header-contacts .phones__current,
 html[lang="de"] body .header-contacts .phones__current{
    display:inline-flex!important;justify-content:flex-start!important;
    gap:10px!important;padding-right:0!important;
 }
 html[lang="en"] body .header-contacts .phones__current>.selector-chevron,
 html[lang="de"] body .header-contacts .phones__current>.selector-chevron{
    margin:0 0 0 2px!important;flex-shrink:0!important;
 }
 html[lang="en"] body .header-contacts .phones__hidden,
 html[lang="de"] body .header-contacts .phones__hidden{
    min-width:calc(100% + 20px)!important;
    padding-left:20px!important;padding-right:20px!important;
 }
}
@media(max-width:991.98px){
 html body .header .mobile-group .lang-switcher::before{
   width:83px!important;height:119px!important;left:-15px!important;
 }
 html body .header .mobile-group .lang-switcher ul{
   width:68px!important;min-width:68px!important;max-width:68px!important;
   top:34px!important;padding-top:2px!important;
 }
 html body .header .mobile-group .lang-switcher:not(.is-open) ul{
   opacity:0!important;visibility:hidden!important;pointer-events:none!important;
 }
 html body .header .mobile-group .lang-switcher:not(.is-open)::before{
   opacity:0!important;visibility:hidden!important;pointer-events:none!important;
 }
 html body .header .mobile-group .lang-switcher.is-open ul,
 html body .header .mobile-group .lang-switcher.is-open::before{
   opacity:1!important;visibility:visible!important;
 }
 html body .header .mobile-group .lang-switcher.is-open ul{pointer-events:auto!important}
}

/* Final 2026-10-27 locale affordances – same rule in UA / EN / DE. */
@media(min-width:992px){
  /* Whitespace beside the label is also a usable language hit target. */
  html[lang] body .header .lang-switcher ul>li{
    width:100%!important;
  }
  html[lang] body .header .lang-switcher ul>li>a{
    display:flex!important;
    align-items:center!important;
    box-sizing:content-box!important;
    width:calc(100% + 20px)!important;
    min-height:24px!important;
    padding:0!important;
    cursor:pointer!important;
  }
  html[lang] body .header .lang-switcher ul>li>a::after{
    display:none!important;
  }
  html[lang] body .header .lang-switcher ul>li>a>.locale-option-label{
    display:inline-block!important;
    position:relative!important;
    white-space:nowrap!important;
    width:max-content!important;
  }
  html[lang] body .header .lang-switcher ul>li>a>.locale-option-label::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    bottom:-4px!important;
    width:0!important;
    border-bottom:2px solid #fcd203!important;
    transition:width .2s ease!important;
  }
  html[lang] body .header .lang-switcher ul>li>a:hover>.locale-option-label::after,
  html[lang] body .header .lang-switcher ul>li>a:focus-visible>.locale-option-label::after{
    width:100%!important;
  }
  /* The UA selector stays as approved. EN/DE get breathing room to the
     divider and, on narrow desktop, between phones and locale switch. */
  html[lang="en"] body .header .header-contacts .phones,
  html[lang="de"] body .header .header-contacts .phones{
    margin-right:12px!important;
  }
  html[lang="en"] body .header .header-contacts,
  html[lang="de"] body .header .header-contacts{
    margin-right:8px!important;
  }
}
@media(max-width:991.98px){
  /* Touch: only JS is-open can show alternatives, not sticky mobile :hover. */
  html body .header .mobile-group .lang-switcher:not(.is-open) ul,
  html body .header .mobile-group .lang-switcher:not(.is-open)::before{
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  }
  html body .header .mobile-group .lang-switcher.is-open ul,
  html body .header .mobile-group .lang-switcher.is-open::before{
    opacity:1!important;visibility:visible!important;
  }
  html body .header .mobile-group .lang-switcher ul>li>a{
    width:100%!important;
    min-height:25px!important;
    cursor:pointer!important;
  }
}

/* Phone dropdown: yellow hover underline directly under the number only. */
@media(min-width:992px){
  html[lang] body .header .phones__hidden>a.phone{
    position:relative!important;
    display:table!important;
    width:max-content!important;
    max-width:100%!important;
    text-decoration:none!important;
  }
  html[lang] body .header .phones__hidden>a.phone::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    bottom:-3px!important;
    width:0!important;
    border-bottom:2px solid #fcd203!important;
    transition:width .22s ease!important;
  }
  html[lang] body .header .phones__hidden>a.phone:hover::after,
  html[lang] body .header .phones__hidden>a.phone:focus-visible::after{
    width:100%!important;
  }
}

/* Keep full-row locale click areas while underlining label glyphs on hover. */
@media(min-width:992px){
 html[lang] body .header .lang-switcher ul>li>a:hover,
 html[lang] body .header .lang-switcher ul>li>a:focus-visible{
   text-decoration:underline!important;
   text-decoration-color:#fcd203!important;
   text-decoration-thickness:2px!important;
   text-underline-offset:5px!important;
 }
}


/* Mobile language dropdown: one self-contained surface, click-controlled.
   Unlike the old independent ::before background, the option labels and
   white background always open and close together. UA / EN / DE only. */
@media(max-width:991.98px){
  html[lang] body .header .mobile-group .lang-switcher::before{
    content:none!important;
    display:none!important;
  }
  html[lang] body .header .mobile-group .lang-switcher ul{
    position:absolute!important;
    top:calc(100% + 8px)!important;
    right:0!important;
    left:auto!important;
    width:90px!important;
    min-width:90px!important;
    max-width:90px!important;
    height:auto!important;
    min-height:0!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:9px 12px!important;
    background:#fff!important;
    border:1px solid rgba(33,150,243,.2)!important;
    border-radius:4px!important;
    box-shadow:0 6px 18px rgba(33,150,243,.18)!important;
    transform:none!important;
    z-index:120!important;
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  html[lang] body .header .mobile-group .lang-switcher.is-open ul{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  html[lang] body .header .mobile-group .lang-switcher:not(.is-open) ul{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  html[lang] body .header .mobile-group .lang-switcher ul>li{
    min-height:28px!important;
    height:auto!important;
    margin:0 0 5px!important;
  }
  html[lang] body .header .mobile-group .lang-switcher ul>li:last-child{
    margin-bottom:0!important;
  }
  html[lang] body .header .mobile-group .lang-switcher ul>li>a{
    display:flex!important;
    align-items:center!important;
    min-height:28px!important;
    height:auto!important;
    width:100%!important;
    padding:2px 0!important;
    text-align:left!important;
  }
}

/* One mobile language menu surface covering the selected label plus two choices.
   The label remains above the same white panel; menu closes through pointerdown. */
@media(max-width:991.98px){
  html[lang] body .header .mobile-group .lang-switcher{
    position:relative!important;
    isolation:isolate!important;
    z-index:200!important;
  }
  html[lang] body .header .mobile-group .lang-switcher .lang-swicher__current-lang{
    position:relative!important;
    z-index:131!important;
  }
  html[lang] body .header .mobile-group .lang-switcher ul{
    top:-13px!important;
    right:auto!important;
    left:-20px!important;
    width:80px!important;
    min-width:80px!important;
    max-width:80px!important;
    padding:43px 19px 11px!important;
    background:#fff!important;
    z-index:120!important;
  }
}

/* 2026-11-02: the full white mobile locale row is a reliable touch target.
   Keep the existing dropdown size, location and desktop layout. */
@media(max-width:991.98px){
  html[lang] body .header .mobile-group .lang-switcher ul>li{
    box-sizing:border-box!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:0!important;
  }
  html[lang] body .header .mobile-group .lang-switcher ul>li>a{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
    width:calc(100% + 38px)!important;
    max-width:none!important;
    height:44px!important;
    min-height:44px!important;
    margin:0 0 0 -19px!important;
    padding:0 19px!important;
    text-align:left!important;
    cursor:pointer!important;
  }
}

/* Tablet-landscape header alignment, 2026-11-04.
   Reference: approved product header. Only non-product templates (home,
   About, blog listing/articles and 404), UA/EN/DE. Keep phone/desktop
   layouts, product headers, search, language dropdown and menu JS intact.
   The legacy Bootstrap .row negative margins and zeroed mobile .container-fluid
   paddings otherwise push the logo and burger against the viewport edges. */
@media (min-width:768px) and (max-width:991.98px){
  html[lang] body:is(:not(.product-prototype),.about-page,.blog-page,.not-found-page) .header{
    box-sizing:border-box!important;
    padding-left:12px!important;
    padding-right:20px!important;
  }
  html[lang] body:is(:not(.product-prototype),.about-page,.blog-page,.not-found-page) .header>.container-fluid,
  html[lang] body:is(:not(.product-prototype),.about-page,.blog-page,.not-found-page) .header>.container-fluid>.row,
  html[lang] body:is(:not(.product-prototype),.about-page,.blog-page,.not-found-page) .header>.container-fluid>.row>.col-12{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  html[lang] body:is(:not(.product-prototype),.about-page,.blog-page,.not-found-page) .header .mobile-group{
    margin-right:0!important;
  }
}