/* =========================================================
   CYBER SHOP V3 — Shop-Seiten (Warenkorb · Kasse · Kontakt)
   ---------------------------------------------------------
   Zwei Teile:
   TEIL A — cs- Komponenten für die Mockup-Previews
   TEIL B — Overrides auf echte WooCommerce / CF7 / Gutenberg
            Markup-Klassen (für den produktiven mu-plugin-Einbau)

   Lädt zusätzlich zu cybershop-v3.css. Brand-Variablen kommen
   aus cybershop-v3.css (:root).
   ========================================================= */

:root {
  /* Self-contained 2026-05-30 (Benni): alle benoetigten Variablen hier definiert,
     damit shop.css unabhaengig von global cybershop-v3.css funktioniert — wichtig fuer
     die Kasse-Seite, wo cybershop-v3.css NICHT global laedt. */
  --cs-cta: #1e73be;          /* Primaer-CTA Blau (Checkout/Cart) */
  --cs-cta-2: #1a64a6;
  --cs-danger: #e74c3c;
  --cs-accent: #5EC6CB;
  --cs-accent-2: #4ab0b5;
  --cs-glow: rgba(94,198,203,.35);
  --cs-navy: #0e2238;
  --cs-navy-2: #13304d;
  --cs-text: #0e2238;
  --cs-text-2: #5b6b7e;
  --cs-text-3: #9aa6b6;
  --cs-bg: #ffffff;
  --cs-bg-soft: #f6f8fb;
  --cs-bg-tint: #f0f4f9;
  --cs-border: #e6ecf2;
  --cs-border-2: #d9e0e8;
  --cs-radius: 12px;
  --cs-radius-lg: 16px;
  --cs-radius-pill: 100px;
  --cs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Lato, Roboto, sans-serif;
  --cs-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ============================================================
   TEIL A — Mockup-Komponenten (cs-)
   ============================================================ */

/* ---- Stepper ---- */
.cs-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 8px 0 36px;
  flex-wrap: wrap;
}
.cs-step-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cs-text-2);
}
.cs-step-circle {
  width: 38px; height: 38px;
  border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 15px;
  background: white;
  border: 2px solid var(--cs-border-2);
  color: var(--cs-text-2);
  flex-shrink: 0;
}
.cs-step-item.cs-active .cs-step-circle {
  background: var(--cs-navy);
  border-color: var(--cs-navy);
  color: white;
}
.cs-step-item.cs-done .cs-step-circle {
  background: var(--cs-accent);
  border-color: var(--cs-accent);
  color: var(--cs-navy);
}
.cs-step-item.cs-active .cs-step-label { color: var(--cs-navy); font-weight: 700; }
.cs-step-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cs-step-line {
  width: 64px; height: 2px;
  background: var(--cs-border-2);
  margin: 0 16px;
}
.cs-step-item.cs-done + .cs-step-line { background: var(--cs-accent); }
@media (max-width: 640px) {
  .cs-step-label { display: none; }
  .cs-step-line { width: 32px; margin: 0 8px; }
}

/* ---- Shop layout: 2-col ---- */
.cs-shop-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .cs-shop-grid { grid-template-columns: 1fr; }
}

/* ---- Cart item rows ---- */
.cs-cart-list { display: flex; flex-direction: column; gap: 14px; }
.cs-cart-row {
  background: white;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: 18px;
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 18px;
  align-items: start;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cs-cart-row:hover { border-color: var(--cs-accent); box-shadow: 0 8px 24px -16px rgba(14,34,56,.3); }
.cs-cart-thumb {
  width: 84px; height: 84px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cs-navy) 0%, var(--cs-accent-2) 100%);
  display: flex; align-items: center; justify-content: center;
  color: white;
  flex-shrink: 0;
}
.cs-cart-main { min-width: 0; }
.cs-cart-vendor { font-size: 11px; font-weight: 700; color: var(--cs-accent-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.cs-cart-name { font-size: 16px; font-weight: 700; color: var(--cs-navy); letter-spacing: -0.01em; margin-bottom: 10px; }
.cs-spec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cs-spec-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: var(--cs-bg-soft);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-pill);
  font-size: 12px;
  color: var(--cs-text-2);
}
.cs-spec-chip strong { color: var(--cs-navy); font-weight: 700; }
.cs-cart-sku { font-family: var(--cs-font-mono); font-size: 11px; color: var(--cs-text-3); }
.cs-cart-remove {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--cs-text-2);
  margin-top: 10px;
  cursor: pointer;
}
.cs-cart-remove:hover { color: var(--cs-danger); }
.cs-cart-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.cs-cart-price { text-align: right; }
.cs-cart-price strong { display: block; font-size: 20px; font-weight: 800; color: var(--cs-navy); letter-spacing: -0.02em; }
.cs-cart-price span { font-size: 11px; color: var(--cs-text-2); }
.cs-qty {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--cs-border-2);
  border-radius: 8px;
  overflow: hidden;
}
.cs-qty button {
  width: 32px; height: 36px;
  background: var(--cs-bg-soft);
  color: var(--cs-navy);
  font-size: 16px; font-weight: 700;
}
.cs-qty button:hover { background: var(--cs-accent); }
.cs-qty input {
  width: 44px; height: 36px;
  border: 0; text-align: center;
  font: 600 14px var(--cs-font);
  color: var(--cs-navy);
  -moz-appearance: textfield;
}
.cs-qty input::-webkit-outer-spin-button,
.cs-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-tier-hint {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--cs-accent-2);
  text-align: right;
}

