/* =========================================================================
   style-premium.css — Industrial-Premium Redesign (v1)
   Zuletzt geladen → überschreibt style.css / style-shop.css / style-refine.css.
   Richtung: dunkler Premium-Header & Hero, kräftiges Orange, starke
   Vertrauenssignale, Conversion-Fokus für hochpreisigen Direktkauf.
   ========================================================================= */

:root {
  --dark: #0B0F17;
  --dark-2: #111827;
  --dark-3: #1A2233;
  --dark-border: rgba(255, 255, 255, 0.08);
  --dark-text: rgba(255, 255, 255, 0.92);
  --dark-muted: rgba(255, 255, 255, 0.55);
  --green: #16A34A;
  --green-bg: #F0FDF4;
  --radius: 14px;
}

/* ── HEADER: dunkel & premium ──────────────────────────────────────────── */
#site-header {
  background: var(--dark);
  border-bottom: 1px solid var(--dark-border);
}

#trust-bar {
  background: var(--dark-2);
  border-bottom: 1px solid var(--dark-border);
}
#trust-bar .trust-item {
  color: var(--dark-muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
#trust-bar .trust-item::before {
  content: "✓";
  color: var(--accent);
  font-weight: 800;
  margin-right: 7px;
}

#site-header .header-nav { background: transparent; }

#logo { color: #fff; }
#logo .accent { color: var(--accent); }

#desktop-nav .nav-link { color: var(--dark-text); }
#desktop-nav .nav-link:hover { color: var(--accent); }

#search-wrapper input {
  background: var(--dark-3);
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
}
#search-wrapper input::placeholder { color: var(--dark-muted); }
#search-wrapper input:focus { border-color: var(--accent); }
#search-wrapper button { color: var(--dark-muted); }
#search-wrapper button:hover { color: var(--accent); }

#mobile-menu-btn span { background: #fff; }

/* Mobile-Menü-Panel (Dropdown) auf dunklem Header */
@media (max-width: 992px) {
  #desktop-nav.active {
    background: var(--dark-2);
    border-top: 1px solid var(--dark-border);
  }
  #desktop-nav.active .nav-link { color: var(--dark-text); }
}

/* ── HERO: dunkel-industriell ──────────────────────────────────────────── */
#hero {
  background: var(--dark) url('/assets/hero-hubwagendirekt.png') no-repeat;
  background-size: cover;
  background-position: right center;
  color: var(--dark-text);
  border-bottom: none;
  padding: 110px 0 90px;
}
#hero::before {
  background: linear-gradient(to right,
    rgba(11, 15, 23, 0.96) 30%,
    rgba(11, 15, 23, 0.82) 55%,
    rgba(11, 15, 23, 0.45) 100%);
}
#hero::after {
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
@media (max-width: 992px) {
  #hero::before {
    background: linear-gradient(to bottom, rgba(11, 15, 23, 0.95) 30%, rgba(11, 15, 23, 0.85) 100%);
  }
}

#hero h1 { color: #fff; }
#hero h1 .accent { color: var(--accent); }
#hero p { color: var(--dark-muted); }
#hero p strong, #hero p .load { color: var(--dark-text); }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  background: rgba(255, 72, 0, 0.12);
  border: 1px solid rgba(255, 72, 0, 0.3);
  padding: 7px 16px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 22px;
}

.hero-price-anchor {
  display: inline-block;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--dark-border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 16px;
  color: var(--dark-muted);
  margin-bottom: 28px;
}
.hero-price-anchor strong {
  color: #fff;
  font-family: var(--font-cond);
  font-size: 22px;
}

.hero-btns .btn { padding: 16px 32px; font-size: 16px; border-radius: 10px; }
.hero-btns .btn-secondary {
  color: var(--dark-text);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
}
.hero-btns .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.45);
}

.hero-checklist-new { margin-top: 30px; }
.hero-checklist-item { color: var(--dark-text); font-weight: 600; }
.hero-checklist-item i { color: var(--accent); }

