/* dtech-fibre-configurator v0.10.0 */

.dtech-fc {
	--fc-navy: #1B2630;
	--fc-teal: #175F6B;
	--fc-grad: linear-gradient(90deg, #0071E4 0%, #4B25E8 100%);
	--fc-border: #E6EAF0;
	--fc-bg: #F7F8FA;
	--fc-muted: #5A6773;
	--fc-radius: 12px;
	--fc-radius-sm: 10px;
	--dtech-fc-top: 0px;
	font-family: "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--fc-navy);
	-webkit-font-smoothing: antialiased;
}

.dtech-fc *,
.dtech-fc *::before,
.dtech-fc *::after { box-sizing: border-box; }

/* ------------------------------------------------------ split screen */
.dtech-fc__split {
	display: grid;
	grid-template-columns: 34fr 66fr;
	align-items: start;
	gap: 0;
}

.dtech-fc__panel {
	min-width: 0;
	padding: 40px 36px 40px 0;
}

.dtech-fc__stage {
	min-width: 0;
	position: sticky;
	top: var(--dtech-fc-top);
	height: calc(100vh - var(--dtech-fc-top));
}

/* ---------------------------------------------------------- mobile
   Top half of the screen is the model, bottom half is the accordion.
   The viewer sticks to the top and the price bar sticks to the bottom, so
   the options scroll in the band between them. */
@media (max-width: 900px) {
	.dtech-fc__split { grid-template-columns: minmax(0, 1fr); }

	.dtech-fc__stage {
		order: -1;
		position: sticky;
		top: var(--dtech-fc-top);
		z-index: 2;
		height: 50vh;
		height: 50dvh;              /* survives the URL bar showing and hiding */
		min-height: 240px;
		margin-bottom: 16px;
		background: #fff;
	}

	.dtech-fc__panel {
		padding: 0 0 8px;
		min-height: 45vh;           /* always something to scroll under the model */
	}

	.dtech-fc__head { margin-bottom: 18px; }
	.dtech-fc__title { font-size: 20px; }

	.dtech-fc__sec-head { padding: 16px 2px; gap: 11px; }
	.dtech-fc__sec-label { font-size: 14px; }
	.dtech-fc__sec-val { font-size: 13px; }

	/* no room to indent under the step number on a phone */
	.dtech-fc__opts,
	.dtech-fc__len { padding-left: 0; padding-bottom: 18px; }

	.dtech-fc__opt { padding: 10px 14px 10px 11px; }
	.dtech-fc__opt-lbl { font-size: 13.5px; }

	.dtech-fc__bar {
		position: sticky;
		bottom: 0;
		z-index: 3;
		margin-top: 14px;
		padding: 12px 2px calc(12px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 0.8px solid var(--fc-border);
	}
	.dtech-fc__price { font-size: 22px; }
	.dtech-fc__code { font-size: 11px; }

	.dtech-fc__tools { left: 12px; top: 12px; }
	.dtech-fc__vbtn { padding: 9px 12px; }
	.dtech-fc__hint { display: none; }
}

/* ------------------------------------------------------------ resets
   Hello and Elementor both style bare <button> elements, which turned the
   accordion headers and option pills into solid dark blocks on the live
   site. These override on visual properties only. */
.dtech-fc button {
	background: transparent !important;
	background-image: none !important;
	color: inherit !important;
	border-radius: 0;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-family: inherit !important;
	font-weight: 500;
	text-shadow: none !important;
	line-height: normal;
}
.dtech-fc button:hover,
.dtech-fc button:focus { background: transparent !important; color: inherit !important; }

.dtech-fc .dtech-fc__opt,
.dtech-fc .dtech-fc__vbtn,
.dtech-fc .dtech-fc__len-btn { background: #fff !important; border-radius: var(--fc-radius-sm) !important; }

.dtech-fc .dtech-fc__opt.is-selected { background: #fff !important; }
.dtech-fc .dtech-fc__vbtn.is-on { background: var(--fc-navy) !important; color: #fff !important; }

.dtech-fc .dtech-fc__add {
	background: var(--fc-navy) !important;
	color: #fff !important;
	border: 0;
	border-radius: var(--fc-radius-sm) !important;
	padding: 13px 26px;
	font: 600 14.5px/1 inherit !important;
	cursor: pointer;
}
.dtech-fc .dtech-fc__add:hover { filter: brightness(1.18); }
.dtech-fc .dtech-fc__add:disabled { opacity: .55; cursor: wait; }

/* ------------------------------------------------------------- head */
.dtech-fc__head { margin: 0 0 30px; }
.dtech-fc__title {
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.15;
	letter-spacing: -0.025em;
	font-weight: 600;
	margin: 0;
}
.dtech-fc__sub { margin: 8px 0 0; color: var(--fc-muted); font-size: 14px; line-height: 1.55; }

/* -------------------------------------------------------- accordion */
.dtech-fc__acc { border-top: 0.8px solid var(--fc-border); }

.dtech-fc__sec { border-bottom: 0.8px solid var(--fc-border); }

.dtech-fc__sec-head {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 20px 2px;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
}

.dtech-fc__sec-n {
	flex: 0 0 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--fc-border);
	background: #fff;
	color: var(--fc-muted);
	font-size: 11px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .18s, color .18s, border-color .18s;
}
.dtech-fc__sec.is-set .dtech-fc__sec-n {
	background: var(--fc-navy);
	border-color: var(--fc-navy);
	color: #fff;
}

.dtech-fc__sec-label {
	flex: 0 1 auto;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.dtech-fc__sec-val {
	flex: 1 1 auto;
	text-align: right;
	font-size: 14px;
	color: var(--fc-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: opacity .18s;
}
.dtech-fc__sec.is-open .dtech-fc__sec-val { opacity: 0; }

.dtech-fc__sec-chev {
	flex: 0 0 10px;
	height: 10px;
	margin-left: 4px;
	border-right: 1.6px solid var(--fc-muted);
	border-bottom: 1.6px solid var(--fc-muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .22s ease;
}
.dtech-fc__sec.is-open .dtech-fc__sec-chev {
	transform: rotate(225deg) translate(-2px, -2px);
}

.dtech-fc__sec-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .26s ease;
}
.dtech-fc__sec.is-open .dtech-fc__sec-body { grid-template-rows: 1fr; }

/* Grid items default to min-height:auto, which refuses to shrink below the
   content - without min-height:0 the row stays at content height and the
   options poke out of a collapsed section. */
.dtech-fc__sec-body > * {
	overflow: hidden;
	min-height: 0;
	min-width: 0;
}

/* Belt and braces for engines that will not size 0fr: nothing inside a
   collapsed section is focusable or visible. */
.dtech-fc__sec:not(.is-open) .dtech-fc__sec-body {
	visibility: hidden;
	pointer-events: none;
}
.dtech-fc__sec.is-open .dtech-fc__sec-body {
	visibility: visible;
	pointer-events: auto;
	transition: grid-template-rows .26s ease, visibility 0s;
}

/* ---------------------------------------------------------- options */
.dtech-fc__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 2px 0 22px 38px;
}

.dtech-fc__opt {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 16px 11px 13px;
	background: #fff;
	border: 0.8px solid var(--fc-border);
	border-radius: var(--fc-radius-sm);
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: border-color .16s, box-shadow .16s, background .16s;
}
.dtech-fc__opt:hover:not(.is-disabled) { border-color: var(--fc-navy); }

.dtech-fc__opt-dot {
	flex: 0 0 15px;
	height: 15px;
	border-radius: 50%;
	border: 1.6px solid #C6CDD6;
	background: #fff;
	position: relative;
	transition: border-color .16s;
}
.dtech-fc__opt.is-selected { border-color: var(--fc-navy); box-shadow: 0 0 0 1px var(--fc-navy); }
.dtech-fc__opt.is-selected .dtech-fc__opt-dot { border-color: var(--fc-navy); }
.dtech-fc__opt.is-selected .dtech-fc__opt-dot::after {
	content: "";
	position: absolute;
	inset: 2.6px;
	border-radius: 50%;
	background: var(--fc-navy);
}

.dtech-fc__opt-lbl { font-size: 14px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap; }

.dtech-fc__opt.is-disabled { opacity: .32; cursor: not-allowed; }

/* ----------------------------------------------------------- length */
.dtech-fc__len {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 2px 0 22px 38px;
}
.dtech-fc__len-btn {
	width: 40px;
	height: 44px;
	border: 0.8px solid var(--fc-border);
	border-radius: var(--fc-radius-sm);
	background: #fff;
	font: 400 18px/1 inherit;
	color: var(--fc-navy);
	cursor: pointer;
}
.dtech-fc__len-btn:hover { border-color: var(--fc-navy); }
.dtech-fc__len-btn:disabled { opacity: .3; cursor: not-allowed; }

.dtech-fc__len-field {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 0 14px;
	height: 44px;
	border: 0.8px solid var(--fc-border);
	border-radius: var(--fc-radius-sm);
	background: #fff;
}
.dtech-fc__len-field:focus-within { border-color: var(--fc-navy); box-shadow: 0 0 0 1px var(--fc-navy); }

.dtech-fc__len-in {
	width: 66px;
	border: 0;
	outline: none;
	background: none;
	font: 600 17px/44px inherit;
	letter-spacing: -0.02em;
	color: var(--fc-navy);
	text-align: right;
	-moz-appearance: textfield;
	appearance: textfield;
}
.dtech-fc__len-in::-webkit-outer-spin-button,
.dtech-fc__len-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.dtech-fc__len-unit { font-size: 14px; color: var(--fc-muted); line-height: 44px; }

.dtech-fc__len-range {
	flex: 1 1 100%;
	font-size: 11.5px;
	color: var(--fc-muted);
}

/* -------------------------------------------------------- price bar */
.dtech-fc__bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding: 26px 2px 0;
}
.dtech-fc__bar-left { min-width: 0; }
.dtech-fc__code {
	display: block;
	font: 600 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: .01em;
	color: var(--fc-navy);
	word-break: break-all;
}
.dtech-fc__note {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--fc-teal);
	min-height: 1em;
}
.dtech-fc__bar-right { text-align: right; flex: 0 0 auto; }
.dtech-fc__bar-left .dtech-fc__price { margin-bottom: 2px; }
.dtech-fc__price {
	display: block;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	white-space: nowrap;
}
.dtech-fc__vat { display: block; margin-top: 5px; font-size: 11px; color: var(--fc-muted); }

/* Held at reduced opacity while a fresh price is fetched, rather than being
   replaced by a placeholder - the number never jumps to a wrong value. */
.dtech-fc__price { transition: opacity .18s ease; }
.dtech-fc__price.is-loading { opacity: .38; }

/* ----------------------------------------------------------- viewer */
.dtech-fc__viewer {
	position: relative;
	height: 100%;
	background: radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, #F2F5F9 60%, #E9EDF3 100%);
	border-left: 0.8px solid var(--fc-border);
	overflow: hidden;
}
@media (max-width: 900px) {
	.dtech-fc__viewer {
		border-left: 0;
		border-radius: var(--fc-radius);
		border: 0.8px solid var(--fc-border);
	}
}

.dtech-fc__canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }

.dtech-fc__viewer.is-nogl::after {
	content: "3D preview needs WebGL";
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; color: var(--fc-muted); background: var(--fc-bg);
}

.dtech-fc__tools {
	position: absolute;
	left: 18px;
	top: 18px;
	display: flex;
	gap: 4px;
}
.dtech-fc__vbtn {
	font: 600 11px/1 inherit;
	padding: 8px 11px;
	border-radius: 8px;
	border: 0.8px solid var(--fc-border);
	background: rgba(255, 255, 255, .9);
	color: var(--fc-navy);
	cursor: pointer;
}
.dtech-fc__vbtn:hover { border-color: var(--fc-navy); }
.dtech-fc__vbtn.is-on { background: var(--fc-navy); color: #fff; border-color: var(--fc-navy); }

.dtech-fc__hint {
	position: absolute;
	left: 0; right: 0; bottom: 14px;
	text-align: center;
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #97A1AD;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.dtech-fc * { animation: none !important; transition: none !important; }
}


/* ==================================================================
   Overlay layout - the model fills the page and the options float on
   top as a narrow panel. Full bleed escapes the theme container with
   the classic 100vw trick, compensated for the scrollbar so it does
   not introduce a horizontal scroll of its own.
   ================================================================== */
.dtech-fc--overlay {
	position: relative;
	/* first-paint fallback only - JS measures and sets width/margin-left
	   inline, which avoids the scrollbar feedback loop under browser zoom */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	max-width: 100vw;
}

.dtech-fc--overlay .dtech-fc__split {
	display: block;
	position: relative;
	/* measured in JS; the dvh values are only a first paint fallback */
	height: calc(100vh - var(--dtech-fc-top));
	height: calc(100dvh - var(--dtech-fc-top));
	height: var(--dtech-fc-avail, 820px);
	min-height: 480px;
}

.dtech-fc--overlay .dtech-fc__stage {
	position: absolute;
	inset: 0;
	height: 100%;
	top: 0;
}
.dtech-fc--overlay .dtech-fc__viewer { border: 0; border-radius: 0; height: 100%; }

.dtech-fc--overlay .dtech-fc__panel {
	position: absolute;
	max-height: calc(100% - 44px);
	z-index: 3;
	top: 22px;
	left: 22px;
	bottom: 22px;
	width: 372px;
	max-width: calc(100% - 44px);
	padding: 22px 22px 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: saturate(1.6) blur(16px);
	backdrop-filter: saturate(1.6) blur(16px);
	border: 0.8px solid rgba(230, 234, 240, .9);
	border-radius: 14px;
	box-shadow: 0 10px 34px rgba(27, 38, 48, .10);
}

/* the accordion scrolls inside the panel, the bar stays pinned to it */
/* The pane is the flex child now, so it has to own the scrolling - the
   accordion inside it has no height of its own and could never scroll. */
.dtech-fc--overlay .dtech-fc__pane {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;   /* never chains to the page */
	scrollbar-width: thin;
	margin-right: -6px;
	padding-right: 6px;
}
.dtech-fc--overlay .dtech-fc__acc { flex: 0 0 auto; }
.dtech-fc--overlay .dtech-fc__bar {
	flex: 0 0 auto;
	position: sticky;
	bottom: 0;
	z-index: 2;
	position: static;
	margin: 0 -22px;
	padding: 14px 22px calc(16px + env(safe-area-inset-bottom));
	background: transparent;
	border-top: 0.8px solid var(--fc-border);
}

.dtech-fc--overlay .dtech-fc__head { margin-bottom: 18px; }
.dtech-fc--overlay .dtech-fc__title { font-size: 19px; }
.dtech-fc--overlay .dtech-fc__sub { display: none; }
.dtech-fc--overlay .dtech-fc__opts,
.dtech-fc--overlay .dtech-fc__len { padding-left: 0; }
.dtech-fc--overlay .dtech-fc__sec-head { padding: 15px 2px; }

/* tools sit clear of the panel */
.dtech-fc--overlay .dtech-fc__tools { left: auto; right: 22px; top: 22px; }

@media (max-width: 900px) {
	/* model on top, options as a sheet over the lower half */
	.dtech-fc--overlay .dtech-fc__split { height: calc(100dvh - var(--dtech-fc-top)); }
	.dtech-fc--overlay .dtech-fc__panel {
		top: auto;
		left: 10px;
		right: 10px;
		bottom: 10px;
		width: auto;
		max-width: none;
		max-height: 56%;
		padding: 16px 16px 0;
	}
	.dtech-fc--overlay .dtech-fc__bar { margin: 0 -16px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
	.dtech-fc--overlay .dtech-fc__tools { right: 12px; top: 12px; }
}


/* ==================================================================
   Overlay panel, compact.
   The wheel is zoom over the canvas, so the page cannot be scrolled to
   reach the rest of the panel - everything has to fit the viewport
   height. These trim the vertical rhythm without shrinking the hit
   areas below a comfortable tap target.
   ================================================================== */
.dtech-fc--overlay .dtech-fc__panel { padding: 16px 18px 0; }

.dtech-fc--overlay .dtech-fc__head { margin-bottom: 10px; }
.dtech-fc--overlay .dtech-fc__title { font-size: 16px; line-height: 1.25; }

.dtech-fc--overlay .dtech-fc__sec-head { padding: 10px 2px; gap: 10px; }
.dtech-fc--overlay .dtech-fc__sec-n { flex-basis: 21px; height: 21px; font-size: 10.5px; }
.dtech-fc--overlay .dtech-fc__sec-label { font-size: 13.5px; }
.dtech-fc--overlay .dtech-fc__sec-val { font-size: 12.5px; }
.dtech-fc--overlay .dtech-fc__sec-chev { flex-basis: 8px; height: 8px; }

.dtech-fc--overlay .dtech-fc__opts { gap: 6px; padding: 0 0 12px; }
.dtech-fc--overlay .dtech-fc__opt { padding: 8px 12px 8px 10px; gap: 7px; }
.dtech-fc--overlay .dtech-fc__opt-dot { flex-basis: 13px; height: 13px; }
.dtech-fc--overlay .dtech-fc__opt-lbl { font-size: 13px; }

.dtech-fc--overlay .dtech-fc__len { padding: 0 0 12px; gap: 8px; }
.dtech-fc--overlay .dtech-fc__len-btn { width: 34px; height: 38px; }
.dtech-fc--overlay .dtech-fc__len-field { height: 38px; padding: 0 11px; }
.dtech-fc--overlay .dtech-fc__len-in { width: 56px; font-size: 15px; line-height: 38px; }
.dtech-fc--overlay .dtech-fc__len-unit { line-height: 38px; font-size: 13px; }
.dtech-fc--overlay .dtech-fc__len-range { font-size: 11px; }

.dtech-fc--overlay .dtech-fc__bar {
	margin: 0 -18px;
	padding: 11px 18px calc(13px + env(safe-area-inset-bottom));
}
.dtech-fc--overlay .dtech-fc__price { font-size: 21px; }
.dtech-fc--overlay .dtech-fc__vat { margin-top: 3px; font-size: 10.5px; }
.dtech-fc--overlay .dtech-fc__note { margin-top: 4px; font-size: 11.5px; }
.dtech-fc--overlay .dtech-fc__add { padding: 11px 20px; font-size: 13.5px !important; }

/* Short screens: tighten again and let the accordion scroll internally
   rather than the panel growing past the viewport. */
@media (min-width: 901px) and (max-height: 820px) {
	.dtech-fc--overlay .dtech-fc__panel { top: 14px; bottom: 14px; padding: 13px 16px 0; }
	.dtech-fc--overlay .dtech-fc__head { margin-bottom: 8px; }
	.dtech-fc--overlay .dtech-fc__title { font-size: 15px; }
	.dtech-fc--overlay .dtech-fc__sec-head { padding: 8px 2px; }
	.dtech-fc--overlay .dtech-fc__opts { padding-bottom: 10px; }
	.dtech-fc--overlay .dtech-fc__bar { margin: 0 -16px; padding: 9px 16px 11px; }
	.dtech-fc--overlay .dtech-fc__price { font-size: 19px; }
}


/* ==================================================================
   Input resets.
   Hello and Elementor style bare inputs with their own border, height,
   padding and radius, which broke the length control out of its
   wrapper. Same approach as the button reset: visual properties only.
   ================================================================== */
.dtech-fc input[type="number"],
.dtech-fc input[type="text"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	border: 0 !important;
	outline: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	color: inherit !important;
	font-family: inherit !important;
	letter-spacing: -0.02em;
	text-align: right;
}
.dtech-fc input[type="number"]:focus,
.dtech-fc input[type="text"]:focus {
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}
.dtech-fc input[type="number"]::-webkit-outer-spin-button,
.dtech-fc input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* rebuild the control from the wrapper, which the theme cannot reach */
.dtech-fc .dtech-fc__len-field {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #fff !important;
	border: 0.8px solid var(--fc-border) !important;
	border-radius: var(--fc-radius-sm) !important;
	line-height: 1;
}
.dtech-fc .dtech-fc__len-in {
	width: 54px;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
}
.dtech-fc .dtech-fc__len-unit { line-height: 1; font-size: 13px; color: var(--fc-muted); }

.dtech-fc .dtech-fc__len { align-items: center; }
.dtech-fc .dtech-fc__len-range { margin-top: 8px; line-height: 1.4; }

.dtech-fc .dtech-fc__ref-in {
	border: 0.8px solid var(--fc-border) !important;
	background: #fff !important;
	border-radius: var(--fc-radius-sm) !important;
	padding: 10px 12px !important;
	text-align: left;
}


/* The hint centres across the canvas, but the panel covers the left of it -
   shift it into the clear area so it reads as centred under the model. */
.dtech-fc--overlay .dtech-fc__hint { left: var(--dtech-fc-inset, 0px); }


/* ================================================================== */
/* Custom connector map                                               */
/* ================================================================== */
/* [hidden] has to beat this, or the toggle shows on families that have no
   per-fibre map. A bare display:flex silently overrides the attribute. */
.dtech-fc__custom[hidden] { display: none !important; }

.dtech-fc__custom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 2px 0;
}
.dtech-fc__switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.dtech-fc__switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.dtech-fc__switch-track {
	width: 34px; height: 19px;
	border-radius: 999px;
	background: #D5DBE3;
	position: relative;
	transition: background .18s;
	flex: 0 0 34px;
}
.dtech-fc__switch-track::after {
	content: "";
	position: absolute;
	top: 2.5px; left: 2.5px;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #fff;
	transition: transform .18s;
}
.dtech-fc__switch input:checked + .dtech-fc__switch-track { background: var(--fc-navy); }
.dtech-fc__switch input:checked + .dtech-fc__switch-track::after { transform: translateX(15px); }
.dtech-fc__switch-lbl { font-size: 13px; font-weight: 500; }

.dtech-fc__custom-edit {
	font: 600 12px/1 inherit !important;
	color: var(--fc-teal) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	border: 0;
	padding: 4px 0;
}

/* ---------------------------------------------------------- modal */
.dtech-fc__modal {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(27, 38, 48, .34);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.dtech-fc__modal[hidden] { display: none; }

.dtech-fc__modal-card {
	display: flex;
	flex-direction: column;
	width: min(560px, 100%);
	max-height: 100%;
	background: #fff;
	border: 0.8px solid var(--fc-border);
	border-radius: 14px;
	box-shadow: 0 18px 48px rgba(27, 38, 48, .22);
	overflow: hidden;
}

.dtech-fc__modal-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 0.8px solid var(--fc-border);
}
.dtech-fc__modal-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.dtech-fc__modal-x { font-size: 20px !important; line-height: 1 !important; padding: 0 4px; cursor: pointer; border: 0; }

.dtech-fc__bulk {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	padding: 12px 18px;
	background: var(--fc-bg);
	border-bottom: 0.8px solid var(--fc-border);
	font-size: 12.5px;
	color: var(--fc-muted);
}
.dtech-fc__bulk label { display: inline-flex; align-items: center; gap: 6px; }
.dtech-fc__copy-ab {
	font: 600 12px/1 inherit !important;
	color: var(--fc-teal) !important;
	border: 0.8px solid var(--fc-border) !important;
	background: #fff !important;
	border-radius: 8px !important;
	padding: 7px 10px;
	cursor: pointer;
}

.dtech-fc__grid-head,
.dtech-fc__row {
	display: grid;
	grid-template-columns: 74px 1fr 1fr;
	gap: 10px;
	align-items: center;
	padding: 7px 18px;
}
.dtech-fc__grid-head {
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fc-muted);
	border-bottom: 0.8px solid var(--fc-border);
}
.dtech-fc__grid { overflow-y: auto; overscroll-behavior: contain; }
.dtech-fc__row + .dtech-fc__row { border-top: 0.8px solid #F1F3F6; }

.dtech-fc__fibre { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.dtech-fc__fibre i {
	width: 13px; height: 13px;
	border-radius: 3px;
	border: 0.8px solid rgba(27, 38, 48, .2);
	flex: 0 0 13px;
}

.dtech-fc .dtech-fc__row select,
.dtech-fc .dtech-fc__bulk select {
	width: 100%;
	font: 500 12.5px/1 inherit !important;
	color: var(--fc-navy) !important;
	background: #fff !important;
	border: 0.8px solid var(--fc-border) !important;
	border-radius: 8px !important;
	padding: 7px 8px !important;
	height: auto !important;
	appearance: auto;
	cursor: pointer;
}

.dtech-fc__modal-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
	border-top: 0.8px solid var(--fc-border);
}
.dtech-fc__types { font-size: 12.5px; color: var(--fc-muted); }
.dtech-fc__types b { color: var(--fc-navy); }
.dtech-fc__modal-done {
	background: var(--fc-navy) !important;
	color: #fff !important;
	border: 0;
	border-radius: var(--fc-radius-sm) !important;
	padding: 10px 20px;
	font: 600 13.5px/1 inherit !important;
	cursor: pointer;
}

@media (max-width: 900px) {
	.dtech-fc__modal { padding: 12px; }
	.dtech-fc__grid-head, .dtech-fc__row { grid-template-columns: 60px 1fr 1fr; padding: 7px 12px; gap: 7px; }
	.dtech-fc__bulk { padding: 10px 12px; }
}


/* ================================================================== */
/* Family tabs                                                        */
/* ================================================================== */
.dtech-fc__tabs {
	display: flex;
	gap: 4px;
	padding: 0 0 12px;
	border-bottom: 0.8px solid var(--fc-border);
	margin-bottom: 4px;
}
.dtech-fc .dtech-fc__tab {
	flex: 1 1 auto;
	padding: 9px 10px !important;
	border: 0.8px solid var(--fc-border) !important;
	border-radius: var(--fc-radius-sm) !important;
	background: #fff !important;
	color: var(--fc-muted) !important;
	font: 600 12.5px/1 inherit !important;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dtech-fc .dtech-fc__tab:hover { border-color: var(--fc-navy) !important; }
.dtech-fc .dtech-fc__tab.is-on {
	background: var(--fc-navy) !important;
	border-color: var(--fc-navy) !important;
	color: #fff !important;
}
.dtech-fc__pane[hidden] { display: none; }


/* Duplex / simplex switch, alongside the family tabs */
.dtech-fc__seg { display: flex; gap: 4px; padding: 10px 0 2px; }
.dtech-fc .dtech-fc__seg-btn {
	flex: 1 1 0;
	padding: 8px 10px !important;
	border: 0.8px solid var(--fc-border) !important;
	border-radius: var(--fc-radius-sm) !important;
	background: #fff !important;
	color: var(--fc-muted) !important;
	font: 600 12.5px/1 inherit !important;
	cursor: pointer;
}
.dtech-fc .dtech-fc__seg-btn.is-on {
	background: var(--fc-navy) !important;
	border-color: var(--fc-navy) !important;
	color: #fff !important;
}

/* The custom-connector toggle belongs to the assembly family only. It sits
   outside the panes, so the pane switch alone cannot hide it. */
.dtech-fc:not([data-active="assembly"]) .dtech-fc__custom { display: none !important; }

/* With a single product family the tab bar is just noise. */
.dtech-fc__tabs:has(.dtech-fc__tab:only-child) { display: none; }


/* Held state while the basket request is in flight. The label does not
   change, so the bar keeps its width and nothing jumps. */
.dtech-fc .dtech-fc__add[aria-busy="true"] { opacity: .6; cursor: wait; }

/* ==================================================================
   Added-to-basket confirmation
   ================================================================== */
.dtech-fc__added {
	position: absolute;
	inset: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(27, 38, 48, .28);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	animation: dtech-fc-fade .16s ease;
}
@keyframes dtech-fc-fade { from { opacity: 0; } to { opacity: 1; } }

.dtech-fc__added-card {
	width: min(340px, 100%);
	padding: 24px 22px 20px;
	text-align: center;
	background: #fff;
	border: 0.8px solid var(--fc-border);
	border-radius: 14px;
	box-shadow: 0 18px 48px rgba(27, 38, 48, .22);
	animation: dtech-fc-pop .18s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes dtech-fc-pop { from { transform: translateY(8px) scale(.97); } to { transform: none; } }

.dtech-fc__added-tick {
	width: 46px; height: 46px;
	margin: 0 auto 12px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: #E8F5EC;
	color: #1E7A3C;
}
.dtech-fc__added-card h4 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.dtech-fc__added-spec {
	margin: 0 0 16px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--fc-muted);
}
.dtech-fc__added-btns { display: flex; gap: 8px; }
.dtech-fc .dtech-fc__added-more,
.dtech-fc .dtech-fc__added-cart {
	flex: 1 1 0;
	padding: 10px 12px !important;
	border-radius: var(--fc-radius-sm) !important;
	font: 600 13px/1 inherit !important;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.dtech-fc .dtech-fc__added-more {
	border: 0.8px solid var(--fc-border) !important;
	background: #fff !important;
	color: var(--fc-navy) !important;
}
.dtech-fc .dtech-fc__added-cart {
	border: 0 !important;
	background: var(--fc-navy) !important;
	color: #fff !important;
	line-height: 1 !important;
	display: grid;
	place-items: center;
}

/* Edit map belongs to custom mode only. [hidden] has to win over the
   button reset, exactly as it does for the toggle row itself. */
.dtech-fc .dtech-fc__custom-edit[hidden] { display: none !important; }

/* ==================================================================
   Panel gutters
   The pane pulls its right edge out by 6px to sit the scrollbar in the
   padding, which left rows that live outside it - the custom toggle and
   the bottom bar - running to the very edge and clipping their labels.
   ================================================================== */
.dtech-fc--overlay .dtech-fc__custom {
	padding: 14px 2px 2px;
	gap: 14px;
	flex-wrap: wrap;
	row-gap: 6px;
}
.dtech-fc--overlay .dtech-fc__switch { flex: 1 1 auto; min-width: 0; }
.dtech-fc__switch-lbl {
	min-width: 0;
	overflow-wrap: anywhere;
	line-height: 1.3;
}
.dtech-fc--overlay .dtech-fc__custom-edit { flex: 0 0 auto; white-space: nowrap; }

/* Length stepper: give the row room so the field and the +/- keys are not
   pressed against the panel edge, and let the hint sit clear beneath. */
.dtech-fc--overlay .dtech-fc__len {
	padding: 2px 2px 14px;
	gap: 10px;
	flex-wrap: wrap;
}
.dtech-fc--overlay .dtech-fc__len-field { flex: 0 1 auto; min-width: 0; }
.dtech-fc--overlay .dtech-fc__len-range {
	flex: 1 0 100%;
	margin-top: 2px;
	padding-right: 2px;
}

/* Options never butt against the scroll edge */
.dtech-fc--overlay .dtech-fc__opts { padding-right: 2px; }
.dtech-fc--overlay .dtech-fc__sec-head { padding-right: 4px; }

/* Breathing room under the custom-connector row, so it is not pressed
   against the price bar below it. */
.dtech-fc--overlay .dtech-fc__custom { padding-bottom: 14px; }

/* Illustration disclaimer, sat under the drag hint so it reads as part of
   the same footer line rather than competing with the model. */
.dtech-fc__disclaimer {
	position: absolute;
	left: var(--dtech-fc-inset, 0px);
	right: 0;
	bottom: 8px;
	text-align: center;
	font-size: 10.5px;
	letter-spacing: .04em;
	color: var(--fc-muted);
	opacity: .75;
	pointer-events: none;
}
.dtech-fc__hint { bottom: 26px; }

@media (max-width: 900px) {
	.dtech-fc__disclaimer { font-size: 10px; bottom: 6px; }
	.dtech-fc__hint { bottom: 22px; }
}

/* Connector A and B while the per-fibre map is in charge */
.dtech-fc__sec.is-locked .dtech-fc__sec-val { opacity: .5; }
.dtech-fc__sec.is-locked .dtech-fc__opt {
	opacity: .45;
	pointer-events: none;
	cursor: default;
}
.dtech-fc__lock-note {
	flex: 1 0 100%;
	margin: 2px 0 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--fc-muted);
	font-style: italic;
}

/* Out of stock reads the same as any other unavailable option - greyed and
   unclickable - but carries its own hook in case it ever needs distinguishing
   at a glance. */
.dtech-fc__opt.is-oos { opacity: .4; }

/* ==================================================================
   Boot state
   The page is cached, so the shell arrives instantly and the live
   pricing, stock and availability follow over AJAX. This covers that
   gap rather than showing prices that are about to change.
   ================================================================== */
.dtech-fc__loading {
	position: absolute;
	inset: 0;
	z-index: 12;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 12.5px;
	color: var(--fc-muted);
	background: linear-gradient(180deg, #FBFCFD 0%, #EFF2F6 100%);
}
.dtech-fc.is-booting .dtech-fc__loading { display: flex; }

.dtech-fc__spinner {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid var(--fc-border);
	border-top-color: var(--fc-navy);
	animation: dtech-fc-spin .8s linear infinite;
}
@keyframes dtech-fc-spin { to { transform: rotate(360deg); } }

/* Hold the price and the basket until the real figures land, so a cached
   shell never shows a number that is about to change under the customer. */
.dtech-fc.is-booting .dtech-fc__price { opacity: .25; }
.dtech-fc.is-booting .dtech-fc__add { opacity: .55; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.dtech-fc__spinner { animation-duration: 2.4s; }
}

/* ==================================================================
   Lead time - a quiet line above the price bar
   ================================================================== */
.dtech-fc .dtech-fc__lead {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 12px 2px 12px !important;
	border-top: 0.8px solid var(--fc-border);
	font-size: 12px;
	line-height: 1.4;
	color: var(--fc-muted);
}

/* The toggle now sits inside the scrolling pane, under the last step, so it
   scrolls with the options instead of being pinned above the price. */
.dtech-fc--overlay .dtech-fc__pane .dtech-fc__custom {
	padding: 16px 2px 14px;
	border-top: 0;
}
}
}