/*
Theme Name: Lets Play Yono
Theme URI: https://letsplayyono.com/
Description: Astra child theme for letsplayyono.com, a Yono games directory. Same look as our Explore Yono Games theme: Astra header, quick links, blue accent, system font.
Author: Lets Play Yono
Template: astra
Version: 3.0.0
Requires PHP: 8.0
Text Domain: letsplayyono
*/

:root {
	--lpy-bg: #ffffff;
	--lpy-text: #1e293b;
	--lpy-muted: #475569;
	--lpy-accent: #2563eb;
	--lpy-accent-dark: #1d4ed8;
	--lpy-accent-soft: #eaf1fd;
	--lpy-success: #047857;
	--lpy-card-bg: #ffffff;
	--lpy-section-bg: #f6f6f6;
	--lpy-border: #eceef2;
	--lpy-radius: 14px;
	--lpy-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
	background: var(--lpy-bg);
	color: var(--lpy-text);
	font-family: var(--lpy-sans);
}

h1, h2, h3, h4 {
	font-family: var(--lpy-sans);
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/* ---------- Header (Astra defaults) ---------- */
.site-branding .custom-logo,
.site-header-primary-section-left .custom-logo {
	max-height: 44px;
	width: auto;
	border-radius: 10px;
}

.site-title {
	white-space: nowrap;
	font-size: 20px !important;
}

/* menu links never break inside a label */
#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
	white-space: nowrap;
}

/* ---------- Quick links bar ---------- */
.lpy-quicklinks {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 0;
	background: #ffffff;
	border-bottom: 1px solid var(--lpy-border);
	padding: 0;
}

.lpy-quicklinks a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	flex: 1 1 0;
	min-width: 0;
	padding: 8px 2px;
	border-radius: 0;
	border-right: 1px solid var(--lpy-border);
	font-size: 10px;
	font-weight: 600;
	color: var(--lpy-muted);
	text-decoration: none;
	white-space: nowrap;
}

.lpy-quicklinks a:last-child {
	border-right: none;
}

.lpy-quicklinks a svg {
	width: 11px;
	height: 11px;
	flex-shrink: 0;
}

.lpy-quicklinks a:hover {
	background: var(--lpy-accent-soft);
	color: var(--lpy-accent);
}

.lpy-quicklinks .lpy-quicklinks__tg {
	color: var(--lpy-accent);
}

@media (max-width: 380px) {
	.lpy-quicklinks a {
		font-size: 9px;
		gap: 2px;
		padding: 4px 2px;
	}
	.lpy-quicklinks a svg {
		width: 10px;
		height: 10px;
	}
}

#primary {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* ---------- Footer ---------- */
.lpy-footer-links {
	padding: 20px 20px 0;
	border-top: 1px solid var(--lpy-border);
	background: #ffffff;
	font-size: 14px;
}

.lpy-footer-links__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	max-width: 1180px;
	margin: 0 auto;
}

.lpy-footer-links__row a {
	font-weight: 600;
}

.lpy-footer-links__row--info {
	margin-top: 10px;
}

.lpy-footer-links__row--info a {
	font-weight: 400;
}

.lpy-footer-links a {
	color: var(--lpy-muted);
	text-decoration: none;
}

.lpy-footer-links a:hover {
	color: var(--lpy-accent);
}

.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright a {
	color: var(--lpy-muted);
}

.lpy-footer-links + .site-footer .site-below-footer-wrap,
.site-footer .site-below-footer-wrap {
	border-top: 0 !important;
}

/* ---------- Buttons ---------- */
.lpy-btn {
	display: inline-block;
	padding: 12px 26px;
	border-radius: 10px;
	border: 1px solid transparent;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}

.lpy-btn--primary,
.lpy-btn--dl,
.lpy-btn--alt {
	background: var(--lpy-accent);
	border-color: var(--lpy-accent);
	color: #ffffff;
}

.lpy-btn--primary:hover,
.lpy-btn--dl:hover,
.lpy-btn--alt:hover,
.lpy-btn--primary:focus,
.lpy-btn--dl:focus {
	background: var(--lpy-accent-dark);
	border-color: var(--lpy-accent-dark);
	color: #ffffff;
}

.lpy-btn--outline,
.lpy-btn--line,
.lpy-btn--ghost {
	background: transparent;
	color: var(--lpy-accent);
	border: 1px solid var(--lpy-accent);
}

.lpy-btn--outline:hover,
.lpy-btn--line:hover,
.lpy-btn--ghost:hover {
	color: var(--lpy-accent);
}

.lpy-btn--off {
	background: var(--lpy-section-bg);
	color: var(--lpy-muted);
	cursor: default;
}

.lpy-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(37, 99, 235, .18);
}

.lpy-btn .lpy-ico {
	display: none;
}

.lpy-inline-cta {
	margin: 20px 0 !important;
}

