/* Product grid (.vitrine) and the product card (.pcard, template-parts/plinth-card.php). */
.vitrine {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr));
	gap: var(--s-5) clamp(12px, 1.6vw, 24px);
}
@media (min-width: 768px) and (max-width: 1023px) { .vitrine { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
@media (max-width: 767px) { .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } }

.pcard {
	container: pcard / inline-size;
	position: relative; display: flex; flex-direction: column; min-width: 0;
	background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color var(--dur-2) var(--ease-out);
}
@media (hover: hover) { .pcard:hover { border-color: var(--hairline-strong); } }
@supports selector(:has(*)) {
	.pcard:has(.pcard__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
	.pcard__link:focus-visible { outline: none; }
}

/* The well: mist, the product centred; a cut-out stands on a soft shadow and lifts when the card is pointed at. */
/* min-height 0 + a fixed track: a tall cut-out (outdoor access points) is fitted inside the ratio instead of stretching it */
.pcard__media { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 0.84; min-height: 0; grid-template: minmax(0, 1fr) / minmax(0, 1fr); background: var(--mist); transition: background-color var(--dur-3) var(--ease-out); }
.pcard__img { width: auto; height: auto; max-width: 80%; max-height: 78%; object-fit: contain; transition: transform var(--dur-4) var(--ease-out-expo), filter var(--dur-4) var(--ease-out-expo), box-shadow var(--dur-4) var(--ease-out-expo); }
.pcard--cutout .pcard__img { filter: drop-shadow(var(--shadow-rest)); }
.pcard--photo .pcard__img { max-width: 72%; max-height: 72%; padding: 4%; background: var(--paper); border-radius: var(--r-sm); box-shadow: 0 1px 3px rgb(16 24 40 / 0.08); }
@media (hover: hover) {
	.pcard:hover .pcard__media { background: var(--mist-2); }
	.pcard--cutout:hover .pcard__img { transform: translateY(-8px) scale(1.04); filter: drop-shadow(var(--shadow-lift)); }
	.pcard--photo:hover .pcard__img { transform: translateY(-6px); box-shadow: var(--shadow-card); }
}
.pcard__empty { display: grid; place-items: center; width: 34%; aspect-ratio: 1; color: var(--hairline-strong); }
.pcard__empty svg { width: 100%; height: 100%; }
.pcard__note { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; padding: 4px 9px; border-radius: var(--r-pill); background: var(--paper); font-size: var(--text-xs); font-weight: 700; color: var(--muted); white-space: nowrap; }

.pcard__body { --pcard-name: var(--text-base); --pcard-maker: 0.8125rem; flex: 1; display: flex; flex-direction: column; padding: 14px 16px 16px; }
/* The name, then the maker line right under it. The pair reserves two name lines plus the maker line, so a one-line
   name keeps its maker tight under it and every card in a row still has the same height and price baseline. */
.pcard__head { min-height: calc(var(--pcard-name) * 2.6 + 4px + var(--pcard-maker) * var(--leading-body)); }
.pcard__name {
	font-family: var(--font-display); font-weight: 500; font-size: var(--pcard-name); line-height: 1.3; letter-spacing: -0.005em;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.pcard__maker { margin: 4px 0 0; font-size: var(--pcard-maker); line-height: var(--leading-body); font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__link { color: var(--ink); text-decoration: none; }
.pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
@media (hover: hover) { .pcard__link:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; } }

.pcard__buy { margin-top: auto; padding-top: var(--s-3); display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.pcard__price { font-size: 1.1875rem; }
.pcard__actions { position: relative; z-index: 2; display: flex; gap: var(--s-2); }
.pcard__btn {
	position: relative; flex: none; width: 44px; height: 44px;
	display: grid; place-items: center; border-radius: 50%; text-decoration: none; cursor: pointer;
	transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out);
}
.pcard__btn:focus-visible { outline-offset: 2px; }
.pcard__btn .icon { width: 22px; height: 22px; }
.pcard__wa { background: var(--paper); color: var(--ink); border: 1.5px solid var(--hairline-strong); }
@media (hover: hover) { .pcard__wa:hover { border-color: var(--ink); } }
.pcard__wa:active { transform: scale(0.92); background: var(--mist); }
.pcard__add { background: var(--action); color: var(--on-action); }
@media (hover: hover) { .pcard__add:hover { background: var(--action-hover); transform: scale(1.06); } }
.pcard__add:active { background: var(--action-press); transform: scale(0.92); }
.pcard__add-icon { display: grid; place-items: center; }
.pcard__add-icon .icon { grid-area: 1 / 1; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-spring); }
.pcard__add-label { display: none; }
.pcard__check { opacity: 0; transform: scale(0.4); }
.pcard__add.is-added .pcard__plus { opacity: 0; transform: scale(0.4) rotate(90deg); }
.pcard__add.is-added .pcard__check { opacity: 1; transform: none; }
.pcard__add.loading { pointer-events: none; }
.pcard__add.loading > * { visibility: hidden; }
.pcard__add.loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--on-action); border-right-color: transparent; animation: twomag-spin 0.7s linear infinite; }

/* Narrow cards (two to a row on phones): the price takes the whole line, the buttons sit under it. */
@container pcard (max-width: 230px) {
	.pcard__body { --pcard-name: 0.9375rem; --pcard-maker: var(--text-xs); padding: 12px 12px 12px; }
	.pcard__buy { flex-direction: column; align-items: stretch; gap: 10px; }
	.pcard__price { font-size: 1.0625rem; }
	.pcard__actions { flex-direction: row-reverse; }
	.pcard__add { flex: 1; width: auto; display: flex; justify-content: center; gap: 6px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--text-sm); }
	.pcard__add-label { display: inline; }
	.pcard__add .icon { width: 20px; height: 20px; }
	@media (hover: hover) { .pcard__add:hover { transform: none; } }
}