/* ==========================================================================
   TattooClub — shared product card (.shp-card).
   Single source of the card styles, used by the Boutique grid (shop.js) and
   by « Vu récemment » (PDP rail, Boutique strip). Extracted unchanged from
   shop.css on 2026-09-28 so both render the same component.
   ========================================================================== */
.shp-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--shp-line, #DAD4C8);
}
.shp-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--shp-cream, #F9F5EF);
	display: flex;
	align-items: center;
	justify-content: center;
}
.shp-card__media img {
	width: 78%;
	height: 78%;
	object-fit: contain;
}
.shp-card__media a { display: block; width: 100%; height: 100%; }
.shp-card__heart {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--shp-dark, #111111);
	z-index: 2;
}
.shp-card__heart.is-active { color: #A3273A; }
.shp-card__heart.is-active i { font-weight: 900; }
.shp-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.shp-card__name {
	font-size: 14px;
	font-weight: 700;
	color: var(--shp-dark, #111111);
	text-decoration: none;
}
.shp-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.shp-card__price {
	font-size: 14px;
	font-weight: 700;
	color: var(--shp-dark, #111111);
}
.shp-card__add {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--shp-dark, #111111);
	color: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex: 0 0 auto;
}
.shp-card__add:hover { background: var(--shp-green, #B7E41C); color: var(--shp-dark, #111111); }
.shp-card__add.is-added { background: var(--shp-green, #B7E41C); color: var(--shp-dark, #111111); }

/* Badges (2026-10-10) : aussi là où shop.css n'est pas chargé (accueil, rails). */
.shp-card__badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.shp-badge { display: inline-block; padding: 5px 9px; border-radius: 999px; font: 800 10.5px/1 'Space Grotesk', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.shp-badge--new { background: #B7E41C; color: #111111; }
.shp-badge--best, .shp-badge--sale { background: #E0262F; color: #fff; }
.shp-badge--limited { background: #111111; color: #fff; }
.shp-badge--oos { background: #fff; color: #111111; box-shadow: 0 0 0 1px #E8E4DC; }