/* ---------- Home hero ---------- */
.lpy-hero {
	background: linear-gradient(135deg, #ffffff 0%, var(--lpy-accent-soft) 100%);
	border-bottom: 1px solid var(--lpy-border);
	padding: 22px 20px;
	text-align: center;
}

.lpy-hero h1 {
	font-size: clamp(32px, 7vw, 56px);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 6px;
	color: var(--lpy-text);
}

.lpy-accent {
	color: var(--lpy-accent);
}

.lpy-hero p {
	color: var(--lpy-muted);
	max-width: 640px;
	margin: 0 auto 12px;
	font-size: 14px;
}

.lpy-hero .lpy-hero-tagline {
	font-weight: 700;
	color: var(--lpy-text);
	font-size: 16px;
	margin-bottom: 4px;
}

.lpy-hero-stats {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: nowrap;
	margin-bottom: 12px;
}

.lpy-stat {
	display: flex;
	align-items: center;
	gap: 6px;
	text-align: left;
}

.lpy-stat-icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lpy-stat-icon svg {
	width: 16px;
	height: 16px;
}

.lpy-stat strong {
	display: block;
	font-size: 13px;
	line-height: 1.2;
	color: var(--lpy-accent);
}

.lpy-stat small {
	display: block;
	font-size: 10px;
	color: var(--lpy-muted);
	white-space: nowrap;
}

.lpy-hero-actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

@media (max-width: 420px) {
	.lpy-hero-stats {
		gap: 6px;
	}
	.lpy-stat-icon {
		width: 22px;
		height: 22px;
	}
	.lpy-stat-icon svg {
		width: 15px;
		height: 15px;
	}
	.lpy-stat strong {
		font-size: 12px;
	}
	.lpy-stat small {
		font-size: 9px;
	}
}

/* Phones: the two hero buttons share one row (large iPhones are wider than 420px) */
@media (max-width: 600px) {
	.lpy-hero-actions {
		flex-wrap: nowrap;
		gap: 8px;
	}
	.lpy-hero-actions .lpy-btn {
		flex: 1 1 0;
		max-width: 220px;
		padding: 11px 10px;
		font-size: 13px;
		text-align: center;
	}
}

/* ---------- App hero ---------- */
.lpy-app-hero {
	text-align: left;
}

.lpy-app-hero > .lpy-logo {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 24px;
	object-fit: cover;
	margin: 0 auto 16px;
}

.lpy-app-hero h1 {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.lpy-app-hero .lpy-hero-tagline,
.lpy-app-hero > p {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
}

.lpy-app-hero .lpy-hero-actions {
	justify-content: flex-start;
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
}

.lpy-app-hero .lpy-hero-actions .lpy-btn {
	width: 100%;
	max-width: none;
	flex: none;
	padding: 12px 26px;
	font-size: inherit;
	box-sizing: border-box;
}

.lpy-app-hero .lpy-hero-note {
	margin: 12px 0 0;
	font-size: 12px;
	text-align: center;
	max-width: none;
}

.lpy-stats-board {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	background: #ffffff;
	border: 1px solid var(--lpy-border);
	border-radius: 12px;
	padding: 10px 6px;
	margin: 0 0 20px;
	max-width: 640px;
	box-shadow: 0 2px 10px rgba(37, 99, 235, .06);
}

.lpy-stat-block {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 5px;
	flex-shrink: 1;
	min-width: 0;
	padding: 0 2px;
}

.lpy-stat-block-icon {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--lpy-accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lpy-stat-block-icon svg {
	width: 13px;
	height: 13px;
}

.lpy-stat-block-value {
	font-size: 12px;
	font-weight: 700;
	color: var(--lpy-text);
	line-height: 1.2;
	white-space: nowrap;
}

.lpy-stat-block-label {
	font-size: 9px;
	color: var(--lpy-muted);
	white-space: nowrap;
	line-height: 1.5;
}

/* ---------- Sections ---------- */
.lpy-section {
	max-width: 1180px;
	margin: 0 auto;
	padding: 44px 20px;
}

.lpy-section--grey {
	background: var(--lpy-section-bg);
	max-width: none;
}

.lpy-section--grey > * {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

.lpy-section > h2,
.lpy-band > h2:first-child {
	font-size: 28px;
	margin: 0 0 6px;
}

.lpy-sub {
	color: var(--lpy-muted);
	margin-bottom: 26px;
}

@media (max-width: 420px) {
	.lpy-section {
		padding: 32px 10px;
	}
}

/* App pages: the article starts close under the hero instead of a full section gap. */
.lpy-section.lpy-app-content {
	padding-top: 16px;
}

/* Home and collection pages: the content flows inside one wrapper; heroes and bands go edge to edge */
.lpy-front {
	padding: 0 20px 20px;
}

.lpy-front > .lpy-hero,
.lpy-front > .lpy-band {
	margin-left: -20px !important;
	margin-right: -20px !important;
}

.lpy-band {
	padding: 44px 20px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.lpy-band > * {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

.lpy-band--list,
.lpy-band--soft {
	background: var(--lpy-section-bg);
}

/* Two plain bands in a row: the second drops its top padding so the gap between them does not double up. */
.lpy-band:not(.lpy-band--list):not(.lpy-band--soft) + .lpy-band:not(.lpy-band--list):not(.lpy-band--soft) {
	padding-top: 0 !important;
}

/* Tight hero: the heading starts near the quick links bar and the list starts close under the hero */
.lpy-front > .lpy-hero {
	padding-top: 12px;
	padding-bottom: 14px;
}

.lpy-front > .lpy-hero + .lpy-band {
	padding-top: 14px !important;
}

@media (max-width: 420px) {
	.lpy-front {
		padding: 0 10px 12px;
	}
	.lpy-front > .lpy-hero,
	.lpy-front > .lpy-band {
		margin-left: -10px !important;
		margin-right: -10px !important;
	}
	.lpy-band {
		padding: 32px 10px !important;
	}
	.lpy-front > .lpy-hero + .lpy-band {
		padding-top: 12px !important;
	}
}

/* ---------- Article text (apps, guides, pages, home sections) ---------- */
.lpy-content {
	max-width: 780px;
}

.lpy-section--grey.lpy-content {
	max-width: none;
}

.lpy-content h1 {
	margin: 0 0 6px;
}

.lpy-content h2,
.lpy-front > h2,
.lpy-band > h2:not(:first-child) {
	font-size: 22px;
	margin: 32px 0 12px;
}

.lpy-front > h2 {
	font-size: 24px;
	margin-top: 40px;
}

/* A heading right after a plain band: no top margin, and the band keeps only a little bottom padding. */
.lpy-front > .lpy-band:not(.lpy-band--list):not(.lpy-band--soft) + h2 {
	margin-top: 0;
}

.lpy-front > .lpy-band:not(.lpy-band--list):not(.lpy-band--soft):has(+ h2) {
	padding-bottom: 8px !important;
}

.lpy-content > h2:first-child,
.lpy-band > h2:first-child {
	margin-top: 0;
}

.lpy-content h3,
.lpy-front > h3 {
	font-size: 18px;
	margin: 28px 0 10px;
	color: var(--lpy-text);
	clear: both;
}

.lpy-content h4 {
	font-size: 15px;
	margin: 20px 0 8px;
	color: var(--lpy-text);
}

.lpy-content p,
.lpy-front > p,
.lpy-band > p {
	color: var(--lpy-muted);
	line-height: 1.7;
	margin: 0 0 14px;
}

.lpy-content ul,
.lpy-content ol,
.lpy-front > ul,
.lpy-front > ol,
.lpy-band > ul {
	margin: 0 0 16px;
	padding-left: 20px;
	color: var(--lpy-muted);
	line-height: 1.7;
}

.lpy-content li,
.lpy-front li {
	margin-bottom: 6px;
}

.lpy-content strong,
.lpy-front strong {
	color: var(--lpy-text);
}

.lpy-content a,
.lpy-front > p a,
.lpy-front > ul a,
.lpy-band > p a {
	color: var(--lpy-accent);
	text-decoration: none;
}

.lpy-content a:hover,
.lpy-front > p a:hover,
.lpy-front > ul a:hover,
.lpy-band > p a:hover {
	text-decoration: underline;
}

.lpy-content .lpy-btn,
.lpy-content .lpy-btn:hover {
	text-decoration: none;
}

.lpy-content .lpy-btn--primary,
.lpy-content .lpy-btn--dl,
.lpy-content .lpy-btn--alt {
	color: #ffffff;
}

.lpy-updated,
.lpy-content .lpy-updated {
	font-size: 13px;
	color: var(--lpy-muted);
	border-top: 1px solid #e2e8f0;
	padding-top: 12px;
	margin: 28px 0 0;
}

/* story block: text with a blue rule on the left */
.lpy-story {
	padding: 0 0 0 20px;
	border-left: 3px solid var(--lpy-accent);
	color: var(--lpy-muted);
	line-height: 1.7;
	margin: 0 0 16px;
}

.lpy-story p {
	margin: 0;
}

.lpy-story p + p {
	margin-top: 12px;
}

.lpy-story strong {
	color: var(--lpy-text);
}

/* ---------- Tables ---------- */
.lpy-content .wp-block-table,
.lpy-front .wp-block-table,
.lpy-band .wp-block-table {
	margin: 0 0 20px;
	overflow-x: auto;
	display: flex;
	flex-direction: column;
}

.lpy-content table,
.lpy-front table {
	width: 100%;
	border-collapse: collapse;
	background: #ffffff;
	margin: 0;
	font-size: 15px;
	color: var(--lpy-text);
}

.lpy-content th,
.lpy-content td,
.lpy-front th,
.lpy-front td {
	border: 1px solid #e2e8f0;
	padding: 10px 16px;
	text-align: left;
	vertical-align: top;
}

.lpy-content thead th,
.lpy-front thead th {
	background: #f8fafc;
	color: var(--lpy-text);
	font-weight: 600;
	white-space: nowrap;
}

.lpy-content tbody th,
.lpy-front tbody th {
	color: var(--lpy-muted);
	font-weight: 500;
}

.lpy-table--kv tbody th {
	width: 40%;
}

.lpy-table--compare tbody th[scope="row"] {
	font-weight: 700;
	white-space: nowrap;
}

.lpy-table--compare tbody th a {
	color: var(--lpy-text);
	text-decoration: none;
}

.lpy-table--compare tbody th a:hover {
	color: var(--lpy-accent);
}

.wp-block-table figcaption,
.lpy-content caption,
.lpy-front caption {
	order: -1;
	caption-side: top;
	text-align: left;
	font-size: 15px;
	font-weight: 600;
	color: var(--lpy-text);
	margin: 0;
	padding: 0 0 8px;
}

@media (max-width: 480px) {
	.lpy-content th,
	.lpy-content td,
	.lpy-front th,
	.lpy-front td {
		padding: 8px 6px;
		font-size: 12.5px;
	}
	.lpy-content thead th,
	.lpy-front thead th {
		white-space: normal;
	}
}

/* ---------- App rows ---------- */
.lpy-dir {
	margin: 0;
}

.lpy-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lpy-card {
	background: var(--lpy-card-bg);
	border: 1px solid var(--lpy-border);
	border-radius: var(--lpy-radius);
	padding: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.lpy-card:hover {
	transform: translateY(-2px);
	border-color: var(--lpy-accent);
	box-shadow: 0 10px 20px -5px rgba(37, 99, 235, .15), 0 4px 6px -4px rgba(37, 99, 235, .15);
}

.lpy-card[hidden] {
	display: none;
}

.lpy-card__info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.lpy-card__logo {
	flex-shrink: 0;
	line-height: 0;
}

.lpy-card .lpy-logo {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 14px;
	flex-shrink: 0;
}

.lpy-card__body {
	min-width: 0;
}

.lpy-card__title {
	font-family: var(--lpy-sans);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	margin: 0 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--lpy-text);
}

.lpy-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}

.lpy-card:hover .lpy-card__title a {
	color: var(--lpy-accent);
}

.lpy-card__meta {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	line-height: 1.6;
	color: var(--lpy-muted);
	margin-bottom: 2px;
	white-space: nowrap;
}

.lpy-card__meta svg {
	flex-shrink: 0;
}

.lpy-card__meta span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lpy-card__meta--bonus {
	color: var(--lpy-success);
}

.lpy-card__meta strong {
	color: var(--lpy-success);
	font-weight: 600;
}

.lpy-card__meta--withdraw strong {
	color: var(--lpy-text);
}

.lpy-card .lpy-btn {
	flex-shrink: 0;
	padding: 9px 14px;
	font-size: 13px;
}

.lpy-card .lpy-btn:hover {
	transform: scale(1.06);
	box-shadow: 0 6px 16px rgba(37, 99, 235, .28);
}

.lpy-card .lpy-btn:active {
	transform: scale(.95);
	box-shadow: 0 2px 6px rgba(37, 99, 235, .25);
}

@media (max-width: 480px) {
	.lpy-card .lpy-new {
		display: none;
	}
}

.lpy-new {
	display: inline-block;
	margin-left: 4px;
	padding: 2px 5px;
	border-radius: 999px;
	background: #f1efff;
	color: #6251ad;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.2;
	text-transform: uppercase;
	vertical-align: middle;
}

.lpy-logo {
	object-fit: cover;
}

.lpy-logo--text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: var(--lpy-accent-soft);
	color: var(--lpy-accent);
	font-weight: 700;
}

.lpy-empty,
.lpy-dir__empty {
	color: var(--lpy-muted);
}

/* search box (only used where a list has filter="1") */
.lpy-dir__bar {
	margin: 0 0 16px;
}

.lpy-search {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 420px;
	padding: 0 12px;
	background: #ffffff;
	border: 1px solid var(--lpy-border);
	border-radius: 10px;
	color: var(--lpy-muted);
}

.lpy-search:focus-within {
	border-color: var(--lpy-accent);
}

.lpy-search .lpy-ico {
	width: 16px;
	height: 16px;
}

.lpy-search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 10px 0 !important;
	font-size: 14px;
	outline: 0;
}

.lpy-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.lpy-chip {
	background: var(--lpy-section-bg);
	border: 1px solid var(--lpy-border);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--lpy-muted);
	cursor: pointer;
}

.lpy-chip.is-active {
	background: var(--lpy-accent);
	border-color: var(--lpy-accent);
	color: #ffffff;
}

.lpy-dir__more {
	text-align: center;
	margin: 20px 0 0;
}

.lpy-dir[data-lpy-visible="20"]:not(.is-expanded):not(.is-filtering) .lpy-grid > .lpy-card:nth-child(n+21) {
	display: none;
}

/* ---------- Feature strip ---------- */
.lpy-features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	padding: 24px 16px;
	margin: 0 0 8px;
	border-top: 1px solid var(--lpy-border);
	border-bottom: 1px solid var(--lpy-border);
}

.lpy-feature {
	text-align: center;
	padding: 4px 8px;
}

.lpy-feature__icon {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
	color: var(--lpy-accent);
	background: var(--lpy-accent-soft);
	border-radius: 50%;
}

.lpy-feature__icon svg {
	width: 21px;
	height: 21px;
}

.lpy-feature .lpy-feature__title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	color: var(--lpy-text);
}

