/**
 * OC4 visual parity vs live profilar.se (flatro + Bootstrap 3).
 * Loaded LAST so it wins over Bootstrap 5 reboot and custom.min.css leftovers.
 * Values taken from getComputedStyle on https://profilar.se/ (2026-08-12).
 */

/* ---- Type ---- */
html, body {
	font-family: 'Spartan', 'League Spartan', sans-serif !important;
	font-size: 14px;
	line-height: 20px;
	color: #333333;
	-webkit-font-smoothing: antialiased;
	scroll-behavior: auto;
	max-width: 100%;
}
/* Live custom.css: body { max-width:100%; overflow-x: hidden }. Use clip so
   body does not become a second scroll container (which would ignore html
   scrollbar-gutter and CLS-shift when the mega menu locks scroll). */
body {
	overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
	:root { scroll-behavior: auto !important; }
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Spartan', 'League Spartan', sans-serif !important;
}

/* BS5 headings use --bs-heading-color and do not inherit .jumbotron { color }.
   Live BS3 .jumbotron h1 is color: inherit → white on teal banners. */
.jumbotron,
.jumbotron p {
	color: #ffffff;
}
.jumbotron h1,
.jumbotron .h1 {
	color: #ffffff !important;
	font-family: 'Spartan', sans-serif !important;
	font-weight: 600;
	margin-top: 20px;
	margin-bottom: 10px;
}
/* Live BS3 .jumbotron p is 21px / 200, not body 14px. */
.jumbotron p {
	font-size: 21px;
	font-weight: 200;
	line-height: 30px;
	margin-bottom: 15px;
}

/* Live custom.min.css: button,input,select,textarea { font-family: Spartan }.
   BS5 .form-control does not inherit that, so textareas fall back to Times. */
button, input, select, textarea,
.form-control {
	font-family: 'Spartan', 'League Spartan', sans-serif !important;
}
#product_add_to_cart_form textarea,
#product_add_to_cart_form textarea.form-control {
	font-size: 14px;
	color: #555;
	height: auto !important;
	min-height: 52px;
	line-height: 1.4;
	appearance: auto;
	-webkit-appearance: textarea;
}
#product_add_to_cart_form textarea::-webkit-inner-spin-button,
#product_add_to_cart_form textarea::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: none;
}
#product_add_to_cart_form textarea::placeholder {
	font-family: 'Spartan', 'League Spartan', sans-serif !important;
	color: #999;
	font-style: italic;
	font-size: 12px;
	opacity: 1;
}

/* custom.min.css sets a:visited { color:#fff } which hides visited product names.
   Live custom wins over BS3 so links stay black; we restore that after BS5. */
a, a:link, a:visited {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #333333;
	text-decoration: none;
}

/* Homepage SEO block — live .start-brand-text-div-* (max 1080px, black in-text links). */
#common-home .pf-seo-wrap {
	max-width: 1080px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 15px 15px;
	box-sizing: border-box;
}
#common-home .pf-seo-wrap h2 {
	color: #000000;
	font-size: 25px;
	line-height: 35px;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 0;
}
#common-home .pf-seo-wrap p {
	color: #000000;
	font-size: 14px;
	line-height: 20px;
	font-weight: 300;
	text-align: justify;
	margin-top: 15px;
	padding-bottom: 25px;
}
#common-home .pf-seo-wrap a,
#common-home .pf-seo-wrap a:link,
#common-home .pf-seo-wrap a:visited,
#common-home .pf-seo-wrap a:hover,
#common-home .pf-seo-wrap a:active {
	color: #000000 !important;
	text-decoration: none !important;
}
@media (min-width: 768px) {
	#common-home .pf-seo-wrap { padding: 75px 15px; }
	#common-home .pf-seo-wrap h2 { font-size: 40px; }
}

.footer a, .footer a:visited,
.footer-links a, .footer-links a:visited {
	color: #aaaaaa;
}

.hero-video-btn,
.hero-video-btn:link,
.hero-video-btn:visited {
	color: #ffffff !important;
	font-family: 'Spartan', 'League Spartan', sans-serif;
}

/* Overlay buttons sit on photos. custom.min a:visited { color:#fff } and this
   file's a:visited { color:#000 } otherwise flip them per browser history. */
a.pf-ov-button.is-white.is-outline,
a.pf-ov-button.is-white.is-outline:link,
a.pf-ov-button.is-white.is-outline:visited,
a.pf-ov-button.is-white.is-outline:hover {
	color: #fff !important;
	background: transparent !important;
	border-color: #fff !important;
}
a.pf-ov-button.is-black.is-outline,
a.pf-ov-button.is-black.is-outline:link,
a.pf-ov-button.is-black.is-outline:visited,
a.pf-ov-button.is-black.is-outline:hover {
	color: #111 !important;
	background: transparent !important;
	border-color: #111 !important;
}
a.pf-ov-button.is-white.is-fill,
a.pf-ov-button.is-white.is-fill:link,
a.pf-ov-button.is-white.is-fill:visited {
	color: #111 !important;
	background: #fff !important;
	border-color: #fff !important;
}
a.pf-ov-button.is-black.is-fill,
a.pf-ov-button.is-black.is-fill:link,
a.pf-ov-button.is-black.is-fill:visited {
	color: #fff !important;
	background: #111 !important;
	border-color: #111 !important;
}
/* a.hero-video-btn:hover (0,2,1) beats home.twig .hero-video-btn:link { color:#fff !important }
   and custom.min a:hover { color:#eee } / a:visited { color:#fff }. */
.hero-video a:hover,
a.hero-video-btn:hover,
a.hero-video-btn:focus,
a.hero-video-btn:visited:hover,
a.hero-video-btn:visited:focus {
	color: #000000 !important;
	background-color: #ffffff;
}

.smallheader-text,
.smallheader-text:visited {
	color: #666666;
}

.header-main-menu > li > a,
.header-main-menu > li > a:visited {
	color: #000000;
	font-size: 13px;
	font-weight: 600;
}

/* ---- Product cards (live: 13px name, 11px "Från NN kr", black not blue) ---- */
.product-card .product-thumb h4,
.product-card .product-thumb h4 a,
.product-card .product-thumb h4 a:visited {
	color: #333333 !important;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}
.product-card .product-thumb .price {
	font-size: 11px;
	font-weight: 700;
	color: #333333;
}

/* Live category sections are sibling container-fluids on body. Local wraps them
   in another container-fluid (#product-category), which double-padded the grid
   and made product cards ~20px narrower. */
#product-category.container-fluid,
#product-search.container-fluid,
#product-special.container-fluid,
#product-manufacturer.container-fluid,
.category-page-container.container-fluid,
.manufacturer-info-page.container-fluid {
	padding-left: 0;
	padding-right: 0;
}

#content.all-product-show {
	padding-left: 15px;
	padding-right: 15px;
}

/* Live BS3 .container-fluid pads 15px; BS5 pads 12px. .row.product-card-row
   still uses −15px, which overflows the page by ~6px. */
.container-fluid:has(> .row.product-card-row),
.relaterade-produkter > .container-fluid {
	padding-left: 15px;
	padding-right: 15px;
}

