/*
 * Safari-safe catalogue layout. This file has a versioned URL deliberately:
 * old service workers or Safari's stylesheet cache must never keep a broken
 * product-card grid alive after a deployment.
 */
.product-card:not(.product-card--brand) {
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden;
}

.product-card:not(.product-card--brand) .product-card-link {
  display:grid !important;
  grid-template-columns:190px minmax(0, 1fr) !important;
  width:100% !important;
  min-width:0 !important;
  min-height:212px;
}

.product-card:not(.product-card--brand) .product-shot {
  display:grid !important;
  place-items:center !important;
  width:100% !important;
  min-width:0 !important;
  min-height:212px !important;
  padding:16px !important;
  border:0 !important;
  border-right:1px solid #eee5e9 !important;
  border-radius:0 !important;
  background:#fff !important;
}

.product-card:not(.product-card--brand) .product-image,
.product-card:not(.product-card--brand) .product-image > img {
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
}

.product-card:not(.product-card--brand) .product-image > img {
  object-fit:contain !important;
  object-position:center center !important;
}

.product-card:not(.product-card--brand) .product-card-copy {
  display:flex !important;
  width:100% !important;
  min-width:0 !important;
  padding:18px 20px 16px !important;
}

.product-card:not(.product-card--brand) .product-card-main {
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  min-width:0 !important;
  min-height:178px !important;
}

.product-card:not(.product-card--brand) .evidence-metrics--compact {
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  width:100% !important;
  margin-top:auto !important;
}

.product-card:not(.product-card--brand) .evidence-metrics--compact .metric {
  display:grid !important;
  grid-template-columns:17px minmax(0, 1fr) !important;
  grid-template-rows:auto auto;
  min-width:0 !important;
  gap:0 5px !important;
  padding:9px 4px 5px !important;
}

.product-card:not(.product-card--brand) .evidence-metrics--compact .metric svg { grid-row:1; align-self:center; }
.product-card:not(.product-card--brand) .evidence-metrics--compact .metric strong { min-width:0; line-height:1; white-space:nowrap; }
.product-card:not(.product-card--brand) .evidence-metrics--compact .metric em {
  grid-column:1 / -1;
  min-width:0;
  margin-top:4px;
  overflow:hidden !important;
  font-size:10px !important;
  line-height:1.1 !important;
  text-align:left !important;
  text-overflow:ellipsis;
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

/* At tablet width, two narrow product columns cause the label/metric collapse
 * seen in mobile Safari. One complete card is more readable and tappable. */
@media (max-width:1120px) {
  .product-grid,
  .home-product-grid { grid-template-columns:1fr !important; }
}

@media (max-width:900px) {
  .product-card:not(.product-card--brand) .product-card-link {
    grid-template-columns:1fr !important;
    min-height:0 !important;
  }

  .product-card:not(.product-card--brand) .product-shot {
    min-height:0 !important;
    aspect-ratio:16 / 10 !important;
    padding:12px !important;
    border-right:0 !important;
    border-bottom:1px solid #eee5e9 !important;
    border-radius:14px 14px 0 0 !important;
  }

  .product-card:not(.product-card--brand) .product-card-copy { padding:16px !important; }
  .product-card:not(.product-card--brand) .product-card-main { min-height:0 !important; }
}