/*
 * Product card (ProductCard.php): bestseller carousel, Loop Item grids, cart page.
 * Values follow the bestseller carousel card: square image on #F4F4F4, Unbounded 700 12px
 * name, beige Bestseller badge. Bigger price, smaller category, stock line, photo bars.
 * The 38px button comes from assets/css/cards.css.
 * Selectors carry the parent class so Hello reset, kit and Elementor styles lose.
 */

.pg-card {
	--pg-card-pad: 14px var(--pg-space-16) var(--pg-space-16);
	--pg-card-dur: .5s;
	--pg-card-fade: var(--pg-card-dur) var(--pg-ease);
	--pg-card-warn: #b45309; /* --pg-warning darkened to 5:1 on white for 12px text */
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--pg-surface-card);
	background: var(--pg-white);
	font-family: var(--pg-font-body);
	color: var(--pg-text);
}

.pg-card .pg-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ── Image: photos stacked, the active one visible ── */

.pg-card .pg-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--pg-surface-card);
}

.pg-card .pg-card__photo {
	position: absolute;
	inset: 0;
	display: block;
	transition: opacity var(--pg-dur) ease;
}

.pg-card .pg-card__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	opacity: 0;
	/* The outgoing photo stays fully visible until the new one has faded in over it,
	   so the grey background never shows through halfway. */
	transition: opacity 0s var(--pg-card-dur), transform .5s cubic-bezier(.25, .46, .45, .94);
}

.pg-card .pg-card__photo img.is-active {
	z-index: 1;
	opacity: 1;
	transition: opacity var(--pg-card-dur) var(--pg-ease), transform .5s cubic-bezier(.25, .46, .45, .94);
}

.pg-card.is-out .pg-card__photo {
	opacity: .5;
}

/* Bars, one per photo, 12px above the bottom edge. Only with a mouse and after
   product-card.js has loaded the photos (data-pg-ready), so they never promise
   something that does not react. */
.pg-card .pg-card__bars {
	position: absolute;
	right: var(--pg-space-12);
	bottom: var(--pg-space-12);
	left: var(--pg-space-12);
	z-index: 2;
	display: flex;
	gap: var(--pg-space-4);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--pg-dur) ease;
}

.pg-card .pg-card__bar {
	flex: 1 1 0;
	height: 3px;
	background: rgba(255, 255, 255, .7);
	/* Hairline and soft shadow so white bars stay visible on white photos. */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .16);
	transition: background-color var(--pg-card-fade), box-shadow var(--pg-card-fade);
}

.pg-card .pg-card__bar.is-active {
	background: var(--pg-accent);
	box-shadow: none;
}

/* Hover effects only with a mouse: a tap on a phone would leave them stuck. */
@media (hover: hover) and (pointer: fine) {
	.pg-card:hover .pg-card__photo img {
		transform: scale(1.05);
	}

	.pg-card[data-pg-ready]:hover .pg-card__bars {
		opacity: 1;
	}
}

/* ── Badges: sale left, Bestseller right ── */

.pg-card .pg-card__badges {
	position: absolute;
	top: var(--pg-space-8);
	right: var(--pg-space-8);
	left: var(--pg-space-8);
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--pg-space-4);
	pointer-events: none;
}

.pg-card .pg-card__badge {
	padding: 6px var(--pg-space-12);
	border: 1px solid;
	font-family: var(--pg-font-display);
	font-size: var(--pg-fs-12);
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

.pg-card .pg-card__badge--sale {
	border-color: var(--pg-danger);
	background: var(--pg-danger);
	color: var(--pg-white);
}

.pg-card .pg-card__badge--bestseller {
	margin-left: auto;
	border-color: var(--pg-badge-border);
	background: var(--pg-beige);
	color: var(--pg-text);
}

/* ── Body ── */

.pg-card .pg-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	padding: var(--pg-card-pad);
}

.pg-card .pg-card__cat {
	overflow: hidden;
	font-size: var(--pg-fs-12);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .02em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--pg-muted-light);
}

.pg-card .pg-card__name {
	display: -webkit-box;
	overflow: hidden;
	font-family: var(--pg-font-display);
	font-size: var(--pg-fs-12);
	font-weight: 700;
	line-height: 1.4;
	color: var(--pg-text);
	text-decoration: none;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: color var(--pg-dur-fast) ease;
}

.pg-card .pg-card__name:focus-visible {
	color: var(--pg-accent);
}

@media (hover: hover) and (pointer: fine) {
	.pg-card .pg-card__name:hover {
		color: var(--pg-accent);
	}
}

