/* ==========================================================================
   Vikado – menu z wyszukiwarką (pełny ekran)
   ========================================================================== */

.vkd-nav {
	--nav-ease: cubic-bezier(0.23, 1, 0.32, 1);
	--nav-bg: #f7f5f1;
	position: fixed;
	inset: 0;
	z-index: 100000;
	color: var(--vkd-black);
}

.vkd-nav[hidden],
.vkd-nav [hidden] {
	display: none !important;
}

.vkd-nav__scrim {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 260ms ease;
}

.vkd-nav__panel {
	position: absolute;
	inset: 0 0 auto;
	display: flex;
	flex-direction: column;
	max-height: 100dvh;
	height: min(100dvh, 860px);
	background: var(--nav-bg);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: translateY(-14px);
	transition: opacity 240ms ease-out, transform 360ms var(--nav-ease);
}

.vkd-nav.is-open .vkd-nav__scrim {
	opacity: 1;
}

.vkd-nav.is-open .vkd-nav__panel {
	opacity: 1;
	transform: none;
}

body.vkd-nav-open {
	overflow: hidden;
}

body.vkd-nav-open .qlwapp,
body.vkd-nav-open .vkd-pill,
body.vkd-nav-open .dot-nav {
	visibility: hidden;
}

/* Pasek z wyszukiwarką */
.vkd-nav__top {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px clamp(16px, 4vw, 56px);
	border-bottom: 1px solid var(--vkd-line);
}

.vkd-nav__search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: var(--vkd-muted);
	cursor: text;
}

.vkd-nav__search input[type="search"] {
	flex: 1;
	height: 52px;
	padding: 0;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--vkd-black);
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: 300;
	letter-spacing: -0.01em;
	outline: none;
}

.vkd-nav__search input::placeholder {
	color: #9a958e;
}

.vkd-nav__search input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.vkd-nav__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	border: 1px solid var(--vkd-line) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--vkd-black) !important;
	box-shadow: none;
	transition: transform 160ms ease-out, border-color 200ms ease;
}

.vkd-nav__close:active {
	transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
	.vkd-nav__close:hover {
		border-color: var(--vkd-black) !important;
	}
}

/* Treść: kategorie | szczegóły */
.vkd-nav__body {
	flex: 1;
	display: grid;
	grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
	min-height: 0;
}

.vkd-nav__cats {
	padding: 28px clamp(16px, 4vw, 56px) 28px;
	border-right: 1px solid var(--vkd-line);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.vkd-nav__section,
.vkd-nav__label {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vkd-muted);
}

.vkd-nav__cats ul {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.vkd-nav__cat {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 5px 0;
	color: #8b867f !important;
	font-size: clamp(19px, 1.5vw, 23px);
	white-space: nowrap;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-decoration: none !important;
	transition: color 160ms ease;
}

.vkd-nav__cat sup {
	top: -0.7em;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--vkd-muted);
	font-variant-numeric: tabular-nums;
}

.vkd-nav__chev {
	margin-left: auto;
	align-self: center;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 160ms ease, transform 220ms var(--nav-ease);
}

.vkd-nav__cat.is-active,
.vkd-nav__cat:focus-visible {
	color: var(--vkd-black) !important;
}

.vkd-nav__cat.is-active .vkd-nav__chev {
	opacity: 1;
	transform: none;
}

@media (hover: hover) and (pointer: fine) {
	.vkd-nav__cat:hover {
		color: var(--vkd-black) !important;
	}
}

.vkd-nav__extra {
	padding-top: 18px !important;
	border-top: 1px solid var(--vkd-line);
}

.vkd-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 8px;
	border-radius: 50%;
	background: #3fae6a;
	box-shadow: 0 0 0 3px rgba(63, 174, 106, 0.16);
	vertical-align: 0.15em;
}

/* Szczegóły kategorii */
.vkd-nav__detail {
	position: relative;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 28px clamp(16px, 4vw, 56px) 40px;
}

.vkd-nav__pane {
	animation: vkd-nav-in 280ms var(--nav-ease);
}

@keyframes vkd-nav-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

.vkd-nav__back {
	display: none;
}

.vkd-nav__pane-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}

.vkd-nav__pane-head h2 {
	margin: 0;
	font-size: clamp(30px, 3.2vw, 48px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.vkd-nav__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--vkd-black);
	border-radius: 999px;
	color: var(--vkd-black) !important;
	font-size: 13px;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background-color 200ms ease, color 200ms ease, transform 160ms ease-out;
}

.vkd-nav__all:active {
	transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
	.vkd-nav__all:hover {
		background: var(--vkd-black);
		color: #fff !important;
	}
}

.vkd-nav__cols {
	display: grid;
	grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(220px, 300px);
	gap: clamp(24px, 3vw, 48px);
	align-items: start;
}

.vkd-nav__cols:not(:has(.vkd-nav__subs)) {
	grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
}