.lpy-feature p {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--lpy-muted);
}

@media (max-width: 700px) {
	.lpy-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 420px) {
	.lpy-features {
		display: flex;
		flex-wrap: nowrap;
		gap: 10px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}
	.lpy-features::-webkit-scrollbar {
		display: none;
	}
	.lpy-feature {
		flex: 0 0 138px;
		scroll-snap-align: start;
		padding: 4px 6px;
	}
}

/* ---------- Collection cards: a swipe row on phones and tablets, a 3 x 2 grid on wider screens ---------- */
.lpy-hubs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 20px;
}

.lpy-hub {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	background: var(--lpy-card-bg);
	border: 1px solid var(--lpy-border);
	border-radius: var(--lpy-radius);
	padding: 18px;
	text-align: left;
	text-decoration: none;
	color: var(--lpy-muted);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.lpy-hub:hover {
	border-color: var(--lpy-accent);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -5px rgba(37, 99, 235, .15), 0 4px 6px -4px rgba(37, 99, 235, .15);
}

/* Icon and title share one row; the description and count sit below. */
.lpy-hub__head {
	display: flex;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	margin-bottom: 2px;
}

.lpy-hub__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--lpy-accent-soft);
	color: var(--lpy-accent);
	flex-shrink: 0;
}

.lpy-hub__icon svg {
	width: 18px;
	height: 18px;
}

