:root {
	--bg: #f4efe6;
	--surface: rgba(255, 255, 255, 0.84);
	--surface-strong: rgba(255, 255, 255, 0.95);
	--ink: #14281d;
	--muted: #5f6d63;
	--brand: #d97706;
	--brand-deep: #9a3412;
	--accent: #1f6f5f;
	--accent-deep: #123c33;
	--accent-soft: #e4f4ef;
	--shadow: 0 24px 60px rgba(43, 33, 14, 0.12);
    --card: rgba(255, 255, 255, 0.05);
}

/* Page layout */
.container {
	padding: 1.5rem 1rem 3rem;
}

/* Buttons used in the filters */
.city-btn,
.category-btn {
	border-radius: 999px;
	padding: .45rem .85rem;
	font-weight: 700;
	border: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.city-btn select {
	background: transparent;
	color: inherit;
	border: 0;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.city-btn {
	background: linear-gradient(135deg, rgba(36,68,74,0.95), rgba(31,55,58,0.9));
	color: #fff;
}

.category-btn {
	background: rgba(255,255,255,0.92);
	color: var(--accent-deep);
	border: 1px solid rgba(20,40,29,0.06);
}

/* Store card */
.store-card {
	background: var(--card);
	border-radius: 18px;
	overflow: hidden;
	transition: transform .28s ease, box-shadow .28s ease;
	height: 100%;
}

.store-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 60px rgba(20,40,29,0.14);
}

.store-image {
	position: relative;
	height: 200px;
	overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}

.store-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.store-title-overlay {
	position: absolute;
	left: 1rem;
	bottom: 0.9rem;
	background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(0,0,0,0.22));
	color: #fff;
	padding: .45rem .75rem;
	border-radius: 12px;
	font-weight: 800;
	font-size: 1.05rem;
}

.store-category {
	color: var(--muted);
	font-size: .95rem;
	padding: .9rem 1rem 0.6rem 1rem;
}

/* Price and promo badges */
.price-badge {
	position: absolute;
	left: 0.9rem;
	top: 0.9rem;
	background: linear-gradient(135deg, var(--brand), var(--brand-deep));
	color: #fff;
	padding: .35rem .6rem;
	border-radius: 12px;
	font-weight: 800;
	font-size: .9rem;
	box-shadow: 0 8px 20px rgba(154,52,18,0.18);
}

.promo-badge {
	position: absolute;
	right: 0.9rem;
	top: 0.9rem;
	background: rgba(217,119,6,0.12);
	color: var(--brand-deep);
	padding: .35rem .6rem;
	border-radius: 12px;
	font-weight: 800;
	font-size: .8rem;
	border: 1px solid rgba(217,119,6,0.18);
}

.store-location {
	padding: .6rem 1rem 1.15rem 1rem;
	color: var(--muted);
	font-size: .9rem;
}

.store-location .bi {
	margin-left: .5rem;
}

.store-cta a {
	border-radius: 999px;
}

/* Make CTA more prominent */
.store-cta .btn-brand {
	padding: .5rem .9rem;
	font-size: .9rem;
}

/* Pagination styling */
.pagination .page-link {
	border-radius: 999px;
	padding: .45rem .75rem;
}

.pagination .page-item.active .page-link {
	background: linear-gradient(135deg, var(--brand), var(--brand-deep));
	color: #fff;
	border: none;
}

/* Responsive tweaks */
@media (max-width: 767.98px) {
	.store-image { height: 180px; }
	.store-title-overlay { left: .7rem; bottom: .7rem; font-size: .95rem; }
}

/* Filters row */
.filter-row {
	gap: .75rem;
}

.filter-row .form-control {
	min-height: 42px;
}

.filter-row input[type="number"]::-webkit-outer-spin-button,
.filter-row input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.filter-row .spinner-border {
	margin-left: .5rem;
}

/* Small utility */
.mt-2 { margin-top: .5rem; }