.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 16px;
}
/* Dropdown specific styles */
.currency-dropdown-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 0;
}
.currency-dropdown-menu.open {
  max-height: 500px; /* Sufficient height to show all options */
  opacity: 1;
}
.mobile-filter-dropdown-container {
  position: relative; /* Important for positioning the dropdown menu */
}

.mobile-filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px); /* Position below the button with some gap */
  left: 0;
  width: 290px; /* Fixed width, adjust as needed */
  background-color: #ede9d8;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 50; /* Ensure it's above other content */
  padding: 1.5rem; /* p-6 */
  /* Instead of display: none, use max-height and opacity for transition */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.mobile-filter-dropdown-menu.open {
  max-height: 500px; /* Adjust this value if your content is taller */
  opacity: 1;
}

/* On larger screens, hide the mobile filter button and its dropdown */
@media (min-width: 768px) {
  .mobile-filter-dropdown-container {
    display: none;
  }
}