/* Inline margin:-4px on product grids leaked past 0-padding cols below 1200px. */
.col-produkt-enskild.product-grid,
.col-produkt-enskild.product-list {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---- Category heading (live category.tpl: 30px, 48px from 992px). Skin paints
   .about-company-container #f4f4f4 — live overrides to white. */
.cat-heading,
h2.cat-heading,
h1.cat-heading,
h2.cat-heading.display-5,
h1.cat-heading.display-5 {
	font-family: 'Spartan', 'League Spartan', sans-serif !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	color: #333333 !important;
	text-transform: uppercase;
	display: inline-block;
	margin: 0;
	letter-spacing: normal;
}
@media (min-width: 992px) {
	.cat-heading,
	h2.cat-heading,
	h1.cat-heading,
	h2.cat-heading.display-5,
	h1.cat-heading.display-5 {
		font-size: 48px !important;
	}
}

.about-company-container {
	background-color: #ffffff !important;
}

.container-category-list {
	background: #ffffff;
	padding-top: 0;
	padding-bottom: 0;
	overflow: visible;
}
.container-category-list > .row {
	overflow: visible;
}
.container-category-list .col-md-11 {
	overflow: visible;
}

/* Live subcategory cards: 170px, beige square, 10px/400 labels, square black arrows */
.subcategory-carousel-wrap {
	position: relative;
	overflow: visible;
}
.subcategory-carousel {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* Kantfade (mask-image) borttagen 2026-08-19 på användarens begäran —
	   gjorde första/sista kortets text svårläst. */
}
.subcategory-carousel::-webkit-scrollbar { display: none; }
.subcategory-card-wrap { flex: 0 0 170px; scroll-snap-align: start; }
.subcategory-clip { overflow: hidden; position: relative; padding-top: 15px; margin-top: -15px; }
.subcategory-card { transition: transform .3s cubic-bezier(.33,1,.68,1); height: 100%; }
.subcategory-card-wrap:hover .subcategory-card { transform: translateY(-15px); }
.subcategory-link { display: block; text-decoration: none; color: #000; }
.subcategory-media {
	position: relative;
	width: 100%;
	padding-top: 100%;
	flex: 0 0 auto;
	background: #EDE8E2 !important;
	overflow: hidden;
	border-radius: 5px;
	border: 0 !important;
	aspect-ratio: unset;
}
.subcategory-media img {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.subcategory-footer { padding: 10px 2px 0 2px; }
.subcategory-title {
	font-weight: 400 !important;
	text-transform: uppercase;
	font-size: 10px !important;
	letter-spacing: .5px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.4;
	color: #000000 !important;
	min-height: calc(1.4em * 2);
}
.subcategory-card-wrap:hover .subcategory-title,
.subcategory-title:hover {
	font-weight: 600 !important;
	color: #000;
}
.subcategory-nav {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 3;
	border: 1px solid #000 !important;
	background: #fff !important;
	color: #000 !important;
	width: 34px;
	height: 34px;
	line-height: 32px;
	text-align: center;
	cursor: pointer;
	user-select: none;
	border-radius: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
.subcategory-nav:hover { background: #000 !important; color: #fff !important; }
.subcategory-nav.is-disabled { opacity: .01; cursor: default; }
.subcategory-nav.is-disabled:hover { background: #fff !important; color: #000 !important; }
.subcategory-nav.prev { left: 6px; }
.subcategory-nav.next { right: -40px; }

#category-description-div {
	font-size: 14px;
	line-height: 1.5;
	color: #8d8c8c;
	font-weight: 400;
}

#category-description-div h1 {
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: #8d8c8c !important;
	margin: 5px 0 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	display: block !important;
}

#category-description-div p {
	font-size: 14px;
	color: #8d8c8c;
	margin: 0 0 8px;
}

/* Live category.tpl: fade the last half of the collapsed description. */
.show-less-bottom {
	-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
	mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* Live breadcrumb: white bar, 10px grey links — skin paints it mint (#99b563). */
.breadcrumb {
	background-color: #ffffff !important;
	background-image: none !important;
	color: #e6e6e6 !important;
	display: block !important;
	flex-wrap: unset !important;
	padding: 15px 0 !important;
	margin-bottom: 0 !important;
	font-size: 14px;
	line-height: 20px;
}
.breadcrumb a,
.breadcrumb a:visited,
.breadcrumb a.text-muted,
.breadcrumb .text-muted {
	color: #a9a9a9 !important;
	font-size: 10px !important;
	font-weight: 400;
	text-decoration: none;
}
.breadcrumb .fa,
.breadcrumb .fas {
	color: #a9a9a9 !important;
	font-size: 10px;
}

.filter-btn,
.filter-btn.btn,
.filter-btn.btn-outline-dark {
	font-family: 'Spartan', sans-serif;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: normal;
	text-transform: uppercase !important;
	color: #000000 !important;
	background: #ffffff !important;
	border: 1px solid #000000 !important;
	border-radius: 0;
	padding: 10px 20px !important;
	line-height: 1.5;
}
.filter-btn:hover {
	background: #000000 !important;
	color: #ffffff !important;
}

/* Live category.tpl injects a right-aligned "Visa mer" via the readmore plugin. */
.category-desc .readmore-toggle,
#product-category .readmore-toggle,
#category-description-div + a[data-readmore-toggle] {
	display: block !important;
	width: 100%;
	text-align: right;
	margin-top: 5px;
	font-size: 14px;
	font-weight: 400;
	color: #ccc;
}

/* Category listings paginate via ajax load-more; the blog (same #product-category
   wrapper, .blog-page) keeps its live-style pagination. */
#product-category:not(.blog-page) .pagination-wrapper,
#product-category:not(.blog-page) .pagination {
	display: none !important;
}
#ajax-load-more-container {
	text-align: center;
	padding: 30px 0;
}
.ajax-load-more-btn,
.ajax-load-more-btn.btn,
.ajax-load-more-btn.btn-lg,
.ajax-load-more-btn:hover,
.ajax-load-more-btn:focus,
.ajax-load-more-btn:active {
	display: inline-block;
	padding: 15px 40px !important;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 16px;
	color: #ffffff !important;
	background: #000000 !important;
	border: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	letter-spacing: normal;
	line-height: 1.3 !important;
}

/* ---- Product page title (live .product-details .title h1 = 20px / 30px lh / #000) ---- */
#product-product h1,
#product-product h1.fs-2,
.product-details .title h1 {
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 30px !important;
	color: #000000 !important;
	letter-spacing: normal;
	margin: 0 0 6px;
	padding-bottom: 0 !important;
	border-bottom: 2px solid #ffffff !important;
}
#product-product .product-details.title,
#product-product .product-details .title {
	background: transparent !important;
	height: auto !important;
	padding: 0 !important;
	overflow: visible !important;
}
#product-product .single-product {
	max-width: none;
	margin: 0;
	width: 100%;
}
#product-product .produktoffertbutton,
#product-product .btn-addtocart,
#product-product #button-cart {
	box-shadow: 0 0 10px rgba(0,0,0,.15);
}

.product-min-qty {
	font-size: 10px;
	color: #333;
	margin: 0 0 12px;
}

#product-product .product-summan,
#esponi_OTF_Total.product-summan {
	font-size: 32px !important;
	line-height: 46px !important;
	font-weight: 700 !important;
	color: #000;
	letter-spacing: normal;
}

#product-product .produktoffertbutton {
	background: #3A7478 !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	padding: 14px !important;
	line-height: 27px;
}
#product-product .btn-addtocart,
#product-product #button-cart {
	background: #ffffff !important;
	color: #000000 !important;
	border: 1px solid #000000 !important;
	border-radius: 0 !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	padding: 14px !important;
	line-height: 27px;
}

.product-overlay-tab-inner {
	font-size: 14px !important;
	font-weight: 400 !important;
	padding: 15px 20px !important;
	line-height: normal;
}

/* ---- Don't let BS5 .small / .text-muted shrink category intro ---- */
.category-desc .small,
.category-desc.text-muted,
#category-description-div.small,
#category-description-div.text-muted {
	font-size: 14px !important;
	color: #8d8c8c !important;
}

/* Font Awesome: custom.min forces .fa { color:#fff } which hides icons on white. */
.breadcrumb .fa,
.breadcrumb .fas,
.filter-column .fa,
.filter-column .fas,
.header-main-menu .fa,
.search-box .fa,
.search-box .fas {
	color: inherit;
}

/* BS5 reboot: keep buttons square like live */
.btn {
	border-radius: 0;
}

/* Category SEO body copy — live rfid-kort .container is 1260px, not 1680. */
.category-extra-info-wrap.container {
	max-width: 1260px !important;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}
.category-info {
	padding: 15px;
	background: #ffffff;
}
.category-info-text h2,
.category-info h2 {
	font-family: 'Spartan', 'League Spartan', sans-serif;
	font-size: 24px;
	line-height: 28px;
	font-weight: 500;
	color: #333;
	margin-top: 20px;
	margin-bottom: 10px;
	letter-spacing: normal;
}
.category-info-text h3,
.category-info h3 {
	font-family: 'Spartan', 'League Spartan', sans-serif;
	font-size: 21px;
	line-height: 25px;
	font-weight: 500;
	color: #333;
	margin-top: 20px;
	margin-bottom: 10px;
	letter-spacing: normal;
}
.category-info .row .col-md-12 h3 {
	line-height: 1.4;
	font-size: 20px;
}
.category-info-text strong,
.category-info strong { font-size: 16px; font-weight: 700; }
.category-info p,
.category-info li {
	font-size: 14px;
	line-height: 20px;
	color: #333;
	margin: 0 0 10px;
}
.category-info ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.category-info li {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}
.category-info a,
.category-info a:link,
.category-info a:visited {
	color: #5b82ac !important;
	text-decoration: none;
}
.category-info a:hover { color: #3d5a78 !important; }
@media (min-width: 768px) {
	.category-info .row .col-md-12 h3 {
		line-height: 1.1;
		font-size: 24px;
	}
}
@media (min-width: 1200px) {
	.category-info-text p,
	.category-info p { text-align: justify; }
	.category-info-text h2,
	.category-info h2 {
		font-size: 40px;
		line-height: 40px;
	}
}

/* ---- Search overlay (live mega_menu.tpl / live_varumarken dump) ---- */
.search-result-text {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	text-decoration: none;
	color: #111;
	font-size: 13px;
}
.search-result-text-kat {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: #111;
}
.search-result-text-kat img {
	background: #ffffff;
	border-radius: 50%;
	margin-right: 5px;
	padding: 5px;
	width: 60px;
	height: 60px;
	object-fit: cover;
	flex: 0 0 auto;
}
.produkt-search-bilden { flex: 0 0 auto; }
.produkt-search-namnet {
	flex: 1 1 auto;
	min-width: 100px;
	display: flex;
	align-items: center;
	line-height: 1.3;
	font-size: 13px;
	overflow: hidden;
}
.produkt-search-column {
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.produkt-search-column.sr-enter-active {
	opacity: 1;
	transform: translateY(0);
}
.result-produkt a.search-result-text {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 5px;
	border: 1px solid transparent;
	padding: 10px 0;
	text-decoration: none;
	color: #111;
}
.result-produkt a.search-result-text:hover {
	background: rgba(0,0,0,.035);
	border-color: rgba(0,0,0,.18);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(0,0,0,.06);
}
.result-produkt img.sokresultat-bild {
	border-radius: 5px;
	flex: 0 0 auto;
	width: 70px;
	height: 70px;
	object-fit: contain;
	background: #fff;
}
/* Live: .sokresultatet is a sibling of the 75% .search-wrapper, 75% when empty
   (category tiles) and 100% when product hits (.col-lg-9) are present. */
#mega-menu-search .search-section { width: 100%; }
#mega-menu-search .sokresultatet { width: 75%; margin-top: 8px; max-width: 100%; }
#mega-menu-search .sokresultatet:has(.col-lg-9) { width: 100%; }
/* Don't let BS5 .row > * treat the results host as a flex grid. */
#mega-menu-search .result-produkt.row {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	--bs-gutter-x: 0;
	--bs-gutter-y: 0;
}
#mega-menu-search .result-produkt .col-lg-9 { display: flex; flex-wrap: wrap; align-items: flex-start; }
#mega-menu-search .result-produkt .col-lg-9 .produkt-search-column {
	flex: 0 0 33.333%;
	max-width: 33.333%;
	width: 33.333%;
	box-sizing: border-box;
	min-width: 200px;
	float: none;
}
/* Live dump: 82% products / 18% categories, product cards min 200px so
   thumb+name stay a row instead of collapsing into a 3-col image pile. */
