/*
 * The shop's product card.
 *
 * The card itself is Elementor Loop Item "Shop Product Card" (#2008), and any page that puts a
 * Loop Grid on that template draws the same card. Its design, however, was written into the shop
 * archive document's own Custom CSS, so it only existed on the archive; this file is that design,
 * as a component stylesheet a page can ask for.
 *
 * KNOWN DUPLICATE: the shop archive (#26468) still carries its own copy in the document's Custom
 * CSS, built from `_backups/shop-archive-redesign-20260921/tools/archive-template.css`. The rules
 * are identical, so nothing changes where both load. Consolidating - deleting the block from the
 * archive's Custom CSS and enqueueing this file on the shop too - is a small change that belongs
 * in a shop pass rather than an account one, and is noted in MY-ACCOUNT.md.
 */

:root {
	--cart-glyph: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM1 2h3.2l.9 3.6H22l-2.6 8.4H7.2L6.4 17H20v2H5.6a1.6 1.6 0 0 1-1.55-2L5.3 12 3 3H1z'/%3E%3C/svg%3E" );
}

.product-card {
	overflow: hidden;
	height: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-card:hover {
	border-color: var( --e-global-color-accent );
	box-shadow: 0 8px 24px rgba( 22, 33, 46, 0.09 );
}

.product-card__media {
	position: relative;
	min-height: 218px;
}

.product-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
}

.product-card__badge .elementor-heading-title:not(:empty) {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 3px;
	background-color: var( --e-global-color-accent );
}

.product-card__image img {
	display: block;
	width: 100%;
	height: 196px;
	object-fit: contain;
	padding: 14px;
}

.product-card__body {
	flex-grow: 1;
}

body .product-grid .e-loop-item .product-card > .product-card__body {
	flex-grow: 1;
}

.product-card__title .elementor-heading-title {
	display: -webkit-box;
	overflow: hidden;
	min-height: 2.8em;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.product-card__title a {
	color: inherit;
}

.product-card__title a:hover {
	color: var( --e-global-color-accent );
}

.product-card__price del {
	margin-left: 8px;
	color: var( --e-global-color-secondary );
	font-size: 0.78em;
	font-weight: 400;
}

.product-card__price ins {
	text-decoration: none;
}

.product-card__cart .button,
.product-card__cart .single_add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 11px 14px;
	border: 0;
	border-radius: 4px;
	background-color: var( --e-global-color-accent );
	color: var( --e-global-color-primary );
	font-family: var( --e-global-typography-accent-font-family ), sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.product-card__cart .button:hover,
.product-card__cart .button:focus-visible {
	background-color: var( --e-global-color-primary );
	color: #FFFFFF;
}

.product-card__cart .button::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 8px;
	vertical-align: -2px;
	background-color: currentColor;
	-webkit-mask-image: var( --cart-glyph );
	mask-image: var( --cart-glyph );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

.product-card__cart .added_to_cart {
	display: none;
}

.product-card a:focus-visible {
	outline: 2px solid var( --e-global-color-accent );
	outline-offset: 2px;
}

.product-card__title a:focus-visible {
	outline-offset: 1px;
}

/* -- Tablet ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	.product-card__media {
		min-height: 196px;
	}

	.product-card__image img {
		height: 174px;
	}
}

/* -- Mobile ---------------------------------------------------------------- */

@media (max-width: 767px) {
	.product-card__media {
		min-height: 168px;
	}

	.product-card__image img {
		height: 148px;
		padding: 10px;
	}

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