/*
Theme Name:   Xelora Audio
Theme URI:    https://xeloraaudio.com
Author:       Xelora Audio
Description:  Monochrome minimal theme for a free audio plugin store. Built on WooCommerce. Black and white only, hairline grid, spec-sheet layout. Pairs with the Xelora Core plugin.
Version:      4.7.0
Requires PHP: 8.0
License:      GPL-2.0-or-later
Text Domain:  xelora
*/

/* ============================================================
   TOKENS — black, white and two greys.
   The page is light. Black is reserved: the hero banner, the
   footer, the download button. Used everywhere it stops meaning
   anything.
   ============================================================ */
:root {
	--bg:     #FFFFFF;   /* page */
	--panel:  #F4F3F7;   /* raised surface, grey bands */
	--line:   #E4E2EA;   /* hairline */
	--dim:    #6B6775;   /* secondary text, labels */
	--text:   #2E2C36;   /* body */
	--fg:     #000000;   /* headings */
	--accent: #6D28D9;   /* the one action colour */
	--on-accent: #FFFFFF;

	--r:  14px;  /* cards, panels, bands */
	--rb: 10px;  /* controls */

	/* Outfit is geometric and opens up at display sizes; Manrope is a
	   humanist companion that stays readable small; JetBrains Mono
	   carries the labels and figures. */
	--display: "Outfit", "Helvetica Neue", Arial, sans-serif;
	--body:    "Manrope", system-ui, -apple-system, sans-serif;
	--mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

	/* spacing scale — strict, so minimal stays precise */
	--s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
	--s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
	--s9: 96px; --s10: 128px;

	--page: 1200px;
	--gut:  28px;
	--label: 150px;
}

@media (max-width: 900px) { :root { --gut: 20px; } }

/* Dark band. Swapping the six tokens flips every component inside it,
   so one class turns any section into a black banner. */
.dark {
	--bg:     #000000;
	--panel:  #121016;
	--line:   #2C2833;
	--dim:    #8E8A99;
	--text:   #D6D3DE;
	--fg:     #FFFFFF;
	--accent: #B98CFF;
	--on-accent: #16021F;
	background: var(--bg);
	color: var(--text);
}
.dark + .band:not(.dark),
.band:not(.dark) + .dark { border-top: 0; }