#mega-menu-search .result-produkt:has(.col-lg-9) > .row {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}
#mega-menu-search .result-produkt:has(.col-lg-9) .col-lg-9 { flex: 0 0 82%; max-width: 82%; width: 82%; min-width: 0; }
#mega-menu-search .result-produkt:has(.col-lg-9) .col-lg-3 { flex: 0 0 18%; max-width: 18%; width: 18%; min-width: 140px; }
#mega-menu-search .result-produkt:has(.col-lg-9) .col-lg-9 .produkt-search-column {
	flex: 0 0 32%;
	max-width: 32%;
	width: 32%;
	min-width: 200px;
}
#mega-menu-search .result-produkt:has(.col-lg-9) .produkt-search-namnet { flex: 1 1 auto; min-width: 100px; }
#mega-menu-search .result-produkt .col-lg-3 p { margin: 0 0 8px; }
#mega-menu-search .result-produkt .mega-search-kategorier {
	justify-content: stretch;
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}
#mega-menu-search .result-produkt .mega-search-kategorier .produkt-search-column {
	margin-right: 0;
	padding-left: 0 !important;
	padding-right: 0 !important;
	flex: 1 1 0;
	max-width: none;
	width: auto;
	min-width: 0;
}
#mega-menu-search .result-produkt .mega-search-kategorier .produkt-search-column:last-child {
	margin-right: 0;
}
/* Beat .subcategory-media (padding-top 100% / width 100%) and product-hit
   img.sokresultat-bild (70×70, white bg). Live assets are 800×800 RGBA webps
   that must sit on the #EDE8E2 panel, not a white rectangle. */
#mega-menu-search .mega-search-kategorier .mega-search-cat-media {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	flex: none;
	padding-top: 0;
	background: #EDE8E2;
	overflow: hidden;
	border-radius: 5px;
}
#mega-menu-search .mega-search-kategorier .mega-search-cat-media img.sokresultat-bild {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	background: transparent;
	flex: none;
	border-radius: 0;
}
#mega-menu-search .mega-search-kategorier a.search-result-text.search-result-kategori {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	padding: 10px 0;
	width: 100%;
	gap: 0;
}
/* Beat global .subcategory-title (10px / uppercase / !important) from category chrome. */
#mega-menu-search .mega-search-kategorier .produkt-search-namnet.subcategory-title {
	font-weight: 400 !important;
	font-size: 14px !important;
	letter-spacing: .5px;
	margin-top: 8px;
	text-transform: none;
	text-align: center;
	color: #111 !important;
	min-height: 0;
	overflow: hidden;
	display: block;
	flex: none;
	width: 100%;
}
.sokresultat-kategori { font-size: 16px; font-weight: 600; margin: 0 0 8px; }

/* ---- Product page chrome (live product.tpl) ---- */
#product-image,
.product-image-grey {
	background-color: lightgrey;
	filter: brightness(95%);
	width: 100%;
	height: auto;
	max-width: 100%;
	min-height: 360px;
	object-fit: contain;
	display: block;
}
/* Mobile carousel square is reserved on the outer #carousel-…; do not grow the img. */
#carousel-mobile-product-images .product-image-grey {
	min-height: 0;
	height: 100%;
	max-height: 100%;
}
#product-product .big-image,
#product-product #product-image-link {
	display: block;
	width: 100%;
}
.big-image { position: relative; overflow: hidden; }
#product-product .breadcrumbs-new {
	position: absolute;
	top: 15px;
	left: 30px;
	z-index: 20;
	font-size: 10px;
	line-height: 1.4;
	color: #a9a9a9 !important;
	text-align: left;
	max-width: calc(100% - 220px);
}
#product-product .breadcrumbs-new a,
#product-product .breadcrumbs-new a:visited {
	color: #a9a9a9 !important;
	text-decoration: none;
}
#product-product .breadcrumbs-new a:hover {
	background: #000;
	color: #fff !important;
	padding: 5px;
}
#product-product .breadcrumbs-new .fa,
#product-product .breadcrumbs-new .fas {
	color: #a9a9a9 !important;
	font-size: 10px;
	margin-right: 4px;
}
/* Live: tillval-inner is col-md-10 + push/pull-1 inside the col-md-5 buy box
   (content ~83.33% wide, inset ~8.33% each side from 992px). Mobile: 20px. */
#product-product .tillval-inner {
	padding: 0 20px;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	margin: 0;
}
@media (min-width: 992px) {
	#product-product .tillval-inner {
		width: 83.33333333%;
		margin-left: auto;
		margin-right: auto;
		padding: 0 0 25px;
		float: none;
	}
}
#product-product .buy-section {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}
#product-product .staff-section { margin-top: 20px !important; }
/* Live product.tpl: .staff-carousel-wrapper { padding: 25px 10%; } — do not
   flatten to 15px 0 or the three portraits fill the whole col-5. */
#product-product .staff-section .staff-carousel-wrapper {
	padding: 25px 10%;
}
#product-product .staff-section .staff-member {
	padding: 5px;
}
@media (max-width: 767px) {
	#product-product .staff-section .staff-carousel-wrapper {
		padding: 20px 0;
	}
	#product-product .staff-section .staff-carousel-container {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		scrollbar-width: none;
	}
	#product-product .staff-section .staff-row {
		flex-wrap: nowrap;
		margin-left: 0;
		margin-right: 0;
	}
	#product-product .staff-section .staff-member {
		flex: 0 0 auto;
		width: calc(100% - 40px);
		max-width: calc(100% - 40px);
		padding: 0 10px;
	}
}
#product-product .contact-box { margin-top: 16px !important; padding: 0 !important; margin-bottom: 25px; }
@media (min-width: 992px) {
	/* Padding on .tillval-inner (not this margin) is what keeps the sticky
	   contact box 25px above the beige hero — a last-child margin collapses. */
	#product-product .contact-box { margin-bottom: 0; }
}
/* Live kontaktinfo-block: centered cluster, left-aligned rows; captions inherit 16px and use #3A7478 (not BS text-muted). */
#product-product .contact-box-inner {
	display: inline-block;
	text-align: left;
}
#product-product .contact-box-row {
	margin-bottom: 10px;
}
#product-product .contact-box-row:last-child {
	margin-bottom: 0;
}
#product-product .contact-box-row > i {
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
	font-weight: 900 !important;
	font-size: 22px;
	vertical-align: middle;
	margin-right: 10px;
	color: #3A7478 !important;
	line-height: 1;
}
#product-product .contact-box-row > p {
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	font-size: 16px;
	font-family: 'Spartan', 'League Spartan', sans-serif;
	font-weight: 400;
	color: #000000;
	letter-spacing: normal;
	line-height: 1.4;
}
/* Live: 16px Spartan 400 / #000. Do not use BS .text-dark/.fw-bold — those
   set color/weight !important, and tel:/mailto: can fall back to system sans;
   custom.min a:visited { color:#fff } also fights visited contact links. */
#product-product .contact-box a,
#product-product .contact-box a:link,
#product-product .contact-box a:visited,
#product-product .contact-box a.contact-box__link,
#product-product .contact-box a.contact-box__link:link,
#product-product .contact-box a.contact-box__link:visited,
#product-product .contact-box a[href^="tel"],
#product-product .contact-box a[href^="mailto"] {
	font-family: 'Spartan', 'League Spartan', sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	font-style: normal;
	letter-spacing: normal;
	line-height: 1.4;
	color: #000000 !important;
	text-decoration: none !important;
}
#product-product .contact-box a:hover,
#product-product .contact-box a.contact-box__link:hover,
#product-product .contact-box a[href^="tel"]:hover,
#product-product .contact-box a[href^="mailto"]:hover {
	color: #333333 !important;
	text-decoration: none !important;
}
#product-product .contact-box-caption {
	display: block;
	color: #3A7478 !important;
	font-size: 16px;
	font-weight: 400;
	font-family: 'Spartan', 'League Spartan', sans-serif;
	line-height: 1.4;
}
/* Live: accordion is col-md-8 between two col-md-2 spacers inside #product-layout.
   Closed headers ~67% of the left column; PRISLISTA open → 100% (prislista-open). */
#product-product .beskrivningstabben-wrap {
	padding-left: 15px;
	padding-right: 15px;
}
#beskrivningstabben { margin-top: 5px; }
@media (min-width: 992px) {
	#beskrivningstabben > .beskrivningstabben-spacer,
	#beskrivningstabben > #accordionProduct {
		transition: width 1s ease, max-width 1s ease, flex-basis 1s ease;
	}
	#beskrivningstabben:not(.prislista-open) > .beskrivningstabben-spacer {
		flex: 0 0 16.6667%;
		max-width: 16.6667%;
		width: 16.6667%;
	}
	#beskrivningstabben:not(.prislista-open) > #accordionProduct {
		flex: 0 0 66.6667%;
		max-width: 66.6667%;
		width: 66.6667%;
	}
	#beskrivningstabben.prislista-open > .beskrivningstabben-spacer {
		flex: 0 0 0;
		max-width: 0;
		width: 0;
		padding-left: 0;
		padding-right: 0;
		overflow: hidden;
	}
	#beskrivningstabben.prislista-open > #accordionProduct {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}
}
@media (max-width: 991px) {
	#beskrivningstabben { margin-top: 24px; padding: 0; }
	#beskrivningstabben > .beskrivningstabben-spacer { display: none; }
	#beskrivningstabben > #accordionProduct {
		flex: 0 0 100%;
		max-width: none;
		width: 100%;
	}
}
#beskrivningstabben .accordion-item {
	border: 0 !important;
	border-bottom: 1px solid #efefef !important;
	background: #fff;
}
#beskrivningstabben .accordion-button {
	font-size: 18px !important;
	font-weight: 400 !important;
	padding: 30px 0 !important;
	background: #fff !important;
	box-shadow: none !important;
	color: #000 !important;
	text-transform: uppercase;
}
#beskrivningstabben .accordion-button:not(.collapsed) {
	background: #fff !important;
	box-shadow: none !important;
	color: #000 !important;
}
#beskrivningstabben .accordion-button::after { margin-left: auto; }
/* Live product.tpl #beskrivning-panel h2: 19px / 500 (overrides global h2 30px / 100).
   Scope to description accordion body — accordion-header is also an h2. */
