.wp-block-post-template.grid {
	display: grid;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-post-template.grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wp-block-post-template.grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

}

}

}

}

}

}

.phero__title .ch,
.pd__title .ch,
.mega-title .ch {
	display: inline-block;
	will-change: transform;
}

}

}

}

}

}

}

}

}

}

}

@media (max-width: 900px) {
	.wp-block-post-template.grid--4,
	.wp-block-post-template.grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.wp-block-post-template.grid--4,
	.wp-block-post-template.grid--3 {
		grid-template-columns: 1fr;
	}
}

/* Design sections sit directly in the post content: drop the block-gap margins WordPress adds between them. */
.site-main > *,
.site-main .wp-block-post-content > * {
	margin-block: 0;
}

.site-main > .stats,
.site-main .wp-block-post-content > .stats {
	margin-top: -40px;
}

.why--six {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1180px) {
	.why--six {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 680px) {
	.site-main > .stats,
	.site-main .wp-block-post-content > .stats {
		margin-top: 0;
	}

	.why--six {
		grid-template-columns: 1fr;
	}
}

/* WordPress adds the root block gap above <main> and the footer: keep the sections flush. */
body .wp-site-blocks > * {
	margin-block: 0;
}

/* Swipe rows (category chips, catalogue filters): no scrollbars, no vertical overflow. */
.chips-scroll {
	overflow-y: hidden;
	scrollbar-width: none;
}

.chips-scroll::-webkit-scrollbar {
	display: none;
}

/* Wide screens have room for every chip and filter: wrap them instead of scrolling. */
@media (min-width: 1024px) {
	.chips-scroll,
	.filters {
		flex-wrap: wrap;
		overflow: visible;
	}

	.chips-scroll {
		padding-bottom: 0;
	}
}

/* Contact & Inquiry form: WhatsApp and email buttons side by side. */
.form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

/* Contact cards: up to five in a row, wrapping on smaller screens. */
.info-cards {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.info-card strong,
.cline__sm,
.footer nav a {
	overflow-wrap: anywhere;
}

.leader__card .leader__email {
	display: block;
	margin-top: .35rem;
	opacity: .8;
}

/* Inquiry popup. */
.iq-open,
.iq-open body {
	overflow: hidden;
}

.iq {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: 20px;
}

/* The custom cursor replaces the mouse pointer, so it must sit above the popup. */
.cursor,
.cursor-dot {
	z-index: 250;
}

.iq[hidden] {
	display: none;
}

.iq__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 34, 64, .45);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .3s var(--ease);
}

.iq__panel {
	position: relative;
	width: min(560px, 100%);
	max-height: calc(100svh - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	padding: clamp(1.4rem, 4vw, 2.4rem);
	border-radius: 30px;
	background: #fff;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	transform: translateY(24px) scale(.98);
	transition: opacity .35s var(--ease), transform .5s var(--ease);
}

.iq__panel::-webkit-scrollbar {
	display: none;
}

.iq.is-open .iq__backdrop,
.iq.is-open .iq__panel {
	opacity: 1;
}

.iq.is-open .iq__panel {
	transform: none;
}

.iq__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--bg);
	color: var(--ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background .3s, transform .4s var(--ease);
}

.iq__close:hover {
	background: var(--aqua-soft);
	transform: rotate(90deg);
}

.iq__title {
	margin: 0 2.5rem 1rem 0;
	font-size: clamp(1.5rem, 3.4vw, 2rem);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1.05;
}

.iq__product {
	margin-bottom: 1.4rem;
	color: var(--muted);
	font-size: .72rem;
}

.iq__product b {
	color: var(--ink);
}

.iq__choices {
	display: grid;
	gap: .7rem;
}

.iq__choice {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 1rem 1.1rem;
	border: 1px solid var(--line-2);
	border-radius: 20px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .3s, box-shadow .3s, transform .4s var(--ease);
}

.iq__choice:hover,
.iq__choice:focus-visible {
	border-color: var(--aqua);
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

.iq__choice b {
	display: block;
	font-family: var(--f-display);
	font-size: 1.15rem;
	letter-spacing: -.02em;
}

.iq__choice small {
	color: var(--muted);
	font-size: .88rem;
}

.iq__choice .arrow {
	margin-left: auto;
	font-style: normal;
	color: var(--aqua-d);
}

.iq__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 15px;
	background: var(--aqua-soft);
}

.iq__icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--aqua-d);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.iq__choice--wa .iq__icon {
	background: #e3f8ec;
	color: #25d366;
}

.iq__choice--wa .iq__icon svg {
	width: 26px;
	height: 26px;
	stroke: none;
}

.iq__back {
	margin-bottom: .8rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--aqua-d);
	font-size: .72rem;
	cursor: pointer;
}

