/**
 * wa-instant-search inside the catalog template (#cat-results, #cat-filter).
 *
 * The plugin renders the toolbar, grid, pager and facets client-side; this file
 * restyles that markup to the catalog design without forking the plugin. The
 * ids out-rank the plugin's .wa-is-rc / .wa-is-facets selectors; !important is
 * used only where the plugin or the legacy scorg CSS already uses it.
 * The facets are a drawer below 861px and inline above it, as in the mockup;
 * the plugin's own drawer breakpoint (1024px, drawer.js) is overridden for
 * 861-1024px in the min-width: 861px block at the end.
 */

#cat-results .wa-is-rc,
#cat-results .wa-is-pagination-area,
#cat-filter .wa-is-facets {
	font-family: var(--nd-font);
	color: var(--nd-c-ink);
}

/* Empty categories render no mount; the plugin then appends its own hosts to
   <body> (resolveHost in results-app.js). Nothing to list there, so hide them. */
body > .wa-is-results,
body > .wa-is-facets {
	display: none;
}

/* Category description is rendered by .cat-seo below the grid. */
#cat-results .wa-is-desc {
	display: none;
}

/* ---- Toolbar: filter button, sort, count ---- */
#cat-results .wa-is-toolbar-row {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nd-sp-10);
	margin: 0 0 var(--nd-sp-12);
	padding: 0 0 var(--nd-sp-4);
}

#cat-results .wa-is-filter-trigger {
	display: inline-flex !important;
	align-items: center;
	gap: var(--nd-sp-7);
	width: auto;
	margin: 0;
	padding: var(--nd-sp-7) var(--nd-sp-14);
	border: var(--nd-border-strong) solid var(--nd-c-brand);
	border-radius: var(--nd-radius-pill);
	background: var(--nd-c-surface);
	font-size: var(--nd-fs-14);
	font-weight: var(--nd-fw-bold);
	line-height: var(--nd-lh-snug);
	color: var(--nd-c-brand);
	text-transform: none;
}

#cat-results .wa-is-filter-trigger:hover {
	background: var(--nd-c-brand-tint);
	color: var(--nd-c-brand);
}

#cat-results .wa-is-filter-trigger .wa-is-icon svg {
	width: var(--nd-icon-xs);
	height: var(--nd-icon-xs);
}

#cat-results .wa-is-sorting-row {
	flex-wrap: wrap;
	gap: var(--nd-sp-10);
	width: 100%;
}

#cat-results .wa-is-sort-cell {
	flex: 1 1 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

#cat-results .wa-is-sort-facet > label {
	gap: var(--nd-sp-7);
}

/* The plugin's visually hidden "Zoradiť" doubles as the design's visible label. */
#cat-results .wa-is-sort-facet > label > .wa-is-sr-only {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	font-size: var(--nd-fs-14);
	color: var(--nd-c-muted);
}

#cat-results .wa-is-sort__select {
	flex: 1 1 auto;
	min-height: var(--nd-select-h);
	padding: var(--nd-sp-7) var(--nd-sp-30) var(--nd-sp-7) var(--nd-sp-11);
	border: var(--nd-border-strong) solid var(--nd-c-brand-tint-2);
	border-radius: var(--nd-radius-m);
	background: var(--nd-c-surface);
	font-size: var(--nd-fs-14);
	line-height: var(--nd-lh-snug);
	color: var(--nd-c-head);
}

#cat-results .wa-is-sort__select:focus {
	border-color: var(--nd-c-brand);
}

#cat-results .wa-is-select-controls {
	right: var(--nd-sp-10);
}

#cat-results .wa-is-select-toggle {
	width: var(--nd-icon-xs);
	height: var(--nd-icon-xs);
	fill: var(--nd-c-brand);
}

#cat-results .wa-is-count-cell {
	justify-content: flex-start;
}

#cat-results .wa-is-result-count {
	font-size: var(--nd-fs-14);
	color: var(--nd-c-ink);
}

#cat-results .wa-is-result-count::before {
	content: none;
}

/* catalog.js renders the design's "<b>N</b> nájdených produktov" next to it. */
#cat-results .wa-is-count-cell:has(.cat-count) .wa-is-result-count {
	display: none;
}

/* ---- Active filters ---- */
#cat-results .wa-is-active {
	gap: var(--nd-sp-7);
	margin: 0 0 var(--nd-sp-13);
}

#cat-results .wa-is-active__label {
	font-size: var(--nd-fs-13);
	color: var(--nd-c-head);
}

#cat-results .wa-is-chip {
	gap: var(--nd-sp-6);
	padding: var(--nd-sp-5) var(--nd-sp-11);
	border: 1px solid var(--nd-c-brand-tint-2);
	border-radius: var(--nd-radius-pill);
	background: var(--nd-c-brand-tint);
	font-size: var(--nd-fs-13);
	color: var(--nd-c-head);
}

