/**
 * Product lists (inc/category-view.php, assets/js/category-view.js): the product tile everywhere it shows up,
 * the top of the lists and the shop sidebar with its filters. Follows the "Kategoria: Kuwety samoczyszczące"
 * mockup with the changes decided since (plan: kategorie-i-menu/widok-kategorii.md, decision 29).
 *
 * Colours: assets/css/tokens.css. Sections: 1. tile, 2. top of the list and load more, 3. sidebar, 4. narrower screens.
 */

/* ------------------------------------------------------------------
   1. Tile
   ------------------------------------------------------------------ */

/* Photo on a light grey field, so white product photos stand apart from the page. */
ul.products li.product .woocommerce-image__wrapper {
	overflow: hidden;
	border-radius: 6px;
	background: var(--sz-photo);
}
ul.products li.product .woocommerce-image__wrapper img {
	mix-blend-mode: multiply;
}

/* On hover the theme lays a white card (li::before, positioned) over the tile: the text and the button stay
   above it. */
ul.products li.product .woocommerce-card__header {
	position: relative;
	z-index: 1;
}

/* Brand, linked to its page: 24 px tall, so it is not tapped instead of the name under it. */
ul.products li.product .sz-loop-brand {
	margin: 10px 0 2px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--sz-mute);
}
ul.products li.product .sz-loop-brand a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: inherit;
	text-decoration: none;
}
ul.products li.product .sz-loop-brand a:hover {
	color: var(--sz-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Name: 2 lines, the same height on every tile. */
ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
}
ul.products li.product .woocommerce-loop-product__title a {
	display: -webkit-box;
	overflow: hidden;
	min-height: 42px;
	font-size: 15px;
	font-weight: 500;
	line-height: 21px;
	color: var(--sz-ink);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Parameters: the same rows in the same order for a category; the block keeps the height of 3 rows. */
ul.products li.product .sz-loop-features {
	min-height: 60px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 20px;
	color: var(--sz-ink);
}
ul.products li.product .sz-loop-features li {
	overflow: hidden;
	margin: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.sz-loop-features__label {
	color: var(--sz-mute);
}

/* Empty row as tall as the stars row of the theme (.shoptimizer_ratingContainer). */
ul.products li.product .sz-loop-no-rating {
	height: 16.5px;
	margin-bottom: 5.6px;
}

/* Price: the sale price in red, the regular price crossed out after it. */
ul.products li.product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	margin-top: 6px;
	font-size: 18px;
	font-weight: 700;
	color: var(--sz-ink);
}
ul.products li.product .price ins {
	order: -1;
	color: var(--sz-accent-strong);
	text-decoration: none;
}
ul.products li.product .price del {
	font-size: 13px;
	font-weight: 400;
	color: var(--sz-mute);
	opacity: 1;
}
ul.products li.product .product-label.type-bubble,
ul.products li.product .onsale {
	padding: 3px 9px;
	font-size: 12px;
	font-weight: 600;
	background-color: var(--sz-accent-strong);
}

/* "Nowość" (CommerceKit badge, navy from its settings): the same shape as the sale label, full colour, under the
   sale label when both show (the plugin moves its wrapper down by the sale label's height). */
ul.products li.product .ckit-badge_wrapper {
	font-size: 12px;
}
.ckit-badge_wrapper .ckit-badge {
	padding: 3px 9px;
	margin-bottom: 5px;
	font-size: 12px;
	line-height: 18px;
	font-weight: 600;
	letter-spacing: 0;
	border-radius: 4px;
	opacity: 1;
}

/* Availability with the dispatch time. Out of stock (decision 29): the status is the one clear sign, amber,
   neither the green of "Dostępny" nor an alarm red; 6.8:1 on white. */
ul.products li.product .sz-loop-avail {
	margin: 6px 0 12px;
	font-size: 12.5px;
	line-height: 18px;
	color: var(--sz-ink2);
}
ul.products li.product .sz-loop-avail::before {
	content: "";
	display: inline-block;
	margin: 0 7px 1px 0;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sz-ok);
}
ul.products li.product .sz-loop-avail.is-out {
	font-weight: 600;
	color: var(--sz-out);
}
ul.products li.product .sz-loop-avail.is-out::before {
	background: var(--sz-out-dot);
}
ul.products li.product .sz-loop-avail.is-backorder::before {
	background: var(--sz-neutral);
}

/* Button: always visible (theme setting), outlined, full width, 44 px. "body" outweighs the colours the theme
   prints inline from the Customizer. */
body ul.products li.product .button,
body ul.products li.product .added_to_cart {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	margin-top: auto;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sz-navy);
	background: #fff;
	border: 1.5px solid var(--sz-navy);
	border-radius: 6px;
	opacity: 1;
}
body ul.products li.product .button:hover {
	color: #fff;
	background: var(--sz-navy);
}
/* The theme removes the outline of .button. */
body ul.products li.product .button:focus-visible {
	outline: 3px solid var(--sz-focus);
	outline-offset: 2px;
}
/* "Powiadom mnie" is an action like "Do koszyka": the same button, with a bell. */
body ul.products li.product .button.sz-notify::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Wishlist heart, the same as on the product page: an outlined heart in a white circle, a filled heart in the
   accent colour once saved (the plugin draws a tick right after the click). Always visible, so a saved product
   can be seen on the list. It sits inside the photo frame (inc/wishlist.php), 10 px from the top right corner of
   the photo, as the sale label from the top left one. */
