.product-rating-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-sm);
}

.product-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 var(--space-sm);
}

.product-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.product-pill--success {
  color: var(--color-success);
  border-color: #cddccf;
  background: #eef4ef;
}

/* ------------------------------------------- Mengenrabatt-Karten
 * Drei wählbare Stufen. Die Karte zeigt den Stückpreis, damit der
 * Vorteil ohne Rechnen erkennbar ist.
 */

.tier-group {
  margin: var(--space-lg) 0 var(--space-md);
}

.tier-group__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.6rem;
}

.tier-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.qty-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.35rem 0.5rem 0.9rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.qty-tier:hover {
  border-color: var(--color-accent);
}

.qty-tier.is-active {
  border-color: var(--color-accent-dark);
  background: var(--color-bg-alt);
}

.qty-tier__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.qty-tier__badge--save {
  background: var(--color-success);
  color: #fff;
}

.qty-tier__badge--best {
  background: var(--color-accent-dark);
  color: #fff;
}

.qty-tier__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.qty-tier__price {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.qty-tier.is-active .qty-tier__price {
  color: var(--color-accent-dark);
}

.qty-tier__unit {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.qty-tier__save {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-success);
  margin-top: 0.35rem;
}

.qty-tier__old {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* Platzhalter, damit Karten ohne Ersparnis gleich hoch bleiben */
.qty-tier__spacer {
  display: block;
  height: 2.05rem;
}

@media (max-width: 420px) {
  .tier-cards {
    gap: 0.4rem;
  }
  .qty-tier {
    padding: 1.25rem 0.3rem 0.8rem;
  }
  .qty-tier__price {
    font-size: var(--fs-base);
  }
  /* Auf sehr schmalen Geräten sonst Umbruch in "Spare X €" */
  .qty-tier__save,
  .qty-tier__old,
  .qty-tier__badge {
    font-size: 0.62rem;
  }
  .qty-tier__save {
    white-space: nowrap;
  }
  .qty-tier__badge {
    padding: 0.2rem 0.45rem;
  }
}

/* Gesperrte Variante: sichtbar, damit der Kunde die Groesse kennt,
   aber ausgegraut und nicht anklickbar. Das <button> traegt disabled -
   die Optik hier macht den Zustand sichtbar. */
.variant-pill--soldout,
.variant-pill:disabled {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Hover-Zustand der aktiven Pille darf hier nicht greifen. */
.variant-pill:disabled:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.variant-pill__note {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin-top: 0.15rem;
}

/* ------------------------------------------------ Add-to-Cart-CTA */

.btn--cart {
  gap: 0.6rem;
}

.btn__icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

/* ------------------------------------------- Zahlungsarten unter dem CTA
 * Bewusst zurückhaltend gestaltet: Der schwarze CTA darüber bleibt das
 * dominanteste Element der Buybox.
 */

/* Eigener Abstand statt des Flex-gap der Zeile, damit die Vorgabewerte
   exakt greifen und sich nicht mit dem gap addieren. */
.product-cta-row {
  gap: 0;
}

.payment {
  margin-top: 14px;
  text-align: center;
}

.payment__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.payment__title svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--color-accent-dark);
}

.payment__methods {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* Alle Zahlungsarten liegen als gleich große Kachel in einer Reihe.
   Der feine Rahmen trennt die weißen Karten-Assets vom hellen Untergrund. */
/* Maße korrespondieren mit PAYMENT_CARD_HEIGHT in build/generate.py.
   Breite = Höhe × 215/114 (Seitenverhältnis der Karten-Assets). */
.pay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 60px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
}

/* Karten-Asset bringt weißen Grund und Radius selbst mit und füllt die
   Kachel randlos aus. */
.pay-badge--card img {
  height: 100%;
  width: 100%;
  display: block;
  /* contain statt cover: Das Logo darf nicht beschnitten werden. Die
     dabei entstehenden Ränder sind weiß auf weiß und unsichtbar. */
  object-fit: contain;
}

/* Monogramm ohne eigenen Hintergrund - mittig auf der weißen Kachel */
.pay-badge--mono img {
  height: 20px;
  width: auto;
  display: block;
}

/* Textmarke, solange für eine Zahlungsart kein Logo vorliegt */
.pay-badge--text {
  width: auto;
  min-width: 60px;
  padding: 0 0.5rem;
  background: var(--color-surface);
}

.pay-badge--text span {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  line-height: 1;
  white-space: nowrap;
}

/* --------------------------------------------- Trust unter dem CTA */

/* Drei gleich breite Spalten statt einer Liste untereinander: nimmt weniger
   Hoehe ein und liest sich als geschlossene Zeile unter den Zahlungsarten.
   Icon ueber dem Text, weil "Diskrete Verpackung" neben einem Icon auf
   schmalen Geraeten nicht in eine Spalte passt. */
.buy-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 24px;
}