#cat-results .wa-is-chip:hover {
	border-color: var(--nd-c-brand);
	background: var(--nd-c-brand-tint);
	color: var(--nd-c-brand);
}

#cat-results .wa-is-active__clear {
	padding: 0;
	font-size: var(--nd-fs-13);
	color: var(--nd-c-brand);
	text-underline-offset: 2px;
}

/* ---- Grid ---- */
#cat-results .wa-is-masonry {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	overflow: hidden;
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius);
	background: var(--nd-c-surface);
}

#cat-results .wp-grid-builder .wa-is-card {
	border-right: 1px solid var(--nd-c-line);
	border-bottom: 1px solid var(--nd-c-line);
	background: var(--nd-c-surface);
	font-size: var(--nd-fs-body);
}

#cat-results .wp-grid-builder .wa-is-card:nth-child(2n) {
	border-right: 0;
}

#cat-results .wa-is-card:hover {
	box-shadow: none;
}

/* The plugin paints the wrapper and inner white at the card's full border-box height, which hid the
 * row borders; the card itself carries the background so its borders stay visible. */
#cat-results .wa-is-card .wa-is-card-wrapper {
	height: 100%;
	margin: 0 !important;
	background: transparent;
}

/* "Karta D" like the homepage card (product-card.css): left-aligned; --card-pad-x
 * lets the ribbons (product-card-parts.css) reach the card's left edge. */
#cat-results .wa-is-card .wa-is-card-inner {
	--card-pad-x: var(--nd-sp-10);

	gap: var(--nd-sp-7);
	padding: var(--nd-sp-12) var(--card-pad-x);
	border: 0 !important;
	background: transparent;
	text-align: left;
}

/* Media: fixed-height contained image instead of the square ratio box. */
#cat-results .wa-is-card .wa-is-card-media {
	display: block;
	height: var(--nd-pcard-img-h-sm);
}

#cat-results .wa-is-card .wa-is-card-media > svg[data-ratio] {
	display: none;
}

#cat-results .wa-is-card .wa-is-card-inner .wa-is-card-media-thumbnail > a > img {
	height: 100%;
	object-position: center;
}

/* The discount is shown as the ribbon and in the price box (when the card meta loaded). */
#cat-results .wa-is-card .wa-is-card-media:has(.card-ribbons) .wa-is-card-media-content-top .wa-is-block-5 {
	display: none;
}

#cat-results .wa-is-card .wa-is-card-content {
	gap: var(--nd-sp-7);
	padding: 0 !important;
}

#cat-results .wa-is-card .wa-is-card-body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--nd-sp-7);
}

/* The benefit list (catalog.js) says the stock instead of the plugin's label. */
#cat-results .wa-is-card .wa-is-card-body:has(.card-usp) .wa-is-block-3 {
	display: none;
}

#cat-results .wa-is-card .wa-is-card-body .wa-is-block-3 .wooptima-product-labels-block {
	gap: var(--nd-sp-4);
	min-height: 0;
}

#cat-results .wa-is-card .wa-is-card-body .wooptima-product-label__stock_status {
	padding: 0;
	font-size: var(--nd-fs-14) !important;
	font-weight: var(--nd-fw-regular);
	line-height: var(--nd-lh-snug);
	color: var(--nd-c-ok);
}

#cat-results .wa-is-card .wa-is-card-body .wooptima-product-label__stock_status.outofstock,
#cat-results .wa-is-card .wa-is-card-body .wooptima-product-label__stock_status.onbackorder {
	color: var(--nd-c-out);
}

#cat-results .wa-is-card .wa-is-card-body .wa-is-block-1 {
	width: 100%;
	min-height: calc(2em * var(--nd-lh-name));
	margin: 0;
	font-size: var(--nd-fs-15) !important;
	font-weight: var(--nd-fw-medium);
	line-height: var(--nd-lh-name) !important;
	color: var(--nd-c-head);
}

#cat-results .wa-is-card .wa-is-card-body .wa-is-block-1 > a {
	display: -webkit-box;
	overflow: hidden;
	font-weight: inherit;
	color: inherit;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

#cat-results .wa-is-card .wa-is-card-body .wa-is-block-1 > a:hover {
	color: var(--nd-c-brand);
}

/* Footer: price box above a full-width cart button. */
#cat-results .wa-is-card .wa-is-card-footer {
	flex-direction: column;
	align-items: stretch;
	gap: var(--nd-sp-7);
	margin-top: auto;
}

#cat-results .wa-is-card .wa-al-card-price-wrapper {
	align-items: center;
	max-width: none;
}

#cat-results .wa-is-card .wa-al-card-price-wrapper:has(.card-price) {
	align-items: stretch;
}

#cat-results .wa-is-card .wa-al-card-price-wrapper > .wooptima-product-labels-block:has(> .card-price) {
	display: block;
	width: 100%;
}

