/*
 * Egen header (header.php + inc/site-header.php) - ersätter Woodmarts
 * inbyggda header builder helt. Mobil-först rakt igenom: på mobil är
 * huvudraden bara hamburgare + logga + varukorg, sökrutan blir en egen
 * full-bredd-rad under (tvingas dit via flex-basis:100%, se
 * .np-header-search nedan) och navigationen/förtroende-märket/konto-
 * länken bor i en egen drawer (öppnas via hamburgaren). Från 1200px
 * (temats desktop-brytpunkt) visas allt i en rad + en egen nav-rad,
 * hamburgaren och drawern döljs.
 */

.np-site-header {
	position: relative;
	background: #fff;
	border-bottom: 1px solid #eee;
}

/* --- Huvudrad: hamburgare / logga / sök / actions ----------------------- */

.np-header-main-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	padding-block: 12px;
}

.np-header-mobile-toggle {
	order: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.np-header-mobile-toggle:hover {
	background: #f5f5f5;
}

.np-header-mobile-toggle span {
	/* width explicit istället för att förlita sig på flex-stretch - en
	   tom <span> som flex-item krymper annars till 0 bred (bekräftad bugg:
	   align-items:stretch på .np-header-mobile-toggle sträckte INTE ut de
	   här barnen automatiskt, troligen pga <button>-elementets egna UA-
	   standardvärden för flex-items). */
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 1px;
	background: #111;
	transition: background-color 0.15s ease;
}

.np-header-logo {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}

.np-header-logo a {
	display: inline-flex;
	align-items: center;
}

.np-header-logo img {
	max-height: 36px;
	width: auto;
}

.np-header-logo-text {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #111;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.np-header-actions {
	order: 3;
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Konto-länken tar för mycket plats på mobil - den finns redan
   tillgänglig i drawerns footer (se
   np_render_site_header_mobile_drawer()), så bara varukorgen visas i
   själva huvudraden här. Wrappern (inte bara länken inuti) döljs helt,
   annars blir den ett osynligt men fortfarande "layoutat" 0-bred
   flex-item som stjäl ett extra gap i .np-header-actions. */
.np-header-account-wrap {
	display: none;
}

.np-header-account {
	display: none;
}

/* Förtroende-märket - samma "för trångt på mobil"-resonemang som
   konto-länken ovan, dold tills desktop-brytpunkten (se media query
   längst ner). Recensionssidan är alltid en klick bort via länken. */
.np-header-trust-badge {
	position: relative;
	display: none;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
}

/* Diskret avdelare mot Account-länken - grupperar visuellt utan att
   lägga till extra layout-bredd (absolut positionerad in i det befintliga
   gap:et i .np-header-actions, ändrar aldrig knapparnas mått). */
.np-header-trust-badge::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -8px;
	width: 1px;
	height: 18px;
	background: #e5e5e5;
	transform: translateY( -50% );
}

.np-header-trust-badge-average {
	font-size: 14px;
	font-weight: 700;
	color: #111;
}

.np-header-trust-badge-count {
	font-size: 13px;
	color: #666;
}

/* Mörkare grönt på stjärnrutorna vid hover över hela märket - inkl. den
   ev. delvis fyllda sista stjärnan, som annars använder en egen
   gradient (se .np-star-box--partial i customer-reviews.css) och inte
   fångas av en enkel background-override. */
.np-header-trust-badge .np-star-box {
	transition: background 0.15s ease;
}

.np-header-trust-badge:hover .np-star-box {
	background: #00915f;
}

.np-header-trust-badge:hover .np-star-box--partial {
	background: linear-gradient( 90deg, #00915f var( --np-star-fill, 50% ), #e3e5e8 var( --np-star-fill, 50% ) );
}

.np-header-account,
.np-header-cart {
	transition: color 0.15s ease;
}

.np-header-account:hover,
.np-header-cart:hover {
	color: var( --wd-primary-color, #8a1f1f );
}

/* --- Account-/varukorgs-panelerna (hover/fokus-dropdown) -----------------
   Bara aktiva på desktop-brytpunkten (samma som Account-länken/förtroende-
   märket redan är) - på mobil är det fortfarande bara vanliga länkar till
   /my-account/ respektive /cart/, ingen dropdown att klämma in på en redan
   trång yta. */
.np-header-account-wrap,
.np-header-cart-wrap {
	position: relative;
}

.np-header-account-panel,
.np-header-cart-panel {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 70;
	/* padding-top (inte margin) - osynlig "brygga" som håller :hover
	   sammanhängande mellan knappen och kortet nedanför, så pekaren aldrig
	   passerar en tom zon utan något element under sig på vägen ner. Det
	   faktiska kortets utseende (bakgrund/skugga/kant) sitter på den inre
	   .np-header-panel-card istället för här, annars hade bryggan själv
	   synts som vit padding ovanför kortet. */
	padding-top: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 4px );
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	pointer-events: none;
}

/* Liten pil/spets som pekar upp mot knappen - utan den ser panelen
   "frikopplad" ut från triggern eftersom kortet (360px) är mycket bredare
   än själva ikonen (~20px) och därför sträcker sig långt åt vänster om
   den. Positionerad i "bryggans" 10px-zon (padding-top ovan) så den
   sjunker in bakom/smälter ihop med kortets överkant - ::before ligger
   FÖRE kortet i DOM-ordning, så kortet (som målas efter, alltså ovanpå)
   täcker automatiskt spetsens nedre halva utan någon z-index-krångel. */
.np-header-account-panel::before,
.np-header-cart-panel::before {
	content: '';
	position: absolute;
	top: 4px;
	right: 14px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
	transform: rotate( 45deg );
}

.np-header-panel-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.12 );
	overflow: hidden;
}

