/*
 * Layout primitives: section (element), .section-inner, .container, .grid, .grid-auto.
 * Sections behave like Oxygen sections: a plain block holding a full-width inner wrap of max --content-width (1240px).
 */

/* ---- Section ----
 * Oxygen rendered every <section> as a plain block (oxygen.css overrides ACSS's flex rule), with no padding
 * (ACSS-Oxygen) and a white background (snippet 406). Element selector on purpose: this matches WooCommerce's own
 * <section> elements too, exactly as on the Oxygen site. */
section {
	padding: 0;
	background: var(--white);
}

/* Automatic.css: a section's direct div children stack as a flex column with the content gap.
 * Global like on the Oxygen site (plugin markup such as the product page sections relies on it). */
section > div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--content-gap);
}

/* ---- Section inner wrap ----
 * Oxygen's .ct-section-inner-wrap: full width up to the content width, centred, a flex column with the
 * content gap between its children and the section spacing as padding. */
.section-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--content-gap);
	width: 100%;
	max-width: var(--content-width);
	height: 100%;
	min-height: inherit;
	margin-inline: auto;
	padding-block: var(--section-space-m);
	padding-inline: var(--section-padding-x);
}

/* ---- Container ----
 * Full-width row content (header rows): max content width, side padding, flex row. */
.container {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	max-width: var(--content-width);
	height: 100%;
	margin-inline: auto;
	padding-inline: var(--section-padding-x);
}

/* ---- Grid ----
 * .grid: --columns equal columns (default 1). Change --columns in a media query to reflow. */
.grid {
	display: grid;
	grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr));
	gap: var(--grid-gap);
	inline-size: 100%;
}

/* .grid-auto: Automatic.css "grid--auto-N" formula. Up to --columns columns that wrap
 * when a column would get narrower than 70% of its share of the content width.
 * --grid-auto-template holds the formula so a media query can switch back to it. */
.grid-auto {
	--columns: 4;
	--grid-auto-min: calc((var(--content-width) - (var(--columns) - 1) * var(--grid-gap)) / var(--columns) * 0.7);
	--grid-auto-template: repeat(auto-fit, minmax(min(100%, max(var(--grid-auto-min), (100% - (var(--columns) - 1) * var(--grid-gap)) / var(--columns))), 1fr));
	display: grid;
	grid-template-columns: var(--grid-auto-template);
	gap: var(--grid-gap);
	inline-size: 100%;
}

.grid > *,
.grid-auto > * {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: break-word;
}