ul.products li.product .commercekit-wishlist.mini {
	top: 10px;
	right: 10px;
	left: auto;
	width: 36px;
	height: 36px;
	opacity: 1;
	transform: none;
}
ul.products li.product .commercekit-wishlist.mini a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--sz-ink2);
	background: #fff;
	border: 1px solid var(--sz-line);
	border-radius: 50%;
	transition: color 0.15s, border-color 0.15s;
}
ul.products li.product .commercekit-wishlist.mini a:hover,
ul.products li.product .commercekit-wishlist.mini a.commercekit-browse-wishlist {
	color: var(--sz-accent);
	border-color: var(--sz-accent);
}
ul.products li.product .commercekit-wishlist.mini a em {
	position: static;
	display: block;
	width: 18px;
	height: 18px;
	margin: 0;
}
ul.products li.product .commercekit-wishlist.mini a em.cg-wishlist::before,
ul.products li.product .commercekit-wishlist.mini a em.cg-wishlist-t::before {
	/* The plugin draws its icons as masks, so the heart takes the colour of the button. */
	position: static;
	width: 18px;
	height: 18px;
	background: currentColor;
	transform: none;
}
ul.products li.product .commercekit-wishlist.mini a.commercekit-browse-wishlist em.cg-wishlist::before,
ul.products li.product .commercekit-wishlist.mini a.commercekit-browse-wishlist em.cg-wishlist-t::before {
	-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 21s-7.4-4.7-9.2-9.1C1.4 8.5 3.3 5.1 6.6 4.5c2-.4 3.9.4 5.4 2 1.5-1.6 3.4-2.4 5.4-2 3.3.6 5.2 4 3.8 7.4C19.4 16.3 12 21 12 21z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 21s-7.4-4.7-9.2-9.1C1.4 8.5 3.3 5.1 6.6 4.5c2-.4 3.9.4 5.4 2 1.5-1.6 3.4-2.4 5.4-2 3.3.6 5.2 4 3.8 7.4C19.4 16.3 12 21 12 21z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ------------------------------------------------------------------
   2. Top of the list: title with the number of products, description as plain text, the bar with the visible
   range and sorting; load more under the list
   ------------------------------------------------------------------ */
.woocommerce.archive header.woocommerce-products-header {
	display: block;
	padding: 0;
	background: none;
}
.woocommerce.archive .woocommerce-products-header__title {
	margin-bottom: 8px;
}
/* The intro runs the full width of the content column, level with the list (Michał, 06.10.2026, after seeing a
   narrower 72ch column live: "daj na całą szerokość"); the intros are kept short, two or three sentences. */
.woocommerce.archive header.woocommerce-products-header .term-description {
	max-width: none;
	padding: 0;
	font-size: 15px;
	line-height: 24px;
	color: var(--sz-ink2);
	background: none;
}
.woocommerce.archive .sz-archive-count {
	font-size: 14px;
	color: var(--sz-mute);
}
.woocommerce.archive .shoptimizer-sorting .woocommerce-result-count {
	font-size: 14px;
	color: var(--sz-ink2);
}

/* "Sortuj: Polecane" as one control (assets/js/category-view.js): the native field covers the whole box,
   invisible, so a click or tap anywhere on it opens the options; the chosen option is shown as text. Without
   JavaScript the plain field stays (rules for it in the media queries). */
.woocommerce-ordering.sz-sort {
	position: relative;
	cursor: pointer;
}
.woocommerce.archive .shoptimizer-sorting .woocommerce-ordering.sz-sort select.orderby {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 16px;
	opacity: 0;
	cursor: pointer;
}
.sz-sort__value {
	padding-right: 22px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--sz-ink);
	background: var(--sz-chevron) right center / 16px no-repeat;
}

