/*
 * sodnamis — product-card.css
 * Author: sodnamis.lt
 */
.product-card { display: flex; flex-direction: column; }
.product-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__badge { position: absolute; top: 0.75rem; left: 0.75rem; }

.product-card__body { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.25rem; flex: 1; }
.product-card__name { margin: 0; }
.product-card__name a { color: hsl(var(--foreground)); }
.product-card__name a:hover { color: hsl(var(--primary)); }

.product-card__specs { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.product-card__specs li {
  flex: 1; display: flex; flex-direction: column; gap: 0.1rem; align-items: center;
  padding: 0.5rem 0.25rem; background: hsl(var(--secondary) / 0.6); border-radius: 0.5rem; text-align: center;
}
.product-card__spec-val { font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: hsl(var(--foreground)); }
.product-card__spec-key { font-size: 0.7rem; color: hsl(var(--muted-foreground)); }

/* Standard / Premium toggle */
.product-card__tier { display: inline-flex; padding: 3px; background: hsl(var(--secondary)); border-radius: 9999px; align-self: flex-start; }
.product-card__tier input { position: absolute; opacity: 0; pointer-events: none; }
.product-card__tier label {
  padding: 0.35rem 0.9rem; font-size: 0.8rem; font-weight: 600; border-radius: 9999px;
  cursor: pointer; color: hsl(var(--muted-foreground)); transition: background 0.15s ease, color 0.15s ease;
}
.product-card__tier input:checked + label { background: hsl(var(--background)); color: hsl(var(--primary)); box-shadow: var(--shadow-soft); }
.product-card__tier input:focus-visible + label { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

.product-card__price { margin: 0; display: flex; align-items: baseline; gap: 0.4rem; margin-top: auto; }
.product-card__price-from { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.product-card__price .price { font-family: var(--font-heading); font-weight: 800; font-size: 1.35rem; color: hsl(var(--primary)); }

.product-card__actions { display: flex; gap: 0.5rem; }
.product-card__actions .btn { flex: 1; }