/**
 * Norsk VVS-Merking – brand adjustments on top of the inherited layout.
 *
 * The inherited header was built for a wide horizontal wordmark; the Norsk
 * VVS-Merking mark is a circular emblem.
 */

/* --------------------------------------------------------------------------
 * Header logo
 *
 * The logo size is set in Elementor, as a min-height per breakpoint on the
 * logo element - read the current values there. This rule only makes room
 * for it:
 *  - the element also carries width: 12% and height: 7px from the inherited
 *    header, which would squash the emblem;
 *  - with height: auto alone the image falls back to its intrinsic 199 px.
 * max-height: 0 sits below every min-height, and min-height always wins over
 * max-height, so Elementor's value is the size at every breakpoint. Change the
 * size in Elementor, not here. (If min-height were removed from every
 * breakpoint in Elementor, the logo would collapse to 0 px.)
 * -------------------------------------------------------------------------- */
.elementor-location-header .e-image-link-base {
	display: inline-flex;
	align-items: center;
}

.elementor-location-header .e-image-link-base .e-image-base {
	width: auto;
	height: auto;
	max-width: none;
	max-height: 0;
	object-fit: contain;
}

/* ---------- Footer logo ---------- */
.elementor-location-footer .elementor-widget-theme-site-logo img {
	height: auto;
	max-height: 110px;
	width: auto;
}

/* ---------- NS 813 product facts ---------- */
.nvm-ns813 {
	list-style: none;
	margin: 0 0 1.25em;
	padding: 0;
	display: grid;
	gap: .25em;
}

.nvm-ns813 li {
	display: flex;
	gap: .5em;
	font-size: .95em;
	line-height: 1.4;
}

.nvm-ns813__label {
	color: #606562;
	min-width: 11em;
}

.nvm-ns813__label::after {
	content: ":";
}

.nvm-ns813__value {
	font-weight: 600;
	color: #06090a;
}

@media (max-width: 480px) {
	.nvm-ns813 li {
		flex-direction: column;
		gap: 0;
	}

	.nvm-ns813__label {
		min-width: 0;
		font-size: .9em;
	}
}

/* ---------- Product options (includes/product-options.php) ----------
 * Pictograms, colour and the decal's text in the product form. The box is the
 * one ES Text on Image draws for its colour list and text field just above
 * (#f1f1f1, 16px 18px), the selects and the text field are the product
 * template's select (Elementor post 3185, 44 px, #9aa3ad). "Velg antall
 * faresymboler" is a row of radios that wraps on phones; the lists below it
 * are shown by the script (nvm-product-options.js). */
.nvm-po {
	margin: 0 0 16px;
	padding: 16px 18px;
	background: #f1f1f1;
	color: #1a1a1a;
	font-family: Inter, sans-serif;
}

/* Faresymboler 2/3/4: the lists stand above the variation price, in the
 * variation block - no grey box, as the template's own selects. */
.nvm-po.nvm-po--fixed {
	padding: 0;
	background: transparent;
}

.nvm-po .nvm-po__label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	color: #171717;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.nvm-po__required {
	color: #b42318;
}

.nvm-po .nvm-po__hint {
	margin: 0 0 8px;
	color: #3f4449;
	font-size: 14px;
	line-height: 1.5;
}

.nvm-po .nvm-po__field select,
.nvm-po .nvm-po__field input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid #9aa3ad;
	border-radius: 4px;
	background: #fff;
	color: #1a1a1a;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.4;
}

.nvm-po .nvm-po__field select:focus-visible,
.nvm-po .nvm-po__field input[type="text"]:focus-visible {
	border-color: #058343;
	outline: 3px solid rgba(5, 131, 67, .35);
	outline-offset: 2px;
}

/* Red frame for a field with a notice; the focus ring above still shows. */
.nvm-po .nvm-po__field [aria-invalid="true"] {
	border-color: #b42318;
	box-shadow: 0 0 0 1px #b42318;
}

/* Hello's reset gives a fieldset a frame and padding. */
.nvm-po .nvm-po__antall {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.nvm-po .nvm-po__field + .nvm-po__field,
.nvm-po .nvm-po__field + .nvm-po__antall,
.nvm-po .nvm-po__antall + .nvm-po__symbols,
.nvm-po .nvm-po__symbols .nvm-po__field + .nvm-po__field {
	margin-top: 16px;
}

.nvm-po .nvm-po__heading + .nvm-po__field {
	margin-top: 0;
}

.nvm-po .nvm-po__radios {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

.nvm-po .nvm-po__radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	margin: 0;
	color: #171717;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
}

.nvm-po .nvm-po__radio input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #058343;
}

.nvm-po .nvm-po__radio input:focus-visible {
	outline: 3px solid rgba(5, 131, 67, .35);
	outline-offset: 2px;
}

