/**
 * Vlastný produktový archív — benab-style (px-shop-theme) dizajn.
 *
 * Samostatné CSS bez build kroku. Vizuálne tokeny sú v :root — re-skin
 * archívu = úprava premenných v child téme (geometria a interakcie 1:1
 * podľa benab).
 */

/* .pc-scope je koreňová trieda dizajnového systému — nesie ju archív aj
   konfigurátor nosičov, takže obe plochy zdieľajú tokeny, tlačidlá a karty.
   .px-archive už znamená len "layout archívu". */
.pc-scope {
	/* Tokeny (RGB triplety kvôli alpha) sú len na :root v base.css —
	   web ich prepíše v child téme na :root. */
	color: rgb(var(--pc-ink));
}

/* Kontajner */
.px-archive.pc-container {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: var(--pc-container);
	padding: var(--pc-space-6) var(--pc-space-4) var(--pc-space-12);
}

@media (min-width: 640px) {
	.px-archive.pc-container { padding-left: var(--pc-space-6); padding-right: var(--pc-space-6); }
}

@media (min-width: 1024px) {
	.px-archive.pc-container { padding-left: var(--pc-space-8); padding-right: var(--pc-space-8); }
}

.pc-scope *,
.pc-scope *::before,
.pc-scope *::after {
	box-sizing: border-box;
}

.pc-icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

/* Hlavičku archívu (omrvinky + H1 + popis) rieši jednotný page header
   z témy — template-parts/page-header.php + base.css. */

/* Signature bodka za nadpisom */
.pc-title-dot::after {
	content: '.';
	color: rgb(var(--pc-accent));
}

/* =========================================================================
   TLAČIDLÁ
   ========================================================================= */

.pc-scope .pc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: var(--pc-space-2) var(--pc-space-5);
	font-size: var(--pc-fs-sm);
	font-weight: 500;
	line-height: 1.4;
	border-radius: var(--pc-radius-control);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pc-scope .pc-btn--primary {
	background: rgb(var(--pc-accent));
	color: rgb(var(--pc-on-accent));
}

.pc-scope .pc-btn--primary:hover {
	background: rgb(var(--pc-accent-deep));
	color: rgb(var(--pc-on-accent));
}

.pc-scope .pc-btn--outline {
	background: transparent;
	border-color: rgb(var(--pc-ink) / 0.2);
	color: rgb(var(--pc-ink));
}

.pc-scope .pc-btn--outline:hover {
	border-color: rgb(var(--pc-accent-deep));
	color: rgb(var(--pc-accent-deep));
}

/* Loading spinner na add-to-cart */
.pc-scope .pc-btn.loading {
	color: transparent !important;
	pointer-events: none;
	position: relative;
}

.pc-scope .pc-btn.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 1rem;
	margin: -0.5rem 0 0 -0.5rem;
	border-radius: var(--pc-radius-pill);
	border: 2px solid rgb(var(--pc-on-accent) / 0.5);
	border-top-color: rgb(var(--pc-on-accent));
	animation: px-archive-spin 0.6s linear infinite;
}

@keyframes px-archive-spin {
	to { transform: rotate(360deg); }
}

/* =========================================================================
   TOOLBAR
   ========================================================================= */

.pc-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-3);
	margin-bottom: var(--pc-space-6);
}

/* Filter toggle — biele pozadie (odlíšenie od svetlého pozadia stránky) */
.pc-filters-toggle.pc-btn--outline {
	background: rgb(var(--pc-card));
}

.pc-filters-toggle.pc-btn--outline:hover {
	background: rgb(var(--pc-card));
}

/* Čakanie na CSS panela (archive.js, `filtersButtonsBusy()`). Klik musí byť
   vidieť aj vtedy, keď sa panel otvorí až o chvíľu. Rovnaká odozva ako
   pri tlačidlách hlavičky. */
[data-pc-filters-open].is-loading {
	opacity: 0.6;
	cursor: progress;
}

.pc-filter-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 var(--pc-space-1);
	border-radius: var(--pc-radius-pill);
	background: rgb(var(--pc-accent));
	color: rgb(var(--pc-on-accent));
	font-size: var(--pc-fs-2xs);
	font-weight: 600;
}

.pc-filter-count.is-hidden {
	display: none;
}