/* ---- Cart actions bar ---- */
.cs-cart-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 18px;
  align-items: center;
}
.cs-coupon {
  display: flex; gap: 8px;
  flex: 1; min-width: 240px;
}
.cs-coupon input {
  flex: 1;
  padding: 11px 14px;
  border: 1.5px solid var(--cs-border-2);
  border-radius: 8px;
  font: 500 14px var(--cs-font);
  color: var(--cs-navy);
}
.cs-coupon input:focus { outline: none; border-color: var(--cs-accent); }

/* ---- Summary box ---- */
.cs-summary {
  background: var(--cs-navy);
  color: white;
  border-radius: var(--cs-radius-lg);
  padding: 28px;
  position: sticky;
  top: 24px;
  overflow: hidden;
}
.cs-summary::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--cs-accent);
}
.cs-summary h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--cs-accent);
  margin-bottom: 18px;
}
.cs-sum-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0;
  font-size: 14px;
  color: rgba(255,255,255,.82);
}
.cs-sum-row.cs-sum-total {
  margin-top: 8px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 15px;
  color: white;
}
.cs-sum-row.cs-sum-total strong { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.cs-sum-row .cs-sum-val { font-weight: 600; color: white; }
.cs-sum-vat-note {
  font-size: 11px; color: var(--cs-accent);
  margin: 2px 0 0;
}
.cs-summary .cs-btn { width: 100%; margin-top: 18px; }
.cs-btn-cta { background: var(--cs-cta); color: white; box-shadow: 0 6px 20px -6px rgba(30,115,190,.6); }
.cs-btn-cta:hover { background: var(--cs-cta-2); }
.cs-btn-summary-ghost {
  width: 100%; margin-top: 10px;
  background: transparent; color: white;
  border: 1.5px solid rgba(255,255,255,.25);
}
.cs-btn-summary-ghost:hover { background: rgba(255,255,255,.06); border-color: white; }

/* ---- Trust block in summary ---- */
.cs-trust-block {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.cs-trust-row {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  margin-bottom: 14px;
}
.cs-trust-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: rgba(255,255,255,.8);
}
.cs-trust-item svg { color: var(--cs-accent); flex-shrink: 0; }
.cs-partner-badge {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(94,198,203,.1);
  border: 1px solid rgba(94,198,203,.28);
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  color: white;
}
.cs-partner-badge svg { color: var(--cs-accent); }

/* ---- Payment strip ---- */
.cs-pay-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 16px;
}
.cs-pay-chip {
  padding: 5px 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,.85);
}

/* ---- Help card (replaces sidebar search) ---- */
.cs-help-card {
  background: white;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: 22px;
  margin-top: 18px;
}
.cs-help-card h4 { font-size: 15px; font-weight: 700; color: var(--cs-navy); margin-bottom: 6px; }
.cs-help-card p { font-size: 13px; color: var(--cs-text-2); line-height: 1.5; margin-bottom: 14px; }
.cs-help-card .cs-btn { width: 100%; }

/* ============================================================
   Checkout: field groups
   ============================================================ */
