/* Puddle flange landing page */

	.puddle-page {
		background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
	}

	.puddle-page #header .site-title {
		-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s;
		-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s;
		-ms-transition: opacity 0.2s ease-in-out, visibility 0.2s;
		transition: opacity 0.2s ease-in-out, visibility 0.2s;
		font-family: Raleway, Helvetica, sans-serif;
		font-size: 0.8em;
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 1.65;
		margin-bottom: 0;
		opacity: 1;
		text-transform: uppercase;
		visibility: visible;
	}

	.puddle-page #header .site-title a {
		border: 0;
	}

	.puddle-page .prv-form-status.is-success {
		color: #b9e6cf;
	}

	.puddle-page .prv-form-status.is-error {
		color: #ffb8b8;
	}

	.puddle-page .prv-field-note-inline {
		color: rgba(255, 255, 255, 0.55);
		font-size: 0.85em;
		font-weight: 400;
		text-transform: none;
	}

	.puddle-card-grid,
	.puddle-location-grid,
	.puddle-mini-gallery {
		display: grid;
		gap: 1.5em;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin: 2em 0;
	}

	.puddle-card-grid article,
	.puddle-location-grid article,
	.puddle-mini-gallery figure,
	.puddle-material-guide section {
		background: rgba(255, 255, 255, 0.035);
		border: solid 1px rgba(255, 255, 255, 0.12);
		border-radius: 6px;
		padding: 1.5em;
	}

	.puddle-card-grid.compact {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.puddle-card-grid h3,
	.puddle-location-grid h3,
	.puddle-material-guide h3 {
		font-size: 0.95em;
		margin-bottom: 1em;
	}

	.puddle-card-image {
		aspect-ratio: 16 / 9;
		background: rgba(255, 255, 255, 0.06);
		border-radius: 6px;
		display: block;
		height: clamp(11rem, 18vw, 15rem);
		margin: 0 0 1.25em 0;
		object-fit: contain;
		width: 100%;
	}

	.puddle-placeholder {
		align-items: center;
		aspect-ratio: 16 / 9;
		background: linear-gradient(135deg, rgba(83, 117, 168, 0.35), rgba(46, 49, 65, 0.75));
		border: solid 1px rgba(255, 255, 255, 0.14);
		border-radius: 6px;
		color: rgba(255, 255, 255, 0.72);
		display: flex;
		font-family: Raleway, Helvetica, sans-serif;
		font-size: 0.78em;
		font-weight: 700;
		justify-content: center;
		letter-spacing: 0.08em;
		margin-bottom: 1.25em;
		padding: 1em;
		text-align: center;
		text-transform: uppercase;
	}

	.puddle-location-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.puddle-material-guide {
		display: grid;
		gap: 1.25em;
		margin-top: 1.5em;
	}

	.material-jumps a {
		border-bottom: 0;
	}

	.puddle-video-wrap {
		aspect-ratio: 16 / 9;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 6px;
		margin: 1.5em 0;
		overflow: hidden;
	}

	.puddle-video-wrap iframe {
		border: 0;
		display: block;
		height: 100%;
		width: 100%;
	}

	.puddle-mini-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.puddle-mini-gallery figure {
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	.puddle-mini-gallery img {
		aspect-ratio: 16 / 9;
		background: rgba(255, 255, 255, 0.06);
		display: block;
		height: clamp(10rem, 16vw, 13rem);
		object-fit: contain;
		width: 100%;
	}

	.puddle-mini-gallery figcaption {
		padding: 1em;
	}

	.floating-whatsapp-cta {
		position: fixed;
		right: 22px;
		bottom: 22px;
		z-index: 9999;
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 13px 18px;
		border-radius: 999px;
		background: #25d366;
		color: #fff !important;
		font-weight: 700;
		text-decoration: none;
		box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.floating-whatsapp-cta:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
	}

	.floating-whatsapp-cta .icon {
		font-size: 1.4rem;
	}

	@media screen and (max-width: 1280px) {

		.puddle-page #wrapper > header.prv-hero {
			background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
		}

	}

	@media screen and (max-width: 980px) {

		.puddle-card-grid,
		.puddle-card-grid.compact,
		.puddle-location-grid,
		.puddle-mini-gallery {
			grid-template-columns: 1fr;
		}

	}

	@media screen and (max-width: 736px) {

		.floating-whatsapp-cta {
			display: none;
		}

	}