/* pgpl-checkout */
/* =========================================================================
   PureGPL — Checkout (checkout.php)

   Homepage design language, composed for a checkout. The tokens and atoms are
   the homepage's (main-page.css): Bricolage Grotesque, ink #0b0e1c on white,
   the #f6f7fd tint, hairline rgba borders, soft ambient card shadows, pill
   buttons, and the tilted ultramarine-gradient price tag. The composition is
   this page's own — a two-column payment layout, not a homepage clone. On a
   payment page that consistency is a trust signal, not a nicety: the buyer
   should feel they are still in the same store.

   This replaces the earlier "Ultramarine Ledger" skin (2px ink frames, hard
   offset shadows). The hierarchy logic it established is kept: only the
   surfaces that matter — order summary, pay card, upsell — carry a real
   shadow; fieldsets get a hairline and nothing else, so the page has a focal
   point.

   Install → /wp-content/themes/generatepress-child/child-assets/css/checkout.css

   ---------------------------------------------------------------------------
   SCOPING
   ---------------------------------------------------------------------------
   Tokens live on .pgpl-co and every selector is scoped under it. The checkout
   this replaced shipped an inline <style> block in the page content that leaked
   into the site header and footer; nothing here can.

   Two kinds of markup are styled:
     1. Ours   — .pgpl-co*, .pgpl-sum* (page template + cart override).
     2. EDD's  — #edd_*, .edd-*. Injected into #edd_purchase_form_wrap over
        AJAX and re-injected on every payment-method change, so it can never be
        restyled server-side. Matched by EDD's own IDs, which is why the PHP
        renames none of them.

   Every structural rule in the Ledger version that existed for a functional
   reason — the grid/sticky arrangement, the `order` choreography inside the
   form, the :not(.edd-no-js) exclusions, the specificity plays against
   GeneratePress and the Razorpay plugin — is carried over verbatim. Only the
   visual treatment changed.
   ========================================================================= */

.pgpl-co {
	--ink: #0b0e1c;
	--mute: #55607d;
	--mute-2: #66708b;
	--tint: #f6f7fd;
	--line: rgba(11, 14, 28, 0.09);
	--line-2: rgba(11, 14, 28, 0.06);
	--line-strong: rgba(11, 14, 28, 0.18);
	--ultra: var(--pgpl-ultra, #2436e4);
	--ultra-deep: var(--pgpl-ultra-deep, #1b29b8);
	--wash: #eef1ff;
	--night: var(--pgpl-aurora, #0b0e1c);
	--volt: #d8ff3e;
	--grad: linear-gradient(135deg, var(--ultra), #5b32e8);
	--ok: #16a34a;
	--ok-bg: rgba(22, 163, 74, 0.08);
	--warn: #8a6100;
	--warn-bg: #fdf6e3;
	--bad: #b42323;
	--bad-bg: #fdecec;

	--font: "Bricolage Grotesque", "Poppins", system-ui, sans-serif;
	--hair: 1px solid var(--line);
	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 22px;
	--r-full: 999px;

	/*
	 * ONE gap between stacked cards, everywhere: the grid, the aside, the form
	 * column, the form itself, and nested card siblings. Four different values
	 * used to be in play (24 / 22.4 / 20 / 18), which is why the mobile stack
	 * read as arbitrary — cards a reader expects to be siblings sat at three
	 * different distances.
	 */
	--stack: 1.4rem;

	/*
	 * The homepage card shadow pair: a 1px keyline in the shadow stack plus a
	 * soft ambient drop. --shadow-pop is the stronger of the two and belongs to
	 * exactly one surface — the pay card.
	 */
	--shadow-card: 0 0 0 1px rgba(11, 14, 28, 0.07), 0 10px 24px -18px rgba(11, 14, 28, 0.45);
	--shadow-pop: 0 0 0 1px rgba(11, 14, 28, 0.07), 0 26px 44px -24px rgba(11, 14, 28, 0.5);

	/*
	 * The solid pill's ultramarine glow, from .ph-btn--solid — softened a step
	 * (the homepage buttons are inline-width; at full checkout width the same
	 * alpha cast a haze over the trust line beneath the pay button).
	 */
	--glow-btn: 0 14px 28px -14px rgba(60, 80, 255, 0.7);

	--ease: cubic-bezier(0.4, 0, 0.2, 1);

	position: relative;
	font-family: var(--font);
	color: var(--ink);
	/*
	 * The tint, not white. White cards on a white page have no edges — the
	 * first build read as a wireframe because every surface dissolved into the
	 * ground. On the homepage's tint the white cards do the work the aurora
	 * does on the homepage: they define where things ARE. This is also what
	 * every premium checkout (Stripe's included) does, and for the same reason.
	 */
	background: var(--tint);
	line-height: 1.55;
	letter-spacing: -0.006em;
	width: 100%;
	min-width: 0;
	padding: clamp(1.5rem, 3.5vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
	-webkit-font-smoothing: antialiased;
}

/*
 * The homepage hero's fine dot grid, behind the page head only, faded out
 * before it reaches the cards. The cheapest signature the family has.
 * The shell is lifted above it (position + z-index below) so the dots can
 * never sit on top of text.
 */
.pgpl-co::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 230px;
	background-image: radial-gradient(circle, rgba(11, 14, 28, 0.13) 1px, transparent 1px);
	background-size: 26px 26px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
	opacity: 0.6;
	pointer-events: none;
}

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

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

.pgpl-co ::selection { background: var(--volt); color: var(--ink); }

.pgpl-co .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pgpl-co__shell {
	position: relative;
	z-index: 1;
	max-width: 1170px;
	margin: 0 auto;
	padding-left: max(1.1rem, env(safe-area-inset-left));
	padding-right: max(1.1rem, env(safe-area-inset-right));
}

/* ---------- 1. Page head ---------- */

.pgpl-co__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.pgpl-co__title {
	margin: 0;
	font-family: var(--font);
	font-size: clamp(1.75rem, 4.5vw, 2.5rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.028em;
	color: var(--ink);
	text-wrap: balance;
}

.pgpl-co__sub {
	margin: 0.4rem 0 0;
	font-size: 0.95rem;
	color: var(--mute);
}

/* min-width:0 so a long title wraps instead of forcing the aside off the row. */
.pgpl-co__head-main { min-width: 0; }

.pgpl-co__head-aside {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.pgpl-co__secure {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0.35rem 0.8rem;
	background: var(--ok-bg);
	color: var(--ok);
	border: 1px solid rgba(22, 163, 74, 0.3);
	border-radius: var(--r-full);
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
}

.pgpl-co__secure-lock { font-size: 0.9em; }

/* Currency switcher — plain links, so the back button still works. Styled as
   the homepage's segmented pill (.ph-tabs): tint track, ink pill when active. */
.pgpl-co__currency {
	display: inline-flex;
	gap: 0.25rem;
	padding: 0.25rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-full);
}

.pgpl-co__currency-btn {
	display: inline-block;
	padding: 0.3rem 0.85rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--mute);
	text-decoration: none;
	border-radius: var(--r-full);
	transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.pgpl-co__currency-btn:hover { background: var(--tint); color: var(--ink); }

.pgpl-co__currency-btn.is-active {
	background: var(--ink);
	color: #fff;
	box-shadow: 0 6px 16px -8px rgba(11, 14, 28, 0.55);
}

/* ---------- 2. Two-column grid ----------
   Applied to EDD's own #edd_checkout_wrap. Its DOM order is cart form first,
   then form wrap; grid places them side by side without reordering anything,
   which is what keeps the gateway JS intact. */

.pgpl-co #edd_checkout_wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--stack);
	align-items: start;
}

@media (min-width: 62rem) {
	.pgpl-co #edd_checkout_wrap {
		grid-template-columns: minmax(0, 1fr) 22.5rem;
		gap: 2.25rem;
	}

	/*
	 * ONE row, both columns. The aside is short and the form is tall, so the row
	 * takes the form's height — which is exactly the travel room the sticky rule
	 * below needs.
	 *
	 * The previous arrangement gave the form its own spanning rows, which broke
	 * twice: a spanning item's height is distributed across the rows it covers
	 * (inflating row 1 and stranding the offer far below the summary), and a
	 * sticky grid item is confined to its grid area — so sticky on an
	 * auto-sized row would have had nowhere to travel and done nothing at all.
	 */
	.pgpl-co-aside { grid-column: 2; grid-row: 1; align-self: start; }

	.pgpl-co #edd_checkout_form_wrap {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
	}
}

/*
 * Sticky — but only where it actually fits.
 *
 * Sticky content taller than the viewport pins its top and leaves the bottom
 * PERMANENTLY unreachable: on a short laptop the buyer could never see or
 * press "Switch to membership". So this is gated on viewport HEIGHT as well as
 * width, and checkout.js measures the real thing at runtime (cart contents
 * change its height, which no media query can know) and sets
 * .pgpl-co--aside-tall when it does not fit.
 *
 * NO INTERNAL SCROLL. The previous version capped this column with
 * `max-height` + `overflow-y: auto` + `overscroll-behavior: contain` as a
 * backstop, and it made the whole right-hand column a DEAD ZONE for the wheel:
 * `overflow-y: auto` makes the element a scroll container, and `contain` then
 * refuses to chain the scroll up to the page — even when the content fits and
 * the container has nothing to scroll (measured: scrollHeight === clientHeight
 * at every viewport height, page scrollY never moved). Pointing at the order
 * summary or the membership card froze the page. A backstop that costs the
 * page its scrollbar is not a backstop.
 */
@media (min-width: 62rem) and (min-height: 52rem) {
	.pgpl-co-aside {
		position: sticky;
		top: 1.5rem;
	}

	/* Taller than the space it has to stick in — see syncAsideFit() in
	   checkout.js. Static keeps the bottom reachable by normal page scroll. */
	.pgpl-co--aside-tall .pgpl-co-aside { position: static; }
}

.pgpl-co-aside {
	display: flex;
	flex-direction: column;
	gap: var(--stack);
	min-width: 0;
	order: 1;
}

/* Mobile follows EDD's DOM order — summary, offer, then form — which is already
   the right reading order. */
.pgpl-co #edd_checkout_cart_form { margin: 0; min-width: 0; }
.pgpl-co #edd_checkout_cart_wrap { min-width: 0; }

.pgpl-co--empty #edd_checkout_wrap { grid-template-columns: minmax(0, 1fr); }

/* ---------- 3. Order summary ----------
   A homepage card: soft radius, keyline-plus-ambient shadow, no frame. */

.pgpl-co #edd_checkout_cart,
.pgpl-co .pgpl-sum {
	display: block;
	width: 100%;
	margin: 0;
	padding: 1.5rem;
	background: #fff;
	border: 0;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
	border-collapse: separate;
}

/* Neutralise stray table cells a third-party plugin may echo into the row
   hooks this override still fires. */
.pgpl-co .pgpl-sum td,
.pgpl-co .pgpl-sum th { display: block; border: 0; padding: 0; }

/*
 * The <details> wrapper around items + totals. Ships open; checkout.js
 * collapses it on small screens, and on desktop the summary is inert so the
 * block can never be closed there.
 */
.pgpl-co .pgpl-sum__fold { display: block; }
.pgpl-co .pgpl-sum__fold > summary { list-style: none; }
.pgpl-co .pgpl-sum__fold > summary::-webkit-details-marker { display: none; }

.pgpl-co .pgpl-sum__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--line);
}