.lpy-hub__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--lpy-text);
}

.lpy-hub:hover .lpy-hub__name {
	color: var(--lpy-accent);
}

.lpy-hub__desc {
	font-size: 13px;
	line-height: 1.55;
}

.lpy-hub__count {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: auto;
	padding-top: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--lpy-accent);
}

.lpy-hub__count svg {
	width: 15px;
	height: 15px;
	transition: transform .15s ease;
}

.lpy-hub:hover .lpy-hub__count svg {
	transform: translateX(3px);
}

@media (max-width: 900px) {
	.lpy-hubs {
		display: flex;
		gap: 10px;
		margin: 0 -20px 20px;
		padding: 2px 20px 10px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 20px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.lpy-hubs::-webkit-scrollbar {
		display: none;
	}
	.lpy-hub {
		flex: 0 0 68%;
		max-width: 250px;
		scroll-snap-align: start;
	}
	.lpy-hub:hover {
		transform: none;
	}
}

@media (max-width: 420px) {
	.lpy-hubs {
		margin: 0 -10px 20px;
		padding: 2px 10px 10px;
		scroll-padding-inline: 10px;
	}
}

/* ---------- Featured apps panel ---------- */
.lpy-featured {
	margin: 0 0 20px;
	padding: 28px;
	background: #f7f8fb;
	border: 1px solid var(--lpy-border);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(30, 41, 59, .05);
}

.lpy-featured__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lpy-featured__card {
	padding: 15px;
	background: #ffffff;
	border: 1px solid #e4e8ef;
	border-radius: 10px;
}

.lpy-featured__main {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.lpy-featured__main .lpy-logo {
	width: 54px;
	height: 54px;
	flex: 0 0 54px;
	border-radius: 10px;
}

.lpy-featured__content {
	min-width: 0;
}

.lpy-featured__content h3 {
	margin: 0 0 4px;
	font-size: 16px;
	line-height: 1.35;
	color: var(--lpy-text);
}

.lpy-featured__content p {
	margin: 0;
	color: var(--lpy-muted);
	font-size: 13px;
	line-height: 1.5;
}

.lpy-featured__action {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 12px;
	padding: 9px 12px;
	border: 1px solid #dfe5f0;
	border-radius: 7px;
	background: #fbfcff;
	color: var(--lpy-accent);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	box-sizing: border-box;
}

.lpy-featured__action:hover {
	border-color: var(--lpy-accent);
	background: var(--lpy-accent-soft);
	color: var(--lpy-accent-dark);
}

.lpy-featured__dir {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--lpy-border);
	text-align: center;
}

.lpy-featured__dir-title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	color: var(--lpy-text);
}

