.productCard {
  display:inline-block;
  width:260px;
  border:1px solid #000;
  box-shadow:3px 3px 4px rgba(0,0,0,0.2);
  padding-top:4px;
  margin-top:4px;
  margin-right:12px;
  margin-bottom:9px;
  padding:16px;
  vertical-align:top;
}
.productCard * {
  vertical-align:top;
}

.productCard .top {
  text-align:center;
}
.productCard .bottom {
  margin-top:8px;
}

.productCard .constrainedImage {
  max-width:225px;
  max-height:225px;
}

.productCard .name {
  font-size:1.6em;
  font-weight:bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.productCard .rating {
  position:relative;
  font-size:0.8em;
  padding:3px;
  height:1em;
  background-color:#DEDEDE;
  overflow:hidden;
  text-align:center;
  border-radius:4px;
  
  display:inline-block;
  border:1px solid #000;
  width:calc( 50% - 8px );
}
.productCard .rating .ratingBar {
  position:absolute;
  top:0px;
  left:0px;
  height:100%;
  
  background-color: white;
  mix-blend-mode: difference;
}

.productCard div.viewLink {
  text-align:right;
  display:block;
  font-size:0.8em;
  margin-top:2px;
  font-style:italic;
}
.productCard div.viewLink a:link {
  color:#888;
  text-decoration:none;
}
.productCard div.viewLink a:link:hover {
  text-decoration:underline;
}

.productCard div.price, .productCard div.sellPrice, .productCard div.projectedProfit {
  margin-left:12px;
  margin-top:8px;
  font-size:18px;
}

.productCard div.price::before, .productCard div.sellPrice::before, .productCard div.projectedProfit::before {
  text-align:left;
  display:block;
  color:#000;
  font-size:14px;
  margin-bottom:2px;
  margin-left:-12px;
}
.productCard div.price::before {
  content:'Buy price: ';
}
.productCard div.sellPrice::before {
  content:'Projected sale price: ';
}
.productCard div.projectedProfit::before {
  content:'Projected monthly profit: ';  
}


.productCard div.projectedProfit {
  font-size:20px;
  color:#08F;
  font-weight:bold;
}

.productCard .viewAnalysis {
  visibility:hidden;
  text-align:center;
  color:#AAA;
  font-size:16px;
  cursor:pointer;
  padding:12px 0px 6px;
}
.productCard:hover .viewAnalysis {
  visibility:visible;
}
.productCard .viewAnalysis:hover {
  text-decoration:underline;
}
.productCard .viewAnalysis::before {
  content:'View analysis...';
}


.trendSource {
  color:#08F;
  font-size:12px;
  text-align:right;
}
.trendSource > div {
  vertical-align:top;
}
.trendSource .term::before {
  content:"Related to '";
  font-size:10px;
}
.trendSource .term::after {
  content:"'";
  font-size:10px;
}
.trendSource .source::before {
  content:"from ";
  font-size:10px;
}