/* ==========================================================================
   PRODUKTOVÁ KARTA  —  Figma node 1:73

   Zdieľaný komponent (homepage, archív, detail, košík, podstránky).
   Karta 317 × ~535, obrázok hore, odznaky vpravo hore, dole cena a CTA.

   Zvislý rytmus z Figmy (v rámci sekcie vysokej 621px):
     obrázok  85 → 393
     názov    423   Inter Bold 17
     objem    445   Inter Regular 16
     hviezdy  474
     popis    506   Inter Regular 17
     pôv.cena 562   Inter Regular 20, prečiarknutá
     cena     581   Inter ExtraBold 33
     tlačidlo 575 → 614, zarovnané vpravo
   ========================================================================== */

.pc-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* Cena sa prispôsobuje šírke karty, nie šírke okna — v mriežke
	   s tromi aj štyrmi stĺpcami je karta zakaždým iná. */
	container-type: inline-size;
}

/* ---- Obrázok a odznaky ------------------------------------------------ */

.pc-card__media {
	position: relative;
	display: block;
	aspect-ratio: var(--pc-card-ratio, 317.17 / 308.04);
	margin-bottom: var(--pc-card-media-gap, 30px);
}

.pc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Figma: odznaky zarovnané k pravému okraju karty, ~8px od vrchu obrázka */
.pc-card__badges {
	position: absolute;
	top: 8px;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.pc-card__badges .badge {
	min-width: 99px;
}

/* ---- Text ------------------------------------------------------------- */

.pc-card__title {
	font-size: var(--pc-card-title, var(--pc-fs-base));
	font-weight: var(--pc-weight-bold);
	line-height: 1.2;
}

.pc-card__meta {
	margin-top: 2px;
	font-size: var(--pc-fs-small);
	line-height: 1.2;
}

/*
 * Popis je vždy vysoký presne tri riadky: kratší si miesto rezervuje,
 * dlhší sa oreže. Dve slová o produkte nič nepovedia a rôzne dlhé
 * popisy rozhádžu ceny aj tlačidlá naprieč riadkom.
 */
.pc-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--pc-card-excerpt-lines, 3);
	line-clamp: var(--pc-card-excerpt-lines, 3);
	overflow: hidden;
	margin-top: 14px;
	min-height: calc(var(--pc-card-excerpt-lines, 3) * 1.25em);
	font-size: var(--pc-fs-base);
	line-height: 1.25;
}

/* ---- Hodnotenie ------------------------------------------------------- */
/*
 * Päť hviezd v jednom SVG. Farebná vrstva sa oreže na percento
 * hodnotenia — delenie na jednotlivé hviezdy by bolo krehké, lebo
 * v exporte sú kreslené od pravej hrany.
 */
.pc-rating {
	position: relative;
	display: block;
	width: 107px;
	height: 18px;
	margin-top: 10px;
	color: var(--pc-border);
}

.pc-rating__track,
.pc-rating__fill {
	position: absolute;
	inset: 0;
	display: block;
}

.pc-rating__fill {
	overflow: hidden;
	color: var(--pc-star);
}

.pc-rating svg {
	width: 107px;
	max-width: none;
	height: 18px;
}

/* ---- Pätička karty: ceny + CTA ---------------------------------------- */

/*
 * Cena vľavo, tlačidlo vpravo — vždy, na každej karte. Predtým to bol
 * `flex-wrap`, takže pri dlhšom texte tlačidla („Vybrať z možností")
 * tlačidlo spadlo pod cenu a v jednom riadku mriežky boli oba stavy
 * vedľa seba. Mriežka s dvoma stĺpcami to nedovolí: keď je tesno,
 * zúži sa stĺpec s cenou a „s DPH" sa zalomí pod ňu.
 */
.pc-card__footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--pc-space-12);
	margin-top: auto;
	padding-top: 13px;
}

.pc-card__prices {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	min-width: 0;
}

/*
 * Cena a „s DPH" vedľa seba; na úzkej karte (tablet, tri stĺpce) sa
 * „s DPH" zalomí pod cenu — inak vyliezlo pod tlačidlo a nebolo ho vidno.
 */
.pc-card__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 4px;
	min-width: 0;
}

/* Pôvodná cena je vo Figme na samostatnom riadku nad aktuálnou. */
.pc-card__price-old {
	flex-basis: 100%;
	font-size: var(--pc-fs-price-old);
	line-height: 1.2;
	text-decoration: line-through;
}

