/* General Styling for Buttons */
button.category-tab {
    margin: 0.5em;
    padding: 0.2em 1em;
    
    border-color: #000; /* Black border color */
    color: #000; /* Black text color */
    border-radius: 1em;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease, transform 0.2s ease;
    background-color: transparent; /* Transparent background */
}

button.category-tab.selected {
    background-color: #000; /* Black background for selected state */
    color: #fff !important; /* White text color for selected state */
}

button.category-tab:hover {
    background-color: #333; /* Dark gray background on hover */
    color: #fff; /* White text color on hover */
    transform: scale(1.05); /* Slightly enlarge button on hover */
}

/* Styling for Marketplace Container */
marketplace {
    display: block;
    text-align: center;
    margin: 1em 0; /* Added vertical margin for spacing */
}

/* Styling for Products Container */
products {
    margin-top: 1em;
    text-align: center;
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center; /* Center items horizontally */
    gap: 1em; /* Space between items */
}

/* Styling for Individual Product Items */
products .product {
    display: flex;
    flex-direction: column; /* Stack child elements vertically */
    align-items: center; /* Center child elements horizontally */
    margin: 0.5em;
    /* padding: 1em; */
    background-color: #fff; /* White background */
    border-radius: 0.5em;
    overflow: hidden; /* Hide
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

products .product {
    width: 15em;
}

products .product img {
    width: 100%;
    height: auto;
    aspect-ratio: 1; /* Ensure the image maintains a 1:1 aspect ratio */
    object-fit: cover; /* Maintain aspect ratio while covering the element */
    
}
products .product:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* Styling for Product Titles */
product-title {
    width: 90%;
    text-align: left;
    font-size: 1.1em;
    font-weight: 500;
    margin-bottom: 0.5em; /* Space below the title */
    margin-top: 0.4em;
    color: #333; /* Darker text color for better readability */
}

meta
{
    display: block;
    margin-top: -1em;
    width: 90%;
    text-align: right;
    font-size: 0.9em;
}

meta price
{
    font-size: 1.5em;
    font-weight: 600;
    color: rgb(101, 166, 3) !important;
}

meta stroke
{
    font-size: 1.2em;
    font-weight: 500;
    color: #999;
    text-decoration: line-through;

}

marketplace h2{
    text-align: left;
    font-size: 1.5em;
    font-weight: bold;
    margin-left: 1em;
}