.no-results-container { /* Style the container */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px; /* Important for vertical centering */
    width: 100%; /* Take full width of the search results container */
}

.no-results-message { /* Style the message itself */
    text-align: center;
}

/* Basic Reset & Body Styling */
* {
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif; /* Use Inter font */
    background-color: #f3f4f6; /* Equivalent to Tailwind's bg-gray-100 */
    padding: 1rem; /* Equivalent to p-4 */
    color: #1f2937; /* Default text color (gray-800) */
}

/* Container */
.main-container {
    max-width: 1280px; /* Standard container width */
    margin-left: auto;
    margin-right: auto;
}

/* Heading */
h1 {
    font-size: 1.875rem; /* Equivalent to text-3xl */
    font-weight: 700; /* Equivalent to font-bold */
    text-align: center;
    color: #1f2937; /* Equivalent to text-gray-800 */
    margin-bottom: 2rem; /* Equivalent to mb-8 */
}

/* Product Grid */
.product-grid {
    display: grid;
    gap: 1rem; /* Equivalent to gap-6 */
    /* Responsive columns using CSS Grid */
    /* Start with 2 columns */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Small screens and up (sm: 640px) */
@media (min-width: 640px) {
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* 2 columns */
    }
    body {
        padding: 1rem; /* Equivalent to sm:p-6 */
    }
}

/* Medium screens and up (md: 768px) */
@media (min-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* 3 columns */
    }
}

/* Large screens and up (lg: 1024px) */
@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)); /* 4 columns */
        gap: 1.5rem; /* Equivalent to lg:gap-8 */
    }
    body {
        padding: 1.5rem; /* Equivalent to lg:p-8 */
    }
}

/* Product Card Styling */
.product-card {
    background-color: #ffffff; /* Equivalent to bg-white */
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Equivalent to shadow-md */
    overflow: hidden; /* Keep image corners rounded */
    display: flex; /* Use flexbox for vertical layout */
    flex-direction: column; /* Stack elements vertically */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Hover transition */
}

.product-card:hover {
    transform: translateY(-4px); /* Lift effect on hover */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Larger shadow on hover */
}

/* Product Link (wraps image) */
.product-link {
    display: block; /* Make it a block element */
}

/* Product Image */
.product-image {
    width: 100%; /* Equivalent to w-full */
    height: 12rem; /* Equivalent to h-48 */
    object-fit: cover; /* Crop image to fit */
    display: block; /* Remove extra space below image */
    transition: opacity 0.2s ease-in-out;
}

.product-link:hover .product-image {
    opacity: 0.9; /* Equivalent to group-hover:opacity-90 */
}

/* Product Info Section */
.product-info {
    padding: 1rem; /* Equivalent to p-4 */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow this section to grow and push button down */
}

/* Product Name Link */
.product-name-link {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color */
    display: block;
}

/* Product Name */
.product-name {
    font-size: 0.85rem; /* Equivalent to text-lg */
    font-weight: 600; /* Equivalent to font-semibold */
    color: #1f2937; /* Equivalent to text-gray-800 */
    margin-bottom: 0.125rem; /* Equivalent to mb-1 */
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease-in-out;
}

.product-name-link:hover .product-name {
    color: #4f46e5; /* Equivalent to group-hover:text-indigo-600 */
}

/* Product Price */
.product-price-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    margin-bottom: 1rem;
}

.product-last-updated {
    font-size: 0.75rem;
    color: DimGray;
    opacity: 0.5;
    margin-top: 0.2rem;
}

.product-price {
    font-size: 1.25rem; /* Equivalent to text-xl */
    font-weight: 700; /* Equivalent to font-bold */
    color: #4f46e5; /* Equivalent to text-indigo-600 */
    margin-right: 0.25rem;
}

.product-price-diff-negative {
    font-size: 0.85rem;
    font-weight: 500;
    color: #df0000;
}

.product-price-diff-positive {
    font-size: 0.85rem;
    font-weight: 400;
    color: #008000;
}