@media (min-width: 993px) {
	/* "Kuwety samoczyszczące dla kotów  24 produkty" in one line. */
	.woocommerce.archive h1.woocommerce-products-header__title {
		display: inline-block;
		margin-right: 12px;
	}
	.woocommerce.archive header.woocommerce-products-header {
		display: inline;
	}
	.woocommerce.archive .sz-archive-count {
		display: inline-block;
		margin: 0;
	}
	.woocommerce.archive header.woocommerce-products-header .term-description {
		margin-top: 4px;
	}

	/* Bar above the list, under a line across the whole list: "1–12 z 24" on the left (only when the list has
	   more pages: the number of all products stands at the title), a compact "Sortuj: Polecane" field on the
	   right (variant B, 03.10.2026). */
	.woocommerce.archive .shoptimizer-sorting {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 16px;
		padding: 12px 0;
		border-top: 1px solid var(--sz-line);
	}
	.woocommerce.archive .shoptimizer-sorting .woocommerce-result-count {
		order: 1;
		margin: 0;
	}
	.woocommerce.archive .woocommerce-result-count.is-all {
		visibility: hidden;
	}
	.woocommerce.archive .shoptimizer-sorting .woocommerce-ordering {
		order: 2;
		display: flex;
		align-items: center;
		height: 34px;
		margin: 0 0 0 auto;
		padding: 0 10px 0 12px;
		font-size: 14px;
		color: var(--sz-mute);
		border: 1px solid var(--sz-field-soft);
		border-radius: 6px;
		transition: border-color 0.15s;
	}
	.woocommerce.archive .shoptimizer-sorting .woocommerce-ordering:hover,
	.woocommerce.archive .shoptimizer-sorting .woocommerce-ordering:focus-within {
		border-color: var(--sz-navy);
	}
	.woocommerce.archive .shoptimizer-sorting .woocommerce-ordering::before {
		content: "Sortuj:";
		margin-right: 4px;
	}
	.woocommerce.archive .shoptimizer-sorting .woocommerce-ordering select.orderby {
		width: auto;
		height: 32px;
		padding: 0 4px 0 0;
		font-size: 14px;
		font-weight: 600;
		text-transform: none;
		color: var(--sz-ink);
		border: 0;
		background-color: transparent;
		box-shadow: none;
	}
	.woocommerce.archive .shoptimizer-sorting .woocommerce-ordering select.orderby:focus-visible {
		outline: 0;
	}
	.woocommerce.archive .shoptimizer-sorting .woocommerce-ordering:has(select:focus-visible) {
		outline: 3px solid var(--sz-focus);
		outline-offset: 2px;
	}

	/* Rows of tiles 40 px apart (the theme leaves 75 px). */
	.static-cta-buttons ul.products li.product:not(.product-category) {
		margin-bottom: 16px;
		padding-bottom: 24px;
	}
}

/* "Widzisz 12 z 24 produktów" and "Pokaż kolejne produkty" under the list (theme load more). */
body .shoptimizer-load-more-wrapper .load-more-status {
	font-size: 14px;
	color: var(--sz-ink2);
}
body.shoptimizer-load-more .site-main .load-more-progress-bar {
	background: var(--sz-navy);
}
body .shoptimizer-load-more-wrapper #shoptimizer-load-more-btn {
	min-height: 48px;
	padding: 0 32px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sz-navy);
	background: #fff;
	border: 1.5px solid var(--sz-navy);
	border-radius: 6px;
}
body .shoptimizer-load-more-wrapper #shoptimizer-load-more-btn:hover {
	color: #fff;
	background: var(--sz-navy);
}
body .shoptimizer-load-more-wrapper #shoptimizer-load-more-btn:focus-visible {
	outline: 3px solid var(--sz-focus);
	outline-offset: 2px;
}

