.pcs-gravel,
.pcs-gravel-guide {
	--pcs-navy-950: #1f2924;
	--pcs-navy-900: #2f3b34;
	--pcs-navy-800: #46534b;
	--pcs-teal-700: #3f6650;
	--pcs-teal-600: #557c63;
	--pcs-teal-100: #e7f0e9;
	--pcs-blue-100: #edf1ee;
	--pcs-amber-500: #c8903d;
	--pcs-slate-700: #465149;
	--pcs-slate-600: #5d6961;
	--pcs-slate-500: #748078;
	--pcs-slate-300: #bfc7c1;
	--pcs-slate-200: #dce1dd;
	--pcs-slate-100: #edf0ed;
	--pcs-slate-50: #f8f9f8;
}

.pcs-gravel .pcs-sqft__hero {
	background:
		radial-gradient( circle at 88% 14%, rgba( 213, 170, 98, 0.27 ), transparent 32% ),
		linear-gradient( 135deg, #1d2922 0%, #3f5948 58%, #756045 100% );
}

.pcs-gravel .pcs-sqft__eyebrow {
	color: #f1d4a1;
}

.pcs-gravel :where( button, input, select, summary, a ):focus-visible,
.pcs-gravel-guide :where( a, summary, [tabindex] ):focus-visible {
	outline-color: rgba( 63, 102, 80, 0.42 );
}

.pcs-gravel .pcs-shape-button:hover {
	color: #355944;
	border-color: #8eaa96;
}

.pcs-gravel .pcs-shape-button.is-selected {
	background: linear-gradient( 145deg, #4d755c, #334f3e );
	border-color: #4d755c;
	box-shadow: 0 7px 16px rgba( 51, 79, 62, 0.22 );
}

.pcs-gravel .pcs-shape-button__icon svg {
	fill: rgba( 78, 117, 92, 0.1 );
}

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

.pcs-gravel .pcs-shape-diagram {
	background-color: #fafbf9;
	background-image:
		linear-gradient( rgba( 72, 101, 81, 0.055 ) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba( 72, 101, 81, 0.055 ) 1px, transparent 1px );
}

.pcs-gravel .pcs-diagram__shape {
	fill: rgba( 105, 119, 108, 0.16 );
	stroke: #3f5948;
}

.pcs-gravel .pcs-diagram__measure {
	stroke: #9a6a2d;
}

.pcs-gravel__material-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1.15fr ) minmax( 250px, 0.85fr );
	gap: 1rem;
	align-items: stretch;
}

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

.pcs-gravel__material-fields .pcs-field--wide {
	grid-column: 1 / -1;
}

.pcs-input-unit {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 82px, 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: 82px;
	border-left: 0 !important;
	border-radius: 0 var( --pcs-radius-sm ) var( --pcs-radius-sm ) 0 !important;
}

.pcs-gravel__depth-presets,
.pcs-gravel .pcs-waste-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.55rem;
}

.pcs-gravel__depth-presets button,
.pcs-gravel .pcs-waste-presets button {
	min-height: 30px;
	padding: 0.25rem 0.58rem;
	color: #3f5948;
	font: inherit;
	font-size: 0.74rem;
	font-weight: 750;
	background: #f3f6f3;
	border: 1px solid #cad5cd;
	border-radius: 999px;
	cursor: pointer;
}

.pcs-gravel__depth-presets button:hover,
.pcs-gravel .pcs-waste-presets button:hover {
	background: #e5eee7;
	border-color: #86a08e;
}

.pcs-gravel-layer {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: 0.85rem;
	background:
		linear-gradient( 145deg, rgba( 255, 255, 255, 0.97 ), rgba( 241, 237, 227, 0.94 ) ),
		repeating-linear-gradient( 45deg, rgba( 67, 82, 70, 0.025 ) 0 2px, transparent 2px 8px );
	border: 1px solid var( --pcs-slate-200 );
	border-radius: var( --pcs-radius-md );
}

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

.pcs-gravel-layer__ground {
	fill: #a78c68;
	stroke: #766046;
	stroke-width: 1.5;
}

.pcs-gravel-layer__stone {
	fill: #899087;
	stroke: #515c54;
	stroke-width: 2;
}

.pcs-gravel-layer pattern circle,
.pcs-gravel-layer pattern ellipse {
	fill: #707870;
	stroke: #515951;
	stroke-width: 0.8;
}

.pcs-gravel-layer__surface,
.pcs-gravel-layer__measure {
	fill: none;
	stroke: #8b632f;
	stroke-width: 2;
}

.pcs-gravel-layer__measure {
	stroke-width: 1.5;
}

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

.pcs-gravel-layer__value {
	fill: #7b5525;
	font-size: 13px;
}

.pcs-gravel__options-grid {
	display: grid;
	grid-template-columns: minmax( 0, 1.15fr ) minmax( 260px, 0.85fr );
	gap: 1rem;
}

.pcs-option-card {
	min-width: 0;
	margin: 0;
	padding: 1rem;
	background: #fbfcfb;
	border: 1px solid var( --pcs-slate-200 );
	border-radius: var( --pcs-radius-md );
}

.pcs-option-card legend {
	padding: 0 0.45rem;
	color: var( --pcs-navy-900 );
	font-size: 0.9rem;
	font-weight: 800;
}

.pcs-gravel__option-fields {
	display: grid;
	gap: 1rem;
}

.pcs-gravel__price-row {
	display: grid;
	grid-template-columns: minmax( 72px, 0.65fr ) minmax( 95px, 1fr ) minmax( 110px, 1fr );
}

.pcs-gravel__price-row > :first-child {
	border-radius: var( --pcs-radius-sm ) 0 0 var( --pcs-radius-sm ) !important;
}

.pcs-gravel__price-row > :nth-child( 2 ) {
	min-width: 0;
	border-right: 0 !important;
	border-left: 0 !important;
	border-radius: 0 !important;
}

.pcs-gravel__price-row > :last-child {
	border-radius: 0 var( --pcs-radius-sm ) var( --pcs-radius-sm ) 0 !important;
}

.pcs-gravel .pcs-result-card__primary {
	background: linear-gradient( 135deg, #2d4134, #79613f );
}

.pcs-gravel .pcs-result-card__primary span,
.pcs-gravel .pcs-result-card__primary small {
	color: #f3dfbc;
}

.pcs-gravel__three-results,
.pcs-gravel__delivery-results {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

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

.pcs-gravel .pcs-results__actions [data-download-pdf] {
	grid-column: 1 / -1;
}

.pcs-gravel-guide a {
	color: #3f6650;
}

.pcs-gravel-guide .pcs-sqft-guide__eyebrow {
	color: #4d755c;
}

.pcs-gravel-guide .pcs-sqft-guide__formula-cards strong {
	color: #355944;
}

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

	.pcs-gravel-layer {
		min-height: 230px;
	}
}

@media ( max-width: 620px ) {
	.pcs-gravel__material-fields,
	.pcs-gravel__price-row {
		grid-template-columns: 1fr;
	}

	.pcs-gravel__material-fields .pcs-field--wide {
		grid-column: auto;
	}

	.pcs-gravel__price-row > * {
		border: 1px solid var( --pcs-slate-300 ) !important;
		border-radius: var( --pcs-radius-sm ) !important;
	}

	.pcs-gravel__price-row {
		gap: 0.45rem;
	}

	.pcs-gravel__three-results,
	.pcs-gravel__delivery-results {
		grid-template-columns: 1fr;
	}

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

@media print {
	.pcs-gravel-layer,
	.pcs-option-card {
		break-inside: avoid;
	}
}