.lpy-chiplinks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.lpy-chiplinks a {
	padding: 4px 8px;
	border: 1px solid #e1e6ef;
	border-radius: 999px;
	background: #ffffff;
	color: #526176;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
}

.lpy-chiplinks a:hover {
	border-color: var(--lpy-accent);
	color: var(--lpy-accent);
}

.lpy-featured__all {
	display: inline-flex;
	margin-top: 18px;
	color: var(--lpy-accent);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.lpy-featured__all:hover {
	color: var(--lpy-accent-dark);
	text-decoration: underline;
}

@media (max-width: 600px) {
	.lpy-featured {
		padding: 20px 12px;
	}
	.lpy-featured__card {
		padding: 12px;
	}
	.lpy-featured__main {
		gap: 10px;
	}
	.lpy-featured__main .lpy-logo {
		width: 46px;
		height: 46px;
		flex-basis: 46px;
		border-radius: 8px;
	}
	.lpy-featured__content h3 {
		font-size: 14px;
	}
	.lpy-featured__content p {
		font-size: 12px;
	}
}

/* ---------- Steps, notes, pros and cons ---------- */
ol.lpy-steps {
	counter-reset: lpy-step;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

ol.lpy-steps > li {
	position: relative;
	margin-bottom: 10px;
	padding: 12px 14px 12px 50px;
	border: 1px solid var(--lpy-border);
	border-radius: 12px;
	background: var(--lpy-card-bg);
	font-size: 14px;
	line-height: 1.65;
	color: var(--lpy-muted);
}

ol.lpy-steps > li::before {
	counter-increment: lpy-step;
	content: counter(lpy-step);
	position: absolute;
	top: 12px;
	left: 14px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--lpy-accent-soft);
	color: var(--lpy-accent);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
}

.lpy-note,
.lpy-risk {
	border-radius: 10px;
	padding: 12px 14px;
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
}

.lpy-note {
	background: var(--lpy-accent-soft);
	border: 1px solid #cfdcf7;
}

.lpy-risk {
	background: #fff5f5;
	border: 1px solid #feb2b2;
}

.lpy-note p,
.lpy-risk p {
	margin: 0 0 6px !important;
	font-size: 14px;
}

.lpy-note p:last-child,
.lpy-risk p:last-child {
	margin-bottom: 0 !important;
}

/* Pros and cons: two tap-to-open rows styled like the FAQs, with a check or cross per point. */
.lpy-proscons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 22px;
}

