/**
 * WA Instant Search — results page styling.
 *
 * The card / grid / toolbar / pagination sections are a 1:1 re-implementation of
 * the production WP Grid Builder archive (mobilky.sk/prislusenstvo/): same class
 * names, same resolved values. Production runs Automatic.css with
 * `--root-font-size: 62.5%` (1rem = 10px); this stylesheet must also hold up when
 * automatic.css is absent, so every token below is a RESOLVED PIXEL value with the
 * theme variable only as an optional override.
 *
 * Sources: wooptima-gridbuilder-blocks.css, G2G1C2C1.css (WPGB generated),
 * 39.css (Oxygen/WPGB per-facet), 165/169-header-compiled.css.
 * The structural base (`.wp-grid-builder .wa-is-card …`) used to ship separately
 * in a bundled stylesheet this plugin no longer carries (see commit 77726f76);
 * only the site overrides live here.
 *
 * The facet sidebar is the same kind of re-implementation: production facet
 * markup, with the structural base formerly coming from that same bundled
 * stylesheet (commit 77726f76) and only the site overrides (39.css per-facet-ID
 * rules, universal.css .wa-sidebar-widget, 193-header-compiled.css off-canvas)
 * resolved here.
 */

.wa-is-rc,
.wa-is-pagination-area,
.wa-is-facets {
	/* Brand */
	--wa-primary: #623385;
	--wa-primary-hover: #6f3a98;
	--wa-primary-light: #dbc8ea;
	--wa-primary-ultra-light: #f3edf8;
	--wa-primary-ultra-dark-trans-10: rgba( 27, 14, 37, 0.1 );
	--wa-secondary: #efebf3;
	--wa-accent: #a0c801;
	--wa-accent-hover: #b7e401;
	--wa-base: #444;
	--wa-shade-dark: #404040;
	--wa-shade-medium: gray;
	--wa-shade-light: #f0f0f0;
	--wa-white: #fff;
	--wa-instock: #4ac012;
	--wa-outofstock: #f65713;

	/* ACSS fluid scales, resolved at a desktop viewport (1rem = 10px on prod). */
	--wa-space-xs: 11.11px;
	--wa-space-s: 14.67px;
	--wa-space-m: 22px;
	--wa-space-l: 33px;
	/* Medzera medzi stĺpcami bola doteraz utilita `gap--l` z Automatic.css, teda
	   var(--space-l). Statických 33px by na mobile vyrobilo viditeľne inú medzeru
	   než dnes, tak sme tú krivku prevzali — ale v px, nie v rem: ACSS beží
	   s `--root-font-size: 62.5%`, takže rem-ová podoba by mimo ACSS dala pri
	   1440px ~43px namiesto 33px. Takto dáva 20.1471px pri 390px a 33px pri
	   1440px bez ohľadu na root font-size, čo je aj pravidlo tohto bloku tokenov. */
	--wa-space-l-fluid: clamp( 19.2px, calc( 1.3529411765vw + 14.870588235px ), 33px );
	/* Same treatment as --wa-space-l-fluid above, for the --space-m curve —
	   fázy 5, Task 7 needed it for the sort-facet box's inset, previously
	   inherited from 165-header-compiled.css's `.sorting--filter` rule.
	   Resolves to 16px at 390px and 22px at 1440px, matching production. */
	--wa-space-m-fluid: clamp( 16px, calc( 0.5882352941vw + 14.117647059px ), 22px );
	/* Same treatment again, for --space-s — code review (fáza 5, Task 6/7 fix)
	   found the toolbar-row's borrowed padding-block used the static token,
	   accurate only above ACSS's 1340px upper breakpoint; ACSS's own
	   --space-s is clamp(1.3333rem, 0.1307189542vw + 1.291503268rem, 1.4667rem),
	   i.e. 13.333px..14.667px resolved at 1rem=10px. */
	--wa-space-s-fluid: clamp( 13.333px, calc( 0.1307189542vw + 12.91503268px ), 14.667px );
	--wa-text-s: 12px;
	--wa-text-m: 16px;
	--wa-text-l: 21.33px;
	--wa-text-xl: 28.43px;

	/* NOTE: the ACSS radius scale is inverted — xs is the largest. */
	--wa-radius-s: 11.11px;
	--wa-radius-l: 9px;
	--wa-radius-xxl: 7.29px;

	/* Legacy aliases still used by the facet sidebar / chips below. */
	--rc-brand: var( --wa-primary );
	--rc-ink: var( --wa-base );
	--rc-muted: #6b7280;
	--rc-line: #e7e7e9;
	--rc-soft: #f6f6f7;

	font-family: 'Mukta', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	width: 100%;
}

/* ---------------------------------------------------------------------------
   Dvojstĺpec — kontrakt tried, ktorý vlastní tento plugin.

   Doteraz ho kreslil Oxygen cez triedy témy. Tie
   pravidlá boli štyri a sú reprodukované nižšie 1:1; `gap` k nim pridávala
   utilita `gap--l` z Automatic.css — fluidná, 33px na 1440px a 20.15px na 390px.
   Tú krivku nesie --wa-space-l-fluid (v px, nie v rem — pozri komentár pri
   tokene vyššie), takže medzera sedí na oboch šírkach a na cudzom webe funguje
   bez ACSS, aj bez jeho root-font-size prepočtu.

   Používajú to oba režimy: [wa_instant_search] si obal vykreslí sám, a šablóna,
   ktorá potrebuje do stĺpcov vložiť aj vlastný obsah, si tieto triedy napíše na
   svoje obaly. Kontrakt je zdokumentovaný v README.
--------------------------------------------------------------------------- */
/* `body` prefix len kvôli špecificite — Oxygenov `.ct-div-block` má rovnakú
   váhu a načítava sa neskôr. Bez toho sa dvojstĺpec zloží aj na desktope. */
body .wa-is-shell {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var( --wa-space-l-fluid );
	width: 100%;
}
body .wa-is-shell__sidebar {
	width: 22%;
	min-width: 22%;
	max-width: 22%;
}
body .wa-is-shell__content {
	width: 100%;
}

@media screen and ( max-width: 1024px ) {
	body .wa-is-shell {
		flex-direction: column;
	}
	/* Sidebar je v DOM prvý, aby ho na desktope netreba preskakovať. Na mobile
	   patrí jeho obsah (podporný box) POD výsledky — facety sa aj tak otvárajú
	   v dialógu, nie tu. */
	body .wa-is-shell__sidebar {
		width: 100%;
		min-width: 0;
		order: 2;
	}
	body .wa-is-shell__content {
		order: 1;
	}
}

