/**
 * WOM Pytania - responsywne menu Woodmart.
 * Etap 1: zmniejsza odstepy miedzy pozycjami menu (globalne overrides).
 * Etap 2: gdy menu nadal nie miesci sie (wrap albo overflow), wymusza hamburger.
 * Enqueue globalnie.
 */

/* --- Etap 1: kompaktowe odstepy w menu glownym Woodmart --- */
.wd-header-main-nav .wd-nav-main > li > a,
.wd-header-main-nav .wd-nav-secondary > li > a,
.whb-general-header .wd-nav > li > a {
	margin: 0 8px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Na srednich ekranach dodatkowo zmniejszamy odstepy i font-size zeby zmiescic 8 pozycji */
@media (max-width: 1500px) {
	.wd-header-main-nav .wd-nav-main > li > a,
	.wd-header-main-nav .wd-nav-secondary > li > a,
	.whb-general-header .wd-nav > li > a {
		margin: 0 5px !important;
		font-size: 15px !important;
		letter-spacing: 0.01em !important;
	}
}

@media (max-width: 1350px) {
	.wd-header-main-nav .wd-nav-main > li > a,
	.wd-header-main-nav .wd-nav-secondary > li > a,
	.whb-general-header .wd-nav > li > a {
		margin: 0 3px !important;
		font-size: 14px !important;
	}
}

/* Zapobiegamy wrap: jesli mimo compact odstepow nie mieszcza sie, JS zdecyduje o hamburger */
.wd-header-main-nav .wd-nav-main,
.wd-header-main-nav .wd-nav-secondary,
.whb-general-header .wd-nav {
	flex-wrap: nowrap !important;
}

/* --- Etap 2: fallback CSS - hamburger ponizej 1100px (safety net) --- */
@media (max-width: 1100px) {
	body:not(.wom-menu-forced-desktop) .whb-visible-lg {
		display: none !important;
	}
	body:not(.wom-menu-forced-desktop) .whb-hidden-lg {
		display: flex !important;
	}
	/* Woodmart mobile columns muszą być widoczne */
	body:not(.wom-menu-forced-desktop) .whb-mobile-left,
	body:not(.wom-menu-forced-desktop) .whb-mobile-center,
	body:not(.wom-menu-forced-desktop) .whb-mobile-right {
		display: flex !important;
	}
	/* Ukryj puste kolumny desktop żeby nie robiły padding */
	body:not(.wom-menu-forced-desktop) .whb-empty-column.whb-visible-lg {
		display: none !important;
	}
}

/* Warstwa 2: JS overflow detection - działa na dowolnej szerokości. */
body.wom-force-mobile-menu .whb-visible-lg {
	display: none !important;
}
body.wom-force-mobile-menu .whb-hidden-lg {
	display: flex !important;
}
body.wom-force-mobile-menu .whb-mobile-left,
body.wom-force-mobile-menu .whb-mobile-center,
body.wom-force-mobile-menu .whb-mobile-right {
	display: flex !important;
}
body.wom-force-mobile-menu .whb-empty-column.whb-visible-lg {
	display: none !important;
}

/* Anim transition zeby przelaczanie nie migalo. */
.whb-visible-lg,
.whb-hidden-lg {
	transition: opacity 0.15s ease;
}

/* =========================================================================
   Piekne mobilne side menu Woodmart (open state z .wd-opened)
   ========================================================================= */

/* Szerokosc panelu bocznego */
:root {
	--wom-side-menu-w: min(360px, 88vw);
	--wom-side-menu-bg: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
	--wom-side-menu-accent: #a30000;
	--wom-side-menu-text: #f4f4f4;
	--wom-side-menu-muted: rgba(244, 244, 244, 0.55);
	--wom-side-menu-hover: rgba(163, 0, 0, 0.16);
}

/* Overlay/backdrop pod otwartym menu */
.mfp-bg.wd-off-side-mfp,
.wd-off-side-mfp .mfp-bg {
	background: rgba(0, 0, 0, 0.6) !important;
	opacity: 1 !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* Sam panel side menu Woodmart */
body .mobile-nav.wd-side-hidden.color-scheme-light,
body .mobile-nav.wd-side-hidden.color-scheme-dark,
body .mobile-nav.wd-side-hidden {
	width: var(--wom-side-menu-w) !important;
	background: var(--wom-side-menu-bg) !important;
	color: var(--wom-side-menu-text) !important;
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35) !important;
	padding: 0 !important;
	border-left: 3px solid var(--wom-side-menu-accent) !important;
}

.mobile-nav.wd-side-hidden .wd-heading {
	padding: 1.5rem 1.75rem 1rem !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	background: transparent !important;
	color: var(--wom-side-menu-text) !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	position: relative !important;
}

.mobile-nav.wd-side-hidden .wd-heading::before {
	content: "" !important;
	position: absolute !important;
	left: 1.75rem !important;
	top: 0 !important;
	width: 42px !important;
	height: 3px !important;
	background: var(--wom-side-menu-accent) !important;
	border-radius: 0 0 3px 3px !important;
}

/* Przycisk zamykania - okragly, w prawym gornym rogu */
.mobile-nav.wd-side-hidden .wd-close-side {
	position: absolute !important;
	top: 1rem !important;
	right: 1rem !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.08) !important;
	color: var(--wom-side-menu-text) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.2s ease, transform 0.2s ease !important;
	border: 0 !important;
	z-index: 3 !important;
}

