/*
 * Product card of the new design (woocommerce/content-product-home.php, extras from
 * includes/theme/inc/product-card.php). Same look as the category listing cards
 * (components/instant-search.css, #cat-results .wa-is-card), "karta D": ribbons and
 * badge stack on the image, left-aligned 2-line name, benefit list, price box and
 * full-width cart button at the bottom. The ribbons, benefit list and price box are
 * shared parts (product-card-parts.css). The list layout (carousel / grid) is up
 * to the page: this file styles one card only.
 *
 * .pcard (li) > a.woocommerce-loop-product__link
 *   > .pcard__media (.card-ribbons, .pcard__badges, img) + .card-colors + h3.pcard__name
 *   + ul.card-usp + .card-price
 * .pcard > a.pcard__cart (woocommerce_template_loop_add_to_cart)
 */

.pcard {
	--card-pad-x: var(--nd-sp-10);

	display: flex;
	position: relative;
	flex-direction: column;
	gap: var(--nd-sp-7);
	min-width: 0;
	margin: 0;
	padding: var(--nd-sp-12) var(--card-pad-x);
	background: var(--nd-c-surface);
	font-size: var(--nd-fs-body);
	text-align: left;
	list-style: none;
}

.pcard .woocommerce-loop-product__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: stretch;
	gap: var(--nd-sp-7);
	color: var(--nd-c-ink);
	text-decoration: none;
}

/* Media: fixed-height contained image, ribbons and badges over its corners. */
.pcard__media {
	display: block;
	position: relative;
	align-self: stretch;
	height: var(--nd-pcard-img-h-home);
}

.pcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* WooCommerce extras the design does not show (the discount ribbon replaces the sale flash). */
.pcard .onsale,
.pcard .star-rating,
.pcard .added_to_cart {
	display: none;
}

.pcard__badges {
	display: flex;
	position: absolute;
	top: calc(var(--nd-sp-4) * -1);
	right: calc(var(--nd-sp-4) * -1);
	z-index: 2;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--nd-sp-5);
	pointer-events: none;
}

.pcard__energy {
	display: flex;
	align-items: stretch;
	filter: drop-shadow(var(--nd-shadow-badge));
}

.pcard__energy-arrow {
	display: grid;
	place-items: center;
	min-width: var(--nd-sp-26);
	padding: var(--nd-sp-2) var(--nd-sp-7) var(--nd-sp-2) var(--nd-sp-5);
	background: var(--nd-c-energy-a);
	font-size: var(--nd-fs-12);
	font-weight: var(--nd-fw-bold);
	line-height: 1;
	color: var(--nd-c-on-brand);
	clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%);
}

.pcard__energy--b .pcard__energy-arrow { background: var(--nd-c-energy-b); }
.pcard__energy--c .pcard__energy-arrow { background: var(--nd-c-energy-c); }
.pcard__energy--d .pcard__energy-arrow { background: var(--nd-c-energy-d); }
.pcard__energy--e .pcard__energy-arrow { background: var(--nd-c-energy-e); }
.pcard__energy--f .pcard__energy-arrow { background: var(--nd-c-energy-f); }
.pcard__energy--g .pcard__energy-arrow { background: var(--nd-c-energy-g); }

.pcard__energy-scale {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 var(--nd-sp-3);
	border: var(--nd-border-strong) solid var(--nd-c-head);
	background: var(--nd-c-surface);
	font-size: var(--nd-fs-11);
	font-weight: var(--nd-fw-bold);
	line-height: var(--nd-lh-badge);
	color: var(--nd-c-head);
	white-space: nowrap;
}

.pcard__hc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--nd-sp-44);
	height: var(--nd-sp-44);
	border-radius: var(--nd-radius-round);
	background: var(--nd-c-rating);
	box-shadow: var(--nd-shadow-badge);
	font-size: var(--nd-fs-11);
	font-weight: var(--nd-fw-bold);
	line-height: var(--nd-lh-badge);
	color: var(--nd-c-head);
	white-space: nowrap;
}

.pcard__hc-rate {
	font-size: var(--nd-fs-10);
	letter-spacing: var(--nd-ls-tight);
}

.pcard__charger {
	display: grid;
	place-items: center;
	width: var(--nd-sp-30);
	height: var(--nd-sp-36);
	border: var(--nd-sp-2) solid var(--nd-c-head);
	border-radius: var(--nd-radius-s);
	background: var(--nd-c-surface);
	box-shadow: var(--nd-shadow-badge);
	color: var(--nd-c-head);
}

