/* ==========================================================================
   Muslim-Buch.de – Child-Template "MuslimBuch" (Basis: NOVA 1.7.x, Theme midnight)
   Mobile zuerst. Nur Ergänzungen zu NOVA, keine Änderungen an NOVA-Dateien.
   ========================================================================== */

/* Überschriften: Montserrat, falls auf dem Server unter /templates/MuslimBuch/fonts/ vorhanden (Version 1.1) – sonst NOVA-Schrift */

:root {
  --mb-navy: #1C1D2C;
  --mb-blue: #1973D3;
  --mb-blue-dark: #1559A6;
  --mb-sand: #F7F6F2;
  --mb-line: #E2E0D8;
  --mb-green: #1E6B39;
  --mb-green-bg: #EEF5EF;
  --mb-gold: #B8860B;
  --mb-radius: 10px;
  --mb-head: "Montserrat", "Open Sans", Arial, sans-serif;
}

/* --- Überschriften ------------------------------------------------------- */
body h1, body h2, body h3, body .h1, body .h2, body .h3,
body .product-title,
body .productbox-title,
body .hr-sect {
  font-family: var(--mb-head);
  font-weight: 700;
  letter-spacing: 0;
}

/* --- Knöpfe -------------------------------------------------------------- */
body .btn-primary {
  background-color: var(--mb-blue);
  border-color: var(--mb-blue);
  border-radius: var(--mb-radius);
  font-weight: 600;
}
body .btn-primary:hover,
body .btn-primary:focus {
  background-color: var(--mb-blue-dark);
  border-color: var(--mb-blue-dark);
}
body #add-to-cart .btn-primary {
  min-height: 52px;
  font-size: 1.05rem;
}
#add-to-cart .form-counter,
#add-to-cart .form-counter .form-control,
#add-to-cart .form-counter .btn {
  min-height: 52px;
}

/* --- Leiste ganz oben ---------------------------------------------------- */
.mb-topbar {
  background: var(--mb-blue);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  padding: 6px 12px;
  line-height: 1.35;
}
.mb-topbar a { color: #fff; text-decoration: underline; }

/* --- Artikelseite -------------------------------------------------------- */
body .product-detail .product-title {
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}
body .product-detail .price.h1 {
  font-family: var(--mb-head);
  font-size: 1.9rem;
  margin-bottom: 0;
}
.product-detail .rating-wrapper .rating { color: var(--mb-gold); }

/* Lieferbox: Liefertermin + Versandfrei-Hinweis */
.mb-delivery {
  background: var(--mb-green-bg);
  border-radius: var(--mb-radius);
  padding: 10px 12px;
  margin: 10px 0 4px;
  color: var(--mb-green);
}
.mb-delivery__date {
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mb-delivery__date svg { flex: 0 0 auto; }
.mb-delivery__note {
  font-size: 0.8rem;
  color: #3A5A44;
  margin-top: 2px;
}
/* Die alte Zeile "Lieferzeit: 2 - 5 Werktage" bleibt für Google/Barrierefreiheit im Code,
   wird aber ausgeblendet, sobald die Datumsbox erfolgreich erzeugt wurde. */
.mb-has-delivery-date .estimated-delivery { display: none; }

/* Knopf "Blick ins Buch" */
.mb-lookinside {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin: 12px 0 4px;
  border: 1px solid var(--mb-navy);
  border-radius: var(--mb-radius);
  background: #fff;
  color: var(--mb-navy);
  font-weight: 600;
  text-decoration: none;
}
.mb-lookinside:hover { background: var(--mb-sand); color: var(--mb-navy); text-decoration: none; }

/* Kurz-Vorteile über dem Preis (kommen aus der Kurzbeschreibung als Liste) */
.product-detail .shortdesc ul {
  padding-left: 1.1rem;
  margin: 0.5rem 0;
}
.product-detail .shortdesc li { margin-bottom: 0.2rem; }

/* Bewertungen */
.verified-purchase-notice { font-size: 0.8rem; }

/* --- Fixierte Kaufleiste (nur Handy/Tablet) ------------------------------ */
.mb-stickybuy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--mb-line);
  box-shadow: 0 -4px 16px rgba(28, 29, 44, 0.1);
  transform: translateY(110%);
  transition: transform 0.2s ease;
}
.mb-stickybuy.is-visible { transform: translateY(0); }
.mb-stickybuy__price {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.mb-stickybuy__price strong {
  font-family: var(--mb-head);
  font-size: 1.15rem;
  color: var(--mb-navy);
}
.mb-stickybuy__price span {
  font-size: 0.72rem;
  color: var(--mb-green);
  font-weight: 600;
}
.mb-stickybuy .btn {
  flex: 1;
  min-height: 48px;
}
@media (min-width: 992px) {
  .mb-stickybuy { display: none; }
}
/* Platz schaffen, damit die Leiste nichts verdeckt */
body.mb-has-stickybuy { padding-bottom: 76px; }
@media (min-width: 992px) {
  body.mb-has-stickybuy { padding-bottom: 0; }
}

/* Cookie-Einstellungen (Fingerabdruck links unten) über die Kaufleiste schieben */
body.mb-sticky-on #consent-settings-btn {
  bottom: calc(84px + env(safe-area-inset-bottom));
}