/* The plugin keeps every footer span on one line; the coupon line may wrap. */
#cat-results .wa-is-card .wa-is-card-footer .card-price,
#cat-results .wa-is-card .wa-is-card-footer .card-price__row,
#cat-results .wa-is-card .wa-is-card-footer .card-price__code {
	white-space: normal;
}

#cat-results .wa-is-card .wa-al-card-price--regular,
#cat-results .wa-is-card .wa-al-card-price--onsale,
#cat-results .wa-is-card .wa-al-card-price__bottom {
	align-items: center;
	gap: var(--nd-sp-2);
}

#cat-results .wa-is-card .wa-al-card-price--onsale .wa-al-card-price__top {
	padding: var(--nd-sp-2) var(--nd-sp-7);
	border-radius: var(--nd-radius-xs);
	background: var(--nd-c-sale);
	font-size: var(--nd-fs-13);
	line-height: var(--nd-lh-body);
	color: var(--nd-c-on-brand) !important;
}

#cat-results .wa-is-card .wa-al-card-price--onsale .wa-al-card-price__bottom {
	padding: 0;
	border-radius: 0;
	background: none;
}

#cat-results .wa-is-card .wa-al-card-price__regular,
#cat-results .wa-is-card .wa-al-card-price--regular .wa-al-card-price__regular,
#cat-results .wa-is-card .wa-al-card-price--onsale .wa-al-card-price__regular {
	font-size: var(--nd-fs-price-sm);
	font-weight: var(--nd-fw-bold);
	line-height: var(--nd-lh-body);
	color: var(--nd-c-ink);
	text-align: center;
	white-space: nowrap;
}

#cat-results .wa-is-card .wa-al-card-price__sale,
#cat-results .wa-is-card .wa-al-card-price--onsale .wa-al-card-price__sale {
	font-size: var(--nd-fs-12);
	line-height: var(--nd-lh-body);
	color: var(--nd-c-muted);
}

#cat-results .wa-is-card .wooptima-button-block {
	display: block;
	width: 100%;
	font-size: var(--nd-fs-16) !important;
}

#cat-results .wa-is-card .wooptima-button__add_to_cart > a,
#cat-results .wa-is-card .wooptima-button__add_to_cart > .instock,
#cat-results .wa-is-card .wooptima-button__add_to_cart > .outofstock {
	justify-content: center;
	width: 100%;
	height: var(--nd-btn-cart-h);
	max-height: none;
	padding: 0 var(--nd-sp-16) !important;
	border-radius: var(--nd-radius-btn);
	font-size: var(--nd-fs-16);
	font-weight: var(--nd-fw-bold);
}

#cat-results .wa-is-card .wooptima-button__add_to_cart > .instock {
	background: var(--nd-c-cta);
	color: var(--nd-c-on-cta);
}

#cat-results .wa-is-card .wooptima-button__add_to_cart > .instock:hover {
	background: var(--nd-c-cta-hover);
	color: var(--nd-c-on-cta);
}

/* "Zobraziť": outlined brand button, as on the homepage card. */
#cat-results .wa-is-card .wa-is-card-footer .wa-is-block-7 .wooptima-button__add_to_cart > a.outofstock {
	background: var(--nd-c-surface);
	box-shadow: inset 0 0 0 var(--nd-sp-2) var(--nd-c-brand);
	color: var(--nd-c-brand);
}

#cat-results .wa-is-card .wa-is-card-footer .wa-is-block-7 .wooptima-button__add_to_cart > a.outofstock:hover {
	background: var(--nd-c-brand-tint);
	color: var(--nd-c-brand);
}

#cat-results .wa-is-card .wooptima-button__add_to_cart > a > img {
	display: none;
}

#cat-results .wa-is-card .wooptima-button__add_to_cart > a > span {
	display: inline !important;
}

/* ---- Card extras added by catalog.js: the badge stack on the image (the
   ribbons, benefit list and price box are in product-card-parts.css). ---- */
#cat-results .wa-is-card .wa-is-card-media {
	position: relative;
}

/* Badge stack from the product gallery (Gallery::badges()), scaled to the
   card: energy class arrow + A↑G scale, Home Credit rate disc, no charger. */
#cat-results .wa-is-card .cat-card-badges {
	position: absolute;
	top: calc(var(--nd-sp-4) * -1);
	right: calc(var(--nd-sp-4) * -1);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--nd-sp-5);
	pointer-events: none;
}

#cat-results .wa-is-card .cat-card-energy {
	display: flex;
	align-items: stretch;
	filter: drop-shadow(var(--nd-shadow-badge));
}

#cat-results .wa-is-card .cat-card-energy__arrow {
	display: grid;
	place-items: center;
	min-width: var(--nd-sp-26);
	padding: var(--nd-sp-2) var(--nd-sp-7) var(--nd-sp-2) var(--nd-sp-5);
	background: var(--nd-c-energy-a);
	font-size: var(--nd-fs-12);
	font-weight: var(--nd-fw-bold);
	line-height: 1;
	color: var(--nd-c-on-brand);
	clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%);
}