/* The "Potrebujete poradiť?" box belongs under the facets, not above them: the
   sidebar is a flex column, so this is an order swap and not a DOM move. The
   facets keep the implicit order 0. */
.wa-is-shell__sidebar > .wa-support-box {
	order: 1;
}

/* ---------------------------------------------------------------------------
 * Toolbar — .wa-is-toolbar (sort facet + result count + mobile trigger)
 * ------------------------------------------------------------------------- */

/* Oxygen's .ct-div-block defaults to a flex column; force it, so the toolbar row
   below actually spans the content column instead of shrink-wrapping. */
.wa-is-rc .wa-is-toolbar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}
.wa-is-rc .wa-is-toolbar-row {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var( --wa-space-xs );
	/* Oxygen used to give this block a --wa-space-s inset on all four sides via
	   universal.css, keyed off the class name below. Renaming the class detaches
	   it from that theme rule, so the block (top/bottom) side of the inset is
	   reproduced here explicitly; the inline side was already zeroed because it
	   pulled the sort control and the result count ~15px inside the content
	   column and left them out of line with the product grid underneath — the
	   toolbar spans the column. --space-s is itself fluid in ACSS (clamp, not a
	   flat rem), so the borrowed inset uses --wa-space-s-fluid, not the static
	   --wa-space-s token — the static one is only accurate above 1340px. */
	padding-block: var( --wa-space-s-fluid );
	padding-inline: 0;
}
/* Sort + result-count row. Oxygen's universal.css styles .wa-archive-sorting-filters
   through a :not(.ct-section):not(.oxy-easy-posts) selector — specificity (0,3,0),
   loaded after this file — so its `align-items: center` beats our `stretch` below
   1024px and the row shrink-wrapped to its content (~390px) instead of spanning the
   column. An explicit width on the child is unopposed, so it fixes it without
   !important. Own class (.wa-is-sorting-row), not the Oxygen utility one. */
.wa-is-rc .wa-is-sorting-row {
	width: 100%;
	flex: 1 1 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
}

/* Bunka s počtom výsledkov, zarovnaná doprava. Doteraz to robila utilita
   `justify-content--end` z Automatic.css — jediná z tých, čo markup nosil,
   ktorá naozaj niečo robila (bez nej element spadol z flex na block).
   Odmerané na 1440 aj 390 px, obe hodnoty sú tu reprodukované. */
.wa-is-rc .wa-is-count-cell {
	display: flex;
	justify-content: flex-end;
}

/* "FILTROVAŤ PRODUKTY" — hidden on desktop, full-width button below 1024px.
   flex-direction is spelled out because Oxygen's .ct-link sets `column`, which
   would stack the funnel icon above the label. */
.wa-is-rc .wa-is-filter-trigger {
	display: none !important;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: var( --wa-space-xs ) 24px;
	margin-bottom: var( --wa-space-l );
	border: 0;
	border-radius: var( --wa-radius-s );
	background-color: var( --wa-primary );
	color: var( --wa-white );
	font-size: var( --wa-text-l );
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.wa-is-rc .wa-is-filter-trigger:hover {
	background-color: var( --wa-primary-hover );
	color: var( --wa-white );
}
.wa-is-rc .wa-is-filter-trigger .wa-is-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* `oxy-wa-is-facet` a `wa-sidebar-widget` sa NEPREMENÚVAJÚ: štyluje ich aj
   kompilované CSS scorg postu 169 (téma). Premenovať ich znamená zmeniť aj ten
   post — to do fázy 5 nepatrí, lebo post 169 je hlavička, nie výsledková
   stránka. Zapísané 25. 8. 2026 po overení v DOM.

   Súvisiaci nález (code review, 25. 8. 2026): post 169 má aj
   `.tax-product_cat .sorting--filter { padding: 0 !important }`. Dnes to
   nevadí — .tax-product_cat platí len na kategóriách a SPA tam ešte nebeží —
   ale vo fáze 6, keď sa SPA nasadí aj na kategórie, tento !important prebije
   náš `.wa-is-rc .wa-is-sort-cell` padding (viď nižšie) a treba ho vtedy
   zohľadniť. */

/* universal.css and 165-header-compiled.css also styled `.sorting--filter`
   directly (light background + rounded corners, plus an inset border that
   was quietly worth 2px of box height); renaming it detaches that, so it is
   reproduced here explicitly instead of silently dropped. The horizontal
   inset used --space-m's fluid curve — same treatment as --wa-space-l-fluid
   above, see --wa-space-m-fluid. */
.wa-is-rc .wa-is-sort-cell {
	background-color: var( --wa-shade-light );
	border: 1px solid var( --wa-shade-light );
	border-radius: 10px;
	padding: 0 var( --wa-space-m-fluid );
}

/* Sort facet (production facet 5). The custom WPGB combobox is JS-built there;
   a native select styled the same way is visually identical and keyboard-safe. */
.wa-is-rc .oxy-wa-is-facet.wa-is-sort-cell fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}
.wa-is-rc .wa-is-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}
.wa-is-rc .wa-is-sort-facet > label {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
}
.wa-is-rc .wa-is-sort__select {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	min-height: 40px;
	margin: 0;
	padding: 0 34px 0 8px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var( --wa-shade-dark );
	font-family: inherit;
	font-size: 15.2px; /* calc( var(--text-m) * 0.95 ) */
	line-height: 20px;
	cursor: pointer;
}
.wa-is-rc .wa-is-sort__select:focus {
	outline: none;
}
.wa-is-rc .wa-is-select-controls {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY( -50% );
	display: flex;
	align-items: center;
	pointer-events: none;
}
.wa-is-rc .wa-is-select-controls .wa-is-select-separator {
	display: none;
}
.wa-is-rc .wa-is-select-toggle {
	width: 20px;
	height: 20px;
	fill: #ccc;
	stroke: none;
}

/* Result count (production facet 1). */
.wa-is-rc .wa-is-result-count {
	display: inline-block;
	color: var( --wa-shade-dark );
	font-size: var( --wa-text-m );
	line-height: 1.4;
	white-space: nowrap;
}
.wa-is-rc .wa-is-result-count::before {
	content: 'Zobrazuje sa: ';
}

/* ---------------------------------------------------------------------------
 * Grid wrapper — WPGB masonry replaced by a plain CSS grid (gutter 0, exactly
 * like the pre-JS fallback in G2G1C2C1.css: 3 cols ≥993px, 2 cols below).
 * ------------------------------------------------------------------------- */