.nvm-po [hidden] {
	display: none !important;
}

.nvm-po .nvm-po__error {
	margin: 6px 0 0;
	color: #b42318;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

@media (max-width: 480px) {
	.nvm-po .nvm-po__radios {
		flex-direction: column;
		gap: 2px;
	}
}

/* ---------- Quantity field (PLAN A-17) ----------
 * The product page's quantity field is 58 px wide with 16 px padding, so
 * "200" showed as "2". Nordisk's template: 4.6em with .35em padding. The side
 * cart's quantity fields are not in form.cart and stay as they are. */
.single-product form.cart .quantity .qty {
	width: 4.6em;
	padding-left: .35em;
	padding-right: .35em;
}

/* ---------- TIP-Standard colour selector (includes/tip-standard-colour.php) ----------
 * The "Farge" selector replaces the colour row of the variation table. Only
 * that row is hidden (before snippet 44's script has run, too); the UV row
 * stays. Snippet 44's own rule (table.variations { display: none }) would
 * hide the UV select as well. */
form.variations_form:has(.nr-shared-colour-selector) tr:has(select[name="attribute_pa_vald-farg"]) {
	display: none;
}

/* ---------- Sample text on product cards (includes/text-on-image-cards.php) ----------
 * Nordisk's overlay (nordisk-rormarkning-text-on-image-overlay-css): the frame
 * takes the picture's size and becomes a container, so 1cqw is 1 % of the
 * picture - --nr-toi-font then gives the size the product page's preview
 * uses. The rows' scaleX comes from assets/js/nvm-text-on-image-overlay.js. */
.nr-toi-frame {
	container-type: inline-size;
	display: block;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width: 100%;
	line-height: 0;
}

.nr-toi-frame > img {
	display: block;
	width: 100%;
	height: auto;
}

/* The category cards (Angie "Kategori & Produkter – Produktkort"): the link is
 * a fixed-height flex box and the picture is contained in it. The frame takes
 * the picture file's proportion (--nr-toi-ar) and the link's height, so it is
 * exactly the letterboxed picture the percentages are measured against. */
.nr-product-image-link-4b7a2c91 > .nr-toi-frame {
	aspect-ratio: var(--nr-toi-ar, 1);
	flex: 0 0 auto;
	height: 100%;
	max-width: 100%;
	width: auto;
}

.nr-product-image-link-4b7a2c91 > .nr-toi-frame > img {
	height: 100% !important;
}

.nr-toi {
	align-items: center;
	display: flex;
	flex-direction: column;
	font-family: "ArialNarrow-Bold", "Arial Narrow", Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	justify-content: center;
	line-height: 1;
	overflow: hidden;
	padding: 1em 0;
	pointer-events: none;
	position: absolute;
	text-align: center;
	transform: translate(-50%, -50%);
}

@supports (container-type: inline-size) {
	.nr-toi {
		font-size: calc(var(--nr-toi-font, 15) * 1cqw);
	}
}

.nr-toi span {
	display: block;
	transform-origin: center;
	white-space: nowrap;
}

/* The card pictures are capped at 208 px (see the category cards below) and
 * the link has no fixed height on narrow screens, so the frame is sized like
 * the picture: the sample text then sits on the picture at every width. */
.kategori-produkter-wrapper-be8ffe31 .nr-product-image-link-4b7a2c91 > .nr-toi-frame,
.kategori-produkter-wrapper-be8ffe31 .product-img-be8ffe31 > .nr-toi-frame {
	height: auto;
	margin: 0 auto;
	max-height: 208px;
	max-width: 208px;
	width: 100%;
}

.kategori-produkter-wrapper-be8ffe31 .nr-product-image-link-4b7a2c91 > .nr-toi-frame > img,
.kategori-produkter-wrapper-be8ffe31 .product-img-be8ffe31 > .nr-toi-frame > img {
	height: auto !important;
	width: 100% !important;
}

/* WooCommerce product loops built by Elementor (home page, related products):
 * the card link is a two-column grid where the picture spans both columns at
 * the theme height (clamp 214-230 px, 224 px, 216 px). The frame takes that
 * place and the picture shape, so it is centred like the other pictures. */
.woocommerce-loop-product__link > .nr-toi-frame {
	grid-column: 1 / -1;
	justify-self: center;
	max-width: 100%;
	width: calc(var(--nr-toi-ar, 1) * clamp(214px, 17vw, 230px));
}

.woocommerce-loop-product__link > .nr-toi-frame > img {
	height: auto !important;
	width: 100% !important;
}

@media (max-width: 1100px) {
	.woocommerce-loop-product__link > .nr-toi-frame {
		width: calc(var(--nr-toi-ar, 1) * 224px);
	}
}

@media (max-width: 767px) {
	.woocommerce-loop-product__link > .nr-toi-frame {
		width: calc(var(--nr-toi-ar, 1) * 216px);
	}
}

/* ---------- Quote mode ---------- */
.nvm-quote-contact {
	margin: 1em 0 0;
	padding: .85em 1em;
	border-left: 3px solid #058343;
	background: #EEF2EF;
	font-size: .95em;
	line-height: 1.5;
	border-radius: 0 4px 4px 0;
}

.nvm-quote-contact a {
	font-weight: 600;
	color: #046b37;
	white-space: nowrap;
}

/* "Be om pris på e-post" where a product with price on request would have its
 * add-to-cart button (quote mode no). Same size and colours as that button in
 * the product template (Elementor post 3185 styles it inside form.cart only).
 * The second selector outweighs WooCommerce's .woocommerce a.button. */
.nvm-por-request a.nvm-por-mail,
.woocommerce .nvm-por-request a.button.nvm-por-mail {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin: 0;
	padding: 0 28px;
	border: 0;
	border-radius: 5px;
	background: #058343;
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .2s;
}

.nvm-por-request a.nvm-por-mail:hover,
.nvm-por-request a.nvm-por-mail:focus,
.woocommerce .nvm-por-request a.button.nvm-por-mail:hover,
.woocommerce .nvm-por-request a.button.nvm-por-mail:focus {
	background: #3c3f43;
	color: #fff;
	text-decoration: none;
}

.nvm-por-request a.nvm-por-mail:focus-visible {
	outline: 2px solid #25272a;
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.nvm-por-request a.nvm-por-mail,
	.woocommerce .nvm-por-request a.button.nvm-por-mail {
		width: 100%;
	}
}

/* Why a cart goes in as a request, and the invoice hint for guests: above the
 * block checkout and in the side cart. Same look as the contact box. */
.nvm-request-notice {
	margin: 0 0 1.25em;
	padding: .85em 1em;
	border-left: 3px solid #058343;
	background: #EEF2EF;
	color: #252729;
	font-size: .95em;
	line-height: 1.5;
	border-radius: 0 4px 4px 0;
}

.nvm-request-notice p {
	margin: 0;
}

.nvm-request-notice p + p {
	margin-top: .5em;
}

.nvm-request-notice a {
	font-weight: 600;
	color: #046b37;
}

.nvm-request-notice--checkout,
.nvm-request-notice--invoice {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

.nvm-request-notice--drawer {
	margin: 0 0 1em;
	font-size: .875em;
}

/* A price-on-request line in the block checkout's order summary. The Store API
 * can only give it 0,00 kr; nvm-tilbud-blocks.js marks the line, and the amount
 * gives way to the words the cart uses. */
.nvm-por-item .wc-block-components-order-summary-item__individual-prices,
.nvm-por-item .wc-block-components-order-summary-item__total-price > * {
	display: none !important;
}

.nvm-por-item .wc-block-components-order-summary-item__total-price::before {
	content: "Pris på forespørsel";
	color: #046b37;
	font-weight: 600;
	white-space: nowrap;
}

/* Screen readers: the line's hidden "Totalpris for 1 …: 0,00 kr" goes, and
 * "Pris på forespørsel" is read after the product name instead (the visible
 * text above sits in an aria-hidden column). */
.nvm-por-item > .screen-reader-text {
	display: none !important;
}

.nvm-por-item .wc-block-components-order-summary-item__description {
	position: relative;
}

.nvm-por-item .wc-block-components-order-summary-item__description::after {
	content: "Pris på forespørsel";
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The block checkout's summary, by what the cart holds (nvm-tilbud-blocks.js
 * sets the class on <body>). Only products with price on request: no 0,00 kr
 * for Delsum, Sum and the collapsed summary on mobile. Some of them: the sum
 * covers the priced products, and says the others come on top. */
body.nvm-por-only .wp-block-woocommerce-checkout-order-summary-subtotal-block .wc-block-components-totals-item__value > *,
body.nvm-por-only .wc-block-components-totals-footer-item .wc-block-components-totals-item__value > *,
body.nvm-por-only .wc-block-components-totals-footer-item .wc-block-components-totals-item__description,
body.nvm-por-only .wc-block-components-checkout-order-summary__title-price > * {
	display: none !important;
}

body.nvm-por-only .wp-block-woocommerce-checkout-order-summary-subtotal-block .wc-block-components-totals-item__value::before,
body.nvm-por-only .wc-block-components-totals-footer-item .wc-block-components-totals-item__value::before,
body.nvm-por-only .wc-block-components-checkout-order-summary__title-price::before {
	content: "Pris på forespørsel";
	color: #046b37;
	font-weight: 600;
}

body.nvm-por-only .wc-block-components-totals-footer-item .wc-block-components-totals-item__value::before {
	font-size: .75em;
	white-space: normal;
}

body.nvm-por-mixed .wc-block-components-totals-footer-item .wc-block-components-totals-item__value::after {
	content: "+ produkter med pris på forespørsel";
	display: block;
	margin-top: .35em;
	color: #4f5862;
	font-family: Inter, sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.35;
	text-align: right;
	white-space: normal;
}

/* The same note under the total on the cart page and in the side cart. */
.nvm-por-total-note {
	display: block;
	margin-top: .3em;
	color: #4f5862;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
}

.nr-cart-drawer__total-note {
	margin: -6px 0 0;
	text-align: end;
}

.nr-cart-drawer__total-note .nvm-por-total-note {
	margin-top: 0;
}

/* No product descriptions in the checkout's order summary (nvm-site switches
 * the block's own setting on; this covers a cached copy of the page). */
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description {
	display: none !important;
}

/* Payment terms under an invoice order's confirmation. */
.nvm-invoice-terms {
	margin: 1.5em 0;
}

/* The request list is not a shopping cart - soften anything that says "buy". */
.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce-checkout #order_review_heading {
	font-size: 1.15em;
}

/* --------------------------------------------------------------------------
 * "Bransjer vi leverer til" marquee
 * The snippet stretches every copy of the list to min-width:100% of the
 * container. On screens wider than the list itself that leaves dead space at
 * the end of each copy, which reads as a hole in the row. Size each copy to
 * its content instead and let nvm-marquee.js add copies until the track is
 * wide enough to cover the viewport.
 * -------------------------------------------------------------------------- */
.ail-marquee-content {
	min-width: max-content;
}

/* --------------------------------------------------------------------------
 * Header contact bar
 * Phone and e-mail sit in one inline icon list (element 4f3917d) inside a flex
 * cell that stops growing around tablet width. The widget clips its overflow,
 * so the e-mail address was cut off mid-word. Let the list wrap instead.
 * -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
	/* Elementor's own element CSS loads after this file, hence !important. */
	.elementor-element-c44677a {
		height: 45px !important;
		min-height: 45px;
		padding-block: 0 !important;
		align-items: center !important;
	}

	/* Elementor gives both cells half the row, which is too narrow for phone
	 * plus e-mail and wrapped the list onto a second line. Let the contact cell
	 * take the space it needs and the switch keep to its content. */
	.elementor-element-8e49597 {
		flex: 1 1 auto !important;
		width: auto !important;
		height: auto !important;
		flex-direction: row !important;
		align-items: center !important;
	}

	.elementor-element-b14eefe {
		flex: 0 0 auto !important;
		width: auto !important;
		height: auto !important;
		align-items: center !important;
	}

	.elementor-element-4f3917d {
		overflow: visible !important;
	}

	.elementor-element-4f3917d .elementor-icon-list-items {
		flex-wrap: nowrap !important;
	}
}