.cs-checkout-section {
  background: white;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: 26px;
  margin-bottom: 18px;
}
.cs-checkout-section-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.cs-checkout-step-n {
  width: 28px; height: 28px;
  border-radius: 100px;
  background: var(--cs-navy);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  flex-shrink: 0;
}
.cs-checkout-section-head h3 { font-size: 18px; font-weight: 800; color: var(--cs-navy); letter-spacing: -0.01em; }
.cs-field-grid { display: flex; flex-direction: column; gap: 14px; }
.cs-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .cs-field-row { grid-template-columns: 1fr; } }
.cs-field { display: flex; flex-direction: column; gap: 6px; }
.cs-field label {
  font-size: 12px; font-weight: 600;
  color: var(--cs-navy);
}
.cs-field label .cs-req { color: var(--cs-danger); }
.cs-field label .cs-opt { color: var(--cs-text-3); font-weight: 500; }
.cs-field input,
.cs-field select {
  padding: 12px 14px;
  border: 1.5px solid var(--cs-border-2);
  border-radius: 8px;
  font: 500 14px var(--cs-font);
  color: var(--cs-navy);
  background: white;
}
.cs-field input:focus,
.cs-field select:focus { outline: none; border-color: var(--cs-accent); box-shadow: 0 0 0 3px rgba(94,198,203,.15); }
.cs-field-hint { font-size: 12px; color: var(--cs-text-2); }

/* VAT highlight field */
.cs-field-vat {
  background: rgba(94,198,203,.06);
  border: 1px solid rgba(94,198,203,.3);
  border-radius: 10px;
  padding: 16px;
}
.cs-field-vat label { display: flex; align-items: center; gap: 8px; }
.cs-field-vat .cs-vat-badge {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--cs-accent); color: var(--cs-navy);
  padding: 2px 8px; border-radius: 100px;
}
.cs-field-vat input { margin-top: 8px; background: white; }
.cs-field-vat .cs-field-hint { margin-top: 8px; color: var(--cs-accent-2); }

/* Order review */
.cs-review { position: sticky; top: 24px; }
.cs-review-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.cs-review-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.cs-review-thumb {
  width: 48px; height: 48px; border-radius: 8px;
  background: linear-gradient(135deg, var(--cs-accent-2), var(--cs-accent));
  display: flex; align-items: center; justify-content: center;
  color: var(--cs-navy);
}
.cs-review-name { font-size: 13px; font-weight: 700; color: white; line-height: 1.3; }
.cs-review-meta { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 2px; font-family: var(--cs-font-mono); }
.cs-review-qty { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 4px; }
.cs-review-price { font-size: 14px; font-weight: 700; color: white; white-space: nowrap; }

/* Payment methods */
.cs-payments { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }
.cs-payment {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.14);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s ease;
}
.cs-payment.cs-on { border-color: var(--cs-accent); background: rgba(94,198,203,.08); }
.cs-payment-radio {
  width: 18px; height: 18px; border-radius: 100px;
  border: 2px solid rgba(255,255,255,.4);
  flex-shrink: 0; position: relative;
}
.cs-payment.cs-on .cs-payment-radio { border-color: var(--cs-accent); }
.cs-payment.cs-on .cs-payment-radio::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: 100px; background: var(--cs-accent);
}
.cs-payment-label { font-size: 14px; font-weight: 600; color: white; flex: 1; }
.cs-payment-icons { display: flex; gap: 4px; }
.cs-payment-icons span {
  font-size: 9px; font-weight: 700;
  padding: 3px 6px; border-radius: 4px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.8);
}
.cs-place-order {
  width: 100%; margin-top: 8px;
  padding: 16px;
  font-size: 16px;
}
.cs-secure-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px;
  font-size: 12px; color: rgba(255,255,255,.6);
}
.cs-secure-note svg { color: var(--cs-accent); }

/* ============================================================
   Kontakt
   ============================================================ */
