/* ----------- versions */

.listing-list-products {
	.dpf-results {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(217px, 1fr));
		gap: 16px;

		@media (min-width: 768px) {
			grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
		}

		@media (min-width: 1600px) {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.dpf-pagination {
		grid-column: 1/-1;
	}
}


.listing-secondary {

	/* --- Sidebar (lewa kolumna: picker pojazdu + kategorie) --- */
	.listing-secondary-sidebar {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-bottom: 16px;
	}

	/* --- Picker pojazdu (zakładki „Wyszukaj" / „Mój garaż") --- */
	.listing-secondary-vehicle {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 16px;
		border-radius: var(--border-radius);
		background-color: var(--light-color);
	}

	.listing-secondary-vehicle-tabs {
		display: flex;
		gap: 16px;
	}

	.listing-secondary-vehicle-tab {
		flex: 1 1 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 10px 16px;
		border: 1px solid var(--grey-color);
		border-radius: var(--border-radius);
		background: transparent;
		color: var(--darkgrey-color);
		cursor: pointer;
		transition: background-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;

		@media (hover: hover) {
			&:hover:not(.is-active) {
				opacity: 0.6;
			}
		}

		&.is-active {
			background-color: var(--darkgrey-color);
			border-color: var(--darkgrey-color);
			color: var(--white-color);
		}
	}

	.listing-secondary-vehicle-panel[hidden] {
		display: none;
	}

	/* Reset komponentu diagram-filter (domyślnie ciemny) do jasnego sidebaru */
	.listing-secondary-vehicle {
		.diagram-filter {
			background-color: transparent;
		}

		.diagram-filter-wrapper {
			padding: 0;
		}

		.diagram-filter-main {
			gap: 12px;
			padding: 0;
			border-radius: 0;
			box-shadow: none;
			background: transparent;
		}

		.diagram-filter-main-form {
			flex-direction: column;
			gap: 12px;
		}

		.diagram-filter-main-buttons .btn {
			width: 100%;
		}

		.dropdown-toggle {
			background: var(--white-color);
		}

		.dropdown.is-open .dropdown-toggle {
			background: var(--grey-color);
		}
	}

	/* Zakładka „Mój garaż" */
	.listing-secondary-vehicle-garage-form .dropdown-toggle {
		background: var(--white-color);
	}

	.listing-secondary-vehicle-empty {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 16px;
		border-radius: var(--border-radius);
		background-color: var(--white-color);
		color: var(--darkgrey-color);
	}

	.listing-secondary-vehicle-empty-link {
		color: var(--red-color);
		text-decoration: underline;
		text-underline-offset: 2px;
		transition: opacity 0.2s ease-out;

		@media (hover: hover) {
			&:hover {
				opacity: 0.7;
			}
		}
	}

	/* --- Kategorie --- */
	.listing-secondary-categories {
		border: 1px solid var(--light-color);
		border-radius: var(--border-radius);

		.listing-secondary-categories-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			width: 100%;
			padding: 16px 10px;
			background: transparent;
			text-align: left;
			cursor: pointer;
			transition: opacity 0.2s ease-out;

			@media (hover: hover) {
				&:hover {
					opacity: 0.7;
				}
			}

			&::after {
				content: '';
				background-image: url('./svg/icon-arrow-down-black.svg');
				background-size: contain;
				background-repeat: no-repeat;
				width: 16px;
				height: 16px;
				transition: transform 0.2s ease;
			}
		}

		.listing-secondary-categories-menu {
			height: 0;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			padding: 0 10px;
			transition: height 0.28s ease-out;

			.listing-secondary-categories-item {
				margin-bottom: 10px;

				&:last-child {
					margin-bottom: 16px;
				}

				&.active {
					color: var(--red-color);
				}
			}
		}

		&.is-open {
			.listing-secondary-categories-title::after {
				transform: rotate(-180deg);
			}
		}
	}

	/* --- Toolbar (widok secondary) --- */
	.dpf-layout__toolbar--secondary {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
	}

	.dpf-layout__toolbar-bar {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.dpf-layout__toolbar-actions {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	/* Przycisk-ikona rozwijania filtrów */
	.listing-secondary-searchbar-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		min-width: 48px;
		height: 48px;
		padding: 12px;
		border: none;
		border-radius: 50%;
		background-color: var(--white-color);
		cursor: pointer;
		transition: background-color 0.2s ease-in-out;

		svg {
			width: 100%;
			height: 100%;
		}

		rect,
		path {
			transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
		}
	}

	.dpf-layout__toolbar.is-expanded .listing-secondary-searchbar-toggle {
		background-color: var(--darkgrey-color);

		[fill="white"] {
			fill: var(--darkgrey-color);
		}

		[stroke="#26272C"] {
			stroke: var(--white-color);
		}
	}

	/* Przycisk „Filtruj akcesoria" */
	.listing-secondary-searchbar-apply {
		flex: 1;
	}

	/* Panel rozwijanych filtrów (przenoszony sidebar dpf) */
	.listing-secondary-searchbar-filters {
		width: 100%;
		height: 0;
		overflow: hidden;
		transition: height 0.38s ease-out;
	}

	.dpf-layout__toolbar.is-expanded .listing-secondary-searchbar-filters {
		overflow: visible;
	}

	/* W widoku secondary layout jest jednokolumnowy — filtry przenosimy do
	   rozwijanego panelu w toolbarze, a natywny sidebar / przycisk mobilny chowamy. */
	.dpf-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.dpf-layout__mobile-open,
	.dpf-layout__sidebar {
		display: none;
	}

	.listing-secondary-searchbar-filters .dpf-layout__sidebar {
		display: block;
		width: 100%;
		position: static;
		max-height: none;
		overflow: visible;
		margin: 0;
		padding: 0;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		background-color: transparent;

		.dpf-actions,
		.dpf-layout__header {
			display: none;
		}

		.dpf-filters {
			padding-top: 16px;
		}

		.dpf-form {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: end;
			gap: 12px;
		}

		.dpf-filter-group.dpf-filter-price {
			width: min(100%, 380px);
			padding: 0;
			border: 0;

			.dpf-filter-title {
				pointer-events: none;

				&::after {
					display: none;
				}
			}

			.dpf-filter-body {
				max-height: none !important;
				overflow: visible;
			}

			input[type="number"] {
				background-color: var(--white-color);
			}
		}

		.dpf-filter-group-wrapper {
			display: flex;
			flex-direction: column;
			gap: 16px;
			width: min(100%, 250px);
		}

		.dpf-filter-group-dropdown .dropdown-toggle {
			background: var(--white-color);
			text-align: left;
		}

		.dpf-filter-group-dropdown.is-open .dropdown-toggle {
			background: var(--grey-color);
		}

		.dpf-filter-group-dropdown.is-disabled .dropdown-toggle {
			opacity: 0.55;
			cursor: not-allowed;
		}

		.dpf-filter-group-dropdown .dpf-filter-options {
			gap: 0;
			padding-top: 0;

			.dropdown-option {
				opacity: 1;
			}

			label {
				display: flex;
				align-items: center;
				gap: 10px;
				cursor: pointer;
			}
		}
	}

}

.dpf-layout:has(.dpf-layout__rent-prices-btn) {
	.dpf-layout__rent-prices-btn {
		width: 100%;

		.component-button {
			width: 100%;
		}
	}

	/* Prices popup */
	.dpf-layout__rent-prices-popup {
		position: fixed;
		inset: 0;
		z-index: 9999;
		display: block;
		width: fit-content;
		height: fit-content;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.2s ease-out;

		&.is-open {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;

			.dpf-layout__rent-prices-popup-dialog {
				transform: scale(1);
			}

			&~.dpf-layout__rent-prices-popup-backdrop {
				opacity: 1;
				pointer-events: auto;
			}
		}

		.dpf-layout__rent-prices-popup-dialog {
			position: relative;
			z-index: 1;
			display: flex;
			flex-direction: column;
			gap: 20px;
			width: min(1100px, calc(100vw - 30px));
			height: min(800px, calc(100vh - 150px));
			max-width: 716px;
			padding: 64px 64px 64px 50px;
			background: var(--white-color);
			border-radius: 16px;
			overflow: auto;
			transition: transform 0.2s ease-out;
			transform: scale(0.9);
		}

		.dpf-layout__rent-prices-popup-dialog-close {
			position: absolute;
			top: 20px;
			right: 20px;
			z-index: 5;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50px;
			height: 50px;
			padding: 16px;
			border-radius: 50%;
			background: var(--light-color);
			border: none;
			cursor: pointer;
			transition: opacity 0.3s ease;

			&:hover {
				opacity: 0.6;
			}
		}

		.dpf-layout__rent-prices-popup-dialog-heading {
			display: flex;
			min-height: 76px;
			max-width: calc(100% - 70px);
		}

		.dpf-layout__rent-prices-popup-dialog-list {
			display: flex;
			flex-direction: column;

			.dpf-layout__rent-prices-popup-dialog-list-heading {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-bottom: 16px;
				color: var(--red-color);
			}

			.dpf-layout__rent-prices-popup-dialog-list-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				padding: 10px 0;
				border-bottom: 1px solid var(--light-color);

				.dpf-layout__rent-prices-popup-dialog-list-item-price {
					text-align: right;
				}
			}
		}

		.dpf-layout__rent-prices-popup-dialog-additional {
			margin-top: 16px;
		}

		.dpf-layout__rent-prices-popup-dialog-highlight {
			margin-top: 16px;
			padding: 30px;
			border-radius: var(--border-radius);
			background: var(--light-color);
			text-align: center;
		}

	}

	.dpf-layout__rent-prices-popup-backdrop {
		position: fixed;
		z-index: 9998;
		inset: 0;
		background: rgba(0, 0, 0, 0.7);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s ease-out;
	}
}