/* --------------------------------------------------------------------------
 * Card grids on the editorial subpages
 * The photos come straight from the client's site and have very different
 * aspect ratios, which left the rows ragged. Crop them to a common shape so
 * the titles line up; the cards themselves stretch to equal height.
 * -------------------------------------------------------------------------- */
.nvm-card {
	height: 100%;
}

.nvm-card__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* Card widths have to leave room for the 24px flex gap, otherwise three 33.33%
 * cards no longer fit on one row and the grid drops to two columns. */
.nvm-card--2 { width: calc((100% - 24px) / 2) !important; }
.nvm-card--3 { width: calc((100% - 48px) / 3) !important; }
.nvm-card--4 { width: calc((100% - 72px) / 4) !important; }

@media (max-width: 1024px) {
	.nvm-card--3,
	.nvm-card--4 { width: calc((100% - 24px) / 2) !important; }
}

@media (max-width: 640px) {
	.nvm-card { width: 100% !important; }
}

/* Photos beside text: the source images run from wide landscape to tall
 * portrait, which left one column towering over the other. Crop to a common
 * shape so the two columns stay balanced. */
.nvm-split__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 440px;
	object-fit: cover;
	display: block;
}

/* Two 50% columns plus a 40px flex gap overflow the row and wrap, which put the
 * photo above the text instead of beside it. */
