/*
 * Layout primitives for the FusionCommerce redesign.
 *
 * First migration pass:
 * - move safe reusable layout helpers out of the legacy layer;
 * - keep values compatible with legacy.css for now;
 * - use Bootstrap 5.3/grid first and avoid recreating Bootstrap utilities.
 */

.content-narrow {
	max-width: 860px;
	margin: 0 auto;
}

.content-medium {
	max-width: 980px;
	margin: 0 auto;
}

.content-wide {
	max-width: 1120px;
	margin: 0 auto;
}


.plx-section--sm {
	margin-block: 1.25rem;
}

.plx-position-full {
	position: relative;
	width: 100%;
}

.plx-position-full > .container-xxl {
	position: relative;
}

.plx-position-full--hero {
	background: var(--color-primary-soft-2);
}

.plx-position-full--prefooter {
	background: var(--color-secondary);
	color: var(--color-text);
}

.plx-position-full--prefooter a {
	color: inherit;
}

.plx-section__title {
	margin-bottom: 0.35rem;
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-text-strong);
}

.plx-grid {
	display: grid;
	gap: var(--plx-grid-gap, 1rem);
}

.plx-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.plx-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}

.plx-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}

.plx-grid--compact {
	--plx-grid-gap: 0.75rem;
}

.plx-grid--comfortable {
	--plx-grid-gap: 1.25rem;
}