/* Desktop: title left, count right, no toggle affordance. */
.pgpl-co .pgpl-sum__count { margin-left: auto; }

.pgpl-co .pgpl-sum__peek {
	display: none;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	white-space: nowrap;
}

.pgpl-co .pgpl-sum__peek-amount {
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ultra);
	font-variant-numeric: tabular-nums;
}

.pgpl-co .pgpl-sum__chev {
	color: var(--mute);
	transition: transform 0.18s var(--ease);
}

.pgpl-co .pgpl-sum__fold[open] .pgpl-sum__chev { transform: rotate(180deg); }

@media (min-width: 62rem) {
	/* The summary block never collapses on desktop. */
	.pgpl-co .pgpl-sum__head { pointer-events: none; }
}

@media (max-width: 61.999rem) {
	.pgpl-co .pgpl-sum__head { cursor: pointer; }
	.pgpl-co .pgpl-sum__count { margin-left: 0; }
	.pgpl-co .pgpl-sum__peek { display: inline-flex; }

	/* Collapsed: the head IS the card — no divider hanging under it. */
	.pgpl-co .pgpl-sum__fold:not([open]) .pgpl-sum__head {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

.pgpl-co .pgpl-sum__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.pgpl-co .pgpl-sum__count {
	padding: 0.15rem 0.6rem;
	background: var(--tint);
	border: 1px solid var(--line);
	border-radius: var(--r-full);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--mute);
	white-space: nowrap;
}

.pgpl-co .pgpl-sum__items { display: flex; flex-direction: column; }

.pgpl-co .pgpl-sum__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"main  price"
		"acts  acts";
	gap: 0.4rem 0.75rem;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--line-2);
}

.pgpl-co .pgpl-sum__item:last-child { border-bottom: 0; }

.pgpl-co .pgpl-sum__item-main {
	grid-area: main;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
}

.pgpl-co .pgpl-sum__thumb { flex: 0 0 auto; line-height: 0; }

.pgpl-co .pgpl-sum__thumb img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border: 0;
	border-radius: var(--r-sm);
	box-shadow: 0 0 0 1px var(--line);
}

.pgpl-co .pgpl-sum__item-text { min-width: 0; }

.pgpl-co .edd_checkout_cart_item_title {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.pgpl-co .pgpl-sum__item-price {
	grid-area: price;
	font-size: 0.98rem;
	font-weight: 800;
	color: var(--ink);
	white-space: nowrap;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.pgpl-co .pgpl-sum__item-actions {
	grid-area: acts;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.pgpl-co .pgpl-sum__qty .edd-item-quantity {
	width: 4.2rem;
	padding: 0.3rem 0.45rem;
	font-family: inherit;
	font-size: 0.85rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
}

.pgpl-co .pgpl-sum__remove {
	margin-left: auto;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--mute);
	text-decoration: none;
	border-bottom: 1.5px solid transparent;
	transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.pgpl-co .pgpl-sum__remove:hover { color: var(--bad); border-bottom-color: var(--bad); }

.pgpl-co .pgpl-sum__fee {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--line-2);
	font-size: 0.9rem;
}

.pgpl-co .pgpl-sum__fee .edd_cart_fee_amount {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Totals */

.pgpl-co .pgpl-sum__totals {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.9rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--line);
}

.pgpl-co .pgpl-sum__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.92rem;
	color: var(--mute);
}

.pgpl-co .pgpl-sum__row-label { min-width: 0; }

.pgpl-co .pgpl-sum__row-value {
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

/* EDD's optional "Update cart" / "Save cart" buttons, shown only when item
   quantities or cart saving are enabled. The row also picks up .edd-no-js when
   cart saving is off, so it is excluded here for the same reason as the
   fieldsets below — a display declaration of ours must never win against EDD's
   no-JS hiding. */
.pgpl-co .pgpl-sum__buttons:not(.edd-no-js) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-bottom: 0.35rem;
}

/* Colour restated on hover for the same GeneratePress reason as the upsell
   CTA above — dark text on a near-white fill, whitened by the theme. */
.pgpl-co .pgpl-sum__buttons .edd-submit,
.pgpl-co .pgpl-sum__buttons .edd-submit:hover,
.pgpl-co .pgpl-sum__buttons .edd-submit:focus {
	padding: 0.4rem 0.9rem;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--ink);
	background: var(--tint);
	border: 1px solid var(--line);
	border-radius: var(--r-full);
	cursor: pointer;
	transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.pgpl-co .pgpl-sum__buttons .edd-submit:hover { background: #fff; border-color: var(--line-strong); }

.pgpl-co .pgpl-sum__row .edd_cart_tax {
	display: flex;
	width: 100%;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.pgpl-co .pgpl-sum__row--discount { color: var(--ok); font-weight: 700; }
.pgpl-co .pgpl-sum__row-discount { width: 100%; }

.pgpl-co .edd_discount_remove {
	display: inline-block;
	margin-left: 0.35rem;
	color: var(--bad);
	text-decoration: none;
	font-weight: 700;
}

/*
 * No border of its own. Subtotal, discount and tax rows are display:none until
 * they apply, so most carts render the totals block as ONLY this row — and a
 * border here plus the block's border-top drew two rules a few pixels apart,
 * which read as a rendering mistake. The block's top border is the divider.
 */
.pgpl-co .pgpl-sum__row--total {
	align-items: center;
	margin-top: 0.25rem;
	padding-top: 0.35rem;
}

.pgpl-co .pgpl-sum__total-label {
	font-size: 1rem;
	font-weight: 800;
	color: var(--ink);
}

/*
 * The total: a large, quiet numeral with the ultramarine gradient clipped to
 * the glyphs. The first pass used the homepage's tilted tag chip here — right
 * on a hero or pinned to product art, but at summary scale it read as a sale
 * sticker, which is the opposite of what the money moment needs. Gradient
 * text keeps the family's colour without the noise.
 *
 * .edd_cart_amount also matches EDD's "Purchase Total" span inside the pay
 * card (#edd_final_total_wrap), which is deliberate — one idea about how a
 * price looks, repeated at the moment of decision. EDD's JS rewrites only the
 * text of these spans on discount/tax changes, so the treatment survives
 * every update. Plain ultramarine is the fallback where background-clip:text
 * is unsupported — never a gradient box behind transparent glyphs.
 */
.pgpl-co .pgpl-sum__total-value,
.pgpl-co .edd_cart_amount {
	font-size: clamp(1.45rem, 3.4vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--ultra);
	font-variant-numeric: tabular-nums;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.pgpl-co .pgpl-sum__total-value,
	.pgpl-co .edd_cart_amount,
	.pgpl-co .pgpl-co-rail__amount,
	.pgpl-co .pgpl-sum__peek-amount {
		background: var(--grad);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.pgpl-co .pgpl-sum__icons {
	margin-top: 1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--line-2);
}

.pgpl-co .pgpl-sum__icons .edd-payment-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
}

.pgpl-co .pgpl-sum__icons .payment-icon { height: 26px; width: auto; border-radius: 4px; }

.pgpl-co .pgpl-sum__trust {
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.pgpl-co .pgpl-sum__trust li {
	position: relative;
	padding-left: 1.4rem;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--mute);
}

.pgpl-co .pgpl-sum__trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 0.85rem;
	height: 0.45rem;
	border-left: 2.5px solid var(--ok);
	border-bottom: 2.5px solid var(--ok);
	transform: rotate(-45deg);
}

/* ---------- 4. Form column ---------- */

/* order:2 — on mobile this column follows the aside (summary + offer). */
.pgpl-co #edd_checkout_form_wrap {
	order: 2;
	display: flex;
	flex-direction: column;
	gap: var(--stack);
}

.pgpl-co #edd_purchase_form {
	display: flex;
	flex-direction: column;
	gap: var(--stack);
	margin: 0;
}

