.pcs-mulch,
.pcs-mulch-guide {
	--pcs-navy-950: #1f271b;
	--pcs-navy-900: #2e3928;
	--pcs-navy-800: #475442;
	--pcs-teal-700: #4f6b42;
	--pcs-teal-600: #698254;
	--pcs-teal-100: #edf3e7;
	--pcs-blue-100: #eff2ea;
	--pcs-amber-500: #c37a35;
	--pcs-slate-700: #495346;
	--pcs-slate-600: #606b5d;
	--pcs-slate-500: #788273;
	--pcs-slate-300: #c0c8bb;
	--pcs-slate-200: #dce2d8;
	--pcs-slate-100: #edf0e9;
	--pcs-slate-50: #fafbf8;
}

.pcs-mulch .pcs-sqft__hero {
	background:
		radial-gradient( circle at 88% 14%, rgba( 223, 151, 79, 0.3 ), transparent 32% ),
		linear-gradient( 135deg, #24331d 0%, #516840 58%, #845532 100% );
}

.pcs-mulch .pcs-sqft__eyebrow {
	color: #f4d2a5;
}

.pcs-mulch :where( button, input, select, summary, a ):focus-visible,
.pcs-mulch-guide :where( a, summary, [tabindex] ):focus-visible {
	outline-color: rgba( 79, 107, 66, 0.45 );
}

.pcs-mulch .pcs-shape-button:hover {
	color: #405b34;
	border-color: #9caf8e;
}

.pcs-mulch .pcs-shape-button.is-selected {
	background: linear-gradient( 145deg, #6c8654, #435b37 );
	border-color: #5d764a;
	box-shadow: 0 7px 16px rgba( 67, 91, 55, 0.24 );
}

.pcs-mulch .pcs-shape-button__icon svg {
	fill: rgba( 89, 112, 70, 0.11 );
}

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

.pcs-mulch .pcs-shape-diagram {
	background-color: #fbfcf8;
	background-image:
		linear-gradient( rgba( 94, 113, 76, 0.055 ) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba( 94, 113, 76, 0.055 ) 1px, transparent 1px );
}

.pcs-mulch .pcs-diagram__shape {
	fill: rgba( 142, 95, 54, 0.14 );
	stroke: #4f6942;
}

.pcs-mulch .pcs-diagram__measure {
	stroke: #a7642e;
}

.pcs-mulch .pcs-sqft__workspace > *,
.pcs-mulch .pcs-panel,
.pcs-mulch .pcs-area-card,
.pcs-mulch .pcs-shape-workspace,
.pcs-mulch .pcs-shape-picker,
.pcs-mulch .pcs-field,
.pcs-mulch__depth-layout,
.pcs-mulch__options-grid,
.pcs-mulch__option-fields,
.pcs-mulch__coverage-fields {
	min-width: 0;
}

.pcs-mulch .pcs-field :where( input, select ) {
	max-width: 100%;
}

.pcs-mulch .pcs-sqft__toolbar {
	display: grid;
	grid-template-columns: minmax( 210px, 1.1fr ) minmax( 190px, 0.9fr ) auto;
	align-items: end;
	gap: 1rem;
	padding: 1.25rem clamp( 1rem, 3vw, 2rem );
	background: var( --pcs-white );
	border-bottom: 1px solid var( --pcs-slate-200 );
}

.pcs-mulch .pcs-sqft__toolbar-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.55rem;
}

.pcs-mulch .pcs-sqft__project-help {
	margin: 0;
	padding: 0.85rem clamp( 1rem, 3vw, 2rem );
	color: var( --pcs-slate-600 );
	font-size: 0.88rem;
	line-height: 1.6;
	background: #f3f7ef;
	border-left: 4px solid var( --pcs-teal-600 );
}

.pcs-mulch .pcs-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-bottom: 0.55rem;
	color: #405b34;
	font-size: 0.78rem;
	font-weight: 850;
	line-height: 1;
	background: #e7efe1;
	border: 1px solid #c5d4bb;
	border-radius: 999px;
}

.pcs-mulch .pcs-panel {
	padding: clamp( 1.2rem, 2.6vw, 1.65rem );
}

.pcs-mulch .pcs-panel__heading {
	margin-bottom: 1.3rem;
}

.pcs-mulch .pcs-panel__heading h3 {
	font-size: clamp( 1.3rem, 2vw, 1.5rem );
	line-height: 1.28;
}

.pcs-mulch .pcs-panel__heading p:last-child {
	max-width: 64ch;
	margin-top: 0.55rem;
	font-size: 0.91rem;
	line-height: 1.65;
}