#cat-results .wa-is-card .cat-card-energy--b .cat-card-energy__arrow { background: var(--nd-c-energy-b); }
#cat-results .wa-is-card .cat-card-energy--c .cat-card-energy__arrow { background: var(--nd-c-energy-c); }
#cat-results .wa-is-card .cat-card-energy--d .cat-card-energy__arrow { background: var(--nd-c-energy-d); }
#cat-results .wa-is-card .cat-card-energy--e .cat-card-energy__arrow { background: var(--nd-c-energy-e); }
#cat-results .wa-is-card .cat-card-energy--f .cat-card-energy__arrow { background: var(--nd-c-energy-f); }
#cat-results .wa-is-card .cat-card-energy--g .cat-card-energy__arrow { background: var(--nd-c-energy-g); }

#cat-results .wa-is-card .cat-card-energy__scale {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 var(--nd-sp-3);
	border: var(--nd-border-strong) solid var(--nd-c-head);
	background: var(--nd-c-surface);
	font-size: var(--nd-fs-11);
	font-weight: var(--nd-fw-bold);
	line-height: var(--nd-lh-badge);
	color: var(--nd-c-head);
	white-space: nowrap;
}

#cat-results .wa-is-card .cat-card-hc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--nd-sp-44);
	height: var(--nd-sp-44);
	border-radius: var(--nd-radius-round);
	background: var(--nd-c-rating);
	box-shadow: var(--nd-shadow-badge);
	font-size: var(--nd-fs-11);
	font-weight: var(--nd-fw-bold);
	line-height: var(--nd-lh-badge);
	color: var(--nd-c-head);
	white-space: nowrap;
}

#cat-results .wa-is-card .cat-card-hc__rate {
	font-size: var(--nd-fs-10);
	letter-spacing: var(--nd-ls-tight);
}

#cat-results .wa-is-card .cat-card-charger {
	display: grid;
	place-items: center;
	width: var(--nd-sp-30);
	height: var(--nd-sp-36);
	border: var(--nd-sp-2) solid var(--nd-c-head);
	border-radius: var(--nd-radius-s);
	background: var(--nd-c-surface);
	box-shadow: var(--nd-shadow-badge);
	color: var(--nd-c-head);
}

/* ---- Pager: info | (load more) | pages ---- */
#cat-results .wa-is-pagination-area {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: var(--nd-sp-14);
	margin: 0;
	padding: var(--nd-sp-26) 0 var(--nd-sp-6);
	text-align: center;
}

/* The plugin's load-more facet has no handler on archives; it stays hidden. */
#cat-results .wa-is-pagination-area > .oxy-wa-is-facet:has(> .wa-is-facet-7) {
	display: none;
}

#cat-results .wa-is-pagination-area .wa-is-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--nd-sp-8);
	margin: 0;
}

#cat-results .wa-is-pagination-area .wa-is-pagination li.wa-is-page {
	margin: 0;
	line-height: var(--nd-lh-tight);
}

#cat-results .wa-is-pagination-area .wa-is-page > a,
#cat-results .wa-is-pagination-area .wa-is-page > span {
	display: grid;
	place-items: center;
	min-width: var(--nd-pager-item);
	height: var(--nd-pager-item);
	padding: 0 var(--nd-sp-10);
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius-m);
	background: var(--nd-c-surface);
	font-size: var(--nd-fs-15);
	font-weight: var(--nd-fw-regular);
	line-height: var(--nd-lh-tight);
	color: var(--nd-c-head);
}

#cat-results .wa-is-pagination-area .wa-is-page > a:hover {
	border-color: var(--nd-c-brand);
	color: var(--nd-c-brand);
}

#cat-results .wa-is-pagination-area .wa-is-page > a[aria-current='true'] {
	border-color: var(--nd-c-brand);
	background: var(--nd-c-brand);
	font-weight: var(--nd-fw-regular);
	color: var(--nd-c-on-brand);
}

#cat-results .wa-is-pagination-area .wa-is-page > span.wa-is-dots-page {
	min-width: var(--nd-sp-26);
	padding: 0;
	border-color: transparent;
	background: none;
	color: var(--nd-c-muted);
}

/* "Ďalšia strana" (class added by catalog.js; the plugin gives it no own hook). */
#cat-results .wa-is-pagination-area .wa-is-page > a.cat-pager-next {
	border-color: transparent;
	background: none;
	font-weight: var(--nd-fw-regular);
	color: var(--nd-c-head);
}

#cat-results .wa-is-pagination-area .wa-is-page > a.cat-pager-next:hover {
	color: var(--nd-c-brand);
}

/* ---- Facets: drawer below 861px, sidebar box above ---- */
#cat-filter .wa-is-facets {
	width: var(--nd-drawer-w);
	min-width: 0;
	padding: 0;
	background: var(--nd-c-surface);
	box-shadow: var(--nd-shadow-lg);
}

