/* ---------- Theme-gebundene Variablen (Fallbacks) ---------- */
:root{
  --ma-primary: var(--bs-primary, var(--sw-color-brand-primary, #0d6efd));
  --ma-primary-contrast: var(--bs-btn-color, #fff);
  --ma-success: var(--bs-success, var(--sw-color-success, #198754));
}

/* ---------- Staffel-Kacheln als gleichmäßiges Grid ---------- */
[data-tier-group]{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  border:1px solid #e6e6e6;
  border-right:0;
  position: relative; /* Klick-Schutz */
}
[data-tier-group] .btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:72px;
  padding:8px 10px;
  border-radius:0;
  background:#fff;
  cursor:pointer;
  border-right:1px solid #e6e6e6;
  border-bottom:1px solid #e6e6e6;
}
[data-tier-group] .btn.btn-secondary{ background:#111; color:#fff; }
[data-tier-group] button{ position:relative; z-index:2; pointer-events:auto; }

.fs-8{font-size:.875rem}
.fs-9{font-size:.75rem}

/* === %-Badge in der Staffel-Kachel (nimmt Theme-Success) === */
.ma-tier-badge{
  position:absolute;
  top:6px; right:6px;
  display:none;            /* JS schaltet auf inline-flex */
  align-items:center; justify-content:center;
  padding:2px 6px;
  font-size:.72rem;
  font-weight:800;
  line-height:1;
  color:#fff;
  background:var(--ma-success);
  border-radius:4px;
  box-shadow:0 1px 0 rgba(0,0,0,.12), inset 0 -1px 0 rgba(0,0,0,.05);
}
[data-tier-group] .btn.btn-secondary .ma-tier-badge{
  /* etwas helleres Grün auf dunkler aktiver Kachel */
  background:color-mix(in oklab, var(--ma-success), white 20%);
}

/* ---------- Zeile: Stepper links + großer Gesamtpreis rechts ---------- */
.ma-price-row{
  display:flex;
  align-items:center;
  gap:24px;
  margin:16px 0 10px;
  border-top:1px solid #eee;
  padding-top:12px;
}

/* Stepper */
.ma-stepper{
  display:grid; grid-template-columns:64px 1fr 64px; align-items:center;
  width:380px; max-width:100%;
  border:1px solid #e6e6e6; background:#fff;
}
.ma-stepper .btn-ctrl{
  display:flex; align-items:center; justify-content:center;
  height:56px; font-size:22px; font-weight:700;
  background:var(--ma-primary);
  color:var(--ma-primary-contrast);
  border:0; cursor:pointer;
}
.ma-stepper .btn-ctrl:hover{ filter:brightness(.95); }
.ma-stepper .btn-ctrl:active{ filter:brightness(.9); }
.ma-stepper .btn-ctrl:disabled{opacity:.45; cursor:not-allowed;}
.ma-stepper .center{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.ma-stepper .center .value{ font-size:1.35rem; font-weight:800; }
.ma-stepper .center .per-ve{
  display:flex; flex-direction:row; align-items:baseline; gap:.35rem;
  font-size:.9rem; font-weight:700;
}

/* Gesamtpreis rechts – groß */
.ma-total{ margin-left:auto; text-align:right; }
.ma-total .big{ display:block; font-size:2.8rem; line-height:1.05; font-weight:800; }
.ma-total .tax-note{ display:none; } /* doppelte MwSt.-Zeile ausblenden */
/* Gesamtpreis-Container gestapelt (Streichpreis darunter) */
.ma-total [data-total-price]{ display:flex; flex-direction:column; align-items:flex-end; }

/* Hinweis + Infozeile */
.ma-info{ font-size:.95rem; color:#333; margin-top:6px; }
.ma-info .muted{ color:#666; font-weight:600; }
.ma-hint{ font-size:.9rem; color:#333; font-weight:700; margin-bottom:4px; }

/* === "In den Warenkorb" unter dem Stepper – nimmt Theme-Primary === */
.ma-addtocart{ margin-top:14px; }
.ma-btn-cart{
  width:100%;
  height:52px;
  border:0;
  border-radius:10px;
  font-weight:800;
  font-size:1rem;
  background:var(--ma-primary);
  color:var(--ma-primary-contrast);
  cursor:pointer;
}
.ma-btn-cart:hover{ filter:brightness(.95); }
.ma-btn-cart:active{ filter:brightness(.9); }
.ma-btn-cart:disabled{ opacity:.6; cursor:not-allowed; }

/* ---------- Mobile Tweaks ---------- */
@media (max-width:768px){
  [data-tier-group]{ grid-template-columns:repeat(2,1fr); }
  [data-tier-group] .btn{ height:64px; padding:6px 8px; }
  .fs-8{ font-size:.82rem } .fs-9{ font-size:.7rem }

  .ma-price-row{ flex-direction:column; align-items:stretch; gap:12px; }
  .ma-stepper{ width:100%; grid-template-columns:56px 1fr 56px; }
  .ma-stepper .btn-ctrl{ height:50px; font-size:20px; }
  .ma-stepper .center .value{ font-size:1.15rem; }
  .ma-stepper .center .per-ve{ font-size:.85rem; }

  .ma-total{ margin-left:0; text-align:left; }
  .ma-total .big{ font-size:2.1rem; }

  .ma-info{ font-size:.9rem; }
}
@media (max-width:420px){
  [data-tier-group]{ grid-template-columns:1fr 1fr; }
  .ma-total .big{ font-size:1.8rem; }
}

/* alte Zeile/Elemente außerhalb des Steppers ausblenden */
[data-tier-box] [data-price-per-pack]:not(.ma-stepper [data-price-per-pack]){ display:none !important; }
[data-tier-box] .w-100.d-block.fs-9.fw-semibold.text-gray-500{ display:none !important; }
/* Verstecke jedes "pro VE", das NICHT im Stepper sitzt */
[data-tier-box] [data-price-per-pack]:not(.ma-stepper [data-price-per-pack]) + .fw-normal{ display:none !important; }

/* --- Klick-Fix: alte Preis(-tabellen) nur im Widget „durchlässig“ machen --- */
[data-tier-box] .product-block-prices,
[data-tier-box] .product-block-prices-grid{ pointer-events:none !important; }
/* Überall sonst normal klickbar lassen */
.product-block-prices,
.product-block-prices-grid{ pointer-events:auto; }

/* verhindert Zeilenumbruch bei Preisen */
.ma-total .big,
[data-price-per-pack],
[data-unit-price],
.ma-price-row .per-ve,
.ma-price-row .value{
  white-space:nowrap;
  word-break:normal;
  overflow-wrap:normal;
}

/* Preis-Darstellung */
.price-new{ font-weight:700; line-height:1; }
.price-old{ text-decoration:line-through; opacity:.7; margin-left:.4em; }

/* Streichpreis darunter, kleiner */
.price-old-below{
  display:block;
  margin-top:.15rem;
  font-size:.9rem;
  opacity:.7;
  text-decoration:line-through;
}

/* Unit-Price in den Kacheln stapeln (JS setzt Flex) */
[data-unit-price]{ display:flex; flex-direction:column; align-items:flex-end; }

/* Nur wenn NICHT Verpackungslösungen: "pro VE"-Zeile im Stepper ausblenden */
.ma-no-pro-ve .ma-stepper .per-ve{ display:none !important; }

/* Original Shopware-Quantity + Original Warenkorb-Button ausblenden 
.buy-widget-container {
  display: none !important;
}*/