/***** Browser modern CSS reset *****/
/* Modern Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}
/* End of modern reset */



/***** CSS for eBay Affiliate Block *****/

.ebay-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 0rem 0rem 1rem 0rem; /* values for top, right, bottom, left */
  padding: 0rem 0rem 2rem 0rem; /* values for top, right, bottom, left */
  place-items: center;
  height: auto;
}

.ebay-results-grid .ebay-item {
  display: grid;
  grid-template-rows: auto auto auto auto;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid #ccc;
  padding: 1rem;
  text-align: center;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
  height: 100%;
  min-height: 320px;
}

.ebay-item img {
  justify-self: center;
  align-self: center;
  max-width: 100%;
  height: auto;
  border-radius: 0.25rem;
  /* margin-bottom: auto; /* Ensures image has space below, REMOVED BECAUSE IT PUSHES IMAGED TO TOP OF GRID OVERRIDING align-self. */
  max-height: 160px; /* Ensures images do not exceed this height. Can change to auto. */
  object-fit: contain; /* This will scale the image down to fit the container, but it will not crop the image. */
}

.ebay-item h4 {
  align-self: center;
  font-size: 1rem;
  margin: 0.5rem 0;
  color: #222;
  margin-top: auto;
}

.ebay-item p {
  align-self: center;
  font-weight: bold;
  color: #0073aa;
  margin-top: 0.5rem;
}

.ebay-item:hover {
  transform: scale(1.02);
}

.ebay-logo {
  height: 20px !important; /* set actual height. the !important overrides specificity from img properties in .ebay-item img */
  width: auto;
  margin-top: 0.5rem;
  opacity: 0.85;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/******* eBay Results List Style *******/

.ebay-results-list .ebay-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "image title"
    "image price"
    "image logo";
  gap: 0rem 0.5rem; /*x and y gap vertically and horizontally*/
  min-height: 140px; /* Ensures each item has a minimum height. This may need some tweaking. */
  text-align: center;
  border: 1px solid #ccc;
  padding: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  background: #fff; /* if you want the background to match theme, remove background color */
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.ebay-results-list .ebay-item img {
  grid-area: image;
  /*max-height: 100%; /* Allows the image to scale based on its content. Don't use or varies size of cards based on image height*/
  max-width: 100%; /* Ensures the image does not exceed the width of its container. */
  object-fit: contain; /* Ensures the image fits within its grid area without distortion. Will scale the image down to fit the container, but it will not crop the image. */
  justify-self: center; /*Align image horizontally.*/
  align-self: center; /* Align image vertically in the center. Can use 'end', 'start', or 'stretch'.*/
}

.ebay-results-list .ebay-item h4 {
  grid-area: title;
  margin: 0;
  align-self: end; /* Align title vertically at the end, or bottom */
  text-align: center;
}

.ebay-results-list .ebay-item p {
  grid-area: price;
  margin: 0;
  align-self: center; /* Align price vertically at the center */
  text-align: center;
}

.ebay-results-list .ebay-item .ebay-logo {
  grid-area: logo;
  margin: 0;
  align-self: start; /* Align logo vertically at the start, or top */
  justify-self: center; /* Center the logo horizontally */
}


/*********** Responsive Design for eBay Results List for Larger Screen ***********/
@media (min-width: 900px) {
  .ebay-results-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1.25rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
    justify-content: center; /* Center cards horizontally when row not full */
  }
  .ebay-results-list .ebay-item {
    grid-template-columns: 200px 1fr;
  }
}


/******* eBay Block Hint in Admin Panel *******/

.ebay-block-hint {
  color: #666;
  font-style: italic;
  font-size: 0.9em;
  margin-top: 1em;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.ebay-block-hint::before {
  content: "\1F6D2"; /* Unicode for shopping cart 🛒 */
  font-style: normal;
  font-size: 1em;
  display: inline-block;
}