/* Stock: dot + the product page text. Low and last piece pulse a little. */
.pg-card .pg-card__stock {
	--pg-dot: var(--pg-accent);
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	font-size: var(--pg-fs-12);
	font-weight: 600;
	line-height: 1.3;
	color: var(--pg-text-2);
}

.pg-card .pg-card__stock.is-low,
.pg-card .pg-card__stock.is-last {
	--pg-dot: var(--pg-warning);
	font-weight: 700;
	color: var(--pg-card-warn);
}

.pg-card .pg-card__stock.is-backorder {
	--pg-dot: var(--pg-warning);
	color: var(--pg-card-warn);
}

.pg-card .pg-card__stock.is-out {
	--pg-dot: var(--pg-danger);
	color: var(--pg-danger);
}

.pg-card .pg-card__dot {
	position: relative;
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pg-dot);
}

.pg-card .pg-card__stock.is-low .pg-card__dot::after,
.pg-card .pg-card__stock.is-last .pg-card__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--pg-dot);
	animation: pg-card-pulse 2s var(--pg-ease) infinite;
}

@keyframes pg-card-pulse {
	from { transform: scale(1);   opacity: .5; }
	to   { transform: scale(2.4); opacity: 0; }
}

/* ── Price + button ── */

.pg-card .pg-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pg-space-8);
	margin-top: auto;
	padding-top: var(--pg-space-12);
}

.pg-card .pg-card__price {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.2;
}

.pg-card .pg-card__now {
	font-size: 17px;
	font-weight: 800;
	color: var(--pg-text);
}

/* Amounts never break, "od" and "bez DPH" may wrap on 160px cards. */
.pg-card .pg-card__price .amount {
	white-space: nowrap;
}

.pg-card.is-sale .pg-card__now {
	color: var(--pg-danger);
}

.pg-card .pg-card__from {
	font-size: var(--pg-fs-13);
	font-weight: 600;
}

.pg-card .pg-card__was {
	margin-bottom: 2px;
	font-size: var(--pg-fs-13);
	font-weight: 500;
	color: var(--pg-muted);
}

.pg-card .pg-card__was del {
	text-decoration-thickness: 1px;
}

.pg-card .pg-card__excl {
	margin-top: var(--pg-space-4);
	font-size: var(--pg-fs-13);
	font-weight: 500;
	line-height: 1.3;
	color: var(--pg-muted-light);
}

/* Grouped products: WooCommerce price range as it comes. */
.pg-card .pg-card__price--wc {
	font-size: var(--pg-fs-15);
	font-weight: 800;
}

.pg-card .pg-card__price--wc del {
	font-size: var(--pg-fs-12);
	font-weight: 400;
	color: var(--pg-muted);
}

.pg-card .pg-card__price--wc ins {
	text-decoration: none;
}

/* ── Elementor Loop Item: the card fills its grid cell, so a row ends on one line ── */

/* Container around the widget, full width or boxed: zero default padding and gap,
   settings made in Elementor still win. */
.e-loop-item .e-con:has(> .elementor-widget-pg_product_card),
.e-loop-item .e-con:has(> .e-con-inner > .elementor-widget-pg_product_card) {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--gap: 0;
}

/* Every wrapper between the cell and the card (container, boxed inner, new Flexbox) stretches. */
.e-loop-item > :has(.elementor-widget-pg_product_card) {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.e-loop-item .e-con-inner:has(> .elementor-widget-pg_product_card) {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
}

.e-loop-item .elementor-widget-pg_product_card,
.elementor-widget-pg_product_card {
	--flex-grow: 1;
	--flex-shrink: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
}

.elementor-widget-pg_product_card > .pg-card {
	flex: 1 1 auto;
}

/* ── Phone: 160px cards in the carousel and cart row, two columns in grids ── */

@media (max-width: 767px) {
	.pg-card {
		--pg-card-pad: var(--pg-space-12);
	}

	.pg-card .pg-card__body {
		gap: var(--pg-space-4);
	}

	.pg-card .pg-card__cat {
		font-size: var(--pg-fs-11);
	}

	.pg-card .pg-card__badges {
		top: 6px;
		right: 6px;
		left: 6px;
	}

	.pg-card .pg-card__badge {
		padding: var(--pg-space-4) var(--pg-space-8);
		font-size: var(--pg-fs-11);
	}

	.pg-card .pg-card__now {
		font-size: var(--pg-fs-16);
	}

	.pg-card .pg-card__excl,
	.pg-card .pg-card__was {
		font-size: var(--pg-fs-12);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pg-card { --pg-card-dur: .2s; }
	.pg-card:hover .pg-card__photo img { transform: none; }
	.pg-card .pg-card__dot::after { animation: none; }
}