/*
 * Product listing page (woocommerce/archive-product.php, search.php): breadcrumb,
 * heading, subcategory tiles, promo slot, two-column layout, "Obľúbené v kategórii",
 * SEO text band and the empty state. The facets and the product grid are
 * wa-instant-search output, styled in components/instant-search.css.
 * Mobile first; the layout gets its sidebar at 861px, as in the mockup (the
 * plugin's 1024px drawer breakpoint is overridden in instant-search.css).
 */

/* The listing ends with full-width bands (SEO text, shop reviews) that sit flush
   on the footer; body class from mobilky_cat_setup_hooks(), gap read in footer.css. */
body.mobilky-listing {
	--wa-footer-gap: 0;
}

.cat {
	font-family: var(--nd-font);
	font-size: var(--nd-fs-body);
	line-height: var(--nd-lh-body);
	color: var(--nd-c-ink);
}

.cat .cat-icon {
	flex: 0 0 auto;
}

/* ---- Breadcrumb: below 721px only home, "…" and the closest parent ---- */
.cat-breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-8);
	padding-top: var(--nd-sp-12);
	padding-bottom: var(--nd-sp-4);
	overflow-x: auto;
	scrollbar-width: none;
	font-size: var(--nd-fs-13);
	color: var(--nd-c-head);
	white-space: nowrap;
}

.cat-breadcrumb::-webkit-scrollbar {
	display: none;
}

.cat-breadcrumb__home,
.cat-breadcrumb__crumb {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--nd-sp-8);
}

.cat-breadcrumb__home,
.cat-breadcrumb__link {
	color: var(--nd-c-head);
}

.cat-breadcrumb__home:hover,
.cat-breadcrumb__link:hover {
	color: var(--nd-c-brand);
}

.cat-breadcrumb__sep {
	opacity: var(--nd-opacity-sep);
}

/* Phones: a 44px tap target on the home icon. The breadcrumb scrolls sideways, so an
   ::after hit area would be clipped; the link is padded instead and the negative
   margins keep the row where the 12px/4px padding put it (721px+ resets this). */
.cat-breadcrumb {
	margin-top: calc(var(--nd-sp-2) * -1);
	margin-bottom: calc(var(--nd-sp-10) * -1);
	padding-top: 0;
	padding-bottom: 0;
}

.cat-breadcrumb__home {
	min-height: var(--nd-btn-h);
	margin-right: calc(var(--nd-sp-16) * -1);
	margin-left: calc(var(--nd-gutter-sm) * -1);
	padding-right: var(--nd-sp-16);
	padding-left: var(--nd-gutter-sm);
}

.cat-breadcrumb__crumb,
.cat-breadcrumb__crumb--current {
	display: none;
}

.cat-breadcrumb__crumb--ellipsis,
.cat-breadcrumb__crumb--keep {
	display: inline-flex;
}

/* ---- Heading ---- */
.cat-head {
	padding-top: var(--nd-sp-14);
	padding-bottom: var(--nd-sp-2);
}

.cat-head__title {
	margin: 0;
	font-size: var(--nd-fs-h1-sm);
	font-weight: var(--nd-fw-bold);
	line-height: var(--nd-lh-head);
	color: var(--nd-c-head);
}

.cat-head__lede {
	max-width: var(--nd-measure-lede);
	margin: var(--nd-sp-9) 0 0;
	font-size: var(--nd-fs-15);
	line-height: var(--nd-lh-lede);
	color: var(--nd-c-ink);
}

/* ---- Subcategory tiles ---- */
.cat-subcats {
	padding-top: var(--nd-sp-22);
	padding-bottom: var(--nd-sp-6);
}

.cat-subcats__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nd-sp-10);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cat-subcat {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-10);
	height: 100%;
	padding: var(--nd-sp-7) var(--nd-sp-10);
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius);
	background: var(--nd-c-surface);
	color: var(--nd-c-head);
	transition: border-color var(--nd-dur-fast), box-shadow var(--nd-dur-fast);
}

.cat-subcat:hover {
	border-color: var(--nd-c-brand);
	box-shadow: var(--nd-shadow);
}

/* No product in the category: not a link, greyed out, a phone icon instead of a photo. */
.cat-subcat--empty {
	background: var(--nd-c-surface-muted);
	color: var(--nd-c-muted);
	cursor: default;
}

.cat-subcat--empty:hover {
	border-color: var(--nd-c-line);
	box-shadow: none;
}

.cat-subcat--empty .cat-subcat__logo {
	background: var(--nd-c-surface);
}

.cat-subcat.cat-subcat--empty .cat-icon {
	color: var(--nd-c-muted);
}

