/**
 * Product Card Styles
 *
 * Custom styles for the product card component
 */

/* Product Card Container */
.product-card {
	position: relative;
	margin-bottom: 0rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	padding: 0; /* Add padding for gap between cards */
	display: flex; /* Use flexbox for equal height */
	height: 100%; /* Full height */
	padding-bottom: 2.5rem;

	&:hover {
		transform: translateY(-5px);
	}

	.product-card-inner {
		display: flex;
		flex-direction: column;
		height: auto; /* Changed from 100% to auto for flexible height */
		width: 100%; /* Full width */
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
		transition: box-shadow 0.3s ease;
		position: relative;

		.product-cart-bottom {
			display: flex;
			flex-direction: column;
			justify-content: flex-end; /* Align items to the bottom */
			flex-grow: 1; /* Allow it to grow */

			.product-add-to-cart {
				margin-top: 10px;
				width: 100%;
			}
		}
	}

	&:hover .product-card-inner {
		/* x: 0, y: 55, blur: 85, #BCBCBC80 50% */
		box-shadow: 0 20px 40px rgba(188, 188, 188, 0.5)
	}

	/* Best Seller Badge */

	.best-seller-badge {
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 10;
		background-color: #720213;
		color: #fff;
		font-family: 'Manrope', sans-serif;
		font-weight: 600;
		font-size: 0.8rem;
		padding: 4px 8px;
		border-radius: 4px;
		text-transform: uppercase;
	}

	/* Product Image */

	.product-image-link {
		display: block;
		position: relative;
		overflow: hidden;
		padding-top: 100%; /* 1:1 Aspect Ratio */
	}

	/* Divider line below featured image */

	.product-image-link::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: rgba(179, 179, 179, 0.4); /* #B3B3B366 40% */
	}

	.product-image-link img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		object-fit: cover;
		transition: transform 0.5s ease;
		margin-top: 0;
		margin-bottom: 0;
	}

	&:hover .product-image-link img {
		transform: scale(1.05);
	}

	/* Product Content */

	.product-card-content {
		display: flex;
		flex-direction: column;
		padding: 16px;
		flex-grow: 1;
		justify-content: space-between; /* Distribute space between elements */
	}

	/* Product Category */

	.product-category {
		margin-bottom: 8px;
	}

	.product-category a {
		color: #B3B3B3;
		text-decoration: none;
		font-size: 14px;
	}

	.product-category a:hover {
		color: #000;
	}

	/* Product Title */

	.woocommerce-loop-product__title {
		font-family: 'Manrope', sans-serif;
		font-size: 1rem;
		font-weight: 700;
		margin: 0 0 8px 0;
		line-height: 1.3;
		color: #720213;
		margin-bottom: 1rem;
		min-height: auto; /* Changed from fixed height to auto */
	}

	.woocommerce-loop-product__title a {
		color: #720213;
		text-decoration: none;
		font-weight: 700;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		max-height: 2.5em;
		line-height: 1.25;
		margin: 0;
		padding: 0;
		word-break: break-word;
	}

	.woocommerce-loop-product__title a:hover {
		color: #CC0B2A;
	}

	/* Product Attributes */

	.product-card-attributes {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 12px;
		padding: 0;
	}

	.product-attribute {
		display: flex;
		align-items: center;
		font-size: 0.85rem;
		border: 1px solid #B3B3B3;
		border-radius: 5px;
		padding: 5px;
	}

	.attribute-icon-wrapper {
		position: relative;
		display: inline-flex;
		align-items: center;
		margin-right: 4px;
	}

	.attribute-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #720213;
	}

	.attribute-icon img,
	.attribute-icon svg,
	.attribute-icon i {
		width: 16px;
		height: 16px;
	}

	.attribute-tooltip {
		position: absolute;
		bottom: 100%;
		left: 0%;
		transform: translateX(50%);
		background-color: #fff;
		color: #000;
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 0.75rem;
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		transition: all 0.2s ease;
		z-index: 100;
	}

	.product-attribute:hover .attribute-tooltip {
		opacity: 1;
		visibility: visible;
	}

	.attribute-value {
		color: #484848;
	}

	/* Stock Status */

	.product-stock-status {
		display: flex;
		align-items: center;
		font-family: 'Manrope', sans-serif;
		font-size: 0.85rem;
	}

	.in-stock {
		color: #2BA200;
		font-weight: 700;
	}

	.out-of-stock {
		color: #999999;
		font-weight: 600;
	}

	.on-backorder {
		color: #ac0000;
		font-weight: 700;
	}

	.in-stock-svg {
		display: inline-flex;
		align-items: center;
		margin-left: 6px;
	}

	.in-stock-svg svg {
		width: auto;
		height: 16px;
	}

	/* Product Price */

	.product-price {
		font-family: 'Manrope', sans-serif;
		font-weight: 600;
	}

	.price,
	.price-wrapper {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: relative;
	}

	.price del,
	.price-wrapper del {
		color: #999999;
		font-size: 0.9rem;
		text-decoration: line-through;
		margin-bottom: 4px;
	}

	.price ins,
	.price-wrapper ins {
		color: #CC0B2A;
		font-size: 1.1rem;
		text-decoration: none;
		font-size: 24px;
	}

	.product-price bdi,
	.product-price bdi {
		color: #CC0B2A;
		font-size: 1.1rem;
		text-decoration: none;
		font-size: 24px;
	}

	/* Sale price row with discount */

	.sale-price-row {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.sale-price-row bdi,
	.sale-price-row bdi {
		color: #999999;
		font-size: 0.9rem !important;
		text-decoration: line-through;
		margin-bottom: 4px;
	}


	/* Discount percentage badge */

	.discount-percent {
		display: inline-block;
		background-color: #FFB32F;
		color: #FFFFFF;
		font-size: 0.75rem;
		font-weight: normal;
		padding: 0px 5px;
		border-radius: 8px;
		margin-left: 5px;
		font-size: 14px;
	}

	.sold-out-text {
		color: #CC0B2A;
		text-decoration: none;
		font-size: 24px;
		font-weight: 600;
	}

	/* Add to Cart Button */

	.product-add-to-cart a {
		margin-top: 8px;
	}

	.product-add-to-cart .button {
		display: inline-block;
		background-color: #CC0B2A;
		color: #fff;
		font-weight: normal;
		text-transform: uppercase;
		padding: 10px 30px;
		border-radius: 8px;
		border: 1px solid #CC0B2A;
		transition: all 0.3s ease;
		width: 100%;
		text-align: center;
	}

	.product-add-to-cart .button:hover {
		background-color: #990D23;
		border-color: #990D23;
	}

	.product-add-to-cart .added_to_cart {
		display: none;
	}
}


/* Mobile */
@media only screen and (max-width: 768px) {
	.product-card {
		&:hover {
			transform: none;
		}

		.woocommerce-loop-product__title a {
			-webkit-line-clamp: 3;
			max-height: 3.8em;
			overflow: visible;
		}

		.product-card-inner {
			box-shadow: none;
			border: 1px solid #f2f2f2;
		}

		.product-add-to-cart .button {
			padding-left: 20px;
			padding-right: 20px;
		}

		.product-card-attributes {
			overflow-x: auto; /* Allows horizontal scrolling */
			-webkit-overflow-scrolling: touch;
			flex-wrap: nowrap;

			.attribute-value {
				max-width: 100%;
			}

			.product-attribute {
				flex: 0 0 auto;
				white-space: nowrap; /* Prevents text from wrapping */

				.attribute-tooltip {
					display: none;
				}
			}
		}
	}
}