.lpy-proscons > details {
	background: var(--lpy-card-bg);
	border: 1px solid var(--lpy-border);
	border-radius: 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.lpy-proscons > details:hover,
.lpy-proscons > details[open] {
	border-color: var(--lpy-accent);
}

.lpy-proscons > details[open] {
	box-shadow: 0 6px 16px rgba(37, 99, 235, .08);
}

.lpy-proscons summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	cursor: pointer;
	list-style: none;
	font-size: 15px;
	font-weight: 700;
	color: var(--lpy-text);
}

.lpy-proscons summary::-webkit-details-marker {
	display: none;
}

.lpy-proscons summary::before {
	content: "";
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	border-radius: 50%;
	background: #ecfdf5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}

.lpy-proscons > .lpy-cons summary::before {
	background: #fef2f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 15px no-repeat;
}

.lpy-proscons summary::after {
	content: "";
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-right: 2px solid var(--lpy-accent);
	border-bottom: 2px solid var(--lpy-accent);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.lpy-proscons > details[open] summary::after {
	transform: rotate(-135deg);
}

.lpy-proscons ul {
	list-style: none;
	margin: 0 16px !important;
	padding: 12px 0 14px !important;
	border-top: 1px solid var(--lpy-border);
}

.lpy-proscons li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 24px;
	font-size: 14px;
	line-height: 1.55;
}

.lpy-proscons li:last-child {
	margin-bottom: 0;
}

.lpy-proscons li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.lpy-proscons > .lpy-cons li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");
}

/* ---------- FAQ ---------- */
.lpy-faq {
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 20px;
}

.lpy-faq__title {
	font-size: 28px !important;
	margin: 0 0 6px !important;
}

/* ---------- App page: "What You Need to Play X" requirements table above the FAQs ---------- */
.lpy-req {
	max-width: 720px;
	margin: 0 0 36px;
}

.lpy-req__title {
	font-size: 28px !important;
	margin: 0 0 6px !important;
}

.lpy-req__note {
	margin: 0 0 14px;
	color: var(--lpy-muted);
	font-size: 13.5px;
	line-height: 1.55;
}

.lpy-req__table {
	margin: 0;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: hidden;
}

.lpy-req__table table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 14.5px;
	color: var(--lpy-text);
}

.lpy-req__table th,
.lpy-req__table td {
	padding: 11px 16px;
	border: 0;
	border-bottom: 1px solid #e2e8f0;
	text-align: left;
	vertical-align: middle;
}

.lpy-req__table tbody tr:last-child th,
.lpy-req__table tbody tr:last-child td {
	border-bottom: 0;
}

