/* ===========================
   WooCommerce Warenkorb Styling
   =========================== */

/* Tabellenlayout */
.woocommerce-cart-form table.shop_table{
  width: 100% !important;
  table-layout: auto;
}

/* -------- Desktop -------- */
@media (min-width: 769px) {


/* Desktop: Responsive-Stacking deaktivieren (damit alles unter den Überschriften sitzt) */
.woocommerce-cart-form table.shop_table,
.woocommerce-cart-form table.shop_table.shop_table_responsive {
  table-layout: fixed !important;
  width: 100% !important;
}

.woocommerce-cart-form table.shop_table.shop_table_responsive thead {
  display: table-header-group !important;
}

.woocommerce-cart-form table.shop_table.shop_table_responsive tr {
  display: table-row !important;
}

.woocommerce-cart-form table.shop_table.shop_table_responsive th,
.woocommerce-cart-form table.shop_table.shop_table_responsive td {
  display: table-cell !important;
  float: none !important;
  vertical-align: middle;
}

/* Falls WooCommerce/Theme die mobilen Labels per ::before einblendet */
.woocommerce-cart-form table.shop_table.shop_table_responsive td::before {
  display: none !important;
}




  /* Spaltenbreiten */
/* Spaltenbreiten (Desktop) – mehr Platz für Produkt */
.woocommerce-cart-form table.shop_table th.product-remove,
.woocommerce-cart-form table.shop_table td.product-remove { width: 4%; }

.woocommerce-cart-form table.shop_table th.product-thumbnail,
.woocommerce-cart-form table.shop_table td.product-thumbnail { width: 6%; }

.woocommerce-cart-form table.shop_table th.product-name,
.woocommerce-cart-form table.shop_table td.product-name { width: 60%; }

.woocommerce-cart-form table.shop_table th.product-price,
.woocommerce-cart-form table.shop_table td.product-price { width: 10%; }

.woocommerce-cart-form table.shop_table th.product-quantity,
.woocommerce-cart-form table.shop_table td.product-quantity { width: 10%; }

.woocommerce-cart-form table.shop_table th.product-subtotal,
.woocommerce-cart-form table.shop_table td.product-subtotal { width: 10%; }

/* Produktname: Umbruch erlauben + Layout stabil halten */
.woocommerce-cart-form table.shop_table td.product-name {
  overflow: hidden;
}



  /* Mengenfeld rechtsbündig */
  .woocommerce-cart-form table.shop_table td.product-quantity .quantity {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    width: auto;
  }

  /* Inputfeld */
  .woocommerce-cart-form .quantity input.qty {
    width: 80px;
    text-align: center;
    padding: 6px 4px;
    font-size: 14px;
  }

  /* Plus/Minus Buttons (Warenkorb) */
  .woocommerce-cart-form .quantity .mm-plus,
  .woocommerce-cart-form .quantity .mm-minus {
    background: #0073e6;
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background 0.3s ease;
  }

  .woocommerce-cart-form .quantity .mm-plus:hover,
  .woocommerce-cart-form .quantity .mm-minus:hover {
    background: #005bb5;
  }

  /* Zwischensumme schön rechts */
  .woocommerce-cart-form table.shop_table td.product-subtotal{
    text-align: right !important;
  }
  .woocommerce-cart-form table.shop_table td.product-subtotal .amount{
    display: inline-block;
    min-width: 90px;
    text-align: right;
  }

  /* Hinweis rechts (Desktop) */
  .woocommerce-cart-form .mm-max-hint,
  .woocommerce-cart-form .mm-max-reached{
    text-align: right;
  }
  
  /* Produktname: Umbruch erlauben */
.woocommerce-cart-form table.shop_table td.product-name a {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}
}



/* ===== Hinweis "Maximal verfügbar" (global) ===== */
.woocommerce-cart-form .mm-max-hint{
  margin-top: 6px;
  font-size: 12px;
  opacity: .75;
}
.woocommerce-cart-form .mm-max-reached{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
}