.pc-shop__toolbar-meta {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-3);
	min-width: 0;
}

@media (max-width: 639.98px) {
	.pc-shop__toolbar-meta {
		flex-basis: 100%;
	}
}

.pc-result-count {
	margin: 0;
	font-size: var(--pc-fs-sm);
	color: rgb(var(--pc-muted));
}

.pc-shop__toolbar-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-3);
	min-width: 0;
}

.pc-ordering,
.pc-per-page {
	display: flex;
	align-items: center;
	gap: var(--pc-space-2);
	min-width: 0;
	margin: 0;
}

/* Natívny WC formulár triedenia má z woocommerce.css spodný okraj — vedľa
   selectu počtu by sedel o 16 px vyššie. */
.pc-shop__toolbar .woocommerce-ordering {
	margin: 0;
}

.pc-per-page__label {
	font-size: var(--pc-fs-sm);
	color: rgb(var(--pc-muted));
	white-space: nowrap;
}

/* Mobil: počet a triedenie na jednom riadku — select triedenia sa zmestí
   tak, že sa vzdá vlastnej šírky (má ju z najdlhšej položky). */
@media (max-width: 639.98px) {
	.pc-shop__toolbar-controls {
		flex-basis: 100%;
		flex-wrap: nowrap;
	}

	.pc-shop__toolbar-controls .woocommerce-ordering,
	.pc-shop__toolbar-controls .pc-ordering {
		flex: 1;
	}

	.pc-shop__toolbar-controls .woocommerce-ordering select,
	.pc-shop__toolbar-controls .pc-ordering select {
		width: 100%;
	}

	/* Popisok „Na stránku" len pre čítačku — miesto potrebuje text triedenia. */
	.pc-per-page__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Písmo dáva base.css (15 px, na dotyku 16 px — iOS pri menšom pri fokuse
   zoomuje), rám `--pc-field-border` (3:1). */
.pc-scope select.orderby {
	max-width: 100%;
	padding: var(--pc-space-2) var(--pc-space-8) var(--pc-space-2) var(--pc-space-3);
	color: rgb(var(--pc-ink));
	background-color: rgb(var(--pc-card));
	border: 1px solid rgb(var(--pc-field-border));
	border-radius: var(--pc-radius-control);
	cursor: pointer;
}

/* Rovnaký fokus ako polia v base.css — vlastný `border` vyššie by inak
   prebil jeho farbu rámu. */
.pc-scope select.orderby:focus-visible {
	outline: 2px solid transparent;
	border-color: rgb(var(--pc-focus));
	box-shadow: 0 0 0 1px rgb(var(--pc-focus));
}

@media (pointer: coarse) {
	.pc-scope select.orderby { min-height: 2.75rem; }
}

/* =========================================================================
   AKTÍVNE FILTRE (CHIPS)
   ========================================================================= */

.pc-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-2);
	margin-bottom: var(--pc-space-6);
}

.pc-active-filters.is-empty {
	display: none;
}

.pc-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: var(--pc-space-1) var(--pc-space-2) var(--pc-space-1) var(--pc-space-3);
	border-radius: var(--pc-radius-pill);
	background: rgb(var(--pc-ink) / 0.05);
	color: rgb(var(--pc-ink));
	font-size: var(--pc-fs-2xs);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.pc-chip:hover {
	background: rgb(var(--pc-ink) / 0.1);
	color: rgb(var(--pc-ink));
}

.pc-chip__x {
	width: 0.75rem;
	height: 0.75rem;
}

.pc-clear-filters {
	margin-left: var(--pc-space-1);
	font-size: var(--pc-fs-2xs);
	font-weight: 500;
	color: rgb(var(--pc-accent-deep));
	text-decoration: none;
}

.pc-clear-filters:hover {
	text-decoration: underline;
	color: rgb(var(--pc-accent-deep));
}

/* =========================================================================
   GRID + PRODUKTOVÁ KARTA
   ========================================================================= */

.pc-grid {
	display: grid;
	gap: var(--pc-grid-gap);
}

/* Počet stĺpcov dáva PHP (inc/catalog.php → tokeny --pc-cols-* na :root),
   lebo z tých istých čísel počíta počet produktov na stránku. Hodnoty za
   čiarkou sú len poistka bez inline štýlu. Stĺpce mení filter
   `pxt_catalog_columns`, nie CSS. */
