/* Container for the table */
.price-table-wrap {
  width: 100% !important;
  margin: 1rem 0 !important;
  overflow-x: auto !important; /* Prevents horizontal scrolling */
}

.price-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #fff !important;
  min-width: 0 !important; /* Overrides the previous 620px min-width */
}

.price-table th,
.price-table td {
  text-align: left;
  padding: 12px 15px;
  border-bottom: 1px solid #eee7de;
}

.price-table thead th {
  font-weight: 600;
  color: var(--text);
  background: #faf6f0;
}

/* MOBILE STACKED VIEW */
@media screen and (max-width: 640px) {
  /* 1. Tabelle und Body als vertikale Säule erzwingen */
  .price-table, 
  .price-table tbody {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 2. Kopfzeile ausblenden */
  .price-table thead {
    display: none !important;
  }

  /* 3. Die Zeilen (Karten) untereinander stapeln */
  .price-table tr {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: 1.5rem !important;
    background: #fff;
    border: 1px solid #e9dfd5;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    overflow: hidden;
  }

  /* 4. Die Zellen (Zeilen in der Karte) als Flex-Row */
  .price-table td {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important; /* Text oben bündig */
    width: 100% !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #f8f3ee !important;
    box-sizing: border-box !important;
    text-align: right !important;
  }

  .price-table td:last-child {
    border-bottom: 0 !important;
  }

  /* 5. Labels (Links): Dürfen schrumpfen und umbrechen */
  .price-table td::before {
    content: attr(data-label) !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: left !important;
    
    /* Anti-Overflow Magie: */
    flex: 1 1 auto !important; 
    min-width: 0 !important;   
    white-space: normal !important; /* Umbruch erlauben! */
    padding-right: 15px !important;
  }
  
  /* 6. Werte (Rechts): Bleiben stabil */
  .price-table td > * {
    flex: 0 0 auto !important;
  }

  /* Preis hervorheben */
  .price-table td[data-label*="Price"],
  .price-table td[data-label*="Preu"],
  .price-table td[data-label*="Precio"] {
    font-weight: 700 !important;
    color: var(--brand) !important;
  }
}