.mobile-nav.wd-side-hidden .wd-close-side:hover,
.mobile-nav.wd-side-hidden .wd-close-side:focus {
	background: var(--wom-side-menu-accent) !important;
	transform: rotate(90deg) !important;
	color: #fff !important;
}

/* Lista glowna */
.mobile-nav.wd-side-hidden .wd-nav-mob {
	padding: 0.5rem 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

.mobile-nav.wd-side-hidden .wd-nav-mob > li {
	position: relative !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.mobile-nav.wd-side-hidden .wd-nav-mob > li:last-child {
	border-bottom: 0 !important;
}

.mobile-nav.wd-side-hidden .wd-nav-mob > li > a {
	display: flex !important;
	align-items: center !important;
	padding: 1.1rem 1.75rem !important;
	color: var(--wom-side-menu-text) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	text-decoration: none !important;
	transition: background 0.25s ease, padding-left 0.25s ease, color 0.25s ease !important;
	position: relative !important;
	overflow: hidden !important;
}

/* Akcent po lewej stronie kazdej pozycji - przesuwany na hover */
.mobile-nav.wd-side-hidden .wd-nav-mob > li > a::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 20% !important;
	bottom: 20% !important;
	width: 3px !important;
	background: var(--wom-side-menu-accent) !important;
	transform: scaleY(0) !important;
	transform-origin: center !important;
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	border-radius: 0 3px 3px 0 !important;
}

.mobile-nav.wd-side-hidden .wd-nav-mob > li > a:hover,
.mobile-nav.wd-side-hidden .wd-nav-mob > li > a:focus,
.mobile-nav.wd-side-hidden .wd-nav-mob > li.current-menu-item > a {
	background: var(--wom-side-menu-hover) !important;
	color: #fff !important;
	padding-left: 2.1rem !important;
	opacity: 1 !important;
}

.mobile-nav.wd-side-hidden .wd-nav-mob > li > a:hover::before,
.mobile-nav.wd-side-hidden .wd-nav-mob > li > a:focus::before,
.mobile-nav.wd-side-hidden .wd-nav-mob > li.current-menu-item > a::before {
	transform: scaleY(1) !important;
}

/* Aktywna pozycja - stale wyroznienie */
.mobile-nav.wd-side-hidden .wd-nav-mob > li.current-menu-item > a,
.mobile-nav.wd-side-hidden .wd-nav-mob > li.current_page_item > a {
	color: #fff !important;
	background: linear-gradient(90deg, rgba(163, 0, 0, 0.28), rgba(163, 0, 0, 0.06)) !important;
}

/* Strzalka rozwiniecia podmenu */
.mobile-nav.wd-side-hidden .wd-nav-mob .wd-nav-opener,
.mobile-nav.wd-side-hidden .wd-nav-mob li .menu-opener {
	position: absolute !important;
	right: 1rem !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.08) !important;
	color: var(--wom-side-menu-text) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: background 0.2s ease, transform 0.25s ease !important;
	border: 0 !important;
}

.mobile-nav.wd-side-hidden .wd-nav-mob > li.opened > .wd-nav-opener,
.mobile-nav.wd-side-hidden .wd-nav-mob > li.opened .menu-opener {
	background: var(--wom-side-menu-accent) !important;
	transform: translateY(-50%) rotate(180deg) !important;
}

