/**
 * Warenkorb-Redesign – Conversion-Optimierung
 * Alle Klassen mit sc- Prefix
 * v=20260329a
 */

/* === Custom Properties === */
.sc-cart {
  --sc-green: #97c000;
  --sc-green-dark: #7ea000;
  --sc-green-hover: #6b8a00;
  --sc-text: #333333;
  --sc-text-muted: #777777;
  --sc-border: #e0e0e0;
  --sc-bg-light: #f7f7f7;
  --sc-bg-white: #ffffff;
  --sc-radius: 6px;
  --sc-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* === Haupt-Container === */
.sc-cart {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0.5rem;
}

.sc-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sc-text);
  margin: 0 0 1.25rem;
  padding: 0;
  border: none;
}

/* === 2-Spalten Flexbox Layout (Desktop) === */
.sc-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.sc-products {
  flex: 1 1 0%;
  min-width: 0;
}

.sc-summary {
  flex: 0 0 340px;
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

/* === Produktliste === */
.sc-product-list-inner {
  margin-bottom: 1rem;
}

/* Tabellenkopf – modern, dezent */
.sc-header {
  display: flex;
  align-items: center;
  background: var(--sc-bg-light);
  border-bottom: 2px solid var(--sc-border);
  padding: 0.625rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sc-header .sc-col-image {
  flex: 0 0 90px;
}
.sc-header .sc-col-name {
  flex: 1 1 0%;
  padding-left: 0.75rem;
}
.sc-header .sc-col-price {
  flex: 0 0 100px;
  text-align: right;
}
.sc-header .sc-col-qty {
  flex: 0 0 80px;
  text-align: center;
}
.sc-header .sc-col-total {
  flex: 0 0 100px;
  text-align: right;
}
.sc-header .sc-col-actions {
  flex: 0 0 60px;
  text-align: right;
}

/* Produktzeile */
.sc-product-row {
  display: flex;
  align-items: center;
  padding: 1rem 0.75rem;
  border-bottom: 1px solid var(--sc-border);
  transition: background 0.15s;
}
.sc-product-row:hover {
  background: var(--sc-bg-light);
}

/* Produktbild */
.sc-product-image {
  flex: 0 0 90px;
}
.sc-product-image .sc-img {
  width: 80px;
  height: auto;
  max-height: 80px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid #eee;
}

/* Produktinfo (Name + Attribute) */
.sc-product-info {
  flex: 1 1 0%;
  min-width: 0;
  padding: 0 0.75rem;
}
.sc-product-name {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--sc-text);
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: 0.25rem;
}
.sc-product-name:hover {
  color: var(--sc-green-dark);
}
.sc-product-attributes {
  margin-top: 0.25rem;
}
.sc-product-attributes .sc-attr {
  display: block;
  font-size: 0.8125rem;
  color: var(--sc-text-muted);
  line-height: 1.5;
}
.sc-product-attributes .sc-attr strong {
  font-weight: 600;
  color: #555;
}

/* Einzelpreis */
.sc-product-unit-price {
  flex: 0 0 100px;
  text-align: right;
  font-size: 0.875rem;
  color: var(--sc-text-muted);
}

/* Menge */
.sc-product-qty {
  flex: 0 0 80px;
  text-align: center;
}
.sc-qty-input {
  width: 3.5rem;
  padding: 0.375rem 0.25rem;
  text-align: center;
  border: 1px solid var(--sc-border);
  border-radius: 4px;
  font-size: 0.9375rem;
  background: var(--sc-bg-white);
  -moz-appearance: textfield;
}
.sc-qty-input::-webkit-outer-spin-button,
.sc-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sc-qty-input:focus {
  outline: none;
  border-color: var(--sc-green);
  box-shadow: 0 0 0 2px rgba(151, 192, 0, 0.15);
}
.sc-qty-input[readonly] {
  background: var(--sc-bg-light);
  color: var(--sc-text-muted);
  cursor: default;
}

/* Gesamtpreis pro Produkt */
.sc-product-price {
  flex: 0 0 100px;
  text-align: right;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--sc-text);
}

/* Aktionen (Bearbeiten / Löschen) */
.sc-product-remove {
  flex: 0 0 60px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}
