/* ============================================================
   1. HEADER & LOGO (Zentrierung & Abstände)
   ============================================================ */
#header .header-top {
    padding-top: 30px !important;    /* Menü weg vom Logo nach unten schieben */
    padding-bottom: 5px !important;  /* Menü sitzt nah an der unteren Linie */
}

.header-logo img {
    margin-bottom: 10px !important;
    max-width: 280px !important;
    height: auto !important;
}

/* ============================================================
   2. HOMEPAGE: TEXTBLOCK (Abstand & Zentrierung)
   ============================================================ */
/* Schiebt den Textblock von der unteren Menülinie weg */
#index #content, 
#index .section.custom-text, 
#index .block-cms-text {
    margin-top: 45px !important; 
    text-align: center !important;
}

/* Zentriert den Fließtext auf der Startseite */
#index #content p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 900px !important;
}

/* Hinweis: Den blauen Titel (#1622f2) hast du bereits im Backend-Editor fixiert */

/* ============================================================
   3. PRODUKT-MINIATUREN: FINALER FIX (FARBE & POSITION)
   ============================================================ */

/* 1. Titel-Styling: Farbe vom Theme übernehmen & zentrieren */
.product-miniature .product-miniature__title,
.product-miniature .product-title {
  color: inherit !important;          /* Erzwingt die Originalfarbe des Themes */
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto 10px auto !important;
  padding: 5px 10px 0 10px !important;
  box-sizing: border-box !important;
  
  /* Text-Fluss: Ganze Wörter, keine Trennstriche */
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* 2. DESKTOP: Anfangshöhe gleich (Oben bündig) */
@media (min-width: 768px) {
  .product-miniature .product-title, 
  .product-miniature__title { 
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 90px !important;
  }
}

/* ============================================================
   3. PRODUKT-MINIATUREN: ZENTRIERUNG & RAND-FIX
   ============================================================ */

/* Verhindert das seitliche Rausrutschen auf Handys */
@media (max-width: 767px) {
  .featured-products, .products, #content {
    overflow-x: hidden !important;
  }
}

/* Texte & Preise: Stabil zentriert, keine feste Überbreite */
.product-miniature .product-miniature__title,
.product-miniature .product-title,
.product-miniature .product-miniature__prices {
  display: block !important;
  text-align: center !important;
  width: auto !important;          /* Verhindert das "Drücken" über den Rand */
  margin-left: 5px !important;    /* Kleiner Puffer links */
  margin-right: 5px !important;   /* Kleiner Puffer rechts */
  padding: 0 !important;
  box-sizing: border-box !important;
  color: inherit !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* DESKTOP: Anfangshöhe gleich (Oben bündig) */
@media (min-width: 768px) {
  .product-miniature .product-title, 
  .product-miniature__title { 
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 90px !important;
    margin: 0 auto 10px auto !important;
  }
}

/* HANDY: Platzoptimierung gegen Abschneiden */
@media (max-width: 767px) {
  .product-miniature .product-title, 
  .product-miniature__title { 
    min-height: auto !important;
    font-size: 0.82rem !important; /* Etwas kleiner, damit Wörter sicher passen */
    line-height: 1.1 !important;
  }
  
  /* Stellt sicher, dass die Kachel selbst nicht breiter als 50% (bei 2 Spalten) ist */
  .product-miniature {
    padding-left: 2px !important;
    padding-right: 2px !important;
    box-sizing: border-box !important;
  }
}

/* PREISE: Streichpreis LINKS, Aktueller RECHTS */
.product-miniature__prices {
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-top: 5px !important;
}

.product-miniature__regular-price { order: 1 !important; }
.product-miniature__price { order: 2 !important; font-weight: bold; }

/* ============================================================
   4. PRODUKTSEITE (Einzelansicht - Links-Ausrichtung)
   ============================================================ */
/* Verbessert die Lesbarkeit technischer Daten auf der Artikelseite */
.page-product #content, 
.page-product .product-description,
.page-product .product-description p,
.page-product .product-description ul,
.page-product .product-features {
    text-align: left !important;
}

/* ============================================================
   5. BASICS: BADGE & GEISTERBOX-KILLER
   ============================================================ */
/* Rabatt-Badge in Terracotta Pillenform OHNE blauen Rand */
.product-flags .discount {
    background-color: #e66d5b !important; 
    color: #FFFFFF !important;
    padding: 5px 15px !important;
    border-radius: 20px !important;
    font-weight: bold !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* RADIKALER FIX: Versteckt Mengenfelder ("1") & Buttons auf ALLEN Geräten */
.product-miniature .card-footer, 
.product-miniature .product-add-to-cart,
.product-miniature .product-quantity-wrapper,
.product-miniature .qty,
.product-miniature .qty_atc,
.product-miniature input[type="number"],
.product-miniature input.qty,
.product-miniature .input-group,
.product-miniature .btn {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ============================================================
   6. BLAUE ELEMENTE (#1622f2 - Dein Markenblau)
   ============================================================ */
/* "Alle Artikel anzeigen" Links/Buttons */
.all-product-link, #index .all-product-link {
    color: #1622f2 !important;
    font-weight: bold !important;
}

/* Allgemeine Warenkorb- & Primär-Buttons */
.btn-primary, .add-to-cart {
    background-color: #1622f2 !important;
    border-color: #1622f2 !important;
}

/* ============================================================
   7. MOBILE SLIDER FIX: KEIN ABSCHNEIDEN DER BILDER
   ============================================================ */

@media (max-width: 767px) {
  /* Erlaubt dem Slider-Container, sich an die Bildhöhe anzupassen */
  .carousel,
  .carousel-inner,
  .carousel-item {
    height: auto !important;
    min-height: auto !important;
  }

  /* Erzwingt, dass das Bild komplett sichtbar bleibt */
  .carousel-item img {
    width: 100% !important;
    height: auto !important;      /* Verhindert Verzerrung und Abschneiden */
    object-fit: contain !important; /* Bild wird eingepasst, statt beschnitten */
    max-height: 40vh !important;   /* Begrenzt die Höhe auf 40% des Bildschirms */
  }

  /* Optional: Verhindert, dass die Slider-Pfeile/Punkte das Bild verdecken */
  .carousel-control-prev, 
  .carousel-control-next {
    width: 10% !important;
  }
}

/* ============================================================
   8. TOPDROPDOWN MENU FARBLICH ANPASSEN
   ============================================================ */

/* Erzwungener Hover-Zustand für alle Menü-Ebenen */
#header .header-top [data-ps-ref="top-menu"] li:hover > a,
#header .header-top [data-ps-ref="top-menu"] li a:hover,
#header .header-top .menu-item:hover,
#header .header-top .top-menu a:hover {
    background-color: #1622f2 !important;
    color: #ffffff !important;
    transition: none !important; /* Verhindert das Ausfaden zurück nach Grau */
}

/* Verhindert, dass aktive Links (Current Page) das Grau erzwingen */
#header .header-top [data-ps-ref="top-menu"] li.active > a {
    background-color: #1622f2 !important;
}