.wa-is-rc .oxy-wa-is-grid,
.wa-is-rc .wp-grid-builder,
.wa-is-rc .wa-is-wrapper,
.wa-is-rc .wa-is-main,
.wa-is-rc .wa-is-layout,
.wa-is-rc .wa-is-viewport {
	position: relative;
	width: 100%;
	height: auto !important;
}
/* WP Grid Builder ships its own inline critical CSS
   (.wp-grid-builder:not(.wpgb-template){opacity:0.01}) that its JS clears once
   the real masonry engine finishes laying out .wpgb-card rows. We keep the
   .wp-grid-builder class on this wrapper only so existing theme CSS still
   targets it (see the width rule above) — the real WPGB JS never touches this
   element (this grid is ours), so that opacity never gets cleared and the
   whole grid stays invisible. !important because both rules are equal
   specificity (two classes) and load order between an inline <style> in
   <head> and this enqueued sheet is not guaranteed. Only actually needed
   where WP Grid Builder is still active alongside us (category archives —
   the optimizer only turns it off on search), but harmless everywhere else.*/
.wa-is-rc .wp-grid-builder {
	opacity: 1 !important;
}
.wa-is-rc .wa-is-masonry {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	grid-gap: 0;
	gap: 0;
	align-items: stretch;
}
@media ( max-width: 992px ) {
	.wa-is-rc .wa-is-masonry {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* No masonry JS here: cards must stay in flow even with .wa-is-enabled set. */
.wa-is-rc .wp-grid-builder .wa-is-card,
.wa-is-rc .wp-grid-builder.wa-is-enabled .wa-is-card {
	position: relative;
	width: auto;
	left: auto;
	top: auto;
	height: auto;
	margin: 0;
	font-size: 16px;
	min-width: 0;
	z-index: 0;
}

/* ---------------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------------- */

.wa-is-rc .wa-is-card .wa-is-card-wrapper {
	display: block;
	height: calc( 100% + 1px );
	margin: -1px;
	background: var( --wa-white );
	visibility: visible;
	opacity: 1;
	transform: none;
}
.wa-is-rc .wa-is-card .wa-is-card-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: var( --wa-white );
	border: 1px solid var( --wa-shade-light );
}
.wa-is-rc .wa-is-card:hover {
	box-shadow: 0 0 47px var( --wa-shade-light );
	transition: all 0.4s ease;
	z-index: 1;
}

/* Media: empty svg spacer forces the 1:1 box, thumbnail is a real <img>. */
.wa-is-rc .wa-is-card .wa-is-card-media {
	position: relative;
	display: flex;
}
.wa-is-rc .wa-is-card .wa-is-card-media > svg[ data-ratio ] {
	display: block;
	width: 100%;
	height: 0;
}
.wa-is-rc .wa-is-card .wa-is-card-media-thumbnail {
	position: absolute;
	overflow: hidden;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.wa-is-rc .wa-is-card .wa-is-card-media-thumbnail > a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	pointer-events: auto;
}
.wa-is-rc .wa-is-card .wa-is-card-inner .wa-is-card-media-thumbnail > a > img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 85%;
	margin-top: auto;
	object-position: bottom;
	object-fit: contain;
}
.wa-is-rc .wa-is-card .wa-is-card-media-content {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0;
	pointer-events: none;
}
.wa-is-rc .wa-is-card .wa-is-card-media-content > div {
	display: block;
	width: 100%;
}
.wa-is-rc .wa-is-card-media-content-top {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	display: grid !important;
	grid-template-columns: 1fr;
	gap: calc( var( --wa-space-xs ) * 0.5 );
	width: 100%;
	padding: var( --wa-space-xs ) var( --wa-space-xs ) var( --wa-space-xs ) 0 !important;
}

/* Content column */
.wa-is-rc .wa-is-card .wa-is-card-content {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	flex-grow: 1;
	width: 100%;
	padding: var( --wa-space-xs ) var( --wa-space-m ) calc( var( --wa-space-m ) * 1.2 ) var( --wa-space-m );
}
.wa-is-rc .wa-is-card .wa-is-card-body {
	position: relative;
	flex: auto;
	width: 100%;
	background: transparent;
}
.wa-is-rc .wa-is-card [class*='wa-is-block-'] {
	position: relative;
	display: block;
	white-space: normal !important;
}
.wa-is-rc .wa-is-card [class*='wa-is-block-'] > a {
	border: none;
	box-shadow: none;
	color: inherit;
	text-decoration: none;
}

/* Stock label (block-3). */
.wa-is-rc .wa-is-card .wa-is-block-3 {
	color: var( --wa-accent ) !important;
	font-size: calc( var( --wa-text-m ) * 0.85 ) !important;
}
.wa-is-rc .wa-is-card .wa-is-card-body .wa-is-block-3 .wooptima-product-labels-block {
	/* Production: column flex with centred items = chip horizontally centred. */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-height: 29px;
}
.wa-is-rc .wa-is-card .wa-is-card-body .wooptima-product-label__stock_status {
	padding: 2.5px 5px;
}
.wa-is-rc .wa-is-card .wa-is-card-body .wooptima-product-label__stock_status {
	background: none !important;
}
.wa-is-rc .wa-is-card .wa-is-card-body .wooptima-product-label__stock_status.instock {
	color: var( --wa-instock );
	font-size: calc( var( --wa-text-s ) * 1.2 ) !important;
}
.wa-is-rc .wa-is-card .wa-is-card-body .wooptima-product-label__stock_status.outofstock,
.wa-is-rc .wa-is-card .wa-is-card-body .wooptima-product-label__stock_status.onbackorder {
	color: var( --wa-outofstock );
	font-size: calc( var( --wa-text-s ) * 1.2 ) !important;
}

/* Title (block-1). WPGB's own .wa-is-card-1 default is 700 — the site forces 400. */
.wa-is-rc .wa-is-card .wa-is-card-body .wa-is-block-1 {
	margin: 0 0 var( --wa-space-s );
	min-height: 40px;
	color: var( --wa-base );
	font-size: calc( var( --wa-text-m ) * 1.1 ) !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
}
.wa-is-rc .wa-is-card .wa-is-card-body .wa-is-block-1 > a {
	color: inherit;
}

