/* 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 */
.nws-usps { background: var(--nws-grey-surface); border-bottom: 1px solid var(--nws-grey-soft); }
.nws-usps__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.6rem;
	padding: 3rem var(--nws-gutter);
}
.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>'); }
.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 { grid-template-columns: repeat(2, 1fr); padding: 2.4rem 1.6rem; }
}
@media (max-width: 478px) {
	.nws-usps__grid { grid-template-columns: 1fr; }
	.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; }
.nws-cats__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1.8rem;
}
.nws-catcard {
	border: 1px solid var(--nws-grey-line);
	border-radius: 1.4rem;
	overflow: hidden;
	background: var(--nws-white);
}
.nws-catcard__media {
	height: 12rem;
	background: var(--nws-grey-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	color: var(--nws-grey);
}
.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:hover { border-color: var(--nws-grey); }
.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; }
.nws-products__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}



/* 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 */
.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: field-gothic-compact, 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-cats__grid { grid-template-columns: repeat(3, 1fr); }
	.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-cats__grid { grid-template-columns: repeat(2, 1fr); }
	.nws-products__grid { grid-template-columns: 1fr; }
	.nws-products__head { flex-direction: column; align-items: flex-start; }
}