.michels-shape {
  --shape-green: var(--primary, #236c3a);
  --shape-ink: var(--greenbold, #153122);
  box-sizing: border-box;
  flex: 0 0 100%;
  grid-column: 1 / -1;
  margin: 0 0 18px;
  padding: 20px;
  border: 1px solid #d5e4d8;
  border-radius: 14px;
  background: var(--primary-pastel, #f5fff8);
  color: var(--shape-ink);
  text-align: left;
}

.michels-shape * {
  box-sizing: border-box;
}

.michels-shape label {
  display: block;
  margin-bottom: 12px;
  color: var(--shape-ink);
  font-weight: 700;
  font-size: 16px;
}

.michels-shape__required {
  color: var(--shape-green);
}

.michels-shape .michels-shape__field input {
  display: block;
  width: 82px;
  height: 59px;
  min-height: 67px;
  margin: 0 0 10px;
  padding: 8px;
  border: 2px solid #6b8773 !important;
  border-radius: 12px;
  background: #fff;
  color: var(--shape-ink);
  font: inherit;
  font-size: 39px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  box-shadow: none;
}

.michels-shape input::placeholder {
  color: #889b8e;
  opacity: 0.2;
}

.michels-shape .michels-shape__field input:focus {
  outline: 3px solid var(--shape-green);
  outline-offset: 3px;
  border-color: var(--shape-green);
}

.michels-shape .michels-shape__field input[aria-invalid="true"] {
  border-color: #b22b1d;
}

.michels-shape small {
  display: block;
  color: #496451;
  font-size: 13px;
  line-height: 1.5;
}

.michels-shape__error {
  display: block;
  color: #a12618;
  font-size: 13px;
  line-height: 1.4;
}

.michels-shape__error:not(:empty) {
  margin-top: 6px;
}

/* Stack the complete purchase form only on products using the shape selector. */
body.michels-pizza-shape-active div.product form.cart,
body.michels-pizza-shape-active div.product form.card,
body.michels-pizza-shape-active div.product .single_variation_wrap,
body.michels-pizza-shape-active div.product .woocommerce-variation-add-to-cart {
  flex-wrap: wrap !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
body.michels-pizza-shape-active div.product form.cart:before {
  display: none;
}

body.michels-pizza-shape-active .michels-shape,
body.michels-pizza-shape-active .michels-shape__actions {
  max-width: 100%;
  min-width: 0;
}

.woocommerce .michels-shape__actions {
  display: flex;
  flex: 0 0 100%;
  grid-column: 1 / -1;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  clear: both;
}

.woocommerce .michels-shape__actions .quantity,
.woocommerce .michels-shape__actions .single_add_to_cart_button {
  float: none;
  margin: 0;
}