.cs-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 32px 0;
}
@media (max-width: 800px) { .cs-contact-grid { grid-template-columns: 1fr; } }
.cs-info-card {
  background: white;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.cs-info-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--cs-accent);
}
.cs-info-card h3 { font-size: 18px; font-weight: 800; color: var(--cs-navy); margin-bottom: 20px; letter-spacing: -0.01em; }
.cs-info-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cs-border);
}
.cs-info-row:last-child { border-bottom: 0; }
.cs-info-icon {
  width: 42px; height: 42px;
  border-radius: 100px;
  background: rgba(94,198,203,.14);
  color: var(--cs-accent-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cs-info-content { padding-top: 2px; }
.cs-info-label { font-size: 12px; color: var(--cs-text-2); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 2px; }
.cs-info-value { font-size: 15px; font-weight: 600; color: var(--cs-navy); }
.cs-info-value a { color: var(--cs-navy); }
.cs-info-value a:hover { color: var(--cs-accent-2); }

.cs-contact-form-wrap {
  background: var(--cs-navy);
  border-radius: var(--cs-radius-lg);
  padding: 36px;
  position: relative;
  overflow: hidden;
}
.cs-contact-form-wrap::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--cs-accent);
}
.cs-contact-form-wrap h2 { font-size: 24px; font-weight: 800; color: white; letter-spacing: -0.02em; margin-bottom: 6px; }
.cs-contact-form-wrap > p { color: rgba(255,255,255,.7); font-size: 14px; margin-bottom: 24px; }
.cs-contact-trust {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 24px;
}
.cs-contact-trust span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: rgba(94,198,203,.1);
  border: 1px solid rgba(94,198,203,.28);
  border-radius: var(--cs-radius-pill);
  font-size: 12px; font-weight: 600; color: white;
}
.cs-contact-trust svg { color: var(--cs-accent); }

/* Standort map placeholder */
.cs-map {
  margin-top: 16px;
  height: 180px;
  border-radius: var(--cs-radius);
  background:
    linear-gradient(135deg, rgba(94,198,203,.12), transparent),
    var(--cs-bg-soft);
  border: 1px solid var(--cs-border);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cs-map::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(26,58,92,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,58,92,.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.cs-map-pin {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--cs-navy);
}
.cs-map-pin svg { color: var(--cs-cta); }
.cs-map-pin strong { font-size: 13px; }

/* ============================================================
   TEIL B — OVERRIDES auf echte WooCommerce / CF7 / Gutenberg
   ============================================================
   Diese Selektoren stylen das vorhandene Markup. Im mu-plugin
   per wp_add_inline_style einbinden. Alle Pflicht-Klassen
   bleiben erhalten — wir gestalten sie nur um.
   ------------------------------------------------------------ */

/* ----- WooCommerce Cart ----- */
body.woocommerce-cart .shop_table.cart {
  border: 0; border-collapse: separate; border-spacing: 0 14px;
}
body.woocommerce-cart .shop_table.cart thead { display: none; }
body.woocommerce-cart .woocommerce-cart-form__cart-item.cart_item {
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  box-shadow: 0 1px 0 rgba(14,34,56,.02);
}
body.woocommerce-cart .cart_item td { border: 0; padding: 18px; vertical-align: top; }
body.woocommerce-cart .cart_item .product-thumbnail img {
  width: 84px; height: 84px; border-radius: 10px; object-fit: cover;
}
body.woocommerce-cart .cart-item-details .product-title {
  font-size: 16px; font-weight: 700; color: var(--cs-navy); text-decoration: none;
}
/* Konfigurator-Meta (wc_get_formatted_cart_item_data) als Chips */
body.woocommerce-cart .cart-item-details .variation,
body.woocommerce-cart .cart-item-details dl.variation {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0;
}
body.woocommerce-cart .cart-item-details dl.variation dt,
body.woocommerce-cart .cart-item-details dl.variation dd {
  margin: 0; font-size: 12px;
}
body.woocommerce-cart .cart-item-details dl.variation dt {
  font-weight: 600; color: var(--cs-text-2);
  background: var(--cs-bg-soft); border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-pill) 0 0 var(--cs-radius-pill);
  padding: 4px 4px 4px 10px;
}
body.woocommerce-cart .cart-item-details dl.variation dd {
  color: var(--cs-navy); font-weight: 700;
  background: var(--cs-bg-soft); border: 1px solid var(--cs-border); border-left: 0;
  border-radius: 0 var(--cs-radius-pill) var(--cs-radius-pill) 0;
  padding: 4px 10px 4px 4px;
}
body.woocommerce-cart .product-remove .remove-item,
body.woocommerce-cart .cart-item-details .product-remove a {
  font-size: 12px; color: var(--cs-text-2);
}
body.woocommerce-cart .product-remove .remove-item:hover { color: var(--cs-danger); }
body.woocommerce-cart .product-subtotal { font-size: 20px; font-weight: 800; color: var(--cs-navy); }

/* Qty input */
body.woocommerce-cart .quantity .qty {
  border: 1.5px solid var(--cs-border-2); border-radius: 8px;
  height: 40px; font-weight: 600; color: var(--cs-navy);
}

