/* Keep a configurable package selector beside its live order total on desktop. */
@media (min-width: 621px) {
  .single-product div.product form.variations_form.cart {
    align-items: center !important;
    column-gap: 16px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.88fr) minmax(210px, 1.12fr) !important;
    grid-template-rows: repeat(4, auto) !important;
    row-gap: 12px !important;
  }

  .single-product div.product form.variations_form.cart > table.variations {
    align-self: center !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .single-product div.product form.variations_form.cart > table.variations td.value {
    padding: 0 !important;
  }

  .single-product div.product form.variations_form.cart > table.variations select {
    height: 52px !important;
    min-height: 52px !important;
    padding-left: 14px !important;
    padding-right: 32px !important;
    width: 100% !important;
  }

  /* Promote nested WooCommerce controls into the form grid without changing its behavior. */
  .single-product div.product form.variations_form.cart > .single_variation_wrap,
  .single-product div.product form.variations_form.cart .variations_button {
    display: contents !important;
  }

  .single-product div.product form.variations_form.cart .timer-order-total {
    align-self: center !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .single-product div.product form.variations_form.cart .quantity {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    justify-self: start !important;
    margin: 0 !important;
    width: auto !important;
  }

  .single-product div.product form.variations_form.cart .single_add_to_cart_button {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  .single-product div.product form.variations_form.cart .ot-buy-now-button {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }

  /* The order total is the visible price source, so do not reserve space for WooCommerce's duplicate price. */
  .single-product div.product form.variations_form.cart .woocommerce-variation.single_variation,
  .single-product div.product form.variations_form.cart .reset_variations {
    display: none !important;
  }
}

/* Keep related accessories together instead of leaving the third card on a new row. */
@media (min-width: 961px) {
  body.single-product .related.products ul.products {
    display: grid !important;
    gap: 24px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.single-product .related.products ul.products::before,
  body.single-product .related.products ul.products::after {
    content: none !important;
    display: none !important;
  }

  body.single-product .related.products ul.products > li.product {
    clear: none !important;
    float: none !important;
    margin: 0 !important;
    width: auto !important;
  }
}

@media (min-width: 621px) and (max-width: 960px) {
  body.single-product .related.products ul.products {
    display: grid !important;
    gap: 18px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.single-product .related.products ul.products::before,
  body.single-product .related.products ul.products::after {
    content: none !important;
    display: none !important;
  }

  body.single-product .related.products ul.products > li.product {
    clear: none !important;
    float: none !important;
    margin: 0 !important;
    width: auto !important;
  }
}

/* Align the overview scene with the gallery and remove the in-between gutters. */
@media (min-width: 961px) {
  /* Keep the full datasheet aligned with the wider product shell on large displays. */
  body.single-product .ot-datasheet-shell {
    max-width: none !important;
    width: calc(100% - 32px) !important;
  }

  body.single-product div.product .woocommerce-product-gallery {
    box-sizing: content-box !important;
    padding-bottom: 12px !important;
  }

  body.single-product .ot-datasheet-intro--scene {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }
}