#cat-filter .wa-is-facets::backdrop {
	background: var(--nd-c-backdrop);
}

#cat-filter .wa-is-facets .wa-sidebar-widget {
	margin: 0;
	padding: 0;
	background: none;
}

#cat-filter .wa-is-facets .wa-is-facet .wa-is-facet-title,
#cat-filter .wa-is-facets .oxy-wa-is-facet:first-child .wa-is-facet .wa-is-facet-title {
	margin: 0 !important;
	padding: var(--nd-sp-12) var(--nd-sp-14);
	font-size: var(--nd-fs-14);
	font-weight: var(--nd-fw-bold);
	line-height: var(--nd-lh-snug);
	color: var(--nd-c-head);
}

#cat-filter .wa-is-facets .wa-is-facet fieldset {
	padding: 0 var(--nd-sp-14) var(--nd-sp-13);
}

/* Checkbox options */
#cat-filter .wa-is-facets .wa-is-facet .wa-is-hierarchical-list li {
	margin: 0;
}

#cat-filter .wa-is-facets .wa-is-facet .wa-is-hierarchical-list li + li {
	margin-top: var(--nd-sp-2);
}

#cat-filter .wa-is-facets .wa-is-facet .wa-is-checkbox-facet .wa-is-checkbox {
	align-items: center;
	gap: var(--nd-sp-9);
	padding: var(--nd-sp-5) 0;
}

#cat-filter .wa-is-facets .wa-is-facet .wa-is-checkbox-facet .wa-is-checkbox .wa-is-checkbox-control {
	width: var(--nd-icon-s);
	height: var(--nd-icon-s);
	border: var(--nd-border-strong) solid var(--nd-c-control-border);
	border-radius: var(--nd-radius-xs);
	background: var(--nd-c-surface);
}

#cat-filter .wa-is-facets .wa-is-facet .wa-is--round .wa-is-checkbox-control,
#cat-filter .wa-is-facets .wa-is--round .wa-is-checkbox-facet .wa-is-checkbox .wa-is-checkbox-control {
	border-radius: var(--nd-radius-round);
}

#cat-filter .wa-is-facets .wa-is-facet .wa-is-checkbox-facet .wa-is-checkbox[aria-pressed='true'] .wa-is-checkbox-control,
#cat-filter .wa-is-facets .wa-is-facet .wa-is-checkbox-facet .wa-is-checkbox[aria-pressed='mixed'] .wa-is-checkbox-control {
	border-color: var(--nd-c-brand);
	background: var(--nd-c-brand);
}

#cat-filter .wa-is-facets .wa-is-facet .wa-is-checkbox-facet .wa-is-checkbox[aria-pressed='true'] .wa-is-checkbox-control::after,
#cat-filter .wa-is-facets .wa-is-facet .wa-is-checkbox-facet .wa-is-checkbox .wa-is-checkbox-control::before {
	border-color: var(--nd-c-on-brand);
}

#cat-filter .wa-is-facets .wa-is-facet .wa-is-checkbox-label {
	align-items: center;
	gap: var(--nd-sp-8);
	min-width: 0;
	padding: 0;
	font-size: var(--nd-fs-14);
	line-height: var(--nd-lh-body);
	color: var(--nd-c-ink);
	overflow-wrap: anywhere;
}

#cat-filter .wa-is-facets .wa-is-facet .wa-is-checkbox:hover .wa-is-checkbox-label {
	color: var(--nd-c-brand);
}

#cat-filter .wa-is-facets .wa-is-opt__count {
	font-size: var(--nd-fs-12);
	color: var(--nd-c-muted);
}

#cat-filter .wa-is-facets .wa-is-facet [class^='wa-is'][role='button'][tabindex='-1'] {
	opacity: var(--nd-opacity-disabled);
}

/* "→ ďalších N" */
#cat-filter .wa-is-facets .wa-is-facet .wa-is-toggle-hidden {
	margin: var(--nd-sp-6) 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: var(--nd-fs-13);
	font-weight: var(--nd-fw-semibold);
	color: var(--nd-c-brand);
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 2px;
}

#cat-filter .wa-is-facets .wa-is-facet .wa-is-toggle-hidden:hover {
	background: none;
	color: var(--nd-c-brand-hover);
}

/* Price range */
#cat-filter .wa-is-facets .wa-is-facet .wa-is-range-facet {
	gap: var(--nd-sp-8);
}

#cat-filter .wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-slider {
	height: var(--nd-track-h);
	margin: var(--nd-sp-12) var(--nd-sp-2) var(--nd-sp-8);
	border-radius: var(--nd-radius-track);
	background: var(--nd-c-brand-tint-2);
}

#cat-filter .wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-slider .wa-is-range-progress {
	border-radius: var(--nd-radius-track);
	background: var(--nd-c-brand);
}