/* Cart totals box */
body.woocommerce-cart .cart_totals {
  background: var(--cs-navy); color: #fff;
  border-radius: var(--cs-radius-lg); padding: 28px;
  border: 0; position: relative; overflow: hidden;
}
body.woocommerce-cart .cart_totals::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--cs-accent);
}
body.woocommerce-cart .cart_totals h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--cs-accent); margin-bottom: 16px;
}
body.woocommerce-cart .cart_totals table { color: rgba(255,255,255,.85); border: 0; }
body.woocommerce-cart .cart_totals th { color: rgba(255,255,255,.7); border: 0; padding: 10px 0; }
body.woocommerce-cart .cart_totals td { border: 0; text-align: right; color: #fff; font-weight: 600; padding: 10px 0; }
body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td {
  border-top: 1px solid rgba(255,255,255,.16); padding-top: 16px; font-size: 16px;
}
body.woocommerce-cart .cart_totals .order-total .amount { font-size: 28px; font-weight: 800; color: #fff; }

/* Proceed-to-checkout button → Brand CTA */
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  background: var(--cs-cta) !important; color: #fff !important;
  border-radius: 8px !important; font-weight: 700 !important;
  padding: 16px !important; font-size: 15px !important;
  box-shadow: 0 6px 20px -6px rgba(30,115,190,.6);
}
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { background: var(--cs-cta-2) !important; }

/* Coupon */
body.woocommerce-cart .coupon #coupon_code {
  border: 1.5px solid var(--cs-border-2); border-radius: 8px; padding: 11px 14px;
}
body.woocommerce-cart .coupon .button,
body.woocommerce-cart .actions .button {
  background: var(--cs-navy); color: #fff; border-radius: 8px;
}

/* ----- WooCommerce Checkout ----- */
body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
  background: #fff; border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg); padding: 26px; margin-bottom: 18px;
}
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout #order_review_heading {
  font-size: 18px; font-weight: 800; color: var(--cs-navy); margin-bottom: 18px;
}
body.woocommerce-checkout .form-row label { font-size: 12px; font-weight: 600; color: var(--cs-navy); }
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row .select2-selection,
body.woocommerce-checkout .form-row select {
  border: 1.5px solid var(--cs-border-2); border-radius: 8px;
  padding: 12px 14px; font-size: 14px; color: var(--cs-navy);
}
body.woocommerce-checkout .form-row input.input-text:focus {
  outline: none; border-color: var(--cs-accent); box-shadow: 0 0 0 3px rgba(94,198,203,.15);
}
/* VAT field highlight */
body.woocommerce-checkout #billing_vat_id_field {
  background: rgba(94,198,203,.06); border: 1px solid rgba(94,198,203,.3);
  border-radius: 10px; padding: 16px;
}
body.woocommerce-checkout #billing_vat_id_field label::after {
  content: " · EU-Reverse-Charge"; color: var(--cs-accent-2); font-weight: 600; font-size: 11px;
}

/* Order review box → dark sticky */
body.woocommerce-checkout .cart-order-details .order-review,
body.woocommerce-checkout #order_review {
  background: var(--cs-navy); color: #fff;
  border-radius: var(--cs-radius-lg); padding: 26px;
  border: 0; position: relative; overflow: hidden;
}
body.woocommerce-checkout .order-review { position: sticky; top: 24px; }
body.woocommerce-checkout #order_review::before,
body.woocommerce-checkout .cart-order-details .order-review::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--cs-accent); z-index: 1;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table { color: rgba(255,255,255,.85); }
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td { border-color: rgba(255,255,255,.12); }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount { font-size: 24px; font-weight: 800; color: #fff; }
body.woocommerce-checkout .wc_payment_methods { list-style: none; margin: 16px 0; padding: 0; }
body.woocommerce-checkout .wc_payment_method label {
  color: #fff; font-weight: 600;
}
body.woocommerce-checkout #place_order {
  background: var(--cs-cta) !important; color: #fff !important;
  border-radius: 8px !important; font-weight: 700 !important;
  padding: 16px !important; font-size: 16px !important; width: 100%;
  box-shadow: 0 6px 20px -6px rgba(30,115,190,.6);
}
body.woocommerce-checkout #place_order:hover { background: var(--cs-cta-2) !important; }

/* p1-checkout-trust block restyle (existing inline markup) */
.p1-checkout-trust {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px !important;
}
.p1-checkout-trust span { color: rgba(255,255,255,.8) !important; }

