/* ============================================================================
 * EWPK Premium Suite — render guards. v1.25.13
 *
 * Cross-theme corrections that belong to no single theme: badges their own
 * card was clipping, and image slots the owner has not filled yet.
 *
 * THE DEFECT, as reported on a live site:
 *   https://insideoutsidepropertycare.com.au/residential-house-cleaning-.../
 *   "the most popular heading hidden above the box"
 *
 * Keystone's care-plan cards mark the middle tier with a pill that deliberately
 * straddles the card's top edge:
 *
 *     .ks-plan-flag { position: absolute; top: -12px; left: 50%; ... }
 *
 * and the card it sits in clips:
 *
 *     .ks-card { border-radius: 16px; overflow: hidden; }
 *
 * overflow:hidden clips positioned descendants too, so the twelve pixels above
 * the border are cut off and the pill is sliced in half or lost entirely. Each
 * rule is defensible alone — the radius needs the clip so a photo cannot square
 * off the corners, and the pill needs the overhang to read as a tab — and they
 * were written in different files months apart. That is why this is a
 * SUITE-WIDE guard rather than a one-line patch to Keystone: the same pairing
 * exists in Showcase today and will be written again by the next theme.
 *
 * WHY overflow:visible IS SAFE ON THE CARDS TARGETED HERE
 * overflow never clips an element's OWN background — border-radius does that on
 * its own, whatever overflow says. The clip only ever mattered for descendant
 * media (an <img> squaring off a rounded corner). So the generic rule below
 * releases the clip only on cards that contain no img, picture, video or
 * iframe, which is exactly the pricing/plan card shape and never a photo card.
 *
 * Loaded after the active theme's own stylesheet, so these win on specificity
 * ties without a single !important.
 * ========================================================================== */

/* ── 1. The two confirmed cases, stated exactly ───────────────────────────── */

.eaa-keystone .ks-card.ks-plan,
.eaa-showcase .sc-card.sc-pricing-card {
    overflow: visible;
}

/* ── 2. The general rule, for every other theme and every future one ───────
 *
 * Reads as: a card-ish box whose DIRECT child is a badge-ish element, holding
 * no media, stops clipping. :has() is required, so the whole block is gated on
 * support for it — a browser without :has() simply keeps today's behaviour
 * rather than receiving a rule it will mis-parse. Direct-child only: a badge
 * nested deeper belongs to an inner component and is that component's business.
 */
@supports selector(:has(*)) {

    [class*="eaa-"] :is(
        [class*="card"], [class*="plan"], [class*="tier"],
        [class*="pricing"], [class*="package"], [class*="panel"]
    ):has(> :is(
        [class*="flag"], [class*="badge"], [class*="ribbon"],
        [class*="pill"], [class*="chip"]
    )):not(:has(img)):not(:has(picture)):not(:has(video)):not(:has(iframe)) {
        overflow: visible;
    }

    /* An overhanging badge must also sit ABOVE the neighbouring card's border,
     * not behind it. z-index is inert on a static element, so this cannot
     * disturb a badge that sits in normal flow. */
    [class*="eaa-"] :is(
        [class*="card"], [class*="plan"], [class*="tier"],
        [class*="pricing"], [class*="package"], [class*="panel"]
    ) > :is(
        [class*="flag"], [class*="badge"], [class*="ribbon"],
        [class*="pill"], [class*="chip"]
    ) {
        z-index: 2;
    }
}

/* ── 3. Never let a badge overhang off the top of the page ─────────────────
 *
 * A card that is the FIRST thing in its section would push its pill above the
 * section's own padding. Sections all carry generous top padding, so this is
 * belt and braces — but a clipped badge and a badge overlapping the block above
 * are the same class of mistake, and only one of them is fixed by the rules
 * above.
 */
