/*
 * Single product page (templates/single-product.html).
 * Mobile first: the flat line-art icons carry no extra detail at full width,
 * so on phones the gallery shrinks to a thumbnail beside the title and price,
 * the breadcrumb goes away, and the whole buy zone (name, price, add to cart,
 * description) lands in the first screen.
 */

@media (max-width: 781px) {

	.mt-product-page .wp-block-breadcrumbs,
	.mt-product-page .woocommerce-breadcrumb {
		display: none;
	}

	/* Re-grid the stacked columns: icon | title+price, then full-width rows. */
	.mt-product-page > .wp-block-columns {
		display: grid;
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 0 16px;
		align-items: center;
	}

	.mt-product-page > .wp-block-columns > .wp-block-column:first-child {
		grid-column: 1;
		grid-row: 1 / 3;
		align-self: center;
	}

	/* Explode the summary column so its blocks become grid items. */
	.mt-product-page > .wp-block-columns > .wp-block-column:last-child {
		display: contents;
	}

	.mt-product-page .wp-block-post-title {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
		margin: 0;
		font-size: 1.75rem;
		line-height: 1.15;
	}

	.mt-product-page .wp-block-woocommerce-product-price {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		margin: 6px 0 0;
	}

	.mt-product-page .wp-block-woocommerce-add-to-cart-form {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: 16px;
	}

	.mt-product-page .wp-block-post-content {
		grid-column: 1 / -1;
		grid-row: 4;
		margin-top: 6px;
	}

	.mt-product-page .wp-block-woocommerce-product-image-gallery {
		max-width: 104px;
		margin: 0;
	}

	/* Centered pill with a comfortable tap target. Centered via auto margins on
	   the button itself (not flex on the form) so variable products keep their
	   option dropdown stacked above the button instead of crammed beside it. */
	.mt-product-page .wp-block-woocommerce-add-to-cart-form form.cart .single_add_to_cart_button {
		display: block;
		width: auto;
		min-width: 240px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
}

/* Desktop keeps the two columns; the icon just stops looming. */
@media (min-width: 782px) {

	.mt-product-page .wp-block-woocommerce-product-image-gallery {
		max-width: 340px;
		margin-left: auto;
		margin-right: auto;
	}
}

.mt-product-page .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
}