/**
 * Configurator product page (presentation only).
 */

body.single-product.kf-configurator-page,
body.single-product.pewc-has-extra-fields {
	--kf-navy: #132d45;
	--kf-navy-soft: #2a455e;
	--kf-navy-head: #193a56;
	--kf-navy-fg: #f6f9fb;
	--kf-gold: #f2cf24;
	--kf-ink: #152d43;
	--kf-muted: #62748e;
	--kf-line: #dadee3;
	--kf-sand: #f6f5f1;
	--kf-mist: #f1f6fb;
	--kf-white: #ffffff;
	--kf-radius: 4px;
	--kf-gap: 40px;
	--kf-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--kf-display: "Poppins", var(--kf-body);
}

/* ==========================================================================
   First paint — never show the raw WPBakery product layout
   ========================================================================== */

body.single-product.kf-config-pending.kf-configurator-page .woocommerce-product-gallery {
	opacity: 0;
}

body.single-product.kf-config-pending.kf-configurator-page .main-page-wrapper,
body.single-product.kf-config-pending.kf-configurator-page .entry-content,
body.single-product.kf-config-pending.kf-configurator-page .wpb-content-wrapper {
	visibility: hidden;
}

body.single-product.kf-config-php .woocommerce-product-gallery,
body.single-product.kf-config-ready .woocommerce-product-gallery {
	opacity: 1;
}

body.single-product.kf-config-ready .main-page-wrapper,
body.single-product.kf-config-ready .entry-content,
body.single-product.kf-config-ready .wpb-content-wrapper {
	visibility: visible;
}

/* ==========================================================================
   Product row
   ========================================================================== */

body.single-product.kf-configurator-page .kf-config-row {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 28px;
	/* clip, not hidden — see the file header. */
	overflow-x: clip;
	margin: 0 0 42px !important;
	padding: 0 !important;
	max-width: 1400px;
	margin-inline: auto !important;
}

/* WPBakery gives .vc_row a clearfix ::before/::after. As grid items those take
   two cells of their own and push the columns onto separate rows. */
body.single-product.kf-configurator-page .kf-config-row::before,
body.single-product.kf-configurator-page .kf-config-row::after {
	content: none !important;
	display: none !important;
}

/* min-width: 0 on every cell: a grid item's automatic minimum size is its
   content, and the head, the drawing and the option lists all contain things
   (product titles, SVG, nowrap prices) wide enough to push the track past the
   viewport on a phone. */
body.single-product.kf-configurator-page .kf-config-row > * {
	min-width: 0;
}

body.single-product.kf-configurator-page .kf-config-row > .kf-head {
	grid-column: 1 / -1;
}

body.single-product.kf-configurator-page .kf-config-row > .wpb_column {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	float: none !important;
}

body.single-product.kf-configurator-page .kf-config-row .kf-main > .wpb_wrapper,
body.single-product.kf-configurator-page .kf-config-row .kf-side > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* Same reason as the row cells: without this the widest option label decides
   the column width instead of the viewport. */
body.single-product.kf-configurator-page .kf-config-row .kf-main > .wpb_wrapper > *,
body.single-product.kf-configurator-page .kf-config-row .kf-side > .wpb_wrapper > * {
	min-width: 0;
	max-width: 100%;
}

/* The drawing is the answer to "what have I configured", so it is first in the
   reading order and it is the element that stays in view. The column around it
   only carries the drawing and the photo gallery. */
body.single-product.kf-configurator-page .kf-config-row .kf-side {
	order: 1;
}

body.single-product.kf-configurator-page .kf-config-row .kf-main {
	order: 3;
}

body.single-product.kf-configurator-page .kf-visual-panel--drawing {
	order: 1;
}

body.single-product.kf-configurator-page .kf-visual-stage {
	order: 2;
}

@media (min-width: 992px) {
	body.single-product.kf-configurator-page .kf-config-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: var(--kf-gap);
	}

	/* Pin head / side / main so extra Woodmart nodes cannot shift the grid. */
	body.single-product.kf-configurator-page .kf-config-row > .kf-head {
		grid-row: 1;
	}

	/* The drawing card pins, not the column. The column used to be the sticky
	   element, and because it holds the photo gallery too, style.css had to cap
	   it with max-height: calc(100vh - 100px) and a scrollbar-less inner scroll.
	   The gallery then either hid inside that box or — once `overflow: visible`
	   won the cascade here — hung outside it and painted over the specifications
	   row below, which is the note box being cut off by the drawing card.

	   Instead the column stretches to the height of the options beside it and
	   the drawing pins inside it, so the photos scroll away under a drawing that
	   stays put. The height chain has to be explicit or the sticky card has no
	   room to travel. */
	body.single-product.kf-configurator-page .kf-config-row .kf-side {
		grid-column: 1;
		grid-row: 2;
		position: static !important;
		align-self: stretch !important;
		max-height: none !important;
		overflow: visible !important;
	}

	body.single-product.kf-configurator-page .kf-config-row .kf-side > .vc_column-inner,
	body.single-product.kf-configurator-page .kf-config-row .kf-side > .vc_column-inner > .wpb_wrapper {
		height: 100%;
	}

	body.single-product.kf-configurator-page .kf-visual-panel--drawing {
		position: sticky;
		top: 90px;
		z-index: 3;
	}

	body.single-product.kf-configurator-page .kf-config-row .kf-main {
		grid-column: 2;
		grid-row: 2;
	}
}

/* Woodmart hides the sticky column below its own breakpoints. The purchase
   journey needs it at every width, so the visibility classes are overruled. */
body.single-product.kf-configurator-page .kf-config-row .kf-side.vc_hidden-md,
body.single-product.kf-configurator-page .kf-config-row .kf-side.vc_hidden-sm,
body.single-product.kf-configurator-page .kf-config-row .kf-side.vc_hidden-xs {
	display: block !important;
}

body.single-product.kf-configurator-page .kf-config-row .vc_empty_space,
body.single-product.kf-configurator-page .kf-config-row .wd-single-countdown,
body.single-product.kf-configurator-page .kf-config-row .wd-single-action-btn,
body.single-product.kf-configurator-page .kf-config-row .wd-single-stock-progress-bar,
body.single-product.kf-configurator-page .kf-config-row .wd-single-brands,
body.single-product.kf-configurator-page .kf-config-row .wd-single-rating,
body.single-product.kf-configurator-page .kf-config-row .wd-single-compare-btn,
body.single-product.kf-configurator-page .kf-config-row .wd-shipping-progress-bar {
	display: none !important;
}

/* ==========================================================================
   Head — identity on the left, article number and price on the right
   ========================================================================== */

body.single-product.kf-configurator-page .kf-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 32px;
	padding-bottom: 4px;
}

body.single-product.kf-configurator-page .kf-head-identity {
	min-width: 0;
	flex: 1 1 320px;
}

body.single-product.kf-configurator-page .kf-eyebrow {
	margin: 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: var(--kf-navy-soft) !important;
	line-height: 1.4 !important;
}

body.single-product.kf-configurator-page .kf-head .wd-single-title h1,
body.single-product.kf-configurator-page .kf-head h1.product_title,
body.single-product.kf-configurator-page .kf-head .product-title {
	font-family: var(--kf-display) !important;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	color: var(--kf-navy-head) !important;
	margin: 8px 0 0 !important;
}

body.single-product.kf-configurator-page .kf-head .wd-single-title {
	margin: 0 !important;
}

body.single-product.kf-configurator-page .kf-head .wd-single-meta {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--kf-muted) !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
}

body.single-product.kf-configurator-page .kf-head .wd-single-meta > div,
body.single-product.kf-configurator-page .kf-head .wd-single-meta .sku_wrapper {
	margin: 0 !important;
	font-size: inherit !important;
	color: inherit !important;
}

body.single-product.kf-configurator-page .kf-head-aside {
	flex: 0 0 auto;
	text-align: right;
	min-width: 0;
}

body.single-product.kf-configurator-page .kf-head-artnr {
	margin: 0 !important;
	font-size: 12px !important;
	color: var(--kf-muted) !important;
	line-height: 1.4 !important;
}

body.single-product.kf-configurator-page .kf-head-artnr:empty {
	display: none !important;
}

body.single-product.kf-configurator-page .kf-head-price {
	margin: 2px 0 0 !important;
	font-family: var(--kf-display) !important;
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem) !important;
	font-weight: 600 !important;
	color: var(--kf-navy-head) !important;
	line-height: 1.2 !important;
	white-space: nowrap;
}

body.single-product.kf-configurator-page .kf-head-price:empty {
	display: none !important;
}

/* The intro block repeats the h1 verbatim; the h1 above and the description in
   the information deck both remain, so nothing is lost by dropping this one. */
body.single-product.kf-configurator-page .kf-config-row .kf-dupe-title,
body.single-product.kf-configurator-page .kf-intro-with-moved-gallery .kf-intro-teaser {
	display: none !important;
}

body.single-product.kf-configurator-page .kf-head-copy {
	margin: 0 0 4px !important;
}

/* The teaser column is excluded: it is hidden above, and a later blanket
   display:block here would put the duplicate gallery image back. */
