/* ==========================================================================
   Mega menu panels + mobile menu (ported from the reference theme).
   Loaded without blocking first paint (inc/modules/ui-mega.php): nothing
   here is visible until a panel or the mobile menu opens. The header bar
   itself is critical CSS in assets/css/app.css.
   ========================================================================== */

/* ---------- Shared panel content ---------- */
.wpi-mega-cols { gap: 1.5rem !important; margin: 0 !important; }
.wpi-mega-cols > .wp-block-column { min-width: 0; }
.wpi-mega-heading { margin: 0 0 .6rem !important; padding-left: .65rem; font-family: var(--wp--preset--font-family--mono); font-size: 10.5px !important; font-weight: 500; line-height: 1.4; text-transform: uppercase; color: var(--muted); }

.wpi-mega-link { display: flex; align-items: flex-start; gap: .75rem; padding: .6rem .65rem; border-radius: 14px; color: inherit; text-decoration: none; transition: background-color .2s var(--ease); }
.wpi-mega-link + .wpi-mega-link { margin-top: 2px; }
.wpi-mega-link:hover, .wpi-mega-link:focus-visible { background: var(--mist); color: inherit; }
.wpi-mega-link__icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--lav-2); color: var(--indigo); transition: background-color .25s, color .25s, transform .4s var(--ease); }
.wpi-mega-link:hover .wpi-mega-link__icon, .wpi-mega-link:focus-visible .wpi-mega-link__icon { background: var(--indigo); color: #fff; transform: rotate(-6deg) scale(1.06); }
.wpi-mega-link__text { display: grid; gap: .1rem; min-width: 0; }
.wpi-mega-link__label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: var(--wp--preset--font-size--small); font-weight: 500; line-height: 1.3; }
.wpi-mega-link__ext { color: var(--muted); }
.wpi-mega-link__desc { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.wpi-mega-link__badge { padding: .15em .5em; border-radius: 999px; background: var(--indigo); color: #fff; font-size: 10px; font-style: normal; font-weight: 500; line-height: 1.3; text-transform: uppercase; }

/* Featured themes */
.wpi-mega-featured { display: grid; gap: .6rem; }
.wpi-mega-feature { display: grid; grid-template-columns: 96px 1fr; gap: .85rem; padding: .55rem; border-radius: 14px; color: inherit; text-decoration: none; transition: background-color .2s; }
.wpi-mega-feature:hover, .wpi-mega-feature:focus-visible { background: var(--mist); color: inherit; }
.wpi-mega-feature__thumb { display: block; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: var(--mist); box-shadow: 0 0 0 1px var(--line); }
.wpi-mega-feature__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.wpi-mega-feature:hover img { transform: scale(1.05); }
.wpi-mega-feature__body { display: grid; align-content: center; gap: .15rem; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.wpi-mega-feature__body strong { font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--ink); }
.wpi-mega-feature__body span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wpi-mega-feature__price { font-style: normal; font-weight: 500; color: var(--indigo); }

/* Latest resources */
.wpi-mega-recent ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.wpi-mega-recent a { display: flex; align-items: center; gap: .75rem; padding: .5rem; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color .2s; }
.wpi-mega-recent a:hover, .wpi-mega-recent a:focus-visible { background: var(--mist); }
.wpi-mega-recent__thumb { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 10px; background: var(--lav-2); color: var(--indigo); overflow: hidden; }
.wpi-mega-recent__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wpi-mega-recent__body { display: grid; gap: .1rem; min-width: 0; }
.wpi-mega-recent__meta { font-family: var(--wp--preset--font-family--mono); font-size: 10px; font-style: normal; text-transform: uppercase; color: var(--indigo); }
.wpi-mega-recent__body strong { display: -webkit-box; font-size: 13.5px; font-weight: 500; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Promo cards */
.wpi-mega-promo { position: relative; height: 100%; padding: 1.4rem; border-radius: 20px; background: var(--ink) radial-gradient(80% 80% at 100% 0%, rgba(76, 91, 255, .45), transparent 60%); color: #fff; isolation: isolate; overflow: hidden; }
.wpi-mega-promo .wpi-mega-heading { padding-left: 0; color: var(--lav); }
.wpi-mega-promo--light { background: var(--lav-2) radial-gradient(80% 80% at 100% 0%, rgba(76, 91, 255, .18), transparent 60%); color: var(--ink); }
.wpi-mega-promo--light .wpi-mega-heading { color: var(--indigo); }
.wpi-mega-promo__title { margin: 0 0 .5rem !important; color: inherit; font-size: 1.25rem !important; font-weight: 500; line-height: 1.2; }
.wpi-mega-promo__text { margin: 0 0 1.25rem !important; font-size: 13px; line-height: 1.55; opacity: .8; }
.wpi-mega-promo .wp-block-buttons { margin: 0; }
.wpi-mega-promo__btn .wp-block-button__link { display: inline-flex; align-items: center; padding: .75rem 1.35rem; border-radius: 999px; background: var(--indigo); color: #fff; font-size: var(--wp--preset--font-size--small); font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; box-shadow: 0 12px 30px -10px rgba(76, 91, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .2); transition: background-color .25s var(--ease), transform .25s var(--ease); }
.wpi-mega-promo__btn .wp-block-button__link:hover { background: var(--indigo-2); color: #fff; transform: translateY(-1px); }

.wpi-mega-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem 1.25rem; }

/* Quick-start card: title links to the detail page (stretched), price + Add sit on top */
.wpi-mega-qs { position: relative; }
.wpi-mega-qs__title { color: inherit; text-decoration: none; }
.wpi-mega-qs__title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wpi-mega-qs__title:focus-visible { outline: 0; }
.wpi-mega-qs:has(.wpi-mega-qs__title:focus-visible) { box-shadow: var(--focus) !important; }
.wpi-mega-qs__buy { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .3rem; }
.wpi-mega-qs__price { font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.wpi-mega-qs__add { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem .35rem .55rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.2; text-decoration: none; transition: background-color .2s var(--ease); }
.wpi-mega-qs__add:hover, .wpi-mega-qs__add:focus-visible { background: var(--indigo); color: #fff; }

/* "View all …" link (mobile, and panels without an intro card) */
.wpi-mega__more { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; padding: .4rem .65rem; font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--indigo); text-decoration: none; }
.wpi-mega__more svg { transition: transform .3s var(--ease); }
.wpi-mega__more:hover svg { transform: translateX(3px); }

/* Quick-start row controls (built by assets/js/app.js) */
.wpi-mega-rownav, .wpi-mega-rowmore, .wpi-mega-rowtrack { display: none; }

/* Page scrim behind an open panel (desktop) */
.wpi-mega-scrim { position: fixed; inset: 0; z-index: 89; background: rgba(11, 11, 18, .32); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s var(--ease), visibility 0s linear .35s; }

/* ==========================================================================
   Desktop: one large rounded sheet under the header
   ========================================================================== */
@media (min-width: 1024px) {
	html.mega-open .wpi-mega-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s var(--ease), visibility 0s; }

	.wpi-mega { clip-path: inset(0 -60px 100% -60px); transition: clip-path .45s var(--ease), visibility 0s linear .45s; }
	.wpi-nav__item.is-open > .wpi-mega { clip-path: inset(-10px -60px -80px -60px); transition: clip-path .6s var(--ease), visibility 0s; }
	.wpi-mega.is-switching { transition: none !important; }

	.wpi-mega__inner { box-sizing: border-box; margin-top: 8px; padding: 1.25rem; border: 1px solid rgba(11, 11, 18, .06); border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 30px 80px -30px rgba(11, 11, 18, .35); max-height: calc(100vh - var(--mega-top, var(--header-h)) - 32px); max-height: calc(100dvh - var(--mega-top, var(--header-h)) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
	.wpi-mega__inner.has-intro { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.5rem; }
	.wpi-mega__content { min-width: 0; padding: .75rem .5rem .5rem; }
	.wpi-mega__inner.has-intro .wpi-mega__more { display: none; }
	.wpi-mega__content > * { opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .5s var(--ease); }
	.wpi-nav__item.is-open .wpi-mega__content > * { opacity: 1; transform: none; transition-delay: .08s; }

	/* Dark intro card: animated mark in a dashed ring, dot grid, indigo glow */
	.wpi-mega__intro { position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 1.5rem; border-radius: 20px; background: var(--ink) radial-gradient(90% 70% at 80% 0%, rgba(76, 91, 255, .5), transparent 70%); color: #fff; overflow: hidden; isolation: isolate; }
	.wpi-mega__intro::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .12) 1px, transparent 0); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
	.wpi-mega__intro::after { content: ""; position: absolute; z-index: -1; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(76, 91, 255, .55), transparent 70%); animation: wpi-mega-glow 7s ease-in-out infinite alternate; }
	.wpi-mega__art { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: auto; }
	.wpi-mega__ring { position: absolute; inset: 0; border: 1px dashed rgba(169, 177, 255, .35); border-radius: 50%; animation: wpi-spin 24s linear infinite; }
	.wpi-mega__mark { position: relative; width: 46px; height: auto; overflow: visible; }
	.wpi-mega__dot { transform-box: view-box; }
	.wpi-mega__intro-title { margin: 2.5rem 0 .4rem !important; font-size: 1.75rem; font-weight: 400; line-height: 1.1; color: #fff; }
	.wpi-mega__intro-text { margin: 0 0 1.5rem !important; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .66); }
	.wpi-mega__overview { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; }
	.wpi-mega__overview-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; transition: background-color .25s var(--ease), border-color .25s, color .25s; }
	.wpi-mega__overview:hover { color: #fff; }
	.wpi-mega__overview:hover .wpi-mega__overview-icon { background: #fff; border-color: #fff; color: var(--ink); }

	/* Services, sized to fit one fold: four group columns, then the Quick-start
	   row and a slim one-line consultation strip (no side column). */
	.wpi-mega__inner:has(.wpi-mega-services).has-intro { grid-template-columns: 236px minmax(0, 1fr); }
	.wpi-mega__inner:has(.wpi-mega-services) .wpi-mega__intro { position: sticky; top: 0; min-height: 0; max-height: calc(100vh - var(--mega-top, var(--header-h)) - 72px); }
	.wpi-mega__inner:has(.wpi-mega-services) .wpi-mega__intro-title { margin-top: 1.5rem !important; }
	.wpi-mega__inner:has(.wpi-mega-services) .wpi-mega__content { padding-top: .5rem; }
	.wpi-mega-cols--services { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 1.25rem !important; }
	.wpi-mega-cols--services > .wp-block-column { flex-basis: auto !important; }
	.wpi-mega-services { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.35rem 1rem; }
	.wpi-mega-services .wpi-mega-heading { margin-bottom: .55rem !important; }
	.wpi-mega-services .wpi-mega-link { gap: .7rem; padding: .55rem .6rem; border-radius: 12px; }
	.wpi-mega-services .wpi-mega-link + .wpi-mega-link { margin-top: 4px; }
	.wpi-mega-services .wpi-mega-link__icon { width: 32px; height: 32px; border-radius: 9px; }
	.wpi-mega-services .wpi-mega-link__icon svg { width: 18px; height: 18px; }
	.wpi-mega-services .wpi-mega-link__text { gap: .15rem; }
	.wpi-mega-services .wpi-mega-link__desc { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.wpi-mega-services__group:nth-child(n+5), .wpi-mega-services__group.is-row { grid-column: 1 / -1; min-width: 0; padding-top: 1.15rem; border-top: 1px solid var(--line); }
	.wpi-mega-services__group:nth-child(n+5):not(.is-row) .wpi-mega-services__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 1rem; }
	.wpi-mega-cols--services .wpi-mega-promo { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: baseline; gap: .25rem 1.25rem; height: auto; padding: .75rem .75rem .75rem 1.25rem; border-radius: 16px; }
	.wpi-mega-cols--services .wpi-mega-promo > * { margin: 0 !important; }
	.wpi-mega-cols--services .wpi-mega-promo .wpi-mega-heading { padding: 0; }
	.wpi-mega-cols--services .wpi-mega-promo__title { font-size: 1.05rem !important; white-space: nowrap; }
	.wpi-mega-cols--services .wpi-mega-promo__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.wpi-mega-cols--services .wpi-mega-promo__btn .wp-block-button__link { padding: .6rem 1.15rem; }

	.wpi-mega-services__group.is-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; }
	.wpi-mega-services__group.is-row > .wpi-mega-rowwrap { grid-column: 1 / -1; }
	.wpi-mega-rowwrap { position: relative; min-width: 0; }
	.wpi-mega-services__group.is-row .wpi-mega-services__links { display: flex; gap: .65rem; margin: 0 -.25rem; padding: .25rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: .25rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 140px), rgba(0, 0, 0, .15) calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 140px), rgba(0, 0, 0, .15) calc(100% - 20px), transparent); }
	.wpi-mega-services__group.is-row .wpi-mega-services__links::-webkit-scrollbar { display: none; }
	.wpi-mega-services__group.is-row .wpi-mega-services__links.is-end { -webkit-mask-image: none; mask-image: none; }
	.wpi-mega-services__group.is-row .wpi-mega-link { flex: 0 0 clamp(220px, 24%, 264px); margin: 0; scroll-snap-align: start; box-shadow: inset 0 0 0 1px var(--line); }
	.wpi-mega-services__group.is-row .wpi-mega-link:hover, .wpi-mega-services__group.is-row .wpi-mega-link:focus-visible { box-shadow: inset 0 0 0 1px rgba(76, 91, 255, .35); }
	.wpi-mega-rownav { display: flex; align-items: center; gap: .35rem; margin-bottom: .35rem; }
	.wpi-mega-rownav__count { margin-right: .35rem; font-family: var(--wp--preset--font-family--mono); font-size: 10.5px; text-transform: uppercase; color: var(--muted); }
	.wpi-mega-rownav__btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, opacity .2s; }
	.wpi-mega-rownav__btn[data-dir="1"]:not([aria-disabled="true"]) { border-color: var(--ink); background: var(--ink); color: #fff; }
	.wpi-mega-rownav__btn:hover:not([aria-disabled="true"]) { border-color: var(--indigo); background: var(--indigo); color: #fff; }
	.wpi-mega-rownav__btn[aria-disabled="true"] { opacity: .35; cursor: default; }
	.wpi-mega-services__group.is-row:not(.is-scrollable) .wpi-mega-rownav__btn, .wpi-mega-services__group.is-row:not(.is-scrollable) .wpi-mega-rowtrack { display: none; }
	.wpi-mega-rowmore { position: absolute; right: 6px; top: calc(50% - 6px); z-index: 2; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border: 0; border-radius: 999px; background: var(--indigo); color: #fff; font: 500 12.5px/1.2 var(--wp--preset--font-family--montreal); white-space: nowrap; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(76, 91, 255, .9); transform: translateY(-50%); animation: wpi-mega-more 2.4s var(--ease) infinite; }
	.wpi-mega-rowmore::after { content: "\2192"; }
	.wpi-mega-rowmore[hidden], .wpi-mega-rowmore:empty { display: none; }
	.wpi-mega-rowmore:hover { background: var(--ink); animation-play-state: paused; }
	.wpi-mega-rowtrack { display: block; position: relative; height: 3px; margin-top: .4rem; overflow: hidden; border-radius: 3px; background: var(--line); }
	.wpi-mega-rowtrack span { position: absolute; inset: 0 auto 0 0; width: var(--w, 100%); border-radius: inherit; background: linear-gradient(90deg, var(--indigo), var(--peri)); transform: translateX(var(--x, 0)); transition: transform .2s linear, width .2s; }
}

/* Mid desktop: drop the services intro card, promo heading moves above the strip */
@media (min-width: 1024px) and (max-width: 1320px) {
	.wpi-mega__inner:has(.wpi-mega-services).has-intro { grid-template-columns: minmax(0, 1fr); }
	.wpi-mega__inner:has(.wpi-mega-services) .wpi-mega__intro { display: none; }
	.wpi-mega__inner:has(.wpi-mega-services) .wpi-mega__more { display: inline-flex; margin-top: .35rem; padding-block: .25rem 0; }
	/* Promo strip on one line: heading · title · button */
	.wpi-mega-cols--services .wpi-mega-promo { grid-template-columns: auto minmax(0, 1fr) auto; }
	.wpi-mega-cols--services .wpi-mega-promo__text { display: none; }
	.wpi-mega__inner:has(.wpi-mega-services) { padding-block: 1rem; }
	.wpi-mega-cols--services { gap: 1rem !important; }
	.wpi-mega-services { row-gap: 1.1rem; }
	.wpi-mega__inner.has-intro { grid-template-columns: 240px minmax(0, 1fr); }
}

/* ==========================================================================
   Mobile: full-screen dark menu with accordion panels
   ========================================================================== */
@media (max-width: 1023px) {
	.wpi-mega-scrim { display: none; }

	.wpi-nav { flex-direction: column; padding: 1rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--ink) radial-gradient(80% 40% at 100% 0%, rgba(76, 91, 255, .3), transparent 70%); color: #fff; clip-path: circle(0% at calc(100% - 40px) 0); transition: clip-path .6s var(--ease), visibility 0s linear .6s; }
	.nav-open .wpi-nav { clip-path: circle(160% at calc(100% - 40px) 0); transition: clip-path .7s var(--ease), visibility 0s; }

	.wpi-nav__head { display: block; margin-bottom: .5rem; }
	.wpi-nav__search { display: flex; align-items: center; gap: .6rem; height: 50px; padding: 0 1rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .7); font-size: var(--wp--preset--font-size--small); text-decoration: none; }
	.wpi-nav__search:hover { color: #fff; border-color: rgba(255, 255, 255, .25); }

	.wpi-nav__list { display: block; flex: none; }
	.wpi-nav__item, .wpi-nav__item.is-mobile-only { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 0; background: none !important; opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
	.nav-open .wpi-nav__item { opacity: 1; transform: none; }
	.nav-open .wpi-nav__item:nth-child(2) { transition-delay: .05s; }
	.nav-open .wpi-nav__item:nth-child(3) { transition-delay: .1s; }
	.nav-open .wpi-nav__item:nth-child(4) { transition-delay: .15s; }
	.nav-open .wpi-nav__item:nth-child(n+5) { transition-delay: .2s; }
	.wpi-nav__link, .has-mega > .wpi-nav__link { flex: 1; padding: 1.05rem 0; border-radius: 0; color: #fff; font-size: clamp(1.6rem, 6.5vw, 2.1rem); font-weight: 400; line-height: 1.15; }
	.wpi-nav__link:hover, .wpi-nav__link[aria-current="page"] { color: var(--lav); }
	.wpi-nav__toggle { width: 34px; height: 34px; margin: 0; border: 1px solid rgba(255, 255, 255, .15); color: #fff; }
	.wpi-nav__item.is-open > .wpi-nav__toggle { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); }

	.wpi-mega { flex-basis: 100%; display: none; padding: 0 0 1.5rem; color: #fff; }
	.wpi-nav__item.is-open > .wpi-mega { display: block; visibility: visible; animation: wpi-mega-in .45s var(--ease) both; }
	.wpi-nav:focus { outline: 0; }
	.wpi-mega__intro, .wpi-mega-featured, .wpi-mega-promo, .wpi-mega-recent, .wpi-mega-cols > .wp-block-column:has(> .wpi-mega-promo, > .wpi-mega-featured:only-child, > .wpi-mega-recent:only-child) { display: none; }
	.wpi-mega-cols { flex-direction: column; flex-wrap: nowrap !important; gap: 1rem !important; }
	.wpi-mega-cols > .wp-block-column { flex-basis: auto !important; }
	.wpi-mega-heading { color: rgba(255, 255, 255, .5) !important; }
	.wpi-mega-link { color: rgba(255, 255, 255, .88); }
	.wpi-mega-link:hover, .wpi-mega-link:focus-visible { background: rgba(255, 255, 255, .06); color: #fff; }
	.wpi-mega-link__icon { background: rgba(76, 91, 255, .25); color: var(--lav); }
	.wpi-mega-link:hover .wpi-mega-link__icon, .wpi-mega-link:focus-visible .wpi-mega-link__icon { background: var(--indigo); color: #fff; }
	.wpi-mega-link__desc, .wpi-mega-link__ext { color: rgba(255, 255, 255, .5); }
	.wpi-mega-services { grid-template-columns: 1fr; }
	.wpi-mega-services__links { display: grid; gap: 2px; }
	.wpi-mega-services__links .wpi-mega-link + .wpi-mega-link { margin-top: 0; }
	.wpi-mega__more { color: var(--lav); }
	.wpi-mega-qs__price { color: #fff; }
	.wpi-mega-qs__buy { justify-content: flex-start; gap: .75rem; }
	.wpi-mega-qs__add { background: rgba(255, 255, 255, .1); }
	.wpi-mega-qs__add:hover, .wpi-mega-qs__add:focus-visible { background: var(--indigo); }

	.wpi-drawer__foot { display: grid; gap: .75rem; margin-top: auto; padding-top: 1.75rem; }
	.wpi-drawer__action { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; height: 50px; min-height: 50px; margin: 0; padding: 0 1.25rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: transparent; color: #fff; font-size: var(--wp--preset--font-size--small); font-weight: 500; text-decoration: none; }
	.wpi-drawer__action:hover { background: rgba(255, 255, 255, .06); color: #fff; }
	.wpi-drawer__action .wpi-actions__signin-label, .wpi-drawer__action .wpi-drawer__label { display: inline; }
	.wpi-drawer__action .wpi-actions__avatar { width: 24px; height: 24px; }
	.wpi-drawer__action.wpi-actions__cta { border-color: var(--indigo); background: var(--indigo); box-shadow: 0 16px 36px -12px rgba(76, 91, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .2); }
	.wpi-drawer__action.wpi-actions__cta:hover { background: var(--indigo-2); }
}

@keyframes wpi-mega-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes wpi-mega-glow { to { transform: translate(-30px, 24px) scale(1.15); opacity: .7; } }
@keyframes wpi-mega-more { 0%, 60%, 100% { transform: translate(0, -50%); } 70% { transform: translate(4px, -50%); } 80% { transform: translate(-2px, -50%); } 90% { transform: translate(2px, -50%); } }

@media (prefers-reduced-motion: reduce) {
	.wpi-mega, .wpi-nav, .wpi-mega__content > *, .wpi-nav__item, .wpi-mega-scrim { transition: none !important; }
	.wpi-mega__ring, .wpi-mega__intro::after, .wpi-mega__dot, .wpi-mega-rowmore, .wpi-nav__item.is-open > .wpi-mega { animation: none !important; }
}

/* Editor previews of panel template parts */
.editor-styles-wrapper .wpi-mega-cols { padding: 1.25rem; border-radius: 28px; background: #fff; }