/* "Dodane wcześniej" under a short "Nowości" list: the same grid, its own heading. */
.sz-earlier {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--sz-line);
}
.sz-earlier__title {
	margin: 0;
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
	color: var(--sz-ink);
}
.sz-earlier__title {
	margin-bottom: 20px;
}
.sz-no-products {
	margin: 0;
	font-size: 15px;
	line-height: 24px;
	color: var(--sz-ink2);
}

/* ------------------------------------------------------------------
   3. Sidebar: category tree, "Filtry" head, filter sections (brand, price, "Tylko dostępne", "Tylko nowości")
   ------------------------------------------------------------------ */

/* Category tree: the branch name as the heading, the current category marked with a navy bar; the widget
   title stays for screen readers only. */
#secondary .widget_product_categories {
	margin-bottom: 0;
	padding-bottom: 16px;
	border-bottom: 0;
}
#secondary .widget_product_categories .widget-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
#secondary .widget_product_categories ul.product-categories > li > a {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sz-ink);
}
#secondary .widget_product_categories ul.children {
	margin: 0;
	padding: 0;
	border: 0;
}
#secondary .widget_product_categories ul.children li {
	margin: 0;
	padding: 0;
}
#secondary .widget_product_categories ul.children li::before {
	display: none;
}
#secondary .widget_product_categories ul.children li a {
	display: block;
	padding: 5px 0 5px 12px;
	font-size: 14px;
	line-height: 20px;
	color: var(--sz-ink2);
	border-left: 2px solid transparent;
}
/* "#secondary.widget-area" outweighs the accent colour the theme prints for chosen and hovered links. */
#secondary.widget-area .widget_product_categories ul.children li.current-cat > a {
	font-weight: 600;
	color: var(--sz-ink);
	border-left-color: var(--sz-navy);
}
#secondary.widget-area .widget_product_categories ul.children li a:hover {
	color: var(--sz-navy);
}

/* "Filtry · nic nie wybrano" / "Wyczyść (n)" above the filters (assets/js/category-view.js). */
.sz-filters-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 16px 0 4px;
	border-top: 1px solid var(--sz-line);
}
.sz-filters-head__title {
	font-size: 17px;
	font-weight: 600;
	color: var(--sz-ink);
}
.sz-filters-head__state {
	font-size: 13px;
	color: var(--sz-mute);
}
.sz-filters-head__state a {
	font-weight: 600;
	color: var(--sz-navy);
	text-decoration: underline;
}

/* Filter sections: each draws one line above itself; the title folds the section (assets/js/category-view.js),
   open by default. */
#secondary .widget_layered_nav,
#secondary .widget_price_filter {
	margin-bottom: 0;
	padding: 16px 0;
	border-top: 1px solid var(--sz-line);
	border-bottom: 0;
}
#secondary .widget_layered_nav .widget-title,
#secondary .widget_price_filter .widget-title {
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sz-ink);
}
#secondary .sz-filter-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	color: var(--sz-ink);
	background: none;
	border: 0;
	cursor: pointer;
}
#secondary .sz-filter-toggle::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b3a67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
	transition: transform 0.15s;
}
#secondary .sz-filter-toggle[aria-expanded="false"]::after {
	transform: rotate(-90deg);
}
#secondary .sz-filter-body[hidden] {
	display: none;
}