body.single-product.kf-configurator-page .kf-head-copy .vc_inner,
body.single-product.kf-configurator-page .kf-head-copy .wpb_column:not(.kf-intro-teaser) {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.single-product.kf-configurator-page .kf-head-copy p {
	margin: 0 0 8px !important;
	color: var(--kf-muted) !important;
	font-size: 15px !important;
	line-height: 1.65 !important;
}

body.single-product.kf-configurator-page .kf-head-copy p:last-child {
	margin-bottom: 0 !important;
}

/* ==========================================================================
   Sticky column — drawing, photos, three facts
   ========================================================================== */

body.single-product.kf-configurator-page .kf-visual-panel--drawing,
body.single-product.kf-configurator-page .kf-visual-stage {
	background: var(--kf-white);
	border: 1px solid var(--kf-line);
	border-radius: var(--kf-radius);
	padding: 16px;
}

body.single-product.kf-configurator-page .kf-visual-stage.is-empty {
	display: none !important;
}

body.single-product.kf-configurator-page .kf-panel-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

body.single-product.kf-configurator-page .kf-panel-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kf-navy-soft);
}

body.single-product.kf-configurator-page .kf-panel-dims {
	font-size: 12px;
	color: var(--kf-muted);
	font-variant-numeric: tabular-nums;
}

/* #drawBoard is moved here as one node and keeps a real box at every width.
   Only its size changes — never its identity, its parent chain or its
   visibility. */
body.single-product.kf-configurator-page .drawboard-placeholder {
	margin: 0 !important;
	padding: 0 !important;
}

body.single-product.kf-configurator-page .drawboard-placeholder .wpb_wrapper {
	display: block !important;
	gap: 0 !important;
}

body.single-product.kf-configurator-page #drawBoard {
	position: relative;
	width: 100% !important;
	min-height: 300px;
	height: clamp(300px, 34vw, 460px) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(var(--kf-line) 1px, transparent 1px) 0 0 / 100% 28px,
		linear-gradient(90deg, var(--kf-line) 1px, transparent 1px) 0 0 / 28px 100%,
		var(--kf-sand);
	border-radius: var(--kf-radius);
	overflow: hidden;
}

body.single-product.kf-configurator-page #drawBoard-data {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Photos sit under the drawing. Woodmart's own carousel markup is untouched so
   Swiper still initialises. */
body.single-product.kf-configurator-page .kf-visual-panel--photos {
	min-width: 0;
}

body.single-product.kf-configurator-page .kf-visual-panel--photos .woocommerce-product-gallery {
	width: 100% !important;
	margin: 0 !important;
	opacity: 1 !important;
}

body.single-product.kf-configurator-page .kf-visual-panel--photos .wd-gallery-images img {
	width: 100%;
	height: auto;
	border-radius: var(--kf-radius);
	object-fit: contain;
}

body.single-product.kf-configurator-page .kf-visual-panel--photos .wd-gallery-thumb {
	margin-top: 10px !important;
}

body.single-product.kf-configurator-page .kf-visual-panel--photos .wd-gallery-thumb .wd-carousel-item {
	width: 88px !important;
}

body.single-product.kf-configurator-page .kf-visual-panel--photos .wd-gallery-thumb img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border: 1px solid var(--kf-line);
	border-radius: var(--kf-radius);
	background: var(--kf-white);
}

/* ==========================================================================
   Steps — the numbered configuration sections
   ========================================================================== */

body.single-product.kf-configurator-page .kf-config-row .wd-single-add-cart {
	margin: 0 !important;
	padding: 0 !important;
}

body.single-product.kf-configurator-page form.cart {
	margin: 0 !important;
	padding: 0 !important;
}

/* Keep nested cart wrappers from overflowing on phones. */
body.single-product.kf-configurator-page form.cart > *,
body.single-product.kf-configurator-page form.cart .single_variation_wrap,
body.single-product.kf-configurator-page form.cart .woocommerce-variation-add-to-cart,
body.single-product.kf-configurator-page form.cart .cupf-custom-field-wrapper,
body.single-product.kf-configurator-page form.cart .pewc-product-extra-groups-wrap > * {
	min-width: 0;
	max-width: 100%;
}

body.single-product.kf-configurator-page .pewc-product-extra-groups-wrap {
	counter-reset: kf-step;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

body.single-product.kf-configurator-page .pewc-group-wrap,
body.single-product.kf-configurator-page .kf-group-wrap {
	counter-increment: kf-step;
	margin: 0 !important;
	padding: 16px !important;
	background: var(--kf-white) !important;
	border: 1px solid var(--kf-line) !important;
	border-radius: var(--kf-radius) !important;
	box-shadow: none !important;
	min-width: 0;
}

@media (min-width: 992px) {
	body.single-product.kf-configurator-page .pewc-group-wrap,
	body.single-product.kf-configurator-page .kf-group-wrap {
		padding: 20px !important;
	}
}

/* Utförande is not a PEWC group; it holds the WooCommerce variation attributes.
   It is placed after Mått and styled identically so the steps read as one set. */
body.single-product.kf-configurator-page .kf-group--utforande {
	order: 0;
}

body.single-product.kf-configurator-page .pewc-group-heading-wrapper,
body.single-product.kf-configurator-page .kf-group-heading-wrapper {
	display: flex !important;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	margin: 0 0 14px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	cursor: pointer;
	min-width: 0;
}

body.single-product.kf-configurator-page .pewc-group-heading-wrapper h3,
body.single-product.kf-configurator-page .kf-group-heading-wrapper h3 {
	display: flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--kf-display) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--kf-navy) !important;
	min-width: 0;
}

/* PEWC uses h3::before as its own absolutely positioned accordion arrow, so
   position and box have to be restated, not just the content. The arrow is
   redrawn on ::after below. */
body.single-product.kf-configurator-page .pewc-group-heading-wrapper h3::before,
body.single-product.kf-configurator-page .kf-group-heading-wrapper h3::before {
	content: counter(kf-step) !important;
	position: static !important;
	display: grid !important;
	place-items: center;
	flex: 0 0 auto;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--kf-navy) !important;
	color: var(--kf-navy-fg) !important;
	font-family: var(--kf-body) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	transform: none !important;
}

/* PEWC's own open/close chevron. */
body.single-product.kf-configurator-page .pewc-group-heading-wrapper h3::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-left: 4px;
	border-right: 2px solid var(--kf-muted);
	border-bottom: 2px solid var(--kf-muted);
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
}

body.single-product.kf-configurator-page .pewc-group-wrap.group-active .pewc-group-heading-wrapper h3::after {
	transform: rotate(225deg) translateY(-2px);
}

body.single-product.kf-configurator-page .kf-group-summary {
	min-width: 0;
	flex: 0 1 auto;
	font-size: 12px;
	color: var(--kf-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
}

/* PEWC opens a group by adding .group-active and lifts max-height from its own
   stylesheet. On this site that declaration loses the cascade, so an open group
   stayed 0 px high and its fields were clipped away. Stating the open state here
   restores it; closed groups are untouched so nothing leaks out. */
body.single-product.kf-configurator-page .pewc-group-wrap.group-active > .pewc-group-content-wrapper {
	max-height: none !important;
	height: auto !important;
	overflow: visible !important;
}

/* PEWC collapses with max-height:0 on this wrapper, and overflow clips at the
   padding edge. Any vertical padding here leaves a sliver of the first option
   row visible under a closed heading, so the inner list carries the spacing. */
body.single-product.kf-configurator-page .pewc-group-content-wrapper,
body.single-product.kf-configurator-page .kf-group-content-wrapper {
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

body.single-product.kf-configurator-page .pewc-product-extra-groups {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

body.single-product.kf-configurator-page .pewc-item {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	list-style: none !important;
	min-width: 0;
}

body.single-product.kf-configurator-page .pewc-item::before,
body.single-product.kf-configurator-page .pewc-item::marker {
	content: none !important;
}

/* Calculation fields stay in the form for PEWC and are never shown. */
body.single-product.kf-configurator-page .pewc-item.pewc-item-calculation,
body.single-product.kf-configurator-page .pewc-item.pewc-item-calculation.pewc-variation-dependent,
body.single-product.kf-configurator-page .pewc-item.pewc-item-calculation.pewc-variation-dependent.active,
body.single-product.kf-configurator-page .pewc-hidden-field {
	display: none !important;
}

/* ── Field labels ── */

body.single-product.kf-configurator-page .pewc-item .pewc-field-label,
body.single-product.kf-configurator-page .pewc-item-field-wrapper > label:not(.pewc-radio-form-label):not(.pewc-checkbox-form-label),
body.single-product.kf-configurator-page .pewc-item > label:not(.pewc-radio-form-label):not(.pewc-checkbox-form-label) {
	display: block !important;
	margin: 0 0 6px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--kf-navy) !important;
	line-height: 1.35 !important;
}

/* Hide decorative required asterisks; fields still validate. */
body.single-product.kf-configurator-page .pewc-field-label .required {
	display: none !important;
}

/* Mått labels: measurements, not option chips. */
body.single-product.kf-configurator-page .kf-group--dims .pewc-field-label,
body.single-product.kf-configurator-page .kf-group--dims .pewc-item-field-wrapper > label {
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--kf-muted) !important;
}

body.single-product.kf-configurator-page .pewc-field-description,
body.single-product.kf-configurator-page .pewc-item .description {
	margin: 0 0 8px !important;
	font-size: 11.5px !important;
	line-height: 1.5 !important;
	color: var(--kf-muted) !important;
}

/* ── Text, number and select controls ── */

body.single-product.kf-configurator-page .pewc-item input[type="text"],
body.single-product.kf-configurator-page .pewc-item input[type="number"],
body.single-product.kf-configurator-page .pewc-item input[type="email"],
body.single-product.kf-configurator-page .pewc-item textarea,
body.single-product.kf-configurator-page .pewc-item select {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 44px !important;
	padding: 10px 12px !important;
	font-family: var(--kf-body) !important;
	font-size: 14px !important;
	color: var(--kf-navy) !important;
	background: var(--kf-white) !important;
	border: 1px solid var(--kf-line) !important;
	border-radius: var(--kf-radius) !important;
	box-shadow: none !important;
	outline: none !important;
	appearance: none;
}

body.single-product.kf-configurator-page .pewc-item select {
	padding-right: 34px !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2362748e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
}

body.single-product.kf-configurator-page .pewc-item input:focus,
body.single-product.kf-configurator-page .pewc-item select:focus,
body.single-product.kf-configurator-page .pewc-item textarea:focus {
	border-color: var(--kf-navy) !important;
	box-shadow: 0 0 0 1px var(--kf-navy) !important;
}

body.single-product.kf-configurator-page .kf-group--dims input[type="number"],
body.single-product.kf-configurator-page .kf-group--dims input[type="text"] {
	pointer-events: auto !important;
	user-select: text !important;
}

/* ── The measurements step ── */

body.single-product.kf-configurator-page .kf-group--dims .pewc-product-extra-groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}

