/* =========================================================================
   S427 Download — "My Account → Downloads" tab styles
   Everything is driven by the CSS variables below, so you can re-theme the
   whole tab by overriding just these (e.g. in your theme's customizer CSS).
   ========================================================================= */

/* Variables live on the wrapper so BOTH the product grid AND the full-width
   License Manager card (a sibling of the grid) inherit them. Declaring them on
   the grid alone would leave the license card without the theme colours. */
.s427-downloads {
	--s427-radius: 0;                /* square corners */
	--s427-gap: 20px;
	--s427-card-bg: #000000;         /* black card */
	--s427-btn-bg: #0d0d0d;          /* download button background */
	--s427-card-border: #2a2a2a;
	--s427-text: #f4f6f8;
	--s427-muted: #9aa3b2;
	--s427-accent: #2b6cff;          /* generic / RESOURCES (hover + arrow) */
	--s427-win: #0a84ff;             /* Windows accent (hover + arrow) */
	--s427-mac: #f4f6f8;             /* macOS accent (hover + arrow) */
	--s427-lin: #e08a00;             /* Linux accent (hover + arrow) */
	--s427-icon-bg: #ffffff;         /* OS icon tile background */
	--s427-icon-fg: #000000;         /* OS logo color */
	--s427-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.45);
	--s427-shadow-hover: 0 2px 4px rgba(0,0,0,.6), 0 16px 36px rgba(0,0,0,.6);
}

.s427-downloads__title {
	margin: 0 0 18px;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: center;
	color: #7a7a7a;
}

.s427-downloads-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--s427-gap);
	margin: 0;
	padding: 0;
}

/* ---- product card ---- */
.s427-card {
	background: var(--s427-card-bg);
	border: 1px solid var(--s427-card-border);
	border-radius: var(--s427-radius);
	box-shadow: var(--s427-shadow);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.s427-card:hover {
	box-shadow: var(--s427-shadow-hover);
	transform: translateY(-2px);
}

.s427-card__head {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.s427-card__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--s427-text);
}

.s427-card__date {
	color: var(--s427-muted);
	font-size: .78rem;
}

.s427-card__version {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border: 1px solid var(--s427-card-border);
	border-radius: var(--s427-radius);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--s427-muted);
	vertical-align: middle;
}

.s427-card__downloads {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ---- download button ---- */
.s427-dl {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--s427-card-border);
	border-radius: var(--s427-radius);
	text-decoration: none;
	color: var(--s427-text);
	background: var(--s427-btn-bg);
	transition: border-color .15s ease, background .15s ease, transform .08s ease;
}

.s427-dl:hover,
.s427-dl:focus-visible {
	border-color: var(--s427-os, var(--s427-accent));
	background: color-mix(in srgb, var(--s427-os, var(--s427-accent)) 14%, var(--s427-btn-bg));
	outline: none;
}

.s427-dl:active { transform: scale(.99); }

.s427-dl--win { --s427-os: var(--s427-win); }
.s427-dl--mac { --s427-os: var(--s427-mac); }
.s427-dl--lin { --s427-os: var(--s427-lin); }

.s427-dl__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--s427-radius);
	color: var(--s427-icon-fg);
	background: var(--s427-icon-bg);
}

.s427-dl__icon svg { width: 22px; height: 22px; display: block; }

.s427-dl__text {
	display: flex;
	flex-direction: column;
	min-width: 0;            /* allow filename to truncate */
	line-height: 1.3;
}

.s427-dl__os {
	font-weight: 600;
	font-size: .95rem;
}

.s427-dl__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
}

.s427-fmt {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid var(--s427-card-border);
	border-radius: var(--s427-radius);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--s427-text);
	line-height: 1.6;
}

.s427-dl__size {
	color: var(--s427-muted);
	font-size: .78rem;
}

.s427-dl__arrow {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--s427-muted);
	transition: transform .15s ease, color .15s ease;
}

.s427-dl__arrow svg { width: 20px; height: 20px; display: block; }

.s427-dl:hover .s427-dl__arrow,
.s427-dl:focus-visible .s427-dl__arrow {
	color: var(--s427-os, var(--s427-accent));
	transform: translateY(2px);
}

/* ---- release-notes link (bottom of each card) ---- */
.s427-card__notes {
	align-self: flex-start;
	margin-top: 2px;
	font-size: .78rem;
	color: var(--s427-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

.s427-card__notes:hover,
.s427-card__notes:focus-visible {
	color: var(--s427-text);
	border-bottom-color: currentColor;
	outline: none;
}

/* ---- empty state ---- */
.s427-empty {
	color: var(--s427-muted, #9aa3b2);
	font-size: .95rem;
}

/* ---- license manager (full-width card at the bottom, for everyone) ---- */
.s427-card--license {
	margin-top: var(--s427-gap);   /* separate it from the product grid above */
}

.s427-license__desc {
	margin: 0;
	color: var(--s427-muted);
	font-size: .85rem;
}

.s427-license__downloads {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.s427-card--license .s427-dl {
	flex: 1 1 260px;
	max-width: 360px;
}