/* Whole-site dark mode, if it is ever wanted. */
body.invert {
	--bg:     #000000;
	--panel:  #121016;
	--line:   #2C2833;
	--dim:    #8E8A99;
	--text:   #D6D3DE;
	--fg:     #FFFFFF;
	--accent: #B98CFF;
	--on-accent: #16021F;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.66;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-feature-settings: "ss01", "cv01";
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

::selection { background: var(--accent); color: var(--on-accent); }

h1, h2, h3, h4 { color: var(--fg); margin: 0 0 var(--s3); font-weight: 400; }

h1 {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(2.7rem, 7.4vw, 5.4rem);
	line-height: 1.0;
	letter-spacing: -0.035em;
}
/* Second line carries the accent, so the headline reads as one thought
   with a turn in it rather than two flat lines. */
h1 em { font-style: normal; color: var(--accent); }
h2 {
	font-family: var(--display);
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.025em;
}
h3 { font-family: var(--display); font-size: 1.12rem; font-weight: 600; letter-spacing: -0.015em; }
h4 { font-family: var(--display); font-size: .98rem; font-weight: 600; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

strong, b { color: var(--fg); font-weight: 600; }

code {
	font-family: var(--mono);
	font-size: .86em;
	background: var(--panel);
	border: 1px solid var(--line);
	padding: .1em .4em;
	color: var(--fg);
}

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
	left: var(--gut); top: var(--s2); z-index: 999;
	background: var(--fg); color: var(--bg);
	padding: 10px 16px; font-family: var(--mono); font-size: 12px;
}

/* ------------------------------------------------------------
   LABEL — the recurring typographic device. A schematic legend:
   monospace, wide tracking, small, always in the dim tone.
------------------------------------------------------------ */
.label {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--accent);
	display: block;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap {
	max-width: var(--page);
	margin-inline: auto;
	padding-inline: var(--gut);
}

/* Section. Divided by a full hairline with square marks at the
   ends — the four screws from the logo, turned into structure. */
.band {
	padding: var(--s9) 0;
	position: relative;
	background: var(--bg);
}
/* Declared after .band so it actually wins: same specificity, later rule. */
.band--grey { background: var(--panel); }
/* Hairline only where two bands share the same background. */
.band + .band:not(.dark):not(.band--grey) { border-top: 1px solid var(--line); }

.band--tight { padding: var(--s8) 0; }

@media (max-width: 700px) {
	.band { padding: var(--s8) 0; }
	.band--tight { padding: var(--s7) 0; }
}

/* Spec-sheet grid: mono legend left, content right. */
.sheet { display: grid; gap: var(--s5); }
@media (min-width: 860px) {
	.sheet {
		grid-template-columns: var(--label) minmax(0, 1fr);
		gap: var(--s6);
	}
	.sheet > .label { padding-top: .45em; }
}

.lead {
	font-size: clamp(1.02rem, 1.5vw, 1.18rem);
	color: var(--dim);
	max-width: 58ch;
	line-height: 1.6;
	font-weight: 400;
}

.row-end {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: var(--s4); flex-wrap: wrap;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--bg) 90%, transparent);
	backdrop-filter: blur(14px) saturate(0);
	border-bottom: 1px solid var(--line);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.header { background: var(--bg); }
}
.header__in {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--s4); min-height: 66px;
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__name {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fg);
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
@media (max-width: 420px) {
	.brand__name { font-size: .85rem; letter-spacing: .08em; }
	.brand { gap: 9px; }
}
.brand__name span { color: var(--dim); font-weight: 400; }

.nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a {
	display: block; padding: 8px 12px;
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--dim);
	border-bottom: 1px solid transparent;
}
@media (hover: hover) {
	.nav a:hover { color: var(--accent); text-decoration: none; }
}
.nav .current-menu-item > a,
.nav .current_page_item > a { color: var(--fg); border-bottom-color: var(--accent); }

/* The checkbox stays focusable for keyboard use, but is never seen. */
.nav-check {
	position: absolute; width: 1px; height: 1px;
	opacity: 0; margin: 0; pointer-events: none;
}
.nav-toggle {
	display: none;
	flex: none;
	background: transparent; border: 0;
	color: var(--fg); padding: 10px 0 10px var(--s4); cursor: pointer;
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .14em; text-transform: uppercase;
	user-select: none; -webkit-tap-highlight-color: transparent;
}
.nav-check:focus-visible ~ .nav-toggle { outline: 2px solid var(--accent); outline-offset: 3px; }
.nav-check:checked ~ .nav-toggle { color: var(--accent); }
.nav-toggle__close { display: none; }

@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; }

	.nav {
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--bg); border-bottom: 1px solid var(--line);
		display: none; padding: var(--s2) var(--gut) var(--s4);
		max-height: calc(100vh - 66px); overflow-y: auto;
	}
	.nav ul { flex-direction: column; gap: 0; }
	.nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
	.nav li:last-child a { border-bottom: 0; }

	/* The whole toggle, with no JavaScript involved. */
	.nav-check:checked ~ .nav { display: block; }
	.nav-check:checked ~ .nav-toggle .nav-toggle__open  { display: none; }
	.nav-check:checked ~ .nav-toggle .nav-toggle__close { display: inline; }
}

/* ============================================================
   SIGNATURE — the ripple.
   The logo is an X with concentric rings at the crossing. The
   hero enlarges that crossing to page scale: hairline rings
   radiating once on load, then still. One idea, used once.
   ============================================================ */
.hero { position: relative; overflow: hidden; padding: var(--s10) 0 0; }
@media (max-width: 700px) { .hero { padding: var(--s8) 0 0; } }

