/*
 * custom.css — wird von PrestaShop automatisch nach theme.css geladen
 * (FrontController::registerStylesheet 'theme-custom', Priorität 1000).
 */

/* ── Hauptmenü (ps_mainmenu), Desktop ──────────────────────────────── */

/* Abstände zentral einstellbar */
.ps-mainmenu--desktop {
  --h24-menu-py: .625rem;   /* vertikal je Menüpunkt (Theme: 1.25rem) */
  --h24-menu-px: .375rem;   /* horizontal je Menüpunkt (Theme: .5rem) */
  --h24-menu-gap: .125rem;  /* Abstand zwischen Menüpunkten (Theme: .5rem) */
}

.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree {
  gap: var(--h24-menu-gap);
}

.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .ps-mainmenu__tree-link {
  padding: var(--h24-menu-py) var(--h24-menu-px);
}

.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle {
  padding: var(--h24-menu-py) 0;
}

/* Untermenü direkt unter dem Menüpunkt statt über die volle Breite */
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li {
  position: relative;
}

.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .submenu {
  /* theme.js setzt top inline relativ zum Header; hier gilt der Menüpunkt */
  top: 100% !important;
  left: 0;
  right: auto;
  width: max-content;
  min-width: 14rem;
  max-width: min(56rem, calc(100vw - 2rem));
}

/* Rechte Menüpunkte klappen nach links auf, damit nichts aus dem Bild ragt */
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li:nth-last-child(-n+2) .submenu {
  left: auto;
  right: 0;
}

.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu > .container {
  max-width: none;
  width: auto;
  padding-inline: 0;
}

.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__row {
  --bs-gutter-x: 0;
  flex-wrap: nowrap;
  margin: 0;
}

.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__left,
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right {
  flex: 0 0 auto;
  width: auto;
}

/* Trennlinie hängt an der rechten Spalte und verschwindet mit ihr */
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__left {
  flex-grow: 1;
  gap: 0;
  padding: .375rem;
  border-right: 0;
}

.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__left-item {
  padding: .375rem .75rem;
  white-space: nowrap;
}

.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right {
  padding: .75rem 1rem;
}

/* Ohne dritte Ebene: leere rechte Spalte samt Trennlinie ausblenden */
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right {
  border-left: .0625rem solid var(--bs-border-color);
}

.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right:not(:has(a)) {
  display: none;
}

.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items {
  grid-template-columns: repeat(3, auto);
  column-gap: 1.5rem;
  row-gap: 1rem;
}

.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items .menu-item__group--child .menu-item__group-main-item,
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items .menu-item__group--nochild .menu-item__group-main-item {
  font-size: 1rem;
  margin-bottom: .25rem;
}

/* ── Eingabefelder in Kasse und Warenkorb sichtbar machen ──────────── */
/*
 * Das Theme rahmt Felder mit --bs-border-color #dee2e6 ein: auf weissem
 * Grund nur 1,3:1 Kontrast, die Felder sind kaum als solche zu erkennen.
 * WCAG 1.4.11 verlangt fuer Bedienelemente 3:1. #6c757d liegt bei 4,7:1.
 * Gilt fuer body#checkout (Kasse) und body#cart (Warenkorb). Sollen die
 * Regeln shopweit gelten, die beiden ID-Selektoren entfernen.
 */
#checkout,
#cart {
  --h24-field-border: #6c757d;
  --h24-field-border-hover: #495057;
  --h24-field-border-focus: #212529;
}

#checkout :is(.form-control, .form-select, textarea, .form-check-input),
#cart :is(.form-control, .form-select, textarea, .form-check-input) {
  border-color: var(--h24-field-border);
  border-width: .0625rem;
}

/* Zeigt an, dass das Feld anklickbar ist */
#checkout :is(.form-control, .form-select, textarea):hover:not(:disabled):not(:focus),
#cart :is(.form-control, .form-select, textarea):hover:not(:disabled):not(:focus) {
  border-color: var(--h24-field-border-hover);
}

/* Fokus: Rahmen deutlich, Glow des Themes bleibt erhalten */
#checkout :is(.form-control, .form-select, textarea):focus,
#cart :is(.form-control, .form-select, textarea):focus {
  border-color: var(--h24-field-border-focus);
}

/* Labels etwas kraeftiger, damit die Zuordnung klar bleibt */
#checkout .form-label,
#cart .form-label {
  color: #212529;
}

/* Fehlerhafte Felder: das Theme markiert nur den Text, nicht das Feld */
#checkout .has-error :is(.form-control, .form-select, textarea),
#cart .has-error :is(.form-control, .form-select, textarea) {
  border-color: #b02a37;
}

/* Deaktivierte Felder bleiben erkennbar grau, aber mit sichtbarem Rahmen */
#checkout :is(.form-control, .form-select):disabled,
#cart :is(.form-control, .form-select):disabled {
  border-color: #adb5bd;
}