body.single-product.kf-configurator-page .kf-group--dims .pewc-item-checkbox {
	grid-column: 1 / -1;
}

/* Products that only take typed width/height (over 3 m², Air oversized, etc.)
   must keep those number fields on screen. PEWC's hidden-field class and an
   older Air-only hide both used to leave the Mått group empty. */
body.single-product.kf-configurator-page .kf-group--dims.kf-dims-free .pewc-item:has(input[type="number"]):not(.pewc-item-calculation),
body.single-product.kf-configurator-page .kf-group--dims.kf-dims-free .pewc-item:has(input[type="number"]):not(.pewc-item-calculation).pewc-hidden-field {
	display: list-item !important;
}

body.single-product.kf-configurator-page .kf-group--dims.kf-dims-free .pewc-item:has(input[type="number"]):not(.pewc-item-calculation) .pewc-item-field-wrapper {
	display: block !important;
}

/* ── Single checkbox toggles ("Ange fria mått", "Annan färg än vit") ── */

body.single-product.kf-configurator-page .pewc-item-checkbox.pewc-option-list .pewc-checkbox-group-wrapper,
body.single-product.kf-configurator-page .pewc-item-checkbox .pewc-item-field-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

body.single-product.kf-configurator-page .pewc-item input[type="checkbox"],
body.single-product.kf-configurator-page .pewc-item input[type="radio"] {
	flex: 0 0 auto;
	width: 18px !important;
	height: 18px !important;
	min-height: 0 !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	accent-color: var(--kf-navy);
	border-radius: 3px !important;
}

body.single-product.kf-configurator-page .pewc-item-checkbox label,
body.single-product.kf-configurator-page .pewc-item-checkbox .pewc-field-label {
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--kf-navy) !important;
	cursor: pointer;
}

/* ── Option cards ──
   PEWC renders a choosable product as
     .pewc-{radio,checkbox}-image-wrapper
       > label > input + img
       > .pewc-{radio,checkbox}-desc-wrapper  (name + price)
   PEWC's own stylesheet parks the description as an overlay on the photo.
   That is the cramped look: a 40 px thumbnail with a grey box of text on top.
   Cards here are vertical — photo, then name, then price — matching the
   reference layout. */

body.single-product.kf-configurator-page .pewc-radio-images-wrapper,
body.single-product.kf-configurator-page .pewc-checkboxes-images-wrapper,
body.single-product.kf-configurator-page .child-product-wrapper {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 12px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	float: none !important;
}

body.single-product.kf-configurator-page .pewc-radio-image-wrapper,
body.single-product.kf-configurator-page .pewc-checkbox-image-wrapper {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0 !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	overflow: hidden;
	background: var(--kf-white) !important;
	border: 1px solid var(--kf-line) !important;
	border-radius: var(--kf-radius) !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
}

body.single-product.kf-configurator-page .pewc-radio-image-wrapper:hover,
body.single-product.kf-configurator-page .pewc-checkbox-image-wrapper:hover {
	border-color: rgba(19, 45, 69, 0.45) !important;
}

body.single-product.kf-configurator-page .pewc-radio-image-wrapper.pewc-checked,
body.single-product.kf-configurator-page .pewc-checkbox-image-wrapper.pewc-checked,
body.single-product.kf-configurator-page .pewc-radio-image-wrapper:has(input:checked),
body.single-product.kf-configurator-page .pewc-checkbox-image-wrapper:has(input:checked) {
	border-color: var(--kf-navy) !important;
	box-shadow: 0 0 0 1px var(--kf-navy) !important;
	background: var(--kf-white) !important;
}

body.single-product.kf-configurator-page .pewc-radio-image-wrapper > label,
body.single-product.kf-configurator-page .pewc-checkbox-image-wrapper > label {
	flex: 0 0 auto;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	background: var(--kf-sand);
}

body.single-product.kf-configurator-page .pewc-radio-image-wrapper > label img,
body.single-product.kf-configurator-page .pewc-checkbox-image-wrapper > label img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	aspect-ratio: 1 / 1;
	margin: 0 !important;
	object-fit: contain;
	object-position: center;
	border-radius: 0 !important;
	background: var(--kf-sand);
}

body.single-product.kf-configurator-page .pewc-radio-image-desc,
body.single-product.kf-configurator-page .pewc-checkbox-image-desc {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
	max-height: none !important;
	overflow: visible !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--kf-navy) !important;
	text-align: center !important;
}

body.single-product.kf-configurator-page .pewc-radio-image-desc .pewc-separator,
body.single-product.kf-configurator-page .pewc-checkbox-image-desc .pewc-separator {
	display: none !important;
}

body.single-product.kf-configurator-page .pewc-radio-image-desc .pewc-child-product-price-label,
body.single-product.kf-configurator-page .pewc-checkbox-image-desc .pewc-child-product-price-label {
	display: block !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--kf-navy) !important;
}

body.single-product.kf-configurator-page .pewc-radio-image-wrapper .pewc-theme-element,
body.single-product.kf-configurator-page .pewc-checkbox-image-wrapper .pewc-theme-element {
	display: none !important;
}

/* PEWC absolutely positions this over the photo. Pull it back into the flow. */
body.single-product.kf-configurator-page .pewc-checkbox-desc-wrapper,
body.single-product.kf-configurator-page .pewc-radio-desc-wrapper {
	position: static !important;
	inset: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	flex: 1 1 auto;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	min-width: 0;
	width: 100% !important;
	margin: 0 !important;
	padding: 8px 10px 10px !important;
	background: transparent !important;
	text-align: center;
}

body.single-product.kf-configurator-page .pewc-radio-image-desc,
body.single-product.kf-configurator-page .pewc-checkbox-image-desc {
	display: block !important;
	width: 100%;
	max-height: 2.7em;
	overflow: hidden;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--kf-navy) !important;
	text-align: center !important;
}

body.single-product.kf-configurator-page .pewc-separator,
body.single-product.kf-configurator-page .pewc-child-product-price-label,
body.single-product.kf-configurator-page .pewc-field-price,
body.single-product.kf-configurator-page .pewc-price-label {
	display: block !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--kf-navy) !important;
	white-space: nowrap;
	text-align: center;
}

body.single-product.kf-configurator-page .kf-sekel-hw-qty {
	display: block;
	margin-top: 2px;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #5a6570 !important;
	white-space: normal;
}

body.single-product.kf-configurator-page .kf-sekel-hw-qty {
	display: block;
	margin-top: 2px;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #5a6570 !important;
	white-space: normal;
}

body.single-product.kf-configurator-page .pewc-radio-image-wrapper > label input[type="radio"],
body.single-product.kf-configurator-page .pewc-radio-image-wrapper > label input[type="checkbox"],
body.single-product.kf-configurator-page .pewc-checkbox-image-wrapper > label input[type="radio"],
body.single-product.kf-configurator-page .pewc-checkbox-image-wrapper > label input[type="checkbox"] {
	position: absolute !important;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	accent-color: var(--kf-navy);
	cursor: pointer;
}

body.single-product.kf-configurator-page .pewc-child-quantity-wrapper {
	flex: 0 0 auto;
	margin: 0 0 10px !important;
	padding: 0 12px;
}

body.single-product.kf-configurator-page .pewc-child-quantity-wrapper input {
	width: 52px !important;
	min-height: 32px !important;
	padding: 4px 6px !important;
	text-align: center;
	font-size: 12px !important;
}

/* Text radios/checkboxes as chips. Keep the input visible to jQuery. */