.nvm-split__col { width: calc((100% - 40px) / 2) !important; }

@media (max-width: 768px) {
	.nvm-split__col { width: 100% !important; }
}

/* Made-to-order products carry no list price.
 * The theme zeroes the font-size on .price and lets each child set its own, so
 * this has to carry an explicit size or it renders invisible. */
.nvm-price-on-request {
	color: #046b37;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
}

/* "eks. mva" says nothing next to a price we do not quote. Elementor's
 * per-page CSS is more specific than this, hence !important. */
.price:has(> .nvm-price-on-request) .nr-tax-label,
.nr-product-price-4b7a2c91:has(> .nvm-price-on-request) .nr-tax-label,
.nr-cart-drawer__recommendation-price:has(> .nvm-price-on-request) .nr-tax-label {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * Product cards on the category archives
 *
 * Measured against rormarkning.se: a 320px card in a three-column grid, a fixed
 * 260px image area with the photo centred inside it, then kicker, uppercase
 * title, a rule, and price and button side by side. The inherited theme sizes
 * the card differently and hides three of those parts, so this restores the
 * reference geometry in our green.
 * -------------------------------------------------------------------------- */
.kategori-produkter-wrapper-be8ffe31 .nr-product-kicker-4b7a2c91,
.kategori-produkter-wrapper-be8ffe31 .nr-product-card-footer-4b7a2c91 {
	display: block !important;
}

/* Reference: three columns, 40px row gap and 20px between columns. */
@media (min-width: 1100px) {
	.kategori-produkter-wrapper-be8ffe31 .nr-featured-product-grid-4b7a2c91 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 40px 20px !important;
	}
}