/* Brand and attribute filters of WooCommerce: square checkboxes, the number on the right. */
#secondary .widget_layered_nav ul li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 32px;
	margin: 0;
	padding: 0;
}
#secondary .widget_layered_nav ul li::before {
	display: none;
}
#secondary .widget_layered_nav ul li a {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	min-height: 32px;
	padding-left: 28px;
	font-size: 14px;
	color: var(--sz-ink);
}
#secondary .widget_layered_nav ul li a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border: 1.5px solid var(--sz-check);
	border-radius: 4px;
	background: #fff;
	transform: translateY(-50%);
}
#secondary .widget_layered_nav ul li a:hover::before {
	border-color: var(--sz-navy);
}
#secondary .widget_layered_nav ul li.chosen a::before {
	border-color: var(--sz-navy);
	background: var(--sz-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat;
}
#secondary .widget_layered_nav ul li .count {
	position: static;
	flex: none;
	font-size: 13px;
	color: var(--sz-mute);
	transform: none;
}
#secondary.widget-area .widget_layered_nav ul li.chosen a {
	font-weight: 600;
	color: var(--sz-ink);
}
#secondary.widget-area .widget_layered_nav ul li a:hover {
	color: var(--sz-navy);
}

/* Price filter: navy slider and "od" / "do" fields in złoty, no button (assets/js/category-view.js). */
#secondary .widget_price_filter .price_slider {
	margin: 14px 10px 18px;
}
#secondary .widget_price_filter .ui-slider-horizontal {
	height: 4px;
	border: 0;
	border-radius: 999px;
	background: var(--sz-track);
}
#secondary .widget_price_filter .ui-slider .ui-slider-range {
	border-radius: 999px;
	background: var(--sz-navy);
}
#secondary .widget_price_filter .ui-slider .ui-slider-handle {
	/* Centred on the 4 px track (the theme lifts the handles with a negative top margin). */
	top: -8px;
	width: 20px;
	height: 20px;
	margin: 0 0 0 -10px;
	box-sizing: border-box;
	border: 2px solid var(--sz-navy);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(20, 20, 20, 0.2);
}
#secondary .widget_price_filter .ui-slider .ui-slider-handle:focus-visible {
	outline: 2px solid var(--sz-navy);
	outline-offset: 2px;
}
#secondary .widget_price_filter .ui-slider .ui-slider-handle::before,
#secondary .widget_price_filter .ui-slider .ui-slider-handle::after {
	display: none;
}
#secondary .widget_price_filter .sz-price .button,
#secondary .widget_price_filter .sz-price .price_label {
	display: none !important;
}
.sz-price__fields {
	/* The theme lays the amount row out as a flex row. */
	flex: 0 0 100%;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
#secondary .widget_price_filter .sz-price__field {
	display: block;
	width: 100%;
	margin: 0;
}
.sz-price__label {
	display: block;
	font-size: 12px;
	color: var(--sz-mute);
}
.sz-price__box {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	align-items: center;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--sz-field);
	border-radius: 6px;
	background: #fff;
}
.sz-price__box:focus-within {
	border-color: var(--sz-navy);
	box-shadow: 0 0 0 1px var(--sz-navy);
}
#secondary .widget_price_filter .sz-price__box input {
	display: block !important;
	/* "999 zł": the unit right after the number where the browser can size a field to its content. */
	flex: 0 1 auto;
	field-sizing: content;
	width: 100%;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: var(--sz-ink);
	border: 0;
	background: none;
	box-shadow: none;
	outline: 0;
}
@supports not (field-sizing: content) {
	#secondary .widget_price_filter .sz-price__box input {
		flex: 1;
	}
}
.sz-price__unit {
	flex: none;
	margin-left: 4px;
	font-size: 14px;
	color: var(--sz-mute);
}

/* "Tylko dostępne" switch under the filters (inc/category-view.php). */
#secondary .sz-stock-filter {
	margin: 0;
	padding: 8px 0;
	border-top: 1px solid var(--sz-line);
}
#secondary .sz-stock-filter .sz-switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 44px;
	font-size: 14px;
	color: var(--sz-ink);
}
#secondary.widget-area .sz-stock-filter .sz-switch:hover {
	color: var(--sz-ink);
}
#secondary .sz-stock-filter .count {
	margin-left: 4px;
	font-size: 13px;
	color: var(--sz-mute);
}
.sz-switch__track {
	position: relative;
	flex: none;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: var(--sz-field);
	transition: background-color 0.15s;
}
.sz-switch__track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(20, 20, 20, 0.25);
	transition: transform 0.15s;
}
.sz-switch[aria-checked="true"] .sz-switch__track {
	background: var(--sz-navy);
}
.sz-switch[aria-checked="true"] .sz-switch__track::after {
	transform: translateX(16px);
}
#secondary .sz-stock-filter .sz-switch:hover .sz-switch__track {
	background: #b3b9c6;
}
#secondary .sz-stock-filter .sz-switch[aria-checked="true"]:hover .sz-switch__track {
	background: var(--sz-navy-dark);
}