body.single-product.kf-configurator-page .pewc-item-radio .pewc-item-field-wrapper,
body.single-product.kf-configurator-page .pewc-item-radio .pewc-form-field {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

body.single-product.kf-configurator-page .pewc-item-radio .pewc-field-label,
body.single-product.kf-configurator-page .pewc-item-radio .read-more-wrapper,
body.single-product.kf-configurator-page .pewc-item-radio .read-more-btn-product,
body.single-product.kf-configurator-page .pewc-item-radio .pewc-field-description {
	flex: 1 0 100%;
}

/* ── Text radio groups as a list, not wrapped pills ──
   Typ av spröjs runs from "Inga spröjs" to "Utanpåliggande flaggspröjs med
   distanslist (Trä)". As pills those wrap into ragged rows of two, one and
   one. One full-width row per option keeps the edges straight, keeps every
   label on a single line and gives the same reading order on a phone. */
/* PEWC nests radios in ul.pewc-checkbox-group-wrapper > li > label, so the
   list is the element that has to stop wrapping. */
body.single-product.kf-configurator-page .pewc-item-radio .pewc-form-field,
body.single-product.kf-configurator-page .pewc-item-radio ul.pewc-checkbox-group-wrapper {
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 6px;
	width: 100%;
}

body.single-product.kf-configurator-page .pewc-item-radio ul.pewc-checkbox-group-wrapper > li {
	width: 100%;
}

body.single-product.kf-configurator-page .pewc-item-radio .pewc-radio-form-label {
	display: flex !important;
	justify-content: flex-start !important;
	width: 100%;
	padding: 10px 14px !important;
	border-radius: var(--kf-radius) !important;
	text-align: left;
}

/* The input is visually hidden to keep the pill shape, so the row draws its
   own radio mark. */
body.single-product.kf-configurator-page .pewc-item-radio .pewc-radio-form-label::before {
	content: "";
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	margin-right: 10px;
	border: 1px solid rgba(19, 45, 69, 0.35);
	border-radius: 50%;
	background: var(--kf-white);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.single-product.kf-configurator-page .pewc-item-radio .pewc-radio-form-label:has(input:checked),
body.single-product.kf-configurator-page .pewc-item-radio .pewc-radio-form-label.pewc-checked {
	background: rgba(19, 45, 69, 0.04) !important;
	border-color: var(--kf-navy) !important;
	box-shadow: 0 0 0 1px var(--kf-navy);
	color: var(--kf-navy) !important;
}

body.single-product.kf-configurator-page .pewc-item-radio .pewc-radio-form-label:has(input:checked)::before,
body.single-product.kf-configurator-page .pewc-item-radio .pewc-radio-form-label.pewc-checked::before {
	border-color: var(--kf-navy);
	box-shadow: inset 0 0 0 4px var(--kf-navy);
}

body.single-product.kf-configurator-page ul.pewc-checkbox-group-wrapper {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

body.single-product.kf-configurator-page ul.pewc-checkbox-group-wrapper > li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

body.single-product.kf-configurator-page ul.pewc-checkbox-group-wrapper > li::before,
body.single-product.kf-configurator-page ul.pewc-checkbox-group-wrapper > li::marker {
	content: none !important;
}

body.single-product.kf-configurator-page .pewc-radio-form-label,
body.single-product.kf-configurator-page ul.pewc-checkbox-group-wrapper .pewc-checkbox-form-label {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 9px 16px !important;
	background: var(--kf-white) !important;
	border: 1px solid var(--kf-line) !important;
	border-radius: 999px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	line-height: 1.25 !important;
	color: var(--kf-navy) !important;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.single-product.kf-configurator-page .pewc-radio-form-label:hover,
body.single-product.kf-configurator-page ul.pewc-checkbox-group-wrapper .pewc-checkbox-form-label:hover {
	background: var(--kf-sand) !important;
}

body.single-product.kf-configurator-page .pewc-radio-form-label input,
body.single-product.kf-configurator-page ul.pewc-checkbox-group-wrapper .pewc-checkbox-form-label input {
	position: absolute !important;
	top: 50%;
	left: 6px;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	margin: 0 !important;
	opacity: 0;
}

body.single-product.kf-configurator-page .pewc-radio-form-label .pewc-theme-element,
body.single-product.kf-configurator-page ul.pewc-checkbox-group-wrapper .pewc-theme-element {
	display: none !important;
}

body.single-product.kf-configurator-page .pewc-radio-form-label:has(input:checked),
body.single-product.kf-configurator-page .pewc-radio-form-label.pewc-checked,
body.single-product.kf-configurator-page ul.pewc-checkbox-group-wrapper li:has(input:checked) > label,
body.single-product.kf-configurator-page ul.pewc-checkbox-group-wrapper > li > label.pewc-checked {
	background: var(--kf-navy) !important;
	border-color: var(--kf-navy) !important;
	color: #fff !important;
}

body.single-product.kf-configurator-page .pewc-radio-option-text,
body.single-product.kf-configurator-page .pewc-checkbox-option-text {
	color: inherit !important;
	font: inherit !important;
}

/* ── Standalone checkbox rows ("Ange fria mått", "Annan färg än vit") ── */

body.single-product.kf-configurator-page .pewc-item-field-wrapper > label.pewc-checkbox-form-label {
	display: flex !important;
	align-items: center;
	gap: 9px;
	margin: 0 !important;
	padding: 10px 12px !important;
	background: var(--kf-sand) !important;
	border: 1px solid var(--kf-line) !important;
	border-radius: var(--kf-radius) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--kf-navy) !important;
	cursor: pointer;
}

/* The explanation belongs under the choice, not beside it. Side by side the
   label box shrinks to a two-word column and the description crowds in next
   to it — that is what made Färg, lasyr & behandling unreadable. */
body.single-product.kf-configurator-page .pewc-item-checkbox .pewc-item-field-wrapper {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

body.single-product.kf-configurator-page .pewc-item-checkbox .pewc-item-field-wrapper > label.pewc-checkbox-form-label {
	width: 100%;
}

body.single-product.kf-configurator-page .pewc-item-checkbox:has(input:checked) > .pewc-item-field-wrapper > label.pewc-checkbox-form-label {
	background: rgba(19, 45, 69, 0.04) !important;
	border-color: var(--kf-navy) !important;
	box-shadow: 0 0 0 1px var(--kf-navy);
}

/* Checkbox rows PEWC gives a photo (Ändra karmdjup, Lägg till post) become one
   card: thumbnail, choice, explanation. Without this the photo, a boxed label
   and the description sit as three loose columns of different widths. */
body.single-product.kf-configurator-page .pewc-item-checkbox.pewc-has-field-image {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 10px 12px !important;
	background: var(--kf-white);
	border: 1px solid var(--kf-line);
	border-radius: var(--kf-radius);
}

body.single-product.kf-configurator-page .pewc-item-checkbox.pewc-has-field-image:has(input:checked) {
	background: rgba(19, 45, 69, 0.04);
	border-color: var(--kf-navy);
	box-shadow: 0 0 0 1px var(--kf-navy);
}

body.single-product.kf-configurator-page .pewc-item-checkbox.pewc-has-field-image .pewc-item-field-image-wrapper {
	flex: 0 0 52px;
	width: 52px;
	margin: 0 !important;
}

body.single-product.kf-configurator-page .pewc-item-checkbox.pewc-has-field-image .pewc-item-field-image-wrapper img {
	display: block;
	width: 52px !important;
	height: 52px !important;
	margin: 0 !important;
	object-fit: cover;
	border-radius: 4px;
	background: var(--kf-sand);
}

body.single-product.kf-configurator-page .pewc-item-checkbox.pewc-has-field-image .pewc-item-field-wrapper {
	flex: 1 1 auto;
	min-width: 0;
}

/* No box inside a box: the card is the frame here. */
body.single-product.kf-configurator-page .pewc-item-checkbox.pewc-has-field-image .pewc-item-field-wrapper > label.pewc-checkbox-form-label,
body.single-product.kf-configurator-page .pewc-item-checkbox.pewc-has-field-image:has(input:checked) > .pewc-item-field-wrapper > label.pewc-checkbox-form-label {
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none;
	border-radius: 0 !important;
}

body.single-product.kf-configurator-page .pewc-item-field-wrapper > label.pewc-checkbox-form-label input {
	flex: 0 0 auto;
	width: 17px !important;
	height: 17px !important;
	margin: 0 !important;
	accent-color: var(--kf-navy);
}

/* Included-as-standard table. Keep the real "0 kr" badge. */

body.single-product.kf-configurator-page table.pewc-information-fields {
	width: 100% !important;
	margin: 0 !important;
	border: 1px solid var(--kf-line) !important;
	border-collapse: collapse !important;
	border-radius: var(--kf-radius);
	background: var(--kf-sand) !important;
	overflow: hidden;
}

body.single-product.kf-configurator-page table.pewc-information-fields tr {
	border-bottom: 1px solid var(--kf-line);
}

body.single-product.kf-configurator-page table.pewc-information-fields tr:last-child {
	border-bottom: 0;
}

body.single-product.kf-configurator-page table.pewc-information-fields td {
	padding: 9px 12px !important;
	border: 0 !important;
	background: transparent !important;
	vertical-align: middle;
	font-size: 13px !important;
	line-height: 1.4;
	color: var(--kf-navy) !important;
}

body.single-product.kf-configurator-page td.pewc-information-image {
	width: 60px;
	padding-right: 0 !important;
}

body.single-product.kf-configurator-page td.pewc-information-image img {
	display: block;
	width: 36px !important;
	height: 36px !important;
	object-fit: cover;
	border-radius: 3px;
	opacity: 0.9;
}

body.single-product.kf-configurator-page td.pewc-information-label {
	font-weight: 500 !important;
}

body.single-product.kf-configurator-page td.pewc-information-data {
	width: 1%;
	white-space: nowrap;
	text-align: right;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kf-navy-soft) !important;
}

/* ── Long option copy PEWC folds behind "Läs mer" ── */

body.single-product.kf-configurator-page .read-more-wrapper,
body.single-product.kf-configurator-page p.pewc-description {
	margin: 6px 0 0 !important;
	font-size: 11.5px !important;
	line-height: 1.55 !important;
	color: var(--kf-muted) !important;
}

body.single-product.kf-configurator-page .read-more-wrapper a,
body.single-product.kf-configurator-page .pewc-read-more {
	font-weight: 700;
	color: var(--kf-navy) !important;
	text-decoration: none !important;
	border-bottom: 1px solid var(--kf-gold);
}

/* Distinct from the option chips it sits next to: this opens an explanation,
   it is not something to choose. */
body.single-product.kf-configurator-page .read-more-btn-product {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--kf-navy) !important;
	cursor: pointer;
}

body.single-product.kf-configurator-page .read-more-btn-product > span,
body.single-product.kf-configurator-page .read-more-btn-product {
	text-decoration: underline;
	text-decoration-color: var(--kf-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

body.single-product.kf-configurator-page .read-more-btn-product img {
	width: 15px !important;
	height: 15px !important;
	margin: 0 !important;
	opacity: 0.65;
}

body.single-product.kf-configurator-page .read-more-content-div {
	margin-top: 8px;
}

body.single-product.kf-configurator-page .read-more-paragraph {
	margin: 0 !important;
	font-size: 11.5px !important;
	line-height: 1.6 !important;
	color: var(--kf-muted) !important;
}

/* ==========================================================================
   Utförande — WooCommerce variation attributes as option cards
   ========================================================================== */

body.single-product.kf-configurator-page .kf-group--utforande table.variations {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

body.single-product.kf-configurator-page .kf-group--utforande table.variations tbody {
	display: grid !important;
	grid-template-columns: 1fr;
	/* Rows sit side by side, so they must start on the same line. Centred, the
	   taller row pulls its label above the other one's. */
	align-items: start !important;
	gap: 18px;
	width: 100%;
}

/* Woodmart appends its "Rensa" control to the last attribute row only, which
   made that row 22 px taller than the one beside it. The swatch cards and the
   step summary already say what is selected. */
body.single-product.kf-configurator-page .kf-group--utforande .wd-reset-var {
	display: none !important;
}

body.single-product.kf-configurator-page .kf-group--utforande table.variations tr {
	display: block !important;
	min-width: 0;
	border: 0 !important;
}

body.single-product.kf-configurator-page .kf-group--utforande table.variations th,
body.single-product.kf-configurator-page .kf-group--utforande table.variations td {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

body.single-product.kf-configurator-page .kf-group--utforande table.variations th.label label {
	display: inline !important;
	margin: 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--kf-navy) !important;
}

body.single-product.kf-configurator-page .kf-group--utforande table.variations th.label {
	display: flex !important;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 10px;
	margin-bottom: 8px !important;
}

/* Woodmart ends the label with a colon and woo-variation-swatches follows it
   with ": 2-glas". Both go: the chosen card is outlined and ticked, and the
   step heading already carries the selection. */
body.single-product.kf-configurator-page .kf-group--utforande table.variations th.label label::after {
	content: none !important;
}

body.single-product.kf-configurator-page .kf-group--utforande .woo-selected-variation-item-name {
	display: none !important;
}

body.single-product.kf-configurator-page .woo-selected-variation-item-name {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: var(--kf-navy-soft) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

body.single-product.kf-configurator-page .kf-group--utforande .variable-items-wrapper {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

body.single-product.kf-configurator-page .kf-group--utforande .variable-item {
	position: relative;
	display: flex !important;
	flex-direction: column;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--kf-white) !important;
	border: 1px solid var(--kf-line) !important;
	border-radius: var(--kf-radius) !important;
	box-shadow: none !important;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	min-width: 0;
}

body.single-product.kf-configurator-page .kf-group--utforande .variable-item:hover {
	border-color: rgba(19, 45, 69, 0.45) !important;
}

body.single-product.kf-configurator-page .kf-group--utforande .variable-item.selected,
body.single-product.kf-configurator-page .kf-group--utforande .variable-item[aria-checked="true"] {
	border-color: var(--kf-navy) !important;
	box-shadow: 0 0 0 1px var(--kf-navy) !important;
	background: rgba(19, 45, 69, 0.04) !important;
}

/* woo-variation-swatches marks the chosen item with a full-size green tick
   drawn on .variable-item-contents::before. Replaced with the small corner tick
   of the reference layout so the product photo stays readable. */
body.single-product.kf-configurator-page .kf-group--utforande .variable-item .variable-item-contents::before,
body.single-product.kf-configurator-page .kf-group--utforande .variable-item .variable-item-contents::after {
	content: none !important;
	background: none !important;
}

body.single-product.kf-configurator-page .kf-group--utforande .variable-item::before {
	content: none;
}

body.single-product.kf-configurator-page .kf-group--utforande .variable-item.selected::before,
body.single-product.kf-configurator-page .kf-group--utforande .variable-item[aria-checked="true"]::before {
	content: "" !important;
	position: absolute !important;
	display: block !important;
	visibility: visible !important;
	top: 6px;
	right: 6px;
	left: auto !important;
	bottom: auto !important;
	z-index: 5;
	width: 18px !important;
	min-width: 18px !important;
	max-width: 18px !important;
	height: 18px !important;
	min-height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50%;
	transform: none !important;
	opacity: 1 !important;
	background: var(--kf-gold)
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9' fill='none'%3E%3Cpath d='M1 4.6 4 7.6 10 1.4' stroke='%23132d45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / 11px 9px no-repeat;
}

/* woo-variation-swatches renders an image item as .variable-item-contents > img
   with the readable name only in data-title, so the caption is drawn from that
   attribute instead of injecting a node the plugin would overwrite on change.
   The plugin owns the same ::after for its hover tooltip and keeps it
   visibility:hidden until hover, so visibility has to be forced here too or the
   name only appears on mouse-over — and never on touch. */
body.single-product.kf-configurator-page .kf-group--utforande .variable-item::after,
body.single-product.kf-configurator-page .kf-group--utforande .variable-item:hover::after,
body.single-product.kf-configurator-page .kf-group--utforande .variable-item.selected::after {
	content: attr(data-title) !important;
	position: static !important;
	display: block !important;
	visibility: visible !important;
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 9px 8px 11px !important;
	border: 0 !important;
	border-top: 1px solid var(--kf-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: none !important;
	opacity: 1 !important;
	transform: none !important;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--kf-navy);
	text-align: center;
	text-transform: none;
	white-space: normal !important;
	pointer-events: none;
}

body.single-product.kf-configurator-page .kf-group--utforande .variable-item.selected::after,
body.single-product.kf-configurator-page .kf-group--utforande .variable-item[aria-checked="true"]::after {
	font-weight: 700;
	border-top-color: rgba(19, 45, 69, 0.35) !important;
}

body.single-product.kf-configurator-page .kf-group--utforande .variable-item .variable-item-contents {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

body.single-product.kf-configurator-page .kf-group--utforande .variable-item img {
	display: block;
	width: 100% !important;
	aspect-ratio: 1 / 1;
	height: auto !important;
	max-width: 100% !important;
	object-fit: contain;
	object-position: center;
	margin: 0 !important;
	padding: 8px !important;
	border-radius: 0 !important;
	background: var(--kf-sand);
}

body.single-product.kf-configurator-page .kf-group--utforande .variable-item .variable-item-span {
	display: block !important;
	padding: 10px 10px 12px !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: var(--kf-navy) !important;
	text-align: center !important;
	background: transparent !important;
}

/* Caption is generated from data-title on image swatches; the plugin's own
   span would otherwise print the same words twice. */
body.single-product.kf-configurator-page .kf-group--utforande .image-variable-item .variable-item-span {
	display: none !important;
}

/* Button and colour swatches carry their own text, so no generated caption. */
body.single-product.kf-configurator-page .kf-group--utforande .button-variable-item::after,
body.single-product.kf-configurator-page .kf-group--utforande .color-variable-item::after {
	content: none;
}

body.single-product.kf-configurator-page .kf-group--utforande .reset_variations,
body.single-product.kf-configurator-page .reset_variations_alert {
	display: none !important;
}

/* Woodmart's raw select is the accessible fallback and stays available. */
body.single-product.kf-configurator-page .kf-group--utforande select.woo-variation-raw-select {
	display: none !important;
}

/* Sekel only: profile details sit in Utförande under glass and material.
   Same card language, no price, klassisk is the default. */
body.single-product.kf-configurator-page .kf-profil {
	margin: 22px 0 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

body.single-product.kf-configurator-page .kf-profil-label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kf-navy);
}

body.single-product.kf-configurator-page .kf-profil-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

body.single-product.kf-configurator-page .kf-profil-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--kf-white);
	border: 1px solid var(--kf-line);
	border-radius: var(--kf-radius);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.single-product.kf-configurator-page .kf-profil-card:hover {
	border-color: rgba(19, 45, 69, 0.45);
}

body.single-product.kf-configurator-page .kf-profil-card:has(input:checked),
body.single-product.kf-configurator-page .kf-profil-card.is-selected {
	border-color: var(--kf-navy);
	box-shadow: 0 0 0 1px var(--kf-navy);
	background: rgba(19, 45, 69, 0.04);
}

/* Same corner tick as the variation swatches above, so both kinds of choice in
   Utförande read as one set of cards. */
body.single-product.kf-configurator-page .kf-profil-card:has(input:checked)::before,
body.single-product.kf-configurator-page .kf-profil-card.is-selected::before {
	content: "";
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 5;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--kf-gold)
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9' fill='none'%3E%3Cpath d='M1 4.6 4 7.6 10 1.4' stroke='%23132d45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / 11px 9px no-repeat;
}

body.single-product.kf-configurator-page .kf-profil-card input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

body.single-product.kf-configurator-page .kf-profil-card img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--kf-sand);
}

body.single-product.kf-configurator-page .kf-profil-name {
	display: block;
	padding: 9px 8px 11px;
	border-top: 1px solid var(--kf-line);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--kf-navy);
	text-align: center;
}

body.single-product.kf-configurator-page .kf-profil-card:has(input:checked) .kf-profil-name,
body.single-product.kf-configurator-page .kf-profil-card.is-selected .kf-profil-name {
	font-weight: 700;
	border-top-color: rgba(19, 45, 69, 0.35);
}

body.single-product.kf-configurator-page .woocommerce-variation-description,
body.single-product.kf-configurator-page .woocommerce-variation-availability {
	margin: 8px 0 0 !important;
	font-size: 12px !important;
	color: var(--kf-muted) !important;
}

body.single-product.kf-configurator-page .woocommerce-variation-price {
	display: none !important;
}

/* ==========================================================================
   Purchase card
   ========================================================================== */

body.single-product.kf-configurator-page .kf-buy {
	margin: 4px 0 0 !important;
	padding: 16px !important;
	background: var(--kf-navy) !important;
	border: 1px solid var(--kf-navy) !important;
	border-radius: var(--kf-radius) !important;
	min-width: 0;
}

@media (min-width: 992px) {
	body.single-product.kf-configurator-page .kf-buy {
		padding: 20px !important;
	}
}

body.single-product.kf-configurator-page .kf-buy-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: rgba(246, 249, 251, 0.7) !important;
}

