/**
* 2010-2026 SwissGeek | Web Developer Freelance
*
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https:// opensource.org/licenses/OSL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https:// devdocs.prestashop.com/ for more information.
*
* @Module		SGK Main Menu
* @Description	Main menu of the shop: categories, CMS pages, brands, suppliers, products, shops and custom links, as a mega menu or dropdown lists on wide screens and a side drawer on phones. Replaces the native Main menu module and takes over its menu.
* @Version		1.0.2
* @Copyright	SwissGeek | Web Developer Freelance <https://swissgeek.dev/>
* @support		Support Requests <https://admin.swissgeek.dev/forms/ticket?styled=1&with_logo=1>
* @Blog			Breaking News <https://news.swissgeek.dev/> <https://news.prestageek.ch/>
* @Addons		Developments <https://prestageek.ch/> <https://add.swissgeek.dev/>
*
* @license		http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*				Valid for 1 website (or project) for each purchase of license International Registered 
*				Trademark & Property of SwissGeek. More information on <https://swissgeek.dev/license/>
*/

/* SGK Main Menu — front office. Theme-agnostic: colours and fonts come from the SwissGeek theme
   tokens (--sgk-*, set or overridden by SGK Theme Studio) when they exist, from Bootstrap (--bs-*)
   otherwise (Hummingbird, light and dark), then from fallbacks (Classic).
   Markup and classes are those of the menu of SGK Header 1.1.0 (.sgkh-*), so that themes and
   custom styles written for it keep working; the rules below are the same as its own.
   1.0.2: the base rules shared with SGK Header (.sgkh, .sgkh-svg, .sgkh-action, .sgkh-chip,
   .sgkh-sr, lists, paragraphs and buttons) only apply inside the two blocks of this module
   (.sgkmm, .sgkmm-drawer). :where() keeps their weight unchanged, and the header, search, cart
   and language blocks of SGK Header are no longer restyled by this stylesheet. */