#descPanel h2,
#beskrivningstabben .accordion-body h2 {
	font-family: 'Spartan', 'League Spartan', sans-serif;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.1;
	color: #333333;
	margin-top: 20px;
	margin-bottom: 10px;
}
.thumbs-div::after { height: 1px !important; }

/* Product thumbs scroller arrows — live product.tpl (40px circular hit-area,
   thin SVG chevrons, transparent fill). Not subcategory-nav squares. */
#product-product .thumbs-scroller-wrap .thumbnails-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px !important;
	height: 40px !important;
	border-radius: 999px !important;
	border: 0 !important;
	background: transparent !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	box-shadow: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	cursor: pointer;
	user-select: none;
}
#product-product .thumbs-scroller-wrap .thumbnails-nav::before {
	content: "" !important;
	display: block;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
#product-product .thumbs-scroller-wrap .thumbnails-nav.prev::before {
	background-image: url("../images/gallery/chevron-left.svg") !important;
}
#product-product .thumbs-scroller-wrap .thumbnails-nav.next::before {
	background-image: url("../images/gallery/chevron-right.svg") !important;
}
#product-product .thumbs-scroller-wrap .thumbnails-nav:hover {
	background: rgba(0,0,0,0.06) !important;
}
#product-product .thumbs-scroller-wrap .thumbnails-nav.prev { left: -52px !important; }
#product-product .thumbs-scroller-wrap .thumbnails-nav.next { right: -52px !important; }
@media (max-width: 767px) {
	#product-product .thumbs-scroller-wrap .thumbnails-nav.prev { left: 2px !important; }
	#product-product .thumbs-scroller-wrap .thumbnails-nav.next { right: 2px !important; }
}

/* Mega-menu panel: above product chrome (20), under header (1098/1099).
   Magnific gallery stays at 10000+ and still covers this. */
body .mega-menu-wrapper {
	z-index: 1080;
}

.big-image .product-overlay-tab-wrap.generell-button-border {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 1px solid #c8c8c8;
	background: #ebeff1;
}
/* Overlay tabs/breadcrumbs sit on the image (above thumbs z-index 10) but must
   stay under header 1098/1099 and .mega-menu-wrapper 1080. Do not use 999 here —
   that paints Bildgalleri through the open PRODUKTER/search panel. */
.big-image .product-overlay-buttons-stack {
	position: absolute;
	top: 15px;
	right: 30px;
	z-index: 20;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	width: max-content;
}
.big-image .product-overlay-tab-inner {
	display: block;
	padding: 15px 20px !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	color: #000 !important;
	background: transparent !important;
	border: 0 !important;
	text-decoration: none;
	position: relative;
}
.big-image .product-overlay-tab-inner::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 2px;
	background: #000;
	transform: translateX(-50%);
	transition: width 0.25s ease;
}
.big-image .product-overlay-tab-inner:hover::after { width: 60%; }
#product-product .option-trigger-box,
#product-product .option-wrap.option-trigger-box {
	background: #fff !important;
	border: 1px solid #ddd !important;
	padding: 12px 14px !important;
	margin-bottom: 10px !important;
}
#product-product .option-trigger__label { font-weight: 600; }

/* Text options (Bredd/Höjd cm): live white 46px pill, label + inline input — not a grey chip. */
#product_add_to_cart_form .option-text-wrap {
	margin: 0;
	border: none;
	padding: 0;
}
#product_add_to_cart_form .option-text {
	border-bottom: 1px solid #efefef;
}
#product_add_to_cart_form .option-text-pill {
	border-radius: 25px;
	background: #ffffff;
	margin: 5px 0;
	font-size: 16px;
	min-height: 46px;
	display: flex;
	align-items: center;
}
#product_add_to_cart_form .option-text-label {
	padding-left: 3em;
	line-height: 46px;
	font-size: 16px;
	font-weight: 400;
	margin: 0;
	white-space: nowrap;
	color: #000;
}
#product_add_to_cart_form .option-text-input {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-weight: 700;
	text-align: center;
	width: 240px;
	max-width: 100%;
	min-width: 120px;
	height: 46px !important;
	margin: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none;
	font-size: 16px;
	color: #000;
	font-family: 'Spartan', 'League Spartan', sans-serif;
}
#product_add_to_cart_form .option-text-input:focus {
	box-shadow: none !important;
	outline: none;
	background: transparent !important;
}
#product_add_to_cart_form .option-textarea-hint::placeholder {
	color: #9a9a9a;
	opacity: 1;
}
@media (max-width: 991px) {
	#product_add_to_cart_form .option-text-pill {
		border-radius: 0;
		background: transparent;
		padding: 12px 20px;
		margin: 0;
	}
	#product_add_to_cart_form .option-text-label {
		padding-left: 0;
	}
}
/* Live product.tpl .usp-title: inherits body Spartan, 12px, uppercase, .6px tracking, #000.
   Local #uspBar used BS5 .small/.fw-bold only, so it rendered as a thinner system sans. */
#uspBar,
#uspBar .usp-item {
	font-family: 'Spartan', 'League Spartan', sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #000;
	line-height: 1.4;
}
#uspBar { background: transparent !important; border-radius: 0 !important; }
#uspBar .usp-item {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	padding: 5px;
	text-align: center;
}
@media (max-width: 480px) {
	#uspBar,
	#uspBar .usp-item {
		font-size: 11px !important;
		letter-spacing: 0.5px;
	}
}

/* ---- Information pages + sitemap (site chrome: Spartan, 1260px, no grey title bar) ---- */
.information-page,
#information-sitemap {
	background: #ffffff;
}
.information-page .information-inner,
#information-sitemap .information-inner,
.blog-page.container,
#cms-blog.container {
	max-width: 1260px !important;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.information-page .information-breadcrumb,
#information-sitemap .information-breadcrumb {
	background: transparent;
	padding: 18px 0 8px;
	font-size: 13px;
	margin: 0;
}
.information-page .information-breadcrumb a,
.information-page .information-breadcrumb .breadcrumb-item,
.information-page .information-breadcrumb .breadcrumb-item::before,
#information-sitemap .information-breadcrumb a,
#information-sitemap .information-breadcrumb .breadcrumb-item,
#information-sitemap .information-breadcrumb .breadcrumb-item::before {
	color: #555555 !important;
}
.information-page .page-title,
#information-sitemap .page-title {
	display: block;
	height: auto;
	background: transparent;
	padding: 8px 0 18px;
	margin: 0 0 28px;
	border-bottom: 1px solid #EDE8E2;
}
.information-page .page-title h1,
#information-sitemap .page-title h1,
#information-sitemap .page-title h2 {
	color: #1a1a1a;
	font-family: 'Spartan', 'League Spartan', sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	text-transform: none;
}
.information-page .information-description {
	color: #333333;
	font-family: 'Spartan', 'League Spartan', sans-serif;
	font-size: 15px;
	line-height: 1.75;
	padding: 0 0 64px;
	max-width: 820px;
}
.information-page .information-description h1,
.information-page .information-description h2,
.information-page .information-description h3,
.information-page .information-description h4 {
	color: #333333 !important;
	text-transform: none !important;
	font-weight: 700;
}
/* Header search: live #sokrutan-header is 350×36, right-aligned in the 25% column. */
#header-menu .search-box.col-lg-3 {
	display: flex !important;
	flex: 0 0 25% !important;
	width: 25% !important;
	max-width: 25% !important;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	overflow: hidden;
	min-width: 0;
}
#header-menu .search-wrapper,
#header-menu #sokrutan-header,
#header-menu .sokrutan-desktop {
	width: 100%;
	min-width: 0;
	max-width: 350px;
}

/* Mega-menu search (#sokrutan): header .sokrutan-desktop / .search-wrapper used to
   leak 350×36 + light-grey fill, which parked the 30px icon in the middle of the
   550px field. Scope stays on the overlay input + its wrap. */
#mega-menu-search .search-wrapper {
	width: 75%;
	max-width: none;
	min-width: 0;
	margin-right: 0;
	flex: none;
}
#mega-menu-search .search-input-wrap {
	position: relative;
	height: 50px;
	width: 100%;
}
#mega-menu-search .search-icon {
	position: absolute;
	right: 15px;
	top: 50%;
	bottom: auto;
	height: 30px;
	width: 30px;
	transform: translateY(-20%);
	color: #000;
	z-index: 2;
	line-height: 0;
	display: block;
}
#mega-menu-search .search-icon svg {
	display: block;
	width: 30px;
	height: 30px;
	vertical-align: top;
}
#mega-menu-search #sokrutan,
#mega-menu-search .sokrutan-desktop,
#mega-menu-search .sokrutan-deskstop-style {
	width: 100% !important;
	min-width: 550px !important;
	max-width: none !important;
	height: 50px !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 50px;
	padding: 0 48px 0 20px !important;
	background: #fafafa !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 0 !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	box-sizing: border-box;
	text-align: left;
	flex: none;
}
#mega-menu-search #sokrutan:focus {
	border-color: #ccc !important;
	background: #fff !important;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	outline: none;
}
#mega-menu-search #sokrutan::placeholder {
	color: #888;
	font-weight: 600;
	opacity: 1;
}

