/* edd-blocks */
:root {
	--edd-blocks-light-grey: #eee;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}


/* contact-form-7 */
.wpcf7 .screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	word-wrap: normal !important;
	word-break: normal !important;
}

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

.wpcf7 form .wpcf7-response-output {
	margin: 2em 0.5em 1em;
	padding: 0.2em 1em;
	border: 2px solid #00a0d2; /* Blue */
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #46b450; /* Green */
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #dc3232; /* Red */
}

.wpcf7 form.spam .wpcf7-response-output {
	border-color: #f56e28; /* Orange */
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #ffb900; /* Yellow */
}

.wpcf7-form-control-wrap {
	position: relative;
}

.wpcf7-not-valid-tip {
	color: #dc3232; /* Red */
	font-size: 1em;
	font-weight: normal;
	display: block;
}

.use-floating-validation-tip .wpcf7-not-valid-tip {
	position: relative;
	top: -2ex;
	left: 1em;
	z-index: 100;
	border: 1px solid #dc3232;
	background: #fff;
	padding: .2em .8em;
	width: 24em;
}

.wpcf7-list-item {
	display: inline-block;
	margin: 0 0 0 1em;
}

.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
	content: " ";
}

.wpcf7-spinner {
	visibility: hidden;
	display: inline-block;
	background-color: #23282d; /* Dark Gray 800 */
	opacity: 0.75;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 100%;
	padding: 0;
	margin: 0 24px;
	position: relative;
}

form.submitting .wpcf7-spinner {
	visibility: visible;
}

