.merchandise-page {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Dynamic columns with min 250px */
    gap: 20px; /* Space between the items */
    max-width: 1200px; /* Limits the total width of the grid */
    margin: 20px auto; /* Centers the grid on the page with margin */
    padding: 0 20px; /* Adds padding to the sides of the container */
}

/* Individual Merchandise Card */
.merch_card {
    background: var(--color-white); /* White background for the card */
    border: 1px solid var(--color-offwhite); /* Light gray border */
    border-radius: 15px; /* Rounded corners */
    padding: 20px; /* Padding inside the card */
    box-shadow: 0 4px 6px var(--color-shadow); /* Subtle shadow for depth */
    text-align: center; /* Center text content */
    transition: transform 0.2s, box-shadow 0.2s; /* Smooth hover effect */
}

.merch_card:hover {
    transform: translateY(-5px); /* Slight lift effect */
    box-shadow: 0 8px 12px var(--color-shadow-strong); /* Deeper shadow on hover */
}

/* Merchandise Image */
.merch_card img {
    width: 100%; /* Full width inside the card */
    aspect-ratio: 1 / 1; /* Ensures square images */
    object-fit: cover; /* Crops the image to fill the area */
    border-radius: 50%; /* Circular images */
    border: 5px solid var(--color-offwhite); /* Optional light border around the image */
}

/* Merchandise Title and Price */
.merch_card strong {
    display: block; /* Ensures proper spacing */
    font-size: 1.2em; /* Slightly larger font size */
    margin: 10px 0; /* Spacing above and below */
    color: var(--color-black); /* Darker text for contrast */
    font-weight: bold;
}

/* Merchandise Description */
.merch_card p {
    font-size: 0.9em; /* Smaller font for description */
    color: var(--color-black); /* Lighter text color */
    line-height: 1.4; /* Improved readability */
    margin-bottom: 10px;
}