.sc-product-remove a,
.sc-product-remove input[type="image"] {
  opacity: 0.45;
  transition: opacity 0.15s;
}
.sc-product-remove a:hover,
.sc-product-remove input[type="image"]:hover {
  opacity: 1;
}
.sc-edit-btn {
  display: inline-flex;
  align-items: center;
  color: var(--sc-green-dark);
  font-size: 1rem;
  text-decoration: none;
}
.sc-edit-btn:hover {
  color: var(--sc-green-hover);
}

/* === Zusammenfassungs-Box (Summary) === */
.sc-summary-box {
  background: var(--sc-bg-white);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  padding: 1.25rem;
  box-shadow: var(--sc-shadow);
}
.sc-summary-heading {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.875rem;
}

/* Zusammenfassungs-Zeilen */
.sc-order-totals {
  margin-bottom: 1rem;
}
.sc-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.3125rem 0;
  font-size: 0.9375rem;
  color: var(--sc-text);
}
.sc-summary-label {
  color: var(--sc-text-muted);
}
.sc-summary-value {
  font-weight: 500;
  text-align: right;
}
.sc-summary-divider {
  border: none;
  border-top: 1px solid var(--sc-border);
  margin: 0.75rem 0;
}
.sc-summary-total {
  font-size: 1.1875rem;
  font-weight: 700;
}
.sc-summary-total .sc-summary-label {
  color: var(--sc-text);
}
.sc-summary-total .sc-summary-value {
  color: var(--sc-text);
}
.sc-summary-tax {
  font-size: 0.8125rem;
  color: var(--sc-text-muted);
  padding: 0.125rem 0;
}
.sc-summary-shipping {
  font-size: 0.875rem;
}
.sc-shipping-select {
  padding: 0.375rem 0;
}
.sc-shipping-select select {
  padding: 0.375rem;
  border: 1px solid var(--sc-border);
  border-radius: 4px;
  font-size: 0.875rem;
}
.sc-free-shipping {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f0f7d4;
  border-radius: 4px;
  font-size: 0.8125rem;
  color: var(--sc-green-dark);
}
.sc-installment {
  margin-top: 0.75rem;
}

/* === Buttons === */

/* Primär: Zur Kasse – DOMINANT */
.sc-summary-checkout {
  margin-top: 1rem;
}

