/* Same threshold as the homepage's New Arrivals rail
   (automania-home-responsive.css) and the shop archive grid — the "3
   cards + a peek" formula (base rule) produces cards too narrow for the
   shared card component's full-size add-to-cart button between roughly
   992px and 1199px (confirmed live: price + button no longer fit
   side-by-side in the purchase row at 1100px, a horizontal overflow
   inside the card that's easy to miss since it's narrower than the row
   itself). 2 cards instead of shrinking the button, matching how the
   shop archive already handles this exact squeeze. */
@media (max-width: 1199px) {
  .related.products ul.products {
    grid-auto-columns: calc(50% - 12px);
  }
}

@media (max-width: 991px) {
  /* minmax(0, 1fr), not a plain 1fr: a bare 1fr track can't shrink below its
     widest content, and the gallery slider holds very wide strips, so on
     phones the column grew to ~381px inside a 375px screen — the gallery,
     summary and page ran 20px past the right edge (the wishlist link, SKU
     box and thumbnails were cut off). The desktop 2-column rule above
     already uses minmax(0, ...) for the same reason. */
  div.product {
    gap: 40px;
    grid-template-columns: minmax(0, 1fr);
    padding: 0 40px;
  }

  /* The gallery/summary explicit grid-column: 1 / grid-column: 2 from
     the desktop 2-column layout (product.css) were never reset here —
     div.product above only redeclares ONE column track, but with the
     children still explicitly assigned to columns 1 and 2, the browser
     just creates an implicit auto-sized 2nd column to honor that
     placement instead of truly stacking them. Confirmed live: at 900px
     wide the summary column was crushed to 131px (gallery took a fixed
     352px), with price/cart/etc. squeezed into a near-illegible sliver
     — this never actually stacked at any width down to mobile. */
  div.product > .woocommerce-product-gallery,
  div.product > .summary.entry-summary {
    grid-column: 1;
  }

  /* Once gallery/summary/related-products/etc. are stacked as single-
     column grid rows (immediately above), div.product's own "gap: 40px"
     already spaces every row consistently — the desktop margin-bottom:
     80px on gallery/summary (product.css, needed there since desktop's
     2-column layout doesn't put them in separate grid rows) was stacking
     on top of that same row-gap here, confirmed live: 40px gap + 40px
     margin = 80px between summary and Related Products on a 375px
     phone, double what was intended. */
  div.product > .woocommerce-product-gallery,
  div.product > .summary.entry-summary {
    margin-bottom: 0 !important;
  }

  /* Plain ".woocommerce-breadcrumb" (1 class) never actually won against
     the base rule's ".woocommerce .woocommerce-breadcrumb" (2 classes,
     product.css) regardless of viewport width — confirmed live, still
     60px at 392px wide. Same specificity as the base rule fixes it. */
  .woocommerce .woocommerce-breadcrumb {
    padding: 0 40px;
  }

  .am-products .am-fluid {
    padding-left: 40px;
    padding-right: 40px;
  }

  .summary.entry-summary > .product_title {
    font-size: var(--am-h4-size);
    line-height: var(--am-h4-line-height);
  }
}

@media (max-width: 767px) {
  .related.products ul.products {
    grid-auto-columns: 86%;
  }

  div.product {
    padding: 0 20px;
  }

  .woocommerce .woocommerce-breadcrumb {
    padding: 0 20px;
  }

  .am-products .am-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }

  .summary.entry-summary {
    grid-template-areas:
      "stock wishlist"
      "title title"
      "meta meta"
      "desc desc"
      "price price"
      "cart cart";
    row-gap: 16px;
  }

  .summary.entry-summary > .product_title {
    font-size: var(--am-h5-size);
    line-height: var(--am-h5-line-height);
  }

  .summary.entry-summary > form.cart {
    justify-self: stretch;
  }

  .summary.entry-summary > form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
  }
}