#cat-filter .wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-slider .wa-is-range-thumb {
	width: var(--nd-icon-s);
	height: var(--nd-icon-s);
	border: var(--nd-border-strong) solid var(--nd-c-brand);
	border-radius: var(--nd-radius-round);
	background: var(--nd-c-surface);
	box-shadow: var(--nd-shadow);
}

#cat-filter .wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-values {
	padding: 0;
	font-size: var(--nd-fs-14);
	line-height: var(--nd-lh-snug);
	color: var(--nd-c-head);
}

#cat-filter .wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-clear,
#cat-filter .wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-clear:hover:not([disabled]) {
	padding: 0;
	background: none;
	font-size: var(--nd-fs-13);
	font-weight: var(--nd-fw-regular);
	color: var(--nd-c-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

#cat-filter .wa-is-facets .wa-is-facet .wa-is-range-facet .wa-is-range-clear[disabled] {
	opacity: var(--nd-opacity-disabled);
}

/* Collapsible groups: catalog.js makes the title a toggle (role=button) and sets .is-collapsed. */
#cat-filter .wa-is-facets .wa-is-facet > .wa-is-facet-title[role='button'] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nd-sp-8);
	cursor: pointer;
	user-select: none;
}

#cat-filter .wa-is-facets .wa-is-facet > .wa-is-facet-title[role='button']:focus-visible {
	outline: 2px solid var(--nd-c-brand);
	outline-offset: -2px;
}

#cat-filter .wa-is-facets .wa-is-facet .cat-facet-chevron {
	flex: 0 0 auto;
	color: var(--nd-c-brand);
	transform: rotate(180deg);
	transition: transform 0.18s;
}

#cat-filter .wa-is-facets .wa-is-facet.is-collapsed .cat-facet-chevron {
	transform: none;
}

#cat-filter .wa-is-facets .wa-is-facet.is-collapsed > fieldset {
	display: none;
}

/* Price "Od / Do" inputs and quick ranges (catalog.js, under the plugin slider).
   The inputs show the values, so the slider's own value line is dropped. */
#cat-filter .wa-is-facets .wa-is-facet .wa-is-range-facet:has(+ .cat-price) .wa-is-range-values {
	display: none;
}

#cat-filter .cat-price__inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--nd-sp-8);
	margin-top: var(--nd-sp-4);
}

#cat-filter .cat-price__field {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-5);
	min-width: 0;
	padding: var(--nd-sp-6) var(--nd-sp-8);
	border: var(--nd-border-strong) solid var(--nd-c-brand-tint-2);
	border-radius: var(--nd-radius-s);
	background: var(--nd-c-surface);
	font-size: var(--nd-fs-13);
	color: var(--nd-c-muted);
	cursor: text;
}

#cat-filter .cat-price__field:focus-within {
	border-color: var(--nd-c-brand);
}

#cat-filter .cat-price__input {
	width: 100%;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	background: none;
	box-shadow: none;
	font: inherit;
	font-size: var(--nd-fs-14);
	color: var(--nd-c-head);
	appearance: textfield;
}

#cat-filter .cat-price__input::-webkit-outer-spin-button,
#cat-filter .cat-price__input::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
}

#cat-filter .cat-price__quick {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nd-sp-6);
	margin-top: var(--nd-sp-9);
}

#cat-filter .cat-price__q {
	padding: var(--nd-sp-4) var(--nd-sp-10);
	border: var(--nd-border-strong) solid var(--nd-c-brand-tint-2);
	border-radius: var(--nd-radius-pill);
	background: var(--nd-c-surface);
	font: inherit;
	font-size: var(--nd-fs-12-5);
	font-weight: var(--nd-fw-regular);
	line-height: var(--nd-lh-body);
	color: var(--nd-c-ink);
	cursor: pointer;
}

#cat-filter .cat-price__q:hover {
	border-color: var(--nd-c-brand);
	background: var(--nd-c-surface);
	color: var(--nd-c-ink);
}

#cat-filter .cat-price__q[aria-pressed='true'] {
	border-color: var(--nd-c-brand);
	background: var(--nd-c-brand);
	color: var(--nd-c-on-brand);
}

/* Facet order as in the mockup: price, brand, colour, distribution, condition,
   then the rest in the plugin's order. Sale (not in the mockup) goes right after
   price. Every group has a top rule; the list is
   pulled up 1px so the first one (whichever it is) disappears under the edge. */
#cat-filter .wa-is-facets .wa-sidebar-widget {
	display: flex;
	flex-direction: column;
	margin-top: -1px;
}

#cat-filter .wa-is-facets .wa-sidebar-widget > .oxy-wa-is-facet {
	border-top: 1px solid var(--nd-c-line);
}

#cat-filter .wa-is-facets .oxy-wa-is-facet:has(> [data-facet='price']) {
	order: -6;
}

#cat-filter .wa-is-facets .oxy-wa-is-facet:has(> [data-facet='sale']) {
	order: -5;
}

#cat-filter .wa-is-facets .oxy-wa-is-facet:has(> [data-facet='pa_vyrobca']) {
	order: -4;
}

