/* -------------------------------------------------
   Global page styles (unchanged)
   ------------------------------------------------- */
body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: #f4f4f9;
	margin: 0;
	color: #333;
}

header {
	background-color: #5e60ce;
	color: white;
	padding: 1.5rem 0;
	text-align: center;
}

main {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 2rem;
	gap: 1.5rem;
}

/* -------------------------------------------------
   Card container
   ------------------------------------------------- */
.card {
	background: white;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	overflow: hidden;
	width: 220px;
	text-align: center;
	transition: transform 0.2s ease;
	/* give the inner content a little breathing room */
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.card:hover {
	transform: scale(1.05);
}

/* -------------------------------------------------
   Image
   ------------------------------------------------- */
.card img {
	width: 100%;
	height: 180px;
	object-fit: cover;
}

/* -------------------------------------------------
   Title
   ------------------------------------------------- */
.card h2 {
	font-size: 1.2rem;
	margin: 0.8rem 0;
}

/* -------------------------------------------------
   NEW: Price & Notes
   ------------------------------------------------- */
.price {
	font-size: 1.1rem;
	font-weight: 600;
	color: #2a9d8f;		  /* teal accent – stands out but stays subtle */
	margin: 0.4rem 0;
}

.notes {
	font-size: 0.94rem;
	color: #555;
	line-height: 1.35;
	margin: 0 1rem 0.8rem;   /* left/right padding for readability */
}

/* -------------------------------------------------
   Link button
   ------------------------------------------------- */
.card a {
	display: inline-block;
	margin-top: auto;		/* pushes the button to the bottom of the card */
	margin-bottom: 1rem;
	background: #5e60ce;
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 5px;
	text-decoration: none;
	transition: background 0.3s;
}

.card a:hover {
	background: #4b4dc3;
}

/* -------------------------------------------------
   Footer
   ------------------------------------------------- */
footer {
	text-align: center;
	padding: 1rem;
	background: #e6e6fa;
	color: #555;
}

/* -------------------------------------------------
   Error message
   ------------------------------------------------- */
.error {
	text-align: center;
	color: red;
	font-weight: bold;
}

/* Controls (sort dropdown) */
#controls {
	font-size: 0.95rem;
}
#controls select {
	margin-left: 0.5rem;
	padding: 0.3rem 0.6rem;
	border-radius: 4px;
	border: 1px solid #ccc;
}