.sgkh:where(.sgkmm, .sgkmm-drawer) {
  --sgkh-accent: var(--sgk-red, var(--bs-primary, #d7141c));
  --sgkh-accent-ink: var(--sgk-red-ink, var(--sgkh-accent));
  --sgkh-accent-text: var(--sgk-red-text, var(--sgkh-accent-ink));
  --sgkh-ink: var(--sgk-graphite, var(--sgk-ink, var(--bs-emphasis-color, #2c2f38)));
  --sgkh-text: var(--sgk-text, var(--bs-body-color, #2c2f38));
  --sgkh-muted: var(--sgk-muted, var(--bs-secondary-color, #5c6070));
  --sgkh-line: var(--sgk-line, var(--bs-border-color, #e6e7eb));
  --sgkh-surface: var(--sgk-surface, var(--bs-body-bg, #ffffff));
  --sgkh-surface-2: var(--sgk-surface-2, var(--bs-tertiary-bg, #f4f5f7));
  --sgkh-success: var(--sgk-success, #188251);
  --sgkh-radius: var(--sgk-radius, 0.625rem);
  --sgkh-radius-sm: var(--sgk-radius-sm, 0.375rem);
  --sgkh-font: var(--sgk-font-display, inherit);
  --sgkh-shadow: 0 24px 48px -24px rgba(9, 13, 16, 0.35), 0 2px 8px -4px rgba(9, 13, 16, 0.12);
  /* Width of the content of the mega panel. front.js sets it (and --sgkh-gutter) from the container
     of the header each time a panel opens, so that the columns start under the logo whatever the
     theme (Classic: 1140 px from 1200 px wide, Hummingbird and SwissGeek: 1320 px from 1400 px).
     Without it, the steps of the Bootstrap container below apply. */
  --sgkh-container: 1320px;
  --sgkh-z: 1050;

  box-sizing: border-box;
}

.sgkh:where(.sgkmm, .sgkmm-drawer) *,
.sgkh:where(.sgkmm, .sgkmm-drawer) *::before,
.sgkh:where(.sgkmm, .sgkmm-drawer) *::after {
  box-sizing: border-box;
}

@media (max-width: 1399.98px) {
  .sgkh:where(.sgkmm, .sgkmm-drawer) {
    --sgkh-container: 1140px;
  }
}

@media (max-width: 1199.98px) {
  .sgkh:where(.sgkmm, .sgkmm-drawer) {
    --sgkh-container: 960px;
  }
}

@media (max-width: 991.98px) {
  .sgkh:where(.sgkmm, .sgkmm-drawer) {
    --sgkh-container: 720px;
  }
}

.sgkh:where(.sgkmm, .sgkmm-drawer) .sgkh-svg {
  display: block;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
}

:where(.sgkmm, .sgkmm-drawer) .sgkh-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html.sgkmm-locked,
html.sgkmm-locked body {
  overflow: hidden;
}

.sgkh:where(.sgkmm, .sgkmm-drawer) ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sgkh:where(.sgkmm, .sgkmm-drawer) p {
  margin: 0;
}

.sgkh:where(.sgkmm, .sgkmm-drawer) button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
}


:where(.sgkmm) .sgkh-action {
  position: relative;
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.4rem 0.5rem;
  font-family: var(--sgkh-font);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sgkh-ink);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: var(--sgkh-radius-sm);
  transition: color 0.15s ease;
}

:where(.sgkmm) .sgkh-action:hover,
:where(.sgkmm) .sgkh-action:focus-visible {
  color: var(--sgkh-accent-text);
  text-decoration: none;
}

:where(.sgkmm) .sgkh-action:focus-visible,
.sgkh-menu__link:focus-visible,
.sgkh-menu__toggle:focus-visible,
.sgkh-panel__head:focus-visible,
.sgkh-panel__links a:focus-visible,
.sgkh-panel__sub a:focus-visible,
.sgkh-panel__all:focus-visible,
.sgkh-drop__link:focus-visible,
.sgkh-drop__all:focus-visible,
.sgkh-drawer a:focus-visible,
.sgkh-drawer button:focus-visible {
  outline: 2px solid var(--sgkh-accent-text);
  outline-offset: 2px;
}

/* Inside their box: the entries of the bar sit close to each other (an outline outside would run
   over the arrow or the label next to it), and the lines of the drawer fill a scrolling area that
   would cut an outline drawn outside. */
.sgkh-menu__link:focus-visible,
.sgkh-menu__toggle:focus-visible,
.sgkh-drawer .sgkh-drawer__link:focus-visible,
.sgkh-drawer button.sgkh-drawer__next:focus-visible {
  outline-offset: -2px;
}

/* ------------------------------------------------------------------ */
/* Main menu (wide screens)                                            */
/* ------------------------------------------------------------------ */

.sgkh-menu {
  display: flex;
  min-width: 0;
}

.sgkh-menu__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
  align-items: stretch;
}

.sgkh-menu__item {
  position: relative;
  display: flex;
  align-items: center;
}

.sgkh-menu--mega .sgkh-menu__item {
  position: static;
}

.sgkh-menu__link {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0.5rem 0.5rem;
  font-family: var(--sgkh-font);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sgkh-ink);
  text-decoration: none;
  white-space: nowrap;
}

/* Under the label: 0.85rem from the bottom of a tall bar, closer when the bar is only as tall as
   the label (displayTop of Classic), where 0.85rem would cross the label out. */
.sgkh-menu__link::after {
  position: absolute;
  right: 0.5rem;
  bottom: min(0.85rem, calc(50% - 0.6em - 4px));
  left: 0.5rem;
  height: 2px;
  content: "";
  background: var(--sgkh-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

/* Label and arrow: 0.4rem between them in all, shared so that the outline of the arrow keeps clear
   of the label (same width of the bar as before). */
.sgkh-menu__item.has-children .sgkh-menu__link {
  padding-right: 0.3rem;
}

.sgkh-menu__item.has-children .sgkh-menu__link::after {
  right: 0.3rem;
}

.sgkh-menu__link:hover,
.sgkh-menu__link:focus-visible,
.sgkh-menu__item.is-open > .sgkh-menu__link,
.sgkh-menu__item.is-current > .sgkh-menu__link {
  color: var(--sgkh-accent-text);
  text-decoration: none;
}

.sgkh-menu__link:hover::after,
.sgkh-menu__link:focus-visible::after,
.sgkh-menu__item.is-open > .sgkh-menu__link::after,
.sgkh-menu__item.is-current > .sgkh-menu__link::after {
  transform: scaleX(1);
}

.sgkh-menu__item.is-highlight > .sgkh-menu__link {
  color: var(--sgkh-accent-text);
}

.sgkh-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  margin-right: 0.1rem;
  color: var(--sgkh-muted);
  border-radius: var(--sgkh-radius-sm);
}

.sgkh-menu__toggle .sgkh-svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.18s ease;
}

.sgkh-menu__item.is-open > .sgkh-menu__toggle {
  color: var(--sgkh-accent-text);
}

.sgkh-menu__item.is-open > .sgkh-menu__toggle .sgkh-svg {
  transform: rotate(180deg);
}

/* Mega panel: across the page, just under the header (front.js sets `top`). */
.sgkh-panel[hidden] {
  display: none;
}

.sgkh-panel--mega {
  position: fixed;
  right: 0;
  left: 0;
  z-index: var(--sgkh-z);
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  background: var(--sgkh-surface);
  border-top: 3px solid var(--sgkh-accent);
  border-bottom: 1px solid var(--sgkh-line);
  box-shadow: var(--sgkh-shadow);
  animation: sgkh-drop 0.18s ease;
}

.sgkh-panel__inner {
  width: 100%;
  max-width: var(--sgkh-container);
  padding: 1.75rem var(--sgkh-gutter, 0.75rem) 1.5rem;
  margin: 0 auto;
}

.sgkh-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 1.5rem 2rem;
}

.sgkh-panel__head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  font-family: var(--sgkh-font);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sgkh-ink);
  text-decoration: none;
}

.sgkh-panel__head:hover,
.sgkh-panel__head:focus-visible,
.sgkh-panel__col.is-current > .sgkh-panel__head {
  color: var(--sgkh-accent-text);
  text-decoration: none;
}

.sgkh-panel__grid.is-flat {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.sgkh-panel__grid.is-flat .sgkh-panel__head {
  min-height: 3.5rem;
  padding: 0.85rem 1rem;
  margin: 0;
  font-weight: 600;
  background: var(--sgkh-surface);
  border: 1px solid var(--sgkh-line);
  border-radius: var(--sgkh-radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.sgkh-panel__grid.is-flat .sgkh-panel__head .sgkh-svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--sgkh-muted);
  transition: transform 0.15s ease, color 0.15s ease;
}

.sgkh-panel__grid.is-flat .sgkh-panel__head:hover,
.sgkh-panel__grid.is-flat .sgkh-panel__head:focus-visible,
.sgkh-panel__grid.is-flat .is-current > .sgkh-panel__head {
  border-color: var(--sgkh-accent);
  box-shadow: 0 8px 24px -16px rgba(9, 13, 16, 0.45);
}

.sgkh-panel__grid.is-flat .sgkh-panel__head:hover .sgkh-svg {
  color: var(--sgkh-accent-text);
  transform: translateX(3px);
}

.sgkh-panel__links li + li {
  margin-top: 0.15rem;
}

.sgkh-panel__links a,
.sgkh-panel__sub a {
  display: inline-block;
  padding: 0.2rem 0;
  font-size: 0.875rem;
  color: var(--sgkh-muted);
  text-decoration: none;
}

.sgkh-panel__links a:hover,
.sgkh-panel__links a:focus-visible,
.sgkh-panel__links .is-current > a,
.sgkh-panel__sub a:hover {
  color: var(--sgkh-accent-text);
  text-decoration: none;
}

.sgkh-panel__sub {
  padding-left: 0.75rem !important;
  margin: 0.1rem 0 0.35rem !important;
  border-left: 1px solid var(--sgkh-line);
}

.sgkh-panel__sub a {
  font-size: 0.8125rem;
}

.sgkh-panel__all,
.sgkh-drop__all {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 1.25rem;
  font-family: var(--sgkh-font);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sgkh-accent-text);
  text-decoration: none;
}

.sgkh-panel__all .sgkh-svg {
  width: 1rem;
  height: 1rem;
}

.sgkh-panel__all:hover,
.sgkh-drop__all:hover {
  text-decoration: underline;
}

/* Dropdown panel: under the entry. */
.sgkh-panel--dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--sgkh-z);
  min-width: 15rem;
  padding: 0.5rem;
  background: var(--sgkh-surface);
  border: 1px solid var(--sgkh-line);
  border-top: 3px solid var(--sgkh-accent);
  border-radius: 0 0 var(--sgkh-radius) var(--sgkh-radius);
  box-shadow: var(--sgkh-shadow);
  animation: sgkh-drop 0.16s ease;
}

.sgkh-drop__link {
  display: block;
  padding: 0.45rem 0.65rem;
  font-size: 0.875rem;
  color: var(--sgkh-text);
  text-decoration: none;
  border-radius: var(--sgkh-radius-sm);
}

.sgkh-drop__link:hover,
.sgkh-drop__link:focus-visible,
.sgkh-drop__item.is-current > .sgkh-drop__link {
  color: var(--sgkh-accent-text);
  text-decoration: none;
  background: var(--sgkh-surface-2);
}

.sgkh-drop__list .sgkh-drop__list {
  padding-left: 0.75rem;
}

.sgkh-drop__all {
  margin: 0.35rem 0.65rem 0.25rem;
}

@keyframes sgkh-drop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------------ */
/* Breakpoints: menu on wide screens, burger and drawer below          */
/* ------------------------------------------------------------------ */

.sgkh-burger {
  display: none;
}

@media (max-width: 767.98px) {
  .sgkh--bp768 .sgkh-menu {
    display: none;
  }

  .sgkh--bp768 .sgkh-burger {
    display: inline-flex;
  }
}

@media (max-width: 991.98px) {
  .sgkh--bp992 .sgkh-menu {
    display: none;
  }

  .sgkh--bp992 .sgkh-burger {
    display: inline-flex;
  }
}

@media (max-width: 1199.98px) {
  .sgkh--bp1200 .sgkh-menu {
    display: none;
  }

  .sgkh--bp1200 .sgkh-burger {
    display: inline-flex;
  }
}

/* ------------------------------------------------------------------ */
/* Side drawer (small screens)                                         */
/* ------------------------------------------------------------------ */

.sgkh-drawer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--sgkh-z) + 10);
}

.sgkh-drawer[hidden] {
  display: none;
}

.sgkh-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 13, 16, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sgkh-drawer.is-open .sgkh-drawer__backdrop {
  opacity: 1;
}

.sgkh-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(22rem, 88vw);
  color: var(--sgkh-text);
  background: var(--sgkh-surface);
  box-shadow: var(--sgkh-shadow);
  transition: transform 0.22s ease;
}

.sgkh-drawer__panel {
  left: 0;
  transform: translateX(-100%);
}

.sgkh-drawer.is-open .sgkh-drawer__panel {
  transform: none;
}

.sgkh-drawer__head {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
  align-items: center;
  min-height: 3.75rem;
  padding: 0.5rem 0.75rem 0.5rem 1.25rem;
  border-bottom: 1px solid var(--sgkh-line);
}

.sgkh-drawer__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: -0.75rem;
  border-radius: var(--sgkh-radius-sm);
}

.sgkh-drawer__back[hidden] {
  display: none;
}

.sgkh-drawer__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-family: var(--sgkh-font);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--sgkh-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sgkh-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--sgkh-muted);
  border-radius: var(--sgkh-radius-sm);
}

