/**
 * IPLink sections — the homepage and any page built from the «IPLink» patterns.
 *
 * Every rule is scoped under a section root (.ipl-section / .ipl-hero, .ipl-cats …).
 * Logical properties only. Motion is transform/opacity (and the individual translate/scale
 * transform properties) and is removed under reduced motion.
 * Enhanced layouts (slider track, selector tabs) key off html.ipl-js, set before first paint.
 *
 * Section rhythm alternates light and dark bands with real luminance contrast (white ↔ navy
 * 17:1, light gray ↔ blue gradient 6.6:1), so sections stay distinct without relying on hue.
 * Text pairs were measured: secondary text #4B5563 ≥ 6.6:1 on every light surface used here;
 * muted text on dark bands (#C9D2DC, #DCE6F5, #9CC3FF, #CFE0FF) ≥ 5.6:1.
 */

/* ─── Layout and shared tokens ────────────────────────────────────── */

.ipl-sections-page .ipl-sections-layout {
	padding-block: 0;
}

.ipl-section {
	/* Mask icons (drawn in black, coloured by background-color). */
	--ipl-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--ipl-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E");
	--ipl-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
	--ipl-i-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E");
	--ipl-i-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
	--ipl-i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E");
	--ipl-i-business: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E");
	--ipl-i-cctv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3Cpath d='m22 8-6 4 6 4z'/%3E%3C/svg%3E");
	--ipl-i-enterprise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='7' rx='2'/%3E%3Crect x='3' y='14' width='18' height='7' rx='2'/%3E%3Cpath d='M7 6.5h.01M7 17.5h.01'/%3E%3C/svg%3E");
	--ipl-i-switch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='1.5'/%3E%3Cpath d='M5.5 12h1M8.5 12h1M11.5 12h1M14.5 12h1M18 12h1.5'/%3E%3C/svg%3E");
	--ipl-i-router: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='13' width='20' height='7' rx='2'/%3E%3Cpath d='M6 16.5h.01M10 16.5h.01M7 13 5 5M17 13l2-8'/%3E%3C/svg%3E");
	--ipl-i-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h6M15 12h6'/%3E%3Crect x='9' y='8' width='6' height='8' rx='1'/%3E%3Cpath d='m2 9 2 3-2 3M22 9l-2 3 2 3'/%3E%3C/svg%3E");
	--ipl-i-converter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M7 12h6m0 0-2-2m2 2-2 2M16 12h1'/%3E%3C/svg%3E");
	--ipl-i-plug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v6M15 2v6M6 8h12v4a6 6 0 0 1-12 0zM12 18v4'/%3E%3C/svg%3E");
	--ipl-i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E");
	--ipl-i-seal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l2.4 1.7 2.9-.2.9 2.8 2.4 1.7-1 2.7 1 2.7-2.4 1.7-.9 2.8-2.9-.2L12 21.5l-2.4-1.7-2.9.2-.9-2.8-2.4-1.7 1-2.7-1-2.7 2.4-1.7.9-2.8 2.9.2z'/%3E%3Cpath d='m8.5 12 2.4 2.4 4.6-4.8'/%3E%3C/svg%3E");
	--ipl-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	--ipl-i-headset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
	--ipl-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");

	/* Tile icons (drawn in brand blue / white). */
	--ipl-b-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231668D9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	--ipl-b-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231668D9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E");
	--ipl-b-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231668D9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E");
	--ipl-b-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231668D9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.18 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.1 9.9a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--ipl-b-pin-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--ipl-b-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

	--ipl-card-radius: 18px;
	--ipl-tint: #EAF2FD;
	--ipl-surface: #EDF1F6;
	--ipl-line: #DDE3EA;
	--ipl-on-dark: #C9D2DC;
	--ipl-on-dark-accent: #9CC3FF;

	position: relative;
	padding-block: clamp(44px, 6vw, 88px);
	scroll-margin-block-start: 88px;
	color: var(--ipl-black, #111418);
}

/*
 * WoodMart gives content elements and every block a bottom margin (--wd-block-spacing, 20px).
 * Between full-width bands that shows as a white strip, so sections and their inner groups
 * are reset here; spacing inside sections comes from gap.
 */
.ipl-section.wp-block-group,
.ipl-section :is(p, h1, h2, h3, h4, ul, ol, figure, .wp-block-group, .wp-block-buttons, .wp-block-image) {
	margin-block: 0;
}

.ipl-section :is(p, h1, h2, h3, h4, ul, ol, figure) {
	margin-inline: 0;
}

.ipl-section :is(h1, h2, h3, h4) {
	color: var(--ipl-navy, #0E1B2A);
	font-family: var(--ipl-font);
	letter-spacing: normal;
	text-transform: none;
}

.ipl-section .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Below-the-fold sections skip rendering work until they approach the viewport. */
.ipl-section:is(.ipl-dealers, .ipl-hub, .ipl-support) {
	content-visibility: auto;
	contain-intrinsic-size: auto 700px;
}

/* ─── Section heading block ───────────────────────────────────────── */

.ipl-section .ipl-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 40px;
	margin-block-end: clamp(24px, 3.5vw, 44px);
}

.ipl-section .ipl-section-head__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	max-inline-size: 680px;
}

.ipl-section .ipl-section-head__title {
	font-size: clamp(24px, 1.8vw + 16px, 40px);
	font-weight: 800;
	line-height: 1.45;
}