body.single-product.kf-configurator-page .kf-buy-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 8px;
	border-left: 2px solid var(--kf-gold);
	border-bottom: 2px solid var(--kf-gold);
	transform: rotate(-45deg) translateY(-2px);
}

body.single-product.kf-configurator-page .kf-purchase-summary {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13.5px;
}

body.single-product.kf-configurator-page .kf-purchase-summary > div {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	border-top: 1px solid rgba(246, 249, 251, 0.15);
	min-width: 0;
}

body.single-product.kf-configurator-page .kf-purchase-summary > div:first-child {
	border-top: 0;
}

body.single-product.kf-configurator-page .kf-purchase-summary dt {
	flex: 0 0 auto;
	margin: 0 !important;
	font-weight: 400 !important;
	color: rgba(246, 249, 251, 0.6) !important;
}

body.single-product.kf-configurator-page .kf-purchase-summary dd {
	min-width: 0;
	margin: 0 !important;
	text-align: right;
	font-weight: 600 !important;
	color: var(--kf-navy-fg) !important;
}

body.single-product.kf-configurator-page .kf-buy-total {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 4px 12px;
	margin-top: 16px;
	padding: 16px;
	background: var(--kf-white);
	border-radius: var(--kf-radius);
}

body.single-product.kf-configurator-page .kf-buy-total-label {
	grid-column: 1;
	font-size: 12px;
	font-weight: 500;
	color: var(--kf-muted);
}