.pc-card__price {
	font-size: var(--pc-fs-price);
	font-weight: var(--pc-weight-extrabold);
	line-height: 1.2;
	white-space: nowrap;
}

/*
 * Menšie než pôvodná cena: v 20px zaberalo „s DPH" toľko, že sa vedľa
 * štvorciferných cien nezmestilo a padalo pod ne.
 */
.pc-card__vat {
	font-size: var(--pc-fs-micro);
	line-height: 1.2;
	white-space: nowrap;
}

/*
 * Menšie písmo než v ostatných tlačidlách: „Pridať do košíka" sa
 * v 16px vedľa 33px ceny na 317px karte nezmestí.
 */
.pc-card__cta {
	min-width: 0;
	padding-inline: 12px;
	font-size: var(--pc-fs-micro);
	text-align: center;
}

/*
 * Úzka karta (4 stĺpce na domovskej, 3 v obchode na menšom monitore):
 * cena v 33px by vytlačila tlačidlo z riadka.
 */
@container (max-width: 320px) {
	.pc-card__price {
		font-size: 28px;
	}
}

@container (max-width: 280px) {
	.pc-card__price {
		font-size: 24px;
	}
}

/* Woo vkladá do ceny vlastný markup — zjednotíme ho s dizajnom. */
.pc-card__prices .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

/* ==========================================================================
   RESPONZIVITA

   Pod ~300px šírky karty sa cena a tlačidlo prestanú zmestiť vedľa seba.
   ========================================================================== */

@media (max-width: 900px) {
	.pc-card__media {
		margin-bottom: var(--pc-space-16);
	}

	.pc-card__price {
		font-size: 26px;
	}

	/* Na úzkej karte sa cena a tlačidlo vedľa seba nezmestia. */
	.pc-card__footer {
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
		gap: var(--pc-space-12);
	}

	.pc-card__cta {
		width: 100%;
	}
}

/* ==========================================================================
   HOVER

   Zámerne striedmy: karta sa nadvihne, obrázok sa jemne priblíži
   a tlačidlo stmavne. Žiadne prekrytia ani rýchle akcie — vo Figme
   karta žiadny hover stav nemá, takže sem patrí len naznačenie,
   že je celá klikateľná.
   ========================================================================== */

.pc-card {
	transition: transform var(--pc-duration) var(--pc-ease);
}

.pc-card__media img {
	transition: transform 0.35s var(--pc-ease);
}

@media (hover: hover) {
	.pc-card:hover,
	.pc-card:focus-within {
		transform: translateY(-4px);
	}

	.pc-card:hover .pc-card__media img,
	.pc-card:focus-within .pc-card__media img {
		transform: scale(1.04);
	}

	.pc-card:hover .pc-card__title a {
		color: var(--pc-blue);
	}
}

/* Obrázok sa pri priblížení nesmie vyliať cez odznaky. */
.pc-card__media {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.pc-card,
	.pc-card__media img {
		transition: none;
	}

	.pc-card:hover,
	.pc-card:focus-within {
		transform: none;
	}

	.pc-card:hover .pc-card__media img {
		transform: none;
	}
}

/* ==========================================================================
   TLAČIDLO DO KOŠÍKA

   Po pridaní pripojí WooCommerce za tlačidlo odkaz „Zobraziť košík"
   a triedu `added`. Odkaz v karte nechceme — hneď po pridaní sa otvorí
   mini-košík, kde už tlačidlo do košíka je.
   ========================================================================== */

.pc-card__footer .added_to_cart {
	display: none;
}

.pc-card__cta {
	position: relative;
	white-space: nowrap;
}

/*
 * Počas pridávania Woo pridá triedu `loading`. Namiesto jeho spinnera
 * len stlmíme tlačidlo — o zvyšok sa postará mini-košík.
 */
.pc-card__cta.loading {
	opacity: 0.6;
	pointer-events: none;
}

.pc-card__cta.loading::after,
.pc-card__cta.added::after {
	content: none;
}

/*
 * Vypredaný produkt — tlačidlo hovorí „Nie je na sklade" už v zozname
 * a nevyzerá ako nákup. Odkaz vedie na detail (1. 11. 2026).
 */
.pc-card__cta--out,
.pc-card__cta--out:hover,
.pc-card__cta--out:focus-visible {
	background: transparent;
	border-color: var(--pc-border);
	color: var(--pc-grey);
}