/*
 * Filterknappar (Flavor/Format/Strength) ovanför produkterna på
 * varumärkes-arkivsidor (se inc/brand-archive-filters.php). Bygger på
 * Woodmarts egna filter-markup (klasser med "wd-pf-"-prefix) - vi
 * skriver bara om utseendet, JS:en (öppna/stänga/AJAX) är redan
 * Woodmarts egen.
 */

.np-brand-archive-filters {
	margin: 0 0 32px;
}

/* Filterknapparna till vänster, sorterings-väljaren till höger - allt
   på samma rad. */
.np-brand-archive-filters-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.np-brand-archive-filters .wd-product-filters {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start !important;
	gap: 10px;
}

/* "Default sorting" - samma pill-utseende som filterknapparna. */
.np-brand-archive-sorting .woocommerce-ordering {
	margin: 0;
}

.np-brand-archive-sorting select.orderby {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	height: auto;
	padding: 10px 34px 10px 16px;
	background: #ececec url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E" ) no-repeat right 12px center;
	background-size: 14px;
	border: none;
	border-radius: 30px;
	font-size: 14px;
	font-weight: 600;
	color: #111;
	cursor: pointer;
}

/* Woodmarts "wd-grid-f-stretch" gör annars varje knapp lika bred som
   den bredaste (fyller ut hela raden) - vi vill ha kompakta,
   innehålls-anpassade pills istället. align-items: flex-start ovan
   ser också till att när EN knapps dropdown öppnas och blir hög, är
   det bara den knappen (och det som kommer efter) som växer nedåt -
   grannknapparna varken sträcks eller flyttar sig. */
.np-brand-archive-filters .wd-pf-checkboxes {
	flex: 0 0 auto !important;
	width: auto !important;
}

/* Själva togglarna ("Flavor" / "Format" / "Strength") - Woodmarts
   "wd-style-form"-utseende (kantlinje, fast höjd, css-variabel-bakgrund,
   pil-ikon efter texten) skrivs över helt här, eftersom det annars
   krockar med den platta pill-designen. */
.np-brand-archive-filters .wd-pf-title {
	display: flex;
	align-items: center;
	gap: 8px;
	height: auto !important;
	padding: 10px 16px !important;
	background: #ececec !important;
	background-color: #ececec !important;
	border: none !important;
	border-radius: 30px !important;
	font-size: 14px;
	font-weight: 600;
	color: #111;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.np-brand-archive-filters .wd-pf-checkboxes.wd-opened .wd-pf-title,
.np-brand-archive-filters .wd-pf-title:hover {
	background: #dedede !important;
	background-color: #dedede !important;
}

/* Woodmarts egen pil-ikon (via ikonteckensnitt) - vi vill bara ha vår
   egen ikon till vänster, ingen pil. */
.np-brand-archive-filters .wd-pf-title::after {
	content: none !important;
}

.np-brand-archive-filters .wd-pf-title::before {
	content: '';
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.np-brand-archive-filters .wd-pf-title span {
	color: #111 !important;
	font-weight: 600 !important;
	text-transform: none !important;
	font-size: 14px !important;
}

/* Tagg-ikon (Flavor, Strength). */
.np-brand-archive-filters .np-brand-filter--flavour .wd-pf-title::before,
.np-brand-archive-filters .np-brand-filter--strength .wd-pf-title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M12.41 2.58a2 2 0 0 0-1.41-.58H4a2 2 0 0 0-2 2v6.99a2 2 0 0 0 .59 1.42l9 9a2 2 0 0 0 2.82 0l7-7a2 2 0 0 0 0-2.83zM6.5 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3'/%3E%3C/svg%3E");
}

/* Rund "puck"-ikon (Format). */
.np-brand-archive-filters .np-brand-filter--format .wd-pf-title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cellipse cx='12' cy='7' rx='9' ry='3.2'/%3E%3Cpath d='M3 7v6c0 1.77 4.03 3.2 9 3.2s9-1.43 9-3.2V7c0 1.77-4.03 3.2-9 3.2S3 8.77 3 7'/%3E%3C/svg%3E");
}

.np-brand-archive-filters .wd-pf-title .title-text {
	line-height: 1;
}

/* Döljs helt - annars lägger Woodmart till en synlig "chip" för varje
   valt värde INUTI själva knappen, vilket gör att den växer i bredd
   varje gång man klickar/väljer ett värde. */
.np-brand-archive-filters .wd-pf-results {
	display: none !important;
	width: 0 !important;
}

/* Dropdownen görs om från en flytande popup till en egen, full-bred rad
   under knapparna - som en radbrytande lista av pills. Elementet har
   ÄVEN Woodmarts egen klass "wd-dropdown", som alltid (oavsett vår
   egen display-regel) sätter visibility:hidden/opacity:0/pointer-
   events:none som bas-läge - annars förblir den osynlig och oklickbar
   trots display:block, eftersom Woodmarts öppna-klasser ("wd-opened"
   direkt på .wd-dropdown, eller på en förälder med klassen
   "wd-event-click") inte matchar vår egen markup/klick-logik. */
.np-brand-archive-filters .wd-pf-dropdown {
	display: none;
	position: static !important;
	width: 100% !important;
	margin: 14px 0 0 !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transform: none !important;
}

.np-brand-archive-filters .wd-pf-checkboxes.wd-opened .wd-pf-dropdown {
	display: block;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.np-brand-archive-filters .wd-scroll,
.np-brand-archive-filters .wd-scroll-content {
	max-height: none !important;
	overflow: visible !important;
}

.np-brand-archive-filters .wd-swatches-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.np-brand-archive-filters .wd-swatches-filter li {
	margin: 0;
}

.np-brand-archive-filters .wd-swatches-filter .pf-value {
	display: block !important;
	padding: 10px 18px !important;
	background: #ececec !important;
	border: none !important;
	border-radius: 30px !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	color: #111 !important;
	text-decoration: none !important;
	transition: background-color 0.15s ease-in-out;
}

.np-brand-archive-filters .wd-swatches-filter .pf-value:hover {
	background: #dedede !important;
}

.np-brand-archive-filters .wd-swatches-filter li.wd-active .pf-value {
	background: #111 !important;
	color: #fff !important;
}

@media ( max-width: 782px ) {
	.np-brand-archive-filters .wd-pf-title,
	.np-brand-archive-filters .wd-swatches-filter .pf-value,
	.np-brand-archive-sorting select.orderby {
		padding: 8px 14px;
		font-size: 13px;
	}

	.np-brand-archive-sorting select.orderby {
		padding-right: 30px;
	}
}