.pc-products {
	--pc-cols: var(--pc-cols-base, 2);
	grid-template-columns: repeat(var(--pc-cols), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.pc-products { --pc-cols: var(--pc-cols-md, 3); }
}

@media (min-width: 1024px) {
	.pc-products { --pc-cols: var(--pc-cols-lg, 4); }
}

@media (min-width: 1280px) {
	.pc-products { --pc-cols: var(--pc-cols-xl, 5); }
}

.pc-products__item {
	margin: 0;
}

.pc-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: rgb(var(--pc-card));
	border: 1px solid rgb(var(--pc-line));
	border-radius: var(--pc-radius);
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pc-product-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgb(var(--pc-ink) / 0.08);
}

.pc-product-badges--overlay {
	position: absolute;
	top: var(--pc-space-3);
	left: var(--pc-space-3);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pc-space-1);
	max-width: calc(100% - 2 * var(--pc-space-3));
}

/* Vpravo hore sedí srdiečko (a porovnanie) — odznak „Akcia do 16. 10."
   ho na úzkej karte nesmie prekryť. Rezerva = tlačidlo 2.25rem + medzera. */
.pc-product-card:has(.pc-card-wish, .pc-card-compare) .pc-product-badges--overlay {
	max-width: calc(100% - 2 * var(--pc-space-3) - 2.25rem - var(--pc-space-2));
}

.pc-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.6rem;
	border-radius: var(--pc-radius-pill);
	font-size: var(--pc-fs-2xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	/* Pilulka s dátumom („Akcia do 24. 8.") sa láme len medzi „Akcia"
	   a dátumom (flex-wrap), nie v slove — na úzkej mobilnej karte by sa
	   inak orezala alebo vošla pod srdiečko. */
	flex-wrap: wrap;
	row-gap: 0;
	max-width: 100%;
	white-space: nowrap;
}

/* Doplnok v odznaku (platnosť akcie) — tenší, aby oko najprv prečítalo dôvod
   („Akcia") a až potom termín. Hierarchiu drží len váha písma: biela na
   malinovej má 4,7:1, čo je tesne nad AA, a `opacity` pod 1 by ju stiahla
   pod hranicu (0,85 → 3,7:1). Číslice tabuľkové, nech sa dátumy v mriežke
   kariet nehádžu o pol znaku. */
.pc-badge__note {
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.pc-badge--sale {
	background: rgb(var(--pc-secondary));
	color: rgb(var(--pc-on-secondary));
}

.pc-badge--stock {
	background: rgb(var(--pc-ink) / 0.65);
	color: rgb(var(--pc-paper));
}

/* Štítky produktu z atribútu (modul „Štítky produktov" v px-shop-core).
   Farbu termu posiela modul ako --px-label-bg / --px-label-fg (text dopočíta
   pre kontrast AA); bez farby štítok berie akcentovú farbu webu. */
.pc-badge--label {
	background: var(--px-label-bg, rgb(var(--pc-accent)));
	color: var(--px-label-fg, rgb(var(--pc-on-accent)));
	/* Doplnková informácia, nie výzva ako „Akcia" — bez kapitálok, menšia
	   a tenšia, aby neprekričala zľavu ani fotku. */
	padding: 0.15rem 0.5rem;
	font-size: var(--pc-fs-3xs);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	/* Štítok je text od obchodníka („Možnosť personalizovať") — na úzkej
	   karte sa radšej zalomí, než by sa orezal pod srdiečkom. Slovo dlhšie
	   než karta (PERSONALIZOVAŤ na mobile ~108 px pri 103 px) rozdelí
	   `hyphens` podľa jazyka stránky, `overflow-wrap` je poistka bez slovníka. */
	white-space: normal;
	hyphens: auto;
	overflow-wrap: anywhere;
}

.pc-product-card__media {
	position: relative;
	display: block;
	height: var(--pc-card-media-h, 160px);
	background: rgb(var(--pc-card));
	padding: var(--pc-space-2);
}

/* .px-archive prefix — prebije prípadné theme/Woo img pravidlá (object-fit).
   contain = celý obrázok viditeľný, neorezaný, s letterboxom v štvorci. */
.pc-scope .pc-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

/* Overlay prvky karty (sezóna, vlastnosti…) štýluje child téma —
   hook `pxt_product_card_media_after`. */

.pc-product-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.4rem;
	padding: 0.875rem;
}