.lpy-req__table thead th {
	background: #f8fafc;
	color: var(--lpy-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.lpy-req__table tbody th {
	width: 42%;
	color: var(--lpy-text);
	font-weight: 600;
}

.lpy-req__table tbody tr:nth-child(even) {
	background: #fbfcfe;
}

.lpy-req__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.lpy-req__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	border-radius: 50%;
	background: var(--lpy-accent-soft);
	color: var(--lpy-accent);
}

.lpy-req__icon svg {
	width: 14px;
	height: 14px;
}

@media (max-width: 480px) {
	.lpy-req__table th,
	.lpy-req__table td {
		padding: 9px 10px;
		font-size: 13px;
	}
	.lpy-req__label {
		gap: 8px;
	}
}

.lpy-faq__item {
	background: var(--lpy-card-bg);
	border: 1px solid var(--lpy-border);
	border-radius: 10px;
	padding: 14px 18px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.lpy-faq__item:hover {
	border-color: var(--lpy-accent);
}

.lpy-faq__item[open] {
	border-color: var(--lpy-accent);
	box-shadow: 0 6px 16px rgba(37, 99, 235, .08);
}

.lpy-faq__item summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--lpy-text);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.lpy-faq__item summary::-webkit-details-marker {
	display: none;
}

.lpy-faq__item summary::after {
	content: "";
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--lpy-accent);
	border-bottom: 2px solid var(--lpy-accent);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.lpy-faq__item[open] summary::after {
	transform: rotate(-135deg);
}

.lpy-faq__a p {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--lpy-border);
	color: var(--lpy-muted);
	line-height: 1.7;
}

.lpy-faq__a a {
	color: var(--lpy-accent);
	text-decoration: none;
}

/* ---------- Legal notices ---------- */
.lpy-alerts-section {
	padding-top: 0;
}

.lpy-alerts {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 20px 0 0;
}

.lpy-alert {
	border-radius: 10px;
	padding: 12px 14px;
	border: 1px solid var(--lpy-border);
	background: #ffffff;
	font-size: 13px;
	line-height: 1.55;
	color: var(--lpy-muted);
}

.lpy-alert p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--lpy-muted);
}

.lpy-reviews {
	padding: 42px 20px 48px;
	border-top: 1px solid var(--lpy-border);
	background: linear-gradient(135deg, #f6f9ff 0%, #edf5ff 100%);
}

.lpy-reviews__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.lpy-reviews__header {
	margin: 0 auto 28px;
	text-align: center;
}

.lpy-reviews__eyebrow {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid #d5e2f8;
	border-radius: 999px;
	background: rgba(255, 255, 255, .7);
	color: var(--lpy-accent-dark);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.lpy-reviews__header h2 {
	margin: 12px 0 0;
	font-size: 28px;
	line-height: 1.2;
}

.lpy-reviews__header p {
	max-width: 650px;
	margin: 11px auto 0;
	color: var(--lpy-muted);
	font-size: 13px;
	line-height: 1.55;
}

.lpy-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.lpy-review-card {
	display: flex;
	flex-direction: column;
	min-height: 276px;
	padding: 22px;
	border: 1px solid #e1e8f4;
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0 10px 24px rgba(30, 64, 120, .08);
}

.lpy-review-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 34px;
}

.lpy-review-card__stars {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 7px;
	color: #df9b10;
}

.lpy-review-card__stars-track {
	position: relative;
	display: inline-block;
	color: #d7e0ec;
	font-size: 17px;
	letter-spacing: 1px;
	line-height: 1;
	white-space: nowrap;
}

.lpy-review-card__stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: #df9b10;
	white-space: nowrap;
}

.lpy-review-card__stars small {
	color: var(--lpy-muted);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
}

.lpy-review-card__quote {
	color: #d5e2f8;
	font-size: 45px;
	font-weight: 800;
	line-height: .7;
}

.lpy-review-card p {
	flex: 1;
	margin: 11px 0 20px;
	color: var(--lpy-text);
	font-size: 14px;
	font-style: italic;
	line-height: 1.65;
}

.lpy-review-card__footer {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--lpy-border);
}

.lpy-review-card__avatar {
	display: grid;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	place-items: center;
	border-radius: 50%;
	color: #ffffff;
	font-size: 12px;
	font-weight: 800;
}

.lpy-review-card--1 .lpy-review-card__avatar {
	background: linear-gradient(135deg, #2563eb, #60a5fa);
}

.lpy-review-card--2 .lpy-review-card__avatar {
	background: linear-gradient(135deg, #0f766e, #2dd4bf);
}

.lpy-review-card--3 .lpy-review-card__avatar {
	background: linear-gradient(135deg, #ea580c, #fb923c);
}

.lpy-review-card__source {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.lpy-review-card__source strong {
	color: var(--lpy-text);
	font-size: 13px;
}

.lpy-review-card__source span {
	color: var(--lpy-muted);
	font-size: 10px;
}

@media (max-width: 760px) {
	.lpy-reviews {
		padding-bottom: 12px;
	}

	.lpy-reviews__header {
		margin-bottom: 22px;
	}

	.lpy-reviews__header p {
		max-width: none;
	}

	.lpy-reviews__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(260px, calc(100vw - 96px));
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: 8px;
		scroll-snap-type: x mandatory;
		scrollbar-color: #afc4e8 transparent;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.lpy-review-card {
		min-height: 276px;
		scroll-snap-align: start;
	}
}

.lpy-alert a {
	color: var(--lpy-accent);
	text-decoration: none;
}

.lpy-alert__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.lpy-alert .lpy-alert__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--lpy-text);
}

.lpy-alert__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	flex-shrink: 0;
}