.ripple {
	position: absolute;
	right: -12%; top: 50%;
	width: min(760px, 82vw); aspect-ratio: 1;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: .42;
}
.ripple circle {
	fill: none;
	stroke: var(--accent);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	transform-origin: 50% 50%;
	animation: ring-out 1.5s cubic-bezier(.2,.7,.3,1) backwards;
}
.ripple circle:nth-of-type(1) { animation-delay: .05s; }
.ripple circle:nth-of-type(2) { animation-delay: .12s; }
.ripple circle:nth-of-type(3) { animation-delay: .19s; }
.ripple circle:nth-of-type(4) { animation-delay: .26s; }
.ripple circle:nth-of-type(5) { animation-delay: .33s; }
.ripple circle:nth-of-type(6) { animation-delay: .40s; }
.ripple circle:nth-of-type(7) { animation-delay: .47s; }
.ripple circle:nth-of-type(8) { animation-delay: .54s; }
.ripple path { stroke: var(--accent); stroke-width: 1; fill: none; }

@keyframes ring-out {
	from { transform: scale(.35); opacity: 0; }
	to   { transform: scale(1);   opacity: 1; }
}
@media (max-width: 860px) { .ripple { opacity: .26; right: -34%; } }

.hero__in { position: relative; z-index: 1; max-width: 24ch; padding-bottom: var(--s9); }
@media (max-width: 700px) { .hero__in { padding-bottom: var(--s7); } }

/* One entrance, staggered, then still. */
.hero__in > *, .hero .compat {
	animation: rise .7s cubic-bezier(.2,.7,.3,1) backwards;
}
.hero__in > .label { animation-delay: .05s; }
.hero__in > h1     { animation-delay: .13s; }
.hero__in > .lead  { animation-delay: .22s; }
.hero__in > .hero__cta { animation-delay: .30s; }
.hero .compat { animation-delay: .40s; }

