/* ========================================================================
 * FAHMO Megamenu V5 – kompakt, naeher am Menuepunkt, mit Rahmen und Schatten
 * Diesen Block GANZ UNTEN in child-custom.css einfuegen.
 * ======================================================================== */

@media (min-width: 992px) {

  /* Bezugspunkt fuer die jeweilige Dropdown-Box */
  #_desktop_megamenu .avaorg-menu-horizontal > .menu-content > .menu-item.fahmo-menu-bedroom,
  #_desktop_megamenu .avaorg-menu-horizontal > .menu-content > .menu-item.fahmo-menu-service {
    position: relative !important;
  }

  /* Kompakte Box statt voller Menuebreite */
  #_desktop_megamenu .avaorg-menu-horizontal > .menu-content > .menu-item.fahmo-menu-bedroom > .menu-dropdown.fahmo-compact-submenu,
  #_desktop_megamenu .avaorg-menu-horizontal > .menu-content > .menu-item.fahmo-menu-service > .menu-dropdown.fahmo-compact-submenu {
    display: block !important;
    position: absolute !important;

    /* Etwas naeher an den Menuepunkt heranziehen */
    top: calc(100% - 4px) !important;
    left: 0 !important;
    right: auto !important;

    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 10px 0 !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    background: #ffffff !important;
    border: 1px solid #d7d7d2 !important;
    border-radius: 4px !important;
    box-shadow:
      0 14px 30px rgba(0, 0, 0, 0.16),
      0 3px 8px rgba(0, 0, 0, 0.08) !important;

    transform: none !important;
    -webkit-transform: none !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    z-index: 99999 !important;
    transition:
      opacity 150ms ease,
      visibility 0s linear 150ms !important;
  }

  /* Hover allein darf das Menue nicht oeffnen */
  #_desktop_megamenu .avaorg-menu-horizontal > .menu-content > .menu-item.fahmo-menu-bedroom:hover > .menu-dropdown.fahmo-compact-submenu,
  #_desktop_megamenu .avaorg-menu-horizontal > .menu-content > .menu-item.fahmo-menu-service:hover > .menu-dropdown.fahmo-compact-submenu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  /* Oeffnung ausschliesslich ueber die vorhandene Klick-Klasse */
  #_desktop_megamenu .avaorg-menu-horizontal > .menu-content > .menu-item.fahmo-menu-bedroom.fahmo-menu-open > .menu-dropdown.fahmo-compact-submenu,
  #_desktop_megamenu .avaorg-menu-horizontal > .menu-content > .menu-item.fahmo-menu-service.fahmo-menu-open > .menu-dropdown.fahmo-compact-submenu,
  #_desktop_megamenu .avaorg-menu-horizontal > .menu-content > .menu-item.fahmo-menu-bedroom.fahmo-menu-open:hover > .menu-dropdown.fahmo-compact-submenu,
  #_desktop_megamenu .avaorg-menu-horizontal > .menu-content > .menu-item.fahmo-menu-service.fahmo-menu-open:hover > .menu-dropdown.fahmo-compact-submenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: opacity 150ms ease !important;
  }

  /* Avanam-/Bootstrap-Container innerhalb der Box ebenfalls begrenzen */
  #_desktop_megamenu .fahmo-compact-submenu > .container,
  #_desktop_megamenu .fahmo-compact-submenu .container,
  #_desktop_megamenu .fahmo-compact-submenu .avaorg-sub-inner,
  #_desktop_megamenu .fahmo-compact-submenu .avaorg-menu-row,
  #_desktop_megamenu .fahmo-compact-submenu .row {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  #_desktop_megamenu .fahmo-compact-submenu .avaorg-menu-col,
  #_desktop_megamenu .fahmo-compact-submenu .fahmo-compact-column,
  #_desktop_megamenu .fahmo-compact-submenu [class*="col-"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Links sauber innerhalb der kompakten Box halten */
  #_desktop_megamenu .fahmo-compact-submenu .fahmo-megamenu-links,
  #_desktop_megamenu .fahmo-compact-submenu .fahmo-megamenu-links li {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #_desktop_megamenu .fahmo-compact-submenu .fahmo-megamenu-links li a {
    display: block !important;
    width: 100% !important;
    padding: 9px 18px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    text-decoration: none !important;
  }
}


/* ========================================================================
 * 1. KATALOG: maximal zwei Produkte pro Zeile
 * ======================================================================== */

#js-product-list .products.product-loop,
#js-product-list .products {
  display: flex !important;
  flex-wrap: wrap !important;
}

#js-product-list .products.product-loop > .product,
#js-product-list .products.product-loop > .product-miniature,
#js-product-list .products.product-loop > article,
#js-product-list .products.product-loop > [class*="col-"],
#js-product-list .products > .product,
#js-product-list .products > .product-miniature,
#js-product-list .products > article,
#js-product-list .products > [class*="col-"] {
  flex: 0 0 50% !important;
  width: 50% !important;
  min-width: 0 !important;
  max-width: 50% !important;
  box-sizing: border-box !important;
}

/* Auf kleinen Displays ebenfalls maximal zwei Karten.
   Die geringeren Innenabstaende verhindern ein Zusammenquetschen. */