.wpcf7-spinner::before {
	content: '';
	position: absolute;
	background-color: #fbfbfc; /* Light Gray 100 */
	top: 4px;
	left: 4px;
	width: 6px;
	height: 6px;
	border: none;
	border-radius: 100%;
	transform-origin: 8px 8px;
	animation-name: spin;
	animation-duration: 1000ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7-spinner::before {
		animation-name: blink;
		animation-duration: 2000ms;
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes blink {
	from {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.wpcf7 [inert] {
	opacity: 0.5;
}

.wpcf7 input[type="file"] {
	cursor: pointer;
}

.wpcf7 input[type="file"]:disabled {
	cursor: default;
}

.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed;
}

.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
	direction: ltr;
}

.wpcf7-reflection > output {
	display: list-item;
	list-style: none;
}

.wpcf7-reflection > output[hidden] {
	display: none;
}


/* edd_all_access_css */
#edd-aa-login-modal-content #edd_login_form{margin-top:0}#edd-aa-login-modal-content #edd_login_form fieldset{margin-bottom:0}.edd-aa-login-purchase-normal-plus-aa-mode{margin-top:20px}#edd-aa-login-modal-content .edd-lost-password{margin-bottom:0!important}.edd-aa-buy-btns-wrapper>div:nth-child(n+2){margin-top:5px}.edd-aa-buy-instructions{display:block;margin-bottom:5px}.edd-aa-login-wrapper{margin-top:5px}.edd-aa-upcoming-end-date,.edd-aa-upcoming-start-date{display:block}

/* edd-multi-currency */
.edd-multi-currency-selector-buttons form{display:flex;flex-wrap:wrap;gap:5px}.edd-multi-currency-button--selected{opacity:.6}


/* puregpl-single-download */
/* ============================================================================
   PureGPL — EDD Single Product

   Same design family as the homepage (Bricolage Grotesque, ultramarine
   gradient, tilted price tag, pill buttons) but composed as a product page:

   1. A dark product stage — deep-space panel with an ultra glow, the product
      shot sitting on a gradient ring, and a white buy card that hangs over
      the stage's bottom edge into the page.
   2. A sticky section nav (scrollspy) over fully visible content sections —
      overview, installation timeline, FAQ — nothing hidden from crawlers.
   3. A membership gradient band and related-product cards.

   Scoped under .pgpl-pd except the two GeneratePress wrapper resets below —
   this stylesheet is enqueued on single downloads only.
   ========================================================================= */

.single-download .site.grid-container.container {
	max-width: none;
	width: 100%;
	padding: 0;
	background: #fff;
}

.single-download .site-content {
	display: block;
	padding: 0;
}

.pgpl-pd {
	/* Poppins is deliberately NOT in this stack.
	 *
	 * It used to sit second, and that single position was the page's entire
	 * layout-shift score. The page first draws in system-ui, then Poppins
	 * arrives — it loads early, being the body font — and every heading
	 * reflows to Poppins metrics, which are far larger: 2816 wide and a 140
	 * line box against Bricolage's 2435 and 120. Everything below the
	 * headings is pushed down. Bricolage then lands and it all moves back.
	 *
	 * Nobody chose Poppins for display text; it was a fallback-of-a-fallback
	 * that only ever showed for a few hundred milliseconds mid-load, and only
	 * to move the page. It is simply gone: system-ui carries the pre-load render,
	 * and it is close to Bricolage — 2433 wide against 2501 — where Poppins was
	 * 2816. An Arial face scaled to Bricolage's metrics was tried in its place and
	 * measured 84px WORSE than system-ui, so it was removed. */
	--display: "Bricolage Grotesque", system-ui, sans-serif;

	--t-3xl: clamp(2.1rem, 4.2vw, 3.2rem);
	--t-2xl: clamp(1.7rem, 3vw, 2.4rem);
	--t-xl: clamp(1.3rem, 2vw, 1.6rem);
	--t-lg: 1.15rem;
	--t-md: 1rem;
	--t-sm: 0.925rem;
	--t-xs: 0.8rem;

	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 22px;
	--r-full: 999px;

	--bg: #ffffff;
	--tint: #f6f7fd;
	--line: rgba(11, 14, 28, 0.09);
	--line-2: rgba(11, 14, 28, 0.06);
	--ink: #0b0e1c;
	--mute: #55607d;
	--mute-2: #66708b;
	--live: #16a34a;
	--bad: #b42323;
	--volt: #d8ff3e;
	--ultra: var(--pgpl-ultra, #2436e4);
	--ultra-deep: var(--pgpl-ultra-deep, #1b29b8);
	--night: var(--pgpl-aurora, #0b0e1c);
	--grad: linear-gradient(135deg, var(--ultra), #5b32e8);

	/* Light text on the dark stage. */
	--stage-text: rgba(226, 230, 255, 0.75);
	--stage-text-soft: rgba(226, 230, 255, 0.62);

	--shadow-card: 0 14px 34px -22px rgba(11, 14, 28, 0.35);
	--shadow-float: 0 34px 70px -34px rgba(11, 14, 28, 0.55);

	font-family: var(--display);
	color: var(--mute);
	background: var(--bg);
	font-size: var(--t-md);
	line-height: 1.6;
	width: 100%;
	-webkit-font-smoothing: antialiased;
}

.pgpl-pd *,
.pgpl-pd *::before,
.pgpl-pd *::after { box-sizing: border-box; }

.pgpl-pd__wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 max(1rem, env(safe-area-inset-left));
}

.pgpl-pd a { color: var(--ultra); text-decoration: none; }
.pgpl-pd a:hover { text-decoration: underline; }

.pgpl-pd a:focus-visible,
.pgpl-pd button:focus-visible,
.pgpl-pd summary:focus-visible {
	outline: 2.5px solid var(--ultra);
	outline-offset: 2px;
	border-radius: 6px;
}

.pgpl-pd .material-icons {
	font-size: 1.15em;
	line-height: 1;
	vertical-align: -0.18em;
}

/* These are inline <svg> now rather than font glyphs — see pgpl_pd_icon().
 * Sizing in `em` is what lets every existing rule keep working untouched: the
 * half-dozen places that set `font-size: 1.2rem` or `color: var(--ultra)` on
 * .material-icons still size and colour them, because the box follows the font
 * size and the strokes are painted with currentColor. */
.pgpl-pd svg.material-icons {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
 * Shared atoms
 * ------------------------------------------------------------------------ */

.pgpl-pd__eyebrow {
	display: block;
	color: var(--mute-2);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pgpl-pd__sec-title {
	font-family: var(--display);
	margin: 0.4rem 0 0;
	color: var(--ink);
	font-size: var(--t-2xl);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.028em;
	text-wrap: balance;
}

.pgpl-pd__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.28rem 0.75rem;
	font-size: var(--t-xs);
	font-weight: 700;
	border-radius: var(--r-full);
}

.pgpl-pd__chip--ultra {
	color: #fff;
	background: var(--grad);
	box-shadow: 0 8px 18px -10px rgba(60, 80, 255, 0.85);
}

.pgpl-pd__chip--dark {
	color: var(--stage-text);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.pgpl-pd__chip--volt {
	color: var(--ink);
	background: var(--volt);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.68rem;
}

/* Pill buttons. */
.pgpl-pd .pgpl-pd__btn {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.6rem;
	color: #fff;
	font-family: var(--display);
	font-size: var(--t-md);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	background: var(--ultra);
	border: 1px solid transparent;
	border-radius: var(--r-full);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.pgpl-pd .pgpl-pd__btn:hover {
	color: #fff;
	background: var(--ultra-deep);
	transform: translateY(-1px);
	text-decoration: none;
}

.pgpl-pd .pgpl-pd__btn svg { transition: transform 0.15s ease; flex-shrink: 0; }
.pgpl-pd .pgpl-pd__btn:hover svg { transform: translateX(2px); }

.pgpl-pd .pgpl-pd__btn--ghost {
	color: var(--ink);
	background: #fff;
	border-color: rgba(11, 14, 28, 0.14);
}

.pgpl-pd .pgpl-pd__btn--ghost:hover {
	color: var(--ink);
	background: var(--tint);
	border-color: rgba(11, 14, 28, 0.24);
}

.pgpl-pd .pgpl-pd__btn--own { background: var(--live); }
.pgpl-pd .pgpl-pd__btn--own:hover { background: #12813b; }

.pgpl-pd .pgpl-pd__btn--light {
	color: var(--ink);
	background: #fff;
}

.pgpl-pd .pgpl-pd__btn--light:hover {
	color: var(--ink);
	background: var(--volt);
}

.pgpl-pd .pgpl-pd__btn--auto { width: auto; }

.pgpl-pd .pgpl-pd__btn--sm {
	padding: 0.5rem 1.1rem;
	font-size: var(--t-sm);
}

/* Loading state — works on any buy button: label and arrow fade out (they
   inherit currentColor), a spinner takes the center. */
.pgpl-pd .is-loading,
.pgpl-pd__stickybar .is-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.pgpl-pd .is-loading::after,
.pgpl-pd__stickybar .is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.15em;
	height: 1.15em;
	margin: -0.575em 0 0 -0.575em;
	border: 2.5px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: pgpl-pd-spin 0.7s linear infinite;
}

@keyframes pgpl-pd-spin {
	to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
 * Product stage — the dark opening act
 * ------------------------------------------------------------------------ */

.pgpl-pd__stage {
	position: relative;
	overflow: hidden;
	color: var(--stage-text);
	background: var(--night);
	padding: clamp(1.3rem, 2.4vw, 2rem) 0 clamp(1.2rem, 2vw, 1.8rem);
}

/* One light source top-left — the brand's dark-surface treatment — plus a
   faint dot grid so the field isn't flat. The bottom edge stays flat night
   so the showcase band below continues it seamlessly. */
.pgpl-pd__stage-glow {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.pgpl-pd__stage-glow::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 120% at 15% 0%, rgba(108, 134, 255, 0.32), transparent 58%);
}

.pgpl-pd__stage-glow::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 65% 60% at 30% 30%, #000 20%, transparent 78%);
	mask-image: radial-gradient(ellipse 65% 60% at 30% 30%, #000 20%, transparent 78%);
	opacity: 0.35;
}

.pgpl-pd__crumbs {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-bottom: clamp(1.1rem, 2vw, 1.7rem);
	color: var(--stage-text-soft);
	font-size: var(--t-xs);
	font-weight: 600;
}

.pgpl-pd__crumbs a { color: var(--stage-text-soft); }
.pgpl-pd__crumbs a:hover { color: #fff; }

.pgpl-pd__stage-head {
	position: relative;
	z-index: 1;
	max-width: 74ch;
}

/* --- Showcase band: media + buy card straddle a dark→white boundary.
   The dark strip is a fixed-height continuation of the stage, painted
   behind the row, so the "cards hanging over the edge" moment holds at
   every viewport and every card height. --- */

.pgpl-pd__showcase {
	--split: min(300px, 36vw);
	position: relative;
	background: linear-gradient(180deg, var(--night) 0, var(--night) var(--split), transparent var(--split));
	padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.pgpl-pd__showcase-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: clamp(1.5rem, 3vw, 3rem);
	/* Columns stretch to the row height so the action pills can pin to the
	   same bottom edge as the buy card. */
}

.pgpl-pd__showcase-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.pgpl-pd__stage-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.9rem;
}

.pgpl-pd__title {
	font-family: var(--display);
	margin: 0 0 0.7rem;
	color: #fff;
	font-size: var(--t-3xl);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.028em;
	text-wrap: balance;
}

.pgpl-pd__lede {
	max-width: 62ch;
	margin: 0 0 0.9rem;
	color: var(--stage-text);
	font-size: var(--t-md);
}

.pgpl-pd__ticks {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	margin: 0;
	padding: 0;
}

.pgpl-pd__ticks li {
	position: relative;
	padding-left: 1.4rem;
	color: var(--stage-text);
	font-size: var(--t-sm);
	font-weight: 600;
}

.pgpl-pd__ticks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #6ee7a8;
	font-weight: 800;
}

/* --- Product showcase: gradient ring + framed shot --- */

.pgpl-pd__media {
	position: relative;
	margin: 0 0 1.1rem;
}

/* The ring: a soft conic sweep behind the frame, blurred into a halo. */
.pgpl-pd__media-ring {
	position: absolute;
	inset: -14px;
	border-radius: calc(var(--r-lg) + 14px);
	background: conic-gradient(from 210deg, rgba(108, 134, 255, 0.55), rgba(91, 50, 232, 0.35), rgba(0, 182, 122, 0.3), rgba(108, 134, 255, 0.55));
	filter: blur(26px);
	opacity: 0.7;
	pointer-events: none;
}

.pgpl-pd__media-frame {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--r-lg);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

/* Browser chrome: traffic lights, the vendor's real domain, the Core chip.
   A 1fr/auto/1fr grid, not flex: equal flexible side columns pin the URL
   pill to the bar's true center whether or not the Core chip exists —
   with auto margins in flex it centered in the LEFTOVER space, so its
   position shifted between core and non-core products. */
.pgpl-pd__media-bar {
	display: grid;
	grid-template-columns: 1fr minmax(0, auto) 1fr;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0.95rem;
	background: #10142c;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.pgpl-pd__media-dots {
	display: inline-flex;
	gap: 0.4rem;
	justify-self: start;
}

.pgpl-pd__media-dots i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.pgpl-pd__media-dots i:nth-child(1) { background: #ff5f57; }
.pgpl-pd__media-dots i:nth-child(2) { background: #febc2e; }
.pgpl-pd__media-dots i:nth-child(3) { background: #28c840; }

.pgpl-pd__media-url {
	min-width: 0;
	justify-self: center;
	padding: 0.18rem 1rem;
	color: rgba(226, 230, 255, 0.65);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: rgba(255, 255, 255, 0.07);
	border-radius: var(--r-full);
}

.pgpl-pd__media-view {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.pgpl-pd__media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	/* A touch of saturation/contrast makes soft sources read crisper. */
	filter: saturate(1.07) contrast(1.04);
	transition: opacity 0.35s ease, transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.pgpl-pd__media-img.is-loaded { opacity: 1; }

/* Slow, quiet zoom on hover — the premium-store micro-interaction. */
.pgpl-pd__media-frame:hover .pgpl-pd__media-img { transform: scale(1.03); }

/* A whisper of gloss along the top edge; no vignette, no matte. */
.pgpl-pd__media-view::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 16%);
}

.pgpl-pd__media-skeleton {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.05) 60%);
	background-size: 200% 100%;
	animation: pgpl-pd-shimmer 1.4s infinite linear;
}

@keyframes pgpl-pd-shimmer {
	from { background-position: 120% 0; }
	to   { background-position: -80% 0; }
}

.pgpl-pd__media-core {
	justify-self: end;
	padding: 0.22rem 0.65rem;
	color: var(--ink);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--volt);
	border-radius: var(--r-full);
	box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.8);
}

/* --- Quick actions --- */

.pgpl-pd__quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: auto; /* pin to the column bottom so both cards end flush */
}

/* These sit in the showcase's white zone, under the media card.
   Prefixed with .pgpl-pd so anchor variants outrank the `.pgpl-pd a` color. */
.pgpl-pd .pgpl-pd__qa {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1.1rem;
	color: var(--ink);
	font-family: var(--display);
	font-size: var(--t-sm);
	font-weight: 700;
	background: #fff;
	border: 1px solid rgba(11, 14, 28, 0.14);
	border-radius: var(--r-full);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.pgpl-pd .pgpl-pd__qa:hover {
	background: var(--tint);
	border-color: rgba(11, 14, 28, 0.24);
	color: var(--ink);
	text-decoration: none;
	transform: translateY(-1px);
}

.pgpl-pd .pgpl-pd__qa .material-icons { font-size: 1.1rem; color: var(--ultra); }

/* ---------------------------------------------------------------------------
 * Buy box — white card floating over the stage edge
 * ------------------------------------------------------------------------ */

.pgpl-pd__aside { min-width: 0; }

.pgpl-pd__buybox {
	position: relative;
	z-index: 2;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-float);
	padding: 1.25rem;
	color: var(--mute);
}

.pgpl-pd__buybox-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.1rem;
}

.pgpl-pd__plans {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	background: var(--tint);
	border: 1px solid var(--line-2);
	border-radius: var(--r-full);
}

.pgpl-pd__plan-tab {
	padding: 0.45rem 0.6rem;
	color: var(--mute);
	font-family: var(--display);
	font-size: var(--t-sm);
	font-weight: 700;
	background: none;
	border: 0;
	border-radius: var(--r-full);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.pgpl-pd__plan-tab.is-active {
	color: #fff;
	background: var(--ink);
}

.pgpl-pd__currency {
	flex-shrink: 0;
	display: flex;
	justify-content: flex-end;
	gap: 0.35rem;
}

.pgpl-pd .pgpl-pd__currency-chip {
	padding: 0.18rem 0.65rem;
	color: var(--mute-2);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	border: 1px solid var(--line);
	border-radius: var(--r-full);
}

.pgpl-pd .pgpl-pd__currency-chip:hover { color: var(--ink); border-color: rgba(11, 14, 28, 0.24); text-decoration: none; }

.pgpl-pd .pgpl-pd__currency-chip.is-active {
	color: #fff;
	background: var(--ink);
	border-color: var(--ink);
}

.pgpl-pd__plan { display: none; }
.pgpl-pd__plan.is-active { display: block; }

.pgpl-pd__price {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.pgpl-pd__price-num {
	color: var(--ink);
	font-family: var(--display);
	font-size: clamp(2.3rem, 3.4vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.pgpl-pd__price-note {
	color: var(--mute-2);
	font-size: var(--t-sm);
	font-weight: 600;
}

.pgpl-pd__perks {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.45rem;
}

.pgpl-pd__perks li {
	position: relative;
	padding-left: 1.6rem;
	color: var(--mute);
	font-size: var(--t-sm);
	font-weight: 600;
}

.pgpl-pd__perks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--live);
	font-weight: 800;
}

/* Ours and EDD's injected markup share the same pill face. */
.pgpl-pd__cta form { margin: 0; }
.pgpl-pd__cta .edd_purchase_submit_wrapper { margin: 0; }

.pgpl-pd__cta .pgpl-pd__btn,
.pgpl-pd__cta .edd-submit {
	display: flex;
	width: 100%;
}

.pgpl-pd__cta .edd-submit {
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.6rem;
	color: #fff;
	font-family: var(--display);
	font-size: var(--t-md);
	font-weight: 700;
	line-height: 1.4;
	background: var(--ultra);
	border: 1px solid transparent;
	border-radius: var(--r-full);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.pgpl-pd__cta .edd-submit:hover {
	color: #fff;
	background: var(--ultra-deep);
	transform: translateY(-1px);
	text-decoration: none;
}

/*
 * "Added to cart" confirmation.
 *
 * EDD ships this as a 28px <svg> followed by a bare text node, and colours the
 * glyph with `fill: currentColor` from its own stylesheet — which is dequeued
 * site-wide here. With nothing setting fill, the check fell back to the SVG
 * default of black: a heavy black tick, twice the height of the green text
 * beside it, sitting on its own baseline. Hence fill and an explicit size.
 *
 * Presented as a soft confirmation chip rather than loose text, so the state
 * change after tapping Add to Cart reads as a deliberate reply to the tap.
 */
.pgpl-pd__cta .edd-cart-added-alert {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.6rem;
	padding: 0.32rem 0.75rem;
	color: var(--live);
	background: rgba(22, 163, 74, 0.09);
	border-radius: var(--r-full);
	font-size: var(--t-xs);
	font-weight: 700;
	line-height: 1.4;
}
/* The alert's own wrapper is what centres the chip under the button. */
.pgpl-pd__cta .edd-cart-ajax-alert {
	display: block;
	text-align: center;
}
.pgpl-pd__cta .edd-cart-added-alert svg {
	flex: none;
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.pgpl-pd__cta-note {
	margin: 0.5rem 0 0;
	color: var(--live);
	font-size: var(--t-xs);
	font-weight: 700;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * The held state — shown when the updater has flagged the product as
 * undeliverable, or when nothing is attached to sell.
 *
 * The point is that the whole panel changes state, not that a button goes
 * missing. An earlier version removed only the button and left a card that
 * contradicted itself: a large price, three green ticks — one of them
 * decorating the reason you could not buy — then "unavailable", then a promise
 * of secure checkout underneath. A tick means a benefit being handed over, so
 * the card was reassuring the reader about a transaction it had just declined.
 *
 * Here the price goes quiet but stays, because it is still what the product
 * will cost; the perks go entirely, because none of them are true yet; and the
 * card opens on the Membership tab, which is a live route to the same file.
 * ------------------------------------------------------------------------ */

.pgpl-pd__price--held .pgpl-pd__price-num {
	color: var(--muted, #94a3b8);
}

.pgpl-pd__price--held .pgpl-pd__price-note {
	color: var(--muted, #94a3b8);
}

.pgpl-pd__held {
	margin: 0.85rem 0 0;
	padding: 1rem 1.05rem;
	border: 1px dashed rgba(148, 163, 184, 0.55);
	border-radius: 0.75rem;
	background: rgba(148, 163, 184, 0.08);
}

.pgpl-pd__held-lead {
	margin: 0;
	color: var(--ink-2, #475569);
	font-weight: 600;
	line-height: 1.5;
}

.pgpl-pd__held-alt {
	margin: 0.6rem 0 0;
	padding-top: 0.6rem;
	border-top: 1px solid rgba(148, 163, 184, 0.3);
	color: var(--muted, #64748b);
	font-size: var(--t-xs);
	line-height: 1.5;
}

.pgpl-pd__held-alt strong {
	color: var(--ink-2, #475569);
}

/* Kept for the owner path, which still renders a note under a real button. */
.pgpl-pd__cta-note--held {
	margin: 0;
	padding: 0.85rem 0.9rem;
	border: 1px dashed rgba(148, 163, 184, 0.55);
	border-radius: 0.75rem;
	background: rgba(148, 163, 184, 0.08);
	color: var(--ink-2, #475569);
	font-weight: 600;
	line-height: 1.5;
}

.pgpl-pd__assure {
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--line-2);
	display: grid;
	gap: 0.55rem;
}

.pgpl-pd__assure li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: var(--mute);
	font-size: var(--t-sm);
	font-weight: 600;
}

.pgpl-pd__assure .material-icons {
	font-size: 1.2rem;
	color: var(--ultra);
	flex-shrink: 0;
}


.pgpl-pd__report {
	margin: 0.9rem 0 0;
	padding-top: 0.85rem;
	border-top: 1px solid var(--line-2);
	color: var(--mute-2);
	font-size: var(--t-xs);
	font-weight: 600;
}

/* The two report triggers are <button> elements rather than anchors, so they
   have to be talked out of GeneratePress's button styling and back into looking
   like the links they replaced.
   
   The idle state alone is not enough: GeneratePress paints `button:hover` and
   `button:focus` a solid grey, and declaring only a colour here left that grey
   box appearing behind the words on hover. Every interactive state has to say
   `background: none` explicitly, and the `.pgpl-pd` prefix keeps these above the
   theme's rules wherever the two stylesheets end up relative to each other. */
.pgpl-pd .pgpl-pd__report-btn,
.pgpl-pd .pgpl-pd__linkbtn {
	display: inline;
	padding: 0;
	color: var(--ultra);
	font: inherit;
	font-weight: 700;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pgpl-pd .pgpl-pd__report-btn:hover,
.pgpl-pd .pgpl-pd__report-btn:focus,
.pgpl-pd .pgpl-pd__report-btn:active,
.pgpl-pd .pgpl-pd__linkbtn:hover,
.pgpl-pd .pgpl-pd__linkbtn:focus,
.pgpl-pd .pgpl-pd__linkbtn:active {
	color: var(--ultra-deep);
	background: none;
	border: 0;
}

/* The focus ring still has to be visible for keyboard users — removing the
   theme's focus background must not take the focus indicator with it. */
.pgpl-pd .pgpl-pd__report-btn:focus-visible,
.pgpl-pd .pgpl-pd__linkbtn:focus-visible {
	outline: 2.5px solid var(--ultra);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Shown in the dialog to signed-out visitors in place of the form. */
.pgpl-pd-report__gate {
	padding: 1rem 1.1rem;
	background: var(--tint);
	border: 1px solid var(--line-2);
	border-radius: 11px;
	text-align: center;
}

.pgpl-pd-report__gate p {
	margin: 0 0 0.85rem;
	color: var(--mute);
	font-size: var(--t-sm);
	line-height: 1.5;
}

.pgpl-pd__report a { color: var(--bad); font-weight: 700; white-space: nowrap; }

/* ---------------------------------------------------------------------------
 * Body — everything after the stage
 * ------------------------------------------------------------------------ */

.pgpl-pd__body {
	position: relative;
	padding: 0 0 clamp(2.6rem, 5vw, 4rem); /* the showcase band above supplies the top gap */
}

/* ---------------------------------------------------------------------------
 * Sticky section nav (scrollspy)
 * ------------------------------------------------------------------------ */

.pgpl-pd__nav {
	position: sticky;
	top: 84px; /* clears the sticky site header */
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
	padding: 6px;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(10px);
	border: 1px solid var(--line);
	border-radius: var(--r-full);
	box-shadow: 0 10px 30px -18px rgba(11, 14, 28, 0.35);
}

.pgpl-pd__nav-track {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

.pgpl-pd__nav-track::-webkit-scrollbar { display: none; }

.pgpl-pd .pgpl-pd__nav-link {
	padding: 0.55rem 1.2rem;
	color: var(--mute);
	font-size: var(--t-sm);
	font-weight: 700;
	border-radius: var(--r-full);
	white-space: nowrap;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.pgpl-pd .pgpl-pd__nav-link:hover { color: var(--ink); text-decoration: none; }

.pgpl-pd .pgpl-pd__nav-link.is-active {
	color: #fff;
	background: var(--ink);
}

.pgpl-pd__nav-buy {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-right: 4px;
}

.pgpl-pd__nav-buy-price {
	color: var(--ink);
	font-family: var(--display);
	font-size: var(--t-md);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* Sections land below the sticky nav when jumped to. */
.pgpl-pd__section { scroll-margin-top: 190px; margin-bottom: clamp(2rem, 4vw, 3rem); }

.pgpl-pd__section-head { margin-bottom: clamp(1rem, 2vw, 1.4rem); }

/* ---------------------------------------------------------------------------
 * Overview panel
 * ------------------------------------------------------------------------ */

.pgpl-pd__panel {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
	padding: clamp(1.4rem, 3vw, 2.2rem);
}

.pgpl-pd__content { color: var(--mute); font-size: var(--t-md); }

/* Prose held to a readable measure — full-panel lines are exhausting. */
.pgpl-pd__content p {
	margin: 0 0 1em;
	max-width: 78ch;
}

/* The description's opening summary reads as an intro, not body copy. */
.pgpl-pd__content .summary,
.pgpl-pd__content > p:first-child,
.pgpl-pd__content > div > p:first-child {
	color: var(--slate, #494f66);
	font-size: var(--t-lg);
	line-height: 1.65;
}

.pgpl-pd__content h2,
.pgpl-pd__content h3 {
	font-family: var(--display);
	color: var(--ink);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 1.4em 0 0.8em;
}

.pgpl-pd__content h2 { font-size: var(--t-xl); }
.pgpl-pd__content h3 { font-size: var(--t-lg); }

/* A short gradient tick under section headings — the brand's accent. */
.pgpl-pd__content h2 {
	position: relative;
	padding-bottom: 0.6rem;
}

.pgpl-pd__content h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 4px;
	border-radius: var(--r-full);
	background: var(--grad);
}

.pgpl-pd__content > div > :first-child,
.pgpl-pd__content > :first-child { margin-top: 0; }

.pgpl-pd__content ul {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0.75rem;
}

/* Feature tiles: white cards with a gradient check badge and a gentle lift. */
.pgpl-pd__content ul li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.95rem 1.05rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: 0 8px 18px -14px rgba(11, 14, 28, 0.3);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pgpl-pd__content ul li::before {
	content: "✓";
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.55rem;
	height: 1.55rem;
	margin-top: 0.1rem;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 800;
	background: linear-gradient(135deg, var(--live), #0d7a37);
	border-radius: 50%;
	box-shadow: 0 6px 14px -6px rgba(22, 163, 74, 0.55);
}

.pgpl-pd__content ul li:hover {
	transform: translateY(-2px);
	border-color: rgba(11, 14, 28, 0.16);
	box-shadow: 0 14px 26px -16px rgba(11, 14, 28, 0.35);
}

.pgpl-pd__content img { max-width: 100%; height: auto; border-radius: var(--r-md); }

/* ---------------------------------------------------------------------------
 * Installation timeline
 * ------------------------------------------------------------------------ */

.pgpl-pd__need {
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	background: var(--tint);
	border: 1px solid var(--line-2);
	border-radius: var(--r-md);
}

.pgpl-pd__need h3 {
	margin: 0 0 0.5rem;
	color: var(--ink);
	font-family: var(--display);
	font-size: var(--t-md);
	font-weight: 800;
}

.pgpl-pd__need ul { margin: 0; padding-left: 1.2rem; }
.pgpl-pd__need li { margin-bottom: 0.35rem; }

.pgpl-pd__timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.pgpl-pd__tl-step {
	position: relative;
	display: flex;
	gap: 1.2rem;
	padding: 0 0 clamp(1.4rem, 2.5vw, 2rem) 0;
}

/* The connecting rail between step numbers. */
.pgpl-pd__tl-step::before {
	content: "";
	position: absolute;
	left: 1.15rem;
	top: 2.5rem;
	bottom: 0.3rem;
	width: 2px;
	background: linear-gradient(180deg, rgba(36, 54, 228, 0.35), rgba(36, 54, 228, 0.08));
}

.pgpl-pd__tl-step:last-child::before { display: none; }

.pgpl-pd__tl-num {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.3rem;
	height: 2.3rem;
	color: #fff;
	font-family: var(--display);
	font-weight: 800;
	background: var(--grad);
	border-radius: 50%;
	box-shadow: 0 8px 18px -10px rgba(60, 80, 255, 0.85);
}

.pgpl-pd__tl-body {
	min-width: 0;
	flex: 1;
	padding: 0.15rem 0 0;
}

.pgpl-pd__tl-body h3 {
	margin: 0 0 0.4rem;
	color: var(--ink);
	font-family: var(--display);
	font-size: var(--t-lg);
	font-weight: 800;
}

.pgpl-pd__tl-body p { margin: 0 0 0.75rem; max-width: 70ch; }

.pgpl-pd__step-img {
	max-width: min(100%, 640px);
	height: auto;
	border: 1px solid var(--line-2);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-card);
}

.pgpl-pd__steps-footer {
	margin: 0.5rem 0 0;
	font-size: var(--t-sm);
}

/*
 * A link inside a sentence needs more than colour to be a link.
 *
 * "Support Ticket" sits mid-paragraph in ultramarine on #55607d body text —
 * 1.23:1 between the two, where WCAG wants 3:1 if colour is the only signal.
 * Anyone who cannot separate blue from grey sees an ordinary word. Underlining
 * it is the fix the guideline actually asks for, and it is only applied to
 * links in running prose: buttons and nav items elsewhere carry their own
 * shape, so they are not affected.
 */
.pgpl-pd__steps-footer a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * FAQ
 * ------------------------------------------------------------------------ */

.pgpl-pd__faq { display: grid; gap: 0.6rem; }

.pgpl-pd__faq-item {
	background: var(--tint);
	border: 1px solid var(--line-2);
	border-radius: var(--r-md);
	overflow: hidden;
}

.pgpl-pd__faq-item summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	padding: 0.95rem 1.2rem;
	color: var(--ink);
	font-family: var(--display);
	font-weight: 700;
	cursor: pointer;
}

.pgpl-pd__faq-item summary::-webkit-details-marker { display: none; }

.pgpl-pd__faq-item summary::after {
	content: "+";
	color: var(--ultra);
	font-size: 1.3rem;
	font-weight: 700;
	transition: transform 0.18s ease;
}

.pgpl-pd__faq-item[open] summary::after { transform: rotate(45deg); }

.pgpl-pd__faq-item p {
	margin: 0;
	padding: 0 1.2rem 1.05rem;
	font-size: var(--t-sm);
}

/* ---------------------------------------------------------------------------
 * Membership band
 * ------------------------------------------------------------------------ */

.pgpl-pd__upsell {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.5rem, 3vw, 2.4rem);
	overflow: hidden;
	color: rgba(226, 230, 255, 0.75);
	background: linear-gradient(150deg, var(--ultra), #4a1fd0 65%, #2a0f8a);
	border-radius: var(--r-lg);
	box-shadow: 0 24px 50px -30px rgba(27, 41, 184, 0.8);
}

.pgpl-pd__upsell::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 120% at 85% 0%, rgba(255, 255, 255, 0.16), transparent 60%);
	pointer-events: none;
}

.pgpl-pd__upsell-copy { position: relative; min-width: 0; }

.pgpl-pd__upsell-copy h2 {
	margin: 0.7rem 0 0.4rem;
	color: #fff;
	font-family: var(--display);
	font-size: var(--t-xl);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.pgpl-pd__upsell-copy p { margin: 0; font-size: var(--t-sm); max-width: 56ch; }

.pgpl-pd__upsell-cta { position: relative; flex-shrink: 0; }
.pgpl-pd__upsell-cta form { margin: 0; }
.pgpl-pd__upsell-cta .edd_purchase_submit_wrapper { margin: 0; }

/* The "Added to cart" reply, on the gradient band.
 *
 * EDD appends this next to its own button once an item is in the cart, and here
 * it was landing unstyled: a full-size black tick and grey body text on a deep
 * violet panel, which read as a rendering fault rather than a confirmation. The
 * white card version a few hundred lines up was already handled; this context
 * was simply never given a rule.
 *
 * Same shape as that one — a small pill sitting under the button — but inverted
 * for a dark ground, and laid out as a block so it drops below rather than
 * fighting the button for the row. */
.pgpl-pd__upsell-cta .edd-cart-added-alert {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.6rem auto 0;
	padding: 0.32rem 0.8rem;
	color: #fff;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--r-full);
	font-size: var(--t-xs);
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

/* EDD's tick ships at its natural size and inherits no colour — both have to be
   said explicitly or it renders as an oversized black mark. */
.pgpl-pd__upsell-cta .edd-cart-added-alert svg,
.pgpl-pd__upsell-cta .edd-cart-added-alert .edd-icon {
	flex: none;
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* The wrapper is inline-block, so centring the pill under the button needs the
   text-align rather than a margin on the pill alone. */
.pgpl-pd__upsell-cta { text-align: center; }

.pgpl-pd__upsell-cta .edd-submit {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.6rem;
	color: var(--ink);
	font-family: var(--display);
	font-size: var(--t-md);
	font-weight: 700;
	line-height: 1.4;
	background: #fff;
	border: 1px solid transparent;
	border-radius: var(--r-full);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.pgpl-pd__upsell-cta .edd-submit:hover {
	color: var(--ink);
	background: var(--volt);
	transform: translateY(-1px);
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Related products
 * ------------------------------------------------------------------------ */

.pgpl-pd__related { margin-bottom: clamp(1rem, 2vw, 1.5rem); }

.pgpl-pd__sechead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
}

.pgpl-pd__related-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.pgpl-pd a.pgpl-pd__rel-card {
	display: flex;
	flex-direction: column;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pgpl-pd a.pgpl-pd__rel-card:hover {
	text-decoration: none;
	border-color: rgba(11, 14, 28, 0.18);
	transform: translateY(-3px);
	box-shadow: var(--shadow-card);
}

.pgpl-pd__rel-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--tint);
	overflow: hidden;
}

.pgpl-pd__rel-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.pgpl-pd a.pgpl-pd__rel-card:hover .pgpl-pd__rel-media img { transform: scale(1.03); }

.pgpl-pd__rel-price {
	position: absolute;
	right: 0.65rem;
	bottom: 0.65rem;
	padding: 0.22rem 0.6rem;
	color: #fff;
	font-family: var(--display);
	font-size: var(--t-md);
	font-weight: 800;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	background: var(--grad);
	border-radius: 0.35rem;
	box-shadow: 0 8px 18px -8px rgba(60, 80, 255, 0.85);
	transform: rotate(-1.5deg);
}

.pgpl-pd__rel-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.75rem;
	padding: 0.9rem 1rem 1rem;
}

.pgpl-pd__rel-name {
	color: var(--ink);
	font-family: var(--display);
	font-size: var(--t-md);
	font-weight: 700;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pgpl-pd__rel-view {
	display: inline-flex;
	gap: 0.45rem;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	padding: 0.55rem 1rem;
	color: var(--ink);
	font-size: var(--t-sm);
	font-weight: 700;
	background: var(--tint);
	border: 1px solid var(--line-2);
	border-radius: var(--r-full);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pgpl-pd a.pgpl-pd__rel-card:hover .pgpl-pd__rel-view {
	background: #eef0fb;
	border-color: rgba(11, 14, 28, 0.14);
}

.pgpl-pd__rel-view svg { transition: transform 0.15s ease; }
.pgpl-pd a.pgpl-pd__rel-card:hover .pgpl-pd__rel-view svg { transform: translateX(2px); }

/* ---------------------------------------------------------------------------
 * Mobile sticky buy bar
 * ------------------------------------------------------------------------ */

.pgpl-pd__stickybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	display: none;
	align-items: center;
	gap: 1rem;
	padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--line);
	box-shadow: 0 -12px 30px -18px rgba(11, 14, 28, 0.4);
	transform: translateY(110%);
	transition: transform 0.25s ease;
	font-family: var(--display);
}

.pgpl-pd__stickybar.is-visible { transform: translateY(0); }

.pgpl-pd__stickybar-info {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.pgpl-pd__stickybar-name {
	color: var(--ink);
	font-size: var(--t-xs);
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pgpl-pd__stickybar-price {
	color: var(--ultra-deep);
	font-size: var(--t-md);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.pgpl-pd__stickybar-btn {
	width: auto;
	flex-shrink: 0;
	padding: 0.7rem 1.4rem;
}

/* ---------------------------------------------------------------------------
 * Modals (VirusTotal / Envato / video)
 * ------------------------------------------------------------------------ */

.pgpl-pd-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	background: rgba(11, 14, 28, 0.7);
	backdrop-filter: blur(3px);
	font-family: var(--display, "Bricolage Grotesque", sans-serif);
}

.pgpl-pd-modal.is-open { display: flex; }

.pgpl-pd-modal__box {
	position: relative;
	width: min(560px, 100%);
	max-height: min(86vh, 720px);
	overflow-y: auto;
	padding: 1.6rem;
	background: #fff;
	border-radius: var(--r-lg, 22px);
	box-shadow: 0 40px 80px -40px rgba(11, 14, 28, 0.8);
}


.pgpl-pd-modal__box--video {
	width: min(1000px, 100%);
	padding: 0;
	overflow: hidden;
	background: #000;
}

.pgpl-pd-modal__close {
	position: absolute;
	top: 0.7rem;
	right: 0.8rem;
	z-index: 2;
	padding: 0.25rem;
	color: #66708b;
	font-size: 1.7rem;
	line-height: 1;
	background: none;
	border: 0;
	cursor: pointer;
}

.pgpl-pd-modal__close:hover { color: #0b0e1c; }

.pgpl-pd-modal--video .pgpl-pd-modal__close {
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.pgpl-pd-modal__title {
	margin: 0 2rem 1rem 0;
	color: #0b0e1c;
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.pgpl-pd-modal__footer { margin: 1.25rem 0 0; }

/* Request-update modal. */
.pgpl-pd-req__text {
	margin: 0 0 1rem;
	color: #55607d;
	font-size: 0.95rem;
	line-height: 1.6;
}

.pgpl-pd-req__product {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.25rem;
	padding: 0.8rem 1rem;
	color: #0b0e1c;
	font-weight: 700;
	background: #f6f7fd;
	border: 1px solid rgba(11, 14, 28, 0.06);
	border-radius: 12px;
}

.pgpl-pd-req__product .material-icons { color: #2436e4; }

.pgpl-pd-req__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 0.5rem;
}

/* ---------------------------------------------------------------------------
 * Report-a-product modal
 *
 * The form is Contact Form 7's, rendered by shortcode, so the markup is fixed:
 * every field is a .item-container wrapping <p><label></label><br><span><input>.
 * That <br> and the paragraph margins are what made the first attempt so tall —
 * roughly a screen and a half inside a dialog. Everything below re-lays that
 * markup as a compact grid without touching the form definition, because the
 * same form is used by /report-product/ and editing it there would change both.
 *
 * CF7's stylesheet is not enqueued on this template, only its script, so the
 * validation tips and response banner are styled here too — otherwise a failed
 * submission renders as unstyled browser defaults mid-dialog.
 * ------------------------------------------------------------------------ */

.pgpl-pd-report__text {
	margin: 0 0 0.85rem;
	color: var(--mute);
	font-size: var(--t-sm);
	line-height: 1.5;
}

/* The product being reported — a single quiet line, not a panel. It is context,
   not the subject of the dialog. */
.pgpl-pd-report__product {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0.55rem 0.75rem;
	color: var(--ink);
	font-weight: 700;
	font-size: var(--t-xs);
	background: var(--tint);
	border: 1px solid var(--line-2);
	border-radius: 9px;
}

.pgpl-pd-report__product .material-icons { color: var(--ultra); font-size: 1rem; }
.pgpl-pd-report__product span { min-width: 0; overflow-wrap: anywhere; }

/* --- the generated form, re-laid as a grid ------------------------------- */

.pgpl-pd-report__form .report-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.7rem 0.8rem;
}

/* Name and email share a row; the product and the description need the width. */
.pgpl-pd-report__form .item-container:nth-child(3),
.pgpl-pd-report__form .item-container:nth-child(4),
.pgpl-pd-report__form .report-form > p { grid-column: 1 / -1; }

.pgpl-pd-report__form .item-container { min-width: 0; }
.pgpl-pd-report__form p { margin: 0; }

/* The <br> between label and field is what CF7 emits. Removing it from the flow
   is the single biggest saving in the dialog. */
.pgpl-pd-report__form label br,
.pgpl-pd-report__form .item-container br { display: none; }

.pgpl-pd-report__form label {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--mute-2);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pgpl-pd-report__form .wpcf7-form-control-wrap { display: block; }

.pgpl-pd-report__form input[type="text"],
.pgpl-pd-report__form input[type="email"],
.pgpl-pd-report__form textarea {
	display: block;
	width: 100%;
	padding: 0.55rem 0.75rem;
	color: var(--ink);
	font-family: inherit;
	font-size: var(--t-sm);
	line-height: 1.45;
	background: #fff;
	border: 1px solid rgba(11, 14, 28, 0.16);
	border-radius: 9px;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* CF7 writes rows="10" into the markup; the cap keeps the dialog on one screen
   while still leaving room to describe a fault. */
.pgpl-pd-report__form textarea {
	height: 5.5rem;
	min-height: 5.5rem;
	resize: vertical;
}

.pgpl-pd-report__form input[type="text"]:focus,
.pgpl-pd-report__form input[type="email"]:focus,
.pgpl-pd-report__form textarea:focus {
	outline: none;
	border-color: var(--ultra);
	box-shadow: 0 0 0 3px rgba(36, 54, 228, 0.13);
}

/* Filled in from the page. Editable — someone reporting a different item should
   not have to leave the dialog — but tinted so it reads as already answered. */
.pgpl-pd-report__form input[name="product-name"] {
	background: var(--tint);
	color: var(--mute);
}

.pgpl-pd-report__form input[type="submit"] {
	display: block;
	width: 100%;
	margin-top: 0.15rem;
	padding: 0.72rem 1.5rem;
	color: #fff;
	font-family: var(--display);
	font-size: var(--t-sm);
	font-weight: 700;
	line-height: 1.4;
	background: var(--ultra);
	border: 1px solid transparent;
	border-radius: var(--r-full);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.pgpl-pd-report__form input[type="submit"]:hover { background: var(--ultra-deep); transform: translateY(-1px); }
.pgpl-pd-report__form input[type="submit"]:disabled { opacity: 0.6; cursor: default; transform: none; }

/* --- CF7's own feedback -------------------------------------------------- */

.pgpl-pd-report__form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.25rem;
	color: var(--bad);
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.4;
}

.pgpl-pd-report__form .wpcf7-not-valid { border-color: var(--bad); }

.pgpl-pd-report__form .wpcf7-response-output {
	margin: 0.8rem 0 0;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 9px;
	font-size: var(--t-xs);
	font-weight: 600;
	line-height: 1.45;
}

.pgpl-pd-report__form form.sent .wpcf7-response-output {
	color: var(--live);
	background: rgba(22, 163, 74, 0.08);
	border-color: rgba(22, 163, 74, 0.3);
}

.pgpl-pd-report__form form.invalid .wpcf7-response-output,
.pgpl-pd-report__form form.failed .wpcf7-response-output,
.pgpl-pd-report__form form.aborted .wpcf7-response-output {
	color: var(--bad);
	background: rgba(180, 35, 35, 0.06);
	border-color: rgba(180, 35, 35, 0.28);
}

/* CF7 ships the spinner in the markup at all times and only adds .is-active
   while a submission is in flight. Left as display:block it reserved its own
   height under the button for the whole life of the form, which is what put a
   hand's width of dead space between the button and the error banner. */
.pgpl-pd-report__form .wpcf7-spinner { display: none; }
.pgpl-pd-report__form .wpcf7-spinner.is-active { display: block; margin: 0.5rem auto 0; }
.pgpl-pd-report__form .hidden-fields-container { display: none; }

@media (max-width: 480px) {
	.pgpl-pd-report__form .report-form { grid-template-columns: 1fr; }
}

.pgpl-pd-report__fallback { margin: 0; color: var(--mute); font-size: var(--t-sm); }

/* ---------------------------------------------------------------------------
 * Version history
 *
 * A strip above the section nav. Five releases is something you glance at while
 * deciding whether to buy, so it is horizontal and short — a stacked list here
 * would push the page's real content below the fold to show information most
 * visitors only skim.
 *
 * Spacing follows one scale throughout: 0.35rem inside a card, 0.7rem between
 * cards, 1.1rem between the band's own parts. Everything else is derived from
 * the page's existing tokens rather than invented here.
 * ------------------------------------------------------------------------ */

.pgpl-pd__vh {
	/* Same token as the sticky nav below it, so this sits on the column's
	   existing rhythm rather than inventing its own. A top margin with no
	   bottom one stacked on the showcase's own spacing and left the gaps
	   above and below uneven. */
	margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
	padding: clamp(1.15rem, 2.4vw, 1.6rem);
	background: linear-gradient(180deg, #fbfbfe, var(--tint));
	border: 1px solid var(--line-2);
	border-radius: var(--r-lg);
}

.pgpl-pd__vh-head {
	display: flex;
	align-items: baseline;
	gap: 0.3rem 0.9rem;
	flex-wrap: wrap;
	margin-bottom: 1.1rem;
}

.pgpl-pd__vh-title {
	margin: 0;
	color: var(--ink);
	font-family: var(--display);
	font-size: var(--t-lg);
	font-weight: 800;
	letter-spacing: -0.022em;
}

.pgpl-pd__vh-sub { margin: 0; color: var(--mute-2); font-size: var(--t-xs); }

/* Negative margin plus matching padding lets the cards' shadows breathe and the
   row bleed to the band's edge when it scrolls, instead of clipping mid-card.
   The same applies vertically, and less obviously: `overflow-x: auto` forces
   the used value of overflow-y to auto as well, so this box clips top and
   bottom at its padding edge. With 4px/8px of padding the current card's glow
   was sliced flat 8px down — a hard horizontal line under the shadow rather
   than a fade. The padding now clears the glow's reach and the focus ring's
   4.5px, and the negative top/bottom margins hand the extra space straight
   back so the band's spacing is unchanged. */
.pgpl-pd__vh-track {
	list-style: none;
	display: flex;
	justify-content: flex-start;
	gap: 0.7rem;
	margin: -0.25rem clamp(-1.15rem, -2.4vw, -1.6rem) -0.5rem;
	padding: 0.5rem clamp(1.15rem, 2.4vw, 1.6rem) 1rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.pgpl-pd__vh-track::-webkit-scrollbar { display: none; }

/* Cards share the width evenly but stop growing past a sensible size. Without
   the cap a product with two or three releases spread them across the whole
   band, which read as a layout fault rather than a short history — the
   information stayed the same while the boxes tripled in width. */
.pgpl-pd__vh-item {
	flex: 1 1 0;
	min-width: 9rem;
	max-width: 15rem;
	scroll-snap-align: start;
	display: flex;
}

.pgpl-pd .pgpl-pd__vh-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.95rem 1.05rem 1rem;
	background: #fff;
	/* No resting shadow. A downward-offset one (0 1px 2px) painted a soft ramp
	   directly beneath the 1px border, so the bottom edge closed as a hairline
	   followed by a smear while the other three closed cleanly. Measured down
	   the edge, this reads 255 (face) → 241 (border) → 247 (band) with nothing
	   in between. The lift lives on hover, where it is intended to be seen. */
	border: 1px solid var(--line-2);
	border-radius: var(--r-md);
	text-decoration: none;
	transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

/* Only cards that actually go somewhere react to the pointer. A hover state on
   a card that does nothing is a promise the page cannot keep. */
.pgpl-pd a.pgpl-pd__vh-card.is-linked:hover {
	transform: translateY(-2px);
	border-color: rgba(36, 54, 228, 0.28);
	box-shadow: 0 12px 24px -16px rgba(11, 14, 28, 0.45);
	text-decoration: none;
}

.pgpl-pd a.pgpl-pd__vh-card.is-linked:focus-visible {
	outline: 2.5px solid var(--ultra);
	outline-offset: 2px;
}

/* The glow is sized to fade out inside the track's padding. The old one
   (0 14px 26px -16px at 0.9) still measured 234 against a 247 ground 17px
   down — long and heavy enough that no sane amount of padding contained it. */
.pgpl-pd .pgpl-pd__vh-card.is-current {
	background: var(--grad);
	border-color: transparent;
	box-shadow: 0 8px 16px -10px rgba(60, 80, 255, 0.6);
}

.pgpl-pd a.pgpl-pd__vh-card.is-current.is-linked:hover {
	border-color: transparent;
	box-shadow: 0 12px 22px -12px rgba(60, 80, 255, 0.7);
}

.pgpl-pd__vh-v {
	color: var(--ink);
	font-size: 1.02rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.pgpl-pd__vh-date {
	color: var(--mute-2);
	font-size: 0.74rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Version and its badge share a row, so every card is exactly two lines tall
   and the four plain ones no longer stretch to match a taller first card. */
.pgpl-pd__vh-top {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
}

.pgpl-pd__vh-tag {
	padding: 0.14rem 0.42rem;
	color: rgba(255, 255, 255, 0.95);
	background: rgba(255, 255, 255, 0.18);
	border-radius: var(--r-full);
	font-size: 0.56rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Pushed to the card's trailing edge so it reads as the card's action rather
   than as punctuation after the version number. Quiet until the pointer is on
   the card, at which point it takes the brand colour along with the border. */
/* Date and action share the card's lower line, so the block closes instead of
   leaving a gap between a top-left version and a top-right icon. */
.pgpl-pd__vh-foot-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin-top: auto;
}

.pgpl-pd__vh-dl {
	display: inline-flex;
	color: var(--mute-2);
	transition: color 0.16s ease;
}

.pgpl-pd__vh-dl .material-icons { font-size: 1rem; }

.pgpl-pd a.pgpl-pd__vh-card.is-linked:hover .pgpl-pd__vh-dl { color: var(--ultra); }

.pgpl-pd__vh-card.is-current .pgpl-pd__vh-dl { color: rgba(255, 255, 255, 0.7); }
.pgpl-pd a.pgpl-pd__vh-card.is-current.is-linked:hover .pgpl-pd__vh-dl { color: #fff; }

.pgpl-pd__vh-card.is-current .pgpl-pd__vh-v { color: #fff; }
.pgpl-pd__vh-card.is-current .pgpl-pd__vh-date { color: rgba(255, 255, 255, 0.8); }

.pgpl-pd__vh-foot {
	margin: 1rem 0 0;
	color: var(--mute-2);
	font-size: var(--t-xs);
	line-height: 1.55;
}

/* Anything narrower than five cards.
 *
 * The row stops scrolling and every release is on screen at once. Keeping the
 * horizontal strip here meant two and a half cards visible and the rest behind a
 * swipe most people never make — a version list you cannot see the end of is not
 * a version list.
 *
 * The cards become single-line rows rather than stacking as cards, which is what
 * makes that affordable: five card-shaped blocks would run to roughly 500px,
 * where five rows fit in half of it. Same information, a quarter of the scroll.
 */
@media (max-width: 900px) {
	.pgpl-pd__vh {
		padding: 1.05rem 1.05rem 1.15rem;
		border-radius: var(--r-md);
	}

	.pgpl-pd__vh-head {
		display: block;
		margin-bottom: 0.8rem;
	}

	.pgpl-pd__vh-title { font-size: var(--t-md); }
	.pgpl-pd__vh-sub { margin-top: 0.2rem; }

	/* No scrolling, no snap, no edge mask — there is nothing left off screen for
	   them to hint at. */
	.pgpl-pd__vh-track {
		display: flex;
		flex-direction: column;
		gap: 0.45rem;
		margin: 0;
		padding: 0;
		overflow: visible;
		scroll-snap-type: none;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.pgpl-pd__vh-item { flex: 1 1 auto; min-width: 0; max-width: none; width: 100%; }

	.pgpl-pd .pgpl-pd__vh-card {
		flex-direction: row;
		align-items: center;
		gap: 0.6rem;
		padding: 0.65rem 0.85rem;
	}

	/* The version wrapper stops being a box of its own so its children become
	   items of the row itself. Without this the icon can only be ordered inside
	   that wrapper, which is why it kept landing between the version and the date
	   instead of at the row's trailing edge. */
	.pgpl-pd__vh-top,
	.pgpl-pd__vh-foot-row { display: contents; }

	.pgpl-pd__vh-v { order: 1; flex: 0 0 auto; font-size: 0.92rem; }
	.pgpl-pd__vh-tag { order: 1; flex: 0 0 auto; }

	.pgpl-pd__vh-date {
		order: 2;
		flex: 1;
		min-width: 0;
		font-size: 0.72rem;
		text-align: right;
	}

	/* Last, so it reads as the row's action rather than a mark on the version. */
	.pgpl-pd__vh-dl { order: 3; flex: 0 0 auto; }

	.pgpl-pd__vh-card.is-current .pgpl-pd__vh-date { color: rgba(255, 255, 255, 0.82); }

	.pgpl-pd__vh-dl { margin-left: 0; }
	.pgpl-pd__vh-dl .material-icons { font-size: 0.95rem; }

	/* The lift only ever fires as a sticky :hover after a tap on touch, so the
	   press is marked with colour instead. */
	.pgpl-pd a.pgpl-pd__vh-card.is-linked:hover { transform: none; }
	.pgpl-pd a.pgpl-pd__vh-card.is-linked:active { border-color: var(--ultra); }
}

@media (prefers-reduced-motion: reduce) {
	.pgpl-pd .pgpl-pd__vh-card { transition: none; }
	.pgpl-pd a.pgpl-pd__vh-card.is-linked:hover { transform: none; }
}

.pgpl-pd-req__note {
	margin: 0.75rem 0 0;
	color: #66708b;
	font-size: 0.8rem;
}

/* VirusTotal report. */










/* Video modal. */
.pgpl-pd-video__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.pgpl-pd-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Lock page scroll while any modal is open. */
body.pgpl-pd-modal-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.pgpl-pd__showcase-grid { grid-template-columns: 1fr; }
	.pgpl-pd__related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pgpl-pd__nav-buy { display: none; }

	/* Stacked, the media fills the row and its halo would smear the dark→white
	   boundary into a muddy wash — pull it right back. */
	.pgpl-pd__media-ring { opacity: 0.35; filter: blur(16px); inset: -8px; }
}

@media (max-width: 768px) {
	.pgpl-pd__stickybar { display: flex; }
	.pgpl-pd__media-bar { padding: 0.45rem 0.75rem; gap: 0.55rem; }
	.pgpl-pd__media-url { font-size: 0.65rem; }
	.pgpl-pd__sechead { align-items: flex-start; flex-direction: column; }
	.pgpl-pd__upsell { flex-direction: column; align-items: flex-start; }
	.pgpl-pd__nav { top: 74px; }
}

@media (max-width: 480px) {
	.pgpl-pd__related-grid { grid-template-columns: 1fr; }
	.pgpl-pd__buybox-top { flex-wrap: wrap; gap: 0.6rem; }
	.pgpl-pd__plans { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.pgpl-pd *,
	.pgpl-pd *::before,
	.pgpl-pd *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}


/* generate-style */
blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0;border:0}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}progress{vertical-align:baseline}html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;margin:0}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}body,button,input,select,textarea{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;text-transform:none;font-size:17px;line-height:1.5}p{margin-bottom:1.5em}h1,h2,h3,h4,h5,h6{font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit}pre{background:rgba(0,0,0,.05);font-family:inherit;font-size:inherit;line-height:normal;margin-bottom:1.5em;padding:20px;overflow:auto;max-width:100%}blockquote{border-left:5px solid rgba(0,0,0,.05);padding:20px;font-size:1.2em;font-style:italic;margin:0 0 1.5em;position:relative}blockquote p:last-child{margin:0}table,td,th{border:1px solid rgba(0,0,0,.1)}table{border-collapse:separate;border-spacing:0;border-width:1px 0 0 1px;margin:0 0 1.5em;width:100%}td,th{padding:8px}th{border-width:0 1px 1px 0}td{border-width:0 1px 1px 0}hr{background-color:rgba(0,0,0,.1);border:0;height:1px;margin-bottom:40px;margin-top:40px}fieldset{padding:0;border:0;min-width:inherit}fieldset legend{padding:0;margin-bottom:1.5em}h1{font-size:42px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h2{font-size:35px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h3{font-size:29px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h4{font-size:24px}h5{font-size:20px}h4,h5,h6{margin-bottom:20px}ol,ul{margin:0 0 1.5em 3em}ul{list-style:disc}ol{list-style:decimal}li>ol,li>ul{margin-bottom:0;margin-left:1.5em}dt{font-weight:700}dd{margin:0 1.5em 1.5em}b,strong{font-weight:700}cite,dfn,em,i{font-style:italic}address{margin:0 0 1.5em}code,kbd,tt,var{font:15px Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace}abbr,acronym{border-bottom:1px dotted #666;cursor:help}ins,mark{text-decoration:none}sub,sup{font-size:75%;height:0;line-height:0;position:relative;vertical-align:baseline}sup{bottom:1ex}sub{top:.5ex}small{font-size:75%}big{font-size:125%}figure{margin:0}table{margin:0 0 1.5em;width:100%}th{font-weight:700}img{height:auto;max-width:100%}button,input[type=button],input[type=reset],input[type=submit]{background:#55555e;color:#fff;border:1px solid transparent;cursor:pointer;-webkit-appearance:button;padding:10px 20px}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{border:1px solid;border-radius:0;padding:10px 15px;max-width:100%}textarea{width:100%}a,button,input{transition:color .1s ease-in-out,background-color .1s ease-in-out}a{text-decoration:none}.button,.wp-block-button .wp-block-button__link{padding:10px 20px;display:inline-block}.wp-block-button .wp-block-button__link{font-size:inherit;line-height:inherit}.using-mouse :focus{outline:0}.using-mouse ::-moz-focus-inner{border:0}.alignleft{float:left;margin-right:1.5em}.alignright{float:right;margin-left:1.5em}.aligncenter{clear:both;display:block;margin:0 auto}.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail{max-width:100%;height:auto}.no-sidebar .entry-content .alignfull{margin-left:calc(-100vw / 2 + 100% / 2);margin-right:calc(-100vw / 2 + 100% / 2);max-width:100vw;width:auto}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#21759b;display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}#primary[tabindex="-1"]:focus{outline:0}.main-navigation{z-index:100;padding:0;clear:both;display:block}.main-navigation a{display:block;text-decoration:none;font-weight:400;text-transform:none;font-size:15px}.main-navigation ul{list-style:none;margin:0;padding-left:0}.main-navigation .main-nav ul li a{padding-left:20px;padding-right:20px;line-height:60px}.inside-navigation{position:relative}.main-navigation .inside-navigation{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}.main-navigation .main-nav>ul{display:flex;flex-wrap:wrap;align-items:center}.main-navigation li{position:relative}.main-navigation .menu-bar-items{display:flex;align-items:center;font-size:15px}.main-navigation .menu-bar-items a{color:inherit}.main-navigation .menu-bar-item{position:relative}.main-navigation .menu-bar-item.search-item{z-index:20}.main-navigation .menu-bar-item>a{padding-left:20px;padding-right:20px;line-height:60px}.sidebar .main-navigation .main-nav{flex-basis:100%}.sidebar .main-navigation .main-nav>ul{flex-direction:column}.sidebar .main-navigation .menu-bar-items{margin:0 auto}.sidebar .main-navigation .menu-bar-items .search-item{order:10}.nav-align-center .inside-navigation{justify-content:center}.nav-align-center .main-nav>ul{justify-content:center}.nav-align-right .inside-navigation{justify-content:flex-end}.main-navigation ul ul{display:block;box-shadow:1px 1px 0 rgba(0,0,0,.1);float:left;position:absolute;left:-99999px;opacity:0;z-index:99999;width:200px;text-align:left;top:auto;transition:opacity 80ms linear;transition-delay:0s;pointer-events:none;height:0;overflow:hidden}.main-navigation ul ul a{display:block}.main-navigation ul ul li{width:100%}.main-navigation .main-nav ul ul li a{line-height:normal;padding:10px 20px;font-size:14px}.main-navigation .main-nav ul li.menu-item-has-children>a{padding-right:0;position:relative}.main-navigation.sub-menu-left ul ul{box-shadow:-1px 1px 0 rgba(0,0,0,.1)}.main-navigation.sub-menu-left .sub-menu{right:0}.main-navigation:not(.toggled) ul li.sfHover>ul,.main-navigation:not(.toggled) ul li:hover>ul{left:auto;opacity:1;transition-delay:150ms;pointer-events:auto;height:auto;overflow:visible}.main-navigation:not(.toggled) ul ul li.sfHover>ul,.main-navigation:not(.toggled) ul ul li:hover>ul{left:100%;top:0}.main-navigation.sub-menu-left:not(.toggled) ul ul li.sfHover>ul,.main-navigation.sub-menu-left:not(.toggled) ul ul li:hover>ul{right:100%;left:auto}.nav-float-right .main-navigation ul ul ul{top:0}.menu-item-has-children .dropdown-menu-toggle{display:inline-block;height:100%;clear:both;padding-right:20px;padding-left:10px}.menu-item-has-children ul .dropdown-menu-toggle{padding-top:10px;padding-bottom:10px;margin-top:-10px}.sidebar .menu-item-has-children .dropdown-menu-toggle,nav ul ul .menu-item-has-children .dropdown-menu-toggle{float:right}.widget-area .main-navigation li{float:none;display:block;width:100%;padding:0;margin:0}.sidebar .main-navigation.sub-menu-right ul li.sfHover ul,.sidebar .main-navigation.sub-menu-right ul li:hover ul{top:0;left:100%}.sidebar .main-navigation.sub-menu-left ul li.sfHover ul,.sidebar .main-navigation.sub-menu-left ul li:hover ul{top:0;right:100%}.site-main .comment-navigation,.site-main .post-navigation,.site-main .posts-navigation{margin:0 0 2em;overflow:hidden}.site-main .post-navigation{margin-bottom:0}.paging-navigation .nav-next,.paging-navigation .nav-previous{display:none}.paging-navigation .nav-links>*{padding:0 5px}.paging-navigation .nav-links .current{font-weight:700}.nav-links>:first-child{padding-left:0}.site-header{position:relative}.inside-header{padding:20px 40px}.main-title{margin:0;font-size:25px;line-height:1.2em;word-wrap:break-word;font-weight:700;text-transform:none}.site-description{margin:0;line-height:1.5;font-weight:400;text-transform:none;font-size:15px}.site-logo{display:inline-block;max-width:100%}.site-header .header-image{vertical-align:middle}.inside-header{display:flex;align-items:center}.header-widget{margin-left:auto}.header-widget p:last-child{margin-bottom:0}.nav-float-right .header-widget{margin-left:20px}.nav-float-right #site-navigation{margin-left:auto}.nav-float-left #site-navigation{margin-right:auto;order:-10}.nav-float-left .header-widget{margin-left:0;margin-right:20px;order:-15}.header-aligned-center:not([class*=nav-float-]) .inside-header{justify-content:center;flex-direction:column;text-align:center}.header-aligned-center:not([class*=nav-float-]) .header-widget{margin-left:auto;margin-right:auto}.header-aligned-center:not([class*=nav-float-]) .inside-header>:not(:first-child){margin-top:1em}.header-aligned-right:not([class*=nav-float-]) .inside-header{justify-content:flex-end}.header-aligned-right:not([class*=nav-float-]) .header-widget{margin-right:auto;margin-left:0;order:-10}.site-branding-container{display:inline-flex;align-items:center;text-align:left;flex-shrink:0}.site-branding-container .site-logo{margin-right:1em}.sticky{display:block}.entry-header .gp-icon,.posted-on .updated{display:none}.byline,.entry-header .cat-links,.entry-header .comments-link,.entry-header .tags-links,.group-blog .byline,.single .byline{display:inline}footer.entry-meta .byline,footer.entry-meta .posted-on{display:block}.entry-content:not(:first-child),.entry-summary:not(:first-child),.page-content:not(:first-child){margin-top:2em}.page-links{clear:both;margin:0 0 1.5em}.archive .format-aside .entry-header,.archive .format-status .entry-header,.archive .format-status .entry-meta,.archive .format-status .entry-title,.blog .format-aside .entry-header,.blog .format-status .entry-header,.blog .format-status .entry-meta,.blog .format-status .entry-title{display:none}.archive .format-aside .entry-content,.archive .format-status .entry-content,.blog .format-aside .entry-content,.blog .format-status .entry-content{margin-top:0}.archive .format-status .entry-content p:last-child,.blog .format-status .entry-content p:last-child{margin-bottom:0}.entry-header,.site-content{word-wrap:break-word}.entry-title{margin-bottom:0}.author .page-header .page-title{display:flex;align-items:center}.author .page-header .avatar{margin-right:20px}.page-header .author-info>:last-child,.page-header>:last-child{margin-bottom:0}.entry-meta{font-size:85%;margin-top:.5em;line-height:1.5}footer.entry-meta{margin-top:2em}.cat-links,.comments-link,.tags-links{display:block}.entry-content>p:last-child,.entry-summary>p:last-child,.page-content>p:last-child,.read-more-container,.taxonomy-description p:last-child{margin-bottom:0}.wp-caption{margin-bottom:1.5em;max-width:100%;position:relative}.wp-caption img[class*=wp-image-]{display:block;margin:0 auto 0;max-width:100%}.wp-caption .wp-caption-text{font-size:75%;padding-top:5px;opacity:.8}.wp-caption img{position:relative;vertical-align:bottom}.wp-block-image figcaption{font-size:13px;text-align:center}.wp-block-gallery,ul.blocks-gallery-grid{margin-left:0}.wp-block-gallery .blocks-gallery-image figcaption,.wp-block-gallery .blocks-gallery-item figcaption{background:rgba(255,255,255,.7);color:#000;padding:10px;box-sizing:border-box}.gallery{margin-bottom:1.5em}.gallery-item{display:inline-block;text-align:center;vertical-align:top;width:100%}.gallery-columns-2 .gallery-item{max-width:50%}.gallery-columns-3 .gallery-item{max-width:33.33%}.gallery-columns-4 .gallery-item{max-width:25%}.gallery-columns-5 .gallery-item{max-width:20%}.gallery-columns-6 .gallery-item{max-width:16.66%}.gallery-columns-7 .gallery-item{max-width:14.28%}.gallery-columns-8 .gallery-item{max-width:12.5%}.gallery-columns-9 .gallery-item{max-width:11.11%}.gallery-caption{display:block}.site-main .gallery{margin-bottom:1.5em}.gallery-item img{vertical-align:bottom}.gallery-icon{padding:5px}embed,iframe,object{max-width:100%}.wp-block-post-template{margin-left:0}.widget-area .widget{padding:40px}.widget select{max-width:100%}.footer-widgets .widget :last-child,.sidebar .widget :last-child{margin-bottom:0}.widget-title{margin-bottom:30px;font-size:20px;line-height:1.5;font-weight:400;text-transform:none}.widget ol,.widget ul{margin:0}.widget .search-field{width:100%}.widget .search-form{display:flex}.widget .search-form button.search-submit{font-size:15px}.footer-widgets .widget{margin-bottom:30px}.footer-widgets .widget:last-child,.sidebar .widget:last-child{margin-bottom:0}.widget ul li{list-style-type:none;position:relative;margin-bottom:.5em}.widget ul li ul{margin-left:1em;margin-top:.5em}.wp-calendar-table{table-layout:fixed}.site-content{display:flex}.grid-container{margin-left:auto;margin-right:auto;max-width:1200px}.page-header,.sidebar .widget,.site-main>*{margin-bottom:20px}.both-left .inside-left-sidebar,.both-right .inside-left-sidebar{margin-right:10px}.both-left .inside-right-sidebar,.both-right .inside-right-sidebar{margin-left:10px}.one-container.both-right .site-main,.one-container.right-sidebar .site-main{margin-right:40px}.one-container.both-left .site-main,.one-container.left-sidebar .site-main{margin-left:40px}.one-container.both-sidebars .site-main{margin:0 40px 0 40px}.one-container.archive .post:not(:last-child):not(.is-loop-template-item),.one-container.blog .post:not(:last-child):not(.is-loop-template-item){padding-bottom:40px}.one-container .site-content{padding:40px}.separate-containers .comments-area,.separate-containers .inside-article,.separate-containers .page-header,.separate-containers .paging-navigation{padding:40px}.separate-containers .site-main{margin:20px}.separate-containers.no-sidebar .site-main{margin-left:0;margin-right:0}.separate-containers.both-right .site-main,.separate-containers.right-sidebar .site-main{margin-left:0}.separate-containers.both-left .site-main,.separate-containers.left-sidebar .site-main{margin-right:0}.separate-containers .inside-left-sidebar,.separate-containers .inside-right-sidebar{margin-top:20px;margin-bottom:20px}.inside-page-header{padding:40px}.widget-area .main-navigation{margin-bottom:20px}.one-container .site-main>:last-child,.separate-containers .site-main>:last-child{margin-bottom:0}.full-width-content .container.grid-container{max-width:100%}.full-width-content.no-sidebar.separate-containers .site-main{margin:0}.full-width-content.one-container .site-content,.full-width-content.separate-containers .inside-article{padding:0}.full-width-content .entry-content .alignwide{margin-left:0;width:auto;max-width:unset}.contained-content.one-container .site-content,.contained-content.separate-containers .inside-article{padding:0}.sidebar .grid-container{max-width:100%;width:100%}.both-left .is-left-sidebar,.both-sidebars .is-left-sidebar,.left-sidebar .sidebar{order:-10}.both-left .is-right-sidebar{order:-5}.both-right .is-left-sidebar{order:5}.both-right .is-right-sidebar,.both-sidebars .is-right-sidebar{order:10}.inside-site-info{display:flex;align-items:center;justify-content:center;padding:20px 40px}.site-info{text-align:center;font-size:15px}.post-image:not(:first-child){margin-top:2em}.featured-image{line-height:0}.separate-containers .featured-image{margin-top:20px}.separate-containers .inside-article>.featured-image{margin-top:0;margin-bottom:2em}.one-container .inside-article>.featured-image{margin-top:0;margin-bottom:2em}.gp-icon{display:inline-flex;align-self:center}.gp-icon svg{height:1em;width:1em;top:.125em;position:relative;fill:currentColor}.close-search .icon-search svg:first-child,.icon-menu-bars svg:nth-child(2),.icon-search svg:nth-child(2),.toggled .icon-menu-bars svg:first-child{display:none}.close-search .icon-search svg:nth-child(2),.toggled .icon-menu-bars svg:nth-child(2){display:block}.entry-meta .gp-icon{margin-right:.6em;opacity:.7}nav.toggled .icon-arrow-left svg{transform:rotate(-90deg)}nav.toggled .icon-arrow-right svg{transform:rotate(90deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon svg{transform:rotate(180deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon.icon-arrow-left svg{transform:rotate(-270deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon.icon-arrow-right svg{transform:rotate(270deg)}.container.grid-container{width:auto}.menu-toggle,.mobile-bar-items,.sidebar-nav-mobile{display:none}.menu-toggle{padding:0 20px;line-height:60px;margin:0;font-weight:400;text-transform:none;font-size:15px;cursor:pointer}.menu-toggle .mobile-menu{padding-left:3px}.menu-toggle .gp-icon+.mobile-menu{padding-left:9px}.menu-toggle .mobile-menu:empty{display:none}button.menu-toggle{background-color:transparent;flex-grow:1;border:0;text-align:center}button.menu-toggle:active,button.menu-toggle:focus,button.menu-toggle:hover{background-color:transparent}.has-menu-bar-items button.menu-toggle{flex-grow:0}nav.toggled ul ul.sub-menu{width:100%}.toggled .menu-item-has-children .dropdown-menu-toggle{padding-left:20px}.main-navigation.toggled .main-nav{flex-basis:100%;order:3}.main-navigation.toggled .main-nav>ul{display:block}.main-navigation.toggled .main-nav li{width:100%;text-align:left}.main-navigation.toggled .main-nav ul ul{transition:0s;visibility:hidden;box-shadow:none;border-bottom:1px solid rgba(0,0,0,.05)}.main-navigation.toggled .main-nav ul ul li:last-child>ul{border-bottom:0}.main-navigation.toggled .main-nav ul ul.toggled-on{position:relative;top:0;left:auto!important;right:auto!important;width:100%;pointer-events:auto;height:auto;opacity:1;display:block;visibility:visible;float:none}.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle{float:right}.mobile-menu-control-wrapper{display:none;margin-left:auto;align-items:center}.has-inline-mobile-toggle #site-navigation.toggled{margin-top:1.5em}.has-inline-mobile-toggle #site-navigation.has-active-search{margin-top:1.5em}.has-inline-mobile-toggle #site-navigation.has-active-search .nav-search-active{position:relative}.has-inline-mobile-toggle #site-navigation.has-active-search .navigation-search input{outline:auto}.nav-float-left .mobile-menu-control-wrapper{order:-10;margin-left:0;margin-right:auto;flex-direction:row-reverse}@media (max-width:768px){.hide-on-mobile{display:none!important}a,body,button,input,select,textarea{transition:all 0s ease-in-out}.inside-header{flex-direction:column;text-align:center}.site-header .header-widget{margin-top:1.5em;margin-left:auto;margin-right:auto;text-align:center}.site-content{flex-direction:column}.container .site-content .content-area{width:auto}.is-left-sidebar.sidebar,.is-right-sidebar.sidebar{width:auto;order:initial}.is-left-sidebar+.is-right-sidebar .inside-right-sidebar{margin-top:0}.both-left .inside-left-sidebar,.both-left .inside-right-sidebar,.both-right .inside-left-sidebar,.both-right .inside-right-sidebar{margin-right:0;margin-left:0}#main{margin-left:0;margin-right:0}body:not(.no-sidebar) #main{margin-bottom:0}.alignleft,.alignright{float:none;display:block;margin-left:auto;margin-right:auto}.comment .children{padding-left:10px;margin-left:0}.entry-meta{font-size:inherit}.entry-meta a{line-height:1.8em}}@media (min-width:769px) and (max-width:1024px){.hide-on-tablet{display:none!important}}@media (min-width:1025px){.hide-on-desktop{display:none!important}}
body{background-color:var(--base-2);color:var(--contrast);}a{color:var(--accent);}a:hover, a:focus, a:active{color:var(--contrast);}.wp-block-group__inner-container{max-width:1200px;margin-left:auto;margin-right:auto;}.site-header .header-image{width:140px;}:root{--contrast:#222222;--contrast-2:#575760;--contrast-3:#b2b2be;--base:#f0f0f0;--base-2:#f7f8f9;--base-3:#ffffff;--accent:#1e73be;}:root .has-contrast-color{color:var(--contrast);}:root .has-contrast-background-color{background-color:var(--contrast);}:root .has-contrast-2-color{color:var(--contrast-2);}:root .has-contrast-2-background-color{background-color:var(--contrast-2);}:root .has-contrast-3-color{color:var(--contrast-3);}:root .has-contrast-3-background-color{background-color:var(--contrast-3);}:root .has-base-color{color:var(--base);}:root .has-base-background-color{background-color:var(--base);}:root .has-base-2-color{color:var(--base-2);}:root .has-base-2-background-color{background-color:var(--base-2);}:root .has-base-3-color{color:var(--base-3);}:root .has-base-3-background-color{background-color:var(--base-3);}:root .has-accent-color{color:var(--accent);}:root .has-accent-background-color{background-color:var(--accent);}.top-bar{background-color:#636363;color:#ffffff;}.top-bar a{color:#ffffff;}.top-bar a:hover{color:#303030;}.site-header{background-color:var(--base-3);}.main-title a,.main-title a:hover{color:var(--contrast);}.site-description{color:var(--contrast-2);}.main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items{color:var(--contrast);}.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a, .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a, .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a, .main-navigation .menu-bar-item:hover > a, .main-navigation .menu-bar-item.sfHover > a{color:var(--accent);}button.menu-toggle:hover,button.menu-toggle:focus{color:var(--contrast);}.main-navigation .main-nav ul li[class*="current-menu-"] > a{color:var(--accent);}.navigation-search input[type="search"],.navigation-search input[type="search"]:active, .navigation-search input[type="search"]:focus, .main-navigation .main-nav ul li.search-item.active > a, .main-navigation .menu-bar-items .search-item.active > a{color:var(--accent);}.main-navigation ul ul{background-color:var(--base);}.entry-title a{color:var(--contrast);}.entry-title a:hover{color:var(--contrast-2);}.entry-meta{color:var(--contrast-2);}.sidebar .widget{background-color:var(--base-3);}.footer-widgets{background-color:var(--base-3);}.site-info{background-color:var(--base-3);}input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="search"],input[type="tel"],input[type="number"],textarea,select{color:var(--contrast);background-color:var(--base-2);border-color:var(--base);}input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="number"]:focus,textarea:focus,select:focus{color:var(--contrast);background-color:var(--base-2);border-color:var(--contrast-3);}button,html input[type="button"],input[type="reset"],input[type="submit"],a.button,a.wp-block-button__link:not(.has-background){color:#ffffff;background-color:#55555e;}button:hover,html input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover,a.button:hover,button:focus,html input[type="button"]:focus,input[type="reset"]:focus,input[type="submit"]:focus,a.button:focus,a.wp-block-button__link:not(.has-background):active,a.wp-block-button__link:not(.has-background):focus,a.wp-block-button__link:not(.has-background):hover{color:#ffffff;background-color:#3f4047;}a.generate-back-to-top{background-color:rgba( 0,0,0,0.4 );color:#ffffff;}a.generate-back-to-top:hover,a.generate-back-to-top:focus{background-color:rgba( 0,0,0,0.6 );color:#ffffff;}:root{--gp-search-modal-bg-color:var(--base-3);--gp-search-modal-text-color:var(--contrast);--gp-search-modal-overlay-bg-color:rgba(0,0,0,0.2);}@media (max-width:768px){.main-navigation .menu-bar-item:hover > a, .main-navigation .menu-bar-item.sfHover > a{background:none;color:var(--contrast);}}.nav-below-header .main-navigation .inside-navigation.grid-container, .nav-above-header .main-navigation .inside-navigation.grid-container{padding:0px 20px 0px 20px;}.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header{padding:0px;}.site-main .wp-block-group__inner-container{padding:0px;}.separate-containers .paging-navigation{padding-top:20px;padding-bottom:20px;}.entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull{margin-left:-0px;width:calc(100% + 0px);max-width:calc(100% + 0px);}.one-container.right-sidebar .site-main,.one-container.both-right .site-main{margin-right:0px;}.one-container.left-sidebar .site-main,.one-container.both-left .site-main{margin-left:0px;}.one-container.both-sidebars .site-main{margin:0px;}.sidebar .widget, .page-header, .widget-area .main-navigation, .site-main > *{margin-bottom:0px;}.separate-containers .site-main{margin:0px;}.both-right .inside-left-sidebar,.both-left .inside-left-sidebar{margin-right:0px;}.both-right .inside-right-sidebar,.both-left .inside-right-sidebar{margin-left:0px;}.one-container.archive .post:not(:last-child):not(.is-loop-template-item), .one-container.blog .post:not(:last-child):not(.is-loop-template-item){padding-bottom:0px;}.separate-containers .featured-image{margin-top:0px;}.separate-containers .inside-right-sidebar, .separate-containers .inside-left-sidebar{margin-top:0px;margin-bottom:0px;}.rtl .menu-item-has-children .dropdown-menu-toggle{padding-left:20px;}.rtl .main-navigation .main-nav ul li.menu-item-has-children > a{padding-right:20px;}@media (max-width:768px){.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header{padding:30px;}.site-main .wp-block-group__inner-container{padding:30px;}.inside-top-bar{padding-right:30px;padding-left:30px;}.inside-header{padding-right:30px;padding-left:30px;}.widget-area .widget{padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;}.footer-widgets-container{padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;}.inside-site-info{padding-right:30px;padding-left:30px;}.entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull{margin-left:-30px;width:calc(100% + 60px);max-width:calc(100% + 60px);}.one-container .site-main .paging-navigation{margin-bottom:0px;}}/* End cached CSS */.is-right-sidebar{width:30%;}.is-left-sidebar{width:30%;}.site-content .content-area{width:100%;}@media (max-width:768px){.main-navigation .menu-toggle,.sidebar-nav-mobile:not(#sticky-placeholder){display:block;}.main-navigation ul,.gen-sidebar-nav,.main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul,.has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(.navigation-search):not(.main-nav){display:none;}.nav-align-right .inside-navigation,.nav-align-center .inside-navigation{justify-content:space-between;}}
.dynamic-author-image-rounded{border-radius:100%;}.dynamic-featured-image, .dynamic-author-image{vertical-align:middle;}.one-container.blog .dynamic-content-template:not(:last-child), .one-container.archive .dynamic-content-template:not(:last-child){padding-bottom:0px;}.dynamic-entry-excerpt > p:last-child{margin-bottom:0px;}
.post-image:not(:first-child), .page-content:not(:first-child), .entry-content:not(:first-child), .entry-summary:not(:first-child), footer.entry-meta{margin-top:0em;}.post-image-above-header .inside-article div.featured-image, .post-image-above-header .inside-article div.post-image{margin-bottom:0em;}

/* generate-child */
/*
Theme Name: GeneratePress Child
Theme URI:  https://puregpl.com/
Description: Child theme for GeneratePress
Author: Varun Haldhar
Author URI: https://puregpl.com/
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-child
*/

/* You can add custom CSS below this line */

:root {
	/* Neutrals */
	--white: #FFFFFF;
	--gray-50: #F9FAFB;
	--gray-100: #F3F4F6;
	--gray-200: #E5E7EB;
	--gray-300: #D1D5DB;
	--gray-600: #4B5563;
	--gray-700: #374151;
	--gray-900: #111827;

	/* Gradients */
	--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--gradient-gold: linear-gradient(135deg, #FFB800 0%, #FF8C00 100%);
	--gradient-emerald: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
	--gradient-hero: linear-gradient(135deg, #1a0b2e 0%, #6B46C1 50%, #9333EA 100%);
	--gradient-pink: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);

	/* Typography */
	--font-display: 'Inter', -apple-system, system-ui, sans-serif;

	/* Spacing */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;
	--spacing-2xl: 4rem;
	--spacing-3xl: 6rem;

	/* Effects */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
	--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

	/* Animations */
	--transition-fast: 0.15s ease;
	--transition-base: 0.3s ease;
	--transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* pgpl-chrome */
/**
 * PureGPL — site chrome.
 *
 * "Ultramarine Ledger", the same tokens as checkout.css and receipt.css, so the
 * header a buyer sees on the homepage is the header they see at checkout.
 *
 * Tokens are declared on :root here rather than on a wrapper, because the
 * header and footer are two separate elements at opposite ends of the document.
 */

:root {
	--pgpl-ink: #0f1222;
	--pgpl-ink-soft: #3d4260;
	--pgpl-muted: #6a7091;
	--pgpl-paper: #fcfcfa;
	--pgpl-surface: #fff;
	--pgpl-line: #dde0ec;
	--pgpl-line-strong: #c3c8dd;
	--pgpl-ultra: #2436e4;
	--pgpl-ultra-deep: #1b29b8;
	--pgpl-wash: #eef1ff;
	--pgpl-night: #10132a;
	--pgpl-night-soft: #1b2040;
	/* Aurora surfaces: a near-black utility strip over a deep navy command bar. */
	--pgpl-aurora: #0b0e1c;
	--pgpl-aurora-deep: #070915;
	--pgpl-aurora-panel: #0f1324;
	--pgpl-glow: rgba(108, 134, 255, 0.5);
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

/*
 * "Aurora Rail" — the header is a dark surface with one soft light source.
 *
 * Everything inside inherits a light colour from here, which is what lets the
 * wordmark, the actions and the drawer share markup with the light footer
 * without a single duplicated element.
 */
.pgpl-hd {
	position: sticky;
	top: 0;
	z-index: 200;
	color: rgba(255, 255, 255, 0.82);
	background: var(--pgpl-aurora);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/*
 * The admin bar is position:fixed and would sit on top of a sticky header.
 * WordPress only adds this class when the bar is actually showing.
 *
 * All three of its states have to be matched, because the bar changes both
 * height and positioning scheme as the viewport narrows. With only the 32px
 * desktop offset, a logged-in editor got a 14px overlap between 601 and 782px
 * — where the bar is 46px — and, below 600px where the bar stops being fixed
 * and scrolls away, a permanent 32px hole above the header.
 */
.admin-bar .pgpl-hd {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .pgpl-hd {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .pgpl-hd {
		top: 0;
	}
}

.pgpl-hd *,
.pgpl-hd *::before,
.pgpl-hd *::after,
.pgpl-drawer *,
.pgpl-ft *,
.pgpl-ft *::before,
.pgpl-ft *::after {
	box-sizing: border-box;
}

/*
 * ---------------------------------------------------------------------------
 * Link-colour guard  —  read this before adding any anchor to the chrome
 * ---------------------------------------------------------------------------
 *
 * GeneratePress ships `a:hover, a:focus, a:active { color: var(--contrast) }`
 * inline. On this site --contrast is #222, so EVERY link in the chrome turns
 * near-black on hover unless something outruns that rule.
 *
 * Its specificity is (0,1,1) — one pseudo-class plus one element — which quietly
 * beats a plain single-class selector like `.pgpl-drawer__updates` at (0,1,0).
 * It caught the header logo, two drawer controls, the footer wordmark, and most
 * recently the drawer's changelog chip, whose label dropped to 1.03:1 against
 * its own background while the timestamp beside it stayed lit, because that
 * span happened to carry its own colour.
 *
 * Patching each anchor as it surfaced was the wrong approach: the next one added
 * to this file would simply have been the fifth. This guard covers the whole of
 * the chrome at (0,2,1) — enough to beat GeneratePress, and low enough that any
 * component rule using two classes still wins and can choose its own colour.
 *
 * White is the correct default here: the chrome is dark everywhere it renders.
 *
 * Placed EARLY on purpose. A handful of existing rules — `.pgpl-hd__col-list
 * a:hover`, for one — tie this at (0,2,1), and on a tie the later rule wins.
 * Moving this block down the file would silently take those overrides away.
 *
 * `:visited` is deliberately NOT in this list, and must not be added back.
 * GeneratePress only forces a colour on :hover/:focus/:active, so :visited was
 * never being defended against — it was volunteering, and at (0,2,1) it outranked
 * every component that sets its own resting colour. Two of them are WHITE
 * surfaces: the active currency pill and the "See plans" button both went white
 * text on white and disappeared the moment their URL had been visited. It also
 * lit every visited link in the drawer and footer to full white while unvisited
 * siblings sat at 50-78%, so visited rows read as "you are here" and drowned out
 * the real `is-current` marker. Author colours already beat the browser's own
 * :visited style, so removing this costs nothing.
 */
.pgpl-hd a:hover,
.pgpl-hd a:focus,
.pgpl-hd a:active,
.pgpl-drawer a:hover,
.pgpl-drawer a:focus,
.pgpl-drawer a:active,
.pgpl-ft a:hover,
.pgpl-ft a:focus,
.pgpl-ft a:active {
	color: #fff;
}

.pgpl-hd__wrap {
	display: flex;
	gap: 1rem;
	align-items: center;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 max(1rem, env(safe-area-inset-left));
}

.pgpl-hd__icon {
	flex: 0 0 auto;
}

/* --- Utility band --------------------------------------------------------- */

/* Darker than the command bar, so it reads as a sub-band rather than a stripe. */
.pgpl-hd__utility {
	color: rgba(255, 255, 255, 0.62);
	background: var(--pgpl-aurora-deep);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 0.8rem;
}

.pgpl-hd__utility .pgpl-hd__wrap {
	justify-content: space-between;
	min-height: 2.25rem;
}

/*
 * The changelog link, as a status chip rather than a line of grey text.
 *
 * It was the least visible thing in the header despite pointing at the one page
 * that answers "is this store alive?" — the question every GPL buyer has. A
 * bordered chip with a live dot and a real timestamp answers it before the
 * click.
 */
.pgpl-hd__updates {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.28rem 0.7rem 0.28rem 0.6rem;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.pgpl-hd .pgpl-hd__updates:hover,
.pgpl-hd .pgpl-hd__updates:focus {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.22);
}

.pgpl-hd__updates-label {
	font-weight: 600;
}

/* The timestamp is supporting detail; it must not compete with the label. */
.pgpl-hd__updates-when {
	padding-left: 0.5rem;
	color: rgba(255, 255, 255, 0.5);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.pgpl-hd__updates-arrow {
	transition: transform 0.16s ease;
}

.pgpl-hd__updates:hover .pgpl-hd__updates-arrow,
.pgpl-hd__updates:focus .pgpl-hd__updates-arrow {
	transform: translateX(2px);
}

/* --- The live dot --------------------------------------------------------- */

.pgpl-hd__pulse {
	position: relative;
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	background: #4ade80;
	border-radius: 50%;
}

/*
 * The halo is a separate ::after so only IT animates. Pulsing the dot itself
 * would move the text beside it on every cycle.
 */
.pgpl-hd__pulse::after {
	content: "";
	position: absolute;
	inset: -3px;
	background: rgba(74, 222, 128, 0.45);
	border-radius: 50%;
	animation: pgpl-pulse 2.4s ease-out infinite;
}

@keyframes pgpl-pulse {
	0%   { transform: scale(0.6); opacity: 0.8; }
	70%  { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}

/*
 * A dot that pulses forever is exactly the kind of persistent motion that
 * triggers vestibular symptoms. Reduced motion gets a static halo — the state
 * is still legible, it simply stops moving.
 */
@media (prefers-reduced-motion: reduce) {
	.pgpl-hd__pulse::after {
		animation: none;
		opacity: 0.35;
	}
}

/*
 * There is no narrow-phone rule for the timestamp, and there cannot usefully be
 * one: a `@media (max-width: 30rem)` block used to hide .pgpl-hd__updates-when
 * here, but the entire utility band is already `display: none` from 60rem down,
 * so it could never once have applied. The drawer carries the freshness chip on
 * phones instead, under its own class.
 */

.pgpl-hd__utility-right {
	display: flex;
	gap: 0.9rem;
	align-items: center;
}

.pgpl-hd__count strong {
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.pgpl-hd__currency {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 999px;
}

.pgpl-hd__chip {
	padding: 0.2rem 0.65rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pgpl-hd__chip:hover,
.pgpl-hd__chip:focus {
	color: #fff;
}

/* ...but never on the active pill, which is white. */
.pgpl-hd__chip.is-active:hover,
.pgpl-hd__chip.is-active:focus {
	color: var(--pgpl-ink);
}

.pgpl-hd__chip.is-active {
	color: var(--pgpl-ink);
	background: #fff;
}

/* --- Command band --------------------------------------------------------- */

/*
 * Taller than a normal header row on purpose. This band IS the navigation now,
 * and the search field inside it has to read as the primary control rather than
 * as one more thing wedged between the logo and the account links.
 */
.pgpl-hd__command {
	position: relative;
}

/*
 * The clip lives on the glow's own layer, not on the band.
 *
 * `overflow: hidden` here was containing the decoration below — and clipping
 * every absolutely positioned descendant with it, including Ajax Search Pro's
 * floating results panel, which renders as an overlay beneath the field. The
 * suggestions were being cut off at the bottom edge of the band, on the one
 * control this entire header is built around.
 */
.pgpl-hd__glow {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

/*
 * The aurora. ONE light source, top-right, at low opacity — a single soft glow
 * reads as atmosphere; two or more read as a gradient mesh, which dates fast
 * and fights everything placed on top of it.
 *
 * `padding-top` rather than `aspect-ratio`: the height has to come from the
 * width either way, and on a browser without aspect-ratio support this element
 * is the only thing painting the glow — it would collapse to nothing.
 */
.pgpl-hd__glow::after {
	content: "";
	position: absolute;
	top: -320%;
	right: -6%;
	width: 46%;
	height: 0;
	padding-top: 46%;
	background: radial-gradient(circle, var(--pgpl-glow) 0%, rgba(108, 134, 255, 0) 66%);
	pointer-events: none;
}

.pgpl-hd__command .pgpl-hd__wrap {
	position: relative;
	z-index: 1;
	min-height: 5rem;
	gap: 1.25rem;
}

.pgpl-hd__brand {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/*
 * Ajax Search Pro renders its own markup and is deliberately left alone —
 * restyling a search plugin's internals from the outside breaks on its next
 * update. Only the container is sized.
 */
.pgpl-hd__search {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.pgpl-hd__search > * {
	max-width: none;
}

/*
 * A WHITE field on the dark bar, not a glass one.
 *
 * This used to be scoped to an Ajax Search Pro variant, because ASP rendered its
 * own input with no surface of its own while the fallback form brought one — and
 * painting both nested a white box inside a grey one. ASP is gone; the form below
 * is the only search there is, so it simply IS the field.
 *
 * White rather than glass because it makes search the brightest object in a dark
 * bar, which is where the emphasis belongs on a shop whose catalogue is too large
 * to browse.
 */
/*
 * A pill, like everything else in this bar.
 *
 * The field used to be a 12px rectangle sitting between a 999px Browse pill and
 * two 999px action pills — the only squared object in a header built entirely
 * from round ones, which read as unfinished rather than deliberate. Matching the
 * radius costs nothing and makes the bar look designed rather than assembled.
 *
 * Depth comes from two soft layers instead of one heavy drop: a hairline that
 * defines the edge against the dark bar, and a wide, very soft shadow that lifts
 * it. A single strong shadow reads as a sticker; two quiet ones read as glass on
 * a surface.
 */
.pgpl-hd__fallback {
	position: relative;
	display: flex;
	gap: 0.6rem;
	align-items: center;
	max-width: none;
	padding: 0 0.3rem 0 1.15rem;
	background: #fff;
	border: 0;
	border-radius: 999px;
	box-shadow:
		0 1px 2px rgba(11, 14, 28, 0.16),
		0 14px 30px -18px rgba(0, 0, 0, 0.8);
	transition: box-shadow 0.18s ease;
}

.pgpl-hd__fallback:focus-within {
	box-shadow:
		0 0 0 3px rgba(108, 134, 255, 0.42),
		0 1px 2px rgba(11, 14, 28, 0.16),
		0 14px 30px -18px rgba(0, 0, 0, 0.8);
}

/*
 * The LEADING icon only — note the child combinator.
 *
 * The submit button carries the same icon class, so a descendant selector here
 * tints that one too: at rest it went muted grey on ultramarine, and on focus it
 * turned ultramarine on ultramarine and disappeared entirely. The button owns
 * its own colour and must keep it.
 */
.pgpl-hd__fallback > .pgpl-hd__icon {
	color: var(--pgpl-muted);
	transition: color 0.18s ease;
}

.pgpl-hd__fallback:focus-within > .pgpl-hd__icon {
	color: var(--pgpl-ultra);
}

.pgpl-hd__fallback input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 3.1rem;
	padding: 0;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--pgpl-ink);
	background: transparent;
	border: 0;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Chrome draws its own clear button on type=search; it collides with ours. */
.pgpl-hd__fallback input[type="search"]::-webkit-search-decoration,
.pgpl-hd__fallback input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.pgpl-hd__fallback input[type="search"]::placeholder {
	color: var(--pgpl-muted);
	opacity: 1;
}

/* --- The keyboard hint ---------------------------------------------------- */

/*
 * Quiet by default and gone the moment it stops being useful.
 *
 * It is an affordance, not a control: it should be findable by someone looking
 * for it and invisible to everyone else. So it sits at the muted end of the
 * palette, and it leaves as soon as the field is focused — at which point the
 * shortcut has already done its job and the hint is just something in the way of
 * what you are typing.
 */
.pgpl-hd__kbd {
	flex: 0 0 auto;
	padding: 0.24rem 0.5rem;
	font-family: inherit;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	/*
	 * Not --pgpl-muted. At 10.9px on this 5%-ink chip that token measures
	 * 4.36:1 — under the 4.5 WCAG asks of small text, and axe flags it. The
	 * chip is meant to be quiet, but quiet has a floor.
	 */
	color: #54597a;
	background: rgba(11, 14, 28, 0.05);
	border: 1px solid rgba(11, 14, 28, 0.08);
	border-radius: 7px;
	white-space: nowrap;
	transition: opacity 0.15s ease;
}

.pgpl-hd__fallback:focus-within .pgpl-hd__kbd {
	opacity: 0;
	pointer-events: none;
}

/*
 * No modifier key on a touch screen, so no hint. Gated on the pointer rather
 * than on width: a tablet with a keyboard is still a keyboard.
 */
@media (hover: none), (pointer: coarse) {
	.pgpl-hd__kbd {
		display: none;
	}
}

/* --- Submit --------------------------------------------------------------- */

/*
 * A circle inside a pill, inset evenly on all four sides.
 *
 * The plugin this replaces sat its button 5px from the top and bottom of the
 * field but 1px from the right edge, at a 9px radius inside a 12px one — three
 * mismatches that together made it look dropped in rather than built in.
 */
.pgpl-hd__go {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: #fff;
	cursor: pointer;
	background: var(--pgpl-ultra);
	border: 0;
	border-radius: 999px;
	transition: background-color 0.15s ease, transform 0.12s ease;
}

@media (hover: hover) and (pointer: fine) {
	.pgpl-hd__go:hover {
		background: var(--pgpl-ultra-deep);
	}
}

.pgpl-hd__go:active {
	transform: scale(0.94);
}

.pgpl-hd__go:focus-visible {
	outline: 2px solid var(--pgpl-ultra);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.pgpl-hd__go:active {
		transform: none;
	}
}

/* --- Actions -------------------------------------------------------------- */

.pgpl-hd__actions {
	display: flex;
	flex: 0 0 auto;
	gap: 0.35rem;
	align-items: center;
}

.pgpl-hd__action {
	position: relative;
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.5rem 0.7rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	/*
	 * Fully rounded, which resolves to a pill on desktop (where the control
	 * carries a label) and a circle on mobile (where it is a 42px square holding
	 * an 18px icon). The old 9px corners made these the only squared controls in
	 * a header built from 999px pills and 12-14px cards — beside the Browse
	 * button's pill they read as unfinished rather than deliberate.
	 */
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

/*
 * Hover is for pointers only.
 *
 * On a touch screen there is no "unhover": tapping an icon latches :hover and
 * the highlight stays painted until something else is tapped. Combined with
 * :focus doing the same thing, two icons could sit lit at once — which is what
 * made the bar look broken. Gating on `hover: hover` means a phone never enters
 * the state at all.
 */
@media (hover: hover) and (pointer: fine) {
	.pgpl-hd__action:hover {
		color: #fff;
		background: rgba(255, 255, 255, 0.07);
	}
}

/* Keyboard focus still needs to be visible — but not a mere tap. */
.pgpl-hd__action:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.07);
}

/*
 * Touch feedback: a press that ends when the finger lifts. This is what :hover
 * was standing in for on mobile, without the part where it gets stuck.
 */
.pgpl-hd__action:active {
	background: rgba(255, 255, 255, 0.13);
	transform: scale(0.94);
}

.pgpl-hd__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.3rem;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: var(--pgpl-ultra);
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
}

/*
 * Lifted out of the flow, which is what the `position: relative` on
 * .pgpl-hd__action was always for — that rule sat there for months with nothing
 * positioned against it.
 *
 * In flow the badge is a third flex child, and on mobile the action collapses to
 * a 42px square with `padding: 0`: an 18px icon plus a 6.4px gap plus an 18.4px
 * badge is 42.8px of content in a 42px box before the count even reaches two
 * digits, so it burst its own circle and crowded the burger beside it.
 */
/*
 * On desktop the badge stays IN FLOW — a third flex child after the label, so
 * the control reads "cart · Cart · (1)" on one line. It is lifted out of the
 * flow only on mobile, in the narrow-screen block near the end of this file,
 * where the label is clipped and the control is a 44px square. Pinning it at
 * every width put a filled circle on top of the word "Cart".
 */

/*
 * On the drawer's solid CTA the badge was ultramarine on ultramarine — the same
 * token for both — so the pill vanished and the count read as loose white text
 * beside the word "Cart". White pill, blue number: the same object, inverted.
 */
.pgpl-drawer__btn--solid .pgpl-hd__badge {
	color: var(--pgpl-ultra-deep);
	background: #fff;
}

.pgpl-hd__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: #fff;
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 999px;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

@media (hover: hover) and (pointer: fine) {
	.pgpl-hd__burger:hover {
		color: #fff;
		background: rgba(255, 255, 255, 0.07);
	}
}

.pgpl-hd__burger:focus-visible {
	background: rgba(255, 255, 255, 0.07);
}

.pgpl-hd__burger:active {
	background: rgba(255, 255, 255, 0.13);
	transform: scale(0.94);
}

/* --- Account menu --------------------------------------------------------- */

/*
 * The signed-in dropdown.
 *
 * It escapes the command band, which it could not have done before the aurora
 * glow was moved onto its own clipping layer — the band used to carry
 * `overflow: hidden` and would have sliced this panel off at its bottom edge,
 * the same way it was slicing the search suggestions.
 */
.pgpl-hd__acct {
	position: relative;
	flex: 0 0 auto;
}

/*
 * The phone's copy of the Account control, hidden wherever the dropdown shows.
 * Two elements rather than one that changes role at a breakpoint: a link and a
 * disclosure are different things, and `display: none` keeps whichever is not
 * in play out of the accessibility tree entirely.
 */
.pgpl-hd__action--compact {
	display: none;
}

.pgpl-hd__acct-toggle {
	cursor: pointer;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
}

.pgpl-hd__acct-toggle svg:last-child {
	width: 14px;
	height: 14px;
	opacity: 0.6;
	transition: transform 0.18s ease;
}

.pgpl-hd__acct-toggle[aria-expanded="true"] svg:last-child {
	transform: rotate(180deg);
}

/*
 * The initials chip, which is what makes this read as "you" rather than as one
 * more icon. Ultramarine so it belongs to the brand, and the only saturated
 * object in the bar apart from the search button.
 */
.pgpl-hd__acct-chip {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: #fff;
	background: linear-gradient(150deg, var(--pgpl-ultra), var(--pgpl-ultra-deep));
	border-radius: 9px;
}

.pgpl-hd__acct-chip--lg {
	width: 40px;
	height: 40px;
	font-size: 0.95rem;
	border-radius: 12px;
}

.pgpl-hd__acct-menu[hidden] {
	display: none;
}

.pgpl-hd__acct-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 40;
	/*
	 * Sized to what is in it, within bounds.
	 *
	 * A flat 19rem was set while the membership badge still shared the identity
	 * row; once that went, the widest thing in here measured 201px inside a
	 * 304px panel — ninety pixels of empty right-hand side that made the menu
	 * look unfinished. max-content lets the address decide the width, the floor
	 * stops a short name collapsing it to a sliver, and the ceiling both caps a
	 * long address (which then ellipses, as it already did) and keeps the panel
	 * on screen at any viewport.
	 */
	width: max-content;
	min-width: 14rem;
	max-width: min(20rem, calc(100vw - 2rem));
	padding: 0.45rem;
	background: var(--pgpl-aurora-panel);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	/* Two shadows: a hairline lift that separates it from the bar, and a long
	   soft one that puts it convincingly in front of the page. */
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 28px 60px -22px rgba(0, 0, 0, 0.85);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.pgpl-hd__acct-menu.is-open {
	opacity: 1;
	transform: translateY(0);
}

/* --- Identity row --------------------------------------------------------- */

.pgpl-hd__acct-id {
	display: flex;
	gap: 0.65rem;
	align-items: center;
	padding: 0.7rem 0.7rem 0.85rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pgpl-hd__acct-id-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.pgpl-hd__acct-id-text strong {
	font-size: 0.9rem;
	font-weight: 700;
	color: #fff;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* An address is long and is not the point — it confirms which account this is. */
.pgpl-hd__acct-mail {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.62);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* --- Menu rows ------------------------------------------------------------ */

/* The divider lives on the list, not on the log-out row — a border there would
   sit inside that row's own hover pill and read as a seam across it. */
.pgpl-hd__acct-nav ul {
	margin: 0.45rem 0;
	padding: 0 0 0.45rem;
	list-style: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pgpl-hd__acct-nav a,
.pgpl-hd__acct-out {
	display: flex;
	gap: 0.65rem;
	align-items: center;
	min-height: 40px;
	padding: 0 0.7rem;
	font-size: 0.86rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	border-radius: 11px;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.pgpl-hd__acct-nav a svg,
.pgpl-hd__acct-out svg {
	flex: 0 0 auto;
	opacity: 0.72;
}

/*
 * Gated on pointer type, like everything else in this file that highlights:
 * a tap on a touch screen has no "unhover" and would leave a row lit.
 */
@media (hover: hover) and (pointer: fine) {
	.pgpl-hd .pgpl-hd__acct-nav a:hover,
	.pgpl-hd .pgpl-hd__acct-out:hover {
		color: #fff;
		background: rgba(255, 255, 255, 0.08);
	}
}

.pgpl-hd .pgpl-hd__acct-nav a:focus-visible,
.pgpl-hd .pgpl-hd__acct-out:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.pgpl-hd .pgpl-hd__acct-nav a:active,
.pgpl-hd .pgpl-hd__acct-out:active {
	background: rgba(255, 255, 255, 0.13);
}

/*
 * Log out sits below a rule and reads cooler than the navigation above it. It
 * is the one item here that ends the session rather than going somewhere, and
 * it should not be the thing a hurried cursor lands on by accident.
 */
.pgpl-hd__acct-out {
	color: rgba(255, 255, 255, 0.62);
}

.pgpl-hd__acct-out svg {
	opacity: 0.6;
}

/* --- Browse button + panel ------------------------------------------------ */

.pgpl-hd__browse {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.55rem 0.95rem;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.9);
	cursor: pointer;
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pgpl-hd__browse:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.16);
}

/* Inverted while open, so the button reads as part of the panel it controls. */
.pgpl-hd__browse[aria-expanded="true"] {
	color: var(--pgpl-aurora);
	background: #fff;
	border-color: #fff;
}

/* The chevron flips to point at the panel it opened. */
.pgpl-hd__browse svg:last-child {
	transition: transform 0.18s ease;
}

.pgpl-hd__browse[aria-expanded="true"] svg:last-child {
	transform: rotate(180deg);
}

.pgpl-hd__panel[hidden] {
	display: none;
}

/* The panel continues the bar's surface — a white sheet under a dark bar reads
   as a different component that happened to open, not as the bar extending. */
.pgpl-hd__panel {
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	background: var(--pgpl-aurora-panel);
	box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.9);
	/* Animated open; the [hidden] attribute is removed a frame earlier by JS. */
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.pgpl-hd__panel.is-open {
	opacity: 1;
	transform: translateY(0);
}

.pgpl-hd__panel .pgpl-hd__wrap {
	display: block;
}

.pgpl-hd__panel-grid {
	display: grid;
	/* Wider minimum: 10rem let six tracks form for four columns, and the two
	   empty ones collapsed to 0px while the filled ones stayed narrow. */
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 2rem 2.5rem;
	padding: 2.25rem 0 2.5rem;
	align-items: start;
}

/* A hairline under each heading gives the columns a shared baseline to sit on. */
.pgpl-hd__col-title {
	display: block;
	padding-bottom: 0.7rem;
	margin-bottom: 0.7rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

a.pgpl-hd__col-title:hover,
a.pgpl-hd__col-title:focus {
	color: #fff;
}

.pgpl-hd__col-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pgpl-hd__col-list li {
	margin: 0 0 0.15rem;
}

.pgpl-hd__col-list a {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	padding: 0.4rem 0.6rem;
	margin-left: -0.6rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	border-radius: 8px;
	/* transform is animated, not margin — margin would reflow the column. */
	transition: color 0.14s ease, background-color 0.14s ease, transform 0.14s ease;
}

.pgpl-hd__col-list a:hover,
.pgpl-hd__col-list a:focus {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	transform: translateX(3px);
}

/*
 * The icon tile.
 *
 * Every link gets one, and every tile is the same size whether it holds an SVG
 * or a single letter — that shared footprint is what makes the column read as a
 * list rather than as ragged text. The monogram is a feature, not a fallback:
 * eleven CMS names have no meaningful shared icon, and repeating one generic
 * glyph eleven times reads as a bug.
 */
.pgpl-hd__ico {
	display: grid;
	flex: 0 0 1.6rem;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 7px;
	transition: color 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
}

.pgpl-hd__ico svg {
	width: 14px;
	height: 14px;
}

.pgpl-hd__col-list a:hover .pgpl-hd__ico,
.pgpl-hd__col-list a:focus .pgpl-hd__ico {
	color: #fff;
	background: var(--pgpl-ultra);
	border-color: var(--pgpl-ultra);
}

/* --- Membership card ------------------------------------------------------ */

/*
 * The only thing in the panel that is selling rather than navigating, so it is
 * the only thing given colour, depth and a border.
 *
 * Depth comes from four stacked layers, not one gradient: a deep navy base, a
 * diagonal ultramarine wash, a soft radial highlight top-right, and a 1px
 * inset white line that reads as a lit edge. A single two-stop gradient is what
 * makes a card look like a coloured rectangle instead of an object.
 */
.pgpl-hd__promo {
	position: relative;
	overflow: hidden;
	/* Grid items stretch to the row height by default, so a long category list
	   dragged this card to 451px of mostly empty gradient. */
	align-self: start;
	padding: 1.35rem 1.4rem 1.4rem;
	color: #fff;
	background:
		radial-gradient(120% 90% at 85% 0%, rgba(120, 150, 255, 0.55) 0%, rgba(120, 150, 255, 0) 60%),
		linear-gradient(155deg, #2436e4 0%, #1b29b8 55%, #131c86 100%);
	border-radius: 16px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 18px 30px -18px rgba(19, 28, 134, 0.75);
}

/*
 * A large, very soft orb bleeding off the bottom-left corner. Blur plus low
 * opacity keeps it as texture rather than a shape you notice.
 */
.pgpl-hd__promo::after {
	content: "";
	position: absolute;
	bottom: -55%;
	left: -25%;
	width: 80%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
}

.pgpl-hd__promo > * {
	position: relative;
	z-index: 1;
}

.pgpl-hd__promo-eyebrow {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.55rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
}

.pgpl-hd__promo-title {
	margin: 0.75rem 0 0;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.22;
	/* Tightened tracking is most of what separates a display line from body copy. */
	letter-spacing: -0.02em;
	color: #fff;
	text-wrap: balance;
}

.pgpl-hd__promo-body {
	margin: 0.4rem 0 1.1rem;
	font-size: 0.8rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}

.pgpl-hd__promo-btn,
.pgpl-hd__promo-btn:link,
.pgpl-hd__promo-btn:visited {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.55rem 1.1rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--pgpl-ultra-deep);
	text-decoration: none;
	background: #fff;
	border-radius: 9px;
	box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/*
 * The one LIGHT surface in the chrome that holds a link, so it has to opt out of
 * the white-on-hover guard above — white text on a white button is invisible.
 *
 * The extra `.pgpl-hd` is doing real work: at (0,2,0) this rule loses to the
 * guard's (0,2,1), because an element selector still breaks the tie. Two classes
 * plus the pseudo puts it at (0,3,0) and back in control of its own colour.
 */
.pgpl-hd .pgpl-hd__promo-btn:hover,
.pgpl-hd .pgpl-hd__promo-btn:focus {
	color: var(--pgpl-ultra-deep);
	transform: translateY(-1px);
	box-shadow: 0 10px 18px -8px rgba(0, 0, 0, 0.55);
}

.pgpl-hd__promo-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/*
 * The desktop navigation band that used to live here is gone.
 *
 * .pgpl-hd__nav, .pgpl-hd__menu-list and their .sub-menu dropdowns — 79 lines
 * — styled markup header.php stopped emitting when the nav bar folded into the
 * Browse panel. Nothing in header.php, footer.php, chrome.php or chrome.js has
 * referenced any of those classes since, so every rule was dead, and two live
 * rules elsewhere in this file were still naming .sub-menu in their selector
 * lists and quietly doing nothing.
 */
/* ---------------------------------------------------------------------------
 * Mobile drawer
 * ------------------------------------------------------------------------ */

.pgpl-drawer[hidden] {
	display: none;
}

.pgpl-drawer {
	position: fixed;
	inset: 0;
	z-index: 999;
}

.pgpl-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(4, 6, 14, 0.6);
	/* Blur the page behind so the panel reads as a layer, not a patch.
	   Safari needed the prefix until 18, which is most of the iPhones this
	   drawer exists for — unprefixed, they got a flat grey wash. */
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.24s ease;
}

.pgpl-drawer__panel {
	position: absolute;
	inset-block: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	/*
	 * Wider than the old fixed 320px: category names like "Best WordPress
	 * Plugins" wrapped to two lines at 320, and a wrapped nav row reads as
	 * broken. Capped so it never becomes a full-screen takeover on a tablet.
	 */
	width: min(92vw, 400px);
	max-width: 100%;
	background: var(--pgpl-aurora-panel);
	border-left: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
	transform: translateX(100%);
	transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.pgpl-drawer.is-open .pgpl-drawer__scrim {
	opacity: 1;
}

.pgpl-drawer.is-open .pgpl-drawer__panel {
	transform: translateX(0);
}

/* --- Pinned head ---------------------------------------------------------- */

.pgpl-drawer__head {
	display: flex;
	flex: 0 0 auto;
	gap: 0.6rem;
	align-items: center;
	/* env() keeps the head clear of a notch in landscape. */
	padding: 1rem calc(1.15rem + env(safe-area-inset-right)) 1rem 1.15rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pgpl-drawer__close {
	display: inline-flex;
	flex: 0 0 auto;
	/* 44px — the smallest target Apple and WCAG both consider reliable. */
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	/* The same icon-button component as the bar, so it takes the same shape. */
	border-radius: 999px;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.pgpl-drawer .pgpl-drawer__close:hover,
.pgpl-drawer .pgpl-drawer__close:focus {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

/* --- Scrolling middle ----------------------------------------------------- */

.pgpl-drawer__scroll {
	flex: 1 1 auto;
	padding: 0.9rem 1.15rem 1.4rem;
	overflow-y: auto;
	/* Stop a flick at the end of the list from scrolling the page underneath. */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* The changelog chip, restated for the drawer's narrower measure. */
.pgpl-drawer__updates {
	display: flex;
	gap: 0.55rem;
	align-items: center;
	min-height: 44px;
	margin-bottom: 1rem;
	padding: 0.6rem 0.85rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.85rem;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 14px;
}

.pgpl-drawer__updates-label {
	font-weight: 600;
}

.pgpl-drawer__updates-when {
	margin-left: auto;
	color: rgba(255, 255, 255, 0.5);
}

/* --- Rows ----------------------------------------------------------------- */

.pgpl-drawer__list,
.pgpl-drawer__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pgpl-drawer__item + .pgpl-drawer__item {
	margin-top: 2px;
}

/*
 * One shared row shape for both the <a> destinations and the <button>
 * disclosures. They must be visually identical — the difference between them is
 * what they DO, and encoding that difference in the styling too would just make
 * the list look inconsistent.
 */
.pgpl-drawer__row {
	display: flex;
	width: 100%;
	gap: 0.75rem;
	align-items: center;
	padding: 0.6rem 0.7rem;
	color: rgba(255, 255, 255, 0.92);
	/* Buttons do not inherit the page font, and half these rows ARE buttons — so
	   without this the disclosures rendered in the system UI font directly beside
	   link rows in the theme's, which is exactly the inconsistency the comment
	   above forbids. .pgpl-hd__browse needs the same line for the same reason. */
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	text-decoration: none;
	background: none;
	border: 0;
	border-radius: 14px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * "You are here" must not be reachable by accident.
 *
 * :hover and .is-current resolved to the identical declaration, and this rule
 * was not gated on pointer type — in a drawer that only ever opens on touch. A
 * tap latched :hover on whatever row was pressed and left it painted exactly
 * like the current page until something else was tapped, so the list could show
 * two "current" rows, neither of them right. The header's actions were already
 * gated for this; the drawer was not.
 *
 * Beats GeneratePress's `a:hover { color: var(--contrast) }` at (0,1,1).
 */
.pgpl-drawer .pgpl-drawer__row.is-current {
	color: #fff;
	background: rgba(255, 255, 255, 0.07);
}

.pgpl-drawer .pgpl-drawer__row:focus {
	color: #fff;
	background: rgba(255, 255, 255, 0.07);
}

@media (hover: hover) and (pointer: fine) {
	.pgpl-drawer .pgpl-drawer__row:hover {
		color: #fff;
		background: rgba(255, 255, 255, 0.07);
	}
}

/* Touch feedback that ends when the finger lifts, replacing the latched hover. */
.pgpl-drawer .pgpl-drawer__row:active {
	color: #fff;
	background: rgba(255, 255, 255, 0.13);
}

.pgpl-drawer__row-text {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * The glyph badge. Fixed 34px whether it holds an icon or a letter, so every
 * label in the list starts on the same vertical line.
 */
.pgpl-drawer__glyph {
	display: inline-flex;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.8rem;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 11px;
}

.pgpl-drawer__glyph svg {
	width: 17px;
	height: 17px;
}

.pgpl-drawer__row:hover .pgpl-drawer__glyph,
.pgpl-drawer__row.is-current .pgpl-drawer__glyph {
	color: #fff;
	background: rgba(108, 134, 255, 0.22);
	border-color: rgba(108, 134, 255, 0.4);
}

/*
 * How many things are behind this row. It sets expectations before the tap —
 * "Other CMS · 12" is a different decision from "Other CMS · 2".
 */
.pgpl-drawer__count {
	flex: 0 0 auto;
	padding: 0.1rem 0.42rem;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.7rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	background: rgba(255, 255, 255, 0.07);
	border-radius: 999px;
}

.pgpl-drawer__caret,
.pgpl-drawer__go {
	display: inline-flex;
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.45);
	transition: transform 0.22s ease, color 0.15s ease;
}

.pgpl-drawer__caret svg,
.pgpl-drawer__go svg {
	width: 15px;
	height: 15px;
}

.pgpl-drawer__row--toggle.is-open .pgpl-drawer__caret {
	color: #fff;
	transform: rotate(180deg);
}

.pgpl-drawer__row:hover .pgpl-drawer__go {
	color: #fff;
	transform: translateX(2px);
}

/* --- Expanded section ----------------------------------------------------- */

.pgpl-drawer__sub[hidden] {
	display: none;
}

.pgpl-drawer__sub {
	overflow: hidden;
}

.pgpl-drawer__sublist {
	/*
	 * A hairline rail tying the children to their parent. Cheaper and steadier
	 * than indenting alone, which at this width would crush the labels.
	 */
	margin: 0.15rem 0 0.4rem 1.25rem;
	padding-left: 0.85rem;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/*
 * min-height 44, like the close button and the foot CTAs.
 *
 * These rows sized themselves from their content — 42px with a glyph, 35px on
 * the glyphless "All …" row — in the one part of the site that is touch-only.
 * The drawer already held 44px as the standard in three places; the sublists
 * were simply never measured against it.
 */
.pgpl-drawer__sublink,
.pgpl-drawer__sub-all {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 0.6rem;
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.9rem;
	text-decoration: none;
	border-radius: 11px;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.pgpl-drawer .pgpl-drawer__sublink:hover,
.pgpl-drawer .pgpl-drawer__sublink:focus,
.pgpl-drawer .pgpl-drawer__sub-all:hover,
.pgpl-drawer .pgpl-drawer__sub-all:focus,
.pgpl-drawer .pgpl-drawer__sublink.is-current {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

.pgpl-drawer .pgpl-drawer__sublink.is-current {
	font-weight: 600;
}

/* The child glyphs are quieter than their parent's — they are a level down. */
.pgpl-drawer__sublink .pgpl-drawer__glyph {
	flex-basis: 26px;
	width: 26px;
	height: 26px;
	font-size: 0.68rem;
	border-radius: 8px;
}

.pgpl-drawer__sublink .pgpl-drawer__glyph svg {
	width: 14px;
	height: 14px;
}

/* "All WordPress" — the parent link, which collapsing must not hide. */
.pgpl-drawer__sub-all {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* --- Pinned foot ---------------------------------------------------------- */

.pgpl-drawer__foot {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	/* The inset keeps the buttons above the iPhone home indicator. */
	padding: 0.9rem 1.15rem calc(0.9rem + env(safe-area-inset-bottom));
	background: var(--pgpl-aurora-deep);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pgpl-drawer__btns {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: 1fr 1fr;
}

.pgpl-drawer__btn {
	display: inline-flex;
	gap: 0.45rem;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0.6rem 0.8rem;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	transition: background-color 0.15s ease;
}

.pgpl-drawer__btn svg {
	width: 17px;
	height: 17px;
}

.pgpl-drawer .pgpl-drawer__btn:hover,
.pgpl-drawer .pgpl-drawer__btn:focus {
	color: #fff;
	background: rgba(255, 255, 255, 0.13);
}

.pgpl-drawer .pgpl-drawer__btn--solid,
.pgpl-drawer .pgpl-drawer__btn--solid:link,
.pgpl-drawer .pgpl-drawer__btn--solid:visited,
.pgpl-drawer .pgpl-drawer__btn--solid:hover,
.pgpl-drawer .pgpl-drawer__btn--solid:focus {
	color: #fff;
	background: var(--pgpl-ultra);
	border-color: transparent;
}

/*
 * Pushed to the right of the head, so the brand keeps the left edge and the
 * currency sits with the close button as a pair of controls.
 */
.pgpl-drawer__currency {
	flex: 0 1 auto;
	margin-left: auto;
	min-width: 0;
}

/*
 * Slightly tighter horizontally than the desktop band's, to share a 294px head
 * at 320px — but tall enough to hit. At 0.22rem of vertical padding on 11.5px
 * text these were roughly 24px high with a 2px gap between them, the smallest
 * tap targets anywhere in the drawer and sitting in its pinned head where they
 * are permanently reachable.
 */
.pgpl-drawer__currency .pgpl-hd__chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 0.55rem;
}

/*
 * The active chip is a WHITE pill, so its label must stay dark. A blanket
 * `color:#fff` here painted white text on a white background and the selected
 * currency simply disappeared — the drawer showed a blank pill next to "INR".
 */
.pgpl-drawer__currency .pgpl-hd__chip.is-active {
	color: var(--pgpl-ink);
}

/*
 * A focus ring for keyboard users only. :focus-visible, not :focus — the drawer
 * moves focus on open, and a ring drawn around the logo after a thumb tap looks
 * like a rendering fault.
 *
 * White, because ultramarine on this panel measured 2.39:1 — under the 3:1 that
 * WCAG requires of a focus indicator, and this is the only one the drawer has:
 * the rule below removes the browser's. A keyboard user had no reliable way to
 * see where they were. The same #2436e4 is legible in the header only because
 * the header never draws it on a dark navy surface.
 */
.pgpl-drawer :focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.pgpl-drawer :focus:not(:focus-visible) {
	outline: none;
}


/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------ */

/*
 * The footer is built from the header's material, not its own.
 *
 * It used to be a flat slab of --pgpl-night while the header carried the Aurora
 * gradient and its glow, so the two ends of the page looked like they came from
 * different sites. Same base, same glow, same pills and cards — the page is now
 * bookended rather than merely terminated.
 */
.pgpl-ft {
	position: relative;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.72);
	background: var(--pgpl-aurora-deep);
	font-size: 0.9rem;
}

/*
 * The glow, mirrored from the header. Weaker and higher than it was: it used to
 * light the membership band, and with that gone the same intensity would have
 * been a bright halo behind nothing in particular.
 */
.pgpl-ft::before {
	content: "";
	position: absolute;
	top: -55%;
	left: 50%;
	width: min(1100px, 120%);
	height: 420px;
	background: radial-gradient(ellipse at center, rgba(108, 134, 255, 0.11), transparent 70%);
	transform: translateX(-50%);
	pointer-events: none;
}

.pgpl-ft__wrap {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4rem) max(1rem, env(safe-area-inset-left)) 1.5rem;
}


.pgpl-ft a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.15s ease;
}

.pgpl-ft a:hover,
.pgpl-ft a:focus {
	color: #fff;
}

/*
 * 1.2fr of a 1240px grid gave the brand block ~440px for 370px of content, so a
 * band of dead space ran down the middle of the footer while the three link
 * columns were squeezed against the right edge. 1fr / 1.6fr closes it.
 */
.pgpl-ft__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: 2rem;
}

/* --- Brand ---------------------------------------------------------------- */

/* Grid child: without min-width:0 a long tagline word can widen the column. */
.pgpl-ft__brand {
	min-width: 0;
}

/* --- Wordmark (shared by header, drawer and footer) ----------------------- */

/*
 * "Pure" inherits its colour so the same markup reads correctly on the header's
 * white and the footer's navy. Only the GPL pill is pinned — it is the brand,
 * and it should not change with its surroundings.
 */
/*
 * The wordmark is the one thing here that must be in the DISPLAY face.
 *
 * chrome.php enqueues Bricolage Grotesque on every page — and this file did not
 * name a single font, so the brand mark inherited the body's Poppins and the
 * header rendered the shop's name in the wrong typeface everywhere it appears.
 * The stack matches single-download.css's `--display` exactly; declared
 * literally rather than as var(--display) because that token is defined per
 * template, and the chrome renders on pages that define none.
 *
 * Not applied to menu labels or actions: those are interface text and belong in
 * the body face, which is why the rest of this file inherits.
 */
.pgpl-mark {
	display: inline-flex;
	align-items: baseline;
	font-family: "Bricolage Grotesque", "Poppins", system-ui, sans-serif;
	font-weight: 800;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.pgpl-mark--sm { font-size: 1.1rem; }
.pgpl-mark--md { font-size: 1.35rem; }
.pgpl-mark--lg { font-size: 1.55rem; }

.pgpl-mark__pure {
	color: currentColor;
}

.pgpl-mark__gpl {
	margin-left: 0.22em;
	padding: 0 0.3em;
	color: #fff;
	background: var(--pgpl-ultra);
	border-radius: 0.25em;
}

/*
 * The header is dark, so the mark inherits white — and EVERY state is declared.
 *
 * GeneratePress ships `a:hover, a:focus, a:active { color: var(--contrast) }`,
 * which is #222. At (0,1,1) that outranks a single class, so a link here that
 * only declares its resting colour turns near-black the moment it is hovered —
 * invisible on this bar. Scoping with the parent lifts these to (0,2,0) and
 * settles it. The same trap caught the footer wordmark and the checkout button.
 */
.pgpl-hd .pgpl-hd__brand,
.pgpl-hd .pgpl-hd__brand:link,
.pgpl-hd .pgpl-hd__brand:visited,
.pgpl-hd .pgpl-hd__brand:hover,
.pgpl-hd .pgpl-hd__brand:focus,
.pgpl-hd .pgpl-hd__brand:active,
.pgpl-drawer .pgpl-drawer__brand,
.pgpl-drawer .pgpl-drawer__brand:link,
.pgpl-drawer .pgpl-drawer__brand:visited,
.pgpl-drawer .pgpl-drawer__brand:hover,
.pgpl-drawer .pgpl-drawer__brand:focus,
.pgpl-drawer .pgpl-drawer__brand:active {
	color: #fff;
	text-decoration: none;
}

.pgpl-hd .pgpl-hd__brand:hover .pgpl-mark__gpl,
.pgpl-hd .pgpl-hd__brand:focus .pgpl-mark__gpl {
	background: var(--pgpl-ultra-deep);
}

/*
 * Scoped with .pgpl-ft so it outranks the generic `.pgpl-ft a` rule, which is
 * (0,1,1) and was otherwise winning — rendering the wordmark at the footer's
 * 72%% link opacity instead of white.
 */
.pgpl-ft .pgpl-ft__word {
	display: inline-flex;
	color: #fff;
	text-decoration: none;
}

/*
 * 34ch capped the tagline at 308px inside a 440px column, so a band of empty
 * space sat between the brand block and the link columns and read as a layout
 * fault rather than as breathing room. 46ch still sits inside the comfortable
 * 45-75 character measure while using the column it was given.
 */
.pgpl-ft__tagline {
	max-width: 46ch;
	margin: 0.9rem 0 0;
	line-height: 1.6;
}

.pgpl-ft__social {
	display: flex;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.pgpl-ft__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.1);
	/* Circles, like every other icon-only control in the chrome. */
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
	.pgpl-ft__social a:hover {
		color: #fff;
		background: var(--pgpl-ultra);
		border-color: transparent;
		transform: translateY(-2px);
	}
}

.pgpl-ft__social a:focus-visible {
	color: #fff;
	background: var(--pgpl-ultra);
}

.pgpl-ft__social a:active {
	transform: scale(0.94);
}

/* --- Columns -------------------------------------------------------------- */

.pgpl-ft__columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.pgpl-ft__column-title {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0 0 0.75rem;
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	/* list-style + ::marker together remove the disclosure triangle everywhere. */
	list-style: none;
}

.pgpl-ft__column-title::-webkit-details-marker {
	display: none;
}

/* The chevron is only meaningful while these actually collapse. */
.pgpl-ft__column-title svg {
	display: none;
	width: 14px;
	height: 14px;
	margin-left: auto;
	transition: transform 0.2s ease;
}

.pgpl-ft__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pgpl-ft__links li {
	margin: 0 0 0.5rem;
}

/*
 * A hover affordance the old flat list never had. The nudge is the same 2px
 * used by the drawer rows and the changelog chevron, so movement means the same
 * thing everywhere in the chrome.
 */
.pgpl-ft__links a {
	display: inline-block;
	transition: color 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
	.pgpl-ft__links a:hover {
		transform: translateX(2px);
	}
}

/* --- Legal ---------------------------------------------------------------- */

.pgpl-ft__legal {
	padding: 1rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pgpl-ft__legal-toggle {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	font-size: 0.82rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	list-style: none;
}

.pgpl-ft__legal-toggle::-webkit-details-marker {
	display: none;
}

.pgpl-ft__legal-toggle:hover {
	color: #fff;
}

.pgpl-ft__legal-toggle svg {
	transition: transform 0.2s ease;
}

.pgpl-ft__legal[open] .pgpl-ft__legal-toggle svg {
	transform: rotate(180deg);
}

.pgpl-ft__legal-toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.pgpl-ft__legal-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.5rem;
	margin-top: 1.25rem;
}

.pgpl-ft__legal-title {
	margin: 0 0 0.4rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.pgpl-ft__legal-body p {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.55);
}

.pgpl-ft__legal-body a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: underline;
}

/* --- Bottom --------------------------------------------------------------- */

.pgpl-ft__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding-top: 1.25rem;
}

.pgpl-ft__copy {
	margin: 0;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.5);
}

.pgpl-ft__pay-group {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
}

/*
 * Five card marks with nothing said about them are decoration. Naming what they
 * mean turns the same pixels into the reassurance a first-time buyer is looking
 * for at exactly the point they are deciding whether to trust the checkout.
 */
.pgpl-ft__secure {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.78rem;
	font-weight: 600;
}

.pgpl-ft__secure svg {
	width: 15px;
	height: 15px;
	color: #4ade80;
}

.pgpl-ft__pay {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pgpl-ft__pay li {
	display: flex;
	margin: 0;
}

.pgpl-ft__pay svg {
	display: block;
	border-radius: 4px;
}

/* ---------------------------------------------------------------------------
 * Narrow screens
 * ------------------------------------------------------------------------ */

/*
 * ---------------------------------------------------------------------------
 * Phone and small tablet
 * ---------------------------------------------------------------------------
 *
 * The bar becomes TWO rows: brand and actions on the first, search across the
 * full width of the second.
 *
 * It has to. On a 390px screen the single row gave the search 108px of shell —
 * but Ajax Search Pro sizes its own inner box and stayed at 200px, so its submit
 * button was painted at x283-323 directly on top of the cart icon at x294-328.
 * Twenty-nine pixels of the cart were unreachable. Squeezing the row harder
 * would not have fixed that; the search needed its own line.
 *
 * It is also the right call independently. Search is how anyone actually finds
 * something in a 16,718-product catalogue — on a phone it deserves a full row,
 * not the scraps left over after four other controls.
 */
@media (max-width: 60rem) {
	.pgpl-hd__utility {
		display: none;
	}

	.pgpl-hd__browse,
	.pgpl-hd__panel {
		display: none;
	}

	/*
	 * The account dropdown is desktop-only, like Browse. On a phone the drawer
	 * already carries the whole account menu, and the control reverts to the
	 * direct link it has always been.
	 */
	.pgpl-hd__acct {
		display: none;
	}

	.pgpl-hd__action--compact {
		display: inline-flex;
	}

	.pgpl-hd__burger {
		display: inline-flex;
	}

	/*
	 * Hidden from the eye, kept for the accessibility tree.
	 *
	 * `display: none` here removed the only text node from Account and Cart, and
	 * their icons are aria-hidden — so on every phone and tablet both controls
	 * announced as an empty link. The cart's screen-reader sentence only exists
	 * when the cart is non-empty, so it covered nothing. Clipping instead keeps
	 * the label readable to assistive tech while it stays invisible on screen.
	 */
	.pgpl-hd__action-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.pgpl-hd__command .pgpl-hd__wrap {
		flex-wrap: wrap;
		min-height: 0;
		gap: 0.6rem 0.75rem;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	/*
	 * Explicit order, so the source stays in the desktop's logical reading order
	 * (brand → search → actions) while the phone shows brand → actions → search.
	 *
	 * This is a KNOWN, deliberate trade, kept after review — do not "fix" it by
	 * reordering the markup.
	 *
	 * One DOM order cannot match two different visual orders, and the two
	 * breakpoints genuinely want different ones. Whichever way the source is
	 * written, tab order disagrees with the eye at one breakpoint. Leaving the
	 * source as brand → search → actions puts the disagreement on mobile, where
	 * there is no Tab key and where a screen reader swipes the source order
	 * anyway — brand, search, actions, which reads perfectly well. Reordering the
	 * markup would move the disagreement onto desktop, which is where physical
	 * keyboards actually are, and would make Tab jump right to the account icons
	 * and then back left to the search field.
	 *
	 * The residual case is a sighted keyboard user on a window narrower than
	 * 960px. That is the smaller harm, and it is the one we chose.
	 */
	.pgpl-hd__brand {
		order: 1;
	}

	.pgpl-hd__actions {
		order: 2;
		margin-left: auto;
		gap: 0.15rem;
	}

	.pgpl-hd__search {
		order: 3;
		/* The whole second row. flex-basis 100% forces the wrap. */
		flex: 1 1 100%;
		width: 100%;
	}

	/*
	 * Ajax Search Pro sizes its wrappers itself and ignores the flex shell around
	 * them. Without this the plugin's 200px box overhangs a 108px container and
	 * lands on the cart icon. Scoped to our header and to phone widths only.
	 */
	/* Comfortable thumb targets; 16px stops iOS zooming the page on focus. */
	.pgpl-hd__search input[type="search"],
	.pgpl-hd__search input[type="text"],
	.pgpl-hd__search .orig,
	.pgpl-hd__search .autocomplete {
		font-size: 16px !important;
	}

	/*
	 * Icon-only, so the box must centre its glyph.
	 *
	 * .pgpl-hd__action is a flex row built for icon + label. With the label
	 * hidden it kept flex-start, so an 18px icon sat against the left edge of a
	 * 42px box and the highlight appeared to hang off to one side — the thing
	 * that read as "the hover is wrong". The burger already centred; the links
	 * never did.
	 */
	/*
	 * 44px, not 42. These are touch-only controls — the burger renders nowhere
	 * else — and this file already calls 44 "the smallest target Apple and WCAG
	 * both consider reliable" where the drawer's close button is sized. Missing
	 * it by two pixels on the three controls a phone visitor actually taps was
	 * the one place that standard was not applied.
	 */
	.pgpl-hd__action,
	.pgpl-hd__burger {
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
	}

	/*
	 * Here — and only here — the badge comes out of the flow.
	 *
	 * With the label clipped, the action is a 44px square holding an 18px icon.
	 * In flow the badge was still a flex sibling: 18px icon + 6.4px gap + an
	 * 18.4px badge is over 42px of content before the count reaches two digits,
	 * so it burst the circle and crowded the burger next to it. Pinned to the
	 * corner it sits over the icon's own dead space, which is what the
	 * `position: relative` on .pgpl-hd__action was always there for.
	 *
	 * The ring is the bar's own colour, so the badge reads as a separate object
	 * rather than a blob fused to the icon.
	 */
	.pgpl-hd__action .pgpl-hd__badge {
		position: absolute;
		top: 1px;
		right: 1px;
		pointer-events: none;
		box-shadow: 0 0 0 2px var(--pgpl-aurora);
	}

	/* The wordmark simply gets smaller; no separate mobile asset needed. */
	.pgpl-hd__brand .pgpl-mark {
		font-size: 1.15rem;
	}

	.pgpl-ft__top {
		grid-template-columns: minmax(0, 1fr);
	}

}

/*
 * Phone: the link columns collapse.
 *
 * Stacked open they ran the footer to 750px with an orphaned third column
 * sitting alone on its own row. Closed, the whole footer fits in roughly half
 * that, and the headings become a scannable index instead of three long lists
 * someone has to swipe past to reach the copyright.
 */
@media (max-width: 40rem) {
	.pgpl-ft__columns {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.pgpl-ft__column {
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}

	.pgpl-ft__column-title {
		margin: 0;
		padding: 0.95rem 0;
		font-size: 0.78rem;
		letter-spacing: 0.08em;
	}

	.pgpl-ft__column-title svg {
		display: block;
	}

	.pgpl-ft__column[open] .pgpl-ft__column-title svg {
		transform: rotate(180deg);
	}

	.pgpl-ft__links {
		padding-bottom: 0.85rem;
	}

	.pgpl-ft__links li {
		margin: 0 0 0.75rem;
	}

	.pgpl-ft__bottom {
		align-items: flex-start;
		flex-direction: column;
	}
}

/*
 * Everything that MOVES, not a sample of it.
 *
 * This list covered five selectors, one of which (.pgpl-hd__menu-list .sub-menu)
 * had no markup left to match, while the Browse panel's slide, the accordion
 * caret's 180° spin, every column-link and arrow nudge and the footer's social
 * lift all kept animating. Someone who has asked the operating system to stop
 * motion had most of the chrome ignore them.
 *
 * Transitions are removed rather than zeroed, and the transformed elements are
 * pinned at their resting position, so nothing lands mid-animation. The one
 * transform that must survive is the caret's open state — it is the only signal
 * that a section is expanded, so it snaps instead of sliding.
 */
@media (prefers-reduced-motion: reduce) {
	.pgpl-hd__action,
	.pgpl-hd__burger,
	.pgpl-drawer__panel,
	.pgpl-drawer__scrim,
	.pgpl-hd__panel,
	.pgpl-hd__acct-menu,
	.pgpl-hd__acct-toggle svg:last-child,
	.pgpl-hd__acct-nav a,
	.pgpl-hd__acct-out,
	.pgpl-hd__updates-arrow,
	.pgpl-hd__col-list a,
	.pgpl-hd__promo-btn,
	.pgpl-hd__browse svg,
	.pgpl-drawer__caret,
	.pgpl-drawer__go,
	.pgpl-drawer__row,
	.pgpl-ft__social a,
	.pgpl-ft__links a,
	.pgpl-ft__legal-toggle svg {
		transition: none;
	}

	/* No press-scale, and no decorative travel, for anyone who has asked
	   motion to stop. */
	.pgpl-hd__action:active,
	.pgpl-hd__burger:active,
	.pgpl-hd__updates:hover .pgpl-hd__updates-arrow,
	.pgpl-hd__updates:focus .pgpl-hd__updates-arrow,
	.pgpl-hd__col-list a:hover,
	.pgpl-hd__col-list a:focus,
	.pgpl-hd__promo-btn:hover,
	.pgpl-hd__promo-btn:focus,
	.pgpl-drawer__row:hover .pgpl-drawer__go,
	.pgpl-ft__social a:hover,
	.pgpl-ft__social a:focus,
	.pgpl-ft__links a:hover,
	.pgpl-ft__links a:focus {
		transform: none;
	}
}