@keyframes rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
.hero h1 { margin: var(--s4) 0 var(--s5); }
.hero .lead { max-width: 50ch; margin-bottom: var(--s6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Compatibility strip. Four facts a plugin buyer checks first, sitting
   on a hairline at the foot of the masthead. */
.compat {
	position: relative; z-index: 1;
	list-style: none; margin: 0; padding: var(--s5) 0 var(--s6);
	border-top: 1px solid var(--line);
	display: grid; gap: var(--s5) var(--s6);
	grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 860px) { .compat { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.compat li { display: grid; gap: 6px; }
.compat span {
	font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
	text-transform: uppercase; color: var(--dim);
}
.compat b {
	font-family: var(--body); font-size: .92rem; font-weight: 500;
	color: var(--fg); letter-spacing: -0.01em;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--mono); font-size: 11.5px; font-weight: 500;
	letter-spacing: .12em; text-transform: uppercase;
	padding: 14px 24px;
	border: 1px solid var(--line);
	border-radius: var(--rb);
	background: transparent;
	color: var(--text);
	cursor: pointer;
	transition: border-color .16s, color .16s, background .16s, transform .16s;
}
@media (hover: hover) {
	.btn:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
}
.btn:active { transform: translateY(1px); }

/* Primary: solid white. In a monochrome palette this is the loudest
   thing available, so only the download gets it. */
.btn--solid {
	background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 500;
}
@media (hover: hover) {
	.btn--solid:hover { filter: brightness(1.12); color: var(--on-accent); border-color: var(--accent); }
}

/* Download: solid, two-line, the tallest control on the page. */
.btn--get {
	flex-direction: column; align-items: flex-start; gap: 3px;
	padding: 16px 22px; width: 100%; text-align: left;
	background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
@media (hover: hover) {
	.btn--get:hover { filter: brightness(1.12); color: var(--on-accent); border-color: var(--accent); }
}
.btn--get .os   { font-size: 9.5px; letter-spacing: .2em; opacity: .55; }
.btn--get .main { font-size: 13px; letter-spacing: .12em; font-weight: 500; }
.btn--get .meta { font-size: 9.5px; letter-spacing: .14em; opacity: .55; }

/* Donate: outline only. Always quieter than the download, always under it. */
.btn--donate { padding: 12px 20px; color: var(--dim); }
@media (hover: hover) {
	.btn--donate:hover { color: var(--accent); border-color: var(--accent); }
}
.btn--donate svg { flex: none; }

.btn--block { width: 100%; }

/* ============================================================
   GET BLOCK — download, then donate. Never reversed.
   ============================================================ */
.get {
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--panel);
	padding: var(--s5);
}
.get__buttons { display: grid; gap: var(--s2); }
.get__pending {
	margin: 0; font-family: var(--mono); font-size: 11px;
	letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.get__donate {
	margin-top: var(--s4); padding-top: var(--s4);
	border-top: 1px solid var(--line);
}
.get__note {
	margin: var(--s3) 0 0; font-size: 12.5px; line-height: 1.5;
	color: var(--dim); max-width: 42ch;
}
.get.is-compact { border: 0; background: transparent; padding: 0; }

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.grid,
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
	gap: var(--s4);
	list-style: none; margin: 0; padding: 0;
}
@media (max-width: 1180px) { .grid, .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width:  880px) { .grid, .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:  560px) { .grid, .woocommerce ul.products { grid-template-columns: 1fr; } }

/* Woo can still render its own loop wrapper in places; make its items
   behave like the theme's cards rather than full-width blocks. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	width: auto; float: none; margin: 0; clear: none;
}

.card {
	background: var(--bg); margin: 0;
	border: 1px solid var(--line); border-radius: var(--r);
	overflow: hidden;
	transition: border-color .18s, transform .18s;
}
@media (hover: hover) {
	.card:hover { border-color: var(--accent); transform: translateY(-2px); }
		}
.card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.card__link:hover { text-decoration: none; }

.card__top {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--s2); padding: 12px var(--s4);
	border-bottom: 1px solid var(--line);
}
.card__cat { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }

/* Availability dot. Filled = installer up, hollow = not yet. */
.dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--dim); flex: none; }
.dot.on { background: var(--accent); border-color: var(--accent); }

.card__shot {
	aspect-ratio: 16 / 10; background: var(--panel);
	overflow: hidden; display: grid; place-items: center;
	border-bottom: 1px solid var(--line);
}
.card__shot img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .4s cubic-bezier(.2,.7,.3,1);
}

/* No screenshot yet: a dark plate with the name, not an empty box. */
.card__shot.is-empty { background: #0B0A0E; }
.card__ph2 {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 12px; width: 100%; height: 100%; padding: var(--s4);
}
.card__ph2 svg { width: 62%; height: 26px; }
.card__ph2 path { fill: none; stroke: #443E50; stroke-width: 1.5; stroke-linecap: round; }
.card__ph2 span {
	font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
	text-transform: uppercase; color: #635C70; text-align: center;
}

/* Placeholder uses the ring motif rather than a generic icon. */
.card__ph { width: 54px; height: 54px; opacity: .35; }
.card__ph circle, .card__ph path { fill: none; stroke: var(--dim); stroke-width: 1; }

.card__body { padding: var(--s4); flex: 1; }
.card__name { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.015em; transition: color .16s; }

.card__foot {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--s2); padding: 12px var(--s4);
	border-top: 1px solid var(--line);
	font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
	text-transform: uppercase;
}
.card__price { color: var(--accent); font-weight: 500; }
.card__formats { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.card__formats span {
	border: 1px solid var(--line); border-radius: 999px;
	padding: 3px 8px; color: var(--dim); font-size: 8.5px; letter-spacing: .12em;
}

.empty {
	border: 1px dashed var(--line); border-radius: var(--r);
	padding: var(--s8) var(--s5); text-align: center; color: var(--dim);
}

/* ============================================================
   STATS
   ============================================================ */
.stats {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: var(--s4);
}
@media (max-width: 620px) { .stats { grid-template-columns: 1fr; } }
.stats li { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); }
.stats b {
	display: block; font-family: var(--display);
	font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1;
	color: var(--accent); letter-spacing: -0.03em; margin-bottom: 8px;
}
.stats span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }

