/* Keep the existing five price columns; put all composition choices inside the name cell. */
[data-keramzit-config] td {
  vertical-align: middle;
}

[data-keramzit-config] .concrete-product {
  display: grid;
  gap: 10px;
}

[data-keramzit-config] .price-name-link {
  margin-top: 0;
  justify-self: start;
}

[data-keramzit-config] .concrete-controls {
  width: 100%;
  max-width: 310px;
}

[data-keramzit-config] .concrete-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-keramzit-config] .concrete-option {
  min-width: 0;
  width: auto;
}

[data-keramzit-config] .concrete-option select {
  min-width: 0;
  width: 76px;
}

[data-keramzit-config] select[data-concrete-property="density"] {
  width: 82px;
}

[data-keramzit-config] select[data-concrete-property="mobility"] {
  width: 62px;
}

[data-keramzit-config] select[data-concrete-property="waterproof"] {
  width: 68px;
}


/* Fixed compositions on the individual expanded-clay concrete product pages. */
.keramzit-product-variants {
  min-width: 0;
}

.keramzit-product-variants td:first-child {
  min-width: 0;
}

.keramzit-product-variants .pmd-field {
  width: 100%;
  max-width: 260px;
  margin-top: 10px;
}

.keramzit-config-link {
  justify-self: start;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

@media (min-width: 761px) {
  .keramzit-product-variants th:nth-child(2),
  .keramzit-product-variants td:nth-child(2) {
    width: 130px;
  }

  .keramzit-product-variants th:nth-child(3),
  .keramzit-product-variants td:nth-child(3) {
    width: 166px;
  }
}

@media (max-width: 760px) {
  .keramzit-config-link {
    justify-self: stretch;
    justify-content: center;
  }
}