/* The price block was styled as a navy pill for its old home in the dark
   sidebar; on the white total panel that hid the amount completely. */
body.single-product.kf-configurator-page .kf-buy-total .wd-single-price {
	grid-column: 2;
	justify-self: end;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-align: right !important;
}

body.single-product.kf-configurator-page .kf-buy-total .kf-cta-block {
	grid-column: 1 / -1;
}

body.single-product.kf-configurator-page .kf-buy-total .price,
body.single-product.kf-configurator-page .kf-buy-total .price .amount,
body.single-product.kf-configurator-page .kf-buy-total .price bdi {
	margin: 0 !important;
	font-family: var(--kf-display) !important;
	font-size: 30px !important;
	font-weight: 600 !important;
	line-height: 1.05 !important;
	color: var(--kf-navy) !important;
}

body.single-product.kf-configurator-page .kf-buy-total .price del,
body.single-product.kf-configurator-page .kf-buy-total .price .pewc-label-before {
	display: none !important;
}

/* ── Quantity and add to cart ──
   .kf-sticky-cta is the shop's existing proxy: its handlers are delegated on
   document and it buys by clicking the real WooCommerce button, so it can be
   moved into this card without rewiring anything. */

body.single-product.kf-configurator-page .kf-cta-block {
	margin: 14px 0 0 !important;
	padding: 0 !important;
}

body.single-product.kf-configurator-page .kf-sticky-cta {
	display: block;
}

body.single-product.kf-configurator-page .kf-cta-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

body.single-product.kf-configurator-page .kf-cta-top::before {
	content: "Antal";
	font-size: 12px;
	font-weight: 500;
	color: var(--kf-muted);
}

body.single-product.kf-configurator-page .kf-qty-pill {
	display: flex !important;
	align-items: stretch !important;
	margin: 0 !important;
	width: auto !important;
	border: 1px solid var(--kf-line);
	border-radius: var(--kf-radius);
	overflow: hidden;
	background: var(--kf-white);
}

body.single-product.kf-configurator-page .kf-qty-btn {
	width: 40px;
	min-height: 42px;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--kf-navy) !important;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

body.single-product.kf-configurator-page .kf-qty-btn:hover {
	background: var(--kf-sand) !important;
}

body.single-product.kf-configurator-page .kf-qty-input {
	width: 46px !important;
	min-height: 42px !important;
	padding: 0 !important;
	border: 0 !important;
	border-left: 1px solid var(--kf-line) !important;
	border-right: 1px solid var(--kf-line) !important;
	border-radius: 0 !important;
	text-align: center;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--kf-navy) !important;
	background: var(--kf-white) !important;
	appearance: textfield;
}

body.single-product.kf-configurator-page .kf-qty-input::-webkit-inner-spin-button,
body.single-product.kf-configurator-page .kf-qty-input::-webkit-outer-spin-button {
	appearance: none;
	margin: 0;
}

body.single-product.kf-configurator-page .kf-cta-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100% !important;
	min-height: 50px !important;
	margin: 0 !important;
	padding: 12px 20px !important;
	background: var(--kf-gold) !important;
	color: var(--kf-navy) !important;
	border: 0 !important;
	border-radius: var(--kf-radius) !important;
	font-family: var(--kf-body) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

body.single-product.kf-configurator-page .kf-cta-btn:hover,
body.single-product.kf-configurator-page .kf-cta-btn:focus-visible {
	background: #e3c115 !important;
	color: var(--kf-navy) !important;
}

body.single-product.kf-configurator-page .kf-cta-btn i {
	margin: 0 !important;
	border-radius: 0 !important;
	font-size: 14px;
}

body.single-product.kf-configurator-page .kf-cta-note {
	margin: 10px 0 0 !important;
	font-size: 11.5px !important;
	line-height: 1.5;
	color: var(--kf-muted) !important;
	text-align: center;
}

body.single-product.kf-configurator-page .kf-buy-foot {
	margin: 10px 0 0 !important;
	font-size: 11.5px !important;
	line-height: 1.5;
	color: rgba(246, 249, 251, 0.7) !important;
	text-align: center;
}

/* ── One total, one add-to-cart ── */

/* PEWC prints its own grand-total bar at the end of the form, repeating the
   purchase card. It stays in the DOM because PEWC keeps writing the live total
   into #pewc-grand-total and other scripts read it; only the duplicate is hidden. */
body.single-product.kf-configurator-page p.pewc-total-only {
	display: none !important;
}

body.single-product.kf-configurator-page .woocommerce-variation-add-to-cart > .quantity,
body.single-product.kf-configurator-page .woocommerce-variation-add-to-cart > .wd-quantity {
	display: none !important;
}

/* Taken out of the layout but left rendered: both purchase controls buy by
   triggering a click on this button, and display:none would drop it out of the
   :visible set some of those handlers check. */
body.single-product.kf-configurator-page .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
	clip-path: inset(50%) !important;
}

/* ── Help box ── */

body.single-product.kf-configurator-page .kf-help-box {
	margin: 0 !important;
	padding: 14px 16px;
	background: var(--kf-sand);
	border: 1px solid var(--kf-line);
	border-radius: var(--kf-radius);
}

body.single-product.kf-configurator-page .kf-help-title {
	margin: 0 !important;
	font-family: var(--kf-display);
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--kf-navy) !important;
}

body.single-product.kf-configurator-page .kf-help-text {
	margin: 4px 0 8px !important;
	font-size: 12.5px !important;
	color: var(--kf-muted) !important;
}

body.single-product.kf-configurator-page .kf-help-link {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--kf-navy) !important;
	border-bottom: 2px solid var(--kf-gold);
	text-decoration: none !important;
}

/* ==========================================================================
   Mobile purchase bar
   ========================================================================== */

body.single-product.kf-configurator-page .ax-mobile-cta {
	display: none;
}

