body {
      font-family: sans-serif;
      margin: 2em;
    }

    #searchBox {
      padding: 0.5em;
      font-size: 1em;
      width: 300px;
    }

    #results {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1rem;
      padding: 1rem;
    }


    .product {
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: box-shadow 0.2s ease;
    }

    .product:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .product > img:first-child,
    .product > div:first-child {
      width: 100%;
      height: 200px;
      object-fit: contain; /* Zooms out to fit whole image */
      background-color: #f5f5f5;
      padding: 0.5rem;
    }

    /* Override product image styles for store icons */
    .product .store-icon {
      width: 16px !important;
      height: 16px !important;
      padding: 0 !important;
      background-color: transparent !important;
      margin-left: 5px;
      vertical-align: middle;
      cursor: help;
    }

    .product-details {
      flex: 1;
    }

    .product-details h2 {
      margin: 0 0 0.25em 0;
      font-size: 1.2em;
    }

    .product-details p {
      margin: 0.2em 0;
    }
    .modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #fff;
  padding: 1em;
  border-radius: 8px;
  max-width: 800px;
  width: 90%;
  max-height: 80%;
  overflow-y: auto;
  position: relative;
}

.close-button {
  position: absolute;
  top: 0.5em;
  right: 1em;
  font-size: 1.5em;
  cursor: pointer;
}

.product-details-button {
  all: unset; /* Remove all default button styles */
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 1em;
  border-radius: 8px;
  /* optional styling */
  background-color: #f9f9f9;
  transition: background-color 0.2s;
}

.product-details-button:hover {
  background-color: #e0e0e0;
}

  .product-details-content h2,
.product-details-content p,
.product-details-content em {
  margin: 0.2em 0;
}

.store-icon {
  display: inline-block;
  margin-left: 5px;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  cursor: help;
}