/* Media labels (block-5): sale badge. */
.wa-is-rc .wa-is-card .wooptima-product-labels-block .wooptima-product-label__sale_percentage {
	display: inline-block;
	width: max-content !important;
	background: #cd1515 !important;
	color: #fff;
	font-size: var( --wa-text-s ) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	padding: calc( var( --wa-space-xs ) * 0.6 ) var( --wa-space-s );
	border-top-right-radius: var( --wa-radius-xxl );
	border-bottom-right-radius: var( --wa-radius-xxl );
}
.wa-is-rc .wa-is-card .wooptima-product-labels-block .wooptima-product-label__sale_percentage.wooptima-product-label__nominal {
	background-color: #ea7e1e !important;
}

/* Footer: price left, add-to-cart right, both bottom-aligned. */
.wa-is-rc .wa-is-card .wa-is-card-footer {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	gap: calc( var( --wa-space-xs ) * 0.5 );
	background: transparent;
}
.wa-is-rc .wa-is-card .wa-is-card-footer span {
	white-space: nowrap;
}

/* Price. NOTE the inverted naming: __regular is the CURRENT price, __sale the
   crossed-out old one (ProductLabels.php::get_alza_prices_label_html). */
.wa-is-rc .wa-is-card .wa-al-card-price-wrapper,
.wa-is-rc .wa-is-card .wa-al-card-price--regular,
.wa-is-rc .wa-is-card .wa-al-card-price--onsale,
.wa-is-rc .wa-is-card .wa-al-card-price__bottom {
	display: flex !important;
	flex-direction: column;
}
.wa-is-rc .wa-is-card .wa-al-card-price-wrapper {
	width: 100%;
	max-width: 150px;
}
.wa-is-rc .wa-is-card .wa-al-card-price__regular {
	font-weight: 700;
	font-size: var( --wa-text-xl );
	line-height: 1;
	text-align: center;
}
.wa-is-rc .wa-is-card .wa-al-card-price__sale {
	font-weight: 400;
	font-size: calc( var( --wa-text-s ) * 1.2 );
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	line-height: 1;
	text-align: center;
}
.wa-is-rc .wa-is-card .wa-al-card-price--regular .wa-al-card-price__regular {
	color: var( --wa-base );
	text-align: left;
}
.wa-is-rc .wa-is-card .wa-al-card-price--onsale .wa-al-card-price__top {
	padding: calc( var( --wa-space-xs ) * 0.8 ) calc( var( --wa-space-xs ) * 0.6 ) calc( var( --wa-space-xs ) * 0.5 );
	background: linear-gradient( 90deg, rgb( 255, 147, 147 ) 0%, rgb( 255, 53, 0 ) 100% );
	border-radius: var( --wa-radius-l ) var( --wa-radius-l ) 0 0;
	color: var( --wa-white ) !important;
	font-size: var( --wa-text-m );
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	text-align: center;
}
.wa-is-rc .wa-is-card .wa-al-card-price--onsale .wa-al-card-price__bottom {
	padding: calc( var( --wa-space-xs ) * 0.5 ) calc( var( --wa-space-xs ) * 0.6 );
	background-color: #1c1c1c;
	border-radius: 0 0 var( --wa-radius-l ) var( --wa-radius-l );
}
.wa-is-rc .wa-is-card .wa-al-card-price--onsale .wa-al-card-price__regular,
.wa-is-rc .wa-is-card .wa-al-card-price--onsale .wa-al-card-price__sale {
	color: var( --wa-white );
}
.wa-is-rc .wa-is-card .wa-al-card-price__regular .woocommerce-Price-amount,
.wa-is-rc .wa-is-card .wa-al-card-price__sale .woocommerce-Price-amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* Add-to-cart (block-7) — Wooptima button block. */
.wa-is-rc .wa-is-card .wooptima-button-block {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	/* px, nie rem: root font-size 62.5 % nastavuje Automatic.css, takže rem-ová
	   podoba by mimo neho dala 8px namiesto 5px. Túto premennú konzumuje
	   wooptima button block, nie tento súbor. */
	--roundness: 5px;
	--padding: 8.89px 13.5px;
	--text-size: 16px;
}
.wa-is-rc .wa-is-card .wooptima-button__add_to_cart > a {
	width: auto;
	height: auto;
	max-height: 40px;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0 !important;
	box-sizing: border-box;
	padding: calc( var( --wa-space-xs ) * 0.8 ) 13.5px;
	border: none !important;
	border-radius: var( --wa-radius-xxl );
	font-size: var( --wa-text-m );
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: all 400ms ease-in-out;
}
.wa-is-rc .wa-is-card .wooptima-button__add_to_cart > .instock {
	background: var( --wa-accent );
	color: var( --wa-white );
}
/* Production: icon separated from the label (…>.instock>img {margin-right:var(--space-xs)}). */
.wa-is-rc .wa-is-card .wooptima-button__add_to_cart > a > img {
	margin-right: var( --wa-space-xs );
}
.wa-is-rc .wa-is-card .wooptima-button__add_to_cart > .instock:hover {
	background: var( --wa-accent-hover );
	border-color: var( --wa-accent-hover );
	color: var( --wa-white );
}
/* Nedostupný produkt: tlačidlo sa nesmie čítať ako „kúpiť". Produkcia mu dáva
   ružové #FFDCE2 s accent textom (165-header-compiled.css); tu je zámerne šedé
   „disabled" s kontrastným textom „Zobraziť" a ikonou „i" v krúžku — je to
   odkaz na detail produktu, nie akcia košíka. Odchýlka od produkcie je vedomá
   a vyžiadaná; ostatné rozmery (radius, padding, výška) zostávajú spoločné,
   aby sa mriežka nerozskákala, keď sa v riadku miešajú oba stavy. */
/* Špecificita zámerne 6 tried: to isté pravidlo nesie aj kompilované CSS témy
   (uploads/scorg/css/165-header-compiled.css, `.wa-primary-product-grid
   .wa-is-card .wa-is-card-footer .wooptima-button__add_to_cart > .outofstock`,
   5 tried) a naša mriežka tú triedu stále nosí. Slabšie pravidlo by prehralo
   a tlačidlo by zostalo ružové. Šiestu triedu dodáva náš vlastný `.wa-is-block-7`,
   nie ďalšie zopakovanie cudzej — sledovanú väzbu to nerozširuje. */
.wa-is-rc .wa-is-card .wa-is-card-footer .wa-is-block-7 .wooptima-button__add_to_cart > a.outofstock {
	background: #e6e6e9;
	color: #5b5b60;
}
.wa-is-rc .wa-is-card .wa-is-card-footer .wa-is-block-7 .wooptima-button__add_to_cart > a.outofstock:hover {
	background: #dcdce0;
	color: #3f3f44;
}
.wa-is-rc .wa-is-card .wooptima-button__add_to_cart > a > img {
	width: 18px !important;
	height: 18px !important;
	margin-right: var( --wa-space-xs ) !important;
	flex: 0 0 auto;
}
/* CRITICAL: Wooptima's delegated handler tests `event.target.dataset`, not
   closest() — a click landing on the icon or the label would be ignored.
   Production gets this from wooptima-gridbuilder-blocks.css; our cards are not
   inside a real WPGB grid, so it has to be repeated here. */