/* Stripped container fieldsets (#edd_register_fields) are flow-roots now, not
   flex columns, so the cards nested inside them space themselves. */
.pgpl-co #edd_purchase_form fieldset fieldset:not(.edd-no-js) + fieldset:not(.edd-no-js),
.pgpl-co #edd_purchase_form_wrap fieldset fieldset:not(.edd-no-js) + fieldset:not(.edd-no-js) { margin-top: var(--stack); }

/*
 * Fieldsets are white cards on the tint — same surface language as the order
 * summary. The pay card still outranks them: it alone carries --shadow-pop.
 */
/*
 * flow-root, not flex, and the legend is FLOATED. Both are the legend fix.
 * A <legend> is special-cased by browsers: it is rendered into the fieldset's
 * border zone regardless of the fieldset's display type — the earlier
 * display:flex "promotion" did nothing in Chrome and the section titles sat
 * straddling the card edges. Per the HTML rendering rules, a legend stops
 * being a "rendered legend" only when it is floated — so it is floated full
 * width (Bootstrap ships the identical reset), the fieldset becomes a
 * flow-root to contain it, and the `legend + *` rule below drops the first
 * real child beneath it.
 */
/*
 * :not(.edd-no-js) is load-bearing, not tidiness.
 *
 * EDD hides its no-JS fallbacks with `.edd-js .edd-no-js { display: none }`
 * (specificity 0,2,0), printed inline at wp_body_open. The selector above
 * carries an ID (1,1,1) and so OUTRANKS it — meaning a display declaration
 * here would override EDD's `display: none` and expose the grey "Next" button
 * that only exists for browsers without JavaScript, right in the middle of the
 * payment step. Excluding those fieldsets entirely leaves EDD's rule
 * unopposed, and still lets the fallback render for a genuinely JS-less
 * visitor.
 */
.pgpl-co #edd_purchase_form fieldset:not(.edd-no-js),
.pgpl-co #edd_purchase_form_wrap fieldset:not(.edd-no-js) {
	display: flow-root;
	margin: 0;
	padding: 1.5rem;
	min-width: 0;
	background: #fff;
	border: 0;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
}

.pgpl-co #edd_purchase_form legend,
.pgpl-co #edd_purchase_form_wrap legend {
	float: left;
	width: 100%;
	max-width: 100%;
	margin: 0 0 1.1rem;
	padding: 0;
	border: 0;
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: var(--ink);
}

/* The section mark — a small tilted gradient square, the price tag's cousin,
   so the cards carry the same signature the totals do. */
.pgpl-co #edd_purchase_form legend::before,
.pgpl-co #edd_purchase_form_wrap legend::before {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.55em;
	background: var(--grad);
	border-radius: 3px;
	transform: rotate(-8deg);
	box-shadow: 0 4px 10px -4px rgba(60, 80, 255, 0.85);
}

/* The floated legend leaves the next sibling beside it in principle; clearing
   the first real child is what puts the content under the heading. */
.pgpl-co #edd_purchase_form legend + *,
.pgpl-co #edd_purchase_form_wrap legend + * { clear: both; }

/*
 * Pure containers must not draw a second surface — and must not take card
 * padding either.
 *
 * EDD nests #edd_register_fields purely as a grouping wrapper around the two
 * real cards. TWO IDs here is load-bearing: the responsive rule at the bottom
 * of this file sets `padding: 1.25rem !important` on
 * `.pgpl-co #edd_purchase_form fieldset` (1,1,1), and !important vs !important
 * is decided on specificity — so a single-ID selector lost, and on phones ONLY
 * this invisible wrapper kept 20px of padding. That put the two cards it wraps
 * 44px below the upsell and 42px above the pay card while sitting 22px apart
 * from each other: three different gaps between things that should share one
 * rhythm. Carrying #edd_purchase_form / #edd_checkout_form_wrap lifts these to
 * (2,1,0) so they win at every width.
 */
.pgpl-co #edd_purchase_form #edd_register_fields,
.pgpl-co #edd_purchase_form #edd_payment_mode_submit,
.pgpl-co #edd_purchase_form #edd_terms_agreement,
.pgpl-co #edd_purchase_form #edd-privacy-policy-agreement,
.pgpl-co #edd_checkout_form_wrap #edd_register_fields,
.pgpl-co #edd_checkout_form_wrap #edd_payment_mode_submit,
.pgpl-co #edd_checkout_form_wrap #edd_terms_agreement,
.pgpl-co #edd_checkout_form_wrap #edd-privacy-policy-agreement {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.pgpl-co #edd_checkout_login_register { margin: 0; }

/* ---------- 5. Fields ---------- */

/* EDD classes most field labels .edd-label, but the account-creation labels
   are bare <label>s, so both are matched. Gateway cards are <label>s too and
   are excluded here rather than fought later: a selector carrying
   #edd_purchase_form outranks any plain .edd-gateway-option rule below. */
.pgpl-co .edd-label,
.pgpl-co #edd_purchase_form label:not(.edd-gateway-option) {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ink);
}

.pgpl-co .edd-required-indicator { color: var(--bad); margin-left: 0.2rem; font-size: 0.8em; }

.pgpl-co .edd-description {
	display: block;
	margin: -0.15rem 0 0.45rem;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--mute-2);
}

/*
 * EDD writes a sentence of grey prose under every field ("We will use this to
 * personalize your account experience", "Confirm your password"). Repeated
 * boilerplate is what makes a form read as bureaucracy — only the email note
 * survives, because "this is where your downloads go" changes behaviour.
 */
.pgpl-co #edd-first-description,
.pgpl-co #edd-last-description,
.pgpl-co #edd-user-login-wrap .edd-description,
.pgpl-co #edd-user-pass-wrap .edd-description,
.pgpl-co #edd-user-pass-confirm-wrap .edd-description { display: none; }

/*
 * Field order: label, input, THEN the helper text.
 *
 * EDD's markup puts .edd-description between the label and the input, so
 * every field opened with a sentence of grey prose before the thing to type
 * in — six lines of apparatus for three fields, which is what made the form
 * read as a government form rather than a checkout. The DOM cannot move (EDD
 * re-renders it over AJAX), but each p wrapper can become a flex column and
 * `order` puts the helper under the field where help belongs.
 *
 * [id$="-wrap"] catches every EDD field wrapper (edd-email-wrap,
 * edd-first-name-wrap, edd-user-pass-wrap, card-address-wrap…) and nothing
 * else: #edd_final_total_wrap has no hyphen before "wrap" and the PayPal
 * error node is a div. The error span checkout.js appends lands at order 4,
 * directly under the input it belongs to.
 */
.pgpl-co #edd_purchase_form p[id$="-wrap"],
.pgpl-co #edd_purchase_form_wrap p[id$="-wrap"] {
	display: flex;
	flex-direction: column;
}

.pgpl-co p[id$="-wrap"] > .edd-label { order: 1; }
.pgpl-co p[id$="-wrap"] > .edd-input,
.pgpl-co p[id$="-wrap"] > .edd-select,
.pgpl-co p[id$="-wrap"] > input,
.pgpl-co p[id$="-wrap"] > select { order: 2; }
.pgpl-co p[id$="-wrap"] > .edd-description { order: 3; margin: 0.4rem 0 0; }
.pgpl-co p[id$="-wrap"] > .pgpl-field-error { order: 4; }