.pcs-mulch .pcs-field > label,
.pcs-mulch .pcs-fieldset legend {
	margin-bottom: 0.48rem;
	font-size: 0.82rem;
	line-height: 1.45;
}

.pcs-mulch .pcs-field small {
	margin-top: 0.5rem;
	font-size: 0.78rem;
	line-height: 1.6;
}

.pcs-mulch .pcs-button {
	font-size: 0.84rem;
	font-weight: 750;
	line-height: 1.2;
}

.pcs-mulch .pcs-shape-button {
	font-size: 0.72rem;
	font-weight: 750;
	line-height: 1.25;
}

.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-mulch__depth-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1.15fr ) minmax( 260px, 0.85fr );
	gap: 1rem;
	align-items: stretch;
}

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

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

.pcs-mulch__presets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.55rem;
}

.pcs-mulch__presets button {
	min-height: 30px;
	padding: 0.25rem 0.62rem;
	color: #435b37;
	font: inherit;
	font-size: 0.74rem;
	font-weight: 750;
	background: #f2f6ee;
	border: 1px solid #cbd8c3;
	border-radius: 999px;
	cursor: pointer;
}

.pcs-mulch__presets button:hover {
	background: #e8f0e1;
	border-color: #94ab84;
}

.pcs-mulch-layer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	margin: 0;
	padding: 0.85rem;
	background:
		linear-gradient( 145deg, rgba( 255, 255, 255, 0.97 ), rgba( 246, 239, 226, 0.95 ) ),
		repeating-linear-gradient( 45deg, rgba( 83, 63, 41, 0.025 ) 0 2px, transparent 2px 8px );
	border: 1px solid var( --pcs-slate-200 );
	border-radius: var( --pcs-radius-md );
}

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

.pcs-mulch-layer text {
	fill: #453c31;
	font-family: inherit;
	font-size: 12px;
	font-weight: 750;
}

.pcs-mulch-layer figcaption {
	color: var( --pcs-slate-600 );
	font-size: 0.76rem;
	line-height: 1.45;
	text-align: center;
}

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