.wa-is-rc .wooptima-button-block a img,
.wa-is-rc .wooptima-button-block a svg,
.wa-is-rc .wooptima-button-block a span {
	pointer-events: none;
}

/* Whole-card overlay link: below the button, above everything else. */
.wa-is-rc .wa-is-card .wa-is-card-layer-link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: auto;
	z-index: 1;
}
.wa-is-rc .wa-is-card .wa-is-card-body .wa-is-block-1 {
	z-index: 2;
}

/* ---------------------------------------------------------------------------
 * Skeleton (loading state) — sits in the same grid as the real cards.
 * ------------------------------------------------------------------------- */
.wa-is-card--skeleton {
	pointer-events: none;
	border: 1px solid var( --wa-shade-light );
	background: #fff;
	padding-bottom: 16px;
}
.wa-is-card--skeleton .wa-is-card__media {
	aspect-ratio: 1 / 1;
	background: var( --rc-soft );
}
.wa-is-sk-line {
	height: 12px;
	margin: 10px 22px 0;
	border-radius: 6px;
	background: var( --rc-soft );
}
.wa-is-sk-line--short {
	width: 55%;
}
.wa-is-card--skeleton .wa-is-card__media,
.wa-is-sk-line {
	animation: wa-is-pulse 1.2s ease-in-out infinite;
}
@keyframes wa-is-pulse {
	50% { opacity: .55; }
}

/* States */
.wa-is-state {
	padding: 40px 16px;
	text-align: center;
	color: var( --rc-muted );
	font-size: 15px;
}
.wa-is-sentinel {
	height: 1px;
}

/* ---------------------------------------------------------------------------
 * Pagination area — .wa-is-pagination-area holds the (hidden) load-more facet
 * and the numbered pagination facet, exactly as on production.
 * ------------------------------------------------------------------------- */
.wa-is-pagination-area {
	width: 100%;
	/* Tied specificity with universal.css's own (equal-weight, later-loaded)
	   .wa-archive-pagination rule used to let the theme's real fluid --space-l
	   win here. Renaming detaches it from that rule, so the fluid curve is used
	   directly instead of the desktop-only static token. */
	margin-top: var( --wa-space-l-fluid );
	margin-bottom: var( --wa-space-l-fluid );
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	font-family: 'Mukta', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.wa-is-pagination-area button.wa-is-button {
	width: 100%;
	height: auto;
	max-height: unset;
	margin: 0;
	padding: 15px 36px;
	border: none;
	box-shadow: none;
	border-radius: var( --wa-radius-s );
	background-color: var( --wa-primary );
	color: #fff;
	cursor: pointer;
	font-size: var( --wa-text-m );
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 1px;
	transition: background-color ease 0.25s;
}
.wa-is-pagination-area button.wa-is-button:not( [disabled] ):hover,
.wa-is-pagination-area button.wa-is-button:not( [disabled] ):focus {
	background-color: var( --wa-primary-hover );
}
/* Production runs numbered pagination, so the load-more facet is display:none. */
.wa-is-pagination-area .wa-is-facet-7 {
	display: none;
}
.wa-is-pagination-area .wa-is-pagination-facet {
	margin-left: auto;
}
.wa-is-pagination-area .wa-is-pagination {
	position: relative;
	display: inline-block;
	margin: 0 -10px; /* --wa-is-pagination-horizontal-spacing: 20px */
	padding: 0;
	list-style: none;
}
.wa-is-pagination-area .wa-is-pagination li.wa-is-page {
	position: relative;
	display: inline-block;
	height: auto;
	min-width: auto;
	margin: 0 10px;
	padding: 0;
	cursor: default;
	font-size: var( --wa-text-m );
	font-weight: bold;
	line-height: 32px;
	list-style: none;
	text-align: center;
	vertical-align: middle;
}
.wa-is-pagination-area .wa-is-page > a,
.wa-is-pagination-area .wa-is-page > span {
	position: relative;
	display: block;
	padding: 10px 20px;
	border: none;
	border-radius: var( --wa-radius-s );
	box-shadow: none;
	color: var( --wa-shade-dark );
	font-size: var( --wa-text-m );
	font-weight: normal;
	line-height: 32px;
	text-decoration: none;
}
.wa-is-pagination-area .wa-is-page > a:hover {
	color: var( --wa-primary-hover );
}
.wa-is-pagination-area .wa-is-page > a[ aria-current='true' ] {
	color: var( --wa-primary );
	background-color: var( --wa-primary-ultra-light );
	font-weight: 700;
}
.wa-is-pagination-area .wa-is-page > span.wa-is-dots-page {
	color: var( --wa-shade-medium );
}
.wa-is-pagination-area .wa-is-pagination li:last-child a {
	font-weight: 700;
	color: var( --wa-primary );
}

@media ( max-width: 1024px ) {
	.wa-is-rc .wa-is-filter-trigger {
		display: flex !important;
	}
	.wa-is-rc .wa-is-toolbar-row {
		flex-direction: column;
		align-items: stretch;
		/* Theme's universal.css reset this to 0 on all sides below 1024px too —
		   keep the borrowed padding-block/-inline value in sync here. */
		padding-block: 0;
	}
	.wa-is-pagination-area {
		flex-direction: column;
	}
}
@media ( max-width: 480px ) {
	.wa-is-rc .wa-is-filter-trigger {
		/* 5438-header-compiled.css carried an !important margin-bottom keyed off
		   this element's old, theme-shared class name — but only inside its own
		   max-width:480px block, NOT the 1024px one. Above 480px the static
		   --wa-space-l (33px) below still wins there via specificity, unopposed.
		   Renaming detaches this element from that rule at <=480px, so the fluid
		   value is reproduced here explicitly, scoped to the same breakpoint. */
		margin-bottom: var( --wa-space-l-fluid );
	}
}
@media ( max-width: 768px ) {
	.wa-is-rc .wa-is-card .wa-is-card-content {
		padding-left: var( --wa-space-xs );
		padding-right: var( --wa-space-xs );
		padding-bottom: var( --wa-space-s );
	}
	.wa-is-rc .wa-is-card .wa-al-card-price__regular {
		font-size: calc( var( --wa-text-xl ) * 0.8 );
	}
	.wa-is-rc .wa-is-card .wooptima-button__add_to_cart {
		font-size: 0 !important;
	}
	.wa-is-rc .wa-is-card .wooptima-button__add_to_cart > a > span {
		display: none !important;
	}
	.wa-is-rc .wa-is-card .wooptima-button__add_to_cart > a > img {
		margin-right: 0 !important;
		width: 22px !important;
		height: 22px !important;
	}
	.wa-is-pagination-area .wa-is-page > a,
	.wa-is-pagination-area .wa-is-page > span {
		padding: 6px 10px;
	}
	.wa-is-pagination-area .wa-is-pagination li.wa-is-page {
		margin: 0 2px;
	}
}

/* ---------------------------------------------------------------------------
 * Facet sidebar — rendered into cfg.sidebarSelector (.wa-is-facets) inside the
 * template's .wa-is-shell__sidebar column, i.e. OUTSIDE .wa-is-rc, so the
 * token block at the top of this file lists it explicitly.
 *
 * The structural facet CSS (.wa-is-checkbox-control, .wa-is-range-slider,
 * .wa-is-toggle-hidden, …) used to ship in a bundled stylesheet enqueued
 * alongside this file; that stylesheet is gone (commit 77726f76). Everything
 * below is the SITE layer: the per-facet-ID
 * overrides from 39.css (purple accents, round controls), .wa-sidebar-widget
 * from universal.css and the off-canvas drawer from 193-header-compiled.css —
 * with every value resolved to px (1rem = 10px on production).
 * ------------------------------------------------------------------------- */

.wa-is-facets {
	font-family: 'Mukta', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color: var( --wa-base );
}

/* universal.css .wa-sidebar-widget — was the light-purple facet box, but its
   own padding is 0 (sits flush inside .wa-is-facets, which now owns both the
   background and the protective padding around it — see the desktop dialog
   rule below — so the padding area is visibly part of the coloured box
   instead of blending into the page background). */
.wa-is-facets .wa-sidebar-widget {
	margin-bottom: var( --wa-space-m );
	padding: 0;
	/* universal.css's own bare .wa-sidebar-widget rule still sets a background
	   here (--secondary happens to equal our --wa-secondary right now, but
	   that is a coincidence, not a contract) — neutralised explicitly so the
	   colour genuinely lives in one place, .wa-is-facets above. */
	background: none;
	border-radius: 0;
}

/* Facet titles. WPGB's base is 20px/24px with a 24px bottom margin; every facet
   on production overrides it to --text-m/700/--base with --space-xs below, and
   .wa-sidebar-widget adds --space-m above (0 for the first facet). */
.wa-is-facets .wa-is-facet .wa-is-facet-title {
	margin: var( --wa-space-m ) 0 var( --wa-space-xs );
	padding: 0;
	color: var( --wa-base );
	font-size: var( --wa-text-m );
	font-weight: 700;
	line-height: 1.2;
}
.wa-is-facets .oxy-wa-is-facet:first-child .wa-is-facet .wa-is-facet-title {
	margin-top: 0;
}
/* .oxy-wa-is-facet drops WPGB's 40px fieldset gap; the title margin is the gap. */
.wa-is-facets .oxy-wa-is-facet .wa-is-facet > fieldset:last-child {
	margin-bottom: 0;
}
.wa-is-facets .wa-is-facet fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
}
.wa-is-facets .wa-is-facet fieldset legend.wa-is-sr-only {
	height: 1px;
	width: 1px;
}
.wa-is-facets .wa-is-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

