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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes blink {
	from {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.wpcf7 [inert] {
	opacity: 0.5;
}

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

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

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

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

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

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


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

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


/* puregpl-brand-wall */
/**
 * PureGPL — brand browser.
 *
 * The homepage's design system, applied to a tool rather than to an argument.
 *
 * The tokens below are the homepage's values, restated rather than imported:
 * main-page.css is only enqueued on the front page, and a stylesheet that
 * silently depends on another page's stylesheet breaks the first time someone
 * reorders an enqueue. The cost is one duplicated block; the alternative is a
 * dependency nobody can see.
 *
 * Everything else — the dot grid, the aurora, the card with its ring — is the
 * same device as the homepage, so the two pages read as one site. The card is
 * stripped back further than the homepage's: see pgpl_bw_card() for why.
 */

/*
 * pgpl-bw-page is added by inc/brand-wall/brand-wall.php on every request the
 * browser renders — the hand-made Page AND all 192 category archives.
 *
 * page-template-brand-wall is kept beside it only because WordPress adds that
 * one for free on the Page, and a cached page served during a deploy may have
 * one class and not yet the other.
 */
body.pgpl-bw-page,
body.page-template-brand-wall {
	background-color: #fff;
}

.bw {
	--bw-display: "Bricolage Grotesque", "Poppins", system-ui, sans-serif;

	--t-2xl: clamp(1.85rem, 3.4vw, 2.7rem);
	--t-xl: clamp(1.3rem, 2vw, 1.6rem);
	--t-lg: 1.15rem;
	--t-md: 1rem;
	--t-sm: 0.925rem;
	--t-xs: 0.8rem;

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

	--bw-tint: #f6f7fd;
	--bw-line: rgba(11, 14, 28, 0.09);
	--bw-line-2: rgba(11, 14, 28, 0.06);
	--bw-ink: #0b0e1c;
	--bw-mute: #55607d;
	--bw-mute-2: #66708b;

	/*
	 * How far a sticky element sits below the sticky site header.
	 *
	 * Measured, not guessed: the header is 118px wide-screen and 126.6px once
	 * it stacks the search onto its own row, and it does not shrink on scroll.
	 * The switch is at 60rem because that is where chrome.css itself changes
	 * the header — keyed to the same number so the two cannot drift a
	 * breakpoint apart.
	 */
	--bw-sticky: 118px;

	position: relative;
	color: var(--bw-mute);
	background: #fff;
	font-size: var(--t-lg);
	line-height: 1.6;
}

/*
 * The hidden attribute has to win.
 *
 * The browser hides [hidden] through its own stylesheet, at the specificity of
 * a bare attribute selector — which ANY class rule outranks. So the moment
 * something carries both `hidden` and a `display` of its own, the display wins
 * and the element stays on screen with nothing in the markup to explain why.
 *
 * That is exactly what happened here: the selected-brand chips and the filter's
 * clear button both ship hidden and both set a flex display, so both were
 * visible on a page where nothing was selected and nothing had been typed.
 *
 * !important is the right tool for once. This is not overriding a decision —
 * it is restoring the platform behaviour our own class selectors broke, in one
 * place, rather than remembering to defend it on every element that needs it.
 */
.bw [hidden] { display: none !important; }

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

/* GeneratePress wraps the page in a container that would fight this layout. */
.pgpl-bw-page .site-content,
.pgpl-bw-page .content-area,
.pgpl-bw-page .site-main,
.page-template-brand-wall .site-content,
.page-template-brand-wall .content-area,
.page-template-brand-wall .site-main {
	max-width: none;
	margin: 0;
	padding: 0;
}

.pgpl-bw-page .site-content,
.page-template-brand-wall .site-content { display: block; }

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

/* --- Masthead ------------------------------------------------------------- */

/*
 * Short on purpose. The homepage hero fills a screen because its job is to make
 * an argument; this page's job is to be used, so the tool has to start inside
 * the first screenful.
 */
.bw-top {
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 3vw, 2.4rem) 0 clamp(1.4rem, 2.6vw, 2rem);
	border-bottom: 1px solid var(--bw-line-2);
}

.bw-top::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(11, 14, 28, 0.13) 1px, transparent 1px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 20% 40%, transparent 20%, #000 78%);
	mask-image: radial-gradient(ellipse 70% 70% at 20% 40%, transparent 20%, #000 78%);
	opacity: 0.6;
	pointer-events: none;
}

.bw-aurora {
	position: absolute;
	inset: -40% -10% auto -10%;
	height: 190%;
	overflow: hidden;
	pointer-events: none;
}

.bw-aurora span {
	position: absolute;
	display: block;
	border-radius: 50%;
	will-change: transform;
}

.bw-aurora__a {
	top: -20%;
	left: 0;
	width: 40vw;
	height: 40vw;
	max-width: 620px;
	max-height: 620px;
	background: radial-gradient(circle at 50% 50%, rgba(108, 134, 255, 0.34), transparent 66%);
	animation: bw-float-a 34s ease-in-out infinite;
}

.bw-aurora__b {
	top: -10%;
	right: 4%;
	width: 34vw;
	height: 34vw;
	max-width: 520px;
	max-height: 520px;
	background: radial-gradient(circle at 50% 50%, rgba(0, 182, 122, 0.18), transparent 66%);
	animation: bw-float-b 43s ease-in-out infinite;
}

@keyframes bw-float-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(9%, 7%, 0) scale(1.14); }
}

