/**
 * Product card — used in carousels, archives, anywhere a product preview is needed.
 */

.product-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	background: var(--color-white);
	height: 100%;
}

/* === Media === */
.product-card__media {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 256px;
	padding: var(--space-4);
	border-radius: 12px;
	overflow: hidden;
	isolation: isolate;
	text-decoration: none;
}

.product-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transition: transform var(--transition-base);
}

.product-card__image--placeholder {
	background: var(--color-grey-bg);
}

.product-card:hover .product-card__image {
	transform: scale(1.04);
}

/* === Badges === */
.product-card__badges {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	align-items: flex-start;
}

.product-card__badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	line-height: var(--leading-snug);
	color: var(--color-black);
	border-radius: 6px;
	white-space: nowrap;
}

.product-card__badge--sale {
	background: var(--color-pink-shocking);
}

.product-card__badge--top {
	background: var(--color-yellow-golden);
}

.product-card__badge--popular {
	background: var(--color-coral);
}

.product-card__badge--new {
	background: #88C0C7;
}

/* === Wishlist === */
.product-card__wishlist {
	position: absolute;
	right: 19px;
    bottom: 26px;
	z-index: 2;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	background: var(--color-white);
	color: var(--color-black);
	box-shadow: var(--shadow-sm);
	transition: color var(--transition-fast), transform var(--transition-fast);
}

.product-card__wishlist:hover {
	color: var(--color-primary);
	transform: scale(1.08);
}

.product-card__wishlist[aria-pressed="true"] {
	color: var(--color-primary);
}

.product-card__wishlist[aria-pressed="true"] svg {
	fill: var(--color-primary);
}

/* === Body === */
.product-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-inline: 0;
	flex: 1;
}

.product-card__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding-inline: 0;
}

.product-card__brand,
.product-card__title {
	font-family: var(--font-heading);
	font-size: 1.125rem;       /* 18px */
	font-weight: var(--font-bold);
	line-height: var(--leading-normal);
	color: var(--color-black);
	margin: 0;
}

.product-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.product-card__title a:hover {
	color: var(--color-primary-hover);
}

/* === Rating === */
.product-card__rating {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-1);
}

.product-card__stars {
	--rating: 0%;
	display: inline-block;
	width: 100px;
    height: 20px;
	background: linear-gradient(90deg, #FFB8CD var(--rating), var(--color-grey-border) var(--rating));
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'><defs><polygon id='s' points='10,1 12.5,7 19,7.5 14,12 15.5,18.5 10,15 4.5,18.5 6,12 1,7.5 7.5,7'/></defs><use href='%23s' fill='black'/><use href='%23s' x='20' fill='black'/><use href='%23s' x='40' fill='black'/><use href='%23s' x='60' fill='black'/><use href='%23s' x='80' fill='black'/></svg>");
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'><defs><polygon id='s' points='10,1 12.5,7 19,7.5 14,12 15.5,18.5 10,15 4.5,18.5 6,12 1,7.5 7.5,7'/></defs><use href='%23s' fill='black'/><use href='%23s' x='20' fill='black'/><use href='%23s' x='40' fill='black'/><use href='%23s' x='60' fill='black'/><use href='%23s' x='80' fill='black'/></svg>");
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}

.product-card__rating-value {
	font-family: var(--font-sans);
    font-size: 16px;
    font-weight: var(--font-semibold);
    color: var(--color-black);
    line-height: 24px;
}

/* === Footer === */
.product-card__footer {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-inline: 0;
	margin-top: auto;
	padding: 0 8px;
}

.product-card__footer .price.price--was:before {
    content: "";
    position: absolute;
    border-top: 1px solid #FFB8CD;
    width: 100%;
    top: 50%;
    translate: 0 0%;
}

.product-card__price {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
}

.price {
	font-family: var(--font-heading);
	font-weight: var(--font-bold);
	color: var(--color-black);
	line-height: 1.3;
}

.product-card__footer .price.price--current .price__symbol, .product-card__footer .price.price--current .price__whole {
    font-size: 22px;
    font-weight: 700;
    line-height: 29px;
}

.product-card__footer .price.price--current .price__cents {
    font-size: 0.9rem;
    font-weight: var(--font-bold);
    margin-left: 1px;
    top: 1px;
    position: relative;
}

.product-card__footer .price--was  .price__cents {
	font-size: 11px;         /* ~14.4px */
	font-weight: var(--font-bold);
	margin-left: 1px;
	top: 1px;
	color: #FFB8CD;
	position: relative;
}

.product-card__footer .price--was .price__symbol {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #FFB8CD;
}

.product-card__footer .price--was {
	color: var(--color-pink-shocking);
	text-decoration: none;
}

.product-card__footer .price--was .price__whole {
	font-size: 16px !important;
}

.product-card__footer .price.price--was {
    line-height: 24px;
	position: relative;
}

.price--was .price__cents {
	font-size: 0.65rem;
}

/* === Cart button === */
.product-card__cart {
	width: 100%;
	gap: var(--space-2);
	padding-inline: var(--space-6);
	border: 1px solid #000;
    background: transparent;
}

.product-card__cart:hover {
	border: 1px solid #FFB8CD;
    background: #FFB8CD;
}

.product-card__cart-icon {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	line-height: 1;
}

/* WC AJAX states */
.product-card__cart.loading {
	opacity: 0.7;
	pointer-events: none;
}

.product-card__cart.added::after {
	content: "✓";
	margin-left: var(--space-2);
}

@media (max-width: 768px) {
	.product-card__brand, .product-card__title {
		font-size: 16px;
		line-height: 22px;
	}
	.product-card__rating-value {
		font-size: 14px;
		line-height: 20px;
	}
}