.pcard .pcard__name {
	display: -webkit-box;
	overflow: hidden;
	width: 100%;
	min-height: calc(2em * var(--nd-lh-name));
	margin: 0;
	padding: 0;
	font-family: var(--nd-font);
	font-size: var(--nd-fs-15);
	font-weight: var(--nd-fw-medium);
	line-height: var(--nd-lh-name);
	color: var(--nd-c-head);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.pcard .woocommerce-loop-product__link:hover .pcard__name {
	color: var(--nd-c-brand);
}

/* Price box and button at the bottom, aligned across the cards of a row. */
.pcard .card-price {
	margin-top: auto;
}

.pcard .pcard__cart {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--nd-btn-cart-h);
	margin: 0;
	padding: 0 var(--nd-sp-16);
	border: 0;
	border-radius: var(--nd-radius-btn);
	background: var(--nd-c-cta);
	font-size: var(--nd-fs-16);
	font-weight: var(--nd-fw-bold);
	line-height: 1;
	color: var(--nd-c-on-cta);
	text-decoration: none;
}

.pcard .pcard__cart:hover,
.pcard .pcard__cart:focus-visible {
	background: var(--nd-c-cta-hover);
	color: var(--nd-c-on-cta);
}

/* "Zobraziť" (variable / out of stock): outlined brand button, as on the category cards. "Do košíka" keeps the CTA
   colour either as WooCommerce's .add_to_cart_button or as the wooptima-flow link (added-to-cart.php drops that class). */
.pcard .pcard__cart:not(.add_to_cart_button, [data-wooptima-product]) {
	background: var(--nd-c-surface);
	box-shadow: inset 0 0 0 var(--nd-sp-2) var(--nd-c-brand);
	color: var(--nd-c-brand);
}

.pcard .pcard__cart:not(.add_to_cart_button, [data-wooptima-product]):hover,
.pcard .pcard__cart:not(.add_to_cart_button, [data-wooptima-product]):focus-visible {
	background: var(--nd-c-brand-tint);
	color: var(--nd-c-brand);
}

.pcard .pcard__cart.loading {
	opacity: 0.6;
}

/* WooCommerce pages (category "Obľúbené"): snippet 165 restyles ".woocommerce a.button"
   (purple, uppercase, letter-spacing, padding, hover shadow) with !important; only
   !important wins the card button back. */
.woocommerce .pcard a.pcard__cart {
	padding: 0 var(--nd-sp-16) !important;
	border-radius: var(--nd-radius-btn) !important;
	background: var(--nd-c-cta) !important;
	font-size: var(--nd-fs-16) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--nd-c-on-cta) !important;
}

.woocommerce .pcard a.pcard__cart:hover,
.woocommerce .pcard a.pcard__cart:focus-visible {
	background: var(--nd-c-cta-hover) !important;
	box-shadow: none !important;
}

.woocommerce .pcard a.pcard__cart:not(.add_to_cart_button, [data-wooptima-product]) {
	background: var(--nd-c-surface) !important;
	box-shadow: inset 0 0 0 var(--nd-sp-2) var(--nd-c-brand) !important;
	color: var(--nd-c-brand) !important;
}

.woocommerce .pcard a.pcard__cart:not(.add_to_cart_button, [data-wooptima-product]):hover,
.woocommerce .pcard a.pcard__cart:not(.add_to_cart_button, [data-wooptima-product]):focus-visible {
	background: var(--nd-c-brand-tint) !important;
}

@media (min-width: 721px) {
	.pcard {
		--card-pad-x: var(--nd-sp-14);

		padding-block: var(--nd-sp-14);
	}
}

/* Phones: smaller name and badges. */
@media (max-width: 720px) {
	.pcard .pcard__name {
		font-size: var(--nd-fs-14);
	}

	.pcard__badges {
		gap: var(--nd-sp-4);
	}

	.pcard__energy-arrow {
		min-width: var(--nd-sp-22);
		padding-inline: var(--nd-sp-4) var(--nd-sp-6);
		font-size: var(--nd-fs-11);
	}

	.pcard__energy-scale {
		padding-inline: var(--nd-sp-2);
		font-size: var(--nd-fs-10);
	}

	.pcard__hc {
		width: var(--nd-sp-40);
		height: var(--nd-sp-40);
		font-size: var(--nd-fs-10);
	}

	.pcard__charger {
		width: var(--nd-sp-26);
		height: var(--nd-sp-32);
	}

	.pcard__charger svg {
		width: var(--nd-sp-16);
		height: var(--nd-sp-20);
	}
}

/* WP Grid Builder cards (cart cross-sells): snippet 165 sets the name to 17.6px !important. */
.wa-primary-product-grid .wpgb-card .wpgb-card-body .wpgb-block-1 {
	font-size: var(--nd-fs-tile-name) !important;
}