Template:CS/products/card/styles.css

/* Alignment utility (mirrors the approach used by CS button) */
.capsach-align { display: block; }
.capsach-align-left { text-align: left; }
.capsach-align-center { text-align: center; }
.capsach-align-right { text-align: right; }

/* Card wrapper: fixed width, inline-block so alignment works via parent text-align */
.cs-product-card {
  display: inline-block;
  width: 300px;            /* Fixed card width per requirements */
  vertical-align: top;
}

/* Media (image) area */
.cs-product-card__media {
  line-height: 0;          /* Remove stray gaps around inline images */
}

/* Ensure the actual <img> gets the border and scales to the card width.
   MediaWiki adds class "mw-file-element" to file-rendered images. */
.cs-product-card__media .mw-file-element {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border: 1px solid #a2a9b1;  /* Wikimedia UI Base50; matches infobox/table border tone */
  background: #fff;
}

/* Placeholder if no image was provided (keeps layout consistent) */
.cs-product-card__placeholder {
  display: block;
  width: 300px;
  box-sizing: border-box;
  border: 1px solid #a2a9b1;
  background: #f8f9fa;       /* Wikimedia light gray */
  /* Simple 3:2 area without aspect-ratio to remain TemplateStyles-friendly */
  padding-top: 66.6667%;
}

/* Accessible visible title (non-h* heading) */
.cs-product-card__title {
  margin-top: 8px;
  font-weight: 600;
  line-height: 1.35;
  /* Inherit font-size so it matches page context; tweak if needed locally */
  color: inherit;
}

/* Spacing before CTA */
.cs-product-card__cta {
  margin-top: 10px;
}