/**
 * Complementary products grid. Card look comes from .pwf-prodcard in pwf-store.css
 * (Divi preset td1hmymu85 + those classes). :where() keeps this under Divi module CSS.
 */

:where(.pwf-complementary) {
	padding-block: 1.5rem;
}

:where(.pwf-complementary) .et_pb_heading {
	margin-block-end: 1rem;
}

:where(.pwf-complementary) .et_pb_heading .et_pb_module_header {
	color: var(--gcid-5ymk3z8au9, #14231e);
	font-family: var(--gvid-xpma6e7ul8, inherit);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
	font-weight: 700;
	line-height: 1.4;
}

:where(.pwf-complementary .pwf-shop-loop) {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

:where(.pwf-complementary .pwf-shop-loop) > [data-loop-item] {
	min-inline-size: 0;
}

@media (max-width: 980px) {
	:where(.pwf-complementary .pwf-shop-loop) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	:where(.pwf-complementary .pwf-shop-loop) {
		gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:where(.pwf-complementary) * {
		transition-duration: 0.01ms;
	}
}