/*
 * Name and password pairs share a row on anything wider than a phone. Floats,
 * not grid — the pairs sit inside fieldsets whose legends are floated (see
 * above), and a grid/flex fieldset is exactly what re-breaks the legend.
 */
@media (min-width: 40rem) {
	.pgpl-co #edd-first-name-wrap,
	.pgpl-co #edd-user-pass-wrap { float: left; width: calc(50% - 0.5rem); }

	.pgpl-co #edd-last-name-wrap,
	.pgpl-co #edd-user-pass-confirm-wrap { float: right; width: calc(50% - 0.5rem); }

	/* Whatever follows a half-width pair starts on its own line. */
	.pgpl-co #edd-last-name-wrap + *,
	.pgpl-co #edd-user-pass-confirm-wrap + * { clear: both; }
}

.pgpl-co .edd-input,
.pgpl-co .edd-select,
.pgpl-co #edd_purchase_form input[type="text"],
.pgpl-co #edd_purchase_form input[type="email"],
.pgpl-co #edd_purchase_form input[type="tel"],
.pgpl-co #edd_purchase_form input[type="password"],
.pgpl-co #edd_purchase_form input[type="number"],
.pgpl-co #edd_purchase_form select {
	width: 100%;
	max-width: 100%;
	padding: 0.8rem 0.95rem;
	font-family: inherit;
	/* 16px floor — smaller makes iOS zoom the page on focus, which at the
	   moment of payment feels like the page broke. */
	font-size: 1rem;
	line-height: 1.4;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	/* The faint inset is what separates a drawn input from a rectangle. */
	box-shadow: inset 0 1px 2px rgba(11, 14, 28, 0.04);
	transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
	appearance: none;
	-webkit-appearance: none;
}

.pgpl-co .edd-input::placeholder { color: var(--mute-2); }
.pgpl-co .edd-input:hover, .pgpl-co .edd-select:hover { border-color: rgba(11, 14, 28, 0.32); }

.pgpl-co .edd-input:focus,
.pgpl-co .edd-select:focus,
.pgpl-co #edd_purchase_form input:focus,
.pgpl-co #edd_purchase_form select:focus {
	outline: none;
	border-color: var(--ultra);
	box-shadow: 0 0 0 3px var(--wash);
}

.pgpl-co #edd_purchase_form select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--mute) 50%),
		linear-gradient(135deg, var(--mute) 50%, transparent 50%);
	background-position: calc(100% - 1.05rem) 1.28rem, calc(100% - 0.68rem) 1.28rem;
	background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
	background-repeat: no-repeat;
	padding-right: 2.2rem;
}

/* Between fields. Inside a field the label/input/help sit 0.35–0.4rem apart,
   so this has to stay clearly larger or the groups stop reading as groups. */
.pgpl-co #edd_purchase_form p,
.pgpl-co #edd_purchase_form_wrap p { margin: 0 0 1.05rem; }
.pgpl-co #edd_purchase_form p:last-child { margin-bottom: 0; }

.pgpl-co .edd-input.pgpl-invalid,
.pgpl-co .edd-select.pgpl-invalid {
	border-color: var(--bad);
	background: var(--bad-bg);
}

.pgpl-co .pgpl-field-error {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--bad);
}

/* Gateway radios are excluded — they are laid out by the payment-card rules
   below, which carry no ID and would lose. */
.pgpl-co #edd_purchase_form input[type="checkbox"],
.pgpl-co #edd_purchase_form input[type="radio"]:not(.edd-gateway) {
	width: 1.05rem;
	height: 1.05rem;
	margin-right: 0.45rem;
	accent-color: var(--ultra);
	vertical-align: middle;
}

.pgpl-co #edd_purchase_form #edd_register_account_fields label[for] { font-weight: 600; }

.pgpl-co .edd_checkout_register_login,
.pgpl-co #edd_login_fields a,
.pgpl-co #edd_register_fields a {
	color: var(--ultra);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1.5px solid var(--wash);
	transition: border-color 0.15s var(--ease);
}

.pgpl-co .edd_checkout_register_login:hover,
.pgpl-co #edd_login_fields a:hover,
.pgpl-co #edd_register_fields a:hover { border-bottom-color: var(--ultra); }

/* ---------- 6. Payment method cards ----------
   EDD renders <label class="edd-gateway-option"><input class="edd-gateway">Label
   </label> and escapes the label text, so icons and descriptions cannot be
   filtered in server-side — checkout.js injects them. Written so the cards
   still look deliberate if that JS never runs. */

/* order:1 keeps the payment choice above the discount link — see section 8. */
.pgpl-co #edd_payment_mode_select_wrap {
	order: 1;
	display: flex;
	flex-direction: column;
	gap: var(--stack);
}

.pgpl-co #edd-payment-mode-wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.7rem;
}

.pgpl-co .edd-gateway-option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0;
	padding: 0.95rem 1rem;
	background: #fff;
	border: 1.5px solid rgba(11, 14, 28, 0.12);
	border-radius: var(--r-md);
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--ink);
	transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease),
		background 0.15s var(--ease);
}

.pgpl-co .edd-gateway-option:hover { border-color: rgba(36, 54, 228, 0.55); background: var(--tint); }

.pgpl-co .edd-gateway-option input.edd-gateway {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.15rem 0 0;
	accent-color: var(--ultra);
}

/* Selected: ultramarine keyline plus the wash halo — the same treatment the
   focused input gets, so "chosen" and "active" read as one idea. */
.pgpl-co .edd-gateway-option-selected,
.pgpl-co .edd-gateway-option:has(input.edd-gateway:checked) {
	background: #fff;
	border-color: var(--ultra);
	box-shadow: 0 0 0 3px var(--wash);
}

.pgpl-co .pgpl-gw { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.pgpl-co .pgpl-gw__name {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
	font-weight: 800;
	line-height: 1.25;
}

.pgpl-co .pgpl-gw__blurb {
	font-size: 0.79rem;
	font-weight: 500;
	color: var(--mute);
	line-height: 1.35;
}

.pgpl-co .pgpl-gw__badge {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	background: var(--volt);
	color: var(--ink);
	border-radius: var(--r-full);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

.pgpl-co #edd_payment_mode_submit #edd_next_button {
	width: auto;
	padding: 0.7rem 1.4rem;
	font-size: 0.95rem;
}

/* ---------- 7. Gateway fields region ----------
   #edd_purchase_form_wrap is empty on first paint and filled over AJAX. Without
   a placeholder the page looks broken for a few hundred milliseconds, at the
   moment of highest intent. */

/* order:3 puts the details + pay block after the discount link — see section 8. */
.pgpl-co #edd_purchase_form_wrap {
	order: 3;
	display: flex;
	flex-direction: column;
	gap: var(--stack);
	min-width: 0;
}

.pgpl-co #edd_purchase_form_wrap:empty {
	display: block;
	min-height: 13rem;
	background: linear-gradient(90deg, #fff 25%, #f0f2fb 37%, #fff 63%);
	background-size: 400% 100%;
	border: 0;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
	animation: pgpl-shimmer 1.4s ease-in-out infinite;
}

@keyframes pgpl-shimmer {
	0%   { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

.pgpl-co .edd-loading-ajax,
.pgpl-co .edd-loading {
	display: inline-block;
	width: 1.1rem;
	height: 1.1rem;
	margin-left: 0.5rem;
	border: 2.5px solid var(--line);
	border-top-color: var(--ultra);
	border-radius: 50%;
	animation: pgpl-spin 0.7s linear infinite;
	vertical-align: middle;
}

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

.pgpl-co #edd-paypal-container,
.pgpl-co .edd-stripe-card-item,
.pgpl-co #edd-stripe-payment-element { width: 100%; min-width: 0; }

/* ---------- 8. Discount ----------
   DORMANT. checkout.php currently unhooks edd_discount_field() entirely —
   there is no discount business right now — so none of this section renders.
   It is kept rather than deleted so switching the field back on is a one-line
   change in checkout.php and not a restyle. See the puregpl_checkout_hide_discount
   filter there.

   Everything below describes how it behaves when it IS on.

   EDD hooks the field to edd_checkout_form_top at priority -1, so it renders as
   the FIRST child of #edd_purchase_form — a full-width box asking "Have a
   discount code?" before the buyer has done anything. That is a known
   conversion leak: it advertises to everyone that a code exists and sends
   people off to hunt for one.

   It cannot be relocated to the order summary. EDD delegates the apply handler
   from #edd_purchase_form and the collapse logic from #edd_checkout_form_wrap,
   so a field outside either has a dead Apply button.

   What it CAN do is move within the form. #edd_purchase_form is a flex column,
   so `order` repositions it visually while the element stays exactly where
   EDD's handlers expect it in the DOM — no markup change, no JS risk. It now
   follows the payment method rather than opening the page, and it is a plain
   quiet link instead of a box. */

/* Two IDs (2,1,0) to outrank the generic fieldset rule (1,2,1) without
   resorting to !important. */
.pgpl-co #edd_purchase_form #edd_discount_code {
	order: 2;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.pgpl-co #edd_purchase_form #edd_show_discount {
	margin: 0;
	font-size: 0.85rem;
	color: var(--mute-2);
	text-align: right;
}

.pgpl-co #edd_show_discount .edd_discount_link {
	color: var(--ultra);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1.5px solid var(--wash);
}