.sgkh-drawer__close:hover {
  color: var(--sgkh-accent-text);
  background: var(--sgkh-surface-2);
}

.sgkh-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sgkh-drawer__level[hidden] {
  display: none;
}

.sgkh-drawer__level.is-active {
  animation: sgkh-slide 0.18s ease;
}

.sgkh-drawer__item {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--sgkh-line);
}

.sgkh-drawer__link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.75rem 1.25rem;
  font-family: var(--sgkh-font);
  font-size: 0.9875rem;
  font-weight: 600;
  color: var(--sgkh-ink);
  text-decoration: none;
}

.sgkh-drawer__link:hover,
.sgkh-drawer__item.is-current > .sgkh-drawer__link,
.sgkh-drawer__item.is-highlight > .sgkh-drawer__link {
  color: var(--sgkh-accent-text);
  text-decoration: none;
}

.sgkh-drawer__item--all .sgkh-drawer__link {
  font-size: 0.875rem;
  color: var(--sgkh-accent-text);
}

.sgkh-drawer__next {
  display: flex;
  flex: 0 0 3.25rem;
  align-items: center;
  justify-content: center;
  color: var(--sgkh-muted);
  border-left: 1px solid var(--sgkh-line) !important;
}

.sgkh-drawer__next:hover {
  color: var(--sgkh-accent-text);
  background: var(--sgkh-surface-2);
}