/* --- Štruktúra facetov (bola vo vendorovanom CSS, commit 77726f76) --------
   Fáza 1b zmazala bundlované cudzie CSS s auditom podľa NÁZVOV tried: trieda,
   ktorú náš súbor spomínal, sa počítala za pokrytú. Lenže náš súbor tieto
   triedy len prefarboval — `.wa-is-checkbox-control` mal `border-color`, nie
   rozmer, orámovanie ani odfajknutie; `.wa-is-range-slider` nemal dráhu;
   `.wa-is-toggle-hidden` nemal vôbec nič. Výsledok: checkboxy neviditeľné,
   „+ Ďalších N" ako holé systémové tlačidlo, cenový posuvník bez dráhy aj
   úchytov, teda neovládateľný.

   Nasleduje presne tá chýbajúca štruktúra, opísaná z produkčného
   `style(1).css` (bajt v bajt ten istý súbor, čo commit 77726f76 zmazal).
   Ide zámerne o NIŽŠIU špecificitu než sekcie s prefarbením nižšie, aby si
   brandové prepisy (fialová, okrúhle kontrolky) naďalej sadli navrch.
--------------------------------------------------------------------------- */

/* Nedostupná hodnota — pôvodný zdroj ju značí cez tabindex="-1". */
.wa-is-facets .wa-is-facet [class^='wa-is'][role='button'][tabindex='-1'] {
	opacity: 0.4;
	cursor: not-allowed;
}
.wa-is-facets .wa-is-facet [class^='wa-is'][role='button'][tabindex='-1'] * {
	pointer-events: none;
}