.iq .iq__form {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.iq__for {
	display: flex;
	gap: .6rem;
	align-items: baseline;
	padding: .8rem 1rem;
	border-radius: 14px;
	background: var(--aqua-soft);
}

.iq__for .mono {
	color: var(--aqua-d);
	font-size: .66rem;
}

.iq__done {
	text-align: center;
}

.iq__done .iq__title {
	margin: 0 0 .6rem;
}

.iq__done p {
	max-width: 380px;
	margin: 0 auto 1.4rem;
	color: var(--ink-2);
}

.iq__tick {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: .4rem auto 1rem;
	border-radius: 50%;
	background: #e3f8ec;
}

.iq__tick svg {
	width: 30px;
	height: 30px;
	fill: none;
	stroke: var(--green);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 680px) {
	.form__actions,
	.form__actions .btn {
		width: 100%;
		justify-content: center;
	}

	/* The popup becomes a bottom sheet on phones. */
	.iq {
		place-items: end stretch;
		padding: 0;
	}

	.iq__panel {
		width: 100%;
		max-height: 92svh;
		border-radius: 26px 26px 0 0;
	}
}

/* Contact Form 7 inside the design's forms: each input sits in its own wrapper span. */
.form .wpcf7-form-control-wrap {
	display: block;
}

.form .hidden-fields-container {
	display: none;
}

.field:has(input:focus) label,
.field:has(textarea:focus) label,
.field:has(input:not(:placeholder-shown)) label,
.field:has(textarea:not(:placeholder-shown)) label {
	transform: translateY(-.6rem) scale(.75);
	color: var(--aqua-d);
}

.field .wpcf7-not-valid {
	border-color: #e5484d;
	background: #fff5f5;
}

.form .wpcf7-not-valid-tip {
	margin-top: .35rem;
	padding-left: 1rem;
	color: #e5484d;
	font-size: .78rem;
}

.wpcf7 form.form .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 0;
	padding: .9rem 1.1rem;
	border: 0;
	border-radius: 14px;
	background: var(--aqua-soft);
	color: var(--ink);
	font-size: .9rem;
}

.wpcf7 form.form.sent .wpcf7-response-output {
	background: #e3f8ec;
	color: #0b6b3a;
}

.wpcf7 form.form.invalid .wpcf7-response-output,
.wpcf7 form.form.unaccepted .wpcf7-response-output,
.wpcf7 form.form.failed .wpcf7-response-output,
.wpcf7 form.form.aborted .wpcf7-response-output,
.wpcf7 form.form.spam .wpcf7-response-output {
	background: #fff5f5;
	color: #b42318;
}

.form__foot .wpcf7-spinner {
	margin: 0;
}

.form .wpcf7-submit:disabled {
	opacity: .6;
	cursor: wait;
}

/* Product image slider: slides fade inside the round disc, arrows sit on its edge. */
.pd__gallery {
	position: relative;
}

.pd__slide {
	position: absolute;
	inset: 15%;
	display: grid;
	place-items: center;
	opacity: 0;
	transform: scale(.94);
	transition: opacity .5s var(--ease), transform .7s var(--ease);
	pointer-events: none;
}

.pd__slide.is-on {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.pd__disc[data-slider]:focus-visible {
	outline: 3px solid var(--aqua);
	outline-offset: 4px;
}

.pd__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 48px;
	height: 48px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--shadow);
	color: var(--ink);
	font-size: 1.1rem;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background .3s, border-color .3s, color .3s;
}

.pd__nav:hover {
	border-color: var(--aqua);
	background: var(--aqua);
	color: #fff;
}

.pd__nav--prev {
	left: 0;
}

.pd__nav--next {
	right: 0;
}

.pd__thumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin-top: 1.2rem;
}

.pd__thumb {
	width: 60px;
	height: 60px;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
	transition: border-color .3s, box-shadow .3s;
}

.pd__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.pd__thumb:hover,
.pd__thumb[aria-current="true"] {
	border-color: var(--aqua);
	box-shadow: 0 0 0 3px rgba(18, 176, 240, .15);
}

@media (max-width: 680px) {
	.pd__nav {
		width: 40px;
		height: 40px;
	}

	.pd__thumb {
		width: 52px;
		height: 52px;
	}
}

/* Accordions (category "About our…", FAQs): separate the opened text from its heading. */
.acc__body,
.readmore p {
	margin: 0 1.6rem;
	padding: 1.2rem 0 1.6rem;
	border-top: 1px solid var(--line);
	line-height: 1.75;
}

/* Long category texts read better in two columns on wide screens. */
@media (min-width: 1024px) {
	.readmore p {
		columns: 2;
		column-gap: 3rem;
	}
}

@media (max-width: 680px) {
	.acc summary,
	.readmore summary {
		padding: 1.1rem 1.2rem;
	}

	.acc__body,
	.readmore p {
		margin: 0 1.2rem;
		padding: 1rem 0 1.3rem;
	}
}