.msp-addons {
  margin: 0 0 1em;
  width: 100%;
}

.msp-addon {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 0;
}

.msp-addon__label {
  flex: 1 1 40%;
  font-weight: 600;
}

.msp-addon__variation,
.msp-addon__attribute {
  align-self: start;
}

.msp-addon__amount {
  width: 5em;
}

.msp-addon__price-prefix {
  margin-right: 0.25em;
}

.msp-addon--oos {
  opacity: 0.6;
}

/* Nested addon lines in the cart, mini-cart and checkout. */
.woocommerce-cart-form .variation dt,
.woocommerce-mini-cart .variation dt,
.woocommerce-checkout-review-order-table .variation dt {
  font-weight: normal;
}

.msp-addon__variation-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 40%;
  gap: 4px;
}

.msp-addon__fixed {
  white-space: nowrap;
}

.msp-addon__price--hidden {
  display: none;
}

.msp-grand-total {
  margin-top: 10px;
  font-size: 1.05em;
  font-weight: 600;
}

.msp-grand-total__label {
  margin-right: 0.3em;
}

.price.msp-price-hidden {
  display: none;
}

/* Generic fields (checkbox, radio, dropdown, color, date, time, number, toggle). */
.msp-addon--field .msp-field {
  flex: 1 1 100%;
}

.msp-field__label {
  font-weight: 600;
}

.msp-field__description {
  margin: 2px 0 6px;
  font-size: 0.9em;
  opacity: 0.8;
}

.msp-field__control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.msp-addon--checkbox .msp-field__control,
.msp-addon--radio .msp-field__control {
  flex-direction: column;
  align-items: flex-start;
}

.msp-opt-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.msp-opt-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
}

.msp-toggle {
  display: inline-flex;
  gap: 16px;
}

.msp-toggle__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.msp-color {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.msp-datetime {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.msp-field__number {
  width: 8em;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
  color: var(--primary);
}

.msp-opt-item.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}