/*
 * Bumplar Commerce storefront: minimal, hand-written layout for the
 * homepage, product archive, and single-product views. No framework, no
 * build step, matching this plugin's existing zero-build-tooling
 * convention for its one other asset file (product-image.js).
 */

.bumplar-commerce-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px;
	margin: 24px 0;
}

.bumplar-commerce-product-card {
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 16px;
	text-align: center;
}

.bumplar-commerce-product-card__image img {
	max-width: 100%;
	height: auto;
}

.bumplar-commerce-product-card__excerpt {
	font-size: 0.9em;
	color: #555;
}

.bumplar-commerce-price ins {
	text-decoration: none;
	font-weight: bold;
}

.bumplar-commerce-price del {
	opacity: 0.6;
}

.bumplar-commerce-pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 24px 0;
}

.bumplar-commerce-pagination__current {
	font-weight: bold;
}

.bumplar-commerce-single-product__image img {
	max-width: 100%;
	height: auto;
}

.bumplar-commerce-hero,
.bumplar-commerce-featured-products,
.bumplar-commerce-benefits,
.bumplar-commerce-cta,
.bumplar-commerce-storefront-footer {
	margin: 32px 0;
	text-align: center;
}

.bumplar-commerce-benefits ul {
	list-style: none;
	padding: 0;
	display: flex;
	gap: 24px;
	justify-content: center;
}

.bumplar-commerce-cta__button {
	display: inline-block;
	padding: 12px 24px;
	border: 1px solid #333;
	border-radius: 4px;
	text-decoration: none;
}