/* Text-Button (ersetzte das alte input[type="image"] Gif) */
.sc-checkout-btn {
  display: block;
  width: 100%;
  padding: 0.9375rem 1.5rem;
  background: var(--sc-green);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  border: none;
  border-radius: var(--sc-radius);
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  letter-spacing: 0.02em;
  text-decoration: none;
  line-height: 1.4;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.sc-checkout-btn:hover {
  background: var(--sc-green-hover);
  color: #fff;
  box-shadow: 0 4px 12px rgba(107, 138, 0, 0.3);
  text-decoration: none;
}
.sc-checkout-btn i {
  margin-left: 0.375rem;
}

/* Mobile Sticky Checkout-Link */
a.sc-btn-checkout {
  display: block;
  padding: 0.75rem 1.25rem;
  background: var(--sc-green);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: var(--sc-radius);
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
}
a.sc-btn-checkout:hover {
  background: var(--sc-green-hover);
  color: #fff;
  text-decoration: none;
}

/* Alte Gif-Buttons im Warenkorb verstecken */
.sc-summary-checkout input[type="image"],
.sc-summary-checkout img {
  display: none;
}

/* Altes .btn.checkout Override im Warenkorb-Kontext */
.sc-cart .btn.checkout,
.sc-cart input.btn.checkout {
  background: var(--sc-green) !important;
  border-color: var(--sc-green) !important;
}
.sc-cart .btn.checkout:hover,
.sc-cart input.btn.checkout:hover {
  background: var(--sc-green-hover) !important;
  border-color: var(--sc-green-hover) !important;
  color: #fff !important;
}

/* PayPal / Express unter dem CTA */
.sc-btn-paypal {
  margin-top: 0.625rem;
  text-align: center;
}
.sc-btn-paypal .btn {
  font-size: 0.875rem;
}

/* Sekundär: Weiter einkaufen, Aktualisieren */
.sc-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
}
.sc-actions-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Sekundäre Text-Buttons (ersetzen Gif-Buttons) */
.sc-btn-continue,
.sc-btn-update {
  display: inline-block;
  padding: 0.4375rem 0.875rem;
  background: transparent;
  color: var(--sc-text-muted);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  font-size: 0.8125rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
.sc-btn-continue:hover,
.sc-btn-update:hover {
  background: var(--sc-bg-light);
  color: var(--sc-text);
  border-color: #ccc;
  text-decoration: none;
}
.sc-btn-continue i,
.sc-btn-update i {
  margin-right: 0.25rem;
}

/* Alte Gif-Buttons in Actions verstecken */
.sc-actions input[type="image"],
.sc-actions img {
  display: none;
}

/* Fallback: falls noch alte .btn Klassen durchkommen */
.sc-cart .sc-actions .btn,
.sc-cart .sc-actions a .btn,
.sc-cart .sc-actions input.btn {
  background: transparent !important;
  color: var(--sc-text-muted) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  font-size: 0.8125rem !important;
  padding: 0.4375rem 0.875rem !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.sc-cart .sc-actions .btn:hover,
.sc-cart .sc-actions a .btn:hover,
.sc-cart .sc-actions input.btn:hover {
  background: var(--sc-bg-light) !important;
  color: var(--sc-text) !important;
  border-color: #ccc !important;
}

/* Delete-Button im Warenkorb modernisieren */
.sc-product-remove input[type="image"] {
  width: 18px;
  height: 18px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
}

/* === Gutschein Toggle === */
.sc-coupon {
  margin-top: 0.5rem;
}
.sc-coupon-wrapper {
  border-top: 1px solid var(--sc-border);
}
.sc-coupon-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 0;
  border: none;
  background: transparent;
  color: var(--sc-text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  text-align: left;
}
.sc-coupon-toggle:hover {
  color: var(--sc-text);
}
.sc-coupon-arrow {
  margin-left: auto;
  transition: transform 0.25s;
  font-size: 0.75rem;
}
.sc-coupon-content {
  display: none;
  padding: 0 0 1rem;
}
.sc-coupon-open .sc-coupon-content {
  display: block;
}
.sc-coupon-open .sc-coupon-arrow {
  transform: rotate(180deg);
}
.sc-coupon-form {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin-top: 0.5rem;
}
.sc-coupon-input {
  flex: 1;
}
.sc-coupon-input input,
.sc-coupon-input .sc-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sc-border);
  border-radius: 4px;
  font-size: 0.875rem;
  box-sizing: border-box;
}
.sc-coupon-input input:focus {
  outline: none;
  border-color: var(--sc-green);
}
.sc-coupon-submit .btn {
  white-space: nowrap;
}
.sc-coupon-balance {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
.sc-coupon-redeemed {
  padding: 0.5rem 0.75rem;
  background: #f0f7d4;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

/* === Mobile Sticky Bar === */
.sc-mobile-sticky {
  display: none;
}

/* === Leerer Warenkorb === */
.sc-empty-actions {
  margin-top: 1rem;
}

/* === Merkzettel (zurückgenommen) === */
.sc-extras {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sc-border);
}

/* Merkzettel-Überschrift */
.sc-extras h2,
.sc-extras .heading-text {
  font-size: 0.875rem;
  color: var(--sc-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: none;
}

/* Merkzettel-Produkte kleiner */
.sc-extras .box2,
.sc-extras .artikelbox {
  padding: 0.5rem;
}
.sc-extras .box2 img,
.sc-extras .artikelbox img {
  max-height: 100px;
  width: auto;
  object-fit: contain;
}
.sc-extras .box2 h2,
.sc-extras .artikelbox h2 {
  font-size: 0.75rem !important;
  line-height: 1.3;
  margin: 0.25rem 0;
  color: var(--sc-text-muted);
}

/* Preise im Merkzettel zurücknehmen */
.sc-extras .price {
  font-size: 0.8125rem !important;
  color: var(--sc-text-muted) !important;
}

/* Versand/Steuer-Info im Merkzettel */
.sc-extras .taxandshippinginfo {
  font-size: 0.625rem;
  color: #bbb;
}

/* Buttons im Merkzettel nebeneinander */
.sc-extras .details {
  display: block !important;
}
.sc-extras .details .hidden-phone {
  display: inline !important;
}
.sc-extras .details img {
  opacity: 0.65;
  transition: opacity 0.15s;
}
.sc-extras .details img:hover {
  opacity: 1;
}

/* Versandkosten kompakter */
.sc-order-totals .sc-summary-shipping {
  font-size: 0.75rem;
  color: var(--sc-text-muted);
  line-height: 1.35;
  padding: 0.1875rem 0;
}

/* Versand-Hinweistexte kürzen/stylen */
.sc-shipping-select {
  padding: 0.25rem 0 0.375rem;
  font-size: 0.8125rem;
}
.sc-shipping-select select {
  width: 100%;
  padding: 0.3125rem 0.5rem;
  border: 1px solid var(--sc-border);
  border-radius: 4px;
  font-size: 0.8125rem;
  background: var(--sc-bg-white);
}

/* Lange Versand-Infotexte visuell zurücknehmen */
.sc-shipping-info {
  font-size: 0.6875rem;
  color: #999;
  line-height: 1.35;
  margin-top: 0.25rem;
  padding-top: 0.375rem;
  border-top: 1px dashed #eee;
}

/* Summary-Box Checkout Abstand */
.sc-summary-checkout {
  margin-top: 1.25rem;
  padding-top: 0.25rem;
}

/* === Express-Info === */
.sc-express-info {
  display: block;
  text-align: right;
  font-size: 0.8125rem;
  margin-top: 0.5rem;
}

/* =============================================
   RESPONSIVE – MOBILE (< 768px)
   ============================================= */
@media (max-width: 767px) {

  .sc-cart {
    padding: 0;
  }

  .sc-heading {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    padding: 0 0.5rem;
  }

  /* Mobile Sticky Bar – sichtbar */
  .sc-mobile-sticky {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--sc-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .sc-mobile-total {
    font-weight: 700;
    font-size: 1rem;
    color: var(--sc-text);
    white-space: nowrap;
  }
  .sc-mobile-sticky a.sc-btn-checkout {
    flex: 1;
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    max-width: 200px;
  }

  /* Layout 1-spaltig */
  .sc-layout {
    flex-direction: column;
    gap: 1rem;
  }

  .sc-summary {
    flex: none;
    width: 100%;
    position: static;
  }

  /* Header ausblenden */
  .sc-header {
    display: none;
  }

  /* Produktzeile als Card */
  .sc-product-row {
    flex-wrap: wrap;
    padding: 0.875rem 0.5rem;
    gap: 0.5rem;
    position: relative;
  }

  .sc-product-image {
    flex: 0 0 70px;
  }
  .sc-product-image .sc-img {
    width: 65px;
    max-height: 65px;
  }

  .sc-product-info {
    flex: 1 1 calc(100% - 90px);
    padding: 0 0 0 0.5rem;
  }
  .sc-product-name {
    font-size: 0.875rem;
  }

  /* Einzelpreis auf Mobile ausblenden */
  .sc-product-unit-price {
    display: none;
  }

  /* Menge + Preis + Löschen in einer Zeile */
  .sc-product-qty {
    flex: 0 0 auto;
  }
  .sc-product-price {
    flex: 1 1 auto;
    text-align: right;
  }
  .sc-product-remove {
    flex: 0 0 auto;
  }

  /* Aktionen */
  .sc-actions {
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem;
  }
  .sc-actions-left {
    justify-content: center;
  }

  /* Summary Box */
  .sc-summary-box {
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
    padding: 1rem 0.75rem;
  }

  /* Merkzettel */
  .sc-extras {
    padding: 0.75rem 0.5rem;
  }
}

/* =============================================
   RESPONSIVE – Tablet (768px - 991px)
   ============================================= */
@media (min-width: 768px) and (max-width: 991px) {
  .sc-summary {
    flex: 0 0 280px;
  }
  .sc-header .sc-col-price {
    flex: 0 0 80px;
  }
  .sc-product-unit-price {
    flex: 0 0 80px;
    font-size: 0.8125rem;
  }
  .sc-header .sc-col-total {
    flex: 0 0 80px;
  }
  .sc-product-price {
    flex: 0 0 80px;
  }
}