.pw-brands[hidden] {
	display: none;
}

.pw-brands-item .pw-brands-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding: 0 10px;
	border: 0;
	background: transparent !important;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-transform: none !important;
	white-space: nowrap;
	transition-property: color, background-color;
}

.pw-brands-item .pw-brands-toggle[aria-expanded="true"],
.pw-brands-item .pw-brands-toggle:hover {
	color: #167f87 !important;
}

.wd-nav-main .pw-brands-toggle {
	position: relative;
	min-height: 44px;
	font: 600 15px/22px Urbanist, sans-serif;
}

.wd-nav-main .pw-brands-toggle[aria-expanded="true"]::after {
	position: absolute;
	inset: auto 10px 0;
	height: 2px;
	background: currentColor;
	content: "";
}

.pw-brands {
	position: fixed;
	z-index: 390;
	inset: var(--pw-brands-top, 0) 0 auto;
	max-height: calc(100dvh - var(--pw-brands-top, 0px));
	background: #fff;
	color: #152c3b;
	font: 400 13px/20px "Fira Sans", sans-serif;
	overflow: auto;
	overscroll-behavior: contain;
	box-shadow: 0 6px 16px #152c3b15;
}

/* Ruch odpowiada rozwijanym kategoriom i mobilnemu drilldown Woodmart. */
@media (prefers-reduced-motion: no-preference) {
	.pw-brands:not([hidden]) {
		animation: pw-brands-open .4s cubic-bezier(0.19, 1, 0.22, 1);
	}

	.pw-brands-mobile:not([hidden]) {
		animation: pw-brands-slide-in .3s ease;
	}
}