/* .px-archive prefix — vyššia špecificita ako Elementor kit (.elementor-kit-N h2),
   ktorý inak vnúti nadpisu ~30px display font */
.pc-scope .pc-product-card__title {
	margin: 0;
	font-size: var(--pc-fs-sm);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	/* Ustáli výšku kariet naprieč gridom — 2 riadky názvu */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em; /* = 2 × line-height, inak sa jednoriadkový názov o štvrť riadku líši od dvojriadkového a ceny v mriežke nesedia */
}

.pc-scope .pc-product-card__title a {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	font-family: inherit;
	color: rgb(var(--pc-ink));
	text-decoration: none;
}

.pc-scope .pc-product-card__title a:hover {
	color: rgb(var(--pc-accent-deep));
}

.pc-product-card__attrs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.pc-attr-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.1rem 0.45rem;
	border-radius: var(--pc-radius-xs);
	background: rgb(var(--pc-soft));
	color: rgb(var(--pc-muted));
	font-size: var(--pc-fs-3xs);
	font-weight: 500;
}

.pc-product-card__price {
	font-size: var(--pc-fs-base);
	font-weight: 700;
	color: rgb(var(--pc-ink));
	margin-top: 0.15rem;
}

.pc-product-card__price ins {
	text-decoration: none;
	color: rgb(var(--pc-secondary));
}

.pc-product-card__price del {
	color: rgb(var(--pc-muted));
	font-weight: 400;
	font-size: var(--pc-fs-sm);
	margin-right: 0.35rem;
}

/* Jednotková cena pod cenou (px-shop-core). Poznámka k cene, nie suma —
   drobné písmo v tlmenej farbe; suma v nej ostáva bežnou váhou, aby
   nesúperila s predajnou cenou nad ňou. */
.pc-product-card__unit {
	margin-top: 0.1rem;
	font-size: var(--pc-fs-xs);
	font-weight: 400;
	line-height: 1.4;
	color: rgb(var(--pc-muted));
}

.pc-product-card__unit .woocommerce-Price-amount {
	font-weight: 400;
}

/* Placeholder namiesto ceny pre neprihlásených (PX_Guest_Prices). Zámerne
   NIE rozmazaná cena — tá by ostala čitateľná v zdroji stránky. Sedí na
   mieste ceny naprieč povrchmi: karta, detail, live search. */
.px-price-hidden {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border: 1px dashed rgb(var(--pc-line));
	border-radius: var(--pc-radius-control);
	background: rgb(var(--pc-soft));
	color: rgb(var(--pc-accent-deep));
	font-size: var(--pc-fs-xs);
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}

a.px-price-hidden:hover,
a.px-price-hidden:focus {
	background: rgb(var(--pc-accent));
	border-color: rgb(var(--pc-accent));
	color: rgb(var(--pc-on-accent));
}

.pc-product-card__cta {
	margin-top: auto;
}

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

/* Mriežka má pod 768 px dva stĺpce, takže na úzkych telefónoch je karta ~150 px
   a „Pridať do košíka" sa pri základnom odsadení 1.25rem zalomilo na dva
   riadky (57 px vysoké tlačidlo). Text je vycentrovaný na plnú šírku karty,
   vodorovné odsadenie teda nemá čo ukázať — zmenšíme ho a písmo o stupeň.
   Pri 360 px vychádza text 104 px do 113 px voľných. */
@media (max-width: 479.98px) {
	.pc-scope .pc-product-card__cta .pc-btn {
		padding: var(--pc-space-2) var(--pc-space-1);
		font-size: var(--pc-fs-xs);
	}
}

.pc-no-products {
	padding: var(--pc-space-12) var(--pc-space-4);
	text-align: center;
	color: rgb(var(--pc-muted));
}

.pc-no-products__text {
	margin: 0;
	font-size: var(--pc-fs-base);
	color: rgb(var(--pc-ink));
}

.pc-no-products .pc-btn {
	margin-top: var(--pc-space-4);
}