/* ----- Contact Form 7 ----- */
.wpcf7 { margin-top: 8px; }
.wpcf7 label { display: block; font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]) {
  width: 100%; padding: 12px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  color: #fff; font: 500 14px var(--cs-font);
  margin-bottom: 16px;
}
.wpcf7-form-control::placeholder { color: rgba(255,255,255,.4); }
.wpcf7-form-control:focus { outline: none; border-color: var(--cs-accent); background: rgba(94,198,203,.08); }
.wpcf7 textarea { min-height: 120px; resize: vertical; }
/* !important sichert den Submit gegen XStore-Theme-Button-Styles ab */
.cs-root .wpcf7-submit,
input.wpcf7-submit,
.wpcf7-submit {
  background: var(--cs-accent) !important; color: var(--cs-navy) !important;
  border: 0 !important; border-radius: 8px !important; padding: 14px 28px !important;
  font-weight: 700 !important; font-size: 15px !important; cursor: pointer;
  box-shadow: 0 6px 20px -6px var(--cs-glow); width: auto;
}
.wpcf7-submit:hover { background: var(--cs-accent-2) !important; }

/* ----- Gutenberg Kontakt columns ----- */
body.page .wp-block-columns { gap: 20px; }

/* ============================================================
   HOTFIXES 2026-05-30 (nach Live-Verifikation) — Benni
   ============================================================ */

/* WARENKORB — Gesamtsumme lief aus der Box (overflow:hidden + 28px) */
body.woocommerce-cart .cart_totals { overflow: visible; }
body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td {
  display: block; width: 100%; text-align: left; padding: 2px 0;
}
body.woocommerce-cart .cart_totals .order-total .amount { font-size: 26px; white-space: nowrap; }

/* WARENKORB — "Weiter einkaufen"-Button war dunkelgrau auf dunkelblau (unsichtbar) */
body.woocommerce-cart .cart_totals .return-shop,
body.woocommerce-cart .cart_totals .return-shop.button,
body.woocommerce-cart .cart_totals a.return-shop {
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.3) !important;
}
body.woocommerce-cart .cart_totals .return-shop:hover {
  border-color: #fff !important; background: rgba(255,255,255,.06) !important;
}

/* KASSE — dunkle Order-Review-Box: ALLE Texte hell lesbar machen */
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #order_review th,
body.woocommerce-checkout #order_review td,
body.woocommerce-checkout #order_review label,
body.woocommerce-checkout #order_review p,
body.woocommerce-checkout #order_review .product-name,
body.woocommerce-checkout #order_review dl.variation dt,
body.woocommerce-checkout #order_review dl.variation dd,
body.woocommerce-checkout #order_review .wc-item-meta,
body.woocommerce-checkout #order_review .wc-item-meta li,
body.woocommerce-checkout #order_review .wc-item-meta strong {
  color: rgba(255,255,255,.9) !important;
  background: transparent !important;
  border-color: rgba(255,255,255,.14) !important;
}
body.woocommerce-checkout #order_review a {
  color: var(--cs-accent) !important; text-decoration: underline;
}
body.woocommerce-checkout #order_review_heading {
  color: var(--cs-accent) !important;
}
/* AGB-/Datenschutz-Checkbox + Text im dunklen Review */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
body.woocommerce-checkout .woocommerce-privacy-policy-text,
body.woocommerce-checkout .woocommerce-privacy-policy-text p,
body.woocommerce-checkout #order_review .woocommerce-form__label {
  color: rgba(255,255,255,.82) !important;
}

/* KASSE Hotfix 2: Heading "Deine Bestellung" (h3.step-title) + Preise im dunklen Review */
body.woocommerce-checkout #order_review h3,
body.woocommerce-checkout #order_review .step-title,
body.woocommerce-checkout #order_review h3.step-title {
  color: var(--cs-accent) !important;
}
body.woocommerce-checkout #order_review .amount,
body.woocommerce-checkout #order_review .woocommerce-Price-amount,
body.woocommerce-checkout #order_review .product-total,
body.woocommerce-checkout #order_review .product-subtotal,
body.woocommerce-checkout #order_review bdi {
  color: #fff !important;
}

/* ============================================================
   2026-05-30 (Benni) — Checkout-Sektionen + Suche weg + Zahlungsart-Karten
   ============================================================ */

/* Suche-Widget auf Cart + Checkout komplett entfernen (mehr Platz) */
body.woocommerce-cart .widget_search,
body.woocommerce-cart .woocommerce-product-search,
body.woocommerce-cart .p1-search-cart-zindex,
body.woocommerce-checkout .widget_search,
body.woocommerce-checkout .woocommerce-product-search,
body.woocommerce-checkout .p1-search-cart-zindex,
body.woocommerce-checkout aside .widget_search { display: none !important; }

