/*
  PRODUCT LIST SECTION STYLES
  ===========================
  This is the "Drop Dead Gorgeous / Earring Collection" section:
  a heading, then a grid of product cards.
*/

.product-list {
  background-color: var(--color-scheme5-background);
  color: var(--color-scheme5-foreground);
  padding: 48px 40px 64px 40px;
}

/* The two stacked heading lines above the products */
.product-list__header {
  text-align: center;
  margin-bottom: 28px;
}

.product-list__header h2 {
  font-family: var(--font-primary);
  font-size: var(--font-size-h2);
  margin: 0 0 4px 0;
  color: var(--color-scheme5-foreground-heading);
}

/* CSS Grid: a layout system for rows AND columns at once (unlike Flexbox,
   which is really built for a single row or column). Perfect for product grids. */
.product-list__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal-width columns on desktop */
  gap: 12px;
}

/* On phones, drop to 2 columns -- matches your Shopify "mobile_columns: 2" setting */
@media (max-width: 749px) {
  .product-list__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-list {
    padding: 32px 20px 40px 20px;
  }
}

.product-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 10px; /* matches your "border_radius: 10" setting */
  overflow: hidden; /* keeps the image corners rounded, matching the card */
}

.product-card__image-wrapper {
  width: 100%;
  aspect-ratio: 3 / 4; /* a portrait-ish crop, common for jewelry product photography */
  overflow: hidden;
  background-color: #e8dde6; /* soft placeholder tone while the image loads */
}

.product-card__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__title {
  font-family: var(--font-body);
  font-size: 1rem;
  margin: 12px 0 4px 0;
}

.product-card__price {
  font-family: var(--font-body);
  font-size: 1rem;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.product-card__price--sale {
  color: #b0475a; /* a muted red/rose to signal "on sale", common ecommerce convention */
  font-weight: bold;
}

.product-card__price--compare {
  text-decoration: line-through;
  opacity: 0.6;
  font-size: 0.9rem;
}