/* --- Verhindere Abschneiden im Preis-Wrapper --- */
.product-prices,
.product-price,
.product-price .current-price{
  overflow: visible !important;
}

/* Kachel-Preiszeile horizontal mit Abstand (Übersichtsseiten) */
.product-miniature .product-price-and-shipping .product-price-wrap-inner.price-row{
  display:flex;
  align-items:center;          /* statt baseline */
  gap:.75rem;                  /* Abstand zwischen Preis, Streichpreis, Badge */
  flex-wrap:wrap;
  line-height:1.2;             /* mehr Kopf-/Fuß-Freiraum */
  padding:.05rem 0;            /* minimale Luft oben/unten */
}

/* Preiszeile auf der Produktseite */
.product-price .price-row{
  display:flex;
  align-items:center;
  gap:.75rem;
  line-height:1.2;
  padding:.05rem 0;
}

/* Streichpreis GENERELL rot (Kachel + Produktseite) */
.product-miniature .regular-price,
.product-price .regular-price,
.product-price-and-shipping .regular-price{
  color:#e53935 !important;
  text-decoration:line-through;
  text-decoration-color:#e53935;
  opacity:1 !important;
}

/* %-Badge: perfekt symmetrischer Rand */
.product-miniature .discount-badge,
.product-price .discount-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* kleiner als der Preis (relativ zur Umgebung) */
  font-size:.90em !important;   /* ~82% der umgebenden Schriftgröße */
  font-weight:600;              /* weniger „hoch“ als 700 */
  line-height:1;
  padding:.18em .5em;           /* passend zum kleineren Text */
  border-radius:9999px;
  background:#3ED1AB;
  color:#000;
  white-space:nowrap;
  vertical-align:middle;
}

/* Bild-Overlay-Discount-Flag ausblenden (nur Kacheln) */
.product-miniature .product-flags .product-flag.discount,
.product-miniature .product-flags .product-flag.discount-percentage{
  display:none !important;
}

/* "Zustand (Detail)" Styling auf der Produktseite */
.product-condition.extra{ margin-top:.25rem; }
.product-condition.extra .label{ font-weight:600; margin-right:.35rem; }

/* --- STRIPE: Zeile neben dem Radio-Kreis + 2. Zeile als Hinweis --- */
/* Nur die Stripe-Option anfassen */
#checkout-payment-step .payment-options .payment-option:has(input[data-module-name="stripe_official"]) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Kreis minimal runter, damit’s optisch passt */
#checkout-payment-step .payment-options .payment-option:has(input[data-module-name="stripe_official"]) .custom-radio {
  margin-top: .2rem;
}

/* Label normal links ausrichten, keinen Extra-Abstand */
#checkout-payment-step .payment-options .payment-option:has(input[data-module-name="stripe_official"]) label {
  margin: 0;
  text-align: left;
}

/* Originaltext im Label ausblenden … */
#checkout-payment-step .payment-options .payment-option:has(input[data-module-name="stripe_official"]) label span {
  font-size: 0 !important;
  line-height: 0;
}

/* … und durch zwei Zeilen ersetzen */
#checkout-payment-step .payment-options .payment-option:has(input[data-module-name="stripe_official"]) label span::before {
  content: 'Online zahlen';
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 700;    /* fett */
}

#checkout-payment-step .payment-options .payment-option:has(input[data-module-name="stripe_official"]) label span::after {
  content: ' (Mehr Zahlungsmethoden auf „Ändern“ → „Neue Zahlungsmethode“ klicken):';
  display: block;      /* Zeilenumbruch */
  font-size: .875rem;
  line-height: 1.3;
  font-weight: 400;
  color: #666;
  margin-top: 2px;
}

/* Header-Banner zentrieren (Modul an_simplefreeshippingline) */
.header-banner{
  width:100%;
  display:flex;                 /* ermöglicht sauberes Zentrieren */
  justify-content:center;       /* horizontal zentrieren */
  align-items:center;           /* vertikal mittig (falls höher) */
  text-align:center;            /* Text selbst zentrieren */
  padding:.35rem 0;             /* etwas Luft oben/unten */
}

/* Falls das Modul einen inneren .container rendert: ebenfalls Flex zentrieren */
.header-banner > .container{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  width:100%;
}

/* Optional: Schrift & Hintergrund nach Wunsch anpassen */
.header-banner{
  background:#e8f2ff;           /* zarter Balken (optional) */
  color:#123;                   /* Textfarbe (optional) */
  font-weight:600;              /* leicht betont (optional) */
}

/* Auf sehr kleinen Screens Schrift minimal kleiner (optional) */
@media (max-width: 480px){
  .header-banner{ font-size:.95rem; }
}

/* Advantages-Widget: Headline wirklich umbchen + Theme-Resets */
.an_advantages .an_advantages-title,
.an_advantages .an_advantages-title *,
.an_advantages-title h2{
  text-transform: none !important;      /* Uppercase des Themes killen */
  letter-spacing: normal !important;    /* breite Laufweite zurücksetzen */
  word-spacing: normal !important;
}

.an_advantages .an_advantages-title h2{
  display:block !important;
  max-width: 1100px;                    /* Zeilenbreite begrenzen */
  margin: 0 auto !important;
  text-align:center !important;

  font-size: clamp(18px, 1.9vw, 24px) !important;
  line-height: 1.28 !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;   /* sichere Umbrüche */
  word-break: normal !important;
  hyphens: auto !important;
  position: relative; z-index: 2;
}

/* Kopfbereich muss mitwachsen */
.an_advantages .an_advantages-head{
  height: auto !important;
  padding: 10px 0 !important;
  position: relative;
}
.an_advantages .an_advantages-head::before,
.an_advantages .an_advantages-head::after{ z-index: 1; }

/* Rabattstaffeln Produktseite */
.qty-discount-box {
  background: #ffffff;
  border: 2px solid #e8d6ff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.qty-discount-box h4 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: #6d2db7;
}

.qty-discount-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 6px;
}

.qty-discount-table td {
  padding: 6px 0;
  font-size: 15px;
}

.qty-discount-table td:last-child {
  text-align: right;
  color: #6d2db7;
  font-weight: 700;
}

.mengenrabatt-box {
  background: #ffffff;
  border: 2px solid #f0c4ff;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 10px 0 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.mengenrabatt-box h4 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.mengenrabatt-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4px;
}

.mengenrabatt-table td {
  padding: 4px 0;
  font-size: 14px;
}

.mengenrabatt-table td:last-child {
  text-align: right;
  font-weight: 700;
}