/* Sub-menu */
.mobile-nav.wd-side-hidden .wd-nav-mob .sub-menu {
	background: rgba(0, 0, 0, 0.35) !important;
	padding: 0 !important;
	margin: 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.mobile-nav.wd-side-hidden .wd-nav-mob .sub-menu > li > a {
	padding: 0.85rem 2.75rem !important;
	color: var(--wom-side-menu-muted) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	display: block !important;
	transition: color 0.2s ease, background 0.2s ease, padding-left 0.25s ease !important;
	text-decoration: none !important;
}

.mobile-nav.wd-side-hidden .wd-nav-mob .sub-menu > li > a:hover,
.mobile-nav.wd-side-hidden .wd-nav-mob .sub-menu > li > a:focus {
	color: #fff !important;
	background: rgba(163, 0, 0, 0.14) !important;
	padding-left: 3rem !important;
	opacity: 1 !important;
}

/* Ukryj puste ikony rozwiniecia gdy brak sub-menu */
.mobile-nav.wd-side-hidden .wd-nav-mob > li:not(.menu-item-has-children) > .wd-nav-opener,
.mobile-nav.wd-side-hidden .wd-nav-mob > li:not(.menu-item-has-children) .menu-opener {
	display: none !important;
}

/* Fajny animowany podpis "Menu" na gorze jesli brak wd-heading */
.mobile-nav.wd-side-hidden::before {
	content: "MENU" !important;
	position: absolute !important;
	top: 1.5rem !important;
	left: 1.75rem !important;
	color: var(--wom-side-menu-accent) !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.25em !important;
	z-index: 2 !important;
	pointer-events: none !important;
}

/* Padding-top zeby menu nie chowalo sie za label MENU */
body .mobile-nav.wd-side-hidden.color-scheme-light,
body .mobile-nav.wd-side-hidden.color-scheme-dark,
body .mobile-nav.wd-side-hidden {
	padding-top: 3.5rem !important;
}

.mobile-nav.wd-side-hidden .wd-heading {
	margin-top: -3.5rem !important;
	padding-top: 3.5rem !important;
}

/* Anim wjazdu panelu z prawej z bounce */
.mobile-nav.wd-side-hidden.wd-opened {
	animation: womSideMenuSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes womSideMenuSlide {
	from { transform: translateX(100%); opacity: 0.4; }
	to   { transform: translateX(0);    opacity: 1;   }
}

/* Woodmart uzywa transform: translate3d(...) na side menu - nadpisujemy na open. */
.mobile-nav.wd-side-hidden.wd-opened {
	transform: translate3d(0, 0, 0) !important;
}

/* Delikatny akcent na kazdej pozycji przy wjezdzie - staggered */
.mobile-nav.wd-side-hidden.wd-opened .wd-nav-mob > li {
	opacity: 0;
	animation: womMenuItemIn 0.4s ease forwards;
}

.mobile-nav.wd-side-hidden.wd-opened .wd-nav-mob > li:nth-child(1) { animation-delay: 0.10s; }
.mobile-nav.wd-side-hidden.wd-opened .wd-nav-mob > li:nth-child(2) { animation-delay: 0.14s; }
.mobile-nav.wd-side-hidden.wd-opened .wd-nav-mob > li:nth-child(3) { animation-delay: 0.18s; }
.mobile-nav.wd-side-hidden.wd-opened .wd-nav-mob > li:nth-child(4) { animation-delay: 0.22s; }
.mobile-nav.wd-side-hidden.wd-opened .wd-nav-mob > li:nth-child(5) { animation-delay: 0.26s; }
.mobile-nav.wd-side-hidden.wd-opened .wd-nav-mob > li:nth-child(6) { animation-delay: 0.30s; }
.mobile-nav.wd-side-hidden.wd-opened .wd-nav-mob > li:nth-child(7) { animation-delay: 0.34s; }
.mobile-nav.wd-side-hidden.wd-opened .wd-nav-mob > li:nth-child(8) { animation-delay: 0.38s; }
.mobile-nav.wd-side-hidden.wd-opened .wd-nav-mob > li:nth-child(n+9) { animation-delay: 0.42s; }

@keyframes womMenuItemIn {
	from { opacity: 0; transform: translateX(20px); }
	to   { opacity: 1; transform: translateX(0);    }
}

/* Ikonka hamburger w headerze - bardziej wyrazista */
.wd-header-mobile-nav > a,
.wd-header-mobile-nav .wd-tools-icon {
	transition: transform 0.2s ease, color 0.2s ease !important;
}

.wd-header-mobile-nav > a:hover,
.wd-header-mobile-nav .wd-tools-icon:hover {
	transform: scale(1.1) !important;
	color: var(--wom-side-menu-accent) !important;
}