.wa-is-facets .wa-is-facet .wa-is-checkbox-facet .wa-is-checkbox {
	display: flex;
	margin: 0;
	padding: 0;
	line-height: 1;
	list-style: none;
	outline: none;
	box-shadow: none;
}
.wa-is-facets .wa-is-facet .wa-is-checkbox-facet .wa-is-checkbox-control {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 20px;
	width: 20px;
	/* Vlastný `box-sizing`, nie zdedený: pôvodné pravidlo sa spoliehalo na reset
	   `* { box-sizing: border-box }` z témy. Bez neho sa 2px rám priráta k
	   rozmeru a kontrolka narastie na 24px — presne to sa stane na webe, ktorý
	   ten reset nemá. To isté platí pre úchyt posuvníka nižšie. */
	box-sizing: border-box;
	border-radius: 4px;
	border-style: solid;
	border-width: 2px;
	cursor: pointer;
	transition: border-color ease 0.25s, background-color ease 0.25s;
}
/* Vodorovná čiarka pre „mixed" (rodič s časťou zaškrtnutých detí). */
.wa-is-facets .wa-is-facet .wa-is-checkbox-facet .wa-is-checkbox-control::before {
	content: '';
	position: absolute;
	z-index: 1;
	height: 2px;
	width: 8px;
	border-style: solid;
	border-width: 2px 0 0;
	box-sizing: border-box;
	transform: scale( 0 );
	transition: transform ease 0.25s, border-color ease 0.25s;
}
/* Odfajknutie: dva okraje otočené o 45°, zväčšené až po zaškrtnutí. */
.wa-is-facets .wa-is-facet .wa-is-checkbox-facet .wa-is-checkbox-control::after {
	content: '';
	position: relative;
	top: -1px;
	height: 10px;
	width: 6px;
	border: solid transparent;
	border-width: 0 2px 2px 0;
	box-sizing: border-box;
	transform: rotate( 45deg ) scale( 0 );
	transition: transform ease 0.25s, border-color ease 0.25s;
}
.wa-is-facets .wa-is-facet .wa-is-checkbox-facet .wa-is-checkbox[ aria-pressed='mixed' ] .wa-is-checkbox-control::before {
	transform: scale( 1 );
}
.wa-is-facets .wa-is-facet .wa-is-checkbox-facet .wa-is-checkbox[ aria-pressed='true' ] .wa-is-checkbox-control::after {
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg ) scale( 1 );
}
/* Základ menovky; prefarbenie a rozloženie počtu doplní sekcia nižšie. */
.wa-is-facets .wa-is-facet .wa-is-checkbox-label {
	flex: auto;
	margin: 0;
	padding: 0 0 0 8px;
	font-size: 16px;
	font-weight: normal;
	line-height: 20px;
	cursor: pointer;
}

/* Rozsahový (cenový) facet — bez týchto pravidiel nemá posuvník dráhu ani
   úchyty, takže sa nedá chytiť ani myšou. */
.wa-is-facets .wa-is-facet .wa-is-range-facet {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0;
}
.wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-slider {
	position: relative;
	width: 100%;
	height: 6px;
	margin: 6px 0 16px;
	background-color: rgba( 204, 204, 204, 0.4 );
	border-radius: 4px;
	touch-action: none;
	cursor: pointer;
}
.wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-slider .wa-is-range-progress {
	position: absolute;
	left: 8px;
	right: 8px;
	height: 100%;
	background-color: #2684ff;
	transform: scale( 0 );
	transform-origin: 0 50%;
	will-change: transform;
	cursor: pointer;
}
/* Dráha je z oboch strán zúžená o 8px (polovica úchytu), aby úchyt v krajnej
   polohe nevytŕčal — prepočet pozícií v dragSlider() s tým ráta. */
.wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-slider .wa-is-range-thumbs {
	position: absolute;
	left: 8px;
	right: 8px;
	top: 50%;
	height: 0;
}
.wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-slider .wa-is-range-thumb {
	position: absolute;
	z-index: 2;
	top: 50%;
	height: 16px;
	width: 16px;
	box-sizing: border-box;
	border-radius: 8px;
	background-color: #fff;
	border: 2px solid #2684ff;
	transform: translate( -50%, -50% );
	cursor: pointer;
}
.wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-values {
	position: relative;
	align-items: center;
	flex-grow: 1;
	padding: 4px 0;
	font-size: 16px;
	line-height: 18px;
	font-variant-numeric: tabular-nums;
}
.wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-clear {
	position: relative;
	height: auto;
	max-height: unset;
	margin: 0;
	padding: 8px;
	background: rgba( 204, 204, 204, 0.35 );
	border: none;
	border-radius: 4px;
	box-shadow: none;
	color: #2a2a2a;
	font-style: unset;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0;
	text-decoration: unset;
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	transition: background-color ease 0.25s;
}
.wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-clear:hover:not( [disabled] ) {
	background: rgba( 204, 204, 204, 0.25 );
}
.wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-clear[ disabled ] {
	opacity: 0.6;
	cursor: not-allowed;
	transition: none;
}

/* „+ Ďalších N" / „- Menej". */
.wa-is-facets .wa-is-facet .wa-is-toggle-hidden {
	position: relative;
	display: block;
	height: auto;
	max-height: unset;
	margin: 16px 0 0;
	padding: 8px;
	background: rgba( 204, 204, 204, 0.35 );
	border: none;
	border-radius: 4px;
	box-shadow: none;
	color: #2a2a2a;
	font-style: unset;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0;
	text-decoration: unset;
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	transition: background-color ease 0.25s;
}
.wa-is-facets .wa-is-facet .wa-is-toggle-hidden:hover {
	background: rgba( 204, 204, 204, 0.25 );
}

/* --- Checkbox facets ---------------------------------------------------- */
/* Production overrides the WPGB accent (#0069ff) per facet ID; every facet in
   the sidebar gets the brand purple, and the named ones (Cena, Výrobca, Farba,
   Distribúcia, Stav produktu → .wa-is--round) also get a circular control. */
.wa-is-facets .wa-is-facet .wa-is-checkbox-facet .wa-is-checkbox .wa-is-checkbox-control {
	border-color: var( --wa-primary );
}
.wa-is-facets .wa-is-facet .wa-is-checkbox-facet .wa-is-checkbox[ aria-pressed='true' ] .wa-is-checkbox-control {
	background-color: var( --wa-primary );
	border-color: var( --wa-primary );
}
.wa-is-facets .wa-is-facet .wa-is--round .wa-is-checkbox-control,
.wa-is-facets .wa-is--round .wa-is-checkbox-facet .wa-is-checkbox-control {
	border-radius: 50%;
}
.wa-is-facets .wa-is-facet .wa-is-checkbox:focus .wa-is-checkbox-control,
.wa-is-facets .wa-is-facet .wa-is-toggle-hidden:focus,
.wa-is-facets .wa-is-facet .wa-is-range-clear:focus,
.wa-is-facets .wa-is-facet .wa-is-range-thumb:focus {
	outline-color: var( --wa-primary-light ) !important;
}
/* WPGB's sidebar convention: label left, count right. */
.wa-is-facets .wa-is-facet .wa-is-checkbox-label {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	color: var( --wa-base );
}
.wa-is-facets .wa-is-opt__count {
	flex: 0 0 auto;
	color: var( --wa-shade-medium );
	font-size: var( --wa-text-s );
	font-variant-numeric: tabular-nums;
}
/* --- Range (price) facet ------------------------------------------------- */
.wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-slider .wa-is-range-progress {
	background-color: var( --wa-primary );
}
.wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-slider .wa-is-range-thumb {
	background-color: var( --wa-primary );
	border-color: var( --wa-primary );
	border-width: 3px;
}
.wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-values {
	color: var( --wa-base );
	font-size: var( --wa-text-m );
}
/* The state inputs are hidden (WPGB hides them the same way). */
.wa-is-facets .wa-is-facet .wa-is-range-facet input {
	display: none;
}

