/* Kategoriarkivet — sidhuvud, filterpanel, verktygsrad, grid */

/* =========================================================================
   Kategoriarkivet — sidhuvud, filterpanel, verktygsrad, produktgrid
   ========================================================================= */

/* Sidhuvud */
.nws-archive-head > .brxe-container { padding: 1.2rem var(--nws-gutter) 0; }
.nws-archive-head__row {
	display: flex;
	flex-direction: row; /* .brxe-block är kolumn som Bricks-default */
	align-items: flex-end;
	justify-content: space-between;
	gap: 4rem;
}
.nws-archive-head__copy { width: 100%; }
.nws-archive-head__copy .brxe-heading,
.nws-archive-head__intro { max-width: 76rem; }
.nws-archive-head__copy .brxe-heading { margin: 0; }
.nws-archive-head__intro { font-size: 1.8rem; line-height: 1.55; color: var(--nws-grey); text-wrap: pretty; }
.nws-archive-head__intro:empty { display: none; }
.nws-archive-head__stats { display: flex; gap: 1rem; flex: none; }
.nws-archive-stat {
	border: 1px solid var(--nws-grey-line);
	background: var(--nws-white);
	border-radius: var(--nws-radius-m);
	padding: 1.4rem 1.8rem;
	text-align: center;
}
.nws-archive-stat strong {
	display: block;
	font-family: "DM Sans", sans-serif;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--nws-black);
}
.nws-archive-stat span {
	display: block;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--nws-grey);
	margin-top: 0.6rem;
}

/* Tre fördelar under rubriken som en tunn rad: grön ikon + ord, inga boxar
   (ersatte de gröna puffarna 2026-10-30). Undertexten finns kvar i Bricks
   men visas inte. Ikonerna återanvänder USP-radens SVG-variabler. */
/* Ligger till höger om rubriken i rubrikraden (flex, align-items: flex-end). */
.nws-archive-head__perks {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 3.2rem;
	flex: none;
	margin-bottom: 1.4rem; /* i linje med rubrikens baslinje (h1 har 1rem under) */
}
.nws-perk { display: flex; align-items: center; gap: 1rem; color: var(--nws-black); line-height: 1; }
.nws-perk::before {
	content: "";
	flex: none;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 0.7rem;
	background-color: var(--nws-grey-surface);
	-webkit-mask: none;
	mask: none;
	position: relative;
}
.nws-perk {
	position: relative;
	padding-left: 3.8rem;
	min-height: 2.8rem;
}
.nws-perk::before { position: absolute; left: 0; top: 0; }
.nws-perk::after {
	content: "";
	position: absolute;
	left: 0.55rem;
	top: 0.55rem;
	width: 1.7rem;
	height: 1.7rem;
	background: var(--nws-black);
	-webkit-mask: var(--nws-usp-svg) center / contain no-repeat;
	mask: var(--nws-usp-svg) center / contain no-repeat;
}
.nws-perk strong { font-size: 1.5rem; font-weight: 600; }
.nws-perk span { display: none; }

/* Underkategorier — chip-rad */
.nws-archive-subcats > .brxe-container { padding: 2rem var(--nws-gutter) 0; }
.nws-subcats { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.nws-subcats__item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.7rem;
	border: 1px solid var(--nws-grey-line);
	background: var(--nws-white);
	border-radius: var(--nws-radius-btn);
	padding: 1rem 1.4rem;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	color: var(--nws-black);
}
.nws-subcats__item:hover { border-color: var(--nws-grey); color: var(--nws-black); }
.nws-subcats__item.is-current { background: var(--nws-black); border-color: var(--nws-black); color: var(--nws-white); }
.nws-subcats__count { font-size: 1.3rem; color: var(--nws-grey); }
.nws-subcats__item.is-current .nws-subcats__count { color: rgba(255, 255, 255, 0.6); }

