.cwpls-listing {
	--cwpls-accent: var(--wp--preset--color--contrast, #1e3a8a);
	--cwpls-surface: var(--wp--preset--color--base, #fff);
	--cwpls-border: color-mix(in srgb, currentColor 16%, transparent);
	--cwpls-radius: 12px;
	box-sizing: border-box;
}

.cwpls-listing *,
.cwpls-listing *::before,
.cwpls-listing *::after {
	box-sizing: border-box;
}

.cwpls-heading {
	margin-block: 0 1.25rem;
}

.cwpls-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: .75rem;
	margin-bottom: 1.5rem;
	padding: 1rem;
	border: 1px solid var(--cwpls-border);
	border-radius: var(--cwpls-radius);
	background: color-mix(in srgb, var(--cwpls-surface) 95%, currentColor);
}

.cwpls-controls label {
	align-self: center;
	font-size: .875em;
	font-weight: 600;
}

.cwpls-controls input,
.cwpls-controls select,
.cwpls-controls button,
.cwpls-pagination button,
.cwpls-load-more {
	min-height: 42px;
	padding: .55rem .8rem;
	border: 1px solid var(--cwpls-border);
	border-radius: 7px;
	font: inherit;
}

.cwpls-controls input,
.cwpls-controls select {
	background: var(--cwpls-surface);
	color: inherit;
}

.cwpls-controls button,
.cwpls-pagination button,
.cwpls-load-more {
	cursor: pointer;
	background: var(--cwpls-accent);
	color: #fff;
}

.cwpls-posts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.cwpls-layout-grid .cwpls-posts,
.cwpls-layout-cards .cwpls-posts {
	grid-template-columns: repeat(var(--cwpls-columns, 3), minmax(0, 1fr));
}

.cwpls-post {
	display: flex;
	gap: 1.1rem;
	min-width: 0;
	padding-block: 1.1rem;
	border-bottom: 1px solid var(--cwpls-border);
}

.cwpls-layout-grid .cwpls-post,
.cwpls-layout-cards .cwpls-post {
	display: block;
	overflow: hidden;
	padding: 0;
	border: 1px solid var(--cwpls-border);
	border-radius: var(--cwpls-radius);
	background: var(--cwpls-surface);
}

.cwpls-layout-cards .cwpls-post {
	box-shadow: 0 8px 24px color-mix(in srgb, currentColor 8%, transparent);
	transition: translate .2s ease, box-shadow .2s ease;
}

.cwpls-layout-cards .cwpls-post:hover {
	translate: 0 -3px;
	box-shadow: 0 12px 30px color-mix(in srgb, currentColor 13%, transparent);
}

.cwpls-thumbnail {
	flex: 0 0 min(34%, 240px);
}

.cwpls-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.cwpls-layout-grid .cwpls-content,
.cwpls-layout-cards .cwpls-content {
	padding: 1rem;
}

.cwpls-content {
	min-width: 0;
}

.cwpls-title {
	margin: 0 0 .45rem;
	font-size: clamp(1.05rem, 1rem + .35vw, 1.35rem);
	line-height: 1.25;
}

.cwpls-title a {
	color: inherit;
	text-decoration: none;
}

.cwpls-title a:hover {
	text-decoration: underline;
}

.cwpls-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1rem;
	margin-bottom: .75rem;
	font-size: .84em;
	opacity: .72;
}

.cwpls-author::before {
	content: "·";
	margin-right: 1rem;
}

.cwpls-excerpt > :last-child {
	margin-bottom: .6rem;
}

.cwpls-layout-compact .cwpls-post {
	padding-block: .65rem;
}

.cwpls-layout-compact .cwpls-title {
	font-size: 1rem;
}

.cwpls-product {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1rem;
	margin-top: .75rem;
}

.cwpls-product .price {
	font-weight: 700;
}

.cwpls-product .button {
	padding: .5rem .75rem;
	border-radius: 6px;
	background: var(--cwpls-accent);
	color: #fff;
	text-decoration: none;
}

.cwpls-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin-top: 1.5rem;
}

.cwpls-pagination .is-current {
	outline: 3px solid color-mix(in srgb, var(--cwpls-accent) 30%, transparent);
	outline-offset: 2px;
}

.cwpls-load-more {
	display: block;
	margin: 1.5rem auto 0;
}

.cwpls-listing.is-loading {
	opacity: .65;
}

.cwpls-listing.is-loading .cwpls-results {
	pointer-events: none;
}

.cwpls-empty,
.cwpls-notice {
	padding: 1rem;
	border-left: 4px solid var(--cwpls-accent);
	background: color-mix(in srgb, var(--cwpls-accent) 8%, transparent);
}

@media (max-width: 900px) {
	.cwpls-layout-grid .cwpls-posts,
	.cwpls-layout-cards .cwpls-posts {
		grid-template-columns: repeat(min(2, var(--cwpls-columns, 3)), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.cwpls-layout-grid .cwpls-posts,
	.cwpls-layout-cards .cwpls-posts {
		grid-template-columns: 1fr;
	}

	.cwpls-post {
		display: block;
	}

	.cwpls-thumbnail {
		display: block;
		margin-bottom: .75rem;
	}

	.cwpls-controls > * {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cwpls-layout-cards .cwpls-post {
		transition: none;
	}
}