Template:CS/products/card/styles.css

/* Template:CS/products/card/styles.css (fixed for TemplateStyles) */
.capsach-card{width:100%;max-width:480px;margin:0}
.capsach-align-left{margin-left:0;margin-right:auto;text-align:left}
.capsach-align-center{margin-left:auto;margin-right:auto;text-align:left}
.capsach-align-right{margin-left:auto;margin-right:0;text-align:left}
.capsach-card__title{margin:0 0 .5rem 0;font-weight:600;font-size:1.1em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.capsach-card__media{position:relative;overflow:hidden;border-radius:.75rem;background-color:#f5f6f7}
.capsach-card__media-link{display:block;color:inherit;text-decoration:none}
.capsach-card__img{display:block;width:100%;height:auto}

/* Placeholder: 16:10 intrinsic ratio without aspect-ratio */
.capsach-card__placeholder{
  display:block;
  width:100%;
  height:0;               /* create intrinsic box */
  padding-top:62.5%;      /* 10 / 16 = 0.625 */
  background-image:linear-gradient(180deg,#f2f3f5,#e6e7e9);
}

.capsach-card__overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:.5rem;
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))
  /* no pointer-events (not allowed by TemplateStyles) */
}

.capsach-chip{
  display:inline-flex;
  max-width:calc(50% - .375rem);
  padding:.375rem .625rem;
  border-radius:999px;
  line-height:1.2;
  font-size:.875em;
  box-shadow:0 0 0 1px rgba(255,255,255,.15) inset;
  overflow:hidden;
}
.capsach-chip__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.capsach-chip--badge{background:rgba(0,0,0,.78);color:#fff}
.capsach-chip--price{background:rgba(255,255,255,.95);color:#202122;box-shadow:0 0 0 1px rgba(0,0,0,.08) inset}
.capsach-card__cta{margin-top:.5rem}

@media (min-width:768px){
  .capsach-card__title{font-size:1.15em}
}