/* "Nowości" and "Promocje" lists: the categories widget shows its title ("Nowości w kategoriach", "Promocje w
   kategoriach"), the hubs are group labels, not links. */
.velsor-new-list #secondary .widget_product_categories .widget-title,
.velsor-sale-list #secondary .widget_product_categories .widget-title {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 6px;
	overflow: visible;
	clip: auto;
	white-space: normal;
	font-size: 15px;
	line-height: 22px;
	font-weight: 600;
	color: var(--sz-ink);
}
.velsor-new-list #secondary .widget_product_categories ul.product-categories > li > .sz-cat-label,
.velsor-sale-list #secondary .widget_product_categories ul.product-categories > li > .sz-cat-label {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--sz-ink);
}
.velsor-new-list #secondary .widget_product_categories .count,
.velsor-sale-list #secondary .widget_product_categories .count {
	font-weight: 400;
	color: var(--sz-mute);
}

/* "Promocje" without any sale (decision 40): the sentence, a place for the newsletter form (a placeholder until
   GetResponse is connected) and the newest products in a row with a link to "Nowości". */
.velsor-sale-empty .sz-no-products {
	max-width: 760px;
}
.sz-newsletter-placeholder {
	max-width: 760px;
	margin: 18px 0 0;
	padding: 18px 20px;
	border: 1px dashed #c9ced9;
	border-radius: 8px;
	background: var(--sz-bg2);
}
.sz-newsletter-placeholder p {
	margin: 0;
	font-size: 14px;
	line-height: 21px;
	color: var(--sz-ink2);
}
.sz-newsletter-placeholder__title {
	margin-bottom: 4px !important;
	font-size: 16px !important;
	line-height: 24px !important;
	font-weight: 600;
	color: var(--sz-ink) !important;
}
/* The sign-up form of Velsor Newsletter once GetResponse is set up, in a light box like the band above the footer. */
.sz-newsletter-inline {
	max-width: 760px;
	margin: 18px 0 0;
	padding: 22px 24px;
	border-radius: 10px;
	background: var(--sz-bg2);
}
.sz-earlier__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}
.sz-earlier__head .sz-earlier__title {
	margin-bottom: 0;
}
.sz-earlier__link {
	flex: none;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--sz-navy);
	white-space: nowrap;
}
.sz-earlier__head + ul.products {
	margin-top: 20px;
}
.sz-earlier__lead {
	max-width: 760px;
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 23px;
	color: var(--sz-ink2);
}
.sz-earlier__lead + ul.products {
	margin-top: 20px;
}
/* Phones: the title keeps one line, the link goes under it. */
@media (max-width: 600px) {
	.sz-earlier__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}
}
/* The parent theme sizes the tiles by the "columns-N" body class (the shop's three next to the sidebar); the
   row of four across the full width of the empty "Promocje" page gets the same tile size this way. */
@media (min-width: 993px) {
	.velsor-sale-empty ul.products.columns-4 li.product {
		width: 24.97%;
	}
}

/* ------------------------------------------------------------------
   4. Narrower screens
   ------------------------------------------------------------------ */

/* "Dostępny, 1–2 dni" on tiles narrower than about 260 px: phones, tablets and three tiles next to the sidebar
   on small laptops; "Powiadom mnie" with its bell fits on one line with less padding and a smaller gap. */
@media (max-width: 1199px) {
	.sz-loop-avail__long {
		display: none;
	}
	body ul.products li.product .button.sz-notify {
		padding: 0 6px;
		font-size: 13.5px;
		white-space: nowrap;
	}
	body ul.products li.product .button.sz-notify::before {
		margin-right: 6px;
	}
}

/* Three tiles next to the sidebar on small laptops: names up to 3 lines, as on phones. */
@media (min-width: 993px) and (max-width: 1199px) {
	ul.products li.product .woocommerce-loop-product__title a {
		min-height: 63px;
		-webkit-line-clamp: 3;
	}
}