.pgpl-co #edd_show_discount .edd_discount_link:hover { border-bottom-color: var(--ultra); }

.pgpl-co #edd_purchase_form #edd-discount-code-wrap { margin: 0; }

/*
 * Once opened, EDD repeats itself: a "Discount" label and "Enter a discount
 * code if you have one." under a link that just asked the same question, above
 * an input placeheld "Enter discount". The label is hidden VISUALLY rather than
 * removed — the input still needs an accessible name — and the prose goes.
 */
.pgpl-co #edd_purchase_form #edd-discount-code-wrap .edd-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pgpl-co #edd_purchase_form #edd-discount-code-wrap .edd-description { display: none; }

.pgpl-co .edd-discount-code-field-wrap { display: flex; gap: 0.5rem; align-items: stretch; }
.pgpl-co .edd-discount-code-field-wrap #edd-discount { flex: 1 1 auto; min-width: 0; }

.pgpl-co .edd-apply-discount {
	flex: 0 0 auto;
	padding: 0 1.3rem;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	color: #fff;
	background: var(--ultra);
	border: 0;
	border-radius: var(--r-full);
	cursor: pointer;
	transition: background 0.15s var(--ease), transform 0.12s var(--ease);
}

.pgpl-co .edd-apply-discount:hover {
	background: var(--ultra-deep);
	transform: translateY(-1px);
}

.pgpl-co #edd-discount-error-wrap {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--bad);
}

/* ---------- 9. Submit ----------
   The focal surface — the only one carrying the strong shadow. Nothing else on
   the page competes with it. */

.pgpl-co #edd_purchase_submit {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	padding: 1.5rem !important;
	background: #fff;
	border: 0 !important;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-pop) !important;
}

.pgpl-co #edd_purchase_form #edd_final_total_wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--line);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--mute);
}

/*
 * PAY BUTTONS — the homepage's solid pill, because paying is the site's one
 * true primary action. Pill radius, one weight, the ultramarine glow at rest
 * and a small lift on hover; the colour is the only loud thing, which is how a
 * pay button should work.
 *
 * EDD renders the purchase control as <input type="submit"> and rewrites its
 * label with .val() when a discount changes the total, so it stays an input.
 *
 * NOTE ON COLOUR. The fill is deliberately absent from this shared rule.
 * #edd-purchase-button gets ultramarine below as the default, but the Razorpay
 * plugin paints both buttons with the merchant's accent (razorpay_theme_color,
 * the same value its payment window uses). Declaring a background here would
 * have to be beaten by the plugin, and this rule's specificity (1,2,0) already
 * outranks the plugin's (0,1,0) — which is exactly why the retry button used to
 * come out ultramarine while the pay button was green. The glow shadow is kept
 * off this shared rule for the same reason: it is ultramarine-tinted, and
 * under a green Razorpay fill it would read as a rendering mistake.
 */
.pgpl-co #edd-purchase-button,
.pgpl-co #edd_purchase_submit .puregpl-rzp-retry {
	display: block;
	width: 100%;
	/* Clear air above the pill: with margin 0 it sat flush against the
	   total row's rule line. Bottom stays 0 — the trust mark below carries
	   its own offset, sized to clear the glow. */
	margin: 1rem 0 0;
	padding: 0.95rem 1.6rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.4;
	color: #fff;
	border: 0;
	border-radius: var(--r-full);
	box-shadow: none;
	cursor: pointer;
	transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease),
		transform 0.12s var(--ease), filter 0.18s var(--ease);
	-webkit-appearance: none;
	appearance: none;
}

/* Default fill, used by every gateway that is not Razorpay. */
.pgpl-co #edd-purchase-button {
	background: var(--ultra);
}

/*
 * Rest glow and hover lift are shared by the pay button AND the Razorpay
 * retry button. The retry replaces the pay button in its own slot after a
 * dismissed payment, so any difference between the two — glow on one, a
 * grey shadow on the other — reads as the button having broken, not changed
 * state. Geometry and glow identical; only the fill differs by gateway.
 */
.pgpl-co #edd-purchase-button,
.pgpl-co #edd_purchase_submit .puregpl-rzp-retry {
	box-shadow: var(--glow-btn);
}

.pgpl-co #edd-purchase-button:hover:not(:disabled),
.pgpl-co #edd_purchase_submit .puregpl-rzp-retry:hover {
	transform: translateY(-1px);
	box-shadow: var(--glow-btn);
}

/*
 * The ultramarine deepening stays off the Razorpay-tagged button: its fill is
 * the merchant's accent (painted by the gateway plugin), and hovering it into
 * ultramarine would flash the one colour it is specifically not supposed to
 * be. It darkens via the plugin's brightness() filter instead, as the retry
 * button already does.
 */
.pgpl-co #edd-purchase-button:not([data-puregpl-rzp]):hover:not(:disabled) {
	background: var(--ultra-deep);
}

.pgpl-co #edd-purchase-button:active:not(:disabled),
.pgpl-co #edd_purchase_submit .puregpl-rzp-retry:active {
	transform: translateY(0);
	box-shadow: none;
}

.pgpl-co #edd-purchase-button:disabled {
	opacity: 0.5;
	cursor: progress;
	transform: none;
	box-shadow: none;
}

.pgpl-co #edd_terms_agreement,
.pgpl-co #edd-privacy-policy-agreement {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.pgpl-co .edd-terms-agreement,
.pgpl-co #edd-privacy-policy-agreement > div {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.88rem;
	color: var(--mute);
}

/* Consent labels sit beside their checkbox, so they stay inline and
   unweighted — carrying #edd_purchase_form to outrank the generic label rule. */
.pgpl-co #edd_purchase_form .edd-terms-agreement label,
.pgpl-co #edd_purchase_form #edd-privacy-policy-agreement label {
	display: inline;
	margin: 0;
	font-weight: 600;
}

.pgpl-co .edd-terms { font-size: 0.85rem; color: var(--mute); }
.pgpl-co .edd_terms_links { color: var(--ultra); font-weight: 700; text-decoration: none; }

/* ---------- 10. Messages ----------
   EDD inserts .edd_errors immediately before #edd_purchase_submit (its
   checkout_error_anchor), so this is where a payment failure surfaces. */

.pgpl-co .edd_errors,
.pgpl-co .edd-alert-error,
.pgpl-co .edd_error {
	margin: 0 0 0.9rem;
	padding: 0.85rem 1rem;
	background: var(--bad-bg);
	border: 1px solid rgba(180, 35, 35, 0.4);
	border-radius: var(--r-sm);
	color: var(--bad);
	font-size: 0.9rem;
	font-weight: 600;
}

/*
 * EDD nests its message paragraph inside its container:
 *   <div class="edd_errors edd-alert"><p class="edd_error">…</p></div>
 * Styling both as boxes draws a box inside a box. The container owns the
 * frame; the paragraph is only text, and inherits the container's colour so an
 * info-level message does not come out red.
 */
.pgpl-co .edd_errors .edd_error,
.pgpl-co .edd-alert .edd_error {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.pgpl-co .edd_errors p, .pgpl-co .edd_error p { margin: 0; }
.pgpl-co .edd_errors .edd_error + .edd_error { margin-top: 0.4rem; }

.pgpl-co .edd-alert-success {
	padding: 0.85rem 1rem;
	background: var(--ok-bg);
	border: 1px solid rgba(22, 163, 74, 0.35);
	border-radius: var(--r-sm);
	color: var(--ok);
	font-size: 0.9rem;
	font-weight: 600;
}

/* Closing the Razorpay window is information, not failure. The plugin tags it
   .edd_errors for placement, so without this it inherits the error treatment
   and reads as though the payment broke. */
.pgpl-co .puregpl-rzp-message.edd-alert-info {
	background: var(--wash);
	border: 1px solid rgba(36, 54, 228, 0.4);
	color: var(--ink);
}

/* "Secured by Razorpay · UPI · Cards · Netbanking · Wallets", rendered by the
   gateway plugin beneath the pay button. It answers PayPal's smart buttons,
   which arrive with their own brand mark and footer — without it the Razorpay
   path is an unlabelled blue button beside a branded one, and reads as the
   less trustworthy choice. Tuned here to the site palette; the plugin's own
   CSS keeps it presentable in any other theme. */
/* 0.15rem predates the shared button glow; the badge sat inside the glow's
   spill and read as cramped. 0.9rem clears the bloom without orphaning the
   badge from the button it vouches for. */
.pgpl-co .puregpl-rzp-trust { margin-top: 0.9rem; }

.pgpl-co .puregpl-rzp-trust__brand {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--mute);
	opacity: 1;
}