/* Footer inner width + column headings (live header.tpl / footer.tpl).
   Live: .container { max-width: 1260px !important } from 1200px (measured 1260px
   at 2048 viewport). stylesheet.min.css widens all .container to 1680px;
   skin/custom set footer .title { color: #aaaaaa } from the old dark footer. */
footer.footer-bottom-wrap h4.title,
footer.footer-bottom-wrap .title {
	color: #000000 !important;
	font-size: 18px;
	line-height: 21px;
	font-weight: bold;
	text-transform: none;
}
footer.footer-bottom-wrap > .container,
.footer-copyright > .container {
	max-width: 1260px !important;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}
footer.footer-bottom-wrap .footer-help-bar h3 {
	font-family: 'Spartan', sans-serif;
	font-size: 32px !important;
	line-height: 46px;
	font-weight: 700;
	color: #000000;
}
footer.footer-bottom-wrap .footer-help-bar .fa,
footer.footer-bottom-wrap .footer-help-bar .far,
footer.footer-bottom-wrap .footer-help-btn .fa,
footer.footer-bottom-wrap .footer-help-btn .far {
	color: #000000 !important;
	margin-right: 15px;
}

/* Footer vertical rhythm vs live footer.tpl (1200px+ / ~2054 viewport).
   Local was taller because of BS5 .mb-5/.mt-5/.py-5 (3rem !important),
   .footer-help-bar { padding: 40px 0 }, wrap padding-top 40px, and
   footer li inheriting body line-height 20px instead of live 14px. */
footer.footer-bottom-wrap {
	padding-top: 0;
	padding-bottom: 20px;
	min-height: 560px;
}
footer.footer-bottom-wrap .footer-logo-wrap {
	padding-top: 45px;
	padding-bottom: 45px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
}
footer.footer-bottom-wrap .footer-help-bar {
	padding: 0 0 60px;
	margin-bottom: 0;
	border-bottom: none;
	--bs-gutter-y: 0;
}
@media (max-width: 767.98px) {
	footer.footer-bottom-wrap .footer-help-bar {
		--bs-gutter-y: 16px;
	}
}
footer.footer-bottom-wrap .footer-help-btn {
	font-family: 'Spartan', sans-serif;
	font-size: 14px;
	line-height: 46px;
	font-weight: 400;
	margin: 0;
}
footer.footer-bottom-wrap .footer-link-cols {
	margin-top: 0;
}
footer.footer-bottom-wrap .footer-link-cols > [class*="col-"] {
	margin-bottom: 0;
}
footer.footer-bottom-wrap h4.title,
footer.footer-bottom-wrap .title {
	margin-top: 10px;
	margin-bottom: 10px;
	padding-bottom: 5px;
}
footer.footer-bottom-wrap ul {
	margin-bottom: 10px;
	padding-left: 0;
}
footer.footer-bottom-wrap li {
	padding: 0;
	font-size: 13px;
	line-height: 25px;
}
@media (min-width: 1200px) {
	footer.footer-bottom-wrap li {
		padding: 14px 0;
		font-size: 14px;
		line-height: 14px;
	}
	footer.footer-bottom-wrap .om-oss-footer li {
		padding: 8px 0;
	}
}
footer.footer-bottom-wrap .footer-reco-wrap {
	margin: 25px 0;
	padding: 0;
}
footer.footer-bottom-wrap .footer-betyg-text {
	margin-top: 16px;
	font-size: 12px;
}
.footer-copyright {
	margin-top: 0;
	padding: 15px 0 10px;
	border-top: 1px solid #ffffff;
	font-size: 12px;
}

/* Nyheter hero: stylesheet.min.css widens .container to 1680px, so the H1 went full-bleed. */
.video-content {
	justify-content: center;
}
.video-content .container {
	max-width: 1140px !important;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

#product-product .kontakt-reco-trust-badges {
	max-width: 150px;
	width: 150px;
	height: auto;
	max-height: none;
}

.information-page .information-description a {
	color: #3A7478;
	text-decoration: underline;
}
.information-page .information-description a:hover {
	color: #1a1a1a;
}
#information-sitemap .sitemap a {
	color: #1a1a1a;
	text-decoration: none;
}
#information-sitemap .sitemap a:hover {
	color: #3A7478;
	text-decoration: underline;
}
#information-sitemap .sitemap > ul > li > a {
	font-family: 'Spartan', 'League Spartan', sans-serif;
	font-weight: 700;
	font-size: 15px;
}

/* Product hero inquiry textarea (#forfragan-meddelande).
   Live (BS3): textarea.form-control { height: auto } + #productform-video textarea
   { padding: 20px; border: 0; border-radius: 5px }.
   Local: custom.min .form-control { height: 34px } has no textarea exception, and
   BS5 reboot ::-webkit-inner-spin-button { height: auto } is unscoped, so Chrome
   paints number spinners on the textarea. Scope stays on this form only. */
.productform-wrapper #forfragan-hero-form textarea,
.productform-wrapper #forfragan-hero-form textarea.form-control,
#forfragan-hero-form #forfragan-meddelande {
	height: auto;
	min-height: 0;
	padding: 20px;
	border: 0;
	border-radius: 5px;
	font-family: 'Spartan', 'League Spartan', sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #555;
	resize: vertical;
	overflow: auto;
	appearance: auto;
	-webkit-appearance: textarea;
}
.productform-wrapper #forfragan-hero-form textarea::placeholder,
#forfragan-hero-form #forfragan-meddelande::placeholder {
	font-family: 'Spartan', 'League Spartan', sans-serif;
	color: #999;
	opacity: 1;
}
.productform-wrapper #forfragan-hero-form textarea::-webkit-inner-spin-button,
.productform-wrapper #forfragan-hero-form textarea::-webkit-outer-spin-button,
#forfragan-hero-form #forfragan-meddelande::-webkit-inner-spin-button,
#forfragan-hero-form #forfragan-meddelande::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: none !important;
	margin: 0 !important;
	height: 0 !important;
	width: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Product hero video (left diagonal). Live product.tpl: .hero-media is not a
   column, so BS3 gives it no gutter. BS5 .row > * still pads every flex child
   (12px), which insets the <video> and lets .hero-inner #f5f1eb show through
   the clip-path at the top-right. */
.hero-section.productform-video .hero-media {
	padding: 0;
	margin: 0;
	max-width: none;
	overflow: hidden;
}
.hero-section.productform-video .hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

/* ---- PRISLISTA accordion (#priceListPanel) ----
   Live (flatro + BS3): .table.table-hover inside .discount.table-responsive,
   panel-body padding 3px / font-size 11px. No table-bordered, no thead,
   no .bg-light / .table-secondary. Horizontal rules only (#ddd).
   BS5 .table + .table-bordered draws a full grid, pale cell fills
   (box-shadow inset + --bs-table-bg) and grey section bars. */
#priceListPanel > .accordion-body {
	padding: 3px;
	font-size: 11px;
	background: #fff;
}
#priceListPanel .discount {
	padding-top: 15px;
}
#priceListPanel .discount.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
#priceListPanel .th-pristabell-table {
	--bs-table-bg: transparent;
	--bs-table-accent-bg: transparent;
	--bs-table-striped-bg: transparent;
	--bs-table-active-bg: transparent;
	--bs-table-hover-bg: #f5f5f5;
	--bs-table-hover-color: #333;
	--bs-table-border-color: transparent;
	--bs-table-color: #333;
	width: 100%;
	max-width: 100%;
	margin-bottom: 0;
	border: 0 !important;
	border-collapse: collapse;
	font-size: 11px;
	color: #333;
	background: #fff;
}
#priceListPanel .th-pristabell-table > :not(caption) > * > * {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
	border-width: 0 !important;
	color: inherit;
	padding: 8px;
	line-height: 1.42857143;
	vertical-align: top;
	font-size: 11px;
}
#priceListPanel .th-pristabell-table td,
#priceListPanel .th-pristabell-table > :not(caption) > tr > td {
	border-top: 1px solid #ddd !important;
}
#priceListPanel .th-pristabell-table th {
	border-top: 0 !important;
	font-weight: 700;
	background: transparent !important;
}
#priceListPanel .th-pristabell-table .pricetabtable-antal > * {
	border-bottom: 1px solid #ddd !important;
	font-weight: 700;
	vertical-align: bottom;
}
#priceListPanel .th-pristabell-table tr.th-pristabell-section > th {
	background: transparent !important;
	font-weight: 700;
	text-align: left;
}
#priceListPanel .th-pristabell-table.table-hover > tbody > tr:hover > * {
	background-color: #f5f5f5 !important;
	box-shadow: none !important;
	--bs-table-bg-state: transparent;
	--bs-table-accent-bg: transparent;
}
#priceListPanel .th-pristabell-table tr.discounttable:hover > * {
	background-color: #d8d8d8 !important;
}

@media (min-width: 992px) {
	#priceListPanel .discount.table-responsive {
		overflow-x: visible !important;
		max-width: none;
	}
	#priceListPanel .th-pristabell-table {
		table-layout: auto;
	}
	#priceListPanel .th-pristabell-table > :not(caption) > * > * {
		padding-left: 6px;
		padding-right: 6px;
		white-space: nowrap;
		vertical-align: top;
		text-align: center;
	}
	#priceListPanel .th-pristabell-table > :not(caption) > * > *:first-child {
		text-align: left;
		white-space: normal;
		word-break: normal;
		overflow-wrap: anywhere;
		hyphens: auto;
		min-width: 190px;
		width: 190px;
	}
	#priceListPanel .th-pristabell-table > :not(caption) > * > *:not(:first-child) {
		min-width: 58px;
	}
	#priceListPanel .th-pristabell-table tr.th-pristabell-section > th {
		text-align: left;
		white-space: normal;
	}
}