.sgkh-drawer__foot {
  flex: 0 0 auto;
  padding: 1rem 1.25rem 1.25rem;
  background: var(--sgkh-surface-2);
  border-top: 1px solid var(--sgkh-line);
}

.sgkh-drawer__hello,
.sgkh-drawer__signin {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-family: var(--sgkh-font);
  font-weight: 700;
  color: var(--sgkh-ink);
  text-decoration: none;
}

.sgkh-drawer__signin:hover {
  color: var(--sgkh-accent-text);
  text-decoration: none;
}

.sgkh-drawer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.5rem !important;
}

.sgkh-drawer__links a {
  font-size: 0.875rem;
  color: var(--sgkh-muted);
}

.sgkh-drawer__switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 1rem;
}

.sgkh-drawer__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

:where(.sgkmm-drawer) .sgkh-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--sgkh-text);
  text-decoration: none;
  background: var(--sgkh-surface);
  border: 1px solid var(--sgkh-line);
  border-radius: 999px;
}

:where(.sgkmm-drawer) .sgkh-chip:hover {
  color: var(--sgkh-accent-text);
  text-decoration: none;
  border-color: var(--sgkh-accent);
}

:where(.sgkmm-drawer) .sgkh-chip.is-current {
  color: #fff;
  background: var(--sgkh-accent-ink);
  border-color: var(--sgkh-accent-ink);
}