@media (max-width: 992px) {
	/* Top of the list: smaller title, the description folds to two lines with "Czytaj więcej"
	   (assets/js/category-view.js); the number of products is in the bar. */
	.woocommerce.archive h1.woocommerce-products-header__title {
		font-size: 24px;
		line-height: 30px;
	}
	.woocommerce.archive header.woocommerce-products-header {
		margin-bottom: 14px;
	}
	.woocommerce.archive header.woocommerce-products-header .term-description {
		font-size: 14px;
		line-height: 21px;
	}
	.woocommerce.archive .term-description.sz-clamp p {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.woocommerce.archive .term-description.sz-clamp p,
	.woocommerce.archive .term-description p:has(+ .sz-more) {
		margin-bottom: 0;
	}
	.sz-more {
		margin: 2px 0 0;
		padding: 0;
		font-size: 14px;
		font-weight: 600;
		color: var(--sz-navy);
		background: none;
		border: 0;
		text-decoration: underline;
	}
	.woocommerce.archive .sz-archive-count {
		display: none;
	}

	/* One bar under the description: "Filtry" and "Sortuj: …" side by side, edge to edge, the number of
	   products under it. The bar and the list are items of one flex column, so the sorting form can stand next
	   to the filter button. */
	.woocommerce.archive .site-main {
		display: flex;
		flex-wrap: wrap;
	}
	.woocommerce.archive .site-main > * {
		flex: 0 0 100%;
		min-width: 0;
	}
	.woocommerce.archive .site-main > .shoptimizer-sorting {
		display: contents;
	}
	.woocommerce.archive .shoptimizer-sorting > * {
		flex: 0 0 100%;
		min-width: 0;
		order: 0;
	}
	.woocommerce.archive .site-main > .mobile-filter,
	.woocommerce.archive .shoptimizer-sorting .woocommerce-ordering {
		box-sizing: border-box;
		/* The content has a 15 px gutter. */
		flex-basis: calc(50% + 15px);
		order: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		margin: 0;
		font-size: 14.5px;
		font-weight: 600;
		text-transform: none;
		letter-spacing: 0;
		color: var(--sz-navy);
		background: #fff;
		border: solid var(--sz-line);
		border-width: 1px 0;
	}
	.woocommerce.archive .site-main > .mobile-filter {
		gap: 8px;
		margin-left: -15px;
		padding: 0;
		border-right-width: 1px;
		box-shadow: none;
	}
	/* The theme places the icon absolutely at the left edge. */
	.woocommerce.archive .site-main > .mobile-filter svg {
		position: static;
		margin: 0;
		transform: none;
	}
	.woocommerce.archive .shoptimizer-sorting .woocommerce-ordering {
		margin-right: -15px;
	}
	.woocommerce.archive .shoptimizer-sorting .woocommerce-ordering::before {
		content: "Sortuj:";
		flex: none;
		margin-right: 4px;
	}
	.woocommerce.archive .shoptimizer-sorting .woocommerce-ordering select.orderby {
		width: auto;
		max-width: 60%;
		height: auto;
		padding: 0 14px 0 0;
		font-size: inherit;
		font-weight: inherit;
		text-transform: lowercase;
		color: inherit;
		border: 0;
		background-color: transparent;
		background-position: right center;
		box-shadow: none;
	}
	/* "Sortuj: polecane" in navy, as on the mockup. */
	.sz-sort__value {
		text-transform: lowercase;
		color: inherit;
	}
	.woocommerce.archive .shoptimizer-sorting .woocommerce-result-count {
		order: 2;
		margin: 12px 0 0;
		font-size: 13px;
		color: var(--sz-mute);
	}
	.woocommerce.archive .site-main > .shoptimizer-sorting ~ * {
		order: 3;
	}

	/* Tile: 3 lines of the name, 2 parameter rows, smaller price. */
	ul.products li.product .woocommerce-loop-product__title a {
		min-height: 54px;
		font-size: 13.5px;
		line-height: 18px;
		-webkit-line-clamp: 3;
	}
	ul.products li.product .sz-loop-features {
		min-height: 36px;
		font-size: 12px;
		line-height: 18px;
	}
	ul.products li.product .sz-loop-features li:nth-child(n + 3) {
		display: none;
	}
	ul.products li.product .price {
		font-size: 16px;
	}
	ul.products li.product .sz-loop-avail {
		font-size: 12px;
	}
}

/* ------------------------------------------------------------------
   Chosen filters as labels under the title (every list), and the list whose filters leave nothing
   (inc/category-view.php)
   ------------------------------------------------------------------ */
.sz-applied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 10px 0 4px;
}
.sz-applied__list {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sz-applied__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 8px 0 12px;
	border: 1px solid #dfe3ec;
	border-radius: 6px;
	background: var(--sz-bg2);
	font-family: Inter, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: var(--sz-ink);
	text-decoration: none;
	white-space: nowrap;
}
.sz-applied__chip:hover,
.sz-applied__chip:focus-visible {
	border-color: var(--sz-navy);
	color: var(--sz-ink);
}
.sz-applied__remove {
	font-size: 16px;
	line-height: 1;
	color: var(--sz-ink2);
}
.sz-applied__clear {
	margin-left: 4px;
	font-family: Inter, sans-serif;
	font-size: 13px;
	color: var(--sz-navy);
	text-decoration: underline;
}
.sz-filtered-out {
	margin: 8px 0 24px;
	padding: 20px;
	border: 1px dashed #c9ced9;
	border-radius: 8px;
}
.sz-filtered-out p {
	margin: 0;
}
.sz-filtered-out__title {
	font-family: Poppins, sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--sz-ink);
}
.sz-filtered-out__lead {
	margin-top: 6px !important;
	font-family: Inter, sans-serif;
	font-size: 14px;
	line-height: 21px;
	color: var(--sz-ink2);
}
.sz-filtered-out__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	font-family: Inter, sans-serif;
	font-size: 14px;
}
.sz-filtered-out__list a {
	color: var(--sz-navy);
}
.sz-filtered-out__list strong {
	font-weight: 600;
}