/* AJAX loading stav */
.pc-shop--loading [data-pc-shop-results] {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* =========================================================================
   DLAŽDICE KATEGÓRIÍ — nad výpisom produktov (/eshop, podkategórie)
   Kompaktný riadok: ikona vľavo, názov vpravo. Vlastné triedy .pc-cat-tiles__*
   (úvodka má obrázkové .pc-cat-tile__* vo front.css — nemiešať).
   ========================================================================= */

.pc-cat-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.375rem;
	margin: 0 0 var(--pc-space-5);
	padding: 0;
	list-style: none;
}

/* auto-fill: pri troch deťoch sa dlaždice nerozťahujú na tretiny kontajnera,
   pri desiatich sa samy zalomia. max() v minmax stropuje počet stĺpcov na 6
   (šírka stĺpca nikdy neklesne pod šestinu kontajnera mínus 5 gapov). */
@media (min-width: 640px) {
	.pc-cat-tiles {
		grid-template-columns: repeat(auto-fill, minmax(max(11rem, calc((100% - 2.5rem) / 6)), 1fr));
		gap: var(--pc-space-2);
	}
}

.pc-cat-tiles__link {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	height: 100%;
	/* 44 px dotykový cieľ aj pri ikonovej dlaždici (ikona 1.75rem + padding). */
	min-height: 2.75rem;
	padding: var(--pc-space-1);
	border: 1px solid rgb(var(--pc-line));
	border-radius: var(--pc-radius-sm);
	background: rgb(var(--pc-card));
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pc-cat-tiles__link:hover {
	border-color: rgb(var(--pc-accent));
	box-shadow: var(--pc-shadow-lg);
}

.pc-cat-tiles__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--pc-radius-sm);
	background: rgb(var(--pc-soft));
	color: rgb(var(--pc-accent-deep));
}

.pc-cat-tiles__icon svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* Obrázok kategórie namiesto ikony. Väčší štvorček než ikonový — fotka
   produktu je detailnejšia kresba a pod ~2,5rem sa rozpadne na škvrnu.
   Bez podkladu: obrázky sú na bielom a šedý rám za nimi vytvára lem. */
.pc-cat-tiles__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	overflow: hidden;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--pc-radius-sm);
}

/* cover, nie contain: v tejto veľkosti je celý produkt aj tak nečitateľný,
   ale vyplnený štvorček drží riadok pokojný — fotky majú rôzne pomery strán
   (550×367 aj 550×550) a contain by každý riadok posunul inak. */
.pc-cat-tiles__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pc-cat-tiles__name {
	font-size: var(--pc-fs-2xs);
	font-weight: 600;
	line-height: 1.25;
	color: rgb(var(--pc-ink));
}

@media (min-width: 640px) {
	.pc-cat-tiles__link {
		gap: var(--pc-space-2);
		padding: var(--pc-space-2);
	}

	.pc-cat-tiles__icon {
		width: 2rem;
		height: 2rem;
	}

	.pc-cat-tiles__icon svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	.pc-cat-tiles__photo {
		width: 2.75rem;
		height: 2.75rem;
	}

	.pc-cat-tiles__name {
		font-size: var(--pc-fs-xs);
	}
}

/* =========================================================================
   PAGINÁCIA
   ========================================================================= */

.pc-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	margin-top: var(--pc-space-10);
}

.pc-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 var(--pc-space-3);
	border: 1px solid rgb(var(--pc-line));
	border-radius: var(--pc-radius-control);
	background: rgb(var(--pc-card));
	color: rgb(var(--pc-ink));
	font-size: var(--pc-fs-sm);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pc-pagination__link:hover {
	border-color: rgb(var(--pc-ink));
	background: rgb(var(--pc-ink) / 0.05);
	color: rgb(var(--pc-ink));
}

.pc-pagination__link.is-current {
	background: rgb(var(--pc-ink));
	border-color: rgb(var(--pc-ink));
	color: rgb(var(--pc-paper));
}

.pc-pagination__dots {
	color: rgb(var(--pc-muted));
	padding: 0 var(--pc-space-1);
}

/* =========================================================================
   FILTER DRAWER
   ========================================================================= */

