/* Make the product details one vertical flex layout */
#productVariantForm .details-wrapper {
  display: flex;
  flex-direction: column;
}

/*
 * Flatten the wrappers between .details-wrapper
 * and the price/quantity elements.
 */
#productVariantForm .details-wrapper > .product-variant-list,
#productVariantForm
  .details-wrapper
  > .product-variant-list
  > .add-to-cart-wrapper,
#productVariantForm
  .details-wrapper
  > .product-variant-list
  > .add-to-cart-wrapper
  > .price-quantity-start-wrapper,
#productVariantForm
  .details-wrapper
  > .product-variant-list
  > .add-to-cart-wrapper
  > .price-quantity-start-wrapper
  > .columns {
  display: contents;
}

/* Product content and pricing remain at the default order: 0 */

/* Put specifications immediately after the pricing */
#productVariantForm .details-wrapper > .productspec-box {
  order: 20;
  width: 100%;
  margin: 1rem 0;
}

/* Quantity comes after specifications */
#productVariantForm .price-quantity-start-wrapper .quantity-wrapper {
  order: 30;
  width: 100%;
}

/* Add-to-cart button remains below the quantity */
#productVariantForm .add-to-cart-buttons-wrapper {
  order: 40;
  width: 100%;
}

/* Keep the product tags below the add-to-cart button */
#productVariantForm .details-wrapper > .productspec-box + .block {
  order: 50;
  width: 100%;
}

/* Prevent Bulma's column flex rules from stretching these vertically */
#productVariantForm .price-quantity-start-wrapper .price,
#productVariantForm .price-quantity-start-wrapper .quantity-wrapper,
#productVariantForm .add-to-cart-buttons-wrapper,
#productVariantForm .productspec-box {
  flex: 0 0 auto;
}