/**
 * LHARI single-product layout refinements.
 *
 * Scope is deliberately limited to the existing WooCommerce product surface.
 */

/* A purchase panel taller than the viewport must not follow the reader over
 * the story and related products. Keep it in the normal document flow. */
body.norbu-commerce-surface.single-product div.product > .summary.entry-summary {
  position: static !important;
  top: auto !important;
  align-self: start;
}

/* WooCommerce clearfix pseudo-elements become unintended grid items when the
 * existing form and product list are converted to CSS Grid. Remove only those
 * generated boxes on single-product pages. */
body.norbu-commerce-surface.single-product div.product form.cart::before,
body.norbu-commerce-surface.single-product div.product form.cart::after,
body.norbu-commerce-surface.single-product div.product > .related.products > ul.products::before,
body.norbu-commerce-surface.single-product div.product > .related.products > ul.products::after {
  content: none !important;
  display: none !important;
}

/* Keep quantity and the primary action together, with Wishlist as a clear
 * secondary row. This also prevents the empty first grid cell seen on desktop. */
@media (min-width: 761px) {
  body.norbu-commerce-surface.single-product div.product form.cart {
    grid-template-columns: minmax(104px, 128px) minmax(0, 1fr) !important;
    grid-auto-flow: row;
    align-items: stretch;
  }

  body.norbu-commerce-surface.single-product div.product form.cart > .quantity {
    grid-column: 1;
    grid-row: 1;
    width: auto !important;
    margin: 0 !important;
    float: none !important;
  }

  body.norbu-commerce-surface.single-product div.product form.cart > .single_add_to_cart_button {
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }

  body.norbu-commerce-surface.single-product div.product form.cart > .tinvwl-after-add-to-cart {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Related products belong to the full-width reading sequence, not the image
 * column. Four products form one balanced row on desktop, then 2 / 1 by the
 * already accepted tablet and mobile breakpoints. */
body.norbu-commerce-surface.single-product div.product > .related.products {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

body.norbu-commerce-surface.single-product div.product > .related.products > ul.products {
  align-items: stretch !important;
}

body.norbu-commerce-surface.single-product div.product > .related.products > ul.products > li.product {
  min-width: 0;
  height: 100%;
  display: flex !important;
  flex-direction: column;
}

body.norbu-commerce-surface.single-product div.product > .related.products > ul.products > li.product > .woocommerce-LoopProduct-link {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

body.norbu-commerce-surface.single-product div.product > .related.products > ul.products > li.product .price {
  margin-top: auto !important;
}

body.norbu-commerce-surface.single-product div.product > .related.products > ul.products > li.product > .button {
  align-self: flex-start;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1.2 !important;
}

@media (min-width: 1025px) {
  body.norbu-commerce-surface.single-product div.product > .related.products > ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  body.norbu-commerce-surface.single-product div.product > .related.products > ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.norbu-commerce-surface.single-product div.product form.cart > .quantity,
  body.norbu-commerce-surface.single-product div.product form.cart > .single_add_to_cart_button,
  body.norbu-commerce-surface.single-product div.product form.cart > .tinvwl-after-add-to-cart {
    grid-column: 1 !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    float: none !important;
  }

  body.norbu-commerce-surface.single-product div.product > .related.products > ul.products {
    grid-template-columns: 1fr !important;
  }
}