/* ----------- Layout (sidebar + main) ----------- */

.dpf-layout {
	position: relative;
	display: grid;
	grid-template-columns: minmax(300px, 348px) minmax(400px, 1fr);
	gap: 16px;
	align-items: flex-start;

	@media (max-width: 768px) {
		grid-template-columns: 1fr;
	}
}

.dpf-layout__sidebar {
	padding: 16px;
	border-radius: var(--border-radius);
	border: 1px solid var(--light-color);
}

.dpf-layout__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 32px;

	.dpf-layout__header-icon {
		width: 24px;
		height: 24px;
		min-width: 24px;
	}
}

.dpf-layout__mobile-close,
.dpf-layout__mobile-open {
	display: none;
}

.dpf-layout__main {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100%;
}

.dpf-layout__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
	border-radius: var(--border-radius);
	background-color: var(--light-color);
	padding: 16px;
}

.dpf-layout__toolbar-count {
	color: var(--darkgrey-color);
}

.dpf-layout__toolbar-count-number {
	margin-right: 0.1em;
}

.dpf-layout__toolbar-sort {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dpf-layout__toolbar-sort-label {
	color: var(--darkgrey-color);
	white-space: nowrap;
}

.dpf-layout__toolbar .dropdown {
	min-width: 250px;
}

.dpf-layout__toolbar .dropdown-toggle {
	background: var(--white-color);
}

.dpf-layout__toolbar .dropdown.is-open .dropdown-toggle {
	background: var(--grey-color);
}

.dpf-layout__toolbar .dropdown.is-disabled .dropdown-toggle {
	opacity: 0.55;
	cursor: not-allowed;
}

.dpf-layout__active-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin-bottom: 16px;
	padding: 10px;
	background-color: rgba(242, 118, 32, 0.1);
	border-radius: var(--border-radius);

}

