/**
 * 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 */
	--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;
	--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%;
}

/* ---------------------------------------------------------------------------
 * 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. */
.wa-rc .wa-archive-filters-area {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}
.wa-rc .wa-archive-sorting-filters {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var( --wa-space-xs );
	/* 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: 'Mukta', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 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: 'Mukta', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color: var( --wa-base );
}

/* universal.css .wa-sidebar-widget — the light-purple facet box. */
.wa-isf-facets .wa-sidebar-widget {
	margin-bottom: var( --wa-space-m );
	padding: var( --wa-space-m );
	border-radius: var( --wa-radius-l );
	background-color: var( --wa-secondary );
}

/* 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-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: var( --wa-text-m );
	font-weight: 700;
	line-height: 1.2;
}
.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. */
.wa-isf-facets .wpgb-facet .wpgb-checkbox-label {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	color: var( --wa-base );
}
.wa-isf-facets .wa-fc-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-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: var( --wa-text-m );
}
/* 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. */
.wa-isf-facets .wa-fc-clear.wpgb-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-isf-facets .wa-fc-clear.wpgb-reset:hover {
	background-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% );
	}
	/* The widget box has no purpose inside the white drawer. */
	.wa-isf-facets .wa-sidebar-widget {
		margin-bottom: 0;
		padding: 0;
		background: none;
	}
	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;
}
