/*
 * div.product's grid has a single explicit row: .ap-product-media (the
 * gallery image with the accordion stacked directly under it, inside one
 * wrapper) in column 1, .summary (title/price/options/add to cart) in
 * column 2. Deliberately NOT spanning .summary across two rows - CSS Grid
 * distributes a tall spanning item's height across the rows it spans
 * however its own algorithm sees fit, not necessarily "row 1 = the image's
 * height", which previously left a large empty gap between the image and
 * the accordion. Keeping the gallery+accordion in one wrapper column
 * sidesteps that entirely: each column's height comes purely from its own
 * content.
 *
 * The image column gets slightly more than half the row (1.15fr vs 1fr)
 * rather than a strict 50/50 split, so it reads as the dominant element.
 *
 * WooCommerce's own Description/Reviews tabs and upsells also render as
 * direct children of div.product (via woocommerce_after_single_product_summary)
 * - without an explicit placement they'd fall into the grid's auto-placement
 * and land in column 1, so they get an explicit full-width span below.
 */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax( 0, 1.15fr ) minmax( 0, 1fr );
	column-gap: 48px;
	align-items: start;
}

.single-product div.product > .ap-product-media {
	grid-column: 1;
}

.single-product div.product > .summary.entry-summary {
	grid-column: 2;
}

/*
 * The gap looked bigger than expected because WooCommerce wraps the main
 * image in a <figure> (.woocommerce-product-gallery__wrapper) which carries
 * the browser's default figure margin (1em top/bottom, 40px sides).
 */
.single-product div.product .woocommerce-product-gallery {
	margin: 0 !important;
}
.single-product div.product .woocommerce-product-gallery__wrapper {
	margin: 0 !important;
}

.single-product div.product .ap-product-tabs {
	margin-top: 8px;
}

/*
 * !important here because WooCommerce's own default stylesheet sets
 * "div.product div.images { float: left; width: 48%; }" (and the matching
 * rule for .summary) with higher specificity than a class-based override
 * can beat - these need to fill 100% of their grid column, not 48% of the
 * whole row inside an already-narrower column.
 */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product > .ap-product-media,
.single-product div.product > .summary.entry-summary {
	float: none !important;
	width: 100% !important;
}

.single-product div.product > .woocommerce-tabs,
.single-product div.product > .upsells {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	margin-top: 24px;
}

/*
 * Mobile: single column, stacked as image -> file specs -> name -> info.
 * That's already the natural DOM order (.ap-product-media, which stacks
 * image then the accordion internally, comes before .summary in the
 * markup), so no `order` override is needed here - just the grid-column
 * reset below.
 *
 * grid-column is reset to 1 for both here because the desktop rules above
 * explicitly place .ap-product-media in column 1 and .summary in column 2 -
 * switching grid-template-columns to a single "1fr" track does NOT clear
 * those explicit placements, so without this reset the grid was still
 * auto-generating a real second column to satisfy ".summary { grid-column:
 * 2 }", squeezing two columns into a phone-width screen instead of stacking.
 */
@media ( max-width: 768px ) {
	.single-product div.product {
		grid-template-columns: 1fr;
	}
	.single-product div.product > .summary.entry-summary {
		grid-column: 1;
	}
	.single-product div.product > .ap-product-media {
		grid-column: 1;
	}
	.single-product div.product > .woocommerce-tabs,
	.single-product div.product > .upsells {
		grid-column: 1;
		order: 3;
	}
}

/* Accordion */
.ap-product-tabs {
	border: 1px solid var( --ap-border );
	border-radius: var( --ap-radius );
	overflow: hidden;
}
.ap-product-tabs__item + .ap-product-tabs__item {
	border-top: 1px solid var( --ap-border );
}
.ap-product-tabs__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 16px;
	background: var( --ap-surface-alt );
	border: none;
	text-align: left;
	font-family: var( --ap-font-body );
	font-weight: 600;
	font-size: 14px;
	color: var( --ap-ink );
	cursor: pointer;
	transition: background var( --ap-transition ), color var( --ap-transition );
}
.ap-product-tabs__button:hover {
	color: var( --ap-accent );
}
.ap-product-tabs__button::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 18px;
	line-height: 1;
	color: var( --ap-accent );
	transition: transform var( --ap-transition );
}
.ap-product-tabs__button.is-active::after {
	transform: rotate( 45deg );
}
.ap-product-tabs__panel {
	padding: 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var( --ap-ink );
}