.dpf-layout__active-filters[hidden] {
	display: none;
}

.dpf-layout__active-label {
	color: rgba(242, 118, 32, 1);
}

.dpf-layout__active-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.dpf-active-filter {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px 6px 10px;
	border-radius: 100px;
	background: rgba(242, 118, 32, 1);
	color: var(--white-color);
	cursor: pointer;
	transition: opacity 0.2s ease-out;

	&:hover {
		opacity: 0.75;
	}
}

.dpf-active-filter__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	min-width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--white-color);
	background-image: url('./svg/icon-close.svg');
	background-size: 8px;
	background-repeat: no-repeat;
	background-position: center;
}

.dpf-active-filter__label {
	font-weight: var(--fw-light);
	font-size: var(--font-size-body-caption);
	line-height: var(--font-line-height-body-caption-line);
}

.dpf-layout__active-clear {
	border: none;
	background: transparent;
	color: var(--darkgrey-color);
	cursor: pointer;
	transition: opacity 0.2s ease-out;
}

.dpf-layout__active-clear:hover {
	opacity: 0.75;
}

.dpf-results {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	min-height: 80px;
}

/* ----------- Filters ----------- */

.dpf-filters {
	position: relative;
	transition: opacity 0.2s ease;
}

.dpf-filters.dpf-loading,
[data-dpf-results].dpf-loading {
	opacity: 0.6;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.dpf-filters .dpf-form {
	display: flex;
	flex-direction: column;
}

/* ----------- Filter group (details/summary) ----------- */

.dpf-filter-group {
	padding: 16px 0;
	border-bottom: 1px solid var(--light-color);

	&:first-of-type {
		padding-top: 0;
	}
}

.dpf-filter-title {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	user-select: none;
}

.dpf-filter-title::-webkit-details-marker {
	display: none;
}

.dpf-filter-title::after {
	content: '';
	background-image: url('./svg/icon-arrow-down-black.svg');
	background-size: contain;
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

.dpf-filter-group:not([open]) .dpf-filter-title::after {
	transform: rotate(-180deg);
}

.dpf-filter-body {
	transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: max-height;
	max-height: 0;
	overflow: hidden;
}

/* ===================== Reveal opcji z animacją ===================== */

.dpf-filter-option {
	transition: opacity 0.25s ease-out;
	opacity: 1;
}

/* Stan startowy animacji reveal */
.dpf-filter-option.is-revealing {
	opacity: 0;
}


/* ----------- Checkboxy ----------- */

.dpf-filter-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 1px;
	padding-top: 16px;
}

.dpf-filter-option label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.dpf-filter-options-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 16px auto 0;
	background: transparent;
	color: var(--red-color);
	cursor: pointer;
}