@keyframes pw-brands-open {
	from {
		opacity: 0;
		transform: translateY(15px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pw-brands-slide-in {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(0);
	}
}

.pw-brands-content {
	display: flex;
	flex-direction: column;
	max-width: 1660px;
	box-sizing: border-box;
	min-height: 0;
	max-height: inherit;
	margin-inline: auto;
	padding: 28px 15px 32px;
}

.pw-brands-title,
.pw-brands-count {
	margin: 0;
	color: inherit;
	font: 700 24px/32px Urbanist, sans-serif;
}

.pw-brands-title {
	margin-bottom: 22px;
}

.pw-brands-cards {
	display: grid;
	flex-shrink: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-bottom: 22px;
}

.pw-brands-card {
	position: relative;
	container-type: inline-size;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 208px;
	padding: 0;
	border-radius: 14px;
	overflow: hidden;
	color: var(--pw-card-ink);
	background: var(--pw-card-background);
}

.pw-brands .pw-brands-card {
	color: var(--pw-card-ink) !important;
	text-decoration: none !important;
}

.pw-brands-card-name {
	margin: 20px 20px 0;
	font: var(--pw-card-font);
}

.pw-brands-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 20px 21px;
	color: var(--pw-card-cta-ink);
	font-weight: 600;
	line-height: 22px;
}

.pw-brands-card:hover .pw-brands-card-cta {
	text-decoration: underline;
}

.pw-brands-card-primordial .pw-brands-card-cta {
	padding: 5px 19px 5px 8px;
	margin: 0 0 16px 12px;
	border-radius: 16px;
	background: #eee9df;
}

.pw-brands-art {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.pw-brands-arrow-mobile {
	display: none;
}

.pw-brands-count {
	display: grid;
	grid-template-columns: 180px auto;
	flex-shrink: 0;
	align-items: center;
	gap: 14px;
	font-size: 20px;
	line-height: 28px;
	margin-bottom: 12px;
}

.pw-brands-count > span {
	color: #72797d;
	font: 400 13px/22px "Fira Sans", sans-serif;
}

.pw-brands-dot {
	display: none;
}

.pw-brands:not(.pw-brands-mobile) .pw-brands-back {
	display: none !important;
}

.pw-brands-index {
	display: flex;
	flex-shrink: 0;
	gap: 5px;
	margin-bottom: 12px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.pw-brands-index button {
	flex: none;
	width: 29px;
	min-width: 0;
	height: 32px;
	min-height: 32px;
	padding: 0 !important;
	border: 0;
	border-radius: 6px !important;
	background: #f3f6f6 !important;
	box-shadow: none;
	color: #125661;
	font: 700 12px/18px "Fira Sans", sans-serif;
}

.pw-brands-index button[data-brand-letter="0–9"] {
	width: 42px;
}

.pw-brands-index button:hover,
.pw-brands-index button:focus-visible {
	background: #dcebed !important;
}

.pw-brands-list {
	min-height: 110px;
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-gutter: stable;
}

.pw-brands-columns {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 32px;
}

.pw-brands-group + .pw-brands-group {
	margin-top: 16px;
}

.pw-brands-group h4 {
	margin: 0 0 4px;
	color: #167f87;
	font: 700 14px/22px "Fira Sans", sans-serif;
}

.pw-brands-group ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pw-brands-group li {
	margin: 0 0 4px;
}

.pw-brands .pw-brands-group a {
	display: flex;
	align-items: center;
	min-height: 26px;
	color: #3f494f !important;
	text-decoration: none !important;
}

.pw-brands .pw-brands-group a:hover {
	text-decoration: underline !important;
}

.pw-brands .pw-brands-group .pw-brands-highlight {
	color: #125661 !important;
	font-weight: 600;
}

.mobile-categories-menu .pw-brands-toggle {
	width: 100%;
	min-height: 50px;
	padding: 0 20px;
	gap: 12px;
	color: #152c3b;
	font: 600 13px/22px "Fira Sans", sans-serif;
}

.mobile-categories-menu .pw-brands-chevron {
	margin-inline-start: auto;
	transform: none;
}

.mobile-nav:has(.mobile-categories-menu .pw-brands-toggle) {
	width: min(340px, 100vw);
}

.mobile-nav.pw-brands-drawer {
	overflow: hidden;
}

.pw-brands-drawer > :not(.pw-brands) {
	visibility: hidden;
}

.pw-brands-mobile {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	max-height: 100%;
	box-shadow: none;
}

.pw-brands-mobile .pw-brands-back {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	min-height: 60px;
	padding: 0 20px !important;
	border: 0;
	background: #fff !important;
	box-shadow: none;
	color: #152c3b;
	font: 700 20px/28px Urbanist, sans-serif;
	text-transform: none !important;
	text-align: left;
}

.pw-brands-mobile .pw-brands-content {
	flex: 1 1 auto;
	min-height: 452px;
	width: 100%;
	max-height: none;
	padding: 20px;
}

.pw-brands-mobile .pw-brands-title {
	margin-bottom: 16px;
	font-size: 18px;
	line-height: 26px;
}

.pw-brands-mobile .pw-brands-cards {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.pw-brands-mobile .pw-brands-card {
	flex: 0 0 min(260px, 90%);
	height: 176px;
	scroll-snap-align: start;
}

.pw-brands-mobile .pw-brands-arrow-desktop {
	display: none;
}

.pw-brands-mobile .pw-brands-arrow-mobile {
	display: block;
}

.pw-brands-mobile .pw-brands-card-cta {
	gap: 4px;
}

.pw-brands-mobile .pw-brands-count {
	display: block;
	margin-bottom: 16px;
	font-size: 16px;
	line-height: 24px;
}

.pw-brands-mobile .pw-brands-count > span {
	color: inherit;
	font: inherit;
}

.pw-brands-mobile .pw-brands-dot {
	display: inline;
}

.pw-brands-mobile .pw-brands-unit {
	display: none;
}

.pw-brands-mobile .pw-brands-index {
	margin-bottom: 16px;
	scrollbar-width: none;
}

.pw-brands-mobile .pw-brands-index button {
	width: 34px;
}

.pw-brands-mobile .pw-brands-list {
	flex: 1 1 110px;
	max-height: none;
	scrollbar-gutter: auto;
}

.pw-brands-mobile .pw-brands-columns,
.pw-brands-mobile .pw-brands-column {
	display: block;
}

.pw-brands-mobile .pw-brands-column + .pw-brands-column {
	margin-top: 16px;
}

.pw-brands-mobile .pw-brands-group h4 {
	margin: 0;
	line-height: 26px;
}

.pw-brands-mobile .pw-brands-group li {
	margin: 0;
}

.pw-brands-mobile .pw-brands-group a {
	min-height: 42px;
	font-size: 14px;
	line-height: 22px;
}