/* ── TRUST-STRIP unter dem Hero ────────────────────────────────────────── */
.trust-strip {
  background: var(--dark-2);
  border-bottom: 1px solid var(--dark-border);
  padding: 18px 0;
}
.trust-strip .trust-chip {
  color: var(--dark-text);
  font-weight: 600;
  font-size: 13.5px;
  background: transparent;
  border: none;
}
.trust-strip .trust-chip i { color: var(--accent); }

/* ── BUTTONS: kräftiger ────────────────────────────────────────────────── */
.btn-primary {
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 18px rgba(255, 72, 0, 0.25);
}

/* ── PRODUKTKARTEN: Premium-Schliff ────────────────────────────────────── */
.product-card { border-radius: var(--radius); }
.product-card .badge { background: var(--accent); }
.product-card .price { font-size: 28px; }
.product-card .price .net-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 6px;
  font-family: var(--font-main);
  text-transform: none;
}
.prod-deliver {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
}
.prod-deliver.in { color: var(--green); }
.prod-deliver.pre { color: #B45309; }
.spec-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F1F5F9;
  border: 1px solid var(--border);
  color: var(--primary);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12.5px;
  font-weight: 600;
}
.spec-chip i { color: var(--accent); font-size: 11px; }
.product-card .cart-btn-full { padding: 14px; font-size: 13px; border-radius: 10px; }

/* ── PRODUKTDETAIL: Kauf-Box mit Vertrauenszone ────────────────────────── */
.product-info-panel .price-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-md);
}
.product-info-panel .main-price {
  font-size: 38px;
  font-weight: 800;
  font-family: var(--font-cond);
  color: var(--primary);
  display: block;
}
.product-info-panel .buy-row .btn-add-to-cart,
.product-info-panel .buy-row .btn-primary {
  flex: 1;
  padding: 16px 24px;
  font-size: 16px;
  border-radius: 10px;
}
.stock-status.stock-ok {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid rgba(22, 163, 74, 0.25);
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
}
.stock-status.stock-low {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #B45309;
  background: #FFFBEB;
  border: 1px solid rgba(180, 83, 9, 0.25);
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
}
.product-highlights { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hl-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #F1F5F9;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}
.hl-chip i { color: var(--accent); }

/* Garantie-/Service-Box auf der Produktseite */
.guarantee-box {
  margin-top: 22px;
  background: var(--green-bg);
  border: 1px solid rgba(22, 163, 74, 0.22);
  border-radius: 12px;
  padding: 16px 18px;
}
.guarantee-box li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #14532D;
  padding: 4px 0;
}
.guarantee-box li i { color: var(--green); margin-top: 3px; }

/* Zahlarten-Leiste (Produktseite + Checkout) */
.payment-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.payment-strip .pay-label {
  width: 100%;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.pay-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}
.pay-chip i { font-size: 16px; color: #334155; }

/* ── CHECKOUT: Sicherheit & Klarheit ───────────────────────────────────── */
.checkout-page .section-title { text-align: left; }

.checkout-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 6px 0 30px;
  flex-wrap: wrap;
}
.checkout-steps .step {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-muted);
}
.checkout-steps .step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #E2E8F0;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 800;
}
.checkout-steps .step.done .num,
.checkout-steps .step.active .num { background: var(--accent); color: #fff; }
.checkout-steps .step.done, .checkout-steps .step.active { color: var(--primary); }
.checkout-steps .sep {
  width: 36px; height: 2px;
  background: var(--border);
  margin: 0 12px;
}

.checkout-form fieldset {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 18px;
}
.checkout-form legend {
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--primary);
  padding: 0 8px;
}

