/*!
 * Niagara Kit Market & Pricing Gate
 * Styles are scoped to .nkg-* classes and inherit the existing calculator
 * design tokens (--ospe-*), so nothing about the current page design changes.
 */

.ospe-page .nkg-market,
.ospe-page .nkg-gate,
.ospe-page .nkg-estimate-note,
.ospe-page .nkg-final {
	font-family: Poppins, Arial, sans-serif;
	box-sizing: border-box;
}

.ospe-page .nkg-market *,
.ospe-page .nkg-gate *,
.ospe-page .nkg-estimate-note *,
.ospe-page .nkg-final * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Market selector                                                     */
/* ------------------------------------------------------------------ */

.ospe-page .nkg-market {
	display: grid;
	gap: 0.45rem;
	margin: 0 0 1.15rem;
	padding: 0 0 1.05rem;
	border-bottom: 1px solid var(--ospe-border, #dfd9cd);
}

.ospe-page .nkg-market__label {
	color: var(--ospe-ink, #171714);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.055em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ospe-page .nkg-market__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

.ospe-page .nkg-market__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	min-height: 2.9rem;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--ospe-border, #dfd9cd);
	border-radius: 0;
	background: var(--ospe-paper, #fff);
	color: var(--ospe-ink, #171714);
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
}

.ospe-page .nkg-market__option small {
	color: var(--ospe-muted, #6d6a62);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* Country flags on the market buttons. */
.ospe-page .nkg-market__name {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.nkg-flag {
	display: inline-flex;
	flex: 0 0 auto;
	width: 1.5rem;
	line-height: 0;
}

.nkg-flag svg {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 0 0 1px rgba(23, 23, 20, 0.16);
}

/* Dropdown panel holding the human check and the form. */
.ospe-page .nkg-drop {
	display: grid;
	gap: 0.9rem;
}

.ospe-page .nkg-verify {
	border: 1px solid var(--ospe-border, #dfd9cd);
	background: #fbfaf6;
	padding: 0.85rem 0.95rem;
}

.ospe-page .nkg-verify.is-verified {
	border-color: var(--ospe-gold-dark, #a8802d);
	background: #fdf8ec;
}

.ospe-page .nkg-verify__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	cursor: pointer;
}

.ospe-page .nkg-verify__row input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.ospe-page .nkg-verify__box {
	position: relative;
	flex: 0 0 auto;
	width: 1.35rem;
	height: 1.35rem;
	border: 1.5px solid var(--ospe-ink, #171714);
	background: #fff;
}

.ospe-page .nkg-verify__row input[type="checkbox"]:checked + .nkg-verify__box::after {
	content: "";
	position: absolute;
	left: 0.42rem;
	top: 0.1rem;
	width: 0.32rem;
	height: 0.7rem;
	border-right: 2.5px solid var(--ospe-ink, #171714);
	border-bottom: 2.5px solid var(--ospe-ink, #171714);
	transform: rotate(42deg);
}

.ospe-page .nkg-verify__row input[type="checkbox"]:focus-visible + .nkg-verify__box {
	outline: 2px solid rgba(201, 162, 77, 0.6);
	outline-offset: 2px;
}

.ospe-page .nkg-verify__text {
	color: var(--ospe-ink, #171714);
	font-size: 0.82rem;
	font-weight: 600;
}

.ospe-page .nkg-market__option.is-active {
	border-color: var(--ospe-ink, #171714);
	background: var(--ospe-ink, #171714);
	color: var(--ospe-paper, #fff);
}

.ospe-page .nkg-market__option.is-active small {
	color: var(--ospe-gold, #c9a24d);
}

.ospe-page .nkg-market__option:focus-visible {
	outline: 2px solid var(--ospe-gold-dark, #a8802d);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Reveal card                                                         */
/* ------------------------------------------------------------------ */

.ospe-page .nkg-gate[hidden] {
	display: none !important;
}

/* The card opens inside the calculator panel, so it reads as the panel
   growing rather than a separate block appearing underneath it. */
.ospe-page .nkg-gate {
	margin: 1.15rem 0 0;
	padding: 1.15rem 0 0;
	border: 0;
	border-top: 1px solid var(--ospe-border, #dfd9cd);
	background: transparent;
}

.ospe-page .nkg-gate__heading {
	margin: 0 0 0.5rem;
	color: var(--ospe-ink, #171714);
	font-family: inherit;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
}

.ospe-page .nkg-gate__intro {
	margin: 0 0 1rem;
	color: var(--ospe-muted, #6d6a62);
	font-size: 0.82rem;
	line-height: 1.55;
}

.ospe-page .nkg-fields {
	display: grid;
	gap: 0.8rem;
}

.ospe-page .nkg-field {
	display: grid;
	gap: 0.3rem;
}

.ospe-page .nkg-field > label {
	color: var(--ospe-ink, #171714);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.ospe-page .nkg-field input,
.ospe-page .nkg-field select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--ospe-border, #dfd9cd);
	border-radius: 0;
	background: var(--ospe-paper, #fff);
	color: var(--ospe-ink, #171714);
	font-family: inherit;
	font-size: 0.9rem;
}

.ospe-page .nkg-field input:focus,
.ospe-page .nkg-field select:focus {
	border-color: var(--ospe-gold-dark, #a8802d);
	outline: 2px solid rgba(201, 162, 77, 0.35);
	outline-offset: 0;
}

.ospe-page .nkg-field.has-error input,
.ospe-page .nkg-field.has-error select {
	border-color: #b32d2e;
}

.ospe-page .nkg-error {
	margin: 0;
	color: #b32d2e;
	font-size: 0.76rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Descriptive copy sits under the images in the left column. */
.ospe-page .ospe-gallery .ospe-overview {
	margin-top: 1.6rem;
}

/* Collapsed gate: a single button that opens the form on click. */
.ospe-page .nkg-toggle {
	display: flex;
	gap: 0.65rem;
	margin-top: 0.95rem;
}

/* Inside the total box the button sits where the price will appear. */
.ospe-page .ospe-catalog__total .nkg-toggle {
	min-height: 2.7rem;
	margin-top: 0.3rem;
	padding: 0.65rem 1.1rem;
	font-size: 0.78rem;
	background: #eebf6d;
	border-color: #eebf6d;
	color: #171714;
}

.ospe-page .ospe-catalog__total .nkg-toggle:hover,
.ospe-page .ospe-catalog__total .nkg-toggle:focus-visible {
	background: #e3b25e;
	border-color: #e3b25e;
	color: #171714;
}

/* The site styles every span inside this box as a muted caption. The button
   label must not inherit that, or it renders grey on gold. */
.ospe-page .ospe-catalog__total .nkg-toggle > span {
	color: #171714;
}

.ospe-page .ospe-catalog__total .nkg-toggle > span:first-child {
	color: #171714;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* While locked the masked price gives way to the button. */
.ospe-page.nkg-locked .ospe-catalog__total [data-ospe-total-price] {
	display: none !important;
}

/* Heading and prompt only appear once the panel is open. */
.ospe-page .nkg-drop .nkg-gate__heading,
.ospe-page .nkg-drop .nkg-gate__intro {
	margin: 0;
}

.nkg-toggle__chev {
	width: 0.5rem;
	height: 0.5rem;
	margin-top: -0.2rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.ospe-page .nkg-toggle.is-open .nkg-toggle__chev {
	margin-top: 0.15rem;
	transform: rotate(-135deg);
}

.ospe-page .nkg-gate .nkg-drop[hidden],
.ospe-page .nkg-gate .nkg-fields[hidden],
.ospe-page .nkg-toggle[hidden],
.ospe-page .nkg-gate [data-nkg-unlocked][hidden],
.ospe-page .nkg-gate .nkg-final[hidden] {
	display: none !important;
}

.ospe-page .nkg-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.ospe-page .nkg-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3.05rem;
	margin-top: 0.35rem;
	padding: 0.8rem 1.5rem;
	border: 1px solid var(--ospe-gold-dark, #a8802d);
	border-radius: 0;
	background: var(--ospe-gold-dark, #a8802d);
	color: var(--ospe-ink, #171714);
	font-family: inherit;
	font-size: 0.83rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	cursor: pointer;
	text-align: center;
}

.ospe-page .nkg-button:hover,
.ospe-page .nkg-button:focus-visible {
	background: var(--ospe-gold, #c9a24d);
	outline: none;
}

.ospe-page .nkg-button[disabled],
.ospe-page .nkg-button[aria-busy="true"] {
	opacity: 0.65;
	cursor: progress;
}

/* Matches the "Click for Instant Pricing" button in the total box. */
.ospe-page .nkg-button[data-nkg-reveal] {
	border-color: #eebf6d;
	background: #eebf6d;
	color: #171714;
}

.ospe-page .nkg-button[data-nkg-reveal]:hover,
.ospe-page .nkg-button[data-nkg-reveal]:focus-visible {
	border-color: #e3b25e;
	background: #e3b25e;
	color: #171714;
}

.ospe-page .nkg-button--outline {
	border-color: var(--ospe-ink, #171714);
	background: transparent;
	color: var(--ospe-ink, #171714);
}

.ospe-page .nkg-button--outline:hover,
.ospe-page .nkg-button--outline:focus-visible {
	background: var(--ospe-ink, #171714);
	color: var(--ospe-paper, #fff);
}

.ospe-page .nkg-status {
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.5;
}

.ospe-page .nkg-status[data-state="error"] {
	color: #b32d2e;
}

.ospe-page .nkg-status[data-state="ok"] {
	color: #1a7f37;
}

.ospe-page .nkg-gate__privacy {
	margin: 0.7rem 0 0;
	color: var(--ospe-muted, #6d6a62);
	font-size: 0.72rem;
	line-height: 1.5;
}

/* Unlocked confirmation strip */
.ospe-page .nkg-unlocked-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--ospe-border, #dfd9cd);
	background: var(--ospe-paper, #fff);
	font-size: 0.78rem;
	font-weight: 600;
}

.ospe-page .nkg-unlocked-strip span {
	color: var(--ospe-muted, #6d6a62);
}

/* ------------------------------------------------------------------ */
/* Estimate note                                                       */
/* ------------------------------------------------------------------ */

.ospe-page .nkg-estimate-note {
	margin-top: 0.85rem;
	padding: 0.95rem 1rem;
	border: 1px solid var(--ospe-border, #dfd9cd);
	background: var(--ospe-ivory, #f7f4ed);
}

.ospe-page .nkg-estimate-note__fx {
	margin: 0 0 0.55rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px dashed var(--ospe-border, #dfd9cd);
	color: var(--ospe-ink, #171714);
	font-size: 0.79rem;
	font-weight: 600;
	line-height: 1.5;
}

.ospe-page .nkg-estimate-note__text {
	margin: 0;
	color: var(--ospe-muted, #6d6a62);
	font-size: 0.76rem;
	line-height: 1.55;
}

/* ------------------------------------------------------------------ */
/* Final quote panel                                                   */
/* ------------------------------------------------------------------ */

.ospe-page .nkg-final {
	margin-top: 1rem;
	padding: 1.15rem;
	border: 1px solid var(--ospe-border, #dfd9cd);
	background: var(--ospe-paper, #fff);
}

.ospe-page .nkg-final__note {
	margin: 0 0 1rem;
	color: var(--ospe-muted, #6d6a62);
	font-size: 0.78rem;
	line-height: 1.55;
}

.ospe-page .nkg-final__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.8rem;
}

.ospe-page .nkg-final__success {
	margin: 0;
	color: #1a7f37;
	font-size: 0.83rem;
	font-weight: 600;
	line-height: 1.55;
}

/* ------------------------------------------------------------------ */
/* Locked pricing                                                      */
/* ------------------------------------------------------------------ */

.ospe-page .nkg-masked {
	color: var(--ospe-gold-dark, #a8802d);
	letter-spacing: 0.08em;
}

.ospe-page.nkg-locked [data-ospe-price-basis] {
	display: none;
}

.ospe-page.nkg-locked .ospe-addon small {
	color: var(--ospe-muted, #6d6a62);
}

.ospe-page.nkg-locked .ospe-catalog__total strong {
	font-size: 0.95rem;
}

/* Hide the price inside the sticky summary while locked. */
.ospe-page.nkg-locked .ospe-sticky-cta strong::after {
	content: "";
}

@media (max-width: 980px) {
	.ospe-page .nkg-market__options,
	.ospe-page .nkg-final__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ospe-page .nkg-gate,
	.ospe-page .nkg-final {
		padding: 1rem;
	}

	.ospe-page .nkg-gate__heading {
		font-size: 0.96rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ospe-page .nkg-market__option,
	.ospe-page .nkg-button {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Sticky quote bar                                                    */
/* ------------------------------------------------------------------ */
.nkg-sticky {
	position: fixed;
	z-index: 99990;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0.7rem 0;
	border-top: 1px solid var(--ospe-border, #dfd9cd);
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 -12px 35px rgba(23, 23, 20, 0.09);
	font-family: Poppins, Arial, sans-serif;
	transform: translateY(105%);
	transition: transform 220ms ease;
}
.nkg-sticky,
.nkg-sticky * {
	box-sizing: border-box;
}
.nkg-sticky[hidden] {
	display: none !important;
}
.nkg-sticky.is-visible {
	transform: translateY(0);
}
.nkg-sticky__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.25rem;
	align-items: center;
	width: min(1180px, calc(100% - 3rem));
	margin: 0 auto;
}
.nkg-sticky__meta {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}
.nkg-sticky__eyebrow {
	color: var(--ospe-muted, #6f6a60);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.nkg-sticky__summary {
	overflow: hidden;
	color: var(--ospe-ink, #171714);
	font-size: 0.92rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nkg-sticky__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: auto;
	min-width: 215px;
	min-height: 2.85rem;
	margin: 0;
	padding: 0.75rem 1.3rem;
	border: 1px solid #1a7f37;
	border-radius: 0;
	background: #1a7f37;
	/* The theme styles the page buttons, so these are stated firmly. */
	color: #ffffff !important;
	font-family: inherit;
	font-size: 0.83rem;
	font-weight: 800 !important;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase !important;
	cursor: pointer;
}
.nkg-sticky__button:hover {
	border-color: #14662c;
	background: #14662c;
}
.nkg-sticky__button:focus-visible {
	outline: 3px solid #171714;
	outline-offset: 2px;
}
.nkg-sticky__chev {
	width: 0.48rem;
	height: 0.48rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}
/* Reserve document space so the bar never sits on top of the page ending. */
.nkg-sticky-spacer {
	height: 0;
}
html.nkg-sticky-on {
	scroll-padding-bottom: var(--nkg-sticky-h, 84px);
}
html.nkg-sticky-on .nkg-sticky-spacer {
	height: var(--nkg-sticky-h, 84px);
}
body.elementor-editor-active .nkg-sticky {
	display: none;
}
@media (max-width: 720px) {
	.nkg-sticky__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.5rem;
		width: calc(100% - 1.5rem);
	}
	.nkg-sticky__summary {
		font-size: 0.8rem;
	}
	.nkg-sticky__button {
		width: 100%;
		min-width: 0;
		min-height: 2.6rem;
	}
}

/* ------------------------------------------------------------------ */
/* Retired: the calculator's own quote button                          */
/* The fixed bar at the bottom now carries this action and knows the    */
/* price, so the static button in the column is hidden. Delete this     */
/* rule to bring it back.                                              */
/* ------------------------------------------------------------------ */
.ospe-page .ospe-catalog__quote[data-ospe-quote-link] {
	display: none !important;
}
/* ------------------------------------------------------------------ */
/* Accent refresh                                                      */
/* The yellow catalog controls and the gate's own buttons now wear the  */
/* same gold as the "Click for Instant Pricing" button, so the whole    */
/* calculator speaks one accent instead of two.                        */
/*                                                                     */
/* Gold that sits on ink takes the bright accent. Gold that sits on    */
/* paper keeps its deeper tone, because the bright gold on ivory is    */
/* only about 1.6:1 contrast and would be unreadable as small type.    */
/* ------------------------------------------------------------------ */

.ospe-page .ospe-catalog__type,
.ospe-page .ospe-catalog .ospe-option,
.ospe-page .ospe-button,
.ospe-page .nkg-button {
	border-color: #eebf6d;
	background: #eebf6d;
	color: var(--ospe-ink, #171714);
}

.ospe-page .ospe-catalog__type:hover,
.ospe-page .ospe-catalog__type:focus-visible,
.ospe-page .ospe-catalog__type.is-active,
.ospe-page .ospe-catalog .ospe-option:hover,
.ospe-page .ospe-catalog .ospe-option:focus-visible,
.ospe-page .ospe-catalog .ospe-option.is-active,
.ospe-page .ospe-button:hover,
.ospe-page .ospe-button:focus-visible,
.ospe-page .nkg-button:hover,
.ospe-page .nkg-button:focus-visible {
	border-color: var(--ospe-ink, #171714);
	background: var(--ospe-ink, #171714);
	color: var(--ospe-paper, #fff);
}

.ospe-page .nkg-button--outline {
	border-color: var(--ospe-ink, #171714);
	background: transparent;
	color: var(--ospe-ink, #171714);
}

.ospe-page .nkg-button--outline:hover,
.ospe-page .nkg-button--outline:focus-visible {
	border-color: var(--ospe-ink, #171714);
	background: var(--ospe-ink, #171714);
	color: var(--ospe-paper, #fff);
}

/* Gold figures and currency labels that sit on ink take the bright accent. */
.ospe-page .ospe-catalog__total strong,
.ospe-page .ospe-price strong,
.ospe-page .nkg-market__option.is-active small,
.ospe-page .nkg-masked {
	color: #eebf6d;
}

/* ------------------------------------------------------------------ */
/* Final quote action                                                  */
/* "Request My Final Quote" is the real conversion step, so it gets its */
/* own green instead of another gold button, and it is deliberately the */
/* loudest control on the page.                                         */
/* ------------------------------------------------------------------ */
.ospe-page .nkg-button[data-nkg-final-open],
.ospe-page .nkg-button[data-nkg-final-submit] {
	min-height: 3.5rem;
	padding: 0.9rem 1.6rem;
	border: 1px solid #1a7f37;
	border-radius: 0;
	background: #1a7f37;
	color: #ffffff;
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	line-height: 1.2;
	text-transform: uppercase;
	box-shadow: 0 10px 24px rgba(26, 127, 55, 0.28);
}

.ospe-page .nkg-button[data-nkg-final-open]:hover,
.ospe-page .nkg-button[data-nkg-final-open]:focus-visible,
.ospe-page .nkg-button[data-nkg-final-submit]:hover,
.ospe-page .nkg-button[data-nkg-final-submit]:focus-visible {
	border-color: #14662c;
	background: #14662c;
	color: #ffffff;
	outline: 0;
	box-shadow: 0 12px 30px rgba(26, 127, 55, 0.38);
}

.ospe-page .nkg-button[data-nkg-final-open][disabled],
.ospe-page .nkg-button[data-nkg-final-submit][disabled],
.ospe-page .nkg-button[data-nkg-final-open][aria-busy="true"],
.ospe-page .nkg-button[data-nkg-final-submit][aria-busy="true"] {
	opacity: 0.6;
	box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Colour sweep — one yellow, no gold, solid black on yellow           */
/*                                                                     */
/* The original stylesheet drives every brassy gold through two        */
/* variables (--ospe-gold and --ospe-gold-dark). Redeclaring them here */
/* recolours the eyebrow, the installed-project caption, the benefit   */
/* numbers and the little diamonds in one go, so the only accent left  */
/* on the page is the same yellow used on the buttons.                 */
/* ------------------------------------------------------------------ */
.ospe-page,
.ospe-quote-page {
--ospe-gold: #eebf6d;
--ospe-gold-dark: #eebf6d;
}

/* Text sitting on a yellow fill is solid black, not near-black. */
.ospe-page .ospe-catalog__type,
.ospe-page .ospe-catalog .ospe-option,
.ospe-page .ospe-button,
.ospe-page .nkg-button,
.ospe-page .nkg-toggle,
.ospe-page .nkg-toggle > span,
.ospe-page .nkg-toggle > span:first-child {
color: #000;
}

/* Theme buttons that sit on the yellow fill keep solid black labels too. */
.elementor-button,
.elementor-button .elementor-button-text,
a.elementor-button.elementor-button-link {
color: #000;
}

/* ------------------------------------------------------------------ */
/* Colour sweep, part two — specificity pass                           */
/* The theme and Elementor ship higher-specificity rules, so these     */
/* need !important to win.                                             */
/* ------------------------------------------------------------------ */

/* Solid black on every yellow fill. */
.ospe-page .ospe-catalog__type:not(.is-active),
.ospe-page .ospe-catalog .ospe-option:not(.is-active),
.ospe-page .nkg-button:not(.nkg-button--outline):not([data-nkg-final-open]):not([data-nkg-final-submit]),
.ospe-page .ospe-catalog__total .nkg-toggle,
.ospe-page .ospe-catalog__total .nkg-toggle > span,
.ospe-page .ospe-catalog__total .nkg-toggle > span:first-child,
.ospe-page .ospe-catalog__total .nkg-toggle strong {
color: #000 !important;
}

/* Number chips take the yellow tint, not the old gold tint. */
.ospe-page .ospe-benefit-card__number {
background: rgba(238, 191, 109, .22) !important;
}

/* The theme's own gold -> the same yellow. Fills keep solid black text. */
a.elementor-button,
a.elementor-button.elementor-button-link,
a.elementor-button .elementor-button-text,
.ekit_icon_button {
background-color: #eebf6d !important;
border-color: #eebf6d !important;
color: #000 !important;
}

/* The theme's gold text -> the same yellow. */
h1.elementor-heading-title.elementor-size-default,
h1.elementor-heading-title.elementor-size-default span,
a.ekit-menu-nav-link.active,
i.ekit-menu-icon {
color: #eebf6d !important;
}

/* The 01/02/03 chips sit on a pale yellow tint, so the numeral is black too. */
.ospe-page .ospe-benefit-card__number {
color: #000 !important;
}

/* ------------------------------------------------------------------ */
/* Readability pass                                                    */
/* The yellow reads fine on ink, but on white and cream it is too      */
/* light for small caps. On light backgrounds the accent text takes    */
/* the same warm brown as the "Made to order" line.                    */
/* ------------------------------------------------------------------ */
.ospe-page .ospe-eyebrow,
.ospe-page .ospe-installed-project__label {
color: #694e35 !important;
}

/* Sections that sit on ink keep the yellow, where it reads cleanly. */
.ospe-fit .ospe-eyebrow,
.ospe-page .ospe-fit .ospe-eyebrow,
.ospe-footer .ospe-eyebrow {
color: #eebf6d !important;
}

/* ------------------------------------------------------------------ */
/* Current selection lives inside the kit total block                  */
/* The block is ink, so the caption takes a soft white and the value   */
/* takes full white, sitting between the label and the figure.         */
/* ------------------------------------------------------------------ */
.ospe-page .ospe-catalog__total .ospe-config__selected {
	margin: 0.15rem 0 0.7rem;
	color: rgba(255, 255, 255, 0.66);
	font-size: 0.76rem;
	letter-spacing: 0.01em;
}

.ospe-page .ospe-catalog__total .ospe-config__selected span {
	color: inherit;
}

.ospe-page .ospe-catalog__total .ospe-config__selected strong {
	color: #fff;
	font-weight: 700;
}

/* Kitchen-sink safety: the block is a grid, so keep the line on its own row. */
.ospe-page .ospe-catalog__total .ospe-config__selected {
	grid-column: 1 / -1;
}

/* The block uppercases and letter-spaces its spans, which eats the space
   between the caption and the value. Put it back. */
.ospe-page .ospe-catalog__total .ospe-config__selected span {
margin-right: 0.4em;
}

/* When the estimate shows, the block styles every <strong> as the big price.
   The selection value must stay a caption, so pin its size explicitly. */
.ospe-page .ospe-catalog__total .ospe-config__selected strong {
display: inline;
font-size: 0.8rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
}

.ospe-page .ospe-catalog__total .ospe-config__selected {
font-size: 0.8rem;
line-height: 1.4;
}

/* ------------------------------------------------------------------ */
/* Add-on amounts                                                      */
/* The option cards are white, so the yellow amount is unreadable.     */
/* Same treatment as the other accent text on light backgrounds.       */
/* ------------------------------------------------------------------ */
.ospe-page .ospe-catalog .ospe-option small,
.ospe-page .ospe-option small,
.ospe-page .ospe-catalog .ospe-option .ospe-option__price,
.ospe-page .ospe-catalog .ospe-option__amount {
color: #694e35 !important;
font-weight: 700;
}

/* Correct target: the amount is a <small> inside LABEL.ospe-addon. */
.ospe-page .ospe-catalog__addons .ospe-addon small,
.ospe-page .ospe-catalog__addons small,
.ospe-page .ospe-addon small {
color: #694e35 !important;
font-weight: 700;
}

/* The final quote action sits directly under the kit estimate block. */
.ospe-page .nkg-final-block {
	margin-top: 0.9rem;
}

.ospe-page .nkg-final-block[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Sticky bar action                                                   */
/* The bar is appended to <body>, outside .ospe-page, and the theme     */
/* also styles buttons, so this is stated firmly. It matches the        */
/* Request My Final Quote button.                                      */
/* ------------------------------------------------------------------ */
body .nkg-sticky .nkg-sticky__button,
.ospe-page .nkg-sticky .nkg-sticky__button {
border-color: #1a7f37 !important;
background: #1a7f37 !important;
color: #ffffff !important;
}

body .nkg-sticky .nkg-sticky__button:hover,
body .nkg-sticky .nkg-sticky__button:focus-visible,
.ospe-page .nkg-sticky .nkg-sticky__button:hover,
.ospe-page .nkg-sticky .nkg-sticky__button:focus-visible {
border-color: #14662c !important;
background: #14662c !important;
color: #ffffff !important;
}

/* ------------------------------------------------------------------ */
/* Kit drawing on narrow screens                                       */
/* Below the stacking breakpoint the drawing is lifted directly above   */
/* the calculator, so it stays visible while the size is changed. The   */
/* element is the page's own image, so it keeps updating with the       */
/* selection. On wide screens it is returned to the gallery column.     */
/* ------------------------------------------------------------------ */
.nkg-mobile-render {
	margin: 0 0 1.15rem;
}

.nkg-mobile-render > img {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ */
/* Kit drawing on narrow screens                                       */
/* Below the stacking breakpoint the summary column holds the heading,  */
/* the delivery line and the calculator, while the drawing sits in the  */
/* gallery column further down the page. The column is made a flex box  */
/* and given explicit order values, so the drawing renders between the  */
/* delivery line and the calculator no matter where it sits in the DOM. */
/* This is why the drawing is visible while the size is being changed.  */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
.ospe-page .ospe-summary {
display: flex;
flex-direction: column;
}

.ospe-page .ospe-summary > .ospe-eyebrow {
order: 1;
}

.ospe-page .ospe-summary > .ospe-title {
order: 2;
}

.ospe-page .ospe-summary > .ospe-delivery {
order: 3;
}

.ospe-page .ospe-summary > .nkg-mobile-render {
order: 4;
margin-top: 1rem;
}

.ospe-page .ospe-summary > .ospe-catalog {
order: 5;
}

.ospe-page .ospe-summary > .ospe-cta-note {
order: 6;
}

.ospe-page .ospe-summary > .ospe-assurances {
order: 7;
}

.ospe-page .ospe-summary > .ospe-catalog__quote {
order: 8;
}
}

/* ------------------------------------------------------------------ */
/* Kit drawing on narrow screens, part two                             */
/* The drawing's size caption travels with it, the box it came out of   */
/* is collapsed so it leaves no gap, and the size field is aligned to   */
/* the top so "Kit size" lines up with "Timber preparation".            */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
	.ospe-page .nkg-mobile-empty {
		display: none;
	}

	.ospe-page .nkg-mobile-render .ospe-catalog-image__caption {
		margin: 0.55rem 0 0;
	}

	.ospe-page .ospe-catalog__selection-grid > .ospe-field {
		align-self: start;
	}
}