.pcs-option-card {
	min-width: 0;
	min-inline-size: 0;
	margin: 0;
	padding: 1rem;
	background: #fbfcf9;
	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-option-card > :not( legend ) + * {
	margin-top: 1rem;
}

.pcs-mulch__price-row {
	display: grid;
	grid-template-columns: minmax( 70px, 0.55fr ) minmax( 90px, 1fr ) minmax( 106px, 1fr );
}

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

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

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

.pcs-mulch [hidden] {
	display: none !important;
}

.pcs-mulch .pcs-result-card__primary {
	margin-top: 0;
	background: linear-gradient( 135deg, #314328, #855532 );
}

.pcs-mulch .pcs-result-card__primary span,
.pcs-mulch .pcs-result-card__primary small {
	color: #f5ddbd;
}

.pcs-mulch .pcs-result-card__primary small {
	display: block;
	margin-top: 0.45rem;
	font-size: 0.74rem;
	line-height: 1.5;
}

.pcs-mulch .pcs-sqft__results {
	display: grid;
	gap: 0.75rem;
}

.pcs-mulch .pcs-results__heading {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0 0.2rem 0.15rem;
}

.pcs-mulch .pcs-results__heading .pcs-step {
	flex: 0 0 30px;
	margin: 0;
}

.pcs-mulch .pcs-results__heading h3 {
	margin: 0;
	color: var( --pcs-navy-950 );
	font-size: 1.35rem;
	font-weight: 780;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.pcs-mulch .pcs-sqft__results > .pcs-result-card {
	padding: 1rem 1.1rem;
}

.pcs-mulch .pcs-sqft__results > .pcs-result-card:not( .pcs-result-card__primary ) > span {
	display: block;
	margin-bottom: 0.45rem;
	color: var( --pcs-slate-600 );
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.45;
}

.pcs-mulch .pcs-sqft__results > .pcs-result-card:not( .pcs-result-card__primary ) > strong {
	display: block;
	color: var( --pcs-navy-900 );
	font-size: 1.2rem;
	line-height: 1.3;
	word-break: break-word;
}

.pcs-mulch .pcs-sqft__results > .pcs-result-card > small {
	display: block;
	margin-top: 0.38rem;
	color: var( --pcs-slate-500 );
	font-size: 0.73rem;
	line-height: 1.55;
}

.pcs-mulch .pcs-result-card__details {
	display: grid;
	gap: 0.5rem;
	margin-top: 0.55rem;
}

.pcs-mulch .pcs-result-card__details > span {
	display: flex;
	min-width: 0;
	padding: 0.62rem;
	flex-direction: column;
	gap: 0.2rem;
	color: var( --pcs-slate-500 );
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.4;
	background: var( --pcs-slate-50 );
	border: 1px solid var( --pcs-slate-200 );
	border-radius: var( --pcs-radius-sm );
}

.pcs-mulch .pcs-result-card__details b {
	display: block;
	color: var( --pcs-navy-900 );
	font-size: 0.88rem;
	line-height: 1.35;
	word-break: break-word;
}

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

.pcs-mulch__costs {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.55rem;
	margin-bottom: 0.7rem;
}

.pcs-mulch__costs span {
	display: grid;
	gap: 0.15rem;
	padding: 0.65rem;
	color: var( --pcs-slate-600 );
	font-size: 0.74rem;
	line-height: 1.4;
	background: rgba( 255, 255, 255, 0.62 );
	border: 1px solid #ead9b6;
	border-radius: var( --pcs-radius-sm );
}

.pcs-mulch__costs b {
	color: var( --pcs-navy-900 );
	font-size: 0.95rem;
	line-height: 1.35;
}

.pcs-mulch .pcs-result-card--formula details {
	margin: 0;
}

.pcs-mulch .pcs-result-card--formula summary {
	position: relative;
	padding-right: 1.5rem;
	color: var( --pcs-navy-900 );
	font-size: 0.86rem;
	font-weight: 800;
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
}

.pcs-mulch .pcs-result-card--formula summary::-webkit-details-marker {
	display: none;
}

.pcs-mulch .pcs-result-card--formula summary::after {
	position: absolute;
	top: 50%;
	right: 0;
	color: var( --pcs-teal-700 );
	font-size: 1.1rem;
	content: '+';
	transform: translateY( -50% );
}

.pcs-mulch .pcs-result-card--formula details[open] summary::after {
	content: '−';
}

.pcs-mulch .pcs-result-card--formula ol {
	max-height: 260px;
	margin: 0.85rem 0 0;
	padding: 0.8rem 0.8rem 0.8rem 1.85rem;
	overflow-y: auto;
	color: var( --pcs-slate-600 );
	font-size: 0.77rem;
	line-height: 1.65;
	background: var( --pcs-slate-50 );
	border: 1px solid var( --pcs-slate-200 );
	border-radius: var( --pcs-radius-sm );
	scrollbar-width: thin;
}

.pcs-mulch .pcs-result-card--formula li + li {
	margin-top: 0.45rem;
}

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

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

.pcs-mulch .pcs-sqft__disclaimer {
	margin: 0;
	padding: 0.85rem 0.95rem;
	color: var( --pcs-slate-600 );
	font-size: 0.72rem;
	line-height: 1.6;
	background: #f3f7ef;
	border: 1px solid #d6e1cf;
	border-radius: var( --pcs-radius-sm );
}

.pcs-mulch .pcs-sqft__results > .pcs-sqft__notice {
	margin: 0;
}

.pcs-mulch-guide a {
	color: #4f6b42;
}

.pcs-mulch-guide .pcs-sqft-guide__eyebrow {
	color: #5d764a;
}

.pcs-mulch-guide .pcs-sqft-guide__formula-cards strong {
	color: #405b34;
}

@media ( max-width: 920px ) {
	.pcs-mulch .pcs-sqft__toolbar {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.pcs-mulch .pcs-sqft__toolbar-actions {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}

	.pcs-mulch__depth-layout,
	.pcs-mulch__options-grid {
		grid-template-columns: 1fr;
	}

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

@media ( max-width: 620px ) {
	.pcs-mulch .pcs-sqft__toolbar {
		grid-template-columns: 1fr;
		padding: 1rem;
	}

	.pcs-mulch .pcs-sqft__toolbar-actions {
		grid-column: auto;
	}

	.pcs-mulch .pcs-sqft__toolbar-actions .pcs-button {
		flex: 1 1 0;
	}

	.pcs-mulch .pcs-sqft__project-help {
		padding: 0.85rem 1rem;
	}

	.pcs-mulch__depth-fields,
	.pcs-mulch__option-fields,
	.pcs-mulch__coverage-fields,
	.pcs-mulch__price-row {
		grid-template-columns: 1fr;
	}

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

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

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

	.pcs-mulch__three-results,
	.pcs-mulch__costs {
		grid-template-columns: 1fr;
	}

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

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