.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  background: var(--white);
}
.radio-card:hover { border-color: rgba(255, 72, 0, 0.45); }
.radio-card:has(input:checked) {
  border-color: var(--accent);
  background: #FFF8F5;
  box-shadow: 0 0 0 1px var(--accent);
}
.radio-card input { accent-color: var(--accent); margin-top: 4px; }
.radio-card strong { display: block; font-size: 14.5px; color: var(--primary); }
.radio-card span { font-size: 13px; color: var(--text-muted); }
.radio-card .pay-icons { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.radio-card .pay-icons i { font-size: 22px; color: #475569; }

.checkout-summary {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-md);
  align-self: start;
  position: sticky;
  top: 90px;
}

.secure-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--green-bg);
  border: 1px solid rgba(22, 163, 74, 0.22);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #14532D;
  margin-top: 16px;
}
.secure-strip i { color: var(--green); }

.summary-trust { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.summary-trust li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding: 4px 0;
}
.summary-trust li i { color: var(--green); margin-top: 3px; }

.checkout-form button[type="submit"] {
  padding: 18px;
  font-size: 17px;
  border-radius: 12px;
  font-weight: 800;
}
.checkout-form button[type="submit"]::before {
  content: "\f023"; /* fa-lock — robust gegen JS-textContent-Updates */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 10px;
}

.vat-msg.is-valid { color: var(--green); font-weight: 700; }
.vat-msg.is-invalid { color: #DC2626; font-weight: 600; }
.vat-msg.is-unverified {
  display: block;
  margin-top: 8px;
  color: #92400E;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}

/* ── WARENKORB ─────────────────────────────────────────────────────────── */
.cart-summary {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-md);
  align-self: start;
  position: sticky;
  top: 90px;
}
.cart-summary .totals .total { font-size: 19px; color: var(--primary); }

/* ── FOOTER: dunkel ────────────────────────────────────────────────────── */
#site-footer {
  background: var(--dark);
  color: var(--dark-muted);
  border-top: 3px solid var(--accent);
}
#site-footer .footer-logo { color: #fff; }
#site-footer .footer-logo .accent { color: var(--accent); }
#site-footer .footer-col h4 { color: #fff; }
#site-footer .footer-col p { color: var(--dark-muted); }
#site-footer .footer-col ul a { color: var(--dark-muted); }
#site-footer .footer-col ul a:hover { color: var(--accent); }
#site-footer .footer-copy {
  border-top: 1px solid var(--dark-border);
  color: var(--dark-muted);
}
#site-footer .footer-promises li { color: var(--dark-text); }
#site-footer .footer-promises li i { color: var(--accent); }
#site-footer .pay-badge {
  background: var(--dark-3);
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
  border-radius: 7px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

