/* ======================================================================
   Product Card Component
   Shared styles for product cards used on Home & Shop pages.
   ====================================================================== */

/* --- Card Container --- */
.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--potf-bg, #ffffff);
	border-radius: 16px;
	border: 1px solid rgba(0, 87, 217, 0.07);
	overflow: hidden;
	transition:
		transform 380ms cubic-bezier(.22, 1, .36, 1),
		box-shadow 380ms cubic-bezier(.22, 1, .36, 1);
}

.product-card:hover {
	transform: translateY(-6px);
	box-shadow:
		0 12px 40px rgba(0, 57, 156, 0.10),
		0 2px 8px rgba(0, 57, 156, 0.06);
}

/* --- Image Area --- */
.product-card__image-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 24px;
	background: #ECEAED;
	overflow: hidden;
}

.product-card__image-link {
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-card__image {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 200px;
	object-fit: contain;
	transition: transform 500ms cubic-bezier(.22, 1, .36, 1);
}

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

/* --- Badges --- */
.product-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

.product-card__badge--sale {
	background: #e8f8ee;
	color: #1a8a4a;
}

.product-card__badge--out-of-stock {
	background: #fef2f2;
	color: #b91c1c;
}

/* --- Info Area --- */
.product-card__info {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 22px 24px;
	align-items: center;
	text-align: center;
}

.product-card__title-link {
	width: 100%;
	text-decoration: none;
	color: inherit;
}

.product-card__title-link:hover .product-card__title {
	color: var(--potf-primary, #0057D9);
}

.product-card__title {
	margin: 0;
	font-family: var(--potf-font-heading, 'Inter'), sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--potf-secondary, #0B1F3A);
	transition: color 200ms ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Price --- */
.product-card__price {
	margin-top: auto;
	padding-top: 12px;
	font-family: var(--potf-font-heading, 'Inter'), sans-serif;
	font-size: 20px;
	font-weight: 800;
	color: var(--potf-secondary, #0B1F3A);
}

.product-card__price del {
	font-size: 14px;
	font-weight: 500;
	color: var(--potf-muted, #8A9AB3);
	margin-right: 6px;
}

.product-card__price ins {
	text-decoration: none;
	color: var(--potf-primary, #0057D9);
}

/* --- Actions --- */
.product-card__actions {
	width: 100%;
	margin-top: 16px;
}

.product-card__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	font-family: var(--potf-font-body, 'Inter'), sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 250ms ease,
		color 250ms ease,
		transform 250ms ease,
		box-shadow 250ms ease;
}

.product-card__button--cart {
	background: var(--potf-primary, #0057D9);
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(0, 87, 217, 0.25);
}

.product-card__button--cart:hover {
	background: #003f9f;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 87, 217, 0.35);
}

.product-card__button--cart.added::after {
	content: " ✓";
}

.product-card__button--unavailable {
	background: #f1f5f9;
	color: var(--potf-muted, #8A9AB3);
	cursor: not-allowed;
}

.product-card__cart-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* --- Card Variant: Full (Shop page) --- */
.product-card--full .product-card__image-wrap {
	padding: 32px 28px 24px;
}

.product-card--full .product-card__image {
	max-height: 220px;
}

.product-card--full .product-card__title {
	font-size: 16px;
}

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width: 640px) {
	.product-card__image-wrap {
		padding: 22px 18px 16px;
	}

	.product-card__image {
		max-height: 160px;
	}

	.product-card__info {
		padding: 16px 16px 20px;
	}

	.product-card__title {
		font-size: 14px;
	}

	.product-card__price {
		font-size: 18px;
	}

	.product-card__button {
		min-height: 40px;
		font-size: 11px;
	}
}

/* ======================================================================
   Reduced Motion
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {

	.product-card,
	.product-card__image,
	.product-card__button,
	.product-card__title {
		transition: none;
	}

	.product-card:hover {
		transform: none;
	}

	.product-card:hover .product-card__image {
		transform: none;
	}
}