@keyframes bw-float-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
	50%      { transform: translate3d(-11%, 9%, 0) scale(0.92); }
}

.bw-top__inner {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 1.5rem 2.5rem;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
}

.bw-top__copy { min-width: 0; }

.bw-top__title {
	font-family: var(--bw-display);
	margin: 0.5rem 0 0;
	color: var(--bw-ink);
	/*
	 * Capped well below the homepage's 3.6rem. That headline is three words
	 * written to be a headline; this is a page title carrying the store's SEO
	 * phrasing — "WordPress Premium Brands — 135 plus Developers | PureGPL" —
	 * and at display size it buries the tool underneath it.
	 */
	font-size: clamp(1.7rem, 3.2vw, 2.5rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.bw-top__lede {
	max-width: 58ch;
	margin: 0.7rem 0 0;
	color: var(--bw-mute);
	font-size: var(--t-md);
	text-wrap: pretty;
}

/* Figures, inline rather than in a dark band — this is a toolbar, not a hero. */
.bw-top__stats {
	display: flex;
	gap: 2rem;
	margin: 0;
	flex-wrap: wrap;
}

.bw-top__stats > div {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.15rem;
}

.bw-top__stats dt {
	color: var(--bw-mute-2);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.bw-top__stats dd {
	margin: 0;
	font-family: var(--bw-display);
	color: var(--bw-ink);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

/* --- The browser ---------------------------------------------------------- */

.bw-sec { padding: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(2.4rem, 5vw, 4rem); }

.bw-layout {
	display: grid;
	grid-template-columns: 17rem minmax(0, 1fr);
	gap: clamp(1.2rem, 2.4vw, 2rem);
	align-items: start;
}

/*
 * A category with no sub-categories has nothing to filter by, so it has no
 * sidebar — 39 of the 41 top-level categories are in this state. One column,
 * and the grid takes the width the list would have had.
 *
 * The narrow-screen rule below stacks the sidebar above the results with a
 * fixed height; with no sidebar to stack there is nothing for it to act on, so
 * this needs no breakpoint of its own.
 */
.bw-layout--flat {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Four across rather than three, once the sidebar is gone.
 *
 * The three-column grid was sized for the 904px the results column gets beside
 * a 17rem list. Given the full 1208px, three columns would stretch each card to
 * ~390px — larger than the 768px-wide screenshots have pixels for, so they
 * would be upscaled and soft. Four keeps the card near the ~289px the artwork
 * was cut for, and 24 per page still divides exactly.
 *
 * Written as min-width on purpose. As a plain rule its two-class selector would
 * outrank the bare .bw-grid inside the phone breakpoints further down the file,
 * and flat categories would stay four-across on a handset no matter what those
 * rules said. Scoped to the width it is actually about, it cannot reach them.
 */
@media (min-width: 64rem) {
	.bw-layout--flat .bw-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --- The brand list ------------------------------------------------------- */

/*
 * Sticky, and scrolling inside itself. The products run to pages; without this
 * the list scrolls away with them and choosing a second brand means scrolling
 * back up — which is the exact failure of the old wall, reintroduced.
 */
.bw-side {
	position: sticky;
	top: calc(var(--bw-sticky) + 1rem);
}

/*
 * A card, not a tinted block.
 *
 * Flat tint gave the panel no relationship to the product cards beside it —
 * they sat on the page, it sat in it. White on the same ring-and-shadow as
 * every card on the site makes the two read as the same family, and gives the
 * list somewhere to be quiet against.
 */
.bw-side__inner {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - var(--bw-sticky) - 3rem);
	overflow: hidden;
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow:
		0 0 0 1px rgba(11, 14, 28, 0.07),
		0 10px 30px -22px rgba(11, 14, 28, 0.5);
}

/* --- Finding a brand ------------------------------------------------------ */

/*
 * The controls get their own ground, so the panel reads as a header over a
 * list rather than as one undifferentiated column of things.
 *
 * The gradient is barely there — two per cent of the accent at the top, gone by
 * the bottom. Enough that the eye registers a zone; not enough to notice as
 * colour.
 */
.bw-find {
	flex: 0 0 auto;
	padding: 0.85rem 0.8rem 0.75rem;
	background:
		linear-gradient(180deg, rgba(108, 134, 255, 0.05), rgba(108, 134, 255, 0)),
		var(--bw-tint);
	border-bottom: 1px solid var(--bw-line);
}

.bw-find__top {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.6rem;
}

.bw-find__title {
	font-family: var(--bw-display);
	margin: 0;
	color: var(--bw-ink);
	font-size: var(--t-md);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.bw-find__all {
	color: var(--bw-mute-2);
	font-size: var(--t-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/*
 * A real field on the panel's tint, rather than a borderless input sharing it.
 * White ground, its own edge, its own radius — the same three things that make
 * every other input on this site look like one.
 */
.bw-find__field {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.5rem 0.6rem;
	background: #fff;
	border: 1px solid var(--bw-line);
	border-radius: var(--r-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * focus-within, not :focus. The ring belongs to the field, which is the thing
 * that looks focusable; put on the bare input it draws inside the border and
 * reads as a second box.
 */
.bw-find__field:focus-within {
	border-color: rgba(108, 134, 255, 0.85);
	box-shadow: 0 0 0 3px rgba(108, 134, 255, 0.18);
}

.bw-find__ico { flex: 0 0 auto; color: var(--bw-mute-2); }

.bw .bw-find__input {
	width: 100%;
	min-width: 0;
	padding: 0;
	color: var(--bw-ink);
	font-family: inherit;
	font-size: var(--t-sm);
	background: none;
	border: 0;
	outline: none;
	box-shadow: none;
}

.bw .bw-find__input::placeholder { color: var(--bw-mute-2); }

.bw .bw-find__clear {
	display: inline-flex;
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--bw-mute-2);
	background: var(--bw-tint);
	border: 0;
	border-radius: var(--r-full);
	cursor: pointer;
	transition: color 0.14s ease, background-color 0.14s ease;
}

@media (hover: hover) and (pointer: fine) {
	.bw .bw-find__clear:hover { color: #fff; background: var(--bw-ink); }
}

.bw-find__bar {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.55rem;
}

.bw-find__status {
	margin: 0;
	color: var(--bw-mute-2);
	font-size: var(--t-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Said in the accent when the filter has excluded everything. */
.bw-find__status.is-empty { color: #b4243c; }

/* --- Ordering ------------------------------------------------------------- */

/*
 * Only useful with the script that performs the reorder, so it is not shown
 * without it. Everything else in this panel works either way.
 */
.bw-order { display: none; }
.bw-js .bw-order { display: inline-flex; gap: 2px; padding: 2px; background: rgba(11, 14, 28, 0.06); border-radius: var(--r-full); }

.bw .bw-order__b {
	padding: 0.2rem 0.55rem;
	color: var(--bw-mute-2);
	font-family: inherit;
	font-size: 0.7rem;
	font-weight: 700;
	background: none;
	border: 0;
	border-radius: var(--r-full);
	cursor: pointer;
	transition: color 0.14s ease, background-color 0.14s ease;
}

.bw .bw-order__b.is-on {
	color: var(--bw-ink);
	background: #fff;
	box-shadow: 0 1px 3px rgba(11, 14, 28, 0.12);
}

@media (hover: hover) and (pointer: fine) {
	.bw .bw-order__b:not(.is-on):hover { color: var(--bw-ink); }
}

.bw-list {
	flex: 1 1 auto;
	margin: 0;
	padding: 0.35rem;
	overflow-y: auto;
	list-style: none;
	/* Stops a flick at the end of the list from scrolling the page behind it. */
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(11, 14, 28, 0.18) transparent;
}

/*
 * A quieter scrollbar. The default is a wide grey slab against a white panel,
 * and on a list this tall it is the second most prominent thing in the column.
 */
.bw-list::-webkit-scrollbar { width: 8px; }
.bw-list::-webkit-scrollbar-track { background: transparent; }

.bw-list::-webkit-scrollbar-thumb {
	background: rgba(11, 14, 28, 0.16);
	background-clip: padding-box;
	border: 2px solid transparent;
	border-radius: var(--r-full);
}

.bw-list::-webkit-scrollbar-thumb:hover { background: rgba(11, 14, 28, 0.3); background-clip: padding-box; }

.bw-list__l {
	display: flex;
	gap: 0.55rem;
	align-items: center;
	position: relative;
	padding: 0.42rem 0.55rem;
	color: var(--bw-mute);
	font-size: var(--t-sm);
	text-decoration: none;
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: color 0.14s ease, background-color 0.14s ease;
}

/*
 * The marker that appears down the left of a selected row.
 *
 * Drawn as a pseudo-element and scaled from nothing, so it grows out of the
 * edge rather than blinking on — and because it is a transform it costs the
 * compositor a frame and the layout nothing.
 */
.bw-list__l::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 3px;
	height: 1.1rem;
	background: var(--pgpl-ultra, #3c50ff);
	border-radius: 0 var(--r-full) var(--r-full) 0;
	transform: translateY(-50%) scaleY(0);
	transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.bw-list__l.is-on::before { transform: translateY(-50%) scaleY(1); }

/*
 * The real input, taken out of the flow but NOT display:none.
 *
 * A hidden-with-display checkbox is removed from the accessibility tree and
 * from the tab order, which throws away everything the element already does —
 * focus, space to toggle, "checkbox, checked" announced, and submitting with
 * the form when there is no script. Clipped to nothing instead, so it is still
 * a checkbox in every way except visually.
 */
.bw-list__cb {
	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;
}

.bw-list__box {
	display: inline-flex;
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	align-items: center;
	justify-content: center;
	color: transparent;
	background: #fff;
	border: 1.5px solid rgba(11, 14, 28, 0.22);
	border-radius: 5px;
	transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.bw-list__cb:checked + .bw-list__box {
	color: #fff;
	background: var(--pgpl-ultra, #3c50ff);
	border-color: var(--pgpl-ultra, #3c50ff);
}

/*
 * The tick draws itself.
 *
 * dasharray/dashoffset on the path, released on check — the mark appears to be
 * written rather than to pop into place. It is 180ms and most people will never
 * consciously see it; what they will notice is that the control feels answered.
 */
.bw-list__box svg path {
	stroke-dasharray: 22;
	stroke-dashoffset: 22;
	transition: stroke-dashoffset 0.18s ease 0.02s;
}

.bw-list__cb:checked + .bw-list__box svg path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
	.bw-list__box svg path,
	.bw-list__l::before { transition: none; }
}

/*
 * The focus ring lands on the box the eye is actually looking at. Left on the
 * clipped input it would draw a 1px outline in the corner of the panel.
 */
.bw-list__cb:focus-visible + .bw-list__box {
	outline: 2px solid var(--pgpl-ultra, #3c50ff);
	outline-offset: 2px;
}

/* The name takes the slack; the count keeps its column. */
.bw-list__name { flex: 1 1 auto; }

/* The part of a name the filter matched. */
.bw-list__l mark {
	color: inherit;
	font-weight: 700;
	background: rgba(108, 134, 255, 0.22);
	border-radius: 3px;
}

.bw-list__l.is-on mark { background: rgba(255, 255, 255, 0.25); }

.bw-list__name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/*
 * The count in tabular figures and its own colour, so the column of numbers
 * reads as a column rather than as part of each name.
 */
.bw-list__n {
	flex: 0 0 auto;
	color: var(--bw-mute-2);
	font-size: var(--t-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
	.bw-list__l:hover { color: var(--bw-ink); background: var(--bw-tint); }
	.bw-list__l:hover .bw-list__box { border-color: rgba(108, 134, 255, 0.7); }
}

/*
 * Selected is now the ticked box, not a filled bar.
 *
 * With one brand at a time a solid row was a reasonable "you are here". With
 * several it would be several solid rows, and a list of 137 names carrying four
 * blocks of colour reads as damage rather than as a selection. The tick does
 * the saying; the row only firms up enough to be scannable at a glance.
 */
.bw-list__l.is-on {
	color: var(--bw-ink);
	font-weight: 700;
	background: rgba(108, 134, 255, 0.09);
}

.bw-list__l.is-on .bw-list__n { color: var(--pgpl-ultra, #3c50ff); }

/* --- Clearing ------------------------------------------------------------- */

/* --- What you have picked ------------------------------------------------- */

.bw-chips {
	display: flex;
	gap: 0.3rem;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px dashed rgba(11, 14, 28, 0.12);
}

.bw .bw-chip {
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
	max-width: 100%;
	padding: 0.22rem 0.45rem 0.22rem 0.55rem;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	text-decoration: none;
	background: var(--pgpl-ultra, #3c50ff);
	border-radius: var(--r-full);
	transition: background-color 0.14s ease, transform 0.14s ease;
}

/* The name gives way before the × does — a chip you cannot dismiss is a bug. */
.bw-chip__t {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.bw-chip svg { flex: 0 0 auto; opacity: 0.75; }

@media (hover: hover) and (pointer: fine) {
	.bw .bw-chip:hover {
		background: var(--pgpl-ultra-deep, #2b3ae0);
		transform: translateY(-1px);
	}

	.bw .bw-chip:hover svg { opacity: 1; }
}

.bw .bw-chips__clear {
	margin-left: auto;
	color: var(--bw-mute-2);
	font-size: 0.7rem;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

@media (hover: hover) and (pointer: fine) {
	.bw .bw-chips__clear:hover { color: var(--bw-ink); border-bottom-color: currentColor; }
}

/*
 * The no-script submit. Same reasoning as the sort's Apply button: hidden by a
 * flag the script sets on the app root, so it is never hidden from anyone whose
 * browser did not run the script.
 */
.bw .bw-side__go {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.7rem 1rem;
	color: #fff;
	font-family: inherit;
	font-size: var(--t-sm);
	font-weight: 700;
	background: var(--pgpl-ultra, #3c50ff);
	border: 0;
	border-top: 1px solid var(--bw-line);
	cursor: pointer;
}

.bw-js .bw-side__go { display: none; }

/* --- The results panel ---------------------------------------------------- */

.bw-results { position: relative; min-height: 20rem; }

/*
 * Dimmed and inert while a fetch is out, rather than emptied. Blanking the grid
 * makes the page jump to a new height and then jump back; holding the old
 * results in place means only the content changes.
 */
.bw-results.is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

.bw-results__head {
	display: flex;
	gap: 1rem;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--bw-line);
}

.bw-results__title {
	font-family: var(--bw-display);
	margin: 0;
	color: var(--bw-ink);
	font-size: var(--t-xl);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.025em;
	/* A long search term must wrap rather than push the sort control off. */
	overflow-wrap: anywhere;
}

/* --- Searching the products ----------------------------------------------- */

/*
 * The search bar, across the foot of the masthead.
 *
 * Sized like the thing it is: on a shelf of 6,401 products this is the primary
 * action, not an accessory to the sort control it used to sit beside. It is
 * also the only control on the page that is not a link or a tick — so it gets
 * the one solid, raised surface here, and everything around it stays flat.
 *
 * Capped rather than full-bleed. Stretched to 1240px it stops reading as a
 * field and starts reading as a band, and the caret ends up a long way from
 * the button.
 */
.bw-hunt {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	max-width: 44rem;
	margin: clamp(1.1rem, 2.4vw, 1.6rem) 0 0;
}

/*
 * The field, and only the field.
 *
 * The magnifier and the clear button are positioned from this box's edges, not
 * the bar's — so the submit button beside it can be shown or hidden without
 * either of them moving. It is hidden on every page where the script runs and
 * visible on the search results page, which does not load it.
 */
.bw-hunt__field {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	align-items: center;
}

.bw-hunt__ico {
	position: absolute;
	left: 1.05rem;
	color: var(--bw-mute-2);
	pointer-events: none;
	transition: color 0.16s ease;
}

.bw .bw-hunt__input {
	width: 100%;
	margin: 0;
	padding: 0.95rem 3rem 0.95rem 2.9rem;
	color: var(--bw-ink);
	font-family: inherit;
	font-size: var(--t-md);
	line-height: 1.3;
	background: #fff;
	border: 1px solid var(--bw-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(11, 14, 28, 0.04), 0 10px 26px -20px rgba(11, 14, 28, 0.55);
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bw .bw-hunt__input::placeholder { color: var(--bw-mute-2); }

/* The native one only exists in WebKit and cannot be styled; ours is below. */
.bw .bw-hunt__input::-webkit-search-cancel-button { display: none; }

.bw .bw-hunt__input:focus,
.bw .bw-hunt__input:focus-visible {
	outline: none;
	border-color: var(--pgpl-ultra, #3c50ff);
	box-shadow:
		0 0 0 4px rgba(60, 80, 255, 0.14),
		0 10px 26px -18px rgba(60, 80, 255, 0.6);
}

.bw-hunt:focus-within .bw-hunt__ico { color: var(--pgpl-ultra, #3c50ff); }

/*
 * Our own clear button. Sits inside the field's right padding, which is what
 * the 3rem on that side is reserving.
 */
.bw .bw-hunt__x {
	position: absolute;
	right: 0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	color: var(--bw-mute);
	background: var(--bw-tint);
	border: 0;
	border-radius: var(--r-full);
	cursor: pointer;
	transition: color 0.16s ease, background-color 0.16s ease;
}

.bw .bw-hunt__x:hover {
	color: #fff;
	background: var(--bw-ink);
}

.bw .bw-hunt__x:focus-visible {
	outline: 2px solid var(--pgpl-ultra, #3c50ff);
	outline-offset: 2px;
}

/* The no-script submit. .bw-js removes it — typing searches on its own. */
.bw .bw-hunt__go {
	flex: none;
	margin-left: 0.6rem;
	padding: 0.95rem 1.3rem;
	color: #fff;
	font-family: inherit;
	font-size: var(--t-sm);
	font-weight: 700;
	background: var(--pgpl-ultra, #3c50ff);
	border: 0;
	border-radius: 14px;
	cursor: pointer;
}

.bw-js .bw-hunt__go { display: none; }

/*
 * A search that found nothing.
 *
 * Given room and a way out, rather than a one-line apology: this is the state
 * someone is most likely to be stuck in, and the only thing that helps is a
 * button back to the full shelf.
 */
.bw-none {
	padding: 2.5rem 1.5rem;
	text-align: center;
	background: var(--bw-tint);
	border-radius: var(--r-md);
}

.bw-none__t {
	font-family: var(--bw-display);
	max-width: 40ch;
	margin: 0 auto;
	color: var(--bw-ink);
	font-size: var(--t-lg);
	font-weight: 700;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}

.bw-none__b {
	max-width: 44ch;
	margin: 0.5rem auto 0;
	color: var(--bw-mute);
	font-size: var(--t-sm);
}

.bw .bw-none__go {
	display: inline-block;
	margin-top: 1.1rem;
	padding: 0.6rem 1.1rem;
	color: #fff;
	font-size: var(--t-sm);
	font-weight: 700;
	text-decoration: none;
	background: var(--pgpl-ultra, #3c50ff);
	border-radius: var(--r-sm);
	transition: filter 0.16s ease;
}

.bw .bw-none__go:hover { filter: brightness(1.1); }

.bw .bw-none__go:focus-visible {
	outline: 2px solid var(--pgpl-ultra, #3c50ff);
	outline-offset: 3px;
}

.bw-results__n {
	margin: 0.2rem 0 0;
	color: var(--bw-mute-2);
	font-size: var(--t-sm);
	font-variant-numeric: tabular-nums;
}

.bw-results__none {
	margin: 0;
	padding: 3rem 1rem;
	color: var(--bw-mute-2);
	text-align: center;
}

/* --- Sort ----------------------------------------------------------------- */

.bw-sort {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex: 0 0 auto;
}

.bw-sort__label {
	color: var(--bw-mute-2);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bw .bw-sort__select {
	padding: 0.5rem 2rem 0.5rem 0.8rem;
	color: var(--bw-ink);
	font-family: inherit;
	font-size: var(--t-sm);
	font-weight: 600;
	background-color: var(--bw-tint);
	/* A drawn chevron, so the control looks the same in every browser. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355607d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	background-size: 14px 14px;
	border: 1px solid var(--bw-line);
	border-radius: var(--r-full);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.bw .bw-sort__select:focus-visible {
	outline: 2px solid var(--pgpl-ultra, #3c50ff);
	outline-offset: 2px;
}

.bw .bw-sort__go {
	padding: 0.5rem 0.9rem;
	color: #fff;
	font-family: inherit;
	font-size: var(--t-xs);
	font-weight: 700;
	background: var(--pgpl-ultra, #3c50ff);
	border: 0;
	border-radius: var(--r-full);
	cursor: pointer;
}

/*
 * Only ever seen without JavaScript. The flag sits on the app root rather than
 * on the form, because the form is replaced wholesale on every swap and a class
 * set on it would come back on the first sort.
 */
.bw-js .bw-sort__go { display: none; }

/* --- The product cards ---------------------------------------------------- */

/*
 * Three across, stated rather than fitted.
 *
 * auto-fill packed in as many 210px columns as the space allowed, which meant
 * the card size was decided by whatever width the browser happened to be — four
 * on a wide screen, three on a narrower one, with the artwork shrinking to suit.
 * Three fixed columns give each product a bigger, consistent frame, which is
 * what the images are worth on a page whose whole job is showing them.
 *
 * 24 per page divides by three exactly, so the last row is never a partial one.
 */
.bw-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.15rem;
}

/*
 * A picture, and a panel with the slack taken out.
 *
 * The panel's problem was never that it existed — it was that it held two
 * stacked rows, a title and then a line beneath it carrying one short fact. It
 * therefore had to be tall enough for the taller arrangement on EVERY card in
 * the grid, and on most of them the lower half was empty.
 *
 * The version moved up onto the title's line, the padding came in, and the card
 * lost 27px without anything being taken off it and without anything being laid
 * over the screenshot.
 */
.bw .bw-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background: #fff;
	/*
	 * Tighter than the page's --r-lg (22px), which is a radius drawn for the
	 * big panels — the masthead, the brand list. On a 289px card that curve
	 * eats into the screenshot's corners; 14px reads as a crisp edge and lets
	 * the artwork keep its rectangle.
	 */
	border-radius: 14px;
	box-shadow:
		0 0 0 1px rgba(11, 14, 28, 0.07),
		0 10px 24px -18px rgba(11, 14, 28, 0.45);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/*
 * The keyboard's version of the hover state.
 *
 * The card is the main thing on this page you can act on, and it was the only
 * control on it without a focus ring — every other one (the filter field, the
 * brand checkboxes, the sort select) already had one. Tabbing through a grid of
 * 24 cards moved an invisible cursor.
 *
 * On the card rather than inside it, and with an offset, so the ring traces the
 * rounded corner instead of being clipped by the overflow:hidden above.
 */
.bw .bw-card:focus-visible {
	outline: 2px solid var(--pgpl-ultra, #3c50ff);
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.bw .bw-card:hover {
		transform: translateY(-4px);
		box-shadow:
			0 0 0 1px rgba(108, 134, 255, 0.4),
			0 26px 44px -24px rgba(11, 14, 28, 0.5);
	}

	.bw .bw-card:hover .bw-card__art img { transform: scale(1.05); }

	/*
	 * The title moves with the card.
	 *
	 * The name is what identifies the link, so it should be what acknowledges
	 * you — and on a white panel the accent is legible, which it would not be
	 * over an arbitrary screenshot.
	 */
	.bw .bw-card:hover .bw-card__name { color: var(--pgpl-ultra, #3c50ff); }
}

/*
 * 16:10, which is what the artwork actually is.
 *
 * The source images are 768 × 468 — a ratio of 1.64 — so 16:10 (1.6) crops
 * about a percent off each side and nothing else. Anything squarer crops the
 * brand name straight off the left of the frame, which is where every one of
 * these screenshots puts it: 4:3 turned "AIGORA" into "IGORA".
 */
.bw-card__art {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--bw-tint);
	box-shadow: inset 0 -1px 0 rgba(11, 14, 28, 0.08);
}

.bw-card__art img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

/* Sits under the image; only seen when the file behind it is missing. */
.bw-card__art::before {
	content: attr(data-letter);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(11, 14, 28, 0.14);
	font-size: 3.2rem;
	font-weight: 800;
}

/* A plain padded box: the title is the only thing in it. */
.bw-card__body {
	display: block;
	flex: 1 1 auto;
	padding: 0.8rem 0.85rem 0.85rem;
}

/*
 * 0.9rem rather than the 1rem it was.
 *
 * Not a cosmetic tweak — it buys about three characters a line, which is what
 * takes the clipped titles from 11 back down to 3 once the tag is on the line
 * with them. The panel is the tightest part of the card now, so the type in it
 * has to work at the width it actually has.
 *
 * Three lines, not two: the third is only used by the titles that need it, and
 * only those rows grow. With the tag inside the clamp this comes out at zero
 * clipped names on a 289px column, in a 246px card — 28px shorter than the card
 * this replaced.
 */
.bw-card__name {
	font-family: var(--bw-display);
	display: -webkit-box;
	overflow: hidden;
	color: var(--bw-ink);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	transition: color 0.18s ease;
}

/*
 * The version badge: angle brackets, then the number. No label.
 *
/*
 * The badge, pinned to the bottom-left of the artwork.
 *
 * It carries its own opaque white backing rather than a tint, because it sits
 * on a picture now: these screenshots are mostly dark but not reliably — a few
 * are near-white — and only an opaque ground with dark text is legible over
 * both. The blur is what stops it reading as pasted on.
 *
 * nowrap and a max-width: it must not break across lines or be reshaped by a
 * long number, and it must not run the width of the card if one ever arrives.
 */
/*
 * Smoked glass rather than a white sticker.
 *
 * A light pill is legible but it reads as a label applied to the picture. A
 * dark, slightly translucent ground reads as part of the same object — and it
 * is the more robust of the two, because the artwork here is unpredictable:
 * light text on a dark ground survives a near-white screenshot, where dark text
 * on a white ground has to be fully opaque to survive a dark one. Tested both
 * ways, over an inverted screenshot and over pure white.
 *
 * Four shadows, and each does a separate job. The two insets are the finish:
 * a one-pixel highlight along the top edge, where a raised glass object would
 * catch the light, and a faint rim around the whole thing so it has an edge on
 * a busy screenshot. The two drops are the lift, one tight and one wide.
 *
 * The saturate() in the backdrop filter is the detail that sells it: the
 * artwork blurred underneath keeps its colour instead of going grey, so the
 * badge picks up whatever it is sitting on.
 */
.bw-card__ver {
	position: absolute;
	left: 0.6rem;
	bottom: 0.6rem;
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
	max-width: calc(100% - 1.2rem);
	overflow: hidden;
	padding: 0.28rem 0.55rem;
	color: rgba(255, 255, 255, 0.95);
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 48%),
		linear-gradient(180deg, rgba(24, 28, 56, 0.82), rgba(9, 11, 26, 0.9));
	border-radius: 8px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.24),
		inset 0 0 0 1px rgba(255, 255, 255, 0.09),
		0 2px 6px -3px rgba(5, 7, 18, 0.8),
		0 10px 22px -12px rgba(5, 7, 18, 0.95);
	backdrop-filter: blur(10px) saturate(150%);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
}

/*
 * The accent, lifted to where it reads.
 *
 * --pgpl-ultra is picked to sit on white; on this near-black ground it is a
 * dark blue on a dark ground and all but vanishes. This is the same hue at a
 * luminance that works here — the accent's meaning rather than its hex.
 */
.bw-card__ver svg {
	flex: none;
	color: #9aabff;
}

/*
 * A monospace number, and tabular figures within it.
 *
 * A version is read as a token rather than as a word, and down a column of 24
 * cards the digits line up instead of drifting — which is what makes "1.9" and
 * "1.10" comparable at a glance.
 */
/*
 * The hairline before the number is the whole trick.
 *
 * It turns two things sitting next to each other into one object with two
 * fields — a mark saying what this is, then the value — which is how a spec
 * plate is set. Without it the brackets just float beside a number.
 */
.bw-card__vn {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	padding-left: 0.3rem;
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

/*
 * "Version", clipped rather than deleted.
 *
 * Removed from the markup, a screen reader would announce a bare number with
 * nothing saying what it counts — the angle brackets that supply that visually
 * are decoration it never sees. Clipped, not display:none, because display:none
 * takes it out of the accessibility tree, which is the thing being avoided.
 */
.bw-card__vl {
	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;
}

/*
 * There is no .bw-card__go any more.
 *
 * The arrow was restating what the whole card already is: one link. It also
 * competed with the version tag for the same corner of the panel, and between
 * a fact that differs per card and a decoration that does not, the fact wins.
 * Hover, focus and the cursor carry the affordance.
 */

/* --- The non-product results on the search page ---------------------------- */

/*
 * Deliberately not cards.
 *
 * These are blog posts and pages, and dressing them as products was the fault
 * in the template this replaces — a post rendered as a card with no price, no
 * version and no screenshot reads as a broken product. A list says "different
 * kind of thing" without needing a label to explain it.
 */
.bw-else {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: clamp(1.4rem, 3vw, 2rem);
	border-top: 1px solid var(--bw-line);
}

.bw-else__t {
	font-family: var(--bw-display);
	margin: 0 0 0.9rem;
	color: var(--bw-ink);
	font-size: var(--t-lg);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.bw-else__list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bw .bw-else__link {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
	padding: 0.8rem 0.95rem;
	color: var(--bw-ink);
	font-size: var(--t-sm);
	font-weight: 600;
	text-decoration: none;
	background: var(--bw-tint);
	border-radius: var(--r-sm);
	transition: color 0.16s ease, background-color 0.16s ease;
}

.bw .bw-else__link:hover {
	color: #fff;
	background: var(--pgpl-ultra, #3c50ff);
}

.bw .bw-else__link:focus-visible {
	outline: 2px solid var(--pgpl-ultra, #3c50ff);
	outline-offset: 2px;
}

.bw-else__name { min-width: 0; }

/* The kind of thing it is — Post, Page — never wraps or shrinks. */
.bw-else__kind {
	flex: none;
	color: var(--bw-mute-2);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bw .bw-else__link:hover .bw-else__kind { color: rgba(255, 255, 255, 0.82); }

/* --- Pager ---------------------------------------------------------------- */

.bw-pager {
	display: flex;
	gap: 0.35rem;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 2rem;
}

.bw .bw-pager__l {
	display: inline-flex;
	min-width: 2.4rem;
	height: 2.4rem;
	align-items: center;
	justify-content: center;
	padding: 0 0.6rem;
	color: var(--bw-mute);
	font-size: var(--t-sm);
	font-weight: 700;
	text-decoration: none;
	background: var(--bw-tint);
	border-radius: var(--r-full);
	font-variant-numeric: tabular-nums;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.bw .bw-pager__l.current {
	color: #fff;
	background: var(--bw-ink);
}

.bw .bw-pager__l.dots { background: none; }

@media (hover: hover) and (pointer: fine) {
	.bw .bw-pager__l:not(.current):not(.dots):hover {
		color: #fff;
		background: var(--pgpl-ultra, #3c50ff);
	}
}

/* --- Editors only --------------------------------------------------------- */

.bw-empty {
	max-width: 46rem;
	margin: 0 auto;
	padding: clamp(1.6rem, 4vw, 2.6rem);
	background: var(--bw-tint);
	border: 1px dashed var(--bw-line);
	border-radius: var(--r-lg);
}

.bw-empty__title {
	font-family: var(--bw-display);
	margin: 0;
	color: var(--bw-ink);
	font-size: var(--t-xl);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.bw-empty__body { margin: 0.75rem 0 0; color: var(--bw-mute); font-size: var(--t-md); }
.bw-empty__note { margin: 0.75rem 0 0; color: var(--bw-mute-2); font-size: var(--t-xs); }

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

@media (max-width: 68rem) {
	.bw-layout { grid-template-columns: 15rem minmax(0, 1fr); }
}

/* The header stacks its search onto a second row here. See --bw-sticky. */
@media (max-width: 60rem) {
	.bw { --bw-sticky: 127px; }
}

@media (max-width: 56rem) {
	/*
	 * The list moves above the results and stops being sticky.
	 *
	 * A 15rem column at this width leaves the grid too narrow for two cards,
	 * and a sticky panel that tall would take most of a phone screen. Capped
	 * and scrolling inside itself instead, so the products stay in reach — the
	 * filter box above it is what makes that cap workable with 137 brands.
	 */
	.bw-layout { grid-template-columns: minmax(0, 1fr); }

	.bw-side { position: static; }
	.bw-side__inner { max-height: none; }
	.bw-list { max-height: 15rem; }

	.bw-top__inner { align-items: flex-start; }
	.bw-top__stats { gap: 1.5rem; }
}

@media (max-width: 48rem) {
	.bw-results__head { align-items: stretch; flex-direction: column; }
	.bw-hunt { max-width: none; }
	.bw-sort { width: 100%; }
	.bw .bw-sort__select { flex: 1 1 auto; }
}

/*
 * Two on a phone. Three would put each card under 190px, at which point the
 * screenshot — the thing being sold — stops being legible.
 */
@media (max-width: 40rem) {
	.bw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 30rem) {
	.bw-grid { gap: 0.8rem; }

	.bw-card__body { padding: 0.7rem 0.75rem 0.75rem; }
	.bw-card__name { font-size: 0.85rem; }
	.bw-card__ver { left: 0.45rem; bottom: 0.45rem; padding: 0.18rem 0.4rem; font-size: 0.66rem; }

	.bw-top__stats { gap: 1.1rem; }
	.bw-top__stats dd { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.bw-aurora span { animation: none; }

	/*
	 * The title's colour change stays — it is the feedback, not the motion.
	 * Only the lift and the zoom are dropped.
	 */
	.bw .bw-card,
	.bw-card__art img { transition: none; }

	.bw .bw-card:hover { transform: none; }
	.bw .bw-card:hover .bw-card__art img { transform: none; }
}


/* 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 {
	/* Left-packed with the right cluster pushed across, rather than
	   space-between: with a second pill on the left, space-between parked it
	   in the middle of the band on its own. */
	justify-content: flex-start;
	gap: 0.6rem;
	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.
 */

/* The announcement: the pill beside "Latest updates", almost its twin — a
   shade lighter ink, green text and a solid green tag. The green is the live
   dot's, which the band already uses to mean "something is fresh here", so
   the pill borrows a meaning the header has taught rather than adding a
   colour. Findable, not loud. */
.pgpl-hd__announce {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.28rem 0.7rem 0.28rem 0.4rem;
	color: #a9f5c3;
	text-decoration: none;
	background: #141a3d;
	border: 1px solid rgba(74, 222, 128, 0.35);
	border-radius: 999px;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.pgpl-hd .pgpl-hd__announce:hover,
.pgpl-hd .pgpl-hd__announce:focus {
	color: #d2fbe0;
	background: #1a2150;
	border-color: rgba(74, 222, 128, 0.6);
}
.pgpl-hd__announce-tag {
	padding: 0.1rem 0.4rem;
	background: #4ade80;
	color: #052e16;
	border-radius: 5px;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
}
.pgpl-hd__announce-label { font-weight: 600; }
.pgpl-hd__announce .pgpl-hd__updates-arrow { opacity: 0.8; }

/* The same thing in the phone drawer, where the band does not exist. Both
   classes, because the plain row rule is declared later in this file and won
   the tie on background. */
.pgpl-drawer__updates.pgpl-drawer__announce {
	margin-bottom: 0.5rem;
	color: #a9f5c3;
	background: #141a3d;
	border-color: rgba(74, 222, 128, 0.35);
}
.pgpl-drawer__updates.pgpl-drawer__announce .pgpl-drawer__updates-label { color: #a9f5c3; }

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

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