/* ============================================================
   STEPS — a real sequence, so numbering carries meaning.
   ============================================================ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); }
.steps .n { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--dim); display: block; margin-bottom: var(--s4); }
.steps h3 { margin-bottom: 6px; }
.steps p { margin: 0; font-size: .88rem; color: var(--dim); }

/* ============================================================
   FEATURES — three claims, one line each. No paragraphs.
   ============================================================ */
.feats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); counter-reset: feat; }
@media (min-width: 800px) { .feats { grid-template-columns: repeat(3, 1fr); } }
.feats li {
	background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
	padding: var(--s6);
	transition: border-color .18s;
}
@media (hover: hover) {
	.feats li:hover { border-color: var(--accent); }
}
.feats__n {
	display: block; margin-bottom: var(--s5);
	font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--accent);
}
.feats h3 { margin-bottom: var(--s2); font-size: 1.15rem; }
.feats p { margin: 0; font-size: .9rem; color: var(--dim); line-height: 1.6; }

/* ============================================================
   HELP — the one place the site asks to be contacted.
   ============================================================ */
.help { text-align: center; }
.help h2 { margin-bottom: var(--s2); }
.help .lead { margin: 0 auto var(--s5); }
.help__mail {
	display: block; margin-top: var(--s4);
	font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; color: var(--dim);
}
.help__mail:hover { color: var(--accent); }

/* ============================================================
   FAQ — questions only until one is opened.
   ============================================================ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
	list-style: none; cursor: pointer; padding: var(--s5) var(--s6) var(--s5) 0;
	position: relative; color: var(--fg);
	font-family: var(--display);
	font-size: 1.06rem; font-weight: 600; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	font-family: var(--mono); font-size: 1.1rem; color: var(--dim); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
@media (hover: hover) {
	.faq summary:hover { color: var(--accent); }
}

.faq .a { padding: 0 var(--s6) var(--s5) 0; color: var(--dim); font-size: .92rem; max-width: 68ch; }
.faq .a p { margin: 0 0 .8em; }
.faq .a p:last-child { margin: 0; }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */

/* Masthead — a dark plate carrying the name, the pitch and the formats.
   The page announces itself as a product before anything else loads. */
.masthead { padding: var(--s7) 0 var(--s8); }
.masthead h1 { margin: var(--s3) 0 0; }
.masthead__tag { margin-top: var(--s4); max-width: 52ch; }
.masthead .label { margin-bottom: var(--s2); }

.crumbs {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--dim);
	margin-bottom: var(--s6);
}
.crumbs a { color: var(--dim); }
.crumbs a:hover { color: var(--accent); text-decoration: none; }
.crumbs span[aria-hidden] { opacity: .45; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: var(--s6) 0 0; padding: 0; }
.badge {
	font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
	border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; color: var(--dim);
}
.badge--key { color: var(--accent); border-color: var(--accent); }

/* Screenshot frame. Even with nothing uploaded it has to look
   deliberate rather than broken. */
