/**
 * Single-product add-to-cart layout fix.
 *
 * After an AJAX add-to-cart, WooCommerce injects a "View cart" link
 * (a.added_to_cart) right after the Add-to-cart button, inside the flex row
 * `.woocommerce-variation-add-to-cart` (display:flex; align-items:center). With
 * no wrapping it becomes a third item on the same line and collapses into the
 * orange button on narrower viewports.
 *
 * Fix: allow the row to wrap and drop the link onto its own full-width line
 * (block axis) below the qty + Add-to-cart line, styled as the theme's
 * secondary (gray) button. Enqueued only on product pages by
 * ThemeStuff\Storefront\AjaxAddToCart.
 */

.woocommerce-variation-add-to-cart {
  flex-wrap: wrap;
}

/*
 * Keep the quantity box and the Add-to-cart button together on the first line.
 * The button is normally `width: 100%` (flex-basis 100%), which — once the row
 * is allowed to wrap — would push the button below the quantity box. Resetting
 * it to `flex: 1 1 0` lets the button simply grow to fill the remaining space
 * next to the quantity box without forcing a wrap.
 */
.woocommerce-variation-add-to-cart .single_add_to_cart_button.button.alt {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

/* "View cart" link → its own full-width row, as a secondary (gray) button. */
.woocommerce-variation-add-to-cart .added_to_cart.wc-forward {
  flex: 0 0 100% !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 18px 24px !important;
  box-sizing: border-box;
  background-color: #585858;
  color: #fff;
  font-family: FoundryGridnik, tahoma, arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .028em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s;
}

.woocommerce-variation-add-to-cart .added_to_cart.wc-forward:hover {
  background-color: #6b6b6b;
  color: #fff;
}