/*
 * 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;
}

/* Kurztitel der Vorteils-Icons: nur auf schmalen Bildschirmen sichtbar */
.reassurance__title-short {
  display: none;
}

/* ── Schmale Bildschirme: Kopfbereich ──────────────────────────────── */
/*
 * Zwei Dinge auf einmal:
 * 1. Die vier Vorteils-Icons (blockreassurance, ueber dem Header) standen
 *    je Zeile einzeln und fuellten den halben ersten Bildschirm. Sie stehen
 *    jetzt zu viert nebeneinander, Icon ueber Text, mit Kurztiteln.
 * 2. Das Suchfeld haengt im Hook displayNav1 und damit in header-top. Der
 *    Block ist jetzt auch auf dem Smartphone sichtbar (siehe header.tpl):
 *    Logo linksbuendig, darunter das Suchfeld ueber die volle Breite.
 */
@media (max-width: 767.98px) {

  /* Vorteils-Icons: vier Spalten statt vier Zeilen */
  .blockreassurance--horizontal {
    gap: .25rem;
    padding-block: .35rem;
  }

  .blockreassurance--horizontal .reassurance {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: .15rem;
    text-align: center;
    font-size: .72rem;
    line-height: 1.15;
  }

  .blockreassurance--horizontal .reassurance__image {
    height: 1.5rem;
    width: 1.5rem;
  }

  /* Das Modul ersetzt das img spaeter durch ein inline-SVG */
  .blockreassurance--horizontal .reassurance__image img,
  .blockreassurance--horizontal .reassurance__image svg {
    height: 100%;
    width: 100%;
  }

  /* Untertitel kostet hier nur Hoehe */
  .blockreassurance--horizontal .reassurance__desc {
    display: none;
  }

  /* Kurztitel statt vollem Titel (siehe displayBlock.tpl) */
  .reassurance__title-full  { display: none; }
  .reassurance__title-short { display: inline; }

  /* Logo links, Suchfeld in der Zeile darunter ueber die volle Breite.
     Nebeneinander geht nicht mehr: bei dieser Logobreite blieben auf
     einem 360-px-Geraet nur rund 70 px fuer das Suchfeld uebrig. */
  .header-top {
    /* Hier die Logogroesse einstellen: 400 x 53 skaliert auf rund
       260 x 35. Die Prozentangabe deckelt sehr schmale Geraete. */
    --h24-logo-mobile-width: min(260px, 76%);
    padding-block: .4rem;
  }

  /* Abstand zwischen Logo und Suchfeld bewusst knapp. Die Bootstrap-
     Klasse gap-* steht nur noch fuer md aufwaerts im Template, sonst
     liesse sie sich hier wegen !important nicht unterbieten. */
  .header-top__row {
    flex-wrap: wrap;
    row-gap: .2rem;
  }

  .header-top__logo .navbar-brand {
    margin: 0;
    padding: 0;
  }

  .header-top__logo .logo {
    /* display:block, sonst steht unter dem Bild noch die Unterlaenge
       der Textzeile als Leerraum */
    display: block;
    width: var(--h24-logo-mobile-width);
    height: auto;
  }

  /* Erzwingt den Umbruch: eigene Zeile ueber die volle Breite */
  .header-top__left {
    flex: 1 0 100%;
    min-width: 0;
  }

  #_desktop_ps_searchbar {
    width: 100%;
    max-width: none;
    margin-left: 0 !important;
  }

  #_desktop_ps_searchbar #ps_searchbar,
  #_desktop_ps_searchbar .ps-searchbar__form {
    width: 100%;
  }

  #_desktop_ps_searchbar .ps-searchbar__input.form-control {
    height: 38px;
    font-size: 1rem;
  }
}