/* Ross's Calculators v1.2.0 */
.ross-calc {
	--red: var(--global-palette2, #e30613);
	--green: var(--global-palette11, #238a50);
	--text: var(--global-palette3, #2d2d2d);
	--muted: var(--global-palette4, #6b6b6b);
	--border: var(--global-palette7, #e7e1db);
	--soft: var(--global-palette8, #f7f3ef);
	--white: var(--global-palette9, #fff);
	max-width: 1400px;
	margin: 0 auto 40px;
	color: var(--text);
	font-family: inherit;
}

.ross-calc *,
.ross-calc *::before,
.ross-calc *::after { box-sizing: border-box; }

.ross-calc h2,
.ross-calc h3 { color: var(--text); }

.ross-calc__header { margin-bottom: 20px; }

.ross-calc__eyebrow,
.ross-calc__kicker {
	margin: 0 0 6px;
	color: var(--red);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ross-calc__header h2 {
	margin: 0 0 8px;
	font-size: clamp(28px, 4vw, 38px);
	line-height: 1.1;
}

.ross-calc__intro,
.ross-calc__section-note {
	color: var(--muted);
	line-height: 1.5;
}

.ross-calc__intro {
	max-width: 780px;
	margin: 0;
	font-size: 16px;
}

.ross-calc__section-note {
	margin: -4px 0 16px;
	font-size: 13px;
}

.ross-calc__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 16px;
	background: var(--soft);
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: hidden;
}

.ross-calc__tab {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 52px;
	padding: 10px 16px !important;
	background: transparent !important;
	color: var(--muted) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer;
}

.ross-calc__tab + .ross-calc__tab { border-left: 1px solid var(--border) !important; }

.ross-calc__tab.is-active {
	background: var(--white) !important;
	color: var(--text) !important;
	box-shadow: inset 0 -3px 0 var(--red) !important;
}

.ross-calc__tab-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--border);
	color: var(--text);
	font-size: 12px;
	font-weight: 800;
}

.ross-calc__tab.is-active .ross-calc__tab-step {
	background: var(--red);
	color: #fff;
}

.ross-calc__panel[hidden] { display: none !important; }

.ross-calc__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(320px, .9fr);
	gap: 20px;
	align-items: start;
}

.ross-calc__forms {
	display: grid;
	gap: 16px;
}

.ross-calc__section,
.ross-calc__results-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 4px 18px rgba(0,0,0,.035);
}

.ross-calc__section { padding: 20px; }

.ross-calc__results-card {
	position: sticky;
	top: 110px;
	padding: 20px;
}

.ross-calc__section-head,
.ross-calc__results-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.ross-calc__section-head h3,
.ross-calc__results-head h3 {
	margin: 0;
	font-size: 20px;
	line-height: 1.25;
}

.ross-calc__link {
	padding: 0 !important;
	background: transparent !important;
	color: var(--red) !important;
	border: 0 !important;
	box-shadow: none !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	cursor: pointer;
}

.ross-calc__area-list {
	display: grid;
	gap: 14px;
}

.ross-calc__area {
	padding: 16px;
	background: color-mix(in srgb, var(--soft) 75%, #fff);
	border: 1px solid var(--border);
	border-radius: 10px;
}

.ross-calc__area-top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.ross-calc__area-name-wrap { flex: 1 1 auto; }

.ross-calc__field-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.ross-calc__label {
	display: block;
	margin-bottom: 6px;
	color: var(--text);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.ross-calc__optional {
	color: var(--muted);
	font-weight: 500;
}

.ross-calc__name {
	width: min(320px, 100%);
	padding: 8px 10px !important;
	background: #fff !important;
	border: 1px solid var(--border) !important;
	border-radius: 6px !important;
	color: var(--text) !important;
	font-size: 14px !important;
	font-weight: 650 !important;
}

.ross-calc__unit {
	display: flex;
	align-items: stretch;
	width: 100%;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ross-calc__unit:focus-within {
	border-color: var(--green);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent);
}

.ross-calc__unit input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 46px;
	margin: 0 !important;
	padding: 0 12px !important;
	background: transparent !important;
	color: var(--text) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: 15px !important;
}

.ross-calc__unit > span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	padding: 0 11px;
	background: var(--soft);
	color: var(--muted);
	border-left: 1px solid var(--border);
	font-size: 13px;
	font-weight: 700;
}

.ross-calc__unit--prefix > span {
	order: 0;
	min-width: 42px;
	border-left: 0;
	border-right: 1px solid var(--border);
}

.ross-calc__unit--prefix input { order: 1; }

.ross-calc__help,
.ross-calc__note {
	display: block;
	margin-top: 5px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.4;
}

.ross-calc__field-error {
	display: block;
	margin-top: 6px;
	color: var(--red);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
}

.ross-calc__area-error {
	padding: 8px 10px;
	background: color-mix(in srgb, var(--red) 5%, #fff);
	border-radius: 6px;
}

.ross-calc__area-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 12px;
	padding: 9px 11px;
	background: #fff;
	border-radius: 7px;
	color: var(--muted);
	font-size: 13px;
}

.ross-calc__area-total strong {
	color: var(--text);
	font-size: 14px;
}

.ross-calc__deductions {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}

.ross-calc__deductions-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.ross-calc__deductions-head strong {
	display: block;
	font-size: 13px;
}

.ross-calc__deductions-head small {
	display: block;
	margin-top: 2px;
	color: var(--muted);
	font-size: 12px;
}

.ross-calc__opening-list {
	display: grid;
	gap: 10px;
	margin-top: 10px;
}

.ross-calc__opening {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 9px;
	align-items: end;
}

.ross-calc__remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0 !important;
	background: #fff !important;
	color: var(--muted) !important;
	border: 1px solid var(--border) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	font-size: 20px !important;
	cursor: pointer;
}

.ross-calc__waste {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.ross-calc__waste label {
	position: relative;
	display: block;
	cursor: pointer;
}

.ross-calc__waste input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ross-calc__waste label > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 76px;
	padding: 13px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 9px;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.ross-calc__waste label.is-selected > span {
	background: color-mix(in srgb, var(--green) 6%, #fff);
	border-color: var(--green);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 15%, transparent);
}

.ross-calc__waste strong { font-size: 16px; }

.ross-calc__waste small {
	color: var(--muted);
	font-size: 12px;
	line-height: 1.3;
}

.ross-calc__custom {
	max-width: 220px;
	margin-top: 12px;
}

.ross-calc__empty {
	padding: 35px 10px 28px;
	text-align: center;
	color: var(--muted);
}

.ross-calc__empty-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: var(--soft);
	color: var(--red);
	font-size: 24px;
}

.ross-calc__empty p {
	margin: 0;
	font-size: 14px;
}

.ross-calc__result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--border);
	color: var(--muted);
	font-size: 14px;
}