.pc-filters {
	position: fixed;
	inset: 0;
	z-index: var(--pc-z-drawer);
	visibility: hidden;
	opacity: 0;
	/* visibility sa mení skokom: pri zatváraní s oneskorením (nech dobehne
	   fade-out), pri otváraní okamžite — inak by focus() na obsah drawera
	   zlyhával, kým transition nezačne. */
	transition: visibility 0s 0.2s, opacity 0.2s;

	/* Drawer je position: fixed a v DOM strome môže stáť mimo .pc-scope —
	   tokeny dedí z :root (base.css). Vlastnú kópiu ani polomer tu zámerne
	   nedržíme: child téma prepisuje tokeny na :root a drawer sa musí
	   preladiť s ňou (aj hranaté tlačidlá cez --pc-radius-control). */
}

.pc-filters.is-open {
	visibility: visible;
	opacity: 1;
	transition: visibility 0s, opacity 0.2s;
}

.pc-filters__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(var(--pc-ink) / 0.4);
}

.pc-filters__panel {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	max-width: 24rem;
	background: rgb(var(--pc-card));
	box-shadow: var(--pc-shadow-xl);
	transform: translateX(-100%);
	transition: transform 0.2s ease;
	display: flex;
	flex-direction: column;
}

.pc-filters.is-open .pc-filters__panel {
	transform: translateX(0);
}

body.admin-bar .pc-filters__panel {
	top: 32px;
	height: calc(100% - 32px);
}

body.pc-no-scroll {
	overflow: hidden;
}

.pc-filters__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--pc-space-4);
	border-bottom: 1px solid rgb(var(--pc-line));
}

.pc-filters__title {
	margin: 0;
	font-size: var(--pc-fs-lg);
	font-weight: 600;
	color: rgb(var(--pc-ink));
}

.pc-filters__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--pc-space-2);
	border: 0;
	border-radius: var(--pc-radius-control);
	background: transparent;
	color: rgb(var(--pc-ink));
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.pc-filters__close:hover {
	background: rgb(var(--pc-ink) / 0.05);
}

.pc-filters__close .pc-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.pc-filters__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--pc-space-4);
	font-size: var(--pc-fs-sm);
	color: rgb(var(--pc-ink));
}

/* Zástupný text, kým sa telo panela dotiahne (prvé otvorenie).
   Panel má pevnú šírku, takže výmena obsahu nič neposúva — CLS = 0. */
.pc-filters__placeholder {
	margin: 0;
	padding: var(--pc-space-3) 0;
	color: rgb(var(--pc-muted));
}

/* „Skúsiť znova" v hláške — odkazová podoba tlačidla, bez vlastných farieb
   mimo tokenov. */