.cat-subcat__logo {
	display: grid;
	grid-template: 100% / 100%; /* gives the photo a definite box, so height:100% + contain fits it */
	flex: 0 0 auto;
	place-items: center;
	width: var(--nd-icon-l);
	height: var(--nd-icon-l);
	overflow: hidden;
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius-s);
	background: var(--nd-c-surface-muted);
	font-size: var(--nd-fs-12);
	font-weight: var(--nd-fw-bold);
	color: var(--nd-c-muted);
}

/* A photo stands on its own; the box and tint are only for the initial. */
.cat-subcat__logo--img {
	border: 0;
	border-radius: 0;
	background: none;
}

.cat-subcat__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cat-subcat__name {
	flex: 1 1 0%;
	min-width: 0;
	font-size: var(--nd-fs-14-5);
	font-weight: var(--nd-fw-semibold);
	line-height: var(--nd-lh-snug);
}

.cat-subcat .cat-icon {
	color: var(--nd-c-brand);
}

/* "Zobraziť všetky (N)": phones only. catalog.js folds the list (.is-folded) and
 * shows the button; without JS every tile stays visible. */
.cat-subcats__more {
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--nd-sp-6);
	width: 100%;
	margin-top: var(--nd-sp-10);
	padding: var(--nd-sp-10);
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius);
	background: var(--nd-c-surface);
	font: inherit;
	font-size: var(--nd-fs-14);
	font-weight: var(--nd-fw-semibold);
	color: var(--nd-c-brand);
	cursor: pointer;
}

.cat-subcats__more .cat-icon {
	color: var(--nd-c-brand);
}

@media (max-width: 520px) {
	.cat-subcats__more:not([hidden]) {
		display: flex;
	}

	.cat-subcats__list.is-folded > li:nth-child(n + 6) {
		display: none;
	}
}

/* ---- Promo slot (banner markup and styles: components/archive-shell.css) ---- */
.cat-promo {
	padding-top: var(--nd-sp-20);
	padding-bottom: var(--nd-sp-18);
}

.cat-promo:not(:has(> *)) {
	display: none;
}

/* ---- Layout: one column with the filter drawer, sidebar from 861px ---- */
.cat-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nd-sp-24);
	align-items: start;
	padding-top: var(--nd-sp-14);
	padding-bottom: var(--nd-sp-44);
}

.cat-main {
	min-width: 0;
}

/* Below the sidebar breakpoint the aside only holds the drawer and the sidebar banner. */
.cat-aside {
	order: 1;
	min-width: 0;
}

/* ---- "Obľúbené v kategórii": four homepage cards (.pcard, product-card.css) in a
   bordered strip; it scrolls sideways like the homepage carousels when they do not fit
   (phones: two cards wide, 721px+: at least --nd-pcard-w-min each). ---- */
.cat-top {
	padding-bottom: var(--nd-sp-18);
}

.cat-top .nd-sec-h {
	margin-bottom: var(--nd-sp-20);
}

.cat-top__list {
	overflow-x: auto;
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius);
	background: var(--nd-c-surface);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.cat-top__list::-webkit-scrollbar {
	display: none;
}

.cat-top__list ul.products {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cat-top__list .pcard {
	flex: 0 0 var(--nd-pcard-w-sm);
	border-right: 1px solid var(--nd-c-line);
	scroll-snap-align: start;
}

.cat-top__list .pcard:last-child {
	border-right: 0;
}

/* ---- Toolbar count and pager info (built by catalog.js from the plugin's count) ---- */
.cat-count,
.cat-pager-info {
	font-size: var(--nd-fs-14);
	color: var(--nd-c-ink);
}

.cat-count b {
	font-weight: var(--nd-fw-bold);
	color: var(--nd-c-head);
}

.cat-pager-info {
	font-size: var(--nd-fs-14-5);
	color: var(--nd-c-muted);
}

.cat-pager-info b {
	font-weight: var(--nd-fw-regular);
	color: var(--nd-c-head);
}

/* ---- Empty state ---- */
.cat-empty {
	display: grid;
	justify-items: center;
	gap: var(--nd-sp-8);
	padding: var(--nd-sp-44) var(--nd-sp-20);
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius);
	background: var(--nd-c-surface);
	text-align: center;
}

.cat-empty__title {
	font-size: var(--nd-fs-17);
	color: var(--nd-c-head);
}

.cat-empty__text {
	font-size: var(--nd-fs-14);
	color: var(--nd-c-muted);
}

.cat-empty__btn {
	margin-top: var(--nd-sp-8);
	padding: var(--nd-sp-10) var(--nd-sp-22);
	border-radius: var(--nd-radius-btn);
	background: var(--nd-c-brand);
	font-size: var(--nd-fs-14);
	font-weight: var(--nd-fw-bold);
	color: var(--nd-c-on-brand);
}