.shot {
	margin: 0 0 var(--s7);
	border: 1px solid var(--line); border-radius: var(--r);
	background: var(--panel); overflow: hidden;
}
.shot img { width: 100%; display: block; }
.shot.is-empty { background: #0B0A0E; border-color: #221F29; }
.shot__placeholder {
	aspect-ratio: 16 / 7;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: var(--s4); padding: var(--s6);
}
.shot__placeholder svg { width: min(320px, 70%); height: 46px; }
.shot__placeholder path { fill: none; stroke: #4A4356; stroke-width: 1.5; stroke-linecap: round; }
.shot__placeholder span {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em;
	text-transform: uppercase; color: #6A6377;
}

.product-grid { display: grid; gap: var(--s7); padding: var(--s8) 0 var(--s9); }
.product-main { min-width: 0; }
.product-aside { display: grid; gap: var(--s5); }

/* Stacked, the download has to be the first thing under the masthead. */
@media (max-width: 979px) {
	.product-aside { order: -1; }
	.product-grid { padding-top: var(--s6); }
}
@media (min-width: 980px) {
	.product-grid { grid-template-columns: minmax(0,1fr) 340px; gap: var(--s8); align-items: start; }
	.product-aside { position: sticky; top: 90px; }
}

.section-head {
	font-family: var(--display); font-size: 1.15rem; font-weight: 600;
	letter-spacing: -0.015em; margin: 0 0 var(--s4);
	padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}

/* Spec sheet, presented as a panel rather than a loose table. */
.sheet-card { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sheet-card__head {
	margin: 0; padding: 14px var(--s5);
	font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
	text-transform: uppercase; color: var(--dim); font-weight: 400;
	background: var(--panel); border-bottom: 1px solid var(--line);
}
.specs { width: 100%; border-collapse: collapse; font-size: .84rem; }
.specs tr + tr th, .specs tr + tr td { border-top: 1px solid var(--line); }
.specs th, .specs td { text-align: left; padding: 12px var(--s5); vertical-align: top; }
.specs th {
	font-family: var(--mono); font-weight: 400; font-size: 9.5px;
	letter-spacing: .14em; text-transform: uppercase; color: var(--dim); width: 42%;
}
.specs td { font-family: var(--mono); font-size: .78rem; color: var(--text); }

.bullets { list-style: none; margin: 0 0 2em; padding: 0; display: grid; gap: 12px; }
.bullets li { position: relative; padding-left: 26px; }
.bullets li::before {
	content: ""; position: absolute; left: 0; top: .58em;
	width: 12px; height: 2px; background: var(--accent);
}

.changelog {
	font-family: var(--mono); font-size: .78rem; line-height: 1.85;
	white-space: pre-wrap; color: var(--dim);
	border-left: 2px solid var(--line); padding: 0 0 0 var(--s5); margin: 0;
}

.embed { aspect-ratio: 16/9; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 2em; }
.embed iframe { width: 100%; height: 100%; border: 0; }

/* ============================================================
   PROSE
   ============================================================ */
.prose { max-width: 70ch; }
.woocommerce-cart .prose,
.woocommerce-checkout .prose,
.woocommerce-account .prose,
.woocommerce-order-received .prose { max-width: none; }
.prose h2 { margin-top: 2.2em; padding-top: 1.1em; border-top: 1px solid var(--line); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.15em; margin: 0 0 1.15em; }
.prose li { margin-bottom: .45em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
/* Components rendered by shortcodes land inside prose — keep them out of the link rule. */
.prose a.btn, .prose a.card__link, .prose a.brand { text-decoration: none; }
.prose .grid, .prose .stats, .prose .get { margin-bottom: 1.6em; }
.prose ul.grid, .prose ul.stats, .prose ul.bullets, .prose ul.steps { padding-left: 0; }
.prose .grid li, .prose .stats li, .prose .steps li, .prose .bullets li { margin-bottom: 0; }
.prose blockquote { margin: 1.6em 0; padding-left: var(--s4); border-left: 1px solid var(--line); color: var(--dim); }
.prose table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border: 1px solid var(--line); }

.licence-note {
	margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line);
	font-family: var(--mono); font-size: .76rem; letter-spacing: .02em; color: var(--dim); line-height: 1.8;
}
.licence-note a { color: var(--dim); text-decoration: none; }
.licence-note a:hover { color: var(--fg); }

.legal-contact { color: var(--dim); font-size: .85rem; font-family: var(--mono); letter-spacing: .02em; }

.legal-date {
	font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--dim); border: 1px solid var(--line);
	padding: 7px 11px; display: inline-block; margin-bottom: 2.4em;
}

.page-head { padding: var(--s8) 0; background: var(--bg); }
.page-head.masthead { padding: var(--s7) 0 var(--s8); }
.page-head h1 { margin-top: var(--s3); }
.page-head.band--grey { background: var(--panel); }

/* ============================================================
   FORMS
   ============================================================ */
input[type=text], input[type=email], input[type=url], input[type=search],
input[type=tel], input[type=password], input[type=number], textarea, select {
	width: 100%;
	background: var(--panel);
	border: 1px solid var(--line);
	color: var(--fg);
	padding: 12px 13px;
	font-family: var(--mono);
	font-size: 13px;
	border-radius: 0;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
::placeholder { color: var(--dim); opacity: 1; }
label { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }

.searchform { display: flex; gap: var(--s2); }

/* ============================================================
   FOOTER — one row of links, then the fine print. Nothing else.
   ============================================================ */
.footer { padding: var(--s8) 0 var(--s6); margin-top: auto; }

/* One centred column: site links, a gap, then the fine print. */
.footer__links {
	display: flex; flex-direction: column; align-items: center;
	gap: var(--s5);
}
.footer__links ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.footer__links li { margin: 0; }
.footer__links a {
	display: block; padding: 7px 0; text-align: center;
	font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--dim);
}
@media (hover: hover) {
	.footer__links a:hover { color: var(--accent); text-decoration: none; }
}

.footer__bottom {
	margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line);
	display: flex; flex-direction: column; align-items: center; gap: var(--s3);
	text-align: center;
	font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--dim);
}
.footer__bottom .brand { justify-content: center; }
/* Administrator-only diagnostic, printed in place of a section that
   failed rather than letting it take the page with it. */
