/* Startsidan — hero, USP, Trustpilot, kategorier, produktrad, guide, B2B */

/* =========================================================================
   Startsida — hero (ljus variant) + USP-ikonrad
   ========================================================================= */

main#brx-content .brxe-section { padding: 0; }
main#brx-content .brxe-container { max-width: var(--nws-content-width); width: 100%; margin-inline: auto; }

.nws-eyebrow {
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nws-black);
}

.nws-hero { background: var(--nws-grey-surface); }
.nws-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 4.4rem;
	align-items: center;
	padding: var(--space-2xl) var(--nws-gutter);
}
.nws-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.nws-hero__copy .nws-eyebrow { margin-bottom: 2rem; }
.nws-hero__title {
	margin: 0 0 2rem;
	max-width: 15em;
	text-wrap: balance;
}
.nws-hero__lead {
	font-size: var(--text-l);
	line-height: 1.5;
	color: var(--nws-grey);
	margin: 0 0 3.2rem;
	max-width: 30em;
}
.nws-hero__actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.4rem 2rem;
	margin-bottom: 2.6rem;
}
.nws-btn--lg { font-size: 1.9rem; padding: 1.9rem 3rem; }
.nws-underline-link {
	font-size: 1.9rem;
	font-weight: 500;
	color: var(--nws-black);
	border-bottom: 1.5px solid var(--nws-black);
	padding-bottom: 0.3rem;
}
.nws-underline-link:hover { color: var(--nws-black); border-bottom-color: var(--nws-green); }
.nws-hero__facts {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem 2.6rem;
	font-size: 1.7rem;
	color: var(--nws-grey);
	line-height: 1;
}
.nws-hero__media {
	background: var(--nws-white);
	border-radius: var(--nws-radius-l);
	min-height: 36rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nws-hero__media-note { font-size: 1.6rem; color: var(--nws-grey); }

/* USP-ikonrad */
/* Tre fördelar (2026-10-30: "24 testpunkter" borttagen), ingen linje under. */
.nws-usps { background: var(--nws-grey-surface); }
/* Tre punkter kant till kant: första vid vänsterkanten, sista vid höger. */
.nws-usps__grid {
	width: 100%;
	display: flex;
	flex-direction: row; /* .brxe-block är kolumn som Bricks-default */
	justify-content: space-between;
	gap: 2.6rem;
	padding: 3rem var(--nws-gutter);
}
.nws-usps__grid > .nws-usp { flex: 0 1 auto; }
.nws-usp { display: flex; flex-direction: row; gap: 1.4rem; align-items: flex-start; }
.nws-usp { position: relative; }
.nws-usp::before {
	content: "";
	width: 3.4rem;
	height: 3.4rem;
	flex: none;
	border-radius: 0.8rem;
	background-color: var(--nws-white);
}
.nws-usp::after {
	content: "";
	position: absolute;
	left: 0.75rem;
	top: 0.75rem;
	width: 1.9rem;
	height: 1.9rem;
	background: var(--nws-green);
	-webkit-mask: var(--nws-usp-svg) center / contain no-repeat;
	mask: var(--nws-usp-svg) center / contain no-repeat;
}
.nws-usp--test { --nws-usp-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3h6a1 1 0 0 1 1 1v1H8V4a1 1 0 0 1 1-1z"/><path d="M8 5H6a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2"/><path d="M9 11l2 2 4-4"/><path d="M9 17h6"/></svg>'); }
.nws-usp--shield { --nws-usp-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5.5c0 4.3-2.9 7.6-7 9.5-4.1-1.9-7-5.2-7-9.5V6l7-3z"/><path d="M9 12l2 2 4-4"/></svg>'); }
.nws-usp--return { --nws-usp-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9h11a4.5 4.5 0 0 1 0 9H9"/><path d="M7.5 5.5L4 9l3.5 3.5"/></svg>'); }
.nws-usp--lock { --nws-usp-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="10.5" width="15" height="9.5" rx="1.5"/><path d="M8 10.5V7.5a4 4 0 0 1 8 0v3"/><path d="M12 14v2.5"/></svg>'); }
/* Cirkulär IT och Sparar jordens resurser (2026-10-15, ersätter öppet köp och
   dataradering i trygghetsraden). */
.nws-usp--circular { --nws-usp-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 0 1-13.7 5.6"/><path d="M4 12a8 8 0 0 1 13.7-5.6"/><path d="M17.5 3v3.6h-3.6"/><path d="M6.5 21v-3.6h3.6"/></svg>'); }
.nws-usp--leaf { --nws-usp-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19c0-8 5-13 15-14-1 10-6 15-14 15"/><path d="M5 19l8-8"/></svg>'); }
.nws-usp__title { font-size: 1.8rem; font-weight: 600; line-height: 1.2; margin-bottom: 0.5rem; }
.nws-usp__text { font-size: 1.5rem; line-height: 1.4; color: var(--nws-grey); }

@media (max-width: 991px) {
	.nws-hero__grid { grid-template-columns: 1fr; padding: 3.2rem 1.6rem; gap: 2.4rem; }
	.nws-hero__media { min-height: 22rem; }
	.nws-usps__grid { flex-direction: column; padding: 2.4rem 1.6rem; }
}
@media (max-width: 478px) {
	.nws-hero__actions .nws-btn--lg { width: 100%; text-align: center; }
}

/* =========================================================================
   Startsida — Trustpilot, kategorigrid, produktkort, skickguide, B2B
   ========================================================================= */

.nws-section-title { margin: 0; }
.nws-section-sub { font-size: 1.7rem; color: var(--nws-grey); margin-top: 0.8rem; }

/* Trustpilot-rad */
.nws-trustrow { border-bottom: 1px solid var(--nws-grey-soft); }

/* Varumärkesbandet — sektionen. Bandet självt bor i brands.css; det här är
   ytterramen, samma avgränsning som USP-raden och Trustpilot-raden ovanför. */
.nws-brandband { border-bottom: 1px solid var(--nws-grey-soft); }
.nws-brandband__row { padding: 4.2rem var(--nws-gutter); }
@media (max-width: 767px) {
	.nws-brandband__row { padding: 3.2rem var(--nws-gutter); }
}
.nws-trustrow__row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem 1.8rem;
	padding: 2rem var(--nws-gutter);
	line-height: 1;
}
.nws-trustrow__label { font-size: 1.7rem; font-weight: 600; }
.nws-trustrow__stars { display: inline-flex; gap: 0.3rem; }
.nws-trustrow__stars span {
	width: 2.4rem;
	height: 2.4rem;
	background: var(--nws-trustpilot);
	border-radius: 0.3rem;
	display: inline-block;
	position: relative;
}
.nws-trustrow__stars span::after {
	content: "";
	position: absolute;
	inset: 0.3rem;
	background: var(--nws-white);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3l2.47 6.04 6.53.49-4.99 4.24 1.55 6.36L12 16.7l-5.56 3.43 1.55-6.36L3 9.53l6.53-.49z" fill="black"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3l2.47 6.04 6.53.49-4.99 4.24 1.55 6.36L12 16.7l-5.56 3.43 1.55-6.36L3 9.53l6.53-.49z" fill="black"/></svg>') center / contain no-repeat;
}
.nws-trustrow__score { font-size: 1.7rem; color: var(--nws-grey); }

/* Kategorigrid */
.nws-cats > .brxe-container { padding: var(--space-xl) var(--nws-gutter); display: flex; flex-direction: column; gap: 2.4rem; }
/* Kategoriraden. Utan skript (byggaren, "minska rörelse") en rad att
   scrolla i sidled; med nws-catrail.js en oändlig slinga som stannar när
   musen eller fokus är på den. */
/* Fyra kort i bredd (kundens önskemål 2026-10-30): bredden räknas från
   radens bredd med container-enheter så den gäller även inne i slingans
   spår (max-content). */
.nws-cats__grid {
	--nws-catcard-gap: 1.8rem;
	container-type: inline-size;
	display: flex;
	gap: var(--nws-catcard-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.nws-cats__grid > .nws-catcard { flex: 0 0 calc((100cqw - 3 * var(--nws-catcard-gap)) / 4); scroll-snap-align: start; }
.nws-cats__grid.is-rail {
	overflow: hidden;
	gap: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3.2rem, #000 calc(100% - 3.2rem), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 3.2rem, #000 calc(100% - 3.2rem), transparent);
}
/* Mellanrummet som marginal på varje kort, inte gap — då är spåret exakt
   två lika långa halvor och skarven osynlig. */
.nws-catrail__track { display: flex; width: max-content; animation: nws-rail var(--nws-rail-duration, 36s) linear infinite; }
.nws-catrail__track > .nws-catcard { flex: 0 0 calc((100cqw - 3 * var(--nws-catcard-gap)) / 4); margin-right: var(--nws-catcard-gap); }
.nws-cats__grid.is-rail:hover .nws-catrail__track,
.nws-cats__grid.is-rail:focus-within .nws-catrail__track { animation-play-state: paused; }
@keyframes nws-rail { to { transform: translateX(-50%); } }
/* Hela puffen grå (samma yta som produktkorten), utan ram och frånpris.
   Kunden bad om grönt 2026-10-30, Fredrik bytte till grått samma dag —
   produktfoton tonas fel mot grönt. */
.nws-catcard {
	border: 1px solid transparent; /* syns bara vid hover */
	border-radius: 1.4rem;
	overflow: hidden;
	background: var(--nws-grey-surface);
}
/* Fotot direkt på den grå ytan, som på produktkorten — den vita
   fotobakgrunden multipliceras bort. */
.nws-catcard__media {
	height: 14rem;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	color: var(--nws-grey);
}
/* Kategorins bild (nws_cat_image) — produktfoton på vit botten smälter in
   i den grå ytan, som i produktgalleriet. */
.nws-catcard__media { overflow: hidden; }
.nws-catcard__img { width: 100%; height: 100%; object-fit: contain; padding: 1.6rem 1.6rem 0.4rem; mix-blend-mode: multiply; }
.nws-catcard__body { padding: 1.6rem 1.6rem 1.8rem; }
.nws-catcard__name { display: block; font-size: 1.8rem; font-weight: 600; line-height: 1.2; }
.nws-catcard__name, .nws-catcard__name a { color: var(--nws-black); }
.nws-catcard__name:hover, .nws-catcard__name a:hover { color: var(--nws-black); }
a.nws-catcard__name::after, .nws-catcard__name a::after { content: ""; position: absolute; inset: 0; }
.nws-catcard { position: relative; }
.nws-catcard { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.nws-catcard:hover { border-color: var(--nws-grey); box-shadow: 0 6px 20px rgba(20, 24, 26, 0.07); }

.nws-catcard__meta { font-size: 1.4rem; line-height: 1.3; color: var(--nws-grey); margin-top: 0.4rem; }

/* Produktsektion */
.nws-products > .brxe-container { padding: 0 var(--nws-gutter) var(--space-xl); display: flex; flex-direction: column; gap: 2.4rem; }
.nws-products__head {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
}
.nws-underline-link--s { font-size: 1.7rem; }
/* Raden är en ul.products (Woo-loopens kort) — nollställ listans indrag. */
.nws-products__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}



/* Skickguide */
.nws-guide > .brxe-container { padding: 0 var(--nws-gutter) var(--space-xl); }
.nws-guide__card {
	background: var(--nws-grey-surface);
	border-radius: 1.8rem;
	padding: 4.8rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4.8rem;
	align-items: center;
}
.nws-guide__title { margin: 0 0 1.6rem; text-wrap: balance; }
.nws-guide__lead { font-size: var(--text-l); line-height: 1.5; color: var(--nws-grey); margin: 0 0 2.4rem; }
.nws-guide__rows { display: flex; flex-direction: column; gap: 1.2rem; }
.nws-guide__row {
	background: var(--nws-white);
	border-radius: 1.2rem;
	padding: 2rem 2.4rem;
	display: flex;
	flex-direction: row;
	gap: 2rem;
	align-items: center;
}
.nws-guide__grade {
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1;
	border: 1px solid var(--nws-grey-line);
	color: var(--nws-black);
	padding: 0.9rem 1.2rem;
	border-radius: var(--nws-radius-s);
	min-width: 9.6rem;
	text-align: center;
	flex: none;
}
.nws-guide__grade--top { background: var(--nws-black); border-color: var(--nws-black); color: var(--nws-green); }
.nws-guide__desc { font-size: 1.8rem; line-height: 1.4; color: var(--nws-grey); }

/* B2B */
/* Guider på startsidan (ersatte Företag 2026-10-30): tre senaste inläggen
   som .nws-artcard (guides.css), loopen i Bricks. */
.nws-guides > .brxe-container { padding: 0 var(--nws-gutter) var(--space-xl); display: flex; flex-direction: column; gap: 2.4rem; }
.nws-guides__grid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.nws-guides__cell { display: contents; }
@media (max-width: 991px) { .nws-guides__grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
	/* Efter grundregeln — annars vinner den fasta 56px-marginalen även på mobil. */
	.nws-guides > .brxe-container { padding-left: 1.6rem; padding-right: 1.6rem; }
}

.nws-b2b > .brxe-container { padding: 0 var(--nws-gutter) var(--space-xl); }
.nws-b2b__card {
	background: var(--nws-black);
	color: var(--nws-white);
	border-radius: 1.8rem;
	padding: 4.4rem 4.8rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4.8rem;
	align-items: center;
}
.nws-eyebrow--accent { color: var(--nws-green); }
.nws-b2b__copy .nws-eyebrow--accent { margin-bottom: 1.4rem; }
.nws-b2b__title { color: var(--nws-white); margin: 0 0 1.4rem; font-size: var(--text-2xl); text-wrap: balance; }
.nws-b2b__lead { font-size: 1.8rem; line-height: 1.5; color: rgba(255, 255, 255, 0.7); margin: 0 0 2.4rem; }
.nws-b2b__actions { display: flex; flex-direction: row; align-items: center; gap: 1.2rem 2rem; flex-wrap: wrap; }
.nws-underline-link--light { color: var(--nws-white); border-bottom-color: rgba(255, 255, 255, 0.45); font-size: 1.7rem; }
.nws-underline-link--light:hover { color: var(--nws-green); border-bottom-color: var(--nws-green); }
.nws-b2b__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.nws-b2b__stat { background: rgba(255, 255, 255, 0.08); border-radius: var(--nws-radius-m); padding: 2rem; }
.nws-b2b__stat-value {
	font-family: "DM Sans", sans-serif;
	font-size: 2.6rem;
	font-weight: 600;
	line-height: 1;
	margin-bottom: 0.6rem;
}
.nws-b2b__stat-label { font-size: 1.5rem; line-height: 1.4; color: rgba(255, 255, 255, 0.6); }

/* Responsivt */
@media (max-width: 991px) {
	.nws-cats > .brxe-container,
	.nws-products > .brxe-container,
	.nws-guide > .brxe-container,
	.nws-b2b > .brxe-container { padding-left: 1.6rem; padding-right: 1.6rem; }
	.nws-products__grid { grid-template-columns: repeat(2, 1fr); }
	.nws-guide__card, .nws-b2b__card { grid-template-columns: 1fr; padding: 2.8rem; gap: 2.8rem; }
	.nws-trustrow__row { padding: 1.6rem; }
}
@media (max-width: 478px) {
	.nws-products__head { flex-direction: column; align-items: flex-start; }
}
/* Mobil: produktraderna och kategoriraden sveps i sidled. Raden går ut till
   skärmkanten, men första kortet står i linje med marginalen och nästa
   kort sticker fram till höger. */
@media (max-width: 767px) {
	.nws-products__grid,
	.nws-cats__grid {
		display: flex;
		flex-direction: row; /* Bricks-block står annars i kolumn */
		flex-wrap: nowrap;
		gap: 1.2rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		width: calc(100% + 3.2rem); /* Bricks-block har width: 100% */
		max-width: none;
		margin: 0 -1.6rem;
		padding: 0 1.6rem;
		scroll-padding: 0 1.6rem;
	}
	.nws-products__grid::-webkit-scrollbar,
	.nws-cats__grid::-webkit-scrollbar { display: none; }
	/* Vit toning i högerkanten, som på menyraden: klistrad mot radens kant
	   medan man sveper, släcks (is-end, nws-catrail.js) vid sista kortet.
	   Negativ marginal tar ut radens gap så toningen inte knuffar korten. */
	.nws-products__grid::after,
	.nws-cats__grid::after {
		content: "";
		position: sticky;
		right: -1.6rem;
		flex: 0 0 6.4rem;
		margin-left: -7.6rem;
		align-self: stretch;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--nws-white) 85%);
		pointer-events: none;
		transition: opacity 0.2s;
	}
	.nws-products__grid.is-end::after,
	.nws-cats__grid.is-end::after { opacity: 0; }
	.nws-products__grid .nws-card { flex: 0 0 80%; scroll-snap-align: start; }
	.nws-cats__grid > .nws-catcard { flex-basis: 70%; }
}

/* Produktraderna: loopen ligger i ett omslag per rad (kategorin väljs där),
   kortet är komponenten. Omslaget ska inte synas i rutnätet. */
/* .nws-products__cell: borttagen 2026-10-30, loopen är själva li.nws-card */