/**
 * Product "Gallery Content" section (below the gallery).
 *
 * Rendered by inc/product-gallery-content.php on
 * woocommerce_after_single_product_summary (priority 5), so the section is a
 * direct child of `div.product`, sitting after `.summary` and before the tabs.
 *
 * Two layout contexts must be handled:
 *  1. Float layout (simple products, and variable products below 992px): the
 *     parent floats `.woocommerce-product-gallery` left and `.summary` right,
 *     so the section must clear both.
 *  2. Flex layout (variable products at >= 992px): `div.product` becomes
 *     `display:flex; flex-wrap:wrap` with a 64% gallery column and a 36%
 *     summary (see the inline CSS in functions.php). The section is the next
 *     flex child and must occupy a full-width wrapped row beneath them.
 *
 * @package Konte Child
 */

.konte-child-gallery-content {
	clear: both;
	width: 100%;
	box-sizing: border-box;
	padding: 40px 15px;
}

.konte-child-gallery-content__inner {
	margin: 0 auto;
	max-width: 900px;
}

.konte-child-gallery-content__media {
	margin-bottom: 24px;
}

.konte-child-gallery-content__media img,
.konte-child-gallery-content__media video,
.konte-child-gallery-content__media .wp-video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.konte-child-gallery-content__text > *:first-child {
	margin-top: 0;
}

.konte-child-gallery-content__text > *:last-child {
	margin-bottom: 0;
}

@media (min-width: 992px) {
	/* Flex context: force the section onto its own full-width row below the
	   gallery column and the summary. */
	.woocommerce div.product.variable-gallery-jcrew-active > .konte-child-gallery-content {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* The variable PDP container is flush-left (padding-left: 0), so the section
	   supplies its own gutters. These match the full-width breadcrumb bar. */
	body.konte-variable-pdp .konte-child-gallery-content {
		padding-left: 32px;
		padding-right: 24px;
	}
}

/**
 * Summary-column variant: the Content text on its own, rendered inside the
 * product summary directly above the Product Information accordion triggers.
 *
 * Styled as the muted-gold "MADE IN … FACTORY" line from the reference. Reuses
 * the exact treatment already applied to the same copy in the add-to-cart popup
 * (.konte-atc-popup__gallery, css/added-to-cart-popup.css) so the two surfaces
 * match: gold #a17c3c, bold, uppercase, letter-spaced. text-transform means the
 * store can type the copy in normal case. Inherits the summary column width, so
 * it is responsive on desktop and mobile without extra breakpoints.
 */
.konte-child-gallery-content-summary {
	margin-top: 1.6em;
	text-transform: uppercase;
	color: var(--rare_clr);
	font-family: var(--font2);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.konte-child-gallery-content-summary > *:first-child {
	margin-top: 0;
}

.konte-child-gallery-content-summary > *:last-child {
	margin-bottom: 0;
}