.buy-trust li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--color-text-muted);
}

.buy-trust svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--color-accent-dark);
}

/* Quantity + tiers */
.qty-section {
  margin: var(--space-md) 0;
}

.qty-section > label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.qty-stepper button {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--color-bg-alt);
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
}

.qty-stepper button:hover {
  background: var(--color-accent);
}

.qty-stepper input {
  width: 56px;
  height: 40px;
  border: none;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-base);
  -moz-appearance: textfield;
}

.qty-tier-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.qty-tier-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: var(--space-xs);
}

.qty-tier-pill {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.qty-tier-pill:hover {
  border-color: var(--color-accent);
}

.qty-tier-pill.is-active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-text-inverse);
}

.qty-tier-pill .tier-qty {
  display: block;
  font-weight: 800;
  font-size: var(--fs-sm);
}

.qty-tier-pill .tier-discount {
  display: block;
  font-size: 0.7rem;
  color: var(--color-success);
  font-weight: 700;
}

.qty-tier-pill.is-active .tier-discount {
  color: var(--color-accent);
}

.qty-tier-pill .tier-unit {
  display: block;
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

.qty-tier-pill.is-active .tier-unit {
  color: #cfc9be;
}

.qty-tier-hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

/* ------------------------------------- Inklusivleistung zum Produkt */

.included-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem var(--space-sm);
  margin-bottom: var(--space-md);
}

.included-item > svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-accent-dark);
}

.included-item__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.included-item__text strong {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.included-item__text span {
  font-size: var(--fs-xs);
  color: var(--color-success);
  font-weight: 600;
}

/* Add-ons - aktuell ungenutzt, bleibt für spätere Zubehörartikel erhalten */
.addon-list {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.addon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}

.addon-row:last-child {
  border-bottom: none;
}

.addon-row label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.addon-price {
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

/* Storage / lab / shipping notes */
.info-note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  margin-bottom: 0.6rem;
}

.info-note .info-note-icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
}

.lab-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  margin-bottom: 0.6rem;
  font-size: var(--fs-xs);
}

.lab-badge-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.lab-badge a {
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

/* Feature icon strip */
.feature-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.feature-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.feature-strip-item svg {
  width: 26px;
  height: 26px;
  color: var(--color-accent-dark);
}

/* Description subsections */
.limits-box {
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-md) 0;
}

.limits-box h3 {
  font-size: var(--fs-base);
  margin-bottom: 0.6rem;
}

.limits-box ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.limits-box li {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  padding-left: 1.1rem;
  position: relative;
}

.limits-box li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-accent-dark);
}

.notice-box {
  border: 1px solid #e0c9a6;
  background: #fbf3e6;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-md) 0;
  font-size: var(--fs-sm);
}

.notice-box strong {
  display: block;
  margin-bottom: 0.3rem;
}

/* Lexikon teaser card */
.lexikon-teaser {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
}

.lexikon-teaser-body {
  flex: 1;
}

.lexikon-teaser-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  margin-bottom: 0.4rem;
}

.lexikon-teaser h3 {
  font-size: var(--fs-md);
  margin-bottom: 0.4rem;
}

.lexikon-teaser p {
  font-size: var(--fs-sm);
  color: #cfc9be;
  margin-bottom: 0.6rem;
  max-width: 520px;
}

.lexikon-teaser a {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-accent);
}

/* Reused trust badges row (footer-style) */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  text-align: center;
  padding: var(--space-lg) 0;
}

.trust-strip-item h4 {
  font-size: var(--fs-sm);
  margin-bottom: 0.2rem;
}

.trust-strip-item p {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .qty-tier-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
  }
  .feature-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .lexikon-teaser {
    flex-direction: column;
    align-items: flex-start;
  }
  .trust-strip {
    grid-template-columns: 1fr;
  }
}