.lpy-alert--warning {
	background: #fff5f5;
	border-color: #feb2b2;
}

.lpy-alert--warning .lpy-alert__icon {
	background: #fed7d7;
	color: #e53e3e;
}

.lpy-alert--info {
	background: #fcfbfe;
	border-color: #edd8fd;
}

.lpy-alert--info .lpy-alert__icon {
	background: #f0e3fc;
	color: #8b3fd6;
}

/* ---------- Guide cards ---------- */
.lpy-post-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lpy-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 12px;
	margin: 0 0 20px;
}

.lpy-post-more {
	margin: 0;
	text-align: center;
}

/* Phones: the guide cards become a swipe row (the next card peeks in), like the collection cards. */
@media (max-width: 640px) {
	.lpy-post-grid {
		display: flex;
		gap: 10px;
		margin: 0 -20px 14px;
		padding: 2px 20px 10px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 20px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.lpy-post-grid::-webkit-scrollbar {
		display: none;
	}
	.lpy-post-grid .lpy-post-card {
		flex: 0 0 85%;
		scroll-snap-align: start;
	}
	.lpy-post-grid .lpy-post-card:hover {
		transform: none;
	}
}

@media (max-width: 420px) {
	.lpy-post-grid {
		margin: 0 -10px 14px;
		padding: 2px 10px 10px;
		scroll-padding-inline: 10px;
	}
}

.lpy-post-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #e4e8ef;
	border-radius: 14px;
	overflow: hidden;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.lpy-post-card:hover {
	transform: translateY(-2px);
	border-color: var(--lpy-accent);
	box-shadow: 0 10px 20px -5px rgba(37, 99, 235, .15), 0 4px 6px -4px rgba(37, 99, 235, .15);
}

.lpy-post-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 1;
	background: var(--lpy-accent-soft);
	overflow: hidden;
}

.lpy-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lpy-post-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.lpy-post-card__date {
	display: block;
	margin-bottom: 4px;
	color: var(--lpy-muted);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.lpy-post-card__body h3 {
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.35;
	color: var(--lpy-text);
}

.lpy-post-card__body h3 a {
	color: inherit;
	text-decoration: none;
}

.lpy-post-card:hover .lpy-post-card__body h3 a {
	color: var(--lpy-accent);
}

.lpy-post-card__body p {
	margin: 0 0 12px;
	color: var(--lpy-muted);
	font-size: 13px;
	line-height: 1.5;
	flex: 1;
}

.lpy-post-card__action {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #dfe5f0;
	border-radius: 7px;
	background: #fbfcff;
	color: var(--lpy-accent);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	box-sizing: border-box;
}

.lpy-post-card__action:hover {
	border-color: var(--lpy-accent);
	background: var(--lpy-accent-soft);
	color: var(--lpy-accent-dark);
}

/* pagination */
.lpy-pagination {
	margin-top: 28px;
}

.lpy-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.lpy-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border-radius: 8px;
	border: 1px solid var(--lpy-border);
	background: var(--lpy-card-bg);
	color: var(--lpy-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}

.lpy-pagination .page-numbers.current {
	background: var(--lpy-accent);
	border-color: var(--lpy-accent);
	color: #ffffff;
}

/* ---------- Single guide ---------- */
.lpy-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--lpy-accent);
	text-decoration: none;
}

.lpy-back-link:hover {
	color: var(--lpy-accent-dark);
}

.lpy-content .lpy-post-meta {
	margin: -2px 0 20px;
	color: var(--lpy-muted);
	font-size: 13px;
	font-weight: 600;
}

.lpy-post-thumb {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lpy-radius);
	margin-bottom: 24px;
}

/* ---------- 404: app list under Astra's 404 message ---------- */
.lpy-404-apps {
	margin: 32px 0 8px;
}

.lpy-404-apps > h2 {
	font-size: 24px;
	margin: 0 0 6px;
}

.lpy-404-apps .lpy-sub {
	margin-bottom: 16px;
}

.lpy-searchform {
	display: flex;
	gap: 8px;
	max-width: 460px;
	margin: 0 0 14px;
}

.lpy-searchform input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--lpy-border);
	border-radius: 10px;
	font-size: 15px;
	background: #ffffff;
}

.lpy-searchform input[type="search"]:focus {
	border-color: var(--lpy-accent);
	outline: 0;
}

.lpy-searchform .lpy-btn {
	padding: 10px 18px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
	.lpy-btn:hover,
	.lpy-card:hover,
	.lpy-post-card:hover {
		transform: none;
	}
}