.vkd-nav__subs,
.vkd-nav__models {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vkd-nav__subs a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--vkd-line);
	color: var(--vkd-ink) !important;
	font-size: 15px;
	text-decoration: none !important;
	transition: color 160ms ease, padding 220ms var(--nav-ease);
}

.vkd-nav__subs a span {
	color: var(--vkd-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
	.vkd-nav__subs a:hover {
		padding-left: 6px;
		color: var(--vkd-black) !important;
	}
}

.vkd-nav__models {
	columns: 3 150px;
	column-gap: 28px;
}

.vkd-nav__models li {
	break-inside: avoid;
}

.vkd-nav__models a {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 8px;
	padding: 6px 0;
	color: var(--vkd-black) !important;
	text-decoration: none !important;
}

.vkd-nav__models strong {
	font-size: 15px;
	font-weight: 400;
}

.vkd-nav__models small {
	font-size: 12px;
	color: var(--vkd-muted);
}

.vkd-nav__models .vkd-dot {
	margin: 0;
	align-self: center;
}

@media (hover: hover) and (pointer: fine) {
	.vkd-nav__models a:hover strong {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

.vkd-nav__feature {
	display: block;
	color: var(--vkd-black) !important;
	text-decoration: none !important;
}

.vkd-nav__feature-img {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--vkd-stone);
}

.vkd-nav__feature-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--nav-ease);
}

@media (hover: hover) and (pointer: fine) {
	.vkd-nav__feature:hover img {
		transform: scale(1.04);
	}
}

.vkd-nav__feature-cap {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-top: 12px;
	font-size: 14px;
}

.vkd-nav__feature-cap small {
	color: var(--vkd-muted);
	font-size: 13px;
}

.vkd-nav__lede {
	max-width: 560px;
	margin: -12px 0 28px;
	color: var(--vkd-muted);
	font-size: 15px;
	line-height: 1.6;
}

.vkd-nav__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 24px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vkd-nav__cards a {
	display: grid;
	gap: 4px;
	color: var(--vkd-black) !important;
	text-decoration: none !important;
}

.vkd-nav__card-img {
	display: block;
	aspect-ratio: 4 / 3;
	margin-bottom: 8px;
	overflow: hidden;
	background: var(--vkd-stone);
}

.vkd-nav__card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

.vkd-nav__cards strong {
	font-size: 14px;
	font-weight: 400;
}

.vkd-nav__cards small {
	color: var(--vkd-muted);
	font-size: 13px;
}

/* A–Z */
.vkd-nav__letters {
	position: sticky;
	top: -28px;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0 0 24px;
	padding: 10px 0;
	background: var(--nav-bg);
}

.vkd-nav__letters a {
	display: grid;
	place-items: center;
	min-width: 32px;
	height: 32px;
	border-radius: 999px;
	color: var(--vkd-ink) !important;
	font-size: 13px;
	text-decoration: none !important;
	transition: background-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.vkd-nav__letters a:hover {
		background: #fff;
	}
}

.vkd-nav__az {
	columns: 4 180px;
	column-gap: 32px;
}

.vkd-nav__az-group {
	break-inside: avoid;
	margin-bottom: 22px;
	scroll-margin-top: 60px;
}

.vkd-nav__az-letter {
	margin: 0 0 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--vkd-black);
	font-size: 13px;
	font-weight: 500;
}

.vkd-nav__az ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vkd-nav__az a {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 0;
	color: var(--vkd-black) !important;
	text-decoration: none !important;
}

.vkd-nav__az strong {
	font-size: 14px;
	font-weight: 400;
}

.vkd-nav__az small {
	color: var(--vkd-muted);
	font-size: 11.5px;
	text-align: right;
}

/* Wyniki wyszukiwania */
.vkd-nav__results {
	animation: vkd-nav-in 220ms var(--nav-ease);
}

.vkd-nav__results h3 {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vkd-muted);
}

.vkd-nav__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.vkd-nav__chips a {
	display: inline-flex;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid var(--vkd-line);
	border-radius: 999px;
	background: #fff;
	color: var(--vkd-black) !important;
	font-size: 14px;
	text-decoration: none !important;
}

.vkd-nav__chips a span {
	color: var(--vkd-muted);
}

