/* Product page — tablet corrections (601px to 1100px).
 *
 * Two problems, both of them mobile styling applied to a wide canvas:
 *
 * 1. jspd-pdp.css collapses the V&A facts grid to one pair per row between 601px
 *    and 900px. A portrait tablet (768) falls inside that band and a landscape one
 *    (1024) does not, which is the whole of the difference between the two. At 768
 *    the value column computed to 637px with about three quarters of every row
 *    empty, and the block ran 205px tall instead of 120px. The approved spec is two
 *    pairs per row, collapsing on mobile; 768 is not mobile, so the threshold is
 *    simply set too high.
 *
 * 2. The quantity control and the add-to-basket button stretched to the full column
 *    width (738px at 768, 994px at 1024) against 159px and 220px on desktop.
 *
 * Nothing above 1100px or below 601px is touched: the approved desktop layout and
 * the mobile layout are both left exactly as they are.
 */

/* ---- 1. facts grid keeps two pairs per row across tablet ---- */
@media (min-width: 601px) and (max-width: 900px) {
  .jspd-pdp .jspd-vaspec {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  }
}

/* ---- 2. controls at a sensible width across the whole tablet range ---- */
@media (min-width: 601px) and (max-width: 1100px) {
  .jspd-pdp form.cart .quantity,
  .jspd-pdp .quantity {
    max-width: 168px;
  }
  .jspd-pdp form.cart .single_add_to_cart_button,
  .jspd-pdp .single_add_to_cart_button {
    max-width: 300px;
  }
}