/* ==========================================================================
   PLS product card + product grid. Shop-owned; loaded on every page because
   home and related products render cards too (spec section 7).

   Grid columns: --cols-m (mobile, default 2) and --cols-d (>= 990px, default 4)
   can be overridden by any wrapper (the shop sets 2 / 3).
   ========================================================================== */

.product-grid {
	--cols: var(--cols-m, 2);
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	gap: var(--grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 750px) {
	.product-grid { --cols: var(--cols-d, 4); }
}

.card { position: relative; margin: 0; min-width: 0; list-style: none; }
.card__link { display: block; color: inherit; text-decoration: none; }
.card__link:hover { text-decoration: none; }

/* Image ------------------------------------------------------------------- */
.card__media {
	position: relative; display: block; overflow: hidden;
	aspect-ratio: 3 / 4; background: var(--c-cream);
}
.card__img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; transition: opacity .4s var(--ease);
}
.card__img--hover { display: none; opacity: 0; }
@media (min-width: 990px) and (hover: hover) {
	.card__img--hover { display: block; }
	.card__link:hover .card__img--hover,
	.card__link:focus-visible .card__img--hover { opacity: 1; }
}
.card--soldout .card__img { opacity: .55; }
.card--soldout .card__img--hover { display: none; }

/* Labels ------------------------------------------------------------------ */
.card__badges {
	position: absolute; top: var(--s-2); left: var(--s-2); z-index: 1;
	display: flex; flex-wrap: wrap; gap: var(--s-1); pointer-events: none;
}
.card__badge {
	display: inline-block; padding: 3px 6px; background: var(--c-bg); color: var(--c-ink);
	font-size: var(--fs-xxs); letter-spacing: var(--tracking-ui); text-transform: uppercase; line-height: 1.2;
}
.card__badge--sale { color: var(--c-sale); }

/* Info -------------------------------------------------------------------- */
.card__info { display: block; padding: var(--s-3) var(--s-3) var(--s-6); }
.card__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.card__title {
	min-width: 0; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase;
	line-height: 1.45; overflow-wrap: anywhere;
}
.card__dots { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; padding-top: 2px; }
/* Phones: two cards a row leave ~150px, so the dots go under the name instead of squeezing it mid-word. */
@media (max-width: 749px) {
	.card__row { flex-direction: column; gap: var(--s-1); }
	.card__title { overflow-wrap: break-word; }
}
.card__dot {
	display: block; width: 10px; height: 10px; border-radius: 50%;
	background: var(--dot, var(--c-cream)); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .18);
}
.card__dot--none { background: transparent; box-shadow: inset 0 0 0 1px var(--c-muted); }
.card__more { font-size: var(--fs-xxs); color: var(--c-muted); line-height: 1; }
.card__price { display: block; margin-top: var(--s-1); font-size: var(--fs-s); }
.card__price .amount { white-space: nowrap; }