.pgpl-co .puregpl-rzp-trust__brand strong { color: var(--ink); font-weight: 800; }

.pgpl-co .puregpl-rzp-trust__methods {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--mute-2);
	opacity: 1;
	letter-spacing: 0.01em;
}

/*
 * Nothing is needed here for the Razorpay button any more. It shares the shape
 * rule above and takes its fill from the plugin's accent variable, so the pay
 * button, the retry button and the Razorpay window are one colour throughout.
 */

/* ---------- 11. Membership upsell ----------
   Sits under the order summary.

   THE LIME IS GONE, and that was the whole problem. The first pass painted
   the eyebrow and the CTA in volt (#d8ff3e) — a colour that appears ZERO
   times in main-page.css and zero times in chrome.css. It was inherited from
   the Ledger checkout this design replaced, and on a large dark panel it read
   as an energy-drink promo: the loudest element on the page was a colour the
   store does not own.

   What replaces it is the family's real dark-surface language, lifted from
   the product page's stage: a night panel with the ultra glow bleeding from
   the top-left, the masked dot grid, a 1px rim light along the top edge, and
   a WHITE pill CTA (.pgpl-pd__btn--light on that page). Monochrome-on-dark is
   what keeps it clearly secondary to the ultramarine pay button while still
   looking like something worth pressing — an outlined button reads as "maybe
   don't", which is a strange thing to say about your best offer.

   Still deliberately compact: an upsell that outshines the purchase costs
   more than it earns. */

.pgpl-co-upsell {
	position: relative;
	overflow: hidden;
	padding: 1.35rem 1.4rem 1.25rem;
	/*
	 * Two layers, not a flat fill: the corner glow over a subtly angled
	 * gradient. A single background-color is what made this read as a
	 * rectangle rather than a surface.
	 */
	background:
		radial-gradient(115% 95% at 12% -12%, rgba(108, 134, 255, 0.36), transparent 58%),
		linear-gradient(168deg, #171c3a 0%, var(--night) 64%);
	color: #fff;
	border: 0;
	border-radius: var(--r-lg);
	box-shadow: 0 18px 40px -24px rgba(11, 14, 28, 0.8);
}

/* The family's dot grid, masked to the lit corner. */
.pgpl-co-upsell::before {
	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 72% 62% at 20% 6%, #000 8%, transparent 74%);
	mask-image: radial-gradient(ellipse 72% 62% at 20% 6%, #000 8%, transparent 74%);
	opacity: 0.55;
	pointer-events: none;
}

/*
 * Rim light: a 1px gradient edge, brightest along the top, fading out by the
 * midpoint. Drawn as a masked border so it follows the radius exactly. This
 * single detail is most of the difference between "dark card" and "premium
 * dark card" — it implies a light source, so the panel reads as a physical
 * object rather than a hole in the page.
 */
.pgpl-co-upsell::after {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.05) 34%, transparent 64%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* Everything readable rides above both decorations. */
.pgpl-co-upsell > * { position: relative; z-index: 1; }

/* A glass chip, not a highlighter stripe. The gradient dot is the card's one
   saturated accent — and it is the site's own gradient, not a borrowed hue. */
.pgpl-co-upsell__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.75rem;
	padding: 0.28rem 0.72rem;
	color: rgba(226, 230, 255, 0.94);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--r-full);
}

.pgpl-co-upsell__eyebrow::before {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: linear-gradient(135deg, #6c86ff, #a878ff);
	box-shadow: 0 0 8px rgba(108, 134, 255, 0.95);
}

.pgpl-co-upsell__title {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.025em;
	color: #fff;
	text-wrap: balance;
}

/* The price and its cadence, together. A bare figure next to a cheaper product
   reads as "pay more"; "/month" is what turns it into an offer. */
.pgpl-co-upsell__price {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	flex-wrap: wrap;
	margin: 0 0 0.6rem;
}

/* Big enough to be the object of the card. It was 1.5rem — the same weight as
   the heading above it, so nothing led. */
.pgpl-co-upsell__amount {
	font-size: 2.05rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.pgpl-co-upsell__amount .edd_price { color: inherit; font: inherit; }

.pgpl-co-upsell__cadence { font-size: 0.85rem; font-weight: 600; color: rgba(226, 230, 255, 0.6); }

.pgpl-co-upsell__body {
	margin: 0 0 0.9rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: rgba(226, 230, 255, 0.78);
}

.pgpl-co-upsell__body strong { color: #fff; font-weight: 800; }

/* One quiet line of substance above the button. Hairline separator, hairline
   ticks — it should register as texture, not as a second feature list. */
.pgpl-co-upsell__points {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.85rem;
	margin: 0 0 1rem;
	padding-top: 0.85rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	list-style: none;
	font-size: 0.76rem;
	color: rgba(226, 230, 255, 0.66);
}

.pgpl-co-upsell__points li {
	position: relative;
	padding-left: 0.95rem;
}

.pgpl-co-upsell__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.36em;
	width: 0.5rem;
	height: 0.28rem;
	border-left: 1.5px solid rgba(150, 175, 255, 0.9);
	border-bottom: 1.5px solid rgba(150, 175, 255, 0.9);
	transform: rotate(-45deg);
}

/*
 * A white pill — the family's own light-on-dark button. Solid, because this is
 * the card's action and an outline reads as hesitation; monochrome, so it
 * cannot be mistaken for the ultramarine control that actually takes money.
 */
/*
 * EVERY state declares its colour, and that is not tidiness.
 *
 * GeneratePress ships `button:hover, input[type="submit"]:hover, … { color:
 * #fff }` at specificity (0,1,1). A base `color` here is (0,1,0) and LOSES on
 * hover — so this button rendered white text on its near-white hover fill,
 * about 1.1:1 contrast: the label vanished the moment a buyer pointed at it.
 * The same trap already had to be defused for a.pgpl-co-btn further down; any
 * dark-text button in this file has to restate its colour for every state or
 * the theme fills the gap.
 *
 * :disabled is listed too — the theme's rule carries no such guard, so a
 * hovered disabled button (the "Updating your cart…" state) would whiten as
 * well.
 */
.pgpl-co-upsell__cta,
.pgpl-co-upsell__cta:hover,
.pgpl-co-upsell__cta:focus,
.pgpl-co-upsell__cta:active,
.pgpl-co-upsell__cta:disabled {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.8rem 1.2rem;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ink);
	background: #fff;
	border: 0;
	border-radius: var(--r-full);
	cursor: pointer;
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.9);
	transition: background 0.18s var(--ease), transform 0.15s var(--ease),
		box-shadow 0.18s var(--ease);
}

/*
 * Hover lifts the pill off the panel rather than tinting it. A white surface
 * on a dark card has nowhere brighter to go, so light was the wrong axis —
 * depth is the one that reads.
 */
.pgpl-co-upsell__cta:hover:not(:disabled) {
	color: var(--ink);
	background: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.95), 0 0 0 4px rgba(255, 255, 255, 0.1);
}

.pgpl-co-upsell__cta:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.9);
}

.pgpl-co-upsell__cta:disabled { opacity: 0.55; cursor: progress; transform: none; }

.pgpl-co-upsell__cta svg { transition: transform 0.15s var(--ease); }
.pgpl-co-upsell__cta:hover:not(:disabled) svg { transform: translateX(2px); }

/* Focus ring has to be visible against the panel, not the page. */
.pgpl-co-upsell__cta:focus-visible {
	outline: 2.5px solid #fff;
	outline-offset: 3px;
}

.pgpl-co-upsell__note {
	margin: 0.65rem 0 0;
	font-size: 0.73rem;
	color: rgba(226, 230, 255, 0.55);
	text-align: center;
}

.pgpl-co-upsell__error {
	margin: 0.7rem 0 0;
	padding: 0.6rem 0.8rem;
	background: rgba(180, 35, 35, 0.18);
	border: 1px solid rgba(255, 138, 138, 0.5);
	border-radius: var(--r-sm);
	color: #ffc9c9;
	font-size: 0.85rem;
	font-weight: 700;
	text-align: center;
}

/* ---------- 12. Reassurance line ----------
   One quiet line, no box. Below the pay button is low-value space; it earns a
   line, not a panel. */

.pgpl-co-assure {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.3rem 0.6rem;
	margin: 0;
	padding: 0 0.5rem;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--mute);
	text-align: center;
}

.pgpl-co-assure__lock { font-size: 0.9em; }