/* Layout: verktygsrad → (hopfällbar filterpanel) → grid → paginering */
.nws-archive > .brxe-container {
	padding: 2.4rem var(--nws-gutter) var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

/* Filtren som piller i verktygsraden (desktop): varje grupp är ett piller
   som öppnar en popover; nws-header.js skapar knappen och omslaget. Under
   992 px blir panelen i stället ett helskärmslager bakom Filtrera-knappen. */
.nws-filters { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.8rem; flex: 1 1 0%; min-width: 0; }
.nws-archive__bar { flex-wrap: nowrap; }
button.nws-filters__clear.is-hidden { display: none; }
.nws-filters__head { display: contents; }
.nws-filters__title { display: none; }
.nws-filters__group { position: relative; }
.nws-filters__group > .nws-filters__label { display: none; }
/* Samma stil som underkategori-chipsen (.nws-subcats__item). */
.nws-filters__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	background: var(--nws-white);
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-btn);
	padding: 1rem 1.4rem;
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	color: var(--nws-black);
	cursor: pointer;
	white-space: nowrap;
}
.nws-filters__pill::after {
	content: "";
	width: 1.2rem;
	height: 1.2rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.15s ease;
}
.nws-filters__pill:hover { border-color: var(--nws-grey); }
.nws-filters__group.is-open > .nws-filters__pill { border-color: var(--nws-black); }
.nws-filters__group.is-open > .nws-filters__pill::after { transform: rotate(180deg); }
.nws-filters__pill.is-active { background: var(--nws-black); border-color: var(--nws-black); color: var(--nws-white); }
.nws-filters__pop {
	display: none;
	position: absolute;
	top: calc(100% + 0.8rem);
	left: 0;
	z-index: 60;
	min-width: 30rem;
	background: var(--nws-white);
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-l);
	box-shadow: 0 1.2rem 3.2rem rgba(17, 17, 17, 0.12);
	padding: 2rem;
	flex-direction: column;
	gap: 1.2rem;
}
.nws-filters__group.is-open > .nws-filters__pop { display: flex; }
.nws-filters__hint { font-size: 1.4rem; line-height: 1.4; color: var(--nws-grey); }
/* "Rensa alla" som textlänk sist bland pillren (Bricks filter-submit, reset). */
button.nws-filters__clear {
	background: none;
	border: 0;
	padding: 0 0.6rem;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--nws-grey);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
	order: 99;
}
button.nws-filters__clear:hover { background: none; color: var(--nws-black); }

/* Bricks filterelement (kryssrutor, radio/sortering) renderas som
   <fieldset>: nollställ ramen och utfyllnaden som UA/Woo ger dem. */
fieldset[data-brx-filter] { border: 0; padding: 0; margin: 0; min-width: 0; }
.nws-filters__checks {
	--brx-indicator-size: 2rem;
	--brx-indicator-border-width: 2px;
	--brx-indicator-border-color: var(--nws-grey-line);
	--brx-indicator-border-radius: 5px;
	--brx-indicator-bg-checked: var(--nws-black);
	--brx-indicator-border-color-checked: var(--nws-black);
	--brx-indicator-check-color-checked: var(--nws-green);
	--brx-indicator-focus-color: var(--nws-black);
	--brx-indicator-gap: 1.2rem;
	--brx-options-gap: 1.1rem;
	font-size: 1.6rem;
	color: var(--nws-black);
}
.nws-filters__checks .brx-option-text { font-weight: 500; }
.nws-filters__checks .brx-option-count { font-size: 1.5rem; color: var(--nws-grey); }
.nws-filters__checks .brx-show-more-less-button {
	background: none;
	border: 0;
	padding: 0;
	align-self: flex-start;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--nws-black);
	text-decoration: underline;
	cursor: pointer;
}

/* Chip-filter (knappläge) */
.nws-filters__chips .bricks-button {
	background: var(--nws-white);
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-btn);
	padding: 1rem 1.3rem;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	color: var(--nws-grey);
	cursor: pointer;
}
.nws-filters__chips .bricks-button:hover { border-color: var(--nws-grey); }
.nws-filters__chips .bricks-button.brx-option-active {
	background: var(--nws-black);
	border-color: var(--nws-black);
	color: var(--nws-white);
}

/* Intervallfilter (pris, batterihälsa) */
.nws-filters__range { font-size: 1.5rem; color: var(--nws-grey); }
.nws-filters__range input[type="range"] { accent-color: var(--nws-black); }
.nws-filters__range input[type="number"],
.nws-filters__range input[type="text"] {
	border: 1.5px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-s);
	padding: 0.8rem 1rem;
	font-size: 1.5rem;
	color: var(--nws-black);
	background: var(--nws-white);
}

/* Utan sidospalten ligger allt direkt i containern (flex, align-items:
   flex-start) — raderna måste själva ta hela bredden, annars krymper
   rutnätet till innehållet (en produkt = ett smalt kort). */