@media (max-width: 991px) {
	html body.single-product.kf-configurator-page .ax-mobile-cta {
		display: block !important;
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 100% !important;
		z-index: 998 !important;
		padding: 10px 14px !important;
		background: var(--kf-white) !important;
		border-top: 1px solid var(--kf-line) !important;
		box-shadow: 0 -6px 18px rgba(19, 45, 69, 0.12) !important;
	}

	html body.single-product.kf-configurator-page .ax-cta-container {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		max-width: 720px;
		margin: 0 auto;
		min-width: 0;
	}

	/* Keep the full price visible in the mobile bar. */
	html body.single-product.kf-configurator-page .ax-cta-info {
		flex: 0 0 auto !important;
		min-width: 0 !important;
		max-width: none !important;
		overflow: visible !important;
		white-space: nowrap;
	}

	html body.single-product.kf-configurator-page .ax-cta-actions {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 0 0 auto;
	}

	html body.single-product.kf-configurator-page .ax-qty-group {
		display: flex !important;
		align-items: stretch;
		border: 1px solid var(--kf-line) !important;
		border-radius: var(--kf-radius) !important;
		overflow: hidden;
	}

	html body.single-product.kf-configurator-page .ax-qty-group button {
		width: 34px;
		min-height: 44px;
		padding: 0 !important;
		border: 0 !important;
		background: var(--kf-white) !important;
		color: var(--kf-navy) !important;
		font-size: 15px;
	}

	html body.single-product.kf-configurator-page #ax-qty-mobile {
		width: 36px !important;
		min-height: 44px !important;
		padding: 0 !important;
		border: 0 !important;
		border-inline: 1px solid var(--kf-line) !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 13px !important;
		font-weight: 700 !important;
		color: var(--kf-navy) !important;
		background: var(--kf-white) !important;
	}

	html body.single-product.kf-configurator-page #ax-mobile-price,
	html body.single-product.kf-configurator-page #ax-mobile-price .amount,
	html body.single-product.kf-configurator-page #ax-mobile-price bdi,
	html body.single-product.kf-configurator-page .kf-mobile-cta-price,
	html body.single-product.kf-configurator-page .kf-mobile-cta-price .amount,
	html body.single-product.kf-configurator-page .kf-mobile-cta-price bdi {
		font-family: var(--kf-display) !important;
		font-size: 17px !important;
		font-weight: 600 !important;
		line-height: 1.1 !important;
		color: var(--kf-navy) !important;
		white-space: nowrap !important;
		overflow: visible !important;
		text-overflow: clip !important;
		max-width: none !important;
	}

	/* The bar ships its own inline <style> sizing this as a 50×50 icon square.
	   It carries words now, so the box has to grow with them. */
	html body.single-product.kf-configurator-page #ax-btn-submit-mobile {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: auto !important;
		height: auto !important;
		min-height: 46px !important;
		padding: 0 18px !important;
		text-transform: none !important;
		background: var(--kf-gold) !important;
		color: var(--kf-navy) !important;
		border: 0 !important;
		border-radius: var(--kf-radius) !important;
		font-size: 13px !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;
		white-space: nowrap;
	}

	/* The bar's Font Awesome glyph never loads on this page; the word does the
	   work instead. */
	html body.single-product.kf-configurator-page #ax-btn-submit-mobile i {
		display: none !important;
	}

	html body.single-product.kf-configurator-page .kf-cta-label {
		display: inline-block;
	}

	/* Room for the bar so it never covers the last option row. */
	body.single-product.kf-configurator-page .kf-row-related,
	body.single-product.kf-configurator-page .kf-row-why,
	body.single-product.kf-configurator-page .kf-config-row {
		padding-bottom: 72px;
	}

	body.single-product.kf-configurator-page .woocommerce-breadcrumb,
	body.single-product.kf-configurator-page .wd-breadcrumbs,
	body.single-product.kf-configurator-page .yoast-breadcrumb,
	body.single-product.kf-configurator-page .sp-breadcrumb {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 12px;
	}

	body.single-product.kf-configurator-page .pewc-radio-images-wrapper,
	body.single-product.kf-configurator-page .pewc-checkboxes-images-wrapper,
	body.single-product.kf-configurator-page .child-product-wrapper {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: 8px !important;
	}
}

/* Two option photos per row were 142 px squares on a 390 px phone, so a single
   group of glass types or colours filled the screen. Three per row, and the
   photo keeps its square crop but not more height than it needs.
   !important is needed here: style.css pins these grids to two columns below
   600 px, also with !important. */
@media (max-width: 575px) {
	body.single-product.kf-configurator-page .pewc-radio-images-wrapper,
	body.single-product.kf-configurator-page .pewc-checkboxes-images-wrapper,
	body.single-product.kf-configurator-page .child-product-wrapper {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 6px !important;
	}

	body.single-product.kf-configurator-page .pewc-radio-image-wrapper,
	body.single-product.kf-configurator-page .pewc-checkbox-image-wrapper {
		padding: 5px !important;
		border-radius: 9px !important;
	}

	body.single-product.kf-configurator-page .pewc-radio-image-desc,
	body.single-product.kf-configurator-page .pewc-checkbox-image-desc {
		font-size: 11px !important;
		line-height: 1.25 !important;
	}

	body.single-product.kf-configurator-page .pewc-radio-image-price,
	body.single-product.kf-configurator-page .pewc-checkbox-image-price {
		font-size: 11px !important;
	}
}

/* Price, quantity stepper and a worded button do not all fit on the narrowest
   phones at full size, so the button and stepper give up their padding first. */
@media (max-width: 389px) {
	html body.single-product.kf-configurator-page #ax-btn-submit-mobile {
		padding: 0 12px !important;
		font-size: 12px !important;
	}

	html body.single-product.kf-configurator-page .ax-qty-group button {
		width: 30px;
	}

	html body.single-product.kf-configurator-page #ax-qty-mobile {
		width: 30px !important;
	}
}

@media (max-width: 991px) {
	/* Phone: drawing stays in view while options scroll. */
	html body.single-product.kf-configurator-page .kf-config-row {
		display: flex !important;
		flex-direction: column;
	}

	html body.single-product.kf-configurator-page .kf-config-row .kf-side,
	html body.single-product.kf-configurator-page .kf-config-row .kf-side.vc_hidden-md,
	html body.single-product.kf-configurator-page .kf-config-row .kf-side.vc_hidden-sm,
	html body.single-product.kf-configurator-page .kf-config-row .kf-side.vc_hidden-xs,
	html body.single-product.kf-configurator-page .kf-config-row .kf-side > .vc_column-inner,
	html body.single-product.kf-configurator-page .kf-config-row .kf-side > .vc_column-inner > .wpb_wrapper {
		display: contents !important;
	}

	/* A spacer between the drawing and the photos has no job as a row item. */
	body.single-product.kf-configurator-page .kf-config-row .kf-side .vc_empty_space {
		display: none !important;
	}

	body.single-product.kf-configurator-page .kf-config-row > .kf-head {
		order: 0;
	}

	/* 58 px of sticky Woodmart header, plus a little air. */
	body.single-product.kf-configurator-page .kf-visual-panel--drawing {
		position: sticky;
		top: 62px;
		z-index: 4;
		padding: 10px 12px 12px;
		box-shadow: 0 6px 18px rgba(22, 58, 85, 0.1);
	}

	body.single-product.kf-configurator-page .kf-visual-panel--drawing .kf-panel-head {
		margin-bottom: 6px;
	}

	/* Compact enough that a pinned drawing leaves room for two option rows. */
	body.single-product.kf-configurator-page #drawBoard {
		height: clamp(150px, 30vh, 230px) !important;
		min-height: 150px;
	}
}

@media (max-width: 575px) {
	body.single-product.kf-configurator-page .kf-head-aside {
		text-align: left;
	}
}

/* ==========================================================================
   Around the product — breadcrumbs and the promise strip
   ========================================================================== */

body.single-product.kf-configurator-page .kf-row-trustbar {
	margin-bottom: 18px !important;
}

body.single-product.kf-configurator-page .kf-product-trust-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	padding: 10px 0;
	border-bottom: 1px solid var(--kf-line);
	font-size: 12.5px;
	color: var(--kf-muted);
}

body.single-product.kf-configurator-page .kf-pt-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

body.single-product.kf-configurator-page .kf-pt-icon svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--kf-navy-soft);
	stroke-width: 1.7;
}

body.single-product.kf-configurator-page .kf-pt-text {
	font-weight: 600;
	color: var(--kf-navy);
}

/* ==========================================================================
   Lower page
   ========================================================================== */

/* The sticky drawing column is above the page in z-order, so the sections after
   the product row state their own layer: anything that ever reaches past the
   row paints behind the text rather than over it. */
body.single-product.kf-configurator-page .kf-row-specs,
body.single-product.kf-configurator-page .kf-row-reviews,
body.single-product.kf-configurator-page .kf-row-series,
body.single-product.kf-configurator-page .kf-row-why,
body.single-product.kf-configurator-page .kf-row-related {
	position: relative;
	z-index: 4;
	max-width: 1400px;
	margin-inline: auto !important;
	margin-bottom: 48px !important;
}

/* The gallery source column and the story row are emptied by the assembly; the
   attribute table itself is only moved, never hidden, because
   product-configurator.js reads "Typ av produkt" out of it. */
body.single-product.kf-configurator-page .kf-gallery-source,
body.single-product.kf-configurator-page .kf-row-story--empty,
body.single-product.kf-configurator-page .kf-deck-dupe {
	display: none !important;
}

/* Left behind when the information deck adopts the Leveranstider box. */
body.single-product.kf-configurator-page .kf-row-emptied {
	display: none !important;
}

/* ── Information deck ── */

body.single-product.kf-configurator-page .kf-deck {
	background: var(--kf-white);
	border: 1px solid var(--kf-line);
	border-radius: var(--kf-radius);
	overflow: hidden;
}

body.single-product.kf-configurator-page .kf-deck-head {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 1px solid var(--kf-line);
}

body.single-product.kf-configurator-page .kf-deck-title {
	display: none !important;
}

body.single-product.kf-configurator-page .kf-deck-nav {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-width: 0;
}