/* --- Clear all ----------------------------------------------------------- */
/* WPGB's reset facet, recoloured off its default red onto the brand. */
.wa-is-facets .wa-is-clear.wa-is-reset {
	width: 100%;
	margin: var( --wa-space-m ) 0 0;
	padding: 10px 16px;
	background-color: var( --wa-white );
	border-radius: var( --wa-radius-s );
	color: var( --wa-primary );
	font-size: var( --wa-text-m );
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
}
.wa-is-facets .wa-is-clear.wa-is-reset:hover {
	background-color: var( --wa-primary );
	color: var( --wa-white );
}

/* --- Facety: stĺpec nad 1024px, modálny drawer pod ním -------------------- */

/* Zatvorený <dialog> je z UA štýlu display:none. Nad breakpointom ho vraciame
   do layoutu — bez tohto pravidla facety zmiznú z celej širokej obrazovky, a je
   to tichá strata, nie chyba. Preto na to existuje test. */
@media screen and ( min-width: 1025px ) {
	dialog.wa-is-facets {
		display: block;
		position: static;
		width: 100%;
		max-width: none;
		max-height: none;
		margin: 0;
		/* Protective zone: .wa-sidebar-widget's own padding is 0 (sits flush
		   inside its rounded box), so without this every facet would touch the
		   box's edges/rounded corners with nothing between them on any side —
		   same all-sides treatment the mobile drawer rule below already uses. */
		padding: var( --wa-space-m, 22px );
		border: 0;
		/* The light-purple box background lives here (not on .wa-sidebar-widget
		   below) so the padding above is visibly inside the coloured box
		   instead of reading as plain page background around it. */
		background-color: var( --wa-secondary );
		border-radius: var( --wa-radius-l );
		color: inherit;
		overflow: visible;
	}
}

@media screen and ( max-width: 1024px ) {
	dialog.wa-is-facets {
		position: fixed;
		top: 0;
		left: 0;
		right: auto;
		z-index: 10000002;
		width: 80vw;
		max-width: none;
		min-width: 250px;
		height: 100vh;
		max-height: 100vh;
		margin: 0;
		padding: var( --wa-space-m, 22px );
		border: 0;
		overflow-x: hidden;
		overflow-y: auto;
		background: #fff;
		box-shadow: 0 0 20px var( --wa-primary-ultra-dark-trans-10, rgba( 27, 14, 37, 0.1 ) );
		transform: translate( -100% );
		transition: transform 0.4s cubic-bezier( .77, 0, .175, 1 );
	}
	dialog.wa-is-facets[open] {
		transform: translate( 0% );
	}
	dialog.wa-is-facets::backdrop {
		background: rgba( 27, 14, 37, 0.4 );
	}
	/* Widget box nemá vnútri bieleho draweru zmysel. */
	.wa-is-facets .wa-sidebar-widget {
		margin-bottom: 0;
		padding: 0;
		background: none;
	}
}

/* Active filter chips (production facet 4 — empty in the archive, so the look is
   ours; kept in the wpgb key: brand purple on --primary-ultra-light, --radius-s,
   --text-m typography). */
.wa-is-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 var( --wa-space-xs );
}
.wa-is-active[ hidden ] {
	display: none;
}
.wa-is-active__label {
	color: var( --wa-shade-dark );
	font-size: calc( var( --wa-text-m ) * 0.875 );
	font-weight: 700;
}
.wa-is-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var( --wa-primary-light );
	border-radius: var( --wa-radius-s );
	background: var( --wa-primary-ultra-light );
	color: var( --wa-primary );
	font-family: inherit;
	font-size: calc( var( --wa-text-m ) * 0.875 );
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .12s, color .12s, background .12s;
}
.wa-is-chip:hover {
	border-color: var( --wa-primary );
	background: var( --wa-primary-light );
	color: var( --wa-primary-hover );
}
.wa-is-chip svg {
	flex: 0 0 auto;
	opacity: .7;
}
.wa-is-active__clear {
	border: 0;
	background: none;
	padding: 4px 6px;
	color: var( --wa-primary );
	font-family: inherit;
	font-size: calc( var( --wa-text-m ) * 0.875 );
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
}

/* Rewrite notice ("Zobrazujeme výsledky pre …") */
.wa-is-rewrite {
	font-size: 14px;
	line-height: 1.5;
	color: var( --rc-muted );
	margin: 0 0 12px;
}

/* --- Prevzaté z vendorovaného CSS, ktoré fáza 1b zmazala -------------------
   Týchto päť tried náš vlastný súbor neštýloval; všetko ostatné, čo emitujeme,
   už tu bolo. Pravidlá sú opísané z pôvodného súboru, nie vymyslené — zdroj je
   v histórii, commit 77726f76 (pred zmazaním bundlovaného CSS).             */

body .wa-is-facet ul.wa-is-expanded li[hidden] {
	display: inherit;
}

.wa-is-facet .wa-is-hierarchical-list {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wa-is-facet .wa-is-hierarchical-list li {
	display: block;
	margin: 12px 0 0;
	padding: 0;
	line-height: 1;
	list-style: none;
}

/* Položky nad `facetLimit` dostávajú `hidden` a odkryje ich až „zobraziť viac".
   Pravidlo vyššie (0,2,1) ale prebíja UA `[hidden] { display: none }` (0,1,0),
   takže sa kreslili všetky — facet Procesor vypisoval 168 hodnôt namiesto 8
   a stránka kategórie merala 14 290 px. Špecificita (0,3,1) je zámerne nižšia
   než `ul.wa-is-expanded li[hidden]` (0,3,3) o pár riadkov vyššie, aby
   „zobraziť viac" naďalej fungovalo. */
.wa-is-facet .wa-is-hierarchical-list li[hidden] {
	display: none;
}

.wa-is-facet .wa-is-hierarchical-list:first-child > li:first-child {
	margin: 0;
}

.wa-is-facet .wa-is-hierarchical-list ul {
	margin: 0 0 0 20px;
	list-style: none;
}

.wa-is-facet .wa-is-hierarchical-list label {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	margin: 0;
	padding: 0;
}

.wa-is-facet .wa-is-hierarchical-list input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	-webkit-appearance: none;
}

.rtl .wa-is-facet .wa-is-hierarchical-list li ul {
	margin: 0 20px 0 0;
}

.wa-is-facet .wa-is-apply,
.wa-is-facet .wa-is-load-more {
	background-color: #0069ff;
}