.kategori-produkter-wrapper-be8ffe31 .nr-product-card-4b7a2c91 {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0 !important;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 3px 7px rgba(17, 24, 39, .18);
}

/* A fixed image area keeps the titles on one line across the row. */
/* The theme forces height:auto and padding:0 here with !important. */
.kategori-produkter-wrapper-be8ffe31 .nr-product-image-link-4b7a2c91 {
	display: flex;
	margin: 0 0 15px !important;
	padding: 16px !important;
	align-items: center;
	justify-content: center;
}

@media (min-width: 768px) {
	.kategori-produkter-wrapper-be8ffe31 .nr-product-image-link-4b7a2c91 {
		height: 260px !important;
	}
}

.kategori-produkter-wrapper-be8ffe31 .nr-product-image-link-4b7a2c91 img {
	width: auto !important;
	max-width: 208px !important;
	height: auto !important;
	max-height: 208px !important;
	object-fit: contain !important;
}

.kategori-produkter-wrapper-be8ffe31 .nr-product-card-body-4b7a2c91 {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 0 !important;
	/* The theme centres the column, which pulled the kicker off the text edge. */
	align-items: stretch !important;
	text-align: left;
}

.kategori-produkter-wrapper-be8ffe31 .nr-product-kicker-4b7a2c91 {
	margin: 0 !important;
	padding: 0 15px 4px !important;
	color: #058343;
	font-family: Oswald, sans-serif;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: .02em;
	text-align: left !important;
	text-transform: uppercase;
}

/* The theme centres this and paints it green; the reference is dark and left. */
.kategori-produkter-wrapper-be8ffe31 .nr-product-title-4b7a2c91 {
	margin: 0 !important;
	padding: 2px 15px 9px !important;
	color: #252A32 !important;
	font-family: Oswald, sans-serif !important;
	font-size: clamp(20px, 1.65vw, 24px) !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	letter-spacing: -.018em !important;
	text-align: left !important;
	text-transform: uppercase !important;
	text-wrap: balance;
}

.kategori-produkter-wrapper-be8ffe31 .nr-product-title-4b7a2c91:hover {
	color: #058343 !important;
}

.kategori-produkter-wrapper-be8ffe31 .nr-product-card-footer-4b7a2c91 {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: center;
	justify-content: space-between;
	margin: auto 15px 0 !important;
	padding: 0 !important;
	border-top: 1px solid #E3E4E3;
	text-align: left !important;
}

.kategori-produkter-wrapper-be8ffe31 .nr-product-price-4b7a2c91 {
	padding: 12px 0 16px !important;
	color: #252A32;
	font-family: Oswald, sans-serif;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
}

.kategori-produkter-wrapper-be8ffe31 .nr-product-price-4b7a2c91 .nr-tax-label {
	display: block;
	color: #606562;
	font-family: Inter, sans-serif;
	font-size: 13px;
	font-weight: 400;
}

.kategori-produkter-wrapper-be8ffe31 .nr-product-button-4b7a2c91 {
	display: inline-flex;
	height: 34px;
	margin: 10px 0 14px !important;
	padding: 0 14px !important;
	align-items: center;
	border-radius: 5px;
	background: #058343;
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease;
}

.kategori-produkter-wrapper-be8ffe31 .nr-product-button-4b7a2c91:hover,
.kategori-produkter-wrapper-be8ffe31 .nr-product-button-4b7a2c91:focus-visible {
	background: #046B37;
	color: #fff;
}

/* An empty <small> the widget always prints. */
.kategori-produkter-wrapper-be8ffe31 .nr-product-price-4b7a2c91 small:empty {
	display: none;
}

/* --------------------------------------------------------------------------
 * "Produkter" mega menu
 * The panel was 519px tall for nine links: 40px column headings, loose line
 * spacing and a help box stretched to the full row height. A dropdown should
 * read as a shortcut, so the headings become quiet labels and the help box
 * stops stretching.
 * -------------------------------------------------------------------------- */