.nws-archive__bar,
.nws-filters,
.nws-archive__results,
.nws-archive__grid,
.nws-archive__grid ul.products,
.nws-archive__pages { width: 100%; }
.nws-archive__results { display: flex; flex-direction: column; gap: 1.6rem; }

/* Verktygsraden: Filtrera-knapp, träffantal, aktiva filter, sortering */
.nws-archive__bar {
	display: flex;
	align-items: center;
	gap: 1rem 1.6rem;
	flex-wrap: wrap;
}
.nws-filters__togglebar { display: none; }
.nws-archive__active { display: none; }
.nws-filters__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	background: var(--nws-black);
	color: var(--nws-white);
	border: 0;
	border-radius: var(--nws-radius-btn);
	padding: 1.2rem 1.6rem;
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}
.nws-filters__toggle::before {
	content: "";
	width: 1.6rem;
	height: 1.6rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M7 12h10M10 17h4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M7 12h10M10 17h4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nws-filters__toggle:hover { background: var(--nws-black-hover-bg); color: var(--nws-black-hover-fg); }
.nws-filters__toggle[aria-expanded="true"] { background: var(--nws-green); color: var(--nws-black); }
.nws-archive__count { font-size: 1.5rem; font-weight: 500; color: var(--nws-grey); margin-left: auto; white-space: nowrap; }
.nws-archive__active button,
.nws-archive__active .active-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	background: var(--nws-black);
	border: 0;
	border-radius: var(--nws-radius-btn);
	padding: 1rem 1.3rem;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	color: var(--nws-white);
	cursor: pointer;
}
.nws-archive__sort { display: flex; align-items: center; gap: 1rem; }
.nws-archive__sort-label { font-size: 1.5rem; color: var(--nws-grey); }
/* Sorteringen är ett vanligt <select> (Bricks filter-select) — tydligt
   "Sortera: Lägsta pris" i stället för pillerknappar. */
/* Samma piller som filtren. */
.nws-archive__sort-select,
.nws-archive__sort-select select {
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	color: var(--nws-black);
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-btn);
	background: var(--nws-white);
	padding: 1rem 3.4rem 1rem 1.4rem;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: 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.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.2rem center;
	background-size: 1.2rem;
	min-width: 0;
}
.nws-archive__sort-select select:hover { border-color: var(--nws-grey); }
.nws-archive__sort-select select:focus { outline: 0; border-color: var(--nws-black); }

/* Produktgrid — Bricks-loop där kortet renderas av Woo-loopens hookar */
.nws-archive__grid ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nws-card__hooks { display: contents; } /* hook-utskriftens omslag ska inte synas i flödet */



/* Paginering (Bricks pagination-element: .bricks-pagination > ul > li > a/span.page-numbers) */
.nws-archive__pages { width: 100%; }
.nws-archive__pages ul.page-numbers,
.nws-archive__pages .bricks-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nws-archive__pages .bricks-pagination li { margin: 0; padding: 0; list-style: none; }
.nws-archive__pages a.page-numbers,
.nws-archive__pages span.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 4rem;
	height: 4rem;
	padding: 0 1rem;
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-s);
	background: var(--nws-white);
	font-size: 1.6rem;
	color: var(--nws-black);
}
.nws-archive__pages span.page-numbers.current { background: var(--nws-black); border-color: var(--nws-black); color: var(--nws-white); }
.nws-archive__pages a.page-numbers:hover { border-color: var(--nws-grey); }

/* Mobil: panelen som fullskärmslager bakom Filtrera-knappen.
   Stängknappen och "Visa X träffar"-raden injiceras av nws-header.js
   och finns bara när lagret använts — döljs ändå alltid på desktop. */