@keyframes sgkh-slide {
  from {
    opacity: 0;
    transform: translateX(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------------ */
/* SGK Main Menu additions                                             */
/* ------------------------------------------------------------------ */

/* Bar and button in a row of the header (displayTop of the SwissGeek, Classic or Hummingbird theme). */
.sgkh.sgkmm {
  display: flex;
  gap: 0 0.25rem;
  align-items: center;
  align-self: stretch;
  min-width: 0;
  max-width: 100%;
}

.sgkmm .sgkh-menu {
  align-self: stretch;
}

/* Header row of the SwissGeek and Hummingbird themes (.header-bottom__row, a Bootstrap row whose
   children take the full width): the menu takes the room it needs, right after the logo on wide
   screens like the menu of SGK Header 1.1.0 was; below the drawer width its button follows the
   other icons of the header. */
.header-bottom__row > .header-bottom__logo {
  order: -2;
}

.header-bottom__row > .sgkh.sgkmm {
  flex: 0 1 auto;
  order: -1;
  width: auto;
}

@media (max-width: 1199.98px) {
  .header-bottom__row > .sgkh.sgkmm.sgkh--bp1200 {
    order: 0;
  }
}

@media (max-width: 991.98px) {
  .header-bottom__row > .sgkh.sgkmm.sgkh--bp992 {
    order: 0;
  }
}

@media (max-width: 767.98px) {
  .header-bottom__row > .sgkh.sgkmm.sgkh--bp768 {
    order: 0;
  }
}

/* Menu thumbnails of the categories (option), above the column of the mega menu. */
.sgkh-panel__thumb {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.sgkh-panel__thumb img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 5.5rem;
  object-fit: contain;
  border-radius: var(--sgkh-radius-sm);
}

/* Classic theme: its own phone menu button would open an empty panel next to this menu. */
html.sgkmm-ready #header #menu-icon,
html.sgkmm-ready #header #mobile_top_menu_wrapper {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .sgkh.sgkmm *,
  .sgkmm-drawer *,
  .sgkh-drawer__panel {
    transition: none !important;
    animation: none !important;
  }
}