/**
 * ==========================================================
 * CHACHA HOME — SINGLE PRODUCT LAYOUT NORMALIZATION V1.1
 * ==========================================================
 *
 * DEV-01 / Test 4 — Patch 12
 *
 * Layout responsibilities only:
 * - Safe horizontal breathing room inside the product canvas
 * - Gallery / summary desktop spacing
 * - Full-width information tabs
 * - Full-width related-products section
 * - Deterministic related-product grid
 *
 * Product-card visuals remain in product-card.css.
 * CTA visuals remain in commerce-actions.css.
 *
 * Patch 12: target WooCommerce's real root product node directly.
 * Kadence does not guarantee a .woocommerce wrapper immediately
 * around the single-product root.
 */


/**
 * ==========================================================
 * 01. PRODUCT CANVAS
 * ==========================================================
 */

body.single-product
div.product[id^="product-"] {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	padding-right: 36px;
	padding-left: 36px;
	column-gap: 52px;
}


/**
 * Prevent gallery / summary children from forcing the grid wider
 * than the available product canvas.
 */
body.single-product
div.product[id^="product-"]
> .woocommerce-product-gallery,

body.single-product
div.product[id^="product-"]
> .summary {
	min-width: 0;
}


/**
 * ==========================================================
 * 02. FULL-WIDTH LOWER SECTIONS
 * ==========================================================
 *
 * Some theme product layouts keep descendants in the original
 * two-column grid. Tabs and related products must explicitly span
 * both columns.
 */

body.single-product
div.product[id^="product-"]
> .woocommerce-tabs,

body.single-product
div.product[id^="product-"]
> .related.products,

body.single-product
div.product[id^="product-"]
> .upsells.products {
	grid-column: 1 / -1 !important;
	clear: both !important;
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0;
	box-sizing: border-box;
	margin-right: 0 !important;
	margin-left: 0 !important;
}


/**
 * ==========================================================
 * 03. RELATED PRODUCTS
 * ==========================================================
 */

body.single-product
.related.products {
	margin-top: 48px !important;
}


body.single-product
.related.products
> h2 {
	margin-right: 0 !important;
	margin-left: 0 !important;
}


body.single-product
.related.products
ul.products {
	display: grid !important;
	grid-template-columns:
		repeat(
			4,
			minmax(0, 1fr)
		) !important;
	gap: 24px !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}


/**
 * WooCommerce classic loops use clearfix pseudo elements.
 * They are unnecessary once the related loop is a CSS Grid.
 */
body.single-product
.related.products
ul.products::before,

body.single-product
.related.products
ul.products::after {
	content: none !important;
	display: none !important;
}


body.single-product
.related.products
ul.products
li.product {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
}


/**
 * The action wrapper belongs to the card's vertical flow.
 * Keep it available at the bottom of every Related card.
 */
body.single-product
.related.products
ul.products
li.product
.product-action-wrap {
	width: 100%;
	margin-top: auto !important;
}


/**
 * ==========================================================
 * 04. TABLET / NARROW DESKTOP
 * ==========================================================
 */

@media (max-width: 1099px) {

	body.single-product
	div.product[id^="product-"] {
		padding-right: 24px;
		padding-left: 24px;
		column-gap: 32px;
	}


	body.single-product
	.related.products
	ul.products {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			) !important;

		gap:
			22px
			16px !important;
	}

}


/**
 * ==========================================================
 * 05. MOBILE
 * ==========================================================
 */

@media (max-width: 767px) {

	body.single-product
	div.product[id^="product-"] {
		padding-right: 16px;
		padding-left: 16px;
		column-gap: 0;
	}


	body.single-product
	.related.products {
		margin-top: 36px !important;
	}


	body.single-product
	.related.products
	ul.products {
		gap:
			18px
			12px !important;
	}

}


@media (max-width: 420px) {

	body.single-product
	div.product[id^="product-"] {
		padding-right: 12px;
		padding-left: 12px;
	}

}

/**
 * DEV-UI-PDP-POLISH-01 - MAIN COMPOSITION GUTTERS
 * Inset only the gallery and summary within their existing tracks.
 * Keep information panels and discovery on their accepted full width.
 * Width/margin importance matches the existing WooCommerce normalizers.
 */
body.single-product div.product[id^="product-"] {
	--chacha-pdp-main-gutter: 32px;
}

body.single-product div.product[id^="product-"] > .woocommerce-product-gallery,
body.single-product div.product[id^="product-"] > .summary.entry-summary {
	box-sizing: border-box;
	width: calc(100% - var(--chacha-pdp-main-gutter)) !important;
}

body.single-product div.product[id^="product-"] > .woocommerce-product-gallery {
	margin-inline-start: var(--chacha-pdp-main-gutter) !important;
}

body.single-product div.product[id^="product-"] > .summary.entry-summary {
	margin-inline-end: var(--chacha-pdp-main-gutter) !important;
}

@media (max-width: 1099px) {
	body.single-product div.product[id^="product-"] {
		--chacha-pdp-main-gutter: 24px;
	}
}

@media (max-width: 900px) {
	body.single-product div.product[id^="product-"] > .woocommerce-product-gallery,
	body.single-product div.product[id^="product-"] > .summary.entry-summary {
		width: calc(100% - var(--chacha-pdp-main-gutter) - var(--chacha-pdp-main-gutter)) !important;
		margin-inline: var(--chacha-pdp-main-gutter) !important;
	}
}

@media (max-width: 767px) {
	body.single-product div.product[id^="product-"] {
		--chacha-pdp-main-gutter: 18px;
	}
}

/**
 * ==========================================================
 * DEV-UI-PDP-VISUAL-REFINEMENT-02A
 * TABLET GALLERY SCALE
 * ==========================================================
 *
 * Keep the accepted stacked PDP composition.
 * Only cap the gallery on mid-tablet so the product media
 * does not dominate the entire page before the purchase area.
 */
@media (min-width: 768px) and (max-width: 900px) {
	body.single-product
	div.product[id^="product-"]
	> .woocommerce-product-gallery {
		width: min(
			calc(
				100%
				-
				var(--chacha-pdp-main-gutter)
				-
				var(--chacha-pdp-main-gutter)
			),
			700px
		) !important;

		margin-inline: auto !important;
	}
}

/**
 * ==========================================================
 * DEV-UI-PDP-VISUAL-REFINEMENT-02B
 * RELATED GRID BALANCE
 * ==========================================================
 *
 * Does not change WooCommerce's Related query or card markup.
 * It only balances incomplete rows when the returned item count
 * would otherwise create a large visual void.
 */

/**
 * 768–1024:
 * If WooCommerce returns exactly three Related products,
 * use one balanced three-card row instead of 2 + 1.
 *
 * :has() is progressive enhancement; unsupported browsers retain
 * the accepted two-column tablet fallback.
 */
@supports selector(ul:has(> li)) {
	@media (min-width: 768px) and (max-width: 1024px) {
		body.single-product
		.related.products
		ul.products:has(> li.product:nth-child(3):last-child) {
			grid-template-columns:
				repeat(
					3,
					minmax(0, 1fr)
				) !important;

			gap: 18px !important;
		}
	}
}

/**
 * Mobile:
 * Keep two-column card sizing, but center a final unpaired card.
 */
@media (max-width: 767px) {
	body.single-product
	.related.products
	ul.products
	> li.product:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - 12px) / 2) !important;
	}
}