.nws-filters__stang,
.nws-filters__visa { display: none; }
@media (max-width: 1200px) {
	.nws-archive__grid ul.products { grid-template-columns: repeat(3, 1fr); }
	.nws-archive-head__perks { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
	.nws-archive__grid ul.products { grid-template-columns: repeat(2, 1fr); }
	.nws-archive__bar { flex-wrap: wrap; }
	.nws-filters__togglebar { display: block; }
	.nws-archive__active { display: block; width: 100%; }
	button.nws-filters__clear.is-hidden { display: inline; }
	.nws-archive__count { margin-left: 0; }
	.nws-filters { display: none; }
	.nws-filters__head { display: flex; align-items: baseline; gap: 1.6rem; }
	.nws-filters__title { display: inline; }
	.nws-filters__group > .nws-filters__label { display: block; }
	.nws-filters__pill { display: none; }
	.nws-filters__pop { display: contents; }
	button.nws-filters__clear { order: 0; padding: 0; }
	.nws-filters.is-open {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap; /* annars spaltbryts kolumnen i den fasta höjden */
		align-items: stretch;
		gap: 2rem;
		position: fixed;
		inset: 0;
		z-index: 1300;
		border-radius: 0;
		background: var(--nws-white);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 2rem 2rem 0;
	}
	.nws-filters.is-open .nws-filters__group { border-top: 1px solid var(--nws-grey-soft); padding-top: 2rem; }
	body.nws-filter-oppen { overflow: hidden; }
	.nws-filters.is-open .nws-filters__head {
		width: auto;
		align-items: center;
		position: sticky;
		top: 0;
		background: var(--nws-white);
		margin: -2rem -2rem 0;
		padding: 1.8rem 2rem;
		border-bottom: 1px solid var(--nws-grey-soft);
		z-index: 1;
	}
	.nws-filters.is-open .nws-filters__stang {
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		font-size: 2.8rem;
		line-height: 1;
		color: var(--nws-grey);
		cursor: pointer;
		padding: 0.4rem;
		margin-left: auto;
	}
	.nws-filters.is-open .nws-filters__visa {
		display: block;
		position: sticky;
		bottom: 0;
		background: var(--nws-white);
		margin: auto -2rem 0;
		padding: 1.4rem 2rem calc(1.4rem + env(safe-area-inset-bottom));
		border-top: 1px solid var(--nws-grey-soft);
	}
	.nws-filters__visa-btn {
		width: 100%;
		background: var(--nws-green);
		color: var(--nws-black);
		border: 0;
		border-radius: var(--nws-radius-m);
		font-family: inherit;
		font-size: 1.8rem;
		font-weight: 600;
		line-height: 1;
		padding: 1.7rem;
		cursor: pointer;
	}
	.nws-archive__sort { margin-left: 0; width: 100%; }
	.nws-archive__sort-select, .nws-archive__sort-select select { flex: 1; }
}
@media (max-width: 478px) {
	/* Två kort i bredd även på mobil — ett kort per rad blev enorma kort
	   med kvadratisk bild (mobilgenomgång 2026-10-30). */
	.nws-archive__grid ul.products { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
	.nws-archive__grid li.nws-card .nws-card__body { padding: 0.4rem 1.2rem 1.4rem; gap: 0.8rem; }
	.nws-archive__grid li.nws-card .woocommerce-loop-product__title { font-size: 1.5rem; }
	.nws-archive__grid li.nws-card .nws-card__spec { font-size: 1.2rem; }
	.nws-archive__grid li.nws-card .price .woocommerce-Price-amount { font-size: 2rem; }
	.nws-archive__grid li.nws-card .nws-card__media img { inset: 1.4rem; width: calc(100% - 2.8rem); height: calc(100% - 2.8rem); }
}
@media (max-width: 767px) {
	.nws-archive-head > .brxe-container,
	.nws-archive-subcats > .brxe-container,
	.nws-archive > .brxe-container { padding-left: 1.6rem; padding-right: 1.6rem; }
	.nws-archive-head__row { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
	.nws-archive-head__perks { margin-bottom: 0; }
}

/* Tomläget i arkivgridden (Bricks no_results_text) */
.bricks-posts-nothing-found { grid-column: 1 / -1; }
.nws-archive-empty {
	background: var(--nws-white);
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-l);
	padding: 4.8rem 4rem;
	text-align: center;
}
.nws-archive-empty__title {
	font-family: "DM Sans", sans-serif;
	font-size: 2.8rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--nws-black);
	margin: 0 0 1rem;
}
.nws-archive-empty__text {
	font-size: 1.8rem;
	line-height: 1.55;
	color: var(--nws-grey);
	max-width: 52rem;
	margin: 0 auto 2.2rem;
}
.nws-archive-empty__btn {
	display: inline-block;
	background: var(--nws-black);
	color: var(--nws-white);
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1;
	padding: 1.5rem 2.2rem;
	border-radius: var(--nws-radius-btn);
}
.nws-archive-empty__btn:hover { background: var(--nws-black-hover-bg); color: var(--nws-black-hover-fg); }