/* Product cards: one compact panel, same metadata everywhere. */
.frame { overflow: hidden; }
.frame__bar { display: flex; gap: .25rem; align-items: center; height: 1.25rem; padding-inline: .5rem; border-bottom: 1px solid var(--line); background: var(--sidebar); }
.frame__bar i { width: .35rem; height: .35rem; border-radius: 50%; background: var(--line-strong); }
.frame__view { position: relative; container-type: inline-size; overflow: hidden; aspect-ratio: var(--ratio, 16 / 10); background: var(--inset); }
.frame__view > img { width: 100%; height: 100%; object-fit: cover; }
.frame__monogram { position: absolute; inset: 0; display: grid; place-items: center; color: var(--line-strong); font-size: 18cqw; font-weight: 600; }

.card { min-width: 0; }
.card__link { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: inherit; text-decoration: none; overflow: hidden; transition: border-color .15s, background-color .15s; }
.card__visual { border-bottom: 1px solid var(--line); }
.card__text { display: grid; flex: 1; align-content: start; gap: .2rem; padding: .65rem .75rem .7rem; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card__title { overflow: hidden; font-size: .875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.card__desc { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.card__meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .45rem; color: var(--muted); font-size: .75rem; }
.card__price { color: var(--ink); font-weight: 500; }
.card__price--off { color: var(--muted); font-weight: 400; }
.card__price del { color: var(--faint); margin-right: .3em; }
.card__price ins { text-decoration: none; }

@media (hover: hover) {
	.card__link:hover { border-color: var(--line-strong); background: var(--sidebar); }
	.card__link:hover .plate { transform: translateY(var(--walk, -24%)); transition: transform 5s linear; }
}

/* Previews stay quiet until you engage with them, so color is controlled across the page. */
.plate { filter: saturate(.6) brightness(.78); }
.product-stage .plate { filter: saturate(.85) brightness(.92); }
@media (hover: hover) {
	.card__link:hover .plate { filter: none; }
}