/* Checkout-Sektionen (von cybershop-v3-checkout.js erzeugt) sichtbar machen */
body.woocommerce-checkout .cs-checkout-section {
  background: #fff; border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg); padding: 26px; margin-bottom: 18px;
}
body.woocommerce-checkout .cs-checkout-section-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
body.woocommerce-checkout .cs-checkout-step-n {
  width: 28px; height: 28px; border-radius: 100px; background: var(--cs-navy);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; flex-shrink: 0;
}
body.woocommerce-checkout .cs-checkout-section-head h3 {
  font-size: 18px; font-weight: 800; color: var(--cs-navy); margin: 0; letter-spacing: -0.01em;
}
/* Vorname/Nachname nebeneinander in der Sektion */
body.woocommerce-checkout .cs-checkout-section #billing_first_name_field,
body.woocommerce-checkout .cs-checkout-section #billing_last_name_field { width: 48.5%; display: inline-block; vertical-align: top; }
body.woocommerce-checkout .cs-checkout-section #billing_first_name_field { margin-right: 3%; }

/* Zahlungsart-Karten (1:1 Design-Look) */
body.woocommerce-checkout #payment .wc_payment_methods { padding: 0; margin: 16px 0; list-style: none; }
body.woocommerce-checkout #payment li.wc_payment_method {
  background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: 4px 14px; margin-bottom: 8px; transition: all .15s ease;
}
body.woocommerce-checkout #payment li.wc_payment_method:has(input:checked) {
  border-color: var(--cs-accent); background: rgba(94,198,203,.08);
}
body.woocommerce-checkout #payment li.wc_payment_method > label {
  color: #fff !important; font-weight: 600; padding: 10px 0; display: flex; align-items: center; gap: 10px;
}
body.woocommerce-checkout #payment .payment_box {
  background: rgba(255,255,255,.04) !important; color: rgba(255,255,255,.75) !important;
  border-radius: 8px; font-size: 13px;
}
body.woocommerce-checkout #payment .payment_box::before { display: none; }

/* Breiteres Checkout-Layout ohne Sidebar (mehr Platz) */
body.woocommerce-checkout .checkout-sidebar,
body.woocommerce-checkout #secondary { display: none !important; }

/* KASSE Hotfix 3: "Deine Bestellung" step-title sitzt in .cart-order-details (ausserhalb #order_review) */
body.woocommerce-checkout .cart-order-details .step-title,
body.woocommerce-checkout .order-review .step-title,
body.woocommerce-checkout .checkout-review-order .step-title {
  color: var(--cs-accent) !important;
}

/* KASSE Feinschliff: aeussere "Abrechnungsdetails"-Huelle transparent — nur die 3
   nummerierten Sektionen sollen als Karten erscheinen (1:1 Design). */
body.woocommerce-checkout #customer_details .woocommerce-billing-fields {
  background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
}
body.woocommerce-checkout #customer_details .woocommerce-billing-fields > h3 { display: none !important; }

/* ============================================================
   2026-05-30 (Benni) — Order-Box breiter + Items kompakt mit Icon-Kachel
   ============================================================ */

/* Order-Box breiter, Felder-Spalte schmaler (ab Tablet) */
@media (min-width: 768px) {
  /* Float-basiert (Bootstrap-Default) — KEIN flex auf .row (das brach die Box um).
     Order-Box breiter (47%), Felder-Spalte 51%, zusammen 98% = nebeneinander. */
  body.woocommerce-checkout .cart-order-details.col-md-5 {
    width: 47% !important; max-width: 47% !important; flex: none !important; float: right !important;
  }
  body.woocommerce-checkout .col-md-7.clearfix,
  body.woocommerce-checkout .row > .col-md-7 {
    width: 51% !important; max-width: 51% !important; flex: none !important; float: left !important;
  }
}

