/* Drop this <link> below your main CSS:  <link rel="stylesheet" href="/css/site-cards.css"> */
.product-card .cover,
.blog-card .cover{ width:100%; aspect-ratio: 1 / 1; border-radius:12px; background:#0f1622; border:1px solid #1e2a36; overflow:hidden }
.product-card .cover img,
.blog-card .cover img{ width:100%; height:100%; object-fit:contain; display:block }
/* ===== TSH PRODUCT EMBED (blog posts) ===== */
.tsh-product{
  margin:14px 0;
}
.tsh-product .tsh-prod-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.tsh-product .tsh-prod-img{
  width:120px;
  aspect-ratio: 1 / 1;
  border-radius:14px;
  overflow:hidden;
  flex:0 0 auto;
  background: rgba(255,255,255,.06);
}
.tsh-product .tsh-prod-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tsh-product .tsh-prod-body{
  flex:1;
  min-width:0;
}
.tsh-product .tsh-prod-title{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.2;
}
.tsh-product .tsh-prod-meta{
  opacity:.8;
  font-size:13px;
  margin:0 0 8px;
}
.tsh-product .tsh-prod-desc{
  margin:0 0 10px;
  opacity:.95;
}
.tsh-product .tsh-prod-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.tsh-product .tsh-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
}
.tsh-product .tsh-btn:hover{
  background: rgba(255,255,255,.12);
}
.tsh-product .tsh-btn.primary{
  background: rgba(80,140,255,.25);
  border-color: rgba(80,140,255,.35);
}
.tsh-product .tsh-btn.primary:hover{
  background: rgba(80,140,255,.32);
}

/* Mobile stack */
@media (max-width:520px){
  .tsh-product .tsh-prod-card{ flex-direction:column; }
  .tsh-product .tsh-prod-img{ width:100%; aspect-ratio: 16 / 9; }
}