.vkd-nav__hits {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 4px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vkd-nav__hit {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 8px;
	margin: 0 -8px;
	border-radius: 10px;
	color: var(--vkd-black) !important;
	text-decoration: none !important;
	transition: background-color 120ms ease;
}

.vkd-nav__hit.is-focus,
.vkd-nav__hit:focus-visible {
	background: #fff;
	outline: none;
}

@media (hover: hover) and (pointer: fine) {
	.vkd-nav__hit:hover {
		background: #fff;
	}
}

.vkd-nav__hit img {
	width: 72px;
	height: 54px;
	object-fit: cover;
	background: var(--vkd-stone);
	mix-blend-mode: multiply;
}

.vkd-nav__hit b {
	display: block;
	font-size: 15px;
	font-weight: 400;
}

.vkd-nav__hit mark {
	padding: 0;
	background: none;
	color: inherit;
	font-weight: 600;
}

.vkd-nav__hit small {
	color: var(--vkd-muted);
	font-size: 12.5px;
}

.vkd-nav__hit em {
	font-style: normal;
	font-size: 13px;
	color: var(--vkd-ink);
	white-space: nowrap;
}

.vkd-nav__empty {
	max-width: 520px;
	color: var(--vkd-muted);
	font-size: 16px;
	line-height: 1.6;
}

/* Stopka menu */
.vkd-nav__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 14px clamp(16px, 4vw, 56px);
	border-top: 1px solid var(--vkd-line);
	font-size: 13px;
}

.vkd-nav__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vkd-nav__foot a {
	color: var(--vkd-black) !important;
}

.vkd-nav__contact {
	margin: 0;
	color: var(--vkd-muted);
}

/* ------------------------------------------------------------- telefon */
@media (max-width: 900px) {
	.vkd-nav__panel {
		height: 100dvh;
		transform: translateY(12px);
	}

	.vkd-nav__top {
		padding: 10px 16px;
	}

	.vkd-nav__search input[type="search"] {
		height: 46px;
		font-size: 17px;
	}

	.vkd-nav__body {
		grid-template-columns: 1fr;
		position: relative;
		overflow: hidden;
	}

	.vkd-nav__cats {
		padding: 20px 16px;
		border-right: 0;
	}

	.vkd-nav__cat {
		padding: 8px 0;
		color: var(--vkd-black) !important;
		font-size: 24px;
	}

	.vkd-nav__chev {
		opacity: 0.4;
		transform: none;
	}

	.vkd-nav__detail {
		position: absolute;
		inset: 0;
		padding: 16px 16px 32px;
		background: var(--nav-bg);
		transform: translateX(100%);
		transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
		visibility: hidden;
	}

	.vkd-nav.is-drill .vkd-nav__detail,
	.vkd-nav.is-searching .vkd-nav__detail {
		transform: none;
		visibility: visible;
	}

	.vkd-nav__back {
		display: inline-flex;
		min-height: 0;
		margin: 0 0 16px;
		padding: 8px 0;
		border: 0;
		background: none !important;
		color: var(--vkd-muted) !important;
		font-size: 14px;
		box-shadow: none;
	}

	.vkd-nav__pane-head {
		flex-direction: column;
		gap: 14px;
	}

	.vkd-nav__cols,
	.vkd-nav__cols:not(:has(.vkd-nav__subs)) {
		grid-template-columns: 1fr;
	}

	.vkd-nav__feature {
		display: none;
	}

	.vkd-nav__models {
		columns: 2;
	}

	.vkd-nav__az {
		columns: 2;
	}

	.vkd-nav__letters {
		top: -16px;
	}

	.vkd-nav__hits {
		grid-template-columns: 1fr;
	}

	.vkd-nav__foot {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vkd-nav__panel,
	.vkd-nav__detail {
		transform: none !important;
		transition: opacity 200ms ease;
	}

	.vkd-nav__pane,
	.vkd-nav__results {
		animation: none;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.vkd-nav__scrim {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(17, 17, 17, 0.6);
	}
}

/* Stary panel WoodMart nie jest już potrzebny */
body.vkd-has-nav .mobile-nav,
body.vkd-has-nav .wd-close-side {
	display: none !important;
}

/* ----------------------------------------------- przełącznik języka IT | DE */
.vkd-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1;
}

.vkd-lang a {
	display: grid;
	place-items: center;
	min-width: 30px;
	height: 24px;
	padding: 0 6px;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.72) !important;
	text-decoration: none !important;
	transition: background-color 200ms ease, color 200ms ease;
}

.vkd-lang a.is-active {
	background: #fff;
	color: #111 !important;
}

@media (hover: hover) and (pointer: fine) {
	.vkd-lang a:not(.is-active):hover {
		color: #fff !important;
	}
}

.vkd-lang--header {
	margin-right: 14px;
}

/* Na jasnym tle (menu, stopka jasna) */
.vkd-nav__foot .vkd-lang {
	border-color: var(--vkd-line);
}

.vkd-nav__foot .vkd-lang a {
	color: var(--vkd-muted) !important;
}

.vkd-nav__foot .vkd-lang a.is-active {
	background: #111;
	color: #fff !important;
}

@media (max-width: 767px) {
	.vkd-lang--header {
		margin-right: 6px;
	}

	.vkd-lang a {
		min-width: 26px;
		height: 22px;
		padding: 0 4px;
	}
}

/* Stopka: przełącznik nie rozciąga się w kolumnie na telefonie */
.vkd-footer__legal .vkd-lang,
.vkd-footer__bottom .vkd-lang {
	align-self: flex-start;
	width: auto;
}