#cat-filter .wa-is-facets .oxy-wa-is-facet:has(> [data-facet='pa_farba']) {
	order: -3;
}

#cat-filter .wa-is-facets .oxy-wa-is-facet:has(> [data-facet='pa_distribucia']) {
	order: -2;
}

#cat-filter .wa-is-facets .oxy-wa-is-facet:has(> [data-facet='pa_stav']) {
	order: -1;
}

/* Colour swatch before the colour name; --nd-sw-* fall back to the nearest
   mobilky colour, unknown names get a neutral disc. */
#cat-filter .wa-is-facets .cat-sw {
	flex: 0 0 auto;
	width: var(--nd-icon-xs);
	height: var(--nd-icon-xs);
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius-round);
	background: var(--nd-c-surface-muted);
}

#cat-filter .wa-is-facets .cat-sw--black { background: var(--nd-sw-black, var(--black)); }
#cat-filter .wa-is-facets .cat-sw--graphite { background: var(--nd-sw-graphite, var(--base-semi-dark)); }
#cat-filter .wa-is-facets .cat-sw--gray { background: var(--nd-sw-gray, var(--base-medium)); }
#cat-filter .wa-is-facets .cat-sw--silver { background: var(--nd-sw-silver, var(--base-light)); }
#cat-filter .wa-is-facets .cat-sw--white { background: var(--nd-sw-white, var(--white)); }
#cat-filter .wa-is-facets .cat-sw--gold { background: var(--nd-sw-gold, var(--nd-c-rating)); }
#cat-filter .wa-is-facets .cat-sw--orange { background: var(--nd-sw-orange, var(--nd-c-sale)); }
#cat-filter .wa-is-facets .cat-sw--red { background: var(--nd-sw-red, var(--color-required)); }
#cat-filter .wa-is-facets .cat-sw--pink { background: var(--nd-sw-pink, var(--color-christmas-start)); }
#cat-filter .wa-is-facets .cat-sw--purple { background: var(--nd-sw-purple, var(--primary-semi-light)); }
#cat-filter .wa-is-facets .cat-sw--blue { background: var(--nd-sw-blue, var(--wc-legacy-info)); }
#cat-filter .wa-is-facets .cat-sw--green { background: var(--nd-sw-green, var(--accent-dark)); }
#cat-filter .wa-is-facets .cat-sw--brown { background: var(--nd-sw-brown, var(--secondary-semi-dark)); }

/* The plugin's bottom "Zrušiť filtre" and the price slider's own "Resetovať" give way
   to the single "Resetovať" in the head, as in the mockup (catalog.js clicks them). */
#cat-filter .wa-is-facets:has(.cat-drawer-head) .wa-is-clear.wa-is-reset,
#cat-filter .wa-is-facets:has(.cat-drawer-head) .wa-is-facet .wa-is-range-facet .wa-is-range-clear {
	display: none;
}

/* Phones: smaller name, price and badge stack. */
@media (max-width: 720px) {
	#cat-results .wa-is-card .wa-is-card-body .wa-is-block-1 {
		font-size: var(--nd-fs-14) !important;
	}

	#cat-results .wa-is-card .wa-al-card-price__sale,
	#cat-results .wa-is-card .wa-al-card-price--onsale .wa-al-card-price__sale {
		font-size: var(--nd-fs-13);
	}

	#cat-results .wa-is-card .cat-card-badges {
		gap: var(--nd-sp-4);
	}

	#cat-results .wa-is-card .cat-card-energy__arrow {
		min-width: var(--nd-sp-22);
		padding-inline: var(--nd-sp-4) var(--nd-sp-6);
		font-size: var(--nd-fs-11);
	}

	#cat-results .wa-is-card .cat-card-energy__scale {
		padding-inline: var(--nd-sp-2);
		font-size: var(--nd-fs-10);
	}

	#cat-results .wa-is-card .cat-card-hc {
		width: var(--nd-sp-40);
		height: var(--nd-sp-40);
		font-size: var(--nd-fs-10);
	}

	#cat-results .wa-is-card .cat-card-charger {
		width: var(--nd-sp-26);
		height: var(--nd-sp-32);
	}

	#cat-results .wa-is-card .cat-card-charger svg {
		width: var(--nd-sp-16);
		height: var(--nd-sp-20);
	}

	/* 44px tap targets with the mockup's look: invisible hit boxes around the
	   "Filtrovať" pill and the pager buttons. */
	#cat-results .wa-is-filter-trigger,
	#cat-results .wa-is-pagination-area .wa-is-page > a {
		position: relative;
	}

	#cat-results .wa-is-filter-trigger::after,
	#cat-results .wa-is-pagination-area .wa-is-page > a::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: max(100%, var(--nd-btn-h));
		height: max(100%, var(--nd-btn-h));
		transform: translate(-50%, -50%);
	}

	/* The sort select (no pseudo-elements on <select>): a 44px box whose extra
	   height is transparent border; the visible 37px frame is an inset shadow. */
	#cat-results .wa-is-sort__select {
		min-height: var(--nd-btn-h);
		padding-right: calc(var(--nd-sp-30) + var(--nd-border-strong));
		padding-left: calc(var(--nd-sp-11) + var(--nd-border-strong));
		border-width: calc((var(--nd-btn-h) - var(--nd-select-h)) / 2) 0;
		border-color: transparent;
		border-radius: var(--nd-radius-m) / calc(var(--nd-radius-m) + (var(--nd-btn-h) - var(--nd-select-h)) / 2);
		background-clip: padding-box;
		box-shadow: inset 0 0 0 var(--nd-border-strong) var(--nd-c-brand-tint-2);
	}

	#cat-results .wa-is-sort__select:focus {
		border-color: transparent;
		box-shadow: inset 0 0 0 var(--nd-border-strong) var(--nd-c-brand);
	}
}