body.single-product.kf-configurator-page .kf-deck-tabs {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

body.single-product.kf-configurator-page .kf-deck-tabs::-webkit-scrollbar {
	display: none;
}

body.single-product.kf-configurator-page .kf-deck-tab {
	flex: 0 0 auto;
	padding: 14px 18px !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	white-space: nowrap;
	color: var(--kf-muted) !important;
	cursor: pointer;
}

body.single-product.kf-configurator-page .kf-deck-tab:hover {
	color: var(--kf-navy) !important;
}

body.single-product.kf-configurator-page .kf-deck-tab.is-active {
	color: var(--kf-navy) !important;
	border-bottom-color: var(--kf-gold) !important;
}

body.single-product.kf-configurator-page .kf-deck-arrow {
	flex: 0 0 auto;
	width: 42px;
	background: transparent !important;
	border: 0 !important;
	border-left: 1px solid var(--kf-line) !important;
	border-radius: 0 !important;
	color: var(--kf-navy) !important;
	font-size: 18px;
	cursor: pointer;
}

body.single-product.kf-configurator-page .kf-deck.at-start .kf-deck-arrow[data-dir="-1"],
body.single-product.kf-configurator-page .kf-deck.at-end .kf-deck-arrow[data-dir="1"] {
	opacity: 0.3;
	pointer-events: none;
}

body.single-product.kf-configurator-page .kf-deck-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

body.single-product.kf-configurator-page .kf-deck-track::-webkit-scrollbar {
	display: none;
}

body.single-product.kf-configurator-page .kf-deck-pane {
	flex: 0 0 100%;
	min-width: 100%;
	scroll-snap-align: start;
	padding: 20px;
}

@media (min-width: 768px) {
	body.single-product.kf-configurator-page .kf-deck-pane {
		padding: 28px;
	}
}

body.single-product.kf-configurator-page .kf-deck-pane h2,
body.single-product.kf-configurator-page .kf-deck-pane h3 {
	font-family: var(--kf-display) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	color: var(--kf-navy) !important;
	margin: 0 0 10px !important;
	text-transform: none !important;
}

body.single-product.kf-configurator-page .kf-deck-pane p,
body.single-product.kf-configurator-page .kf-deck-pane li {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--kf-ink);
}

/* "Om produkten": copy on the left, Leveranstider as a tinted aside. */
body.single-product.kf-configurator-page .kf-deck-split {
	display: grid;
	gap: 24px;
}

@media (min-width: 992px) {
	body.single-product.kf-configurator-page .kf-deck-split {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}
}

body.single-product.kf-configurator-page .kf-deck-copy,
body.single-product.kf-configurator-page .kf-deck-aside {
	min-width: 0;
}

body.single-product.kf-configurator-page .kf-delivery-info {
	margin: 0 !important;
	padding: 20px !important;
	background: var(--kf-sand) !important;
	border: 0 !important;
	border-radius: var(--kf-radius) !important;
}

body.single-product.kf-configurator-page .kf-delivery-info strong {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--kf-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--kf-navy);
}

body.single-product.kf-configurator-page .kf-delivery-info ul {
	margin: 12px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

body.single-product.kf-configurator-page .kf-delivery-info li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0 !important;
	border-bottom: 1px solid var(--kf-line);
	font-size: 13.5px !important;
	color: var(--kf-ink);
	list-style: none !important;
}

body.single-product.kf-configurator-page .kf-delivery-info li:last-child {
	border-bottom: 0;
}

body.single-product.kf-configurator-page .kf-delivery-info li b {
	font-weight: 500;
	color: var(--kf-muted);
}

body.single-product.kf-configurator-page .kf-delivery-info p {
	margin: 12px 0 0 !important;
	font-size: 11.5px !important;
	line-height: 1.5;
	color: var(--kf-muted) !important;
}

/* ── Specifications ──
   Same 20 rows as live. Two columns on a wide screen, full height — no clip. */

body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes,
body.single-product.kf-configurator-page .kf-deck-pane .woocommerce-product-attributes {
	display: block;
	width: 100%;
	margin: 0 !important;
	border: 1px solid var(--kf-line);
	border-radius: var(--kf-radius);
	overflow: hidden;
	background: #fff;
}

body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes tbody {
	--wd-attr-col: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0 !important;
	gap: 0 !important;
}

body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes tr {
	align-items: baseline !important;
	justify-content: flex-start !important;
	gap: 0 12px !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--kf-line);
	background: #fff;
}

body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes tr:nth-child(even) {
	background: #fafcfd;
}

body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes th,
body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes td {
	overflow-wrap: break-word;
	padding: 10px 14px !important;
	border: 0 !important;
	background: transparent !important;
	font-size: 13.5px !important;
	line-height: 1.5;
	vertical-align: top;
	text-align: left !important;
}

body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes th {
	flex: 0 0 42% !important;
	min-width: 0;
	font-weight: 500 !important;
	color: var(--kf-muted) !important;
	text-transform: none !important;
	font-style: normal !important;
}

body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes td {
	flex: 1 1 auto !important;
	min-width: 0;
	font-weight: 600 !important;
	color: var(--kf-navy) !important;
}

body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes td p {
	margin: 0 !important;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes .wd-attr-term {
	display: inline;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

@media (min-width: 900px) {
	body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes tbody {
		--wd-attr-col: 2;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes tr:nth-child(odd) {
		border-right: 1px solid var(--kf-line);
	}

	body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes tr:nth-last-child(-n+2) {
		border-bottom: 0;
	}

	body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes tr:nth-child(even) {
		background: #fff;
	}

	body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes tr:nth-child(4n+3),
	body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes tr:nth-child(4n+4) {
		background: #fafcfd;
	}
}

@media (max-width: 575px) {
	body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes tr {
		display: block !important;
	}

	body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes th,
	body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes td {
		display: block;
		width: 100% !important;
		flex: none !important;
	}

	body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes th {
		padding-bottom: 0 !important;
	}

	body.single-product.kf-configurator-page .kf-deck-pane table.shop_attributes td {
		padding-top: 2px !important;
		padding-bottom: 12px !important;
	}

	body.single-product.kf-configurator-page .kf-head-identity,
	body.single-product.kf-configurator-page .kf-eyebrow {
		letter-spacing: 0.08em !important;
	}

	body.single-product.kf-configurator-page .kf-head {
		gap: 6px 16px;
	}
}

/* ==========================================================================
   Product rails — same series, and the same product in other series
   ========================================================================== */

body.single-product.kf-configurator-page .kf-rail-head {
	margin-bottom: 20px;
}

body.single-product.kf-configurator-page .kf-rail-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: var(--kf-navy-soft) !important;
}

body.single-product.kf-configurator-page .kf-rail-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--kf-gold);
}

body.single-product.kf-configurator-page .kf-rail-h {
	margin: 8px 0 0 !important;
	font-family: var(--kf-display) !important;
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem) !important;
	font-weight: 600 !important;
	color: var(--kf-navy) !important;
	text-transform: none !important;
	letter-spacing: -0.01em !important;
}

body.single-product.kf-configurator-page .kf-rail-sub {
	margin: 8px 0 0 !important;
	max-width: 62ch;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: var(--kf-muted) !important;
}

body.single-product.kf-configurator-page .kf-rail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 16px;
}

body.single-product.kf-configurator-page .kf-rail-card {
	display: flex;
	flex-direction: column;
	background: var(--kf-white);
	border: 1px solid var(--kf-line);
	border-radius: var(--kf-radius);
	overflow: hidden;
	text-decoration: none !important;
	transition: border-color 0.15s ease, transform 0.15s ease;
	min-width: 0;
}

body.single-product.kf-configurator-page .kf-rail-card:hover,
body.single-product.kf-configurator-page .kf-rail-card:focus-visible {
	border-color: var(--kf-navy);
	transform: translateY(-2px);
}

body.single-product.kf-configurator-page .kf-rail-media {
	display: block;
	background: var(--kf-sand);
}

body.single-product.kf-configurator-page .kf-rail-media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: contain;
	mix-blend-mode: normal;
}

body.single-product.kf-configurator-page .kf-rail-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px 14px;
	min-width: 0;
}

body.single-product.kf-configurator-page .kf-rail-title {
	margin: 0 !important;
	font-family: var(--kf-display) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--kf-navy) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.single-product.kf-configurator-page .kf-rail-badge {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kf-muted);
}

body.single-product.kf-configurator-page .kf-rail-price {
	margin-top: auto;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--kf-navy);
}

body.single-product.kf-configurator-page .kf-rail-price .amount,
body.single-product.kf-configurator-page .kf-rail-price bdi {
	color: inherit;
	font-size: inherit;
}

body.single-product.kf-configurator-page .kf-rail-from {
	font-weight: 500;
	color: var(--kf-muted);
}

body.single-product.kf-configurator-page .kf-rail-price del {
	display: none;
}

/* The shared layout's generic related-products element is emptied on
   configurator pages by kf-product-series.php; hide the leftover shell. */
body.single-product.kf-configurator-page .kf-row-related:not(:has(.product)) {
	display: none !important;
}

/* ==========================================================================
   Inspiration gallery and "Varför beställa"
   ========================================================================== */

body.single-product.kf-configurator-page .kf-inspo-title,
body.single-product.kf-configurator-page .kf-why-title {
	font-family: var(--kf-display) !important;
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem) !important;
	font-weight: 600 !important;
	color: var(--kf-navy) !important;
	text-transform: none !important;
}

body.single-product.kf-configurator-page .kf-inspo-sub,
body.single-product.kf-configurator-page .kf-why-sub {
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: var(--kf-muted) !important;
}

/* ── Fönsterguiden block ──
   The layout's raw-HTML block now holds four guide links instead of the old
   sales copy. Woodmart's own CSS still supplies .kf-why-grid and the text
   sizes; these rules only make the items read as cards you can click and
   close the gap the removed stats bar left behind. */
body.single-product.kf-configurator-page .kf-guide-wrap .kf-why-grid {
	margin-bottom: 0 !important;
}

body.single-product.kf-configurator-page a.kf-guide-item {
	align-items: flex-start;
	padding: 16px 18px;
	background: var(--kf-white);
	border: 1px solid var(--kf-line);
	border-radius: var(--kf-radius);
	text-decoration: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.single-product.kf-configurator-page a.kf-guide-item:hover {
	border-color: var(--kf-navy);
	box-shadow: 0 2px 10px rgba(19, 45, 69, 0.08);
}

body.single-product.kf-configurator-page a.kf-guide-item:hover strong {
	text-decoration: underline;
	text-underline-offset: 2px;
}