.np-header-account-menu {
	margin: 0;
	padding: 8px;
	list-style: none;
	min-width: 200px;
}

.np-header-account-menu a {
	display: block;
	padding: 10px 12px;
	border-radius: 10px;
	color: #111;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease;
	white-space: nowrap;
}

.np-header-account-menu a:hover {
	background: #f7f5f2;
}

.np-header-account-guest {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	min-width: 200px;
}

.np-header-account-guest-link {
	display: block;
	padding: 10px 16px;
	border: 1px solid var( --wd-primary-color, #8a1f1f );
	border-radius: 999px;
	color: var( --wd-primary-color, #8a1f1f );
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.np-header-account-guest-link:hover {
	background: #fdf4f4;
}

.np-header-account-guest-link--primary {
	background: var( --wd-primary-color, #8a1f1f );
	color: #fff;
}

.np-header-account-guest-link--primary:hover {
	filter: brightness( 0.92 );
	background: var( --wd-primary-color, #8a1f1f );
}

/* Minikorgen - inre markup/klasser kommer från Woodmarts egen
   cart/mini-cart.php-mall (se doc-kommentaren vid
   np_render_site_header_cart_panel() i inc/site-header.php), vi styr bara
   mått/layout runt den, byter aldrig ut dess funktionella klasser
   (+/- knappar, "ta bort"-länk m.m. - de måste vara orörda för att
   Woodmarts egen AJAX-hantering av dem ska fortsätta fungera). */
.np-header-panel-card--cart {
	width: min( 360px, 86vw );
}

/* Fri frakt-förloppet - egen sektion högst upp i panelen, se
   np_render_site_header_cart_shipping_progress() i inc/site-header.php. */
.np-header-cart-shipping {
	padding: 12px 14px 10px;
	border-bottom: 1px solid #f0f0f0;
}

.np-header-cart-shipping-message {
	margin: 0 0 8px;
	font-size: 12px;
	color: #555;
}

.np-header-cart-shipping-message strong {
	color: var( --wd-primary-color, #8a1f1f );
}

.np-header-cart-shipping-message--done {
	color: #2e7d32;
	font-weight: 700;
}

/* Extra vertikalt utrymme runt själva stapeln (padding-block) - så
   kundvagns-badgen (som medvetet är bredare/högre än den tunna 6px-
   stapeln, se .np-header-cart-shipping-cart nedan) får plats att "rida"
   ovanpå den utan att klippas mot panelens övriga innehåll. */
.np-header-cart-shipping-bar-wrap {
	position: relative;
	padding-block: 5px;
}

.np-header-cart-shipping-bar {
	height: 6px;
	border-radius: 999px;
	background: #eee;
	overflow: hidden;
}

.np-header-cart-shipping-bar-fill {
	height: 100%;
	border-radius: 999px;
	background: var( --wd-primary-color, #8a1f1f );
	/* Samma kurva/varaktighet som vagnens left-övergång nedan - håller de
	   två rörelserna perfekt i takt med varandra. */
	transition: width 0.6s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.np-header-cart-shipping-bar-fill--done {
	background: #2e7d32;
}

/* Kundvagnen som "åker" på stapeln - samma ikon som varukorgs-länken i
   headern (se np_render_site_header_cart_icon()), bara nedskalad. left:
   sätts inline per rad (clamp() i PHP:n, se
   np_render_site_header_cart_shipping_progress()) så position/mittpunkt
   alltid håller sig innanför stapelns egna kanter. */
.np-header-cart-shipping-cart {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var( --wd-primary-color, #8a1f1f );
	color: #fff;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.25 );
	transform: translate( -50%, -50% );
	/* Längre, mjukare "ease-out"-kurva (mycket snabb start, lång utrullning
	   i slutet) istället för den tidigare linjära/korta 0.3s ease - känns
	   mer som att vagnen glider fram än att den hoppar till läge. */
	transition: left 0.6s cubic-bezier( 0.22, 1, 0.36, 1 ), background-color 0.3s ease;
	will-change: left;
}

.np-header-cart-shipping-cart svg {
	width: 11px;
	height: 11px;
}

.np-header-cart-shipping-cart--done {
	background: #2e7d32;
}

/* OBS: Sätt INTE overflow/max-height här - Woodmarts egen .wd-scroll-content
   (barn till den här boxen, se nedan) skrollar redan sig själv. Ett andra
   overflow-lager på den HÄR (yttre) boxen ovanpå det gav två fristående
   skrollbara lager staplade på varandra (skrolla klart det yttre ~2/3,
   sen "hoppar" ett till skrollområde in) - precis det buggiga
   dubbel-scroll-beteendet vi försöker undvika. */
.np-header-panel-card--cart .shopping-cart-widget-body {
	padding: 10px;
}

/* Styr Woodmarts EGEN skroll-variabel (läses av .wd-scroll-content i
   temats style.css: "max-height: var(--wd-scroll-h, 50dvh)") istället för
   att bygga ett konkurrerande skrollområde - så blir det garanterat bara
   EN skrollbar yta i panelen. */
.np-header-panel-card--cart .wd-scroll-content {
	--wd-scroll-h: 320px;
	overscroll-behavior: contain;
}

/* Produktraden - egen padding/avdelare/hover istället för Woodmarts
   ".cart-widget-side"-scopade variant av samma rad (kräver deras egen
   off-canvas-wrapper som vi inte använder, se doc-kommentaren ovanför
   .np-header-panel-card--cart). */
.np-header-panel-card--cart .woocommerce-mini-cart-item {
	padding: 6px 30px 6px 4px; /* extra marginal höger om "ta bort"-krysset */
	border-bottom: 1px solid #f0f0f0;
	transition: background-color 0.15s ease;
}

.np-header-panel-card--cart .woocommerce-mini-cart-item:hover {
	background: #fafafa;
}

.np-header-panel-card--cart .woocommerce-mini-cart-item:last-child {
	border-bottom: none;
}

.np-header-panel-card--cart .cart-item-image {
	margin-inline-end: 12px;
}

/* object-fit:cover + fast mått - bilden fyller alltid exakt 44x44px och
   croppas centrerat, oavsett källbildens egna mått/proportioner/kvalitet
   (varierar just nu mellan produkter tills riktiga produktfoton är på
   plats för alla - men renderingen här blir alltid konsekvent oavsett). */
.np-header-panel-card--cart .cart-item-image img {
	display: block;
	width: 44px;
	height: 44px;
	border: 1px solid #f0f0f0;
	border-radius: 10px;
	background: #fafafa;
	object-fit: cover;
}

.np-header-panel-card--cart .wd-entities-title {
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}

.np-header-panel-card--cart .cart-info div.quantity {
	margin-bottom: 4px;
}

.np-header-panel-card--cart .cart-info span.quantity {
	margin-top: 0;
	font-size: 12px;
}

.np-header-panel-card--cart .cart-info span.quantity .woocommerce-Price-amount {
	color: var( --wd-primary-color, #8a1f1f );
	font-weight: 700;
}

/* Ta bort-krysset (Woodmarts egen .remove) - flyttas in lite och matchar
   samma "blir rött vid hover"-känsla som resten av sajtens ×-knappar. */
.np-header-panel-card--cart .remove {
	top: 8px !important;
	inset-inline-end: 2px !important;
}

.np-header-panel-card--cart .remove:hover {
	color: var( --wd-primary-color, #8a1f1f ) !important;
}

/* Antalsväljaren - samma "pill" som resten av sajten (.np-qty-stepper i
   tier-pricing.css) istället för Woodmarts helt ostylade
   <button class="minus btn">/<button class="plus btn"> här (deras egna
   input[type=button]-regler matchar bara riktiga <input>, inte <button>,
   så de kom annars ut som råa, oformaterade webbläsarknappar). */
.np-header-panel-card--cart div.quantity {
	height: 28px;
	border: 1px solid #ddd;
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}

.np-header-panel-card--cart div.quantity .minus,
.np-header-panel-card--cart div.quantity .plus {
	flex: 0 0 auto;
	width: 26px;
	min-width: 0;
	padding: 0;
	border: none;
	background: transparent;
	color: #333;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.np-header-panel-card--cart div.quantity .minus:hover,
.np-header-panel-card--cart div.quantity .plus:hover {
	background: #f5f5f5;
	color: var( --wd-primary-color, #8a1f1f );
}

.np-header-panel-card--cart div.quantity input.qty {
	width: 30px;
	min-height: 0 !important;
	border: none;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	background: transparent;
	color: #111;
	font-size: 12px;
	text-align: center;
}

.np-header-panel-card--cart .shopping-cart-widget-footer {
	padding: 12px 14px;
	border-top: 1px solid #f0f0f0;
	background: #fafafa;
}

.np-header-panel-card--cart .woocommerce-mini-cart__total {
	margin: 0 0 10px;
	font-size: 14px;
}

.np-header-panel-card--cart .woocommerce-mini-cart__buttons {
	display: flex;
	gap: 8px;
	margin: 0;
}

.np-header-panel-card--cart .woocommerce-mini-cart__buttons a {
	flex: 1 1 auto;
	text-align: center;
	border-radius: 999px !important;
}

.np-header-panel-card--cart .wd-empty-mini-cart {
	padding: 24px 16px;
	text-align: center;
}

@media ( min-width: 1200px ) {
	.np-header-account-wrap:hover .np-header-account-panel,
	.np-header-account-wrap:focus-within .np-header-account-panel,
	.np-header-cart-wrap:hover .np-header-cart-panel,
	.np-header-cart-wrap:focus-within .np-header-cart-panel {
		opacity: 1;
		visibility: visible;
		transform: translateY( 0 );
		pointer-events: auto;
	}
}

.np-header-cart {
	position: relative;
	display: flex;
	align-items: center;
	color: #111;
	text-decoration: none;
}

.np-header-cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: var( --wd-primary-color, #8a1f1f );
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

/* Sökrutan - egen full-bredd-rad på mobil (flex-basis:100% tvingar den
   till en ny rad i den wrap:ande huvudraden ovan). */
.np-header-search {
	order: 4;
	position: relative;
	flex-basis: 100%;
	width: 100%;
}

.np-header-search-input {
	box-sizing: border-box;
	width: 100%;
	padding: 11px 46px 11px 16px;
	border: 1px solid #ddd;
	border-radius: 999px;
	font: inherit;
	font-size: 14px;
	background: #f7f7f7;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.np-header-search-input:hover {
	border-color: #ccc;
}

.np-header-search-input:focus {
	outline: none;
	border-color: var( --wd-primary-color, #8a1f1f );
	background: #fff;
	box-shadow: 0 0 0 3px rgba( 138, 31, 31, 0.08 );
}

.np-header-search-submit {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY( -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: none;
	color: #555;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.np-header-search-submit:hover {
	background: var( --wd-primary-color, #8a1f1f );
	color: #fff;
	transform: translateY( -50% ) scale( 1.06 );
}

/* --- Live-sökdropdown (se assets/js/header-search.js) -------------------- */

.np-header-search-results {
	position: absolute;
	top: calc( 100% + 8px );
	left: 0;
	right: 0;
	z-index: 60;
	max-height: 420px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.12 );
	padding: 8px;
}

.np-header-search-results[hidden] {
	display: none;
}

.np-header-search-section + .np-header-search-section {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid #f0f0f0;
}

.np-header-search-section-title {
	padding: 6px 10px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #999;
}

.np-header-search-product,
.np-header-search-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	color: #111;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.np-header-search-product:hover,
.np-header-search-product:focus-visible,
.np-header-search-brand:hover,
.np-header-search-brand:focus-visible {
	background: #f7f5f2;
	outline: none;
}

.np-header-search-product img {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	object-fit: cover;
	flex: 0 0 auto;
	background: #f5f5f5;
}

.np-header-search-brand img,
.np-header-search-brand-fallback {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: contain;
	flex: 0 0 auto;
	background: #f5f5f5;
}

.np-header-search-product-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.np-header-search-product-name,
.np-header-search-brand-name {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.np-header-search-product-price {
	font-size: 12px;
	color: #777;
}

.np-header-search-empty {
	margin: 0;
	padding: 16px 10px;
	font-size: 13px;
	color: #777;
	text-align: center;
}

.np-header-search-view-all {
	display: block;
	margin-top: 6px;
	padding: 10px;
	border-top: 1px solid #f0f0f0;
	border-radius: 0 0 10px 10px;
	color: var( --wd-primary-color, #8a1f1f );
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.np-header-search-view-all:hover {
	background: #fdf4f4;
}

/* --- Nav-rad: desktop-meny + leveransrad --------------------------------
   Båda är desktop-only på mobil (menyn bor i drawern, leveransraden är
   inte kritisk nog för den trängsta ytan) - se media query längst ner
   för var de faktiskt slås på. */
.np-header-nav-row {
	display: none;
}

.np-header-nav-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.np-header-nav-menu a {
	position: relative;
	display: block;
	padding: 12px 14px;
	color: #333;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s ease;
}

/* Underlinje som växer in från vänster vid hover/aktiv sida, istället för
   ett abrupt färgbyte - matchar samma "grow-in"-känsla som redan finns på
   t.ex. recensionssidans flikar. */
.np-header-nav-menu a::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 6px;
	height: 2px;
	border-radius: 1px;
	background: var( --wd-primary-color, #8a1f1f );
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 0.2s ease;
}

.np-header-nav-menu a:hover,
.np-header-nav-menu .current-menu-item > a {
	color: var( --wd-primary-color, #8a1f1f );
}

.np-header-nav-menu a:hover::after,
.np-header-nav-menu .current-menu-item > a::after {
	transform: scaleX( 1 );
}

.np-header-delivery-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: #666;
}

.np-header-delivery-row li {
	position: relative;
}

.np-header-delivery-row li::before {
	content: '✓';
	margin-right: 4px;
	color: #2e7d32;
	font-weight: 800;
}

/* Diskret avdelare mellan punkterna - samma "in i det befintliga gap:et"-
   teknik som förtroende-märkets avdelare ovan, lägger inte till bredd. */
.np-header-delivery-row li:not( :last-child )::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -11px;
	width: 1px;
	height: 11px;
	background: #ddd;
	transform: translateY( -50% );
}

/* --- Mobil-drawer --------------------------------------------------------
   Egen enkel slide-in-panel (inte Woodmarts off-canvas-modul) - overlay
   + panel, öppna/stäng sköts av assets/js/site-header.js. */
.np-header-drawer[hidden] {
	display: none;
}

body.np-header-drawer-open {
	overflow: hidden;
}

.np-header-drawer {
	position: fixed;
	inset: 0;
	z-index: 9999;
}

.np-header-drawer-overlay {
	position: absolute;
	inset: 0;
	background: rgba( 20, 20, 20, 0.5 );
}

.np-header-drawer-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min( 320px, 84vw );
	height: 100%;
	padding: 20px;
	background: #fff;
	overflow-y: auto;
	animation: np-header-drawer-in 0.2s ease;
}

@keyframes np-header-drawer-in {
	from {
		transform: translateX( -100% );
	}

	to {
		transform: translateX( 0 );
	}
}

.np-header-drawer-close {
	align-self: flex-end;
	width: 32px;
	height: 32px;
	margin-bottom: 8px;
	border: none;
	border-radius: 50%;
	background: none;
	color: #555;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.np-header-drawer-close:hover {
	background: #f5f5f5;
	color: #111;
	transform: scale( 1.08 );
}

.np-header-drawer-menu {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.np-header-drawer-menu a {
	display: block;
	padding: 12px 4px;
	border-bottom: 1px solid #f0f0f0;
	color: #111;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.np-header-drawer-footer {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #f0f0f0;
}

.np-header-drawer-account {
	color: #111;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

/* --- Desktop (1200px, temats egen desktop-brytpunkt) --------------------- */

@media ( min-width: 1200px ) {
	.np-header-mobile-toggle {
		display: none;
	}

	.np-header-logo {
		order: 1;
		flex: 0 0 auto;
		text-align: left;
	}

	.np-header-logo img {
		max-height: 44px;
	}

	.np-header-search {
		order: 2;
		flex: 1 1 auto;
		max-width: 480px;
		margin-inline: 24px;
	}

	.np-header-actions {
		order: 3;
		margin-left: auto;
	}

	.np-header-account-wrap {
		display: block;
	}

	.np-header-account {
		display: inline-flex;
	}

	.np-header-trust-badge {
		display: inline-flex;
	}

	.np-header-nav-row {
		display: block;
		border-top: 1px solid #f2f2f2;
	}

	.np-header-nav-row-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 4px 24px;
	}

	.np-header-drawer {
		display: none;
	}
}