/* ── HOVER-EFFEKTE & MIKRO-INTERAKTIONEN ───────────────────────────────── */
@media (hover: hover) {

  /* Vergleichs-Sektion: Spalten heben sich, Zeilen reagieren */
  .compare-col {
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  }
  .compare-col:hover { transform: translateY(-4px); }
  .compare-col.win:hover { box-shadow: 0 24px 50px -20px rgba(255, 72, 0, 0.45); }
  .compare-col.alt:hover { box-shadow: 0 16px 36px -18px rgba(11, 15, 23, 0.15); }
  .compare-col li { transition: transform 0.2s var(--ease-out), color 0.2s; }
  .compare-col li:hover { transform: translateX(5px); }
  .compare-col.alt li:hover { color: #475569; }
  .compare-col.win li i { transition: transform 0.2s var(--ease-out); }
  .compare-col.win li:hover i { transform: scale(1.25); }

  /* Trust-Strip (dunkel): Text hellt auf, Icon poppt */
  .trust-strip .trust-chip { transition: color 0.2s; }
  .trust-strip .trust-chip i { transition: transform 0.25s var(--ease-out); }
  .trust-strip .trust-chip:hover { color: #fff; }
  .trust-strip .trust-chip:hover i { transform: scale(1.25) rotate(-6deg); }

  /* "Warum kaufen"-Karten: Icon füllt sich orange */
  .why-card { transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s; }
  .why-card:hover { border-color: rgba(255, 72, 0, 0.35); }
  .why-icon { transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease-out); }
  .why-card:hover .why-icon {
    background: var(--accent);
    color: #fff;
    transform: scale(1.08) rotate(-4deg);
  }

  /* "In 3 Schritten": Nummern-Kachel reagiert */
  .step-item .step-num { transition: transform 0.25s var(--ease-out), box-shadow 0.25s; }
  .step-item:hover .step-num {
    transform: scale(1.1);
    box-shadow: 0 8px 18px -6px rgba(255, 72, 0, 0.5);
  }

  /* USP-Leiste: Icon füllt sich orange */
  .usp-item-new i { transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease-out); }
  .usp-item-new:hover i { background: var(--accent); color: #fff; transform: scale(1.08); }

  /* Hero-Checkliste */
  .hero-checklist-item i { transition: transform 0.2s var(--ease-out); }
  .hero-checklist-item:hover i { transform: scale(1.3); }

  /* Chips (Spec, Highlights, Zahlarten) */
  .spec-chip, .hl-chip, .pay-chip {
    transition: border-color 0.2s, transform 0.2s var(--ease-out), box-shadow 0.2s;
  }
  .spec-chip:hover, .hl-chip:hover, .pay-chip:hover {
    border-color: rgba(255, 72, 0, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -8px rgba(11, 15, 23, 0.3);
  }

  /* Checkout: Zahlarten-Icons färben sich beim Hover der Karte */
  .radio-card .pay-icons i { transition: color 0.2s; }
  .radio-card:hover .pay-icons i { color: var(--accent); }

  /* Garantie-Box */
  .guarantee-box li i { transition: transform 0.2s var(--ease-out); }
  .guarantee-box li:hover i { transform: scale(1.25); }

  /* Warenkorb-Zeilen */
  .cart-table tbody tr { transition: background-color 0.15s; }
  .cart-table tbody tr:hover { background: #FAFAF8; }

  /* Footer: Links rücken ein, Badges heben sich */
  #site-footer .footer-col ul a { transition: color 0.2s, padding-left 0.2s var(--ease-out); }
  #site-footer .footer-col ul a:hover { padding-left: 6px; }
  #site-footer .pay-badge { transition: transform 0.2s var(--ease-out), border-color 0.2s, color 0.2s; }
  #site-footer .pay-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 72, 0, 0.55);
    color: #fff;
  }
  #site-footer .footer-promises li { transition: color 0.2s; }
  #site-footer .footer-promises li:hover { color: #fff; }
}

/* ── Scroll-Reveal für statische Sektionen ─────────────────────────────────
   body.js-anim wird von main.js nur gesetzt, wenn IntersectionObserver
   verfügbar ist → ohne JS bleibt alles sichtbar. Bewusst NICHT für
   .product-card/.cat-card-new (werden dynamisch nachgeladen). */
body.js-anim .why-card,
body.js-anim .step-item,
body.js-anim .compare-col,
body.js-anim .usp-item-new {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
body.js-anim .why-card.is-visible,
body.js-anim .step-item.is-visible,
body.js-anim .compare-col.is-visible,
body.js-anim .usp-item-new.is-visible {
  opacity: 1;
  transform: none;
  /* nach dem Reveal: schnelle Transitions für Hover-Effekte */
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
              border-color 0.25s, opacity 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  body.js-anim .why-card,
  body.js-anim .step-item,
  body.js-anim .compare-col,
  body.js-anim .usp-item-new {
    opacity: 1;
    transform: none;
  }
}

/* ── Mobile Sticky-Kaufleiste (Produktseite, via pages.js injiziert) ───── */
.mobile-buy-bar { display: none; }

/* ── Mobile-Feinschliff ────────────────────────────────────────────────── */

/* Mobile-Menü-Panel: dunkle Trennlinien statt heller (style-refine setzt #f1f5f9) */
@media (max-width: 992px) {
  #desktop-nav.active .nav-link {
    color: var(--dark-text);
    border-bottom: 1px solid var(--dark-border);
  }
}

/* Checkout mobil: Bestellübersicht (Summe + Trust) ZUERST zeigen,
   damit der Kunde den Gesamtbetrag sieht, bevor er das Formular ausfüllt. */
@media (max-width: 1024px) {
  .checkout-layout { display: flex; flex-direction: column; }
  #checkout-summary { order: -1; }
}

@media (max-width: 768px) {
  /* Sticky-Header kompakter: 40px Trust-Bar + 60px Nav statt 120px gesamt */
  .header-nav { height: 60px; }
  #trust-bar { height: 34px; font-size: 10px; }
  #logo { font-size: 20px; }

  #hero { padding: 64px 0 48px; }
  .hero-eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.6px;
    padding: 6px 12px;
    white-space: normal;
    line-height: 1.5;
  }
  .hero-price-anchor { display: block; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-checklist-new { gap: 10px; }
  .hero-checklist-item { font-size: 14px; }

  /* Trust-Strip: horizontal scrollbar statt 6-Zeilen-Block */
  .trust-strip { padding: 12px 0; }
  .trust-strip .trust-strip-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .trust-strip .trust-strip-grid::-webkit-scrollbar { display: none; }
  .trust-strip .trust-chip { white-space: nowrap; flex: 0 0 auto; }

  .checkout-summary, .cart-summary { position: static; }
  .checkout-steps { gap: 0; }
  .checkout-steps .step { font-size: 12px; }
  .checkout-steps .step .num { width: 22px; height: 22px; font-size: 11px; }
  .checkout-steps .sep { width: 14px; margin: 0 6px; }
  .checkout-form fieldset { padding: 18px 16px; }

  /* iOS-Zoom verhindern: Eingabefelder mind. 16px Schriftgröße */
  .checkout-form input,
  .checkout-form select,
  .checkout-form textarea,
  .cart-summary select,
  .qty-input {
    font-size: 16px;
  }
  .cart-qty { font-size: 16px; min-height: 44px; }

  .product-grid { gap: 18px; }
  .product-info-panel .main-price { font-size: 32px; }
  .product-detail { padding: 24px 0 60px; }
  .product-gallery img { max-height: 300px; object-fit: contain; margin: 0 auto; }

  /* Tap-Targets: Mengensteuerung mind. 44px */
  .qty-btn { min-width: 44px; min-height: 44px; }

  /* Kauf-Zeile: Button volle Breite unter der Mengenauswahl */
  .product-info-panel .buy-row { flex-wrap: wrap; gap: 10px; }
  .product-info-panel .buy-row .btn-add-to-cart,
  .product-info-panel .buy-row .btn-primary { flex: 1 1 100%; }

  /* Sticky-Kaufleiste unten (Produktseite) */
  .mobile-buy-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200; /* unter Cookie-Banner (9000), über Inhalt */
    align-items: center;
    gap: 14px;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(11, 15, 23, 0.12);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .mobile-buy-bar .mbb-price { display: flex; flex-direction: column; line-height: 1.15; }
  .mobile-buy-bar .mbb-price strong {
    font-family: var(--font-cond);
    font-size: 20px;
    color: var(--primary);
    white-space: nowrap;
  }
  .mobile-buy-bar .mbb-price span { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
  .mobile-buy-bar .mbb-btn { flex: 1; padding: 14px; font-size: 15px; border-radius: 10px; }
  body[data-page="product"].has-buy-bar { padding-bottom: 78px; }
  body.has-buy-bar #toast-host { bottom: 92px; } /* Toast über der Kaufleiste */

  /* Footer kompakter */
  #site-footer .footer-promises { gap: 8px; }
}

@media (max-width: 400px) {
  .checkout-steps { row-gap: 8px; flex-wrap: wrap; }
  .product-card .prod-img { aspect-ratio: 16 / 10; }
}