.ipl-section .ipl-section-head__lead {
	color: var(--ipl-gray-text, #4B5563);
	font-size: clamp(14.5px, 0.3vw + 13.5px, 17px);
	line-height: 1.9;
}

/* The eyebrow rule draws in when its heading scrolls into view. */
.ipl-section .ipl-reveal .ipl-eyebrow::before {
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}

[dir="rtl"] .ipl-section .ipl-reveal .ipl-eyebrow::before {
	transform-origin: 100% 50%;
}

.ipl-section .ipl-reveal.is-revealed .ipl-eyebrow::before {
	transform: scaleX(1);
}

/* ─── Shared card surface ─────────────────────────────────────────── */

.ipl-section :is(.ipl-cat-card, .ipl-product-card, .ipl-post-card, .ipl-support__item) {
	position: relative;
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	border: 1px solid var(--ipl-line);
	border-radius: var(--ipl-card-radius);
	background-color: var(--ipl-white, #FFFFFF);
	box-shadow: 0 1px 2px rgba(14, 27, 42, 0.06);
	isolation: isolate;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Lift shadow, faded with opacity instead of animating box-shadow. */
.ipl-section :is(.ipl-cat-card, .ipl-product-card, .ipl-post-card, .ipl-support__item)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	box-shadow: 0 26px 48px -24px rgba(14, 27, 42, 0.4);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.ipl-section :is(.ipl-cat-card, .ipl-product-card, .ipl-post-card, .ipl-support__item):is(:hover, :focus-within) {
	transform: translateY(-6px);
}

.ipl-section :is(.ipl-cat-card, .ipl-product-card, .ipl-post-card, .ipl-support__item):is(:hover, :focus-within)::after {
	opacity: 1;
}

/* Pointer spotlight (position fed by home.js; fine pointers only). */
.ipl-section .ipl-spotlight::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background: radial-gradient(280px circle at var(--ipl-x, 50%) var(--ipl-y, 0), rgba(22, 104, 217, 0.12), transparent 70%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.ipl-section .ipl-spotlight:hover::before {
	opacity: 1;
}

/* The whole card is clickable through its title link; the focus ring goes on the card. */
.ipl-section :is(.ipl-cat-card__title, .ipl-product-card__title, .ipl-post-card__title, .ipl-support__title) a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: var(--ipl-card-radius);
}

.ipl-section :is(.ipl-cat-card, .ipl-product-card, .ipl-post-card, .ipl-support__item):has(a:focus-visible) {
	outline: 2px solid var(--ipl-blue, #1668D9);
	outline-offset: 3px;
}

/* Forward arrow used by card links and the calculator button. */
.ipl-section :is(.ipl-term-count, .ipl-product-card__link, .ipl-poe-calc__cta)::after {
	content: "";
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	background-color: currentColor;
	mask: var(--ipl-i-arrow) center / contain no-repeat;
	transition: transform 0.25s ease;
}

[dir="rtl"] .ipl-section :is(.ipl-term-count, .ipl-product-card__link, .ipl-poe-calc__cta)::after {
	transform: scaleX(-1);
}

[dir="rtl"] .ipl-section :is(.ipl-cat-card:hover .ipl-term-count, .ipl-product-card:hover .ipl-product-card__link, .ipl-poe-calc__cta:hover)::after {
	transform: translateX(-5px) scaleX(-1);
}

/* «به‌زودی» is a status, not a destination: no arrow. */
.ipl-section .ipl-term-count--soon::after {
	content: none;
}

/* Light product stage shared by the hero and category cards. */
.ipl-section :is(.ipl-hero__visual, .ipl-term-image) {
	--ipl-accent: 22, 104, 217;
	background:
		radial-gradient(65% 70% at 50% 45%, rgba(var(--ipl-accent), 0.16), transparent 70%),
		linear-gradient(160deg, #FFFFFF 0%, #E9EEF5 100%);
}

/* ─── 1. Hero slider ──────────────────────────────────────────────── */

.ipl-section.ipl-hero {
	padding-block: clamp(16px, 2.5vw, 36px) clamp(24px, 3vw, 44px);
	overflow: clip;
	background: linear-gradient(180deg, #EAF1FB 0%, #F6F9FD 60%, #FFFFFF 100%);
	isolation: isolate;
}

/* Two slow-drifting colour fields behind the slider. */
.ipl-hero::before,
.ipl-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.ipl-hero::before {
	inset-block-start: -220px;
	inset-inline-end: -160px;
	inline-size: 620px;
	block-size: 620px;
	background: radial-gradient(circle, rgba(22, 104, 217, 0.18), transparent 65%);
	animation: ipl-float 16s ease-in-out infinite;
}

.ipl-hero::after {
	inset-block-end: -260px;
	inset-inline-start: -180px;
	inline-size: 560px;
	block-size: 560px;
	background: radial-gradient(circle, rgba(16, 185, 129, 0.12), transparent 65%);
	animation: ipl-float 20s ease-in-out infinite reverse;
}

.ipl-hero .ipl-hero__inner {
	position: relative;
	overflow: hidden;
}

.ipl-hero .ipl-hero__track {
	display: grid;
	gap: 56px;
}

.ipl-hero .ipl-hero__slide {
	display: grid;
	align-items: center;
	gap: 28px;
}

.ipl-hero .ipl-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.ipl-hero .ipl-hero__title {
	font-size: clamp(28px, 2.8vw + 14px, 54px);
	font-weight: 900;
	line-height: 1.32;
}

.ipl-hero .ipl-hero__title bdo {
	background: linear-gradient(90deg, var(--ipl-blue, #1668D9), var(--ipl-blue-hover, #1150AF));
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--ipl-blue-hover, #1150AF);
	-webkit-text-fill-color: transparent;
}

.ipl-hero .ipl-hero__lead {
	max-inline-size: 34em;
	color: var(--ipl-navy-soft, #1B3A5C);
	font-size: clamp(15px, 0.45vw + 13.5px, 19px);
	line-height: 1.9;
}

.ipl-hero .ipl-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	padding: 0;
	list-style: none;
}

.ipl-hero .ipl-hero__points li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--ipl-navy, #0E1B2A);
	font-size: 14px;
	font-weight: 600;
}

.ipl-hero .ipl-hero__points li::before {
	content: "";
	flex: none;
	inline-size: 18px;
	block-size: 18px;
	border-radius: 50%;
	background: var(--ipl-green, #15803D) var(--ipl-b-check-white) center / 11px no-repeat;
}

.ipl-hero .ipl-hero__actions {
	margin-block-start: 10px;
}

/* The product stage: light, never dark — every IPLink device is black. */
.ipl-hero .ipl-hero__visual {
	position: relative;
	border: 1px solid var(--ipl-line);
	border-radius: 28px;
	box-shadow: 0 40px 70px -48px rgba(14, 27, 42, 0.55);
	isolation: isolate;
}

.ipl-hero .ipl-hero__slide:nth-child(2) .ipl-hero__visual {
	--ipl-accent: 16, 185, 129;
}

/* Fine grid on the stage, fading towards the edges. */
.ipl-hero .ipl-hero__visual::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-image:
		linear-gradient(rgba(14, 27, 42, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(14, 27, 42, 0.06) 1px, transparent 1px);
	background-size: 36px 36px;
	mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
}

/* A link LED pulsing on the stage. */
.ipl-hero .ipl-hero__visual::after {
	content: "";
	position: absolute;
	inset-block-start: 22px;
	inset-inline-end: 22px;
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	background-color: #22C55E;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
	animation: ipl-led 2.4s ease-out infinite;
}

.ipl-hero .ipl-hero__media {
	aspect-ratio: 4 / 3;
	margin: 0;
	overflow: hidden;
	border-radius: inherit;
}

.ipl-hero .ipl-hero__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	/* Blends the photo's light backdrop into the stage; the black product is unchanged. */
	mix-blend-mode: multiply;
	translate: calc(var(--ipl-px, 0) * -16px) calc(var(--ipl-py, 0) * -12px);
	transition: translate 0.5s ease-out;
}

/* Floating spec badges over the stage. */
.ipl-hero .ipl-hero__badge {
	--ipl-icon: var(--ipl-i-switch);
	position: absolute;
	z-index: 2;
	display: grid;
	grid-template-columns: 38px auto;
	align-items: center;
	column-gap: 10px;
	max-inline-size: 230px;
	padding-block: 9px;
	padding-inline: 9px 16px;
	border: 1px solid var(--ipl-line);
	border-radius: 16px;
	background-color: rgba(255, 255, 255, 0.94);
	box-shadow: 0 20px 40px -20px rgba(14, 27, 42, 0.45);
	color: var(--ipl-gray-text, #4B5563);
	font-size: 13px;
	line-height: 1.5;
	translate: calc(var(--ipl-px, 0) * 20px) calc(var(--ipl-py, 0) * 16px);
	transition: translate 0.5s ease-out;
	animation: ipl-bob 5s ease-in-out infinite;
}

.ipl-hero .ipl-hero__badge::before,
.ipl-hero .ipl-hero__badge::after {
	content: "";
	grid-row: 1 / span 2;
	grid-column: 1;
}

.ipl-hero .ipl-hero__badge::before {
	inline-size: 38px;
	block-size: 38px;
	border-radius: 11px;
	background-color: var(--ipl-tint);
}

.ipl-hero .ipl-hero__badge::after {
	place-self: center;
	inline-size: 20px;
	block-size: 20px;
	background-color: var(--ipl-blue, #1668D9);
	mask: var(--ipl-icon) center / contain no-repeat;
}

.ipl-hero .ipl-hero__badge strong {
	grid-column: 2;
	display: block;
	color: var(--ipl-navy, #0E1B2A);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.4;
}

.ipl-hero .ipl-hero__media + .ipl-hero__badge {
	inset-block-start: 14%;
	inset-inline-start: -20px;
}

.ipl-hero .ipl-hero__badge + .ipl-hero__badge {
	inset-block-end: 12%;
	inset-inline-end: -20px;
	animation-delay: -2.5s;
}

.ipl-hero .ipl-hero__badge--uplink { --ipl-icon: var(--ipl-i-fiber); }
.ipl-hero .ipl-hero__badge--power { --ipl-icon: var(--ipl-i-bolt); }
.ipl-hero .ipl-hero__badge--cable { --ipl-icon: var(--ipl-i-plug); }

@media (min-width: 769px) {
	.ipl-hero .ipl-hero__slide {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: 48px;
	}
}

@media (min-width: 1025px) {
	.ipl-hero .ipl-hero__slide {
		gap: 72px;
		min-block-size: 500px;
	}
}

/* Slider layout (JS present). Space for the controls is reserved up front: no layout shift. */
.ipl-js .ipl-hero .ipl-hero__inner {
	padding-block-end: 84px;
}

.ipl-js .ipl-hero .ipl-hero__track {
	--ipl-dir: -1;
	display: flex;
	gap: 0;
	margin-inline: -15px;
	transform: translateX(calc(var(--ipl-slide, 0) * 100% * var(--ipl-dir)));
	transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.ipl-js[dir="rtl"] .ipl-hero .ipl-hero__track {
	--ipl-dir: 1;
}

.ipl-js .ipl-hero .ipl-hero__slide {
	flex: 0 0 100%;
	min-inline-size: 0;
	padding-block: 24px;
	padding-inline: 35px;
	transition: opacity 0.9s ease;
}

.ipl-js .ipl-hero .ipl-hero__slide + .ipl-hero__slide,
.ipl-hero.ipl-hero--slider .ipl-hero__slide {
	opacity: 0;
}

.ipl-hero.ipl-hero--slider .ipl-hero__slide.is-active {
	opacity: 1;
}

/* Slide change (never the first paint: the LCP image must appear at once). */
.ipl-hero.ipl-hero--animate .ipl-hero__slide.is-active .ipl-hero__content > * {
	animation: ipl-rise 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.ipl-hero.ipl-hero--animate .ipl-hero__slide.is-active .ipl-hero__content > :nth-child(2) { animation-delay: 80ms; }
.ipl-hero.ipl-hero--animate .ipl-hero__slide.is-active .ipl-hero__content > :nth-child(3) { animation-delay: 160ms; }
.ipl-hero.ipl-hero--animate .ipl-hero__slide.is-active .ipl-hero__content > :nth-child(4) { animation-delay: 240ms; }
.ipl-hero.ipl-hero--animate .ipl-hero__slide.is-active .ipl-hero__content > :nth-child(5) { animation-delay: 320ms; }

.ipl-hero.ipl-hero--animate .ipl-hero__slide.is-active .ipl-hero__visual {
	animation: ipl-stage-in 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.ipl-hero.ipl-hero--animate .ipl-hero__slide.is-active .ipl-hero__badge {
	animation:
		ipl-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both,
		ipl-bob 5s ease-in-out 1.1s infinite;
}

.ipl-hero.ipl-hero--animate .ipl-hero__slide.is-active .ipl-hero__badge + .ipl-hero__badge {
	animation-delay: 0.6s, 1.3s;
}

/* Controls: labelled progress tabs, then pause and previous/next. */
.ipl-hero .ipl-hero__controls {
	position: absolute;
	inset-block-end: 6px;
	inset-inline: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ipl-hero .ipl-hero__controls button {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ipl-navy, #0E1B2A);
	font-family: var(--ipl-font);
	text-transform: none;
	cursor: pointer;
}

.ipl-hero .ipl-hero__dots {
	display: flex;
	flex: 1 1 auto;
	gap: 14px;
	max-inline-size: 560px;
}

.ipl-hero .ipl-hero__controls .ipl-hero__dot {
	display: grid;
	flex: 1 1 0;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 10px 8px;
	min-inline-size: 0;
	padding-block: 8px;
	color: var(--ipl-gray-text, #4B5563);
	text-align: start;
}

/* Track 2px, fill 4px: the active tab is told apart by thickness and bold text, not by colour alone. */
.ipl-hero .ipl-hero__dot-bar {
	position: relative;
	grid-column: 1 / -1;
	display: block;
	block-size: 4px;
}

.ipl-hero .ipl-hero__dot-bar::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 1px;
	block-size: 2px;
	border-radius: 2px;
	background-color: #8792A2;
}

.ipl-hero .ipl-hero__dot-fill {
	position: absolute;
	inset: 0;
	border-radius: 4px;
	background-color: var(--ipl-blue, #1668D9);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

[dir="rtl"] .ipl-hero .ipl-hero__dot-fill {
	transform-origin: 100% 50%;
}

.ipl-hero .ipl-hero__dot-num {
	font-size: 12px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.ipl-hero .ipl-hero__dot-label {
	overflow: hidden;
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ipl-hero .ipl-hero__controls .ipl-hero__dot:is(.is-active, :hover) {
	color: var(--ipl-navy, #0E1B2A);
}

.ipl-hero .ipl-hero__dot.is-active .ipl-hero__dot-label {
	font-weight: 800;
}

/* The active bar fills over the slide duration; its animationend advances the slider. */
.ipl-hero .ipl-hero__dot.is-active .ipl-hero__dot-fill {
	animation: ipl-progress 7s linear both;
	animation-play-state: paused;
}

.ipl-hero.is-playing .ipl-hero__dot.is-active .ipl-hero__dot-fill {
	animation-play-state: running;
}

.ipl-hero.ipl-hero--static .ipl-hero__dot.is-active .ipl-hero__dot-fill {
	animation: none;
	transform: scaleX(1);
}

.ipl-hero .ipl-hero__nav {
	display: flex;
	flex: none;
	gap: 8px;
}

.ipl-hero .ipl-hero__controls :is(.ipl-hero__arrow, .ipl-hero__toggle) {
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border: 1px solid #C3CBD6;
	border-radius: 50%;
	background-color: var(--ipl-white, #FFFFFF);
	transition: transform 0.2s ease;
}

.ipl-hero .ipl-hero__controls :is(.ipl-hero__arrow, .ipl-hero__toggle):hover {
	border-color: var(--ipl-navy, #0E1B2A);
	transform: scale(1.07);
}

.ipl-hero .ipl-hero__controls :is(.ipl-hero__arrow, .ipl-hero__toggle)::before {
	content: "";
	inline-size: 18px;
	block-size: 18px;
	background-color: currentColor;
	mask: var(--ipl-i-chevron) center / contain no-repeat;
}

.ipl-hero .ipl-hero__controls .ipl-hero__toggle::before {
	inline-size: 16px;
	block-size: 16px;
	mask-image: var(--ipl-i-pause);
}

.ipl-hero .ipl-hero__controls .ipl-hero__toggle.is-paused::before {
	mask-image: var(--ipl-i-play);
}

/* Previous points back, next points forward — mirrored in RTL. */
.ipl-hero .ipl-hero__controls .ipl-hero__arrow--prev::before {
	transform: scaleX(-1);
}

[dir="rtl"] .ipl-hero .ipl-hero__controls .ipl-hero__arrow--prev::before {
	transform: none;
}

[dir="rtl"] .ipl-hero .ipl-hero__controls .ipl-hero__arrow--next::before {
	transform: scaleX(-1);
}

/* Hero on tablets and phones: stage first is not needed; compact content instead. */
@media (max-width: 768.98px) {
	.ipl-hero .ipl-hero__controls .ipl-hero__arrow {
		display: none;
	}

	.ipl-js .ipl-hero .ipl-hero__inner {
		padding-block-end: 64px;
	}

	.ipl-js .ipl-hero .ipl-hero__slide {
		padding-inline: 15px;
	}

	/* Stacked layout: keep the stage a comfortable size instead of the full tablet width. */
	.ipl-hero .ipl-hero__visual {
		inline-size: 100%;
		max-inline-size: 540px;
		margin-inline: auto;
	}

	.ipl-hero .ipl-hero__badge {
		max-inline-size: 170px;
		padding-block: 6px;
		padding-inline: 6px 10px;
		grid-template-columns: 30px auto;
		column-gap: 8px;
		border-radius: 12px;
		font-size: 11.5px;
	}

	.ipl-hero .ipl-hero__badge::before {
		inline-size: 30px;
		block-size: 30px;
		border-radius: 9px;
	}

	.ipl-hero .ipl-hero__badge::after {
		inline-size: 16px;
		block-size: 16px;
	}

	.ipl-hero .ipl-hero__badge strong {
		font-size: 13px;
	}

	.ipl-hero .ipl-hero__media + .ipl-hero__badge {
		inset-block-start: 10px;
		inset-inline-start: 10px;
	}

	.ipl-hero .ipl-hero__badge + .ipl-hero__badge {
		inset-block-end: 10px;
		inset-inline-end: 10px;
	}
}

@media (max-width: 575.98px) {
	.ipl-hero .ipl-hero__points,
	.ipl-hero .ipl-hero__dot-label {
		display: none;
	}

	.ipl-hero .ipl-hero__content {
		gap: 12px;
	}

	.ipl-hero .ipl-hero__actions {
		flex-wrap: nowrap;
		gap: 8px;
		margin-block-start: 4px;
	}

	.ipl-hero .ipl-hero__actions .wp-block-button {
		flex: 1 1 auto;
	}

	.ipl-hero .ipl-hero__actions .wp-block-button__link {
		inline-size: 100%;
		min-block-size: 46px;
		padding-inline: 10px;
		font-size: 14px;
	}

	.ipl-hero .ipl-hero__dots {
		max-inline-size: 180px;
	}
}

/* ─── 2. Trust bar (navy band) ────────────────────────────────────── */

.ipl-section.ipl-trust {
	--wd-otl-color: var(--ipl-white, #FFFFFF);
	padding-block: 0;
	background-color: var(--ipl-navy, #0E1B2A);
	color: var(--ipl-on-dark);
}

.ipl-trust .ipl-trust__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 12px;
}

.ipl-trust .ipl-trust__item {
	--ipl-icon: var(--ipl-i-seal);
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-content: center;
	column-gap: 12px;
	padding-block: 16px;
}

.ipl-trust .ipl-trust__item::before,
.ipl-trust .ipl-trust__item::after {
	content: "";
	grid-row: 1 / span 2;
	grid-column: 1;
	align-self: center;
}

.ipl-trust .ipl-trust__item::before {
	inline-size: 44px;
	block-size: 44px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.06);
}

.ipl-trust .ipl-trust__item::after {
	justify-self: center;
	inline-size: 22px;
	block-size: 22px;
	background-color: var(--ipl-on-dark-accent);
	mask: var(--ipl-icon) center / contain no-repeat;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ipl-trust .ipl-trust__item:hover::after {
	transform: rotate(-10deg) scale(1.15);
}

.ipl-trust .ipl-trust__item--warranty { --ipl-icon: var(--ipl-i-shield); }
.ipl-trust .ipl-trust__item--support { --ipl-icon: var(--ipl-i-headset); }
.ipl-trust .ipl-trust__item--dealers { --ipl-icon: var(--ipl-i-pin); }

.ipl-trust .ipl-trust__label {
	align-self: end;
	color: var(--ipl-white, #FFFFFF);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

.ipl-trust .ipl-trust__text {
	align-self: start;
	color: var(--ipl-on-dark);
	font-size: 13px;
	line-height: 1.7;
}

@media (max-width: 575.98px) {
	.ipl-trust .ipl-trust__text {
		display: none;
	}

	.ipl-trust .ipl-trust__label {
		align-self: center;
		grid-row: 1 / span 2;
		font-size: 13px;
		line-height: 1.5;
	}

	.ipl-trust .ipl-trust__item {
		grid-template-columns: 38px minmax(0, 1fr);
		column-gap: 10px;
		padding-block: 12px;
	}

	.ipl-trust .ipl-trust__item::before {
		inline-size: 38px;
		block-size: 38px;
	}
}

@media (min-width: 1025px) {
	.ipl-trust .ipl-trust__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 0;
	}

	.ipl-trust .ipl-trust__item {
		padding-block: 22px;
		padding-inline: 22px;
	}

	.ipl-trust .ipl-trust__item + .ipl-trust__item {
		border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
	}

	.ipl-trust .ipl-trust__item:first-child {
		padding-inline-start: 0;
	}
}

/* ─── 3. Product categories (white) ───────────────────────────────── */

.ipl-section.ipl-cats {
	background-color: var(--ipl-white, #FFFFFF);
}

.ipl-cats .wp-block-term-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ipl-gap, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ipl-cats .wp-block-term-template > li {
	display: flex;
	margin: 0;
}

.ipl-section .ipl-term-image {
	--ipl-icon: var(--ipl-i-switch);
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	margin: 0;
	overflow: hidden;
	border-start-start-radius: calc(var(--ipl-card-radius, 18px) - 1px);
	border-start-end-radius: calc(var(--ipl-card-radius, 18px) - 1px);
}

/* Pinned to the stage so any image shape (square icons, wide photos) fits the 16:10 box instead of overflowing it. */
.ipl-section .ipl-term-image__img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	padding: 18px;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ipl-section .ipl-term-image__icon {
	inline-size: 96px;
	block-size: 96px;
	background: linear-gradient(135deg, var(--ipl-navy, #0E1B2A), var(--ipl-blue, #1668D9));
	mask: var(--ipl-icon) center / contain no-repeat;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ipl-section .ipl-term-image--routers { --ipl-icon: var(--ipl-i-router); }
.ipl-section .ipl-term-image--sfp-fiber { --ipl-icon: var(--ipl-i-fiber); }
.ipl-section .ipl-term-image--media-converters { --ipl-icon: var(--ipl-i-converter); }
.ipl-section .ipl-term-image--accessories { --ipl-icon: var(--ipl-i-plug); }

.ipl-cats .ipl-cat-card:hover :is(.ipl-term-image__img, .ipl-term-image__icon) {
	transform: scale(1.08) rotate(-2deg);
}

.ipl-cats .ipl-cat-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding-block: 18px 20px;
	padding-inline: 22px;
}

.ipl-cats .ipl-cat-card__title {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.5;
}

.ipl-cats .ipl-cat-card__title a {
	color: var(--ipl-navy, #0E1B2A);
	text-decoration: none;
}

.ipl-cats .ipl-cat-card__desc {
	display: -webkit-box;
	overflow: hidden;
	color: var(--ipl-gray-text, #4B5563);
	font-size: 14px;
	line-height: 1.85;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ipl-cats .ipl-cat-card__desc p {
	margin: 0;
}

.ipl-section .ipl-term-count {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-start: auto;
	padding-block-start: 6px;
	color: var(--ipl-blue-hover, #1150AF);
	font-size: 14px;
	font-weight: 700;
}

.ipl-section .ipl-term-count--soon {
	color: var(--ipl-gray-text, #4B5563);
}

@media (min-width: 1025px) {
	.ipl-cats .wp-block-term-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ─── 4. Switch selector (dark band) ──────────────────────────────── */

.ipl-section.ipl-selector {
	--wd-otl-color: var(--ipl-white, #FFFFFF);
	overflow: clip;
	background:
		radial-gradient(55% 70% at 85% 0%, rgba(22, 104, 217, 0.4), transparent 60%),
		linear-gradient(180deg, var(--ipl-navy, #0E1B2A) 0%, #13304F 100%);
	color: var(--ipl-on-dark);
	isolation: isolate;
}

.ipl-selector .ipl-eyebrow {
	color: var(--ipl-on-dark-accent);
}

.ipl-selector .ipl-section-head__title {
	color: var(--ipl-white, #FFFFFF);
}

.ipl-selector .ipl-section-head__lead {
	color: var(--ipl-on-dark);
}

.ipl-selector .ipl-selector__panels {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ipl-gap, 24px);
}

.ipl-selector .ipl-selector__panel {
	--ipl-icon: var(--ipl-i-home);
	--wd-otl-color: var(--ipl-blue, #1668D9);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow: hidden;
	padding: 24px;
	border-radius: var(--ipl-card-radius);
	background-color: var(--ipl-white, #FFFFFF);
	color: var(--ipl-black, #111418);
	isolation: isolate;
}

/* Scenario icon as a watermark tucked into the corner. */
.ipl-selector .ipl-selector__panel::after {
	content: "";
	position: absolute;
	inset-block-end: -40px;
	inset-inline-end: -30px;
	z-index: -1;
	inline-size: 170px;
	block-size: 170px;
	background-color: var(--ipl-blue, #1668D9);
	opacity: 0.07;
	mask: var(--ipl-icon) center / contain no-repeat;
}

.ipl-selector :is(.ipl-selector__panel--business, .ipl-selector__tab--business) { --ipl-icon: var(--ipl-i-business); }
.ipl-selector :is(.ipl-selector__panel--cctv, .ipl-selector__tab--cctv) { --ipl-icon: var(--ipl-i-cctv); }
.ipl-selector :is(.ipl-selector__panel--enterprise, .ipl-selector__tab--enterprise) { --ipl-icon: var(--ipl-i-enterprise); }

.ipl-selector .ipl-selector__title {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.5;
}

.ipl-selector .ipl-selector__text {
	color: var(--ipl-navy-soft, #1B3A5C);
	font-size: 15px;
	line-height: 1.9;
}

.ipl-selector .ipl-selector__needs-title {
	margin-block-start: 4px;
	color: var(--ipl-gray-text, #4B5563);
	font-size: 13px;
	font-weight: 700;
}

.ipl-selector .ipl-selector__needs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	list-style: none;
}

.ipl-selector .ipl-selector__needs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding-block: 4px;
	padding-inline: 10px 12px;
	border-radius: 999px;
	background-color: var(--ipl-tint);
	color: var(--ipl-navy, #0E1B2A);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.6;
}

.ipl-selector .ipl-selector__needs li::before {
	content: "";
	flex: none;
	inline-size: 12px;
	block-size: 12px;
	background-color: var(--ipl-blue-hover, #1150AF);
	mask: var(--ipl-i-check) center / contain no-repeat;
}

.ipl-selector .ipl-selector__actions {
	margin-block-start: auto;
	padding-block-start: 10px;
}

@media (min-width: 769px) {
	.ipl-selector .ipl-selector__panels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tabs (JS present). */
.ipl-js .ipl-selector .ipl-selector__stage {
	display: grid;
	gap: 16px;
}

.ipl-selector .ipl-selector__tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	margin-inline: -15px;
	padding-block: 4px 8px;
	padding-inline: 15px;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.ipl-selector .ipl-selector__tab {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
	min-block-size: 58px;
	margin: 0;
	padding-block: 8px;
	padding-inline: 8px 18px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 14px;
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--ipl-white, #FFFFFF);
	font-family: var(--ipl-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	text-align: start;
	text-transform: none;
	cursor: pointer;
	scroll-snap-align: start;
	transition: transform 0.2s ease;
}

.ipl-selector .ipl-selector__tab:hover {
	transform: translateY(-2px);
}

/* Selected: filled white tile plus a blue bar — shape and fill, not hue alone. */
.ipl-selector .ipl-selector__tab[aria-selected="true"] {
	border-color: var(--ipl-white, #FFFFFF);
	background-color: var(--ipl-white, #FFFFFF);
	color: var(--ipl-navy, #0E1B2A);
	--wd-otl-color: var(--ipl-white, #FFFFFF);
}

.ipl-selector .ipl-selector__tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	inset-inline: 16px;
	inset-block-end: -1px;
	block-size: 4px;
	border-start-start-radius: 4px;
	border-start-end-radius: 4px;
	background-color: var(--ipl-blue, #1668D9);
}

.ipl-selector .ipl-selector__tab-icon {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 42px;
	block-size: 42px;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.08);
}

.ipl-selector .ipl-selector__tab-icon::before {
	content: "";
	inline-size: 22px;
	block-size: 22px;
	background-color: var(--ipl-on-dark-accent);
	mask: var(--ipl-icon, var(--ipl-i-home)) center / contain no-repeat;
}

.ipl-selector .ipl-selector__tab[aria-selected="true"] .ipl-selector__tab-icon {
	background-color: var(--ipl-tint);
}

.ipl-selector .ipl-selector__tab[aria-selected="true"] .ipl-selector__tab-icon::before {
	background-color: var(--ipl-blue, #1668D9);
}

/* The active panel sits in a 2px frame with a light sweeping round it. */
.ipl-js .ipl-selector.ipl-selector--tabs .ipl-selector__panels {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 2px;
	border-radius: calc(var(--ipl-card-radius, 18px) + 2px);
	background-color: rgba(255, 255, 255, 0.14);
	isolation: isolate;
}

.ipl-selector.ipl-selector--tabs .ipl-selector__panels::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	z-index: -1;
	inline-size: 1400px;
	block-size: 1400px;
	margin-block-start: -700px;
	margin-inline-start: -700px;
	background: conic-gradient(from 0deg, transparent 0 62%, rgba(22, 104, 217, 0.9) 78%, #9CC3FF 88%, transparent 100%);
	animation: ipl-spin 7s linear infinite;
}

.ipl-selector.ipl-selector--tabs .ipl-selector__panel {
	gap: 16px;
	padding: clamp(22px, 3vw, 44px);
}

.ipl-selector.ipl-selector--tabs .ipl-selector__panel:not([hidden]) {
	animation: ipl-panel-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.ipl-selector .ipl-selector__panel[hidden] {
	display: none;
}

.ipl-selector.ipl-selector--tabs .ipl-selector__title {
	font-size: clamp(21px, 1vw + 16px, 28px);
}

@media (min-width: 1025px) {
	.ipl-js .ipl-selector .ipl-selector__stage {
		grid-template-columns: 320px minmax(0, 1fr);
		align-items: start;
		gap: 24px;
	}

	.ipl-selector .ipl-selector__tabs {
		flex-direction: column;
		overflow: visible;
		margin-inline: 0;
		padding: 0;
	}

	.ipl-selector .ipl-selector__tab {
		min-block-size: 72px;
	}

	.ipl-selector .ipl-selector__tab[aria-selected="true"]::after {
		inset-inline: auto -1px;
		inset-block: 16px;
		inline-size: 4px;
		block-size: auto;
		border-radius: 0;
		border-start-start-radius: 4px;
		border-end-start-radius: 4px;
	}

	.ipl-selector.ipl-selector--tabs .ipl-selector__panel {
		min-block-size: 330px;
	}

	.ipl-selector.ipl-selector--tabs .ipl-selector__panel::after {
		inline-size: 210px;
		block-size: 210px;
	}
}

/* ─── 5. Featured products (light gray) ───────────────────────────── */

.ipl-section.ipl-featured {
	background-color: var(--ipl-surface);
}

.ipl-featured .wc-block-product-template.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ipl-gap, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ipl-featured .wc-block-product-template > .wc-block-product {
	display: flex;
	inline-size: auto;
	max-inline-size: none;
	margin: 0;
}

.ipl-featured .ipl-product-card__media {
	margin: 0;
	overflow: hidden;
	border-start-start-radius: calc(var(--ipl-card-radius, 18px) - 1px);
	border-start-end-radius: calc(var(--ipl-card-radius, 18px) - 1px);
	background: linear-gradient(160deg, #FFFFFF 0%, #E9EEF5 100%);
}

.ipl-featured .ipl-product-card__media img {
	inline-size: 100%;
	padding: 18px;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ipl-featured .ipl-product-card:hover .ipl-product-card__media img {
	transform: scale(1.06);
}

.ipl-featured .ipl-product-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding-block: 16px 20px;
	padding-inline: 20px;
}

.ipl-featured .ipl-product-card__model {
	align-self: flex-start;
	margin: 0;
	color: var(--ipl-gray-text, #4B5563);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
}

.ipl-featured .ipl-product-card__title {
	font-size: 16.5px;
	font-weight: 800;
	line-height: 1.6;
}

.ipl-featured .ipl-product-card__title a {
	color: var(--ipl-navy, #0E1B2A);
	text-decoration: none;
}

.ipl-featured .ipl-product-card__desc {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	color: var(--ipl-gray-text, #4B5563);
	font-size: 13.5px;
	line-height: 1.8;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ipl-featured .ipl-product-card__desc p {
	margin: 0;
}

.ipl-featured .ipl-product-card__link {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	margin-block-start: auto;
	padding-block-start: 10px;
	color: var(--ipl-blue-hover, #1150AF);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.ipl-featured .ipl-featured__empty {
	padding: 28px;
	border: 1px dashed #AEB8C5;
	border-radius: var(--ipl-card-radius);
	background-color: var(--ipl-white, #FFFFFF);
	color: var(--ipl-navy-soft, #1B3A5C);
	text-align: center;
}

@media (min-width: 1025px) {
	.ipl-featured .wc-block-product-template.wc-block-product-template {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ─── 6. PoE calculator (white) ───────────────────────────────────── */

.ipl-section.ipl-poe {
	background-color: var(--ipl-white, #FFFFFF);
}

.ipl-poe .ipl-poe-calc__form {
	display: grid;
	gap: var(--ipl-gap, 24px);
}

.ipl-poe .ipl-poe-calc__devices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
	gap: 12px;
	min-inline-size: 0;
	margin: 0;
	padding: clamp(14px, 2.5vw, 32px);
	border: 1px solid var(--ipl-line);
	border-radius: var(--ipl-card-radius);
	background-color: var(--ipl-surface);
}

/* A floated legend stops being drawn on the fieldset border and becomes a normal grid item. */
.ipl-poe .ipl-poe-calc__legend {
	float: inline-start;
	grid-column: 1 / -1;
	inline-size: 100%;
	margin-block-end: 4px;
	padding: 0;
	color: var(--ipl-navy, #0E1B2A);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.6;
}

.ipl-poe .ipl-poe-calc__field {
	display: grid;
	grid-template-areas:
		"label stepper"
		"hint stepper";
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2px 12px;
	padding-block: 12px;
	padding-inline: 16px;
	border: 1px solid var(--ipl-line);
	border-radius: 14px;
	background-color: var(--ipl-white, #FFFFFF);
}

.ipl-poe .ipl-poe-calc__label {
	grid-area: label;
	color: var(--ipl-navy, #0E1B2A);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
}

.ipl-poe .ipl-poe-calc__hint {
	grid-area: hint;
	color: var(--ipl-gray-text, #4B5563);
	font-size: 12.5px;
	line-height: 1.6;
}

.ipl-poe .ipl-poe-calc__stepper {
	display: flex;
	grid-area: stepper;
	align-items: center;
	overflow: hidden;
	border: 1px solid #C3CBD6;
	border-radius: 10px;
	background-color: var(--ipl-white, #FFFFFF);
}

.ipl-poe .ipl-poe-calc__step {
	flex: none;
	inline-size: 40px;
	block-size: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: var(--ipl-surface);
	color: var(--ipl-navy, #0E1B2A);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.15s ease;
}

.ipl-poe .ipl-poe-calc__step:active {
	transform: scale(0.88);
}

.ipl-poe .ipl-poe-calc__stepper .ipl-poe-calc__input[type="number"] {
	inline-size: 52px;
	block-size: 44px;
	min-block-size: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: var(--ipl-white, #FFFFFF);
	color: var(--ipl-navy, #0E1B2A);
	font-size: 17px;
	font-weight: 800;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

/* WoodMart's focus ring covers links and buttons but not number inputs. */
.ipl-poe .ipl-poe-calc__stepper .ipl-poe-calc__input[type="number"]:focus-visible {
	outline: 2px solid var(--ipl-blue, #1668D9);
	outline-offset: -2px;
}

.ipl-poe .ipl-poe-calc__input::-webkit-inner-spin-button,
.ipl-poe .ipl-poe-calc__input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* Result panel: navy, white text, a live power meter. */
.ipl-poe .ipl-poe-calc__result {
	--wd-otl-color: var(--ipl-white, #FFFFFF);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow: hidden;
	padding: clamp(20px, 3vw, 36px);
	border-radius: var(--ipl-card-radius);
	background-color: var(--ipl-navy, #0E1B2A);
	color: var(--ipl-on-dark);
	isolation: isolate;
}

.ipl-poe .ipl-poe-calc__result::before {
	content: "";
	position: absolute;
	inset-block-start: -120px;
	inset-inline-end: -120px;
	z-index: -1;
	inline-size: 340px;
	block-size: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(22, 104, 217, 0.5), transparent 70%);
	animation: ipl-float 9s ease-in-out infinite;
}

.ipl-poe .ipl-poe-calc__result-title {
	color: var(--ipl-white, #FFFFFF);
	font-size: 18px;
	font-weight: 800;
}

.ipl-poe .ipl-poe-calc__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
}

.ipl-poe .ipl-poe-calc__stat {
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.04);
}

.ipl-poe .ipl-poe-calc__stat dt {
	color: var(--ipl-on-dark);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
}

.ipl-poe .ipl-poe-calc__stat dd {
	margin: 4px 0 0;
	color: var(--ipl-white, #FFFFFF);
	font-size: clamp(20px, 1.2vw + 14px, 28px);
	font-weight: 900;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}

/* Recommended switch: port count on one line, PoE budget beneath it. */
.ipl-poe .ipl-poe-calc__switch-ports {
	display: block;
}

.ipl-poe .ipl-poe-calc__switch-budget {
	color: var(--ipl-on-dark-accent);
	font-size: 0.72em;
}

.ipl-poe .ipl-poe-calc__meter {
	block-size: 10px;
	overflow: hidden;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.14);
}

.ipl-poe .ipl-poe-calc__meter-fill {
	display: block;
	block-size: 100%;
	background: linear-gradient(90deg, #22C55E, #60A5FA);
	transform-origin: 0 50%;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

[dir="rtl"] .ipl-poe .ipl-poe-calc__meter-fill {
	background: linear-gradient(270deg, #22C55E, #60A5FA);
	transform-origin: 100% 50%;
}

.ipl-poe .ipl-poe-calc.is-over .ipl-poe-calc__meter-fill {
	background: #F87171;
}

.ipl-poe .ipl-poe-calc__warning:not([hidden]) {
	display: block;
	padding-block: 10px;
	padding-inline: 12px;
	border-inline-start: 4px solid #F87171;
	border-radius: 10px;
	background-color: rgba(217, 54, 54, 0.18);
	color: #FECACA;
	font-size: 13.5px;
	line-height: 1.8;
}

.ipl-poe .ipl-poe-calc__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 10px;
	min-block-size: 48px;
	padding-inline: 22px;
	border-radius: var(--ipl-radius-sm, 6px);
	background-color: var(--ipl-white, #FFFFFF);
	color: var(--ipl-navy, #0E1B2A);
	font-weight: 800;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.ipl-poe .ipl-poe-calc__cta:hover {
	color: var(--ipl-navy, #0E1B2A);
	transform: translateY(-2px);
}

.ipl-poe .ipl-poe-calc__note {
	color: var(--ipl-on-dark);
	font-size: 12.5px;
	line-height: 1.8;
}

/* Phones: two compact device cards per row keep the calculator short. */
@media (max-width: 575.98px) {
	.ipl-poe .ipl-poe-calc__devices {
		gap: 8px;
	}

	.ipl-poe .ipl-poe-calc__legend {
		font-size: 15px;
	}

	.ipl-poe .ipl-poe-calc__field {
		grid-template-areas:
			"label"
			"hint"
			"stepper";
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
		padding: 10px;
	}

	.ipl-poe .ipl-poe-calc__label {
		font-size: 13.5px;
		line-height: 1.5;
	}

	.ipl-poe .ipl-poe-calc__hint {
		font-size: 11.5px;
	}

	.ipl-poe .ipl-poe-calc__stepper {
		margin-block-start: 6px;
	}

	.ipl-poe .ipl-poe-calc__step {
		inline-size: 36px;
		block-size: 40px;
	}

	.ipl-poe .ipl-poe-calc__stepper .ipl-poe-calc__input[type="number"] {
		flex: 1 1 auto;
		inline-size: auto;
		min-inline-size: 0;
		block-size: 40px;
	}

	.ipl-poe .ipl-poe-calc__stats {
		gap: 8px;
	}

	.ipl-poe .ipl-poe-calc__stat {
		padding: 10px;
	}

	.ipl-poe .ipl-poe-calc__cta {
		align-self: stretch;
		justify-content: center;
	}
}

@media (min-width: 1025px) {
	.ipl-poe .ipl-poe-calc__form {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		align-items: stretch;
	}
}

/* ─── 7. Dealer network (blue gradient band) ──────────────────────── */

.ipl-section.ipl-dealers {
	--wd-otl-color: var(--ipl-white, #FFFFFF);
	overflow: clip;
	background: linear-gradient(135deg, #1150AF 0%, #0B3A7E 55%, var(--ipl-navy, #0E1B2A) 100%);
	color: #E3E6EA;
	isolation: isolate;
}

/* Dotted "map" texture and a slow drifting glow. */
.ipl-dealers::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.5px);
	background-size: 22px 22px;
	mask-image: radial-gradient(ellipse 70% 80% at 75% 50%, #000 15%, transparent 70%);
}

.ipl-dealers::after {
	content: "";
	position: absolute;
	inset-block-start: -200px;
	inset-inline-start: -160px;
	z-index: -1;
	inline-size: 560px;
	block-size: 560px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(156, 195, 255, 0.28), transparent 70%);
	animation: ipl-float 12s ease-in-out infinite;
}

.ipl-dealers .ipl-dealers__inner {
	display: grid;
	align-items: center;
	gap: 48px;
}

.ipl-dealers .ipl-dealers__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.ipl-dealers .ipl-eyebrow {
	color: #CFE0FF;
}

.ipl-dealers .ipl-dealers__title {
	color: var(--ipl-white, #FFFFFF);
	font-size: clamp(24px, 1.8vw + 16px, 40px);
	font-weight: 800;
	line-height: 1.45;
}

.ipl-dealers .ipl-dealers__lead {
	color: #E3E6EA;
	font-size: clamp(15px, 0.4vw + 13.5px, 16.5px);
	line-height: 1.95;
}

.ipl-dealers .ipl-dealers__benefits {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	list-style: none;
}

.ipl-dealers .ipl-dealers__benefits li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--ipl-white, #FFFFFF);
	font-weight: 600;
}

.ipl-dealers .ipl-dealers__benefits li::before {
	content: "";
	flex: none;
	inline-size: 26px;
	block-size: 26px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12) var(--ipl-b-check-white) center / 13px no-repeat;
}

.ipl-dealers .ipl-dealers__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	inline-size: 100%;
	margin-block-start: 8px;
	padding-block-start: 24px;
	border-block-start: 1px solid rgba(255, 255, 255, 0.22);
}

.ipl-dealers .ipl-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.ipl-dealers .ipl-stat__value {
	overflow-wrap: anywhere;
	color: var(--ipl-white, #FFFFFF);
	font-size: clamp(28px, 2vw + 16px, 44px);
	font-weight: 900;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
}

.ipl-dealers .ipl-stat__label {
	color: #DCE6F5;
	font-size: 14px;
}

.ipl-dealers .ipl-dealers__panel {
	--wd-otl-color: var(--ipl-blue, #1668D9);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: clamp(24px, 3vw, 44px);
	border-radius: 22px;
	background-color: var(--ipl-white, #FFFFFF);
	color: var(--ipl-black, #111418);
	box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.6);
}

/* Floating location badge with a signal ring. */
.ipl-dealers .ipl-dealers__panel::before,
.ipl-dealers .ipl-dealers__panel::after {
	content: "";
	position: absolute;
	inset-block-start: -28px;
	inset-inline-end: 32px;
	inline-size: 60px;
	block-size: 60px;
	border-radius: 18px;
}

.ipl-dealers .ipl-dealers__panel::before {
	z-index: 1;
	background: var(--ipl-blue, #1668D9) var(--ipl-b-pin-white) center / 28px no-repeat;
	box-shadow: 0 16px 30px -12px rgba(22, 104, 217, 0.7);
	animation: ipl-bob 3.2s ease-in-out infinite;
}

.ipl-dealers .ipl-dealers__panel::after {
	border: 2px solid rgba(22, 104, 217, 0.6);
	animation: ipl-ring 2.6s ease-out infinite;
}

.ipl-dealers .ipl-dealers__panel-title {
	padding-inline-end: 80px;
	font-size: clamp(19px, 1vw + 14px, 22px);
	font-weight: 800;
	line-height: 1.5;
}

.ipl-dealers .ipl-dealers__panel-text {
	color: var(--ipl-navy-soft, #1B3A5C);
	line-height: 1.9;
}

.ipl-dealers .ipl-dealers__actions {
	margin-block-start: 6px;
}

.ipl-dealers .ipl-dealers__note {
	padding-block-start: 14px;
	border-block-start: 1px solid var(--ipl-line);
	color: var(--ipl-gray-text, #4B5563);
	font-size: 13.5px;
	line-height: 1.8;
}

@media (min-width: 1025px) {
	.ipl-dealers .ipl-dealers__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: 72px;
	}
}

/* ─── 8. Knowledge hub (light gray) ───────────────────────────────── */

.ipl-section.ipl-hub {
	background-color: var(--ipl-surface);
}

.ipl-hub .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ipl-gap, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ipl-hub .wp-block-post-template > li {
	display: flex;
	margin: 0;
}

.ipl-hub .ipl-post-card__media {
	margin: 0;
	overflow: hidden;
	border-start-start-radius: calc(var(--ipl-card-radius, 18px) - 1px);
	border-start-end-radius: calc(var(--ipl-card-radius, 18px) - 1px);
	background-color: var(--ipl-surface);
}

.ipl-hub .ipl-post-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ipl-hub .ipl-post-card:hover .ipl-post-card__media img {
	transform: scale(1.05);
}

.ipl-hub .ipl-post-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding-block: 18px 20px;
	padding-inline: 20px;
}

.ipl-hub .ipl-post-card__cat {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12.5px;
}

.ipl-hub .ipl-post-card__cat a {
	padding-block: 2px;
	padding-inline: 10px;
	border-radius: 999px;
	background-color: var(--ipl-tint);
	color: var(--ipl-blue-hover, #1150AF);
	font-weight: 700;
	text-decoration: none;
}

.ipl-hub .ipl-post-card__title {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.6;
}

.ipl-hub .ipl-post-card__title a {
	color: var(--ipl-navy, #0E1B2A);
	text-decoration: none;
}

.ipl-hub .ipl-post-card__excerpt {
	color: var(--ipl-gray-text, #4B5563);
	font-size: 14px;
	line-height: 1.85;
}

.ipl-hub .ipl-post-card__excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

.ipl-hub .ipl-post-card__date {
	margin-block-start: auto;
	color: var(--ipl-gray-text, #4B5563);
	font-size: 13px;
}

.ipl-hub .ipl-hub__empty {
	padding: 28px;
	border: 1px dashed #AEB8C5;
	border-radius: var(--ipl-card-radius);
	background-color: var(--ipl-white, #FFFFFF);
	color: var(--ipl-navy-soft, #1B3A5C);
	text-align: center;
}

@media (min-width: 1025px) {
	.ipl-hub .wp-block-post-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ─── 9. Support strip (white) ────────────────────────────────────── */

.ipl-section.ipl-support {
	padding-block: clamp(40px, 5vw, 72px);
	background-color: var(--ipl-white, #FFFFFF);
}

.ipl-support .ipl-support__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

/* Compact row: icon tile at the start, title and one line of text beside it. */
.ipl-support .ipl-support__item {
	--ipl-tile: var(--ipl-b-download);
	gap: 2px;
	padding-block: 16px;
	padding-inline: 78px 18px;
}

.ipl-support .ipl-support__item--datasheets { --ipl-tile: var(--ipl-b-file); }
.ipl-support .ipl-support__item--warranty { --ipl-tile: var(--ipl-b-shield); }
.ipl-support .ipl-support__item--contact { --ipl-tile: var(--ipl-b-phone); }

.ipl-support .ipl-support__title {
	font-size: 16px;
	font-weight: 800;
	line-height: 1.6;
}

.ipl-support .ipl-support__title::before {
	content: "";
	position: absolute;
	inset-block-start: 16px;
	inset-inline-start: 16px;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 14px;
	background: var(--ipl-tint) var(--ipl-tile) center / 24px no-repeat;
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ipl-support .ipl-support__item:hover .ipl-support__title::before {
	transform: rotate(-8deg) scale(1.08);
}

.ipl-support .ipl-support__title a {
	color: var(--ipl-navy, #0E1B2A);
	text-decoration: none;
}

.ipl-support .ipl-support__text {
	color: var(--ipl-gray-text, #4B5563);
	font-size: 13.5px;
	line-height: 1.8;
}

/* Phones: a 2×2 grid of icon + title tiles; the one-line descriptions are left for larger screens. */
@media (max-width: 575.98px) {
	.ipl-support .ipl-support__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.ipl-support .ipl-support__item {
		padding: 14px;
	}

	.ipl-support .ipl-support__title {
		display: flex;
		flex-direction: column;
		gap: 10px;
		font-size: 14.5px;
		line-height: 1.5;
	}

	.ipl-support .ipl-support__title::before {
		position: static;
		inline-size: 42px;
		block-size: 42px;
	}

	.ipl-support .ipl-support__text {
		display: none;
	}
}

@media (min-width: 576px) {
	.ipl-support .ipl-support__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

@media (min-width: 1025px) {
	.ipl-support .ipl-support__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--ipl-gap, 24px);
	}
}

/* ─── Phones and small tablets: swipeable rows instead of tall stacks ─ */

@media (max-width: 768.98px) {
	.ipl-cats .wp-block-term-template,
	.ipl-hub .wp-block-post-template,
	.ipl-featured .wc-block-product-template.wc-block-product-template {
		grid-auto-columns: min(80%, 320px);
		grid-auto-flow: column;
		grid-template-columns: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		margin-inline: -15px;
		padding-block: 6px 18px;
		padding-inline: 15px;
		scroll-padding-inline: 15px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.ipl-cats .wp-block-term-template > li,
	.ipl-hub .wp-block-post-template > li,
	.ipl-featured .wc-block-product-template > .wc-block-product {
		scroll-snap-align: start;
	}

	.ipl-cats .ipl-cat-card__desc {
		-webkit-line-clamp: 3;
	}

	.ipl-section .ipl-section-head {
		gap: 12px;
	}

	.ipl-section .ipl-section-head__actions .wp-block-button__link {
		min-block-size: 40px;
		padding-block: 6px;
		padding-inline: 16px;
		font-size: 14px;
	}
}

/* ─── Reveal on scroll (classes added by home.js) ─────────────────── */

.ipl-section .ipl-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.7s ease var(--ipl-reveal-delay, 0ms),
		transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--ipl-reveal-delay, 0ms);
}

.ipl-section .ipl-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* ─── Keyframes ───────────────────────────────────────────────────── */

@keyframes ipl-rise {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: none; }
}

@keyframes ipl-stage-in {
	from { opacity: 0; transform: translateY(28px) scale(0.95); }
	to { opacity: 1; transform: none; }
}

@keyframes ipl-pop {
	from { opacity: 0; scale: 0.6; }
	to { opacity: 1; scale: 1; }
}

@keyframes ipl-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes ipl-led {
	0% { opacity: 1; }
	50% { opacity: 0.35; }
	100% { opacity: 1; }
}

@keyframes ipl-ring {
	0% { opacity: 0.8; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.7); }
}

@keyframes ipl-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(36px, 28px, 0); }
}

@keyframes ipl-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

@keyframes ipl-spin {
	to { transform: rotate(1turn); }
}

@keyframes ipl-panel-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* ─── Reduced motion ──────────────────────────────────────────────── */

/* !important: this must beat every animation and transition declared above, whatever its specificity. */
@media (prefers-reduced-motion: reduce) {
	.ipl-section *,
	.ipl-section *::before,
	.ipl-section *::after,
	.ipl-section::before,
	.ipl-section::after {
		animation: none !important;
		transition: none !important;
	}

	.ipl-section .ipl-reveal {
		opacity: 1;
		transform: none;
	}
}