/* Manual Extra-html prislista (add_info) uses .table.table-hover without th-pristabell-table. */
#priceListPanel .discount table {
	--bs-table-bg: transparent;
	--bs-table-accent-bg: transparent;
	--bs-table-striped-bg: transparent;
	--bs-table-hover-bg: #f5f5f5;
	--bs-table-border-color: transparent;
	--bs-table-color: #333;
	width: 100%;
	margin-bottom: 0;
	border: 0 !important;
	border-collapse: collapse;
	font-size: 11px;
	color: #333;
	background: #fff;
}
#priceListPanel .discount table td,
#priceListPanel .discount table th {
	background-color: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	border-top: 1px solid #ddd !important;
	padding: 8px;
	font-size: 11px;
	color: #333;
	vertical-align: top;
}
#priceListPanel .discount table tr:first-child td,
#priceListPanel .discount table tr:first-child th {
	border-top: 0 !important;
}
#priceListPanel .discount table.table-hover > tbody > tr:hover > * {
	background-color: #f5f5f5 !important;
}

/* ---- Product gallery: Colorbox (same chrome as live profilar.se) ---- */
html.cbox-open { overflow: hidden; }
#cboxOverlay { filter: brightness(95%); opacity: 1 !important; }
#colorbox, #cboxWrapper { overflow: visible !important; }
#cboxContent { background: transparent; overflow: visible !important; }
#cboxTitle, #cboxCurrent { display: none !important; }
#cboxLoadedContent {
	padding-top: 12px;
	padding-bottom: 95px;
	box-sizing: border-box;
	overflow: hidden !important;
}
#cboxLoadedContent img.cboxPhoto {
	background-color: lightgrey;
	filter: brightness(95%);
	max-height: calc(100vh - 160px);
	width: auto;
	cursor: zoom-in;
}
#cboxLoadedContent.cbox-zoom-cursor-mode img.cboxPhoto { cursor: none !important; }
#cboxLoadedContent.cbox-zoomed { overflow: hidden !important; }
#cboxLoadedContent img.cboxPhoto.cbox-zoomed { transition: none; }
.cbox-zoom-cursor-follow {
	position: fixed;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	pointer-events: none;
	z-index: 2147483646;
	display: none;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 1px 4px rgba(0,0,0,.25));
}
#cboxThumbsBar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	padding: 10px 12px 12px;
}
#cboxThumbsScroller {
	display: flex;
	justify-content: center;
	max-width: 100%;
	margin: 0 auto;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	padding: 0 8px;
	scrollbar-width: none;
}
#cboxThumbsScroller.has-overflow { justify-content: flex-start; }
#cboxThumbsScroller::-webkit-scrollbar { height: 0; }
.cboxThumbItem {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 70px;
	position: relative;
}
.cboxThumbItem:not(:last-child) { margin-right: -4px; }
.cboxThumbItem:hover,
.cboxThumbItem.is-active { z-index: 1; }
.cboxThumbItem a {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1 / 1;
	border: 4px solid #fff;
	background: #ebeff1;
}
.cboxThumbItem a img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: #ebeff1;
	filter: brightness(95%);
}
.cboxThumbItem a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: #000;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cboxThumbItem:hover a::after,
.cboxThumbItem.is-active a::after { transform: scaleX(1); }

/* Reco widget — live start-reco-widget-wrap, full viewport minus 15px, inner 1920px */
.start-reco-widget-wrap { padding: 75px 15px 60px; }
.start-reco-widget-inner { max-width: 1920px; margin: 0 auto; }
.start-reco-title {
	font-family: 'Spartan', sans-serif;
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	margin: 0 0 35px;
	line-height: 45px;
	color: #333333;
}
@media (min-width: 768px) {
	.start-reco-title {
		font-size: 55px;
		margin-bottom: 50px;
	}
}
@media (max-width: 991px) {
	.start-reco-widget-wrap { padding: 50px 15px 40px; }
}

/* ---- Mobile header + slide-in category menu (live header.tpl #mobilemenudiv + footer.tpl overlay)
   Desktop chrome is d-xl (1200+) like live hidden-md/sm/xs. Recreate BS3 .navbar-toggle /
   .icon-bar because Bootstrap 5 has no equivalent. custom.min .fa { color:#fff } is
   overridden by inline square/glyph colors like live. */
#mobilemenudiv {
	display: block;
	z-index: 1100;
	border: 0;
	padding: 0;
	min-height: 0;
	flex-wrap: unset;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,.06), 0 5px 20px rgba(0,0,0,.04), 0 10px 60px rgba(0,0,0,.04);
}
#mobilemenudiv .container-fluid {
	display: block;
	padding-left: 15px;
	padding-right: 15px;
}
#mobilemenudiv .navbar-header {
	float: none;
	display: block;
	width: 100%;
}
#mobilemenudiv .row {
	--bs-gutter-x: 30px;
	--bs-gutter-y: 0;
}
/* Live: .mobile-logo{margin:18px 15px} skrivs över av senare .mobile-logo{margin:15px 0}
   på ALLA bredder — effektivt värde är 15px 0 (logon 15px från kant via kolumnpaddingen). */
