/* File: astrachildtheme/a_mod/page_cart/all-products-cart.css */
/* Version: 0.6 */
/* Beschreibung: Globale Cart/Checkout-Styles für Produktinfos und Variationslisten. */

/* ============================= */
/* Styling für cart / checkout, für alle Produkte */
/* Font- und Farbvariablen werden aus mini-cart datei bereitgestellt */
/* ============================= */

/* "Info:" vor <next rabatttext> ausblenden. */
.woocommerce-cart .variation dt.variation-Info,
.woocommerce-mini-cart .variation dt.variation-Info {
  display: none !important;
}

/* ============================= */
/* td.product-name als Flexbox-Container für die Hauptblöcke */
/* ============================= */
td.product-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Sicherstellen, dass alle direkten Flex-Items links beginnen */
  /* Resetting any problematic grid properties from previous attempts */
  grid-template-columns: unset;
  column-gap: unset;
  row-gap: unset;
}

/* ============================= */
/* Produkttitel (direktes Flex-Item) */
/* ============================= */
td.product-name > a {
  order: 1; /* ERSTE Position */
  text-align: left;
}

/* ============================= */
/* Kurzbeschreibung: Gibt es im normalen cart standardmäßig nicht, aber falls es sie gibt, dann so: */
/* ============================= */


/* ============================= */
/* <dl.variation> als eigenständiges Grid */
/* ============================= */
dl.variation {
  display: grid;
  grid-template-columns: max-content 1fr; /* Label so breit wie nötig, Value nimmt Rest */
  column-gap: 0.5em;
  row-gap: 0.25em;
  order: 3; /* DRITTE Position (nach Produkteinheit) */

  width: 100%; /* Wichtig, damit das Grid die verfügbare Breite nutzt */
  max-width: 100%;
  align-self: flex-start; /* Stellt sicher, dass das Grid linksbündig ist */

  /* Aggressive Resets für dl.variation, um sicherzustellen, dass keine externen Stile stören */
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================= */
/* Produkteinheit (SEPARATES FLEX-ITEM) */
/* ============================= */
.wc-gzd-cart-info.units-info {
  order: 2; /* ZWEITE Position (nach Produkttitel, vor dl.variation) */
  display: block; /* Stellt sicher, dass es ein Block-Element ist */
  color: var(--produkteinheit-color);
  font-size: var(--produkteinheit-font-size) !important;
  font-size: 0.98em !important;

  margin-top: 0.75em; /* Abstand zum Titel darüber */
  margin-bottom: 0.55em !important;
  text-align: left;
  white-space: nowrap; /* Verhindert Umbruch */

  align-self: flex-start; /* Sicherstellen der linksbündigen Ausrichtung im Flex-Container */

  /* Resets */
  padding: 0 !important;
}

/* ============================= */
/* Styling und explizite Positionierung für Label (dt) und Value (dd) innerhalb des DL-Grids */
/* ============================= */
dl.variation dt,
dl.variation dd {
  /* Allgemeine Resets für alle dt und dd */
  margin: 0 !important;
  padding: 0 !important;
  display: block !important; /* Sicherstellen, dass sie sich als Block-Elemente im Grid verhalten */
  float: none !important;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
}

dl.variation dt {
  grid-column: 1; /* Label in erster Spalte */
  text-align: right;
  justify-self: end;
  white-space: nowrap; /* Wichtig: Verhindert Umbruch des Labels */
}

dl.variation dd {
  grid-column: 2; /* Value in zweiter Spalte */
  text-align: left;
  justify-self: start;
  white-space: nowrap; /* Wichtig: Verhindert Umbruch des Values */
}

dl.variation dd p {
  display: inline; /* Sicherstellen, dass Absätze innerhalb von dd inline sind */
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================= */
/* Reihenfolge der Grid-Elemente innerhalb von dl.variation */
/* ============================= */

/* 1. Preis-Zeile */
/* dt.variation-PreisStck, dt.variation-Preism { order: 10; color: var(--label-color); } */
dd.variation-PreisStck, dd.variation-Preism {
  order: 11; color: var(--piece-price-value-color);
}

/* 2. Info-Zeile */
/* dt.variation-Info { order: 20; color: var(--label-color); } */
dd.variation-Info {
  order: 21; color: var(--info-value-color);
}

/* 3. Attributblock (Meterware) - Abstand */
dl.variation::after {
  order: 30; /* Nach Info-Zeile und vor Attributen */
  content: "";
  display: block; /* Muss Block sein, um als Grid-Item zu funktionieren */
  grid-column: 1 / -1; /* Nimmt die volle Breite ein */
  height: 0.75em;
}

/* 4. Form-Zeile */
/* dt.variation-Form { order: 40; color: var(--attribute-label-color); } */
dd.variation-Form {
  order: 41; color: var(--attribute-value-color);
}

/* 5. Höhe-Zeile */
/* dt.variation-Hhe { order: 50; color: var(--attribute-label-color); } */
dd.variation-Hhe {
  order: 51; color: var(--attribute-value-color);
}

/* 6. Design-Zeile */
/* dt.variation-Design { order: 60; color: var(--attribute-label-color); } */
dd.variation-Design {
  order: 61; color: var(--attribute-value-color);
}


/* ============================= */
/* Mobile Ansicht Anpassungen */
/* ============================= */
@media (max-width: 768px) {
  td[data-title="Produkt"]::before {
    text-align: left !important;
    display: none !important;
  }

  td[data-title="Produkt"] > a {
    display: block;
    text-align: left;
    margin-left: 0;
  }

  td.product-name {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .wc-gzd-cart-info.units-info {
    order: 2 !important; /* Behält die Position nach Titel, vor DL */
    text-align: left !important;
    align-self: flex-start !important;
  }

  /* WICHTIG: Hier ändern wir das Grid für mobile Ansicht */
  dl.variation {
    grid-template-columns: max-content 1fr !important; /* ZWEI Spalten auch mobil */
    row-gap: 0.1em !important; /* Weniger Abstand */
  }

  dl.variation dt, dl.variation dd {
    /* Behalten ihre Grid-Spalten bei */
    grid-column: unset !important; /* Entfernt die explizite 1-Spalten-Zuweisung */
    text-align: unset !important; /* Lässt Textausrichtung von den Hauptregeln bestimmen */
    justify-self: unset !important; /* Lässt Ausrichtung von den Hauptregeln bestimmen */
    white-space: nowrap !important; /* Wichtig: Verhindert Umbruch */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Sicherstellen, dass dt und dd ihre richtigen Spalten erhalten */
  dl.variation dt {
    grid-column: 1 !important;
    text-align: right !important;
    justify-self: end !important;
  }

  dl.variation dd {
    grid-column: 2 !important;
    text-align: left !important;
    justify-self: start !important;
    margin-top: 0 !important; /* Kein zusätzlicher Margin, wenn sie nebeneinander sind */
  }

  dl.variation::after {
    height: 0.5em !important;
  }
}