@media (min-width: 521px) {
	#cat-results .wa-is-sort-cell {
		flex: 0 1 auto;
	}

	/* Tablets: "Filtrovať" pill, "Zoradiť [select]" and the count on one line,
	   the count pushed right (mockup .cat-toolbar, gap 14px). */
	#cat-results .wa-is-toolbar-row {
		flex-wrap: nowrap;
		gap: var(--nd-sp-14);
	}

	#cat-results .wa-is-filter-trigger {
		flex: 0 0 auto;
	}

	#cat-results .wa-is-sorting-row {
		flex: 1 1 auto;
		flex-wrap: nowrap;
		gap: var(--nd-sp-14);
		width: auto;
		min-width: 0;
	}

	#cat-results .wa-is-count-cell {
		margin-left: auto;
	}

}

@media (min-width: 721px) {
	#cat-results .wa-is-card .wa-is-card-inner {
		--card-pad-x: var(--nd-sp-14);

		padding-block: var(--nd-sp-14);
	}

	#cat-results .wa-is-card .wa-al-card-price--onsale .wa-al-card-price__top {
		font-size: var(--nd-fs-11);
	}
}

@media (min-width: 861px) {
	#cat-results .wa-is-masonry {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	#cat-results .wp-grid-builder .wa-is-card:nth-child(2n) {
		border-right: 1px solid var(--nd-c-line);
	}

	#cat-results .wp-grid-builder .wa-is-card:nth-child(3n) {
		border-right: 0;
	}

	#cat-results .wa-is-card .wa-is-card-media {
		height: var(--nd-pcard-img-h);
	}

	#cat-results .wa-is-card .wa-al-card-price__regular,
	#cat-results .wa-is-card .wa-al-card-price--regular .wa-al-card-price__regular,
	#cat-results .wa-is-card .wa-al-card-price--onsale .wa-al-card-price__regular {
		font-size: var(--nd-fs-price);
	}

	#cat-results .wa-is-pagination-area {
		grid-template-columns: 1fr auto 1fr;
		justify-items: stretch;
		align-items: center;
		gap: var(--nd-sp-16);
		text-align: left;
	}

	#cat-results .wa-is-pagination-area > .oxy-wa-is-facet:has(> .wa-is-facet-2) {
		grid-column: 3;
		justify-self: end;
	}

	#cat-results .wa-is-pagination-area .wa-is-pagination {
		justify-content: flex-end;
	}
}

/* From 1101px four columns: the card is then as wide as the homepage card and takes its
   image height, so both lists show the same card. */
@media (min-width: 1101px) {
	#cat-results .wa-is-masonry {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	#cat-results .wp-grid-builder .wa-is-card:nth-child(3n) {
		border-right: 1px solid var(--nd-c-line);
	}

	#cat-results .wp-grid-builder .wa-is-card:nth-child(4n) {
		border-right: 0;
	}

	#cat-results .wa-is-card .wa-is-card-media {
		height: var(--nd-pcard-img-h-home);
	}
}

/* From 861px the facets sit inline in the aside (mockup: 230px column up to
   1100px). The plugin keeps its modal-drawer styles up to its own 1024px
   breakpoint, so the dialog is put back into the flow here; catalog.js closes
   a drawer left open while the window widens past 860px. */
@media (min-width: 861px) {
	#cat-results .wa-is-filter-trigger {
		display: none !important;
	}

	#cat-results .wa-is-toolbar-row {
		gap: var(--nd-sp-14);
	}

	#cat-results .wa-is-sorting-row {
		flex-wrap: nowrap;
	}

	#cat-results .wa-is-count-cell {
		margin-left: auto;
	}

	#cat-filter .wa-is-facets {
		display: block;
		position: static;
		z-index: auto;
		width: 100%;
		max-width: none;
		height: auto;
		max-height: none;
		margin: 0;
		overflow: hidden;
		border: 1px solid var(--nd-c-line);
		border-radius: var(--nd-radius);
		box-shadow: none;
		transform: none;
		transition: none;
	}
}