#mobilemenudiv .mobile-logo {
	display: block;
	height: 40px;
	width: auto;
	max-height: 40px;
	max-width: none;
	margin: 15px 0;
}
/* Live visible-sm/md = 768–1199, not BS5 sm (576). */
#mobilemenudiv .mobile-tablet-search {
	display: none !important;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
	#mobilemenudiv .mobile-tablet-search {
		display: block !important;
	}
}
#mobilemenudiv .mobile-header-icons {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	white-space: nowrap;
	min-height: 76px;
}
#mobilemenudiv .navbar-toggle {
	position: relative;
	float: none;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	background-color: transparent;
	background-image: none;
	border: 1px solid #fff;
	border-radius: 4px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	line-height: 1;
	color: inherit;
	text-decoration: none;
}
#mobilemenudiv .navbar-toggle.mobileSidebarButton {
	flex-direction: column;
	gap: 4px;
}
#mobilemenudiv #mobile-search-toggle { display: none; }
#mobilemenudiv .navbar-toggle:visited,
#mobilemenudiv .navbar-toggle:hover {
	color: inherit;
	text-decoration: none;
}
#mobilemenudiv .navbar-toggle .icon-bar {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background-color: #000;
}
#mobilemenudiv .navbar-toggle .icon-bar + .icon-bar {
	margin-top: 0;
}
#mobilemenudiv .navbar-toggle:focus,
#mobilemenudiv .navbar-toggle:hover {
	background-color: #B4C6B9;
}
#mobilemenudiv .fa-stack {
	position: relative;
	display: inline-block;
	width: 2em;
	height: 2em;
	line-height: 2em;
	vertical-align: middle;
	font-size: 14px;
}
#mobilemenudiv .fa-stack-1x,
#mobilemenudiv .fa-stack-2x {
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
}
#mobilemenudiv .fa-stack-1x {
	line-height: inherit;
	font-size: 14px;
}
#mobilemenudiv .fa-stack-2x {
	font-size: 28px;
}
#tablet-wrapper input,
#sokrutan-tablet {
	width: 100%;
	font-size: 14px;
	font-weight: 400;
	background: #ffffff;
	padding: 6px 10px;
	border: 1px solid #d8d8d8;
	border-radius: 0;
	box-shadow: none;
	height: auto;
	color: #333;
}
#tablet-wrapper input:focus,
#sokrutan-tablet:focus {
	outline: none;
	border-color: #d8d8d8;
	box-shadow: none;
}
#sokrutan-mobil {
	margin: 10px 0;
	font-size: 12px;
	font-weight: 700;
	border: 0;
	width: 100%;
	background: #fff;
	padding: 10px;
	height: auto;
	border-radius: 0;
	box-shadow: none;
	color: #333;
}
#sokrutan-mobil:focus {
	outline: none;
	box-shadow: none;
}
#mobilheadline.mobile-header-search-row {
	display: none;
}
@media (max-width: 767px) {
	.pf-section-title {
		margin: 36px 0 20px;
		line-height: 1.2;
		font-size: 26px;
	}
	.subcategory-carousel {
		mask-image: none;
		-webkit-mask-image: none;
	}
	.subcategory-card-wrap { flex: 0 0 148px; }
	.product-card .product-thumb .caption { min-height: 0; padding: 4px 2px; }
	.filter-column .btn {
		padding-left: 8px !important;
		padding-right: 8px !important;
		font-size: 12px;
		white-space: nowrap;
	}
	.hero-actions { flex-direction: column; align-items: center; }
	.hero-video-btn { min-width: 220px; text-align: center; }
}
@media (max-width: 767.98px) {
	#mobilheadline.mobile-header-search-row {
		display: block !important;
		max-height: 500px;
		overflow: hidden;
		transition: max-height 0.3s ease, opacity 0.3s ease;
		margin-left: -15px;
		margin-right: -15px;
		width: calc(100% + 30px);
		max-width: none;
	}
	#mobilheadline.mobile-header-search-row.is-searching {
		max-height: 80vh;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.sokresultatet-mobil {
		display: none;
		background: #fff;
		padding: 12px 15px 20px;
		margin: 0;
		border-top: 1px solid #eee;
		max-height: 60vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.sokresultatet-mobil .row,
	.sokresultatet-tablet .row {
		display: flex;
		flex-wrap: wrap;
		margin-left: 0;
		margin-right: 0;
	}
	.sokresultatet-mobil [class*="col-"],
	.sokresultatet-mobil .produkt-search-column,
	.sokresultatet-tablet [class*="col-"],
	.sokresultatet-tablet .produkt-search-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		min-width: 0 !important;
		float: none !important;
		padding-left: 0;
		padding-right: 0;
	}
	.sokresultatet-mobil a.search-result-text,
	.sokresultatet-tablet a.search-result-text {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 0;
		border-bottom: 1px solid #f0f0f0;
		text-decoration: none;
		color: #111;
		font-size: 14px;
		font-weight: 500;
	}
	.sokresultatet-mobil a.search-result-text:last-child,
	.sokresultatet-tablet a.search-result-text:last-child { border-bottom: 0; }
	.sokresultatet-mobil img.sokresultat-bild,
	.sokresultatet-tablet img.sokresultat-bild {
		width: 48px !important;
		height: 48px !important;
		margin: 0 8px 0 0 !important;
		border-radius: 50%;
		object-fit: contain;
		background: #fff;
		flex: 0 0 48px;
	}
	.sokresultatet-mobil .search-result-text-kat,
	.sokresultatet-tablet .search-result-text-kat {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 6px 0;
		text-decoration: none;
		color: #111;
		font-weight: 600;
		font-size: 14px;
	}
	.sokresultatet-mobil .search-result-text-kat img,
	.sokresultatet-tablet .search-result-text-kat img {
		width: 44px !important;
		height: 44px !important;
		border-radius: 50%;
		object-fit: cover;
		background: #fff;
	}
	.sokresultatet-mobil .sokresultat-kategori,
	.sokresultatet-tablet .sokresultat-kategori {
		margin: 16px 0 8px;
		font-size: 15px;
		font-weight: 700;
	}
	.pf-live-search-status {
		margin: 0;
		padding: 8px 0;
		color: #666;
		font-size: 13px;
	}
	.sokresultatet-tablet { display: none !important; }
	#mobilemenudiv.mobile-header-scrolled #mobilheadline.mobile-header-search-row {
		max-height: 0 !important;
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
		border: none !important;
	}
	#mobile-search-toggle {
		display: none !important;
	}
	#mobilemenudiv.mobile-header-scrolled #mobile-search-toggle {
		display: flex !important;
	}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
	.sokresultatet-tablet {
		background: #fff;
		padding: 16px 0 24px;
		margin: 0 -15px;
		border-top: 1px solid #eee;
		max-height: 60vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.sokresultatet-tablet .row {
		display: flex;
		flex-wrap: wrap;
		margin-left: 0;
		margin-right: 0;
	}
	.sokresultatet-tablet [class*="col-"],
	.sokresultatet-tablet .produkt-search-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		min-width: 0 !important;
		float: none !important;
		padding-left: 15px;
		padding-right: 15px;
	}
	.sokresultatet-tablet a.search-result-text {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 0;
		border-bottom: 1px solid #f0f0f0;
		text-decoration: none;
		color: #111;
		font-size: 14px;
		font-weight: 500;
	}
	.sokresultatet-tablet img.sokresultat-bild {
		width: 48px !important;
		height: 48px !important;
		margin: 0 8px 0 0 !important;
		border-radius: 50%;
		object-fit: contain;
		background: #fff;
		flex: 0 0 48px;
	}
	.sokresultatet-tablet .search-result-text-kat {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 6px 0;
		text-decoration: none;
		color: #111;
		font-weight: 600;
		font-size: 14px;
	}
	.sokresultatet-tablet .search-result-text-kat img {
		width: 44px !important;
		height: 44px !important;
		border-radius: 50%;
		object-fit: cover;
		background: #fff;
	}
	.sokresultatet-tablet .sokresultat-kategori {
		margin: 16px 0 8px;
		font-size: 15px;
		font-weight: 700;
	}
}
.mobile-meny-container {
	position: fixed;
	width: 100%;
	z-index: 9000;
	display: flex;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translate3d(125px, 0, 0);
	transition: transform 300ms ease, opacity 200ms ease, visibility 0ms ease;
	flex-direction: column;
	background-color: #fff;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	opacity: 0;
	visibility: hidden;
	padding-bottom: 40px;
}
.mobile-meny-container.active-mobile-menu {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
}
.mobile-meny-logo {
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.mobile-meny-logo-close {
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.closemenubtn {
	font-size: 20px;
	color: #aaa;
	cursor: pointer;
}
.closemenubtn .fa,
.mobile-menu-li-icon-close {
	color: #000 !important;
}
.mobile-menu-ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.mobile-menu-ul li {
	font-size: 16px;
	padding: 15px 0;
	border-bottom: 1px solid #efefef;
}
.mobile-menu-ul li a {
	display: block;
	padding: 0;
	text-decoration: none;
	color: #000;
}
.mobile-menu-li-icon {
	color: #999;
	margin-right: 5px;
	float: right;
}
.mobile-meny-contact-heading {
	font-weight: 700;
	font-size: 20px;
	margin: 0;
	color: #000;
}
.mobile-meny-contact-text {
	font-size: 16px;
	color: #000;
}
.mobile-meny-contact-text a {
	color: #000;
	text-decoration: none;
}
.mobile-meny-contact-text-icon {
	color: #000 !important;
	margin-right: 15px;
}
body.noscroll {
	overflow: hidden;
}

/* ---- Information pages: /profilar /kundcase /varuprover ----
   Live CMS CSS + BS3 type. overflow-x:hidden on #information-information
   computes overflow-y:auto and creates a nested scrollbar. */
#information-information {
	overflow-x: clip;
	overflow-y: visible;
}
.kunder-stolt-container {
	max-width: 1260px !important;
	width: 100%;
}
.kunder-stolt-container h2 {
	font-size: 30px;
	font-weight: 100;
	line-height: 33px;
	margin-top: 20px;
	margin-bottom: 10px;
	color: #333;
}
.kundstolt-bild {
	display: block;
	width: auto !important;
	max-width: 100%;
	height: auto;
	padding: 15px;
	margin: 0 auto;
}
.kundcase-text-bild {
	display: block;
	width: auto !important;
	max-width: 208px;
	height: auto;
	margin: 0 auto 30px;
}
.kundcase-page img[src*="facit-logo-vit"] {
	max-width: 150px;
}

/* Live /kundcase case rows are full-bleed (BS3 fluid 15px + row −15px).
   BS5 .container-fluid keeps gutter padding; .g-0 removes the compensating
   negative margin, so the photos sit inside a white strip. */
.kundcase-page .container-fluid:has(.row.equal) {
	--bs-gutter-x: 0;
	padding-left: 0;
	padding-right: 0;
}
.kundcase-page .row.equal {
	--bs-gutter-x: 0;
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}
/* Live: the photo column is .no-padding, the text column keeps the BS3 15px
   col padding (text 624px wide at 1920, not 654 — different line wraps). */
.kundcase-page .row.equal > .col-md-5 {
	padding-left: 15px;
	padding-right: 15px;
}
.kundcase-page .fullwidth-image {
	width: 100%;
	display: block;
}

/* BS3 gutters are 15px; BS5 pads containers 10.5px and rows −10.5px here.
   The case-row container keeps 0 via :has(.row.equal)/.px-0 above. */
.kundcase-page .container-fluid {
	padding-left: 15px;
	padding-right: 15px;
}
.kundcase-page .kunder-stolt-container .row {
	--bs-gutter-x: 30px;
}

/* Live never sizes the /kundcase h1 below 1200px, so the theme h1 (2.5em =
   35px) shows under 768px and BS3's jumbotron default (63px from 768px) in
   768–1199. The template sets 36px at every width; body prefix outranks it. */
@media (max-width: 767.98px) {
	body .kundcase-page .jumbotron h1 {
		font-size: 35px;
	}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
	body .kundcase-page .jumbotron h1 {
		font-size: 63px;
	}
}

/* BS3 grid: .container is 750px (768–991) and 970px (992–1199); the template
   forces 1260px !important at every width. BS3 col-md starts at 992px, BS5 at
   768px, so in 768–991 live stacks photo over text in every case row (push/
   pull inactive, photo first in DOM) and shows the logos two per row. */
@media (min-width: 768px) and (max-width: 991.98px) {
	body .kundcase-page .jumbotroncontainer,
	body .kundcase-page .kunder-stolt-container {
		max-width: 750px !important;
	}
	body .kundcase-page .row.equal > .col-md-7,
	body .kundcase-page .row.equal > .col-md-5 {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		order: 0 !important;
	}
	body .kundcase-page .kunder-stolt-container .col-md-3 {
		flex: 0 0 50%;
		width: 50%;
	}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	body .kundcase-page .jumbotroncontainer,
	body .kundcase-page .kunder-stolt-container {
		max-width: 970px !important;
	}
}

/* ---- Blog (/blogg + posts), shared by cms/blog.twig and cms/blog_info.twig.
   Live is the Pavo blog on BS3: a 60px white breadcrumb strip (1440px inner,
   15px col padding, 10px type; 14px icon/strip from 1200px), a 20px gap, then a
   BS3 container (750/970/1260) with a 3/12 sidebar that is hidden below 992px. ---- */
.blog-crumb-bar {
	display: flow-root; /* keeps the list's 10px top margin inside the strip like the BS3 clearfix */
	padding: 0;
	background: #ffffff;
}
.blog-crumb-bar .blog-crumb-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 15px;
}
.blog-crumb-bar .blog-breadcrumb {
	display: block;
	height: auto;
	margin: 10px 0 0;
	padding: 15px 0;
	list-style: none;
	background: #ffffff;
	border-radius: 0;
	font-size: 10px;
	line-height: 1.42857;
	color: #000000;
}
.blog-crumb-bar .blog-breadcrumb li {
	display: inline;
	padding: 0;
}
/* Live separates crumbs with a plain " » " text node in the strip's own colour. */
.blog-crumb-bar .blog-breadcrumb li + li::before {
	content: "\00a0\00bb\00a0";
	display: inline;
	float: none;
	padding: 0;
	color: #000000;
}
.blog-crumb-bar--home-only .blog-breadcrumb li + li {
	display: none;
}
.blog-crumb-bar .blog-breadcrumb .fa-home {
	font-size: 10px;
	color: #000000;
}
.blog-crumb-bar .blog-breadcrumb a {
	font-size: 10px;
	color: #a9a9a9;
	text-decoration: none;
}
@media (min-width: 1200px) {
	.blog-crumb-bar .blog-breadcrumb {
		height: 50px;
		font-size: 14px;
		line-height: 20px;
	}
	.blog-crumb-bar .blog-breadcrumb .fa-home {
		font-size: 14px;
	}
}