.cat-empty__btn:hover,
.cat-empty__btn:focus-visible {
	background: var(--nd-c-brand-hover);
	color: var(--nd-c-on-brand);
}

/* ---- SEO text band ---- */
.cat-seo {
	padding-top: var(--nd-sp-32);
	padding-bottom: var(--nd-sp-40);
	background: var(--nd-c-brand-tint);
}

.cat-seo__body {
	position: relative;
	font-size: var(--nd-fs-14-5);
	line-height: var(--nd-lh-seo);
	color: var(--nd-c-ink);
}

.cat-seo__body.is-collapsible:not(.is-open) {
	max-height: var(--nd-seo-max-h);
	overflow: hidden;
}

.cat-seo__body.is-collapsible:not(.is-open)::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: var(--nd-seo-fade);
	background: linear-gradient(to bottom, transparent, var(--nd-c-brand-tint));
}

.cat-seo__body > :first-child {
	margin-top: 0;
}

.cat-seo__body h2 {
	margin: 0 0 var(--nd-sp-10);
	font-size: var(--nd-fs-22);
	font-weight: var(--nd-fw-bold);
	line-height: var(--nd-lh-head);
	color: var(--nd-c-head);
}

.cat-seo__body h3,
.cat-seo__body h4 {
	margin: var(--nd-sp-18) 0 var(--nd-sp-6);
	font-size: var(--nd-fs-16);
	font-weight: var(--nd-fw-bold);
	line-height: var(--nd-lh-head);
	color: var(--nd-c-head);
}

.cat-seo__body p,
.cat-seo__body ul,
.cat-seo__body ol {
	max-width: var(--nd-measure-seo);
	margin: 0 0 var(--nd-sp-10);
}

.cat-seo__body a {
	color: var(--nd-c-brand);
	text-decoration: underline;
}

.cat-seo__more {
	display: inline-flex;
	align-items: center;
	gap: var(--nd-sp-6);
	margin-top: var(--nd-sp-12);
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--nd-fs-14);
	font-weight: var(--nd-fw-medium);
	color: var(--nd-c-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.cat-seo__more[hidden] {
	display: none;
}

.cat-seo__more .cat-icon {
	transition: transform 0.18s;
}

.cat-seo__more[aria-expanded="true"] .cat-icon {
	transform: rotate(180deg);
}

/* ---- Filter head and apply button (added by catalog.js inside the plugin dialog) ----
 * Below 861px the head is the sticky drawer head; above it is the box header. */
.cat-drawer-head {
	display: flex;
	position: sticky;
	top: 0;
	z-index: 2;
	align-items: center;
	gap: var(--nd-sp-12);
	padding: var(--nd-sp-14) var(--nd-sp-16);
	border-bottom: 1px solid var(--nd-c-line);
	background: var(--nd-c-surface);
}

.cat-drawer-head__title {
	margin-right: auto;
	font-size: var(--nd-fs-17);
	font-weight: var(--nd-fw-bold);
	color: var(--nd-c-head);
}

.cat-drawer-head__reset {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--nd-fs-13);
	color: var(--nd-c-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.cat-drawer-head__reset:hover {
	background: none;
	color: var(--nd-c-brand-hover);
}

/* Inert until a filter is set (catalog.js keeps aria-disabled in sync). */
.cat-drawer-head__reset[aria-disabled="true"] {
	opacity: var(--nd-opacity-disabled);
	cursor: default;
	pointer-events: none;
}

.cat-drawer-head__close {
	display: grid;
	place-items: center;
	width: var(--nd-close-btn);
	height: var(--nd-close-btn);
	margin-right: calc(var(--nd-sp-10) * -1);
	padding: 0;
	border: 0;
	background: none;
	color: var(--nd-c-head);
	cursor: pointer;
}

/* Sticky, not fixed: the plugin dialog is transformed, which would anchor a fixed child to it anyway. */
.cat-drawer-apply {
	position: sticky;
	bottom: 0;
	z-index: 3;
	width: 100%;
	padding: var(--nd-sp-15);
	border: 0;
	border-radius: 0;
	background: var(--nd-c-cta);
	font: inherit;
	font-size: var(--nd-fs-15);
	font-weight: var(--nd-fw-bold);
	color: var(--nd-c-on-cta);
	cursor: pointer;
}

.cat-drawer-apply:hover {
	background: var(--nd-c-cta-hover);
	color: var(--nd-c-on-cta);
}

/* Phones: 44px hit boxes around the drawer head's "Resetovať" and close button. */
@media (max-width: 720px) {
	.cat-drawer-head__reset,
	.cat-drawer-head__close {
		position: relative;
	}

	.cat-drawer-head__reset::after,
	.cat-drawer-head__close::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%);
	}
}

