/**
 * 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 WPGB base (`.wp-grid-builder .wpgb-card …`) ships separately in
 * assets/wpgb/wpgb-style.css — only the site overrides live here.
 *
 * The facet sidebar is the same kind of re-implementation: production WPGB facet
 * markup, with the structural WPGB base coming from assets/wpgb/wpgb-style.css
 * 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-rc,
.wa-archive-pagination,
.wa-isf-facets {
	/* Brand — mapped onto the theme's design tokens (bionela-new/assets/css/
	   tokens.css) so the facet sidebar, chips and pager follow the site palette
	   instead of the purple it was ported with. Every fallback is the resolved
	   theme value, so this file still renders sanely without the theme sheet. */
	--wa-primary: var( --teal, #0e5551 );
	--wa-primary-hover: var( --teal-600, #0c4946 );
	--wa-primary-light: var( --teal-line, #cfe3e0 );
	--wa-primary-ultra-light: var( --teal-50, #eef5f4 );
	--wa-primary-ultra-dark-trans-10: rgba( 14, 85, 81, 0.1 );
	--wa-secondary: var( --teal-50, #eef5f4 );
	--wa-accent: var( --green, #6cbf3f );
	--wa-accent-hover: var( --green-600, #5aa832 );
	--wa-base: var( --ink, #1c2624 );
	--wa-shade-dark: var( --ink, #1c2624 );
	--wa-shade-medium: var( --muted, #6b7975 );
	--wa-shade-light: var( --line, #e6eae9 );
	--wa-white: #fff;
	--wa-instock: var( --stock-dot, #22a05c );
	--wa-outofstock: var( --tag-red, #d64545 );

	/* 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;
	--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: var( --muted, #6b7975 );
	--rc-line: var( --line, #e6eae9 );
	--rc-soft: var( --line-soft, #eef1f0 );

	font-family: var( --font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif );
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Oxygen archive template (39) — leftovers the SPA replaced.
 *
 * The template still ships the pre-SPA scaffolding: a sidebar widget slot, a
 * shortcode slot, a filters area and a pagination area. On a listing the SPA
 * owns, all four render nothing — the app builds its OWN toolbar and pagination
 * inside .category__results, reusing the same class names (see .wa-rc
 * .wa-archive-filters-area below). What is left is an empty 44px block in the
 * sidebar and three boxes whose margins still push the results down.
 *
 * Matched on :empty rather than on their Oxygen ids, for two reasons: the ids
 * (#div_block-44-39, #shortcode-369-404, #div_block-136-39, #div_block-139-39)
 * are rebuild-fragile, and :empty makes the rule self-correcting — if the
 * template ever fills one of these again, it comes straight back instead of
 * being silently swallowed. The child combinator keeps this off the app's own
 * copies, which live deeper.
 *
 * This is presentation-level removal. Taking them out for good is an edit in
 * the Oxygen builder, not something to do from a stylesheet.
 *
 * !important is load-order self-defence, not specificity escalation. Oxygen's
 * universal.css ships `.wa-archive-pagination:not( .ct-section ):not(
 * .oxy-easy-posts ) { display: flex }` — three class-level components, exactly
 * the weight of the selectors below — and it is enqueued AFTER this file, so it
 * wins the tie and the pagination leftover stayed visible while the other three
 * disappeared. Out-specifying one such rule today would leave the next one to
 * find the hard way.
 * ------------------------------------------------------------------------- */
.wa-archive-main-area__sidebar > .wa-sidebar-widget:empty,
.wa-archive-main-area__content > .ct-shortcode:empty,
.wa-archive-main-area__content > .wa-archive-filters-area:empty,
.wa-archive-main-area__content > .wa-archive-pagination:empty {
	display: none !important;
}

/* 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-archive-main-area__sidebar > .wa-support-box {
	order: 1;
}

/* ---------------------------------------------------------------------------
 * Toolbar — .wa-archive-filters-area (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. */
/* Box matched to the theme's own .cat-toolbar (margin 24/16, ~47px tall, see
   pages/category.css). The theme server-renders that toolbar INSIDE this mount
   and the SPA replaces it on boot — so any difference in the outer box is a pure
   layout shift: the mount's top edge moved 24px and the grid 36px before these
   were aligned. Keep the two in step if either side changes. */
.wa-rc .wa-archive-filters-area {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	width: 100%;
	min-height: 47px;
	margin: 24px 0 16px;
}
/* Theme toolbar adopted (see harvestThemeToolbar in results-app.js): .cat-toolbar
   brings its own 24/16 margins and its own height, so this wrapper must add
   nothing. display:block, not flex, on purpose — a flex container would trap the
   toolbar's top margin inside itself, whereas server-side it collapsed out to
   .category__results. Keeping it collapsing reproduces the server geometry to the
   pixel, so adopting moves nothing. */
.wa-rc .wa-archive-filters-area.wa-rc-filters--adopted {
	display: block;
	min-height: 0;
	margin: 0;
}
.wa-rc .wa-archive-sorting-filters {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	/* No bottom margin: the gap to the grid is owned by the wrapper above, which
	   mirrors the theme toolbar's 16px. Two stacked margins would reopen the shift. */
	margin-bottom: 0;
	/* Oxygen gives this block a --wa-space-s inset, which 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. */
	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-rc-sorting-row), not the Oxygen utility one. */
.wa-rc .wa-rc-sorting-row {
	width: 100%;
	flex: 1 1 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
}

/* "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-rc .wa-widget-sidebar-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-rc .wa-widget-sidebar-trigger:hover {
	background-color: var( --wa-primary-hover );
	color: var( --wa-white );
}
.wa-rc .wa-widget-sidebar-trigger .ct-fancy-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* 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-rc .oxy-wpgb-facet.sorting--filter fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}
.wa-rc .wpgb-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-rc .wpgb-sort-facet > label {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
}
.wa-rc .wa-rc-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-rc .wa-rc-sort__select:focus {
	outline: none;
}
.wa-rc .wpgb-select-controls {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY( -50% );
	display: flex;
	align-items: center;
	pointer-events: none;
}
.wa-rc .wpgb-select-controls .wpgb-select-separator {
	display: none;
}
.wa-rc .wpgb-select-toggle {
	width: 20px;
	height: 20px;
	fill: #ccc;
	stroke: none;
}

/* Result count (production facet 1). */
.wa-rc .wpgb-result-count {
	display: inline-block;
	color: var( --wa-shade-dark );
	font-size: var( --wa-text-m );
	line-height: 1.4;
	white-space: nowrap;
}
.wa-rc .wpgb-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-rc .wp-grid-builder,
.wa-rc .wpgb-wrapper,
.wa-rc .wpgb-main,
.wa-rc .wpgb-layout,
.wa-rc .wpgb-viewport {
	position: relative;
	width: 100%;
	height: auto !important;
}
.wa-rc .wpgb-masonry {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	grid-gap: 0;
	gap: 0;
	align-items: stretch;
}
@media ( max-width: 992px ) {
	.wa-rc .wpgb-masonry {
		grid-template-columns: repeat( 2, 1fr );
	}
}

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

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

.wa-rc .wpgb-card .wpgb-card-wrapper {
	display: block;
	height: calc( 100% + 1px );
	margin: -1px;
	background: var( --wa-white );
	visibility: visible;
	opacity: 1;
	transform: none;
}
.wa-rc .wpgb-card .wpgb-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-rc .wpgb-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 background div. */
.wa-rc .wpgb-card .wpgb-card-media {
	position: relative;
	display: flex;
}
.wa-rc .wpgb-card .wpgb-card-media > svg[ data-ratio ] {
	display: block;
	width: 100%;
	height: 0;
}
.wa-rc .wpgb-card .wpgb-card-media-thumbnail {
	position: absolute;
	overflow: hidden;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.wa-rc .wpgb-card .wpgb-card-media-thumbnail > a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	pointer-events: auto;
}
.wa-rc .wpgb-card .wpgb-card-inner .wpgb-card-media-thumbnail > a > div {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 85%;
	margin-top: auto;
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: contain;
}
.wa-rc .wpgb-card .wpgb-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-rc .wpgb-card .wpgb-card-media-content > div {
	display: block;
	width: 100%;
}
.wa-rc .wpgb-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-rc .wpgb-card .wpgb-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-rc .wpgb-card .wpgb-card-body {
	position: relative;
	flex: auto;
	width: 100%;
	background: transparent;
}
.wa-rc .wpgb-card [class*='wpgb-block-'] {
	position: relative;
	display: block;
	white-space: normal !important;
}
.wa-rc .wpgb-card [class*='wpgb-block-'] > a {
	border: none;
	box-shadow: none;
	color: inherit;
	text-decoration: none;
}

/* Stock label (block-3). */
.wa-rc .wpgb-card .wpgb-block-3 {
	color: var( --wa-accent ) !important;
	font-size: calc( var( --wa-text-m ) * 0.85 ) !important;
}
.wa-rc .wpgb-card .wpgb-card-body .wpgb-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-rc .wpgb-card .wpgb-card-body .wooptima-product-label__stock_status {
	padding: 2.5px 5px;
}
.wa-rc .wpgb-card .wpgb-card-body .wooptima-product-label__stock_status {
	background: none !important;
}
.wa-rc .wpgb-card .wpgb-card-body .wooptima-product-label__stock_status.instock {
	color: var( --wa-instock );
	font-size: calc( var( --wa-text-s ) * 1.2 ) !important;
}
.wa-rc .wpgb-card .wpgb-card-body .wooptima-product-label__stock_status.outofstock,
.wa-rc .wpgb-card .wpgb-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 .wpgb-card-1 default is 700 — the site forces 400. */
.wa-rc .wpgb-card .wpgb-card-body .wpgb-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-rc .wpgb-card .wpgb-card-body .wpgb-block-1 > a {
	color: inherit;
}

/* Media labels (block-5): sale badge. */
.wa-rc .wpgb-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-rc .wpgb-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-rc .wpgb-card .wpgb-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-rc .wpgb-card .wpgb-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-rc .wpgb-card .wa-al-card-price-wrapper,
.wa-rc .wpgb-card .wa-al-card-price--regular,
.wa-rc .wpgb-card .wa-al-card-price--onsale,
.wa-rc .wpgb-card .wa-al-card-price__bottom {
	display: flex !important;
	flex-direction: column;
}
.wa-rc .wpgb-card .wa-al-card-price-wrapper {
	width: 100%;
	max-width: 150px;
}
.wa-rc .wpgb-card .wa-al-card-price__regular {
	font-weight: 700;
	font-size: var( --wa-text-xl );
	line-height: 1;
	text-align: center;
}
.wa-rc .wpgb-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-rc .wpgb-card .wa-al-card-price--regular .wa-al-card-price__regular {
	color: var( --wa-base );
	text-align: left;
}
.wa-rc .wpgb-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-rc .wpgb-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-rc .wpgb-card .wa-al-card-price--onsale .wa-al-card-price__regular,
.wa-rc .wpgb-card .wa-al-card-price--onsale .wa-al-card-price__sale {
	color: var( --wa-white );
}
.wa-rc .wpgb-card .wa-al-card-price__regular .woocommerce-Price-amount,
.wa-rc .wpgb-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-rc .wpgb-card .wooptima-button-block {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	--roundness: 0.5rem;
	--padding: 8.89px 13.5px;
	--text-size: 16px;
}
.wa-rc .wpgb-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-rc .wpgb-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-rc .wpgb-card .wooptima-button__add_to_cart > a > img {
	margin-right: var( --wa-space-xs );
}
.wa-rc .wpgb-card .wooptima-button__add_to_cart > .instock:hover {
	background: var( --wa-accent-hover );
	border-color: var( --wa-accent-hover );
	color: var( --wa-white );
}
.wa-rc .wpgb-card .wooptima-button__add_to_cart > .outofstock {
	background: #ffdce2;
	color: var( --wa-accent );
}
.wa-rc .wpgb-card .wooptima-button__add_to_cart > .outofstock:hover {
	background: #f3c8cf;
	color: var( --wa-accent );
}
.wa-rc .wpgb-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-rc .wooptima-button-block a img,
.wa-rc .wooptima-button-block a svg,
.wa-rc .wooptima-button-block a span {
	pointer-events: none;
}

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

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

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

/* ---------------------------------------------------------------------------
 * Pagination area — .wa-archive-pagination holds the (hidden) load-more facet
 * and the numbered pagination facet, exactly as on production.
 * ------------------------------------------------------------------------- */
.wa-archive-pagination {
	width: 100%;
	margin-top: var( --wa-space-l );
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	font-family: var( --font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif );
}
.wa-archive-pagination button.wpgb-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-archive-pagination button.wpgb-button:not( [disabled] ):hover,
.wa-archive-pagination button.wpgb-button:not( [disabled] ):focus {
	background-color: var( --wa-primary-hover );
}
/* Production runs numbered pagination, so the load-more facet is display:none. */
.wa-archive-pagination .wpgb-facet-7 {
	display: none;
}
.wa-archive-pagination .wpgb-pagination-facet {
	margin-left: auto;
}
.wa-archive-pagination .wpgb-pagination {
	position: relative;
	display: inline-block;
	margin: 0 -10px; /* --wpgb-pagination-horizontal-spacing: 20px */
	padding: 0;
	list-style: none;
}
.wa-archive-pagination .wpgb-pagination li.wpgb-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-archive-pagination .wpgb-page > a,
.wa-archive-pagination .wpgb-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-archive-pagination .wpgb-page > a:hover {
	color: var( --wa-primary-hover );
}
.wa-archive-pagination .wpgb-page > a[ aria-current='true' ] {
	color: var( --wa-primary );
	background-color: var( --wa-primary-ultra-light );
	font-weight: 700;
}
.wa-archive-pagination .wpgb-page > span.wpgb-dots-page {
	color: var( --wa-shade-medium );
}
.wa-archive-pagination .wpgb-pagination li:last-child a {
	font-weight: 700;
	color: var( --wa-primary );
}

@media ( max-width: 1024px ) {
	.wa-rc .wa-widget-sidebar-trigger {
		display: flex !important;
	}
	.wa-rc .wa-archive-sorting-filters {
		flex-direction: column;
		align-items: stretch;
	}
	.wa-archive-pagination {
		flex-direction: column;
	}
}
@media ( max-width: 768px ) {
	.wa-rc .wpgb-card .wpgb-card-content {
		padding-left: var( --wa-space-xs );
		padding-right: var( --wa-space-xs );
		padding-bottom: var( --wa-space-s );
	}
	.wa-rc .wpgb-card .wa-al-card-price__regular {
		font-size: calc( var( --wa-text-xl ) * 0.8 );
	}
	.wa-rc .wpgb-card .wooptima-button__add_to_cart {
		font-size: 0 !important;
	}
	.wa-rc .wpgb-card .wooptima-button__add_to_cart > a > span {
		display: none !important;
	}
	.wa-rc .wpgb-card .wooptima-button__add_to_cart > a > img {
		margin-right: 0 !important;
		width: 22px !important;
		height: 22px !important;
	}
	.wa-archive-pagination .wpgb-page > a,
	.wa-archive-pagination .wpgb-page > span {
		padding: 6px 10px;
	}
	.wa-archive-pagination .wpgb-pagination li.wpgb-page {
		margin: 0 2px;
	}
}

/* ---------------------------------------------------------------------------
 * Facet sidebar — rendered into cfg.sidebarSelector (.wa-isf-facets) inside the
 * template's .wa-archive-main-area__sidebar column, i.e. OUTSIDE .wa-rc, so the
 * token block at the top of this file lists it explicitly.
 *
 * The structural WPGB facet CSS (.wpgb-checkbox-control, .wpgb-range-slider,
 * .wpgb-toggle-hidden, …) ships in assets/wpgb/wpgb-style.css, which is enqueued
 * alongside this file. 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-isf-facets {
	font-family: var( --font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif );
	color: var( --wa-base );
}

/* The facet list is dropped into the theme's own sidebar card (.card.side-filters
   — white, bordered, already padded, with its own "Filtre" heading), so this
   wrapper must not draw a second box inside it. Flush and transparent. */
.wa-isf-facets .wa-sidebar-widget {
	margin-bottom: 0;
	padding: 0;
	border-radius: 0;
	background-color: transparent;
}

/* Facet group titles. Sized off the theme's own sidebar scale rather than the
   ported --text-m (16px): this column sits next to the category tree, whose
   widget titles are 13px/700 (.side-filters .widgettitle in the theme's
   category.css). At 16px the filters read a whole step larger than the
   categories beside them. */
.wa-isf-facets .wpgb-facet .wpgb-facet-title {
	margin: var( --wa-space-m ) 0 var( --wa-space-xs );
	padding: 0;
	color: var( --wa-base );
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
}
.wa-isf-facets .oxy-wpgb-facet:first-child .wpgb-facet .wpgb-facet-title {
	margin-top: 0;
}
/* .oxy-wpgb-facet drops WPGB's 40px fieldset gap; the title margin is the gap. */
.wa-isf-facets .oxy-wpgb-facet .wpgb-facet > fieldset:last-child {
	margin-bottom: 0;
}
.wa-isf-facets .wpgb-facet fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
}
.wa-isf-facets .wpgb-facet fieldset legend.wpgb-sr-only {
	height: 1px;
	width: 1px;
}
.wa-isf-facets .wpgb-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;
}

/* --- 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-fc--round) also get a circular control. */
.wa-isf-facets .wpgb-facet .wpgb-checkbox-facet .wpgb-checkbox .wpgb-checkbox-control {
	border-color: var( --wa-primary );
}
.wa-isf-facets .wpgb-facet .wpgb-checkbox-facet .wpgb-checkbox[ aria-pressed='true' ] .wpgb-checkbox-control {
	background-color: var( --wa-primary );
	border-color: var( --wa-primary );
}
.wa-isf-facets .wpgb-facet .wa-fc--round .wpgb-checkbox-control,
.wa-isf-facets .wa-fc--round .wpgb-checkbox-facet .wpgb-checkbox-control {
	border-radius: 50%;
}
.wa-isf-facets .wpgb-facet .wpgb-checkbox:focus .wpgb-checkbox-control,
.wa-isf-facets .wpgb-facet .wpgb-toggle-hidden:focus,
.wa-isf-facets .wpgb-facet .wpgb-range-clear:focus,
.wa-isf-facets .wpgb-facet .wpgb-range-thumb:focus {
	outline-color: var( --wa-primary-light ) !important;
}
/* WPGB's sidebar convention: label left, count right. Type matches the category
   tree rows in the same column (14px/500/21px, .cat-tree .row in the theme's
   header.css) instead of WPGB's 16px/normal base. */
.wa-isf-facets .wpgb-facet .wpgb-checkbox-label {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	color: var( --wa-base );
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
}
/* The count rides inside the label, so it would otherwise inherit its 500 —
   keep it at the lighter weight so it stays secondary to the option name. */
.wa-isf-facets .wa-fc-opt__count {
	flex: 0 0 auto;
	color: var( --wa-shade-medium );
	font-size: var( --wa-text-s );
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}
/* "+ Ďalších N" / "- Menej". The WPGB base paints this as a grey pill; on the
   theme's white sidebar card it reads better as the same quiet tinted button
   the toolbar's sort tabs use. Three classes deep on purpose: the base rule is
   `.wpgb-facet .wpgb-toggle-hidden` and wpgb-style.css is enqueued after this
   file, so a two-class selector would tie and lose. */
.wa-isf-facets .wpgb-facet .wpgb-toggle-hidden {
	margin: 10px 0 0;
	padding: 7px 12px;
	background: transparent;
	border-radius: var( --wa-radius-xxl );
	color: var( --wa-primary );
	font-size: 13px;
	font-weight: 600;
}
.wa-isf-facets .wpgb-facet .wpgb-toggle-hidden:hover {
	background: var( --wa-primary-ultra-light );
	color: var( --wa-primary-hover );
}
/* --- Range (price) facet ------------------------------------------------- */
.wa-isf-facets .wpgb-facet .wpgb-range-facet .wpgb-range-slider .wpgb-range-progress {
	background-color: var( --wa-primary );
}
.wa-isf-facets .wpgb-facet .wpgb-range-facet .wpgb-range-slider .wpgb-range-thumb {
	background-color: var( --wa-primary );
	border-color: var( --wa-primary );
	border-width: 3px;
}
.wa-isf-facets .wpgb-facet .wpgb-range-facet .wpgb-range-values {
	color: var( --wa-base );
	font-size: 14px;
}
/* The state inputs are hidden (WPGB hides them the same way). */
.wa-isf-facets .wpgb-facet .wpgb-range-facet input {
	display: none;
}

/* --- Clear all ----------------------------------------------------------- */
/* WPGB's reset facet, recoloured off its default red onto the brand. The plain
   white fill only read as a button against the tinted box this widget used to
   draw; on the theme's white card it needs the tint and border to stay visible. */
.wa-isf-facets .wa-fc-clear.wpgb-reset {
	width: 100%;
	margin: var( --wa-space-m ) 0 0;
	padding: 10px 16px;
	background-color: var( --wa-primary-ultra-light );
	border: 1px solid var( --wa-primary-light );
	border-radius: var( --wa-radius-s );
	color: var( --wa-primary );
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .12s, border-color .12s, color .12s;
}
.wa-isf-facets .wa-fc-clear.wpgb-reset:hover {
	background-color: var( --wa-primary );
	border-color: var( --wa-primary );
	color: var( --wa-white );
}

/* --- Mobile off-canvas drawer (193-header-compiled.css + inline #20) ------ */
/* Production column split: sidebar 22% (≈289px), content takes the rest — the
   search template's own sidebar is narrower, which made cards ~20px too wide. */
@media screen and ( min-width: 1025px ) {
	body .wa-archive-main-area__sidebar {
		width: 22%;
		min-width: 22%;
	}
}

/* The "FILTROVAŤ PRODUKTY" trigger in the toolbar toggles .sidebar-opened on the
   sidebar column; below 1024px that column is a fixed slide-in panel. */
@media screen and ( max-width: 1024px ) {
	body .wa-archive-main-area__sidebar,
	body.oxygen-body .wa-archive-main-area__sidebar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000002;
		width: 80vw !important;
		min-width: 250px;
		height: 100vh;
		padding: var( --wa-space-m, 22px );
		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: all 0.4s cubic-bezier( .77, 0, .175, 1 );
	}
	body .wa-archive-main-area__sidebar.sidebar-opened,
	body.oxygen-body .wa-archive-main-area__sidebar.sidebar-opened {
		transform: translate( 0% );
	}
	body .wa-archive-main-area__sidebar .wa-sidebar-categories {
		display: none;
	}
}

/* The SPA renders its own count + sort in the toolbar; hide the theme toolbar's
   duplicate server-side count + ordering (this stylesheet only loads with SPA on). */
.category-toolbar__count,
.category-toolbar__sort {
	display: none;
}

/* With count + sort gone, the "Upraviť filter" button is the only toolbar item —
   make it span the full toolbar width. */
.category-toolbar__filter-toggle {
	width: 100%;
	justify-content: center;
}

/* 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-rc-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 var( --wa-space-xs );
}
.wa-rc-active[ hidden ] {
	display: none;
}
.wa-rc-active__label {
	color: var( --wa-shade-dark );
	font-size: calc( var( --wa-text-m ) * 0.875 );
	font-weight: 700;
}
.wa-rc-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-rc-chip:hover {
	border-color: var( --wa-primary );
	background: var( --wa-primary-light );
	color: var( --wa-primary-hover );
}
.wa-rc-chip svg {
	flex: 0 0 auto;
	opacity: .7;
}
.wa-rc-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-rc-rewrite {
	font-size: 14px;
	line-height: 1.5;
	color: var( --rc-muted );
	margin: 0 0 12px;
}