/* --- WhatsApp-Knopf ------------------------------------------------------ */
.mb-whatsapp {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1029;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #1E8E4E;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.mb-whatsapp:hover { color: #fff; background: #187A42; }
body.mb-has-stickybuy .mb-whatsapp { bottom: 92px; }
@media (min-width: 992px) {
  body.mb-has-stickybuy .mb-whatsapp { bottom: 16px; }
}

/* --- Warenkorb: Fortschritt bis versandfrei ------------------------------ */
.mb-freeship {
  background: var(--mb-sand);
  border-radius: var(--mb-radius);
  padding: 12px 14px;
  margin: 0 0 16px;
  font-size: 0.9rem;
}
.mb-freeship__bar {
  height: 8px;
  border-radius: 4px;
  background: var(--mb-line);
  overflow: hidden;
  margin-top: 8px;
}
.mb-freeship__bar span {
  display: block;
  height: 100%;
  background: var(--mb-green);
  border-radius: 4px;
}
.mb-freeship.is-done { background: var(--mb-green-bg); color: var(--mb-green); font-weight: 600; }

/* --- Handy-Feinschliff --------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Bild etwas kleiner, Vorschaubilder ausblenden (Wischen genügt) -> Titel und Preis rücken nach oben */
  body .product-detail .product-gallery .product-images { max-width: 300px; margin-left: auto; margin-right: auto; }
  body .product-detail .product-detail-image-preview-bar { display: none; }
  .mb-topbar__more { display: none; }
}
@media (max-width: 991.98px) {
  /* Reihenfolge auf dem Handy: Titel, Sterne, Kurzinfo, Preis + Warenkorb, danach Artikeldaten.
     So steht der Kaufen-Knopf deutlich weiter oben. */
  body .product-detail .product-info-inner { display: flex; flex-direction: column; }
  body .product-detail .product-headline   { order: 1; }
  body .product-detail .rating-wrapper     { order: 2; }
  body .product-detail .shortdesc          { order: 3; }
  body .product-detail .mb-lookinside      { order: 4; }
  body .product-detail .product-offer      { order: 5; }
  body .product-detail .info-essential     { order: 6; margin-top: 1rem; font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mb-stickybuy { transition: none; }
}

/* ==========================================================================
   Version 1.1 – Gestaltung nach dem Entwurf
   ========================================================================== */

/* Ruhiger Seitenhintergrund, Inhalte als weiße Karten */
body { background-color: var(--mb-sand); }
#main-wrapper, #content-wrapper { background-color: transparent; }

.mb-kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mb-blue-dark);
  margin-bottom: 0.35rem;
}
.mb-btn-light {
  background: #fff;
  color: var(--mb-navy);
  border: 1px solid #fff;
  border-radius: var(--mb-radius);
  font-weight: 600;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
}
.mb-btn-light:hover { background: var(--mb-sand); color: var(--mb-navy); }