.e-n-menu-content .e-con-inner,
.e-n-menu-content > .e-con {
	padding-block: 30px !important;
}

/* Column headings: quiet uppercase labels instead of display headings. */
.e-n-menu-content .e-heading-base {
	margin: 0 0 12px !important;
	color: #606562 !important;
	font-family: Inter, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: .09em !important;
	text-transform: uppercase !important;
}

.e-n-menu-content .nr-mega-links {
	margin-bottom: 0 !important;
}

.e-n-menu-content .nr-mega-links .elementor-icon-list-item {
	padding-bottom: 0 !important;
}

.e-n-menu-content .nr-mega-links .elementor-icon-list-item > a,
.e-n-menu-content .nr-mega-links .elementor-icon-list-item > span {
	padding-block: 5px;
	font-size: 15px;
	line-height: 1.35;
}

/* The help box: sized to its content, not to the tallest column. */
.e-n-menu-content .elementor-element-636a758 {
	align-self: flex-start !important;
	gap: 10px !important;
	padding: 20px !important;
	border-radius: 6px;
}

.e-n-menu-content .elementor-element-636a758 .e-heading-base {
	margin: 0 0 4px !important;
	color: #1A1A1A !important;
	font-family: Oswald, sans-serif !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.e-n-menu-content .elementor-element-636a758 p {
	font-size: 14px;
	line-height: 1.45;
}

/* Two compact buttons side by side rather than stacked. */
.e-n-menu-content .elementor-element-636a758 .elementor-button {
	padding: 10px 16px !important;
	font-size: 14px !important;
}

@media (min-width: 1025px) {
	.e-n-menu-content .elementor-element-636a758 {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: flex-start !important;
	}

	.e-n-menu-content .elementor-element-636a758 > .e-con {
		width: 100% !important;
	}

	.e-n-menu-content .elementor-element-636a758 > .elementor-widget-button {
		width: auto !important;
		flex: 0 0 auto !important;
	}
}

/* The product categories: [nvm_mega_menu] (includes/mega-menu.php) replaces
   the two hand-made link lists, so subcategories the shop adds in WooCommerce
   show up here by themselves. The section labels keep the quiet uppercase
   style above; a category is an Oswald heading with its subcategories as Inter
   links below it. Rørmerking flows in columns (each category kept whole) so a
   long list does not leave rows of empty space. The shortcode widget fills the
   room the two lists had, next to the help box. */
.e-n-menu-content .nvm-mega-widget {
	flex: 1 1 auto !important;
	max-width: none !important;
	min-width: 0;
	width: auto !important;
}

.nvm-mega {
	align-items: start;
	display: grid;
	gap: 0 40px;
	grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}

.nvm-mega__section {
	min-width: 0;
}

.e-n-menu-content .nvm-mega .nvm-mega__label {
	margin: 0 0 14px !important;
	padding: 0 !important;
	color: #606562 !important;
	font-family: Inter, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: .09em !important;
	text-transform: uppercase !important;
}

.nvm-mega ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nvm-mega li {
	margin: 0;
	padding: 0;
}

.nvm-mega .nvm-mega__groups {
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(0, 1fr);
}

.nvm-mega .nvm-mega__section--main .nvm-mega__groups {
	column-gap: 28px;
	columns: 3;
	display: block;
}

.nvm-mega .nvm-mega__group {
	min-width: 0;
}

.nvm-mega .nvm-mega__section--main .nvm-mega__group {
	break-inside: avoid;
	padding-bottom: 18px;
}

.e-n-menu-content .nvm-mega a {
	text-decoration: none;
	transition: color .15s ease;
}

.e-n-menu-content .nvm-mega .nvm-mega__group-link {
	color: #1A1A1A;
	display: inline-block;
	font-family: Oswald, sans-serif;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.25;
	padding: 2px 0;
}

.e-n-menu-content .nvm-mega .nvm-mega__sub {
	display: flex;
	flex-direction: column;
	margin-top: 4px;
}

.e-n-menu-content .nvm-mega .nvm-mega__sub a {
	color: #42474B;
	display: inline-block;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	padding: 4px 0;
}

.e-n-menu-content .nvm-mega .nvm-mega__all {
	color: #058343;
	display: inline-block;
	font-family: Inter, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	margin-top: 2px;
	padding: 2px 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.e-n-menu-content .nvm-mega .nvm-mega__group-link:hover,
.e-n-menu-content .nvm-mega .nvm-mega__group-link:focus-visible,
.e-n-menu-content .nvm-mega .nvm-mega__sub a:hover,
.e-n-menu-content .nvm-mega .nvm-mega__sub a:focus-visible {
	color: #058343;
}

.e-n-menu-content .nvm-mega .nvm-mega__all:hover,
.e-n-menu-content .nvm-mega .nvm-mega__all:focus-visible {
	color: #046B37;
}

.e-n-menu-content .nvm-mega a:focus-visible {
	border-radius: 2px;
	outline: 2px solid #058343;
	outline-offset: 2px;
}

/* Narrow desktops: two columns, so long names do not break in three. */
@media (min-width: 1025px) and (max-width: 1199px) {
	.nvm-mega .nvm-mega__section--main .nvm-mega__groups {
		columns: 2;
	}
}

/* --------------------------------------------------------------------------
 * Product cards on /produkter/
 * A different widget renders these - it prints only a photo and a title, so
 * there is no price or button to show. Matching the shell, the image area and
 * the title treatment of the category cards keeps the two pages looking like
 * one site.
 * -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
	.kategori-produkter-wrapper-be8ffe31 .product-grid-be8ffe31:not(.nr-featured-product-grid-4b7a2c91) {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 40px 20px !important;
	}
}

.kategori-produkter-wrapper-be8ffe31 .product-card-be8ffe31 {
	overflow: hidden;
	padding: 0 !important;
	border-radius: 5px;
	box-shadow: 0 3px 7px rgba(17, 24, 39, .18);
}

.kategori-produkter-wrapper-be8ffe31 .product-card-be8ffe31 .product-img-be8ffe31 {
	margin: 0 0 15px !important;
	padding: 16px !important;
}

@media (min-width: 768px) {
	.kategori-produkter-wrapper-be8ffe31 .product-card-be8ffe31 .product-img-be8ffe31 {
		height: 260px !important;
	}
}

.kategori-produkter-wrapper-be8ffe31 .product-card-be8ffe31 .product-img-be8ffe31 img {
	max-width: 208px !important;
	max-height: 208px !important;
}

.kategori-produkter-wrapper-be8ffe31 .product-name-be8ffe31 {
	margin: 0 !important;
	padding: 0 15px 20px !important;
	color: #252A32 !important;
	font-family: Oswald, sans-serif !important;
	font-size: clamp(20px, 1.65vw, 24px) !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	letter-spacing: -.018em !important;
	text-align: left !important;
	text-transform: uppercase !important;
	text-wrap: balance;
}

.kategori-produkter-wrapper-be8ffe31 .product-card-be8ffe31:hover .product-name-be8ffe31 {
	color: #058343 !important;
}

/* ==========================================================================
 * Mobile pass — measured against rormarkning.se at 390 x 844 (DPR 3)
 * Every rule below exists because our page differed from the reference at
 * phone width; the reference numbers are quoted in each comment.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * Header contact bar — reference top bar is a single 45px row, ours was 86px.
 * The bar carries a phone number and an e-mail address instead of the source
 * site's USP marquee. Elementor stacks the flex cell on mobile and the e-mail
 * then wraps mid-word, so the bar grew to three lines and pushed the logo row
 * down (header 162px vs the reference's 121px).
 *
 * At phone width the e-mail plus the phone plus the mva switch do not fit on
 * one line, so the e-mail is dropped here; it stays in the footer, on
 * /kontakt-oss/ and in the mobile menu.
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-element-c44677a {
		height: 45px !important;
		min-height: 45px;
		padding-block: 0 !important;
		align-items: center !important;
	}

	/* The cell holding the icon list turns into a column on mobile. */
	.elementor-element-8e49597 {
		flex-direction: row !important;
		align-items: center !important;
		height: auto !important;
	}

	.elementor-element-b14eefe {
		height: auto !important;
		align-items: center !important;
	}

	.elementor-element-4f3917d .elementor-icon-list-items {
		flex-wrap: nowrap !important;
		row-gap: 0;
	}

	/* Second item is the mailto link. */
	.elementor-element-4f3917d .elementor-icon-list-item:nth-child(n + 2) {
		display: none !important;
	}

	.elementor-element-4f3917d .elementor-icon-list-text {
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
 * Product grid — the reference drops to one column below 768px.
 * The custom CSS copied from the source page only defines a two-column rule
 * for max-width 1024px, so our grid stayed at two 168px columns at 390px while
 * the reference rendered one 350px card (card 354x365 with a 173px image
 * against our 170x436 with a 136px image).
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.kategori-produkter-wrapper-be8ffe31 .product-grid-be8ffe31,
	.product-grid-be8ffe31 {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* --------------------------------------------------------------------------
 * Overlapping-text blocks on /om-oss/ — the widget lets the photo keep its own
 * aspect ratio. The reference photo is landscape and lands on 250px at phone
 * width; ours are portrait and grew to 467px, so the image filled the screen
 * before any of the text showed. Crop to the reference height.
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	[class*="elementor-widget-overlapping_text_"] img[class*="-media"] {
		height: 250px !important;
		object-fit: cover;
	}
}

/* --------------------------------------------------------------------------
 * Category wrapper — the copied post-2984 CSS sets align-items: flex-start at
 * every width. Once the wrapper turns into a column below 768px that makes the
 * product column shrink to its content (333px instead of the full 354px the
 * reference gives it). The flex-start only belongs to the two-column desktop
 * layout, where it keeps the sidebar from stretching to full page height.
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.kategori-produkter-wrapper-be8ffe31 {
		align-items: stretch !important;
	}
}

/* --------------------------------------------------------------------------
 * Sajttiteln bredvid logotypen i sidhuvudet
 * Widgeten "Site Title" renderar <h4 class="elementor-heading-title"><a>…</a></h4>.
 * Elementors typografikontroll i widgeten träffar bara <h4>, medan kitets egen
 * regel `.elementor-kit-5 a` sätter font-family på <a> — så texten blev Inter 600
 * hur man än ändrade i widgeten. Därför sätts typografin här, på både <h4> och <a>.
 *
 * Widgeten ligger dessutom i samma nowrap-flexrad som logotypen och är
 * `flex: 0 0 auto`, så den klämde logotypen till 0 px bredd. Logotypen får därför
 * `flex: 0 0 auto` och titeln tillåts krympa. Logotypens storlek styrs i
 * Elementor, se "Header logo" överst i filen.
 *
 * Under 768 px döljs titeln: den föll ur sidhuvudet och la sig över hero-bilden,
 * och logotypen bär redan namnet i sin runda kant.
 * -------------------------------------------------------------------------- */
.elementor-location-header .e-image-link-base {
	flex: 0 0 auto;
}

.elementor-location-header .elementor-widget-theme-site-title {
	flex: 0 1 auto;
	min-width: 0;
}

.elementor-location-header .elementor-widget-theme-site-title .elementor-heading-title {
	text-decoration: none;
	display: block;
	white-space: nowrap;
}

/*
 * Elementor applies the typography controls to the heading element, while the
 * kit applies its body typography directly to the nested link. Let the link
 * inherit the widget values so the editor remains the source of truth.
 */
.elementor-location-header .elementor-widget-theme-site-title .elementor-heading-title a {
	font-family: inherit !important;
	font-size: inherit;
	font-weight: inherit !important;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit !important;
	text-decoration: inherit;
	display: inherit;
	white-space: inherit;
}

@media (max-width: 767px) {
	.elementor-location-header .elementor-widget-theme-site-title {
		display: none !important;
	}
}

/* Cart drawer: when closed, its panel sits translateX(100%) just off the right
   edge, but panel-inner's box-shadow (0 18px 42px) bleeds ~42px back into the
   viewport as a grey band. Hide the closed drawer - after the 220ms slide-out,
   so the closing animation still shows - which also takes its controls out of
   the tab order while it is aria-hidden. Opening is visible immediately. */
.nr-cart-drawer:not(.is-open) {
	transition: visibility 0s linear 220ms;
	visibility: hidden;
}

.nr-cart-drawer.is-open {
	visibility: visible;
}

/* "Kjøpes ofte sammen" is its own heading widget in the product template, styled
   like "Relaterte produkter", placed right before the upsell widget. The upsell
   widget prints nothing when a product has no upsells, so hide the heading then. */
.nvm-upsells-title:not(:has(+ .nvm-upsells li.product)) {
	display: none;
}

/* --------------------------------------------------------------------------
 * Plain pages: Personvern, Angrerett, Kjøpsvilkår
 * Hello centres .site-main only on a body without an elementor-page-* class,
 * and Elementor Pro puts elementor-page-3336 on every singular page (the draft
 * single-page template 3336 still holds a singular/page condition). Pages that
 * are not built in Elementor therefore ran edge to edge with no padding, while
 * the H1 sat centred at 1140px. Give them the 1280px column the Elementor pages
 * use (text starts where the H1 on Referanser starts) and keep paragraphs at a
 * readable line length. Elementor pages carry .elementor-page; checkout, cart
 * and account have layouts of their own - all are left alone.
 * -------------------------------------------------------------------------- */
body.page-template-default:not(.elementor-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .site-main {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: 1320px; /* 1280px column + 20px padding each side */
	padding: 40px 20px 64px;
	width: 100%;
}

body.page-template-default:not(.elementor-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .site-main .page-header .entry-title {
	font-size: clamp(38px, 5vw, 64px);
	margin-top: 0;
	max-width: none;
	padding-inline: 0;
}

body.page-template-default:not(.elementor-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .site-main .page-content {
	max-width: 860px;
}

@media (max-width: 767px) {
	body.page-template-default:not(.elementor-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .site-main {
		padding: 24px 20px 48px;
	}

	/* The kit's 40px H3 would outrank the 38px H1 here. */
	body.page-template-default:not(.elementor-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .site-main .page-content :is(h2, h3) {
		font-size: 26px;
	}
}