.pc-filters__retry {
	padding: 0;
	font: inherit;
	color: rgb(var(--pc-accent-deep));
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

.pc-filters__retry:hover,
.pc-filters__retry:focus-visible {
	color: rgb(var(--pc-ink));
}

/* =========================================================================
   HODNOTENIE — hviezdičky (karta aj detail, pxt_rating_html)

   Päť hviezd je maska nad pásom: vyplnená časť `--pc-accent` do šírky
   `--pc-rating` (percento priemeru), zvyšok `--pc-field-border` (3:1 na
   bielej). Bez fontu WooCommerce — ten má `.woocommerce` scope a na úvodke
   by chýbal.
   ========================================================================= */

.pc-rating {
	display: flex;
	align-items: center;
	gap: var(--pc-space-1);
	font-size: var(--pc-fs-2xs);
	line-height: 1;
	color: rgb(var(--pc-muted));
}

.pc-rating__stars {
	--pc-rating-size: 0.875rem;
	display: inline-block;
	flex: none;
	width: calc(var(--pc-rating-size) * 5);
	height: var(--pc-rating-size);
	background: linear-gradient(90deg, rgb(var(--pc-accent)) var(--pc-rating, 0%), rgb(var(--pc-field-border)) var(--pc-rating, 0%));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.94 6.1 6.56.9-4.8 4.56 1.2 6.54L12 17.4l-5.9 3.2 1.2-6.54L2.5 9.5l6.56-.9z'/%3E%3C/svg%3E") left center / var(--pc-rating-size) var(--pc-rating-size) repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.94 6.1 6.56.9-4.8 4.56 1.2 6.54L12 17.4l-5.9 3.2 1.2-6.54L2.5 9.5l6.56-.9z'/%3E%3C/svg%3E") left center / var(--pc-rating-size) var(--pc-rating-size) repeat-x;
}

/* Vynútené farby: maska s pozadím zmizne — aspoň obrys. */
@media (forced-colors: active) {
	.pc-rating__stars {
		background: CanvasText;
		forced-color-adjust: none;
	}
}

/* =========================================================================
   DOTYKOVÉ CIELE NA KARTE (pointer: coarse)

   Srdiečko a porovnanie majú 36 px (wishlist.css / compare.css). Plocha sa
   zväčší neviditeľným ::after na 44 px — kresba karty ostáva.
   ========================================================================= */

@media (pointer: coarse) {
	.pc-product-card .pc-card-wish::after,
	.pc-product-card .pc-card-compare::after {
		content: '';
		position: absolute;
		inset: calc(-1 * var(--pc-space-1));
		border-radius: inherit;
	}

	/* Porovnanie pod srdiečkom — medzera tak, aby sa zväčšené plochy
	   neprekrývali (2.25rem + 2 × 0.25rem + 0.25rem). */
	.pc-product-card .pc-card-wish ~ .pc-card-compare { top: calc(var(--pc-space-3) + 3rem); }
}

/* Počet výsledkov dostáva fokus po AJAX stránkovaní a odstránení filtra
   (archive.js) — prstenec, keď prišiel z klávesnice. */
.pc-result-count:focus { outline: none; }

.pc-result-count:focus-visible {
	outline: 2px solid rgb(var(--pc-focus));
	outline-offset: 2px;
	border-radius: var(--pc-radius-xs);
}

/* =========================================================================
   OMRVINKY NA MOBILE — zalomiť, nie orezať

   base.css ich pod 900 px drží v jednom riadku s vodorovným posúvaním,
   ktorý sa načíta odrolovaný na začiatok — posledná položka (názov
   produktu) bola orezaná („Tričko Ba"). Na obchodných stránkach sa radšej
   zalomia; oddeľovač ostáva pri položke za ním.
   ========================================================================= */

@media (max-width: 899.98px) {
	.px-breadcrumbs {
		display: block;
		overflow-x: visible;
		white-space: normal;
	}
}

/* =========================================================================
   PANEL FILTROV AKO BOČNÝ STĹPEC (pxt_filters_layout = sidebar)

   Predvolený je vysúvací panel aj na počítači (zámer — celá šírka pre
   mriežku). Child, ktorý chce stĺpec, prepne filter; od 1024 px je panel
   statický vľavo od výpisu, pod 1024 px ostáva drawer. ARIA dialógu
   (role, aria-modal, aria-hidden) na šírke stĺpca odoberá archive.js.
   ========================================================================= */

@media (min-width: 1024px) {
	.px-archive--filters-sidebar:has(> .pc-filters--sidebar) {
		display: grid;
		grid-template-columns: 16rem minmax(0, 1fr);
		column-gap: var(--pc-space-8);
		align-items: start;
	}

	.px-archive--filters-sidebar:has(> .pc-filters--sidebar) > * {
		grid-column: 2;
	}

	.px-archive--filters-sidebar > .pc-filters--sidebar {
		grid-column: 1;
		grid-row: 1 / span 12;
		/* Nie sticky: hlavička je na počítači sticky a jej výšku téma nemá
		   v tokene — stĺpec by pod ňu zaliezol. */
		position: static;
		inset: auto;
		z-index: auto;
		visibility: visible;
		opacity: 1;
		transition: none;
	}

	.pc-filters--sidebar .pc-filters__backdrop,
	.pc-filters--sidebar .pc-filters__close,
	.px-archive--filters-sidebar .pc-filters-toggle {
		display: none;
	}

	.pc-filters--sidebar .pc-filters__panel {
		position: static;
		width: auto;
		max-width: none;
		height: auto;
		border: 1px solid rgb(var(--pc-line));
		border-radius: var(--pc-radius);
		box-shadow: none;
		transform: none;
		transition: none;
	}

	body.admin-bar .pc-filters--sidebar .pc-filters__panel {
		top: auto;
		height: auto;
	}
}