/* Compact search access; the one native widget is still moved by the theme. */
.madime-search-panel { display:none; }
.madime-search-toggle { flex:0 0 44px; width:44px; min-height:44px; justify-content:center; }
.madime-search-toggle:focus-visible { outline:2px solid #414141; outline-offset:2px; }
#ps_searchbar .madime-search-submit .material-icons { display:block; font-size:20px; }
#searchCanvas [data-bs-dismiss="offcanvas"] { --bs-btn-color:#414141; --bs-btn-hover-color:#161616; --bs-btn-active-color:#161616; }
@layer utilities {
  #searchCanvas [data-bs-dismiss="offcanvas"] { color:#414141!important; }
}
#searchCanvas [data-bs-dismiss="offcanvas"]:focus-visible { outline:2px solid #414141; outline-offset:2px; }

@media (min-width:768px) {
  body #header .header-bottom__row { position:relative; }
  .madime-header__tools { gap:4px; }
  .madime-header__tools .header-block__action-btn { min-width:44px; min-height:44px; justify-content:center; }
  .madime-search-panel {
    position:absolute; inset:auto 0 auto auto; top:100%; width:min(440px, calc(100vw - 32px));
    padding:16px; background:#fff; border:1px solid #e0e0e0; box-shadow:0 6px 18px rgb(0 0 0 / 12%); z-index:20;
  }
  .madime-search-panel .ps-searchbar { min-width:0; margin:0; width:100%; }
  .madime-search-panel .ps-searchbar__dropdown { width:100%; max-width:100%; }
  .madime-search-panel .ps-searchbar__input { color:#414141; border-color:#a5a5a5; }
  .madime-search-panel .ps-searchbar__input:focus { border-color:#414141; box-shadow:0 0 0 2px rgb(65 65 65 / 12%); }
  /* This layer also overrides the old custom.css desktop display:none rules. */
  @layer utilities {
    body #header #_desktop_ps_searchbar.madime-search-panel.is-open { display:block!important; }
  }
}
@media (min-width:1200px) {
  .madime-header__tools { width:140px; }
  /* Reserve the final menu arrow as well as the three tools. */
  body #header .ps-mainmenu--desktop .ps-mainmenu__tree { padding-right:164px; }
}
@media (min-width:1200px) and (max-width:1599.98px) {
  /* The compact menu is centred in the space left by the three tools. */
  body #header .header-bottom__logo { left:calc(50% - 70px); }
}
@media (min-width:1600px) {
  /* Keep breathing room around the centred 161px logo after adding the loupe. */
  body #header .ps-mainmenu--desktop .ps-mainmenu__tree {
    grid-template-columns:minmax(0,122fr) minmax(0,179fr) minmax(0,115fr) minmax(0,224fr) 250px minmax(0,235fr) minmax(0,166fr) minmax(0,119fr);
  }
}
