.pcs-asphalt,
.pcs-asphalt-guide {
	--pcs-navy-950: #172026;
	--pcs-navy-900: #222d35;
	--pcs-navy-800: #35434d;
	--pcs-teal-700: #b45309;
	--pcs-teal-600: #d97706;
	--pcs-teal-100: #fff3dc;
	--pcs-blue-100: #f2f4f5;
	--pcs-amber-500: #f59e0b;
	--pcs-slate-700: #3f4c55;
	--pcs-slate-600: #56636d;
	--pcs-slate-500: #707c85;
	--pcs-slate-300: #c5cbd0;
	--pcs-slate-200: #dfe3e6;
	--pcs-slate-100: #eff1f2;
	--pcs-slate-50: #f8f9f9;
}

.pcs-asphalt .pcs-sqft__hero {
	background:
		radial-gradient( circle at 88% 16%, rgba( 245, 158, 11, 0.2 ), transparent 31% ),
		linear-gradient( 135deg, #141b20 0%, #303c45 60%, #59421f 100% );
}

.pcs-asphalt .pcs-sqft__eyebrow {
	color: #ffd99a;
}

.pcs-asphalt :where( button, input, select, summary, a ):focus-visible,
.pcs-asphalt-guide :where( a, summary, [tabindex] ):focus-visible {
	outline-color: rgba( 217, 119, 6, 0.38 );
}

.pcs-asphalt .pcs-shape-button:hover {
	color: #9a4a08;
	border-color: #e9ad67;
}

.pcs-asphalt .pcs-shape-button.is-selected {
	background: linear-gradient( 145deg, #b45309, #7d3d09 );
	border-color: #b45309;
	box-shadow: 0 7px 16px rgba( 180, 83, 9, 0.22 );
}

.pcs-asphalt .pcs-shape-button__icon svg {
	fill: rgba( 217, 119, 6, 0.09 );
}

.pcs-asphalt .pcs-shape-button.is-selected .pcs-shape-button__icon svg {
	fill: rgba( 255, 255, 255, 0.12 );
}

.pcs-asphalt .pcs-shape-diagram {
	background-color: #fbfaf8;
	background-image:
		linear-gradient( rgba( 180, 83, 9, 0.055 ) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba( 180, 83, 9, 0.055 ) 1px, transparent 1px );
}

.pcs-asphalt .pcs-diagram__shape {
	fill: rgba( 50, 61, 69, 0.12 );
	stroke: #303c45;
}

.pcs-asphalt .pcs-diagram__measure {
	stroke: #b45309;
}

.pcs-asphalt__material-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1.12fr ) minmax( 230px, 0.88fr );
	gap: 1rem;
	align-items: stretch;
}

.pcs-asphalt__material-fields {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1rem;
}

.pcs-asphalt__material-fields .pcs-field--waste {
	grid-column: 1 / -1;
}

.pcs-input-unit {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 72px, auto );
}

.pcs-input-unit input {
	min-width: 0;
	border-radius: var( --pcs-radius-sm ) 0 0 var( --pcs-radius-sm ) !important;
}

.pcs-input-unit select {
	min-width: 72px;
	border-left: 0 !important;
	border-radius: 0 var( --pcs-radius-sm ) var( --pcs-radius-sm ) 0 !important;
}

.pcs-asphalt-layer {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 270px;
	padding: 0.75rem;
	background:
		linear-gradient( 145deg, rgba( 255, 255, 255, 0.96 ), rgba( 247, 242, 233, 0.92 ) ),
		repeating-linear-gradient( 45deg, rgba( 23, 32, 38, 0.025 ) 0 2px, transparent 2px 8px );
	border: 1px solid var( --pcs-slate-200 );
	border-radius: var( --pcs-radius-md );
}

.pcs-asphalt-layer svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 250px;
}

.pcs-asphalt-layer__label,
.pcs-asphalt-layer__value {
	fill: #3f4c55;
	font-family: inherit;
	font-size: 12px;
	font-weight: 750;
}

.pcs-asphalt-layer__value {
	fill: #a64d06;
	font-size: 13px;
}

.pcs-asphalt__options-grid {
	display: grid;
	grid-template-columns: minmax( 0, 1.4fr ) minmax( 220px, 0.8fr );
	gap: 1rem;
}

.pcs-asphalt__price-fieldset {
	grid-template-columns: minmax( 90px, 0.65fr ) minmax( 120px, 1fr ) minmax( 140px, 1fr );
}

.pcs-asphalt__truck-fieldset {
	grid-template-columns: 1fr 1fr;
}

.pcs-asphalt__truck-fieldset small {
	grid-column: 1 / -1;
	color: var( --pcs-slate-500 );
	font-size: 0.72rem;
	line-height: 1.45;
}

.pcs-asphalt .pcs-result-card__primary {
	background: linear-gradient( 135deg, #202b32, #72501d );
}

.pcs-asphalt .pcs-result-card__primary span {
	color: #ffe0aa;
}

.pcs-asphalt__conversions {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.pcs-asphalt__conversions div:last-child {
	grid-column: auto;
}

.pcs-asphalt__delivery-results {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.pcs-asphalt-guide a {
	color: #a64d06;
}

.pcs-asphalt-guide .pcs-sqft-guide__eyebrow {
	color: #b45309;
}

.pcs-asphalt-guide .pcs-sqft-guide__formula-cards strong {
	color: #8f4307;
}

@media ( max-width: 920px ) {
	.pcs-asphalt__material-layout,
	.pcs-asphalt__options-grid {
		grid-template-columns: 1fr;
	}

	.pcs-asphalt-layer {
		min-height: 220px;
	}
}

@media ( max-width: 620px ) {
	.pcs-asphalt__material-fields,
	.pcs-asphalt__price-fieldset,
	.pcs-asphalt__truck-fieldset {
		grid-template-columns: 1fr;
	}

	.pcs-asphalt__material-fields .pcs-field--waste,
	.pcs-asphalt__truck-fieldset small {
		grid-column: auto;
	}

	.pcs-asphalt-layer {
		min-height: 190px;
	}
}

@media print {
	.pcs-asphalt-layer {
		break-inside: avoid;
	}
}