/* No background rule. siteTheme-Colors-Blue.css paints the header from
   --header-bg now, which is white in the light themes - exactly what the
   '#ffffff !important' here was forcing - and correctly dark in a dark
   one, which it was not. */
section {
	margin-bottom: 6px;
}

.category-header {
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 4px;
	color: var(--accent);
	background: var(--accent-soft);
	padding: 10px 12px;
	border-bottom: 2px solid var(--accent);
}

.category-header.secondary {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 3px;
	color: color-mix(in srgb, var(--accent) 50%, transparent);
	border-bottom: 1px solid var(--accent-line);
	padding-top: 24px;
}

.category-sub-header {
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	color: color-mix(in srgb, var(--accent) 75%, transparent);
	padding: 14px 0 6px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.product-row {
	display: flex;
	flex-direction: column;
	padding: 14px 0;
	border-bottom: 1px solid var(--accent-line);
}

.product-row-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.product-info {
	display: flex;
	align-items: center;
}

.product-name {
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--accent);
}

.product-version {
	font-family: monospace;
	font-size: 11px;
	color: color-mix(in srgb, var(--accent) 50%, transparent);
	border-left: 1.5px solid color-mix(in srgb, var(--accent) 20%, transparent);
	padding-left: 10px;
	margin-left: 10px;
}

.product-action {
	display: flex;
	align-items: center;
	gap: 10px;
}

.product-btn {
	border: 1.5px solid var(--accent);
	background: transparent;
	color: var(--accent);
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 13px;
	letter-spacing: 1px;
	padding: 6px 14px;
	cursor: pointer;
}

.product-desc {
	display: flex;
	align-items: center;
	padding: 4px 0 2px 0;
}

.product-price {
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: 1px;
	border-right: 1.5px solid color-mix(in srgb, var(--accent) 20%, transparent);
	padding-right: 10px;
	margin-right: 10px;
	white-space: nowrap;
}

.product-desc-text {
	font-size: 11px;
	color: color-mix(in srgb, var(--accent) 60%, transparent);
	font-style: italic;
}

.coming-soon {
	font-size: 11px;
	color: color-mix(in srgb, var(--accent) 50%, transparent);
	font-style: italic;
}

.product-serial {
	display: flex;
	align-items: center;
	gap: 0;
	padding-top: 6px;
}

.serial-label {
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.serial-value {
	font-family: monospace;
	font-size: 13px;
	letter-spacing: 2px;
	color: color-mix(in srgb, var(--accent) 70%, transparent);
	border-left: 1.5px solid color-mix(in srgb, var(--accent) 20%, transparent);
	padding-left: 12px;
	margin-left: 12px;
}

.group-box {
	border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
	border-radius: 3px;
	margin: 6px 0;
	overflow: hidden;
}

.group-box .category-sub-header,
.group-box .product-row {
	padding-left: 12px;
	padding-right: 12px;
}

.future-section {
	margin-top: 8px;
}

.blurred {
	filter: blur(4px);
	user-select: none;
	transition: filter 0.3s ease;
}

.blurred:hover {
	filter: blur(0);
}

.product-upgrade {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0 2px 0;
}

/* Filled, so the paid action reads differently to the outline buttons.
   inline-block because <a> is inline and would ignore .product-btn's padding. */
.upgrade-btn {
	display: inline-block;
	text-decoration: none;
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 700;
	white-space: nowrap;
}

.upgrade-btn:hover {
	background: var(--accent-strong);
}

/* The display above would otherwise beat the hidden attribute. Used by a
   product that is only ever redeemed, never test bought (upgrade.js). */
.upgrade-btn[hidden] {
	display: none;
}

.upgrade-text {
	font-size: 11px;
	color: color-mix(in srgb, var(--accent) 60%, transparent);
	font-style: italic;
}


/* ==========================================================
   Serial numbers and Test Pay (upgrade.html)
   ==========================================================
   Shares the product-row furniture above. Only the two new controls and the
   result line need saying. Colours come from siteTheme-Tokens.css like the rest of
   the file now. */

.serial-input {
	width: auto;
	flex: 0 1 260px;
	min-width: 180px;
	font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 6px 9px;
	border: 1px solid var(--field-border);
	border-radius: 4px;
	color: var(--field-ink);
	margin-right: 8px;
}

.serial-input:focus {
	border-color: var(--accent);
	background: var(--field-bg);
	outline: none;
}

.serial-input::placeholder {
	color: var(--field-placeholder);
	letter-spacing: 1px;
}

/* Empty until something happens, so it takes no room until it has to. */
.upgrade-result {
	font-size: 13.5px;
	line-height: 1.5;
	padding: 0 12px;
}

.upgrade-result:not(:empty) {
	padding: 10px 12px;
	margin: 8px 0 2px;
	border-radius: 4px;
	border-left-width: 3px;
	border-left-style: solid;
}

.upgrade-result.is-good {
	background: var(--ok-soft);
	border-left-color: var(--ok);
	color: var(--ok);
}

.upgrade-result.is-bad {
	background: var(--accent-soft);
	border-left-color: var(--accent);
	color: var(--accent);
}


/* A product the account already has. The badge carries the message; the row
   is only tinted, not greyed out -- greying it out reads as "unavailable",
   which is the opposite of what is true. */
.product-status {
	display: inline-block;
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.4px;
	padding: 2px 8px;
	margin-left: 10px;
	border-radius: 3px;
	background: var(--ok-soft);
	border: 1px solid var(--ok);
	color: var(--ok);
	vertical-align: 2px;
}

.product-status:empty {
	display: none;
}

.product-row.is-owned .product-price {
	color: var(--ok);
	font-weight: 600;
}


/* An owned row asks the server for its real serial after rendering. Until
   that answers -- and for an account granted its role directly, with no
   purchase and so no code -- the container is empty and should take no
   space rather than showing a bare "SERIAL #" heading with nothing under it. */
.product-serial:empty {
	display: none;
}


/* ==========================================================
   SIGNED OUT
   ==========================================================
   "Your software" is a claim about an account, so with no session the
   heading changes and this says what is on offer instead. Accent-tinted
   rather than a warning colour: nothing is wrong, there is just a step
   the visitor has not taken. */

.signin-banner {
	background: var(--accent-soft);
	border-left: 3px solid var(--accent);
	padding: 9px 12px;
	margin: 8px 0 4px;
	font-size: 13px;
	color: var(--ink);
}

.signin-banner[hidden] {
	display: none;
}

/* The badge on something that needs no account at all. Green rather than
   the accent, because it is saying "this one is different" against a page
   where every other badge means "you own this". */
.product-status.is-open {
	background: var(--ok-soft);
	border-color: var(--ok);
	color: var(--ok);
}