@media (max-width: 575px) {
  #js-product-list .products.product-loop > .product,
  #js-product-list .products.product-loop > .product-miniature,
  #js-product-list .products.product-loop > article,
  #js-product-list .products.product-loop > [class*="col-"],
  #js-product-list .products > .product,
  #js-product-list .products > .product-miniature,
  #js-product-list .products > article,
  #js-product-list .products > [class*="col-"] {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}
/* ========================================================================
 * FAHMO Sortierung V14 – sichere Filterung
 *
 * Nur an child-custom.css ANHAENGEN.
 * Die native PrestaShop-Sortierlogik und ihre URLs bleiben unangetastet.
 * ======================================================================== */

/* Zunaechst alle nativen Sortieroptionen verbergen. */
.products-sort-order .dropdown-menu .select-list {
  display: none !important;
}

/* Nur die vier gewuenschten, nativen PrestaShop-Links anzeigen. */
.products-sort-order .dropdown-menu .select-list[href*="product.price.asc"],
.products-sort-order .dropdown-menu .select-list[href*="product.price.desc"],
.products-sort-order .dropdown-menu .select-list[href*="product.name.asc"],
.products-sort-order .dropdown-menu .select-list[href*="product.name.desc"] {
  display: block !important;
}

/* ========================================================================
 * 2. MOBILES MENUE: Text "menu" vollstaendig ausblenden und durch
 *    ein stabiles Hamburger-Symbol ersetzen.
 * ======================================================================== */

@media (max-width: 991px) {

  #mobile-menu-icon {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    cursor: pointer !important;
    z-index: 20 !important;

    /* Verhindert sichtbare Buchstaben wie m, e, n oder u. */
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
  }

  /* Theme-, Material- und Avanam-Inhalte im Button vollstaendig verstecken. */
  #mobile-menu-icon > *,
  #mobile-menu-icon .material-icons,
  #mobile-menu-icon .fa,
  #mobile-menu-icon .fas,
  #mobile-menu-icon .icon,
  #mobile-menu-icon span,
  #mobile-menu-icon i {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Eigenes Hamburger-Symbol mit drei sauberen Linien. */
  #mobile-menu-icon::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    display: block !important;
    width: 24px !important;
    height: 2px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #1e1e1e !important;
    border-radius: 2px !important;
    box-shadow:
      0 -7px 0 #1e1e1e,
      0 7px 0 #1e1e1e !important;

    transform: translate(-50%, -50%) !important;
    text-indent: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #mobile-menu-icon::after {
    content: none !important;
    display: none !important;
  }
}



/* ========================================================================
 * 1. KATEGORIE-, SUCH- UND PRODUKTLISTEN
 * Einheitliche Bildflaeche im Querformat 16:9
 * ======================================================================== */

#js-product-list .product-miniature .thumbnail-container {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Feste, identische Bildflaeche fuer jede Produktkarte */
#js-product-list .product-miniature .product-thumbnail {
  position: relative !important;
  display: block !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  background: #f4f4f2 !important;
  box-sizing: border-box !important;
}

/* Hauptbild, Lazy-Load-Bild und moegliches zweites Hoverbild gleich behandeln */
#js-product-list .product-miniature .product-thumbnail img,
#js-product-list .product-miniature .product-thumbnail img.lazyload,
#js-product-list .product-miniature .product-thumbnail img.lazyloaded,
#js-product-list .product-miniature .product-thumbnail .product-image,
#js-product-list .product-miniature .product-thumbnail .product-hover-image {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  display: block !important;
  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
  object-position: center center !important;

  /* Alte Zoom- und Groessenregeln sicher zuruecksetzen */
  transform: none !important;
  transform-origin: center center !important;

  box-sizing: border-box !important;
}

/* Textbereiche beginnen bei allen Karten auf gleicher Hoehe */
#js-product-list .product-miniature .product-description {
  flex: 1 1 auto !important;
  width: 100% !important;
  margin-top: 8px !important;
  box-sizing: border-box !important;
}


/* ========================================================================
 * 2. PRODUKTDETAILSEITE
 * Das Hauptbild fuellt den linken Bildbereich gleichmaessig aus.
 * Das Produkt bleibt vollstaendig sichtbar.
 * ======================================================================== */

body#product .product-leftside,
body#product .product-images,
body#product .product-cover {
  min-width: 0 !important;
}

/* Einheitliche grosse Bildbuehne */
body#product .product-cover {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;

  margin: 0 !important;
  padding: 12px !important;

  overflow: hidden !important;
  background: #f7f7f5 !important;
  box-sizing: border-box !important;
}

/* Hauptbild gross, aber ohne Beschnitt */
body#product .product-cover img,
body#product .product-cover .js-qv-product-cover,
body#product img.js-qv-product-cover {
  position: relative !important;
  inset: auto !important;

  display: block !important;
  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center center !important;

  transform: none !important;
  transform-origin: center center !important;

  box-sizing: border-box !important;
}

/* Zoom-Layer deckt dieselbe Flaeche ab */
body#product .product-cover .layer {
  position: absolute !important;
  inset: 12px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}


/* ========================================================================
 * 3. THUMBNAILS UND VERWANDTE PRODUKTE AUF DER DETAILSEITE
 * ======================================================================== */

body#product .product-images .thumb-container,
body#product .product-images .thumb {
  box-sizing: border-box !important;
}

body#product .product-images .thumb {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

body#product .products .product-miniature .product-thumbnail {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #f4f4f2 !important;
}

body#product .products .product-miniature .product-thumbnail img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}


/* ========================================================================
 * 4. RESPONSIVE ANPASSUNGEN
 * ======================================================================== */

@media (max-width: 991px) {
  body#product .product-cover {
    aspect-ratio: 4 / 3 !important;
    padding: 10px !important;
  }

  body#product .product-cover .layer {
    inset: 10px !important;
  }
}

@media (max-width: 575px) {
  /* Zwei Karten bleiben moeglich, Bilder erhalten aber dieselbe Hoehe */
  #js-product-list .product-miniature .product-thumbnail {
    aspect-ratio: 4 / 3 !important;
  }

  body#product .product-cover {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    padding: 8px !important;
  }

  body#product .product-cover .layer {
    inset: 8px !important;
  }