.pgpl-co-assure__link {
	color: var(--ultra);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1.5px solid var(--wash);
	transition: border-color 0.15s var(--ease);
	white-space: nowrap;
}

.pgpl-co-assure__link:hover { border-bottom-color: var(--ultra); }

/* ---------- 13. Empty / unavailable ---------- */

.pgpl-co-empty {
	grid-column: 1 / -1;
	padding: clamp(1.5rem, 5vw, 3rem);
	text-align: center;
	background: #fff;
	border: 0;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
}

.pgpl-co-empty__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.25rem, 4vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.028em;
}

.pgpl-co-empty__body {
	margin: 0 auto 1.4rem;
	max-width: 34rem;
	font-size: 0.95rem;
	color: var(--mute);
}

.pgpl-co-empty__admin {
	margin: 1.2rem auto 0;
	max-width: 34rem;
	padding: 0.6rem 0.9rem;
	background: var(--warn-bg);
	border: 1px solid rgba(138, 97, 0, 0.35);
	border-radius: var(--r-sm);
	color: var(--warn);
	font-size: 0.82rem;
	font-weight: 700;
}

.pgpl-co-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem;
	margin: 0;
}

/*
 * The homepage's pill pair — .ph-btn--solid and --ghost, transplanted.
 *
 * EVERY colour state is declared, and the selectors carry the element name so
 * they land at (0,2,2) on hover. These are <a> elements: GeneratePress styles
 * a:hover at a specificity that beat the (0,1,0) rule this replaces, so the
 * theme reclaimed the colour on hover and painted near-black text onto
 * ultramarine — legible in a screenshot, not legible to a buyer. A link-shaped
 * button has to state its colour for every state or the theme will fill the
 * gaps.
 */
.pgpl-co a.pgpl-co-btn,
.pgpl-co a.pgpl-co-btn:hover,
.pgpl-co a.pgpl-co-btn:focus,
.pgpl-co a.pgpl-co-btn:visited {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.6rem;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	border-radius: var(--r-full);
	transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
		transform 0.15s var(--ease);
}

/* The transparent border is load-bearing: --ghost carries a real 1px border, so
   without a matching one here the pair differ by 2px in height side by side. */
.pgpl-co a.pgpl-co-btn--primary,
.pgpl-co a.pgpl-co-btn--primary:hover,
.pgpl-co a.pgpl-co-btn--primary:focus,
.pgpl-co a.pgpl-co-btn--primary:visited {
	background: var(--ultra);
	color: #fff;
	border: 1px solid transparent;
	box-shadow: var(--glow-btn);
}

.pgpl-co a.pgpl-co-btn--ghost,
.pgpl-co a.pgpl-co-btn--ghost:hover,
.pgpl-co a.pgpl-co-btn--ghost:focus,
.pgpl-co a.pgpl-co-btn--ghost:visited {
	background: #fff;
	color: var(--ink);
	border: 1px solid rgba(11, 14, 28, 0.14);
}

.pgpl-co a.pgpl-co-btn:hover { transform: translateY(-1px); }
.pgpl-co a.pgpl-co-btn:active { transform: translateY(0); }

.pgpl-co a.pgpl-co-btn--primary:hover { background: var(--ultra-deep); }

.pgpl-co a.pgpl-co-btn--ghost:hover {
	background: var(--tint);
	border-color: rgba(11, 14, 28, 0.24);
}

/* The homepage's arrow, nudged on hover. */
.pgpl-co a.pgpl-co-btn svg { transition: transform 0.15s var(--ease); }
.pgpl-co a.pgpl-co-btn:hover svg { transform: translateX(2px); }

/* ---------- 14. Mobile pay rail ----------
   Scrolls to the payment section rather than submitting: the real submit
   control differs per gateway, so a bar claiming to "pay" would be lying on
   some of them. */

.pgpl-co .pgpl-co-rail {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: #fff;
	border-top: 1px solid var(--line);
	box-shadow: 0 -6px 20px rgba(11, 14, 28, 0.12);
	padding: 0.7rem max(0.9rem, env(safe-area-inset-left))
		max(0.7rem, env(safe-area-inset-bottom)) max(0.9rem, env(safe-area-inset-right));
}

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

.pgpl-co .pgpl-co-rail__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem;
	max-width: 1170px;
	margin: 0 auto;
}

.pgpl-co .pgpl-co-rail__total { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.15; min-width: 0; }

.pgpl-co .pgpl-co-rail__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mute);
}

/* The same numeral treatment as the summary total, scaled for the rail. */
.pgpl-co .pgpl-co-rail__amount {
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ultra);
	font-variant-numeric: tabular-nums;
}

/* Matches the pay button's language — same action, same treatment. */
.pgpl-co .pgpl-co-rail__cta {
	flex: 0 1 auto;
	padding: 0.75rem 1.4rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
	background: var(--ultra);
	border: 0;
	border-radius: var(--r-full);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.18s var(--ease), transform 0.12s var(--ease);
}

.pgpl-co .pgpl-co-rail__cta:hover { background: var(--ultra-deep); }
.pgpl-co .pgpl-co-rail__cta:active { transform: translateY(1px); }

@media (min-width: 62rem) {
	.pgpl-co .pgpl-co-rail { display: none !important; }
}

@media (max-width: 61.999rem) {
	.pgpl-co.pgpl-co--rail-on { padding-bottom: 5.5rem; }
}

/* ---------- 15. Responsive ---------- */

@media (max-width: 47.999rem) {
	.pgpl-co__head { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
	.pgpl-co__head-aside { width: 100%; justify-content: space-between; }

	/*
	 * Real cards only. The container-fieldset rule above now outranks this
	 * (two IDs to this one's one), so grouping wrappers keep padding 0 — but
	 * the :not() list documents the intent at the point of use, because a
	 * future edit that raises this selector's specificity would silently
	 * reintroduce the invisible 20px inset.
	 */
	.pgpl-co #edd_purchase_form fieldset:not(#edd_register_fields):not(#edd_payment_mode_submit):not(#edd_terms_agreement):not(#edd-privacy-policy-agreement),
	.pgpl-co #edd_purchase_form_wrap fieldset:not(#edd_register_fields):not(#edd_payment_mode_submit):not(#edd_terms_agreement):not(#edd-privacy-policy-agreement),
	.pgpl-co #edd_checkout_cart,
	.pgpl-co #edd_purchase_submit { padding: 1.25rem !important; }

	.pgpl-co #edd-payment-mode-wrap { grid-template-columns: minmax(0, 1fr); }
	.pgpl-co-upsell { padding: 1.05rem 1.1rem; }
}

@media (max-width: 26rem) {
	.pgpl-co .edd-discount-code-field-wrap { flex-direction: column; }
	.pgpl-co .edd-apply-discount { padding: 0.7rem 1.1rem; }
	.pgpl-co .pgpl-sum__thumb img { width: 40px; height: 40px; }
	.pgpl-co .pgpl-co-rail__cta { padding: 0.7rem 1rem; font-size: 0.88rem; }
}

/* ---------- 16. Motion, forced colours, print ---------- */

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

	.pgpl-co #edd_purchase_form_wrap:empty { animation: none; background: var(--tint); }
}

@media (forced-colors: active) {
	.pgpl-co .edd-gateway-option,
	.pgpl-co #edd-purchase-button,
	.pgpl-co .pgpl-co-upsell__cta,
	.pgpl-co a.pgpl-co-btn,
	.pgpl-co #edd_purchase_submit .puregpl-rzp-retry { border: 2px solid ButtonText; }

	/* The rim light and dot grid are pure decoration — drop them rather than
	   let them paint over system colours. */
	.pgpl-co-upsell::before,
	.pgpl-co-upsell::after { display: none; }

	/* Clipped-gradient glyphs are transparent under forced colours — restore
	   solid system ink or the totals vanish. */
	.pgpl-co .pgpl-sum__total-value,
	.pgpl-co .edd_cart_amount,
	.pgpl-co .pgpl-co-rail__amount,
	.pgpl-co .pgpl-sum__peek-amount {
		background: none;
		-webkit-text-fill-color: CanvasText;
		color: CanvasText;
	}
}

@media print {
	.pgpl-co .pgpl-co-rail,
	.pgpl-co-upsell,
	.pgpl-co #edd_payment_mode_select_wrap { display: none !important; }

	.pgpl-co::before { display: none; }
	.pgpl-co #edd_checkout_wrap { display: block; }
	.pgpl-co #edd_checkout_cart { box-shadow: none; }

	/* Ink on paper — gradients do not print. */
	.pgpl-co .pgpl-sum__total-value,
	.pgpl-co .edd_cart_amount {
		background: none;
		-webkit-text-fill-color: var(--ink);
		color: var(--ink);
	}
}