/* ------------------------------------------------------------------
   Reductions (mockup Obnizka-Etykieta, decision 15): the saving next to the price, the Omnibus line under it.
   The line comes from the Omnibus plugin with two wordings; cards narrower than about 240 px show the short one.
   ------------------------------------------------------------------ */
ul.products li.product .price .sz-saved {
	order: -1;
	padding: 2px 7px;
	border-radius: 4px;
	background: #fdecea;
	font-family: Inter, sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	color: var(--sz-accent-strong);
}
/* The unit price under the card price (decision 54), above the Omnibus slot. */
ul.products li.product .sz-loop-unit {
	margin-top: 1px;
	font-size: 12px;
	line-height: 16px;
}
/* Cards of a row keep "Do koszyka" at the bottom whether or not a card has the unit price line: the card is a
   column and the availability line with the button below it takes the free space above itself. */
ul.products li.product:not(.sz-wl-row) {
	display: flex;
	flex-direction: column;
}
ul.products li.product:not(.sz-wl-row) > .woocommerce-card__header {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
}
ul.products li.product:not(.sz-wl-row) > .woocommerce-card__header > .sz-loop-avail {
	margin-top: auto;
	padding-top: 6px;
}
ul.products li.product:not(.sz-wl-row) > .woocommerce-card__header > .sz-loop-avail ~ .button {
	margin-top: 0;
}
ul.products li.product .sz-loop-omnibus {
	min-height: 16px;
	margin-top: 2px;
	font-family: Inter, sans-serif;
	font-size: 11.5px;
	line-height: 16px;
	letter-spacing: -0.15px;
	color: var(--sz-mute);
}
ul.products li.product .sz-loop-omnibus .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: 500;
	color: var(--sz-ink2);
}
.sz-omnibus__short {
	display: none;
}
@media (max-width: 1199px) {
	ul.products li.product .sz-loop-omnibus .sz-omnibus__long {
		display: none;
	}
	ul.products li.product .sz-loop-omnibus .sz-omnibus__short {
		display: inline;
	}
}
@media (max-width: 600px) {
	ul.products li.product .sz-loop-omnibus {
		font-size: 11px;
		line-height: 15px;
	}
}