.xa-diag {
	display: grid; gap: 6px;
	margin: var(--s5) 0; padding: var(--s5);
	border: 1px solid #C6474C; border-left-width: 3px; border-radius: var(--r);
	background: #FFF4F4; color: #4A1113;
	font-family: var(--mono); font-size: 12px; line-height: 1.6;
}
.xa-diag b { color: #8E1D22; font-size: 12px; letter-spacing: .04em; }
.xa-diag span { word-break: break-word; }
.xa-diag i { font-style: normal; color: #8A5A5C; font-size: 11px; }

/* ============================================================
   PAGINATION / 404
   ============================================================ */
.pagination, .woocommerce-pagination { display: flex; justify-content: center; padding: var(--s7) 0 0; }
.pagination .page-numbers, .woocommerce-pagination .page-numbers {
	font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
	padding: 9px 14px; border: 1px solid var(--line); color: var(--dim);
	margin-left: -1px; list-style: none;
}
.pagination .current, .woocommerce-pagination .current { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.woocommerce-pagination ul { display: flex; margin: 0; padding: 0; list-style: none; }

.e404 { text-align: center; padding: var(--s10) 0; }
.e404 .lead { margin-inline: auto; }

/* ============================================================
   WOOCOMMERCE OVERRIDES
   The store is WooCommerce, so its defaults get flattened into
   the same monochrome system rather than fought template by
   template.
   ============================================================ */
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message, .woocommerce-info, .woocommerce-error,
.woocommerce-noreviews, p.no-comments {
	background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--fg);
	color: var(--text); padding: var(--s4) var(--s5); margin: 0 0 var(--s5); list-style: none;
	font-size: .9rem;
}
.woocommerce-error { border-left-color: var(--dim); }
.woocommerce-message a, .woocommerce-info a { color: var(--fg); }

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit {
	font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
	background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
	border-radius: var(--rb); padding: 14px 24px; font-weight: 500; line-height: 1;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { filter: brightness(1.12); border-color: var(--accent); color: var(--on-accent); }

.woocommerce .price, .woocommerce span.amount { color: var(--fg); font-family: var(--mono); font-size: .9rem; }
.woocommerce del { color: var(--dim); }

.woocommerce table.shop_table,
.woocommerce table.shop_attributes,
.woocommerce-cart table.cart {
	border: 1px solid var(--line); border-collapse: collapse; border-radius: 0;
	font-size: .88rem; width: 100%;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td,
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td {
	border: 0; border-bottom: 1px solid var(--line); padding: 13px var(--s4);
}
.woocommerce table.shop_table th { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); font-weight: 400; }

.woocommerce-tabs ul.tabs {
	display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 var(--s5); padding: 0;
	list-style: none; border-bottom: 1px solid var(--line);
}
.woocommerce-tabs ul.tabs::before, .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; }
.woocommerce-tabs ul.tabs li a {
	display: block; padding: 12px 18px 12px 0; margin-right: var(--s5);
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--dim); border-bottom: 1px solid transparent; margin-bottom: -1px;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--fg); border-bottom-color: var(--accent); }
.woocommerce-tabs .panel > h2:first-child { display: none; }