/* 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;
}

.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;
}


/* puregpl-razorpay */
/**
 * Razorpay checkout styles.
 *
 * Scoped under .puregpl-rzp- throughout so nothing here can bleed into a
 * theme's own checkout markup.
 *
 * @package PureGPL\EDD\Razorpay
 */

.puregpl-rzp-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 15, 23, 42, 0.55 );
	/* Rendered above the theme, so it must not inherit an odd body font. */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-backdrop-filter: blur( 2px );
	backdrop-filter: blur( 2px );
}

.puregpl-rzp-overlay__inner {
	min-width: 260px;
	max-width: 90vw;
	padding: 28px 32px;
	text-align: center;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 45px rgba( 15, 23, 42, 0.25 );
}

.puregpl-rzp-overlay__text {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: #0f172a;
}

.puregpl-rzp-spinner {
	width: 34px;
	height: 34px;
	margin: 0 auto;
	border: 3px solid rgba( 51, 149, 255, 0.2 );
	border-top-color: #3395ff;
	border-radius: 50%;
	animation: puregpl-rzp-spin 0.8s linear infinite;
}

@keyframes puregpl-rzp-spin {
	to {
		transform: rotate( 360deg );
	}
}

@keyframes puregpl-rzp-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.35;
	}
}

/*
 * Respect a reduced-motion preference. The indicator is swapped for a pulse
 * rather than removed, because during a payment it is the only signal the
 * buyer has that anything is still happening.
 */
@media ( prefers-reduced-motion: reduce ) {
	.puregpl-rzp-spinner {
		animation: puregpl-rzp-pulse 1.6s ease-in-out infinite;
	}
}

.puregpl-rzp-message {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 18px;
	padding: 13px 16px;
	font-size: 14.5px;
	line-height: 1.5;
	border-radius: 10px;
	border: 1px solid;
}

/*
 * The icon lives in CSS, not in the JS that builds the message, so the markup
 * stays plain text for screen readers (role=status/alert already announces
 * tone) and no SVG string has to survive jQuery escaping. Data URIs, because
 * the CSP-friendly alternative — an icon font — is a heavier dependency than
 * two 200-byte images.
 */
.puregpl-rzp-message::before {
	content: "";
	flex: none;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	background-size: contain;
	background-repeat: no-repeat;
}

.puregpl-rzp-message.edd-alert-error {
	color: #7f1d1d;
	background: #fef2f2;
	border-color: rgba( 220, 38, 38, 0.25 );
}

.puregpl-rzp-message.edd-alert-error::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 1.5 15 14H1z' stroke='%23dc2626' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.4' stroke='%23dc2626' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.6' r='.8' fill='%23dc2626'/%3E%3C/svg%3E" );
}

.puregpl-rzp-message.edd-alert-info {
	color: #0c4a6e;
	background: #f0f9ff;
	border-color: rgba( 2, 132, 199, 0.25 );
}

.puregpl-rzp-message.edd-alert-info::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7' stroke='%230284c7' stroke-width='1.5'/%3E%3Cpath d='M8 7.2v4' stroke='%230284c7' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.8' r='.9' fill='%230284c7'/%3E%3C/svg%3E" );
}

.puregpl-rzp-message p {
	margin: 0;
}

/*
 * Retire a control this plugin does not own.
 *
 * Applied to EDD's #edd-purchase-button once an order has been handed to
 * Razorpay, at which point pressing it would start a second checkout. The
 * declaration carries !important deliberately: the target belongs to EDD and
 * is styled by whatever theme is active, so a plain rule loses to any theme
 * selector carrying an ID — and a button that is supposed to be gone must be
 * gone in every theme, not most of them.
 */
.puregpl-rzp-hidden {
	display: none !important;
}

/*
 * In the interrupted state this is the ONLY call to action on the page, so it
 * is laid out as a primary control rather than an afterthought. Colour is left
 * to the theme through the .edd-submit / .button classes it also carries —
 * a payment button that ignores the surrounding design reads as untrustworthy.
 */
/*
 * The class is repeated in the selector on purpose. The retry button is built
 * by our JS carrying .edd-submit.button so EDD/theme layout rules apply, but
 * that also means the theme's own .edd-submit.button skin (observed: dark
 * grey) outguns a single class and the retry stops matching the pay button it
 * replaced. Doubling the class wins that fight without !important and without
 * depending on any theme's selector shape.
 */
.puregpl-rzp-retry.puregpl-rzp-retry {
	display: block;
	width: 100%;
	/* Zero, because the retry now renders in the pay button's own slot
	   (renderRetry inserts it after the hidden #edd-purchase-button) and must
	   sit exactly where that button sat — any top margin here would make the
	   swap visible as a jump. */
	margin-top: 0;
	cursor: pointer;
}

.puregpl-rzp-retry:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/*
 * Razorpay's own blue on the submit button.
 *
 * #3395FF is the blue Razorpay's own Checkout modal uses, so the button the
 * buyer presses and the window that opens next are visibly the same product.
 *
 * This deliberately ignores the surrounding theme, which is the entire point:
 * PayPal's smart buttons feel official BECAUSE they are yellow and black and
 * owe nothing to the site around them. A payment button painted in the site's
 * palette reads as the site's button, and a site's button is a weaker promise
 * than a processor's.
 *
 * Attribute selector, not a class — see brand_purchase_button(). It carries no
 * !important so a theme that would rather keep its own styling simply wins.
 */
/*
 * The pay button AND the retry button both wear the merchant's accent.
 *
 * Including .puregpl-rzp-retry here is the fix for a real mismatch: the retry
 * button is created by our JS after a dismissal, never passes through
 * brand_purchase_button(), and so used to inherit whatever the theme painted
 * primary buttons — leaving a green "Pay securely" and an indigo "Pay now" in
 * the same card, one screen apart.
 */
/*
 * COLOUR ONLY — deliberately no radius, padding, shadow or typography here.
 *
 * The puregpl.com checkout skin (generatepress-child checkout.css, the
 * .pgpl-co rules) owns the SHAPE of these buttons and styles both of them; a
 * shape declaration here fights it and, because the two selectors rank
 * differently per element, the pay and retry buttons come out with different
 * geometry — a 12px pay button beside a pill retry was observed live. The
 * negotiated contract is: skin owns shape, this plugin owns fill, so the
 * button always wears the merchant's accent (razorpay_theme_color, the same
 * colour the Razorpay window opens with) under whatever geometry the active
 * theme gives it. On themes with no skin at all, EDD's own button styling
 * provides the shape.
 */
#edd-purchase-button[data-puregpl-rzp],
.puregpl-rzp-retry.puregpl-rzp-retry {
	background: var(--puregpl-rzp-accent, #3395ff);
	border-color: var(--puregpl-rzp-accent, #3395ff);
	color: #fff;
}

/*
 * brightness() rather than a second hardcoded hex, because the accent is a
 * store setting and no fixed "darker blue" would follow it. This darkens
 * whatever colour the merchant chose.
 */
#edd-purchase-button[data-puregpl-rzp]:hover:not(:disabled),
#edd-purchase-button[data-puregpl-rzp]:focus:not(:disabled),
.puregpl-rzp-retry.puregpl-rzp-retry:hover,
.puregpl-rzp-retry.puregpl-rzp-retry:focus {
	filter: brightness(0.92);
}

/*
 * Processor mark beneath the submit button.
 *
 * Neutral on purpose: inherits the theme's colours through currentColor and
 * opacity rather than declaring its own, so it sits correctly on a light or a
 * dark checkout without the plugin having to know which it is. A theme that
 * wants it tighter can restyle these two classes.
 */
.puregpl-rzp-trust {
	margin-top: 14px;
	text-align: center;
	line-height: 1.4;
}

.puregpl-rzp-trust p {
	margin: 0;
}

.puregpl-rzp-trust__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 13px;
	opacity: 0.85;
}

.puregpl-rzp-trust__lock {
	font-size: 0.9em;
}

/*
 * Letterspaced small caps: the same register card networks use for their own
 * acceptance marks, which is exactly the shelf this line sits on. Rendered
 * through currentColor + opacity like the rest of the badge, so it stays
 * legible on whatever the theme paints behind it.
 */
.puregpl-rzp-trust__methods {
	margin-top: 5px !important;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.55;
}

/*
 * The optional Razorpay mark from assets/img/razorpay.svg.
 *
 * Both dimensions are pinned. Brand exports are commonly square with no
 * viewBox — the file supplied here is 280x280 — and such an SVG has no
 * intrinsic aspect ratio, so `width:auto` against a fixed height resolves to
 * zero and the mark disappears. object-fit keeps a non-square file honest
 * inside that box rather than stretching it.
 */
.puregpl-rzp-trust__logo {
	width: 16px;
	height: 16px;
	object-fit: contain;
	/* The brand line is a flex row now; gap spaces the lockup, not margins. */
	margin: 0;
}

:root{--puregpl-rzp-accent:#0d94fb;}

/* 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}


/* 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;
	}
}