/* --- Startseite ---------------------------------------------------------- */
.mb-home { margin-top: 1rem; }
.mb-hero__card {
  background: linear-gradient(135deg, #2B3A55 0%, var(--mb-navy) 100%);
  color: #fff;
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
}
.mb-hero__card .mb-kicker { color: #F2C14E; }
body .mb-hero__title {
  color: #fff;
  font-size: 1.55rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
.mb-hero__text { color: #E2E3EC; font-size: 0.95rem; line-height: 1.5; margin-bottom: 1rem; max-width: 40rem; }
.mb-hero__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mb-hero__actions .btn { min-height: 46px; display: inline-flex; align-items: center; }
@media (min-width: 992px) {
  .mb-hero__card { padding: 2.5rem; }
  body .mb-hero__title { font-size: 2.2rem; }
}

.mb-cats { margin-top: 1rem; }
.mb-cats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}
@media (min-width: 768px) { .mb-cats__grid { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
.mb-cat {
  background: #fff;
  border-radius: 12px;
  padding: 0.9rem 0.4rem 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  text-decoration: none;
  color: var(--mb-navy);
  box-shadow: 0 1px 3px rgba(28, 29, 44, 0.08);
}
.mb-cat:hover { text-decoration: none; color: var(--mb-navy); box-shadow: 0 4px 12px rgba(28, 29, 44, 0.12); }
.mb-cat__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: #E3ECF8; color: var(--mb-blue-dark);
  display: flex; align-items: center; justify-content: center;
}
.mb-cat__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mb-cat__name { font-family: var(--mb-head); font-weight: 700; font-size: 0.85rem; }
.mb-cat__info { font-size: 0.7rem; color: #6A6B78; line-height: 1.2; }

.mb-section { margin-top: 1.75rem; }
body .mb-section__title { font-size: 1.15rem; margin-bottom: 0.75rem; }
.mb-publisher {
  margin-top: 1.75rem;
  background: var(--mb-navy);
  color: #fff;
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
}
.mb-publisher .mb-kicker { color: #F2C14E; }
body .mb-publisher h2 { color: #fff; font-size: 1.3rem; }
.mb-publisher p { color: #E2E3EC; line-height: 1.5; max-width: 42rem; }

.mb-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mb-chip {
  background: #fff; border: 1px solid #C9CBDA; color: var(--mb-navy);
  border-radius: 20px; padding: 0.55rem 0.95rem; font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
.mb-chip:hover { background: var(--mb-navy); color: #fff; text-decoration: none; }

.mb-links { display: flex; flex-direction: column; gap: 0.5rem; }
.mb-links a {
  background: #fff; border-radius: 10px; padding: 0.9rem 1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-weight: 600; color: var(--mb-navy); text-decoration: none;
}
.mb-links a span { color: var(--mb-blue-dark); font-size: 1.2rem; }
.mb-links a:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(28, 29, 44, 0.1); }

.mb-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
@media (min-width: 768px) { .mb-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mb-trust > div { background: #fff; border-radius: 12px; padding: 0.85rem; display: flex; flex-direction: column; }
.mb-trust strong { font-family: var(--mb-head); color: var(--mb-navy); font-size: 0.9rem; }
.mb-trust span { font-size: 0.78rem; color: #4A4B59; }
.mb-trust--product { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0.9rem; }
.mb-trust--product > div { background: #F3F2EE; text-align: center; padding: 0.6rem 0.3rem; }
.mb-trust--product strong { font-size: 0.8rem; }
.mb-trust--product span { font-size: 0.7rem; }
@media (min-width: 768px) { .mb-trust--product { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mb-about { background: #fff; border-radius: 12px; padding: 1.25rem; font-size: 0.9rem; line-height: 1.6; color: #4A4B59; }

/* Produkt-Slider auf der Startseite und überall: Karten */
body .product-slider-wrapper .hr-sect,
body .product-slider-wrapper .h2 { font-size: 1.15rem; }
body .product-wrapper-product,
body .slick-type-product .product-wrapper {
  background: #fff;
  border-radius: 12px;
  padding: 0.6rem;
  box-shadow: 0 1px 3px rgba(28, 29, 44, 0.08);
  height: 100%;
}
body .item-slider-desc { font-weight: 600; color: var(--mb-navy); font-size: 0.85rem; line-height: 1.3; }
body .item-slider-price .price,
body .productbox-price { font-family: var(--mb-head); font-weight: 700; color: var(--mb-navy); }

/* Artikellisten (Kategorien, Suche): Karten */
body .productbox-inner {
  background: #fff;
  border-radius: 12px;
  padding: 0.75rem;
  box-shadow: 0 1px 3px rgba(28, 29, 44, 0.08);
}
body .productbox-title, body .productbox-title a { color: var(--mb-navy); font-weight: 600; }

/* --- Artikelseite als Karten --------------------------------------------- */
body .product-detail .product-gallery,
body .product-detail .product-info-inner {
  background: #fff;
  border-radius: 14px;
}
body .product-detail .product-gallery { padding-top: 0.75rem; padding-bottom: 0.5rem; }
body .product-detail .product-info-inner { padding: 1rem; margin-top: 0.75rem; }
@media (min-width: 992px) {
  body .product-detail .product-info-inner { margin-top: 0; padding: 1.5rem; }
}
.mb-kicker--product { margin-bottom: 0.15rem; }
body .product-detail .info-essential li { padding: 0.35rem 0; border-top: 1px solid #ECEAE3; }
body .product-detail .info-essential li strong { color: #6A6B78; font-weight: 600; }
body .product-detail .shortdesc { font-size: 0.95rem; line-height: 1.55; }

/* Beschreibung, Bewertungen, Frage: Karten */
body #tabAccordion .card,
body .tab-content .tab-pane {
  background: #fff;
  border: 0;
  border-radius: 14px;
  margin-top: 0.75rem;
  overflow: hidden;
}
body #tabAccordion .card-header { background: #fff; border-bottom: 1px solid #ECEAE3; font-family: var(--mb-head); font-weight: 700; }
body #tabAccordion .card-body { font-size: 0.95rem; line-height: 1.6; }
body .reviews .review { background: var(--mb-sand); border-radius: 10px; padding: 0.75rem; margin-bottom: 0.75rem; }
body .verified-purchase { color: var(--mb-green); font-weight: 600; }

/* Empfehlungs-Slider unter dem Artikel */
body .recommendations { margin-top: 1rem; }

/* ==========================================================================
   Version 1.1.2 – Feinschliff
   ========================================================================== */
/* Startseite: doppelte Abstände von NOVA-Containern entfernen */
.mb-home { margin-top: 0; }
.mb-home > section.container,
.mb-home .container { padding-top: 0; padding-bottom: 0; }
.mb-cats { margin-top: 0.75rem; }

/* Warenkorb-Knopf: Text auch auf dem Handy zeigen */
body #add-to-cart .btn .btn-basket-check span { display: inline-block; }

/* Menge und Warenkorb-Knopf auf dem Handy nebeneinander */
@media (max-width: 575.98px) {
  body #add-to-cart .basket-form-inline { flex-wrap: nowrap; margin-left: -4px; margin-right: -4px; }
  body #add-to-cart .basket-form-inline > .col { padding-left: 4px; padding-right: 4px; }
  body #add-to-cart .basket-form-inline > .col:first-child { flex: 0 0 132px; max-width: 132px; }
  body #add-to-cart .basket-form-inline > .col:last-child { flex: 1 1 auto; max-width: none; }
  body #add-to-cart .form-counter .btn { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* "Sofort verfügbar" steht jetzt in der Lieferbox -> alte Zeile ausblenden */
.mb-has-delivery-date .product-detail .delivery-status { display: none; }
.mb-has-delivery-date .product-detail .stock-information { border: 0; padding: 0; margin: 0; }