/* No results and no active filter (catalog.js): only the plugin's empty message. */
.cat-layout--no-results > .cat-aside,
.cat-layout--no-results #cat-results .wa-is-toolbar {
	display: none;
}

.cat-layout.cat-layout--no-results {
	grid-template-columns: minmax(0, 1fr);
}

/* ---- Keyboard focus ----
 * A global ":focus-visible { outline: none }" (legacy scorg CSS, loaded after the
 * theme) and the plugin's own "outline: none" rules hide the focus ring; the
 * ids/classes of the listing wrappers out-rank both. */
#cat-results :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible,
#cat-filter :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible,
.cat .cat-breadcrumb :is(a, button, [tabindex]:not([tabindex="-1"])):focus-visible,
.cat .cat-subcats :is(a, button, [tabindex]:not([tabindex="-1"])):focus-visible,
.cat .cat-top :is(a, button, [tabindex]:not([tabindex="-1"])):focus-visible,
.cat .cat-promo :is(a, button, [tabindex]:not([tabindex="-1"])):focus-visible,
.cat .cat-seo :is(a, button, [tabindex]:not([tabindex="-1"])):focus-visible,
.cat .cat-empty :is(a, button, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: var(--focus-width) solid var(--nd-c-brand);
	outline-offset: var(--focus-width);
}

/* Legacy scorg rules force "outline-style: none !important" on pager links and
 * a pale "outline-color ... !important" on facet toggles/range thumbs; only
 * !important can win back a visible ring there. */
#cat-results .wa-is-pagination-area .wa-is-page > a:focus-visible {
	outline-style: solid !important;
}

#cat-filter .wa-is-facet :is(.wa-is-toggle-hidden, .wa-is-range-thumb, .wa-is-range-clear, .wa-is-checkbox):focus-visible {
	outline-color: var(--nd-c-brand) !important;
}

/* The price inputs sit borderless inside their framed label: ring the frame. */
#cat-filter .cat-price__field:has(.cat-price__input:focus-visible) {
	outline: var(--focus-width) solid var(--nd-c-brand);
	outline-offset: var(--focus-width);
}

#cat-filter .cat-price__field .cat-price__input:focus-visible {
	outline: none;
}

@media (min-width: 521px) {
	.cat-subcats__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cat-subcat {
		padding: var(--nd-sp-8) var(--nd-sp-12);
	}

	.cat-subcat__logo {
		width: var(--nd-icon-xl);
		height: var(--nd-icon-xl);
	}
}

@media (min-width: 721px) {
	.cat-breadcrumb {
		margin-top: 0;
		margin-bottom: 0;
		padding-top: var(--nd-sp-12);
		padding-bottom: var(--nd-sp-4);
		flex-wrap: wrap;
		gap: var(--nd-sp-6);
		overflow: visible;
		white-space: normal;
	}

	.cat-breadcrumb__home,
	.cat-breadcrumb__crumb {
		gap: var(--nd-sp-6);
	}

	.cat-breadcrumb__home {
		min-height: 0;
		margin-right: 0;
		margin-left: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.cat-breadcrumb__crumb,
	.cat-breadcrumb__crumb--current {
		display: inline-flex;
	}

	.cat-breadcrumb__crumb--ellipsis {
		display: none;
	}

	.cat-top__list .pcard {
		flex: 1 0 var(--nd-pcard-w-min);
	}
}

@media (min-width: 861px) {
	.cat-head__title {
		font-size: var(--nd-fs-h1);
	}

	.cat-subcats__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 861px) {
	.cat-layout {
		grid-template-columns: var(--nd-aside-w-md) minmax(0, 1fr);
		gap: var(--nd-layout-gap-md);
	}

	.cat-layout--single {
		grid-template-columns: minmax(0, 1fr);
	}

	.cat-aside {
		order: 0;
	}

	.cat-drawer-head {
		position: static;
		padding: var(--nd-sp-12) var(--nd-sp-14);
	}

	.cat-drawer-head__title {
		font-size: var(--nd-fs-16);
	}

	.cat-drawer-head__close,
	.cat-drawer-apply {
		display: none;
	}
}

@media (min-width: 1101px) {
	.cat-subcats__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.cat-layout {
		grid-template-columns: var(--nd-aside-w) minmax(0, 1fr);
		gap: var(--nd-layout-gap);
	}

	.cat-layout--single {
		grid-template-columns: minmax(0, 1fr);
	}
}