/* Shop page specific styles (keeps to base.css conventions) */
.shop-hero { padding-block: var(--space-12) var(--space-8); background: linear-gradient(180deg, var(--gray-50), transparent); }
.shop-search .search-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width: 520px) { .shop-search .search-row { grid-template-columns: 1fr; } }

.shop-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-9); align-items: start; }
@media (max-width: 1000px) { .shop-layout { grid-template-columns: 1fr; } }

.filters .filter-group { display: grid; gap: 8px; margin-top: var(--space-3); }
.filters fieldset { border: 0; padding: 0; margin: 0 0 var(--space-6) 0; }
.filters legend { margin-bottom: var(--space-3); }
.filter-actions { margin-top: var(--space-3); }

/* Override .form-row grid for the filter form: use a single-column flex layout
	 so elements never overflow horizontally and spacing remains consistent. */
.filter-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-6); /* keep consistent spacing with .form-row */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Make the action buttons wrap if space is constrained */
.filter-form .filter-actions {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
	align-items: center;
}
.filter-form .filter-actions .btn {
	flex: 0 1 auto;
	min-width: 0;
}

.toolbar { margin-bottom: var(--space-6); }
.results { color: var(--gray-600); }

.product-card { overflow: hidden; }
.product-media { aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--gray-100); }
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-title a { color: inherit; }
.product-title a:hover { color: var(--color-primary); }
.rating { color: var(--color-warning); font-weight: 700; }

/* Promotions */
.promo-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
@media (max-width: 900px) { .promo-grid { grid-template-columns: 1fr; } }
.promo-card { background: linear-gradient(135deg, var(--gray-50), var(--color-surface)); }

/* Reviews */
.reviews-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }

/* Bestsellers & guides */
.best-list, .guide-list { display: grid; gap: 10px; }
.best-list li { padding: 8px 0; border-bottom: 1px dashed var(--color-border); }

/* Sections spacing */
.catalog { padding-block: var(--space-10); }
.promotions, .reviews, .best-sellers, .shopping-guide, .contact-support, .returns { padding-block: var(--space-12); }