.dpf-filter-options-more::after {
	content: '';
	background-image: url('./svg/icon-arrow-down-red.svg');
	background-size: contain;
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

.dpf-filter-options-more[hidden] {
	display: none;
}

.dpf-filter-empty {
	color: var(--grey-color);
}

/* ----------- Cena ----------- */

.dpf-price-inputs {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

.dpf-price-inputs label {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.dpf-price-label {
	position: absolute;
	opacity: 0.5;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.dpf-price-inputs input[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;

	&::-webkit-inner-spin-button,
	&::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	width: 100%;
	padding: 14px 16px;
	background: var(--light-color);
	border-radius: 999px;
	text-align: right;
	font-size: var(--font-size-body-md);
	font-weight: var(--fw-regular);
	line-height: var(--font-line-height-body-md-line);
	color: var(--darkgrey-color);
	outline: none;
}

.dpf-price-separator {
	display: block;
	min-width: 16px;
	height: 1px;
	background-color: var(--darkgrey-color);
}

/* ----------- Akcje ----------- */

.dpf-actions {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 24px;
}

.dpf-btn {
	width: 100%;
}

/* ----------- Pagination ----------- */

.dpf-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	align-items: center;
	padding-top: 20px;
	margin-top: auto;
}

.dpf-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 48px;
	height: 48px;
	padding: 13px 20px;
	border: none;
	border-radius: var(--border-radius);
	background: var(--light-color);
	color: var(--darkgrey-color);
	font-size: var(--font-size-body-md);
	font-weight: var(--fw-regular);
	line-height: var(--font-line-height-body-md-line);
	text-decoration: none;
	transition: all 0.2s ease-out;

	&:hover {
		opacity: 0.7;
	}
}

.dpf-pagination__current {
	background-color: var(--darkgrey-color);
	color: var(--white-color);
	pointer-events: none;
	opacity: 1 !important;
}

.dpf-pagination__dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 36px;
	color: var(--darkgrey-color);
}

.dpf-no-results {
	margin-top: 30px;
	color: var(--darkgrey-color);
	opacity: 0.7;
}

@media (max-width: 899px) {

	.dpf-layout__active-filters {
		padding: 16px;
	}

	.dpf-layout__toolbar {
		flex-direction: column;
		align-items: flex-start;
	}

	.dpf-layout__toolbar-sort {
		width: 100%;
	}

	.dpf-layout__toolbar .dropdown {
		width: 100%;
		min-width: 0;
	}

	.dpf-pagination__text {
		display: none;
	}

}

@media (max-width: 767px) {

	html.dpf-mobile-scroll-lock,
	body.dpf-mobile-scroll-lock {
		overflow: hidden;
	}

	.dpf-layout__mobile-open {
		display: flex;
		width: 100%;
		margin-bottom: 16px;
	}

	.dpf-layout__sidebar {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		position: fixed;
		bottom: 0;
		left: 0;
		bottom: 0;
		z-index: 1000;
		width: 100vw;
		max-height: 100dvh;
		height: fit-content;
		padding: 10px;
		padding-bottom: 0;
		padding-top: 0;
		border-top-left-radius: var(--border-radius);
		border-top-right-radius: var(--border-radius);
		background-color: var(--white-color);
		overflow-y: auto;
		overflow-x: hidden;
		transform: translateY(20px);
		transition: opacity 0.25s ease-out, visibility 0.25s ease-out, transform 0.25s ease-out;
		box-shadow: 0px 0px 23.1px 0 rgba(0, 0, 0, 0.45);


		.dpf-layout__header {
			position: sticky;
			top: 0;
			z-index: 5;
			margin: 0 -10px 24px;
			padding: 10px;
			background-color: var(--white-color);
		}

		.dpf-layout__header-title {
			flex: 1 1 auto;
		}

		.dpf-layout__mobile-close {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 38px;
			min-width: 38px;
			height: 38px;
			border: 1px solid var(--light-color);
			border-radius: 999px;
			background: var(--white-color);
			color: var(--darkgrey-color);
			cursor: pointer;
			padding: 0;

			span {
				display: inline-flex;
				width: 14px;
				height: 14px;
			}

			svg {
				width: 100%;
				height: 100%;
			}
		}


		.dpf-actions {
			position: sticky;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1000;
			flex-direction: row;
			width: 100vw;
			margin: 0;
			margin-left: -10px;
			padding: 16px 10px;
			box-shadow: 0px 0px 23.1px 0px rgba(0, 0, 0, 0.15);
			background-color: var(--white-color);
		}
	}

	.dpf-layout.dpf-layout--filters-open {
		.dpf-layout__sidebar {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
			transform: translateY(0);
		}
	}
}


@media screen and (max-width: 639px) {
	.dpf-layout:has(.dpf-layout__rent-prices-btn) {
		.dpf-layout__rent-prices-popup {
			.dpf-layout__rent-prices-popup-dialog {
				gap: 16px;
				padding: 30px 30px 30px 20px;
			}

			.dpf-layout__rent-prices-popup-dialog-close {
				width: 40px;
				height: 40px;
				padding: 12px;
			}
		}
	}
}

@media (min-width: 768px) {
	.listing-secondary {

		.listing-secondary-categories {

			.listing-secondary-categories-title {
				padding: 16px;
			}

			.listing-secondary-categories-menu {
				padding: 0 16px;
			}
		}

		.listing-secondary-vehicle {
			padding: 20px;
		}

		/* Toolbar zostaje kolumną (pasek + panel filtrów), a sam pasek staje się rzędem */
		.dpf-layout__toolbar-bar {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			gap: 12px 16px;
		}

		.dpf-layout__toolbar-count {
			margin-right: auto;
		}

		.dpf-layout__toolbar-sort {
			width: auto;
		}

		.dpf-layout__toolbar .dropdown {
			width: auto;
			min-width: 220px;
		}

		.listing-secondary-searchbar-apply {
			flex: 0 0 auto;
		}

	}

	.dpf-layout:has(.dpf-layout__rent-prices-btn) {
		grid-template-rows: auto 1fr;

		.dpf-layout__rent-prices-btn {
			grid-column: 1/2;
			grid-row: 1/2;
			padding: 16px;
			border-radius: var(--border-radius);
			border: 1px solid var(--light-color);
		}

		.dpf-layout__sidebar {
			grid-column: 1/2;
			grid-row: 2/3;
		}

		.dpf-layout__main {
			grid-column: 2/3;
			grid-row: 1/-1;
		}

		.dpf-layout__rent-prices-popup {
			.dpf-layout__rent-prices-popup-dialog {
				width: min(1100px, calc(100vw - 150px));
			}
		}
	}
}

@media (min-width: 900px) {


	.listing-secondary {
		position: relative;
		display: grid;
		grid-template-columns: minmax(200px, 348px) minmax(500px, 1fr);
		gap: 16px;
		align-items: flex-start;

		/* Toolbar zostaje kolumną (pasek + panel filtrów), a sam pasek staje się rzędem */
		.dpf-layout__toolbar-bar {
			flex-direction: column;
			align-items: center;
			gap: 12px 16px;
		}

		.dpf-layout__toolbar-count {
			margin-right: auto;
		}

		.dpf-layout__toolbar-actions,
		.dpf-layout__toolbar-sort {
			width: 100%;
		}

		.dpf-layout__toolbar .dropdown {
			width: 100%;
			min-width: 220px;
		}

		.listing-secondary-searchbar-apply {
			flex: 1;
		}


		.listing-secondary-categories {
			height: fit-content !important;

			.listing-secondary-categories-title {
				pointer-events: none;

				&::after {
					display: none;
				}
			}

			.listing-secondary-categories-menu {
				height: inherit !important;
			}
		}

		/* Sidebar w gridzie nie potrzebuje dolnego marginesu */
		.listing-secondary-sidebar {
			margin-bottom: 0;
		}
	}
}

@media (min-width: 1100px) {
	.listing-secondary {
		.dpf-layout__toolbar-bar {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			gap: 12px 16px;
		}
		.dpf-layout__toolbar-count {
			margin-right: auto;
		}

		.dpf-layout__toolbar-actions,
		.dpf-layout__toolbar-sort {
			width: auto;
		}

		.dpf-layout__toolbar .dropdown {
			width: auto;
			min-width: 220px;
		}

		.listing-secondary-searchbar-apply {
			flex: 0 0 auto;
		}
	}
}