/* Desktop: Tabelle intakt lassen */
@media (min-width: 769px) {
  .woocommerce-cart-form .woocommerce-cart-form__cart-item{
    display: table-row;
    margin-bottom: 0;
  }
}

/* Mobil: wenn Sie dort "Karten-Optik" wollten */
@media (max-width: 768px) {
  .woocommerce-cart-form .woocommerce-cart-form__cart-item{
    display: block;
    margin-bottom: 10px;
  }
}


/* ===========================
   Warenkorb Mobil: Karten-Layout (2 Zeilen, nichts überlappt)
   =========================== */
@media (max-width: 768px) {

  /* Tabelle neutralisieren */
  .woocommerce-cart-form table.shop_table,
  .woocommerce-cart-form table.shop_table.shop_table_responsive{
    border: 0 !important;
  }

  /* Jede Position als Karte */
  .woocommerce-cart-form table.shop_table.shop_table_responsive tr.woocommerce-cart-form__cart-item{
    display: grid !important;
    grid-template-columns: 72px 1fr auto auto;  /* Bild | Text | Menge | Zwischensumme/Entfernen */
    grid-template-areas:
      "thumb name name remove"
      "thumb preis menge zwischensumme";
    gap: 10px 12px;
    padding: 12px !important;
    margin: 0 0 12px 0 !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    border-radius: 10px;
    background: #fff;
    align-items: center;
  }

  /* Zellen im Kartenlayout */
  .woocommerce-cart-form table.shop_table.shop_table_responsive tr.woocommerce-cart-form__cart-item td{
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    min-width: 0; /* wichtig gegen „Buchstaben-Spalte“ */
  }

  /* Mobile Labels (Produkt:, Preis:, ...) ausblenden */
  .woocommerce-cart-form table.shop_table.shop_table_responsive td::before{
    display: none !important;
  }

  /* Bereiche zuweisen */
  .woocommerce-cart-form td.product-thumbnail{ grid-area: thumb; }
  .woocommerce-cart-form td.product-name{      grid-area: name; }
  .woocommerce-cart-form td.product-remove{    grid-area: remove; }
  .woocommerce-cart-form td.product-price{     grid-area: preis; }
  .woocommerce-cart-form td.product-quantity{  grid-area: menge; }
  .woocommerce-cart-form td.product-subtotal{  grid-area: zwischensumme; }

  /* Thumbnail */
  .woocommerce-cart-form td.product-thumbnail img{
    width: 72px !important;
    height: 72px !important;
    object-fit: contain;
    margin: 0 !important;
    display: block;
  }

  /* Entfernen oben rechts */
  .woocommerce-cart-form td.product-remove{
    text-align: right !important;
  }
  .woocommerce-cart-form td.product-remove a.remove{
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
  }

  /* Produktname: NICHT „anywhere“, sonst bricht er Buchstabenweise */
  .woocommerce-cart-form td.product-name a{
    display: block;
    white-space: normal !important;
    overflow-wrap: break-word;   /* statt anywhere */
    word-break: normal;          /* statt break-all */
    hyphens: auto;
    line-height: 1.35;
  }

  /* Preis links unten */
  .woocommerce-cart-form td.product-price{
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* Menge mittig unten */
  .woocommerce-cart-form td.product-quantity{
    text-align: center !important;
  }
  .woocommerce-cart-form td.product-quantity .quantity{
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center;
    gap: 6px;
  }
  .woocommerce-cart-form td.product-quantity input.qty{
    width: 55px;
  }

  /* Zwischensumme rechts unten */
  .woocommerce-cart-form td.product-subtotal{
    text-align: right !important;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Hinweise (max verfügbar) */
  .woocommerce-cart-form .mm-max-hint,
  .woocommerce-cart-form .mm-max-reached{
    text-align: left !important;
  }

  /* Update-Button etwas Luft */
  .woocommerce-cart-form .actions{
    padding-top: 10px !important;
  }
}