.product {
  padding-block-start: clamp(1.5rem, 4vw, 3.5rem);
}

.product__overview {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.product__region { min-inline-size: 0; }

.product__region--summary {
  position: sticky;
  inset-block-start: 8rem;
}

.product-purchase-form {
  display: grid;
  gap: clamp(1.1rem, 2.5vw, 1.6rem);
}

.product-identity + .product-sku { margin-block-start: -.7rem; }

.product-purchase-form:has(> .product-quantity) {
  grid-template-columns: 5.5rem minmax(0, 1fr);
  grid-auto-flow: row dense;
  column-gap: .75rem;
}

.product-purchase-form:has(> .product-quantity) > * {
  grid-column: 1 / -1;
}

.product-purchase-form:has(> .product-quantity) > .product-quantity {
  grid-column: 1;
  align-self: end;
}

.product-purchase-form:has(> .product-quantity) > .product-purchase {
  grid-column: 2;
}

.product__region--details {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-block-start: clamp(3.5rem, 8vw, 7rem);
}

.product__region--details > .product-description { grid-column: span 7; }
.product__region--details > .product-features { grid-column: span 5; }
.product__region--details > .product-stock-locations { grid-column: 1 / -1; }
.product__region--details:not(:has(.product-description)) > .product-features,
.product__region--details:not(:has(.product-features)) > .product-description { grid-column: 1 / -1; }

@media (max-width: 48rem) {
  .product { padding-block-start: 1.5rem; }
  .product__overview { grid-template-columns: 1fr; gap: 2rem; }
  .product__region--summary { position: static; }
  .product-purchase-form:has(> .product-quantity) {
    grid-template-columns: 5.25rem minmax(0, 1fr);
    column-gap: .6rem;
  }
  .product__region--details { grid-template-columns: 1fr; margin-block-start: 3rem; }
  .product__region--details > .product-description,
  .product__region--details > .product-features,
  .product__region--details > .product-stock-locations { grid-column: 1; }
}