@media (max-width: 600px) {
    .eaa-keystone .ks-plan-flag,
    .eaa-showcase .sc-pricing-badge {
        white-space: nowrap;
        max-width: calc(100% - 1.5rem);
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* ============================================================================
 * 2. UNFILLED IMAGE SLOTS SHOULD LOOK DESIGNED, NOT BROKEN. v1.25.13
 *
 * A slot with no photo renders <img src=""> — replaced at render with a
 * transparent 1x1 (v1.25.6), because the tag CANNOT be dropped: it carries the
 * data-eaa-img marker that both the fill loop and the on-page image editor
 * address BY ORDINAL, so removing one would make the next photo swap overwrite
 * a different image.
 *
 * That was right about the mechanism and wrong about the appearance. A
 * transparent pixel stretched across a hero frame shows whatever is behind it —
 * usually nothing — so a site built before the owner has uploaded any
 * photographs presents as a column of grey holes. That is the first thing
 * anyone evaluating this product sees, because an evaluator ALWAYS starts from
 * an empty media library, and it reads as "broken" when the truthful state is
 * "waiting for your photos".
 *
 * A tint drawn from the SAME brand-colour chain every theme already resolves
 * makes it read as a deliberate colour block instead. The page looks composed,
 * the slot stays addressable, and the moment a photo is dropped in, the
 * background is covered by it and this rule stops mattering.
 *
 * No dimensions are forced. Nearly every slot sits in a container that sizes
 * it, and a min-height here would push those containers out of shape for a
 * cosmetic gain — a collapsed invisible slot is no worse than today's, whereas
 * a distorted hero is worse.
 * ========================================================================== */

/* Both shapes of "unfilled": the transparent pixel image_discipline swaps in,
   and a bare src="" on installs where that pass is switched off. */
.eaa-page [data-eaa-img][src^="data:image/gif"],
.eaa-page [data-eaa-img][src=""],
[class*="eaa-"] [data-eaa-img][src^="data:image/gif"],
[class*="eaa-"] [data-eaa-img][src=""] {
    background-image:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--ewpk-brand-override,
                      var(--wp--preset--color--primary,
                      var(--global-palette1,
                      var(--ast-global-color-0, #2F6E4E)))) 14%, transparent),
            color-mix(in srgb, var(--ewpk-brand-override,
                      var(--wp--preset--color--primary,
                      var(--global-palette1,
                      var(--ast-global-color-0, #2F6E4E)))) 5%, transparent)
        );
    background-size: cover;
    background-position: center;
}

/* color-mix() is recent enough to deserve a floor. Without it the slot keeps
   today's behaviour rather than inheriting a rule the browser half-applies. */
@supports not (color-mix(in srgb, red 10%, transparent)) {
    .eaa-page [data-eaa-img][src^="data:image/gif"],
    .eaa-page [data-eaa-img][src=""],
    [class*="eaa-"] [data-eaa-img][src^="data:image/gif"],
    [class*="eaa-"] [data-eaa-img][src=""] {
        background-image: linear-gradient(135deg, rgba(15, 23, 42, .07), rgba(15, 23, 42, .03));
    }
}

/* ── 3. THE BLANK-PAGE GUARD ─────────────────────────────────────────────────
 *
 * v1.25.16. Added after measuring the whole suite: all 27 themes hide their
 * sections with `opacity: 0` and rely on a signature script to add a reveal
 * class as each section scrolls into view. Eleven of those scripts open with
 *
 *     if ( ! ( 'IntersectionObserver' in window ) ) { return; }
 *
 * and no else branch — so if the API is absent the class is never added and
 * EVERY SECTION ON THE PAGE STAYS INVISIBLE. There was no <noscript> fallback
 * anywhere in the suite either. A visitor with JavaScript blocked, a script
 * that 404s behind a broken CDN rule, or one that throws before its listener
 * binds, all produce the same result: a blank white page on a live business
 * site. That is not a degraded animation, it is a total outage, and it is
 * invisible to us because search engines read the HTML perfectly well.
 *
 * The rules below are the floor beneath the animation. They never run while
 * the reveal machinery is working, because both conditions describe a session
 * in which the animation cannot or should not happen at all.
 *
 * WHY THE SELECTORS ARE SHAPE-BASED, NOT A LIST OF 27 PREFIXES: a list would
 * be stale the day a 28th theme is written, which is precisely how the
 * responsive baseline and the enquiry form drifted. Every theme names its
 * hidden elements with the same four suffixes, so match those.
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	[class*="eaa-"] [class*="-rise"],
	[class*="eaa-"] [class*="-observe"],
	[class*="eaa-"] [class*="-out"],
	[class*="eaa-"] [class*="-layer"] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}

/* Set by the shared safety net when it finds the reveal machinery dead, and by
 * the <noscript> block in the page head when scripts are off entirely. */
.ewpk-reveal-all [class*="-rise"],
.ewpk-reveal-all [class*="-observe"],
.ewpk-reveal-all [class*="-out"],
.ewpk-reveal-all [class*="-layer"] {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}

/* ── 4. RESPONSIVE GRID ESCAPE HATCH ─────────────────────────────────────────
 *
 * v1.25.16. Twenty-eight section renderers across seventeen themes wrote a
 * fixed multi-column grid straight into a style attribute:
 *
 *     style="display:grid;grid-template-columns:1.1fr 1fr"
 *
 * An inline declaration beats any stylesheet rule, and there is not one
 * `!important` anywhere in the suite, so NO media query could ever collapse
 * these — including the ones the newer themes do not have. Meridian's hero is
 * one of them, and it appears on all six of that theme's page types, so a
 * phone got a ~185px text column beside a ~170px image on every page.
 *
 * Those renderers now pass the track list as a CUSTOM PROPERTY instead:
 *
 *     class="ewpk-grid" style="--ewpk-cols:1.1fr 1fr"
 *
 * The layout still comes from the section, but the declaration that USES it
 * lives here, where a media query can override it. Custom properties inherit
 * and cascade normally, which is the whole trick.
 * -------------------------------------------------------------------------- */

.ewpk-grid {
	display: grid;
	grid-template-columns: var(--ewpk-cols, 1fr);
}

@media (max-width: 760px) {
	.ewpk-grid { grid-template-columns: 1fr; }

	/* NOT every fixed grid should stack. Twelve of the twenty-eight are
	   comparison tables — a label column and two tick columns — and folding
	   those into one column produces "Feature / tick / tick" stacked
	   vertically with nothing left to say which product each tick belongs
	   to. That is worse than a narrow table, so they keep their columns and
	   give up padding and type size instead. The stacking above is for the
	   two-column text-and-image splits, where 1.1fr 1fr on a 360px screen
	   leaves a ~185px paragraph beside a ~170px photo. */
	.ewpk-grid.ewpk-grid-wide {
		grid-template-columns: var(--ewpk-cols, 1fr);
		font-size: 0.82rem;
		gap: 0.4rem;
	}
}

/* ── 5. BALANCED GRIDS — never three across and one below ────────────────────
 *
 * v1.25.17. THE DEFECT, in the owner's words: "when pages produce anything in
 * groups such as how it works they are in a 4 pack yet the page is split in 3
 * and 1 below. this looks like a poor designer job."
 *
 * He is right and it is systemic. All 236 grids in the library were written as
 *
 *     grid-template-columns: repeat(auto-fit, minmax(NNNpx, 1fr))
 *
 * which means the column count is whatever happens to fit the container. Nobody
 * ever chose it, and nothing ever consulted the number of items. Meanwhile the
 * generator's own JSON skeleton asks for exactly FOUR of nearly everything —
 * four features, four services, four stats, four FAQs — and four is the worst
 * number in that system:
 *
 *     46 grids with a >=280px floor  ->  4 items render 3 + 1 ON DESKTOP
 *    131 grids at 220-260px          ->  4 items render 3 + 1 at tablet width
 *     55 grids at <=200px            ->  4 items render 3 + 1 on a small tablet
 *
 * So at some viewport width, essentially every group in every theme orphans an
 * item. It reads as carelessness because it IS carelessness — just nobody's in
 * particular.
 *
 * THE FIX IS THE ITEM COUNT, WHICH CSS CAN NOW SEE. :has() lets the container
 * respond to how many children it has, so the column count is chosen per group
 * rather than per container width. The rule is simply: NEVER LEAVE EXACTLY ONE
 * ITEM ALONE ON THE LAST ROW. Four goes 4-across or 2x2, never 3+1. Five goes
 * 3+2. Six goes 3+3. Seven goes 4+3.
 *
 * Where a count makes an orphan unavoidable at a given width (seven items in
 * three columns), THE LAST ITEM SPANS THE FULL ROW instead. A full-width final
 * card reads as a deliberate finish; a lonely third-width card reads as a bug.
 *
 * WHY THIS IS CSS AND NOT PHP: the alternative was passing an item count out of
 * 236 call sites in 35 themes, which is 236 chances to miss one and a permanent
 * obligation on every future section. The container already knows how many
 * children it has. Let it.
 *
 * The whole block is inside @supports, so a browser without :has() gets exactly
 * today's behaviour rather than a broken one.
 * -------------------------------------------------------------------------- */

.ewpk-g {
	display: grid;
	/* The pre-:has() fallback IS today's behaviour, with each grid's own
	   density floor carried across as a custom property — so a browser
	   without :has() renders exactly what it renders now, never worse. */
	grid-template-columns: repeat( auto-fit, minmax( var( --ewpk-min, 240px ), 1fr ) );
}

@supports selector(:has(*)) {

	/* Phone: one column, always. Two columns of anything meaningful below
	   640px produces a card too narrow to read, and the orphan question does
	   not arise in a single column. */
	.ewpk-g, [class*="eaa-"] [class*="-grid-2"], [class*="eaa-"] [class*="-grid-3"], [class*="eaa-"] [class*="-grid-4"], [class*="eaa-"] [class*="-grid-5"] {
		grid-template-columns: minmax(0, 1fr);
	}

	@media (min-width: 640px) {
		/* Tablet */
		.ewpk-g:has(> :nth-child(1):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(1):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(1):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(1):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(1):last-child) {
			grid-template-columns: repeat(1, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(2):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(2):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(2):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(2):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(2):last-child) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(3):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(3):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(3):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(3):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(3):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(4):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(4):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(4):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(4):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(4):last-child) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(5):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(5):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(5):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(5):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(5):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(6):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(6):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(6):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(6):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(6):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(7):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(7):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(7):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(7):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(7):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(7):last-child) > :last-child,
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(7):last-child) > :last-child,
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(7):last-child) > :last-child,
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(7):last-child) > :last-child,
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(7):last-child) > :last-child {
			grid-column: 1 / -1;
		}
		.ewpk-g:has(> :nth-child(8):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(8):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(8):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(8):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(8):last-child) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(9):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(9):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(9):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(9):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(9):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(10):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(10):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(10):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(10):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(10):last-child) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(11):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(11):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(11):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(11):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(11):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(12):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(12):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(12):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(12):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(12):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (min-width: 1024px) {
		/* Desktop */
		.ewpk-g:has(> :nth-child(1):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(1):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(1):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(1):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(1):last-child) {
			grid-template-columns: repeat(1, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(2):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(2):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(2):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(2):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(2):last-child) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(3):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(3):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(3):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(3):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(3):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(4):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(4):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(4):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(4):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(4):last-child) {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(5):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(5):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(5):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(5):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(5):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(6):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(6):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(6):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(6):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(6):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(7):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(7):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(7):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(7):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(7):last-child) {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(8):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(8):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(8):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(8):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(8):last-child) {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(9):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(9):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(9):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(9):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(9):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(10):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(10):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(10):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(10):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(10):last-child) {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(11):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(11):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(11):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(11):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(11):last-child) {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
		.ewpk-g:has(> :nth-child(12):last-child),
		[class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(12):last-child),
		[class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(12):last-child),
		[class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(12):last-child),
		[class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(12):last-child) {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}
}