@media (max-width: 639px) {
    .product-image {
        height: 9rem; /* Shorter height for mobile (equivalent to h-40) */
    }
    .product-price-container {
        margin-bottom: 0.2rem;
    }
    .product-info {
        padding: 0.4rem;
    }
}

.store-icon {
    width: 48px; /* Set width for the SVG */
    height: 48px; /* Set height for the SVG */
    vertical-align: middle;
}

/* Add to Cart Button */
.add-to-cart-btn, .price-history-btn {
    width: 100%; /* Equivalent to w-full */
    background-color: #4f46e5; /* Equivalent to bg-indigo-600 */
    color: #ffffff; /* Equivalent to text-white */
    padding-top: 0.5rem; /* Equivalent to py-2 */
    padding-bottom: 0.5rem;
    padding-left: 1rem; /* Equivalent to px-4 */
    padding-right: 1rem;
    border-radius: 0.375rem; /* Equivalent to rounded-md */
    font-weight: 500; /* Equivalent to font-medium */
    border: none; /* Remove default border */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    text-align: center;
    font-size: 1rem; /* Ensure consistent font size */
}

.add-to-cart-btn:hover, .price-history-btn:hover {
    background-color: #4338ca; /* Equivalent to hover:bg-indigo-700 */
}

.add-to-cart-btn:focus, .price-history-btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    /* Simulate focus ring - adjust color and style as needed */
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #a5b4fc; /* Simulates focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 */
}

/* Search Bar Container */
.search-bar-container {
    display: flex; /* Use flexbox for layout */
    gap: 1rem; /* Equivalent to gap-4 */
    margin-bottom: 2rem; /* Equivalent to mb-8, adds space below the search bar */
    align-items: center; /* Vertically align items */
    max-width: 600px; /* Limit the width of the search bar */
    margin-left: auto; /* Center the search bar */
    margin-right: auto; /* Center the search bar */
    padding: 0 1rem; /* Add some padding on smaller screens */
}

/* Search Input Field */
.search-input {
    flex-grow: 1; /* Allow input to take up available space */
    padding: 0.75rem 1rem; /* Equivalent to py-3 px-4 */
    border: 1px solid #d1d5db; /* Equivalent to border-gray-300 */
    border-radius: 0.375rem; /* Equivalent to rounded-md */
    font-size: 1rem; /* Equivalent to text-base */
    color: #1f2937; /* Equivalent to text-gray-800 */
    outline: none; /* Remove default outline */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.search-input::placeholder {
    color: #9ca3af; /* Equivalent to text-gray-400 */
}

.search-input:focus {
    border-color: #4f46e5; /* Equivalent to focus:border-indigo-500 */
    box-shadow: 0 0 0 1px #4f46e5; /* Simulate focus ring */
}

/* Search Button */
.search-button {
    background-color: #4f46e5; /* Equivalent to bg-indigo-600 */
    color: #ffffff; /* Equivalent to text-white */
    padding: 0.75rem 1.5rem; /* Equivalent to py-3 px-6 */
    border-radius: 0.375rem; /* Equivalent to rounded-md */
    font-weight: 500; /* Equivalent to font-medium */
    border: none; /* Remove default border */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    font-size: 1rem; /* Ensure consistent font size */
    flex-shrink: 0; /* Prevent button from shrinking */
}

.search-button:hover {
    background-color: #4338ca; /* Equivalent to hover:bg-indigo-700 */
}

.search-button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #a5b4fc; /* Simulates focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 */
}

/* Responsive adjustment for smaller screens */
@media (max-width: 640px) {
    .search-bar-container {
        flex-direction: column; /* Stack input and button vertically */
        gap: 0.75rem; /* Adjust gap */
        padding: 0; /* Remove horizontal padding for full width */
    }

    .search-input,
    .search-button {
        width: 100%; /* Make both elements full width */
    }
}

/* Chart Container */
#phchart {
    margin: auto; /* Center the chart and add vertical space */
}