.ross-calc__result strong {
	color: var(--text);
	font-size: 15px;
	text-align: right;
}

.ross-calc__result--main {
	margin: 9px 0;
	padding: 14px;
	background: color-mix(in srgb, var(--green) 8%, #fff);
	border: 1px solid color-mix(in srgb, var(--green) 25%, var(--border));
	border-radius: 8px;
}

.ross-calc__result--main strong {
	color: var(--green);
	font-size: 24px;
}

.ross-calc__incomplete,
.ross-calc__summary,
.ross-calc__warning {
	margin-top: 14px;
	padding: 12px 13px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.45;
}

.ross-calc__incomplete {
	background: color-mix(in srgb, #f1b24a 10%, #fff);
	border: 1px solid color-mix(in srgb, #f1b24a 35%, var(--border));
}

.ross-calc__incomplete strong {
	display: block;
	margin-bottom: 3px;
	color: var(--text);
}

.ross-calc__incomplete p {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.ross-calc__summary {
	background: var(--soft);
	color: var(--text);
}

.ross-calc__warning {
	border-radius: 0;
	border-left: 3px solid var(--red);
	background: color-mix(in srgb, var(--red) 4%, #fff);
}

.ross-calc__warning strong {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
}

.ross-calc__warning p {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.45;
}

.ross-calc__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 14px;
}

.ross-calc__btn {
	min-height: 40px;
	padding: 9px 13px !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	cursor: pointer;
}

.ross-calc__btn--primary {
	background: var(--green) !important;
	color: #fff !important;
	border: 1px solid var(--green) !important;
}

.ross-calc__btn--secondary {
	background: #fff !important;
	color: var(--text) !important;
	border: 1px solid var(--border) !important;
}

.ross-calc__btn--text {
	grid-column: 1 / -1;
	min-height: 34px;
	background: transparent !important;
	color: var(--red) !important;
	border: 0 !important;
}

.ross-calc__next {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: 10px;
	padding: 11px 13px !important;
	background: #fff !important;
	color: var(--green) !important;
	border: 1px solid var(--green) !important;
	border-radius: 7px !important;
	box-shadow: none !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	cursor: pointer;
}

@media (max-width: 900px) {
	.ross-calc__layout { grid-template-columns: 1fr; }
	.ross-calc__results-card { position: static; }
}

@media (max-width: 640px) {
	.ross-calc { margin-bottom: 28px; }

	.ross-calc__tabs { grid-template-columns: 1fr; }

	.ross-calc__tab + .ross-calc__tab {
		border-left: 0 !important;
		border-top: 1px solid var(--border) !important;
	}

	.ross-calc__section,
	.ross-calc__results-card {
		padding: 15px;
		border-radius: 9px;
	}

	.ross-calc__section-head,
	.ross-calc__deductions-head {
		flex-direction: column;
	}

	.ross-calc__field-grid { grid-template-columns: 1fr; }
	.ross-calc__waste { grid-template-columns: 1fr; }
	.ross-calc__waste label > span { min-height: 0; }

	.ross-calc__opening {
		grid-template-columns: 1fr 1fr;
	}

	.ross-calc__opening .ross-calc__remove {
		grid-column: 1 / -1;
		width: 100%;
		border-radius: 7px !important;
	}

	.ross-calc__actions { grid-template-columns: 1fr; }
	.ross-calc__btn--text { grid-column: auto; }
}

@media print {
	@page {
		margin: 12mm;
	}

	body.ross-calculator-printing {
		margin: 0 !important;
		padding: 0 !important;
	}

	body.ross-calculator-printing * {
		visibility: hidden !important;
	}

	body.ross-calculator-printing .ross-calc.is-printing,
	body.ross-calculator-printing .ross-calc.is-printing * {
		visibility: visible !important;
	}

	/*
	 * Use fixed positioning rather than absolute.
	 * Absolute positioning can still be offset by the site's page/content wrapper,
	 * which caused the large blank area above the printed calculator.
	 */
	body.ross-calculator-printing .ross-calc.is-printing {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: none !important;
	}

	body.ross-calculator-printing .ross-calc.is-printing .ross-calc__tabs,
	body.ross-calculator-printing .ross-calc.is-printing .ross-calc__forms,
	body.ross-calculator-printing .ross-calc.is-printing .ross-calc__actions,
	body.ross-calculator-printing .ross-calc.is-printing .ross-calc__next {
		display: none !important;
	}

	body.ross-calculator-printing .ross-calc.is-printing .ross-calc__panel {
		margin: 0 !important;
		padding: 0 !important;
	}

	body.ross-calculator-printing .ross-calc.is-printing .ross-calc__layout {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body.ross-calculator-printing .ross-calc.is-printing .ross-calc__results-card {
		position: static !important;
		top: auto !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		box-shadow: none !important;
		break-inside: avoid;
	}
}


.ross-calc__product-page-note {
	margin-top: 14px;
	padding: 13px 14px;
	background: color-mix(in srgb, var(--green) 5%, #fff);
	border: 1px solid color-mix(in srgb, var(--green) 18%, var(--border));
	border-radius: 8px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.45;
}

.ross-calc__product-page-note strong {
	display: block;
	margin-bottom: 5px;
	color: var(--text);
	font-size: 13px;
}

.ross-calc__product-page-note p {
	margin: 0;
}

.ross-calc__product-page-note ul {
	margin: 7px 0;
	padding-left: 18px;
}

.ross-calc__product-page-note li + li {
	margin-top: 4px;
}


.ross-calc__field-error[hidden] {
	display: none !important;
}


/* Validation visibility: default hidden, shown only when JS adds .is-visible */
.ross-calc .ross-calc__area-error {
	display: none !important;
}

.ross-calc .ross-calc__area-error.is-visible {
	display: block !important;
}

.ross-calc .ross-calc__unit.has-error {
	border-color: var(--red) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 10%, transparent) !important;
}