.woocommerce .quantity .qty { width: 74px; text-align: center; }
.woocommerce ul.products, .woocommerce-page ul.products { margin: 0; padding: 0; }

.woocommerce form .form-row { padding: 0 0 var(--s4); margin: 0; }
.woocommerce form .form-row label { display: block; margin-bottom: 6px; }
.woocommerce-checkout #payment { background: var(--panel); border: 1px solid var(--line); border-radius: 0; }
.woocommerce-checkout #payment div.payment_box { background: var(--bg); border: 1px solid var(--line); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce .woocommerce-breadcrumb { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: var(--s5); }
.woocommerce .woocommerce-breadcrumb a { color: var(--dim); }

.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.woocommerce-account .woocommerce-MyAccount-navigation li { background: var(--bg); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 12px var(--s4); font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--fg); }

/* Reviews. WooCommerce's own stylesheet is off, so the rating widget
   needs building from the markup it prints. */
.woocommerce #reviews h2,
.woocommerce #reviews h3 { font-family: var(--display); }
.woocommerce #reviews ol.commentlist { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; gap: var(--s4); }
.woocommerce #reviews ol.commentlist li {
	border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); margin: 0;
}
.woocommerce #reviews .comment-text p.meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--dim); }
.woocommerce #reviews .avatar { display: none; }

.woocommerce .comment-form-rating label { display: block; margin-bottom: var(--s2); }
.woocommerce p.stars { margin: 0 0 var(--s4); }
.woocommerce p.stars span { display: flex; gap: 4px; }
.woocommerce p.stars a {
	position: relative; display: block;
	width: 26px; height: 26px; overflow: hidden;
	text-indent: -999em; text-decoration: none;
}
.woocommerce p.stars a::before {
	content: "\2605";
	position: absolute; inset: 0; text-indent: 0;
	font-size: 24px; line-height: 26px; text-align: center;
	color: var(--line); transition: color .12s;
}
.woocommerce p.stars:hover a::before { color: var(--accent); }
.woocommerce p.stars a:hover ~ a::before { color: var(--line); }
.woocommerce p.stars.selected a::before { color: var(--accent); }
.woocommerce p.stars.selected a.active ~ a::before { color: var(--line); }

.woocommerce .star-rating {
	font-family: var(--mono); overflow: hidden; position: relative;
	height: 1em; line-height: 1; width: 5.4em; letter-spacing: .1em;
}
.woocommerce .star-rating::before {
	content: "\2605\2605\2605\2605\2605"; float: left; top: 0; left: 0; position: absolute; color: var(--line);
}
.woocommerce .star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
.woocommerce .star-rating span::before { content: "\2605\2605\2605\2605\2605"; top: 0; position: absolute; left: 0; color: var(--accent); }

.woocommerce #review_form #respond textarea { min-height: 140px; }
.woocommerce #review_form #respond .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; }
.woocommerce #review_form #respond .comment-form-cookies-consent input { width: auto; }
.woocommerce #review_form #respond p { margin-bottom: var(--s4); }

/* WordPress alignment defaults */
.alignleft { float: left; margin: .3em 1.6em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.6em; }
.aligncenter { margin-inline: auto; }
.wp-caption-text { font-family: var(--mono); font-size: 10px; color: var(--dim); letter-spacing: .1em; }