/* Kompaktes Item-Layout: Icon-Kachel links, Name+Specs+Preis rechts */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item td.product-name {
  padding: 14px 0 !important;
}
body.woocommerce-checkout .product-name-info {
  position: relative; padding-left: 56px; min-height: 44px;
}
body.woocommerce-checkout .cs-item-icon {
  position: absolute; left: 0; top: 2px;
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, var(--cs-accent-2), var(--cs-accent));
  display: flex; align-items: center; justify-content: center; color: var(--cs-navy);
}
body.woocommerce-checkout .product-name-info .product-name {
  font-size: 14px; font-weight: 700; color: #fff !important; line-height: 1.25; margin: 0;
}
body.woocommerce-checkout .product-name-info .product-price-quantity {
  font-size: 11px; color: rgba(255,255,255,.6) !important; font-family: var(--cs-font-mono); margin: 2px 0;
}
/* Specs als EINE kompakte Zeile mit Trennern */
body.woocommerce-checkout .product-name-info dl.variation {
  display: block !important; margin: 4px 0 0 !important; line-height: 1.4;
}
body.woocommerce-checkout .product-name-info dl.variation dt,
body.woocommerce-checkout .product-name-info dl.variation dd {
  display: inline !important; margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: 0 !important;
  font-size: 11px !important; font-weight: 400 !important; color: rgba(255,255,255,.55) !important;
}
body.woocommerce-checkout .product-name-info dl.variation dt { font-weight: 600 !important; }
body.woocommerce-checkout .product-name-info dl.variation dt::after { content: " "; }
body.woocommerce-checkout .product-name-info dl.variation dd::after { content: " · "; color: rgba(255,255,255,.3) !important; }
body.woocommerce-checkout .product-name-info dl.variation dd:last-of-type::after { content: ""; }
body.woocommerce-checkout .product-name-info .product-subtotal {
  font-size: 13px; color: #fff !important; font-weight: 700; margin-top: 4px;
}

/* Specs wirklich inline: WooCommerce wrappt dd-Werte in <p> (block) */
body.woocommerce-checkout .product-name-info dl.variation dd p {
  display: inline !important; margin: 0 !important; padding: 0 !important; color: rgba(255,255,255,.55) !important; font-size: 11px !important;
}

/* 2026-05-30 (Benni): Echtes Produkt-Thumbnail als Kachel (statt generisches Icon) */
body.woocommerce-checkout .product-name-info .cs-item-thumb {
  position: absolute; left: 0; top: 2px;
  width: 44px; height: 44px; border-radius: 10px;
  background: #fff; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
body.woocommerce-checkout .product-name-info .cs-item-thumb img,
body.woocommerce-checkout .product-name-info .cs-item-thumb .cs-item-thumb-img {
  width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block;
}
/* Wenn echtes Thumbnail da ist, generisches JS-Shield ausblenden */
body.woocommerce-checkout .product-name-info .cs-item-thumb ~ .cs-item-icon,
body.woocommerce-checkout .product-name-info:has(.cs-item-thumb) .cs-item-icon { display: none !important; }

/* 2026-05-30 (Benni) — Trennstrich zwischen Produkten + Zahlungsart-Labels weiss */

/* Dezenter Trennstrich zwischen den Order-Items */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item td.product-name {
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item:last-of-type td.product-name {
  border-bottom: 0 !important;
}

/* Zahlungsart-Labels (Klarna, EPS, iDEAL, SEPA, Kauf auf Rechnung) IMMER weiss lesbar */
body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method label,
body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > label,
body.woocommerce-checkout #payment .wc_payment_method label,
body.woocommerce-checkout #payment li label {
  color: #fff !important;
}
body.woocommerce-checkout #payment label * { color: #fff !important; }

/* 2026-05-30 (Benni) — Radio NEBEN Zahlungsart-Label (statt darueber) + Beschreibung hell */
body.woocommerce-checkout #payment li.wc_payment_method {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px;
}
body.woocommerce-checkout #payment li.wc_payment_method > input[type="radio"] {
  flex: 0 0 auto; margin: 0 !important; width: 18px; height: 18px;
}
body.woocommerce-checkout #payment li.wc_payment_method > label {
  display: inline-flex !important; align-items: center; gap: 10px;
  margin: 0 !important; padding: 0 !important; flex: 1 1 auto;
}
/* Beschreibung / Bank-Auswahl (payment_box) in eigene Zeile, heller Text */
body.woocommerce-checkout #payment li.wc_payment_method > .payment_box {
  flex: 0 0 100%; margin-top: 8px;
}
body.woocommerce-checkout #payment .payment_box,
body.woocommerce-checkout #payment .payment_box p,
body.woocommerce-checkout #payment .payment_box * {
  color: rgba(255,255,255,.8) !important;
}
/* Select (Bank auswaehlen) lesbar: dunkler Text auf weissem Feld */
body.woocommerce-checkout #payment .payment_box select,
body.woocommerce-checkout #payment .payment_box input {
  color: var(--cs-navy) !important; background: #fff !important;
}