.blog-page.container {
	margin-top: 10px;
	padding-left: 15px;
	padding-right: 15px;
}
.blog-page .row {
	--bs-gutter-x: 30px;
}
/* #cms-blog carries the id-level 1260px rule above; repeat it here so the
   BS3 widths win on the post page too. */
@media (min-width: 768px) {
	.blog-page.container {
		margin-top: 20px;
	}
	body .blog-page.container,
	body #cms-blog.container {
		max-width: 750px !important;
	}
}
@media (min-width: 992px) {
	body .blog-page.container,
	body #cms-blog.container {
		max-width: 970px !important;
	}
}
/* Live: BS3 .container is 1170px from 1200px; the theme's width: 1440px from
   1500px is capped by max-width: 1260px !important, so 1260 only from 1500. */
@media (min-width: 1200px) {
	body .blog-page.container,
	body #cms-blog.container {
		max-width: 1170px !important;
	}
}
@media (min-width: 1500px) {
	body .blog-page.container,
	body #cms-blog.container {
		max-width: 1260px !important;
	}
}

/* Sidebar: live .box-heading > span (58px, uppercase, wraps to two lines at
   992–1199) and the green #pav-categorymenu rows. */
.blog-page .blog-box-heading {
	background: #B4C6B9;
	color: #ffffff;
	font-size: 14px;
	line-height: 20px;
	padding: 0;
	margin: 0 0 10px;
}
.blog-page .blog-box-heading span {
	display: inline-block;
	height: 58px;
	padding: 0 20px;
	font-family: 'Spartan', sans-serif;
	font-size: 15px;
	line-height: 58px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0;
}
.blog-page .blog-box-content {
	background: transparent;
	padding: 0;
	margin: 0 0 10px;
}
.blog-page .blog-category-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.blog-page .blog-category-list li {
	margin: 0;
	padding: 19px 23px;
	background: #B4C6B9;
	border-bottom: 1px solid #ffffff;
	font-size: 14px;
	line-height: 20px;
}
.blog-page .blog-category-list a {
	color: #000000;
	text-decoration: none;
}
.blog-page .blog-category-list a:hover {
	text-decoration: underline;
}
.blog-page .snapwidget-widget {
	display: block;
	margin: 0 0 10px;
}

/* ---- /profilar (Om Profilar). Template CSS sits at the end of the page,
   so rules that override it carry a body prefix. ---- */

/* BS3 gutters: containers 15px, rows −15px, cols 15px (BS5: 10.5px). BS3 pads
   every col even outside .row (.equal-kontakt-div is a plain div) and never
   pads non-col children (the quote banner wrapper). */
.om-profilar-page .container-fluid {
	padding-left: 15px;
	padding-right: 15px;
}
.om-profilar-page .row {
	--bs-gutter-x: 30px;
}
.om-profilar-page .row > :not([class*="col-"]) {
	padding-left: 0;
	padding-right: 0;
}
.om-profilar-page .equal-kontakt-div > [class*="col-"] {
	padding-left: 15px;
	padding-right: 15px;
}

/* Live BS3 p { margin: 0 0 10px } also applies to the hero button row. */
body .om-profilar-page .om-profilar-knapp {
	margin-bottom: 10px;
}

/* Live switches the colour cards at 1180px (same breakpoint as the hero), not
   992px: flex-equal cards, 24px/58px title, 17px text and a 60px top margin. */
@media (min-width: 992px) and (max-width: 1179.98px) {
	body .om-profilar-page .equal-kontakt-div {
		align-items: flex-start;
	}
	body .om-profilar-page .kontaktdel-div-rubik-2 {
		font-size: 22px;
		line-height: 24px;
		padding-top: 15px;
	}
	body .om-profilar-page .kontaktdel-div-text-small {
		font-size: 14px;
	}
}
@media (min-width: 1180px) {
	body .om-profilar-page .kontaktdel-div {
		margin-top: 60px;
	}
}

/* BS3 grid: col-lg is 1200px (BS5 992px) and col-md 992px (BS5 768px). Live
   shows the service block full width up to 1199px, and in 768–991 stacks the
   hero text (photo column collapses to 1px), the six benefits and the three
   cards, with the logos two per row in a 750px container. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	body .om-profilar-page .col-lg-8.offset-lg-2 {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
	}
	body .om-profilar-page .kunder-stolt-container {
		max-width: 970px !important;
	}
}
@media (min-width: 768px) and (max-width: 991.98px) {
	body .om-profilar-page .row-flex > .col-md-6,
	body .om-profilar-page .col-md-4.col-sm-12,
	body .om-profilar-page .equal-kontakt-div > .col-md-4,
	body .om-profilar-page .equal-kontakt-div .col-md-8 {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
	}
	body .om-profilar-page .row-flex > .col-md-6.d-md-block {
		min-height: 1px;
	}
	body .om-profilar-page .kunder-stolt-container {
		max-width: 750px !important;
	}
	body .om-profilar-page .kunder-stolt-container .col-md-3 {
		flex: 0 0 50%;
		width: 50%;
	}
}

/* Live BS3 jumbotron padding 48px from 768px, height 200px border-box on /varuprover. */
.varuprover-page .jumbotron {
	padding: 30px 0;
	box-sizing: border-box;
}
@media (min-width: 768px) {
	.varuprover-page .jumbotron {
		padding: 48px 0;
	}
}

/* Live /varuprover jumbotron lead is 15px / 200 (17px from 1200px), not the
   global 21px jumbotron p. */
.varuprover-page .jumbotron p {
	font-size: 15px;
	font-weight: 200;
	line-height: 1.42857;
	margin-bottom: 15px;
	text-align: center;
}
@media (min-width: 1200px) {
	.varuprover-page .jumbotron p {
		font-size: 17px;
		line-height: 1.42857;
		text-align: left;
	}
	.varuprover-page .jumbotroncontainer,
	.kundcase-page .jumbotroncontainer {
		max-width: 1260px !important;
	}
}

/* Live BS3 gutters are 15px; BS5 pads containers 10.5px here. In the beige
   section that pushed the −15px .row.equal 4.5px outside the viewport on each
   side and made the text column 5px wider (different line wraps at 1024px);
   below 1200px the banner row and the logo container span the full width, so
   the 4.5px shows there too. */
.varuprover-page .container-fluid,
.varuprover-page .jumbotroncontainer {
	padding-left: 15px;
	padding-right: 15px;
}
.varuprover-page .jumbotroncontainer .row {
	--bs-gutter-x: 30px;
}

/* Live BS3: .form-group is itself a column (padding 0 15px) with
   margin-bottom 15px. BS5 only pads .row > * and has no .form-group, so the
   fields grew 16px, moved 15px left and the block lost 15px at the bottom. */
#varuprover-form .form-group.row {
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: 15px;
}
/* Below 992px live's cols are plain blocks (BS3 floats only from md), so the
   10px input margins collapse into a 10px gap; the template's flex row keeps
   both margins (20px). Body prefix outranks the template's inline rule. */
@media (max-width: 991.98px) {
	body #varuprover-form .form-group.row {
		display: block;
	}
}

/* Live inherits the BS3 body line-height 1.42857 (30px at the 1.1vw text
   size); oc4-parity pins body to 20px. Keeps the trailing #emailerror line
   and any unstyled text in the column at live height. */
.varuprover-page .kundcase-text {
	line-height: 1.42857;
}

/* BS3 headings are line-height 1.1 at every width; the template only sets
   it from 1200px, so BS5's 1.2 leaked in below (24px vs 22px). */
.varuprover-page .kundcase-text-div h2 {
	line-height: 1.1;
}

/* Live hides the illustration and the USP band below 768px (.hidden-xs);
   BS5 d-sm-block shows them from 576px. */
@media (max-width: 767.98px) {
	.varuprover-page .kundshop-topinfo img.d-sm-block,
	.varuprover-page .std-color-pine.d-sm-block {
		display: none !important;
	}
}

/* Live BS3 rows are floats: the USP icon sits at the top of its row. The
   template centres the flex row, which lowers the 51px icon below 1200px. */
body .varuprover-page .std-color-pine .row {
	align-items: flex-start;
}

/* BS3 grid: .container is 750px (768–991) and 970px (992–1199); the template's
   inline rules force 1260px !important at every width (same specificity, later
   in the cascade — hence the body prefix). BS3 col-md starts at 992px, BS5 at
   768px, so live stacks the illustration/form columns, shows the form fields
   full width and the customer logos two per row in the 768–991 range. */
@media (min-width: 768px) and (max-width: 991.98px) {
	body .varuprover-page .jumbotroncontainer,
	body .varuprover-page .std-color-pine .container,
	body .varuprover-page .kunder-stolt-container {
		max-width: 750px !important;
	}
	.varuprover-page .kundshop-topinfo .row.equal > .col-md-6 {
		flex: 0 1 auto;
		width: auto;
		max-width: 100%;
	}
	#varuprover-form .form-group.col-md-8,
	#varuprover-form .form-group > .col-md-6 {
		flex: 0 0 100%;
		width: 100%;
	}
	.varuprover-page .kunder-stolt-container .col-md-3 {
		flex: 0 0 50%;
		width: 50%;
	}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	body .varuprover-page .jumbotroncontainer,
	body .varuprover-page .std-color-pine .container,
	body .varuprover-page .kunder-stolt-container {
		max-width: 970px !important;
	}
}