/* WAI LAB product image surfaces — aligned with the home hero palette. */
.wl-product-grid {
  background: #fff;
  border-color: #fff;
}

.wl-product-media,
.wl-product-large-media {
  background: #fff;
}

/* Product assets are normalized on pure white: keep the complete media area
   white as well, so no coloured band can visually crop the packshot. */
.wl-product-media .wl-real-product-image,
.wl-product-large-media .wl-real-product-image {
  background: #fff !important;
}

.wl-product-body .wl-score-chip-inline {
  position: static;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  margin: 0 0 12px;
  overflow: visible;
  border: 1px solid rgba(39, 49, 44, .14);
  background: #fff;
  color: var(--wl-sage-deep);
  line-height: 1.2;
  text-overflow: clip;
  white-space: nowrap;
}

.wl-product-media .wl-verified-chip {
  z-index: 4;
  background: #fff;
}

/* Keep price separators and actions aligned across every row, independently
   from the number of lines used by product names, metadata and actives. */
.wl-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wl-product-card .wl-product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.wl-product-card .wl-product-footer {
  margin-top: auto;
}

/* Routine cards use compact thumbnails. This explicit size intentionally
   overrides the global responsive packshot rule from the editorial theme. */
.wl-routine-product > .wl-real-product-image {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px;
  max-width: 54px !important;
  max-height: 54px !important;
  flex: 0 0 54px;
  object-fit: contain !important;
  background: #fff !important;
}

@media (max-width: 540px) {
  .wl-routine-product > .wl-real-product-image {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    max-width: 48px !important;
    max-height: 48px !important;
    flex-basis: 48px;
  }
}